@gen-epix/ui 1.14.4 → 1.15.0

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

@@ -0,0 +1,359 @@
+import type { ReactElement } from 'react';
+import {
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  Box,
+  FormControl,
+  FormHelperText,
+  FormLabel,
+  IconButton,
+  useTheme,
+} from '@mui/material';
+import ClearIcon from '@mui/icons-material/Clear';
+import type {
+  FieldValues,
+  UseControllerReturn,
+  PathValue,
+  Path,
+} from 'react-hook-form';
+import {
+  Controller,
+  useFormContext,
+  useWatch,
+} from 'react-hook-form';
+import {
+  LocalizationProvider,
+  DatePicker as MuiDatePicker,
+} from '@mui/x-date-pickers';
+import type {
+  DateTimePickerProps as MuiDateTimePickerProps,
+  DatePickerProps as MuiDatePickerProps,
+} from '@mui/x-date-pickers';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import type { Locale } from 'date-fns';
+import {
+  isValid,
+  lastDayOfMonth,
+  parse,
+  parseISO,
+  set,
+  subMonths,
+} from 'date-fns';
+import {
+  enUS,
+  sv,
+} from 'date-fns/locale';
+import isEqual from 'lodash/isEqual';
+
+import { FormUtil } from '../../../../utils/FormUtil';
+import { TestIdUtil } from '../../../../utils/TestIdUtil';
+import { FormFieldHelperText } from '../../helpers/FormFieldHelperText';
+import { FormFieldLoadingIndicator } from '../../helpers/FormFieldLoadingIndicator';
+import { DATE_FORMAT } from '../../../../data/date';
+
+
+export type DateRangePickerProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {
+  readonly disabled?: boolean;
+  readonly label: string;
+  readonly name: TName;
+  readonly onChange?: (value: [Date, Date]) => void;
+  readonly required?: boolean;
+  readonly warningMessage?: string | boolean;
+  readonly loading?: boolean;
+  readonly minDate?: Date;
+  readonly maxDate?: Date;
+  readonly dateFormat: typeof DATE_FORMAT[keyof typeof DATE_FORMAT];
+};
+
+export const DateRangePicker = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({
+  disabled = false,
+  label,
+  name,
+  onChange: onChangeProp,
+  loading = false,
+  required = false,
+  warningMessage,
+  minDate,
+  maxDate,
+  dateFormat = DATE_FORMAT.DATE,
+}: DateRangePickerProps<TFieldValues, TName>): ReactElement => {
+  const { control, formState: { errors } } = useFormContext<TFieldValues>();
+  const errorMessage = FormUtil.getFieldErrorMessage(errors, name);
+  const hasError = !!errorMessage;
+  const hasWarning = !!warningMessage && !hasError;
+  const fromInputRef = useRef<HTMLInputElement>(null);
+  const toInputRef = useRef<HTMLInputElement>(null);
+  const theme = useTheme();
+  const id = useId();
+  const { t } = useTranslation();
+
+  const defaultFromDate = useMemo(() => {
+    const now = new Date();
+    return subMonths(now, 3);
+  }, []);
+
+  const views = useMemo<MuiDateTimePickerProps['views']>(() => {
+    switch (dateFormat) {
+      case DATE_FORMAT.DATE:
+      case DATE_FORMAT.DATE_TIME:
+        return undefined;
+      case DATE_FORMAT.YEAR_MONTH:
+        return ['year', 'month'];
+      case DATE_FORMAT.YEAR:
+        return ['year'];
+      default:
+        throw new Error(`Unsupported date format: ${dateFormat}`);
+    }
+  }, [dateFormat]);
+
+  const sanitizeValue = useCallback((value: [Date, Date]): [Date, Date] => {
+    const sanitizedValue: [Date, Date] = [null, null];
+    switch (dateFormat) {
+      case DATE_FORMAT.DATE:
+        sanitizedValue[0] = value[0] ? set(value[0], { hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }) : null;
+        sanitizedValue[1] = value[1] ? set(value[1], { hours: 23, minutes: 59, seconds: 59, milliseconds: 999 }) : null;
+        break;
+      case DATE_FORMAT.DATE_TIME:
+        sanitizedValue[0] = value[0] ? set(value[0], { seconds: 0, milliseconds: 0 }) : null;
+        sanitizedValue[1] = value[1] ? set(value[1], { seconds: 59, milliseconds: 999 }) : null;
+        break;
+      case DATE_FORMAT.YEAR_MONTH:
+        sanitizedValue[0] = value[0] ? set(value[0], { date: 1, hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }) : null;
+        sanitizedValue[1] = value[1] ? set(lastDayOfMonth(value[1]), { hours: 23, minutes: 59, seconds: 59, milliseconds: 999 }) : null;
+        break;
+      case DATE_FORMAT.YEAR:
+        sanitizedValue[0] = value[0] ? set(value[0], { month: 0, date: 1, hours: 0, minutes: 0, seconds: 0, milliseconds: 0 }) : null;
+        sanitizedValue[1] = value[1] ? set(value[1], { month: 11, date: 31, hours: 23, minutes: 59, seconds: 59, milliseconds: 999 }) : null;
+        break;
+      default:
+        throw new Error(`Unsupported date format: ${dateFormat}`);
+    }
+    return sanitizedValue;
+  }, [dateFormat]);
+
+  const inputValueToDate = useCallback((inputValue: string): Date | null => {
+    if (!inputValue) {
+      return null;
+    }
+    return dateFormat === DATE_FORMAT.YEAR_MONTH
+      ? parse(inputValue, 'MMMM yyyy', new Date())
+      : parseISO(inputValue);
+  }, [dateFormat]);
+
+  const customLocale = useMemo<Locale>(() => {
+    /**
+     * Use everything from enUS, but format dates the Swedish way (ISO 8601)
+     */
+    return {
+      ...enUS,
+      formatLong: sv.formatLong,
+    };
+  }, []);
+
+  const outerValue = useWatch({ control, name }) as [Date, Date];
+
+  const handleChange = useCallback((onChange: (value: [Date, Date]) => void, value: [Date, Date]) => {
+    const sanitizedValue = sanitizeValue(value);
+    if (isEqual(sanitizedValue, outerValue)) {
+      return;
+    }
+    onChange(sanitizedValue);
+    if (onChangeProp) {
+      onChangeProp(sanitizedValue);
+    }
+  }, [onChangeProp, outerValue, sanitizeValue]);
+
+  const renderController = useCallback(({ field: { onChange, onBlur, value, ref } }: UseControllerReturn<TFieldValues, TName>) => {
+    ref({
+      focus: () => {
+        fromInputRef?.current?.focus();
+      },
+    });
+
+    const fromValue = (value as [Date, Date])[0];
+    const toValue = (value as [Date, Date])[1];
+
+    const onFromValueChange = (newFromValue: Date) => {
+      handleChange(onChange, [newFromValue, toValue]);
+    };
+
+    const onToValueChange = (newToValue: Date) => {
+      handleChange(onChange, [fromValue, newToValue]);
+    };
+
+    const onFromBlur = () => {
+      const fromInputValue = inputValueToDate(fromInputRef.current.value);
+
+      if (!isValid(fromInputValue)) {
+        handleChange(onChange, [null, toValue]);
+      } else if (fromInputValue < minDate) {
+        handleChange(onChange, [minDate, toValue]);
+      } else if (fromInputValue > maxDate) {
+        handleChange(onChange, [maxDate, maxDate]);
+      } else if (toValue && fromInputValue > toValue) {
+        handleChange(onChange, [toValue, fromInputValue]);
+      } else {
+        handleChange(onChange, [fromInputValue, toValue]);
+      }
+      onBlur();
+    };
+
+    const onToBlur = () => {
+      const toInputValue = inputValueToDate(toInputRef.current.value);
+
+      if (!isValid(toInputValue)) {
+        handleChange(onChange, [fromValue, null]);
+      } else if (toInputValue > maxDate) {
+        handleChange(onChange, [fromValue, maxDate]);
+      } else if (toInputValue < minDate) {
+        handleChange(onChange, [minDate, minDate]);
+      } else if (fromValue && toInputValue < fromValue) {
+        handleChange(onChange, [toInputValue, fromValue]);
+      } else {
+        handleChange(onChange, [fromValue, toInputValue]);
+      }
+      onBlur();
+    };
+
+    const onResetButtonClick = () => {
+      onChange([null, null]);
+    };
+
+    return (
+      <FormControl
+        component={'fieldset'}
+        error={hasError}
+        {...TestIdUtil.createAttributes('DateRangePicker', { label, name: name as string })}
+        fullWidth
+        sx={{
+          'legend button': {
+            display: 'none',
+          },
+          '&:hover legend button, &:focus-within legend button': {
+            display: 'initial',
+          },
+        }}
+      >
+        <FormLabel
+          component={'legend'}
+          disabled={disabled || loading}
+          id={id}
+          required={required}
+        >
+          {label}
+          {!disabled && (
+            <IconButton
+              {...TestIdUtil.createAttributes('DateRangePicker-reset')}
+              sx={{
+                position: 'absolute',
+                top: '-10px',
+                '& svg': {
+                  fontSize: '16px',
+                },
+              }}
+              tabIndex={-1}
+              aria-label={t`Clear date range`}
+              // eslint-disable-next-line react/jsx-no-bind
+              onClick={onResetButtonClick}
+            >
+              <ClearIcon />
+            </IconButton>
+          )}
+        </FormLabel>
+        <LocalizationProvider
+          adapterLocale={customLocale}
+          dateAdapter={AdapterDateFns}
+        >
+          <Box
+            sx={{
+              display: 'grid',
+              gridTemplateColumns: '1fr 1fr',
+              gap: theme.spacing(1),
+            }}
+          >
+            <MuiDatePicker
+              disableFuture
+              disabled={disabled || loading}
+              enableAccessibleFieldDOMStructure={false}
+              inputRef={fromInputRef}
+              label={t`From`}
+              loading={loading}
+              maxDate={toValue ? new Date(Math.min.apply(null, [maxDate, toValue] as unknown as number[])) : maxDate}
+              referenceDate={defaultFromDate}
+              slotProps={{
+                textField: {
+                  variant: 'outlined',
+                  className: classNames({ 'Mui-warning': hasWarning }),
+                  onBlur: onFromBlur,
+                  error: hasError,
+                  // eslint-disable-next-line @typescript-eslint/naming-convention
+                  InputLabelProps: {
+                    ...TestIdUtil.createAttributes('DateRangePicker-from-input'),
+                    required,
+                  },
+                },
+              }}
+              value={fromValue ?? null}
+              views={views as MuiDatePickerProps['views']}
+              minDate={minDate}
+              // eslint-disable-next-line react/jsx-no-bind
+              onChange={onFromValueChange}
+            />
+            <MuiDatePicker
+              disableFuture
+              disabled={disabled || loading}
+              enableAccessibleFieldDOMStructure={false}
+              inputRef={toInputRef}
+              label={t`To`}
+              loading={loading}
+              maxDate={maxDate}
+              referenceDate={maxDate}
+              slotProps={{
+                textField: {
+                  variant: 'outlined',
+                  className: classNames({ 'Mui-warning': hasWarning }),
+                  onBlur: onToBlur,
+                  error: hasError,
+                  // eslint-disable-next-line @typescript-eslint/naming-convention
+                  InputLabelProps: {
+                    ...TestIdUtil.createAttributes('DateRangePicker-to-input'),
+                    required,
+                  },
+                },
+              }}
+              value={toValue ?? null}
+              views={views as MuiDatePickerProps['views']}
+              minDate={fromValue ? new Date(Math.max.apply(null, [minDate, fromValue] as unknown as number[])) : minDate}
+              // eslint-disable-next-line react/jsx-no-bind
+              onChange={onToValueChange}
+            />
+          </Box>
+        </LocalizationProvider>
+        { !!loading && <FormFieldLoadingIndicator />}
+        <FormHelperText sx={{ ml: 0 }}>
+          <FormFieldHelperText
+            noIndent
+            errorMessage={errorMessage}
+            warningMessage={warningMessage}
+          />
+        </FormHelperText>
+      </FormControl>
+    );
+  }, [hasError, label, name, disabled, loading, id, required, customLocale, theme, t, maxDate, minDate, defaultFromDate, hasWarning, views, errorMessage, warningMessage, handleChange, inputValueToDate]);
+
+  return (
+    <Controller
+      control={control}
+      defaultValue={'' as PathValue<TFieldValues, TName>}
+      name={name}
+      render={renderController}
+    />
+
+  );
+};

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

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

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

