adds code example sinppets and rendered components

docs/app/Component/ComponentExamples.js

@@ -1,29 +1,21 @@
 import _ from 'lodash';
 import React, {Component, PropTypes} from 'react';
+import getExamples from '../Example/GetExamples';
+import Example from '../Example/Example';
 
-/**
- * Lists a Component's @example tags in colored code blocks.
- */
-class ComponentExamples extends Component {
+export default class extends Component {
   static propTypes = {
-    /**
-     * Array of strings of example content.
-     */
-    examples: PropTypes.array
+    componentName: PropTypes.array
   };
 
   render() {
-    let examples = _.map(this.props.examples, (example, i) => {
-      let lines = _.map(example.split('\n'), (line, j) => <div key={j}>{line}</div>);
-      return <pre key={i} className='ui green segment'>{lines}</pre>;
-    });
+    let examples = getExamples(this.props.componentName);
+    let contents = _.map(examples, (example, i) => <Example key={i} {...example} />);
 
     return (
       <div>
-        {examples}
+        {contents}
       </div>
     );
   }
 }
-
-export default ComponentExamples;

docs/app/Component/ComponentList.js

@@ -1,11 +1,13 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
-import Button from 'src/components/Button/Button';
+import {Button, Segment} from 'index';
 
 import docgenInfo from './../docgenInfo';
 import ComponentDescription from './ComponentDescription';
 import ComponentExamples from './ComponentExamples';
 import ComponentProps from './ComponentProps';
+import Highlight from 'react-highlight/index';
+
 /**
  * A list of Components' documentation.
  */
@@ -21,32 +23,34 @@ class ComponentList extends Component {
   };
 
   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');
+    let components = _.map(docgenInfo, (definition, name) => {
+      var filename = name.substr(name.lastIndexOf('/') + 1).replace(/\.js$/, '');
 
       var docgenJSON = (
-        <div>
-          <div className='ui divider' />
-          <pre>{JSON.stringify(val, null, 2)}</pre>
-        </div>
+        <Highlight className='language-json'>
+          {JSON.stringify(definition, null, 2)}
+        </Highlight>
       );
 
       return (
-        <div key={key} className='ui segment'>
+        <div key={name} className='ui segment'>
           <h2 className='ui header'>
             {filename}
-            <small className='sub header' style={{float: 'right'}}>{key}</small>
+            <small className='sub header' style={{float: 'right'}}>{name}</small>
           </h2>
 
           <h3>Description:</h3>
-          <ComponentDescription description={val.docBlock.description} />
-          <h3>Examples:</h3>
-          <ComponentExamples examples={examples} />
+          <ComponentDescription description={definition.docBlock.description} />
           <h3>Props:</h3>
-          <ComponentProps props={val.props} />
+          <ComponentProps props={definition.props} />
+          <h3>Examples:</h3>
+          <ComponentExamples componentName={filename} />
 
-          <Button onClick={this.toggleShowDocgenJSON}>JSON</Button>
+          <Segment className='basic vertical'>
+            <Button className='right floated basic mini' onClick={this.toggleShowDocgenJSON}>
+              Docgen
+            </Button>
+          </Segment>
 
           {this.state.showDocgenJSON && docgenJSON}
         </div>

docs/app/DocsApp.js

@@ -1,18 +1,13 @@
 import React, {Component, render} from 'react';
+import {Column, Container, Grid} from 'index';
 import ComponentList from './Component/ComponentList';
-import Container from 'src/components/Container/Container';
-import Grid from 'src/components/Grid/Grid';
-import Column from 'src/components/Grid/Column';
 
 class DocsApp extends Component {
   render() {
     return (
       <Container>
-        <Grid>
+        <Grid className='one column'>
           <Column>
-            <h1>
-              Stardust Components
-            </h1>
             <ComponentList />
           </Column>
         </Grid>

docs/app/Example/Example.js

@@ -0,0 +1,48 @@
+import React, {Component, createElement, PropTypes} from 'react';
+import {Segment, Button} from 'index.js';
+import Highlight from 'react-highlight/index';
+
+/**
+ * Renders a `component` and the raw `code` that produced it.
+ */
+export default class extends Component {
+  static propTypes = {
+    /**
+     * The raw string of code that created the component.
+     */
+    code: PropTypes.string,
+    /**
+     * A React Component demonstrating how to use a component.
+     */
+    component: PropTypes.node,
+  };
+
+  state = {showCode: false};
+
+  toggleShowCode = () => {
+    this.setState({showCode: !this.state.showCode});
+  };
+
+  render() {
+    let code = (
+      <Highlight className='language-javascript'>
+        {this.props.code}
+      </Highlight>
+    );
+
+    return (
+      <Segment className='vertical segment'>
+        <Segment className='basic vertical'>
+          {createElement(this.props.component)}
+        </Segment>
+        <Segment className='basic vertical'>
+          <Button className='basic mini labeled icon' onClick={this.toggleShowCode}>
+            Code
+            <i className='code icon' />
+          </Button>
+        </Segment>
+        {this.state.showCode && code}
+      </Segment>
+    );
+  }
+}

docs/app/Example/GetExamples.js

@@ -0,0 +1,19 @@
+const req = require.context('docs/app/examples/', true, /\.js$/);
+
+/**
+ * Parse example files for a give `component`.
+ * @param {string} component The name of the component to fetch example files for.
+ * @returns {[]} An array of object with the file `code` as text and exported `component` as a React Component.
+ */
+export default component => {
+  let modulePaths = _.map(_.filter(req.keys(), path => _.contains(path, `/${component}/`)));
+
+  return _.map(modulePaths, (path) => {
+    // remove first dot slash from paths which look like "./Checkbox/BasicExample.js"
+    let subpath = path.replace('./', '');
+    return {
+      code: require(`!raw!docs/app/examples/${subpath}`),
+      component: req(path),
+    };
+  });
+};

docs/app/examples/Checkbox/BasicExample.js

@@ -0,0 +1,10 @@
+import React, {Component} from 'react';
+import {Checkbox} from 'stardust';
+
+export default class extends Component {
+  render() {
+    return (
+      <Checkbox />
+    );
+  }
+}

docs/app/examples/Checkbox/SliderExample.js

@@ -0,0 +1,8 @@
+import React, {Component} from 'react';
+import {Checkbox} from 'stardust';
+
+export default class extends Component {
+  render() {
+    return <Checkbox type='slider' />;
+  }
+}

docs/app/examples/Checkbox/Toggle.js

@@ -0,0 +1,8 @@
+import React, {Component} from 'react';
+import {Checkbox} from 'stardust';
+
+export default class extends Component {
+  render() {
+    return <Checkbox type='toggle' />;
+  }
+}

docs/app/index.html

@@ -4,15 +4,22 @@
   <title>Stardust Docs</title>
 
   <link rel="stylesheet" href="//d6xw8h2ajn62r.cloudfront.net/0.1.2/css/radiant.min.css" />
+  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.8.0/styles/androidstudio.min.css">
 
   <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/Faker/3.0.1/faker.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.0/semantic.min.js"></script>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/bluebird/2.9.33/bluebird.min.js"></script>
+
   <!-- build:development-->
   <script src="/webpack-dev-server.js"></script>
   <!-- endbuild -->
 
 </head>
 <body>
-<script src="app.js"></script>
-<script src="vendor.js"></script>
+  <script src="app.js"></script>
+  <script src="vendor.js"></script>
 </body>
 </html>

index.js

@@ -1,6 +1,7 @@
 import Button from './src/components/Button/Button';
 import Checkbox from './src/components/Checkbox/Checkbox';
 import Column from './src/components/Grid/Column';
+import Container from './src/components/Container/Container';
 import ConfirmationModal from './src/components/ConfirmationModal/ConfirmationModal';
 import Field from './src/components/Field/Field';
 import Form from './src/components/Form/Form';
@@ -26,6 +27,7 @@ export default {
   Button,
   Checkbox,
   Column,
+  Container,
   ConfirmationModal,
   Field,
   Form,

package.json

@@ -32,9 +32,10 @@
   "dependencies": {
     "bluebird": "^2.10.2",
     "classnames": "^2.1.5",
-    "jquery": "^2.1.4",
+    "highlight.js": "^8.8.0",
     "lodash": "^3.10.1",
     "react": "^0.13.3",
+    "react-highlight": "^0.5.0",
     "react-router": "^0.13.3"
   },
   "devDependencies": {
@@ -64,13 +65,13 @@
     "karma-phantomjs-launcher": "^0.2.1",
     "karma-sourcemap-loader": "^0.3.5",
     "karma-webpack": "^1.7.0",
-    "lodash": "^3.10.1",
     "mocha": "^2.3.3",
     "mocha-loader": "^0.7.1",
     "phantomjs": "^1.9.18",
     "phantomjs-polyfill": "0.0.1",
     "pre-commit": "^1.1.1",
     "radium": "^0.14.1",
+    "raw-loader": "^0.5.1",
     "react-docgen": "^2.2.0",
     "react-hot-loader": "^1.3.0",
     "require-dir": "^0.3.0",

src/components/Button/Button.js

@@ -1,20 +1,29 @@
 import React, {Component, PropTypes} from 'react';
+import classNames from 'classnames';
 
+/**
+ * A basic button.
+ */
 class Button extends Component {
   static propTypes = {
     children: PropTypes.string,
-    onClick: PropTypes.func,
-    type: React.PropTypes.oneOf(['button', 'submit']),
+    className: PropTypes.string,
   };
 
   static defaultProps = {
-    type: 'button',
     children: 'Click Here',
+    type: 'button'
   };
 
   render() {
+    let classes = classNames(
+      'sd-button',
+      'ui',
+      this.props.className,
+      'button'
+    );
     return (
-      <button className='sd-button ui blue button' {...this.props}>
+      <button {...this.props} className={classes}>
         {this.props.children}
       </button>
     );

src/components/Segment/Segment.js

@@ -1,18 +1,27 @@
 import radium from 'radium';
 import React, {Component, PropTypes} from 'react';
 import style from './Style';
+import classNames from 'classnames';
 
 @radium
 class Segment extends Component {
   static propTypes = {
     children: PropTypes.node,
+    className: PropTypes.string,
     heading: PropTypes.any,
   };
 
   render() {
     let heading = <h4 className='sd-segment-heading ui header'>{this.props.heading}</h4>;
+    let classes = classNames(
+      'sd-segment',
+      'ui',
+      this.props.className,
+      'segment'
+    );
+
     return (
-      <div className='sd-segment ui segment' style={[style.segmentBase]}>
+      <div className={classes} style={[style.segmentBase]}>
         {this.props.heading && heading}
         {this.props.children}
       </div>

src/components/Select/Select.js

@@ -8,6 +8,10 @@ class Select extends Component {
     value: PropTypes.string,
   };
 
+  static defaultProps = {
+    options: [],
+  };
+
   render() {
     let options = this.props.options.map((opt, i) => {
       return <option key={i} value={opt.value}>{opt.text}</option>;