storybook-addon-package-json
v2.0.0
Published
package.json addon for storybook
Downloads
7,889
Maintainers
Readme
Storybook package.json Addon
Display the closest package.json
file to the story. Mainly useful when you use storybook with lerna.
Let's consider this example
.
├── .storybook
├── lerna.json
├── package.json
└── packages
├── alpha
│ ├── index.js
│ ├── alpha.stories.js
│ └── package.json
├── beta
│ ├── index.js
│ ├── beta.stories.js
│ └── package.json
└── usage
├── index.js
├── usage.stories.js
└── package.json
With this storybook-addon-package-json
stories will have a tab containing their package.json
Installation and usage
First, install the addon
npm install -D storybook-addon-package-json
Add this line to your addons.js
file
import "storybook-addon-package-json/register";
a) as a webpack loader
Use this hook to a custom webpack.config. This will generate a decorator call in every story and automatically search for package.json
:
module.exports = {
module: {
rules: [
{
test: /\.stories\.jsx?$/,
use: [
{
loader: require.resolve("storybook-addon-package-json/loader")
}
]
}
]
}
};
b) as a decorator in story
It is possible to inject custom package.json
to story without configuring storybook-addon-package-json/loader
:
import React from "react";
import { storiesOf } from "@storybook/react";
import withPackageJson from "storybook-addon-package-json";
import packageJson from "./package.json";
const stories = storiesOf("Example", module).addDecorator(
withPackageJson(packageJson)
);
stories.add("default", () => <div>story example</div>);
You can always use custom decorator and loader - when both are used package.json
from decorator will be used.
Usage with @storybook/addon-storysource
Since this package modifies original story source code, you should to use @storybook/addon-storysource/loader
before storybook-addon-package-json/loader
:
module.exports = {
module: {
rules: [
{
test: /\.stories\.jsx?$/,
use: [
{
loader: require.resolve("storybook-addon-package-json/loader")
},
{
loader: require.resolve("@storybook/addon-storysource/loader")
}
]
}
]
}
};