@dartech/arsenal-ui 1.2.4 → 1.2.6

package/src/lib/Sidebar/Sidebar.tsx

@@ -0,0 +1,27 @@
+import { ThemeProvider } from '@mui/material/styles';
+import { SidebarContextProvider } from './SidebarContext';
+import { theme as defaultTheme } from '@dartech/arsenal-ui';
+import SidebarDrawer from './SidebarDrawer';
+import type { Route } from '@dartech/arsenal-ui';
+
+type Props = {
+  routes: Route[];
+  theme?: any;
+  title?: string;
+  id?: string;
+};
+
+export const Sidebar = ({
+  routes,
+  theme = defaultTheme,
+  title = '',
+  id
+}: Props) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <SidebarContextProvider>
+        <SidebarDrawer title={title} routes={routes} id={id} />
+      </SidebarContextProvider>
+    </ThemeProvider>
+  );
+};

package/src/lib/Sidebar/SidebarContext.tsx

@@ -0,0 +1,37 @@
+import { createContext, useCallback, useContext, useState } from 'react';
+
+type SidebarContextProps = {
+  collapsed: boolean;
+  toggleCollapse: () => void;
+};
+
+export const SidebarContext = createContext<SidebarContextProps>({
+  collapsed: false,
+  toggleCollapse: () => {
+    console.log('collapse toggle');
+  },
+});
+
+export const useSidebarContext = () => useContext(SidebarContext);
+
+export const SidebarContextProvider = ({ children }) => {
+  const [collapsed, setCollapsed] = useState(
+    localStorage.getItem('sidebar_collapsed') === 'true'
+  );
+
+  const toggleCollapse = useCallback(() => {
+    setCollapsed(!collapsed);
+    localStorage.setItem('sidebar_collapsed', `${!collapsed}`);
+    window.dispatchEvent(new CustomEvent('sidebar_collapsed', {
+      detail: {
+        collapsed: !collapsed
+      }
+    }))
+  }, [collapsed]);
+
+  return (
+    <SidebarContext.Provider value={{ collapsed, toggleCollapse }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};

package/src/lib/Sidebar/SidebarDrawer.tsx

@@ -0,0 +1,50 @@
+import SidebarLink from './SidebarLink';
+import {
+  Container,
+  CollapseButton,
+  Drawer,
+  Header,
+  List,
+} from './Sidebar.styled';
+import ArrowIcon from '../../assets/chevron_left_gray.svg';
+import classnames from 'classnames';
+import type { Route } from '../../interfaces';
+import { useSidebarContext } from './SidebarContext';
+
+type Props = {
+  title?: string;
+  routes: Route[];
+  id?: string;
+};
+
+const SidebarDrawer = ({ title, routes, id }: Props) => {
+  const { collapsed, toggleCollapse } = useSidebarContext();
+
+  return (
+    <Container>
+      <CollapseButton
+        className={classnames('button-collapse', {
+          collapsed,
+        })}
+        onClick={toggleCollapse}
+      >
+        <img src={ArrowIcon} alt="collapse" />
+      </CollapseButton>
+      <Drawer
+        variant="permanent"
+        anchor="left"
+        className={classnames({ collapsed })}
+        id={id}
+      >
+        {!!title && <Header>{title}</Header>}
+        <List>
+          {routes.map((route, index) => (
+            <SidebarLink key={index} route={route} />
+          ))}
+        </List>
+      </Drawer>
+    </Container>
+  );
+};
+
+export default SidebarDrawer;

package/src/lib/Sidebar/SidebarLink/MenuIcon.tsx

@@ -0,0 +1,16 @@
+import Box from '@mui/material/Box';
+
+type Props = {
+  src: string;
+  alt?: string;
+}
+
+export const MenuIcon = ({src, alt}: Props) => {
+  return (
+    <Box sx={{ width: 20, height: 20, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <img src={src} alt={alt} />
+    </Box>
+  )
+}
+
+export default MenuIcon

package/src/lib/Sidebar/SidebarLink/SidebarLink.tsx

@@ -0,0 +1,54 @@
+import Collapse from '@mui/material/Collapse';
+import SidebarLinkItem from './SidebarLinkItem';
+import SidebarNestedItem from './SidebarNestedItem';
+import type { Route } from '../../../interfaces'; 
+import { useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { ChildrenList } from '../Sidebar.styled';
+import { useSidebarContext } from '../SidebarContext';
+
+type Props = {
+  route: Route;
+};
+
+const SidebarLink = ({ route }: Props) => {
+  const location = useLocation();
+  const { collapsed } = useSidebarContext();
+
+  const [open, setOpen] = useState(false);
+
+  const isActive = useMemo(
+    () => !!route.link && location.pathname.startsWith(route.link),
+    [location.pathname, route]
+  );
+
+  const handleClick = () => {
+    setOpen(!open);
+  };
+
+  useEffect(() => {
+    setOpen(isActive);
+  }, [isActive]);
+
+  return route.children?.length && !collapsed ? (
+    <>
+      <SidebarNestedItem
+        route={route}
+        isActive={isActive}
+        handleClick={handleClick}
+        isListOpen={open || !route.link}
+      />
+      <Collapse in={open || !route.link} timeout="auto">
+        <ChildrenList>
+          {route.children?.map((childRoute, index) => (
+            <SidebarLink key={index} route={childRoute} />
+          ))}
+        </ChildrenList>
+      </Collapse>
+    </>
+  ) : (
+    <SidebarLinkItem route={route} isActive={isActive} />
+  );
+};
+
+export default SidebarLink;

package/src/lib/Sidebar/SidebarLink/SidebarLinkItem.tsx

@@ -0,0 +1,54 @@
+import { Link as RouterLink } from 'react-router-dom';
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListSubheader,
+  ListItemText,
+} from '../Sidebar.styled';
+import classnames from 'classnames';
+import type { Route } from '../../../interfaces';
+import { useSidebarContext } from '../SidebarContext';
+
+type Props = {
+  route: Route;
+  isActive: boolean;
+};
+
+const SidebarLinkItem = ({ route, isActive }: Props) => {
+  const { collapsed } = useSidebarContext();
+
+  return route.link ? (
+    <ListItem
+      disablePadding
+      {...{
+        component: RouterLink,
+        replace: true,
+        to: { pathname: route.link, search: route.query },
+      }}
+    >
+      <ListItemButton
+        className={classnames({
+          active: isActive,
+          main: route.main,
+          collapsed,
+        })}
+      >
+        {route.icon && (
+          <ListItemIcon className={classnames({ collapsed })}>
+            {route.icon}
+          </ListItemIcon>
+        )}
+        <ListItemText
+          primary={route.name}
+          primaryTypographyProps={{ variant: 'body2' }}
+          className={classnames({ collapsed })}
+        />
+      </ListItemButton>
+    </ListItem>
+  ) : (
+    <ListSubheader>{route.name}</ListSubheader>
+  );
+};
+
+export default SidebarLinkItem;

package/src/lib/Sidebar/SidebarLink/SidebarNestedItem.tsx

@@ -0,0 +1,62 @@
+import type { Route } from '../../../interfaces';
+import {
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListSubheader,
+  ListItemText,
+} from '../Sidebar.styled';
+import Box from '@mui/material/Box';
+import ArrowIcon from '../../../assets/chevron_left.svg';
+
+import classnames from 'classnames';
+import { useSidebarContext } from '../SidebarContext';
+
+type Props = {
+  route: Route;
+  isActive: boolean;
+  isListOpen: boolean;
+  handleClick: () => void;
+};
+
+function SidebarNestedItem({
+  route,
+  isActive,
+  isListOpen,
+  handleClick,
+}: Props) {
+  const { collapsed } = useSidebarContext();
+
+  return route?.link ? (
+    <ListItem disablePadding onClick={handleClick}>
+      <ListItemButton
+        className={classnames({
+          active: isActive,
+          main: route.main,
+          collapsed,
+        })}
+      >
+        {route.icon && <ListItemIcon>{route.icon}</ListItemIcon>}
+        <ListItemText
+          primary={route.name}
+          primaryTypographyProps={{ variant: 'body2' }}
+          className={classnames({ collapsed })}
+        />
+        <Box
+          component="img"
+          src={ArrowIcon}
+          mr={3}
+          sx={{
+            transition: 'transform .3s',
+            transform: `rotate(${isListOpen ? '-90deg' : 0})`,
+            opacity: collapsed ? 0 : 1,
+          }}
+        />
+      </ListItemButton>
+    </ListItem>
+  ) : (
+    <ListSubheader>{route.name}</ListSubheader>
+  );
+}
+
+export default SidebarNestedItem;

package/src/lib/Sidebar/SidebarLink/{index.d.ts → index.ts}

@@ -1,2 +1,2 @@
-export { default } from './SidebarLink';
-export * from './MenuIcon';
+export { default } from './SidebarLink';
+export * from './MenuIcon';

package/src/lib/Sidebar/index.ts

@@ -0,0 +1,2 @@
+export * from './Sidebar';
+export * from './SidebarLink/MenuIcon';

package/src/lib/Status/Status.tsx

@@ -0,0 +1,16 @@
+import useStyles from './styles';
+import cn from 'classnames';
+import { StatusVariant } from '../../interfaces';
+
+type Props = {
+  text: string;
+  status?: StatusVariant;
+};
+
+export const Status = ({ text, status = 'default' }: Props) => {
+  const { classes } = useStyles();
+
+  return <div className={cn(classes['root'], { [status]: true })}>{text}</div>;
+};
+
+export default Status;

package/src/lib/Status/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './Status';
+export * from './Status';

package/src/lib/Status/styles.ts

@@ -0,0 +1,21 @@
+import { makeStyles } from 'tss-react/mui';
+
+export default makeStyles()((theme) => ({
+  root: {
+    backgroundColor: '#eee',
+    fontSize: '14px',
+    padding: '0 8px',
+    borderRadius: '10px',
+    width: 'fit-content',
+
+    '&.success': {
+      backgroundColor: '#a9dfa9',
+    },
+    '&.error': {
+      backgroundColor: '#ff7e7e',
+    },
+    '&.warning': {
+      backgroundColor: theme.palette.warning.main,
+    },
+  },
+}));

package/src/lib/StepperView/StepperView.tsx

@@ -0,0 +1,73 @@
+import { ReactNode } from 'react';
+import Stepper from '@mui/material/Stepper';
+import Step from '@mui/material/Step';
+import StepLabel from '@mui/material/StepLabel';
+import StepContent from '@mui/material/StepContent';
+import StepConnector from '@mui/material/StepConnector';
+import { makeStyles } from 'tss-react/mui';
+
+export type StepperDataItem = { label: string | ReactNode; content: ReactNode };
+
+export type StepperData = StepperDataItem[];
+
+type Props = {
+  data: StepperData;
+};
+
+const useStyles = makeStyles()(() => ({
+  content: {
+    marginLeft: '4px',
+  },
+  connector: {
+    marginLeft: '4px',
+  },
+  stepper: {
+    padding: '12px',
+  },
+  label: {
+    display: 'flex',
+    alignItems: 'flex-start',
+  },
+}));
+
+const StepIcon = () => (
+  <div
+    style={{
+      display: 'inline-block',
+      width: '10px',
+      height: '10px',
+      borderRadius: '50%',
+      backgroundColor: '#536DFE',
+      marginTop: '5px',
+    }}
+  />
+);
+
+export const StepperView = ({ data }: Props) => {
+  const { classes } = useStyles();
+
+  return (
+    <Stepper
+      nonLinear
+      orientation="vertical"
+      className={classes.stepper}
+      connector={<StepConnector className={classes.connector} />}
+    >
+      {data.filter(Boolean).map((item, index) => (
+        <Step expanded key={index}>
+          <StepLabel
+            className={classes.label}
+            StepIconComponent={StepIcon}
+            StepIconProps={{ icon: '', completed: false, active: true }}
+          >
+            {item.label}
+          </StepLabel>
+          <StepContent className={classes.content}>{item.content}</StepContent>
+        </Step>
+      ))}
+      <Step />
+    </Stepper>
+  );
+};
+
+export default StepperView;

package/src/lib/StepperView/{index.d.ts → index.ts}

@@ -1 +1 @@
-export * from './StepperView';
+export * from './StepperView';

package/src/lib/Table/DataGrid/JsonTypeCell.tsx

@@ -0,0 +1,51 @@
+import { useCallback, MouseEvent } from 'react';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
+import SvgIcon from '@mui/material/SvgIcon';
+import IconButton from '@mui/material/IconButton';
+import { getJsonStringValue, useToggle } from '../../../utils';
+import { CopyButton } from '../../Forms';
+import { JsonView } from '../../JsonView';
+import { JsonModalView } from '../../Modals';
+
+const JsonTypeCell = ({
+  value,
+  copyButton = false,
+  textField = false,
+}: {
+  value: any;
+  copyButton?: boolean;
+  textField?: boolean;
+}) => {
+  const { open: jsonModalOpen, onOpen: onJsonModalOpen, onClose: onJsonModalClose } = useToggle();
+
+  const handleClickOpen = useCallback((e: MouseEvent) => {
+    e.stopPropagation();
+    onJsonModalOpen();
+  }, [onJsonModalOpen])
+
+  return (
+    <Box width="100%">
+      <Box display="flex" alignItems="center" justifyContent="flex-end" pt={1} mb={2}>
+        {copyButton && <CopyButton copyText={getJsonStringValue(value)} />}
+        <Tooltip title="Open" placement="top">
+          <IconButton size="small" onClick={handleClickOpen}>
+            <SvgIcon>
+              <path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" />
+            </SvgIcon>            
+          </IconButton>
+        </Tooltip>
+      </Box>
+      {textField ? (
+        <Box overflow="hidden" whiteSpace="nowrap">
+          {typeof value === 'object' ? JSON.stringify(value) : value}
+        </Box>
+      ) : (
+        <JsonView value={value} />
+      )}
+      <JsonModalView open={jsonModalOpen} value={getJsonStringValue(value)} onClose={onJsonModalClose} />
+    </Box>
+  );
+};
+
+export default JsonTypeCell;

package/src/lib/Table/DataGrid/Table.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import TablePagination from './TablePagination';
+import TableColumnMenu from './TableColumnMenu';
+import useTableQueryPagination from './useTableQueryPagination';
+import useTableQuerySorting from './useTableQuerySorting';
+import usePagination from './usePagination';
+import { DataGrid, GridCellParams, GridColumns, GridFeatureMode, GridRowsProp } from '@mui/x-data-grid';
+import useStyles from './styles';
+import Box from '@mui/material/Box';
+
+/**
+ * This interface is referencing the [[Table]] component props.
+ * @category Common UI components
+ */
+export interface TableProps {
+  /**
+   * Data loading state
+   */
+  loading?: boolean;
+  /**
+   * Table columns
+   */
+  columns: GridColumns;
+  /**
+   * Table rows
+   */
+  rows: GridRowsProp;
+  /**
+   * Rows count to display
+   */
+  rowCount: number;
+  disableMargin?: boolean;
+  /**
+   * Data display mode.
+   * Values: `client` | `server`;
+   * Default: `server`
+   */
+  mode?: GridFeatureMode;
+  /**
+   * Page size. Default `10`
+   */
+  initialPageSize?: number;
+  /**
+   * On cell click handler function
+   * ```typescript
+   * (params: GridCellParams, event: React.MouseEvent) => void;
+   * ```
+   */
+  onCellClick?: (params: GridCellParams, event: React.MouseEvent) => void;
+  pagination?: boolean;
+}
+
+/**
+ * Main data display component. MUI DataGrid used
+ * @category Common UI components
+ */
+export const Table = ({
+  columns,
+  rows,
+  rowCount,
+  loading,
+  disableMargin,
+  mode = 'server',
+  initialPageSize = 10,
+  pagination = true,
+  onCellClick,
+}: TableProps) => {
+  const { classes } = useStyles();
+
+  const { page, size, onPageChange, onSizeChange } = useTableQueryPagination({ mode });
+  const { onColumnHeaderClick, getSortedColumns } = useTableQuerySorting();
+
+  const { pageSize, handlePageSizeChange } = usePagination(initialPageSize);
+
+  const tableProps = {
+    sortingMode: mode,
+    paginationMode: mode,
+    pageSize: mode === 'server' ? size : pagination ? pageSize : rowCount,
+    onPageSizeChange: mode === 'server' ? onSizeChange : handlePageSizeChange,
+    components: {
+      Pagination: TablePagination,
+    },
+  };
+
+  if (mode === 'server') {
+    tableProps['sortModel'] = [];
+    tableProps['onColumnHeaderClick'] = onColumnHeaderClick;
+    tableProps['page'] = page;
+    tableProps['onPageChange'] = onPageChange;
+    tableProps.components['ColumnMenu'] = TableColumnMenu;
+  }
+
+
+  return (
+    <Box mt={disableMargin ? 0 : 2}>
+      <DataGrid
+        autoHeight
+        hideFooterPagination={!pagination}
+        hideFooter={!pagination}
+        disableSelectionOnClick
+        showColumnRightBorder
+        showCellRightBorder
+        className={classes.root}
+        loading={loading}
+        rows={rows}
+        columns={getSortedColumns(columns)}
+        rowCount={rowCount}
+        rowsPerPageOptions={[10, 20, 50, 100]}
+        onCellClick={onCellClick}
+        {...tableProps}
+      />
+      
+    </Box>
+  );
+};
+
+export default Table;

package/src/lib/Table/DataGrid/TableAction.tsx

@@ -0,0 +1,43 @@
+import Tooltip from '@mui/material/Tooltip';
+import { GridActionsCellItem } from '@mui/x-data-grid';
+import IconButton from '@mui/material/IconButton';
+import { Link } from 'react-router-dom';
+import React, { ReactElement } from 'react';
+
+type Props = {
+  icon: ReactElement;
+  onClick?: () => void;
+  label: string;
+  showInMenu?: boolean;
+  location?: {
+    pathname: string;
+    state?: Record<string, unknown>;
+  }
+};
+
+export const TableAction = ({ icon, label, showInMenu, onClick, location }: Props) => {
+  if (location) {
+    return (
+      <IconButton component={Link} to={location} size="small">
+        <Tooltip title={label} arrow>
+          {React.cloneElement(icon, { fontSize: 'small' })}         
+        </Tooltip>        
+      </IconButton>
+    )
+  }
+  return (    
+    <GridActionsCellItem
+      nonce=""
+      onResize={undefined}
+      onResizeCapture={undefined}
+      icon={
+        <Tooltip title={label} arrow>
+          {icon}
+        </Tooltip>
+      }
+      onClick={onClick}
+      label={label}
+      showInMenu={showInMenu}
+    />
+  );
+};

package/src/lib/Table/DataGrid/TableColumnMenu.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { GridColumnMenuContainer, GridFilterMenuItem } from '@mui/x-data-grid';
+
+const TableColumnMenu = ({ hideMenu, currentColumn, onUnsort, ...rest }: any) => {
+  return (
+    <GridColumnMenuContainer hideMenu={hideMenu} currentColumn={currentColumn} {...rest}>
+      <GridFilterMenuItem onClick={hideMenu} column={currentColumn} />
+    </GridColumnMenuContainer>
+  );
+};
+
+export default TableColumnMenu;