@keycloakify/keycloak-account-ui 26.0.6-rc.1 → 260007.0.1

package/src/ui-shared/user-profile/MultiInputComponent.tsx

@@ -1,146 +0,0 @@
-import {
-  Button,
-  ButtonVariant,
-  InputGroup,
-  TextInput,
-  TextInputProps,
-  TextInputTypes,
-  InputGroupItem,
-} from "@patternfly/react-core";
-import { MinusCircleIcon, PlusCircleIcon } from "@patternfly/react-icons";
-import { type TFunction } from "i18next";
-import { Fragment, useEffect, useMemo } from "react";
-import { FieldPath, UseFormReturn, useWatch } from "react-hook-form";
-
-import { InputType, UserProfileFieldProps } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileFields";
-import { UserProfileGroup } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileGroup";
-import { UserFormFields, fieldName, labelAttribute } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/utils";
-
-export const MultiInputComponent = ({
-  t,
-  form,
-  attribute,
-  renderer,
-  ...rest
-}: UserProfileFieldProps) => (
-  <UserProfileGroup t={t} form={form} attribute={attribute} renderer={renderer}>
-    <MultiLineInput
-      t={t}
-      form={form}
-      aria-label={labelAttribute(t, attribute)}
-      name={fieldName(attribute.name)!}
-      addButtonLabel={t("addMultivaluedLabel", {
-        fieldLabel: labelAttribute(t, attribute),
-      })}
-      {...rest}
-    />
-  </UserProfileGroup>
-);
-
-export type MultiLineInputProps = Omit<TextInputProps, "form"> & {
-  t: TFunction;
-  name: FieldPath<UserFormFields>;
-  form: UseFormReturn<UserFormFields>;
-  addButtonLabel?: string;
-  isDisabled?: boolean;
-  defaultValue?: string[];
-  inputType: InputType;
-};
-
-const MultiLineInput = ({
-  t,
-  name,
-  inputType,
-  form,
-  addButtonLabel,
-  isDisabled = false,
-  defaultValue,
-  id,
-  ...rest
-}: MultiLineInputProps) => {
-  const { register, setValue, control } = form;
-  const value = useWatch({
-    name,
-    control,
-    defaultValue: defaultValue || "",
-  });
-
-  const fields = useMemo<string[]>(() => {
-    return Array.isArray(value) && value.length !== 0
-      ? value
-      : defaultValue || [""];
-  }, [value]);
-
-  const remove = (index: number) => {
-    update([...fields.slice(0, index), ...fields.slice(index + 1)]);
-  };
-
-  const append = () => {
-    update([...fields, ""]);
-  };
-
-  const updateValue = (index: number, value: string) => {
-    update([...fields.slice(0, index), value, ...fields.slice(index + 1)]);
-  };
-
-  const update = (values: string[]) => {
-    const fieldValue = values.flatMap((field) => field);
-    setValue(name, fieldValue, {
-      shouldDirty: true,
-    });
-  };
-
-  const type = inputType.startsWith("html")
-    ? (inputType.substring("html".length + 2) as TextInputTypes)
-    : "text";
-
-  useEffect(() => {
-    register(name);
-  }, [register]);
-
-  return (
-    <div id={id}>
-      {fields.map((value, index) => (
-        <Fragment key={index}>
-          <InputGroup>
-            <InputGroupItem isFill>
-              <TextInput
-                data-testid={name + index}
-                onChange={(_event, value) => updateValue(index, value)}
-                name={`${name}.${index}.value`}
-                value={value}
-                isDisabled={isDisabled}
-                type={type}
-                {...rest}
-              />
-            </InputGroupItem>
-            <InputGroupItem>
-              <Button
-                data-testid={"remove" + index}
-                variant={ButtonVariant.link}
-                onClick={() => remove(index)}
-                tabIndex={-1}
-                aria-label={t("remove")}
-                isDisabled={fields.length === 1 || isDisabled}
-              >
-                <MinusCircleIcon />
-              </Button>
-            </InputGroupItem>
-          </InputGroup>
-          {index === fields.length - 1 && (
-            <Button
-              variant={ButtonVariant.link}
-              onClick={append}
-              tabIndex={-1}
-              aria-label={t("add")}
-              data-testid="addValue"
-              isDisabled={!value || isDisabled}
-            >
-              <PlusCircleIcon /> {t(addButtonLabel || "add")}
-            </Button>
-          )}
-        </Fragment>
-      ))}
-    </div>
-  );
-};

