@campxdev/shared 1.8.14 → 1.8.15

package/src/components/Input/DateTimePicker.tsx

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

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

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

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

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

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

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

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