diff --git a/examples/asset-search/app.html b/examples/asset-search/app.html index 5e7345102..941105ec8 100644 --- a/examples/asset-search/app.html +++ b/examples/asset-search/app.html @@ -1,5 +1,5 @@ - + diff --git a/examples/asset-search/index.html b/examples/asset-search/index.html index 4f49a43b0..705a6d075 100644 --- a/examples/asset-search/index.html +++ b/examples/asset-search/index.html @@ -1,5 +1,5 @@ - + diff --git a/examples/asset-search/src/App.tsx b/examples/asset-search/src/App.tsx index c2cdf33b7..3402d1f58 100644 --- a/examples/asset-search/src/App.tsx +++ b/examples/asset-search/src/App.tsx @@ -83,5 +83,5 @@ ReactDOM.render( , - document.getElementById("root") + document.getElementById("root"), ); diff --git a/examples/asset-search/src/styles/style.css b/examples/asset-search/src/styles/style.css index ef8d95952..bbf32bd5f 100644 --- a/examples/asset-search/src/styles/style.css +++ b/examples/asset-search/src/styles/style.css @@ -7,9 +7,21 @@ html { height: 100%; background-color: #eee; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, - sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + font-family: + Inter, + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } diff --git a/examples/blob-maker/app.html b/examples/blob-maker/app.html index 59cd79f1d..db9388099 100644 --- a/examples/blob-maker/app.html +++ b/examples/blob-maker/app.html @@ -1,4 +1,4 @@ - + diff --git a/examples/blob-maker/index.html b/examples/blob-maker/index.html index 99b38640a..1d9d22802 100644 --- a/examples/blob-maker/index.html +++ b/examples/blob-maker/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/blob-maker/src/app.js b/examples/blob-maker/src/app.js index 45e6253b2..ce6c2453d 100644 --- a/examples/blob-maker/src/app.js +++ b/examples/blob-maker/src/app.js @@ -10,7 +10,7 @@ async function init() { const svgBlob = document.getElementById("svg-blob"); const blobSeed = await fetch("/create-blob?edges=3").then((response) => - response.text() + response.text(), ); svgBlob.src = `/blob?seed=${blobSeed}&colour=3A57FF`; @@ -25,7 +25,7 @@ async function init() { } catch (error) { console.log(error); window.alert( - "Drag and drop does not work served from localhost. Please deploy app." + "Drag and drop does not work served from localhost. Please deploy app.", ); } }); diff --git a/examples/blob-maker/src/assets/style.css b/examples/blob-maker/src/assets/style.css index c15c988b8..d0efc0918 100644 --- a/examples/blob-maker/src/assets/style.css +++ b/examples/blob-maker/src/assets/style.css @@ -7,9 +7,21 @@ html { height: 100%; background-color: #eee; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, - sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + font-family: + Inter, + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } diff --git a/examples/calendar/app.html b/examples/calendar/app.html index 5e7345102..941105ec8 100644 --- a/examples/calendar/app.html +++ b/examples/calendar/app.html @@ -1,5 +1,5 @@ - + diff --git a/examples/calendar/index.html b/examples/calendar/index.html index 4f49a43b0..705a6d075 100644 --- a/examples/calendar/index.html +++ b/examples/calendar/index.html @@ -1,5 +1,5 @@ - + diff --git a/examples/calendar/src/App.tsx b/examples/calendar/src/App.tsx index fed007bc6..9757e2560 100644 --- a/examples/calendar/src/App.tsx +++ b/examples/calendar/src/App.tsx @@ -153,5 +153,5 @@ ReactDOM.render( , - document.getElementById("root") + document.getElementById("root"), ); diff --git a/examples/calendar/src/styles/style.css b/examples/calendar/src/styles/style.css index b681c742d..8ef8ebef1 100644 --- a/examples/calendar/src/styles/style.css +++ b/examples/calendar/src/styles/style.css @@ -7,9 +7,21 @@ html { height: 100%; background-color: #eee; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, - sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + font-family: + Inter, + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } diff --git a/examples/calendar/src/useCalendar.ts b/examples/calendar/src/useCalendar.ts index 3ad9d2eb5..8f6a2c87c 100644 --- a/examples/calendar/src/useCalendar.ts +++ b/examples/calendar/src/useCalendar.ts @@ -20,7 +20,7 @@ export const useCalendar = (month: number, year: number) => { let currentWeekIndex = 0; const dayArray = Array.from( { length: numberOfDays + startingIndex }, - (_, i) => (i < startingIndex ? 0 : i + (1 - startingIndex)) + (_, i) => (i < startingIndex ? 0 : i + (1 - startingIndex)), ); const calendar = new Array(6); diff --git a/examples/connect-firebase/README.md b/examples/connect-firebase/README.md index 80a880d25..5181953fa 100644 --- a/examples/connect-firebase/README.md +++ b/examples/connect-firebase/README.md @@ -1,27 +1,53 @@ -## Connect a Miro app to a Firebase Backend +# Miro Connect Firebase -This project follows our guide _How to connect the Miro Web SDK to a backend_, and it contains the finished code.\ -Read through the guide for an in-depth walkthrough on setting this project up from scratch. +This app demonstrates how to connect to a database backend hosted on Firebase to enable persistent data storage. This app uses the Miro Web SDK. -** ℹ Note**: +# 👨🏻‍💻 App Demo -- We recommend a Chromium-based web browser for local development with HTTP. \ - Safari enforces HTTPS; therefore, it doesn't allow localhost through HTTP. -- All examples use `npm` as a package manager and `npx` as a package runner. \ - If you prefer, you can install and use equivalent alternatives, such as `yarn` or `pnpm`. -- For more information, visit our [developer documentation](https://developers.miro.com). +https://github.com/miroapp/app-examples/assets/10800544/a0aaea4a-a95c-42f5-abb3-9590032a5b39 -### About the app +# 📒 Table of Contents -This app shows how to connect to a database backend hosted on Firebase to enable persistent data storage. This app uses the Miro Web SDK. +- [Included Features](#features) +- [Tools and Technologies](#tools) +- [Prerequisites](#prerequisites) +- [Associated Developer Tutorial](#tutorial) +- [Run the app locally](#run) +- [Folder Structure](#folder) +- [License](#license) -This app uses [Vite](https://vitejs.dev/). \ -To modify the `vite.config.js` configuration, see the [Vite documentation](https://vitejs.dev/guide/). +# ⚙️ Included Features -### How to connect to the Firebase backend +- [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) -- Run `npm install` to install dependencies. -- Open `src/app.js`, and replace the `firebaseConfig` object with the settings from your Firebase project. +# 🛠️ Tools and Technologies + +- JavaScript +- [Vite](https://vitejs.dev/) +- [Firebase](https://firebase.google.com/) + +# ✅ Prerequisites + +- 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. +- You have a [Firebase account](https://firebase.google.com/) to use a real-time database + +# 📖 Associated Developer Tutorial + +> To view a developer tutorial +> that covers the end to end flow for setting up a Firebase instance and connecting it to a Miro app from scratch, see [Connect the Miro Web SDK to a backend (Firebase)](https://developers.miro.com/docs/connect-the-miro-web-sdk-to-a-backend-firebase) tutorial on Miro's Developer documentation. + +# 🏃🏽‍♂️ Run the app locally + +> ⚠️ For an end to end implementation, it's recommended to start with the associated Developer Tutorial: [Connect the Miro Web SDK to a backend (Firebase)](https://developers.miro.com/docs/connect-the-miro-web-sdk-to-a-backend-firebase). Below, find abbreviated steps that assume you've completed the Firebase configuration in the associated Developer Tutorial. + +1. Run `npm install` to install dependencies. +2. Set up a Firebase backend, following the steps outlined in the [Connect the Miro Web SDK to a backend (Firebase)](https://developers.miro.com/docs/connect-the-miro-web-sdk-to-a-backend-firebase#set-up-a-firebase-backend-with-a-database) tutorial. +3. Open `src/app.js` and replace the `firebaseConfig` object with the settings from your Firebase project. ```js const firebaseConfig = { @@ -35,24 +61,47 @@ const firebaseConfig = { }; ``` -### How to start locally - -1. Run `npm start` to start developing. \ +3. Run `npm start` to start developing. \ Your URL should be similar to this example: ``` http://localhost:3000 ``` -2. 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**. \ +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` -3. Open a board: you should see your app in the apps toolbar or in the apps panel. -### How to build the app +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. In the video we install a different app, but the process is the same regardless of the app. + +> ⚠️ 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 `Connect Firebase` or whatever you chose to name it. Click on your app to use it, as shown in the video below. + +# 🗂️ Folder structure + +``` +. +├── src +│ └── assets +│ └── App.js <-- The main app. Contains logic for configuring the Firebase instance and pushing template details to Firebase. +│ index.js <-- Initializes app, and contains logic for opening the app panel. +├── app.html <-- The app UI itself. This is 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 + +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 -- Run `npm run build`. \ - This generates a static output inside `dist/`, which you can host on a static hosting service. +[MIT License](https://github.com/miroapp/app-examples/blob/main/LICENSE). diff --git a/examples/connect-firebase/app.html b/examples/connect-firebase/app.html index fc833a7c2..0ee750b9f 100644 --- a/examples/connect-firebase/app.html +++ b/examples/connect-firebase/app.html @@ -1,4 +1,4 @@ - + diff --git a/examples/connect-firebase/index.html b/examples/connect-firebase/index.html index 58babea2c..e8b77c8d9 100644 --- a/examples/connect-firebase/index.html +++ b/examples/connect-firebase/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/connect-firebase/src/assets/style.css b/examples/connect-firebase/src/assets/style.css index 4403d98ed..648d86d26 100644 --- a/examples/connect-firebase/src/assets/style.css +++ b/examples/connect-firebase/src/assets/style.css @@ -9,9 +9,21 @@ html { height: 100%; background-color: #eee; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, - sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + font-family: + Inter, + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } diff --git a/examples/csv-to-mindmap/app.html b/examples/csv-to-mindmap/app.html index ec907c1f2..44474306c 100644 --- a/examples/csv-to-mindmap/app.html +++ b/examples/csv-to-mindmap/app.html @@ -1,4 +1,4 @@ - + diff --git a/examples/csv-to-mindmap/index.html b/examples/csv-to-mindmap/index.html index f1c08f06b..a9810a40f 100644 --- a/examples/csv-to-mindmap/index.html +++ b/examples/csv-to-mindmap/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/csv-to-mindmap/src/assets/style.css b/examples/csv-to-mindmap/src/assets/style.css index 675da61ac..827c6c83a 100644 --- a/examples/csv-to-mindmap/src/assets/style.css +++ b/examples/csv-to-mindmap/src/assets/style.css @@ -9,9 +9,21 @@ html { height: 100%; background-color: #eee; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, - sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + font-family: + Inter, + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } diff --git a/examples/custom-actions/index.html b/examples/custom-actions/index.html index d7f190b55..6e9063257 100644 --- a/examples/custom-actions/index.html +++ b/examples/custom-actions/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/custom-actions/src/index.ts b/examples/custom-actions/src/index.ts index 3240d98c7..0df3602fc 100644 --- a/examples/custom-actions/src/index.ts +++ b/examples/custom-actions/src/index.ts @@ -9,11 +9,11 @@ const actionHandler = (action: string) => async (props: CustomEvent) => { export async function init() { await miro.board.ui.on( "custom:translate-content", - actionHandler("translate-content") + actionHandler("translate-content"), ); await miro.board.ui.on( "custom:align-to-grid", - actionHandler("align-to-grid") + actionHandler("align-to-grid"), ); const translateAction: CustomAction = { diff --git a/examples/digital-asset-manager/index.html b/examples/digital-asset-manager/index.html index 4bfa08130..dd98f4565 100644 --- a/examples/digital-asset-manager/index.html +++ b/examples/digital-asset-manager/index.html @@ -1,5 +1,5 @@ - + diff --git a/examples/digital-asset-manager/netlify/functions/authorize.js b/examples/digital-asset-manager/netlify/functions/authorize.js index 472ec4ff8..d57d4f992 100644 --- a/examples/digital-asset-manager/netlify/functions/authorize.js +++ b/examples/digital-asset-manager/netlify/functions/authorize.js @@ -36,7 +36,7 @@ exports.handler = async function (event, context, callback) { // Using the refresh token to generate a new token pair. if (!access_token) { const encodedData = Buffer.from( - process.env.CLIENT_ID + ":" + process.env.CLIENT_SECRET + process.env.CLIENT_ID + ":" + process.env.CLIENT_SECRET, ).toString("base64"); const details = { @@ -65,7 +65,7 @@ exports.handler = async function (event, context, callback) { Authorization: `Basic ${encodedData})`, }, body: formBody, - } + }, ); const result = await authenticationData.json(); @@ -79,7 +79,7 @@ exports.handler = async function (event, context, callback) { sameSite: "None", path: "/", maxAge: S_IN_HOUR, - } + }, ); return { diff --git a/examples/digital-asset-manager/netlify/functions/collectionId.js b/examples/digital-asset-manager/netlify/functions/collectionId.js index 15c78ff87..eb0dff67e 100644 --- a/examples/digital-asset-manager/netlify/functions/collectionId.js +++ b/examples/digital-asset-manager/netlify/functions/collectionId.js @@ -22,7 +22,7 @@ exports.handler = async function (event, context, callback) { "Content-Type": "application/json", Authorization: `Bearer ${access_token})`, }, - } + }, ); const result = await collectionData.json(); diff --git a/examples/digital-asset-manager/netlify/functions/collections.js b/examples/digital-asset-manager/netlify/functions/collections.js index 7e6c1fc38..332169e6b 100644 --- a/examples/digital-asset-manager/netlify/functions/collections.js +++ b/examples/digital-asset-manager/netlify/functions/collections.js @@ -21,7 +21,7 @@ exports.handler = async function (event, context, callback) { "Content-Type": "application/json", Authorization: `Bearer ${access_token})`, }, - } + }, ); const result = await collectionsData.json(); diff --git a/examples/digital-asset-manager/netlify/functions/redirect.js b/examples/digital-asset-manager/netlify/functions/redirect.js index debbf6815..8e84f138d 100644 --- a/examples/digital-asset-manager/netlify/functions/redirect.js +++ b/examples/digital-asset-manager/netlify/functions/redirect.js @@ -7,7 +7,7 @@ exports.handler = async (event) => { const code = event.queryStringParameters.code; const encodedData = Buffer.from( - process.env.CLIENT_ID + ":" + process.env.CLIENT_SECRET + process.env.CLIENT_ID + ":" + process.env.CLIENT_SECRET, ).toString("base64"); const details = { @@ -37,7 +37,7 @@ exports.handler = async (event) => { Authorization: `Basic ${encodedData})`, }, body: formBody, - } + }, ); const result = await authenticationData.json(); @@ -58,7 +58,7 @@ exports.handler = async (event) => { httpOnly: true, sameSite: "None", path: "/", - } + }, ); return { diff --git a/examples/digital-asset-manager/src/panel/panel-main.tsx b/examples/digital-asset-manager/src/panel/panel-main.tsx index 89e133921..03f089697 100644 --- a/examples/digital-asset-manager/src/panel/panel-main.tsx +++ b/examples/digital-asset-manager/src/panel/panel-main.tsx @@ -29,7 +29,7 @@ ReactDOM.render( , - document.getElementById("panel-root") + document.getElementById("panel-root"), ); // Initialize board diff --git a/examples/digital-asset-manager/src/styles/style.css b/examples/digital-asset-manager/src/styles/style.css index 1e86de5c4..01087c93d 100644 --- a/examples/digital-asset-manager/src/styles/style.css +++ b/examples/digital-asset-manager/src/styles/style.css @@ -9,9 +9,21 @@ html { height: 100%; background-color: #eee; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, - sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + font-family: + Inter, + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } diff --git a/examples/drag-and-drop/app.html b/examples/drag-and-drop/app.html index 5e7345102..941105ec8 100644 --- a/examples/drag-and-drop/app.html +++ b/examples/drag-and-drop/app.html @@ -1,5 +1,5 @@ - + diff --git a/examples/drag-and-drop/index.html b/examples/drag-and-drop/index.html index 4f49a43b0..705a6d075 100644 --- a/examples/drag-and-drop/index.html +++ b/examples/drag-and-drop/index.html @@ -1,5 +1,5 @@ - + diff --git a/examples/drag-and-drop/src/App.tsx b/examples/drag-and-drop/src/App.tsx index 6b6d37ff6..eaa1353a6 100644 --- a/examples/drag-and-drop/src/App.tsx +++ b/examples/drag-and-drop/src/App.tsx @@ -49,5 +49,5 @@ ReactDOM.render( , - document.getElementById("root") + document.getElementById("root"), ); diff --git a/examples/drag-and-drop/src/styles/style.css b/examples/drag-and-drop/src/styles/style.css index b196d72b3..f4a10e6f2 100644 --- a/examples/drag-and-drop/src/styles/style.css +++ b/examples/drag-and-drop/src/styles/style.css @@ -7,9 +7,21 @@ html { height: 100%; background-color: #eee; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, - sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + font-family: + Inter, + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } diff --git a/examples/enterprise-team-management/index.js b/examples/enterprise-team-management/index.js index 19800fb8d..c2f251a60 100644 --- a/examples/enterprise-team-management/index.js +++ b/examples/enterprise-team-management/index.js @@ -25,7 +25,7 @@ async function callMiroAPI(api, method = "GET", body = undefined) { const teamInfo = await callMiroAPI(`v2/teams_settings/${tokenInfo.team.id}`); console.log(teamInfo); const boards = await callMiroAPI( - `v2/boards?sort=alphabetically&limit=20&offset=0` + `v2/boards?sort=alphabetically&limit=20&offset=0`, ); console.log(boards); @@ -48,7 +48,7 @@ async function callMiroAPI(api, method = "GET", body = undefined) { "POST", JSON.stringify({ name: team.name, - }) + }), ); // Invite members team.employees.forEach(async (email) => { @@ -58,7 +58,7 @@ async function callMiroAPI(api, method = "GET", body = undefined) { "POST", JSON.stringify({ userEmail: email, - }) + }), ); }); }); @@ -83,7 +83,7 @@ async function callMiroAPI(api, method = "GET", body = undefined) { }, }, description: "Team Todo Tasks Board", - }) + }), ); console.log("Creating a suggestions board"); const suggestionBoard = await callMiroAPI( @@ -104,7 +104,7 @@ async function callMiroAPI(api, method = "GET", body = undefined) { }, }, description: "Company-wide Open Suggestions Board", - }) + }), ); console.log("Creating a welcome note"); await callMiroAPI( @@ -120,7 +120,7 @@ async function callMiroAPI(api, method = "GET", body = undefined) { textAlign: "left", textAlignVertical: "top", }, - }) + }), ); console.log("Creating a suggestions CTA"); await callMiroAPI( @@ -136,20 +136,20 @@ async function callMiroAPI(api, method = "GET", body = undefined) { textAlign: "center", textAlignVertical: "top", }, - }) + }), ); // 4. Promoting a new team leader console.log("Getting the list of teams"); const teams = await callMiroAPI( `v2/orgs/${tokenInfo.organization.id}/teams`, - "GET" + "GET", ); console.log(teams); const devTeam = teams.data.find((x) => x.name === "The Development Team"); console.log("Getting the product development team member list"); const members = await callMiroAPI( - `v2/orgs/${tokenInfo.organization.id}/teams/${devTeam.id}/members` + `v2/orgs/${tokenInfo.organization.id}/teams/${devTeam.id}/members`, ); console.log("Promoting the member to admin"); const promoted = await callMiroAPI( @@ -157,13 +157,13 @@ async function callMiroAPI(api, method = "GET", body = undefined) { "PATCH", JSON.stringify({ role: "admin", - }) + }), ); console.log(promoted); console.log("Deleting previous team admin"); const deleted = await callMiroAPI( `v2/orgs/${tokenInfo.organization.id}/teams/${devTeam.id}/members/${members.data[0].memberId}`, - "DELETE" + "DELETE", ); console.log(deleted); @@ -171,7 +171,7 @@ async function callMiroAPI(api, method = "GET", body = undefined) { const teamsToDelete = ["The Development Team", "The Marketing Team"]; const teamList = await callMiroAPI( `v2/orgs/${tokenInfo.organization.id}/teams`, - "GET" + "GET", ); if (teamList && teamList.data) { console.log("Finding and deleting teams"); @@ -180,7 +180,7 @@ async function callMiroAPI(api, method = "GET", body = undefined) { console.log("Deleting: " + team.name); await callMiroAPI( `v2/orgs/${tokenInfo.organization.id}/teams/${team.id}`, - "DELETE" + "DELETE", ); } }); diff --git a/examples/github-appcards/app.html b/examples/github-appcards/app.html index ce6beb140..d2f28c130 100644 --- a/examples/github-appcards/app.html +++ b/examples/github-appcards/app.html @@ -1,4 +1,4 @@ - + diff --git a/examples/github-appcards/appcard-modal.html b/examples/github-appcards/appcard-modal.html index 9a7401f3a..641ba4e76 100644 --- a/examples/github-appcards/appcard-modal.html +++ b/examples/github-appcards/appcard-modal.html @@ -1,4 +1,4 @@ - + diff --git a/examples/github-appcards/index.html b/examples/github-appcards/index.html index 9066dbbdc..4be63bc19 100644 --- a/examples/github-appcards/index.html +++ b/examples/github-appcards/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/github-appcards/modal.html b/examples/github-appcards/modal.html index a599b1b3c..9cafdd47a 100644 --- a/examples/github-appcards/modal.html +++ b/examples/github-appcards/modal.html @@ -1,4 +1,4 @@ - + diff --git a/examples/github-appcards/netlify/functions/authorize.js b/examples/github-appcards/netlify/functions/authorize.js index de4a45e28..8ea890629 100644 --- a/examples/github-appcards/netlify/functions/authorize.js +++ b/examples/github-appcards/netlify/functions/authorize.js @@ -3,7 +3,7 @@ import { createClient } from "@supabase/supabase-js"; const supabase = createClient( process.env.VITE_DATABASE_URL, - process.env.VITE_DATABASE_PUBLIC_KEY + process.env.VITE_DATABASE_PUBLIC_KEY, ); exports.handler = async function (event) { diff --git a/examples/github-appcards/netlify/functions/issues.js b/examples/github-appcards/netlify/functions/issues.js index f6685d080..aa870bffe 100644 --- a/examples/github-appcards/netlify/functions/issues.js +++ b/examples/github-appcards/netlify/functions/issues.js @@ -8,7 +8,7 @@ import fetch from "node-fetch"; const supabase = createClient( process.env.VITE_DATABASE_URL, - process.env.VITE_DATABASE_PUBLIC_KEY + process.env.VITE_DATABASE_PUBLIC_KEY, ); exports.handler = async function (event) { @@ -28,7 +28,7 @@ exports.handler = async function (event) { const { data, error } = await supabase .from("card-mapping") .select( - "id, miroAppCardId::text, gitHubIssueId, miroUserId::text, gitHubUsername, created_at, miroBoardId, gitHubIssueNumber, auth ( access_token )" + "id, miroAppCardId::text, gitHubIssueId, miroUserId::text, gitHubUsername, created_at, miroBoardId, gitHubIssueNumber, auth ( access_token )", ) .eq("gitHubIssueId", gitHubIssueId); @@ -70,7 +70,7 @@ exports.handler = async function (event) { try { const miroAppCardResponse = fetch( `https://api.miro.com/v2/boards/${item.miroBoardId}/app_cards/${item.miroAppCardId}`, - options + options, ); if (miroAppCardResponse.ok) { @@ -94,7 +94,7 @@ exports.handler = async function (event) { }); } }); - }) + }), ); } diff --git a/examples/github-appcards/netlify/functions/project-cards.js b/examples/github-appcards/netlify/functions/project-cards.js index feb2cb7c5..8abfdf9a4 100644 --- a/examples/github-appcards/netlify/functions/project-cards.js +++ b/examples/github-appcards/netlify/functions/project-cards.js @@ -8,7 +8,7 @@ import fetch from "node-fetch"; const supabase = createClient( process.env.VITE_DATABASE_URL, - process.env.VITE_DATABASE_PUBLIC_KEY + process.env.VITE_DATABASE_PUBLIC_KEY, ); exports.handler = async function (event) { @@ -37,7 +37,7 @@ exports.handler = async function (event) { { method: "GET", headers: headers, - } + }, ) .then((response) => response.json()) .then((result) => { @@ -52,7 +52,7 @@ exports.handler = async function (event) { const { data, error } = await supabase .from("card-mapping") .select( - "id, miroAppCardId::text, gitHubIssueId, miroUserId::text, gitHubUsername, created_at, miroBoardId, gitHubIssueNumber, auth ( access_token )" + "id, miroAppCardId::text, gitHubIssueId, miroUserId::text, gitHubUsername, created_at, miroBoardId, gitHubIssueNumber, auth ( access_token )", ) .eq("gitHubIssueNumber", gitHubIssueNumer); @@ -106,7 +106,7 @@ exports.handler = async function (event) { try { const miroAppCardResponse = fetch( `https://api.miro.com/v2/boards/${item.miroBoardId}/app_cards/${item.miroAppCardId}`, - options + options, ); if (miroAppCardResponse.ok) { @@ -138,7 +138,7 @@ exports.handler = async function (event) { }); } }); - }) + }), ); } diff --git a/examples/github-appcards/src/appcard-modal.tsx b/examples/github-appcards/src/appcard-modal.tsx index 2d938fa88..47879c0ce 100644 --- a/examples/github-appcards/src/appcard-modal.tsx +++ b/examples/github-appcards/src/appcard-modal.tsx @@ -22,7 +22,7 @@ function App() { * Store information pulled from GitHub API */ const [gitHubProjects, setGitHubProjects] = React.useState( - [] + [], ); const [gitHubColumns, setGitHubColumns] = React.useState([ { name: "", id: 0 }, @@ -58,7 +58,7 @@ function App() { if (appCardId && appCardTitle && appCardDescription && currentStatus) { const status = gitHubColumns.find( - (column) => column.name === currentStatus + (column) => column.name === currentStatus, ); setAppCardId(appCardId); @@ -94,7 +94,7 @@ function App() { const gitHubColumns = await fetchGitHubColumns( gitHubProjects .filter((project) => project.id !== selectedProject.id)[0] - .id.toString() + .id.toString(), ); setGitHubColumns([...gitHubColumns]); @@ -111,7 +111,7 @@ function App() { const { data, error } = await supabase .from("card-mapping") .select( - "id, miroAppCardId::text, gitHubIssueId, miroUserId::text, gitHubUsername, created_at, miroBoardId, gitHubIssueNumber, gitHubProjectCardId" + "id, miroAppCardId::text, gitHubIssueId, miroUserId::text, gitHubUsername, created_at, miroBoardId, gitHubIssueNumber, gitHubProjectCardId", ) .eq("miroAppCardId", appCardId); @@ -157,7 +157,7 @@ function App() { await miro.board.ui.closeModal(); } - }) + }), ); } }; diff --git a/examples/github-appcards/src/assets/style.css b/examples/github-appcards/src/assets/style.css index 47198415a..208b3aa62 100644 --- a/examples/github-appcards/src/assets/style.css +++ b/examples/github-appcards/src/assets/style.css @@ -8,9 +8,21 @@ html { height: 100%; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, - sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + font-family: + Inter, + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } diff --git a/examples/github-appcards/src/components/Miro/Miro.tsx b/examples/github-appcards/src/components/Miro/Miro.tsx index 8a2e4d863..0dcff5205 100644 --- a/examples/github-appcards/src/components/Miro/Miro.tsx +++ b/examples/github-appcards/src/components/Miro/Miro.tsx @@ -45,7 +45,7 @@ const Miro = () => { note: null, content_id: gitHubIssue.id, content_type: "Issue", - } + }, ); await insertAppCards(item, selectedColor, gitHubProjectCard, gitHubIssue); @@ -61,7 +61,7 @@ const Miro = () => { // Filter sticky notes from the selected items const stickyNotes = selectedItems.filter( - (item) => item.type === "sticky_note" + (item) => item.type === "sticky_note", ); // Check to see if sticky notes are selected diff --git a/examples/github-appcards/src/components/Miro/Selection.tsx b/examples/github-appcards/src/components/Miro/Selection.tsx index 5bb2fd13a..537b250a9 100644 --- a/examples/github-appcards/src/components/Miro/Selection.tsx +++ b/examples/github-appcards/src/components/Miro/Selection.tsx @@ -18,7 +18,7 @@ const Selection = ({ * Store information pulled from GitHub API */ const [gitHubProjects, setGitHubProjects] = React.useState( - [] + [], ); const [gitHubColumns, setGitHubColumns] = React.useState([]); @@ -53,7 +53,7 @@ const Selection = ({ const gitHubColumns = await fetchGitHubColumns( gitHubProjects .filter((project) => project.id !== selectedProject.id)[0] - .id.toString() + .id.toString(), ); setGitHubColumns([...gitHubColumns]); } catch (error) { diff --git a/examples/github-appcards/src/modal.tsx b/examples/github-appcards/src/modal.tsx index 168fcd3ef..daba724ca 100644 --- a/examples/github-appcards/src/modal.tsx +++ b/examples/github-appcards/src/modal.tsx @@ -33,7 +33,7 @@ function Modal() { * Store information pulled from GitHub API */ const [gitHubProjects, setGitHubProjects] = React.useState( - [] + [], ); const [gitHubColumns, setGitHubColumns] = React.useState([]); const [gitHubProjectCards, setGitHubProjectCards] = React.useState< @@ -73,7 +73,7 @@ function Modal() { const gitHubColumns = await fetchGitHubColumns( gitHubProjects .filter((project) => project.id !== selectedProject.id)[0] - .id.toString() + .id.toString(), ); setGitHubColumns([...gitHubColumns]); @@ -93,7 +93,7 @@ function Modal() { gitHubColumns.map(async (column) => { try { const gitHubCards = await fetchGitHubProjectCards( - column.id.toString() + column.id.toString(), ); setGitHubProjectCards((previousState) => [ @@ -137,7 +137,7 @@ function Modal() { .map((issue) => { // Find matching GitHub Project Card for Issue const matchingGitHubProjectCard = gitHubProjectCards.find( - (card) => card.content_url === issue.url + (card) => card.content_url === issue.url, ); if (matchingGitHubProjectCard === undefined) { @@ -151,7 +151,7 @@ function Modal() { // Find the name of the column const status = gitHubColumns.find( - (column) => column.id.toString() === columnId + (column) => column.id.toString() === columnId, ); // Return issue with column and card attached @@ -173,7 +173,7 @@ function Modal() { setSelectedGitHubIssues((previousState) => [...previousState, issue]); } else { const updatedGitHubIssues = selectedGitHubIssues.filter( - (currentIssue) => currentIssue.id !== issue.id + (currentIssue) => currentIssue.id !== issue.id, ); setSelectedGitHubIssues([...updatedGitHubIssues]); } diff --git a/examples/github-appcards/src/utils/github.ts b/examples/github-appcards/src/utils/github.ts index dd35428c5..61fdddadb 100644 --- a/examples/github-appcards/src/utils/github.ts +++ b/examples/github-appcards/src/utils/github.ts @@ -22,7 +22,7 @@ export const fetchGitHubProjects = async (username: string, repo: string) => { { method: "GET", headers: headers, - } + }, ); const result = await gitHubProjects.json(); @@ -50,7 +50,7 @@ export const fetchGitHubColumns = async (project_id: string) => { { method: "GET", headers: headers, - } + }, ); const result = await gitHubColumns.json(); @@ -77,7 +77,7 @@ export const fetchGitHubColumn = async (column_id: string) => { { method: "GET", headers: headers, - } + }, ); return await gitHubColumn.json(); @@ -97,7 +97,7 @@ export const fetchGitHubProjectCards = async (column_id: string) => { { method: "GET", headers: headers, - } + }, ); return await gitHubProjectCards.json(); @@ -117,7 +117,7 @@ export const fetchGitHubProjectCard = async (card_id: string) => { { method: "GET", headers: headers, - } + }, ); return await gitHubProjectCard.json(); @@ -137,7 +137,7 @@ export const fetchGitHubIssues = async (username: string, repo: string) => { { method: "GET", headers: headers, - } + }, ); return await gitHubProjectCards.json(); @@ -157,7 +157,7 @@ export const fetchGitHubCollaborators = async (project_id: string) => { { method: "GET", headers: headers, - } + }, ); return await gitHubCollaborators.json(); @@ -178,7 +178,7 @@ export const createGitHubIssue = async ( body?: string; assignee?: string | null; labels?: string[]; - } + }, ) => { try { const gitHubIssue = await fetch( @@ -187,7 +187,7 @@ export const createGitHubIssue = async ( method: "POST", headers: headers, body: JSON.stringify(data), - } + }, ); return await gitHubIssue.json(); @@ -206,7 +206,7 @@ export const createGitHubProjectCard = async ( note: string | null; content_id: number; content_type: string; - } + }, ) => { try { const gitHubProjectCard = await fetch( @@ -215,7 +215,7 @@ export const createGitHubProjectCard = async ( method: "POST", headers: headers, body: JSON.stringify(data), - } + }, ); return await gitHubProjectCard.json(); @@ -235,7 +235,7 @@ export const updateGitHubIssue = async ( data: { title: string; body: string; - } + }, ) => { try { const gitHubIssue = await fetch( @@ -244,7 +244,7 @@ export const updateGitHubIssue = async ( method: "PATCH", headers: headers, body: JSON.stringify(data), - } + }, ); return await gitHubIssue.json(); @@ -263,7 +263,7 @@ export const updateGitHubProjectCard = async ( columnId: number; card_id: string; position: string; - } + }, ) => { try { const gitHubProjectCard = await fetch( @@ -272,7 +272,7 @@ export const updateGitHubProjectCard = async ( method: "POST", headers: headers, body: JSON.stringify(data), - } + }, ); return await gitHubProjectCard.json(); diff --git a/examples/github-appcards/src/utils/miro.ts b/examples/github-appcards/src/utils/miro.ts index 9ac939d60..6e2596a2b 100644 --- a/examples/github-appcards/src/utils/miro.ts +++ b/examples/github-appcards/src/utils/miro.ts @@ -12,7 +12,7 @@ export const insertAppCards = async ( selection: MiroSelection, selectedColor: { background: string }, gitHubProjectCard: any, - issue: any + issue: any, ) => { // Get current Miro board const { id } = await miro.board.getInfo(); @@ -92,6 +92,6 @@ export const insertGitHubAppCards = async (gitHubIssues: any[]) => { if (index === 0) { await miro.board.viewport.zoomTo(appCard); } - }) + }), ); }; diff --git a/examples/github-appcards/src/utils/supabase.ts b/examples/github-appcards/src/utils/supabase.ts index 2af2cee8d..b3dc1cc28 100644 --- a/examples/github-appcards/src/utils/supabase.ts +++ b/examples/github-appcards/src/utils/supabase.ts @@ -2,5 +2,5 @@ import { createClient } from "@supabase/supabase-js"; export const supabase = createClient( import.meta.env.VITE_DATABASE_URL as string, - import.meta.env.VITE_DATABASE_PUBLIC_KEY as string + import.meta.env.VITE_DATABASE_PUBLIC_KEY as string, ); diff --git a/examples/html-preview/initMiro.ts b/examples/html-preview/initMiro.ts index 4424d40ef..9226e9f41 100644 --- a/examples/html-preview/initMiro.ts +++ b/examples/html-preview/initMiro.ts @@ -12,7 +12,7 @@ function getSerializedCookie(name: string, value: string) { export default function initMiro( request: { cookies: Record }, - response?: { setHeader(name: string, value: string[]): void } + response?: { setHeader(name: string, value: string[]): void }, ) { const tokensCookie = "miro_tokens"; @@ -31,7 +31,7 @@ export default function initMiro( set: (_, state) => { if (!response) throw new Error( - "initMiro should be invoked with a response object" + "initMiro should be invoked with a response object", ); // store state (tokens) in the cookie response.setHeader("Set-Cookie", [ diff --git a/examples/html-preview/lib/data.ts b/examples/html-preview/lib/data.ts index 3a4274596..a777cc101 100644 --- a/examples/html-preview/lib/data.ts +++ b/examples/html-preview/lib/data.ts @@ -22,7 +22,7 @@ export async function getAllFrames(board: Board): Promise { export function findFrameByTitle( frames: FrameItem[], - title: string + title: string, ): FrameItem { return frames.filter((frame) => frame.data?.title == title)[0] || frames[0]; } @@ -45,7 +45,7 @@ async function getImage(api: MiroApi, url: string | undefined) { export async function enrichItem( api: MiroApi, board: Board, - item: WidgetItem + item: WidgetItem, ): Promise { const id = item.id.toString(); if ( @@ -86,7 +86,7 @@ function isSet(i: Item | undefined): i is Item { export async function getItems( api: MiroApi, board: Board, - frame: FrameItem + frame: FrameItem, ): Promise { const items: Array> = []; for await (const item of (frame || parent).getAllItems()) { @@ -98,12 +98,12 @@ export async function getItems( export async function getLinks( board: Board, items: Item[], - frames: FrameItem[] + frames: FrameItem[], ) { const links: Record = {}; for await (const connector of board.getAllConnectors()) { const matchingItem = items.find( - (item) => item.id.toString() === connector.startItem?.id?.toString() + (item) => item.id.toString() === connector.startItem?.id?.toString(), ); if (!matchingItem) continue; const endItem = connector.endItem; @@ -111,7 +111,7 @@ export async function getLinks( const endItemData = await board.getItem(endItem.id || ""); const matchingFrame = frames.find( - (frame) => "parent" in endItemData && frame.id == endItemData.parent?.id + (frame) => "parent" in endItemData && frame.id == endItemData.parent?.id, ); if (!matchingFrame) continue; diff --git a/examples/html-preview/pages/[boardId]/[path].tsx b/examples/html-preview/pages/[boardId]/[path].tsx index 94a1f8188..6eb57c8fc 100644 --- a/examples/html-preview/pages/[boardId]/[path].tsx +++ b/examples/html-preview/pages/[boardId]/[path].tsx @@ -24,7 +24,7 @@ export const getServerSideProps: GetServerSideProps = async ({ // cache for 10 min res.setHeader( "Cache-Control", - "public, s-maxage=600, stale-while-revalidate=59" + "public, s-maxage=600, stale-while-revalidate=59", ); // redirect to auth url if user has not authorized the app diff --git a/examples/html-preview/pages/api/redirect.ts b/examples/html-preview/pages/api/redirect.ts index dd9a52a45..ac310dd70 100644 --- a/examples/html-preview/pages/api/redirect.ts +++ b/examples/html-preview/pages/api/redirect.ts @@ -4,7 +4,7 @@ import { NextApiRequest, NextApiResponse } from "next"; // handle redirect with code and exchange it for the access token export default async function handler( req: NextApiRequest, - res: NextApiResponse + res: NextApiResponse, ) { const { miro } = initMiro(req, res); diff --git a/examples/monetization-with-stripe/initMiro.ts b/examples/monetization-with-stripe/initMiro.ts index 011ff64bd..89dba1ab6 100644 --- a/examples/monetization-with-stripe/initMiro.ts +++ b/examples/monetization-with-stripe/initMiro.ts @@ -14,7 +14,7 @@ export default function initMiro( request: { cookies: Record }, response?: { setHeader(name: string, value: string[]): void; - } + }, ) { const tokensCookie = "miro_tokens"; const userIdCookie = "miro_user_id"; diff --git a/examples/monetization-with-stripe/pages/api/payment-handler.ts b/examples/monetization-with-stripe/pages/api/payment-handler.ts index 810e46e92..79a7e82ca 100644 --- a/examples/monetization-with-stripe/pages/api/payment-handler.ts +++ b/examples/monetization-with-stripe/pages/api/payment-handler.ts @@ -28,7 +28,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => { stripeEvent = stripe.webhooks.constructEvent( buf, sig || "", - webhookSecret + webhookSecret, ); } catch (err) { res @@ -47,7 +47,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => { (session as { client_reference_id: ExternalUserId }) .client_reference_id, PAYMENT_STORAGE_KEY, - "true" + "true", ); } diff --git a/examples/monetization-with-stripe/pages/api/redirect.ts b/examples/monetization-with-stripe/pages/api/redirect.ts index dd9a52a45..ac310dd70 100644 --- a/examples/monetization-with-stripe/pages/api/redirect.ts +++ b/examples/monetization-with-stripe/pages/api/redirect.ts @@ -4,7 +4,7 @@ import { NextApiRequest, NextApiResponse } from "next"; // handle redirect with code and exchange it for the access token export default async function handler( req: NextApiRequest, - res: NextApiResponse + res: NextApiResponse, ) { const { miro } = initMiro(req, res); diff --git a/examples/nextjs-full-stack/styles/globals.css b/examples/nextjs-full-stack/styles/globals.css index d2fce9b6a..be6772cda 100644 --- a/examples/nextjs-full-stack/styles/globals.css +++ b/examples/nextjs-full-stack/styles/globals.css @@ -2,8 +2,18 @@ html, body { padding: 0; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-family: + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Oxygen, + Ubuntu, + Cantarell, + Fira Sans, + Droid Sans, + Helvetica Neue, + sans-serif; } .container { diff --git a/examples/nextjs-oauth/pages/api/signin.js b/examples/nextjs-oauth/pages/api/signin.js index fff919a60..4e3cb13dc 100644 --- a/examples/nextjs-oauth/pages/api/signin.js +++ b/examples/nextjs-oauth/pages/api/signin.js @@ -3,6 +3,6 @@ export default function handler(req, res) { "https://miro.com/oauth/authorize?response_type=code&client_id=" + process.env.clientID + "&redirect_uri=" + - process.env.redirectURL + process.env.redirectURL, ); } diff --git a/examples/nextjs-oauth/styles/globals.css b/examples/nextjs-oauth/styles/globals.css index 11a1e5e01..b6f8d45d1 100644 --- a/examples/nextjs-oauth/styles/globals.css +++ b/examples/nextjs-oauth/styles/globals.css @@ -2,8 +2,18 @@ html, body { padding: 0; margin: 0; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, - Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; + font-family: + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Oxygen, + Ubuntu, + Cantarell, + Fira Sans, + Droid Sans, + Helvetica Neue, + sans-serif; } .container { diff --git a/examples/node-oauth/index.js b/examples/node-oauth/index.js index b7b453b49..40d95a849 100644 --- a/examples/node-oauth/index.js +++ b/examples/node-oauth/index.js @@ -88,10 +88,10 @@ app.get("/", (req, res) => { let oauthRefreshResponse = await axios.post(refreshUrl); console.log( - `New access_token: ${oauthRefreshResponse.data.access_token}` + `New access_token: ${oauthRefreshResponse.data.access_token}`, ); console.log( - `New refresh_token: ${oauthRefreshResponse.data.refresh_token}` + `New refresh_token: ${oauthRefreshResponse.data.refresh_token}`, ); } catch (err) { console.log(`ERROR: ${err}`); @@ -111,7 +111,7 @@ app.get("/", (req, res) => { "https://miro.com/oauth/authorize?response_type=code&client_id=" + process.env.clientID + "&redirect_uri=" + - process.env.redirectURL + process.env.redirectURL, ); }); // Run express server on localhost:3000 diff --git a/examples/node-passport-oauth/index.mjs b/examples/node-passport-oauth/index.mjs index 2642423be..5f35e1b49 100644 --- a/examples/node-passport-oauth/index.mjs +++ b/examples/node-passport-oauth/index.mjs @@ -8,7 +8,7 @@ const app = express(); const port = process.env.PORT || 4000; app.use( - session({ secret: "keyboard cat", resave: true, saveUninitialized: false }) + session({ secret: "keyboard cat", resave: true, saveUninitialized: false }), ); app.use(passport.initialize()); app.use(passport.session()); @@ -42,8 +42,8 @@ passport.use( users[user.id] = user; cb(null, user); - } - ) + }, + ), ); // configure passport authorentication route (this should match the return URL in App settings) @@ -53,7 +53,7 @@ app.get( passport.authenticate("oauth2", { failureRedirect: "/" }), function (req, res) { res.redirect("/"); - } + }, ); app.get("/", async function (req, res) { diff --git a/examples/node-stickies-csv/app.js b/examples/node-stickies-csv/app.js index 7af5445f5..87df74667 100644 --- a/examples/node-stickies-csv/app.js +++ b/examples/node-stickies-csv/app.js @@ -28,7 +28,7 @@ app.engine( exphbs.engine({ defaultLayout: "main", extname: ".hbs", - }) + }), ); // Configure handlebars @@ -108,7 +108,7 @@ app.post("/create-from-csv", async function (req, res) { ]; const CSV_ROW_LENGTH = CSV_ROW_STRUCTURE.length; const NUMBER_OF_TAGS = CSV_ROW_STRUCTURE.filter( - (type) => type === "tag" + (type) => type === "tag", ).length; const COLUMN_WIDTH = 400; const STICKY_WIDTH = COLUMN_WIDTH - 200; @@ -117,7 +117,7 @@ app.post("/create-from-csv", async function (req, res) { const TABLE_HEIGHT = MAX_STICKIES_PER_COLUMN * STICKY_WIDTH + COLUMN_WIDTH; const COLUMNS_NEEDED = Math.ceil( - content.length / CSV_ROW_LENGTH / MAX_STICKIES_PER_COLUMN + content.length / CSV_ROW_LENGTH / MAX_STICKIES_PER_COLUMN, ); const board = await miro.as(USER_ID).getBoard(process.env.MIRO_BOARD_ID); @@ -152,7 +152,7 @@ app.post("/create-from-csv", async function (req, res) { x, y, }, - }) + }), ); for (let j = 0; j < NUMBER_OF_TAGS; j++) { @@ -164,7 +164,7 @@ app.post("/create-from-csv", async function (req, res) { board.createTag({ fillColor: TAG_COLORS[j], title: `${title} (${randomNumber})`, - }) + }), ); } } @@ -208,7 +208,7 @@ app.post("/create-from-csv", async function (req, res) { for (let i = 0; i <= COLUMNS_NEEDED; i++) { coordinatesForPoints.push( { x: COLUMN_WIDTH * i + 1, y: 0 }, - { x: COLUMN_WIDTH * i + 1, y: TABLE_HEIGHT } + { x: COLUMN_WIDTH * i + 1, y: TABLE_HEIGHT }, ); } for (let i = 0; i <= COLUMNS_NEEDED * 2 + 1; i += 1) { @@ -229,12 +229,12 @@ app.post("/create-from-csv", async function (req, res) { ], }, ], // top left to right - [i + 1, i + 3] // bottom left to right + [i + 1, i + 3], // bottom left to right ); } if (i <= COLUMNS_NEEDED) { pointIndexesToConnectToEachOther.push( - [i * 2, i * 2 + 1] // top to bottom + [i * 2, i * 2 + 1], // top to bottom ); } } @@ -257,7 +257,7 @@ app.post("/create-from-csv", async function (req, res) { x, y, }, - }) + }), ); const points = await Promise.all(promises); @@ -282,7 +282,7 @@ app.post("/create-from-csv", async function (req, res) { }, style, ...data, - }) + }), ); await Promise.all(connections); @@ -334,7 +334,7 @@ app.get("/get-sticky", async (req, res) => { console.error( "error getting all items for board", { boardId: process.env.MIRO_BOARD_ID }, - e + e, ); } diff --git a/examples/python-flask-starter-with-oauth/templates/index.html b/examples/python-flask-starter-with-oauth/templates/index.html index a62554f78..3406e8301 100644 --- a/examples/python-flask-starter-with-oauth/templates/index.html +++ b/examples/python-flask-starter-with-oauth/templates/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/python-flask-starter-with-oauth/templates/loggedin.html b/examples/python-flask-starter-with-oauth/templates/loggedin.html index af09864ba..dddfc4a66 100644 --- a/examples/python-flask-starter-with-oauth/templates/loggedin.html +++ b/examples/python-flask-starter-with-oauth/templates/loggedin.html @@ -1,4 +1,4 @@ - + diff --git a/examples/stickynotes-to-shapes/index.html b/examples/stickynotes-to-shapes/index.html index 3ae56dfa0..54bad6699 100644 --- a/examples/stickynotes-to-shapes/index.html +++ b/examples/stickynotes-to-shapes/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/stickynotes-to-shapes/src/index.js b/examples/stickynotes-to-shapes/src/index.js index 55130e344..80fa5c109 100644 --- a/examples/stickynotes-to-shapes/src/index.js +++ b/examples/stickynotes-to-shapes/src/index.js @@ -7,7 +7,7 @@ async function init() { // Filter sticky notes from selected items let stickyNotes = selectedItems.filter( - (item) => item.type === "sticky_note" + (item) => item.type === "sticky_note", ); // Delete selected stickers diff --git a/examples/template-builder/app.html b/examples/template-builder/app.html index 1018640f3..f9d949a72 100644 --- a/examples/template-builder/app.html +++ b/examples/template-builder/app.html @@ -1,4 +1,4 @@ - + diff --git a/examples/template-builder/index.html b/examples/template-builder/index.html index 3ae56dfa0..54bad6699 100644 --- a/examples/template-builder/index.html +++ b/examples/template-builder/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/template-builder/src/app.js b/examples/template-builder/src/app.js index cf82fd6af..dfb5a947a 100644 --- a/examples/template-builder/src/app.js +++ b/examples/template-builder/src/app.js @@ -115,6 +115,6 @@ function addRowInput(value) { function getLabels() { return Array.from(rowsContainer.querySelectorAll("input")).map( - (el) => el.value + (el) => el.value, ); } diff --git a/examples/webhooks-manager/initMiro.ts b/examples/webhooks-manager/initMiro.ts index 71c2ebc23..0a13c81d3 100644 --- a/examples/webhooks-manager/initMiro.ts +++ b/examples/webhooks-manager/initMiro.ts @@ -16,7 +16,7 @@ function getSerializedCookie(name: string, value: string) { export default function initMiro( request: { cookies: Record }, - response?: { setHeader(name: string, value: string[]): void } + response?: { setHeader(name: string, value: string[]): void }, ) { const tokensCookie = "miro_tokens"; @@ -35,7 +35,7 @@ export default function initMiro( set: (_userId, state) => { if (!response) throw new Error( - "initMiro should be invoked with a response object" + "initMiro should be invoked with a response object", ); // Store the state (tokens) in the cookie console.log("Setting cookies"); diff --git a/examples/webhooks-manager/pages/api/manage.ts b/examples/webhooks-manager/pages/api/manage.ts index 1d8a01b7a..117025792 100644 --- a/examples/webhooks-manager/pages/api/manage.ts +++ b/examples/webhooks-manager/pages/api/manage.ts @@ -3,7 +3,7 @@ import { NextApiRequest, NextApiResponse } from "next"; export default async function handler( req: NextApiRequest, - res: NextApiResponse + res: NextApiResponse, ) { if (typeof req.body.url !== "string") { res.status(400); @@ -19,7 +19,7 @@ export default async function handler( .as("") ._api.call( "DELETE", - `/v2-experimental/webhooks/subscriptions/${req.body.url}` + `/v2-experimental/webhooks/subscriptions/${req.body.url}`, ); res.send(miroRes.body); } catch (err) { @@ -47,7 +47,7 @@ export default async function handler( ._api.call( "POST", "/v2-experimental/webhooks/board_subscriptions", - JSON.stringify(params) + JSON.stringify(params), ); res.send(miroRes.body); } catch (err) { diff --git a/examples/webhooks-manager/pages/api/redirect.ts b/examples/webhooks-manager/pages/api/redirect.ts index e5e731bc4..e4061f434 100644 --- a/examples/webhooks-manager/pages/api/redirect.ts +++ b/examples/webhooks-manager/pages/api/redirect.ts @@ -4,7 +4,7 @@ import { NextApiRequest, NextApiResponse } from "next"; // Handle the redirect with code, and exchange it for the access token export default async function handler( req: NextApiRequest, - res: NextApiResponse + res: NextApiResponse, ) { const { miro } = initMiro(req, res); @@ -18,6 +18,6 @@ export default async function handler( await miro.exchangeCodeForAccessToken("", req.query.code); res.redirect( - `https://miro.com/app-install-completed/?client_id=${process.env.MIRO_CLIENT_ID}&team_id=${req.query.team_id}` + `https://miro.com/app-install-completed/?client_id=${process.env.MIRO_CLIENT_ID}&team_id=${req.query.team_id}`, ); } diff --git a/examples/webhooks-manager/pages/api/webhook.ts b/examples/webhooks-manager/pages/api/webhook.ts index 529054410..aefa02385 100644 --- a/examples/webhooks-manager/pages/api/webhook.ts +++ b/examples/webhooks-manager/pages/api/webhook.ts @@ -3,7 +3,7 @@ import { NextApiRequest, NextApiResponse } from "next"; // Handle webhook (for testing purposes) export default async function handler( req: NextApiRequest, - res: NextApiResponse + res: NextApiResponse, ) { console.log(req.body); diff --git a/examples/webhooks-manager/pages/index.tsx b/examples/webhooks-manager/pages/index.tsx index 6d72f7495..5f97caedb 100644 --- a/examples/webhooks-manager/pages/index.tsx +++ b/examples/webhooks-manager/pages/index.tsx @@ -21,7 +21,7 @@ export const getServerSideProps: GetServerSideProps = try { const { body } = await api._api.call( "GET", - "v2-experimental/webhooks/subscriptions" + "v2-experimental/webhooks/subscriptions", ); return { @@ -86,7 +86,7 @@ export default function Main({ const [errorMsg, setErrorMsg] = useState(""); const boardWebhooks = webhooks.filter( - (hook) => hook.data.boardId === boardId + (hook) => hook.data.boardId === boardId, ); const isPanel = @@ -116,7 +116,7 @@ export default function Main({ try { setWebhooks( - webhooks.concat(await apiCall("POST", "/api/manage", { url, boardId })) + webhooks.concat(await apiCall("POST", "/api/manage", { url, boardId })), ); } catch (err: any) { let message = err.message; diff --git a/examples/wordle/app.html b/examples/wordle/app.html index 1975db62d..ffaafcfed 100644 --- a/examples/wordle/app.html +++ b/examples/wordle/app.html @@ -1,5 +1,5 @@ - + diff --git a/examples/wordle/index.html b/examples/wordle/index.html index 0cdfa573c..abc5a74b5 100644 --- a/examples/wordle/index.html +++ b/examples/wordle/index.html @@ -1,5 +1,5 @@ - + diff --git a/examples/wordle/src/App.tsx b/examples/wordle/src/App.tsx index c95921650..ffbc4506a 100644 --- a/examples/wordle/src/App.tsx +++ b/examples/wordle/src/App.tsx @@ -89,7 +89,7 @@ function App() { x === letter && (typeof solution[index] == "undefined" || typeof solution[index].isUsed == "undefined" || - !solution[index].isUsed) + !solution[index].isUsed), ); if (charIndex > -1) { // Mark the letter as yellow @@ -192,5 +192,5 @@ ReactDOM.render( , - document.getElementById("root") + document.getElementById("root"), ); diff --git a/examples/wordle/src/lib/board.ts b/examples/wordle/src/lib/board.ts index 9030ef91b..e69bfbda7 100644 --- a/examples/wordle/src/lib/board.ts +++ b/examples/wordle/src/lib/board.ts @@ -39,7 +39,7 @@ export const createWordle = async (viewport: Rect) => { export const setStickyColorAndText = async ( id: string, newColor: string, - newText: string + newText: string, ) => { // Retrieve the sticky note by its id const sticky = await board.getById(id); diff --git a/examples/wordle/src/styles/style.css b/examples/wordle/src/styles/style.css index ba702453f..6bc0bd994 100644 --- a/examples/wordle/src/styles/style.css +++ b/examples/wordle/src/styles/style.css @@ -7,9 +7,21 @@ html { height: 100%; background-color: #eee; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, - sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + font-family: + Inter, + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } diff --git a/examples/youtube-room/facilitator-modal.html b/examples/youtube-room/facilitator-modal.html index 6dbd2eb55..482cafa9d 100644 --- a/examples/youtube-room/facilitator-modal.html +++ b/examples/youtube-room/facilitator-modal.html @@ -1,4 +1,4 @@ - + diff --git a/examples/youtube-room/facilitator.html b/examples/youtube-room/facilitator.html index 6bc290bb7..c94be243f 100644 --- a/examples/youtube-room/facilitator.html +++ b/examples/youtube-room/facilitator.html @@ -1,4 +1,4 @@ - + diff --git a/examples/youtube-room/index.html b/examples/youtube-room/index.html index 1a3d8c717..082772a0a 100644 --- a/examples/youtube-room/index.html +++ b/examples/youtube-room/index.html @@ -1,4 +1,4 @@ - + diff --git a/examples/youtube-room/participant-modal.html b/examples/youtube-room/participant-modal.html index 7090b9db5..b6f65d3f5 100644 --- a/examples/youtube-room/participant-modal.html +++ b/examples/youtube-room/participant-modal.html @@ -1,4 +1,4 @@ - + diff --git a/examples/youtube-room/participant.html b/examples/youtube-room/participant.html index c70c1b3ce..43b343e80 100644 --- a/examples/youtube-room/participant.html +++ b/examples/youtube-room/participant.html @@ -1,4 +1,4 @@ - + diff --git a/examples/youtube-room/server.js b/examples/youtube-room/server.js index 44ea0d5a1..da7a5096c 100644 --- a/examples/youtube-room/server.js +++ b/examples/youtube-room/server.js @@ -51,7 +51,7 @@ io.on("connection", (socket) => { console.log(` ${socketId} requesting ${request}`); const rooms = Array.from(socket.rooms); rooms.map((room) => - io.to(room).emit("respond", { socketId: socketId, request: request }) + io.to(room).emit("respond", { socketId: socketId, request: request }), ); }); }); diff --git a/examples/youtube-room/src/assets/style.css b/examples/youtube-room/src/assets/style.css index d3b1b7486..46231a628 100644 --- a/examples/youtube-room/src/assets/style.css +++ b/examples/youtube-room/src/assets/style.css @@ -9,9 +9,21 @@ html { height: 100%; background-color: #eee; - font-family: Inter, ui-sans-serif, system-ui, -apple-system, - BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, - sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, + font-family: + Inter, + ui-sans-serif, + system-ui, + -apple-system, + BlinkMacSystemFont, + Segoe UI, + Roboto, + Helvetica Neue, + Arial, + Noto Sans, + sans-serif, + Apple Color Emoji, + Segoe UI Emoji, + Segoe UI Symbol, Noto Color Emoji; } diff --git a/package.json b/package.json index 8fec8cda0..00784b638 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,7 @@ "eslint-plugin-import": "^2.25.4", "husky": "^7.0.0", "lint-staged": "^12.1.5", - "prettier": "^2.5.1", + "prettier": "3.0.3", "turbo": "^1.0.24" }, "turbo": { diff --git a/yarn.lock b/yarn.lock index 9e7363e3d..14923cd97 100644 --- a/yarn.lock +++ b/yarn.lock @@ -455,13 +455,6 @@ dependencies: typescript "4.6.3" -"@mirohq/websdk-types@^2.9.4": - version "2.9.4" - resolved "https://registry.yarnpkg.com/@mirohq/websdk-types/-/websdk-types-2.9.4.tgz#26b7ae08a291e94dddeab83e6f295f76757485f2" - integrity sha512-a+YnL1QitB2E1/qeO8ATKQdq/684e4thhgefM7SI0gxqTUtP2YiQgupnyCO3n2cb072x76xRgdDVTJXKvcVp+A== - dependencies: - typescript ">=4.6.3 || ~5" - "@mirohq/websdk-types@latest": version "2.9.1" resolved "https://registry.npmjs.org/@mirohq/websdk-types/-/websdk-types-2.9.1.tgz" @@ -3991,10 +3984,10 @@ prelude-ls@^1.2.1: resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz" integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== -prettier@^2.5.1: - version "2.7.1" - resolved "https://registry.npmjs.org/prettier/-/prettier-2.7.1.tgz" - integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== +prettier@3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.0.3.tgz#432a51f7ba422d1469096c0fdc28e235db8f9643" + integrity sha512-L/4pUDMxcNa8R/EthV08Zt42WBO4h1rarVtK0K+QJG0X187OLo7l699jWw0GKuwzkPQ//jMFA/8Xm6Fh3J/DAg== process-nextick-args@~2.0.0: version "2.0.1"