package/src/ui-shared/user-profile/OptionsComponent.tsx

@@ -1,63 +0,0 @@
-import { Checkbox, Radio } from "@patternfly/react-core";
-import { Controller } from "react-hook-form";
-import {
-  OptionLabel,
-  Options,
-  UserProfileFieldProps,
-} from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileFields";
-import { UserProfileGroup } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileGroup";
-import { fieldName, isRequiredAttribute, label } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/utils";
-
-export const OptionComponent = (props: UserProfileFieldProps) => {
-  const { form, inputType, attribute } = props;
-  const isRequired = isRequiredAttribute(attribute);
-  const isMultiSelect = inputType.startsWith("multiselect");
-  const Component = isMultiSelect ? Checkbox : Radio;
-  const options =
-    (attribute.validators?.options as Options | undefined)?.options || [];
-
-  const optionLabel =
-    (attribute.annotations?.["inputOptionLabels"] as OptionLabel) || {};
-  const prefix = attribute.annotations?.[
-    "inputOptionLabelsI18nPrefix"
-  ] as string;
-
-  return (
-    <UserProfileGroup {...props}>
-      <Controller
-        name={fieldName(attribute.name)}
-        control={form.control}
-        defaultValue=""
-        render={({ field }) => (
-          <>
-            {options.map((option) => (
-              <Component
-                key={option}
-                id={option}
-                data-testid={option}
-                label={label(props.t, optionLabel[option], option, prefix)}
-                value={option}
-                isChecked={field.value.includes(option)}
-                onChange={() => {
-                  if (isMultiSelect) {
-                    if (field.value.includes(option)) {
-                      field.onChange(
-                        field.value.filter((item: string) => item !== option),
-                      );
-                    } else {
-                      field.onChange([...field.value, option]);
-                    }
-                  } else {
-                    field.onChange([option]);
-                  }
-                }}
-                readOnly={attribute.readOnly}
-                isRequired={isRequired}
-              />
-            ))}
-          </>
-        )}
-      />
-    </UserProfileGroup>
-  );
-};

package/src/ui-shared/user-profile/SelectComponent.tsx

@@ -1,109 +0,0 @@
-import { SelectOption } from "@patternfly/react-core";
-import { useState } from "react";
-import { Controller, ControllerRenderProps } from "react-hook-form";
-import { KeycloakSelect, SelectVariant } from "@keycloakify/keycloak-account-ui/ui-shared/select/KeycloakSelect";
-import {
-  OptionLabel,
-  Options,
-  UserProfileFieldProps,
-} from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileFields";
-import { UserProfileGroup } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileGroup";
-import { UserFormFields, fieldName, label } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/utils";
-
-export const SelectComponent = (props: UserProfileFieldProps) => {
-  const { t, form, inputType, attribute } = props;
-  const [open, setOpen] = useState(false);
-  const [filter, setFilter] = useState("");
-  const isMultiValue = inputType === "multiselect";
-
-  const setValue = (
-    value: string,
-    field: ControllerRenderProps<UserFormFields>,
-  ) => {
-    if (isMultiValue) {
-      if (field.value.includes(value)) {
-        field.onChange(field.value.filter((item: string) => item !== value));
-      } else {
-        if (Array.isArray(field.value)) {
-          field.onChange([...field.value, value]);
-        } else {
-          field.onChange([value]);
-        }
-      }
-    } else {
-      field.onChange(value === field.value ? "" : value);
-    }
-  };
-
-  const options =
-    (attribute.validators?.options as Options | undefined)?.options || [];
-
-  const optionLabel =
-    (attribute.annotations?.["inputOptionLabels"] as OptionLabel) || {};
-  const prefix = attribute.annotations?.[
-    "inputOptionLabelsI18nPrefix"
-  ] as string;
-
-  const fetchLabel = (option: string) =>
-    label(props.t, optionLabel[option], option, prefix);
-
-  const convertOptions = (selected: string) =>
-    options
-      .filter((o) =>
-        fetchLabel(o)!.toLowerCase().includes(filter.toLowerCase()),
-      )
-      .map((option) => (
-        <SelectOption
-          selected={selected === option}
-          key={option}
-          value={option}
-        >
-          {fetchLabel(option)}
-        </SelectOption>
-      ));
-
-  return (
-    <UserProfileGroup {...props}>
-      <Controller
-        name={fieldName(attribute.name)}
-        defaultValue=""
-        control={form.control}
-        render={({ field }) => (
-          <KeycloakSelect
-            toggleId={attribute.name}
-            onToggle={(b) => setOpen(b)}
-            onClear={() => setValue("", field)}
-            onSelect={(value) => {
-              const option = value.toString();
-              setValue(option, field);
-              if (!Array.isArray(field.value)) {
-                setOpen(false);
-              }
-            }}
-            selections={
-              isMultiValue && Array.isArray(field.value)
-                ? field.value
-                : fetchLabel(field.value)
-            }
-            variant={
-              isMultiValue
-                ? SelectVariant.typeaheadMulti
-                : options.length >= 10
-                  ? SelectVariant.typeahead
-                  : SelectVariant.single
-            }
-            aria-label={t("selectOne")}
-            isOpen={open}
-            isDisabled={attribute.readOnly}
-            onFilter={(value) => {
-              setFilter(value);
-              return convertOptions(field.value);
-            }}
-          >
-            {convertOptions(field.value)}
-          </KeycloakSelect>
-        )}
-      />
-    </UserProfileGroup>
-  );
-};

