keycloakify 6.13.2 → 7.0.0-rc.3

package/src/lib/tools/useCallbackFactory.ts

@@ -1,45 +0,0 @@
-import { useRef, useState } from "react";
-import { id } from "tsafe/id";
-import { memoize } from "./memoize";
-
-export type CallbackFactory<FactoryArgs extends unknown[], Args extends unknown[], R> = (...factoryArgs: FactoryArgs) => (...args: Args) => R;
-
-/**
- * https://docs.powerhooks.dev/api-reference/usecallbackfactory
- *
- *  const callbackFactory= useCallbackFactory(
- *      ([key]: [string], [params]: [{ foo: number; }]) => {
- *          ...
- *      },
- *      []
- *  );
- *
- * WARNING: Factory args should not be of variable length.
- *
- */
-export function useCallbackFactory<FactoryArgs extends (string | number | boolean)[], Args extends unknown[], R = void>(
-    callback: (...callbackArgs: [FactoryArgs, Args]) => R
-): CallbackFactory<FactoryArgs, Args, R> {
-    type Out = CallbackFactory<FactoryArgs, Args, R>;
-
-    const callbackRef = useRef<typeof callback>(callback);
-
-    callbackRef.current = callback;
-
-    const memoizedRef = useRef<Out | undefined>(undefined);
-
-    return useState(() =>
-        id<Out>((...factoryArgs) => {
-            if (memoizedRef.current === undefined) {
-                memoizedRef.current = memoize(
-                    (...factoryArgs: FactoryArgs) =>
-                        (...args: Args) =>
-                            callbackRef.current(factoryArgs, args),
-                    { "argsLength": factoryArgs.length }
-                );
-            }
-
-            return memoizedRef.current(...factoryArgs);
-        })
-    )[0];
-}

package/src/lib/tools/useCssAndCx.ts

@@ -1,12 +0,0 @@
-import { clsx as cx } from "./clsx";
-
-/**
- * @deprecated: Use clsx instead.
- * import { clsx } from "keycloakify/lib/tools/clsx";
- * You can use clsx as cx.
- * If you where using the css() function you can import
- * it from @emotion/css: https://emotion.sh/docs/@emotion/css
- */
-export function useCssAndCx() {
-    return { cx };
-}

package/src/lib/tsconfig.json

@@ -1,18 +0,0 @@
-{
-    "extends": "../../tsproject.json",
-    "compilerOptions": {
-        "outDir": "../../dist/lib",
-        "rootDir": ".",
-        "module": "ES2020",
-        "target": "ES2017",
-        "lib": ["es2015", "DOM", "ES2019.Object"],
-        "moduleResolution": "node",
-        "jsx": "react",
-        "allowSyntheticDefaultImports": true
-    },
-    "references": [
-        {
-            "path": "../bin"
-        }
-    ]
-}

package/src/lib/useFormValidationSlice.tsx

