Merge pull request #5 from TechnologyAdvice/feature/field-options

Field options

.gitignore

@@ -4,3 +4,5 @@ npm-debug.log
 node_modules/
 bower_components/
 testBundle.js
+docs/build
+docgenInfo.json

README.md

@@ -18,7 +18,14 @@
 npm i stardust -S
 ```
 
-## Commands
+## Develop
+
+### Commands
+
+```
+npm run                   # list npm commands 
+gulp help                 # list npm commands
+```
 
 ### Deploying
 

dev-env.js

@@ -0,0 +1,10 @@
+var host = 'localhost';
+var port = '8080';
+var protocol = 'http';
+
+module.exports = {
+  host: host,
+  port: port,
+  protocol: protocol,
+  serverUrl: protocol + '://' + host + ':' + port
+};

docs/app/Component/ComponentList.js

@@ -1,20 +1,37 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
+import Button from 'src/components/Button/Button';
 
 import docgenInfo from './../docgenInfo';
 import ComponentDescription from './ComponentDescription';
 import ComponentExamples from './ComponentExamples';
 import ComponentProps from './ComponentProps';
-
 /**
  * A list of Components' documentation.
  */
 class ComponentList extends Component {
+  state = {
+    showDocgenJSON: false
+  };
+
+  toggleShowDocgenJSON = () => {
+    this.setState({
+      showDocgenJSON: !this.state.showDocgenJSON
+    });
+  };
+
   render() {
     let components = _.map(docgenInfo, (val, key) => {
       var filename = key.substr(key.lastIndexOf('/') + 1).replace(/\.js$/, '');
       var examples = _.map(_.filter(val.docBlock.tags, {title: 'example'}), 'description');
 
+      var docgenJSON = (
+        <div>
+          <div className='ui divider' />
+          <pre>{JSON.stringify(val, null, 2)}</pre>
+        </div>
+      );
+
       return (
         <div key={key} className='ui segment'>
           <h2 className='ui header'>
@@ -29,8 +46,9 @@ class ComponentList extends Component {
           <h3>Props:</h3>
           <ComponentProps props={val.props} />
 
-          <div className='ui divider' />
-          <pre>{JSON.stringify(val, null, 2)}</pre>
+          <Button onClick={this.toggleShowDocgenJSON}>JSON</Button>
+
+          {this.state.showDocgenJSON && docgenJSON}
         </div>
       );
     });