@campxdev/shared 1.8.14 → 1.8.16

package/src/theme/muiTheme.ts

@@ -0,0 +1,597 @@
+import { alpha, darken, lighten } from '@mui/material'
+import { ThemeOptions, createTheme } from '@mui/material/styles'
+import { customCssBaseline } from './customCssBaseline'
+
+const borderRadius = {
+  small: '5px',
+  large: '10px',
+}
+
+const PRIMARY_FONT = 'Avenir'
+const SECONDARY_FONT = 'Poppins'
+
+export const SCROLLBAR_DARK = {
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(0, 0, 0, 0.15)',
+    borderRadius: '3px',
+
+    '&:hover': {
+      background: 'rgba(0, 0, 0, 0.2)',
+    },
+  },
+}
+
+export const SCROLLBAR_LIGHT = {
+  '&::-webkit-scrollbar': {
+    width: '0.5em',
+    height: '0.5em',
+  },
+
+  '&::-webkit-scrollbar-thumb': {
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    borderRadius: '3px',
+
+    '&:hover': {
+      background: 'rgba(255, 255, 255, 0.2)',
+    },
+  },
+}
+
+const themeColors = {
+  primary: '#1E19F5',
+  secondary: '#121212',
+  secondaryLight: '#1212121A',
+  success: '#57CA22',
+  warning: '#FFA319',
+  error: '#BC2C3D',
+  info: '#33C2FF',
+  black: '#223354',
+  white: '#ffffff',
+  primaryAlt: '#000C57',
+  yellow: '#FFAF20',
+  green: '#99C15B',
+  grayLight: '#F2F2F2',
+  pureBlack: '#000000',
+  pureWhite: '#ffffff',
+  secondaryDark: '#EFEFEF',
+  offsetBlue: '#149ECD',
+}
+
+const colors = {
+  primary: {
+    main: themeColors.primary,
+    light: alpha(themeColors.primary, 0.5),
+    lighter: alpha(themeColors.primary, 0.1),
+  },
+  secondary: {
+    main: themeColors.secondary,
+    light: themeColors.grayLight,
+    lighter: themeColors.secondaryLight,
+    dark: themeColors.secondaryDark,
+  },
+  common: {
+    green: themeColors.green,
+    yellow: themeColors.yellow,
+    black: themeColors.pureBlack,
+    white: themeColors.pureWhite,
+    blue: themeColors.offsetBlue,
+  },
+  error: {
+    lighter: alpha(themeColors.error, 0.1),
+    light: lighten(themeColors.error, 0.3),
+    main: themeColors.error,
+    dark: darken(themeColors.error, 0.2),
+  },
+}
+
+const borders = {
+  primary: `1px solid ${themeColors.primary}`,
+  grayLight: `1px solid ${themeColors.secondaryLight}`,
+}
+
+const themeOptions = {
+  typography: {
+    fontFamily: ['Poppins', 'Avenir', 'sans-serif'].join(','),
+  },
+  borders: {
+    ...borders,
+  },
+  palette: {
+    primary: {
+      dark: '#1E19F5',
+      main: colors.primary.main,
+      light: colors.primary.light,
+      lighter: colors.primary.lighter,
+    },
+    secondary: {
+      main: '#121212',
+      light: colors.secondary.light,
+      dark: themeColors.secondaryDark,
+      lighter: themeColors.secondaryLight,
+    },
+    common: {
+      green: themeColors.green,
+      yellow: themeColors.yellow,
+      blue: themeColors.offsetBlue,
+    },
+    error: {
+      main: '#BC2C3D',
+    },
+    text: {
+      primary: '#121212',
+      secondary: '#959595',
+      disabled: '#12121280',
+    },
+  },
+  components: {
+    MuiTypography: {
+      styleOverrides: {
+        root: {
+          color: '#121212',
+          fontSize: '14px',
+          fontWeight: 500,
+          fontFamily: PRIMARY_FONT,
+        },
+        h1: {
+          fontSize: '18px',
+          fontWeight: 600,
+          fontFamily: SECONDARY_FONT,
+        },
+        h3: {
+          fontSize: '16px',
+          fontWeight: 600,
+          fontFamily: SECONDARY_FONT,
+        },
+        h5: {
+          fontSize: '14px',
+          fontWeight: 500,
+          fontFamily: SECONDARY_FONT,
+        },
+        h6: {
+          fontSize: '15px',
+          fontWeight: 600,
+          fontFamily: SECONDARY_FONT,
+        },
+        paragraph: {
+          fontSize: '16px',
+          marginBottom: 0,
+        },
+        body2: {
+          fontWeight: 600,
+        },
+        subtitle1: {
+          fontSize: '14px',
+          fontWeight: 500,
+          color: '#121212b3',
+        },
+        subtitle2: {
+          fontSize: '13px',
+          fontWeight: 500,
+          color: '#959595',
+        },
+      },
+    },
+    MuiButton: {
+      defaultProps: {
+        variant: 'contained',
+        disableRipple: true,
+        disableElevation: true,
+        disableFocusRipple: true,
+        disableTouchRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          fontFamily: SECONDARY_FONT,
+          height: '40px',
+          fontSize: '14px',
+          padding: '10px 40px',
+          textTransform: 'capitalize',
+          fontWeight: 600,
+          borderRadius: borderRadius.small,
+          '&.MuiButton-sizeSmall': {
+            padding: '6px 8px',
+            height: '40px',
+            fontSize: '14px',
+          },
+        },
+      },
+    },
+    MuiButtonBase: {
+      defaultProps: {
+        disableRipple: true,
+        disableTouchRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          fontFamily: SECONDARY_FONT,
+          fontSize: '14px',
+          fontWeight: 600,
+        },
+      },
+    },
+    MuiInputBase: {
+      styleOverrides: {
+        root: {
+          fontFamily: PRIMARY_FONT,
+          fontWeight: 500,
+          minHeight: '50px',
+          borderRadius: '10px',
+          '& input': {
+            fontSize: '15px',
+            boxSizing: 'border-box',
+            minHeight: '50px',
+          },
+          '&.MuiInputBase-sizeSmall': {
+            borderRadius: '6px',
+            minHeight: '40px',
+            '& input': { minHeight: '40px' },
+            '& fieldset': { minHeight: '40px' },
+          },
+        },
+      },
+    },
+    MuiOutlinedInput: {
+      styleOverrides: {
+        root: {
+          borderRadius: borderRadius.large,
+          '& .MuiInputAdornment-positionEnd.MuiInputAdornment-outlined': {
+            paddingRight: '14px',
+          },
+          '& .MuiInputAdornment-positionStart.MuiInputAdornment-outlined': {
+            paddingLeft: '14px',
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            top: 1,
+            minHeight: '50px',
+            border: borders.grayLight,
+            '& legend': {
+              '& > span': {
+                paddingRight: 2,
+              },
+            },
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: alpha(colors.common.black, 0.2),
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: colors.primary.main,
+            borderWidth: '0.5px',
+            '& :hover': {
+              borderColor: colors.primary.main,
+              borderWidth: '0.5px',
+            },
+          },
+        },
+      },
+    },
+    MuiCheckbox: {
+      defaultProps: {
+        disableRipple: true,
+      },
+      styleOverrides: {
+        root: {
+          '& .MuiSvgIcon-root': {
+            width: '18px',
+            height: '18px',
+          },
+        },
+      },
+    },
+    MuiFormControl: {
+      styleOverrides: {
+        root: {
+          position: 'relative',
+          '&.MuiTextField-root > .MuiInputBase-root': {
+            padding: 0,
+          },
+          '& .MuiInputBase-inputMultiline': {
+            padding: '14px',
+          },
+          '& .MuiSelect-select': {
+            padding: '14px',
+            '&.MuiInputBase-inputSizeSmall': {
+              padding: '10px 14px',
+            },
+          },
+          '& .MuiAutocomplete-inputRoot.MuiInputBase-root': {
+            padding: '5px',
+            '& > .MuiInputBase-input': {
+              marginLeft: '5px',
+              minHeight: '40px',
+              padding: 0,
+            },
+          },
+          '& .MuiFormHelperText-root': {
+            fontStyle: 'oblique',
+            position: 'absolute',
+            fontSize: '13px',
+            fontWeight: 600,
+            textAlign: 'right',
+            right: 0,
+            bottom: -26,
+          },
+        },
+      },
+    },
+    MuiAutocomplete: {
+      styleOverrides: {
+        tag: { margin: 1 },
+        root: {
+          '.MuiAutocomplete-inputRoot.MuiOutlinedInput-root .MuiAutocomplete-endAdornment':
+            { right: 14 },
+        },
+        clearIndicator: {
+          background: colors.error.lighter,
+          borderRadius: '5px',
+          color: colors.error.main,
+          marginRight: 8,
+          '&:hover': {
+            background: colors.error.lighter,
+            color: colors.error.dark,
+          },
+        },
+        popupIndicator: {
+          color: alpha(colors.common.black, 0.5),
+          '&:hover': {
+            background: colors.primary.lighter,
+            color: colors.primary.main,
+          },
+        },
+      },
+    },
+    MuiSwitch: {
+      styleOverrides: {
+        root: {
+          height: '20px',
+          padding: 0,
+          '& .MuiSwitch-switchBase': {
+            padding: 0,
+            transitionDuration: '300ms',
+            '&.Mui-checked': {
+              color: colors.common.green,
+              '& .MuiSwitch-thumb': {
+                marginLeft: '0px',
+              },
+              '& + .MuiSwitch-track': {
+                opacity: '1',
+                border: `0.5px solid ${colors.common.green}`,
+                background: '#EDEDED 0% 0% no-repeat padding-box',
+              },
+              '&.Mui-disabled + .MuiSwitch-track': {
+                opacity: 0.5,
+              },
+            },
+            '&.Mui-disabled .MuiSwitch-thumb': {
+              color: colors.common.green,
+              opacity: '0.5',
+            },
+          },
+          '& .MuiSwitch-thumb': {
+            width: '18px',
+            height: '16px',
+            borderRadius: '5px',
+            marginTop: '2px',
+            boxShadow: 'none',
+            marginLeft: '2px',
+          },
+          '& .MuiSwitch-track': {
+            borderRadius: '5px',
+            width: '40px',
+            height: '20px',
+            backgroundColor: '#EDEDED',
+            paddingLeft: '12px',
+            opacity: '1',
+          },
+        },
+      },
+    },
+    MuiMenu: {
+      styleOverrides: {
+        paper: {
+          '&::-webkit-scrollbar': {
+            width: '0.5em',
+            height: '0.5em',
+          },
+
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: 'rgba(0, 0, 0, 0.15)',
+            borderRadius: '3px',
+
+            '&:hover': {
+              background: 'rgba(0, 0, 0, 0.2)',
+            },
+          },
+        },
+      },
+    },
+    MuiIconButton: {
+      defaultProps: {
+        disableRipple: true,
+        disableFocusRipple: true,
+        disableTouchRipple: true,
+        size: 'small',
+      },
+      styleOverrides: {
+        root: {
+          borderRadius: '10px',
+        },
+      },
+    },
+    MuiFormLabel: {
+      styleOverrides: {
+        root: {
+          fontSize: '14px',
+          color: '#959595',
+        },
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        variant: 'outlined',
+        color: 'primary',
+        fullWidth: true,
+      },
+    },
+    MuiTable: {
+      styleOverrides: {
+        root: {
+          border: borders.grayLight,
+          fontFamily: PRIMARY_FONT,
+          fontSize: '14px',
+          fontWeight: 500,
+        },
+      },
+    },
+    MuiTableHead: {
+      styleOverrides: {
+        root: {
+          backgroundColor: themeColors.grayLight,
+          '& th': {
+            lineHeight: '20px',
+            fontSize: '14px',
+            fontWeight: 600,
+            fontFamily: SECONDARY_FONT,
+          },
+        },
+      },
+    },
+    MuiTableCell: {
+      styleOverrides: {
+        root: {
+          lineHeight: '20px',
+          padding: '15px',
+          fontWeight: 500,
+          fontFamily: PRIMARY_FONT,
+          fontSize: '14px',
+          '& .MuiCheckbox-root': {
+            padding: 0,
+          },
+        },
+      },
+    },
+    MuiCard: {
+      styleOverrides: {
+        root: {
+          border: borders.grayLight,
+          boxShadow: 'none',
+          borderRadius: '10px',
+          '&.MuiPaper-root': {
+            height: 'fit-content',
+          },
+        },
+      },
+    },
+    MuiMenuItem: {
+      styleOverrides: {
+        root: {
+          fontWeight: 500,
+          fontFamily: SECONDARY_FONT,
+          fontSize: '14px',
+        },
+      },
+    },
+    MuiListItemText: {
+      styleOverrides: {
+        root: {
+          '& .MuiTypography-root': {
+            fontWeight: 500,
+            fontFamily: SECONDARY_FONT,
+            fontSize: '14px',
+          },
+        },
+      },
+    },
+    MuiCardHeader: {
+      styleOverrides: {
+        root: {
+          padding: '20px',
+          '& .MuiCardHeader-title': {
+            fontSize: '15px',
+            fontFamily: SECONDARY_FONT,
+            fontWeight: 500,
+          },
+          '& .MuiTypography-root.MuiCardHeader-subheader': {
+            marginTop: '3px',
+            fontSize: '13px',
+            fontFamily: PRIMARY_FONT,
+            fontWeight: 400,
+          },
+        },
+      },
+    },
+    MuiCardContent: {
+      styleOverrides: {
+        root: {
+          padding: '20px',
+          paddingTop: 0,
+        },
+      },
+    },
+    MuiCardActions: {
+      styleOverrides: {
+        root: {
+          padding: 0,
+        },
+      },
+    },
+    MuiFormHelperText: {
+      styleOverrides: {
+        root: {
+          fontFamily: PRIMARY_FONT,
+          fontSize: '12px',
+          color: themeColors.error,
+          marginLeft: '2px',
+          marginRight: '2px',
+        },
+      },
+    },
+    MuiDialogTitle: {
+      styleOverrides: {
+        root: {
+          fontFamily: SECONDARY_FONT,
+          fontWeight: 500,
+          fontSize: '16px',
+          padding: 0,
+        },
+      },
+    },
+    MuiChip: {
+      styleOverrides: {
+        root: {
+          fontFamily: PRIMARY_FONT,
+          fontWeight: 500,
+          fontSize: '14px',
+        },
+      },
+    },
+    MuiListItemButton: {
+      styleOverrides: {
+        root: {
+          fontFamily: SECONDARY_FONT,
+          fontSize: '14px',
+          '& .MuiListItemText-primary.MuiTypography-root': {
+            fontFamily: SECONDARY_FONT,
+          },
+        },
+      },
+    },
+    MuiRadio: {
+      defaultProps: {
+        disableRipple: true,
+      },
+    },
+    MuiCssBaseline: {
+      styleOverrides: customCssBaseline,
+    },
+  },
+}
+
+// A custom theme for this app
+const muiTheme = createTheme({ ...themeOptions })
+
+export default muiTheme

