@gen-epix/ui 1.15.1 → 1.16.0

package/src/components/form/fields/Select/Select.tsx

@@ -1,219 +0,0 @@
-import type { ReactElement } from 'react';
-import {
-  useCallback,
-  useId,
-  useMemo,
-  useRef,
-} from 'react';
-import {
-  Select as MuiSelect,
-  FormControl,
-  FormHelperText,
-  MenuItem,
-  InputLabel,
-  ListItemText,
-  Checkbox,
-  OutlinedInput,
-  InputAdornment,
-  IconButton,
-} from '@mui/material';
-import type { SelectChangeEvent } from '@mui/material';
-import ClearIcon from '@mui/icons-material/Clear';
-import type {
-  UseControllerReturn,
-  FieldValues,
-  ControllerRenderProps,
-  Path,
-} from 'react-hook-form';
-import {
-  Controller,
-  useFormContext,
-} from 'react-hook-form';
-import classnames from 'classnames';
-import { useTranslation } from 'react-i18next';
-
-import type { SelectOption } from '../../../../models/form';
-import { FormUtil } from '../../../../utils/FormUtil';
-import { TestIdUtil } from '../../../../utils/TestIdUtil';
-import { FormFieldHelperText } from '../../helpers/FormFieldHelperText';
-import { FormFieldLoadingIndicator } from '../../helpers/FormFieldLoadingIndicator';
-
-type Value = string | number | boolean;
-
-export type SelectProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>, TMultiple extends boolean> = {
-  readonly disabled?: boolean;
-  readonly label: string;
-  readonly name: TName;
-  readonly onChange?: (value: string) => void;
-  readonly required?: boolean;
-  readonly warningMessage?: string | boolean;
-  readonly options: SelectOption[];
-  readonly multiple?: TMultiple;
-  readonly loading?: boolean;
-};
-
-export const Select = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>, TMultiple extends boolean = false>({
-  disabled = false,
-  label,
-  loading = false,
-  name,
-  onChange: onChangeProp,
-  options,
-  required = false,
-  warningMessage,
-  multiple,
-}: SelectProps<TFieldValues, TName, TMultiple>): ReactElement => {
-  const { t } = useTranslation();
-  const { control, formState: { errors } } = useFormContext<TFieldValues>();
-  const errorMessage = FormUtil.getFieldErrorMessage(errors, name);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const id = useId();
-  const labelId = useId();
-  const helperTextId = useId();
-
-  const hasError = !!errorMessage;
-  const hasWarning = !!warningMessage && !hasError;
-
-  const mappedOptions = useMemo<Map<Value, SelectOption>>(() => {
-    const mapped = new Map<Value, SelectOption>();
-    options.forEach(option => {
-      mapped.set(option.value, option);
-    });
-    return mapped;
-  }, [options]);
-
-  const getIsOptionDisabled = useCallback((value: SelectOption['value']): boolean => mappedOptions.get(value)?.disabled, [mappedOptions]);
-
-  const renderValue = useCallback((value: string | string []) => {
-    const values = Array.isArray(value) ? value : [value];
-    return values.map(v => mappedOptions.get(v)?.label).join(', ');
-  }, [mappedOptions]);
-
-  const onMuiSelectChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>
-    (event: SelectChangeEvent<string>) => {
-      if (onChangeProp) {
-        onChangeProp(event.target.value as TFieldValues[TName]);
-      }
-      onChange(event.target.value);
-    }
-  , [onChangeProp]);
-
-  const renderController = useCallback(({ field: { onChange, onBlur, value, ref } }: UseControllerReturn<TFieldValues, TName>) => {
-    ref({
-      focus: () => {
-        inputRef?.current?.focus();
-      },
-    });
-    const onResetButtonClick = () => {
-      onMuiSelectChange(onChange)({ target: { value: multiple ? [] : '' } } as SelectChangeEvent<string>);
-    };
-
-    return (
-      <>
-        <InputLabel
-          error={hasError}
-          className={classnames({ 'Mui-warning': hasWarning })}
-          required={required && !disabled}
-          htmlFor={id}
-          id={labelId}
-        >
-          {label}
-        </InputLabel>
-        <MuiSelect<TFieldValues[TName]>
-          error={hasError}
-          disabled={disabled || loading}
-          input={(
-            <OutlinedInput
-              label={label}
-              endAdornment={disabled ? undefined : (
-                <InputAdornment
-                  position={'start'}
-                  sx={{
-                    position: 'absolute',
-                    right: theme => theme.spacing(2),
-                  }}
-                >
-                  <IconButton
-                    {...TestIdUtil.createAttributes('TextField-reset')}
-                    sx={{
-                      '& svg': {
-                        fontSize: '16px',
-                      },
-                    }}
-                    tabIndex={-1}
-                    aria-label={t`Clear selection`}
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onClick={onResetButtonClick}
-                  >
-                    <ClearIcon />
-                  </IconButton>
-                </InputAdornment>
-              )}
-            />
-          )}
-          inputProps={{
-            required: required && !disabled,
-            id,
-            'aria-labelledby': labelId,
-            'aria-describedby': helperTextId,
-            'aria-label': label,
-            ref: inputRef,
-            className: classnames({
-              'Mui-warning': hasWarning,
-            }),
-          }}
-          multiple={multiple}
-          renderValue={renderValue}
-          required={required}
-          value={value ?? (multiple ? [] : '') as TFieldValues[TName]}
-          onBlur={onBlur}
-          onChange={onMuiSelectChange(onChange)}
-        >
-          { options.map((option) => {
-            return (
-              <MenuItem
-                key={option.value.toString()}
-                disabled={getIsOptionDisabled(option.value)}
-                value={option.value as string}
-              >
-
-                {multiple && (
-                  <Checkbox
-                    checked={(value as string[]).includes(option.value as string)}
-                  />
-                )}
-                <ListItemText primary={option.label} />
-              </MenuItem>
-            );
-          })}
-        </MuiSelect>
-        <FormHelperText
-          className={classnames({ 'Mui-warning': hasWarning })}
-          sx={{ ml: 0 }}
-          id={helperTextId}
-        >
-          <FormFieldHelperText
-            noIndent
-            errorMessage={errorMessage}
-            warningMessage={warningMessage}
-          />
-        </FormHelperText>
-      </>
-    );
-  }, [disabled, errorMessage, getIsOptionDisabled, t, hasError, hasWarning, helperTextId, id, label, labelId, loading, multiple, onMuiSelectChange, options, renderValue, required, warningMessage]);
-
-  return (
-    <FormControl
-      {...TestIdUtil.createAttributes('Select', { label, name: name as string })}
-      fullWidth
-    >
-      <Controller
-        control={control}
-        defaultValue={null}
-        name={name}
-        render={renderController}
-      />
-      { !!loading && <FormFieldLoadingIndicator />}
-    </FormControl>
-  );
-};

