add integrate ob module demo

Author: sarike

package.json

@@ -10,7 +10,8 @@
   },
   "dependencies": {
     "history": "^5.3.0",
-    "openblocks-sdk": "^0.0.17",
+    "less": "^4.1.3",
+    "openblocks-sdk": "^0.0.20",
     "react": "17",
     "react-dom": "17",
     "react-router": "^6.4.3",

src/App.tsx

@@ -1,4 +1,3 @@
-import { OpenblocksAppView } from "openblocks-sdk";
 import { useEffect } from "react";
 import {
   createHashRouter,
@@ -9,6 +8,8 @@ import {
   useLocation,
   useNavigate,
 } from "react-router-dom";
+import { AppDemo } from "./AppDemo";
+import { ModuleDemo } from "./ModuleDemo";
 
 const demos = [
   {
@@ -23,6 +24,13 @@ const demos = [
     title: "Pagination with temporary state demo",
     appId: "6379cdd9f02c6e6ecc1d37ff",
   },
+  {
+    title: "Use module as ui component",
+    appId: "637dc058a899fe1ffcb1589a",
+    isModule: true,
+    initialMethodName: "clearForm",
+    initialInputs: { formTitle: "Student info" },
+  },
 ];
 
 function titleToPath(title: string) {
@@ -55,17 +63,21 @@ function Root() {
   );
 }
 
-function AppDemo(props: { appId: string }) {
-  return <OpenblocksAppView className="ob-app" appId={props.appId} />;
-}
-
 const routes: RouteObject[] = [
   {
     path: "/",
     element: <Root />,
     children: demos.map((i) => ({
       path: titleToPath(i.title),
-      element: <AppDemo appId={i.appId} />,
+      element: i.isModule ? (
+        <ModuleDemo
+          appId={i.appId}
+          initialModuleInputs={i.initialInputs}
+          initialMethodName={i.initialMethodName}
+        />
+      ) : (
+        <AppDemo appId={i.appId} />
+      ),
     })),
   },
 ];

src/AppDemo.tsx

@@ -0,0 +1,5 @@
+import { OpenblocksAppView } from "openblocks-sdk";
+
+export function AppDemo(props: { appId: string }) {
+  return <OpenblocksAppView className="ob-app" appId={props.appId} />;
+}

src/ModuleDemo.tsx

@@ -0,0 +1,93 @@
+import { AppViewInstance, OpenblocksAppView } from "openblocks-sdk";
+import { useRef, useState } from "react";
+
+interface IProps {
+  appId: string;
+  initialModuleInputs: any;
+  initialMethodName: string;
+}
+
+export function ModuleDemo(props: IProps) {
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const methodInputRef = useRef<HTMLInputElement>(null);
+  const instanceRef = useRef<AppViewInstance<any, any>>(null);
+  const [inputs, setInputs] = useState<any>(props.initialModuleInputs);
+  const [outputs, setOutputs] = useState<any>({});
+  const [eventLogs, setEventLog] = useState<string[]>([]);
+
+  const handleEventTriggered = (eventName: string) => {
+    setEventLog((logs) =>
+      logs.concat(`${new Date().toISOString()} event ${eventName} triggered`)
+    );
+  };
+
+  const handleSetInputs = () => {
+    const inputDataJson = inputRef.current?.value || JSON.stringify({});
+    setInputs(JSON.parse(inputDataJson));
+  };
+
+  const handleInvokeMethod = () => {
+    const methodName = methodInputRef.current?.value;
+    if (!methodName) {
+      return;
+    }
+    instanceRef.current?.invokeMethod(methodName);
+  };
+
+  return (
+    <div className="module-demo">
+      <div>
+        <h2>Host page</h2>
+        <div className="module-controls">
+          <div>
+            <strong>inputs</strong>
+            <textarea
+              ref={inputRef}
+              rows={5}
+              defaultValue={JSON.stringify(inputs)}
+              placeholder="input initial module input data in json format"
+            ></textarea>
+            <button onClick={handleSetInputs}>set inputs</button>
+          </div>
+          <div>
+            <strong>outputs</strong>
+            <textarea
+              readOnly
+              rows={10}
+              value={JSON.stringify(outputs, null, 2)}
+            ></textarea>
+          </div>
+          <div>
+            <strong>invoke method</strong>
+            <input
+              ref={methodInputRef}
+              defaultValue={props.initialMethodName}
+              placeholder="input module method name"
+            />
+            <button onClick={handleInvokeMethod}>invoke</button>
+          </div>
+          <div>
+            <strong>events trigger log</strong>
+            <textarea
+              rows={5}
+              readOnly
+              value={eventLogs.reverse().join("\n")}
+            ></textarea>
+          </div>
+        </div>
+      </div>
+      <div className="module-demo-panel">
+        <h2>Openblocks module</h2>
+        <div>
+          <OpenblocksAppView
+            onModuleOutputChange={setOutputs}
+            onModuleEventTriggered={handleEventTriggered}
+            moduleInputs={inputs}
+            appId={props.appId}
+            ref={instanceRef}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/index.css renamed to src/main.less

@@ -16,6 +16,7 @@ a {
   color: #646cff;
   text-decoration: inherit;
 }
+
 a:hover {
   color: #535bf2;
 }
@@ -32,27 +33,6 @@ h1 {
   line-height: 1.1;
 }
 
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-
-button:hover {
-  border-color: #646cff;
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
 .ob-app {
   width: 100%;
 }
@@ -73,3 +53,35 @@ button:focus-visible {
 .nav a {
   margin-right: 18px;
 }
+
+.module-demo {
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #ddd;
+
+  & > div {
+    flex: 1;
+    padding: 10px;
+    & > h2 {
+      padding-bottom: 10px;
+    }
+    &:first-child {
+      border-right: 1px solid #ddd;
+    }
+  }
+
+  .module-controls {
+    button {
+      margin-top: 8px;
+    }
+    & > div {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: 18px;
+    }
+  }
+}
+
+button {
+  cursor: pointer;
+}

src/main.tsx

@@ -3,7 +3,7 @@ import ReactDOM from "react-dom";
 import App from "./App";
 
 import "openblocks-sdk/dist/style.css";
-import "./index.css";
+import "./main.less";
 
 ReactDOM.render(
   <React.StrictMode>

src/vite-env.d.ts

@@ -1,3 +1 @@
 /// <reference types="vite/client" />
-
-declare module "openblocks-sdk";

tsconfig.json

@@ -14,7 +14,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx",
+    "jsx": "react-jsx"
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]