@campxdev/shared 0.1.0

package/src/components/HookForm/MultiSelect.tsx

@@ -0,0 +1,100 @@
+import { Close } from '@mui/icons-material'
+import { Autocomplete, CircularProgress, TextField } from '@mui/material'
+import React from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+interface MultiSelectProps {
+  control?: any
+  label: string
+  name?: string
+  options: { key: string | number; name: any }[]
+  placeholder?: string
+  loading?: boolean
+  [key: string]: any
+  hookForm?: boolean
+  value?: any
+  onChange?: (value: any) => void
+}
+
+export default function FormMultiSelect({
+  control,
+  name,
+  options,
+  label,
+  loading,
+  value,
+  onChange,
+  hookForm = true,
+  ...props
+}: MultiSelectProps) {
+  if (!hookForm) {
+    return (
+      <Autocomplete
+        multiple
+        value={value}
+        loading={loading}
+        fullWidth
+        isOptionEqualToValue={(option, value) => option.key === value.key}
+        onChange={(e, value) => {
+          if (!onChange) return
+          onChange(value)
+        }}
+        options={options || []}
+        getOptionLabel={(option) => option?.name || ''}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            variant="outlined"
+            label={<FormLabel label={label} required={props.required} />}
+          />
+        )}
+        {...props}
+      />
+    )
+  }
+  return (
+    <Controller
+      control={control}
+      name={name}
+      render={({ field, fieldState: { error } }) => (
+        <Autocomplete
+          multiple
+          value={field.value}
+          loading={loading}
+          fullWidth
+          isOptionEqualToValue={(option, value) => option.key === value.key}
+          onChange={(e, value) => {
+            field.onChange(value)
+          }}
+          options={options || []}
+          getOptionLabel={(option) => option?.name || ''}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              variant="outlined"
+              InputProps={{
+                ...params.InputProps,
+                endAdornment: (
+                  <React.Fragment>
+                    {loading ? (
+                      <CircularProgress color="inherit" size={20} />
+                    ) : null}
+                    {params.InputProps.endAdornment}
+                  </React.Fragment>
+                ),
+              }}
+              label={<FormLabel label={label} required={props.required} />}
+              error={error ? true : false}
+              helperText={error ? error.message : null}
+            />
+          )}
+          ChipProps={{
+            deleteIcon: <Close />,
+          }}
+          {...props}
+        />
+      )}
+    />
+  )
+}

package/src/components/HookForm/RadioGroup.tsx

@@ -0,0 +1,113 @@
+import {
+  Box,
+  FormControlLabel,
+  Radio,
+  RadioGroup as MuiRadioGroup,
+  RadioGroupProps,
+  Stack,
+  Typography,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+interface Props extends RadioGroupProps {
+  label: string
+  name: string
+  control: any
+  sx?: any
+  row?: boolean
+  required?: boolean
+  options: { value: any; label: string | ReactNode }[]
+  Container?: any
+}
+
+export default function FormRadioGroup(props: Props) {
+  const {
+    name,
+    control,
+    label,
+    sx,
+    options = [],
+    row = false,
+    required = false,
+    Container,
+  } = props
+
+  return (
+    <>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <Stack direction={row ? 'row' : 'column'}>
+            {Container ? (
+              <Container style={{ borderColor: error ? 'red' : '' }}>
+                {
+                  <RadioComponent
+                    field={field}
+                    name={name}
+                    label={label}
+                    row={row}
+                    options={options}
+                    required={required}
+                  />
+                }
+              </Container>
+            ) : (
+              <RadioComponent
+                field={field}
+                name={name}
+                label={label}
+                row={row}
+                options={options}
+                required={required}
+              />
+            )}
+            {error && (
+              <Typography
+                variant="subtitle1"
+                sx={{ pl: '2px' }}
+                color="rgb(211, 47, 47)"
+              >
+                {error.message}
+              </Typography>
+            )}
+          </Stack>
+        )}
+      />
+    </>
+  )
+}
+
+const RadioComponent = ({ label, required, row, options, name, field }) => {
+  return (
+    <>
+      <Box>
+        <Box sx={{ display: 'flex' }}>
+          <Typography variant="subtitle2">{label}</Typography>
+          {required && (
+            <Typography fontSize={14} component={'span'} color="error">
+              {'  *'}
+            </Typography>
+          )}
+        </Box>
+        <MuiRadioGroup
+          value={field.value}
+          onChange={field.onChange}
+          row={row}
+          name={name}
+        >
+          {options.map((item, index) => (
+            <FormControlLabel
+              key={index}
+              value={item.value}
+              control={<Radio />}
+              label={item.label}
+            />
+          ))}
+        </MuiRadioGroup>
+      </Box>
+    </>
+  )
+}

package/src/components/HookForm/SingleCheckbox.tsx

