More homogeneous storybook setup

stories/account/pages/Account.stories.tsx

@@ -1,15 +1,17 @@
 import React from "react";
-import { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../createPageStory";
+import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "account.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
 const meta = {
-    title: "account/Account",
+    title: `account/${pageId}`,
-    component: PageStory
+    component: PageStory,
+    parameters
 } satisfies Meta<typeof PageStory>;
+
 export default meta;
 
 type Story = StoryObj<typeof meta>;

stories/account/pages/Authenticator.stories.tsx

@@ -1,173 +0,0 @@
-import React from "react";
-import { Meta } from "@storybook/react";
-import { createPageStory } from "../createPageStory";
-
-const { PageStory } = createPageStory({
-    pageId: "totp.ftl"
-});
-
-const meta = {
-    title: "account/Authenticator",
-    component: PageStory
-} satisfies Meta<typeof PageStory>;
-export default meta;
-
-export const Default = () => (
-    <PageStory
-        kcContext={{
-            totp: {
-                enabled: false,
-                totpSecretEncoded: "HE4W MSTC OBKU CY2M ONXF OV3Q NYYU I3SH",
-                totpSecret: "99fJbpUAcLsnWWpn1DnG",
-                manualUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=manual",
-                totpSecretQrCode:
-                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACk0lEQVR4Xu2YQY6DMAxFjViw5AjcBC6GBBIXozfJEbpkger53wEKqOpmFvaikQYNeVRyHPvbiejXscp95jp+/D5zHT9+n7kO8qeIFDqKzjJo9dC1wUSPP7yG4IPq41lq9ZK+keLZSwXDGwMhOCZgdX4sBVD1qld+GYg/h6ScreBuIDo5FKfVM7Z8aWs9PB2E2/73DdOlwUrK9Ck+HDnzB7ziR8fjlD/OPI8pVQwCi899TkNw2M+tp9XSLFKPIq2UySIhBB906fCQTicFwiv1EUG6+d+bl4zPIYnUk5oIcS69/evPYStUp6P0dJhD/mhauijcth76mOsfw+GFrbfXKJx7LW2N15kijuWIMCYicLQOCEimDp1c0L8PzCLTs3/d+ZQLyl6VqeSIT9nz25szf2ZybHgC31yrXEQIbqaPjX0k9GqWy0N/nLkagsHWNXR0LZwsR357c0pjC6fm+meu5f6f6oszz/qj7GpYCdHf0LVH/gTgtJ/5bVavPJ9svwnBS9qaqwoHOh3G7Ln++HIIDgpKYpFW00dlkX7ruz836THBWQpzd23/xeDsFVroz15fRjsfMyaC8JX2Y8PZf+VIoKff+uTO6WSIUIfSkrl9/rbfnbPr30R8hnMtXA/98ea5lx4ZlSMgQlMsEnb73XnP+yNl/SuR3/lzTSZHMTirMpMcXjWr0U5Mp/rnzmk/TsXkC2/iKEJ5TRG4DZ5KrP/C0RiVmkp+5I8zN1uh2vv9Vs+bzJ4947Y+bz6wl6ZIcv87ZaU2+6PwnoKdb7VYmrf9Z02MxCmNdmparbVJtrA4nA+e9LgIS6dzfvly7j+4XWIuPJp8iE9PbvkzJHYNabt/o5MP+535t/Hj95nr+PH7zHX8m/8B+RAnloz5pi4AAAAASUVORK5CYII=",
-                policy: {
-                    type: "totp"
-                },
-                qrUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=qr",
-                otpCredentials: []
-            },
-            messagesPerField: {},
-            stateChecker: "ihTeSAMfNsobnPjYiktV8DY-5T4sVzVdrEZRdwfMm8Y",
-            realm: {
-                userManagedAccessAllowed: true,
-                internationalizationEnabled: false
-            },
-            url: {
-                totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
-            },
-            keycloakifyVersion: "9.6.1",
-            themeVersion: "1.0.10",
-            themeType: "account",
-            themeName: "keycloakify",
-            pageId: "totp.ftl"
-        }}
-    />
-);
-
-export const WithTotpEnabled = () => (
-    <PageStory
-        kcContext={{
-            totp: {
-                enabled: true,
-                totpSecretEncoded: "G55E MZKC JFUD MQLT MFIF EVSB JFLG M6SO",
-                totpSecret: "7zFeBIh6AsaPRVAIVfzN",
-                manualUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=manual",
-                supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
-                totpSecretQrCode:
-                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACo0lEQVR4Xu2YPY6DMBCFJ6JwyRF8k+RiSCBxsXATjkDpAmX2vTGBwErbbDFTZIps4s8rmfl9RvRPW+W6crYvv66c7cuvK2cjX0Tkho9yW/q5PHSc5QYA62PwXnWqmzrRSUdNL+mygRC8kzQZWhqVO1CRds3YHopnfUkzp2c7ZAY+GIdXywOb0qsdJMXiFn9serYrncxNv/PDkdfUzObk/eNaX368mnl1kML8RH1vFoGzargA1DM/VeWhOpf9+by5iL5Q0NaEUETslHiSIz+dOc4q0tqBrcg7IsnpnZ8BeLmjqjFa4Fps4vlR3484nFHH6OP8o1cTc4I/Q3D4Uqw1TjpkeHqc2R/Rjvb89OUUDAL/CpycOf/o6fUjP505/phrOf8wn+tolsxyD8GZnzyrJSScrNyEcXhHJwrBh2yj2fShPlFB2PQxn935aK1HIB1G1nczm8+P+nbmC7si+zell53a4i97fnhz5Gddxc9iSgLPpPifGn9vDqN0YBL0lpozdx7nd+dDHSiFXkV+NlZO85Efzvzda8yrwkylvlEbhxE4bTJpiCEIkWNHbxD/w/++fJMOVX8p5Q70F0V2EI4LsUWd+ov6Wtgu5aM/OXNIf6jWbKq6zmekA77t88WZr5lXO6vvWaj6kbNo4nv/ceaon0TpYPqrmNJhue/x9+ZKLchbO+cLPrb+aI09BLeob1en2nqkKsUYfOvatSGa/ircmD7i78rNmJoYzXwIKh228z3+ztzef+Cb6S/lSxoWOXM2CO/ZuvlqARtLvX8u1Ie6+d+bd/X9pdS3lrrF/8jPCPytv9AVIbfvddxE4iNFLKL+hH/xCNudKgTvGX/r33ars/y062gQjljfWN8cyKm+f2NPOvqTL//Lvvy6crYvv66c7d/8B/9RFjk6Tp30AAAAAElFTkSuQmCC",
-                policy: {
-                    type: "totp",
-                    algorithm: "HmacSHA1"
-                },
-                qrUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=qr",
-                otpCredentials: [
-                    {
-                        id: "7afaaf7d-f2d5-44f5-a966-e5297f0b2b7a",
-                        userLabel: "mobile"
-                    }
-                ]
-            },
-            message: {
-                summary: "Mobile authenticator configured.",
-                type: "success"
-            },
-            url: {
-                totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
-            },
-            messagesPerField: {},
-            stateChecker: "0UvyCNJHRJXmdahtRmn0tTPCU2nwLtWBUfPaaX1qb4g",
-            realm: {
-                userManagedAccessAllowed: true,
-                internationalizationEnabled: false
-            },
-            keycloakifyVersion: "9.6.1",
-            themeVersion: "1.0.10",
-            themeType: "account",
-            themeName: "keycloakify",
-            pageId: "totp.ftl"
-        }}
-    />
-);
-
-export const WithManualMode = () => (
-    <PageStory
-        kcContext={{
-            mode: "manual",
-            totp: {
-                enabled: false,
-                totpSecretEncoded: "KZ5H CYTW GBVV ASDE JRXG MMCK HAZU E6TX",
-                totpSecret: "Vzqbv0kPHdLnf0J83Bzw",
-                manualUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=manual",
-                totpSecretQrCode:
-                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACpklEQVR4Xu2YQa6rMAxFXTFgyBLYSbsxJJC6sb6dZAkdMkDNv8cBStHTm/yBM2ikIpqTgePY1w6W/xyLnWc+x5efZz7Hl59nPgf8aWaXPFl+2ZhbzfWaGPTT3yr4mPPPs8nty4ZeKxfzRQ6q4IO1P8zq0c/iffvqtIlLTfw5psxsK3f7JirjTHDqWpQ3T9fC/fytn2956u32bNJv8RHIyZ/n0MvJh8cpvwJ5GffkQaBNYPo2auCyv30YVmtitm4yu1qT5mtXCR9svsqXeih1/I1IbZHLKniTskxPOvCGSB3Wud2/0Vz+5YH9uHZAvzORUAlXaXmY9FHxyZuWI0L5sfs3lkt1vDTbtVtM8bmovrCT26o/0bxozVAWIY3IuTLpsvk3mDNeRv9QqrJWEp+25Xc01/uMVudHpySiE3PXklN1cLSm8yCgKmuWICUIxip4vqM6Y+kalNX3hJNtz+9orgOXQ60noZPrd/H5u74E86I/pfXXm/obXPvOr2juVW8o9nsTS77T5Ix18CZ71sh+qQ7n3+LzY32J5WptXt291Bdaf8tcVw76Hcvpqr31R3CUOri7Q79r4ap61+5O12XoT1leOrFK+HZ/asga/sr0tz5F85wozWq4aMKcP1DK3f54Ttfv+a0iqG1wCU2H/iGWl156IionQYWmngTpan84H9aGy+8nl7I8J5ejOnjP0SNCC/0/lVpydKyPwZz7u/Xef80ouaRHHt7PP5j74BJFfBpJ3vLp460/wdxtxX5KM6XPMvktJ6/7i+YjvfRS/Gs3za3218LJH5qwzKKf7fzd3fXwEWmkf5WTKS3JN1YRTxKhiY9IC6mzUKmP/g3knL8cqoeUiKvJL/EZyT1/sJ/vg+X7G07e7Q/mf40vP898ji8/z3yO/+b/ANUwOXCzdQgqAAAAAElFTkSuQmCC",
-                policy: {
-                    type: "totp",
-                    algorithm: "HmacSHA1"
-                },
-                qrUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=qr",
-                otpCredentials: []
-            },
-            messagesPerField: {},
-            stateChecker: "HiBl2ADzLwKwQS813LOEig1Ymm4xpEu_NacYtWJIuHU",
-            realm: {
-                userManagedAccessAllowed: true,
-                internationalizationEnabled: false
-            },
-            url: {
-                totpUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=manual"
-            },
-            keycloakifyVersion: "9.6.1",
-            themeVersion: "1.0.10",
-            themeType: "account",
-            themeName: "keycloakify",
-            pageId: "totp.ftl"
-        }}
-    />
-);
-
-export const MoreThanOneTotpProviders = () => (
-    <PageStory
-        kcContext={{
-            totp: {
-                enabled: true,
-                totpSecretEncoded: "G55E MZKC JFUD MQLT MFIF EVSB JFLG M6SO",
-                totpSecret: "7zFeBIh6AsaPRVAIVfzN",
-                manualUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=manual",
-                supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
-                totpSecretQrCode:
-                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACo0lEQVR4Xu2YPY6DMBCFJ6JwyRF8k+RiSCBxsXATjkDpAmX2vTGBwErbbDFTZIps4s8rmfl9RvRPW+W6crYvv66c7cuvK2cjX0Tkho9yW/q5PHSc5QYA62PwXnWqmzrRSUdNL+mygRC8kzQZWhqVO1CRds3YHopnfUkzp2c7ZAY+GIdXywOb0qsdJMXiFn9serYrncxNv/PDkdfUzObk/eNaX368mnl1kML8RH1vFoGzargA1DM/VeWhOpf9+by5iL5Q0NaEUETslHiSIz+dOc4q0tqBrcg7IsnpnZ8BeLmjqjFa4Fps4vlR3484nFHH6OP8o1cTc4I/Q3D4Uqw1TjpkeHqc2R/Rjvb89OUUDAL/CpycOf/o6fUjP505/phrOf8wn+tolsxyD8GZnzyrJSScrNyEcXhHJwrBh2yj2fShPlFB2PQxn935aK1HIB1G1nczm8+P+nbmC7si+zell53a4i97fnhz5Gddxc9iSgLPpPifGn9vDqN0YBL0lpozdx7nd+dDHSiFXkV+NlZO85Efzvzda8yrwkylvlEbhxE4bTJpiCEIkWNHbxD/w/++fJMOVX8p5Q70F0V2EI4LsUWd+ov6Wtgu5aM/OXNIf6jWbKq6zmekA77t88WZr5lXO6vvWaj6kbNo4nv/ceaon0TpYPqrmNJhue/x9+ZKLchbO+cLPrb+aI09BLeob1en2nqkKsUYfOvatSGa/ircmD7i78rNmJoYzXwIKh228z3+ztzef+Cb6S/lSxoWOXM2CO/ZuvlqARtLvX8u1Ie6+d+bd/X9pdS3lrrF/8jPCPytv9AVIbfvddxE4iNFLKL+hH/xCNudKgTvGX/r33ars/y062gQjljfWN8cyKm+f2NPOvqTL//Lvvy6crYvv66c7d/8B/9RFjk6Tp30AAAAAElFTkSuQmCC",
-                policy: {
-                    type: "totp",
-                    algorithm: "HmacSHA1"
-                },
-                qrUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=qr",
-                otpCredentials: [
-                    {
-                        id: "7afaaf7d-f2d5-44f5-a966-e5297f0b2b7a",
-                        userLabel: "Samsung S23"
-                    },
-                    {
-                        id: "fbe22500-d979-45a3-9666-84c99e27958e",
-                        userLabel: "Apple Iphone 15"
-                    }
-                ]
-            },
-            url: {
-                totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
-            },
-            messagesPerField: {},
-            stateChecker: "0UvyCNJHRJXmdahtRmn0tTPCU2nwLtWBUfPaaX1qb4g",
-            realm: {
-                userManagedAccessAllowed: true,
-                internationalizationEnabled: false
-            },
-            keycloakifyVersion: "9.6.1",
-            themeVersion: "1.0.10",
-            themeType: "account",
-            themeName: "keycloakify",
-            pageId: "totp.ftl"
-        }}
-    />
-);

stories/account/pages/FederatedIdentity.stories.tsx

@@ -1,21 +1,27 @@
 import React from "react";
-import { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../createPageStory";
+import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "federatedIdentity.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
 const meta = {
-    title: "account/FederatedIdentity",
+    title: `account/${pageId}`,
-    component: PageStory
+    component: PageStory,
+    parameters
 } satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
 
-export const NotConnected = () => (
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const NotConnected: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 pageId: "federatedIdentity.ftl",
@@ -31,4 +37,5 @@ export const NotConnected = () => (
                 }
             }}
         />
-);
+    )
+};

