@veritone-ce/design-system 1.6.0 → 1.7.1

package/dist/assets/theme.js

@@ -3,8 +3,8 @@ import { createTheme } from '@mui/material';
 import checkboxTheme from '../components/Checkbox/checkbox.theme';
 import radioButtonTheme from '../components/RadioButton/RadioButton.theme';
 import buttonTheme from '../components/Button/button.theme';
+import selectTheme from '../components/Select/select.theme';
 import inputTheme from '../components/Input/Input.theme';
-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';
@@ -84,36 +84,38 @@ let theme = createTheme({
     },
     spacing: 10
 });
-theme = createTheme(Object.assign(Object.assign({}, theme), { components: {
+theme = createTheme(theme, {
+    components: {
         MuiButton: buttonTheme(theme),
+        MuiSelect: selectTheme(theme),
         MuiTextField: inputTheme(theme),
         MuiCheckbox: checkboxTheme(theme),
         MuiRadio: radioButtonTheme(theme),
         MuiInputLabel: {
             styleOverrides: {
-                root: sx({
+                root: {
                     color: theme.palette.text.secondary,
                     fontSize: `14px`,
                     lineHeight: `21px`,
                     fontWeight: `600`
-                })
+                }
             }
         },
         MuiFormControlLabel: {
             styleOverrides: {
-                root: sx({
+                root: {
                     '& .MuiFormControlLabel-label': {
                         color: theme.palette.text.secondary
                     },
                     '& .MuiFormControlLabel-label.Mui-disabled': {
                         color: theme.palette.text.disabled
                     }
-                })
+                }
             }
         },
         MuiFormHelperText: {
             styleOverrides: {
-                root: sx({
+                root: {
                     position: 'relative',
                     marginLeft: 0,
                     '&.Mui-error': {
@@ -130,7 +132,7 @@ theme = createTheme(Object.assign(Object.assign({}, theme), { components: {
                             borderRadius: `100%`
                         }
                     }
-                })
+                }
             }
         },
         MuiStepIcon: {
@@ -265,6 +267,29 @@ theme = createTheme(Object.assign(Object.assign({}, theme), { components: {
                     paddingTop: theme.spacing(1)
                 }
             }
+        },
+        MuiDataGrid: {
+            styleOverrides: {
+                root: {
+                    '& .MuiDataGrid-columnHeader:focus': {
+                        outline: 0
+                    },
+                    '& .MuiDataGrid-cell:focus': {
+                        outline: 0
+                    }
+                }
+            }
+        },
+        MuiPaper: {
+            styleOverrides: {
+                root: {
+                    '&.MuiMenu-paper': {
+                        border: '1px solid ' + theme.palette.text.disabled,
+                        boxShadow: 'none'
+                    }
+                }
+            }
         }
-    } }));
+    }
+});
 export default theme;

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

@@ -1,4 +1,3 @@
-import sx from '@mui/system/sx';
 const buttonTheme = (theme) => ({
     defaultProps: {
         variant: 'contained',
@@ -89,7 +88,7 @@ const buttonTheme = (theme) => ({
             props: {
                 variant: 'secondary'
             },
-            style: sx({
+            style: {
                 backgroundColor: 'white',
                 color: theme.palette.neutral.main,
                 border: `1px solid ${theme.palette.neutral.main}`,
@@ -98,7 +97,7 @@ const buttonTheme = (theme) => ({
                     color: theme.palette.primary.main,
                     backgroundColor: 'white'
                 }
-            })
+            }
         }
     ]
 });

package/dist/components/ProgressIndicator/DefaultProgress.d.ts

@@ -0,0 +1,3 @@
+import { ProgressIndicatorProps } from '.';
+declare const DefaultProgress: ({ itemLoading, size }: ProgressIndicatorProps) => JSX.Element;
+export default DefaultProgress;

package/dist/components/ProgressIndicator/DefaultProgress.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircularProgress, Typography, Box } from '@mui/material';
+const DefaultProgress = ({ itemLoading, size }) => {
+    return (_jsxs(Box, Object.assign({ sx: { display: 'flex' } }, { children: [itemLoading && (_jsx(Typography, Object.assign({ sx: {
+                    fontSize: '14px',
+                    mr: '10px'
+                } }, { children: ` Loading ${itemLoading}` }))), _jsx(CircularProgress, { size: size })] })));
+};
+export default DefaultProgress;

package/dist/components/ProgressIndicator/MLProgress.d.ts

@@ -0,0 +1,3 @@
+import { ProgressIndicatorProps } from '.';
+declare const MLProgress: ({ itemLoading, size }: ProgressIndicatorProps) => JSX.Element;
+export default MLProgress;

package/dist/components/ProgressIndicator/MLProgress.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CircularProgress, Typography, Box } from '@mui/material';
+const MLProgress = ({ itemLoading, size }) => {
+    return (_jsxs(Box, Object.assign({ sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center'
+        } }, { children: [_jsx(CircularProgress, { size: size }), itemLoading && (_jsx(Typography, Object.assign({ sx: {
+                    fontSize: '14px'
+                } }, { children: ` Loading ${itemLoading}` })))] })));
+};
+export default MLProgress;

package/dist/components/ProgressIndicator/ProgressIndicator.stories.d.ts

@@ -0,0 +1,7 @@
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import ProgressIndicator, { ProgressIndicatorProps } from '.';
+declare const _default: ComponentMeta<({ ...props }: ProgressIndicatorProps) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<typeof ProgressIndicator> | Story;
+export declare const Medium: Story<import("@storybook/react").Args> | ComponentStory<({ ...props }: ProgressIndicatorProps) => JSX.Element>;
+export declare const Large: Story<import("@storybook/react").Args> | ComponentStory<({ ...props }: ProgressIndicatorProps) => JSX.Element>;

package/dist/components/ProgressIndicator/ProgressIndicator.stories.js

@@ -0,0 +1,42 @@
+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 } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import { Box } from '@mui/material';
+import ProgressIndicator from '.';
+export default {
+    title: 'Components/ProgressIndicator',
+    component: ProgressIndicator
+};
+const previewProps = [
+    {
+        itemLoading: 'default',
+        type: 'default',
+        size: 18
+    }
+];
+export const Default = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(Box, { children: previewProps.map((props, index) => (_createElement(ProgressIndicator, Object.assign({}, props, args, { key: index })))) }));
+};
+export const Medium = Default.bind({});
+Medium.args = {
+    itemLoading: 'medium',
+    size: 30,
+    type: 'medium'
+};
+export const Large = Default.bind({});
+Large.args = {
+    itemLoading: 'large',
+    size: 50,
+    type: 'large'
+};

package/dist/components/ProgressIndicator/__tests__/ProgressIndicator.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ProgressIndicator/__tests__/ProgressIndicator.test.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { screen } from '@testing-library/react';
+import ProgressIndicator from '..';
+describe('<ProgressIndicator />', () => {
+    it('should render the ProgressIndicator component', () => {
+        render(_jsx(ProgressIndicator, {}));
+        expect(screen.getByText('ProgressIndicator')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,11 @@
+import { CircularProgressProps } from '@mui/material';
+export declare type ProgressIndicatorProps = {
+    itemLoading?: string;
+    type?: string;
+    size?: number;
+} & CircularProgressProps;
+/**
+- Use a progress indicator to show the user that an operation is in progress.
+**/
+declare const ProgressIndicator: ({ ...props }: ProgressIndicatorProps) => JSX.Element;
+export default ProgressIndicator;

package/dist/components/ProgressIndicator/index.js

@@ -0,0 +1,22 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import DefaultProgress from './DefaultProgress';
+import MLProgress from './MLProgress';
+/**
+- Use a progress indicator to show the user that an operation is in progress.
+**/
+const ProgressIndicator = (_a) => {
+    var props = __rest(_a, []);
+    return (_jsxs(_Fragment, { children: [props.type === 'default' && _jsx(DefaultProgress, Object.assign({}, props)), props.type === 'medium' && _jsx(MLProgress, Object.assign({}, props)), props.type === 'large' && _jsx(MLProgress, Object.assign({}, props))] }));
+};
+export default ProgressIndicator;

package/dist/components/Select/Select.stories.d.ts

@@ -0,0 +1,5 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ label, items, helperText, errorMessage, ...props }: import(".").SelectProps) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<({ label, items, helperText, errorMessage, ...props }: import(".").SelectProps) => JSX.Element>;
+export declare const MultiLine: ComponentStory<({ label, items, helperText, errorMessage, ...props }: import(".").SelectProps) => JSX.Element>;

package/dist/components/Select/Select.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Box } from '@mui/material';
+import Select from '.';
+export default {
+    title: 'Components/Select',
+    component: Select
+};
+const Template = (args) => (_jsx(Box, Object.assign({ sx: {
+        display: `grid`,
+        gridTemplateColumns: `repeat(2, 300px)`,
+        gap: 2
+    } }, { children: _jsxs(React.Fragment, { children: [_jsx(Select, Object.assign({}, args)), _jsx(Select, Object.assign({}, args, { helperText: "Helper Text" })), _jsx(Select, Object.assign({}, args, { disabled: true })), _jsx(Select, Object.assign({}, args, { disabled: true, helperText: "Helper Text" })), _jsx(Select, Object.assign({}, args, { error: true, errorMessage: "Error Message" })), _jsx(Select, Object.assign({}, args, { error: true, errorMessage: "Error Message", helperText: "Helper Text" }))] }) })));
+export const Default = Template.bind({});
+Default.args = {
+    label: 'Label',
+    value: '',
+    items: [
+        { name: 'One', value: 1 },
+        { name: 'Two', value: 2 },
+        { name: 'Three', value: 3 }
+    ],
+    fullWidth: true,
+    displayEmpty: true
+};
+export const MultiLine = Template.bind({});
+MultiLine.args = {
+    label: 'Label',
+    value: '',
+    items: [
+        { name: 'UA-12234566', value: 4, title: 'Google Analytics' },
+        { name: 'UA-12234567', value: 4, title: 'Source' },
+        { name: 'UA-12234568', value: 4, title: 'Source' }
+    ],
+    fullWidth: true,
+    displayEmpty: true
+};

package/dist/components/Select/__tests__/Select.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Select/__tests__/Select.test.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { screen } from '@testing-library/react';
+import Select from '..';
+const items = [
+    { name: 'One', value: 1 },
+    { name: 'Two', value: 2 },
+    { name: 'Three', value: 3 }
+];
+describe('<Select />', () => {
+    it('should render the Select component', () => {
+        render(_jsx(Select, { "data-testid": "select", label: 'Select', value: '', items: items }));
+        expect(screen.getByTestId('select')).toBeInTheDocument();
+    });
+    it('should render Select component with all properties', () => {
+        render(_jsx(Select, { "data-testid": "select", label: 'Select', value: '', helperText: "Helper Text", error: true, errorMessage: "Error Message", items: items }));
+        expect(screen.getByTestId('select')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,15 @@
+import { SelectProps as MuiSelectProps } from '@mui/material';
+declare type ItemData = {
+    title?: string;
+    name: string;
+    value: string | number;
+};
+export declare type SelectProps = {
+    'data-testid'?: string;
+    label: string;
+    items: ItemData[];
+    helperText?: string;
+    errorMessage?: string;
+} & MuiSelectProps;
+declare const Select: ({ label, items, helperText, errorMessage, ...props }: SelectProps) => JSX.Element;
+export default Select;

package/dist/components/Select/index.js

@@ -0,0 +1,63 @@
+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 { Box, FormHelperText, InputLabel, MenuItem, Select as MuiSelect } from '@mui/material';
+import Circle from '@mui/icons-material/Lens';
+const Select = (_a) => {
+    var { label, items, helperText, errorMessage } = _a, props = __rest(_a, ["label", "items", "helperText", "errorMessage"]);
+    return (_jsxs(Box, Object.assign({ sx: {
+            maxHeight: helperText ? '77px' : '56px'
+        } }, { children: [_jsx(InputLabel, Object.assign({ id: "label-select", sx: {
+                    display: 'flex',
+                    alignItems: 'flex-end',
+                    lineHeight: '17px',
+                    marginBottom: '3px'
+                } }, { children: label })), _jsx(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    '& .MuiOutlinedInput-root': {
+                        '& .MuiSelect-outlined': {
+                            padding: helperText ? '7px 7.5px' : '5px 8px',
+                            fontSize: helperText ? '14px' : '16px',
+                            lineHeight: helperText ? '20px' : '24px'
+                        },
+                        '&.Mui-error': {
+                            '& .MuiSelect-outlined': {
+                                padding: helperText ? '7px 8px' : '5px 13px'
+                            }
+                        }
+                    }
+                } }, { children: _jsxs(MuiSelect, Object.assign({}, props, { labelId: "label-select" }, { children: [_jsx(MenuItem, Object.assign({ value: "", sx: {
+                                color: (theme) => theme.palette.text.primary,
+                                padding: '10px 20px',
+                                ':hover, :focus': {
+                                    backgroundColor: (theme) => theme.palette.misc.altBackground
+                                }
+                            } }, { children: "Select" })), items.map((item, index) => (_jsx(MenuItem, Object.assign({ value: item.value, sx: {
+                                color: (theme) => theme.palette.text.primary,
+                                padding: '10px 20px',
+                                ':hover, :focus': {
+                                    backgroundColor: (theme) => theme.palette.misc.altBackground
+                                }
+                            } }, { children: _jsxs(Box, Object.assign({ sx: { lineHeight: '20px', fontSize: '14px', opacity: 0.9 } }, { children: [_jsx(Box, Object.assign({ sx: { fontWeight: 700 } }, { children: item.title })), _jsx(Box, { children: item.name })] })) }), index)))] })) })), helperText && (_jsx(FormHelperText, Object.assign({ sx: {
+                    lineHeight: '18px',
+                    color: (theme) => theme.palette.text.disabled
+                } }, { children: helperText }))), props.error && (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center' } }, { children: [_jsx(Circle, { sx: {
+                            width: '14px',
+                            height: '14px',
+                            margin: '1px 3px 0 -2px',
+                            color: (theme) => theme.palette.error.main
+                        } }), _jsx(FormHelperText, Object.assign({ sx: {
+                            color: (theme) => theme.palette.error.main,
+                            lineHeight: '18px'
+                        } }, { children: errorMessage }))] })))] })));
+};
+export default Select;

