refactor(storybook): merge duplicate types

.storybook/data.ts

@@ -1,28 +1,16 @@
 import { KcContextBase, getKcContext } from "keycloakify/lib/getKcContext";
 import type { DeepPartial } from "keycloakify/lib/tools/DeepPartial";
 import type { ExtendsKcContextBase } from "keycloakify/lib/getKcContext/getKcContextFromWindow";
+import type { KcContextExtension } from "keycloak-theme/kcContext";
 
-type KcContextExt =
-    | { pageId: "my-extra-page-1.ftl"; }
-    | { pageId: "my-extra-page-2.ftl"; someCustomValue: string; }
-    // NOTE: register.ftl is deprecated in favor of register-user-profile.ftl
-    // but let's say we use it anyway and have this plugin enabled: https://github.com/micedre/keycloak-mail-whitelisting
-    // keycloak-mail-whitelisting define the non standard ftl global authorizedMailDomains, we declare it here.
-    | { pageId: "register.ftl"; authorizedMailDomains: string[]; }
 
 export const useKcStoryData = (mockData: (
-    { pageId: KcContextBase['pageId'] | KcContextExt['pageId'] } & DeepPartial<ExtendsKcContextBase<KcContextExt>>
+    { pageId: KcContextBase['pageId'] | KcContextExtension['pageId'] } & DeepPartial<ExtendsKcContextBase<KcContextExtension>>
 )) => {
-
+    const { kcContext } = getKcContext<KcContextExtension>({ mockPageId: mockData.pageId, mockData: [mockData] })
-    const { kcContext } = getKcContext<KcContextExt>({
+    return { kcContext: kcContext as NonNullable<typeof kcContext> }
-        mockPageId: mockData.pageId,
-        mockData: [mockData]
-    })
-    if (!kcContext) throw new Error("no kcContext")
-    return { kcContext }
 }
 
-
 export const socialProviders = [
     { loginUrl: 'google', alias: 'google', providerId: 'google', displayName: 'Google' },
     { loginUrl: 'microsoft', alias: 'microsoft', providerId: 'microsoft', displayName: 'Microsoft' },

src/keycloak-theme/kcContext.ts

@@ -1,11 +1,6 @@
 import { getKcContext } from "keycloakify/lib/getKcContext";
 
-//NOTE: In most of the cases you do not need to overload the KcContext, you can 
+export type KcContextExtension =
-// just call getKcContext(...) without type arguments.  
-// You want to overload the KcContext only if:  
-// - You have custom plugins that add some values to the context (like https://github.com/micedre/keycloak-mail-whitelisting that adds authorizedMailDomains)
-// - You want to add support for extra pages that are not yey featured by default, see: https://docs.keycloakify.dev/contributing#adding-support-for-a-new-page
-export const { kcContext } = getKcContext<
 	// NOTE: A 'keycloakify' field must be added 
 	// in the package.json to generate theses extra pages
 	// https://docs.keycloakify.dev/build-options#keycloakify.extrapages
@@ -14,8 +9,14 @@ export const { kcContext } = getKcContext<
 	// NOTE: register.ftl is deprecated in favor of register-user-profile.ftl
 	// but let's say we use it anyway and have this plugin enabled: https://github.com/micedre/keycloak-mail-whitelisting
 	// keycloak-mail-whitelisting define the non standard ftl global authorizedMailDomains, we declare it here.
-	| { pageId: "register.ftl"; authorizedMailDomains: string[]; }
+	| { pageId: "register.ftl"; authorizedMailDomains: string[]; };
->({
+
+//NOTE: In most of the cases you do not need to overload the KcContext, you can 
+// just call getKcContext(...) without type arguments.  
+// You want to overload the KcContext only if:  
+// - You have custom plugins that add some values to the context (like https://github.com/micedre/keycloak-mail-whitelisting that adds authorizedMailDomains)
+// - You want to add support for extra pages that are not yey featured by default, see: https://docs.keycloakify.dev/contributing#adding-support-for-a-new-page
+export const { kcContext } = getKcContext<KcContextExtension>({
 	// Uncomment to test the login page for development.
 	//mockPageId: "login.ftl",
 	mockData: [
@@ -83,12 +84,12 @@ export const { kcContext } = getKcContext<
 			],
 			// Simulate we got an error with the email field
 			messagesPerField: {
-				printIfExists: <T>(fieldName: string, className: T) => { console.log({ fieldName}); return fieldName === "email" ? className : undefined; },
+				printIfExists: <T>(fieldName: string, className: T) => { console.log({ fieldName }); return fieldName === "email" ? className : undefined; },
-				existsError: (fieldName: string)=> fieldName === "email",
+				existsError: (fieldName: string) => fieldName === "email",
 				get: (fieldName: string) => `Fake error for ${fieldName}`,
 				exists: (fieldName: string) => fieldName === "email"
 			},
-			
+
 		}
 	]
 });