@dartech/arsenal-ui 1.3.0 → 1.3.2

package/src/lib/Table/SimpleTable/SimpleTable.tsx

@@ -1,138 +0,0 @@
-import { ReactNode, forwardRef, ForwardedRef } from 'react';
-import MuiTable from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import TableCell from '@mui/material/TableCell';
-import TableContainer from '@mui/material/TableContainer';
-import TableHead from '@mui/material/TableHead';
-import TablePagination from '@mui/material/TablePagination';
-import TableRow from '@mui/material/TableRow';
-import TableSortLabel from '@mui/material/TableSortLabel';
-import TableFooter from '@mui/material/TableFooter';
-
-import { Column, Row } from '../../../interfaces';
-import { Loader } from '../../Loader';
-import Backdrop from '@mui/material/Backdrop';
-import useTablePagination from './useTablePagination';
-import useTableSorting from './useTableSorting';
-
-type SortDirection = "asc" | "desc";
-
-interface Props<T> {
-  columns: Column<T>[];
-  rows: Row<T>[];
-  totalCount: number;
-  loading?: boolean;
-  pagination?: boolean;
-  onRowClick?: (row: Row<T>) => void;
-  children?: ReactNode;
-  verticalAlign?: 'top' | 'middle' | 'bottom' | 'sub' | 'baseline';
-}
-
-function TableInner<T>({
-  columns = [],
-  rows = [],
-  totalCount,
-  children,
-  pagination = true,
-  loading = false,
-  onRowClick,
-  verticalAlign = 'middle'
-}: Props<T>, ref: ForwardedRef<HTMLTableElement>) {
-  const { page, size, onPageChange, onSizeChange } = useTablePagination();
-  const { onSortChanged, getColumnSorting } = useTableSorting();
-
-  return (
-    <TableContainer sx={{ position: 'relative', overflow: 'visible' }}>
-      <Backdrop open={loading} sx={{ position: 'absolute', top: 0, left: 0 }}>
-        <Loader />
-      </Backdrop>
-      <MuiTable ref={ref}>
-        <TableHead>
-          <TableRow>
-            {columns.map((column, index) => {
-              const sortDirection = column.sortKey
-                ? getColumnSorting(column.sortKey)
-                : false;
-              return (
-                <TableCell
-                  key={index}
-                  align={column.align ? column.align : 'left'}
-                  sortDirection={sortDirection as SortDirection}
-                  sx={{ width: column.width ? `${column.width}%` : 'unset' }}
-                >
-                  <TableSortLabel
-                    active={!!sortDirection}
-                    hideSortIcon={!column.sortKey}
-                    direction={(sortDirection as SortDirection) || 'asc'}
-                    onClick={() =>
-                      column.sortKey ? onSortChanged(column.sortKey) : {}
-                    }
-                  >
-                    {column.label}
-                  </TableSortLabel>
-                </TableCell>
-              );
-            })}
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {rows.map((row, index) => (
-            <TableRow
-              hover
-              onClick={onRowClick ? () => onRowClick(row) : row.onClick}
-              key={index}
-              sx={{ verticalAlign }}
-            >
-              {columns.map((column, idx) => (
-                <TableCell
-                  key={idx}
-                  align={column.align ? column.align : 'left'}
-                  sx={{ width: column.width ? `${column.width}%` : 'unset' }}
-                >
-                  {column.renderCell
-                    ? column.renderCell(row, index)
-                    : ((row as any)[column.id] as string)}
-                </TableCell>
-              ))}
-            </TableRow>
-          ))}
-        </TableBody>
-        {(pagination || children) ? (
-          <TableFooter>
-            <TableRow>
-              {
-                children && (
-                  <TableCell
-                    colSpan={columns.length}
-                    sx={{ background: '#F0F0F7', px: 4, py: 3 }}
-                  >
-                    {children}
-                  </TableCell>
-                )
-              }
-              {
-                pagination && rows.length && (
-                  <TablePagination
-                    rowsPerPageOptions={[5, 10, 25]}
-                    count={totalCount}
-                    rowsPerPage={+size}
-                    page={+page}
-                    sx={{ borderBottom: 'none' }}
-                    onPageChange={(_, page) => onPageChange(page)}
-                    onRowsPerPageChange={(event) =>
-                      onSizeChange(+event.target.value)
-                    }
-                  />
-                )
-              }              
-            </TableRow>
-          </TableFooter>
-        ) : null}
-      </MuiTable>
-    </TableContainer>
-  );
-}
-export const SimpleTable = forwardRef(TableInner) as <T>(
-  props: Props<T> & { ref?: ForwardedRef<HTMLTableElement> }
-) => ReturnType<typeof TableInner>;
-export default SimpleTable;

