@campxdev/shared 0.1.0

package/src/components/Card.tsx

@@ -0,0 +1,97 @@
+import ChevronRight from '@mui/icons-material/ChevronRight'
+import {
+  Box,
+  Button,
+  Card as MuiCard,
+  CardActions,
+  CardContent,
+  CardHeader,
+  CardMedia,
+  styled,
+} from '@mui/material'
+import { ReactNode } from 'react'
+
+interface CardProps {
+  title: string | ReactNode
+  subheader?: string | ReactNode
+  children?: ReactNode
+  footer?: {
+    buttonText?: string | ReactNode
+    onClick: () => void
+    endIcon?: ReactNode
+    buttonProps?: any
+  }
+  image?: {
+    url: string
+    height: number
+  }
+  moreActions?: ReactNode
+}
+
+export default function Card({
+  title,
+  subheader,
+  children,
+  footer,
+  image,
+  moreActions,
+}: CardProps) {
+  const handleClick = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    footer?.onClick()
+  }
+
+  return (
+    <StyledCard>
+      <CardMedia component="img" height={image?.height} image={image?.url} />
+      <Box sx={{ position: 'relative', width: '100%' }}>
+        <StyledMoreActions>{moreActions}</StyledMoreActions>
+        <CardHeader title={title} subheader={subheader} />
+      </Box>
+      <CardContent sx={{ height: 'fit-content' }}>{children}</CardContent>
+      {footer && (
+        <StyledCardActions>
+          <Button
+            variant="text"
+            fullWidth
+            onClick={handleClick}
+            endIcon={footer?.endIcon ?? <ChevronRight />}
+            {...footer?.buttonProps}
+          >
+            {footer?.buttonText ?? 'View'}
+          </Button>
+        </StyledCardActions>
+      )}
+    </StyledCard>
+  )
+}
+
+const StyledMoreActions = styled(Box)(({ theme }) => ({
+  position: 'absolute',
+  right: '10px',
+  top: '15px',
+}))
+
+const StyledCard = styled(MuiCard)(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  width: '100%',
+  height: '100%',
+  '& .MuiCardContent-root': {
+    flexGrow: 1,
+  },
+  '& .MuiCardHeader-root': {
+    alignItems: 'baseline',
+    gap: '6px',
+  },
+}))
+
+const StyledCardActions = styled(CardActions)(({ theme }) => ({
+  borderTop: theme.borders.grayLight,
+  '& .MuiButton-root': {
+    justifyContent: 'space-between',
+    height: '40px',
+    padding: '20px',
+  },
+}))

package/src/components/CardsGrid.tsx

