@veritone-ce/design-system 1.12.20 → 1.12.22

package/dist/assets/theme.js

@@ -249,13 +249,11 @@ theme = (0, _material.createTheme)(theme, {
         variant: `outlined`,
         iconMapping: {
           success: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckCircle.default, {}),
-          info: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            alt: 'information icon',
-            src: InformationIcon
+          info: /*#__PURE__*/(0, _jsxRuntime.jsx)(InformationIcon, {
+            title: 'information icon'
           }),
-          warning: /*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
-            alt: 'warning icon',
-            src: WarningIcon
+          warning: /*#__PURE__*/(0, _jsxRuntime.jsx)(WarningIcon, {
+            title: 'warning icon'
           }),
           error: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Cancel.default, {})
         }

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

@@ -2,7 +2,7 @@ import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
 import Input from '.';
 declare const _default: ComponentMeta<({ ...TextFieldProps }: {
     'data-testid'?: string | undefined;
-} & import("@mui/material").TextFieldProps) => import("react/jsx-runtime").JSX.Element>;
+} & (import("@mui/material").OutlinedTextFieldProps | import("@mui/material").FilledTextFieldProps | import("@mui/material").StandardTextFieldProps)) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
 export declare const Default: ComponentStory<typeof Input> | Story;
 export declare const Disabled: ComponentStory<typeof Input> | Story;

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

@@ -1,6 +1,6 @@
 import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
-import { Tabs } from '@mui/material';
-declare const _default: ComponentMeta<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TabsTypeMap<{}, import("@mui/material").ExtendButtonBase<import("@mui/material").ButtonBaseTypeMap<{}, "button">>>>>;
+import BasicTabs from '.';
+declare const _default: ComponentMeta<({ tabs, ...props }: import(".").BasicTabsProps) => import("react/jsx-runtime").JSX.Element>;
 export default _default;
-export declare const OnOffState: ComponentStory<typeof Tabs> | Story;
-export declare const OnOffWithCount: Story<import("@storybook/react").Args> | ComponentStory<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").TabsTypeMap<{}, import("@mui/material").ExtendButtonBase<import("@mui/material").ButtonBaseTypeMap<{}, "button">>>>>;
+export declare const OnOffState: ComponentStory<typeof BasicTabs> | Story;
+export declare const OnOffWithCount: Story<import("@storybook/react").Args> | ComponentStory<({ tabs, ...props }: import(".").BasicTabsProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/Tabs/Tabs.stories.js

@@ -11,39 +11,28 @@ var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 var _default = {
   title: 'Components/Tabs',
-  component: _material.Tabs
+  component: _.default
 };
 exports.default = _default;
-const OnOffState = ({
-  ...args
-}) => {
-  function a11yProps(index) {
-    return {
-      id: `tab-${index}`
-    };
-  }
-  const [value, setValue] = _react.default.useState(0);
-  const handleChange = (event, newValue) => {
-    setValue(newValue);
-  };
+const tabs = [{
+  label: 'Item One',
+  'data-testid': 'tab-0'
+}, {
+  label: 'Item Two',
+  'data-testid': 'tab-1'
+}, {
+  label: 'Item Three',
+  'data-testid': 'tab-3'
+}];
+const OnOffState = () => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
     sx: {
       borderBottom: 1,
       borderColor: 'divider'
     },
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Tabs, {
-      value: value,
-      onChange: handleChange,
-      "aria-label": "basic tabs example",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-        label: "Item One",
-        ...a11yProps(0),
-        ...args
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-        label: "Item Two",
-        ...a11yProps(1),
-        ...args
-      })]
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+      tabs: tabs,
+      "aria-label": "basic tabs example"
     })
   });
 };
@@ -51,6 +40,17 @@ exports.OnOffState = OnOffState;
 const OnOffWithCount = OnOffState.bind({});
 exports.OnOffWithCount = OnOffWithCount;
 OnOffWithCount.args = {
-  count: 2,
-  label: 'Item with count'
+  tabs: [{
+    label: 'Item One',
+    'data-testid': 'tab-0',
+    count: 1
+  }, {
+    label: 'Item Two',
+    'data-testid': 'tab-1',
+    count: 2
+  }, {
+    label: 'Item Three',
+    'data-testid': 'tab-3',
+    count: 3
+  }]
 };

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

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom';

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

@@ -1,42 +1,53 @@
 "use strict";
 
-var _helpers = require("../../../utils/tests/helpers");
-var _material = require("@mui/material");
 var _react = require("@testing-library/react");
-var _ = _interopRequireDefault(require("../"));
+require("@testing-library/jest-dom");
+var _Tabs = _interopRequireDefault(require("../../Tabs"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-describe('<Tabs />', () => {
-  it('should render the Tabs component', () => {
-    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Tabs, {
-      value: 1,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-        "data-testid": "tab",
-        label: "test",
-        value: 1
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-        "data-testid": "tab",
-        label: "test",
-        value: 2
-      })]
+describe('BasicTabs component', () => {
+  const tabs = [{
+    label: 'Tab 1',
+    count: 5,
+    content: 'Content 1'
+  }, {
+    label: 'Tab 2',
+    count: 10,
+    content: 'Content 2'
+  }, {
+    label: 'Tab 3',
+    content: 'Content 3'
+  }];
+  it('should render the correct number of tabs', () => {
+    const {
+      getAllByRole
+    } = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+      tabs: tabs
     }));
-    expect(_react.screen.getAllByTestId('tab')[0]).toBeInTheDocument();
+    const tabElements = getAllByRole('tab');
+    expect(tabElements).toHaveLength(tabs.length);
   });
-  it('should render the Tabs component with badge', () => {
-    (0, _helpers.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Tabs, {
-      value: 1,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-        "data-testid": "tab",
-        label: "test",
-        count: 2,
-        value: 1
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
-        "data-testid": "tab",
-        label: "test",
-        count: 2,
-        value: 2
-      })]
+  it('should display correct labels and optionally counts', () => {
+    const {
+      getByText
+    } = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+      tabs: tabs
     }));
-    expect(_react.screen.getAllByTestId('tab')[0]).toBeInTheDocument();
+    tabs.forEach(tab => {
+      expect(getByText(tab.label)).toBeInTheDocument();
+      if (tab.count !== undefined) {
+        expect(getByText(tab.count.toString())).toBeInTheDocument();
+      }
+    });
+  });
+  it('should set the correct tab as active when clicked', () => {
+    const {
+      getAllByRole
+    } = (0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tabs.default, {
+      tabs: tabs
+    }));
+    const tabElements = getAllByRole('tab');
+    _react.fireEvent.click(tabElements[1]);
+    expect(tabElements[1]).toHaveClass('Mui-selected');
   });
 });

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

@@ -1,14 +1,12 @@
 import { TabProps } from '@mui/material';
-export type SingleTabProps = {
+export type SingleTabProps = TabProps & {
     'data-testid'?: string;
     label: string;
     count?: number;
-    value?: number;
-} & TabProps;
-/**
- * - This is a wrapper around the Tab component
- * - It adds a badge to the tab if the count is greater than 0
- * - It also adds a11y props to the tab
- **/
-declare const BasicTabs: ({ count, value, label, ...props }: SingleTabProps) => import("react/jsx-runtime").JSX.Element;
+    content?: string;
+};
+export type BasicTabsProps = {
+    tabs: SingleTabProps[];
+};
+declare const BasicTabs: ({ tabs, ...props }: BasicTabsProps) => import("react/jsx-runtime").JSX.Element;
 export default BasicTabs;

package/dist/components/Tabs/index.js

@@ -4,29 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _Tab = _interopRequireDefault(require("@mui/material/Tab"));
+var _react = require("react");
+var _material = require("@mui/material");
 var _Badge = _interopRequireDefault(require("./Badge"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-/**
- * - This is a wrapper around the Tab component
- * - It adds a badge to the tab if the count is greater than 0
- * - It also adds a11y props to the tab
- **/
 const BasicTabs = ({
-  count = 0,
-  value,
-  label,
+  tabs,
   ...props
 }) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tab.default, {
-    ...props,
-    value: value,
-    label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
-      badgeCount: count,
-      label: label
-    }),
-    disableRipple: true
+  const [selectedTab, setSelectedTab] = (0, _react.useState)(0);
+  const handleChange = (event, newValue) => {
+    setSelectedTab(newValue);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Tabs, {
+      value: selectedTab,
+      onChange: handleChange,
+      ...props,
+      children: tabs.map((tab, index) => /*#__PURE__*/(0, _react.createElement)(_material.Tab, {
+        ...tab,
+        key: index,
+        value: index,
+        label: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+          badgeCount: tab.count ?? 0,
+          label: tab.label
+        }),
+        disableRipple: true
+      }))
+    }), tabs[selectedTab].content && tabs[selectedTab].content]
   });
 };
 var _default = BasicTabs;

package/dist/index.d.ts

@@ -27,5 +27,10 @@ export { default as StepLabel } from './components/StepLabel';
 export { default as ModelGridView } from './components/ModelGridView';
 export { default as Breadcrumbs } from './components/Breadcrumbs';
 export { default as CustomSlider } from './components/CustomSlider';
+export { default as LinearProgress } from './components/LinearProgress';
+export { default as MenuFlyout } from './components/MenuFlyout';
+export { default as Modal } from './components/Modal';
+export { default as StatusChip } from './components/StatusChip';
+export { default as Toast } from './components/Toast';
 export { default as theme } from './assets/theme';
 export { useTheme } from '@mui/material';

package/dist/index.js

