Changelog: 🚀

[link to medium article]()

## 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](https://github.com/facebookincubator/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:

```javascript
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](http://node.green/).

### Easier webpack configuration

With the new [webpackConfig](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#webpackconfig):

```javascript
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](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Webpack.md) 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](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#context) option:

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

Or replicate previous behavior though it’s not recommended:

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

### Use JSS for styling instead of CSS Modules

Use config option [theme](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#theme) to change fonts, colors, etc. and option [styles](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#styles) to tweak style of particular Styleguidist’s components:

```javascript
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](http://cssinjs.org/) 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](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#require) to add new webpack entries like polyfills and custom styles
* New config option [ignore](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#ignore) to exclude components from the style guide.
* New config option [showSidebar](https://github.com/styleguidist/react-styleguidist/blob/next/docs/Configuration.md#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

---

https://github.com/n1313
https://github.com/okonet
https://github.com/kof