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/[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": [
...
"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',
},
...
},
...
};
``