package/src/components/form/fields/Select/index.ts

@@ -1 +0,0 @@
-export * from './Select';

package/src/components/form/fields/Switch/Switch.tsx

@@ -1,116 +0,0 @@
-import type {
-  ReactElement,
-  SyntheticEvent,
-} from 'react';
-import {
-  useCallback,
-  useRef,
-} from 'react';
-import {
-  FormControl,
-  FormHelperText,
-  FormControlLabel,
-  Switch as MuiSwitch,
-} from '@mui/material';
-import type {
-  UseControllerReturn,
-  FieldValues,
-  ControllerRenderProps,
-  Path,
-} from 'react-hook-form';
-import {
-  Controller,
-  useFormContext,
-} from 'react-hook-form';
-import classnames from 'classnames';
-
-import { FormUtil } from '../../../../utils/FormUtil';
-import { TestIdUtil } from '../../../../utils/TestIdUtil';
-import { FormFieldHelperText } from '../../helpers/FormFieldHelperText';
-import { FormFieldLoadingIndicator } from '../../helpers/FormFieldLoadingIndicator';
-
-export type SwitchPropsProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>> = {
-  readonly disabled?: boolean;
-  readonly label: string;
-  readonly name: TName;
-  readonly onChange?: (value: boolean) => void;
-  readonly required?: boolean;
-  readonly warningMessage?: string | boolean;
-  readonly loading?: boolean;
-};
-
-export const Switch = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({
-  disabled = false,
-  label,
-  loading = false,
-  name,
-  onChange: onChangeProp,
-  warningMessage,
-}: SwitchPropsProps<TFieldValues, TName>): ReactElement => {
-  const { control, formState: { errors } } = useFormContext<TFieldValues>();
-  const errorMessage = FormUtil.getFieldErrorMessage(errors, name);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const hasError = !!errorMessage;
-  const hasWarning = !!warningMessage && !hasError;
-
-  const onMuiSwitchChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>
-    (_event: SyntheticEvent, checked: boolean) => {
-      if (onChangeProp) {
-        onChangeProp(checked);
-      }
-      onChange(checked);
-    }
-  , [onChangeProp]);
-
-  const renderController = useCallback(({ field: { onChange, onBlur, value, ref } }: UseControllerReturn<TFieldValues, TName>) => {
-    ref({
-      focus: () => {
-        inputRef?.current?.focus();
-      },
-    });
-    return (
-      <FormControl
-        {...TestIdUtil.createAttributes('Select', { label, name: name as string })}
-        fullWidth
-      >
-        <FormControlLabel
-          control={(
-            <MuiSwitch
-              checked={!!value}
-              color={'primary'}
-              inputRef={inputRef}
-            />
-          )}
-          disabled={disabled}
-          label={label}
-          onBlur={onBlur}
-          onChange={onMuiSwitchChange(onChange)}
-        />
-        <FormHelperText
-          className={classnames({ 'Mui-warning': hasWarning })}
-          sx={{ ml: 0 }}
-        >
-          <FormFieldHelperText
-            noIndent
-            errorMessage={errorMessage}
-            warningMessage={warningMessage}
-          />
-        </FormHelperText>
-        { !!loading && <FormFieldLoadingIndicator />}
-      </FormControl>
-
-    );
-  }, [disabled, errorMessage, hasWarning, label, loading, name, onMuiSwitchChange, warningMessage]);
-
-  return (
-
-    <Controller
-      control={control}
-      defaultValue={null}
-      name={name}
-      render={renderController}
-    />
-
-  );
-};

