@keycloakify/svelte 0.1.2 → 0.1.4

package/src/bin/add-story.ts

@@ -0,0 +1,117 @@
+import chalk from 'chalk';
+import cliSelect from 'cli-select';
+import * as fs from 'fs';
+import { dirname as pathDirname, join as pathJoin, relative as pathRelative } from 'path';
+import { assert, Equals } from 'tsafe/assert';
+import { capitalize } from 'tsafe/capitalize';
+import {
+  ACCOUNT_THEME_PAGE_IDS,
+  type AccountThemePageId,
+  type BuildContext,
+  LOGIN_THEME_PAGE_IDS,
+  type LoginThemePageId,
+  THEME_TYPES,
+} from './core';
+import { getThisCodebaseRootDirPath } from './tools/getThisCodebaseRootDirPath';
+import { kebabCaseToCamelCase } from './tools/kebabCaseToSnakeCase';
+import { getIsPrettierAvailable, runPrettier } from './tools/runPrettier';
+
+export async function command(params: { buildContext: BuildContext }) {
+  const { buildContext } = params;
+
+  console.log(chalk.cyan('Theme type:'));
+
+  const themeType = await (async () => {
+    const values = THEME_TYPES.filter((themeType) => {
+      switch (themeType) {
+        case 'account':
+          return buildContext.implementedThemeTypes.account.isImplemented;
+        case 'login':
+          return buildContext.implementedThemeTypes.login.isImplemented;
+        case 'admin':
+          return false;
+      }
+      assert<Equals<typeof themeType, never>>(false);
+    });
+
+    assert(values.length > 0, 'No theme is implemented in this project');
+
+    if (values.length === 1) {
+      return values[0];
+    }
+
+    const { value } = await cliSelect({
+      values,
+    }).catch(() => {
+      process.exit(-1);
+    });
+
+    return value;
+  })();
+
+  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 [...LOGIN_THEME_PAGE_IDS];
+        case 'account':
+          return [...ACCOUNT_THEME_PAGE_IDS];
+        case 'admin':
+          return [];
+      }
+      assert<Equals<typeof themeType, never>>(false);
+    })(),
+  }).catch(() => {
+    process.exit(-1);
+  });
+
+  console.log(`→ ${pageId}`);
+
+  const componentBasename = capitalize(kebabCaseToCamelCase(pageId.replace(/ftl$/, ''))) + 'stories.svelte';
+
+  const targetFilePath = pathJoin(buildContext.themeSrcDirPath, themeType, 'pages', componentBasename);
+
+  if (fs.existsSync(targetFilePath)) {
+    console.log(`${pathRelative(process.cwd(), targetFilePath)} already exists`);
+
+    process.exit(-1);
+  }
+
+  let sourceCode = fs
+    .readFileSync(pathJoin(getThisCodebaseRootDirPath(), 'stories', themeType, 'pages', componentBasename))
+    .toString('utf8');
+
+  run_prettier: {
+    if (!(await getIsPrettierAvailable())) {
+      break run_prettier;
+    }
+
+    sourceCode = await runPrettier({
+      filePath: targetFilePath,
+      sourceCode: sourceCode,
+    });
+  }
+
+  {
+    const targetDirPath = pathDirname(targetFilePath);
+
+    if (!fs.existsSync(targetDirPath)) {
+      fs.mkdirSync(targetDirPath, { recursive: true });
+    }
+  }
+
+  fs.writeFileSync(targetFilePath, Buffer.from(sourceCode, '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('yarn run storybook')}`,
+    ].join('\n'),
+  );
+}

package/src/bin/core.ts

@@ -0,0 +1,10 @@
+export type { BuildContext } from 'keycloakify/bin/shared/buildContext';
+export {
+  ACCOUNT_THEME_PAGE_IDS,
+  LOGIN_THEME_PAGE_IDS,
+  THEME_TYPES,
+  type AccountThemePageId,
+  type LoginThemePageId,
+  type ThemeType,
+} from 'keycloakify/bin/shared/constants';
+export { BIN_NAME, NOT_IMPLEMENTED_EXIT_CODE, readParams } from 'keycloakify/bin/shared/customHandler';

package/src/bin/eject-page.ts

