@campxdev/shared 1.8.13 → 1.8.14

package/src/components/ExcelToJsonInput/ExcelJsonUpload.tsx

@@ -1,50 +0,0 @@
-import { Box, Button, ButtonProps, CircularProgress } from '@mui/material'
-import { AxiosResponse } from 'axios'
-import { useState } from 'react'
-import { useMutation } from 'react-query'
-import { toast } from 'react-toastify'
-import { axiosErrorToast } from '../../config/axios'
-import ExcelToJsonInput from './ExcelToJsonInput'
-
-interface ExcelJsonUploadProps {
-  postFn: (json) => Promise<AxiosResponse<any, any>>
-  btnProps?: ButtonProps
-}
-
-export default function ExcelJsonUpload({
-  postFn,
-  btnProps,
-}: ExcelJsonUploadProps) {
-  const [json, setJson] = useState([])
-  const { mutate, isLoading } = useMutation(postFn, {
-    onSuccess(data) {
-      toast.success('Data uploaded successfully')
-    },
-    onError(error) {
-      axiosErrorToast(error)
-    },
-  })
-
-  const onSubmit = () => {
-    mutate(json)
-  }
-
-  return (
-    <Box>
-      <Button
-        sx={{ marginBottom: '20px' }}
-        onClick={onSubmit}
-        endIcon={isLoading ? <CircularProgress size={20} /> : null}
-        disabled={isLoading}
-        {...btnProps}
-      >
-        Submit Data
-      </Button>
-      <ExcelToJsonInput
-        onChange={(jsonValue) => {
-          setJson(jsonValue)
-        }}
-      />
-    </Box>
-  )
-}

package/src/components/ExcelToJsonInput/ExcelToJsonInput.tsx

@@ -1,57 +0,0 @@
-import { Box } from '@mui/material'
-
-function tableToJson(innerText) {
-  if (!innerText) return []
-  const matrix = innerText
-    ?.split('\n')
-    ?.map((row) => row?.split('\t')?.map((cell) => (cell === '' ? null : cell)))
-
-  const arrayList = matrix.filter((row) => row.length === matrix[0].length)
-
-  var data = []
-  for (var i = 1; i < arrayList.length; i++) {
-    var tableRow = arrayList[i]
-    let rowObj = {}
-    for (var j = 0; j < arrayList[0].length; j++) {
-      rowObj[arrayList[0][j]] = tableRow[j]
-    }
-    data.push(rowObj)
-  }
-  return data
-}
-
-export default function ExcelToJsonInput({ onChange }) {
-  return (
-    <Box
-      onInput={(e) => {
-        const input = e.currentTarget.innerText
-        let json = tableToJson(input)
-        onChange(json)
-      }}
-      placeholder="paste"
-      contentEditable
-      sx={{
-        fontSize: '16px',
-        height: 'auto',
-        width: '100%',
-        border: '1px solid #ccc',
-        color: 'black',
-        padding: '20px',
-        '& table': {
-          borderCollapse: 'collapse',
-          border: '1px solid #ccc',
-          '& th, & td': {
-            border: '1px solid #ccc !important',
-            padding: '5px',
-            background: 'white !important',
-            fontSize: '14px',
-          },
-          '& font': {
-            fontSize: '14px',
-            fontFamily: 'sans-serif',
-          },
-        },
-      }}
-    />
-  )
-}

package/src/components/ExcelToJsonInput/index.tsx

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

package/src/components/FilterComponents/FilterButton.tsx

@@ -1,56 +0,0 @@
-import { Tune } from '@mui/icons-material'
-import { Box, styled } from '@mui/material'
-import { useEffect, useState } from 'react'
-
-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
-  size?: 'regular' | 'large'
-  filtersApplied?: any
-}) {
-  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,45 +0,0 @@
-import { Search } from '@mui/icons-material'
-import { InputAdornment } from '@mui/material'
-import _ from 'lodash'
-import { ReactNode, useMemo, useState } from 'react'
-import { TextField } from '../Input'
-import { ITextFieldProps } from '../Input/TextField'
-
-interface SearchBarProps {
-  onSearch: (v: string) => void
-  label?: ReactNode
-  textFieldProps?: ITextFieldProps
-}
-
-export default function SearchBar({
-  onSearch,
-  label,
-  ...restProps
-}: SearchBarProps) {
-  const [, setSearch] = useState('')
-
-  const debouncedChangeHandler = useMemo(
-    () =>
-      _.debounce((e) => {
-        setSearch(e.target.value)
-        onSearch(e.target.value)
-      }, 300),
-    [],
-  )
-
-  return (
-    <TextField
-      label={label}
-      placeholder="Search"
-      onChange={debouncedChangeHandler}
-      InputProps={{
-        endAdornment: (
-          <InputAdornment position="end">
-            <Search />
-          </InputAdornment>
-        ),
-      }}
-      {...restProps.textFieldProps}
-    />
-  )
-}

package/src/components/FloatingContainer.tsx

@@ -1,33 +0,0 @@
-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}>{children}</StyledFooter>
-    </>
-  )
-}
-export default FloatingContainer

