@keycloakify/angular 0.0.10 → 0.1.0

package/login/pages/logout-confirm/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/pages/logout-confirm" />
-export * from './public-api';
+export * from './logout-confirm.component';

package/login/pages/register/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/pages/register" />
-export * from './public-api';
+export * from './register.component';

package/login/pages/saml-post-form/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/pages/saml-post-form" />
-export * from './public-api';
+export * from './saml-post-form.component';

package/login/pages/select-authenticator/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/pages/select-authenticator" />
-export * from './public-api';
+export * from './select-authenticator.component';

package/login/pages/terms/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/pages/terms" />
-export * from './public-api';
+export * from './terms.component';

package/login/pages/update-email/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/pages/update-email" />
-export * from './public-api';
+export * from './update-email.component';

package/login/pages/webauthn-authenticate/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/pages/webauthn-authenticate" />
-export * from './public-api';
+export * from './webauthn-authenticate.component';

package/login/pages/webauthn-error/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/pages/webauthn-error" />
-export * from './public-api';
+export * from './webauthn-error.component';

package/login/pages/webauthn-register/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/pages/webauthn-register" />
-export * from './public-api';
+export * from './webauthn-register.component';

package/login/providers/keycloakify-angular/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/providers/keycloakify-angular" />
-export * from './public-api';
+export * from './keycloakify-angular.providers';

package/login/services/i18n/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/services/i18n" />
-export * from './public-api';
+export * from './i18n.service';

package/login/services/login-resource-injector/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/services/login-resource-injector" />
-export * from './public-api';
+export * from './login-resource-injector.service';

package/login/services/user-profile-form/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/services/user-profile-form" />
-export * from './public-api';
+export * from './user-profile-form.service';

package/login/{containers/template → template}/template.component.d.ts

@@ -1,4 +1,4 @@
-import { Renderer2, type Signal, type TemplateRef, type Type } from '@angular/core';
+import { Renderer2, type Signal, type TemplateRef, type Type, ViewContainerRef } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
 import { ComponentReference } from '@keycloakify/angular/login/classes/component-reference';
 import type { I18n } from '@keycloakify/angular/login/i18n';
