@veritone-ce/design-system 1.0.2 → 1.2.0

package/dist/components/Button/button.theme.js

@@ -0,0 +1,106 @@
+import sx from '@mui/system/sx';
+const buttonTheme = (theme) => ({
+    defaultProps: {
+        variant: 'contained',
+        disableRipple: true
+    },
+    styleOverrides: {
+        // @ts-ignore
+        root: ({ ownerState }) => (Object.assign(Object.assign(Object.assign({ textTransform: 'none', fontWeight: '600', '&.MuiButton-outlinedError': {
+                backgroundColor: theme.palette.common.white
+            }, '&.Mui-disabled': Object.assign({}, (ownerState.variant !== `text` && {
+                borderColor: theme.palette.misc.altBackground,
+                backgroundColor: theme.palette.misc.rowHoverGreyOne,
+                borderWidth: '1px',
+                borderStyle: 'solid'
+            })), '& .MuiButton-startIcon': Object.assign({ marginRight: 0, marginLeft: 0, marginTop: '-1px', fontSize: '18px' }, {
+                '& .MuiSvgIcon-root': {
+                    fontSize: 18
+                }
+            }), '& .MuiButton-endIcon': Object.assign({ marginRight: 0, marginLeft: 0, marginTop: '-1px', fontSize: '18px' }, {
+                '& .MuiSvgIcon-root': {
+                    fontSize: 18
+                }
+            }), '&.Mui-disabled .MuiButton-startIcon .MuiButton-endIcon': {
+                opacity: 0.3
+            } }, (ownerState.variant === `contained` &&
+            {
+                //@ts-ignore
+                backgroundColor: ownerState.color === `primary`
+                    ? theme.palette.button.main
+                    : //@ts-ignore
+                        theme.palette[ownerState.color].main,
+                ':hover': {
+                    //@ts-ignore
+                    backgroundColor: ownerState.color === `primary`
+                        ? theme.palette.button.hover
+                        : //@ts-ignore
+                            theme.palette[ownerState.color]
+                }
+            })), (ownerState.variant === `outlined` &&
+            {
+                backgroundColor: ownerState.color === `primary`
+                    ? theme.palette.common.white
+                    : //@ts-ignore
+                        theme.palette[ownerState.color],
+                //@ts-ignore
+                color: ownerState.color === `primary`
+                    ? theme.palette.neutral.main
+                    : //@ts-ignore
+                        theme.palette[ownerState.color].main,
+                borderColor: ownerState.color === `primary`
+                    ? theme.palette.neutral.main
+                    : //@ts-ignore
+                        theme.palette[ownerState.color].main,
+                ':hover': {
+                    backgroundColor: ownerState.color === `primary`
+                        ? theme.palette.common.white
+                        : //@ts-ignore
+                            theme.palette[ownerState.color],
+                    //@ts-ignore
+                    color: ownerState.color === `primary`
+                        ? theme.palette.secondary.main
+                        : //@ts-ignore
+                            theme.palette[ownerState.color],
+                    //@ts-ignore
+                    borderColor: ownerState.color === `primary`
+                        ? theme.palette.secondary.main
+                        : //@ts-ignore
+                            theme.palette[ownerState.color]
+                }
+            })), (ownerState.variant === `text` &&
+            {
+                backgroundColor: 'transparent',
+                color: ownerState.color === `primary`
+                    ? theme.palette.text.tertiary
+                    : //@ts-ignore
+                        theme.palette[ownerState.color].main,
+                ':hover': {
+                    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+                    //@ts-ignore
+                    color: ownerState.color === `primary`
+                        ? theme.palette.secondary.main
+                        : //@ts-ignore
+                            theme.palette[ownerState.color]
+                }
+            })))
+    },
+    variants: [
+        {
+            props: {
+                variant: 'secondary'
+            },
+            style: sx({
+                backgroundColor: 'white',
+                color: theme.palette.neutral.main,
+                border: `1px solid ${theme.palette.neutral.main}`,
+                ':hover': {
+                    border: `1px solid ${theme.palette.primary.main}`,
+                    color: theme.palette.primary.main,
+                    backgroundColor: 'white'
+                }
+            })
+        }
+    ]
+});
+export default buttonTheme;