@@ -1,479 +0,0 @@
-import "./tools/Array.prototype.every";
-import React, { useMemo, useReducer, Fragment } from "react";
-import type { KcContextBase, Validators, Attribute } from "./getKcContext/KcContextBase";
-import type { I18nBase, MessageKeyBase } from "./i18n";
-import { useConstCallback } from "./tools/useConstCallback";
-import { id } from "tsafe/id";
-import { emailRegexp } from "./tools/emailRegExp";
-
-/** @deprecated: Will be removed in the next major. Use this instead:
- *  import { useFormValidation } from "keycloakify/lib/pages/shares/UserProfileCommons";
- *
- *  The API is the same only the returned value formValidationReducer have been renamed formValidationDispatch
- *  (a it should have been named from the beginning 😬)
- */
-export function useFormValidationSlice(params: {
-    kcContext: {
-        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
-        profile: {
-            attributes: Attribute[];
-        };
-        passwordRequired?: boolean;
-        realm: { registrationEmailAsUsername: boolean };
-    };
-    /** NOTE: Try to avoid passing a new ref every render for better performances. */
-    passwordValidators?: Validators;
-    i18n: I18nBase;
-}) {
-    const {
-        kcContext,
-        passwordValidators = {
-            "length": {
-                "ignore.empty.value": true,
-                "min": "4"
-            }
-        },
-        i18n
-    } = params;
-
-    const attributesWithPassword = useMemo(
-        () =>
-            !kcContext.passwordRequired
-                ? kcContext.profile.attributes
-                : (() => {
-                      const name = kcContext.realm.registrationEmailAsUsername ? "email" : "username";
-
-                      return kcContext.profile.attributes.reduce<Attribute[]>(
-                          (prev, curr) => [
-                              ...prev,
-                              ...(curr.name !== name
-                                  ? [curr]
-                                  : [
-                                        curr,
-                                        id<Attribute>({
-                                            "name": "password",
-                                            "displayName": id<`\${${MessageKeyBase}}`>("${password}"),
-                                            "required": true,
-                                            "readOnly": false,
-                                            "validators": passwordValidators,
-                                            "annotations": {},
-                                            "groupAnnotations": {},
-                                            "autocomplete": "new-password"
-                                        }),
-                                        id<Attribute>({
-                                            "name": "password-confirm",
-                                            "displayName": id<`\${${MessageKeyBase}}`>("${passwordConfirm}"),
-                                            "required": true,
-                                            "readOnly": false,
-                                            "validators": {
-                                                "_compareToOther": {
-                                                    "name": "password",
-                                                    "ignore.empty.value": true,
-                                                    "shouldBe": "equal",
-                                                    "error-message": id<`\${${MessageKeyBase}}`>("${invalidPasswordConfirmMessage}")
-                                                }
-                                            },
-                                            "annotations": {},
-                                            "groupAnnotations": {},
-                                            "autocomplete": "new-password"
-                                        })
-                                    ])
-                          ],
-                          []
-                      );
-                  })(),
-        [kcContext, passwordValidators]
-    );
-
-    const { getErrors } = useGetErrors({
-        "kcContext": {
-            "messagesPerField": kcContext.messagesPerField,
-            "profile": {
-                "attributes": attributesWithPassword
-            }
-        },
-        i18n
-    });
-
-    const initialInternalState = useMemo(
-        () =>
-            Object.fromEntries(
-                attributesWithPassword
-                    .map(attribute => ({
-                        attribute,
-                        "errors": getErrors({
-                            "name": attribute.name,
-                            "fieldValueByAttributeName": Object.fromEntries(
-                                attributesWithPassword.map(({ name, value }) => [name, { "value": value ?? "" }])
-                            )
-                        })
-                    }))
-                    .map(({ attribute, errors }) => [
-                        attribute.name,
-                        {
-                            "value": attribute.value ?? "",
-                            errors,
-                            "doDisplayPotentialErrorMessages": errors.length !== 0
-                        }
-                    ])
-            ),
-        [attributesWithPassword]
-    );
-
-    type InternalState = typeof initialInternalState;
-
-    const [formValidationInternalState, formValidationReducer] = useReducer(
-        (
-            state: InternalState,
-            params:
-                | {
-                      action: "update value";
-                      name: string;
-                      newValue: string;
-                  }
-                | {
-                      action: "focus lost";
-                      name: string;
-                  }
-        ): InternalState => ({
-            ...state,
-            [params.name]: {
-                ...state[params.name],
-                ...(() => {
-                    switch (params.action) {
-                        case "focus lost":
-                            return { "doDisplayPotentialErrorMessages": true };
-                        case "update value":
-                            return {
-                                "value": params.newValue,
-                                "errors": getErrors({
-                                    "name": params.name,
-                                    "fieldValueByAttributeName": {
-                                        ...state,
-                                        [params.name]: { "value": params.newValue }
-                                    }
-                                })
-                            };
-                    }
-                })()
-            }
-        }),
-        initialInternalState
-    );
-
-    const formValidationState = useMemo(
-        () => ({
-            "fieldStateByAttributeName": Object.fromEntries(
-                Object.entries(formValidationInternalState).map(([name, { value, errors, doDisplayPotentialErrorMessages }]) => [
-                    name,
-                    { value, "displayableErrors": doDisplayPotentialErrorMessages ? errors : [] }
-                ])
-            ),
-            "isFormSubmittable": Object.entries(formValidationInternalState).every(
-                ([name, { value, errors }]) =>
-                    errors.length === 0 && (value !== "" || !attributesWithPassword.find(attribute => attribute.name === name)!.required)
-            )
-        }),
-        [formValidationInternalState, attributesWithPassword]
-    );
-
-    return { formValidationState, formValidationReducer, attributesWithPassword };
-}
-
-/** Expect to be used in a component wrapped within a <I18nProvider> */
-export function useGetErrors(params: {
-    kcContext: {
-        messagesPerField: Pick<KcContextBase.Common["messagesPerField"], "existsError" | "get">;
-        profile: {
-            attributes: { name: string; value?: string; validators: Validators }[];
-        };
-    };
-    i18n: I18nBase;
-}) {
-    const { kcContext, i18n } = params;
-
-    const {
-        messagesPerField,
-        profile: { attributes }
-    } = kcContext;
-
-    const { msg, msgStr, advancedMsg, advancedMsgStr } = i18n;
-
-    const getErrors = useConstCallback((params: { name: string; fieldValueByAttributeName: Record<string, { value: string }> }) => {
-        const { name, fieldValueByAttributeName } = params;
-
-        const { value } = fieldValueByAttributeName[name];
-
-        const { value: defaultValue, validators } = attributes.find(attribute => attribute.name === name)!;
-
-        block: {
-            if (defaultValue !== value) {
-                break block;
-            }
-
-            let doesErrorExist: boolean;
-
-            try {
-                doesErrorExist = messagesPerField.existsError(name);
-            } catch {
-                break block;
-            }
-
-            if (!doesErrorExist) {
-                break block;
-            }
-
-            const errorMessageStr = messagesPerField.get(name);
-
-            return [
-                {
-                    "validatorName": undefined,
-                    errorMessageStr,
-                    "errorMessage": <span key={0}>{errorMessageStr}</span>
-                }
-            ];
-        }
-
-        const errors: {
-            errorMessage: JSX.Element;
-            errorMessageStr: string;
-            validatorName: keyof Validators | undefined;
-        }[] = [];
-
-        scope: {
-            const validatorName = "length";
-
-            const validator = validators[validatorName];
-
-            if (validator === undefined) {
-                break scope;
-            }
-
-            const { "ignore.empty.value": ignoreEmptyValue = false, max, min } = validator;
-
-            if (ignoreEmptyValue && value === "") {
-                break scope;
-            }
-
-            if (max !== undefined && value.length > parseInt(max)) {
-                const msgArgs = ["error-invalid-length-too-long", max] as const;
-
-                errors.push({
-                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": msgStr(...msgArgs),
-                    validatorName
-                });
-            }
-
-            if (min !== undefined && value.length < parseInt(min)) {
-                const msgArgs = ["error-invalid-length-too-short", min] as const;
-
-                errors.push({
-                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": msgStr(...msgArgs),
-                    validatorName
-                });
-            }
-        }
-
-        scope: {
-            const validatorName = "_compareToOther";
-
-            const validator = validators[validatorName];
-
-            if (validator === undefined) {
-                break scope;
-            }
-
-            const { "ignore.empty.value": ignoreEmptyValue = false, name: otherName, shouldBe, "error-message": errorMessageKey } = validator;
-
-            if (ignoreEmptyValue && value === "") {
-                break scope;
-            }
-
-            const { value: otherValue } = fieldValueByAttributeName[otherName];
-
-            const isValid = (() => {
-                switch (shouldBe) {
-                    case "different":
-                        return otherValue !== value;
-                    case "equal":
-                        return otherValue === value;
-                }
-            })();
-
-            if (isValid) {
-                break scope;
-            }
-
-            const msgArg = [
-                errorMessageKey ??
-                    id<MessageKeyBase>(
-                        (() => {
-                            switch (shouldBe) {
-                                case "equal":
-                                    return "shouldBeEqual";
-                                case "different":
-                                    return "shouldBeDifferent";
-                            }
-                        })()
-                    ),
-                otherName,
-                name,
-                shouldBe
-            ] as const;
-
-            errors.push({
-                validatorName,
-                "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArg)}</Fragment>,
-                "errorMessageStr": advancedMsgStr(...msgArg)
-            });
-        }
-
-        scope: {
-            const validatorName = "pattern";
-
-            const validator = validators[validatorName];
-
-            if (validator === undefined) {
-                break scope;
-            }
-
-            const { "ignore.empty.value": ignoreEmptyValue = false, pattern, "error-message": errorMessageKey } = validator;
-
-            if (ignoreEmptyValue && value === "") {
-                break scope;
-            }
-
-            if (new RegExp(pattern).test(value)) {
-                break scope;
-            }
-
-            const msgArgs = [errorMessageKey ?? id<MessageKeyBase>("shouldMatchPattern"), pattern] as const;
-
-            errors.push({
-                validatorName,
-                "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArgs)}</Fragment>,
-                "errorMessageStr": advancedMsgStr(...msgArgs)
-            });
-        }
-
-        scope: {
-            if ([...errors].reverse()[0]?.validatorName === "pattern") {
-                break scope;
-            }
-
-            const validatorName = "email";
-
-            const validator = validators[validatorName];
-
-            if (validator === undefined) {
-                break scope;
-            }
-
-            const { "ignore.empty.value": ignoreEmptyValue = false } = validator;
-
-            if (ignoreEmptyValue && value === "") {
-                break scope;
-            }
-
-            if (emailRegexp.test(value)) {
-                break scope;
-            }
-
-            const msgArgs = [id<MessageKeyBase>("invalidEmailMessage")] as const;
-
-            errors.push({
-                validatorName,
-                "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
-                "errorMessageStr": msgStr(...msgArgs)
-            });
-        }
-
-        scope: {
-            const validatorName = "integer";
-
-            const validator = validators[validatorName];
-
-            if (validator === undefined) {
-                break scope;
-            }
-
-            const { "ignore.empty.value": ignoreEmptyValue = false, max, min } = validator;
-
-            if (ignoreEmptyValue && value === "") {
-                break scope;
-            }
-
-            const intValue = parseInt(value);
-
-            if (isNaN(intValue)) {
-                const msgArgs = ["mustBeAnInteger"] as const;
-
-                errors.push({
-                    validatorName,
-                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": msgStr(...msgArgs)
-                });
-
-                break scope;
-            }
-
-            if (max !== undefined && intValue > parseInt(max)) {
-                const msgArgs = ["error-number-out-of-range-too-big", max] as const;
-
-                errors.push({
-                    validatorName,
-                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": msgStr(...msgArgs)
-                });
-
-                break scope;
-            }
-
-            if (min !== undefined && intValue < parseInt(min)) {
-                const msgArgs = ["error-number-out-of-range-too-small", min] as const;
-
-                errors.push({
-                    validatorName,
-                    "errorMessage": <Fragment key={errors.length}>{msg(...msgArgs)}</Fragment>,
-                    "errorMessageStr": msgStr(...msgArgs)
-                });
-
-                break scope;
-            }
-        }
-
-        scope: {
-            const validatorName = "options";
-
-            const validator = validators[validatorName];
-
-            if (validator === undefined) {
-                break scope;
-            }
-
-            if (value === "") {
-                break scope;
-            }
-
-            if (validator.options.indexOf(value) >= 0) {
-                break scope;
-            }
-
-            const msgArgs = [id<MessageKeyBase>("notAValidOption")] as const;
-
-            errors.push({
-                validatorName,
-                "errorMessage": <Fragment key={errors.length}>{advancedMsg(...msgArgs)}</Fragment>,
-                "errorMessageStr": advancedMsgStr(...msgArgs)
-            });
-        }
-
-        //TODO: Implement missing validators.
-
-        return errors;
-    });
-
-    return { getErrors };
-}

