import "@opencode-ai/ui/styles/tailwind" 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 { DialogProvider } from "@opencode-ai/ui/context/dialog" import { MarkedProvider } from "@opencode-ai/ui/context/marked" 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 }) => { 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 (

) }) 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", }, }, })