@keycloakify/keycloak-account-ui 26.0.0-rc.3 → 260007.0.0

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

@@ -1,93 +0,0 @@
-import {
-  NumberInput,
-  NumberInputProps,
-  ValidatedOptions,
-} from "@patternfly/react-core";
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  UseControllerProps,
-  useFormContext,
-} from "react-hook-form";
-
-import { getRuleValue } from "@keycloakify/keycloak-account-ui/ui-shared/utils/getRuleValue";
-import { FormLabel } from "@keycloakify/keycloak-account-ui/ui-shared/controls/FormLabel";
-
-export type NumberControlOption = {
-  key: string;
-  value: string;
-};
-
-export type NumberControlProps<
-  T extends FieldValues,
-  P extends FieldPath<T> = FieldPath<T>,
-> = Omit<NumberInputProps, "name" | "isRequired" | "required"> &
-  UseControllerProps<T, P> & {
-    name: string;
-    label?: string;
-    labelIcon?: string;
-    controller: Omit<ControllerProps, "name" | "render">;
-  };
-
-export const NumberControl = <
-  T extends FieldValues,
-  P extends FieldPath<T> = FieldPath<T>,
->({
-  name,
-  label,
-  controller,
-  labelIcon,
-  ...rest
-}: NumberControlProps<T, P>) => {
-  const {
-    control,
-    formState: { errors },
-  } = useFormContext();
-
-  return (
-    <FormLabel
-      name={name}
-      label={label}
-      isRequired={controller.rules?.required === true}
-      error={errors[name]}
-      labelIcon={labelIcon}
-    >
-      <Controller
-        {...controller}
-        name={name}
-        control={control}
-        render={({ field }) => {
-          const required = !!controller.rules?.required;
-          const min = getRuleValue(controller.rules?.min);
-          const value = field.value ?? controller.defaultValue;
-          const setValue = (newValue: number) =>
-            field.onChange(
-              min !== undefined ? Math.max(newValue, Number(min)) : newValue,
-            );
-
-          return (
-            <NumberInput
-              {...rest}
-              id={name}
-              value={value}
-              validated={
-                errors[name] ? ValidatedOptions.error : ValidatedOptions.default
-              }
-              required={required}
-              min={Number(min)}
-              max={Number(controller.rules?.max)}
-              onPlus={() => setValue(value + 1)}
-              onMinus={() => setValue(value - 1)}
-              onChange={(event) => {
-                const newValue = Number(event.currentTarget.value);
-                setValue(!isNaN(newValue) ? newValue : controller.defaultValue);
-              }}
-            />
-          );
-        }}
-      />
-    </FormLabel>
-  );
-};

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

@@ -1,122 +0,0 @@
-import OrganizationRepresentation from "@keycloak/keycloak-admin-client/lib/defs/organizationRepresentation";
-import { Badge, Chip, ChipGroup } from "@patternfly/react-core";
-import { TableText } from "@patternfly/react-table";
-import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
-import { useTranslation } from "react-i18next";
-import { KeycloakDataTable, LoaderFunction } from "@keycloakify/keycloak-account-ui/ui-shared/controls/table/KeycloakDataTable";
-
-type OrgDetailLinkProps = {
-  link: FunctionComponent<
-    PropsWithChildren<{ organization: OrganizationRepresentation }>
-  >;
-  organization: OrganizationRepresentation;
-};
-
-const OrgDetailLink = ({ link, organization }: OrgDetailLinkProps) => {
-  const { t } = useTranslation();
-  const Component = link;
-  return (
-    <TableText wrapModifier="truncate">
-      <Component organization={organization}>
-        {organization.name}
-        {!organization.enabled && (
-          <Badge
-            key={`${organization.id}-disabled`}
-            isRead
-            className="pf-v5-u-ml-sm"
-          >
-            {t("disabled")}
-          </Badge>
-        )}
-      </Component>
-    </TableText>
-  );
-};
-
-const Domains = (org: OrganizationRepresentation) => {
-  const { t } = useTranslation();
-  return (
-    <ChipGroup
-      numChips={2}
-      expandedText={t("hide")}
-      collapsedText={t("showRemaining")}
-    >
-      {org.domains?.map((dn) => {
-        const name = typeof dn === "string" ? dn : dn.name;
-        return (
-          <Chip key={name} isReadOnly>
-            {name}
-          </Chip>
-        );
-      })}
-    </ChipGroup>
-  );
-};
-
-type OrganizationTableProps = PropsWithChildren & {
-  loader:
-    | LoaderFunction<OrganizationRepresentation>
-    | OrganizationRepresentation[];
-  link: FunctionComponent<
-    PropsWithChildren<{ organization: OrganizationRepresentation }>
-  >;
-  toolbarItem?: ReactNode;
-  isPaginated?: boolean;
-  onSelect?: (orgs: OrganizationRepresentation[]) => void;
-  onDelete?: (org: OrganizationRepresentation) => void;
-  deleteLabel?: string;
-};
-
-export const OrganizationTable = ({
-  loader,
-  toolbarItem,
-  isPaginated = false,
-  onSelect,
-  onDelete,
-  deleteLabel = "delete",
-  link,
-  children,
-}: OrganizationTableProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <KeycloakDataTable
-      loader={loader}
-      isPaginated={isPaginated}
-      ariaLabelKey="organizationList"
-      searchPlaceholderKey="searchOrganization"
-      toolbarItem={toolbarItem}
-      onSelect={onSelect}
-      canSelectAll={onSelect !== undefined}
-      actions={
-        onDelete
-          ? [
-              {
-                title: t(deleteLabel),
-                onRowClick: onDelete,
-              },
-            ]
-          : undefined
-      }
-      columns={[
-        {
-          name: "name",
-          displayKey: "name",
-          cellRenderer: (row) => (
-            <OrgDetailLink link={link} organization={row} />
-          ),
-        },
-        {
-          name: "domains",
-          displayKey: "domains",
-          cellRenderer: Domains,
-        },
-        {
-          name: "description",
-          displayKey: "description",
-        },
-      ]}
-      emptyState={children}
-    />
-  );
-};

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

@@ -1,71 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,60 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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;
-    "data-testid"?: string;
-  };
-
-export const TextControl = <
-  T extends FieldValues,
-  P extends FieldPath<T> = FieldPath<T>,
->(
-  props: TextControlProps<T, P>,
-) => {
-  const { labelIcon, helperText, ...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["data-testid"] || props.name}
-        validated={
-          fieldState.error ? ValidatedOptions.error : ValidatedOptions.default
-        }
-        isDisabled={props.isDisabled}
-        {...rest}
-        {...field}
-      />
-      {helperText && (
-        <FormHelperText>
-          <HelperText>
-            <HelperTextItem>{helperText}</HelperTextItem>
-          </HelperText>
-        </FormHelperText>
-      )}
-    </FormLabel>
-  );
-};

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

@@ -1,23 +0,0 @@
-// 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

@@ -1,75 +0,0 @@
-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} />
-  );