@campxdev/shared 0.1.0

package/src/components/MenuButton.tsx

@@ -0,0 +1,105 @@
+import {
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  MenuListProps,
+  MenuProps,
+  styled,
+} from '@mui/material'
+import { cloneElement, ReactNode, useState } from 'react'
+
+interface Props {
+  anchor: any
+  loading?: boolean
+  menu: {
+    label: string | ReactNode
+    icon?: ReactNode
+    onClick: (props?: any) => any
+    component?: ReactNode
+  }[]
+  menuProps?: Omit<MenuProps, 'open'>
+  menuListProps?: MenuListProps
+}
+
+export default function MenuButton({
+  menu,
+  menuProps,
+  menuListProps,
+  loading = false,
+  anchor,
+}: Props) {
+  const [anchorEl, setAnchorEl] = useState<any>(null)
+  const open = Boolean(anchorEl)
+
+  const handleClick = (event) => {
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const AnchorEl = cloneElement(anchor, {
+    onClick: handleClick,
+  })
+
+  return (
+    <>
+      {AnchorEl}
+      <Menu
+        elevation={2}
+        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}
+      >
+        {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>
+        ))}
+      </Menu>
+    </>
+  )
+}
+
+const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  padding: '10px 20px',
+  display: 'flex',
+  alignItems: 'center',
+  '& .MuiListItemIcon-root': {
+    minWidth: '24px',
+  },
+  '& .MuiSvgIcon-root': {
+    height: '18px',
+    width: '18px',
+  },
+  '& .MuiTypography-root': {
+    fontWeight: 600,
+  },
+  borderBottom: theme.borders.grayLight,
+}))

package/src/components/ModalButtons/DialogButton.tsx

@@ -0,0 +1,84 @@
+import { Close } from '@mui/icons-material'
+import {
+  alpha,
+  Box,
+  ButtonProps,
+  Dialog,
+  DialogProps,
+  IconButton,
+  styled,
+  Typography,
+} from '@mui/material'
+import { createElement, ReactNode, useState } 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',
+}))
+
+const StyledDialogContent = styled(Box)(({ theme }) => ({
+  width: '100%',
+  padding: '1rem',
+}))
+
+type ContentProps = {
+  close: () => void
+}
+
+interface DrawerButtonProps {
+  button: any
+  content: (props: ContentProps) => ReactNode
+  title: string | ReactNode
+  btnTxt?: string | ReactNode
+  btnProps?: ButtonProps
+  dialogProps?: Omit<DialogProps, 'open'>
+}
+
+export default function DialogButton({
+  button: Button,
+  content,
+  title,
+  btnTxt,
+  btnProps,
+  dialogProps,
+}: DrawerButtonProps) {
+  const [open, setOpen] = useState(false)
+
+  const ButtonEl = (props) => (
+    <Button {...props} {...btnProps}>
+      {btnTxt}
+    </Button>
+  )
+
+  const MyButton = createElement(ButtonEl, {
+    onClick: () => setOpen(true),
+  })
+
+  const onClose = () => {
+    setOpen(false)
+  }
+  return (
+    <>
+      {MyButton}
+      <Dialog
+        PaperProps={{ sx: { borderRadius: '10px' } }}
+        fullWidth
+        onClose={onClose}
+        open={open}
+        {...dialogProps}
+      >
+        <StyledDialogHeader>
+          <Typography fontWeight={600}>{title}</Typography>
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </StyledDialogHeader>
+        <StyledDialogContent>{content({ close: onClose })}</StyledDialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/components/ModalButtons/DrawerButton.tsx

@@ -0,0 +1,89 @@
+import { Close } from '@mui/icons-material'
+import {
+  alpha,
+  Box,
+  ButtonProps,
+  Drawer,
+  IconButton,
+  styled,
+  Typography,
+} from '@mui/material'
+import { createElement, ReactNode, useState } from 'react'
+
+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',
+}))
+
+type ContentProps = {
+  close: () => void
+}
+
+interface DrawerButtonProps {
+  button: any
+  content: (props: ContentProps) => ReactNode
+  title: string | ReactNode
+  btnTxt?: string | ReactNode
+  btnProps?: ButtonProps
+}
+
+export default function DrawerButton({
+  button: Button,
+  content,
+  title,
+  btnTxt,
+  btnProps,
+}: DrawerButtonProps) {
+  const [open, setOpen] = useState(false)
+
+  const ButtonEl = (props) => (
+    <Button {...props} {...btnProps}>
+      {btnTxt}
+    </Button>
+  )
+
+  const MyButton = createElement(ButtonEl, {
+    onClick: () => setOpen(true),
+  })
+
+  const onClose = () => {
+    setOpen(false)
+  }
+  return (
+    <>
+      {MyButton}
+      <Drawer
+        anchor="right"
+        elevation={10}
+        onClose={onClose}
+        open={open}
+        sx={{
+          zIndex: 500,
+          '& .MuiDrawer-paper': {
+            boxSizing: 'border-box',
+            width: 600,
+          },
+        }}
+      >
+        <StyledDrawerHeader>
+          <Typography fontWeight={600}>{title}</Typography>
+          <IconButton onClick={onClose}>
+            <Close />
+          </IconButton>
+        </StyledDrawerHeader>
+        <StyledDrawerContent>{content({ close: onClose })}</StyledDrawerContent>
+      </Drawer>
+    </>
+  )
+}

