Modules Dump

modules/react-basic-layout/components/Container.jsx

@@ -0,0 +1,29 @@
+'use strict';
+
+var React = require('react');
+var ReactCSS = require('reactcss');
+
+class Container extends ReactCSS.Component {
+
+  classes() {
+    return {
+      'default': {
+        container: {
+          maxWidth: this.props.width + 'px',
+          padding: '0 20px',
+          margin: '0 auto',
+        },
+      },
+    };
+  }
+
+  render() {
+    return <div is="container">{ this.props.children }</div>;
+  }
+}
+
+Container.defaultProps = {
+  width: 960,
+};
+
+module.exports = Container;

modules/react-basic-layout/components/Grid.jsx

@@ -0,0 +1,36 @@
+'use strict';
+
+var React = require('react');
+var ReactCSS = require('reactcss');
+var context = require('react-context');
+
+class Grid extends ReactCSS.Component {
+
+  classes() {
+    return {
+      'default': {
+        grid: {
+          position: 'relative',
+        },
+        left: {
+          position: 'absolute',
+          width: '130px',
+        },
+        main: {
+          paddingLeft: '150px',
+        },
+      },
+    };
+  }
+
+  render() {
+    return (
+      <div is="grid">
+        <div is="left">{ this.props.children[0] }</div>
+        <div is="main">{ this.props.children[1] }</div>
+      </div>
+    );
+  }
+}
+
+module.exports = Grid;

modules/react-basic-layout/index.js

@@ -0,0 +1,5 @@
+
+module.exports = {
+  Container: require('./components/Container'),
+  Grid: require('./components/Grid'),
+};

modules/react-docs/components/Code.jsx

@@ -0,0 +1,144 @@
+'use strict';
+
+var React = require('react');
+var ReactCSS = require('reactcss');
+var markdown = require('../../helpers/markdown');
+var context = require('react-context');
+
+var { Tile } = require('react-material-design');
+
+class Code extends ReactCSS.Component {
+
+  constructor() {
+    super();
+  }
+
+  classes() {
+    return {
+      'default': {
+        shortCodeBlock: {
+          display: 'inline-block',
+        },
+        shortCode: {
+          padding: '14px 16px',
+        },
+        head: {
+          borderRadius: '2px 2px 0 0',
+          background: '#fafafa',
+        },
+        files: {
+          display: 'inline-block',
+        },
+        Files: {
+          align: 'none',
+          color: '#666',
+        },
+        center: {
+          fontFamily: 'Monaco',
+          fontSize: '14px',
+          lineHeight: '19px',
+          color: 'rgba(0,0,0,.77)',
+        },
+        numbers: {
+          fontSize: '14px',
+          lineHeight: '19px',
+          display: 'inline-block',
+          textAlign: 'right',
+          color: 'rgba(0,0,0,.20)',
+          userSelect: 'none',
+          paddingLeft: '7px',
+        },
+      },
+      'condensed': {
+        Tile: {
+          condensed: true,
+        },
+        center: {
+          paddingTop: '16px',
+          paddingBottom: '16px',
+          fontSize: '13px',
+          lineHeight: '15px',
+          overflowX: 'scroll',
+        },
+        numbers: {
+          paddingTop: '16px',
+          fontSize: '13px',
+          lineHeight: '15px',
+        },
+      },
+      'borders': {
+        code: {
+          borderTop: '1px solid #eee',
+          borderBottom: '1px solid #eee',
+        },
+      },
+    };
+  }
+
+  styles() {
+    return this.css({
+      'condensed': this.context.width < 500,
+    });
+  }
+
+  render() {
+    var code = markdown.getBody(this.props.file);
+    var args = markdown.getArgs(this.props.file);
+    var colorCoded = markdown.renderCode('```\n' + code + '```').trim();
+    var lineCount = colorCoded.split('\n').length;
+
+    var lines;
+    if (args.lineDecoration) {
+      lines = args.lineDecoration;
+    } else {
+      lines = [];
+      for (var i = 1; i < lineCount; i++) {
+        lines.push(<div key={ i }>{ i }</div>);
+      }
+    }
+
+    return (
+      <div is="code">
+
+        <style>{`
+          .rendered{
+            color: #607D8B; // blue grey 500
+          }
+          .rendered .hljs-comment {
+            color: #B0BEC5; // blue grey 200
+          }
+          .rendered .hljs-keyword{
+            color: #EF9A9A;  // red 200
+          }
+          .rendered .hljs-string{
+            color: #689F38; // light green 700
+          }
+          .rendered .hljs-title{
+          }
+        `}</style>
+
+        <Tile is="Tile">
+          <div is="numbers">
+            { lines }
+          </div>
+          <div is="center">
+            <style>{`
+              .rendered pre{
+                margin: 0;
+              }
+              .rendered p{
+                margin: 0;
+              }
+            `}</style>
+            <div className="rendered" dangerouslySetInnerHTML={{ __html: colorCoded }} />
+          </div>
+        </Tile>
+
+      </div>
+    );
+  }
+}
+
+Code.contextTypes = context.subscribe(['width']);
+
+module.exports = Code;

modules/react-docs/components/Docs.jsx

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+var ReactCSS = require('reactcss');
+
+class Docs extends ReactCSS.Component {
+
+  classes() {
+    return {
+      'default': {
+      },
+    };
+  }
+
+  render() {
+    return <div is="docs">docs</div>;
+  }
+}
+
+module.exports = Docs;

modules/react-docs/components/Markdown.jsx

@@ -0,0 +1,99 @@
+'use strict';
+
+var React = require('react');
+var ReactCSS = require('reactcss');
+var markdown = require('../../helpers/markdown');
+
+var Code = require('./Code');
+
+module.exports = class Markdown extends ReactCSS.Component {
+
+  classes() {
+    return {
+      'default': {
+        markdown: {
+          fontSize: '17px',
+          lineHeight: '24px',
+          color: 'rgba(0,0,0,.47)',
+        },
+      },
+    };
+  }
+
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  render() {
+    var children = this.props.children;
+
+    var newLines = children;
+
+    var codes = [];
+    for (var i = 0; i < markdown.isCode(children).length; i++) {
+      var codeBlock = markdown.isCode(children)[i];
+      newLines = newLines.replace(codeBlock[1], '|Code:' + i + '|');
+      codes[i] = <Code file={ codeBlock[2] } condensed={ this.props.condensed } borders />;
+    }
+
+    var markdownFile = [];
+    for (var i = 0; i < newLines.split('\n').length; i++) {
+      var line = newLines.split('\n')[i];
+      if (markdown.isCodeBlock(line)) {
+        markdownFile.push(<div key={ i }>{ codes[ markdown.codeNumber(line) ] }</div>);
+      } else {
+        markdownFile.push(<div key={ i } is="markdown" className="markdown text" dangerouslySetInnerHTML={ {__html: markdown.render(line)} } />);
+      }
+    }
+
+    return (
+      <div is="markdown">
+        <style>{`
+          .text code{
+            background: #eee;
+            padding: 1px 5px 3px;
+            border-radius: 2px;
+            box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
+            font-size: 85%;
+            vertical-align: bottom;
+          }
+
+          .markdown p{
+            margin: 15px 24px;
+          }
+
+          .markdown h1{
+            font-size: 38px;
+            font-weight: 200;
+            color: rgba(0,0,0,.77);
+            margin: 0;
+            padding-top: 24px;
+            padding-bottom: 5px;
+            padding-left: 24px;
+          }
+
+          .markdown h2{
+            font-size: 26px;
+            line-height: 32px;
+            font-weight: 200;
+            color: rgba(0,0,0,.57);
+            padding-top: 20px;
+            margin-top: 0;
+            margin-bottom: 10px;
+            padding-left: 24px;
+          }
+
+          .markdown h3{
+            font-weight: normal;
+            font-size: 20px;
+            color: rgba(0,0,0,.67);
+            padding-left: 24px;
+          }
+        `}</style>
+
+        { markdownFile }
+
+      </div>
+    );
+  }
+};