refactor!: rewrite for MUI 5 and package upgrades

davityavryan · Apr 20, 2023 · 084671e · 084671e
1 parent 100c00a
commit 084671e
Show file tree

Hide file tree

Showing 206 changed files with 5,418 additions and 9,055 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -7,4 +7,4 @@
 
 node_modules/
 
-build/
+dist/
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,10 +1,6 @@
 {
-    "extends": [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:prettier/recommended",
-        "plugin:jest-playwright/recommended"
-    ],
-    "plugins": ["react-hooks", "prettier", "jest"],
+    "extends": ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
+    "plugins": ["react-hooks", "prettier"],
     "rules": {
         "@typescript-eslint/explicit-module-boundary-types": "off"
     }

diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -8,7 +8,7 @@ on:
 
 jobs:
     build:
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-latest
         name: Build on Node LTS
         steps:
             -   uses: actions/checkout@v3

diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -0,0 +1,55 @@
+name: GitHub Pages
+
+on:
+    push:
+        branches: [master]
+
+jobs:
+    build:
+        runs-on: ubuntu-latest
+        name: Build and Deploy
+        steps:
+            -   uses: actions/checkout@v3
+
+            -   name: Setup node
+                uses: actions/setup-node@v3
+                with:
+                    node-version: 'lts/*'
+                    cache: 'yarn'
+
+            -   name: Cache node modules
+                uses: actions/cache@v3
+                id: cache-modules
+                env:
+                    cache-name: cache-node-${{ matrix.node }}-modules
+                with:
+                    path: ./node_modules
+                    key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./yarn.lock') }}
+                    restore-keys: |
+                        ${{ runner.os }}-build-${{ env.cache-name }}-
+
+            -   name: Install dependencies
+                if: steps.cache-modules.outputs.cache-hit != 'true'
+                run: yarn install --prefer-offline --frozen-lockfile
+
+            -   name: Cache Docs node modules
+                uses: actions/cache@v3
+                id: cache-docs-modules
+                env:
+                    cache-name: cache-node-${{ matrix.node }}-docs-modules
+                with:
+                    path: ./docs/node_modules
+                    key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('./yarn.lock') }}
+                    restore-keys: |
+                        ${{ runner.os }}-build-${{ env.cache-name }}-
+
+            -   name: Install Docs dependencies
+                if: steps.cache-docs-modules.outputs.cache-hit != 'true'
+                run: yarn install --prefer-offline --frozen-lockfile --cwd docs
+
+            -   name: Deploy GH-Pages
+                run: |
+                    git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+                    yarn docs:deploy -u "github-actions-bot <github-actions-bot@users.noreply.github.com>" -m "${{ github.event.head_commit.message }}"
+                env:
+                    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -7,7 +7,7 @@ on:
 
 jobs:
     eslint:
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-latest
         steps:
             -   uses: actions/checkout@v3
 

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -8,15 +8,12 @@ on:
 
 jobs:
     build-and-test:
-        runs-on: ubuntu-22.04
+        runs-on: ubuntu-latest
         strategy:
             fail-fast: false
             matrix:
                 experimental: [false] # Shadow CI Jobs
                 node: ['16', '18', '19'] # Refer to https://nodejs.org/en/about/releases/ for supported versions
-                include:
-                    - node: '18'
-                      experimental: true
 
         name: Test on Node v${{ matrix.node }}
         continue-on-error: ${{ matrix.experimental }}
@@ -29,6 +26,9 @@ jobs:
                     node-version: ${{ matrix.node }}
                     cache: 'yarn'
 
+            -   name: Setup ignore engines flag for yarn
+                run: yarn config set ignore-engines true
+
             -   name: Cache node modules
                 uses: actions/cache@v3
                 id: cache-modules
@@ -72,14 +72,19 @@ jobs:
 
             -   name: Install Playwright browser
                 if: steps.cache-playwright.outputs.cache-hit != 'true'
-                run: yarn --cwd ./docs playwright install chromium
+                run: yarn playwright install chromium
 
             -   name: Build package
                 run: yarn build
 
             -   name: Run tests
                 env:
-                    CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
                     NODE_ENV: test
                 run:
-                    yarn test:coverage && yarn codecov
+                    yarn test
+
+            -   name: Collect coverage
+                uses: codecov/codecov-action@v3
+                with:
+                    fail_ci_if_error: true
+                    flags: Node-v${{ matrix.node }}
diff --git a/.gitignore b/.gitignore
@@ -20,5 +20,4 @@ report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 .envrc
 .env.*
 
