Many new features (v1.1?)

README.md

@@ -18,30 +18,48 @@ Which requires **React 0.13.0** 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](https://babeljs.io/docs/usage/babelrc/) or [options.babelConfig](#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](https://github.com/lukehoban/es6features) by [Babel](https://babeljs.io/).
 
-**NOTE:** By default Babel's `static` keyword is disabled. You can turn them on individually by passing `stage 0` as a [babelrc](https://babeljs.io/docs/usage/babelrc/) or [options.babelConfig](#babelconfig).
-
 ``` js
 import React from 'react'
 import Button from './Button'
 
 export default class extends React.Component {
+
+  // required for prop documentation
+  static displayName = 'ExampleButton'
+
   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'
+    className: 'apply the css class',
+    // Used in the first 'Example' tab
+    code: `<Button size='small|large' onClick={Function}>Cool Button</Button>`
+  }
+
+  // Document the props via react-docgen
+  static propTypes = {
+    /**
+     * Header title
+     */
+    header: React.propTypes.object,
+    /**
+     * Panel style class
+     */
+    bsStyle: React.propTypes.string
   }
 
   onClick () {
     alert('Alo!')
   }
 
+  //Used for the first 'Example' tab
   render () {
     return (
       <Button size='large' onClick={this.onClick}>Cool Button</Button>
@@ -54,9 +72,54 @@ export default class extends React.Component {
 - `category`: Components category name
 - `title`: Components title
 - `description`: Components description (optional)
-- `code`: Code examples (optional)
+- `code`: Code example (optional). Not specifying this will not auto-generate an example.
 - `className`: CSS class name (optional)
 
+#### Additional examples in tabs (optional)
+
+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 {
+
+  // required for prop documentation
+  static displayName = 'ExampleButton'
+
+  static styleguide = {
+    ...
+
+    // Component to use for generating additional examples
+    exampleComponent: Button,
+    // Array of additional example tabs
+    examples: [
+      {
+        tabTitle: 'Tab title',
+        props: {
+          size: 'small',
+          onClick () {
+            alert('o hay!')
+          }
+        }
+        //code: This is optional; by omitting it, the RSG will attempt to auto-generate an example using the props!
+      }
+    ]
+  }
+
+  ...
+}
+```
+
+- `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`
+
+
 If necessary, visit [react-styleguide-generator/example](https://github.com/pocotan001/react-styleguide-generator/tree/master/example) to see more complete examples for the documenting syntax.
 
 ### Generating the documentation
@@ -83,9 +146,13 @@ Options:
   -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'
+  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
@@ -110,6 +177,41 @@ gulp.task('styleguide', function (done) {
 })
 ```
 
+#### Grunt
+
+``` js
+var RSG = require('react-styleguide-generator')
+
+...
+
+grunt.registerTask('rsg', 'React style guide', function () {
+  var done = this.async()
+
+  try {
+
+    var conf = grunt.config.get('rsg')
+
+    RSG(conf.input, {
+        config: conf.configFile,
+        watch: false,
+        verbose: true
+    }).generate(function (err) {
+        if (err) {
+            grunt.log.error('Error: ' + err + ' ' + err.stack())
+            return done(false)
+        }
+
+        grunt.log.ok('react styleguide generation complete')
+        done()
+    })
+
+  } catch (e) {
+    grunt.log.error('Error: ' + e + ' ' + e.stack)
+    done(false)
+  }
+})
+```
+
 ## API
 
 ### RSG(input, [options])
@@ -138,6 +240,13 @@ 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`  
@@ -191,11 +300,13 @@ Inject file references into index.html if the files with the extension `.css` or
 
 ##### config
 
-Type: `String`  
+Type: `String|Object`  
 Default: `styleguide.json`
 
 The entire range of RSG API options is allowed. [Usage example](https://github.com/pocotan001/react-styleguide-generator/blob/master/example/styleguide.json).
 
+An object can be passed instead of a filename that contains the RSG API options.
+
 ##### pushstate
 
 Type: `String`  
@@ -231,6 +342,13 @@ A usage example is below. See the [browserify docs](https://github.com/substack/
 }
 ```
 
+### watch
+
+Type: `String`
+Default: `false`
+
+Enables `watchify` for when the `input` files change, speeding up rebuild time.
+
 ### rsg.generate([callback])
 
 Generate the files and their dependencies into a styleguide output.
@@ -247,3 +365,9 @@ npm start
 ```
 
 Visit [http://localhost:3000/](http://localhost:3000/) in your browser.
+
+## Troubleshooting
+
+### Error: No suitable component definition found.
+
+Make sure your component contains `displayName` and `render()`.

app/common/react-simpletabs.css

@@ -0,0 +1,49 @@
+/* =============================================================================
+  An example of how stylize the tabs
+============================================================================= */
+
+.tabs-navigation {
+    padding: 0 50px;
+}
+
+.tabs-navigation {
+    padding: 0 10px;
+    max-height: 62px;
+    border-bottom: 1px solid #DDD;
+}
+
+.tabs-menu {
+    display: table;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.tabs-menu-item {
+    float: left;
+}
+
+.tab-panel {
+    margin: 20px;
+}
+
+.tabs-menu-item a {
+    display: block;
+    padding: 0 30px;
+    height: 30px;
+    line-height: 30px;
+    border-bottom: 0;
+    color: #A9A9A9;
+}
+
+.tabs-menu-item:not(.is-active) a:hover {
+    color: #3498db;
+}
+
+.tabs-menu-item.is-active a {
+    background: #fff;
+    border: 1px solid #DDD;
+    border-top: 2px solid #3498db;
+    border-bottom: 0;
+    color: #333;
+}

app/components/Section/index.css

@@ -187,16 +187,29 @@
   border-bottom: 1px solid var(--gray-lighter);
 }
 
+.sg-tabbed.sg-section-example {
+  padding: 20px 0 0 0;
+  border: 1px solid var(--gray-lighter);
+  margin-top: 10px;
+}
+
 /**
  * Code
  */
 
 .sg-section-code {
-  border-bottom: 1px solid var(--gray-lighter);
+  border: 1px solid var(--gray-lighter);
+  margin-top: 10px;
 }
 
+.sg-tabbed .sg-section-code {
+  margin-top: 0;
+}
+
+
 .sg-section-code code {
   padding: 20px;
   background: var(--white);
   font-family: monospace;
+  display: block;
 }