如何使用React和Storybook构建UI组件

介绍

Storybook 是一个用户界面 (UI) 库，可用于记录组件。

注意： 本文建立在 Storybook 简介 的基础上，其中介绍了如何使用它来组织和构建 JavaScript 组件。

在本文中，您将使用 React 和 Storybook 构建一个交互式 UI 组件。

在本教程结束时，您将把故事书部署为一个独立的应用程序，作为风格指南。

先决条件

要完成本教程，您需要：

• Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。

本教程已使用 Node v14.4.0、npm v6.14.5、react v16.13.1 和 @storybook/react v5.3.19 进行了验证。

第 1 步 — 设置项目

首先，我们需要创建一个新的 React 项目，为此，我们将使用 create-react-app，它是一个很好的搭建 React 应用程序的工具。

npx create-react-app storybook-app

然后导航到新创建的项目目录：

cd storybook-app

下一步是将 storybook 包安装到我们的项目中：

npx -p @storybook/cli sb init

该命令可以从 package.json 文件中自动检测我们正在使用的框架，并安装该框架的 Storybook 版本。

运行这两个命令后，我们可以通过打开 package.json 文件来确认我们已经安装了 @storybook/react 依赖项，以验证软件包是否已安装，然后我们可以运行应用程序以及运行 Storybook。

npm start

npm run storybook

运行这两个命令后，我们将在不同的端口上运行 React 应用程序和 Storybook 应用程序。

手动添加配置

如果我们按照上述步骤进行操作，那么它已经为我们预先配置好了。 如果我们在已经存在的 React 项目中安装了 @storybook/react 包，那么我们需要按照这些步骤来设置 Storybook。

我们首先要在我们的 React 项目的根目录中创建一个文件夹 .storybook，然后在文件夹中创建一个名为 config.js 的文件并添加以下代码行：

.storybook/config.js

import { configure } from '@storybook/react';

function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

上面的代码块是 Storybook 的配置，它告诉 Storybook 在 src/stories 目录中查找故事。 如果我们还没有设置它，我们将创建该文件夹。 在 src 文件夹中创建一个名为 stories 的文件夹。 这是我们将为其创建故事的所有组件最终所在的位置。

注意： Storybook 5.3.0 及更高版本引入了 main.js 处理 config.js 过去所做的事情。 这些更改记录在 官方迁移文档 中。

如果您使用的是 Storybook 5.3.0 或更高版本，则不需要 config.js 文件，可以忽略此步骤。

官方文档 也提出了不同的方法来放置 stories。

至此，Storybook 已准备好使用。

第 2 步 — 将故事添加到 React 应用程序

现在我们已经完成了设置，我们可以使用 Storybook 创建组件。

在本教程中，我们将创建一个 <Button> 组件，对于这个组件，我们将在 stories 文件夹中记录它们的故事。 继续在 component 目录中创建一个 <Button> 组件，代码如下：

src/components/Button.js

import React from 'react';
import './Button.css';

const Button = props => (
  <button onClick={props.onClick} style={props.style}>
    {props.label && <span>{props.label}</span>}
  </button>
);

export default Button;

并为组件添加样式：

src/components/Button.css

button {
  padding: 20px;
  width: 20em;
  margin: 10px;
  color: white;
  font-size: 19px;
  cursor: pointer;
  border: 2px solid #fecd43;
  background: #fecd43;
}

现在，我们可以为创建的 <Button> 组件添加一个故事。 在 stories 目录中创建一个文件并将其命名为 buttonStories.js，然后将以下代码行添加到文件中：

src/故事/buttonStories.js

import React from 'react';
import { storiesOf } from '@storybook/react';

import Button from '../components/Button';

storiesOf('Button', module)
  .add('with primary', () => <Button label="Primary Button" />)
  .add('with outline', () => <Button
    label="Ouline Button"
    style={{ background: 'transparent', border: '3px solid #fecd43' }}
  />)
  .add('with rounder corners', () => <Button
    label="Rounded Button"
    style={{ borderRadius: '15px' }}
  />)
  .add('disabled', () => <Button disabled
    label="Disabled Button"
    style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }}
  />);

接下来，创建一个 index.js 文件。 导入 buttonStories.js 文件：

src/故事/index.js

import './buttonStories';

这将作为所有故事的基础文件，我们可以将它们全部导入该文件。

注意： Storybook 5.3.0 及更高版本采用的文件名模式为：*.stories.js。 为了符合这个约定，buttonStories.js 应该重命名为 button.stories.js。

您可能还会遇到使用相同 Button 标题的演示故事生成的 1-Button.stories.js 文件。 为避免混淆，您可以将该文件的内容注释掉。

然后对于在 stories 目录下创建的每个新文件，我们将它们导入到该文件中。

第 3 步 - 集成插件

带有 Storybook 的插件有助于实现额外的功能，使它们更有用和更具交互性。 可在 官方网站 上找到 Storybook 可用的所有插件的完整列表。

在本文中，我们将在创建的故事中添加 Action 插件。 Actions Addon 可用于显示 Storybook 中事件处理程序接收到的数据。

手动添加插件

如果默认情况下尚未完成，我们可以设置插件，您需要按照以下步骤操作。

