@movable/ui 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 
 
-## [0.1.0](https://github.com/movableink/ui/compare/0.1.0-alpha.1...0.1.0) (2023-09-19)
+## [0.1.1](https://github.com/movableink/ui/compare/0.1.0-alpha.1...0.1.1) (2023-10-13)
 
 ## [0.1.0-alpha.1](https://github.com/movableink/ui/compare/0.1.0-alpha.0...0.1.0-alpha.1) (2023-09-19)
 

package/README.md

@@ -3,11 +3,32 @@
 This repo contains the shared components for our frontend applications. Using this [react component library guide](https://prateeksurana.me/blog/react-component-library-using-storybook-7/#compiling-the-library-using-rollup)
 
 ## Local Development
+
 ### Installation
 
 1. Ensure you have [`volta`](https://volta.sh) installed on your computer
 2. Clone the repo
-3. `npm install`
+3. `npm install` (note: `npm`, not `yarn`)
+
+### Linking to local Studio
+
+1. `@movable/ui`: `npm run watch`
+
+2. `front-end/packages/studio` (after making the change below): `yarn`, then `yarn dev`, `yarn test:dev`, or similar
+
+```js
+// front-end/packages/studio/package.json
+
+{
+  // ...
+  "devDependencies": {
+    "@movable/ui": "link:./path/to/ui"
+    // ...
+  }
+  // ...
+}
+```
+
 ## Conventional Commits
 
 This repo has [conventional-commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) We lint for this both pre-commit and on PR actions. It is **required** and will not pass without it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@movable/ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Movable Ink's shared MUI components and MUI theme for our vite applications",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",
@@ -8,6 +8,7 @@
   "scripts": {
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "build": "rollup -c",
+    "watch": "rollup -c -w",
     "release": "release-it",
     "prepare": "husky install"
   },

package/src/theme.ts

@@ -2,10 +2,13 @@ import {
   blue,
   green,
   grey,
+  indigo,
   lightBlue,
+  lightGreen,
   orange,
   purple,
   red,
+  yellow,
 } from '@mui/material/colors';
 import { ThemeOptions, alpha, createTheme } from '@mui/material/styles';
 
@@ -15,6 +18,56 @@ declare module '@mui/material/styles' {
   }
   interface Palette {
     focusVisible: string;
+    blue50: string;
+    blue100: string;
+    blue200: string;
+    blue300: string;
+    blue400: string;
+    blue500: string;
+    blue600: string;
+    blue700: string;
+    blue800: string;
+    blue900: string;
+    indigo50: string;
+    indigo100: string;
+    indigo200: string;
+    indigo300: string;
+    indigo400: string;
+    indigo500: string;
+    indigo600: string;
+    indigo700: string;
+    indigo800: string;
+    indigo900: string;
+    green50: string;
+    green100: string;
+    green200: string;
+    green300: string;
+    green400: string;
+    green500: string;
+    green600: string;
+    green700: string;
+    green800: string;
+    green900: string;
+    lightBlue50: string;
+    lightBlue100: string;
+    lightBlue200: string;
+    lightBlue300: string;
+    lightBlue400: string;
+    lightBlue500: string;
+    lightBlue600: string;
+    lightBlue700: string;
+    lightBlue800: string;
+    lightBlue900: string;
+    lightGreen50: string;
+    lightGreen100: string;
+    lightGreen200: string;
+    lightGreen300: string;
+    lightGreen400: string;
+    lightGreen500: string;
+    lightGreen600: string;
+    lightGreen700: string;
+    lightGreen800: string;
+    lightGreen900: string;
     neutral50: string;
     neutral100: string;
     neutral200: string;
@@ -29,16 +82,36 @@ declare module '@mui/material/styles' {
     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;
+    orange50: string;
+    orange100: string;
+    orange200: string;
+    orange300: string;
+    orange400: string;
+    orange500: string;
+    orange600: string;
+    orange700: string;
+    orange800: string;
+    orange900: string;
+    purple50: string;
+    purple100: string;
+    purple200: string;
+    purple300: string;
+    purple400: string;
+    purple500: string;
+    purple600: string;
+    purple700: string;
+    purple800: string;
+    purple900: string;
+    yellow50: string;
+    yellow100: string;
+    yellow200: string;
+    yellow300: string;
+    yellow400: string;
+    yellow500: string;
+    yellow600: string;
+    yellow700: string;
+    yellow800: string;
+    yellow900: string;
   }
   interface PalletteOptions {
     focusVisible: string;
@@ -67,7 +140,51 @@ declare module '@mui/material/styles' {
 
 // TODO [Low]: put in /shared folder
 const theme = createTheme({
+  typography: {
+    fontFamily: ['Inter', 'Roboto', 'sans-serif'].join(','),
+  },
+
   components: {
+    MuiButton: {
+      styleOverrides: {
+        root: {
+          textTransform: 'capitalize',
+        },
+        textPrimary: {
+          color: blue[400],
+        },
+        outlinedInherit: {
+          borderColor: alpha(grey[900], 0.03),
+        },
+      },
+    },
+
+    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],
+        },
+      },
+    },
+
     MuiDataGrid: {
       styleOverrides: {
         root: {
@@ -89,20 +206,18 @@ const theme = createTheme({
           '.MuiDataGrid-toolbarContainer svg': {
             color: grey[700],
           },
+          '.MuiDataGrid-cell:focus': {
+            outline: 'none',
+          },
         },
       },
     },
 
-    MuiButton: {
+    MuiLink: {
       styleOverrides: {
         root: {
-          textTransform: 'capitalize',
-        },
-        textPrimary: {
           color: blue[400],
-        },
-        outlinedInherit: {
-          borderColor: alpha(grey[900], 0.03),
+          textDecoration: 'none',
         },
       },
     },
@@ -128,41 +243,6 @@ const theme = createTheme({
         },
       },
     },
-
-    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: {
@@ -174,6 +254,61 @@ const theme = createTheme({
 
     focusVisible: alpha(blue[700], 0.3),
 
+    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],
+
+    indigo50: indigo[50],
+    indigo100: indigo[100],
+    indigo200: indigo[200],
+    indigo300: indigo[300],
+    indigo400: indigo[400],
+    indigo500: indigo[500],
+    indigo600: indigo[600],
+    indigo700: indigo[700],
+    indigo800: indigo[800],
+    indigo900: indigo[900],
+
+    green50: green[50],
+    green100: green[100],
+    green200: green[200],
+    green300: green[300],
+    green400: green[400],
+    green500: green[500],
+    green600: green[600],
+    green700: green[700],
+    green800: green[800],
+    green900: green[900],
+
+    lightBlue50: lightBlue[50],
+    lightBlue100: lightBlue[100],
+    lightBlue200: lightBlue[200],
+    lightBlue300: lightBlue[300],
+    lightBlue400: lightBlue[400],
+    lightBlue500: lightBlue[500],
+    lightBlue600: lightBlue[600],
+    lightBlue700: lightBlue[700],
+    lightBlue800: lightBlue[800],
+    lightBlue900: lightBlue[900],
+
+    lightGreen50: lightGreen[50],
+    lightGreen100: lightGreen[100],
+    lightGreen200: lightGreen[200],
+    lightGreen300: lightGreen[300],
+    lightGreen400: lightGreen[400],
+    lightGreen500: lightGreen[500],
+    lightGreen600: lightGreen[600],
+    lightGreen700: lightGreen[700],
+    lightGreen800: lightGreen[800],
+    lightGreen900: lightGreen[900],
+
     neutral50: grey[50],
     neutral100: grey[100],
     neutral200: grey[200],
@@ -189,16 +324,38 @@ const theme = createTheme({
     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],
+    orange50: orange[50],
+    orange100: orange[100],
+    orange200: orange[200],
+    orange300: orange[300],
+    orange400: orange[400],
+    orange500: orange[500],
+    orange600: orange[600],
+    orange700: orange[700],
+    orange800: orange[800],
+    orange900: orange[900],
+
+    purple50: purple[50],
+    purple100: purple[100],
+    purple200: purple[200],
+    purple300: purple[300],
+    purple400: purple[400],
+    purple500: purple[500],
+    purple600: purple[600],
+    purple700: purple[700],
+    purple800: purple[800],
+    purple900: purple[900],
+
+    yellow50: yellow[50],
+    yellow100: yellow[100],
+    yellow200: yellow[200],
+    yellow300: yellow[300],
+    yellow400: yellow[400],
+    yellow500: yellow[500],
+    yellow600: yellow[600],
+    yellow700: yellow[700],
+    yellow800: yellow[800],
+    yellow900: yellow[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: {