Migrate to storybook 7

src/keycloak-theme/account/createPageStory.tsx

@@ -15,7 +15,13 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: {
             storyPartialKcContext: params.kcContext
         });
 
-        return <KcApp kcContext={kcContext} />;
+        return (
+            <>
+                {/* If you import custom fonts in your index.html you have to import them in storybook as well*/}
+                <link rel="stylesheet" type="text/css" href={`${import.meta.env.BASE_URL}fonts/WorkSans/font.css`} />
+                <KcApp kcContext={kcContext} />
+            </>
+        );
 
     }
 

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

@@ -1,18 +1,22 @@
 
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta, StoryObj } from '@storybook/react';
 import { createPageStory } from "../createPageStory";
 
 const { PageStory } = createPageStory({
     pageId: "password.ftl"
 });
 
-export default {
+const meta = {
     title: "account/Password",
     component: PageStory,
-} as ComponentMeta<typeof PageStory>;
+} satisfies Meta<typeof PageStory>;
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default: ComponentStory<typeof PageStory> = () => <PageStory
-    kcContext={{
-        message: { type: "success", summary: "This is a test message" }
-    }}
-/>;
+export const Default: Story = {
+    render: () => <PageStory
+        kcContext={{
+            message: { type: "success", summary: "This is a test message" }
+        }}
+    />
+};