Add Storybook 10 style guide and design environment

.github/workflows/astro.yml

@@ -75,6 +75,9 @@ jobs:
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
         working-directory: ${{ env.BUILD_PATH }}
+      - name: Build Storybook style guide
+        run: ${{ steps.detect-package-manager.outputs.runner }} storybook build --output-dir public/styleguide
+        working-directory: ${{ env.BUILD_PATH }}
       - name: Build with Astro
         run: |
           ${{ steps.detect-package-manager.outputs.runner }} astro build \

.gitignore

@@ -25,4 +25,8 @@ pnpm-debug.log*
 
 # pagefind
 
-public/pagefind
+public/pagefind
+
+# storybook
+
+public/styleguide

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "@storybook-astro/framework";
+import { react } from "@storybook-astro/framework/integrations";
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/stories/**/*.mdx",
+    "../src/components/**/*.stories.@(ts|tsx)",
+    "../src/stories/**/*.stories.@(ts|tsx)",
+  ],
+  addons: ["@storybook/addon-docs", "@storybook/addon-themes"],
+  framework: {
+    name: "@storybook-astro/framework",
+    options: {
+      integrations: [react()],
+    },
+  },
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,23 @@
+import { definePreview } from "@storybook-astro/framework";
+import { withThemeByDataAttribute } from "@storybook/addon-themes";
+
+export default definePreview({
+  decorators: [
+    withThemeByDataAttribute({
+      themes: { light: "light", dark: "dark" },
+      defaultTheme: "light",
+      attributeName: "data-theme",
+    }),
+  ],
+  parameters: {
+    layout: "padded",
+    backgrounds: { disable: true },
+    viewport: {
+      viewports: {
+        mobile: { name: "Mobile", styles: { width: "390px", height: "844px" } },
+        tablet: { name: "Tablet", styles: { width: "768px", height: "1024px" } },
+        desktop: { name: "Desktop", styles: { width: "1280px", height: "800px" } },
+      },
+    },
+  },
+});