@campxdev/shared 1.5.4 → 1.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.5.4",
+  "version": "1.5.7",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/assets/fonts/avenir/index.ts

@@ -1,2 +1,13 @@
-const avenirFont = require('./Avenir.ttc')
-export { avenirFont }
+const avenirRegular = require('./Avenir-Book.ttf')
+const avenirMedium = require('./Avenir-Medium.ttf')
+const avenirMediumObliquue = require('./Avenir-MediumOblique.ttf')
+const avenirHeavy = require('./Avenir-Heavy.ttf')
+const avenirHeavyObliquue = require('./Avenir-HeavyOblique.ttf')
+
+export {
+  avenirRegular,
+  avenirHeavy,
+  avenirHeavyObliquue,
+  avenirMedium,
+  avenirMediumObliquue,
+}

package/src/assets/fonts/poppins/index.ts

@@ -3,5 +3,16 @@ const semiboldPoppins = require('./Poppins-SemiBold.ttf')
 const mediumPoppins = require('./Poppins-Medium.ttf')
 const lightPoppins = require('./Poppins-Light.ttf')
 const regularPoppins = require('./Poppins-Regular.ttf')
+const regularPoppinsItalic = require('./Poppins-Italic.ttf')
+const mediumPoppinsItalic = require('./Poppins-MediumItalic.ttf')
+const lightPoppinsItalic = require('./Poppins-LightItalic.ttf')
 
-export { semiboldPoppins, mediumPoppins, lightPoppins, regularPoppins }
+export {
+  semiboldPoppins,
+  mediumPoppins,
+  lightPoppins,
+  regularPoppins,
+  regularPoppinsItalic,
+  mediumPoppinsItalic,
+  lightPoppinsItalic,
+}

package/src/components/Input/DatePicker.tsx

