@campxdev/shared 1.8.14 → 1.8.15

package/src/components/ExcelToJsonInput/ExcelJsonUpload.tsx

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

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

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

package/src/components/FilterComponents/FilterButton.tsx

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

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

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

package/src/components/Form/Form.tsx

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

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

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