From 955e113abe899221293ce87f8b36c9c43438bca8 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Mon, 29 Jan 2024 16:59:46 +0100 Subject: [PATCH 01/18] chore: Add dnd kit --- app/package.json | 1 + yarn.lock | 197 +++++++++++++++++++++++++++++++++++++++++++---- 2 files changed, 181 insertions(+), 17 deletions(-) diff --git a/app/package.json b/app/package.json index 79645d4a9..cd1e1868e 100644 --- a/app/package.json +++ b/app/package.json @@ -24,6 +24,7 @@ "@deck.gl/mapbox": "^8.9.19", "@deck.gl/mesh-layers": "^8.9.19", "@deck.gl/react": "^8.9.19", + "@dnd-kit/core": "^6.1.0", "@emotion/react": "^11.8.2", "@emotion/styled": "^11.8.1", "@juggle/resize-observer": "^3.2.0", diff --git a/yarn.lock b/yarn.lock index 8c3e05a51..f4f93ae1f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -173,6 +173,14 @@ "@babel/highlight" "^7.22.13" chalk "^2.4.2" +"@babel/code-frame@^7.23.5": + version "7.23.5" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244" + integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA== + dependencies: + "@babel/highlight" "^7.23.4" + chalk "^2.4.2" + "@babel/compat-data@^7.14.5", "@babel/compat-data@^7.15.0": version "7.15.0" resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.15.0.tgz" @@ -183,21 +191,26 @@ resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730" integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ== +"@babel/compat-data@^7.23.5": + version "7.23.5" + resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98" + integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw== + "@babel/core@7.12.9", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.14.6", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7": - version "7.23.0" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.0.tgz#f8259ae0e52a123eb40f552551e647b506a94d83" - integrity sha512-97z/ju/Jy1rZmDxybphrBuI+jtJjFVoz7Mr9yUQVVVi+DNZE333uFQeMOqcCIy1x3WYBIbWftUSLmbNXNT7qFQ== + version "7.23.9" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.9.tgz#b028820718000f267870822fec434820e9b1e4d1" + integrity sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw== dependencies: "@ampproject/remapping" "^2.2.0" - "@babel/code-frame" "^7.22.13" - "@babel/generator" "^7.23.0" - "@babel/helper-compilation-targets" "^7.22.15" - "@babel/helper-module-transforms" "^7.23.0" - "@babel/helpers" "^7.23.0" - "@babel/parser" "^7.23.0" - "@babel/template" "^7.22.15" - "@babel/traverse" "^7.23.0" - "@babel/types" "^7.23.0" + "@babel/code-frame" "^7.23.5" + "@babel/generator" "^7.23.6" + "@babel/helper-compilation-targets" "^7.23.6" + "@babel/helper-module-transforms" "^7.23.3" + "@babel/helpers" "^7.23.9" + "@babel/parser" "^7.23.9" + "@babel/template" "^7.23.9" + "@babel/traverse" "^7.23.9" + "@babel/types" "^7.23.9" convert-source-map "^2.0.0" debug "^4.1.0" gensync "^1.0.0-beta.2" @@ -223,6 +236,16 @@ "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" +"@babel/generator@^7.23.6": + version "7.23.6" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e" + integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw== + dependencies: + "@babel/types" "^7.23.6" + "@jridgewell/gen-mapping" "^0.3.2" + "@jridgewell/trace-mapping" "^0.3.17" + jsesc "^2.5.1" + "@babel/helper-annotate-as-pure@^7.14.5": version "7.14.5" resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.14.5.tgz" @@ -251,6 +274,17 @@ lru-cache "^5.1.1" semver "^6.3.1" +"@babel/helper-compilation-targets@^7.23.6": + version "7.23.6" + resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991" + integrity sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ== + dependencies: + "@babel/compat-data" "^7.23.5" + "@babel/helper-validator-option" "^7.23.5" + browserslist "^4.22.2" + lru-cache "^5.1.1" + semver "^6.3.1" + "@babel/helper-create-class-features-plugin@^7.14.5": version "7.14.6" resolved "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.14.6.tgz" @@ -359,6 +393,17 @@ "@babel/helper-split-export-declaration" "^7.22.6" "@babel/helper-validator-identifier" "^7.22.20" +"@babel/helper-module-transforms@^7.23.3": + version "7.23.3" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1" + integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ== + dependencies: + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-module-imports" "^7.22.15" + "@babel/helper-simple-access" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/helper-validator-identifier" "^7.22.20" + "@babel/helper-optimise-call-expression@^7.14.5", "@babel/helper-optimise-call-expression@^7.15.4": version "7.15.4" resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz" @@ -436,6 +481,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f" integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw== +"@babel/helper-string-parser@^7.23.4": + version "7.23.4" + resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83" + integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ== + "@babel/helper-validator-identifier@^7.12.11", "@babel/helper-validator-identifier@^7.14.9", "@babel/helper-validator-identifier@^7.15.7": version "7.15.7" resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz" @@ -476,6 +526,11 @@ resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040" integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA== +"@babel/helper-validator-option@^7.23.5": + version "7.23.5" + resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307" + integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw== + "@babel/helpers@^7.23.0": version "7.23.0" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.0.tgz#5c59a6395a02c6f2907fb8cd0c5be1652208c107" @@ -485,6 +540,15 @@ "@babel/traverse" "^7.23.0" "@babel/types" "^7.23.0" +"@babel/helpers@^7.23.9": + version "7.23.9" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.9.tgz#c3e20bbe7f7a7e10cb9b178384b4affdf5995c7d" + integrity sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ== + dependencies: + "@babel/template" "^7.23.9" + "@babel/traverse" "^7.23.9" + "@babel/types" "^7.23.9" + "@babel/highlight@^7.10.4": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf" @@ -512,10 +576,19 @@ chalk "^2.4.2" js-tokens "^4.0.0" -"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.20.15", "@babel/parser@^7.21.4", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.7.2": - version "7.23.0" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719" - integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw== +"@babel/highlight@^7.23.4": + version "7.23.4" + resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b" + integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A== + dependencies: + "@babel/helper-validator-identifier" "^7.22.20" + chalk "^2.4.2" + js-tokens "^4.0.0" + +"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.20.15", "@babel/parser@^7.21.4", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.23.9", "@babel/parser@^7.7.2": + version "7.23.9" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b" + integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA== "@babel/plugin-proposal-class-properties@^7.0.0": version "7.14.5" @@ -894,6 +967,15 @@ "@babel/parser" "^7.22.15" "@babel/types" "^7.22.15" +"@babel/template@^7.23.9": + version "7.23.9" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.23.9.tgz#f881d0487cba2828d3259dcb9ef5005a9731011a" + integrity sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA== + dependencies: + "@babel/code-frame" "^7.23.5" + "@babel/parser" "^7.23.9" + "@babel/types" "^7.23.9" + "@babel/traverse@7.12.13": version "7.12.13" resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz" @@ -940,6 +1022,22 @@ debug "^4.1.0" globals "^11.1.0" +"@babel/traverse@^7.23.9": + version "7.23.9" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.9.tgz#2f9d6aead6b564669394c5ce0f9302bb65b9d950" + integrity sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg== + dependencies: + "@babel/code-frame" "^7.23.5" + "@babel/generator" "^7.23.6" + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-function-name" "^7.23.0" + "@babel/helper-hoist-variables" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/parser" "^7.23.9" + "@babel/types" "^7.23.9" + debug "^4.3.1" + globals "^11.1.0" + "@babel/types@7.12.13": version "7.12.13" resolved "https://registry.npmjs.org/@babel/types/-/types-7.12.13.tgz" @@ -992,6 +1090,15 @@ "@babel/helper-validator-identifier" "^7.22.5" to-fast-properties "^2.0.0" +"@babel/types@^7.23.6", "@babel/types@^7.23.9": + version "7.23.9" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.9.tgz#1dd7b59a9a2b5c87f8b41e52770b5ecbf492e002" + integrity sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q== + dependencies: + "@babel/helper-string-parser" "^7.23.4" + "@babel/helper-validator-identifier" "^7.22.20" + to-fast-properties "^2.0.0" + "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz" @@ -1174,6 +1281,29 @@ gonzales-pe "^4.3.0" node-source-walk "^5.0.1" +"@dnd-kit/accessibility@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@dnd-kit/accessibility/-/accessibility-3.1.0.tgz#1054e19be276b5f1154ced7947fc0cb5d99192e0" + integrity sha512-ea7IkhKvlJUv9iSHJOnxinBcoOI3ppGnnL+VDJ75O45Nss6HtZd8IdN8touXPDtASfeI2T2LImb8VOZcL47wjQ== + dependencies: + tslib "^2.0.0" + +"@dnd-kit/core@^6.1.0": + version "6.1.0" + resolved "https://registry.yarnpkg.com/@dnd-kit/core/-/core-6.1.0.tgz#e81a3d10d9eca5d3b01cbf054171273a3fe01def" + integrity sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg== + dependencies: + "@dnd-kit/accessibility" "^3.1.0" + "@dnd-kit/utilities" "^3.2.2" + tslib "^2.0.0" + +"@dnd-kit/utilities@^3.2.2": + version "3.2.2" + resolved "https://registry.yarnpkg.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz#5a32b6af356dc5f74d61b37d6f7129a4040ced7b" + integrity sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg== + dependencies: + tslib "^2.0.0" + "@emotion/babel-plugin@^11.7.1": version "11.7.2" resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz#fec75f38a6ab5b304b0601c74e2a5e77c95e5fa0" @@ -6261,6 +6391,16 @@ browserslist@^4.21.9: node-releases "^2.0.13" update-browserslist-db "^1.0.11" +browserslist@^4.22.2: + version "4.22.3" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.3.tgz#299d11b7e947a6b843981392721169e27d60c5a6" + integrity sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A== + dependencies: + caniuse-lite "^1.0.30001580" + electron-to-chromium "^1.4.648" + node-releases "^2.0.14" + update-browserslist-db "^1.0.13" + bs-logger@0.x: version "0.2.6" resolved "https://registry.npmjs.org/bs-logger/-/bs-logger-0.2.6.tgz" @@ -6435,6 +6575,11 @@ caniuse-lite@^1.0.30001517: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601" integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg== +caniuse-lite@^1.0.30001580: + version "1.0.30001581" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz#0dfd4db9e94edbdca67d57348ebc070dece279f4" + integrity sha512-whlTkwhqV2tUmP3oYhtNfaWGYHDdS3JYFQBKXxcUR9qqPWsRhFHhoISO2Xnl/g0xyKzht9mI1LZpiNWfMzHixQ== + capital-case@^1.0.4: version "1.0.4" resolved "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz" @@ -8150,6 +8295,11 @@ electron-to-chromium@^1.4.477: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.487.tgz#e2ef8b15f2791bf68fa6f38f2656f1a551d360ae" integrity sha512-XbCRs/34l31np/p33m+5tdBrdXu9jJkZxSbNxj5I0H1KtV2ZMSB+i/HYqDiRzHaFx2T5EdytjoBRe8QRJE2vQg== +electron-to-chromium@^1.4.648: + version "1.4.648" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.648.tgz#c7b46c9010752c37bb4322739d6d2dd82354fbe4" + integrity sha512-EmFMarXeqJp9cUKu/QEciEApn0S/xRcpZWuAm32U7NgoZCimjsilKXHRO9saeEW55eHZagIDg6XTUOv32w9pjg== + elegant-spinner@^1.0.1: version "1.0.1" resolved "https://registry.npmjs.org/elegant-spinner/-/elegant-spinner-1.0.1.tgz" @@ -12532,6 +12682,11 @@ node-releases@^2.0.13: resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d" integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ== +node-releases@^2.0.14: + version "2.0.14" + resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b" + integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw== + node-source-walk@^4.0.0, node-source-walk@^4.2.0, node-source-walk@^4.2.2: version "4.3.0" resolved "https://registry.yarnpkg.com/node-source-walk/-/node-source-walk-4.3.0.tgz#8336b56cfed23ac5180fe98f1e3bb6b11fd5317c" @@ -15715,7 +15870,7 @@ tslib@^2, tslib@^2.0.3, tslib@^2.1.0, tslib@~2.3.0: resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz" integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg== -tslib@^2.3.1: +tslib@^2.0.0, tslib@^2.3.1: version "2.6.2" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae" integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q== @@ -16024,6 +16179,14 @@ update-browserslist-db@^1.0.11: escalade "^3.1.1" picocolors "^1.0.0" +update-browserslist-db@^1.0.13: + version "1.0.13" + resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4" + integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg== + dependencies: + escalade "^3.1.1" + picocolors "^1.0.0" + upper-case-first@^2.0.2: version "2.0.2" resolved "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz" From 56ae4b30631fa4089104b98f1ccd314c23248572 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Mon, 29 Jan 2024 17:00:05 +0100 Subject: [PATCH 02/18] fix: Properly swap chart configs --- app/configurator/configurator-state.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx index a702a6e87..aed33f922 100644 --- a/app/configurator/configurator-state.tsx +++ b/app/configurator/configurator-state.tsx @@ -1376,8 +1376,10 @@ const reducer: Reducer = ( case "CHART_CONFIG_REORDER": if (draft.state === "CONFIGURING_CHART" || draft.state === "LAYOUTING") { const { oldIndex, newIndex } = action.value; - const [removed] = draft.chartConfigs.splice(oldIndex, 1); - draft.chartConfigs.splice(newIndex, 0, removed); + const oldChartConfig = draft.chartConfigs[oldIndex]; + const newChartConfig = draft.chartConfigs[newIndex]; + draft.chartConfigs[oldIndex] = newChartConfig; + draft.chartConfigs[newIndex] = oldChartConfig; } return draft; From fcd0bba30977ac325354bc665c96362ee209200a Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Mon, 29 Jan 2024 17:03:43 +0100 Subject: [PATCH 03/18] fix: Use % instead of fr to avoid overflows when size changes --- app/components/chart-panel.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx index 133dc3422..b0a3279ae 100644 --- a/app/components/chart-panel.tsx +++ b/app/components/chart-panel.tsx @@ -14,7 +14,7 @@ const useStyles = makeStyles((theme: Theme) => ({ }, panelLayoutTall: { display: "grid", - gridTemplateColumns: "repeat(2, 1fr)", + gridTemplateColumns: "repeat(2, 50%)", gap: theme.spacing(4), "& > :nth-child(3n - 2)": { From 4bc4b010c2ee4d41e855ea5ae52a3379a4f5161e Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 30 Jan 2024 12:05:14 +0100 Subject: [PATCH 04/18] feat: Add initial drag & drop to dashboard layout when editing --- app/components/chart-panel.tsx | 77 +++++++++++++++++++++++++++----- app/components/chart-preview.tsx | 50 ++++++++++++++++----- 2 files changed, 104 insertions(+), 23 deletions(-) diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx index b0a3279ae..6323929a5 100644 --- a/app/components/chart-panel.tsx +++ b/app/components/chart-panel.tsx @@ -1,4 +1,5 @@ -import { Box, Theme } from "@mui/material"; +import { useDraggable, useDroppable } from "@dnd-kit/core"; +import { Box, BoxProps, Theme } from "@mui/material"; import { makeStyles } from "@mui/styles"; import capitalize from "lodash/capitalize"; import React from "react"; @@ -58,21 +59,73 @@ export const ChartPanelLayout = (props: ChartPanelLayoutProps) => { ); }; -type ChartPanelProps = React.PropsWithChildren<{ +type ChartWrapperProps = BoxProps & { editing?: boolean; layout?: Layout; -}>; +}; -export const ChartWrapper = (props: ChartPanelProps) => { - const { children, editing, layout } = props; - const classes = useStyles(); +export const ChartWrapper = React.forwardRef( + (props, ref) => { + const { children, editing, layout, ...rest } = props; + const classes = useStyles(); - return ( - <> - {(editing || layout?.type === "tab") && } - - {children} + return ( + + {(editing || layout?.type === "tab") && } + + {children} + - + ); + } +); + +type DndChartWrapperProps = ChartWrapperProps & { + chartKey: string; +}; + +export const DndChartWrapper = (props: DndChartWrapperProps) => { + const { chartKey, ...rest } = props; + + const { + setNodeRef: setDraggableNodeRef, + attributes, + listeners, + transform, + isDragging, + } = useDraggable({ id: chartKey }); + + const { + setNodeRef: setDroppableNodeRef, + isOver: isOverDroppable, + active, + } = useDroppable({ id: chartKey }); + + const setRef = React.useCallback( + (node: HTMLElement | null) => { + setDraggableNodeRef(node); + setDroppableNodeRef(node); + }, + [setDraggableNodeRef, setDroppableNodeRef] + ); + + return ( + ); }; diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index cb18f0377..9b56fb6ce 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -1,3 +1,4 @@ +import { DndContext } from "@dnd-kit/core"; import { Trans } from "@lingui/macro"; import { Box } from "@mui/material"; import Head from "next/head"; @@ -6,7 +7,11 @@ import { useMemo } from "react"; import { DataSetTable } from "@/browse/datatable"; import { ChartErrorBoundary } from "@/components/chart-error-boundary"; import { ChartFootnotes } from "@/components/chart-footnotes"; -import { ChartPanelLayout, ChartWrapper } from "@/components/chart-panel"; +import { + ChartPanelLayout, + ChartWrapper, + DndChartWrapper, +} from "@/components/chart-panel"; import { ChartTablePreviewProvider, useChartTablePreview, @@ -37,22 +42,45 @@ type ChartPreviewProps = { }; export const ChartPreview = (props: ChartPreviewProps) => { - const [state] = useConfiguratorState(hasChartConfigs); + const [state, dispatch] = useConfiguratorState(hasChartConfigs); const editing = isConfiguring(state); return ( {state.layout.type === "dashboard" && !editing ? ( - {state.chartConfigs.map((chartConfig) => ( - - - - ))} + { + const { active, over } = e; + + if (!active || !over) { + return; + } + + dispatch({ + type: "CHART_CONFIG_REORDER", + value: { + oldIndex: state.chartConfigs.findIndex( + (c) => c.key === active.id + ), + newIndex: state.chartConfigs.findIndex( + (c) => c.key === over.id + ), + }, + }); + }} + > + {state.chartConfigs.map((chartConfig) => ( + + + + ))} + ) : ( From aed52e90bd3e79f9f9eca7834e79d51580fc301d Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 30 Jan 2024 12:47:21 +0100 Subject: [PATCH 05/18] feat: Move drag handle next to chart title (as in the design) --- app/components/chart-panel.tsx | 50 +------ app/components/chart-preview.tsx | 183 ++++++++++++++++-------- app/components/chart-selection-tabs.tsx | 46 ++++-- 3 files changed, 157 insertions(+), 122 deletions(-) diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx index 6323929a5..b638efb6a 100644 --- a/app/components/chart-panel.tsx +++ b/app/components/chart-panel.tsx @@ -1,4 +1,3 @@ -import { useDraggable, useDroppable } from "@dnd-kit/core"; import { Box, BoxProps, Theme } from "@mui/material"; import { makeStyles } from "@mui/styles"; import capitalize from "lodash/capitalize"; @@ -59,7 +58,7 @@ export const ChartPanelLayout = (props: ChartPanelLayoutProps) => { ); }; -type ChartWrapperProps = BoxProps & { +export type ChartWrapperProps = BoxProps & { editing?: boolean; layout?: Layout; }; @@ -82,50 +81,3 @@ export const ChartWrapper = React.forwardRef( ); } ); - -type DndChartWrapperProps = ChartWrapperProps & { - chartKey: string; -}; - -export const DndChartWrapper = (props: DndChartWrapperProps) => { - const { chartKey, ...rest } = props; - - const { - setNodeRef: setDraggableNodeRef, - attributes, - listeners, - transform, - isDragging, - } = useDraggable({ id: chartKey }); - - const { - setNodeRef: setDroppableNodeRef, - isOver: isOverDroppable, - active, - } = useDroppable({ id: chartKey }); - - const setRef = React.useCallback( - (node: HTMLElement | null) => { - setDraggableNodeRef(node); - setDroppableNodeRef(node); - }, - [setDraggableNodeRef, setDroppableNodeRef] - ); - - return ( - - ); -}; diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 9b56fb6ce..135f24dde 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -1,8 +1,8 @@ -import { DndContext } from "@dnd-kit/core"; +import { DndContext, useDraggable, useDroppable } from "@dnd-kit/core"; import { Trans } from "@lingui/macro"; import { Box } from "@mui/material"; import Head from "next/head"; -import { useMemo } from "react"; +import React from "react"; import { DataSetTable } from "@/browse/datatable"; import { ChartErrorBoundary } from "@/components/chart-error-boundary"; @@ -10,8 +10,9 @@ import { ChartFootnotes } from "@/components/chart-footnotes"; import { ChartPanelLayout, ChartWrapper, - DndChartWrapper, + ChartWrapperProps, } from "@/components/chart-panel"; +import { DragHandle } from "@/components/chart-selection-tabs"; import { ChartTablePreviewProvider, useChartTablePreview, @@ -71,14 +72,13 @@ export const ChartPreview = (props: ChartPreviewProps) => { }} > {state.chartConfigs.map((chartConfig) => ( - - - + /> ))} @@ -91,12 +91,72 @@ export const ChartPreview = (props: ChartPreviewProps) => { ); }; +type DndChartPreviewProps = ChartWrapperProps & { + chartKey: string; + dataSource: DataSource; +}; + +const DndChartPreview = (props: DndChartPreviewProps) => { + const { children, chartKey, dataSource, ...rest } = props; + + const { + setActivatorNodeRef, + setNodeRef: setDraggableNodeRef, + attributes, + listeners, + transform, + isDragging, + } = useDraggable({ id: chartKey }); + + const { + setNodeRef: setDroppableNodeRef, + isOver: isOverDroppable, + active, + } = useDroppable({ id: chartKey }); + + const setRef = React.useCallback( + (node: HTMLElement | null) => { + setDraggableNodeRef(node); + setDroppableNodeRef(node); + }, + [setDraggableNodeRef, setDroppableNodeRef] + ); + + return ( + + + } + /> + + ); +}; + type ChartPreviewInnerProps = ChartPreviewProps & { chartKey?: string; + titleSlot?: React.ReactNode; }; export const ChartPreviewInner = (props: ChartPreviewInnerProps) => { - const { dataSource, chartKey } = props; + const { dataSource, chartKey, titleSlot } = props; const [state, dispatch] = useConfiguratorState(); const chartConfig = getChartConfig(state, chartKey); const locale = useLocale(); @@ -133,7 +193,7 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => { const handleToggleTableView = useEvent(() => setIsTablePreview((c) => !c)); const dimensions = components?.dataCubesComponents.dimensions; const measures = components?.dataCubesComponents.measures; - const allComponents = useMemo(() => { + const allComponents = React.useMemo(() => { if (!components?.dataCubesComponents) { return []; } @@ -172,69 +232,68 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => { )} {hasChartConfigs(state) && ( <> - <> - - {(state.state === "CONFIGURING_CHART" || - chartConfig.meta.title[locale]) && ( - - dispatch({ - type: "CHART_ACTIVE_FIELD_CHANGED", - value: "title", - }) - : undefined - } - /> - )} - <MetadataPanel - // FIXME: adapt to design - datasetIri={chartConfig.cubes[0].iri} - dataSource={dataSource} - dimensions={allComponents} - top={96} - /> - </Flex> - <Head> - <title key="title"> - {!chartConfig.meta.title[locale] - ? // FIXME: adapt to design - metadata?.dataCubesMetadata.map((d) => d.title).join(", ") - : chartConfig.meta.title[locale]}{" "} - - visualize.admin.ch - - + {(state.state === "CONFIGURING_CHART" || - chartConfig.meta.description[locale]) && ( - { + ? () => dispatch({ type: "CHART_ACTIVE_FIELD_CHANGED", - value: "description", - }); - } + value: "title", + }) : undefined } /> )} - + {titleSlot} + + + + + {!chartConfig.meta.title[locale] + ? // FIXME: adapt to design + metadata?.dataCubesMetadata.map((d) => d.title).join(", ") + : chartConfig.meta.title[locale]}{" "} + - visualize.admin.ch + + + {(state.state === "CONFIGURING_CHART" || + chartConfig.meta.description[locale]) && ( + { + dispatch({ + type: "CHART_ACTIVE_FIELD_CHANGED", + value: "description", + }); + } + : undefined + } + /> + )} {isTablePreview ? ( { )} - {draggable && ( - - - - )} + {draggable && } ); }; + +type DragHandleProps = BoxProps & { + dragging?: boolean; +}; + +export const DragHandle = React.forwardRef( + (props, ref) => { + const { dragging, ...rest } = props; + const classes = useIconStyles({ active: false, dragging }); + + return ( + + + + ); + } +); From 2c1b1da4a4fb94659226e3151dfc4627b3e32cc6 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 30 Jan 2024 12:49:40 +0100 Subject: [PATCH 06/18] fix: Differentiate reorder and swap --- app/components/chart-preview.tsx | 2 +- app/configurator/configurator-state.tsx | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 135f24dde..d394a64d0 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -59,7 +59,7 @@ export const ChartPreview = (props: ChartPreviewProps) => { } dispatch({ - type: "CHART_CONFIG_REORDER", + type: "CHART_CONFIG_SWAP", value: { oldIndex: state.chartConfigs.findIndex( (c) => c.key === active.id diff --git a/app/configurator/configurator-state.tsx b/app/configurator/configurator-state.tsx index aed33f922..eb9e523c9 100644 --- a/app/configurator/configurator-state.tsx +++ b/app/configurator/configurator-state.tsx @@ -289,6 +289,13 @@ export type ConfiguratorStateAction = newIndex: number; }; } + | { + type: "CHART_CONFIG_SWAP"; + value: { + oldIndex: number; + newIndex: number; + }; + } | { type: "SWITCH_ACTIVE_CHART"; value: string; @@ -1374,6 +1381,15 @@ const reducer: Reducer = ( return draft; case "CHART_CONFIG_REORDER": + if (draft.state === "CONFIGURING_CHART" || draft.state === "LAYOUTING") { + const { oldIndex, newIndex } = action.value; + const [removed] = draft.chartConfigs.splice(oldIndex, 1); + draft.chartConfigs.splice(newIndex, 0, removed); + } + + return draft; + + case "CHART_CONFIG_SWAP": if (draft.state === "CONFIGURING_CHART" || draft.state === "LAYOUTING") { const { oldIndex, newIndex } = action.value; const oldChartConfig = draft.chartConfigs[oldIndex]; From 69756841108a23a81d5d82e19552c874c0bd2e11 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 30 Jan 2024 13:25:54 +0100 Subject: [PATCH 07/18] feat: Update Dashboard layout icon --- app/configurator/components/ui-helpers.ts | 3 ++- app/icons/components/IcLayoutDashboard.tsx | 9 ++++---- app/icons/components/IcLayoutTall.tsx | 22 +++++++++++++++++++ app/icons/components/index.tsx | 2 ++ app/icons/svg/ic_dashboard.svg | 1 + ...ayout_dashboard.svg => ic_layout_tall.svg} | 0 6 files changed, 31 insertions(+), 6 deletions(-) create mode 100644 app/icons/components/IcLayoutTall.tsx create mode 100644 app/icons/svg/ic_dashboard.svg rename app/icons/svg/{ic_layout_dashboard.svg => ic_layout_tall.svg} (100%) diff --git a/app/configurator/components/ui-helpers.ts b/app/configurator/components/ui-helpers.ts index 7c12292c9..abf00856f 100644 --- a/app/configurator/components/ui-helpers.ts +++ b/app/configurator/components/ui-helpers.ts @@ -211,8 +211,9 @@ export const getIconName = (name: string): IconName => { case "layoutTab": return "layoutTab"; case "layoutDashboard": - case "layoutTall": return "layoutDashboard"; + case "layoutTall": + return "layoutTall"; case "layoutVertical": return "layoutVertical"; diff --git a/app/icons/components/IcLayoutDashboard.tsx b/app/icons/components/IcLayoutDashboard.tsx index 6fd9f7de4..c414f51a8 100644 --- a/app/icons/components/IcLayoutDashboard.tsx +++ b/app/icons/components/IcLayoutDashboard.tsx @@ -3,17 +3,16 @@ import * as React from "react"; function SvgIcLayoutDashboard(props: React.SVGProps) { return ( ); diff --git a/app/icons/components/IcLayoutTall.tsx b/app/icons/components/IcLayoutTall.tsx new file mode 100644 index 000000000..f01de1c06 --- /dev/null +++ b/app/icons/components/IcLayoutTall.tsx @@ -0,0 +1,22 @@ +import * as React from "react"; + +function SvgIcLayoutTall(props: React.SVGProps) { + return ( + + + + ); +} + +export default SvgIcLayoutTall; diff --git a/app/icons/components/index.tsx b/app/icons/components/index.tsx index 04a434ec8..274cdafe5 100644 --- a/app/icons/components/index.tsx +++ b/app/icons/components/index.tsx @@ -70,6 +70,7 @@ import { default as Info } from "@/icons/components/IcInfo"; import { default as Laptop } from "@/icons/components/IcLaptop"; import { default as LayoutDashboard } from "@/icons/components/IcLayoutDashboard"; import { default as LayoutTab } from "@/icons/components/IcLayoutTab"; +import { default as LayoutTall } from "@/icons/components/IcLayoutTall"; import { default as LayoutVertical } from "@/icons/components/IcLayoutVertical"; import { default as LeftAligned } from "@/icons/components/IcLeftAligned"; import { default as Link } from "@/icons/components/IcLink"; @@ -215,6 +216,7 @@ export const Icons = { info: Info, laptop: Laptop, layoutDashboard: LayoutDashboard, + layoutTall: LayoutTall, layoutTab: LayoutTab, layoutVertical: LayoutVertical, leftAligned: LeftAligned, diff --git a/app/icons/svg/ic_dashboard.svg b/app/icons/svg/ic_dashboard.svg new file mode 100644 index 000000000..416a5930b --- /dev/null +++ b/app/icons/svg/ic_dashboard.svg @@ -0,0 +1 @@ + diff --git a/app/icons/svg/ic_layout_dashboard.svg b/app/icons/svg/ic_layout_tall.svg similarity index 100% rename from app/icons/svg/ic_layout_dashboard.svg rename to app/icons/svg/ic_layout_tall.svg From 6d8f0de4c3d5e2a0569a9cb4c8d6f972a5a4423d Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 30 Jan 2024 13:35:20 +0100 Subject: [PATCH 08/18] chore: Add @dnd-kit/modifiers --- app/package.json | 1 + yarn.lock | 225 +++++++++++++++++++---------------------------- 2 files changed, 91 insertions(+), 135 deletions(-) diff --git a/app/package.json b/app/package.json index cd1e1868e..92be28fb5 100644 --- a/app/package.json +++ b/app/package.json @@ -25,6 +25,7 @@ "@deck.gl/mesh-layers": "^8.9.19", "@deck.gl/react": "^8.9.19", "@dnd-kit/core": "^6.1.0", + "@dnd-kit/modifiers": "^7.0.0", "@emotion/react": "^11.8.2", "@emotion/styled": "^11.8.1", "@juggle/resize-observer": "^3.2.0", diff --git a/yarn.lock b/yarn.lock index f4f93ae1f..571833865 100644 --- a/yarn.lock +++ b/yarn.lock @@ -186,17 +186,34 @@ resolved "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.15.0.tgz" integrity sha512-0NqAC1IJE0S0+lL1SWFMxMkz1pKCNCjI4tr2Zx4LJSXxCLAdr6KyArnY+sno5m3yH9g737ygOyPABDsnXkpxiA== -"@babel/compat-data@^7.22.9": - version "7.22.9" - resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.22.9.tgz#71cdb00a1ce3a329ce4cbec3a44f9fef35669730" - integrity sha512-5UamI7xkUcJ3i9qVDS+KFDEK8/7oJ55/sJMB1Ge7IEapr7KfdfV/HErR+koZwOfd+SgtFKOKRhRakdg++DcJpQ== - "@babel/compat-data@^7.23.5": version "7.23.5" resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.23.5.tgz#ffb878728bb6bdcb6f4510aa51b1be9afb8cfd98" integrity sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw== -"@babel/core@7.12.9", "@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.14.6", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7": +"@babel/core@7.12.9": + version "7.12.9" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8" + integrity sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/generator" "^7.12.5" + "@babel/helper-module-transforms" "^7.12.1" + "@babel/helpers" "^7.12.5" + "@babel/parser" "^7.12.7" + "@babel/template" "^7.12.7" + "@babel/traverse" "^7.12.9" + "@babel/types" "^7.12.7" + convert-source-map "^1.7.0" + debug "^4.1.0" + gensync "^1.0.0-beta.1" + json5 "^2.1.2" + lodash "^4.17.19" + resolve "^1.3.2" + semver "^5.4.1" + source-map "^0.5.0" + +"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.10.5", "@babel/core@^7.12.3", "@babel/core@^7.12.9", "@babel/core@^7.7.2", "@babel/core@^7.7.5", "@babel/core@^7.7.7": version "7.23.9" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.23.9.tgz#b028820718000f267870822fec434820e9b1e4d1" integrity sha512-5q0175NOjddqpvvzU+kDiSOAk4PfdO6FvwCWoQ6RO7rTzEe8vlo+4HVfcnAREhD4npMs0e9uZypjTwzZPCf/cw== @@ -226,22 +243,22 @@ jsesc "^2.5.1" source-map "^0.5.0" -"@babel/generator@^7.20.14", "@babel/generator@^7.23.0": - version "7.23.0" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420" - integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g== +"@babel/generator@^7.12.5", "@babel/generator@^7.23.6": + version "7.23.6" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e" + integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw== dependencies: - "@babel/types" "^7.23.0" + "@babel/types" "^7.23.6" "@jridgewell/gen-mapping" "^0.3.2" "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" -"@babel/generator@^7.23.6": - version "7.23.6" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e" - integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw== +"@babel/generator@^7.20.14": + version "7.23.0" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420" + integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g== dependencies: - "@babel/types" "^7.23.6" + "@babel/types" "^7.23.0" "@jridgewell/gen-mapping" "^0.3.2" "@jridgewell/trace-mapping" "^0.3.17" jsesc "^2.5.1" @@ -263,17 +280,6 @@ browserslist "^4.16.6" semver "^6.3.0" -"@babel/helper-compilation-targets@^7.22.15": - version "7.22.15" - resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.15.tgz#0698fc44551a26cf29f18d4662d5bf545a6cfc52" - integrity sha512-y6EEzULok0Qvz8yyLkCvVX+02ic+By2UdOhylwUOvOn9dvYc9mKICJuuU1n1XBI02YWsNsnrY1kc6DVbjcXbtw== - dependencies: - "@babel/compat-data" "^7.22.9" - "@babel/helper-validator-option" "^7.22.15" - browserslist "^4.21.9" - lru-cache "^5.1.1" - semver "^6.3.1" - "@babel/helper-compilation-targets@^7.23.6": version "7.23.6" resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991" @@ -368,6 +374,17 @@ dependencies: "@babel/types" "^7.22.15" +"@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.23.3": + version "7.23.3" + resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1" + integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ== + dependencies: + "@babel/helper-environment-visitor" "^7.22.20" + "@babel/helper-module-imports" "^7.22.15" + "@babel/helper-simple-access" "^7.22.5" + "@babel/helper-split-export-declaration" "^7.22.6" + "@babel/helper-validator-identifier" "^7.22.20" + "@babel/helper-module-transforms@^7.14.5": version "7.15.8" resolved "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.15.8.tgz" @@ -382,28 +399,6 @@ "@babel/traverse" "^7.15.4" "@babel/types" "^7.15.6" -"@babel/helper-module-transforms@^7.23.0": - version "7.23.0" - resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.0.tgz#3ec246457f6c842c0aee62a01f60739906f7047e" - integrity sha512-WhDWw1tdrlT0gMgUJSlX0IQvoO1eN279zrAUbVB+KpV2c3Tylz8+GnKOLllCS6Z/iZQEyVYxhZVUdPTqs2YYPw== - dependencies: - "@babel/helper-environment-visitor" "^7.22.20" - "@babel/helper-module-imports" "^7.22.15" - "@babel/helper-simple-access" "^7.22.5" - "@babel/helper-split-export-declaration" "^7.22.6" - "@babel/helper-validator-identifier" "^7.22.20" - -"@babel/helper-module-transforms@^7.23.3": - version "7.23.3" - resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1" - integrity sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ== - dependencies: - "@babel/helper-environment-visitor" "^7.22.20" - "@babel/helper-module-imports" "^7.22.15" - "@babel/helper-simple-access" "^7.22.5" - "@babel/helper-split-export-declaration" "^7.22.6" - "@babel/helper-validator-identifier" "^7.22.20" - "@babel/helper-optimise-call-expression@^7.14.5", "@babel/helper-optimise-call-expression@^7.15.4": version "7.15.4" resolved "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.15.4.tgz" @@ -521,26 +516,12 @@ resolved "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.14.5.tgz" integrity sha512-OX8D5eeX4XwcroVW45NMvoYaIuFI+GQpA2a8Gi+X/U/cDUIRsV37qQfF905F0htTRCREQIB4KqPeaveRJUl3Ow== -"@babel/helper-validator-option@^7.22.15": - version "7.22.15" - resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.22.15.tgz#694c30dfa1d09a6534cdfcafbe56789d36aba040" - integrity sha512-bMn7RmyFjY/mdECUbgn9eoSY4vqvacUnS9i9vGAGttgFWesO6B4CYWA7XlpbWgBt71iv/hfbPlynohStqnu5hA== - "@babel/helper-validator-option@^7.23.5": version "7.23.5" resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307" integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw== -"@babel/helpers@^7.23.0": - version "7.23.0" - resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.0.tgz#5c59a6395a02c6f2907fb8cd0c5be1652208c107" - integrity sha512-cMceqRGsK0dZiEkIT+NujINkOddEbZGv7/+OCaxRQL0+VRkP4SfdCo43K8x9lZM0wZojMDD5evkjNRb0EmBORA== - dependencies: - "@babel/template" "^7.22.15" - "@babel/traverse" "^7.23.0" - "@babel/types" "^7.23.0" - -"@babel/helpers@^7.23.9": +"@babel/helpers@^7.12.5", "@babel/helpers@^7.23.9": version "7.23.9" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.23.9.tgz#c3e20bbe7f7a7e10cb9b178384b4affdf5995c7d" integrity sha512-87ICKgU5t5SzOT7sBMfCOZQ2rHjRU+Pcb9BoILMYz600W6DkVRLFBPwQ18gwUVvggqXivaUakpnxWQGbpywbBQ== @@ -585,7 +566,12 @@ chalk "^2.4.2" js-tokens "^4.0.0" -"@babel/parser@7.12.16", "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.14.6", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.20.15", "@babel/parser@^7.21.4", "@babel/parser@^7.22.15", "@babel/parser@^7.23.0", "@babel/parser@^7.23.9", "@babel/parser@^7.7.2": +"@babel/parser@7.12.16": + version "7.12.16" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.16.tgz#cc31257419d2c3189d394081635703f549fc1ed4" + integrity sha512-c/+u9cqV6F0+4Hpq01jnJO+GLp2DdT63ppz9Xa+6cHaajM9VFzK/iDXiKK65YtpeVwu+ctfS6iqlMqRgQRzeCw== + +"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.13", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.15.4", "@babel/parser@^7.20.15", "@babel/parser@^7.21.4", "@babel/parser@^7.22.15", "@babel/parser@^7.23.9", "@babel/parser@^7.7.2": version "7.23.9" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.9.tgz#7b903b6149b0f8fa7ad564af646c4c38a77fc44b" integrity sha512-9tcKgqKbs3xGJ+NtKF2ndOBBLVwPjl1SHxPQkd36r3Dlirw3xWUeGaTbqr7uGZcTaxkVNwc+03SVP7aCdWrTlA== @@ -949,6 +935,15 @@ resolved "https://registry.npmjs.org/@babel/standalone/-/standalone-7.14.6.tgz" integrity sha512-oAoSp82jhJFnXKybKTOj5QF04XxiDRyiiqrFToiU1udlBXuZoADlPmmnOcuqBrZxSNNUjzJIVK8vt838Qoqjxg== +"@babel/template@^7.12.7", "@babel/template@^7.23.9": + version "7.23.9" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.23.9.tgz#f881d0487cba2828d3259dcb9ef5005a9731011a" + integrity sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA== + dependencies: + "@babel/code-frame" "^7.23.5" + "@babel/parser" "^7.23.9" + "@babel/types" "^7.23.9" + "@babel/template@^7.15.4", "@babel/template@^7.3.3": version "7.15.4" resolved "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz" @@ -967,15 +962,6 @@ "@babel/parser" "^7.22.15" "@babel/types" "^7.22.15" -"@babel/template@^7.23.9": - version "7.23.9" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.23.9.tgz#f881d0487cba2828d3259dcb9ef5005a9731011a" - integrity sha512-+xrD2BWLpvHKNmX2QbpdpsBaWnRxahMwJjO+KZk2JOElj5nSmKezyS1B4u+QbHMTX69t4ukm6hh9lsYQ7GHCKA== - dependencies: - "@babel/code-frame" "^7.23.5" - "@babel/parser" "^7.23.9" - "@babel/types" "^7.23.9" - "@babel/traverse@7.12.13": version "7.12.13" resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.13.tgz" @@ -1006,23 +992,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/traverse@^7.23.0": - version "7.23.0" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.0.tgz#18196ddfbcf4ccea324b7f6d3ada00d8c5a99c53" - integrity sha512-t/QaEvyIoIkwzpiZ7aoSKK8kObQYeF7T2v+dazAYCb8SXtp58zEVkWW7zAnju8FNKNdr4ScAOEDmMItbyOmEYw== - dependencies: - "@babel/code-frame" "^7.22.13" - "@babel/generator" "^7.23.0" - "@babel/helper-environment-visitor" "^7.22.20" - "@babel/helper-function-name" "^7.23.0" - "@babel/helper-hoist-variables" "^7.22.5" - "@babel/helper-split-export-declaration" "^7.22.6" - "@babel/parser" "^7.23.0" - "@babel/types" "^7.23.0" - debug "^4.1.0" - globals "^11.1.0" - -"@babel/traverse@^7.23.9": +"@babel/traverse@^7.12.9", "@babel/traverse@^7.23.9": version "7.23.9" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.9.tgz#2f9d6aead6b564669394c5ce0f9302bb65b9d950" integrity sha512-I/4UJ9vs90OkBtY6iiiTORVMyIhJ4kAVmsKo9KFc8UOxMeUfi2hvtIBsET5u9GizXE6/GFSuKCTNfgCswuEjRg== @@ -1055,6 +1025,15 @@ "@babel/helper-validator-identifier" "^7.14.9" to-fast-properties "^2.0.0" +"@babel/types@^7.12.7", "@babel/types@^7.23.6", "@babel/types@^7.23.9": + version "7.23.9" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.9.tgz#1dd7b59a9a2b5c87f8b41e52770b5ecbf492e002" + integrity sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q== + dependencies: + "@babel/helper-string-parser" "^7.23.4" + "@babel/helper-validator-identifier" "^7.22.20" + to-fast-properties "^2.0.0" + "@babel/types@^7.16.7": version "7.17.0" resolved "https://registry.npmjs.org/@babel/types/-/types-7.17.0.tgz" @@ -1090,15 +1069,6 @@ "@babel/helper-validator-identifier" "^7.22.5" to-fast-properties "^2.0.0" -"@babel/types@^7.23.6", "@babel/types@^7.23.9": - version "7.23.9" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.9.tgz#1dd7b59a9a2b5c87f8b41e52770b5ecbf492e002" - integrity sha512-dQjSq/7HaSjRM43FFGnv5keM2HsxpmyV1PfaSVm0nzzjwwTmjOe6J4bC8e3+pTEIgHaHj+1ZlLThRJ2auc/w1Q== - dependencies: - "@babel/helper-string-parser" "^7.23.4" - "@babel/helper-validator-identifier" "^7.22.20" - to-fast-properties "^2.0.0" - "@bcoe/v8-coverage@^0.2.3": version "0.2.3" resolved "https://registry.npmjs.org/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz" @@ -1297,6 +1267,14 @@ "@dnd-kit/utilities" "^3.2.2" tslib "^2.0.0" +"@dnd-kit/modifiers@^7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@dnd-kit/modifiers/-/modifiers-7.0.0.tgz#229666dd4e8b9487f348035117f993af755b3db9" + integrity sha512-BG/ETy3eBjFap7+zIti53f0PCLGDzNXyTmn6fSdrudORf+OH04MxrW4p5+mPu4mgMk9kM41iYONjc3DOUWTcfg== + dependencies: + "@dnd-kit/utilities" "^3.2.2" + tslib "^2.0.0" + "@dnd-kit/utilities@^3.2.2": version "3.2.2" resolved "https://registry.yarnpkg.com/@dnd-kit/utilities/-/utilities-3.2.2.tgz#5a32b6af356dc5f74d61b37d6f7129a4040ced7b" @@ -6381,16 +6359,6 @@ browserslist@^4.16.6: node-releases "^2.0.1" picocolors "^1.0.0" -browserslist@^4.21.9: - version "4.21.10" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.10.tgz#dbbac576628c13d3b2231332cb2ec5a46e015bb0" - integrity sha512-bipEBdZfVH5/pwrvqc+Ub0kUPVfGUhlKxbvfD+z1BDnPEO/X98ruXGA1WP5ASpAFKan7Qr6j736IacbZQuAlKQ== - dependencies: - caniuse-lite "^1.0.30001517" - electron-to-chromium "^1.4.477" - node-releases "^2.0.13" - update-browserslist-db "^1.0.11" - browserslist@^4.22.2: version "4.22.3" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.22.3.tgz#299d11b7e947a6b843981392721169e27d60c5a6" @@ -6570,11 +6538,6 @@ caniuse-lite@^1.0.30001406: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001505.tgz#10a343e49d31cbbfdae298ef73cb0a9f46670dc5" integrity sha512-jaAOR5zVtxHfL0NjZyflVTtXm3D3J9P15zSJ7HmQF8dSKGA6tqzQq+0ZI3xkjyQj46I4/M0K2GbMpcAFOcbr3A== -caniuse-lite@^1.0.30001517: - version "1.0.30001519" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001519.tgz#3e7b8b8a7077e78b0eb054d69e6edf5c7df35601" - integrity sha512-0QHgqR+Jv4bxHMp8kZ1Kn8CH55OikjKJ6JmKkZYP1F3D7w+lnFXF70nG5eNfsZS89jadi5Ywy5UCSKLAglIRkg== - caniuse-lite@^1.0.30001580: version "1.0.30001581" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz#0dfd4db9e94edbdca67d57348ebc070dece279f4" @@ -7081,6 +7044,11 @@ convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0: dependencies: safe-buffer "~5.1.1" +convert-source-map@^1.7.0: + version "1.9.0" + resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f" + integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A== + convert-source-map@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-2.0.0.tgz#4b560f649fc4e918dd0ab75cf4961e8bc882d82a" @@ -8290,11 +8258,6 @@ electron-to-chromium@^1.3.886: resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.893.tgz" integrity sha512-ChtwF7qB03INq1SyMpue08wc6cve+ktj2UC/Y7se9vB+JryfzziJeYwsgb8jLaCA5GMkHCdn5M62PfSMWhifZg== -electron-to-chromium@^1.4.477: - version "1.4.487" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.487.tgz#e2ef8b15f2791bf68fa6f38f2656f1a551d360ae" - integrity sha512-XbCRs/34l31np/p33m+5tdBrdXu9jJkZxSbNxj5I0H1KtV2ZMSB+i/HYqDiRzHaFx2T5EdytjoBRe8QRJE2vQg== - electron-to-chromium@^1.4.648: version "1.4.648" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.648.tgz#c7b46c9010752c37bb4322739d6d2dd82354fbe4" @@ -9291,7 +9254,7 @@ fwd-stream@^1.0.4: dependencies: readable-stream "~1.0.26-4" -gensync@^1.0.0-beta.2: +gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2: version "1.0.0-beta.2" resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz" integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg== @@ -12677,11 +12640,6 @@ node-releases@^2.0.1: resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz" integrity sha512-CqyzN6z7Q6aMeF/ktcMVTzhAHCEpf8SOarwpzpf8pNBY2k5/oM34UHldUwp8VKI7uxct2HxSRdJjBaZeESzcxA== -node-releases@^2.0.13: - version "2.0.13" - resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.13.tgz#d5ed1627c23e3461e819b02e57b75e4899b1c81d" - integrity sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ== - node-releases@^2.0.14: version "2.0.14" resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b" @@ -14483,7 +14441,7 @@ resolve.exports@^1.1.0: resolved "https://registry.npmjs.org/resolve.exports/-/resolve.exports-1.1.0.tgz" integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ== -resolve@1.22.8: +resolve@1.22.8, resolve@^1.3.2: version "1.22.8" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.8.tgz#b6c87a9f2aa06dfab52e3d70ac8cde321fa5a48d" integrity sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw== @@ -14775,6 +14733,11 @@ semver@7.x, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5: dependencies: lru-cache "^6.0.0" +semver@^5.4.1: + version "5.7.2" + resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8" + integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g== + semver@^6.0.0, semver@^6.2.0, semver@^6.3.0: version "6.3.0" resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz" @@ -16171,14 +16134,6 @@ unzipper@^0.10.11: readable-stream "~2.3.6" setimmediate "~1.0.4" -update-browserslist-db@^1.0.11: - version "1.0.11" - resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz#9a2a641ad2907ae7b3616506f4b977851db5b940" - integrity sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA== - dependencies: - escalade "^3.1.1" - picocolors "^1.0.0" - update-browserslist-db@^1.0.13: version "1.0.13" resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4" From 3fa8f6907625c356a6878cdcb813b049be01387d Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 30 Jan 2024 13:35:34 +0100 Subject: [PATCH 09/18] feat: Restrict dragging to parent container --- app/components/chart-preview.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index d394a64d0..90c6a6f2c 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -1,4 +1,5 @@ import { DndContext, useDraggable, useDroppable } from "@dnd-kit/core"; +import { restrictToParentElement } from "@dnd-kit/modifiers"; import { Trans } from "@lingui/macro"; import { Box } from "@mui/material"; import Head from "next/head"; @@ -51,6 +52,7 @@ export const ChartPreview = (props: ChartPreviewProps) => { {state.layout.type === "dashboard" && !editing ? ( { const { active, over } = e; From aa8d8fc2f41a45ab1da90d22ccc319029b883146 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski Date: Tue, 30 Jan 2024 13:42:19 +0100 Subject: [PATCH 10/18] feat: Remove metadata button from individual charts in dashboards --- app/components/chart-preview.tsx | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 90c6a6f2c..182702013 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -147,6 +147,7 @@ const DndChartPreview = (props: DndChartPreviewProps) => { dragging={isDragging} /> } + disableMetadataButton /> ); @@ -155,10 +156,11 @@ const DndChartPreview = (props: DndChartPreviewProps) => { type ChartPreviewInnerProps = ChartPreviewProps & { chartKey?: string; titleSlot?: React.ReactNode; + disableMetadataButton?: boolean; }; export const ChartPreviewInner = (props: ChartPreviewInnerProps) => { - const { dataSource, chartKey, titleSlot } = props; + const { dataSource, chartKey, titleSlot, disableMetadataButton } = props; const [state, dispatch] = useConfiguratorState(); const chartConfig = getChartConfig(state, chartKey); const locale = useLocale(); @@ -262,13 +264,15 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => { /> )} {titleSlot} - + {!disableMetadataButton && ( + + )} From de4b45b13c1ac6597ab9cb5c28d988f762b0eede Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski <bartosz@interactivethings.com> Date: Tue, 30 Jan 2024 14:29:21 +0100 Subject: [PATCH 11/18] fix: Make ChartPanel fill available space --- app/components/chart-panel.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/chart-panel.tsx b/app/components/chart-panel.tsx index b638efb6a..157220ecf 100644 --- a/app/components/chart-panel.tsx +++ b/app/components/chart-panel.tsx @@ -32,6 +32,7 @@ const useStyles = makeStyles((theme: Theme) => ({ borderColor: theme.palette.divider, overflow: "hidden", width: "auto", + height: "100%", }, })); From d9764bd4ea69f1a9edf6bb469c0d77ed62e23863 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski <bartosz@interactivethings.com> Date: Tue, 30 Jan 2024 14:47:50 +0100 Subject: [PATCH 12/18] feat: Use DragOverlay in Dashboard drag and drop --- app/components/chart-preview.tsx | 68 ++++++++++++++++++++++++++++---- 1 file changed, 60 insertions(+), 8 deletions(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 182702013..649513cdb 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -1,5 +1,12 @@ -import { DndContext, useDraggable, useDroppable } from "@dnd-kit/core"; -import { restrictToParentElement } from "@dnd-kit/modifiers"; +import { + DndContext, + DragOverlay, + Over, + pointerWithin, + useDraggable, + useDroppable, +} from "@dnd-kit/core"; +import { snapCenterToCursor } from "@dnd-kit/modifiers"; import { Trans } from "@lingui/macro"; import { Box } from "@mui/material"; import Head from "next/head"; @@ -46,14 +53,31 @@ type ChartPreviewProps = { export const ChartPreview = (props: ChartPreviewProps) => { const [state, dispatch] = useConfiguratorState(hasChartConfigs); const editing = isConfiguring(state); + const [isDragging, setIsDragging] = React.useState(false); + const [activeChartKey, setActiveChartKey] = React.useState<string | null>( + null + ); + const [over, setOver] = React.useState<Over | null>(null); return ( <ChartTablePreviewProvider> {state.layout.type === "dashboard" && !editing ? ( <ChartPanelLayout type={state.layout.layout}> <DndContext - modifiers={[restrictToParentElement]} + collisionDetection={pointerWithin} + onDragStart={(e) => { + setIsDragging(true); + setActiveChartKey(e.active.id.toString()); + }} + onDragMove={(e) => { + if (e.over?.id !== over?.id) { + setOver(e.over); + } + }} onDragEnd={(e) => { + setIsDragging(false); + setActiveChartKey(null); + setOver(null); const { active, over } = e; if (!active || !over) { @@ -82,6 +106,33 @@ export const ChartPreview = (props: ChartPreviewProps) => { layout={state.layout} /> ))} + {isDragging && ( + <DragOverlay + zIndex={1000} + modifiers={[snapCenterToCursor]} + style={{ + width: "min(40vh, 400px)", + height: "fit-content", + border: + over && over.id !== activeChartKey + ? "2px solid green" + : "2px solid transparent", + opacity: over && over.id !== activeChartKey ? 0.8 : 1, + cursor: "grabbing", + pointerEvents: "none", + transition: + "border 0.2s ease-in-out, opacity 0.2s ease-in-out", + }} + > + <ChartWrapper editing={editing} layout={state.layout}> + <ChartPreviewInner + {...props} + chartKey={activeChartKey ?? undefined} + disableMetadataButton + /> + </ChartWrapper> + </DragOverlay> + )} </DndContext> </ChartPanelLayout> ) : ( @@ -106,7 +157,6 @@ const DndChartPreview = (props: DndChartPreviewProps) => { setNodeRef: setDraggableNodeRef, attributes, listeners, - transform, isDragging, } = useDraggable({ id: chartKey }); @@ -130,11 +180,13 @@ const DndChartPreview = (props: DndChartPreviewProps) => { ref={setRef} {...attributes} style={{ - zIndex: isDragging ? 1000 : undefined, - transform: `translate(${transform?.x ?? 0}px, ${transform?.y ?? 0}px)`, - opacity: isOverDroppable && !isDragging ? 0.5 : 1, - // Disable tooltip interactions while dragging + opacity: isOverDroppable && !isDragging ? 0.8 : 1, + border: + isOverDroppable && !isDragging + ? "2px solid green" + : "2px solid transparent", pointerEvents: active ? "none" : "auto", + transition: "border 0.2s ease-in-out, opacity 0.2s ease-in-out", }} > <ChartPreviewInner From be951be40320d7c93d8e660ae4c667c8afa009ce Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski <bartosz@interactivethings.com> Date: Tue, 30 Jan 2024 15:32:35 +0100 Subject: [PATCH 13/18] refactor: Clean up --- app/components/chart-preview.tsx | 188 +++++++++++++++++-------------- app/config-types.ts | 2 +- 2 files changed, 103 insertions(+), 87 deletions(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 649513cdb..9799143a1 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -32,9 +32,11 @@ import { HintYellow } from "@/components/hint"; import { MetadataPanel } from "@/components/metadata-panel"; import { DataSource, + Layout, getChartConfig, hasChartConfigs, isConfiguring, + isLayouting, useConfiguratorState, } from "@/configurator"; import { Description, Title } from "@/configurator/components/annotators"; @@ -44,6 +46,7 @@ import { } from "@/graphql/hooks"; import { DataCubePublicationStatus } from "@/graphql/resolver-types"; import { useLocale } from "@/locales/use-locale"; +import { useTheme } from "@/themes"; import useEvent from "@/utils/use-event"; type ChartPreviewProps = { @@ -51,8 +54,32 @@ type ChartPreviewProps = { }; export const ChartPreview = (props: ChartPreviewProps) => { - const [state, dispatch] = useConfiguratorState(hasChartConfigs); + const { dataSource } = props; + const [state] = useConfiguratorState(hasChartConfigs); const editing = isConfiguring(state); + const { layout } = state; + + return ( + <ChartTablePreviewProvider> + {layout.type === "dashboard" && !editing ? ( + <DashboardPreview dataSource={dataSource} layoutType={layout.layout} /> + ) : ( + <ChartWrapper editing={editing} layout={layout}> + <ChartPreviewInner dataSource={dataSource} /> + </ChartWrapper> + )} + </ChartTablePreviewProvider> + ); +}; + +type DashboardPreviewProps = ChartPreviewProps & { + layoutType: Extract<Layout, { type: "dashboard" }>["layout"]; +}; + +const DashboardPreview = (props: DashboardPreviewProps) => { + const { dataSource, layoutType } = props; + const [state, dispatch] = useConfiguratorState(isLayouting); + const theme = useTheme(); const [isDragging, setIsDragging] = React.useState(false); const [activeChartKey, setActiveChartKey] = React.useState<string | null>( null @@ -60,87 +87,75 @@ export const ChartPreview = (props: ChartPreviewProps) => { const [over, setOver] = React.useState<Over | null>(null); return ( - <ChartTablePreviewProvider> - {state.layout.type === "dashboard" && !editing ? ( - <ChartPanelLayout type={state.layout.layout}> - <DndContext - collisionDetection={pointerWithin} - onDragStart={(e) => { - setIsDragging(true); - setActiveChartKey(e.active.id.toString()); - }} - onDragMove={(e) => { - if (e.over?.id !== over?.id) { - setOver(e.over); - } - }} - onDragEnd={(e) => { - setIsDragging(false); - setActiveChartKey(null); - setOver(null); - const { active, over } = e; + <ChartPanelLayout type={layoutType}> + <DndContext + collisionDetection={pointerWithin} + onDragStart={(e) => { + setIsDragging(true); + setActiveChartKey(`${e.active.id}`); + }} + onDragMove={(e) => { + if (e.over?.id !== over?.id && e.over?.id !== activeChartKey) { + setOver(e.over); + } + }} + onDragEnd={(e) => { + setIsDragging(false); + setActiveChartKey(null); + setOver(null); - if (!active || !over) { - return; - } + const { active, over } = e; - dispatch({ - type: "CHART_CONFIG_SWAP", - value: { - oldIndex: state.chartConfigs.findIndex( - (c) => c.key === active.id - ), - newIndex: state.chartConfigs.findIndex( - (c) => c.key === over.id - ), - }, - }); + if (!active || !over) { + return; + } + + dispatch({ + type: "CHART_CONFIG_SWAP", + value: { + oldIndex: state.chartConfigs.findIndex( + (c) => c.key === active.id + ), + newIndex: state.chartConfigs.findIndex((c) => c.key === over.id), + }, + }); + }} + > + {state.chartConfigs.map((chartConfig) => ( + <DndChartPreview + key={chartConfig.key} + chartKey={chartConfig.key} + dataSource={props.dataSource} + layout={state.layout} + /> + ))} + {isDragging && ( + <DragOverlay + zIndex={1000} + modifiers={[snapCenterToCursor]} + style={{ + opacity: over ? 0.8 : 1, + width: "min(40vh, 400px)", + height: "fit-content", + border: `2px solid ${ + over ? theme.palette.primary.main : "transparent" + }`, + cursor: "grabbing", + pointerEvents: "none", + transition: "border 0.2s ease-in-out, opacity 0.2s ease-in-out", }} > - {state.chartConfigs.map((chartConfig) => ( - <DndChartPreview - key={chartConfig.key} - chartKey={chartConfig.key} - dataSource={props.dataSource} - editing={editing} - layout={state.layout} + <ChartWrapper layout={state.layout}> + <ChartPreviewInner + dataSource={dataSource} + chartKey={activeChartKey} + disableMetadataButton /> - ))} - {isDragging && ( - <DragOverlay - zIndex={1000} - modifiers={[snapCenterToCursor]} - style={{ - width: "min(40vh, 400px)", - height: "fit-content", - border: - over && over.id !== activeChartKey - ? "2px solid green" - : "2px solid transparent", - opacity: over && over.id !== activeChartKey ? 0.8 : 1, - cursor: "grabbing", - pointerEvents: "none", - transition: - "border 0.2s ease-in-out, opacity 0.2s ease-in-out", - }} - > - <ChartWrapper editing={editing} layout={state.layout}> - <ChartPreviewInner - {...props} - chartKey={activeChartKey ?? undefined} - disableMetadataButton - /> - </ChartWrapper> - </DragOverlay> - )} - </DndContext> - </ChartPanelLayout> - ) : ( - <ChartWrapper editing={editing} layout={state.layout}> - <ChartPreviewInner {...props} /> - </ChartWrapper> - )} - </ChartTablePreviewProvider> + </ChartWrapper> + </DragOverlay> + )} + </DndContext> + </ChartPanelLayout> ); }; @@ -151,6 +166,7 @@ type DndChartPreviewProps = ChartWrapperProps & { const DndChartPreview = (props: DndChartPreviewProps) => { const { children, chartKey, dataSource, ...rest } = props; + const theme = useTheme(); const { setActivatorNodeRef, @@ -162,7 +178,7 @@ const DndChartPreview = (props: DndChartPreviewProps) => { const { setNodeRef: setDroppableNodeRef, - isOver: isOverDroppable, + isOver, active, } = useDroppable({ id: chartKey }); @@ -180,22 +196,22 @@ const DndChartPreview = (props: DndChartPreviewProps) => { ref={setRef} {...attributes} style={{ - opacity: isOverDroppable && !isDragging ? 0.8 : 1, - border: - isOverDroppable && !isDragging - ? "2px solid green" - : "2px solid transparent", + opacity: isOver && !isDragging ? 0.8 : 1, + border: `2px solid ${ + isOver && !isDragging ? theme.palette.primary.main : "transparent" + }`, + outline: "none", pointerEvents: active ? "none" : "auto", transition: "border 0.2s ease-in-out, opacity 0.2s ease-in-out", }} > <ChartPreviewInner - {...props} + dataSource={dataSource} chartKey={chartKey} titleSlot={ <DragHandle - ref={setActivatorNodeRef} {...listeners} + ref={setActivatorNodeRef} dragging={isDragging} /> } @@ -206,7 +222,7 @@ const DndChartPreview = (props: DndChartPreviewProps) => { }; type ChartPreviewInnerProps = ChartPreviewProps & { - chartKey?: string; + chartKey?: string | null; titleSlot?: React.ReactNode; disableMetadataButton?: boolean; }; diff --git a/app/config-types.ts b/app/config-types.ts index a64342a7a..ee37e757f 100644 --- a/app/config-types.ts +++ b/app/config-types.ts @@ -1244,7 +1244,7 @@ export const decodeConfiguratorState = ( */ export const getChartConfig = ( state: ConfiguratorState, - chartKey?: string + chartKey?: string | null ): ChartConfig => { if (state.state === "INITIAL" || state.state === "SELECTING_DATASET") { throw new Error("No chart config available!"); From 16cb895f689ef3d2c54d2e55a3dda8fe26af4f5d Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski <bartosz@interactivethings.com> Date: Tue, 30 Jan 2024 15:40:31 +0100 Subject: [PATCH 14/18] fix: Icon styles --- app/icons/components/IcLayoutDashboard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/icons/components/IcLayoutDashboard.tsx b/app/icons/components/IcLayoutDashboard.tsx index c414f51a8..fca46ee41 100644 --- a/app/icons/components/IcLayoutDashboard.tsx +++ b/app/icons/components/IcLayoutDashboard.tsx @@ -3,11 +3,11 @@ import * as React from "react"; function SvgIcLayoutDashboard(props: React.SVGProps<SVGSVGElement>) { return ( <svg - {...props} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1m" + {...props} > <path fill="currentColor" From 6c8aa8001577c4c40a1c95468978f5a5a97d4132 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski <bartosz@interactivethings.com> Date: Tue, 30 Jan 2024 15:48:07 +0100 Subject: [PATCH 15/18] feat: Keep metadata panel in charts for now + update styles --- app/components/chart-preview.tsx | 33 ++++++++++++++++--------------- app/components/metadata-panel.tsx | 1 - 2 files changed, 17 insertions(+), 17 deletions(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 9799143a1..548e3d7ba 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -149,7 +149,7 @@ const DashboardPreview = (props: DashboardPreviewProps) => { <ChartPreviewInner dataSource={dataSource} chartKey={activeChartKey} - disableMetadataButton + disableMetadataPanel /> </ChartWrapper> </DragOverlay> @@ -208,14 +208,13 @@ const DndChartPreview = (props: DndChartPreviewProps) => { <ChartPreviewInner dataSource={dataSource} chartKey={chartKey} - titleSlot={ + dragHandleSlot={ <DragHandle {...listeners} ref={setActivatorNodeRef} dragging={isDragging} /> } - disableMetadataButton /> </ChartWrapper> ); @@ -223,12 +222,12 @@ const DndChartPreview = (props: DndChartPreviewProps) => { type ChartPreviewInnerProps = ChartPreviewProps & { chartKey?: string | null; - titleSlot?: React.ReactNode; - disableMetadataButton?: boolean; + dragHandleSlot?: React.ReactNode; + disableMetadataPanel?: boolean; }; export const ChartPreviewInner = (props: ChartPreviewInnerProps) => { - const { dataSource, chartKey, titleSlot, disableMetadataButton } = props; + const { dataSource, chartKey, dragHandleSlot, disableMetadataPanel } = props; const [state, dispatch] = useConfiguratorState(); const chartConfig = getChartConfig(state, chartKey); const locale = useLocale(); @@ -331,16 +330,18 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => { } /> )} - {titleSlot} - {!disableMetadataButton && ( - <MetadataPanel - // FIXME: adapt to design - datasetIri={chartConfig.cubes[0].iri} - dataSource={dataSource} - dimensions={allComponents} - top={96} - /> - )} + <Flex sx={{ alignItems: "center", gap: 2 }}> + {!disableMetadataPanel && ( + <MetadataPanel + // FIXME: adapt to design + datasetIri={chartConfig.cubes[0].iri} + dataSource={dataSource} + dimensions={allComponents} + top={96} + /> + )} + {dragHandleSlot} + </Flex> </Flex> <Head> <title key="title"> diff --git a/app/components/metadata-panel.tsx b/app/components/metadata-panel.tsx index c3497ab0c..335c31901 100644 --- a/app/components/metadata-panel.tsx +++ b/app/components/metadata-panel.tsx @@ -132,7 +132,6 @@ const useOtherStyles = makeStyles<Theme>((theme) => { return { toggleButton: { alignSelf: "flex-start", - marginTop: theme.spacing(2), }, header: { display: "flex", From 6aab460c1069f72b9a46bc28b566c937c7aa8a1a Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski <bartosz@interactivethings.com> Date: Tue, 30 Jan 2024 16:24:42 +0100 Subject: [PATCH 16/18] feat: Improve drag and drop behavior --- app/components/chart-preview.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 548e3d7ba..c36cf33c0 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -46,6 +46,7 @@ import { } from "@/graphql/hooks"; import { DataCubePublicationStatus } from "@/graphql/resolver-types"; import { useLocale } from "@/locales/use-locale"; +import { useTransitionStore } from "@/stores/transition"; import { useTheme } from "@/themes"; import useEvent from "@/utils/use-event"; @@ -80,6 +81,7 @@ const DashboardPreview = (props: DashboardPreviewProps) => { const { dataSource, layoutType } = props; const [state, dispatch] = useConfiguratorState(isLayouting); const theme = useTheme(); + const transition = useTransitionStore(); const [isDragging, setIsDragging] = React.useState(false); const [activeChartKey, setActiveChartKey] = React.useState<string | null>( null @@ -91,6 +93,7 @@ const DashboardPreview = (props: DashboardPreviewProps) => { <DndContext collisionDetection={pointerWithin} onDragStart={(e) => { + transition.setEnable(false); setIsDragging(true); setActiveChartKey(`${e.active.id}`); }} @@ -100,6 +103,7 @@ const DashboardPreview = (props: DashboardPreviewProps) => { } }} onDragEnd={(e) => { + transition.setEnable(true); setIsDragging(false); setActiveChartKey(null); setOver(null); @@ -196,7 +200,7 @@ const DndChartPreview = (props: DndChartPreviewProps) => { ref={setRef} {...attributes} style={{ - opacity: isOver && !isDragging ? 0.8 : 1, + opacity: isDragging ? 0 : isOver ? 0.8 : 1, border: `2px solid ${ isOver && !isDragging ? theme.palette.primary.main : "transparent" }`, From 01352325f7454e41d762a21db1f293b83a44e617 Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski <bartosz@interactivethings.com> Date: Tue, 30 Jan 2024 17:58:19 +0100 Subject: [PATCH 17/18] feat: Snap corner to cursor in dashboard drag and drop --- app/components/chart-preview.tsx | 31 +++++++++++++++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index c36cf33c0..34c673a17 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -6,7 +6,8 @@ import { useDraggable, useDroppable, } from "@dnd-kit/core"; -import { snapCenterToCursor } from "@dnd-kit/modifiers"; +// import { snapCenterToCursor } from "@dnd-kit/modifiers"; +import { getEventCoordinates } from "@dnd-kit/utilities"; import { Trans } from "@lingui/macro"; import { Box } from "@mui/material"; import Head from "next/head"; @@ -50,6 +51,8 @@ import { useTransitionStore } from "@/stores/transition"; import { useTheme } from "@/themes"; import useEvent from "@/utils/use-event"; +import type { Modifier } from "@dnd-kit/core"; + type ChartPreviewProps = { dataSource: DataSource; }; @@ -136,7 +139,7 @@ const DashboardPreview = (props: DashboardPreviewProps) => { {isDragging && ( <DragOverlay zIndex={1000} - modifiers={[snapCenterToCursor]} + modifiers={[snapCornerToCursor]} style={{ opacity: over ? 0.8 : 1, width: "min(40vh, 400px)", @@ -409,3 +412,27 @@ export const ChartPreviewInner = (props: ChartPreviewInnerProps) => { </Flex> ); }; + +const snapCornerToCursor: Modifier = ({ + activatorEvent, + draggingNodeRect, + transform, +}) => { + if (draggingNodeRect && activatorEvent) { + const activatorCoordinates = getEventCoordinates(activatorEvent); + + if (!activatorCoordinates) { + return transform; + } + + const offsetX = activatorCoordinates.x - draggingNodeRect.left + 48; + + return { + ...transform, + x: transform.x + offsetX - draggingNodeRect.width, + y: transform.y, + }; + } + + return transform; +}; From a08db5c44b289adb0f053fa4d0b630b4eb30c2bd Mon Sep 17 00:00:00 2001 From: Bartosz Prusinowski <bartosz@interactivethings.com> Date: Wed, 31 Jan 2024 08:38:33 +0100 Subject: [PATCH 18/18] feat: Remove border and opacity transitions --- app/components/chart-preview.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/components/chart-preview.tsx b/app/components/chart-preview.tsx index 34c673a17..12329e5c7 100644 --- a/app/components/chart-preview.tsx +++ b/app/components/chart-preview.tsx @@ -149,7 +149,6 @@ const DashboardPreview = (props: DashboardPreviewProps) => { }`, cursor: "grabbing", pointerEvents: "none", - transition: "border 0.2s ease-in-out, opacity 0.2s ease-in-out", }} > <ChartWrapper layout={state.layout}> @@ -209,7 +208,6 @@ const DndChartPreview = (props: DndChartPreviewProps) => { }`, outline: "none", pointerEvents: active ? "none" : "auto", - transition: "border 0.2s ease-in-out, opacity 0.2s ease-in-out", }} > <ChartPreviewInner