pocotan001 / react-styleguide-generator

Easily generate a good-looking styleguide by adding some documentation to your React project.

React Styleguide Generator

Easily generate a good-looking styleguide by adding some documentation to your React project.

Demo using the React-Bootstrap.

Installation

npm install react-styleguide-generator

Which requires React 15.x.x or newer. To install it npm install react.

Quick Start

NOTE: By default Babel's static keyword is disabled. You can turn them on individually by passing stage 0 as a babelrc or options.babelConfig.

Documenting your React components

Create file for the styleguide, and then add some documentation to a static field named styleguide. You can use the ES6 syntax by Babel.

import React from 'react'
import Button from './Button'

export default class extends React.Component {
  static styleguide = {
    index: '1.1',
    category: 'Elements',
    title: 'Button',
    description: 'You can use **Markdown** within this `description` field.',
    code: `<Button size='small|large' onClick={Function}>Cool Button</Button>`,
    className: 'apply the css class'
  }

  onClick () {
    alert('Alo!')
  }

  render () {
    return (
      <Button size='large' onClick={this.onClick}>Cool Button</Button>
    )
  }
}

• index: Reference to the element's position in the styleguide (optional)
• category: Components category name
• title: Components title
• description: Components description (optional)
• code: Code example (optional). Not specifying this will not auto-generate an example.
• className: CSS class name (optional)

Additional examples in tabs (optional) Demo

You can optionally use tabs to segment out examples for a component:

import React from 'react'
import Button from './Button'

export default class extends React.Component {
  static styleguide = {
    …
    // Component to use for generating additional examples
    exampleComponent: Button,
    // Array of additional example tabs
    examples: [{
      tabTitle: 'Default',
      props: {
        children: 'Default'
      }
    }, {
      tabTitle: 'Primary',
      props: {
        kind: 'primary',
        children: 'Primary',
        onClick () {
          alert('o hay!')
        }
      }
    }]
  }
}

• exampleComponent: ReactElement to use to generate the examples.
• examples: Array of examples, which generates additional tabs of example components and sample code
• examples[].tabTitle: Title of example tab
• examples[].props: Properties to assign to the rendered example component
• examples[].props.children: (optional) Child elements to assign to the example component
• examples[].code: (optional) Code example. Omitting this will attempt to auto-generate a code example using the examples[].props

Additional examples via doc comment (optional) Demo

Doc comment support example is:

/**
 * Substitute this description for `styleguide.description`.
 */
export default class extends Component {
  // required for prop documentation
  static displayName = 'ExampleButton'

  static styleguide = {
    …
  }

  // Document the props via react-docgen
  static propTypes = {
    /**
     * Block level
     */
    block: React.PropTypes.bool,
    /**
     * Style types
     */
    kind: React.PropTypes.oneOf(['default', 'primary', 'success', 'info'])
  }

  render () {
    return <Button block kind='primary'>Cool Button</Button>
  }
}

If necessary, visit react-styleguide-generator/example to see more complete examples for the documenting syntax.

Generating the documentation

Command line tool

A common usage example is below.

# The default output to `styleguide` directory
rsg 'example/**/*.js'

Type rsg -h or rsg --help to get all the available options.

Usage: rsg [input] [options]

Options:
  -o, --output     Output directory            ['styleguide']
  -t, --title      Used as a page title        ['Style Guide']
  -r, --root       Set the root path           ['.']
  -f, --files      Inject references to files  ['']
  -c, --config     Use the config file         ['styleguide.json']
  -p, --pushstate  Enable HTML5 pushState      [false]
  -v, --verbose    Verbose output              [false]
  -w, --watch      Watch mode using `browserifyConfig`

Examples:
  rsg 'example/**/*.js' -t 'Great Style Guide' -f 'a.css, a.js' -v

  # Necessary to use a config file if you want to enable react-docgen
  rsg 'example/**/*.js' -c 'styleguide.json' -v

Gulp

const gulp = require('gulp')
const rsg = require('react-styleguide-generator').rsg

gulp.task('styleguide', function (done) {
  rsg('example/**/*.js', {
    output: 'path/to/dir',
    files: ['a.css', 'a.js']
  }).generate()
    .then(() => done())
    .catch(err => {
      console.error(err)
      done()
    })
})

Grunt

const rsg = require('react-styleguide-generator').rsg

grunt.registerTask('rsg', 'React style guide', function () {
  const done = this.async()

  try {
    const conf = grunt.config.get('rsg')

    rsg(conf.input, {
      config: conf.configFile,
      watch: false,
      verbose: true
    }).generate()
      .then(() => {
        grunt.log.ok('react styleguide generation complete')
        done()
      })
      .catch(err => {
        grunt.log.error('Error: ' + err + ' ' + err.stack())
        done(false)
      })
  } catch (e) {
    grunt.log.error('Error: ' + e + ' ' + e.stack)
    done(false)
  }
})

API

RSG(input, [options])

Returns a new RSG instance.

input

Type: String

Refers to glob syntax or it can be a direct file path.

options

output

Type: String
Default: 'styleguide'

Output directory path.

title

Type: String
Default: 'Style Guide'

Used as a page title and in the page header.

reactDocgen.files

Type: Array Default: input

An array of glob-able file/paths for react-docgen to parse. If not specified, will default the value to input.

root

Type: String
Default: '.'

