chore(component): Add Astrobook integration

Preview component per-component design.

astro.config.ts

@@ -1,3 +1,11 @@
+import type { AstroIntegration } from "astro";
 import { defineConfig } from "astro/config";
+import astrobook from "astrobook";
 
-export default defineConfig({});
+const integrations: AstroIntegration[] = [];
+
+if (process.env.ASTROBOOK) {
+  integrations.push(astrobook({ directory: "src/components" }));
+}
+
+export default defineConfig({ integrations });

package.json

@@ -4,6 +4,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "astro dev",
+    "astrobook": "ASTROBOOK=1 astro dev",
     "build": "astro build",
     "preview": "astro preview",
     "check:astro": "astro check",
@@ -15,6 +16,8 @@
   },
   "devDependencies": {
     "@astrojs/check": "0.9.4",
-    "@biomejs/biome": "1.9.4"
+    "@biomejs/biome": "1.9.4",
+    "@types/node": "22.9.0",
+    "astrobook": "0.5.1"
   }
 }

src/components/Bio/Bio.stories.ts

@@ -0,0 +1,11 @@
+import Bio from "./Bio.astro";
+import * as stories from "./story.ts";
+
+export default {
+  title: "Bio",
+  component: Bio,
+};
+
+export const Default = { args: stories.Default };
+export const Japanese = { args: stories.Japanese };
+export const Long = { args: stories.Long };

src/components/Bio/story.ts

@@ -0,0 +1,20 @@
+import type { Props } from "./Bio.astro";
+
+export const Default: Props = {
+  name: "Bio Name",
+  description: "Bio Description",
+  icon: "https://github.com/withastro.png",
+};
+
+export const Japanese: Props = {
+  name: "名前",
+  description: "説明",
+  icon: "https://github.com/withastro.png",
+};
+
+export const Long: Props = {
+  name: "Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Bio Name",
+  description:
+    "Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Bio Description",
+  icon: "https://github.com/withastro.png",
+};