diff --git a/.github/workflows/deploy.docs.yml b/.github/workflows/deploy.docs.yml index 7cbe0f15..f66fad1e 100644 --- a/.github/workflows/deploy.docs.yml +++ b/.github/workflows/deploy.docs.yml @@ -19,14 +19,26 @@ jobs: run: | npm install npm run build - npm link working-directory: ./ - name: Build static files id: build - run: npm install && npm run docs:generate + run: npm run docs:generate working-directory: ./ + - name: Generate coverage + id: coverage + run: npm run test:unit + + - name: Create coverage badges + id: coverage-badge + uses: jaywcjlove/coverage-badges-cli@main + with: + style: flat + source: coverage/coverage-summary.json + output: docs/test-coverage.svg + jsonPath: total.lines.pct + - name: Upload static files as artifact id: deployment uses: actions/upload-pages-artifact@v3.0.1 diff --git a/.github/workflows/test.unit.yml b/.github/workflows/test.unit.yml index 8b4a5fd3..90d91a99 100644 --- a/.github/workflows/test.unit.yml +++ b/.github/workflows/test.unit.yml @@ -17,8 +17,6 @@ jobs: unit: - '.github/workflows/**/*' - '**/*' - - '!**/*.md' - predicate-quantifier: 'every' unit: if: needs.files-changed.outputs.unit == 'true' diff --git a/README.md b/README.md index 5091a48c..4b0f5124 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Utopia UI [![npm version](https://img.shields.io/npm/v/utopia-ui.svg)](https://www.npmjs.com/package/utopia-ui) ![Build Status](https://img.shields.io/github/actions/workflow/status/utopia-os/utopia-ui/test.build.yml?branch=main) [![Docs Coverage](https://utopia-os.org/utopia-ui/coverage.svg)](https://utopia-os.org/utopia-ui/) ![License](https://img.shields.io/github/license/utopia-os/utopia-ui) +# Utopia UI [![npm version](https://img.shields.io/npm/v/utopia-ui.svg)](https://www.npmjs.com/package/utopia-ui) ![Build Status](https://img.shields.io/github/actions/workflow/status/utopia-os/utopia-ui/test.build.yml?branch=main) ![Test Coverage](https://utopia-os.org/utopia-ui/test-coverage.svg) [![Docs Coverage](https://utopia-os.org/utopia-ui/coverage.svg)](https://utopia-os.org/utopia-ui/) ![License](https://img.shields.io/github/license/utopia-os/utopia-ui) **UI Framework for Real-Life-Networking-Apps** @@ -70,3 +70,7 @@ Tags, colors and clusters help to retain the overview. + +--- + +This project is tested with BrowserStack diff --git a/examples/1-basic-map/README.md b/examples/1-basic-map/README.md index 7b1f3b35..db387259 100644 --- a/examples/1-basic-map/README.md +++ b/examples/1-basic-map/README.md @@ -8,6 +8,7 @@ We'll use **Vite** to create an empty React app named **"1-static-map"**: ```shell npm create vite@latest 1-static-map -- --template react-ts +``` Next, we navigate into our project folder and install the [utopia-ui](https://github.com/utopia-os/utopia-ui) package: @@ -38,7 +39,8 @@ To see our **first map app**, we start the development server: ```shell npm run dev +``` -Now, we can open the project in the browser and explore our interactive map! 😊 +Now, we can open [localhost:5173](http://localhost:5173/) in the browser and explore our interactive map! 😊 ➡️ In [Example 2](../2-static-layers/), we'll add **static data** to our map. diff --git a/package-lock.json b/package-lock.json index 5849dedb..bdb936a9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "utopia-ui", - "version": "3.0.66", + "version": "3.0.80", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.66", + "version": "3.0.80", "license": "GPL-3.0-only", "dependencies": { "@heroicons/react": "^2.0.17", @@ -18,6 +18,7 @@ "radash": "^12.1.0", "react-colorful": "^5.6.1", "react-image-crop": "^10.1.8", + "react-inlinesvg": "^4.2.0", "react-leaflet": "^4.2.1", "react-leaflet-cluster": "^2.1.0", "react-markdown": "^9.0.1", @@ -25,7 +26,6 @@ "react-router-dom": "^6.16.0", "react-toastify": "^9.1.3", "remark-breaks": "^4.0.0", - "tw-elements": "^1.0.0", "yet-another-react-lightbox": "^3.21.7" }, "devDependencies": { @@ -1052,6 +1052,7 @@ "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==", + "dev": true, "license": "ISC", "dependencies": { "string-width": "^5.1.2", @@ -1069,6 +1070,7 @@ "version": "6.1.0", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz", "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==", + "dev": true, "license": "MIT", "engines": { "node": ">=12" @@ -1081,6 +1083,7 @@ "version": "6.2.1", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz", "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==", + "dev": true, "license": "MIT", "engines": { "node": ">=12" @@ -1093,12 +1096,14 @@ "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==", + "dev": true, "license": "MIT" }, "node_modules/@isaacs/cliui/node_modules/string-width": { "version": "5.1.2", "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz", "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==", + "dev": true, "license": "MIT", "dependencies": { "eastasianwidth": "^0.2.0", @@ -1116,6 +1121,7 @@ "version": "7.1.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz", "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==", + "dev": true, "license": "MIT", "dependencies": { "ansi-regex": "^6.0.1" @@ -1131,6 +1137,7 @@ "version": "8.1.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz", "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==", + "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^6.1.0", @@ -1158,6 +1165,7 @@ "version": "0.3.8", "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz", "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==", + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/set-array": "^1.2.1", @@ -1172,6 +1180,7 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -1181,6 +1190,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz", "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==", + "dev": true, "license": "MIT", "engines": { "node": ">=6.0.0" @@ -1190,12 +1200,14 @@ "version": "1.5.0", "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz", "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==", + "dev": true, "license": "MIT" }, "node_modules/@jridgewell/trace-mapping": { "version": "0.3.25", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz", "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==", + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", @@ -1206,6 +1218,7 @@ "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, "license": "MIT", "dependencies": { "@nodelib/fs.stat": "2.0.5", @@ -1219,6 +1232,7 @@ "version": "2.0.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, "license": "MIT", "engines": { "node": ">= 8" @@ -1228,6 +1242,7 @@ "version": "1.2.8", "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, "license": "MIT", "dependencies": { "@nodelib/fs.scandir": "2.1.5", @@ -1251,6 +1266,7 @@ "version": "0.11.0", "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz", "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==", + "dev": true, "license": "MIT", "optional": true, "engines": { @@ -1270,16 +1286,6 @@ "url": "https://opencollective.com/unts" } }, - "node_modules/@popperjs/core": { - "version": "2.11.8", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", - "license": "MIT", - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/popperjs" - } - }, "node_modules/@react-leaflet/core": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/@react-leaflet/core/-/core-2.1.0.tgz", @@ -2746,6 +2752,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -2755,6 +2762,7 @@ "version": "4.3.0", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz", "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==", + "dev": true, "license": "MIT", "dependencies": { "color-convert": "^2.0.1" @@ -2770,12 +2778,14 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true, "license": "MIT" }, "node_modules/anymatch": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, "license": "ISC", "dependencies": { "normalize-path": "^3.0.0", @@ -2789,6 +2799,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, "license": "MIT", "engines": { "node": ">=8.6" @@ -2822,6 +2833,7 @@ "version": "5.0.2", "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true, "license": "MIT" }, "node_modules/argparse": { @@ -3177,6 +3189,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==", + "dev": true, "license": "MIT" }, "node_modules/base64-js": { @@ -3214,6 +3227,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -3258,6 +3272,7 @@ "version": "3.0.3", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, "license": "MIT", "dependencies": { "fill-range": "^7.1.1" @@ -3453,6 +3468,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true, "license": "MIT", "engines": { "node": ">= 6" @@ -3583,21 +3599,6 @@ "url": "https://github.com/sponsors/wooorm" } }, - "node_modules/chart.js": { - "version": "3.9.1", - "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-3.9.1.tgz", - "integrity": "sha512-Ro2JbLmvg83gXF5F4sniaQ+lTbSv18E+TIf2cOeiH1Iqd2PGFOtem+DUufMZsCJwFE7ywPOpfXFBwRTGq7dh6w==", - "license": "MIT" - }, - "node_modules/chartjs-plugin-datalabels": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz", - "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==", - "license": "MIT", - "peerDependencies": { - "chart.js": ">=3.0.0" - } - }, "node_modules/check-error": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/check-error/-/check-error-2.1.1.tgz", @@ -3622,6 +3623,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, "license": "MIT", "dependencies": { "anymatch": "~3.1.2", @@ -3646,6 +3648,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, "license": "ISC", "dependencies": { "is-glob": "^4.0.1" @@ -3739,6 +3742,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz", "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==", + "dev": true, "license": "MIT", "dependencies": { "color-name": "~1.1.4" @@ -3751,6 +3755,7 @@ "version": "1.1.4", "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", + "dev": true, "license": "MIT" }, "node_modules/colord": { @@ -3871,6 +3876,7 @@ "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==", + "dev": true, "license": "MIT", "dependencies": { "path-key": "^3.1.0", @@ -3960,6 +3966,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, "license": "MIT", "bin": { "cssesc": "bin/cssesc" @@ -4086,12 +4093,6 @@ "node": "^12.20.0 || ^14.13.1 || >=16.0.0" } }, - "node_modules/custom-event-polyfill": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz", - "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w==", - "license": "MIT" - }, "node_modules/cypress": { "version": "14.0.3", "resolved": "https://registry.npmjs.org/cypress/-/cypress-14.0.3.tgz", @@ -4329,6 +4330,7 @@ "version": "4.3.1", "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz", "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -4388,15 +4390,6 @@ "node": ">=6" } }, - "node_modules/detect-autofill": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/detect-autofill/-/detect-autofill-1.1.4.tgz", - "integrity": "sha512-utCBQwCR/beSnADQmBC7C4tTueBBkYCl6WSpfGUkYKO/+MzPxqYGj6G4MvHzcKmH1gCTK+VunX2vaagvkRXPvA==", - "license": "MIT", - "dependencies": { - "custom-event-polyfill": "^1.0.7" - } - }, "node_modules/devlop": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz", @@ -4414,6 +4407,7 @@ "version": "1.2.2", "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true, "license": "Apache-2.0" }, "node_modules/dir-glob": { @@ -4433,6 +4427,7 @@ "version": "1.1.3", "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true, "license": "MIT" }, "node_modules/doctrine": { @@ -4544,6 +4539,7 @@ "version": "0.2.0", "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz", "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==", + "dev": true, "license": "MIT" }, "node_modules/ecc-jsbn": { @@ -4568,6 +4564,7 @@ "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", + "dev": true, "license": "MIT" }, "node_modules/end-of-stream": { @@ -5661,6 +5658,7 @@ "version": "3.3.3", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", + "dev": true, "license": "MIT", "dependencies": { "@nodelib/fs.stat": "^2.0.2", @@ -5677,6 +5675,7 @@ "version": "5.1.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, "license": "ISC", "dependencies": { "is-glob": "^4.0.1" @@ -5710,6 +5709,7 @@ "version": "1.19.0", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.0.tgz", "integrity": "sha512-7SFSRCNjBQIZH/xZR3iy5iQYR8aGBE0h3VG6/cwlbrpdciNYBMotQav8c1XI3HjHH+NikUpP53nPdlZSdWmFzA==", + "dev": true, "license": "ISC", "dependencies": { "reusify": "^1.0.4" @@ -5783,6 +5783,7 @@ "version": "7.1.1", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, "license": "MIT", "dependencies": { "to-regex-range": "^5.0.1" @@ -5870,6 +5871,7 @@ "version": "3.3.0", "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz", "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==", + "dev": true, "license": "ISC", "dependencies": { "cross-spawn": "^7.0.0", @@ -5886,6 +5888,7 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz", "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==", + "dev": true, "license": "ISC", "engines": { "node": ">=14" @@ -5960,6 +5963,7 @@ "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, "hasInstallScript": true, "license": "MIT", "optional": true, @@ -6160,6 +6164,7 @@ "version": "6.0.2", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, "license": "ISC", "dependencies": { "is-glob": "^4.0.3" @@ -6727,6 +6732,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, "license": "MIT", "dependencies": { "binary-extensions": "^2.0.0" @@ -6795,6 +6801,7 @@ "version": "2.16.1", "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz", "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==", + "dev": true, "license": "MIT", "dependencies": { "hasown": "^2.0.2" @@ -6855,6 +6862,7 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -6880,6 +6888,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -6908,6 +6917,7 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, "license": "MIT", "dependencies": { "is-extglob": "^2.1.1" @@ -6967,6 +6977,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.12.0" @@ -7200,6 +7211,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==", + "dev": true, "license": "ISC" }, "node_modules/isstream": { @@ -7285,6 +7297,7 @@ "version": "3.4.3", "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz", "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==", + "dev": true, "license": "BlueOak-1.0.0", "dependencies": { "@isaacs/cliui": "^8.0.2" @@ -7300,6 +7313,7 @@ "version": "1.21.7", "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", + "dev": true, "license": "MIT", "bin": { "jiti": "bin/jiti.js" @@ -7510,6 +7524,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz", "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==", + "dev": true, "license": "MIT", "engines": { "node": ">=10" @@ -7519,6 +7534,7 @@ "version": "1.2.4", "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true, "license": "MIT" }, "node_modules/linkify-it": { @@ -8061,6 +8077,7 @@ "version": "1.4.1", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, "license": "MIT", "engines": { "node": ">= 8" @@ -8512,6 +8529,7 @@ "version": "4.0.8", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dev": true, "license": "MIT", "dependencies": { "braces": "^3.0.3", @@ -8525,6 +8543,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, "license": "MIT", "engines": { "node": ">=8.6" @@ -8601,6 +8620,7 @@ "version": "7.1.2", "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz", "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==", + "dev": true, "license": "ISC", "engines": { "node": ">=16 || 14 >=14.17" @@ -8616,6 +8636,7 @@ "version": "2.7.0", "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, "license": "MIT", "dependencies": { "any-promise": "^1.0.0", @@ -8627,6 +8648,7 @@ "version": "3.3.8", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz", "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==", + "dev": true, "funding": [ { "type": "github", @@ -8677,6 +8699,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -8735,6 +8758,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -8744,6 +8768,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, "license": "MIT", "engines": { "node": ">= 6" @@ -9022,6 +9047,7 @@ "version": "1.0.1", "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==", + "dev": true, "license": "BlueOak-1.0.0" }, "node_modules/parent-module": { @@ -9105,6 +9131,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -9114,12 +9141,14 @@ "version": "1.0.7", "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true, "license": "MIT" }, "node_modules/path-scurry": { "version": "1.11.1", "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz", "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==", + "dev": true, "license": "BlueOak-1.0.0", "dependencies": { "lru-cache": "^10.2.0", @@ -9136,6 +9165,7 @@ "version": "10.4.3", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz", "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==", + "dev": true, "license": "ISC" }, "node_modules/path-type": { @@ -9172,12 +9202,6 @@ "dev": true, "license": "MIT" }, - "node_modules/perfect-scrollbar": { - "version": "1.5.6", - "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.6.tgz", - "integrity": "sha512-rixgxw3SxyJbCaSpo1n35A/fwI1r2rdwMKOTCg/AcG+xOEyZcE8UHVjpZMFCVImzsFoCZeJTT+M/rdEIQYO2nw==", - "license": "MIT" - }, "node_modules/performance-now": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", @@ -9189,6 +9213,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, "license": "ISC" }, "node_modules/picomatch": { @@ -9208,6 +9233,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -9217,6 +9243,7 @@ "version": "4.0.6", "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz", "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==", + "dev": true, "license": "MIT", "engines": { "node": ">= 6" @@ -9236,6 +9263,7 @@ "version": "8.5.3", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", + "dev": true, "funding": [ { "type": "opencollective", @@ -9383,6 +9411,7 @@ "version": "4.0.1", "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz", "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==", + "dev": true, "license": "MIT", "dependencies": { "camelcase-css": "^2.0.1" @@ -9402,6 +9431,7 @@ "version": "3.1.4", "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz", "integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==", + "dev": true, "license": "MIT", "dependencies": { "lilconfig": "^2.0.5", @@ -9431,6 +9461,7 @@ "version": "1.10.2", "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz", "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==", + "dev": true, "license": "ISC", "engines": { "node": ">= 6" @@ -9874,6 +9905,7 @@ "version": "6.1.2", "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz", "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==", + "dev": true, "license": "MIT", "dependencies": { "cssesc": "^3.0.0", @@ -9920,6 +9952,7 @@ "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, "license": "MIT" }, "node_modules/prelude-ls": { @@ -10110,6 +10143,7 @@ "version": "1.2.3", "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, "funding": [ { "type": "github", @@ -10126,18 +10160,6 @@ ], "license": "MIT" }, - "node_modules/quick-lru": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz", - "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==", - "license": "MIT", - "engines": { - "node": ">=10" - }, - "funding": { - "url": "https://github.com/sponsors/sindresorhus" - } - }, "node_modules/radash": { "version": "12.1.0", "resolved": "https://registry.npmjs.org/radash/-/radash-12.1.0.tgz", @@ -10182,6 +10204,14 @@ "react": "^18.3.1" } }, + "node_modules/react-from-dom": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/react-from-dom/-/react-from-dom-0.7.5.tgz", + "integrity": "sha512-CO92PmMKo/23uYPm6OFvh5CtZbMgHs/Xn+o095Lz/TZj9t8DSDhGdSOMLxBxwWI4sr0MF17KUn9yJWc5Q00R/w==", + "peerDependencies": { + "react": "16.8 - 19" + } + }, "node_modules/react-image-crop": { "version": "10.1.8", "resolved": "https://registry.npmjs.org/react-image-crop/-/react-image-crop-10.1.8.tgz", @@ -10191,6 +10221,17 @@ "react": ">=16.13.1" } }, + "node_modules/react-inlinesvg": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/react-inlinesvg/-/react-inlinesvg-4.2.0.tgz", + "integrity": "sha512-V59P6sFU7NACIbvoay9ikYKVFWyIIZFGd7w6YT1m+H7Ues0fOI6B6IftE6NPSYXXv7RHVmrncIyJeYurs3OJcA==", + "dependencies": { + "react-from-dom": "^0.7.5" + }, + "peerDependencies": { + "react": "16.8 - 19" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -10331,6 +10372,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, "license": "MIT", "dependencies": { "pify": "^2.3.0" @@ -10340,6 +10382,7 @@ "version": "3.6.0", "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, "license": "MIT", "dependencies": { "picomatch": "^2.2.1" @@ -10352,6 +10395,7 @@ "version": "2.3.1", "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz", "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==", + "dev": true, "license": "MIT", "engines": { "node": ">=8.6" @@ -10497,6 +10541,7 @@ "version": "1.22.10", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==", + "dev": true, "license": "MIT", "dependencies": { "is-core-module": "^2.16.0", @@ -10551,6 +10596,7 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz", "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==", + "dev": true, "license": "MIT", "engines": { "iojs": ">=1.0.0", @@ -10733,6 +10779,7 @@ "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, "funding": [ { "type": "github", @@ -10937,6 +10984,7 @@ "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, "license": "MIT", "dependencies": { "shebang-regex": "^3.0.0" @@ -10949,6 +10997,7 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true, "license": "MIT", "engines": { "node": ">=8" @@ -11094,6 +11143,7 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -11175,6 +11225,7 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, "license": "MIT", "dependencies": { "emoji-regex": "^8.0.0", @@ -11190,6 +11241,7 @@ "version": "4.2.3", "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz", "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==", + "dev": true, "license": "MIT", "dependencies": { "emoji-regex": "^8.0.0", @@ -11316,6 +11368,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, "license": "MIT", "dependencies": { "ansi-regex": "^5.0.1" @@ -11329,6 +11382,7 @@ "version": "6.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz", "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==", + "dev": true, "license": "MIT", "dependencies": { "ansi-regex": "^5.0.1" @@ -11420,6 +11474,7 @@ "version": "3.35.0", "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz", "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==", + "dev": true, "license": "MIT", "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", @@ -11442,6 +11497,7 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz", "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==", + "dev": true, "license": "MIT", "dependencies": { "balanced-match": "^1.0.0" @@ -11451,6 +11507,7 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, "license": "MIT", "engines": { "node": ">= 6" @@ -11460,6 +11517,7 @@ "version": "10.4.5", "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", + "dev": true, "license": "ISC", "dependencies": { "foreground-child": "^3.1.0", @@ -11480,6 +11538,7 @@ "version": "9.0.5", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz", "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==", + "dev": true, "license": "ISC", "dependencies": { "brace-expansion": "^2.0.1" @@ -11508,6 +11567,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -11742,6 +11802,7 @@ "version": "3.3.1", "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, "license": "MIT", "dependencies": { "any-promise": "^1.0.0" @@ -11751,6 +11812,7 @@ "version": "1.6.0", "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, "license": "MIT", "dependencies": { "thenify": ">= 3.1.0 < 4" @@ -11868,6 +11930,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, "license": "MIT", "dependencies": { "is-number": "^7.0.0" @@ -11923,6 +11986,7 @@ "version": "0.1.13", "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true, "license": "Apache-2.0" }, "node_modules/tsconfig-paths": { @@ -11994,99 +12058,6 @@ "node": "*" } }, - "node_modules/tw-elements": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/tw-elements/-/tw-elements-1.1.0.tgz", - "integrity": "sha512-IUr9YW2l99oTVZxuVjQg6rpuCpo6VZqbaKGYmZUNVVsoSVU/ljPpkJAY2Pn/morlXwKPhP9MTPNQMlWosqHL4w==", - "license": "AGPL", - "dependencies": { - "@popperjs/core": "^2.6.0", - "chart.js": "^3.7.1", - "chartjs-plugin-datalabels": "^2.0.0", - "deepmerge": "^4.2.2", - "detect-autofill": "^1.1.3", - "perfect-scrollbar": "^1.5.5", - "tailwindcss": "3.3.0" - } - }, - "node_modules/tw-elements/node_modules/postcss-import": { - "version": "14.1.0", - "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz", - "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==", - "license": "MIT", - "dependencies": { - "postcss-value-parser": "^4.0.0", - "read-cache": "^1.0.0", - "resolve": "^1.1.7" - }, - "engines": { - "node": ">=10.0.0" - }, - "peerDependencies": { - "postcss": "^8.0.0" - } - }, - "node_modules/tw-elements/node_modules/postcss-nested": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.0.tgz", - "integrity": "sha512-0DkamqrPcmkBDsLn+vQDIrtkSbNkv5AD/M322ySo9kqFkCIYklym2xEmWkwo+Y3/qZo34tzEPNUw4y7yMCdv5w==", - "license": "MIT", - "dependencies": { - "postcss-selector-parser": "^6.0.10" - }, - "engines": { - "node": ">=12.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - }, - "peerDependencies": { - "postcss": "^8.2.14" - } - }, - "node_modules/tw-elements/node_modules/tailwindcss": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.0.tgz", - "integrity": "sha512-hOXlFx+YcklJ8kXiCAfk/FMyr4Pm9ck477G0m/us2344Vuj355IpoEDB5UmGAsSpTBmr+4ZhjzW04JuFXkb/fw==", - "license": "MIT", - "dependencies": { - "arg": "^5.0.2", - "chokidar": "^3.5.3", - "color-name": "^1.1.4", - "didyoumean": "^1.2.2", - "dlv": "^1.1.3", - "fast-glob": "^3.2.12", - "glob-parent": "^6.0.2", - "is-glob": "^4.0.3", - "jiti": "^1.17.2", - "lilconfig": "^2.0.6", - "micromatch": "^4.0.5", - "normalize-path": "^3.0.0", - "object-hash": "^3.0.0", - "picocolors": "^1.0.0", - "postcss": "^8.0.9", - "postcss-import": "^14.1.0", - "postcss-js": "^4.0.0", - "postcss-load-config": "^3.1.4", - "postcss-nested": "6.0.0", - "postcss-selector-parser": "^6.0.11", - "postcss-value-parser": "^4.2.0", - "quick-lru": "^5.1.1", - "resolve": "^1.22.1", - "sucrase": "^3.29.0" - }, - "bin": { - "tailwind": "lib/cli.js", - "tailwindcss": "lib/cli.js" - }, - "engines": { - "node": ">=12.13.0" - }, - "peerDependencies": { - "postcss": "^8.0.9" - } - }, "node_modules/tweetnacl": { "version": "0.14.5", "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz", @@ -12470,6 +12441,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true, "license": "MIT" }, "node_modules/uuid": { @@ -12770,6 +12742,7 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, "license": "ISC", "dependencies": { "isexe": "^2.0.0" @@ -12919,6 +12892,7 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==", + "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^4.0.0", diff --git a/package.json b/package.json index 58a9ccd8..b05f967d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "utopia-ui", - "version": "3.0.66", + "version": "3.0.81", "description": "Reuseable React Components to build mapping apps for real life communities and networks", "repository": "https://github.com/utopia-os/utopia-ui", "homepage": "https://utopia-os.org/", @@ -99,6 +99,7 @@ "radash": "^12.1.0", "react-colorful": "^5.6.1", "react-image-crop": "^10.1.8", + "react-inlinesvg": "^4.2.0", "react-leaflet": "^4.2.1", "react-leaflet-cluster": "^2.1.0", "react-markdown": "^9.0.1", @@ -106,7 +107,6 @@ "react-router-dom": "^6.16.0", "react-toastify": "^9.1.3", "remark-breaks": "^4.0.0", - "tw-elements": "^1.0.0", "yet-another-react-lightbox": "^3.21.7" }, "imports": { diff --git a/rollup.config.js b/rollup.config.js index 05dd097b..dac65839 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -76,6 +76,7 @@ export default [ 'leaflet.locatecontrol/dist/L.Control.Locate.css', 'yet-another-react-lightbox', 'react-photo-album', + 'react-inlinesvg', ], }, { diff --git a/src/Components/AppShell/AppShell.tsx b/src/Components/AppShell/AppShell.tsx index be60caa7..7c2c482e 100644 --- a/src/Components/AppShell/AppShell.tsx +++ b/src/Components/AppShell/AppShell.tsx @@ -13,17 +13,19 @@ export function AppShell({ appName, children, assetsApi, + embedded, }: { appName: string children: React.ReactNode assetsApi: AssetsApi + embedded?: boolean }) { return (
- + -
+
{children}
diff --git a/src/Components/AppShell/Content.tsx b/src/Components/AppShell/Content.tsx index 9adaf028..f6d49fd9 100644 --- a/src/Components/AppShell/Content.tsx +++ b/src/Components/AppShell/Content.tsx @@ -1,3 +1,5 @@ +import { useAppState } from './hooks/useAppState' + interface ContentProps { children?: React.ReactNode } @@ -6,8 +8,12 @@ interface ContentProps { * @category AppShell */ export function Content({ children }: ContentProps) { + const appState = useAppState() + return ( -
+
{children}
) diff --git a/src/Components/AppShell/ContextWrapper.tsx b/src/Components/AppShell/ContextWrapper.tsx index ece603ad..3eba67ee 100644 --- a/src/Components/AppShell/ContextWrapper.tsx +++ b/src/Components/AppShell/ContextWrapper.tsx @@ -1,6 +1,6 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import { useContext, createContext } from 'react' -import { BrowserRouter as Router, useLocation } from 'react-router-dom' +import { BrowserRouter as Router, useInRouterContext } from 'react-router-dom' import { ToastContainer } from 'react-toastify' import { QuestsProvider } from '#components/Gaming/hooks/useQuests' @@ -15,49 +15,40 @@ import { TagsProvider } from '#components/Map/hooks/useTags' import { AppStateProvider } from './hooks/useAppState' +import type { CloseButtonProps } from 'react-toastify' + // Helper context to determine if the ContextWrapper is already present. const ContextCheckContext = createContext(false) +const CloseButton = ({ closeToast }: CloseButtonProps) => ( + +) + export const ContextWrapper = ({ children }: { children: React.ReactNode }) => { const isWrapped = useContext(ContextCheckContext) - // Check if we are already inside a Router - let location - try { - // eslint-disable-next-line react-hooks/rules-of-hooks - location = useLocation() - // eslint-disable-next-line no-catch-all/no-catch-all - } catch (e) { - location = null - } + const isInsideRouter = useInRouterContext() - // Case 1: Only the Router is missing, but ContextWrapper is already provided - if (!location && isWrapped) { - return {children} - } + let returnValue = children - // Case 2: Neither Router nor ContextWrapper is present - if (!location && !isWrapped) { - return ( - - - {children} - - - ) - } - - // Case 3: Only ContextWrapper is missing - if (location && !isWrapped) { - return ( + if (!isWrapped) { + returnValue = ( - {children} + {returnValue} ) } - // Case 4: Both Router and ContextWrapper are already present - return children + if (!isInsideRouter) { + returnValue = {returnValue} + } + + return returnValue } // eslint-disable-next-line react/prop-types @@ -87,6 +78,7 @@ export const Wrappers = ({ children }) => { draggable pauseOnHover theme='light' + closeButton={CloseButton} /> {children} diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index 10b717b9..c8d30de6 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/src/Components/AppShell/NavBar.tsx @@ -2,12 +2,14 @@ import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon' import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon' import QuestionMarkIcon from '@heroicons/react/24/outline/QuestionMarkCircleIcon' import { useEffect, useRef, useState } from 'react' -import { Link, useLocation } from 'react-router-dom' +import { Link } from 'react-router-dom' import { toast } from 'react-toastify' import { useAuth } from '#components/Auth/useAuth' import { useItems } from '#components/Map/hooks/useItems' +import { useAppState, useSetAppState } from './hooks/useAppState' + import type { Item } from '#types/Item' export default function NavBar({ appName }: { appName: string }) { @@ -16,6 +18,13 @@ export default function NavBar({ appName }: { appName: string }) { const [userProfile, setUserProfile] = useState({} as Item) const items = useItems() + const appState = useAppState() + const setAppState = useSetAppState() + + const toggleSidebar = () => { + setAppState({ sideBarOpen: !appState.sideBarOpen }) + } + useEffect(() => { const profile = user && items.find((i) => i.user_created?.id === user.id && i.layer?.userProfileLayer) @@ -24,22 +33,12 @@ export default function NavBar({ appName }: { appName: string }) { : setUserProfile({ id: crypto.randomUUID(), name: user?.first_name ?? '', text: '' }) }, [user, items]) - // useEffect(() => {}, [userProfile]) - const nameRef = useRef(null) const [nameWidth, setNameWidth] = useState(0) - const location = useLocation() - const [showNav, setShowNav] = useState(false) useEffect(() => { - showNav && nameRef.current && setNameWidth(nameRef.current.scrollWidth) - }, [nameRef, appName, showNav]) - - useEffect(() => { - const params = new URLSearchParams(location.search) - const embedded = params.get('embedded') - embedded !== 'true' && setShowNav(true) - }, [location]) + !appState.embedded && nameRef.current && setNameWidth(nameRef.current.scrollWidth) + }, [nameRef, appName, appState.embedded]) const onLogout = async () => { await toast.promise(logout(), { @@ -59,16 +58,15 @@ export default function NavBar({ appName }: { appName: string }) { }) } - if (showNav) { + if (!appState.embedded) { return ( <>
@@ -103,7 +101,7 @@ export default function NavBar({ appName }: { appName: string }) { {userProfile.image && (
- +
)} diff --git a/src/Components/AppShell/SetAppState.tsx b/src/Components/AppShell/SetAppState.tsx index ac52faea..055bc561 100644 --- a/src/Components/AppShell/SetAppState.tsx +++ b/src/Components/AppShell/SetAppState.tsx @@ -4,13 +4,22 @@ import { useSetAppState } from './hooks/useAppState' import type { AssetsApi } from '#types/AssetsApi' -export const SetAppState = ({ assetsApi }: { assetsApi: AssetsApi }) => { +export const SetAppState = ({ + assetsApi, + embedded, +}: { + assetsApi: AssetsApi + embedded?: boolean +}) => { const setAppState = useSetAppState() useEffect(() => { setAppState({ assetsApi }) - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [assetsApi]) + }, [assetsApi, setAppState]) + + useEffect(() => { + setAppState({ embedded }) + }, [embedded, setAppState]) return <> } diff --git a/src/Components/AppShell/SideBar.tsx b/src/Components/AppShell/SideBar.tsx index 94782f3c..409aea71 100644 --- a/src/Components/AppShell/SideBar.tsx +++ b/src/Components/AppShell/SideBar.tsx @@ -1,8 +1,7 @@ import ChevronRightIcon from '@heroicons/react/24/outline/ChevronRightIcon' -import { useRef, useState, useEffect } from 'react' import { NavLink, useLocation } from 'react-router-dom' -import { Sidenav, initTE } from 'tw-elements' +import { useAppState, useSetAppState } from './hooks/useAppState' import SidebarSubmenu from './SidebarSubmenu' export interface Route { @@ -13,65 +12,36 @@ export interface Route { blank?: boolean } -interface SidenavType extends HTMLElement { - toggleSlim(): void - toggle(): void -} - /** * @category AppShell */ export function SideBar({ routes, bottomRoutes }: { routes: Route[]; bottomRoutes?: Route[] }) { - // prevent react18 from calling useEffect twice - const init = useRef(false) - const location = useLocation() - const [instance, setInstance] = useState() - const [slim, setSlim] = useState(false) + const params = new URLSearchParams(window.location.search) - const toggleSlim = () => { - setSlim(!slim) - instance?.toggleSlim() + const appState = useAppState() + const setAppState = useSetAppState() + + const toggleSidebarOpen = () => { + setAppState({ sideBarOpen: !appState.sideBarOpen }) } - useEffect(() => { - if (!init.current) { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-call - initTE({ Sidenav }) - // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call - const instance = Sidenav.getInstance(document.getElementById('sidenav')) as SidenavType - setInstance(instance) - instance.toggleSlim() - init.current = true - } - }, []) - - const [embedded, setEmbedded] = useState(true) - - useEffect(() => { - const params = new URLSearchParams(location.search) - const embedded = params.get('embedded') - embedded !== 'true' && setEmbedded(false) - }, [location]) - - const params = new URLSearchParams(window.location.search) + const toggleSidebarSlim = () => { + setAppState({ sideBarSlim: !appState.sideBarSlim }) + } return (
diff --git a/src/Components/AppShell/SidebarSubmenu.tsx b/src/Components/AppShell/SidebarSubmenu.tsx index 1c12e851..347d1323 100644 --- a/src/Components/AppShell/SidebarSubmenu.tsx +++ b/src/Components/AppShell/SidebarSubmenu.tsx @@ -32,13 +32,7 @@ function SidebarSubmenu({
{/** Route header */}
setIsExpanded(!isExpanded)}> - {icon}{' '} - - {name}{' '} - + {icon} {name} {/** Submenu list */} -
+
    {submenu?.map((m, k) => { return ( diff --git a/src/Components/AppShell/hooks/useAppState.tsx b/src/Components/AppShell/hooks/useAppState.tsx index c338d8c4..794fe700 100644 --- a/src/Components/AppShell/hooks/useAppState.tsx +++ b/src/Components/AppShell/hooks/useAppState.tsx @@ -6,14 +6,18 @@ import type { AssetsApi } from '#types/AssetsApi' interface AppState { assetsApi: AssetsApi - userType: string + sideBarOpen: boolean + sideBarSlim: boolean + embedded: boolean } type UseAppManagerResult = ReturnType const initialAppState: AppState = { assetsApi: {} as AssetsApi, - userType: '', + sideBarOpen: false, + sideBarSlim: false, + embedded: false, } const AppContext = createContext({ diff --git a/src/Components/AppShell/hooks/useAssets.tsx b/src/Components/AppShell/hooks/useAssets.tsx deleted file mode 100644 index 6c04d6ab..00000000 --- a/src/Components/AppShell/hooks/useAssets.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/* eslint-disable react/prop-types */ - -/* eslint-disable @typescript-eslint/no-empty-function */ -import { useCallback, useState, createContext, useContext } from 'react' - -import type { AssetsApi } from '#types/AssetsApi' - -type UseAssetManagerResult = ReturnType - -const AssetContext = createContext({ - api: {} as AssetsApi, - setAssetsApi: () => {}, -}) - -function useAssetsManager(): { - api: AssetsApi - setAssetsApi: (api: AssetsApi) => void -} { - const [api, setApi] = useState({} as AssetsApi) - - const setAssetsApi = useCallback((api: AssetsApi) => { - setApi(api) - }, []) - - return { api, setAssetsApi } -} - -export const AssetsProvider: React.FunctionComponent<{ - children?: React.ReactNode -}> = ({ children }) => ( - {children} -) - -export const useAssetApi = (): AssetsApi => { - const { api } = useContext(AssetContext) - return api -} - -export const useSetAssetApi = (): UseAssetManagerResult['setAssetsApi'] => { - const { setAssetsApi } = useContext(AssetContext) - return setAssetsApi -} diff --git a/src/Components/AppShell/index.tsx b/src/Components/AppShell/index.tsx index d0c058df..7f27e9d5 100644 --- a/src/Components/AppShell/index.tsx +++ b/src/Components/AppShell/index.tsx @@ -1,3 +1,4 @@ export * from './AppShell' export { SideBar } from './SideBar' export { Content } from './Content' +export { default as SVG } from 'react-inlinesvg' diff --git a/src/Components/Input/ComboBoxInput.tsx b/src/Components/Input/ComboBoxInput.tsx index b6712a93..62711c4d 100644 --- a/src/Components/Input/ComboBoxInput.tsx +++ b/src/Components/Input/ComboBoxInput.tsx @@ -16,9 +16,10 @@ const ComboBoxInput = ({ id, options, value, onValueChange }: ComboBoxProps) => id={id} className='tw-form-select tw-block tw-w-full tw-py-2 tw-px-4 tw-border tw-border-gray-300 rounded-md tw-shadow-sm tw-text-sm focus:tw-outline-none focus:tw-ring-indigo-500 focus:tw-border-indigo-500 sm:tw-text-sm' onChange={handleChange} + defaultValue={value} > {options.map((o) => ( - ))} diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx index c2de677b..c1a46a54 100644 --- a/src/Components/Map/Subcomponents/AddButton.tsx +++ b/src/Components/Map/Subcomponents/AddButton.tsx @@ -1,5 +1,7 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-non-null-assertion */ +import SVG from 'react-inlinesvg' + import PlusSVG from '#assets/plus.svg' import { useLayers } from '#components/Map/hooks/useLayers' import { useHasUserPermission } from '#components/Map/hooks/usePermissions' @@ -31,7 +33,7 @@ export default function AddButton({ {canAddItems() ? (
      {layers.map( diff --git a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx index 2d54c280..e5c198af 100644 --- a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx @@ -12,8 +12,8 @@ export function FilterControl() { const [open, setOpen] = useState(false) const groupTypes = [ - { text: 'Regional Gruppe', value: 'wuerdekompass' }, - { text: 'Themen Gruppe', value: 'themenkompass' }, + { text: 'Regional Gruppe', value: 'Regional-Gruppe' }, + { text: 'Themen Gruppe', value: 'Themen-Gruppe' }, { text: 'liebevoll.jetzt', value: 'liebevoll.jetzt' }, ] diff --git a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx index 0150409a..69abc40a 100644 --- a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx @@ -1,4 +1,5 @@ import { useState } from 'react' +import SVG from 'react-inlinesvg' import LayerSVG from '#assets/layer.svg' import { useIsLayerVisible, useToggleVisibleLayer } from '#components/Map/hooks/useFilter' @@ -56,7 +57,7 @@ export function LayerControl() { setOpen(true) }} > - Layers +
    )}
diff --git a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx index 3380f6bc..ace5b9e0 100644 --- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx @@ -6,13 +6,13 @@ /* eslint-disable @typescript-eslint/no-unsafe-call */ import { control } from 'leaflet' import { useEffect, useRef, useState } from 'react' +import SVG from 'react-inlinesvg' import { useMap, useMapEvents } from 'react-leaflet' import TargetSVG from '#assets/target.svg' // eslint-disable-next-line import/no-unassigned-import import 'leaflet.locatecontrol' -import 'leaflet.locatecontrol/dist/L.Control.Locate.css' // Converts leaflet.locatecontrol to a React Component export const LocateControl = () => { @@ -59,9 +59,8 @@ export const LocateControl = () => { {loading ? ( ) : ( - x diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx index a267019e..42ea7c56 100644 --- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx @@ -14,10 +14,12 @@ import FlagIcon from '@heroicons/react/24/outline/FlagIcon' import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon' import axios from 'axios' import { LatLng, LatLngBounds, marker } from 'leaflet' -import { useEffect, useRef, useState } from 'react' +import { useRef, useState } from 'react' +import SVG from 'react-inlinesvg' import { useMap, useMapEvents } from 'react-leaflet' -import { useLocation, useNavigate } from 'react-router-dom' +import { useNavigate } from 'react-router-dom' +import { useAppState } from '#components/AppShell/hooks/useAppState' import { useDebounce } from '#components/Map/hooks/useDebounce' import { useAddFilterTag } from '#components/Map/hooks/useFilter' import { useItems } from '#components/Map/hooks/useItems' @@ -47,6 +49,7 @@ export const SearchControl = () => { const items = useItems() const leafletRefs = useLeafletRefs() const addFilterTag = useAddFilterTag() + const appState = useAppState() useMapEvents({ popupopen: () => { @@ -96,21 +99,13 @@ export const SearchControl = () => { } const searchInput = useRef(null) - const [embedded, setEmbedded] = useState(true) - - const location = useLocation() - useEffect(() => { - const params = new URLSearchParams(location.search) - const embedded = params.get('embedded') - embedded !== 'true' && setEmbedded(false) - }, [location]) return ( <> {!(windowDimensions.height < 500 && popupOpen && hideSuggestions) && (
- {embedded && } + {appState.embedded && }
{ {itemsResults.slice(0, 5).map((item) => (
{ const marker = Object.entries(leafletRefs).find((r) => r[1].item === item)?.[1] .marker @@ -182,18 +177,25 @@ export const SearchControl = () => { } }} > -
- { + code = code.replace(/fill=".*?"/g, 'fill="currentColor"') + code = code.replace(/stroke=".*?"/g, 'stroke="currentColor"') + return code + }} /> -
-
- {item.name} -
-
- {item.text} -
+ ) : ( +
+ )} +
+
+ {item.name} +
+
+ {item.text}
@@ -236,7 +238,7 @@ export const SearchControl = () => { hide() }} > - +
{geo?.properties.name ? geo?.properties.name : value} diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx index 5a2ad79d..534fe2fd 100644 --- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx +++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx @@ -83,18 +83,13 @@ export function ItemFormPopup(props: ItemFormPopupProps) { toast.error(error.toString()) } if (success) { - // eslint-disable-next-line no-console - console.log(props.item) - updateItem({ ...props.item, ...formItem }) toast.success('Item updated') } setSpinner(false) map.closePopup() } else { - const item = items.find( - (i) => i.user_created?.id === user?.id && i.layer?.id === props.layer.id, - ) + const item = items.find((i) => i.user_created?.id === user?.id && i.layer === props.layer) const uuid = crypto.randomUUID() let success = false diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx index 835da429..58690d84 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx @@ -12,7 +12,8 @@ import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon' import PencilIcon from '@heroicons/react/24/solid/PencilIcon' import TrashIcon from '@heroicons/react/24/solid/TrashIcon' -import { useState, useEffect } from 'react' +import { useState } from 'react' +import SVG from 'react-inlinesvg' import { useNavigate } from 'react-router-dom' import TargetDotSVG from '#assets/targetDot.svg' @@ -56,10 +57,6 @@ export function HeaderView({ const [imageLoaded, setImageLoaded] = useState(false) - useEffect(() => { - setImageLoaded(false) - }, [item]) - const avatar = item.image && appState.assetsApi.url + item.image + `${big ? '?width=160&heigth=160' : '?width=80&heigth=80'}` @@ -163,7 +160,7 @@ export function HeaderView({ className='!tw-text-base-content tw-cursor-pointer' onClick={setPositionCallback} > - Position + )} diff --git a/src/Components/Map/UtopiaMap.css b/src/Components/Map/UtopiaMap.css deleted file mode 100644 index a1f1a014..00000000 --- a/src/Components/Map/UtopiaMap.css +++ /dev/null @@ -1,188 +0,0 @@ -.leaflet-container { - text-align: left; - background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"); - background-repeat: no-repeat; - background-attachment: fixed; - background-position: 50% 80%; - } - - input { - box-sizing: border-box; - } - - textarea { - box-sizing: border-box; - } - - .leaflet-control-attribution { - display: none; - } - - .leaflet-control-locate { - display: none; - } - - .leaflet-data-marker { - - background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACMAAAAQCAYAAACcN8ZaAAAB3klEQVR42s3U4UdDURzG8czMXJnJ1Vwzc6VJZjaZJdlMlpQsKdmUFNOUspRSSqUolfQfr+fF98Vx5mwv9qbDx7LdznnO7/7Omej3+/+Ga0QMUYkhbvBgmhzCQxwxibIGrGEF8CQhU+LLtKQkQNqScUgjxRxTBIxbgfgD/BgnhM8kM5KTeclLQYqGkkMRBckzR8ic/mAgd5BAZplsUaqyIg2sDtHg2brUZJk5SmwopErJUWE8SpmTMhNvya60Zd/SNrR4bkeaskG4uiwRZk6yrJEYFibGAxn+scECHTmTnuVCzvmty3PHciB7bGKN6lQkzysPqIrHmpFhYbKUtckC1/Ioz4ZHuZdbuSLYiRxRpSZVWXZVxAzC0R4Ik5SQsu6w8yd5l2/5kg95I9SdXMoZQfYIUjeqEUrgOkXGPeN4TYRhxy8E+ZUf+eS7B7miIoeybVSjKDnm8u3+gH3pDTYwu1igATvs/pXqvBKiR4i2bNJfi1ZfUAnjgrOG8wY2quNzBKuU/ZS+uSFEl5O0xRGuUIlZCcw7xG5QPkeHYUSNV5WXGou2sC3rBC0LjenqCXGO0WEiTJa0Lr4KixdHBrDGuGGiRqCUpFk8pGIpQtCU7p4YPwxYxEMCk1aAMQZh8Ac8PfbIzYPJOwAAAABJRU5ErkJggg==') no-repeat; - background-position: 6px 32px; - } - - .crosshair-cursor-enabled { - cursor: crosshair; - } - - .leaflet-container { - cursor: inherit; - } - - .calendar-icon { - position: relative; - top: -35px; - left: 10px; - width: 13px; - } - - .user-icon { - position: relative; - top: -36px; - left: 10px; - width: 13px; - } - - .circle-icon { - position: relative; - top: -33px; - left: 10px; - width: 13px; - } - - .fire-icon { - position: relative; - top: -36px; - left: 10px; - width: 13px; - } - - .tree-icon { - position: relative; - top: -38px; - left: 4px; - width: 24px; - } - - .music-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; - } - - .quest-icon { - position: relative; - top: -34px; - left: 4px; - width: 24px; - } - - .drum-icon { - position: relative; - top: -38px; - left: 4px; - width: 24px; - } - - - .compass-icon { - position: relative; - top: -36.5px; - left: 4px; - width: 24px; - } - - .group-icon { - position: relative; - top: -37px; - left: 4px; - width: 24px; - } - - .liebevoll-jetzt-icon{ - position: relative; - top: -35px; - left: 4px; - width: 24px; - } - - .staff-snake-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; - } - - .flower-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; - } - - .network-icon { - position: relative; - top: -35px; - left: 4px; - width: 24px; - } - - .shop-icon { - position: relative; - top: -34px; - left: 4px; - width: 24px; - } - - .plant-icon { - position: relative; - top: -34px; - left: 4px; - width: 24px; - } - - .circle-dot-icon { - position: relative; - top: -36px; - left: 4px; - width: 24px; - } - - .leaflet-popup-scrolled { - overflow-x: hidden; - } - - .leaflet-popup-content-wrapper, .leaflet-popup-tip{ - background-color: theme('colors.base-100'); - color: theme('colors.base-content'); - - } - - .leaflet-tooltip { - background-color: theme('colors.base-100'); - color: theme('colors.base-content'); - border-width: 0px; - } - - .leaflet-tooltip { - border-radius: 1em; - transition: opacity 500ms; - transition-delay: 50ms; - - } - - .leaflet-tooltip-top::before { - border-top-color: theme('colors.base-100'); - } - - .marker-cluster span { - color: #000; - } \ No newline at end of file diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx index be014472..0832631d 100644 --- a/src/Components/Map/UtopiaMap.tsx +++ b/src/Components/Map/UtopiaMap.tsx @@ -5,7 +5,6 @@ import { ContextWrapper } from '#components/AppShell/ContextWrapper' import { UtopiaMapInner } from './UtopiaMapInner' -import 'react-toastify/dist/ReactToastify.css' import type { GeoJsonObject } from 'geojson' /** diff --git a/src/Components/Map/UtopiaMapInner.tsx b/src/Components/Map/UtopiaMapInner.tsx index 685979e7..9cea4335 100644 --- a/src/Components/Map/UtopiaMapInner.tsx +++ b/src/Components/Map/UtopiaMapInner.tsx @@ -8,11 +8,9 @@ /* eslint-disable @typescript-eslint/no-unsafe-argument */ import { Children, cloneElement, isValidElement, useEffect, useRef, useState } from 'react' import { TileLayer, useMapEvents, GeoJSON, useMap } from 'react-leaflet' -import 'leaflet/dist/leaflet.css' import MarkerClusterGroup from 'react-leaflet-cluster' import { Outlet, useLocation } from 'react-router-dom' import { toast } from 'react-toastify' -import './UtopiaMap.css' import { containsUUID } from '#utils/ContainsUUID' @@ -83,10 +81,12 @@ export function UtopiaMapInner({ , @@ -187,9 +187,7 @@ export function UtopiaMapInner({ } return ( -
+
diff --git a/src/Components/Map/setItemLocation.tsx b/src/Components/Map/setItemLocation.tsx deleted file mode 100644 index ae776994..00000000 --- a/src/Components/Map/setItemLocation.tsx +++ /dev/null @@ -1,10 +0,0 @@ -/* eslint-disable @typescript-eslint/no-unused-vars */ - -import { useMap } from 'react-leaflet' - -export const setItemLocation = () => { - // eslint-disable-next-line react-hooks/rules-of-hooks - const map = useMap() - - return
-} diff --git a/src/Components/Profile/ProfileForm.tsx b/src/Components/Profile/ProfileForm.tsx index 0b109010..6f84f689 100644 --- a/src/Components/Profile/ProfileForm.tsx +++ b/src/Components/Profile/ProfileForm.tsx @@ -5,7 +5,6 @@ import { useEffect, useState } from 'react' import { useLocation, useNavigate } from 'react-router-dom' import { toast } from 'react-toastify' -import { useAppState } from '#components/AppShell/hooks/useAppState' import { useAuth } from '#components/Auth/useAuth' import { useItems, useUpdateItem, useAddItem } from '#components/Map/hooks/useItems' import { useLayers } from '#components/Map/hooks/useLayers' @@ -62,7 +61,6 @@ export function ProfileForm() { const hasUserPermission = useHasUserPermission() const getItemTags = useGetItemTags() const items = useItems() - const appState = useAppState() const [urlParams, setUrlParams] = useState(new URLSearchParams(location.search)) @@ -146,8 +144,12 @@ export function ProfileForm() { const [template, setTemplate] = useState('') useEffect(() => { - setTemplate(item.layer?.itemType.template ?? appState.userType) - }, [appState.userType, item]) + if (item.layer?.itemType.template) setTemplate(item.layer?.itemType.template) + else { + const userLayer = layers.find((l) => l.userProfileLayer === true) + if (userLayer) setTemplate(userLayer.itemType.template) + } + }, [item, layers]) return ( <> diff --git a/src/Components/Profile/ProfileView.tsx b/src/Components/Profile/ProfileView.tsx index dd907a63..bc16e20d 100644 --- a/src/Components/Profile/ProfileView.tsx +++ b/src/Components/Profile/ProfileView.tsx @@ -12,9 +12,9 @@ import { useEffect, useState } from 'react' import { useMap } from 'react-leaflet' import { useLocation, useNavigate } from 'react-router-dom' -import { useAppState } from '#components/AppShell/hooks/useAppState' import { useClusterRef } from '#components/Map/hooks/useClusterRef' import { useItems, useRemoveItem, useUpdateItem } from '#components/Map/hooks/useItems' +import { useLayers } from '#components/Map/hooks/useLayers' import { useLeafletRefs } from '#components/Map/hooks/useLeafletRefs' import { useHasUserPermission } from '#components/Map/hooks/usePermissions' import { useSelectPosition, useSetSelectPosition } from '#components/Map/hooks/useSelectPosition' @@ -57,7 +57,7 @@ export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi const setSelectPosition = useSetSelectPosition() const clusterRef = useClusterRef() const leafletRefs = useLeafletRefs() - const appState = useAppState() + const layers = useLayers() const [attestations, setAttestations] = useState([]) @@ -162,8 +162,12 @@ export function ProfileView({ attestationApi }: { attestationApi?: ItemsApi }, [selectPosition]) useEffect(() => { - setTemplate(item?.layer?.itemType.template ?? appState.userType) - }, [appState.userType, item]) + if (item?.layer?.itemType.template) setTemplate(item.layer.itemType.template) + else { + const userLayer = layers.find((l) => l.userProfileLayer === true) + if (userLayer) setTemplate(userLayer.itemType.template) + } + }, [item, layers]) return ( <> diff --git a/src/Components/Profile/Subcomponents/AvatarWidget.tsx b/src/Components/Profile/Subcomponents/AvatarWidget.tsx index 94d1e1f4..b16f0def 100644 --- a/src/Components/Profile/Subcomponents/AvatarWidget.tsx +++ b/src/Components/Profile/Subcomponents/AvatarWidget.tsx @@ -8,7 +8,6 @@ import { ReactCrop, centerCrop, makeAspectCrop } from 'react-image-crop' import UserSVG from '#assets/user.svg' import { useAppState } from '#components/AppShell/hooks/useAppState' -import 'react-image-crop/dist/ReactCrop.css' import DialogModal from '#components/Templates/DialogModal' import type { Crop } from 'react-image-crop' diff --git a/src/Components/Profile/Subcomponents/ColorPicker.tsx b/src/Components/Profile/Subcomponents/ColorPicker.tsx index 84160fc0..b75ed28b 100644 --- a/src/Components/Profile/Subcomponents/ColorPicker.tsx +++ b/src/Components/Profile/Subcomponents/ColorPicker.tsx @@ -5,7 +5,6 @@ import { useCallback, useEffect, useRef, useState } from 'react' import { HexColorPicker } from 'react-colorful' -import './ColorPicker.css' import useClickOutside from '#components/Profile/hooks/useClickOutside' // eslint-disable-next-line react/prop-types diff --git a/src/Components/Profile/Subcomponents/GalleryView.tsx b/src/Components/Profile/Subcomponents/GalleryView.tsx index affd8515..287131ad 100644 --- a/src/Components/Profile/Subcomponents/GalleryView.tsx +++ b/src/Components/Profile/Subcomponents/GalleryView.tsx @@ -1,8 +1,6 @@ import { useState } from 'react' import { RowsPhotoAlbum } from 'react-photo-album' import ReactLightbox from 'yet-another-react-lightbox' -import 'yet-another-react-lightbox/styles.css' -import 'react-photo-album/rows.css' import { useAppState } from '#components/AppShell/hooks/useAppState' diff --git a/src/Components/Profile/Templates/TabsView.tsx b/src/Components/Profile/Templates/TabsView.tsx index c2bdcb93..bec02e24 100644 --- a/src/Components/Profile/Templates/TabsView.tsx +++ b/src/Components/Profile/Templates/TabsView.tsx @@ -51,9 +51,7 @@ export const TabsView = ({ const items = useItems() const appState = useAppState() const getUserProfile = (id: string) => { - return items.find( - (i) => i.user_created?.id === id && i.layer?.itemType.name === appState.userType, - ) + return items.find((i) => i.user_created?.id === id && i.layer?.userProfileLayer) } useEffect(() => { @@ -152,29 +150,41 @@ export const TabsView = ({
- -
-
-
- Avatar + {getUserProfile(a.user_created.id) ? ( + +
+
+
+ {getUserProfile(a.user_created.id)?.image && ( + Avatar + )} +
+
+
+
+ {getUserProfile(a.user_created.id)?.name ?? + a.user_created.first_name}{' '} +
+
+ {timeAgo(a.date_created)} +
-
-
- {getUserProfile(a.user_created.id)?.name} -
-
- {timeAgo(a.date_created)} -
+ + ) : ( +
+
{a.user_created.first_name}
+
+ {timeAgo(a.date_created)}
- + )} ))} diff --git a/src/Components/Templates/DateUserInfo.tsx b/src/Components/Templates/DateUserInfo.tsx index 4243a9c0..fcc4dacc 100644 --- a/src/Components/Templates/DateUserInfo.tsx +++ b/src/Components/Templates/DateUserInfo.tsx @@ -1,6 +1,3 @@ -/* eslint-disable @typescript-eslint/no-non-null-assertion */ -/* eslint-disable @typescript-eslint/no-unnecessary-condition */ -/* eslint-disable @typescript-eslint/prefer-optional-chain */ import { useState } from 'react' import { timeAgo } from '#utils/TimeAgo' @@ -18,7 +15,8 @@ export const DateUserInfo = ({ item }: { item: Item }) => {

setInfoExpanded(false)} - >{`${item.date_updated && item.date_updated !== item.date_created ? 'updated' : 'posted'} ${item && item.user_created && item.user_created.first_name ? `by ${item.user_created.first_name}` : ''} ${item.date_updated ? timeAgo(item.date_updated) : timeAgo(item.date_created!)}`}

+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + >{`${item.date_updated && item.date_updated !== item.date_created ? 'updated' : 'posted'} ${item.user_created?.first_name ? `by ${item.user_created.first_name}` : ''} ${item.date_updated ? timeAgo(item.date_updated) : timeAgo(item.date_created!)}`}

) : (

selectEmoji(emoji)} - className={`tw-cursor-pointer tw-text-2xl tw-p-2 hover:tw-bg-base-200 tw-rounded-md ${emoji === selectedEmoji && 'tw-bg-base-300'}`} + className={`tw-cursor-pointer tw-text-2xl tw-p-2 hover:tw-bg-base-200 tw-rounded-md ${emoji === selectedEmoji ? 'tw-bg-base-300' : ''}`} > {emoji} @@ -121,7 +120,7 @@ export const EmojiPicker = ({ {shapes.map((shape) => (

selectShape(shape)} >
@@ -133,7 +132,7 @@ export const EmojiPicker = ({ {colors.map((color) => (
selectColor(color)} >
diff --git a/src/Components/Templates/ItemCard.tsx b/src/Components/Templates/ItemCard.tsx index b876f670..f173124f 100644 --- a/src/Components/Templates/ItemCard.tsx +++ b/src/Components/Templates/ItemCard.tsx @@ -1,8 +1,3 @@ -/* eslint-disable @typescript-eslint/no-unnecessary-condition */ -/* eslint-disable @typescript-eslint/no-unsafe-call */ -/* eslint-disable @typescript-eslint/no-unsafe-return */ -/* eslint-disable @typescript-eslint/restrict-template-expressions */ -/* eslint-disable @typescript-eslint/no-explicit-any */ import { useNavigate } from 'react-router-dom' import { StartEndView, TextView } from '#components/Map' @@ -22,7 +17,7 @@ export const ItemCard = ({ i: Item loading: boolean url: string - deleteCallback: any + deleteCallback: (item: Item) => void }) => { const navigate = useNavigate() const windowDimensions = useWindowDimensions() @@ -34,8 +29,8 @@ export const ItemCard = ({ // We could have an onClick callback instead const params = new URLSearchParams(window.location.search) if (windowDimensions.width < 786 && i.position) - navigate('/' + i.id + `${params ? `?${params}` : ''}`) - else navigate(url + i.id + `${params ? `?${params}` : ''}`) + navigate('/' + i.id + `${params.size > 0 ? `?${params.toString()}` : ''}`) + else navigate(url + i.id + `${params.size > 0 ? `?${params.toString()}` : ''}`) }} > +
{children}