package/src/lib/Table/SimpleTable/TableActionCell.tsx

@@ -1,67 +0,0 @@
-import { useState, MouseEvent } from 'react';
-import IconButton from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-
-type ActionItem = {
-  title: string;
-  onClick: (e?: MouseEvent<HTMLElement>) => void;
-}
-
-type Props = {
-  actionsList: ActionItem[]
-}
-
-export const TableActionCell = ({ actionsList }: Props) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (e: MouseEvent<HTMLElement>) => {
-    e.stopPropagation();
-    setAnchorEl(e.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  return (
-    <div>
-      <IconButton
-        aria-label="more"
-        id="more-button"
-        aria-controls={open ? 'more-menu' : undefined}
-        aria-expanded={open ? 'true' : undefined}
-        aria-haspopup="true"
-        onClick={handleClick}
-      >
-        <MoreHorizIcon />
-      </IconButton>
-      <Menu
-        id="more-menu"
-        MenuListProps={{
-          'aria-labelledby': 'more-button',
-        }}
-        anchorEl={anchorEl}
-        open={open}
-        onClose={(e: MouseEvent<HTMLElement>) => {
-          e.stopPropagation();
-          handleClose();
-        }}
-        PaperProps={{
-          style: {
-            minWidth: '127px'
-          }
-        }}
-      >
-        {actionsList.map((option) => (
-          <MenuItem key={option.title} onClick={(e: MouseEvent<HTMLElement>) => {
-            e.stopPropagation();
-            if (option.onClick) option.onClick();
-            handleClose();
-          }}>
-            {option.title}
-          </MenuItem>
-        ))}
-      </Menu>
-    </div>
-  )
-}

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

@@ -1,2 +0,0 @@
-export * from './SimpleTable';
-export * from './TableActionCell';

package/src/lib/Table/SimpleTable/useTablePagination.ts

@@ -1,54 +0,0 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
-
-const useTablePagination = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const page = useMemo(
-    () => searchParams.get('page') ?? 0,
-    [searchParams]
-  );
-  const size = useMemo(
-    () => searchParams.get('size') ?? 10,
-    [searchParams]
-  );
-
-  const onPageChange = useCallback(
-    (newPage: number) => {
-      setSearchParams((params) => {
-        params.set('page', `${newPage}`);
-        return params;
-      });
-    },
-    [setSearchParams]
-  );
-
-  const onSizeChange = useCallback(
-    (newSize: number) => {
-      setSearchParams((params) => {
-        params.set('size', `${newSize}`);
-        return params;
-      });
-    },
-    [setSearchParams]
-  );
-
-  useEffect(() => {
-    if (!searchParams.has('page')) {      
-      setSearchParams((params) => {
-        params.set('page', '0');
-        return params;
-      });
-    }
-    if (!searchParams.has('size')) {
-      setSearchParams((params) => {
-        params.set('size', '10');
-        return params;
-      });
-    }
-  }, [searchParams, setSearchParams]);
-
-  return { page, size, onPageChange, onSizeChange };
-};
-
-export default useTablePagination;

package/src/lib/Table/SimpleTable/useTableSorting.ts