package/src/ui-shared/user-profile/TextAreaComponent.tsx

@@ -1,23 +0,0 @@
-import { KeycloakTextArea } from "@keycloakify/keycloak-account-ui/ui-shared/controls/keycloak-text-area/KeycloakTextArea";
-import { UserProfileFieldProps } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileFields";
-import { UserProfileGroup } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileGroup";
-import { fieldName, isRequiredAttribute } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/utils";
-
-export const TextAreaComponent = (props: UserProfileFieldProps) => {
-  const { form, attribute } = props;
-  const isRequired = isRequiredAttribute(attribute);
-
-  return (
-    <UserProfileGroup {...props}>
-      <KeycloakTextArea
-        id={attribute.name}
-        data-testid={attribute.name}
-        {...form.register(fieldName(attribute.name))}
-        cols={attribute.annotations?.["inputTypeCols"] as number}
-        rows={attribute.annotations?.["inputTypeRows"] as number}
-        readOnly={attribute.readOnly}
-        isRequired={isRequired}
-      />
-    </UserProfileGroup>
-  );
-};

package/src/ui-shared/user-profile/TextComponent.tsx

@@ -1,32 +0,0 @@
-import { TextInput, TextInputTypes } from "@patternfly/react-core";
-
-import { UserProfileFieldProps } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileFields";
-import { UserProfileGroup } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/UserProfileGroup";
-import { fieldName, isRequiredAttribute, label } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/utils";
-
-export const TextComponent = (props: UserProfileFieldProps) => {
-  const { form, inputType, attribute } = props;
-  const isRequired = isRequiredAttribute(attribute);
-  const type = inputType.startsWith("html")
-    ? (inputType.substring("html".length + 2) as TextInputTypes)
-    : "text";
-
-  return (
-    <UserProfileGroup {...props}>
-      <TextInput
-        id={attribute.name}
-        data-testid={attribute.name}
-        type={type}
-        placeholder={label(
-          props.t,
-          attribute.annotations?.["inputTypePlaceholder"] as string,
-          attribute.name,
-          attribute.annotations?.["inputOptionLabelsI18nPrefix"] as string,
-        )}
-        readOnly={attribute.readOnly}
-        isRequired={isRequired}
-        {...form.register(fieldName(attribute.name))}
-      />
-    </UserProfileGroup>
-  );
-};

package/src/ui-shared/user-profile/UserProfileFields.tsx

