styleguidist/react-styleguidist 5.0.0@beta.9

5.0.0 beta

on GitHub

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