@gen-epix/ui 1.15.0 → 1.15.2

package/src/components/epi/EpiWidgetUnavailable/EpiWidgetUnavailable.tsx

@@ -1,51 +0,0 @@
-import {
-  Box,
-  Button,
-  Typography,
-} from '@mui/material';
-import { useTranslation } from 'react-i18next';
-import { useCallback } from 'react';
-import { useStore } from 'zustand';
-import { produce } from 'immer';
-
-import type { EPI_ZONE } from '../../../models/epi';
-import { userProfileStore } from '../../../stores/userProfileStore';
-
-export type EpiWidgetUnavailableProps = {
-  readonly widgetName: string;
-  readonly epiZone: EPI_ZONE;
-};
-
-export const EpiWidgetUnavailable = ({ widgetName, epiZone }: EpiWidgetUnavailableProps) => {
-  const { t } = useTranslation();
-  const epiDashboardLayoutUserConfig = useStore(userProfileStore, (state) => state.epiDashboardLayoutUserConfig);
-  const setEpiDashboardLayoutUserConfig = useStore(userProfileStore, (state) => state.setEpiDashboardLayoutUserConfig);
-
-  const onDisableButtonClick = useCallback(() => {
-    setEpiDashboardLayoutUserConfig(produce(epiDashboardLayoutUserConfig, (draft => {
-      draft.arrangement = 0;
-      draft.zones[epiZone as keyof typeof draft.zones] = false;
-      return draft;
-    })));
-  }, [epiDashboardLayoutUserConfig, epiZone, setEpiDashboardLayoutUserConfig]);
-
-  return (
-    <Box marginY={1}>
-      <Box marginY={1}>
-        <Typography>
-          {t('The {{widgetName}} cannot be shown.', { widgetName })}
-        </Typography>
-      </Box>
-      <Box marginY={1}>
-        <Button
-          color={'primary'}
-          size={'small'}
-          variant={'outlined'}
-          onClick={onDisableButtonClick}
-        >
-          {t('Hide {{widgetName}}', { widgetName })}
-        </Button>
-      </Box>
-    </Box>
-  );
-};

package/src/components/epi/EpiWidgetUnavailable/index.ts

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

package/src/components/filters/BooleanFilterField/BooleanFilterField.tsx

@@ -1,26 +0,0 @@
-import { Box } from '@mui/material';
-import { useMemo } from 'react';
-
-import type { BooleanFilter } from '../../../classes/filters/BooleanFilter';
-import type { SelectOption } from '../../../models/form';
-import { Select } from '../../form/fields/Select';
-
-
-export type BooleanFilterFieldProps = {
-  readonly filter: BooleanFilter;
-};
-export const BooleanFilterField = ({ filter }: BooleanFilterFieldProps) => {
-  const options = useMemo<SelectOption<boolean>[]>(() => [
-    { value: true, label: 'Yes' },
-    { value: false, label: 'No' },
-  ], []);
-  return (
-    <Box>
-      <Select
-        label={filter.label}
-        name={filter.id}
-        options={options}
-      />
-    </Box>
-  );
-};

package/src/components/filters/BooleanFilterField/index.ts

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

package/src/components/filters/DateFilterField/DateFilterField.tsx

@@ -1,23 +0,0 @@
-import { Box } from '@mui/material';
-
-import type { DateFilter } from '../../../classes/filters/DateFilter';
-import { DateRangePicker } from '../../form/fields/DateRangePicker';
-
-
-export type DateFilterFieldProps = {
-  readonly filter: DateFilter;
-};
-
-export const DateFilterField = ({ filter }: DateFilterFieldProps) => {
-  return (
-    <Box>
-      <DateRangePicker
-        dateFormat={filter.dateFormat}
-        label={filter.label}
-        maxDate={filter.maxDate}
-        minDate={filter.minDate}
-        name={filter.id}
-      />
-    </Box>
-  );
-};

package/src/components/filters/DateFilterField/index.ts

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

package/src/components/filters/GeoFilterField/GeoFilterField.tsx

