@keycloakify/keycloak-account-ui 25.0.1-rc.0

package/src/ui-shared/controls/PasswordControl.tsx

@@ -0,0 +1,71 @@
+import {
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import {
+  FieldPath,
+  FieldValues,
+  PathValue,
+  UseControllerProps,
+  useController,
+} from "react-hook-form";
+import { FormLabel } from "@keycloakify/keycloak-account-ui/ui-shared/controls/FormLabel";
+import { PasswordInput, PasswordInputProps } from "@keycloakify/keycloak-account-ui/ui-shared/controls/PasswordInput";
+
+export type PasswordControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = UseControllerProps<T, P> &
+  Omit<PasswordInputProps, "name" | "isRequired" | "required"> & {
+    label: string;
+    labelIcon?: string;
+    isDisabled?: boolean;
+    helperText?: string;
+  };
+
+export const PasswordControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>(
+  props: PasswordControlProps<T, P>,
+) => {
+  const { labelIcon, ...rest } = props;
+  const required = !!props.rules?.required;
+  const defaultValue = props.defaultValue ?? ("" as PathValue<T, P>);
+
+  const { field, fieldState } = useController({
+    ...props,
+    defaultValue,
+  });
+
+  return (
+    <FormLabel
+      name={props.name}
+      label={props.label}
+      labelIcon={labelIcon}
+      isRequired={required}
+      error={fieldState.error}
+    >
+      <PasswordInput
+        isRequired={required}
+        id={props.name}
+        data-testid={props.name}
+        validated={
+          fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
+        }
+        isDisabled={props.isDisabled}
+        {...rest}
+        {...field}
+      />
+      {props.helperText && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{props.helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </FormLabel>
+  );
+};

package/src/ui-shared/controls/PasswordInput.tsx

@@ -0,0 +1,50 @@
+import {
+  Button,
+  InputGroup,
+  InputGroupItem,
+  TextInput,
+  type TextInputProps,
+} from "@patternfly/react-core";
+import { EyeIcon, EyeSlashIcon } from "@patternfly/react-icons";
+import { MutableRefObject, Ref, forwardRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+export type PasswordInputProps = TextInputProps & {
+  hasReveal?: boolean;
+};
+
+const PasswordInputBase = ({
+  hasReveal = true,
+  innerRef,
+  ...rest
+}: PasswordInputProps) => {
+  const { t } = useTranslation();
+  const [hidePassword, setHidePassword] = useState(true);
+  return (
+    <InputGroup>
+      <InputGroupItem isFill>
+        <TextInput
+          {...rest}
+          type={hidePassword ? "password" : "text"}
+          ref={innerRef}
+        />
+      </InputGroupItem>
+      {hasReveal && (
+        <Button
+          variant="control"
+          aria-label={t("showPassword")}
+          onClick={() => setHidePassword(!hidePassword)}
+        >
+          {hidePassword ? <EyeIcon /> : <EyeSlashIcon />}
+        </Button>
+      )}
+    </InputGroup>
+  );
+};
+
+export const PasswordInput = forwardRef(
+  (props: PasswordInputProps, ref: Ref<HTMLInputElement>) => (
+    <PasswordInputBase {...props} innerRef={ref as MutableRefObject<any>} />
+  ),
+);
+PasswordInput.displayName = "PasswordInput";

package/src/ui-shared/controls/SwitchControl.tsx

@@ -0,0 +1,67 @@
+import {
+  Controller,
+  FieldValues,
+  FieldPath,
+  UseControllerProps,
+  PathValue,
+  useFormContext,
+} from "react-hook-form";
+import { SwitchProps, Switch } from "@patternfly/react-core";
+import { FormLabel } from "@keycloakify/keycloak-account-ui/ui-shared/controls/FormLabel";
+
+export type SwitchControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = Omit<SwitchProps, "name" | "defaultValue" | "ref"> &
+  UseControllerProps<T, P> & {
+    name: string;
+    label?: string;
+    labelIcon?: string;
+    labelOn: string;
+    labelOff: string;
+    stringify?: boolean;
+  };
+
+export const SwitchControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>({
+  labelOn,
+  stringify,
+  defaultValue,
+  labelIcon,
+  ...props
+}: SwitchControlProps<T, P>) => {
+  const fallbackValue = stringify ? "false" : false;
+  const defValue = defaultValue ?? (fallbackValue as PathValue<T, P>);
+  const { control } = useFormContext();
+  return (
+    <FormLabel
+      hasNoPaddingTop
+      name={props.name}
+      isRequired={props.rules?.required === true}
+      label={props.label}
+      labelIcon={labelIcon}
+    >
+      <Controller
+        control={control}
+        name={props.name}
+        defaultValue={defValue}
+        render={({ field: { onChange, value } }) => (
+          <Switch
+            {...props}
+            id={props.name}
+            data-testid={props.name}
+            label={labelOn}
+            isChecked={stringify ? value === "true" : value}
+            onChange={(e, checked) => {
+              const value = stringify ? checked.toString() : checked;
+              props.onChange?.(e, checked);
+              onChange(value);
+            }}
+          />
+        )}
+      />
+    </FormLabel>
+  );
+};

package/src/ui-shared/controls/TextAreaControl.tsx

@@ -0,0 +1,60 @@
+import {
+  TextArea,
+  TextAreaProps,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import {
+  FieldPath,
+  FieldValues,
+  PathValue,
+  UseControllerProps,
+  useController,
+} from "react-hook-form";
+
+import { FormLabel } from "@keycloakify/keycloak-account-ui/ui-shared/controls/FormLabel";
+
+export type TextAreaControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = UseControllerProps<T, P> &
+  TextAreaProps & {
+    label: string;
+    labelIcon?: string;
+    isDisabled?: boolean;
+  };
+
+export const TextAreaControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>(
+  props: TextAreaControlProps<T, P>,
+) => {
+  const required = !!props.rules?.required;
+  const defaultValue = props.defaultValue ?? ("" as PathValue<T, P>);
+
+  const { field, fieldState } = useController({
+    ...props,
+    defaultValue,
+  });
+
+  return (
+    <FormLabel
+      isRequired={required}
+      label={props.label}
+      labelIcon={props.labelIcon}
+      name={props.name}
+      error={fieldState.error}
+    >
+      <TextArea
+        isRequired={required}
+        id={props.name}
+        data-testid={props.name}
+        validated={
+          fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
+        }
+        isDisabled={props.isDisabled}
+        {...field}
+      />
+    </FormLabel>
+  );
+};

package/src/ui-shared/controls/TextControl.tsx

@@ -0,0 +1,74 @@
+import {
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+  TextInput,
+  TextInputProps,
+  ValidatedOptions,
+} from "@patternfly/react-core";
+import { ReactNode } from "react";
+import {
+  FieldPath,
+  FieldValues,
+  PathValue,
+  UseControllerProps,
+  useController,
+} from "react-hook-form";
+
+import { FormLabel } from "@keycloakify/keycloak-account-ui/ui-shared/controls/FormLabel";
+
+export type TextControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = UseControllerProps<T, P> &
+  Omit<TextInputProps, "name" | "isRequired" | "required"> & {
+    label: string;
+    labelIcon?: string | ReactNode;
+    isDisabled?: boolean;
+    helperText?: string;
+  };
+
+export const TextControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>(
+  props: TextControlProps<T, P>,
+) => {
+  const { labelIcon, ...rest } = props;
+  const required = !!props.rules?.required;
+  const defaultValue = props.defaultValue ?? ("" as PathValue<T, P>);
+
+  const { field, fieldState } = useController({
+    ...props,
+    defaultValue,
+  });
+
+  return (
+    <FormLabel
+      name={props.name}
+      label={props.label}
+      labelIcon={labelIcon}
+      isRequired={required}
+      error={fieldState.error}
+    >
+      <TextInput
+        isRequired={required}
+        id={props.name}
+        data-testid={props.name}
+        validated={
+          fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
+        }
+        isDisabled={props.isDisabled}
+        {...rest}
+        {...field}
+      />
+      {props.helperText && (
+        <FormHelperText>
+          <HelperText>
+            <HelperTextItem>{props.helperText}</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      )}
+    </FormLabel>
+  );
+};

package/src/ui-shared/controls/keycloak-text-area/KeycloakTextArea.tsx

@@ -0,0 +1,23 @@
+// TODO: Remove code once the following issue has been fixed:
+// https://github.com/patternfly/patternfly-react/issues/10192
+import { TextArea } from "@patternfly/react-core";
+import {
+  ComponentProps,
+  HTMLProps,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+} from "react";
+
+// PatternFly changes the signature of the 'onFocus' and 'onBlur' handlers for textarea elements.
+// This causes issues with React Hook Form as it expects the default signature for a textarea element.
+// So we have to create this wrapper component that takes care of converting these signatures for us.
+
+export type KeycloakTextAreaProps = Omit<
+  ComponentProps<typeof TextArea>,
+  "onFocus" | "onBlur"
+> &
+  Pick<HTMLProps<HTMLTextAreaElement>, "onFocus" | "onBlur">;
+
+export const KeycloakTextArea = TextArea as ForwardRefExoticComponent<
+  KeycloakTextAreaProps & RefAttributes<HTMLTextAreaElement>
+>;

package/src/ui-shared/controls/select-control/SelectControl.tsx

@@ -0,0 +1,75 @@
+import { ChipGroupProps, SelectProps } from "@patternfly/react-core";
+import {
+  ControllerProps,
+  FieldPath,
+  FieldValues,
+  UseControllerProps,
+} from "react-hook-form";
+import { SingleSelectControl } from "@keycloakify/keycloak-account-ui/ui-shared/controls/select-control/SingleSelectControl";
+import { TypeaheadSelectControl } from "@keycloakify/keycloak-account-ui/ui-shared/controls/select-control/TypeaheadSelectControl";
+
+type Variant = `${SelectVariant}`;
+
+export enum SelectVariant {
+  single = "single",
+  typeahead = "typeahead",
+  typeaheadMulti = "typeaheadMulti",
+}
+
+export type SelectControlOption = {
+  key: string;
+  value: string;
+};
+
+export type OptionType = string[] | SelectControlOption[];
+
+export type SelectControlProps<
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+> = Omit<
+  SelectProps,
+  | "name"
+  | "toggle"
+  | "selections"
+  | "onSelect"
+  | "onClear"
+  | "isOpen"
+  | "onFilter"
+  | "variant"
+> &
+  UseControllerProps<T, P> & {
+    name: string;
+    label?: string;
+    options: OptionType;
+    labelIcon?: string;
+    controller: Omit<ControllerProps, "name" | "render">;
+    onFilter?: (value: string) => void;
+    variant?: Variant;
+    isDisabled?: boolean;
+    menuAppendTo?: string;
+    placeholderText?: string;
+    chipGroupProps?: ChipGroupProps;
+  };
+
+export const isSelectBasedOptions = (
+  options: OptionType,
+): options is SelectControlOption[] => typeof options[0] !== "string";
+
+export const isString = (
+  option: SelectControlOption | string,
+): option is string => typeof option === "string";
+export const key = (option: SelectControlOption | string) =>
+  isString(option) ? option : option.key;
+
+export const SelectControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>({
+  variant = SelectVariant.single,
+  ...rest
+}: SelectControlProps<T, P>) =>
+  variant === SelectVariant.single ? (
+    <SingleSelectControl {...rest} />
+  ) : (
+    <TypeaheadSelectControl {...rest} variant={variant} />
+  );

package/src/ui-shared/controls/select-control/SingleSelectControl.tsx

@@ -0,0 +1,107 @@
+import {
+  MenuToggle,
+  MenuToggleStatus,
+  Select,
+  SelectList,
+  SelectOption,
+} from "@patternfly/react-core";
+import { get } from "lodash-es";
+import { useState } from "react";
+import {
+  Controller,
+  FieldPath,
+  FieldValues,
+  useFormContext,
+} from "react-hook-form";
+import { FormLabel } from "@keycloakify/keycloak-account-ui/ui-shared/controls/FormLabel";
+import {
+  SelectControlProps,
+  isSelectBasedOptions,
+  isString,
+  key,
+} from "@keycloakify/keycloak-account-ui/ui-shared/controls/select-control/SelectControl";
+
+export const SingleSelectControl = <
+  T extends FieldValues,
+  P extends FieldPath<T> = FieldPath<T>,
+>({
+  id,
+  name,
+  label,
+  options,
+  controller,
+  labelIcon,
+  ...rest
+}: SelectControlProps<T, P>) => {
+  const {
+    control,
+    formState: { errors },
+  } = useFormContext();
+  const [open, setOpen] = useState(false);
+
+  return (
+    <FormLabel
+      name={name}
+      label={label}
+      isRequired={!!controller.rules?.required}
+      error={get(errors, name)}
+      labelIcon={labelIcon}
+    >
+      <Controller
+        {...controller}
+        name={name}
+        control={control}
+        render={({ field: { onChange, value } }) => (
+          <Select
+            {...rest}
+            onClick={() => setOpen(!open)}
+            onOpenChange={() => setOpen(false)}
+            selected={
+              isSelectBasedOptions(options)
+                ? options
+                    .filter((o) =>
+                      Array.isArray(value)
+                        ? value.includes(o.key)
+                        : value === o.key,
+                    )
+                    .map((o) => o.value)
+                : value
+            }
+            toggle={(ref) => (
+              <MenuToggle
+                id={id || name.slice(name.lastIndexOf(".") + 1)}
+                ref={ref}
+                onClick={() => setOpen(!open)}
+                isExpanded={open}
+                isFullWidth
+                status={get(errors, name) ? MenuToggleStatus.danger : undefined}
+                aria-label="toggle"
+              >
+                {isSelectBasedOptions(options)
+                  ? options.find(
+                      (o) =>
+                        o.key === (Array.isArray(value) ? value[0] : value),
+                    )?.value
+                  : value}
+              </MenuToggle>
+            )}
+            onSelect={(_event, v) => {
+              const option = v?.toString();
+              onChange(Array.isArray(value) ? [option] : option);
+              setOpen(false);
+            }}
+            isOpen={open}
+          >
+            <SelectList>
+              {options.map((option) => (
+                <SelectOption key={key(option)} value={key(option)}>
+                  {isString(option) ? option : option.value}
+                </SelectOption>
+              ))}
+            </SelectList>
+          </Select>
+        )}
+      />
+    </FormLabel>
+  );
+};