@dartech/arsenal-ui 1.3.0 → 1.3.2

package/src/lib/Forms/ControlQueryAutocomplete.tsx

@@ -1,197 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import TextField from '@mui/material/TextField';
-import Autocomplete from '@mui/material/Autocomplete';
-import CircularProgress from '@mui/material/CircularProgress';
-
-import { useController, useWatch } from 'react-hook-form';
-import { useQuery } from '@tanstack/react-query';
-import qs from 'qs';
-import { useDebounce } from '../../utils/hooks';
-import useAutocomplete from './useAutocomplete';
-
-import { ControlAutocompleteProps } from './ControlAutocomplete';
-import { PaginateData } from '../../interfaces';
-
-type PaginateParams = {
-  page: string;
-  size: string;
-  [key: string]: string;
-};
-
-type ControlQueryAutocompleteProps<T> = Omit<ControlAutocompleteProps, 'options'> & {
-  searchBy: string;
-  sortBy?: string;
-  queryFunction: (params: PaginateParams) => Promise<PaginateData<T>>;
-  itemQueryFunction?: (valueKey: string) => Promise<T>;
-};
-
-export function ControlQueryAutocomplete<T>({
-  name,
-  label,
-  control,
-  required = false,
-  searchBy,
-  labelKey,
-  multiple = false,
-  disabled,
-  valueKey,
-  sortBy = '',
-  hideErrorMessage,
-  disableCloseOnSelect,
-  textFieldProps,
-  onChange,
-  queryFunction,
-  validate,
-  itemQueryFunction,
-  ...autocompleteProps
-}: ControlQueryAutocompleteProps<T>) {
-  const {
-    field: { ref, onChange: setFieldValue },
-    fieldState: { error, isDirty },
-  } = useController({ control, name, rules: { required: required && 'Please, fill this field', validate } });
-  const formValue = useWatch({ control, name, defaultValue: multiple ? [] : null });
-
-  const { getOptionLabel, isOptionEqualToValue, renderOption } = useAutocomplete({ valueKey, labelKey });
-
-  const [open, setOpen] = useState(false);
-  const [inputValue, setInputValue] = useState('');
-  const [searchValue, setSearchValue] = useState('');
-  const [totalItems, setTotalItems] = useState(0);
-  const [page, setPage] = useState(0);
-  const [options, setOptions] = useState<unknown[]>([]);
-
-  const debouncedChange = useDebounce((val) => {
-    setPage(0);
-    setSearchValue(val);
-    setOptions([]);
-  }, 500);
-
-  const handleInputChange = useCallback(
-    (_, value) => {
-      setInputValue(value);
-      debouncedChange(value);
-    },
-    [debouncedChange]
-  );
-
-  const handleValueChange = useCallback(
-    (event, value) => {
-      setFieldValue(value);
-      if (onChange) {
-        onChange(event, value);
-      }
-    },
-    [setFieldValue, onChange]
-  );
-
-  useEffect(() => {
-    if (!isDirty && formValue && itemQueryFunction) {
-      let requestValue = formValue;
-
-      if (typeof formValue === 'object' && valueKey in formValue) {
-        requestValue = formValue[valueKey];
-      }
-
-      itemQueryFunction(requestValue)
-        .then((item) => {
-          setFieldValue(item);
-          setInputValue(item[labelKey]);
-        })
-        .catch();
-    }
-  }, [formValue, isDirty, valueKey, labelKey, itemQueryFunction, setFieldValue]);
-
-  const handleOnScroll = useCallback(
-    (event: React.SyntheticEvent) => {
-      const listboxNode = event.currentTarget;
-      if (
-        listboxNode.scrollHeight - listboxNode.scrollTop - listboxNode.clientHeight <= 1 &&
-        options.length < totalItems
-      ) {
-        setPage((page) => page + 1);
-      }
-    },
-    [totalItems, options]
-  );
-
-  const handleOpen = () => {
-    setOpen(true);
-  };
-
-  const handleClose = () => {
-    setOpen(false);
-    setSearchValue('');
-  };
-
-  const { data, isFetching } = useQuery(['options', page, searchValue], () => {
-    const params = qs.parse(
-      {
-        page: `${page}`,
-        size: '20',
-        sort: sortBy,
-        ...(searchValue ? { [searchBy]: searchValue } : {}),
-      },
-      { ignoreQueryPrefix: true }
-    );
-    return queryFunction(params as PaginateParams);
-  });
-
-  useEffect(() => {
-    if (data) {
-      setOptions((prevOptions) => [...prevOptions, ...data.collection]);
-      setTotalItems(data.totalItems);
-    }
-  }, [data]);
-
-  return (
-    <Autocomplete
-      fullWidth
-      disablePortal
-      size="small"
-      readOnly={disabled}
-      options={options}
-      multiple={multiple}
-      getOptionLabel={getOptionLabel}
-      isOptionEqualToValue={isOptionEqualToValue}
-      disableCloseOnSelect={disableCloseOnSelect || multiple}
-      filterSelectedOptions={multiple}
-      inputValue={inputValue}
-      value={formValue}
-      onChange={handleValueChange}
-      loading={isFetching}
-      clearOnBlur={false}
-      open={open}
-      filterOptions={(x) => x}
-      onOpen={handleOpen}
-      onClose={handleClose}
-      onInputChange={handleInputChange}
-      ListboxProps={{
-        onScroll: handleOnScroll,
-      }}
-      renderOption={renderOption}
-      renderInput={(params) => (
-        <TextField
-          {...params}
-          label={label}
-          variant="outlined"
-          error={!!error}
-          inputRef={ref}
-          helperText={!hideErrorMessage && error?.message}
-          InputProps={{
-            ...params.InputProps,
-            endAdornment: (
-              <React.Fragment>
-                {isFetching ? <CircularProgress color="inherit" size={20} /> : null}
-                {params.InputProps.endAdornment}
-              </React.Fragment>
-            ),
-          }}
-          {...textFieldProps}
-        />
-      )}
-      {...autocompleteProps}
-    />
-  );
-}
-
-export default ControlQueryAutocomplete;

package/src/lib/Forms/ControlRadio.tsx

@@ -1,136 +0,0 @@
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormControl from '@mui/material/FormControl';
-import FormLabel from '@mui/material/FormLabel';
-
-import { Control, useController, useWatch } from 'react-hook-form';
-import { ValidateFunc } from '../../interfaces';
-import { useCallback } from 'react';
-import FormHelperText from '@mui/material/FormHelperText';
-
-/**
- * This interface is referencing the [[ControlRadioBtn]] component props.
- * @category Forms
- */
-export interface ControlRadioProps {
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Label for component
-   */
-  label?: string;
-  /**
-   * Radio group values
-   */
-  values: string[] | unknown[];
-  /**
-   * Is input required flag
-   */
-  required?: boolean;
-  /**
-   * React Hook Form `defaultValue`
-   */
-  defaultValue?: unknown;
-  /**
-   * Is disabled input flag
-   */
-  disabled?: boolean;
-  /**
-   * Hide error message flag
-   */
-  hideErrorMessage?: boolean;
-  /**
-   * Custom onChange functionƒ
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /**
-   * React Hook Form validate function
-   * ```typescript
-   * type ValidateFunc = (value: string) => boolean | string;
-   * ```
-   */
-  validate?: ValidateFunc | Record<string, ValidateFunc>;
-  /**
-   * Key for option label
-   */
-  labelKey?: string;
-  /**
-   * Key for option value
-   */
-  valueKey?: string;
-}
-
-/**
- * Material UI `Radio` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlRadio = ({
-  name,
-  label,
-  values = [],
-  control,
-  required,
-  defaultValue,
-  disabled,
-  hideErrorMessage,
-  labelKey,
-  valueKey,
-  validate,
-  onChange: customOnChange,
-}: ControlRadioProps) => {
-  const {
-    field: { ref, onChange },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate,
-    },
-  });
-  const value = useWatch({ control, name });
-
-  const getValue = useCallback(
-    (option) => {
-      if (typeof option === 'string') return option;
-      return valueKey ? option[valueKey] : option.value;
-    },
-    [valueKey]
-  );
-  const getLabel = useCallback(
-    (option) => {
-      if (typeof option === 'string') return option;
-      return labelKey ? option[labelKey] : option.label;
-    },
-    [labelKey]
-  );
-
-  return (
-    <FormControl disabled={disabled} error={!!error}>
-      <FormLabel id="radio-buttons-group">{label}</FormLabel>
-      <RadioGroup
-        aria-labelledby="radio-buttons-group"
-        ref={ref}
-        name={name}
-        value={value}
-        onChange={customOnChange ? customOnChange : onChange}
-      >
-        {values.map((item) => (
-          <FormControlLabel value={getValue(item)} control={<Radio />} label={getLabel(item)} />
-        ))}
-      </RadioGroup>
-      {!hideErrorMessage && error?.message && <FormHelperText>{error.message}</FormHelperText>}
-    </FormControl>
-  );
-};
-
-export default ControlRadio;

package/src/lib/Forms/ControlSelect.tsx

@@ -1,164 +0,0 @@
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import MenuItem from '@mui/material/MenuItem';
-import ClearIcon from '@mui/icons-material/Clear';
-
-import { useCallback } from 'react';
-import { useController, Control, useWatch } from 'react-hook-form';
-import { ValidateFunc } from '../../interfaces';
-import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-
-/**
- * This interface is referencing the [[ControlSelect]] component props.
- * @category Forms
- */
-export type ControlSelectProps = TextFieldProps & {
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Label for MUI TextField select component
-   */
-  label?: string;
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * Is input required flag
-   */
-  required?: boolean;
-  /**
-   * React Hook Form `defaultValue`
-   */
-  defaultValue?: unknown;
-  /**
-   * Is disabled input flag
-   */
-  disabled?: boolean;
-  /**
-   * React Hook Form validate function
-   * ```typescript
-   * type ValidateFunc = (value: string) => boolean | string;
-   * ```
-   */
-  validate?: ValidateFunc | Record<string, ValidateFunc>;
-  /**
-   * Hide error message flag
-   */
-  hideErrorMessage?: boolean;
-  /**
-   * Custom onChange functionƒ
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  /**
-   * Key for option label
-   */
-  labelKey?: string;
-  /**
-   * Key for option value
-   */
-  valueKey?: string;
-  /**
-   * Select options
-   */
-  options: string[] | unknown[];
-};
-
-/**
- * Material UI `Select` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlSelect = ({
-  control,
-  validate,
-  name = '',
-  label = '',
-  required = false,
-  defaultValue = '',
-  disabled = false,
-  hideErrorMessage = false,
-  onChange: customOnChange,
-  labelKey,
-  valueKey,
-  options = [],
-  ...textFieldProps
-}: ControlSelectProps) => {
-  const {
-    field: { ref, onChange },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate,
-    },
-  });
-  const value = useWatch({ control, name });
-
-  const getValue = useCallback(
-    (option) => {
-      if (typeof option === 'string') return option;
-      return valueKey ? option[valueKey] : option.value;
-    },
-    [valueKey]
-  );
-  const getLabel = useCallback(
-    (option) => {
-      if (typeof option === 'string') return option;
-      return labelKey ? option[labelKey] : option.label;
-    },
-    [labelKey]
-  );
-
-  const handleClear = useCallback(() => {
-    if (customOnChange) {
-      customOnChange(null);
-    } else onChange(null);
-  }, [onChange, customOnChange]);
-
-  return (
-    <TextField
-      select
-      fullWidth
-      size="small"
-      variant="outlined"
-      type="text"
-      inputRef={ref}
-      name={name}
-      label={label}
-      error={!!error}
-      helperText={!hideErrorMessage && error?.message}
-      disabled={disabled}
-      value={value ?? ''}
-      onChange={customOnChange ? customOnChange : onChange}
-      {...textFieldProps}
-      inputProps={{
-        ...(textFieldProps?.inputProps ?? {}),
-        value: value ?? '',
-      }}
-      InputProps={{
-        endAdornment:
-          !required && value ? (
-            <InputAdornment position="end" sx={{ mr: 2 }}>
-              <IconButton onClick={handleClear} size="small">
-                <ClearIcon fontSize="small" />
-              </IconButton>
-            </InputAdornment>
-          ) : null,
-        ...textFieldProps?.InputProps,
-      }}
-    >
-      {options.map((option, index) => (
-        <MenuItem key={index} value={getValue(option)}>
-          {getLabel(option)}
-        </MenuItem>
-      ))}
-    </TextField>
-  );
-};
-
-export default ControlSelect;

package/src/lib/Forms/ControlSwitch.tsx

@@ -1,71 +0,0 @@
-import Switch, { SwitchProps } from '@mui/material/Switch';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import { Control, useController, useWatch } from 'react-hook-form';
-import { useEffect, useMemo } from 'react';
-
-type Props = SwitchProps & {
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Material-UI FormControlLabel `label` prop
-   */
-  label?: string;
-};
-
-export const ControlSwitch = ({ control, name, label, ...switchProps }: Props) => {
-  const {
-    field: { ref, onChange },
-  } = useController({ control, name });
-  const value = useWatch({ control, name });
-
-  const checked = useMemo(() => {
-    if (typeof value === 'boolean') {
-      return value;
-    } else if (typeof value === 'string') {
-      if (value === 'false') {
-        onChange(false);
-        return false;
-      } else if (value === 'true') {
-        onChange(true);
-        return true;
-      }
-    }
-    return false;
-  }, [value, onChange]);
-
-  useEffect(() => {
-    if (value === null) {
-      onChange(false);
-    }
-  }, [value, onChange]);
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { checked } = event.target;
-    onChange(checked);
-  };
-
-  return (
-    <FormControlLabel
-      label={label}
-      name={name}
-      control={
-        <Switch
-          color="primary"
-          size="small"
-          inputRef={ref}
-          onChange={handleChange}
-          checked={checked}
-          {...switchProps}
-        />
-      }
-    />
-  );
-};
-
-export default ControlSwitch;

