@campxdev/shared 1.8.13 → 1.8.14

package/src/components/ModalButtons/DialogButton.tsx

@@ -1,126 +0,0 @@
-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
-  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
-  onClose: () => void
-  open: boolean
-  dialogProps?: Omit<DialogProps, 'open'>
-}
-
-export const CustomDialog = ({
-  onClose,
-  dialogProps,
-  title,
-  content,
-  open,
-}: CustomDialogProps) => {
-  return (
-    <Dialog
-      PaperProps={{
-        ...dialogProps?.PaperProps,
-        elevation: 2,
-        sx: { borderRadius: '10px' },
-      }}
-      fullWidth
-      onClose={onClose}
-      open={open}
-      transitionDuration={140}
-      TransitionComponent={Transition}
-      sx={{
-        ...dialogProps?.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,115 +0,0 @@
-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={{
-        ...drawerProps?.PaperProps,
-        elevation: 2,
-      }}
-      sx={{
-        ...drawerProps?.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 +0,0 @@
-import DialogButton from './DialogButton'
-import DrawerButton from './DrawerButton'
-
-export { DialogButton, DrawerButton }

package/src/components/NoDataIllustration.tsx

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

package/src/components/PageHeader.tsx

@@ -1,55 +0,0 @@
-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',
-    '& .MuiButton-root': {
-      height: '40px',
-    },
-  },
-}))
-
-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/PageNotFound.tsx

@@ -1,26 +0,0 @@
-import { Box, Button, Typography } from '@mui/material'
-import axios from 'axios'
-import React, { useEffect, useState } from 'react'
-import { pagenotfound } from '../assets/images'
-
-function PageNotFound() {
-  return (
-    <>
-      <Box
-        sx={{
-          width: '100%',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          marginTop: '50px',
-        }}
-      >
-        <img src={pagenotfound} alt="page not found" width={470} />
-        <Typography variant="h1">Page Not Found.</Typography>
-      </Box>
-    </>
-  )
-}
-
-export default PageNotFound

package/src/components/PopupConfirm/ConfirmContextProvider.tsx

@@ -1,40 +0,0 @@
-import { createContext, ReactNode, useState } from 'react'
-import PopupConfirm from './PopupConfirm'
-
-interface ConfirmContextProps {
-  confirm: {
-    prompt: ReactNode
-    isOpen: boolean
-    proceed: () => void
-    cancel: () => void
-  }
-  setConfirm: any
-}
-
-export const ConfirmContext = createContext<ConfirmContextProps>({
-  confirm: {
-    cancel: () => {},
-    proceed: () => {},
-    prompt: 'Are you sure?',
-    isOpen: false,
-  },
-  setConfirm: () => {},
-})
-
-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

@@ -1,67 +0,0 @@
-import { Box, Button, Dialog, styled, Typography } from '@mui/material'
-import useConfirm from './useConfirm'
-const animatedImage = require('./animation.gif')
-
-const StyledImage = styled((props: any) => (
-  <Box>
-    <img {...props} />
-  </Box>
-))(({ theme }) => ({
-  width: '154px',
-  '> img': {
-    width: '100%',
-    height: '100%',
-    objectFit: 'contain',
-  },
-}))
-
-const StyledDialogContent = styled(Box)(({ theme }) => ({
-  height: '360px',
-  width: '570px',
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flexDirection: 'column',
-}))
-
-const PopupConfirm = () => {
-  const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
-  return (
-    <Dialog
-      PaperProps={{
-        elevation: 2,
-        sx: {
-          borderRadius: '10px',
-        },
-      }}
-      sx={{
-        '& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
-        zIndex: 1600,
-      }}
-      keepMounted
-      maxWidth="sm"
-      fullWidth
-      open={isOpen}
-      transitionDuration={150}
-    >
-      <StyledDialogContent>
-        <Box sx={{ marginBottom: '20px' }}>
-          <StyledImage src={animatedImage} alt="Upload Image" />
-        </Box>
-
-        <Typography variant="h6" sx={{ minHeight: '30px' }}>
-          {prompt}
-        </Typography>
-        <Box sx={{ display: 'flex', gap: '20px', marginTop: '30px' }}>
-          <Button color="secondary" variant="outlined" onClick={cancel}>
-            No, Cancel
-          </Button>
-          <Button variant="outlined" onClick={proceed} sx={{ height: '40px' }}>
-            Yes, I'm. Sure
-          </Button>
-        </Box>
-      </StyledDialogContent>
-    </Dialog>
-  )
-}
-export default PopupConfirm

package/src/components/PopupConfirm/index.tsx

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

package/src/components/PopupConfirm/useConfirm.ts

@@ -1,47 +0,0 @@
-import { ReactNode, useContext, useEffect, useState } from 'react'
-import { ConfirmContext } from './ConfirmContextProvider'
-
-export default function useConfirm(): {
-  isConfirmed: (prompt?: string) => Promise<boolean>
-  prompt?: ReactNode
-  isOpen?: boolean
-  proceed?: () => void
-  cancel?: () => void
-} {
-  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/ResetPassword.tsx

@@ -1,107 +0,0 @@
-import { VisibilityOff, Visibility } from '@mui/icons-material'
-import { Stack, InputAdornment, IconButton, Button, Alert } from '@mui/material'
-import React, { useState } from 'react'
-import { FormTextField } from './HookForm'
-import axios from '../config/axios'
-import { useForm } from 'react-hook-form'
-import { useNavigate } from 'react-router-dom'
-import { toast } from 'react-toastify'
-
-function ResetPassword() {
-  const searchParams = new URLSearchParams(document.location.search)
-  const { handleSubmit, control } = useForm()
-  const navigate = useNavigate()
-  const [error, setError] = useState('')
-  const [showPassword, setShowPassword] = useState(false)
-  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
-
-  async function handleResetPassword(values) {
-    const token = searchParams.get('token')
-    values.token = token
-
-    if (values.newPassword == values.confirmNewPassword) {
-      try {
-        await axios
-          .post(`https://api.campx.dev/auth-server/auth/reset-password`, values)
-          .then((res) => {
-            navigate('/login')
-            toast.success('Password Changed Successfully')
-          })
-      } catch (err) {
-        if (
-          values.newPassword.length == 0 &&
-          values.confirmNewPassword.length == 0
-        ) {
-          setError('Please enter valid password')
-        } else if (token == null) {
-          setError('Invalid token')
-        } else {
-          setError(err.response.data.message ?? 'Server Error')
-        }
-      }
-    } else {
-      setError("New Password and Confirm New password doesn't match")
-    }
-  }
-
-  return (
-    <>
-      <form onSubmit={handleSubmit(handleResetPassword)}>
-        <Stack gap={'30px'}>
-          <FormTextField
-            control={control}
-            name="newPassword"
-            label="New Password"
-            type={showPassword ? 'text' : 'password'}
-            required
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    size="small"
-                    aria-label="toggle password visibility"
-                    onClick={() => setShowPassword((prev) => !prev)}
-                    edge="end"
-                  >
-                    {showPassword ? <VisibilityOff /> : <Visibility />}
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
-          />
-
-          <FormTextField
-            control={control}
-            name="confirmNewPassword"
-            label="Confirm Password"
-            type={showConfirmPassword ? 'text' : 'password'}
-            required
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <IconButton
-                    size="small"
-                    aria-label="toggle password visibility"
-                    onClick={() => setShowConfirmPassword((prev) => !prev)}
-                    edge="end"
-                  >
-                    {showPassword ? <VisibilityOff /> : <Visibility />}
-                  </IconButton>
-                </InputAdornment>
-              ),
-            }}
-          />
-
-          <Button type="submit">Reset Password</Button>
-        </Stack>
-      </form>
-      {error && (
-        <Alert severity="error" sx={{ marginTop: '20px' }}>
-          {error}
-        </Alert>
-      )}
-    </>
-  )
-}
-
-export default ResetPassword

package/src/components/Row.tsx

@@ -1,24 +0,0 @@
-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/Spinner.tsx

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