@gen-epix/ui 1.14.5 → 1.15.1

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

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

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

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

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

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

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

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

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

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

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

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