@campxdev/shared 1.4.18 → 1.4.19

package/src/components/Tabs/styles.tsx

@@ -1,55 +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,
-}))
+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,42 +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>
-  )
-}
+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

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

package/src/components/UploadButton/UploadButton.tsx

@@ -1,126 +1,126 @@
-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 }) => ({}))
+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 +1 @@
-export { default } from './UploadButton'
+export { default } from './UploadButton'

package/src/components/UploadButton/types.ts

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