New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,441
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-package-json
package.json addon for storybook
npm install storybook-addon-package-json
Last updated over 3 years ago
543
Downloads per week
Readme View on GitHub

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")
          }
        ]
      }
    ]
  }
};
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI