feat: add Svelte Storybook app (#348)

* feat: add Svelte Storybook app

Amp-Thread-ID: https://ampcode.com/threads/T-019f9c38-7ebd-73cb-8912-083994a58328

Co-authored-by: Eli <elisha.dukes@gmail.com>

* fix: pin Storybook version for CI

Amp-Thread-ID: https://ampcode.com/threads/T-019f9c38-7ebd-73cb-8912-083994a58328

Co-authored-by: Eli <elisha.dukes@gmail.com>

* fix: register Storybook production entries

Amp-Thread-ID: https://ampcode.com/threads/T-019f9c38-7ebd-73cb-8912-083994a58328

Co-authored-by: Eli <elisha.dukes@gmail.com>

---------

Co-authored-by: Amp <amp@ampcode.com>

Author: lishaduck

.gitignore

@@ -2,6 +2,7 @@
 **/dist/
 **/build/
 **/build-server/
+**/storybook-static/
 **/.svelte-kit/
 **/coverage/
 **/target/

apps/storybook/.storybook/main.ts

@@ -0,0 +1,10 @@
+import type { StorybookConfig } from "@storybook/svelte-vite";
+
+export default {
+	stories: ["../src/**/*.stories.@(js|jsx|mjs|ts|tsx|svelte)"],
+	addons: ["@storybook/addon-a11y", "@storybook/addon-docs"],
+	framework: {
+		name: "@storybook/svelte-vite",
+		options: {},
+	},
+} satisfies StorybookConfig;

apps/storybook/.storybook/preview.ts

@@ -0,0 +1,12 @@
+import type { Preview } from "@storybook/svelte-vite";
+
+export default {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+} satisfies Preview;

apps/storybook/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "@petalnet/storybook",
+	"version": "0.0.0",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"build": "storybook build",
+		"dev": "storybook dev -p 6006",
+		"typecheck": "svelte-check --tsconfig ./tsconfig.json"
+	},
+	"devDependencies": {
+		"@petalnet/tsconfig": "workspace:*",
+		"@storybook/addon-a11y": "catalog:",
+		"@storybook/addon-docs": "catalog:",
+		"@storybook/svelte-vite": "catalog:",
+		"@sveltejs/vite-plugin-svelte": "catalog:dev",
+		"storybook": "catalog:",
+		"svelte": "catalog:prod",
+		"svelte-check": "catalog:dev",
+		"typescript": "catalog:dev",
+		"vite": "catalog:dev"
+	}
+}

apps/storybook/src/Welcome.stories.ts

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from "@storybook/svelte-vite";
+
+import Welcome from "./Welcome.svelte";
+
+const meta = {
+	title: "Example/Welcome",
+	component: Welcome,
+	tags: ["autodocs"],
+} satisfies Meta<typeof Welcome>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const CustomName: Story = {
+	args: {
+		name: "Component",
+	},
+};

apps/storybook/src/Welcome.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	let { name = "PetalNet" }: { name?: string } = $props();
+</script>
+
+<main>
+	<h1>Welcome to {name} Storybook</h1>
+	<p>Add stories to this app to develop components in isolation.</p>
+</main>
+
+<style>
+	main {
+		font-family: system-ui, sans-serif;
+		padding: 2rem;
+	}
+
+	h1 {
+		margin-block: 0 0.5rem;
+	}
+
+	p {
+		color: #475569;
+		margin: 0;
+	}
+</style>

apps/storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+	"extends": "@petalnet/tsconfig/base.json",
+	"compilerOptions": {
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"noEmit": true,
+		"types": ["vite/client"]
+	},
+	"include": [".storybook/**/*.ts", "src/**/*.ts", "src/**/*.svelte", "vite.config.ts"]
+}

apps/storybook/vite.config.ts

@@ -0,0 +1,6 @@
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+	plugins: [svelte()],
+});

knip.config.ts

@@ -41,6 +41,9 @@ export default {
 			},
 			entry: ["effectdb.config.ts!", "src/env.ts!"],
 		},
+		"apps/storybook": {
+			entry: [".storybook/*.ts!", "src/**/*.stories.ts!", "src/**/*.svelte!"],
+		},
 		"packages/better-auth-effect-qb-adapter": {
 			entry: ["test/**/*.ts"],
 		},