Move example to it's own folder

packages/react-docs/example/less/all.less

@@ -0,0 +1,37 @@
+/*
+ * Adds always visible scrollbars on OSX so that user knows the content is scrollable
+ * Source: https://davidwalsh.name/osx-overflow
+ */
+::-webkit-scrollbar {
+    -webkit-appearance: none;
+    width: 4px;
+    height: 2px;
+}
+::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: rgba(0, 0, 0, 0.5);
+    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
+}
+
+#documentation {
+    p {
+        line-height: 1.5;
+    }
+
+    .comment {
+        p {
+            margin: 0px;
+        }
+    }
+
+    .typeTooltip {
+        border: 1px solid lightgray;
+        opacity: 1;
+    }
+}
+
+code {
+    border: 1px solid #e3eefe;
+    font-family: 'Roboto Mono';
+    background-color: #f2f6ff !important; // lightBlue
+}

packages/react-docs/example/md/introduction.md

@@ -0,0 +1 @@
+Welcome to the [Web3Wrapper](https://github.com/0xProject/0x-monorepo/packages/web3-wrapper) documentation! Web3Wrapper is a convenience wrapper around Web3.js, adding support for promises and other niceties.

packages/react-docs/example/public/css/basscss_responsive_custom.css

@@ -0,0 +1,85 @@
+/* Custom Basscss Responsive Utilities */
+
+@media (max-width: 52em) {
+    .sm-center {
+        text-align: center;
+    }
+    .sm-align-middle {
+        vertical-align: middle;
+    }
+    .sm-align-top {
+        vertical-align: top;
+    }
+    .sm-left-align {
+        text-align: left;
+    }
+    .sm-right-align {
+        text-align: right;
+    }
+    .sm-table-cell {
+        display: table-cell;
+    }
+    .sm-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .sm-right {
+        float: right;
+    }
+}
+
+@media (min-width: 52em) {
+    .md-center {
+        text-align: center;
+    }
+    .md-align-middle {
+        vertical-align: middle;
+    }
+    .md-align-top {
+        vertical-align: top;
+    }
+    .md-left-align {
+        text-align: left;
+    }
+    .md-right-align {
+        text-align: right;
+    }
+    .md-table-cell {
+        display: table-cell;
+    }
+    .md-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .md-right {
+        float: right;
+    }
+}
+
+@media (min-width: 64em) {
+    .lg-center {
+        text-align: center;
+    }
+    .lg-align-middle {
+        vertical-align: middle;
+    }
+    .lg-align-top {
+        vertical-align: top;
+    }
+    .lg-left-align {
+        text-align: left;
+    }
+    .lg-right-align {
+        text-align: right;
+    }
+    .lg-table-cell {
+        display: table-cell;
+    }
+    .lg-mx-auto {
+        margin-left: auto;
+        margin-right: auto;
+    }
+    .lg-right {
+        float: right;
+    }
+}

packages/react-docs/example/public/css/basscss_responsive_margin.css

@@ -0,0 +1,160 @@
+/* Basscss Responsive Margin */
+
+@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
+
+  .sm-m0  { margin:        0 }
+  .sm-mt0 { margin-top:    0 }
+  .sm-mr0 { margin-right:  0 }
+  .sm-mb0 { margin-bottom: 0 }
+  .sm-ml0 { margin-left:   0 }
+  .sm-mx0 { margin-left:   0; margin-right:  0 }
+  .sm-my0 { margin-top:    0; margin-bottom: 0 }
+
+  .sm-m1  { margin:        .5rem }
+  .sm-mt1 { margin-top:        .5rem }
+  .sm-mr1 { margin-right:        .5rem }
+  .sm-mb1 { margin-bottom:        .5rem }
+  .sm-ml1 { margin-left:        .5rem }
+  .sm-mx1 { margin-left:        .5rem; margin-right:        .5rem }
+  .sm-my1 { margin-top:        .5rem; margin-bottom:        .5rem }
+
+  .sm-m2  { margin:        1rem }
+  .sm-mt2 { margin-top:        1rem }
+  .sm-mr2 { margin-right:        1rem }
+  .sm-mb2 { margin-bottom:        1rem }
+  .sm-ml2 { margin-left:        1rem }
+  .sm-mx2 { margin-left:        1rem; margin-right:        1rem }
+  .sm-my2 { margin-top:        1rem; margin-bottom:        1rem }
+
+  .sm-m3  { margin:        2rem }
+  .sm-mt3 { margin-top:        2rem }
+  .sm-mr3 { margin-right:        2rem }
+  .sm-mb3 { margin-bottom:        2rem }
+  .sm-ml3 { margin-left:        2rem }
+  .sm-mx3 { margin-left:        2rem; margin-right:        2rem }
+  .sm-my3 { margin-top:        2rem; margin-bottom:        2rem }
+
+  .sm-m4  { margin:        4rem }
+  .sm-mt4 { margin-top:        4rem }
+  .sm-mr4 { margin-right:        4rem }
+  .sm-mb4 { margin-bottom:        4rem }
+  .sm-ml4 { margin-left:        4rem }
+  .sm-mx4 { margin-left:        4rem; margin-right:        4rem }
+  .sm-my4 { margin-top:        4rem; margin-bottom:        4rem }
+
+  .sm-mxn1 { margin-left:        -.5rem; margin-right:        -.5rem }
+  .sm-mxn2 { margin-left:        -1rem; margin-right:        -1rem }
+  .sm-mxn3 { margin-left:        -2rem; margin-right:        -2rem }
+  .sm-mxn4 { margin-left:        -4rem; margin-right:        -4rem }
+
+  .sm-ml-auto { margin-left:  auto }
+  .sm-mr-auto { margin-right: auto }
+  .sm-mx-auto { margin-left:  auto; margin-right: auto }
+
+}
+
+@media (min-width: 52em) {
+
+  .md-m0  { margin:        0 }
+  .md-mt0 { margin-top:    0 }
+  .md-mr0 { margin-right:  0 }
+  .md-mb0 { margin-bottom: 0 }
+  .md-ml0 { margin-left:   0 }
+  .md-mx0 { margin-left:   0; margin-right:  0 }
+  .md-my0 { margin-top:    0; margin-bottom: 0 }
+
+  .md-m1  { margin:        .5rem }
+  .md-mt1 { margin-top:        .5rem }
+  .md-mr1 { margin-right:        .5rem }
+  .md-mb1 { margin-bottom:        .5rem }
+  .md-ml1 { margin-left:        .5rem }
+  .md-mx1 { margin-left:        .5rem; margin-right:        .5rem }
+  .md-my1 { margin-top:        .5rem; margin-bottom:        .5rem }
+
+  .md-m2  { margin:        1rem }
+  .md-mt2 { margin-top:        1rem }
+  .md-mr2 { margin-right:        1rem }
+  .md-mb2 { margin-bottom:        1rem }
+  .md-ml2 { margin-left:        1rem }
+  .md-mx2 { margin-left:        1rem; margin-right:        1rem }
+  .md-my2 { margin-top:        1rem; margin-bottom:        1rem }
+
+  .md-m3  { margin:        2rem }
+  .md-mt3 { margin-top:        2rem }
+  .md-mr3 { margin-right:        2rem }
+  .md-mb3 { margin-bottom:        2rem }
+  .md-ml3 { margin-left:        2rem }
+  .md-mx3 { margin-left:        2rem; margin-right:        2rem }
+  .md-my3 { margin-top:        2rem; margin-bottom:        2rem }
+
+  .md-m4  { margin:        4rem }
+  .md-mt4 { margin-top:        4rem }
+  .md-mr4 { margin-right:        4rem }
+  .md-mb4 { margin-bottom:        4rem }
+  .md-ml4 { margin-left:        4rem }
+  .md-mx4 { margin-left:        4rem; margin-right:        4rem }
+  .md-my4 { margin-top:        4rem; margin-bottom:        4rem }
+
+  .md-mxn1 { margin-left:        -.5rem; margin-right:        -.5rem; }
+  .md-mxn2 { margin-left:        -1rem; margin-right:        -1rem; }
+  .md-mxn3 { margin-left:        -2rem; margin-right:        -2rem; }
+  .md-mxn4 { margin-left:        -4rem; margin-right:        -4rem; }
+
+  .md-ml-auto { margin-left:  auto }
+  .md-mr-auto { margin-right: auto }
+  .md-mx-auto { margin-left: auto; margin-right: auto; }
+
+}
+
+@media (min-width: 64em) {
+
+  .lg-m0  { margin:        0 }
+  .lg-mt0 { margin-top:    0 }
+  .lg-mr0 { margin-right:  0 }
+  .lg-mb0 { margin-bottom: 0 }
+  .lg-ml0 { margin-left:   0 }
+  .lg-mx0 { margin-left:   0; margin-right:  0 }
+  .lg-my0 { margin-top:    0; margin-bottom: 0 }
+
+  .lg-m1  { margin:        .5rem }
+  .lg-mt1 { margin-top:        .5rem }
+  .lg-mr1 { margin-right:        .5rem }
+  .lg-mb1 { margin-bottom:        .5rem }
+  .lg-ml1 { margin-left:        .5rem }
+  .lg-mx1 { margin-left:        .5rem; margin-right:        .5rem }
+  .lg-my1 { margin-top:        .5rem; margin-bottom:        .5rem }
+
+  .lg-m2  { margin:        1rem }
+  .lg-mt2 { margin-top:        1rem }
+  .lg-mr2 { margin-right:        1rem }
+  .lg-mb2 { margin-bottom:        1rem }
+  .lg-ml2 { margin-left:        1rem }
+  .lg-mx2 { margin-left:        1rem; margin-right:        1rem }
+  .lg-my2 { margin-top:        1rem; margin-bottom:        1rem }
+
+  .lg-m3  { margin:        2rem }
+  .lg-mt3 { margin-top:        2rem }
+  .lg-mr3 { margin-right:        2rem }
+  .lg-mb3 { margin-bottom:        2rem }
+  .lg-ml3 { margin-left:        2rem }
+  .lg-mx3 { margin-left:        2rem; margin-right:        2rem }
+  .lg-my3 { margin-top:        2rem; margin-bottom:        2rem }
+
+  .lg-m4  { margin:        4rem }
+  .lg-mt4 { margin-top:        4rem }
+  .lg-mr4 { margin-right:        4rem }
+  .lg-mb4 { margin-bottom:        4rem }
+  .lg-ml4 { margin-left:        4rem }
+  .lg-mx4 { margin-left:        4rem; margin-right:        4rem }
+  .lg-my4 { margin-top:        4rem; margin-bottom:        4rem }
+
+  .lg-mxn1 { margin-left:        -.5rem; margin-right:        -.5rem; }
+  .lg-mxn2 { margin-left:        -1rem; margin-right:        -1rem; }
+  .lg-mxn3 { margin-left:        -2rem; margin-right:        -2rem; }
+  .lg-mxn4 { margin-left:        -4rem; margin-right:        -4rem; }
+
+  .lg-ml-auto { margin-left:  auto }
+  .lg-mr-auto { margin-right: auto }
+  .lg-mx-auto { margin-left: auto; margin-right: auto; }
+
+}