@@ -1,32 +0,0 @@
-import { Box } from '@mui/material';
-
-import type { GeoFilter } from '../../../classes/filters/GeoFilter';
-import { CheckboxGroup } from '../../form/fields/CheckboxGroup';
-import { Autocomplete } from '../../form/fields/Autocomplete';
-
-export type GeoFilterFieldProps = {
-  readonly filter: GeoFilter;
-};
-
-export const GeoFilterField = ({ filter }: GeoFilterFieldProps) => {
-  return (
-    <Box>
-      {filter.options.length <= 5 && (
-        <CheckboxGroup
-          label={filter.label}
-          name={filter.id}
-          options={filter.options}
-        />
-      )}
-      {filter.options.length > 5 && (
-        <Autocomplete
-          multiple
-          shouldSortOptions
-          label={filter.label}
-          name={filter.id}
-          options={filter.options}
-        />
-      )}
-    </Box>
-  );
-};

package/src/components/filters/GeoFilterField/index.ts

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

package/src/components/filters/MultiSelectFilterField/MultiSelectFilterField.tsx

@@ -1,31 +0,0 @@
-import { Box } from '@mui/material';
-
-import type { MultiSelectFilter } from '../../../classes/filters/MultiSelectFilter';
-import { CheckboxGroup } from '../../form/fields/CheckboxGroup';
-import { Autocomplete } from '../../form/fields/Autocomplete';
-
-export type MultiSelectFilterFieldProps = {
-  readonly filter: MultiSelectFilter;
-};
-
-export const MultiSelectFilterField = ({ filter }: MultiSelectFilterFieldProps) => {
-  return (
-    <Box>
-      {filter.options.length <= filter.maxNumOptionsExpanded && (
-        <CheckboxGroup
-          label={filter.label}
-          name={filter.id}
-          options={filter.options}
-        />
-      )}
-      {filter.options.length > filter.maxNumOptionsExpanded && (
-        <Autocomplete
-          multiple
-          label={filter.label}
-          name={filter.id}
-          options={filter.options}
-        />
-      )}
-    </Box>
-  );
-};

package/src/components/filters/MultiSelectFilterField/index.ts

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

package/src/components/filters/NumberRangeFilterField/NumberRangeFilterField.tsx

@@ -1,20 +0,0 @@
-import { Box } from '@mui/material';
-
-import type { NumberRangeFilter } from '../../../classes/filters/NumberRangeFilter';
-import { NumberRangeInput } from '../../form/fields/NumberRangeInput';
-
-export type NumberRangeFilterFieldProps = {
-  readonly filter: NumberRangeFilter;
-};
-export const NumberRangeFilterField = ({ filter }: NumberRangeFilterFieldProps) => {
-  return (
-    <Box>
-      <NumberRangeInput
-        label={filter.label}
-        max={filter.max}
-        min={filter.min}
-        name={filter.id}
-      />
-    </Box>
-  );
-};

package/src/components/filters/NumberRangeFilterField/index.ts

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

package/src/components/filters/TextFilterField/TextFilterField.tsx

@@ -1,18 +0,0 @@
-import { Box } from '@mui/material';
-
-import type { TextFilter } from '../../../classes/filters/TextFilter';
-import { TextField } from '../../form/fields/TextField';
-
-export type TextFilterFieldProps = {
-  readonly filter: TextFilter;
-};
-export const TextFilterField = ({ filter }: TextFilterFieldProps) => {
-  return (
-    <Box>
-      <TextField
-        label={filter.label}
-        name={filter.id}
-      />
-    </Box>
-  );
-};

package/src/components/filters/TextFilterField/index.ts

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

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

