From f66efed777f1046718478a28f5dd3c4942379774 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 7 Mar 2018 10:20:15 +0100
Subject: Add example docs to react-docs package

---
 packages/react-docs/package.json                   |   13 +-
 packages/react-docs/src/less/all.less              |   37 +
 packages/react-docs/src/md/introduction.md         |    1 +
 .../src/public/css/basscss_responsive_custom.css   |   85 ++
 .../src/public/css/basscss_responsive_margin.css   |  160 +++
 .../src/public/css/basscss_responsive_padding.css  |  134 ++
 .../public/css/basscss_responsive_type_scale.css   |   35 +
 packages/react-docs/src/public/css/github-gist.css |   71 +
 packages/react-docs/src/public/css/roboto.css      |   83 ++
 packages/react-docs/src/public/css/roboto_mono.css |   69 +
 .../react-docs/src/public/fonts/Roboto-Black.ttf   |  Bin 0 -> 171480 bytes
 .../src/public/fonts/Roboto-BlackItalic.ttf        |  Bin 0 -> 177552 bytes
 .../react-docs/src/public/fonts/Roboto-Bold.ttf    |  Bin 0 -> 170760 bytes
 .../src/public/fonts/Roboto-BoldItalic.ttf         |  Bin 0 -> 174952 bytes
 .../react-docs/src/public/fonts/Roboto-Italic.ttf  |  Bin 0 -> 173932 bytes
 .../react-docs/src/public/fonts/Roboto-Light.ttf   |  Bin 0 -> 170420 bytes
 .../src/public/fonts/Roboto-LightItalic.ttf        |  Bin 0 -> 176616 bytes
 .../react-docs/src/public/fonts/Roboto-Medium.ttf  |  Bin 0 -> 172064 bytes
 .../src/public/fonts/Roboto-MediumItalic.ttf       |  Bin 0 -> 176864 bytes
 .../react-docs/src/public/fonts/Roboto-Regular.ttf |  Bin 0 -> 171676 bytes
 .../react-docs/src/public/fonts/Roboto-Thin.ttf    |  Bin 0 -> 171904 bytes
 .../src/public/fonts/Roboto-ThinItalic.ttf         |  Bin 0 -> 176300 bytes
 .../src/public/fonts/RobotoMono-Bold.ttf           |  Bin 0 -> 114752 bytes
 .../src/public/fonts/RobotoMono-BoldItalic.ttf     |  Bin 0 -> 122808 bytes
 .../src/public/fonts/RobotoMono-Italic.ttf         |  Bin 0 -> 120832 bytes
 .../src/public/fonts/RobotoMono-Light.ttf          |  Bin 0 -> 118976 bytes
 .../src/public/fonts/RobotoMono-LightItalic.ttf    |  Bin 0 -> 127568 bytes
 .../src/public/fonts/RobotoMono-Medium.ttf         |  Bin 0 -> 114696 bytes
 .../src/public/fonts/RobotoMono-MediumItalic.ttf   |  Bin 0 -> 123640 bytes
 .../src/public/fonts/RobotoMono-Regular.ttf        |  Bin 0 -> 114624 bytes
 .../src/public/fonts/RobotoMono-Thin.ttf           |  Bin 0 -> 118132 bytes
 .../src/public/fonts/RobotoMono-ThinItalic.ttf     |  Bin 0 -> 121456 bytes
 packages/react-docs/src/public/index.html          |   23 +
 .../react-docs/src/ts/components/documentation.tsx |   66 +-
 packages/react-docs/src/ts/example/index.tsx       |   67 +
 .../example/json/web3_wrapper_typedoc_output.json  | 1364 ++++++++++++++++++++
 packages/react-docs/src/ts/globals.d.ts            |    7 +
 packages/react-docs/webpack.config.js              |   79 ++
 38 files changed, 2261 insertions(+), 33 deletions(-)
 create mode 100644 packages/react-docs/src/less/all.less
 create mode 100644 packages/react-docs/src/md/introduction.md
 create mode 100644 packages/react-docs/src/public/css/basscss_responsive_custom.css
 create mode 100644 packages/react-docs/src/public/css/basscss_responsive_margin.css
 create mode 100644 packages/react-docs/src/public/css/basscss_responsive_padding.css
 create mode 100644 packages/react-docs/src/public/css/basscss_responsive_type_scale.css
 create mode 100644 packages/react-docs/src/public/css/github-gist.css
 create mode 100644 packages/react-docs/src/public/css/roboto.css
 create mode 100644 packages/react-docs/src/public/css/roboto_mono.css
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-Black.ttf
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-BlackItalic.ttf
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-Bold.ttf
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-BoldItalic.ttf
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-Italic.ttf
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-Light.ttf
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-LightItalic.ttf
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-Medium.ttf
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-MediumItalic.ttf
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-Regular.ttf
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-Thin.ttf
 create mode 100755 packages/react-docs/src/public/fonts/Roboto-ThinItalic.ttf
 create mode 100755 packages/react-docs/src/public/fonts/RobotoMono-Bold.ttf
 create mode 100755 packages/react-docs/src/public/fonts/RobotoMono-BoldItalic.ttf
 create mode 100755 packages/react-docs/src/public/fonts/RobotoMono-Italic.ttf
 create mode 100755 packages/react-docs/src/public/fonts/RobotoMono-Light.ttf
 create mode 100755 packages/react-docs/src/public/fonts/RobotoMono-LightItalic.ttf
 create mode 100755 packages/react-docs/src/public/fonts/RobotoMono-Medium.ttf
 create mode 100755 packages/react-docs/src/public/fonts/RobotoMono-MediumItalic.ttf
 create mode 100755 packages/react-docs/src/public/fonts/RobotoMono-Regular.ttf
 create mode 100755 packages/react-docs/src/public/fonts/RobotoMono-Thin.ttf
 create mode 100755 packages/react-docs/src/public/fonts/RobotoMono-ThinItalic.ttf
 create mode 100644 packages/react-docs/src/public/index.html
 create mode 100644 packages/react-docs/src/ts/example/index.tsx
 create mode 100644 packages/react-docs/src/ts/example/json/web3_wrapper_typedoc_output.json
 create mode 100644 packages/react-docs/webpack.config.js