package/src/lib/Forms/ControlTime.tsx

@@ -1,93 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { TimePicker } from '@mui/x-date-pickers/TimePicker';
-
-import { parse, format as dateFnsFormat, isMatch, isValid } from 'date-fns';
-import { useEffect, useState } from 'react';
-import { Control, useController, useWatch } from 'react-hook-form';
-import { TIME_DEFAULT_FORMAT } from '../../interfaces';
-
-type Props = {
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * Is input required flag
-   */
-  required?: boolean;
-  name: string;
-  label?: string;
-  format?: string;
-  hideErrorMessage?: boolean;
-};
-
-export const ControlTime = ({
-  control,
-  name,
-  required,
-  label,
-  format = TIME_DEFAULT_FORMAT,
-  hideErrorMessage = false,
-}: Props) => {
-  const {
-    field: { onChange, ref },
-    fieldState: { error },
-  } = useController({
-    control,
-    name,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate: (val) => {
-        if (isMatch(val, format)) {
-          return true;
-        }
-        return 'Incorrect date format';
-      },
-    },
-  });
-  const value = useWatch({ control, name });
-
-  const [fieldValue, setFieldValue] = useState(null);
-
-  const handleChange = (date: Date) => {
-    setFieldValue(date);
-    onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-  };
-
-  useEffect(() => {
-    if (value && format) {
-      let parsedValue = parse(value, format, new Date());
-
-      if (!isValid(parsedValue)) {
-        parsedValue = parse(value, 'HH:mm:ss.SSS', new Date());
-      }
-
-      setFieldValue(parsedValue);
-    }
-  }, [value, format]);
-
-  return (
-    <TimePicker
-      mask=""
-      inputRef={ref}
-      label={label}
-      ampm={false}
-      value={fieldValue}
-      inputFormat={format}
-      onChange={handleChange}
-      renderInput={(props) => (
-        <TextField
-          {...props}
-          fullWidth
-          size="small"
-          variant="outlined"
-          name={name}
-          error={!!error}
-          helperText={!hideErrorMessage && error?.message}
-        />
-      )}
-    />
-  );
-};
-
-export default ControlTime;

