More homogeneous storybook setup

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 }>> }) {
-        const { kcContext } = getKcContext({
-            mockPageId: pageId,
-            storyPartialKcContext: params.kcContext
+    function PageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+        const { kcContext: overrides } = props;
+
+        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 = () => (
-    <PageStory
-        kcContext={{
-            message: { summary: "With another error message" }
-        }}
-    />
-);
+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,81 +1,95 @@
 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 = () => (
-    <PageStory
-        kcContext={{
-            message: {
-                summary: "Server info message",
-                type: "info"
-            }
-        }}
-    />
-);
+type Story = StoryObj<typeof meta>;
 
-export const WithWarning = () => (
-    <PageStory
-        kcContext={{
-            message: {
-                summary: "Server warning message",
-                type: "warning"
-            }
-        }}
-    />
-);
+export const Default: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                message: {
+                    summary: "Server info message",
+                    type: "info"
+                }
+            }}
+        />
+    )
+};
 
-export const WithError = () => (
-    <PageStory
-        kcContext={{
-            message: {
-                summary: "Server error message",
-                type: "error"
-            }
-        }}
-    />
-);
+export const WithWarning: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                message: {
+                    summary: "Server warning message",
+                    type: "warning"
+                }
+            }}
+        />
+    )
+};
 
-export const WithSuccess = () => (
-    <PageStory
-        kcContext={{
-            message: {
-                summary: "Server success message",
-                type: "success"
-            }
-        }}
-    />
-);
+export const WithError: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                message: {
+                    summary: "Server error message",
+                    type: "error"
+                }
+            }}
+        />
+    )
+};
 
-export const WithLinkBack = () => (
-    <PageStory
-        kcContext={{
-            message: {
-                summary: "Server message"
-            },
-            actionUri: undefined
-        }}
-    />
-);
+export const WithSuccess: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                message: {
+                    summary: "Server success message",
+                    type: "success"
+                }
+            }}
+        />
+    )
+};
 
-export const WithRequiredActions = () => (
-    <PageStory
-        kcContext={{
-            message: {
-                summary: "Server message"
-            },
-            requiredActions: ["CONFIGURE_TOTP", "UPDATE_PROFILE", "VERIFY_EMAIL"]
-        }}
-    />
-);
+export const WithLinkBack: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                message: {
+                    summary: "Server message"
+                },
+                actionUri: undefined
+            }}
+        />
+    )
+};
+
+export const WithRequiredActions: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                message: {
+                    summary: "Server message"
+                },
+                requiredActions: ["CONFIGURE_TOTP", "UPDATE_PROFILE", "VERIFY_EMAIL"]
+            }}
+        />
+    )
+};

stories/login/pages/Login.stories.tsx

@@ -1,165 +1,185 @@
 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 = () => (
-    <PageStory
-        kcContext={{
-            realm: { password: false }
-        }}
-    />
-);
+export const Default: Story = {
+    render: () => <PageStory />
+};
 
-export const WithoutRegistration = () => (
-    <PageStory
-        kcContext={{
-            realm: { registrationAllowed: false }
-        }}
-    />
-);
+export const WithoutPasswordField: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                realm: { password: false }
+            }}
+        />
+    )
+};
 
-export const WithoutRememberMe = () => (
-    <PageStory
-        kcContext={{
-            realm: { rememberMe: false }
-        }}
-    />
-);
+export const WithoutRegistration: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                realm: { registrationAllowed: false }
+            }}
+        />
+    )
+};
 
-export const WithoutPasswordReset = () => (
-    <PageStory
-        kcContext={{
-            realm: { resetPasswordAllowed: false }
-        }}
-    />
-);
+export const WithoutRememberMe: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                realm: { rememberMe: false }
+            }}
+        />
+    )
+};
 
-export const WithEmailAsUsername = () => (
-    <PageStory
-        kcContext={{
-            realm: { loginWithEmailAllowed: false }
-        }}
-    />
-);
+export const WithoutPasswordReset: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                realm: { resetPasswordAllowed: false }
+            }}
+        />
+    )
+};
 
