@openctx/provider-storybook NPM

Storybook context provider for OpenCtx

This is a context provider for OpenCtx that annotates your React components and *.story.ts?(x) files with screenshots and links to your Storybook component library. It works well with storybooks hosted on Chromatic.

Screenshot

Screenshot of OpenCtx annotations for Storybook in a code file

Hover over a UI component in code to see what it looks like

Visit the OpenCtx playground for live examples.

Usage

Add the following to your settings in any OpenCtx client:

"openctx.providers": {
    // ...other providers...
    "https://openctx.org/npm/@openctx/provider-storybook": {
        "storybookUrl": "<URL to the Storybook for your application>"
    }
},

Tips:

If you're using VS Code, you can put the snippet above in .vscode/settings.json in each repository if you have different storybooks per-repository.
To use this with storybooks hosted on Chromatic, see below in the "Configuration" section.
Play around with the Storybook provider in realtime on the OpenCtx playground.

Configuration

/** Settings for the Storybook OpenCtx provider. */
interface Settings {
  /**
   * The URL to a published Storybook for your project.
   *
   * If you're using Chromatic, this is of the form `https://<branch>--<appid>.chromatic.com`; see
   * https://www.chromatic.com/docs/permalinks/#get-permalinks-to-your-project for how to obtain
   * this value.
   *
   * If the URL contains `<branch>`, it will always be replaced with `main`.
   *
   * TODO(sqs): Support non-main branches.
   */
  storybookUrl: string
}