@campxdev/shared 1.4.9 → 1.4.11

package/src/components/DrawerWrapper/DrawerWrapper.tsx

@@ -1,53 +1,53 @@
-import { createContext, useContext, useState } from 'react'
-import { DrawerTemplate } from './DrawerTemplate'
-
-interface IProps {
-  title: string
-  modalType?: 'dialog' | 'drawer'
-  content: ({ close }: { close: () => void }) => any
-}
-
-type ContextType = (props: IProps) => void
-
-const DialogContext = createContext<ContextType>(null)
-
-export default function DialogProvider({ children }) {
-  const [modal, setModal] = useState({
-    title: '',
-    open: false,
-    content: ({ close }) => null,
-    modalType: 'drawer',
-  })
-
-  const handleClose = () => {
-    setModal({
-      ...modal,
-      open: false,
-    })
-  }
-
-  const showModal = (props) => {
-    setModal({
-      ...modal,
-      open: true,
-      title: props.title,
-      content: props.content,
-      // modalType: props.modalType ?? 'drawer',
-    })
-  }
-
-  return (
-    <DialogContext.Provider value={showModal}>
-      {children}
-      <>
-        <DrawerTemplate
-          handleClose={handleClose}
-          modal={modal}
-          setModal={setModal}
-        />
-      </>
-    </DialogContext.Provider>
-  )
-}
-
-export const useModal = () => useContext(DialogContext)
+import { createContext, useContext, useState } from 'react'
+import { DrawerTemplate } from './DrawerTemplate'
+
+interface IProps {
+  title: string
+  modalType?: 'dialog' | 'drawer'
+  content: ({ close }: { close: () => void }) => any
+}
+
+type ContextType = (props: IProps) => void
+
+const DialogContext = createContext<ContextType>(null)
+
+export default function DialogProvider({ children }) {
+  const [modal, setModal] = useState({
+    title: '',
+    open: false,
+    content: ({ close }) => null,
+    modalType: 'drawer',
+  })
+
+  const handleClose = () => {
+    setModal({
+      ...modal,
+      open: false,
+    })
+  }
+
+  const showModal = (props) => {
+    setModal({
+      ...modal,
+      open: true,
+      title: props.title,
+      content: props.content,
+      // modalType: props.modalType ?? 'drawer',
+    })
+  }
+
+  return (
+    <DialogContext.Provider value={showModal}>
+      {children}
+      <>
+        <DrawerTemplate
+          handleClose={handleClose}
+          modal={modal}
+          setModal={setModal}
+        />
+      </>
+    </DialogContext.Provider>
+  )
+}
+
+export const useModal = () => useContext(DialogContext)

package/src/components/DropDownButton/DropDownButton.tsx

