markdown 故事书

Posted 2021-05-05

<!-- TOC -->

- [Usage](#usage)
- [Caveat](#caveat)
- [Common](#common)
  - [Pure](#pure)
  - [Container](#container)
  - [3rd CSS](#3rd-css)
- [Decorators](#decorators)
  - [Host](#host)
    - [Advanced (more cases)](#advanced-more-cases)
  - [Viewport (deprecated)](#viewport-deprecated)
  - [Router](#router)
- [With Path](#with-path)

<!-- /TOC -->


# Usage
Usage
1. check 'Caveat' section
2. apply 'Common' first
3. then apply 'Host' decorator

# Caveat
first in `jsx` file, use module.css
(because of my configuration settings, I think only css modules are allowed now)
```jsx
import styles from './ImageByFileId.module.css';
//...
<img className={styles['product-image']} src={downloadURL} alt={name} {...rest} onClick={handleClick} />
```
2019/2/10 : I am not sure if I have to do it in newer storybook version too. I think it is no more needed?


# Common
## Pure
in file.stories.js

```js
import React from 'react';
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

const props = {
    image: createMockFile(),
};

const actions = {
    handleClick: action('handleClick'),
};

const App = () => <SomeApp {...props} {...actions} />

storiesOf('Name', module)
    .add('default', () => <App />)
```

## Container

```js
import StoryRouter from 'storybook-react-router';
import { Provider } from 'react-redux';
import ImageByFileId from './ImageByFileId';

const store = {
    getState: () => ({ }),
    subscribe: () => 0,
    dispatch: action('dispatch')
};

    .addDecorator(story => <Provider store={store}>{story()}</Provider>)
```

## 3rd CSS
.storybook\preview-head.html

```html
<link  rel="stylesheet"  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"  integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"  crossorigin="anonymous">
```

or

use Decorator and ScriptLoader util(my custom util)

```js
    .addDecorator(story => (
        <ScriptLoader alias='footer-style' scripts={['https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css',
            'css!https://fonts.googleapis.com/css?family=Cookie']} showChildAsync={true} >
            {story()}
        </ScriptLoader>))
```



# Decorators
## Host
[GitHub - philcockfield/storybook-host: A React Storybook decorator with helpful display options for hosting components under test.](https://github.com/philcockfield/storybook-host)

essential

```js
import { host } from 'storybook-host';

.addDecorator(
    host({
        title: 'A host container for components under test.',
        align: 'center middle',
        width: '80%',
        background: '#fff',
        backdrop: '#333'
    }),
)
```

### Advanced (more cases)
```js
storiesOf('Expense', module)
  .addDecorator(
    host({
      title: 'A host container for components under test.',
      align: 'center middle',
      width: '80%',
      background: '#fff',
      backdrop: '#333'
    }),
  )
  .add('default', () => <App />)

storiesOf('Expense', module)
  .addDecorator(
    host({
      title: 'A host container for components under test.',
      align: 'center middle',
      width: '80%',
      background: '#fff',
      backdrop: '#333'
    }),
  )
  .add('default2', () => <App />)
```
see I use `storiesOf` twice with same module name
then I can use different decorator settings

this can substitute 'viewport' decorator

## Viewport (deprecated)
Using `Host` is better
```js
import { withViewport } from '@storybook/addon-viewport';

    .addDecorator(withViewport())
    .add('collapsed', () => <App />,
        { viewport: 'galaxys5' }
    )
```

## Router
```js
import  StoryRouter  from  'storybook-react-router';

storiesOf('CartItem', module)
    .addDecorator(StoryRouter())
    .add('default', () => <App {...props} {...actions} />)
```

# With Path
[Link](https://snippets.cacher.io/snippet/2ab4f729a82b21c0d6f3)