不同状态和故事书的造型形式

在实现和测试新功能的过程中，有很多不同且有效的方法可以提高Web应用程序的开发速度。其中一种方法就是能够重用UI组件。

为了独立开发 UI 元素，然后将其应用到项目中，我尝试并学习了Storybook。

这家图书馆的优点在于：

它集成了不同的 JavaScript 库和框架。
它不会改变Web应用程序的核心功能和结构。
它是可测试的
它还支持更多插件（用于将 Storybook 与开发流程相结合）和装饰器（用于自定义组件，使其在应用程序中正常工作）。

如何根据开发平台将 Storybook playground 应用到项目中并运行，您可以在其官方文档中找到相关信息（链接在此）。

您在阅读我的一些博客文章时已经注意到，我的专长是 React Web 应用程序。下一个示例也是用 React 实现的⚛️。

调整完成后，我们来向故事书中添加几个故事。例如，我们有一个简单的注册表单，包含标题、状态消息、两个带有各自标签的不同输入字段和一个提交按钮。

让我们创建一个简单的注册表单，并标记和设置其元素在不同状态下的样式。

首先我们需要添加<SignUpForm />组件，导入sign-up-form.css及其相应的样式：

.form {
    font-family: Roboto, sans-serif;
    margin: 0;
    padding: 0;
}

.form__title {
    letter-spacing: 1px;
    font-weight: 600;
}

.form__status {
    color: #666;
    margin-bottom: 20px;
}

.form__label {
    font-size: .8em;
    font-weight: bold;
}

.form__input {
     width: 200px;
    height: 25px;
    padding-left: 10px;
    border-radius: 10px;
    border: 1px solid darkgrey;
}

.form__button {
    width: 100px;
    height: 25px;
    border-radius: 10px;
    color: white;
    background-color: limegreen;
    border: 0;
    cursor: pointer;
    font-weight: bold;
}

.form__button–submitting {
    background-color: darkgrey;
}

.form__button–submitted {
    background-color: limegreen;
}

我们的表单有三种状态：

初始状态：表单默认显示时，等待用户输入
提交：表单提交后执行 HTTP 请求的时间。
已提交：API 调用已完成，服务器响应成功。

根据表单状态，某些表单元素将显示/隐藏，或具有不同的样式，例如：

提交表单时，提交按钮会变为灰色且无法点击。
如果表单已提交，则用户将收到注册成功的通知，并收到登录提示信息。

这里完整实现了<SignUpForm />注入的 props <SignUpContainer />：


// SignUpForm.js

import React from 'react';

import './sign-up-form.css';

export const SignUpForm = ({onSubmit, state}) => {
    const submitting = state === 'submitting';
    const submitted = state === 'submitted';

    const buttonState = submitting ?
        'form__button--submitting' :
        'form__button--submitted';

    return (
        <form className="form" onSubmit={onSubmit}>
            <h1 className="form__title">Sign Up</h1>
            {
                submitted ?
                    <div className="form__status">
                      You have been signed up successfully. Sign in?
                    </div> : null
            }
            <label htmlFor="name" className="form__label">Name</label>
            <p>
                <input type="text"
                       id="name"
                       placeholder="Name"
                       disabled={submitting}
                       className="form__input"
                />
            </p>
            <label htmlFor="email" className="form__label">Email</label>

            <p>
                <input type="email"
                       id="email"
                       disabled={submitting}
                       placeholder="Email"
                       className="form__input"
                />
            </p>
            <p>
                <button disabled={submitting} 
                        className={`form__button ${buttonState}`}>
                    Submit
                </button>
            </p>
        </form>
    );
};

该<SignUpContainer />组件是父容器组件，它将通过状态和方法来操作注册表单。我们将省略此组件，因为它与基于 Storybook 的样式指南无关。

下一步是为 Storybook 编写故事。这意味着要创建描述表单 UI 特定状态的特定函数：


//  ./stories/index.js

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

const noOp = (e) => {
    e.preventDefault();
};

storiesOf('Registration Form', module)
    .add('default', () => (
        <div><SignUpForm state="idle" onSubmit={noOp}/></div>
    ))
    .add('submitting', () => (
        <div><SignUpForm state="submitting" onSubmit={noOp}/></div>
    ))
    .add('submitted', () => (
        <div><SignUpForm state="submitted" onSubmit={noOp}/></div>
    ));

最后，加载故事书中的所有故事：


// .storybook/config.js

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

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

configure(loadStories, module);