Moving on with setup of the reference storybook #274

stories/login/KcApp.tsx

@@ -0,0 +1,27 @@
+import React, { lazy, Suspense } from "react";
+import Fallback from "../../dist/login";
+import type { KcContext } from "./kcContext";
+import { useI18n } from "./i18n";
+
+const DefaultTemplate = lazy(() => import("../../dist/login/Template"));
+
+export default function KcApp(props: { kcContext: KcContext }) {
+    const { kcContext } = props;
+
+    const i18n = useI18n({ kcContext });
+
+    if (i18n === null) {
+        return null;
+    }
+
+    return (
+        <Suspense>
+            {(() => {
+                switch (kcContext.pageId) {
+                    default:
+                        return <Fallback {...{ kcContext, i18n }} Template={DefaultTemplate} doUseDefaultCss={true} />;
+                }
+            })()}
+        </Suspense>
+    );
+}

stories/login/Login.stories.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+import type { ComponentMeta } from "@storybook/react";
+import { createPageStory } from "./createPageStory";
+
+const pageId = "login.ftl";
+
+const { PageStory } = createPageStory({ pageId });
+
+const meta: ComponentMeta<any> = {
+    "title": `login/${pageId}`,
+    "component": PageStory
+};
+
+export default meta;
+
+export const Default = () => <PageStory />;
+
+export const WithoutPasswordField = () => (
+    <PageStory
+        kcContext={{
+            realm: { password: false }
+        }}
+    />
+);
+
+export const WithoutRegistration = () => (
+    <PageStory
+        kcContext={{
+            realm: { registrationAllowed: false }
+        }}
+    />
+);
+
+export const WithoutRememberMe = () => (
+    <PageStory
+        kcContext={{
+            realm: { rememberMe: false }
+        }}
+    />
+);
+
+export const WithoutPasswordReset = () => (
+    <PageStory
+        kcContext={{
+            realm: { resetPasswordAllowed: false }
+        }}
+    />
+);
+
+export const WithEmailAsUsername = () => (
+    <PageStory
+        kcContext={{
+            realm: { loginWithEmailAllowed: false }
+        }}
+    />
+);
+
+export const WithPresetUsername = () => (
+    <PageStory
+        kcContext={{
+            login: { username: "max.mustermann@mail.com" }
+        }}
+    />
+);
+
+export const WithImmutablePresetUsername = () => (
+    <PageStory
+        kcContext={{
+            login: { username: "max.mustermann@mail.com" },
+            usernameEditDisabled: true
+        }}
+    />
+);
+
+export const WithSocialProviders = () => (
+    <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" }
+                ]
+            }
+        }}
+    />
+);

stories/login/createPageStory.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import { getKcContext, type KcContext } from "./kcContext";
+import KcApp from "./KcApp";
+import type { DeepPartial } from "../../dist/tools/DeepPartial";
+
+export function createPageStory<PageId extends KcContext["pageId"]>(params: { pageId: PageId }) {
+    const { pageId } = params;
+
+    function PageStory(params: { kcContext?: DeepPartial<Extract<KcContext, { pageId: PageId }>> }) {
+        const { kcContext } = getKcContext({
+            mockPageId: pageId,
+            storyPartialKcContext: params.kcContext
+        });
+
+        return <KcApp kcContext={kcContext} />;
+    }
+
+    return { PageStory };
+}

stories/login/i18n.ts

@@ -0,0 +1,5 @@
+import { createUseI18n } from "../../dist/login";
+
+export const { useI18n } = createUseI18n({});
+
+export type I18n = NonNullable<ReturnType<typeof useI18n>>;

stories/login/kcContext.ts

@@ -0,0 +1,7 @@
+import { createGetKcContext } from "../../dist/login";
+
+export const { getKcContext } = createGetKcContext();
+
+const { kcContext } = getKcContext();
+
+export type KcContext = NonNullable<typeof kcContext>;