feat: add storybook to component libraries and a private package for component documentation (#1928)

This adds the storybook implementation to the @microsoft/fast-components-react-msft and @microsoft/fast-components-react-base packages to replace the soon-to-be deprecated development site and also adds a private package that contains a site to be used for component documentation.

Author: janechu

packages/fast-component-explorer/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/fast-component-explorer/.prettierignore

@@ -0,0 +1,3 @@
+coverage/*
+dist/*
+www/*

packages/fast-component-explorer/README.md

@@ -0,0 +1,25 @@
+# Introduction
+
+This is the documentation site for `@microsoft/fast-components-react-msft`.
+
+It is built using the `@microsoft/fast-tooling-react` and `@microsoft/fast-components-react-msft` packages to view, configure, and document each component.
+
+## Getting Started
+Follow setup instructions in [contributing](https://github.com/Microsoft/fast-dna/blob/master/CONTRIBUTING.md).
+
+- Running the app locally: `npm start`
+- Build production app: `npm run build`
+
+## Testing
+- Run all tests: `npm test`
+- tslint all files: `npm run tslint`
+
+## Troubleshooting
+- The application uses service-workers, which means views might not update as expected during the development process. To ensure files are updated when changed, you can configure your developer tools to [update the assets on reload](https://stackoverflow.com/questions/40783790/disable-service-workers-when-in-development-mode).
+
+## Contributing components
+
+If you are adding a component to the documentation site, you will need to:
+
+- Add curated component configs to the `./app/utilities/configs/` folder. See the `./app/utilities/configs/README.md` for details.
+- If your component includes a plugin, add any plugin ids and custom plugins to the `./app/utilities/plugins/` folder. For more information on how plugins work, read the [documentation](https://github.com/microsoft/fast-dna/blob/master/packages/fast-tooling-react/README.md) for the `@microsoft/fast-tooling-react` package.

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

@@ -0,0 +1,17 @@
+import React from "react";
+import Adapter from "enzyme-adapter-react-16";
+import { configure, mount, shallow } from "enzyme";
+import App from "./app";
+
+/*
+ * Configure Enzyme
+ */
+configure({ adapter: new Adapter() });
+
+describe("App", (): void => {
+    test("should not throw", () => {
+        expect(() => {
+            mount(<App />);
+        }).not.toThrow();
+    });
+});

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

@@ -0,0 +1,29 @@
+import React from "react";
+import Dictionary from "./dictionary";
+import Explorer from "./explorer";
+import Preview from "./preview";
+import { history } from "./config";
+import { Route, Router } from "react-router-dom";
+
+/**
+ * The root level app
+ *
+ * This is where the routes are declared
+ */
+export default class App extends React.Component<{}, {}> {
+    public render(): React.ReactNode {
+        return (
+            <Router history={history}>
+                <div>
+                    <Route component={Dictionary} exact={true} path="/" />
+                    <Route
+                        component={Explorer}
+                        exact={true}
+                        path="/components/:component"
+                    />
+                    <Route component={Preview} exact={true} path="/preview" />
+                </div>
+            </Router>
+        );
+    }
+}

packages/fast-component-explorer/app/components/group/group.props.ts

@@ -0,0 +1,5 @@
+import React from "react";
+
+export interface GroupProps {
+    style?: React.CSSProperties;
+}

packages/fast-component-explorer/app/components/group/group.schema.json

@@ -0,0 +1,17 @@
+{
+    "$schema": "http://json-schema.org/schema#",
+    "title": "Group",
+    "description": "A group's schema definition.",
+    "id": "group",
+    "type": "object",
+    "properties": {},
+    "reactProperties": {
+        "children": {
+            "title": "Children",
+            "type": "children",
+            "defaults": [
+                "text"
+            ]
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+import React from "react";
+import { GroupProps } from "./group.props";
+
+/**
+ * This component is used as a container to group child components together
+ */
+export class Group extends React.Component<GroupProps, {}> {
+    public render(): React.ReactNode {
+        return <div style={this.props.style}>{this.props.children}</div>;
+    }
+}

packages/fast-component-explorer/app/components/group/index.ts

@@ -0,0 +1 @@
+export * from "./group";

packages/fast-component-explorer/app/components/index.ts

@@ -0,0 +1 @@
+export * from "./group";