Set the root path. For example, if the styleguide is hosted at http://example.com/styleguide the options.root should be styleguide.

files

Type: Array
Default: null

Inject references to files. A usage example is:

{
  files: [
    '//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css',
    'a.css',
    'a.js',
    'icon.svg'
  ]
}

Check for the existence of the files and only copy the files if it exists.

styleguide/files
├─ a.css
├─ a.js
└─ icon.svg

Inject file references into index.html if the files with the extension .css or .js.

<!doctype html>
<html>
  <head>
    …
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="files/a.css">
  </head>
  <body>
    …
    <script src="files/a.js"></script>
  </body>
</html>

config

Type: String|Object
Default: styleguide.json

The entire range of RSG API options is allowed. Usage example.

An object can be passed instead of a filename that contains the RSG API options.

pushstate

Type: String
Default: false

Enable HTML5 pushState. When this option is enabled, styleguide will use history API.

babelConfig

Type: Object
Default: null

A usage example is below. See the babel docs for the complete list.

{
  babelConfig: {
    stage: 0
  }
}

browserifyConfig

Type: Object
Default: { standalone: 'Contents', debug: true }

A usage example is below. See the browserify docs for the complete list.

{
  extensions: ['', '.js', '.jsx']
}

watch

Type: String Default: false

Enables watchify for when the input files change, speeding up rebuild time.

rsg.generate()

Generate the files and their dependencies into a styleguide output.

Demo

Get the demo running locally:

git clone [email protected]:pocotan001/react-styleguide-generator.git
cd react-styleguide-generator/example/
npm install
npm start

Visit http://localhost:3000/ in your browser.

Troubleshooting

Error: No suitable component definition found.

Make sure your component contains displayName and render().

react-styleguide-generator's Issues

removing styleguide static for prd builds

So I asked this question of at: https://github.com/theogravity/react-styleguide-generator-alt/issues/18 and basically was thinking that having the ability to remove the styleguide static attached to any given component would be good for minifying production builds.

So with that in mind, I went ahead and created this:https://www.npmjs.com/package/babel-plugin-transform-react-remove-statics

Should allow you to flexibly remove any statics (propTypes/styleguide/etc) in whatever enviornment you want via babel config.

Just thought it might help some users that want to use this repo but still publish production ready code.

Error when installing - requires a peer of [email protected] - 1.x

Eerytime I try to install I get this error. Here is my log. Not sure why this is happening. Also npm -v react says 3.10.10 and wont update? not sure how to proceed.

npm WARN [email protected] requires a peer of [email protected] - 1.x but none was installed.
npm WARN [email protected] No description
Justins-MacBook-Pro:ddl-living-style-guide justin$ npm -v react
3.10.10
Justins-MacBook-Pro:ddl-living-style-guide justin$ npm install react
[email protected] /Users/justin/GitHub/ddl-living-style-guide
└── [email protected] 
npm WARN [email protected] requires a peer of [email protected] - 1.x but none was installed.
npm WARN [email protected] No description
Justins-MacBook-Pro:ddl-living-style-guide justin$ npm -v react

Git errors during npm install

I'm unable to install the package due to git errors relating to this dev dependency in the package.json:

"react-simpletabs": "matthewgertner/react-simpletabs"

Is there a reason the dependency points to a github repo and not to the package on npm e.g.

"react-simpletabs": "^0.7.0"