package/src/lib/Forms/CopyButton.tsx

@@ -1,46 +0,0 @@
-import { useState } from 'react';
-// import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined';
-import Tooltip from '@mui/material/Tooltip';
-import IconButton from '@mui/material/IconButton';
-import SvgIcon from '@mui/material/SvgIcon';
-/**
- * This interface is referencing the [[CopyButton]] component props.
- * @category Forms
- */
-export interface CopyButtonProps {
-  /**
-   * Text to copy
-   */
-  copyText: string;
-  /**
-   * Tooltip help text
-   */
-  helpText?: string;
-}
-
-/**
- * Copy value button
- * @category Forms
- */
-export const CopyButton = ({ copyText, helpText = 'Copy' }: CopyButtonProps) => {
-  const [tooltipText, setTooltipText] = useState(helpText);
-
-  const onCopy = () => {
-    navigator.clipboard.writeText(copyText);
-    setTooltipText('Copied!');
-
-    setTimeout(() => {
-      setTooltipText(helpText);
-    }, 1000);
-  };
-
-  return tooltipText ? (
-    <Tooltip title={tooltipText} placement="top">
-      <IconButton onClick={onCopy}>
-        <SvgIcon fontSize="small">
-          <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4 6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"></path>
-        </SvgIcon>
-      </IconButton>
-    </Tooltip>
-  ) : null;
-};