Storybook 入门：如何在没有应用程序的情况下开发 React 组件

我想写一些关于我最喜欢的开发工具之一 Storybook 的想法和快速教程。Storybook 允许你独立开发用户界面组件。它还可以帮助开发和记录设计系统——设计系统是公司开发的用于其应用程序的组件和设计标准集。

什么是设计系统

大型公司通常拥有多个应用程序——面向外部、面向内部以及跨平台。在这些平台上统一设计可能非常困难。因此，许多公司正在实施设计系统，以帮助在其所有产品和平台上创建统一的设计。以下是 Airbnb 如何实施其设计系统的一个很好的例子。

您可能听说过组件库——这些是您可以在项目中导入和使用的组件的集合。设计系统对此进行了扩展，它还包含样式和内容指南以及其他用于未来设计工作的规则。这篇关于设计系统如何超越组件库的文章非常棒。

Storybook 有何帮助？

Storybook 确实有助于设计系统和组件库的开发。以下是 Grommet（一个易于访问的 React 组件库）的完整 Storybook 示例。通常，您必须构建整个应用程序才能在创建组件时查看它们。Storybook 允许您独立开发组件，以便您可以专注于样式和交互。您可以将它与许多不同的前端库（例如 React、Angular、Vue，甚至仅与 HTML）一起使用。

教程

在本教程中，我们将使用 React 构建一个包含几种不同类型按钮的迷你组件库，以了解 Storybook 的工作原理！如果您是 React 新手，请在继续阅读本教程之前先阅读这篇文章，快速了解一下。

首先，创建一个 React 应用程序：npx create-react-app storybook-tutorial。然后，进入其目录：cd storybook-tutorial。

现在，安装 storybook 并初始化它：npx -p @storybook/cli sb init。

此命令会添加一个.storybook包含项目配置信息的文件夹。它还会/stories在/src目录中添加一个文件夹，用于显示 Storybook 项目的演示。我们将继续删除该文件夹，但您可以根据需要查看代码！

运行：npm run storybook启动并运行 Storybook——它应该会弹出到您的浏览器中并向您显示一条有关未找到故事的消息。

现在，我们将继续创建一个Button目录：mkdir Button并在其中添加三个文件，一个用于组件，一个用于 CSS，一个用于故事：touch Button.{js,css,stories.js}。

以下是上述所有步骤的回顾：

$ npx create-react-app storybook-tutorial
$ cd storybook-tutorial
$ npx -p @storybook/cli sb init
$ rm -rf /src/stories
$ npm run storybook
$ mkdir /src/Button
$ touch /src/Button/Button.{js,css,stories.js,test.js}

现在，我们将在文件中创建一个 React 组件Button.js——它只会渲染一个按钮，并使用childrenprop 作为文本。这样我们就可以像之前那样实例化按钮组件<Button>my text</Button>，然后组件就会渲染一个button带有按钮的元素my text！

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

export default function Button({ children }) {
  return (
    <button>{children}</button>
  )
}

现在我们来创建几个故事。故事是组件状态的展示。我们将为不同类型的元素创建故事集合。例如，我们可以创建一个包含不同版本 Button 组件的集合。

我们继续将 Button 故事添加到Button.stories.js。首先，我们需要导入 React，以便可以在文件中使用 JSX。然后，我们将导入 Button 组件。

接下来，我们将从此文件添加一个默认导出，其中包含有关我们集合的元数据。在本例中，我给集合起了个标题Button。这将在我们的 Storybook UI 上呈现为一个目录名。

我们还将导出两个函数，Button用不同的文本实例化我们的组件。

总之，我们的代码看起来就像这样！

// Button.stories.js

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

export default {
  title: 'Button'
}

export const DefaultButton = () => <Button>hi!</Button>
export const SecondButton = () => <Button>hello!</Button>

如果你回头检查 Storybook 窗口，它应该看起来像这样：

有一个 Button 集合标签，其中包含两个不同的按钮：默认按钮和第二个按钮。您可以点击按钮之间，查看每个按钮的不同文本。如果我们只使用 React，则需要构建一个应用来查看该组件——而在这里，我们只需创建故事即可独立开发它们。

让我们想想我们的设计系统中可能存在的不同类型的按钮。可能是默认的带边框按钮、禁用按钮、主按钮，也可能有不同的状态——例如悬停和点击。我们也可能有不同大小的按钮。我们可以做的是添加区分这些不同因素的属性，然后基于这些属性为按钮添加 CSS 类。

我们首先要制作一个轮廓按钮和一个默认按钮。

首先，添加以下 CSS：

/* Button.css */
button {
  background-color: #FF389C;
  color: white;
  font-size: 20px;
  padding: 10px;
  border: none;
  border-radius: 4px;
}

button:focus {
  outline: 2px solid pink;
}

.outline {
  background-color: white;
  color: #FF389C;
  border: 2px solid #FF389C;
}

然后，我们将调整我们的故事书文件以导出默认按钮和轮廓按钮，而不是我们现在拥有的默认按钮和第二个按钮：

export const DefaultButton = () => <Button>click me!</Button>
export const OutlineButton = () => <Button outline>click me!</Button>

然后，如果按钮具有以下属性，我们需要有条件地将大纲类添加到按钮中outline：

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

export default function Button ({ children, outline }) {
  let classes = ''
  if (outline) classes += 'outline '
  return (
    <button className={classes}>{children}</button>
  )
}

现在，如果你看一下 Storybook，这两个按钮反映了我们的两种不同类型的按钮！

我们还可以让它拥有小按钮和大按钮。

/* Button.css */
.small {
  font-size: 10px;
  padding: 6px;
}

.large {
  font-size: 20px;
  padding: 10px;
}

我们将添加另外两个按钮故事：

export const SmallButton = () => <Button size='small'>click me!</Button>
export const LargeButton = () => <Button size='large'>click me!</Button>

如果您愿意，您也可以添加小轮廓按钮和大轮廓按钮！

我们还将尺寸添加到classes：

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

+ export default function Button ({ children, outline, size }) {
  let classes = ''
  if (outline) classes += 'outline '
+ classes += size
  return (
    <button className={classes}>{children}</button>
  )
}

现在你应该有四个故事了！

现在您可以做几件事：您可以使用操作来测试事件处理。您可以Button通过将其导入到 React 应用的页面来使用它——您也可以将其部署到 React 应用，npm以便将来更轻松地在项目中使用它。您还可以部署 Storybook，以便其他人可以通过运行该命令npm run build-storybook并使用静态站点托管来访问它，该文件夹由该命令生成。

Storybook 是一款非常棒的开发工具，尤其适合专注于设计的前端开发者。希望本教程对您有所帮助，欢迎在 Twitter 上留言，告诉我您下次想看什么教程！