keycloakify 10.0.0-rc.8 → 10.0.0-rc.80

package/src/account/pages/Account.tsx

@@ -1,18 +1,20 @@
 import { clsx } from "keycloakify/tools/clsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Account(props: PageProps<Extract<KcContext, { pageId: "account.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template } = props;
 
-    const { getClassName } = useGetClassName({
+    const classes = {
+        ...props.classes,
+        kcBodyClass: clsx(props.classes?.kcBodyClass, "user")
+    };
+
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
-        "classes": {
-            ...classes,
-            "kcBodyClass": clsx(classes?.kcBodyClass, "user")
-        }
+        classes
     });
 
     const { url, realm, messagesPerField, stateChecker, account, referrer } = kcContext;
@@ -102,11 +104,7 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
                             {referrer !== undefined && <a href={referrer?.url}>{msg("backToApplication")}</a>}
                             <button
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                 name="submitAction"
                                 value="Save"
                             >
@@ -114,11 +112,7 @@ export default function Account(props: PageProps<Extract<KcContext, { pageId: "a
                             </button>
                             <button
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonDefaultClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass")}
                                 name="submitAction"
                                 value="Cancel"
                             >

package/src/account/pages/Applications.tsx

@@ -1,17 +1,12 @@
-import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
-function isArrayWithEmptyObject(variable: any): boolean {
-    return Array.isArray(variable) && variable.length === 1 && typeof variable[0] === "object" && Object.keys(variable[0]).length === 0;
-}
-
 export default function Applications(props: PageProps<Extract<KcContext, { pageId: "applications.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -118,7 +113,7 @@ export default function Applications(props: PageProps<Extract<KcContext, { pageI
                                         application.additionalGrants.length > 0 ? (
                                             <button
                                                 type="submit"
-                                                className={clsx(getClassName("kcButtonPrimaryClass"), getClassName("kcButtonClass"))}
+                                                className={kcClsx("kcButtonPrimaryClass", "kcButtonClass")}
                                                 id={`revoke-${application.client.clientId}`}
                                                 name="clientId"
                                                 value={application.client.id}
@@ -136,3 +131,7 @@ export default function Applications(props: PageProps<Extract<KcContext, { pageI
         </Template>
     );
 }
+
+function isArrayWithEmptyObject(variable: any): boolean {
+    return Array.isArray(variable) && variable.length === 1 && typeof variable[0] === "object" && Object.keys(variable[0]).length === 0;
+}

package/src/account/pages/FederatedIdentity.tsx

@@ -1,6 +1,6 @@
-import { PageProps } from "keycloakify/account";
-import { I18n } from "keycloakify/account/i18n";
-import { KcContext } from "keycloakify/account/kcContext";
+import type { PageProps } from "keycloakify/account/pages/PageProps";
+import type { KcContext } from "../KcContext";
+import type { I18n } from "../i18n";
 
 export default function FederatedIdentity(props: PageProps<Extract<KcContext, { pageId: "federatedIdentity.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;

package/src/account/pages/Log.tsx

@@ -1,13 +1,13 @@
+import type { Key } from "react";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
-import { Key } from "react";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
 
 export default function Log(props: PageProps<Extract<KcContext, { pageId: "log.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, classes, Template } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -18,7 +18,7 @@ export default function Log(props: PageProps<Extract<KcContext, { pageId: "log.f
 
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="log">
-            <div className={getClassName("kcContentWrapperClass")}>
+            <div className={kcClsx("kcContentWrapperClass")}>
                 <div className="col-md-10">
                     <h2>{msg("accountLogHtmlTitle")}</h2>
                 </div>

package/src/account/pages/PageProps.ts

@@ -1,12 +1,10 @@
-import type { I18n } from "keycloakify/account/i18n";
-import type { TemplateProps, ClassKey } from "keycloakify/account/TemplateProps";
+import { type TemplateProps, type ClassKey } from "keycloakify/account/TemplateProps";
 import type { LazyOrNot } from "keycloakify/tools/LazyOrNot";
-import type { KcContext } from "keycloakify/account/kcContext";
 
-export type PageProps<NarowedKcContext = KcContext, I18nExtended extends I18n = I18n> = {
+export type PageProps<NarrowedKcContext, I18n> = {
     Template: LazyOrNot<(props: TemplateProps<any, any>) => JSX.Element | null>;
-    kcContext: NarowedKcContext;
-    i18n: I18nExtended;
+    kcContext: NarrowedKcContext;
+    i18n: I18n;
     doUseDefaultCss: boolean;
     classes?: Partial<Record<ClassKey, string>>;
 };

package/src/account/pages/Password.tsx

@@ -1,19 +1,21 @@
 import { useState } from "react";
 import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Password(props: PageProps<Extract<KcContext, { pageId: "password.ftl" }>, I18n>) {
-    const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
+    const { kcContext, i18n, doUseDefaultCss, Template } = props;
 
-    const { getClassName } = useGetClassName({
+    const classes = {
+        ...props.classes,
+        kcBodyClass: clsx(props.classes?.kcBodyClass, "password")
+    };
+
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
-        "classes": {
-            ...classes,
-            "kcBodyClass": clsx(classes?.kcBodyClass, "password")
-        }
+        classes
     });
 
     const { url, password, account, stateChecker } = kcContext;
@@ -57,18 +59,18 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
             {...{
                 kcContext: {
                     ...kcContext,
-                    "message": (() => {
+                    message: (() => {
                         if (newPasswordError !== "") {
                             return {
-                                "type": "error",
-                                "summary": newPasswordError
+                                type: "error",
+                                summary: newPasswordError
                             };
                         }
 
                         if (newPasswordConfirmError !== "") {
                             return {
-                                "type": "error",
-                                "summary": newPasswordConfirmError
+                                type: "error",
+                                summary: newPasswordConfirmError
                             };
                         }
 
@@ -98,7 +100,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                     value={account.username ?? ""}
                     autoComplete="username"
                     readOnly
-                    style={{ "display": "none" }}
+                    style={{ display: "none" }}
                 />
 
                 {password.passwordSet && (
@@ -192,11 +194,7 @@ export default function Password(props: PageProps<Extract<KcContext, { pageId: "
                             <button
                                 disabled={newPasswordError !== "" || newPasswordConfirmError !== ""}
                                 type="submit"
-                                className={clsx(
-                                    getClassName("kcButtonClass"),
-                                    getClassName("kcButtonPrimaryClass"),
-                                    getClassName("kcButtonLargeClass")
-                                )}
+                                className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                 name="submitAction"
                                 value="Save"
                             >

package/src/account/pages/Sessions.tsx

@@ -1,13 +1,12 @@
-import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
 
 export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "sessions.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
@@ -17,7 +16,7 @@ export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "
     const { msg } = i18n;
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="sessions">
-            <div className={getClassName("kcContentWrapperClass")}>
+            <div className={kcClsx("kcContentWrapperClass")}>
                 <div className="col-md-10">
                     <h2>{msg("sessionsHtmlTitle")}</h2>
                 </div>
@@ -56,7 +55,7 @@ export default function Sessions(props: PageProps<Extract<KcContext, { pageId: "
 
             <form action={url.sessionsUrl} method="post">
                 <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
-                <button id="logout-all-sessions" type="submit" className={clsx(getClassName("kcButtonDefaultClass"), getClassName("kcButtonClass"))}>
+                <button id="logout-all-sessions" type="submit" className={kcClsx("kcButtonDefaultClass", "kcButtonClass")}>
                     {msg("doLogOutAllSessions")}
                 </button>
             </form>

package/src/account/pages/Totp.tsx

@@ -1,27 +1,20 @@
 import { clsx } from "keycloakify/tools/clsx";
+import { getKcClsx } from "keycloakify/account/lib/kcClsx";
 import type { PageProps } from "keycloakify/account/pages/PageProps";
-import { useGetClassName } from "keycloakify/account/lib/useGetClassName";
-import type { KcContext } from "../kcContext";
+import type { KcContext } from "../KcContext";
 import type { I18n } from "../i18n";
-import { MessageKey } from "keycloakify/account/i18n/i18n";
 
 export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
 
-    const { getClassName } = useGetClassName({
+    const { kcClsx } = getKcClsx({
         doUseDefaultCss,
         classes
     });
 
     const { totp, mode, url, messagesPerField, stateChecker } = kcContext;
 
-    const { msg, msgStr } = i18n;
-
-    const algToKeyUriAlg: Record<(typeof kcContext)["totp"]["policy"]["algorithm"], string> = {
-        "HmacSHA1": "SHA1",
-        "HmacSHA256": "SHA256",
-        "HmacSHA512": "SHA512"
-    };
+    const { msg, msgStr, advancedMsg } = i18n;
 
     return (
         <Template {...{ kcContext, i18n, doUseDefaultCss, classes }} active="totp">
@@ -78,11 +71,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                             <li>
                                 <p>{msg("totpStep1")}</p>
 
-                                <ul id="kc-totp-supported-apps">
-                                    {totp.supportedApplications?.map(app => (
-                                        <li key={app}>{msg(app as MessageKey)}</li>
-                                    ))}
-                                </ul>
+                                <ul id="kc-totp-supported-apps">{totp.supportedApplications?.map(app => <li key={app}>{advancedMsg(app)}</li>)}</ul>
                             </li>
 
                             {mode && mode == "manual" ? (
@@ -105,7 +94,7 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                                 {msg("totpType")}: {msg(`totp.${totp.policy.type}`)}
                                             </li>
                                             <li id="kc-totp-algorithm">
-                                                {msg("totpAlgorithm")}: {algToKeyUriAlg?.[totp.policy.algorithm] ?? totp.policy.algorithm}
+                                                {msg("totpAlgorithm")}: {totp.policy.getAlgorithmKey()}
                                             </li>
                                             <li id="kc-totp-digits">
                                                 {msg("totpDigits")}: {totp.policy.digits}
@@ -145,9 +134,9 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                             </li>
                         </ol>
                         <hr />
-                        <form action={url.totpUrl} className={getClassName("kcFormClass")} id="kc-totp-settings-form" method="post">
+                        <form action={url.totpUrl} className={kcClsx("kcFormClass")} id="kc-totp-settings-form" method="post">
                             <input type="hidden" id="stateChecker" name="stateChecker" value={stateChecker} />
-                            <div className={getClassName("kcFormGroupClass")}>
+                            <div className={kcClsx("kcFormGroupClass")}>
                                 <div className="col-sm-2 col-md-2">
                                     <label htmlFor="totp" className="control-label">
                                         {msg("authenticatorCode")}
@@ -160,12 +149,12 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                         id="totp"
                                         name="totp"
                                         autoComplete="off"
-                                        className={getClassName("kcInputClass")}
+                                        className={kcClsx("kcInputClass")}
                                         aria-invalid={messagesPerField.existsError("totp")}
                                     />
 
                                     {messagesPerField.existsError("totp") && (
-                                        <span id="input-error-otp-code" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                        <span id="input-error-otp-code" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                                             {messagesPerField.get("totp")}
                                         </span>
                                     )}
@@ -174,9 +163,9 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                 {mode && <input type="hidden" id="mode" value={mode} />}
                             </div>
 
-                            <div className={getClassName("kcFormGroupClass")}>
+                            <div className={kcClsx("kcFormGroupClass")}>
                                 <div className="col-sm-2 col-md-2">
-                                    <label htmlFor="userLabel" className={getClassName("kcLabelClass")}>
+                                    <label htmlFor="userLabel" className={kcClsx("kcLabelClass")}>
                                         {msg("totpDeviceName")}
                                     </label>
                                     {totp.otpCredentials.length >= 1 && <span className="required">*</span>}
@@ -187,37 +176,28 @@ export default function Totp(props: PageProps<Extract<KcContext, { pageId: "totp
                                         id="userLabel"
                                         name="userLabel"
                                         autoComplete="off"
-                                        className={getClassName("kcInputClass")}
+                                        className={kcClsx("kcInputClass")}
                                         aria-invalid={messagesPerField.existsError("userLabel")}
                                     />
                                     {messagesPerField.existsError("userLabel") && (
-                                        <span id="input-error-otp-label" className={getClassName("kcInputErrorMessageClass")} aria-live="polite">
+                                        <span id="input-error-otp-label" className={kcClsx("kcInputErrorMessageClass")} aria-live="polite">
                                             {messagesPerField.get("userLabel")}
                                         </span>
                                     )}
                                 </div>
                             </div>
 
-                            <div id="kc-form-buttons" className={clsx(getClassName("kcFormGroupClass"), "text-right")}>
-                                <div className={getClassName("kcInputWrapperClass")}>
+                            <div id="kc-form-buttons" className={clsx(kcClsx("kcFormGroupClass"), "text-right")}>
+                                <div className={kcClsx("kcInputWrapperClass")}>
                                     <input
                                         type="submit"
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonPrimaryClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
+                                        className={kcClsx("kcButtonClass", "kcButtonPrimaryClass", "kcButtonLargeClass")}
                                         id="saveTOTPBtn"
                                         value={msgStr("doSave")}
                                     />
                                     <button
                                         type="submit"
-                                        className={clsx(
-                                            getClassName("kcButtonClass"),
-                                            getClassName("kcButtonDefaultClass"),
-                                            getClassName("kcButtonLargeClass"),
-                                            getClassName("kcButtonLargeClass")
-                                        )}
+                                        className={kcClsx("kcButtonClass", "kcButtonDefaultClass", "kcButtonLargeClass", "kcButtonLargeClass")}
                                         id="cancelTOTPBtn"
                                         name="submitAction"
                                         value="Cancel"

package/src/bin/add-story.ts

@@ -0,0 +1,104 @@
+import { getThisCodebaseRootDirPath } from "./tools/getThisCodebaseRootDirPath";
+import cliSelect from "cli-select";
+import {
+    loginThemePageIds,
+    accountThemePageIds,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    themeTypes,
+    type ThemeType
+} from "./shared/constants";
+import { capitalize } from "tsafe/capitalize";
+import * as fs from "fs";
+import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from "path";
+import { kebabCaseToCamelCase } from "./tools/kebabCaseToSnakeCase";
+import { assert, Equals } from "tsafe/assert";
+import type { CliCommandOptions } from "./main";
+import { getBuildContext } from "./shared/buildContext";
+import chalk from "chalk";
+
+export async function command(params: { cliCommandOptions: CliCommandOptions }) {
+    const { cliCommandOptions } = params;
+
+    const buildContext = getBuildContext({
+        cliCommandOptions
+    });
+
+    console.log(chalk.cyan("Theme type:"));
+
+    const { value: themeType } = await cliSelect<ThemeType>({
+        values: [...themeTypes]
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${themeType}`);
+
+    console.log(chalk.cyan("Select the page you want to create a Storybook for:"));
+
+    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(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${pageId}`);
+
+    const componentBasename = capitalize(kebabCaseToCamelCase(pageId)).replace(
+        /ftl$/,
+        "stories.tsx"
+    );
+
+    const targetFilePath = pathJoin(
+        buildContext.themeSrcDirPath,
+        themeType,
+        "pages",
+        componentBasename
+    );
+
+    if (fs.existsSync(targetFilePath)) {
+        console.log(`${pathRelative(process.cwd(), targetFilePath)} already exists`);
+
+        process.exit(-1);
+    }
+
+    const componentCode = fs
+        .readFileSync(
+            pathJoin(
+                getThisCodebaseRootDirPath(),
+                "stories",
+                themeType,
+                "pages",
+                componentBasename
+            )
+        )
+        .toString("utf8")
+        .replace('import React from "react";\n', "");
+
+    {
+        const targetDirPath = pathDirname(targetFilePath);
+
+        if (!fs.existsSync(targetDirPath)) {
+            fs.mkdirSync(targetDirPath, { recursive: true });
+        }
+    }
+
+    fs.writeFileSync(targetFilePath, Buffer.from(componentCode, "utf8"));
+
+    console.log(
+        [
+            `${chalk.green("✓")} ${chalk.bold(
+                pathJoin(".", pathRelative(process.cwd(), targetFilePath))
+            )} copy pasted from the Keycloakify source code into your project`,
+            `You can start storybook with ${chalk.bold("npm run storybook")}`
+        ].join("\n")
+    );
+}

package/src/bin/copy-keycloak-resources-to-public.ts

@@ -1,16 +1,13 @@
 import { copyKeycloakResourcesToPublic } from "./shared/copyKeycloakResourcesToPublic";
-import { readBuildOptions } from "./shared/buildOptions";
+import { getBuildContext } from "./shared/buildContext";
 import type { CliCommandOptions } from "./main";
 
 export async function command(params: { cliCommandOptions: CliCommandOptions }) {
     const { cliCommandOptions } = params;
 
-    const buildOptions = readBuildOptions({ cliCommandOptions });
+    const buildContext = getBuildContext({ cliCommandOptions });
 
     await copyKeycloakResourcesToPublic({
-        "buildOptions": {
-            ...buildOptions,
-            "publicDirPath": buildOptions.reactAppRootDirPath
-        }
+        buildContext
     });
 }