@veritone-ce/design-system 1.12.3 → 1.12.5

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

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 type ListItemIconProps = {
     'data-testid'?: string;
+    children?: React.ReactNode;
 };
-declare const IconListItem: ({ ...props }: ListItemIconProps) => JSX.Element;
+declare const IconListItem: ({ children, ...props }: ListItemIconProps) => JSX.Element;
 export default IconListItem;

package/dist/components/IconListItem/index.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import ListItemIcon from '@mui/material/ListItemIcon';
 const IconListItem = (_a) => {
-    var props = __rest(_a, []);
-    return _jsx(ListItemIcon, Object.assign({}, props));
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return _jsx(ListItemIcon, Object.assign({}, props, { children: children }));
 };
 export default IconListItem;

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

@@ -0,0 +1,5 @@
+import { ComponentStory, Story, ComponentMeta } from '@storybook/react';
+import ModelGridView from '.';
+declare const _default: ComponentMeta<({ rows }: import(".").ModelGridViewProps) => JSX.Element>;
+export default _default;
+export declare const Default: ComponentStory<typeof ModelGridView> | Story;

package/dist/components/ModelGridView/ModelGridView.stories.js

@@ -0,0 +1,44 @@
+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 ModelGridView from '.';
+const mockData = [
+    {
+        modelName: 'Lebron James',
+        lastModified: 'MM/DD/YYYY HH:MM',
+        consentForm: 'Complete',
+        versions: 2,
+        deployed: 2
+    },
+    {
+        modelName: 'John Madden',
+        lastModified: 'MM/DD/YYYY HH:MM',
+        consentForm: 'Complete',
+        versions: 2,
+        deployed: 0
+    },
+    {
+        modelName: 'Ryan Seacrest',
+        lastModified: 'MM/DD/YYYY HH:MM',
+        consentForm: 'Complete',
+        versions: 2,
+        deployed: 0
+    }
+];
+export default {
+    title: 'Components/ModelGridView',
+    component: ModelGridView
+};
+export const Default = (_a) => {
+    var args = __rest(_a, []);
+    return _jsx(ModelGridView, Object.assign({ rows: mockData }, args));
+};

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

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

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '../../../utils/tests/helpers';
+import { fireEvent, screen } from '@testing-library/react';
+import ModelGridView from '..';
+const mockData = [
+    {
+        modelName: 'Lebron James',
+        lastModified: 'MM/DD/YYYY HH:MM',
+        consentForm: 'Complete',
+        versions: 2,
+        deployed: 2
+    },
+    {
+        modelName: 'John Madden',
+        lastModified: 'MM/DD/YYYY HH:MM',
+        consentForm: 'Complete',
+        versions: 2,
+        deployed: 0
+    },
+    {
+        modelName: 'Ryan Seacrest',
+        lastModified: 'MM/DD/YYYY HH:MM',
+        consentForm: 'Complete',
+        versions: 2,
+        deployed: 0
+    }
+];
+describe('<ModelGridView />', () => {
+    it('should render the ModelGridView component', () => {
+        render(_jsx(ModelGridView, { rows: mockData }));
+        expect(screen.getByText('Model Name')).toBeInTheDocument();
+    });
+    it('should change order of lines', () => {
+        render(_jsx(ModelGridView, { rows: mockData }));
+        expect(fireEvent.click(screen.getAllByTestId('ArrowDownwardIcon')[0]));
+        expect(fireEvent.click(screen.getAllByTestId('ArrowDownwardIcon')[0]));
+    });
+    it('should select item', () => {
+        render(_jsx(ModelGridView, { rows: mockData }));
+        expect(fireEvent.click(screen.getAllByTestId('MoreVertIcon')[0]));
+        expect(fireEvent.click(screen.getAllByText('Edit Model')[0]));
+    });
+});

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

@@ -0,0 +1,13 @@
+interface ModelGridViewData {
+    modelName: string;
+    lastModified: string;
+    consentForm: string;
+    versions: number;
+    deployed: number;
+}
+export type ModelGridViewProps = {
+    'data-testid'?: string;
+    rows: ModelGridViewData[];
+};
+declare const ModelGridView: ({ rows }: ModelGridViewProps) => JSX.Element;
+export default ModelGridView;

package/dist/components/ModelGridView/index.js