(limited to 'packages/react-docs')

diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 4b582edff..e38aef2e5 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -8,7 +8,8 @@
     "lint": "tslint --project . 'src/ts/**/*.ts' 'src/ts/**/*.tsx'",
     "build": "tsc",
     "build:watch": "tsc -w",
-    "clean": "shx rm -rf lib"
+    "clean": "shx rm -rf lib",
+    "dev": "webpack-dev-server --open"
   },
   "author": "Fabio Berger",
   "license": "MIT",
@@ -21,7 +22,15 @@
     "@types/react-dom": "^0.14.23",
     "shx": "^0.2.2",
     "tslint": "^5.9.1",
-    "typescript": "2.7.1"
+    "typescript": "2.7.1",
+    "webpack": "^3.11.0",
+    "webpack-dev-server": "^2.11.1",
+    "css-loader": "^0.28.9",
+    "source-map-loader": "^0.2.3",
+    "style-loader": "^0.20.2",
+    "json-loader": "^0.5.4",
+    "raw-loader": "^0.5.1",
+    "less-loader": "^2.2.3"
   },
   "dependencies": {
     "@0xproject/react-shared": "^0.0.1",
diff --git a/packages/react-docs/src/less/all.less b/packages/react-docs/src/less/all.less
new file mode 100644
index 000000000..4060b8128
--- /dev/null
+++ b/packages/react-docs/src/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
+}
diff --git a/packages/react-docs/src/md/introduction.md b/packages/react-docs/src/md/introduction.md
new file mode 100644
index 000000000..b8569576e
--- /dev/null
+++ b/packages/react-docs/src/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.
diff --git a/packages/react-docs/src/public/css/basscss_responsive_custom.css b/packages/react-docs/src/public/css/basscss_responsive_custom.css
new file mode 100644
index 000000000..5f8bd9117
--- /dev/null
+++ b/packages/react-docs/src/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;
+    }
+}
diff --git a/packages/react-docs/src/public/css/basscss_responsive_margin.css b/packages/react-docs/src/public/css/basscss_responsive_margin.css
new file mode 100644
index 000000000..b601bd491
--- /dev/null
+++ b/packages/react-docs/src/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; }
+
+}
diff --git a/packages/react-docs/src/public/css/basscss_responsive_padding.css b/packages/react-docs/src/public/css/basscss_responsive_padding.css
new file mode 100644
index 000000000..e027c2d65
--- /dev/null
+++ b/packages/react-docs/src/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 }
+
+}
diff --git a/packages/react-docs/src/public/css/basscss_responsive_type_scale.css b/packages/react-docs/src/public/css/basscss_responsive_type_scale.css
new file mode 100644
index 000000000..cae23b4e7
--- /dev/null
+++ b/packages/react-docs/src/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 }
+}
diff --git a/packages/react-docs/src/public/css/github-gist.css b/packages/react-docs/src/public/css/github-gist.css
new file mode 100644
index 000000000..d5c8751c5
--- /dev/null
+++ b/packages/react-docs/src/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;
+}
diff --git a/packages/react-docs/src/public/css/roboto.css b/packages/react-docs/src/public/css/roboto.css
new file mode 100644
index 000000000..7af568a74
--- /dev/null
+++ b/packages/react-docs/src/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;
+}*/
diff --git a/packages/react-docs/src/public/css/roboto_mono.css b/packages/react-docs/src/public/css/roboto_mono.css
new file mode 100644
index 000000000..f8159d35f
--- /dev/null
+++ b/packages/react-docs/src/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;
+}*/
diff --git a/packages/react-docs/src/public/fonts/Roboto-Black.ttf b/packages/react-docs/src/public/fonts/Roboto-Black.ttf
new file mode 100755
index 000000000..689fe5cb3
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-Black.ttf differ
diff --git a/packages/react-docs/src/public/fonts/Roboto-BlackItalic.ttf b/packages/react-docs/src/public/fonts/Roboto-BlackItalic.ttf
new file mode 100755
index 000000000..0b4e0ee10
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-BlackItalic.ttf differ
diff --git a/packages/react-docs/src/public/fonts/Roboto-Bold.ttf b/packages/react-docs/src/public/fonts/Roboto-Bold.ttf
new file mode 100755
index 000000000..d3f01ad24
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-Bold.ttf differ
diff --git a/packages/react-docs/src/public/fonts/Roboto-BoldItalic.ttf b/packages/react-docs/src/public/fonts/Roboto-BoldItalic.ttf
new file mode 100755
index 000000000..41cc1e753
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-BoldItalic.ttf differ
diff --git a/packages/react-docs/src/public/fonts/Roboto-Italic.ttf b/packages/react-docs/src/public/fonts/Roboto-Italic.ttf
new file mode 100755
index 000000000..6a1cee5b2
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-Italic.ttf differ
diff --git a/packages/react-docs/src/public/fonts/Roboto-Light.ttf b/packages/react-docs/src/public/fonts/Roboto-Light.ttf
new file mode 100755
index 000000000..219063a57
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-Light.ttf differ
diff --git a/packages/react-docs/src/public/fonts/Roboto-LightItalic.ttf b/packages/react-docs/src/public/fonts/Roboto-LightItalic.ttf
new file mode 100755
index 000000000..0e81e876f
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-LightItalic.ttf differ
diff --git a/packages/react-docs/src/public/fonts/Roboto-Medium.ttf b/packages/react-docs/src/public/fonts/Roboto-Medium.ttf
new file mode 100755
index 000000000..1a7f3b0bb
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-Medium.ttf differ
diff --git a/packages/react-docs/src/public/fonts/Roboto-MediumItalic.ttf b/packages/react-docs/src/public/fonts/Roboto-MediumItalic.ttf
new file mode 100755
index 000000000..003029527
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-MediumItalic.ttf differ
diff --git a/packages/react-docs/src/public/fonts/Roboto-Regular.ttf b/packages/react-docs/src/public/fonts/Roboto-Regular.ttf
new file mode 100755
index 000000000..2c97eeadf
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-Regular.ttf differ
diff --git a/packages/react-docs/src/public/fonts/Roboto-Thin.ttf b/packages/react-docs/src/public/fonts/Roboto-Thin.ttf
new file mode 100755
index 000000000..b74a4fd1a
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-Thin.ttf differ
diff --git a/packages/react-docs/src/public/fonts/Roboto-ThinItalic.ttf b/packages/react-docs/src/public/fonts/Roboto-ThinItalic.ttf
new file mode 100755
index 000000000..dd0ddb852
Binary files /dev/null and b/packages/react-docs/src/public/fonts/Roboto-ThinItalic.ttf differ
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Bold.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Bold.ttf
new file mode 100755
index 000000000..07ef607d5
Binary files /dev/null and b/packages/react-docs/src/public/fonts/RobotoMono-Bold.ttf differ
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-BoldItalic.ttf b/packages/react-docs/src/public/fonts/RobotoMono-BoldItalic.ttf
new file mode 100755
index 000000000..1cca0bf45
Binary files /dev/null and b/packages/react-docs/src/public/fonts/RobotoMono-BoldItalic.ttf differ
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Italic.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Italic.ttf
new file mode 100755
index 000000000..ef92c372c
Binary files /dev/null and b/packages/react-docs/src/public/fonts/RobotoMono-Italic.ttf differ
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Light.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Light.ttf
new file mode 100755
index 000000000..63229b280
Binary files /dev/null and b/packages/react-docs/src/public/fonts/RobotoMono-Light.ttf differ
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-LightItalic.ttf b/packages/react-docs/src/public/fonts/RobotoMono-LightItalic.ttf
new file mode 100755
index 000000000..f25bed56a
Binary files /dev/null and b/packages/react-docs/src/public/fonts/RobotoMono-LightItalic.ttf differ
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Medium.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Medium.ttf
new file mode 100755
index 000000000..88ff0c15a
Binary files /dev/null and b/packages/react-docs/src/public/fonts/RobotoMono-Medium.ttf differ
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-MediumItalic.ttf b/packages/react-docs/src/public/fonts/RobotoMono-MediumItalic.ttf
new file mode 100755
index 000000000..307efad8f
Binary files /dev/null and b/packages/react-docs/src/public/fonts/RobotoMono-MediumItalic.ttf differ
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Regular.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Regular.ttf
new file mode 100755
index 000000000..b158a334e
Binary files /dev/null and b/packages/react-docs/src/public/fonts/RobotoMono-Regular.ttf differ
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-Thin.ttf b/packages/react-docs/src/public/fonts/RobotoMono-Thin.ttf
new file mode 100755
index 000000000..309484d32
Binary files /dev/null and b/packages/react-docs/src/public/fonts/RobotoMono-Thin.ttf differ
diff --git a/packages/react-docs/src/public/fonts/RobotoMono-ThinItalic.ttf b/packages/react-docs/src/public/fonts/RobotoMono-ThinItalic.ttf
new file mode 100755
index 000000000..e1bb9121e
Binary files /dev/null and b/packages/react-docs/src/public/fonts/RobotoMono-ThinItalic.ttf differ
diff --git a/packages/react-docs/src/public/index.html b/packages/react-docs/src/public/index.html
new file mode 100644
index 000000000..9e7184941
--- /dev/null
+++ b/packages/react-docs/src/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>
diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index 8be7cd62d..8db9b34b4 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -37,8 +37,6 @@ import { SourceLink } from './source_link';
 import { Type } from './type';
 import { TypeDefinition } from './type_definition';
 
