More homogeneous storybook setup

2024-06-03 00:11:19 +02:00
parent e011fb094c
commit ba4d9675a8
34 changed files with 1235 additions and 1130 deletions
--- a/stories/login/pages/Error.stories.tsx
+++ b/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" }
+            }}
+        />
+    )
+};
--- a/stories/login/pages/IdpReviewUserProfile.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/Info.stories.tsx
+++ b/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"]
+            }}
+        />
+    )
+};
--- a/stories/login/pages/Login.stories.tsx
+++ b/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"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
--- a/stories/login/pages/LoginConfigTotp.stories.tsx
+++ b/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)
+                }
+            }}
+        />
+    )
+};
--- a/stories/login/pages/LoginDeviceVerifyUserCode.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/LoginIdpLinkConfirm.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/LoginIdpLinkEmail.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/LoginOauthGrant.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/LoginOtp.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/LoginPageExpired.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/LoginPassword.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/LoginResetPassword.stories.tsx
+++ b/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
+                }
+            }}
+        />
+    )
+};
--- a/stories/login/pages/LoginUpdatePassword.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/LoginUpdateProfile.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/LoginUsername.stories.tsx
+++ b/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
+                }
+            }}
+        />
+    )
+};
--- a/stories/login/pages/LoginVerifyEmail.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/LogoutConfirm.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/Register.stories.tsx
+++ b/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"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
--- a/stories/login/pages/SamlPostForm.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/SelectAuthenticator.stories.tsx
+++ b/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"
+                        }
+                    ]
+                }
+            }}
+        />
+    )
+};
--- a/stories/login/pages/Terms.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/UpdateEmail.stories.tsx
+++ b/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 />
+};
--- a/stories/login/pages/WebauthnAuthenticate.stories.tsx
+++ b/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 />
+};