@dartech/arsenal-ui 1.2.4 → 1.2.5

package/src/theme/baseTheme.ts

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

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

package/src/theme/index.ts

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

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

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

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

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

package/src/utils/common.ts

@@ -0,0 +1,73 @@
+export const removeArrayItem = (arr: Array<unknown>, index: number) => {
+  const newArr = [...arr];
+  newArr.splice(index, 1);
+  return newArr;
+};
+
+export const validateJson = (value: string): boolean => {
+  try {
+    JSON.parse(value);
+  } catch (error) {
+    return false;
+  }
+  return true;
+};
+
+export function capitalize(str: string): string {
+  return str.replace(/(^\w)|([-\s]\w)/g, (c) => c.toUpperCase());
+}
+
+export const sortArrayOfObjects = (a: Record<string, unknown>, b: Record<string, unknown>, key: string, order = 'asc') => {
+  const valueA = a[key];
+  const valueB = b[key];
+
+  if (valueA < valueB) return order === 'asc' ? -1 : 1;
+  if (valueA > valueB) return order === 'asc' ? 1 : -1;
+  return 0;
+};
+
+export const getJsonStringValue = (value: unknown): string => {
+  if (!value) return '';
+  if (typeof value === 'string') {
+    try {
+      return JSON.stringify(JSON.parse(value), null, 2) 
+    } catch (error) {
+      return value;
+    }
+  } else {
+    try {
+      return JSON.stringify(value, null, 2);
+    } catch (error) {
+      return 'Failed to stringify JSON';
+    }
+  }
+};
+
+export const safeParseJson = (value: string) => {
+  try {
+    return JSON.parse(value);
+  } catch (error) {
+    return null;
+  }
+};
+
+export const deepParseJson = (value: string) => {
+  try {
+    const parsedValue = JSON.parse(value);
+    Object.keys(parsedValue).forEach((key) => {
+      parsedValue[key] = deepParseJson(parsedValue[key]);
+    });
+    return parsedValue;
+  } catch (error) {
+    return value;
+  }
+};
+
+// export const convertArrayToObjectByKey = (array: { [key: string]: string }[], key: string) => {
+//   const obj = {};
+//   array.forEach((el) => {
+//     obj[el[key]] = { ...el };
+//     delete obj[el[key]][key];
+//   });
+//   return obj;
+// };