Canonical 故事书配置
这个包为Canonical的"故事本"项目提供了可再使用的配置工厂.
这个软件包,目前仅输出共享配置. 将来我们可能会利用工厂的模式 提供更定制的.
开始
- 在您的 React, Svelte 或 Web 组件故事本项目中, 用
bun add -d @canonical/storybook-config - 替换
.storybook/main.ts以
import { createConfig } from "@canonical/storybook-config";
export default createConfig("react"); // or one of "svelte", "sveltekit", "lit"
页:1
这个 自动文档 通过设置启用全项目特性 tags: ["autodocs"] 在预览级别,所以故事文件不需要声明标记本身(一个故事仍然可以选择退出 tags: ["!autodocs"]) (中文(简体) ).
此软件包导出共享预览配置( T)@canonical/storybook-config/preview),包括该默认。 然而,故事书静态地描述每个项目自己的 .storybook/preview.ts 无法可靠地接回 tags (或 storySort从导入预览中传播( )故事书js/故事书#31842) (中文(简体) ). 因此,已完成的项目必须申报 tags: ["autodocs"] 在他们自己的内线中 .storybook/preview.ts数字 :
import previewConfig from "@canonical/storybook-config/preview";
const preview = {
...previewConfig,
tags: ["autodocs"],
};
export default preview;
他们:两份文件,不是一份
故事书制作成 两份单独的文件这是唯一的事实 大部分的困惑在这里减少.
- 这个 管理器 边栏和工具栏 :
addons.setConfig({ theme }),哪个@canonical/storybook-addon-shell-theme从管理器的切入点. - 文件页数 内部制取 预览 iframe管理者 主题永远无法到达它们。 由于没有自己的主题,故事书会回到 其内置的光线主题, 所以每个文件页面都编为未被命名的故事本 灰色,不管它周围的相框是什么样子。 这是 962号。 。 。 .
此软件包将关闭该缺口 : previewConfig 套装 parameters.docs.container
改为 src/DocsContainer.tsx,将 Canonical 主题传送到文档页面
并遵循读者的OS轻/暗偏好.
故事 内容 主题不属于这一范畴——属于
@canonical/storybook-addon-utils工具栏和
.light 编号 : .dark 课程.
为什么一个容器而不是 parameters.docs.theme
docs.theme 是一个纯参数,在渲染时读取。 该页将是
在负载上正确但不会跟随现场操作系统的变化——它需要重新装入
经理马上翻了过来 容器可以订阅
prefers-color-scheme。 。 。 .
为什么容器住在这里 而不是在外壳主题附加物
它看起来像它属于附加物, 移动它是明显的未来
重设. 断了. 那个加通的维特建立外部 storybook/* 不过
没有别的东西,所以捆绑反应和 @storybook/addon-docs 将船载入其中
第二次反应——容器叫钩子,所以复制件提出一个
无效的钩子呼叫 。 此软件包已携带 @storybook/addon-docs反应
类型和重现 TypeScript 配置,所以组件属于这里.
准确注意失败模式,因为明显的猜测是错误的:它是 没有
a 丢失的文档上下文. @storybook/addon-docs 将其背景放在
globalThis.__DOCS_CONTEXT__,第一个加载器获胜,特别是重复
捆绑共享一个实例。 反应是单子无法活下来的
已复制.
反应对于斯维尔特和利特故事书来说是安全的: @storybook/addon-docs
声明反应为硬依赖,容器通过文件生成
而不是作为故事的装饰者.
洞穴
- 目前,工厂无法配置。 我们不知道通过自定义配置参数的最佳api是什么,如果有的话.
- 这个故事书的配置暂时只执行一个反应/活化,活化/活化和活化的工厂. 我们认为,这可能会改变为使其他框架和工具相互协调.