Render external dep exports

5 files changed, 50 insertions, 6 deletions

diff --git a/packages/monorepo-scripts/src/utils/doc_generate_and_upload_utils.ts b/packages/monorepo-scripts/src/utils/doc_generate_and_upload_utils.ts
index e866d5bbc..b4911c84b 100644
--- a/packages/monorepo-scripts/src/utils/doc_generate_and_upload_utils.ts
+++ b/packages/monorepo-scripts/src/utils/doc_generate_and_upload_utils.ts
@@ -221,7 +221,7 @@ export async function generateAndUploadDocsAsync(packageName: string, isStaging:
         );
     }
 
-    const externalExportsToLink: { [externalExport: string]: string } = {};
+    const externalExportToLink: { [externalExport: string]: string } = {};
     const externalExportsWithoutLinks: string[] = [];
     _.each(externalExports, externalExport => {
         const linkIfExists = EXTERNAL_EXPORT_TO_LINK[externalExport];
@@ -229,7 +229,7 @@ export async function generateAndUploadDocsAsync(packageName: string, isStaging:
             externalExportsWithoutLinks.push(externalExport);
             return;
         }
-        externalExportsToLink[externalExport] = linkIfExists;
+        externalExportToLink[externalExport] = linkIfExists;
     });
     if (!_.isEmpty(externalExportsWithoutLinks)) {
         throw new Error(
@@ -246,7 +246,7 @@ export async function generateAndUploadDocsAsync(packageName: string, isStaging:
             exportPathToTypedocNames,
             exportPathOrder,
             externalTypeToLink: EXTERNAL_TYPE_TO_LINK,
-            externalExportsToLink,
+            externalExportToLink,
         },
         typedocJson: finalTypeDocOutput,
     };
diff --git a/packages/react-docs/src/components/documentation.tsx b/packages/react-docs/src/components/documentation.tsx
index 82e444018..43a1f746e 100644
--- a/packages/react-docs/src/components/documentation.tsx
+++ b/packages/react-docs/src/components/documentation.tsx
@@ -19,6 +19,7 @@ import {
     AddressByContractName,
     DocAgnosticFormat,
     Event,
+    ExternalExportToLink,
     Property,
     SolidityMethod,
     SupportedDocJson,
@@ -26,6 +27,7 @@ import {
     TypescriptFunction,
     TypescriptMethod,
 } from '../types';
+import { constants } from '../utils/constants';
 
 import { Badge } from './badge';
 import { Comment } from './comment';
@@ -300,6 +302,8 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                             <div>{eventDefs}</div>
                         </div>
                     )}
+                {!_.isUndefined(docSection.externalExportToLink) &&
+                    this._renderExternalExports(docSection.externalExportToLink)}
                 {!_.isUndefined(typeDefs) &&
                     typeDefs.length > 0 && (
                         <div>
@@ -309,6 +313,22 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
             </div>
         );
     }
