Remove react-router dependency from playground (#2686)

Added some basic hash routing, but routing should mainly be the concern of the application importing the playground, not the playground itself.

package.json

@@ -23,14 +23,12 @@
     "monaco-editor": "^0.25.1",
     "react": "16.13.1",
     "react-dom": "16.13.1",
-    "react-router-dom": "^5.2.0",
     "tslib": "^2.3.1"
   },
   "devDependencies": {
     "@octokit/core": "^3.5.1",
     "@types/react": "16.9.35",
     "@types/react-dom": "16.9.8",
-    "@types/react-router-dom": "^5.1.7",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.13.0",
     "cross-env": "^7.0.3",

packages/playground/src/ui-playground/demo-routes.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { ButtonDemo } from "./demo/form/button/button-demo";
+import { ComboBoxDemo } from "./demo/form/combobox/combobox-demo";
+import { SearchBoxDemo } from "./demo/form/searchbox/searchbox-demo";
+import { TextFieldDemo } from "./demo/form/textfield/textfield-demo";
+import { CertificateDisplayDemo } from "./demo/display/certificate/certificate-display-demo";
+import { ActionFormDemo } from "./demo/form/action-form-demo";
+import { DropdownDemo } from "./demo/form/dropdown-demo";
+import { RadioButtonDemo } from "./demo/form/radiobutton/radiobutton-demo";
+import { CheckboxDemo } from "./demo/form/checkbox/checkbox-demo";
+
+export const DEMO_MAP = {
+    default: () => <DefaultPane />,
+    actionform: () => <ActionFormDemo />,
+    button: () => <ButtonDemo />,
+    checkbox: () => <CheckboxDemo />,
+    radiobutton: () => <RadioButtonDemo />,
+    combobox: () => <ComboBoxDemo />,
+    dropdown: () => <DropdownDemo />,
+    searchbox: () => <SearchBoxDemo />,
+    textfield: () => <TextFieldDemo />,
+    certificatedisplay: () => <CertificateDisplayDemo />,
+};
+
+export type DemoName = keyof typeof DEMO_MAP;
+
+const DEMO_HASH_REGEX = /#\/demos\/(?<demo>\w+)/;
+
+export function getDemoHash(demoName: DemoName) {
+    return `#/demos/${demoName}`;
+}
+
+export function getDemoFromUrl(): DemoName {
+    let demoName: DemoName = "default";
+    if (location.hash) {
+        const match = location.hash.match(DEMO_HASH_REGEX);
+        if (match) {
+            const d = match.groups?.demo as DemoName | undefined;
+            if (d && DEMO_MAP[d]) {
+                demoName = d;
+            }
+        }
+    }
+    return demoName;
+}
+
+export const DefaultPane: React.FC = () => {
+    return (
+        <span style={{ width: "100%", textAlign: "center" }}>
+            Select a demo from the list
+        </span>
+    );
+};

packages/playground/src/ui-playground/layout/demo-main-content.tsx

@@ -1,45 +1,11 @@
 import * as React from "react";
-import { Route, Switch } from "react-router";
-import { ButtonDemo } from "../demo/form/button/button-demo";
-import { ComboBoxDemo } from "../demo/form/combobox/combobox-demo";
-import { SearchBoxDemo } from "../demo/form/searchbox/searchbox-demo";
-import { TextFieldDemo } from "../demo/form/textfield/textfield-demo";
-import { CertificateDisplayDemo } from "../demo/display/certificate/certificate-display-demo";
-import { ActionFormDemo } from "../demo/form/action-form-demo";
-import { DropdownDemo } from "../demo/form/dropdown-demo";
-import { RadioButtonDemo } from "../demo/form/radiobutton/radiobutton-demo";
-import { CheckboxDemo } from "../demo/form/checkbox/checkbox-demo";
+import { DemoName, DEMO_MAP } from "../demo-routes";
 
-export const DemoMainContent: React.FC = () => {
-    return (
-        <Switch>
-            <Route path="/playground/actionform">
-                <ActionFormDemo />
-            </Route>
-            <Route path="/playground/button">
-                <ButtonDemo />
-            </Route>
-            <Route path="/playground/checkbox">
-                <CheckboxDemo />
-            </Route>
-            <Route path="/playground/radiobutton">
-                <RadioButtonDemo />
-            </Route>
-            <Route path="/playground/combobox">
-                <ComboBoxDemo />
-            </Route>
-            <Route path="/playground/dropdown">
-                <DropdownDemo />
-            </Route>
-            <Route path="/playground/searchbox">
-                <SearchBoxDemo />
-            </Route>
-            <Route path="/playground/textfield">
-                <TextFieldDemo />
-            </Route>
-            <Route path="/playground/displays/certificate">
-                <CertificateDisplayDemo />
-            </Route>
-        </Switch>
-    );
+export interface DemoMainContentProps {
+    demoName?: DemoName;
+}
+
+export const DemoMainContent: React.FC<DemoMainContentProps> = (props) => {
+    const demoName = props.demoName ?? "default";
+    return DEMO_MAP[demoName]();
 };

packages/playground/src/ui-playground/layout/demo-nav-menu.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Nav, INavStyles, INavLinkGroup } from "@fluentui/react/lib/Nav";
+import { getDemoHash } from "../demo-routes";
 
 export const DemoNavMenu: React.FC = () => {
     const navStyles: Partial<INavStyles> = {
@@ -15,42 +16,42 @@ export const DemoNavMenu: React.FC = () => {
                 {
                     key: "ActionForm",
                     name: "ActionForm",
-                    url: "#/playground/actionform",
+                    url: getDemoHash("actionform"),
                 },
                 {
                     key: "Button",
                     name: "Button",
-                    url: "#/playground/button",
+                    url: getDemoHash("button"),
                 },
                 {
                     key: "Checkbox",
                     name: "Checkbox",
-                    url: "#/playground/checkbox",
+                    url: getDemoHash("checkbox"),
                 },
                 {
                     key: "RadioButton",
                     name: "Radio Button",
-                    url: "#/playground/radiobutton",
+                    url: getDemoHash("radiobutton"),
                 },
                 {
                     key: "ComboBox",
                     name: "ComboBox",
-                    url: "#/playground/combobox",
+                    url: getDemoHash("combobox"),
                 },
                 {
                     key: "Dropdown",
                     name: "Dropdown",
-                    url: "#/playground/dropdown",
+                    url: getDemoHash("dropdown"),
                 },
                 {
                     key: "SearchBox",
                     name: "SearchBox",
-                    url: "#/playground/searchbox",
+                    url: getDemoHash("searchbox"),
                 },
                 {
                     key: "TextField",
                     name: "TextField",
-                    url: "#/playground/textfield",
+                    url: getDemoHash("textfield"),
                 },
             ],
         },
@@ -62,7 +63,7 @@ export const DemoNavMenu: React.FC = () => {
                 {
                     key: "CertificateDisplay",
                     name: "Certificate Display",
-                    url: "#/playground/displays/certificate",
+                    url: getDemoHash("certificatedisplay"),
                 },
             ],
         },

packages/playground/src/ui-playground/playground-example.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { HashRouter as Router } from "react-router-dom";
 import { DemoNavMenu } from "./layout/demo-nav-menu";
 import { DemoMainContent } from "./layout/demo-main-content";
+import { DemoName, getDemoFromUrl } from "./demo-routes";
 
 export interface PlaygroundExampleProps {
     /**
@@ -14,6 +14,24 @@ export interface PlaygroundExampleProps {
  * Playground
  */
 export const PlaygroundExample: React.FC<PlaygroundExampleProps> = () => {
+    const [demoName, setDemoName] = React.useState<DemoName | undefined>(
+        getDemoFromUrl()
+    );
+
+    // Listen to hash changes and update the currently selected demo
+    React.useEffect(() => {
+        const onHashChange = () => {
+            const d = getDemoFromUrl();
+            setDemoName(d);
+        };
+
+        addEventListener("hashchange", onHashChange);
+
+        return () => {
+            removeEventListener("hashchange", onHashChange);
+        };
+    }, []);
+
     return (
         <div>
             <h1
@@ -35,14 +53,12 @@ export const PlaygroundExample: React.FC<PlaygroundExampleProps> = () => {
                 }}
             ></div>
 
-            <Router>
-                <div style={{ display: "flex" }}>
-                    <div>
-                        <DemoNavMenu />
-                    </div>
-                    <DemoMainContent />
+            <div style={{ display: "flex" }}>
+                <div>
+                    <DemoNavMenu />
                 </div>
-            </Router>
+                <DemoMainContent demoName={demoName} />
+            </div>
         </div>
     );
 };