@@ -1,270 +0,0 @@
-import type {
-  ChangeEvent,
-  HTMLAttributes,
-  ReactElement,
-  ReactNode,
-} from 'react';
-import {
-  useCallback,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import {
-  Autocomplete as MuiAutocomplete,
-  TextField,
-  FormControl,
-  Checkbox,
-  Chip,
-  Stack,
-} from '@mui/material';
-import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import type {
-  AutocompleteRenderInputParams,
-  FilterOptionsState,
-  AutocompleteValue,
-  AutocompleteRenderOptionState,
-  AutocompleteRenderGetTagProps,
-} 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 { useTranslation } from 'react-i18next';
-
-import type { AutoCompleteOption } 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;
-
-export type AutocompleteProps<TFieldValues extends FieldValues, TName extends Path<TFieldValues>, TMultiple extends boolean> = {
-  readonly disabled?: boolean;
-  readonly label: string;
-  readonly name: TName;
-  readonly onChange?: (value: AutocompleteValue<TFieldValues[TName], TMultiple, false, false>) => void;
-  readonly required?: boolean;
-  readonly warningMessage?: string | boolean;
-  readonly groupValues?: boolean;
-  readonly options: AutoCompleteOption[];
-  readonly multiple?: TMultiple;
-  readonly shouldSortOptions?: boolean;
-  readonly loading?: boolean;
-};
-
-export const Autocomplete = <TFieldValues extends FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>, TMultiple extends boolean = false>({
-  disabled = false,
-  groupValues = false,
-  label,
-  loading = false,
-  name,
-  onChange: onChangeProp,
-  options,
-  required = false,
-  warningMessage,
-  multiple,
-  shouldSortOptions,
-}: AutocompleteProps<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 [inputValue, setInputValue] = useState('');
-
-  const hasError = !!errorMessage;
-  const hasWarning = !!warningMessage && !hasError;
-
-  const sortedOptions = useMemo(() => {
-    if (!shouldSortOptions) {
-      return options;
-    }
-    return structuredClone(options).sort((a, b) => a.label.localeCompare(b.label));
-  }, [options, shouldSortOptions]);
-
-  const { mappedOptions, optionValues }: { mappedOptions: Map<Value, AutoCompleteOption>; optionValues: Array<Value> } = useMemo(() => {
-    const values: Array<Value> = [];
-    const mapped = new Map<Value, AutoCompleteOption>();
-    sortedOptions.forEach(option => {
-      values.push(option.value);
-      mapped.set(option.value, option);
-    });
-    return {
-      optionValues: values,
-      mappedOptions: mapped,
-    };
-  }, [sortedOptions]);
-
-  const getOptionLabel = useCallback((value: AutoCompleteOption['value']) => loading ? t`Loading...` : mappedOptions.get(value)?.label, [loading, mappedOptions, t]);
-  const getIsOptionEqualToValue = useCallback((optionValue: AutoCompleteOption['value'], value: AutoCompleteOption['value']) => optionValue === value, []);
-  const getIsOptionDisabled = useCallback((value: AutoCompleteOption['value']): boolean => mappedOptions.get(value)?.disabled, [mappedOptions]);
-  const groupBy = useCallback((value: AutoCompleteOption['value']): string => mappedOptions.get(value)?.groupByValue, [mappedOptions]);
-
-  const renderOption = useCallback((props: HTMLAttributes<HTMLLIElement>, option: TFieldValues[TName], state: AutocompleteRenderOptionState): ReactNode => {
-    return (
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
-      <li
-        key={option}
-        aria-disabled={props['aria-disabled']}
-        aria-selected={props['aria-selected']}
-        className={props.className}
-        data-option-index={(props as { 'data-option-index': string })['data-option-index']}
-        id={props.id}
-        role={props.role}
-        style={{
-          padding: 0,
-          margin: 0,
-        }}
-        tabIndex={props.tabIndex}
-        onClick={props.onClick}
-        onMouseMove={props.onMouseMove}
-        onTouchStart={props.onTouchStart}
-      >
-        <Checkbox
-          checked={state.selected}
-          checkedIcon={<CheckBoxIcon />}
-          icon={<CheckBoxOutlineBlankIcon />}
-          style={{ marginRight: 8 }}
-        />
-        {getOptionLabel(option)}
-      </li>
-    );
-  }, [getOptionLabel]);
-
-  const onInputValueChange = useCallback((event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-    setInputValue(event.target.value);
-  }, []);
-
-  const renderInput = useCallback((params: AutocompleteRenderInputParams) => {
-    const helperText = (
-      <FormFieldHelperText
-        errorMessage={errorMessage}
-        warningMessage={warningMessage}
-      />
-    );
-
-    return (
-      <TextField
-        {...params}
-        error={hasError}
-        helperText={helperText}
-        inputRef={inputRef}
-        variant={'outlined'}
-        label={label}
-        slotProps={{
-          formHelperText: { className: classnames({ 'Mui-warning': hasWarning }) },
-          inputLabel: {
-            required: required && !disabled,
-            className: classnames({ 'Mui-warning': hasWarning }),
-          },
-          input: {
-            ...params.InputProps,
-            className: classnames(params?.InputProps?.className, {
-              'Mui-warning': hasWarning,
-            }),
-          },
-        }}
-        onChange={multiple ? onInputValueChange : undefined}
-      />
-    );
-  }, [disabled, errorMessage, hasError, hasWarning, label, multiple, onInputValueChange, required, warningMessage]);
-
-  const renderTags = useCallback((values: TFieldValues[TName][], getTagProps: AutocompleteRenderGetTagProps) => {
-    return (
-      <Stack
-        direction={'row'}
-        flexWrap={'wrap'}
-        spacing={1}
-      >
-        {values.map((value, index) => {
-          const props = getTagProps({ index });
-          const option = mappedOptions.get(value);
-          if (option?.disabled) {
-            delete props.onDelete;
-          }
-          return (
-            <Chip
-              {...props}
-              key={value}
-              label={getOptionLabel(value)}
-              size={'small'}
-            />
-          );
-        })}
-      </Stack>
-    );
-  }, [getOptionLabel, mappedOptions]);
-
-  const onMuiAutocompleteChange = useCallback((onChange: ControllerRenderProps<TFieldValues, TName>['onChange']) =>
-    (_event: ChangeEvent<unknown>, value: AutocompleteValue<TFieldValues[TName], TMultiple, false, false>) => {
-      if (onChangeProp) {
-        onChangeProp(value as TFieldValues[TName]);
-      }
-      onChange(value);
-    }
-  , [onChangeProp]);
-
-  const filterOptions = useCallback((_filterableOptions: TFieldValues[TName][], filterState: FilterOptionsState<TFieldValues[TName]>): TFieldValues[TName][] => {
-    if (filterState.inputValue) {
-      return sortedOptions.filter(option => option.label.toLowerCase().includes(filterState.inputValue.toLowerCase())).map((option) => option.value) as TFieldValues[TName][];
-    }
-    return sortedOptions.map((option) => option.value) as TFieldValues[TName][];
-  }, [sortedOptions]);
-
-  const renderController = useCallback(({ field: { onChange, onBlur, value, ref } }: UseControllerReturn<TFieldValues, TName>) => {
-    ref({
-      focus: () => {
-        inputRef?.current?.focus();
-      },
-    });
-    return (
-      <MuiAutocomplete<TFieldValues[TName], TMultiple>
-        autoComplete
-        autoHighlight
-        disableClearable={required as undefined}
-        disableCloseOnSelect={multiple}
-        disabled={disabled || loading}
-        filterOptions={filterOptions}
-        getOptionDisabled={getIsOptionDisabled}
-        getOptionLabel={getOptionLabel}
-        groupBy={groupValues ? groupBy : undefined}
-        inputValue={multiple ? inputValue : undefined}
-        isOptionEqualToValue={getIsOptionEqualToValue}
-        multiple={multiple}
-        noOptionsText={t`No results`}
-        options={optionValues as TFieldValues[TName]}
-        renderInput={renderInput}
-        renderOption={multiple ? renderOption : undefined}
-        renderTags={multiple ? renderTags : undefined}
-        value={value}
-        onBlur={onBlur}
-        onChange={onMuiAutocompleteChange(onChange)}
-      />
-    );
-  }, [required, multiple, disabled, loading, filterOptions, getIsOptionDisabled, getOptionLabel, groupValues, groupBy, inputValue, getIsOptionEqualToValue, t, onMuiAutocompleteChange, optionValues, renderInput, renderOption, renderTags]);
-
-  return (
-    <FormControl
-      {...TestIdUtil.createAttributes('Autocomplete', { label, name: name as string })}
-      fullWidth
-    >
-      <Controller
-        control={control}
-        defaultValue={null}
-        name={name}
-        render={renderController}
-      />
-      {!!loading && <FormFieldLoadingIndicator />}
-    </FormControl>
-  );
-};

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

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