package/dist/components/Select/select.theme.d.ts

@@ -0,0 +1,53 @@
+import { Theme } from '../../assets/theme';
+declare const selectTheme: (theme: Theme) => {
+    defaultProps: {
+        fullWidth: boolean;
+        displayEmpty: boolean;
+    };
+    styleOverrides: {
+        root: () => {
+            '&.MuiOutlinedInput-root': {
+                '& .MuiSelect-outlined': {
+                    border: string;
+                };
+                '&.Mui-focused': {
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: string;
+                    };
+                };
+                '&.Mui-error': {
+                    '& .MuiSelect-outlined': {
+                        color: string;
+                        border: string;
+                        fontSize: string;
+                        lineHeight: string;
+                    };
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: string;
+                    };
+                    '& .MuiSelect-iconOutlined': {
+                        color: string;
+                    };
+                };
+                '&.Mui-disabled': {
+                    '& .MuiSelect-iconOutlined': {
+                        color: string;
+                    };
+                    '& .MuiSelect-outlined': {
+                        background: string;
+                        borderColor: string;
+                        color: string;
+                        '-webkit-text-fill-color': string;
+                    };
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        border: string;
+                    };
+                };
+                '& .MuiSelect-iconOutlined': {
+                    color: string;
+                };
+            };
+        };
+    };
+};
+export default selectTheme;

