Merge pull request #447 from Kilo-Org/catrielmuller/kilo-ui-storybook

feat: add storybook for kilo-ui

Author: catrielmuller

.gitignore

@@ -17,6 +17,7 @@ playground
 tmp
 dist
 ts-dist
+storybook-static
 .turbo
 **/.serena
 .serena/

bun.lock

@@ -0,0 +1,49 @@
+@font-face {
+  font-family: "Inter";
+  src: url("@opencode-ai/ui/fonts/inter.woff2") format("woff2-variations");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 100 900;
+}
+
+@font-face {
+  font-family: "Inter Fallback";
+  src: local("Arial");
+  size-adjust: 100%;
+  ascent-override: 97%;
+  descent-override: 25%;
+  line-gap-override: 1%;
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  src: url("@opencode-ai/ui/fonts/ibm-plex-mono.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  src: url("@opencode-ai/ui/fonts/ibm-plex-mono-medium.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: "IBM Plex Mono";
+  src: url("@opencode-ai/ui/fonts/ibm-plex-mono-bold.woff2") format("woff2");
+  font-display: swap;
+  font-style: normal;
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "IBM Plex Mono Fallback";
+  src: local("Courier New");
+  size-adjust: 100%;
+  ascent-override: 97%;
+  descent-override: 25%;
+  line-gap-override: 1%;
+}

packages/kilo-ui/.storybook/fonts.css

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from "storybook-solidjs-vite"
+import { mergeConfig } from "vite"
+import solidPlugin from "vite-plugin-solid"
+
+const config: StorybookConfig = {
+  framework: "storybook-solidjs-vite",
+  stories: ["../src/**/*.stories.@(ts|tsx)"],
+  addons: ["@storybook/addon-docs", "@storybook/addon-themes", "@storybook/addon-a11y"],
+  refs: {},
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      plugins: [solidPlugin()],
+      resolve: {
+        conditions: ["browser", "solid", "module", "import"],
+      },
+      esbuild: {
+        jsxImportSource: "solid-js",
+        jsx: "automatic",
+      },
+    })
+  },
+}
+
+export default config

packages/kilo-ui/.storybook/main.ts

@@ -0,0 +1,11 @@
+<style>
+  /* Hide Color Scheme toolbar when kilo-vscode theme is active */
+  html[data-kilo-theme="kilo-vscode"] [aria-label^="Color Scheme"] {
+    display: none !important;
+  }
+
+  /* Hide VS Code Theme toolbar by default and when kilo theme is active */
+  html:not([data-kilo-theme="kilo-vscode"]) [aria-label^="VSCode Theme"] {
+    display: none !important;
+  }
+</style>

packages/kilo-ui/.storybook/manager-head.html

@@ -0,0 +1,20 @@
+import { addons } from "storybook/manager-api"
+import { GLOBALS_UPDATED, SET_GLOBALS } from "storybook/internal/core-events"
+
+addons.register("kilo-ui/toolbar-visibility", (api) => {
+  const update = (globals: Record<string, unknown>) => {
+    const isVscode = globals["theme"] === "kilo-vscode"
+    document.documentElement.setAttribute("data-kilo-theme", isVscode ? "kilo-vscode" : "kilo")
+  }
+
+  const channel = api.getChannel()
+  if (!channel) return
+
+  channel.on(SET_GLOBALS, ({ globals }: { globals: Record<string, unknown> }) => {
+    update(globals)
+  })
+
+  channel.on(GLOBALS_UPDATED, ({ globals }: { globals: Record<string, unknown> }) => {
+    update(globals)
+  })
+})

packages/kilo-ui/.storybook/manager.ts