@@ -0,0 +1,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Box, IconButton, Link, Menu, MenuItem, Paper, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TableSortLabel } from '@mui/material';
+import { visuallyHidden } from '@mui/utils';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import ArticleRoundedIcon from '@mui/icons-material/ArticleRounded';
+function descendingComparator(a, b, orderBy) {
+    if (b[orderBy] < a[orderBy]) {
+        return -1;
+    }
+    if (b[orderBy] > a[orderBy]) {
+        return 1;
+    }
+    return 0;
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function getComparator(order, orderBy) {
+    return order === 'desc'
+        ? (a, b) => descendingComparator(a, b, orderBy)
+        : (a, b) => -descendingComparator(a, b, orderBy);
+}
+const headCells = [
+    {
+        id: 'modelName',
+        numeric: false,
+        disablePadding: false,
+        label: 'Model Name',
+        sortable: true
+    },
+    {
+        id: 'lastModified',
+        numeric: false,
+        disablePadding: false,
+        label: 'Last Modified',
+        sortable: true
+    },
+    {
+        id: 'consentForm',
+        numeric: false,
+        disablePadding: true,
+        label: 'Consent Form'
+    },
+    {
+        id: 'versions',
+        numeric: false,
+        disablePadding: true,
+        label: 'Versions'
+    },
+    {
+        id: 'deployed',
+        numeric: false,
+        disablePadding: true,
+        label: 'Deployed'
+    }
+];
+function EnhancedTableHead(props) {
+    const { order, orderBy, onRequestSort } = props;
+    const createSortHandler = (property) => (event) => {
+        onRequestSort(event, property);
+    };
+    return (_jsx(TableHead, { children: _jsxs(TableRow, Object.assign({ sx: {
+                '& .MuiTableCell-root': {
+                    borderBottomColor: (theme) => theme.palette.text.disabled,
+                    padding: '14.25px 16px',
+                    '&.MuiTableCell-paddingNone': {
+                        padding: 0
+                    }
+                }
+            } }, { children: [headCells.map((headCell) => (_jsxs(TableCell, Object.assign({ padding: headCell.disablePadding ? 'none' : 'normal', sortDirection: orderBy === headCell.id ? order : false }, { children: [headCell.label, headCell.sortable && (_jsx(TableSortLabel, Object.assign({ active: orderBy === headCell.id, direction: orderBy === headCell.id ? order : 'desc', onClick: createSortHandler(headCell.id), sx: {
+                                '& .MuiSvgIcon-root': {
+                                    opacity: 1,
+                                    fill: '#1B1D1F',
+                                    ':hover': {
+                                        opacity: 1,
+                                        fill: '#1B1D1F'
+                                    }
+                                }
+                            } }, { children: orderBy === headCell.id ? (_jsx(Box, Object.assign({ component: "span", sx: visuallyHidden }, { children: order === 'desc'
+                                    ? 'sorted descending'
+                                    : 'sorted ascending' }))) : null })))] }), headCell.id))), _jsx(TableCell, {})] })) }));
+}
+const ModelGridView = ({ rows }) => {
+    const [order, setOrder] = React.useState('desc');
+    const [orderBy, setOrderBy] = React.useState('lastModified');
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const menuOptions = [
+        { icon: _jsx(EditOutlinedIcon, {}), label: 'Edit Model' },
+        { icon: _jsx(ArticleRoundedIcon, {}), label: 'View Conset Form' }
+    ];
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = () => {
+        setAnchorEl(null);
+    };
+    const handleRequestSort = (event, property) => {
+        const isAsc = orderBy === property && order === 'asc';
+        setOrder(isAsc ? 'desc' : 'asc');
+        setOrderBy(property);
+    };
+    return (_jsx(Box, Object.assign({ sx: { width: '100%' } }, { children: _jsx(Paper, Object.assign({ sx: { width: '100%', mb: 2, boxShadow: 'none' } }, { children: _jsx(TableContainer, Object.assign({ sx: {
+                    '& .MuiTableCell-root': {
+                        lineHeight: '21px',
+                        fontWeight: 400
+                    }
+                } }, { children: _jsxs(Table, Object.assign({ sx: { minWidth: 750 }, "aria-labelledby": "tableTitle", size: 'medium' }, { children: [_jsx(EnhancedTableHead, { order: order, orderBy: orderBy, onRequestSort: handleRequestSort }), _jsx(TableBody, { children: rows
+                                .slice()
+                                .sort(getComparator(order, orderBy))
+                                .map((row, index) => {
+                                const labelId = `enhanced-table-checkbox-${index}`;
+                                return (_jsxs(TableRow, Object.assign({ tabIndex: -1, sx: {
+                                        '& .MuiTableCell-root': {
+                                            borderBottomColor: (theme) => theme.palette.misc.altBackground,
+                                            padding: '17px 16px',
+                                            '&.MuiTableCell-paddingNone': {
+                                                padding: 0
+                                            }
+                                        }
+                                    } }, { children: [_jsx(TableCell, Object.assign({ component: "th", id: labelId, scope: "row", padding: "none" }, { children: _jsx(Link, Object.assign({ href: "#", underline: "always", sx: {
+                                                    '&.MuiLink-underlineAlways': {
+                                                        color: (theme) => theme.palette.button.main,
+                                                        textDecorationColor: (theme) => theme.palette.button.main
+                                                    }
+                                                } }, { children: row.modelName })) })), _jsx(TableCell, Object.assign({ align: "left" }, { children: row.lastModified })), _jsx(TableCell, Object.assign({ align: "left" }, { children: _jsx(Box, Object.assign({ sx: {
+                                                    display: 'flex',
+                                                    flexDirection: 'row',
+                                                    justifyContent: 'center',
+                                                    alignItems: 'center',
+                                                    backgroundColor: (theme) => theme.palette.success.main,
+                                                    color: (theme) => theme.palette.common.white,
+                                                    width: '82px',
+                                                    height: '18px',
+                                                    borderRadius: '2px',
+                                                    fontStyle: 'normal',
+                                                    fontWeight: 800,
+                                                    fontSize: '9px',
+                                                    lineHeight: '12px',
+                                                    textTransform: 'uppercase'
+                                                } }, { children: row.consentForm })) })), _jsx(TableCell, Object.assign({ align: "left" }, { children: row.versions })), _jsx(TableCell, Object.assign({ align: "left" }, { children: row.deployed === 0 ? '--' : row.deployed })), _jsxs(TableCell, Object.assign({ align: "right", padding: "none" }, { children: [_jsx(IconButton, Object.assign({ "aria-label": "more", id: "long-button", "aria-controls": open ? 'long-menu' : undefined, "aria-expanded": open ? 'true' : undefined, "aria-haspopup": "true", onClick: handleClick }, { children: _jsx(MoreVertIcon, {}) })), _jsx(Menu, Object.assign({ id: "long-menu", MenuListProps: {
+                                                        'aria-labelledby': 'long-button'
+                                                    }, anchorEl: anchorEl, open: open, onClose: handleClose, PaperProps: {
+                                                        style: {
+                                                            boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.25)',
+                                                            borderRadius: 0
+                                                        }
+                                                    } }, { children: menuOptions.map((option) => (_jsxs(MenuItem, Object.assign({ onClick: handleClose, sx: {
+                                                            fontSize: '14px',
+                                                            lineHeight: '20px',
+                                                            height: '46px',
+                                                            gap: '13px',
+                                                            '& .MuiSvgIcon-root': {
+                                                                color: (theme) => theme.palette.text.tertiary
+                                                            }
+                                                        } }, { children: [option.icon, option.label] }), option.label))) }))] }))] }), row.modelName));
+                            }) })] })) })) })) })));
+};
+export default ModelGridView;

package/dist/index.d.ts

@@ -24,5 +24,6 @@ export { default as ListItemText } from './components/ListItemText';
 export { default as RadioGroup } from './components/RadioGroup';
 export { default as Step } from './components/Step';
 export { default as StepLabel } from './components/StepLabel';
+export { default as ModelGridView } from './components/ModelGridView';
 export { default as theme } from './assets/theme';
 export { useTheme } from '@mui/material';

package/dist/index.js

@@ -24,5 +24,6 @@ export { default as ListItemText } from './components/ListItemText';
 export { default as RadioGroup } from './components/RadioGroup';
 export { default as Step } from './components/Step';
 export { default as StepLabel } from './components/StepLabel';
+export { default as ModelGridView } from './components/ModelGridView';
 export { default as theme } from './assets/theme';
 export { useTheme } from '@mui/material';

package/package.json

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