Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


Connecting a Storybook Story to a Component Container

The Live Components feature is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise.

After you have created a component container in DSM, it's time to connect the component to your Storybook story.

Obtaining the component container ID

To connect a Storybook story to its component container, you'll need to add the DSM component container ID in the third parameter of the options object of the story.

To find the component container ID:

  1. Open your library in the DSM web view and navigate to your component.
  2. Click the appropriate code tab (React, Vue, Angular, or HTML).
    If you didn't add a code tab while creating a component container, you can do so by clicking Add Code and selecting the appropriate framework.
  3. Scroll to the Integration details section and copy the component ID.
copy-component-id.gif

Adding IDs to different frameworks

In the following section, click the tab associated with your chosen framework, and use the example code snippet to add the DSM component container ID to the story.

You can see examples of DSM-connected stories in the example component library project. You’ll notice in the example stories that we have added an optional version number. This specifies per-component versioning rather than per-library versioning. To learn more, check out this article: Versioning DSM Live Components

If you're following along in the example project, you can insert the ID for your specific component container.

React

For React stories, add the following code and insert your DSM component container ID:

import React from 'react';
import { storiesOf } from '@storybook/react';
import { Button } from './Button.jsx';

storiesOf('Button', module)
.add(
'with emoji',
() => (
<Button>πŸ˜€ 😎 πŸ‘ πŸ’―</Button>
),
{
'in-dsm': {
id: '<DSM component container ID>'
}
}
);

Adding in-dsm properties

This table shows all required and optional in-dsm properties for React.

Property Description Optional/Required
id This is the component container ID used to connect the story to DSM Required
version With version you can specify the version of a component, overriding the library version. If version is not provided, the version from the nearest package.json file is used. Optional
versionFilePath You can provide a path to a JSON file with a field version and extract the version of the component. Optional
component This allows you to set the main component of the story explicitly. This is useful in case the component is not the root-level component of the story. Optional
componentPath This is the path to the component file. It overrides the built-in component file resolution. The component file is used to generate properties and descriptions to show in DSM. Optional

Vue

For Vue stories, add the following code and insert your DSM component container ID:

import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import MyButton from './Button.vue';

storiesOf('Button', module)
.add(
'with emoji',
() => ({
components: { MyButton },
template: '<my-button>πŸ˜€ 😎 πŸ‘ πŸ’―</my-button>'
}),
{
'in-dsm': {
id: β€˜<DSM component container ID>’,
componentPath: './Button.vue'
}
}
);

Adding in-dsm properties

This table shows all required and optional in-dsm properties available for Vue.

Property Description Optional/Required
id This is the component container ID used to connect the story to DSM Required
version With version you can specify the version of a component, overriding the library version. If version is not provided, the version from the nearest package.json file is used. Optional
versionFilePath You can provide a path to a JSON file with a field version and extract the version of the component. Optional
component This allows you to set the main component of the story explicitly. This is useful in case the component is not the root-level component of the story. Optional
componentPath This is the path to the component file. It overrides the built-in component file resolution. The component file is used to generate properties and descriptions to show in DSM. Required

Angular

For Angular stories, add the following code and insert your DSM component container ID:

import { storiesOf } from '@storybook/angular';
import { ButtonComponent } from '../app/button.component';

storiesOf('Button', module)
.add(
'with emoji',
() => ({
component: ButtonComponent,
template: '<storybook-button-component [text]="buttonText"></storybook-button-component>',
props: {
buttonText: 'πŸ˜€ 😎 πŸ‘ πŸ’―'
}
}),
{
'in-dsm': {
id: '<DSM component container ID>',
componentPath: '../app/button.component'
}
}
);

Adding in-dsm properties

This table shows all required and optional in-dsm properties available for Angular.

Property Description Optional/Required
id This is the component container ID used to connect the story to DSM Required
version With version you can specify the version of a component, overriding the library version. If version is not provided, the version from the nearest package.json file is used. Optional
versionFilePath You can provide a path to a JSON file with a field version and extract the version of the component. Optional
component This allows you to set the main component of the story explicitly. This is useful in case the component is not the root-level component of the story. Required*
componentPath This is the path to the component file. It overrides the built-in component file resolution. The component file is used to generate properties and descriptions to show in DSM. Required

*For Angular, the component property is only optional if the story has a single root element. Otherwise, it is required.

HTML

For HTML stories, add the following code and insert your DSM component container ID:

import { storiesOf } from '@storybook/html';

storiesOf('Button', module)
.add(
'with text',
() => '<button class="dsm-btn">πŸ˜€ 😎 πŸ‘ πŸ’―</button>', {
'in-dsm': {
id: '<DSM component container ID>',
docFilePath: '../components/button.docs.json'
}
}
);

DSM enables adding a properties table to HTML stories. DSM will generate the table based on the properties information provided in a JSON file through the docFilePath property. For details, refer to the JSON file in the DSM example library on GitHub.

Adding in-dsm properties

This table shows all required and optional in-dsm properties available for HTML.

Property Description Optional/Required
id This is the component container ID used to connect the story to DSM Required
version With version you can specify the version of a component, overriding the library version. If version is not provided, the version from the nearest package.json file is used. Optional
versionFilePath You can provide a path to a JSON file with a field version and extract the version of the component. Optional
docFilePath This is the path to a JSON file with metadata properties and descriptions about the component you want to show in DSM. Optional
containerClass The class on the container wraps the code you want to use as sample code in DSM. Optional

Additional notes

Here are a few things to note when connecting Storybook to a DSM component:

  • Any Storybook addons that are configured for your connected stories will also appear in DSM. This is helpful if you want to use features like Knobs in DSM. For a list of available addons, check out the Storybook Addon Gallery.
  • If you’d like to showcase different examples per component, you can connect multiple stories to the same component container.
  • With the release of Storybook v5.2, Storybook introduced Component Story Format (CSF). DSM fully supports this feature. For more information, check out the official CSF documentation.

After connecting your Storybook story to a DSM component container, it's finally time to publish your Storybook story to DSM.


Learn something new

Getting Started Guides