@campxdev/shared 1.4.19 → 1.4.21

package/src/components/MediaRow/MediaRow.tsx

@@ -1,69 +1,69 @@
-import { Delete } from '@mui/icons-material'
-import { Box, IconButton, styled, Typography, Stack } from '@mui/material'
-import Image from '../Image'
-// import { Media } from 'components/UploadButton/UploadButton'
-
-interface MediaRowProps {
-  list: any[]
-  onDelete?: (mediaKey: string) => void
-}
-
-export default function MediaRow({ list, onDelete }: MediaRowProps) {
-  console.log(list, 'list')
-  return (
-    <Box sx={{ display: 'flex', gap: '1rem', width: '100%', flexWrap: 'wrap' }}>
-      {list.map((item, index) => (
-        <>{rednerMediaCard(item, onDelete)}</>
-      ))}
-    </Box>
-  )
-}
-
-const rednerMediaCard = (item: any, onDelete?: (mediaKey: string) => void) => {
-  switch (item?.type) {
-    case 'image':
-      return (
-        <StyledImageContainer>
-          <IconButton
-            size="small"
-            color="error"
-            onClick={() => {
-              onDelete(item?.key)
-            }}
-          >
-            <Delete fontSize="small" />
-          </IconButton>
-          <Image src={item?.url} height={120} width={150} alt={''} />
-        </StyledImageContainer>
-      )
-    case 'file':
-      return (
-        <Stack
-          direction={'row'}
-          alignItems="center"
-          justifyContent={'space-between'}
-          gap={'10px'}
-        >
-          <Typography>{item?.fileName}</Typography>
-          <IconButton color="error">
-            <Delete fontSize="small" />
-          </IconButton>
-        </Stack>
-      )
-
-    default:
-      break
-  }
-}
-
-const StyledImageContainer = styled(Box)(({ theme }) => ({
-  border: theme.borders.grayLight,
-  borderRadius: '10px',
-  padding: '0.7rem',
-  position: 'relative',
-  '& > button': {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-  },
-}))
+import { Delete } from '@mui/icons-material'
+import { Box, IconButton, styled, Typography, Stack } from '@mui/material'
+import Image from '../Image'
+// import { Media } from 'components/UploadButton/UploadButton'
+
+interface MediaRowProps {
+  list: any[]
+  onDelete?: (mediaKey: string) => void
+}
+
+export default function MediaRow({ list, onDelete }: MediaRowProps) {
+  console.log(list, 'list')
+  return (
+    <Box sx={{ display: 'flex', gap: '1rem', width: '100%', flexWrap: 'wrap' }}>
+      {list.map((item, index) => (
+        <>{rednerMediaCard(item, onDelete)}</>
+      ))}
+    </Box>
+  )
+}
+
+const rednerMediaCard = (item: any, onDelete?: (mediaKey: string) => void) => {
+  switch (item?.type) {
+    case 'image':
+      return (
+        <StyledImageContainer>
+          <IconButton
+            size="small"
+            color="error"
+            onClick={() => {
+              onDelete(item?.key)
+            }}
+          >
+            <Delete fontSize="small" />
+          </IconButton>
+          <Image src={item?.url} height={120} width={150} alt={''} />
+        </StyledImageContainer>
+      )
+    case 'file':
+      return (
+        <Stack
+          direction={'row'}
+          alignItems="center"
+          justifyContent={'space-between'}
+          gap={'10px'}
+        >
+          <Typography>{item?.fileName}</Typography>
+          <IconButton color="error">
+            <Delete fontSize="small" />
+          </IconButton>
+        </Stack>
+      )
+
+    default:
+      break
+  }
+}
+
+const StyledImageContainer = styled(Box)(({ theme }) => ({
+  border: theme.borders.grayLight,
+  borderRadius: '10px',
+  padding: '0.7rem',
+  position: 'relative',
+  '& > button': {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+}))

package/src/components/MediaRow/index.tsx

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

package/src/components/ModalButtons/DialogButton.tsx

@@ -1,93 +1,121 @@
-import { Close } from '@mui/icons-material'
-import {
-  Box,
-  Dialog,
-  DialogProps,
-  DialogTitle,
-  Grow,
-  IconButton,
-  styled,
-} from '@mui/material'
-import { TransitionProps } from '@mui/material/transitions'
-import { forwardRef, ReactNode, useState } from 'react'
-
-const StyledDialogHeader = styled(Box)(() => ({
-  height: '64px',
-  backgroundColor: '#f7f7f7',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'end',
-  padding: '0.6rem 1rem',
-  paddingBottom: '10px',
-}))
-
-const StyledDialogContent = styled(Box)(() => ({
-  width: '100%',
-  padding: '1rem',
-}))
-
-export const Transition = forwardRef(function Transition(
-  props: TransitionProps & {
-    children: React.ReactElement
-  },
-  ref: React.Ref<unknown>,
-) {
-  return <Grow timeout={1000} ref={ref} {...props} />
-})
-
-interface DrawerButtonProps {
-  anchor: (props: { open: () => void }) => ReactNode
-  content: (props: { close: () => void }) => ReactNode
-  title: string | ReactNode
-  dialogProps?: Omit<DialogProps, 'open'>
-  onDialogClose?: () => void
-}
-
-export default function DialogButton({
-  content,
-  title,
-  dialogProps,
-  onDialogClose,
-  anchor,
-}: DrawerButtonProps) {
-  const [open, setOpen] = useState(false)
-
-  const onClose = () => {
-    onDialogClose && onDialogClose()
-    setOpen(false)
-  }
-
-  const onOpen = () => {
-    setOpen(true)
-  }
-
-  return (
-    <>
-      {anchor({
-        open: onOpen,
-      })}
-      <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>
-    </>
-  )
-}
+import { Close } from '@mui/icons-material'
+import {
+  Box,
+  Dialog,
+  DialogProps,
+  DialogTitle,
+  Grow,
+  IconButton,
+  styled,
+} 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',
+  backgroundColor: '#f7f7f7',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'end',
+  padding: '0.6rem 1rem',
+  paddingBottom: '10px',
+}))
+
+const StyledDialogContent = styled(Box)(() => ({
+  width: '100%',
+  padding: '1rem',
+  maxHeight: 'calc(100vh - 64px)',
+  overflow: 'auto',
+  ...SCROLLBAR_DARK,
+}))
+
+export const Transition = forwardRef(function Transition(
+  props: TransitionProps & {
+    children: React.ReactElement
+  },
+  ref: React.Ref<unknown>,
+) {
+  return <Grow timeout={1000} ref={ref} {...props} />
+})
+
+interface DrawerButtonProps {
+  anchor: (props: { open: () => void }) => ReactNode
+  content: (props: { close: () => void }) => ReactNode
+  title: string | ReactNode
+  dialogProps?: Omit<DialogProps, 'open'>
+  onDialogClose?: () => void
+}
+
+export default function DialogButton({
+  content,
+  title,
+  dialogProps,
+  onDialogClose,
+  anchor,
+}: DrawerButtonProps) {
+  const [open, setOpen] = useState(false)
+
+  const onClose = () => {
+    onDialogClose && onDialogClose()
+    setOpen(false)
+  }
+
+  const onOpen = () => {
+    setOpen(true)
+  }
+
+  return (
+    <>
+      {anchor({
+        open: onOpen,
+      })}
+      <CustomDialog
+        open={open}
+        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

@@ -1,84 +1,113 @@
-import { Close } from '@mui/icons-material'
-import {
-  Box,
-  ButtonProps,
-  DialogTitle,
-  Drawer,
-  IconButton,
-  styled,
-} from '@mui/material'
-import { ReactNode, useState } from 'react'
-
-const StyledDrawerHeader = styled(Box)(({ theme }) => ({
-  height: '64px',
-  backgroundColor: '#f7f7f7',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'end',
-  padding: '0.6rem 1rem',
-  paddingBottom: '10px',
-}))
-
-const StyledDrawerContent = styled(Box)(({ theme }) => ({
-  padding: '1rem',
-  height: 'calc(100vh - 64px)',
-  overflowY: 'auto',
-  paddingBottom: '4rem',
-}))
-
-interface DrawerButtonProps {
-  anchor: (props: { open: () => void }) => ReactNode
-  content: (props: { close: () => void }) => ReactNode
-  title: string | ReactNode
-  btnTxt?: string | ReactNode
-  btnProps?: ButtonProps
-}
-
-export default function DrawerButton({
-  content,
-  title,
-  anchor,
-}: DrawerButtonProps) {
-  const [open, setOpen] = useState(false)
-
-  const onOpen = () => {
-    setOpen(true)
-  }
-
-  const onClose = () => {
-    setOpen(false)
-  }
-  return (
-    <>
-      {anchor({ open: onOpen })}
-      <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}
-      >
-        <StyledDrawerHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <IconButton onClick={onClose} sx={{ color: 'black' }}>
-            <Close />
-          </IconButton>
-        </StyledDrawerHeader>
-        <StyledDrawerContent>{content({ close: onClose })}</StyledDrawerContent>
-      </Drawer>
-    </>
-  )
-}
+import { Close } from '@mui/icons-material'
+import {
+  Box,
+  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',
+  backgroundColor: '#f7f7f7',
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'end',
+  padding: '0.6rem 1rem',
+  paddingBottom: '10px',
+}))
+
+const StyledDrawerContent = styled(Box)(({ theme }) => ({
+  padding: '1rem',
+  height: 'calc(100vh - 64px)',
+  overflowY: 'auto',
+  paddingBottom: '4rem',
+  ...SCROLLBAR_DARK,
+}))
+
+export interface DrawerButtonProps {
+  anchor: (props: { open: () => void }) => ReactNode
+  content: (props: { close: () => void }) => ReactNode
+  title: string | ReactNode
+  btnTxt?: string | ReactNode
+  btnProps?: ButtonProps
+}
+
+export default function DrawerButton({
+  content,
+  title,
+  anchor,
+}: DrawerButtonProps) {
+  const [open, setOpen] = useState(false)
+
+  const onOpen = () => {
+    setOpen(true)
+  }
+
+  const onClose = () => {
+    setOpen(false)
+  }
+  return (
+    <>
+      {anchor({ open: onOpen })}
+      <CustomDrawer
+        content={content}
+        onClose={onClose}
+        open={open}
+        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/components/ModalButtons/index.tsx

@@ -1,4 +1,4 @@
-import DialogButton from './DialogButton'
-import DrawerButton from './DrawerButton'
-
-export { DialogButton, DrawerButton }
+import DialogButton from './DialogButton'
+import DrawerButton from './DrawerButton'
+
+export { DialogButton, DrawerButton }

package/src/components/NoDataIllustration.tsx

@@ -1,32 +1,32 @@
-import { Box, Typography } from '@mui/material'
-import Image from './Image'
-import { ReactNode } from 'react'
-
-interface Props {
-  imageSrc: string
-  height?: string
-  message?: string | ReactNode
-}
-
-export default function NoData({
-  imageSrc,
-  height = '300px',
-  message = 'No Data Found',
-}: Props) {
-  return (
-    <Box
-      sx={{
-        marginTop: '20px',
-      }}
-    >
-      <Image alt="No Data Found" height={height} width="auto" src={imageSrc} />
-      {typeof message === 'string' ? (
-        <Typography marginTop={'20px'} textAlign={'center'}>
-          {message}
-        </Typography>
-      ) : (
-        <>{message}</>
-      )}
-    </Box>
-  )
-}
+import { Box, Typography } from '@mui/material'
+import Image from './Image'
+import { ReactNode } from 'react'
+
+interface Props {
+  imageSrc: string
+  height?: string
+  message?: string | ReactNode
+}
+
+export default function NoData({
+  imageSrc,
+  height = '300px',
+  message = 'No Data Found',
+}: Props) {
+  return (
+    <Box
+      sx={{
+        marginTop: '20px',
+      }}
+    >
+      <Image alt="No Data Found" height={height} width="auto" src={imageSrc} />
+      {typeof message === 'string' ? (
+        <Typography marginTop={'20px'} textAlign={'center'}>
+          {message}
+        </Typography>
+      ) : (
+        <>{message}</>
+      )}
+    </Box>
+  )
+}

package/src/components/PageContent.tsx

@@ -1,12 +1,12 @@
-import { Box, BoxProps, styled } from '@mui/material'
-
-const StyledPageContent = styled(Box)(() => ({
-  paddingLeft: '25px',
-  paddingRight: '25px',
-  marginTop: '16px',
-  paddingBottom: '3rem',
-}))
-
-export function PageContent(props: BoxProps) {
-  return <StyledPageContent {...props}>{props.children}</StyledPageContent>
-}
+import { Box, BoxProps, styled } from '@mui/material'
+
+const StyledPageContent = styled(Box)(() => ({
+  paddingLeft: '25px',
+  paddingRight: '25px',
+  marginTop: '16px',
+  paddingBottom: '3rem',
+}))
+
+export function PageContent(props: BoxProps) {
+  return <StyledPageContent {...props}>{props.children}</StyledPageContent>
+}