packages/react-docs/example/public/css/basscss_responsive_padding.css

@@ -0,0 +1,134 @@
+/* Basscss Responsive Padding */
+/* Modified by Fabio Berger to include xs prefix */
+
+@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
+
+  .sm-p0  { padding:        0 }
+  .sm-pt0 { padding-top:    0 }
+  .sm-pr0 { padding-right:  0 }
+  .sm-pb0 { padding-bottom: 0 }
+  .sm-pl0 { padding-left:   0 }
+  .sm-px0 { padding-left:   0; padding-right:  0 }
+  .sm-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .sm-p1  { padding:        .5rem }
+  .sm-pt1 { padding-top:        .5rem }
+  .sm-pr1 { padding-right:        .5rem }
+  .sm-pb1 { padding-bottom:        .5rem }
+  .sm-pl1 { padding-left:        .5rem }
+  .sm-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .sm-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .sm-p2  { padding:        1rem }
+  .sm-pt2 { padding-top:        1rem }
+  .sm-pr2 { padding-right:        1rem }
+  .sm-pb2 { padding-bottom:        1rem }
+  .sm-pl2 { padding-left:        1rem }
+  .sm-px2 { padding-left:        1rem; padding-right:        1rem }
+  .sm-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .sm-p3  { padding:        2rem }
+  .sm-pt3 { padding-top:        2rem }
+  .sm-pr3 { padding-right:        2rem }
+  .sm-pb3 { padding-bottom:        2rem }
+  .sm-pl3 { padding-left:        2rem }
+  .sm-px3 { padding-left:        2rem; padding-right:        2rem }
+  .sm-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .sm-p4  { padding:        4rem }
+  .sm-pt4 { padding-top:        4rem }
+  .sm-pr4 { padding-right:        4rem }
+  .sm-pb4 { padding-bottom:        4rem }
+  .sm-pl4 { padding-left:        4rem }
+  .sm-px4 { padding-left:        4rem; padding-right:        4rem }
+  .sm-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}
+
+@media (min-width: 52em) {
+
+  .md-p0  { padding:        0 }
+  .md-pt0 { padding-top:    0 }
+  .md-pr0 { padding-right:  0 }
+  .md-pb0 { padding-bottom: 0 }
+  .md-pl0 { padding-left:   0 }
+  .md-px0 { padding-left:   0; padding-right:  0 }
+  .md-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .md-p1  { padding:        .5rem }
+  .md-pt1 { padding-top:        .5rem }
+  .md-pr1 { padding-right:        .5rem }
+  .md-pb1 { padding-bottom:        .5rem }
+  .md-pl1 { padding-left:        .5rem }
+  .md-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .md-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .md-p2  { padding:        1rem }
+  .md-pt2 { padding-top:        1rem }
+  .md-pr2 { padding-right:        1rem }
+  .md-pb2 { padding-bottom:        1rem }
+  .md-pl2 { padding-left:        1rem }
+  .md-px2 { padding-left:        1rem; padding-right:        1rem }
+  .md-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .md-p3  { padding:        2rem }
+  .md-pt3 { padding-top:        2rem }
+  .md-pr3 { padding-right:        2rem }
+  .md-pb3 { padding-bottom:        2rem }
+  .md-pl3 { padding-left:        2rem }
+  .md-px3 { padding-left:        2rem; padding-right:        2rem }
+  .md-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .md-p4  { padding:        4rem }
+  .md-pt4 { padding-top:        4rem }
+  .md-pr4 { padding-right:        4rem }
+  .md-pb4 { padding-bottom:        4rem }
+  .md-pl4 { padding-left:        4rem }
+  .md-px4 { padding-left:        4rem; padding-right:        4rem }
+  .md-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}
+
+@media (min-width: 64em) {
+
+  .lg-p0  { padding:        0 }
+  .lg-pt0 { padding-top:    0 }
+  .lg-pr0 { padding-right:  0 }
+  .lg-pb0 { padding-bottom: 0 }
+  .lg-pl0 { padding-left:   0 }
+  .lg-px0 { padding-left:   0; padding-right:  0 }
+  .lg-py0 { padding-top:    0; padding-bottom: 0 }
+
+  .lg-p1  { padding:        .5rem }
+  .lg-pt1 { padding-top:        .5rem }
+  .lg-pr1 { padding-right:        .5rem }
+  .lg-pb1 { padding-bottom:        .5rem }
+  .lg-pl1 { padding-left:        .5rem }
+  .lg-px1 { padding-left:        .5rem; padding-right:        .5rem }
+  .lg-py1 { padding-top:        .5rem; padding-bottom:        .5rem }
+
+  .lg-p2  { padding:        1rem }
+  .lg-pt2 { padding-top:        1rem }
+  .lg-pr2 { padding-right:        1rem }
+  .lg-pb2 { padding-bottom:        1rem }
+  .lg-pl2 { padding-left:        1rem }
+  .lg-px2 { padding-left:        1rem; padding-right:        1rem }
+  .lg-py2 { padding-top:        1rem; padding-bottom:        1rem }
+
+  .lg-p3  { padding:        2rem }
+  .lg-pt3 { padding-top:        2rem }
+  .lg-pr3 { padding-right:        2rem }
+  .lg-pb3 { padding-bottom:        2rem }
+  .lg-pl3 { padding-left:        2rem }
+  .lg-px3 { padding-left:        2rem; padding-right:        2rem }
+  .lg-py3 { padding-top:        2rem; padding-bottom:        2rem }
+
+  .lg-p4  { padding:        4rem }
+  .lg-pt4 { padding-top:        4rem }
+  .lg-pr4 { padding-right:        4rem }
+  .lg-pb4 { padding-bottom:        4rem }
+  .lg-pl4 { padding-left:        4rem }
+  .lg-px4 { padding-left:        4rem; padding-right:        4rem }
+  .lg-py4 { padding-top:        4rem; padding-bottom:        4rem }
+
+}