package/src/theme/theme.d.ts

@@ -0,0 +1,77 @@
+import { ThemeOptions as MuiThemeOptions } from '@mui/material/styles'
+
+declare module '@mui/material/styles' {
+  interface Theme {
+    borders: {
+      grayLight: string
+      primary: string
+    }
+    palette: {
+      primary: {
+        dark: string
+        main: string
+        light: string
+        lighter: string
+      }
+      secondary: {
+        main: string
+        light: string
+        dark: string
+        lighter: string
+      }
+      common: {
+        black: string
+        white: string
+        green: string
+        yellow: string
+        blue: string
+      }
+      error: {
+        main: string
+      }
+      text: {
+        primary: string
+        secondary: string
+        disabled: string
+      }
+    }
+  }
+  // allow configuration using `createTheme`
+  interface CustomThemeOptions extends MuiThemeOptions {
+    borders?: {
+      grayLight?: string
+    }
+    palette: {
+      secondary?: {
+        main?: string
+        light?: string
+        dark?: string
+        lighter?: string
+      }
+      primary?: {
+        dark?: string
+        main?: string
+        light?: string
+        lighter?: string
+      }
+      common?: {
+        black?: string
+        white?: string
+        green?: string
+        yellow?: string
+        blue?: string
+      }
+      error?: {
+        main?: string
+      }
+      text?: {
+        primary?: string
+        secondary?: string
+        disabled?: string
+      }
+    }
+    components?: Components<Omit<Theme, 'components'>>
+    typography?: TypographyOptions | ((palette: Palette) => TypographyOptions)
+  }
+  export function createTheme(options?: CustomThemeOptions): CustomTheme
+}

