Add sidebar and better layout for documentation

components/list/item.jsx

@@ -13,7 +13,8 @@ class ListItem extends React.Component {
     legend: React.PropTypes.string,
     rightIcon: React.PropTypes.string,
     ripple: React.PropTypes.bool,
-    selectable: React.PropTypes.bool
+    selectable: React.PropTypes.bool,
+    to: React.PropTypes.string
   };
 
   static defaultProps = {
@@ -34,24 +35,28 @@ class ListItem extends React.Component {
     }
   };
 
-  render () {
+  renderContent () {
     let className = style.item;
     if (this.props.legend) className += ` ${style['with-legend']}`;
     if (this.props.disabled) className += ` ${style.disabled}`;
-    if (this.props.selectable) className += ` ${style.selectable}`;
     if (this.props.className) className += ` ${this.props.className}`;
+    if (this.props.selectable) className += ` ${style.selectable}`;
 
     return (
-      <li
-        className={className}
-        onClick={this.handleClick}
-        onMouseDown={this.handleMouseDown}
-      >
+      <span className={className}>
         { this.props.leftIcon ? <FontIcon className={`${style.icon} ${style.left}`} value={this.props.leftIcon} /> : null }
         { this.props.avatar ? <img className={style.avatar} src={this.props.avatar} /> : null }
         <ListItemContent caption={this.props.caption} legend={this.props.legend} />
         { this.props.ripple ? <Ripple ref='ripple' className={style.ripple} spread={2} /> : null }
         { this.props.rightIcon ? <FontIcon className={`${style.icon} ${style.right}`} value={this.props.rightIcon} /> : null }
+      </span>
+    );
+  }
+
+  render () {
+    return (
+      <li onClick={this.handleClick} onMouseDown={this.handleMouseDown}>
+        { this.props.to ? <a href={this.props.to}>{this.renderContent()}</a> : this.renderContent() }
       </li>
     );
   }

components/list/subheader.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import style from './style';
 
-const ListSubHeader = ({ caption }) => (
-  <h5 className={style.subheader}>
-    { caption }
-  </h5>
-);
+const ListSubHeader = (props) => {
+  let className = style.subheader;
+  if (props.className) className += ` ${props.className}`;
+  return <h5 className={className}>{props.caption}</h5>;
+};
 
 ListSubHeader.propTypes = {
   caption: React.PropTypes.string

docs/app/app-routes.jsx

@@ -1,17 +1,17 @@
+/*eslint-disable no-unused-vars*/
 import React from 'react';
 import { App } from 'react-toolbox';
 import { Route, IndexRoute } from 'react-router';
-
 import Home from './components/layout/home';
 import Main from './components/layout/main';
-import Playground from './components/layout/playground';
-import Components from './components/layout/components';
+import Playground from './components/layout/main/playground';
+import Component from './components/layout/main/component';
 
 const Routes = (
   <Route component={App}>
     <Route path="/" component={Home} />
     <Route component={Main}>
-      <Route path="/components" component={Components} />
+      <Route path="/components/:component" component={Component} />
       <Route path="/playground" component={Playground} />
     </Route>
     <IndexRoute component={Home}/>

docs/app/app.jsx

@@ -5,12 +5,8 @@ import Router from 'react-router';
 import AppRoutes from './app-routes';
 import createHashHistory from 'history/lib/createHashHistory';
 
-const Docs = () => {
-  return (
-    <Router history={createHashHistory({queryKey: false})}>
-      {AppRoutes}
-    </Router>
-  );
-};
-
-ReactDOM.render(<Docs/>, document.getElementById('app'));
+ReactDOM.render(
+  <Router history={createHashHistory({queryKey: false})}>
+    {AppRoutes}
+  </Router>
+, document.getElementById('app'));

docs/app/components/layout/components.jsx

@@ -1,8 +0,0 @@
-/*eslint-disable no-unused-vars*/
-import React from 'react';
-
-const Components = () => {
-  return <p>List of components here</p>;
-};
-
-export default Components;

docs/app/components/layout/home/index.jsx

@@ -6,14 +6,12 @@ import Navigation from '../../navigation';
 
 const Home = () => {
   return (
-    <div>
-      <header className={style.hero}>
-        <Logo className={style.logo} />
-        <h2 className={style.title}>React Toolbox</h2>
-        <h4 className={style.subtitle}>Bootstrap your application with beautiful Material Design Components</h4>
-        <Navigation className={style.navigation} />
-      </header>
-    </div>
+    <header className={style.hero}>
+      <Logo className={style.logo} />
+      <h2 className={style.title}>React Toolbox</h2>
+      <h4 className={style.subtitle}>Bootstrap your application with beautiful Material Design Components</h4>
+      <Navigation className={style.navigation} />
+    </header>
   );
 };
 

docs/app/components/layout/main/appbar.jsx

@@ -0,0 +1,21 @@
+/*eslint-disable no-unused-vars*/
+import React from 'react';
+import { AppBar } from 'react-toolbox';
+import { Link } from 'react-router';
+import Logo from '../../logo';
+import Navigation from '../../navigation';
+import style from './style';
+
+const MainAppBar = () => {
+  return (
+    <AppBar className={style.appbar} flat fixed>
+      <Link to='/' className={style.brand}>
+        <Logo className={style.logo} /> React Toolbox
+      </Link>
+      <Navigation className={style.navigation}/>
+    </AppBar>
+  );
+};
+
+export default MainAppBar;
+

docs/app/components/layout/main/component.jsx

@@ -0,0 +1,16 @@
+/*eslint-disable no-unused-vars*/
+import React from 'react';
+import ToolboxComponents from './components';
+import style from './style';
+
+const Component = (props) => {
+  const html = { __html: ToolboxComponents[props.params.component].docs };
+  return (
+    <div
+      className={style.documentation}
+      dangerouslySetInnerHTML={html}
+    />
+  );
+};
+
+export default Component;

docs/app/components/layout/main/components.js

@@ -0,0 +1,21 @@
+import Autocomplete from 'react-toolbox/autocomplete/readme';
+import Button from 'react-toolbox/button/readme';
+import Card from 'react-toolbox/card/readme';
+
+export default {
+  autocomplete: {
+    name: 'Autocomplete',
+    docs: Autocomplete,
+    path: '/#/components/autocomplete'
+  },
+  button: {
+    name: 'Button',
+    docs: Button,
+    path: '/#/components/button'
+  },
+  card: {
+    name: 'Card',
+    docs: Card,
+    path: '/#/components/card'
+  }
+};

docs/app/components/layout/main/drawer.jsx

@@ -0,0 +1,27 @@
+/*eslint-disable no-unused-vars*/
+import React from 'react';
+import ToolboxComponents from './components';
+import { List, ListItem } from 'react-toolbox';
+import style from './style';
+
+const MainDrawer = () => {
+  const DrawerItems = Object.keys(ToolboxComponents).map((key) => {
+    const ToolboxComponent = ToolboxComponents[key];
+    return (
+      <ListItem
+        key={key}
+        caption={ToolboxComponent.name}
+        className={style.draweroption}
+        to={ToolboxComponent.path}
+      />
+    );
+  });
+
+  return (
+    <List className={style.drawer} ripple>
+      { DrawerItems }
+    </List>
+  );
+};
+
+export default MainDrawer;

docs/app/components/layout/main/index.jsx

@@ -1,34 +1,17 @@
 /*eslint-disable no-unused-vars*/
 import React from 'react';
-import { AppBar, List, ListItem, ListSubHeader } from 'react-toolbox';
-import { Link } from 'react-router';
-import Logo from './../../logo';
-import Navigation from './../../navigation';
+import MainAppBar from './appbar';
+import MainDrawer from './drawer';
 import style from './style';
 
 const Main = (props) => {
   return (
     <div>
-      <AppBar className={style.appbar} flat fixed>
-        <Link to='/' className={style.brand}>
-          <Logo className={style.logo} />
-          React Toolbox
-        </Link>
-        <Navigation className={style.navigation}/>
-      </AppBar>
-
-      <div className={style['content-wrapper']}>
-        <List className={style.drawer} selectable ripple>
-          <ListItem className={style['drawer-option']} caption='AppBar' />
-          <ListItem className={style['drawer-option']} caption='Autocomplete' />
-          <ListItem className={style['drawer-option']} caption='Button' />
-          <ListItem className={style['drawer-option']} caption='Cards' />
-        </List>
-
-        <div className={style.content}>
-          { props.children }
-        </div>
-      </div>
+      <MainAppBar />
+      <section className={style.mainwrapper}>
+        <MainDrawer />
+        { props.children }
+      </section>
     </div>
   );
 };

docs/app/components/layout/main/playground.jsx

@@ -1,9 +1,9 @@
 /*eslint-disable no-unused-vars*/
 import React from 'react';
-import code from '../../examples/example.txt';
-import Playground from '../playground';
+import Playground from '../../playground';
+import code from '../../../examples/example.txt';
 
-const Components = () => {
+const PlaygroundArea = () => {
   return (
     <section>
       <p>Here should be the playground</p>
@@ -12,4 +12,4 @@ const Components = () => {
   );
 };
 
-export default Components;
+export default PlaygroundArea;

docs/app/components/layout/main/style.scss

@@ -44,26 +44,24 @@
   }
 }
 
-.content-wrapper {
+.mainwrapper {
   display: flex;
   min-height: 100vh;
+  margin-top: $appbar-height;
 }
 
 .drawer {
   max-width: 22 * $unit;
   min-height: 100%;
-  margin-top: $appbar-height;
   border-right: 1px solid $color-divider;
 }
 
-.drawer-option {
+.draweroption {
   padding-left: $appbar-h-padding;
 }
 
-.content {
-  z-index: $z-index-low;
+.documentation {
   flex-grow: 1;
   padding: .8 * $unit $appbar-h-padding;
-  margin-top: $appbar-height;
   background-color: $color-content;
 }

docs/app/components/navigation/index.jsx

@@ -6,7 +6,7 @@ const Navigation = (props) => {
   return (
     <nav className={props.className}>
       <ul>
-        <li><Link to='/components'>Components</Link></li>
+        <li><Link to='/components/autocomplete'>Components</Link></li>
         <li><Link to='/playground'>Playground</Link></li>
         <li><a href='http://www.github.com/react-toolbox/react-toolbox' target='_blank'>Github</a></li>
       </ul>

docs/package.json

@@ -21,7 +21,9 @@
     "babel-loader": "^5.3.2",
     "css-loader": "^0.21.0",
     "extract-text-webpack-plugin": "^0.8.2",
+    "html-loader": "^0.3.0",
     "html-webpack-plugin": "^1.6.2",
+    "markdown-loader": "^0.1.7",
     "node-sass": "^3.3.3",
     "postcss-loader": "^0.7.0",
     "raw-loader": "^0.5.1",

docs/webpack.config.development.js

@@ -17,7 +17,7 @@ module.exports = {
     publicPath: '/'
   },
   resolve: {
-    extensions: ['', '.jsx', '.scss', '.js', '.json'],
+    extensions: ['', '.jsx', '.scss', '.js', '.json', '.md'],
     alias: {
       'react-toolbox': path.resolve(__dirname + './../components')
     },
@@ -41,6 +41,9 @@ module.exports = {
         test: /(\.txt)$/,
         loader: 'raw',
         include: path.resolve(__dirname, './app/examples')
+      }, {
+        test: /(\.md)$/,
+        loader: 'html!markdown'
       }
     ]
   },