Merge branch 'main' into dfosco/ensure-single-rendering-waiting-room

miroapp · Jan 23, 2024 · 6e3f528 · 6e3f528
2 parents 8a26632 + 49a48fc
commit 6e3f528
Show file tree

Hide file tree

Showing 22 changed files with 298 additions and 178 deletions.
diff --git a/examples/ai-image-generator/README.md b/examples/ai-image-generator/README.md
@@ -26,10 +26,11 @@ Watch the video below for a demo, code walkthrough, and to learn how to set up t
 # ⚙️ Included Features <a name="features"></a>
 
 - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
-  - [drop event](https://developers.miro.com/docs/ui_boardui#drop-event)
-  - [openPanel(options)](https://developers.miro.com/docs/ui_boardui#openpanel)
+  - [miro.board.ui.on('drop')](https://developers.miro.com/docs/ui_boardui#drop-event)
+  - [miro.board.ui.openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel)
+  - [miro.board.createImage](https://developers.miro.com/docs/board_board#createimage)
   - [draggable elements](https://developers.miro.com/docs/add-drag-and-drop-to-your-app#add-draggable-elements-to-the-app-panel)
-  - [zoomTo](https://developers.miro.com/docs/viewport_viewport#zoomto)
+  - [miro.board.viewport.zoomTo()](https://developers.miro.com/docs/viewport_viewport#zoomto)
 
 # 🛠️ Tools and Technologies <a name="tools"></a>
 

diff --git a/examples/asset-search/README.md b/examples/asset-search/README.md
@@ -20,10 +20,10 @@ This app shows how to implement asset searching and filtering by name and tags.
 # ⚙️ Included Features <a name="features"></a>
 
 - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
-  - [drop event](https://developers.miro.com/docs/ui_boardui#drop-event)
-  - [createImage](https://developers.miro.com/docs/board_board#createimage)
-  - [viewport.zoomTo](https://developers.miro.com/docs/viewport_viewport#zoomto)
-  - [openPanel(options)](https://developers.miro.com/docs/ui_boardui#openpanel)
+  - [miro.board.ui.on('drop')](https://developers.miro.com/docs/ui_boardui#drop-event)
+  - [miro.board.createImage](https://developers.miro.com/docs/board_board#createimage)
+  - [miro.board.viewport.zoomTo](https://developers.miro.com/docs/viewport_viewport#zoomto)
+  - [miro.board.ui.openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel)
   - [draggable elements](https://developers.miro.com/docs/add-drag-and-drop-to-your-app#add-draggable-elements-to-the-app-panel)
 
 # 🛠️ Tools and Technologies <a name="tools"></a>

diff --git a/examples/blob-maker/README.md b/examples/blob-maker/README.md
@@ -22,9 +22,9 @@ https://github.com/miroapp/app-examples/assets/10428517/b9d570ce-a0b4-4f2e-a8e6-
 # ⚙️ Included Features <a name="features"></a>
 
 - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
-  - [drop event](https://developers.miro.com/docs/ui_boardui#drop-event)
-  - [createImage](https://developers.miro.com/docs/board_board#createimage)
-  - [openPanel(options)](https://developers.miro.com/docs/ui_boardui#openpanel)
+  - [miro.board.ui.on('drop')](https://developers.miro.com/docs/ui_boardui#drop-event)
+  - [miro.board.createImage](https://developers.miro.com/docs/board_board#createimage)
+  - [miro.board.ui.openPanel(options)](https://developers.miro.com/docs/ui_boardui#openpanel)
   - [draggable elements](https://developers.miro.com/docs/add-drag-and-drop-to-your-app#add-draggable-elements-to-the-app-panel)
 
 # 🛠️ Tools and Technologies <a name="tools"></a>

diff --git a/examples/breakout-rooms/README.md b/examples/breakout-rooms/README.md
@@ -2,6 +2,8 @@
 
 This example shows you how leverage collaborative and real-time features, including sessions and real-time events and storage.
 
+> Note: To utilize all the functionality for this app, including the timer method, you will need to be on a Starter or higher Miro plan, and authorize the app under a non-developer team.
+
 # 👨🏻‍💻 App Demo
 
 https://github.com/miroapp/app-examples/assets/7162412/e03987e3-f85b-48ab-86b8-f4314c3c5e76
@@ -11,19 +13,49 @@ https://github.com/miroapp/app-examples/assets/7162412/e03987e3-f85b-48ab-86b8-f
 - [Included Features](#features)
 - [Tools and Technologies](#tools)
 - [Prerequisites](#prerequisites)
-- [Associated Developer Tutorial](#tutorial)
 - [Run the app locally](#run)
 - [Folder Structure](#folder)
 - [License](#license)
 
 # ⚙️ Included Features <a name="features"></a>
 
 - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
+
+  - [miro.board.canUse()](https://developers.miro.com/docs/websdk-reference-board#canuse) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L581)
+  - [miro.board.getById()](https://developers.miro.com/docs/websdk-reference-board#getbyid) [in RoomConfig Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx#L44)
+  - [miro.board.get()](https://developers.miro.com/docs/websdk-reference-board#get) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L265)
+  - [miro.board.getUserInfo()](https://developers.miro.com/docs/websdk-reference-board#getuserinfo) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L32)
+  - [miro.board.viewport.zoomTo()](https://developers.miro.com/docs/websdk-reference-viewport#zoomto) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L363)
+  - [miro.board.deselect()](https://developers.miro.com/docs/websdk-reference-experimental#deselect) [in BreakoutManager Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx#L110)(_experimental_)
+  - [miro.board.notifications.showError()](https://developers.miro.com/docs/websdk-reference-notifications#showerror) [in BreakoutManager Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx#L76)
+  - [miro.board.notifications.showInfo()](https://developers.miro.com/docs/websdk-reference-notifications#showinfo) [in BreakoutManager Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx#L70-L72)
+
 - [Collaborative sessions](https://developers.miro.com/docs/websdk-reference-session)
-- [Attention Management](https://developers.miro.com/docs/websdk-reference-collaboration)
+  - [miro.board.collaboration.startSession()](https://developers.miro.com/docs/websdk-reference-collaboration#startsession) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L320)
+  - [miro.board.collaboration.getSessions()](https://developers.miro.com/docs/websdk-reference-collaboration#getsessions) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L315)
+  - [miro.board.collaboration.zoomTo()](https://developers.miro.com/docs/websdk-reference-collaboration#zoomto) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L274)
 - [Real-time events](https://developers.miro.com/docs/websdk-reference-events)
+  - [miro.board.events.on()](https://developers.miro.com/docs/websdk-reference-events#on) [in BreakoutManager Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx#L95)
+  - [miro.board.events.off()](https://developers.miro.com/docs/websdk-reference-events#off) [in BreakoutManager Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx#L98)
+  - [miro.board.events.broadcast()](https://developers.miro.com/docs/websdk-reference-events#broadcast) [in WaitingRoom Component](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/components/WaitingRoom/WaitingRoom.tsx#L18)
 - [Real-time storage](https://developers.miro.com/docs/websdk-reference-storage)
 
+  - [miro.board.storage.collection()](https://developers.miro.com/docs/websdk-reference-storage#collection) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L52)
+  - [miro.board.storage.collection.set()](https://developers.miro.com/docs/websdk-reference-collection#set) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L89)
+  - [miro.board.storage.collection.get()](https://developers.miro.com/docs/websdk-reference-collection#get) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L60)
+  - [miro.board.storage.collection.remove()](https://developers.miro.com/docs/websdk-reference-collection#remove) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L409)
+  - [miro.board.storage.collection.onValue](https://developers.miro.com/docs/websdk-reference-collection#onvalue) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L61)
+  - [miro.board.storage.collection.offValue](https://developers.miro.com/docs/websdk-reference-collection#offvalue) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L64)
+
+- [Timer](https://developers.miro.com/docs/websdk-reference-timer)
+  - [miro.board.timer.get()](https://developers.miro.com/docs/websdk-reference-timer#get) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L541)
+  - [miro.board.timer.isStarted()](https://developers.miro.com/docs/websdk-reference-timer#isstarted) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L461)
+  - [miro.board.timer.start()](https://developers.miro.com/docs/websdk-reference-timer#start) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L448)
+  - [miro.board.timer.pause()](https://developers.miro.com/docs/websdk-reference-timer#pause) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L454)
+  - [miro.board.timer.stop()](https://developers.miro.com/docs/websdk-reference-timer#stop) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L463)
+  - [miro.board.timer.on()](https://developers.miro.com/docs/websdk-reference-timer#on) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L556-L558)
+  - [miro.board.timer.off()](https://developers.miro.com/docs/websdk-reference-timer#off) [in hooks.tsx](https://github.com/miroapp/app-examples/blob/main/examples/breakout-rooms/src/hooks.tsx#L561-L563)
+
 # 🛠️ Tools and Technologies <a name="tools"></a>
 
 - [React](https://react.dev/)
@@ -41,11 +73,6 @@ https://github.com/miroapp/app-examples/assets/7162412/e03987e3-f85b-48ab-86b8-f
 - Your development environment includes [Node.js 14.13](https://nodejs.org/en/download) or a later version.
 - All examples use `npm` as a package manager and `npx` as a package runner.
 
-# 📖 Associated Developer Tutorial <a name="tutorial"></a>
-
-> To view a more in depth developer tutorial
-> of this app (including code explanations) see the [custom actions tutorial](https://developers.miro.com/docs/add-custom-actions-to-your-app) on Miro's Developer documentation.
-
 # 🏃🏽‍♂️ Run the app locally <a name="run"></a>
 
 1. Run `npm install` to install dependencies.

diff --git a/examples/calendar/README.md b/examples/calendar/README.md
@@ -20,8 +20,8 @@ This app allows you to create a calendar consisting of shapes and text for the g
 # ⚙️ Included Features <a name="features"></a>
 
 - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
-  - [createShape()](https://developers.miro.com/docs/board_board#createshape)
-  - [createText()](https://developers.miro.com/docs/board_board#createtext)
+  - [miro.board.createShape()](https://developers.miro.com/docs/board_board#createshape)
+  - [miro.board.createText()](https://developers.miro.com/docs/board_board#createtext)
 
 # 🛠️ Tools and Technologies <a name="tools"></a>
 
@@ -51,14 +51,17 @@ This app allows you to create a calendar consisting of shapes and text for the g
    http://localhost:3000
    ```
 3. Open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**. \
-   In the app manifest editor, configure the app as follows:
-
-   - [`sdkUri`](https://developers.miro.com/docs/app-manifest#sdkuri): assign `http://localhost:3000` as a value for this property. \
-     It defines the entry point of the app, and it corresponds to the URL of the server that the app runs on.
-   - [`scopes`](https://developers.miro.com/docs/app-manifest#scopes): add the permission scopes that users need to grant the app when they install it. \
-     To enable the app to read from and write to the board, add the following permissions:
-     - `boards:read`
-     - `boards:write`
+   In the app manifest editor, configure the app as follows, and then click save:
+
+```yaml
+# See https://developers.miro.com/docs/app-manifest on how to use this
+appName: Calendar
+sdkVersion: SDK_V2
+sdkUri: http://localhost:3000
+scopes:
+  - boards:read
+  - boards:write
+```
 
 4. Go back to your app home page, and under the `Permissions` section, you will see a blue button that says `Install app and get OAuth token`. Click that button. Then click on `Add` as shown in the video below. <b>In the video we install a different app, but the process is the same regardless of the app.</b>
 

diff --git a/examples/connect-firebase/README.md b/examples/connect-firebase/README.md
@@ -19,7 +19,14 @@ https://github.com/miroapp/app-examples/assets/10800544/a0aaea4a-a95c-42f5-abb3-
 # ⚙️ Included Features <a name="features"></a>
 
 - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
-- [Drag and Drop](https://developers.miro.com/docs/add-drag-and-drop-to-your-app)
+  - [miro.board.createShape()](https://developers.miro.com/docs/board_board#createshape)
+  - [miro.board.createText()](https://developers.miro.com/docs/board_board#createtext)
+  - [miro.board.createStickyNote()](https://developers.miro.com/docs/websdk-reference-board#createstickynote)
+  - [miro.board.createFrame()](https://developers.miro.com/docs/websdk-reference-board#createframe)
+  - [miro.board.createCard()](https://developers.miro.com/docs/websdk-reference-board#createcard)
+  - [miro.board.getUserInfo()](https://developers.miro.com/docs/websdk-reference-board#getuserinfo)
+  - [miro.board.getSelection()](https://developers.miro.com/docs/websdk-reference-board#getselection)
+  - [miro.board.ui.on("drop")](https://developers.miro.com/docs/ui_boardui#drop-event)
 
 # 🛠️ Tools and Technologies <a name="tools"></a>
 
@@ -67,14 +74,17 @@ const firebaseConfig = {
    http://localhost:3000
    ```
 4. Open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**. \
-   In the app manifest editor, configure the app as follows:
-
-   - [`sdkUri`](https://developers.miro.com/docs/app-manifest#sdkuri): assign `http://localhost:3000` as a value for this property. \
-     It defines the entry point of the app, and it corresponds to the URL of the server that the app runs on.
-   - [`scopes`](https://developers.miro.com/docs/app-manifest#scopes): add the permission scopes that users need to grant the app when they install it. \
-     To enable the app to read from and write to the board, add the following permissions:
-     - `boards:read`
-     - `boards:write`
+   In the app manifest editor, configure the app as follows, and then click save:
+
+```yaml
+# See https://developers.miro.com/docs/app-manifest on how to use this
+appName: Connect Firebase
+sdkVersion: SDK_V2
+sdkUri: http://localhost:3000
+scopes:
+  - boards:read
+  - boards:write
+```
 
 5. Go back to your app home page, and under the `Permissions` section, you will see a blue button that says `Install app and get OAuth token`. Click that button. Then click on `Add` as shown in the video below. <b>In the video we install a different app, but the process is the same regardless of the app.</b>
 

diff --git a/examples/csv-to-mindmap/README.md b/examples/csv-to-mindmap/README.md
@@ -30,8 +30,8 @@ Watch the short video (48 seconds) below to gain a quick overview of using the a
 # ⚙️ Included Features <a name="features"></a>
 
 - [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
-  - [openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel)
-  - [createMindMapNode()](https://developers.miro.com/docs/experimental_experimental#createmindmapnode)
+  - [miro.board.ui.openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel)
+  - [miro.board.experimental.createMindmapNode()](https://developers.miro.com/docs/experimental_experimental#createmindmapnode)
 
 # 🛠️ Tools and Technologies <a name="tools"></a>
 
@@ -61,14 +61,17 @@ Watch the short video (48 seconds) below to gain a quick overview of using the a
    http://localhost:3000
    ```
 3. Open the [app manifest editor](https://developers.miro.com/docs/manually-create-an-app#step-2-configure-your-app-in-miro) by clicking **Edit in Manifest**. \
-   In the app manifest editor, configure the app as follows:
-
-   - [`sdkUri`](https://developers.miro.com/docs/app-manifest#sdkuri): assign `http://localhost:3000` as a value for this property. \
-     It defines the entry point of the app, and it corresponds to the URL of the server that the app runs on.
-   - [`scopes`](https://developers.miro.com/docs/app-manifest#scopes): add the permission scopes that users need to grant the app when they install it. \
-     To enable the app to read from and write to the board, add the following permissions:
-     - `boards:read`
-     - `boards:write`
+   In the app manifest editor, configure the app as follows, and then click save:
+
+```yaml
+# See https://developers.miro.com/docs/app-manifest on how to use this
+appName: CSV to Mindmap
+sdkVersion: SDK_V2
+sdkUri: http://localhost:3000
+scopes:
+  - boards:read
+  - boards:write
+```
 
 4. Go back to your app home page, and under the `Permissions` section, you will see a blue button that says `Install app and get OAuth token`. Click that button. Then click on `Add` as shown in the video below. <b>In the video we install a different app, but the process is the same regardless of the app.</b>