@@ -0,0 +1,28 @@
+import { Box, SxProps } from '@mui/material'
+import React from 'react'
+export default function CardsGrid({
+  cardWidth,
+  gap,
+  children,
+  sx,
+}: {
+  cardWidth: number
+  gap: number
+  children: React.ReactNode
+  sx?: SxProps
+}) {
+  return (
+    <Box
+      sx={{
+        width: '100%',
+        display: 'grid',
+        gridTemplateColumns: `repeat(auto-fill, minmax(${cardWidth}px, 1fr))`,
+        alignItems: 'start',
+        gap: `${gap}px`,
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  )
+}

package/src/components/Chips.tsx

@@ -0,0 +1,77 @@
+import { Chip, Stack, styled } from '@mui/material'
+import { ReactNode, useEffect, useState } from 'react'
+
+type IChip = {
+  label: string
+  value: string
+}
+
+interface ChipsProps {
+  list: { label: string | ReactNode; value: string | number }[]
+  selected: string[] | string | number
+  onSelected: (selected: IChip[] | any) => void
+  direction?: 'row' | 'column'
+  singleSelection?: boolean
+  toggle?: boolean
+}
+
+export default function Chips({
+  list = [],
+  selected: _selected,
+  onSelected,
+  direction = 'row',
+  singleSelection = true,
+  toggle = false,
+}: ChipsProps) {
+  const [selected, setSelected] = useState<any[] | any>([])
+
+  useEffect(() => {
+    setSelected(_selected)
+  }, [_selected])
+
+  const handleChange = (value) => {
+    if (singleSelection) {
+      if (selected === value && !toggle) {
+        setSelected('')
+        onSelected('')
+      } else {
+        setSelected(value)
+        onSelected(value)
+      }
+    } else {
+      if (selected.includes(value)) {
+        setSelected((prev) => prev.filter((item) => item !== value))
+        onSelected(selected.filter((item) => item !== value))
+      } else {
+        setSelected([...selected, value])
+        onSelected([...selected, value])
+      }
+    }
+  }
+
+  const isSelected = (value) =>
+    singleSelection ? selected === value : selected.includes(value)
+
+  return (
+    <Stack gap={'8px'} direction={direction} flexWrap={'wrap'}>
+      {list.map((item, index) => (
+        <StyledChip
+          key={index}
+          color={'primary'}
+          label={item.label}
+          clickable
+          variant={isSelected(item?.value) ? 'outlined' : 'filled'}
+          onClick={() => handleChange(item?.value)}
+        />
+      ))}
+    </Stack>
+  )
+}
+
+const StyledChip = styled(Chip)(({ theme }) => ({
+  minWidth: '100px',
+  '&.MuiButtonBase-root.MuiChip-filled': {
+    background: theme.palette.secondary.light,
+    color: theme.palette.text.primary,
+  },
+}))

package/src/components/Detail.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface DetailProps {
+  label: string
+  value: string | number
+}
+
+export default function Detail(props: DetailProps) {
+  return (
+    <div>
+      <div>{props.label}</div>
+      <h3>{props.value}</h3>
+    </div>
+  )
+}

package/src/components/DetailsGrid.tsx

@@ -0,0 +1,52 @@
+import { Box, BoxProps, styled, useTheme } from '@mui/material'
+import LabelValue from './LabelValue'
+import { ReactNode } from 'react'
+
+interface DetailsGridProps {
+  colCount: number
+  inverseLabels?: boolean
+  list: { label: ReactNode; value?: ReactNode }[]
+  noBorder?: boolean
+  space?: number
+}
+
+const StyledGrid = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'noBorder',
+})<{ cols: number; noBorder: boolean; space: number }>(
+  ({ theme, cols, noBorder, space }) => ({
+    padding: noBorder ? '1rem' : '20px',
+    marginTop: noBorder ? 0 : '1rem',
+    border: noBorder ? 'none' : theme.borders.grayLight,
+    display: 'grid',
+    gridTemplateColumns: `repeat(${cols}, 1fr)`,
+    gap: `${space}px`,
+    borderRadius: '10px',
+    [`& > :not(:nth-of-type(${cols}n))`]: {
+      borderRight: theme.borders.grayLight,
+    },
+    '& > :last-child': {
+      borderRight: 'none',
+    },
+  }),
+)
+
+export default function DetailsGrid({
+  colCount,
+  inverseLabels = false,
+  list,
+  noBorder = false,
+  space = 16,
+}: DetailsGridProps) {
+  return (
+    <StyledGrid cols={colCount} space={space} noBorder={noBorder}>
+      {list?.map((item, index) => (
+        <LabelValue
+          reverse={inverseLabels}
+          label={item?.label}
+          value={item?.value}
+          key={index}
+        />
+      ))}
+    </StyledGrid>
+  )
+}

package/src/components/DividerHeading.tsx

