@veritone-ce/design-system 1.12.14 → 1.12.16

package/dist/components/ModelGridView/index.js

@@ -1,159 +1,267 @@
-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';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _material = require("@mui/material");
+var _utils = require("@mui/utils");
+var _MoreVert = _interopRequireDefault(require("@mui/icons-material/MoreVert"));
+var _EditOutlined = _interopRequireDefault(require("@mui/icons-material/EditOutlined"));
+var _ArticleRounded = _interopRequireDefault(require("@mui/icons-material/ArticleRounded"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
 function descendingComparator(a, b, orderBy) {
-    if (b[orderBy] < a[orderBy]) {
-        return -1;
-    }
-    if (b[orderBy] > a[orderBy]) {
-        return 1;
-    }
-    return 0;
+  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);
+  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'
-    }
-];
+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 {
+    order,
+    orderBy,
+    onRequestSort
+  } = props;
+  const createSortHandler = property => event => {
+    onRequestSort(event, property);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableHead, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+      sx: {
+        '& .MuiTableCell-root': {
+          borderBottomColor: theme => theme.palette.text.disabled,
+          padding: '14.25px 16px',
+          '&.MuiTableCell-paddingNone': {
+            padding: 0
+          }
+        }
+      },
+      children: [headCells.map(headCell => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableCell, {
+        padding: headCell.disablePadding ? 'none' : 'normal',
+        sortDirection: orderBy === headCell.id ? order : false,
+        children: [headCell.label, headCell.sortable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableSortLabel, {
+          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 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+            component: "span",
+            sx: _utils.visuallyHidden,
+            children: order === 'desc' ? 'sorted descending' : 'sorted ascending'
+          }) : null
+        })]
+      }, headCell.id)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.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
+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: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditOutlined.default, {}),
+    label: 'Edit Model'
+  }, {
+    icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ArticleRounded.default, {}),
+    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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+    sx: {
+      width: '100%'
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Paper, {
+      sx: {
+        width: '100%',
+        mb: 2,
+        boxShadow: 'none'
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableContainer, {
+        sx: {
+          '& .MuiTableCell-root': {
+            lineHeight: '21px',
+            fontWeight: 400
+          }
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Table, {
+          sx: {
+            minWidth: 750
+          },
+          "aria-labelledby": "tableTitle",
+          size: 'medium',
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(EnhancedTableHead, {
+            order: order,
+            orderBy: orderBy,
+            onRequestSort: handleRequestSort
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableBody, {
+            children: rows.slice().sort(getComparator(order, orderBy)).map((row, index) => {
+              const labelId = `enhanced-table-checkbox-${index}`;
+              return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableRow, {
+                tabIndex: -1,
+                sx: {
+                  '& .MuiTableCell-root': {
+                    borderBottomColor: theme => theme.palette.misc.altBackground,
+                    padding: '17px 16px',
+                    '&.MuiTableCell-paddingNone': {
+                      padding: 0
                     }
-                } }, { 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));
-                            }) })] })) })) })) })));
+                  }
+                },
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+                  component: "th",
+                  id: labelId,
+                  scope: "row",
+                  padding: "none",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Link, {
+                    href: "#",
+                    underline: "always",
+                    sx: {
+                      '&.MuiLink-underlineAlways': {
+                        color: theme => theme.palette.button.main,
+                        textDecorationColor: theme => theme.palette.button.main
+                      }
+                    },
+                    children: row.modelName
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+                  align: "left",
+                  children: row.lastModified
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+                  align: "left",
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+                    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
+                  })
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+                  align: "left",
+                  children: row.versions
+                }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.TableCell, {
+                  align: "left",
+                  children: row.deployed === 0 ? '--' : row.deployed
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.TableCell, {
+                  align: "right",
+                  padding: "none",
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.IconButton, {
+                    "aria-label": "more",
+                    id: "long-button",
+                    "aria-controls": open ? 'long-menu' : undefined,
+                    "aria-expanded": open ? 'true' : undefined,
+                    "aria-haspopup": "true",
+                    onClick: handleClick,
+                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MoreVert.default, {})
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Menu, {
+                    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 => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.MenuItem, {
+                      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;
+var _default = ModelGridView;
+exports.default = _default;

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

@@ -1,46 +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 } 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 }
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Small = exports.Medium = exports.Big = void 0;
+var _ = _interopRequireDefault(require("."));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = {
+  title: 'Components/Panel',
+  component: _.default,
+  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)));
-};
+exports.default = _default;
+const Big = ({
+  ...args
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+  title: "Big Panel",
+  isOpen: true,
+  ...args
+});
+exports.Big = Big;
+const Medium = ({
+  ...args
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+  title: "Medium Panel",
+  isOpen: true,
+  size: "medium",
+  ...args
+});
+exports.Medium = Medium;
+const Small = ({
+  ...args
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_.default, {
+  title: "Small Panel",
+  size: "small",
+  isOpen: true,
+  ...args
+});
+exports.Small = Small;