@campxdev/shared 1.7.15 → 1.8.1

package/src/components/Form/RenderForm.tsx

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

package/src/components/HookForm/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 FormAutoCompleteSearch({
-  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 FormAutoCompleteSearch({
+  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>
+      )}
+    />
+  )
+}