@campxdev/shared 1.4.18 → 1.4.20

package/package.json

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

package/src/components/DropDownButton/AnchorElement.tsx

@@ -0,0 +1,44 @@
+import { KeyboardArrowDown } from '@mui/icons-material'
+import { CircularProgress } from '@mui/material'
+import { StyledDropDownButton, StyledIconButton } from './styles'
+
+export default function AnchorElement({
+  button,
+  icon,
+  handleClick,
+  loading,
+  anchor,
+}) {
+  if (anchor) return <>{anchor({ open: handleClick })}</>
+
+  if (button)
+    return (
+      <StyledDropDownButton
+        onClick={handleClick}
+        variant="outlined"
+        disabled={loading}
+        endIcon={
+          loading ? (
+            <CircularProgress size="20px" thickness={1.7} />
+          ) : (
+            <KeyboardArrowDown />
+          )
+        }
+        {...button?.buttonProps}
+      >
+        {button?.label}
+      </StyledDropDownButton>
+    )
+
+  if (!button && !anchor) {
+    return (
+      <StyledIconButton
+        outlined={icon?.outlined ?? false}
+        onClick={handleClick}
+        {...icon.iconProps}
+      >
+        {icon.icon}
+      </StyledIconButton>
+    )
+  }
+}

package/src/components/DropDownButton/DropDownButton.tsx

@@ -1,30 +1,21 @@
-import { KeyboardArrowDown, MoreVert } from '@mui/icons-material'
+import { MoreVert } from '@mui/icons-material'
 import {
   ButtonProps,
-  CircularProgress,
   IconButtonProps,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
   MenuListProps,
   MenuProps,
 } from '@mui/material'
 import { ReactNode, useState } from 'react'
