web: Add storybook (#5865)

* \#\# Details web: replace lingui with lit/localize \#\# Changes This rather massive shift replaces the lingui and `t()` syntax with lit-localize, XLIFF, and the `msg()` syntax used by lit-localize. 90% of this work was mechanized; simple perl scripts found and replaced all uses of `t()` with the appropriate corresponding syntax for `msg()` and `msg(str())`. The XLIFF files were auto-generated from the PO files. They have not been audited, and they should be checked over by professional translators. The actual _strings_ have not been changed, but as this was a mechanized change there is always the possibility of mis-translation-- not by the translator, but by the script. * web: revise lit/localize: fix two installation issues. * web: revise localization TL;DR: - Replaced all of Lingui's `t()` syntax with `msg()` syntax. - Mechanically (i.e with a script) converted all of the PO files to XLIFF files - Refactored the localization code to be a bit smarter: - the function `getBestMatchLocale` takes the locale lists and a requested locale, and returns the first match of: - The locale's code exactly matches the requested locale - The locale code exactly matches the prefix of the requested locale (i.e the "en" part of "en-US") - the locale code's prefix exactly matches the prefix of the requested locale This function is passed to lit-locate's `loadLocale()`. - `activateLocale()` just calls `loadLocale()` now. - `autodetectLanguage` searches the following, and picks the first that returns a valid locale object, before passing it to `loadLocale()`: - The User's settings - A `?locale=` component found in `window.location.search` - The `window.navigator.language` field - English The `msg()` only runs when it's run. This seems obvious, but it means that you cannot cache strings at load time; they must be kept inside functions that are re-run so that the `msg()` engine can look up the strings in the preferred language of the user at that moment. You can use thunks-of-strings if you really need them that way. * Including the 'xliff-converter' in case anyone wants to review it. * The xliff-converter is tagged as 'xliff-converter', but has been deleted. \#\# Details - Resolves #5171 \#\# Changes \#\#\# New Features - Adds a "Add an Application" to the LibraryView if there are no applications and the user is an administrator. \#\#\# Breaking Changes - Adds breaking change which causes \<issue\>. \#\# Checklist - [ ] Local tests pass (`ak test authentik/`) - [ ] The code has been formatted (`make lint-fix`) If an API change has been made - [ ] The API schema has been updated (`make gen-build`) If changes to the frontend have been made - [ ] The code has been formatted (`make web`) - [ ] The translation files have been updated (`make i18n-extract`) If applicable - [ ] The documentation has been updated - [ ] The documentation has been formatted (`make website`) * web: fix redundant locales for zh suite. * web: prettier pass for locale update * web: localization moderization Changed the names of the lit-localize commands to make it clear they're part of the localization effort, and not just "build" and "extract". * web: add storybook to test components * update transifex config Signed-off-by: Jens Langhammer <jens@goauthentik.io> * fix package lock? Signed-off-by: Jens Langhammer <jens@goauthentik.io> * use build not compile Signed-off-by: Jens Langhammer <jens@goauthentik.io> * web: conversion to lit-localize The CI produced a list of problems that I hadn't caught earlier, due to a typo ("localize build" is correct, "localize compile" is not) I had left in package.json. They were minor and linty, but it was still wise to fix them. * web: replace lingui with lit/locale This commit fixes some minor linting issues that were hidden by a typo in package.json. The issues were not apparently problematic from a Javascript point of view, but they pointed to sloppy thinking in the progression of types through the system, so I cleaned them up and formalized the types from LocaleModule to AkLocale. * web: replace lingui with lit/localize One problem that has repeatedly come up is that localize's templates do not produce JavaScript that conforms with our shop style. I've replaced `build-locale` with a two-step that builds the locale *and* ensures that it conforms to the shop style via `prettier` every time. * web: replace lingui with lit-locale This commit applies the most recent bundle of translations to the new lit-locale aspect component. It also revises the algorithm for *finding* the correct locale, replacing the complex fall-back with some rather straightforward regular expressions. In the case of Chinese, the fallback comes at the end of the selection list, which may not be, er, politically valuable (since Taiwan and Hong Kong come before, being exceptions that need to be tested). If we need a different order for presentation, that'll be a future feature. * web: replace lingui with lit/locale Well, that was embarassing. * web: add storybook The delta on this didn't make any sense; putting it back causes no behavioral changes. * web: add Storybook Fixed a typo in the package.json that prevented the TSC check from passing. * web: incorporate storybook This commit includes a number of type and definitional changes needed to make lit-analyze pass. In most cases, it was a matter of reassuring Lit that we were using the right type and the right type converter, or configuring the property such that it should never be called as an attribute. The most controversial change is adding the 'no-incompatible-type-binding' to the LIT analyzer configuration (found in `tsconfig.json`). This "routes around" lit-analyzer not doing very well understanding that some HTML objects can have generic property types, as long as the renderer is configured correctly. The 'no-missing-import: off' setting is required as lit-analyzer also does not use the tsconfig `paths` setting correctly and cannot find objects defined via aliases. It's a shame JSON can't support comments; these should be in the tsconfig.json file directly. As it is, I've started a README file that includes a section to record configuration decisions. Deleted the lingui.config file as we're not using it anymore * ignore storybook build in git Signed-off-by: Jens Langhammer <jens@goauthentik.io> --------- Signed-off-by: Jens Langhammer <jens@goauthentik.io> Co-authored-by: Jens Langhammer <jens@goauthentik.io>
2023-06-07 04:05:33 -07:00 · 2023-06-07 04:05:33 -07:00 · d0f0f9b29e
parent 5ede4c203a
commit d0f0f9b29e
41 changed files with 8620 additions and 168 deletions
--- a/README.md
+++ b/README.md
@ -15,7 +15,7 @@

 ## What is authentik?

-Authentik is an open-source Identity Provider that emphasizes flexibility and versatility. It can be seamlessly integrated into existing environments to support new protocols. Authentik is also a great solution for implementing sign-up, recovery, and other similar features in your application, saving you the hassle of dealing with them.
+authentik is an open-source Identity Provider that emphasizes flexibility and versatility. It can be seamlessly integrated into existing environments to support new protocols. authentik is also a great solution for implementing sign-up, recovery, and other similar features in your application, saving you the hassle of dealing with them.

 ## Installation

--- a/SECURITY.md
+++ b/SECURITY.md
@ -1,4 +1,4 @@
-Authentik takes security very seriously. We follow the rules of [responsible disclosure](https://en.wikipedia.org/wiki/Responsible_disclosure), and we urge our community to do so as well, instead of reporting vulnerabilities publicly. This allows us to patch the issue quickly, announce it's existence and release the fixed version.
+authentik takes security very seriously. We follow the rules of [responsible disclosure](https://en.wikipedia.org/wiki/Responsible_disclosure), and we urge our community to do so as well, instead of reporting vulnerabilities publicly. This allows us to patch the issue quickly, announce it's existence and release the fixed version.

 ## Supported Versions

--- a/web/.eslintrc.json
+++ b/web/.eslintrc.json
@ -7,7 +7,8 @@
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:lit/recommended",
-        "plugin:custom-elements/recommended"
+        "plugin:custom-elements/recommended",
+        "plugin:storybook/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
--- a/web/.gitignore
+++ b/web/.gitignore
@ -108,3 +108,4 @@ temp/

 # End of https://www.gitignore.io/api/node
 api/**
+storybook-static/
--- a/web/.storybook/main.ts
+++ b/web/.storybook/main.ts
@ -0,0 +1,45 @@
+import replace from "@rollup/plugin-replace";
+import type { StorybookConfig } from "@storybook/web-components-vite";
+import path from "path";
+import { cwd } from "process";
+import postcssLit from "rollup-plugin-postcss-lit";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export const isProdBuild = process.env.NODE_ENV === "production";
+export const apiBasePath = process.env.AK_API_BASE_PATH || "";
+
+const config: StorybookConfig = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@jeysal/storybook-addon-css-user-preferences",
+    ],
+    framework: {
+        name: "@storybook/web-components-vite",
+        options: {},
+    },
+    docs: {
+        autodocs: "tag",
+    },
+    async viteFinal(config) {
+        return {
+            ...config,
+            plugins: [
+                ...config.plugins,
+                postcssLit(),
+                tsconfigPaths(),
+                replace({
+                    "process.env.NODE_ENV": JSON.stringify(
+                        isProdBuild ? "production" : "development",
+                    ),
+                    "process.env.CWD": JSON.stringify(cwd()),
+                    "process.env.AK_API_BASE_PATH": JSON.stringify(apiBasePath),
+                    "preventAssignment": true,
+                }),
+            ],
+        };
+    },
+};
+
+export default config;
--- a/web/.storybook/preview.ts
+++ b/web/.storybook/preview.ts
@ -0,0 +1,20 @@
+import type { Preview } from "@storybook/web-components";
+
+// .storybook/preview.js
+
+const preview: Preview = {
+    parameters: {
+        actions: { argTypesRegex: "^on[A-Z].*" },
+        cssUserPrefs: {
+            "prefers-color-scheme": "light",
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/,
+            },
+        },
+    },
+};
+
+export default preview;
--- a/web/README.md
+++ b/web/README.md
@ -0,0 +1,23 @@
+# authentik WebUI
+
+This is the default UI for the authentik server. The documentation is going to be a little sparse
+for awhile, but at least let's get started.
+
+# Comments
+
+**NOTE:** The comments in this section are for specific changes to this repository that cannot be
+reliably documented any other way. For the most part, they contain comments related to custom
+settings in JSON files, which do not support comments.
+
+-   `tsconfig.json`:
+    -   `compilerOptions.useDefineForClassFields: false` is required to make TSC use the "classic" form
+        of field definition when compiling class definitions. Storybook does not handle the ESNext
+        proposed definition mechanism (yet).
+    -   `compilerOptions.plugins.ts-lit-plugin.rules.no-unknown-tag-name: "off"`: required to support
+        rapidoc, which exports its tag late.
+    -   `compilerOptions.plugins.ts-lit-plugin.rules.no-missing-import: "off"`: lit-analyzer currently
+        does not support path aliases very well, and cannot find the definition files associated with
+        imports using them.
+    -   `compilerOptions.plugins.ts-lit-plugin.rules.no-incompatible-type-binding: "warn"`: lit-analyzer
+        does not support generics well when parsing a subtype of `HTMLElement`. As a result, this threw
+        too many errors to be supportable.
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@ -7,15 +7,22 @@
        "extract-locales": "lit-localize extract",
        "build-locales": "run-s build-locales:build",
        "build-locales:build": "lit-localize build",
-        "build": "lit-localize build && node --max-old-space-size=4096 node_modules/.bin/rollup -c ./rollup.config.js",
-        "build-proxy": "lit-localize build && node --max-old-space-size=4096 node_modules/.bin/rollup -c ./rollup.proxy.js",
-        "watch": "lit-localize build && node --max-old-space-size=8192 node_modules/.bin/rollup -c -w",
+        "build-locales:repair": "prettier --write ./src/locale-codes.ts",
+        "rollup:build": "node --max-old-space-size=4096 node_modules/.bin/rollup -c ./rollup.config.js",
+        "rollup:build-proxy": "node --max-old-space-size=4096 node_modules/.bin/rollup -c ./rollup.proxy.js",
+        "rollup:watch": "node --max-old-space-size=8192 node_modules/.bin/rollup -c -w",
+        "build": "run-s build-locales rollup:build",
+        "build-proxy": "run-s build-locales rollup:build-proxy",
+        "watch": "run-s build-locales rollup:watch",
        "lint": "eslint . --max-warnings 0 --fix",
        "lit-analyse": "lit-analyzer src",
        "prettier-check": "prettier --check .",
        "prettier": "prettier --write .",
-        "tsc": "lit-localize build && tsc --noEmit -p .",
-        "background-image": "npx @squoosh/cli -d src/assets/images --resize '{\"enabled\":true,\"width\":2560,\"method\":\"lanczos3\",\"fitMethod\":\"contain\",\"premultiply\":true,\"linearRGB\":true}' --mozjpeg '{\"quality\":75,\"baseline\":false,\"arithmetic\":false,\"progressive\":true,\"optimize_coding\":true,\"smoothing\":0,\"color_space\":3,\"quant_table\":3,\"trellis_multipass\":false,\"trellis_opt_zero\":false,\"trellis_opt_table\":false,\"trellis_loops\":1,\"auto_subsample\":true,\"chroma_subsample\":2,\"separate_chroma_quality\":false,\"chroma_quality\":75}' src/assets/images/flow_background.jpg"
+        "tsc:execute": "tsc --noEmit -p .",
+        "tsc": "run-s build-locales tsc:execute",
+        "background-image": "npx @squoosh/cli -d src/assets/images --resize '{\"enabled\":true,\"width\":2560,\"method\":\"lanczos3\",\"fitMethod\":\"contain\",\"premultiply\":true,\"linearRGB\":true}' --mozjpeg '{\"quality\":75,\"baseline\":false,\"arithmetic\":false,\"progressive\":true,\"optimize_coding\":true,\"smoothing\":0,\"color_space\":3,\"quant_table\":3,\"trellis_multipass\":false,\"trellis_opt_zero\":false,\"trellis_opt_table\":false,\"trellis_loops\":1,\"auto_subsample\":true,\"chroma_subsample\":2,\"separate_chroma_quality\":false,\"chroma_quality\":75}' src/assets/images/flow_background.jpg",
+        "storybook": "storybook dev -p 6006",
+        "storybook:build": "storybook build"
    },
    "dependencies": {
        "@codemirror/lang-html": "^6.4.4",
@ -56,13 +63,19 @@
        "@babel/preset-typescript": "^7.21.5",
        "@hcaptcha/types": "^1.0.3",
        "@jackfranklin/rollup-plugin-markdown": "^0.4.0",
+        "@jeysal/storybook-addon-css-user-preferences": "^0.2.0",
        "@lit/localize-tools": "^0.6.9",
        "@rollup/plugin-babel": "^6.0.3",
        "@rollup/plugin-commonjs": "^25.0.0",
-        "@rollup/plugin-node-resolve": "^15.1.0",
+        "@rollup/plugin-node-resolve": "^15.0.2",
        "@rollup/plugin-replace": "^5.0.2",
        "@rollup/plugin-typescript": "^11.1.1",
        "@squoosh/cli": "^0.7.3",
+        "@storybook/addon-essentials": "^7.0.18",
+        "@storybook/addon-links": "^7.0.18",
+        "@storybook/blocks": "^7.0.18",
+        "@storybook/web-components": "^7.0.18",
+        "@storybook/web-components-vite": "^7.0.18",
        "@trivago/prettier-plugin-sort-imports": "^4.1.1",
        "@types/chart.js": "^2.9.37",
        "@types/codemirror": "5.60.8",
@ -75,17 +88,24 @@
        "eslint-config-google": "^0.14.0",
        "eslint-plugin-custom-elements": "0.0.8",
        "eslint-plugin-lit": "^1.8.3",
+        "eslint-plugin-storybook": "^0.6.12",
+        "lit-analyzer": "^1.2.1",
        "npm-run-all": "^4.1.5",
        "prettier": "^2.8.8",
        "pyright": "^1.1.312",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
        "rollup": "^2.79.1",
        "rollup-plugin-copy": "^3.4.0",
        "rollup-plugin-cssimport": "^1.0.3",
        "rollup-plugin-minify-html-literals": "^1.2.6",
+        "rollup-plugin-postcss-lit": "^2.0.0",
        "rollup-plugin-terser": "^7.0.2",
+        "storybook": "^7.0.18",
        "ts-lit-plugin": "^1.2.1",
        "tslib": "^2.5.3",
        "turnstile-types": "^1.1.2",
-        "typescript": "^5.1.3"
+        "typescript": "^5.1.3",
+        "vite-tsconfig-paths": "^4.2.0"
    }
 }
--- a/web/src/admin/admin-overview/cards/RecentEventsCard.ts
+++ b/web/src/admin/admin-overview/cards/RecentEventsCard.ts
@ -23,7 +23,7 @@ export class RecentEventsCard extends Table<Event> {
    @property()
    order = "-created";

-    @property()
+    @property({ type: Number })
    pageSize = 10;

    async apiEndpoint(page: number): Promise<PaginatedResponse<Event>> {
--- a/web/src/admin/users/RelatedUserList.ts
+++ b/web/src/admin/users/RelatedUserList.ts
@ -106,7 +106,7 @@ export class RelatedUserList extends Table<User> {
        return true;
    }

-    @property()
+    @property({ attribute: false })
    targetGroup?: Group;

    @property()
--- a/web/src/elements/Base.ts
+++ b/web/src/elements/Base.ts
@ -2,7 +2,7 @@ import { config, tenant } from "@goauthentik/common/api/config";
 import { EVENT_LOCALE_CHANGE, EVENT_THEME_CHANGE } from "@goauthentik/common/constants";
 import { UIConfig, uiConfig } from "@goauthentik/common/ui/config";

-import { LitElement } from "lit";
+import { CSSResult, LitElement } from "lit";
 import { state } from "lit/decorators.js";

 import AKGlobal from "@goauthentik/common/styles/authentik.css";
@ -68,7 +68,8 @@ export class AKElement extends LitElement {
        if ("ShadyDOM" in window) {
            styleRoot = document;
        }
-        styleRoot.adoptedStyleSheets = [...styleRoot.adoptedStyleSheets, AKGlobal];
+        const globalStyleSheet = AKGlobal instanceof CSSResult ? AKGlobal.styleSheet : AKGlobal;
+        styleRoot.adoptedStyleSheets = [...styleRoot.adoptedStyleSheets, globalStyleSheet];
        this._initTheme(styleRoot);
        this._initCustomCSS(styleRoot);
        return root;
--- a/web/src/elements/forms/DeleteBulkForm.ts
+++ b/web/src/elements/forms/DeleteBulkForm.ts
@ -142,7 +142,7 @@ export class DeleteBulkForm<T> extends ModalButton {
    usedBy?: (item: T) => Promise<UsedBy[]>;

    @property({ attribute: false })
-    delete!: (item: T) => Promise<T>;
+    delete!: (item: T) => Promise<unknown>;

    async confirm(): Promise<void> {
        try {
--- a/web/src/elements/forms/HorizontalFormElement.ts
+++ b/web/src/elements/forms/HorizontalFormElement.ts
@ -11,6 +11,10 @@ import PFForm from "@patternfly/patternfly/components/Form/form.css";
 import PFFormControl from "@patternfly/patternfly/components/FormControl/form-control.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";

+/**
+ * @custom-element ak-form-element-horizontal
+ */
+
@customElement("ak-form-element-horizontal")
 export class HorizontalFormElement extends AKElement {
    static get styles(): CSSResult[] {
--- a/web/src/elements/forms/Radio.ts
+++ b/web/src/elements/forms/Radio.ts
@ -22,7 +22,7 @@ export class Radio<T> extends AKElement {
    @property()
    name = "";

-    @property()
+    @property({ attribute: false })
    value?: T;

    static get styles(): CSSResult[] {
--- a/web/src/stories/Button.stories.ts
+++ b/web/src/stories/Button.stories.ts
@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
+
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
+const meta = {
+    title: "Example/Button",
+    tags: ["autodocs"],
+    render: (args) => Button(args),
+    argTypes: {
+        backgroundColor: { control: "color" },
+        onClick: { action: "onClick" },
+        size: {
+            control: { type: "select" },
+            options: ["small", "medium", "large"],
+        },
+    },
+} satisfies Meta<ButtonProps>;
+
+export default meta;
+type Story = StoryObj<ButtonProps>;
+
+// More on writing stories with args: https://storybook.js.org/docs/web-components/writing-stories/args
+export const Primary: Story = {
+    args: {
+        primary: true,
+        label: "Button",
+    },
+};
+
+export const Secondary: Story = {
+    args: {
+        label: "Button",
+    },
+};
+
+export const Large: Story = {
+    args: {
+        size: "large",
+        label: "Button",
+    },
+};
+
+export const Small: Story = {
+    args: {
+        size: "small",
+        label: "Button",
+    },
+};
--- a/web/src/stories/Button.ts
+++ b/web/src/stories/Button.ts
@ -0,0 +1,44 @@
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+
+import "./button.css";
+
+export interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: "small" | "medium" | "large";
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({ primary, backgroundColor, size, label, onClick }: ButtonProps) => {
+    const mode = primary ? "storybook-button--primary" : "storybook-button--secondary";
+
+    return html`
+        <button
+            type="button"
+            class=${["storybook-button", `storybook-button--${size || "medium"}`, mode].join(" ")}
+            style=${styleMap({ backgroundColor })}
+            @click=${onClick}
+        >
+            ${label}
+        </button>
+    `;
+};
--- a/web/src/stories/Header.stories.ts
+++ b/web/src/stories/Header.stories.ts
@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import type { HeaderProps } from "./Header";
+import { Header } from "./Header";
+
+const meta = {
+    title: "Example/Header",
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/web-components/writing-docs/autodocs
+    tags: ["autodocs"],
+    render: (args: HeaderProps) => Header(args),
+} satisfies Meta<HeaderProps>;
+
+export default meta;
+type Story = StoryObj<HeaderProps>;
+
+export const LoggedIn: Story = {
+    args: {
+        user: {
+            name: "Jane Doe",
+        },
+    },
+};
+
+export const LoggedOut: Story = {};
--- a/web/src/stories/Header.ts
+++ b/web/src/stories/Header.ts
@ -0,0 +1,57 @@
+import { html } from "lit";
+
+import "./header.css";
+
+import { Button } from "./Button";
+
+type User = {
+    name: string;
+};
+
+export interface HeaderProps {
+    user?: User;
+    onLogin: () => void;
+    onLogout: () => void;
+    onCreateAccount: () => void;
+}
+
+export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => html`
+    <header>
+        <div class="storybook-header">
+            <div>
+                <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+                    <g fill="none" fillRule="evenodd">
+                        <path
+                            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+                            fill="#FFF"
+                        />
+                        <path
+                            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+                            fill="#555AB9"
+                        />
+                        <path
+                            d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+                            fill="#91BAF8"
+                        />
+                    </g>
+                </svg>
+                <h1>Acme</h1>
+            </div>
+            <div>
+                ${user
+                    ? Button({ size: "small", onClick: onLogout, label: "Log out" })
+                    : html`${Button({
+                          size: "small",
+                          onClick: onLogin,
+                          label: "Log in",
+                      })}
+                      ${Button({
+                          primary: true,
+                          size: "small",
+                          onClick: onCreateAccount,
+                          label: "Sign up",
+                      })}`}
+            </div>
+        </div>
+    </header>
+`;
--- a/web/src/stories/Introduction.mdx
+++ b/web/src/stories/Introduction.mdx
@ -0,0 +1,214 @@
+import { Meta } from "@storybook/blocks";
+
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
+
+<Meta title="Example/Introduction" />
+
+<style>
+    {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 700;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span,
+    .link-item p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+    <a
+        className="link-item"
+        href="https://storybook.js.org/docs/react/addons/addon-types"
+        target="_blank"
+    >
+        <img src={Plugin} alt="plugin" />
+        <span>
+            <strong>Presets for popular tools</strong>
+            Easy setup for TypeScript, SCSS and more.
+        </span>
+    </a>
+    <a
+        className="link-item"
+        href="https://storybook.js.org/docs/react/configure/webpack"
+        target="_blank"
+    >
+        <img src={StackAlt} alt="Build" />
+        <span>
+            <strong>Build configuration</strong>
+            How to customize webpack and Babel
+        </span>
+    </a>
+    <a
+        className="link-item"
+        href="https://storybook.js.org/docs/react/configure/styling-and-css"
+        target="_blank"
+    >
+        <img src={Colors} alt="colors" />
+        <span>
+            <strong>Styling</strong>
+            How to load and configure CSS libraries
+        </span>
+    </a>
+    <a
+        className="link-item"
+        href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+        target="_blank"
+    >
+        <img src={Flow} alt="flow" />
+        <span>
+            <strong>Data</strong>
+            Providers and mocking for data libraries
+        </span>
+    </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+    <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+        <img src={Repo} alt="repo" />
+        <span>
+            <strong>Storybook documentation</strong>
+            Configure, customize, and extend
+        </span>
+    </a>
+    <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+        <img src={Direction} alt="direction" />
+        <span>
+            <strong>In-depth guides</strong>
+            Best practices from leading teams
+        </span>
+    </a>
+    <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+        <img src={Code} alt="code" />
+        <span>
+            <strong>GitHub project</strong>
+            View the source and add issues
+        </span>
+    </a>
+    <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+        <img src={Comments} alt="comments" />
+        <span>
+            <strong>Discord chat</strong>
+            Chat with maintainers and the community
+        </span>
+    </a>
+</div>
+
+<div className="tip-wrapper">
+    <span className="tip">Tip</span>Edit the Markdown in{" "}
+    <code>stories/Introduction.stories.mdx</code>
+</div>
--- a/web/src/stories/Page.stories.ts
+++ b/web/src/stories/Page.stories.ts
@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from "@storybook/web-components";
+
+import * as HeaderStories from "./Header.stories";
+import type { PageProps } from "./Page";
+import { Page } from "./Page";
+
+const meta = {
+    title: "Example/Page",
+    render: (args: PageProps) => Page(args),
+} satisfies Meta<PageProps>;
+
+export default meta;
+type Story = StoryObj<PageProps>;
+
+export const LoggedIn: Story = {
+    args: {
+        // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
+        ...HeaderStories.LoggedIn.args,
+    },
+};
+
+export const LoggedOut: Story = {
+    args: {
+        ...HeaderStories.LoggedOut.args,
+    },
+};
--- a/web/src/stories/Page.ts
+++ b/web/src/stories/Page.ts
@ -0,0 +1,80 @@
+import { html } from "lit";
+
+import "./page.css";
+
+import { Header } from "./Header";
+
+type User = {
+    name: string;
+};
+
+export interface PageProps {
+    user?: User;
+    onLogin: () => void;
+    onLogout: () => void;
+    onCreateAccount: () => void;
+}
+
+export const Page = ({ user, onLogin, onLogout, onCreateAccount }: PageProps) => html`
+    <article>
+        ${Header({
+            user,
+            onLogin,
+            onLogout,
+            onCreateAccount,
+        })}
+
+        <section class="storybook-page">
+            <h2>Pages in Storybook</h2>
+            <p>
+                We recommend building UIs with a
+                <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
+                    <strong>component-driven</strong> </a
+                >process starting with atomic components and ending with pages.
+            </p>
+            <p>
+                Render pages with mock data. This makes it easy to build and review page states
+                without needing to navigate to them in your app. Here are some handy patterns for
+                managing page data in Storybook:
+            </p>
+            <ul>
+                <li>
+                    Use a higher-level connected component. Storybook helps you compose such data
+                    from the "args" of child component stories
+                </li>
+                <li>
+                    Assemble data in the page component from your services. You can mock these
+                    services out using Storybook.
+                </li>
+            </ul>
+            <p>
+                Get a guided tutorial on component-driven development at
+                <a
+                    href="https://storybook.js.org/tutorials/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Storybook tutorials
+                </a>
+                . Read more in the
+                <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
+                    docs
+                </a>
+                .
+            </p>
+            <div class="tip-wrapper">
+                <span class="tip">Tip</span> Adjust the width of the canvas with the
+                <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+                    <g fill="none" fillRule="evenodd">
+                        <path
+                            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                            id="a"
+                            fill="#999"
+                        />
+                    </g>
+                </svg>
+                Viewports addon in the toolbar
+            </div>
+        </section>
+    </article>
+`;
--- a/web/src/stories/assets/code-brackets.svg
+++ b/web/src/stories/assets/code-brackets.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>
--- a/web/src/stories/assets/colors.svg
+++ b/web/src/stories/assets/colors.svg
--- a/web/src/stories/assets/comments.svg
+++ b/web/src/stories/assets/comments.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/comments</title><g id="illustration/comments" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Path" fill="#96D07C" d="M2.52730803,17.9196415 C2.44329744,17.9745167 2.36370847,18.000488 2.29303375,18.000488 C2.1197031,18.000488 2,17.8443588 2,17.5752855 L2,4 C2,1.790861 3.790861,3.23296945e-13 6,3.23296945e-13 L33.9995117,3.23296945e-13 C36.2086507,3.23296945e-13 37.9995117,1.790861 37.9995117,4 L37.9995117,9.999512 C37.9995117,12.208651 36.2086507,13.999512 33.9995117,13.999512 L8,13.999512 C7.83499225,13.999512 7.6723181,13.9895206 7.51254954,13.9701099 L2.52730803,17.9196415 Z"/><path id="Path" fill="#73E1E0" d="M7.51066,44.9703679 L2.52730803,47.9186655 C2.44329744,47.9735407 2.36370847,47.999512 2.29303375,47.999512 C2.1197031,47.999512 2,47.8433828 2,47.5743095 L2,35 C2,32.790861 3.790861,31 6,31 L26,31 C28.209139,31 30,32.790861 30,35 L30,41 C30,43.209139 28.209139,45 26,45 L8,45 C7.8343417,45 7.67103544,44.9899297 7.51066,44.9703679 Z"/><path id="Path" fill="#FFD476" d="M46,19.5 L46,33.0747975 C46,33.3438708 45.8802969,33.5 45.7069663,33.5 C45.6362915,33.5 45.5567026,33.4740287 45.472692,33.4191535 L40.4887103,29.4704446 C40.3285371,29.489956 40.1654415,29.5 40,29.5 L18,29.5 C15.790861,29.5 14,27.709139 14,25.5 L14,19.5 C14,17.290861 15.790861,15.5 18,15.5 L42,15.5 C44.209139,15.5 46,17.290861 46,19.5 Z"/></g></svg>
--- a/web/src/stories/assets/direction.svg
+++ b/web/src/stories/assets/direction.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/direction</title><g id="illustration/direction" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFD476" d="M23.4917015,33.6030641 L2.93840258,31.4321033 C2.38917316,31.3740904 1.99096346,30.8818233 2.04897631,30.3325939 C2.0747515,30.0885705 2.18934861,29.8625419 2.37095722,29.6975265 L34.2609105,0.721285325 C34.6696614,0.349881049 35.3021022,0.38015648 35.6735064,0.788907393 C35.9232621,1.06377731 36.0001133,1.45442096 35.8730901,1.80341447 L24.5364357,32.9506164 C24.3793473,33.3822133 23.9484565,33.6513092 23.4917015,33.6030641 L23.4917015,33.6030641 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" d="M24.3163597,33.2881029 C24.0306575,33.0138462 23.9337246,32.5968232 24.069176,32.2246735 L35.091923,1.9399251 C35.2266075,1.56988243 35.5659249,1.31333613 35.9586669,1.28460955 C36.5094802,1.24432106 36.9886628,1.65818318 37.0289513,2.20899647 L40.2437557,46.1609256 C40.2644355,46.4436546 40.1641446,46.7218752 39.9678293,46.9263833 C39.5853672,47.3248067 38.9523344,47.3377458 38.5539111,46.9552837 L24.3163597,33.2881029 L24.3163597,33.2881029 Z"/></g></svg>
--- a/web/src/stories/assets/flow.svg
+++ b/web/src/stories/assets/flow.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/flow</title><g id="illustration/flow" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" fill-rule="nonzero" d="M30,29 C32.7614237,29 35,26.7614237 35,24 C35,14.6111593 27.3888407,7 18,7 C8.61115925,7 1,14.6111593 1,24 C1,33.3888407 8.61115925,41 18,41 C19.3333404,41 20.6447683,40.8466238 21.9154603,40.5471706 C19.5096374,39.3319645 17.5510566,37.8612875 16.0456579,36.1314815 C14.1063138,33.9030427 12.769443,31.0725999 12.0293806,27.6556449 C11.360469,26.565281 11,25.3082308 11,24 C11,20.1340068 14.1340068,17 18,17 C21.8659932,17 25,20.1340068 25,24 C25,26.125 27.7040312,29 30,29 Z"/><path id="Combined-Shape-Copy" fill="#FFC445" fill-rule="nonzero" d="M42,29 C44.7614237,29 47,26.7614237 47,24 C47,14.6111593 39.3888407,7 30,7 C20.6111593,7 13,14.6111593 13,24 C13,33.3888407 20.6111593,41 30,41 C31.3333404,41 32.6447683,40.8466238 33.9154603,40.5471706 C31.5096374,39.3319645 29.4051056,37.9781963 28.0456579,36.1314815 C26.0625,33.4375 23,27.1875 23,24 C23,20.1340068 26.1340068,17 30,17 C33.8659932,17 37,20.1340068 37,24 C37.02301,26.3435241 39.7040312,29 42,29 Z" transform="translate(30.000000, 24.000000) scale(-1, -1) translate(-30.000000, -24.000000)"/></g></svg>
--- a/web/src/stories/assets/plugin.svg
+++ b/web/src/stories/assets/plugin.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/plugin</title><g id="illustration/plugin" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#79C9FC" d="M26,15.3994248 C26,15.4091303 26,15.4188459 26,15.4285714 L26,21.4694881 C25.8463595,21.4969567 25.6941676,21.51275 25.5873784,21.51275 C25.4974117,21.51275 25.4230979,21.4768034 25.377756,21.4206259 L25.2660784,21.2822603 L25.1317423,21.1657666 C24.2436317,20.3956144 23.100098,19.9633214 21.895551,19.9633214 C19.2039137,19.9633214 17,22.1075558 17,24.7804643 C17,27.4533728 19.2039137,29.5976071 21.895551,29.5976071 C23.1972122,29.5976071 24.3149423,29.2878193 25.1231445,28.3613697 C25.4542273,27.9818463 25.568273,27.9073214 25.5873784,27.9073214 C25.681532,27.9073214 25.8352452,27.9239643 26,27.9524591 L26,32.5714286 C26,32.5811541 26,32.5908697 26,32.6005752 L26,33 C26,35.209139 24.209139,37 22,37 L4,37 C1.790861,37 0,35.209139 0,33 L0,15 C0,12.790861 1.790861,11 4,11 L22,11 C24.209139,11 26,12.790861 26,15 L26,15.3994248 Z"/><path id="Path" fill="#87E6E5" d="M27.9998779,32.5714286 C27.9998779,33.3604068 28.6572726,34 29.4682101,34 L46.5315458,34 C47.3424832,34 47.9998779,33.3604068 47.9998779,32.5714286 L47.9998779,15.4285714 C47.9998779,14.6395932 47.3424832,14 46.5315458,14 L29.4682101,14 C28.6572726,14 27.9998779,14.6395932 27.9998779,15.4285714 L27.9998779,21.8355216 C27.9334367,22.2650514 27.8567585,22.6454496 27.746391,22.8084643 C27.4245309,23.2838571 26.2402709,23.51275 25.5873784,23.51275 C24.8705773,23.51275 24.2322714,23.1857725 23.8214379,22.6767605 C23.3096996,22.2329909 22.6349941,21.9633214 21.895551,21.9633214 C20.2963823,21.9633214 19,23.2245992 19,24.7804643 C19,26.3363293 20.2963823,27.5976071 21.895551,27.5976071 C22.5398535,27.5976071 23.2399343,27.477727 23.6160247,27.0466112 C24.1396029,26.4464286 24.7367044,25.9073214 25.5873784,25.9073214 C26.2402709,25.9073214 27.5912951,26.1766031 27.8226692,26.6116071 C27.8819199,26.7230038 27.9403239,26.921677 27.9998779,27.1556219 L27.9998779,32.5714286 Z"/></g></svg>
--- a/web/src/stories/assets/repo.svg
+++ b/web/src/stories/assets/repo.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/repo</title><g id="illustration/repo" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Rectangle-62-Copy" fill="#B7F0EF" d="M27.2217723,9.04506931 L41.2217723,6.2682098 C43.3886973,5.83840648 45.4937616,7.2466219 45.9235649,9.41354696 C45.9743993,9.66983721 46,9.93049166 46,10.1917747 L46,32.581381 C46,34.4904961 44.650862,36.1335143 42.7782277,36.5049459 L28.7782277,39.2818054 C26.6113027,39.7116087 24.5062384,38.3033933 24.0764351,36.1364682 C24.0256007,35.880178 24,35.6195235 24,35.3582405 L24,12.9686342 C24,11.0595191 25.349138,9.4165009 27.2217723,9.04506931 Z" opacity=".7"/><path id="Combined-Shape" fill="#87E6E5" d="M6.77822775,6.2682098 L20.7782277,9.04506931 C22.650862,9.4165009 24,11.0595191 24,12.9686342 L24,35.3582405 C24,37.5673795 22.209139,39.3582405 20,39.3582405 C19.738717,39.3582405 19.4780625,39.3326398 19.2217723,39.2818054 L5.22177225,36.5049459 C3.34913798,36.1335143 2,34.4904961 2,32.581381 L2,10.1917747 C2,7.98263571 3.790861,6.19177471 6,6.19177471 C6.26128305,6.19177471 6.5219375,6.21737537 6.77822775,6.2682098 Z"/><path id="Rectangle-63-Copy-2" fill="#61C1FD" d="M22,10 C23.1666667,10.2291667 24.0179036,10.625 24.5537109,11.1875 C25.0895182,11.75 25.5716146,12.875 26,14.5625 C26,29.3020833 26,37.5208333 26,39.21875 C26,40.9166667 26.4241536,42.9583333 27.2724609,45.34375 L24.5537109,41.875 L22.9824219,45.34375 C22.327474,43.1979167 22,41.2291667 22,39.4375 C22,37.6458333 22,27.8333333 22,10 Z"/></g></svg>
--- a/web/src/stories/assets/stackalt.svg
+++ b/web/src/stories/assets/stackalt.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/stackalt</title><g id="illustration/stackalt" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#FFAE00" d="M23.8628277,0 L23.8628277,48 L3.32291648,36.2491883 L3.32155653,11.9499781 L23.8628277,0 Z M23.8670509,0 L44.408322,11.9499781 L44.4069621,36.2491883 L23.8670509,48 L23.8670509,0 Z" opacity=".196"/><path id="Rectangle-46-Copy-3" fill="#66BF3C" d="M15.8232279,19.1155258 L24.7368455,21.4714881 C29.6053842,22.7582937 33.4077423,26.5606518 34.694548,31.4291905 L37.0505103,40.3428082 C37.6150232,42.4786032 36.3412474,44.6676353 34.2054524,45.2321482 C33.5569474,45.4035549 32.87575,45.4091235 32.2245294,45.2483418 L23.3459013,43.0562718 C18.2976962,41.809906 14.3561301,37.8683399 13.1097642,32.8201348 L10.9176943,23.9415066 C10.3881737,21.7967682 11.6975664,19.6288529 13.8423049,19.0993322 C14.4935255,18.9385505 15.1747229,18.9441191 15.8232279,19.1155258 Z" opacity=".5" transform="translate(23.999997, 32.166058) rotate(-45.000000) translate(-23.999997, -32.166058)"/><path id="Rectangle-46-Copy-2" fill="#FFAE00" d="M15.8232279,11.2216893 L24.7368455,13.5776516 C29.6053842,14.8644572 33.4077423,18.6668153 34.694548,23.5353541 L37.0505103,32.4489717 C37.6150232,34.5847667 36.3412474,36.7737988 34.2054524,37.3383117 C33.5569474,37.5097184 32.87575,37.515287 32.2245294,37.3545053 L23.3459013,35.1624353 C18.2976962,33.9160695 14.3561301,29.9745034 13.1097642,24.9262983 L10.9176943,16.0476701 C10.3881737,13.9029317 11.6975664,11.7350164 13.8423049,11.2054957 C14.4935255,11.044714 15.1747229,11.0502826 15.8232279,11.2216893 Z" opacity=".5" transform="translate(23.999997, 24.272222) rotate(-45.000000) translate(-23.999997, -24.272222)"/><path id="Rectangle-46-Copy" fill="#FC521F" d="M15.8232279,3.32785281 L24.7368455,5.68381509 C29.6053842,6.97062075 33.4077423,10.7729788 34.694548,15.6415176 L37.0505103,24.5551352 C37.6150232,26.6909302 36.3412474,28.8799623 34.2054524,29.4444752 C33.5569474,29.6158819 32.87575,29.6214505 32.2245294,29.4606688 L23.3459013,27.2685988 C18.2976962,26.022233 14.3561301,22.0806669 13.1097642,17.0324618 L10.9176943,8.15383364 C10.3881737,6.00909519 11.6975664,3.84117987 13.8423049,3.31165925 C14.4935255,3.15087753 15.1747229,3.15644615 15.8232279,3.32785281 Z" opacity=".5" transform="translate(23.999997, 16.378385) rotate(-45.000000) translate(-23.999997, -16.378385)"/></g></svg>
--- a/web/src/stories/button.css
+++ b/web/src/stories/button.css
@ -0,0 +1,30 @@
+.storybook-button {
+    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-weight: 700;
+    border: 0;
+    border-radius: 3em;
+    cursor: pointer;
+    display: inline-block;
+    line-height: 1;
+}
+.storybook-button--primary {
+    color: white;
+    background-color: #1ea7fd;
+}
+.storybook-button--secondary {
+    color: #333;
+    background-color: transparent;
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+}
+.storybook-button--small {
+    font-size: 12px;
+    padding: 10px 16px;
+}
+.storybook-button--medium {
+    font-size: 14px;
+    padding: 11px 20px;
+}
+.storybook-button--large {
+    font-size: 16px;
+    padding: 12px 24px;
+}
--- a/web/src/stories/header.css
+++ b/web/src/stories/header.css
@ -0,0 +1,32 @@
+.storybook-header {
+    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    padding: 15px 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.storybook-header svg {
+    display: inline-block;
+    vertical-align: top;
+}
+
+.storybook-header h1 {
+    font-weight: 700;
+    font-size: 20px;
+    line-height: 1;
+    margin: 6px 0 6px 10px;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.storybook-header button + button {
+    margin-left: 10px;
+}
+
+.storybook-header .welcome {
+    color: #333;
+    font-size: 14px;
+    margin-right: 10px;
+}
--- a/web/src/stories/page.css
+++ b/web/src/stories/page.css
@ -0,0 +1,69 @@
+.storybook-page {
+    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 48px 20px;
+    margin: 0 auto;
+    max-width: 600px;
+    color: #333;
+}
+
+.storybook-page h2 {
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 1;
+    margin: 0 0 4px;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.storybook-page p {
+    margin: 1em 0;
+}
+
+.storybook-page a {
+    text-decoration: none;
+    color: #1ea7fd;
+}
+
+.storybook-page ul {
+    padding-left: 30px;
+    margin: 1em 0;
+}
+
+.storybook-page li {
+    margin-bottom: 8px;
+}
+
+.storybook-page .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #e7fdd8;
+    color: #66bf3c;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+}
+
+.storybook-page .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+}
+
+.storybook-page .tip-wrapper svg {
+    display: inline-block;
+    height: 12px;
+    width: 12px;
+    margin-right: 4px;
+    vertical-align: top;
+    margin-top: 3px;
+}
+
+.storybook-page .tip-wrapper svg path {
+    fill: #1ea7fd;
+}
--- a/web/src/user/LibraryPage/ApplicationEmptyState.stories.ts
+++ b/web/src/user/LibraryPage/ApplicationEmptyState.stories.ts
@ -0,0 +1,17 @@
+import { html } from "lit";
+
+import "./ApplicationEmptyState";
+
+export default {
+    title: "ApplicationEmptyState",
+};
+
+export const OrdinaryUser = () =>
+    html`<div style="background: #fff; padding: 4em">
+        <ak-library-application-empty-list></ak-library-application-empty-list>
+    </div> `;
+
+export const AdminUser = () =>
+    html`<div style="background: #fff; padding: 4em">
+        <ak-library-application-empty-list isadmin></ak-library-application-empty-list>
+    </div> `;
--- a/web/src/user/LibraryPage/ApplicationList.ts
+++ b/web/src/user/LibraryPage/ApplicationList.ts
@ -57,7 +57,7 @@ export class LibraryPageApplicationList extends AKElement {
    @property({ attribute: true })
    selected = "";

-    @property()
+    @property({ attribute: false })
    apps: AppGroupList = [];

    get currentLayout(): Pair {
--- a/web/src/user/LibraryPage/ApplicationSearch.ts
+++ b/web/src/user/LibraryPage/ApplicationSearch.ts
@ -36,7 +36,7 @@ export class LibraryPageApplicationList extends AKElement {
        `,
    ];

-    @property()
+    @property({ attribute: false })
    apps: Application[] = [];

    @property()
--- a/web/src/user/LibraryPage/LibraryPageImpl.ts
+++ b/web/src/user/LibraryPage/LibraryPageImpl.ts
@ -37,13 +37,13 @@ import type { AppGroupList, PageUIConfig } from "./types";
 export class LibraryPage extends AKElement {
    static styles = styles;

-    @property()
-    apps!: PaginatedResponse<Application>;
-
    @property({ attribute: "isadmin", type: Boolean })
    isAdmin = false;

-    @property()
+    @property({ attribute: false })
+    apps!: PaginatedResponse<Application>;
+
+    @property({ attribute: false })
    uiConfig!: PageUIConfig;

    @state()
--- a/web/src/user/user-settings/tokens/UserTokenList.ts
+++ b/web/src/user/user-settings/tokens/UserTokenList.ts
@ -133,14 +133,11 @@ export class UserTokenList extends Table<Token> {
        return html`<ak-forms-delete-bulk
            objectLabel=${msg("Token(s)")}
            .objects=${this.selectedElements}
-            .metadata=${(item: Token) => {
-                return [{ key: msg("Identifier"), value: item.identifier }];
-            }}
-            .delete=${(item: Token) => {
-                return new CoreApi(DEFAULT_CONFIG).coreTokensDestroy({
+            .metadata=${(item: Token) => [{ key: msg("Identifier"), value: item.identifier }]}
+            .delete=${(item: Token) =>
+                new CoreApi(DEFAULT_CONFIG).coreTokensDestroy({
                    identifier: item.identifier,
-                });
-            }}
+                })}
        >
            <button ?disabled=${disabled} slot="trigger" class="pf-c-button pf-m-danger">
                ${msg("Delete")}
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@ -42,6 +42,7 @@
        "strictNullChecks": true,
        "allowUnreachableCode": false,
        "allowUnusedLabels": false,
+        "useDefineForClassFields": false,
        "alwaysStrict": true,
        "noImplicitAny": true,
        "plugins": [
@ -49,7 +50,9 @@
                "name": "ts-lit-plugin",
                "strict": true,
                "rules": {
-                    "no-unknown-tag-name": "off"
+                    "no-unknown-tag-name": "off",
+                    "no-missing-import": "off",
+                    "no-incompatible-type-binding": "warn"
                }
            }
        ]
--- a/web/xliff/zh-Hans.xlf
+++ b/web/xliff/zh-Hans.xlf
@ -1,4 +1,4 @@
-<?xml version="1.0" ?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
+<?xml version="1.0"?><xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" version="1.2">
  <file target-language="zh-Hans" source-language="en" original="lit-localize-inputs" datatype="plaintext">
    <body>
      <trans-unit id="s4caed5b7a7e5d89b">
@ -618,9 +618,9 @@
        
      </trans-unit>
      <trans-unit id="saa0e2675da69651b">
-        <source>The URL &quot;<x id="0" equiv-text="${this.url}"/>&quot; was not found.</source>
-        <target>未找到 URL &quot; 
-        <x id="0" equiv-text="${this.url}"/>&quot;。</target>
+        <source>The URL "<x id="0" equiv-text="${this.url}"/>" was not found.</source>
+        <target>未找到 URL " 
+        <x id="0" equiv-text="${this.url}"/>"。</target>
        
      </trans-unit>
      <trans-unit id="s58cd9c2fe836d9c6">
@ -1082,8 +1082,8 @@
        
      </trans-unit>
      <trans-unit id="sa8384c9c26731f83">
-        <source>To allow any redirect URI, set this value to &quot;.*&quot;. Be aware of the possible security implications this can have.</source>
-        <target>要允许任何重定向 URI，请将此值设置为 &quot;.*&quot;。请注意这可能带来的安全影响。</target>
+        <source>To allow any redirect URI, set this value to ".*". Be aware of the possible security implications this can have.</source>
+        <target>要允许任何重定向 URI，请将此值设置为 ".*"。请注意这可能带来的安全影响。</target>
        
      </trans-unit>
      <trans-unit id="s55787f4dfcdce52b">
@ -1829,8 +1829,8 @@
        
      </trans-unit>
      <trans-unit id="sa90b7809586c35ce">
-        <source>Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon &quot;fa-test&quot;.</source>
-        <target>输入完整 URL、相对路径，或者使用 'fa://fa-test' 来使用 Font Awesome 图标 &quot;fa-test&quot;。</target>
+        <source>Either input a full URL, a relative path, or use 'fa://fa-test' to use the Font Awesome icon "fa-test".</source>
+        <target>输入完整 URL、相对路径，或者使用 'fa://fa-test' 来使用 Font Awesome 图标 "fa-test"。</target>
        
      </trans-unit>
      <trans-unit id="s0410779cb47de312">
@ -3258,8 +3258,8 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="s76768bebabb7d543">
-        <source>Field which contains members of a group. Note that if using the &quot;memberUid&quot; field, the value is assumed to contain a relative distinguished name. e.g. 'memberUid=some-user' instead of 'memberUid=cn=some-user,ou=groups,...'</source>
-        <target>包含组成员的字段。请注意，如果使用 &quot;memberUid&quot; 字段，则假定该值包含相对可分辨名称。例如，'memberUid=some-user' 而不是 'memberUid=cn=some-user,ou=groups,...'</target>
+        <source>Field which contains members of a group. Note that if using the "memberUid" field, the value is assumed to contain a relative distinguished name. e.g. 'memberUid=some-user' instead of 'memberUid=cn=some-user,ou=groups,...'</source>
+        <target>包含组成员的字段。请注意，如果使用 "memberUid" 字段，则假定该值包含相对可分辨名称。例如，'memberUid=some-user' 而不是 'memberUid=cn=some-user,ou=groups,...'</target>
        
      </trans-unit>
      <trans-unit id="s026555347e589f0e">
@ -4056,8 +4056,8 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="s7b1fba26d245cb1c">
-        <source>When using an external logging solution for archiving, this can be set to &quot;minutes=5&quot;.</source>
-        <target>使用外部日志记录解决方案进行存档时，可以将其设置为 &quot;minutes=5&quot;。</target>
+        <source>When using an external logging solution for archiving, this can be set to "minutes=5".</source>
+        <target>使用外部日志记录解决方案进行存档时，可以将其设置为 "minutes=5"。</target>
        
      </trans-unit>
      <trans-unit id="s44536d20bb5c8257">
@ -4066,8 +4066,8 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="s3bb51cabb02b997e">
-        <source>Format: &quot;weeks=3;days=2;hours=3,seconds=2&quot;.</source>
-        <target>格式：&quot;weeks=3;days=2;hours=3,seconds=2&quot;。</target>
+        <source>Format: "weeks=3;days=2;hours=3,seconds=2".</source>
+        <target>格式："weeks=3;days=2;hours=3,seconds=2"。</target>
        
      </trans-unit>
      <trans-unit id="s04bfd02201db5ab8">
@ -4263,10 +4263,10 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="sa95a538bfbb86111">
-        <source>Are you sure you want to update <x id="0" equiv-text="${this.objectLabel}"/> &quot;<x id="1" equiv-text="${this.obj?.name}"/>&quot;?</source>
+        <source>Are you sure you want to update <x id="0" equiv-text="${this.objectLabel}"/> "<x id="1" equiv-text="${this.obj?.name}"/>"?</source>
        <target>您确定要更新 
-        <x id="0" equiv-text="${this.objectLabel}"/>&quot; 
-        <x id="1" equiv-text="${this.obj?.name}"/>&quot; 吗？</target>
+        <x id="0" equiv-text="${this.objectLabel}"/>" 
+        <x id="1" equiv-text="${this.obj?.name}"/>" 吗？</target>
        
      </trans-unit>
      <trans-unit id="sc92d7cfb6ee1fec6">
@ -5382,7 +5382,7 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="sdf1d8edef27236f0">
-        <source>A &quot;roaming&quot; authenticator, like a YubiKey</source>
+        <source>A "roaming" authenticator, like a YubiKey</source>
        <target>像 YubiKey 这样的“漫游”身份验证器</target>
        
      </trans-unit>
@ -5722,10 +5722,10 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="s2d5f69929bb7221d">
-        <source><x id="0" equiv-text="${prompt.name}"/> (&quot;<x id="1" equiv-text="${prompt.fieldKey}"/>&quot;, of type <x id="2" equiv-text="${prompt.type}"/>)</source>
+        <source><x id="0" equiv-text="${prompt.name}"/> ("<x id="1" equiv-text="${prompt.fieldKey}"/>", of type <x id="2" equiv-text="${prompt.type}"/>)</source>
        <target>
-        <x id="0" equiv-text="${prompt.name}"/>（&quot; 
-        <x id="1" equiv-text="${prompt.fieldKey}"/>&quot;，类型为 
+        <x id="0" equiv-text="${prompt.name}"/>（" 
+        <x id="1" equiv-text="${prompt.fieldKey}"/>"，类型为 
        <x id="2" equiv-text="${prompt.type}"/>）</target>
        
      </trans-unit>
@ -5774,7 +5774,7 @@ doesn't pass when either or both of the selected options are equal or above the
        
      </trans-unit>
      <trans-unit id="s1608b2f94fa0dbd4">
-        <source>If set to a duration above 0, the user will have the option to choose to &quot;stay signed in&quot;, which will extend their session by the time specified here.</source>
+        <source>If set to a duration above 0, the user will have the option to choose to "stay signed in", which will extend their session by the time specified here.</source>
        <target>如果设置时长大于 0，用户可以选择“保持登录”选项，这将使用户的会话延长此处设置的时间。</target>
        
      </trans-unit>
@ -7549,4 +7549,4 @@ Bindings to groups/users are checked against the user of the event.</source>
      </trans-unit>
    </body>
  </file>
-</xliff>
+</xliff>
--- a/website/integrations/sources/mailcow/index.md
+++ b/website/integrations/sources/mailcow/index.md
@ -29,7 +29,7 @@ The following placeholders will be used:

 ![ClientID and Secret](mailcow3.png)

-## Authentik
+## authentik

 5. Under _Directory -> Federation & Social login_ Click **Create > Mailcow OAuth Source**
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48" version="1.1" viewBox="0 0 48 48"><title>illustration/code-brackets</title><g id="illustration/code-brackets" fill="none" fill-rule="evenodd" stroke="none" stroke-width="1"><path id="Combined-Shape" fill="#87E6E5" d="M11.4139325,12 C11.7605938,12 12,12.5059743 12,13.3779712 L12,17.4951758 L6.43502246,23.3839989 C5.85499251,23.9978337 5.85499251,25.0021663 6.43502246,25.6160011 L12,31.5048242 L12,35.6220288 C12,36.4939606 11.7605228,37 11.4139325,37 C11.2725831,37 11.1134406,36.9158987 10.9453839,36.7379973 L0.435022463,25.6160011 C-0.145007488,25.0021663 -0.145007488,23.9978337 0.435022463,23.3839989 L10.9453839,12.2620027 C11.1134051,12.0841663 11.2725831,12 11.4139325,12 Z M36.5860675,12 C36.7274169,12 36.8865594,12.0841013 37.0546161,12.2620027 L47.5649775,23.3839989 C48.1450075,23.9978337 48.1450075,25.0021663 47.5649775,25.6160011 L37.0546161,36.7379973 C36.8865949,36.9158337 36.7274169,37 36.5860675,37 C36.2394062,37 36,36.4940257 36,35.6220288 L36,31.5048242 L41.5649775,25.6160011 C42.1450075,25.0021663 42.1450075,23.9978337 41.5649775,23.3839989 L36,17.4951758 L36,13.3779712 C36,12.5060394 36.2394772,12 36.5860675,12 Z"/><rect id="Rectangle-7-Copy-5" width="35.57" height="4" x="5.009" y="22.662" fill="#A0DB77" rx="2" transform="translate(22.793959, 24.662305) rotate(-75.000000) translate(-22.793959, -24.662305)"/></g></svg>