@@ -0,0 +1,46 @@
+import { Checkbox, FormControlLabel, Typography } from '@mui/material'
+import { Controller } from 'react-hook-form'
+
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  sx?: any
+}
+
+export default function FormSingleCheckbox(props: Props) {
+  const { name, size = 'medium', control, label = '', sx } = props
+  return (
+    <>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <>
+            <FormControlLabel
+              sx={{ width: '100%', ...sx }}
+              control={
+                <Checkbox
+                  size={size}
+                  checked={field.value}
+                  onChange={field.onChange}
+                />
+              }
+              label={label}
+            />
+            {error && (
+              <Typography
+                variant="caption"
+                sx={{ pl: '2px' }}
+                color="rgb(211, 47, 47)"
+              >
+                {error.message}
+              </Typography>
+            )}
+          </>
+        )}
+      />
+    </>
+  )
+}

package/src/components/HookForm/SingleSelect.tsx

@@ -0,0 +1,93 @@
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  SelectProps,
+  styled,
+  Typography,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+interface Props extends SelectProps {
+  name?: string
+  control?: any
+  options: Array<{ label: ReactNode; value: any }>
+  label?: string
+  textColor?: string
+  onChange?: (value: any) => void
+  required?: boolean
+  firstItemEmpty?: boolean
+}
+
+const StyledFormControl = styled(FormControl)(({ theme }) => ({}))
+
+export default function FormSingleSelect(props: Props) {
+  const {
+    name = 'select',
+    options,
+    control,
+    label,
+    textColor,
+    onChange,
+    required,
+    firstItemEmpty = false,
+    size = 'medium',
+  } = props
+
+  const inputOptions = firstItemEmpty
+    ? [{ label: 'All', value: '__empty__' }, ...options]
+    : options
+
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field, fieldState: { error } }) => (
+        <StyledFormControl size={size} fullWidth>
+          <InputLabel id={name}>
+            <FormLabel required={required} label={label} />
+          </InputLabel>
+          <Select
+            size={size}
+            error={Boolean(error)}
+            variant="outlined"
+            sx={{ color: textColor }}
+            fullWidth
+            label={label}
+            displayEmpty={firstItemEmpty}
+            MenuProps={{
+              PaperProps: {
+                sx: { maxHeight: 300 },
+              },
+            }}
+            value={field.value}
+            onChange={(e) => {
+              if (onChange) onChange(e.target.value)
+              field.onChange(e.target.value)
+            }}
+          >
+            {inputOptions?.map((item, index) => (
+              <MenuItem key={index} value={item.value}>
+                {item.label}
+              </MenuItem>
+            ))}
+          </Select>
+          {error && (
+            <Typography
+              fontSize={12}
+              sx={{
+                paddingLeft: '2px',
+                marginTop: '2px',
+              }}
+              color="error"
+            >
+              {error.message}
+            </Typography>
+          )}
+        </StyledFormControl>
+      )}
+    />
+  )
+}

package/src/components/HookForm/TextField.tsx

@@ -0,0 +1,74 @@
+import {
+  TextField as MuiTextField,
+  TextFieldProps as MuiTextFieldProps,
+  Typography,
+} from '@mui/material'
+import React from 'react'
+import { Controller } from 'react-hook-form'
+import FormLabel from './FormLabel'
+
+type MyTextFieldProps = MuiTextFieldProps & {
+  control?: any
+  label?: string
+  name?: string
+  value?: any
+  hookForm?: boolean
+  required?: boolean
+  handleChange?: React.ChangeEventHandler<
+    HTMLTextAreaElement | HTMLInputElement
+  >
+}
+
+export default function FormTextField({
+  name,
+  control,
+  label,
+  value,
+  handleChange,
+  required = false,
+  hookForm = true,
+  ...rest
+}: MyTextFieldProps) {
+  if (!hookForm)
+    return (
+      <MuiTextField
+        label={
+          <>
+            {label}
+            {required && (
+              <Typography fontSize={14} component={'span'} color="error">
+                {' *'}
+              </Typography>
+            )}
+          </>
+        }
+        value={value}
+        name={name}
+        onChange={handleChange}
+        {...rest}
+      />
+    )
+  return (
+    <Controller
+      control={control}
+      name={name}
+      defaultValue=""
+      render={({ field: { onChange, value }, fieldState: { error } }) => (
+        <MuiTextField
+          {...rest}
+          name={name}
+          label={<FormLabel required={required} label={label} />}
+          onChange={(e) => {
+            onChange(e)
+            if (handleChange) {
+              handleChange(e)
+            }
+          }}
+          value={value}
+          error={error ? true : false}
+          helperText={error ? error.message : null}
+        />
+      )}
+    />
+  )
+}

package/src/components/HookForm/TimePicker.tsx

