@oussemasahbeni/keycloakify-login-shadcn 250004.0.3 → 250004.0.8

package/keycloak-theme/login/pages/error/Page.stories.tsx

@@ -11,75 +11,63 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    render: () => <KcPageStory />
-};
+export const Default: Story = {};
+
 export const Arabic: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "ar",
-                    rtl: true
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "ar",
+                rtl: true
+            }
+        }
+    }
 };
 export const French: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "fr"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "fr",
+                rtl: false
+            }
+        }
+    }
 };
 
 export const WithAnotherMessage: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                message: { summary: "With another error message" }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            message: { summary: "With another error message" }
+        }
+    }
 };
 
 export const WithHtmlErrorMessage: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                message: {
-                    summary:
-                        "<strong>Error:</strong> Something went wrong. <a href='https://example.com'>Go back</a>"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            message: {
+                summary:
+                    "<strong>Error:</strong> Something went wrong. <a href='https://example.com'>Go back</a>"
+            }
+        }
+    }
 };
 export const FrenchError: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: { currentLanguageTag: "fr" },
-                message: { summary: "Une erreur s'est produite" }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: { currentLanguageTag: "fr" },
+            message: { summary: "Une erreur s'est produite" }
+        }
+    }
 };
 export const WithSkipLink: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                message: { summary: "An error occurred" },
-                skipLink: true,
-                client: {
-                    baseUrl: "https://example.com"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            message: { summary: "An error occurred" },
+            skipLink: true,
+            client: {
+                baseUrl: "https://example.com"
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/error/Page.tsx

@@ -1,42 +1,43 @@
-
-import { Alert, AlertDescription } from '@/components/ui/alert';
-import { Button } from '@/components/ui/button';
-import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
-import { assert } from "tsafe/assert";
-import { useKcContext } from "../../KcContext";
-import { Template } from "../../components/Template";
-import { useI18n } from "../../i18n";
-
-export function Page() {
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "error.ftl");
-
-    const { msg } = useI18n();
-
-    return (
-        <Template displayMessage={false} headerNode={msg("errorTitle")}>
-            <div id="kc-error-message">
-                <Alert variant="error" className="my-3">
-                    <AlertDescription>
-                        <span
-                            className="instruction"
-                            dangerouslySetInnerHTML={{
-                                __html: kcSanitize(kcContext.message.summary)
-                            }}
-                        />
-                    </AlertDescription>
-                </Alert>
-
-                {!kcContext.skipLink && kcContext.client !== undefined && kcContext.client.baseUrl !== undefined && (
-                    <div className="mt-2 flex justify-end">
-                        <Button type="button">
-                            <a id="backToApplication" href={kcContext.client.baseUrl}>
-                                {msg("backToApplication")}
-                            </a>
-                        </Button>
-                    </div>
-                )}
-            </div>
-        </Template>
-    );
-}
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { kcSanitize } from "@keycloakify/login-ui/kcSanitize";
+import { assert } from "tsafe/assert";
+import { useKcContext } from "../../KcContext";
+import { Template } from "../../components/Template";
+import { useI18n } from "../../i18n";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "error.ftl");
+
+    const { msg } = useI18n();
+
+    return (
+        <Template displayMessage={false} headerNode={msg("errorTitle")}>
+            <div id="kc-error-message">
+                <Alert variant="error" className="my-3">
+                    <AlertDescription>
+                        <span
+                            className="instruction"
+                            dangerouslySetInnerHTML={{
+                                __html: kcSanitize(kcContext.message.summary)
+                            }}
+                        />
+                    </AlertDescription>
+                </Alert>
+
+                {!kcContext.skipLink &&
+                    kcContext.client !== undefined &&
+                    kcContext.client.baseUrl !== undefined && (
+                        <div className="mt-2 flex justify-end">
+                            <Button type="button">
+                                <a id="backToApplication" href={kcContext.client.baseUrl}>
+                                    {msg("backToApplication")}
+                                </a>
+                            </Button>
+                        </div>
+                    )}
+            </div>
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/error/index.ts

@@ -1,3 +1,3 @@
-import { Page } from "./Page";
-
-export default Page;
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/frontchannel-logout/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "frontchannel-logout.ftl" });
 
 const meta = {
@@ -12,40 +11,34 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    render: () => <KcPageStory />
-};
+export const Default: Story = {};
+
 export const Arabic: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "ar",
