From de20ef1a49966153f25236ee68b186cd49f8dc20 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Fri, 12 Oct 2018 15:54:44 +0200
Subject: Refactor Home so that Dev section chrome is reusable across pages

---
 .../react-docs/src/components/doc_reference.tsx    | 331 ++++++++++++++++
 .../react-docs/src/components/documentation.tsx    | 427 ---------------------
 2 files changed, 331 insertions(+), 427 deletions(-)
 create mode 100644 packages/react-docs/src/components/doc_reference.tsx
 delete mode 100644 packages/react-docs/src/components/documentation.tsx

(limited to 'packages/react-docs/src/components')

diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx
new file mode 100644
index 000000000..38ec818db
--- /dev/null
+++ b/packages/react-docs/src/components/doc_reference.tsx
@@ -0,0 +1,331 @@
+import {
+    colors,
+    constants as sharedConstants,
+    EtherscanLinkSuffixes,
+    Link,
+    MarkdownSection,
+    Networks,
+    SectionHeader,
+    utils as sharedUtils,
+} from '@0xproject/react-shared';
+import {
+    DocAgnosticFormat,
+    Event,
+    ExternalExportToLink,
+    Property,
+    SolidityMethod,
+    TypeDefinitionByName,
+    TypescriptFunction,
+    TypescriptMethod,
+} from '@0xproject/types';
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as semver from 'semver';
+
+import { DocsInfo } from '../docs_info';
+import { AddressByContractName, SupportedDocJson } from '../types';
+import { constants } from '../utils/constants';
+
+import { Badge } from './badge';
+import { Comment } from './comment';
+import { EventDefinition } from './event_definition';
+import { PropertyBlock } from './property_block';
+import { SignatureBlock } from './signature_block';
+import { TypeDefinition } from './type_definition';
+
+const networkNameToColor: { [network: string]: string } = {
+    [Networks.Kovan]: colors.purple,
+    [Networks.Ropsten]: colors.red,
+    [Networks.Mainnet]: colors.turquois,
+    [Networks.Rinkeby]: colors.darkYellow,
+};
+
+export interface DocReferenceProps {
+    selectedVersion: string;
+    availableVersions: string[];
+    docsInfo: DocsInfo;
+    sourceUrl: string;
+    docAgnosticFormat?: DocAgnosticFormat;
+}
+
+export interface DocReferenceState {
+    isHoveringSidebar: boolean;
+}
+
+export class DocReference extends React.Component<DocReferenceProps, DocReferenceState> {
+    constructor(props: DocReferenceProps) {
+        super(props);
+        this.state = {
+            isHoveringSidebar: false,
+        };
+    }
+    public componentDidMount(): void {
+        window.addEventListener('hashchange', this._onHashChanged.bind(this), false);
+    }
+    public componentWillUnmount(): void {
+        window.removeEventListener('hashchange', this._onHashChanged.bind(this), false);
+    }
+    public componentDidUpdate(prevProps: DocReferenceProps, _prevState: DocReferenceState): void {
+        if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
+            const hash = window.location.hash.slice(1);
+            sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
+        }
+    }
+    public render(): React.ReactNode {
+        const subMenus = _.values(this.props.docsInfo.markdownMenu);
+        const orderedSectionNames = _.flatten(subMenus);
+
+        const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat);
+        const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName));
+
+        return (
+            <div>
+                <div id={sharedConstants.SCROLL_TOP_ID} />
+                {renderedSections}
+            </div>
+        );
+    }
+    private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode {
+        const markdownVersions = _.keys(this.props.docsInfo.sectionNameToMarkdownByVersion);
+        const eligibleVersions = _.filter(markdownVersions, mdVersion => {
+            return semver.lte(mdVersion, this.props.selectedVersion);
+        });
+        if (_.isEmpty(eligibleVersions)) {
+            throw new Error(
+                `No eligible markdown sections found for ${this.props.docsInfo.displayName} version ${
+                    this.props.selectedVersion
+                }.`,
+            );
+        }
+        const sortedEligibleVersions = eligibleVersions.sort(semver.rcompare.bind(semver));
+        const closestVersion = sortedEligibleVersions[0];
+        const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdownByVersion[closestVersion][sectionName];
+        if (!_.isUndefined(markdownFileIfExists)) {
+            return (
+                <MarkdownSection
+                    key={`markdown-section-${sectionName}`}
+                    sectionName={sectionName}
+                    markdownContent={markdownFileIfExists}
+                />
+            );
+        }
+
+        const docSection = this.props.docAgnosticFormat[sectionName];
+        if (_.isUndefined(docSection)) {
+            return null;
+        }
+
+        const isExportedFunctionSection =
+            docSection.functions.length === 1 &&
+            _.isEmpty(docSection.types) &&
+            _.isEmpty(docSection.methods) &&
+            _.isEmpty(docSection.constructors) &&
+            _.isEmpty(docSection.properties) &&
+            _.isEmpty(docSection.events);
+
+        const sortedTypes = _.sortBy(docSection.types, 'name');
+        const typeDefs = _.map(sortedTypes, (customType, i) => {
+            return (
+                <TypeDefinition
+                    sectionName={sectionName}
+                    key={`type-${customType.name}-${i}`}
+                    customType={customType}
+                    docsInfo={this.props.docsInfo}
+                    typeDefinitionByName={typeDefinitionByName}
+                    isInPopover={false}
+                />
+            );
+        });
+
+        const sortedProperties = _.sortBy(docSection.properties, 'name');
+        const propertyDefs = _.map(
+            sortedProperties,
+            this._renderProperty.bind(this, sectionName, typeDefinitionByName),
+        );
+
+        const sortedMethods = _.sortBy(docSection.methods, 'name');
+        const methodDefs = _.map(sortedMethods, method => {
+            return this._renderSignatureBlocks(method, sectionName, typeDefinitionByName);
+        });
+
+        const sortedFunctions = _.sortBy(docSection.functions, 'name');
+        const functionDefs = _.map(sortedFunctions, func => {
+            return this._renderSignatureBlocks(func, sectionName, typeDefinitionByName);
+        });
+
+        const sortedEvents = _.sortBy(docSection.events, 'name');
+        const eventDefs = _.map(sortedEvents, (event: Event, i: number) => {
+            return (
+                <EventDefinition
+                    key={`event-${event.name}-${i}`}
+                    event={event}
+                    sectionName={sectionName}
+                    docsInfo={this.props.docsInfo}
+                />
+            );
+        });
+        const headerStyle: React.CSSProperties = {
+            fontWeight: 100,
+        };
+        return (
+            <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
+                <div className="flex pb2">
+                    <div style={{ marginRight: 7 }}>
+                        <SectionHeader sectionName={sectionName} />
+                    </div>
+                    {this._renderNetworkBadgesIfExists(sectionName)}
+                </div>
+                {docSection.comment && <Comment comment={docSection.comment} />}
+                {!_.isEmpty(docSection.constructors) && (
+                    <div>
+                        <h2 style={headerStyle}>Constructor</h2>
+                        {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
+                    </div>
+                )}
+                {!_.isEmpty(docSection.properties) && (
+                    <div>
+                        <h2 style={headerStyle}>Properties</h2>
+                        <div>{propertyDefs}</div>
+                    </div>
+                )}
+                {!_.isEmpty(docSection.methods) && (
+                    <div>
+                        <h2 style={headerStyle}>Methods</h2>
+                        <div>{methodDefs}</div>
+                    </div>
+                )}
+                {!_.isEmpty(docSection.functions) && (
+                    <div>
+                        {!isExportedFunctionSection && <h2 style={headerStyle}>Functions</h2>}
+                        <div>{functionDefs}</div>
+                    </div>
+                )}
+                {!_.isUndefined(docSection.events) &&
+                    docSection.events.length > 0 && (
+                        <div>
+                            <h2 style={headerStyle}>Events</h2>
+                            <div>{eventDefs}</div>
+                        </div>
+                    )}
+                {!_.isUndefined(docSection.externalExportToLink) &&
+                    this._renderExternalExports(docSection.externalExportToLink)}
+                {!_.isUndefined(typeDefs) &&
+                    typeDefs.length > 0 && (
+                        <div>
+                            <div>{typeDefs}</div>
+                        </div>
+                    )}
+            </div>
+        );
+    }
+    private _renderExternalExports(externalExportToLink: ExternalExportToLink): React.ReactNode {
+        const externalExports = _.map(externalExportToLink, (link: string, exportName: string) => {
+            return (
+                <div className="pt2" key={`external-export-${exportName}`}>
+                    <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
+                        {`import { `}
+                        <Link to={link} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}>
+                            {exportName}
+                        </Link>
+                        {` } from '${this.props.docsInfo.packageName}'`}
+                    </code>
+                </div>
+            );
+        });
+        return <div>{externalExports}</div>;
+    }
+    private _renderNetworkBadgesIfExists(sectionName: string): React.ReactNode {
+        if (this.props.docsInfo.type !== SupportedDocJson.SolDoc) {
+            return null;
+        }
+
+        const networkToAddressByContractName = this.props.docsInfo.contractsByVersionByNetworkId[
+            this.props.selectedVersion
+        ];
+        const badges = _.map(
+            networkToAddressByContractName,
+            (addressByContractName: AddressByContractName, networkName: string) => {
+                const contractAddress = addressByContractName[sectionName];
+                if (_.isUndefined(contractAddress)) {
+                    return null;
+                }
+                const linkIfExists = sharedUtils.getEtherScanLinkIfExists(
+                    contractAddress,
+                    sharedConstants.NETWORK_ID_BY_NAME[networkName],
+                    EtherscanLinkSuffixes.Address,
+                );
+                return (
+                    <div style={{ marginTop: 8 }}>
+                        <Link
+                            key={`badge-${networkName}-${sectionName}`}
+                            to={linkIfExists}
+                            shouldOpenInNewTab={true}
+                            fontColor={colors.white}
+                        >
+                            <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} />
+                        </Link>
+                    </div>
+                );
+            },
+        );
+        return badges;
+    }
+    private _renderConstructors(
+        constructors: SolidityMethod[] | TypescriptMethod[],
+        sectionName: string,
+        typeDefinitionByName: TypeDefinitionByName,
+    ): React.ReactNode {
+        const constructorDefs = _.map(constructors, constructor => {
+            return this._renderSignatureBlocks(constructor, sectionName, typeDefinitionByName);
+        });
+        return <div>{constructorDefs}</div>;
+    }
+    private _renderProperty(
+        sectionName: string,
+        typeDefinitionByName: TypeDefinitionByName,
+        property: Property,
+    ): React.ReactNode {
+        return (
+            <PropertyBlock
+                key={`property-${property.name}-${property.type.name}`}
+                property={property}
+                sectionName={sectionName}
+                docsInfo={this.props.docsInfo}
+                sourceUrl={this.props.sourceUrl}
+                selectedVersion={this.props.selectedVersion}
+                typeDefinitionByName={typeDefinitionByName}
+            />
+        );
+    }
+    private _renderSignatureBlocks(
+        method: SolidityMethod | TypescriptFunction | TypescriptMethod,
+        sectionName: string,
+        typeDefinitionByName: TypeDefinitionByName,
+    ): React.ReactNode {
+        return (
+            <SignatureBlock
+                key={`method-${method.name}-${sectionName}`}
+                sectionName={sectionName}
+                method={method}
+                typeDefinitionByName={typeDefinitionByName}
+                libraryVersion={this.props.selectedVersion}
+                docsInfo={this.props.docsInfo}
+                sourceUrl={this.props.sourceUrl}
+            />
+        );
+    }
+    private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void {
+        this.setState({
+            isHoveringSidebar: true,
+        });
+    }
+    private _onSidebarHoverOff(): void {
+        this.setState({
+            isHoveringSidebar: false,
+        });
+    }
+    private _onHashChanged(_event: any): void {
+        const hash = window.location.hash.slice(1);
+        sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
+    }
+}
diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx
deleted file mode 100644
index 6a08d50e0..000000000
--- a/packages/react-docs/src/components/documentation.tsx
+++ /dev/null
@@ -1,427 +0,0 @@
-import {
-    colors,
-    constants as sharedConstants,
-    EtherscanLinkSuffixes,
-    Link,
-    MarkdownSection,
-    NestedSidebarMenu,
-    Networks,
-    SectionHeader,
-    Styles,
-    utils as sharedUtils,
-} from '@0xproject/react-shared';
-import {
-    DocAgnosticFormat,
-    Event,
-    ExternalExportToLink,
-    Property,
-    SolidityMethod,
-    TypeDefinitionByName,
-    TypescriptFunction,
-    TypescriptMethod,
-} from '@0xproject/types';
-import * as _ from 'lodash';
-import CircularProgress from 'material-ui/CircularProgress';
-import * as React from 'react';
-import * as semver from 'semver';
-
-import { DocsInfo } from '../docs_info';
-import { AddressByContractName, SupportedDocJson } from '../types';
-import { constants } from '../utils/constants';
-
-import { Badge } from './badge';
-import { Comment } from './comment';
-import { EventDefinition } from './event_definition';
-import { PropertyBlock } from './property_block';
-import { SignatureBlock } from './signature_block';
-import { TypeDefinition } from './type_definition';
-
-const networkNameToColor: { [network: string]: string } = {
-    [Networks.Kovan]: colors.purple,
-    [Networks.Ropsten]: colors.red,
-    [Networks.Mainnet]: colors.turquois,
-    [Networks.Rinkeby]: colors.darkYellow,
-};
-
-export interface DocumentationProps {
-    selectedVersion: string;
-    availableVersions: string[];
-    docsInfo: DocsInfo;
-    sourceUrl: string;
-    onVersionSelected: (semver: string) => void;
-    docAgnosticFormat?: DocAgnosticFormat;
-    sidebarHeader?: React.ReactNode;
-    topBarHeight?: number;
-}
-
-export interface DocumentationState {
-    isHoveringSidebar: boolean;
-}
-
-export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
-    public static defaultProps: Partial<DocumentationProps> = {
-        topBarHeight: 0,
-    };
-    constructor(props: DocumentationProps) {
-        super(props);
-        this.state = {
-            isHoveringSidebar: false,
-        };
-    }
-    public componentDidMount(): void {
-        window.addEventListener('hashchange', this._onHashChanged.bind(this), false);
-    }
-    public componentWillUnmount(): void {
-        window.removeEventListener('hashchange', this._onHashChanged.bind(this), false);
-    }
-    public componentDidUpdate(prevProps: DocumentationProps, _prevState: DocumentationState): void {
-        if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
-            const hash = window.location.hash.slice(1);
-            sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
-        }
-    }
-    public render(): React.ReactNode {
-        const styles: Styles = {
-            mainContainers: {
-                position: 'absolute',
-                top: 1,
-                left: 0,
-                bottom: 0,
-                right: 0,
-                overflowX: 'hidden',
-                overflowY: 'scroll',
-                minHeight: `calc(100vh - ${this.props.topBarHeight}px)`,
-                WebkitOverflowScrolling: 'touch',
-            },
-            menuContainer: {
-                borderColor: colors.grey300,
-                maxWidth: 330,
-                marginLeft: 20,
-            },
-        };
-        const sectionNameToLinks = this.props.docsInfo.getSectionNameToLinks();
-        const subsectionNameToLinks = this.props.docsInfo.getSubsectionNameToLinks(this.props.docAgnosticFormat);
-        return (
-            <div>
-                {_.isUndefined(this.props.docAgnosticFormat) ? (
-                    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 - ${this.props.topBarHeight}px)` }}
-                        >
-                            <div
-                                className="relative sm-hide xs-hide"
-                                style={{ width: '36%', height: `calc(100vh - ${this.props.topBarHeight}px)` }}
-                            >
-                                <div
-                                    className="border-right absolute"
-                                    style={{
-                                        ...styles.menuContainer,
-                                        ...styles.mainContainers,
-                                        height: `calc(100vh - ${this.props.topBarHeight}px)`,
-                                        overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
-                                    }}
-                                    onMouseEnter={this._onSidebarHover.bind(this)}
-                                    onMouseLeave={this._onSidebarHoverOff.bind(this)}
-                                >
-                                    <NestedSidebarMenu
-                                        selectedVersion={this.props.selectedVersion}
-                                        versions={this.props.availableVersions}
-                                        sidebarHeader={this.props.sidebarHeader}
-                                        sectionNameToLinks={sectionNameToLinks}
-                                        subsectionNameToLinks={subsectionNameToLinks}
-                                        onVersionSelected={this.props.onVersionSelected}
-                                    />
-                                </div>
-                            </div>
-                            <div
-                                className="relative col lg-col-9 md-col-9 sm-col-12 col-12"
-                                style={{ backgroundColor: colors.white }}
-                            >
-                                <div
-                                    id={sharedConstants.SCROLL_CONTAINER_ID}
-                                    style={styles.mainContainers}
-                                    className="absolute px1"
-                                >
-                                    <div id={sharedConstants.SCROLL_TOP_ID} />
-                                    {this._renderDocumentation()}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-        );
-    }
-    private _renderLoading(mainContainersStyles: React.CSSProperties): React.ReactNode {
-        return (
-            <div className="col col-12" style={mainContainersStyles}>
-                <div
-                    className="relative sm-px2 sm-pt2 sm-m1"
-                    style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
-                >
-                    <div className="center pb2">
-                        <CircularProgress size={40} thickness={5} />
-                    </div>
-                    <div className="center pt2" style={{ paddingBottom: 11 }}>
-                        Loading documentation...
-                    </div>
-                </div>
-            </div>
-        );
-    }
-    private _renderDocumentation(): React.ReactNode {
-        const subMenus = _.values(this.props.docsInfo.menu);
-        const orderedSectionNames = _.flatten(subMenus);
-
-        const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat);
-        const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName));
-
-        return renderedSections;
-    }
-    private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode {
-        const markdownVersions = _.keys(this.props.docsInfo.sectionNameToMarkdownByVersion);
-        const eligibleVersions = _.filter(markdownVersions, mdVersion => {
-            return semver.lte(mdVersion, this.props.selectedVersion);
-        });
-        if (_.isEmpty(eligibleVersions)) {
-            throw new Error(
-                `No eligible markdown sections found for ${this.props.docsInfo.displayName} version ${
-                    this.props.selectedVersion
-                }.`,
-            );
-        }
-        const sortedEligibleVersions = eligibleVersions.sort(semver.rcompare.bind(semver));
-        const closestVersion = sortedEligibleVersions[0];
-        const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdownByVersion[closestVersion][sectionName];
-        if (!_.isUndefined(markdownFileIfExists)) {
-            return (
-                <MarkdownSection
-                    key={`markdown-section-${sectionName}`}
-                    sectionName={sectionName}
-                    markdownContent={markdownFileIfExists}
-                />
-            );
-        }
-
-        const docSection = this.props.docAgnosticFormat[sectionName];
-        if (_.isUndefined(docSection)) {
-            return null;
-        }
-
-        const isExportedFunctionSection =
-            docSection.functions.length === 1 &&
-            _.isEmpty(docSection.types) &&
-            _.isEmpty(docSection.methods) &&
-            _.isEmpty(docSection.constructors) &&
-            _.isEmpty(docSection.properties) &&
-            _.isEmpty(docSection.events);
-
-        const sortedTypes = _.sortBy(docSection.types, 'name');
-        const typeDefs = _.map(sortedTypes, (customType, i) => {
-            return (
-                <TypeDefinition
-                    sectionName={sectionName}
-                    key={`type-${customType.name}-${i}`}
-                    customType={customType}
-                    docsInfo={this.props.docsInfo}
-                    typeDefinitionByName={typeDefinitionByName}
-                    isInPopover={false}
-                />
-            );
-        });
-
-        const sortedProperties = _.sortBy(docSection.properties, 'name');
-        const propertyDefs = _.map(
-            sortedProperties,
-            this._renderProperty.bind(this, sectionName, typeDefinitionByName),
-        );
-
-        const sortedMethods = _.sortBy(docSection.methods, 'name');
-        const methodDefs = _.map(sortedMethods, method => {
-            return this._renderSignatureBlocks(method, sectionName, typeDefinitionByName);
-        });
-
-        const sortedFunctions = _.sortBy(docSection.functions, 'name');
-        const functionDefs = _.map(sortedFunctions, func => {
-            return this._renderSignatureBlocks(func, sectionName, typeDefinitionByName);
-        });
-
-        const sortedEvents = _.sortBy(docSection.events, 'name');
-        const eventDefs = _.map(sortedEvents, (event: Event, i: number) => {
-            return (
-                <EventDefinition
-                    key={`event-${event.name}-${i}`}
-                    event={event}
-                    sectionName={sectionName}
-                    docsInfo={this.props.docsInfo}
-                />
-            );
-        });
-        const headerStyle: React.CSSProperties = {
-            fontWeight: 100,
-        };
-        return (
-            <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
-                <div className="flex pb2">
-                    <div style={{ marginRight: 7 }}>
-                        <SectionHeader sectionName={sectionName} />
-                    </div>
-                    {this._renderNetworkBadgesIfExists(sectionName)}
-                </div>
-                {docSection.comment && <Comment comment={docSection.comment} />}
-                {!_.isEmpty(docSection.constructors) && (
-                    <div>
-                        <h2 style={headerStyle}>Constructor</h2>
-                        {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
-                    </div>
-                )}
-                {!_.isEmpty(docSection.properties) && (
-                    <div>
-                        <h2 style={headerStyle}>Properties</h2>
-                        <div>{propertyDefs}</div>
-                    </div>
-                )}
-                {!_.isEmpty(docSection.methods) && (
-                    <div>
-                        <h2 style={headerStyle}>Methods</h2>
-                        <div>{methodDefs}</div>
-                    </div>
-                )}
-                {!_.isEmpty(docSection.functions) && (
-                    <div>
-                        {!isExportedFunctionSection && <h2 style={headerStyle}>Functions</h2>}
-                        <div>{functionDefs}</div>
-                    </div>
-                )}
-                {!_.isUndefined(docSection.events) &&
-                    docSection.events.length > 0 && (
-                        <div>
-                            <h2 style={headerStyle}>Events</h2>
-                            <div>{eventDefs}</div>
-                        </div>
-                    )}
-                {!_.isUndefined(docSection.externalExportToLink) &&
-                    this._renderExternalExports(docSection.externalExportToLink)}
-                {!_.isUndefined(typeDefs) &&
-                    typeDefs.length > 0 && (
-                        <div>
-                            <div>{typeDefs}</div>
-                        </div>
-                    )}
-            </div>
-        );
-    }
-    private _renderExternalExports(externalExportToLink: ExternalExportToLink): React.ReactNode {
-        const externalExports = _.map(externalExportToLink, (link: string, exportName: string) => {
-            return (
-                <div className="pt2" key={`external-export-${exportName}`}>
-                    <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
-                        {`import { `}
-                        <Link to={link} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}>
-                            {exportName}
-                        </Link>
-                        {` } from '${this.props.docsInfo.packageName}'`}
-                    </code>
-                </div>
-            );
-        });
-        return <div>{externalExports}</div>;
-    }
-    private _renderNetworkBadgesIfExists(sectionName: string): React.ReactNode {
-        if (this.props.docsInfo.type !== SupportedDocJson.SolDoc) {
-            return null;
-        }
-
-        const networkToAddressByContractName = this.props.docsInfo.contractsByVersionByNetworkId[
-            this.props.selectedVersion
-        ];
-        const badges = _.map(
-            networkToAddressByContractName,
-            (addressByContractName: AddressByContractName, networkName: string) => {
-                const contractAddress = addressByContractName[sectionName];
-                if (_.isUndefined(contractAddress)) {
-                    return null;
-                }
-                const linkIfExists = sharedUtils.getEtherScanLinkIfExists(
-                    contractAddress,
-                    sharedConstants.NETWORK_ID_BY_NAME[networkName],
-                    EtherscanLinkSuffixes.Address,
-                );
-                return (
-                    <div style={{ marginTop: 8 }}>
-                        <Link
-                            key={`badge-${networkName}-${sectionName}`}
-                            to={linkIfExists}
-                            shouldOpenInNewTab={true}
-                            fontColor={colors.white}
-                        >
-                            <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} />
-                        </Link>
-                    </div>
-                );
-            },
-        );
-        return badges;
-    }
-    private _renderConstructors(
-        constructors: SolidityMethod[] | TypescriptMethod[],
-        sectionName: string,
-        typeDefinitionByName: TypeDefinitionByName,
-    ): React.ReactNode {
-        const constructorDefs = _.map(constructors, constructor => {
-            return this._renderSignatureBlocks(constructor, sectionName, typeDefinitionByName);
-        });
-        return <div>{constructorDefs}</div>;
-    }
-    private _renderProperty(
-        sectionName: string,
-        typeDefinitionByName: TypeDefinitionByName,
-        property: Property,
-    ): React.ReactNode {
-        return (
-            <PropertyBlock
-                key={`property-${property.name}-${property.type.name}`}
-                property={property}
-                sectionName={sectionName}
-                docsInfo={this.props.docsInfo}
-                sourceUrl={this.props.sourceUrl}
-                selectedVersion={this.props.selectedVersion}
-                typeDefinitionByName={typeDefinitionByName}
-            />
-        );
-    }
-    private _renderSignatureBlocks(
-        method: SolidityMethod | TypescriptFunction | TypescriptMethod,
-        sectionName: string,
-        typeDefinitionByName: TypeDefinitionByName,
-    ): React.ReactNode {
-        return (
-            <SignatureBlock
-                key={`method-${method.name}-${sectionName}`}
-                sectionName={sectionName}
-                method={method}
-                typeDefinitionByName={typeDefinitionByName}
-                libraryVersion={this.props.selectedVersion}
-                docsInfo={this.props.docsInfo}
-                sourceUrl={this.props.sourceUrl}
-            />
-        );
-    }
-    private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void {
-        this.setState({
-            isHoveringSidebar: true,
-        });
-    }
-    private _onSidebarHoverOff(): void {
-        this.setState({
-            isHoveringSidebar: false,
-        });
-    }
-    private _onHashChanged(_event: any): void {
-        const hash = window.location.hash.slice(1);
-        sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
-    }
-}
-- 
cgit v1.2.3


From eee0640b07bcddccbddf68618f2772b1de92a18d Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 11:27:56 +0100
Subject: chore: many small stylistic changes

---
 packages/react-docs/src/components/doc_reference.tsx | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

(limited to 'packages/react-docs/src/components')

diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx
index 38ec818db..c70b99b19 100644
--- a/packages/react-docs/src/components/doc_reference.tsx
+++ b/packages/react-docs/src/components/doc_reference.tsx
@@ -1,7 +1,9 @@
 import {
     colors,
     constants as sharedConstants,
+    Container,
     EtherscanLinkSuffixes,
+    HeaderSizes,
     Link,
     MarkdownSection,
     Networks,
@@ -101,11 +103,17 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
         const closestVersion = sortedEligibleVersions[0];
         const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdownByVersion[closestVersion][sectionName];
         if (!_.isUndefined(markdownFileIfExists)) {
+            // Special-case replace the `introduction` sectionName with the package name
+            const isIntroductionSection = sectionName === 'introduction';
+            const finalSectionName = isIntroductionSection ? this.props.docsInfo.displayName : sectionName;
+            const headerSize = isIntroductionSection ? HeaderSizes.H1 : HeaderSizes.H3;
             return (
                 <MarkdownSection
                     key={`markdown-section-${sectionName}`}
-                    sectionName={sectionName}
+                    sectionName={finalSectionName}
+                    headerSize={headerSize}
                     markdownContent={markdownFileIfExists}
+                    shouldReformatTitle={false}
                 />
             );
         }
@@ -215,6 +223,13 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
                             <div>{typeDefs}</div>
                         </div>
                     )}
+                <Container
+                    width={'100%'}
+                    height={'1px'}
+                    backgroundColor={colors.grey300}
+                    marginTop={'32px'}
+                    marginBottom={'12px'}
+                />
             </div>
         );
     }
-- 
cgit v1.2.3


From bf9af95654503df94b5b32af74a4cbc8bee7f2ec Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 11:57:16 +0100
Subject: chore: improve colors

---
 packages/react-docs/src/components/comment.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'packages/react-docs/src/components')

diff --git a/packages/react-docs/src/components/comment.tsx b/packages/react-docs/src/components/comment.tsx
index c3687c510..9c866e62c 100644
--- a/packages/react-docs/src/components/comment.tsx
+++ b/packages/react-docs/src/components/comment.tsx
@@ -1,4 +1,4 @@
-import { MarkdownCodeBlock } from '@0xproject/react-shared';
+import { colors, MarkdownCodeBlock } from '@0xproject/react-shared';
 import * as React from 'react';
 import * as ReactMarkdown from 'react-markdown';
 
@@ -13,7 +13,7 @@ const defaultProps = {
 
 export const Comment: React.SFC<CommentProps> = (props: CommentProps) => {
     return (
-        <div className={`${props.className} comment`}>
+        <div className={`${props.className} comment`} style={{ color: colors.greyTheme }}>
             <ReactMarkdown source={props.comment} renderers={{ code: MarkdownCodeBlock }} />
         </div>
     );
-- 
cgit v1.2.3


From b3a323efa1fc5d942c2f7052f585acc248394f44 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 12:20:30 +0100
Subject: fix: Nested a tag warning in console by not rendering a tags within
 type definition popovers

---
 packages/react-docs/src/components/type.tsx        | 62 ++++++++++++----------
 .../react-docs/src/components/type_definition.tsx  |  1 +
 2 files changed, 34 insertions(+), 29 deletions(-)

(limited to 'packages/react-docs/src/components')

diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx
index 1ae1324c6..d579449f4 100644
--- a/packages/react-docs/src/components/type.tsx
+++ b/packages/react-docs/src/components/type.tsx
@@ -204,7 +204,9 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
     const isExportedClassReference = !!props.type.isExportedClassReference;
     const typeNameUrlIfExists = !_.isUndefined(props.type.externalLink) ? props.type.externalLink : undefined;
     if (!_.isUndefined(typeNameUrlIfExists)) {
-        typeName = (
+        typeName = props.isInPopover ? (
+            <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
+        ) : (
             <Link to={typeNameUrlIfExists} shouldOpenInNewTab={true} fontColor={colors.lightBlueA700}>
                 {typeName}
             </Link>
@@ -218,39 +220,41 @@ export const Type: React.SFC<TypeProps> = (props: TypeProps): any => {
             ? props.type.name
             : `${props.docsInfo.typeSectionName}-${typeName}`;
         typeName = (
-            <ScrollLink
-                to={typeDefinitionAnchorId}
-                offset={0}
-                hashSpy={true}
-                duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
-                containerId={sharedConstants.SCROLL_CONTAINER_ID}
-            >
+            <span>
                 {sharedUtils.isUserOnMobile() || props.isInPopover || isExportedClassReference ? (
                     <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
                 ) : (
-                    <span
-                        data-tip={true}
-                        data-for={id}
-                        style={{
-                            color: colors.lightBlueA700,
-                            cursor: 'pointer',
-                            display: 'inline-block',
-                        }}
+                    <ScrollLink
+                        to={typeDefinitionAnchorId}
+                        offset={0}
+                        hashSpy={true}
+                        duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
+                        containerId={sharedConstants.SCROLL_CONTAINER_ID}
                     >
-                        {typeName}
-                        <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip">
-                            <TypeDefinition
-                                sectionName={props.sectionName}
-                                customType={props.typeDefinitionByName[typeName as string]}
-                                shouldAddId={false}
-                                docsInfo={props.docsInfo}
-                                typeDefinitionByName={props.typeDefinitionByName}
-                                isInPopover={true}
-                            />
-                        </ReactTooltip>
-                    </span>
+                        <span
+                            data-tip={true}
+                            data-for={id}
+                            style={{
+                                color: colors.lightBlueA700,
+                                cursor: 'pointer',
+                                display: 'inline-block',
+                            }}
+                        >
+                            {typeName}
+                            <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip">
+                                <TypeDefinition
+                                    sectionName={props.sectionName}
+                                    customType={props.typeDefinitionByName[typeName as string]}
+                                    shouldAddId={false}
+                                    docsInfo={props.docsInfo}
+                                    typeDefinitionByName={props.typeDefinitionByName}
+                                    isInPopover={true}
+                                />
+                            </ReactTooltip>
+                        </span>
+                    </ScrollLink>
                 )}
-            </ScrollLink>
+            </span>
         );
     }
     return (
diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx
index 9a3e50a1b..e1c4f1f2b 100644
--- a/packages/react-docs/src/components/type_definition.tsx
+++ b/packages/react-docs/src/components/type_definition.tsx
@@ -124,6 +124,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                     title={`${typePrefix} ${customType.name}`}
                     id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
                     shouldShowAnchor={this.state.shouldShowAnchor}
+                    isDisabled={this.props.isInPopover ? true : false}
                 />
                 <div style={{ fontSize: 16 }}>
                     <pre>
-- 
cgit v1.2.3


From 96d145f54ff559fe6a46626e73c67e716d6927cd Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 16:49:46 +0100
Subject: chore: Remove unused state

---
 packages/react-docs/src/components/doc_reference.tsx | 20 +-------------------
 1 file changed, 1 insertion(+), 19 deletions(-)

(limited to 'packages/react-docs/src/components')

diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx
index c70b99b19..da05b04f8 100644
--- a/packages/react-docs/src/components/doc_reference.tsx
+++ b/packages/react-docs/src/components/doc_reference.tsx
@@ -50,17 +50,9 @@ export interface DocReferenceProps {
     docAgnosticFormat?: DocAgnosticFormat;
 }
 
-export interface DocReferenceState {
-    isHoveringSidebar: boolean;
-}
+export interface DocReferenceState {}
 
 export class DocReference extends React.Component<DocReferenceProps, DocReferenceState> {
-    constructor(props: DocReferenceProps) {
-        super(props);
-        this.state = {
-            isHoveringSidebar: false,
-        };
-    }
     public componentDidMount(): void {
         window.addEventListener('hashchange', this._onHashChanged.bind(this), false);
     }
@@ -329,16 +321,6 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
             />
         );
     }
-    private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void {
-        this.setState({
-            isHoveringSidebar: true,
-        });
-    }
-    private _onSidebarHoverOff(): void {
-        this.setState({
-            isHoveringSidebar: false,
-        });
-    }
     private _onHashChanged(_event: any): void {
         const hash = window.location.hash.slice(1);
         sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
-- 
cgit v1.2.3


From ce151f630d10664353ff1c9172a7495557792abe Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Mon, 15 Oct 2018 17:35:40 +0100
Subject: feat: highlighted sidebar as you scroll on doc reference pages

---
 packages/react-docs/src/components/doc_reference.tsx   | 8 +++++---
 packages/react-docs/src/components/signature_block.tsx | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

(limited to 'packages/react-docs/src/components')

diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx
index da05b04f8..3a909db7e 100644
--- a/packages/react-docs/src/components/doc_reference.tsx
+++ b/packages/react-docs/src/components/doc_reference.tsx
@@ -97,15 +97,15 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
         if (!_.isUndefined(markdownFileIfExists)) {
             // Special-case replace the `introduction` sectionName with the package name
             const isIntroductionSection = sectionName === 'introduction';
-            const finalSectionName = isIntroductionSection ? this.props.docsInfo.displayName : sectionName;
             const headerSize = isIntroductionSection ? HeaderSizes.H1 : HeaderSizes.H3;
             return (
                 <MarkdownSection
                     key={`markdown-section-${sectionName}`}
-                    sectionName={finalSectionName}
+                    sectionName={sectionName}
                     headerSize={headerSize}
                     markdownContent={markdownFileIfExists}
                     shouldReformatTitle={false}
+                    alternativeSectionTitle={isIntroductionSection ? this.props.docsInfo.displayName : undefined}
                 />
             );
         }
@@ -196,7 +196,9 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
                 )}
                 {!_.isEmpty(docSection.functions) && (
                     <div>
-                        {!isExportedFunctionSection && <h2 style={headerStyle}>Functions</h2>}
+                        {!isExportedFunctionSection && (
+                            <div style={{ ...headerStyle, fontSize: '1.5em' }}>Functions</div>
+                        )}
                         <div>{functionDefs}</div>
                     </div>
                 )}
diff --git a/packages/react-docs/src/components/signature_block.tsx b/packages/react-docs/src/components/signature_block.tsx
index 5ec82983a..819311953 100644
--- a/packages/react-docs/src/components/signature_block.tsx
+++ b/packages/react-docs/src/components/signature_block.tsx
@@ -55,7 +55,7 @@ export class SignatureBlock extends React.Component<SignatureBlockProps, Signatu
             <div
                 id={`${this.props.sectionName}-${method.name}`}
                 style={{ overflow: 'hidden', width: '100%' }}
-                className="pb4"
+                className="pb4 pt2"
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
                 onMouseOut={this._setAnchorVisibility.bind(this, false)}
             >
-- 
cgit v1.2.3


From bf51728466956837bbe669dfa0883c4d6611a628 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 16 Oct 2018 16:35:55 +0100
Subject: chore: simplify

---
 packages/react-docs/src/components/type_definition.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/react-docs/src/components')

diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx
index e1c4f1f2b..3b64247f2 100644
--- a/packages/react-docs/src/components/type_definition.tsx
+++ b/packages/react-docs/src/components/type_definition.tsx
@@ -124,7 +124,7 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                     title={`${typePrefix} ${customType.name}`}
                     id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
                     shouldShowAnchor={this.state.shouldShowAnchor}
-                    isDisabled={this.props.isInPopover ? true : false}
+                    isDisabled={this.props.isInPopover}
                 />
                 <div style={{ fontSize: 16 }}>
                     <pre>
-- 
cgit v1.2.3


From 17fb4d5b5703df2a86be0c2f1210c1327debc033 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 16 Oct 2018 16:38:05 +0100
Subject: chore: Remove unused prop

---
 packages/react-docs/src/components/doc_reference.tsx | 1 -
 1 file changed, 1 deletion(-)

(limited to 'packages/react-docs/src/components')

diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx
index 3a909db7e..83cc00bab 100644
--- a/packages/react-docs/src/components/doc_reference.tsx
+++ b/packages/react-docs/src/components/doc_reference.tsx
@@ -104,7 +104,6 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
                     sectionName={sectionName}
                     headerSize={headerSize}
                     markdownContent={markdownFileIfExists}
-                    shouldReformatTitle={false}
                     alternativeSectionTitle={isIntroductionSection ? this.props.docsInfo.displayName : undefined}
                 />
             );
-- 
cgit v1.2.3


From 55a3bc8cb6772802672f60f22c5ed5c7e1b2dfdd Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 16 Oct 2018 16:43:43 +0100
Subject: chore: don't use Container in react-shared, react-docs yet

---
 packages/react-docs/src/components/doc_reference.tsx | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

(limited to 'packages/react-docs/src/components')

diff --git a/packages/react-docs/src/components/doc_reference.tsx b/packages/react-docs/src/components/doc_reference.tsx
index 83cc00bab..5fdcdd2d9 100644
--- a/packages/react-docs/src/components/doc_reference.tsx
+++ b/packages/react-docs/src/components/doc_reference.tsx
@@ -1,7 +1,6 @@
 import {
     colors,
     constants as sharedConstants,
-    Container,
     EtherscanLinkSuffixes,
     HeaderSizes,
     Link,
@@ -216,12 +215,14 @@ export class DocReference extends React.Component<DocReferenceProps, DocReferenc
                             <div>{typeDefs}</div>
                         </div>
                     )}
-                <Container
-                    width={'100%'}
-                    height={'1px'}
-                    backgroundColor={colors.grey300}
-                    marginTop={'32px'}
-                    marginBottom={'12px'}
+                <div
+                    style={{
+                        width: '100%',
+                        height: 1,
+                        backgroundColor: colors.grey300,
+                        marginTop: 32,
+                        marginBottom: 12,
+                    }}
                 />
             </div>
         );
-- 
cgit v1.2.3