package/src/components/Form/Form.tsx

@@ -1,147 +0,0 @@
-import { yupResolver } from '@hookform/resolvers/yup'
-import { Alert, Box, ButtonProps, Typography } from '@mui/material'
-import { AxiosResponse } from 'axios'
-import { ReactNode, useState } from 'react'
-import { useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
-import { axiosErrorToast } from '../../config/axios'
-import ActionButton from '../ActionButton'
-import RenderForm, { generateYupSchema, RenderFormProps } from './RenderForm'
-
-interface FormProps extends Omit<RenderFormProps, 'control'> {
-  buttonProps?: ButtonProps
-  submitBtn?: { label?: ReactNode }
-  cancelBtn?: { label?: ReactNode; hide: boolean }
-  defaultValues?: any
-  refetchKey?: string
-  previousData?: any
-  onCancel?: () => void
-  postFunction: (body: any) => Promise<AxiosResponse>
-  onPostSuccess?: (response: any) => void
-  onPostError?: (error: any) => void
-  onFormError?: (error: any) => void
-}
-
-export default function Form({
-  submitBtn = { label: 'Submit' },
-  cancelBtn = { label: 'Cancel', hide: false },
-  buttonProps,
-  defaultValues,
-  cols,
-  fields,
-  dropdowns,
-  refetchKey,
-  onCancel,
-  previousData,
-  postFunction,
-  onPostSuccess,
-  onPostError,
-  gap,
-  onFormError,
-}: FormProps) {
-  const queryClient = useQueryClient()
-  const [error, setError] = useState<any>(null)
-  const { control, watch, handleSubmit } = useForm({
-    defaultValues: previousData ? previousData : null,
-    resolver: yupResolver(
-      generateYupSchema({
-        fieldGroups: fields as any,
-      }),
-    ),
-  })
-
-  const { mutate, isLoading: posting } = useMutation(postFunction, {
-    onSuccess(data) {
-      queryClient.invalidateQueries(refetchKey)
-      onPostSuccess && onPostSuccess(data)
-    },
-    onError(error: any) {
-      onPostError ? onPostError(error) : axiosErrorToast(error)
-    },
-  })
-
-  const onError = (error) => {
-    const errorArray = Object.values(error)?.map((item: any) => item?.message)
-    setError(errorArray)
-    onFormError && onFormError(error)
-  }
-
-  return (
-    <form
-      onSubmit={handleSubmit((originalFormData) => {
-        mutate(originalFormData)
-      }, onError)}
-    >
-      <RenderForm
-        cols={cols}
-        gap={gap}
-        fields={fields}
-        control={control}
-        dropdowns={dropdowns}
-      />
-
-      <FormErrorDisplay message={error} />
-      <Box
-        sx={{
-          display: 'flex',
-          gap: '20px',
-          marginTop: `20px`,
-          justifyContent: 'center',
-        }}
-      >
-        <ActionButton
-          loading={posting}
-          disabled={posting}
-          type="submit"
-          {...buttonProps}
-        >
-          {submitBtn?.label}
-        </ActionButton>
-        {!cancelBtn?.hide && (
-          <ActionButton
-            fullWidth
-            variant="outlined"
-            onClick={() => {
-              onCancel ? onCancel() : null
-            }}
-            {...buttonProps}
-          >
-            {cancelBtn?.label}
-          </ActionButton>
-        )}
-      </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>
-  )
-}

package/src/components/Form/RenderForm.tsx

@@ -1,189 +0,0 @@
-import { Box, Typography } from '@mui/material'
-import { ReactNode } from 'react'
-import * as yup from 'yup'
-import { Control } from 'react-hook-form'
-import {
-  FormDatePicker,
-  FormRadioGroup,
-  FormSingleSelect,
-  FormTextField,
-} from '../HookForm'
-
-export const generateYupSchema = (options: {
-  fieldGroups: any[][]
-  fieldArrayGroups?: any[]
-  extraValidations?: any
-}) => {
-  const flatArray = options.fieldGroups.flat()
-
-  const validations = flatArray
-    ?.filter(
-      (item) => item?.required !== undefined || item?.validation !== undefined,
-    )
-    ?.reduce((acc, curr) => {
-      return {
-        [curr.name]:
-          curr?.validation ??
-          yup.string().required(`${curr?.label} is required`),
-        ...acc,
-      }
-    }, {})
-
-  return yup.object().shape({ ...validations, ...options.extraValidations })
-}
-
-type FormTypes =
-  | 'FormTextField'
-  | 'Display'
-  | 'FormSingleSelect'
-  | 'FormRadioGroup'
-  | 'FormDatePicker'
-
-export interface Field {
-  render: FormTypes
-  name: string
-  label?: string
-  required?: boolean
-  elementProps?: any
-  disabled?: boolean
-  valiation?: any
-}
-
-export interface RenderFormProps {
-  fields: Field[]
-  dropdowns?: { [x: string]: { label: string | ReactNode; value: any }[] }
-  control: Control<any, any>
-  cols: number
-  data?: any
-  fieldArrayOptions?: { index: number; name: string }
-  gap?: string | number
-}
-
-const RenderForm = ({
-  fields,
-  dropdowns,
-  control,
-  cols,
-  data = null,
-  fieldArrayOptions,
-  gap = '1rem',
-}: RenderFormProps) => {
-  return (
-    <>
-      <Box
-        sx={{
-          display: 'grid',
-          gridTemplateColumns: `repeat(${cols}, 1fr)`,
-          gap,
-          width: '100%',
-        }}
-      >
-        {fields?.map((item) => {
-          return renderFormField({
-            field: item,
-            control,
-            dropdown: dropdowns ? dropdowns[item?.name] : null,
-            elementProps: item?.elementProps,
-            value: data ? data[item?.name] : null,
-            fieldArrayOptions,
-          })
-        })}
-      </Box>
-    </>
-  )
-}
-export default RenderForm
-
-const renderFormField = ({
-  field,
-  control,
-  dropdown,
-  elementProps,
-  value,
-  fieldArrayOptions,
-}) => {
-  const name = fieldArrayOptions?.name
-    ? `${fieldArrayOptions?.name}.${fieldArrayOptions?.index}.${field?.name}`
-    : field?.name
-
-  switch (field.render) {
-    case 'FormTextField':
-      return (
-        <FormTextField
-          control={control}
-          name={name}
-          label={field?.label}
-          required={field?.required}
-          disabled={field?.disabled}
-          {...elementProps}
-        />
-      )
-
-    case 'FormSingleSelect':
-      return (
-        <FormSingleSelect
-          options={dropdown}
-          control={control}
-          name={name}
-          label={field?.label}
-          required={field?.required}
-          disabled={field?.disabled}
-          {...elementProps}
-        />
-      )
-    case 'FormDatePicker':
-      return (
-        <FormDatePicker
-          size="medium"
-          control={control}
-          name={name}
-          label={field?.label}
-          required={field?.required}
-          disabled={field?.disabled}
-          {...elementProps}
-        />
-      )
-    case 'FormRadioGroup':
-      return (
-        <FormRadioGroup
-          row={true}
-          options={dropdown}
-          control={control}
-          name={name}
-          label={field?.label}
-          required={field?.required}
-          disabled={field?.disabled}
-          {...elementProps}
-        />
-      )
-    case 'Display':
-      return <FormDisplay label={field?.label} value={value} />
-
-    case 'NestedForm':
-      return <NestedForm label={field?.label} nestedFields={[]} />
-
-    default:
-      return <>{field?.label}</>
-  }
-}
-
-const FormDisplay = ({ label, value }) => {
-  return (
-    <Box>
-      <Typography variant="subtitle2">{label}</Typography>
-      <Typography variant="body1" marginTop={'5px'}>
-        {value ?? '-'}
-      </Typography>
-    </Box>
-  )
-}
-
-const NestedForm = ({
-  nestedFields,
-  label,
-}: {
-  label: ReactNode
-  nestedFields: Field[]
-}) => {
-  return <></>
-}

package/src/components/FullScreenLoader.tsx

@@ -1,19 +0,0 @@
-import { Box, CircularProgress } from '@mui/material'
-
-const FullScreenLoader = () => {
-  return (
-    <Box
-      sx={{
-        margin: 0,
-        padding: 0,
-        height: '100vh',
-        width: '100vw',
-        display: 'grid',
-        placeItems: 'center',
-      }}
-    >
-      <CircularProgress size={60} />
-    </Box>
-  )
-}
-export default FullScreenLoader