Merge branch 'six'

.babelrc

@@ -1,10 +1,28 @@
 {
 	"presets": [
-		"env",
+    ["env", {
+      "targets": {
+        "uglify": true
+      },
+      "modules": false
+    }],
 		"react"
 	],
 	"plugins": [
 		"transform-class-properties",
 		"transform-object-rest-spread"
-	]
+	],
+	"env": {
+	  "test": {
+	    "presets": [
+	      "env",
+	      "react"
+	    ],
+      "plugins": [
+        "system-import-transformer",
+        "transform-class-properties",
+        "transform-object-rest-spread"
+      ]
+    }
+  }
 }

.travis.yml

@@ -7,10 +7,6 @@ cache:
   directories:
     - node_modules
     - travis_phantomjs
-env:
-  # Test everything in Webpack 1 and 2
-  - export WEBPACK_VERSION="2"
-  # - export WEBPACK_VERSION="1"
 before_install:
   # Upgrade npm
   - if [[ `npm -v` != 5* ]]; then npm install -g npm@latest; fi
@@ -25,9 +21,6 @@ before_install:
         tar -xvf phantomjs-$PHANTOMJS_VERSION-linux-x86_64.tar.bz2 -C $PWD/travis_phantomjs
       fi
       phantomjs -v
-before_script:
-  # Manually install Webpack 1 or 2
-  - if [ "$WEBPACK_VERSION" == "1" ]; then npm install --no-save webpack@1; fi
 script:
   # Run lint
   - npm run lint
@@ -36,7 +29,7 @@ script:
     if [[ "$TRAVIS_NODE_VERSION" == "4" ]]; then
       NODE_ENV=test node --harmony-proxies $(npm bin)/jest --runInBand
     else
-      if [[ "$TRAVIS_NODE_VERSION" == "8" && "$WEBPACK_VERSION" == "2"  ]]; then
+      if [[ "$TRAVIS_NODE_VERSION" == "8" ]]; then
         npm run danger
         npm run test:coverage -- --runInBand
       else
@@ -55,7 +48,7 @@ after_success:
   # Make release with semantic-release if needed
   - npm run semantic-release
   - |
