Start refactoring docs to remove unnecessary configs given more concise TypeDoc JSON

4 files changed, 97 insertions, 49 deletions

diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx
index ff33220d2..4f776b237 100644
--- a/packages/react-docs/src/components/documentation.tsx
+++ b/packages/react-docs/src/components/documentation.tsx
@@ -1,7 +1,9 @@
 import {
+    AnchorTitle,
     colors,
     constants as sharedConstants,
     EtherscanLinkSuffixes,
+    HeaderSizes,
     MarkdownSection,
     NestedSidebarMenu,
     Networks,
@@ -32,8 +34,7 @@ import { Badge } from './badge';
 import { Comment } from './comment';
 import { EventDefinition } from './event_definition';
 import { SignatureBlock } from './signature_block';
-import { SourceLink } from './source_link';
-import { Type } from './type';
+import { PropertyBlock } from './property_block';
 import { TypeDefinition } from './type_definition';
 
 const networkNameToColor: { [network: string]: string } = {
@@ -129,7 +130,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                         selectedVersion={this.props.selectedVersion}
                                         versions={this.props.availableVersions}
                                         sidebarHeader={this.props.sidebarHeader}
-                                        topLevelMenu={this.props.docsInfo.getMenu(this.props.selectedVersion)}
+                                        topLevelMenu={this.props.docsInfo.menu}
                                         menuSubsectionsBySection={menuSubsectionsBySection}
                                         onVersionSelected={this.props.onVersionSelected}
                                     />
@@ -172,7 +173,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
         );
     }
     private _renderDocumentation(): React.ReactNode {
-        const subMenus = _.values(this.props.docsInfo.getMenu());
+        const subMenus = _.values(this.props.docsInfo.menu);
         const orderedSectionNames = _.flatten(subMenus);
 
         const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat);
@@ -258,13 +259,12 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                     {this._renderNetworkBadgesIfExists(sectionName)}
                 </div>
                 {docSection.comment && <Comment comment={docSection.comment} />}
-                {!_.isEmpty(docSection.constructors) &&
-                    this.props.docsInfo.isVisibleConstructor(sectionName) && (
-                        <div>
-                            <h2 style={headerStyle}>Constructor</h2>
-                            {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
-                        </div>
-                    )}
+                {!_.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>
@@ -345,20 +345,14 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
     }
     private _renderProperty(sectionName: string, property: Property): React.ReactNode {
         return (
-            <div key={`property-${property.name}-${property.type.name}`} className="pb3">
-                <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
-                    {property.name}:{' '}
-                    <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} />
-                </code>
-                {property.source && (
-                    <SourceLink
-                        version={this.props.selectedVersion}
-                        source={property.source}
-                        sourceUrl={this.props.sourceUrl}
-                    />
-                )}
-                {property.comment && <Comment comment={property.comment} className="py2" />}
-            </div>
+            <PropertyBlock
+                key={`property-${property.name}-${property.type.name}`}
+                property={property}
+                sectionName={sectionName}
+                docsInfo={this.props.docsInfo}
+                sourceUrl={this.props.sourceUrl}
+                selectedVersion={this.props.selectedVersion}
+            />
         );
     }
     private _renderSignatureBlocks(
diff --git a/packages/react-docs/src/components/property_block.tsx b/packages/react-docs/src/components/property_block.tsx
new file mode 100644
index 000000000..6e7f90c6c
--- /dev/null
+++ b/packages/react-docs/src/components/property_block.tsx
@@ -0,0 +1,70 @@
+import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
+import * as React from 'react';
+
+import { DocsInfo } from '../docs_info';
+import { Property } from '../types';
+import { constants } from '../utils/constants';
+
+import { Comment } from './comment';
+import { Type } from './type';
+import { SourceLink } from './source_link';
+
+export interface PropertyBlockProps {
+    property: Property;
+    sectionName: string;
+    docsInfo: DocsInfo;
+    sourceUrl: string;
+    selectedVersion: string;
+}
+
+export interface PropertyBlockState {
+    shouldShowAnchor: boolean;
+}
+
+export class PropertyBlock extends React.Component<PropertyBlockProps, PropertyBlockState> {
+    constructor(props: PropertyBlockProps) {
+        super(props);
+        this.state = {
+            shouldShowAnchor: false,
+        };
+    }
+    public render(): React.ReactNode {
+        const property = this.props.property;
+        const sectionName = this.props.sectionName;
+        return (
+            <div
+                id={`${this.props.sectionName}-${property.name}`}
+                className="pb4"
+                key={`property-${property.name}-${property.type.name}`}
+                onMouseOver={this._setAnchorVisibility.bind(this, true)}
+                onMouseOut={this._setAnchorVisibility.bind(this, false)}
+            >
+                <div className="pb2" style={{ lineHeight: 1.3 }}>
+                    <AnchorTitle
+                        headerSize={HeaderSizes.H3}
+                        title={property.name}
+                        id={`${sectionName}-${property.name}`}
+                        shouldShowAnchor={this.state.shouldShowAnchor}
+                    />
+                </div>
+                <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
+                    {property.name}:{' '}
+                    <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} />
+                </code>
+                {property.source && (
+                    <SourceLink
+                        version={this.props.selectedVersion}
+                        source={property.source}
+                        sourceUrl={this.props.sourceUrl}
+                    />
+                )}
+                {property.comment && <Comment comment={property.comment} className="py2" />}
+            </div>
+        );
+    }
+    private _setAnchorVisibility(shouldShowAnchor: boolean): void {
+        this.setState({
+            shouldShowAnchor,
+        });
+    }
+}
diff --git a/packages/react-docs/src/components/type.tsx b/packages/react-docs/src/components/type.tsx
index 04fcd9998..3504be303 100644
--- a/packages/react-docs/src/components/type.tsx
+++ b/packages/react-docs/src/components/type.tsx
@@ -9,6 +9,7 @@ import { DocsInfo } from '../docs_info';
 import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from '../types';
 
 import { Signature } from './signature';
