New
Component Story Format 3 is hereAutomate with Chromatic
Storybook Day 2023
Star76,398
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Addon Bit
Integrate component versions info from Bit
npm install @feux/storybook-addon-bit
Last updated 15 days ago
125
Downloads per week
Readme View on GitHub

Storybook Bit Addon

What it does

For projects utilizing both Storybook and Bit, this addon brings Bit component data into Storybook. Using this addon will integrate the following information regarding a component, into Storybook:

  • Available version tags
  • Installation strings
  • Source code
  • Dependencies

Limitations

  • Change logs for components are not included since they are not available in the response provided by the api (https://node.bit.dev)
  • This addon will not render different component versions in Storybook.

Prerequisits

  • @storybook/react project
  • Components hosted with Bit (typically a scope on bit.cloud)
  • A server to proxy api-calls towards https://node.bit.dev/ .

How to implement this addon

Register the addon in .storybook/main.js:

module.exports = {
  ...
  "addons": [
    ...
    "@feux/storybook-addon-bit"
  ],
  ...
}

In your .storybook/preview.js, add a parameters variable if one does not exist already and add a bit paremeter to it, to be able to retrieve Bit component data via your server:

export const parameters = {
  ...
  bit: {
    apiUrl: "https://path.to.your.server/",
  }
  ...
}

Then in your stories add an object named parameters (if one does not exist already) to the storys' metadata object (the storys' default export) then add bit to parameters:

export default {
  ...
  parameters: {
    ...
    bit: {
      componentId: 'ui/button',
    },
    ...
  },
  ...
};
Join the community
5,883 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI