@veritone-ce/design-system 0.0.10

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# v0.9.0 (Wed Oct 05 2022)
+
+- Created first version of the design system, with `Button`, and `ThemeProvider` components.
+
+#### Authors: 1
+
+- Cody Moore ([@CodyMoore240](https://github.com/CodyMoore240))

package/README.md

@@ -0,0 +1,36 @@
+# Veritone CE Design System
+
+This project uses [Storybook](https://storybook.js.org/) to preview components.
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs storybook in development mode. Opens storybook in a new browser tab.
+
+### `yarn test`
+
+Launches the test runner.
+See the section about [running tests](https://storybook.js.org/tutorials/design-systems-for-developers/react/en/test/) for more information.
+
+### `yarn build`
+
+Builds the for production to the `dist` folder.
+
+### `yarn build-docs`
+
+Builds the documentation for production to the `storybook-static` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [documentation](https://storybook.js.org/tutorials/design-systems-for-developers/react/en/document/) for more information.
+
+## Learn More
+
+You can learn more in the [Storybook Design System for Developers](https://storybook.js.org/tutorials/design-systems-for-developers/).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

package/dist/assets/theme.d.ts

@@ -0,0 +1,29 @@
+import { ThemeOptions as MuiThemeOptions } from '@mui/material';
+import '@fontsource/nunito-sans';
+import '@fontsource/dosis';
+declare module '@mui/material/Button' {
+    interface ButtonPropsVariantOverrides {
+        secondary: true;
+    }
+}
+declare module '@mui/material/styles/createPalette' {
+    type ButtonPaletteColorOptions = SimplePaletteColorOptions & {
+        hover: string;
+    };
+    interface Palette {
+        button: ButtonPaletteColorOptions;
+        neutral: Palette['primary'];
+    }
+    interface PaletteOptions {
+        button?: ButtonPaletteColorOptions;
+        neutral?: PaletteColorOptions;
+    }
+    interface ThemeOptions extends MuiThemeOptions {
+        pallete?: {
+            button?: ButtonPaletteColorOptions;
+            neutral?: PaletteColorOptions;
+        };
+    }
+}
+declare let theme: import("@mui/material").Theme;
+export default theme;

package/dist/assets/theme.js

@@ -0,0 +1,320 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createTheme } from '@mui/material';
+import '@fontsource/nunito-sans';
+import '@fontsource/dosis';
+import sx from '@mui/system/sx';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import InfoIcon from '@mui/icons-material/Info';
+import WarningIcon from '@mui/icons-material/Error';
+import ErrorIcon from '@mui/icons-material/Cancel';
+// create theme in steps https://mui.com/material-ui/customization/theming/#api
+var theme = createTheme({
+    typography: {
+        fontFamily: ['Nunito Sans', 'Helvetica', 'sans-serif'].join(','),
+        h2: {
+            fontSize: '1.429rem',
+            lineHeight: '2.143rem',
+            fontWeight: '700',
+        },
+    },
+    palette: {
+        primary: {
+            main: '#214167',
+        },
+        secondary: {
+            main: '#335B89',
+            contrastText: '#ffffff',
+        },
+        neutral: {
+            main: '#5C6269',
+        },
+        button: {
+            main: '#1871E8',
+            hover: '#335B89',
+        },
+        success: {
+            main: '#28BA3F',
+        },
+        info: {
+            main: '#325491',
+        },
+        warning: {
+            main: '#FFBB0A',
+        },
+        error: {
+            main: '#D43060',
+        },
+        divider: '#214167',
+    },
+    spacing: 10,
+});
+theme = createTheme(theme, {
+    components: {
+        MuiButton: {
+            defaultProps: {
+                variant: 'contained',
+                disableRipple: true,
+            },
+            styleOverrides: {
+                // @ts-ignore
+                root: function (_a) {
+                    var ownerState = _a.ownerState;
+                    return (__assign(__assign({ textTransform: 'none', '&.Mui-disabled': {
+                            borderColor: "#E0E8F0",
+                        }, '&.Mui-disabled .MuiButton-startIcon': {
+                            opacity: 0.3,
+                        } }, (ownerState.variant === "contained" &&
+                        {
+                            fontWeight: '600',
+                            backgroundColor: theme.palette.button.main,
+                            ':hover': {
+                                backgroundColor: theme.palette.button.hover,
+                            },
+                        })), (ownerState.variant === "text" &&
+                        {
+                            fontWeight: '600',
+                            color: theme.palette.button.main,
+                            ':hover': {
+                                color: theme.palette.button.hover,
+                            },
+                            '.MuiButton-startIcon': {
+                                color: "#555F7C",
+                                marginRight: theme.spacing(2),
+                            },
+                        })));
+                },
+            },
+            variants: [
+                {
+                    props: {
+                        variant: 'secondary',
+                    },
+                    style: sx({
+                        backgroundColor: 'white',
+                        color: theme.palette.neutral.main,
+                        border: "1px solid ".concat(theme.palette.neutral.main),
+                        ':hover': {
+                            border: "1px solid ".concat(theme.palette.primary.main),
+                            color: theme.palette.primary.main,
+                            backgroundColor: 'white',
+                        },
+                    }),
+                },
+            ],
+        },
+        MuiInputLabel: {
+            styleOverrides: {
+                root: sx({
+                    color: "#5C6269",
+                    fontSize: "14px",
+                    lineHeight: "21px",
+                    fontWeight: "600",
+                }),
+            },
+        },
+        MuiFormHelperText: {
+            styleOverrides: {
+                root: sx({
+                    position: 'relative',
+                    marginLeft: 0,
+                    '&.Mui-error': {
+                        paddingLeft: "17px",
+                        '&::before': {
+                            content: "\"\"",
+                            height: "12px",
+                            width: '12px',
+                            position: 'absolute',
+                            left: 0,
+                            top: "50%",
+                            transform: "translate(0, -50%)",
+                            backgroundColor: theme.palette.error.main,
+                            borderRadius: "100%",
+                        },
+                    },
+                }),
+            },
+        },
+        MuiTextField: {
+            defaultProps: {
+                size: 'small',
+            },
+            styleOverrides: {
+                root: sx({
+                    color: "#2A323C",
+                    '& .MuiOutlinedInput-root': {
+                        '& fieldset': {
+                            borderColor: "#E0E8F0",
+                        },
+                        '&:hover fieldset': {
+                            borderColor: "#335B89",
+                        },
+                        '&.Mui-focused fieldset': {
+                            border: "1px solid #5C6269",
+                        },
+                        '&.Mui-error fieldset': {
+                            borderColor: theme.palette.error.main,
+                        },
+                    },
+                }),
+            },
+        },
+        MuiStepIcon: {
+            styleOverrides: {
+                root: {
+                    borderRadius: "100%",
+                    outline: "1px solid #465364",
+                    color: "white",
+                    text: {
+                        fill: "#465364",
+                    },
+                    '&.Mui-active': {
+                        outline: "none",
+                        color: theme.palette.button.main,
+                        text: {
+                            fill: "white",
+                        },
+                    },
+                },
+            },
+        },
+        MuiDialogTitle: {
+            styleOverrides: {
+                root: {
+                    fontSize: "24px",
+                    lineHeight: "34px",
+                    paddingTop: theme.spacing(3),
+                    paddingLeft: theme.spacing(3),
+                    paddingRight: theme.spacing(3),
+                    paddingBottom: theme.spacing(1),
+                },
+            },
+        },
+        MuiDialogContent: {
+            styleOverrides: {
+                root: {
+                    paddingTop: 0,
+                    paddingLeft: theme.spacing(3),
+                    paddingRight: theme.spacing(3),
+                    paddingBottom: theme.spacing(1),
+                },
+            },
+        },
+        MuiDialogActions: {
+            styleOverrides: {
+                root: {
+                    padding: theme.spacing(3),
+                },
+            },
+        },
+        MuiLink: {
+            defaultProps: {
+                underline: "none",
+                color: "#1871E8",
+            },
+        },
+        MuiSnackbar: {
+            defaultProps: {
+                autoHideDuration: 6000,
+                anchorOrigin: {
+                    vertical: "top",
+                    horizontal: "right",
+                },
+            },
+            styleOverrides: {
+                root: {
+                    width: "100%",
+                    maxWidth: "415px",
+                    position: "absolute",
+                },
+            },
+        },
+        MuiAlert: {
+            defaultProps: {
+                variant: "outlined",
+                iconMapping: {
+                    success: _jsx(CheckCircleIcon, {}),
+                    info: _jsx(InfoIcon, {}),
+                    warning: _jsx(WarningIcon, {}),
+                    error: _jsx(ErrorIcon, {}),
+                },
+            },
+            styleOverrides: {
+                root: {
+                    width: "100%",
+                    backgroundColor: "white",
+                    borderColor: "#D5DFE9",
+                    position: "relative",
+                    overflow: "hidden",
+                    '&:after': {
+                        content: '""',
+                        position: "absolute",
+                        width: "4px",
+                        left: 0,
+                        top: 0,
+                        bottom: 0,
+                    },
+                    '&.MuiAlert-outlinedSuccess:after': {
+                        backgroundColor: theme.palette.success.main,
+                    },
+                    '&.MuiAlert-outlinedInfo:after': {
+                        backgroundColor: theme.palette.info.main,
+                    },
+                    '&.MuiAlert-outlinedWarning:after': {
+                        backgroundColor: theme.palette.warning.main,
+                    },
+                    '&.MuiAlert-outlinedError:after': {
+                        backgroundColor: theme.palette.error.main,
+                    },
+                    '& .MuiAlert-icon': {
+                        opacity: 1,
+                        fontSize: 20,
+                    },
+                    '& .MuiAlert-message': {
+                        fontSize: "12px",
+                        lineHeight: "22px",
+                        color: "black",
+                    },
+                },
+            },
+        },
+        MuiCircularProgress: {
+            styleOverrides: {
+                root: {
+                    color: theme.palette.button.main,
+                },
+            },
+        },
+        MuiCardContent: {
+            styleOverrides: {
+                root: {
+                    padding: theme.spacing(2),
+                    paddingTop: theme.spacing(1),
+                },
+            },
+        },
+        MuiDataGrid: {
+            styleOverrides: {
+                root: {
+                    '& .MuiDataGrid-columnHeader:focus': {
+                        outline: 0,
+                    },
+                    '& .MuiDataGrid-cell:focus': {
+                        outline: 0,
+                    },
+                },
+            },
+        },
+    },
+});
+export default theme;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+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;
+} & MuiButtonProps;
+/**
+- Use a button for common user click actions. Several variations available.
+**/
+declare const Button: ({ children, isProcessing, ...props }: ButtonProps) => JSX.Element;
+export default Button;

package/dist/components/Button/index.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button as MuiButton, CircularProgress, Box } from '@mui/material';
+/**
+- Use a button for common user click actions. Several variations available.
+**/
+var Button = function (_a) {
+    var children = _a.children, _b = _a.isProcessing, isProcessing = _b === void 0 ? false : _b, props = __rest(_a, ["children", "isProcessing"]);
+    var processingIndicator = (_jsx(Box, __assign({ sx: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "grid",
+            justifyItems: "center",
+            alignItems: "center",
+        } }, { children: _jsx(CircularProgress, { size: 20 }) })));
+    var indicator = isProcessing ? processingIndicator : null;
+    return (_jsxs(Box, __assign({ sx: {
+            display: "inline-flex",
+            position: "relative",
+        } }, { children: [_jsx(MuiButton, __assign({}, props, { disabled: isProcessing || props.disabled }, { children: children })), indicator] })));
+};
+export default Button;

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

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

package/dist/components/ThemeProvider/index.js

@@ -0,0 +1,19 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ThemeProvider as MuiThemeProvider } from '@mui/system';
+import theme from '../../assets/theme';
+var ThemeProvider = function (_a) {
+    var children = _a.children;
+    return (_jsx(MuiThemeProvider, __assign({ theme: theme }, { children: children })));
+};
+export default ThemeProvider;

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './components/Button';
+export { default as Button } from "./components/Button";
+export * from './components/ThemeProvider';
+export { default as ThemeProvider } from './components/ThemeProvider';
+export * from './assets/theme';
+export { default as theme } from './assets/theme';

package/dist/index.js

@@ -0,0 +1,6 @@
+export * from './components/Button';
+export { default as Button } from "./components/Button";
+export * from './components/ThemeProvider';
+export { default as ThemeProvider } from './components/ThemeProvider';
+export * from './assets/theme';
+export { default as theme } from './assets/theme';

package/package.json

@@ -0,0 +1,124 @@
+{
+  "name": "@veritone-ce/design-system",
+  "version": "0.0.10",
+  "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",
+    "build-docs": "yarn build-storybook-docs",
+    "test": "yarn test-storybook",
+    "storybook": "start-storybook -p 6006 -s public",
+    "release": "auto shipit --base-branch=main",
+    "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"
+        }
+      }
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "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",
+    "@storybook/jest": "^0.0.10",
+    "@storybook/manager-webpack5": "^6.5.12",
+    "@storybook/node-logger": "^6.5.12",
+    "@storybook/preset-create-react-app": "^4.1.2",
+    "@storybook/react": "^6.5.12",
+    "@storybook/test-runner": "^0.7.2",
+    "@storybook/testing-library": "^0.0.13",
+    "auto": "^10.37.6",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "chromatic": "^6.10.1",
+    "cross-env": "^7.0.3",
+    "install-peers-cli": "^2.2.0",
+    "jest": "27",
+    "prettier": "^2.7.1",
+    "prop-types": "^15.8.1",
+    "webpack": "^5.74.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "babel": {
+    "presets": [
+      [
+        "react-app",
+        {
+          "absoluteRuntime": false
+        }
+      ]
+    ]
+  },
+  "description": "Design System for Veritone CE",
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://git@github.com/veritone/design-system.git"
+  },
+  "author": "Veritone",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/veritone/design-system/issues"
+  },
+  "homepage": "https://github.com/veritone/design-system#readme",
+  "keywords": [
+    "design system",
+    "ui library"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "files": [
+    "dist"
+  ],
+  "types": "dist/index.d.ts"
+}