Next.js 中使用 Storybook 搭建 UI 组件库-JavaScript中文网-JavaScript教程资源分享门户

前言

随着项目规模的增大，UI 组件的复用性和维护性愈发重要。在前端领域已经涌现出了很多优秀的 UI 组件库，比如 Ant Design、Element UI 等。

但是，在实际项目中，我们可能需要一个更符合自己业务需求的组件库，这时候就需要自己动手搭建一个 UI 组件库。而 Storybook 则是搭建组件库的利器之一。

本文将介绍如何在 Next.js 中使用 Storybook 搭建 UI 组件库，并提供详细的学习和指导意义。

什么是 Storybook

Storybook 是一种 UI 开发环境和组件库，用于在本地开发、测试和文档化 UI 组件。它可以独立于你的应用程序运行，以帮助开发人员在同一时间内构建、展示和测试多个组件。

使用 Storybook 可以将 UI 组件的开发和文档化分离出来，让团队成员专注于组件的开发和测试，提高开发效率，减少冗余代码。

Next.js 中使用 Storybook

在 Next.js 项目中使用 Storybook 需要安装 @storybook/react，并创建相应的配置文件。

安装 Storybook

首先，我们需要在项目中安装 Storybook：

npm install --save-dev @storybook/react

安装完成之后，我们需要在 package.json 中添加相应的命令：

{
  "scripts": {
    "storybook": "start-storybook -p 6006"
  }
}

配置 Storybook

接下来，我们需要为 Storybook 创建一个配置文件。在项目根目录下创建一个名为 .storybook 的文件夹，然后在该文件夹中创建一个名为 main.js 的文件，用于配置 Storybook：

// javascriptcn.com 代码示例
module.exports = {
  stories: ['../src/components/**/*.stories.js'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-knobs',
    '@storybook/addon-notes',
  ],
};

stories 属性指定了 Storybook 要展示的组件文档的位置，这里我们约定将所有的组件文档都存放在 src/components 目录下，并且文件名以 .stories.js 结尾。
addons 属性是 Storybook 的扩展，用于增强 Storybook 的功能。上述代码中指定了一些常用扩展，比如 @storybook/addon-actions 用于展示组件的事件（点击、输入等）；@storybook/addon-knobs 用于展示组件的 Props，让用户可以在 Storybook 界面中动态修改 Props 然后查看组件变化。

接下来，在 .storybook 文件夹下创建一个名为 preview.js 的文件，用于导入一些全局样式和水印等内容：

// javascriptcn.com 代码示例
import '../styles/globals.css';

export const parameters = {
  backgrounds: {
    default: 'light',
    values: [
      {
        name: 'light',
        value: '#f3f3f3',
      },
      {
        name: 'dark',
        value: '#222222',
      },
    ],
  },
  layout: 'fullscreen',
};

上述代码中，我们使用了 backgrounds 扩展，指定了两种背景颜色供用户选择；同时，我们还将布局设置为全屏。

创建组件文档

现在，我们可以开始编写组件并编写组件文档了。

为了让 Storybook 自动解析我们的组件文档，我们需要将组件和文档分开存放。在 src/components 目录下创建一个名为 Button 的组件，并创建一个名为 Button.stories.js 的文件，用于存放组件文档：

// javascriptcn.com 代码示例
import React from 'react';
import { action } from '@storybook/addon-actions';
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
import { Button } from './Button';

export default {
  title: 'Button',
  component: Button,
  decorators: [withKnobs],
};

export const Default = () => (
  <Button onClick={action('button-click')}>
    {text('Label', 'Hello, Storybook!')}
  </Button>
);

export const Disabled = () => (
  <Button disabled onClick={action('button-click')}>
    Disabled
  </Button>
);

export const Loading = () => (
  <Button loading onClick={action('button-click')}>
    Loading...
  </Button>
);

上述代码中，我们使用了 action 扩展来展示用户操作的反馈，并使用了 withKnobs 扩展来展示组件的 Props。

在 Button.stories.js 中，我们导出了三个不同的组件文档，分别对应着按钮不同的状态。

接下来，我们可以启动 Storybook 并查看我们编写的组件文档了：

npm run storybook

然后，在浏览器中访问 http://localhost:6006 就可以查看组件文档了：

总结

在本文中，我们介绍了如何在 Next.js 项目中使用 Storybook 来搭建自己的 UI 组件库，从而提高工作效率和代码复用性。

我们希望这篇文章能够给你带来帮助，并希望你也能够在自己的项目中尝试使用 Storybook。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6536030a7d4982a6ebdd1c88