package/src/components/ModalButtons/index.tsx

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

package/src/components/NoDataIllustration/NoDataIllustration.tsx

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

package/src/components/NoDataIllustration/index.tsx

@@ -0,0 +1 @@
+export { default } from './NoDataIllustration'

package/src/components/PageContent.tsx

@@ -0,0 +1,14 @@
+import styled from 'styled-components'
+
+const StyledPageContent = styled.div`
+  padding-left: 25px;
+  padding-right: 25px;
+  margin-top: 16px;
+  padding-bottom: 3rem;
+`
+
+export function PageContent(props) {
+  return (
+    <StyledPageContent style={props.style}>{props.children}</StyledPageContent>
+  )
+}

package/src/components/PageHeader.tsx

@@ -0,0 +1,52 @@
+import { Box, styled, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+
+interface PageHeaderProps {
+  title: string | ReactNode
+  subtitle?: string | ReactNode
+  actions?: ReactNode
+  noPadding?: boolean
+}
+
+const StyledBox = styled(Box, {
+  shouldForwardProp: (prop) => prop !== 'noPadding',
+})<{ noPadding: boolean }>(({ theme, noPadding }) => ({
+  minHeight: '40px',
+  padding: noPadding ? 0 : '0 25px',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+  margin: '1rem 0',
+  flexWrap: 'wrap',
+  '& .actions': {
+    display: 'flex',
+    gap: '1rem',
+    alignItems: 'center',
+    marginLeft: 'auto',
+  },
+}))
+
+export default function PageHeader({
+  title,
+  subtitle,
+  actions,
+  noPadding = false,
+}: PageHeaderProps) {
+  return (
+    <StyledBox noPadding={noPadding}>
+      <>
+        {typeof title === 'string' ? (
+          <Typography variant="h1">{title}</Typography>
+        ) : (
+          title
+        )}
+        {typeof subtitle === 'string' ? (
+          <Typography>{subtitle}</Typography>
+        ) : (
+          <Box marginTop={'10px'}>{subtitle}</Box>
+        )}
+      </>
+      <Box className="actions">{actions}</Box>
+    </StyledBox>
+  )
+}

package/src/components/PopupConfirm/ConfirmContextProvider.tsx

@@ -0,0 +1,22 @@
+import { createContext, useState } from 'react'
+import PopupConfirm from './PopupConfirm'
+
+export const ConfirmContext = createContext(null)
+
+const ConfirmContextProvider = ({ children }) => {
+  const [confirm, setConfirm] = useState({
+    prompt: '',
+    isOpen: false,
+    proceed: null,
+    cancel: null,
+  })
+
+  return (
+    <ConfirmContext.Provider value={[confirm, setConfirm]}>
+      {children}
+      <PopupConfirm />
+    </ConfirmContext.Provider>
+  )
+}
+
+export default ConfirmContextProvider

package/src/components/PopupConfirm/PopupConfirm.tsx

@@ -0,0 +1,33 @@
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@mui/material'
+import useConfirm from './useConfirm'
+
+const PopupConfirm = () => {
+  const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
+  return (
+    <Dialog
+      sx={{ zIndex: 1600 }}
+      keepMounted
+      maxWidth="sm"
+      fullWidth
+      open={isOpen}
+    >
+      <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>
+    </Dialog>
+  )
+}
+export default PopupConfirm

package/src/components/PopupConfirm/index.tsx

@@ -0,0 +1 @@
+export { default } from './PopupConfirm'

package/src/components/PopupConfirm/useConfirm.ts

@@ -0,0 +1,47 @@
+import { useContext, useEffect, useState } from 'react'
+import { ConfirmContext } from './ConfirmContextProvider'
+
+export default function useConfirm(): {
+  isConfirmed: (prompt?: string) => Promise<boolean>
+  prompt?: ''
+  isOpen?: false
+  proceed?: null
+  cancel?: null
+} {
+  const [confirm, setConfirm] = useContext(ConfirmContext)
+  const [needsCleanup, setNeedsCleanup] = useState(false)
+
+  const isConfirmed = (prompt) => {
+    setNeedsCleanup(true)
+    const promise = new Promise((resolve, reject) => {
+      setConfirm({
+        prompt,
+        isOpen: true,
+        proceed: resolve,
+        cancel: reject,
+      })
+    })
+    return promise.then(
+      () => {
+        setConfirm({ ...confirm, isOpen: false })
+        return true
+      },
+      () => {
+        setConfirm({ ...confirm, isOpen: false })
+        return false
+      },
+    )
+  }
+
+  useEffect(() => {
+    return () => {
+      if (confirm.cancel && needsCleanup) {
+        confirm.cancel()
+      }
+    }
+  }, [confirm, needsCleanup])
+  return {
+    ...confirm,
+    isConfirmed,
+  }
+}

package/src/components/Row/Row.tsx

@@ -0,0 +1,24 @@
+import { Box, SxProps } from '@mui/material'
+import { ReactNode } from 'react'
+
+export default function Row({
+  gap,
+  children,
+  sx,
+}: {
+  gap: number
+  children: ReactNode
+  sx?: SxProps
+}) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        gap: `${gap}px`,
+        ...sx,
+      }}
+    >
+      {children}
+    </Box>
+  )
+}

package/src/components/Row/index.tsx

@@ -0,0 +1 @@
+export { default } from './Row'

package/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,53 @@
+import { Search, Tune } from '@mui/icons-material'
+import { Box, InputAdornment, styled, TextField } from '@mui/material'
+import { useState } from 'react'
+
+interface SearchBarProps {
+  onSearch: (v: string) => void
+  filters?: {
+    onClick: () => void
+  }
+}
+
+export default function SearchBar({ onSearch, filters }: SearchBarProps) {
+  const [search, setSearch] = useState('')
+  return (
+    <Box sx={{ display: 'flex', gap: '20px' }}>
+      <TextField
+        sx={{ maxWidth: '600px' }}
+        label="Search"
+        value={search}
+        onChange={(e) => {
+          setSearch(e.target.value)
+          onSearch(e.target.value)
+        }}
+        InputProps={{
+          endAdornment: (
+            <InputAdornment position="end">
+              <Search />
+            </InputAdornment>
+          ),
+        }}
+      />
+      {filters && (
+        <StyledButtonWrapper onClick={filters?.onClick}>
+          <Tune />
+        </StyledButtonWrapper>
+      )}
+    </Box>
+  )
+}
+
+const StyledButtonWrapper = styled(Box)(({ theme }) => ({
+  width: '52px',
+  border: theme.borders.grayLight,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  borderRadius: '10px',
+  cursor: 'pointer',
+  '&:active': {
+    border: `1px solid ${theme.palette.primary.main}`,
+  },
+  transition: 'border 0.1s ease-in-out',
+}))

package/src/components/SearchBar/index.tsx

@@ -0,0 +1 @@
+export { default as SearchBar } from './SearchBar'

package/src/components/Spinner.tsx

@@ -0,0 +1,18 @@
+import { CircularProgress } from '@mui/material'
+
+function Spinner() {
+  return (
+    <div
+      style={{
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '200px',
+        display: 'flex',
+      }}
+    >
+      <CircularProgress />
+    </div>
+  )
+}
+
+export default Spinner