@fluentui/react-storybook-addon-export-to-sandbox
React Storybook Addon Export To Sandbox for Fluent UI React
This Storybook addon enables exporting stories to CodeSandbox or StackBlitz directly from the Storybook Docs mode. It is designed to facilitate the creation of live, editable examples of your FluentUI components.
Features
- Export stories to CodeSandbox/StackBlitz
- Supports both Create React App (CRA) and Vite bundlers
Installation
To install the addon, run:
yarn add @fluentui/react-storybook-addon-export-to-sandbox
Usage
Add the addon to your Storybook configuration:
// .storybook/main.js
module.exports = {
addons: ['@fluentui/react-storybook-addon-export-to-sandbox'],
};
Configuration
The addon can be configured via the exportToSandbox parameter in your story's parameters:
export const MyStory = () => <MyComponent />;
MyStory.parameters = {
exportToSandbox: {
provider: 'codesandbox-cloud', // or 'codesandbox-browser' or 'stackblitz-cloud'
bundler: 'cra', // or 'vite'
requiredDependencies: {
react: 'latest',
'react-dom': 'latest',
},
optionalDependencies: {
'@fluentui/react-components': 'latest',
},
},
};
Example
Here is an example of how to use the addon in a story:
import React from 'react';
import { Text } from '@fluentui/react-components';
export const Default = () => <Text>This is an example of the Text component's usage.</Text>;
Default.parameters = {
exportToSandbox: {
provider: 'stackblitz-cloud',
bundler: 'vite',
requiredDependencies: {
react: 'latest',
'react-dom': 'latest',
},
},
};
Note
This package is designed for internal usage only and may not be suitable for general use.
License
MIT
