用Storybook记录Django设计系统

请更新到我们的新饲料网址：lincolnloop.com/blog/feed/。

我们的客户带着各种现有的内部团队来找我们。有时，我们与UI设计师或专注于品牌的平面设计师合作，他们提供像素级的完美模型。其他时候，利益相关者会描述他们的目标是什么，而我们将负责更多的设计过程。无论哪种情况，我们都有责任将我们的工作记录下来。这在项目过程中和我们与客户的合作结束后都很重要。

组件库或设计系统提供了一种精简的方式，在项目的每个阶段与项目交付物一起交付文件。通常，我们为这些系统设置的前端工具使我们能够以一种比高保真Figma或Sketch文件更准确和可重复使用的方式获得客户对设计或UI交付物的批准。一旦批准，HTML/CSS就已经完成，并准备好在应用程序代码中进行整合。

在过去，我们一直保持这个工具的简单性，使用一个由SASS注释编译的静态网站生成器。它提供了一些小的功能来构建设计良好的文档，并允许我们以组件驱动的方式快速构建复杂的HTML模型。

为什么改用Storybook？

根据项目或当天的情况，我在UI/UX任务和前端开发之间切换。这意味着当我在做一个任务时，我在考虑另一个任务。例如，当我在做前台工作时，我经常会对如何最好地构造某个特定组件的CMS的UI形成意见。这就是我们的静态文件处理过程可以使用一些改进的地方。

让我们以一个标准的 "英雄组件 "为例。

如果我把静态文件移交给后端团队，我还会包括一个用于各种颜色选择（浅色或深色文本，以及照片的叠加颜色选项）的修改器类列表。然后，我会提供一个不同的修改器列表来改变文字在照片上的位置。如果我对CMS的用户界面有意见，我也会提供这些说明。(切换knockout-text 类，添加这个辅助文字，并使用下拉式的文字排列方式)。

Django的开发者将实施这项工作。这对我们内部来说足够好用。为了得到客户的认可，后端团队将把组件推送到QA服务器上，建立一个示例页面，然后我们将在组件前端和CMS用户界面上同时开始反馈循环。在必要的情况下，这意味着前端团队和后端团队都需要随时待命以应对变化。

这就是Storybook使我们能够改善内部工作流程和客户反馈过程的地方。我可以在我们的文档中直接使用类似CMS的UI控件。故事书的文件包含一些小的配置。

import Masthead from  '../app/styleguide-examples/masthead.njk';

export default {
  title: 'Components/Hero',
  argTypes: {
    knockout: { control: 'boolean'},
    modifier_class: {
      control: {
        type: 'select',
        options: [
          '',
          'top-right',
          'Top-left',
          'bottom-right',
          'bottom-left'
        ]
      }
    }  
  }
};

它在Storybook中编译成一个漂亮的UI，可以实时更新组件的例子。

一旦前端和文档构建完成，我就可以将副本推送到静态服务器上。客户可以对该组件提供反馈，并在涉及到后台团队之前对CMS用户界面的某种形式进行修补。这提高了初始反馈的保真度，使我能够更有信心地向后端团队提供指示。

然后在项目结束时，客户将拥有这个交互式文档。它就像他们网站组件的目录一样，每个组件都有最佳实践和使用案例的内联说明。当我们与客户在这些系统上合作时，他们会帮助我们把它们塑造成一个工具，可以用来招募新的内容创作者、设计师或开发人员。根据客户的需要，可以为编辑风格指南、社交媒体资产或印刷品的品牌指南增加一些章节。

技术考虑

Storybook的核心是一个React应用程序，但它与任何前端兼容。如果一个项目将生活在React或Vue中，那么应用程序的组件可以使用，没有重复。故事 "文件将为你现有的组件添加一些背景和模拟数据。 在这个 "基本的Django "实验中，我使用了Storybook的HTML启动器，并在nunjucks加载器中添加了管道。Nunjucks模板的感觉与Django或Jinja模板非常相似，这使得向后端团队移交工作变得容易。然而，有足够多的细微差别，我不建议尝试将它们一起使用。下面是一些关于你可能遇到的问题的细节。

评语

每个工具都有它的优点和权衡。Storybook的设置和维护当然比静态网站复杂，但它的优点和内置的交互性增加了足够多的价值，使它成为新项目的重要组成部分。