@@ -0,0 +1,277 @@
+import type {
+  ChangeEvent,
+  ReactElement,
+} from 'react';
+import {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  TextField as MuiTextField,
+  FormControl,
+  IconButton,
+  InputAdornment,
+  Box,
+  Slider,
+  FormHelperText,
+} 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 isNumber from 'lodash/isNumber';
+import { useTranslation } from 'react-i18next';
+
+import { FormUtil } from '../../../../utils/FormUtil';
+import { TestIdUtil } from '../../../../utils/TestIdUtil';
+import { NumberUtil } from '../../../../utils/NumberUtil';
+import { FormFieldHelperText } from '../../helpers/FormFieldHelperText';
+import { FormFieldLoadingIndicator } from '../../helpers/FormFieldLoadingIndicator';
+
+export type NumberFieldProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {
+  readonly disabled?: boolean;
+  readonly label: string;
+  readonly name: TName;
+  readonly onChange?: (value: number) => void;
+  readonly required?: boolean;
+  readonly warningMessage?: string | boolean;
+  readonly loading?: boolean;
+  readonly placeholder?: string;
+  readonly autocomplete?: string;
+  readonly step: number;
+  readonly min: number;
+  readonly max: number;
+  readonly showSlider?: boolean;
+};
+
+const MAX_NUMBER_OF_SLIDER_STEPS = 250;
+
+export const NumberField = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>({
+  disabled = false,
+  label,
+  name,
+  onChange: onChangeProp,
+  loading = false,
+  required = false,
+  placeholder,
+  warningMessage,
+  autocomplete,
+  step,
+  min,
+  max,
+  showSlider = false,
+}: NumberFieldProps<TFieldValues, TName>): ReactElement => {
+  const { t } = useTranslation();
+  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 valueRef = useRef<string>('');
+  const [triggerValue, setTriggerValue] = useState(0);
+
+  const shouldShowSlider = useMemo(() => {
+    if (!showSlider) {
+      return false;
+    }
+    if (!isFinite(min) || !isFinite(max) || !isFinite(step) || min >= max) {
+      return false;
+    }
+    if ((max - min) / step > MAX_NUMBER_OF_SLIDER_STEPS) {
+      return false;
+    }
+    return true;
+  }, [showSlider, min, max, step]);
+
+  const onMuiTextFieldChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>
+    (event: ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      valueRef.current = value;
+
+      const parsedValue = NumberUtil.parse(value);
+      const newValue = isNaN(parsedValue) ? '' : parsedValue;
+
+      onChange(newValue);
+    }
+  , []);
+
+  const onMuiRangeSliderChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>
+    (_event: unknown, sliderValue: number | number[]) => {
+      const value = String(Array.isArray(sliderValue) ? sliderValue[0] : sliderValue);
+
+      valueRef.current = String(value);
+
+      const parsedValue = NumberUtil.parse(value);
+      const newValue = isNaN(parsedValue) ? '' : parsedValue;
+
+      onChange(newValue);
+    }
+  , []);
+
+  const onMuiTextFieldBlur = useCallback((onBlur: ControllerRenderProps<TFieldValues, TName>['onBlur'], onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>
+    () => {
+      const value = isNumber(valueRef.current) ? valueRef.current : inputRef.current.value;
+      const parsedValue = NumberUtil.parse(value);
+
+      if (isNaN(parsedValue)) {
+        valueRef.current = undefined;
+        onChange(undefined);
+        if (onChangeProp) {
+          onChangeProp(undefined);
+        }
+      } else {
+        valueRef.current = parsedValue.toString().replace('.', ','); // Update the input value to the parsed number with comma as decimal separator
+        onChange(parsedValue);
+        if (onChangeProp) {
+          onChangeProp(parsedValue);
+        }
+      }
+      setTriggerValue(prev => prev + 1); // Trigger re-render to update the displayed value based on the parsed number
+      onBlur();
+    }
+  , [onChangeProp]);
+
+  const renderController = useCallback(({ field: { onChange, onBlur, value, ref } }: UseControllerReturn<TFieldValues, TName>) => {
+    ref({
+      focus: () => {
+        inputRef?.current?.focus();
+      },
+    });
+
+    const onResetButtonClick = () => {
+      inputRef.current.value = '';
+      onChange('');
+    };
+
+    let sliderValue = NumberUtil.parse(valueRef.current) ?? (value ?? null) as number;
+    if (isNaN(sliderValue)) {
+      sliderValue = null;
+    } else if (sliderValue < min) {
+      sliderValue = min;
+    } else if (sliderValue > max) {
+      sliderValue = max;
+    }
+    const inputValue = valueRef.current ?? (value ?? '') as string;
+
+    const textField = (
+      <MuiTextField
+        data-trigger={triggerValue}
+        disabled={disabled || loading}
+        error={hasError}
+        inputRef={inputRef}
+        variant={'outlined'}
+        label={label}
+        placeholder={placeholder}
+        slotProps={{
+          formHelperText: {
+            className: classnames({ 'Mui-warning': hasWarning }),
+          },
+          input: {
+            inputProps: {
+              autoComplete: autocomplete ?? name,
+            },
+            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={inputValue}
+        onBlur={onMuiTextFieldBlur(onBlur, onChange)}
+        onChange={onMuiTextFieldChange(onChange)}
+      />
+    );
+
+    if (!shouldShowSlider) {
+      return textField;
+    }
+
+    return (
+      <Box
+        sx={{
+          display: 'grid',
+          gap: 2,
+          gridTemplateColumns: theme => `auto ${theme.spacing(24)}`,
+          alignItems: 'center',
+        }}
+      >
+        <Slider
+          marks
+          valueLabelDisplay={'auto'}
+          color={'primary'}
+          max={max}
+          min={min}
+          step={step}
+          slotProps={{
+            input: {
+              'aria-label': t`Value`,
+            },
+          }}
+          value={sliderValue}
+          onBlur={onBlur}
+          onChange={onMuiRangeSliderChange(onChange)}
+        />
+        {textField}
+      </Box>
+    );
+  }, [min, max, triggerValue, disabled, loading, hasError, label, placeholder, hasWarning, autocomplete, name, required, onMuiTextFieldBlur, onMuiTextFieldChange, shouldShowSlider, step, t, onMuiRangeSliderChange]);
+
+  return (
+    <FormControl
+      {...TestIdUtil.createAttributes('NumberField', { 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 />}
+      <FormHelperText>
+        <FormFieldHelperText
+          errorMessage={errorMessage}
+          warningMessage={warningMessage}
+        />
+      </FormHelperText>
+    </FormControl>
+  );
+};

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

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