@dartech/arsenal-ui 1.2.5 → 1.2.7

package/src/lib/Forms/ControlDateTime.tsx

@@ -1,77 +0,0 @@
-import TextField from '@mui/material/TextField';
-import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
-
-import { isValid, format as dateFnsFormat, isMatch } from 'date-fns';
-import { Control, useController, useWatch } from 'react-hook-form';
-import { DATE_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 ControlDateTime = ({
-  control,
-  name,
-  required,
-  label,
-  format = DATE_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 handleChange = (date) => {
-    onChange(isValid(date) ? dateFnsFormat(date, format) : date);
-  };
-
-  return (
-    <DateTimePicker
-      mask=""
-      ampm={false}
-      inputRef={ref}
-      label={label}
-      value={value || null}
-      inputFormat={format}
-      onChange={handleChange}
-      renderInput={(props) => (
-        <TextField
-          {...props}
-          fullWidth
-          size="small"
-          variant="outlined"
-          name={name}
-          error={!!error}
-          helperText={!hideErrorMessage && error?.message}
-        />
-      )}
-    />
-  );
-};
-
-export default ControlDateTime;

package/src/lib/Forms/ControlDebouncedInput.tsx

@@ -1,80 +0,0 @@
-import TextField from '@mui/material/TextField';
-
-import { useCallback, useEffect, useState } from 'react';
-import { useController, useWatch } from 'react-hook-form';
-import { useDebounce } from '../../utils/hooks';
-import { ControlInputProps } from './ControlInput';
-
-export const ControlDebouncedInput = ({
-  control,
-  validate,
-  name = '',
-  label = '',
-  required = false,
-  defaultValue = '',
-  disabled = false,
-  textarea = false,
-  hideErrorMessage = false,
-  onChange: customOnChange,
-  ...textFieldProps
-}: ControlInputProps) => {
-  const {
-    field: { ref, onChange },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate,
-    },
-  });
-  const value = useWatch({ control, name });
-
-  const [fieldValue, setFieldValue] = useState('');
-
-  useEffect(() => {
-    if (!fieldValue && value) {
-      setFieldValue(value);
-    }
-  }, [fieldValue, value]);
-
-  const debouncedChange = useDebounce((value) => {
-    onChange(value);
-  }, 200);
-
-  const handleChange = useCallback(
-    (e) => {
-      setFieldValue(e.target.value);
-      debouncedChange(e.target.value);
-    },
-    [debouncedChange]
-  );
-
-  return (
-    <TextField
-      fullWidth
-      size="small"
-      variant="outlined"
-      type="text"
-      inputRef={ref}
-      name={name}
-      label={label}
-      error={!!error}
-      helperText={!hideErrorMessage && error?.message}
-      disabled={disabled}
-      multiline={textarea}
-      minRows={textarea ? 3 : 1}
-      value={fieldValue ?? ''}
-      onChange={handleChange}
-      {...textFieldProps}
-      inputProps={{
-        ...(textFieldProps?.inputProps ?? {}),
-        value: fieldValue ?? '',
-      }}
-    />
-  );
-};
-
-export default ControlDebouncedInput;

package/src/lib/Forms/ControlInput.tsx

@@ -1,111 +0,0 @@
-import { useController, Control, useWatch } from 'react-hook-form';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import { ValidateFunc } from '../../interfaces';
-
-/**
- * This interface is referencing the [[ControlInput]] component props.
- * @category Forms
- */
-export type ControlInputProps = TextFieldProps & {
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Label for MUI TextField 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>;
-  /**
-   * Is input textarea flag
-   */
-  textarea?: boolean;
-  /**
-   * Hide error message flag
-   */
-  hideErrorMessage?: boolean;
-  /**
-   * Custom onChange functionƒ
-   */
-  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-};
-
-/**
- * Material UI `TextField` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlInput = ({
-  control,
-  validate,
-  name = '',
-  label = '',
-  required = false,
-  defaultValue = '',
-  disabled = false,
-  textarea = false,
-  hideErrorMessage = false,
-  onChange: customOnChange,
-  ...textFieldProps
-}: ControlInputProps) => {
-  const {
-    field: { ref, onChange },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate,
-    },
-  });
-  const value = useWatch({ control, name });
-
-  return (
-    <TextField
-      fullWidth
-      size="small"
-      variant="outlined"
-      type="text"
-      inputRef={ref}
-      name={name}
-      label={label}
-      error={!!error}
-      helperText={!hideErrorMessage && error?.message}
-      disabled={disabled}
-      multiline={textarea}
-      minRows={textarea ? 3 : 1}
-      value={value ?? ''}
-      onChange={customOnChange ? customOnChange : onChange}
-      {...textFieldProps}
-      inputProps={{
-        ...(textFieldProps?.inputProps ?? {}),
-        value: value ?? '',
-      }}
-    />
-  );
-};
-
-export default ControlInput;

package/src/lib/Forms/ControlNumberInput.tsx

@@ -1,121 +0,0 @@
-import TextField, { TextFieldProps } from '@mui/material/TextField';
-import { useController, Control, useWatch } from 'react-hook-form';
-import { floatsOnly, digitsOnly } from '../../utils';
-import { ValidateFunc } from '../../interfaces';
-
-type Props = TextFieldProps & {
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Label for MUI TextField component
-   */
-  label?: string;
-  /**
-   * React Hook Form `control`
-   */
-  control: Control;
-  /**
-   * Is input required flag
-   */
-  required?: boolean;
-  /**
-   * React Hook Form `defaultValue`
-   */
-  defaultValue?: number;
-  /**
-   * 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;
-  /**
-   * Is number decimal or integer flag
-   */
-  decimal?: boolean;
-};
-
-export const ControlNumberInput = ({
-  control,
-  validate,
-  name = '',
-  label = '',
-  required = false,
-  defaultValue,
-  disabled = false,
-  hideErrorMessage = false,
-  onChange: customOnChange,
-  decimal = false,
-  ...textFieldProps
-}: Props) => {
-  const {
-    field: { ref, onChange },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    defaultValue,
-    rules: {
-      required: required && 'Please, fill this field',
-      validate: (val) => {
-        if (decimal && !floatsOnly.test(val)) {
-          return 'Not valid number';
-        } else if (!decimal && !digitsOnly.test(val)) {
-          return 'Not valid integer';
-        }
-        return true;
-      },
-    },
-  });
-  const value = useWatch({ control, name });
-
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const lastData = event.nativeEvent['data'] || event.target.value;
-    if (!isNaN(lastData) || (decimal && lastData === '.') || lastData === '-' || lastData === '+') {
-      if (customOnChange) {
-        customOnChange(event);
-      } else {
-        onChange(event.target.value);
-      }
-    }
-  };
-
-  return (
-    <TextField
-      fullWidth
-      size="small"
-      variant="outlined"
-      type="text"
-      inputRef={ref}
-      name={name}
-      label={label}
-      error={!!error}
-      helperText={!hideErrorMessage && error?.message}
-      disabled={disabled}
-      value={value ?? ''}
-      {...textFieldProps}
-      onChange={handleChange}
-      inputProps={{
-        ...(textFieldProps?.inputProps ?? {}),
-        value: value ?? '',
-      }}
-    />
-  );
-};
-
-export default ControlNumberInput;

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;