Merge pull request #29 from TeamWertarbyte/breaking/muiv5-and-typescript

feat: migrate to MUI v6

BREAKING CHANGE: Requires MUI v5 or v6

.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/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/[email protected]
+        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,9 @@
+{
+  "branches": ["main"],
+  "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-2020 Wertarbyte and contributors
+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,9 +1,6 @@
 # Material-UI Dots
 
 [![npm Package](https://img.shields.io/npm/v/material-ui-dots.svg)](https://www.npmjs.com/package/material-ui-dots)
-[![Build Status](https://travis-ci.org/TeamWertarbyte/material-ui-dots.svg?branch=master)](https://travis-ci.org/TeamWertarbyte/material-ui-dots)
-[![Coverage Status](https://coveralls.io/repos/github/TeamWertarbyte/material-ui-dots/badge.svg?branch=master)](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)
 
 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.
 
@@ -12,33 +9,36 @@ This component gives you animated pagination dots as seen in the [Material Desig
 
 ## 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" />