antontranelis/utopia-ui
1
0
Fork 0
mirror of https://github.com/utopia-os/utopia-ui.git synced 2026-03-01 12:44:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge main

Browse Source
This commit is contained in:
Maximilian Harz 2025-07-05 16:23:42 +02:00
commit fe06536184
89 changed files with 665 additions and 613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/test.build.lib.yml vendored
View File

@ -37,7 +37,7 @@ jobs:
build-examples:
if: needs.files-changed.outputs.build == 'true'
name: Test Example Apps
needs: build
needs: [files-changed, build]
runs-on: ubuntu-latest
strategy:
matrix:

10
.github/workflows/test.lint.frontend.yml vendored
View File

@ -1,10 +1,10 @@
name: test:lint:frontend
name: test:lint:app
on: push
jobs:
files-changed:
name: Detect File Changes - lint - frontend
name: Detect File Changes - lint - app
runs-on: ubuntu-latest
outputs:
lint: ${{ steps.filter.outputs.lint }}
@ -16,11 +16,11 @@ jobs:
filters: |
lint:
- '.github/workflows/**/*'
- 'frontend/**/*'
- 'app/**/*'
lint:
if: needs.files-changed.outputs.lint == 'true'
name: Lint - frontend
name: Lint - app
needs: files-changed
runs-on: ubuntu-latest
steps:
@ -30,4 +30,4 @@ jobs:
node-version-file: '.tool-versions'
- name: Lint
run: npm install && npm run test:lint:eslint
working-directory: frontend/
working-directory: app/

2
.github/workflows/test.lint.pr.yml vendored
View File

@ -30,7 +30,7 @@ jobs:
# Append a scope for each service here
scopes: |
backend
frontend
app
lib
docu
docker

0
frontend/.env → app/.env
View File

0
frontend/.eslintignore → app/.eslintignore
View File

0
frontend/.eslintrc.cjs → app/.eslintrc.cjs
View File

0
frontend/.gitignore → app/.gitignore vendored
View File

0
frontend/.prettierrc.json → app/.prettierrc.json
View File

2
frontend/docker-compose.yml → app/docker-compose.yml
View File

@ -38,7 +38,7 @@ services:
backend:
container_name: backend
build:
context: ./backend
context: ../backend
depends_on:
database:
condition: service_healthy

0
frontend/index.html → app/index.html
View File

0
frontend/localhost-cert.pem → app/localhost-cert.pem
View File

0
frontend/localhost-key.pem → app/localhost-key.pem
View File

156
frontend/package-lock.json → app/package-lock.json generated
View File

