93 new mui5 (#163)

* refactor: migrate to mui5

.eslintrc

@@ -1,18 +1,19 @@
 {
   "parser": "@typescript-eslint/parser",
   "extends": [
-    "standard-react",
-    "plugin:prettier/recommended",
     "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/eslint-recommended",
-    "plugin:@typescript-eslint/recommended"
+    "prettier",
+    "plugin:prettier/recommended",
   ],
   "env": {
     "node": true,
     "browser": true
   },
   "parserOptions": {
     "ecmaVersion": 2020,
+    "sourceType": "module",
     "ecmaFeatures": {
       "legacyDecorators": true,
       "jsx": true
@@ -30,16 +31,24 @@
     "react/jsx-fragments": 0,
     "react/no-unused-prop-types": 0,
     "import/export": 0,
+    // "no-unused-vars": "off",
+    // "@typescript-eslint/no-unused-vars": [
+    //   "error"
+    // ],
     // disable the rule for all files
     "@typescript-eslint/explicit-function-return-type": "off",
+    // enum error
+    // "@typescript-eslint/no-use-before-define": "off",
     // note you must disable the base rule as it can report incorrect errors
     "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": ["error"]
   },
   "overrides": [
     {
       // enable the rule specifically for TypeScript files
-      "files": ["*.ts", "*.tsx"],
+      "files": [
+        "*.ts",
+        "*.tsx"
+      ],
       "rules": {
         "@typescript-eslint/explicit-function-return-type": [
           "error",

.github/workflows/storybook.yml

@@ -1,8 +1,8 @@
 name: Deploy Storybook to Github Pages
 on: 
   push:
-    # branches:
-    #     - main
+    branches:
+        - main
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest

.github/workflows/test.yml

@@ -1,29 +1,25 @@
-name: Node CI
+name: Storyboook tests
 
 on: [push]
 
 jobs:
-  build-node:
+  storybook-test:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
       - name: Use Node.js 16.x
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
           node-version: 16.x
-      - name: Get npm cache directory
-        id: npm-cache
+      - name: yarn install
+        run: yarn
+      - name: install playwright
+        run: npx playwright install --with-deps
+      - name: build storybook
+        run: yarn build-storybook --quiet
+      - name: start and test storybook 
         run: |
-          echo "::set-output name=dir::$(npm config get cache)"
-      - uses: actions/cache@v2
-        with:
-          path: ${{ steps.npm-cache.outputs.dir }}
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
-      - name: yarn install, build, and test
-        run: |
-          yarn
-          yarn build
-      # yarn test 
+          npx concurrently -k -s first -n "SB,TEST" -c "magenta,blue" \
+            "npx http-server storybook-static --port 6006 --silent" \
+            "npx wait-on tcp:6006 && yarn storybook:test"

.gitignore

@@ -36,3 +36,5 @@ example/src/react-app-env.d.ts
 
 # storybook
 storybook-static
+.nyc_output
+coverage

.prettierrc

@@ -5,5 +5,8 @@
   "tabWidth": 2,
   "bracketSpacing": true,
   "arrowParens": "always",
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "importOrder": ["^@mui", "^react", "^@?graasp", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }

.storybook/main.js

@@ -5,6 +5,11 @@ module.exports = {
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     '@storybook/addon-docs',
+    '@storybook/addon-a11y',
+    '@storybook/addon-coverage',
   ],
   framework: '@storybook/react',
+  features: {
+    interactionsDebugger: true, // 👈 Enable playback controls
+  },
 };

.storybook/preview-head.html

@@ -0,0 +1,10 @@
+<script>
+  // mock redirection
+  window.open = ()=> {
+    console.log('window.open')
+  };  
+  // mock redirect
+  window.location.assign = ()=> {
+    console.log('window.location.assign')
+  };  
+ </script>

.storybook/preview.js

@@ -1,3 +1,6 @@
+import { ThemeProvider } from '@mui/system';
+
+import { theme } from '../src/theme';
 import './global.css';
 
 export const parameters = {
@@ -9,3 +12,54 @@ export const parameters = {
     },
   },
 };
+
+export const globalTypes = {
+  theme: {
+    name: 'Theme',
+    description: 'Global theme for components',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      // Array of plain string values or MenuItem shape (see below)
+      items: ['light', 'dark'],
+      // Property that specifies if the name of the item will be displayed
+      showName: true,
+      // Change title based on selected value
+      dynamicTitle: true,
+    },
+  },
+  direction: {
+    name: 'Direction',
+    description: 'Direction for the components',
+    defaultValue: 'ltr',
+    toolbar: {
+      items: [
+        { value: 'ltr', title: 'left-to-right' },
+        { value: 'rtl', title: 'right-to-left' },
+      ],
+      // Property that specifies if the name of the item will be displayed
+      showName: true,
+      // Change title based on selected value
+      dynamicTitle: true,
+    },
+  },
+};
+
+export const decorators = [
+  (Story, { globals }) => {
+    return (
+      <ThemeProvider
+        theme={{
+          ...theme,
+          direction: globals.direction,
+          palette: {
+            ...theme.palette,
+            mode: globals.theme,
+          },
+        }}
+      >
+        <Story />
+      </ThemeProvider>
+    );
+  },
+];

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-3.2.0.cjs
+yarnPath: .yarn/releases/yarn-3.2.3.cjs

example/package.json

@@ -9,14 +9,6 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
-  "peerDependencies": {
-    "@material-ui/core": "4.11.0",
-    "@material-ui/icons": "4.9.1",
-    "@material-ui/lab": "4.0.0-alpha.58",
-    "react": "17.0.1",
-    "react-dom": "17.0.1",
-    "react-router-dom": "6.2.2"
-  },
   "dependencies": {
     "@graasp/ui": "link:..",
     "@testing-library/jest-dom": "link:../node_modules/@testing-library/jest-dom",
@@ -26,19 +18,15 @@
     "@types/node": "link:../node_modules/@types/node",
     "@types/react": "link:../node_modules/@types/react",
     "@types/react-dom": "link:../node_modules/@types/react-dom",
-    "@types/react-router-dom": "link:../node_modules/@types/react-router-dom",
-    "immutable": "4.0.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-router-dom": "6.2.2",
+    "@types/react-router-dom": "5.3.3",
+    "immutable": "4.1.0",
+    "react": "18.1.0",
+    "react-dom": "18.1.0",
     "react-scripts": "5.0.1",
     "typescript": "4.7.4"
   },
   "devDependencies": {
-    "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-    "@material-ui/core": "4.12.4",
-    "@material-ui/icons": "4.11.3",
-    "@material-ui/lab": "4.0.0-alpha.61"
+    "@babel/plugin-syntax-object-rest-spread": "^7.8.3"
   },
   "eslintConfig": {
     "extends": "react-app"

example/src/App.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import App from './App';
 
 it('renders without crashing', () => {

example/src/App.tsx

@@ -1,6 +1,8 @@
+import HomeIcon from '@material-ui/icons/Home';
+
 import React from 'react';
+
 import { Main, MainMenu, MenuItem } from '@graasp/ui';
-import HomeIcon from '@material-ui/icons/Home';
 import '@graasp/ui/dist/bundle.css';
 
 const App = () => {

example/src/index.tsx

@@ -1,7 +1,7 @@
-import './index.css';
-
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import App from './App';
+import './index.css';
 
 ReactDOM.render(<App />, document.getElementById('root'));