stories/account/pages/Log.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../createPageStory";
+import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "log.ftl";
 
@@ -9,13 +9,16 @@ const { PageStory } = createPageStory({
 });
 
 const meta = {
-    title: "account/Log",
+    title: `account/${pageId}`,
     component: PageStory
 } satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => (
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 log: {
@@ -351,4 +354,5 @@ export const Default = () => (
                 }
             }}
         />
-);
+    )
+};

stories/account/pages/Pasword.stories.tsx

@@ -1,24 +1,31 @@
 import React from "react";
-import { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../createPageStory";
+import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "password.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
 const meta = {
-    title: "account/Password",
+    title: `account/${pageId}`,
-    component: PageStory
+    component: PageStory,
+    parameters
 } satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
 
-export const WithMessage = () => (
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WithMessage: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 message: { type: "success", summary: "This is a test message" }
             }}
         />
-);
+    )
+};

stories/account/pages/Sessions.stories.tsx

@@ -1,19 +1,23 @@
 import React from "react";
-import { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../createPageStory";
+import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "sessions.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
 const meta = {
-    title: "account/Sessions",
+    title: `account/${pageId}`,
-    component: PageStory
+    component: PageStory,
+    parameters
 } satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => (
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 sessions: {
@@ -39,9 +43,11 @@ export const Default = () => (
                 stateChecker: "xQ7EOgFrLi4EvnJ8dbXKhwFGWk_bkOp0X89mhilt1os"
             }}
         />
-);
+    )
+};
 
