@campxdev/shared 1.0.4 → 1.1.0

package/src/components/IconLabel.tsx

@@ -1,37 +1,37 @@
-import { Box, styled, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-
-const StyledStack = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '8px',
-  '& .MuiSvgIcon-root': {
-    fontSize: '1rem',
-    color: theme.palette.text.secondary,
-  },
-}))
-
-export default function IconLabel({
-  label,
-  icon,
-  onClick,
-}: {
-  label: string
-  icon: ReactNode
-  onClick?: () => void
-}) {
-  return (
-    <StyledStack
-      onClick={onClick ?? onClick}
-      sx={{
-        ...(onClick && {
-          cursor: 'pointer',
-          '&:hover': { borderBottom: '1px solid gray' },
-        }),
-      }}
-    >
-      {icon}
-      <Typography variant="subtitle2">{label}</Typography>
-    </StyledStack>
-  )
-}
+import { Box, styled, Typography } from '@mui/material'
+import { ReactNode } from 'react'
+
+const StyledStack = styled(Box)(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  '& .MuiSvgIcon-root': {
+    fontSize: '1rem',
+    color: theme.palette.text.secondary,
+  },
+}))
+
+export default function IconLabel({
+  label,
+  icon,
+  onClick,
+}: {
+  label: string
+  icon: ReactNode
+  onClick?: () => void
+}) {
+  return (
+    <StyledStack
+      onClick={onClick ?? onClick}
+      sx={{
+        ...(onClick && {
+          cursor: 'pointer',
+          '&:hover': { borderBottom: '1px solid gray' },
+        }),
+      }}
+    >
+      {icon}
+      <Typography variant="subtitle2">{label}</Typography>
+    </StyledStack>
+  )
+}

package/src/components/Image/Image.tsx

@@ -1,43 +1,43 @@
-import { Box } from '@mui/material'
-const brokenImage = require('./broken-image.png')
-
-interface ImageProps {
-  src: string
-  alt: string
-  height: string | number
-  width: string | number
-  fit?: 'cover' | 'contain' | 'fill'
-  radius?: string | number
-}
-
-export default function Image({
-  src,
-  alt,
-  height,
-  width,
-  fit = 'contain',
-  radius = '10px',
-}: ImageProps) {
-  return (
-    <Box
-      sx={{
-        height: height,
-        width: width,
-        '& > img': {
-          borderRadius: radius,
-          width: '100%',
-          height: '100%',
-          objectFit: fit,
-        },
-      }}
-    >
-      <img
-        src={src}
-        alt={alt}
-        onError={(e: any) => {
-          e.target.src = brokenImage
-        }}
-      />
-    </Box>
-  )
-}
+import { Box } from '@mui/material'
+const brokenImage = require('./broken-image.png')
+
+interface ImageProps {
+  src: string
+  alt: string
+  height: string | number
+  width: string | number
+  fit?: 'cover' | 'contain' | 'fill'
+  radius?: string | number
+}
+
+export default function Image({
+  src,
+  alt,
+  height,
+  width,
+  fit = 'contain',
+  radius = '10px',
+}: ImageProps) {
+  return (
+    <Box
+      sx={{
+        height: height,
+        width: width,
+        '& > img': {
+          borderRadius: radius,
+          width: '100%',
+          height: '100%',
+          objectFit: fit,
+        },
+      }}
+    >
+      <img
+        src={src}
+        alt={alt}
+        onError={(e: any) => {
+          e.target.src = brokenImage
+        }}
+      />
+    </Box>
+  )
+}

package/src/components/Image/index.tsx

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

package/src/components/ImageUpload.tsx