+import { useImmer } from 'use-immer'
+import { CustomDialog } from '../ModalButtons/DialogButton'
+import { CustomDrawer } from '../ModalButtons/DrawerButton'
+import AnchorElement from './AnchorElement'
 import {
-  StyledDropDownButton,
-  StyledIconButton,
-  StyledMenu,
-  StyledMenuItem,
-} from './styles'
-
-type MenuItem =
-  | {
-      label: string | ReactNode
-      icon?: ReactNode
-      onClick: (props?: any) => any
-    }
-  | { customButton?: ReactNode }
+  IMenuItemProps,
+  MenuItemType,
+  RenderMenuItem,
+} from './DropdownMenuItem'
+import { StyledMenu } from './styles'
 
 interface DropDownButtonProps {
   icon?: {
@@ -38,48 +29,20 @@ interface DropDownButtonProps {
   }
   anchor?: (props: { open: () => void }) => ReactNode
   loading?: boolean
-  menu: MenuItem[]
+  menu: IMenuItemProps[]
   menuProps?: Omit<MenuProps, 'open'>
   menuListProps?: MenuListProps
 }
+
 const defaultIcon = {
   icon: <MoreVert color="primary" />,
   outlined: true,
 }
 
-const RenderAnchor = ({ button, icon, handleClick, loading, anchor }) => {
-  if (anchor) return <>{anchor({ open: handleClick })}</>
-
-  if (button)
-    return (
-      <StyledDropDownButton
-        onClick={handleClick}
-        variant="outlined"
-        disabled={loading}
-        endIcon={
-          loading ? (
-            <CircularProgress size="20px" thickness={1.7} />
-          ) : (
-            <KeyboardArrowDown />
-          )
-        }
-        {...button?.buttonProps}
-      >
-        {button?.label}
-      </StyledDropDownButton>
-    )
-
-  if (!button && !anchor) {
-    return (
-      <StyledIconButton
-        outlined={icon?.outlined ?? false}
-        onClick={handleClick}
-        {...icon.iconProps}
-      >
-        {icon.icon}
-      </StyledIconButton>
-    )
-  }
+interface IModalState {
+  open: boolean
+  content: any
+  type: MenuItemType
 }
 
 const DropDownButton = ({
@@ -92,19 +55,41 @@ const DropDownButton = ({
   anchor,
 }: DropDownButtonProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const open = Boolean(anchorEl)
+  const [open, setOpen] = useState(false)
+
+  const [modalState, setModalState] = useImmer<IModalState>({
+    open: false,
+    content: null,
+    type: 'drawer',
+  })
 
   const handleClick = (event: any) => {
     setAnchorEl(event.currentTarget)
+    setOpen(true)
   }
 
   const handleClose = () => {
     setAnchorEl(null)
+    setOpen(false)
+  }
+
+  const onModalClose = () => {
+    setModalState((s) => {
+      s.open = false
+      s.content = null
+    })
+  }
+  const onModalOpen = (item) => {
+    setModalState((s) => {
+      s.content = item.content
+      s.open = true
+      s.type = item.actionType
+    })
   }
 
   return (
     <>
-      <RenderAnchor
+      <AnchorElement
         anchor={anchor}
         loading={loading}
         button={button}
@@ -115,6 +100,7 @@ const DropDownButton = ({
         elevation={0}
         id="basic-menu"
         anchorEl={anchorEl}
+        keepMounted
         open={open}
         onClose={handleClose}
         PaperProps={{
@@ -132,46 +118,58 @@ const DropDownButton = ({
         }}
         {...menuProps}
       >
-        <RenderMenuItems menu={menu} handleClose={handleClose} />
+        {menu.map((item, index) => (
+          <RenderMenuItem
+            onModalOpen={() => onModalOpen(item)}
+            modalState={modalState}
+            key={index}
+            handleClose={handleClose}
+            label={item.label}
+            actionType={item?.actionType}
+            onClick={item?.onClick}
+          />
+        ))}
       </StyledMenu>
+      {modalState?.open && (
+        <RenderContent
+          onClose={onModalClose}
+          modalState={modalState}
+          contentType={modalState.type}
+        />
+      )}
     </>
   )
 }
 
-DropDownButton.MenuItem = ({ icon, label, ...props }) => {
-  return (
-    <StyledMenuItem
-      sx={{ minWidth: '120px', width: '100%', ...props?.sx }}
-      {...props}
-    >
-      {icon && <ListItemIcon>{icon}</ListItemIcon>}
-      <ListItemText>{label}</ListItemText>
-    </StyledMenuItem>
-  )
-}
-
 export default DropDownButton
 
-const RenderMenuItems = ({ menu, handleClose }) => {
-  return (
-    <>
-      {menu.map((item, index) => (
-        <>
-          {item?.customButton ? (
-            item.customButton
-          ) : (
-            <DropDownButton.MenuItem
-              icon={item?.icon}
-              label={item?.label}
-              key={index}
-              onClick={() => {
-                handleClose()
-                item.onClick()
-              }}
-            />
-          )}
-        </>
-      ))}
-    </>
-  )
+const RenderContent = ({
+  contentType,
+  modalState,
+  onClose,
+}: {
+  contentType: MenuItemType
+  modalState: any
+  onClose: () => void
+}) => {
+  if (contentType === 'dialog')
+    return (
+      <CustomDialog
+        onClose={onClose}
+        open={modalState.open}
+        content={modalState.content}
+        title="Dialog Button"
+      />
+    )
+
+  if (contentType === 'drawer')
+    return (
+      <CustomDrawer
+        onClose={onClose}
+        open={modalState.open}
+        content={modalState.content}
+        title="Dialog Button"
+      />
+    )
+  return <></>
 }

package/src/components/DropDownButton/DropdownMenuItem.tsx

@@ -0,0 +1,100 @@
+import { ListItemIcon, ListItemText, styled } from '@mui/material'
+import { ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+import { DrawerButtonProps } from '../ModalButtons/DrawerButton'
+import { StyledMenuItem } from './styles'
+
+const StyledLink = styled(Link)(({ theme }) => ({
+  display: 'block',
+  textTransform: 'none',
+  textDecoration: 'none',
+}))
+
+export type MenuItemType = 'normal' | 'dialog' | 'drawer' | 'link'
+
+export type MenuItemButtonProps = {
+  icon?: ReactNode
+  label: ReactNode
+  onClick: () => void
+  link?: {
+    to: string
+    target?: '_self' | '_blank'
+  }
+}
+
+const MenuItemButton = ({
+  icon,
+  label,
+  onClick,
+  ...props
+}: MenuItemButtonProps) => {
+  return (
+    <StyledMenuItem
+      sx={{ minWidth: '180px', width: '100%' }}
+      onClick={onClick}
+      {...props}
+    >
+      {icon && <ListItemIcon>{icon}</ListItemIcon>}
+      <ListItemText>{label}</ListItemText>
+    </StyledMenuItem>
+  )
+}
+
+export type IMenuItemProps = Omit<MenuItemButtonProps, 'onClick'> & {
+  content?: DrawerButtonProps['content']
+  contentTitle?: ReactNode
+  actionType?: MenuItemType
+  onClick?: () => void
+}
+
+export interface IRenderMenuItemProps extends IMenuItemProps {
+  handleClose: () => void
+  modalState: any
+  onModalOpen: () => void
+}
+
+export const RenderMenuItem = ({
+  onClick,
+  actionType = 'normal',
+  handleClose,
+  modalState,
+  onModalOpen,
+  link = { target: '_blank', to: '' },
+  ...props
+}: IRenderMenuItemProps) => {
+  const renderMenuItem: Record<MenuItemType, ReactNode> = {
+    normal: (
+      <MenuItemButton
+        {...props}
+        onClick={() => {
+          onClick()
+          handleClose()
+        }}
+      />
+    ),
+    dialog: (
+      <MenuItemButton
+        {...props}
+        onClick={() => {
+          onModalOpen()
+          handleClose()
+        }}
+      />
+    ),
+    drawer: (
+      <MenuItemButton
+        {...props}
+        onClick={() => {
+          onModalOpen()
+          handleClose()
+        }}
+      />
+    ),
+    link: (
+      <StyledLink to={link?.to} target={link.target}>
+        <MenuItemButton onClick={() => {}} {...props} />
+      </StyledLink>
+    ),
+  }
+  return <>{renderMenuItem[actionType]}</>
+}

package/src/components/DropDownButton/styles.tsx

@@ -51,6 +51,9 @@ export const StyledMenu = styled(Menu)(({ theme }) => ({
     },
     '& > :last-child': {
       borderBottom: 'none',
+      '& li': {
+        borderBottom: 'none',
+      },
     },
   },
 }))

package/src/components/FilterComponents/FilterButton.tsx

@@ -5,6 +5,7 @@ const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
   ({ theme, size }) => ({
     width: size === 'regular' ? '40px' : '50px',
     height: size === 'regular' ? '40px' : '50px',
+    flexShrink: 0,
     border: theme.borders.grayLight,
     display: 'flex',
     alignItems: 'center',

package/src/components/Input/DateRangePicker.tsx

@@ -1,7 +1,8 @@
-import { Box, styled, SvgIcon } from '@mui/material'
-import { useEffect, useState } from 'react'
+import { Box, BoxProps, FormHelperText, styled, SvgIcon } from '@mui/material'
+import { ReactNode, useEffect, useState } from 'react'
 import { DateRangeIcon } from '../IconButtons'
 import DateTimePicker from './DateTimePicker'
+import FormLabel from './FormLabel'
 
 const StyledDateRangePicker = styled(Box)<{ size: 'small' | 'medium' }>(
   ({ theme, size }) => ({
@@ -29,56 +30,76 @@ const StyledDateRangePicker = styled(Box)<{ size: 'small' | 'medium' }>(
   }),
 )
 
-interface Props {
-  value: [Date, Date]
-  onChange: (value: [Date, Date]) => void
+interface IDateRangePickerProps {
+  value: {
+    start: Date
+    end: Date
+  }
+  onChange: (value: { start: Date; end: Date }) => void
   enableTime?: boolean
   size?: 'small' | 'medium'
+  containerProps?: BoxProps
+  label?: ReactNode
+  required?: boolean
+  name?: string
+  error?: boolean
+  helperText?: string
 }
 export default function DateRangePicker({
   value,
   onChange,
   enableTime = false,
   size = 'medium',
-}: Props) {
-  const [state, setState] = useState([null, null])
+  containerProps,
+  required,
+  error,
+  helperText,
+  label,
+  name,
+}: IDateRangePickerProps) {
+  const [state, setState] = useState({
+    start: null,
+    end: null,
+  })
 
   useEffect(() => {
     setState(value)
   }, [value])
 
   return (
-    <StyledDateRangePicker size={size}>
-      <DateTimePicker
-        value={state[0]}
-        placeholder="From Date"
-        onChange={(value) => {
-          setState((prev) => [value, prev[1]])
-          onChange([value, state[1]])
-        }}
-        enableTime={enableTime}
-        inputProps={{
-          InputProps: null,
-          size: size,
-        }}
+    <Box width={'100%'} {...containerProps}>
+      <FormLabel
+        required={required}
+        name={name ?? 'date-range-picker'}
+        label={label}
       />
-      <SvgIcon>
-        <DateRangeIcon />
-      </SvgIcon>
-      <DateTimePicker
-        value={state[1]}
-        minDate={state[0]}
-        placeholder="To Date"
-        enableTime={enableTime}
-        onChange={(value) => {
-          setState((prev) => [prev[0], value])
-          onChange([state[0], value])
-        }}
-        inputProps={{
-          InputProps: null,
-          size: size,
-        }}
-      />
-    </StyledDateRangePicker>
+      <StyledDateRangePicker size={size}>
+        <DateTimePicker
+          placeholder="From Date"
+          value={state.start}
+          onChange={(value) => {
+            setState((prev) => ({ ...prev, start: value }))
+            onChange({ ...state, start: value })
+          }}
+          enableTime={enableTime}
+          inputProps={{ InputProps: null, size: size }}
+        />
+        <SvgIcon>
+          <DateRangeIcon />
+        </SvgIcon>
+        <DateTimePicker
+          minDate={state[0]}
+          placeholder="To Date"
+          enableTime={enableTime}
+          value={state.end}
+          onChange={(value) => {
+            setState((prev) => ({ ...prev, end: value }))
+            onChange({ ...state, end: value })
+          }}
+          inputProps={{ InputProps: null, size: size }}
+        />
+      </StyledDateRangePicker>
+      <>{error && <FormHelperText>{helperText}</FormHelperText>}</>
+    </Box>
   )
 }

package/src/components/Layout/Header/UserBox.tsx

@@ -33,39 +33,39 @@ export default function UserBox({
         )}
         menu={[
           ...actions,
-          {
-            customButton: (
-              <DialogButton
-                dialogProps={{
-                  maxWidth: 'xl',
-                }}
-                title="My Tickets"
-                anchor={({ open }) => (
-                  <DropDownButton.MenuItem
-                    onClick={open}
-                    icon={<ConfirmationNumberOutlinedIcon />}
-                    label="My Tickets"
-                  />
-                )}
-                content={({ close }) => <MyTickets close={close} />}
-              />
-            ),
-          },
-          {
-            customButton: (
-              <DialogButton
-                title="Change Password"
-                anchor={({ open }) => (
-                  <DropDownButton.MenuItem
-                    onClick={open}
-                    icon={<HttpsOutlined />}
-                    label="Change Password"
-                  />
-                )}
-                content={({ close }) => <ChangePassword close={close} />}
-              />
-            ),
-          },
+          // {
+          //   customButton: (
+          //     <DialogButton
+          //       dialogProps={{
+          //         maxWidth: 'xl',
+          //       }}
+          //       title="My Tickets"
+          //       anchor={({ open }) => (
+          //         <DropDownButton.MenuItem
+          //           onClick={open}
+          //           icon={<ConfirmationNumberOutlinedIcon />}
+          //           label="My Tickets"
+          //         />
+          //       )}
+          //       content={({ close }) => <MyTickets close={close} />}
+          //     />
+          //   ),
+          // },
+          // {
+          //   customButton: (
+          //     <DialogButton
+          //       title="Change Password"
+          //       anchor={({ open }) => (
+          //         <DropDownButton.MenuItem
+          //           onClick={open}
+          //           icon={<HttpsOutlined />}
+          //           label="Change Password"
+          //         />
+          //       )}
+          //       content={({ close }) => <ChangePassword close={close} />}
+          //     />
+          //   ),
+          // },
           {
             label: 'Logout',
             icon: <ExitToAppOutlined />,

package/src/components/ModalButtons/DialogButton.tsx

@@ -10,6 +10,7 @@ import {
 } from '@mui/material'
 import { TransitionProps } from '@mui/material/transitions'
 import { forwardRef, ReactNode, useState } from 'react'
+import { SCROLLBAR_DARK } from '../../theme/muiTheme'
 
 const StyledDialogHeader = styled(Box)(() => ({
   height: '64px',
@@ -24,6 +25,9 @@ const StyledDialogHeader = styled(Box)(() => ({
 const StyledDialogContent = styled(Box)(() => ({
   width: '100%',
   padding: '1rem',
+  maxHeight: 'calc(100vh - 64px)',
+  overflow: 'auto',
+  ...SCROLLBAR_DARK,
 }))
 
 export const Transition = forwardRef(function Transition(
@@ -66,28 +70,52 @@ export default function DialogButton({
       {anchor({
         open: onOpen,
       })}
-      <Dialog
-        PaperProps={{ elevation: 2, sx: { borderRadius: '10px' } }}
-        fullWidth
-        onClose={onClose}
+      <CustomDialog
         open={open}
-        transitionDuration={140}
-        TransitionComponent={Transition}
-        sx={{
-          '& .MuiBackdrop-root': {
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          },
-        }}
-        {...dialogProps}
-      >
-        <StyledDialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <IconButton onClick={onClose} sx={{ color: 'black' }}>
-            <Close />
-          </IconButton>
-        </StyledDialogHeader>
-        <StyledDialogContent>{content({ close: onClose })}</StyledDialogContent>
-      </Dialog>
+        content={content}
+        dialogProps={dialogProps}
+        onClose={onClose}
+        title={title}
+      />
     </>
   )
 }
+
+interface CustomDialogProps {
+  content: (props: { close: () => void }) => ReactNode
+  title: string | ReactNode
+  dialogProps?: Omit<DialogProps, 'open'>
+  onClose: () => void
+  open: boolean
+}
+
+export const CustomDialog = ({
+  onClose,
+  dialogProps,
+  title,
+  content,
+  open,
+}: CustomDialogProps) => {
+  return (
+    <Dialog
+      PaperProps={{ elevation: 2, sx: { borderRadius: '10px' } }}
+      fullWidth
+      onClose={onClose}
+      open={open}
+      transitionDuration={140}
+      TransitionComponent={Transition}
+      sx={{
+        '& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
+      }}
+      {...dialogProps}
+    >
+      <StyledDialogHeader>
+        <DialogTitle>{title}</DialogTitle>
+        <IconButton onClick={onClose} sx={{ color: 'black' }}>
+          <Close />
+        </IconButton>
+      </StyledDialogHeader>
+      <StyledDialogContent>{content({ close: onClose })}</StyledDialogContent>
+    </Dialog>
+  )
+}

package/src/components/ModalButtons/DrawerButton.tsx

@@ -4,10 +4,12 @@ import {
   ButtonProps,
   DialogTitle,
   Drawer,
+  DrawerProps,
   IconButton,
   styled,
 } from '@mui/material'
 import { ReactNode, useState } from 'react'
+import { SCROLLBAR_DARK } from '../../theme/muiTheme'
 
 const StyledDrawerHeader = styled(Box)(({ theme }) => ({
   height: '64px',
@@ -24,9 +26,10 @@ const StyledDrawerContent = styled(Box)(({ theme }) => ({
   height: 'calc(100vh - 64px)',
   overflowY: 'auto',
   paddingBottom: '4rem',
+  ...SCROLLBAR_DARK,
 }))
 
-interface DrawerButtonProps {
+export interface DrawerButtonProps {
   anchor: (props: { open: () => void }) => ReactNode
   content: (props: { close: () => void }) => ReactNode
   title: string | ReactNode
@@ -51,34 +54,60 @@ export default function DrawerButton({
   return (
     <>
       {anchor({ open: onOpen })}
-      <Drawer
-        anchor="right"
-        elevation={2}
+      <CustomDrawer
+        content={content}
         onClose={onClose}
         open={open}
-        PaperProps={{
-          elevation: 2,
-        }}
-        sx={{
-          zIndex: 500,
-          '& .MuiDrawer-paper': {
-            boxSizing: 'border-box',
-            width: 600,
-          },
-          '& .MuiBackdrop-root': {
-            backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          },
-        }}
-        transitionDuration={140}
-      >
-        <StyledDrawerHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <IconButton onClick={onClose} sx={{ color: 'black' }}>
-            <Close />
-          </IconButton>
-        </StyledDrawerHeader>
-        <StyledDrawerContent>{content({ close: onClose })}</StyledDrawerContent>
-      </Drawer>
+        title={title}
+      />
     </>
   )
 }
+
+interface CustomDrawerProps {
+  content: (props: { close: () => void }) => ReactNode
+  title: string | ReactNode
+  drawerProps?: Omit<DrawerProps, 'open'>
+  onClose: () => void
+  open: boolean
+}
+
+export const CustomDrawer = ({
+  onClose,
+  drawerProps,
+  title,
+  content,
+  open,
+}: CustomDrawerProps) => {
+  return (
+    <Drawer
+      anchor="right"
+      elevation={2}
+      onClose={onClose}
+      open={open}
+      PaperProps={{
+        elevation: 2,
+      }}
+      sx={{
+        zIndex: 500,
+        '& .MuiDrawer-paper': {
+          boxSizing: 'border-box',
+          width: 600,
+        },
+        '& .MuiBackdrop-root': {
+          backgroundColor: 'rgba(0, 0, 0, 0.4)',
+        },
+      }}
+      transitionDuration={140}
+      {...drawerProps}
+    >
+      <StyledDrawerHeader>
+        <DialogTitle>{title}</DialogTitle>
+        <IconButton onClick={onClose} sx={{ color: 'black' }}>
+          <Close />
+        </IconButton>
+      </StyledDrawerHeader>
+      <StyledDrawerContent>{content({ close: onClose })}</StyledDrawerContent>
+    </Drawer>
+  )
+}

package/src/theme/muiTheme.ts

@@ -10,6 +10,38 @@ const borderRadius = {
 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',