GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-08 11:11:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

MIGRATE addons-introduction documentation to CSF & triconfig

Browse Source
This commit is contained in:
Norbert de Langen 2019-11-26 14:26:13 +01:00
parent 16be3de5c8
commit d4badb4150
1 changed files with 18 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
docs/src/pages/addons/introduction/index.md
View File

@ -25,86 +25,47 @@ const Center = ({ children }) => <div style={styles}>{children}</div>;
Then we can use it when writing stories.
```js
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Center from './center';
import Button from './button';
storiesOf('Button', module).add('with text', () => (
export default {
title: 'Button',
};
export const defaultView = () => (
<Center>
<Button onClick={action('clicked')}>Hello Button</Button>
<Button>Hello Button</Button>
</Center>
));
);
```
### Storybook Decorators
You can also expose this functionality as a Storybook decorator and use it like this.
You can also expose this functionality as a Storybook decorator and use it like this:
```js
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import Button from './button';
import Center from './center';
const styles = {
textAlign: 'center',
export default {
title: 'Button',
decorators: [storyFn => <Center>{storyFn()}</Center>],
};
const CenterDecorator = storyFn => <div style={styles}>{storyFn()}</div>;
storiesOf('Button', module)
.addDecorator(CenterDecorator)
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
.add('with some emojies', () => (
<Button onClick={action('clicked')}>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
));
export const defaultView = () => (
<Button>Hello Button</Button>
);
```
You can also add a decorator globally for all stories like this:
```js
import { storiesOf, addDecorator } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';
import Button from './button';
import Welcome from './welcome';
const styles = {
textAlign: 'center',
};
const CenterDecorator = storyFn => <div style={styles}>{storyFn()}</div>;
addDecorator(CenterDecorator);
storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
storiesOf('Button', module)
.add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
.add('with some emojies', () => (
<Button onClick={action('clicked')}>
<span role="img" aria-label="so cool">
😀 😎 👍 💯
</span>
</Button>
));
```
You can call `addDecorator()` inside the story definition file as shown above, but **adding it to the Storybook config file is a much better option**. That would look like this in `config.js`:
in `preview.js`:
```js
import React from 'react'
import { addDecorator } from '@storybook/react';
import Center from './center';
const styles = {
textAlign: 'center',
};
const CenterDecorator = storyFn => <div style={styles}>{storyFn()}</div>;
addDecorator(CenterDecorator);
addDecorator(storyFn => <Center>{storyFn()}</Center>);
```
## 2. Native Addons