package/src/utils/adminAxios.ts

@@ -0,0 +1,15 @@
+import Axios from 'axios'
+import Cookies from 'js-cookie'
+
+const sessionKey = Cookies.get('campx_admin_session_key')
+let adminAxios = Axios.create({
+  baseURL: process.env.REACT_APP_TENANT_API_HOST,
+  withCredentials: true,
+  headers: {
+    ...(sessionKey && {
+      campx_admin_session_key: sessionKey,
+    }),
+  },
+})
+
+export default adminAxios

package/src/utils/alphabet.ts

@@ -0,0 +1,23 @@
+export function alphabet(option) {
+  let letters: any = []
+
+  //set the default value of i & j to print A to Z
+  var i = 65
+  var j = 91
+
+  //if the option is small set the value of i,j to print a to z
+  if (option == 'small') {
+    i = 97
+    j = 123
+  }
+
+  //loop through the values from i to j
+  for (let k = i; k < j; k++) {
+    //convert the char code to string (Alphabets)
+    var str = String.fromCharCode(k)
+    //print the result in console
+    letters.push(str)
+  }
+
+  return letters
+}

package/src/utils/arrayPadEnd.ts

@@ -0,0 +1,3 @@
+export default function arrayPadEnd(array, minLength, fillValue = undefined) {
+  return Object.assign(new Array(minLength).fill(fillValue), array)
+}