Migrate to storybook 7

src/keycloak-theme/login/pages/Login.stories.tsx

@@ -1,98 +1,83 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { createPageStory } from "../createPageStory";
 
 const { PageStory } = createPageStory({
     pageId: "login.ftl"
 });
 
-export default {
+const meta = {
     title: "login/Login",
     component: PageStory,
-} as ComponentMeta<typeof PageStory>;
+} satisfies Meta<typeof PageStory>;
 
-export const Default: ComponentStory<typeof PageStory> = () => <PageStory />;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const WithoutPasswordField: ComponentStory<typeof PageStory> = () => (
-    <PageStory
-        kcContext={{
-            realm: { password: false }
-        }}
-    />
-);
+export const Default: Story = {
+    render: () => <PageStory />,
+};
 
-export const WithoutRegistration: ComponentStory<typeof PageStory> = () => (
-    <PageStory
-        kcContext={{
-            realm: { registrationAllowed: false }
-        }}
-    />
-);
+export const WithoutPasswordField: Story = {
+    render: () => <PageStory kcContext={{ realm: { password: false } }} />,
+};
 
-export const WithoutRememberMe: ComponentStory<typeof PageStory> = () => (
-    <PageStory
-        kcContext={{
-            realm: { rememberMe: false }
-        }}
-    />
-);
+export const WithoutRegistration: Story = {
+    render: () => <PageStory kcContext={{ realm: { registrationAllowed: false } }} />,
+};
 
-export const WithoutPasswordReset: ComponentStory<typeof PageStory> = () => (
-    <PageStory
-        kcContext={{
-            realm: { resetPasswordAllowed: false }
-        }}
-    />
-);
+export const WithoutRememberMe: Story = {
+    render: () => <PageStory kcContext={{ realm: { rememberMe: false } }} />,
+};
 
-export const WithEmailAsUsername: ComponentStory<typeof PageStory> = () => (
-    <PageStory
-        kcContext={{
-            realm: { loginWithEmailAllowed: false }
-        }}
-    />
-);
+export const WithoutPasswordReset: Story = {
+    render: () => <PageStory kcContext={{ realm: { resetPasswordAllowed: false } }} />,
+};
 
-export const WithPresetUsername: ComponentStory<typeof PageStory> = () => (
-    <PageStory
-        kcContext={{
-            login: { username: "max.mustermann@mail.com" }
-        }}
-    />
-);
+export const WithEmailAsUsername: Story = {
+    render: () => <PageStory kcContext={{ realm: { loginWithEmailAllowed: false } }} />,
+};
 
-export const WithImmutablePresetUsername: ComponentStory<typeof PageStory> = () => (
-    <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: ComponentStory<typeof PageStory> = () => (
-    <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' },
+                    ],
+                },
+            }}
+        />
+    ),
+};

src/keycloak-theme/login/pages/LoginResetPassword.stories.tsx

@@ -1,23 +1,30 @@
 //This is to show that you can create stories for pages that you haven't overloaded.
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { createPageStory } from "../createPageStory";
 
 const { PageStory } = createPageStory({
     pageId: "login-reset-password.ftl"
 });
 
-export default {
+const meta = {
     title: "login/LoginResetPassword",
     component: PageStory,
-} as ComponentMeta<typeof PageStory>;
+} satisfies Meta<typeof PageStory>;
 
-export const Default: ComponentStory<typeof PageStory> = () => <PageStory />;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const WithEmailAsUsername: ComponentStory<typeof PageStory> = () => (
-    <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 }
+            }}
+        />
+    )
+};

src/keycloak-theme/login/pages/MyExtraPage2.stories.tsx

@@ -1,21 +1,28 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { createPageStory } from "../createPageStory";
 
 const { PageStory } = createPageStory({
     pageId: "my-extra-page-2.ftl"
 });
 
-export default {
+const meta = {
     title: "login/MyExtraPage2",
     component: PageStory,
-} as ComponentMeta<typeof PageStory>;
+} satisfies Meta<typeof PageStory>;
 
-export const Default: ComponentStory<typeof PageStory> = () => <PageStory />;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const WitAbc: ComponentStory<typeof PageStory> = () => (
-    <PageStory
-        kcContext={{
-            someCustomValue: "abc"
-        }}
-    />
-);
+export const Default: Story = {
+    render: () => <PageStory />
+};
+
+export const WitAbc: Story = {
+    render: () => (
+        <PageStory
+            kcContext={{
+                someCustomValue: "abc"
+            }}
+        />
+    )
+};

src/keycloak-theme/login/pages/Terms.stories copy.tsx

@@ -1,13 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import { createPageStory } from "../createPageStory";
-
-const { PageStory } = createPageStory({
-    pageId: "terms.ftl"
-});
-
-export default {
-    title: "login/Terms",
-    component: PageStory,
-} as ComponentMeta<typeof PageStory>;
-
-export const Primary: ComponentStory<typeof PageStory> = () => <PageStory />;

src/keycloak-theme/login/pages/Terms.stories.tsx

@@ -1,13 +1,18 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { createPageStory } from "../createPageStory";
 
 const { PageStory } = createPageStory({
     pageId: "terms.ftl"
 });
 
-export default {
+const meta = {
     title: "login/Terms",
     component: PageStory,
-} as ComponentMeta<typeof PageStory>;
+} satisfies Meta<typeof PageStory>;
 
-export const Primary: ComponentStory<typeof PageStory> = () => <PageStory />;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+    render: () => <PageStory />
+};

src/keycloak-theme/login/pages/Terms.tsx

@@ -7,8 +7,6 @@ import { evtTermMarkdown } from "keycloakify/login/lib/useDownloadTerms";
 import type { KcContext } from "../kcContext";
 import type { I18n } from "../i18n";
 import { useDownloadTerms } from "keycloakify/login";
-import tos_en_url from "../assets/tos_en.md";
-import tos_fr_url from "../assets/tos_fr.md";
 
 export default function Terms(props: PageProps<Extract<KcContext, { pageId: "terms.ftl" }>, I18n>) {
     const { kcContext, i18n, doUseDefaultCss, Template, classes } = props;
@@ -28,18 +26,11 @@ export default function Terms(props: PageProps<Extract<KcContext, { pageId: "ter
 
             const tos_url = (() => {
                 switch (currentLanguageTag) {
-                    case "fr": return tos_fr_url;
-                    default: return tos_en_url;
+                    case "fr": return `${import.meta.env.BASE_URL}terms/fr.md`;
+                    default: return `${import.meta.env.BASE_URL}terms/en.md`;
                 }
             })();
 
-
-            if ("__STORYBOOK_ADDONS" in window) {
-                // NOTE: In storybook, when you import a .md file you get the content of the file.
-                // In Create React App on the other hand you get an url to the file.
-                return tos_url;
-            }
-
             const markdownString = await fetch(tos_url).then(response => response.text());
 
             return markdownString;