[docs] Autogenerate the property description for the AppBar

.gitignore

@@ -10,6 +10,8 @@ icon-builder/jsx
 
 # Exclude IDE project folders
 .idea
+*.sublime-project
+*.sublime-workspace
 
 # OS files
 .DS_STORE

docs/package.json

@@ -14,20 +14,24 @@
     "prd": "webpack-dev-server --config webpack-production.config.js --progress --colors --profile"
   },
   "dependencies": {
-    "codemirror": "^5.5.0",
+    "css-loader": "^0.23.0",
+    "highlight.js": "^8.9.1",
     "history": "^1.11.1",
     "intl": "^1.0.1",
+    "marked": "^0.3.5",
     "react-addons-perf": "^0.14.0",
     "react-dom": "^0.14.0",
     "react-motion": "^0.3.1",
     "react-router": "^1.0.0-rc1",
-    "react-swipeable-views": "^0.3.0"
+    "react-swipeable-views": "^0.3.0",
+    "style-loader": "0.13.0"
   },
   "devDependencies": {
     "raw-loader": "^0.5.1",
     "react": "^0.14.0",
     "react-addons-linked-state-mixin": "^0.14.0",
     "react-addons-pure-render-mixin": "^0.14.3",
+    "react-docgen": "^2.4.0",
     "webpack": "^1.11.0",
     "webpack-dev-server": "^1.10.1"
   }

docs/src/app/components/AppBar/ExampleIcon.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import AppBar from 'material-ui/lib/app-bar';
+
+const AppBarExampleIcon = React.createClass({
+  render() {
+    return (
+      <AppBar
+        title="Title"
+        iconClassNameRight="muidocs-icon-navigation-expand-more"
+      />
+    );
+  },
+});
+
+export default AppBarExampleIcon;

docs/src/app/components/AppBar/ExampleIconButton.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import AppBar from 'material-ui/lib/app-bar';
+import IconButton from 'material-ui/lib/icon-button';
+import NavigationClose from 'material-ui/lib/svg-icons/navigation/close';
+import FlatButton from 'material-ui/lib/flat-button';
+
+function handleTouchTap() {
+  alert('onTouchTap triggered on the title component');
+}
+
+const styles = {
+  title: {
+    cursor: 'pointer',
+  },
+};
+
+const AppBarExampleIconButton = React.createClass({
+  render() {
+    return (
+      <AppBar
+        title={<span style={styles.title} onTouchTap={handleTouchTap}>Title</span>}
+        iconElementLeft={<IconButton><NavigationClose /></IconButton>}
+        iconElementRight={<FlatButton label="Save" />}
+      />
+   );
+  },
+});
+
+export default AppBarExampleIconButton;

docs/src/app/components/AppBar/ExampleIconMenu.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import AppBar from 'material-ui/lib/app-bar';
+import IconButton from 'material-ui/lib/icon-button';
+import NavigationClose from 'material-ui/lib/svg-icons/navigation/close';
+import IconMenu from 'material-ui/lib/menus/icon-menu';
+import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
+import MenuItem from 'material-ui/lib/menus/menu-item';
+
+const AppBarExampleIconMenu = React.createClass({
+  render() {
+    return (
+      <AppBar
+        title="Title"
+        iconElementLeft={<IconButton><NavigationClose /></IconButton>}
+        iconElementRight={
+          <IconMenu
+            iconButtonElement={
+              <IconButton><MoreVertIcon /></IconButton>
+            }
+            targetOrigin={{horizontal:'right', vertical:'top'}}
+            anchorOrigin={{horizontal:'right', vertical:'top'}}
+          >
+            <MenuItem primaryText="Refresh" />
+            <MenuItem primaryText="Help" />
+            <MenuItem primaryText="Sign out" />
+          </IconMenu>
+        }
+      />
+    );
+  },
+});
+
+export default AppBarExampleIconMenu;

docs/src/app/components/AppBar/README.md

@@ -0,0 +1,7 @@
+## AppBar
+
+App bars are a collection of components placed as a static header for an application.
+It is used for navigation, search branding, and actions.
+An app bar is also referred to as the primary toolbar or action bar for Android.
+
+### Examples

docs/src/app/components/MarkdownElement.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import marked from 'marked';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+
+require('./mui-github-markdown.css');
+
+const styles = {
+  root: {
+    marginBottom: 14,
+    padding: '0 10px',
+  },
+};
+
+const MarkdownElement = React.createClass({
+  propTypes: {
+    text: React.PropTypes.string,
+  },
+  mixins: [
+    PureRenderMixin,
+  ],
+  getDefaultProps() {
+    return {
+      text: '',
+    };
+  },
+
+  componentWillMount() {
+    marked.setOptions({
+      gfm: true,
+      tables: true,
+      breaks: false,
+      pedantic: false,
+      sanitize: false,
+      smartLists: true,
+      smartypants: false,
+      highlight: function(code, lang) {
+        return require('highlight.js').highlight(lang, code).value;
+      },
+    });
+  },
+
+  render() {
+    const {
+      text,
+    } = this.props;
+
+/* eslint-disable */
+    return (
+      <div
+        style={styles.root}
+        className="markdown-body"
+        dangerouslySetInnerHTML={{__html: marked(text)}}
+      />
+    );
+/* eslint-enable */
+  },
+});
+
+export default MarkdownElement;

docs/src/app/components/PropTypeDescription.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {parse} from 'react-docgen';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
+import MarkdownElement from './MarkdownElement';
+
+function generatePropType(type) {
+  switch (type.name) {
+    case 'func':
+      return 'function';
+
+    case 'custom':
+      return type.raw;
+
+    default:
+      return type.name;
+  }
+}
+
+const PropTypeDescription = React.createClass({
+  propTypes: {
+    code: React.PropTypes.string,
+  },
+  mixins: [
+    PureRenderMixin,
+  ],
+  render() {
+    const {
+      code,
+    } = this.props;
+
+    let text = `### Properties
+| Name | Type | Default | Description|
+|:-----|:-----|:-----|:-----|\n`;
+
+    const componentInfo = parse(code);
+
+    for (let key in componentInfo.props) {
+      const prop = componentInfo.props[key];
+
+      let defaultValue = '';
+
+      if (prop.defaultValue) {
+        defaultValue = prop.defaultValue.value;
+      }
+
+      const description = (prop.required ? '**required**' : '*optional*') +
+        '. ' + prop.description.replace(/\n/g, '<br>');
+
+      text += `| ${key} | ${generatePropType(prop.type)} |`;
+      text += `${defaultValue} |${description} |\n`;
+    }
+
+    return (
+      <MarkdownElement text={text} />
+    );
+  },
+});
+
+export default PropTypeDescription;

docs/src/app/components/code-example/code-block.jsx

@@ -1,62 +1,23 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
-import {Styles} from 'material-ui';
-const {ThemeManager} = Styles;
-const DefaultRawTheme = Styles.LightRawTheme;
-
+import MarkdownElement from '../MarkdownElement';
+import PureRenderMixin from 'react-addons-pure-render-mixin';
 
 const CodeBlock = React.createClass({
-
   propTypes: {
-    children: React.PropTypes.node,
-  },
-
-  contextTypes : {
-    muiTheme: React.PropTypes.object,
-  },
-
-  //for passing default theme context to children
-  childContextTypes: {
-    muiTheme: React.PropTypes.object,
-  },
-
-  getChildContext() {
-    return {
-      muiTheme: this.state.muiTheme,
-    };
-  },
-
-  getInitialState() {
-    return {
-      muiTheme: this.context.muiTheme ? this.context.muiTheme : ThemeManager.getMuiTheme(DefaultRawTheme),
-    };
-  },
-
-  componentWillReceiveProps(nextProps, nextContext) {
-    let newMuiTheme = nextContext.muiTheme ? nextContext.muiTheme : this.state.muiTheme;
-    this.setState({muiTheme: newMuiTheme});
-  },
-
-  componentDidMount() {
-    let code = ReactDOM.findDOMNode(this.refs.code);
-    require([
-      'codemirror/lib/codemirror.js',
-      'codemirror/mode/htmlmixed/htmlmixed.js',
-    ], function(Codemirror) {
-      Codemirror.fromTextArea(code, {
-        mode: 'htmlmixed',
-        readOnly: true,
-      });
-    });
+    children: React.PropTypes.string,
   },
-
-  shouldComponentUpdate({children}) {
-    return this.props.children !== children;
-  },
-
+  mixins: [
+    PureRenderMixin,
+  ],
   render() {
+    const text = `\`\`\`js
+${this.props.children}
+    \`\`\``;
+
     return (
-      <textarea ref="code" value={this.props.children} readOnly={true}/>
+      <div className="CodeMirror">
+        <MarkdownElement text={text} />
+      </div>
     );
   },
 });