@campxdev/shared 1.8.13 → 1.8.14

package/src/components/Input/DateTimePicker.tsx

@@ -1,84 +0,0 @@
-import EventIcon from '@mui/icons-material/Event'
-import { InputAdornment, TextFieldProps } from '@mui/material'
-import 'flatpickr/dist//flatpickr.css'
-import { ReactNode } from 'react'
-import Flatpickr, { DateTimePickerProps } from 'react-flatpickr'
-import TextField from './TextField'
-
-export interface IDateTimePicker {
-  label?: ReactNode
-  name?: string
-  required?: boolean
-  minDate?: Date | string | number
-  maxDate?: Date | string | number
-  minTime?: Date | string | number
-  maxTime?: Date | string | number
-  value: Date | null
-  onChange: (value: Date) => void
-  placeholder?: string
-  inputProps?: TextFieldProps
-  enableTime?: boolean
-  size?: 'medium' | 'small'
-}
-
-export default function DateTimePicker({
-  name,
-  label,
-  required,
-  minDate,
-  maxDate,
-  minTime,
-  maxTime,
-  onChange,
-  value,
-  placeholder,
-  enableTime = true,
-  size = 'medium',
-  ...rest
-}: IDateTimePicker) {
-  return (
-    <Flatpickr
-      options={{
-        enableTime,
-        dateFormat: enableTime ? 'd-m-Y h:i K' : 'd-m-Y',
-        minDate,
-        maxDate,
-        minTime,
-        maxTime,
-        allowInput: true,
-      }}
-      onChange={(dates: Date[]) => {
-        if (onChange) onChange(dates[0])
-      }}
-      onClose={(dates) => {
-        if (onChange) onChange(dates[0])
-      }}
-      value={value || null}
-      render={(
-        props: Omit<DateTimePickerProps, 'options' | 'render'>,
-        ref: (node: HTMLInputElement | null) => void,
-      ) => {
-        return (
-          <TextField
-            size={size}
-            placeholder={placeholder}
-            label={label}
-            name={name}
-            variant="outlined"
-            autoComplete="off"
-            required={required}
-            inputRef={ref}
-            InputProps={{
-              endAdornment: (
-                <InputAdornment position="end">
-                  <EventIcon />
-                </InputAdornment>
-              ),
-            }}
-            {...rest.inputProps}
-          />
-        )
-      }}
-    />
-  )
-}

package/src/components/Input/FormLabel.tsx

@@ -1,21 +0,0 @@
-import { alpha, styled, Typography, TypographyProps } from '@mui/material'
-
-export default function FormLabel({ label, required, name }) {
-  if (typeof label !== 'string') return label
-
-  return (
-    <Typography
-      htmlFor={name}
-      component="label"
-      sx={{
-        color: alpha('#121212', 0.5),
-        lineHeight: 2,
-        '& span': {
-          color: (theme) => theme.palette.error.main,
-        },
-      }}
-    >
-      {label} {required && <span>{' *'}</span>}
-    </Typography>
-  )
-}

package/src/components/Input/MultiCheckbox.tsx

@@ -1,64 +0,0 @@
-import { Box, BoxProps, FormGroup, FormHelperText } from '@mui/material'
-import { ReactNode } from 'react'
-import { Controller } from 'react-hook-form'
-import FormLabel from './FormLabel'
-import SingleCheckbox from './SingleCheckbox'
-
-interface Props {
-  label?: ReactNode
-  name: string
-  size?: 'small' | 'medium'
-  options: Array<{ label: ReactNode; value: any }>
-  required?: boolean
-  row?: boolean
-  error?: boolean
-  helperText?: ReactNode
-  value: { label: string; value: any }[]
-  onChange: (value: { label: ReactNode; value: any }[]) => void
-  containerProps?: BoxProps
-}
-
-export default function MultiCheckbox({
-  name,
-  label,
-  options = [],
-  required = false,
-  value = [],
-  onChange,
-  error,
-  helperText,
-  row = true,
-  containerProps,
-  ...rest
-}: Props) {
-  return (
-    <Box width="100%" {...containerProps}>
-      <FormLabel label={label} required={required} name={name} />
-      <FormGroup row={row} sx={{ flexWrap: 'wrap' }}>
-        {options?.map((item, index) => (
-          <SingleCheckbox
-            name={name}
-            key={index}
-            label={item.label}
-            checked={value
-              ?.map((item: any) => item?.value)
-              ?.includes(item?.value)}
-            onChange={(e) => {
-              if (e.target.checked) {
-                let newValue = [...value, item]
-                onChange(newValue)
-              } else {
-                let filteredValue = value.filter(
-                  (opt: any) => opt?.value !== item.value,
-                )
-                onChange(filteredValue)
-              }
-            }}
-            {...rest}
-          />
-        ))}
-      </FormGroup>
-      {error && <FormHelperText>{helperText}</FormHelperText>}
-    </Box>
-  )
-}

package/src/components/Input/MultiSelect.tsx

@@ -1,150 +0,0 @@
-import { Close, KeyboardArrowDown } from '@mui/icons-material'
-import {
-  alpha,
-  Autocomplete,
-  Checkbox,
-  CircularProgress,
-  Popper,
-  styled,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import { BpCheckedIcon, BpIcon } from './SingleCheckbox'
-import TextField from './TextField'
-import { IOption } from './types'
-
-const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
-  '& .MuiAutocomplete-tag': {
-    border: '1px solid #D1D1D1',
-    background: '#F8F8F8',
-    borderRadius: '5px',
-    height: '38px',
-    '& .MuiSvgIcon-root': {
-      fontSize: '15px',
-      marginLeft: '5px',
-      fontWeight: 700,
-      color: theme.palette.secondary.main,
-      '&:hover': {
-        color: alpha(theme.palette.secondary.main, 0.8),
-      },
-    },
-  },
-}))
-
-const StyledPopper = styled(Popper)(({ theme }) => ({
-  '& .MuiPaper-root': {
-    borderRadius: '10px',
-    borderTopRightRadius: 0,
-    borderTopLeftRadius: 0,
-    boxShadow: '0px 4px 16px #0000000F',
-    marginTop: '1px',
-    '& .MuiAutocomplete-listbox': {
-      minWidth: '240px',
-      padding: '10px',
-      '& .MuiAutocomplete-option': {
-        padding: '10px',
-        background: 'none',
-        '&.Mui-focused': {
-          background: 'none',
-        },
-      },
-      '& .MuiCheckbox-root': {
-        padding: 0,
-        marginRight: '10px',
-      },
-    },
-    '&::-webkit-scrollbar': {
-      width: '0.5em',
-      height: '0.5em',
-    },
-
-    '&::-webkit-scrollbar-thumb': {
-      backgroundColor: 'rgba(0, 0, 0, 0.15)',
-      borderRadius: '3px',
-
-      '&:hover': {
-        background: 'rgba(0, 0, 0, 0.2)',
-      },
-    },
-  },
-}))
-
-interface MultiSelectProps {
-  label: ReactNode
-  name?: string
-  options: IOption[]
-  placeholder?: string
-  loading?: boolean
-  value: IOption[] | IOption
-  onChange: (value: IOption[] | IOption) => void
-  required?: boolean
-  error?: boolean
-  helperText?: string
-  multiple?: boolean
-}
-
-export default function MultiSelect({
-  name,
-  options,
-  label,
-  loading,
-  value,
-  onChange,
-  required,
-  error,
-  helperText,
-  multiple = true,
-  ...props
-}: MultiSelectProps) {
-  return (
-    <StyledAutocomplete
-      multiple={multiple}
-      value={value}
-      loading={loading}
-      fullWidth
-      getOptionLabel={(option: any) => option?.label || ''}
-      options={options || []}
-      onChange={(e, value: any) => {
-        if (!onChange) return
-        onChange(value)
-      }}
-      isOptionEqualToValue={(option: any, value: any) =>
-        option?.value === value?.value
-      }
-      disableCloseOnSelect
-      PopperComponent={StyledPopper}
-      renderOption={(props, option: any, { selected }) => (
-        <li {...props}>
-          <Checkbox
-            icon={<BpIcon />}
-            checkedIcon={<BpCheckedIcon />}
-            checked={selected}
-          />
-          {option.label}
-        </li>
-      )}
-      popupIcon={<KeyboardArrowDown />}
-      ChipProps={{ deleteIcon: <Close /> }}
-      renderInput={(params) => (
-        <TextField
-          error={error}
-          helperText={helperText}
-          label={label}
-          required={required}
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <>
-                {loading ? (
-                  <CircularProgress color="inherit" size={20} />
-                ) : null}
-                {params.InputProps.endAdornment}
-              </>
-            ),
-          }}
-          {...params}
-        />
-      )}
-      {...props}
-    />
-  )
-}