@@ -1,177 +1,177 @@
-import { KeyboardArrowDown, MoreVert } from '@mui/icons-material'
-import {
-  ButtonProps,
-  CircularProgress,
-  IconButtonProps,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  MenuListProps,
-  MenuProps,
-} from '@mui/material'
-import { ReactNode, useState } from 'react'
-import {
-  StyledDropDownButton,
-  StyledIconButton,
-  StyledMenu,
-  StyledMenuItem,
-} from './styles'
-
-type MenuItem =
-  | {
-      label: string | ReactNode
-      icon?: ReactNode
-      onClick: (props?: any) => any
-    }
-  | { customButton?: ReactNode }
-
-interface DropDownButtonProps {
-  icon?: {
-    icon: ReactNode
-    iconProps?: IconButtonProps
-    outlined?: boolean
-  }
-  button?: {
-    label?: string
-    buttonProps?: ButtonProps
-  }
-  anchor?: (props: { open: () => void }) => ReactNode
-  loading?: boolean
-  menu: MenuItem[]
-  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>
-    )
-  }
-}
-
-const DropDownButton = ({
-  button,
-  icon = defaultIcon,
-  menu = [],
-  menuProps,
-  menuListProps,
-  loading = false,
-  anchor,
-}: DropDownButtonProps) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const open = Boolean(anchorEl)
-
-  const handleClick = (event: any) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  return (
-    <>
-      <RenderAnchor
-        anchor={anchor}
-        loading={loading}
-        button={button}
-        icon={icon}
-        handleClick={handleClick}
-      />
-      <StyledMenu
-        elevation={0}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        PaperProps={{
-          elevation: 0,
-        }}
-        MenuListProps={{ ...menuListProps }}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        transitionDuration={150}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'right',
-        }}
-        {...menuProps}
-      >
-        <RenderMenuItems menu={menu} handleClose={handleClose} />
-      </StyledMenu>
-    </>
-  )
-}
-
-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()
-              }}
-            />
-          )}
-        </>
-      ))}
-    </>
-  )
-}
+import { KeyboardArrowDown, MoreVert } from '@mui/icons-material'
+import {
+  ButtonProps,
+  CircularProgress,
+  IconButtonProps,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  MenuListProps,
+  MenuProps,
+} from '@mui/material'
+import { ReactNode, useState } from 'react'
+import {
+  StyledDropDownButton,
+  StyledIconButton,
+  StyledMenu,
+  StyledMenuItem,
+} from './styles'
+
+type MenuItem =
+  | {
+      label: string | ReactNode
+      icon?: ReactNode
+      onClick: (props?: any) => any
+    }
+  | { customButton?: ReactNode }
+
+interface DropDownButtonProps {
+  icon?: {
+    icon: ReactNode
+    iconProps?: IconButtonProps
+    outlined?: boolean
+  }
+  button?: {
+    label?: string
+    buttonProps?: ButtonProps
+  }
+  anchor?: (props: { open: () => void }) => ReactNode
+  loading?: boolean
+  menu: MenuItem[]
+  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>
+    )
+  }
+}
+
+const DropDownButton = ({
+  button,
+  icon = defaultIcon,
+  menu = [],
+  menuProps,
+  menuListProps,
+  loading = false,
+  anchor,
+}: DropDownButtonProps) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      <RenderAnchor
+        anchor={anchor}
+        loading={loading}
+        button={button}
+        icon={icon}
+        handleClick={handleClick}
+      />
+      <StyledMenu
+        elevation={0}
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        PaperProps={{
+          elevation: 0,
+        }}
+        MenuListProps={{ ...menuListProps }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transitionDuration={150}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        {...menuProps}
+      >
+        <RenderMenuItems menu={menu} handleClose={handleClose} />
+      </StyledMenu>
+    </>
+  )
+}
+
+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()
+              }}
+            />
+          )}
+        </>
+      ))}
+    </>
+  )
+}

package/src/components/DropDownButton/index.tsx

@@ -1 +1 @@
-export { default } from './DropDownButton'
+export { default } from './DropDownButton'

package/src/components/DropDownButton/styles.tsx