-const TOP_BAR_HEIGHT = 60;
-
 const networkNameToColor: { [network: string]: string } = {
     [Networks.Kovan]: colors.purple,
     [Networks.Ropsten]: colors.red,
@@ -53,30 +51,15 @@ export interface DocumentationProps {
     docAgnosticFormat?: DocAgnosticFormat;
     sidebarHeader?: React.ReactNode;
     sourceUrl: string;
+    topBarHeight?: number;
 }
 
 export interface DocumentationState {}
 
-const styles: Styles = {
-    mainContainers: {
-        position: 'absolute',
-        top: 1,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        overflowZ: 'hidden',
-        overflowY: 'scroll',
-        minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-        WebkitOverflowScrolling: 'touch',
-    },
-    menuContainer: {
-        borderColor: colors.grey300,
-        maxWidth: 330,
-        marginLeft: 20,
-    },
-};
-
 export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
+    public static defaultProps: Partial<DocumentationProps> = {
+        topBarHeight: 0,
+    };
     public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
         if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
             const hash = window.location.hash.slice(1);
@@ -84,27 +67,45 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
         }
     }
     public render() {
+        const styles: Styles = {
+            mainContainers: {
+                position: 'absolute',
+                top: 1,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                overflowZ: 'hidden',
+                overflowY: 'scroll',
+                minHeight: `calc(100vh - ${this.props.topBarHeight}px)`,
+                WebkitOverflowScrolling: 'touch',
+            },
+            menuContainer: {
+                borderColor: colors.grey300,
+                maxWidth: 330,
+                marginLeft: 20,
+            },
+        };
         const menuSubsectionsBySection = this.props.docsInfo.getMenuSubsectionsBySection(this.props.docAgnosticFormat);
         return (
             <div>
                 {_.isUndefined(this.props.docAgnosticFormat) ? (
-                    this._renderLoading()
+                    this._renderLoading(styles.mainContainers)
                 ) : (
                     <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}>
                         <div
                             className="mx-auto max-width-4 flex"
-                            style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
+                            style={{ color: colors.grey800, height: `calc(100vh - ${this.props.topBarHeight}px)` }}
                         >
                             <div
                                 className="relative sm-hide xs-hide"
-                                style={{ width: '36%', height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
+                                style={{ width: '36%', height: `calc(100vh - ${this.props.topBarHeight}px)` }}
                             >
                                 <div
                                     className="border-right absolute"
                                     style={{
                                         ...styles.menuContainer,
                                         ...styles.mainContainers,
-                                        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+                                        height: `calc(100vh - ${this.props.topBarHeight}px)`,
                                     }}
                                 >
                                     <NestedSidebarMenu
@@ -135,9 +136,9 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
             </div>
         );
     }
-    private _renderLoading() {
+    private _renderLoading(mainContainersStyles: React.CSSProperties) {
         return (
-            <div className="col col-12" style={styles.mainContainers}>
+            <div className="col col-12" style={mainContainersStyles}>
                 <div
                     className="relative sm-px2 sm-pt2 sm-m1"
                     style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
@@ -210,6 +211,9 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                 />
             );
         });
+        const headerStyle: React.CSSProperties = {
+            fontWeight: 100,
+        };
         return (
             <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
                 <div className="flex pb2">
@@ -222,26 +226,26 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                 {docSection.constructors.length > 0 &&
                     this.props.docsInfo.isVisibleConstructor(sectionName) && (
                         <div>
-                            <h2 className="thin">Constructor</h2>
+                            <h2 style={headerStyle}>Constructor</h2>
                             {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
                         </div>
                     )}
                 {docSection.properties.length > 0 && (
                     <div>
-                        <h2 className="thin">Properties</h2>
+                        <h2 style={headerStyle}>Properties</h2>
                         <div>{propertyDefs}</div>
                     </div>
                 )}
                 {docSection.methods.length > 0 && (
                     <div>
-                        <h2 className="thin">Methods</h2>
+                        <h2 style={headerStyle}>Methods</h2>
                         <div>{methodDefs}</div>
                     </div>
                 )}
                 {!_.isUndefined(docSection.events) &&
                     docSection.events.length > 0 && (
                         <div>
-                            <h2 className="thin">Events</h2>
+                            <h2 style={headerStyle}>Events</h2>
                             <div>{eventDefs}</div>
                         </div>
                     )}
diff --git a/packages/react-docs/src/ts/example/index.tsx b/packages/react-docs/src/ts/example/index.tsx
new file mode 100644
index 000000000..7a0eab882
--- /dev/null
+++ b/packages/react-docs/src/ts/example/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 '../components/documentation';
+import { DocsInfo } from '../docs_info';
+import { DocsInfoConfig, SupportedDocJson } from '../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'),
+);
diff --git a/packages/react-docs/src/ts/example/json/web3_wrapper_typedoc_output.json b/packages/react-docs/src/ts/example/json/web3_wrapper_typedoc_output.json
new file mode 100644
index 000000000..b2e01f614
--- /dev/null
+++ b/packages/react-docs/src/ts/example/json/web3_wrapper_typedoc_output.json
@@ -0,0 +1,1364 @@
+{
+	"id": 0,
+	"name": "@0xproject/web3-wrapper",
+	"kind": 0,
+	"flags": {},
+	"children": [
+		{
+			"id": 1,
+			"name": "\"index\"",
+			"kind": 1,
+			"kindString": "External module",
+			"flags": {
+				"isExported": true
+			},
+			"originalName": "/Users/fabioberger/Documents/projects/0x_project/0x-monorepo/packages/web3-wrapper/src/index.ts",
+			"children": [
+				{
+					"id": 11,
+					"name": "Web3Wrapper",
+					"kind": 128,
+					"kindString": "Class",
+					"flags": {
+						"isExported": true
+					},
+					"children": [
+						{
+							"id": 12,
+							"name": "constructor",
+							"kind": 512,
+							"kindString": "Constructor",
+							"flags": {
+								"isExported": true
+							},
+							"signatures": [
+								{
+									"id": 13,
+									"name": "new Web3Wrapper",
+									"kind": 16384,
+									"kindString": "Constructor signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 14,
+											"name": "provider",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "Provider"
+											}
+										},
+										{
+											"id": 15,
+											"name": "defaults",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {
+												"isOptional": true
+											},
+											"type": {
+												"type": "reference",
+												"name": "Partial",
+												"typeArguments": [
+													{
+														"type": "reference",
+														"name": "TxData"
+													}
+												]
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Web3Wrapper",
+										"id": 11
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 20,
+									"character": 38
+								}
+							]
+						},
+						{
+							"id": 68,
+							"name": "callAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 69,
+									"name": "callAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 70,
+											"name": "callData",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "CallData"
+											}
+										},
+										{
+											"id": 71,
+											"name": "defaultBlock",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {
+												"isOptional": true
+											},
+											"type": {
+												"type": "reference",
+												"name": "Web3.BlockParam"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "string"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 135,
+									"character": 26
+								}
+							]
+						},
+						{
+							"id": 42,
+							"name": "doesContractExistAtAddressAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 43,
+									"name": "doesContractExistAtAddressAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 44,
+											"name": "address",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "boolean"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 76,
+									"character": 48
+								}
+							]
+						},
+						{
+							"id": 65,
+							"name": "estimateGasAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 66,
+									"name": "estimateGasAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 67,
+											"name": "txData",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "Partial",
+												"typeArguments": [
+													{
+														"type": "reference",
+														"name": "TxData"
+													}
+												]
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "number"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 131,
+									"character": 33
+								}
+							]
+						},
+						{
+							"id": 57,
+							"name": "getAvailableAddressesAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 58,
+									"name": "getAvailableAddressesAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "array",
+												"elementType": {
+													"type": "intrinsic",
+													"name": "string"
+												}
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 98,
+									"character": 43
+								}
+							]
+						},
+						{
+							"id": 39,
+							"name": "getBalanceInWeiAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 40,
+									"name": "getBalanceInWeiAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 41,
+											"name": "owner",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "reference",
+												"name": "BigNumber"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 70,
+									"character": 37
+								}
+							]
+						},
+						{
+							"id": 51,
+							"name": "getBlockAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 52,
+									"name": "getBlockAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 53,
+											"name": "blockParam",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "union",
+												"types": [
+													{
+														"type": "intrinsic",
+														"name": "string"
+													},
+													{
+														"type": "reference",
+														"name": "Web3.BlockParam"
+													}
+												]
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "reference",
+												"name": "BlockWithoutTransactionData"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 90,
+									"character": 30
+								}
+							]
+						},
+						{
+							"id": 49,
+							"name": "getBlockNumberAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 50,
+									"name": "getBlockNumberAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "number"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 86,
+									"character": 36
+								}
+							]
+						},
+						{
+							"id": 54,
+							"name": "getBlockTimestampAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 55,
+									"name": "getBlockTimestampAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 56,
+											"name": "blockParam",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "union",
+												"types": [
+													{
+														"type": "intrinsic",
+														"name": "string"
+													},
+													{
+														"type": "reference",
+														"name": "Web3.BlockParam"
+													}
+												]
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "number"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 94,
+									"character": 39
+								}
+							]
+						},
+						{
+							"id": 16,
+							"name": "getContractDefaults",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 17,
+									"name": "getContractDefaults",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Partial",
+										"typeArguments": [
+											{
+												"type": "reference",
+												"name": "TxData"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 33,
+									"character": 30
+								}
+							]
+						},
+						{
+							"id": 62,
+							"name": "getContractFromAbi",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 63,
+									"name": "getContractFromAbi",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 64,
+											"name": "abi",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "Web3.ContractAbi"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Contract",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "any"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 127,
+									"character": 29
+								}
+							]
+						},
+						{
+							"id": 34,
+							"name": "getCurrentProvider",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 35,
+									"name": "getCurrentProvider",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Provider"
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 63,
+									"character": 29
+								}
+							]
+						},
+						{
+							"id": 59,
+							"name": "getLogsAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 60,
+									"name": "getLogsAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 61,
+											"name": "filter",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "FilterObject"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "array",
+												"elementType": {
+													"type": "reference",
+													"name": "LogEntry"
+												}
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 103,
+									"character": 29
+								}
+							]
+						},
+						{
+							"id": 29,
+							"name": "getNetworkIdAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 30,
+									"name": "getNetworkIdAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "number"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 51,
+									"character": 34
+								}
+							]
+						},
+						{
+							"id": 27,
+							"name": "getNodeVersionAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 28,
+									"name": "getNodeVersionAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "string"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 47,
+									"character": 36
+								}
+							]
+						},
+						{
+							"id": 31,
+							"name": "getTransactionReceiptAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 32,
+									"name": "getTransactionReceiptAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 33,
+											"name": "txHash",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "reference",
+												"name": "TransactionReceipt"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 56,
+									"character": 43
+								}
+							]
+						},
+						{
+							"id": 21,
+							"name": "isAddress",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 22,
+									"name": "isAddress",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 23,
+											"name": "address",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "intrinsic",
+										"name": "boolean"
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 39,
+									"character": 20
+								}
+							]
+						},
+						{
+							"id": 24,
+							"name": "isSenderAddressAvailableAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 25,
+									"name": "isSenderAddressAvailableAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 26,
+											"name": "senderAddress",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "boolean"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 42,
+									"character": 46
+								}
+							]
+						},
+						{
+							"id": 72,
+							"name": "sendTransactionAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 73,
+									"name": "sendTransactionAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 74,
+											"name": "txData",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "TxData"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "string"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 139,
+									"character": 37
+								}
+							]
+						},
+						{
+							"id": 18,
+							"name": "setProvider",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 19,
+									"name": "setProvider",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 20,
+											"name": "provider",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "Provider"
+											}
+										}
+									],
+									"type": {
+										"type": "intrinsic",
+										"name": "void"
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 36,
+									"character": 22
+								}
+							]
+						},
+						{
+							"id": 45,
+							"name": "signTransactionAsync",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 46,
+									"name": "signTransactionAsync",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 47,
+											"name": "address",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										},
+										{
+											"id": 48,
+											"name": "message",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "intrinsic",
+												"name": "string"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "Promise",
+										"typeArguments": [
+											{
+												"type": "intrinsic",
+												"name": "string"
+											}
+										]
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 82,
+									"character": 37
+								}
+							]
+						},
+						{
+							"id": 36,
+							"name": "toWei",
+							"kind": 2048,
+							"kindString": "Method",
+							"flags": {
+								"isExported": true,
+								"isPublic": true
+							},
+							"signatures": [
+								{
+									"id": 37,
+									"name": "toWei",
+									"kind": 4096,
+									"kindString": "Call signature",
+									"flags": {},
+									"parameters": [
+										{
+											"id": 38,
+											"name": "ethAmount",
+											"kind": 32768,
+											"kindString": "Parameter",
+											"flags": {},
+											"type": {
+												"type": "reference",
+												"name": "BigNumber"
+											}
+										}
+									],
+									"type": {
+										"type": "reference",
+										"name": "BigNumber"
+									}
+								}
+							],
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 66,
+									"character": 16
+								}
+							]
+						}
+					],
+					"groups": [
+						{
+							"title": "Constructors",
+							"kind": 512,
+							"children": [
+								12
+							]
+						},
+						{
+							"title": "Methods",
+							"kind": 2048,
+							"children": [
+								68,
+								42,
+								65,
+								57,
+								39,
+								51,
+								49,
+								54,
+								16,
+								62,
+								34,
+								59,
+								29,
+								27,
+								31,
+								21,
+								24,
+								72,
+								18,
+								45,
+								36
+							]
+						}
+					],
+					"sources": [
+						{
+							"fileName": "index.ts",
+							"line": 17,
+							"character": 24
+						}
+					]
+				},
+				{
+					"id": 2,
+					"name": "RawLogEntry",
+					"kind": 256,
+					"kindString": "Interface",
+					"flags": {},
+					"children": [
+						{
+							"id": 8,
+							"name": "address",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 12,
+									"character": 11
+								}
+							],
+							"type": {
+								"type": "intrinsic",
+								"name": "string"
+							}
+						},
+						{
+							"id": 6,
+							"name": "blockHash",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 10,
+									"character": 13
+								}
+							],
+							"type": {
+								"type": "union",
+								"types": [
+									{
+										"type": "intrinsic",
+										"name": "string"
+									},
+									{
+										"type": "intrinsic",
+										"name": "null"
+									}
+								]
+							}
+						},
+						{
+							"id": 7,
+							"name": "blockNumber",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 11,
+									"character": 15
+								}
+							],
+							"type": {
+								"type": "union",
+								"types": [
+									{
+										"type": "intrinsic",
+										"name": "string"
+									},
+									{
+										"type": "intrinsic",
+										"name": "null"
+									}
+								]
+							}
+						},
+						{
+							"id": 9,
+							"name": "data",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 13,
+									"character": 8
+								}
+							],
+							"type": {
+								"type": "intrinsic",
+								"name": "string"
+							}
+						},
+						{
+							"id": 3,
+							"name": "logIndex",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 7,
+									"character": 12
+								}
+							],
+							"type": {
+								"type": "union",
+								"types": [
+									{
+										"type": "intrinsic",
+										"name": "string"
+									},
+									{
+										"type": "intrinsic",
+										"name": "null"
+									}
+								]
+							}
+						},
+						{
+							"id": 10,
+							"name": "topics",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 14,
+									"character": 10
+								}
+							],
+							"type": {
+								"type": "array",
+								"elementType": {
+									"type": "intrinsic",
+									"name": "string"
+								}
+							}
+						},
+						{
+							"id": 5,
+							"name": "transactionHash",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 9,
+									"character": 19
+								}
+							],
+							"type": {
+								"type": "intrinsic",
+								"name": "string"
+							}
+						},
+						{
+							"id": 4,
+							"name": "transactionIndex",
+							"kind": 1024,
+							"kindString": "Property",
+							"flags": {},
+							"sources": [
+								{
+									"fileName": "index.ts",
+									"line": 8,
+									"character": 20
+								}
+							],
+							"type": {
+								"type": "union",
+								"types": [
+									{
+										"type": "intrinsic",
+										"name": "string"
+									},
+									{
+										"type": "intrinsic",
+										"name": "null"
+									}
+								]
+							}
+						}
+					],
+					"groups": [
+						{
+							"title": "Properties",
+							"kind": 1024,
+							"children": [
+								8,
+								6,
+								7,
+								9,
+								3,
+								10,
+								5,
+								4
+							]
+						}
+					],
+					"sources": [
+						{
+							"fileName": "index.ts",
+							"line": 6,
+							"character": 21
+						}
+					]
+				}
+			],
+			"groups": [
+				{
+					"title": "Classes",
+					"kind": 128,
+					"children": [
+						11
+					]
+				},
+				{
+					"title": "Interfaces",
+					"kind": 256,
+					"children": [
+						2
+					]
+				}
+			],
+			"sources": [
+				{
+					"fileName": "index.ts",
+					"line": 1,
+					"character": 0
+				}
+			]
+		}
+	],
+	"groups": [
+		{
+			"title": "External modules",
+			"kind": 1,
+			"children": [
+				1
+			]
+		}
+	]
+}
\ No newline at end of file
diff --git a/packages/react-docs/src/ts/globals.d.ts b/packages/react-docs/src/ts/globals.d.ts
index 31c8a2c1f..c7cd53854 100644
--- a/packages/react-docs/src/ts/globals.d.ts
+++ b/packages/react-docs/src/ts/globals.d.ts
@@ -5,3 +5,10 @@ declare function compareVersions(firstVersion: string, secondVersion: string): n
 declare module 'compare-versions' {
     export = compareVersions;
 }