-export const WithPresetUsername = () => (
-    <PageStory
-        kcContext={{
-            login: { username: "max.mustermann@mail.com" }
-        }}
-    />
-);
+export const WithEmailAsUsername: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                realm: { loginWithEmailAllowed: false }
+            }}
+        />
+    )
+};
 
-export const WithImmutablePresetUsername = () => (
-    <PageStory
-        kcContext={{
-            auth: {
-                attemptedUsername: "max.mustermann@mail.com",
-                showUsername: true
-            },
-            usernameHidden: true,
-            message: {
-                type: "info",
-                summary: "Please re-authenticate to continue"
-            }
-        }}
-    />
-);
+export const WithPresetUsername: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                login: { username: "max.mustermann@mail.com" }
+            }}
+        />
+    )
+};
 
-export const WithSocialProviders = () => (
-    <PageStory
-        kcContext={{
-            social: {
-                displayInfo: true,
-                providers: [
-                    {
-                        loginUrl: "google",
-                        alias: "google",
-                        providerId: "google",
-                        displayName: "Google"
-                    },
-                    {
-                        loginUrl: "microsoft",
-                        alias: "microsoft",
-                        providerId: "microsoft",
-                        displayName: "Microsoft"
-                    },
-                    {
-                        loginUrl: "facebook",
-                        alias: "facebook",
-                        providerId: "facebook",
-                        displayName: "Facebook"
-                    },
-                    {
-                        loginUrl: "instagram",
-                        alias: "instagram",
-                        providerId: "instagram",
-                        displayName: "Instagram"
-                    },
-                    {
-                        loginUrl: "twitter",
-                        alias: "twitter",
-                        providerId: "twitter",
-                        displayName: "Twitter"
-                    },
-                    {
-                        loginUrl: "linkedin",
-                        alias: "linkedin",
-                        providerId: "linkedin",
-                        displayName: "LinkedIn"
-                    },
-                    {
-                        loginUrl: "stackoverflow",
-                        alias: "stackoverflow",
-                        providerId: "stackoverflow",
-                        displayName: "Stackoverflow"
-                    },
-                    {
-                        loginUrl: "github",
-                        alias: "github",
-                        providerId: "github",
-                        displayName: "Github"
-                    },
-                    {
-                        loginUrl: "gitlab",
-                        alias: "gitlab",
-                        providerId: "gitlab",
-                        displayName: "Gitlab"
-                    },
-                    {
-                        loginUrl: "bitbucket",
-                        alias: "bitbucket",
-                        providerId: "bitbucket",
-                        displayName: "Bitbucket"
-                    },
-                    {
-                        loginUrl: "paypal",
-                        alias: "paypal",
-                        providerId: "paypal",
-                        displayName: "PayPal"
-                    },
-                    {
-                        loginUrl: "openshift",
-                        alias: "openshift",
-                        providerId: "openshift",
-                        displayName: "OpenShift"
-                    }
-                ]
-            }
-        }}
-    />
-);
+export const WithImmutablePresetUsername: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                auth: {
+                    attemptedUsername: "max.mustermann@mail.com",
+                    showUsername: true
+                },
+                usernameHidden: true,
+                message: {
+                    type: "info",
+                    summary: "Please re-authenticate to continue"
+                }
+            }}
+        />
+    )
+};
+
+export const WithSocialProviders: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                social: {
+                    displayInfo: true,
+                    providers: [
+                        {
+                            loginUrl: "google",
+                            alias: "google",
+                            providerId: "google",
+                            displayName: "Google"
+                        },
+                        {
+                            loginUrl: "microsoft",
+                            alias: "microsoft",
+                            providerId: "microsoft",
+                            displayName: "Microsoft"
+                        },
+                        {
+                            loginUrl: "facebook",
+                            alias: "facebook",
+                            providerId: "facebook",
+                            displayName: "Facebook"
+                        },
+                        {
+                            loginUrl: "instagram",
+                            alias: "instagram",
+                            providerId: "instagram",
+                            displayName: "Instagram"
+                        },
+                        {
+                            loginUrl: "twitter",
+                            alias: "twitter",
+                            providerId: "twitter",
+                            displayName: "Twitter"
+                        },
+                        {
+                            loginUrl: "linkedin",
+                            alias: "linkedin",
+                            providerId: "linkedin",
+                            displayName: "LinkedIn"
+                        },
+                        {
+                            loginUrl: "stackoverflow",
+                            alias: "stackoverflow",
+                            providerId: "stackoverflow",
+                            displayName: "Stackoverflow"
+                        },
+                        {
+                            loginUrl: "github",
+                            alias: "github",
+                            providerId: "github",
+                            displayName: "Github"
+                        },
+                        {
+                            loginUrl: "gitlab",
+                            alias: "gitlab",
+                            providerId: "gitlab",
+                            displayName: "Gitlab"
+                        },
+                        {
+                            loginUrl: "bitbucket",
+                            alias: "bitbucket",
+                            providerId: "bitbucket",
+                            displayName: "Bitbucket"
+                        },
+                        {
+                            loginUrl: "paypal",
+                            alias: "paypal",
+                            providerId: "paypal",
+                            displayName: "PayPal"
+                        },
+                        {
+                            loginUrl: "openshift",
+                            alias: "openshift",
+                            providerId: "openshift",
+                            displayName: "OpenShift"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};

stories/login/pages/LoginConfigTotp.stories.tsx

@@ -1,38 +1,46 @@
 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 = () => (
-    <PageStory
-        kcContext={{
-            mode: "manual"
-        }}
-    />
-);
+export const Default: Story = {
+    render: () => <PageStory />
+};
 
-export const WithError = () => (
-    <PageStory
-        kcContext={{
-            messagesPerField: {
-                get: (fieldName: string) => (fieldName === "totp" ? "Invalid TOTP" : undefined),
-                exists: (fieldName: string) => fieldName === "totp",
-                existsError: (fieldName: string) => fieldName === "totp",
-                printIfExists: <T,>(fieldName: string, x: T) => (fieldName === "totp" ? x : undefined)
-            }
-        }}
-    />
-);
+export const WithManualSetUp: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                mode: "manual"
+            }}
+        />
+    )
+};
+
+export const WithError: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                messagesPerField: {
+                    get: (fieldName: string) => (fieldName === "totp" ? "Invalid TOTP" : undefined),
+                    exists: (fieldName: string) => fieldName === "totp",
+                    existsError: (fieldName: string) => fieldName === "totp",
+                    printIfExists: <T,>(fieldName: string, x: T) => (fieldName === "totp" ? x : undefined)
+                }
+            }}
+        />
+    )
+};

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,28 +1,34 @@
 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 = () => (
-    <PageStory
-        kcContext={{
-            realm: {
-                loginWithEmailAllowed: true,
-                registrationEmailAsUsername: true
-            }
-        }}
-    />
-);
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WithEmailAsUsername: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                realm: {
+                    loginWithEmailAllowed: true,
+                    registrationEmailAsUsername: true
+                }
+            }}
+        />
+    )
+};

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,28 +1,34 @@
 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 = () => (
-    <PageStory
-        kcContext={{
-            realm: {
-                loginWithEmailAllowed: true,
-                registrationEmailAsUsername: true
-            }
-        }}
-    />
-);
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WithEmailAsUsername: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                realm: {
+                    loginWithEmailAllowed: true,
+                    registrationEmailAsUsername: true
+                }
+            }}
+        />
+    )
+};

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,92 +1,106 @@
 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 = () => (
-    <PageStory
-        kcContext={{
-            profile: {
-                attributes: [
-                    {
-                        name: "email",
-                        value: "max.mustermann@gmail.com"
-                    }
-                ]
-            },
-            messagesPerField: {
-                existsError: (fieldName: string) => fieldName === "email",
-                exists: (fieldName: string) => fieldName === "email",
-                get: (fieldName: string) => (fieldName === "email" ? "I don't like your email address" : undefined),
-                printIfExists: <T,>(fieldName: string, x: T) => (fieldName === "email" ? x : undefined)
-            }
-        }}
-    />
-);
+export const Default: Story = {
+    render: () => <PageStory />
+};
 
