add storybook

src/Website/.storybook/main.ts

@@ -0,0 +1,49 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../stories/Configure.mdx",
+    "../stories/SubmitButton.stories.tsx",
+    "../stories/FormField.stories.tsx",
+    "../stories/Navbar.stories.tsx",
+    "../stories/Themes.stories.tsx",
+  ],
+  addons: [
+    "@chromatic-com/storybook",
+    "@storybook/addon-vitest",
+    "@storybook/addon-a11y",
+    "@storybook/addon-docs",
+    "@storybook/addon-onboarding",
+  ],
+  framework: "@storybook/react-vite",
+  async viteFinal(config) {
+    config.plugins = (config.plugins ?? []).filter((plugin) => {
+      if (!plugin) {
+        return true;
+      }
+
+      const pluginName = typeof plugin === "object" && "name" in plugin ? plugin.name : "";
+      return !pluginName.startsWith("react-router");
+    });
+
+    config.build ??= {};
+    config.build.rollupOptions ??= {};
+
+    const previousOnWarn = config.build.rollupOptions.onwarn;
+    config.build.rollupOptions.onwarn = (warning, warn) => {
+      if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
+        return;
+      }
+
+      if (typeof previousOnWarn === "function") {
+        previousOnWarn(warning, warn);
+        return;
+      }
+
+      warn(warning);
+    };
+
+    return config;
+  },
+};
+export default config;

src/Website/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" />
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..900;1,9..40,100..900&family=Volkhov:ital,wght@0,400;0,700;1,400;1,700&display=swap"
+/>

src/Website/.storybook/preview.ts

@@ -0,0 +1,63 @@
+import type { Preview } from "@storybook/react-vite";
+import { createElement } from "react";
+import { MemoryRouter } from "react-router";
+import "../app/app.css";
+import { biergartenThemes, defaultThemeName, isBiergartenTheme } from "../app/lib/themes";
+
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: "Active Biergarten theme",
+      toolbar: {
+        title: "Theme",
+        icon: "paintbrush",
+        dynamicTitle: true,
+        items: biergartenThemes.map((theme) => ({
+          value: theme.value,
+          title: theme.label,
+        })),
+      },
+    },
+  },
+  initialGlobals: {
+    theme: defaultThemeName,
+  },
+  decorators: [
+    (Story, context) => {
+      const theme = isBiergartenTheme(String(context.globals.theme))
+        ? context.globals.theme
+        : defaultThemeName;
+
+      return createElement(
+        MemoryRouter,
+        undefined,
+        createElement(
+          "div",
+          {
+            "data-theme": theme,
+            className: "bg-base-200 p-6 text-base-content",
+          },
+          createElement("div", { className: "mx-auto max-w-7xl" }, createElement(Story)),
+        ),
+      );
+    },
+  ],
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: "padded",
+
+    a11y: {
+      // 'todo' - show a11y violations in the test UI only
+      // 'error' - fail CI on a11y violations
+      // 'off' - skip a11y checks entirely
+      test: "todo",
+    },
+  },
+};
+
+export default preview;

src/Website/.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);