Storybook 设计令牌附加组件

Storybook 设计令牌附加组件允许您从样式表生成设计令牌文档。在此处阅读有关此附加组件动机的更多信息：https://dev.to/psqrrl/managing-design-tokens-using-storybook-5975

演示

内容

• Storybook 设计令牌附加组件
  • 一些功能
  • 安装
  • 用法
  • 演示者
  • 路线图

一些功能

• 从您的带注释样式表和图标文件中自动生成设计令牌描述
• 解析 CSS、SCSS/SASS 和 SVG 文件
• 提供各种演示者来渲染您的设计令牌示例
• 自动检测 CSS 或 Sass 变量的别名
• 显示与令牌值匹配的属性值，以便您可以轻松识别样式表中的硬编码值

安装

首先，使用您选择的包管理器安装包。

npm install --save-dev storybook-design-token

或

yarn add --dev storybook-design-token

然后在您的 .storybook 目录中创建一个名为 addons.js 的文件，并导入插件

// addon.js
import 'storybook-design-token/register';

在您的 .storybook 目录中的 config.js 中：告诉插件要解析哪些文件。重要：在进行 configure 调用之前调用 addParameters。

// config.js
import { configure, addParameters } from '@storybook/react';

// [...]

const cssReq = require.context('!!raw-loader!../src', true, /.\.css$/);
const cssTokenFiles = cssReq.keys().map(filename => ({ filename, content: cssReq(filename).default }));

const scssReq = require.context('!!raw-loader!../src', true, /.\.scss$/);
const scssTokenFiles = scssReq.keys().map(filename => ({ filename, content: scssReq(filename).default }));

const svgIconsReq = require.context('!!raw-loader!../src', true, /.\.svg$/);
const svgIconTokenFiles = svgIconsReq.keys().map(filename => ({ filename, content: svgIconsReq(filename).default }));

addParameters({
  designToken: {
    files: { 
      css: cssTokenFiles,
      scss: scssTokenFiles,
      svgIcons: svgIconTokenFiles
    }
  }
});

// [...]

configure(loadStories, module);

确保在 !!raw-loader! 之后指定正确的路径。该路径必须相对于您的配置文件位置。

用法

插件尝试将您的令牌组织成令牌组。您可以通过在样式表中添加特定的注释块来注释令牌组。只有带注释的令牌才会被插件列出。指定的演示者用于渲染您的令牌示例。有关更多信息，请参见 演示者。

CSS 示例

/**
 * @tokens Colors
 * @presenter Color
 */

:root {
  --n0: #fff; /* Token Description */
  --n100: #fbfbfb;
  --n200: #edeeef;
  --n300: #e4e5e7;
  --primary: var(--n300);
}

/**
 * @tokens Border Radius
 * @presenter BorderRadius
 */

:root {
  --border-radius-m: 4px;
  --border-radius-l: 8px;
}

SCSS 示例

/**
 * @tokens Colors
 * @presenter Color
 */

$n0: #fff; /* Token Description */
$n100: #fbfbfb;
$n200: #edeeef;
$n300: #e4e5e7;
$primary: $n300;

/**
 * @tokens Border Radius
 * @presenter BorderRadius
 */

$border-radius-m: 4px;
$border-radius-l: 8px;

SVG 示例

<?xml version="1.0" encoding="UTF-8"?>
<svg data-token-name="check" width="24px" height="24px" viewBox="0 0 24 24" version="1.1" 
  xmlns="http://www.w3.org/2000/svg" 
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <path d="M9.35221912,16.3536125 L19.5004166,5.34255149 C19.9029667,4.90884428 20.5808871,4.88358644 21.0145944,5.28613652 C21.4483016,5.6886866 21.4735594,6.36660707 21.0710093,6.80031428 L10.1375155,18.6574532 C9.71359736,19.1141823 8.99084087,19.1141823 8.56692275,18.6574532 L3.28613652,12.890538 C2.88358644,12.4568308 2.90884428,11.7789103 3.34255149,11.3763602 C3.77625869,10.9738101 4.45417917,10.999068 4.85672925,11.4327752 L9.35221912,16.3536125 Z" fill="currentColor"></path>
</svg>

确保指定 data-token-name 属性。

演示者

演示者用于渲染您的设计令牌示例。以下演示者可用

• 动画
• 圆角
• 边框
• 颜色
• 缓动
• 字体系列
• 字体大小
• 字体粗细
• 行高
• 不透明度
• 阴影
• 间距
• Svg

路线图

• 自定义演示者
• 自定义解析器