Storybook: Storybook 3.0 release

[shilman]

#why

This is a big release in the new org and we should make sure it gets done properly and is simple to repeat for future major and minor releases.

what

• [x] npm release alphas to get the product tested by the community @ndelangen
• [x] code write codemods @aaronmcadam (#1049)
• [x] doc write MIGRATION.md @ndelangen (#1049)
• [x] npm release rcs to get last validation everything works as expected @ndelangen
• [x] doc update all documentation to reflect 3.0.0 @ndelangen
• [x] code write script to extract CHANGELOG from git history @shilman
• [x] doc write release notes https://github.com/storybooks/storybook/pull/1047 @shilman
• [x] doc update roadmap @ndelangen
• [x] git add github release
• [x] npm release 3.0.0 as latest
• [x] pr blog posts

[UsulPro]

• [ ] mark PR/issues related to v3.0 release with a label

[ndelangen]

We use milestones to signify which release a issue / pr is planned.

[aaronmcadam]

I'm just awaiting final sign off on #1049 🎉

[shilman]

@ndelangen @tmeasday @aaronmcadam @UsulPro @mnmtanish Proposed release workflow. Thoughts/feedback welcome!

The publisher (e.g. one of us) should:

1. Update version number in package.json
2. Run some tool (TBD) and/or manually update the CHANGELOG e.g. #1047
3. Run npmpub which:
   
   
   
   • runs tests, make sure we are in the right branch, etc.
   
   
   • pushes to NPM
   
   
   • grabs the CHANGELOG contents and creates a github tag & release using the right release notes
   
   

NOTE1: for pre-releases we should only tag the release and should not actually generate a github release, which means we should use the --no-release option to npmpub.

NOTE2: this is also compatible with a manual CHANGELOG strategy if we end up falling back to that.

[tmeasday]

Seems like a good start. I think as long as we keep a document somewhere with the instructions up to date with what we are actually doing on releases it'll be good. The details of the process are less important than documenting it so people are consistent.

[shilman]

@tmeasday thanks. have updated the proposal and added it to the end of CONTRIBUTING.md. Will update it again with the final before this is merged 🍡

[andreafalzetti]

Great job guys! Will this make Storybook work with Webpack 2?

[ndelangen]

yes, you can try out the release condidate right now:
npm i @storybook/cli@alpha -g

If you already have a project you want to migrate, we're working on a migration guide, but the gist of it is:

• webpack 2, so if you're providing a custom webpack.config.js it needs to be compatible.
• renamed packages:
  @kadira/storybook ➩ @storybook/react
@kadira/storybook-addon-actions ➩ @storybook/addon-actions
@kadira/react-native-storybook ➩ @storybook/react-native
storyshots ➩ @storybook/addon-storyshots

Hope everything works for you. Please let us know if things are broken.

[andreafalzetti]

Amazing @ndelangen - I didn't know I could start using the alpha. I have downloaded and migrated our few stories (we literally started using Storybook last week so it hasn't been dramatic. I admit we are not heavy users yet but as far as I can see, the webpack integration finally worked for me.

However, I have experienced a new issue for me - Every time I open a new story I get an error message saying "No Preview Available" (see screenshot below). If I refresh the page, I can then see my story. Got any idea of why?

Thanks again for your great job!

[ndelangen]

Are you sure everything is migrated?
Are you seeing errors in the console?
Can you post your configs or repo?

[andreafalzetti]

My project is a fork of react-redux-starter-kit - They have recently upgraded to webpack 2 so did I - That is why my Storybook stopped working and I am here now :)

Here are the files that I am using to run Storybook:

.storybook/config.js

import { configure } from '@storybook/react';

const req = require.context('../src/components', true, /\.stories\.js$/)
console.log(req)
function loadStories() {
  require('../stories');
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

.storybook/webpack.config.js

const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const project = require('../project.config')

const inProject = path.resolve.bind(path, project.basePath)
const inProjectSrc = (file) => inProject(project.srcDir, file)

const __DEV__ = project.env === 'development'
const __TEST__ = project.env === 'test'
const __PROD__ = project.env === 'production'

let fontLoaders = new Array();

;[
  ['woff', 'application/font-woff'],
  ['woff2', 'application/font-woff2'],
  ['otf', 'font/opentype'],
  ['ttf', 'application/octet-stream'],
  ['eot', 'application/vnd.ms-fontobject'],
  ['svg', 'image/svg+xml'],
].forEach((font) => {
  const extension = font[0]
  const mimetype = font[1]

  fontLoaders.push({
    test    : new RegExp(`\\.${extension}$`),
    loader  : 'url-loader',
    options : {
      name  : 'fonts/[name].[ext]',
      limit : 10000,
      mimetype,
    },
  })
})

const extractStyles = new ExtractTextPlugin({
  filename: 'styles/[name].[contenthash].css',
  allChunks: true,
  disable: __DEV__,
})


module.exports = {
  plugins: [
    // your custom plugins
    extractStyles
  ],
  module: {
    rules: [
      // add your custom loaders.
      ...fontLoaders,
      {
        test: /\.(sass|scss|css)$/,
        loader: extractStyles.extract({
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                sourceMap: project.sourcemaps,
                minimize: {
                  autoprefixer: {
                    add: true,
                    remove: true,
                    browsers: ['last 2 versions'],
                  },
                  discardComments: {
                    removeAll : true,
                  },
                  discardUnused: false,
                  mergeIdents: false,
                  reduceIdents: false,
                  safe: true,
                  sourcemap: project.sourcemaps,
                },
              },
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: project.sourcemaps,
                includePaths: [
                  inProjectSrc('styles'),
                ],
              },
            }
          ],
        })
      }
    ],
  },
};

stories/index.js

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import Button from './Button';
import Welcome from './Welcome';

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 emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);

src/components/RouteCircleButton/RouteCircleButton.stories.js

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

import RouteCircleButton from './RouteCircleButton'

const Story = ({ name, icon }) => (
  <RouteCircleButton name='Test' icon='user' />
);

Story.propTypes = {
  name: React.PropTypes.string.isRequired,
  icon: React.PropTypes.string.isRequired
};

storiesOf('RouteCircleButton', module)
  .add('Incomplete', () => (
    <RouteCircleButton name="Profile Information" icon="user" status='0' />
  ))
  .add('Started', () => (
    <RouteCircleButton name="Profile Information" icon="user" status='50' />
  ))  
  .add('Next', () => (
    <RouteCircleButton name="Profile Information" icon="user" status='0' isNext />
  ))  
  .add('Completed', () => (
    <RouteCircleButton name="Profile Information" icon="user" status={100} />
  ))
  .add('Disabled', () => (
    <RouteCircleButton name="Profile Information" icon="user" disabled={true} />
  ));

Am I doing something wrong?

[ndelangen]

I think in your case it's best to use the 'full control mode' for your webpack configuration:
https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode

But I can't see anything wrong with your configs really..

Can you show your package.json too?

[andreafalzetti]

I have changed the .storybook/webpack.config.js using the full control mode but still having the issue. I have noticed that removing the dynamic loading of the stories, I don't have the issue - at the same time my stories are not there so I am not entirely sure the issue is with the dynamic loading of the stories. Maybe not?

[andreafalzetti]

I have an update, I have successfully integrated the full control mode (thanks for the hint) but I am still facing the "no preview available" issue. The update is that I have tested moving my story to /stories/index.js instead of loading it dynamically and now works. It's not ideal as I'd like to keep the story within the component folder but it's clear to me that something is wrong when loading dynamically the stories. Have you got any clue of what could be the cause?

Working config.js

import { configure } from '@storybook/react';

function loadStories() {
  require('../stories');
}

configure(loadStories, module);

Non-Working config.js

import { configure } from '@storybook/react';

const req = require.context('../src/components', true, /\.stories\.js$/)

function loadStories() {
  require('../stories');
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

stories/index.js (working)

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

import Button from './Button';
import Welcome from './Welcome';
import RouteCircleButton from '../src/components/RouteCircleButton';

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 emoji', () => <Button onClick={action('clicked')}>😀 😎 👍 💯</Button>);


storiesOf('RouteCircleButton', module).add('to Storybook', () => <RouteCircleButton name="Profile Information" icon="user" status='0' />);

Story inside the component (not working)

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

import RouteCircleButton from './RouteCircleButton'

const Story = ({ name, icon }) => (
  <RouteCircleButton name='Test' icon='user' />
);

Story.propTypes = {
  name: React.PropTypes.string.isRequired,
  icon: React.PropTypes.string.isRequired
};

storiesOf('RouteCircleButton', module)
  .add('Incomplete', () => (
    <RouteCircleButton name="Profile Information" icon="user" status='0' />
  ))
  .add('Started', () => (
    <RouteCircleButton name="Profile Information" icon="user" status='50' />
  ))  
  .add('Next', () => (
    <RouteCircleButton name="Profile Information" icon="user" status='0' isNext />
  ))  
  .add('Completed', () => (
    <RouteCircleButton name="Profile Information" icon="user" status={100} />
  ))
  .add('Disabled', () => (
    <RouteCircleButton name="Profile Information" icon="user" disabled={true} />
  ));

[andreafalzetti]

Sorry for spamming with so many comments but I have just realised I had a component still requiring the old version of storybook. Changed that, it works without any problem. Thanks a lot for your work. :)

[ndelangen]

Haha, thanks for posting the solution, you never know others might find this page, and have the same problem. I'm super happy it works for you. 🎉