Merge pull request layer5io#362 from layer5io/361-eslint

build(repo): Setup `eslint` in root workspace

.eslintignore

@@ -3,5 +3,11 @@ vite.config.ts
 .eslintrc.cjs
 node_modules
 dist
-storybook-static
-*.md
+*.md
+site
+apps/next-12
+.yarnrc.yml
+.eslintrc.*js
+*.config.*js
+eslint-config-sistent
+apps/design-system

.eslintrc.js

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es6: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended'
+  ],
+  plugins: ['react'],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    requireConfigFile: false
+  },
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  }
+};

.github/workflows/lint.yml

@@ -1,28 +1,31 @@
-name: Linting and formatting
+name: Lint check
 
 on:
-    push:
-        branches:
-            - "*"
-    pull_request:
-        branches:
-            - "*"
+  push:
+    branches:
+      - '*'
+  pull_request:
+    branches:
+      - '*'
 
 jobs:
-    lint:
-        runs-on: ubuntu-latest
-
-        steps:
-            - name: Checkout code
-              uses: actions/[email protected]
+  lint:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [16, 18, 20]
 
-            - name: Set up Node.js ${{ matrix.node-version }}
-              uses: actions/[email protected]
-              with:
-                node-version: ${{ matrix.node-version }}
-
-            - name: Install dependencies
-              run: yarn install
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
 
-            - name: Run Lint
-              run: yarn lint && yarn format:check && yarn lint-staged
+      - name: Set up Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Install dependencies
+        run: yarn install
+
+      - name: Run Lint
+        run: yarn lint

.gitignore