-docs/public/
-build/
+dist/
diff --git a/.jest/jest.config.e2e.js b/.jest/jest.config.e2e.js
diff --git a/.jest/jest.config.js b/.jest/jest.config.js
diff --git a/.jest/jest.config.unit.js b/.jest/jest.config.unit.js
diff --git a/.jest/jest.globals.js b/.jest/jest.globals.js
diff --git a/.jest/set-env-vars.js b/.jest/set-env-vars.js
diff --git a/.npmignore b/.npmignore
@@ -20,7 +20,7 @@ docs
 .prettierignore
 .prettierrc.json
 babel.config.js
-copy-files.js
+copy-files.ts
 renovate.json
 tsconfig.json
 yarn.lock
diff --git a/.prettierignore b/.prettierignore
@@ -8,4 +8,4 @@ coverage/
 
 node_modules/
 
-build/
+dist/
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -35,7 +35,7 @@ Minor fixes in README file and project scripts
 
 ### Breaking change
 
-UMD packages use to have wrong name. changed `material-ui` to `material-ui-chameleon`.
+UMD packages used to have wrong name. changed `material-ui` to `material-ui-chameleon`.
 
 ## v0.1.0-alpha.1
 

diff --git a/README.md b/README.md
@@ -1,44 +1,40 @@
 <p align="center">
-    <a href="https://davityavryan.github.io/material-ui-chameleon" rel="noopener" target="_blank">
-        <img width="256" src="https://raw.githubusercontent.com/davityavryan/material-ui-chameleon/master/docs/src/static/img/logo.svg?sanitize=true" alt="Material-UI Chameleon">
+    <a href="https://davityavryan.github.io/mui-chameleon" rel="noopener" target="_blank">
+        <img width="256" src="https://raw.githubusercontent.com/davityavryan/mui-chameleon/master/docs/src/static/img/logo.svg?sanitize=true" alt="MUI Chameleon">
     </a>
 </p>
 
-<h1 align="center">Material-UI Chameleon</h1>
+<h1 align="center">MUI Chameleon</h1>
 
 <div align="center">
 
 ## Warning: [WIP] This is not yet ready for production
 