package/src/components/Input/RadioGroup.tsx

@@ -1,104 +0,0 @@
-import {
-  Box,
-  BoxProps,
-  FormControlLabel,
-  FormHelperText,
-  Radio,
-  RadioGroup as MuiRadioGroup,
-  RadioGroupProps,
-  styled,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import FormLabel from './FormLabel'
-
-const BpIcon = styled('span')(({ theme }) => ({
-  borderRadius: '50%',
-  width: 18,
-  height: 18,
-  border: '1px solid #CBCBCB',
-  backgroundColor: '#f8f8f8',
-  '.Mui-focusVisible &': {
-    outline: '2px auto rgba(19,124,189,.6)',
-    outlineOffset: 2,
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#f8f8f8',
-  },
-  'input:disabled ~ &': {
-    boxShadow: 'none',
-    background: 'rgba(206,217,224,.5)',
-  },
-}))
-
-const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
-  border: '1px solid #609D52',
-  background: '#f8f8f8',
-  backgroundImage:
-    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  '&:before': {
-    backgroundColor: '#609D52',
-    content: '""',
-    display: 'block',
-    width: 8,
-    height: 8,
-    margin: '4px',
-    left: '2px',
-    borderRadius: '50%',
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#f8f8f8',
-  },
-}))
-
-interface Props extends RadioGroupProps {
-  label: string | ReactNode
-  name?: string
-  control?: any
-  sx?: any
-  row?: boolean
-  required?: boolean
-  options: { value: any; label: string | ReactNode }[]
-  containerProps?: BoxProps
-  error?: boolean
-  helperText?: string | null
-}
-
-export default function RadioGroup(props: Props) {
-  const {
-    name,
-    label,
-    options = [],
-    row = false,
-    required = false,
-    value,
-    onChange,
-    containerProps,
-    error,
-    helperText,
-    ...rest
-  } = props
-  return (
-    <Box width="100%" {...containerProps}>
-      <FormLabel label={label} name={name} required={required} />
-      <MuiRadioGroup
-        value={value}
-        onChange={onChange}
-        row={row}
-        name={name}
-        {...rest}
-      >
-        {options.map((item, index) => (
-          <FormControlLabel
-            key={index}
-            value={item.value}
-            control={
-              <Radio checkedIcon={<BpCheckedIcon />} icon={<BpIcon />} />
-            }
-            label={item.label}
-          />
-        ))}
-      </MuiRadioGroup>
-      {error && <FormHelperText>{helperText}</FormHelperText>}
-    </Box>
-  )
-}

package/src/components/Input/SingleCheckbox.tsx

@@ -1,78 +0,0 @@
-import {
-  Checkbox,
-  CheckboxProps,
-  FormControlLabel,
-  styled,
-} from '@mui/material'
-import { ReactNode } from 'react'
-
-export const BpIcon = styled('span')(({}) => ({
-  borderRadius: 3,
-  width: 18,
-  height: 18,
-  marginLeft: '2px',
-  border: '1px solid #CBCBCB',
-  backgroundColor: '#F8F8F8',
-  '.Mui-focusVisible &': {
-    outline: '2px auto rgba(19,124,189,.6)',
-    outlineOffset: 2,
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#F8F8F8',
-  },
-  'input:disabled ~ &': {
-    boxShadow: 'none',
-    background: 'rgba(206,217,224,.5)',
-  },
-}))
-
-export const BpCheckedIcon = styled(BpIcon)(({ theme }) => ({
-  backgroundColor: '#F8F8F8',
-  border: `1px solid ${theme.palette.primary.main}`,
-  backgroundImage:
-    'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
-  marginLeft: '2px',
-  '&:before': {
-    content: '""',
-    display: 'block',
-    width: 8,
-    height: 8,
-    margin: '4px',
-    left: '2px',
-    background: theme.palette.primary.main,
-    borderRadius: '2px',
-  },
-  'input:hover ~ &': {
-    backgroundColor: '#F8F8F8',
-  },
-}))
-
-interface Props extends CheckboxProps {
-  disabled?: boolean
-  label: ReactNode
-  name?: string
-  checked: boolean
-  onChange: (e) => void
-}
-
-export default function SingleCheckbox({
-  checked,
-  label,
-  onChange,
-  ...props
-}: Props) {
-  return (
-    <FormControlLabel
-      control={
-        <Checkbox
-          checked={checked}
-          onChange={onChange}
-          checkedIcon={<BpCheckedIcon />}
-          icon={<BpIcon />}
-          {...props}
-        />
-      }
-      label={label}
-    />
-  )
-}

