@veritone-ce/design-system 0.9.0

package/.github/workflows/chromatic.yml

@@ -0,0 +1,21 @@
+# Name of our action
+name: "Chromatic"
+# The event that will trigger the action
+on: push
+
+# What the action will do
+jobs:
+  test:
+    # The operating system it will run on
+    runs-on: ubuntu-latest
+    # The list of steps that the action will go through
+    steps:
+      - uses: actions/checkout@v1
+      - run: yarn
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/design-systems-for-developers/react/en/review/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

package/.storybook/main.js

@@ -0,0 +1,21 @@
+module.exports = {
+  stories: [
+    '../src/Intro.stories.mdx',
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/preset-create-react-app',
+    '@storybook/addon-a11y',
+  ],
+  framework: '@storybook/react',
+  core: {
+    builder: '@storybook/builder-webpack5'
+  },
+  features: {
+    interactionsDebugger: true,
+  },
+}

package/.storybook/preview.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import { ThemeProvider} from '@mui/system'
+import theme from '../src/assets/theme'
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={theme}>
+      <Story />
+    </ThemeProvider>
+    
+  ),
+]
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

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,42 @@
+# 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 `` 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 [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `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/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@veritone-ce/design-system",
+  "version": "0.9.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",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "typescript": "^4.4.2",
+    "web-vitals": "^2.1.0"
+  },
+  "scripts": {
+    "start": "yarn storybook",
+    "build": "cross-env BABEL_ENV=production babel src -d dist",
+    "build-docs": "yarn build-storybook-docs",
+    "test": "yarn test-storybook",
+    "storybook": "start-storybook -p 6006 -s public",
+    "build-storybook": "build-storybook -s public",
+    "test-storybook": "test-storybook",
+    "build-storybook-docs": "build-storybook  --docs"
+  },
+  "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",
+    "jest": "27",
+    "prettier": "^2.7.1",
+    "prop-types": "^15.8.1",
+    "webpack": "^5.74.0"
+  },
+  "babel": {
+    "presets": [
+      [
+        "react-app",
+        {
+          "absoluteRuntime": false
+        }
+      ]
+    ]
+  },
+  "description": "design system for veritone ce",
+  "main": "index.js",
+  "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"
+  ]
+}

package/public/index.html

@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Veritone CE Design System"
+    />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>Veritone | Design System</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

package/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Design System",
+  "name": "Veritone CE Design System",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/src/Intro.stories.mdx

@@ -0,0 +1,7 @@
+import { Meta } from "@storybook/addon-docs";
+
+<Meta title="Introduction" />
+
+# Veritone CE Design System
+
+The Veritone CE Design System is a collection of common components that are intended to be shared across applications.

package/src/assets/theme.tsx

@@ -0,0 +1,345 @@
+import { createTheme, ThemeOptions as MuiThemeOptions } from '@mui/material'
+import '@fontsource/nunito-sans'
+import '@fontsource/dosis'
+import sx from '@mui/system/sx'
+import { CSSProperties } from '@mui/styled-engine'
+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'
+
+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
+  }
+
+  // allow configuration using `createTheme`
+  interface ThemeOptions extends MuiThemeOptions {
+    pallete?: {
+      button?: ButtonPaletteColorOptions
+      neutral?: PaletteColorOptions
+    }
+  }
+}
+
+// create theme in steps https://mui.com/material-ui/customization/theming/#api
+let 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: ({ ownerState }) => ({
+          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,
+              },
+            } as CSSProperties)),
+          ...(ownerState.variant === `text` &&
+            ({
+              fontWeight: '600',
+              color: theme.palette.button.main,
+              ':hover': {
+                color: theme.palette.button.hover,
+              },
+              '.MuiButton-startIcon': {
+                color: `#555F7C`,
+                marginRight: theme.spacing(2),
+              },
+            } as CSSProperties)),
+        }),
+      },
+      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',
+            },
+          }),
+        },
+      ],
+    },
+    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: <CheckCircleIcon />,
+          info: <InfoIcon />,
+          warning: <WarningIcon />,
+          error: <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/src/components/Button/Button.stories.tsx

@@ -0,0 +1,56 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import Button from './'
+// import { userEvent, within } from '@storybook/testing-library'
+// import { expect } from '@storybook/jest'
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argType: {
+    variant: `contained`,
+  },
+  parameters: {
+    componentSubtitle: 'Clickable Button with many variations',
+    controls: {
+      exclude: [
+        'variant',
+        'classes',
+      ]
+    }
+  },
+} as ComponentMeta<typeof Button>
+
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args}>Text</Button>
+
+export const Primary = Template.bind({})
+
+export const Secondary = Template.bind({})
+Secondary.args = {
+  variant: 'secondary',
+}
+
+export const Processing = Template.bind({})
+Processing.args = {
+  isProcessing: true,
+}
+
+/*
+ * New story using the play function.
+ * See https://storybook.js.org/docs/react/writing-stories/play-function
+ * to learn more about the play function.
+ */
+//  export const WithInteractions = (args) => <Button {...args} />;
+// export const WithInteractions = Template.bind({})
+//  WithInteractions.args = {
+//    href: 'http://storybook.js.org',
+//  }
+
+//  WithInteractions.play = async ({ canvasElement }) => {
+//   // Assigns canvas to the component root element
+//    const canvas = within(canvasElement)
+//    await userEvent.click(canvas.getByRole('link'))
+//    expect(canvas.getByRole('link')).toHaveAttribute(
+//      'href',
+//      'http://storybook.js.org',
+//     )
+//  }

package/src/components/Button/index.tsx

@@ -0,0 +1,53 @@
+
+import { Button as MuiButton, ButtonProps, CircularProgress, Box } from '@mui/material'
+
+export type Props = {
+  /**
+  Use the isProcessing prop to indicate to the user that an action is in process. This will disable the button. 
+  */
+  isProcessing?: boolean
+} & ButtonProps
+
+/**
+- Use a button for common user click actions. Several variations available.
+**/
+const Button = ({
+  children,
+  isProcessing = false,
+  ...props
+}: Props) => {
+  const processingIndicator = (
+    <Box
+      sx={{
+        position: `absolute`,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        display: `grid`,
+        justifyItems: `center`,
+        alignItems: `center`,
+      }}
+    >
+      <CircularProgress size={20}></CircularProgress>
+    </Box>
+  )
+
+  const indicator = isProcessing ? processingIndicator : null
+
+  return (
+    <Box
+      sx={{
+        display: `inline-flex`,
+        position: `relative`,
+      }}
+    >
+      <MuiButton {...props} disabled={isProcessing || props.disabled}>
+        {children}
+      </MuiButton>
+      {indicator}
+    </Box>
+  )
+}
+
+export default Button

package/src/components/ThemeProvider/index.tsx

@@ -0,0 +1,12 @@
+import { ThemeProvider as MuiThemeProvider, ThemeProviderProps } from '@mui/system'
+import theme from '../../assets/theme'
+
+const ThemeProvider = ({
+  children,
+}: ThemeProviderProps) => {
+  return (
+    <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+  )
+}
+
+export default ThemeProvider

package/src/index.tsx

@@ -0,0 +1,2 @@
+export * from './components/Button'
+export * from './components/ThemeProvider'

package/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

package/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "rootDir": "src"
+  },
+  "include": [
+    "src"
+  ]
+}