chore: implement storybook

.gitignore

@@ -11,3 +11,6 @@ pnpm-debug.log
 
 # Workspace packages
 packages/*/node_modules/
+
+# Storybook
+storybook-static/

.prettierignore

@@ -9,3 +9,4 @@
 flake.lock
 pnpm-debug.log
 pnpm-lock.yaml
+/storybook-static/

.storybook/css.d.ts

@@ -0,0 +1,5 @@
+declare module "*.css";
+declare module "*.css?url" {
+	const url: string;
+	export default url;
+}

.storybook/global.css

@@ -0,0 +1,108 @@
+html {
+	background: var(--vscode-sideBar-background);
+}
+
+body {
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
+#storybook-preview-wrapper {
+	background-color: var(--vscode-sideBar-background);
+}
+
+#root {
+	overscroll-behavior-x: none;
+	background-color: var(--vscode-sideBar-background);
+	color: var(--vscode-editor-foreground);
+	font-family: var(--vscode-font-family);
+	font-weight: var(--vscode-font-weight);
+	font-size: var(--vscode-font-size);
+	margin: 0;
+	max-width: 100%;
+	/* arbitrary size choice for the rough VSCode sidebar size */
+	width: 300px;
+}
+
+img,
+video {
+	max-width: 100%;
+	max-height: 100%;
+}
+
+a,
+a code {
+	color: var(--vscode-textLink-foreground);
+}
+
+p > a {
+	text-decoration: var(--text-link-decoration);
+}
+
+a:hover {
+	color: var(--vscode-textLink-activeForeground);
+}
+
+a:focus,
+input:focus,
+select:focus,
+textarea:focus {
+	outline: 1px solid -webkit-focus-ring-color;
+	outline-offset: -1px;
+}
+
+code {
+	font-family: var(--monaco-monospace-font);
+	color: var(--vscode-textPreformat-foreground);
+	background-color: var(--vscode-textPreformat-background);
+	padding: 1px 3px;
+	border-radius: 4px;
+}
+
+pre code {
+	padding: 0;
+}
+
+blockquote {
+	background: var(--vscode-textBlockQuote-background);
+	border-color: var(--vscode-textBlockQuote-border);
+}
+
+kbd {
+	background-color: var(--vscode-keybindingLabel-background);
+	color: var(--vscode-keybindingLabel-foreground);
+	border-style: solid;
+	border-width: 1px;
+	border-radius: 3px;
+	border-color: var(--vscode-keybindingLabel-border);
+	border-bottom-color: var(--vscode-keybindingLabel-bottomBorder);
+	box-shadow: inset 0 -1px 0 var(--vscode-widget-shadow);
+	vertical-align: middle;
+	padding: 1px 3px;
+}
+
+::-webkit-scrollbar {
+	width: 10px;
+	height: 10px;
+}
+
+::-webkit-scrollbar-corner {
+	background-color: var(--vscode-editor-background);
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: var(--vscode-scrollbarSlider-background);
+}
+::-webkit-scrollbar-thumb:hover {
+	background-color: var(--vscode-scrollbarSlider-hoverBackground);
+}
+::-webkit-scrollbar-thumb:active {
+	background-color: var(--vscode-scrollbarSlider-activeBackground);
+}
+::highlight(find-highlight) {
+	background-color: var(--vscode-editor-findMatchHighlightBackground);
+}
+::highlight(current-find-highlight) {
+	background-color: var(--vscode-editor-findMatchBackground);
+}

.storybook/main.ts

@@ -0,0 +1,19 @@
+import { mergeConfig } from "vite";
+
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+	stories: ["../packages/*/src/**/*.stories.@(ts|tsx)"],
+	addons: ["@storybook/addon-essentials", "@storybook/addon-a11y"],
+	framework: {
+		name: "@storybook/react-vite",
+		options: {},
+	},
+	viteFinal(baseConfig) {
+		return mergeConfig(baseConfig, {
+			assetsInclude: ["**/*.ttf", "**/*.woff", "**/*.woff2"],
+		});
+	},
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,104 @@
+import codiconCssUrl from "@vscode/codicons/dist/codicon.css?url";
+import { createElement, useEffect } from "react";
+
+import "./global.css";
+import { darkTheme } from "./themes/dark-v2";
+import { lightTheme } from "./themes/light-v2";
+
+import type { Preview } from "@storybook/react";
+import type { WebviewApi } from "vscode-webview";
+
+// Mock the acquireVsCodeApi function for Storybook, so that components
+// that rely on it can function without errors.
+if (
+	typeof window !== "undefined" &&
+	!(window as { acquireVsCodeApi?: () => WebviewApi<unknown> }).acquireVsCodeApi
+) {
+	(window as { acquireVsCodeApi: () => WebviewApi<unknown> }).acquireVsCodeApi =
+		() => ({
+			postMessage: () => undefined,
+			getState: () => undefined,
+			setState: (state) => state,
+		});
+}
+
+// Inject codicon stylesheet immediately (before any components render)
+// Must be a <link> element with id "vscode-codicon-stylesheet" for vscode-elements
+if (
+	typeof document !== "undefined" &&
+	!document.getElementById("vscode-codicon-stylesheet")
+) {
+	const link = document.createElement("link");
+	link.id = "vscode-codicon-stylesheet";
+	link.rel = "stylesheet";
+	link.href = codiconCssUrl;
+	document.head.appendChild(link);
+}
+
+// This allows the system viewing the storybook to use the same font
+// stack as vscode, which is important for accurate rendering of text.
+const getDefaultFontStack = () => {
+	if (navigator.userAgent.includes("Linux")) {
+		return 'system-ui, "Ubuntu", "Droid Sans", sans-serif';
+	} else if (navigator.userAgent.includes("Mac")) {
+		return "-apple-system, BlinkMacSystemFont, sans-serif";
+	} else if (navigator.userAgent.includes("Windows")) {
+		return '"Segoe WPC", "Segoe UI", sans-serif';
+	} else {
+		return "sans-serif";
+	}
+};
+
+const preview: Preview = {
+	parameters: {
+		layout: "centered",
+	},
+	globalTypes: {
+		theme: {
+			description: "Global theme for components",
+			defaultValue: "dark",
+			toolbar: {
+				title: "Theme",
+				icon: "circlehollow",
+				items: [
+					{ value: "light", icon: "circlehollow", title: "Light" },
+					{ value: "dark", icon: "circle", title: "Dark" },
+				],
+				dynamicTitle: true,
+			},
+		},
+	},
+	decorators: [
+		(Story, context) => {
+			const selectedTheme =
+				context.globals.theme === "light" ? lightTheme : darkTheme;
+
+			useEffect(() => {
+				// Apply CSS custom properties to the document root
+				selectedTheme.forEach(([property, value]) => {
+					document.documentElement.style.setProperty(property, value);
+				});
+
+				// Cleanup function to remove properties when unmounting
+				return () => {
+					selectedTheme.forEach(([property]) => {
+						document.documentElement.style.removeProperty(property);
+					});
+				};
+			}, [selectedTheme]);
+
+			return createElement(
+				"div",
+				{
+					id: "root",
+					style: {
+						fontFamily: getDefaultFontStack(),
+					},
+				},
+				createElement(Story),
+			);
+		},
+	],
+};
+
+export default preview;