@campxdev/shared 1.8.13 → 1.8.14

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

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

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

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

@@ -1,105 +0,0 @@
-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/AutoCompleteSearch.tsx

@@ -1,121 +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 AutoCompleteSearch({
-  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} name={name} />
-            }
-            {...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}
-                    name={name}
-                  />
-                }
-                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/Input/DatePicker.tsx

@@ -1,87 +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 monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
-import TextField from './TextField'
-
-export interface IDatePicker {
-  label?: ReactNode
-  name?: string
-  control?: any
-  minDate?: Date | string | number
-  maxDate?: Date | string | number
-  required?: boolean
-  value: Date | null
-  onChange: (value: Date) => void
-  placeholder?: string
-  inputProps?: TextFieldProps
-  size?: 'medium' | 'small'
-  monthSelect?: boolean
-}
-
-const plugins = [
-  monthSelectPlugin({
-    shorthand: true, //defaults to false
-    dateFormat: 'm.y', //defaults to "F Y"
-    altFormat: 'F Y', //defaults to "F Y"
-  }),
-]
-
-export default function FormDatePicker({
-  name,
-  label,
-  minDate,
-  maxDate,
-  value,
-  onChange,
-  placeholder,
-  size = 'medium',
-  required = false,
-  monthSelect,
-  ...rest
-}: IDatePicker) {
-  return (
-    <Flatpickr
-      options={{
-        dateFormat: 'd-m-Y',
-        minDate,
-        maxDate,
-        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/DateRangePicker.tsx

@@ -1,105 +0,0 @@
-import { Box, BoxProps, FormHelperText, styled, SvgIcon } from '@mui/material'
-import { ReactNode, useEffect, useState } from 'react'
-import { DateRangeIcon } from '../IconButtons'
-import DateTimePicker from './DateTimePicker'
-import FormLabel from './FormLabel'
-
-const StyledDateRangePicker = styled(Box)<{ size: 'small' | 'medium' }>(
-  ({ theme, size }) => ({
-    borderRadius: '10px',
-    height: '50px',
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    border: theme.borders.grayLight,
-    '& .MuiOutlinedInput-notchedOutline': {
-      display: 'none',
-    },
-    '& .MuiSvgIcon-root': {
-      margin: '0 20px',
-      marginTop: '8px',
-    },
-    ...(size === 'small' && {
-      borderRadius: '5px',
-      height: '40px',
-      '& .MuiSvgIcon-root': {
-        margin: '0 20px',
-        marginTop: '8px',
-      },
-    }),
-  }),
-)
-
-interface IDateRangePickerProps {
-  value: {
-    start: Date
-    end: Date
-  }
-  onChange: (value: { start: Date; end: Date }) => void
-  enableTime?: boolean
-  size?: 'small' | 'medium'
-  containerProps?: BoxProps
-  label?: ReactNode
-  required?: boolean
-  name?: string
-  error?: boolean
-  helperText?: string
-}
-export default function DateRangePicker({
-  value,
-  onChange,
-  enableTime = false,
-  size = 'medium',
-  containerProps,
-  required,
-  error,
-  helperText,
-  label,
-  name,
-}: IDateRangePickerProps) {
-  const [state, setState] = useState({
-    start: null,
-    end: null,
-  })
-
-  useEffect(() => {
-    setState(value)
-  }, [value])
-
-  return (
-    <Box width={'100%'} {...containerProps}>
-      <FormLabel
-        required={required}
-        name={name ?? 'date-range-picker'}
-        label={label}
-      />
-      <StyledDateRangePicker size={size}>
-        <DateTimePicker
-          placeholder="From Date"
-          value={state.start}
-          onChange={(value) => {
-            setState((prev) => ({ ...prev, start: value }))
-            onChange({ ...state, start: value })
-          }}
-          enableTime={enableTime}
-          inputProps={{ InputProps: null, size: size }}
-        />
-        <SvgIcon>
-          <DateRangeIcon />
-        </SvgIcon>
-        <DateTimePicker
-          minDate={state[0]}
-          placeholder="To Date"
-          enableTime={enableTime}
-          value={state.end}
-          onChange={(value) => {
-            setState((prev) => ({ ...prev, end: value }))
-            onChange({ ...state, end: value })
-          }}
-          inputProps={{ InputProps: null, size: size }}
-        />
-      </StyledDateRangePicker>
-      <>{error && <FormHelperText>{helperText}</FormHelperText>}</>
-    </Box>
-  )
-}