Merge branch 'main' into types-emoji-picker

fix(workflow): update package-lock.json

.eslintrc.js

@@ -37,7 +37,7 @@ module.exports = {
       },
     },
     react: {
-      version: 'detect',
+      version: '18.2.0',
     },
   },
   rules: {

examples/1-basic-map/README.md

@@ -2,16 +2,16 @@
 
 In this example we see how we create a basic React app with a Map component using [utopia-ui](https://github.com/utopia-os/utopia-ui) library.
 
-For this example we use Vite to create an empty React app called "utopia-static-map"
+For this example we use Vite to create an empty React app called "1-static-map"
 
 ```shell
-npm create vite@latest utopia-static-map -- --template react-ts
+npm create vite@latest 1-static-map -- --template react-ts
 ```
 
 We open our new app in the terminal and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package
 
 ```shell
-cd utopia-static-map
+cd 1-static-map
 npm install utopia-ui
 ```
 
@@ -39,4 +39,4 @@ npm run dev
 
 And can open our first map app in the browser 🙂
 
-In [Tutorial 2](../2-static-layers/) we gonna add some static data to our map
+In [Example 2](../2-static-layers/) we gonna add some static data to our map

package-lock.json

@@ -27,8 +27,7 @@
         "react-toastify": "^9.1.3",
         "remark-breaks": "^4.0.0",
         "tributejs": "^5.1.3",
-        "tw-elements": "^1.0.0",
-        "utopia-ui": "^3.0.35"
+        "tw-elements": "^1.0.0"
       },
       "devDependencies": {
         "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
@@ -6044,23 +6043,6 @@
         "react": ">=18"
       }
     },
-    "node_modules/react-photo-album": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/react-photo-album/-/react-photo-album-3.0.2.tgz",
-      "integrity": "sha512-w3+8i6aj9l1jRfcubgVbAlBGSdtiXcqWdcwZcH4/Bavc+v7X7h+S3TkQ723pvDABjhaaxS168g9ECEBP6xnKrQ==",
-      "engines": {
-        "node": ">=18"
-      },
-      "peerDependencies": {
-        "@types/react": ">=18",
-        "react": ">=18"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-router": {
       "version": "6.16.0",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz",
@@ -7370,38 +7352,6 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
-    "node_modules/utopia-ui": {
-      "version": "3.0.35",
-      "resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.35.tgz",
-      "integrity": "sha512-PtXvwskYuS4ro/gRWoNkKvn/lC0vW6m9ipwnXb7a4u/95wGWDXajhTh70MbAujTszxSH2iBRY6ZTsSFuREHCJQ==",
-      "dependencies": {
-        "@heroicons/react": "^2.0.17",
-        "@tanstack/react-query": "^5.17.8",
-        "@types/offscreencanvas": "^2019.7.1",
-        "axios": "^1.6.5",
-        "date-fns": "^3.3.1",
-        "leaflet": "^1.9.4",
-        "leaflet.locatecontrol": "^0.79.0",
-        "prop-types": "^15.8.1",
-        "react-colorful": "^5.6.1",
-        "react-image-crop": "^10.1.8",
-        "react-leaflet": "^4.2.1",
-        "react-leaflet-cluster": "^2.1.0",
-        "react-markdown": "^9.0.1",
-        "react-photo-album": "^3.0.2",
-        "react-router-dom": "^6.16.0",
-        "react-string-replace": "^1.1.1",
-        "react-toastify": "^9.1.3",
-        "remark-breaks": "^4.0.0",
-        "tributejs": "^5.1.3",
-        "tw-elements": "^1.0.0",
-        "yet-another-react-lightbox": "^3.21.7"
-      },
-      "peerDependencies": {
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
-      }
-    },
     "node_modules/vfile": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
@@ -7581,18 +7531,6 @@
         "node": ">= 14"
       }
     },
-    "node_modules/yet-another-react-lightbox": {
-      "version": "3.21.7",
-      "resolved": "https://registry.npmjs.org/yet-another-react-lightbox/-/yet-another-react-lightbox-3.21.7.tgz",
-      "integrity": "sha512-dcdokNuCIl92f0Vl+uzeKULnQhztIGpoZFUMvtVNUPmtwsQWpqWufeieDPeg9JtFyVCcbj4vYw3V00DS0QNoWA==",
-      "engines": {
-        "node": ">=14"
-      },
-      "peerDependencies": {
-        "react": ">=16.8.0",
-        "react-dom": ">=16.8.0"
-      }
-    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",

src/Components/Templates/AttestationForm.tsx

@@ -38,10 +38,12 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
     setInputValue(event.target.value)
   }
 
-  const sendAttestation = async () => {
+  const sendAttestation = () => {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const to: any[] = []
     users?.map((u) => to.push({ directus_users_id: u.user_created?.id }))
 
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     api?.createItem &&
       toast
         .promise(
@@ -57,6 +59,7 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
             success: 'Attestation created',
             error: {
               render({ data }) {
+                // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
                 return `${data}`
               },
             },
@@ -65,8 +68,10 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
         .then(() =>
           navigate(
             '/item/' +
+              // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
               items.find(
                 (i) =>
+                  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
                   i.user_created?.id === to[0].directus_users_id &&
                   i.layer?.itemType.name === 'player',
               )?.id +
@@ -84,29 +89,28 @@ export const AttestationForm = ({ api }: { api?: ItemsApi<unknown> }) => {
       <div className='tw-text-center tw-text-xl tw-font-bold'>Gratitude</div>
       <div className='tw-text-center tw-text-base tw-text-gray-400'>to</div>
       <div className='tw-flex tw-flex-row tw-justify-center tw-items-center tw-flex-wrap'>
-        {users &&
-          users.map(
-            (u, k) => (
-              <div key={k} className='tw-flex tw-items-center tw-space-x-3 tw-mx-2 tw-my-1'>
-                {u.image ? (
-                  <div className='tw-avatar'>
-                    <div className='tw-mask tw-mask-circle tw-w-8 tw-h-8'>
-                      <img
-                        src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
-                        alt='Avatar'
-                      />
-                    </div>
+        {users?.map(
+          (u, k) => (
+            <div key={k} className='tw-flex tw-items-center tw-space-x-3 tw-mx-2 tw-my-1'>
+              {u.image ? (
+                <div className='tw-avatar'>
+                  <div className='tw-mask tw-mask-circle tw-w-8 tw-h-8'>
+                    <img
+                      src={appState.assetsApi.url + u.image + '?width=40&heigth=40'}
+                      alt='Avatar'
+                    />
                   </div>
-                ) : (
-                  <div className='tw-mask tw-mask-circle tw-text-xl md:tw-text-2xl tw-bg-slate-200 tw-rounded-full tw-w-8 tw-h-8'></div>
-                )}
-                <div>
-                  <div className='tw-font-bold'>{u.name}</div>
                 </div>
+              ) : (
+                <div className='tw-mask tw-mask-circle tw-text-xl md:tw-text-2xl tw-bg-slate-200 tw-rounded-full tw-w-8 tw-h-8'></div>
+              )}
+              <div>
+                <div className='tw-font-bold'>{u.name}</div>
               </div>
-            ),
-            ', ',
-          )}
+            </div>
+          ),
+          ', ',
+        )}
       </div>
 
       <div className='tw-w-full'>