@campxdev/shared 0.6.7 → 0.6.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "0.6.7",
+  "version": "0.6.9",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -26,6 +26,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@hookform/resolvers": "^2.9.10",
     "@mui/icons-material": "^5.6.2",
     "@mui/material": "^5.7.0",
     "@mui/x-date-pickers": "^5.0.0-alpha.3",
@@ -37,20 +38,19 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
-    "react-hook-form": "^7.31.1",
+    "react-hook-form": "^7.40.0",
     "react-query": "^3.39.0",
     "react-router-dom": "^6.4.2",
     "react-table": "^7.8.0",
     "react-toastify": "^9.0.1",
     "styled-components": "^5.3.5",
-    "swiper": "^8.1.5"
+    "swiper": "^8.1.5",
+    "yup": "^0.32.11"
   },
   "devDependencies": {
     "@types/js-cookie": "^3.0.2",
     "@types/node": "^18.11.8",
-    "typescript": "^4.8.4",
     "@types/react": "^18.0.25",
-    "react-scripts": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^5.35.1",
     "@typescript-eslint/parser": "^5.35.1",
     "eslint": "^8.23.0",
@@ -60,6 +60,8 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.1",
     "lerna": "^5.5.1",
-    "prettier": "^2.5.0"
+    "prettier": "^2.5.0",
+    "react-scripts": "^5.0.1",
+    "typescript": "^4.8.4"
   }
 }

package/src/components/Form/Form.tsx

@@ -0,0 +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>
+  )
+}

package/src/components/Form/RenderForm.tsx

@@ -0,0 +1,188 @@
+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 = (
+  normalFieldGroups: any[][],
+  fieldArrayGroups?: any[],
+) => {
+  const flatArray = normalFieldGroups.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)
+}
+
+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/HookForm/SingleSelect.tsx

@@ -26,7 +26,7 @@ const StyledFormControl = styled(FormControl)(({ theme }) => ({}))
 export default function FormSingleSelect(props: Props) {
   const {
     name = 'select',
-    options,
+    options = [],
     control,
     label,
     textColor,

package/src/components/Input/SingleSelect.tsx

@@ -24,7 +24,7 @@ interface Props extends SelectProps {
 export default function SingleSelect(props: Props) {
   const {
     name = 'select',
-    options,
+    options = [],
     control,
     label,
     textColor,

package/src/components/UploadButton/UploadButton.tsx

@@ -22,17 +22,21 @@ export default function UploadButton({
   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 && setLoading(true)
       axios
         .post(uploadUrl, formData)
         .then((res) => {
@@ -43,12 +47,15 @@ export default function UploadButton({
             fileName: res.data?.mediaObject?.originalFileName ?? '',
             id: res.data?.mediaObject?.id ?? '',
           })
+          refetchFn()
           setLoading(false)
+          loadingState && setLoading(false)
           if (onSuccess) onSuccess()
           formRef?.current.reset()
         })
         .catch((err) => {
           setLoading(false)
+          loadingState && setLoading(false)
           toast.error(
             err?.response?.data?.message ?? 'Server Error While Uploading File',
           )
@@ -58,6 +65,25 @@ export default function UploadButton({
   }
 
   return (
+    <>
+    {styledUpload ? (
+      <>
+        <div
+          onClick={() => {
+            ref.current.click()
+          }}
+        >
+          {styledUpload}
+        </div>
+      <input
+        accept={getAccept(type)}
+        type="file"
+        hidden
+        ref={ref}
+        onChange={handleChange}
+      />
+        </>
+      ) : (
     <>
       <form ref={formRef}>
         <input
@@ -78,6 +104,7 @@ export default function UploadButton({
           {getLabel(type)}
         </StyledButton>
       </form>
+    </>)}
     </>
   )
 }

package/src/components/UploadButton/types.ts

@@ -1,3 +1,5 @@
+import { ReactNode } from "react"
+
 interface Media {
   type: 'image' | 'video' | 'audio' | 'file'
   url: string
@@ -10,5 +12,8 @@ interface UploadButtonProps {
   onChange: (res: Media) => void
   uploadUrl: string
   onSuccess?: () => void
+  styledUpload?: ReactNode
+  loadingState?: (v) => void
+  refetchFn?: () => void
 }
 export type { Media, UploadButtonProps }

package/src/components/index.ts

@@ -23,6 +23,8 @@ import PageNotFound from './PageNotFound'
 import ChangePassword from './ChangePassword'
 import UploadButton from './UploadButton'
 import DialogWrapper from './DrawerWrapper/DialogWrapper'
+import Form from './Form/Form'
+import RenderForm from './Form/RenderForm'
 export { default as Image } from './Image'
 export { default as PageHeader } from './PageHeader'
 export { PageContent } from './PageContent'
@@ -74,6 +76,8 @@ export {
   ChangePassword,
   UploadButton,
   DialogWrapper,
+  Form,
+  RenderForm,
 }
 
 export * from './UploadButton/types'

package/src/config/axios.ts

@@ -4,6 +4,7 @@ import { toast } from 'react-toastify'
 import Cookies from 'js-cookie'
 import { NetworkStore } from '../components/ErrorBoundary/GlobalNetworkLoadingIndicator'
 import { isDevelopment } from '../constants'
+import { campxTenantKey } from '../contexts/Providers'
 
 const sessionKey = Cookies.get('campx_session_key')
 const clientId = window.location.pathname.split('/')[1] ?? 'campx_dev'
@@ -21,7 +22,7 @@ let axios = Axios.create({
   baseURL: process.env.REACT_APP_API_HOST,
   withCredentials: true,
   headers: {
-    'x-tenant-id': isDevelopment ? 'campx_dev' : clientId,
+    'x-tenant-id': isDevelopment ? 'campx_dev' : campxTenantKey,
     ...(isDevelopment &&
       sessionKey && {
         campx_session_key: sessionKey,