@@ -1,243 +0,0 @@
-import {
-  UserProfileAttributeGroupMetadata,
-  UserProfileAttributeMetadata,
-  UserProfileMetadata,
-} from "@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata";
-import { Text } from "@patternfly/react-core";
-import { TFunction } from "i18next";
-import { ReactNode, useMemo, type JSX } from "react";
-import { FieldPath, UseFormReturn } from "react-hook-form";
-
-import { ScrollForm } from "@keycloakify/keycloak-account-ui/ui-shared/main";
-import { LocaleSelector } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/LocaleSelector";
-import { MultiInputComponent } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/MultiInputComponent";
-import { OptionComponent } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/OptionsComponent";
-import { SelectComponent } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/SelectComponent";
-import { TextAreaComponent } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/TextAreaComponent";
-import { TextComponent } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/TextComponent";
-import { UserFormFields, fieldName, isRootAttribute, label } from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/utils";
-
-export type UserProfileError = {
-  responseData: { errors?: { errorMessage: string }[] };
-};
-
-export type Options = {
-  options?: string[];
-};
-
-export type InputType =
-  | "text"
-  | "textarea"
-  | "select"
-  | "select-radiobuttons"
-  | "multiselect"
-  | "multiselect-checkboxes"
-  | "html5-email"
-  | "html5-tel"
-  | "html5-url"
-  | "html5-number"
-  | "html5-range"
-  | "html5-datetime-local"
-  | "html5-date"
-  | "html5-month"
-  | "html5-time"
-  | "multi-input";
-
-export type UserProfileFieldProps = {
-  t: TFunction;
-  form: UseFormReturn<UserFormFields>;
-  inputType: InputType;
-  attribute: UserProfileAttributeMetadata;
-  renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode;
-};
-
-export type OptionLabel = Record<string, string> | undefined;
-
-export const FIELDS: {
-  [type in InputType]: (props: UserProfileFieldProps) => JSX.Element;
-} = {
-  text: TextComponent,
-  textarea: TextAreaComponent,
-  select: SelectComponent,
-  "select-radiobuttons": OptionComponent,
-  multiselect: SelectComponent,
-  "multiselect-checkboxes": OptionComponent,
-  "html5-email": TextComponent,
-  "html5-tel": TextComponent,
-  "html5-url": TextComponent,
-  "html5-number": TextComponent,
-  "html5-range": TextComponent,
-  "html5-datetime-local": TextComponent,
-  "html5-date": TextComponent,
-  "html5-month": TextComponent,
-  "html5-time": TextComponent,
-  "multi-input": MultiInputComponent,
-} as const;
-
-export type UserProfileFieldsProps = {
-  t: TFunction;
-  form: UseFormReturn<UserFormFields>;
-  userProfileMetadata: UserProfileMetadata;
-  supportedLocales: string[];
-  currentLocale: string;
-  hideReadOnly?: boolean;
-  renderer?: (
-    attribute: UserProfileAttributeMetadata,
-  ) => JSX.Element | undefined;
-};
-
-type GroupWithAttributes = {
-  group: UserProfileAttributeGroupMetadata;
-  attributes: UserProfileAttributeMetadata[];
-};
-
-export const UserProfileFields = ({
-  t,
-  form,
-  userProfileMetadata,
-  supportedLocales,
-  currentLocale,
-  hideReadOnly = false,
-  renderer,
-}: UserProfileFieldsProps) => {
-  // Group attributes by group, for easier rendering.
-  const groupsWithAttributes = useMemo(() => {
-    // If there are no attributes, there is no need to group them.
-    if (!userProfileMetadata.attributes) {
-      return [];
-    }
-
-    // Hide read-only attributes if 'hideReadOnly' is enabled.
-    const attributes = hideReadOnly
-      ? userProfileMetadata.attributes.filter(({ readOnly }) => !readOnly)
-      : userProfileMetadata.attributes;
-
-    return [
-      // Insert an empty group for attributes without a group.
-      { name: undefined },
-      ...(userProfileMetadata.groups ?? []),
-    ].map<GroupWithAttributes>((group) => ({
-      group,
-      attributes: attributes.filter(
-        (attribute) => attribute.group === group.name,
-      ),
-    }));
-  }, [
-    hideReadOnly,
-    userProfileMetadata.groups,
-    userProfileMetadata.attributes,
-  ]);
-
-  if (groupsWithAttributes.length === 0) {
-    return null;
-  }
-
-  return (
-    <ScrollForm
-      label={t("jumpToSection")}
-      sections={groupsWithAttributes
-        .filter((group) => group.attributes.length > 0)
-        .map(({ group, attributes }) => ({
-          title: label(t, group.displayHeader, group.name) || t("general"),
-          panel: (
-            <div className="pf-v5-c-form">
-              {group.displayDescription && (
-                <Text className="pf-v5-u-pb-lg">
-                  {label(t, group.displayDescription, "")}
-                </Text>
-              )}
-              {attributes.map((attribute) => (
-                <FormField
-                  key={attribute.name}
-                  t={t}
-                  form={form}
-                  supportedLocales={supportedLocales}
-                  currentLocale={currentLocale}
-                  renderer={renderer}
-                  attribute={attribute}
-                />
-              ))}
-            </div>
-          ),
-        }))}
-    />
-  );
-};
-
-type FormFieldProps = {
-  t: TFunction;
-  form: UseFormReturn<UserFormFields>;
-  supportedLocales: string[];
-  currentLocale: string;
-  attribute: UserProfileAttributeMetadata;
-  renderer?: (
-    attribute: UserProfileAttributeMetadata,
-  ) => JSX.Element | undefined;
-};
-
-const FormField = ({
-  t,
-  form,
-  renderer,
-  supportedLocales,
-  currentLocale,
-  attribute,
-}: FormFieldProps) => {
-  const value = form.watch(
-    fieldName(attribute.name) as FieldPath<UserFormFields>,
-  );
-  const inputType = useMemo(() => determineInputType(attribute), [attribute]);
-
-  const Component =
-    attribute.multivalued ||
-    (isMultiValue(value) && attribute.annotations?.inputType === undefined)
-      ? FIELDS["multi-input"]
-      : FIELDS[inputType];
-
-  if (attribute.name === "locale")
-    return (
-      <LocaleSelector
-        form={form}
-        supportedLocales={supportedLocales}
-        currentLocale={currentLocale}
-        t={t}
-        attribute={attribute}
-      />
-    );
-  return (
-    <Component
-      t={t}
-      form={form}
-      inputType={inputType}
-      attribute={attribute}
-      renderer={renderer}
-    />
-  );
-};
-
-const DEFAULT_INPUT_TYPE = "text" satisfies InputType;
-
-function determineInputType(
-  attribute: UserProfileAttributeMetadata,
-): InputType {
-  // Always treat the root attributes as a text field.
-  if (isRootAttribute(attribute.name)) {
-    return "text";
-  }
-
-  const inputType = attribute.annotations?.inputType;
-
-  // if we have an valid input type use that to render
-  if (isValidInputType(inputType)) {
-    return inputType;
-  }
-
-  // In all other cases use the default
-  return DEFAULT_INPUT_TYPE;
-}
-
-const isValidInputType = (value: unknown): value is InputType =>
-  typeof value === "string" && value in FIELDS;
-
-const isMultiValue = (value: unknown): boolean =>
-  Array.isArray(value) && value.length > 1;

