DSM Storybook Integration

If you run into an error “ChunkLoadError: Loading Chunk X Failed” on Storybook 6.2+, the below workaround may solve it. Storybook 6.2+ has added new optimizations to its bundling process. Because of how DSM handles uploaded and hosted assets, the...

Storybook is an open-source tool for developing user interface (UI) components. By integrating DSM with Storybook, you can create Live Components . Currently, there are two options for integrating Storybook with DSM: Self-hosted (via an embed...

The DSM Storybook integration is available exclusively for DSM Enterprise. Integrating Storybook with DSM Live Components is as simple as pasting in your hosted Storybook URL. To embed Storybook in a live component: Sign in to the DSM web...

Currently, there are two options for integrating Storybook with DSM: Self-hosted (via an embedded URL ) DSM-hosted (via a CLI-based integration ) When using an embedded URL, there are no limitations. Anything supported in Storybook will appea...

After adding a DSM configuration file to your Storybook component library project, you'll need to add DSM as a Storybook addon. This article walks through how to do so using Storybook's declarative configuration. Storybook introduced declarativ...

After adding a DSM configuration file to your Storybook component library project, you'll need to add DSM as a Storybook addon. This article walks through how to do so using Storybook's non-declarative configuration. Storybook introduced declar...

Yes, The DSM Storybook integration (version 0.0.127 and newer) supports Storybook stories written in TypeScript. To learn more about integrating DSM and Storybook, check out this guide: What Are Live Components? Note: There is a known issue wh...

When troubleshooting issues with InVision's DSM Storybook integration, our support agents will sometimes need to know which version of Node.js you're using.  To check your version of Node.js, open Terminal (or another CLI of your choice), and type ...

The Live Components feature is currently limited to Enterprise users on a DSM Enterprise plan.  Learn more about DSM Enterprise.  When you publish Storybook stories to DSM as live components, most of the official Storybook addons that are co...

The Live Components feature, made possible by an integration between Storybook and DSM, is currently limited to Enterprise users on a DSM Enterprise plan.  Learn more about DSM Enterprise.  Currently, the addParameters function in Storybook ...

The CLI-based DSM Storybook integration supports native Web Components using the browser default APIs. The integration does not support packages or wrappers that use their own API to build Web Components to a bundle (for example, Stencil and Po...

To access Storybook, Design System Manager (DSM) generates a unique authentication token, which is displayed one time for the user once). This authentication token and the dsmHost, organization, outputDir, storyPath, proxyUrl, and proxyPort detail...

For each live component you integrate (per page, per framework), DSM generates a unique ID that's mapped to the applicable component within Storybook.

This article discusses the Live Components feature, which is currently limited to Enterprise users on a DSM Enterprise plan.  Learn more about DSM Enterprise.  If using Live Components in Design System Manager (DSM), you can connect multipl...

This article discusses the Live Components feature, which is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise. When working with the Live Components feature in Design System Manager (DSM), it is cu...

The Live Components feature is currently limited to Enterprise users on a DSM Enterprise plan.  Learn more about DSM Enterprise. When viewing live components in the DSM web view, you can quickly identify a component’s version by including a ve...

When running the DSM publish command , npm run dsm-storybook:publish , the CLI builds your Storybook project and creates the production Storybook bundle. The bundle is then uploaded and hosted in the DSM cloud. From here, all live component IDs t...

When running the DSM preview command , npm run dsm-storybook:preview , a local instance of Storybook is started, using a source-code add-on to preview stories and sample component code snippets. This command lets you see the documentation stories...

This article references setting up Live Components in DSM. The Live Components feature is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise.  When creating live components and attempting to publish ...

If you're using TypeScript to build Storybook stories that are then synced to DSM, you may encounter an issue where the Properties table won't display.  If this occurs, first check the syntax of your forwardRef React components. For DSM to correc...

The Live Components feature is currently limited to Enterprise users on a DSM Enterprise plan. Learn more about DSM Enterprise. When creating live components with the DSM Storybook integration, it's possible to include static assets such as fon...

When running the DSM publish command , npm run dsm-storybook:publish , the CLI builds your Storybook project and creates the production Storybook bundle. The bundle is then uploaded and hosted in the DSM cloud. DSM Cloud assets are hosted on InVi...

Storybook uses webpack to build javascript bundles. Like bundles from any website that relies on webpack, Storybook bundles contain everything that's required to render the website. If you have code that is sensitive, you need to keep it on the se...

In the Storybook webpack build, all resources (javascript, CSS, images, etc.) are relative to the root of the website: / Rather than hosting the uploaded storybook in a classic webserver, the DSM Storybook integration uploads bundle files to the ...

When creating javascript bundles, Storybook includes all resources within the Storybook instance; however, DSM only displays components that are mapped by their unique IDs to pages within DSM. If you have components that should not be displayed in D...

No, it's not possible to publish changes from DSM to  Storybook. There are no post, pull, or write commands back to the self-hosted Storybook instance. The npm run dsm-storybook:publish command writes from Storybook to DSM. 

To generate dynamic code samples and auto-generated properties, DSM needs to be aware of the code in its entirety. To meet that need, we create a bundle of the self-hosted Storybook instance and upload it to DSM. Having the self-hosted Storybook in...

When trying to publish a Storybook story to DSM, you may encounter the following error: No suitable component definition found. This error can often be caused by limitations with the library react-docgen . We use this library to turn React code...

In version 5.3, Storybook introduced declarative configuration , which is fully supported by the DSM Storybook integration. You can also use the integration with the non-declarative configuration from Storybook 5.2 and earlier. Note that you won't...