-export const WithEmailAsUsername = () => (
-    <PageStory
-        kcContext={{
-            realm: {
-                registrationEmailAsUsername: true
-            }
-        }}
-    />
-);
+export const WithFieldError: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                profile: {
+                    attributes: [
+                        {
+                            name: "email",
+                            value: "max.mustermann@gmail.com"
+                        }
+                    ]
+                },
+                messagesPerField: {
+                    existsError: (fieldName: string) => fieldName === "email",
+                    exists: (fieldName: string) => fieldName === "email",
+                    get: (fieldName: string) => (fieldName === "email" ? "I don't like your email address" : undefined),
+                    printIfExists: <T,>(fieldName: string, x: T) => (fieldName === "email" ? x : undefined)
+                }
+            }}
+        />
+    )
+};
 
-export const WithoutPassword = () => (
-    <PageStory
-        kcContext={{
-            passwordRequired: false
-        }}
-    />
-);
+export const WithEmailAsUsername: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                realm: {
+                    registrationEmailAsUsername: true
+                }
+            }}
+        />
+    )
+};
 
-export const WithRecaptcha = () => (
-    <PageStory
-        kcContext={{
-            recaptchaRequired: true,
-            recaptchaSiteKey: "foobar"
-        }}
-    />
-);
+export const WithoutPassword: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                passwordRequired: false
+            }}
+        />
+    )
+};
 
