Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storybook 3.0 release #1046

Closed
shilman opened this issue May 17, 2017 · 16 comments

Comments

@shilman
Copy link
Member

commented May 17, 2017

#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

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

This comment has been minimized.

Copy link
Member

commented May 18, 2017

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

This comment has been minimized.

Copy link
Member

commented May 18, 2017

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

@aaronmcadam

This comment has been minimized.

Copy link
Contributor

commented May 18, 2017

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

@shilman

This comment has been minimized.

Copy link
Member Author

commented May 20, 2017

@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

This comment has been minimized.

Copy link
Member

commented May 21, 2017

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

This comment has been minimized.

Copy link
Member Author

commented May 21, 2017

@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

This comment has been minimized.

Copy link

commented May 26, 2017

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

@ndelangen

This comment has been minimized.

Copy link
Member

commented May 26, 2017

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

This comment has been minimized.

Copy link

commented May 26, 2017

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?

screen shot 2017-05-26 at 21 20 38

Thanks again for your great job!

@ndelangen

This comment has been minimized.

Copy link
Member

commented May 26, 2017

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

@andreafalzetti

This comment has been minimized.

Copy link

commented May 26, 2017

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

This comment has been minimized.

Copy link
Member

commented May 26, 2017

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

This comment has been minimized.

Copy link

commented May 26, 2017

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

This comment has been minimized.

Copy link

commented May 27, 2017

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

This comment has been minimized.

Copy link

commented May 27, 2017

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

This comment has been minimized.

Copy link
Member

commented May 27, 2017

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.