注意： 如果您使用的是 Storybook 5.3.0 或更高版本，就本教程而言，您不需要 addons.js 文件，可以忽略此步骤。

使用以下命令安装插件包：

npm install --save-dev @storybook/addon-actions

然后，将以下内容添加到 .storybook/addons.js 中：

.storybook/addons.js

import '@storybook/addon-actions/register';

现在您的 Storybook 支持插件。

第 4 步 - 使用插件操作

为了使我们的 Button 故事与 Storybook 交互，我们可以将以下代码添加到 buttonStories.js：

src/故事/buttonStories.js

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

import Button from '../components/Button';

storiesOf('Button', module)
  .add('with primary', () => <Button
    onClick={action('click')}
    label="Primary Button"
  />)
  .add('with outline', () => <Button
    label="Ouline Button"
    onClick={action('click')}
    style={{ background: 'transparent', border: '3px solid #fecd43' }}
  />)
  .add('with rounder corners', () => <Button
    label="Rounded Button"
    onClick={action('click')}
    style={{ borderRadius: '15px' }}
  />)
  .add('disabled', () => <Button disabled
    label="Disabled Button"
    onClick={action('click')}
    style={{ background: 'gray' , border: 'gray', cursor: 'not-allowed' }}
  />);

然后运行故事书：

在下面的选项卡上，您会看到一个 Actions tab，在我们与按钮交互的任何时候都会记录该操作。

第 5 步 — 自定义主题

使用 Storybook，我们可以自定义使用的默认主题，并且 Storybook 与默认的浅色主题捆绑在一起。 现在，让我们探索如何将其自定义为不同的东西。 黑暗主题可能或完全不同的东西。 首先，我们需要通过添加以下代码行来修改我们在 config.js 文件中设置的配置：

.storybook/config.js

import { addParameters } from '@storybook/react';
import { themes } from '@storybook/theming';

addParameters({
  options: {
    theme: themes.dark
  }
});

注意： Storybook 5.3.0 及更高版本引入manager.js。 官方主题文档中讨论了使用这种新约定进行主题化的步骤。

配置好深色主题后，我们可以观察到整个 Storybook 主题都切换到了深色主题。 在任何时候，这都可以根据我们的喜好切换回浅色或深色主题。

如果我们想要一个完全不同的主题，我们也可以开箱即用地定义一个动态主题。 第一步是为我们的主题创建一个文件，在 .storybook 文件夹中创建一个名为 yourTheme.js 的新文件。 下一步是使用 storybook/theming 中的 create() 函数生成新主题。

这是 pink.js 主题的示例：

.storybook/pink.js

import { create } from '@storybook/theming';

export default create ({
  base: 'light',
  colorPrimary: 'hotpink',
  colorSecondary: 'deepskyblue',
  // UI
  appBg: 'rgb(234, 0, 133)',
  appContentBg: 'white',
  appBorderColor: 'white',
  appBorderRadius: 4,
  // Typography
  fontBase: '"Open Sans", sans-serif',
  fontCode: 'monospace',
  // Text colors
  textColor: 'rgb(255, 250, 250)',
  textInverseColor: 'white',
  // Toolbar default and active colors
  barTextColor: 'white',
  barSelectedColor: 'white',
  barBg: 'rgb(246, 153, 190)',
  // Form colors
  inputBg: 'white',
  inputBorder: 'silver',
  inputTextColor: 'black',
  inputBorderRadius: 4,
  brandTitle: 'Pink Storybook'
});

然后，我们可以继续在 Storybook 配置文件中导入 pink.js。

.storybook/config.js

import pink from './pink';

addParameters({
  options: {
    theme: pink
  }
});

与之前的图像相比，这给了我们一个完全不同的主题。

第 6 步 — 部署 Storybook

Storybook 附带的一项功能是，我们可以将 Storybook 部署为静态站点，我们可以将其部署到我们选择的任何托管选项。 要配置它，我们需要将 build-storybook 脚本添加到我们的 package.json：

包.json

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

该脚本的作用是将我们的故事书目录构建为静态 Web 应用程序，并将其输出到 .out 目录中。 构建完成后，我们可以运行此脚本并部署 .out 目录的内容。 继续运行命令：

npm run build-storybook

构建完成后，我们现在可以使用我们选择的任何主机来部署目录的内容。

要在本地测试它是否有效，我们可以运行以下命令：

npx http-server .out

：注意： 您的 package.json 可能具有类似于 build-storybook -s public 的 build-storybook 脚本。 这不是指定的 .out 目录，而是将静态站点文件输出到 storybook-static 目录。

这会将文件夹的内容作为静态站点提供。

结论

在本文中，我们学习了如何使用 Storybook 和 React 构建交互式组件。 现在我们已经探索了 Storybook 的可能性，并且还提供了关于如何将 Storybook 作为组件库集成到我们的 React 项目中的指南。 使用 Storybook 进行开发是团队中开发人员和设计人员的单一事实来源，并且可以与其他前端框架集成。

这篇文章只概述了它是如何与 React 一起使用的。 如果您正在寻找其他框架的指南，请随时查看 Storybook 的官方文档 。

您还可以在 GitHub 上找到 这篇文章的代码。