Add account/account.ftl to storybook

stories/account/KcApp.tsx

@@ -0,0 +1,27 @@
+import React, { lazy, Suspense } from "react";
+import Fallback from "../../dist/account";
+import type { KcContext } from "./kcContext";
+import { useI18n } from "./i18n";
+
+const DefaultTemplate = lazy(() => import("../../dist/account/Template"));
+
+export default function KcApp(props: { kcContext: KcContext }) {
+    const { kcContext } = props;
+
+    const i18n = useI18n({ kcContext });
+
+    if (i18n === null) {
+        return null;
+    }
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    default:
+                        return <Fallback {...{ kcContext, i18n }} Template={DefaultTemplate} doUseDefaultCss={true} />;
+                }
+            })()}
+        </Suspense>
+    );
+}

stories/account/createPageStory.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { getKcContext, type KcContext } from "./kcContext";
+import KcApp from "./KcApp";
+import type { DeepPartial } from "../../dist/tools/DeepPartial";
+
+export function createPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
+    const { pageId } = params;
+
+    function PageStory(params: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+        const { kcContext } = getKcContext({
+            mockPageId: pageId,
+            storyPartialKcContext: params.kcContext
+        });
+
+        return <KcApp kcContext={kcContext} />;
+    }
+
+    return { PageStory };
+}

stories/account/i18n.ts

@@ -0,0 +1,5 @@
+import { createUseI18n } from "../../dist/account";
+
+export const { useI18n } = createUseI18n({});
+
+export type I18n = NonNullable<ReturnType<typeof useI18n>>;

stories/account/kcContext.ts

@@ -0,0 +1,7 @@
+import { createGetKcContext } from "../../dist/account";
+
+export const { getKcContext } = createGetKcContext();
+
+const { kcContext } = getKcContext();
+
+export type KcContext = NonNullable<typeof kcContext>;

stories/account/pages/Account.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import type { ComponentMeta } from "@storybook/react";
+import { createPageStory } from "../createPageStory";
+
+const pageId = "account.ftl";
+
+const { PageStory } = createPageStory({ pageId });
+
+const meta: ComponentMeta<any> = {
+    title: `account/${pageId}`,
+    component: PageStory,
+    parameters: {
+        viewMode: "story",
+        previewTabs: {
+            "storybook/docs/panel": {
+                hidden: true
+            }
+        }
+    }
+};
+
+export default meta;
+
+export const Default = () => <PageStory />;

stories/login/pages/Error.stories.tsx

@@ -7,13 +7,13 @@ const pageId = "error.ftl";
 const { PageStory } = createPageStory({ pageId });
 
 const meta: ComponentMeta<any> = {
-    "title": `login/${pageId}`,
+    title: `login/${pageId}`,
-    "component": PageStory,
+    component: PageStory,
-    "parameters": {
+    parameters: {
-        "viewMode": "story",
+        viewMode: "story",
-        "previewTabs": {
+        previewTabs: {
             "storybook/docs/panel": {
-                "hidden": true
+                hidden: true
             }
         }
     }
@@ -23,4 +23,10 @@ export default meta;
 
 export const Default = () => <PageStory />;
 
-export const WithAnotherMessage = () => <PageStory kcContext={{ "message": { "summary": "With another error message" } }} />;
+export const WithAnotherMessage = () => (
+    <PageStory
+        kcContext={{
+            message: { summary: "With another error message" }
+        }}
+    />
+);

stories/login/pages/Login.stories.tsx

@@ -7,11 +7,11 @@ const pageId = "login.ftl";
 const { PageStory } = createPageStory({ pageId });
 
 const meta: ComponentMeta<any> = {
-    "title": `login/${pageId}`,
+    title: `login/${pageId}`,
-    "component": PageStory,
+    component: PageStory,
-    "parameters": {
+    parameters: {
-        "viewMode": "story",
+        viewMode: "story",
-        "previewTabs": {
+        previewTabs: {
             "storybook/docs/panel": {
                 "hidden": true
             }