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
}

Development