@campxdev/shared 1.8.13 → 1.8.14

package/src/components/HookForm/AutoCompleteSearch.tsx

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

package/src/components/HookForm/DatePicker.tsx

@@ -1,40 +0,0 @@
-import { Controller } from 'react-hook-form'
-import { DatePicker } from '../Input'
-import { IDatePicker } from '../Input/DatePicker'
-interface Props extends Omit<IDatePicker, 'onChange' | 'value'> {
-  name: string
-  control: any
-}
-
-export default function FormDatePicker({
-  name,
-  control,
-  minDate,
-  maxDate,
-  label,
-  required = false,
-  ...rest
-}: Props) {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <DatePicker
-          label={label}
-          required={required}
-          onChange={field.onChange}
-          value={field.value}
-          minDate={minDate}
-          maxDate={maxDate}
-          inputProps={{
-            ...rest.inputProps,
-            error: !!error,
-            helperText: error?.message ?? '',
-          }}
-          {...rest}
-        />
-      )}
-    />
-  )
-}

package/src/components/HookForm/DateTimePicker.tsx

@@ -1,47 +0,0 @@
-import { Controller } from 'react-hook-form'
-import DateTimePicker, { IDateTimePicker } from '../Input/DateTimePicker'
-
-interface Props extends Omit<IDateTimePicker, 'onChange' | 'value'> {
-  name: string
-  control: any
-}
-
-export default function FormDateTimePicker({
-  name,
-  control,
-  label,
-  required,
-  minDate,
-  maxDate,
-  minTime,
-  maxTime,
-  ...rest
-}: Props) {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <DateTimePicker
-          name={name}
-          label={label}
-          required={required}
-          onChange={(v) => {
-            field.onChange(v)
-          }}
-          value={field.value}
-          minDate={minDate}
-          maxDate={maxDate}
-          minTime={minTime}
-          maxTime={maxTime}
-          inputProps={{
-            ...rest.inputProps,
-            error: !!error,
-            helperText: error?.message ?? '',
-          }}
-          {...rest}
-        />
-      )}
-    />
-  )
-}

package/src/components/HookForm/FormLabel.tsx

@@ -1,14 +0,0 @@
-import { Typography } from '@mui/material'
-
-export default function FormLabel({ label, required }) {
-  return (
-    <>
-      {label}
-      {required && (
-        <Typography fontSize={14} component={'span'} color="error">
-          {' *'}
-        </Typography>
-      )}
-    </>
-  )
-}

package/src/components/HookForm/MultiCheckbox.tsx

@@ -1,69 +0,0 @@
-import {
-  Box,
-  BoxProps,
-  FormGroup,
-  FormGroupProps,
-  FormHelperText,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import { FormLabel, SingleCheckbox } from '../Input'
-import { IOption } from '../Input/types'
-
-interface Props extends FormGroupProps {
-  label?: ReactNode
-  name: string
-  control: any
-  options: IOption[]
-  required?: boolean
-  row?: boolean
-  containerProps?: BoxProps
-}
-
-export default function FormMultiCheckbox({
-  name,
-  control,
-  label = '',
-  options = [],
-  required = false,
-  row = true,
-  containerProps,
-  ...rest
-}: Props) {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <Box width="100%" {...containerProps}>
-          <FormLabel label={label} name={name} required={required} />
-          <FormGroup row={row} sx={{ flexWrap: 'wrap' }} {...rest}>
-            {options?.map((item, index) => (
-              <SingleCheckbox
-                key={index}
-                name={name}
-                checked={field?.value
-                  ?.map((item: any) => item?.value)
-                  ?.includes(item?.value)}
-                label={item.label}
-                onChange={(e) => {
-                  let value = field.value || []
-                  if (e.target.checked) {
-                    let newValue = [...value, item]
-                    field.onChange(newValue)
-                  } else {
-                    let filteredValue = value.filter(
-                      (opt: any) => opt?.value !== item.value,
-                    )
-                    field.onChange(filteredValue)
-                  }
-                }}
-              />
-            ))}
-          </FormGroup>
-          {error && <FormHelperText>{error.message}</FormHelperText>}
-        </Box>
-      )}
-    />
-  )
-}

package/src/components/HookForm/MultiSelect.tsx

@@ -1,53 +0,0 @@
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import { MultiSelect } from '../Input'
-import { IOption } from '../Input/types'
-
-interface MultiSelectProps {
-  control: any
-  label: ReactNode
-  name: string
-  options: IOption[]
-  placeholder?: string
-  loading?: boolean
-  required?: boolean
-  value?: IOption[] | IOption
-  onChange?: (value: IOption[] | IOption) => void
-  multiple?: boolean
-}
-
-export default function FormMultiSelect({
-  control,
-  name,
-  options,
-  label,
-  loading,
-  required,
-  multiple = true,
-  ...props
-}: MultiSelectProps) {
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field, fieldState: { error } }) => {
-        return (
-          <MultiSelect
-            multiple={multiple}
-            value={field.value}
-            label={label}
-            onChange={(value) => {
-              field.onChange(value)
-            }}
-            loading={loading}
-            options={options || []}
-            error={!!error}
-            required={required}
-            helperText={error ? error.message : null}
-            {...props}
-          />
-        )
-      }}
-    />
-  )
-}

package/src/components/HookForm/RadioGroup.tsx

