Setup a very basic storybook

src/keycloak-theme/account/createPageStory.tsx

@@ -0,0 +1,24 @@
+import { getKcContext, type KcContext } from "./kcContext";
+import KcApp from "./KcApp";
+import type { DeepPartial } from "keycloakify/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,
+            storyParams: params.kcContext
+        });
+
+        return <KcApp kcContext={kcContext} />;
+
+    }
+
+    return { PageStory };
+
+}

src/keycloak-theme/account/kcContext.ts

@@ -1,17 +1,20 @@
-import { getKcContext } from "keycloakify/account";
+import { createGetKcContext } from "keycloakify/account";
 
 export type KcContextExtension =
 	| { pageId: "my-extra-page-1.ftl"; }
 	| { pageId: "my-extra-page-2.ftl"; someCustomValue: string; };
 
-export const { kcContext } = getKcContext<KcContextExtension>({
-	//mockPageId: "password.ftl",
+export const { getKcContext } = createGetKcContext<KcContextExtension>({
 	mockData: [
 		{
-			pageId: "my-extra-page-2.ftl", 
+			pageId: "my-extra-page-2.ftl",
 			someCustomValue: "foo bar"
 		}
 	]
 });
 
-export type KcContext = NonNullable<typeof kcContext>;
+export const { kcContext } = getKcContext({
+	//mockPageId: "password.ftl",
+});
+
+export type KcContext = NonNullable<typeof kcContext>;

src/keycloak-theme/account/pages/Password.stories.tsx

@@ -0,0 +1,14 @@
+
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { createPageStory } from "../createPageStory";
+
+const { PageStory } = createPageStory({
+    pageId: "password.ftl"
+});
+
+export default {
+    title: "account/Password",
+    component: PageStory,
+} as ComponentMeta<typeof PageStory>;
+
+export const Default: ComponentStory<typeof PageStory> = () => <PageStory />;