@dartech/arsenal-ui 1.3.0 → 1.3.2

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

@@ -1,54 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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/index.ts

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

package/src/lib/Status/Status.tsx

@@ -1,16 +0,0 @@
-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/styles.ts

@@ -1,21 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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/Table/DataGrid/JsonTypeCell.tsx

@@ -1,51 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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;

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

@@ -1,42 +0,0 @@
-import React from 'react';
-import Box from '@mui/material/Box';
-import Pagination from '@mui/material/Pagination';
-import MuiTablePagination from '@mui/material/TablePagination';
-import {
-  gridPageCountSelector,
-  gridPageSelector,
-  gridRowCountSelector,
-  gridPageSizeSelector,
-  useGridApiContext,
-  useGridSelector,
-} from '@mui/x-data-grid';
-
-const TablePagination = () => {
-  const apiRef = useGridApiContext();
-  const page = useGridSelector(apiRef, gridPageSelector);
-  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
-  const rowCount = useGridSelector(apiRef, gridRowCountSelector);
-  const pageSize = useGridSelector(apiRef, gridPageSizeSelector);
-
-  const onPageChange = (value) => apiRef.current.setPage(value);
-  const onRowsPerPageChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-    apiRef.current.setPageSize(parseInt(event.target.value, 10));
-
-  return (
-    <Box px={2} display="flex" alignItems="center">
-      <MuiTablePagination
-        component="div"
-        page={page}
-        count={rowCount}
-        rowsPerPage={pageSize}
-        rowsPerPageOptions={[10, 20, 50, 100]}
-        onPageChange={(event, value) => onPageChange(value)}
-        onRowsPerPageChange={onRowsPerPageChange}
-        ActionsComponent={undefined}
-      />
-      <Pagination count={pageCount} page={page + 1} onChange={(event, value) => onPageChange(value - 1)} />
-    </Box>
-  );
-};
-
-export default TablePagination;

package/src/lib/Table/DataGrid/index.ts

@@ -1,2 +0,0 @@
-export * from './Table';
-export * from './TableAction';

package/src/lib/Table/DataGrid/styles.ts

@@ -1,59 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export default makeStyles()({
-  root: {
-    width: '100%',
-
-    '& .MuiDataGrid-virtualScrollerContent': {
-      height: 'auto !important',
-      minHeight: '56px !important',
-    },
-
-    '& .MuiDataGrid-virtualScrollerRenderZone': {
-      position: 'static',
-    },
-
-    '& .MuiDataGrid-renderingZone': {
-      maxHeight: 'none !important',
-    },
-
-    '& .MuiDataGrid-cell': {
-      maxHeight: 'none !important',
-      lineHeight: 'unset !important',
-      // whiteSpace: 'normal !important',
-      textOverflow: 'ellipsis',
-      wordBreak: 'break-all',
-
-      '& .MuiDataGrid-actionsCell': {
-        width: '100%',
-        gridGap: '4px',
-        flexWrap: 'wrap',
-
-        '& > button[aria-label="more"]': {
-          marginLeft: 'auto',
-        },
-      },
-    },
-
-    '& .MuiDataGrid-row': {
-      maxHeight: 'none !important',
-    },
-
-    '& .Sorted': {
-      '& .MuiDataGrid-iconButtonContainer': {
-        visibility: 'visible',
-        width: 'auto',
-
-        '& svg': {
-          opacity: '1 !important',
-        },
-      },
-
-      '&.--desc': {
-        '& svg': {
-          transform: 'rotate(180deg)',
-        },
-      },
-    },
-  },
-});

package/src/lib/Table/DataGrid/usePagination.ts

@@ -1,15 +0,0 @@
-import { useEffect, useState } from 'react';
-
-const usePagination = (initialPageSize?: number) => {
-  const [pageSize, setPageSize] = useState(10);
-
-  useEffect(() => {
-    setPageSize(initialPageSize);
-  }, [initialPageSize]);
-
-  const handlePageSizeChange = (size) => setPageSize(size);
-
-  return { pageSize, handlePageSizeChange };
-};
-
-export default usePagination;

package/src/lib/Table/DataGrid/useTableQueryPagination.ts

@@ -1,47 +0,0 @@
-import { useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
-import { GridFeatureMode } from '@mui/x-data-grid';
-
-interface Props {
-  mode: GridFeatureMode;
-}
-
-export const useTableQueryPagination = ({ mode }: Props) => {
-  const [queryParams, setQueryParams] = useSearchParams();
-
-  const page = +queryParams.get('page') || 0;
-  const size = +queryParams.get('size') || 10;
-
-  const onPageChange = (newPage: number) => {
-    queryParams.set('page', `${newPage}`);
-    setQueryParams(queryParams, { replace: true });
-  };
-
-  const onSizeChange = (count: number) => {
-    queryParams.set('size', `${count}`);
-    setQueryParams(queryParams, { replace: true });
-  };
-
-  useEffect(() => {
-    if (mode === 'server') {
-      if (!queryParams.has('page')) {
-        queryParams.set('page', '0');
-      }
-
-      if (!queryParams.has('size')) {
-        queryParams.set('size', `10`);
-      }
-
-      setQueryParams(queryParams, { replace: true });
-    }
-  }, [mode, queryParams, setQueryParams]);
-
-  return {
-    page,
-    size,
-    onPageChange,
-    onSizeChange,
-  };
-};
-
-export default useTableQueryPagination;

package/src/lib/Table/DataGrid/useTableQuerySorting.ts

@@ -1,47 +0,0 @@
-import { useSearchParams } from 'react-router-dom';
-import { GridColumnHeaderParams, GridColumns } from '@mui/x-data-grid';
-
-export const useTableQuerySorting = () => {
-  const [queryParams, setQueryParams] = useSearchParams();
-  const sortParams = queryParams.getAll('sort').map((param) => param.split(','));
-
-  const onColumnHeaderClick = ({ field }: GridColumnHeaderParams) => {
-    let keyFound = false;
-
-    const sortValues = queryParams.getAll('sort');
-    queryParams.delete('sort');
-
-    sortValues.forEach((sortValue) => {
-      const [key, sort] = sortValue.split(',');
-      if (key === field) {
-        keyFound = true;
-        if (sort === 'asc') {
-          queryParams.append('sort', `${key},desc`);
-        }
-      } else {
-        queryParams.append('sort', `${key},${sort}`);
-      }
-    });
-
-    if (!keyFound) {
-      queryParams.append('sort', `${field},asc`);
-    }
-    setQueryParams(queryParams, { replace: true });
-  };
-
-  const getSortedColumns = (columns: GridColumns): GridColumns => {
-    return columns.map((column) => {
-      const columnSort = sortParams.find((param) => param[0] === column.field);
-      if (columnSort) {
-        column.headerClassName = `Sorted --${columnSort[1]} `;
-      } else {
-        column.headerClassName = '';
-      }
-      return column;
-    });
-  };
-
-  return { onColumnHeaderClick, getSortedColumns };
-};
-
-export default useTableQuerySorting;