React Styleguidist

A basic set of loaders basically ripped out of react-styleguidist.

Installation

npm install --save git:github.com/psachs21/react-styleguidist

To install the loaders, just add node_modules/react-styleguidist/loaders to your resolveLoader.modulesDirectories in your webpack config.

You can then get component information by calling the loader on your styleguide config: let { components } = require('styleguide!../styleguide.config.js');

See the configuration section below for details on the config.

Documenting components

PropTypes

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

Usage examples

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.

You can also add some metadata according to MetaMarkdown which will be passed into the associated component to be used for whatever purpose you need.

React component example:

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

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

* Foo;
* bar;
* baz.

Results structure

The components returned is an array of objects that look like the following:

filepath: string - absolute path to file.
module: object - React Module that can be used to render the component.
props: array of props with the structure defined by react-docgen.
examples: array of the objects {
	type: string of 'code' or 'html' - represents the type of text
	content: content in that chunk of code.
}
metadata: object representation of any metadata defined in the associated readme.

Configuration

You need to configure a bunch of settings in the styleguide.config.js file.

componentsToDocDir

Type: Array of strings, required

Your app’s frontend components folders (eg. [./lib]). Should not point to a folder with the Styleguidist config and node_modules folder. Must be relative to configuration file.

components

Type: String, required

• String: a glob pattern that matches all your component modules. Relative to the componentsToDocDir.
• 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);
	});
},

getExampleFilename

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');
}

verbose

Type: Boolean, default: false

Adds more debugging info.

Config example

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

License

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