storybook-addon-live-examples
v2.0.3TypeScript
Storybook live examples plugin
1.5K/weekUpdated 1 years agoMITUnpacked: 127.4 KB
Published by reme3d2y
npm install storybook-addon-live-examplesā” Storybook Addon Live Examples ā”
Code playground with live editing inside your storybook
- š§āš» Play with code without 3rd-party service services like codepen
- š„ Share examples with others
- š Share links to bug reproductions with others
- š§± Check how the components work together
- 
Typescript supported
Getting started
$3
``bash`
yarn add -D storybook-addon-live-examplesnpm install --save-dev storybook-addon-live-examples
$3
`js`
module.exports = {
addons: ['storybook-addon-live-examples'],
};
$3
`js
import { addons } from '@storybook/addons';
import { LIVE_EXAMPLES_ADDON_ID } from 'storybook-addon-live-examples';
import theme from 'prism-react-renderer/themes/github';
import AllComponents from '../packages';
addons.setConfig({
[LIVE_EXAMPLES_ADDON_ID]: {
// custom theme from prism-react-renderer (optional)
editorTheme: theme,
// internationalization (optional)
copyText: ['Copy', 'Copied'],
expandText: ['Show code', 'Hide code'],
shareText: ['Share', 'Shared'],
// scope (globally accessible components & functions) (optional)
scope: {
...AllComponents,
someFunction: () => 42
},
},
});
`
$3
`js
const { patchWebpackConfig } = require('storybook-addon-live-examples/dist/cjs/utils');
module.exports = {
webpackFinal: (config) => {
patchWebpackConfig(config);
return config;
}
};
`
Usage
$3
Live examples will be rendered instead of the default addon-docs canvas.
Your can customize examples by parameters:
`tsx
export default {
title: 'Components/Button',
parameters: {
scope: {
scopeValue,
},
}
};
const scopeValue = 42;
export const Primary = () => ;
Primary.parameters = {
expanded: true
};
export const Secondary = () => ;
`
NOTE:
Most likely you will get errors after addon installing. Don't panic, just pass all variables that are used in your story to scope
$3
Inside MDX-based stories you can write your code examples with plain markdown.
Just put your code inside triple quotes
`markdown`
|tsx live`
|Wow, so simple
|
Or render custom Canvas
`tsx
// Import custom Canvas from addon
import { Canvas } from 'storybook-addon-live-examples';
`
Or use Example directly
`tsx
import { Example } from 'storybook-addon-live-examples';
Wow, so simple
} />`
$3
`tsx
// Button.stories.js
import mdx from './Button.mdx';
export default {
title: 'Components/Button',
parameters: {
docs: {
page: mdx,
},
},
};
const scopeValue = 42;
export const Primary = () => ;
Primary.parameters = {
scope: {
scopeValue,
},
};
`
`tsx
// Button.mdx
import { ArgsTable, Story } from '@storybook/addon-docs';
import { Button } from './Button';
Button
`
Example props
You can customize the display of examples with props or metastring
$3
`markdown`
|tsx live`
|This example can be edited
|
`tsx live`
This example can be edited
$3
`markdown`
|tsx live expanded`
|This example will be rendered with expanded code sources
|
`tsx live expanded`
This example will be rendered with expanded code sources
Complex examples
`tsx live expanded`
render(() => {
const [counter, setCounter] = React.useState(0);
return (
<>
Super live counter: {counter}
);
});
Scope
Storybook-addon-live-examples uses react-live under the hood.
Scope allows you to pass some globals to your code examples.
By default it injects React only, which means that you can use it in code like this:
`tsx`
render(() => {
// āāāāā
const [counter, setCounter] = React.useState(0);
return counter;
}
#### - Pass your own components to scope by props
`tsx
import { Canvas } from 'storybook-addon-live-examples';
import MyComponent from '../packages/my-component';
`
#### - Setup scope globally
This is the easiest way to setup scope once for an entire project
`tsx
//.storybook/manager.js
import { addons } from '@storybook/addons';
import { LIVE_EXAMPLES_ADDON_ID } from 'storybook-addon-live-examples';
addons.setConfig({
[LIVE_EXAMPLES_ADDON_ID]: {
scope: {
MyComponent,
},
},
});
`
`tsx`
#### - Setup scope inside monorepo
This is an example of how you can add all used components and helpers to the scope.
`tsx
// .storybook/scope.ts
import { ComponentType } from 'react';
import * as icons from 'some-icons-pack';
import * as knobs from '@storybook/addon-knobs';
// packages/{componentName}/index.ts
const req = require.context('../packages', true, /^\.\/(.*)\/index.ts$/);
const components = req.keys().reduce((acc: Record
Object.entries(req(key)).forEach(([componentName, component]: [string, any]) => {
acc[componentName] = component;
});
return acc;
}, {});
export default {
...components,
...icons,
...knobs,
};
// .storybook/manager.js
import scope from './scope';
addons.setConfig({
[LIVE_EXAMPLES_ADDON_ID]: {
scope,
},
});
``