Migrate to Keycloakify v10

src/account/KcApp.tsx

@@ -1,9 +1,11 @@
 import { Suspense, lazy } from "react";
-import type { KcContext } from "./kcContext";
+import type { PageProps } from "keycloakify/account";
+import type { KcContext } from "./KcContext";
 import { useI18n } from "./i18n";
-
+import Template from "keycloakify/account/Template";
 const Fallback = lazy(() => import("keycloakify/account/Fallback"));
-const Template = lazy(() => import("./Template"));
+
+const classes = {} satisfies PageProps["classes"];
 
 export default function KcApp(props: { kcContext: KcContext }) {
     const { kcContext } = props;
@@ -19,14 +21,17 @@ export default function KcApp(props: { kcContext: KcContext }) {
             {(() => {
                 switch (kcContext.pageId) {
                     default:
-                        return <Fallback
-                            {...{
-                                kcContext,
-                                i18n,
-                                Template,
-                            }}
-                            doUseDefaultCss={true}
-                        />
+                        return (
+                            <Fallback
+                                {...{
+                                    kcContext,
+                                    i18n,
+                                    classes,
+                                    Template
+                                }}
+                                doUseDefaultCss={true}
+                            />
+                        );
                 }
             })()}
         </Suspense>

src/account/KcContext.ts

@@ -5,4 +5,7 @@ export type KcContextExtraProperties = {};
 
 export type KcContextExtraPropertiesPerPage = {};
 
-export type KcContext = ExtendKcContext<KcContextExtraProperties, KcContextExtraPropertiesPerPage>;
+export type KcContext = ExtendKcContext<
+    KcContextExtraProperties,
+    KcContextExtraPropertiesPerPage
+>;

src/account/PageStory.tsx

@@ -1,10 +1,10 @@
 import type { DeepPartial } from "keycloakify/tools/DeepPartial";
-import type { KcContext } from "./kcContext";
+import type { KcContext } from "./KcContext";
 import { createGetKcContextMock } from "keycloakify/account";
 import type {
     KcContextExtraProperties,
     KcContextExtraPropertiesPerPage
-} from "./kcContext";
+} from "./KcContext";
 import KcApp from "./KcApp";
 
 const kcContextExtraProperties: KcContextExtraProperties = {};
@@ -17,10 +17,14 @@ export const { getKcContextMock } = createGetKcContextMock({
     overridesPerPage: {}
 });
 
-export function createPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
+export function createPageStory<PageId extends KcContext["pageId"]>(params: {
+    pageId: PageId;
+}) {
     const { pageId } = params;
 
-    function PageStory(props: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+    function PageStory(props: {
+        kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>>;
+    }) {
         const { kcContext: overrides } = props;
 
         const kcContextMock = getKcContextMock({
@@ -28,13 +32,8 @@ export function createPageStory<PageId extends KcContext["pageId"]>(params: { pa
             overrides
         });
 
-        return (
-            <>
-                <KcApp kcContext={kcContextMock} />
-            </>
-        );
+        return <KcApp kcContext={kcContextMock} />;
     }
 
     return { PageStory };
 }
-