Storybook 3.0 release #1046

shilman · 2017-05-17T14:37:20Z

usulpro · 2017-05-18T12:45:07Z

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

ndelangen · 2017-05-18T13:15:26Z

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

aaronmcadam · 2017-05-18T16:42:02Z

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

shilman · 2017-05-20T02:33:35Z

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

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

Update version number in package.json
Run some tool (TBD) and/or manually update the CHANGELOG e.g. 3.0.0 release notes && release notes automation #1047
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 · 2017-05-21T01:56:47Z

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 · 2017-05-21T02:00:53Z

@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 · 2017-05-26T16:16:22Z

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

ndelangen · 2017-05-26T18:47:08Z

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 · 2017-05-26T20:25:40Z

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 · 2017-05-26T21:32:45Z

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

andreafalzetti · 2017-05-26T22:14:08Z

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 · 2017-05-26T22:29:41Z

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 · 2017-05-26T22:57:25Z

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 · 2017-05-27T00:00:17Z

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 · 2017-05-27T00:04:06Z

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 · 2017-05-27T00:27:20Z

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. 🎉

shilman added the discussion label May 17, 2017

shilman added this to the v3.0.0 milestone May 17, 2017

shilman mentioned this issue May 17, 2017

3.0.0 release notes && release notes automation #1047

Merged

usulpro added the 3.0 release label May 18, 2017

ndelangen removed the 3.0 release label May 18, 2017

shilman added the in progress label May 18, 2017

shilman mentioned this issue May 20, 2017

Update package.json with repository info #1078

Merged

ndelangen mentioned this issue May 21, 2017

CHANGE docs to 3.0.0 && Lint js && UPDATE to use 3.0.0-alpha && FIX webpack storybook-eol/storybooks.github.io#54

Closed

ndelangen self-assigned this May 22, 2017

ndelangen closed this as completed Jun 5, 2017

ndelangen removed the in progress label Jun 5, 2017

dependencies bot mentioned this issue Nov 11, 2017

Update 2 dependencies from npm #2290

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Storybook 3.0 release #1046

Storybook 3.0 release #1046

shilman commented May 17, 2017 •

edited by ndelangen

Loading

usulpro commented May 18, 2017 •

edited

Loading

ndelangen commented May 18, 2017 •

edited

Loading

aaronmcadam commented May 18, 2017

shilman commented May 20, 2017 •

edited

Loading

tmeasday commented May 21, 2017

shilman commented May 21, 2017

andreafalzetti commented May 26, 2017

ndelangen commented May 26, 2017

andreafalzetti commented May 26, 2017

ndelangen commented May 26, 2017 •

edited

Loading

andreafalzetti commented May 26, 2017

ndelangen commented May 26, 2017 •

edited

Loading

andreafalzetti commented May 26, 2017

andreafalzetti commented May 27, 2017

andreafalzetti commented May 27, 2017 •

edited

Loading

ndelangen commented May 27, 2017

Storybook 3.0 release #1046

Storybook 3.0 release #1046

Comments

shilman commented May 17, 2017 • edited by ndelangen Loading

#why

what

usulpro commented May 18, 2017 • edited Loading

ndelangen commented May 18, 2017 • edited Loading

aaronmcadam commented May 18, 2017

shilman commented May 20, 2017 • edited Loading

tmeasday commented May 21, 2017

shilman commented May 21, 2017

andreafalzetti commented May 26, 2017

ndelangen commented May 26, 2017

andreafalzetti commented May 26, 2017

ndelangen commented May 26, 2017 • edited Loading

andreafalzetti commented May 26, 2017

.storybook/config.js

.storybook/webpack.config.js

stories/index.js

src/components/RouteCircleButton/RouteCircleButton.stories.js

ndelangen commented May 26, 2017 • edited Loading

andreafalzetti commented May 26, 2017

andreafalzetti commented May 27, 2017

Working config.js

Non-Working config.js

stories/index.js (working)

Story inside the component (not working)

andreafalzetti commented May 27, 2017 • edited Loading

ndelangen commented May 27, 2017

shilman commented May 17, 2017 •

edited by ndelangen

Loading

usulpro commented May 18, 2017 •

edited

Loading

ndelangen commented May 18, 2017 •

edited

Loading

shilman commented May 20, 2017 •

edited

Loading

ndelangen commented May 26, 2017 •

edited

Loading

ndelangen commented May 26, 2017 •

edited

Loading

andreafalzetti commented May 27, 2017 •

edited

Loading