@@ -16,6 +16,7 @@ export interface IDatePicker {
   onChange: (value: Date) => void
   placeholder?: string
   inputProps?: TextFieldProps
+  size?: 'medium' | 'small'
 }
 
 export default function FormDatePicker({
@@ -26,6 +27,7 @@ export default function FormDatePicker({
   value,
   onChange,
   placeholder,
+  size = 'medium',
   required = false,
   ...rest
 }: IDatePicker) {
@@ -38,6 +40,7 @@ export default function FormDatePicker({
         dateFormat: 'd-m-Y',
         minDate,
         maxDate,
+        allowInput: true,
       }}
       value={value || null}
       render={(
@@ -46,6 +49,7 @@ export default function FormDatePicker({
       ) => {
         return (
           <TextField
+            size={size}
             placeholder={placeholder}
             label={label}
             name={name}

package/src/components/Input/DateTimePicker.tsx

@@ -18,6 +18,7 @@ export interface IDateTimePicker {
   placeholder?: string
   inputProps?: TextFieldProps
   enableTime?: boolean
+  size?: 'medium' | 'small'
 }
 
 export default function DateTimePicker({
@@ -32,6 +33,7 @@ export default function DateTimePicker({
   value,
   placeholder,
   enableTime = true,
+  size = 'medium',
   ...rest
 }: IDateTimePicker) {
   return (
@@ -43,6 +45,7 @@ export default function DateTimePicker({
         maxDate,
         minTime,
         maxTime,
+        allowInput: true,
       }}
       onChange={(dates: Date[]) => {
         if (onChange) onChange(dates[0])
@@ -54,6 +57,7 @@ export default function DateTimePicker({
       ) => {
         return (
           <TextField
+            size={size}
             placeholder={placeholder}
             label={label}
             name={name}

package/src/components/Input/TimePicker.tsx

@@ -15,6 +15,7 @@ export interface ITimePicker {
   onChange: (value: Date) => void
   placeholder?: string
   inputProps?: TextFieldProps
+  size?: 'medium' | 'small'
 }
 
 export default function TimePicker({
@@ -26,6 +27,7 @@ export default function TimePicker({
   onChange,
   value,
   placeholder,
+  size = 'medium',
   ...rest
 }: ITimePicker) {
   return (
@@ -36,6 +38,7 @@ export default function TimePicker({
         dateFormat: 'h:i K',
         minTime,
         maxTime,
+        allowInput: true,
       }}
       onChange={(dates: Date[]) => {
         if (onChange) onChange(dates[0])
@@ -47,6 +50,7 @@ export default function TimePicker({
       ) => {
         return (
           <TextField
+            size={size}
             placeholder={placeholder}
             label={label}
             name={name}

package/src/components/PopupConfirm/PopupConfirm.tsx

@@ -1,33 +1,66 @@
-import {
-  Button,
-  Dialog,
-  DialogActions,
-  DialogContent,
-  DialogTitle,
-} from '@mui/material'
+import { Box, Button, Dialog, styled, Typography } from '@mui/material'
 import useConfirm from './useConfirm'
+const animatedImage = require('./animation.gif')
+
+const StyledImage = styled((props: any) => (
+  <Box>
+    <img {...props} />
+  </Box>
+))(({ theme }) => ({
+  width: '154px',
+  '> img': {
+    width: '100%',
+    height: '100%',
+    objectFit: 'contain',
+  },
+}))
+
+const StyledDialogContent = styled(Box)(({ theme }) => ({
+  height: '360px',
+  width: '570px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flexDirection: 'column',
+}))
 
 const PopupConfirm = () => {
   const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
   return (
     <Dialog
-      sx={{ zIndex: 1600 }}
+      PaperProps={{
+        elevation: 2,
+        sx: {
+          borderRadius: '10px',
+        },
+      }}
+      sx={{
+        '& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
+        zIndex: 1600,
+      }}
       keepMounted
       maxWidth="sm"
       fullWidth
       open={isOpen}
       transitionDuration={150}
     >
-      <DialogTitle>Confirm</DialogTitle>
-      <DialogContent sx={{ minHeight: '40px' }}>{prompt}</DialogContent>
-      <DialogActions>
-        <Button variant="contained" color="primary" onClick={proceed}>
-          Ok
-        </Button>
-        <Button color="secondary" variant="outlined" onClick={cancel}>
-          Cancel
-        </Button>
-      </DialogActions>
+      <StyledDialogContent>
+        <Box sx={{ marginBottom: '20px' }}>
+          <StyledImage src={animatedImage} alt="Upload Image" />
+        </Box>
+
+        <Typography variant="h6" sx={{ minHeight: '30px' }}>
+          {prompt}
+        </Typography>
+        <Box sx={{ display: 'flex', gap: '20px', marginTop: '30px' }}>
+          <Button color="secondary" variant="outlined" onClick={cancel}>
+            No, Cancel
+          </Button>
+          <Button variant="outlined" onClick={proceed} sx={{ height: '40px' }}>
+            Yes, I'm. Sure
+          </Button>
+        </Box>
+      </StyledDialogContent>
     </Dialog>
   )
 }

package/src/components/ToastContainer/ToastContainer.tsx

@@ -1,7 +1,8 @@
-import { Done } from '@mui/icons-material'
+import { Done, Close, WarningAmberRounded } from '@mui/icons-material'
 import { Box } from '@mui/material'
 import { Slide, ToastContainer as ReactToastContainer } from 'react-toastify'
 import 'react-toastify/dist/ReactToastify.css'
+import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded'
 
 export default function ToastContainer() {
   return (
@@ -18,12 +19,26 @@ export default function ToastContainer() {
       draggable
       pauseOnHover
       theme="colored"
-      icon={<Icon />}
+      icon={({ type }) => <Icon type={type} />}
     />
   )
 }
 
-const Icon = () => {
+const Icon = ({ type }) => {
+  const renderIcon = () => {
+    switch (type) {
+      case 'error':
+        return <Close />
+      case 'success':
+        return <Done />
+      case 'warning':
+        return <WarningAmberRounded />
+
+      default:
+        return <Done />
+    }
+  }
+
   return (
     <Box
       sx={{
@@ -36,7 +51,7 @@ const Icon = () => {
         justifyContent: 'center',
       }}
     >
-      <Done />
+      {renderIcon()}
     </Box>
   )
 }

package/src/hooks/useFilters.ts

@@ -1,28 +1,53 @@
 import React, { useEffect, useState } from 'react'
 
-export default function useFilters(initialState, key) {
+export default function useFilters(initialState, key?: any) {
   const [filters, setFilters] = useState(initialState)
   const [filtersApplied, setFiltersApplied] = useState(false)
 
+  useEffect(() => {
+    const prevFilters = getSessionFilters()
+    setFilters({
+      ...filters,
+      ...prevFilters,
+    })
+  }, [])
+
   function onFilterChange(modified) {
     setFilters({
       ...filters,
       ...modified,
     })
 
-    const sessionData = Object.keys(modified).reduce((acc, curr) => {
-      if (!!modified[curr]) {
-        acc.push({ key: curr, value: modified[curr] })
+    const filterData = {
+      ...filters,
+      ...modified,
+    }
+
+    const sessionData = Object.keys(filterData).map((item, key) => {
+      if (filtersCheck(item, filterData)) {
+        return { key: item, value: filterData[item] }
       }
-      return acc
-    }, [])
+    })
 
-    if (sessionData?.length > 0) {
-      sessionStorage.setItem(key, JSON.stringify(sessionData))
+    const filteredSessionArray = sessionData.filter(
+      (value) => value !== undefined,
+    )
+
+    if (filteredSessionArray?.length > 0) {
+      sessionStorage.setItem(key, JSON.stringify(filteredSessionArray))
       setFiltersApplied(true)
-    } else {
-      sessionStorage.removeItem(key)
-      setFiltersApplied(false)
+    }
+  }
+
+  function filtersCheck(item: any, filterData: any) {
+    switch (true) {
+      case !!filterData[item] &&
+        item !== 'limit' &&
+        item !== 'offset' &&
+        item !== 'page':
+        return true
+      default:
+        return false
     }
   }
 
@@ -32,14 +57,6 @@ export default function useFilters(initialState, key) {
     sessionStorage.removeItem(key)
   }
 
-  useEffect(() => {
-    const prevFilters = getSessionFilters()
-    setFilters({
-      ...filters,
-      ...prevFilters,
-    })
-  }, [])
-
   const getSessionFilters = () => {
     try {
       if (sessionStorage.getItem(key)) {

package/src/theme/customCssBaseline.ts

@@ -1,50 +1,109 @@
-import { avenirFont } from '../assets/fonts/avenir'
+import {
+  avenirHeavy,
+  avenirHeavyObliquue,
+  avenirMedium,
+  avenirMediumObliquue,
+  avenirRegular,
+} from '../assets/fonts/avenir'
 import {
   lightPoppins,
   mediumPoppins,
   regularPoppins,
   semiboldPoppins,
+  lightPoppinsItalic,
+  mediumPoppinsItalic,
+  regularPoppinsItalic,
 } from '../assets/fonts/poppins'
 
-const uniCode =
-  'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF'
-
 export const customCssBaseline = `
+    :root{
+      --toastify-color-info: #3498db;
+      --toastify-color-success: #7EB872;
+      --toastify-color-warning: #f1c40f;
+      --toastify-color-error: #BC2C3D;
+    }
+
     html, body {
       font-size: 14px;
       font-family: Avenir, sans-serif;
       font-weight: 400;
     }
+    
+    @font-face {
+      font-family: Avenir;
+      src: url(${avenirRegular}) format('truetype');
+      font-display: swap;
+      font-weight: 400;
+    }
     @font-face {
       font-family: Avenir;
-      src: url(${avenirFont});
+      src: url(${avenirMedium}) format('truetype');
       font-display: swap;
+      font-weight: 500;
     }
+    @font-face {
+      font-family: Avenir;
+      src: url(${avenirMediumObliquue}) format('truetype');
+      font-display: swap;
+      font-weight: 500;
+      font-style: oblique;
+    }
+    @font-face {
+      font-family: Avenir;
+      src: url(${avenirHeavy}) format('truetype');
+      font-display: swap;
+      font-weight: 600;
+    }
+    @font-face {
+      font-family: Avenir;
+      src: url(${avenirHeavyObliquue}) format('truetype');
+      font-display: swap;
+      font-weight: 600;
+      font-style: oblique;
+    }
+
     @font-face {
       font-family: Poppins;
       src: url(${lightPoppins}) format('truetype');
-      unicodeRange: ${uniCode};
       font-display: swap;
       font-weight: 300;
     }
     @font-face {
       font-family: Poppins;
-      src: url(${mediumPoppins}) format('truetype');
-      unicodeRange: ${uniCode};
+      src: url(${lightPoppinsItalic}) format('truetype');
       font-display: swap;
-      font-weight: 500;
+      font-weight: 300;
+      font-style: italic;
     }
     @font-face {
       font-family: Poppins;
       src: url(${regularPoppins}) format('truetype');
-      unicodeRange: ${uniCode};
       font-display: swap;
       font-weight: 400;
     }
+    @font-face {
+      font-family: Poppins;
+      src: url(${regularPoppinsItalic}) format('truetype');
+      font-display: swap;
+      font-weight: 400;
+      font-style: italic;
+    }
+    @font-face {
+      font-family: Poppins;
+      src: url(${mediumPoppins}) format('truetype');
+      font-display: swap;
+      font-weight: 500;
+    }
+    @font-face {
+      font-family: Poppins;
+      src: url(${mediumPoppinsItalic}) format('truetype');
+      font-display: swap;
+      font-weight: 500;
+      font-style: italic;
+    }
     @font-face {
       font-family: Poppins;
       src: url(${semiboldPoppins}) format('truetype');
-      unicodeRange: ${uniCode};
       font-display: swap;
       font-weight: 600;
     }

package/src/theme/index.css

@@ -26,50 +26,3 @@
   --toastify-color-success: #7eb872;
   --toastify-color-warning: #f1c40f;
 }
-
-@font-face {
-  font-family: Avenir;
-  src: url('../assets/fonts/avenir/Avenir.ttc');
-}
-
-@font-face {
-  font-family: Poppins;
-  src: url('../assets/fonts/poppins/Poppins-SemiBold.otf');
-}
-@font-face {
-  font-family: Poppins;
-  src: url('../assets/fonts/poppins/Poppins-Medium.otf');
-}
-@font-face {
-  font-family: Poppins;
-  src: url('../assets/fonts/poppins/Poppins-Light.otf');
-}
-@font-face {
-  font-family: Poppins;
-  src: url('../assets/fonts/poppins/Poppins-Regular.otf');
-}
-
-.Toastify__toast {
-  border-radius: 10px;
-  padding: 0;
-}
-
-.Toastify__toast-body {
-  font-family: Poppins;
-  font-size: 16px;
-  line-height: 1.5;
-  color: #fff;
-  font-weight: 600;
-  padding: 0;
-  margin: 0;
-  height: 64px;
-  align-items: stretch;
-}
-.Toastify__toast-body > div:last-child {
-  align-self: center;
-  margin-left: 30px;
-}
-
-.Toastify__toast > button > svg {
-  display: none;
-}

package/src/theme/muiTheme.ts

@@ -135,7 +135,7 @@ const muiTheme = createTheme({
         root: {
           color: '#121212',
           fontSize: '14px',
-          fontWeight: 600,
+          fontWeight: 500,
           fontFamily: PRIMARY_FONT,
         },
         h1: {
@@ -167,12 +167,12 @@ const muiTheme = createTheme({
         },
         subtitle1: {
           fontSize: '14px',
-          fontWeight: 600,
+          fontWeight: 500,
           color: '#121212b3',
         },
         subtitle2: {
           fontSize: '13px',
-          fontWeight: 600,
+          fontWeight: 500,
           color: '#959595',
         },
       },

package/src/utils/logout.ts

@@ -1,4 +1,5 @@
 import Cookies from 'js-cookie'
+import { useConfirm } from '../components'
 import axios, { axiosErrorToast } from '../config/axios'
 import { isDevelopment } from '../constants'