@developer-overheid-nl/don-register-components 1.0.1 → 1.2.0

package/src/facetFilters/FacetFilters.tsx

@@ -0,0 +1,313 @@
+"use client";
+
+import clsx from "clsx";
+import type { ChangeEvent } from "react";
+import { type HTMLProps, type PropsWithChildren, useRef } from "react";
+import { I18nextProvider, useTranslation } from "react-i18next";
+import FormFieldCheckboxGroup from "../formFieldCheckboxGroup/FormFieldCheckboxGroup";
+import FormFieldCheckboxOption from "../formFieldCheckboxOption/FormFieldCheckboxOption";
+import FormFieldRadioGroup from "../formFieldRadioGroup/FormFieldRadioGroup";
+import FormFieldRadioOption from "../formFieldRadioOption/FormFieldRadioOption";
+import FormFieldSwitch from "../formFieldSwitch/FormFieldSwitch";
+import Heading, {
+  clampHeadingLevel,
+  type HeadingProps,
+} from "../heading/Heading";
+import i18n from "../i18n";
+import Paragraph from "../paragraph/Paragraph";
+import ToolTip from "../toolTip/ToolTip";
+import styles from "./styles.module.css";
+
+enum FilterType {
+  Toggle = "toggle",
+  Date = "date",
+  Multi = "multi-select",
+  Single = "single-select",
+}
+
+export interface SelectOption {
+  value: string;
+  label: string;
+  description?: string | null;
+  count: number;
+  selected: boolean;
+}
+
+interface BaseFilterItems {
+  key: string;
+  label: string;
+  description: string;
+}
+
+interface ToggleFilterData extends BaseFilterItems {
+  type: FilterType.Toggle;
+  value?: boolean;
+  count?: number;
+}
+
+interface DateFilterData extends BaseFilterItems {
+  type: FilterType.Date;
+  value?: string;
+  count?: number;
+}
+
+interface MultiSelectFilterData extends BaseFilterItems {
+  type: FilterType.Multi;
+  options: SelectOption[];
+}
+
+interface SingleSelectFilterData extends BaseFilterItems {
+  type: FilterType.Single;
+  options: SelectOption[];
+}
+
+export type FilterData =
+  | ToggleFilterData
+  | DateFilterData
+  | MultiSelectFilterData
+  | SingleSelectFilterData;
+
+type SelectedFilters = Record<string, Array<string | [string, string]>>;
+
+export interface FacetFiltersProps extends HTMLProps<HTMLDivElement> {
+  title?: string;
+  startHeadingLevel?: HeadingProps["level"];
+  filters: FilterData[] | null | undefined;
+  /**
+   * Callback function called when filter option has changed.
+   * @param selectedFilters current selected filters at the moment of change
+   * @returns
+   */
+  onFilterChange?: (selectedFilters: SelectedFilters) => void;
+  /**
+   * Types of filters for which the onFilterChange callback should be debounced. Default: ["date", "single-select"]
+   */
+  debounceTypes?: Array<FilterType>;
+  /**
+   * Delay for debouncing the onFilterChange callback, in milliseconds. Default: 600
+   */
+  debounceDelay?: number;
+}
+
+export const getSelectedFilters = (
+  filters: FilterData[] | null | undefined,
+  withLabels = false,
+): SelectedFilters => {
+  return (
+    filters?.reduce((acc, filter) => {
+      if (filter.type === FilterType.Multi) {
+        const keys: (string | [string, string])[] = filter.options
+          ?.filter((option) => option.selected)
+          .map((option) =>
+            withLabels ? [option.value, option.label] : option.value,
+          );
+        if (keys?.length > 0) {
+          acc[filter.key] = keys;
+        }
+      } else if (filter.type === FilterType.Toggle && filter.value) {
+        acc[filter.key] = withLabels ? [["true", filter.label]] : ["true"];
+      } else if (filter.type === FilterType.Date && filter.value) {
+        acc[filter.key] = withLabels
+          ? [[filter.value, filter.label]]
+          : [filter.value];
+      } else if (filter.type === FilterType.Single) {
+        const selectedOption = filter.options?.find(
+          (option) => option.selected,
+        );
+        if (selectedOption) {
+          acc[filter.key] = withLabels
+            ? [[selectedOption.value, selectedOption.label]]
+            : [selectedOption.value];
+        }
+      }
+      return acc;
+    }, {} as SelectedFilters) ?? {}
+  );
+};
+
+const updateFilters = (
+  selectedFilters: SelectedFilters,
+  filterKey: string,
+  filterValue: string,
+  checked: boolean,
+) => {
+  const newSelectedFilters = {
+    ...selectedFilters,
+    [filterKey]: checked
+      ? [...(selectedFilters[filterKey] || []), filterValue]
+      : (selectedFilters[filterKey] || []).filter(
+          (value) => value !== filterValue,
+        ),
+  };
+  return newSelectedFilters;
+};
+
+const debounce = <T extends unknown[]>(
+  fn: (...args: T) => void,
+  delay: number,
+) => {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null;
+  return (...args: T) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+    timeoutId = setTimeout(() => {
+      fn(...args);
+    }, delay);
+  };
+};
+
+const FacetFilters = (props: PropsWithChildren<FacetFiltersProps>) => {
+  const { t } = useTranslation();
+  const thisRef = useRef<HTMLDivElement>(null);
+  const {
+    title,
+    startHeadingLevel = 2,
+    filters,
+    onFilterChange = () => {},
+    debounceTypes = [FilterType.Date, FilterType.Single],
+    debounceDelay = 600,
+    ...restProps
+  } = props;
+
+  const selectedFilters = getSelectedFilters(filters);
+
+  // Callback function (for React) and CustomEvent (for non-React) to notify about filter changes
+  const emitChange = (newSelectedFilters: SelectedFilters) => {
+    onFilterChange(newSelectedFilters);
+    const customEvent = new CustomEvent("onFilterChange", {
+      detail: newSelectedFilters,
+    });
+    if (thisRef.current) thisRef.current.dispatchEvent(customEvent);
+  };
+
+  const debouncedEmitChange = useRef(
+    debounce(emitChange, debounceDelay),
+  ).current;
+
+  const handleChange = (
+    event: ChangeEvent<HTMLInputElement>,
+    type: FilterType,
+  ) => {
+    const newSelectedFilters = updateFilters(
+      selectedFilters,
+      event.target.name,
+      event.target.value,
+      event.target.checked,
+    );
+
+    if (debounceTypes.includes(type)) {
+      debouncedEmitChange(newSelectedFilters);
+    } else {
+      emitChange(newSelectedFilters);
+    }
+  };
+
+  return (
+    <div
+      ref={thisRef}
+      className={clsx([styles.facetFilters, props.className])}
+      {...restProps}
+    >
+      {title ? (
+        <Heading level={startHeadingLevel} appearanceLevel={3}>
+          {title}
+        </Heading>
+      ) : null}
+      {/* Temporary filter on `date` types */}
+      {filters
+        ?.filter(({ type }) => type !== "date")
+        .map((facet) => (
+          <div className={styles.facet} key={facet.key}>
+            <Heading
+              level={
+                title
+                  ? clampHeadingLevel(startHeadingLevel + 1)
+                  : startHeadingLevel
+              }
+              appearanceLevel={5}
+            >
+              {facet.label}
+            </Heading>
+            <Paragraph id={`${facet.key}-label`} purpose="short">
+              {facet.description}
+            </Paragraph>
+            {facet.type === "toggle" ? (
+              <FormFieldSwitch
+                label=""
+                labelledById={`${facet.key}-label`}
+                name={facet.key}
+                defaultChecked={facet.value}
+                value="true"
+                amount={facet.count || 0}
+                labels={{
+                  on: t("components.filter-on"),
+                  off: t("components.filter-off"),
+                }}
+                onChange={(event) => handleChange(event, facet.type)}
+              />
+            ) : null}
+            {/* TODO: Date selector
+          {facet.type === "date" ? <div>TODO</div> : null}
+          */}
+            {facet.type === "multi-select" ? (
+              <FormFieldCheckboxGroup>
+                {facet.options?.map((option) => (
+                  <FormFieldCheckboxOption
+                    key={option.value}
+                    label={option.label}
+                    name={facet.key}
+                    value={option.value}
+                    defaultChecked={option.selected}
+                    amount={option.count}
+                    onChange={(event) => handleChange(event, facet.type)}
+                  >
+                    {option.description ? (
+                      <ToolTip
+                        text={option.description}
+                        aria-label={t("components.info-about", {
+                          subject: option.label,
+                        })}
+                      />
+                    ) : null}
+                  </FormFieldCheckboxOption>
+                ))}
+              </FormFieldCheckboxGroup>
+            ) : null}
+            {facet.type === "single-select" ? (
+              <FormFieldRadioGroup>
+                <FormFieldRadioOption
+                  key="none"
+                  label={t("components.filter-all")}
+                  name={facet.key}
+                  value=""
+                  onChange={(event) => handleChange(event, facet.type)}
+                />
+                {facet.options?.map((option) => (
+                  <FormFieldRadioOption
+                    key={option.value}
+                    label={option.label}
+                    name={facet.key}
+                    value={option.value}
+                    defaultChecked={option.selected}
+                    amount={option.count}
+                    onChange={(event) => handleChange(event, facet.type)}
+                  />
+                ))}
+              </FormFieldRadioGroup>
+            ) : null}
+          </div>
+        ))}
+    </div>
+  );
+};
+
+const TranslatedFacetFilters = (props: FacetFiltersProps) => {
+  return (
+    <I18nextProvider i18n={i18n}>
+      <FacetFilters {...props} />
+    </I18nextProvider>
+  );
+};
+
+export default TranslatedFacetFilters;

