@keycloakify/keycloak-ui-shared 26.0.6001

package/keycloak-theme/shared/keycloak-ui-shared/user-profile/utils.ts

@@ -0,0 +1,170 @@
+import { UserProfileAttributeMetadata } from "@keycloak/keycloak-admin-client/lib/defs/userProfileMetadata";
+import UserRepresentation from "@keycloak/keycloak-admin-client/lib/defs/userRepresentation";
+import { TFunction } from "i18next";
+import { FieldPath } from "react-hook-form";
+
+export type KeyValueType = { key: string; value: string };
+
+export type UserFormFields = Omit<
+  UserRepresentation,
+  "attributes" | "userProfileMetadata"
+> & {
+  attributes?: KeyValueType[] | Record<string, string | string[]>;
+};
+
+type FieldError = {
+  field: string;
+  errorMessage: string;
+  params?: string[];
+};
+
+type ErrorArray = { errors?: FieldError[] };
+
+export type UserProfileError = {
+  responseData: ErrorArray | FieldError;
+};
+
+const isBundleKey = (displayName?: string) => displayName?.includes("${");
+const unWrap = (key: string) => key.substring(2, key.length - 1);
+
+export const label = (
+  t: TFunction,
+  text: string | undefined,
+  fallback?: string,
+  prefix?: string,
+) => {
+  const value = text || fallback;
+  const bundleKey = isBundleKey(value) ? unWrap(value!) : value;
+  const key = prefix ? `${prefix}.${bundleKey}` : bundleKey;
+  return t(key || "");
+};
+
+export const labelAttribute = (
+  t: TFunction,
+  attribute: UserProfileAttributeMetadata,
+) => label(t, attribute.displayName, attribute.name);
+
+const ROOT_ATTRIBUTES = ["username", "firstName", "lastName", "email"];
+
+export const isRootAttribute = (attr?: string) =>
+  attr && ROOT_ATTRIBUTES.includes(attr);
+
+export const fieldName = (name?: string) =>
+  `${isRootAttribute(name) ? "" : "attributes."}${name?.replaceAll(
+    ".",
+    "🍺",
+  )}` as FieldPath<UserFormFields>;
+
+export const beerify = <T extends string>(name: T) =>
+  name.replaceAll(".", "🍺");
+
+export const debeerify = <T extends string>(name: T) =>
+  name.replaceAll("🍺", ".");
+
+export function setUserProfileServerError<T>(
+  error: UserProfileError,
+  setError: (field: keyof T, params: object) => void,
+  t: TFunction,
+) {
+  (
+    ((error.responseData as ErrorArray).errors !== undefined
+      ? (error.responseData as ErrorArray).errors
+      : [error.responseData]) as FieldError[]
+  ).forEach((e) => {
+    const params = Object.assign(
+      {},
+      e.params?.map((p) => (isBundleKey(p.toString()) ? t(unWrap(p)) : p)),
+    );
+    setError(fieldName(e.field) as keyof T, {
+      message: t(
+        isBundleKey(e.errorMessage) ? unWrap(e.errorMessage) : e.errorMessage,
+        {
+          ...params,
+          defaultValue: e.errorMessage || e.field,
+        },
+      ),
+      type: "server",
+    });
+  });
+}
+
+export function isRequiredAttribute({
+  required,
+  validators,
+}: UserProfileAttributeMetadata): boolean {
+  // Check if required is true or if the validators include a validation that would make the attribute implicitly required.
+  return required || hasRequiredValidators(validators);
+}
+
+/**
+ * Checks whether the given validators include a validation that would make the attribute implicitly required.
+ */
+function hasRequiredValidators(
+  validators?: UserProfileAttributeMetadata["validators"],
+): boolean {
+  // If we don't have any validators, the attribute is not required.
+  if (!validators) {
+    return false;
+  }
+
+  // If the 'length' validator is defined and has a minimal length greater than zero the attribute is implicitly required.
+  // We have to do a lot of defensive coding here, because we don't have type information for the validators.
+  if (
+    "length" in validators &&
+    "min" in validators.length &&
+    typeof validators.length.min === "number"
+  ) {
+    return validators.length.min > 0;
+  }
+
+  return false;
+}
+
+export function isUserProfileError(error: unknown): error is UserProfileError {
+  // Check if the error is an object with a 'responseData' property.
+  if (
+    typeof error !== "object" ||
+    error === null ||
+    !("responseData" in error)
+  ) {
+    return false;
+  }
+
+  const { responseData } = error;
+
+  if (isFieldError(responseData)) {
+    return true;
+  }
+
+  // Check if 'responseData' is an object with an 'errors' property that is an array.
+  if (
+    typeof responseData !== "object" ||
+    responseData === null ||
+    !("errors" in responseData) ||
+    !Array.isArray(responseData.errors)
+  ) {
+    return false;
+  }
+
+  // Check if all errors are field errors.
+  return responseData.errors.every(isFieldError);
+}
+
+function isFieldError(error: unknown): error is FieldError {
+  // Check if the error is an object.
+  if (typeof error !== "object" || error === null) {
+    return false;
+  }
+
+  // Check if the error object has a 'field' property that is a string.
+  if (!("field" in error) || typeof error.field !== "string") {
+    return false;
+  }
+
+  // Check if the error object has an 'errorMessage' property that is a string.
+  if (!("errorMessage" in error) || typeof error.errorMessage !== "string") {
+    return false;
+  }
+
+  return true;
+}