@@ -7,15 +7,6 @@ import { LoginResourceInjectorService } from '@keycloakify/angular/login/service
 import { type ClassKey } from 'keycloakify/login/lib/kcClsx';
 import type { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
-export declare class DynamicPageInjectorComponent {
-    #private;
-    page: import("@angular/core").InputSignal<Type<unknown> | undefined>;
-    userProfileFormFields: import("@angular/core").InputSignal<Type<unknown> | undefined>;
-    componentCreated: import("@angular/core").OutputEmitterRef<object>;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<DynamicPageInjectorComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<DynamicPageInjectorComponent, "kc-dynamic-page-injector", never, { "page": { "alias": "page"; "required": false; "isSignal": true; }; "userProfileFormFields": { "alias": "userProfileFormFields"; "required": false; "isSignal": true; }; }, { "componentCreated": "componentCreated"; }, never, never, true, never>;
-}
 export declare class TemplateComponent extends ComponentReference {
     #private;
     i18n: I18n;
@@ -33,6 +24,7 @@ export declare class TemplateComponent extends ComponentReference {
     bodyClassName: string | undefined;
     isReadyToRender$: Observable<boolean>;
     page: import("@angular/core").InputSignal<Type<unknown> | undefined>;
+    pageRef: Signal<ViewContainerRef | undefined>;
     userProfileFormFields: import("@angular/core").InputSignal<Type<unknown> | undefined>;
     headerNode: Signal<TemplateRef<HTMLElement>> | undefined;
     infoNode: Signal<TemplateRef<HTMLElement>> | undefined;

package/login/tokens/classes/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/tokens/classes" />
-export * from './public-api';
+export * from './classes.token';

package/login/tokens/i18n/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/tokens/i18n" />
-export * from './public-api';
+export * from './i18n.token';

package/login/tokens/kc-context/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/tokens/kc-context" />
-export * from './public-api';
+export * from './kc-context.token';

package/login/tokens/make-user-confirm-password/index.d.ts

@@ -1,5 +1 @@
-/**
- * Generated bundle index. Do not edit.
- */
-/// <amd-module name="@keycloakify/angular/login/tokens/make-user-confirm-password" />
-export * from './public-api';
+export * from './make-user-confirm-password.token';

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@keycloakify/angular",
-  "version": "0.0.10",
+  "version": "0.1.0",
   "peerDependencies": {
-    "keycloakify": "^11.3.12",
+    "keycloakify": "^11.3.16",
     "@angular/core": "^18.0.0",
     "@angular/common": "^18.0.0",
     "@angular/platform-browser": "^18.0.0"
   },
   "dependencies": {
-    "tsafe": "^1.7.5",
+    "tsafe": "^1.8.1",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
@@ -63,6 +63,12 @@
       "esm": "./esm2022/account/i18n/keycloakify-angular-account-i18n.mjs",
       "default": "./fesm2022/keycloakify-angular-account-i18n.mjs"
     },
+    "./account/template": {
+      "types": "./account/template/index.d.ts",
+      "esm2022": "./esm2022/account/template/keycloakify-angular-account-template.mjs",
+      "esm": "./esm2022/account/template/keycloakify-angular-account-template.mjs",
+      "default": "./fesm2022/keycloakify-angular-account-template.mjs"
+    },
     "./login/KcContext": {
       "types": "./login/KcContext/index.d.ts",
       "esm2022": "./esm2022/login/KcContext/keycloakify-angular-login-KcContext.mjs",
@@ -75,18 +81,18 @@
       "esm": "./esm2022/login/i18n/keycloakify-angular-login-i18n.mjs",
       "default": "./fesm2022/keycloakify-angular-login-i18n.mjs"
     },
+    "./login/template": {
+      "types": "./login/template/index.d.ts",
+      "esm2022": "./esm2022/login/template/keycloakify-angular-login-template.mjs",
+      "esm": "./esm2022/login/template/keycloakify-angular-login-template.mjs",
+      "default": "./fesm2022/keycloakify-angular-login-template.mjs"
+    },
     "./account/classes/component-reference": {
       "types": "./account/classes/component-reference/index.d.ts",
       "esm2022": "./esm2022/account/classes/component-reference/keycloakify-angular-account-classes-component-reference.mjs",
       "esm": "./esm2022/account/classes/component-reference/keycloakify-angular-account-classes-component-reference.mjs",
       "default": "./fesm2022/keycloakify-angular-account-classes-component-reference.mjs"
     },
-    "./account/containers/template": {
-      "types": "./account/containers/template/index.d.ts",
-      "esm2022": "./esm2022/account/containers/template/keycloakify-angular-account-containers-template.mjs",
-      "esm": "./esm2022/account/containers/template/keycloakify-angular-account-containers-template.mjs",
-      "default": "./fesm2022/keycloakify-angular-account-containers-template.mjs"
-    },
     "./account/directives/kc-class": {
       "types": "./account/directives/kc-class/index.d.ts",
       "esm2022": "./esm2022/account/directives/kc-class/keycloakify-angular-account-directives-kc-class.mjs",
@@ -297,24 +303,12 @@
       "esm": "./esm2022/login/components/user-profile-form-fields/keycloakify-angular-login-components-user-profile-form-fields.mjs",
       "default": "./fesm2022/keycloakify-angular-login-components-user-profile-form-fields.mjs"
     },
-    "./login/containers/template": {
-      "types": "./login/containers/template/index.d.ts",
-      "esm2022": "./esm2022/login/containers/template/keycloakify-angular-login-containers-template.mjs",
-      "esm": "./esm2022/login/containers/template/keycloakify-angular-login-containers-template.mjs",
-      "default": "./fesm2022/keycloakify-angular-login-containers-template.mjs"
-    },
     "./login/directives/kc-class": {
       "types": "./login/directives/kc-class/index.d.ts",
       "esm2022": "./esm2022/login/directives/kc-class/keycloakify-angular-login-directives-kc-class.mjs",
       "esm": "./esm2022/login/directives/kc-class/keycloakify-angular-login-directives-kc-class.mjs",
       "default": "./fesm2022/keycloakify-angular-login-directives-kc-class.mjs"
     },
-    "./login/providers/keycloakify-angular": {
-      "types": "./login/providers/keycloakify-angular/index.d.ts",
-      "esm2022": "./esm2022/login/providers/keycloakify-angular/keycloakify-angular-login-providers-keycloakify-angular.mjs",
-      "esm": "./esm2022/login/providers/keycloakify-angular/keycloakify-angular-login-providers-keycloakify-angular.mjs",
-      "default": "./fesm2022/keycloakify-angular-login-providers-keycloakify-angular.mjs"
-    },
     "./login/pages/code": {
       "types": "./login/pages/code/index.d.ts",
       "esm2022": "./esm2022/login/pages/code/keycloakify-angular-login-pages-code.mjs",
@@ -531,6 +525,12 @@
       "esm": "./esm2022/login/pages/webauthn-register/keycloakify-angular-login-pages-webauthn-register.mjs",
       "default": "./fesm2022/keycloakify-angular-login-pages-webauthn-register.mjs"
     },
+    "./login/providers/keycloakify-angular": {
+      "types": "./login/providers/keycloakify-angular/index.d.ts",
+      "esm2022": "./esm2022/login/providers/keycloakify-angular/keycloakify-angular-login-providers-keycloakify-angular.mjs",
+      "esm": "./esm2022/login/providers/keycloakify-angular/keycloakify-angular-login-providers-keycloakify-angular.mjs",
+      "default": "./fesm2022/keycloakify-angular-login-providers-keycloakify-angular.mjs"
+    },
     "./login/services/i18n": {
       "types": "./login/services/i18n/index.d.ts",
       "esm2022": "./esm2022/login/services/i18n/keycloakify-angular-login-services-i18n.mjs",

package/src/account/{containers/template → template}/template.component.html

@@ -118,13 +118,8 @@
                     ></span>
                 </div>
             }
-            @let pageRef = page();
-            @if (!!pageRef) {
-                <kc-dynamic-page-injector
-                    [page]="pageRef"
-                    (componentCreated)="onComponentCreated($event)"
-                />
-            }
+            <!-- Content -->
+            <ng-template #pageRef></ng-template>
         </div>
     </div>
 }

package/src/account/{containers/template → template}/template.component.ts

@@ -4,6 +4,7 @@ import {
     ChangeDetectorRef,
     Component,
     effect,
+    EffectRef,
     forwardRef,
     inject,
     input,
@@ -11,6 +12,7 @@ import {
     output,
     Renderer2,
     Type,
+    viewChild,
     ViewContainerRef
 } from '@angular/core';
 import { Meta, Title } from '@angular/platform-browser';
@@ -26,35 +28,14 @@ import { KcSanitizePipe } from '@keycloakify/angular/lib/pipes/kc-sanitize';
 import { USE_DEFAULT_CSS } from '@keycloakify/angular/lib/tokens/use-default-css';
 import { ClassKey, getKcClsx } from 'keycloakify/account/lib/kcClsx';
 import { Observable } from 'rxjs';
-type ActiveType = 'account' | 'password' | 'totp' | 'social' | 'sessions' | 'applications' | 'log' | 'authorization' | undefined;
 
-@Component({
-    selector: 'kc-dynamic-page-injector',
-    standalone: true,
-    template: ``
-})
-export class DynamicPageInjectorComponent {
-    page = input<Type<unknown>>();
-    componentCreated = output<object>();
-    #vcr = inject<ViewContainerRef>(ViewContainerRef);
-    constructor() {
-        effect(
-            () => {
-                const page = this.page();
-                if (!page) return;
-                const compRef = this.#vcr.createComponent(page);
-                this.componentCreated.emit(compRef.instance as object);
-            },
-            { allowSignalWrites: true }
-        );
-    }
-}
+type ActiveType = 'account' | 'password' | 'totp' | 'social' | 'sessions' | 'applications' | 'log' | 'authorization' | undefined;
 
 @Component({
     selector: 'kc-root',
     templateUrl: 'template.component.html',
     standalone: true,
-    imports: [AsyncPipe, KcSanitizePipe, NgTemplateOutlet, KcClassDirective, NgClass, DynamicPageInjectorComponent],
+    imports: [AsyncPipe, KcSanitizePipe, KcClassDirective, NgClass],
     changeDetection: ChangeDetectionStrategy.OnPush,
     providers: [
         {
@@ -67,6 +48,7 @@ export class TemplateComponent extends ComponentReference {
     i18n = inject<I18n>(ACCOUNT_I18N);
     renderer = inject(Renderer2);
     #cdr = inject(ChangeDetectorRef);
+    #effectRef: EffectRef;
     meta = inject(Meta);
     title = inject(Title);
     kcContext = inject<KcContext>(KC_ACCOUNT_CONTEXT);
@@ -77,6 +59,7 @@ export class TemplateComponent extends ComponentReference {
     isReadyToRender$: Observable<boolean>;
 
     page = input<Type<unknown>>();
+    pageRef = viewChild('pageRef', { read: ViewContainerRef });
 
     active: ActiveType;
 
@@ -84,6 +67,17 @@ export class TemplateComponent extends ComponentReference {
         super();
 
         this.isReadyToRender$ = this.accountResourceInjectorService.injectResource(this.doUseDefaultCss);
+        this.#effectRef = effect(
+            () => {
+                const page = this.page();
+                const pageRef = this.pageRef();
+                if (!page || !pageRef) return;
+
+                const compRef = pageRef.createComponent(page);
+                this.onComponentCreated(compRef.instance as object);
+            },
+            { manualCleanup: true }
+        );
     }
 
     private applyKcIndexClasses() {
@@ -112,5 +106,6 @@ export class TemplateComponent extends ComponentReference {
         this.title.setTitle(this.i18n.msgStr('accountManagementTitle'));
         this.applyKcIndexClasses();
         this.#cdr.markForCheck();
+        this.#effectRef.destroy();
     }
 }

package/src/bin/add-story.ts

@@ -0,0 +1,126 @@
+import { getThisCodebaseRootDirPath } from './tools/getThisCodebaseRootDirPath';
+import cliSelect from 'cli-select';
+import * as fs from 'fs';
+import { join as pathJoin, relative as pathRelative, dirname as pathDirname } from 'path';
+import { assert, Equals } from 'tsafe/assert';
+import chalk from 'chalk';
+import { runPrettier, getIsPrettierAvailable } from './tools/runPrettier';
+import {
+    type BuildContext,
+    LOGIN_THEME_PAGE_IDS,
+    ACCOUNT_THEME_PAGE_IDS,
+    type LoginThemePageId,
+    type AccountThemePageId,
+    THEME_TYPES
+} from './core';
+
+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;
+            }
+            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];
+            }
+            assert<Equals<typeof themeType, never>>(false);
+        })()
+    }).catch(() => {
+        process.exit(-1);
+    });
+
+    console.log(`→ ${pageId}`);
+
+    const componentBasename = pageId.replace(/ftl$/, 'stories.ts');
+
+    const targetFilePath = pathJoin(
+        buildContext.themeSrcDirPath,
+        themeType,
+        'pages',
+        pageId.replace(/\.ftl$/, ''),
+        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')
+        .replace(/["']\.\.\/KcPageStory["']/, "'../../KcPageStory'");
+
+    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('npm run storybook')}`
+        ].join('\n')
+    );
+}

package/src/bin/eject-page.ts

@@ -21,11 +21,11 @@ import {
 } from 'path';
 import { assert, Equals } from 'tsafe/assert';
 import chalk from 'chalk';
-import { transformCodebase } from './tools/transformCodebase';
+import { transformCodebase } from './tools/transformCodebase_async';
 import { kebabCaseToCamelCase } from './tools/kebabCaseToSnakeCase';
 import { replaceAll } from './tools/String.prototype.replaceAll';
 import { capitalize } from 'tsafe/capitalize';
-import { runFormat } from './tools/runFormat';
+import { getIsPrettierAvailable, runPrettier } from './tools/runPrettier';
 
 export async function command(params: { buildContext: BuildContext }) {
     const { buildContext } = params;
@@ -100,7 +100,7 @@ export async function command(params: { buildContext: BuildContext }) {
 
     const componentDirRelativeToThemeTypePath = (() => {
         if (pageIdOrComponent === templateValue) {
-            return pathJoin('containers', 'template');
+            return pathJoin('template');
         }
 
         if (pageIdOrComponent === userProfileFormFieldsValue) {
@@ -149,15 +149,33 @@ export async function command(params: { buildContext: BuildContext }) {
                 themeType
             );
 
-            transformCodebase({
+            await transformCodebase({
                 srcDirPath: pathJoin(
                     localThemeTypeDirPath,
                     componentDirRelativeToThemeTypePath_i
                 ),
                 destDirPath,
-                transformSourceCode: ({ filePath, sourceCode }) => {
+                transformSourceCode: async ({ filePath, sourceCode }) => {
                     if (!filePath.endsWith('.ts')) {
-                        return { modifiedSourceCode: sourceCode };
+                        let modifiedSourceCode_str = sourceCode.toString('utf8');
+
+                        run_prettier: {
+                            if (!(await getIsPrettierAvailable())) {
+                                break run_prettier;
+                            }
+
+                            modifiedSourceCode_str = await runPrettier({
+                                filePath,
+                                sourceCode: modifiedSourceCode_str
+                            });
+                        }
+
+                        return {
+                            modifiedSourceCode: Buffer.from(
+                                modifiedSourceCode_str,
+                                'utf8'
+                            )
+                        };
                     }
 
                     if (filePath.endsWith('index.ts')) {
@@ -229,6 +247,17 @@ export async function command(params: { buildContext: BuildContext }) {
                         }
                     );
 
+                    run_prettier: {
+                        if (!(await getIsPrettierAvailable())) {
+                            break run_prettier;
+                        }
+
+                        modifiedSourceCode_str = await runPrettier({
+                            filePath,
+                            sourceCode: modifiedSourceCode_str
+                        });
+                    }
+
                     return {
                         modifiedSourceCode: Buffer.from(modifiedSourceCode_str, 'utf8')
                     };
@@ -243,10 +272,6 @@ export async function command(params: { buildContext: BuildContext }) {
         }
     }
 
-    runFormat({
-        packageJsonFilePath: buildContext.packageJsonFilePath
-    });
-
     edit_KcPage: {
         if (
             pageIdOrComponent !== templateValue &&
@@ -263,17 +288,30 @@ export async function command(params: { buildContext: BuildContext }) {
 
         const kcAppTsCode = fs.readFileSync(kcAppTsFilePath).toString('utf8');
 
-        const modifiedKcAppTsCode = (() => {
+        const modifiedKcAppTsCode = await (async () => {
             const componentRelativeDirPath_posix = componentDirRelativeToThemeTypePath
                 .split(pathSep)
                 .join('/');
 
-            return kcAppTsCode.replace(
+            let sourceCode = kcAppTsCode.replace(
                 `@keycloakify/angular/${themeType}/${componentRelativeDirPath_posix}`,
                 componentRelativeDirPath_posix_to_componentRelativeFilePath_posix({
                     componentRelativeDirPath_posix: `./${componentRelativeDirPath_posix}`
                 })
             );
+
+            run_prettier: {
+                if (!(await getIsPrettierAvailable())) {
+                    break run_prettier;
+                }
+
+                sourceCode = await runPrettier({
+                    filePath: kcAppTsFilePath,
+                    sourceCode
+                });
+            }
+
+            return sourceCode;
         })();
 
         if (modifiedKcAppTsCode === kcAppTsCode) {

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

@@ -1,5 +1,5 @@
 import { getDefaultPageComponent, type KcPage } from '@keycloakify/angular/account';
-import { TemplateComponent } from '@keycloakify/angular/account/containers/template';
+import { TemplateComponent } from '@keycloakify/angular/account/template';
 import type { ClassKey } from 'keycloakify/account';
 import type { KcContext } from './KcContext';
 

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

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

package/src/bin/main.ts

@@ -8,10 +8,8 @@ const { buildContext, commandName } = readParams({ apiVersion: 'v1' });
     switch (commandName) {
         case 'add-story':
             {
-                console.log(
-                    "Not yet supported by @keycloakify/angular, we're working on it!"
-                );
-                process.exit(-1);
+                const { command } = await import('./add-story');
+                command({ buildContext });
             }
             return;
         case 'eject-page':