-    if [[ "$TRAVIS_NODE_VERSION" == "8" && "$WEBPACK_VERSION" == "2" ]]; then
+    if [[ "$TRAVIS_NODE_VERSION" == "8" ]]; then
       # Upload coverage report to Codecov
       bash <(curl -s https://codecov.io/bash)
       # Update site

docs/API.md

@@ -12,7 +12,7 @@ const styleguide = styleguidist({
   components: './lib/components/**/*.js',
   webpackConfig: {
     module: {
-      loaders: [
+      rules: [
         {
           test: /\.jsx?$/,
           exclude: /node_modules/,

docs/Configuration.md

@@ -280,7 +280,7 @@ Dev server port.
 
 Type: `Boolean`, default: `false`
 
-Show or hide example code initially. It can be toggled in the UI by clicking the the Code button after each example.
+Show or hide example code initially. It can be toggled in the UI by clicking the Code button after each example.
 
 #### `showUsage`
 
@@ -351,6 +351,35 @@ Type: `String`, default: `<app name from package.json> Style Guide`
 
 Style guide title.
 
+#### `updateExample`
+
+Type: `Function`, optional
+
+Function that modifies code example (Markdown fenced code block). For example you can use it to load examples from files:
+
+```javascript
+module.exports = {
+  updateExample: function(props) {
+    const { settings, lang } = props;
+    if (typeof settings.file === 'string') {
+      const filepath = settings.file;
+      delete settings.file;
+      return {
+        content: fs.readFileSync(filepath),
+        settings,
+        lang,
+      }
+    }
+    return props;
+  }
+};
+```
+
+Use it like this in you Markdown files:
+
+    ```js { "file": "./some/file.js" }
+    ```
+
 #### `verbose`
 
 Type: `Boolean`, default: `false`
@@ -372,7 +401,7 @@ module.exports = {
       resolve: {
         extensions: ['.es6']
       },
-      loaders: [
+      rules: [
         {
           test: /\.scss$/,
           loaders: ['style-loader', 'css-loader', 'sass-loader?precision=10']

docs/Development.md

@@ -2,7 +2,7 @@
 
 *For basics see [How to contribute](https://github.com/styleguidist/react-styleguidist/blob/master/.github/Contributing.md).*
 
-Styleguidist isn’t an ordinary single page app and some design decisions may look confusing to an outsider. In this guide we'll explain these decisions to un-confuse potential contributors.
+Styleguidist isn’t an ordinary single page app and some design decisions may look confusing to an outsider. In this guide we’ll explain these decisions to un-confuse potential contributors.
 
 The main thing is that we’re running two apps at the same time: user’s components and Styleguidist UI. They share a webpack configuration and have styles in the same scope (there’s only one scope in CSS). And we can control only one of these two apps: Styleguidist UI. That puts us under some restrictions:
 

docs/Documenting.md

@@ -43,25 +43,27 @@ export default class Button extends React.Component {
 
 ## Usage examples and Readme files
 
-Styleguidist will look for any `Readme.md` or `ComponentName.md` files in the component’s folder and display them. Any code block without a language tag will be rendered as a  React component with live editable preview.
+Styleguidist will look for any `Readme.md` or `ComponentName.md` files in the component’s folder and display them. Any code block with a language tag of `js`, `jsx` or `javascript` will be rendered as a React component with an interactive playground.
 
     React component example:
 
-        <Button size="large">Push Me</Button>
+    ```js
+    <Button size="large">Push Me</Button>
+    ```
 
-    One more with generic code fence:
+    You can disable an editor by passing a `noeditor` modifier:
 
-    ```
-    <Button size="large">Push Me</Button>
+    ```jsx noeditor
+    <Button>Push Me</Button>
     ```
 
-    One more with `example` code fence (text editors may alias to `jsx` or `javascript`):
+    To render an example as highlighted source code add a `static` modifier:
 
-    ```example
-    <Button size="large">Push Me</Button>
+    ```jsx static
+    import React from 'react';
     ```
 
-    This example is rendered only as highlighted source code, not an actual component:
+    Examples with all other languages are rendered only as highlighted source code, not an actual component:
 
     ```html
     <Button size="large">Push Me</Button>

docs/Thirdparties.md

@@ -138,7 +138,7 @@ module.exports = {
 ```
 
 ```jsx
-// src/MyComponent/index.md
+// src/MyComponent/Readme.md
 <MyComponent object={sample.object} />
 ```
 
@@ -147,7 +147,7 @@ module.exports = {
 
 ### Styled Components
 
-The [recommended way](https://github.com/styleguidist/react-styleguidist/issues/37#issuecomment-263502454) of using [Styled Components](https://styled-components.com/) is like this:
+The [recommended way](https://github.com/styleguidist/react-styleguidist/issues/37#issuecomment-263502454) of using [Styled Components](https://www.styled-components.com/) is like this:
 
 ```jsx
 import React from 'react';

docs/Webpack.md

@@ -49,7 +49,7 @@ Add a `webpackConfig` section to your `styleguide.config.js`:
 module.exports = {
   webpackConfig: {
     module: {
-      loaders: [
+      rules: [
         // Babel loader, will use your project’s .babelrc
         {
           test: /\.jsx?$/,
@@ -82,15 +82,13 @@ module.exports = {
 If your project doesn’t use webpack you still need loaders for your files. You can use [webpack-blocks](https://github.com/andywer/webpack-blocks).
 
 ```bash
-npm install --save-dev @webpack-blocks/webpack2 @webpack-blocks/babel6 @webpack-blocks/postcss
+npm install --save-dev webpack-blocks
 ```
 
 Then add a `webpackConfig` section to your `styleguide.config.js`:
 
 ```javascript
-const { createConfig } = require('@webpack-blocks/webpack2');
-const babel = require('@webpack-blocks/babel6');
-const postcss = require('@webpack-blocks/postcss');
+const { createConfig, babel, postcss } = require('webpack-blocks');
 module.exports = {
 	webpackConfig: createConfig([
 		babel(),
@@ -101,8 +99,6 @@ module.exports = {
 
 > **Note:** `.babelrc` and `postcss.config.js` files will be taken into account if you have them.
 
-> **Note:** Use `@webpack-blocks/webpack` for webpack 1. See [webpack-blocks docs](https://github.com/andywer/webpack-blocks) for more options.
-
 ## When nothing else works
 
 In very rare cases, like using legacy or third-party libraries, you may need to change webpack options that Styleguidist doesn’t allow you to change via `webpackConfig` options. In this case you can use [dangerouslyUpdateWebpackConfig](Configuration.md#dangerouslyupdatewebpackconfig) option.

examples/basic/src/components/Button/Readme.md

@@ -1,15 +1,37 @@
 Basic button:
 
-    <Button>Push Me</Button>
+```jsx
+<Button>Push Me</Button>
+```
 
 Big pink button:
 
-    <Button size="large" color="deeppink">Lick Me</Button>
+```jsx
+<Button size="large" color="deeppink">Lick Me</Button>
+```
 
 And you *can* **use** `any` [Markdown](http://daringfireball.net/projects/markdown/) here.
 
-If you define a fenced code block with a language flag it will be rendered as a regular Markdown code snippet:
+Fenced code blocks with `js`, `jsx` or `javascript` languages are rendered as a interactive playgrounds:
+
+```jsx
+<Button>Push Me</Button>
+```
+
+You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor````):
 
-```javascript
+```jsx noeditor
+<Button>Push Me</Button>
+```
+
+To render an example as highlighted source code add a `static` modifier: (```` ```js static````):
+
+```js static
 import React from 'react';
 ```
+
+Fenced blocks with other languages are rendered as highlighted code:
+
+```html
+<h1>Hello world</h1>
+```

examples/basic/src/components/CounterButton/Readme.md

@@ -1 +1,3 @@
-    <CounterButton/>
+```js
+<CounterButton/>
+```

examples/basic/src/components/Modal/Readme.md

@@ -1,14 +1,18 @@
 Each example has its own state that you can access at the `state` variable and change with the `setState` function. Default state is `{}`.
 
-    <div>
-      <button onClick={() => setState({isOpen: true})}>Open</button>
-      <Modal isOpen={state.isOpen}>
-        <h1>Hallo!</h1>
-        <button onClick={() => setState({isOpen: false})}>Close</button>
-      </Modal>
-    </div>
+```jsx
+<div>
+  <button onClick={() => setState({isOpen: true})}>Open</button>
+  <Modal isOpen={state.isOpen}>
+    <h1>Hallo!</h1>
+    <button onClick={() => setState({isOpen: false})}>Close</button>
+  </Modal>
+</div>
+```
 
 If you want to set the default state you can do something like that:
 
-    initialState = {count: 1};
-    <button onClick={() => setState({count: state.count+1})}>{state.count}</button>
+```jsx
+initialState = {count: 1};
+<button onClick={() => setState({count: state.count+1})}>{state.count}</button>
+```

examples/basic/src/components/Placeholder/Readme.md

@@ -1 +1,3 @@
-    <Placeholder type="beard"/>
+```jsx
+<Placeholder type="beard"/>
+```

examples/basic/src/components/RandomButton/Readme.md

@@ -1,4 +1,6 @@
 You can `require` external files in your examples:
 
-    const names = require('dog-names').all;
-    <RandomButton variants={names}/>
+```jsx
+const names = require('dog-names').all;
+<RandomButton variants={names}/>
+```

examples/basic/src/components/WrappedButton/Readme.md

@@ -1,3 +1,5 @@
 Enhanced/Decorated components work as well:
 
-    <WrappedButton>I'm a wrapped button</WrappedButton>
+```jsx
+<WrappedButton>I'm a wrapped button</WrappedButton>
+```

examples/basic/styleguide.config.js

@@ -1,11 +1,19 @@
-const loaders = require('loaders');
-
 module.exports = {
 	components: 'src/components/**/[A-Z]*.js',
 	defaultExample: true,
 	webpackConfig: {
 		module: {
-			loaders: loaders.all,
+			rules: [
+				{
+					test: /\.jsx?$/,
+					exclude: /node_modules/,
+					loader: 'babel-loader',
+				},
+				{
+					test: /\.css$/,
+					loader: 'style-loader!css-loader',
+				},
+			],
 		},
 	},
 };

examples/cra/src/components/Button.md

@@ -1,15 +1,37 @@
 Basic button:
 
-    <Button>Push Me</Button>
+```jsx
+<Button>Push Me</Button>
+```
 
 Big pink button:
 
-    <Button size="large" color="deeppink">Lick Me</Button>
+```jsx
+<Button size="large" color="deeppink">Lick Me</Button>
+```
 
 And you *can* **use** `any` [Markdown](http://daringfireball.net/projects/markdown/) here.
 
-If you define a fenced code block with a language flag it will be rendered as a regular Markdown code snippet:
+Fenced code blocks with `js`, `jsx` or `javascript` languages are rendered as an interactive playgrounds:
+
+```jsx
+<Button>Push Me</Button>
+```
+
+You can disable an editor by passing a `noeditor` modifier (```` ```js noeditor````):
 
-```javascript
+```jsx noeditor
+<Button>Push Me</Button>
+```
+
+To render an example as highlighted source code add a `static` modifier (```` ```js static````):
+
+```js static
 import React from 'react';
 ```
+
+Fenced blocks with other languages are rendered as highlighted code:
+
+```html
+<h1>Hello world</h1>
+```

examples/cra/src/components/Placeholder.md

@@ -1 +1,3 @@
-    <Placeholder type="beard"/>
+```jsx
+<Placeholder type="beard"/>
+```