package/keycloak-theme/shared/keycloak-ui-shared/utils/ErrorBoundary.tsx

@@ -0,0 +1,77 @@
+import {
+  Component,
+  type ComponentType,
+  type FunctionComponent,
+  type GetDerivedStateFromError,
+  type ReactNode,
+} from "react";
+import { createNamedContext } from "./createNamedContext";
+import { useRequiredContext } from "./useRequiredContext";
+
+export interface ErrorBoundaryContextValue {
+  error?: Error;
+  showBoundary: (error?: Error) => void;
+}
+
+const ErrorBoundaryContext = createNamedContext<
+  ErrorBoundaryContextValue | undefined
+>("ErrorBoundaryContext", undefined);
+
+export const useErrorBoundary = () => useRequiredContext(ErrorBoundaryContext);
+
+export interface ErrorBoundaryProviderProps {
+  children: ReactNode;
+}
+
+export interface ErrorBoundaryProviderState {
+  error?: Error;
+}
+
+export class ErrorBoundaryProvider extends Component<
+  ErrorBoundaryProviderProps,
+  ErrorBoundaryProviderState
+> {
+  state: ErrorBoundaryProviderState = {};
+
+  static getDerivedStateFromError: GetDerivedStateFromError<
+    ErrorBoundaryProviderProps,
+    ErrorBoundaryProviderState
+  > = (error) => {
+    return { error };
+  };
+
+  showBoundary = (error?: Error) => {
+    this.setState({ error });
+  };
+
+  render() {
+    return (
+      <ErrorBoundaryContext.Provider
+        value={{ error: this.state.error, showBoundary: this.showBoundary }}
+      >
+        {this.props.children}
+      </ErrorBoundaryContext.Provider>
+    );
+  }
+}
+
+export interface FallbackProps {
+  error: Error;
+}
+
+export interface ErrorBoundaryFallbackProps {
+  fallback: ComponentType<FallbackProps>;
+  children: ReactNode;
+}
+
+export const ErrorBoundaryFallback: FunctionComponent<
+  ErrorBoundaryFallbackProps
+> = ({ children, fallback: FallbackComponent }) => {
+  const { error } = useErrorBoundary();
+
+  if (error) {
+    return <FallbackComponent error={error} />;
+  }
+
+  return children;
+};

package/keycloak-theme/shared/keycloak-ui-shared/utils/createNamedContext.ts

