@campxdev/shared 1.8.13 → 1.8.14

package/src/components/Tabs/TabsContainer.tsx

@@ -1,53 +0,0 @@
-import { Tab } from '@mui/material'
-import { ChangeEvent, ReactNode, useEffect, useState } from 'react'
-import { StyledComponentWrapper, StyledContainer, StyledTabs } from './styles'
-
-export interface TabsContainerProps {
-  tabs: {
-    key: string
-    label: string
-    component: ReactNode
-  }[]
-  size?: 'small' | 'medium'
-  conatinerVariant?: 'box' | 'page'
-  onTabChange?: (tabKey: string) => void
-}
-
-export default function TabsContainer({
-  tabs,
-  size = 'small',
-  conatinerVariant = 'box',
-  onTabChange,
-}: TabsContainerProps) {
-  const [currentTab, setCurrentTab] = useState(tabs[0].key)
-
-  const handleTabsChange = (_event: ChangeEvent<{}>, value: string): void => {
-    setCurrentTab(value)
-    onTabChange && onTabChange(value)
-  }
-  useEffect(() => {
-    setCurrentTab(tabs[0].key)
-  }, [])
-
-  return (
-    <StyledContainer>
-      <StyledTabs
-        containerVariant={conatinerVariant}
-        size={size}
-        onChange={handleTabsChange}
-        value={currentTab}
-        variant="scrollable"
-        scrollButtons="auto"
-        textColor="primary"
-        indicatorColor="primary"
-      >
-        {tabs.map((tab) => (
-          <Tab key={tab.key} label={tab.label} value={tab.key} />
-        ))}
-      </StyledTabs>
-      <StyledComponentWrapper containerVariant={conatinerVariant}>
-        {tabs.find((tab) => tab.key === currentTab)?.component}
-      </StyledComponentWrapper>
-    </StyledContainer>
-  )
-}

package/src/components/Tabs/index.tsx

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

package/src/components/Tabs/styles.tsx

@@ -1,55 +0,0 @@
-import { Box, Stack, styled, Tabs } from '@mui/material'
-
-export const StyledTabs = styled(Tabs)<{
-  size: 'small' | 'medium'
-  containerVariant?: 'page' | 'box'
-}>(({ theme, size, containerVariant }) => ({
-  borderTopRightRadius: '10px',
-  borderTopLeftRadius: '10px',
-  background: theme.palette.secondary.light,
-  minHeight: '60px',
-  paddingLeft: '15px',
-  '& .MuiTabs-indicator': {
-    backgroundColor: theme.palette.common.yellow,
-  },
-  '& .MuiTabs-flexContainer': {
-    height: '100%',
-    alignItems: 'end',
-  },
-  '& .MuiTab-root': {
-    textTransform: 'none',
-    transition: 'color 0.2s ease-in-out',
-    padding: '5px 15px',
-    paddingBottom: '8px',
-    minHeight: 0,
-    fontSize: size === 'medium' ? '16px' : '14px',
-    fontWeight: '600',
-  },
-  '& .MuiTab-root.Mui-selected': {
-    color: theme.palette.secondary.main,
-  },
-  ...(containerVariant === 'page' && {
-    background: 'none',
-    paddingLeft: 0,
-    borderBottom: theme.borders.grayLight,
-  }),
-}))
-
-export const StyledContainer = styled(Stack)(({ theme }) => ({
-  borderRadius: '10px',
-  // border: theme.borders.grayLight,
-}))
-
-export const StyledComponentWrapper = styled(Box)<{
-  containerVariant: 'page' | 'box'
-}>(({ theme, containerVariant }) => ({
-  padding: '15px',
-  height: '100%',
-  ...(containerVariant === 'page' && {
-    padding: '15px 0',
-  }),
-}))
-
-export const StyledTabsWrapper = styled(Box)(({ theme }) => ({
-  borderBottom: theme.borders.grayLight,
-}))

package/src/components/ToastContainer/ToastContainer.tsx