@@ -0,0 +1,233 @@
+#!/usr/bin/env node
+
+import chalk from 'chalk';
+import cliSelect from 'cli-select';
+import * as fs from 'fs';
+import { dirname as pathDirname, join as pathJoin, relative as pathRelative } from 'path';
+import { assert, Equals } from 'tsafe/assert';
+import { capitalize } from 'tsafe/capitalize';
+import {
+  ACCOUNT_THEME_PAGE_IDS,
+  type AccountThemePageId,
+  type BuildContext,
+  LOGIN_THEME_PAGE_IDS,
+  type LoginThemePageId,
+  THEME_TYPES,
+} from './core';
+import { getThisCodebaseRootDirPath } from './tools/getThisCodebaseRootDirPath';
+import { kebabCaseToCamelCase } from './tools/kebabCaseToSnakeCase';
+import { getIsPrettierAvailable, runPrettier } from './tools/runPrettier';
+
+export async function command(params: { buildContext: BuildContext }) {
+  const { buildContext } = params;
+
+  console.log(chalk.cyan('Theme type:'));
+
+  const themeType = await (async () => {
+    const values = THEME_TYPES.filter((themeType) => {
+      switch (themeType) {
+        case 'account':
+          return buildContext.implementedThemeTypes.account.isImplemented;
+        case 'login':
+          return buildContext.implementedThemeTypes.login.isImplemented;
+        case 'admin':
+          return buildContext.implementedThemeTypes.admin.isImplemented;
+      }
+      assert<Equals<typeof themeType, never>>(false);
+    });
+
+    assert(values.length > 0, 'No theme is implemented in this project');
+
+    if (values.length === 1) {
+      return values[0];
+    }
+
+    const { value } = await cliSelect({
+      values,
+    }).catch(() => {
+      process.exit(-1);
+    });
+
+    return value;
+  })();
+
+  console.log(`→ ${themeType}`);
+
+  console.log(chalk.cyan('Select the page you want to customize:'));
+
+  const templateValue = 'Template.svelte (Layout common to every page)';
+  const userProfileFormFieldsValue =
+    'UserProfileFormFields.svelte (Renders the form of the register.ftl, login-update-profile.ftl, update-email.ftl and idp-review-user-profile.ftl)';
+  const otherPageValue = "The page you're looking for isn't listed here";
+
+  const { value: pageIdOrComponent } = await cliSelect<
+    | LoginThemePageId
+    | AccountThemePageId
+    | typeof templateValue
+    | typeof userProfileFormFieldsValue
+    | typeof otherPageValue
+  >({
+    values: (() => {
+      switch (themeType) {
+        case 'login':
+          return [templateValue, userProfileFormFieldsValue, ...LOGIN_THEME_PAGE_IDS, otherPageValue];
+        case 'account':
+          return [templateValue, ...ACCOUNT_THEME_PAGE_IDS, otherPageValue];
+        case 'admin':
+          return [];
+      }
+      assert<Equals<typeof themeType, never>>(false);
+    })(),
+  }).catch(() => {
+    process.exit(-1);
+  });
+
+  if (pageIdOrComponent === otherPageValue) {
+    console.log(
+      [
+        'To style a page not included in the base Keycloak, such as one added by a third-party Keycloak extension,',
+        'refer to the documentation: https://docs.keycloakify.dev/features/styling-a-custom-page-not-included-in-base-keycloak',
+      ].join(' '),
+    );
+
+    process.exit(0);
+  }
+
+  console.log(`→ ${pageIdOrComponent}`);
+
+  const componentBasename = (() => {
+    if (pageIdOrComponent === templateValue) {
+      return 'Template.svelte';
+    }
+
+    if (pageIdOrComponent === userProfileFormFieldsValue) {
+      return 'UserProfileFormFields.svelte';
+    }
+
+    return capitalize(kebabCaseToCamelCase(pageIdOrComponent)).replace(/ftl$/, 'svelte');
+  })();
+
+  const pagesOrDot = (() => {
+    if (pageIdOrComponent === templateValue || pageIdOrComponent === userProfileFormFieldsValue) {
+      return '.';
+    }
+
+    return 'pages';
+  })();
+
+  const targetFilePath = pathJoin(buildContext.themeSrcDirPath, themeType, pagesOrDot, componentBasename);
+
+  if (fs.existsSync(targetFilePath)) {
+    console.log(
+      `${pageIdOrComponent} is already ejected, ${pathRelative(process.cwd(), targetFilePath)} already exists`,
+    );
+
+    process.exit(-1);
+  }
+
+  let componentCode = fs
+    .readFileSync(pathJoin(getThisCodebaseRootDirPath(), 'src', themeType, pagesOrDot, componentBasename))
+    .toString('utf8');
+
+  run_prettier: {
+    if (!(await getIsPrettierAvailable())) {
+      break run_prettier;
+    }
+
+    componentCode = await runPrettier({
+      filePath: targetFilePath,
+      sourceCode: componentCode,
+    });
+  }
+
+  {
+    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`,
+  );
+
+  edit_KcPage: {
+    if (pageIdOrComponent !== templateValue && pageIdOrComponent !== userProfileFormFieldsValue) {
+      break edit_KcPage;
+    }
+
+    const kcAppSveltePath = pathJoin(buildContext.themeSrcDirPath, themeType, 'KcPage.svelte');
+
+    const kcAppSvelteCode = fs.readFileSync(kcAppSveltePath).toString('utf8');
+
+    const modifiedKcAppSvelteCode = (() => {
+      switch (pageIdOrComponent) {
+        case templateValue:
+          return kcAppSvelteCode.replace(`@keycloakify/svelte/${themeType}/Template`, './Template');
+        case userProfileFormFieldsValue:
+          return kcAppSvelteCode.replace(`@keycloakify/svelte/login/UserProfileFormFields`, './UserProfileFormFields');
+      }
+      assert<Equals<typeof pageIdOrComponent, never>>(false);
+    })();
+
+    if (kcAppSvelteCode === modifiedKcAppSvelteCode) {
+      console.log(chalk.red('Unable to automatically update KcPage.svelte, please update it manually'));
+      return;
+    }
+
+    fs.writeFileSync(kcAppSveltePath, Buffer.from(modifiedKcAppSvelteCode, 'utf8'));
+
+    console.log(
+      `${chalk.green('✓')} ${chalk.bold(pathJoin('.', pathRelative(process.cwd(), kcAppSveltePath)))} Updated`,
+    );
+
+    return;
+  }
+
+  console.log(
+    [
+      ``,
+      `You now need to update your page router:`,
+      ``,
+      `${chalk.bold(
+        pathJoin('.', pathRelative(process.cwd(), buildContext.themeSrcDirPath), themeType, 'KcPage.svelte'),
+      )}:`,
+      chalk.grey('```'),
+      `// ...`,
+      ``,
+      ...(() => {
+        let inGreenBlock = false;
+        return [
+          ` const page = async () => {`,
+          `   switch (kcContext.pageId) {`,
+          `+`,
+          `    case '${pageIdOrComponent}':`,
+          `      return import('./pages/${componentBasename}"');`,
+          `+`,
+          `     //...`,
+          `     default:`,
+          `       return import('@keycloakify/svelte/login/DefaultPage.svelte');`,
+          `   }`,
+          ` }`,
+        ].map((line) => {
+          if (line === `+`) {
+            inGreenBlock = !inGreenBlock;
+          }
+          if (inGreenBlock || line.startsWith('+')) {
+            return chalk.green(line);
+          }
+          if (line.startsWith('-')) {
+            return chalk.red(line);
+          }
+          return chalk.grey(line);
+        });
+      })(),
+      chalk.grey('```'),
+    ].join('\n'),
+  );
+}