@@ -0,0 +1,11 @@
+import type { Context } from "react";
+import { createContext } from "react";
+
+export type NamedContext<T> = Context<T> &
+  Required<Pick<Context<T>, "displayName">>;
+
+export function createNamedContext<T>(displayName: string, defaultValue: T) {
+  const context = createContext(defaultValue);
+  context.displayName = displayName;
+  return context as NamedContext<T>;
+}

package/keycloak-theme/shared/keycloak-ui-shared/utils/darkMode.ts

@@ -0,0 +1,19 @@
+const DARK_MODE_CLASS = "pf-v5-theme-dark";
+const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+function updateDarkMode(isEnabled: boolean) {
+  const { classList } = document.documentElement;
+
+  if (isEnabled) {
+    classList.add(DARK_MODE_CLASS);
+  } else {
+    classList.remove(DARK_MODE_CLASS);
+  }
+}
+
+export function initializeDarkMode() {
+  updateDarkMode(mediaQuery.matches);
+  mediaQuery.addEventListener("change", (event) =>
+    updateDarkMode(event.matches),
+  );
+}

package/keycloak-theme/shared/keycloak-ui-shared/utils/errors.ts

@@ -0,0 +1,55 @@
+import { NetworkError } from "@keycloak/keycloak-admin-client";
+
+const ERROR_FIELDS = ["error", "errorMessage"];
+const ERROR_DESCRIPTION_FIELD = "error_description";
+
+export function getErrorMessage(error: unknown) {
+  if (typeof error === "string") {
+    return error;
+  }
+
+  if (error instanceof NetworkError) {
+    return getNetworkErrorMessage(error.responseData);
+  }
+
+  if (error instanceof Error) {
+    return error.message;
+  }
+
+  throw new Error("Unable to determine error message.");
+}
+
+export function getErrorDescription(error: unknown) {
+  if (!(error instanceof NetworkError)) {
+    return;
+  }
+
+  const data = error.responseData;
+
+  return getNetworkErrorDescription(data);
+}
+
+export function getNetworkErrorDescription(data: unknown) {
+  if (
+    typeof data === "object" &&
+    data !== null &&
+    ERROR_DESCRIPTION_FIELD in data &&
+    typeof data[ERROR_DESCRIPTION_FIELD] === "string"
+  ) {
+    return data[ERROR_DESCRIPTION_FIELD];
+  }
+}
+
+export function getNetworkErrorMessage(data: unknown) {
+  if (typeof data !== "object" || data === null) {
+    return;
+  }
+
+  for (const key of ERROR_FIELDS) {
+    const value = (data as Record<string, unknown>)[key];
+
+    if (typeof value === "string") {
+      return value;
+    }
+  }
+}

package/keycloak-theme/shared/keycloak-ui-shared/utils/generateId.ts

@@ -0,0 +1 @@
+export const generateId = () => Math.floor(Math.random() * 1000);

package/keycloak-theme/shared/keycloak-ui-shared/utils/getRuleValue.ts

@@ -0,0 +1,17 @@
+import type { ValidationRule, ValidationValue } from "react-hook-form";
+
+// Simplified version of https://github.com/react-hook-form/react-hook-form/blob/ea0f3ed86457691f79987a703ae8d50b9e16e2ad/src/logic/getRuleValue.ts#L10-L21
+// TODO: Can be removed if https://github.com/react-hook-form/react-hook-form/issues/12178 is resolved
+export function getRuleValue<T extends ValidationValue>(
+  rule?: ValidationRule<T>,
+): T | undefined {
+  if (typeof rule === "undefined" || rule instanceof RegExp) {
+    return;
+  }
+
+  if (typeof rule === "object") {
+    return rule.value;
+  }
+
+  return rule;
+}

package/keycloak-theme/shared/keycloak-ui-shared/utils/isDefined.ts

@@ -0,0 +1,3 @@
+export function isDefined<T>(value: T): value is NonNullable<T> {
+  return value !== undefined && value !== null;
+}

package/keycloak-theme/shared/keycloak-ui-shared/utils/useFetch.ts

