@movable/ui 0.0.0 → 0.1.0-alpha.0

package/.github/workflows/release-it.yml

@@ -0,0 +1,44 @@
+name: Release
+
+on:
+  workflow_dispatch:
+    inputs:
+      increment:
+        description: Override Default Version Increment
+        required: false
+        default: ''
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0 # Necessary to generate changelog from commit history
+      - uses: volta-cli/action@v1
+
+      - name: git config
+        run: |
+          git config user.name "${GITHUB_ACTOR}"
+          git config user.email "${GITHUB_ACTOR}@users.noreply.github.com"
+
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+      - uses: actions/cache@v2
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - run: yarn install --immutable
+
+      - name: Configure NPM with auth token
+        run: npm config set //registry.npmjs.org/:_authToken $NPM_TOKEN
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - run: yarn release ${{ github.event.inputs.increment }}
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movable/ui",
-  "version": "0.0.0",
+  "version": "0.1.0-alpha.0",
   "description": "Movable Ink's shared MUI components and MUI theme for our vite applications",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
@@ -29,11 +29,15 @@
   "devDependencies": {
     "@commitlint/cli": "^17.6.7",
     "@commitlint/config-conventional": "^17.6.7",
+    "@release-it/conventional-changelog": "^7.0.1",
     "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-typescript": "^11.1.2",
     "@types/react": "^18.2.19",
     "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
     "husky": "^8.0.0",
     "lint-staged": "^13.2.3",
     "postcss": "^8.4.27",
@@ -54,5 +58,8 @@
   },
   "volta": {
     "node": "18.17.0"
+  },
+  "dependencies": {
+    "@mui/material": "^5.14.8"
   }
 }

package/src/theme.ts

@@ -0,0 +1,252 @@
+import {
+  blue,
+  green,
+  grey,
+  lightBlue,
+  orange,
+  purple,
+  red,
+} from '@mui/material/colors';
+import { ThemeOptions, alpha, createTheme } from '@mui/material/styles';
+
+declare module '@mui/material/styles' {
+  interface PaletteColor {
+    selected?: string;
+  }
+  interface Palette {
+    focusVisible: string;
+    neutral50: string;
+    neutral100: string;
+    neutral200: string;
+    neutral300: string;
+    neutral400: string;
+    neutral500: string;
+    neutral600: string;
+    neutral700: string;
+    neutral800: string;
+    neutral900: string;
+    neutralA100: string;
+    neutralA200: string;
+    neutralA400: string;
+    neutralA700: string;
+    blue50: string;
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    blue600: string;
+    blue700: string;
+    blue800: string;
+    blue900: string;
+  }
+  interface PalletteOptions {
+    focusVisible: string;
+    neutral50: string;
+    neutral100: string;
+    neutral200: string;
+    neutral300: string;
+    neutral400: string;
+    neutral500: string;
+    neutral600: string;
+    neutral700: string;
+    neutral800: string;
+    neutral900: string;
+    neutralA100: string;
+    neutralA200: string;
+    neutralA400: string;
+    neutralA700: string;
+    blue50: string;
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+  }
+}
+
+// TODO [Low]: put in /shared folder
+const theme = createTheme({
+  components: {
+    MuiDataGrid: {
+      styleOverrides: {
+        root: {
+          border: 'none',
+          '.MuiDataGrid-toolbarContainer .MuiTextField-root': {
+            backgroundColor: grey[100],
+            padding: '8px',
+            borderRadius: '8px',
+          },
+          '.MuiInput-underline:before': {
+            borderBottom: 'none !important',
+            color: 'red',
+          },
+          '.MuiDataGrid-toolbarContainer button': {
+            backgroundColor: grey[100],
+            color: grey[900],
+            padding: '4px 10px',
+          },
+          '.MuiDataGrid-toolbarContainer svg': {
+            color: grey[700],
+          },
+        },
+      },
+    },
+
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'capitalize',
+        },
+        textPrimary: {
+          color: blue[400],
+        },
+        outlinedInherit: {
+          borderColor: alpha(grey[900], 0.03),
+        },
+      },
+    },
+
+    MuiSelect: {
+      defaultProps: {
+        size: 'small',
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: grey[100],
+        },
+      },
+    },
+
+    MuiTextField: {
+      defaultProps: {
+        size: 'small',
+      },
+      styleOverrides: {
+        root: {
+          backgroundColor: grey[100],
+        },
+      },
+    },
+
+    MuiLink: {
+      styleOverrides: {
+        root: {
+          color: blue[400],
+          textDecoration: 'none',
+        },
+      },
+    },
+
+    MuiChip: {
+      styleOverrides: {
+        filledPrimary: {
+          backgroundColor: blue[50],
+          color: blue[900],
+          '.MuiChip-deleteIcon': {
+            color: blue[800],
+            '&:hover': {
+              color: blue[900],
+            },
+            '&:active': {
+              color: blue[900],
+            },
+          },
+        },
+        filledSuccess: {
+          backgroundColor: green[50],
+          color: green[900],
+        },
+        filledError: {
+          backgroundColor: red[50],
+          color: blue[900],
+        },
+      },
+    },
+  },
+
+  palette: {
+    text: {
+      primary: grey[900],
+      secondary: grey[700],
+      disabled: grey[700],
+    },
+
+    focusVisible: alpha(blue[700], 0.3),
+
+    neutral50: grey[50],
+    neutral100: grey[100],
+    neutral200: grey[200],
+    neutral300: grey[300],
+    neutral400: grey[400],
+    neutral500: grey[500],
+    neutral600: grey[600],
+    neutral700: grey[700],
+    neutral800: grey[800],
+    neutral900: grey[900],
+    neutralA100: grey['A100'],
+    neutralA200: grey['A200'],
+    neutralA400: grey['A400'],
+    neutralA700: grey['A700'],
+
+    blue50: blue[50],
+    blue100: blue[100],
+    blue200: blue[200],
+    blue300: blue[300],
+    blue400: blue[400],
+    blue500: blue[500],
+    blue600: blue[600],
+    blue700: blue[700],
+    blue800: blue[800],
+    blue900: blue[900],
+    // todo: add rest of colors. see https://www.figma.com/file/9yr8neepsdgLbiFADaR6M2/MI----Library-Base?type=design&node-id=477-93017&t=wf27RohUWMM0z3UH-0
+
+    primary: {
+      main: blue[700],
+      dark: blue[800],
+      light: blue[600],
+      contrastText: '#FFFFFF',
+      selected: alpha(blue[700], 0.08),
+    },
+    secondary: {
+      main: purple[500],
+      dark: purple[700],
+      light: purple[300],
+      contrastText: '#FFFFFF',
+    },
+    error: {
+      main: red[700],
+      dark: red[800],
+      light: red[400],
+      contrastText: '#FFFFFF',
+    },
+    warning: {
+      main: orange[800],
+      dark: orange[900],
+      light: orange[500],
+      contrastText: '#FFFFFF',
+    },
+    info: {
+      main: lightBlue[800],
+      dark: lightBlue[900],
+      light: orange[700],
+      contrastText: '#FFFFFF',
+    },
+    success: {
+      main: green[800],
+      dark: green[900],
+      light: green[500],
+      contrastText: '#FFFFFF',
+    },
+    action: {
+      active: grey[700],
+      hover: alpha(grey[700], 0.04),
+      selected: alpha(grey[700], 0.08),
+      focus: alpha(grey[700], 0.12),
+      disabledBackground: grey[200],
+      disabled: grey[700],
+    },
+  },
+} as ThemeOptions);
+
+export default theme;