嵌入storybook组件

介绍 (Introduction)

Storybook is an open source tool for developing UI (user interface) components in isolation and it integrates pretty well with most front end frameworks including React, Vue, and Angular and others. It makes building UIs organized and efficient that means developers don’t get distracted with flaky data, unfinished APIs, or business logic.

Storybook是用于隔离开发UI(用户界面)组件的开源工具，它与大多数前端框架(包括React，Vue和Angular等)很好地集成在一起。 它使构建的UI井井有条，效率高，这意味着开发人员不会被不稳定的数据，未完成的API或业务逻辑所困扰。

Storybook runs outside of the main app so users can create UI components in a different environment without worrying about app-specific dependencies and requirements and allows you to keep track of edge cases and as a result, you ship components with confidence.

Storybook在主应用程序外部运行，因此用户可以在不同的环境中创建UI组件，而不必担心特定于应用程序的依赖关系和要求，并允许您跟踪极端情况，因此，您可以放心地交付组件。

故事书的用例 (Use Cases for Storybook)

Storybook is a UI component library, letting you build components in isolation. Several teams rely on storybook to do the heavy lifting of composing a component library and also as a building block for their design systems. Companies like Algolia, Salesforce, Artsy ,Gov.uk, and GitHub use Storybook to build and distribute UI components that impact millions of people.

Storybook是一个UI组件库，可让您隔离地构建组件。 几个团队依靠故事书来完成组成组件库的繁重工作，并且还作为其设计系统的基础。 像Algolia ， Salesforce ， Artsy ， Gov.uk和GitHub之类的公司都使用Storybook来构建和分发影响数百万人的UI组件。

Here’s a couple of use cases for Storybook.

这是Storybook的几个用例。

• Component Library: With the way Storybook works, we can maintain a component library by utilizing this process of having all components in our application in one location with the ability to test each state of the component.

  组件库：通过Storybook的工作方式，我们可以利用以下过程来维护组件库：将应用程序中的所有组件放在一个位置，并能够测试组件的每种状态。

• Design Systems:A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale. With storybook, you get a design system out of the box.

  设计系统：设计系统是可以以不同组合重用的一系列组件。 设计系统使您可以大规模管理设计。 使用Storybook，您可以立即使用设计系统。

• Visual Testing: With Storybook addons, we can integrate visual regression testing in order to test and keep your component library consistent no matter how big it is.

  视觉测试：使用Storybook插件，我们可以集成视觉回归测试，以测试和保持组件库的一致性，无论它有多大。

• Share across teams:Storybook can be shared across teams because of the way it can be deployed as a static site functioning solely on its own. It can be shared amongst designers, project managers in a team to give feedback or comments on the current design of the components which improves collaboration within teams.

  在团队之间共享： Storybook可以在团队之间共享，因为它可以作为静态站点单独部署而运行。 可以在团队中的设计师，项目经理之间共享它，以提供有关组件当前设计的反馈或意见，从而改善团队内部的协作。

用故事书写故事 (Writing Stories with Storybook)

From the name Storybook what comes to mind when you hear stories is that a combination of stories forms a Storybook right? A Storybook is a combination of different stories for different components. Stories are functions that return something that can be rendered to screen. A story can contain a single state of one component or can be seen as a visual representation of a component.

从故事书这个名字开始，当您听到故事时想到的是故事的组合构成了故事书，对吗？ 故事书是针对不同组件的不同故事的组合。 故事是返回可以渲染到屏幕的内容的函数。 故事可以包含一个组件的单一状态，也可以看作一个组件的视觉表示。

Building UI components with Storybook means you have all components in your application isolated so that they function regardless of the connection between them, and can be tested as separate UI components.

使用Storybook构建UI组件意味着您将应用程序中的所有组件隔离开，从而无论它们之间的连接如何，它们都可以正常工作，并且可以作为单独的UI组件进行测试。

When building with Storybook there are several ways to structure and organize stories within your application.

使用Storybook进行构建时，有多种方法可以在应用程序中构建和组织故事。

• Stories inside a component directory

  组件目录中的故事

.
 └── src/
  └── components/
   └── button
    └── button.js
    └── button.stories.js

• Stories outside the src directory

  src目录外的故事

.
 └── src
  └── components
   └── button.js
 └── stories
  └── button.stories.js

• Stories sub-folder in a component directory

  故事子 文件夹 - 组件目录中的文件夹

.
 └── src/
  └── components/
   └── button
    └── button.js
    └── stories
     └── button.stories.js