@@ -0,0 +1,82 @@
+import DateRangeIcon from '@mui/icons-material/DateRange'
+import { InputAdornment, TextField, Typography } from '@mui/material'
+import {
+  LocalizationProvider,
+  TimePicker as MuiTimePicker,
+} from '@mui/x-date-pickers'
+import { AdapterMoment } from '@mui/x-date-pickers/AdapterMoment'
+import { Controller } from 'react-hook-form'
+
+interface Props {
+  label?: string
+  name: string
+  size?: 'small' | 'medium'
+  control: any
+  required?: boolean
+  hookForm?: boolean
+}
+
+export default function FormTimePicker(props: Props) {
+  const {
+    name,
+    size = 'small',
+    control,
+    label = '',
+    required,
+    hookForm = true,
+  } = props
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+      <Controller
+        name={name}
+        control={control}
+        render={({ field, fieldState: { error } }) => (
+          <>
+            <MuiTimePicker
+              label={
+                <>
+                  {label}
+                  {required && (
+                    <Typography fontSize={14} component={'span'} color="error">
+                      {' *'}
+                    </Typography>
+                  )}
+                </>
+              }
+              mask="__:__ _M"
+              inputFormat="hh:mm a"
+              value={field.value || null}
+              onChange={field.onChange}
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <DateRangeIcon />
+                  </InputAdornment>
+                ),
+              }}
+              renderInput={(params) => (
+                <TextField
+                  fullWidth
+                  size={size}
+                  {...params}
+                  error={Boolean(error)}
+                  onBlur={field.onBlur}
+                />
+              )}
+            />
+            {error && (
+              <Typography
+                variant="caption"
+                sx={{ pl: '2px' }}
+                color="rgb(211, 47, 47)"
+              >
+                {error.message}
+              </Typography>
+            )}
+          </>
+        )}
+      />
+    </LocalizationProvider>
+  )
+}

package/src/components/HookForm/index.ts

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

package/src/components/IconButtons/IconButtons.tsx

@@ -0,0 +1,137 @@
+import { Box, IconButton, IconButtonProps, styled } from '@mui/material'
+import { ReactNode } from 'react'
+import {
+  DeleteIcon,
+  DisabledDeleteIcon,
+  DisabledEditIcon,
+  EditIcon,
+  ViewIcon,
+  PrintIcon,
+} from './Icons'
+
+interface ButtonProps extends IconButtonProps {
+  disabledText?: string
+  actionType?: 'delete' | 'edit' | 'view' | 'print'
+}
+
+function Button({ ...props }: ButtonProps) {
+  const handleClick = (e) => {
+    e.stopPropagation()
+    if (!props.onClick) return
+    props.onClick(e)
+  }
+  return (
+    <StyledIconButton
+      {...props}
+      onClick={handleClick}
+      actionType={props.actionType ? props.actionType : 'view'}
+    >
+      {props.children}
+    </StyledIconButton>
+  )
+}
+
+function DisabledButton({
+  disabledText,
+  children,
+}: {
+  disabledText?: string
+  children: ReactNode
+}) {
+  return (
+    <Box
+      sx={{
+        maxHeight: '14px',
+      }}
+      title={disabledText ? disabledText : 'disabled'}
+    >
+      {children}
+    </Box>
+  )
+}
+
+export function ViewButton({ disabled, disabledText, ...props }: ButtonProps) {
+  if (disabled) {
+    return (
+      <DisabledButton {...props} disabledText={disabledText}>
+        <ViewIcon />
+      </DisabledButton>
+    )
+  }
+  return (
+    <Button {...props} actionType="view">
+      <ViewIcon />
+    </Button>
+  )
+}
+
+export function EditButton({ disabled, disabledText, ...props }: ButtonProps) {
+  if (disabled) {
+    return (
+      <DisabledButton
+        disabledText={disabledText ?? 'Default types can not be edited'}
+      >
+        <DisabledEditIcon />
+      </DisabledButton>
+    )
+  }
+  return (
+    <Button {...props} actionType="edit">
+      <EditIcon />
+    </Button>
+  )
+}
+
+export function PrintButton({ disabled, disabledText, ...props }: ButtonProps) {
+  if (disabled) {
+    return (
+      <DisabledButton
+        disabledText={disabledText ?? 'Default types can not be edited'}
+      >
+        <DisabledEditIcon />
+      </DisabledButton>
+    )
+  }
+  return (
+    <Button {...props} actionType="print">
+      <PrintIcon />
+    </Button>
+  )
+}
+
+export function DeleteButton({
+  disabled,
+  disabledText,
+  ...props
+}: ButtonProps) {
+  if (disabled) {
+    return (
+      <DisabledButton
+        disabledText={disabledText ?? 'Default types can not be deleted'}
+      >
+        <DisabledDeleteIcon />
+      </DisabledButton>
+    )
+  }
+  return (
+    <Button {...props} actionType="delete">
+      <DeleteIcon />
+    </Button>
+  )
+}
+
+const StyledIconButton = styled(IconButton)<{
+  actionType: 'delete' | 'edit' | 'view' | 'print'
+}>(({ theme, actionType }) => ({
+  padding: 0,
+  '&:hover': {
+    '& path': {
+      fill:
+        actionType === 'delete'
+          ? 'red'
+          : actionType === 'edit'
+          ? theme.palette.common.yellow
+          : theme.palette.error.main,
+    },
+  },
+}))