package/src/components/form/fields/Switch/index.ts

@@ -1 +0,0 @@
-export * from './Switch';

package/src/components/form/fields/TextField/TextField.tsx

@@ -1,170 +0,0 @@
-import type {
-  ChangeEvent,
-  InputHTMLAttributes,
-  ReactElement,
-} from 'react';
-import {
-  useCallback,
-  useRef,
-} from 'react';
-import {
-  TextField as MuiTextField,
-  FormControl,
-  IconButton,
-  InputAdornment,
-} from '@mui/material';
-import ClearIcon from '@mui/icons-material/Clear';
-import type {
-  FieldValues,
-  ControllerRenderProps,
-  UseControllerReturn,
-  PathValue,
-  Path,
-} from 'react-hook-form';
-import {
-  Controller,
-  useFormContext,
-} from 'react-hook-form';
-import classnames from 'classnames';
-
-import { FormUtil } from '../../../../utils/FormUtil';
-import { TestIdUtil } from '../../../../utils/TestIdUtil';
-import { FormFieldHelperText } from '../../helpers/FormFieldHelperText';
-import { FormFieldLoadingIndicator } from '../../helpers/FormFieldLoadingIndicator';
-
-export type TextFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {
-  readonly disabled?: boolean;
-  readonly label: string;
-  readonly name: TName;
-  readonly onChange?: (value: string) => void;
-  readonly required?: boolean;
-  readonly warningMessage?: string | boolean;
-  readonly multiline?: boolean;
-  readonly rows?: number;
-  readonly type?: InputHTMLAttributes<unknown>['type'];
-  readonly loading?: boolean;
-  readonly placeholder?: string;
-  readonly autocomplete?: string;
-};
-
-export const TextField = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({
-  disabled = false,
-  label,
-  rows = 3,
-  multiline = false,
-  name,
-  onChange: onChangeProp,
-  loading = false,
-  required = false,
-  placeholder,
-  type = 'text',
-  warningMessage,
-  autocomplete,
-}: TextFieldProps<TFieldValues, TName>): ReactElement => {
-  const { control, formState: { errors } } = useFormContext<TFieldValues>();
-  const errorMessage = FormUtil.getFieldErrorMessage(errors, name);
-  const hasError = !!errorMessage;
-  const hasWarning = !!warningMessage && !hasError;
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const onMuiTextFieldChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>
-    (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-      const value = event.target.value;
-      if (onChangeProp) {
-        onChangeProp(value);
-      }
-      onChange(value);
-    }
-  , [onChangeProp]);
-
-  const renderController = useCallback(({ field: { onChange, onBlur, value, ref } }: UseControllerReturn<TFieldValues, TName>) => {
-    ref({
-      focus: () => {
-        inputRef?.current?.focus();
-      },
-    });
-
-    const onResetButtonClick = () => {
-      onChange('');
-    };
-
-    return (
-      <MuiTextField
-        disabled={disabled || loading}
-        error={hasError}
-        helperText={(
-          <FormFieldHelperText
-            errorMessage={errorMessage}
-            warningMessage={warningMessage}
-          />
-        )}
-        inputRef={inputRef}
-        variant={'outlined'}
-        label={label}
-        multiline={multiline}
-        placeholder={placeholder}
-        rows={rows}
-        slotProps={{
-          formHelperText: {
-            className: classnames({ 'Mui-warning': hasWarning }),
-          },
-          input: {
-            inputProps: {
-              autoComplete: autocomplete ?? name,
-              type,
-            },
-            className: classnames({ 'Mui-warning': hasWarning }),
-            endAdornment: disabled ? undefined : (
-              <InputAdornment position={'end'}>
-                <IconButton
-                  {...TestIdUtil.createAttributes('TextField-reset')}
-                  sx={{
-                    '& svg': {
-                      fontSize: '16px',
-                    },
-                  }}
-                  tabIndex={-1}
-                  aria-label={`Clear text field`}
-                  // eslint-disable-next-line react/jsx-no-bind
-                  onClick={onResetButtonClick}
-                >
-                  <ClearIcon />
-                </IconButton>
-              </InputAdornment>
-            ),
-          },
-          inputLabel: {
-            required: required && !disabled,
-            className: classnames({ 'Mui-warning': hasWarning }),
-          },
-        }}
-        value={value ?? '' as string}
-        onBlur={onBlur}
-        onChange={onMuiTextFieldChange(onChange)}
-      />
-    );
-  }, [disabled, loading, hasError, errorMessage, warningMessage, label, multiline, placeholder, rows, hasWarning, autocomplete, name, type, required, onMuiTextFieldChange]);
-
-  return (
-    <FormControl
-      {...TestIdUtil.createAttributes('TextField', { label, name: name as string })}
-      fullWidth
-      sx={{
-        button: {
-          display: 'none',
-        },
-        '&:hover button, &:focus-within button': {
-          display: 'initial',
-        },
-      }}
-    >
-      <Controller
-        control={control}
-        defaultValue={'' as PathValue<TFieldValues, TName>}
-        name={name}
-        render={renderController}
-      />
-      { !!loading && <FormFieldLoadingIndicator />}
-    </FormControl>
-  );
-};