packages/react-docs/example/public/css/basscss_responsive_type_scale.css

@@ -0,0 +1,35 @@
+/* Basscss Responsive Type Scale */
+/* Modified by Fabio Berger to include xs prefix */
+
+@media (max-width: 52em) { /* Modified by Fabio Berger to max-width from min-width */
+  .sm-h00 { font-size: 4rem }
+  .sm-h0 { font-size: 3rem }
+  .sm-h1 { font-size: 2rem }
+  .sm-h2 { font-size: 1.5rem }
+  .sm-h3 { font-size: 1.25rem }
+  .sm-h4 { font-size: 1rem }
+  .sm-h5 { font-size: .875rem }
+  .sm-h6 { font-size: .75rem }
+}
+
+@media (min-width: 52em) {
+  .md-h00 { font-size: 4rem }
+  .md-h0 { font-size: 3rem }
+  .md-h1 { font-size: 2rem }
+  .md-h2 { font-size: 1.5rem }
+  .md-h3 { font-size: 1.25rem }
+  .md-h4 { font-size: 1rem }
+  .md-h5 { font-size: .875rem }
+  .md-h6 { font-size: .75rem }
+}
+
+@media (min-width: 64em) {
+  .lg-h00 { font-size: 4rem }
+  .lg-h0 { font-size: 3rem }
+  .lg-h1 { font-size: 2rem }
+  .lg-h2 { font-size: 1.5rem }
+  .lg-h3 { font-size: 1.25rem }
+  .lg-h4 { font-size: 1rem }
+  .lg-h5 { font-size: .875rem }
+  .lg-h6 { font-size: .75rem }
+}

