Rework the storybook

2024-07-29 05:12:31 +02:00
parent 5221fb3479
commit 386a8d7cd7
16 changed files with 367 additions and 1219 deletions
--- a/stories/intro/intro.stories.tsx
+++ b/stories/intro/intro.stories.tsx
@ -0,0 +1,90 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { KeycloakifyRotatingLogo } from "./KeycloakifyRotatingLogo";
+import { useInsertLinkTags } from "../../dist/tools/useInsertLinkTags";
+import { useOnFistMount } from "../../dist/tools/useOnFirstMount";
+import { tss } from "../tss";
+
+const meta = {
+    title: "Introduction"
+} satisfies Meta<any>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const WhatIsThisWebsite: Story = {
+    render: () => <Introduction />
+};
+
+function Introduction() {
+    console.log(window.location.href);
+
+    useInsertLinkTags({
+        componentOrHookName: "Template",
+        hrefs: []
+    });
+
+    const { classes, theme } = useStyles();
+
+    return (
+        <div className={classes.root}>
+            <div className={classes.content}>
+                <div className={classes.keycloakifyLogoWrapper}>
+                    <KeycloakifyRotatingLogo className={classes.keycloakifyLogo} />
+                </div>
+                <h1>
+                    <a href={theme.brandUrl}>Keycloakify </a> Storybook
+                </h1>
+
+                <p>
+                    This website showcases all the Keycloak user-facing pages of the Login and{" "}
+                    <a href="https://docs.keycloakify.dev/account-theme#multi-page">Account Multi-Page theme</a>.<br />
+                    The storybook serves as a reference to help you determine which pages you would like to personalize.
+                    <br />
+                    These pages are a direct React adaptation of the{" "}
+                    <a href="https://github.com/keycloak/keycloak/tree/24.0.4/themes/src/main/resources/theme/base" target="_blank">
+                        built-in FreeMarker Keycloak pages
+                    </a>
+                    .
+                </p>
+            </div>
+        </div>
+    );
+}
+
+const useStyles = tss.withName({ Introduction }).create(({ isDark, theme }) => ({
+    root: {
+        height: "100vh",
+        color: isDark ? "white" : "black",
+        backgroundColor: theme.appContentBg,
+        fontFamily: "'Work Sans'",
+        fontSize: "14px",
+        lineHeight: "24px",
+        WebkitFontSmoothing: "antialiased",
+        "& a": {
+            color: theme.colorSecondary,
+            textDecoration: "none",
+            "&:hover": {
+                textDecoration: "underline"
+            }
+        },
+        "& h1": {
+            fontSize: "32px",
+            marginBottom: 35
+        },
+        display: "flex",
+        justifyContent: "center"
+    },
+    content: {
+        maxWidth: 750,
+        textAlign: "center"
+    },
+    keycloakifyLogoWrapper: {
+        display: "flex",
+        justifyContent: "center"
+    },
+    keycloakifyLogo: {
+        width: 400
+    }
+}));