@campxdev/shared 1.4.8 → 1.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.4.8",
+  "version": "1.4.9",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",
@@ -50,10 +50,10 @@
     "react-toastify": "^9.0.1",
     "styled-components": "^5.3.5",
     "swiper": "^8.1.5",
+    "use-immer": "^0.8.1",
     "yup": "^0.32.11"
   },
   "devDependencies": {
-    "@types/react-flatpickr": "^3.8.8",
     "@storybook/addon-actions": "^6.5.14",
     "@storybook/addon-essentials": "^6.5.14",
     "@storybook/addon-interactions": "^6.5.14",
@@ -67,6 +67,7 @@
     "@types/js-cookie": "^3.0.2",
     "@types/node": "^18.11.8",
     "@types/react": "^18.0.25",
+    "@types/react-flatpickr": "^3.8.8",
     "@typescript-eslint/eslint-plugin": "^5.35.1",
     "@typescript-eslint/parser": "^5.35.1",
     "eslint": "^8.23.0",

package/src/components/HookForm/MultiCheckbox.tsx

@@ -1,34 +1,41 @@
-import { Box, FormGroup, FormGroupProps, FormHelperText } from '@mui/material'
+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: Array<{ label: ReactNode; value: any }>
+  options: IOption[]
   required?: boolean
   row?: boolean
+  containerProps: BoxProps
 }
 
