Storybook JSON Schema 附加组件

使用丰富的 JSON Schema Explorer 接口显示关联的 JSON Schema 文档，并添加一个具有语义自动完成功能的验证 JSON 代码编辑器，用于与您的组件进行交互，并轻松复制配置。

JSON Schema Explorer 基于出色的 Atlassian JSON Schema Viewer。它经过了细微的修改，可以生成可以导入以进行部分使用的捆绑包，例如此附加组件所做的。

JSON 代码编辑器 基于 @monaco-editor/react。编辑器连接到您的故事状态/参数，因此通过 Controls 更改属性会反映在显示的代码中。反之亦然，如果您编辑 JSON，并且结果根据模式有效，您的更改后的参数也会应用于故事。

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

目录

• Storybook JSON Schema 附加组件
  • 用途
  • 入门
  • 高级配置
  • 作者

用途

您可以使用此附加组件的三个目的

1. 在 JSON Schema Explorer 中以清晰的组织方式浏览关联的 JSON Schema 文档。
2. 通过 Controls 配置组件，将生成的 JSON 复制为 API 使用/数据生成目的的起点或模板，并在 JSON 代码编辑器 中使用。
3. 粘贴 JSON 以验证数据或预览 JSON 代码编辑器 中的组件状态。

入门

先决条件：您的组件需要有与之关联的 JSON Schema 文件。此外，模式需要已经解除引用，因为 $ref-resolution 尚未（经过测试）成为此附加组件的一部分（尚未？... 如果您需要，请在问题中告知我们）。

第一步是安装附加组件

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

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

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

第三步，将模式导出为 组件或故事参数

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",
          },
        },
      },
    },
  },
};

高级配置

此附加组件仍处于早期阶段，高级配置选项将在稍后发布。如果您对任何特定内容不清楚或无法正常工作，请随时在问题中告知我们！

作者

此附加组件由 kickstartDS - 前端优先框架 背后的团队使用 🍋 制作！

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

我们使 Web 开发团队能够以极高的效率创建一致且符合品牌要求的 Web 前端。具有内置的设计系统，可满足您所有数字触点的需求。像挤柠檬一样容易。

我们使用此附加组件使我们的设计系统解决方案的用户能够通过我们的核心 JSON Schema 属性层与他们的组件进行交互。查看我们的 目标网页 以了解更多信息！👋