0.0.3 • Published 5 months ago
@opencodegraph/provider-storybook v0.0.3
Storybook context provider for OpenCodeGraph
This is a context provider for OpenCodeGraph 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 OpenCodeGraph playground for live examples.
Usage
Add the following to your settings in any OpenCodeGraph client:
"opencodegraph.providers": {
// ...other providers...
"https://opencodegraph.org/npm/@opencodegraph/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 OpenCodeGraph playground.
Configuration
/** Settings for the Storybook OpenCodeGraph 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