package/dist/components/Button/index.d.ts

@@ -1,9 +1,8 @@
 import { ButtonProps as MuiButtonProps } from '@mui/material';
 export declare type ButtonProps = {
-    /**
-    Use the isProcessing prop to indicate to the user that an action is in process. This will disable the button.
-    */
-    isProcessing?: boolean;
+    'data-testid'?: string;
+    variant?: 'primary' | 'secondary' | 'terciary';
+    isLoading?: boolean;
 } & MuiButtonProps;
 /**
 - Use a button for common user click actions. Several variations available.

package/dist/components/Button/index.js

@@ -18,10 +18,21 @@ import useButtonProps from './useButtonProps';
 **/
 const Button = (_a) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    const _b = useButtonProps(props), { isProcessing } = _b, muiButtonProps = __rest(_b, ["isProcessing"]);
+    const _b = useButtonProps(props), { isLoading } = _b, muiButtonProps = __rest(_b, ["isLoading"]);
     return (_jsxs(Box, Object.assign({ sx: {
             display: `inline-flex`,
-            position: `relative`,
-        } }, { children: [_jsx(MuiButton, Object.assign({}, muiButtonProps, { children: children })), isProcessing ? _jsx(Indicator, {}) : null] })));
+            position: `relative`
+        } }, { children: [_jsx(MuiButton, Object.assign({ sx: {
+                    fontSize: '14px',
+                    gap: '5px',
+                    paddingTop: '8px',
+                    paddingBottom: '8px',
+                    paddingLeft: '15px',
+                    paddingRight: '15px',
+                    display: 'flex',
+                    alignItems: 'center',
+                    lineHeight: '16px',
+                    height: 36
+                }, disableElevation: true }, muiButtonProps, { children: children })), isLoading && _jsx(Indicator, {})] })));
 };
 export default Button;

package/dist/components/Button/useButtonProps.d.ts

@@ -1,3 +1,3 @@
 import { ButtonProps } from '.';
-declare const useButtonProps: ({ isProcessing, ...props }: ButtonProps) => ButtonProps;
+declare const useButtonProps: ({ isLoading, ...props }: ButtonProps) => ButtonProps;
 export default useButtonProps;

package/dist/components/Button/useButtonProps.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 const useButtonProps = (_a) => {
-    var { isProcessing = false } = _a, props = __rest(_a, ["isProcessing"]);
-    return Object.assign({ disabled: isProcessing || props.disabled, isProcessing }, props);
+    var { isLoading = false } = _a, props = __rest(_a, ["isLoading"]);
+    return Object.assign({ disabled: isLoading || props.disabled, isLoading }, props);
 };
 export default useButtonProps;

package/dist/components/ThemeProvider/index.d.ts

@@ -1,3 +1,3 @@
 import { ThemeProviderProps } from '@mui/system';
-declare const ThemeProvider: ({ children, }: Omit<ThemeProviderProps, 'theme'>) => JSX.Element;
+declare const ThemeProvider: ({ children }: Omit<ThemeProviderProps, 'theme'>) => JSX.Element;
 export default ThemeProvider;