@@ -1,57 +0,0 @@
-import { Done, Close, WarningAmberRounded } from '@mui/icons-material'
-import { Box } from '@mui/material'
-import { Slide, ToastContainer as ReactToastContainer } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
-import WarningAmberRoundedIcon from '@mui/icons-material/WarningAmberRounded'
-
-export default function ToastContainer() {
-  return (
-    <ReactToastContainer
-      containerId={'toast-container'}
-      position="bottom-center"
-      autoClose={4000}
-      hideProgressBar={true}
-      newestOnTop={false}
-      transition={Slide}
-      closeOnClick
-      rtl={false}
-      pauseOnFocusLoss={false}
-      draggable
-      pauseOnHover
-      theme="colored"
-      icon={({ type }) => <Icon type={type} />}
-    />
-  )
-}
-
-const Icon = ({ type }) => {
-  const renderIcon = () => {
-    switch (type) {
-      case 'error':
-        return <Close />
-      case 'success':
-        return <Done />
-      case 'warning':
-        return <WarningAmberRounded />
-
-      default:
-        return <Done />
-    }
-  }
-
-  return (
-    <Box
-      sx={{
-        background: 'rgba(0, 0, 0, 0.1)',
-        minWidth: '50px',
-        height: '100%',
-        alignSelf: 'stretch',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-      }}
-    >
-      {renderIcon()}
-    </Box>
-  )
-}

package/src/components/ToastContainer/index.tsx

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

package/src/components/UploadButton/UploadButton.tsx

@@ -1,126 +0,0 @@
-import { Button, CircularProgress, styled } from '@mui/material'
-import { useRef, useState } from 'react'
-import { toast } from 'react-toastify'
-import axios from '../../config/axios'
-import { UploadButtonProps } from './types'
-
-const getAccept = (type: UploadButtonProps['type']) => {
-  switch (type) {
-    case 'file':
-      return '.xlsx,.xls,.doc, .docx,.ppt, .pptx,.txt,.pdf'
-    case 'image':
-      return 'image/*'
-    case 'video':
-      return 'video/*'
-    case 'audio':
-      return 'audio/*'
-  }
-}
-
-export default function UploadButton({
-  type,
-  onChange,
-  uploadUrl,
-  onSuccess,
-  styledUpload,
-  loadingState,
-  refetchFn,
-}: UploadButtonProps) {
-  const [loading, setLoading] = useState<boolean>(false)
-
-  const formRef: any = useRef()
-  const fileInputRef: any = useRef()
-  const ref: any = useRef()
-  const handleChange = (e: any) => {
-    if (e.target.files[0]) {
-      const formData = new FormData()
-      formData.append('file', e.target.files[0])
-      setLoading(true)
-      loadingState && loadingState(true)
-      axios
-        .post(uploadUrl, formData)
-        .then((res) => {
-          onChange({
-            url: res.data.url,
-            key: res.data.key,
-            type: type,
-            fileName: res.data?.mediaObject?.originalFileName ?? '',
-            id: res.data?.mediaObject?.id ?? '',
-          })
-          refetchFn()
-          setLoading(false)
-          loadingState && loadingState(false)
-          if (onSuccess) onSuccess()
-          formRef?.current.reset()
-        })
-        .catch((err) => {
-          setLoading(false)
-          loadingState && loadingState(false)
-          toast.error(
-            err?.response?.data?.message ?? 'Server Error While Uploading File',
-          )
-          !styledUpload && formRef?.current.reset()
-        })
-    }
-  }
-
-  return (
-    <>
-      {styledUpload ? (
-        <>
-          <div
-            onClick={() => {
-              ref.current.click()
-            }}
-          >
-            {styledUpload}
-          </div>
-          <input
-            accept={getAccept(type)}
-            type="file"
-            hidden
-            ref={ref}
-            onChange={handleChange}
-          />
-        </>
-      ) : (
-        <>
-          <form ref={formRef}>
-            <input
-              ref={fileInputRef}
-              type="file"
-              style={{ display: 'none' }}
-              accept={getAccept(type)}
-              onChange={handleChange}
-            />
-            <StyledButton
-              fullWidth
-              endIcon={loading ? <CircularProgress size={16} /> : null}
-              variant="outlined"
-              disabled={loading}
-              size={'large'}
-              onClick={() => fileInputRef.current.click()}
-            >
-              {getLabel(type)}
-            </StyledButton>
-          </form>
-        </>
-      )}
-    </>
-  )
-}
-
-const getLabel = (type) => {
-  switch (type) {
-    case 'file':
-      return 'File'
-    case 'image':
-      return 'Image'
-    case 'video':
-      return 'Video'
-    case 'audio':
-      return 'Audio'
-  }
-}
-
-const StyledButton = styled(Button)(({ theme }) => ({}))

package/src/components/UploadButton/index.tsx

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

package/src/components/UploadButton/types.ts

@@ -1,19 +0,0 @@
-import { ReactNode } from "react"
-
-interface Media {
-  type: 'image' | 'video' | 'audio' | 'file'
-  url: string
-  key: string
-  fileName?: string
-  id?: any
-}
-interface UploadButtonProps {
-  type: 'file' | 'image' | 'video' | 'audio'
-  onChange: (res: Media) => void
-  uploadUrl: string
-  onSuccess?: () => void
-  styledUpload?: ReactNode
-  loadingState?: (v) => void
-  refetchFn?: () => void
-}
-export type { Media, UploadButtonProps }

