Add shadcn/ui + Storybook

Author: cte

.vscode/extensions.json

@@ -4,6 +4,8 @@
 	"recommendations": [
 		"dbaeumer.vscode-eslint",
 		"connor4312.esbuild-problem-matchers",
-		"ms-vscode.extension-test-runner"
+		"ms-vscode.extension-test-runner",
+		"csstools.postcss",
+		"bradlc.vscode-tailwindcss"
 	]
 }

.vscode/settings.json

@@ -9,5 +9,6 @@
 		"dist": true // set this to false to include "dist" folder in search results
 	},
 	// Turn off tsc task auto detection since we have the necessary tasks as npm scripts
-	"typescript.tsc.autoDetect": "off"
+	"typescript.tsc.autoDetect": "off",
+	"editor.formatOnSave": true
 }

webview-ui/.gitignore

@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+*storybook.log

webview-ui/.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from "@storybook/react-vite"
+
+const config: StorybookConfig = {
+	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+	addons: [
+		"@storybook/addon-onboarding",
+		"@storybook/addon-essentials",
+		"@chromatic-com/storybook",
+		"@storybook/addon-interactions",
+	],
+	framework: {
+		name: "@storybook/react-vite",
+		options: {},
+	},
+}
+export default config

webview-ui/.storybook/preview.ts

@@ -0,0 +1,17 @@
+import type { Preview } from "@storybook/react"
+
+import "../src/index.css"
+import "./vscode.css"
+
+const preview: Preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+}
+
+export default preview

webview-ui/.storybook/vscode.css

@@ -0,0 +1,32 @@
+/**
+ * Use `Developer: Generate Color Theme From Current Settings` to generate themes
+ * using your current VSCode settings.
+ *
+ * See: https://code.visualstudio.com/docs/getstarted/themes
+ */
+
+:root {
+	--vscode-editor-background: #1f1f1f; /* "editor.background" */
+	--vscode-editor-foreground: #cccccc; /* "editor.foreground" */
+	--vscode-menu-background: #1f1f1f; /* "menu.background" */
+	--vscode-menu-foreground: #cccccc; /* "menu.foreground" */
+	--vscode-button-background: #0078d4; /* "button.background" */
+	--vscode-button-foreground: #ffffff; /* "button.foreground" */
+	--vscode-button-secondaryBackground: #313131; /* "button.secondaryBackground" */
+	--vscode-button-secondaryForeground: #cccccc; /* "button.secondaryForeground" */
+	--vscode-disabledForeground: red; /* "disabledForeground" */
+	--vscode-descriptionForeground: #9d9d9d; /* "descriptionForeground" */
+	--vscode-focusBorder: #0078d4; /* "focusBorder" */
+	--vscode-errorForeground: #f85149; /* "errorForeground" */
+	--vscode-widget-border: #313131; /* "widget.border" */
+	--vscode-input-background: #313131; /* "input.background" */
+	--vscode-input-foreground: #cccccc; /* "input.foreground" */
+	--vscode-input-border: #3c3c3c; /* "input.border" */
+
+	/* I can't find these in the output of `Developer: Generate Color Theme From Current Settings` */
+	--vscode-charts-red: red;
+	--vscode-charts-blue: blue;
+	--vscode-charts-yellow: yellow;
+	--vscode-charts-orange: orange;
+	--vscode-charts-green: green;
+}

webview-ui/components.json

@@ -0,0 +1,21 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "new-york",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.js",
+		"css": "src/index.css",
+		"baseColor": "neutral",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"iconLibrary": "lucide"
+}