@@ -1,47 +0,0 @@
-import { Box, BoxProps, RadioGroupProps } from '@mui/material'
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import { RadioGroup } from '../Input'
-
-interface Props extends RadioGroupProps {
-  label?: ReactNode
-  name: string
-  control: any
-  sx?: any
-  row?: boolean
-  required?: boolean
-  options: { value: any; label: string | ReactNode }[]
-  containerProps?: BoxProps
-}
-
-export default function FormRadioGroup({
-  name,
-  control,
-  label,
-  options = [],
-  row = false,
-  containerProps,
-  ...rest
-}: Props) {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <Box width="100%" {...containerProps}>
-          <RadioGroup
-            row={row}
-            name={name}
-            label={label}
-            options={options}
-            value={field.value}
-            onChange={field.onChange}
-            error={error ? true : false}
-            helperText={error ? error?.message : null}
-            {...rest}
-          />
-        </Box>
-      )}
-    />
-  )
-}

package/src/components/HookForm/SingleCheckbox.tsx

@@ -1,34 +0,0 @@
-import { CheckboxProps } from '@mui/material'
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import { SingleCheckbox } from '../Input'
-
-interface Props extends CheckboxProps {
-  label?: ReactNode
-  name: string
-  control: any
-}
-
-export default function FormSingleCheckbox({
-  name,
-  control,
-  label,
-  onChange,
-  checked,
-  ...rest
-}: Props) {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <SingleCheckbox
-          checked={checked ?? field.value}
-          onChange={onChange ?? field.onChange}
-          label={label}
-          {...rest}
-        />
-      )}
-    />
-  )
-}

package/src/components/HookForm/SingleSelect.tsx

@@ -1,46 +0,0 @@
-import { SelectProps } from '@mui/material'
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import { SingleSelect } from '../Input'
-
-type Props = {
-  name: string
-  control: any
-  options: Array<{ label: ReactNode; value: any }>
-  firstItemEmpty?: boolean
-} & SelectProps
-
-export default function FormSingleSelect(props: Props) {
-  const {
-    name = 'select',
-    options = [],
-    control,
-    label,
-    onChange,
-    value,
-    firstItemEmpty = false,
-  } = props
-
-  const inputOptions = firstItemEmpty
-    ? [{ label: 'All', value: '__empty__' }, ...options]
-    : options
-
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <SingleSelect
-          label={label}
-          name={name}
-          onChange={onChange ?? field.onChange}
-          value={value ?? field?.value}
-          options={inputOptions}
-          error={!!error}
-          helperText={error?.message}
-          {...props}
-        />
-      )}
-    />
-  )
-}

package/src/components/HookForm/TextField.tsx

@@ -1,40 +0,0 @@
-import { TextFieldProps as MuiTextFieldProps } from '@mui/material'
-import React from 'react'
-import { Controller } from 'react-hook-form'
-import { TextField } from '../Input'
-
-type MyTextFieldProps = MuiTextFieldProps & {
-  control: any
-  label?: string
-  name: string
-  required?: boolean
-}
-
-export default function FormTextField({
-  name,
-  control,
-  label,
-  required,
-  onChange,
-  value,
-  ...rest
-}: MyTextFieldProps) {
-  return (
-    <Controller
-      control={control}
-      name={name}
-      render={({ field, fieldState: { error } }) => (
-        <TextField
-          name={name}
-          label={label}
-          onChange={onChange ?? field.onChange}
-          value={value ?? field?.value}
-          required={required}
-          error={error ? true : false}
-          helperText={error ? error.message : null}
-          {...rest}
-        />
-      )}
-    />
-  )
-}

package/src/components/HookForm/TimePicker.tsx

@@ -1,40 +0,0 @@
-import { Controller } from 'react-hook-form'
-import TimePicker, { ITimePicker } from '../Input/TimePicker'
-
-interface Props extends Omit<ITimePicker, 'onChange' | 'value'> {
-  name: string
-  control: any
-}
-
-export default function FormTimePicker({
-  name,
-  control,
-  label,
-  minTime,
-  maxTime,
-  required,
-  ...rest
-}: Props) {
-  return (
-    <Controller
-      name={name}
-      control={control}
-      render={({ field, fieldState: { error } }) => (
-        <TimePicker
-          label={label}
-          required={required}
-          onChange={field.onChange}
-          value={field.value}
-          minTime={minTime}
-          maxTime={maxTime}
-          inputProps={{
-            ...rest.inputProps,
-            error: !!error,
-            helperText: error?.message ?? '',
-          }}
-          {...rest}
-        />
-      )}
-    />
-  )
-}

package/src/components/HookForm/index.ts

@@ -1,23 +0,0 @@
-import SingleSelect from './SingleSelect'
-import FormDatePicker from './DatePicker'
-import MultiCheckbox from './MultiCheckbox'
-import MultiSelect from './MultiSelect'
-import RadioGroup from './RadioGroup'
-import SingleCheckbox from './SingleCheckbox'
-import AutoCompleteSearch from './AutoCompleteSearch'
-import FormTextField from './TextField'
-import TimePicker from './TimePicker'
-import FormDateTimePicker from './DateTimePicker'
-
-export {
-  SingleSelect as FormSingleSelect,
-  FormDatePicker,
-  FormTextField,
-  MultiCheckbox as FormMultiCheckbox,
-  MultiSelect as FormMultiSelect,
-  RadioGroup as FormRadioGroup,
-  SingleCheckbox as FormSingleCheckbox,
-  AutoCompleteSearch as FormAutoCompleteSearch,
-  TimePicker as FormTimePicker,
-  FormDateTimePicker,
-}