v5.0.0-rc.3

v5.0.0-rc.3

v5.0.0-rc.1

🌞 Spring is coming! 🌞

Please test in your project and report any bugs. Also would be awesome if check the updated docs for any unclear or obsolete information.

npm install react-styleguidist@beta

Changes since 5.0.0-beta.15:

New features

• Ignoring props with @ignore tag (#353 — thanks @n1313)

Fixes

• PhantomJS compatibility (#349)
• Incorrect class names for code examples in Markdown (#348)

v5.0.0-beta.15

npm install react-styleguidist@beta

Breaking changes since beta 14

New webpack config behavior — #323:

• Only loads config from webpack.config.js or webpackfile.js in the project root folder.

• No webpackConfigFile option.

• Default port is 6060 to remove collision with create-react-app.

Read more in the docs.

New features

• New option to add webpack entries: require.

• Improved support for objectOf propType — #347

v5.0.0-beta.14

#342, #343, #344

5.0.0 beta

npm install react-styleguidist@beta

See updated doc, especially new installation guide.

There might be some bugs or regressions of course — any feedback is greatly appreciated. Feel free to reach out to us in Gitter or GitHub issues.

This release incorporates a lot of rethinking and rewriting. But most of the changes was done to make initial configuration easier.

Highlights

1. New Webpack configuration options + user config auto load.
2. create-react-app support out of the box.

Breaking changes

User Webpack config auto discovery

By default React Styleguidist will try to find Webpack config (webpack.config.dev.js or webpack.config.js) anywhere in your project and use it.

There’s the new webpackConfigFile option to specify a custom path:

module.exports = {
  webpackConfigFile: './configs/webpack.js',
};

Note:: entry, externals and output options will be ignored, use webpackConfig option to change them.

Note:: it may not work with your project, see below for other options.

create-react-app support

Now Styleguidst works with create-react-app even without config.

It will load components from src/components/**/*.js. And example file sfrom Component/Readme.md or Component/Component.md.

Easier Webpack Configuration

With the new webpackConfig:

module.exports = {
  webpackConfig: {
    module: {
      loaders: [
        // Babel loader, will use your project’s .babelrc
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        },
        // Other loaders that is needed for your components
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader?modules',
        },
      ],
    },
  },
};

You can also use loaders module if your project doesn’t use Webpack:

npm install --save-dev loaders

const loaders = require('loaders');
module.exports = {
  webpackConfig: {
    module: {
      // Enable all loaders
      loaders: loaders.all,

      // OR only needed loaders
      loaders: [
        loaders.babel,
        loaders.css,
        loaders.json,
        loaders.url,
        // Other loaders for your style guide
      ],
    },
  },
};

Other improvements

• include/exclude options in you Webpack loaders are no longer required.
• JSON loader will be added automatically if needed.

Note: this option disables Webpack config auto load, use webpackConfigFile option to load your project’s Webpack config from file.

No global Lodash in examples

Lodash will not be available in examples as _. You can load function you need with the new context option:

module.exports = {
  context: {
    forEach: 'lodash/forEach',
    map: 'lodash/map',
  },
};

Or replicate previous behavior though it’s not recommended:

module.exports = {
  context: {
    _: 'lodash',
  },
};

Use JSS for styling instead of CSS Modules

Use config option theme to change fonts, colors, etc. and option styles to tweak style of particular Styleguidist’s components:

module.exports = {
    theme: {
        link: 'firebrick',
        linkHover: 'salmon',
        font: '"Comic Sans MS", "Comic Sans", cursive',
    },
    styles: {
        Logo: {
            logo: {
                animation: 'blink ease-in-out 300ms infinite',
            },
            '@keyframes blink': {
                to: { opacity: 0 },
            },
        },
    },
};

We now use JSS under the hood.

New default config options

• components: src/components/**/*.js
• getExampleFilename: Component/Readme.md or Component/Component.md
• title: <app name from package.json> Style Guide

Use findAllExportedComponentDefinitions as a default resolver

Fixes #260.

Drop npm2 support

Other changes

Reduced build size

updateWebpackConfig option is deprecated

File an issue if you have a use case that isn’t covered by new options.

Bug fixes

• Path for template config option should be relative to style guide config (#211)
• Do not show isolated links on Markdown examples (#251)
• Escape and highlight code in Markdown in descriptions (#284)
• Show Webpack build errors and warnings
• Exit with error code when build fails
• Show error when no components found on style guide start

v4.6.3

• Fixed: Add line break between description and extra when rendering props (#290)

v4.6.2

• Fixed: Move es6-object-assign to dependencies

v4.6.1

• Fixed: Add es6-object-assign polyfill to support IE11 (#285)

v4.6.0

New feature

Public methods documentation

Show component public methods in the style guide, the same way as props. Tag your method with  JSDoc tag to mark mark it as public.

/**
 * Sets the counter to a particular value.
 *
 * @public
 * @param {Number} newValue - New value for the counter.
 */
set(newValue) {
  this.setState({
    value: parseInt(newValue, 10),
  });
}

PR #280 by @n1313

v4.5.4

• Fixed: Add webpack 2.2 support in peer deps (#278)