-export const WithPresets = () => (
-    <PageStory
-        kcContext={{
-            profile: {
-                attributes: [
-                    {
-                        name: "firstName",
-                        value: "Max"
-                    },
-                    {
-                        name: "lastName",
-                        value: "Mustermann"
-                    },
-                    {
-                        name: "email",
-                        value: "max.mustermann@gmail.com"
-                    },
-                    {
-                        name: "username",
-                        value: "max.mustermann"
-                    }
-                ]
-            }
-        }}
-    />
-);
+export const WithRecaptcha: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                recaptchaRequired: true,
+                recaptchaSiteKey: "foobar"
+            }}
+        />
+    )
+};
+
+export const WithPresets: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                profile: {
+                    attributes: [
+                        {
+                            name: "firstName",
+                            value: "Max"
+                        },
+                        {
+                            name: "lastName",
+                            value: "Mustermann"
+                        },
+                        {
+                            name: "email",
+                            value: "max.mustermann@gmail.com"
+                        },
+                        {
+                            name: "username",
+                            value: "max.mustermann"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};

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,40 +1,46 @@
 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 = () => (
-    <PageStory
-        kcContext={{
-            auth: {
-                authenticationSelections: [
-                    {
-                        authExecId: "25697c4e-0c80-4f2c-8eb7-2c16347e8e8d",
-                        displayName: "auth-username-password-form-display-name",
-                        helpText: "auth-username-password-form-help-text",
-                        iconCssClass: "kcAuthenticatorPasswordClass"
-                    },
-                    {
-                        authExecId: "4cb60872-ce0d-4c8f-a806-e651ed77994b",
-                        displayName: "webauthn-passwordless-display-name",
-                        helpText: "webauthn-passwordless-help-text",
-                        iconCssClass: "kcAuthenticatorWebAuthnPasswordlessClass"
-                    }
-                ]
-            }
-        }}
-    />
-);
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WithDifferentAuthenticationMethods: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                auth: {
+                    authenticationSelections: [
+                        {
+                            authExecId: "25697c4e-0c80-4f2c-8eb7-2c16347e8e8d",
+                            displayName: "auth-username-password-form-display-name",
+                            helpText: "auth-username-password-form-help-text",
+                            iconCssClass: "kcAuthenticatorPasswordClass"
+                        },
+                        {
+                            authExecId: "4cb60872-ce0d-4c8f-a806-e651ed77994b",
+                            displayName: "webauthn-passwordless-display-name",
+                            helpText: "webauthn-passwordless-help-text",
+                            iconCssClass: "kcAuthenticatorWebAuthnPasswordlessClass"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};

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 />
+};