storybook-addon-package-json

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