深入浅出：从零开始学习 storybook 基础教程

什么是 storybook？

storybook 是一个开源强大的工具，专为网页开发者设计，旨在帮助开发者在独立环境中创建、测试和管理组件。它提供了一个无依赖的环境，使开发者能够专注于单一组件的设计和行为验证，从而提升设计和开发效率，增强团队协作。其核心功能包括组件隔离、故事展示、自动化构建与测试以及团队协作。

优势：

• 提高设计与开发效率：通过可视化组件在不同状态下的表现，助力开发者与设计师快速反馈与调整设计。
• 加强团队协作：所有组件与故事集中于一个易于访问的平台，促进团队成员间的沟通与共享理解。
• 促进代码复用：独立的组件与测试提高了代码的复用性，减少重复劳动。

安装 Node.js与 yarn

确保计算机上已安装最新版本的 Node.js，访问 Node.js 官方网站 下载并安装。使用 yarn 作为包管理器，运行以下命令进行安装：

npm install -g yarn

安装 storybook

全局安装 storybook：

yarn global add @storybook/cli

初始化新项目：

yarn add @storybook/react @storybook/addon-actions @storybook/addon-links
npx storybook init

在 .storybook 目录创建 main.js，配置故事book：

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

// 配置故事book
const loadStories = () => {
  require('../src/stories/index.js');
};

configure(loadStories, module);

创建组件

在 src 目录下创建组件文件，如 Button.js：

import React from 'react';

const Button = ({ onClick, label }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
};

export default Button;

创建故事

在 .storybook 目录下创建 index.js，导入并配置组件的故事：

import { module, story } from '@storybook/addon-docs/blocks';

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

module('Button');

story('Primary', () => (
  <Button onClick={() => console.log('Clicked')} label="Click me" />
));

story('Disabled', () => (
  <Button onClick={() => console.log('Clicked')} label="Click me" disabled />
));

编写故事展示组件在不同状态下的行为。在 index.js 文件中，定义 Button 的故事：

const stories = {
  'Primary': () => (
    <Button onClick={() => console.log('Clicked')} label="Click me" />
  ),
  'Disabled': () => (
    <Button onClick={() => console.log('Clicked')} label="Click me" disabled />
  ),
};

module.exports = stories;

自动化构建与测试

配置 .storybook/main.js 以启用自动化测试：

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

const loadStories = () => {
  require('../src/stories/index.js');
};

const previewConfig = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
};

configure(loadStories, module);

代码示例：构建复杂数字表单组件

构建一个复杂数字表单组件，包括输入验证、条件显示和错误处理。使用 React 的 useState 和 useEffect Hook：

import React, { useState, useEffect } from 'react';
import { TextField, Button, Typography } from '@material-ui/core';

const validateInput = (inputValue, required = true) => {
  if (required && !inputValue) {
    return '请输入数字';
  }
  if (inputValue.length > 10) {
    return '数字最多为10位';
  }
  return '';
};

const NumberInputForm = () => {
  const [inputValue, setInputValue] = useState('');
  const [error, setError] = useState('');

  useEffect(() => {
    const currentError = validateInput(inputValue);
    setError(currentError);
  }, [inputValue]);

  const handleInputChange = (event) => {
    setInputValue(event.target.value);
  };

  return (
    <div>
      <Typography variant="h6">数字输入表单</Typography>
      <TextField
        label="输入数字"
        value={inputValue}
        onChange={handleInputChange}
        error={!!error}
        helperText={error}
      />
      <Button variant="contained" color="primary" disabled={error}>
        提交
      </Button>
    </div>
  );
};

export default NumberInputForm;

通过遵循上述指南和最佳实践，您可以有效地使用 storybook 来提升组件开发的效率和质量，确保设计的一致性和增强团队协作。不断实践和探索故事book的潜力，将发现更多有价值的使用场景和创新方法。