Storybook JSON Schema 插件

使用丰富的 JSON Schema Explorer 界面显示关联的 JSON Schema 文档，并添加了一个具有语义自动补全功能的验证 JSON 代码编辑器，以便轻松地与组件交互并复制配置。

JSON Schema Explorer 基于出色的 Atlassian JSON Schema Viewer。它经过了稍微修改，以便生成可用于部分导入的 bundle，就像此插件所做的那样。

JSON Code Editor 基于 @monaco-editor/react。编辑器连接到您的故事状态 / 参数（args），因此通过 Controls 更改 props 会反映在显示的代码中。反之亦然，如果您编辑 JSON，并且结果根据 schema 是有效的，那么您更改的参数（args）也会应用于故事。

查看工作演示（点击 JSON Schema 插件选项卡）

目录

• Storybook JSON Schema 插件
  • 作用
  • 入门
  • 高级配置
  • 作者

作用

此插件的三个用途

1. 在 JSON Schema Explorer 中以整洁有序的方式浏览关联的 JSON Schema 文档
2. 通过 Controls 配置组件，在 JSON Code Editor 中复制生成的 JSON 作为 API 使用 / 数据生成目的的起点或模板
3. 在 JSON Code Editor 中粘贴 JSON 以验证数据或预览组件状态

入门

前提条件：您的组件需要关联 JSON Schema 文件。此外，schema 需要已经解引用（dereferenced），因为 $ref 解析不是此插件（目前？）的一部分（也未经测试... 如果您需要此功能，请在 issues 中告知我们）。

第一步是安装插件

$ yarn add --dev @kickstartds/storybook-addon-jsonschema

第二步，在您的 .storybook/main.js 中注册插件（只需将其添加到列表中）

module.exports = {
  addons: ["@kickstartds/storybook-addon-jsonschema"],
};

第三步，将 schema 作为 组件或故事参数 导出

export default {
  title: "Button",
  component: Button,
  parameters: {
    jsonschema: {
      schema: {
        $schema: "https://json-schema.fullstack.org.cn/draft-07/schema#",
        $id: "https://my-components/button.schema.json",
        type: "object",
        properties: {
          primary: {
            type: "boolean",
            default: false,
          },
          label: {
            type: "string",
          },
        },
      },
    },
  },
};

高级配置

此插件尚处于早期阶段，高级配置选项将在稍后添加。如果有什么不清楚或不起作用的地方，请随时在 issues 中告知我们！

作者

此插件由 kickstartDS - 前端优先框架 的团队倾情打造 🍋！

kickstartDS 是一个全面的组件和模式库

我们使 Web 开发团队能够超高效地创建一致且符合品牌规范的 Web 前端。它内置了一个设计系统，可服务于您的所有数字接触点。就像挤柠檬一样轻松。

我们使用此插件，让我们的设计系统解决方案用户通过我们的核心 JSON Schema 属性层与他们的组件交互。查看我们的 着陆页 了解更多！👋