storybook-addon-package-json
package.json addon for storybook
npm install storybook-addon-package-json
698
Downloads per week

Storybook package.json Addon

npm version

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

package.json demo

package.json demo

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")
          }
        ]
      }
    ]
  }
};