M2A_81.md

M2#A81 - Ajustando storybook

Copiamos o arquivo .babelrc para dentro da pasta storybook

Removemos { "modules": false }

"presets": [
    ["es2015", { "modules": false }],
	...

E deixamos assim o storybook gerenciar os módulos.

{
  "presets": ["es2015", "stage-0", "react"],
  "plugins": [
    "react-hot-loader/babel",
    ["transform-runtime", {
      "helpers": false,
      "polyfill": false,
      "regenerator": true
    }]
  ]
}

Criando um teste de async no storybook

Dentro do title/title.story.js criamos o teste

'use strict'

import { storiesOf } from '@kadira/storybook'
import React, { Component } from 'react'
import Title from './index'

const stories = storiesOf('Title', module)

stories.add('without props', () => (
  <Title>Main title</Title>
))

stories.add('async / await', () => {
  class Main extends Component {
    constructor () {
      super()
      this.state = { title: '...' }
    }

    getTitle () {
      return new Promise((resolve, reject) => {
        this.timer = setTimeout(() => {
          resolve('title with async / await!')
        }, 2000)
      })
    }

    async componentDidMount () {
      this.setState({
        title: await this.getTitle()
      })
    }

    componentWillUnmount () {
      clearTimeout(this.timer)
    }

    render () {
      return (
        <Title>{this.state.title}</Title>
      )
    }
  }

  return <Main />
})

Configurando webpack2 no storybook em webpack/storybook.config.js

Copiamos a configuração do common.standardPreLoader utilizando Object.assig e sobrescrevemos algumas propriedades utilizando o terceiro parâmetro do método. Precisamos trocar essa propriedade por conta do webpack novo

const preloaders = Object.assign({}, common.standardPreLoader, {
  use: undefined,
  loader: common.standardPreLoader.use
})