温德

WayFinder是一个基于TypeScript的应用程序,帮助您浏览您的JSON数据. 它提供了一个方便用户的界面,用于导航/查询你的JSON数据并构建JSONPath表达式.

使用 WayFinder 软件

1. 把你的渴望的JSON放入左手边.
2. 要构建 JSONPath,只需点击 JSON 数据内的任何密钥即可. 这将自动添加到 JSONPath 中.
3. 如果您打算瞄准数组中的某个项目,请选择项目属性中的一个值来插入过滤表达式.
4. 为了验证您的 JSONPath 的正确性, 请按“ 测试” 按钮 。 有效的JSONPaths将会在正确的面板上展示他们的成果.

也可以直接在 JSONPath 中手动调整或添加过滤表达式.

开始

1. 安装软件包 :

yarn add @apideck/wayfinder

2. 更新您的尾风. config.js文件,并在内容阵列中添加以下路径 :

// tailwind.config.js

module.exports = {
  content: [
    // ...
    './node_modules/@apideck/wayfinder/**/*.js'
  ]
  // ...
}

3. 导入 WayFinder 组件并在您的应用程序中使用 :

import { Button, useModal } from '@apideck/components'
import { WayFinder } from '@apideck/wayfinder'

const exampleResponse = JSON.stringify(
  {
    id: 'file',
    value: 'File',
    popup: {
      menuitem: [
        { id: 1, name: 'New' },
        { id: 2, name: 'Open' },
        { id: 3, name: 'Close' }
      ]
    }
  },
  null,
  2
)

const modalOptions = {
  className: '!max-w-5xl !p-0',
  onClose: () => console.log('Closing modal..')
}

const MyComponent = () => {
  const { addModal, removeModal } = useModal()

  return (
    <Button
      text="Open WayFinder"
      onClick={() => {
        addModal(
          <WayFinder
            onSelect={(jsonPath) => {
              console.log(jsonPath)
              removeModal()
            }}
            onClose={removeModal}
            defaultInput={exampleResponse}
          />,
          modalOptions
        )
      }}
    />
  )
}

export default MyComponent

本地运行

要在本地运行 WayFinder 应用程序, 您需要安装在您的机器上 。 如有这些先决条件,请遵循以下步骤:

1. 把仓库切入本地机器.

2. 导航到项目目录并通过运行安装依赖性 :

yarn install

故事书

该项目包括用于孤立地开发和测试UI组件的"故事书". 要运行故事本,请使用以下命令:

yarn storybook

这将启动本地服务器上的故事本, 通常 http://localhost:6006 并打开带有 Storybook UI 的浏览器窗口。 然后可以导航到您想要测试的组件,并与它隔离地互动.

项目建设

建设生产项目,使用下列指令: 1

yarn build

这将创建一个 dist 项目根目录中的已编译资产已准备部署.

线性

该项目使用ESLint来进行倒接. 要运行插件,请使用以下命令:

yarn lint

这将运行工程上的ESLint,并报告任何林入出错.

记住在为项目作出贡献时始终遵循代码库提供的最佳做法和准则.