keycloakify 6.13.2 → 7.0.0-rc.10

package/src/bin/eject-keycloak-page.ts

@@ -0,0 +1,64 @@
+#!/usr/bin/env node
+
+import { getProjectRoot } from "./tools/getProjectRoot";
+import cliSelect from "cli-select";
+import {
+    loginThemePageIds,
+    accountThemePageIds,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    themeTypes,
+    type ThemeType
+} from "./keycloakify/generateFtl/generateFtl";
+import { capitalize } from "tsafe/capitalize";
+import { readFile, writeFile } from "fs/promises";
+import { existsSync } from "fs";
+import { join as pathJoin, relative as pathRelative } from "path";
+import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
+import { assert, Equals } from "tsafe/assert";
+
+(async () => {
+    const projectRootDir = getProjectRoot();
+
+    console.log("Select a theme type");
+
+    const { value: themeType } = await cliSelect<ThemeType>({
+        "values": [...themeTypes]
+    }).catch(() => {
+        console.log("Aborting");
+
+        process.exit(-1);
+    });
+
+    console.log("Select a page you would like to eject");
+
+    const { value: pageId } = await cliSelect<LoginThemePageId | AccountThemePageId>({
+        "values": (() => {
+            switch (themeType) {
+                case "login":
+                    return [...loginThemePageIds];
+                case "account":
+                    return [...accountThemePageIds];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        console.log("Aborting");
+
+        process.exit(-1);
+    });
+
+    const pageBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(/ftl$/, "tsx");
+
+    const targetFilePath = pathJoin(process.cwd(), "src", "keycloak-theme", themeType, "pages", pageBasename);
+
+    if (existsSync(targetFilePath)) {
+        console.log(`${pageId} is already ejected, ${pathRelative(process.cwd(), targetFilePath)} already exists`);
+
+        process.exit(-1);
+    }
+
+    writeFile(targetFilePath, await readFile(pathJoin(projectRootDir, "src", themeType, "pages", pageBasename)));
+
+    console.log(`${pathRelative(process.cwd(), targetFilePath)} created`);
+})();

package/src/bin/initialize-email-theme.ts

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+
+import { downloadBuiltinKeycloakTheme } from "./download-builtin-keycloak-theme";
+import { keycloakThemeEmailDirPath } from "./keycloakify";
+import { join as pathJoin, relative as pathRelative } from "path";
+import { transformCodebase } from "./tools/transformCodebase";
+import { promptKeycloakVersion } from "./promptKeycloakVersion";
+import * as fs from "fs";
+import { getCliOptions } from "./tools/cliOptions";
+import { getLogger } from "./tools/logger";
+
+(async () => {
+    const { isSilent } = getCliOptions(process.argv.slice(2));
+    const logger = getLogger({ isSilent });
+
+    if (fs.existsSync(keycloakThemeEmailDirPath)) {
+        logger.warn(`There is already a ${pathRelative(process.cwd(), keycloakThemeEmailDirPath)} directory in your project. Aborting.`);
+
+        process.exit(-1);
+    }
+
+    const { keycloakVersion } = await promptKeycloakVersion();
+
+    const builtinKeycloakThemeTmpDirPath = pathJoin(keycloakThemeEmailDirPath, "..", "tmp_xIdP3_builtin_keycloak_theme");
+
+    await downloadBuiltinKeycloakTheme({
+        keycloakVersion,
+        "destDirPath": builtinKeycloakThemeTmpDirPath,
+        isSilent
+    });
+
+    transformCodebase({
+        "srcDirPath": pathJoin(builtinKeycloakThemeTmpDirPath, "base", "email"),
+        "destDirPath": keycloakThemeEmailDirPath
+    });
+
+    {
+        const themePropertyFilePath = pathJoin(keycloakThemeEmailDirPath, "theme.properties");
+
+        fs.writeFileSync(themePropertyFilePath, Buffer.from(`parent=base\n${fs.readFileSync(themePropertyFilePath).toString("utf8")}`, "utf8"));
+    }
+
+    logger.log(
+        `${pathRelative(process.cwd(), keycloakThemeEmailDirPath)} ready to be customized, feel free to remove every file you do not customize`
+    );
+
+    fs.rmSync(builtinKeycloakThemeTmpDirPath, { "recursive": true, "force": true });
+})();

package/src/bin/keycloakify/BuildOptions.ts

@@ -13,7 +13,10 @@ type ParsedPackageJson = {
     version: string;
     homepage?: string;
     keycloakify?: {
+        /** @deprecated: use extraLoginPages instead */
         extraPages?: string[];
+        extraLoginPages?: string[];
+        extraAccountPages?: string[];
         extraThemeProperties?: string[];
         areAppAndKeycloakServerSharingSameDomain?: boolean;
         artifactId?: string;
@@ -29,6 +32,8 @@ const zParsedPackageJson = z.object({
     "keycloakify": z
         .object({
             "extraPages": z.array(z.string()).optional(),
+            "extraLoginPages": z.array(z.string()).optional(),
+            "extraAccountPages": z.array(z.string()).optional(),
             "extraThemeProperties": z.array(z.string()).optional(),
             "areAppAndKeycloakServerSharingSameDomain": z.boolean().optional(),
             "artifactId": z.string().optional(),
@@ -48,7 +53,8 @@ export namespace BuildOptions {
         isSilent: boolean;
         version: string;
         themeName: string;
-        extraPages?: string[];
+        extraLoginPages: string[] | undefined;
+        extraAccountPages: string[] | undefined;
         extraThemeProperties?: string[];
         groupId: string;
         artifactId: string;
@@ -119,7 +125,7 @@ export function readBuildOptions(params: {
     const common: BuildOptions.Common = (() => {
         const { name, keycloakify = {}, version, homepage } = parsedPackageJson;
 
-        const { extraPages, extraThemeProperties, groupId, artifactId, bundler } = keycloakify ?? {};
+        const { extraPages, extraLoginPages, extraAccountPages, extraThemeProperties, groupId, artifactId, bundler } = keycloakify ?? {};
 
         const themeName = name
             .replace(/^@(.*)/, "$1")
@@ -158,7 +164,8 @@ export function readBuildOptions(params: {
                 );
             })(),
             "version": process.env.KEYCLOAKIFY_VERSION ?? version,
-            extraPages,
+            "extraLoginPages": [...(extraPages ?? []), ...(extraLoginPages ?? [])],
+            extraAccountPages,
             extraThemeProperties,
             isSilent
         };

package/src/bin/keycloakify/generateFtl/ftl_object_to_js_code_declaring_an_object.ftl

@@ -2,8 +2,7 @@
 <#assign pageId="PAGE_ID_xIgLsPgGId9D8e">
 (()=>{
 
-    const out = 
-${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
+    const out = ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
 
     out["msg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
     out["advancedMsg"]= function(){ throw new Error("use import { useKcMessage } from 'keycloakify'"); };
@@ -113,6 +112,13 @@ ${ftl_object_to_js_code_declaring_an_object(.data_model, [])?no_esc};
 
     out["pageId"] = "${pageId}";
 
+    out["url"]["getLogoutUrl"] = function () {
+        <#attempt>
+            return "${url.getLogoutUrl()}";
+        <#recover>
+        </#attempt>
+    };
+
     return out;
 
 })()

package/src/bin/keycloakify/generateFtl/generateFtl.ts

@@ -10,8 +10,11 @@ import type { BuildOptions } from "../BuildOptions";
 import { assert } from "tsafe/assert";
 import { Reflect } from "tsafe/Reflect";
 
-// https://github.com/keycloak/keycloak/blob/main/services/src/main/java/org/keycloak/forms/login/freemarker/Templates.java
-export const pageIds = [
+export const themeTypes = ["login", "account"] as const;
+
+export type ThemeType = (typeof themeTypes)[number];
+
+export const loginThemePageIds = [
     "login.ftl",
     "login-username.ftl",
     "login-password.ftl",
@@ -35,6 +38,11 @@ export const pageIds = [
     "idp-review-user-profile.ftl"
 ] as const;
 
+export const accountThemePageIds = ["password.ftl", "account.ftl"] as const;
+
+export type LoginThemePageId = (typeof loginThemePageIds)[number];
+export type AccountThemePageId = (typeof accountThemePageIds)[number];
+
 export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.ExternalAssets;
 
 export namespace BuildOptionsLike {
@@ -68,8 +76,6 @@ export namespace BuildOptionsLike {
     assert<typeof buildOptions extends BuildOptionsLike ? true : false>();
 }
 
-export type PageId = (typeof pageIds)[number];
-
 export function generateFtlFilesCodeFactory(params: {
     indexHtmlCode: string;
     //NOTE: Expected to be an empty object if external assets mode is enabled.

package/src/bin/keycloakify/generateJavaStackFiles.ts

@@ -1,5 +1,6 @@
 import * as fs from "fs";
 import { join as pathJoin, dirname as pathDirname } from "path";
+import { themeTypes } from "./generateFtl/generateFtl";
 import { assert } from "tsafe/assert";
 import { Reflect } from "tsafe/Reflect";
 import type { BuildOptions } from "./BuildOptions";
@@ -69,7 +70,7 @@ export function generateJavaStackFiles(params: {
                         "themes": [
                             {
                                 "name": themeName,
-                                "types": ["login", ...(doBundlesEmailTemplate ? ["email"] : [])]
+                                "types": [...themeTypes, ...(doBundlesEmailTemplate ? ["email"] : [])]
                             }
                         ]
                     },

package/src/bin/keycloakify/generateKeycloakThemeResources.ts

@@ -3,7 +3,7 @@ import * as fs from "fs";
 import { join as pathJoin, basename as pathBasename } from "path";
 import { replaceImportsFromStaticInJsCode } from "./replacers/replaceImportsFromStaticInJsCode";
 import { replaceImportsInCssCode } from "./replacers/replaceImportsInCssCode";
-import { generateFtlFilesCodeFactory, pageIds } from "./generateFtl";
+import { generateFtlFilesCodeFactory, loginThemePageIds, accountThemePageIds, themeTypes, type ThemeType } from "./generateFtl";
 import { downloadBuiltinKeycloakTheme } from "../download-builtin-keycloak-theme";
 import { mockTestingResourcesCommonPath, mockTestingResourcesPath, mockTestingSubDirOfPublicDirBasename } from "../mockTestingResourcesPath";
 import { isInside } from "../tools/isInside";
@@ -17,7 +17,8 @@ export type BuildOptionsLike = BuildOptionsLike.Standalone | BuildOptionsLike.Ex
 export namespace BuildOptionsLike {
     export type Common = {
         themeName: string;
-        extraPages?: string[];
+        extraLoginPages?: string[];
+        extraAccountPages?: string[];
         extraThemeProperties?: string[];
         isSilent: boolean;
     };
@@ -62,58 +63,167 @@ export async function generateKeycloakThemeResources(params: {
     const { reactAppBuildDirPath, keycloakThemeBuildingDirPath, keycloakThemeEmailDirPath, keycloakVersion, buildOptions } = params;
 
     const logger = getLogger({ isSilent: buildOptions.isSilent });
-    const themeDirPath = pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", buildOptions.themeName, "login");
+
+    const getThemeDirPath = (themeType: ThemeType | "email") =>
+        pathJoin(keycloakThemeBuildingDirPath, "src", "main", "resources", "theme", buildOptions.themeName, themeType);
 
     let allCssGlobalsToDefine: Record<string, string> = {};
 
-    transformCodebase({
-        "destDirPath": buildOptions.isStandalone ? pathJoin(themeDirPath, "resources", "build") : reactAppBuildDirPath,
-        "srcDirPath": reactAppBuildDirPath,
-        "transformSourceCode": ({ filePath, sourceCode }) => {
-            //NOTE: Prevent cycles, excludes the folder we generated for debug in public/
-            if (
-                buildOptions.isStandalone &&
-                isInside({
-                    "dirPath": pathJoin(reactAppBuildDirPath, mockTestingSubDirOfPublicDirBasename),
-                    filePath
-                })
-            ) {
-                return undefined;
-            }
+    let generateFtlFilesCode_glob: ReturnType<typeof generateFtlFilesCodeFactory>["generateFtlFilesCode"] | undefined = undefined;
 
-            if (/\.css?$/i.test(filePath)) {
-                if (!buildOptions.isStandalone) {
-                    return undefined;
-                }
+    for (const themeType of themeTypes) {
+        const themeDirPath = getThemeDirPath(themeType);
 
-                const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode({
-                    "cssCode": sourceCode.toString("utf8")
-                });
+        copy_app_resources_to_theme_path: {
+            const isFirstPass = themeType.indexOf(themeType) === 0;
 
-                allCssGlobalsToDefine = {
-                    ...allCssGlobalsToDefine,
-                    ...cssGlobalsToDefine
-                };
+            if (!isFirstPass && !buildOptions.isStandalone) {
+                break copy_app_resources_to_theme_path;
+            }
+
+            transformCodebase({
+                "destDirPath": buildOptions.isStandalone ? pathJoin(themeDirPath, "resources", "build") : reactAppBuildDirPath,
+                "srcDirPath": reactAppBuildDirPath,
+                "transformSourceCode": ({ filePath, sourceCode }) => {
+                    //NOTE: Prevent cycles, excludes the folder we generated for debug in public/
+                    if (
+                        buildOptions.isStandalone &&
+                        isInside({
+                            "dirPath": pathJoin(reactAppBuildDirPath, mockTestingSubDirOfPublicDirBasename),
+                            filePath
+                        })
+                    ) {
+                        return undefined;
+                    }
+
+                    if (/\.css?$/i.test(filePath)) {
+                        if (!buildOptions.isStandalone) {
+                            return undefined;
+                        }
+
+                        const { cssGlobalsToDefine, fixedCssCode } = replaceImportsInCssCode({
+                            "cssCode": sourceCode.toString("utf8")
+                        });
+
+                        register_css_variables: {
+                            if (!isFirstPass) {
+                                break register_css_variables;
+                            }
+
+                            allCssGlobalsToDefine = {
+                                ...allCssGlobalsToDefine,
+                                ...cssGlobalsToDefine
+                            };
+                        }
+
+                        return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
+                    }
+
+                    if (/\.js?$/i.test(filePath)) {
+                        if (!buildOptions.isStandalone && buildOptions.areAppAndKeycloakServerSharingSameDomain) {
+                            return undefined;
+                        }
+
+                        const { fixedJsCode } = replaceImportsFromStaticInJsCode({
+                            "jsCode": sourceCode.toString("utf8"),
+                            buildOptions
+                        });
+
+                        return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
+                    }
+
+                    return buildOptions.isStandalone ? { "modifiedSourceCode": sourceCode } : undefined;
+                }
+            });
+        }
 
-                return { "modifiedSourceCode": Buffer.from(fixedCssCode, "utf8") };
+        const generateFtlFilesCode = (() => {
+            if (generateFtlFilesCode_glob !== undefined) {
+                return generateFtlFilesCode_glob;
             }
 
-            if (/\.js?$/i.test(filePath)) {
-                if (!buildOptions.isStandalone && buildOptions.areAppAndKeycloakServerSharingSameDomain) {
-                    return undefined;
+            const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
+                "indexHtmlCode": fs.readFileSync(pathJoin(reactAppBuildDirPath, "index.html")).toString("utf8"),
+                "cssGlobalsToDefine": allCssGlobalsToDefine,
+                "buildOptions": buildOptions
+            });
+
+            return generateFtlFilesCode;
+        })();
+
+        [
+            ...(() => {
+                switch (themeType) {
+                    case "login":
+                        return loginThemePageIds;
+                    case "account":
+                        return accountThemePageIds;
                 }
+            })(),
+            ...((() => {
+                switch (themeType) {
+                    case "login":
+                        return buildOptions.extraLoginPages;
+                    case "account":
+                        return buildOptions.extraAccountPages;
+                }
+            })() ?? [])
+        ].forEach(pageId => {
+            const { ftlCode } = generateFtlFilesCode({ pageId });
 
-                const { fixedJsCode } = replaceImportsFromStaticInJsCode({
-                    "jsCode": sourceCode.toString("utf8"),
-                    buildOptions
-                });
+            fs.mkdirSync(themeDirPath, { "recursive": true });
 
-                return { "modifiedSourceCode": Buffer.from(fixedJsCode, "utf8") };
-            }
+            fs.writeFileSync(pathJoin(themeDirPath, pageId), Buffer.from(ftlCode, "utf8"));
+        });
+
+        {
+            const tmpDirPath = pathJoin(themeDirPath, "..", "tmp_xxKdLpdIdLd");
+
+            await downloadBuiltinKeycloakTheme({
+                keycloakVersion,
+                "destDirPath": tmpDirPath,
+                isSilent: buildOptions.isSilent
+            });
+
+            const themeResourcesDirPath = pathJoin(themeDirPath, "resources");
 
-            return buildOptions.isStandalone ? { "modifiedSourceCode": sourceCode } : undefined;
+            transformCodebase({
+                "srcDirPath": pathJoin(tmpDirPath, "keycloak", "login", "resources"),
+                "destDirPath": themeResourcesDirPath
+            });
+
+            const reactAppPublicDirPath = pathJoin(reactAppBuildDirPath, "..", "public");
+
+            transformCodebase({
+                "srcDirPath": pathJoin(tmpDirPath, "keycloak", "common", "resources"),
+                "destDirPath": pathJoin(themeResourcesDirPath, pathBasename(mockTestingResourcesCommonPath))
+            });
+
+            transformCodebase({
+                "srcDirPath": themeResourcesDirPath,
+                "destDirPath": pathJoin(reactAppPublicDirPath, mockTestingResourcesPath)
+            });
+
+            const keycloakResourcesWithinPublicDirPath = pathJoin(reactAppPublicDirPath, mockTestingSubDirOfPublicDirBasename);
+
+            fs.writeFileSync(
+                pathJoin(keycloakResourcesWithinPublicDirPath, "README.txt"),
+                Buffer.from(
+                    ["This is just a test folder that helps develop", "the login and register page without having to run a Keycloak container"].join(
+                        " "
+                    )
+                )
+            );
+
+            fs.writeFileSync(pathJoin(keycloakResourcesWithinPublicDirPath, ".gitignore"), Buffer.from("*", "utf8"));
+            fs.rmSync(tmpDirPath, { recursive: true, force: true });
         }
-    });
+
+        fs.writeFileSync(
+            pathJoin(themeDirPath, "theme.properties"),
+            Buffer.from(["parent=keycloak", ...(buildOptions.extraThemeProperties ?? [])].join("\n\n"), "utf8")
+        );
+    }
 
     let doBundlesEmailTemplate: boolean;
 
@@ -133,69 +243,9 @@ export async function generateKeycloakThemeResources(params: {
 
         transformCodebase({
             "srcDirPath": keycloakThemeEmailDirPath,
-            "destDirPath": pathJoin(themeDirPath, "..", "email")
+            "destDirPath": getThemeDirPath("email")
         });
     }
 
-    const { generateFtlFilesCode } = generateFtlFilesCodeFactory({
-        "indexHtmlCode": fs.readFileSync(pathJoin(reactAppBuildDirPath, "index.html")).toString("utf8"),
-        "cssGlobalsToDefine": allCssGlobalsToDefine,
-        "buildOptions": buildOptions
-    });
-
-    [...pageIds, ...(buildOptions.extraPages ?? [])].forEach(pageId => {
-        const { ftlCode } = generateFtlFilesCode({ pageId });
-
-        fs.mkdirSync(themeDirPath, { "recursive": true });
-
-        fs.writeFileSync(pathJoin(themeDirPath, pageId), Buffer.from(ftlCode, "utf8"));
-    });
-
-    {
-        const tmpDirPath = pathJoin(themeDirPath, "..", "tmp_xxKdLpdIdLd");
-
-        await downloadBuiltinKeycloakTheme({
-            keycloakVersion,
-            "destDirPath": tmpDirPath,
-            isSilent: buildOptions.isSilent
-        });
-
-        const themeResourcesDirPath = pathJoin(themeDirPath, "resources");
-
-        transformCodebase({
-            "srcDirPath": pathJoin(tmpDirPath, "keycloak", "login", "resources"),
-            "destDirPath": themeResourcesDirPath
-        });
-
-        const reactAppPublicDirPath = pathJoin(reactAppBuildDirPath, "..", "public");
-
-        transformCodebase({
-            "srcDirPath": pathJoin(tmpDirPath, "keycloak", "common", "resources"),
-            "destDirPath": pathJoin(themeResourcesDirPath, pathBasename(mockTestingResourcesCommonPath))
-        });
-
-        transformCodebase({
-            "srcDirPath": themeResourcesDirPath,
-            "destDirPath": pathJoin(reactAppPublicDirPath, mockTestingResourcesPath)
-        });
-
-        const keycloakResourcesWithinPublicDirPath = pathJoin(reactAppPublicDirPath, mockTestingSubDirOfPublicDirBasename);
-
-        fs.writeFileSync(
-            pathJoin(keycloakResourcesWithinPublicDirPath, "README.txt"),
-            Buffer.from(
-                ["This is just a test folder that helps develop", "the login and register page without having to run a Keycloak container"].join(" ")
-            )
-        );
-
-        fs.writeFileSync(pathJoin(keycloakResourcesWithinPublicDirPath, ".gitignore"), Buffer.from("*", "utf8"));
-        fs.rmSync(tmpDirPath, { recursive: true, force: true });
-    }
-
-    fs.writeFileSync(
-        pathJoin(themeDirPath, "theme.properties"),
-        Buffer.from(["parent=keycloak", ...(buildOptions.extraThemeProperties ?? [])].join("\n\n"), "utf8")
-    );
-
     return { doBundlesEmailTemplate };
 }

package/src/bin/keycloakify/keycloakify.ts

@@ -14,7 +14,7 @@ import type { Equals } from "tsafe";
 const reactProjectDirPath = process.cwd();
 
 export const keycloakThemeBuildingDirPath = pathJoin(reactProjectDirPath, "build_keycloak");
-export const keycloakThemeEmailDirPath = pathJoin(keycloakThemeBuildingDirPath, "..", "keycloak_email");
+export const keycloakThemeEmailDirPath = pathJoin(reactProjectDirPath, "src", "keycloak-theme", "email");
 
 export async function main() {
     const { isSilent, hasExternalAssets } = getCliOptions(process.argv.slice(2));

package/src/bin/tools/crc32.ts

@@ -42,6 +42,7 @@ export function crc32(input: Readable | String | Buffer): Promise<number> {
     } else if (input instanceof Readable) {
         return new Promise<number>((resolve, reject) => {
             let crc = ~0;
+            input.setMaxListeners(Infinity);
             input.on("end", () => resolve((crc ^ -1) >>> 0));
             input.on("error", e => reject(e));
             input.on("data", (chunk: Buffer) => {

package/src/bin/tools/downloadAndUnzip.ts

@@ -130,6 +130,7 @@ async function unzip(zipFile: string, dir: string, archiveDir?: string): Promise
                 // Pull the file out of the archive, write it to the target directory
                 const input = createRecordReadStream();
                 const output = createWriteStream(filePath);
+                output.setMaxListeners(Infinity);
                 output.on("error", e => reject(Object.assign(e, { filePath })));
                 output.on("finish", () => resolve(filePath));
                 input.pipe(output);
@@ -166,6 +167,7 @@ async function readFileChunk(file: string, start: number, end: number): Promise<
     const chunks: Buffer[] = [];
     return new Promise((resolve, reject) => {
         const stream = createReadStream(file, { start, end });
+        stream.setMaxListeners(Infinity);
         stream.on("error", e => reject(e));
         stream.on("end", () => resolve(Buffer.concat(chunks)));
         stream.on("data", chunk => chunks.push(chunk as Buffer));

package/src/bin/tools/kebabCaseToSnakeCase.ts

@@ -0,0 +1,7 @@
+import { capitalize } from "tsafe/capitalize";
+
+export function kebabCaseToCamelCase(kebabCaseString: string): string {
+    const [first, ...rest] = kebabCaseString.split("-");
+
+    return [first, ...rest.map(capitalize)].join("");
+}

package/src/index.ts

@@ -0,0 +1 @@
+export { createKeycloakAdapter } from "keycloakify/lib/keycloakJsAdapter";

package/src/lib/keycloakJsAdapter.ts

@@ -43,7 +43,7 @@ export declare namespace keycloak_js {
  */
 export function createKeycloakAdapter(params: {
     keycloakInstance: keycloak_js.KeycloakInstance;
-    transformUrlBeforeRedirect(url: string): string;
+    transformUrlBeforeRedirect: (url: string) => string;
     getRedirectMethod?: () => "overwrite location.href" | "location.replace";
 }): keycloak_js.KeycloakAdapter {
     const { keycloakInstance, transformUrlBeforeRedirect, getRedirectMethod = () => "overwrite location.href" } = params;

package/src/lib/useGetClassName.ts

@@ -0,0 +1,18 @@
+import { clsx } from "keycloakify/tools/clsx";
+import { useConstCallback } from "keycloakify/tools/useConstCallback";
+
+export function createUseClassName<ClassKey extends string>(params: { defaultClasses: Record<ClassKey, string | undefined> }) {
+    const { defaultClasses } = params;
+
+    function useGetClassName(params: { doUseDefaultCss: boolean; classes: Partial<Record<ClassKey, string>> | undefined }) {
+        const { classes } = params;
+
+        const getClassName = useConstCallback((classKey: ClassKey): string => {
+            return clsx(classKey, defaultClasses[classKey], classes?.[classKey]);
+        });
+
+        return { getClassName };
+    }
+
+    return { useGetClassName };
+}