package/src/ui-shared/user-profile/UserProfileGroup.tsx

@@ -1,71 +0,0 @@
-import { UserProfileAttributeMetadata } from "@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata";
-import { FormGroup, InputGroup } from "@patternfly/react-core";
-import { TFunction } from "i18next";
-import { get } from "lodash-es";
-import { PropsWithChildren, ReactNode } from "react";
-import { UseFormReturn, type FieldError } from "react-hook-form";
-
-import { FormErrorText } from "@keycloakify/keycloak-account-ui/ui-shared/controls/FormErrorText";
-import { HelpItem } from "@keycloakify/keycloak-account-ui/ui-shared/controls/HelpItem";
-import {
-  UserFormFields,
-  fieldName,
-  isRequiredAttribute,
-  label,
-  labelAttribute,
-} from "@keycloakify/keycloak-account-ui/ui-shared/user-profile/utils";
-
-export type UserProfileGroupProps = {
-  t: TFunction;
-  form: UseFormReturn<UserFormFields>;
-  attribute: UserProfileAttributeMetadata;
-  renderer?: (attribute: UserProfileAttributeMetadata) => ReactNode;
-};
-
-export const UserProfileGroup = ({
-  t,
-  form,
-  attribute,
-  renderer,
-  children,
-}: PropsWithChildren<UserProfileGroupProps>) => {
-  const helpText = label(
-    t,
-    attribute.annotations?.["inputHelperTextBefore"] as string,
-  );
-  const {
-    formState: { errors },
-  } = form;
-
-  const component = renderer?.(attribute);
-  const error = get(errors, fieldName(attribute.name)) as FieldError;
-
-  return (
-    <FormGroup
-      key={attribute.name}
-      label={labelAttribute(t, attribute) || ""}
-      fieldId={attribute.name}
-      isRequired={isRequiredAttribute(attribute)}
-      labelIcon={
-        helpText ? (
-          <HelpItem helpText={helpText} fieldLabelId={attribute.name!} />
-        ) : undefined
-      }
-    >
-      {component ? (
-        <InputGroup>
-          {children}
-          {component}
-        </InputGroup>
-      ) : (
-        children
-      )}
-      {error && (
-        <FormErrorText
-          data-testid={`${attribute.name}-helper`}
-          message={error.message as string}
-        />
-      )}
-    </FormGroup>
-  );
-};