Following any of these methods is a matter of choice. It’s up to you to pick what works best for you or/and your team.

遵循这些方法中的任何一种都是一个选择问题。 由您选择最适合您或您和/或您的团队的东西。

集成插件 (Integrating Addons)

Addons are extra features that can be added to a storybook to make them more interactive and useful. With addons we have two ways of implementing them, One way is by using Decorators and another is by using Native Addons. A list of all addons curated by Storybook team can be found on this addons page.

插件是可以添加到故事书中的其他功能，以使其更具交互性和实用性。 使用插件，我们有两种方法来实现它们，一种方法是使用Decorators，另一种方法是使用Native Addons。 在此附加组件页面上可以找到Storybook团队策划的所有附加组件的列表。

Decorators: Decorators are wrapper components that wrap a story. An instance where decorators can be handy is when you need to center a story on the displayed screen. We can create a wrapper component and then use it within the story.

装饰器：装饰器是包装故事的包装器组件。 当您需要在显示的屏幕上居中放置故事时，装饰者便会很方便。 我们可以创建一个包装器组件，然后在故事中使用它。

const styles = {
  textAlign: 'center',
};
const Center = ({ children }) => <div style={styles}>{children}</div>;

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Center from './center';
import Button from './button';

storiesOf('Button', module).add('with text', () => (
  <Center>
    <Button onClick={action('clicked')}>Hello Button</Button>
  </Center>
));

Native Addons: Native addons use Storybook as a platform and interact with it. Native addons can add extra features beyond wrapping stories. An example is the storybook-action addon, this helps with logging the data received by event handlers in Storybook.

本地插件：本地插件使用Storybook作为平台并与之交互。 本地插件可以添加除包装故事以外的其他功能。 一个示例是storybook-action插件，它有助于记录事件处理程序在Storybook中接收到的数据。

将Storybook部署为静态应用 (Deploying Storybook as a Static App)

Storybook can be used alongside with the project we are developing because it gives a great developer experience with features, like hot reloading via Webpack HMR. But also we can extend this further by deploying the Storybook as a static site on its own. This will enable us to showcase our components to everyone and can even pass as a style guide for our application. To do this all you need to do is to configure your storybook using this script.

故事书可与我们正在开发的项目一起使用，因为它可以为开发人员带来丰富的功能，例如通过Webpack HMR进行热重装。 但是我们也可以通过将Storybook单独部署为静态站点来进一步扩展。 这将使我们能够向所有人展示我们的组件，甚至可以作为我们应用程序的样式指南。 为此，您需要做的就是使用此脚本配置故事书。

{
  "scripts": {
    "build-storybook": "build-storybook -c .storybook -o .out"
  }
}

When you run yarn build-storybook this will build the storybook configured in the Storybook directory into a static web app and place it inside the directory called out and then you can proceed to deploy that directory using one of any of these services GitHub Pages, Netlify or Now, etc.

当您运行yarn build-storybook这会将故事书目录中配置的故事书构建到静态Web应用程序中，并将其放置在名为out的目录out ，然后您可以继续使用以下任一服务部署该目录：或现在等

与其他框架整合 (Integrating with Other Frameworks)

Storybook supports almost all the frontend frameworks available and in order for you to integrate with either of these frameworks a guide has been written by the storybook team that you can follow to setup storybook for individual frameworks and they include:

故事书支持几乎所有可用的前端框架，为了使您与这两个框架集成，故事书团队编写了指南，您可以按照该指南为各个框架设置故事书，其中包括：

• React

  React

• React Native

  React本机

• Vue

  Vue

• Angular

  角度的

• Mithril

  秘银

• Marko

  马可

• HTML

  HTML

• Svelte

  Card.svelte

• Ember

  余烬

• Riot

  暴动

• Preact

  事前

结论 (Conclusion)

Storybook works for a lot of use cases as we have seen and integrating it into our workflow will enable us to build comprehensive UI components for our applications in isolation. In this article, I’ve covered what Storybook is all about and when it is useful to take advantage of when building web applications. The next part of this article will entail show we can start building interactive UI components using React and Storybook.

如我们所见，Storybook适用于许多用例，并将其集成到工作流中将使我们能够为应用程序单独构建全面的UI组件。 在本文中，我介绍了Storybook的全部内容以及在构建Web应用程序时可以利用的有用时间。 本文的下一部分将说明我们可以开始使用React和Storybook构建交互式UI组件。

翻译自: https://www.digitalocean.com/community/tutorials/how-to-build-js-components-with-storybook

嵌入storybook组件