@feux/storybook-addon-bit

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

Demo

Follow this link to a Storybook using the addon. Activate the 'Bit Versions' tab: https://stsjdesigndevsalesweu.z6.web.core.windows.net/next/index.html?path=/changelog/components-accordion--default-accordion

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/[org].[scope]

Server Api requirements

To be able to display data from https://node.bit.dev you need a server to proxy api calls. For this addon the following routes need to be configured:

• https://[your.domain]/component/{component-id}
• https://[your.domain]/tarball/{component-id}/{version}

The addon requires these routes to return data regarding a specific component that you have hosted on bit.cloud.

The component route must return json data modelled the same way as https://node.bit.dev/[org].[scope].{component-id}

The tarball route must return the Gunzipped contents of a components tarball: https://node.bit.dev/@bit/[org].[scope].{component-id}/-/@bit-[org].[scope].{component-id}-{version}.tgz

This addon requires the .tgz to be unzipped on the server and the contens to be returned from the tarball route. Here's an example of how that woul look: https://sjdesignsystembff.azurewebsites.net/tarball/ui.accordion/2.0.1

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',
    },
    ...
  },
  ...
};