keycloakify 11.8.45 → 11.8.47-rc.1

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

@@ -0,0 +1,323 @@
+import { maybeDelegateCommandToCustomHandler } from "./shared/customHandler_delegate";
+import { dirname as pathDirname, join as pathJoin } from "path";
+import type { BuildContext } from "./shared/buildContext";
+import * as fs from "fs/promises";
+import { assert, is, type Equals } from "tsafe/assert";
+import { id } from "tsafe/id";
+import { addSyncExtensionsToPostinstallScript } from "./shared/addSyncExtensionsToPostinstallScript";
+import { getIsPrettierAvailable, runPrettier } from "./tools/runPrettier";
+import { npmInstall } from "./tools/npmInstall";
+import * as child_process from "child_process";
+import { z } from "zod";
+import chalk from "chalk";
+import cliSelect from "cli-select";
+import { existsAsync } from "./tools/fs.existsAsync";
+
+export async function command(params: { buildContext: BuildContext }) {
+    const { buildContext } = params;
+
+    const { hasBeenHandled } = await maybeDelegateCommandToCustomHandler({
+        commandName: "initialize-login-theme",
+        buildContext
+    });
+
+    if (hasBeenHandled) {
+        return;
+    }
+
+    if (
+        buildContext.implementedThemeTypes.login.isImplemented ||
+        buildContext.implementedThemeTypes.login.isImplemented_native
+    ) {
+        console.warn(chalk.red("There is already a login theme in your project"));
+
+        process.exit(-1);
+    }
+
+    const parsedPackageJson = await (async () => {
+        type ParsedPackageJson = {
+            scripts?: Record<string, string | undefined>;
+            dependencies?: Record<string, string | undefined>;
+            devDependencies?: Record<string, string | undefined>;
+        };
+
+        const zParsedPackageJson = (() => {
+            type TargetType = ParsedPackageJson;
+
+            const zTargetType = z.object({
+                scripts: z.record(z.union([z.string(), z.undefined()])).optional(),
+                dependencies: z.record(z.union([z.string(), z.undefined()])).optional(),
+                devDependencies: z.record(z.union([z.string(), z.undefined()])).optional()
+            });
+
+            assert<Equals<z.infer<typeof zTargetType>, TargetType>>;
+
+            return id<z.ZodType<TargetType>>(zTargetType);
+        })();
+        const parsedPackageJson = JSON.parse(
+            (await fs.readFile(buildContext.packageJsonFilePath)).toString("utf8")
+        );
+
+        zParsedPackageJson.parse(parsedPackageJson);
+
+        assert(is<ParsedPackageJson>(parsedPackageJson));
+
+        return parsedPackageJson;
+    })();
+
+    addSyncExtensionsToPostinstallScript({
+        parsedPackageJson,
+        buildContext
+    });
+
+    const doInstallStories = await (async () => {
+        console.log(chalk.cyan(`\nDo you want to install the Stories?`));
+
+        const YES = "Yes (Recommended)";
+        const NO = "No";
+
+        const { value } = await cliSelect({
+            values: [YES, NO]
+        }).catch(() => {
+            process.exit(-1);
+        });
+
+        console.log(`${value}\n`);
+
+        return value === YES;
+    })();
+
+    install_storybook: {
+        if (!doInstallStories) {
+            break install_storybook;
+        }
+
+        if (buildContext.bundler !== "vite") {
+            break install_storybook;
+        }
+
+        if (
+            Object.keys({
+                ...parsedPackageJson.dependencies,
+                ...parsedPackageJson.devDependencies
+            }).includes("storybook")
+        ) {
+            break install_storybook;
+        }
+
+        (parsedPackageJson.scripts ??= {})["storybook"] = "storybook dev -p 6006";
+        parsedPackageJson.scripts["build-storybook"] = "storybook build";
+
+        (parsedPackageJson.devDependencies ??= {})["storybook"] = "^9.0.4";
+        parsedPackageJson.devDependencies["@storybook/react-vite"] = "^9.0.4";
+
+        const files: { relativeFilePath: string; fileContent: string }[] = [
+            {
+                relativeFilePath: "main.ts",
+                fileContent: [
+                    `import type { StorybookConfig } from "@storybook/react-vite";`,
+                    ``,
+                    `const config: StorybookConfig = {`,
+                    `    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],`,
+                    `    addons: [],`,
+                    `    framework: {`,
+                    `        name: "@storybook/react-vite",`,
+                    `        options: {}`,
+                    `    },`,
+                    `};`,
+                    `export default config;`,
+                    ``
+                ].join("\n")
+            },
+            {
+                relativeFilePath: "preview.ts",
+                fileContent: storybookPreviewTsFileContent
+            }
+        ];
+
+        for (let { relativeFilePath, fileContent } of files) {
+            const filePath = pathJoin(
+                buildContext.projectDirPath,
+                ".storybook",
+                relativeFilePath
+            );
+
+            {
+                const dirPath = pathDirname(filePath);
+
+                if (!(await existsAsync(dirPath))) {
+                    await fs.mkdir(dirPath, { recursive: true });
+                }
+            }
+
+            run_prettier: {
+                if (!(await getIsPrettierAvailable())) {
+                    break run_prettier;
+                }
+
+                fileContent = await runPrettier({
+                    filePath: filePath,
+                    sourceCode: fileContent
+                });
+            }
+
+            await fs.writeFile(filePath, Buffer.from(fileContent, "utf8"));
+        }
+    }
+
+    {
+        const moduleName = "@keycloakify/login-ui";
+
+        const latestVersion = await getModuleLatestVersion({ moduleName });
+
+        (parsedPackageJson.dependencies ??= {})[moduleName] = `~${latestVersion}`;
+
+        if (parsedPackageJson.devDependencies !== undefined) {
+            delete parsedPackageJson.devDependencies[moduleName];
+        }
+    }
+
+    install_stories: {
+        if (!doInstallStories) {
+            break install_stories;
+        }
+
+        const moduleName = "@keycloakify/login-ui-storybook";
+
+        const latestVersion = await getModuleLatestVersion({ moduleName });
+
+        (parsedPackageJson.devDependencies ??= {})[moduleName] = `~${latestVersion}`;
+
+        delete parsedPackageJson.dependencies[moduleName];
+    }
+
+    {
+        let sourceCode = JSON.stringify(parsedPackageJson, null, 2);
+
+        if (await getIsPrettierAvailable()) {
+            sourceCode = await runPrettier({
+                sourceCode,
+                filePath: buildContext.packageJsonFilePath
+            });
+        }
+
+        await fs.writeFile(
+            buildContext.packageJsonFilePath,
+            Buffer.from(sourceCode, "utf8")
+        );
+    }
+
+    await npmInstall({
+        packageJsonDirPath: pathDirname(buildContext.packageJsonFilePath)
+    });
+}
+
+async function getModuleLatestVersion(params: { moduleName: string }) {
+    const { moduleName } = params;
+
+    const versions = ((): string[] => {
+        const cmdOutput = child_process
+            .execSync(`npm show ${moduleName} versions --json`)
+            .toString("utf8")
+            .trim();
+
+        const versions = JSON.parse(cmdOutput) as string | string[];
+
+        // NOTE: Bug in some older npm versions
+        if (typeof versions === "string") {
+            return [versions];
+        }
+
+        return versions;
+    })();
+
+    const version = versions.reverse().filter(version => !version.includes("-"))[0];
+
+    assert(version !== undefined);
+
+    return version;
+}
+
+const storybookPreviewTsFileContent = [
+    `import type { Preview } from "@storybook/react-vite";`,
+    ``,
+    `const preview: Preview = {`,
+    `    parameters: {`,
+    `        controls: {`,
+    `            matchers: {`,
+    `                color: /(background|color)$/i,`,
+    `                date: /Date$/i`,
+    `            }`,
+    `        },`,
+    `        options: {`,
+    `            storySort: (a, b)=> {`,
+    ``,
+    `                const orderedPagesPrefix = [`,
+    `                    "Introduction",`,
+    `                    "login/login.ftl",`,
+    `                    "login/register.ftl",`,
+    `                    "login/terms.ftl",`,
+    `                    "login/error.ftl",`,
+    `                    "login/code.ftl",`,
+    `                    "login/delete-account-confirm.ftl",`,
+    `                    "login/delete-credential.ftl",`,
+    `                    "login/frontchannel-logout.ftl",`,
+    `                    "login/idp-review-user-profile.ftl",`,
+    `                    "login/info.ftl",`,
+    `                    "login/login-config-totp.ftl",`,
+    `                    "login/login-idp-link-confirm.ftl",`,
+    `                    "login/login-idp-link-email.ftl",`,
+    `                    "login/login-oauth-grant.ftl",`,
+    `                    "login/login-otp.ftl",`,
+    `                    "login/login-page-expired.ftl",`,
+    `                    "login/login-password.ftl",`,
+    `                    "login/login-reset-otp.ftl",`,
+    `                    "login/login-reset-password.ftl",`,
+    `                    "login/login-update-password.ftl",`,
+    `                    "login/login-update-profile.ftl",`,
+    `                    "login/login-username.ftl",`,
+    `                    "login/login-verify-email.ftl",`,
+    `                    "login/login-x509-info.ftl",`,
+    `                    "login/logout-confirm.ftl",`,
+    `                    "login/saml-post-form.ftl",`,
+    `                    "login/select-authenticator.ftl",`,
+    `                    "login/update-email.ftl",`,
+    `                    "login/webauthn-authenticate.ftl",`,
+    `                    "login/webauthn-error.ftl",`,
+    `                    "login/webauthn-register.ftl",`,
+    `                    "login/login-oauth2-device-verify-user-code.ftl",`,
+    `                    "login/login-recovery-authn-code-config.ftl",`,
+    `                    "login/login-recovery-authn-code-input.ftl",`,
+    `                    "account/account.ftl",`,
+    `                    "account/password.ftl",`,
+    `                    "account/federatedIdentity.ftl",`,
+    `                    "account/log.ftl",`,
+    `                    "account/sessions.ftl",`,
+    `                    "account/totp.ftl"`,
+    `                ];`,
+    ``,
+    `                function getHardCodedWeight(title) {`,
+    `                    for (let i = 0; i < orderedPagesPrefix.length; i++) {`,
+    `                        if (`,
+    `                            title`,
+    `                                .toLowerCase()`,
+    `                                .startsWith(orderedPagesPrefix[i].toLowerCase())`,
+    `                        ) {`,
+    `                            return orderedPagesPrefix.length - i;`,
+    `                        }`,
+    `                    }`,
+    ``,
+    `                    return 0;`,
+    `                }`,
+    ``,
+    `                return getHardCodedWeight(b.title) - getHardCodedWeight(a.title);`,
+    ``,
+    `            }`,
+    ``,
+    `        }`,
+    `    }`,
+    `};`,
+    ``,
+    `export default preview;`,
+    ``
+].join("\n");