@@ -1,98 +1,98 @@
-import { InsertPhotoOutlined } from '@mui/icons-material'
-import { Box, CircularProgress, styled, Typography } from '@mui/material'
-import { ReactNode, useRef, useState } from 'react'
-import { toast } from 'react-toastify'
-import axios from '../config/axios'
-
-interface ImageUploadProps {
-  onFileUploaded: (v) => void
-  postUrl: string
-  StyledUpload?: ReactNode
-  loadingState?: (v) => void
-}
-export default function ImageUpload({
-  onFileUploaded,
-  postUrl,
-  StyledUpload,
-  loadingState,
-}: ImageUploadProps) {
-  const [loading, setLoading] = useState(false)
-  const ref = useRef<HTMLInputElement>(null)
-
-  const handleChange = (e) => {
-    if (e.target.files[0]) {
-      const formData = new FormData()
-      formData.append('file', e.target.files[0])
-      setLoading(true)
-      loadingState && setLoading(true)
-      axios
-        .post(postUrl, formData)
-        .then((res) => {
-          onFileUploaded({
-            url: res.data.url,
-            key: res.data.key,
-            fileName: res.data?.mediaObject?.originalFileName ?? '',
-            id: res.data?.mediaObject?.id ?? '',
-          })
-          setLoading(false)
-          loadingState && setLoading(false)
-        })
-        .catch((err) => {
-          setLoading(false)
-          loadingState && setLoading(false)
-          toast.error('Server Error While Uploading File')
-        })
-    }
-  }
-
-  return (
-    <>
-      {StyledUpload ? (
-        <div
-          onClick={() => {
-            ref.current.click()
-          }}
-        >
-          {StyledUpload}
-        </div>
-      ) : (
-        <StyledImageLabel
-          onClick={() => {
-            ref.current.click()
-          }}
-        >
-          <InsertPhotoOutlined />
-          <Typography sx={{ opacity: '0.6' }}>
-            {loading ? 'Uploading...' : `Upload Photo`}
-          </Typography>
-        </StyledImageLabel>
-      )}
-
-      <input
-        accept="image/*"
-        type="file"
-        hidden
-        ref={ref}
-        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,
-  },
-}))
+import { InsertPhotoOutlined } from '@mui/icons-material'
+import { Box, CircularProgress, styled, Typography } from '@mui/material'
+import { ReactNode, useRef, useState } from 'react'
+import { toast } from 'react-toastify'
+import axios from '../config/axios'
+
+interface ImageUploadProps {
+  onFileUploaded: (v) => void
+  postUrl: string
+  StyledUpload?: ReactNode
+  loadingState?: (v) => void
+}
+export default function ImageUpload({
+  onFileUploaded,
+  postUrl,
+  StyledUpload,
+  loadingState,
+}: ImageUploadProps) {
+  const [loading, setLoading] = useState(false)
+  const ref = useRef<HTMLInputElement>(null)
+
+  const handleChange = (e) => {
+    if (e.target.files[0]) {
+      const formData = new FormData()
+      formData.append('file', e.target.files[0])
+      setLoading(true)
+      loadingState && setLoading(true)
+      axios
+        .post(postUrl, formData)
+        .then((res) => {
+          onFileUploaded({
+            url: res.data.url,
+            key: res.data.key,
+            fileName: res.data?.mediaObject?.originalFileName ?? '',
+            id: res.data?.mediaObject?.id ?? '',
+          })
+          setLoading(false)
+          loadingState && setLoading(false)
+        })
+        .catch((err) => {
+          setLoading(false)
+          loadingState && setLoading(false)
+          toast.error('Server Error While Uploading File')
+        })
+    }
+  }
+
+  return (
+    <>
+      {StyledUpload ? (
+        <div
+          onClick={() => {
+            ref.current.click()
+          }}
+        >
+          {StyledUpload}
+        </div>
+      ) : (
+        <StyledImageLabel
+          onClick={() => {
+            ref.current.click()
+          }}
+        >
+          <InsertPhotoOutlined />
+          <Typography sx={{ opacity: '0.6' }}>
+            {loading ? 'Uploading...' : `Upload Photo`}
+          </Typography>
+        </StyledImageLabel>
+      )}
+
+      <input
+        accept="image/*"
+        type="file"
+        hidden
+        ref={ref}
+        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/Input/AutoCompleteSearch.tsx

@@ -1,113 +1,113 @@
-import {
-  Autocomplete,
-  Box,
-  CircularProgress,
-  TextField,
-  Typography,
-} from '@mui/material'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-
-type Option = {
-  value: string | any
-  label: string | any
-}
-
-interface MultiSelectProps {
-  control?: any
-  label: string
-  name: string
-  options: { value: string | any; label: string | any }[]
-  placeholder?: string
-  hookForm?: boolean
-  loading?: boolean
-  [key: string]: any
-  multiple?: boolean
-}
-
-export default function AutoCompleteSearch({
-  control,
-  name,
-  options,
-  label,
-  loading, // pass this variable when options are from an async operation
-  hookForm = true,
-  multiple = false,
-  ...props
-}: MultiSelectProps) {
-  if (!hookForm) {
-    return (
-      <Autocomplete
-        multiple={multiple}
-        value={props.value}
-        fullWidth
-        onChange={(e, value) => {
-          props.onChange(value)
-        }}
-        options={options || []}
-        getOptionLabel={(option: Option) => option?.label || ''}
-        renderInput={(params) => (
-          <TextField
-            variant="outlined"
-            label={<FormLabel label={label} required={props.required} />}
-            {...params}
-          />
-        )}
-        {...props}
-      />
-    )
-  }
-
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field, fieldState: { error } }) => (
-        <Box>
-          <Autocomplete
-            multiple={multiple}
-            loading={loading}
-            value={field.value}
-            fullWidth
-            onChange={(e, value) => {
-              field.onChange(value)
-            }}
-            options={options || []}
-            getOptionLabel={(option: Option) => option?.label || ''}
-            renderInput={(params) => (
-              <TextField
-                error={Boolean(error)}
-                variant="outlined"
-                label={<FormLabel label={label} required={props.required} />}
-                InputProps={{
-                  ...params.InputProps,
-                  endAdornment: (
-                    <>
-                      {loading ? (
-                        <CircularProgress color="inherit" size={20} />
-                      ) : null}
-                      {params.InputProps.endAdornment}
-                    </>
-                  ),
-                }}
-                {...params}
-              />
-            )}
-          />
-          {error && (
-            <Typography
-              fontSize={12}
-              sx={{
-                paddingLeft: '2px',
-                marginTop: '2px',
-              }}
-              color="error"
-            >
-              {error?.message}
-            </Typography>
-          )}
-        </Box>
-      )}
-    />
-  )
-}
+import {
+  Autocomplete,
+  Box,
+  CircularProgress,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+type Option = {
+  value: string | any
+  label: string | any
+}
+
+interface MultiSelectProps {
+  control?: any
+  label: string
+  name: string
+  options: { value: string | any; label: string | any }[]
+  placeholder?: string
+  hookForm?: boolean
+  loading?: boolean
+  [key: string]: any
+  multiple?: boolean
+}
+
+export default function AutoCompleteSearch({
+  control,
+  name,
+  options,
+  label,
+  loading, // pass this variable when options are from an async operation
+  hookForm = true,
+  multiple = false,
+  ...props
+}: MultiSelectProps) {
+  if (!hookForm) {
+    return (
+      <Autocomplete
+        multiple={multiple}
+        value={props.value}
+        fullWidth
+        onChange={(e, value) => {
+          props.onChange(value)
+        }}
+        options={options || []}
+        getOptionLabel={(option: Option) => option?.label || ''}
+        renderInput={(params) => (
+          <TextField
+            variant="outlined"
+            label={<FormLabel label={label} required={props.required} />}
+            {...params}
+          />
+        )}
+        {...props}
+      />
+    )
+  }
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState: { error } }) => (
+        <Box>
+          <Autocomplete
+            multiple={multiple}
+            loading={loading}
+            value={field.value}
+            fullWidth
+            onChange={(e, value) => {
+              field.onChange(value)
+            }}
+            options={options || []}
+            getOptionLabel={(option: Option) => option?.label || ''}
+            renderInput={(params) => (
+              <TextField
+                error={Boolean(error)}
+                variant="outlined"
+                label={<FormLabel label={label} required={props.required} />}
+                InputProps={{
+                  ...params.InputProps,
+                  endAdornment: (
+                    <>
+                      {loading ? (
+                        <CircularProgress color="inherit" size={20} />
+                      ) : null}
+                      {params.InputProps.endAdornment}
+                    </>
+                  ),
+                }}
+                {...params}
+              />
+            )}
+          />
+          {error && (
+            <Typography
+              fontSize={12}
+              sx={{
+                paddingLeft: '2px',
+                marginTop: '2px',
+              }}
+              color="error"
+            >
+              {error?.message}
+            </Typography>
+          )}
+        </Box>
+      )}
+    />
+  )
+}