package/src/facetFilters/styles.module.css

@@ -0,0 +1,3 @@
+.facet {
+  margin-block-end: 0.5rem;
+}

package/src/formFieldCheckboxGroup/FormFieldCheckboxGroup.tsx

@@ -0,0 +1,16 @@
+import {
+  type FormFieldCheckboxGroupProps,
+  FormFieldCheckboxGroup as RHCFormFieldCheckboxGroup,
+} from "@rijkshuisstijl-community/components-react";
+import styles from "./styles.module.css";
+
+const FormFieldCheckboxGroup = (props: FormFieldCheckboxGroupProps) => {
+  return (
+    <RHCFormFieldCheckboxGroup
+      className={styles.formFieldCheckboxGroup}
+      {...props}
+    />
+  );
+};
+
+export default FormFieldCheckboxGroup;

package/src/formFieldCheckboxGroup/styles.module.css

@@ -0,0 +1,5 @@
+.formFieldCheckboxGroup {
+  :global(& > .utrecht-form-field__label) {
+    display: none;
+  }
+}

package/src/formFieldCheckboxOption/FormFieldCheckboxOption.tsx

@@ -0,0 +1,26 @@
+import {
+  FormFieldCheckboxOption as RHCFormFieldCheckboxOption,
+  type FormFieldCheckboxOptionProps as RHCFormFieldCheckboxOptionProps,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
+import styles from "./styles.module.css";
+
+export interface FormFieldCheckboxOptionProps
+  extends Omit<RHCFormFieldCheckboxOptionProps, "label">,
+    AmountLabelProps {}
+
+const FormFieldCheckboxOption = (props: FormFieldCheckboxOptionProps) => {
+  const { amount, label, className, children, ...restProps } = props;
+  return (
+    <RHCFormFieldCheckboxOption
+      className={clsx(styles.checkbox, className)}
+      label={<AmountLabel label={label} amount={amount} />}
+      {...restProps}
+    >
+      <span className={styles.info}>{children}</span>
+    </RHCFormFieldCheckboxOption>
+  );
+};
+
+export default FormFieldCheckboxOption;

package/src/formFieldCheckboxOption/styles.module.css

@@ -0,0 +1,22 @@
+.checkbox.checkbox {
+  --utrecht-form-field-label-margin-block-end: 0;
+
+  grid-template-areas:
+    'input label info'
+    'input description description'
+    'input error-message error-message'
+    'input status status';
+
+  :global(.utrecht-form-label) {
+    display: flex;
+  }
+
+  :global(.utrecht-checkbox) {
+    order: initial;
+    margin-block-start: 0;
+  }
+}
+
+.info {
+  grid-area: info;
+}

package/src/formFieldRadioGroup/FormFieldRadioGroup.tsx

@@ -0,0 +1,13 @@
+import {
+  type FormFieldRadioGroupProps,
+  FormFieldRadioGroup as RHCFormFieldRadioGroup,
+} from "@rijkshuisstijl-community/components-react";
+import styles from "./styles.module.css";
+
+const FormFieldRadioGroup = (props: FormFieldRadioGroupProps) => {
+  return (
+    <RHCFormFieldRadioGroup className={styles.formFieldRadioGroup} {...props} />
+  );
+};
+
+export default FormFieldRadioGroup;

package/src/formFieldRadioGroup/styles.module.css

@@ -0,0 +1,5 @@
+.formFieldRadioGroup {
+  :global(& > .utrecht-form-field__label) {
+    display: none;
+  }
+}

package/src/formFieldRadioOption/FormFieldRadioOption.tsx

@@ -0,0 +1,75 @@
+import {
+  type CustomFormFieldProps,
+  FormField,
+  Radio as RHCRadio,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import { Fragment, useId } from "react";
+import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
+import styles from "./styles.module.css";
+
+export interface FormFieldRadioOptionProps
+  extends Omit<
+      CustomFormFieldProps,
+      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
+    >,
+    AmountLabelProps {
+  name: string;
+  value: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  statusId?: CustomFormFieldProps["statusId"];
+  errorMessageId?: CustomFormFieldProps["errorMessageId"];
+  descriptionId?: CustomFormFieldProps["descriptionId"];
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+const FormFieldRadioOption = (props: FormFieldRadioOptionProps) => {
+  const genId = useId();
+  const {
+    id = genId,
+    statusId = genId,
+    errorMessageId = genId,
+    descriptionId = genId,
+    name,
+    value,
+    defaultChecked,
+    checked,
+    amount,
+    label,
+    className,
+    children,
+    onChange,
+    ...restProps
+  } = props;
+
+  return (
+    <FormField
+      type="radio" // although not exposed by RHC
+      className={clsx("utrecht-form-field--radio", styles.radio, className)}
+      statusId={statusId}
+      errorMessageId={errorMessageId}
+      descriptionId={descriptionId}
+      label={
+        <Fragment>
+          <RHCRadio
+            id={id}
+            name={name}
+            value={value}
+            checked={checked}
+            defaultChecked={defaultChecked}
+            className="utrecht-checkbox--custom utrecht-form-field__input"
+            onChange={onChange}
+          />
+          <AmountLabel label={label} amount={amount} />
+        </Fragment>
+      }
+      input={null}
+      {...restProps}
+    >
+      <span className={styles.info}>{children}</span>
+    </FormField>
+  );
+};
+
+export default FormFieldRadioOption;

package/src/formFieldRadioOption/styles.module.css

@@ -0,0 +1,49 @@
+.radio.radio {
+  --utrecht-form-field-label-margin-block-end: 0;
+
+  grid-template-areas:
+    'input label info'
+    'input description description'
+    'input error-message error-message'
+    'input status status';
+
+  :global(.utrecht-form-field--radio .utrecht-form-field__label) {
+    display: block;
+  }
+
+  :global(.utrecht-form-label) {
+    /* like checkbox */
+    display: flex;
+    font-weight: var(
+      --utrecht-form-label-checkbox-font-weight,
+      var(--utrecht-form-label-font-weight)
+    );
+    color: var(
+      --utrecht-form-label-checkbox-color,
+      var(--utrecht-form-label-color)
+    );
+    cursor: var(--utrecht-action-activate-cursor, revert);
+  }
+
+  :global(.utrecht-radio-button) {
+    order: initial;
+    margin-block-start: 0;
+  }
+
+  :global(
+      .utrecht-form-field--radio
+      .utrecht-form-field__label:has(.utrecht-form-field__input)
+    ) {
+    margin-inline-start: calc(
+      -1 *
+      (
+        var(--utrecht-radio-button-size) +
+        var(--utrecht-checkbox-margin-inline-end, 12px)
+      )
+    );
+  }
+}
+
+.info {
+  grid-area: info;
+}

package/src/formFieldSwitch/FormFieldSwitch.tsx

@@ -0,0 +1,79 @@
+import {
+  type CustomFormFieldProps,
+  FormField,
+} from "@rijkshuisstijl-community/components-react";
+import clsx from "clsx";
+import { useId } from "react";
+import AmountLabel, { type AmountLabelProps } from "../amountLabel/AmountLabel";
+import Switch, { type SwitchLabels } from "../switch/Switch";
+import styles from "./styles.module.css";
+
+export interface FormFieldSwitchProps
+  extends Omit<
+      CustomFormFieldProps,
+      "label" | "statusId" | "errorMessageId" | "descriptionId" | "input"
+    >,
+    AmountLabelProps {
+  name: string;
+  value: string;
+  checked?: boolean;
+  defaultChecked?: boolean;
+  statusId?: CustomFormFieldProps["statusId"];
+  errorMessageId?: CustomFormFieldProps["errorMessageId"];
+  descriptionId?: CustomFormFieldProps["descriptionId"];
+  labelledById?: string;
+  labels?: SwitchLabels;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+}
+
+const FormFieldSwitch = (props: FormFieldSwitchProps) => {
+  const genId = useId();
+  const {
+    id = genId,
+    statusId = genId,
+    errorMessageId = genId,
+    descriptionId = genId,
+    labelledById,
+    name,
+    value,
+    defaultChecked,
+    checked,
+    amount,
+    label,
+    labels,
+    onChange,
+    className,
+    children,
+    ...restProps
+  } = props;
+
+  return (
+    <FormField
+      id={id}
+      type="checkbox"
+      className={clsx("utrecht-form-field--checkbox", styles.switch, className)}
+      statusId={statusId}
+      errorMessageId={errorMessageId}
+      descriptionId={descriptionId}
+      label={<AmountLabel label={label} amount={amount} />}
+      input={
+        <Switch
+          id={id}
+          name={name}
+          value={value}
+          checked={checked}
+          defaultChecked={defaultChecked}
+          className="utrecht-form-field__input"
+          labels={labels}
+          aria-labelledby={`${labelledById} ${id}`}
+          onChange={onChange}
+        />
+      }
+      {...restProps}
+    >
+      <span className={styles.info}>{children}</span>
+    </FormField>
+  );
+};
+
+export default FormFieldSwitch;

package/src/formFieldSwitch/styles.module.css

@@ -0,0 +1,32 @@
+.switch.switch {
+  --utrecht-form-field-label-margin-block-end: 0;
+  --utrecht-checkbox-size: var(--utrecht-form-toggle-width);
+
+  grid-template-areas:
+    'input label info'
+    'input description description'
+    'input error-message error-message'
+    'input status status';
+
+  :global(.utrecht-form-field--radio .utrecht-form-field__label) {
+    display: block;
+  }
+
+  :global(.utrecht-form-label) {
+    /* like checkbox */
+    display: flex;
+    font-weight: var(
+      --utrecht-form-label-checkbox-font-weight,
+      var(--utrecht-form-label-font-weight)
+    );
+    color: var(
+      --utrecht-form-label-checkbox-color,
+      var(--utrecht-form-label-color)
+    );
+    cursor: var(--utrecht-action-activate-cursor, revert);
+  }
+}
+
+.info {
+  grid-area: info;
+}

package/src/heading/Heading.tsx

@@ -3,6 +3,11 @@ import {
   Heading as RHCHeading,
 } from "@rijkshuisstijl-community/components-react";
 
+export type { HeadingProps } from "@rijkshuisstijl-community/components-react";
+
+export const clampHeadingLevel = (headingLevel: number) =>
+  Math.max(1, Math.min(headingLevel + 1, 5)) as HeadingProps["level"];
+
 const Heading = (props: HeadingProps) => {
   return <RHCHeading {...props} />;
 };

package/src/i18n.ts

@@ -7,6 +7,7 @@ const i18nInstance: i18n = createInstance({
   lng: "nl",
   fallbackLng: "nl",
   // debug: true,
+  showSupportNotice: false,
 
   interpolation: {
     escapeValue: false, // not needed for react as it escapes by default

package/src/iconBadge/IconBadge.tsx

@@ -8,6 +8,9 @@ export interface IconBadgeProps extends HTMLProps<HTMLSpanElement> {
   appearance?: string;
 }
 
+/**
+ * @deprecated API Register specific component (and not used anymore)
+ */
 export default function IconBadge(props: IconBadgeProps) {
   const { className, name, appearance, ...restProps } = props;
   const iconClassName = `don-icon don-icon-${name} ${className || ""}`.trim();