-export const WithError = () => (
+export const WithError: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 url: { passwordUrl: "/auth/realms/keycloakify/account/password" },
@@ -52,4 +58,5 @@ export const WithError = () => (
                 }
             }}
         />
-);
+    )
+};

stories/account/pages/Totp.stories.tsx

@@ -1,105 +1,187 @@
 import React from "react";
-import { Meta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
-import { createPageStory } from "../createPageStory";
+import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "totp.ftl";
 
-const { PageStory } = createPageStory({ pageId });
+const { PageStory } = createPageStory({
+    pageId
+});
 
 const meta = {
-    title: "account/Authenticator",
+    title: `account/${pageId}`,
-    component: PageStory
+    component: PageStory,
+    parameters
 } satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => (
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 totp: {
                     enabled: false,
-                totpSecretEncoded: "HB2W ESCK KJKF K5DC GJQX S5RQ I5AX CZ2U",
+                    totpSecretEncoded: "HE4W MSTC OBKU CY2M ONXF OV3Q NYYU I3SH",
-                totpSecret: "8ubHJRTUtb2ayv0GAqgT",
+                    totpSecret: "99fJbpUAcLsnWWpn1DnG",
-                manualUrl: "http://localhost:8080/realms/master/account/totp?mode=manual",
+                    manualUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=manual",
-                supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
                     totpSecretQrCode:
-                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACoUlEQVR4Xu2YPW7DMAxGGWTImCP4JvbFAtiAL+bcxEfI6MEI+z3Kzl+BLh2oIRwEV08FJIr8SMX8T1vtc+bdvvxz5t2+/HPm3eA3Mzvc+jm+fDoPzXIQkPV18N79ejvOWnRpTlcf/XTVV4Aq+MU0uzZaZI12rZVml4YzVcQHDTrEYufBKuQaZEfX1TvDWhEv98+ty79dGX7HRx438ofQfB04Th08jNS+us+n+1l/XbfZKrgcumj/trRnpfak0Dw54Xp/nC+Xy5bOB7x6dDxt1sq5j/tP52vkd5Ee+Xc1JfnKmergxKdcOyOSCgLik5xXEtXBtXVVvTFcC+pdV6+YqIVT+rpNf4hKjqMgXdo9frO5ldAM1dFJfA7+1O9srqiM4W6otuYQIZ0pvivg8mWUvo6q14VImuTocf/JXFq4cP8lPifld/jXidQqOL0CX0V66L9a6Y9Pu34nc7XW8qoQQ9GfcghVwiq4kStqDdl1hGZpZ3f/ZnN9qyCHkTrWq4nl/l/8n8tVmieL1lpFhiDw0uQ84jeXl4ahp+tay/1r6/ai3/kchxKQI6njyCX64zg8n2s4RZEhIDkJ5ZD9b/mTzZnVq2mmMFP/RjJpwNObf7M5qa0Lj9K837/kvKuEu1ov6p9EiEXkd8ei+57f+VwJPSCSfSnNWkR8PvefytFvK/1riPiIEkXM1sGl39qrWlcEm9K3OXnXn2wO4qcFhWZ02uFk2dO/uTwMJx9ostn6Q4mq4LzvDmoSqXqzE5+8BHiOVsJ7arH661ZFuixCGp/+z+ZsWF+ROuR3I9faS39YBS82F9d2rpWkUzWchqFFdWitS5C+9F+5vC/3T/9Fkl8Y+H3BN/9mc/KHRwrxGa9iePnHGvhf9uWfM+/25Z8z7/Zv/gPV7u6J7fyCcQAAAABJRU5ErkJggg==",
+                        "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACk0lEQVR4Xu2YQY6DMAxFjViw5AjcBC6GBBIXozfJEbpkger53wEKqOpmFvaikQYNeVRyHPvbiejXscp95jp+/D5zHT9+n7kO8qeIFDqKzjJo9dC1wUSPP7yG4IPq41lq9ZK+keLZSwXDGwMhOCZgdX4sBVD1qld+GYg/h6ScreBuIDo5FKfVM7Z8aWs9PB2E2/73DdOlwUrK9Ck+HDnzB7ziR8fjlD/OPI8pVQwCi899TkNw2M+tp9XSLFKPIq2UySIhBB906fCQTicFwiv1EUG6+d+bl4zPIYnUk5oIcS69/evPYStUp6P0dJhD/mhauijcth76mOsfw+GFrbfXKJx7LW2N15kijuWIMCYicLQOCEimDp1c0L8PzCLTs3/d+ZQLyl6VqeSIT9nz25szf2ZybHgC31yrXEQIbqaPjX0k9GqWy0N/nLkagsHWNXR0LZwsR357c0pjC6fm+meu5f6f6oszz/qj7GpYCdHf0LVH/gTgtJ/5bVavPJ9svwnBS9qaqwoHOh3G7Ln++HIIDgpKYpFW00dlkX7ruz836THBWQpzd23/xeDsFVroz15fRjsfMyaC8JX2Y8PZf+VIoKff+uTO6WSIUIfSkrl9/rbfnbPr30R8hnMtXA/98ea5lx4ZlSMgQlMsEnb73XnP+yNl/SuR3/lzTSZHMTirMpMcXjWr0U5Mp/rnzmk/TsXkC2/iKEJ5TRG4DZ5KrP/C0RiVmkp+5I8zN1uh2vv9Vs+bzJ4947Y+bz6wl6ZIcv87ZaU2+6PwnoKdb7VYmrf9Z02MxCmNdmparbVJtrA4nA+e9LgIS6dzfvly7j+4XWIuPJp8iE9PbvkzJHYNabt/o5MP+535t/Hj95nr+PH7zHX8m/8B+RAnloz5pi4AAAAASUVORK5CYII=",
-                qrUrl: "http://localhost:8080/realms/master/account/totp?mode=qr",
+                    policy: {
+                        type: "totp"
+                    },
+                    qrUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=qr",
                     otpCredentials: []
                 },
+                messagesPerField: {},
+                stateChecker: "ihTeSAMfNsobnPjYiktV8DY-5T4sVzVdrEZRdwfMm8Y",
+                realm: {
+                    userManagedAccessAllowed: true,
+                    internationalizationEnabled: false
+                },
                 url: {
-                resourcesPath: "/resources/ueycc/account/keycloakify-starter",
+                    totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
-                resourceUrl: "http://localhost:8080/realms/master/account/resource",
+                },
-                resourcesCommonPath: "/resources/ueycc/account/keycloakify-starter/resources-common",
+                keycloakifyVersion: "9.6.1",
-                logUrl: "http://localhost:8080/realms/master/account/log",
+                themeVersion: "1.0.10",
-                socialUrl: "http://localhost:8080/realms/master/account/identity",
+                themeType: "account",
-                accountUrl: "http://localhost:8080/realms/master/account/",
+                themeName: "keycloakify",
-                sessionsUrl: "http://localhost:8080/realms/master/account/sessions",
+                pageId: "totp.ftl"
-                totpUrl: "http://localhost:8080/realms/master/account/totp",
-                applicationsUrl: "http://localhost:8080/realms/master/account/applications",
-                passwordUrl: "http://localhost:8080/realms/master/account/password"
-            }
             }}
         />