packages/react-docs/example/public/css/github-gist.css

@@ -0,0 +1,71 @@
+/**
+ * GitHub Gist Theme
+ * Author : Louis Barranqueiro - https://github.com/LouisBarranqueiro
+ */
+
+.hljs {
+    display: block;
+    background: white;
+    padding: 0.5em;
+    color: #333333;
+    overflow-x: auto;
+}
+
+.hljs-comment,
+.hljs-meta {
+    color: #969896;
+}
+
+.hljs-string,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-strong,
+.hljs-emphasis,
+.hljs-quote {
+    color: #df5000;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-type {
+    color: #a71d5d;
+}
+
+.hljs-literal,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-attribute {
+    color: #0086b3;
+}
+
+.hljs-section,
+.hljs-name {
+    color: #63a35c;
+}
+
+.hljs-tag {
+    color: #333333;
+}
+
+.hljs-title,
+.hljs-attr,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+    color: #795da3;
+}
+
+.hljs-addition {
+    color: #55a532;
+    background-color: #eaffea;
+}
+
+.hljs-deletion {
+    color: #bd2c00;
+    background-color: #ffecec;
+}
+
+.hljs-link {
+    text-decoration: underline;
+}

packages/react-docs/example/public/css/roboto.css

@@ -0,0 +1,83 @@
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}*/
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}*/
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-RegularItalic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}*/
+
+/*@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-Black.ttf') format('truetype');
+  font-weight: 900;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/Roboto-BlackItalic.ttf') format('truetype');
+  font-weight: 900;
+  font-style: italic;
+}*/

packages/react-docs/example/public/css/roboto_mono.css

@@ -0,0 +1,69 @@
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-Thin.ttf') format('truetype');
+  font-weight: 100;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-ThinItalic.ttf') format('truetype');
+  font-weight: 100;
+  font-style: italic;
+}*/
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+}*/
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+}
+
+/*@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-RegularItalic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+}*/
+
+/*@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-Medium.ttf') format('truetype');
+  font-weight: 500;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-MediumItalic.ttf') format('truetype');
+  font-weight: 500;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'Roboto Mono';
+  src: url('../fonts/RobotoMono-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+}*/

packages/react-docs/example/public/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Example Docs Page</title>
+    <link rel="stylesheet" href="/css/github-gist.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_custom.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_padding.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_margin.css">
+    <link rel="stylesheet" href="/css/basscss_responsive_type_scale.css">
+    <link rel="stylesheet" href="/css/roboto.css">
+    <link rel="stylesheet" href="/css/roboto_mono.css">
+</head>
+
+<body style="margin: 0px; min-width: 355px; font-family: 'Roboto';">
+    <!-- Main -->
+    <div id="app"></div>
+    <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
+</body>
+
+</html>

packages/react-docs/example/ts/index.tsx

@@ -0,0 +1,67 @@
+import 'basscss/css/basscss.css';
+import 'less/all.less';
+import { MuiThemeProvider } from 'material-ui/styles';
+import * as React from 'react';
+import { render } from 'react-dom';
+import * as injectTapEventPlugin from 'react-tap-event-plugin';
+
+import { Documentation } from '../../src/ts/components/documentation';
+import { DocsInfo } from '../../src/ts/docs_info';
+import { DocsInfoConfig, SupportedDocJson } from '../../src/ts/types';
+injectTapEventPlugin();
+
+/* tslint:disable:no-var-requires */
+const IntroMarkdown = require('md/introduction');
+/* tslint:enable:no-var-requires */
+
+const docSections = {
+    introduction: 'introduction',
+    web3Wrapper: 'web3Wrapper',
+};
+
+const docsInfoConfig: DocsInfoConfig = {
+    id: 'web3Wrapper',
+    type: SupportedDocJson.TypeDoc,
+    displayName: 'Web3 Wrapper',
+    packageUrl: 'https://github.com/0xProject/0x-monorepo',
+    menu: {
+        introduction: [docSections.introduction],
+        web3Wrapper: [docSections.web3Wrapper],
+    },
+    sectionNameToMarkdown: {
+        [docSections.introduction]: IntroMarkdown,
+    },
+    // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is
+    // currently no way to extract the re-exported types from index.ts via TypeDoc :(
+    publicTypes: ['TxData', 'TransactionReceipt', 'RawLogEntry'],
+    sectionNameToModulePath: {
+        [docSections.web3Wrapper]: ['"index"'],
+    },
+    menuSubsectionToVersionWhenIntroduced: {},
+    sections: docSections,
+    visibleConstructors: [docSections.web3Wrapper],
+};
+const docsInfo = new DocsInfo(docsInfoConfig);
+
+const selectedVersion = '0.2.0';
+const availableVersions = ['0.1.12', '0.1.13', '0.1.14', '0.2.0'];
+
+const sourceUrl = `${
+    docsInfoConfig.packageUrl
+}/blob/@0xproject/web3-wrapper%40${selectedVersion}/packages/web3-wrapper`;
+
+import * as typeDocJson from './json/web3_wrapper_typedoc_output.json';
+const docAgnosticFormat = docsInfo.convertToDocAgnosticFormat(typeDocJson);
+
+render(
+    <MuiThemeProvider>
+        <Documentation
+            selectedVersion={selectedVersion}
+            availableVersions={availableVersions}
+            docsInfo={docsInfo}
+            docAgnosticFormat={docAgnosticFormat}
+            sourceUrl={sourceUrl}
+        />
+    </MuiThemeProvider>,
+    document.getElementById('app'),
+);