From fb985edb205c8f82433083a60d1e6b4a87782d86 Mon Sep 17 00:00:00 2001 From: Maofeng Date: Mon, 21 Sep 2026 17:09:54 +0800 Subject: [PATCH] feat(docs): add appearance sandbox example --- bun.lock | 1 + docs/package.json | 1 + docs/src/index.css | 1 + .../appearance/theme-toggle/AccentPicker.tsx | 24 +++++++++++++++++++ .../sandboxes/appearance/theme-toggle/App.tsx | 19 +++++++++++++++ .../appearance/theme-toggle/sandbox.ts | 12 ++++++++++ .../en-US/advanced/atomic-composition.mdx | 17 +++++++++++++ .../zh-Hans/advanced/atomic-composition.mdx | 17 +++++++++++++ 8 files changed, 92 insertions(+) create mode 100644 docs/src/sandboxes/appearance/theme-toggle/AccentPicker.tsx create mode 100644 docs/src/sandboxes/appearance/theme-toggle/App.tsx create mode 100644 docs/src/sandboxes/appearance/theme-toggle/sandbox.ts diff --git a/bun.lock b/bun.lock index 50a7693..19f9fc1 100644 --- a/bun.lock +++ b/bun.lock @@ -55,6 +55,7 @@ "version": "0.0.0", "dependencies": { "@icones/react": "^0.0.1", + "@workspace/appearance": "workspace:*", "@workspace/i18n": "workspace:*", "@workspace/media": "workspace:*", "@workspace/preferences": "workspace:*", diff --git a/docs/package.json b/docs/package.json index 9863fb1..454e7ad 100644 --- a/docs/package.json +++ b/docs/package.json @@ -12,6 +12,7 @@ }, "dependencies": { "@icones/react": "^0.0.1", + "@workspace/appearance": "workspace:*", "@workspace/i18n": "workspace:*", "@workspace/media": "workspace:*", "@workspace/preferences": "workspace:*", diff --git a/docs/src/index.css b/docs/src/index.css index 46a09eb..dc2a975 100644 --- a/docs/src/index.css +++ b/docs/src/index.css @@ -1,4 +1,5 @@ @import "@workspace/ui/globals.css"; +@import "@workspace/appearance/globals.css"; @import "@workspace/media/globals.css"; @import "@workspace/search/globals.css"; diff --git a/docs/src/sandboxes/appearance/theme-toggle/AccentPicker.tsx b/docs/src/sandboxes/appearance/theme-toggle/AccentPicker.tsx new file mode 100644 index 0000000..417c11b --- /dev/null +++ b/docs/src/sandboxes/appearance/theme-toggle/AccentPicker.tsx @@ -0,0 +1,24 @@ +import { + ThemeColorPicker, + accentColorSwatches, +} from "@workspace/appearance/components/theme-color-picker" +import type { ThemeColorConfig } from "@workspace/appearance/theme" + +export function AccentPicker({ + config, + onConfigChange, +}: { + config: ThemeColorConfig + onConfigChange: (config: ThemeColorConfig) => void +}) { + return ( + + onConfigChange({ ...config, accentColor }) + } + /> + ) +} diff --git a/docs/src/sandboxes/appearance/theme-toggle/App.tsx b/docs/src/sandboxes/appearance/theme-toggle/App.tsx new file mode 100644 index 0000000..c954050 --- /dev/null +++ b/docs/src/sandboxes/appearance/theme-toggle/App.tsx @@ -0,0 +1,19 @@ +import React from "react" +import { ThemePreview } from "@workspace/appearance/components/theme-preview" +import type { ThemeColorConfig } from "@workspace/appearance/theme" + +import { AccentPicker } from "./AccentPicker" + +export default function ThemeColorsExample() { + const [config, setConfig] = React.useState({ + accentColor: "indigo", + baseColor: "neutral", + }) + + return ( +
+ + +
+ ) +} diff --git a/docs/src/sandboxes/appearance/theme-toggle/sandbox.ts b/docs/src/sandboxes/appearance/theme-toggle/sandbox.ts new file mode 100644 index 0000000..95be740 --- /dev/null +++ b/docs/src/sandboxes/appearance/theme-toggle/sandbox.ts @@ -0,0 +1,12 @@ +import { defineSandbox } from "../../../components/sandbox" + +export default defineSandbox({ + id: "appearance/theme-colors", + title: "Controlled theme colors", + entry: () => import("./App"), + files: { + "App.tsx": () => import("./App.tsx?raw"), + "AccentPicker.tsx": () => import("./AccentPicker.tsx?raw"), + }, + defaultFile: "App.tsx", +}) diff --git a/packages/appearance/docs/en-US/advanced/atomic-composition.mdx b/packages/appearance/docs/en-US/advanced/atomic-composition.mdx index 7b508e5..2cbcde0 100644 --- a/packages/appearance/docs/en-US/advanced/atomic-composition.mdx +++ b/packages/appearance/docs/en-US/advanced/atomic-composition.mdx @@ -9,6 +9,8 @@ toc: title: Compose a theme card - id: connected-layer title: State bindings + - id: live-preview + title: Live preview --- ## Controlled atoms {#controlled-atoms} @@ -39,3 +41,18 @@ For a more granular layout, compose `ThemePreview`, `baseColorSwatches`, `accent ## State bindings {#connected-layer} `AppearanceSettings` is the default binding layer between the atoms and the shared `PreferencesProvider`. A custom surface can call `usePreference` from `@workspace/preferences` for individual values without reusing the default layout. + +## Live preview {#live-preview} + +The documentation Sandbox can load a typed, multi-file example without embedding implementation details in MDX: + + + +For a single file, import the component and its raw source directly instead of creating a manifest: + +```mdx +import Demo from "./Demo" +import source from "./Demo.tsx?raw" + + +``` diff --git a/packages/appearance/docs/zh-Hans/advanced/atomic-composition.mdx b/packages/appearance/docs/zh-Hans/advanced/atomic-composition.mdx index ddf5601..e053648 100644 --- a/packages/appearance/docs/zh-Hans/advanced/atomic-composition.mdx +++ b/packages/appearance/docs/zh-Hans/advanced/atomic-composition.mdx @@ -9,6 +9,8 @@ toc: title: 组合主题卡片 - id: connected-layer title: 状态连接层 + - id: live-preview + title: 在线预览 --- ## 受控原子组件 {#controlled-atoms} @@ -39,3 +41,18 @@ toc: ## 状态连接层 {#connected-layer} `AppearanceSettings` 是原子组件与共享 `PreferencesProvider` 之间的默认连接层。自定义界面可以直接使用 `@workspace/preferences` 的 `usePreference` 读取单个字段，而不必复用默认布局。 + +## 在线预览 {#live-preview} + +文档 Sandbox 可以加载通过类型检查的多文件示例，而不需要把实现细节内联到 MDX： + + + +单文件示例不需要创建 Manifest，直接导入组件和原始源码即可： + +```mdx +import Demo from "./Demo" +import source from "./Demo.tsx?raw" + + +```