docs: ✏️ prepares hooks docs to release (#5)

* docs: ✏️ prepares hooks docs to release * docs: ✏️ adding useStorage and useSession docs
miroapp · Dec 8, 2023 · e4ccd18 · e4ccd18
1 parent 31ae1f3
commit e4ccd18
Show file tree

Hide file tree

Showing 27 changed files with 1,288 additions and 34 deletions.
diff --git a/global.d.ts b/global.d.ts
@@ -0,0 +1,2 @@
+// https://vitejs.dev/guide/features.html#typescript-compiler-options
+/// <reference types="vite/client" />
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
   "typings": "lib/indeqx.d.ts",
   "scripts": {
     "start": "jest --watchAll --silent --coverage",
+    "app": "yarn build && vite",
     "test": "jest --maxWorkers 2",
     "test:ci": "jest --coverage",
     "commit": "cz",
@@ -57,6 +58,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@types/jest": "^29.5.10",
     "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@vitejs/plugin-react": "^4.2.1",
     "commit-and-tag-version": "^12.0.0",
     "commitizen": "^4.3.0",
     "concurrently": "^8.2.2",
@@ -77,10 +79,12 @@
     "prettier": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.20.1",
     "rimraf": "^5.0.5",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "*"
+    "typescript": "*",
+    "vite": "^5.0.7"
   },
   "config": {
     "commitizen": {

diff --git a/src/app-example/app.html b/src/app-example/app.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://miro.com/app/static/sdk/v2/miro.js"></script>
+    <title>Miro - React hooks app example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+
+    <script type="module" src="/app.tsx"></script>
+  </body>
+</html>
diff --git a/src/app-example/app.tsx b/src/app-example/app.tsx
@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+import { MiroProvider } from "../../esm";
+import { routes } from "./routes";
+
+const router = createBrowserRouter(routes);
+
+const App = () => {
+  return (
+    <React.StrictMode>
+      <MiroProvider>
+        <RouterProvider router={router} />
+      </MiroProvider>
+    </React.StrictMode>
+  );
+};
+
+const container = document.getElementById("root")!;
+const root = createRoot(container);
+root.render(<App />);
diff --git a/src/app-example/index.html b/src/app-example/index.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://miro.com/app/static/sdk/v2/miro.js"></script>
+    <title>Miro - React hooks app example</title>
+  </head>
+  <body>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>
diff --git a/src/app-example/index.ts b/src/app-example/index.ts
@@ -0,0 +1,7 @@
+export async function init() {
+  miro.board.ui.on("icon:click", async () => {
+    await miro.board.ui.openPanel({ url: "app.html" });
+  });
+}
+
+init();
diff --git a/src/app-example/pages/Index.tsx b/src/app-example/pages/Index.tsx
@@ -0,0 +1,21 @@
+"use client";
+
+import * as React from "react";
+import { Link } from "react-router-dom";
+import { routes } from "../routes";
+
+const readable = (path: string) => path.split("/").pop();
+
+export const Index: React.FC = () => {
+  return (
+    <main>
+      <ul>
+        {routes.map((route) => (
+          <li key={route.path}>
+            <Link to={route.path}>{readable(route.path)}</Link>
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+};
diff --git a/src/app-example/pages/UseInfo.tsx b/src/app-example/pages/UseInfo.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import * as React from "react";
+import { useInfo } from "../../../esm";
+
+export const UseInfo: React.FC = () => {
+  const { status, error, result } = useInfo();
+
+  if (status === "loading") {
+    return <p>Fetching board info...</p>;
+  }
+
+  if (error) {
+    return <p>Something went wrong</p>;
+  }
+
+  if (status === "success") {
+    return (
+      <div>
+        <p>Current board info</p>
+        <pre>{JSON.stringify(result, null, 2)}</pre>
+      </div>
+    );
+  }
+};
diff --git a/src/app-example/pages/UseMiro.tsx b/src/app-example/pages/UseMiro.tsx
@@ -0,0 +1,10 @@
+"use client";
+
+import * as React from "react";
+import { useMiro } from "../../../esm";
+
+export const Miro: React.FC = () => {
+  const miro = useMiro();
+
+  return <pre>{JSON.stringify(miro, null, 2)}</pre>;
+};
diff --git a/src/app-example/pages/UseOnlineUsers.tsx b/src/app-example/pages/UseOnlineUsers.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import { useOnlineUsers } from "../../../esm";
+
+export const UseOnlineUsers: React.FC = () => {
+  const { status, result, error } = useOnlineUsers();
+
+  if (status === "loading") {
+    return <p>Fetching online users...</p>;
+  }
+
+  if (error) {
+    return <p>Something went wrong</p>;
+  }
+
+  if (status === "success") {
+    return (
+      <div>
+        <p>Online users</p>
+        <ul>
+          {result.map((user) => (
+            <li key={user.id}>
+              #{user.id} - {user.name}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+};
diff --git a/src/app-example/pages/UseSelectedItems.tsx b/src/app-example/pages/UseSelectedItems.tsx
@@ -0,0 +1,31 @@
+"use client";
+
+import * as React from "react";
+import { useSelectedItems } from "../../../esm";
+
+export const UseSelectedItems: React.FC = () => {
+  const { status, result, error } = useSelectedItems();
+
+  if (status === "loading") {
+    return <p>Fetching selected items...</p>;
+  }
+
+  if (error) {
+    return <p>Something went wrong</p>;
+  }
+
+  if (status === "success") {
+    return (
+      <div>
+        <p>Selected items:</p>
+        <ul>
+          {result.map((item) => (
+            <li key={item.id}>
+              #{item.id} - {item.type}
+            </li>
+          ))}
+        </ul>
+      </div>
+    );
+  }
+};
diff --git a/src/app-example/pages/UseSession.tsx b/src/app-example/pages/UseSession.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import * as React from "react";
+import { OnlineUserInfo } from "@mirohq/websdk-types";
+import { useSession } from "../../../esm";
+
+export const UseSession: React.FC = () => {
+  const { status, session, start, usersInSession, usersNotInSession } = useSession();
+
+  const handleStartSession = async () => {
+    await start({
+      name: "Test session",
+    });
+  };
+
+  const handleInviteUser = async (user: OnlineUserInfo) => {
+    await session?.invite(user);
+  };
+
+  return (
+    <div>
+      <h4>Session {status}</h4>
+      {session ? (
+        <div>
+          <p>
+            #{session.id} - {session.name}
+          </p>
+          <ul>
+            <li>
+              <strong>Users in session</strong>
+            </li>
+            {usersInSession.map((user) => (
+              <li key={user.id}>
+                #{user.id} - {user.name}
+              </li>
+            ))}
+          </ul>
+          <ul>
+            <li>
+              <strong>Users not in session</strong>
+            </li>
+            {usersNotInSession.map((user) => (
+              <li key={user.id}>
+                #{user.id} - {user.name}
+                <button onClick={() => handleInviteUser(user)}>Invite</button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : (
+        <button onClick={handleStartSession}>Start session</button>
+      )}
+    </div>
+  );
+};
diff --git a/src/app-example/pages/UseStorage.tsx b/src/app-example/pages/UseStorage.tsx
@@ -0,0 +1,37 @@
+"use client";
+
+import * as React from "react";
+import { useStorage } from "../../../esm";
+
+export const UseStorage: React.FC = () => {
+  const { status, result, error, set, remove } = useStorage("react-hooks", "example");
+
+  if (status === "loading") {
+    return <p>Fetching values...</p>;
+  }
+
+  if (error) {
+    return <p>Something went wrong</p>;
+  }
+
+  const handleSetValue = async () => {
+    await set("Just changed from the app");
+  };
+
+  const handleRemoveValue = async () => {
+    await remove();
+  };
+
+  if (status === "success") {
+    return (
+      <div>
+        <p>Current value:</p>
+        <pre>{JSON.stringify(result, null, 2)}</pre>
+        <button onClick={handleSetValue}>Set value</button>
+        <button disabled={!result} onClick={handleRemoveValue}>
+          Remove value
+        </button>
+      </div>
+    );
+  }
+};
diff --git a/src/app-example/pages/UseViewport.tsx b/src/app-example/pages/UseViewport.tsx
@@ -0,0 +1,64 @@
+"use client";
+
+import * as React from "react";
+import { useSelectedItems, useViewport } from "../../../esm";
+
+export const UseViewport: React.FC = () => {
+  const { status, result, error, set, zoomTo } = useViewport();
+  const selected = useSelectedItems();
+
+  if (status === "loading") {
+    return <p>Fetching viewport...</p>;
+  }
+
+  if (error) {
+    return <p>Something went wrong</p>;
+  }
+
+  const handleSetViewport = async () => {
+    await set({
+      viewport: {
+        x: 200,
+        y: 100,
+        width: 1280,
+        height: 720,
+      },
+      padding: {
+        top: 100,
+        left: 200,
+        bottom: 50,
+        right: 20,
+      },
+      animationDurationInMs: 1000,
+    });
+  };
+
+  const handleZoomTo = async () => {
+    if (selected.result.length < 1) {
+      return;
+    }
+
+    await zoomTo(selected.result);
+  };
+
+  if (status === "success") {
+    return (
+      <div>
+        <p>Current viewport:</p>
+        <ul>
+          <li>
+            X and Y: {result?.x} x {result?.y}
+          </li>
+          <li>
+            Size (WxH): {result?.width} x {result?.height}
+          </li>
+          <li>Zoom level {result?.zoomLevel}</li>
+        </ul>
+        <button onClick={handleSetViewport}>Set viewport</button>
+        <button disabled={selected.result.length < 1} onClick={handleZoomTo}>
+          Zoom to selected
+        </button>
+      </div>
+    );
+  }
+};
diff --git a/src/app-example/pages/UserCurrentUser.tsx b/src/app-example/pages/UserCurrentUser.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import * as React from "react";
+import { useCurrentUser } from "../../../esm";
+
+export const UseCurrentUser: React.FC = () => {
+  const { status, result, error } = useCurrentUser();
+
+  if (status === "loading") {
+    return <p>Fetching user...</p>;
+  }
+
+  if (error) {
+    return <p>Something went wrong</p>;
+  }
+
+  if (status === "success") {
+    return <p>The current user is "{result?.name}"</p>;
+  }
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// https://vitejs.dev/guide/features.html#typescript-compiler-options
		/// <reference types="vite/client" />