Fix: Downgrade markdown-to-jsx (styleguidist#925)

Newer versions have regressions with rendering HTML.

Fix: Use more user-friendly message for the EADDRINUSE error (stylegu…

…idist#924)

Fix: Correct tag name for Fragment (div) wrapping in React before 16.2

Fix: find() compatibility with IE11 (styleguidist#912)

Fix: Downgrade webpack-dev-server to support webpack 3 too

Changelog: 🚀

👋 **[Support Styleguidist](https://opencollective.com/styleguidist) on Open Collective** 👋

## Breaking changes

### Node 6 is the lowest supported version

Styleguidist doesn’t support Node 4 anymore.

(styleguidist#744 styleguidist#839 by @kohgpat)

### New format of template option

We’re now using [mini-html-webpack-plugin](https://github.com/styleguidist/mini-html-webpack-plugin) and [@vxna/mini-html-webpack-template](https://github.com/vxna/mini-html-webpack-template) instead of [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin).

This will make things like [adding a favicon](https://react-styleguidist.js.org/docs/cookbook#how-to-add-a-favicon) or fonts from [Google Fonts](https://react-styleguidist.js.org/docs/cookbook#how-to-add-fonts-from-google-fonts) much easier.

If you’re using a custom HTML template, you need to update your style guide config.

```js
// 6.x
module.exports = {
  template: './styleguie/template.html'
}

// 7.x
module.exports = {
  template: {
    // This is just an example, there are many more available options
    favicon: 'https://assets-cdn.github.com/favicon.ico'
  }
}
```

See more [in the docs](https://react-styleguidist.js.org/docs/configuration#template).

(styleguidist#896 styleguidist#907 by @sapegin)

### Changed Node API

`server` method now returns an object containing a webpack `Compiler` instance and the Styleguidist server, see examples [in the docs](https://react-styleguidist.js.org/docs/api.html#servercallback).

(styleguidist#828 by @cmswalker)

## New features

### Webpack 4 support

Webpack 3 is still supported too.

(styleguidist#857 by @kontrollanten, styleguidist#900 styleguidist#901 by @rubenmoya)

### Examples are wrapped in React.Fragment

You don’t need to wrap multiple JSX tags in a div anymore.

```jsx
// 6.x
<div>
  <Button primary>Primary button</Button>
  <Button secondary>Secondary button</Button>
</div>

// 7.x
<Button primary>Primary button</Button>
<Button secondary>Secondary button</Button>
```

(styleguidist#840 styleguidist#842 by @tizmagik)

## Bug fixes

* `components` option should accept arrays.
* Do not convert URLs in Markdown to auto links (styleguidist#793).
* Improved accessibility (styleguidist#893 by @gergely-nagy).

---

❤️ Huge thanks to @okonet to help with this release, [CI](styleguidist#904) and [docs](styleguidist#905) improvements.️ ❤️

Fix: Ensure that all Styleguidist components can be overriden by the …

…user

Fix: Allow non-Latin characters in section names (styleguidist#887)

Fix: Extract initial state and returned component without hacks

Fixes styleguidist#886

Changelog: 🚀

👋 **[Support Styleguidist](https://opencollective.com/styleguidist) on Open Collective** 👋

## New features

### Page per section 🚧

This is a huge improvement for large style guides: now you can show only one component at a page instead of all components.

![](https://d3vv6lp55qjaqc.cloudfront.net/items/0W2q2K2s3n2k311O1J0y/Screen%20Recording%202018-03-22%20at%2010.06%20AM.gif)

To enable:

```js
module.exports = {
  pagePerSection: true
};
```

This is an experimental feature and we need your feedback to make it better and really useful. For example, right now there’s no isolated mode. So feel free to share your ideas [in issues](https://github.com/styleguidist/react-styleguidist/issues).

(styleguidist#835 by @bitionaire and @stepancar, closes styleguidist#494 and styleguidist#768)

### “Fork me” ribbon

One more step to make Styleguidist usable for documenting open source projects:

![](https://d3vv6lp55qjaqc.cloudfront.net/items/1t331n2a3v0F2i290K0Z/Image%202018-03-22%20at%209.13.11%20AM.png)

New config option to enable the ribbon, define the URL and change the label:

```js
module.exports = {
  ribbon: {
    url: 'http://example.com/',
    text: 'Fork me on GitHub'
  }
};
```

And two new [theme variables](https://github.com/styleguidist/react-styleguidist/blob/master/src/styles/theme.js) to change colors: `color.ribbonBackground` and `color.ribbonText`.

(styleguidist#861 by @glebez and @wkwiatek, part of styleguidist#195, closes styleguidist#647)

### Options to change CLI output on server start and build

Two new options, `printServerInstructions` and `printBuildInstructions`:

```js
module.exports = {
  printBuildInstructions(config) {
    console.log(
      `Style guide published to ${
        config.styleguideDir
      }. Something else interesting.`
    );
  }
};
```

(styleguidist#878 by @roblevintennis, closes styleguidist#876)

### Option to modify props

A new option, `updateDocs` to modify props before rendering. For example, you can load a component version number from a JSON file:

```js
module.exports = {
  updateDocs(docs) {
    if (docs.doclets.version) {
      const versionFilePath = path.resolve(
        path.dirname(file),
        docs.doclets.version
      );
      const version = require(versionFilePath).version;

      docs.doclets.version = version;
      docs.tags.version[0].description = version;
    }

    return docs;
  }
};
```

(styleguidist#868 by @ryanoglesby08)

### Limited support for named exports

Styleguidist used to require default exports for components. Now you can use named exports too, though Styleguidist still supports only one component per file. I hope this change will make some users happier, see more details [in the docs](https://react-styleguidist.js.org/docs/components.html#loading-and-exposing-components).

(styleguidist#825 by @marcdavi-es, closes styleguidist#820 and styleguidist#633)

### Allow arrays of component paths in sections

More flexibility in structuring your style guide:

```js
module.exports = {
  sections: [
    {
      name: 'Forms',
      components: [
        'lib/components/ui/Button.js',
        'lib/components/ui/Input.js'
      ]
    }
  ]
};
```

(styleguidist#794 by @glebez, closes styleguidist#774)

### Sort properties by `required` and `name` attributes

This change should make props tables more predictable for the users. Instead of relying on developers to sort props in a meaningful way, Styleguidist will show required props first, and sort props in each group alphabetically.

To disable sorting, use the identity function:

```javascript
module.exports = {
  sortProps: props => props
};
```

(styleguidist#784 by @dotcs)

## Bug fixes

* Allow `Immutable` state in examples (styleguidist#870 by @nicoffee, closes styleguidist#864)
* Change template container ID to prevent clashes (styleguidist#859 by @glebez, closes styleguidist#753)
* Better props definitions with Flow types (styleguidist#781 by @nanot1m)