@@ -0,0 +1,44 @@
+import { DependencyList, useEffect } from "react";
+import { useErrorBoundary } from "./ErrorBoundary";
+
+/**
+ * Util function to only set the state when the component is still mounted.
+ *
+ * It takes 2 functions one you do your adminClient call in and the other to set your state
+ *
+ * @example
+ * useFetch(
+ *  () => adminClient.components.findOne({ id }),
+ *  (component) => setupForm(component),
+ *  []
+ * );
+ *
+ * @param adminClientCall use this to do your adminClient call
+ * @param callback when the data is fetched this is where you set your state
+ */
+export function useFetch<T>(
+  adminClientCall: () => Promise<T>,
+  callback: (param: T) => void,
+  deps?: DependencyList,
+) {
+  const { showBoundary } = useErrorBoundary();
+
+  useEffect(() => {
+    const controller = new AbortController();
+    const { signal } = controller;
+    adminClientCall()
+      .then((result) => {
+        if (!signal.aborted) {
+          callback(result);
+        }
+      })
+      .catch((error) => {
+        console.error(error);
+        if (!signal.aborted) {
+          showBoundary(error);
+        }
+      });
+
+    return () => controller.abort();
+  }, deps);
+}

package/keycloak-theme/shared/keycloak-ui-shared/utils/useRequiredContext.ts

@@ -0,0 +1,24 @@
+import type { Context } from "react";
+import { useContext } from "react";
+import { isDefined } from "./isDefined";
+
+/**
+ * Passes the call to `useContext` and throw an exception if the resolved value is either `null` or `undefined`.
+ * Can be used for contexts that are required and should always have a non nullable value.
+ *
+ * @param context The context to pass to `useContext`
+ * @returns
+ */
+export function useRequiredContext<T>(context: Context<T>): NonNullable<T> {
+  const resolved = useContext(context);
+
+  if (isDefined(resolved)) {
+    return resolved;
+  }
+
+  throw new Error(
+    `No provider found for ${
+      context.displayName ? `the '${context.displayName}'` : "an unknown"
+    } context, make sure it is included in your component hierarchy.`,
+  );
+}

package/keycloak-theme/shared/keycloak-ui-shared/utils/useSetTimeout.ts

@@ -0,0 +1,40 @@
+import { useEffect, useRef, useCallback } from "react";
+
+export function useSetTimeout() {
+  const didUnmountRef = useRef(false);
+  const scheduledTimersRef = useRef(new Set<number>());
+
+  useEffect(() => {
+    didUnmountRef.current = false;
+
+    return () => {
+      didUnmountRef.current = true;
+      clearAll();
+    };
+  }, []);
+
+  function clearAll() {
+    scheduledTimersRef.current.forEach((timer) => clearTimeout(timer));
+    scheduledTimersRef.current.clear();
+  }
+
+  return useCallback((callback: () => void, delay: number) => {
+    if (didUnmountRef.current) {
+      throw new Error("Can't schedule a timeout on an unmounted component.");
+    }
+
+    const timer = Number(setTimeout(handleCallback, delay));
+
+    scheduledTimersRef.current.add(timer);
+
+    function handleCallback() {
+      scheduledTimersRef.current.delete(timer);
+      callback();
+    }
+
+    return function cancelTimeout() {
+      clearTimeout(timer);
+      scheduledTimersRef.current.delete(timer);
+    };
+  }, []);
+}

package/keycloak-theme/shared/keycloak-ui-shared/utils/useStorageItem.ts