@@ -0,0 +1,94 @@
+/** @jsxImportSource solid-js */
+import type { Preview, SolidRenderer } from "storybook-solidjs-vite"
+import type { DecoratorFunction } from "storybook/internal/types"
+import { applyKiloTheme, applyVscodeTheme, clearVscodeTheme } from "../src/stories/theme-decorator"
+import "./fonts.css"
+import "../src/styles/index.css"
+
+const themeDecorator: DecoratorFunction<SolidRenderer> = (Story, context) => {
+  const themeId = (context.globals["theme"] as string) ?? "kilo"
+  const vscodeThemeId = (context.globals["vscodeTheme"] as string) ?? "dark-modern"
+
+  const colorScheme = (() => {
+    if (themeId === "kilo-vscode") return applyVscodeTheme(vscodeThemeId)
+    clearVscodeTheme()
+    return (context.globals["colorScheme"] as "light" | "dark") ?? "dark"
+  })()
+
+  applyKiloTheme(themeId, colorScheme)
+  document.body.style.background = "var(--background-base)"
+  document.body.style.color = "var(--text-base)"
+  return Story()
+}
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: "centered",
+  },
+  decorators: [themeDecorator],
+  globalTypes: {
+    theme: {
+      description: "Theme",
+      toolbar: {
+        title: "Theme",
+        icon: "paintbrush",
+        items: [
+          { value: "kilo", title: "Kilo" },
+          { value: "kilo-vscode", title: "Kilo VSCode" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+    colorScheme: {
+      description: "Color Scheme",
+      toolbar: {
+        title: "Color Scheme",
+        icon: "circlehollow",
+        items: [
+          { value: "dark", title: "Dark", icon: "moon" },
+          { value: "light", title: "Light", icon: "sun" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+    vscodeTheme: {
+      description: "VSCode Theme",
+      toolbar: {
+        title: "VSCode Theme",
+        icon: "browser",
+        items: [
+          { value: "dark-modern", title: "Dark Modern (default)" },
+          { value: "dark-plus", title: "Dark+" },
+          { value: "dark-vs", title: "Dark (Visual Studio)" },
+          { value: "light-modern", title: "Light Modern" },
+          { value: "light-plus", title: "Light+" },
+          { value: "light-vs", title: "Light (Visual Studio)" },
+          { value: "hc-black", title: "High Contrast" },
+          { value: "hc-light", title: "High Contrast Light" },
+          { value: "monokai", title: "Monokai" },
+          { value: "solarized-dark", title: "Solarized Dark" },
+          { value: "solarized-light", title: "Solarized Light" },
+          { value: "red", title: "Red" },
+          { value: "quiet-light", title: "Quiet Light" },
+          { value: "tomorrow-night-blue", title: "Tomorrow Night Blue" },
+          { value: "kimbie-dark", title: "Kimbie Dark" },
+          { value: "abyss", title: "Abyss" },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+  initialGlobals: {
+    theme: "kilo",
+    colorScheme: "dark",
+    vscodeTheme: "dark-modern",
+  },
+}
+
+export default preview

packages/kilo-ui/.storybook/preview.tsx

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js"
+  },
+  "include": ["./**/*", "../src/**/*"]
+}

packages/kilo-ui/.storybook/tsconfig.json

@@ -38,6 +38,7 @@
     "./accordion": "./src/components/accordion.tsx",
     "./sticky-accordion-header": "./src/components/sticky-accordion-header.tsx",
     "./resize-handle": "./src/components/resize-handle.tsx",
+    "./progress": "./src/components/progress.tsx",
     "./progress-circle": "./src/components/progress-circle.tsx",
     "./tag": "./src/components/tag.tsx",
     "./typewriter": "./src/components/typewriter.tsx",
@@ -80,8 +81,22 @@
     "solid-js": "catalog:"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "10.2.10",
+    "@storybook/addon-docs": "10.2.10",
+    "@storybook/addon-themes": "10.2.10",
     "@tsconfig/node22": "catalog:",
     "@types/bun": "catalog:",
-    "typescript": "catalog:"
+    "storybook": "10.2.10",
+    "storybook-solidjs-vite": "10.0.9",
+    "typescript": "catalog:",
+    "vite": "7.3.1",
+    "vite-plugin-solid": "2.11.10"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@kobalte/core": "0.13.11"
   }
 }

packages/kilo-ui/package.json

@@ -0,0 +1 @@
+export * from "@opencode-ai/ui/progress"