package/src/bin/initialize-account-theme/boilerplate/KcContext.ts

@@ -0,0 +1,11 @@
+import type { ExtendKcContext } from 'keycloakify/account';
+import type { KcEnvName, ThemeName } from '../kc.gen';
+
+export type KcContextExtension = {
+  themeName: ThemeName;
+  properties: Record<KcEnvName, string> & {};
+};
+
+export type KcContextExtensionPerPage = Record<string, Record<string, unknown>>;
+
+export type KcContext = ExtendKcContext<KcContextExtension, KcContextExtensionPerPage>;

package/src/bin/initialize-account-theme/boilerplate/KcPage.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import Template from '@keycloakify/svelte/account/Template.svelte';
+  import type { KcContext } from 'keycloakify/account/KcContext';
+  import type { ClassKey } from 'keycloakify/account/lib/kcClsx';
+  import { useI18n } from './i18n';
+
+  const { kcContext }: { kcContext: KcContext } = $props();
+
+  const { i18n } = useI18n({ kcContext });
+  const page = async () => {
+    switch (kcContext.pageId) {
+      default:
+        return import('@keycloakify/svelte/account/DefaultPage.svelte');
+    }
+  };
+
+  const classes = {} satisfies { [key in ClassKey]?: string };
+</script>
+
+{#await page() then { default: Page }}
+  <Page
+    {kcContext}
+    {i18n}
+    {classes}
+    {Template}
+    doUseDefaultCss={true}
+  ></Page>
+{/await}

package/src/bin/initialize-account-theme/boilerplate/KcPageStory.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  import KcPage from './KcPage.svelte';
+  import { getKcContextMock, type KcPageStoryProps } from './KcPageStory';
+
+  const { pageId, kcContext }: KcPageStoryProps = $props();
+  const kcContextMock = getKcContextMock({ pageId, overrides: kcContext });
+</script>
+
+<KcPage kcContext={kcContextMock} />

package/src/bin/initialize-account-theme/boilerplate/KcPageStory.ts

@@ -0,0 +1,22 @@
+import { createGetKcContextMock } from 'keycloakify/account/KcContext';
+import type { DeepPartial } from 'keycloakify/tools/DeepPartial';
+import { kcEnvDefaults, themeNames } from '../kc.gen';
+import type { KcContext, KcContextExtension, KcContextExtensionPerPage } from './KcContext';
+
+const kcContextExtension: KcContextExtension = {
+  themeName: themeNames[0],
+  properties: {
+    ...kcEnvDefaults,
+  },
+};
+const kcContextExtensionPerPage: KcContextExtensionPerPage = {};
+
+export const { getKcContextMock } = createGetKcContextMock({
+  kcContextExtension,
+  kcContextExtensionPerPage,
+  overrides: {},
+  overridesPerPage: {},
+});
+
+type PageId = KcContext['pageId'];
+export type KcPageStoryProps = { pageId: PageId; kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> };

package/src/bin/initialize-account-theme/boilerplate/i18n.ts

@@ -0,0 +1,9 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { i18nBuilder } from '@keycloakify/svelte/account';
+import type { ThemeName } from '../kc.gen';
+
+/** @see: https://docs.keycloakify.dev/features/i18n */
+const { useI18n, ofTypeI18n } = i18nBuilder.withThemeName<ThemeName>().build();
+
+type I18n = typeof ofTypeI18n;
+export { useI18n, type I18n };

package/src/bin/initialize-account-theme/index.ts

@@ -0,0 +1 @@
+export * from './initialize-account-theme';

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

@@ -0,0 +1,87 @@
+import chalk from 'chalk';
+import child_process from 'child_process';
+import * as fs from 'fs';
+import { join as pathJoin, relative as pathRelative } from 'path';
+import type { BuildContext } from '../core';
+import { getThisCodebaseRootDirPath } from '../tools/getThisCodebaseRootDirPath';
+import { command as updateKcGenCommand } from '../update-kc-gen';
+import { updateAccountThemeImplementationInConfig } from './updateAccountThemeImplementationInConfig';
+
+export async function command(params: { buildContext: BuildContext }) {
+  const { buildContext } = params;
+
+  const accountThemeSrcDirPath = pathJoin(buildContext.themeSrcDirPath, 'account');
+
+  if (fs.existsSync(accountThemeSrcDirPath) && fs.readdirSync(accountThemeSrcDirPath).length > 0) {
+    console.warn(
+      chalk.red(
+        `There is already a ${pathRelative(
+          process.cwd(),
+          accountThemeSrcDirPath,
+        )} directory in your project. Aborting.`,
+      ),
+    );
+
+    process.exit(-1);
+  }
+
+  exit_if_uncommitted_changes: {
+    let hasUncommittedChanges: boolean | undefined = undefined;
+
+    try {
+      hasUncommittedChanges =
+        child_process
+          .execSync(`git status --porcelain`, {
+            cwd: buildContext.projectDirPath,
+          })
+          .toString()
+          .trim() !== '';
+    } catch {
+      // Probably not a git repository
+      break exit_if_uncommitted_changes;
+    }
+
+    if (!hasUncommittedChanges) {
+      break exit_if_uncommitted_changes;
+    }
+    console.warn(
+      [
+        chalk.red('Please commit or stash your changes before running this command.\n'),
+        "This command will modify your project's files so it's better to have a clean working directory",
+        'so that you can easily see what has been changed and revert if needed.',
+      ].join(' '),
+    );
+
+    process.exit(-1);
+  }
+
+  const accountThemeType = 'Multi-Page';
+
+  fs.cpSync(
+    pathJoin(getThisCodebaseRootDirPath(), 'src', 'bin', 'initialize-account-theme', 'boilerplate'),
+    accountThemeSrcDirPath,
+    { recursive: true },
+  );
+
+  updateAccountThemeImplementationInConfig({ buildContext, accountThemeType });
+
+  updateKcGenCommand({
+    buildContext: {
+      ...buildContext,
+      implementedThemeTypes: {
+        ...buildContext.implementedThemeTypes,
+        account: {
+          isImplemented: true,
+          type: accountThemeType,
+        },
+      },
+    },
+  });
+
+  console.log(
+    [
+      chalk.green(`The ${accountThemeType} account theme has been initialized.`),
+      `Directory created: ${chalk.bold(pathRelative(process.cwd(), accountThemeSrcDirPath))}`,
+    ].join('\n'),
+  );
+}

package/src/bin/initialize-account-theme/updateAccountThemeImplementationInConfig.ts

@@ -0,0 +1,93 @@
+import chalk from 'chalk';
+import * as fs from 'fs';
+import { join as pathJoin } from 'path';
+import { assert, type Equals } from 'tsafe/assert';
+import { id } from 'tsafe/id';
+import { is } from 'tsafe/is';
+import { z } from 'zod';
+import type { BuildContext } from '../core';
+
+export type BuildContextLike = {
+  bundler: BuildContext['bundler'];
+  projectDirPath: string;
+  packageJsonFilePath: string;
+};
+
+assert<BuildContext extends BuildContextLike ? true : false>();
+
+export function updateAccountThemeImplementationInConfig(params: {
+  buildContext: BuildContext;
+  accountThemeType: 'Multi-Page';
+}) {
+  const { buildContext, accountThemeType } = params;
+
+  switch (buildContext.bundler) {
+    case 'vite':
+      {
+        const viteConfigPath = pathJoin(buildContext.projectDirPath, 'vite.config.ts');
+
+        if (!fs.existsSync(viteConfigPath)) {
+          console.log(
+            chalk.bold(
+              `You must manually set the accountThemeImplementation to "${accountThemeType}" in your vite config`,
+            ),
+          );
+          break;
+        }
+
+        const viteConfigContent = fs.readFileSync(viteConfigPath).toString('utf8');
+
+        const modifiedViteConfigContent = viteConfigContent.replace(
+          /["']?accountThemeImplementation["']?\s*:\s*["']none["']/,
+          `accountThemeImplementation: '${accountThemeType}'`,
+        );
+
+        if (modifiedViteConfigContent === viteConfigContent) {
+          console.log(
+            chalk.yellow(
+              `You must manually set the accountThemeImplementation to "${accountThemeType}" in your vite.config.ts`,
+            ),
+          );
+          break;
+        }
+
+        fs.writeFileSync(viteConfigPath, modifiedViteConfigContent);
+      }
+      break;
+    case 'webpack':
+      {
+        const parsedPackageJson = (() => {
+          type ParsedPackageJson = {
+            keycloakify: Record<string, unknown>;
+          };
+
+          const zParsedPackageJson = (() => {
+            type TargetType = ParsedPackageJson;
+
+            const zTargetType = z.object({
+              keycloakify: z.record(z.unknown()),
+            });
+
+            assert<Equals<z.infer<typeof zTargetType>, TargetType>>();
+
+            return id<z.ZodType<TargetType>>(zTargetType);
+          })();
+
+          const parsedPackageJson = JSON.parse(fs.readFileSync(buildContext.packageJsonFilePath).toString('utf8'));
+
+          zParsedPackageJson.parse(parsedPackageJson);
+          assert(is<ParsedPackageJson>(parsedPackageJson));
+
+          return parsedPackageJson;
+        })();
+
+        parsedPackageJson.keycloakify.accountThemeImplementation = accountThemeType;
+
+        fs.writeFileSync(
+          buildContext.packageJsonFilePath,
+          Buffer.from(JSON.stringify(parsedPackageJson, undefined, 4), 'utf8'),
+        );
+      }
+      break;
+  }
+}

package/src/bin/main.ts

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+import chalk from 'chalk';
+import { NOT_IMPLEMENTED_EXIT_CODE, readParams } from './core';
+
+const { buildContext, commandName } = readParams({ apiVersion: 'v1' });
+
+(async () => {
+  switch (commandName) {
+    case 'add-story':
+      {
+        const { command } = await import('./add-story');
+        command({ buildContext });
+      }
+      return;
+    case 'eject-page':
+      {
+        const { command } = await import('./eject-page');
+        command({ buildContext });
+      }
+      return;
+    case 'update-kc-gen':
+      {
+        const { command } = await import('./update-kc-gen');
+        command({ buildContext });
+      }
+      return;
+    case 'initialize-account-theme':
+      {
+        const { command } = await import('./initialize-account-theme');
+        command({ buildContext });
+      }
+      return;
+    case 'initialize-admin-theme':
+      {
+        console.log(chalk.red('Cannot create an admin theme when using Svelte.'));
+        process.exit(1);
+      }
+      return;
+    default:
+      process.exit(NOT_IMPLEMENTED_EXIT_CODE);
+  }
+})();