-);
+    )
+};
 
-export const WithTotpEnabled = () => (
+export const WithTotpEnabled: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 totp: {
                     enabled: true,
-                totpSecretEncoded: "HB2W ESCK KJKF K5DC GJQX S5RQ I5AX CZ2U",
+                    totpSecretEncoded: "G55E MZKC JFUD MQLT MFIF EVSB JFLG M6SO",
-                totpSecret: "8ubHJRTUtb2ayv0GAqgT",
+                    totpSecret: "7zFeBIh6AsaPRVAIVfzN",
-                manualUrl: "http://localhost:8080/realms/master/account/totp?mode=manual",
+                    manualUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=manual",
                     supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
                     totpSecretQrCode:
-                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACoUlEQVR4Xu2YPW7DMAxGGWTImCP4JvbFAtiAL+bcxEfI6MEI+z3Kzl+BLh2oIRwEV08FJIr8SMX8T1vtc+bdvvxz5t2+/HPm3eA3Mzvc+jm+fDoPzXIQkPV18N79ejvOWnRpTlcf/XTVV4Aq+MU0uzZaZI12rZVml4YzVcQHDTrEYufBKuQaZEfX1TvDWhEv98+ty79dGX7HRx438ofQfB04Th08jNS+us+n+1l/XbfZKrgcumj/trRnpfak0Dw54Xp/nC+Xy5bOB7x6dDxt1sq5j/tP52vkd5Ee+Xc1JfnKmergxKdcOyOSCgLik5xXEtXBtXVVvTFcC+pdV6+YqIVT+rpNf4hKjqMgXdo9frO5ldAM1dFJfA7+1O9srqiM4W6otuYQIZ0pvivg8mWUvo6q14VImuTocf/JXFq4cP8lPifld/jXidQqOL0CX0V66L9a6Y9Pu34nc7XW8qoQQ9GfcghVwiq4kStqDdl1hGZpZ3f/ZnN9qyCHkTrWq4nl/l/8n8tVmieL1lpFhiDw0uQ84jeXl4ahp+tay/1r6/ai3/kchxKQI6njyCX64zg8n2s4RZEhIDkJ5ZD9b/mTzZnVq2mmMFP/RjJpwNObf7M5qa0Lj9K837/kvKuEu1ov6p9EiEXkd8ei+57f+VwJPSCSfSnNWkR8PvefytFvK/1riPiIEkXM1sGl39qrWlcEm9K3OXnXn2wO4qcFhWZ02uFk2dO/uTwMJx9ostn6Q4mq4LzvDmoSqXqzE5+8BHiOVsJ7arH661ZFuixCGp/+z+ZsWF+ROuR3I9faS39YBS82F9d2rpWkUzWchqFFdWitS5C+9F+5vC/3T/9Fkl8Y+H3BN/9mc/KHRwrxGa9iePnHGvhf9uWfM+/25Z8z7/Zv/gPV7u6J7fyCcQAAAABJRU5ErkJggg==",
+                        "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACo0lEQVR4Xu2YPY6DMBCFJ6JwyRF8k+RiSCBxsXATjkDpAmX2vTGBwErbbDFTZIps4s8rmfl9RvRPW+W6crYvv66c7cuvK2cjX0Tkho9yW/q5PHSc5QYA62PwXnWqmzrRSUdNL+mygRC8kzQZWhqVO1CRds3YHopnfUkzp2c7ZAY+GIdXywOb0qsdJMXiFn9serYrncxNv/PDkdfUzObk/eNaX368mnl1kML8RH1vFoGzargA1DM/VeWhOpf9+by5iL5Q0NaEUETslHiSIz+dOc4q0tqBrcg7IsnpnZ8BeLmjqjFa4Fps4vlR3484nFHH6OP8o1cTc4I/Q3D4Uqw1TjpkeHqc2R/Rjvb89OUUDAL/CpycOf/o6fUjP505/phrOf8wn+tolsxyD8GZnzyrJSScrNyEcXhHJwrBh2yj2fShPlFB2PQxn935aK1HIB1G1nczm8+P+nbmC7si+zell53a4i97fnhz5Gddxc9iSgLPpPifGn9vDqN0YBL0lpozdx7nd+dDHSiFXkV+NlZO85Efzvzda8yrwkylvlEbhxE4bTJpiCEIkWNHbxD/w/++fJMOVX8p5Q70F0V2EI4LsUWd+ov6Wtgu5aM/OXNIf6jWbKq6zmekA77t88WZr5lXO6vvWaj6kbNo4nv/ceaon0TpYPqrmNJhue/x9+ZKLchbO+cLPrb+aI09BLeob1en2nqkKsUYfOvatSGa/ircmD7i78rNmJoYzXwIKh228z3+ztzef+Cb6S/lSxoWOXM2CO/ZuvlqARtLvX8u1Ie6+d+bd/X9pdS3lrrF/8jPCPytv9AVIbfvddxE4iNFLKL+hH/xCNudKgTvGX/r33ars/y062gQjljfWN8cyKm+f2NPOvqTL//Lvvy6crYvv66c7d/8B/9RFjk6Tp30AAAAAElFTkSuQmCC",
-                qrUrl: "http://localhost:8080/realms/master/account/totp?mode=qr",
+                    policy: {
-                otpCredentials: []
+                        type: "totp",
+                        algorithm: "HmacSHA1"
+                    },
+                    qrUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=qr",
+                    otpCredentials: [
+                        {
+                            id: "7afaaf7d-f2d5-44f5-a966-e5297f0b2b7a",
+                            userLabel: "mobile"
+                        }
+                    ]
+                },
+                message: {
+                    summary: "Mobile authenticator configured.",
+                    type: "success"
                 },
                 url: {
-                resourcesPath: "/resources/ueycc/account/keycloakify-starter",
+                    totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
-                resourceUrl: "http://localhost:8080/realms/master/account/resource",
+                },
-                resourcesCommonPath: "/resources/ueycc/account/keycloakify-starter/resources-common",
+                messagesPerField: {},
-                logUrl: "http://localhost:8080/realms/master/account/log",
+                stateChecker: "0UvyCNJHRJXmdahtRmn0tTPCU2nwLtWBUfPaaX1qb4g",
-                socialUrl: "http://localhost:8080/realms/master/account/identity",
+                realm: {
-                accountUrl: "http://localhost:8080/realms/master/account/",
+                    userManagedAccessAllowed: true,
-                sessionsUrl: "http://localhost:8080/realms/master/account/sessions",
+                    internationalizationEnabled: false
-                totpUrl: "http://localhost:8080/realms/master/account/totp",
+                },
-                applicationsUrl: "http://localhost:8080/realms/master/account/applications",
+                keycloakifyVersion: "9.6.1",
-                passwordUrl: "http://localhost:8080/realms/master/account/password"
+                themeVersion: "1.0.10",
-            }
+                themeType: "account",
+                themeName: "keycloakify",
+                pageId: "totp.ftl"
             }}
         />