-export default function FormMultiCheckbox(props: Props) {
-  const {
-    name,
-    control,
-    label = '',
-    options = [],
-    required = false,
-    row = true,
-    ...rest
-  } = props
-
+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%">
+        <Box width="100%" {...containerProps}>
           <FormLabel label={label} name={name} required={required} />
           <FormGroup row={row} sx={{ flexWrap: 'wrap' }} {...rest}>
             {options?.map((item, index) => (

package/src/components/HookForm/MultiSelect.tsx

@@ -1,15 +1,18 @@
 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: { label: ReactNode; value: any }[]
+  options: IOption[]
   placeholder?: string
   loading?: boolean
   required?: boolean
+  value?: IOption
+  onChange?: (value: IOption[]) => void
 }
 
 export default function FormMultiSelect({

package/src/components/HookForm/RadioGroup.tsx

@@ -1,4 +1,4 @@
-import { Box, FormHelperText, RadioGroupProps } from '@mui/material'
+import { Box, BoxProps, RadioGroupProps } from '@mui/material'
 import { ReactNode } from 'react'
 import { Controller } from 'react-hook-form'
 import { RadioGroup } from '../Input'
@@ -11,18 +11,24 @@ interface Props extends RadioGroupProps {
   row?: boolean
   required?: boolean
   options: { value: any; label: string | ReactNode }[]
-  Container?: any
+  containerProps?: BoxProps
 }
 
-export default function FormRadioGroup(props: Props) {
-  const { name, control, label, options = [], row = false, ...rest } = props
-
+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%">
+        <Box width="100%" {...containerProps}>
           <RadioGroup
             row={row}
             name={name}
@@ -32,7 +38,6 @@ export default function FormRadioGroup(props: Props) {
             onChange={field.onChange}
             {...rest}
           />
-          {error?.message && <FormHelperText>{error.message}</FormHelperText>}
         </Box>
       )}
     />

package/src/components/HookForm/SingleCheckbox.tsx

@@ -9,16 +9,22 @@ interface Props extends CheckboxProps {
   control: any
 }
 
-export default function FormSingleCheckbox(props: Props) {
-  const { name, control, label = '', ...rest } = props
+export default function FormSingleCheckbox({
+  name,
+  control,
+  label,
+  onChange,
+  checked,
+  ...rest
+}: Props) {
   return (
     <Controller
       name={name}
       control={control}
       render={({ field, fieldState: { error } }) => (
         <SingleCheckbox
-          checked={field.value}
-          onChange={field.onChange}
+          checked={checked ?? field.value}
+          onChange={onChange ?? field.onChange}
           label={label}
           {...rest}
         />

package/src/components/HookForm/SingleSelect.tsx

@@ -16,8 +16,9 @@ export default function FormSingleSelect(props: Props) {
     options = [],
     control,
     label,
+    onChange,
+    value,
     firstItemEmpty = false,
-    size = 'medium',
   } = props
 
   const inputOptions = firstItemEmpty
@@ -30,11 +31,10 @@ export default function FormSingleSelect(props: Props) {
       control={control}
       render={({ field, fieldState: { error } }) => (
         <SingleSelect
-          size={size}
           label={label}
           name={name}
-          value={field.value}
-          onChange={field.onChange}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
           options={inputOptions}
           error={!!error}
           helperText={error?.message}

package/src/components/HookForm/TextField.tsx

@@ -8,9 +8,6 @@ type MyTextFieldProps = MuiTextFieldProps & {
   label?: string
   name: string
   required?: boolean
-  handleChange?: React.ChangeEventHandler<
-    HTMLTextAreaElement | HTMLInputElement
-  >
 }
 
 export default function FormTextField({
@@ -18,18 +15,20 @@ export default function FormTextField({
   control,
   label,
   required,
+  onChange,
+  value,
   ...rest
 }: MyTextFieldProps) {
   return (
     <Controller
       control={control}
       name={name}
-      render={({ field: { onChange, value }, fieldState: { error } }) => (
+      render={({ field, fieldState: { error } }) => (
         <TextField
           name={name}
           label={label}
-          onChange={onChange}
-          value={value}
+          onChange={onChange ?? field.onChange}
+          value={value ?? field?.value}
           required={required}
           error={error ? true : false}
           helperText={error ? error.message : null}

package/src/components/Input/AsyncSearchSelect/AsyncSearchSelect.tsx

@@ -0,0 +1,216 @@
+import { Close } from '@mui/icons-material'
+import { Box, Checkbox, CircularProgress, Typography } from '@mui/material'
+import _ from 'lodash'
+import { ReactNode, useCallback, useEffect, useState } from 'react'
+import { useQuery } from 'react-query'
+import { useImmer } from 'use-immer'
+import FormLabel from '../FormLabel'
+import { BpCheckedIcon, BpIcon } from '../SingleCheckbox'
+import TextField from '../TextField'
+import { IOption } from '../types'
+import {
+  StyledAnchor,
+  StyledListContainer,
+  StyledListItem,
+  StyledPopover,
+  StyledSelectedChip,
+} from './styles'
+
+const Anchor = ({ handleClick, id, label, required }) => {
+  return (
+    <Box>
+      <FormLabel label={label} name={id ?? ''} required={required} />
+      <StyledAnchor id={id} onClick={handleClick}>
+        <Typography variant="subtitle1">Click to search</Typography>
+      </StyledAnchor>
+    </Box>
+  )
+}
+
+const SelectedItems = ({ selectedItems, selectedLabel, onDelete }) => {
+  if (!selectedItems?.length) return null
+  return (
+    <Box marginTop="10px">
+      <FormLabel label={selectedLabel} name="form-label" required={false} />
+      <Box sx={{ display: 'flex', gap: '10px', flexWrap: 'wrap' }}>
+        {selectedItems?.map((item, index) => (
+          <StyledSelectedChip
+            deleteIcon={<Close />}
+            key={index}
+            label={item?.label}
+            variant={'outlined'}
+            onDelete={() => onDelete(item)}
+          />
+        ))}
+      </Box>
+    </Box>
+  )
+}
+
+const OptionsList = ({ loading, menuItems, onSelected, selected }) => {
+  const isIncluded = (id) => {
+    return selected?.options?.find((item) => item.value == id)
+  }
+
+  const handleClick = (selectedOption) => {
+    if (isIncluded(selectedOption.value)) {
+      onSelected(
+        selected?.options?.filter(
+          (item) => item.value !== selectedOption.value,
+        ),
+      )
+    } else {
+      onSelected([...selected.options, selectedOption])
+    }
+  }
+
+  if (loading)
+    return <CircularProgress size={16} sx={{ textAlign: 'center' }} />
+
+  if (!menuItems)
+    return (
+      <Typography
+        sx={{ padding: '10px' }}
+        variant="subtitle1"
+        textAlign={'center'}
+      >
+        Start typing to search
+      </Typography>
+    )
+  if (!menuItems?.length)
+    return (
+      <Typography
+        sx={{ padding: '10px' }}
+        variant="subtitle1"
+        textAlign={'center'}
+      >
+        No results found
+      </Typography>
+    )
+
+  return (
+    <>
+      {menuItems?.map((option, index) => (
+        <StyledListItem key={index} onClick={() => handleClick(option)}>
+          <Checkbox
+            icon={isIncluded(option?.value) ? <BpCheckedIcon /> : <BpIcon />}
+          />
+          {option.label}
+        </StyledListItem>
+      ))}
+    </>
+  )
+}
+
+type SearchInputProps = {
+  onChange: (value: IOption[]) => void
+  initialOptions?: IOption[]
+  searchQueryKey?: string
+  selectedLabel?: ReactNode
+  label: ReactNode
+  fetchFn: (params: { [x: string]: string }) => Promise<IOption[]>
+  required?: boolean
+}
+
+export default function AsyncSearchSelect({
+  label,
+  onChange,
+  initialOptions = [],
+  searchQueryKey = 'search',
+  selectedLabel = 'Selected Items',
+  fetchFn,
+  required,
+}: SearchInputProps) {
+  const [search, setSearch] = useState('')
+  const [width, setWidth] = useState(300)
+
+  const { data: searchResults, isLoading } = useQuery(
+    ['search', search],
+    (params: any) => fetchFn({ ...params, [searchQueryKey]: search }),
+    {
+      enabled: Boolean(search),
+    },
+  )
+
+  const [selected, setSelected] = useImmer({
+    options: [],
+  })
+
+  const [open, setOpen] = useState(false)
+  const [anchorEl, setAnchorEl] = useState<any>(null)
+  const id = open ? 'simple-popover' : undefined
+
+  const onSearchChange = (e) => {
+    setSearch(e.target.value)
+  }
+
+  const handleClick = (event) => {
+    const anchorWidth = event.target.getBoundingClientRect().width
+    setWidth(anchorWidth)
+    setOpen(true)
+    setAnchorEl(event.currentTarget)
+  }
+
+  const handleClose = () => {
+    setOpen(false)
+  }
+
+  const onSelected = (newValues) => {
+    setSelected((s) => {
+      s.options = newValues
+    })
+    if (onChange) onChange(newValues)
+  }
+
+  const onDeleteSelectedItem = (option) => {
+    onSelected(selected?.options?.filter((item) => item.value !== option.value))
+  }
+
+  const debouncedChange = useCallback(_.debounce(onSearchChange, 300), [])
+
+  useEffect(() => {
+    setSelected((s) => {
+      s.options = initialOptions
+    })
+  }, [initialOptions?.length])
+
+  return (
+    <Box>
+      <Anchor
+        handleClick={handleClick}
+        id={id}
+        label={label}
+        required={required}
+      />
+      <SelectedItems
+        onDelete={onDeleteSelectedItem}
+        selectedItems={selected?.options}
+        selectedLabel={selectedLabel}
+      />
+      <StyledPopover
+        popoverWidth={width}
+        open={open}
+        id={id}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+      >
+        <Box sx={{ padding: '14px' }}>
+          <TextField
+            size="small"
+            onChange={debouncedChange}
+            placeholder="Search"
+            autoFocus={true}
+          />
+          <StyledListContainer>
+            <OptionsList
+              loading={isLoading}
+              menuItems={searchResults}
+              onSelected={onSelected}
+              selected={selected}
+            />
+          </StyledListContainer>
+        </Box>
+      </StyledPopover>
+    </Box>
+  )
+}

package/src/components/Input/AsyncSearchSelect/index.tsx

@@ -0,0 +1 @@
+export { default } from './AsyncSearchSelect'

package/src/components/Input/AsyncSearchSelect/styles.tsx

@@ -0,0 +1,105 @@
+import {
+  alpha,
+  Box,
+  Chip,
+  ListItem,
+  Popover,
+  PopoverProps,
+  styled,
+} from '@mui/material'
+
+export const StyledPopover = styled((props: PopoverProps) => (
+  <Popover
+    elevation={0}
+    anchorPosition={{
+      left: 0,
+      top: 0,
+    }}
+    anchorOrigin={{ vertical: 'top', horizontal: 'left' }}
+    transitionDuration={150}
+    {...props}
+  />
+))<{ popoverWidth: number }>(({ theme, popoverWidth }) => ({
+  '& .MuiPaper-root': {
+    width: popoverWidth,
+    borderRadius: '10px',
+    boxShadow: '0px 4px 16px #0000000F',
+    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',
+      },
+    },
+  },
+}))
+
+export const StyledListContainer = styled(Box)(({ theme }) => ({
+  maxHeight: 'calc(100vh - 400px)',
+  overflowY: 'auto',
+  paddingTop: '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)',
+    },
+  },
+}))
+
+export const StyledListItem = styled(ListItem)(({ theme }) => ({
+  height: '40px',
+  cursor: 'pointer',
+  padding: '10px',
+  background: 'none',
+  '&.Mui-focused': {
+    background: 'none',
+  },
+  '& .MuiCheckbox-root': {
+    padding: 0,
+    marginRight: '10px',
+  },
+}))
+
+export const StyledAnchor = styled(Box)(({ theme }) => ({
+  height: '50px',
+  border: theme.borders.grayLight,
+  borderRadius: '10px',
+  padding: '14px',
+  cursor: 'pointer',
+  ':hover': {
+    borderColor: alpha(theme.palette.common.black, 0.3),
+  },
+  transition: 'border-color 200ms ease',
+  '& > .MuiTypography-root': {
+    fontSize: '14px',
+    pointerEvents: 'none',
+  },
+}))
+
+export const StyledSelectedChip = styled(Chip)(({ theme }) => ({
+  height: '40px',
+  background: '#F8F8F8',
+  border: '1px solid #D6D6D6',
+  '& .MuiSvgIcon-root': {
+    color: theme.palette.secondary.main,
+    fontSize: '15px',
+    margin: '0 14px',
+    '&:hover': {
+      color: theme.palette.secondary.main,
+    },
+  },
+}))

package/src/components/Input/DateTimePicker.tsx

@@ -36,7 +36,7 @@ export default function DateTimePicker({
     <Flatpickr
       options={{
         enableTime: true,
-        dateFormat: 'd-m-Y h:i:K',
+        dateFormat: 'd-m-Y h:i K',
         minDate,
         maxDate,
         minTime,

package/src/components/Input/FormLabel.tsx

@@ -9,7 +9,7 @@ export default function FormLabel({ label, required, name }) {
       component="label"
       sx={{
         color: alpha('#121212', 0.5),
-        marginBottom: '2px',
+        lineHeight: 2,
         '& span': {
           color: (theme) => theme.palette.error.main,
         },

package/src/components/Input/MultiSelect.tsx

@@ -62,6 +62,7 @@ const StyledPopper = styled(Popper)(({ theme }) => ({
       },
       '& .MuiCheckbox-root': {
         padding: 0,
+        marginRight: '10px',
       },
     },
     '&::-webkit-scrollbar': {
@@ -114,7 +115,6 @@ export default function MultiSelect({
           <Checkbox
             icon={<BpIcon />}
             checkedIcon={<BpCheckedIcon />}
-            style={{ marginRight: 8 }}
             checked={selected}
           />
           {option.label}

package/src/components/Input/RadioGroup.tsx

@@ -2,6 +2,7 @@ import {
   Box,
   BoxProps,
   FormControlLabel,
+  FormHelperText,
   Radio,
   RadioGroup as MuiRadioGroup,
   RadioGroupProps,
@@ -58,6 +59,8 @@ interface Props extends RadioGroupProps {
   required?: boolean
   options: { value: any; label: string | ReactNode }[]
   containerProps?: BoxProps
+  error?: boolean
+  helperText?: string | null
 }
 
 export default function RadioGroup(props: Props) {
@@ -70,6 +73,8 @@ export default function RadioGroup(props: Props) {
     value,
     onChange,
     containerProps,
+    error,
+    helperText,
     ...rest
   } = props
   return (
@@ -93,6 +98,7 @@ export default function RadioGroup(props: Props) {
           />
         ))}
       </MuiRadioGroup>
+      {error && <FormHelperText>{helperText}</FormHelperText>}
     </Box>
   )
 }

package/src/components/Input/SingleCheckbox.tsx

@@ -51,19 +51,20 @@ interface Props extends CheckboxProps {
   disabled?: boolean
   label: ReactNode
   name?: string
-  size?: 'small' | 'medium'
-  sx?: any
   checked: boolean
   onChange: (e) => void
 }
 
-export default function SingleCheckbox(props: Props) {
-  const { checked, size = 'medium', label = '', sx, onChange } = props
+export default function SingleCheckbox({
+  checked,
+  label,
+  onChange,
+  ...props
+}: Props) {
   return (
     <FormControlLabel
       control={
         <Checkbox
-          size={size}
           checked={checked}
           onChange={onChange}
           checkedIcon={<BpCheckedIcon />}

package/src/components/Input/TimePicker.tsx

@@ -33,7 +33,7 @@ export default function TimePicker({
       options={{
         enableTime: true,
         noCalendar: true,
-        dateFormat: 'h:i:K',
+        dateFormat: 'h:i K',
         minTime,
         maxTime,
       }}

package/src/components/Input/types.ts

@@ -0,0 +1,3 @@
+import { ReactNode } from 'react'
+
+export type IOption = { label: ReactNode; value: any }