@@ -0,0 +1,51 @@
+import { Dispatch, useCallback, useEffect, useState } from "react";
+
+/**
+ * A hook that allows you to get a specific item stored by the [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).
+ * Automatically updates the value when modified in the context of another document (such as an open tab) trough the [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event.
+ *
+ * @param storageArea The storage area to target, must implement the [`Storage`](https://developer.mozilla.org/en-US/docs/Web/API/Storage) interface (such as [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)).
+ * @param keyName The key of the item to get from storage, same as passed to [`Storage.getItem()`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem)
+ * @param The default value to fall back to in case no stored value was retrieved.
+ */
+export function useStorageItem(
+  storageArea: Storage,
+  keyName: string,
+  defaultValue: string,
+): [string, Dispatch<string>] {
+  const [value, setInnerValue] = useState(
+    () => storageArea.getItem(keyName) ?? defaultValue,
+  );
+
+  const setValue = useCallback((newValue: string) => {
+    setInnerValue(newValue);
+    storageArea.setItem(keyName, newValue);
+  }, []);
+
+  useEffect(() => {
+    // If the key name or storage area has changed, we want to update the value.
+    // React will only set state if it actually changed, so no need to worry about re-renders.
+    setInnerValue(storageArea.getItem(keyName) ?? defaultValue);
+
+    // Subscribe to storage events so we can update the value when it is changed within the context of another document.
+    window.addEventListener("storage", handleStorage);
+
+    function handleStorage(event: StorageEvent) {
+      // If the affected storage area is different we can ignore this event.
+      // For example, if we're using session storage we're not interested in changes from local storage.
+      if (event.storageArea !== storageArea) {
+        return;
+      }
+
+      // If the event key is null then it means all storage was cleared.
+      // Therefore we're interested in keys that are, or that match the key name.
+      if (event.key === null || event.key === keyName) {
+        setInnerValue(event.newValue ?? defaultValue);
+      }
+    }
+
+    return () => window.removeEventListener("storage", handleStorage);
+  }, [storageArea, keyName]);
+
+  return [value, setValue];
+}

package/keycloak-theme/shared/keycloak-ui-shared/utils/useStoredState.ts

@@ -0,0 +1,38 @@
+import { Dispatch, useCallback, useMemo } from "react";
+import { useStorageItem } from "./useStorageItem";
+
+/**
+ * A hook that acts similarly to React's `useState()`, but persists the state using [Web Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).
+ * Automatically updates the value when modified in the context of another document (such as an open tab) trough the [`storage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event) event.
+ *
+ * The value is serialized as [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) and therefore the value provided must be serializable as such.
+ * Because the value is always serialized it will never be referentially equal to originally provided value.
+ *
+ * @param storageArea The storage area to target, must implement the [`Storage`](https://developer.mozilla.org/en-US/docs/Web/API/Storage) interface (such as [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) and [`sessionStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage)).
+ * @param keyName The key of the item to get from storage, same as passed to [`Storage.getItem()`](https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem)
+ * @param defaultValue The default value to fall back to in case no stored value was retrieved (must be serializable as JSON).
+ */
+export function useStoredState<S>(
+  storageArea: Storage,
+  keyName: string,
+  defaultValue: S,
+): [S, Dispatch<S>] {
+  const defaultValueSerialized = useMemo(
+    () => JSON.stringify(defaultValue),
+    [defaultValue],
+  );
+
+  const [storedValue, setStoredValue] = useStorageItem(
+    storageArea,
+    keyName,
+    defaultValueSerialized,
+  );
+
+  const value = useMemo<S>(() => JSON.parse(storedValue), [storedValue]);
+  const setValue = useCallback(
+    (value: S) => setStoredValue(JSON.stringify(value)),
+    [],
+  );
+
+  return [value, setValue];
+}

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@keycloakify/keycloak-ui-shared",
+  "version": "26.0.6001",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/keycloakify/keycloak-ui-shared.git"
+  },
+  "license": "Apache-2.0",
+  "author": "The Keycloak Team, re-packaged by u/garronej",
+  "homepage": "https://github.com/keycloakify/keycloak-ui-shared",
+  "peerDependencies": {
+    "@patternfly/react-core": "^5.4.1",
+    "@patternfly/react-icons": "^5.4.0",
+    "@patternfly/react-styles": "^5.4.0",
+    "@patternfly/react-table": "^5.4.1",
+    "i18next": "^23.15.1",
+    "lodash-es": "^4.17.21",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-hook-form": "7.53.0",
+    "react-i18next": "^15.0.2",
+    "keycloak-js": "26.0.6",
+    "@keycloak/keycloak-admin-client": "26.0.6",
+    "@types/lodash-es": "^4.17.12",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}