package/src/test/bin/generateKeycloakThemeResources.ts

@@ -1,20 +0,0 @@
-import { join as pathJoin } from "path";
-import { generateKeycloakThemeResources } from "../../bin/keycloakify/generateKeycloakThemeResources";
-import { setupSampleReactProject, sampleReactProjectDirPath } from "./setupSampleReactProject";
-
-setupSampleReactProject();
-
-generateKeycloakThemeResources({
-    "reactAppBuildDirPath": pathJoin(sampleReactProjectDirPath, "build"),
-    "keycloakThemeBuildingDirPath": pathJoin(sampleReactProjectDirPath, "build_keycloak_theme"),
-    "keycloakThemeEmailDirPath": pathJoin(sampleReactProjectDirPath, "keycloak_email"),
-    "keycloakVersion": "11.0.3",
-    "buildOptions": {
-        "themeName": "keycloakify-demo-app",
-        "extraPages": ["my-custom-page.ftl"],
-        "extraThemeProperties": ["env=test"],
-        "isStandalone": true,
-        "urlPathname": "/keycloakify-demo-app/",
-        "isSilent": false
-    }
-});

package/src/test/bin/index.ts

@@ -1 +0,0 @@
-import "./replaceImportFromStatic";

package/src/test/bin/main.ts

@@ -1,17 +0,0 @@
-import "./replaceImportFromStatic";
-import { setupSampleReactProject, sampleReactProjectDirPath } from "./setupSampleReactProject";
-import * as st from "scripting-tools";
-import { join as pathJoin } from "path";
-import { getProjectRoot } from "../../bin/tools/getProjectRoot.js";
-
-setupSampleReactProject();
-
-const binDirPath = pathJoin(getProjectRoot(), "dist_test", "bin");
-
-st.execSyncTrace(
-    //`node ${pathJoin(binDirPath, "keycloakify")} --external-assets`,
-    `node ${pathJoin(binDirPath, "keycloakify")}`,
-    { "cwd": sampleReactProjectDirPath }
-);
-
-st.execSyncTrace(`node ${pathJoin(binDirPath, "download-builtin-keycloak-theme")}`, { "cwd": sampleReactProjectDirPath });