package/src/components/UploadDocument.tsx

@@ -1,108 +0,0 @@
-import { Box, CircularProgress, Stack, styled, Typography } from '@mui/material'
-import { ReactNode, useRef, useState } from 'react'
-import AttachFileIcon from '@mui/icons-material/AttachFile'
-import { toast } from 'react-toastify'
-import axios from '../config/axios'
-
-export default function UploadDocument({
-  accept = '.doc,.docx,.pdf',
-  styledUpload,
-  postUrl,
-  postBody,
-  styleProps,
-  refetchFn,
-  width,
-  height,
-}: {
-  accept?: string
-  styledUpload?: ReactNode
-  postUrl: string
-  postBody?: object
-  refetchFn?: () => void
-  styleProps?: any
-  width?: string
-  height?: string
-}) {
-  const [loading, setLoading] = useState(false)
-  const fileRef = useRef<any>()
-
-  const handleChange = (e) => {
-    if (e.target.files[0]) {
-      const formData = new FormData()
-      formData.append('file', e.target.files[0])
-      if (postBody) {
-        Object?.keys(postBody)?.forEach((key) => {
-          formData?.append(key, postBody[key])
-        })
-      }
-
-      setLoading(true)
-      axios
-        .post(postUrl, formData)
-        .then((res) => {
-          setLoading(false)
-          refetchFn()
-        })
-        .catch((err) => {
-          setLoading(false)
-          toast.error('Server Error While Uploading File')
-        })
-    }
-  }
-
-  return (
-    <>
-      {styledUpload ? (
-        <div
-          onClick={() => {
-            fileRef.current.click()
-          }}
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
-            ...styleProps,
-          }}
-        >
-          {loading ? <CircularProgress size={30} /> : styledUpload}
-        </div>
-      ) : (
-        <StyledImageLabel
-          onClick={() => {
-            fileRef.current.click()
-          }}
-        >
-          <AttachFileIcon />
-          <Typography sx={{ opacity: '0.6' }}>
-            {loading ? 'Uploading...' : `Upload File`}
-          </Typography>
-        </StyledImageLabel>
-      )}
-      <input
-        type="file"
-        ref={fileRef}
-        style={{ display: 'none' }}
-        accept={accept}
-        onChange={handleChange}
-      />
-    </>
-  )
-}
-
-export const StyledImageLabel = styled('div')(({ theme }) => ({
-  cursor: 'pointer',
-  borderRadius: '10px',
-  width: '100%',
-  height: '150px',
-  border: '1px dashed #0000001A',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  '&:hover': {
-    backgroundColor: '#EFEFEF',
-  },
-  '& > *': {
-    color: theme.palette.text.disabled,
-  },
-}))

package/src/components/UploadFileDialog/UploadFileDialog.tsx

