Add example docs to react-docs package
This commit is contained in:
Fabio Berger
37
packages/react-docs/src/less/all.less
Normal file
37
packages/react-docs/src/less/all.less
Normal file
@@ -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
|
||||
}
|
||||
1
packages/react-docs/src/md/introduction.md
Normal file
1
packages/react-docs/src/md/introduction.md
Normal file
@@ -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.
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
160
packages/react-docs/src/public/css/basscss_responsive_margin.css
Normal file
160
packages/react-docs/src/public/css/basscss_responsive_margin.css
Normal file
@@ -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; }
|
||||
|
||||
}
|
||||
@@ -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 }
|
||||
|
||||
}
|
||||
@@ -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 }
|
||||
}
|
||||
71
packages/react-docs/src/public/css/github-gist.css
Normal file
71
packages/react-docs/src/public/css/github-gist.css
Normal file
@@ -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;
|
||||
}
|
||||
83
packages/react-docs/src/public/css/roboto.css
Normal file
83
packages/react-docs/src/public/css/roboto.css
Normal file
@@ -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;
|
||||
}*/
|
||||
69
packages/react-docs/src/public/css/roboto_mono.css
Normal file
69
packages/react-docs/src/public/css/roboto_mono.css
Normal file
@@ -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;
|
||||
}*/
|
||||
BIN
packages/react-docs/src/public/fonts/Roboto-Black.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-Black.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/Roboto-BlackItalic.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-BlackItalic.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/Roboto-Bold.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-Bold.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/Roboto-BoldItalic.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-BoldItalic.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/Roboto-Italic.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-Italic.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/Roboto-Light.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-Light.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/Roboto-LightItalic.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-LightItalic.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/Roboto-Medium.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-Medium.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/Roboto-MediumItalic.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-MediumItalic.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/Roboto-Regular.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-Regular.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/Roboto-Thin.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-Thin.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/Roboto-ThinItalic.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/Roboto-ThinItalic.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/RobotoMono-Bold.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/RobotoMono-Bold.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/RobotoMono-BoldItalic.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/RobotoMono-BoldItalic.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/RobotoMono-Italic.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/RobotoMono-Italic.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/RobotoMono-Light.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/RobotoMono-Light.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/RobotoMono-LightItalic.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/RobotoMono-LightItalic.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/RobotoMono-Medium.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/RobotoMono-Medium.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/RobotoMono-MediumItalic.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/RobotoMono-MediumItalic.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/RobotoMono-Regular.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/RobotoMono-Regular.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/RobotoMono-Thin.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/RobotoMono-Thin.ttf
Executable file
Binary file not shown.
BIN
packages/react-docs/src/public/fonts/RobotoMono-ThinItalic.ttf
Executable file
BIN
packages/react-docs/src/public/fonts/RobotoMono-ThinItalic.ttf
Executable file
Binary file not shown.
23
packages/react-docs/src/public/index.html
Normal file
23
packages/react-docs/src/public/index.html
Normal file
@@ -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>
|
||||
@@ -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>
|
||||
)}
|
||||
|
||||
67
packages/react-docs/src/ts/example/index.tsx
Normal file
67
packages/react-docs/src/ts/example/index.tsx
Normal file
@@ -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'),
|
||||
);
|
||||
File diff suppressed because it is too large
Load Diff
7
packages/react-docs/src/ts/globals.d.ts
vendored
7
packages/react-docs/src/ts/globals.d.ts
vendored
@@ -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 */
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user