chore: adds component prop documentation

.gitignore

@@ -97,3 +97,12 @@ docs/en/packages/*/README.md
 # TypeDoc generated subsites
 docs/en/packages/*/api/
 
+# MSFT Documentation
+## Ignore compiled helper files
+packages/fast-components-react-msft/typedoc-theme/helpers/*
+
+## Ignore typedoc output
+packages/fast-components-react-msft/api/
+
+## Ignore generated API documentation files
+packages/fast-components-react-msft/src/**/API.md

build/copy.js

@@ -0,0 +1,37 @@
+/**
+ * Utility for copying readme to their dist folders.
+ * Usage: node build/copy-readme.js
+ * @arg src - globbing pattern targeting source files
+ * @arg dist - the dist directory
+ */
+const path = require("path");
+const fs = require("fs");
+const glob = require("glob");
+
+function getArg(raw, required = false) {
+    const index = process.argv.indexOf(raw);
+
+    if (index === -1) {
+        if (required) {
+            throw new Error(`Required argument "${raw}" was not provided`);
+        }
+    } else {
+        return process.argv[index + 1];
+    }
+}
+
+const rootDir = path.resolve(process.cwd());
+const srcReadmePaths = getArg("--src", true);
+const destDir = getArg("--dist", true);
+const resolvedSrcReadmePaths = path.resolve(rootDir, srcReadmePaths);
+
+glob(resolvedSrcReadmePaths, void 0, function(error, files) {
+    if (error) {
+        throw error;
+    }
+
+    files.forEach(filePath => {
+        const destReadmePath = filePath.replace(/(\bsrc\b)(?!.*\1)/, destDir);
+        fs.copyFileSync(filePath, destReadmePath);
+    });
+});

packages/fast-component-explorer/app/explorer.tsx

@@ -661,6 +661,38 @@ class Explorer extends Foundation<
                 },
                 id: "schema",
             },
+            {
+                tab: (className: string): React.ReactNode => {
+                    return (
+                        <Typography
+                            className={className}
+                            size={TypographySize._8}
+                            onClick={this.handleDevToolsTabTriggerClick}
+                        >
+                            API
+                        </Typography>
+                    );
+                },
+                content: (className: string): React.ReactNode => {
+                    const componentName: string = this.getComponentNameSpinalCaseByPath(
+                        this.state.locationPathname
+                    );
+                    const API: React.ComponentClass = get(
+                        setViewConfigsWithCustomConfig(
+                            componentViewConfigsWithoutCustomConfig
+                        ),
+                        `${camelCase(componentName)}Config.api`,
+                        null
+                    ) as any;
+
+                    return (
+                        <div className={className}>
+                            <API />
+                        </div>
+                    );
+                },
+                id: "api",
+            },
         ];
     }
 

packages/fast-component-explorer/app/utilities/api.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { Progress } from "@microsoft/fast-components-react-msft";
+
+export default function API(
+    Component: ReturnType<typeof React.lazy>
+): React.ComponentClass<{}, {}> {
+    return class APIRenderer extends React.Component<{}, {}> {
+        public render(): JSX.Element {
+            return (
+                <React.Suspense
+                    fallback={
+                        <Progress circular={true} style={{ margin: "24px auto 0" }} />
+                    }
+                >
+                    <Component />
+                </React.Suspense>
+            );
+        }
+    };
+}

packages/fast-component-explorer/app/utilities/configs/accent-button.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     AccentButton,
@@ -6,8 +7,10 @@ import {
 } from "@microsoft/fast-components-react-msft";
 import Guidance from "../../.tmp/accent-button/guidance";
 import { glyphSchema, Icon } from "../../../app/components/glyph";
