@dartech/arsenal-ui 1.3.0 → 1.3.2

package/src/lib/Forms/ControlCheckbox.tsx

@@ -1,113 +0,0 @@
-import FormControl from '@mui/material/FormControl';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import FormHelperText from '@mui/material/FormHelperText';
-import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
-
-import { useMemo } from 'react';
-import { Control, useController, useWatch } from 'react-hook-form';
-import { ValidateFunc } from '../../interfaces';
-
-/**
- * This interface is referencing the [[ControlCheckbox]] component props.
- * @category Forms
- */
-export type ControlCheckboxProps = CheckboxProps & {
-  /**
-   * React Hook Form control `name` propery
-   */
-  name: string;
-  /**
-   * Label for MUI TextField component
-   */
-  label?: string;
-  /**
-   * React Hook Form `control`
-   */
-  control: Control<any>;
-  /**
-   * 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;
-};
-
-/**
- * Material UI `Checkbox` controlled component. Used with react-hook-form
- * @category Forms
- */
-export const ControlCheckbox = ({
-  control,
-  validate,
-  name = '',
-  label = '',
-  required = false,
-  defaultValue = '',
-  disabled = false,
-  hideErrorMessage = false,
-  onChange: customOnChange,
-  ...checkboxProps
-}: ControlCheckboxProps) => {
-  const {
-    field: { ref, onChange },
-    fieldState: { error },
-  } = useController({
-    name,
-    control,
-    defaultValue,
-  });
-  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]);
-
-  return (
-    <FormControl error={!!error} component="fieldset" variant="standard" disabled={disabled}>
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={checked}
-            onChange={customOnChange ? customOnChange : onChange}
-            name={name}
-            inputRef={ref}
-            disabled={disabled}
-            {...checkboxProps}
-          />
-        }
-        label={label}
-      />
-      {!hideErrorMessage && error?.message && <FormHelperText>{error.message}</FormHelperText>}
-    </FormControl>
-  );
-};
-
-export default ControlCheckbox;

package/src/lib/Forms/ControlDate.tsx

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

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;