+
+declare module '*.json' {
+    const json: any;
+    /* tslint:disable */
+    export default json;
+    /* tslint:enable */
+}
diff --git a/packages/react-docs/webpack.config.js b/packages/react-docs/webpack.config.js
new file mode 100644
index 000000000..768bb238c
--- /dev/null
+++ b/packages/react-docs/webpack.config.js
@@ -0,0 +1,79 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+    entry: ['./src/ts/example/index.tsx'],
+    output: {
+        path: path.join(__dirname, '/src/public'),
+        filename: 'bundle.js',
+        chunkFilename: 'bundle-[name].js',
+        publicPath: '/',
+    },
+    devtool: 'source-map',
+    resolve: {
+        modules: [path.join(__dirname, '/src/ts'), 'node_modules'],
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json', '.md'],
+        alias: {
+            ts: path.join(__dirname, '/src/ts'),
+            less: path.join(__dirname, '/src/less'),
+            md: path.join(__dirname, '/src/md'),
+        },
+    },
+    module: {
+        rules: [
+            {
+                test: /\.js$/,
+                loader: 'source-map-loader',
+            },
+            {
+                test: /\.tsx?$/,
+                loader: 'awesome-typescript-loader',
+            },
+            {
+                test: /\.css$/,
+                loaders: ['style-loader', 'css-loader'],
+            },
+            {
+                test: /\.less$/,
+                loader: 'style-loader!css-loader!less-loader',
+                exclude: /node_modules/,
+            },
+            {
+                test: /\.json$/,
+                loader: 'json-loader',
+            },
+            {
+                test: /\.md$/,
+                use: 'raw-loader',
+            },
+        ],
+    },
+    devServer: {
+        port: 3000,
+        disableHostCheck: true,
+        historyApiFallback: {
+            // Fixes issue where having dots in URL path that aren't part of fileNames causes webpack-dev-server
+            // to fail.
+            // Source: https://github.com/cvut/fittable/issues/171
+            rewrites: [
+                {
+                    from: /.*$/,
+                    to: function() {
+                        return 'index.html';
+                    },
+                },
+            ],
+        },
+        contentBase: path.join(__dirname, '/src/public'),
+    },
+    plugins:
+        process.env.NODE_ENV === 'production'
+            ? [
+                  new webpack.DefinePlugin({
+                      'process.env': {
+                          NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+                      },
+                  }),
+              ]
+            : [],
+};
-- 
cgit v1.2.3