@@ -0,0 +1,40 @@
+import { Box, styled, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+
+export default function DividerHeading({
+  title,
+  actions,
+}: {
+  title: string
+  actions?: ReactNode
+}) {
+  return (
+    <StyledContainer>
+      <Typography variant="h6">{title}</Typography>
+      {actions && <Box>{actions}</Box>}
+    </StyledContainer>
+  )
+}
+
+const StyledContainer = styled(Box)(({ theme }) => ({
+  margin: '20px 0',
+  borderBottom: theme.borders.grayLight,
+  display: 'flex',
+  justifyContent: 'space-between',
+  position: 'relative',
+  alignItems: 'baseline',
+  '& .MuiTypography-root': {
+    marginRight: 'auto',
+  },
+  '&::before': {
+    position: 'absolute',
+    left: 0,
+    bottom: -2,
+    borderRadius: '2px',
+    content: '""',
+    display: 'block',
+    width: '60px',
+    height: '4px',
+    backgroundColor: theme.palette.common.yellow,
+  },
+}))

package/src/components/DrawerWrapper/DialogWrapper.tsx

@@ -0,0 +1,63 @@
+import { Close } from '@mui/icons-material'
+import {
+  alpha,
+  Box,
+  Dialog,
+  DialogContent,
+  DialogProps,
+  IconButton,
+  styled,
+  Typography,
+} from '@mui/material'
+import { ReactNode } from 'react'
+
+const StyledDialogHeader = styled(Box)(({ theme }) => ({
+  height: '64px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0.6rem 1rem',
+}))
+
+interface Props extends DialogProps {
+  onClose: () => void
+  children: ReactNode
+}
+
+export default function DialogWrapper({
+  title,
+  open,
+  onClose,
+  children,
+  ...props
+}: Props) {
+  return (
+    <Dialog
+      fullWidth
+      maxWidth="md"
+      sx={{
+        zIndex: 500,
+        minHeight: '70vh',
+      }}
+      onClose={onClose}
+      open={open}
+      {...props}
+      PaperProps={{
+        sx: {
+          borderRadius: '10px',
+        },
+      }}
+    >
+      <StyledDialogHeader>
+        <Typography fontWeight={600}>{title}</Typography>
+        <IconButton onClick={onClose}>
+          <Close />
+        </IconButton>
+      </StyledDialogHeader>
+      <DialogContent sx={{ padding: '20px' }}>
+        <>{children}</>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/DrawerWrapper/DrawerTemplate.tsx

@@ -0,0 +1,53 @@
+import { Close } from '@mui/icons-material'
+import {
+  alpha,
+  Box,
+  Drawer,
+  IconButton,
+  styled,
+  Typography,
+} from '@mui/material'
+
+const StyledDrawerHeader = styled(Box)(({ theme }) => ({
+  height: '64px',
+  backgroundColor: alpha(theme.palette.text.secondary, 0.1),
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  padding: '0.6rem 1rem',
+}))
+
+const StyledDrawerContent = styled(Box)(({ theme }) => ({
+  padding: '1rem',
+  height: 'calc(100vh - 64px)',
+  overflowY: 'auto',
+  paddingBottom: '4rem',
+}))
+
+export const DrawerTemplate = ({ handleClose, modal, setModal }) => {
+  return (
+    <Drawer
+      anchor="right"
+      elevation={10}
+      onClose={handleClose}
+      open={modal.open}
+      sx={{
+        zIndex: 500,
+        '& .MuiDrawer-paper': {
+          boxSizing: 'border-box',
+          width: 600,
+        },
+      }}
+    >
+      <StyledDrawerHeader>
+        <Typography fontWeight={600}>{modal.title}</Typography>
+        <IconButton onClick={() => setModal({ ...modal, open: false })}>
+          <Close />
+        </IconButton>
+      </StyledDrawerHeader>
+      <StyledDrawerContent>
+        {modal.content({ close: handleClose })}
+      </StyledDrawerContent>
+    </Drawer>
+  )
+}

package/src/components/DrawerWrapper/DrawerWrapper.tsx

@@ -0,0 +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)

package/src/components/DropDownButton.tsx

@@ -0,0 +1,184 @@
+import { KeyboardArrowDown, MoreVert } from '@mui/icons-material'
+import {
+  Box,
+  Button,
+  ButtonProps,
+  CircularProgress,
+  IconButton,
+  IconButtonProps,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  MenuListProps,
+  MenuProps,
+  styled,
+} from '@mui/material'
+import { ReactNode, useState } from 'react'
+
+interface Props {
+  label?: string
+  icon?: {
+    icon: ReactNode
+    iconProps?: IconButtonProps
+    outlined?: boolean
+  }
+  loading?: boolean
+  menu?: {
+    label: string | ReactNode
+    icon?: ReactNode
+    onClick: (props?: any) => any
+  }[]
+  buttonProps?: ButtonProps
+  menuProps?: Omit<MenuProps, 'open'>
+  menuListProps?: MenuListProps
+  renderMenuItems?: Array<ReactNode>
+}
+const defaultIcon = {
+  icon: <MoreVert color="primary" />,
+  outlined: true,
+}
+
+export default function DropDownButton({
+  label,
+  icon = defaultIcon,
+  menu = [],
+  buttonProps,
+  menuProps,
+  menuListProps,
+  loading = false,
+  renderMenuItems = [],
+}: Props) {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  return (
+    <>
+      {!label ? (
+        <StyledIconButton
+          outlined={icon?.outlined ?? false}
+          onClick={handleClick}
+          {...icon.iconProps}
+        >
+          {icon.icon}
+        </StyledIconButton>
+      ) : (
+        <StyledDropDownButton
+          onClick={handleClick}
+          disabled={loading}
+          endIcon={
+            loading ? (
+              <CircularProgress size="20px" thickness={1.7} />
+            ) : (
+              <KeyboardArrowDown />
+            )
+          }
+          {...buttonProps}
+        >
+          {label}
+        </StyledDropDownButton>
+      )}
+      <Menu
+        elevation={3}
+        id="basic-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        MenuListProps={{ sx: { padding: 0 }, ...menuListProps }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        {...menuProps}
+      >
+        <RenderMenuItems
+          menu={menu}
+          renderMenuItems={renderMenuItems}
+          handleClose={handleClose}
+        />
+      </Menu>
+    </>
+  )
+}
+
+const RenderMenuItems = ({ renderMenuItems, menu, handleClose }) => {
+  if (renderMenuItems?.length) {
+    return (
+      <>
+        {renderMenuItems.map((Item, index) => (
+          <StyledMenuItem
+            disableRipple
+            sx={{
+              minWidth: '120px',
+              width: '100%',
+              padding: 0,
+              '&:hover': { background: 'none' },
+            }}
+            key={index}
+          >
+            {Item}
+          </StyledMenuItem>
+        ))}
+      </>
+    )
+  }
+  if (menu?.length) {
+    return (
+      <>
+        {menu.map((item, index) => (
+          <StyledMenuItem
+            sx={{ minWidth: '120px', width: '100%' }}
+            key={index}
+            onClick={() => {
+              handleClose()
+              item.onClick()
+            }}
+          >
+            {item?.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
+            <ListItemText>{item.label}</ListItemText>
+          </StyledMenuItem>
+        ))}
+      </>
+    )
+  }
+}
+
+const StyledIconButton = styled(IconButton, {
+  shouldForwardProp: (prop) => prop !== 'outlined',
+})<{ outlined?: boolean }>(({ theme, outlined }) => ({
+  ...(outlined && {
+    border: `1px solid ${theme.palette.primary.main}`,
+    borderRadius: '5px',
+  }),
+}))
+
+const StyledMenuItem = styled(MenuItem)(({}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  '& .MuiListItemIcon-root': {
+    minWidth: '24px',
+  },
+  '& .MuiSvgIcon-root': {
+    height: '18px',
+    width: '18px',
+  },
+  '& .MuiTypography-root': {
+    fontWeight: 600,
+  },
+}))
+
+const StyledDropDownButton = styled(Button)(({}) => ({
+  padding: '0 14px',
+}))

package/src/components/ErrorBoundary.js

@@ -0,0 +1,45 @@
+import React from 'react'
+
+export default class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { hasError: false, error: null, errorInfo: null }
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true }
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    console.log(error)
+    console.log(errorInfo)
+    this.setState({
+      ...this.state,
+      error,
+      errorInfo,
+    })
+    // logErrorToMyService(error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return (
+        <div>
+          <h1>Something went wrong.</h1>
+          {this.state.error && (
+            <div>
+              <pre>Error: {this.state.error.message}</pre>
+              <pre>{this.state.errorInfo.componentStack}</pre>
+              <pre>{this.state.error.stack}</pre>
+            </div>
+          )}
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}