在终端里运行这个：

运行此命令来创建一个新的Storybook项目：npm create storybook@latest

全屏 按Esc键退出

乍一看，它是一个通用的组件库启动包：一个按钮，一个页头，以及一些示例组件。但在这样的简单背后隐藏着更强大的东西——设计系统的基础。

本文将探讨 Storybook 的启动指南介绍了核心设计原则——可复用性、可组合性和一致性。

注：如果需要进一步调整，请根据上下文确认具体语境。如果"Storyboard"指的是开发工具，建议翻译为“故事板”或“Storybook”。

Storybook 是一个开源工具，用于独立构建并测试 UI 组件。可以将其视为一个专用的工坊，在这里你可以创建、预览并记录组件在任何可能的状态下，而无需启动整个应用。

但 Storybook 不仅仅是一个组织 UI 组件的地方。实际上，它成为一个强大的平台，通过以下方式帮助组织前端工作流程：

• 让你能够在不涉及业务逻辑的情况下构建和调试组件。
• 支持多种框架，如 React、Vue、Angular 和 Svelte 等。
• 提供一种自然的跨团队协作流程——设计师、开发者和利益相关者都可以审查和调整组件来交付高质量的用户界面。

无论你是在制作一个按钮还是一个完整的设计系统，Storybook 都可以帮助你更快速，保持一致性和，并且更有效地合作。

使用 Storybook 的益处

我们再来说说支持使用 Storybook 的一些理由：

1. 组件状态的可视化测试: 每个故事代表组件的一个特定状态。这使得更容易发现边缘情况并确保应用程序中的一致性。
2. 自动生成文档: Autodocs 将你的故事转化为完整且可共享的文档。团队中的任何人都可以探索使用示例、参数和行为。这也是向新成员介绍项目的好时机。
3. 顺畅的合作: 设计师、产品经理和质量保证工程师可以在浏览器中查看和互动组件，提供反馈并审查更改，即使没有设置本地环境的技术知识。
4. 跨框架使用: Storybook 支持 React、Vue、Angular、Svelte、Web Components 等，使任何团队都可以避免框架支持的限制性。
5. 被顶级公司信任: The Washington Post、Shopify、NASA 等公司依赖 Storybook 来支持他们的 UI 工作流。它也是像 Chakra UI 或 Fluent UI 这样的流行组件库的基础。

可重用

可重用性是设计系统的关键。我们创造的通用组件可以适应各种场景，同时保持一致的外观和体验。

让我们来回顾一下这个内置的 Button 组件：

    export const Button = ({
      primary = false,
      size = 'medium',
      backgroundColor,
      label,
      ...props
    }: ButtonProps) => {
      const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
      // 导入Button组件，该组件是一个可自定义的按钮组件，支持设置按钮的基本属性如背景颜色、大小、是否为主要按钮等
      // ButtonProps类型定义了按钮组件接受的属性
      return (
        <button
          type="button"
          className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
          style={{ backgroundColor }}
          {...props}
        >
          {label}
        </button>
      );
    };

全屏模式, 退出

虽然看起来很简单，但一打开盒子，它自带一组不错的道具

• 布尔参数 primary 用于切换主要状态，
• 尺寸、颜色和标签的参数分别用于调整组件的这三个方面。

这些故事加强了该组件的可重用性。

    export const Primary: Story = {
      args: {
        primary: true, // 主按钮
        label: '按钮',
      },
    };

    export const Secondary: Story = {
      args: {
        label: '按钮',
      },
    };

    export const Large: Story = {
      args: {
        size: '大',
        label: '按钮',
      },
    };

全屏模式，退出全屏

这种故事格式鼓励以不要重复自己（DRY）的原则创建一致且可重用的组件。

组合性

设计系统不仅是为了单一用途的组件，而是像乐高积木那样可以组合使用。

这一原则在 Header 组件中得到了体现：

    export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
      <header>
        <div className="storybook-header">
          <div>
            <svg width="32" height="32" viewBox="0 0 32 32" xmlns="<http://www.w3.org/2000/svg>">
          ...
            </svg>
            <h1>Acme</h1>
          </div>
          <div>
            {user ? (
              <>
                <span className="welcome">
                  欢迎回来, <b>{user.name}</b>!
                </span>
                <Button size="small" onClick={onLogout} label="退出" />
              </>
            ) : (
              <>
                <Button size="small" onClick={onLogin} label="登陆" />
                <Button primary size="small" onClick={onCreateAccount} label="加入" />
              </>
            )}
          </div>
        </div>
      </header>
    );

进入全屏模式，退出

在这里，我们不会在页面头部硬编码应该存在的按钮，而是重用现有的Button组件。这就是构建优秀设计系统的方法——用小部件组合成更大的组件。

Storybook工具通过将每个组件分开处理来使这种思维方式更容易理解。你一次只关注一个组件。

一致

一致性是设计系统中最重要的因素——在视觉、行为和结构方面。这可以通过使用设计令牌来实现。

启动程序默认不提供内置实现，但其架构设计便于轻松添加实现。

例如，在 CKEditor，我们使用了一种混合方法——语法优秀的样式表（Sass）预处理器和 CSS 变量。

$radius-medium: var(--app-radius-medium); /* 中等圆角 */
$radius-big: var(--app-radius-big); /* 大圆角 */
$radius-bigger: var(--app-radius-bigger); /* 更大圆角 */

(进入/退出)全屏

接着，我们可以设定特定主题相关的值，增强描述的流畅自然。

    .app-theme-custom {
        --app-radius-medium: 4px;
        --app-radius-big: 7px;
        --app-radius-bigger: 15px;
    }
    /* 自定义应用主题样式，定义不同大小的圆角值 */

点击全屏。点击退出全屏。

故事书（Storybook）最大的优势之一是其生态系统中的插件。这些插件可以让您根据具体需求调整 Storybook 的设置，比如检查组件的无障碍性。

使用辅助功能扩展，可以直接将辅助功能检查集成到您的组件stories中。

要启用它，需要安装npm包：

下面的命令可以用来安装 Storybook 的辅助功能插件:
npm install @storybook/addon-a11y --save-dev    //用于安装 Storybook 的辅助功能插件

进入全屏，退出全屏

然后把它注册到你的 .storybook/main.js 文件中。

module.exports = {
    addons: [
        ...,
        '@storybook/addon-a11y', // 导出包含辅助功能插件的Storybook配置
    ],
};

全屏模式，退出全屏

一旦设置好，每个组件故事都会获得一个无障碍面板，该面板会自动检查。它会指出缺少标签、对比度过低等问题，无需离开你的开发环境。

这是一张描述性的图片。

这个插件很好地说明了如何把 Storybook 的功能扩展到基础之外，展示了它的灵活性和实用性。

请访问Storybook 集成插件页面查看完整的可用插件列表。

在这篇文章里，我们探讨了Storybook入门及其主要概念和特性。

它向你介绍了优秀的设计系统的核心原则：例如，

• 可重复使用性
• 可组合
• 一致性

这不仅仅是在生成后就会被移除的代码，而是你设计系统的基石。研究它、扩展它并利用它，创建一个让你设计出惊艳用户界面的设计系统。