From 0b1ba9f9971bea9003dfb30fca535c17ce62ad08 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 6 Mar 2018 16:31:55 +0100
Subject: Move Documentation to the `@0xproject/react-docs` package

---
 .../react-docs/src/ts/components/documentation.tsx | 337 +++++++++++++++++++++
 1 file changed, 337 insertions(+)
 create mode 100644 packages/react-docs/src/ts/components/documentation.tsx

(limited to 'packages/react-docs/src/ts/components/documentation.tsx')

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
new file mode 100644
index 000000000..62632184c
--- /dev/null
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -0,0 +1,337 @@
+import {
+    colors,
+    constants as sharedConstants,
+    EtherscanLinkSuffixes,
+    MarkdownSection,
+    MenuSubsectionsBySection,
+    NestedSidebarMenu,
+    Networks,
+    SectionHeader,
+    Styles,
+    utils as sharedUtils,
+} from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import CircularProgress from 'material-ui/CircularProgress';
+import * as React from 'react';
+import { scroller } from 'react-scroll';
+
+import {
+    AddressByContractName,
+    DocAgnosticFormat,
+    DoxityDocObj,
+    Event,
+    Property,
+    SolidityMethod,
+    SupportedDocJson,
+    TypeDefinitionByName,
+    TypescriptMethod,
+} from '../types';
+import { utils } from '../utils/utils';
+
+import { Badge } from './badge';
+import { Comment } from './comment';
+import { DocsInfo } from './docs_info';
+import { EventDefinition } from './event_definition';
+import { MethodBlock } from './method_block';
+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,
+    [Networks.Mainnet]: colors.turquois,
+    [Networks.Rinkeby]: colors.darkYellow,
+};
+
+export interface DocumentationProps {
+    location: Location;
+    docsVersion: string;
+    availableDocVersions: string[];
+    docsInfo: DocsInfo;
+    docAgnosticFormat?: DocAgnosticFormat;
+    menuSubsectionsBySection: MenuSubsectionsBySection;
+    sourceUrl: string;
+}
+
+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 componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
+        if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
+            const hash = this.props.location.hash.slice(1);
+            sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
+        }
+    }
+    public render() {
+        return (
+            <div>
+                {_.isUndefined(this.props.docAgnosticFormat) ? (
+                    this._renderLoading()
+                ) : (
+                    <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)` }}
+                        >
+                            <div
+                                className="relative sm-hide xs-hide"
+                                style={{ width: '36%', height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
+                            >
+                                <div
+                                    className="border-right absolute"
+                                    style={{
+                                        ...styles.menuContainer,
+                                        ...styles.mainContainers,
+                                        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+                                    }}
+                                >
+                                    <NestedSidebarMenu
+                                        selectedVersion={this.props.docsVersion}
+                                        versions={this.props.availableDocVersions}
+                                        title={this.props.docsInfo.displayName}
+                                        topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)}
+                                        menuSubsectionsBySection={this.props.menuSubsectionsBySection}
+                                    />
+                                </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() {
+        return (
+            <div className="col col-12" style={styles.mainContainers}>
+                <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.getMenu());
+        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 markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdown[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 sortedTypes = _.sortBy(docSection.types, 'name');
+        const typeDefs = _.map(sortedTypes, customType => {
+            return (
+                <TypeDefinition
+                    sectionName={sectionName}
+                    key={`type-${customType.name}`}
+                    customType={customType}
+                    docsInfo={this.props.docsInfo}
+                />
+            );
+        });
+
+        const sortedProperties = _.sortBy(docSection.properties, 'name');
+        const propertyDefs = _.map(sortedProperties, this._renderProperty.bind(this, sectionName));
+
+        const sortedMethods = _.sortBy(docSection.methods, 'name');
+        const methodDefs = _.map(sortedMethods, method => {
+            const isConstructor = false;
+            return this._renderMethodBlocks(method, sectionName, isConstructor, 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}
+                />
+            );
+        });
+        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} />}
+                {docSection.constructors.length > 0 &&
+                    this.props.docsInfo.isVisibleConstructor(sectionName) && (
+                        <div>
+                            <h2 className="thin">Constructor</h2>
+                            {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
+                        </div>
+                    )}
+                {docSection.properties.length > 0 && (
+                    <div>
+                        <h2 className="thin">Properties</h2>
+                        <div>{propertyDefs}</div>
+                    </div>
+                )}
+                {docSection.methods.length > 0 && (
+                    <div>
+                        <h2 className="thin">Methods</h2>
+                        <div>{methodDefs}</div>
+                    </div>
+                )}
+                {!_.isUndefined(docSection.events) &&
+                    docSection.events.length > 0 && (
+                        <div>
+                            <h2 className="thin">Events</h2>
+                            <div>{eventDefs}</div>
+                        </div>
+                    )}
+                {!_.isUndefined(typeDefs) &&
+                    typeDefs.length > 0 && (
+                        <div>
+                            <div>{typeDefs}</div>
+                        </div>
+                    )}
+            </div>
+        );
+    }
+    private _renderNetworkBadgesIfExists(sectionName: string) {
+        if (this.props.docsInfo.type !== SupportedDocJson.Doxity) {
+            return null;
+        }
+
+        const networkToAddressByContractName = this.props.docsInfo.contractsByVersionByNetworkId[
+            this.props.docsVersion
+        ];
+        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 (
+                    <a
+                        key={`badge-${networkName}-${sectionName}`}
+                        href={linkIfExists}
+                        target="_blank"
+                        style={{ color: colors.white, textDecoration: 'none' }}
+                    >
+                        <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} />
+                    </a>
+                );
+            },
+        );
+        return badges;
+    }
+    private _renderConstructors(
+        constructors: SolidityMethod[] | TypescriptMethod[],
+        sectionName: string,
+        typeDefinitionByName: TypeDefinitionByName,
+    ): React.ReactNode {
+        const constructorDefs = _.map(constructors, constructor => {
+            return this._renderMethodBlocks(constructor, sectionName, constructor.isConstructor, typeDefinitionByName);
+        });
+        return <div>{constructorDefs}</div>;
+    }
+    private _renderProperty(sectionName: string, property: Property): React.ReactNode {
+        return (
+            <div key={`property-${property.name}-${property.type.name}`} className="pb3">
+                <code className="hljs">
+                    {property.name}:
+                    <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} />
+                </code>
+                {property.source && (
+                    <SourceLink
+                        version={this.props.docsVersion}
+                        source={property.source}
+                        sourceUrl={this.props.sourceUrl}
+                    />
+                )}
+                {property.comment && <Comment comment={property.comment} className="py2" />}
+            </div>
+        );
+    }
+    private _renderMethodBlocks(
+        method: SolidityMethod | TypescriptMethod,
+        sectionName: string,
+        isConstructor: boolean,
+        typeDefinitionByName: TypeDefinitionByName,
+    ): React.ReactNode {
+        return (
+            <MethodBlock
+                key={`method-${method.name}-${sectionName}`}
+                sectionName={sectionName}
+                method={method}
+                typeDefinitionByName={typeDefinitionByName}
+                libraryVersion={this.props.docsVersion}
+                docsInfo={this.props.docsInfo}
+                sourceUrl={this.props.sourceUrl}
+            />
+        );
+    }
+}
-- 
cgit v1.2.3


From c8ace2edc017969f405ffaa1293620850ed5fc05 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 6 Mar 2018 16:37:37 +0100
Subject: Remove location prop

---
 packages/react-docs/src/ts/components/documentation.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'packages/react-docs/src/ts/components/documentation.tsx')

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index 62632184c..f5a117797 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -47,7 +47,6 @@ const networkNameToColor: { [network: string]: string } = {
 };
 
 export interface DocumentationProps {
-    location: Location;
     docsVersion: string;
     availableDocVersions: string[];
     docsInfo: DocsInfo;
@@ -80,7 +79,7 @@ const styles: Styles = {
 export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
     public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
         if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
-            const hash = this.props.location.hash.slice(1);
+            const hash = window.location.hash.slice(1);
             sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
         }
     }
-- 
cgit v1.2.3


From 60d95475ebcfc868e54f90350fcca09e45b976ff Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 6 Mar 2018 16:45:25 +0100
Subject: Move DocsInfo out of the components folder

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

(limited to 'packages/react-docs/src/ts/components/documentation.tsx')

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index f5a117797..5c261a39b 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -15,6 +15,7 @@ import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 import { scroller } from 'react-scroll';
 
+import { DocsInfo } from '../docs_info';
 import {
     AddressByContractName,
     DocAgnosticFormat,
@@ -30,7 +31,6 @@ import { utils } from '../utils/utils';
 
 import { Badge } from './badge';
 import { Comment } from './comment';
-import { DocsInfo } from './docs_info';
 import { EventDefinition } from './event_definition';
 import { MethodBlock } from './method_block';
 import { SourceLink } from './source_link';
-- 
cgit v1.2.3


From 9301173f7d42548935e79ce64e64ad9320c860b5 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 6 Mar 2018 16:46:07 +0100
Subject: Rename docsVersion  prop to selectedVersion and docsVersions to
 versions for clarity

---
 packages/react-docs/src/ts/components/documentation.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

(limited to 'packages/react-docs/src/ts/components/documentation.tsx')

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index 5c261a39b..dfc041361 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -47,8 +47,8 @@ const networkNameToColor: { [network: string]: string } = {
 };
 
 export interface DocumentationProps {
-    docsVersion: string;
-    availableDocVersions: string[];
+    selectedVersion: string;
+    availableVersions: string[];
     docsInfo: DocsInfo;
     docAgnosticFormat?: DocAgnosticFormat;
     menuSubsectionsBySection: MenuSubsectionsBySection;
@@ -107,10 +107,10 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                     }}
                                 >
                                     <NestedSidebarMenu
-                                        selectedVersion={this.props.docsVersion}
-                                        versions={this.props.availableDocVersions}
+                                        selectedVersion={this.props.selectedVersion}
+                                        versions={this.props.availableVersions}
                                         title={this.props.docsInfo.displayName}
-                                        topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)}
+                                        topLevelMenu={this.props.docsInfo.getMenu(this.props.selectedVersion)}
                                         menuSubsectionsBySection={this.props.menuSubsectionsBySection}
                                     />
                                 </div>
@@ -259,7 +259,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
         }
 
         const networkToAddressByContractName = this.props.docsInfo.contractsByVersionByNetworkId[
-            this.props.docsVersion
+            this.props.selectedVersion
         ];
         const badges = _.map(
             networkToAddressByContractName,
@@ -306,7 +306,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                 </code>
                 {property.source && (
                     <SourceLink
-                        version={this.props.docsVersion}
+                        version={this.props.selectedVersion}
                         source={property.source}
                         sourceUrl={this.props.sourceUrl}
                     />
@@ -327,7 +327,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                 sectionName={sectionName}
                 method={method}
                 typeDefinitionByName={typeDefinitionByName}
-                libraryVersion={this.props.docsVersion}
+                libraryVersion={this.props.selectedVersion}
                 docsInfo={this.props.docsInfo}
                 sourceUrl={this.props.sourceUrl}
             />
-- 
cgit v1.2.3


From 71008dc819d32f7568f9e80e8d4f08754b12adb7 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 6 Mar 2018 19:49:00 +0100
Subject: Remove menuSubsectionsBySection prop from Documentation component

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

(limited to 'packages/react-docs/src/ts/components/documentation.tsx')

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index dfc041361..43ffc39c6 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -51,7 +51,6 @@ export interface DocumentationProps {
     availableVersions: string[];
     docsInfo: DocsInfo;
     docAgnosticFormat?: DocAgnosticFormat;
-    menuSubsectionsBySection: MenuSubsectionsBySection;
     sourceUrl: string;
 }
 
@@ -84,6 +83,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
         }
     }
     public render() {
+        const menuSubsectionsBySection = this.props.docsInfo.getMenuSubsectionsBySection(this.props.docAgnosticFormat);
         return (
             <div>
                 {_.isUndefined(this.props.docAgnosticFormat) ? (
@@ -111,7 +111,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                         versions={this.props.availableVersions}
                                         title={this.props.docsInfo.displayName}
                                         topLevelMenu={this.props.docsInfo.getMenu(this.props.selectedVersion)}
-                                        menuSubsectionsBySection={this.props.menuSubsectionsBySection}
+                                        menuSubsectionsBySection={menuSubsectionsBySection}
                                     />
                                 </div>
                             </div>
-- 
cgit v1.2.3


From f8b8a10b8f914d05edfbc57081a40dccc8f464de Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 6 Mar 2018 20:38:45 +0100
Subject: Make sidebar header configurable

---
 packages/react-docs/src/ts/components/documentation.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/react-docs/src/ts/components/documentation.tsx')

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index 43ffc39c6..8be7cd62d 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -51,6 +51,7 @@ export interface DocumentationProps {
     availableVersions: string[];
     docsInfo: DocsInfo;
     docAgnosticFormat?: DocAgnosticFormat;
+    sidebarHeader?: React.ReactNode;
     sourceUrl: string;
 }
 
@@ -109,7 +110,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                     <NestedSidebarMenu
                                         selectedVersion={this.props.selectedVersion}
                                         versions={this.props.availableVersions}
-                                        title={this.props.docsInfo.displayName}
+                                        sidebarHeader={this.props.sidebarHeader}
                                         topLevelMenu={this.props.docsInfo.getMenu(this.props.selectedVersion)}
                                         menuSubsectionsBySection={menuSubsectionsBySection}
                                     />
-- 
cgit v1.2.3


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

---
 .../react-docs/src/ts/components/documentation.tsx | 66 ++++++++++++----------
 1 file changed, 35 insertions(+), 31 deletions(-)

(limited to 'packages/react-docs/src/ts/components/documentation.tsx')

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index 8be7cd62d..8db9b34b4 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -37,8 +37,6 @@ import { SourceLink } from './source_link';
 import { Type } from './type';
 import { TypeDefinition } from './type_definition';
 
-const TOP_BAR_HEIGHT = 60;
-
 const networkNameToColor: { [network: string]: string } = {
     [Networks.Kovan]: colors.purple,
     [Networks.Ropsten]: colors.red,
@@ -53,30 +51,15 @@ export interface DocumentationProps {
     docAgnosticFormat?: DocAgnosticFormat;
     sidebarHeader?: React.ReactNode;
     sourceUrl: string;
+    topBarHeight?: number;
 }
 
 export interface DocumentationState {}
 
-const styles: Styles = {
-    mainContainers: {
-        position: 'absolute',
-        top: 1,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        overflowZ: 'hidden',
-        overflowY: 'scroll',
-        minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-        WebkitOverflowScrolling: 'touch',
-    },
-    menuContainer: {
-        borderColor: colors.grey300,
-        maxWidth: 330,
-        marginLeft: 20,
-    },
-};
-
 export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
+    public static defaultProps: Partial<DocumentationProps> = {
+        topBarHeight: 0,
+    };
     public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
         if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
             const hash = window.location.hash.slice(1);
@@ -84,27 +67,45 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
         }
     }
     public render() {
+        const styles: Styles = {
+            mainContainers: {
+                position: 'absolute',
+                top: 1,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                overflowZ: 'hidden',
+                overflowY: 'scroll',
+                minHeight: `calc(100vh - ${this.props.topBarHeight}px)`,
+                WebkitOverflowScrolling: 'touch',
+            },
+            menuContainer: {
+                borderColor: colors.grey300,
+                maxWidth: 330,
+                marginLeft: 20,
+            },
+        };
         const menuSubsectionsBySection = this.props.docsInfo.getMenuSubsectionsBySection(this.props.docAgnosticFormat);
         return (
             <div>
                 {_.isUndefined(this.props.docAgnosticFormat) ? (
-                    this._renderLoading()
+                    this._renderLoading(styles.mainContainers)
                 ) : (
                     <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}>
                         <div
                             className="mx-auto max-width-4 flex"
-                            style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
+                            style={{ color: colors.grey800, height: `calc(100vh - ${this.props.topBarHeight}px)` }}
                         >
                             <div
                                 className="relative sm-hide xs-hide"
-                                style={{ width: '36%', height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
+                                style={{ width: '36%', height: `calc(100vh - ${this.props.topBarHeight}px)` }}
                             >
                                 <div
                                     className="border-right absolute"
                                     style={{
                                         ...styles.menuContainer,
                                         ...styles.mainContainers,
-                                        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+                                        height: `calc(100vh - ${this.props.topBarHeight}px)`,
                                     }}
                                 >
                                     <NestedSidebarMenu
@@ -135,9 +136,9 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
             </div>
         );
     }
-    private _renderLoading() {
+    private _renderLoading(mainContainersStyles: React.CSSProperties) {
         return (
-            <div className="col col-12" style={styles.mainContainers}>
+            <div className="col col-12" style={mainContainersStyles}>
                 <div
                     className="relative sm-px2 sm-pt2 sm-m1"
                     style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
@@ -210,6 +211,9 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                 />
             );
         });
+        const headerStyle: React.CSSProperties = {
+            fontWeight: 100,
+        };
         return (
             <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
                 <div className="flex pb2">
@@ -222,26 +226,26 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                 {docSection.constructors.length > 0 &&
                     this.props.docsInfo.isVisibleConstructor(sectionName) && (
                         <div>
-                            <h2 className="thin">Constructor</h2>
+                            <h2 style={headerStyle}>Constructor</h2>
                             {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
                         </div>
                     )}
                 {docSection.properties.length > 0 && (
                     <div>
-                        <h2 className="thin">Properties</h2>
+                        <h2 style={headerStyle}>Properties</h2>
                         <div>{propertyDefs}</div>
                     </div>
                 )}
                 {docSection.methods.length > 0 && (
                     <div>
-                        <h2 className="thin">Methods</h2>
+                        <h2 style={headerStyle}>Methods</h2>
                         <div>{methodDefs}</div>
                     </div>
                 )}
                 {!_.isUndefined(docSection.events) &&
                     docSection.events.length > 0 && (
                         <div>
-                            <h2 className="thin">Events</h2>
+                            <h2 style={headerStyle}>Events</h2>
                             <div>{eventDefs}</div>
                         </div>
                     )}
-- 
cgit v1.2.3


From f191ba6e6990fec3f973ee78f75547e5a828785a Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 7 Mar 2018 10:50:51 +0100
Subject: hide sidebar scrollbar unless onHover

---
 .../react-docs/src/ts/components/documentation.tsx | 23 +++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

(limited to 'packages/react-docs/src/ts/components/documentation.tsx')

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index 8db9b34b4..58523a1a9 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -54,12 +54,20 @@ export interface DocumentationProps {
     topBarHeight?: number;
 }
 
-export interface DocumentationState {}
+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 componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
         if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
             const hash = window.location.hash.slice(1);
@@ -106,7 +114,10 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                         ...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}
@@ -338,4 +349,14 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
             />
         );
     }
+    private _onSidebarHover(event: React.FormEvent<HTMLInputElement>) {
+        this.setState({
+            isHoveringSidebar: true,
+        });
+    }
+    private _onSidebarHoverOff() {
+        this.setState({
+            isHoveringSidebar: false,
+        });
+    }
 }
-- 
cgit v1.2.3


From 6f8a70834b72d678cd9d171d7bb0a3a2cfb4134d Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 7 Mar 2018 13:25:15 +0100
Subject: Add onSelectedVersion callback so it can be handled in any way the
 caller wishes

---
 packages/react-docs/src/ts/components/documentation.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

(limited to 'packages/react-docs/src/ts/components/documentation.tsx')

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index 58523a1a9..b5e2bbb9d 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -48,9 +48,10 @@ export interface DocumentationProps {
     selectedVersion: string;
     availableVersions: string[];
     docsInfo: DocsInfo;
+    sourceUrl: string;
+    onVersionSelected: (semver: string) => void;
     docAgnosticFormat?: DocAgnosticFormat;
     sidebarHeader?: React.ReactNode;
-    sourceUrl: string;
     topBarHeight?: number;
 }
 
@@ -125,6 +126,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                         sidebarHeader={this.props.sidebarHeader}
                                         topLevelMenu={this.props.docsInfo.getMenu(this.props.selectedVersion)}
                                         menuSubsectionsBySection={menuSubsectionsBySection}
+                                        onVersionSelected={this.props.onVersionSelected}
                                     />
                                 </div>
                             </div>
-- 
cgit v1.2.3


From 238f3c89a7cfc3c8d6941aac4e108c13f84c6647 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Wed, 7 Mar 2018 15:32:37 +0100
Subject: Make sure we apply the appropriate syntax highlighting depending on
 the language of the docs

---
 packages/react-docs/src/ts/components/documentation.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/react-docs/src/ts/components/documentation.tsx')

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index b5e2bbb9d..d511bbfb4 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -27,6 +27,7 @@ import {
     TypeDefinitionByName,
     TypescriptMethod,
 } from '../types';
+import { constants } from '../utils/constants';
 import { utils } from '../utils/utils';
 
 import { Badge } from './badge';
@@ -318,7 +319,7 @@ 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">
+                <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
                     {property.name}:
                     <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} />
                 </code>
-- 
cgit v1.2.3


From 2011349eb198c2b3649001bfe9bafa3e924dfef6 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Thu, 8 Mar 2018 16:35:33 +0100
Subject: Scroll to previous hashed elements when user clicks back button

---
 packages/react-docs/src/ts/components/documentation.tsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

(limited to 'packages/react-docs/src/ts/components/documentation.tsx')

diff --git a/packages/react-docs/src/ts/components/documentation.tsx b/packages/react-docs/src/ts/components/documentation.tsx
index d511bbfb4..b46358159 100644
--- a/packages/react-docs/src/ts/components/documentation.tsx
+++ b/packages/react-docs/src/ts/components/documentation.tsx
@@ -70,6 +70,12 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
             isHoveringSidebar: false,
         };
     }
+    public componentDidMount() {
+        window.addEventListener('hashchange', this._onHashChanged.bind(this), false);
+    }
+    public componentWillUnmount() {
+        window.removeEventListener('hashchange', this._onHashChanged.bind(this), false);
+    }
     public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
         if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
             const hash = window.location.hash.slice(1);
@@ -362,4 +368,8 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
             isHoveringSidebar: false,
         });
     }
+    private _onHashChanged(event: any) {
+        const hash = window.location.hash.slice(1);
+        sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
+    }
 }
-- 
cgit v1.2.3