@campxdev/shared 1.4.25 → 1.5.0

package/src/components/FilterComponents/FilterButton.tsx

@@ -1,54 +1,54 @@
-import { Tune } from '@mui/icons-material'
-import { Box, styled } from '@mui/material'
-
-const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
-  ({ theme, size }) => ({
-    width: size === 'regular' ? '40px' : '50px',
-    height: size === 'regular' ? '40px' : '50px',
-    flexShrink: 0,
-    border: theme.borders.grayLight,
-    display: 'flex',
-    position: 'relative',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: '10px',
-    cursor: 'pointer',
-    '&:active': {
-      border: `1px solid ${theme.palette.primary.main}`,
-    },
-    transition: 'border 0.1s ease-in-out',
-  }),
-)
-
-const StyledNotify = styled(Box)({
-  height: '5px',
-  width: '5px',
-  backgroundColor: 'red',
-  position: 'absolute',
-  borderRadius: '50%',
-  top: 3,
-  right: 3,
-})
-
-export default function FilterButton({
-  onClick,
-  size = 'large',
-  filtersApplied,
-  ...props
-}: {
-  onClick: (e: any) => void
-  filtersApplied?: boolean
-  size?: 'regular' | 'large'
-}) {
-  const handleClick = (e) => {
-    e.stopPropagation()
-    if (!onClick) return
-    onClick(e)
-  }
-  return (
-    <StyledButtonWrapper size={size} {...props} onClick={handleClick}>
-      {filtersApplied && <StyledNotify />}
-      <Tune />
-    </StyledButtonWrapper>
-  )
-}
+import { Tune } from '@mui/icons-material'
+import { Box, styled } from '@mui/material'
+
+const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
+  ({ theme, size }) => ({
+    width: size === 'regular' ? '40px' : '50px',
+    height: size === 'regular' ? '40px' : '50px',
+    flexShrink: 0,
+    border: theme.borders.grayLight,
+    display: 'flex',
+    position: 'relative',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: '10px',
+    cursor: 'pointer',
+    '&:active': {
+      border: `1px solid ${theme.palette.primary.main}`,
+    },
+    transition: 'border 0.1s ease-in-out',
+  }),
+)
+
+const StyledNotify = styled(Box)(({ theme }) => ({
+  height: '5px',
+  width: '5px',
+  backgroundColor: theme.palette.error.main,
+  position: 'absolute',
+  borderRadius: '50%',
+  top: 5,
+  right: 5,
+}))
+
+export default function FilterButton({
+  onClick,
+  size = 'large',
+  filtersApplied,
+  ...props
+}: {
+  onClick: (e: any) => void
+  filtersApplied?: boolean
+  size?: 'regular' | 'large'
+}) {
+  const handleClick = (e) => {
+    e.stopPropagation()
+    if (!onClick) return
+    onClick(e)
+  }
+  return (
+    <StyledButtonWrapper size={size} {...props} onClick={handleClick}>
+      {filtersApplied && <StyledNotify />}
+      <Tune />
+    </StyledButtonWrapper>
+  )
+}

package/src/components/FilterComponents/SearchBar.tsx

@@ -1,40 +1,40 @@
-import { Search } from '@mui/icons-material'
-import { InputAdornment } from '@mui/material'
-import _ from 'lodash'
-import { useMemo, useState } from 'react'
-import { TextField } from '../Input'
-import { ITextFieldProps } from '../Input/TextField'
-
-interface SearchBarProps {
-  onSearch: (v: string) => void
-  textFieldProps?: ITextFieldProps
-}
-
-export default function SearchBar({ onSearch, ...restProps }: SearchBarProps) {
-  const [, setSearch] = useState('')
-
-  const debouncedChangeHandler = useMemo(
-    () =>
-      _.debounce((e) => {
-        setSearch(e.target.value)
-        onSearch(e.target.value)
-      }, 300),
-    [],
-  )
-
-  return (
-    <TextField
-      label="Search"
-      placeholder="Search"
-      onChange={debouncedChangeHandler}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment position="end">
-            <Search />
-          </InputAdornment>
-        ),
-      }}
-      {...restProps.textFieldProps}
-    />
-  )
-}
+import { Search } from '@mui/icons-material'
+import { InputAdornment } from '@mui/material'
+import _ from 'lodash'
+import { useMemo, useState } from 'react'
+import { TextField } from '../Input'
+import { ITextFieldProps } from '../Input/TextField'
+
+interface SearchBarProps {
+  onSearch: (v: string) => void
+  textFieldProps?: ITextFieldProps
+}
+
+export default function SearchBar({ onSearch, ...restProps }: SearchBarProps) {
+  const [, setSearch] = useState('')
+
+  const debouncedChangeHandler = useMemo(
+    () =>
+      _.debounce((e) => {
+        setSearch(e.target.value)
+        onSearch(e.target.value)
+      }, 300),
+    [],
+  )
+
+  return (
+    <TextField
+      label="Search"
+      placeholder="Search"
+      onChange={debouncedChangeHandler}
+      InputProps={{
+        endAdornment: (
+          <InputAdornment position="end">
+            <Search />
+          </InputAdornment>
+        ),
+      }}
+      {...restProps.textFieldProps}
+    />
+  )
+}