+import API from "../api";
 
 const accentButtonConfig: ComponentViewConfig<AccentButtonProps> = {
+    api: API(React.lazy(() => import("../../.tmp/accent-button/api"))),
     schema: accentButtonSchema,
     component: AccentButton,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/action-toggle.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     ActionToggle,
@@ -7,8 +8,10 @@ import {
 } from "@microsoft/fast-components-react-msft";
 import { glyphSchema, Icon } from "../../../app/components/glyph";
 import Guidance from "../../.tmp/action-toggle/guidance";
+import API from "../api";
 
 const actionToggleConfig: ComponentViewConfig<ActionToggleProps> = {
+    api: API(React.lazy(() => import("../../.tmp/action-toggle/api"))),
     schema: actionToggleSchema,
     component: ActionToggle,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/action-trigger.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     ActionTrigger,
@@ -7,8 +8,10 @@ import {
 } from "@microsoft/fast-components-react-msft";
 import { glyphSchema, Icon } from "../../../app/components/glyph";
 import Guidance from "../../.tmp/action-trigger/guidance";
+import API from "../api";
 
 const actionTriggerConfig: ComponentViewConfig<ActionTriggerProps> = {
+    api: API(React.lazy(() => import("../../.tmp/action-trigger/guidance"))),
     schema: actionTriggerSchema,
     component: ActionTrigger,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/auto-suggest-option.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     AutoSuggestOption,
@@ -6,8 +7,10 @@ import {
 } from "@microsoft/fast-components-react-msft";
 import { uniqueId } from "lodash-es";
 import Guidance from "../../.tmp/auto-suggest-option/guidance";
+import API from "../api";
 
 const autoSuggestOptionConfig: ComponentViewConfig<AutoSuggestOptionProps> = {
+    api: API(React.lazy(() => import("../../.tmp/auto-suggest-option/api"))),
     schema: autoSuggestOptionSchema,
     component: AutoSuggestOption,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/auto-suggest.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     AutoSuggest,
@@ -8,6 +9,7 @@ import {
 } from "@microsoft/fast-components-react-msft";
 import { uniqueId } from "lodash-es";
 import Guidance from "../../.tmp/auto-suggest/guidance";
+import API from "../api";
 
 function autoSuggestOptionPropFactory(value: string): AutoSuggestOptionProps {
     return {
@@ -18,6 +20,7 @@ function autoSuggestOptionPropFactory(value: string): AutoSuggestOptionProps {
 }
 
 const autoSuggestConfig: ComponentViewConfig<AutoSuggestProps> = {
+    api: API(React.lazy(() => import("../../.tmp/auto-suggest/api"))),
     schema: autoSuggestSchema,
     component: AutoSuggest,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/badge.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     Badge,
@@ -6,8 +7,10 @@ import {
     BadgeSize,
 } from "@microsoft/fast-components-react-msft";
 import Guidance from "../../.tmp/badge/guidance";
+import API from "../api";
 
 const badgeConfig: ComponentViewConfig<BadgeProps> = {
+    api: API(React.lazy(() => import("../../.tmp/badge/api"))),
     schema: badgeSchema,
     component: Badge,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/breadcrumb.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     Breadcrumb,
@@ -7,8 +8,10 @@ import {
 } from "@microsoft/fast-components-react-msft";
 import { groupSchema } from "../../../app/components/group";
 import Guidance from "../../.tmp/breadcrumb/guidance";
+import API from "../api";
 
 const breadcrumbConfig: ComponentViewConfig<BreadcrumbProps> = {
+    api: API(React.lazy(() => import("../../.tmp/breadcrumb/api"))),
     schema: breadcrumbSchema,
     component: Breadcrumb,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/button.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     Button,
@@ -6,8 +7,10 @@ import {
     buttonSchema,
 } from "@microsoft/fast-components-react-msft";
 import Guidance from "../../.tmp/button/guidance";
+import API from "../api";
 
 const buttonConfig: ComponentViewConfig<ButtonProps> = {
+    api: API(React.lazy(() => import("../../.tmp/button/api"))),
     schema: buttonSchema,
     component: Button,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/call-to-action.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     CallToAction,
@@ -6,8 +7,10 @@ import {
     callToActionSchema,
 } from "@microsoft/fast-components-react-msft";
 import Guidance from "../../.tmp/call-to-action/guidance";
+import API from "../api";
 
 const callToActionConfig: ComponentViewConfig<CallToActionProps> = {
+    api: API(React.lazy(() => import("../../.tmp/call-to-action/api"))),
     schema: callToActionSchema,
     component: CallToAction,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/caption.ts

@@ -1,12 +1,15 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     Caption,
     CaptionProps,
     captionSchema,
 } from "@microsoft/fast-components-react-msft";
 import Guidance from "../../.tmp/caption/guidance";
+import API from "../api";
 
 const captionConfig: ComponentViewConfig<CaptionProps> = {
+    api: API(React.lazy(() => import("../../.tmp/caption/api"))),
     schema: captionSchema,
     component: Caption,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/card.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     Card,
@@ -6,8 +7,10 @@ import {
     imageSchema,
 } from "@microsoft/fast-components-react-msft";
 import Guidance from "../../.tmp/card/guidance";
+import API from "../api";
 
 const cardConfig: ComponentViewConfig<CardProps> = {
+    api: API(React.lazy(() => import("../../.tmp/card/api"))),
     schema: cardSchema,
     component: Card,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/carousel.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     CallToActionAppearance,
@@ -10,6 +11,7 @@ import {
 } from "@microsoft/fast-components-react-msft";
 import { uniqueId } from "lodash-es";
 import Guidance from "../../.tmp/carousel/guidance";
+import API from "../api";
 
 const darkImageProps: object = {
     props: {
@@ -69,6 +71,7 @@ const defaultTabItems: CarouselSlide[] = [
 ];
 
 const carouselConfig: ComponentViewConfig<CarouselProps> = {
+    api: API(React.lazy(() => import("../../.tmp/carousel/api"))),
     schema: carouselSchema,
     component: Carousel,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/checkbox.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     Checkbox,
@@ -7,10 +8,12 @@ import {
 } from "@microsoft/fast-components-react-msft";
 import { uniqueId } from "lodash-es";
 import Guidance from "../../.tmp/checkbox/guidance";
+import API from "../api";
 
 const id: string = uniqueId();
 
 const checkboxConfig: ComponentViewConfig<CheckboxProps> = {
+    api: API(React.lazy(() => import("../../.tmp/checkbox/api"))),
     schema: checkboxSchema,
     component: Checkbox,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/context-menu-item.ts

@@ -1,12 +1,15 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     ContextMenuItem,
     ContextMenuItemProps,
     contextMenuItemSchema,
 } from "@microsoft/fast-components-react-msft";
 import Guidance from "../../.tmp/context-menu-item/guidance";
+import API from "../api";
 
 const contextMenuItemConfig: ComponentViewConfig<ContextMenuItemProps> = {
+    api: API(React.lazy(() => import("../../.tmp/context-menu-item/api"))),
     schema: contextMenuItemSchema,
     component: ContextMenuItem,
     guidance: Guidance,

packages/fast-component-explorer/app/utilities/configs/context-menu.ts

@@ -1,3 +1,4 @@
+import React from "react";
 import { ComponentViewConfig } from "./data.props";
 import {
     ContextMenu,
@@ -6,8 +7,10 @@ import {
     contextMenuSchema,
 } from "@microsoft/fast-components-react-msft";
 import Guidance from "../../.tmp/context-menu/guidance";
+import API from "../api";
 
 const contextMenuConfig: ComponentViewConfig<ContextMenuProps> = {
+    api: API(React.lazy(() => import("../../.tmp/context-menu/api"))),
     schema: contextMenuSchema,
     component: ContextMenu,
     guidance: Guidance,