package/dist/components/Select/select.theme.js

@@ -0,0 +1,52 @@
+const selectTheme = (theme) => ({
+    defaultProps: {
+        fullWidth: true,
+        displayEmpty: true
+    },
+    styleOverrides: {
+        root: () => ({
+            '&.MuiOutlinedInput-root': {
+                '& .MuiSelect-outlined': {
+                    border: '1px solid ' + theme.palette.text.secondary
+                },
+                '&.Mui-focused': {
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: theme.palette.secondary.main
+                    }
+                },
+                '&.Mui-error': {
+                    '& .MuiSelect-outlined': {
+                        color: theme.palette.error.main,
+                        border: '1px solid ' + theme.palette.error.main,
+                        fontSize: '16px',
+                        lineHeight: '24px'
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        borderColor: theme.palette.error.main
+                    },
+                    '& .MuiSelect-iconOutlined': {
+                        color: theme.palette.text.tertiary
+                    }
+                },
+                '&.Mui-disabled': {
+                    '& .MuiSelect-iconOutlined': {
+                        color: theme.palette.text.disabled
+                    },
+                    '& .MuiSelect-outlined': {
+                        background: theme.palette.misc.rowHoverGreyOne,
+                        borderColor: theme.palette.misc.altBackground,
+                        color: theme.palette.text.disabled,
+                        '-webkit-text-fill-color': theme.palette.text.disabled
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                        border: 'none'
+                    }
+                },
+                '& .MuiSelect-iconOutlined': {
+                    color: theme.palette.secondary.main
+                }
+            }
+        })
+    }
+});
+export default selectTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.6.0",
+  "version": "1.7.1",
   "private": false,
   "scripts": {
     "start": "yarn storybook",