styleguidist/react-styleguidist v5.0.0

on GitHub

Huge thanks to @n1313, @okonet and @kof for help with this release!

Highlights

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

Breaking changes

create-react-app support

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

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

User webpack config auto load

By default Styleguidist will try to find webpack.config.js in your project’s root directory and use it.

If your webpack config is located somewhere else, you need to load it manually:

module.exports = {
  webpackConfig: require('./configs/webpack.js')
};

Note: entry, externals, output, watch, stats and devtool options will be ignored.

Note: CommonsChunkPlugins, HtmlWebpackPlugin, UglifyJsPlugin, HotModuleReplacementPlugin plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.

Note: Babelified webpack configs (like webpack.config.babel.js) are not supported. We recommend to convert your config to native Node — Node 6 supports many ES6 features.

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',
        },
      ],
    },
  },
};

See the new webpack configuration guide for more examples.

Also:

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

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

New default config options

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

New default dev-server port

Default port is now 6060 because create-react-app uses 3000 too.

Use findAllExportedComponentDefinitions as a default resolver

Fixes #260.

Drop npm2 support

Other changes and new features

• New config option require to add new webpack entries like polyfills and custom styles
• New config option ignore to exclude components from the style guide.
• New config option showSidebar (#310)
• Ignoring props with @ignore JSDoc tag (#353)
• objectOf propType support (#347)
• updateWebpackConfig option was renamed to dangerouslyUpdateWebpackConfig and should be used in very rare cases when webpackConfig isn’t enough
• Style guide config validation
• Reduced build size

Bug fixes

• Path for template config option should be relative to style guide config (#211)
• Do not show isolated links on Markdown examples (#251)
• Show function PropType.func’s source in a tooltip (#343)
• Escape and highlight code in Markdown in descriptions (#284)
• Do not change level of Markdown headings (#329)
• Search should work for subsections (#245)
• Better anchors navigation with unique slugs (#318)
• User’s html-loader should not affect Styleguidist (#312)
• Show webpack build errors and warnings
• Exit with error code when build fails
• Show error when no components found on style guide start
• Do not fail when one of the files doesn’t export a component