Website updates: add new app scaffold, archive legacy site, and refresh docs/tooling (#173)

src/Website/.storybook/main.ts

@@ -0,0 +1,50 @@
+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/Toast.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]);