-);
+    )
+};
 
-export const WithManualMode = () => (
+export const WithManualMode: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 mode: "manual",
                 totp: {
                     enabled: false,
-                totpSecretEncoded: "HB2W ESCK KJKF K5DC GJQX S5RQ I5AX CZ2U",
+                    totpSecretEncoded: "KZ5H CYTW GBVV ASDE JRXG MMCK HAZU E6TX",
-                totpSecret: "8ubHJRTUtb2ayv0GAqgT",
+                    totpSecret: "Vzqbv0kPHdLnf0J83Bzw",
-                manualUrl: "http://localhost:8080/realms/master/account/totp?mode=manual",
+                    manualUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=manual",
-                supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
                     totpSecretQrCode:
-                    "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACoUlEQVR4Xu2YPW7DMAxGGWTImCP4JvbFAtiAL+bcxEfI6MEI+z3Kzl+BLh2oIRwEV08FJIr8SMX8T1vtc+bdvvxz5t2+/HPm3eA3Mzvc+jm+fDoPzXIQkPV18N79ejvOWnRpTlcf/XTVV4Aq+MU0uzZaZI12rZVml4YzVcQHDTrEYufBKuQaZEfX1TvDWhEv98+ty79dGX7HRx438ofQfB04Th08jNS+us+n+1l/XbfZKrgcumj/trRnpfak0Dw54Xp/nC+Xy5bOB7x6dDxt1sq5j/tP52vkd5Ee+Xc1JfnKmergxKdcOyOSCgLik5xXEtXBtXVVvTFcC+pdV6+YqIVT+rpNf4hKjqMgXdo9frO5ldAM1dFJfA7+1O9srqiM4W6otuYQIZ0pvivg8mWUvo6q14VImuTocf/JXFq4cP8lPifld/jXidQqOL0CX0V66L9a6Y9Pu34nc7XW8qoQQ9GfcghVwiq4kStqDdl1hGZpZ3f/ZnN9qyCHkTrWq4nl/l/8n8tVmieL1lpFhiDw0uQ84jeXl4ahp+tay/1r6/ai3/kchxKQI6njyCX64zg8n2s4RZEhIDkJ5ZD9b/mTzZnVq2mmMFP/RjJpwNObf7M5qa0Lj9K837/kvKuEu1ov6p9EiEXkd8ei+57f+VwJPSCSfSnNWkR8PvefytFvK/1riPiIEkXM1sGl39qrWlcEm9K3OXnXn2wO4qcFhWZ02uFk2dO/uTwMJx9ostn6Q4mq4LzvDmoSqXqzE5+8BHiOVsJ7arH661ZFuixCGp/+z+ZsWF+ROuR3I9faS39YBS82F9d2rpWkUzWchqFFdWitS5C+9F+5vC/3T/9Fkl8Y+H3BN/9mc/KHRwrxGa9iePnHGvhf9uWfM+/25Z8z7/Zv/gPV7u6J7fyCcQAAAABJRU5ErkJggg==",
+                        "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACpklEQVR4Xu2YQa6rMAxFXTFgyBLYSbsxJJC6sb6dZAkdMkDNv8cBStHTm/yBM2ikIpqTgePY1w6W/xyLnWc+x5efZz7Hl59nPgf8aWaXPFl+2ZhbzfWaGPTT3yr4mPPPs8nty4ZeKxfzRQ6q4IO1P8zq0c/iffvqtIlLTfw5psxsK3f7JirjTHDqWpQ3T9fC/fytn2956u32bNJv8RHIyZ/n0MvJh8cpvwJ5GffkQaBNYPo2auCyv30YVmtitm4yu1qT5mtXCR9svsqXeih1/I1IbZHLKniTskxPOvCGSB3Wud2/0Vz+5YH9uHZAvzORUAlXaXmY9FHxyZuWI0L5sfs3lkt1vDTbtVtM8bmovrCT26o/0bxozVAWIY3IuTLpsvk3mDNeRv9QqrJWEp+25Xc01/uMVudHpySiE3PXklN1cLSm8yCgKmuWICUIxip4vqM6Y+kalNX3hJNtz+9orgOXQ60noZPrd/H5u74E86I/pfXXm/obXPvOr2juVW8o9nsTS77T5Ix18CZ71sh+qQ7n3+LzY32J5WptXt291Bdaf8tcVw76Hcvpqr31R3CUOri7Q79r4ap61+5O12XoT1leOrFK+HZ/asga/sr0tz5F85wozWq4aMKcP1DK3f54Ttfv+a0iqG1wCU2H/iGWl156IionQYWmngTpan84H9aGy+8nl7I8J5ejOnjP0SNCC/0/lVpydKyPwZz7u/Xef80ouaRHHt7PP5j74BJFfBpJ3vLp460/wdxtxX5KM6XPMvktJ6/7i+YjvfRS/Gs3za3218LJH5qwzKKf7fzd3fXwEWmkf5WTKS3JN1YRTxKhiY9IC6mzUKmP/g3knL8cqoeUiKvJL/EZyT1/sJ/vg+X7G07e7Q/mf40vP898ji8/z3yO/+b/ANUwOXCzdQgqAAAAAElFTkSuQmCC",
-                qrUrl: "http://localhost:8080/realms/master/account/totp?mode=qr",
+                    policy: {
+                        type: "totp",
+                        algorithm: "HmacSHA1"
+                    },
+                    qrUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=qr",
                     otpCredentials: []
                 },
+                messagesPerField: {},
+                stateChecker: "HiBl2ADzLwKwQS813LOEig1Ymm4xpEu_NacYtWJIuHU",
+                realm: {
+                    userManagedAccessAllowed: true,
+                    internationalizationEnabled: false
+                },
                 url: {
-                resourcesPath: "/resources/ueycc/account/keycloakify-starter",
+                    totpUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=manual"
-                resourceUrl: "http://localhost:8080/realms/master/account/resource",
+                },
-                resourcesCommonPath: "/resources/ueycc/account/keycloakify-starter/resources-common",
+                keycloakifyVersion: "9.6.1",
-                logUrl: "http://localhost:8080/realms/master/account/log",
+                themeVersion: "1.0.10",
-                socialUrl: "http://localhost:8080/realms/master/account/identity",
+                themeType: "account",
-                accountUrl: "http://localhost:8080/realms/master/account/",
+                themeName: "keycloakify",
-                sessionsUrl: "http://localhost:8080/realms/master/account/sessions",
+                pageId: "totp.ftl"
-                totpUrl: "http://localhost:8080/realms/master/account/totp",
-                applicationsUrl: "http://localhost:8080/realms/master/account/applications",
-                passwordUrl: "http://localhost:8080/realms/master/account/password"
-            }
             }}
         />