package/src/components/FloatingContainer.tsx

@@ -1,33 +1,33 @@
-import { Box, styled } from '@mui/material'
-export const StyledFooter = styled(Box)<{
-  show: boolean
-}>`
-  position: fixed;
-  background: #fff;
-  bottom: ${(props) => (props.show ? '0' : '-70px')};
-  right: 16px;
-  width: calc(100% - 236px);
-  height: 64px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 1.5rem;
-  padding: 1rem;
-  transition: bottom 400ms ease-in-out;
-  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
-`
-
-function FloatingContainer({
-  children,
-  show,
-}: {
-  show?: boolean
-  children: React.ReactNode
-}) {
-  return (
-    <>
-      <StyledFooter show={show ? show : true}>{children}</StyledFooter>
-    </>
-  )
-}
-export default FloatingContainer
+import { Box, styled } from '@mui/material'
+export const StyledFooter = styled(Box)<{
+  show: boolean
+}>`
+  position: fixed;
+  background: #fff;
+  bottom: ${(props) => (props.show ? '0' : '-70px')};
+  right: 16px;
+  width: calc(100% - 236px);
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 1.5rem;
+  padding: 1rem;
+  transition: bottom 400ms ease-in-out;
+  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
+`
+
+function FloatingContainer({
+  children,
+  show,
+}: {
+  show?: boolean
+  children: React.ReactNode
+}) {
+  return (
+    <>
+      <StyledFooter show={show ? show : true}>{children}</StyledFooter>
+    </>
+  )
+}
+export default FloatingContainer

package/src/components/Form/Form.tsx

