Organize doc menu into groups

docs/app/Components/Sidebar/Sidebar.js

@@ -1,28 +1,63 @@
+import _ from 'lodash';
 import React, {Component} from 'react';
 import stardust, {Menu, MenuItem, Input} from 'stardust';
+import META from 'src/utils/Meta';
 
 export default class Sidebar extends Component {
   state = {query: ''};
 
   handleSearchChange = e => this.setState({query: e.target.value});
 
+  getComponentsByQuery() {
+    return _.filter(stardust, component => {
+      const name = component._meta.name;
+      const isParent = META.isParent(component);
+      const isQueryMatch = new RegExp(this.state.query, 'i').test(name);
+      return isParent && isQueryMatch;
+    });
+  }
+
+  getComponentsByType = type => {
+    const items = _(this.getComponentsByQuery())
+      .filter(component => META.isType(component, type))
+      .sortBy((component, name) => name)
+      .map(component => {
+        const name = component._meta.name;
+        return <MenuItem key={name} name={name} href={`#${name}`} />;
+      })
+      .value();
+
+    const subMenu = (
+      <div className='item'>
+        <div className='header'>{_.capitalize(type)}s</div>
+        <div className='menu'>{items}</div>
+      </div>
+    );
+
+    return items && subMenu;
+  };
+
   render() {
-    const menuItems = Object.keys(stardust)
-      .sort()
-      .filter(name => new RegExp(this.state.query, 'i').test(name))
-      .map(name => <MenuItem key={name} name={name} href={`#${name}`} />);
+    const elements = this.getComponentsByType(META.type.element);
+    const collections = this.getComponentsByType(META.type.collection);
+    const views = this.getComponentsByType(META.type.view);
+    const modules = this.getComponentsByType(META.type.module);
 
     return (
-      <Menu className='small inverted secondary vertical pointing fluid'>
+      <Menu className='inverted secondary vertical fluid' style={{margin: 0}}>
         <MenuItem>
           <Input
-            className='small transparent inverted'
+            className='transparent inverted icon'
+            icon='search'
             placeholder='Search'
             iconClass='search link icon'
             onChange={this.handleSearchChange}
           />
         </MenuItem>
-        {menuItems}
+        {elements}
+        {collections}
+        {views}
+        {modules}
       </Menu>
     );
   }

src/collections/Menu/Menu.js

@@ -34,7 +34,7 @@ export default class Menu extends Component {
       const activeItemName = !hasActiveItem && i === 0
         ? child.props.name
         : this.state.activeItem || this.props.activeItem;
-      return React.cloneElement(child, {
+      return child && React.cloneElement(child, {
         activeItem: activeItemName,
         callbackParent: this.handleClickItem,
       });

src/collections/Menu/MenuItem.js

@@ -36,7 +36,6 @@ export default class MenuItem extends Component {
     const classes = classNames(
       'sd-menu-item',
       this.props.className,
-      'blue',
       'item',
       {active: isActive}
     );

src/elements/Button/Buttons.js

@@ -12,6 +12,7 @@ export default class Buttons extends Component {
     library: META.library.semanticUI,
     name: 'Buttons',
     type: META.type.element,
+    parent: 'Button'
   };
 
   render() {

src/utils/Meta.js

@@ -1,3 +1,5 @@
+import _ from 'lodash';
+
 /**
  * Component meta information.  Used to declaratively classify and identify components.
  * @type {{}}
@@ -28,9 +30,14 @@ const META = {
   isElement: ({_meta}) => _meta.type === META.type.element,
   isView: ({_meta}) => _meta.type === META.type.view,
   isModule: ({_meta}) => _meta.type === META.type.module,
+  isType: ({_meta}, type) => _meta.type === type,
 
   // parent
-  isChild: ({_meta}) => !!_meta.parent,
+  isParent: (component) => (
+    // has no 'parent' or 'parent' is self
+    !_.has(component, '_meta.parent') || _.get(component, '_meta.parent') === component._meta.name
+  ),
+  isChild: component => !META.isParent(component),
 };
 
 export default META;