npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kickstartds/storybook-addon-jsonschema

v4.0.0

Published

Show JSON Schema files associated with components, integrated with Story Controls

Downloads

784

Readme

Storybook JSON Schema Addon

Displays associated JSON Schema documentation using a rich JSON Schema Explorer interface, and adds a validating JSON Code Editor with semantic auto-complete to interact with your components, and copy configurations with ease.

JSON Schema Explorer is based on the excellent Atlassian JSON Schema Viewer. It was slightly modified to generate bundles that can be imported for partial use, like this addon does.

JSON Code Editor is based on @monaco-editor/react. The editor is connected to your story state / args, so changing props through Controls is reflected in the code shown. Vice-versa if you edit the JSON, and the result is valid according to the schema, your changed args are applied to the story, too.

Show me a working demo (click on the JSON Schema addon tab)

Teaser image

Table of contents:

What it's for

Three things you can use this addon for:

  1. Explore associated JSON Schema documentation, in a nicely organized fashion in the JSON Schema Explorer
  2. Configure components through Controls, copy the resulting JSON as a starting point or template for API-usage / data generation purposes in the JSON Code Editor
  3. Paste JSON to validate data or preview component state in the JSON Code Editor

Getting started

Prerequesite: Your components need to have JSON Schema files associated with them. Additionally schemas need to be dereferenced already, as $ref-resolution is not (a tested) part of this addon (yet? ... let us know in the issues if you need this).

First step is to install the addon:

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

Second step, register the addon inside your .storybook/main.js (just add it to the list):

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

Third step, export the schema as component- or story parameter:

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

Advanced configuration

This addon is still early, advanced configuration options will be added at a later date. Feel free to let us know in the issues if something specific is unclear, or doesn't work!

Authors

This addon was made with 🍋 by the team behind kickstartDS - the frontend first framework!

kickstartDS is a comprehensive component and pattern library

We enable web development teams to create consistent and brand compliant web frontends super efficiently. With a built-in Design System to serve all your digital touch points. Easy like squeeeeezing a lemon.

We use the addon to let users of our Design System solution interact with their components through our core JSON Schema property-layer. View our landing page to learn more! 👋

cTeaser image