chore: storybook (#15285)

Co-authored-by: David Hill <iamdavidhill@gmail.com>

packages/storybook/.storybook/main.ts

@@ -0,0 +1,37 @@
+import { defineMain } from "storybook-solidjs-vite"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+
+const here = path.dirname(fileURLToPath(import.meta.url))
+const ui = path.resolve(here, "../../ui")
+
+export default defineMain({
+  framework: {
+    name: "storybook-solidjs-vite",
+    options: {},
+  },
+  addons: [
+    "@storybook/addon-onboarding",
+    "@storybook/addon-docs",
+    "@storybook/addon-links",
+    "@storybook/addon-a11y",
+    "@storybook/addon-vitest",
+  ],
+  stories: ["../../ui/src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  async viteFinal(config) {
+    const { mergeConfig, searchForWorkspaceRoot } = await import("vite")
+    return mergeConfig(config, {
+      resolve: {
+        dedupe: ["solid-js", "solid-js/web", "@solidjs/meta"],
+      },
+      worker: {
+        format: "es",
+      },
+      server: {
+        fs: {
+          allow: [searchForWorkspaceRoot(process.cwd()), ui],
+        },
+      },
+    })
+  },
+})

packages/storybook/.storybook/manager.ts

@@ -0,0 +1,11 @@
+import { addons, types } from "storybook/manager-api"
+import { ThemeTool } from "./theme-tool"
+
+addons.register("opencode/theme-toggle", () => {
+  addons.add("opencode/theme-toggle/tool", {
+    type: types.TOOL,
+    title: "Theme",
+    match: ({ viewMode }) => viewMode === "story" || viewMode === "docs",
+    render: ThemeTool,
+  })
+})

packages/storybook/.storybook/preview.tsx

@@ -0,0 +1,106 @@
+import "@opencode-ai/ui/styles"
+
+import { createEffect, onCleanup, onMount } from "solid-js"
+import addonA11y from "@storybook/addon-a11y"
+import addonDocs from "@storybook/addon-docs"
+import { MetaProvider } from "@solidjs/meta"
+import { addons } from "storybook/preview-api"
+import { GLOBALS_UPDATED } from "storybook/internal/core-events"
+import { createJSXDecorator, definePreview } from "storybook-solidjs-vite"
+import { Code } from "@opencode-ai/ui/code"
+import { CodeComponentProvider } from "@opencode-ai/ui/context/code"
+import { DialogProvider } from "@opencode-ai/ui/context/dialog"
+import { DiffComponentProvider } from "@opencode-ai/ui/context/diff"
+import { MarkedProvider } from "@opencode-ai/ui/context/marked"
+import { Diff } from "@opencode-ai/ui/diff"
+import { ThemeProvider, useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
+import { Font } from "@opencode-ai/ui/font"
+
+function resolveScheme(value: unknown): ColorScheme {
+  if (value === "light" || value === "dark" || value === "system") return value
+  return "system"
+}
+
+const channel = addons.getChannel()
+
+const Scheme = (props: { value?: unknown }) => {
+  const theme = useTheme()
+  const apply = (value?: unknown) => {
+    theme.setColorScheme(resolveScheme(value))
+  }
+  createEffect(() => {
+    apply(props.value)
+  })
+  createEffect(() => {
+    const root = document.documentElement
+    root.classList.remove("light", "dark")
+    root.classList.add(theme.mode())
+  })
+  onMount(() => {
+    const handler = (event: { globals?: Record<string, unknown> }) => {
+      apply(event.globals?.theme)
+    }
+    channel.on(GLOBALS_UPDATED, handler)
+    onCleanup(() => channel.off(GLOBALS_UPDATED, handler))
+  })
+  return null
+}
+
+const frame = createJSXDecorator((Story, context) => {
+  const override = context.parameters?.themes?.themeOverride
+  const selected = context.globals?.theme
+  const pick = override === "light" || override === "dark" ? override : selected
+  const scheme = resolveScheme(pick)
+  return (
+    <MetaProvider>
+      <Font />
+      <ThemeProvider>
+        <Scheme value={scheme} />
+        <DialogProvider>
+          <MarkedProvider>
+            <DiffComponentProvider component={Diff}>
+              <CodeComponentProvider component={Code}>
+                <div
+                  style={{
+                    "min-height": "100vh",
+                    padding: "24px",
+                    "background-color": "var(--background-base)",
+                    color: "var(--text-base)",
+                  }}
+                >
+                  <Story />
+                </div>
+              </CodeComponentProvider>
+            </DiffComponentProvider>
+          </MarkedProvider>
+        </DialogProvider>
+      </ThemeProvider>
+    </MetaProvider>
+  )
+})
+
+export default definePreview({
+  addons: [addonDocs(), addonA11y()],
+  decorators: [frame],
+  globalTypes: {
+    theme: {
+      name: "Theme",
+      description: "Global theme",
+      defaultValue: "light",
+    },
+  },
+  parameters: {
+    actions: {
+      argTypesRegex: "^on.*",
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    a11y: {
+      test: "todo",
+    },
+  },
+})

packages/storybook/.storybook/theme-tool.ts

@@ -0,0 +1,21 @@
+import { createElement } from "react"
+import { useGlobals } from "storybook/manager-api"
+import { ToggleButton } from "storybook/internal/components"
+
+export function ThemeTool() {
+  const [globals, updateGlobals] = useGlobals()
+  const mode = globals.theme === "dark" ? "dark" : "light"
+  const toggle = () => {
+    const next = mode === "dark" ? "light" : "dark"
+    updateGlobals({ theme: next })
+  }
+  return createElement(
+    ToggleButton,
+    {
+      title: "Toggle theme",
+      active: mode === "dark",
+      onClick: toggle,
+    },
+    mode === "dark" ? "Dark" : "Light",
+  )
+}