@@ -36,3 +36,4 @@ packages/design-system/node_modules/**
 **/storybook-static/**
 lerna-debug.log
 pub.sh
+.eslintcache

.prettierignore

@@ -1,4 +1,9 @@
 # Ignore artifacts:
 **/dist/**
 **/coverage/**
-**/.cache/**
+**/.cache/**
+**/.github/**
+**/.yarn/**
+site/public
+.yarnrc.yml
+.eslintrc.*js

apps/next-12/components/DefaultModal/index.jsx

@@ -1,57 +1,56 @@
 import {
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    IconButton,
-    Typography
-  } from '@layer5/sistent-components';
-  import { CloseIcon } from '@layer5/sistent-svg';
-  import React from 'react';
-
-  export default function DefaultModal() {
-    const [open, setOpen] = React.useState(false);
-
-    const handleClickOpen = () => {
-      setOpen(true);
-    };
-    const handleClose = () => {
-      setOpen(false);
-    };
-
-    return (
-      <React.Fragment>
-        <Button variant="contained" onClick={handleClickOpen}>
-          Open Dialog
-        </Button>
-        <Dialog onClose={handleClose} open={open}>
-          <DialogTitle>Modal Title</DialogTitle>
-          <IconButton onClick={handleClose} sx={{ position: 'absolute', right: 8, top: 8 }}>
-            <CloseIcon width={24} height={24} />
-          </IconButton>
-          <DialogContent dividers>
-            <Typography gutterBottom>
-              Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
-              in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
-            </Typography>
-            <Typography gutterBottom>
-              Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
-              lacus vel augue laoreet rutrum faucibus dolor auctor.
-            </Typography>
-            <Typography gutterBottom>
-              Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
-              scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
-              auctor fringilla.
-            </Typography>
-          </DialogContent>
-          <DialogActions>
-            <Button variant="contained" autoFocus onClick={handleClose}>
-              Save changes
-            </Button>
-          </DialogActions>
-        </Dialog>
-      </React.Fragment>
-    );
-  }
-
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Typography
+} from '@layer5/sistent-components';
+import { CloseIcon } from '@layer5/sistent-svg';
+import React from 'react';
+
+export default function DefaultModal() {
+  const [open, setOpen] = React.useState(false);
+
+  const handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="contained" onClick={handleClickOpen}>
+        Open Dialog
+      </Button>
+      <Dialog onClose={handleClose} open={open}>
+        <DialogTitle>Modal Title</DialogTitle>
+        <IconButton onClick={handleClose} sx={{ position: 'absolute', right: 8, top: 8 }}>
+          <CloseIcon width={24} height={24} />
+        </IconButton>
+        <DialogContent dividers>
+          <Typography gutterBottom>
+            Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
+            in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+          </Typography>
+          <Typography gutterBottom>
+            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis
+            lacus vel augue laoreet rutrum faucibus dolor auctor.
+          </Typography>
+          <Typography gutterBottom>
+            Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel
+            scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus
+            auctor fringilla.
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button variant="contained" autoFocus onClick={handleClose}>
+            Save changes
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </React.Fragment>
+  );
+}

apps/next-12/components/ModeToggleButton.jsx

@@ -1,6 +1,6 @@
+import { toggleTheme } from '@/lib/redux/theme/themeSlice';
 import { IconButton } from '@mui/material';
 import { useDispatch, useSelector } from 'react-redux';
-import { toggleTheme } from '@/lib/redux/theme/themeSlice';
 
 import DarkModeIcon from '@mui/icons-material/DarkMode';
 import LightModeIcon from '@mui/icons-material/LightMode';
@@ -17,7 +17,7 @@ function ModeToggleButton() {
   const dispatch = useDispatch(); // Initialize the useDispatch function
 
   // Use useSelector to get the darkTheme state from your Redux store
-  const mode = useSelector((state) => state.theme.darkTheme ? 'dark' : 'light');
+  const mode = useSelector((state) => (state.theme.darkTheme ? 'dark' : 'light'));
 
   const toggleMode = () => {
     // Dispatch the toggleTheme action when the button is clicked

apps/next-12/components/ResponsiveDataTable/ResponsiveDataTable.jsx

@@ -1,12 +1,7 @@
 import MUIDataTable from 'mui-datatables';
 import { useEffect, useState } from 'react';
 
-export function ResponsiveDataTable({
-  data,
-  columns,
-  options = {},
-  ...props
-}) {
+export function ResponsiveDataTable({ data, columns, options = {}, ...props }) {
   const [tableCols, updateCols] = useState(columns);
   const [columnVisibility, ,] = useState({});
 
@@ -15,7 +10,7 @@ export function ResponsiveDataTable({
       weekday: 'short',
       day: 'numeric',
       month: 'long',
-      year: 'numeric',
+      year: 'numeric'
     };
 
     return new Intl.DateTimeFormat('un-US', dateOptions).format(date);
@@ -42,7 +37,7 @@ export function ResponsiveDataTable({
           break;
         }
       }
-    },
+    }
   };
 
   useEffect(() => {
@@ -81,7 +76,7 @@ export function ResponsiveDataTable({
   }, [columnVisibility]);
 
   const components = {
-    ExpandButton: () => '',
+    ExpandButton: () => ''
   };
 
   return (

apps/next-12/components/ResponsiveDataTable/index.jsx

@@ -1 +1 @@
-export { ResponsiveDataTable } from "./ResponsiveDataTable";
+export { ResponsiveDataTable } from './ResponsiveDataTable';

apps/next-12/components/SistentModal/index.jsx

@@ -17,7 +17,9 @@ export default function SistentModal() {
   };
   return (
     <React.Fragment>
-      <Button variant="contained" onClick={handleModalOpen}>Open</Button>
+      <Button variant="contained" onClick={handleModalOpen}>
+        Open
+      </Button>
       <Modal
         open={openModal}
         modalTitle="Where do you want to start?"
@@ -42,4 +44,4 @@ export default function SistentModal() {
       </Modal>
     </React.Fragment>
   );
-}
+}

apps/next-12/components/index.jsx

@@ -1 +1 @@
-export * from './ResponsiveDataTable';
+export * from './ResponsiveDataTable';

apps/next-12/lib/providers/AppThemeProvider.jsx

@@ -1,45 +1,45 @@
-import { useSelector, useDispatch } from "react-redux";
-import createEmotionCache from "@/styles/createEmotionCache";
+import createEmotionCache from '@/styles/createEmotionCache';
+import { darkTheme, lightTheme } from '@/styles/themes/theme';
 import { CacheProvider } from '@emotion/react';
 import { CssBaseline, ThemeProvider, createTheme } from '@mui/material';
-import { darkTheme, lightTheme } from "@/styles/themes/theme";
-import { useMemo } from "react";
+import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
 
 const clientSideEmotionCache = createEmotionCache();
 
 export function AppThemeProvider({ children, emotionCache = clientSideEmotionCache }) {
-    // const dispatch = useDispatch();
+  // const dispatch = useDispatch();
 
-    const mode = useSelector((state) => state.theme.darkTheme ? "dark" : "light")
+  const mode = useSelector((state) => (state.theme.darkTheme ? 'dark' : 'light'));
 
-    const theme = useMemo(
-        () =>
-            createTheme({
-                palette: {
-                    mode,
-                    primary: {
-                        ...(mode === 'light' ? lightTheme.palette.primary : darkTheme.palette.primary),
-                    },
-                    secondary: {
-                        main: '#EE5351',
-                    },
-                    background: {
-                        ...(mode === 'light' ? lightTheme.palette.background : darkTheme.palette.background),
-                    },
-                    text: {
-                        ...(mode === 'light' ? lightTheme.palette.text : darkTheme.palette.text),
-                    },
-                },
-            }),
-        [mode],
-    );
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode,
+          primary: {
+            ...(mode === 'light' ? lightTheme.palette.primary : darkTheme.palette.primary)
+          },
+          secondary: {
+            main: '#EE5351'
+          },
+          background: {
+            ...(mode === 'light' ? lightTheme.palette.background : darkTheme.palette.background)
+          },
+          text: {
+            ...(mode === 'light' ? lightTheme.palette.text : darkTheme.palette.text)
+          }
+        }
+      }),
+    [mode]
+  );
 
-    return (
-        <CacheProvider value={emotionCache}>
-            <ThemeProvider theme={theme}>
-                <CssBaseline />
-                {children}
-            </ThemeProvider>
-        </CacheProvider>
-    );
-}
+  return (
+    <CacheProvider value={emotionCache}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </CacheProvider>
+  );
+}