package/dist/components/ThemeProvider/index.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ThemeProvider as MuiThemeProvider } from '@mui/system';
-import theme from '../../assets/theme';
-const ThemeProvider = ({ children, }) => {
-    return (_jsx(MuiThemeProvider, Object.assign({ theme: theme }, { children: children })));
+import MuiTheme from '../../assets/theme';
+const ThemeProvider = ({ children }) => {
+    return _jsx(MuiThemeProvider, Object.assign({ theme: MuiTheme }, { children: children }));
 };
 export default ThemeProvider;

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+import '@fontsource/nunito-sans';
+import '@fontsource/dosis';
 export { default as Button } from './components/Button';
 export { default as ThemeProvider } from './components/ThemeProvider';
 export { default as theme } from './assets/theme';

package/dist/index.js

@@ -1,3 +1,5 @@
+import '@fontsource/nunito-sans';
+import '@fontsource/dosis';
 export { default as Button } from './components/Button';
 export { default as ThemeProvider } from './components/ThemeProvider';
 export { default as theme } from './assets/theme';

package/package.json

@@ -1,52 +1,20 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "private": false,
-  "dependencies": {
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@fontsource/dosis": "^4.5.10",
-    "@fontsource/nunito-sans": "^4.5.10",
-    "@fontsource/roboto": "^4.5.8",
-    "@mui/icons-material": "^5.10.6",
-    "@mui/material": "^5.10.8",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^13.0.0",
-    "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^27.0.1",
-    "@types/node": "^16.7.13",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.4.2",
-    "web-vitals": "^2.1.0"
-  },
   "scripts": {
     "start": "yarn storybook",
     "build": "yarn tsc",
+    "lint": "eslint src",
     "build-docs": "yarn build-storybook-docs",
-    "test": "yarn test-storybook",
+    "test": "jest",
     "storybook": "start-storybook -p 6006 -s public",
     "release": "auto shipit --base-branch=main",
     "generate": "yarn plop --plopfile generators/plopfile.js",
     "build-storybook": "build-storybook -s public",
     "test-storybook": "test-storybook",
     "build-storybook-docs": "build-storybook  --docs",
-    "prepare": "install-peers"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ],
-    "overrides": [
-      {
-        "files": [
-          "**/*.stories.*"
-        ],
-        "rules": {
-          "import/no-anonymous-default-export": "off"
-        }
-      }
-    ]
+    "prepare": "install-peers && husky install"
   },
   "browserslist": {
     "production": [
@@ -60,29 +28,56 @@
       "last 1 safari version"
     ]
   },
+  "dependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@fontsource/dosis": "^4.5.10",
+    "@fontsource/nunito-sans": "^4.5.10",
+    "@fontsource/roboto": "^4.5.8",
+    "@mui/icons-material": "^5.10.6",
+    "@mui/material": "^5.10.8",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.2.1",
+    "@types/jest": "^27.0.1",
+    "@types/node": "^16.7.13",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.4.2",
+    "web-vitals": "^2.1.0"
+  },
   "devDependencies": {
     "@babel/cli": "^7.19.3",
-    "@storybook/addon-a11y": "^6.5.12",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-interactions": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/builder-webpack5": "^6.5.12",
+    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-react": "^7.18.6",
+    "@storybook/addon-a11y": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-interactions": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.13",
     "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/node-logger": "^6.5.12",
+    "@storybook/manager-webpack5": "^6.5.13",
+    "@storybook/node-logger": "^6.5.13",
     "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.12",
-    "@storybook/test-runner": "^0.7.2",
+    "@storybook/react": "^6.5.13",
+    "@storybook/test-runner": "^0.9.1",
     "@storybook/testing-library": "^0.0.13",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
     "auto": "^10.37.6",
+    "babel-jest": "^29.3.1",
     "babel-plugin-named-exports-order": "^0.0.2",
     "chromatic": "^6.10.1",
     "cross-env": "^7.0.3",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "husky": "^8.0.2",
     "install-peers-cli": "^2.2.0",
-    "jest": "27",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
     "plop": "^3.1.1",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.0",
     "prop-types": "^15.8.1",
     "webpack": "^5.74.0"
   },
@@ -92,16 +87,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
-  "babel": {
-    "presets": [
-      [
-        "react-app",
-        {
-          "absoluteRuntime": false
-        }
-      ]
-    ]
-  },
   "description": "Design System for Veritone CE",
   "repository": {
     "type": "git",