-                    rtl: true
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "ar",
+                rtl: true
+            }
+        }
+    }
 };
 export const French: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "fr"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "fr"
+            }
+        }
+    }
 };
+
 export const WithoutRedirectUrl: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                logout: {
-                    clients: []
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            logout: {
+                clients: []
+            }
+        }
+    }
 };

package/keycloak-theme/login/pages/frontchannel-logout/Page.tsx

@@ -1,84 +1,82 @@
-import { Alert, AlertDescription } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import { useI18n } from '@/login/i18n';
-import { useKcContext } from '@/login/KcContext';
-import { useEffect, useState } from "react";
-import { FiCheck, FiExternalLink } from "react-icons/fi";
-import { assert } from "tsafe/assert";
-import { Template } from "../../components/Template";
-
-export function Page() {
-
-    const { kcContext } = useKcContext();
-    assert(kcContext.pageId === "frontchannel-logout.ftl");
-
-    const { msg, msgStr } = useI18n();
-    const [iframeLoadCount, setIframeLoadCount] = useState(0);
-
-    useEffect(() => {
-        if (!kcContext.logout.logoutRedirectUri) {
-            return;
-        }
-
-        if (iframeLoadCount !== kcContext.logout.clients.length) {
-            return;
-        }
-
-        window.location.replace(kcContext.logout.logoutRedirectUri);
-    }, [iframeLoadCount]);
-
-
-    return (
-        <Template
-            documentTitle={msgStr("frontchannel-logout.title")}
-            headerNode={msg("frontchannel-logout.title")}
-        >
-            <Alert variant="info" className="my-6">
-                <AlertDescription>
-                    <p>{msg("frontchannel-logout.message")}</p>
-                </AlertDescription>
-            </Alert>
-
-            {kcContext.logout.clients.length > 0 && (
-                <div className="my-6 space-y-3">
-                    <div className="space-y-2">
-                        {kcContext.logout.clients.map((client, index) => (
-                            <div
-                                key={client.name || index}
-                                className="flex items-center gap-3 p-3 rounded-lg border bg-muted/30"
-                            >
-                                <FiCheck className="h-4 w-4 text-green-600" />
-                                <span className="text-sm font-medium">
-                                    {client.name || `Application ${index + 1}`}
-                                </span>
-                                <iframe
-                                    src={client.frontChannelLogoutUrl}
-                                    style={{ display: "none" }}
-                                    title={`Logout frame for ${client.name}`}
-                                    onLoad={() => {
-                                        setIframeLoadCount(count => count + 1);
-                                    }}
-                                />
-                            </div>
-                        ))}
-                    </div>
-                </div>
-            )}
-
-            {kcContext.logout.logoutRedirectUri && (
-                <div className="mt-6 flex justify-center">
-                    <Button asChild size="lg">
-                        <a
-                            id="continue"
-                            href={kcContext.logout.logoutRedirectUri}
-                            className="flex items-center gap-2"
-                        >
-                            {msg("doContinue")}
-                            <FiExternalLink className="h-4 w-4" />
-                        </a>
-                    </Button>
-                </div>
-            )}
-        </Template>
-    );
-}
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { useI18n } from "@/login/i18n";
+import { useKcContext } from "@/login/KcContext";
+import { useEffect, useState } from "react";
+import { FiCheck, FiExternalLink } from "react-icons/fi";
+import { assert } from "tsafe/assert";
+import { Template } from "../../components/Template";
+
+export function Page() {
+    const { kcContext } = useKcContext();
+    assert(kcContext.pageId === "frontchannel-logout.ftl");
+
+    const { msg, msgStr } = useI18n();
+    const [iframeLoadCount, setIframeLoadCount] = useState(0);
+
+    useEffect(() => {
+        if (!kcContext.logout.logoutRedirectUri) {
+            return;
+        }
+
+        if (iframeLoadCount !== kcContext.logout.clients.length) {
+            return;
+        }
+
+        window.location.replace(kcContext.logout.logoutRedirectUri);
+    }, [iframeLoadCount]);
+
+    return (
+        <Template
+            documentTitle={msgStr("frontchannel-logout.title")}
+            headerNode={msg("frontchannel-logout.title")}
+        >
+            <Alert variant="info" className="my-6">
+                <AlertDescription>
+                    <p>{msg("frontchannel-logout.message")}</p>
+                </AlertDescription>
+            </Alert>
+
+            {kcContext.logout.clients.length > 0 && (
+                <div className="my-6 space-y-3">
+                    <div className="space-y-2">
+                        {kcContext.logout.clients.map((client, index) => (
+                            <div
+                                key={client.name || index}
+                                className="flex items-center gap-3 p-3 rounded-lg border bg-muted/30"
+                            >
+                                <FiCheck className="h-4 w-4 text-green-600" />
+                                <span className="text-sm font-medium">
+                                    {client.name || `Application ${index + 1}`}
+                                </span>
+                                <iframe
+                                    src={client.frontChannelLogoutUrl}
+                                    style={{ display: "none" }}
+                                    title={`Logout frame for ${client.name}`}
+                                    onLoad={() => {
+                                        setIframeLoadCount(count => count + 1);
+                                    }}
+                                />
+                            </div>
+                        ))}
+                    </div>
+                </div>
+            )}
+
+            {kcContext.logout.logoutRedirectUri && (
+                <div className="mt-6 flex justify-center">
+                    <Button asChild size="lg">
+                        <a
+                            id="continue"
+                            href={kcContext.logout.logoutRedirectUri}
+                            className="flex items-center gap-2"
+                        >
+                            {msg("doContinue")}
+                            <FiExternalLink className="h-4 w-4" />
+                        </a>
+                    </Button>
+                </div>
+            )}
+        </Template>
+    );
+}