-[Material-UI](https://material-ui.com/) theme editor.
+[MUI](https://mui.com/) theme editor.
 
-[![npm package](https://img.shields.io/npm/v/material-ui-chameleon/latest.svg)](https://www.npmjs.com/package/material-ui-chameleon)
-[![npm downloads](https://img.shields.io/npm/dm/material-ui-chameleon.svg)](https://www.npmjs.com/package/material-ui-chameleon)
-[![BundlePhobia](https://badgen.net/bundlephobia/minzip/material-ui-chameleon)](https://bundlephobia.com/result?p=material-ui-chameleon)
-[![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/davityavryan/material-ui-chameleon.svg)](https://isitmaintained.com/project/davityavryan/material-ui-chameleon 'Average time to resolve an issue')
+[![npm package](https://img.shields.io/npm/v/mui-chameleon/latest.svg)](https://www.npmjs.com/package/mui-chameleon)
+[![npm downloads](https://img.shields.io/npm/dm/mui-chameleon.svg)](https://www.npmjs.com/package/mui-chameleon)
+[![BundlePhobia](https://badgen.net/bundlephobia/minzip/mui-chameleon)](https://bundlephobia.com/result?p=mui-chameleon)
+[![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/davityavryan/mui-chameleon.svg)](https://isitmaintained.com/project/davityavryan/mui-chameleon 'Average time to resolve an issue')
 
-[![Dependencies](https://img.shields.io/david/davityavryan/material-ui-chameleon)](https://david-dm.org/davityavryan/material-ui-chameleon/master)
-[![DevDependencies](https://img.shields.io/david/dev/davityavryan/material-ui-chameleon)](https://david-dm.org/davityavryan/material-ui-chameleon/master?type=dev)
-[![PeerDependencies](https://img.shields.io/david/peer/davityavryan/material-ui-chameleon)](https://david-dm.org/davityavryan/material-ui-chameleon/master?type=peer)
-
-[![Github Action build](https://github.com/davityavryan/material-ui-chameleon/actions/workflows/build.yml/badge.svg)](https://github.com/davityavryan/material-ui-chameleon/actions/workflows/build.yml?branch=master&event=push)
-[![Github Action test](https://github.com/davityavryan/material-ui-chameleon/actions/workflows/test.yml/badge.svg)](https://github.com/davityavryan/material-ui-chameleon/actions/workflows/test.yml?branch=master&event=push)
-[![codecov](https://codecov.io/gh/davityavryan/material-ui-chameleon/branch/master/graph/badge.svg?token=FCLZL0XTXM)](https://codecov.io/gh/davityavryan/material-ui-chameleon)
+[![Github Action build](https://github.com/davityavryan/mui-chameleon/actions/workflows/build.yml/badge.svg)](https://github.com/davityavryan/mui-chameleon/actions/workflows/build.yml?branch=master&event=push)
+[![Github Action test](https://github.com/davityavryan/mui-chameleon/actions/workflows/test.yml/badge.svg)](https://github.com/davityavryan/mui-chameleon/actions/workflows/test.yml?branch=master&event=push)
+[![codecov](https://codecov.io/gh/davityavryan/mui-chameleon/branch/master/graph/badge.svg?token=FCLZL0XTXM)](https://codecov.io/gh/davityavryan/mui-chameleon)
 
 [![Buy me a coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/davityavryan)
 
 </div>
 
 ## Installation
 
-Material-UI Chameleon is available as an [npm package](https://www.npmjs.com/package/material-ui-chameleon).
+MUI Chameleon is available as an [npm package](https://www.npmjs.com/package/mui-chameleon).
 
 ```sh
 // with npm
-npm install material-ui-chameleon
+npm install mui-chameleon
 
 // with yarn
-yarn add material-ui-chameleon
+yarn add mui-chameleon
 ```
 
 ## Usage
@@ -49,10 +45,10 @@ Here is a quick example to get you started, **it's all you need**:
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import ThemeProvider from 'material-ui-chameleon/ThemeProvider';
-import SideBarEditor from 'material-ui-chameleon/SideBarEditor';
+import ThemeProvider from 'mui-chameleon/ThemeProvider';
+import SideBarEditor from 'mui-chameleon/SideBarEditor';
 
-// import { ThemeProvider, SideBarEditor } from 'material-ui-chameleon';
+// import { ThemeProvider, SideBarEditor } from 'mui-chameleon';
 
 function App() {
     const showEditor = true; // of course
@@ -74,8 +70,8 @@ ReactDOM.render(<App />, document.querySelector('#app'));
 ## Acknowledgments
 
 -   Logo Design by Zara Magumyan. See her [Dribbble](https://dribbble.com/zmagumyan) for more awesome designs.
--   Some bundling Tools and scripts are used from [Material-UI](https://github.com/mui-org/material-ui) packages. This
-    makes my job easier, faster and compatibility of this package better with Material-UI packages.
+-   Some bundling Tools and scripts are used from [MUI](https://github.com/mui-org/mui) packages. This makes my job
+    easier, faster and compatibility of this package better with MUI packages.
 
 ## License
 

diff --git a/babel.config.js b/babel.config.js
@@ -1,8 +1,15 @@
 const target = process.env.TARGET || 'cjs';
 
 const presets = ['@babel/preset-typescript', '@babel/preset-react'];
+const importPaths = {
+    base: '@mui/base',
+    material: '@mui/material',
+    system: '@mui/system',
+    utils: '@mui/utils',
+    icons: '@mui/icons-material',
+};
 
-// We release a ES version of Material-UI Chameleon.
+// We release a ES version of MUI Chameleon.
 // It's something that matches the latest official supported features of JavaScript.
 // Nothing more (stage-1, etc), nothing less (require, etc).
 if (target !== 'es') {
@@ -15,32 +22,20 @@ const plugins = [
     '@babel/plugin-transform-object-assign', // for IE 11 support
     '@babel/plugin-transform-react-constant-elements',
 
-    // See https://material-ui.com/guides/minimizing-bundle-size/
-    [
+    // See https://mui.com/material-ui/guides/minimizing-bundle-size/
+    ...Object.entries(importPaths).map(([name, path]) => [
         'babel-plugin-import',
         {
-            libraryName: '@material-ui/core',
+            libraryName: path,
             libraryDirectory: target === 'cjs' ? '' : 'esm',
             camel2DashComponentName: false,
         },
-        'core',
-    ],
-    [
-        'babel-plugin-import',
-        {
-            libraryName: '@material-ui/icons',
-            libraryDirectory: target === 'cjs' ? '' : 'esm',
-            camel2DashComponentName: false,
-        },
-        'icons',
-    ],
+        name,
+    ]),
 ];
 
 if (process.env.NODE_ENV !== 'test') {
     plugins.push(['babel-plugin-react-remove-properties', { properties: ['data-testid'] }]);
 }
 
-module.exports = {
-    presets,
-    plugins,
-};
+export default { presets, plugins };