React components style guide generator with a hot reloaded (style guide) dev server.

Example style guide.

npm install --save-dev react-styleguidist

Add a styleguide.config.js file into your project’s root folder:

module.exports = {
	rootDir: './lib',
	components: './components/**/*.js'
};

See Configuration section below for the list of available options.

Add these scripts to your package.json:

"scripts": {
  "styleguide-server": "styleguidist server",
  "styleguide-build": "styleguidist build"
},

And run npm run styleguide-server to start styleguide dev server.

Components PropTypes are parsed by the react-docgen library. Have a look at their example of a component documentation.

Examples are written in Markdown where any code blocks will be rendered as a react components. By default any Readme.md in the component folder is treated as an examples file but you can change it with the getExampleFilename option.

React component example:

	<Button size="large">Push Me</Button>

Any [Markdown](http://daringfireball.net/projects/markdown/):

* Foo;
* bar;
* baz.

You can change some settings in the styleguide.config.js file in your project’s root folder.

Type: String, required

Your app’s frontend root folder (eg. ./lib). Should not point to a folder with the Styleguidist config and node_modules folder.

Type: String, required

• String: a glob pattern that matches all your component modules. Relative to the rootDir.
• Function: function that returns an array of modules.

If your components look like components/Button.js or components/Button/Button.js or components/Button/index.js:

components: './components/**/*.js',

If your components look like components/Button/Button.js + components/Button/index.js:

components: function(config, glob) {
	return glob.sync(config.rootDir + '/components/**/*.js').filter(function(module) {
		return /\/[A-Z][a-z]*\.js$/.test(module);
	});
},

Type: String, default: styleguide

Folder for static HTML style guide generated with styleguidist build command.

Type: String, default: src/templates/index.html

HTML file to use as the template for the output.

Type: String, default: Style guide

Style guide title.

Type: String, default: localhost

Dev server host name.

Type: Number, default: 3000

Dev server port.

Type: String, default: base16-light

CodeMirror theme name to use for syntax highlighting in examples.

Type: Function, default: finds Readme.md in the component folder

Function that returns examples file path for a given component path.

For example, instead of Readme.md you can use ComponentName.examples.md:

getExampleFilename: function(componentpath) {
	return componentpath.replace(/\.jsx?$/, '.examples.md');
}

Type: Function, optional

Function that allows you to modify Webpack config for style guide:

updateWebpackConfig: function(webpackConfig, env) {
	if (env === 'development') {
		/* ... modify config ... */
	}
	return webpackConfig;
}

module.exports = {
	title: 'Style guide example',
	rootDir: './example',
	components: './**/*.js',
	getExampleFilename: function(componentpath) {
		return componentpath.replace(/\.js$/, '.examples.md');
	}
};

Run dev server.

Generate a static HTML style guide.

Specify path to a config file: styleguidist server --config dir/styleguide.config.js.

Print debug information.

The changelog can be found in the Changelog.md file.

Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.

• Artem Sapegin

The MIT License, see the included License.md file.