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

src/keycloak-theme/login/Template.tsx

@@ -60,12 +60,12 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
                     style={{ "fontFamily": '"Work Sans"' }}
                 >
                     {/* 
-                        This is just to show you how it can be done but this is not the best option for importing assets.
-                        See: https://docs.keycloakify.dev/importing-assets#importing-custom-assets
+                        Here we are referencing the `keycloakify-logo.png` in the `public` directory.  
+                        When possible don't use this approach, instead ...
                     */}
                     <img src={`${import.meta.env.BASE_URL}keycloakify-logo.png`} alt="Keycloakify logo" width={50} />
                     {msg("loginTitleHtml", realm.displayNameHtml)}!!!
-                    {/* This is the preferred way to use assets */}
+                    {/* ...rely on the bundler to import your assets, it's more efficient */}
                     <img src={keycloakifyLogoPngUrl} alt="Keycloakify logo" width={50} />
                 </div>
             </div>