package/src/bin/main.ts

@@ -146,6 +146,20 @@ program
         }
     });
 
+program
+    .command({
+        name: "init",
+        description: "(BETA) Initialize a new theme type (login/account/admin/email)"
+    })
+    .task({
+        skip,
+        handler: async ({ projectDirPath }) => {
+            const { command } = await import("./init");
+
+            await command({ projectDirPath: projectDirPath ?? process.cwd() });
+        }
+    });
+
 program
     .command({
         name: "eject-page",

package/src/bin/shared/buildContext.ts

@@ -2,7 +2,6 @@ import { parse as urlParse } from "url";
 import {
     join as pathJoin,
     sep as pathSep,
-    relative as pathRelative,
     resolve as pathResolve,
     dirname as pathDirname
 } from "path";
@@ -13,8 +12,7 @@ import { assert, type Equals, is } from "tsafe/assert";
 import * as child_process from "child_process";
 import {
     VITE_PLUGIN_SUB_SCRIPTS_ENV_NAMES,
-    BUILD_FOR_KEYCLOAK_MAJOR_VERSION_ENV_NAME,
-    THEME_TYPES
+    BUILD_FOR_KEYCLOAK_MAJOR_VERSION_ENV_NAME
 } from "./constants";
 import type { KeycloakVersionRange } from "./KeycloakVersionRange";
 import { exclude } from "tsafe";
@@ -167,40 +165,7 @@ export function getBuildContext(params: {
             return { themeSrcDirPath };
         }
 
-        {
-            const basenames = fs.readdirSync(srcDirPath);
-
-            for (const basename of basenames) {
-                const path = pathJoin(srcDirPath, basename);
-
-                if (!fs.statSync(path).isFile()) {
-                    continue;
-                }
-
-                if (fs.readFileSync(path).toString("utf8").includes("./kc.gen")) {
-                    return { themeSrcDirPath: srcDirPath };
-                }
-            }
-        }
-
-        for (const themeType of [...THEME_TYPES, "email"]) {
-            if (!fs.existsSync(pathJoin(srcDirPath, themeType))) {
-                continue;
-            }
-            return { themeSrcDirPath: srcDirPath };
-        }
-
-        console.log(
-            chalk.red(
-                [
-                    `Can't locate your Keycloak theme source directory in .${pathSep}${pathRelative(process.cwd(), srcDirPath)}`,
-                    `Make sure to either use the Keycloakify CLI in the root of your Keycloakify project or use the --project CLI option`,
-                    `If you are collocating your Keycloak theme with your app you must have a directory named '${KEYCLOAK_THEME}' or '${KEYCLOAK_THEME.replace(/-/g, "_")}' in your 'src' directory`
-                ].join("\n")
-            )
-        );
-
-        process.exit(1);
+        return { themeSrcDirPath: srcDirPath };
     })();
 
     const { resolvedViteConfig } = (() => {

package/src/bin/shared/customHandler.ts

@@ -10,11 +10,13 @@ export type CommandName =
     | "update-kc-gen"
     | "eject-page"
     | "add-story"
+    | "initialize-login-theme"
     | "initialize-account-theme"
     | "initialize-admin-theme"
     | "initialize-admin-theme"
     | "initialize-email-theme"
-    | "copy-keycloak-resources-to-public";
+    | "copy-keycloak-resources-to-public"
+    | "init";
 
 export type ApiVersion = "v1";
 

package/src/bin/sync-extensions/extensionModuleMeta.ts

@@ -206,92 +206,108 @@ export async function getExtensionModuleMetas(params: {
     })();
 
     const extensionModuleMetas = await Promise.all(
-        installedExtensionModules.map(
-            async ({
-                moduleName,
-                version,
-                peerDependencies,
-                dirPath
-            }): Promise<ExtensionModuleMeta> => {
-                use_cache: {
-                    const extensionModuleMeta_cache =
-                        extensionModuleMetas_cacheUpToDate.find(
-                            extensionModuleMeta =>
-                                extensionModuleMeta.moduleName === moduleName
-                        );
-
-                    if (extensionModuleMeta_cache === undefined) {
-                        break use_cache;
-                    }
-
-                    return extensionModuleMeta_cache;
-                }
+        [...installedExtensionModules]
+            .sort((a, b) => a.moduleName.localeCompare(b.moduleName))
+            .map(
+                async ({
+                    moduleName,
+                    version,
+                    peerDependencies,
+                    dirPath
+                }): Promise<ExtensionModuleMeta> => {
+                    use_cache: {
+                        const extensionModuleMeta_cache =
+                            extensionModuleMetas_cacheUpToDate.find(
+                                extensionModuleMeta =>
+                                    extensionModuleMeta.moduleName === moduleName
+                            );
+
+                        if (extensionModuleMeta_cache === undefined) {
+                            break use_cache;
+                        }
 
-                const files: ExtensionModuleMeta["files"] = [];
+                        return extensionModuleMeta_cache;
+                    }
 
-                await crawlAsync({
-                    dirPath: pathJoin(dirPath, KEYCLOAK_THEME),
-                    returnedPathsType: "relative to dirPath",
-                    onFileFound: async fileRelativePath_fromReservedDir => {
-                        const isPublic = fileRelativePath_fromReservedDir.startsWith(
-                            `public${pathSep}`
-                        );
+                    const files: ExtensionModuleMeta["files"] = [];
+
+                    await crawlAsync({
+                        dirPath: pathJoin(dirPath, KEYCLOAK_THEME),
+                        returnedPathsType: "relative to dirPath",
+                        onFileFound: async fileRelativePath_fromReservedDir => {
+                            const isPublic = fileRelativePath_fromReservedDir.startsWith(
+                                `public${pathSep}`
+                            );
+
+                            const fileRelativePath = isPublic
+                                ? pathRelative("public", fileRelativePath_fromReservedDir)
+                                : fileRelativePath_fromReservedDir;
+
+                            const sourceCode =
+                                await getExtensionModuleFileSourceCodeReadyToBeCopied({
+                                    buildContext,
+                                    isPublic,
+                                    fileRelativePath,
+                                    isOwnershipAction: false,
+                                    extensionModuleDirPath: dirPath,
+                                    extensionModuleName: moduleName,
+                                    extensionModuleVersion: version
+                                });
+
+                            const hash = computeHash(sourceCode);
+
+                            const copyableFilePath = pathJoin(
+                                pathDirname(cacheFilePath),
+                                KEYCLOAK_THEME,
+                                fileRelativePath_fromReservedDir
+                            );
+
+                            {
+                                const dirPath = pathDirname(copyableFilePath);
+
+                                if (!(await existsAsync(dirPath))) {
+                                    await fsPr.mkdir(dirPath, { recursive: true });
+                                }
+                            }
 
-                        const fileRelativePath = isPublic
-                            ? pathRelative("public", fileRelativePath_fromReservedDir)
-                            : fileRelativePath_fromReservedDir;
+                            fsPr.writeFile(copyableFilePath, sourceCode);
 
-                        const sourceCode =
-                            await getExtensionModuleFileSourceCodeReadyToBeCopied({
-                                buildContext,
+                            files.push({
                                 isPublic,
                                 fileRelativePath,
-                                isOwnershipAction: false,
-                                extensionModuleDirPath: dirPath,
-                                extensionModuleName: moduleName,
-                                extensionModuleVersion: version
+                                hash,
+                                copyableFilePath
                             });
-
-                        const hash = computeHash(sourceCode);
-
-                        const copyableFilePath = pathJoin(
-                            pathDirname(cacheFilePath),
-                            KEYCLOAK_THEME,
-                            fileRelativePath_fromReservedDir
-                        );
-
-                        {
-                            const dirPath = pathDirname(copyableFilePath);
-
-                            if (!(await existsAsync(dirPath))) {
-                                await fsPr.mkdir(dirPath, { recursive: true });
-                            }
                         }
+                    });
 
-                        fsPr.writeFile(copyableFilePath, sourceCode);
+                    {
+                        const getId = (file: {
+                            isPublic: boolean;
+                            fileRelativePath: string;
+                        }) =>
+                            `${file.isPublic ? "public" : "src"} - ${file.fileRelativePath}`;
 
-                        files.push({
-                            isPublic,
-                            fileRelativePath,
-                            hash,
-                            copyableFilePath
-                        });
+                        files.sort((a, b) => getId(a).localeCompare(getId(b)));
                     }
-                });
 
-                return id<ExtensionModuleMeta>({
-                    moduleName,
-                    version,
-                    files,
-                    peerDependencies: Object.fromEntries(
-                        Object.entries(peerDependencies).filter(
-                            ([moduleName]) =>
-                                !isAmong(["react", "@types/react"], moduleName)
+                    return id<ExtensionModuleMeta>({
+                        moduleName,
+                        version,
+                        files,
+                        peerDependencies: Object.fromEntries(
+                            Object.entries(peerDependencies)
+                                .filter(
+                                    ([moduleName]) =>
+                                        !isAmong(["react", "@types/react"], moduleName)
+                                )
+                                .sort(([moduleName_a], [moduleName_b]) =>
+                                    moduleName_a.localeCompare(moduleName_b)
+                                )
                         )
-                    )
-                });
-            }
-        )
+                    });
+                }
+            )
     );
 
     update_cache: {

package/src/bin/sync-extensions/managedGitignoreFiles.ts

@@ -73,10 +73,16 @@ export async function writeManagedGitignoreFiles(params: {
                 ...ownedFilesRelativePaths_ctx
                     .map(({ fileRelativePath }) => fileRelativePath)
                     .map(fileRelativePath => fileRelativePath.split(pathSep).join("/"))
+                    .sort(posixPathCompareFn)
                     .map(line => `# ${line}`),
                 DELIMITER_END,
                 ``,
-                ...extensionModuleMetas_ctx
+                ...[...extensionModuleMetas_ctx]
+                    .sort((a, b) => {
+                        const n = a.moduleName.length - b.moduleName.length;
+
+                        return n !== 0 ? n : a.moduleName.localeCompare(b.moduleName);
+                    })
                     .map(extensionModuleMeta => [
                         `# === ${extensionModuleMeta.moduleName} v${extensionModuleMeta.version} ===`,
                         ...extensionModuleMeta.files
@@ -90,7 +96,8 @@ export async function writeManagedGitignoreFiles(params: {
                             .map(
                                 fileRelativePath =>
                                     `/${fileRelativePath.split(pathSep).join("/").replace(/^\.\//, "")}`
-                            ),
+                            )
+                            .sort(posixPathCompareFn),
 
                         ``
                     ])
@@ -187,3 +194,26 @@ export async function readManagedGitignoresFile(params: {
 
     return { ownedFilesRelativePaths };
 }
+
+function posixPathCompareFn(a: string, b: string) {
+    const aParts = a.split("/");
+    const bParts = b.split("/");
+
+    const diff = aParts.length - bParts.length;
+
+    if (diff !== 0) {
+        return diff;
+    }
+
+    const len = Math.min(aParts.length, bParts.length);
+
+    for (let i = 0; i < len; i++) {
+        const cmp = aParts[i].localeCompare(bParts[i], undefined, {
+            numeric: true,
+            sensitivity: "base"
+        });
+        if (cmp !== 0) return cmp;
+    }
+
+    return 0;
+}