.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/FUNDING.yml

@@ -0,0 +1,4 @@
+# These are supported funding model platforms
+
+github: [leMaik,saschb2b]
+ko_fi: wertarbyte

.github/workflows/pr.yml

@@ -0,0 +1,33 @@
+name: 'Check PR'
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - synchronize
+      - reopened
+
+jobs:
+  check-code:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Lint code
+        run: yarn lint
+      - name: Build library code
+        run: yarn build
+  check-versioning:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v3.4.2
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -0,0 +1,29 @@
+name: 'Create release'
+
+on: [workflow_dispatch]
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org/'
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      - name: Lint code
+        run: yarn lint
+      - name: Build library code
+        run: yarn build
+      - name: release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: npx semantic-release

.gitignore

@@ -1,5 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
-build
-lib
-coverage
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.npmignore

@@ -1 +1,3 @@
-**/*
+node_modules
+
+src/*

.prettierignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "endOfLine": "auto"
+}

.releaserc.json

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    "@semantic-release/github",
+    "@semantic-release/npm"
+  ]
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016-2017 Wertarbyte
+Copyright (c) 2024 Wertarbyte and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

README.md

@@ -1,44 +1,44 @@
 # Material-UI Dots
 
-[![npm Package](https://img.shields.io/npm/v/material-ui-dots/next.svg)](https://www.npmjs.com/package/material-ui-dots)
-[![Build Status](https://travis-ci.org/TeamWertarbyte/material-ui-dots.svg?branch=next)](https://travis-ci.org/TeamWertarbyte/material-ui-dots)
-[![Coverage Status](https://coveralls.io/repos/github/TeamWertarbyte/material-ui-dots/badge.svg?branch=next)](https://coveralls.io/github/TeamWertarbyte/material-ui-dots?branch=next)
-[![Standard - JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+[![npm Package](https://img.shields.io/npm/v/material-ui-dots.svg)](https://www.npmjs.com/package/material-ui-dots)
 
 This component gives you animated pagination dots as seen in the [Material Design specs][material-specs] and in the quick settings menu of Android N. The dots were extracted from our [auto-rotating carousel][material-auto-rotating-carousel] component.
 
-[material-specs]: https://material.io/guidelines/growth-communications/onboarding.html#onboarding-top-user-benefits
+[material-specs]: https://material.io/design/communication/onboarding.html#top-user-benefits-model
 [material-auto-rotating-carousel]: https://github.com/TeamWertarbyte/material-auto-rotating-carousel
 
 ## Installation
 ```shell
-npm i --save material-ui-dots
+yarn add material-ui-dots
 ```
 
 ## Usage
 
 There is only a single `Dots` component which is to be used in controlled mode. The following example component will display five dots and select a dot when clicking on it.
 
 ```js
-import React from 'react'
-import Dots from 'material-ui-dots'
-
-class Demo extends React.Component {
-  constructor (props) {
-    super(props)
-    this.state = { index: 0 }
-  }
-
-  render () {
-    return (
-      <Dots
-        index={this.state.index}
-        count={5}
-        onDotClick={(index) => this.setState({ index })}
-      />
-    )
-  }
-}
+import * as React from 'react'
+import { Dots } from 'material-ui-dots'
+import { Box } from '@mui/material';
+
+export const App: React.FC = () => {
+  const [index, setIndex] = React.useState<number>(0);
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        borderRadius: 6,
+        pb: 0.5,
+        width: 200,
+      }}
+    >
+      <Dots index={index} count={5} onDotClick={(value) => setIndex(value)} />
+    </Box>
+  );
+};
 ```
 
 ## License

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Dots - React Material UI component</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

lib/components/Dots/Dots.tsx

@@ -0,0 +1,86 @@
+import React, { useEffect, useState } from 'react';
+import Paper from '@mui/material/Paper';
+import Box from '@mui/material/Box';
+import { SxProps, Theme } from '@mui/material/styles';
+
+interface DotsProps {
+  count: number;
+  index: number;
+  sx?: SxProps<Theme>;
+  onDotClick?: (
+    index: number,
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+  ) => void;
+}
+
+export const Dots: React.FC<DotsProps> = ({ count, index, sx, onDotClick }) => {
+  const [previousIndex, setPreviousIndex] = useState<number>(index);
+
+  useEffect(() => {
+    if (index !== previousIndex) {
+      const timeout = setTimeout(() => {
+        setPreviousIndex(index);
+      }, 400);
+      return () => clearTimeout(timeout);
+    }
+  }, [index, previousIndex]);
+
+  const handleDotClick = (
+    dotIndex: number,
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>,
+  ) => {
+    if (onDotClick) {
+      onDotClick(dotIndex, event);
+    }
+  };
+
+  return (
+    <Box sx={{ width: count * 16, ...sx }}>
+      <Box sx={{ position: 'relative', padding: '20px 0 28px' }}>
+        {[...Array(count).keys()].map((i) => (
+          <Box
+            key={i}
+            sx={{
+              width: 8,
+              height: 8,
+              padding: 0.5,
+              position: 'absolute',
+              left: i * 16,
+              cursor: onDotClick ? 'pointer' : 'inherit',
+            }}
+            onClick={(event) => handleDotClick(i, event)}
+          >
+            <Paper
+              elevation={0}
+              sx={{
+                width: 8,
+                height: 8,
+                background: '#fff',
+                borderRadius: 4,
+                transition: 'all 400ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+                opacity:
+                  i >= Math.min(previousIndex, index) &&
+                  i <= Math.max(previousIndex, index)
+                    ? 0
+                    : 0.5,
+              }}
+            />
+          </Box>
+        ))}
+        <Paper
+          elevation={0}
+          sx={{
+            position: 'absolute',
+            marginTop: 0.5,
+            left: Math.min(previousIndex, index) * 16 + 4,
+            width: Math.abs(previousIndex - index) * 16 + 8,
+            height: 8,
+            background: '#fff',
+            borderRadius: 4,
+            transition: 'all 400ms cubic-bezier(0.4, 0.0, 0.2, 1)',
+          }}
+        />
+      </Box>
+    </Box>
+  );
+};

lib/components/Dots/index.ts

@@ -0,0 +1 @@
+export * from './Dots.tsx';

lib/material-ui-dots.ts

@@ -0,0 +1 @@
+export * from './components/Dots';

lib/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />