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
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
- Source code
- Docs
- License: Apache 2.0