package/keycloak-theme/login/pages/frontchannel-logout/index.ts

@@ -1,3 +1,3 @@
-import { Page } from "./Page";
-
-export default Page;
+import { Page } from "./Page";
+
+export default Page;

package/keycloak-theme/login/pages/idp-review-user-profile/Page.stories.tsx

@@ -1,6 +1,5 @@
 import { createKcPageStory, type Meta, type StoryObj } from "../../mocks/KcPageStory";
 
-
 const { KcPageStory } = createKcPageStory({ pageId: "idp-review-user-profile.ftl" });
 
 const meta = {
@@ -12,74 +11,62 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    render: () => <KcPageStory />
-};
+export const Default: Story = {};
 export const Arabic: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "ar",
-                    rtl: true
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "ar",
+                rtl: true
+            }
+        }
+    }
 };
 export const French: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                locale: {
-                    currentLanguageTag: "fr"
-                }
-            }}
-        />
-    )
+    args: {
+        kcContext: {
+            locale: {
+                currentLanguageTag: "fr"
+            }
+        }
+    }
 };
 export const WithFormValidationErrors: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                messagesPerField: {
-                    existsError: (fieldName: string) =>
-                        ["email", "firstName"].includes(fieldName),
-                    get: (fieldName: string) => {
-                        if (fieldName === "email") return "Invalid email format.";
-                        if (fieldName === "firstName") return "First name is required.";
-                    }
+    args: {
+        kcContext: {
+            messagesPerField: {
+                existsError: (fieldName: string) =>
+                    ["email", "firstName"].includes(fieldName),
+                get: (fieldName: string) => {
+                    if (fieldName === "email") return "Invalid email format.";
+                    if (fieldName === "firstName") return "First name is required.";
                 }
-            }}
-        />
-    )
+            }
+        }
+    }
 };
 export const WithReadOnlyFields: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                profile: {
-                    attributesByName: {
-                        email: { value: "jane.doe@example.com", readOnly: true },
-                        firstName: { value: "Jane", readOnly: false }
-                    }
+    args: {
+        kcContext: {
+            profile: {
+                attributesByName: {
+                    email: { value: "jane.doe@example.com", readOnly: true },
+                    firstName: { value: "Jane", readOnly: false }
                 }
-            }}
-        />
-    )
+            }
+        }
+    }
 };
 export const WithPrefilledFormFields: Story = {
-    render: () => (
-        <KcPageStory
-            kcContext={{
-                profile: {
-                    attributesByName: {
-                        firstName: { value: "Jane" },
-                        lastName: { value: "Doe" },
-                        email: { value: "jane.doe@example.com" }
-                    }
+    args: {
+        kcContext: {
+            profile: {
+                attributesByName: {
+                    firstName: { value: "Jane" },
+                    lastName: { value: "Doe" },
+                    email: { value: "jane.doe@example.com" }
                 }
-            }}
-        />
-    )
+            }
+        }
+    }
 };