brandai-storybook
v1.0.2
Published
Brand.ai React Storybook addon
Downloads
29
Readme
Storybook Brand.ai viewer
The Brand.ai viewer displays UI Components from a Brand.ai Design Library in Storybook.
Getting Started
Install:
Storybook 2.x
npm install --save-dev brandai-storybook@"<1.0.0"
Storybook 3.x
npm install --save-dev brandai-storybook
Create a file called addons.js
in your storybook config (default: .storybook
) and add the following to addon.js
:
Storybook 2.x
import '@kadira/storybook/addons'
import register from 'brandai-storybook';
register({ dataUrl:'<brandai-data-export-url>' });
Storybook 3.x
import '@storybook/react/addons';
import register from 'brandai-storybook';
register({ dataUrl:'<brandai-data-export-url>' });
Connecting to Brand.ai
In order to obtain the url required to connect to brand.ai, you first need to navigate to Brand.ai and log in. Once you're logged in, select the design library that you want to connect to React Storybook and click the Tools and Integrations in the header.
From the tools and Integrations page select the Style Data Export application.
In the Style Data Export application click on JSON
in the left navigation menu and copy the Styles url
Connecting the Brand.ai components to the Storybook.
Note that you will need edit permissions to the design library to connect components.
To connect a component, the design library must be in edit mode
Click
UI Components
in the navigation menu and click on a component to see additional information.Copy the story URL from your storybook and paste it into the story URL field
You're done. Refresh your Storybook and you should see a Design Library tab in the Storybook panel.
In Brand.ai's view mode, you'll see a link from the component to the component in Storybook. This allows you to easily switch to the code view of the component directly from your design library.
Note that if you change the story kind or story name in Storybook, you'd need to enter the updated story URL in Brand.ai.
Mapping a single component to multiple stories
If you want the same Brand.ai component to be displayed for multiple stories of the same kind, you can paste a partial URL containing only the selectedKind
http://localhost:9001/?selectedKind=Button