@campxdev/shared 1.8.14 → 1.8.16

package/src/components/ModalButtons/DialogButton.tsx

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

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

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

package/src/components/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/PageContent.tsx

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

package/src/components/PageHeader.tsx

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

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

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

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

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

package/src/components/PopupConfirm/useConfirm.ts

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

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

@@ -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/Spinner.tsx

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