-);
+    )
+};
+
+export const MoreThanOneTotpProviders: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                totp: {
+                    enabled: true,
+                    totpSecretEncoded: "G55E MZKC JFUD MQLT MFIF EVSB JFLG M6SO",
+                    totpSecret: "7zFeBIh6AsaPRVAIVfzN",
+                    manualUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=manual",
+                    supportedApplications: ["totpAppFreeOTPName", "totpAppMicrosoftAuthenticatorName", "totpAppGoogleName"],
+                    totpSecretQrCode:
+                        "iVBORw0KGgoAAAANSUhEUgAAAPYAAAD2AQAAAADNaUdlAAACo0lEQVR4Xu2YPY6DMBCFJ6JwyRF8k+RiSCBxsXATjkDpAmX2vTGBwErbbDFTZIps4s8rmfl9RvRPW+W6crYvv66c7cuvK2cjX0Tkho9yW/q5PHSc5QYA62PwXnWqmzrRSUdNL+mygRC8kzQZWhqVO1CRds3YHopnfUkzp2c7ZAY+GIdXywOb0qsdJMXiFn9serYrncxNv/PDkdfUzObk/eNaX368mnl1kML8RH1vFoGzargA1DM/VeWhOpf9+by5iL5Q0NaEUETslHiSIz+dOc4q0tqBrcg7IsnpnZ8BeLmjqjFa4Fps4vlR3484nFHH6OP8o1cTc4I/Q3D4Uqw1TjpkeHqc2R/Rjvb89OUUDAL/CpycOf/o6fUjP505/phrOf8wn+tolsxyD8GZnzyrJSScrNyEcXhHJwrBh2yj2fShPlFB2PQxn935aK1HIB1G1nczm8+P+nbmC7si+zell53a4i97fnhz5Gddxc9iSgLPpPifGn9vDqN0YBL0lpozdx7nd+dDHSiFXkV+NlZO85Efzvzda8yrwkylvlEbhxE4bTJpiCEIkWNHbxD/w/++fJMOVX8p5Q70F0V2EI4LsUWd+ov6Wtgu5aM/OXNIf6jWbKq6zmekA77t88WZr5lXO6vvWaj6kbNo4nv/ceaon0TpYPqrmNJhue/x9+ZKLchbO+cLPrb+aI09BLeob1en2nqkKsUYfOvatSGa/ircmD7i78rNmJoYzXwIKh228z3+ztzef+Cb6S/lSxoWOXM2CO/ZuvlqARtLvX8u1Ie6+d+bd/X9pdS3lrrF/8jPCPytv9AVIbfvddxE4iNFLKL+hH/xCNudKgTvGX/r33ars/y062gQjljfWN8cyKm+f2NPOvqTL//Lvvy6crYvv66c7d/8B/9RFjk6Tp30AAAAAElFTkSuQmCC",
+                    policy: {
+                        type: "totp",
+                        algorithm: "HmacSHA1"
+                    },
+                    qrUrl: "http://localhost:8080/realms/myrealm/account/totp?mode=qr",
+                    otpCredentials: [
+                        {
+                            id: "7afaaf7d-f2d5-44f5-a966-e5297f0b2b7a",
+                            userLabel: "Samsung S23"
+                        },
+                        {
+                            id: "fbe22500-d979-45a3-9666-84c99e27958e",
+                            userLabel: "Apple Iphone 15"
+                        }
+                    ]
+                },
+                url: {
+                    totpUrl: "http://localhost:8080/realms/myrealm/account/totp"
+                },
+                messagesPerField: {},
+                stateChecker: "0UvyCNJHRJXmdahtRmn0tTPCU2nwLtWBUfPaaX1qb4g",
+                realm: {
+                    userManagedAccessAllowed: true,
+                    internationalizationEnabled: false
+                },
+                keycloakifyVersion: "9.6.1",
+                themeVersion: "1.0.10",
+                themeType: "account",
+                themeName: "keycloakify",
+                pageId: "totp.ftl"
+            }}
+        />
+    )
+};

