docs: ✏️ prepares hooks docs to release

miroapp · Dec 8, 2023 · 12e50c8 · 12e50c8
1 parent 31ae1f3
commit 12e50c8
Show file tree

Hide file tree

Showing 21 changed files with 1,035 additions and 9 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,60 @@
+"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 { UseCurrentUser } from "./pages/UserCurrentUser";
+import { Index } from "./pages/Index";
+import { Miro } from "./pages/UseMiro";
+import { UseInfo } from "./pages/UseInfo";
+import { UseOnlineUsers } from "./pages/UseOnlineUsers";
+import { UseSelectedItems } from "./pages/UseSelectedItems";
+import { UseViewport } from "./pages/UseViewport";
+
+const router = createBrowserRouter([
+  {
+    path: "/app.html",
+    element: <Index />,
+  },
+  {
+    path: "/miro",
+    element: <Miro />,
+  },
+  {
+    path: "/use-current-user",
+    element: <UseCurrentUser />,
+  },
+  {
+    path: "/use-info",
+    element: <UseInfo />,
+  },
+  {
+    path: "/use-online-users",
+    element: <UseOnlineUsers />,
+  },
+  {
+    path: "/use-selected-items",
+    element: <UseSelectedItems />,
+  },
+  {
+    path: "/use-viewport",
+    element: <UseViewport />,
+  },
+]);
+
+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,31 @@
+"use client";
+
+import * as React from "react";
+import { Link } from "react-router-dom";
+
+export const Index: React.FC = () => {
+  return (
+    <main>
+      <ul>
+        <li>
+          <Link to={`/miro`}>useMiro</Link>
+        </li>
+        <li>
+          <Link to={`/use-current-user`}>useCurrentUser</Link>
+        </li>
+        <li>
+          <Link to={`/use-info`}>useInfo</Link>
+        </li>
+        <li>
+          <Link to={`/use-online-users`}>useOnlineUsers</Link>
+        </li>
+        <li>
+          <Link to={`/use-selected-items`}>useSelectedItems</Link>
+        </li>
+        <li>
+          <Link to={`/use-viewport`}>useViewport</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/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>Selected items:</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>;
+  }
+};
diff --git a/src/useCurrentUser/useCurrentUser.md b/src/useCurrentUser/useCurrentUser.md
@@ -1,3 +1,43 @@
 # useCurrentUser
 
-Get current [Miro user](https://developers.miro.com/docs/websdk-reference-board#getuserinfo).
+Get current [Miro user](https://developers.miro.com/docs/websdk-reference-board#getuserinfo).
+
+**Note**: Make sure you are running this code in a configured [Miro WebSDK app](https://developers.miro.com/docs/build-your-first-hello-world-app). 
+
+## Example
+
+
+```tsx
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import { useCurrentUser } from "@mirohq/websdk-react-hooks";
+
+const CurrentUser: 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>;
+    }
+}
+
+const App = () => {
+    return (
+        <MiroProvider>
+            <CurrentUser />
+        </MiroProvider>
+    )
+};
+
+
+const container = document.getElementById("root")!;
+const root = createRoot(container);
+root.render(<App />);
+```
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" />