@@ -1,156 +1,156 @@
-import axios, { axiosErrorToast } from '../../config/axios'
-import { yupResolver } from '@hookform/resolvers/yup'
-import { Alert, Box, Button, ButtonProps, Typography } from '@mui/material'
-import RenderForm, { generateYupSchema, RenderFormProps } from './RenderForm'
-import { ReactNode, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
-import { toast } from 'react-toastify'
-
-const makePostRequest = async ({
-  endpoint,
-  postBody,
-}: {
-  endpoint: string
-  postBody: any
-}) => {
-  const method = postBody?.id ? 'PUT' : 'POST'
-  const url = postBody?.id ? `${endpoint}/${postBody?.id}` : endpoint
-  return await axios({
-    url,
-    method,
-    data: postBody,
-  })
-}
-
-interface FormProps extends Omit<RenderFormProps, 'control'> {
-  buttonProps?: ButtonProps
-  submitBtn?: { label?: ReactNode }
-  cancelBtn?: { label?: ReactNode }
-  onSubmit?: (formData) => any
-  onCancel?: () => void
-  endPoint?: string
-  defaultValues?: any
-  refetchKey?: string
-  onSuccess?: () => void
-  previousData?: any
-}
-
-export default function Form({
-  submitBtn = { label: 'Submit' },
-  cancelBtn = { label: 'Cancel' },
-  buttonProps,
-  onSubmit = () => {},
-  endPoint,
-  defaultValues,
-  cols,
-  fields,
-  dropdowns,
-  refetchKey,
-  onSuccess = () => {},
-  onCancel,
-  previousData,
-}: FormProps) {
-  const queryClient = useQueryClient()
-  const [error, setError] = useState<any>(null)
-  const { control, watch, handleSubmit } = useForm({
-    defaultValues,
-    resolver: yupResolver(generateYupSchema([fields])),
-  })
-
-  const {
-    data,
-    mutate,
-    isLoading: posting,
-  } = useMutation(makePostRequest, {
-    onSuccess(data) {
-      queryClient.invalidateQueries(refetchKey)
-      toast.success('Created/Updated Successfully')
-      onSuccess && onSuccess()
-    },
-    onError(error: any) {
-      setError(error?.response?.data?.message)
-      axiosErrorToast(error)
-    },
-  })
-
-  const onError = (error) => {
-    const errorArray = Object.values(error)?.map((item: any) => item?.message)
-    setError(errorArray)
-  }
-
-  return (
-    <form
-      onSubmit={handleSubmit((originalFormData) => {
-        const modifiedFormData = onSubmit(originalFormData) ?? originalFormData
-
-        mutate({
-          endpoint: endPoint,
-          postBody: modifiedFormData,
-        })
-      }, onError)}
-    >
-      <RenderForm
-        cols={cols}
-        fields={fields}
-        control={control}
-        dropdowns={dropdowns}
-      />
-
-      <FormErrorDisplay message={error} />
-      <Box
-        sx={{
-          display: 'flex',
-          gap: '20px',
-          marginTop: '1rem',
-        }}
-      >
-        <Button fullWidth type="submit" {...buttonProps}>
-          {submitBtn?.label}
-        </Button>
-        <Button
-          fullWidth
-          variant="outlined"
-          onClick={() => {
-            onCancel ? onCancel() : null
-          }}
-          {...buttonProps}
-        >
-          {cancelBtn?.label}
-        </Button>
-      </Box>
-    </form>
-  )
-}
-
-const FormErrorDisplay = ({ message }: { message: string | string[] }) => {
-  if (!message) return null
-
-  if (typeof message === 'string')
-    return (
-      <Alert severity="error" sx={{ marginTop: '1rem' }}>
-        {message}
-      </Alert>
-    )
-
-  return (
-    <Alert
-      severity="error"
-      sx={{
-        marginTop: '1rem',
-        '& .MuiAlert-icon': {
-          display: 'flex',
-          alignItems: 'center',
-        },
-      }}
-    >
-      <Box>
-        {message?.map((item, index) => (
-          <Typography color="error" variant="body1" key={index}>
-            {item}
-          </Typography>
-        ))}
-      </Box>
-    </Alert>
-  )
-}
+import axios, { axiosErrorToast } from '../../config/axios'
+import { yupResolver } from '@hookform/resolvers/yup'
+import { Alert, Box, Button, ButtonProps, Typography } from '@mui/material'
+import RenderForm, { generateYupSchema, RenderFormProps } from './RenderForm'
+import { ReactNode, useState } from 'react'
+import { useForm } from 'react-hook-form'
+import { useMutation, useQueryClient } from 'react-query'
+import { toast } from 'react-toastify'
+
+const makePostRequest = async ({
+  endpoint,
+  postBody,
+}: {
+  endpoint: string
+  postBody: any
+}) => {
+  const method = postBody?.id ? 'PUT' : 'POST'
+  const url = postBody?.id ? `${endpoint}/${postBody?.id}` : endpoint
+  return await axios({
+    url,
+    method,
+    data: postBody,
+  })
+}
+
+interface FormProps extends Omit<RenderFormProps, 'control'> {
+  buttonProps?: ButtonProps
+  submitBtn?: { label?: ReactNode }
+  cancelBtn?: { label?: ReactNode }
+  onSubmit?: (formData) => any
+  onCancel?: () => void
+  endPoint?: string
+  defaultValues?: any
+  refetchKey?: string
+  onSuccess?: () => void
+  previousData?: any
+}
+
+export default function Form({
+  submitBtn = { label: 'Submit' },
+  cancelBtn = { label: 'Cancel' },
+  buttonProps,
+  onSubmit = () => {},
+  endPoint,
+  defaultValues,
+  cols,
+  fields,
+  dropdowns,
+  refetchKey,
+  onSuccess = () => {},
+  onCancel,
+  previousData,
+}: FormProps) {
+  const queryClient = useQueryClient()
+  const [error, setError] = useState<any>(null)
+  const { control, watch, handleSubmit } = useForm({
+    defaultValues,
+    resolver: yupResolver(generateYupSchema([fields])),
+  })
+
+  const {
+    data,
+    mutate,
+    isLoading: posting,
+  } = useMutation(makePostRequest, {
+    onSuccess(data) {
+      queryClient.invalidateQueries(refetchKey)
+      toast.success('Created/Updated Successfully')
+      onSuccess && onSuccess()
+    },
+    onError(error: any) {
+      setError(error?.response?.data?.message)
+      axiosErrorToast(error)
+    },
+  })
+
+  const onError = (error) => {
+    const errorArray = Object.values(error)?.map((item: any) => item?.message)
+    setError(errorArray)
+  }
+
+  return (
+    <form
+      onSubmit={handleSubmit((originalFormData) => {
+        const modifiedFormData = onSubmit(originalFormData) ?? originalFormData
+
+        mutate({
+          endpoint: endPoint,
+          postBody: modifiedFormData,
+        })
+      }, onError)}
+    >
+      <RenderForm
+        cols={cols}
+        fields={fields}
+        control={control}
+        dropdowns={dropdowns}
+      />
+
+      <FormErrorDisplay message={error} />
+      <Box
+        sx={{
+          display: 'flex',
+          gap: '20px',
+          marginTop: '1rem',
+        }}
+      >
+        <Button fullWidth type="submit" {...buttonProps}>
+          {submitBtn?.label}
+        </Button>
+        <Button
+          fullWidth
+          variant="outlined"
+          onClick={() => {
+            onCancel ? onCancel() : null
+          }}
+          {...buttonProps}
+        >
+          {cancelBtn?.label}
+        </Button>
+      </Box>
+    </form>
+  )
+}
+
+const FormErrorDisplay = ({ message }: { message: string | string[] }) => {
+  if (!message) return null
+
+  if (typeof message === 'string')
+    return (
+      <Alert severity="error" sx={{ marginTop: '1rem' }}>
+        {message}
+      </Alert>
+    )
+
+  return (
+    <Alert
+      severity="error"
+      sx={{
+        marginTop: '1rem',
+        '& .MuiAlert-icon': {
+          display: 'flex',
+          alignItems: 'center',
+        },
+      }}
+    >
+      <Box>
+        {message?.map((item, index) => (
+          <Typography color="error" variant="body1" key={index}>
+            {item}
+          </Typography>
+        ))}
+      </Box>
+    </Alert>
+  )
+}