@dartech/arsenal-ui 1.2.6 → 1.2.7

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,128 +0,0 @@
-import { createTheme } from '@mui/material/styles';
-import Euclid from '../assets/fonts/Euclid/EuclidCircularB-Regular.woff2'; 
-import EuclidItalic from '../assets/fonts/Euclid/EuclidCircularB-RegularItalic.woff2'; 
-import EuclidBold from '../assets/fonts/Euclid/EuclidCircularB-Bold.woff2'; 
-import EuclidBoldItalic from '../assets/fonts/Euclid/EuclidCircularB-BoldItalic.woff2'; 
-import EuclidLight from '../assets/fonts/Euclid/EuclidCircularB-Light.woff2'; 
-import EuclidLightItalic from '../assets/fonts/Euclid/EuclidCircularB-LightItalic.woff2'; 
-import EuclidMedium from '../assets/fonts/Euclid/EuclidCircularB-Medium.woff2'; 
-import EuclidMediumItalic from '../assets/fonts/Euclid/EuclidCircularB-MediumItalic.woff2'; 
-import EuclidSemiBold from '../assets/fonts/Euclid/EuclidCircularB-Semibold.woff2'; 
-import EuclidSemiBoldItalic from '../assets/fonts/Euclid/EuclidCircularB-SemiboldItalic.woff2'; 
-
-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: {
-    fontFamily: 'Euclid,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"',
-    fontSize: 14,
-    h1: {
-      fontWeight: 400,
-    },
-    h3: {
-      fontWeight: 500,
-    },
-    h4: {
-      fontWeight: 500,
-    }
-  },
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: `
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidLight}) format('woff2');
-          font-weight: 300;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidLightItalic}) format('woff2');
-          font-weight: 300;
-          font-style: italic;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${Euclid}) format('woff2');
-          font-weight: 400;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidItalic}) format('woff2');
-          font-weight: 400;
-          font-style: italic;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidMedium}) format('woff2');
-          font-weight: 500;
-        }
-
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidMediumItalic}) format('woff2');
-          font-style: italic;
-          font-weight: 500;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidSemiBold}) format('woff2');
-          font-weight: 600;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidSemiBoldItalic}) format('woff2');
-          font-style: italic;
-          font-weight: 600;
-        }
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidBold}) format('woff2');
-          font-weight: 700;
-        }
-
-        @font-face {
-          font-family: 'Euclid';
-          font-display: swap;
-          src: url(${EuclidBoldItalic}) format('woff2');
-          font-style: italic;
-          font-weight: 700;
-        }
-
-      `
-    }
-  }
-};
-
-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
-            }
-          }
-        }
-      }
-    },
-  })
-);
-

package/src/theme/inputThemeOptions.ts