package/src/components/form/fields/TextField/index.ts

@@ -1 +0,0 @@
-export * from './TextField';

package/src/components/form/fields/ToggleButtonGroup/ToggleButtonGroup.tsx

@@ -1,118 +0,0 @@
-import type {
-  ChangeEvent,
-  ReactElement,
-} from 'react';
-import {
-  useCallback,
-  useRef,
-} from 'react';
-import {
-  FormControl,
-  ToggleButtonGroup as MuiToggleButtonGroup,
-  ToggleButton,
-  FormHelperText,
-} from '@mui/material';
-import {
-  Controller,
-  useFormContext,
-} from 'react-hook-form';
-import type {
-  UseControllerReturn,
-  FieldValues,
-  Path,
-  ControllerRenderProps,
-} from 'react-hook-form';
-
-import type { ToggleButtonOption } from '../../../../models/form';
-import { FormUtil } from '../../../../utils/FormUtil';
-import { TestIdUtil } from '../../../../utils/TestIdUtil';
-import { FormFieldHelperText } from '../../helpers/FormFieldHelperText';
-
-export type ToggleButtonProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {
-  readonly disabled?: boolean;
-  readonly name: TName;
-  readonly onChange?: (value: string) => void;
-  readonly required?: boolean;
-  readonly warningMessage?: string | boolean;
-  readonly row?: boolean;
-  readonly options: ToggleButtonOption[];
-};
-
-export const ToggleButtonGroup = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({
-  disabled,
-  name,
-  options,
-  warningMessage,
-  required,
-  onChange: onChangeProp,
-}: ToggleButtonProps<TFieldValues, TName>): ReactElement => {
-  const { control, formState: { errors } } = useFormContext<TFieldValues>();
-  const errorMessage = FormUtil.getFieldErrorMessage(errors, name);
-
-  const inputRef = useRef<HTMLInputElement>(null);
-  const hasError = !!errorMessage;
-
-  const onMuiToggleButtonChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>
-    (_event: ChangeEvent<unknown>, value: string) => {
-      if (required && value === null) {
-        return;
-      }
-      if (onChangeProp) {
-        onChangeProp(value as TFieldValues[TName]);
-      }
-      onChange(value);
-    }
-  , [onChangeProp, required]);
-
-  const renderController = useCallback(({ field: { onChange, onBlur, value, ref } }: UseControllerReturn<TFieldValues, TName>) => {
-    ref({
-      focus: () => {
-        inputRef?.current?.focus();
-      },
-    });
-    return (
-      <MuiToggleButtonGroup
-        exclusive
-        color={'primary'}
-        value={value as string}
-        onBlur={onBlur}
-        onChange={onMuiToggleButtonChange(onChange)}
-      >
-        { options.map((option) => {
-          return (
-            <ToggleButton
-              {...TestIdUtil.createAttributes('ToggleButton-option', { code: option.value.toString(), description: option.label })}
-              key={option.value.toString()}
-              disabled={disabled}
-              value={option.value}
-            >
-              {option.label}
-            </ToggleButton>
-          );
-        })}
-      </MuiToggleButtonGroup>
-    );
-  }, [onMuiToggleButtonChange, options, disabled]);
-
-  return (
-    <FormControl
-      error={hasError}
-      {...TestIdUtil.createAttributes('ToggleButtonGroup', { name: name as string })}
-      fullWidth
-    >
-      <Controller
-        control={control}
-        defaultValue={null}
-        name={name}
-        render={renderController}
-      />
-      <FormHelperText sx={{ ml: 0 }}>
-        <FormFieldHelperText
-          noIndent
-          errorMessage={errorMessage}
-          warningMessage={warningMessage}
-        />
-      </FormHelperText>
-    </FormControl>
-  );
-};

package/src/components/form/fields/ToggleButtonGroup/index.ts

@@ -1 +0,0 @@
-export * from './ToggleButtonGroup';