@@ -1,56 +1,56 @@
-import { Button, IconButton, Menu, MenuItem, styled } from '@mui/material'
-
-export const StyledIconButton = styled(IconButton, {
-  shouldForwardProp: (prop) => prop !== 'outlined',
-})<{ outlined?: boolean; size: 'small' | 'regular' }>(
-  ({ theme, outlined, size }) => ({
-    ...(outlined && {
-      border: `1px solid ${theme.palette.primary.main}`,
-      borderRadius: '5px',
-      height: '40px',
-      width: '40px',
-      ...(size === 'small' && {}),
-    }),
-  }),
-)
-
-export const StyledMenuItem = styled(MenuItem)(({}) => ({
-  display: 'flex',
-  alignItems: 'center',
-  height: '60px',
-  '& .MuiListItemIcon-root': {
-    minWidth: '24px',
-  },
-  '& .MuiSvgIcon-root': {
-    height: '18px',
-    width: '18px',
-  },
-}))
-
-export const StyledDropDownButton = styled(Button)(({}) => ({
-  padding: '0 15px',
-  minWidth: '180px',
-  justifyContent: 'space-between',
-}))
-
-export const StyledMenu = styled(Menu)(({ theme }) => ({
-  '& .MuiPaper-root': {
-    borderRadius: '10px',
-    border: '1px solid #1212121A',
-    marginTop: '10px',
-    boxShadow: '0px 4px 16px #0000000F',
-  },
-  '& .MuiList-root': {
-    minWidth: '240px',
-    padding: 0,
-    '& li': {
-      borderBottom: theme.borders.grayLight,
-      ':hover': {
-        backgroundColor: 'rgba(0, 0, 0, 0.025)',
-      },
-    },
-    '& > :last-child': {
-      borderBottom: 'none',
-    },
-  },
-}))
+import { Button, IconButton, Menu, MenuItem, styled } from '@mui/material'
+
+export const StyledIconButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== 'outlined',
+})<{ outlined?: boolean; size: 'small' | 'regular' }>(
+  ({ theme, outlined, size }) => ({
+    ...(outlined && {
+      border: `1px solid ${theme.palette.primary.main}`,
+      borderRadius: '5px',
+      height: '40px',
+      width: '40px',
+      ...(size === 'small' && {}),
+    }),
+  }),
+)
+
+export const StyledMenuItem = styled(MenuItem)(({}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  height: '60px',
+  '& .MuiListItemIcon-root': {
+    minWidth: '24px',
+  },
+  '& .MuiSvgIcon-root': {
+    height: '18px',
+    width: '18px',
+  },
+}))
+
+export const StyledDropDownButton = styled(Button)(({}) => ({
+  padding: '0 15px',
+  minWidth: '180px',
+  justifyContent: 'space-between',
+}))
+
+export const StyledMenu = styled(Menu)(({ theme }) => ({
+  '& .MuiPaper-root': {
+    borderRadius: '10px',
+    border: '1px solid #1212121A',
+    marginTop: '10px',
+    boxShadow: '0px 4px 16px #0000000F',
+  },
+  '& .MuiList-root': {
+    minWidth: '240px',
+    padding: 0,
+    '& li': {
+      borderBottom: theme.borders.grayLight,
+      ':hover': {
+        backgroundColor: 'rgba(0, 0, 0, 0.025)',
+      },
+    },
+    '& > :last-child': {
+      borderBottom: 'none',
+    },
+  },
+}))

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -1,28 +1,28 @@
-import { ReactNode } from 'react'
-import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'
-import { QueryErrorResetBoundary } from 'react-query'
-import { useLocation } from 'react-router-dom'
-import ErrorFallback from './ErrorFallback'
-
-export default function ErrorBoundary({
-  children,
-  resetKey,
-}: {
-  children: ReactNode
-  resetKey?: string
-}) {
-  const location = useLocation()
-  return (
-    <QueryErrorResetBoundary>
-      {({ reset }) => (
-        <ReactErrorBoundary
-          key={resetKey ?? location?.pathname}
-          fallbackRender={ErrorFallback}
-          onReset={reset}
-        >
-          {children}
-        </ReactErrorBoundary>
-      )}
-    </QueryErrorResetBoundary>
-  )
-}
+import { ReactNode } from 'react'
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'
+import { QueryErrorResetBoundary } from 'react-query'
+import { useLocation } from 'react-router-dom'
+import ErrorFallback from './ErrorFallback'
+
+export default function ErrorBoundary({
+  children,
+  resetKey,
+}: {
+  children: ReactNode
+  resetKey?: string
+}) {
+  const location = useLocation()
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ReactErrorBoundary
+          key={resetKey ?? location?.pathname}
+          fallbackRender={ErrorFallback}
+          onReset={reset}
+        >
+          {children}
+        </ReactErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  )
+}