This article (https://circleci.com/docs/git-npm-install/) suggests that if a dependency points to a github repo it should use the full https:// address.

react.js and content.js missing?

I wonder what am I doing wrong...

this is my script:

const RSG = require('react-styleguide-generator');

const INPUT = 'app/components/**/*.js';
const OUTPUT = 'docs/styleguide';

var rsg = RSG(INPUT, {
    output: OUTPUT
});
rsg.generate();

I run it with NPM, and when I then serve the generated index.html, it complains about contents.js and react.js missing.

In the console I get:

"msg":"'import' and 'export' may appear only with 'sourceType: module'",
"time":"2016-05-20T15:34:40.307Z",
"v":0

Why?

Support for React.PropTypes.shape({ ... })

react-docgen will create a recursive structure for React.PropTypes.shape props.

E.g.:

propTypes: {
  /** `foo` is a structured object */
  foo: React.PropTypes.shape({
    /** A sub-property of `foo` */
    bar: React.PropTypes.number
  })
}

It'd be sweet to show this in the Properties overview. (react-docgen already supports shapes and generates JSON for them.)

require images

I'm trying to add react-styleguide-generator into my app but I keep getting the following error.

(apologies for the length but an example of my react code is after this snippet)

{
    "name": "rsg/rsg-lib",
    "hostname": "UK134489.local",
    "pid": 12778,
    "level": 50,
    "err": {
        "message": "Unexpected character '�'",
        "line": 1,
        "column": 1,
        "annotated": "\n/Users/mdell/Work/Repos/web/assets/images/pictureTile_delete.png:1\n�PNG\r\n^\nParseError: Unexpected character '�'",
        "stream": {
            "_readableState": {
                "highWaterMark": 16,
                "buffer": [],
                "length": 0,
                "pipes": {
                    "_readableState": {
                        "highWaterMark": 16,
                        "buffer": [],
                        "length": 0,
                        "pipes": {
                            "_readableState": {
                                "highWaterMark": 16,
                                "buffer": [],
                                "length": 0,
                                "pipes": {
                                    "_readableState": {
                                        "highWaterMark": 16,
                                        "buffer": [],
                                        "length": 0,
                                        "pipes": {
                                            "_readableState": {
                                                "highWaterMark": 16,
                                                "buffer": [],
                                                "length": 0,
                                                "pipes": {
                                                    "_readableState": {
                                                        "highWaterMark": 16,
                                                        "buffer": [],
                                                        "length": 0,
                                                        "pipes": {
                                                            "_readableState": {
                                                                "highWaterMark": 16,
                                                                "buffer": [],
                                                                "length": 0,
                                                                "pipes": {
                                                                    "_readableState": {
                                                                        "highWaterMark": 16,
                                                                        "buffer": [],
                                                                        "length": 0,
                                                                        "pipes": null,
                                                                        "pipesCount": 0,
                                                                        "flowing": null,
                                                                        "ended": false,
                                                                        "endEmitted": false,
                                                                        "reading": true,
                                                                        "sync": false,
                                                                        "needReadable": true,
                                                                        "emittedReadable": false,
                                                                        "readableListening": true,
                                                                        "objectMode": true,
                                                                        "defaultEncoding": "utf8",
                                                                        "ranOut": false,
                                                                        "awaitDrain": 0,
                                                                        "readingMore": false,
                                                                        "decoder": null,
                                                                        "encoding": null
                                                                    },
                                                                    "readable": true,
                                                                    "domain": null,
                                                                    "_events": {
                                                                        "end": [null, null],
                                                                        "finish": [null, null],
                                                                        "error": [null, null]
                                                                    },
                                                                    "_eventsCount": 8,
                                                                    "_writableState": {
                                                                        "highWaterMark": 16,
                                                                        "objectMode": true,
                                                                        "needDrain": false,
                                                                        "ending": false,
                                                                        "ended": false,
                                                                        "finished": false,
                                                                        "decodeStrings": true,
                                                                        "defaultEncoding": "utf8",
                                                                        "length": 0,
                                                                        "writing": false,
                                                                        "corked": 0,
                                                                        "sync": true,
                                                                        "bufferProcessing": false,
                                                                        "writecb": null,
                                                                        "writelen": 0,
                                                                        "buffer": [],
                                                                        "pendingcb": 0,
                                                                        "prefinished": false,
                                                                        "errorEmitted": false
                                                                    },
                                                                    "writable": true,
                                                                    "allowHalfOpen": true,
                                                                    "_options": {
                                                                        "objectMode": true
                                                                    },
                                                                    "_wrapOptions": {
                                                                        "objectMode": true
                                                                    },
                                                                    "_streams": [{
                                                                        "_readableState": {
                                                                            "highWaterMark": 16,
                                                                            "buffer": [],
                                                                            "length": 0,
                                                                            "pipes": null,
                                                                            "pipesCount": 0,
                                                                            "flowing": null,
                                                                            "ended": false,
                                                                            "endEmitted": false,
                                                                            "reading": true,
                                                                            "sync": false,
                                                                            "needReadable": true,
                                                                            "emittedReadable": false,
                                                                            "readableListening": true,
                                                                            "objectMode": true,
                                                                            "defaultEncoding": "utf8",
                                                                            "ranOut": false,
                                                                            "awaitDrain": 0,
                                                                            "readingMore": false,
                                                                            "decoder": null,
                                                                            "encoding": null
                                                                        },
                                                                        "readable": true,
                                                                        "domain": null,
                                                                        "_events": {
                                                                            "end": [null, null]
                                                                        },
                                                                        "_eventsCount": 3,
                                                                        "_writableState": {
                                                                            "highWaterMark": 16,
                                                                            "objectMode": true,
                                                                            "needDrain": false,
                                                                            "ending": false,
                                                                            "ended": false,
                                                                            "finished": false,
                                                                            "decodeStrings": true,
                                                                            "defaultEncoding": "utf8",
                                                                            "length": 0,
                                                                            "writing": false,
                                                                            "corked": 0,
                                                                            "sync": true,
                                                                            "bufferProcessing": false,
                                                                            "writecb": null,
                                                                            "writelen": 0,
                                                                            "buffer": [],
                                                                            "pendingcb": 0,
                                                                            "prefinished": false,
                                                                            "errorEmitted": false
                                                                        },
                                                                        "writable": true,
                                                                        "allowHalfOpen": true,
                                                                        "_transformState": {
                                                                            "needTransform": true,
                                                                            "transforming": false,
                                                                            "writecb": null,
                                                                            "writechunk": null
                                                                        }
                                                                    }],
                                                                    "length": 1,
                                                                    "label": "wrap"
                                                                },
                                                                "pipesCount": 1,
                                                                "flowing": true,
                                                                "ended": false,
                                                                "endEmitted": false,
                                                                "reading": true,
                                                                "sync": false,
                                                                "needReadable": true,
                                                                "emittedReadable": false,
                                                                "readableListening": false,
                                                                "objectMode": true,
                                                                "defaultEncoding": "utf8",
                                                                "ranOut": false,
                                                                "awaitDrain": 0,
                                                                "readingMore": false,
                                                                "decoder": null,
                                                                "encoding": null,
                                                                "resumeScheduled": false
                                                            },
                                                            "readable": true,
                                                            "domain": null,
                                                            "_events": {
                                                                "end": [null, null, null],
                                                                "finish": [null, null],
                                                                "error": [null, null]
                                                            },
                                                            "_eventsCount": 8,
                                                            "_writableState": {
                                                                "highWaterMark": 16,
                                                                "objectMode": true,
                                                                "needDrain": false,
                                                                "ending": false,
                                                                "ended": false,
                                                                "finished": false,
                                                                "decodeStrings": true,
                                                                "defaultEncoding": "utf8",
                                                                "length": 0,
                                                                "writing": false,
                                                                "corked": 0,
                                                                "sync": true,
                                                                "bufferProcessing": false,
                                                                "writecb": null,
                                                                "writelen": 0,
                                                                "buffer": [],
                                                                "pendingcb": 0,
                                                                "prefinished": false,
                                                                "errorEmitted": false
                                                            },
                                                            "writable": true,
                                                            "allowHalfOpen": true,
                                                            "_options": "[Circular]",
                                                            "_wrapOptions": {
                                                                "objectMode": true
                                                            },
                                                            "_streams": [{
                                                                "_readableState": {
                                                                    "highWaterMark": 16,
                                                                    "buffer": [],
                                                                    "length": 0,
                                                                    "pipes": null,
                                                                    "pipesCount": 0,
                                                                    "flowing": null,
                                                                    "ended": false,
                                                                    "endEmitted": false,
                                                                    "reading": true,
                                                                    "sync": false,
                                                                    "needReadable": true,
                                                                    "emittedReadable": false,
                                                                    "readableListening": true,
                                                                    "objectMode": true,
                                                                    "defaultEncoding": "utf8",
                                                                    "ranOut": false,
                                                                    "awaitDrain": 0,
                                                                    "readingMore": false,
                                                                    "decoder": null,
                                                                    "encoding": null
                                                                },
                                                                "readable": true,
                                                                "domain": null,
                                                                "_events": {
                                                                    "end": [null, null]
                                                                },
                                                                "_eventsCount": 4,
                                                                "_writableState": {
                                                                    "highWaterMark": 16,
                                                                    "objectMode": true,
                                                                    "needDrain": false,
                                                                    "ending": false,
                                                                    "ended": false,
                                                                    "finished": false,
                                                                    "decodeStrings": true,
                                                                    "defaultEncoding": "utf8",
                                                                    "length": 0,
                                                                    "writing": false,
                                                                    "corked": 0,
                                                                    "sync": true,
                                                                    "bufferProcessing": false,
                                                                    "writecb": null,
                                                                    "writelen": 0,
                                                                    "buffer": [],
                                                                    "pendingcb": 0,
                                                                    "prefinished": false,
                                                                    "errorEmitted": false
                                                                },
                                                                "writable": true,
                                                                "allowHalfOpen": true,
                                                                "_transformState": {
                                                                    "needTransform": true,
                                                                    "transforming": false,
                                                                    "writecb": null,
                                                                    "writechunk": null
                                                                },
                                                                "_destroyed": false
                                                            }],
                                                            "length": 1,
                                                            "label": "pack"
                                                        },
                                                        "pipesCount": 1,
                                                        "flowing": true,
                                                        "ended": false,
                                                        "endEmitted": false,
                                                        "reading": true,
                                                        "sync": false,
                                                        "needReadable": true,
                                                        "emittedReadable": false,
                                                        "readableListening": false,
                                                        "objectMode": true,
                                                        "defaultEncoding": "utf8",
                                                        "ranOut": false,
                                                        "awaitDrain": 0,
                                                        "readingMore": false,
                                                        "decoder": null,
                                                        "encoding": null,
                                                        "resumeScheduled": false
                                                    },
                                                    "readable": true,
                                                    "domain": null,
                                                    "_events": {
                                                        "end": [null, null, null],
                                                        "finish": [null, null],
                                                        "error": [null, null]
                                                    },
                                                    "_eventsCount": 8,
                                                    "_writableState": {
                                                        "highWaterMark": 16,
                                                        "objectMode": true,
                                                        "needDrain": false,
                                                        "ending": false,
                                                        "ended": false,
                                                        "finished": false,
                                                        "decodeStrings": true,
                                                        "defaultEncoding": "utf8",
                                                        "length": 0,
                                                        "writing": false,
                                                        "corked": 0,
                                                        "sync": true,
                                                        "bufferProcessing": false,
                                                        "writecb": null,
                                                        "writelen": 0,
                                                        "buffer": [],
                                                        "pendingcb": 0,
                                                        "prefinished": false,
                                                        "errorEmitted": false
                                                    },
                                                    "writable": true,
                                                    "allowHalfOpen": true,
                                                    "_options": "[Circular]",
                                                    "_wrapOptions": {
                                                        "objectMode": true
                                                    },
                                                    "_streams": [{
                                                        "_readableState": {
                                                            "highWaterMark": 16,
                                                            "buffer": [],
                                                            "length": 0,
                                                            "pipes": null,
                                                            "pipesCount": 0,
                                                            "flowing": null,
                                                            "ended": false,
                                                            "endEmitted": false,
                                                            "reading": true,
                                                            "sync": false,
                                                            "needReadable": true,
                                                            "emittedReadable": false,
                                                            "readableListening": true,
                                                            "objectMode": true,
                                                            "defaultEncoding": "utf8",
                                                            "ranOut": false,
                                                            "awaitDrain": 0,
                                                            "readingMore": false,
                                                            "decoder": null,
                                                            "encoding": null
                                                        },
                                                        "readable": true,
                                                        "domain": null,
                                                        "_events": {
                                                            "end": [null, null]
                                                        },
                                                        "_eventsCount": 4,
                                                        "_writableState": {
                                                            "highWaterMark": 16,
                                                            "objectMode": true,
                                                            "needDrain": false,
                                                            "ending": false,
                                                            "ended": false,
                                                            "finished": false,
                                                            "decodeStrings": true,
                                                            "defaultEncoding": "utf8",
                                                            "length": 0,
                                                            "writing": false,
                                                            "corked": 0,
                                                            "sync": true,
                                                            "bufferProcessing": false,
                                                            "writecb": null,
                                                            "writelen": 0,
                                                            "buffer": [],
                                                            "pendingcb": 0,
                                                            "prefinished": false,
                                                            "errorEmitted": false
                                                        },
                                                        "writable": true,
                                                        "allowHalfOpen": true,
                                                        "_transformState": {
                                                            "needTransform": true,
                                                            "transforming": false,
                                                            "writecb": null,
                                                            "writechunk": null
                                                        },
                                                        "_destroyed": false
                                                    }],
                                                    "length": 1,
                                                    "label": "debug"
                                                },
                                                "pipesCount": 1,
                                                "flowing": true,
                                                "ended": false,
                                                "endEmitted": false,
                                                "reading": true,
                                                "sync": false,
                                                "needReadable": true,
                                                "emittedReadable": false,
                                                "readableListening": false,
                                                "objectMode": true,
                                                "defaultEncoding": "utf8",
                                                "ranOut": false,
                                                "awaitDrain": 0,
                                                "readingMore": false,
                                                "decoder": null,
                                                "encoding": null,
                                                "resumeScheduled": false
                                            },
                                            "readable": true,
                                            "domain": null,
                                            "_events": {
                                                "end": [null, null, null],
                                                "finish": [null, null],
                                                "error": [null, null]
                                            },
                                            "_eventsCount": 8,
                                            "_writableState": {
                                                "highWaterMark": 16,
                                                "objectMode": true,
                                                "needDrain": false,
                                                "ending": false,
                                                "ended": false,
                                                "finished": false,
                                                "decodeStrings": true,
                                                "defaultEncoding": "utf8",
                                                "length": 0,
                                                "writing": false,
                                                "corked": 0,
                                                "sync": true,
                                                "bufferProcessing": false,
                                                "writecb": null,
                                                "writelen": 0,
                                                "buffer": [],
                                                "pendingcb": 0,
                                                "prefinished": false,
                                                "errorEmitted": false
                                            },
                                            "writable": true,
                                            "allowHalfOpen": true,
                                            "_options": "[Circular]",
                                            "_wrapOptions": {
                                                "objectMode": true
                                            },
                                            "_streams": [{
                                                "_readableState": {
                                                    "highWaterMark": 16,
                                                    "buffer": [],
                                                    "length": 0,
                                                    "pipes": null,
                                                    "pipesCount": 0,
                                                    "flowing": null,
                                                    "ended": false,
                                                    "endEmitted": false,
                                                    "reading": true,
                                                    "sync": false,
                                                    "needReadable": true,
                                                    "emittedReadable": false,
                                                    "readableListening": true,
                                                    "objectMode": true,
                                                    "defaultEncoding": "utf8",
                                                    "ranOut": false,
                                                    "awaitDrain": 0,
                                                    "readingMore": false,
                                                    "decoder": null,
                                                    "encoding": null
                                                },
                                                "readable": true,
                                                "domain": null,
                                                "_events": {
                                                    "end": [null, null]
                                                },
                                                "_eventsCount": 4,
                                                "_writableState": {
                                                    "highWaterMark": 16,
                                                    "objectMode": true,
                                                    "needDrain": false,
                                                    "ending": false,
                                                    "ended": false,
                                                    "finished": false,
                                                    "decodeStrings": true,
                                                    "defaultEncoding": "utf8",
                                                    "length": 0,
                                                    "writing": false,
                                                    "corked": 0,
                                                    "sync": true,
                                                    "bufferProcessing": false,
                                                    "writecb": null,
                                                    "writelen": 0,
                                                    "buffer": [],
                                                    "pendingcb": 0,
                                                    "prefinished": false,
                                                    "errorEmitted": false
                                                },
                                                "writable": true,
                                                "allowHalfOpen": true,
                                                "_transformState": {
                                                    "needTransform": true,
                                                    "transforming": false,
                                                    "writecb": null,
                                                    "writechunk": null
                                                },
                                                "_destroyed": false
                                            }],
                                            "length": 1,
                                            "label": "emit-deps"
                                        },
                                        "pipesCount": 1,
                                        "flowing": true,
                                        "ended": false,
                                        "endEmitted": false,
                                        "reading": true,
                                        "sync": false,
                                        "needReadable": true,
                                        "emittedReadable": false,
                                        "readableListening": false,
                                        "objectMode": true,
                                        "defaultEncoding": "utf8",
                                        "ranOut": false,
                                        "awaitDrain": 0,
                                        "readingMore": false,
                                        "decoder": null,
                                        "encoding": null,
                                        "resumeScheduled": false
                                    },
                                    "readable": true,
                                    "domain": null,
                                    "_events": {
                                        "end": [null, null, null],
                                        "finish": [null, null],
                                        "error": [null, null]
                                    },
                                    "_eventsCount": 8,
                                    "_writableState": {
                                        "highWaterMark": 16,
                                        "objectMode": true,
                                        "needDrain": false,
                                        "ending": false,
                                        "ended": false,
                                        "finished": false,
                                        "decodeStrings": true,
                                        "defaultEncoding": "utf8",
                                        "length": 0,
                                        "writing": false,
                                        "corked": 0,
                                        "sync": true,
                                        "bufferProcessing": false,
                                        "writecb": null,
                                        "writelen": 0,
                                        "buffer": [],
                                        "pendingcb": 0,
                                        "prefinished": false,
                                        "errorEmitted": false
                                    },
                                    "writable": true,
                                    "allowHalfOpen": true,
                                    "_options": "[Circular]",
                                    "_wrapOptions": {
                                        "objectMode": true
                                    },
                                    "_streams": [{
                                        "_readableState": {
                                            "highWaterMark": 16,
                                            "buffer": [],
                                            "length": 0,
                                            "pipes": null,
                                            "pipesCount": 0,
                                            "flowing": null,
                                            "ended": false,
                                            "endEmitted": false,
                                            "reading": true,
                                            "sync": false,
                                            "needReadable": true,
                                            "emittedReadable": false,
                                            "readableListening": true,
                                            "objectMode": true,
                                            "defaultEncoding": "utf8",
                                            "ranOut": false,
                                            "awaitDrain": 0,
                                            "readingMore": false,
                                            "decoder": null,
                                            "encoding": null
                                        },
                                        "readable": true,
                                        "domain": null,
                                        "_events": {
                                            "end": [null, null]
                                        },
                                        "_eventsCount": 4,
                                        "_writableState": {
                                            "highWaterMark": 16,
                                            "objectMode": true,
                                            "needDrain": false,
                                            "ending": false,
                                            "ended": false,
                                            "finished": false,
                                            "decodeStrings": true,
                                            "defaultEncoding": "utf8",
                                            "length": 0,
                                            "writing": false,
                                            "corked": 0,
                                            "sync": true,
                                            "bufferProcessing": false,
                                            "writecb": null,
                                            "writelen": 0,
                                            "buffer": [],
                                            "pendingcb": 0,
                                            "prefinished": false,
                                            "errorEmitted": false
                                        },
                                        "writable": true,
                                        "allowHalfOpen": true,
                                        "_transformState": {
                                            "needTransform": true,
                                            "transforming": false,
                                            "writecb": null,
                                            "writechunk": null
                                        },
                                        "_destroyed": false
                                    }],
                                    "length": 1,
                                    "label": "label"
                                },
                                "pipesCount": 1,
                                "flowing": true,
                                "ended": false,
                                "endEmitted": false,
                                "reading": true,
                                "sync": false,
                                "needReadable": true,
                                "emittedReadable": false,
                                "readableListening": false,
                                "objectMode": true,
                                "defaultEncoding": "utf8",
                                "ranOut": false,
                                "awaitDrain": 0,
                                "readingMore": false,
                                "decoder": null,
                                "encoding": null,
                                "resumeScheduled": false
                            },
                            "readable": true,
                            "domain": null,
                            "_events": {
                                "end": [null, null, null],
                                "finish": [null, null],
                                "error": [null, null]
                            },
                            "_eventsCount": 8,
                            "_writableState": {
                                "highWaterMark": 16,
                                "objectMode": true,
                                "needDrain": false,
                                "ending": false,
                                "ended": false,
                                "finished": false,
                                "decodeStrings": true,
                                "defaultEncoding": "utf8",
                                "length": 0,
                                "writing": false,
                                "corked": 0,
                                "sync": true,
                                "bufferProcessing": false,
                                "writecb": null,
                                "writelen": 0,
                                "buffer": [],
                                "pendingcb": 0,
                                "prefinished": false,
                                "errorEmitted": false
                            },
                            "writable": true,
                            "allowHalfOpen": true,
                            "_options": "[Circular]",
                            "_wrapOptions": {
                                "objectMode": true
                            },
                            "_streams": [{
                                "_readableState": {
                                    "highWaterMark": 16,
                                    "buffer": [],
                                    "length": 0,
                                    "pipes": null,
                                    "pipesCount": 0,
                                    "flowing": null,
                                    "ended": false,
                                    "endEmitted": false,
                                    "reading": true,
                                    "sync": false,
                                    "needReadable": true,
                                    "emittedReadable": false,
                                    "readableListening": true,
                                    "objectMode": true,
                                    "defaultEncoding": "utf8",
                                    "ranOut": false,
                                    "awaitDrain": 0,
                                    "readingMore": false,
                                    "decoder": null,
                                    "encoding": null
                                },
                                "readable": true,
                                "domain": null,
                                "_events": {
                                    "end": [null, null]
                                },
                                "_eventsCount": 4,
                                "_writableState": {
                                    "highWaterMark": 16,
                                    "objectMode": true,
                                    "needDrain": false,
                                    "ending": false,
                                    "ended": false,
                                    "finished": false,
                                    "decodeStrings": true,
                                    "defaultEncoding": "utf8",
                                    "length": 0,
                                    "writing": false,
                                    "corked": 0,
                                    "sync": true,
                                    "bufferProcessing": false,
                                    "writecb": null,
                                    "writelen": 0,
                                    "buffer": [],
                                    "pendingcb": 0,
                                    "prefinished": false,
                                    "errorEmitted": false
                                },
                                "writable": true,
                                "allowHalfOpen": true,
                                "_transformState": {
                                    "needTransform": true,
                                    "transforming": false,
                                    "writecb": null,
                                    "writechunk": null
                                },
                                "_destroyed": false
                            }],
                            "length": 1,
                            "label": "dedupe"
                        },
                        "pipesCount": 1,
                        "flowing": true,
                        "ended": false,
                        "endEmitted": false,
                        "reading": true,
                        "sync": false,
                        "needReadable": true,
                        "emittedReadable": false,
                        "readableListening": false,
                        "objectMode": true,
                        "defaultEncoding": "utf8",
                        "ranOut": false,
                        "awaitDrain": 0,
                        "readingMore": false,
                        "decoder": null,
                        "encoding": null,
                        "resumeScheduled": false
                    },
                    "readable": true,
                    "domain": null,
                    "_events": {
                        "end": [null, null, null],
                        "finish": [null, null],
                        "error": [null, null]
                    },
                    "_eventsCount": 8,
                    "_writableState": {
                        "highWaterMark": 16,
                        "objectMode": true,
                        "needDrain": false,
                        "ending": false,
                        "ended": false,
                        "finished": false,
                        "decodeStrings": true,
                        "defaultEncoding": "utf8",
                        "length": 0,
                        "writing": false,
                        "corked": 0,
                        "sync": false,
                        "bufferProcessing": false,
                        "writecb": null,
                        "writelen": 0,
                        "buffer": [],
                        "pendingcb": 0,
                        "prefinished": false,
                        "errorEmitted": false
                    },
                    "writable": true,
                    "allowHalfOpen": true,
                    "_options": "[Circular]",
                    "_wrapOptions": {
                        "objectMode": true
                    },
                    "_streams": [{
                        "_readableState": {
                            "highWaterMark": 16,
                            "buffer": [],
                            "length": 0,
                            "pipes": null,
                            "pipesCount": 0,
                            "flowing": null,
                            "ended": false,
                            "endEmitted": false,
                            "reading": false,
                            "sync": false,
                            "needReadable": true,
                            "emittedReadable": false,
                            "readableListening": true,
                            "objectMode": true,
                            "defaultEncoding": "utf8",
                            "ranOut": false,
                            "awaitDrain": 0,
                            "readingMore": false,
                            "decoder": null,
                            "encoding": null
                        },
                        "readable": true,
                        "domain": null,
                        "_events": {
                            "end": [null, null]
                        },
                        "_eventsCount": 4,
                        "_writableState": {
                            "highWaterMark": 16,
                            "objectMode": true,
                            "needDrain": false,
                            "ending": false,
                            "ended": false,
                            "finished": false,
                            "decodeStrings": true,
                            "defaultEncoding": "utf8",
                            "length": 0,
                            "writing": false,
                            "corked": 0,
                            "sync": true,
                            "bufferProcessing": false,
                            "writecb": null,
                            "writelen": 0,
                            "buffer": [],
                            "pendingcb": 0,
                            "prefinished": false,
                            "errorEmitted": false
                        },
                        "writable": true,
                        "allowHalfOpen": true,
                        "_transformState": {
                            "needTransform": true,
                            "transforming": false,
                            "writecb": null,
                            "writechunk": null,
                            "writeencoding": "utf8"
                        },
                        "_destroyed": false
                    }],
                    "length": 1,
                    "label": "sort"
                },
                "pipesCount": 1,
                "flowing": true,
                "ended": false,
                "endEmitted": false,
                "reading": true,
                "sync": false,
                "needReadable": true,
                "emittedReadable": false,
                "readableListening": false,
                "objectMode": true,
                "defaultEncoding": "utf8",
                "ranOut": false,
                "awaitDrain": 0,
                "readingMore": false,
                "decoder": null,
                "encoding": null,
                "resumeScheduled": false
            },
            "readable": true,
            "domain": null,
            "_events": {
                "end": [null, null, null],
                "finish": [null],
                "error": [null]
            },
            "_eventsCount": 5,
            "_writableState": {
                "highWaterMark": 16,
                "objectMode": true,
                "needDrain": false,
                "ending": false,
                "ended": false,
                "finished": false,
                "decodeStrings": true,
                "defaultEncoding": "utf8",
                "length": 1,
                "writing": true,
                "corked": 0,
                "sync": false,
                "bufferProcessing": false,
                "writelen": 1,
                "buffer": [],
                "pendingcb": 1,
                "prefinished": false,
                "errorEmitted": false
            },
            "writable": true,
            "allowHalfOpen": true,
            "_options": "[Circular]",
            "_wrapOptions": {
                "objectMode": true
            },
            "_streams": [{
                "_readableState": {
                    "highWaterMark": 16,
                    "buffer": [],
                    "length": 0,
                    "pipes": null,
                    "pipesCount": 0,
                    "flowing": null,
                    "ended": false,
                    "endEmitted": false,
                    "reading": true,
                    "sync": false,
                    "needReadable": true,
                    "emittedReadable": false,
                    "readableListening": true,
                    "objectMode": true,
                    "defaultEncoding": "utf8",
                    "ranOut": false,
                    "awaitDrain": 0,
                    "readingMore": false,
                    "decoder": null,
                    "encoding": null
                },
                "readable": true,
                "domain": null,
                "_events": {
                    "end": [null, null]
                },
                "_eventsCount": 4,
                "_writableState": {
                    "highWaterMark": 16,
                    "objectMode": true,
                    "needDrain": false,
                    "ending": false,
                    "ended": false,
                    "finished": false,
                    "decodeStrings": true,
                    "defaultEncoding": "utf8",
                    "length": 0,
                    "writing": false,
                    "corked": 0,
                    "sync": true,
                    "bufferProcessing": false,
                    "writecb": null,
                    "writelen": 0,
                    "buffer": [],
                    "pendingcb": 0,
                    "prefinished": false,
                    "errorEmitted": false
                },
                "writable": true,
                "allowHalfOpen": true,
                "_transformState": {
                    "needTransform": true,
                    "transforming": true,
                    "writechunk": {
                        "id": "/Users/mdell/Work/Repos/web/assets/images/pictureTile_delete.png",
                        "source": "�PNG\r\n\u001a\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0000\u001c\u0000\u0000\u0000\u001c\b\u0006\u0000\u0000\u0000r\rߔ\u0000\u0000\u0000\u0004gAMA\u0000\u0000��\u000b�a\u0005\u0000\u0000\u0001\u0015IDATH\r�VQ\u000e� \f%�\u0018���v\u000f�\t���sb�Hm;BlR���\u001e\u0015�\u0010�u}�\u0017�\f����s���+��A�\u000f\u0006S/Mp=��L�P����E\u0014��\u00185f\nFx�\n�[��\u0014�31j��\f�i\u0017��0W�@��ԉ�\u0006�9̀L܍�\u0000=�l��\u0007I�\u000f@Yr\u000b�:�\u0010irj^1�\b�9��j\u0012ĭ��ڻ�:\u001a���a��-D�\u0000�g\u0007��&�GM|�X��\u0015�LU�E�lܡ��پm�Hsb\u0005�I\r�&��_|�\u0010Yr\u000b�\u0014x\b<�M�\r\u0004ڌ5\u0003�/��j\u000eubF�\u001a^r!!�y�s���A����?��8�\"<���\u0005�U��\\V\u0000T\u0000\u0000\u0000\u0000IEND�B`�",
                        "deps": {},
                        "file": "/Users/mdell/Work/Repos/web/assets/images/pictureTile_delete.png"
                    },
                    "writeencoding": "utf8"
                },
                "_destroyed": false
            }],
            "length": 1,
            "label": "syntax"
        }
    },
    "msg": "Unexpected character '�'",
    "time": "2016-01-16T21:47:48.214Z",
    "v": 0
}

My assumption is this is happening because I am using require for images which is then being picked up somewhere during compilation.

Here is the render method where it is being used:

    render() {
        return (
            <div>
                <div className={this.state.hideOrShowCookieMsg}>
                        <div className='btn-close' value='close' onClick={::this._hidePolicyMsg}>
                            <span>
                                <img src={require('../../../assets/images/pictureTile_delete.png')}/>
                            </span>
                        </div>
                        <div className='container'>
                            <h2 className='header-alert-title'>{_.get(this.props.content, 'cookiePolicyMessage.title')}</h2>
                            {HtmlUtils.htmlToReact(_.get(this.props.content, 'cookiePolicyMessage.content'))}
                        </div>
                    </div>
            </div>
        );
    }

Am I missing a config option or something that can help this?

Make components editable

I think it would be great if components / components props could be changed on the fly.

I have seen this in https://github.com/morlay/react-docgen-ui and think that it allows a much better exploration of the content.

Examples not working

when I run 'npm start', it complains that it can't find module 'minimist'.

Fails to install with React v.0.14.0-rc1

I'm getting the following error when trying to install the style guide with React version 0.14.0-rc1:

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@>=0.13

Is there any chance that the requirements could be updated to allow version 0.14.0-rc1 to be used?

Working with react-hot-loader

Thanks for creating this amazing tool!

We love it so much that we want to use it as a playground when we develop our react component library. But we couldn't find a way to integrate rsg with react-hot-loader, which requires webpack.

Is there an easy way to do this? Or maybe we can extract the core logics from rsg to a separate module so we can develop a webpack loader using that?

Update to babel 6

Now that babel 6 is out, would be good to upgrade styleguide-generator to use the new version

Example failing out-of-the-box: "Using removed Babel 5 option: base.stage"

Hey there, I'm just trying to run the basic example included in the README:

git clone [email protected]:pocotan001/react-styleguide-generator.git
cd react-styleguide-generator/example/
npm install
npm start

npm start fails and I traced it all the way to rsg failing with this error message:

    "msg": "[BABEL] ~/react-styleguide-generator/example/styleguide/src/contents-inter.js: Using removed Babel 5 option: base.stage - Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets while parsing file: ~/react-styleguide-generator/example/styleguide/src/contents-inter.js",

I tried this twice on clean installs, both removing and reinstalling react via NPM. Any ideas?

How to remove `styleguide` static field on production environment?

The styleguide field may contain some big data, but that is useless on production environment.

Referencing images in webpack throws an error

wrong repo, sorry