组件故事格式( CSF)
为什么是标准格式?
成分已经占据了UI的地貌. 在开发、测试、设计和原型方面,有新的面向组件的工具。 这些工具用于创建和消费组件和组件实例(a.k.a.故事)。 但每个工具都有自己的专有格式,因为表达组件实例的简单而可知的方法尚不存在.
"史记"为一成分之真源.
一个故事是一个代码片段,它使一个组件在某个特定状态下成为实例. 考虑一下吧用户故事" ..
它使用被运至用户的生产代码,使其成为一个组件示例的最准确的表述. 还有,故事用你用来构建应用程序的视图层来表达.
组件故事格式
组件故事格式是一个基于JavaScript ES6模块的组件示例开放标准. 这使开发、测试和设计工具之间能够相互合作.
export default { title: 'atoms/Button' };
export const text = () => <Button>Hello</Button>;
export const emoji = () => <Button>😀😎👍💯</Button>;
💎 很简单. 写入组件"故事"与使用干净,被广泛使用的格式输出ES6函数一样容易.
🚚 非专有. CSF不需要任何针对供应商的图书馆. 在ES6模块直播的任何地方, 包括你最喜欢的测试工具如Jest和Cypress.
☝️ 宣说. 宣示语法是等同于MDX等更高级格式,能进行清洁可核查的转化.
🔥 被优化了. 组件故事不需要除您组件以外的任何库. 而且因为它们是ES6模块,它们甚至可以被树震动!
谁用CSF?
工具 : 故事书, (中文(简体) ), UXPin 密码 打开 网络组件.dev
与 : 欢乐, (中文(简体) ), 酶, (中文(简体) ), 测试库, (中文(简体) ), 齐压, (中文(简体) ), 摩诃迦叶等 (中文(简体) ).
CSF 公用事业
用于处理 组件故事格式( CSF)。 。 。 .
安装
yarn add @componentdriven/csf
API 密码
函数定义和类型参见软件包源 :
-
storyNameFromExport(key)- 加强出口名称(key故事的情节。 目前执行 启动线索。 。 。 . -
isExportStory(key, { includeStories, excludeStories })- 一个被命名的导出是否匹配CSF的包含/排除选项? -
parseKind(kind, { rootSeparator, groupSeparator })- 使用给定的分隔符配置从路径中解析组件/类型名称. -
sanitize(string)- 从故事ID中删除标语和非法字符. -
toId(kind, name)- 从组件/类型和故事名称中生成故事本ID.
捐款
如果您有任何建议,请打开一个问题或公关.
欢迎所有的贡献!
运行测试 :
yarn test