package/src/components/Input/SingleSelect.tsx

@@ -1,104 +0,0 @@
-import { ArrowDownward, KeyboardArrowDown } from '@mui/icons-material'
-import {
-  FormControl,
-  MenuItem,
-  SelectProps,
-  styled,
-  Select,
-  FormHelperText,
-  Box,
-  BoxProps,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import FormLabel from './FormLabel'
-
-const StyledFormControl = styled(FormControl)(({ theme }) => ({
-  '& .MuiInputBase-root': {
-    '& legend': { display: 'none' },
-    '& .MuiSelect-select': {},
-    '& .MuiSvgIcon-root': {
-      right: '14px',
-    },
-  },
-}))
-
-const PaperProps = {
-  elevation: 0,
-  sx: {
-    borderRadius: '10px',
-    borderTopRightRadius: 0,
-    borderTopLeftRadius: 0,
-    boxShadow: '0px 4px 16px #0000000F',
-    maxHeight: 360,
-    marginTop: '1px',
-    '& .MuiList-root': {
-      padding: 0,
-      '& li': {
-        height: '60px',
-        borderBottom: (theme) => theme.borders.grayLight,
-        ':hover': {
-          backgroundColor: 'rgba(0, 0, 0, 0.025)',
-        },
-      },
-      '& > :last-child': {
-        borderBottom: 'none',
-      },
-    },
-  },
-}
-
-type Props = {
-  options: Array<{ label: ReactNode; value: any }>
-  onChange?: (value: any) => void
-  required?: boolean
-  firstItemEmpty?: boolean
-  helperText?: string
-  containerProps?: BoxProps
-} & SelectProps
-
-export default function SingleSelect({
-  name = 'select',
-  options = [],
-  label,
-  onChange,
-  required,
-  value,
-  helperText,
-  containerProps,
-  firstItemEmpty = false,
-  ...props
-}: Props) {
-  const inputOptions = firstItemEmpty
-    ? [{ label: 'All', value: '__empty__' }, ...options]
-    : options
-
-  return (
-    <Box width="100%" {...containerProps}>
-      <FormLabel required={required} label={label} name={name} />
-      <StyledFormControl fullWidth>
-        <Select
-          id={name}
-          multiple={false}
-          variant="outlined"
-          value={value}
-          displayEmpty={firstItemEmpty}
-          fullWidth
-          label={label}
-          MenuProps={{
-            PaperProps: PaperProps,
-          }}
-          IconComponent={KeyboardArrowDown}
-          onChange={onChange}
-          {...props}
-        >
-          {inputOptions?.map((item, index) => (
-            <MenuItem key={index} value={item.value}>
-              {item.label}
-            </MenuItem>
-          ))}
-        </Select>
-        {helperText && <FormHelperText>{helperText}</FormHelperText>}
-      </StyledFormControl>
-    </Box>
-  )
-}

package/src/components/Input/TextField.tsx

@@ -1,46 +0,0 @@
-import {
-  Box,
-  BoxProps,
-  styled,
-  TextField as MuiTextField,
-  TextFieldProps as MuiTextFieldProps,
-} from '@mui/material'
-import FieldLabel from './FormLabel'
-
-const StyledTextField = styled(MuiTextField)(({ theme }) => ({
-  '& label': {
-    display: 'none',
-  },
-  '& legend': {
-    '& span': {
-      display: 'none',
-    },
-  },
-}))
-
-export type ITextFieldProps = {
-  containerProps?: BoxProps
-} & MuiTextFieldProps
-
-export default function TextField({
-  name,
-  label,
-  value,
-  onChange,
-  required = false,
-  containerProps,
-  ...rest
-}: ITextFieldProps) {
-  return (
-    <Box width="100%" {...containerProps}>
-      <FieldLabel label={label} required={required} name={name} />
-      <StyledTextField
-        id={name}
-        value={value}
-        name={name}
-        onChange={onChange}
-        {...rest}
-      />
-    </Box>
-  )
-}