@veritone-ce/design-system 1.7.0 → 1.8.0

package/dist/assets/theme.d.ts

@@ -54,6 +54,6 @@ declare const colors: {
         rowOnHoverGreyTwo: string;
     };
 };
-export declare type Theme = typeof theme;
+export type Theme = typeof theme;
 declare let theme: import("@mui/material").Theme;
 export default theme;

package/dist/assets/theme.js

@@ -5,7 +5,6 @@ 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';
@@ -94,29 +93,29 @@ theme = createTheme(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': {
@@ -133,7 +132,7 @@ theme = createTheme(theme, {
                             borderRadius: `100%`
                         }
                     }
-                })
+                }
             }
         },
         MuiStepIcon: {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentMeta, ComponentStory } from '@storybook/react';
 import { ButtonProps } from './';
 declare const _default: ComponentMeta<({ children, ...props }: ButtonProps) => JSX.Element>;

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

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 declare const Indicator: () => JSX.Element;
 export default Indicator;

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/Button/index.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { ButtonProps as MuiButtonProps } from '@mui/material';
-export declare type ButtonProps = {
+export type ButtonProps = {
     'data-testid'?: string;
     isLoading?: boolean;
 } & MuiButtonProps;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 declare const _default: ComponentMeta<({ label, ...props }: import(".").CheckboxProps) => JSX.Element>;
 export default _default;

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { CheckboxProps as MuiCheckboxProps } from '@mui/material';
-export declare type CheckboxProps = {
+export type CheckboxProps = {
     'data-testid'?: string;
     label?: string | undefined;
 } & MuiCheckboxProps;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
 import FileUploader from '.';
 declare const _default: ComponentMeta<({ uploadUrl, files, accept, multiple, onSuccess, onError, extensions, ...props }: {

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Accept } from 'react-dropzone';
 export interface FileData {
     file: File;
@@ -5,7 +6,7 @@ export interface FileData {
     isUploaded: boolean;
     withError: boolean;
 }
-declare type FileUploaderProps = {
+type FileUploaderProps = {
     'data-testid'?: string;
     accept?: Accept;
     multiple?: boolean;

package/dist/components/FileUploader/useUploadFile.js

@@ -18,7 +18,7 @@ import axios from 'axios';
 import { useCallback } from 'react';
 export const useUploadFile = (setfileList, uploadUrl, onSuccess, onError) => {
     const onDrop = useCallback((acceptedFiles) => __awaiter(void 0, void 0, void 0, function* () {
-        var e_1, _a;
+        var _a, e_1, _b, _c;
         if (!uploadUrl) {
             onError && onError(new Error('upload url is required'));
             return;
@@ -31,30 +31,37 @@ export const useUploadFile = (setfileList, uploadUrl, onSuccess, onError) => {
         }));
         setfileList(newList);
         try {
-            for (var _b = __asyncValues(newList.entries()), _c; _c = yield _b.next(), !_c.done;) {
-                const [index, file] = _c.value;
+            for (var _d = true, _e = __asyncValues(newList.entries()), _f; _f = yield _e.next(), _a = _f.done, !_a;) {
+                _c = _f.value;
+                _d = false;
                 try {
-                    yield uploadFile(uploadUrl, file.file, (progress) => {
+                    const [index, file] = _c;
+                    try {
+                        yield uploadFile(uploadUrl, file.file, (progress) => {
+                            const nList = [...newList];
+                            nList.splice(index, 1, Object.assign(Object.assign({}, file), { isUploaded: progress === 100, uploadProgress: progress }));
+                            newList = nList;
+                            setfileList(nList);
+                        });
+                        onSuccess && onSuccess(true);
+                    }
+                    catch (error) {
                         const nList = [...newList];
-                        nList.splice(index, 1, Object.assign(Object.assign({}, file), { isUploaded: progress === 100, uploadProgress: progress }));
+                        nList.splice(index, 1, Object.assign(Object.assign({}, file), { isUploaded: false, uploadProgress: 0, withError: true }));
                         newList = nList;
                         setfileList(nList);
-                    });
-                    onSuccess && onSuccess(true);
+                        onError && onError(error);
+                    }
                 }
-                catch (error) {
-                    const nList = [...newList];
-                    nList.splice(index, 1, Object.assign(Object.assign({}, file), { isUploaded: false, uploadProgress: 0, withError: true }));
-                    newList = nList;
-                    setfileList(nList);
-                    onError && onError(error);
+                finally {
+                    _d = true;
                 }
             }
         }
         catch (e_1_1) { e_1 = { error: e_1_1 }; }
         finally {
             try {
-                if (_c && !_c.done && (_a = _b.return)) yield _a.call(_b);
+                if (!_d && !_a && (_b = _e.return)) yield _b.call(_e);
             }
             finally { if (e_1) throw e_1.error; }
         }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
 import Input from '.';
 declare const _default: ComponentMeta<({ ...TextFieldProps }: {

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { TextFieldProps } from '@mui/material';
-declare type InputComponentProps = {
+type InputComponentProps = {
     'data-testid'?: string;
 } & TextFieldProps;
 declare const Input: ({ ...TextFieldProps }: InputComponentProps) => JSX.Element;

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Story, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<({ title, isOpen, children, size, handleClose, ...props }: {
+    title: string;
+    isOpen: boolean;
+    size?: "big" | "small" | "medium" | undefined;
+    children?: import("react").ReactNode;
+    handleClose?: (() => void) | undefined;
+    'data-testid'?: string | undefined;
+}) => JSX.Element>;
+export default _default;
+export declare const Big: Story;
+export declare const Medium: Story;
+export declare const Small: Story;

package/dist/components/Panel/Panel.stories.js

@@ -0,0 +1,46 @@
+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 Panel from '.';
+export default {
+    title: 'Components/Panel',
+    component: Panel,
+    argTypes: {
+        title: {
+            defaultValue: 'Panel',
+            control: {
+                type: 'text'
+            }
+        },
+        isOpen: {
+            control: {
+                type: 'boolean'
+            },
+            defaultValue: true
+        },
+        handleClose: { control: false },
+        'data-testid': { control: false },
+        size: { control: false }
+    }
+};
+export const Big = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(Panel, Object.assign({ title: "Big Panel", isOpen: true }, args)));
+};
+export const Medium = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(Panel, Object.assign({ title: "Medium Panel", isOpen: true, size: "medium" }, args)));
+};
+export const Small = (_a) => {
+    var args = __rest(_a, []);
+    return (_jsx(Panel, Object.assign({ title: "Small Panel", size: "small", isOpen: true }, args)));
+};

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

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

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

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { screen, render, fireEvent } from '@testing-library/react';
+import Panel from '..';
+describe('<Panel />', () => {
+    it('should render the Panel component with primary variant', () => {
+        render(_jsx(Panel, Object.assign({ title: "Panel title", isOpen: false }, { children: "With some children" })));
+        expect(screen.getByText('Panel title')).toBeInTheDocument();
+        expect(screen.getByTestId('wrapper-panel')).toBeInTheDocument();
+        expect(screen.getByTestId('panel-close-icon')).toBeInTheDocument();
+        const header = screen.getByTestId('header-panel');
+        const style = getComputedStyle(header);
+        expect(style.background).toBe('rgb(156, 39, 176)');
+    });
+    it('should render the Panel component with big size', () => {
+        render(_jsx(Panel, Object.assign({ title: "Panel title", isOpen: true }, { children: "With some children" })));
+        const wrapper = screen.getByTestId('wrapper-panel');
+        const style = getComputedStyle(wrapper);
+        expect(style.maxWidth).toBe('720px');
+    });
+    it('should render the Panel component with medium size', () => {
+        render(_jsx(Panel, Object.assign({ size: "medium", title: "Panel title", isOpen: true }, { children: "With some children" })));
+        const wrapper = screen.getByTestId('wrapper-panel');
+        const style = getComputedStyle(wrapper);
+        expect(style.maxWidth).toBe('560px');
+    });
+    it('should render the Panel component with small size', () => {
+        render(_jsx(Panel, Object.assign({ size: "small", title: "Panel title", isOpen: true }, { children: "With some children" })));
+        const wrapper = screen.getByTestId('wrapper-panel');
+        const style = getComputedStyle(wrapper);
+        expect(style.maxWidth).toBe('380px');
+    });
+    it('should close the Panel component', () => {
+        const handleClose = jest.fn();
+        render(_jsx(Panel, { title: "Panel title", isOpen: true, handleClose: handleClose }));
+        const buttonClose = screen.getByTestId('close-button-wrapper-panel');
+        fireEvent.click(buttonClose);
+        expect(handleClose).toBeCalled();
+    });
+    it('should creates data test id in props', () => {
+        render(_jsx(Panel, { title: "Panel title", isOpen: true, "data-testid": "panel-test" }));
+        expect(screen.getByTestId('overlay-panel-test')).toBeInTheDocument();
+        expect(screen.getByTestId('close-button-panel-test')).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+type PanelProps = {
+    title: string;
+    isOpen: boolean;
+    size?: 'big' | 'medium' | 'small';
+    children?: ReactNode;
+    handleClose?: () => void;
+    'data-testid'?: string;
+};
+declare const Panel: ({ title, isOpen, children, size, handleClose, ...props }: PanelProps) => JSX.Element;
+export default Panel;

package/dist/components/Panel/index.js

@@ -0,0 +1,79 @@
+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, Typography, useTheme } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+const Panel = (_a) => {
+    var { title, isOpen, children, size = 'big', handleClose } = _a, props = __rest(_a, ["title", "isOpen", "children", "size", "handleClose"]);
+    const { palette } = useTheme();
+    return (_jsx(Box, Object.assign({ component: "div", "data-testid": props['data-testid']
+            ? `overlay-${props['data-testid']}`
+            : 'overlay-panel', sx: {
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            zIndex: 1,
+            display: !isOpen ? 'none' : 'block'
+        } }, { children: _jsxs(Box, Object.assign({ component: "div", "data-testid": props['data-testid'] || 'wrapper-panel', sx: {
+                position: 'absolute',
+                background: palette.common.white,
+                maxWidth: size === 'medium' ? '560px' : size === 'small' ? '380px' : '720px',
+                width: '100%',
+                height: '99vh',
+                display: 'flex',
+                flexDirection: 'column',
+                boxShadow: `0 4px 10px ${palette.text.primary}80`,
+                overflow: 'auto',
+                borderBottom: `5px solid ${palette.secondary.main}`,
+                zIndex: 2
+            } }, { children: [_jsxs(Box, Object.assign({ component: "header", "data-testid": "header-panel", sx: {
+                        background: palette.secondary.main,
+                        height: '64px',
+                        padding: '0px 25px 0px 30px',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        position: 'sticky',
+                        top: 0
+                    } }, { children: [_jsx(Typography, Object.assign({ sx: {
+                                fontFamily: 'Dosis',
+                                textTransform: 'uppercase',
+                                fontWeight: 600,
+                                fontSize: '18px',
+                                color: palette.common.white,
+                                lineHeight: '23px',
+                                letterSpacing: '0.25px'
+                            } }, { children: title })), _jsx(Box, Object.assign({ component: "button", "aria-label": "close-button-panel", "data-testid": props['data-testid']
+                                ? `close-button-${props['data-testid']}`
+                                : 'close-button-wrapper-panel', onClick: handleClose, sx: {
+                                cursor: 'pointer',
+                                background: 'transparent',
+                                border: 'none',
+                                width: '26px',
+                                height: '26px',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center'
+                            } }, { children: _jsx(CloseIcon, { "data-testid": "panel-close-icon", sx: {
+                                    fill: palette.common.white,
+                                    margin: 'auto'
+                                } }) }))] })), _jsx(Box, Object.assign({ component: "div", sx: {
+                        overflow: 'auto',
+                        flex: 1
+                    } }, { children: _jsx(Box, Object.assign({ component: "div", "data-testid": "panel-content", sx: {
+                            flex: 1,
+                            padding: '30px'
+                        } }, { children: children })) }))] })) })));
+};
+export default Panel;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProgressIndicatorProps } from '.';
 declare const DefaultProgress: ({ itemLoading, size }: ProgressIndicatorProps) => JSX.Element;
 export default DefaultProgress;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ProgressIndicatorProps } from '.';
 declare const MLProgress: ({ itemLoading, size }: ProgressIndicatorProps) => JSX.Element;
 export default MLProgress;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
 import ProgressIndicator, { ProgressIndicatorProps } from '.';
 declare const _default: ComponentMeta<({ ...props }: ProgressIndicatorProps) => JSX.Element>;

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { CircularProgressProps } from '@mui/material';
-export declare type ProgressIndicatorProps = {
+export type ProgressIndicatorProps = {
     itemLoading?: string;
     type?: string;
     size?: number;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
 import RadioButton from '.';
 declare const _default: ComponentMeta<({ label, ...props }: {

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { RadioProps } from '@mui/material';
-declare type RadioButtonProps = {
+type RadioButtonProps = {
     'data-testid'?: string;
     label?: string;
 } & RadioProps;

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

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

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

@@ -1,10 +1,11 @@
+/// <reference types="react" />
 import { SelectProps as MuiSelectProps } from '@mui/material';
-declare type ItemData = {
+type ItemData = {
     title?: string;
     name: string;
     value: string | number;
 };
-export declare type SelectProps = {
+export type SelectProps = {
     'data-testid'?: string;
     label: string;
     items: ItemData[];

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

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

package/dist/utils/tests/helpers.d.ts

@@ -1,6 +1,6 @@
 import { RenderOptions } from '@testing-library/react';
 import { ReactElement } from 'react';
-export declare type CustomRenderProps = Omit<RenderOptions, 'queries'>;
+export type CustomRenderProps = Omit<RenderOptions, 'queries'>;
 declare const customRender: (ui: ReactElement, { ...renderOptions }?: CustomRenderProps) => import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
 export * from '@testing-library/react';
 export { customRender as render };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "private": false,
   "scripts": {
     "start": "yarn storybook",
@@ -60,6 +60,8 @@
     "@babel/preset-react": "^7.18.6",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
+    "@emotion/babel-plugin": "^11.10.5",
+    "@emotion/jest": "^11.10.5",
     "@storybook/addon-a11y": "^6.5.13",
     "@storybook/addon-actions": "^6.5.13",
     "@storybook/addon-essentials": "^6.5.13",
@@ -77,6 +79,7 @@
     "@typescript-eslint/parser": "^5.45.0",
     "auto": "^10.37.6",
     "babel-jest": "^29.3.1",
+    "babel-plugin-macros": "^3.1.0",
     "babel-plugin-named-exports-order": "^0.0.2",
     "chromatic": "^6.10.1",
     "cross-env": "^7.0.3",