From 9668f8d417a46eb468ceea8b3793f8ceebf544ba Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Mon, 24 Feb 2025 15:58:31 +0100 Subject: [PATCH 01/13] refactor(source): svg files & heroicons (#144) * support for svg files Support to load svg files and include them as bas64 encoded images in the bundle. * navbar svgs * replace NavBar SVGs with heroicons * layercontrol icons * lint fix * quest - questionmark * plusbutton - plus * linkeditem - elipse-vertical - link-slash * contactinfo - envelope & phone * avatar - arrow-up-tray * ActionButton - link & plus * StartEndView - calendar x2 * HeaderView - ellipse-vertical & pencil & trash * SidebarControl - bars-3 * SearchControl - flag & magnifying-glass * GratitudeControl - heart * FilterControl - funnel * AddButton - plus * reduce test coverage requirements * remove wrongfully commit dummy svg * updated obsolete package.lock * migrate more svgs from code to file, use hero icons where it seems applicable * moved share icons to subfolder * fixed layout --------- Co-authored-by: Anton Tranelis --- .eslintrc.cjs | 2 +- package-lock.json | 420 +++++++++++++++++- package.json | 3 + rollup.config.js | 2 + src/Components/AppShell/NavBar.tsx | 34 +- src/Components/Gaming/Quests.tsx | 16 +- .../Map/Subcomponents/AddButton.tsx | 12 +- .../Subcomponents/Controls/FilterControl.tsx | 16 +- .../Controls/GratitudeControl.tsx | 16 +- .../Subcomponents/Controls/LayerControl.tsx | 16 +- .../Subcomponents/Controls/LocateControl.tsx | 16 +- .../Subcomponents/Controls/QuestControl.tsx | 10 +- .../Subcomponents/Controls/SearchControl.tsx | 34 +- .../Subcomponents/Controls/SidebarControl.tsx | 16 +- .../ItemPopupComponents/HeaderView.tsx | 46 +- .../ItemPopupComponents/StartEndView.tsx | 32 +- .../Profile/Subcomponents/ActionsButton.tsx | 24 +- .../Profile/Subcomponents/AvatarWidget.tsx | 34 +- .../Profile/Subcomponents/ContactInfoView.tsx | 29 +- .../Subcomponents/LinkedItemsHeaderView.tsx | 22 +- .../Profile/Subcomponents/MarkdownHint.tsx | 15 +- .../Profile/Subcomponents/PlusButton.tsx | 13 +- .../Profile/Subcomponents/SocialShareBar.tsx | 24 +- .../Subcomponents/SocialShareButton.tsx | 56 +-- src/assets/chevron.svg | 8 + src/assets/fist.svg | 8 + src/assets/layer.svg | 13 + src/assets/markdown.svg | 12 + src/assets/plus.svg | 1 + src/assets/share/clipboard.svg | 1 + src/assets/share/facebook.svg | 3 + src/assets/share/linkedin.svg | 4 + src/assets/share/telegram.svg | 9 + src/assets/share/twitter.svg | 3 + src/assets/share/whatsapp.svg | 9 + src/assets/share/xing.svg | 3 + src/assets/target.svg | 8 + src/assets/targetDot.svg | 10 + src/assets/user.svg | 1 + src/types/SVG.d.ts | 7 + tsconfig.json | 1 + vite.config.ts | 3 +- 42 files changed, 611 insertions(+), 401 deletions(-) create mode 100644 src/assets/chevron.svg create mode 100644 src/assets/fist.svg create mode 100644 src/assets/layer.svg create mode 100644 src/assets/markdown.svg create mode 100644 src/assets/plus.svg create mode 100644 src/assets/share/clipboard.svg create mode 100644 src/assets/share/facebook.svg create mode 100644 src/assets/share/linkedin.svg create mode 100644 src/assets/share/telegram.svg create mode 100644 src/assets/share/twitter.svg create mode 100644 src/assets/share/whatsapp.svg create mode 100644 src/assets/share/xing.svg create mode 100644 src/assets/target.svg create mode 100644 src/assets/targetDot.svg create mode 100644 src/assets/user.svg create mode 100644 src/types/SVG.d.ts diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 8c746e27..e4a3299b 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -80,7 +80,7 @@ module.exports = { 'import/no-relative-parent-imports': [ 'error', { - ignore: ['#[src,types,root,components,utils]/*'], + ignore: ['#[src,types,root,components,utils,assets]/*'], }, ], 'import/no-self-import': 'error', diff --git a/package-lock.json b/package-lock.json index d6ad1280..3f3684c4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "utopia-ui", - "version": "3.0.60", + "version": "3.0.64", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "utopia-ui", - "version": "3.0.60", + "version": "3.0.64", "license": "GPL-3.0-only", "dependencies": { "@heroicons/react": "^2.0.17", @@ -70,12 +70,14 @@ "rollup": "^4.34.6", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-svg": "^2.0.0", "tailwindcss": "^3.3.1", "typedoc": "^0.27.6", "typedoc-plugin-coverage": "^3.4.1", "typedoc-plugin-missing-exports": "^3.1.0", "typescript": "^5.7.3", "vite": "^6.0.11", + "vite-plugin-svgr": "^4.3.0", "vitest": "^3.0.5" }, "peerDependencies": { @@ -1718,6 +1720,244 @@ "dev": true, "license": "MIT" }, + "node_modules/@svgr/babel-plugin-add-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-attribute": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz", + "integrity": "sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-remove-jsx-empty-expression": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz", + "integrity": "sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-replace-jsx-attribute-value": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz", + "integrity": "sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-dynamic-title": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz", + "integrity": "sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-svg-em-dimensions": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz", + "integrity": "sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-react-native-svg": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz", + "integrity": "sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-plugin-transform-svg-component": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz", + "integrity": "sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/babel-preset": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/babel-preset/-/babel-preset-8.1.0.tgz", + "integrity": "sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==", + "dev": true, + "license": "MIT", + "dependencies": { + "@svgr/babel-plugin-add-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-attribute": "8.0.0", + "@svgr/babel-plugin-remove-jsx-empty-expression": "8.0.0", + "@svgr/babel-plugin-replace-jsx-attribute-value": "8.0.0", + "@svgr/babel-plugin-svg-dynamic-title": "8.0.0", + "@svgr/babel-plugin-svg-em-dimensions": "8.0.0", + "@svgr/babel-plugin-transform-react-native-svg": "8.1.0", + "@svgr/babel-plugin-transform-svg-component": "8.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@svgr/core": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/core/-/core-8.1.0.tgz", + "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "camelcase": "^6.2.0", + "cosmiconfig": "^8.1.3", + "snake-case": "^3.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/hast-util-to-babel-ast": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz", + "integrity": "sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/types": "^7.21.3", + "entities": "^4.4.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + } + }, + "node_modules/@svgr/hast-util-to-babel-ast/node_modules/entities": { + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz", + "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==", + "dev": true, + "license": "BSD-2-Clause", + "engines": { + "node": ">=0.12" + }, + "funding": { + "url": "https://github.com/fb55/entities?sponsor=1" + } + }, + "node_modules/@svgr/plugin-jsx": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz", + "integrity": "sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/core": "^7.21.3", + "@svgr/babel-preset": "8.1.0", + "@svgr/hast-util-to-babel-ast": "8.0.0", + "svg-parser": "^2.0.4" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/gregberge" + }, + "peerDependencies": { + "@svgr/core": "*" + } + }, "node_modules/@tanstack/query-core": { "version": "5.66.4", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.66.4.tgz", @@ -3221,6 +3461,19 @@ "node": ">=6" } }, + "node_modules/camelcase": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz", + "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/camelcase-css": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", @@ -3612,6 +3865,33 @@ "dev": true, "license": "MIT" }, + "node_modules/cosmiconfig": { + "version": "8.3.6", + "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz", + "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==", + "dev": true, + "license": "MIT", + "dependencies": { + "import-fresh": "^3.3.0", + "js-yaml": "^4.1.0", + "parse-json": "^5.2.0", + "path-type": "^4.0.0" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/d-fischer" + }, + "peerDependencies": { + "typescript": ">=4.9.5" + }, + "peerDependenciesMeta": { + "typescript": { + "optional": true + } + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -4260,6 +4540,17 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, + "node_modules/dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "license": "MIT", + "dependencies": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/dunder-proto": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz", @@ -4352,6 +4643,16 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/error-ex": { + "version": "1.3.2", + "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz", + "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-arrayish": "^0.2.1" + } + }, "node_modules/es-abstract": { "version": "1.23.9", "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz", @@ -6405,6 +6706,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-arrayish": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz", + "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==", + "dev": true, + "license": "MIT" + }, "node_modules/is-async-function": { "version": "2.1.1", "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz", @@ -7069,6 +7377,13 @@ "dev": true, "license": "MIT" }, + "node_modules/json-parse-even-better-errors": { + "version": "2.3.1", + "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz", + "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==", + "dev": true, + "license": "MIT" + }, "node_modules/json-schema": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz", @@ -7436,6 +7751,16 @@ "dev": true, "license": "MIT" }, + "node_modules/lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "license": "MIT", + "dependencies": { + "tslib": "^2.0.3" + } + }, "node_modules/lru-cache": { "version": "5.1.1", "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz", @@ -8356,6 +8681,17 @@ "dev": true, "license": "MIT" }, + "node_modules/no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "license": "MIT", + "dependencies": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node_modules/node-releases": { "version": "2.0.19", "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz", @@ -8752,6 +9088,25 @@ "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==", "license": "MIT" }, + "node_modules/parse-json": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz", + "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-even-better-errors": "^2.3.0", + "lines-and-columns": "^1.1.6" + }, + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -10356,6 +10711,34 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/rollup-plugin-svg": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/rollup-plugin-svg/-/rollup-plugin-svg-2.0.0.tgz", + "integrity": "sha512-DmE7dSQHo1SC5L2uH2qul3Mjyd5oV6U1aVVkyvTLX/mUsRink7f1b1zaIm+32GEBA6EHu8H/JJi3DdWqM53ySQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "rollup-pluginutils": "^1.3.1" + } + }, + "node_modules/rollup-plugin-svg/node_modules/estree-walker": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-0.2.1.tgz", + "integrity": "sha512-6/I1dwNKk0N9iGOU3ydzAAurz4NPo/ttxZNCqgIVbWFvWyzWBSNonRrJ5CpjDuyBfmM7ENN7WCzUi9aT/UPXXQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/rollup-plugin-svg/node_modules/rollup-pluginutils": { + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz", + "integrity": "sha512-SjdWWWO/CUoMpDy8RUbZ/pSpG68YHmhk5ROKNIoi2En9bJ8bTt3IhYi254RWiTclQmL7Awmrq+rZFOhZkJAHmQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "estree-walker": "^0.2.1", + "minimatch": "^3.0.2" + } + }, "node_modules/rollup-pluginutils": { "version": "2.8.2", "resolved": "https://registry.npmjs.org/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz", @@ -10713,6 +11096,17 @@ "node": ">=8" } }, + "node_modules/snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "license": "MIT", + "dependencies": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "node_modules/source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -11149,6 +11543,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/svg-parser": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", + "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", + "dev": true, + "license": "MIT" + }, "node_modules/svgo": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/svgo/-/svgo-2.8.0.tgz", @@ -12246,6 +12647,21 @@ "url": "https://opencollective.com/vitest" } }, + "node_modules/vite-plugin-svgr": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/vite-plugin-svgr/-/vite-plugin-svgr-4.3.0.tgz", + "integrity": "sha512-Jy9qLB2/PyWklpYy0xk0UU3TlU0t2UMpJXZvf+hWII1lAmRHrOUKi11Uw8N3rxoNk7atZNYO3pR3vI1f7oi+6w==", + "dev": true, + "license": "MIT", + "dependencies": { + "@rollup/pluginutils": "^5.1.3", + "@svgr/core": "^8.1.0", + "@svgr/plugin-jsx": "^8.1.0" + }, + "peerDependencies": { + "vite": ">=2.6.0" + } + }, "node_modules/vitest": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/vitest/-/vitest-3.0.5.tgz", diff --git a/package.json b/package.json index f7ee70b5..a230b773 100644 --- a/package.json +++ b/package.json @@ -75,12 +75,14 @@ "rollup": "^4.34.6", "rollup-plugin-dts": "^6.1.1", "rollup-plugin-postcss": "^4.0.2", + "rollup-plugin-svg": "^2.0.0", "tailwindcss": "^3.3.1", "typedoc": "^0.27.6", "typedoc-plugin-coverage": "^3.4.1", "typedoc-plugin-missing-exports": "^3.1.0", "typescript": "^5.7.3", "vite": "^6.0.11", + "vite-plugin-svgr": "^4.3.0", "vitest": "^3.0.5" }, "peerDependencies": { @@ -108,6 +110,7 @@ "yet-another-react-lightbox": "^3.21.7" }, "imports": { + "#assets/*": "./src/assets/*", "#components/*": "./src/Components/*", "#utils/*": "./src/Utils/*", "#types/*": "./src/types/*", diff --git a/rollup.config.js b/rollup.config.js index a4a08289..33893a11 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -6,6 +6,7 @@ import resolve from '@rollup/plugin-node-resolve' import typescript from '@rollup/plugin-typescript' import { dts } from 'rollup-plugin-dts' import postcss from 'rollup-plugin-postcss' +import svg from 'rollup-plugin-svg' const __filename = fileURLToPath(import.meta.url) const __dirname = path.dirname(__filename) @@ -40,6 +41,7 @@ export default [ typescript({ tsconfig: './tsconfig.json', }), + svg({ base64: true }), ], external: [ 'react', diff --git a/src/Components/AppShell/NavBar.tsx b/src/Components/AppShell/NavBar.tsx index 4c038d25..10b717b9 100644 --- a/src/Components/AppShell/NavBar.tsx +++ b/src/Components/AppShell/NavBar.tsx @@ -1,3 +1,5 @@ +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' @@ -68,19 +70,7 @@ export default function NavBar({ appName }: { appName: string }) { aria-controls='#sidenav' aria-haspopup='true' > - - - +

      Level 1 - - - +

      • diff --git a/src/Components/Map/Subcomponents/AddButton.tsx b/src/Components/Map/Subcomponents/AddButton.tsx index c9413855..c2de677b 100644 --- a/src/Components/Map/Subcomponents/AddButton.tsx +++ b/src/Components/Map/Subcomponents/AddButton.tsx @@ -1,5 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-non-null-assertion */ +import PlusSVG from '#assets/plus.svg' import { useLayers } from '#components/Map/hooks/useLayers' import { useHasUserPermission } from '#components/Map/hooks/usePermissions' @@ -30,16 +31,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 9c0afd61..2d54c280 100644 --- a/src/Components/Map/Subcomponents/Controls/FilterControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/FilterControl.tsx @@ -1,3 +1,4 @@ +import FunnelIcon from '@heroicons/react/24/outline/FunnelIcon' import { useEffect, useState } from 'react' import { @@ -71,20 +72,7 @@ export function FilterControl() { setOpen(true) }} > - - - +
    )} diff --git a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx index 473151b0..83c9e72b 100644 --- a/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/GratitudeControl.tsx @@ -1,3 +1,4 @@ +import HeartIcon from '@heroicons/react/24/outline/HeartIcon' import { useNavigate } from 'react-router-dom' import { useAuth } from '#components/Auth/useAuth' @@ -16,20 +17,7 @@ export const GratitudeControl = () => { navigate('/select-user') }} > - - - +
}
diff --git a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx index 421d0c1a..0150409a 100644 --- a/src/Components/Map/Subcomponents/Controls/LayerControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/LayerControl.tsx @@ -1,5 +1,6 @@ import { useState } from 'react' +import LayerSVG from '#assets/layer.svg' import { useIsLayerVisible, useToggleVisibleLayer } from '#components/Map/hooks/useFilter' import { useLayers } from '#components/Map/hooks/useLayers' @@ -55,20 +56,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 6bd649ec..3380f6bc 100644 --- a/src/Components/Map/Subcomponents/Controls/LocateControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/LocateControl.tsx @@ -7,6 +7,9 @@ import { control } from 'leaflet' import { useEffect, useRef, useState } from 'react' 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' @@ -56,15 +59,12 @@ export const LocateControl = () => { {loading ? ( ) : ( - - - + style={{ fill: `${active ? '#fc8702' : 'currentColor'}` }} + /> )} diff --git a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx index 1ebd60c2..cbc2e859 100644 --- a/src/Components/Map/Subcomponents/Controls/QuestControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/QuestControl.tsx @@ -1,3 +1,4 @@ +import FistSVG from '#assets/fist.svg' import { useQuestsOpen, useSetQuestOpen } from '#components/Gaming/hooks/useQuests' export function QuestControl() { @@ -17,14 +18,7 @@ export function QuestControl() { className='tw-card-body hover:tw-bg-slate-300 tw-rounded-2xl tw-p-2 tw-h-10 tw-w-10 tw-transition-all tw-duration-300 hover:tw-cursor-pointer' onClick={() => setQuestsOpen(true)} > - - - + Quests )} diff --git a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx index e197ea03..a267019e 100644 --- a/src/Components/Map/Subcomponents/Controls/SearchControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/SearchControl.tsx @@ -10,6 +10,8 @@ /* eslint-disable @typescript-eslint/restrict-plus-operands */ /* eslint-disable @typescript-eslint/no-unsafe-member-access */ /* eslint-disable @typescript-eslint/no-unsafe-call */ +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' @@ -234,21 +236,7 @@ export const SearchControl = () => { hide() }} > - - - - +
{geo?.properties.name ? geo?.properties.name : value} @@ -295,21 +283,7 @@ export const SearchControl = () => { ) }} > - - - - +
{value} diff --git a/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx b/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx index 76f27776..6172a78c 100644 --- a/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx +++ b/src/Components/Map/Subcomponents/Controls/SidebarControl.tsx @@ -1,3 +1,5 @@ +import Bars3Icon from '@heroicons/react/16/solid/Bars3Icon' + // Converts leaflet.locatecontrol to a React Component export const SidebarControl = () => { return ( @@ -11,19 +13,7 @@ export const SidebarControl = () => { aria-controls='#sidenav' aria-haspopup='true' > - - - +
diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx index 96fec05f..835da429 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/HeaderView.tsx @@ -9,9 +9,13 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/no-non-null-assertion */ /* eslint-disable @typescript-eslint/no-unsafe-assignment */ +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 { useNavigate } from 'react-router-dom' +import TargetDotSVG from '#assets/targetDot.svg' import { useAppState } from '#components/AppShell/hooks/useAppState' import { useHasUserPermission } from '#components/Map/hooks/usePermissions' import DialogModal from '#components/Templates/DialogModal' @@ -127,14 +131,7 @@ export function HeaderView({ tabIndex={0} className='tw-bg-base-100 tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-6' > - - - +
    - - - + )} @@ -173,16 +163,7 @@ export function HeaderView({ className='!tw-text-base-content tw-cursor-pointer' onClick={setPositionCallback} > - - - + Position )} @@ -194,18 +175,7 @@ export function HeaderView({ {loading ? ( ) : ( - - - + )} diff --git a/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx b/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx index eaf2c56c..23c3c385 100644 --- a/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx +++ b/src/Components/Map/Subcomponents/ItemPopupComponents/StartEndView.tsx @@ -1,4 +1,6 @@ /* eslint-disable @typescript-eslint/prefer-optional-chain */ +import CalendarIcon from '@heroicons/react/24/solid/CalendarDaysIcon' + import type { Item } from '#types/Item' /** @@ -8,20 +10,7 @@ export const StartEndView = ({ item }: { item?: Item }) => { return (
    - - - +
    - - - +
    diff --git a/src/Components/Profile/Subcomponents/AvatarWidget.tsx b/src/Components/Profile/Subcomponents/AvatarWidget.tsx index b67c2c52..94d1e1f4 100644 --- a/src/Components/Profile/Subcomponents/AvatarWidget.tsx +++ b/src/Components/Profile/Subcomponents/AvatarWidget.tsx @@ -2,9 +2,11 @@ /* eslint-disable @typescript-eslint/no-floating-promises */ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable @typescript-eslint/prefer-optional-chain */ +import ArrowUpTrayIcon from '@heroicons/react/24/outline/ArrowUpTrayIcon' import { useState, useCallback, useRef } from 'react' 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' @@ -169,20 +171,7 @@ export const AvatarWidget: React.FC = ({ avatar, setAvatar }) onChange={onImageChange} />
    - - - +
    {avatar ? (
    @@ -193,22 +182,7 @@ export const AvatarWidget: React.FC = ({ avatar, setAvatar })
    ) : (
    - - - - +
    )} diff --git a/src/Components/Profile/Subcomponents/ContactInfoView.tsx b/src/Components/Profile/Subcomponents/ContactInfoView.tsx index 3c11e641..dbf0af25 100644 --- a/src/Components/Profile/Subcomponents/ContactInfoView.tsx +++ b/src/Components/Profile/Subcomponents/ContactInfoView.tsx @@ -2,6 +2,8 @@ /* eslint-disable @typescript-eslint/no-unsafe-return */ /* eslint-disable @typescript-eslint/restrict-plus-operands */ +import EnvelopeIcon from '@heroicons/react/24/outline/EnvelopeIcon' +import PhoneIcon from '@heroicons/react/24/outline/PhoneIcon' import { useEffect, useState } from 'react' import { Link } from 'react-router-dom' @@ -48,19 +50,7 @@ export const ContactInfoView = ({ item, heading }: { item: Item; heading: string href={`mailto:${item.contact}`} className='tw-mt-2 tw-text-green-500 tw-inline-flex tw-items-center' > - - - - + {item.contact}

    @@ -71,18 +61,7 @@ export const ContactInfoView = ({ item, heading }: { item: Item; heading: string href={`tel:${item.telephone}`} className='tw-mt-2 tw-text-green-500 tw-inline-flex tw-items-center tw-whitespace-nowrap' > - - - + {item.telephone}

    diff --git a/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx b/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx index 6c205aa7..cc298dc6 100644 --- a/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx +++ b/src/Components/Profile/Subcomponents/LinkedItemsHeaderView.tsx @@ -5,6 +5,8 @@ /* eslint-disable @typescript-eslint/restrict-plus-operands */ /* eslint-disable @typescript-eslint/no-unnecessary-condition */ +import EllipsisVerticalIcon from '@heroicons/react/16/solid/EllipsisVerticalIcon' +import LinkSlashIcon from '@heroicons/react/24/outline/LinkSlashIcon' import { useEffect } from 'react' import { useAppState } from '#components/AppShell/hooks/useAppState' @@ -57,14 +59,7 @@ export function LinkedItemsHeaderView({ tabIndex={0} className=' tw-btn tw-m-1 tw-leading-3 tw-border-none tw-min-h-0 tw-h-6' > - - - +
      ) : ( - - - + )} diff --git a/src/Components/Profile/Subcomponents/MarkdownHint.tsx b/src/Components/Profile/Subcomponents/MarkdownHint.tsx index 1b79bbc3..bf8c8b37 100644 --- a/src/Components/Profile/Subcomponents/MarkdownHint.tsx +++ b/src/Components/Profile/Subcomponents/MarkdownHint.tsx @@ -1,5 +1,7 @@ import { useState } from 'react' +import MarkdownSVG from '#assets/markdown.svg' + export const MarkdownHint = () => { const [expended, setExpended] = useState(false) return ( @@ -8,18 +10,7 @@ export const MarkdownHint = () => { title='Markdown is supported' className='flex tw-flex-row tw-text-gray-400 tw-cursor-pointer tw-items-center' > - + Markdown {expended && ( - - - +
    )} diff --git a/src/Components/Profile/Subcomponents/SocialShareBar.tsx b/src/Components/Profile/Subcomponents/SocialShareBar.tsx index 150fde40..4c23fe88 100644 --- a/src/Components/Profile/Subcomponents/SocialShareBar.tsx +++ b/src/Components/Profile/Subcomponents/SocialShareBar.tsx @@ -1,5 +1,8 @@ import { toast } from 'react-toastify' +import ChevronSVG from '#assets/chevron.svg' +import ClipboardSVG from '#assets/share/clipboard.svg' + import SocialShareButton from './SocialShareButton' const SocialShareBar = ({ @@ -41,14 +44,7 @@ const SocialShareBar = ({ onClick={() => copyLink()} title='share link via email' > - - - + \/ )} {platforms.includes('clipboard') && ( @@ -62,17 +58,7 @@ const SocialShareBar = ({ onClick={() => copyLink()} title='copy Link' > - - - +
)}
diff --git a/src/Components/Profile/Subcomponents/SocialShareButton.tsx b/src/Components/Profile/Subcomponents/SocialShareButton.tsx index 64f0858a..93f5dbde 100644 --- a/src/Components/Profile/Subcomponents/SocialShareButton.tsx +++ b/src/Components/Profile/Subcomponents/SocialShareButton.tsx @@ -5,72 +5,42 @@ import { cloneElement } from 'react' +import FacebookSVG from '#assets/share/facebook.svg' +import LinkedinSVG from '#assets/share/linkedin.svg' +import TelegramSVG from '#assets/share/telegram.svg' +import TwitterSVG from '#assets/share/twitter.svg' +import WhatsappSVG from '#assets/share/whatsapp.svg' +import XingSVG from '#assets/share/xing.svg' + const platformConfigs = { facebook: { shareUrl: 'https://www.facebook.com/sharer/sharer.php?u={url}', - icon: ( - - - - ), + icon: Facebook, bgColor: '#3b5998', }, twitter: { shareUrl: 'https://twitter.com/intent/tweet?text={title}:%20{url}', - icon: ( - - - - ), + icon: Twitter, bgColor: '#55acee', }, linkedin: { shareUrl: 'http://www.linkedin.com/shareArticle?mini=true&url={url}&title={title}', - icon: ( - - - - - ), + icon: Linkedin, bgColor: '#4875b4', }, xing: { shareUrl: 'https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url={url}', - icon: ( - - - - ), + icon: Xing, bgColor: '#026466', }, whatsapp: { shareUrl: 'https://api.whatsapp.com/send?text={title}%20{url}', - icon: ( - - - - ), + icon: Whatsapp, bgColor: '#25D366', }, telegram: { shareUrl: 'https://t.me/share/url?url={url}&text={title}', - icon: ( - - - - ), + icon: Telegram, bgColor: '#0088cc', }, } diff --git a/src/assets/chevron.svg b/src/assets/chevron.svg new file mode 100644 index 00000000..fb6f4454 --- /dev/null +++ b/src/assets/chevron.svg @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/src/assets/fist.svg b/src/assets/fist.svg new file mode 100644 index 00000000..f079abbe --- /dev/null +++ b/src/assets/fist.svg @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/src/assets/layer.svg b/src/assets/layer.svg new file mode 100644 index 00000000..a8f5494c --- /dev/null +++ b/src/assets/layer.svg @@ -0,0 +1,13 @@ + + + + \ No newline at end of file diff --git a/src/assets/markdown.svg b/src/assets/markdown.svg new file mode 100644 index 00000000..cd6c28cc --- /dev/null +++ b/src/assets/markdown.svg @@ -0,0 +1,12 @@ + \ No newline at end of file diff --git a/src/assets/plus.svg b/src/assets/plus.svg new file mode 100644 index 00000000..ae77e510 --- /dev/null +++ b/src/assets/plus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/share/clipboard.svg b/src/assets/share/clipboard.svg new file mode 100644 index 00000000..75551887 --- /dev/null +++ b/src/assets/share/clipboard.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/share/facebook.svg b/src/assets/share/facebook.svg new file mode 100644 index 00000000..f0e46bb1 --- /dev/null +++ b/src/assets/share/facebook.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/share/linkedin.svg b/src/assets/share/linkedin.svg new file mode 100644 index 00000000..35382bde --- /dev/null +++ b/src/assets/share/linkedin.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/assets/share/telegram.svg b/src/assets/share/telegram.svg new file mode 100644 index 00000000..5926a3fd --- /dev/null +++ b/src/assets/share/telegram.svg @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/src/assets/share/twitter.svg b/src/assets/share/twitter.svg new file mode 100644 index 00000000..16c2fe70 --- /dev/null +++ b/src/assets/share/twitter.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/share/whatsapp.svg b/src/assets/share/whatsapp.svg new file mode 100644 index 00000000..0579784e --- /dev/null +++ b/src/assets/share/whatsapp.svg @@ -0,0 +1,9 @@ + + + \ No newline at end of file diff --git a/src/assets/share/xing.svg b/src/assets/share/xing.svg new file mode 100644 index 00000000..2fcc6565 --- /dev/null +++ b/src/assets/share/xing.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/assets/target.svg b/src/assets/target.svg new file mode 100644 index 00000000..711e071b --- /dev/null +++ b/src/assets/target.svg @@ -0,0 +1,8 @@ + + + \ No newline at end of file diff --git a/src/assets/targetDot.svg b/src/assets/targetDot.svg new file mode 100644 index 00000000..9ded1a69 --- /dev/null +++ b/src/assets/targetDot.svg @@ -0,0 +1,10 @@ + + + \ No newline at end of file diff --git a/src/assets/user.svg b/src/assets/user.svg new file mode 100644 index 00000000..4a0573ec --- /dev/null +++ b/src/assets/user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/types/SVG.d.ts b/src/types/SVG.d.ts new file mode 100644 index 00000000..13d53bd9 --- /dev/null +++ b/src/types/SVG.d.ts @@ -0,0 +1,7 @@ +declare module '*.svg' { + import type { FunctionComponent, SVGProps } from 'react' + + export const ReactComponent: FunctionComponent> + const src: string + export default src +} diff --git a/tsconfig.json b/tsconfig.json index 2a66fedf..ff453fb4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -20,6 +20,7 @@ "allowSyntheticDefaultImports": true, "skipLibCheck": true, "paths": { + "#assets/*": ["./src/assets/*"], "#components/*": ["./src/Components/*"], "#utils/*": ["./src/Utils/*"], "#types/*": ["./src/types/*"], diff --git a/vite.config.ts b/vite.config.ts index 5b6292d4..fd583db2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,9 +1,10 @@ import react from '@vitejs/plugin-react' import { defineConfig } from 'vite' +import svgr from 'vite-plugin-svgr' import { configDefaults } from 'vitest/config' export default defineConfig({ - plugins: [react()], + plugins: [react(), svgr()], test: { globals: true, environment: 'happy-dom', From 18030b8bc0d29f08537488bc782c2d0793a0f8af Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Tue, 25 Feb 2025 09:30:15 +0100 Subject: [PATCH 02/13] rollup - fail when typescript has warnings or errors (#154) Currently this is detected when building the docu. Since the developer rarely does that the problem is detected on github. This change allows the developer to discover the error early by failing the build. --- rollup.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/rollup.config.js b/rollup.config.js index 33893a11..05dd097b 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -40,6 +40,7 @@ export default [ }), typescript({ tsconfig: './tsconfig.json', + noEmitOnError: true, }), svg({ base64: true }), ], From 1de44c3e1c03b81e2c8b816dfaf07f65d955f651 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 25 Feb 2025 09:39:09 +0100 Subject: [PATCH 03/13] feat(release): improve typing of itemsApi (WIP) (#148) * Improve typing of itemsApi * Show error if name of new item cannot be determined --------- Co-authored-by: Ulf Gebhardt Co-authored-by: Anton Tranelis <31516529+antontranelis@users.noreply.github.com> --- src/Components/Map/Subcomponents/ItemFormPopup.tsx | 9 ++++++++- src/Components/Map/hooks/useItems.tsx | 1 - src/types/LayerProps.d.ts | 3 +-- 3 files changed, 9 insertions(+), 4 deletions(-) diff --git a/src/Components/Map/Subcomponents/ItemFormPopup.tsx b/src/Components/Map/Subcomponents/ItemFormPopup.tsx index ef191276..5a2ad79d 100644 --- a/src/Components/Map/Subcomponents/ItemFormPopup.tsx +++ b/src/Components/Map/Subcomponents/ItemFormPopup.tsx @@ -53,6 +53,13 @@ export function ItemFormPopup(props: ItemFormPopupProps) { }) formItem.position = { type: 'Point', coordinates: [props.position.lng, props.position.lat] } evt.preventDefault() + + const name = formItem.name ? formItem.name : user?.first_name + if (!name) { + toast.error('Name is must be defined') + return + } + setSpinner(true) formItem.text && @@ -98,8 +105,8 @@ export function ItemFormPopup(props: ItemFormPopupProps) { ;(!props.layer.userProfileLayer || !item) && (await props.layer.api?.createItem!({ ...formItem, + name, id: uuid, - name: formItem.name ? formItem.name : user?.first_name, })) success = true // eslint-disable-next-line no-catch-all/no-catch-all diff --git a/src/Components/Map/hooks/useItems.tsx b/src/Components/Map/hooks/useItems.tsx index bf8779fe..0fb1af78 100644 --- a/src/Components/Map/hooks/useItems.tsx +++ b/src/Components/Map/hooks/useItems.tsx @@ -82,7 +82,6 @@ function useItemsManager(initialItems: Item[]): { }, }) result.map((item) => { - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment dispatch({ type: 'ADD', item: { ...item, layer } }) return null }) diff --git a/src/types/LayerProps.d.ts b/src/types/LayerProps.d.ts index 44f55a95..9c720bc4 100644 --- a/src/types/LayerProps.d.ts +++ b/src/types/LayerProps.d.ts @@ -18,8 +18,7 @@ export interface LayerProps { markerShape: string markerDefaultColor: string markerDefaultColor2?: string - // eslint-disable-next-line @typescript-eslint/no-explicit-any - api?: ItemsApi + api?: ItemsApi itemType: ItemType userProfileLayer?: boolean customEditLink?: string From c1eafc9a0f9c239bda998be8e9173d0025fdfca3 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 25 Feb 2025 20:21:06 +0100 Subject: [PATCH 04/13] feat(source): test text area input (#155) * unit tests for text area input component --- src/Components/Input/TextAreaInput.spec.tsx | 33 ++++++++++++++++++ src/Components/Input/TextAreaInput.tsx | 12 ------- .../__snapshots__/TextAreaInput.spec.tsx.snap | 34 +++++++++++++++++++ vite.config.ts | 8 ++--- 4 files changed, 71 insertions(+), 16 deletions(-) create mode 100644 src/Components/Input/TextAreaInput.spec.tsx create mode 100644 src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap diff --git a/src/Components/Input/TextAreaInput.spec.tsx b/src/Components/Input/TextAreaInput.spec.tsx new file mode 100644 index 00000000..0fe0a40f --- /dev/null +++ b/src/Components/Input/TextAreaInput.spec.tsx @@ -0,0 +1,33 @@ +import { render, screen, fireEvent } from '@testing-library/react' +import { describe, it, expect, beforeEach, vi } from 'vitest' + +import { TextAreaInput } from './TextAreaInput' + +describe('', () => { + let wrapper: ReturnType + + const updateFormValue = vi.fn() + + beforeEach(() => { + vi.clearAllMocks() + wrapper = render() + }) + + it('renders properly', () => { + expect(wrapper.container.firstChild).toMatchSnapshot() + }) + + describe('handleChange', () => { + it('calls updateFormValue with new value', () => { + fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } }) + expect(updateFormValue).toBeCalledWith('test') + }) + }) + + describe('labelTitle', () => { + it('sets label', () => { + wrapper.rerender() + expect(wrapper.container.firstChild).toMatchSnapshot() + }) + }) +}) diff --git a/src/Components/Input/TextAreaInput.tsx b/src/Components/Input/TextAreaInput.tsx index 05549a36..660b0990 100644 --- a/src/Components/Input/TextAreaInput.tsx +++ b/src/Components/Input/TextAreaInput.tsx @@ -1,7 +1,5 @@ import { useEffect, useRef, useState } from 'react' -import { useTags } from '#components/Map/hooks/useTags' - interface TextAreaProps { labelTitle?: string labelStyle?: string @@ -14,8 +12,6 @@ interface TextAreaProps { updateFormValue?: (value: string) => void } -type KeyValue = Record - /** * @category Input */ @@ -33,14 +29,6 @@ export function TextAreaInput({ const ref = useRef(null) const [inputValue, setInputValue] = useState(defaultValue) - const tags = useTags() - - const values: KeyValue[] = [] - - tags.forEach((tag) => { - values.push({ key: tag.name, value: tag.name, color: tag.color }) - }) - useEffect(() => { setInputValue(defaultValue) }, [defaultValue]) diff --git a/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap b/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap new file mode 100644 index 00000000..48991cae --- /dev/null +++ b/src/Components/Input/__snapshots__/TextAreaInput.spec.tsx.snap @@ -0,0 +1,34 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[` > labelTitle > sets label 1`] = ` +
+ +