stories/login/createPageStory.tsx

@@ -1,19 +1,31 @@
 import React from "react";
-import { getKcContext, type KcContext } from "./kcContext";
+import type { KcContext } from "./kcContext";
+import { getKcContextMock } from "./kcContextMock";
 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 }>> }) {
+    function PageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
-        const { kcContext } = getKcContext({
+        const { kcContext: overrides } = props;
-            mockPageId: pageId,
+
-            storyPartialKcContext: params.kcContext
+        const kcContextMock = getKcContextMock({
+            pageId,
+            overrides
         });
 
-        return <KcApp kcContext={kcContext} />;
+        return <KcApp kcContext={kcContextMock} />;
     }
 
     return { PageStory };
 }
+
+export const parameters = {
+    viewMode: "story",
+    previewTabs: {
+        "storybook/docs/panel": {
+            hidden: true
+        }
+    }
+};

stories/login/kcContext.ts

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

stories/login/kcContextMock.ts

@@ -0,0 +1,10 @@
+import { createGetKcContextMock } from "../../dist/login";
+import { KcContextExtraProperties, KcContextExtraPropertiesPerPage } from "./kcContext";
+
+const kcContextExtraProperties: KcContextExtraProperties = {};
+const kcContextExtraPropertiesPerPage: KcContextExtraPropertiesPerPage = {};
+
+export const { getKcContextMock } = createGetKcContextMock({
+    kcContextExtraProperties,
+    kcContextExtraPropertiesPerPage
+});

stories/login/pages/Error.stories.tsx

@@ -1,25 +1,31 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "error.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
 
-export const WithAnotherMessage = () => (
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WithAnotherMessage: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 message: { summary: "With another error message" }
             }}
         />
-);
+    )
+};

stories/login/pages/IdpReviewUserProfile.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "idp-review-user-profile.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/Info.stories.tsx

@@ -1,20 +1,23 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "info.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => (
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 message: {
@@ -23,9 +26,11 @@ export const Default = () => (
                 }
             }}
         />
-);
+    )
+};
 
-export const WithWarning = () => (
+export const WithWarning: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 message: {
@@ -34,9 +39,11 @@ export const WithWarning = () => (
                 }
             }}
         />
-);
+    )
+};
 
-export const WithError = () => (
+export const WithError: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 message: {
@@ -45,9 +52,11 @@ export const WithError = () => (
                 }
             }}
         />
-);
+    )
+};
 