@@ -1,126 +0,0 @@
-import baseTheme from './baseTheme';
-
-const inputThemeOptions = {
-  components: {
-    MuiButton: {
-      styleOverrides: {
-        root: {
-          lineHeight: 1.429,
-        },
-      },
-    },
-    MuiInputBase: {
-      styleOverrides: {
-        root: {
-          borderRadius: baseTheme.spacing(3),
-          minWidth: baseTheme.spacing(25),
-          background: baseTheme.palette.background.default
-          // height: 40
-        },
-        // sizeSmall: {
-        //   padding: baseTheme.spacing(1, 0, 1, 4),
-        // },
-        input: {
-          minWidth: baseTheme.spacing(25),
-          // padding: 0,
-          // height: '32px',
-        },
-      },
-    },
-    MuiSelect: {
-      styleOverrides: {
-        nativeInput: {
-          padding: 0,
-          height: '32px',
-        },
-      },
-    },
-    MuiTextField: {
-      styleOverrides: {
-        root: {
-          minWidth: baseTheme.spacing(25),
-        },
-      },
-    },
-    MuiInputLabel: {
-      styleOverrides: {
-        root: {
-          position: 'relative',
-          overflow: 'initial',
-          transform: 'none',
-          marginBottom: baseTheme.spacing(1),
-          fontWeight: 500,
-          fontSize: '14px',
-          lineHeight: '20px',
-        },
-      },
-    },
-    MuiOutlinedInput: {
-      styleOverrides: {
-        root: {
-          borderRadius: baseTheme.spacing(3),
-          minWidth: baseTheme.spacing(25),
-        },
-        notchedOutline: {
-          top: 0,
-          '& legend': {
-            display: 'none',
-            transition: 'none',
-          },
-        },
-      },
-    },
-    MuiAutocomplete: {
-      styleOverrides: {
-        paper: {
-          marginTop: 8,
-          borderRadius: 12,
-          boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.04)',
-        },
-        listbox: {
-          '::-webkit-scrollbar': {
-            width: '6px',
-            backgroundColor: 'white',
-          },
-          '::-webkit-scrollbar-thumb': {
-            borderRadius: '10px',
-            backgroundColor: 'rgba(38, 40, 66, 0.24)',
-          },
-        },
-      },
-    },
-    MuiMenu: {
-      styleOverrides: {
-        list: {
-          paddingTop: 0,
-          paddingBottom: 0,
-          background: 'white',
-          '& li.Mui-selected': {
-            background: 'rgba(38, 40, 66, 0.08) !important',
-          },
-        },
-      },
-    },
-    MuiPopover: {
-      styleOverrides: {
-        paper: {
-          marginTop: 8,
-          borderRadius: 12,
-          boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.04)',
-        },
-      },
-    },
-    MuiFormLabel: {
-      styleOverrides: {
-        asterisk: {
-          color: '#D6331F',
-          '&$error': {
-            color: '#D6331F',
-          },
-        },
-      },
-    },
-  },
-};
-
-export default inputThemeOptions;

package/src/theme/stepperThemeOptions.ts

@@ -1,20 +0,0 @@
-import baseTheme from './baseTheme';
-
-const stepperThemeOptions = {
-  components: {
-    MuiStepIcon: {
-      styleOverrides: {
-        root: {
-          fontSize: '20px',
-          color: baseTheme.palette.text.disabled,
-          '&.Mui-active, &.Mui-completed': {
-            color: baseTheme.palette.secondary.main
-          }
-        }
-      }
-      
-    }
-  }
-}
-
-export default stepperThemeOptions;

package/src/theme/tableThemeOptions.ts

@@ -1,50 +0,0 @@
-import baseTheme from './baseTheme';
-
-const tableThemeOptions = {
-  components: {
-    MuiTableContainer: {
-      styleOverrides: {
-        root: {
-          borderRadius: baseTheme.spacing(3),
-          border: '1px solid rgba(38, 40, 66, 0.08)',
-        },
-      },
-    },
-    MuiTableHead: {
-      styleOverrides: {
-        root: {
-          backgroundColor: '#F7F8FC',
-        },
-      },
-    },
-    MuiTableCell: {
-      styleOverrides: {
-        root: {
-          minHeight: 48,
-          padding: baseTheme.spacing(1, 2),
-          '&:first-of-type': {
-            paddingLeft: baseTheme.spacing(4),
-          }
-        },
-        head: {
-          maxHeight: '40px',
-          padding: baseTheme.spacing(2.75, 2),
-          color: '#6D6E85'
-        },
-        body: {
-          wordBreak: 'break-all'
-        },
-      },
-    },
-    MuiTableSortLabel: {
-      styleOverrides: {
-        root: {
-          maxHeight: '24px',
-          lineHeight: 1,
-        },
-      },
-    },
-  },
-};
-
-export default tableThemeOptions;

package/src/theme/typographyThemeOptions.ts

@@ -1,32 +0,0 @@
-import baseTheme from './baseTheme';
-
-const typographyThemeOptions = {
-  components: {
-    MuiTypography: {
-      styleOverrides: {
-        h1: {
-          [baseTheme.breakpoints.up('lg')]: {
-            fontSize: '1.5rem'
-          }
-        },
-        h3: {
-          fontSize: '1.25rem',
-          [baseTheme.breakpoints.up('lg')]: {
-            fontSize: '1.125rem'
-          }
-        },
-        h4: {
-          fontSize: '1rem',
-          [baseTheme.breakpoints.up('lg')]: {
-            fontSize: '1rem'
-          }
-        },
-        subtitle2: {
-          color: '#6D6E85'
-        }
-      }
-    }
-  }
-}
-
-export default typographyThemeOptions;