@ -18,7 +18,7 @@
"react-dom": "^18.2.0",
"react-rnd": "^10.4.1",
"react-router-dom": "^6.23.0",
"utopia-ui": "^3.0.105",
"utopia-ui": "^3.0.111",
"vite-tsconfig-paths": "^5.1.4"
},
"devDependencies": {
@ -2798,9 +2798,9 @@
}
},
"node_modules/@tailwindcss/node": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.7.tgz",
"integrity": "sha512-9rsOpdY9idRI2NH6CL4wORFY0+Q6fnx9XP9Ju+iq/0wJwGD5IByIgFmwVbyy4ymuyprj8Qh4ErxMKTUL4uNh3g==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.11.tgz",
"integrity": "sha512-yzhzuGRmv5QyU9qLNg4GTlYI6STedBWRE7NjxP45CsFYYq9taI0zJXZBMqIC/c8fViNLhmrbpSFS57EoxUmD6Q==",
"license": "MIT",
"dependencies": {
"@ampproject/remapping": "^2.3.0",
@ -2809,13 +2809,13 @@
"lightningcss": "1.30.1",
"magic-string": "^0.30.17",
"source-map-js": "^1.2.1",
"tailwindcss": "4.1.7"
"tailwindcss": "4.1.11"
}
},
"node_modules/@tailwindcss/oxide": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.7.tgz",
"integrity": "sha512-5SF95Ctm9DFiUyjUPnDGkoKItPX/k+xifcQhcqX5RA85m50jw1pT/KzjdvlqxRja45Y52nR4MR9fD1JYd7f8NQ==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.11.tgz",
"integrity": "sha512-Q69XzrtAhuyfHo+5/HMgr1lAiPP/G40OMFAnws7xcFEYqcypZmdW8eGXaOUIeOl1dzPJBPENXgbjsOyhg2nkrg==",
"hasInstallScript": true,
"license": "MIT",
"dependencies": {
@ -2826,24 +2826,24 @@
"node": ">= 10"
},
"optionalDependencies": {
"@tailwindcss/oxide-android-arm64": "4.1.7",
"@tailwindcss/oxide-darwin-arm64": "4.1.7",
"@tailwindcss/oxide-darwin-x64": "4.1.7",
"@tailwindcss/oxide-freebsd-x64": "4.1.7",
"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.7",
"@tailwindcss/oxide-linux-arm64-gnu": "4.1.7",
"@tailwindcss/oxide-linux-arm64-musl": "4.1.7",
"@tailwindcss/oxide-linux-x64-gnu": "4.1.7",
"@tailwindcss/oxide-linux-x64-musl": "4.1.7",
"@tailwindcss/oxide-wasm32-wasi": "4.1.7",
"@tailwindcss/oxide-win32-arm64-msvc": "4.1.7",
"@tailwindcss/oxide-win32-x64-msvc": "4.1.7"
"@tailwindcss/oxide-android-arm64": "4.1.11",
"@tailwindcss/oxide-darwin-arm64": "4.1.11",
"@tailwindcss/oxide-darwin-x64": "4.1.11",
"@tailwindcss/oxide-freebsd-x64": "4.1.11",
"@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.11",
"@tailwindcss/oxide-linux-arm64-gnu": "4.1.11",
"@tailwindcss/oxide-linux-arm64-musl": "4.1.11",
"@tailwindcss/oxide-linux-x64-gnu": "4.1.11",
"@tailwindcss/oxide-linux-x64-musl": "4.1.11",
"@tailwindcss/oxide-wasm32-wasi": "4.1.11",
"@tailwindcss/oxide-win32-arm64-msvc": "4.1.11",
"@tailwindcss/oxide-win32-x64-msvc": "4.1.11"
}
},
"node_modules/@tailwindcss/oxide-android-arm64": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.7.tgz",
"integrity": "sha512-IWA410JZ8fF7kACus6BrUwY2Z1t1hm0+ZWNEzykKmMNM09wQooOcN/VXr0p/WJdtHZ90PvJf2AIBS/Ceqx1emg==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.11.tgz",
"integrity": "sha512-3IfFuATVRUMZZprEIx9OGDjG3Ou3jG4xQzNTvjDoKmU9JdmoCohQJ83MYd0GPnQIu89YoJqvMM0G3uqLRFtetg==",
"cpu": [
"arm64"
],
@ -2857,9 +2857,9 @@
}
},
"node_modules/@tailwindcss/oxide-darwin-arm64": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.7.tgz",
"integrity": "sha512-81jUw9To7fimGGkuJ2W5h3/oGonTOZKZ8C2ghm/TTxbwvfSiFSDPd6/A/KE2N7Jp4mv3Ps9OFqg2fEKgZFfsvg==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.11.tgz",
"integrity": "sha512-ESgStEOEsyg8J5YcMb1xl8WFOXfeBmrhAwGsFxxB2CxY9evy63+AtpbDLAyRkJnxLy2WsD1qF13E97uQyP1lfQ==",
"cpu": [
"arm64"
],
@ -2873,9 +2873,9 @@
}
},
"node_modules/@tailwindcss/oxide-darwin-x64": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.7.tgz",
"integrity": "sha512-q77rWjEyGHV4PdDBtrzO0tgBBPlQWKY7wZK0cUok/HaGgbNKecegNxCGikuPJn5wFAlIywC3v+WMBt0PEBtwGw==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.11.tgz",
"integrity": "sha512-EgnK8kRchgmgzG6jE10UQNaH9Mwi2n+yw1jWmof9Vyg2lpKNX2ioe7CJdf9M5f8V9uaQxInenZkOxnTVL3fhAw==",
"cpu": [
"x64"
],
@ -2889,9 +2889,9 @@
}
},
"node_modules/@tailwindcss/oxide-freebsd-x64": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.7.tgz",
"integrity": "sha512-RfmdbbK6G6ptgF4qqbzoxmH+PKfP4KSVs7SRlTwcbRgBwezJkAO3Qta/7gDy10Q2DcUVkKxFLXUQO6J3CRvBGw==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.11.tgz",
"integrity": "sha512-xdqKtbpHs7pQhIKmqVpxStnY1skuNh4CtbcyOHeX1YBE0hArj2romsFGb6yUmzkq/6M24nkxDqU8GYrKrz+UcA==",
"cpu": [
"x64"
],
@ -2905,9 +2905,9 @@
}
},
"node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.7.tgz",
"integrity": "sha512-OZqsGvpwOa13lVd1z6JVwQXadEobmesxQ4AxhrwRiPuE04quvZHWn/LnihMg7/XkN+dTioXp/VMu/p6A5eZP3g==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.11.tgz",
"integrity": "sha512-ryHQK2eyDYYMwB5wZL46uoxz2zzDZsFBwfjssgB7pzytAeCCa6glsiJGjhTEddq/4OsIjsLNMAiMlHNYnkEEeg==",
"cpu": [
"arm"
],
@ -2921,9 +2921,9 @@
}
},
"node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.7.tgz",
"integrity": "sha512-voMvBTnJSfKecJxGkoeAyW/2XRToLZ227LxswLAwKY7YslG/Xkw9/tJNH+3IVh5bdYzYE7DfiaPbRkSHFxY1xA==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.11.tgz",
"integrity": "sha512-mYwqheq4BXF83j/w75ewkPJmPZIqqP1nhoghS9D57CLjsh3Nfq0m4ftTotRYtGnZd3eCztgbSPJ9QhfC91gDZQ==",
"cpu": [
"arm64"
],
@ -2937,9 +2937,9 @@
}
},
"node_modules/@tailwindcss/oxide-linux-arm64-musl": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.7.tgz",
"integrity": "sha512-PjGuNNmJeKHnP58M7XyjJyla8LPo+RmwHQpBI+W/OxqrwojyuCQ+GUtygu7jUqTEexejZHr/z3nBc/gTiXBj4A==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.11.tgz",
"integrity": "sha512-m/NVRFNGlEHJrNVk3O6I9ggVuNjXHIPoD6bqay/pubtYC9QIdAMpS+cswZQPBLvVvEF6GtSNONbDkZrjWZXYNQ==",
"cpu": [
"arm64"
],
@ -2953,9 +2953,9 @@
}
},
"node_modules/@tailwindcss/oxide-linux-x64-gnu": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.7.tgz",
"integrity": "sha512-HMs+Va+ZR3gC3mLZE00gXxtBo3JoSQxtu9lobbZd+DmfkIxR54NO7Z+UQNPsa0P/ITn1TevtFxXTpsRU7qEvWg==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.11.tgz",
"integrity": "sha512-YW6sblI7xukSD2TdbbaeQVDysIm/UPJtObHJHKxDEcW2exAtY47j52f8jZXkqE1krdnkhCMGqP3dbniu1Te2Fg==",
"cpu": [
"x64"
],
@ -2969,9 +2969,9 @@
}
},
"node_modules/@tailwindcss/oxide-linux-x64-musl": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.7.tgz",
"integrity": "sha512-MHZ6jyNlutdHH8rd+YTdr3QbXrHXqwIhHw9e7yXEBcQdluGwhpQY2Eku8UZK6ReLaWtQ4gijIv5QoM5eE+qlsA==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.11.tgz",
"integrity": "sha512-e3C/RRhGunWYNC3aSF7exsQkdXzQ/M+aYuZHKnw4U7KQwTJotnWsGOIVih0s2qQzmEzOFIJ3+xt7iq67K/p56Q==",
"cpu": [
"x64"
],
@ -2985,9 +2985,9 @@
}
},
"node_modules/@tailwindcss/oxide-wasm32-wasi": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.7.tgz",
"integrity": "sha512-ANaSKt74ZRzE2TvJmUcbFQ8zS201cIPxUDm5qez5rLEwWkie2SkGtA4P+GPTj+u8N6JbPrC8MtY8RmJA35Oo+A==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.11.tgz",
"integrity": "sha512-Xo1+/GU0JEN/C/dvcammKHzeM6NqKovG+6921MR6oadee5XPBaKOumrJCXvopJ/Qb5TH7LX/UAywbqrP4lax0g==",
"bundleDependencies": [
"@napi-rs/wasm-runtime",
"@emnapi/core",
@ -3005,7 +3005,7 @@
"@emnapi/core": "^1.4.3",
"@emnapi/runtime": "^1.4.3",
"@emnapi/wasi-threads": "^1.0.2",
"@napi-rs/wasm-runtime": "^0.2.9",
"@napi-rs/wasm-runtime": "^0.2.11",
"@tybys/wasm-util": "^0.9.0",
"tslib": "^2.8.0"
},
@ -3014,9 +3014,9 @@
}
},
"node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.7.tgz",
"integrity": "sha512-HUiSiXQ9gLJBAPCMVRk2RT1ZrBjto7WvqsPBwUrNK2BcdSxMnk19h4pjZjI7zgPhDxlAbJSumTC4ljeA9y0tEw==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.11.tgz",
"integrity": "sha512-UgKYx5PwEKrac3GPNPf6HVMNhUIGuUh4wlDFR2jYYdkX6pL/rn73zTq/4pzUm8fOjAn5L8zDeHp9iXmUGOXZ+w==",
"cpu": [
"arm64"
],
@ -3030,9 +3030,9 @@
}
},
"node_modules/@tailwindcss/oxide-win32-x64-msvc": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.7.tgz",
"integrity": "sha512-rYHGmvoHiLJ8hWucSfSOEmdCBIGZIq7SpkPRSqLsH2Ab2YUNgKeAPT1Fi2cx3+hnYOrAb0jp9cRyode3bBW4mQ==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.11.tgz",
"integrity": "sha512-YfHoggn1j0LK7wR82TOucWc5LDCguHnoS879idHekmmiR7g9HUtMw9MI0NHatS28u/Xlkfi9w5RJWgz2Dl+5Qg==",
"cpu": [
"x64"
],
@ -3046,17 +3046,17 @@
}
},
"node_modules/@tailwindcss/vite": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.7.tgz",
"integrity": "sha512-tYa2fO3zDe41I7WqijyVbRd8oWT0aEID1Eokz5hMT6wShLIHj3yvwj9XbfuloHP9glZ6H+aG2AN/+ZrxJ1Y5RQ==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.11.tgz",
"integrity": "sha512-RHYhrR3hku0MJFRV+fN2gNbDNEh3dwKvY8XJvTxCSXeMOsCRSr+uKvDWQcbizrHgjML6ZmTE5OwMrl5wKcujCw==",
"license": "MIT",
"dependencies": {
"@tailwindcss/node": "4.1.7",
"@tailwindcss/oxide": "4.1.7",
"tailwindcss": "4.1.7"
"@tailwindcss/node": "4.1.11",
"@tailwindcss/oxide": "4.1.11",
"tailwindcss": "4.1.11"
},
"peerDependencies": {
"vite": "^5.2.0 || ^6"
"vite": "^5.2.0 || ^6 || ^7"
}
},
"node_modules/@tanstack/query-core": {
@ -5248,9 +5248,9 @@
"license": "ISC"
},
"node_modules/enhanced-resolve": {
"version": "5.18.1",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.1.tgz",
"integrity": "sha512-ZSW3ma5GkcQBIpwZTSRAI8N71Uuwgs93IezB7mf7R60tC8ZbJideoDNKjHn2O9KIlx6rkGTTEk1xUCK2E1Y2Yg==",
"version": "5.18.2",
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.2.tgz",
"integrity": "sha512-6Jw4sE1maoRJo3q8MsSIn2onJFbLTOjY9hlx4DZXmOKvLRd1Ok2kXmAGXaafL2+ijsJZ1ClYbl/pmqr9+k4iUQ==",
"license": "MIT",
"dependencies": {
"graceful-fs": "^4.2.4",
@ -9230,9 +9230,9 @@
}
},
"node_modules/postcss": {
"version": "8.5.3",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
"integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
"version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"funding": [
{
"type": "opencollective",
@ -9249,7 +9249,7 @@
],
"license": "MIT",
"dependencies": {
"nanoid": "^3.3.8",
"nanoid": "^3.3.11",
"picocolors": "^1.1.1",
"source-map-js": "^1.2.1"
},
@ -10762,9 +10762,9 @@
}
},
"node_modules/tailwindcss": {
"version": "4.1.7",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.7.tgz",
"integrity": "sha512-kr1o/ErIdNhTz8uzAYL7TpaUuzKIE6QPQ4qmSdxnoX/lo+5wmUHQA6h3L5yIqEImSRnAAURDirLu/BgiXGPAhg==",
"version": "4.1.11",
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.11.tgz",
"integrity": "sha512-2E9TBm6MDD/xKYe+dvJZAmg3yxIEDNRc0jwlNyDg/4Fil2QcSLjFKGVff0lAf1jjeaArlG/M75Ey/EYr/OJtBA==",
"license": "MIT"
},
"node_modules/tapable": {
@ -11465,9 +11465,9 @@
}
},
"node_modules/utopia-ui": {
"version": "3.0.105",
"resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.105.tgz",
"integrity": "sha512-QihvnHeR0R9GXIZ/Mx1EBlsYBthhykM/jPdfN/5bHyyBAXGX0jm+6msEySo0jFWASxPr2G4rhImJJzeRxPyUhw==",
"version": "3.0.111",
"resolved": "https://registry.npmjs.org/utopia-ui/-/utopia-ui-3.0.111.tgz",
"integrity": "sha512-bUqgPCWyS3IcyegweXbRLt2SVYM9cWWLvLst9gcEaezfF4Egz4yXOq7mYmjBl+PpCt0d8EY6Tj8VhdfLxg63qg==",
"license": "GPL-3.0-only",
"dependencies": {
"@heroicons/react": "^2.0.17",
@ -11498,7 +11498,7 @@
"react-leaflet-cluster": "^2.1.0",
"react-markdown": "^9.0.1",
"react-photo-album": "^3.0.2",
"react-router-dom": "^6.16.0",
"react-router-dom": "^6.23.0",
"react-toastify": "^9.1.3",
"remark-breaks": "^4.0.0",
"tiptap-markdown": "^0.8.10",

4
frontend/package.json → app/package.json
View File

@ -20,8 +20,8 @@
"react-dom": "^18.2.0",
"react-rnd": "^10.4.1",
"react-router-dom": "^6.23.0",
"utopia-ui": "^3.0.105",
"vite-tsconfig-paths": "^5.1.4"
"vite-tsconfig-paths": "^5.1.4",
"utopia-ui": "^3.0.111"
},
"devDependencies": {
"@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",

0
frontend/public/3markers-globe.svg → app/public/3markers-globe.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 22 KiB

After

Width:  |  Height:  |  Size: 22 KiB

0
frontend/public/bg1.webp → app/public/bg1.webp
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 682 KiB

After

Width:  |  Height:  |  Size: 682 KiB

0
frontend/public/github.svg → app/public/github.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

0
frontend/public/opencollective.svg → app/public/opencollective.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 487 B

After

Width:  |  Height:  |  Size: 487 B

0
frontend/public/style.css → app/public/style.css
View File

0
frontend/src/App.css → app/src/App.css
View File

12
frontend/src/App.tsx → app/src/App.tsx
View File

@ -129,7 +129,7 @@ function App() {
icon: (
<SVG
src={'https://api.utopia-lab.org/assets/' + l.indexIcon}
className='w-6 h-6'
className='tw:w-6 tw:h-6'
preProcessor={(code: string) =>
code.replace(/stroke=".*?"/g, 'stroke="currentColor"')
}
@ -160,7 +160,7 @@ function App() {
if (map && layers)
return (
<div className='App overflow-x-hidden'>
<div className='App tw:overflow-x-hidden'>
<AuthProvider userApi={userApi} inviteApi={inviteApi}>
<AppShell
assetsApi={new assetsApi('https://api.utopia-lab.org/assets/')}
@ -253,18 +253,18 @@ function App() {
)
else if (map == 'null' && !loading)
return (
<div className='flex items-center justify-center h-screen'>
<div className='tw:flex tw:items-center tw:justify-center tw:h-screen'>
<div>
<p className='text-xl font-semibold'>This map does not exist</p>
<p className='tw:text-xl tw:font-semibold'>This map does not exist</p>
</div>
</div>
)
else
return (
<div className='outer'>
<img className='pulse-loader opacity h-[96px]' src='/3markers-globe.svg' />
<img className='pulse-loader tw-h-[96px]' src='/3markers-globe.svg' />
<br />
<span className='loader'></span>
<span className='tw:loader'></span>
</div>
)
}

22
frontend/src/ModalContent.tsx → app/src/ModalContent.tsx
View File

@ -2,13 +2,12 @@
/* eslint-disable @typescript-eslint/restrict-plus-operands */
/* eslint-disable @typescript-eslint/no-unsafe-assignment */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { useEffect, useState } from 'react'
import { TextView } from 'utopia-ui'
interface ChapterProps {
clickAction1?: () => void
clickAction2?: () => void
clickAction1: () => void
map?: any
}
@ -21,20 +20,23 @@ export function Welcome1({ clickAction1, map }: ChapterProps) {
</>
) : (
<>
<h3 className='font-bold text-lg'>Welcome to {map?.name || 'Utopia Map'}</h3>
<h3 className='tw:font-bold tw:text-lg'>Welcome to {map?.name || 'Utopia Map'}</h3>
<img
className='float-right w-32 m-2'
className='tw:float-right tw:w-32 tw:m-2'
src={'https://api.utopia-lab.org/assets/' + map.logo}
></img>
<p className='py-3'>
<p className='tw:py-3'>
It is a tool for collaborative mapping to connect local initiatives, people and events.
</p>
<p className='py-1'>
<p className='tw:py-1'>
Join us and grow the network by adding projects and events to the map.
</p>
<p className='py-1'>Create your personal profile and place it on the map.</p>
<div className='grid'>
<label className='btn btn-primary place-self-end mt-4' onClick={() => clickAction1!()}>
<p className='tw:py-1'>Create your personal profile and place it on the map.</p>
<div className='tw:grid'>
<label
className='tw:btn tw:btn-primary tw:place-self-end tw:mt-4'
onClick={() => clickAction1()}
>
Close
</label>
</div>

0
frontend/src/api/assetsApi.ts → app/src/api/assetsApi.ts
View File

0
frontend/src/api/directus.ts → app/src/api/directus.ts
View File

0
frontend/src/api/inviteApi.ts → app/src/api/inviteApi.ts
View File

0
frontend/src/api/itemsApi.ts → app/src/api/itemsApi.ts
View File

0
frontend/src/api/layersApi.ts → app/src/api/layersApi.ts
View File

0
frontend/src/api/mapApi.ts → app/src/api/mapApi.ts
View File

0
frontend/src/api/permissionsApi.ts → app/src/api/permissionsApi.ts
View File

0
frontend/src/api/readUserApi.ts → app/src/api/readUserApi.ts
View File

0
frontend/src/api/refiBcnApi.ts → app/src/api/refiBcnApi.ts
View File

0
frontend/src/api/userApi.ts → app/src/api/userApi.ts
View File

0
frontend/src/config/index.ts → app/src/config/index.ts
View File

5
frontend/src/index.css → app/src/index.css
View File

@ -5,4 +5,7 @@
@theme {
--animate-fade: fadeOut 1s ease-in-out;
}
}
@import 'tailwindcss' prefix(tw);
@source '../../lib/src/';

1
frontend/src/main.tsx → app/src/main.tsx
View File

@ -1,4 +1,3 @@
/* eslint-disable import/default */
/* eslint-disable import/extensions */
/* eslint-disable import/no-named-as-default-member */
/* eslint-disable @typescript-eslint/no-non-null-assertion */

0
frontend/src/pages/Concept.tsx → app/src/pages/Concept.tsx
View File

0
frontend/src/pages/ConceptDE.tsx → app/src/pages/ConceptDE.tsx
View File

0
frontend/src/pages/Landingpage.tsx → app/src/pages/Landingpage.tsx
View File

8
frontend/src/pages/MapContainer.tsx → app/src/pages/MapContainer.tsx
View File

@ -84,6 +84,8 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
defaultTheme={map.default_theme}
showZoomControl={map.show_zoom_control}
expandLayerControl={map.expand_layer_control}
tileServerUrl={map.tile_server_url}
tileServerAttribution={map.tile_server_attribution}
>
{layers &&
apis &&
@ -124,11 +126,11 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
<PopupStartEndInput showLabels={false}></PopupStartEndInput>
)}
{layer.itemType.show_text_input && (
<div className='mt-4'>
<div className='tw:mt-4'>
<PopupTextAreaInput
dataField='text'
placeholder={'Text ...'}
style='tw-h-40'
style='tw:h-40'
></PopupTextAreaInput>
</div>
)}
@ -136,7 +138,7 @@ function MapContainer({ layers, map }: { layers: LayerProps[]; map: any }) {
// layer.public_edit_items && <PopupCheckboxInput dataField={'public_edit'} label={'public edit'}/>
}
{layer.itemType.custom_text && (
<div className='flex justify-center'>
<div className='tw:flex tw:justify-center'>
<p>{layer.itemType.custom_text}</p>
</div>
)}

0
frontend/src/pages/data.ts → app/src/pages/data.ts
View File

8
frontend/src/routes/sidebar.tsx → app/src/routes/sidebar.tsx
View File

@ -1,6 +1,8 @@
import { MapIcon } from '@heroicons/react/24/outline'
import { SVG } from 'utopia-ui'
import type { Route } from '#components/AppShell/SideBar'
export const routes = [
{
path: '/',
@ -43,7 +45,7 @@ export const getBottomRoutes = (currentUrl: string) => {
const url = new URL(currentUrl)
const isEmbedded = url.searchParams.get('embedded') === 'true'
const bottomRoutes = [
const bottomRoutes: Route[] = [
// Other routes can be added here
]
@ -51,13 +53,13 @@ export const getBottomRoutes = (currentUrl: string) => {
bottomRoutes.push(
{
path: 'https://github.com/utopia-os/utopia-ui', // url
icon: <SVG src='/github.svg' className='w-6 h-6' />,
icon: <SVG src='/github.svg' className='tw:w-6 tw:h-6' />,
name: 'GitHub', // name that appear in Sidebar
blank: true,
},
{
path: 'https://opencollective.com/utopia-project', // url
icon: <SVG src='/opencollective.svg' className='w-6 h-6' />,
icon: <SVG src='/opencollective.svg' className='tw:w-6 tw:h-6' />,
name: 'Open Collective', // name that appear in Sidebar
blank: true,
},

0
frontend/src/vite-env.d.ts → app/src/vite-env.d.ts vendored
View File

0
frontend/tailwind.config.js → app/tailwind.config.js
View File

49
app/tsconfig.json Normal file
View File

@ -0,0 +1,49 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
],
"utopia-ui": [
"../lib/src"
],
"#components/*": [
"../lib/src/Components/*"
],
"#utils/*": [
"../lib/src/Utils/*"
],
"#types/*": [
"../lib/src/types/*"
],
"#assets/*": [
"../lib/src/assets/*"
],
"#src/*": [
"../lib/src/*"
],
"#root/*": [
"../lib/*"
],
}
},
"include": [
"src"
],
"references": [
{
"path": "./tsconfig.node.json"
}
]
}

0
frontend/tsconfig.node.json → app/tsconfig.node.json
View File

0
frontend/video_preview.png → app/video_preview.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 535 KiB

After

Width:  |  Height:  |  Size: 535 KiB

61
app/vite.config.ts Normal file
View File

@ -0,0 +1,61 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import fs from 'fs'
import path from 'path'
import tsConfigPaths from 'vite-tsconfig-paths'
// __dirname-Ersatz für ESModules
const __dirname = path.dirname(new URL(import.meta.url).pathname)
export default defineConfig({
server: {
host: true,
port: 5174,
/**
* https: {
* key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
* cert: fs.readFileSync(path.resolve(__dirname, 'localhost-cert.pem')),
* },
*/
},
plugins: [react(), tailwindcss(), tsConfigPaths()],
resolve: {
dedupe: ['react', 'react-dom', 'react-router-dom'],
alias: {
'utopia-ui': path.resolve(__dirname, '../lib/src'),
'#components': path.resolve(__dirname, '../lib/src/Components'),
'#utils': path.resolve(__dirname, '../lib/src/Utils'),
'#types': path.resolve(__dirname, '../lib/src/types'),
'#assets': path.resolve(__dirname, '../lib/src/assets'),
'#src': path.resolve(__dirname, '../lib/src'),
'#root': path.resolve(__dirname, '../lib'),
},
},
build: {
sourcemap: true,
rollupOptions: {
output: {
manualChunks: (id) => {
if (id.includes('lib/src')) {
return 'utopia-ui'
}
if (id.includes('node_modules')) {
if (id.includes('react')) {
return 'react'
}
if (id.includes('tiptap')) {
return 'tiptap'
}
if (id.includes('leaflet')) {
return 'leaflet'
}
if (id.includes('lib/node_modules')) {
return 'utopia-ui-vendor'
} else return 'vendor'
}
},
},
},
},
})

2
backend/README.md
View File

@ -1,4 +1,4 @@
In order to pull data from your locally running backend (see [docker-compose](../docker-compose.yml)) to your local harddrive, you can run the following command
In order to pull data from your locally running backend (see [docker-compose](../app/docker-compose.yml)) to your local harddrive, you can run the following command
```
npx directus-sync pull \

98
frontend/src/pages/Calendar.tsx
View File

@ -1,98 +0,0 @@
/* eslint-disable import/default */
/* eslint-disable @typescript-eslint/restrict-template-expressions */
import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/react/24/outline'
import {
add,
eachDayOfInterval,
endOfMonth,
endOfWeek,
format,
getDay,
isSameMonth,
isToday,
parse,
startOfToday,
startOfWeek,
} from 'date-fns'
import React, { useState } from 'react'
import { MapOverlayPage } from 'utopia-ui'
export const Calendar = () => {
const today = startOfToday()
const days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
const colStartClasses = [
'',
'col-start-2',
'col-start-3',
'col-start-4',
'col-start-5',
'col-start-6',
'col-start-7',
]
const [currMonth, setCurrMonth] = useState(() => format(today, 'MMM-yyyy'))
const firstDayOfMonth = parse(currMonth, 'MMM-yyyy', new Date())
const daysInMonth = eachDayOfInterval({
start: startOfWeek(firstDayOfMonth),
end: endOfWeek(endOfMonth(firstDayOfMonth)),
})
const getPrevMonth = (event: React.MouseEvent<SVGSVGElement>) => {
event.preventDefault()
const firstDayOfPrevMonth = add(firstDayOfMonth, { months: -1 })
setCurrMonth(format(firstDayOfPrevMonth, 'MMM-yyyy'))
}
const getNextMonth = (event: React.MouseEvent<SVGSVGElement>) => {
event.preventDefault()
const firstDayOfNextMonth = add(firstDayOfMonth, { months: 1 })
setCurrMonth(format(firstDayOfNextMonth, 'MMM-yyyy'))
}
return (
<MapOverlayPage
backdrop
className='tw-max-h-[calc(100dvh-96px)] tw-h-fit md:tw-w-[calc(50%-32px)] tw-w-[calc(100%-32px)] max-w-lg'
>
<div className='flex items-center justify-between'>
<p className='font-semibold text-xl'>{format(firstDayOfMonth, 'MMMM yyyy')}</p>
<div className='flex items-center justify-evenly gap-6 sm:gap-12'>
<ChevronLeftIcon className='w-6 h-6 cursor-pointer' onClick={getPrevMonth} />
<ChevronRightIcon className='w-6 h-6 cursor-pointer' onClick={getNextMonth} />
</div>
</div>
<hr className='my-6' />
<div className='grid grid-cols-7 gap-6 sm:gap-12 place-items-center'>
{days.map((day, idx) => {
return (
<div key={idx} className='font-semibold'>
{capitalizeFirstLetter(day)}
</div>
)
})}
</div>
<div className='grid grid-cols-7 gap-4 sm:gap-12 mt-8 place-items-center'>
{daysInMonth.map((day, idx) => {
return (
<div key={idx} className={colStartClasses[getDay(day)]}>
<p
className={`cursor-pointer flex items-center justify-center font-semibold h-8 w-8 rounded-full hover:text-white ${
isSameMonth(day, today) ? 'text-current' : 'text-gray-500'
} ${!isToday(day) && 'hover:bg-primary-content'} ${
isToday(day) && 'bg-primary text-white!'
}`}
>
{format(day, 'd')}
</p>
</div>
)
})}
</div>
</MapOverlayPage>
)
}
const capitalizeFirstLetter = (string: string) => {
return string
}

30
frontend/tsconfig.json
View File

@ -1,30 +0,0 @@
{
"compilerOptions": {
"target": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
/* Paths */
"baseUrl": ".",
"paths": {
"@/*": ["src/*"],
}
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json" }]
}

42
frontend/vite.config.ts
View File

@ -1,42 +0,0 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'
import tsConfigPaths from 'vite-tsconfig-paths'
import fs from 'fs'
import path from 'path'
// __dirname-Ersatz für ESModules
const __dirname = path.dirname(new URL(import.meta.url).pathname)
export default defineConfig({
server: {
host: true,
port: 5174,
/**
* https: {
* key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
* cert: fs.readFileSync(path.resolve(__dirname, 'localhost-cert.pem')),
* },
*/
},
plugins: [react(), tailwindcss(), tsConfigPaths()],
build: {
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules/utopia-ui/dist/Profile') && /\.(esm|cjs)\.js$/.test(id)) {
return 'profile-form'
}
if (id.includes('node_modules/utopia-ui/')) {
return 'utopia-ui-vendor'
}
if (id.includes('node_modules/')) {
return 'vendor'
}
},
},
},
},
})

6
lib/package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "utopia-ui",
"version": "3.0.106",
"version": "3.0.111",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "utopia-ui",
"version": "3.0.106",
"version": "3.0.111",
"license": "GPL-3.0-only",
"dependencies": {
"@heroicons/react": "^2.0.17",
@ -38,7 +38,7 @@
"react-markdown": "^9.0.1",
"react-photo-album": "^3.0.2",
"react-qr-code": "^2.0.16",
"react-router-dom": "^6.16.0",
"react-router-dom": "^6.23.0",
"react-toastify": "^9.1.3",
"remark-breaks": "^4.0.0",
"tiptap-markdown": "^0.8.10",

4
lib/package.json
View File

@ -1,6 +1,6 @@
{
"name": "utopia-ui",
"version": "3.0.106",
"version": "3.0.111",
"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/",
@ -126,7 +126,7 @@
"react-markdown": "^9.0.1",
"react-photo-album": "^3.0.2",
"react-qr-code": "^2.0.16",
"react-router-dom": "^6.16.0",
"react-router-dom": "^6.23.0",
"react-toastify": "^9.1.3",
"remark-breaks": "^4.0.0",
"tiptap-markdown": "^0.8.10",

4
lib/src/Components/Auth/index.tsx
View File

@ -1,5 +1,7 @@
export { AuthProvider, UserApi, UserItem } from './useAuth'
export { AuthProvider } from './useAuth'
export { LoginPage } from './LoginPage'
export { SignupPage } from './SignupPage'
export { RequestPasswordPage } from './RequestPasswordPage'
export { SetNewPasswordPage } from './SetNewPasswordPage'
export type { UserItem } from '#types/UserItem'
export type { UserApi } from '#types/UserApi'

3
lib/src/Components/Auth/useAuth.tsx
View File

@ -4,9 +4,6 @@ import type { InviteApi } from '#types/InviteApi'
import type { UserApi } from '#types/UserApi'
import type { UserItem } from '#types/UserItem'
export type { UserApi } from '#types/UserApi'
export type { UserItem } from '#types/UserItem'
interface AuthProviderProps {
userApi: UserApi
inviteApi: InviteApi

3
lib/src/Components/Input/Autocomplete.tsx
View File

@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable @typescript-eslint/no-unsafe-return */
/* eslint-disable @typescript-eslint/no-unsafe-member-access */
/* eslint-disable @typescript-eslint/no-unsafe-call */
@ -35,8 +34,6 @@ export const Autocomplete = ({
const inputRef = useRef<HTMLInputElement>()
const getSuggestionValue = (suggestion) => suggestion.name
const getSuggestions = (value) => {
const inputValue = value.trim().toLowerCase()
const inputLength = inputValue.length

9
lib/src/Components/Input/InputLabel.tsx Normal file
View File

@ -0,0 +1,9 @@
export const InputLabel = ({ label }: { label: string }) => {
return (
<label className='tw:label tw:pb-1'>
<span className='tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1'>
{label}:
</span>
</label>
)
}

10
lib/src/Components/Input/RichTextEditor.tsx
View File

@ -10,6 +10,7 @@ import { StarterKit } from '@tiptap/starter-kit'
import { useEffect } from 'react'
import { Markdown } from 'tiptap-markdown'
import { InputLabel } from './InputLabel'
import { TextEditorMenu } from './TextEditorMenu'
interface RichTextEditorProps {
@ -27,7 +28,6 @@ interface RichTextEditorProps {
*/
export function RichTextEditor({
labelTitle,
labelStyle,
containerStyle,
defaultValue,
placeholder,
@ -88,13 +88,7 @@ export function RichTextEditor({
<div
className={`tw:form-control tw:w-full tw:flex tw:flex-col tw:min-h-0 ${containerStyle ?? ''}`}
>
{labelTitle ? (
<label className='tw:label tw:pb-1'>
<span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
{labelTitle}
</span>
</label>
) : null}
{labelTitle ? <InputLabel label={labelTitle} /> : null}
<div
className={`editor-wrapper tw:border-base-content/20 tw:rounded-box tw:border tw:flex tw:flex-col tw:flex-1 tw:min-h-0`}
>

12
lib/src/Components/Input/TextAreaInput.tsx
View File

@ -1,8 +1,9 @@
import { useEffect, useRef, useState } from 'react'
import { InputLabel } from './InputLabel'
interface TextAreaProps {
labelTitle?: string
labelStyle?: string
containerStyle?: string
dataField?: string
inputStyle?: string
@ -18,7 +19,6 @@ interface TextAreaProps {
export function TextAreaInput({
labelTitle,
dataField,
labelStyle,
containerStyle,
inputStyle,
defaultValue,
@ -43,13 +43,7 @@ export function TextAreaInput({
return (
<div className={`tw:form-control tw:w-full ${containerStyle ?? ''}`}>
{labelTitle ? (
<label className='tw:label'>
<span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
{labelTitle}
</span>
</label>
) : null}
{labelTitle ? <InputLabel label={labelTitle} /> : null}
<textarea
required={required}
ref={ref}

12
lib/src/Components/Input/TextInput.tsx
View File

@ -1,8 +1,9 @@
import { useEffect, useState } from 'react'
import { InputLabel } from './InputLabel'
interface InputTextProps {
labelTitle?: string
labelStyle?: string
type?: string
dataField?: string
containerStyle?: string
@ -20,7 +21,6 @@ interface InputTextProps {
*/
export function TextInput({
labelTitle,
labelStyle,
type,
dataField,
containerStyle,
@ -48,13 +48,7 @@ export function TextInput({
return (
<div className={`tw:form-control ${containerStyle ?? ''}`}>
{labelTitle ? (
<label className='tw:label'>
<span className={`tw:label-text tw:text-base-content ${labelStyle ?? ''}`}>
{labelTitle}
</span>
</label>
) : null}
{labelTitle ? <InputLabel label={labelTitle} /> : null}
<input
required={required}
pattern={pattern}

5
lib/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap
View File

@ -5,12 +5,13 @@ exports[`<TextAreaInput /> > labelTitle > sets label 1`] = `
class="tw:form-control tw:w-full "
>
<label
class="tw:label"
class="tw:label tw:pb-1"
>
<span
class="tw:label-text tw:text-base-content "
class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
>
My Title
:
</span>
</label>
<textarea

5
lib/src/Components/Input/__snapshots__/TextInput.spec.tsx.snap
View File

@ -5,12 +5,13 @@ exports[`<TextInput /> > labelTitle > sets label 1`] = `
class="tw:form-control "
>
<label
class="tw:label"
class="tw:label tw:pb-1"
>
<span
class="tw:label-text tw:text-base-content "
class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
>
My Title
:
</span>
</label>
<input

2
lib/src/Components/Input/index.tsx
View File

@ -1,2 +1,4 @@
export { TextAreaInput } from './TextAreaInput'
export { TextInput } from './TextInput'
export { InputLabel } from './InputLabel'
export { RichTextEditor } from './RichTextEditor'

2
lib/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx
View File

@ -74,7 +74,7 @@ export function HeaderView({
<>
<div className='tw:flex tw:flex-row'>
<div className={'tw:grow tw:max-w-[calc(100%-60px)] }'}>
<div className='flex items-center'>
<div className='tw:flex tw:items-center'>
{avatar && (
<div className='tw:avatar'>
<div

4
lib/src/Components/Map/Subcomponents/ItemPopupComponents/PopupStartEndInput.tsx
View File

@ -6,7 +6,6 @@ import type { Item } from '#types/Item'
export interface StartEndInputProps {
item?: Item
showLabels?: boolean
labelStyle?: string
updateStartValue?: (value: string) => void
updateEndValue?: (value: string) => void
containerStyle?: string
@ -18,7 +17,6 @@ export interface StartEndInputProps {
export const PopupStartEndInput = ({
item,
showLabels = true,
labelStyle,
updateStartValue,
updateEndValue,
containerStyle,
@ -31,7 +29,6 @@ export const PopupStartEndInput = ({
dataField='start'
inputStyle='tw:text-sm tw:px-2'
labelTitle={showLabels ? 'Start' : ''}
labelStyle={labelStyle}
defaultValue={item && item.start ? item.start.substring(0, 10) : ''}
autocomplete='one-time-code'
updateFormValue={updateStartValue}
@ -42,7 +39,6 @@ export const PopupStartEndInput = ({
dataField='end'
inputStyle='tw:text-sm tw:px-2'
labelTitle={showLabels ? 'End' : ''}
labelStyle={labelStyle}
defaultValue={item && item.end ? item.end.substring(0, 10) : ''}
autocomplete='one-time-code'
updateFormValue={updateEndValue}

20
lib/src/Components/Map/Subcomponents/ItemPopupComponents/TextView.tsx
View File

@ -129,15 +129,17 @@ export const TextView = ({
}
return (
<Markdown
className={'markdown tw:text-map tw:leading-map tw:text-sm'}
remarkPlugins={[remarkBreaks]}
components={{
a: Link,
}}
>
{replacedText}
</Markdown>
<div translate='no'>
<Markdown
className={'markdown tw:text-map tw:leading-map tw:text-sm'}
remarkPlugins={[remarkBreaks]}
components={{
a: Link,
}}
>
{replacedText}
</Markdown>
</div>
)
}

2
lib/src/Components/Map/Subcomponents/ItemViewPopup.tsx
View File

@ -100,7 +100,7 @@ export const ItemViewPopup = forwardRef((props: ItemViewPopupProps, ref: any) =>
}}
loading={loading}
/>
<div className='tw:overflow-y-auto tw:overflow-x-hidden tw:max-h-64 fade'>
<div className='tw:overflow-hidden tw:max-h-64 fade'>
{props.children ?? <TextView text={props.item.text} itemId={props.item.id} />}
</div>
<div className='tw:flex tw:-mb-1 tw:flex-row tw:mr-2 tw:mt-1'>

2
lib/src/Components/Map/Subcomponents/SelectPosition.tsx
View File

@ -20,7 +20,7 @@ export const SelectPosition = ({
</label>
<div className='tw:alert tw:bg-base-100 tw:text-base-content'>
<div>
{selectNewItemPosition && 'text' in selectNewItemPosition && (
{selectNewItemPosition && 'layer' in selectNewItemPosition && (
<span className='tw:text-lg'>
Select new position of <b>{selectNewItemPosition.name}</b> on the map!
</span>

8
lib/src/Components/Map/UtopiaMap.tsx
View File

@ -56,6 +56,8 @@ function UtopiaMap({
defaultTheme,
donationWidget,
expandLayerControl,
tileServerUrl,
tileServerAttribution,
}: {
/** height of the map (default '500px') */
height?: string
@ -85,6 +87,10 @@ function UtopiaMap({
donationWidget?: boolean
/** open layer control on map initialisation */
expandLayerControl?: boolean
/** configure a custom tile server */
tileServerUrl?: string
/** configure a custom tile server attribution */
tileServerAttribution?: string
}) {
return (
<ContextWrapper>
@ -104,6 +110,8 @@ function UtopiaMap({
showThemeControl={showThemeControl}
defaultTheme={defaultTheme}
expandLayerControl={expandLayerControl}
tileServerUrl={tileServerUrl}
tileServerAttribution={tileServerAttribution}
>
{children}
</UtopiaMapInner>

11
lib/src/Components/Map/UtopiaMapInner.tsx
View File

@ -55,6 +55,8 @@ export function UtopiaMapInner({
defaultTheme = '',
donationWidget,
expandLayerControl,
tileServerUrl,
tileServerAttribution,
}: {
children?: React.ReactNode
geo?: GeoJsonObject
@ -65,6 +67,8 @@ export function UtopiaMapInner({
showThemeControl?: boolean
defaultTheme?: string
expandLayerControl?: boolean
tileServerUrl?: string
tileServerAttribution?: string
}) {
const selectNewItemPosition = useSelectPosition()
const setSelectNewItemPosition = useSetSelectPosition()
@ -278,8 +282,11 @@ export function UtopiaMapInner({
</Control>
<TileLayer
maxZoom={19}
attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
url='https://tile.osmand.net/hd/{z}/{x}/{y}.png'
attribution={
tileServerAttribution ??
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}
url={tileServerUrl ?? 'https://tile.osmand.net/hd/{z}/{x}/{y}.png'}
/>
<MarkerClusterGroup
ref={(r) => setClusterRef(r as any)}

57
lib/src/Components/Map/hooks/useSelectPosition.tsx
View File

@ -69,7 +69,7 @@ function useSelectPositionManager(): {
})
setSelectPosition(null)
}
if ('text' in selectPosition) {
if ('layer' in selectPosition) {
// if selectPosition is an Item
const position =
mapClicked?.position.lng &&
@ -101,9 +101,9 @@ function useSelectPositionManager(): {
success = true
} catch (error: unknown) {
if (error instanceof Error) {
toast.update(toastId, { render: error.message, type: 'error' })
toast.update(toastId, { render: error.message, type: 'error', autoClose: 5000 })
} else if (typeof error === 'string') {
toast.update(toastId, { render: error, type: 'error' })
toast.update(toastId, { render: error, type: 'error', autoClose: 5000 })
} else {
throw error
}
@ -115,6 +115,7 @@ function useSelectPositionManager(): {
render: 'Item position updated',
type: 'success',
isLoading: false,
autoClose: 5000,
})
setSelectPosition(null)
setMarkerClicked(null)
@ -125,6 +126,8 @@ function useSelectPositionManager(): {
render: "you don't have permission to add items to " + markerClicked?.name,
type: 'error',
isLoading: false,
autoClose: 5000,
closeButton: true,
})
}
}
@ -140,16 +143,34 @@ function useSelectPositionManager(): {
success = true
} catch (error: unknown) {
if (error instanceof Error) {
toast.update(toastId, { render: error.message, type: 'error', isLoading: false })
toast.update(toastId, {
render: error.message,
type: 'error',
isLoading: false,
autoClose: 5000,
closeButton: true,
})
} else if (typeof error === 'string') {
toast.update(toastId, { render: error, type: 'error', isLoading: false })
toast.update(toastId, {
render: error,
type: 'error',
isLoading: false,
autoClose: 5000,
closeButton: true,
})
} else {
throw error
}
}
if (success) {
updateItem(updatedItem)
toast.update(toastId, { render: 'Item position updated', type: 'success', isLoading: false })
toast.update(toastId, {
render: 'Item position updated',
type: 'success',
isLoading: false,
autoClose: 5000,
closeButton: true,
})
}
}
@ -168,16 +189,34 @@ function useSelectPositionManager(): {
success = true
} catch (error: unknown) {
if (error instanceof Error) {
toast.update(toastId, { render: error.message, type: 'error', isLoading: false })
toast.update(toastId, {
render: error.message,
type: 'error',
isLoading: false,
autoClose: 5000,
closeButton: true,
})
} else if (typeof error === 'string') {
toast.update(toastId, { render: error, type: 'error', isLoading: false })
toast.update(toastId, {
render: error,
type: 'error',
isLoading: false,
autoClose: 5000,
closeButton: true,
})
} else {
throw error
}
}
if (success) {
updateItem({ ...markerClicked, relations: newRelations })
toast.update(toastId, { render: 'Item linked', type: 'success', isLoading: false })
toast.update(toastId, {
render: 'Item linked',
type: 'success',
isLoading: false,
autoClose: 5000,
closeButton: true,
})
}
}
}

16
lib/src/Components/Profile/Subcomponents/ContactInfoForm.tsx
View File

@ -1,4 +1,4 @@
import { TextInput } from '#components/Input'
import { InputLabel, TextInput } from '#components/Input'
import type { FormState } from '#types/FormState'
@ -12,12 +12,7 @@ export const ContactInfoForm = ({
return (
<div className='tw:mt-2 tw:space-y-2'>
<div>
<label
htmlFor='email'
className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
>
Email-Adresse (Kontakt):
</label>
<InputLabel label='Email-Adresse (Kontakt)' />
<TextInput
placeholder='Email'
type='email'
@ -33,12 +28,7 @@ export const ContactInfoForm = ({
</div>
<div>
<label
htmlFor='telephone'
className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
>
Telefonnummer (Kontakt):
</label>
<InputLabel label='Telefonnummer (Kontakt)' />
<TextInput
placeholder='Telefonnummer'
type='tel'

9
lib/src/Components/Profile/Subcomponents/CrowdfundingForm.tsx
View File

@ -1,4 +1,4 @@
import { TextInput } from '#components/Input'
import { TextInput, InputLabel } from '#components/Input'
import type { FormState } from '#types/FormState'
@ -12,12 +12,7 @@ export const CrowdfundingForm = ({
return (
<div className='tw:mt-4 tw:space-y-4'>
<div>
<label
htmlFor='OpenCollectiveSlug'
className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
>
Open Collective Slug:
</label>
<InputLabel label='Open Collective Slug' />
<TextInput
placeholder='Open Collective Slug'
type='text'

17
lib/src/Components/Profile/Subcomponents/GalleryForm.tsx
View File

@ -5,6 +5,7 @@ import { useDropzone } from 'react-dropzone'
import { BiSolidImage } from 'react-icons/bi'
import { useAppState } from '#components/AppShell/hooks/useAppState'
import { InputLabel } from '#components/Input/InputLabel'
import DialogModal from '#components/Templates/DialogModal'
import { getImageDimensions } from '#utils/getImageDimensions'
@ -13,6 +14,7 @@ import type { FormState } from '#types/FormState'
interface Props {
state: FormState
setState: React.Dispatch<React.SetStateAction<FormState>>
hideInputLabel?: boolean
}
const compressionOptions = {
@ -21,7 +23,7 @@ const compressionOptions = {
useWebWorker: true,
}
export const GalleryForm = ({ state, setState }: Props) => {
export const GalleryForm = ({ state, setState, hideInputLabel = false }: Props) => {
const appState = useAppState()
const [imageSelectedToDelete, setImageSelectedToDelete] = useState<number | null>(null)
@ -76,7 +78,9 @@ export const GalleryForm = ({ state, setState }: Props) => {
const images = state.gallery
.map((image) => ({
src: appState.assetsApi.url + `${image.directus_files_id.id}.jpg`,
src:
typeof image.directus_files_id !== 'string' &&
appState.assetsApi.url + `${image.directus_files_id.id}.jpg`,
state: 'uploaded',
}))
.concat(
@ -94,12 +98,13 @@ export const GalleryForm = ({ state, setState }: Props) => {
}
return (
<>
<div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4'>
<div className='tw:mt-3'>
{!hideInputLabel && <InputLabel label='Media' />}
<div className='tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4'>
{images.map((image, index) => (
<div key={index} className='tw:relative'>
<img
src={image.src}
src={image.src || undefined}
alt={`Gallery image ${index + 1}`}
className={`tw:w-full tw:h-full tw:object-cover tw:rounded-lg ${
image.state === 'uploading' ? 'tw:opacity-50' : ''
@ -159,6 +164,6 @@ export const GalleryForm = ({ state, setState }: Props) => {
</div>
</div>
</DialogModal>
</>
</div>
)
}

19
lib/src/Components/Profile/Subcomponents/GalleryView.tsx
View File

@ -23,12 +23,19 @@ export const GalleryView = ({ item }: { item: Item }) => {
const [index, setIndex] = useState(-1)
const appState = useAppState()
const images =
item.gallery?.map(({ directus_files_id: { id, type, width, height } }, index) => ({
src: `${appState.assetsApi.url}${id}${getExtension(type)}`,
width,
height,
index,
})) ?? []
item.gallery?.flatMap((g, index) => {
const file = g.directus_files_id
if (typeof file === 'string') return []
const { id, type, width, height } = file
return [
{
src: `${appState.assetsApi.url}${id}${getExtension(type)}`,
width,
height,
index,
},
]
}) ?? []
if (images.length > 0)
return (

15
lib/src/Components/Profile/Subcomponents/GroupSubheaderForm.tsx
View File

@ -1,6 +1,7 @@
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
import { useEffect } from 'react'
import { InputLabel } from '#components/Input'
import ComboBoxInput from '#components/Input/ComboBoxInput'
import type { FormState } from '#types/FormState'
@ -51,12 +52,7 @@ export const GroupSubheaderForm = ({
return (
<div className='tw:grid tw:grid-cols-1 tw:@sm:grid-cols-2 tw:gap-2'>
<div>
<label
htmlFor='status'
className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
>
Gruppenstatus:
</label>
<InputLabel label='Gruppenstatus' />
<ComboBoxInput
id='status'
options={groupStates || []}
@ -70,12 +66,7 @@ export const GroupSubheaderForm = ({
/>
</div>
<div>
<label
htmlFor='groupType'
className='tw:block tw:text-sm tw:font-medium tw:text-gray-500 tw:mb-1'
>
Gruppenart:
</label>
<InputLabel label='Gruppenart' />
<ComboBoxInput
id='groupType'
options={groupTypes?.map((gt) => gt.groupTypes_id.name) || []}

14
lib/src/Components/Profile/Subcomponents/ProfileTextForm.tsx
View File

@ -4,7 +4,7 @@
import { useEffect, useState } from 'react'
import { RichTextEditor } from '#components/Input/RichTextEditor'
import { InputLabel, RichTextEditor } from '#components/Input'
import { MarkdownHint } from './MarkdownHint'
@ -13,11 +13,9 @@ import type { FormState } from '#types/FormState'
export const ProfileTextForm = ({
state,
setState,
// Is this really used?
dataField,
heading,
size,
hideInputLabel,
}: {
state: FormState
setState: React.Dispatch<React.SetStateAction<FormState>>
@ -36,15 +34,10 @@ export const ProfileTextForm = ({
return (
<div
className={`tw:max-h-124 tw:md:max-h-full tw:flex tw:flex-col tw:mt-2 ${size === 'full' ? 'tw:flex-1 tw:min-h-42' : 'tw:h-28 tw:flex-none'}`}
className={`tw:max-h-124 tw:md:max-h-full tw:flex tw:flex-col tw:mt-3 ${size === 'full' ? 'tw:flex-1 tw:min-h-42' : 'tw:h-30 tw:flex-none'}`}
>
<div className='tw:flex tw:justify-between tw:items-center'>
<label
htmlFor='nextAppointment'
className='tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1'
>
{heading || 'Text'}:
</label>
<InputLabel label={heading || 'Text'} />
<MarkdownHint />
</div>
<RichTextEditor
@ -58,7 +51,6 @@ export const ProfileTextForm = ({
}))
}
showMenu={size === 'full'}
labelStyle={hideInputLabel ? 'tw:hidden' : ''}
containerStyle={size === 'full' ? 'tw:flex-1' : 'tw:h-24 tw:flex-none'}
/>
</div>

408
lib/src/Components/Profile/Subcomponents/__snapshots__/GalleryForm.spec.tsx.snap
View File

@ -3,99 +3,113 @@
exports[`GalleryForm > with previous images > renders 1`] = `
<div>
<div
class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
class="tw:mt-3"
>
<div
class="tw:relative"
<label
class="tw:label tw:pb-1"
>
<img
alt="Gallery image 1"
class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
src="undefined1.jpg"
/>
<button
class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
type="button"
<span
class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
>
<svg
aria-hidden="true"
class="tw:h-5 tw:w-5"
data-slot="icon"
data-testid="trash"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
Media
:
</span>
</label>
<div
class="tw:relative"
class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
>
<img
alt="Gallery image 2"
class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
src="undefined2.jpg"
/>
<button
class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
type="button"
<div
class="tw:relative"
>
<svg
aria-hidden="true"
class="tw:h-5 tw:w-5"
data-slot="icon"
data-testid="trash"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
<img
alt="Gallery image 1"
class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
src="undefined1.jpg"
/>
<button
class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
type="button"
>
<path
clip-rule="evenodd"
d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
<div
class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
role="presentation"
tabindex="0"
>
<input
accept="image/jpeg,image/png"
data-testid="gallery-upload-input"
multiple=""
style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
tabindex="-1"
type="file"
/>
<div>
<svg
class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
<svg
aria-hidden="true"
class="tw:h-5 tw:w-5"
data-slot="icon"
data-testid="trash"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
<div
class="tw:relative"
>
<img
alt="Gallery image 2"
class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg "
src="undefined2.jpg"
/>
<button
class="tw:m-2 tw:bg-red-500 tw:text-white tw:p-2 tw:rounded-full tw:absolute tw:top-0 tw:right-0 tw:hover:bg-red-600 tw:cursor-pointer"
type="button"
>
<path
d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
/>
</svg>
<span
class="tw:text-center"
>
Upload Image
</span>
<svg
aria-hidden="true"
class="tw:h-5 tw:w-5"
data-slot="icon"
data-testid="trash"
fill="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M16.5 4.478v.227a48.816 48.816 0 0 1 3.878.512.75.75 0 1 1-.256 1.478l-.209-.035-1.005 13.07a3 3 0 0 1-2.991 2.77H8.084a3 3 0 0 1-2.991-2.77L4.087 6.66l-.209.035a.75.75 0 0 1-.256-1.478A48.567 48.567 0 0 1 7.5 4.705v-.227c0-1.564 1.213-2.9 2.816-2.951a52.662 52.662 0 0 1 3.369 0c1.603.051 2.815 1.387 2.815 2.951Zm-6.136-1.452a51.196 51.196 0 0 1 3.273 0C14.39 3.05 15 3.684 15 4.478v.113a49.488 49.488 0 0 0-6 0v-.113c0-.794.609-1.428 1.364-1.452Zm-.355 5.945a.75.75 0 1 0-1.5.058l.347 9a.75.75 0 1 0 1.499-.058l-.346-9Zm5.48.058a.75.75 0 1 0-1.498-.058l-.347 9a.75.75 0 0 0 1.5.058l.345-9Z"
fill-rule="evenodd"
/>
</svg>
</button>
</div>
<div
class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
role="presentation"
tabindex="0"
>
<input
accept="image/jpeg,image/png"
data-testid="gallery-upload-input"
multiple=""
style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
tabindex="-1"
type="file"
/>
<div>
<svg
class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
/>
</svg>
<span
class="tw:text-center"
>
Upload Image
</span>
</div>
</div>
</div>
</div>
@ -105,77 +119,91 @@ exports[`GalleryForm > with previous images > renders 1`] = `
exports[`GalleryForm > with uploading images > renders 1`] = `
<div>
<div
class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
class="tw:mt-3"
>
<div
class="tw:relative"
<label
class="tw:label tw:pb-1"
>
<img
alt="Gallery image 1"
class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
src="blob-url-placeholder"
/>
<span
class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
/>
</div>
class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
>
Media
:
</span>
</label>
<div
class="tw:relative"
class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
>
<img
alt="Gallery image 2"
class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
src="blob-url-placeholder"
/>
<span
class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
/>
</div>
<div
class="tw:relative"
>
<img
alt="Gallery image 3"
class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
src="blob-url-placeholder"
/>
<span
class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
/>
</div>
<div
class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
role="presentation"
tabindex="0"
>
<input
accept="image/jpeg,image/png"
data-testid="gallery-upload-input"
multiple=""
style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
tabindex="-1"
type="file"
/>
<div>
<svg
class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
/>
</svg>
<div
class="tw:relative"
>
<img
alt="Gallery image 1"
class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
src="blob-url-placeholder"
/>
<span
class="tw:text-center"
>
Upload Image
</span>
class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
/>
</div>
<div
class="tw:relative"
>
<img
alt="Gallery image 2"
class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
src="blob-url-placeholder"
/>
<span
class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
/>
</div>
<div
class="tw:relative"
>
<img
alt="Gallery image 3"
class="tw:w-full tw:h-full tw:object-cover tw:rounded-lg tw:opacity-50"
src="blob-url-placeholder"
/>
<span
class="tw:loading tw:loading-spinner tw:absolute tw:inset-0 tw:m-auto"
/>
</div>
<div
class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
role="presentation"
tabindex="0"
>
<input
accept="image/jpeg,image/png"
data-testid="gallery-upload-input"
multiple=""
style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
tabindex="-1"
type="file"
/>
<div>
<svg
class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
/>
</svg>
<span
class="tw:text-center"
>
Upload Image
</span>
</div>
</div>
</div>
</div>
@ -185,41 +213,55 @@ exports[`GalleryForm > with uploading images > renders 1`] = `
exports[`GalleryForm > without previous images > renders 1`] = `
<div>
<div
class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4 tw:my-4"
class="tw:mt-3"
>
<div
class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
role="presentation"
tabindex="0"
<label
class="tw:label tw:pb-1"
>
<input
accept="image/jpeg,image/png"
data-testid="gallery-upload-input"
multiple=""
style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
tabindex="-1"
type="file"
/>
<div>
<svg
class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
/>
</svg>
<span
class="tw:text-center"
>
Upload Image
</span>
<span
class="tw:block tw:text-sm tw:font-medium tw:text-base-content/50 tw:mb-1"
>
Media
:
</span>
</label>
<div
class="tw:grid tw:grid-cols-2 tw:@md:grid-cols-3 tw:@lg:grid-cols-4 tw:gap-4"
>
<div
class="tw:flex tw:flex-col tw:items-center tw:justify-center tw:text-base-content/50 tw:w-full tw:h-full tw:cursor-pointer tw:card tw:card-body tw:border tw:border-current/50 tw:border-dashed tw:bg-base-200"
role="presentation"
tabindex="0"
>
<input
accept="image/jpeg,image/png"
data-testid="gallery-upload-input"
multiple=""
style="border: 0px; clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; margin: 0px -1px -1px 0px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
tabindex="-1"
type="file"
/>
<div>
<svg
class="tw:h-16 tw:w-16 tw:m-auto tw:mb-2"
fill="currentColor"
height="1em"
stroke="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M19.999 4h-16c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm-13.5 3a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3zm5.5 10h-7l4-5 1.5 2 3-4 5.5 7h-7z"
/>
</svg>
<span
class="tw:text-center"
>
Upload Image
</span>
</div>
</div>
</div>
</div>

2
lib/src/Components/Profile/Templates/TabsForm.tsx
View File

@ -44,7 +44,6 @@ export const TabsForm = ({
<PopupStartEndInput
item={item}
showLabels={true}
labelStyle={'tw:text-base-content/50'}
updateEndValue={(e) =>
setState((prevState) => ({
...prevState,
@ -62,7 +61,6 @@ export const TabsForm = ({
<RichTextEditor
labelTitle='About'
labelStyle={'tw:text-base-content/50'}
placeholder='about ...'
defaultValue={item?.text ? item.text : ''}
updateFormValue={(v) =>

1
lib/src/Components/Profile/index.tsx
View File

@ -1,4 +1,3 @@
export { UserSettings } from './UserSettings'
// export { PlusButton } from './Subcomponents/PlusButton'
export { ProfileView } from './ProfileView'
export { ProfileForm } from './ProfileForm'

2
lib/src/Components/Profile/itemFunctions.ts
View File

@ -200,7 +200,7 @@ export const onUpdateItem = async (
...(state.needs.length > 0 && { needs: needsUpdates }),
...(state.openCollectiveSlug && { openCollectiveSlug: state.openCollectiveSlug }),
gallery: state.gallery.map((i) => ({
directus_files_id: i.directus_files_id.id,
directus_files_id: typeof i.directus_files_id !== 'string' && i.directus_files_id.id,
})),
}

3
lib/src/Components/Templates/OverlayItemsIndexPage.tsx
View File

@ -32,7 +32,6 @@ import type { Item } from '#types/Item'
export const OverlayItemsIndexPage = ({
url,
layerName,
parameterField,
}: {
layerName: string
url: string
@ -40,8 +39,6 @@ export const OverlayItemsIndexPage = ({
}) => {
const [loading, setLoading] = useState<boolean>(false)
const [addItemPopupOpen, setAddItemPopupOpen] = useState<boolean>(false)
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const parameterFieldDummy = parameterField
const tabRef = useRef<HTMLFormElement>(null)

27
lib/src/assets/css/leaflet.css
View File

@ -1,6 +1,29 @@
.leaflet-control-attribution {
display: none;
.leaflet-control-attribution{
color: #000 !important;
background-color: white/50 !important;
border-radius: 4px;
padding: 0 4px;
z-index: 400 !important;
font-size: 10px;
opacity: 0.5;
}
.leaflet-control-attribution a{
color: #000 !important;
}
.leaflet-attribution-flag {
display: none !important;
}
.leaflet-control-attribution a:not([href*="openstreetmap"]) {
display: none !important;
}
/* 2) Entfernt den Trenner “|” (liegt im span[aria-hidden]) */
.leaflet-control-attribution span[aria-hidden="true"] {
display: none !important;
}
.leaflet-control-locate {
display: none;

1
lib/src/index.tsx
View File

@ -9,6 +9,7 @@ export * from './Components/Templates'
export * from './Components/Input'
export * from './Components/Item'
export * from './Components/Onboarding'
export * from './Components/Profile'
declare global {
interface Window {

14
lib/src/types/Item.d.ts vendored
View File

@ -8,12 +8,14 @@ import type { Point } from 'geojson'
type TagIds = { tags_id: string }[]
interface GalleryItem {
directus_files_id: {
id: string
width: number
height: number
type: string
}
directus_files_id:
| {
id: string
width: number
height: number
type: string
}
| string
}
interface ItemSecret {

2
lib/src/types/UtopiaMapProps.d.ts vendored
View File

@ -18,4 +18,6 @@ export interface UtopiaMapProps {
donationWidget?: boolean
defaultTheme?: string
expandLayerControl?: boolean
tileServerUrl?: string
tileServerAttribution?: string
}

11
lib/tsconfig.json
View File

@ -1,24 +1,19 @@
{
"extends": "../tsconfig.base.json",
"compilerOptions": {
"outDir": "dist",
"declaration": true,
"declarationDir": "dist/types", // 🔹 Muss innerhalb von dist/ liegen
"emitDeclarationOnly": true, // Nur `.d.ts` generieren, kein JavaScript
"module": "esnext",
"target": "ESNext",
"lib": ["es6", "dom","es2015", "es2016", "es2017", "es2020"],
"sourceMap": false,
"allowJs": false,
"jsx": "react-jsx",
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"strictNullChecks": true,
"noUnusedLocals": false,
"noUnusedLocals": true,
"noUnusedParameters": true,
"allowSyntheticDefaultImports": true,
"skipLibCheck": true,
"paths": {
"#assets/*": ["./src/assets/*"],
"#components/*": ["./src/Components/*"],
@ -29,7 +24,7 @@
}
},
"include": ["src", "vite.config.ts", "setupTest.ts", "cypress.config.ts", "cypress/support/commands.ts", "cypress/support/component.ts"],
"exclude": ["node_modules", "dist", "example", "rollup.config.mjss"],
"exclude": ["node_modules", "dist", "example"],
"typeRoots": [
"./src/types",
"./node_modules/@types/"

10
package-lock.json generated Normal file
View File

@ -0,0 +1,10 @@
{
"name": "utopia-map",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "utopia-map"
}
}
}

12
tsconfig.base.json Normal file
View File

@ -0,0 +1,12 @@
{
"compilerOptions": {
"target": "ESNext",
"module": "ESNext",
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"moduleResolution": "Node",
"jsx": "react-jsx",
"esModuleInterop": true,
"skipLibCheck": true,
"strictNullChecks": true,
}
}