Use actual packageName for external example imports

packages/react-docs/src/components/documentation.tsx

@@ -322,7 +322,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                         <a href={link} target="_blank" style={{ color: colors.lightBlueA700, textDecoration: 'none' }}>
                             {exportName}
                         </a>
-                        {` } from '${this.props.docsInfo.displayName}'`}
+                        {` } from '${this.props.docsInfo.packageName}'`}
                     </code>
                 </div>
             );

packages/react-docs/src/docs_info.ts

@@ -21,6 +21,7 @@ export class DocsInfo {
     public id: string;
     public type: SupportedDocJson;
     public displayName: string;
+    public packageName: string;
     public packageUrl: string;
     public menu: DocsMenu;
     public sections: SectionsMap;
@@ -31,6 +32,7 @@ export class DocsInfo {
         this.type = config.type;
         this.menu = config.markdownMenu;
         this.displayName = config.displayName;
+        this.packageName = config.packageName;
         this.packageUrl = config.packageUrl;
         this.sections = config.markdownSections;
         this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion;

packages/react-docs/src/types.ts

@@ -4,6 +4,7 @@ export interface SectionNameToMarkdownByVersion {
 
 export interface DocsInfoConfig {
     id: string;
+    packageName: string;
     type: SupportedDocJson;
     displayName: string;
     packageUrl: string;
@@ -309,6 +310,7 @@ export interface Metadata {
 }
 
 export interface GeneratedDocJson {
+    version: string;
     metadata: Metadata;
     typedocJson: TypeDocNode;
 }