Sticky pair clusterer

examples/sticky-pair-clusterer/README.md

@@ -0,0 +1,91 @@
+# Miro Template Builder App
+
+This app shows how you can create a template with shape and text items on the board.
+
+# 👨🏻‍💻 App Demo
+
+https://github.com/miroapp/app-examples/assets/10428517/24aacae3-5183-4142-bdae-9cbfeff06a69
+
+# 📒 Table of Contents
+
+- [Included Features](#features)
+- [Tools and Technologies](#tools)
+- [Prerequisites](#prerequisites)
+- [Associated Developer Tutorial](#tutorial)
+- [Run the app locally](#run)
+- [Folder Structure](#folder)
+- [Contributing](#contributing)
+- [License](#license)
+
+# ⚙️ Included Features <a name="features"></a>
+
+- [Miro Web SDK](https://developers.miro.com/docs/web-sdk-reference)
+  - [miro.board.createText()](https://developers.miro.com/docs/board_board#createtext)
+  - [miro.board.createShape()](https://developers.miro.com/docs/board_board#createshape)
+  - [miro.board.ui.openPanel()](https://developers.miro.com/docs/ui_boardui#openpanel)
+
+# 🛠️ Tools and Technologies <a name="tools"></a>
+
+- [Vite](https://vitejs.dev/)
+
+# ✅ Prerequisites <a name="prerequisites"></a>
+
+- You have a [Miro account](https://miro.com/signup/).
+- You're [signed in to Miro](https://miro.com/login/).
+- Your Miro account has a [Developer team](https://developers.miro.com/docs/create-a-developer-team).
+- 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.
+
+# 🏃🏽‍♂️ Run the app locally <a name="run"></a>
+
+1. Run `npm install` to install dependencies.
+2. Run `npm start` to start developing. \
+   Your URL should be similar to this example:
+   ```
+   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:
+
+```yaml
+# See https://developers.miro.com/docs/app-manifest on how to use this
+appName: Template Builder
+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>
+
+> ⚠️ We recommend to install your app on a [developer team](https://developers.miro.com/docs/create-a-developer-team) while you are developing or testing apps.⚠️
+
+https://github.com/miroapp/app-examples/assets/10428517/1e6862de-8617-46ef-b265-97ff1cbfe8bf
+
+5. Go to your developer team, and open your boards.
+6. Click on the plus icon from the bottom section of your left sidebar. If you hover over it, it will say `More apps`.
+7. Search for your app `Template Builder` or whatever you chose to name it. Click on your app to use it, as shown in the video below. <b>In the video we search for a different app, but the process is the same regardless of the app.</b>
+
+https://github.com/horeaporutiu/app-examples-template/assets/10428517/b23d9c4c-e785-43f9-a72e-fa5d82c7b019
+
+# 🗂️ Folder structure <a name="folder"></a>
+
+```
+.
+├── src
+│  ├── assets
+│  │  └── style.css
+│  ├── app.js      // The code for the app lives here.
+│  └── index.js    // The code for the app entry point lives here.
+├── app.html       // The app itself. It's loaded on the board inside the 'appContainer'.
+└── index.html     // The app entry point. This is the value you assign to 'sdkUri' in the app manifest file.
+```
+
+# 🫱🏻‍🫲🏽 Contributing <a name="contributing"></a>
+
+If you want to contribute to this example, or any other Miro Open Source project, please review [Miro's contributing guide](https://github.com/miroapp/app-examples/blob/main/CONTRIBUTING.md).
+
+# 🪪 License <a name="license"></a>
+
+[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE).

examples/sticky-pair-clusterer/app-manifest.yaml

@@ -0,0 +1,7 @@
+# See https://developers.miro.com/docs/app-manifest on how to use this
+#appName: Template Builder
+appName: Sticky notes to shapes
+sdkUri: "http://localhost:3000"
+scopes:
+  - boards:read
+  - boards:write

examples/sticky-pair-clusterer/app.html

@@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <title></title>
+    <link rel="stylesheet" href="/src/styles.css" />
+    <script src="https://miro.com/app/static/sdk/v2/miro.js"></script>
+  </head>
+  <body>
+    <div class="scrollable-container">
+      <div class="input-container">
+        <label for="rowsCount">No. of Traits: </label>
+        <input
+          type="number"
+          id="rowsCount"
+          class="rows-count-input"
+          min="1"
+          value="20"
+          placeholder="Number of rows"
+        />
+      </div>
+      <div class="input-container">
+        <label for="columnsCount">No. of Benefits:</label>
+        <input
+          type="number"
+          id="columnsCount"
+          class="columns-count-input"
+          min="1"
+          value="3"
+          placeholder="Number of columns"
+        />
+      </div>
+      <div>
+        <button id="createPair" class="create-pair-button">Create Pair</button>
+        <button id="updateBenefits" class="update-benefits-button">
+          Update Benefits
+        </button>
+        <button
+          id="assignRandomTagsToSelection"
+          class="assign-random-tags-to-selection-button"
+        >
+          Assign Random Tags To Selection
+        </button>
+        <button id="createMatrix" class="create-matrix-button">
+          Create Matrix
+        </button>
+        <button id="removeAllTags" class="remove-all-tags-button">
+          Remove All Tags
+        </button>
+        <button id="printAppData" class="print-app-data-button">
+          Print App Data
+        </button>
+        <button id="copyToClipboard" class="copy-to-clipboard-button">
+          Copy To Clipboard
+        </button>
+        <button id="debugButton" class="debug-button">Debug</button>
+      </div>
+    </div>
+    <div>
+      <script type="module" src="/src/app.js"></script>
+    </div>
+  </body>
+</html>

examples/sticky-pair-clusterer/index.html

@@ -0,0 +1,9 @@
+<!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>
+    <script type="module" src="/src/index.js"></script>
+  </head>
+</html>

examples/sticky-pair-clusterer/jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "typeRoots": ["./node_modules/@types", "./node_modules/@mirohq"]
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}

examples/sticky-pair-clusterer/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "sticky-pair-clusterer",
+  "description": "Create a template programmatically with the Miro Web SDK. This app uses Vite.",
+  "keywords": ["Miro SDK", "Vite"],
+  "version": "0.0.0",
+  "scripts": {
+    "start": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "devDependencies": {
+    "@mirohq/websdk-types": "latest",
+    "vite": "2.9.17"
+  }
+}