WayFinder is a TypeScript-based application that helps you navigate through your JSON data. It provides a user-friendly interface for navigating / querying your JSON data and building JSONPath expressions.
- Place your desired JSON in the left pane.
- To build a JSONPath, simply click on any key within the JSON data. This will automatically add it to the JSONPath.
- If you aim to target an item within an array, select a value one of the item's properties to insert a filter expression.
- To verify the correctness of your JSONPath, press the 'Test' button. Valid JSONPaths will have their results showcased in the right pane.
You can also manually adjust or add a filter expression directly in the JSONPath.
- Install the package:
yarn add @apideck/wayfinder
- Update your tailwind.config.js file and add the following path to your content array:
// tailwind.config.js
module.exports = {
content: [
// ...
'./node_modules/@apideck/wayfinder/**/*.js'
]
// ...
}
- Import the WayFinder component and use it in your application:
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
To run the WayFinder application locally, you need to have Node.js and Yarn installed on your machine. Once you have these prerequisites, follow the steps below:
-
Clone the repository to your local machine.
-
Navigate to the project directory and install the dependencies by running:
yarn install
This project includes Storybook for developing and testing UI components in isolation. To run Storybook, use the following command:
yarn storybook
This will start Storybook on a local server, typically http://localhost:6006
and open a browser window with the Storybook UI. You can then navigate to the component you want to test and interact with it in isolation.
To build the project for production, use the following command:
yarn build
This will create a dist
folder in the project root directory with the compiled assets ready for deployment.
The project uses ESLint for linting. To run the linter, use the following command:
yarn lint
This will run ESLint on the project and report any linting errors.
Remember to always follow the best practices and guidelines provided in the codebase when contributing to the project.