故事书的作文

将多个故事书合并成一个

加载
多米尼克阮
@domyen

扩展组件库是很困难的.

成熟的公司维护数百个分散在不同故事书中的组件. 不同的团队使用自定义的需求和依赖关系构建自己的库.

故事书6.0引入了作文,这个新特性允许您浏览本地Storybook中的任何Storybook中的组件.

  • 📚将多个故事书合并为一本
  • 🌐并排浏览来自不同框架的组件
  • ⚡️️为大型Storybooks和monorepos提供更快的开发体验

等等,但是为什么?

跟踪部件是件累人的事. 你拥有的组件越多,你就会变得越疲惫.

十博体育备用网址采访了IBM、思科和Storybook社区的团队. It’s clear that mature companies have multiple Storybooks; usually one for each project.

理想的开发人员体验是同时与所有的故事书进行交互. 但这需要每个项目都拥有相同的技术堆栈. 这对于拥有多种产品的大公司来说是不可行的.

相反,开发人员在不同的故事书之间跳转以引用和重用组件. 这个过程很繁琐,所以开发人员避免使用它. 最后,这会导致脱节的用户体验.

结合故事书

构图使你能够结合故事书. 十博体育备用网址的目标是统一所有组件的Storybook体验, 不管视图层, 技术堆栈, 或依赖关系.

创新的核心是能力 在您自己的故事书中引用外部故事书. 这就解开了成熟团队经常遇到的常见工作流.

  • 👩‍💻UI开发人员 可以快速参考现有技术而不切换故事书.
  • 🎨设计系统 可以通过将自己组合到用户的故事书中来扩展应用吗.
  • 🛠前端平台 是否可以审计组件如何跨项目使用.

更重要的是, 组合使您能够将较重的Storybooks拆分为许多较轻的Storybooks,但保持统一的浏览体验.

它是如何工作的

故事书是在浏览器中编写的. 合成不涉及代码、webpack或任何特定于项目的配置.

您所需要的是一个实时故事书的URL. 十博体育备用网址使用这个URL来提取故事列表和Canvas iframe. 当Storybook在浏览器中加载时,它会在UI中组合所有的故事并将画布堆叠在一起.

当您单击外部故事时,Storybook将在外部画布中替换该故事. All of this happens behind the scenes; you have a seamless experience whether you’re interacting with a local or external story.

现在试一试

让十博体育备用网址通过向您的项目添加一个示例Storybook来演示Composition. 十博体育备用网址将使用开源软件 故事书设计系统 对于这个示例. 您可以使用在线出版或本地运行的任何Storybook.

第一次升级到最新的Storybook.

npx某人升级

在你的主.添加一个refs键,其中包含关于引用故事书的信息.

传递一个URL给 静态构建故事书. 十博体育备用网址用的是一个永久链接 Chromatic它是由核心维护者(包括我)提供的免费Storybook出版服务!).

//.故事书/主要.js

参考文献:{
 设计系统:{ 
   标题:“设计系统”, 
   url: http://5ccbc373887ca40020446347-yldsqjoxzb.彩色.com”
 }
}`

现在运行的故事书. 如果它已经在运行,则需要重新启动.

纱线运行故事书

🎉恭喜! 您将在您的故事列表中看到十博体育备用网址的设计系统组件. 用同样的技巧写你的故事书.3+). 首先确保你想写的故事书已经在网上出版了.

组成当地故事书

您还可以编写在本地运行的故事书. 例如,如果你有一个React Storybook和Angular Storybook运行在不同的端口上.

//.故事书/主要.js

参考文献:{
  反应:{ 
    标题:“反应”,
    url: http://localhost: 7007的 
  },

  角:{ 
    标题:“角”,
    url: http://localhost: 7008的 
  }
}

完美的设计系统和UI库作者

设计系统的作者可以自动地在消费者的故事书中组合他们的设计系统. 如果您将设计系统作为一个包交付,请在包中包含以下内容.json.

//您的设计系统的包.json

“故事”:{
  “title”:“故事书设计系统”,    
   url: http://5ccbc373887ca40020446347-yldsqjoxzb.彩色.com”
}

该元数据告诉包消费者已发布的Storybook的位置. 当消费者运行他们的Storybook时, 它会导航到URL, 找到的组件, 然后把它们放到新闻列表里. 这是一个代码 例子 该方法的.

参与

小说创作是由诺伯特·德·兰根发明的, 汤姆·科尔曼, 迈克尔Shilman, 麦基和布罗迪. 设计和主题由多米尼克阮(我)设计!).

如果你有一个实施的问题或建议来与十博体育备用网址聊天 不和. 维护者通常是在线的.

Storybook由1000多个开源贡献者维护,由顶级维护者组成的指导委员会指导. 如果你有兴趣投稿,请查看Storybook GitHub,创建一个问题,或提交一个pull请求. 上的捐赠 开放的集体.

这篇文章对你有帮助吗?

获得免费的UI开发指南和教程,就像这个电子邮件给你.

4402个开发者,还在增加

十博体育备用网址正在招聘!

加入故事书和彩色的团队. 构建成千上万开发人员在生产环境中使用的工具. Remote-first.

视图的工作

受欢迎的文章

松弛通知和网络钩子

脚本自定义行为和自动化更多的工作流
加载
多米尼克阮
通过彩色
面向专业UI开发人员的深入指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水时事通讯,以获得免费的教程、指南和通过电子邮件发送给您的资源.
友情链接: 1 2 3 4 5 6 7 8 9 10