+import { constants } from '../utils/constants';
 import { TypeDefinition } from './type_definition';
 
 export interface TypeProps {
@@ -43,7 +44,7 @@ export function Type(props: TypeProps): any {
                         <span>
                             <Type
                                 key={key}
-                                type={arg.elementType}
+                                type={arg}
                                 sectionName={props.sectionName}
                                 typeDefinitionByName={props.typeDefinitionByName}
                                 docsInfo={props.docsInfo}
@@ -142,7 +143,6 @@ export function Type(props: TypeProps): any {
 
     let typeNameUrlIfExists;
     let typePrefixIfExists;
-    let sectionNameIfExists;
     if (!_.isUndefined(props.docsInfo.typeConfigs)) {
         typeNameUrlIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToExternalLink)
             ? props.docsInfo.typeConfigs.typeNameToExternalLink[typeName as string]
@@ -150,9 +150,6 @@ export function Type(props: TypeProps): any {
         typePrefixIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToPrefix)
             ? props.docsInfo.typeConfigs.typeNameToPrefix[typeName as string]
             : undefined;
-        sectionNameIfExists = !_.isUndefined(props.docsInfo.typeConfigs.typeNameToDocSection)
-            ? props.docsInfo.typeConfigs.typeNameToDocSection[typeName as string]
-            : undefined;
     }
     if (!_.isUndefined(typeNameUrlIfExists)) {
         typeName = (
@@ -168,16 +165,12 @@ export function Type(props: TypeProps): any {
         );
     } else if (
         (isReference || isArray) &&
-        (props.docsInfo.isPublicType(typeName as string) || !_.isUndefined(sectionNameIfExists))
+        props.typeDefinitionByName &&
+        props.typeDefinitionByName[typeName as string]
     ) {
         const id = Math.random().toString();
-        const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists)
-            ? `${props.sectionName}-${typeName}`
-            : sectionNameIfExists;
-        let typeDefinition;
-        if (props.typeDefinitionByName) {
-            typeDefinition = props.typeDefinitionByName[typeName as string];
-        }
+        const typeDefinitionAnchorId = `${constants.TYPES_SECTION_NAME}-${typeName}`;
+        let typeDefinition = props.typeDefinitionByName[typeName as string];
         typeName = (
             <ScrollLink
                 to={typeDefinitionAnchorId}
@@ -186,18 +179,12 @@ export function Type(props: TypeProps): any {
                 duration={sharedConstants.DOCS_SCROLL_DURATION_MS}
                 containerId={sharedConstants.DOCS_CONTAINER_ID}
             >
-                {_.isUndefined(typeDefinition) || sharedUtils.isUserOnMobile() ? (
-                    <span
-                        onClick={sharedUtils.setUrlHash.bind(null, typeDefinitionAnchorId)}
-                        style={{ color: colors.lightBlueA700, cursor: 'pointer' }}
-                    >
-                        {typeName}
-                    </span>
+                {sharedUtils.isUserOnMobile() ? (
+                    <span style={{ color: colors.lightBlueA700, cursor: 'pointer' }}>{typeName}</span>
                 ) : (
                     <span
                         data-tip={true}
                         data-for={id}
-                        onClick={sharedUtils.setUrlHash.bind(null, typeDefinitionAnchorId)}
                         style={{
                             color: colors.lightBlueA700,
                             cursor: 'pointer',
diff --git a/packages/react-docs/src/components/type_definition.tsx b/packages/react-docs/src/components/type_definition.tsx
index c4bd7359a..a23f27181 100644
--- a/packages/react-docs/src/components/type_definition.tsx
+++ b/packages/react-docs/src/components/type_definition.tsx
@@ -37,9 +37,6 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
     }
     public render(): React.ReactNode {
         const customType = this.props.customType;
-        if (!this.props.docsInfo.isPublicType(customType.name)) {
-            return null; // no-op
-        }
 
         let typePrefix: string;
         let codeSnippet: React.ReactNode;