@@ -1,238 +0,0 @@
-import { Add, Close } from '@mui/icons-material'
-import {
-  alpha,
-  Box,
-  Button,
-  ButtonProps,
-  CircularProgress,
-  Dialog,
-  DialogContent,
-  DialogProps,
-  IconButton,
-  styled,
-  Typography,
-} from '@mui/material'
-import { DeleteButton, EditButton } from '../IconButtons'
-import { ReactNode, useEffect, useRef, useState } from 'react'
-import { toast } from 'react-toastify'
-import axios, { axiosErrorToast } from '../../config/axios'
-const animatedImage = require('./AnimatedUploadFile.gif')
-
-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(DialogContent)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '1rem',
-  alignItems: 'center',
-  padding: '40px',
-}))
-
-const StyledImage = styled((props: any) => (
-  <Box>
-    <img {...props} />
-  </Box>
-))(({ theme }) => ({
-  height: '90px',
-  width: '90px',
-  '> img': {
-    width: '100%',
-    height: '100%',
-    objectFit: 'contain',
-  },
-}))
-
-const StyledChooseFileButton = styled(Button)(({ theme }) => ({
-  padding: '15px 20px',
-  height: '50px',
-  '> .MuiBox-root': {
-    display: 'flex',
-    width: '100%',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-}))
-
-const StyledFileLabel = styled(Box)(({ theme }) => ({
-  background: theme.palette.secondary.light,
-  borderRadius: '5px',
-  padding: '16px',
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-}))
-
-interface UploadFileDialogProps {
-  buttonProps?: ButtonProps
-  dialogProps?: DialogProps
-  buttonText: string | ReactNode
-  children?: ReactNode
-  dialogTitle: ReactNode | string
-  sampleFileUrl?: string
-  uploadUrl: string
-  successMessage?: string
-  refetchFn: () => void
-  postBody?: { [key: string]: string }
-}
-
-export default function UploadFileDialog({
-  buttonProps,
-  dialogProps,
-  buttonText,
-  dialogTitle,
-  uploadUrl,
-  sampleFileUrl,
-  successMessage,
-  refetchFn,
-  postBody = {},
-}: UploadFileDialogProps) {
-  const inputRef: any = useRef(null)
-  const [loading, setLoading] = useState(false)
-
-  const [file, setFile] = useState(null)
-  const [open, setOpen] = useState(false)
-  const onClose = () => {
-    setOpen(false)
-  }
-
-  const triggerUpload = () => {
-    if (!inputRef.current) return
-    inputRef?.current?.click()
-  }
-
-  const handleImageChange = (e) => {
-    setFile(e.target.files[0])
-  }
-
-  const handleOnUpload = () => {
-    if (!file) return ``
-    const formData = new FormData()
-    formData.append('file', file)
-    if (postBody) {
-      Object.keys(postBody).forEach((key) => {
-        formData.append(key, postBody[key])
-      })
-    }
-    setLoading(true)
-
-    axios
-      .post(uploadUrl, formData)
-      .then((res) => {
-        setLoading(false)
-        refetchFn()
-        setOpen(false)
-        toast.success(successMessage ?? 'Successful')
-        setFile(null)
-      })
-      .catch((err) => {
-        console.log(err)
-        setLoading(false)
-        axiosErrorToast(err)
-      })
-  }
-
-  useEffect(() => {
-    return () => {
-      setFile(null)
-      inputRef.current = null
-    }
-  }, [])
-
-  return (
-    <>
-      <Button
-        onClick={() => {
-          setOpen(true)
-        }}
-        variant="outlined"
-        {...buttonProps}
-      >
-        {buttonText}
-      </Button>
-      <Dialog
-        open={open}
-        onClose={onClose}
-        maxWidth="sm"
-        fullWidth
-        {...dialogProps}
-      >
-        <StyledDialogHeader>
-          <Typography fontWeight={600}>{dialogTitle}</Typography>
-          <IconButton onClick={onClose}>
-            <Close />
-          </IconButton>
-        </StyledDialogHeader>
-        <StyledDialogContent>
-          <StyledImage src={animatedImage} alt="Upload Image" />
-          <Typography variant="h6">{dialogTitle}</Typography>
-          <Typography textAlign={'center'}>
-            Before importing, download Sample CSV File or Sample XLSX file and
-            compare it with your sheet or edit the sample sheet
-          </Typography>
-          <Box sx={{ minWidth: '400px', marginBottom: '20px' }}>
-            {!file ? (
-              <>
-                <input
-                  onChange={handleImageChange}
-                  hidden
-                  type="file"
-                  ref={inputRef}
-                />
-                <StyledChooseFileButton
-                  variant="outlined"
-                  fullWidth
-                  onClick={triggerUpload}
-                >
-                  <Box>
-                    <Typography variant="h6" color="primary">
-                      Choose File
-                    </Typography>
-                    <Add />
-                  </Box>
-                </StyledChooseFileButton>
-              </>
-            ) : (
-              <StyledFileLabel>
-                <Typography variant="body2">{file?.name}</Typography>
-                <Box display={'flex'} gap="16px">
-                  <EditButton
-                    onClick={() => {
-                      triggerUpload()
-                    }}
-                  />
-                  <DeleteButton onClick={() => setFile(null)} />
-                </Box>
-              </StyledFileLabel>
-            )}
-          </Box>
-
-          <Button
-            fullWidth
-            sx={{ maxWidth: '255px' }}
-            onClick={handleOnUpload}
-            endIcon={
-              loading ? (
-                <CircularProgress size={20} sx={{ color: 'white' }} />
-              ) : null
-            }
-          >
-            Upload File
-          </Button>
-          {sampleFileUrl && (
-            <a href={sampleFileUrl} target="_blank" rel="noreferrer">
-              <Button fullWidth sx={{ maxWidth: '255px' }} variant="outlined">
-                Download Sample File
-              </Button>
-            </a>
-          )}
-        </StyledDialogContent>
-      </Dialog>
-    </>
-  )
-}

package/src/components/UploadFileDialog/index.tsx

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