Updating Main Page Content

docs/site/BUILD

@@ -17,6 +17,7 @@ srcs = glob([
 
 build_deps = [
     "//:typings",
+    "//:node_modules/@types/stringify-object",
     "//:node_modules/@astrojs/starlight",
     "//:node_modules/@astrojs/tailwind",
     "//:node_modules/@astrojs/starlight-tailwind",
@@ -34,7 +35,9 @@ build_deps = [
     "//:node_modules/esbuild-wasm",
     "//:node_modules/@player-tools/dsl",
     ":node_modules/@player-ui/player",
+    ":node_modules/@player-ui/react",
     ":node_modules/@player-ui/reference-assets-plugin-components",
+    ":node_modules/@player-ui/reference-assets-plugin-react",
 ]
 
 astro_bin.astro(

docs/site/package.json

@@ -5,6 +5,8 @@
   "type": "module",
   "dependencies": {
     "@player-ui/player": "workspace:*",
-    "@player-ui/reference-assets-plugin-components": "workspace:*"
+    "@player-ui/react": "workspace:*",
+    "@player-ui/reference-assets-plugin-components": "workspace:*",
+    "@player-ui/reference-assets-plugin-react": "workspace:*"
   }
 }

docs/site/src/components/PlayerPreview.astro

@@ -0,0 +1,5 @@
+---
+import PlayerPreviewComponent from "./tools/preview/PlayerPreview";
+---
+
+<PlayerPreviewComponent client:only />

docs/site/src/components/tools/preview/PlayerPreview.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import { ReferenceAssetsPlugin } from "@player-ui/reference-assets-plugin-react";
+import "@player-ui/reference-assets-plugin-react/dist/index.css";
+import { loader, Editor } from "@monaco-editor/react";
+import { ManagedPlayer, type Flow, type FlowManager } from "@player-ui/react";
+import { basicFlowManager } from "./sample-flow-manager";
+
+loader
+  .init()
+  .then((m) => {
+    m.languages.typescript.javascriptDefaults.setEagerModelSync(true);
+
+    // TODO: Re-add these when we can load `.d.ts` definitions into the editor
+    m.languages.typescript.typescriptDefaults.setDiagnosticsOptions({
+      noSemanticValidation: true,
+      noSyntaxValidation: true,
+    });
+    m.languages.typescript.typescriptDefaults.setCompilerOptions({
+      jsx: m.languages.typescript.JsxEmit.React,
+    });
+  })
+  .catch((e: unknown) => {
+    console.error("Error initializing monaco", e);
+  });
+
+export default function PlayerPreview() {
+  const theme = localStorage.getItem("starlight-theme") ?? "light";
+
+  const config = React.useMemo(
+    () => ({
+      plugins: [new ReferenceAssetsPlugin()],
+    }),
+    [],
+  );
+
+  const [completed, setCompleted] = React.useState(false);
+
+  const [currentFlow, setCurrentFlow] = React.useState<Flow | undefined>();
+
+  const flowManager = React.useMemo<FlowManager>(() => {
+    return {
+      next: async (prev) => {
+        const resp = await basicFlowManager.next(prev);
+
+        if (resp.done) {
+          setCompleted(true);
+        } else {
+          setCurrentFlow((resp as any).value);
+        }
+
+        return resp;
+      },
+    };
+  }, [setCurrentFlow]);
+
+  return (
+    <div className="grid grid-cols-2 gap-8 py-4">
+      <div>
+        <h3 className="mb-2" style={{marginTop: "1rem"}}>Content</h3>
+      </div>
+      <div>
+        <h3 className="mb-2">Player View</h3>
+      </div>
+      <div>
+        <Editor
+            height="90vh"
+            width="100%"
+            language="typescript"
+            theme={`vs-${theme}`}
+            value={JSON.stringify(currentFlow, null, 2)}
+            path="flow.tsx"
+            keepCurrentModel={true}
+            options={{
+              quickSuggestions: true,
+              suggestOnTriggerCharacters: true,
+              parameterHints: {
+                enabled: true,
+              },
+              readOnly: true
+            }}
+          />
+      </div>
+      <div>
+        {completed && <div> Done with demo </div>}
+          {!completed && (
+            <React.Suspense fallback={<div> Loading... </div>}>
+              <ManagedPlayer
+                manager={flowManager}
+                {...config}
+              />
+            </React.Suspense>
+          )}
+      </div>
+    </div>
+  );
+}

docs/site/src/components/tools/preview/flow-1.json

@@ -0,0 +1,118 @@
+{
+    "id": "flow-1",
+    "views": [
+      {
+        "id": "view-1",
+        "type": "info",
+        "title": {
+          "asset": {
+            "id": "info-title",
+            "type": "text",
+            "value": "Welcome to Player"
+          }
+        },
+        "primaryInfo": {
+          "asset": {
+            "id": "info-primary",
+            "type": "collection",
+            "values": [
+              {
+                "asset": {
+                  "id": "info-primary-1",
+                  "type": "text",
+                  "value": "This is some content inside of a Player view."
+                }
+              }
+            ]
+          }
+        },
+        "actions": [
+          {
+            "asset": {
+              "id": "action-next",
+              "type": "action",
+              "value": "Next",
+              "label": {
+                "asset": {
+                  "id": "action-next-label",
+                  "type": "text",
+                  "value": "Next"
+                }
+              }
+            }
+          }
+        ]
+      },
+      {
+        "id": "view-2",
+        "type": "info",
+        "title": {
+          "asset": {
+            "id": "title",
+            "type": "text",
+            "value": "This is another page in the 1st flow."
+          }
+        },
+        "actions": [
+          {
+            "asset": {
+              "id": "action-back",
+              "type": "action",
+              "value": "Prev",
+              "label": {
+                "asset": {
+                  "id": "action-back-label",
+                  "type": "text",
+                  "value": "Back"
+                }
+              }
+            }
+          },
+          {
+            "asset": {
+              "id": "action-next",
+              "type": "action",
+              "value": "Next",
+              "label": {
+                "asset": {
+                  "id": "action-next-label",
+                  "type": "text",
+                  "value": "Next"
+                }
+              }
+            }
+          }
+        ]
+      }
+    ],
+    "navigation": {
+      "BEGIN": "FLOW_1",
+      "FLOW_1": {
+        "startState": "VIEW_1",
+        "VIEW_1": {
+          "state_type": "VIEW",
+          "ref": "view-1",
+          "transitions": {
+            "Prev": "END_Back",
+            "Next": "VIEW_2"
+          }
+        },
+        "VIEW_2": {
+          "state_type": "VIEW",
+          "ref": "view-2",
+          "transitions": {
+            "Prev": "VIEW_1",
+            "Next": "END_Done"
+          }
+        },
+        "END_Back": {
+          "state_type": "END",
+          "outcome": "back"
+        },
+        "END_Done": {
+          "state_type": "END",
+          "outcome": "done"
+        }
+      }
+    }
+  }

docs/site/src/components/tools/preview/flow-2.json

@@ -0,0 +1,83 @@
+{
+    "id": "flow-2",
+    "views": [
+      {
+        "id": "view-1",
+        "type": "info",
+        "title": {
+          "asset": {
+            "id": "info-title",
+            "type": "text",
+            "value": "This is the 2nd flow."
+          }
+        },
+        "primaryInfo": {
+          "asset": {
+            "id": "info-primary",
+            "type": "collection",
+            "values": [
+              {
+                "asset": {
+                  "id": "info-primary-1",
+                  "type": "text",
+                  "value": "Note the delay between loading flows to emulate a network request/response"
+                }
+              }
+            ]
+          }
+        },
+        "actions": [
+          {
+            "asset": {
+              "id": "action-back",
+              "type": "action",
+              "value": "Prev",
+              "label": {
+                "asset": {
+                  "id": "action-back-label",
+                  "type": "text",
+                  "value": "Back"
+                }
+              }
+            }
+          },
+          {
+            "asset": {
+              "id": "action-next",
+              "type": "action",
+              "value": "Next",
+              "label": {
+                "asset": {
+                  "id": "action-next-label",
+                  "type": "text",
+                  "value": "Continue"
+                }
+              }
+            }
+          }
+        ]
+      }
+    ],
+    "navigation": {
+      "BEGIN": "FLOW_1",
+      "FLOW_1": {
+        "startState": "VIEW_1",
+        "VIEW_1": {
+          "state_type": "VIEW",
+          "ref": "view-1",
+          "transitions": {
+            "Prev": "END_Back",
+            "Next": "END_Done"
+          }
+        },
+        "END_Back": {
+          "state_type": "END",
+          "outcome": "back"
+        },
+        "END_Done": {
+          "state_type": "END",
+          "outcome": "done"
+        }
+      }
+    }
+  }