-export const WithSuccess = () => (
+export const WithSuccess: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 message: {
@@ -56,9 +65,11 @@ export const WithSuccess = () => (
                 }
             }}
         />
-);
+    )
+};
 
-export const WithLinkBack = () => (
+export const WithLinkBack: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 message: {
@@ -67,9 +78,11 @@ export const WithLinkBack = () => (
                 actionUri: undefined
             }}
         />
-);
+    )
+};
 
-export const WithRequiredActions = () => (
+export const WithRequiredActions: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 message: {
@@ -78,4 +91,5 @@ export const WithRequiredActions = () => (
                 requiredActions: ["CONFIGURE_TOTP", "UPDATE_PROFILE", "VERIFY_EMAIL"]
             }}
         />
-);
+    )
+};

stories/login/pages/Login.stories.tsx

@@ -1,70 +1,87 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
 
-export const WithoutPasswordField = () => (
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WithoutPasswordField: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 realm: { password: false }
             }}
         />
-);
+    )
+};
 
-export const WithoutRegistration = () => (
+export const WithoutRegistration: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 realm: { registrationAllowed: false }
             }}
         />
-);
+    )
+};
 
-export const WithoutRememberMe = () => (
+export const WithoutRememberMe: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 realm: { rememberMe: false }
             }}
         />
-);
+    )
+};
 
-export const WithoutPasswordReset = () => (
+export const WithoutPasswordReset: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 realm: { resetPasswordAllowed: false }
             }}
         />
-);
+    )
+};
 
-export const WithEmailAsUsername = () => (
+export const WithEmailAsUsername: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 realm: { loginWithEmailAllowed: false }
             }}
         />
-);
+    )
+};
 
-export const WithPresetUsername = () => (
+export const WithPresetUsername: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 login: { username: "max.mustermann@mail.com" }
             }}
         />
-);
+    )
+};
 
-export const WithImmutablePresetUsername = () => (
+export const WithImmutablePresetUsername: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 auth: {
@@ -78,9 +95,11 @@ export const WithImmutablePresetUsername = () => (
                 }
             }}
         />
-);
+    )
+};
 
-export const WithSocialProviders = () => (
+export const WithSocialProviders: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 social: {
@@ -162,4 +181,5 @@ export const WithSocialProviders = () => (
                 }
             }}
         />
-);
+    )
+};

stories/login/pages/LoginConfigTotp.stories.tsx

@@ -1,30 +1,37 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-config-totp.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
 
-export const WithManualSetUp = () => (
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WithManualSetUp: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 mode: "manual"
             }}
         />
-);
+    )
+};
 
-export const WithError = () => (
+export const WithError: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 messagesPerField: {
@@ -35,4 +42,5 @@ export const WithError = () => (
                 }
             }}
         />
-);
+    )
+};

stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-oauth2-device-verify-user-code.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/LoginIdpLinkConfirm.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-idp-link-confirm.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/LoginIdpLinkEmail.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-idp-link-email.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/LoginOauthGrant.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-oauth-grant.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/LoginOtp.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-otp.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/LoginPageExpired.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-page-expired.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/LoginPassword.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-password.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/LoginResetPassword.stories.tsx

@@ -1,22 +1,27 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-reset-password.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
 
-export const WithEmailAsUsername = () => (
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WithEmailAsUsername: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 realm: {
@@ -25,4 +30,5 @@ export const WithEmailAsUsername = () => (
                 }
             }}
         />
-);
+    )
+};

stories/login/pages/LoginUpdatePassword.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-update-password.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/LoginUpdateProfile.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-update-profile.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/LoginUsername.stories.tsx

@@ -1,22 +1,27 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-username.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
 
-export const WithEmailAsUsername = () => (
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WithEmailAsUsername: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 realm: {
@@ -25,4 +30,5 @@ export const WithEmailAsUsername = () => (
                 }
             }}
         />
-);
+    )
+};

stories/login/pages/LoginVerifyEmail.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "login-verify-email.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/LogoutConfirm.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "logout-confirm.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/Register.stories.tsx

@@ -1,22 +1,27 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "register.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
 
-export const WithFieldError = () => (
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WithFieldError: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 profile: {
@@ -35,9 +40,11 @@ export const WithFieldError = () => (
                 }
             }}
         />
-);
+    )
+};
 
-export const WithEmailAsUsername = () => (
+export const WithEmailAsUsername: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 realm: {
@@ -45,26 +52,32 @@ export const WithEmailAsUsername = () => (
                 }
             }}
         />
-);
+    )
+};
 
-export const WithoutPassword = () => (
+export const WithoutPassword: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 passwordRequired: false
             }}
         />
-);
+    )
+};
 
-export const WithRecaptcha = () => (
+export const WithRecaptcha: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 recaptchaRequired: true,
                 recaptchaSiteKey: "foobar"
             }}
         />
-);
+    )
+};
 
-export const WithPresets = () => (
+export const WithPresets: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 profile: {
@@ -89,4 +102,5 @@ export const WithPresets = () => (
                 }
             }}
         />
-);
+    )
+};

stories/login/pages/SamlPostForm.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "saml-post-form.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/SelectAuthenticator.stories.tsx

@@ -1,22 +1,27 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "select-authenticator.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
 
-export const WithDifferentAuthenticationMethods = () => (
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WithDifferentAuthenticationMethods: Story = {
+    render: () => (
         <PageStory
             kcContext={{
                 auth: {
@@ -37,4 +42,5 @@ export const WithDifferentAuthenticationMethods = () => (
                 }
             }}
         />
-);
+    )
+};

stories/login/pages/Terms.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "terms.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/UpdateEmail.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "update-email.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};

stories/login/pages/WebauthnAuthenticate.stories.tsx

@@ -1,17 +1,21 @@
 import React from "react";
-import type { ComponentMeta } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react";
 import { createPageStory, parameters } from "../createPageStory";
 
 const pageId = "webauthn-authenticate.ftl";
 
 const { PageStory } = createPageStory({ pageId });
 
-const meta: ComponentMeta<any> = {
+const meta = {
     title: `login/${pageId}`,
     component: PageStory,
     parameters
-};
+} satisfies Meta<typeof PageStory>;
 
 export default meta;
 
-export const Default = () => <PageStory />;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    render: () => <PageStory />
+};