Feat: New config option styleguideComponents to override React compon…

…ents used to render a style guide

docs/Configuration.md

@@ -282,6 +282,23 @@ Type: `Boolean`, default: `false`
 
 Ignore components that don’t have an example file (as determined by `getExampleFilename`). These components won’t be accessible from other examples unless you manually `require` them.
 
+#### `styleguideComponents`
+
+Type: `Object`, optional
+
+Override React components used to render the style guide.
+
+```javascript
+module.exports = {
+	styleguideComponents: {
+		Logo: path.join(__dirname, 'styleguide/components/Logo'),
+		StyleGuideRenderer: path.join(__dirname, 'styleguide/components/StyleGuide'),
+	},
+};
+```
+
+See an example of [customized style guide](https://github.com/styleguidist/react-styleguidist/tree/master/examples/customised).
+
 #### `styleguideDir`
 
 Type: `String`, default: `styleguide`

docs/Cookbook.md

@@ -82,12 +82,8 @@ To use Redux store in every component redefine the `Wrapper` component:
 // styleguide.config.js
 const path = require('path');
 module.exports = {
-  webpackConfig: {
-    resolve: {
-      alias: {
-        'rsg-components/Wrapper': path.join(__dirname, 'lib/styleguide/Wrapper')
-      }
-    }
+  styleguideComponents: {
+    Wrapper: path.join(__dirname, 'lib/styleguide/Wrapper')
   }
 };
 ```
@@ -261,12 +257,8 @@ For example you can replace the `Wrapper` component to wrap any example in the [
 // styleguide.config.js
 const path = require('path');
 module.exports = {
-  webpackConfig: {
-    resolve: {
-      alias: {
-        'rsg-components/Wrapper': path.join(__dirname, 'lib/styleguide/Wrapper')
-      }
-    }
+  styleguideComponents: {
+    Wrapper: path.join(__dirname, 'lib/styleguide/Wrapper')
   }
 };
 ```
@@ -292,12 +284,8 @@ You can replace the `StyleGuideRenderer` component like this:
 // styleguide.config.js
 const path = require('path');
 module.exports = {
-  webpackConfig: {
-    resolve: {
-      alias: {
-        'rsg-components/StyleGuide/StyleGuideRenderer': path.join(__dirname, 'lib/styleguide/StyleGuideRenderer')
-      }
-    }
+  styleguideComponents: {
+    StyleGuideRenderer: path.join(__dirname, 'lib/styleguide/StyleGuideRenderer')
   }
 };
 ```

docs/Development.md

@@ -37,7 +37,8 @@ Styleguidist tries to load and reuse user’s webpack config (`webpack.config.js
 We’re trying to keep Styleguidist’s own [webpack config](https://github.com/styleguidist/react-styleguidist/blob/master/scripts/make-webpack-config.js) minimal to reduce clashes with user’s configuration.
 
 ## React components
-Most of StyleGuidist UI components consist of two parts: `Foo/Foo.js` that contains all logic and `Foo/FooRenderer.js` that contains all markup and styles. This allows users to customize rendering by overriding `*Renderer` component using webpack aliases:
+
+Most of StyleGuidist UI components consist of two parts: `Foo/Foo.js` that contains all logic and `Foo/FooRenderer.js` that contains all markup and styles. This allows users to customize rendering by overriding `*Renderer` component using webpack aliases (or [styleguideComponents](Configuration.md#styleguidecomponents) config option):
 
 ```js
 // styleguide.config.js

examples/customised/styleguide.config.js

@@ -44,17 +44,12 @@ module.exports = {
 		const name = path.basename(componentPath, '.js');
 		return `import { ${name} } from 'my-awesome-library';`;
 	},
+	// Override Styleguidist components
+	styleguideComponents: {
+		Logo: path.join(__dirname, 'styleguide/components/Logo'),
+		StyleGuideRenderer: path.join(__dirname, 'styleguide/components/StyleGuide'),
+	},
 	webpackConfig: {
-		resolve: {
-			alias: {
-				// Override Styleguidist components
-				'rsg-components/Logo': path.join(__dirname, 'styleguide/components/Logo'),
-				'rsg-components/StyleGuide/StyleGuideRenderer': path.join(
-					__dirname,
-					'styleguide/components/StyleGuide'
-				),
-			},
-		},
 		module: {
 			loaders: [
 				loaders.babel,

scripts/__tests__/index.spec.js

@@ -134,6 +134,21 @@ describe('makeWebpackConfig', () => {
 
 		expect(result.entry).toEqual(expect.arrayContaining(modules));
 	});
+
+	it('should add webpack alias for each styleguideComponents config option item', () => {
+		const api = styleguidist({
+			styleguideComponents: {
+				Logo: 'styleguide/components/Logo',
+				StyleGuideRenderer: 'styleguide/components/StyleGuide',
+			},
+		});
+		const result = api.makeWebpackConfig();
+
+		expect(result.resolve.alias).toMatchObject({
+			'rsg-components/Logo': 'styleguide/components/Logo',
+			'rsg-components/StyleGuide/StyleGuideRenderer': 'styleguide/components/StyleGuide',
+		});
+	});
 });
 
 describe('build', () => {

scripts/make-webpack-config.js

@@ -5,11 +5,14 @@ const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const merge = require('webpack-merge');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const forEach = require('lodash/forEach');
 const hasJsonLoader = require('./utils/hasJsonLoader');
 const getWebpackVersion = require('./utils/getWebpackVersion');
 const mergeWebpackConfig = require('./utils/mergeWebpackConfig');
 const StyleguidistOptionsPlugin = require('./utils/StyleguidistOptionsPlugin');
 
+const RENDERER_REGEXP = /Renderer$/;
+
 const isWebpack1 = getWebpackVersion() < 2;
 const sourceDir = path.resolve(__dirname, '../lib');
 const htmlLoader = require.resolve('html-webpack-plugin/lib/loader');
@@ -116,6 +119,16 @@ module.exports = function(config, env) {
 		});
 	}
 
+	// Custom style guide components
+	if (config.styleguideComponents) {
+		forEach(config.styleguideComponents, (filepath, name) => {
+			const fullName = name.match(RENDERER_REGEXP)
+				? `${name.replace(RENDERER_REGEXP, '')}/${name}`
+				: name;
+			webpackConfig.resolve.alias[`rsg-components/${fullName}`] = filepath;
+		});
+	}
+
 	// Add components folder alias at the end so users can override our components to customize the style guide
 	// (their aliases should be before this one)
 	webpackConfig.resolve.alias['rsg-components'] = path.resolve(sourceDir, 'rsg-components');

scripts/schemas/config.js

@@ -153,6 +153,9 @@ module.exports = {
 		type: 'boolean',
 		default: false,
 	},
+	styleguideComponents: {
+		type: 'object',
+	},
 	styleguideDir: {
 		type: 'directory path',
 		default: 'styleguide',