@@ -1,50 +0,0 @@
-import { useCallback, useMemo } from 'react';
-import { useSearchParams } from 'react-router-dom';
-
-const useTableSorting = () => {
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const sortParams = useMemo(
-    () => searchParams.getAll('sort').map((param) => param.split(',')),
-    [searchParams]
-  );
-
-  const onSortChanged = useCallback(
-    (sortKey: string) => {
-      setSearchParams((params) => {
-        console.log(sortKey, params.get('page'));
-        params.delete('sort');
-
-        let keyFound = false;
-        sortParams.forEach(([key, value]) => {
-          if (key === sortKey) {
-            keyFound = true;
-            if (value === 'asc') {
-              params.append('sort', `${key},desc`);
-            }
-          } else {
-            params.append('sort', `${key},${value}`);
-          }
-        });
-
-        if (!keyFound) {
-          params.append('sort', `${sortKey},asc`);
-        }
-
-        return params;
-      });
-    },
-    [sortParams, setSearchParams]
-  );
-
-  const getColumnSorting = useCallback(
-    (sortKey: string) => {
-      const sort = sortParams.find(([key, _]) => key === sortKey);
-      return sort ? sort[1] : false;
-    },
-    [sortParams]
-  );
-
-  return { sortParams, onSortChanged, getColumnSorting };
-};
-export default useTableSorting;

package/src/lib/Table/index.ts

@@ -1,2 +0,0 @@
-export * from './DataGrid';
-export * from './SimpleTable';

package/src/lib/Tabs/RouteTabs.tsx

@@ -1,54 +0,0 @@
-import { useMemo } from 'react';
-import Box from '@mui/material/Box';
-import Paper from '@mui/material/Paper';
-import Tab from '@mui/material/Tab';
-import Tabs from '@mui/material/Tabs';
-import TabPanel from './TabPanel';
-
-import { useNavigate, useLocation } from 'react-router-dom';
-
-interface RouteTab {
-  name: string;
-  label: string;
-  component: React.ReactElement;
-}
-
-interface Props {
-  tabs: RouteTab[];
-}
-
-export const RouteTabs = (props: Props) => {
-  const { tabs } = props;
-
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  const queryParams = useMemo(() => new URLSearchParams(location.search), [location.search]);
-  const value = queryParams.get('tab');
-
-  const handleChange = (event, newValue: string) => {
-    queryParams.set('tab', newValue);
-    navigate({ pathname: location.pathname, search: queryParams.toString() }, { replace: true });
-  };
-
-  return (
-    <Box>
-      <Paper>
-        <Tabs value={value || tabs[0]?.name} indicatorColor="primary" textColor="primary" onChange={handleChange}>
-          {tabs.map((tab) => (
-            <Tab key={tab.name} value={tab.name} label={tab.label} />
-          ))}
-        </Tabs>
-      </Paper>
-      <Box mt={2}>
-        {tabs.map((tab) => (
-          <TabPanel key={tab.name} value={value || tabs[0]?.name} index={tab.name}>
-            {tab.component}
-          </TabPanel>
-        ))}
-      </Box>
-    </Box>
-  );
-};
-
-export default RouteTabs;

package/src/lib/Tabs/TabPanel.tsx

@@ -1,42 +0,0 @@
-import React from 'react';
-
-/**
- * This interface is referencing the [[TabPanel]] component props.
- * @category Common UI components
- */
-export interface TabPanelProps {
-  /**
-   * Active tab value
-   */
-  value: number | string;
-  /**
-   * Index of current panel
-   */
-  index: number | string;
-  /**
-   * Rendered children component
-   */
-  children: React.ReactElement;
-}
-
-/**
- * Tab panel component. Used with tabs component
- * @category Common UI components
- */
-export const TabPanel = (props: TabPanelProps) => {
-  const { children, value, index, ...other } = props;
-
-  return (
-    <div
-      role="tabpanel"
-      hidden={value !== index}
-      id={`simple-tabpanel-${index}`}
-      aria-labelledby={`simple-tab-${index}`}
-      {...other}
-    >
-      {value === index ? children : null}
-    </div>
-  );
-};
-
-export default TabPanel;

package/src/theme/baseTheme.ts