@@ -75,6 +75,12 @@ Object.defineProperty(exports, "Input", {
     return _Input.default;
   }
 });
+Object.defineProperty(exports, "LinearProgress", {
+  enumerable: true,
+  get: function () {
+    return _LinearProgress.default;
+  }
+});
 Object.defineProperty(exports, "Link", {
   enumerable: true,
   get: function () {
@@ -105,6 +111,18 @@ Object.defineProperty(exports, "ListItemText", {
     return _ListItemText.default;
   }
 });
+Object.defineProperty(exports, "MenuFlyout", {
+  enumerable: true,
+  get: function () {
+    return _MenuFlyout.default;
+  }
+});
+Object.defineProperty(exports, "Modal", {
+  enumerable: true,
+  get: function () {
+    return _Modal.default;
+  }
+});
 Object.defineProperty(exports, "ModelGridView", {
   enumerable: true,
   get: function () {
@@ -141,6 +159,12 @@ Object.defineProperty(exports, "Select", {
     return _Select.default;
   }
 });
+Object.defineProperty(exports, "StatusChip", {
+  enumerable: true,
+  get: function () {
+    return _StatusChip.default;
+  }
+});
 Object.defineProperty(exports, "Step", {
   enumerable: true,
   get: function () {
@@ -171,6 +195,12 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _ThemeProvider.default;
   }
 });
+Object.defineProperty(exports, "Toast", {
+  enumerable: true,
+  get: function () {
+    return _Toast.default;
+  }
+});
 Object.defineProperty(exports, "Typography", {
   enumerable: true,
   get: function () {
@@ -218,6 +248,11 @@ var _StepLabel = _interopRequireDefault(require("./components/StepLabel"));
 var _ModelGridView = _interopRequireDefault(require("./components/ModelGridView"));
 var _Breadcrumbs = _interopRequireDefault(require("./components/Breadcrumbs"));
 var _CustomSlider = _interopRequireDefault(require("./components/CustomSlider"));
+var _LinearProgress = _interopRequireDefault(require("./components/LinearProgress"));
+var _MenuFlyout = _interopRequireDefault(require("./components/MenuFlyout"));
+var _Modal = _interopRequireDefault(require("./components/Modal"));
+var _StatusChip = _interopRequireDefault(require("./components/StatusChip"));
+var _Toast = _interopRequireDefault(require("./components/Toast"));
 var _theme = _interopRequireDefault(require("./assets/theme"));
 var _material = require("@mui/material");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/modules.d.js

@@ -0,0 +1 @@
+"use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veritone-ce/design-system",
-  "version": "1.12.20",
+  "version": "1.12.22",
   "private": false,
   "scripts": {
     "start": "yarn storybook",
@@ -35,26 +35,11 @@
     ]
   },
   "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",
     "axios": "^1.2.1",
-    "cz-conventional-changelog": "^3.3.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.3",
-    "react-scripts": "5.0.1",
-    "typescript": "^4.4.2",
-    "web-vitals": "^2.1.0"
+    "react-dropzone": "^14.2.3"
   },
   "devDependencies": {
     "@babel/cli": "^7.21.5",
@@ -79,6 +64,11 @@
     "@storybook/react": "^6.5.13",
     "@storybook/test-runner": "^0.9.1",
     "@storybook/testing-library": "^0.0.13",
+    "@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",
     "@types/react-dropzone": "^5.1.0",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
@@ -90,8 +80,11 @@
     "babel-plugin-named-exports-order": "^0.0.2",
     "chromatic": "^6.10.1",
     "cross-env": "^7.0.3",
+    "cz-conventional-changelog": "^3.3.0",
+    "eslint": "^8.45.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "8.0.2",
     "install-peers-cli": "^2.2.0",
@@ -100,10 +93,16 @@
     "plop": "^3.1.1",
     "prettier": "^2.8.0",
     "prop-types": "^15.8.1",
+    "react-scripts": "^5.0.1",
     "tsc-alias": "^1.8.2",
+    "typescript": "^4.4.2",
     "webpack": "^5.74.0"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.10.4",
+    "@emotion/styled": "^11.10.4",
+    "@mui/icons-material": "^5.10.6",
+    "@mui/material": "^5.10.8",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "react": "^18.2.0",

package/dist/react-app-env.d.js

@@ -1,2 +0,0 @@
-/// <reference types="react-scripts" />
-"use strict";

package/dist/reportWebVitals.d.ts

@@ -1,3 +0,0 @@
-import { ReportHandler } from 'web-vitals';
-declare const reportWebVitals: (onPerfEntry?: ReportHandler) => void;
-export default reportWebVitals;

package/dist/reportWebVitals.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    Promise.resolve().then(() => _interopRequireWildcard(require('web-vitals'))).then(({
-      getCLS,
-      getFID,
-      getFCP,
-      getLCP,
-      getTTFB
-    }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-var _default = reportWebVitals;
-exports.default = _default;