+    private _renderExternalExports(externalExportToLink: ExternalExportToLink): React.ReactNode {
+        const externalExports = _.map(externalExportToLink, (link: string, exportName: string) => {
+            return (
+                <div className="pt2">
+                    <code className={`hljs ${constants.TYPE_TO_SYNTAX[this.props.docsInfo.type]}`}>
+                        {`import { `}
+                        <a href={link} target="_blank" style={{ color: colors.lightBlueA700, textDecoration: 'none' }}>
+                            {exportName}
+                        </a>
+                        {` } from '${this.props.docsInfo.displayName}'`}
+                    </code>
+                </div>
+            );
+        });
+        return <div>{externalExports}</div>;
+    }
     private _renderNetworkBadgesIfExists(sectionName: string): React.ReactNode {
         if (this.props.docsInfo.type !== SupportedDocJson.Doxity) {
             return null;
diff --git a/packages/react-docs/src/types.ts b/packages/react-docs/src/types.ts
index 0155685e0..8352af876 100644
--- a/packages/react-docs/src/types.ts
+++ b/packages/react-docs/src/types.ts
@@ -105,8 +105,9 @@ export interface DocSection {
     methods: Array<TypescriptMethod | SolidityMethod>;
     properties: Property[];
     types: CustomType[];
-    functions?: TypescriptFunction[];
+    functions: TypescriptFunction[];
     events?: Event[];
+    externalExportToLink?: ExternalExportToLink;
 }
 
 export interface TypescriptMethod extends BaseMethod {
@@ -296,10 +297,15 @@ export interface ExternalTypeToLink {
     [externalTypeName: string]: string;
 }
 
+export interface ExternalExportToLink {
+    [externalExport: string]: string;
+}
+
 export interface Metadata {
     exportPathToTypedocNames: ExportNameToTypedocNames;
     exportPathOrder: string[];
     externalTypeToLink: ExternalTypeToLink;
+    externalExportToLink: ExternalExportToLink;
 }
 
 export interface GeneratedDocJson {
diff --git a/packages/react-docs/src/utils/constants.ts b/packages/react-docs/src/utils/constants.ts
index c3c74fd11..97bedf2db 100644
--- a/packages/react-docs/src/utils/constants.ts
+++ b/packages/react-docs/src/utils/constants.ts
@@ -2,6 +2,7 @@ import { SupportedDocJson } from '../types';
 
 export const constants = {
     TYPES_SECTION_NAME: 'types',
+    EXTERNAL_EXPORTS_SECTION_NAME: 'externalExports',
     TYPE_TO_SYNTAX: {
         [SupportedDocJson.Doxity]: 'solidity',
         [SupportedDocJson.TypeDoc]: 'typescript',
diff --git a/packages/react-docs/src/utils/typedoc_utils.ts b/packages/react-docs/src/utils/typedoc_utils.ts
index e10493673..989485dfc 100644
--- a/packages/react-docs/src/utils/typedoc_utils.ts
+++ b/packages/react-docs/src/utils/typedoc_utils.ts
@@ -7,13 +7,13 @@ import {
     CustomTypeChild,
     DocAgnosticFormat,
     DocSection,
+    ExternalExportToLink,
     ExternalTypeToLink,
     GeneratedDocJson,
     IndexSignature,
     KindString,
     Parameter,
     Property,
-    SectionsMap,
     Type,
     TypeDocNode,
     TypeDocType,
@@ -28,6 +28,7 @@ import { constants } from './constants';
 export class TypeDocUtils {
     private _typeDocNameOrder: string[];
     private _externalTypeToLink: ExternalTypeToLink;
+    private _externalExportToLink: ExternalExportToLink;
     private _docsInfo: DocsInfo;
     private _typeDocJson: TypeDocNode;
     private _classNames: string[];
@@ -36,6 +37,7 @@ export class TypeDocUtils {
         const exportPathOrder = generatedDocJson.metadata.exportPathOrder;
         const exportPathToTypedocNames = generatedDocJson.metadata.exportPathToTypedocNames;
         this._externalTypeToLink = generatedDocJson.metadata.externalTypeToLink;
+        this._externalExportToLink = generatedDocJson.metadata.externalExportToLink;
         this._typeDocJson = generatedDocJson.typedocJson;
 
         // TODO: Extract the non typeDoc exports, and render them somehow
@@ -88,6 +90,22 @@ export class TypeDocUtils {
     }
     public convertToDocAgnosticFormat(): DocAgnosticFormat {
         const docAgnosticFormat: DocAgnosticFormat = {};
+
+        if (!_.isEmpty(this._externalExportToLink)) {
+            this._docsInfo.sections[constants.EXTERNAL_EXPORTS_SECTION_NAME] = constants.EXTERNAL_EXPORTS_SECTION_NAME;
+            this._docsInfo.menu[constants.EXTERNAL_EXPORTS_SECTION_NAME] = [constants.EXTERNAL_EXPORTS_SECTION_NAME];
+            const docSection: DocSection = {
+                comment: 'This package also re-exports some third-party libraries for your convenience.',
+                constructors: [],
+                methods: [],
+                functions: [],
+                properties: [],
+                types: [],
+                externalExportToLink: this._externalExportToLink,
+            };
+            docAgnosticFormat[constants.EXTERNAL_EXPORTS_SECTION_NAME] = docSection;
+        }
+
         const typeEntities: TypeDocNode[] = [];
         _.each(this._typeDocNameOrder, typeDocName => {
             const fileChildIndex = _.findIndex(this._typeDocJson.children, child => child.name === typeDocName);
@@ -458,7 +476,6 @@ export class TypeDocUtils {
             method: methodIfExists,
             indexSignature: indexSignatureIfExists,
         };
-        console.log('this._externalTypeToLink', this._externalTypeToLink);
         const externalLinkIfExists = this._externalTypeToLink[entity.name];
         if (!_.isUndefined(externalLinkIfExists)) {
             type.externalLink = externalLinkIfExists;