@@ -1,41 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-
-const baseThemeOptions = {
-  spacing: 4,
-  palette: {
-    primary: {
-      main: '#E0613A',
-      dark: '#d9512e',
-      light: '#E0613A',
-    },
-    secondary: {
-      main: '#007994',
-      dark: '#262842',
-      light: '#cbe8ee',
-    },
-    text: {
-      disabled: '#A9A9B8',
-    },
-    success: {
-      main: '#2DB77B',
-      light: '#DBFCEE',
-    },
-    grey: {
-      700: '#101F2B',
-    },
-  },
-  typography: {
-    fontSize: 14,
-    h1: {
-      fontWeight: 400,
-    },
-    h3: {
-      fontWeight: 500,
-    },
-    h4: {
-      fontWeight: 500,
-    },
-  },
-};
-
-export default createTheme(baseThemeOptions);

package/src/theme/fonts.d.ts

@@ -1,2 +0,0 @@
-declare module '*.woff';
-declare module '*.woff2';

package/src/theme/index.ts

@@ -1,126 +0,0 @@
-import { createTheme, responsiveFontSizes } from '@mui/material/styles';
-import baseTheme from './baseTheme';
-import inputThemeOptions from './inputThemeOptions';
-import tableThemeOptions from './tableThemeOptions';
-import stepperThemeOptions from './stepperThemeOptions';
-import typographyThemeOptions from './typographyThemeOptions';
-
-export const theme = responsiveFontSizes(
-  createTheme(baseTheme, {
-    components: {
-      ...inputThemeOptions.components,
-      ...tableThemeOptions.components,
-      ...stepperThemeOptions.components,
-      ...typographyThemeOptions.components,
-      MuiToolbar: {
-        styleOverrides: {
-          root: {
-            [baseTheme.breakpoints.up('sm')]: {
-              minHeight: '56px',
-            },
-          },
-        },
-      },
-      // MuiBackdrop: {
-      //   styleOverrides: {
-      //     root: {
-      //       backgroundColor: 'rgba(0, 0, 0, 0.2)',
-      //     },
-      //   },
-      // },
-      MuiAppBar: {
-        styleOverrides: {
-          root: {
-            boxShadow: 'none',
-            backgroundColor: '#007F9B',
-          },
-        },
-      },
-      MuiButton: {
-        styleOverrides: {
-          root: {
-            borderRadius: baseTheme.spacing(2.5),
-            padding: baseTheme.spacing(2.5, 4),
-            lineHeight: '20px',
-            fontSize: '1rem',
-            textTransform: 'none'
-          },
-          outlined: {
-            color: '#262842',
-            backgroundColor: '#FFFFFF !important',
-            border: '1px solid rgba(38, 40, 66, 0.12)',
-          },
-          text: {
-            color: baseTheme.palette.secondary.dark
-          }
-        },
-      },
-      MuiDialog: {
-        styleOverrides: {
-          root: {
-            '& .MuiModal-backdrop': {
-              background: 'rgba(28, 55, 77, 0.5)',
-              backdropFilter: 'blur(2px)',
-            },
-          },
-          paper: {
-            borderRadius: baseTheme.spacing(3)
-          },
-          paperWidthXs: {
-            maxWidth: 500
-          }
-        },
-      },
-      // MuiPaper: {
-      //   styleOverrides: {
-      //     root: {
-      //       borderRadius: baseTheme.spacing(3),
-      //     },
-      //   },
-      // },
-      MuiDialogContent: {
-        styleOverrides: {
-          root: {
-            color: '#6D6E85',
-          },
-        },
-      },
-      MuiDialogActions: {
-        styleOverrides: {
-          root: {
-            background: '#F7F8FC',
-            borderTop: '1px solid rgba(38, 40, 66, 0.08)',
-            padding: baseTheme.spacing(3, 6)
-          },
-        },
-      },
-      MuiTabs: {
-        styleOverrides: {
-          root: {
-            minHeight: '38px',
-          },
-          indicator: {
-            backgroundColor: baseTheme.palette.secondary.main
-          }
-        }
-      },
-      MuiTab: {
-        styleOverrides: {
-          root: {
-            fontSize: 14,
-            fontWeight: 500,
-            textTransform: 'none',
-            padding: '10px 12px',
-            lineHeight: '1.125rem',
-            minHeight: '38px',
-            color: '#8B8C9E',
-            '&.Mui-selected': {
-              color: baseTheme.palette.secondary.main
-            }
-          }
-        }
-      }
-    },
-  })
-);
-