@campxdev/shared 0.1.0

package/src/components/Tabs/TabsContainer.tsx

@@ -0,0 +1,50 @@
+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'
+}
+
+export default function TabsContainer({
+  tabs,
+  size = 'small',
+  conatinerVariant = 'box',
+}: TabsContainerProps) {
+  const [currentTab, setCurrentTab] = useState(tabs[0].key)
+
+  const handleTabsChange = (_event: ChangeEvent<{}>, value: string): void => {
+    setCurrentTab(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

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

package/src/components/Tabs/styles.tsx

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

@@ -0,0 +1,42 @@
+import { Done } from '@mui/icons-material'
+import { Box } from '@mui/material'
+import { Slide, ToastContainer as ReactToastContainer } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+
+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={<Icon />}
+    />
+  )
+}
+
+const Icon = () => {
+  return (
+    <Box
+      sx={{
+        background: 'rgba(0, 0, 0, 0.1)',
+        minWidth: '50px',
+        height: '100%',
+        alignSelf: 'stretch',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+      }}
+    >
+      <Done />
+    </Box>
+  )
+}

package/src/components/ToastContainer/index.tsx

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

package/src/components/UploadButton/UploadButton.tsx

@@ -0,0 +1,98 @@
+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,
+}: UploadButtonProps) {
+  const [loading, setLoading] = useState<boolean>(false)
+
+  const formRef: any = useRef()
+  const fileInputRef: any = useRef()
+
+  const handleChange = (e: any) => {
+    if (e.target.files[0]) {
+      const formData = new FormData()
+      formData.append('file', e.target.files[0])
+      setLoading(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 ?? '',
+          })
+          setLoading(false)
+          if (onSuccess) onSuccess()
+          formRef?.current.reset()
+        })
+        .catch((err) => {
+          setLoading(false)
+          toast.error(
+            err?.response?.data?.message ?? 'Server Error While Uploading File',
+          )
+          formRef?.current.reset()
+        })
+    }
+  }
+
+  return (
+    <>
+      <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

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

package/src/components/UploadButton/types.ts

@@ -0,0 +1,14 @@
+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
+}
+export type { Media, UploadButtonProps }

package/src/components/UploadDocument/UploadDocument.tsx

@@ -0,0 +1,108 @@
+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/UploadDocument/index.tsx

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

package/src/components/UploadFileDialog/UploadFileDialog.tsx

@@ -0,0 +1,240 @@
+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 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="/images/AnimatedUploadFile.gif"
+            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

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

package/src/components/index.ts

@@ -0,0 +1,59 @@
+import UploadFileDialog from './UploadFileDialog'
+import Chips from './Chips'
+import ImageUpload from './ImageUpload'
+import FloatingContainer from './FloatingContainer'
+import TabsContainer from './Tabs/TabsContainer'
+import { StyledTableContainer } from './StyledTableContainer'
+import { SearchBar } from './SearchBar'
+import { DrawerButton, DialogButton } from './ModalButtons'
+import DetailsGrid from './DetailsGrid'
+import AppHeader from './Layout/Header'
+import MenuButton from './MenuButton'
+import StepsHeader from './StepsHeader'
+import UploadDocument from './UploadDocument'
+
+export { default as Image } from './Image'
+export { default as PageHeader } from './PageHeader'
+export { PageContent } from './PageContent'
+export { default as ActionButton } from './ActionButton'
+export { default as Breadcrumbs } from './Breadcrumbs'
+export { default as Table } from './TableComponent'
+export { default as Spinner } from './Spinner'
+export { default as AutocompleteSearch } from './AutocompleteSearch'
+export { FullCalendarWrapper } from './FullCalendar/FullCalendarWrapper'
+export { default as JsonPreview } from './JsonPreview'
+export { default as LabelValue } from './LabelValue'
+export { default as LinearProgress } from './LinearProgress'
+export { default as MediaRow } from './MediaRow'
+export { default as NoDataIllustration } from './NoDataIllustration'
+export { default as SwitchButton } from './SwitchButton'
+export { default as Tabs } from './Tabs'
+export { default as ToastContainer } from './ToastContainer'
+export { default as Card } from './Card'
+export { default as CardsGrid } from './CardsGrid'
+export { default as DividerHeading } from './DividerHeading'
+export { default as ReactTable } from './TableComponent/ReactTable'
+export { default as TableFooter } from './TableComponent/TableFooter'
+export { default as DropDownButton } from './DropDownButton'
+export { default as useConfirm } from './PopupConfirm/useConfirm'
+export {
+  UploadFileDialog,
+  Chips,
+  ImageUpload,
+  FloatingContainer,
+  TabsContainer,
+  StyledTableContainer,
+  SearchBar,
+  DrawerButton,
+  DialogButton,
+  DetailsGrid,
+  AppHeader,
+  MenuButton,
+  StepsHeader,
+  UploadDocument,
+}
+
+export * from './UploadButton/types'
+export * from './HookForm'
+export * from './Input'
+export * from './IconButtons'