From d24c4f6f73cd94dd40782f4a9a3f022449e80ef0 Mon Sep 17 00:00:00 2001 From: Bonn Date: Tue, 9 Apr 2024 11:45:43 +0700 Subject: [PATCH 01/88] chore: ASC-00000 - css module typescript config (#233) --- .vscode/settings.json | 3 + package.json | 1 + pnpm-lock.yaml | 271 ++++++++++++++++++++++++++++++++++++++++++ src/styles.d.ts | 4 - tsconfig.json | 9 +- 5 files changed, 282 insertions(+), 6 deletions(-) create mode 100644 .vscode/settings.json delete mode 100644 src/styles.d.ts diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..25fa6215f --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "typescript.tsdk": "node_modules/typescript/lib" +} diff --git a/package.json b/package.json index a799c44d9..347b6c8ca 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,7 @@ "ts-jest": "^29.1.1", "tsup": "^7.3.0", "typescript": "^4.9.5", + "typescript-plugin-css-modules": "^5.1.0", "vite": "^4.5.1", "vite-tsconfig-paths": "^4.2.3" }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8df1e9296..e141b03a3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -253,6 +253,9 @@ devDependencies: typescript: specifier: ^4.9.5 version: 4.9.5 + typescript-plugin-css-modules: + specifier: ^5.1.0 + version: 5.1.0(typescript@4.9.5) vite: specifier: ^4.5.1 version: 4.5.1 @@ -267,6 +270,10 @@ packages: engines: {node: '>=0.10.0'} dev: true + /@adobe/css-tools@4.3.3: + resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==} + dev: true + /@amityco/ts-sdk@6.20.1-615c591.0: resolution: {integrity: sha512-6HThI+wBUTKeHFbwbycrt3dk9WN9gnJiqJwqNRXiZD82svRQ7m9pdLKeahNLpKMEtZec8LybCEwOkbBcP5PFUw==} engines: {node: '>=12', npm: '>=6'} @@ -4310,6 +4317,18 @@ packages: resolution: {integrity: sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==} dev: true + /@types/postcss-modules-local-by-default@4.0.2: + resolution: {integrity: sha512-CtYCcD+L+trB3reJPny+bKWKMzPfxEyQpKIwit7kErnOexf5/faaGpkFy4I5AwbV4hp1sk7/aTg0tt0B67VkLQ==} + dependencies: + postcss: 8.4.38 + dev: true + + /@types/postcss-modules-scope@3.0.4: + resolution: {integrity: sha512-//ygSisVq9kVI0sqx3UPLzWIMCmtSVrzdljtuaAEJtGoGnpjBikZ2sXO5MpH9SnWX9HRfXxHifDAXcQjupWnIQ==} + dependencies: + postcss: 8.4.38 + dev: true + /@types/pretty-hrtime@1.0.3: resolution: {integrity: sha512-nj39q0wAIdhwn7DGUyT9irmsKK1tV0bd5WFEhgpqNTMFZ8cE+jieuTphCW0tfdm47S2zVT5mr09B28b1chmQMA==} dev: true @@ -5955,6 +5974,12 @@ packages: engines: {node: '>= 0.6'} dev: true + /copy-anything@2.0.6: + resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==} + dependencies: + is-what: 3.14.1 + dev: true + /copy-to-clipboard@3.3.3: resolution: {integrity: sha512-2KV8NhB5JqC3ky0r9PMCAZKbUHSwtEo4CwCs0KXgruG43gX5PMqDEBbVU4OUzw2MuAWUfsuFmWvEKG5QRfSnJA==} dependencies: @@ -6031,6 +6056,12 @@ packages: source-map: 0.6.1 dev: false + /cssesc@3.0.0: + resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} + engines: {node: '>=4'} + hasBin: true + dev: true + /csstype@3.1.2: resolution: {integrity: sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==} dev: true @@ -6272,6 +6303,11 @@ packages: engines: {node: '>=12'} dev: true + /dotenv@16.4.5: + resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==} + engines: {node: '>=12'} + dev: true + /dotgitignore@2.1.0: resolution: {integrity: sha512-sCm11ak2oY6DglEPpCB8TixLjWAxd3kJTs6UIcSasNYxXdFPV+YKlye92c8H4kKFqV5qYMIh7d+cYecEg0dIkA==} engines: {node: '>=6'} @@ -6396,6 +6432,15 @@ packages: hasBin: true dev: true + /errno@0.1.8: + resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==} + hasBin: true + requiresBuild: true + dependencies: + prr: 1.0.1 + dev: true + optional: true + /error-ex@1.3.2: resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==} dependencies: @@ -7698,6 +7743,24 @@ packages: safer-buffer: 2.1.2 dev: true + /iconv-lite@0.6.3: + resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} + engines: {node: '>=0.10.0'} + requiresBuild: true + dependencies: + safer-buffer: 2.1.2 + dev: true + optional: true + + /icss-utils@5.1.0(postcss@8.4.38): + resolution: {integrity: sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==} + engines: {node: ^10 || ^12 || >= 14} + peerDependencies: + postcss: ^8.1.0 + dependencies: + postcss: 8.4.38 + dev: true + /ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} dev: true @@ -7707,6 +7770,18 @@ packages: engines: {node: '>= 4'} dev: true + /image-size@0.5.5: + resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==} + engines: {node: '>=0.10.0'} + hasBin: true + requiresBuild: true + dev: true + optional: true + + /immutable@4.3.5: + resolution: {integrity: sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==} + dev: true + /import-fresh@3.3.0: resolution: {integrity: sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==} engines: {node: '>=6'} @@ -8029,6 +8104,10 @@ packages: call-bind: 1.0.5 dev: true + /is-what@3.14.1: + resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==} + dev: true + /is-wsl@2.2.0: resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==} engines: {node: '>=8'} @@ -8710,6 +8789,24 @@ packages: dotenv-expand: 10.0.0 dev: true + /less@4.2.0: + resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==} + engines: {node: '>=6'} + hasBin: true + dependencies: + copy-anything: 2.0.6 + parse-node-version: 1.0.1 + tslib: 2.6.2 + optionalDependencies: + errno: 0.1.8 + graceful-fs: 4.2.11 + image-size: 0.5.5 + make-dir: 2.1.0 + mime: 1.6.0 + needle: 3.3.1 + source-map: 0.6.1 + dev: true + /leven@2.1.0: resolution: {integrity: sha512-nvVPLpIHUxCUoRLrFqTgSxXJ614d8AgQoWl7zPe/2VadE8+1dpU3LBhowRuBAcuwruWtOdD8oYC9jDNJjXDPyA==} engines: {node: '>=0.10.0'} @@ -8859,6 +8956,10 @@ packages: p-locate: 5.0.0 dev: true + /lodash.camelcase@4.3.0: + resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} + dev: true + /lodash.debounce@4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} dev: true @@ -9288,6 +9389,17 @@ packages: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true + /needle@3.3.1: + resolution: {integrity: sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==} + engines: {node: '>= 4.4.x'} + hasBin: true + requiresBuild: true + dependencies: + iconv-lite: 0.6.3 + sax: 1.3.0 + dev: true + optional: true + /negotiator@0.6.3: resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==} engines: {node: '>= 0.6'} @@ -9625,6 +9737,11 @@ packages: lines-and-columns: 1.2.4 dev: true + /parse-node-version@1.0.1: + resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==} + engines: {node: '>= 0.10'} + dev: true + /parseqs@0.0.5: resolution: {integrity: sha512-B3Nrjw2aL7aI4TDujOzfA4NsEc4u1lVcIRE0xesutH8kjeWF70uk+W5cBlIQx04zUH9NTBvuN36Y9xLRPK6Jjw==} dependencies: @@ -9739,6 +9856,7 @@ packages: /pify@4.0.1: resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} engines: {node: '>=6'} + requiresBuild: true dev: true /pirates@4.0.6: @@ -9773,6 +9891,23 @@ packages: dependencies: '@babel/runtime': 7.23.7 + /postcss-load-config@3.1.4(postcss@8.4.38): + resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} + engines: {node: '>= 10'} + peerDependencies: + postcss: '>=8.0.9' + ts-node: '>=9.0.0' + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + dependencies: + lilconfig: 2.1.0 + postcss: 8.4.38 + yaml: 1.10.2 + dev: true + /postcss-load-config@4.0.2(postcss@8.4.33): resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} engines: {node: '>= 14'} @@ -9790,6 +9925,45 @@ packages: yaml: 2.3.4 dev: true + /postcss-modules-extract-imports@3.1.0(postcss@8.4.38): + resolution: {integrity: sha512-k3kNe0aNFQDAZGbin48pL2VNidTF0w4/eASDsxlyspobzU3wZQLOGj7L9gfRe0Jo9/4uud09DsjFNH7winGv8Q==} + engines: {node: ^10 || ^12 || >= 14} + peerDependencies: + postcss: ^8.1.0 + dependencies: + postcss: 8.4.38 + dev: true + + /postcss-modules-local-by-default@4.0.5(postcss@8.4.38): + resolution: {integrity: sha512-6MieY7sIfTK0hYfafw1OMEG+2bg8Q1ocHCpoWLqOKj3JXlKu4G7btkmM/B7lFubYkYWmRSPLZi5chid63ZaZYw==} + engines: {node: ^10 || ^12 || >= 14} + peerDependencies: + postcss: ^8.1.0 + dependencies: + icss-utils: 5.1.0(postcss@8.4.38) + postcss: 8.4.38 + postcss-selector-parser: 6.0.16 + postcss-value-parser: 4.2.0 + dev: true + + /postcss-modules-scope@3.2.0(postcss@8.4.38): + resolution: {integrity: sha512-oq+g1ssrsZOsx9M96c5w8laRmvEu9C3adDSjI8oTcbfkrTE8hx/zfyobUoWIxaKPO8bt6S62kxpw5GqypEw1QQ==} + engines: {node: ^10 || ^12 || >= 14} + peerDependencies: + postcss: ^8.1.0 + dependencies: + postcss: 8.4.38 + postcss-selector-parser: 6.0.16 + dev: true + + /postcss-selector-parser@6.0.16: + resolution: {integrity: sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==} + engines: {node: '>=4'} + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + dev: true + /postcss-value-parser@4.2.0: resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} dev: true @@ -9812,6 +9986,15 @@ packages: source-map-js: 1.0.2 dev: true + /postcss@8.4.38: + resolution: {integrity: sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.7 + picocolors: 1.0.0 + source-map-js: 1.2.0 + dev: true + /prelude-ls@1.2.1: resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==} engines: {node: '>= 0.8.0'} @@ -9884,6 +10067,12 @@ packages: resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} dev: true + /prr@1.0.1: + resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==} + requiresBuild: true + dev: true + optional: true + /pump@2.0.1: resolution: {integrity: sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==} dependencies: @@ -10479,6 +10668,10 @@ packages: resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==} engines: {node: '>=0.10.0'} + /reserved-words@0.1.2: + resolution: {integrity: sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==} + dev: true + /resize-observer-polyfill@1.5.1: resolution: {integrity: sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==} dev: false @@ -10637,6 +10830,20 @@ packages: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} dev: true + /sass@1.74.1: + resolution: {integrity: sha512-w0Z9p/rWZWelb88ISOLyvqTWGmtmu2QJICqDBGyNnfG4OUnPX9BBjjYIXUpXCMOOg5MQWNpqzt876la1fsTvUA==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + chokidar: 3.5.3 + immutable: 4.3.5 + source-map-js: 1.0.2 + dev: true + + /sax@1.3.0: + resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} + dev: true + /scheduler@0.23.0: resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} dependencies: @@ -10842,6 +11049,11 @@ packages: engines: {node: '>=0.10.0'} dev: true + /source-map-js@1.2.0: + resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} + engines: {node: '>=0.10.0'} + dev: true + /source-map-support@0.5.13: resolution: {integrity: sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==} dependencies: @@ -10865,6 +11077,11 @@ packages: resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==} engines: {node: '>=0.10.0'} + /source-map@0.7.4: + resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} + engines: {node: '>= 8'} + dev: true + /source-map@0.8.0-beta.0: resolution: {integrity: sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==} engines: {node: '>= 8'} @@ -11144,6 +11361,19 @@ packages: /stylis@4.3.1: resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==} + /stylus@0.62.0: + resolution: {integrity: sha512-v3YCf31atbwJQIMtPNX8hcQ+okD4NQaTuKGUWfII8eaqn+3otrbttGL1zSMZAAtiPsBztQnujVBugg/cXFUpyg==} + hasBin: true + dependencies: + '@adobe/css-tools': 4.3.3 + debug: 4.3.4 + glob: 7.2.3 + sax: 1.3.0 + source-map: 0.7.4 + transitivePeerDependencies: + - supports-color + dev: true + /substyle@9.4.1(react@18.2.0): resolution: {integrity: sha512-VOngeq/W1/UkxiGzeqVvDbGDPM8XgUyJVWjrqeh+GgKqspEPiLYndK+XRcsKUHM5Muz/++1ctJ1QCF/OqRiKWA==} peerDependencies: @@ -11505,6 +11735,15 @@ packages: strip-bom: 3.0.0 dev: true + /tsconfig-paths@4.2.0: + resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==} + engines: {node: '>=6'} + dependencies: + json5: 2.2.3 + minimist: 1.2.8 + strip-bom: 3.0.0 + dev: true + /tslib@1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} dev: true @@ -11666,6 +11905,33 @@ packages: resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==} dev: true + /typescript-plugin-css-modules@5.1.0(typescript@4.9.5): + resolution: {integrity: sha512-6h+sLBa4l+XYSTn/31vZHd/1c3SvAbLpobY6FxDiUOHJQG1eD9Gh3eCs12+Eqc+TCOAdxcO+zAPvUq0jBfdciw==} + peerDependencies: + typescript: '>=4.0.0' + dependencies: + '@types/postcss-modules-local-by-default': 4.0.2 + '@types/postcss-modules-scope': 3.0.4 + dotenv: 16.4.5 + icss-utils: 5.1.0(postcss@8.4.38) + less: 4.2.0 + lodash.camelcase: 4.3.0 + postcss: 8.4.38 + postcss-load-config: 3.1.4(postcss@8.4.38) + postcss-modules-extract-imports: 3.1.0(postcss@8.4.38) + postcss-modules-local-by-default: 4.0.5(postcss@8.4.38) + postcss-modules-scope: 3.2.0(postcss@8.4.38) + reserved-words: 0.1.2 + sass: 1.74.1 + source-map-js: 1.0.2 + stylus: 0.62.0 + tsconfig-paths: 4.2.0 + typescript: 4.9.5 + transitivePeerDependencies: + - supports-color + - ts-node + dev: true + /typescript@4.9.5: resolution: {integrity: sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==} engines: {node: '>=4.2.0'} @@ -12203,6 +12469,11 @@ packages: resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} dev: true + /yaml@1.10.2: + resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==} + engines: {node: '>= 6'} + dev: true + /yaml@2.3.1: resolution: {integrity: sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==} engines: {node: '>= 14'} diff --git a/src/styles.d.ts b/src/styles.d.ts deleted file mode 100644 index 3d673e2eb..000000000 --- a/src/styles.d.ts +++ /dev/null @@ -1,4 +0,0 @@ -declare module '*.module.css' { - const classes: { [key: string]: string }; - export default classes; -} diff --git a/tsconfig.json b/tsconfig.json index 1f99a563b..28a37ad95 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -102,8 +102,13 @@ /* Completeness */ // "skipDefaultLibCheck": true, /* Skip type checking .d.ts files that are included with TypeScript. */ "skipLibCheck": true /* Skip type checking all .d.ts files. */, - "allowJs": true + "allowJs": true, + "plugins": [ + { + "name": "typescript-plugin-css-modules" + } + ] }, - "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "src/global.d.ts"], + "include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "src/global.d.ts", "**/*.module.css"], "exclude": ["node_modules", "vite.config.ts"] } From 54c354eacabf8b05cc7e60898b2a772995a27624 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Tue, 9 Apr 2024 13:17:10 +0700 Subject: [PATCH 02/88] fix: ASC-21254 - align api signature for draft page (#210) * fix: can't upload story * fix: story image renderer * fix: align comment tray component props * fix: align story tab component props * fix: change export name to align signature api * fix: ddraft page * fix: align signature api * fix: fill color --- src/index.ts | 2 +- src/social/components/Comment/index.tsx | 2 +- .../CommunityInfo/UICommunityInfo.tsx | 2 + src/social/components/CommunityInfo/index.tsx | 7 +- src/social/pages/Application/index.tsx | 77 ++++++++------- src/social/pages/CommunityFeed/index.tsx | 81 ++-------------- .../v4/components/CommentTray/CommentTray.tsx | 32 ++++--- .../v4/components/CommentTray/sdk.stories.tsx | 69 ++++++++++++++ .../v4/components/StoryTab/StoryTab.tsx | 90 +++++++++++------- .../v4/internal-components/Comment/index.tsx | 20 ++-- .../v4/internal-components/Comment/styles.tsx | 1 + .../CommentComposeBar/CommentComposeBar.tsx | 11 +-- .../CommentList/CommentList.tsx | 6 +- .../StoryCommentComposeBar.tsx | 15 +-- .../StoryViewer/Renderers/Image.tsx | 16 ++-- .../StoryViewer/Renderers/Video.tsx | 4 +- .../internal-components/StoryViewer/index.tsx | 10 +- src/social/v4/pages/DraftsPage/DraftsPage.tsx | 94 +++++++++++-------- src/v4/social/providers/StoryProvider.tsx | 28 ++++++ 19 files changed, 332 insertions(+), 235 deletions(-) create mode 100644 src/social/v4/components/CommentTray/sdk.stories.tsx create mode 100644 src/v4/social/providers/StoryProvider.tsx diff --git a/src/index.ts b/src/index.ts index 25fbb1455..d7176e60c 100644 --- a/src/index.ts +++ b/src/index.ts @@ -20,7 +20,7 @@ export { useSDK as useAmitySDK } from '~/core/hooks/useSDK'; // v4 export { - DraftsPage as AmityCreateStoryPage, + DraftsPage as AmityDraftStoryPage, StoryPage as AmityViewStoryPage, } from '~/social/v4/pages'; export { diff --git a/src/social/components/Comment/index.tsx b/src/social/components/Comment/index.tsx index 8a6ecb9e1..8b7d1847e 100644 --- a/src/social/components/Comment/index.tsx +++ b/src/social/components/Comment/index.tsx @@ -37,7 +37,7 @@ import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; import useCommentFlaggedByMe from '~/social/hooks/useCommentFlaggedByMe'; import useCommentPermission from '~/social/hooks/useCommentPermission'; import useCommentSubscription from '~/social/hooks/useCommentSubscription'; -import useStory from '~/social/hooks/useStory'; + import { ERROR_RESPONSE } from '~/social/constants'; const REPLIES_PER_PAGE = 5; diff --git a/src/social/components/CommunityInfo/UICommunityInfo.tsx b/src/social/components/CommunityInfo/UICommunityInfo.tsx index 68dc74926..a619e88f5 100644 --- a/src/social/components/CommunityInfo/UICommunityInfo.tsx +++ b/src/social/components/CommunityInfo/UICommunityInfo.tsx @@ -27,6 +27,7 @@ import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; import millify from 'millify'; import { isNonNullable } from '~/helpers/utils'; import { StoryTab } from '~/social/v4/components/StoryTab'; +import { AmityStoryTabComponentType } from '~/social/v4/components/StoryTab/StoryTab'; interface UICommunityInfoProps { communityId: string; @@ -157,6 +158,7 @@ const UICommunityInfo = ({ )} >; stories: (Amity.Story | undefined)[]; } -const CommunityInfo = ({ communityId, setStoryFile, stories }: CommunityInfoProps) => { +const CommunityInfo = ({ communityId, stories }: CommunityInfoProps) => { + const { setFile } = useStoryContext(); const haveStories = stories?.length > 0; const isStorySyncing = haveStories && stories.some((story) => story?.syncState === 'syncing'); const isStoryErrored = haveStories && stories.some((story) => story?.syncState === 'error'); @@ -72,7 +73,7 @@ const CommunityInfo = ({ communityId, setStoryFile, stories }: CommunityInfoProp onOk: () => leaveCommunity(), }) } - setStoryFile={setStoryFile} + setStoryFile={setFile} haveStories={haveStories || false} haveStoryPermission={haveStoryPermission} isStorySyncing={isStorySyncing || false} diff --git a/src/social/pages/Application/index.tsx b/src/social/pages/Application/index.tsx index a990431fe..68d4ca6c8 100644 --- a/src/social/pages/Application/index.tsx +++ b/src/social/pages/Application/index.tsx @@ -18,6 +18,7 @@ import { useNavigation } from '~/social/providers/NavigationProvider'; import useSDK from '~/core/hooks/useSDK'; import { ViewStoriesPage } from '~/social/v4/pages/StoryPage'; import { usePageBehavior } from '~/social/v4/providers/PageBehaviorProvider'; +import { StoryProvider } from '~/v4/social/providers/StoryProvider'; const ApplicationContainer = styled.div` height: 100%; @@ -69,42 +70,46 @@ const Community = () => { }, [client]); return ( - - }> - {page.type === PageTypes.Explore && } - - {page.type === PageTypes.NewsFeed && } - - {page.type === PageTypes.CommunityFeed && ( - - )} - - {page.type === PageTypes.ViewStory && ( - - - - )} - - {page.type === PageTypes.CommunityEdit && ( - - )} - - {page.type === PageTypes.Category && ( - - )} - - {page.type === PageTypes.UserFeed && ( - - )} - - {page.type === PageTypes.UserEdit && } - - + + + }> + {page.type === PageTypes.Explore && } + + {page.type === PageTypes.NewsFeed && ( + + )} + + {page.type === PageTypes.CommunityFeed && ( + + )} + + {page.type === PageTypes.ViewStory && ( + + + + )} + + {page.type === PageTypes.CommunityEdit && ( + + )} + + {page.type === PageTypes.Category && ( + + )} + + {page.type === PageTypes.UserFeed && ( + + )} + + {page.type === PageTypes.UserEdit && } + + + ); }; diff --git a/src/social/pages/CommunityFeed/index.tsx b/src/social/pages/CommunityFeed/index.tsx index 7d5dd4bab..1ce42171b 100644 --- a/src/social/pages/CommunityFeed/index.tsx +++ b/src/social/pages/CommunityFeed/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState, useMemo } from 'react'; -import { StoryRepository, SubscriptionLevels } from '@amityco/ts-sdk'; +import { SubscriptionLevels } from '@amityco/ts-sdk'; import { FormattedMessage } from 'react-intl'; import CommunityCreatedModal from '~/social/components/CommunityCreatedModal'; @@ -20,7 +20,7 @@ import useCommunitySubscription from '~/social/hooks/useCommunitySubscription'; import usePostsCollection from '~/social/hooks/collections/usePostsCollection'; import useFile from '~/core/hooks/useFile'; -import { notification } from '~/core/components/Notification'; + import { CommunitySideMenuOverlay, HeadTitle, @@ -31,6 +31,7 @@ import useStories from '~/social/hooks/useStories'; import { BarsIcon } from '~/icons'; import { DraftsPage } from '~/social/v4/pages/DraftsPage'; +import { useStoryContext } from '~/v4/social/providers/StoryProvider'; interface CommunityFeedProps { communityId: string; @@ -40,6 +41,7 @@ interface CommunityFeedProps { } const CommunityFeed = ({ communityId, isNewCommunity, isOpen, toggleOpen }: CommunityFeedProps) => { + const { file } = useStoryContext(); const { stories } = useStories({ targetId: communityId, targetType: 'community', @@ -79,84 +81,19 @@ const CommunityFeed = ({ communityId, isNewCommunity, isOpen, toggleOpen }: Comm const [isCreatedModalOpened, setCreatedModalOpened] = useState(isNewCommunity); - const [file, setFile] = useState(null); - const [isDraft, setIsDraft] = useState(false); - - const createStory = async ( - file: File, - imageMode: 'fit' | 'fill', - metadata: Amity.Metadata | undefined, - items: Amity.StoryItem[] | undefined = [], - ) => { - try { - const formData = new FormData(); - formData.append('files', file); - if (file?.type.includes('image')) { - setFile(null); - const { data: imageData } = await StoryRepository.createImageStory( - 'community', - communityId, - formData, - metadata, - imageMode, - items, - ); - if (imageData) { - notification.success({ - content: , - }); - } - } else { - setFile(null); - const { data: videoData } = await StoryRepository.createVideoStory( - 'community', - communityId, - formData, - metadata, - items, - ); - if (videoData) { - notification.success({ - content: , - }); - } - } - } catch (error) { - notification.info({ - content: , - }); - } - }; - - const discardStory = () => { - setFile(null); - setIsDraft(false); - }; - useEffect(() => { if (!tabs.find((tab) => tab.value === activeTab)) { setActiveTab(tabs[0].value); } }, [activeTab, tabs]); - useEffect(() => { - if (file) { - setIsDraft(true); - } - if (!file && isDraft) { - setIsDraft(false); - } - }, [file]); - - if (isDraft && file) { + if (file) { return ( ); @@ -172,7 +109,7 @@ const CommunityFeed = ({ communityId, isNewCommunity, isOpen, toggleOpen }: Comm - + void; onClickReply: ( replyTo?: string, @@ -44,17 +45,19 @@ interface CommentTrayProps { } export const CommentTray = ({ + referenceType, + referenceId, + community, + shouldAllowInteraction = true, + shouldAllowCreation = true, pageId = '*', storyId, commentId, - referenceType, - referenceId, - limit = REPLIES_PER_PAGE, replyTo, - isJoined, - isOpen, isReplying, - allowCommentInStory, + limit = REPLIES_PER_PAGE, + isOpen, + isJoined, onClose, onClickReply, onCancelReply, @@ -88,6 +91,7 @@ export const CommentTray = ({ backgroundColor: primaryColor, borderTopLeftRadius: '1rem', borderTopRightRadius: '1rem', + borderBottom: 'none', }} /> = { + title: 'Social/CommentTray', + component: CommentTray, + args: { + referenceType: 'post', + referenceId: 'post123', + community: { + communityId: 'community123', + displayName: 'Community 123', + isPublic: true, + isJoined: true, + }, + shouldAllowInteraction: true, + shouldAllowCreation: true, + pageId: '*', + storyId: 'story123', + isJoined: true, + allowCommentInStory: true, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + isOpen: true, + }, +}; + +export const WithReply: Story = { + args: { + isOpen: true, + isReplying: true, + replyTo: 'comment456', + }, +}; + +export const WithLimit: Story = { + args: { + isOpen: true, + limit: 10, + }, +}; + +export const Closed: Story = { + args: { + isOpen: false, + }, +}; + +export const WithComment: Story = { + render: (args) => { + // const {comments,isLoading} = useCommentsCollection({ + // referenceType:"story", + // referenceId:"660a3b7fc5d2301929cff8ce" + // }); + + return ; + }, + args: { + isOpen: true, + }, +}; diff --git a/src/social/v4/components/StoryTab/StoryTab.tsx b/src/social/v4/components/StoryTab/StoryTab.tsx index 08324db2a..79c2791fd 100644 --- a/src/social/v4/components/StoryTab/StoryTab.tsx +++ b/src/social/v4/components/StoryTab/StoryTab.tsx @@ -14,7 +14,13 @@ import { import StoryRing from './StoryRing'; import { notification } from '~/core/components/Notification'; +export enum AmityStoryTabComponentType { + CommunityFeed = 'communityFeed', + GlobalFeed = 'globalFeed', +} + interface StoryTabProps { + type: AmityStoryTabComponentType; haveStoryPermission: boolean; avatar: string | null; pageId?: string; @@ -31,19 +37,19 @@ interface StoryTabProps { onChange?: (file: File | null) => void; } -export const StoryTab = ({ +export const StoryTab: React.FC = ({ + type, + haveStoryPermission, + avatar, pageId = '*', - elementId = '*', title = 'Story', - haveStoryPermission = false, storyRing = false, isSeen = false, uploadingStory = false, isErrored = false, - avatar, onClick, onChange, -}: StoryTabProps) => { +}) => { const fileInputRef = useRef(null); const handleAddIconClick = () => { @@ -71,34 +77,48 @@ export const StoryTab = ({ }); }, []); - return ( - - - {storyRing && ( - - )} - - {haveStoryPermission && ( - <> - - - - )} - {isErrored && } - - - {title} - - - ); + const renderStoryTab = () => { + switch (type) { + case AmityStoryTabComponentType.CommunityFeed: + return ( + + + {storyRing && ( + + )} + + {haveStoryPermission && ( + <> + + + + )} + {isErrored && } + + + {title} + + + ); + + default: + return null; + } + }; + + return renderStoryTab(); }; diff --git a/src/social/v4/internal-components/Comment/index.tsx b/src/social/v4/internal-components/Comment/index.tsx index ea09d9aae..f666e6d90 100644 --- a/src/social/v4/internal-components/Comment/index.tsx +++ b/src/social/v4/internal-components/Comment/index.tsx @@ -50,7 +50,7 @@ import UIComment from './UIComment'; import { LIKE_REACTION_KEY } from '~/constants'; import { CommentList } from '~/social/v4/internal-components/CommentList'; import { ReactionList } from '~/social/v4/components/ReactionList'; -import { useReactionsCollection } from '~/social/v4/hooks/collections/useReactionsCollection'; +import { useTheme } from 'styled-components'; const REPLIES_PER_PAGE = 5; @@ -105,9 +105,17 @@ interface CommentProps { ) => void; style?: React.CSSProperties; onClickReactionList: (commentId: string) => void; + shouldAllowInteraction?: boolean; } -const Comment = ({ commentId, readonly, onClickReply, style }: CommentProps) => { +const Comment = ({ + commentId, + readonly, + onClickReply, + style, + shouldAllowInteraction, +}: CommentProps) => { + const theme = useTheme(); const comment = useComment(commentId); const story = useStory(comment?.referenceId); const [bottomSheet, setBottomSheet] = useState(false); @@ -233,7 +241,7 @@ const Comment = ({ commentId, readonly, onClickReply, style }: CommentProps) => ? formatMessage({ id: 'reply.edit' }) : formatMessage({ id: 'comment.edit' }), action: startEditing, - icon: , + icon: , } : null, canReport @@ -242,7 +250,7 @@ const Comment = ({ commentId, readonly, onClickReply, style }: CommentProps) => ? formatMessage({ id: 'report.undoReport' }) : formatMessage({ id: 'report.doReport' }), action: handleReportComment, - icon: , + icon: , } : null, canDelete @@ -251,7 +259,7 @@ const Comment = ({ commentId, readonly, onClickReply, style }: CommentProps) => ? formatMessage({ id: 'reply.delete' }) : formatMessage({ id: 'comment.delete' }), action: deleteComment, - icon: , + icon: , } : null, ].filter(isNonNullable); @@ -352,7 +360,7 @@ const Comment = ({ commentId, readonly, onClickReply, style }: CommentProps) => setBottomSheet(false); }} > - {bottomSheetAction.icon} + {bottomSheetAction?.icon} {bottomSheetAction.name} ))} diff --git a/src/social/v4/internal-components/Comment/styles.tsx b/src/social/v4/internal-components/Comment/styles.tsx index 48ed42adb..8967647c3 100644 --- a/src/social/v4/internal-components/Comment/styles.tsx +++ b/src/social/v4/internal-components/Comment/styles.tsx @@ -59,6 +59,7 @@ export const MobileSheetButton = styled(SecondaryButton)` align-items: center; gap: 0.5rem; width: 100%; + margin-bottom: 0.5rem; `; export const CommentBlock = styled.div` diff --git a/src/social/v4/internal-components/CommentComposeBar/CommentComposeBar.tsx b/src/social/v4/internal-components/CommentComposeBar/CommentComposeBar.tsx index f8c462d2e..03988ee4e 100644 --- a/src/social/v4/internal-components/CommentComposeBar/CommentComposeBar.tsx +++ b/src/social/v4/internal-components/CommentComposeBar/CommentComposeBar.tsx @@ -23,11 +23,11 @@ const TOTAL_MENTIONEES_LIMIT = 30; const COMMENT_LENGTH_LIMIT = 50000; interface CommentComposeBarProps { + targetId: string; className?: string; userToReply?: Amity.User['displayName'] | null; onSubmit: (text: string, mentionees: Mentionees, metadata: Metadata) => void; onCancelReply?: () => void; - storyId?: string; isReplying?: boolean; style?: React.CSSProperties; } @@ -36,16 +36,15 @@ export const CommentComposeBar = ({ style, userToReply, onSubmit, - storyId, + targetId, }: CommentComposeBarProps) => { - const story = useStory(storyId); const { currentUserId } = useSDK(); const user = useUser(currentUserId); const avatarFileUrl = useImage({ fileId: user?.avatarFileId, imageSize: 'small' }); const { text, markup, mentions, mentionees, metadata, onChange, clearAll, queryMentionees } = useSocialMention({ - targetId: story?.targetId, - targetType: story?.targetType as string, + targetId: targetId, + targetType: 'community', }); const { formatMessage } = useIntl(); @@ -55,7 +54,7 @@ export const CommentComposeBar = ({ commentInputRef.current?.focus(); }, []); - if (story == null) return ; + if (targetId == null) return ; const addComment = () => { if (text === '') return; diff --git a/src/social/v4/internal-components/CommentList/CommentList.tsx b/src/social/v4/internal-components/CommentList/CommentList.tsx index 55806d334..1431b4343 100644 --- a/src/social/v4/internal-components/CommentList/CommentList.tsx +++ b/src/social/v4/internal-components/CommentList/CommentList.tsx @@ -28,6 +28,7 @@ interface CommentListProps { ) => void; style?: React.CSSProperties; onClickReaction?: (commentId: string) => void; + shouldAllowInteraction?: boolean; } export const CommentList = ({ @@ -41,7 +42,7 @@ export const CommentList = ({ isExpanded = true, onClickReply, style, - onClickReaction, + shouldAllowInteraction, }: CommentListProps) => { const [selectedCommentId, setSelectedCommentId] = useState(''); const { comments, hasMore, loadMore } = useCommentsCollection({ @@ -51,6 +52,8 @@ export const CommentList = ({ limit, }); + console.log(comments); + const { formatMessage } = useIntl(); const handleReactionClick = (commentId: string) => { @@ -109,6 +112,7 @@ export const CommentList = ({ onClickReply={onClickReply} style={style} onClickReactionList={() => handleReactionClick(comment.commentId)} + shouldAllowInteraction={shouldAllowInteraction} /> ); })} diff --git a/src/social/v4/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx b/src/social/v4/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx index 3082b9c1b..afc4ff14f 100644 --- a/src/social/v4/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx +++ b/src/social/v4/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx @@ -16,11 +16,12 @@ import { } from '~/social/v4/internal-components/CommentComposeBar/styles'; interface StoryCommentComposeBarProps { - storyId: string; + communityId: string; comment?: Amity.Comment | null; isJoined?: boolean; isReplying?: boolean; allowCommentInStory?: boolean; + shouldAllowCreation?: boolean; replyTo?: string | null; onCancelReply?: () => void; referenceType?: string; @@ -30,9 +31,9 @@ interface StoryCommentComposeBarProps { } export const StoryCommentComposeBar = ({ - storyId, + communityId, isJoined, - allowCommentInStory, + shouldAllowCreation, isReplying, replyTo, onCancelReply, @@ -76,7 +77,7 @@ export const StoryCommentComposeBar = ({ }); }; - if (isJoined && allowCommentInStory) { + if (isJoined && shouldAllowCreation) { return ( <> {isReplying && ( @@ -91,13 +92,13 @@ export const StoryCommentComposeBar = ({ {!isReplying ? ( handleAddComment(text, mentionees, metadata)} style={style} /> ) : ( { handleReplyToComment(replyText, mentionees, metadata); @@ -110,7 +111,7 @@ export const StoryCommentComposeBar = ({ ); } - if (isJoined && allowCommentInStory) { + if (isJoined && shouldAllowCreation) { return ( {formatMessage({ id: 'storyViewer.commentSheet.disabled' })} diff --git a/src/social/v4/internal-components/StoryViewer/Renderers/Image.tsx b/src/social/v4/internal-components/StoryViewer/Renderers/Image.tsx index 927521b96..17f33ce75 100644 --- a/src/social/v4/internal-components/StoryViewer/Renderers/Image.tsx +++ b/src/social/v4/internal-components/StoryViewer/Renderers/Image.tsx @@ -51,8 +51,8 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { const isLiked = !!(story && story.myReactions && story.myReactions.includes(LIKE_REACTION_KEY)); const totalLikes = story.reactions[LIKE_REACTION_KEY] || 0; - const { + storyId, syncState, reach, commentsCount, @@ -209,14 +209,16 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { pageId="*" isOpen={isOpenCommentSheet} onClose={closeCommentSheet} - referenceId={selectedComment?.referenceId} - referenceType={selectedComment?.referenceType} + referenceId={selectedComment?.referenceId || ''} + referenceType={(selectedComment?.referenceType as Amity.CommentReferenceType) || 'story'} + community={community as Amity.Community} + shouldAllowCreation={community?.allowCommentInStory || true} + shouldAllowInteraction={isJoined || true} commentId={selectedComment?.commentId} isReplying={isReplying} replyTo={replyTo} - storyId={story.storyId} + storyId={storyId} isJoined={isJoined} - allowCommentInStory={community?.allowCommentInStory} onCancelReply={() => setIsReplying(false)} onClickReply={onClickReply} /> @@ -233,13 +235,13 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { onClick={() => story.analytics.markLinkAsClicked()} > - {story.items?.[0].data?.customText || story.items?.[0].data.url} + {story.items?.[0]?.data?.customText || story.items?.[0].data.url} )}
setIsReplying(false)} onClickReply={onClickReply} /> diff --git a/src/social/v4/internal-components/StoryViewer/index.tsx b/src/social/v4/internal-components/StoryViewer/index.tsx index a7eb22941..18af66b30 100644 --- a/src/social/v4/internal-components/StoryViewer/index.tsx +++ b/src/social/v4/internal-components/StoryViewer/index.tsx @@ -267,14 +267,12 @@ const StoryViewer = ({ pageId, targetId, duration = 5000, onClose }: StoryViewer } }, [stories, file, currentIndex]); - if (isDraft && file) { + if (file) { return ( ); } diff --git a/src/social/v4/pages/DraftsPage/DraftsPage.tsx b/src/social/v4/pages/DraftsPage/DraftsPage.tsx index e3c365ff6..8f7a39553 100644 --- a/src/social/v4/pages/DraftsPage/DraftsPage.tsx +++ b/src/social/v4/pages/DraftsPage/DraftsPage.tsx @@ -21,31 +21,26 @@ import useImage from '~/core/hooks/useImage'; import Truncate from 'react-truncate-markup'; -import { useCustomization } from '~/social/v4/providers/CustomizationProvider'; import { BackButton, AspectRatioButton, ShareStoryButton, HyperLinkButton, } from '~/social/v4/elements'; -import { useTheme } from 'styled-components'; + import { usePageBehavior } from '~/social/v4/providers/PageBehaviorProvider'; import { HyperLink } from '~/social/v4/elements/HyperLink'; import { SubmitHandler } from 'react-hook-form'; import { HyperLinkConfig } from '../../components/HyperLinkConfig'; +import { useStoryContext } from '~/v4/social/providers/StoryProvider'; +import { StoryRepository } from '@amityco/ts-sdk'; +import { notification } from '~/core/components/Notification'; type DraftStoryProps = { - pageId: 'create_story_page'; - file: File; - creatorAvatar: string; - onCreateStory: ( - file: File, - imageMode: 'fit' | 'fill', - metadata?: Amity.Metadata, - items?: Amity.StoryItem[], - ) => void; - onDiscardStory: () => void; + targetId: string; + targetType: Amity.StoryTargetType; + mediaType: 'image' | 'video'; }; type HyperLinkFormInputs = { @@ -53,11 +48,8 @@ type HyperLinkFormInputs = { customText?: string; }; -export const DraftsPage = ({ pageId, file, onDiscardStory, onCreateStory }: DraftStoryProps) => { - const theme = useTheme(); - const { getConfig, isExcluded } = useCustomization(); - const pageConfig = getConfig(`${pageId}/*/*`); - const isPageExcluded = isExcluded(`${pageId}/*/*`); +export const DraftsPage = ({ targetId, targetType, mediaType }: DraftStoryProps) => { + const { file, setFile } = useStoryContext(); const { navigationBehavior } = usePageBehavior(); const [isHyperLinkBottomSheetOpen, setIsHyperLinkBottomSheetOpen] = useState(false); @@ -77,13 +69,6 @@ export const DraftsPage = ({ pageId, file, onDiscardStory, onCreateStory }: Draf }, ]); - const pageThemePrimaryColor = - pageConfig?.page_theme?.light_theme.primary_color || theme.v4.colors.primary.default; - const pageThemeSecondaryColor = - pageConfig?.page_theme?.light_theme.secondary_color || theme.v4.colors.secondary.default; - - if (isPageExcluded) return null; - const onSubmit: SubmitHandler = (data) => { onSubmit(data); }; @@ -108,6 +93,46 @@ export const DraftsPage = ({ pageId, file, onDiscardStory, onCreateStory }: Draf } }; + const onCreateStory = async ( + file: File | null, + imageMode: 'fit' | 'fill', + metadata?: Amity.Metadata, + items?: Amity.StoryItem[], + ) => { + if (!file) return; + const formData = new FormData(); + formData.append('files', file); + setFile(null); + if (file?.type.includes('image')) { + const { data: imageData } = await StoryRepository.createImageStory( + targetType, + targetId, + formData, + metadata, + imageMode, + items, + ); + if (imageData) { + notification.success({ + content: formatMessage({ id: 'storyViewer.notification.success' }), + }); + } + } else { + const { data: videoData } = await StoryRepository.createVideoStory( + targetType, + targetId, + formData, + metadata, + items, + ); + if (videoData) { + notification.success({ + content: formatMessage({ id: 'storyViewer.notification.success' }), + }); + } + } + }; + const discardCreateStory = () => { confirm({ title: formatMessage({ id: 'storyViewer.action.confirmModal.title' }), @@ -115,7 +140,7 @@ export const DraftsPage = ({ pageId, file, onDiscardStory, onCreateStory }: Draf cancelText: formatMessage({ id: 'general.action.cancel' }), okText: formatMessage({ id: 'delete' }), onOk: () => { - onDiscardStory(); + setFile(null); navigationBehavior.closeAction(); }, }); @@ -164,17 +189,10 @@ export const DraftsPage = ({ pageId, file, onDiscardStory, onCreateStory }: Draf
- +
- {file?.type.includes('image') && ( + {mediaType === 'image' && ( - {file?.type.includes('image') ? ( + {file && mediaType === 'image' ? ( ) : ( onCreateStory(file, imageMode, {}, hyperLink[0].data.url ? hyperLink : [])} avatar={creatorAvatar} - style={{ - color: pageThemeSecondaryColor, - backgroundColor: pageThemePrimaryColor, - }} /> void; +}; + +const StoryContext = createContext({ + file: null, + setFile: () => {}, +}); + +export const useStoryContext = () => useContext(StoryContext); + +type StoryProviderProps = { + children: React.ReactNode; +}; + +export const StoryProvider: React.FC = ({ children }) => { + const [file, setFile] = useState(null); + + const value: StoryContextType = { + file, + setFile, + }; + + return {children}; +}; From b823c8ac442791fd67c5a3132849b94d3cd59a93 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Tue, 9 Apr 2024 13:20:50 +0700 Subject: [PATCH 03/88] fix: ASC-21249 - align story tab component props (#203) * fix: can't upload story * fix: story image renderer * fix: align comment tray component props * fix: align story tab component props * fix: change export name to align signature api * fix: ddraft page * fix: align signature api * fix: story tab --- .../CommunityInfo/UICommunityInfo.tsx | 26 +---- src/social/components/CommunityInfo/index.tsx | 2 +- src/social/hooks/useStories.ts | 8 ++ .../v4/components/StoryTab/StoryRing.tsx | 4 +- .../v4/components/StoryTab/StoryTab.tsx | 102 +++++++++--------- 5 files changed, 60 insertions(+), 82 deletions(-) diff --git a/src/social/components/CommunityInfo/UICommunityInfo.tsx b/src/social/components/CommunityInfo/UICommunityInfo.tsx index a619e88f5..137278dee 100644 --- a/src/social/components/CommunityInfo/UICommunityInfo.tsx +++ b/src/social/components/CommunityInfo/UICommunityInfo.tsx @@ -46,15 +46,8 @@ interface UICommunityInfoProps { onClickLeaveCommunity: (communityId: string) => void; canLeaveCommunity: boolean; canReviewPosts: boolean; - isStorySyncing: boolean; - haveStories: boolean; - haveStoryPermission: boolean; - isStoryErrored: boolean; - isSeen: boolean; name: string; postSetting: ValueOf; - setStoryFile: React.Dispatch>; - onClickStory: (communityId: string) => void; } const UICommunityInfo = ({ @@ -67,11 +60,6 @@ const UICommunityInfo = ({ isJoined, isOfficial, isPublic, - isStorySyncing, - isSeen, - isStoryErrored, - haveStories, - haveStoryPermission, avatarFileUrl, canEditCommunity, onEditCommunity, @@ -81,8 +69,6 @@ const UICommunityInfo = ({ canReviewPosts, name, postSetting, - setStoryFile, - onClickStory, }: UICommunityInfoProps) => { const { formatMessage } = useIntl(); @@ -157,17 +143,7 @@ const UICommunityInfo = ({ )} - onClickStory(communityId)} - onChange={setStoryFile} - /> + {isJoined && canEditCommunity && ( + ); +}; + +export default Button; diff --git a/src/v4/core/components/Button/index.ts b/src/v4/core/components/Button/index.ts new file mode 100644 index 000000000..eae9c8e3b --- /dev/null +++ b/src/v4/core/components/Button/index.ts @@ -0,0 +1 @@ +export { default as Button } from './Button'; diff --git a/src/v4/core/components/Button/ui.stories.tsx b/src/v4/core/components/Button/ui.stories.tsx new file mode 100644 index 000000000..9caf7a90a --- /dev/null +++ b/src/v4/core/components/Button/ui.stories.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import Button from './Button'; +import { ArrowRight2Icon } from '~/icons'; + +export default { + title: 'Components/Button', + component: Button, + argTypes: { + variant: { + control: { + type: 'select', + options: ['primary', 'secondary'], + }, + }, + size: { + control: { + type: 'select', + options: ['small', 'medium', 'large'], + }, + }, + disabled: { + control: 'boolean', + }, + onClick: { + action: 'clicked', + }, + }, +} as ComponentMeta; + +const Template: ComponentStory = (args) => + + +); + +export const Size: ComponentStory = (args) => ( + <> + + + + +); + +export const Disabled = Template.bind({}); +Disabled.args = { + disabled: true, + children: 'Disabled Button', +}; + +export const WithIcon = Template.bind({}); +WithIcon.args = { + children: , +}; diff --git a/src/core/v4/components/Icon/Icon.tsx b/src/v4/core/components/Icon/Icon.tsx similarity index 78% rename from src/core/v4/components/Icon/Icon.tsx rename to src/v4/core/components/Icon/Icon.tsx index c5621ac13..232b8b1dc 100644 --- a/src/core/v4/components/Icon/Icon.tsx +++ b/src/v4/core/components/Icon/Icon.tsx @@ -6,11 +6,19 @@ type IconName = keyof typeof Icons; export interface IconProps { name: IconName | null; size?: number; + className?: string; style?: React.CSSProperties; onClick?: (e: React.MouseEvent) => void; } -export const Icon: React.FC = ({ name, size = 24, style, onClick, ...props }) => { +export const Icon: React.FC = ({ + name, + size = 24, + className, + style, + onClick, + ...props +}) => { const iconMap = { ...Icons, }; @@ -27,6 +35,7 @@ export const Icon: React.FC = ({ name, size = 24, style, onClick, ... data-qa-anchor={`${name}-icon`} width={size} height={size} + className={className} style={style} onClick={onClick} {...props} diff --git a/src/core/v4/components/Icon/index.ts b/src/v4/core/components/Icon/index.ts similarity index 100% rename from src/core/v4/components/Icon/index.ts rename to src/v4/core/components/Icon/index.ts diff --git a/src/v4/core/components/Typography/Typography.tsx b/src/v4/core/components/Typography/Typography.tsx new file mode 100644 index 000000000..69ac9be8e --- /dev/null +++ b/src/v4/core/components/Typography/Typography.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import clsx from 'clsx'; + +interface TypographyProps { + children: React.ReactNode; + className?: string; +} + +const Typography: React.FC & { + Heading: React.FC; + Title: React.FC; + Subtitle: React.FC; + Body: React.FC; + BodyBold: React.FC; + Caption: React.FC; + CaptionBold: React.FC; +} = ({ children, className = '' }) => { + return
{children}
; +}; + +Typography.Heading = ({ children, className = '' }) => { + return

{children}

; +}; + +Typography.Title = ({ children, className = '' }) => { + return

{children}

; +}; + +Typography.Subtitle = ({ children, className = '' }) => { + return

{children}

; +}; + +Typography.Body = ({ children, className = '' }) => { + return

{children}

; +}; + +Typography.BodyBold = ({ children, className = '' }) => { + return

{children}

; +}; + +Typography.Caption = ({ children, className = '' }) => { + return

{children}

; +}; + +Typography.CaptionBold = ({ children, className = '' }) => { + return

{children}

; +}; + +export default Typography; diff --git a/src/v4/core/components/Typography/index.ts b/src/v4/core/components/Typography/index.ts new file mode 100644 index 000000000..1b67c1953 --- /dev/null +++ b/src/v4/core/components/Typography/index.ts @@ -0,0 +1 @@ +export { default as Typography } from './Typography'; diff --git a/src/v4/core/components/Typography/ui.stories.tsx b/src/v4/core/components/Typography/ui.stories.tsx new file mode 100644 index 000000000..6d21fbb86 --- /dev/null +++ b/src/v4/core/components/Typography/ui.stories.tsx @@ -0,0 +1,69 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import Typography from './Typography'; + +export default { + title: 'v4/Core/Components/Typography', + component: Typography, +} as ComponentMeta; + +const TypographyOverview: React.FC = () => ( +
+ Heading + Title + Subtitle + Body text + Bold body text + Caption + Bold caption +
+); + +export const Overview: ComponentStory = () => ; + +export const Heading: ComponentStory = (args) => ( + +); +Heading.args = { + children: 'Heading', +}; + +export const Title: ComponentStory = (args) => ( + +); +Title.args = { + children: 'Title', +}; + +export const Subtitle: ComponentStory = (args) => ( + +); +Subtitle.args = { + children: 'Subtitle', +}; + +export const Body: ComponentStory = (args) => ; +Body.args = { + children: 'Body text', +}; + +export const BodyBold: ComponentStory = (args) => ( + +); +BodyBold.args = { + children: 'Bold body text', +}; + +export const Caption: ComponentStory = (args) => ( + +); +Caption.args = { + children: 'Caption', +}; + +export const CaptionBold: ComponentStory = (args) => ( + +); +CaptionBold.args = { + children: 'Bold caption', +}; diff --git a/src/core/v4/components/index.ts b/src/v4/core/components/index.ts similarity index 100% rename from src/core/v4/components/index.ts rename to src/v4/core/components/index.ts diff --git a/src/v4/core/providers/AmityUIKitProvider.tsx b/src/v4/core/providers/AmityUIKitProvider.tsx new file mode 100644 index 000000000..3333b0652 --- /dev/null +++ b/src/v4/core/providers/AmityUIKitProvider.tsx @@ -0,0 +1,160 @@ +import '../../../core/providers/UiKitProvider/inter.css'; +import './index.css'; +import '../../styles/global.css'; +import amityUKitConfig from '../../../../amity-uikit.config.json'; + +import React, { useEffect, useMemo, useState } from 'react'; +import useUser from '~/core/hooks/useUser'; + +import SDKConnectorProvider from '~/core/providers/SDKConnectorProvider'; +import { SDKContext } from '~/core/providers/SDKProvider'; +import PostRendererProvider from '~/social/providers/PostRendererProvider'; +import NavigationProvider from '~/social/providers/NavigationProvider'; + +import ConfigProvider from '~/social/providers/ConfigProvider'; +import { ConfirmContainer } from '~/core/components/Confirm'; +import { NotificationsContainer } from '~/core/components/Notification'; + +import Localization from '~/core/providers/UiKitProvider/Localization'; + +import { ThemeProvider as StyledThemeProvider } from 'styled-components'; +import buildGlobalTheme from '~/core/providers/UiKitProvider/theme'; +import { Config, CustomizationProvider } from './CustomizationProvider'; +import { ThemeProvider } from './ThemeProvider'; +import { PageBehaviorProvider } from './PageBehaviorProvider'; +import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { UIStyles } from '~/core/providers/UiKitProvider/styles'; +import AmityUIKitManager from '../AmityUIKitManager'; + +export type AmityUIKitConfig = typeof amityUKitConfig; + +interface AmityUIKitProviderProps { + authToken?: string; + userId: string; + displayName: string; + postRendererConfig?: any; + theme?: Record; + children?: React.ReactNode; + socialCommunityCreationButtonVisible?: boolean; + actionHandlers?: { + onChangePage?: (data: { type: string; [x: string]: string | boolean }) => void; + onClickCategory?: (categoryId: string) => void; + onClickCommunity?: (communityId: string) => void; + onClickUser?: (userId: string) => void; + onCommunityCreated?: (communityId: string) => void; + onEditCommunity?: (communityId: string, options?: { tab?: string }) => void; + onEditUser?: (userId: string) => void; + onMessageUser?: (userId: string) => void; + }; + pageBehavior?: { + onCloseAction?: () => void; + onClickHyperLink?: () => void; + }; + onConnectionStatusChange?: (state: Amity.SessionStates) => void; + onConnected?: () => void; + onDisconnected?: () => void; + configs?: AmityUIKitConfig; +} + +const apiKey = import.meta.env.STORYBOOK_API_KEY; +const apiRegion = import.meta.env.STORYBOOK_API_REGION; + +const AmityUIKitProvider: React.FC = ({ + authToken, + userId, + displayName, + postRendererConfig, + theme = {}, + children /* TODO localization */, + socialCommunityCreationButtonVisible, + pageBehavior, + onConnectionStatusChange, + onDisconnected, + configs, +}) => { + const queryClient = new QueryClient(); + const [client, setClient] = useState(null); + const currentUser = useUser(userId); + + const sdkContextValue = useMemo( + () => ({ + client, + currentUserId: userId || undefined, + userRoles: currentUser?.roles || [], + }), + [client, userId, currentUser?.roles], + ); + + useEffect(() => { + const setup = async () => { + try { + // Set up the AmityUIKitManager + AmityUIKitManager.setup({ apiKey, endpoint: apiRegion }); + + // Register the device and get the client instance + await AmityUIKitManager.registerDevice( + userId, + displayName || userId, + { + sessionWillRenewAccessToken: (renewal) => { + // Handle access token renewal + if (authToken) { + renewal.renewWithAuthToken(authToken); + } else { + renewal.renew(); + } + }, + }, + onConnectionStatusChange, + onDisconnected, + ); + + const newClient = AmityUIKitManager.getClient(); + setClient(newClient); + } catch (error) { + console.error('Error setting up AmityUIKitManager:', error); + } + }; + + setup(); + }, [userId, displayName, authToken, onConnectionStatusChange, onDisconnected]); + + if (!client) return null; + + return ( + + + + + + + + + + + + + {children} + + + + + + + + + + + + + + + ); +}; + +export default AmityUIKitProvider; diff --git a/src/social/v4/providers/CustomizationProvider.tsx b/src/v4/core/providers/CustomizationProvider.tsx similarity index 82% rename from src/social/v4/providers/CustomizationProvider.tsx rename to src/v4/core/providers/CustomizationProvider.tsx index 279224208..65cb19021 100644 --- a/src/social/v4/providers/CustomizationProvider.tsx +++ b/src/v4/core/providers/CustomizationProvider.tsx @@ -7,20 +7,42 @@ interface CustomizationContextValue { getConfig: (path: keyof Config['customizations']) => Record; } -interface Theme { - primary_color: string; - secondary_color: string; -} +type Theme = { + light: { + primary_color: string; + secondary_color: string; + base_color: string; + base_shade1_color: string; + base_shade2_color: string; + base_shade3_color: string; + base_shade4_color: string; + alert_color: string; + background_color: string; + }; + dark: { + primary_color: string; + secondary_color: string; + base_color: string; + base_shade1_color: string; + base_shade2_color: string; + base_shade3_color: string; + base_shade4_color: string; + alert_color: string; + background_color: string; + }; +}; export interface Config { - global_theme: { - light_theme: Theme; + preferred_theme: 'light' | 'dark' | 'default'; + theme: { + light: Theme['light']; + dark: Theme['dark']; }; excludes: string[]; customizations: { 'select_target_page/*/*': { - page_theme: { - light_theme: { + theme?: { + light: { primary_color: string; secondary_color: string; }; @@ -32,8 +54,8 @@ export interface Config { }; 'camera_page/*/*': { resolution: string; - page_theme: { - light_theme: { + theme?: { + light: { primary_color: string; secondary_color: string; }; @@ -44,8 +66,8 @@ export interface Config { background_color: string; }; 'create_story_page/*/*': { - page_theme?: { - light_theme: { + theme?: { + light: { primary_color: string; secondary_color: string; }; @@ -73,8 +95,8 @@ export interface Config { hide_avatar: boolean; }; 'story_page/*/*': { - page_theme?: { - light_theme: { + theme?: { + light: { primary_color: string; secondary_color: string; }; @@ -111,7 +133,7 @@ export interface Config { background_color?: string; }; '*/edit_comment_component/*': { - component_theme: { + theme?: { light_theme: { primary_color: string; secondary_color: string; @@ -129,8 +151,8 @@ export interface Config { background_color: string; }; '*/hyper_link_config_component/*': { - component_theme: { - light_theme: { + theme: { + light: { primary_color: string; secondary_color: string; }; @@ -202,12 +224,21 @@ export const CustomizationProvider: React.FC = ({ const [config, setConfig] = useState(null); useEffect(() => { - parseConfig(initialConfig); + if (validateConfig(initialConfig)) { + parseConfig(initialConfig); + } else { + console.error('Invalid configuration provided to CustomizationProvider'); + } }, [initialConfig]); const validateConfig = (config: Config): boolean => { // Check if mandatory fields are present - if (!config?.global_theme || !config?.excludes || !config?.customizations) { + if ( + !config?.preferred_theme || + !config?.theme || + !config?.excludes || + !config?.customizations + ) { return false; } @@ -215,14 +246,7 @@ export const CustomizationProvider: React.FC = ({ }; const parseConfig = (newConfig: Config) => { - // Validate the parsed config - const isValid = validateConfig(newConfig); - - if (isValid) { - setConfig(newConfig); - } else { - console.error('Invalid configuration:', newConfig); - } + setConfig(newConfig); }; const isExcluded = (path: string) => { diff --git a/src/social/v4/providers/PageBehaviorProvider.tsx b/src/v4/core/providers/PageBehaviorProvider.tsx similarity index 54% rename from src/social/v4/providers/PageBehaviorProvider.tsx rename to src/v4/core/providers/PageBehaviorProvider.tsx index 8103ea4d6..eeefde75f 100644 --- a/src/social/v4/providers/PageBehaviorProvider.tsx +++ b/src/v4/core/providers/PageBehaviorProvider.tsx @@ -1,8 +1,9 @@ -import React from 'react'; +import React, { useMemo, useContext } from 'react'; import { useNavigation } from '~/social/providers/NavigationProvider'; interface NavigationBehavior { - closeAction(): void; + onCloseAction(): void; + onClickHyperLink(): void; } interface PageBehavior { @@ -13,35 +14,38 @@ const PageBehaviorContext = React.createContext(undefi interface PageBehaviorProviderProps { children: React.ReactNode; - customNavigationBehavior?: Partial; + pageBehavior?: Partial; } export const PageBehaviorProvider: React.FC = ({ children, - customNavigationBehavior = {}, + pageBehavior = {}, }) => { const { onBack } = useNavigation(); const defaultNavigationBehavior: NavigationBehavior = { - closeAction: () => { + onCloseAction: () => { onBack(); }, - }; - const mergedNavigationBehavior: NavigationBehavior = { - ...defaultNavigationBehavior, - ...customNavigationBehavior, + onClickHyperLink: () => {}, }; - const pageBehavior: PageBehavior = { - navigationBehavior: mergedNavigationBehavior, - }; + const pageBehaviorMemo = useMemo(() => { + const mergedNavigationBehavior: NavigationBehavior = { + ...defaultNavigationBehavior, + ...pageBehavior, + }; + return { + navigationBehavior: mergedNavigationBehavior, + }; + }, []); return ( - {children} + {children} ); }; export const usePageBehavior = () => { - const pageBehavior = React.useContext(PageBehaviorContext); + const pageBehavior = useContext(PageBehaviorContext); if (!pageBehavior) { throw new Error('usePageBehavior must be used within a PageBehaviorProvider'); } diff --git a/src/v4/core/providers/ThemeProvider.tsx b/src/v4/core/providers/ThemeProvider.tsx new file mode 100644 index 000000000..99f464271 --- /dev/null +++ b/src/v4/core/providers/ThemeProvider.tsx @@ -0,0 +1,218 @@ +import React, { createContext, useEffect, useState } from 'react'; +import { lighten, parseToHsl, darken, hslToColorString } from 'polished'; + +const SHADE_PERCENTAGES = [0.25, 0.4, 0.5, 0.75]; + +const setCSSVariable = (variable: string, value: string) => { + document.documentElement.style.setProperty(variable, value); +}; + +const generateShades = (hexColor: string, isDarkMode = false): string[] => { + const hslColor = parseToHsl(hexColor); + + const shades = SHADE_PERCENTAGES.map((percentage) => { + if (isDarkMode) { + return darken(percentage, hslToColorString(hslColor)); + } else { + return lighten(percentage, hslToColorString(hslColor)); + } + }); + + return shades; +}; + +export const ThemeContext = createContext<{ + currentTheme: 'light' | 'dark'; + toggleTheme: () => void; +}>({ + currentTheme: 'light', + toggleTheme: () => {}, +}); + +const defaultConfig = { + preferred_theme: 'default', + theme: { + light: { + primary_color: '#1054DE', + secondary_color: '#292B32', + base_color: '#292b32', + base_shade1_color: '#636878', + base_shade2_color: '#898e9e', + base_shade3_color: '#a5a9b5', + base_shade4_color: '#ebecef', + alert_color: '#FA4D30', + background_color: '#FFFFFF', + }, + dark: { + primary_color: '#1054DE', + secondary_color: '#292B32', + base_color: '#ebecef', + base_shade1_color: '#a5a9b5', + base_shade2_color: '#6e7487', + base_shade3_color: '#40434e', + base_shade4_color: '#292b32', + alert_color: '#FA4D30', + background_color: '#191919', + }, + }, + excludes: [], + customizations: { + 'select_target_page/*/*': { + theme: {}, + title: 'Share to', + }, + 'select_target_page/*/back_button': { + back_icon: 'back.png', + }, + 'camera_page/*/*': { + resolution: '720p', + }, + 'camera_page/*/close_button': { + close_icon: 'close.png', + }, + 'create_story_page/*/*': {}, + 'create_story_page/*/back_button': { + back_icon: 'back.png', + background_color: '#1234DB', + }, + 'create_story_page/*/aspect_ratio_button': { + aspect_ratio_icon: 'aspect_ratio.png', + background_color: '1234DB', + }, + 'create_story_page/*/story_hyperlink_button': { + hyperlink_button_icon: 'hyperlink_button.png', + background_color: '#1234DB', + }, + 'create_story_page/*/hyper_link': { + hyper_link_icon: 'hyper_link.png', + background_color: '#1234DB', + }, + 'create_story_page/*/share_story_button': { + share_icon: 'share_story_button.png', + background_color: '#1234DB', + hide_avatar: false, + }, + 'story_page/*/*': {}, + 'story_page/*/progress_bar': { + progress_color: '#UD1234', + background_color: '#AB1234', + }, + 'story_page/*/overflow_menu': { + overflow_menu_icon: 'threeDot.png', + }, + 'story_page/*/close_button': { + close_icon: 'close.png', + }, + 'story_page/*/story_impression_button': { + impression_icon: 'impressionIcon.png', + }, + 'story_page/*/story_comment_button': { + comment_icon: 'comment.png', + background_color: '#2b2b2b', + }, + 'story_page/*/story_reaction_button': { + reaction_icon: 'like.png', + background_color: '#2b2b2b', + }, + 'story_page/*/create_new_story_button': { + create_new_story_icon: 'plus.png', + background_color: '#ffffff', + }, + 'story_page/*/speaker_button': { + mute_icon: 'mute.png', + unmute_icon: 'unmute.png', + background_color: '#1243EE', + }, + '*/edit_comment_component/*': { + theme: {}, + }, + '*/edit_comment_component/cancel_button': { + cancel_icon: '', + cancel_button_text: 'cancel', + background_color: '#1243EE', + }, + '*/edit_comment_component/save_button': { + save_icon: '', + save_button_text: 'Save', + background_color: '#1243EE', + }, + '*/hyper_link_config_component/*': { + theme: {}, + }, + '*/hyper_link_config_component/done_button': { + done_icon: '', + done_button_text: 'Done', + background_color: '#1243EE', + }, + '*/hyper_link_config_component/cancel_button': { + cancel_icon: '', + cancel_button_text: 'Cancel', + }, + '*/comment_tray_component/*': { + theme: {}, + }, + '*/story_tab_component/*': {}, + '*/story_tab_component/story_ring': { + progress_color: ['#339AF9', '#78FA58'], + background_color: '#AB1234', + }, + '*/story_tab_component/create_new_story_button': { + create_new_story_icon: 'plus.png', + background_color: '#1243EE', + }, + '*/*/close_button': { + close_icon: 'close.png', + }, + }, +}; + +export const ThemeProvider: React.FC<{ initialConfig?: any }> = ({ children, initialConfig }) => { + const config = initialConfig || defaultConfig; + + const [currentTheme, setCurrentTheme] = useState<'light' | 'dark'>('light'); + + useEffect(() => { + const primaryColorShades = generateShades(config.light.primary_color); + const secondaryColorShades = generateShades(config.light.secondary_color); + + setCSSVariable('--asc-color-primary-default', config.light.primary_color); + setCSSVariable('--asc-color-primary-shade1', primaryColorShades[0]); + setCSSVariable('--asc-color-primary-shade2', primaryColorShades[1]); + setCSSVariable('--asc-color-primary-shade3', primaryColorShades[2]); + setCSSVariable('--asc-color-primary-shade4', primaryColorShades[3]); + + setCSSVariable('--asc-color-secondary-default', config.light.secondary_color); + setCSSVariable('--asc-color-secondary-shade1', secondaryColorShades[0]); + setCSSVariable('--asc-color-secondary-shade2', secondaryColorShades[1]); + setCSSVariable('--asc-color-secondary-shade3', secondaryColorShades[2]); + setCSSVariable('--asc-color-secondary-shade4', secondaryColorShades[3]); + + setCSSVariable('--asc-color-base-default', config.light?.base_color); + setCSSVariable('--asc-color-base-shade1', config.light?.base_shade1_color); + setCSSVariable('--asc-color-base-shade2', config.light?.base_shade2_color); + setCSSVariable('--asc-color-base-shade3', config.light?.base_shade3_color); + setCSSVariable('--asc-color-base-shade4', config.light?.base_shade4_color); + + setCSSVariable('--asc-color-alert', config.light?.alert_color); + setCSSVariable('--asc-color-background', config.light?.background_color); + }, [currentTheme, config]); + + useEffect(() => { + if (config.preferred_theme === 'default') { + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + const handleChange = (e: MediaQueryListEvent) => { + setCurrentTheme(e.matches ? 'dark' : 'light'); + }; + mediaQuery.addEventListener('change', handleChange); + return () => mediaQuery.removeEventListener('change', handleChange); + } + }, [config.preferred_theme]); + + const toggleTheme = () => { + setCurrentTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); + }; + + return ( + {children} + ); +}; diff --git a/src/v4/core/providers/UIStyles.module.css b/src/v4/core/providers/UIStyles.module.css new file mode 100644 index 000000000..423afd13c --- /dev/null +++ b/src/v4/core/providers/UIStyles.module.css @@ -0,0 +1,27 @@ +.uiStyles { + font-family: var(--typography-body-font-family); + font-size: var(--typography-body-font-size); + font-weight: var(--typography-body-font-weight); + line-height: var(--typography-body-line-height); + color: var(--palette-base-main); + width: 100%; + height: 100%; + overflow: hidden; + } + + .uiStyles input, + .uiStyles div { + box-sizing: border-box; + } + + .uiStyles * { + font-size: var(--typography-body-font-size); + line-height: 1.5; + } + + .uiStyles pre { + font-family: var(--typography-body-font-family); + font-size: var(--typography-body-font-size); + font-weight: var(--typography-body-font-weight); + line-height: var(--typography-body-line-height); + } \ No newline at end of file diff --git a/src/v4/core/providers/index.css b/src/v4/core/providers/index.css new file mode 100644 index 000000000..19b92c9fd --- /dev/null +++ b/src/v4/core/providers/index.css @@ -0,0 +1,56 @@ +@keyframes react-loading-skeleton { + 100% { + transform: translateX(100%); + } + } + + .react-loading-skeleton { + --base-color: #ebebeb; + --highlight-color: #f5f5f5; + --animation-duration: 1.5s; + --animation-direction: normal; + --pseudo-element-display: block; /* Enable animation */ + + background-color: var(--base-color); + + width: 100%; + border-radius: 0.25rem; + display: inline-flex; + line-height: 1; + + position: relative; + user-select: none; + overflow: hidden; + z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */ + } + + .react-loading-skeleton::after { + content: ' '; + display: var(--pseudo-element-display); + position: absolute; + top: 0; + left: 0; + right: 0; + height: 100%; + background-repeat: no-repeat; + background-image: linear-gradient( + 90deg, + var(--base-color), + var(--highlight-color), + var(--base-color) + ); + transform: translateX(-100%); + + animation-name: react-loading-skeleton; + animation-direction: var(--animation-direction); + animation-duration: var(--animation-duration); + animation-timing-function: ease-in-out; + animation-iteration-count: infinite; + } + + @media (prefers-reduced-motion) { + .react-loading-skeleton { + --pseudo-element-display: none; /* Disable animation */ + } + } + \ No newline at end of file diff --git a/src/v4/core/providers/index.ts b/src/v4/core/providers/index.ts new file mode 100644 index 000000000..74c545319 --- /dev/null +++ b/src/v4/core/providers/index.ts @@ -0,0 +1 @@ +export { default as AmityUIKitProvider } from './AmityUIKitProvider'; diff --git a/src/v4/core/providers/typography.module.css b/src/v4/core/providers/typography.module.css new file mode 100644 index 000000000..f34a87552 --- /dev/null +++ b/src/v4/core/providers/typography.module.css @@ -0,0 +1,43 @@ + + +.ascTypographyHeading { + font-family: var(--asc-text-global-font-family); + font-size: 1.25rem; + line-height: 1.5rem; + font-weight: 600; + } + + .ascTypographyTitle { + font-family: var(--asc-text-global-font-family); + font-size: 1rem; + line-height: 1.5rem; + font-weight: 600; + } + + .ascTypographyBodyBold { + font-family: var(--asc-text-global-font-family); + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 600; + } + + .ascTypographyBody { + font-family: var(--asc-text-global-font-family); + font-size: 0.875rem; + line-height: 1.25rem; + font-weight: 400; + } + + .ascTypographyCaptionBold { + font-family: var(--asc-text-global-font-family); + font-size: 0.75rem; + line-height: 1rem; + font-weight: 600; + } + + .ascTypographyCaption { + font-family: var(--asc-text-global-font-family); + font-size: 0.75rem; + line-height: 1rem; + font-weight: 400; + } \ No newline at end of file diff --git a/src/social/v4/components/CommentEdition/CommentEdition.tsx b/src/v4/social/components/CommentEdition/CommentEdition.tsx similarity index 91% rename from src/social/v4/components/CommentEdition/CommentEdition.tsx rename to src/v4/social/components/CommentEdition/CommentEdition.tsx index 63375cbd5..eab6b2734 100644 --- a/src/social/v4/components/CommentEdition/CommentEdition.tsx +++ b/src/v4/social/components/CommentEdition/CommentEdition.tsx @@ -1,10 +1,12 @@ import React from 'react'; -import { useCustomization } from '~/social/v4/providers/CustomizationProvider'; + import { ButtonContainer, CommentEditContainer, CommentEditTextarea } from './styles'; import { QueryMentioneesFnType } from '~/social/hooks/useSocialMention'; -import { CancelButton, SaveButton } from '~/social/v4/elements'; + import { useTheme } from 'styled-components'; +import { CancelButton, SaveButton } from '../../elements'; +import { useCustomization } from '~/v4/core/providers/CustomizationProvider'; interface CommentEditionProps { pageId?: '*'; diff --git a/src/social/v4/components/CommentEdition/index.ts b/src/v4/social/components/CommentEdition/index.ts similarity index 100% rename from src/social/v4/components/CommentEdition/index.ts rename to src/v4/social/components/CommentEdition/index.ts diff --git a/src/social/v4/components/CommentEdition/styles.tsx b/src/v4/social/components/CommentEdition/styles.tsx similarity index 99% rename from src/social/v4/components/CommentEdition/styles.tsx rename to src/v4/social/components/CommentEdition/styles.tsx index 3be7bc2ff..85ea22d2c 100644 --- a/src/social/v4/components/CommentEdition/styles.tsx +++ b/src/v4/social/components/CommentEdition/styles.tsx @@ -1,4 +1,4 @@ -import styled from 'styled-components'; +import styled, { DefaultTheme } from 'styled-components'; import React, { ReactNode } from 'react'; import UIOptionMenu from '~/core/components/OptionMenu'; diff --git a/src/v4/social/components/CommentTray/CommentTray.module.css b/src/v4/social/components/CommentTray/CommentTray.module.css new file mode 100644 index 000000000..691fc8838 --- /dev/null +++ b/src/v4/social/components/CommentTray/CommentTray.module.css @@ -0,0 +1,51 @@ +.container { + display: flex; + flex-direction: column; + height: 100%; + background-color: var(--asc-color-base-inverse); + border: 1px solid var(--asc-color-base-shade4); + + } + + .header { + display: flex; + align-items: center; + justify-content: center; + text-align: center; + padding: var(--asc-spacing-m1); + background-color: var(--asc-color-base-inverse); + color: var(--asc-color-base-default); + font-size: 18px; + font-weight: bold; + border-bottom: 1px solid var(--asc-color-base-shade4); + } + + .roundedHeader { + border-top-left-radius: 1rem; + border-top-right-radius: 1rem; + } + + .content { + flex: 1; + overflow-y: auto; + padding: var(--asc-spacing-m1); + } + + .scroller { + height: 100%; + } + + .composeBarContainer { + padding: var(--asc-spacing-m1); + background-color: var(--asc-color-base-inverse); + } + + .nestedBackdrop { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.5); + z-index: -1; + } \ No newline at end of file diff --git a/src/social/v4/components/CommentTray/CommentTray.tsx b/src/v4/social/components/CommentTray/CommentTray.tsx similarity index 85% rename from src/social/v4/components/CommentTray/CommentTray.tsx rename to src/v4/social/components/CommentTray/CommentTray.tsx index 538df0a0a..fb3636e06 100644 --- a/src/social/v4/components/CommentTray/CommentTray.tsx +++ b/src/v4/social/components/CommentTray/CommentTray.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; -import { CommentList } from '~/social/v4/internal-components/CommentList'; -import { StoryCommentComposeBar } from '~/social/v4/internal-components/StoryCommentComposeBar'; -import { MobileSheetComposeBarContainer } from '~/social/v4/internal-components/StoryViewer/styles'; + +import { CommentList } from '../../internal-components/CommentList'; +import { MobileSheetComposeBarContainer } from '../../internal-components/StoryViewer/styles'; +import { StoryCommentComposeBar } from '../../internal-components/StoryCommentComposeBar'; const REPLIES_PER_PAGE = 5; diff --git a/src/social/v4/components/CommentTray/index.ts b/src/v4/social/components/CommentTray/index.ts similarity index 100% rename from src/social/v4/components/CommentTray/index.ts rename to src/v4/social/components/CommentTray/index.ts diff --git a/src/v4/social/components/CommentTray/ui.stories.tsx b/src/v4/social/components/CommentTray/ui.stories.tsx new file mode 100644 index 000000000..9cd1e8b37 --- /dev/null +++ b/src/v4/social/components/CommentTray/ui.stories.tsx @@ -0,0 +1,98 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { ThemeProvider } from 'styled-components'; +import { CustomizationProvider } from '~/v4/core/providers/CustomizationProvider'; +import { CommentTray } from './CommentTray'; +import buildGlobalTheme from '~/core/providers/UiKitProvider/theme'; +import { theme } from '../../theme'; + +export default { + title: 'Components/CommentTray', + component: CommentTray, + decorators: [ + (Story) => ( + + +
+ +
+ + + ), + ], +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + pageId: '*', + storyId: 'story123', + commentId: 'comment123', + referenceType: 'story', + referenceId: 'story123', + replyTo: 'user123', + isReplying: false, + limit: 5, + isOpen: true, + isJoined: true, + allowCommentInStory: true, + onClose: () => {}, + onClickReply: () => {}, + onCancelReply: () => {}, +}; + +export const Replying = Template.bind({}); +Replying.args = { + ...Default.args, + isReplying: true, +}; + +export const NotJoined = Template.bind({}); +NotJoined.args = { + ...Default.args, + isJoined: false, +}; diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css new file mode 100644 index 000000000..6a9a04467 --- /dev/null +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css @@ -0,0 +1,100 @@ +.hyperlinkFormContainer { + padding: var(--asc-spacing-m1); + border-radius: var(--asc-border-radius-md); + } + + .form { + display: flex; + flex-direction: column; + gap: var(--asc-spacing-l1); + } + + .inputContainer { + display: flex; + flex-direction: column; + gap: var(--asc-spacing-xxs2); + } + + .input { + width: 100%; + padding: var(--asc-spacing-s1); + border: none; + border-bottom: 1px solid var(--asc-color-base-shade4); + outline: none; + color: inherit; + } + + .input.hasError { + border-bottom-color: var(--asc-color-alert-default); + color: var(--asc-color-alert-default); + } + + .label { + display: block; + } + + .label::after { + content: none; + color: var(--asc-color-alert-default); + } + + .label.required::after { + content: '*'; + } + + .description { + color: var(--asc-color-base-shade2); + } + + .errorText { + color: var(--asc-color-alert-default); + } + + .characterCount { + color: var(--asc-color-base-shade1); + text-align: right; + margin-top: 0.3rem; + } + + .headerContainer { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 var(--asc-spacing-m1); + } + + .labelContainer { + display: flex; + justify-content: space-between; + align-items: center; + } + + .headerTitle { + color: var(--asc-color-base-default); + } + + .styledSecondaryButton { + color: var(--asc-color-base-default); + } + + .removeIcon { + width: 1.5rem; + height: 1.5rem; + fill: var(--asc-color-alert-default); + } + + .removeLinkButton { + display: flex; + justify-content: flex-start; + align-items: center; + gap: var(--asc-spacing-s1); + color: var(--asc-color-alert-default); + border-radius: 0; + } + + .divider { + width: 100%; + height: 0.0625rem; + align-self: stretch; + background-color: var(--asc-color-base-shade4); + } \ No newline at end of file diff --git a/src/social/v4/components/HyperLinkConfig/HyperLinkConfig.tsx b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx similarity index 70% rename from src/social/v4/components/HyperLinkConfig/HyperLinkConfig.tsx rename to src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx index d9e3d924e..7db0b8cdc 100644 --- a/src/social/v4/components/HyperLinkConfig/HyperLinkConfig.tsx +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx @@ -1,38 +1,21 @@ import React from 'react'; -import { BottomSheet } from '~/core/v4/components'; - -import { - MobileSheet, - MobileSheetContainer, - MobileSheetContent, - MobileSheetHeader, -} from '~/core/v4/components/BottomSheet/styles'; - import { useIntl } from 'react-intl'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/zod'; -import { - Description, - Form, - HyperlinkFormContainer, - Input, - Label, - ErrorText, - InputContainer, - CharacterCount, - LabelContainer, - HeaderContainer, - HeaderTitle, - StyledSecondaryButton, - RemoveLinkButton, - RemoveIcon, - Divider, -} from './styles'; import { SecondaryButton } from '~/core/components/Button'; import { confirm } from '~/core/components/Confirm'; import useSDK from '~/core/hooks/useSDK'; -import { useCustomization } from '../../providers/CustomizationProvider'; +import { BottomSheet } from '~/v4/core/components'; +import { + MobileSheet, + MobileSheetContainer, + MobileSheetContent, + MobileSheetHeader, +} from '~/v4/core/components/BottomSheet/styles'; +import { useCustomization } from '~/v4/core/providers/CustomizationProvider'; +import { Trash2Icon } from '~/icons'; +import styles from './HyperLinkConfig.module.css'; interface HyperLinkConfigProps { pageId: '*'; @@ -56,7 +39,7 @@ export const HyperLinkConfig = ({ const componentId = 'hyper_link_config_component'; const { getConfig } = useCustomization(); const componentConfig = getConfig(`${pageId}/${componentId}/*`); - const componentTheme = componentConfig?.component_theme.light_theme || {}; + const componentTheme = componentConfig?.theme.light || {}; const cancelButtonConfig = getConfig(`*/hyper_link_config_component/cancel_button`); const doneButtonConfig = getConfig(`*/hyper_link_config_component/done_button`); @@ -67,7 +50,6 @@ export const HyperLinkConfig = ({ const schema = z.object({ url: z.string().refine(async (value) => { if (!value) return true; - // since validateUrls() will throw an error if the url is not whitelisted so need to catch it and return false instead const hasWhitelistedUrls = await client?.validateUrls([value]).catch(() => false); return hasWhitelistedUrls; }, formatMessage({ id: 'storyCreation.hyperlink.validation.error.whitelisted' })), @@ -76,8 +58,6 @@ export const HyperLinkConfig = ({ .optional() .refine(async (value) => { if (!value) return true; - // since validateUrls() will throw an error if the url is not whitelisted so need to catch it and return false instead - // TO FIX: use schema.safeParseAsync() const hasBlockedWord = await client?.validateTexts([value]).catch(() => false); return hasBlockedWord; }, formatMessage({ id: 'storyCreation.hyperlink.validation.error.blocked' })), @@ -137,7 +117,7 @@ export const HyperLinkConfig = ({ color: componentTheme?.secondary_color, }} > - +
{cancelButtonConfig?.cancel_button_text || formatMessage({ id: 'storyCreation.hyperlink.bottomSheet.cancel' })} @@ -145,10 +125,10 @@ export const HyperLinkConfig = ({ )} - +
{formatMessage({ id: 'storyCreation.hyperlink.bottomSheet.title' })} - - + {doneButtonConfig?.done_button_text || formatMessage({ id: 'storyCreation.hyperlink.bottomSheet.submit' })} {doneButtonConfig?.done_icon && ( )} - - + +
- -
- -
- } - onCancel={onCancel} - > - {content} - -); - -let spawnNewConfirm: any; // for modfying ConfirmContainer state outside +}: any) => { + return ( + + {type === 'confirm' && ( + + {cancelText} + + )} + + {okText} + + + } + onCancel={onCancel} + > + {content} + + ); +}; // rendered by provider, to allow spawning of confirm from confirm function below -export const ConfirmContainer = () => { - const [confirm, setConfirm] = useState(null); - spawnNewConfirm = (confirmData: any) => { - setConfirm(confirmData); - }; +export const ConfirmComponent = () => { + const { confirmData, closeConfirm } = useConfirmContext(); - if (!confirm) return null; + if (!confirmData) return null; - const closeConfirm = () => setConfirm(null); + const onCancel = () => { + closeConfirm(); + confirmData?.onCancel && confirmData.onCancel(); + }; - const attachCanceling = (fn: any) => () => { + const onOk = () => { closeConfirm(); - fn && fn(); + confirmData?.onOk && confirmData.onOk(); }; - return ( - - ); + return ; }; -/* - Usage: - confirm({ - title: 'Delete post', - content: - 'This post will be permanently deleted. You’ll no longer to see and find this post. Continue?', - okText: 'Delete', - onOk: onDelete, - }); - - This interface rely on ConfirmContainer being rendered by UIKITProvider in the react tree -*/ -export const confirm = (confirmData: any) => spawnNewConfirm({ ...confirmData, type: 'confirm' }); - -export const info = (data: any) => - spawnNewConfirm({ ...data, type: 'info', OkButton: PrimaryButton }); - export default Confirm; diff --git a/src/core/providers/ConfirmProvider.tsx b/src/core/providers/ConfirmProvider.tsx new file mode 100644 index 000000000..2e70970d5 --- /dev/null +++ b/src/core/providers/ConfirmProvider.tsx @@ -0,0 +1,52 @@ +import React, { createContext, ReactNode, useContext, useState } from 'react'; +import { PrimaryButton } from '../components/Button/styles'; + +type ConfirmType = { + onCancel?: () => void; + onOk?: () => void; + type?: 'confirm' | 'info'; + OkButton?: ReactNode; + CancelButton?: ReactNode; + title?: ReactNode; + content?: ReactNode; + okText?: ReactNode; + cancelText?: ReactNode; + 'data-qa-anchor'?: string; +}; + +interface ConfirmContextProps { + confirmData: ConfirmType | null; + confirm: (data: ConfirmType) => void; + info: (data: ConfirmType) => void; + closeConfirm: () => void; +} + +export const ConfirmContext = createContext({ + confirmData: null, + confirm: () => {}, + info: () => {}, + closeConfirm: () => {}, +}); + +export const useConfirmContext = () => useContext(ConfirmContext); + +export const ConfirmProvider: React.FC = ({ children }) => { + const [confirmData, setConfirmData] = useState(null); + + const closeConfirm = () => { + setConfirmData(null); + }; + + const confirm = (confirmData: ConfirmType) => { + setConfirmData({ ...confirmData, type: 'confirm' }); + }; + + const info = (data: ConfirmType) => + setConfirmData({ ...data, type: 'info', OkButton: PrimaryButton }); + + return ( + + {children} + + ); +}; diff --git a/src/core/providers/UiKitProvider/index.tsx b/src/core/providers/UiKitProvider/index.tsx index 876029570..70d898c5b 100644 --- a/src/core/providers/UiKitProvider/index.tsx +++ b/src/core/providers/UiKitProvider/index.tsx @@ -5,7 +5,7 @@ import { Client as ASCClient } from '@amityco/ts-sdk'; import { ThemeProvider } from 'styled-components'; import { NotificationsContainer } from '~/core/components/Notification'; -import { ConfirmContainer } from '~/core/components/Confirm'; +import { ConfirmComponent } from '~/core/components/Confirm'; import ConfigProvider from '~/social/providers/ConfigProvider'; import Localization from './Localization'; import buildGlobalTheme from './theme'; @@ -20,6 +20,7 @@ import PostRendererProvider, { } from '~/social/providers/PostRendererProvider'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; +import { ConfirmProvider } from '../ConfirmProvider'; interface UiKitProviderProps { apiKey: string; @@ -130,20 +131,22 @@ const UiKitProvider = ({ - - - - {children} - - - - - + + + + + {children} + + + + + + diff --git a/src/social/components/Comment/index.tsx b/src/social/components/Comment/index.tsx index 8b7d1847e..2254bef56 100644 --- a/src/social/components/Comment/index.tsx +++ b/src/social/components/Comment/index.tsx @@ -1,7 +1,6 @@ import React, { memo, useState } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; -import { confirm } from '~/core/components/Confirm'; import useComment from '~/social/hooks/useComment'; import CommentComposeBar from '~/social/components/CommentComposeBar'; import CommentList from '~/social/components/CommentList'; @@ -39,6 +38,7 @@ import useCommentPermission from '~/social/hooks/useCommentPermission'; import useCommentSubscription from '~/social/hooks/useCommentSubscription'; import { ERROR_RESPONSE } from '~/social/constants'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; const REPLIES_PER_PAGE = 5; @@ -90,6 +90,7 @@ interface CommentProps { const Comment = ({ commentId, readonly }: CommentProps) => { const comment = useComment(commentId); const post = usePost(comment?.referenceId); + const { confirm } = useConfirmContext(); const commentAuthor = useUser(comment?.userId); const commentAuthorAvatar = useFile(commentAuthor?.avatarFileId); diff --git a/src/social/components/CommentComposeBar/index.tsx b/src/social/components/CommentComposeBar/index.tsx index 4ebd7e5d6..28cbb6ac4 100644 --- a/src/social/components/CommentComposeBar/index.tsx +++ b/src/social/components/CommentComposeBar/index.tsx @@ -9,8 +9,6 @@ import useSDK from '~/core/hooks/useSDK'; import { LoadingIndicator } from '~/core/components/ProgressBar/styles'; import { useIntl, FormattedMessage } from 'react-intl'; -import { info } from '~/core/components/Confirm'; - import { Avatar, CommentComposeBarContainer, @@ -21,6 +19,7 @@ import { import { backgroundImage as UserImage } from '~/icons/User'; import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; import useImage from '~/core/hooks/useImage'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; const TOTAL_MENTIONEES_LIMIT = 30; const COMMENT_LENGTH_LIMIT = 50000; @@ -42,6 +41,7 @@ const CommentComposeBar = ({ const post = usePost(postId); const { currentUserId } = useSDK(); + const { info } = useConfirmContext(); const user = useUser(currentUserId); const avatarFileUrl = useImage({ fileId: user?.avatarFileId, imageSize: 'small' }); const { text, markup, mentions, mentionees, metadata, onChange, queryMentionees } = diff --git a/src/social/components/CommunityCreationModal/index.tsx b/src/social/components/CommunityCreationModal/index.tsx index 04209be04..42ded2835 100644 --- a/src/social/components/CommunityCreationModal/index.tsx +++ b/src/social/components/CommunityCreationModal/index.tsx @@ -4,19 +4,19 @@ import { CommunityRepository } from '@amityco/ts-sdk'; import { useIntl } from 'react-intl'; import Modal from '~/core/components/Modal'; -import { confirm } from '~/core/components/Confirm'; -import { CommunityForm } from './styles'; import CreateCommunityForm from '../CommunityForm/CreateCommunityForm'; import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; interface CommunityCreationModalProps { isOpen: boolean; - onClose: (communityId: string) => void; + onClose: (communityId?: string) => void; } const CommunityCreationModal = ({ isOpen, onClose }: CommunityCreationModalProps) => { const { formatMessage } = useIntl(); + const { confirm } = useConfirmContext(); if (!isOpen) return null; @@ -26,7 +26,7 @@ const CommunityCreationModal = ({ isOpen, onClose }: CommunityCreationModalProps content: formatMessage({ id: 'CommunityCreationModal.content' }), cancelText: formatMessage({ id: 'CommunityCreationModal.cancelText' }), okText: formatMessage({ id: 'CommunityCreationModal.okText' }), - onOk: onClose, + onOk: () => onClose(), }); const handleSubmit = async (data: Parameters[0]) => { diff --git a/src/social/components/CommunityInfo/index.tsx b/src/social/components/CommunityInfo/index.tsx index 2ee57194f..8adfd8fbe 100644 --- a/src/social/components/CommunityInfo/index.tsx +++ b/src/social/components/CommunityInfo/index.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { CommunityPostSettings } from '@amityco/ts-sdk'; import UICommunityInfo from './UICommunityInfo'; -import { leaveCommunityConfirmModal } from './leaveScenarioModals'; import { useCommunityInfo } from './hooks'; import { useNavigation } from '~/social/providers/NavigationProvider'; @@ -10,6 +9,8 @@ import useSDK from '~/core/hooks/useSDK'; import { useStoryContext } from '~/v4/social/providers/StoryProvider'; import { checkStoryPermission } from '~/utils'; +import { FormattedMessage } from 'react-intl'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; interface CommunityInfoProps { communityId: string; @@ -40,6 +41,8 @@ const CommunityInfo = ({ communityId, stories }: CommunityInfoProps) => { canReviewCommunityPosts, } = useCommunityInfo(communityId); + const { info, confirm } = useConfirmContext(); + const categoryNames = (communityCategories || []).map((category) => category.name); if (community == null) return null; @@ -47,6 +50,15 @@ const CommunityInfo = ({ communityId, stories }: CommunityInfoProps) => { const canLeaveCommunity = community.isJoined || false; const { membersCount, description, isJoined } = community; + const leaveCommunityConfirmModal = ({ onOk }: { onOk: () => void }) => + confirm({ + 'data-qa-anchor': 'leave-community', + title: , + content: , + okText: , + onOk: () => onOk(), + }); + return ( { onOk: () => leaveCommunity(), }) } - setStoryFile={setFile} + setStoryFile={(storyFile) => setFile(storyFile)} haveStories={haveStories || false} haveStoryPermission={haveStoryPermission} isStorySyncing={isStorySyncing || false} diff --git a/src/social/components/CommunityInfo/leaveScenarioModals.tsx b/src/social/components/CommunityInfo/leaveScenarioModals.tsx deleted file mode 100644 index 8991c8c54..000000000 --- a/src/social/components/CommunityInfo/leaveScenarioModals.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { info, confirm } from '~/core/components/Confirm'; - -const LAST_MODERATOR_ERROR_CODE = 400317; -const ONLY_ONE_MODERATOR_ERROR_CODE = 400318; - -const lastModeratorModal = () => - info({ - title: , - content: , - okText: , - }); - -const onlyOneModeratorModal = () => - info({ - title: , - content: , - okText: , - }); - -// async function onClickLeaveCommunityOk( -// communityId: string, -// leaveCommunity: (communityId: string) => void, -// ) { -// try { -// await leaveCommunity(communityId); -// } catch (error) { -// if (error instanceof Error) { -// // Member > 0, moderator === 1 -// if (error.code === LAST_MODERATOR_ERROR_CODE) { -// onlyOneModeratorModal(); -// } -// // Member === 1, moderator === 1 -// if (error.code === ONLY_ONE_MODERATOR_ERROR_CODE) { -// lastModeratorModal(); -// } -// } -// } -// } - -export const leaveCommunityConfirmModal = ({ onOk }: { onOk: () => void }) => - confirm({ - 'data-qa-anchor': 'leave-community', - title: , - content: , - okText: , - onOk: () => onOk(), - }); diff --git a/src/social/components/CommunityMembers/CommunityMemberItem.tsx b/src/social/components/CommunityMembers/CommunityMemberItem.tsx index 850fa029f..1b00a70d4 100644 --- a/src/social/components/CommunityMembers/CommunityMemberItem.tsx +++ b/src/social/components/CommunityMembers/CommunityMemberItem.tsx @@ -6,13 +6,13 @@ import OptionMenu from '~/core/components/OptionMenu'; import UserHeader from '~/social/components/UserHeader'; import useUser from '~/core/hooks/useUser'; import { MemberInfo, CommunityMemberContainer } from './styles'; -import { confirm } from '~/core/components/Confirm'; import { isModerator } from '~/helpers/permissions'; import { MemberRoles } from '~/social/constants'; import { isNonNullable } from '~/helpers/utils'; import useUserFlaggedByMe from '~/social/hooks/useUserFlaggedByMe'; import useUserSubscription from '~/social/hooks/useUserSubscription'; import { SubscriptionLevels } from '@amityco/ts-sdk'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; const { COMMUNITY_MODERATOR, CHANNEL_MODERATOR } = MemberRoles; @@ -45,6 +45,7 @@ const CommunityMemberItem = ({ const { formatMessage } = useIntl(); const { isFlaggedByMe, toggleFlagUser } = useUserFlaggedByMe(userId); const isGlobalBanned = user?.isGlobalBanned; + const { confirm } = useConfirmContext(); useUserSubscription({ userId, diff --git a/src/social/components/CommunityPermissions/utils.tsx b/src/social/components/CommunityPermissions/utils.tsx index 5f72c780f..49795c19e 100644 --- a/src/social/components/CommunityPermissions/utils.tsx +++ b/src/social/components/CommunityPermissions/utils.tsx @@ -1,7 +1,7 @@ import { CommunityPostSettings, CommunityRepository } from '@amityco/ts-sdk'; import React, { useCallback, useEffect, useState } from 'react'; import { FormattedMessage } from 'react-intl'; -import { info } from '~/core/components/Confirm'; + import useCommunity from '~/social/hooks/useCommunity'; // TODO: check CommunityPostSettings diff --git a/src/social/components/SideSectionMyCommunity/index.tsx b/src/social/components/SideSectionMyCommunity/index.tsx index 21add3978..fad1a9e3f 100644 --- a/src/social/components/SideSectionMyCommunity/index.tsx +++ b/src/social/components/SideSectionMyCommunity/index.tsx @@ -21,7 +21,7 @@ const SideSectionMyCommunity = ({ className, activeCommunity }: SideSectionMyCom const open = () => setIsOpen(true); - const close = (communityId: string) => { + const close = (communityId?: string) => { setIsOpen(false); communityId && onCommunityCreated(communityId); }; diff --git a/src/social/components/UserInfo/UIUserInfo.tsx b/src/social/components/UserInfo/UIUserInfo.tsx index 8888efd89..6f4057084 100644 --- a/src/social/components/UserInfo/UIUserInfo.tsx +++ b/src/social/components/UserInfo/UIUserInfo.tsx @@ -30,7 +30,6 @@ import { ProfileNameWrapper, } from './styles'; -import { confirm } from '~/core/components/Confirm'; import { isNonNullable } from '~/helpers/utils'; import useUser from '~/core/hooks/useUser'; import { UserRepository } from '@amityco/ts-sdk'; @@ -38,6 +37,7 @@ import useFollowersList from '~/core/hooks/useFollowersList'; import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; import useUserFlaggedByMe from '~/social/hooks/useUserFlaggedByMe'; import useFollowersCollection from '~/core/hooks/collections/useFollowersCollection'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; interface UIUserInfoProps { userId?: string | null; @@ -88,6 +88,7 @@ const UIUserInfo = ({ const user = useUser(userId); const { formatMessage } = useIntl(); const { isFlaggedByMe } = useUserFlaggedByMe(userId || undefined); + const { confirm } = useConfirmContext(); const { followers: pendingUsers } = useFollowersCollection({ userId: currentUserId, diff --git a/src/social/components/post/Creator/index.tsx b/src/social/components/post/Creator/index.tsx index e006c9aab..ecde207da 100644 --- a/src/social/components/post/Creator/index.tsx +++ b/src/social/components/post/Creator/index.tsx @@ -9,7 +9,6 @@ import { CommunityPostSettings, } from '@amityco/ts-sdk'; -import { info } from '~/core/components/Confirm'; import useImage from '~/core/hooks/useImage'; import useUser from '~/core/hooks/useUser'; @@ -45,6 +44,7 @@ import useSDK from '~/core/hooks/useSDK'; import useSocialMention from '~/social/hooks/useSocialMention'; import useCommunityModeratorsCollection from '~/social/hooks/collections/useCommunityModeratorsCollection'; import { ERROR_RESPONSE } from '~/social/constants'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; const useTargetData = ({ targetId, @@ -87,14 +87,6 @@ const useTargetData = ({ const MAX_FILES_PER_POST = 10; -const overCharacterModal = () => - info({ - title: , - content: , - okText: , - type: 'info', - }); - interface PostCreatorBarProps { className?: string; targetType: string; @@ -123,6 +115,7 @@ const PostCreatorBar = ({ const { currentUserId } = useSDK(); const { setNavigationBlocker } = useNavigation(); const user = useUser(currentUserId); + const { info } = useConfirmContext(); // default to me if (targetType === 'global' || targetType === 'myFeed') { @@ -165,6 +158,15 @@ const PostCreatorBar = ({ }); const [isCreating, setIsCreating] = useState(false); + const overCharacterModal = () => { + info({ + title: , + content: , + okText: , + type: 'info', + }); + }; + async function onCreatePost() { if (!target.targetId) return; try { diff --git a/src/social/components/post/PollComposer/PollModal.tsx b/src/social/components/post/PollComposer/PollModal.tsx index 819e61627..1b629c5bf 100644 --- a/src/social/components/post/PollComposer/PollModal.tsx +++ b/src/social/components/post/PollComposer/PollModal.tsx @@ -3,10 +3,10 @@ import { FormattedMessage, useIntl } from 'react-intl'; import { PollRepository } from '@amityco/ts-sdk'; import Modal from '~/core/components/Modal'; -import { confirm } from '~/core/components/Confirm'; import PollComposer from '~/social/components/post/PollComposer'; import { notification } from '~/core/components/Notification'; import { ERROR_RESPONSE } from '~/social/constants'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; interface PollModalProps { targetId?: string | null; @@ -23,6 +23,7 @@ interface PollModalProps { const PollModal = ({ targetId, targetType, onClose, onCreatePoll }: PollModalProps) => { const [isDirty, setDirty] = useState(false); const { formatMessage } = useIntl(); + const { confirm } = useConfirmContext(); const handleSubmit = async ( data: Parameters[0], diff --git a/src/social/components/post/PollComposer/index.tsx b/src/social/components/post/PollComposer/index.tsx index af707ab21..988d61987 100644 --- a/src/social/components/post/PollComposer/index.tsx +++ b/src/social/components/post/PollComposer/index.tsx @@ -27,8 +27,9 @@ import InputCounter, { COUNTER_VALUE_PLACEHOLDER } from '~/core/components/Input import AnswerTypeSelector from '~/social/components/post/PollComposer/AnswerTypeSelector'; import Button from '~/core/components/Button'; import { MAXIMUM_MENTIONEES } from '~/social/constants'; -import { info } from '~/core/components/Confirm'; + import { PollRepository } from '@amityco/ts-sdk'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; const MAX_QUESTION_LENGTH = 500; const MIN_OPTIONS_AMOUNT = 2; @@ -78,6 +79,7 @@ const PollComposer = ({ onChange: mentionOnChange, } = useSocialMention({ targetId: targetId || undefined, targetType }); const [submitting, setSubmitting] = useState(false); + const { info } = useConfirmContext(); const defaultValues: FormValues = { question: '', diff --git a/src/social/components/post/Post/DefaultPostRenderer.tsx b/src/social/components/post/Post/DefaultPostRenderer.tsx index 6aae2e5ad..7058e0dbe 100644 --- a/src/social/components/post/Post/DefaultPostRenderer.tsx +++ b/src/social/components/post/Post/DefaultPostRenderer.tsx @@ -1,7 +1,6 @@ import React, { useState } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; import Button, { PrimaryButton } from '~/core/components/Button'; -import { confirm, info } from '~/core/components/Confirm'; import Modal from '~/core/components/Modal'; import { notification } from '~/core/components/Notification'; import { isNonNullable } from '~/helpers/utils'; @@ -23,6 +22,7 @@ import useCommunity from '~/social/hooks/useCommunity'; import useSDK from '~/core/hooks/useSDK'; import usePostSubscription from '~/social/hooks/usePostSubscription'; import { SubscriptionLevels } from '@amityco/ts-sdk'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; // Number of lines to show in a text post before truncating. const MAX_TEXT_LINES_DEFAULT = 8; @@ -52,6 +52,7 @@ const DefaultPostRenderer = ({ const [isEditing, setIsEditing] = useState(false); const openEditingPostModal = () => setIsEditing(true); const closeEditingPostModal = () => setIsEditing(false); + const { info, confirm } = useConfirmContext(); function showHasBeenReviewedMessageIfNeeded(error: unknown) { if (error instanceof Error) { @@ -119,15 +120,16 @@ const DefaultPostRenderer = ({ } }; - const confirmDeletePost = () => + const confirmDeletePost = () => { confirm({ title: formatMessage({ id: 'post.deletePost' }), content: formatMessage({ id: isPostUnderReview ? 'post.confirmPendingDelete' : 'post.confirmDelete', }), okText: formatMessage({ id: 'delete' }), - onOk: handleDeletePost, + onOk: () => handleDeletePost?.(post?.postId), }); + }; const pollPost = childrenPosts.find((childPost) => childPost.dataType === 'poll'); diff --git a/src/social/pages/CommunityEdit/ExtraAction.tsx b/src/social/pages/CommunityEdit/ExtraAction.tsx index fee50c810..cd6e93219 100644 --- a/src/social/pages/CommunityEdit/ExtraAction.tsx +++ b/src/social/pages/CommunityEdit/ExtraAction.tsx @@ -1,7 +1,6 @@ import React, { ReactNode } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; -import { confirm } from '~/core/components/Confirm'; import { ExtraActionContainer, ExtraActionContainerHeader, @@ -13,6 +12,7 @@ import { } from './styles'; import { CommunityRepository } from '@amityco/ts-sdk'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; interface ExtraActionProps { title?: ReactNode; @@ -81,6 +81,7 @@ export const CloseCommunityAction = ({ onCommunityClosed, }: CloseCommunityActionProps) => { const { formatMessage } = useIntl(); + const { confirm } = useConfirmContext(); const closeConfirm = () => confirm({ diff --git a/src/social/pages/UserFeed/Followers/FollowersList.tsx b/src/social/pages/UserFeed/Followers/FollowersList.tsx index 9f83dbfdb..5faa41aa2 100644 --- a/src/social/pages/UserFeed/Followers/FollowersList.tsx +++ b/src/social/pages/UserFeed/Followers/FollowersList.tsx @@ -9,7 +9,7 @@ import useUser from '~/core/hooks/useUser'; import { UserRepository } from '@amityco/ts-sdk'; import { useNavigation } from '~/social/providers/NavigationProvider'; import { notification } from '~/core/components/Notification'; -import { confirm } from '~/core/components/Confirm'; + import { Grid, Header, @@ -23,6 +23,7 @@ import useUserFlaggedByMe from '~/social/hooks/useUserFlaggedByMe'; import useFollowersSubscription from '~/social/hooks/useFollowersSubscription'; import useSDK from '~/core/hooks/useSDK'; import useFollowersCollection from '~/core/hooks/collections/useFollowersCollection'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; interface UserItemProps { profileUserId: string; @@ -35,6 +36,7 @@ export const UserItem = ({ profileUserId, currentUserId, userId, onClick }: User const user = useUser(userId); const avatarFileUrl = useImage({ fileId: user?.avatarFileId, imageSize: 'small' }); const { onClickUser } = useNavigation(); + const { confirm } = useConfirmContext(); const { formatMessage } = useIntl(); const { isFlaggedByMe, toggleFlagUser } = useUserFlaggedByMe(userId || undefined); diff --git a/src/social/pages/UserFeed/Followers/FollowingsList.tsx b/src/social/pages/UserFeed/Followers/FollowingsList.tsx index f84f57cb9..d0d105f2b 100644 --- a/src/social/pages/UserFeed/Followers/FollowingsList.tsx +++ b/src/social/pages/UserFeed/Followers/FollowingsList.tsx @@ -9,7 +9,7 @@ import useUser from '~/core/hooks/useUser'; import { UserRepository } from '@amityco/ts-sdk'; import { useNavigation } from '~/social/providers/NavigationProvider'; import { notification } from '~/core/components/Notification'; -import { confirm } from '~/core/components/Confirm'; + import { Grid, Header, @@ -22,6 +22,7 @@ import useUserFlaggedByMe from '~/social/hooks/useUserFlaggedByMe'; import useFollowingsSubscription from '~/social/hooks/useFollowingsSubscription'; import useSDK from '~/core/hooks/useSDK'; import useFollowingsCollection from '~/core/hooks/collections/useFollowingsCollection'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; interface UserItemProps { profileUserId: string; @@ -33,6 +34,7 @@ interface UserItemProps { export const UserItem = ({ profileUserId, currentUserId, userId, onClick }: UserItemProps) => { const user = useUser(userId); const { onClickUser } = useNavigation(); + const { confirm } = useConfirmContext(); const { formatMessage } = useIntl(); const { isFlaggedByMe, toggleFlagUser } = useUserFlaggedByMe(userId); diff --git a/src/social/providers/NavigationProvider.tsx b/src/social/providers/NavigationProvider.tsx index 718d51476..435b56b3e 100644 --- a/src/social/providers/NavigationProvider.tsx +++ b/src/social/providers/NavigationProvider.tsx @@ -1,6 +1,7 @@ import React, { createContext, useCallback, useContext, useState, useMemo, ReactNode } from 'react'; import { FormattedMessage } from 'react-intl'; -import { confirm } from '~/core/components/Confirm'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; + import { PageTypes } from '~/social/constants'; type Page = @@ -74,12 +75,6 @@ let defaultValue: ContextValue = { onBack: () => {}, }; -const defaultAskForConfirmation = ({ onSuccess: onOk, ...params }: { onSuccess: () => void }) => - confirm({ - ...params, - onOk, - }); - export const defaultNavigationBlocker = { title: , content: , @@ -131,7 +126,7 @@ interface NavigationProviderProps { } export default function NavigationProvider({ - askForConfirmation = defaultAskForConfirmation, + askForConfirmation, children, onChangePage: onChangePageProp, onClickCategory, @@ -156,11 +151,15 @@ export default function NavigationProvider({ | undefined >(); + const { confirm } = useConfirmContext(); + + const confirmation = askForConfirmation ?? confirm; + const confirmPageChange = useCallback(async () => { if (navigationBlocker) { // for more info about this, see https://ekoapp.atlassian.net/browse/UP-3462?focusedCommentId=77155 return new Promise((resolve) => { - askForConfirmation({ + confirmation({ ...navigationBlocker, onSuccess: () => { setNavigationBlocker?.(undefined); diff --git a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx index adaa470aa..3dded2ebb 100644 --- a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx @@ -5,11 +5,11 @@ import HomeIndicator from '../HomeIndicator'; import styles from './styles.module.css'; import InputText from '~/v4/core/components/InputText'; import useMention from '~/v4/chat/hooks/useMention'; -import { confirm } from '~/v4/core/components/ConfirmModal'; import { useIntl } from 'react-intl'; import useChannelPermission from '~/v4/chat/hooks/useChannelPermission'; import { useCustomization } from '~/v4/core/providers/CustomizationProvider'; import { notification } from '~/v4/chat/components/LiveChatNotification'; +import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; const COMPOSEBAR_MAX_CHARACTER_LIMIT = 200; @@ -42,6 +42,7 @@ export const AmityLiveChatMessageComposeBar = ({ const [mentionList, setMentionList] = useState<{ [key: ComposeBarMention['id']]: ComposeBarMention; }>({}); + const { confirm } = useConfirmContext(); const { getConfig } = useCustomization(); const componentConfig = getConfig('live_chat/message_composer/*'); diff --git a/src/v4/chat/components/AmityLiveChatMessageList/index.tsx b/src/v4/chat/components/AmityLiveChatMessageList/index.tsx index c40d6ac11..5ba3aefb7 100644 --- a/src/v4/chat/components/AmityLiveChatMessageList/index.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageList/index.tsx @@ -6,13 +6,13 @@ import useSDK from '~/core/hooks/useSDK'; import AmityLiveChatMessageSenderView from '../AmityLiveChatMessageSenderView'; import AmityLiveChatMessageReceiverView from '../AmityLiveChatMessageReceiverView'; import { copyMessage, deleteMessage, flagMessage } from '~/v4/utils'; -import { confirm } from '~/v4/core/components/ConfirmModal'; import useMessagesCollection from '~/chat/hooks/collections/useMessagesCollection'; import { FormattedMessage, useIntl } from 'react-intl'; import { Typography } from '~/v4/core/components'; import Redo from '~/v4/icons/Redo'; import { notification } from '~/v4/chat/components/LiveChatNotification'; import { unFlagMessage } from '~/v4/utils/unFlagMessage'; +import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; interface AmityLiveChatMessageListProps { channel: Amity.Channel; @@ -27,6 +27,7 @@ export const AmityLiveChatMessageList = ({ const containerRef = React.useRef(null); const { formatMessage } = useIntl(); const [height, setHeight] = React.useState(undefined); + const { confirm } = useConfirmContext(); const { messages: rawMessages, diff --git a/src/v4/core/components/ConfirmModal/index.tsx b/src/v4/core/components/ConfirmModal/index.tsx index f5d7d1e18..13dab2ecf 100644 --- a/src/v4/core/components/ConfirmModal/index.tsx +++ b/src/v4/core/components/ConfirmModal/index.tsx @@ -1,8 +1,9 @@ -import React, { useState } from 'react'; -import Modal from '../Modal'; +import React from 'react'; +import Modal from '~/v4/core/components/Modal'; import { Button } from '~/v4/core/components/Button'; import clsx from 'clsx'; import styles from './styles.module.css'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; const Confirm = ({ 'data-qa-anchor': dataQaAnchor = '', @@ -41,51 +42,26 @@ const Confirm = ({ } onCancel={onCancel} > -
{content}
+
{content}
); -let spawnNewConfirm: any; // for modfying ConfirmContainer state outside +export const ConfirmComponent = () => { + const { confirmData, closeConfirm } = useConfirmContext(); -// rendered by provider, to allow spawning of confirm from confirm function below -export const ConfirmContainer = () => { - const [confirm, setConfirm] = useState(null); - spawnNewConfirm = (confirmData: any) => { - setConfirm(confirmData); - }; - - if (!confirm) return null; + if (!confirmData) return null; - const closeConfirm = () => setConfirm(null); + const onCancel = () => { + closeConfirm(); + confirmData?.onCancel && confirmData.onCancel(); + }; - const attachCanceling = (fn: any) => () => { + const onOk = () => { closeConfirm(); - fn && fn(); + confirmData?.onOk && confirmData.onOk(); }; - return ( - - ); + return ; }; -/* - Usage: - confirm({ - title: 'Delete post', - content: - 'This post will be permanently deleted. You’ll no longer to see and find this post. Continue?', - okText: 'Delete', - onOk: onDelete, - }); - - This interface rely on ConfirmContainer being rendered by UIKITProvider in the react tree -*/ -export const confirm = (confirmData: any) => spawnNewConfirm({ ...confirmData, type: 'confirm' }); - -export const info = (data: any) => spawnNewConfirm({ ...data, type: 'info' }); - export default Confirm; diff --git a/src/v4/core/providers/AmityUIKitProvider.tsx b/src/v4/core/providers/AmityUIKitProvider.tsx index 7bace1f10..2c0097ee4 100644 --- a/src/v4/core/providers/AmityUIKitProvider.tsx +++ b/src/v4/core/providers/AmityUIKitProvider.tsx @@ -11,7 +11,7 @@ import PostRendererProvider from '~/social/providers/PostRendererProvider'; import NavigationProvider from '~/social/providers/NavigationProvider'; import ConfigProvider from '~/social/providers/ConfigProvider'; -import { ConfirmContainer } from '~/v4/core/components/ConfirmModal'; +import { ConfirmComponent } from '~/v4/core/components/ConfirmModal'; import { NotificationsContainer } from '~/v4/core/components/Notification'; import Localization from '~/core/providers/UiKitProvider/Localization'; @@ -24,6 +24,7 @@ import { PageBehaviorProvider } from './PageBehaviorProvider'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { UIStyles } from '~/core/providers/UiKitProvider/styles'; import AmityUIKitManager from '../AmityUIKitManager'; +import { ConfirmProvider } from '~/v4/core/providers/ConfirmProvider'; export type AmityUIKitConfig = Config; @@ -135,22 +136,24 @@ const AmityUIKitProvider: React.FC = ({ - - - - - {children} - - - - - - + + + + + + {children} + + + + + + + diff --git a/src/v4/core/providers/ConfirmProvider.tsx b/src/v4/core/providers/ConfirmProvider.tsx new file mode 100644 index 000000000..b290db3c9 --- /dev/null +++ b/src/v4/core/providers/ConfirmProvider.tsx @@ -0,0 +1,53 @@ +import React, { createContext, ReactNode, useContext, useState } from 'react'; +import { PrimaryButton } from '~/core/components/Button/styles'; + +type ConfirmType = { + onCancel?: () => void; + onOk?: () => void; + type?: 'confirm' | 'info'; + OkButton?: ReactNode; + CancelButton?: ReactNode; + title?: ReactNode; + content?: ReactNode; + okText?: ReactNode; + cancelText?: ReactNode; + 'data-qa-anchor'?: string; + theme?: 'light' | 'dark'; +}; + +interface ConfirmContextProps { + confirmData: ConfirmType | null; + confirm: (data: ConfirmType) => void; + info: (data: ConfirmType) => void; + closeConfirm: () => void; +} + +export const ConfirmContext = createContext({ + confirmData: null, + confirm: () => {}, + info: () => {}, + closeConfirm: () => {}, +}); + +export const useConfirmContext = () => useContext(ConfirmContext); + +export const ConfirmProvider: React.FC = ({ children }) => { + const [confirmData, setConfirmData] = useState(null); + + const closeConfirm = () => { + setConfirmData(null); + }; + + const confirm = (confirmData: ConfirmType) => { + setConfirmData({ ...confirmData, type: 'confirm' }); + }; + + const info = (data: ConfirmType) => + setConfirmData({ ...data, type: 'info', OkButton: PrimaryButton }); + + return ( + + {children} + + ); +}; diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx index 7db0b8cdc..f44cb3af2 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx @@ -4,7 +4,7 @@ import { useForm } from 'react-hook-form'; import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/zod'; import { SecondaryButton } from '~/core/components/Button'; -import { confirm } from '~/core/components/Confirm'; + import useSDK from '~/core/hooks/useSDK'; import { BottomSheet } from '~/v4/core/components'; import { @@ -16,6 +16,7 @@ import { import { useCustomization } from '~/v4/core/providers/CustomizationProvider'; import { Trash2Icon } from '~/icons'; import styles from './HyperLinkConfig.module.css'; +import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; interface HyperLinkConfigProps { pageId: '*'; @@ -36,6 +37,7 @@ export const HyperLinkConfig = ({ onSubmit, onRemove, }: HyperLinkConfigProps) => { + const { confirm } = useConfirmContext(); const componentId = 'hyper_link_config_component'; const { getConfig } = useCustomization(); const componentConfig = getConfig(`${pageId}/${componentId}/*`); diff --git a/src/v4/social/components/ViewStoryPage/index.tsx b/src/v4/social/components/ViewStoryPage/index.tsx index 176a5ae5b..f188769a7 100644 --- a/src/v4/social/components/ViewStoryPage/index.tsx +++ b/src/v4/social/components/ViewStoryPage/index.tsx @@ -10,7 +10,7 @@ import { notification } from '~/core/components/Notification'; import { useMedia } from 'react-use'; import useStories from '~/social/hooks/useStories'; import useSDK from '~/core/hooks/useSDK'; -import { confirm } from '~/core/components/Confirm'; + import { isNonNullable } from '~/v4/helpers/utils'; import { ArrowLeftCircle, ArrowRightCircle, Trash2Icon } from '~/icons'; @@ -22,6 +22,7 @@ import { renderers } from '../../internal-components/StoryViewer/Renderers'; import { checkStoryPermission } from '~/utils'; import { AmityDraftStoryPage } from '../../pages'; import { useStoryContext } from '../../providers/StoryProvider'; +import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; interface StoryViewerProps { pageId: 'story_page'; @@ -34,6 +35,7 @@ const StoryViewer = ({ pageId, targetId, duration = 5000, onClose }: StoryViewer const { getConfig, isExcluded } = useCustomization(); const pageConfig = getConfig(`${pageId}/*/*`); const isPageExcluded = isExcluded(`${pageId}/*/*`); + const { confirm } = useConfirmContext(); if (isPageExcluded) return null; diff --git a/src/v4/social/internal-components/Comment/index.tsx b/src/v4/social/internal-components/Comment/index.tsx index 2e4a511fe..3c9eaafe4 100644 --- a/src/v4/social/internal-components/Comment/index.tsx +++ b/src/v4/social/internal-components/Comment/index.tsx @@ -1,7 +1,6 @@ import React, { memo, useState } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; -import { confirm } from '~/core/components/Confirm'; import useComment from '~/social/hooks/useComment'; import { notification } from '~/core/components/Notification'; @@ -50,6 +49,7 @@ import { CommentList } from '~/v4/social/internal-components/CommentList'; import { ReactionList } from '~/v4/social/components/ReactionList'; import { useTheme } from 'styled-components'; import useGetStoryByStoryId from '../../hooks/useGetStoryByStoryId'; +import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; const REPLIES_PER_PAGE = 5; @@ -119,6 +119,7 @@ const Comment = ({ const story = useGetStoryByStoryId(comment?.referenceId); const [bottomSheet, setBottomSheet] = useState(false); const [selectedCommentId, setSelectedCommentId] = useState(''); + const { confirm } = useConfirmContext(); const commentAuthor = useUser(comment?.userId); const commentAuthorAvatar = useImage({ fileId: commentAuthor?.avatarFileId, imageSize: 'small' }); diff --git a/src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.tsx b/src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.tsx index 5d0d310d5..fb353edfd 100644 --- a/src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.tsx +++ b/src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.tsx @@ -6,7 +6,6 @@ import { Mentionees, Metadata } from '~/v4/helpers/utils'; import useSDK from '~/core/hooks/useSDK'; import { LoadingIndicator } from '~/core/components/ProgressBar/styles'; import { FormattedMessage, useIntl } from 'react-intl'; -import { info } from '~/core/components/Confirm'; import { AddCommentButton, @@ -17,6 +16,7 @@ import { import { backgroundImage as UserImage } from '~/icons/User'; import useImage from '~/core/hooks/useImage'; +import { useConfirmContext } from '~/core/providers/ConfirmProvider'; const TOTAL_MENTIONEES_LIMIT = 30; const COMMENT_LENGTH_LIMIT = 50000; @@ -46,6 +46,7 @@ export const CommentComposeBar = ({ targetType: 'community', }); const { formatMessage } = useIntl(); + const { info } = useConfirmContext(); const commentInputRef = useRef(null); diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index ecbc702d3..a097fc000 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from 'react'; import { useIntl } from 'react-intl'; import { extractColors } from 'extract-colors'; -import { confirm } from '~/core/components/Confirm'; + import { readFileAsync } from '~/helpers'; import useUser from '~/core/hooks/useUser'; import useSDK from '~/core/hooks/useSDK'; @@ -22,6 +22,7 @@ import { HyperLink } from '../../elements/HyperLink'; import { HyperlinkFormContainer } from '../../components/HyperLinkConfig/styles'; import { HyperLinkConfig } from '../../components'; import { useNavigation } from '~/social/providers/NavigationProvider'; +import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; type AmityStoryMediaType = { type: 'image'; url: string } | { type: 'video'; url: string }; @@ -42,6 +43,7 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor const { file, setFile } = useStoryContext(); const { navigationBehavior } = usePageBehavior(); const [isHyperLinkBottomSheetOpen, setIsHyperLinkBottomSheetOpen] = useState(false); + const { confirm } = useConfirmContext(); const [hyperLink, setHyperLink] = useState< { diff --git a/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx b/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx index 01ad1cc6b..a29e0f9a6 100644 --- a/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx +++ b/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx @@ -16,7 +16,6 @@ import { isNonNullable } from '~/v4/helpers/utils'; import { extractColors } from 'extract-colors'; import { useNavigation } from '~/social/providers/NavigationProvider'; -import { confirm } from '~/core/components/Confirm'; import { HiddenInput, @@ -32,6 +31,7 @@ import { renderers } from '../../internal-components/StoryViewer/Renderers'; import { AmityDraftStoryPage } from '..'; import { checkStoryPermission } from '~/utils'; import { useStoryContext } from '../../providers/StoryProvider'; +import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; interface CommunityFeedStoryProps { communityId: string; @@ -41,6 +41,7 @@ const DURATION = 5000; export const CommunityFeedStory = ({ communityId }: CommunityFeedStoryProps) => { const { onBack } = useNavigation(); + const { confirm } = useConfirmContext(); const { stories } = useStories({ targetId: communityId, diff --git a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx index b49fc73f8..d6fd00a04 100644 --- a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx +++ b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx @@ -16,7 +16,6 @@ import { isNonNullable } from '~/helpers/utils'; import { extractColors } from 'extract-colors'; import { useNavigation } from '~/social/providers/NavigationProvider'; -import { confirm } from '~/core/components/Confirm'; import { HiddenInput, @@ -32,6 +31,7 @@ import { renderers } from '../../internal-components/StoryViewer/Renderers'; import { AmityDraftStoryPage } from '..'; import { checkStoryPermission } from '~/utils'; import { useStoryContext } from '../../providers/StoryProvider'; +import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; interface CommunityFeedStoryProps { communityId: string; @@ -41,6 +41,7 @@ const DURATION = 5000; export const GlobalFeedStory = ({ communityId }: CommunityFeedStoryProps) => { const { onBack } = useNavigation(); + const { confirm } = useConfirmContext(); const { stories } = useStories({ targetId: communityId, From 20878a7882fd8efe7e58dfc37a8885a174d0765d Mon Sep 17 00:00:00 2001 From: Bonn Date: Wed, 24 Apr 2024 13:34:31 +0700 Subject: [PATCH 33/88] fix: ASC-00000 - notification context (#286) * fix: NotificationProvider * fix: add NotificationProvider into UiKitProvider * chore: move LiveChatNotificationProvider to chat --- src/chat/components/Chat/CreateChatModal.tsx | 3 +- .../EditChatMemberComposer/index.tsx | 3 +- .../ChatDetails/EditChatMemberModal.tsx | 4 +- src/chat/components/Message/Options.tsx | 3 +- src/chat/pages/Application/index.tsx | 3 +- src/core/components/Notification/index.tsx | 54 +-------- src/core/hooks/useAsyncCallback.ts | 3 +- src/core/hooks/useErrorNotification.ts | 5 +- src/core/providers/NotificationProvider.tsx | 103 ++++++++++++++++++ src/core/providers/UiKitProvider/index.tsx | 31 +++--- src/social/components/Comment/index.tsx | 3 +- .../CommunityForm/EditCommunityForm.tsx | 3 +- .../CommunityMembers/CommunityMemberItem.tsx | 3 +- src/social/components/EngagementBar/index.tsx | 3 +- src/social/components/UserInfo/index.tsx | 3 +- src/social/components/post/Creator/index.tsx | 3 +- src/social/components/post/Creator/utils.tsx | 11 -- .../post/PollComposer/PollModal.tsx | 3 +- .../post/Post/DefaultPostRenderer.tsx | 3 +- .../UserFeed/Followers/FollowersList.tsx | 3 +- .../UserFeed/Followers/FollowingsList.tsx | 3 +- .../pages/UserFeed/Followers/PendingList.tsx | 4 +- .../AmityLiveChatMessageComposeBar/index.tsx | 3 +- .../AmityLiveChatMessageList/index.tsx | 7 +- .../components/LiveChatNotification/index.tsx | 52 +-------- src/v4/chat/pages/AmityLiveChatPage/index.tsx | 15 ++- .../LiveChatNotificationProvider.module.css | 6 + .../LiveChatNotificationProvider.tsx | 89 +++++++++++++++ src/v4/core/components/Notification/index.tsx | 55 +--------- src/v4/core/hooks.ts | 16 +++ src/v4/core/providers/AmityUIKitProvider.tsx | 39 ++++--- .../providers/NotificationProvider.module.css | 44 ++++++++ .../core/providers/NotificationProvider.tsx | 90 +++++++++++++++ .../social/components/ViewStoryPage/index.tsx | 3 +- .../internal-components/Comment/index.tsx | 3 +- src/v4/social/pages/DraftsPage/DraftsPage.tsx | 3 +- .../pages/StoryPage/CommunityFeedStory.tsx | 3 +- .../pages/StoryPage/GlobalFeedStory.tsx | 3 +- src/v4/utils/copyMessage.tsx | 11 -- src/v4/utils/index.ts | 1 - 40 files changed, 460 insertions(+), 240 deletions(-) create mode 100644 src/core/providers/NotificationProvider.tsx create mode 100644 src/v4/chat/providers/LiveChatNotificationProvider.module.css create mode 100644 src/v4/chat/providers/LiveChatNotificationProvider.tsx create mode 100644 src/v4/core/hooks.ts create mode 100644 src/v4/core/providers/NotificationProvider.module.css create mode 100644 src/v4/core/providers/NotificationProvider.tsx delete mode 100644 src/v4/utils/copyMessage.tsx diff --git a/src/chat/components/Chat/CreateChatModal.tsx b/src/chat/components/Chat/CreateChatModal.tsx index e8a281475..7aab94db5 100644 --- a/src/chat/components/Chat/CreateChatModal.tsx +++ b/src/chat/components/Chat/CreateChatModal.tsx @@ -4,8 +4,8 @@ import { ChannelRepository } from '@amityco/ts-sdk'; import Modal from '~/core/components/Modal'; import ChatComposer from '~/chat/components/Chat/ChatComposer'; -import { notification } from '~/core/components/Notification'; import { useConfirmContext } from '~/core/providers/ConfirmProvider'; +import { useNotifications } from '~/core/providers/NotificationProvider'; type Props = { onClose: () => void; @@ -14,6 +14,7 @@ type Props = { const CreateChatModal = ({ onClose }: Props) => { const { formatMessage } = useIntl(); const { confirm } = useConfirmContext(); + const notification = useNotifications(); const handleSubmit = async (data: Parameters[0]) => { try { diff --git a/src/chat/components/ChatDetails/EditChatMemberComposer/index.tsx b/src/chat/components/ChatDetails/EditChatMemberComposer/index.tsx index d32b222a4..e0835bd78 100644 --- a/src/chat/components/ChatDetails/EditChatMemberComposer/index.tsx +++ b/src/chat/components/ChatDetails/EditChatMemberComposer/index.tsx @@ -20,8 +20,8 @@ import { } from './styles'; import { ChannelRepository } from '@amityco/ts-sdk'; import { isNonNullable } from '~/helpers/utils'; -import { notification } from '~/core/components/Notification'; import useChannelMembersCollection from '~/chat/hooks/collections/useChannelMembersCollection'; +import { useNotifications } from '~/core/providers/NotificationProvider'; const FormBlock = ({ children }: { children: ReactNode }) => ( @@ -52,6 +52,7 @@ const EditChatMemberComposerForm = ({ onSubmit, }: EditChatMemberComposerFormProps) => { const [isSubmitting, setIsSubmitting] = React.useState(false); + const notification = useNotifications(); const defaultValues = { userIds: memberIds, diff --git a/src/chat/components/ChatDetails/EditChatMemberModal.tsx b/src/chat/components/ChatDetails/EditChatMemberModal.tsx index 6cace2e0c..944edfdeb 100644 --- a/src/chat/components/ChatDetails/EditChatMemberModal.tsx +++ b/src/chat/components/ChatDetails/EditChatMemberModal.tsx @@ -3,10 +3,9 @@ import { useIntl } from 'react-intl'; import { ChannelRepository } from '@amityco/ts-sdk'; import Modal from '~/core/components/Modal'; -import ChatComposer from '~/chat/components/Chat/ChatComposer'; -import { notification } from '~/core/components/Notification'; import EditChatMemberComposer from './EditChatMemberComposer'; import { useConfirmContext } from '~/core/providers/ConfirmProvider'; +import { useNotifications } from '~/core/providers/NotificationProvider'; type Props = { channelId: string; @@ -16,6 +15,7 @@ type Props = { const EditChatMemberModal = ({ channelId, onClose }: Props) => { const { formatMessage } = useIntl(); const { confirm } = useConfirmContext(); + const notification = useNotifications(); const handleSubmit = async ( data: Parameters[1], diff --git a/src/chat/components/Message/Options.tsx b/src/chat/components/Message/Options.tsx index 3fe171287..89627b593 100644 --- a/src/chat/components/Message/Options.tsx +++ b/src/chat/components/Message/Options.tsx @@ -5,11 +5,11 @@ import { FormattedMessage, useIntl } from 'react-intl'; import Popover from '~/core/components/Popover'; import Menu, { MenuItem } from '~/core/components/Menu'; -import { notification } from '~/core/components/Notification'; import { MessageOptionsIcon, SaveIcon, CloseIcon, EditingInput, EditingContainer } from './styles'; import useMessageFlaggedByMe from '~/chat/hooks/useMessageFlaggedByMe'; import useMessageSubscription from '~/social/hooks/useMessageSubscription'; +import { useNotifications } from '~/core/providers/NotificationProvider'; const StyledPopover = styled(Popover)<{ align?: string; className?: string }>` ${({ align, theme }) => align === 'end' && `color: ${theme.palette.neutral.main};`} @@ -55,6 +55,7 @@ const Options = ({ // const popupContainerRef = useRef(); const [text, setText] = useState(''); const [isEditing, setIsEditing] = useState(false); + const notification = useNotifications(); const edit: React.MouseEventHandler = (e) => { e.stopPropagation(); diff --git a/src/chat/pages/Application/index.tsx b/src/chat/pages/Application/index.tsx index 4ea6317aa..486356481 100644 --- a/src/chat/pages/Application/index.tsx +++ b/src/chat/pages/Application/index.tsx @@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'; import { ChannelRepository, Client as ASCClient } from '@amityco/ts-sdk'; import { useIntl } from 'react-intl'; -import { notification } from '~/core/components/Notification'; import RecentChat from '~/chat/components/RecentChat'; import Chat from '~/chat/components/Chat'; import ChatDetails from '~/chat/components/ChatDetails'; @@ -10,6 +9,7 @@ import ChatDetails from '~/chat/components/ChatDetails'; import { ApplicationContainer } from './styles'; import CreateChatModal from '~/chat/components/Chat/CreateChatModal'; import EditChatMemberModal from '~/chat/components/ChatDetails/EditChatMemberModal'; +import { useNotifications } from '~/core/providers/NotificationProvider'; type PartialChannel = Pick; @@ -37,6 +37,7 @@ const ChatApplication = ({ const { formatMessage } = useIntl(); const [currentChannelData, setCurrentChannelData] = useState(null); const [shouldShowChatDetails, setShouldShowChatDetails] = useState(false); + const notification = useNotifications(); const showChatDetails = () => setShouldShowChatDetails(true); const hideChatDetails = () => setShouldShowChatDetails(false); diff --git a/src/core/components/Notification/index.tsx b/src/core/components/Notification/index.tsx index bd806a239..7e8e157bd 100644 --- a/src/core/components/Notification/index.tsx +++ b/src/core/components/Notification/index.tsx @@ -1,8 +1,7 @@ -import React, { ReactNode, useState } from 'react'; +import React, { ReactNode, useEffect, useState } from 'react'; +import { useNotificationData } from '~/core/providers/NotificationProvider'; -import { NotificationContainer, Notifications, SuccessIcon, InfoIcon, ErrorIcon } from './styles'; - -const DEFAULT_NOTIFICATION_DURATION = 3000; +import { NotificationContainer, Notifications } from './styles'; interface NotificationProps { className?: string; @@ -10,42 +9,15 @@ interface NotificationProps { icon?: ReactNode; } -interface NotificationData { - id: number; - content: ReactNode; - icon?: ReactNode; -} - -type NotificationInput = Omit & { duration?: number }; - const Notification = ({ className, content, icon }: NotificationProps) => ( {icon} {content} ); -let spawnNewNotification: (notificationData: NotificationInput) => void; // for modifying NotificationContainer state outside - // rendered by provider, to allow spawning of notification from notification function below export const NotificationsContainer = () => { - const [notifications, setNotifications] = useState([]); - - const removeNotification = (id: number) => - setNotifications && - setNotifications((prevNotifications) => - prevNotifications.filter((notification) => notification.id !== id), - ); - - spawnNewNotification = ({ - duration = DEFAULT_NOTIFICATION_DURATION, - ...notificationData - }: NotificationInput) => { - const id = Date.now(); - - setNotifications([{ id, ...notificationData }, ...notifications]); - - setTimeout(() => removeNotification(id), duration); - }; + const notifications = useNotificationData(); return ( @@ -56,22 +28,4 @@ export const NotificationsContainer = () => { ); }; -/* - Usage: - notification.success({ - content: 'Report Sent', - }); - - This interface rely on NotificationsContainer being rendered by UIKITProvider in the react tree -*/ -export const notification = { - success: (data: Omit) => - spawnNewNotification({ ...data, icon: }), - info: (data: Omit) => - spawnNewNotification({ ...data, icon: }), - error: (data: Omit) => - spawnNewNotification({ ...data, icon: }), - show: (data: Omit) => spawnNewNotification(data), -}; - export default Notification; diff --git a/src/core/hooks/useAsyncCallback.ts b/src/core/hooks/useAsyncCallback.ts index 001ec2db1..aebafe1d9 100644 --- a/src/core/hooks/useAsyncCallback.ts +++ b/src/core/hooks/useAsyncCallback.ts @@ -1,5 +1,5 @@ import { useCallback, useState } from 'react'; -import { notification } from '~/core/components/Notification'; +import { useNotifications } from '../providers/NotificationProvider'; /** * @deprecated @@ -10,6 +10,7 @@ export function useAsyncCallback, U, V extends (...args deps: unknown[], ): [(...args: T) => Promise, boolean] { const [loading, setLoading] = useState(false); + const notification = useNotifications(); const newCallback = useCallback(async (...args: T) => { try { diff --git a/src/core/hooks/useErrorNotification.ts b/src/core/hooks/useErrorNotification.ts index 91fa7294f..782483872 100644 --- a/src/core/hooks/useErrorNotification.ts +++ b/src/core/hooks/useErrorNotification.ts @@ -1,9 +1,10 @@ import { useEffect, useState } from 'react'; - -import { notification } from '~/core/components/Notification'; +import { useNotifications } from '~/v4/core/providers/NotificationProvider'; const useErrorNotification = () => { const [error, setError] = useState(null); + const notification = useNotifications(); + useEffect(() => { if (error) { notification.error({ diff --git a/src/core/providers/NotificationProvider.tsx b/src/core/providers/NotificationProvider.tsx new file mode 100644 index 000000000..4de106b3e --- /dev/null +++ b/src/core/providers/NotificationProvider.tsx @@ -0,0 +1,103 @@ +import React, { createContext, ReactNode, useContext, useState } from 'react'; +import styled from 'styled-components'; +import { Check, ExclamationCircle, Remove } from '~/icons'; + +export const SuccessIcon = styled(Check).attrs<{ icon?: ReactNode }>({ width: 18, height: 18 })` + margin-right: 8px; +`; + +export const InfoIcon = styled(ExclamationCircle).attrs<{ icon?: ReactNode }>({ + width: 18, + height: 18, +})` + margin-right: 8px; +`; + +export const ErrorIcon = styled(Remove).attrs<{ icon?: ReactNode }>({ width: 18, height: 18 })` + margin-right: 8px; +`; + +interface Notification { + id: number; + content: ReactNode; + icon?: ReactNode; + duration?: number; +} + +type NotificationInput = Omit & { duration?: number }; + +interface NotificationContextProps { + notifications: Notification[]; + notificationFunction: { + success: (data: Omit) => void; + info: (data: Omit) => void; + error: (data: Omit) => void; + show: (data: Omit) => void; + }; +} + +export const NotificationContext = createContext({ + notifications: [], + notificationFunction: { + success: () => {}, + info: () => {}, + error: () => {}, + show: () => {}, + }, +}); + +const DEFAULT_NOTIFICATION_DURATION = 3000; + +export const NotificationProvider: React.FC = ({ children }) => { + const [notifications, setNotifications] = useState([]); + + const removeNotification = (id: number) => + setNotifications && + setNotifications((prevNotifications) => + prevNotifications.filter((notification) => notification.id !== id), + ); + + const addNotifications = (data: NotificationInput) => { + const id = Date.now(); + setNotifications((prevNotifications) => [ + ...prevNotifications, + { + id, + ...data, + }, + ]); + + setTimeout(() => { + removeNotification(id); + }, data?.duration || DEFAULT_NOTIFICATION_DURATION); + }; + + return ( + ) => + addNotifications({ ...data, icon: }), + info: (data: Omit) => + addNotifications({ ...data, icon: }), + error: (data: Omit) => + addNotifications({ ...data, icon: }), + show: (data: Omit) => addNotifications(data), + }, + }} + > + {children} + + ); +}; + +export const useNotificationData = () => { + const { notifications } = useContext(NotificationContext); + return notifications; +}; + +export const useNotifications = () => { + const { notificationFunction } = useContext(NotificationContext); + return notificationFunction; +}; diff --git a/src/core/providers/UiKitProvider/index.tsx b/src/core/providers/UiKitProvider/index.tsx index 70d898c5b..140e224f2 100644 --- a/src/core/providers/UiKitProvider/index.tsx +++ b/src/core/providers/UiKitProvider/index.tsx @@ -21,6 +21,7 @@ import PostRendererProvider, { import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ConfirmProvider } from '../ConfirmProvider'; +import { NotificationProvider } from '~/core/providers/NotificationProvider'; interface UiKitProviderProps { apiKey: string; @@ -132,20 +133,22 @@ const UiKitProvider = ({ - - - - {children} - - - - - + + + + + {children} + + + + + + diff --git a/src/social/components/Comment/index.tsx b/src/social/components/Comment/index.tsx index 2254bef56..a60124f48 100644 --- a/src/social/components/Comment/index.tsx +++ b/src/social/components/Comment/index.tsx @@ -4,7 +4,6 @@ import { FormattedMessage, useIntl } from 'react-intl'; import useComment from '~/social/hooks/useComment'; import CommentComposeBar from '~/social/components/CommentComposeBar'; import CommentList from '~/social/components/CommentList'; -import { notification } from '~/core/components/Notification'; import StyledComment from './StyledComment'; import useSocialMention from '~/social/hooks/useSocialMention'; import usePost from '~/social/hooks/usePost'; @@ -39,6 +38,7 @@ import useCommentSubscription from '~/social/hooks/useCommentSubscription'; import { ERROR_RESPONSE } from '~/social/constants'; import { useConfirmContext } from '~/core/providers/ConfirmProvider'; +import { useNotifications } from '~/core/providers/NotificationProvider'; const REPLIES_PER_PAGE = 5; @@ -91,6 +91,7 @@ const Comment = ({ commentId, readonly }: CommentProps) => { const comment = useComment(commentId); const post = usePost(comment?.referenceId); const { confirm } = useConfirmContext(); + const notification = useNotifications(); const commentAuthor = useUser(comment?.userId); const commentAuthorAvatar = useFile(commentAuthor?.avatarFileId); diff --git a/src/social/components/CommunityForm/EditCommunityForm.tsx b/src/social/components/CommunityForm/EditCommunityForm.tsx index 8c65dd609..177d333bc 100644 --- a/src/social/components/CommunityForm/EditCommunityForm.tsx +++ b/src/social/components/CommunityForm/EditCommunityForm.tsx @@ -6,7 +6,6 @@ import Radio from '~/core/components/Radio'; import AvatarUploader from './AvatarUploader'; -import { notification } from '~/core/components/Notification'; import CategorySelector from './CategorySelector'; import { @@ -32,6 +31,7 @@ import { } from './styles'; import { EditFormValues, useEditCommunityForm } from './hooks'; import { CommunityRepository } from '@amityco/ts-sdk'; +import { useNotifications } from '~/core/providers/NotificationProvider'; interface FormBlockProps { title?: React.ReactNode; @@ -83,6 +83,7 @@ const EditCommunityForm = ({ const { errors, isValid } = formState; const displayName = watch('displayName'); const description = watch('description'); + const notification = useNotifications(); const formBodyRef = useRef(null); diff --git a/src/social/components/CommunityMembers/CommunityMemberItem.tsx b/src/social/components/CommunityMembers/CommunityMemberItem.tsx index 1b00a70d4..300f33b3b 100644 --- a/src/social/components/CommunityMembers/CommunityMemberItem.tsx +++ b/src/social/components/CommunityMembers/CommunityMemberItem.tsx @@ -1,7 +1,6 @@ import React from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; -import { notification } from '~/core/components/Notification'; import OptionMenu from '~/core/components/OptionMenu'; import UserHeader from '~/social/components/UserHeader'; import useUser from '~/core/hooks/useUser'; @@ -13,6 +12,7 @@ import useUserFlaggedByMe from '~/social/hooks/useUserFlaggedByMe'; import useUserSubscription from '~/social/hooks/useUserSubscription'; import { SubscriptionLevels } from '@amityco/ts-sdk'; import { useConfirmContext } from '~/core/providers/ConfirmProvider'; +import { useNotifications } from '~/core/providers/NotificationProvider'; const { COMMUNITY_MODERATOR, CHANNEL_MODERATOR } = MemberRoles; @@ -46,6 +46,7 @@ const CommunityMemberItem = ({ const { isFlaggedByMe, toggleFlagUser } = useUserFlaggedByMe(userId); const isGlobalBanned = user?.isGlobalBanned; const { confirm } = useConfirmContext(); + const notification = useNotifications(); useUserSubscription({ userId, diff --git a/src/social/components/EngagementBar/index.tsx b/src/social/components/EngagementBar/index.tsx index d3d60446a..23887c296 100644 --- a/src/social/components/EngagementBar/index.tsx +++ b/src/social/components/EngagementBar/index.tsx @@ -7,10 +7,10 @@ import { Mentionees, Metadata } from '~/helpers/utils'; import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; import useReactionSubscription from '~/social/hooks/useReactionSubscription'; import usePostSubscription from '~/social/hooks/usePostSubscription'; -import { notification } from '~/core/components/Notification'; import { FormattedMessage } from 'react-intl'; import useSocialMention from '~/social/hooks/useSocialMention'; import { ERROR_RESPONSE } from '~/social/constants'; +import { useNotifications } from '~/core/providers/NotificationProvider'; interface EngagementBarProps { postId: string; @@ -19,6 +19,7 @@ interface EngagementBarProps { const EngagementBar = ({ postId, readonly = false }: EngagementBarProps) => { const [isComposeBarDisplayed, setComposeBarDisplayed] = useState(false); + const notification = useNotifications(); const toggleComposeBar = () => setComposeBarDisplayed((prevValue) => !prevValue); const hideComposeBar = () => setComposeBarDisplayed(false); diff --git a/src/social/components/UserInfo/index.tsx b/src/social/components/UserInfo/index.tsx index 51f1c823c..cadefb7f3 100644 --- a/src/social/components/UserInfo/index.tsx +++ b/src/social/components/UserInfo/index.tsx @@ -5,7 +5,6 @@ import useUser from '~/core/hooks/useUser'; import { useNavigation } from '~/social/providers/NavigationProvider'; import useFollowCount from '~/core/hooks/useFollowCount'; import useImage from '~/core/hooks/useImage'; -import { notification } from '~/core/components/Notification'; import useSDK from '~/core/hooks/useSDK'; import { SubscriptionLevels, UserRepository } from '@amityco/ts-sdk'; import useFollowStatus from '~/core/hooks/useFollowStatus'; @@ -14,6 +13,7 @@ import UIUserInfo from './UIUserInfo'; import useUserSubscription from '~/social/hooks/useUserSubscription'; import useFollowersSubscription from '~/social/hooks/useFollowersSubscription'; import useFollowingsSubscription from '~/social/hooks/useFollowingsSubscription'; +import { useNotifications } from '~/core/providers/NotificationProvider'; interface UserInfoProps { userId?: string | null; @@ -35,6 +35,7 @@ const UserInfo = ({ const { currentUserId } = useSDK(); const { formatMessage } = useIntl(); const { onEditUser } = useNavigation(); + const notification = useNotifications(); const user = useUser(userId); const avatarFileUrl = useImage({ fileId: user?.avatarFileId, imageSize: 'small' }); diff --git a/src/social/components/post/Creator/index.tsx b/src/social/components/post/Creator/index.tsx index ecde207da..01958cb2d 100644 --- a/src/social/components/post/Creator/index.tsx +++ b/src/social/components/post/Creator/index.tsx @@ -13,7 +13,6 @@ import useImage from '~/core/hooks/useImage'; import useUser from '~/core/hooks/useUser'; import useErrorNotification from '~/core/hooks/useErrorNotification'; -import { notification } from '~/core/components/Notification'; import { backgroundImage as UserImage } from '~/icons/User'; import { backgroundImage as CommunityImage } from '~/icons/Community'; @@ -45,6 +44,7 @@ import useSocialMention from '~/social/hooks/useSocialMention'; import useCommunityModeratorsCollection from '~/social/hooks/collections/useCommunityModeratorsCollection'; import { ERROR_RESPONSE } from '~/social/constants'; import { useConfirmContext } from '~/core/providers/ConfirmProvider'; +import { useNotifications } from '~/core/providers/NotificationProvider'; const useTargetData = ({ targetId, @@ -116,6 +116,7 @@ const PostCreatorBar = ({ const { setNavigationBlocker } = useNavigation(); const user = useUser(currentUserId); const { info } = useConfirmContext(); + const notification = useNotifications(); // default to me if (targetType === 'global' || targetType === 'myFeed') { diff --git a/src/social/components/post/Creator/utils.tsx b/src/social/components/post/Creator/utils.tsx index 07468adb0..082b63ae9 100644 --- a/src/social/components/post/Creator/utils.tsx +++ b/src/social/components/post/Creator/utils.tsx @@ -1,5 +1,4 @@ import { PostRepository } from '@amityco/ts-sdk'; -import { notification } from '~/core/components/Notification'; import promisify from '~/helpers/promisify'; export const MAX_IMAGES = 10; @@ -12,16 +11,6 @@ type Author = { communityId: string; userId: string }; export const isIdenticalAuthor = (a: Author, b: Author) => !!getAuthorId(a) && getAuthorId(a) === getAuthorId(b); -export const maxImagesWarning = () => - notification.info({ - content: 'You reached the maximum attachment of 10', - }); - -export const maxFilesWarning = () => - notification.info({ - content: 'The selected file is larger than 1GB. Please select a new file. ', - }); - type CreatePostParams = Parameters[0]; export async function createPost({ diff --git a/src/social/components/post/PollComposer/PollModal.tsx b/src/social/components/post/PollComposer/PollModal.tsx index 1b629c5bf..6e7c73cb2 100644 --- a/src/social/components/post/PollComposer/PollModal.tsx +++ b/src/social/components/post/PollComposer/PollModal.tsx @@ -4,9 +4,9 @@ import { PollRepository } from '@amityco/ts-sdk'; import Modal from '~/core/components/Modal'; import PollComposer from '~/social/components/post/PollComposer'; -import { notification } from '~/core/components/Notification'; import { ERROR_RESPONSE } from '~/social/constants'; import { useConfirmContext } from '~/core/providers/ConfirmProvider'; +import { useNotifications } from '~/core/providers/NotificationProvider'; interface PollModalProps { targetId?: string | null; @@ -24,6 +24,7 @@ const PollModal = ({ targetId, targetType, onClose, onCreatePoll }: PollModalPro const [isDirty, setDirty] = useState(false); const { formatMessage } = useIntl(); const { confirm } = useConfirmContext(); + const notification = useNotifications(); const handleSubmit = async ( data: Parameters[0], diff --git a/src/social/components/post/Post/DefaultPostRenderer.tsx b/src/social/components/post/Post/DefaultPostRenderer.tsx index 7058e0dbe..0da4efad6 100644 --- a/src/social/components/post/Post/DefaultPostRenderer.tsx +++ b/src/social/components/post/Post/DefaultPostRenderer.tsx @@ -2,7 +2,6 @@ import React, { useState } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; import Button, { PrimaryButton } from '~/core/components/Button'; import Modal from '~/core/components/Modal'; -import { notification } from '~/core/components/Notification'; import { isNonNullable } from '~/helpers/utils'; import EngagementBar from '~/social/components/EngagementBar'; import ChildrenContent from '~/social/components/post/ChildrenContent'; @@ -23,6 +22,7 @@ import useSDK from '~/core/hooks/useSDK'; import usePostSubscription from '~/social/hooks/usePostSubscription'; import { SubscriptionLevels } from '@amityco/ts-sdk'; import { useConfirmContext } from '~/core/providers/ConfirmProvider'; +import { useNotifications } from '~/core/providers/NotificationProvider'; // Number of lines to show in a text post before truncating. const MAX_TEXT_LINES_DEFAULT = 8; @@ -53,6 +53,7 @@ const DefaultPostRenderer = ({ const openEditingPostModal = () => setIsEditing(true); const closeEditingPostModal = () => setIsEditing(false); const { info, confirm } = useConfirmContext(); + const notification = useNotifications(); function showHasBeenReviewedMessageIfNeeded(error: unknown) { if (error instanceof Error) { diff --git a/src/social/pages/UserFeed/Followers/FollowersList.tsx b/src/social/pages/UserFeed/Followers/FollowersList.tsx index 5faa41aa2..19109365d 100644 --- a/src/social/pages/UserFeed/Followers/FollowersList.tsx +++ b/src/social/pages/UserFeed/Followers/FollowersList.tsx @@ -8,7 +8,6 @@ import { isLoadingItem } from '~/utils'; import useUser from '~/core/hooks/useUser'; import { UserRepository } from '@amityco/ts-sdk'; import { useNavigation } from '~/social/providers/NavigationProvider'; -import { notification } from '~/core/components/Notification'; import { Grid, @@ -24,6 +23,7 @@ import useFollowersSubscription from '~/social/hooks/useFollowersSubscription'; import useSDK from '~/core/hooks/useSDK'; import useFollowersCollection from '~/core/hooks/collections/useFollowersCollection'; import { useConfirmContext } from '~/core/providers/ConfirmProvider'; +import { useNotifications } from '~/core/providers/NotificationProvider'; interface UserItemProps { profileUserId: string; @@ -37,6 +37,7 @@ export const UserItem = ({ profileUserId, currentUserId, userId, onClick }: User const avatarFileUrl = useImage({ fileId: user?.avatarFileId, imageSize: 'small' }); const { onClickUser } = useNavigation(); const { confirm } = useConfirmContext(); + const notification = useNotifications(); const { formatMessage } = useIntl(); const { isFlaggedByMe, toggleFlagUser } = useUserFlaggedByMe(userId || undefined); diff --git a/src/social/pages/UserFeed/Followers/FollowingsList.tsx b/src/social/pages/UserFeed/Followers/FollowingsList.tsx index d0d105f2b..2b8bf09e4 100644 --- a/src/social/pages/UserFeed/Followers/FollowingsList.tsx +++ b/src/social/pages/UserFeed/Followers/FollowingsList.tsx @@ -8,7 +8,6 @@ import { isLoadingItem } from '~/utils'; import useUser from '~/core/hooks/useUser'; import { UserRepository } from '@amityco/ts-sdk'; import { useNavigation } from '~/social/providers/NavigationProvider'; -import { notification } from '~/core/components/Notification'; import { Grid, @@ -23,6 +22,7 @@ import useFollowingsSubscription from '~/social/hooks/useFollowingsSubscription' import useSDK from '~/core/hooks/useSDK'; import useFollowingsCollection from '~/core/hooks/collections/useFollowingsCollection'; import { useConfirmContext } from '~/core/providers/ConfirmProvider'; +import { useNotifications } from '~/core/providers/NotificationProvider'; interface UserItemProps { profileUserId: string; @@ -35,6 +35,7 @@ export const UserItem = ({ profileUserId, currentUserId, userId, onClick }: User const user = useUser(userId); const { onClickUser } = useNavigation(); const { confirm } = useConfirmContext(); + const notification = useNotifications(); const { formatMessage } = useIntl(); const { isFlaggedByMe, toggleFlagUser } = useUserFlaggedByMe(userId); diff --git a/src/social/pages/UserFeed/Followers/PendingList.tsx b/src/social/pages/UserFeed/Followers/PendingList.tsx index f263af2ef..2da713f4e 100644 --- a/src/social/pages/UserFeed/Followers/PendingList.tsx +++ b/src/social/pages/UserFeed/Followers/PendingList.tsx @@ -4,15 +4,17 @@ import { FormattedMessage } from 'react-intl'; import { ButtonsContainer, UserHeaderContainer } from '~/social/pages/UserFeed/Followers/styles'; import UserHeader from '~/social/components/UserHeader'; import Button, { PrimaryButton } from '~/core/components/Button'; -import { notification } from '~/core/components/Notification'; import { Grid } from '~/social/components/community/CategoryCommunitiesList/styles'; import Skeleton from '~/core/components/Skeleton'; import LoadMore from '~/core/components/LoadMore'; import { UserRepository } from '@amityco/ts-sdk'; import { isLoadingItem } from '~/utils'; import useFollowersCollection from '~/core/hooks/collections/useFollowersCollection'; +import { useNotifications } from '~/core/providers/NotificationProvider'; const PendingItem = ({ userId }: { userId: string }) => { + const notification = useNotifications(); + const followAccept = async () => { if (!userId) return; await UserRepository.Relationship.acceptMyFollower(userId); diff --git a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx index 3dded2ebb..ef558cfcd 100644 --- a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx @@ -8,8 +8,8 @@ import useMention from '~/v4/chat/hooks/useMention'; import { useIntl } from 'react-intl'; import useChannelPermission from '~/v4/chat/hooks/useChannelPermission'; import { useCustomization } from '~/v4/core/providers/CustomizationProvider'; -import { notification } from '~/v4/chat/components/LiveChatNotification'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; +import { useLiveChatNotifications } from '~/v4/chat/providers/LiveChatNotificationProvider'; const COMPOSEBAR_MAX_CHARACTER_LIMIT = 200; @@ -43,6 +43,7 @@ export const AmityLiveChatMessageComposeBar = ({ [key: ComposeBarMention['id']]: ComposeBarMention; }>({}); const { confirm } = useConfirmContext(); + const notification = useLiveChatNotifications(); const { getConfig } = useCustomization(); const componentConfig = getConfig('live_chat/message_composer/*'); diff --git a/src/v4/chat/components/AmityLiveChatMessageList/index.tsx b/src/v4/chat/components/AmityLiveChatMessageList/index.tsx index 5ba3aefb7..329b18e2f 100644 --- a/src/v4/chat/components/AmityLiveChatMessageList/index.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageList/index.tsx @@ -5,14 +5,15 @@ import LivechatLoadingIndicator from '~/v4/chat/components/LivechatLoadingIndica import useSDK from '~/core/hooks/useSDK'; import AmityLiveChatMessageSenderView from '../AmityLiveChatMessageSenderView'; import AmityLiveChatMessageReceiverView from '../AmityLiveChatMessageReceiverView'; -import { copyMessage, deleteMessage, flagMessage } from '~/v4/utils'; +import { deleteMessage, flagMessage } from '~/v4/utils'; import useMessagesCollection from '~/chat/hooks/collections/useMessagesCollection'; import { FormattedMessage, useIntl } from 'react-intl'; import { Typography } from '~/v4/core/components'; import Redo from '~/v4/icons/Redo'; -import { notification } from '~/v4/chat/components/LiveChatNotification'; import { unFlagMessage } from '~/v4/utils/unFlagMessage'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; +import { useLiveChatNotifications } from '~/v4/chat/providers/LiveChatNotificationProvider'; +import { useCopyMessage } from '~/v4/core/hooks'; interface AmityLiveChatMessageListProps { channel: Amity.Channel; @@ -28,6 +29,8 @@ export const AmityLiveChatMessageList = ({ const { formatMessage } = useIntl(); const [height, setHeight] = React.useState(undefined); const { confirm } = useConfirmContext(); + const notification = useLiveChatNotifications(); + const copyMessage = useCopyMessage(); const { messages: rawMessages, diff --git a/src/v4/chat/components/LiveChatNotification/index.tsx b/src/v4/chat/components/LiveChatNotification/index.tsx index 0e800cdf0..7fdb99d57 100644 --- a/src/v4/chat/components/LiveChatNotification/index.tsx +++ b/src/v4/chat/components/LiveChatNotification/index.tsx @@ -1,11 +1,8 @@ -import React, { ReactNode, useState } from 'react'; -import ExclamationCircle from '~/v4/icons/ExclamationCircle'; -import CheckCircle from '~/icons/CheckCircle'; +import React, { ReactNode } from 'react'; import clsx from 'clsx'; import styles from './styles.module.css'; import { Typography } from '~/v4/core/components/index'; - -const DEFAULT_NOTIFICATION_DURATION = 3000; +import { useLiveChatNotificationData } from '~/v4/chat/providers/LiveChatNotificationProvider'; interface NotificationProps { className?: string; @@ -13,14 +10,6 @@ interface NotificationProps { icon?: ReactNode; } -interface NotificationData { - id: number; - content: ReactNode; - icon?: ReactNode; -} - -type NotificationInput = Omit & { duration?: number }; - const LiveChatNotification = ({ className, content, icon }: NotificationProps) => (
{icon} @@ -28,27 +17,8 @@ const LiveChatNotification = ({ className, content, icon }: NotificationProps) =
); -let spawnNewNotification: (notificationData: NotificationInput) => void; // for modifying NotificationContainer state outside - export const LiveChatNotificationsContainer = () => { - const [notifications, setNotifications] = useState([]); - - const removeNotification = (id: number) => - setNotifications && - setNotifications((prevNotifications) => - prevNotifications.filter((notification) => notification.id !== id), - ); - - spawnNewNotification = ({ - duration = DEFAULT_NOTIFICATION_DURATION, - ...notificationData - }: NotificationInput) => { - const id = Date.now(); - - setNotifications([{ id, ...notificationData }, ...notifications]); - - setTimeout(() => removeNotification(id), duration); - }; + const notifications = useLiveChatNotificationData(); return (
@@ -59,20 +29,4 @@ export const LiveChatNotificationsContainer = () => { ); }; -/* - Usage: - notification.success({ - content: 'Report Sent', - }); - - This interface rely on LiveChatNotificationsContainer being rendered by live chat page only -*/ -export const notification = { - success: (data: Omit) => - spawnNewNotification({ ...data, icon: }), - error: (data: Omit) => - spawnNewNotification({ ...data, icon: }), - show: (data: Omit) => spawnNewNotification(data), -}; - export default LiveChatNotification; diff --git a/src/v4/chat/pages/AmityLiveChatPage/index.tsx b/src/v4/chat/pages/AmityLiveChatPage/index.tsx index ccb60b199..b9c9dcca2 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/index.tsx +++ b/src/v4/chat/pages/AmityLiveChatPage/index.tsx @@ -1,8 +1,9 @@ import React, { useRef } from 'react'; import useChannel from '~/v4/chat/hooks/useChannel'; -import AmityLiveChatHeader from 'v4/chat/components/AmityLiveChatHeader'; +import AmityLiveChatHeader from '~/v4/chat/components/AmityLiveChatHeader'; import ChatContainer from './ChatContainer'; import styles from './styles.module.css'; +import { LiveChatNotificationProvider } from '~/v4/chat/providers/LiveChatNotificationProvider'; interface AmityLiveChatPageProps { channelId: Amity.Channel['channelId']; @@ -13,12 +14,14 @@ export const AmityLiveChatPage = ({ channelId }: AmityLiveChatPageProps) => { const ref = useRef(null); return ( -
-
- + +
+
+ +
+
- -
+ ); }; diff --git a/src/v4/chat/providers/LiveChatNotificationProvider.module.css b/src/v4/chat/providers/LiveChatNotificationProvider.module.css new file mode 100644 index 000000000..f46b11921 --- /dev/null +++ b/src/v4/chat/providers/LiveChatNotificationProvider.module.css @@ -0,0 +1,6 @@ +.icon { + width: 1.5rem; + height: 1.5rem; + fill: var(--asc-color-base-inverse); + margin-right: var(--asc-spacing-s2); +} diff --git a/src/v4/chat/providers/LiveChatNotificationProvider.tsx b/src/v4/chat/providers/LiveChatNotificationProvider.tsx new file mode 100644 index 000000000..3c1a87f94 --- /dev/null +++ b/src/v4/chat/providers/LiveChatNotificationProvider.tsx @@ -0,0 +1,89 @@ +import React, { createContext, ReactNode, useContext, useState } from 'react'; +import CheckCircle from '~/v4/icons/CheckCircle'; +import ExclamationCircle from '~/v4/icons/ExclamationCircle'; + +import styles from './LiveChatNotificationProvider.module.css'; + +interface LiveChatNotification { + id: number; + content: ReactNode; + icon?: ReactNode; + duration?: number; +} + +type LiveChatNotificationInput = Omit & { duration?: number }; + +interface LiveChatNotificationContextProps { + liveChatNotifications: LiveChatNotification[]; + liveChatNotificationFunction: { + success: (data: Omit) => void; + error: (data: Omit) => void; + show: (data: Omit) => void; + }; +} + +export const LiveChatNotificationContext = createContext({ + liveChatNotifications: [], + liveChatNotificationFunction: { + success: () => {}, + error: () => {}, + show: () => {}, + }, +}); + +const DEFAULT_NOTIFICATION_DURATION = 3000; + +export const LiveChatNotificationProvider: React.FC = ({ children }) => { + const [liveChatNotifications, setLiveChatNotifications] = useState([]); + + const removeLiveChatNotification = (id: number) => + setLiveChatNotifications && + setLiveChatNotifications((prevLiveChatNotifications) => + prevLiveChatNotifications.filter((notification) => notification.id !== id), + ); + + const addLiveChatNotifications = (data: LiveChatNotificationInput) => { + const id = Date.now(); + setLiveChatNotifications((prevLiveChatNotifications) => [ + ...prevLiveChatNotifications, + { + id, + ...data, + }, + ]); + + setTimeout(() => { + removeLiveChatNotification(id); + }, data?.duration || DEFAULT_NOTIFICATION_DURATION); + }; + + return ( + ) => + addLiveChatNotifications({ ...data, icon: }), + error: (data: Omit) => + addLiveChatNotifications({ + ...data, + icon: , + }), + show: (data: Omit) => addLiveChatNotifications(data), + }, + }} + > + {children} + + ); +}; + +export const useLiveChatNotificationData = () => { + const { liveChatNotifications } = useContext(LiveChatNotificationContext); + return liveChatNotifications; +}; + +export const useLiveChatNotifications = () => { + const { liveChatNotificationFunction } = useContext(LiveChatNotificationContext); + return liveChatNotificationFunction; +}; diff --git a/src/v4/core/components/Notification/index.tsx b/src/v4/core/components/Notification/index.tsx index 4fb1a82e2..471fd8cd8 100644 --- a/src/v4/core/components/Notification/index.tsx +++ b/src/v4/core/components/Notification/index.tsx @@ -1,11 +1,7 @@ -import React, { ReactNode, useState } from 'react'; -import Check from '~/v4/icons/Check'; -import ExclamationCircle from '~/v4/icons/ExclamationCircle'; -import Remove from '~/v4/icons/Remove'; +import React, { ReactNode } from 'react'; import clsx from 'clsx'; import styles from './styles.module.css'; - -const DEFAULT_NOTIFICATION_DURATION = 3000; +import { useNotificationData } from '~/v4/core/providers/NotificationProvider'; interface NotificationProps { className?: string; @@ -13,42 +9,15 @@ interface NotificationProps { icon?: ReactNode; } -interface NotificationData { - id: number; - content: ReactNode; - icon?: ReactNode; -} - -type NotificationInput = Omit & { duration?: number }; - const Notification = ({ className, content, icon }: NotificationProps) => (
{icon} {content}
); -let spawnNewNotification: (notificationData: NotificationInput) => void; // for modifying NotificationContainer state outside - // rendered by provider, to allow spawning of notification from notification function below export const NotificationsContainer = () => { - const [notifications, setNotifications] = useState([]); - - const removeNotification = (id: number) => - setNotifications && - setNotifications((prevNotifications) => - prevNotifications.filter((notification) => notification.id !== id), - ); - - spawnNewNotification = ({ - duration = DEFAULT_NOTIFICATION_DURATION, - ...notificationData - }: NotificationInput) => { - const id = Date.now(); - - setNotifications([{ id, ...notificationData }, ...notifications]); - - setTimeout(() => removeNotification(id), duration); - }; + const notifications = useNotificationData(); return (
@@ -59,22 +28,4 @@ export const NotificationsContainer = () => { ); }; -/* - Usage: - notification.success({ - content: 'Report Sent', - }); - - This interface rely on NotificationsContainer being rendered by UIKITProvider in the react tree -*/ -export const notification = { - success: (data: Omit) => - spawnNewNotification({ ...data, icon: }), - info: (data: Omit) => - spawnNewNotification({ ...data, icon: }), - error: (data: Omit) => - spawnNewNotification({ ...data, icon: }), - show: (data: Omit) => spawnNewNotification(data), -}; - export default Notification; diff --git a/src/v4/core/hooks.ts b/src/v4/core/hooks.ts new file mode 100644 index 000000000..7f62da8d1 --- /dev/null +++ b/src/v4/core/hooks.ts @@ -0,0 +1,16 @@ +import { useIntl } from 'react-intl'; +import { useNotifications } from '~/v4/core/providers/NotificationProvider'; + +export const useCopyMessage = () => { + const notification = useNotifications(); + const { formatMessage } = useIntl(); + + const copyMessage = async (message: string) => { + await navigator.clipboard.writeText(message); + notification.show({ + content: formatMessage({ id: 'livechat.notification.copy.message' }), + }); + }; + + return copyMessage; +}; diff --git a/src/v4/core/providers/AmityUIKitProvider.tsx b/src/v4/core/providers/AmityUIKitProvider.tsx index 2c0097ee4..934a4720d 100644 --- a/src/v4/core/providers/AmityUIKitProvider.tsx +++ b/src/v4/core/providers/AmityUIKitProvider.tsx @@ -25,6 +25,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { UIStyles } from '~/core/providers/UiKitProvider/styles'; import AmityUIKitManager from '../AmityUIKitManager'; import { ConfirmProvider } from '~/v4/core/providers/ConfirmProvider'; +import { NotificationProvider } from '~/v4/core/providers/NotificationProvider'; export type AmityUIKitConfig = Config; @@ -136,24 +137,26 @@ const AmityUIKitProvider: React.FC = ({ - - - - - - {children} - - - - - - - + + + + + + + {children} + + + + + + + + diff --git a/src/v4/core/providers/NotificationProvider.module.css b/src/v4/core/providers/NotificationProvider.module.css new file mode 100644 index 000000000..ab5a7aafa --- /dev/null +++ b/src/v4/core/providers/NotificationProvider.module.css @@ -0,0 +1,44 @@ +/* styles.module.css */ +.icon { + width: 1.125rem; + height: 1.125rem; + margin-right: 8px; +} + +.notifications { + position: fixed; + padding-top: 50px; + top: 0; + left: 0; + right: 0; + display: flex; + flex-direction: column; + align-items: center; + z-index: 99999; + pointer-events: none; +} + +.notificationContainer { + width: 480px; + padding: 8px 30px; + display: flex; + justify-content: center; + align-items: center; + color: white; + border-radius: 4px; + margin-bottom: 10px; + animation-duration: 0.3s; + animation-name: appear; + pointer-events: auto; + background-color: var(--asc-color-base-shade4); +} + +@keyframes appear { + from { + opacity: 0; + } + + to { + opacity: 1; + } +} diff --git a/src/v4/core/providers/NotificationProvider.tsx b/src/v4/core/providers/NotificationProvider.tsx new file mode 100644 index 000000000..97a4c8d85 --- /dev/null +++ b/src/v4/core/providers/NotificationProvider.tsx @@ -0,0 +1,90 @@ +import React, { createContext, ReactNode, useContext, useState } from 'react'; +import Check from '~/v4/icons/Check'; +import ExclamationCircle from '~/v4/icons/ExclamationCircle'; +import Remove from '~/v4/icons/Remove'; +import styles from './NotificationProvider.module.css'; + +interface Notification { + id: number; + content: ReactNode; + icon?: ReactNode; + duration?: number; +} + +type NotificationInput = Omit & { duration?: number }; + +interface NotificationContextProps { + notifications: Notification[]; + notificationFunction: { + success: (data: Omit) => void; + info: (data: Omit) => void; + error: (data: Omit) => void; + show: (data: Omit) => void; + }; +} + +export const NotificationContext = createContext({ + notifications: [], + notificationFunction: { + success: () => {}, + info: () => {}, + error: () => {}, + show: () => {}, + }, +}); + +const DEFAULT_NOTIFICATION_DURATION = 3000; + +export const NotificationProvider: React.FC = ({ children }) => { + const [notifications, setNotifications] = useState([]); + + const removeNotification = (id: number) => + setNotifications && + setNotifications((prevNotifications) => + prevNotifications.filter((notification) => notification.id !== id), + ); + + const addNotifications = (data: NotificationInput) => { + const id = Date.now(); + setNotifications((prevNotifications) => [ + ...prevNotifications, + { + id, + ...data, + }, + ]); + + setTimeout(() => { + removeNotification(id); + }, data?.duration || DEFAULT_NOTIFICATION_DURATION); + }; + + return ( + ) => + addNotifications({ ...data, icon: }), + info: (data: Omit) => + addNotifications({ ...data, icon: }), + error: (data: Omit) => + addNotifications({ ...data, icon: }), + show: (data: Omit) => addNotifications(data), + }, + }} + > + {children} + + ); +}; + +export const useNotificationData = () => { + const { notifications } = useContext(NotificationContext); + return notifications; +}; + +export const useNotifications = () => { + const { notificationFunction } = useContext(NotificationContext); + return notificationFunction; +}; diff --git a/src/v4/social/components/ViewStoryPage/index.tsx b/src/v4/social/components/ViewStoryPage/index.tsx index f188769a7..bb81e37c0 100644 --- a/src/v4/social/components/ViewStoryPage/index.tsx +++ b/src/v4/social/components/ViewStoryPage/index.tsx @@ -5,7 +5,6 @@ import { extractColors } from 'extract-colors'; import { FinalColor } from 'extract-colors/lib/types/Color'; import useImage from '~/core/hooks/useImage'; import { useIntl } from 'react-intl'; -import { notification } from '~/core/components/Notification'; import { useMedia } from 'react-use'; import useStories from '~/social/hooks/useStories'; @@ -23,6 +22,7 @@ import { checkStoryPermission } from '~/utils'; import { AmityDraftStoryPage } from '../../pages'; import { useStoryContext } from '../../providers/StoryProvider'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; +import { useNotifications } from '~/v4/core/providers/NotificationProvider'; interface StoryViewerProps { pageId: 'story_page'; @@ -36,6 +36,7 @@ const StoryViewer = ({ pageId, targetId, duration = 5000, onClose }: StoryViewer const pageConfig = getConfig(`${pageId}/*/*`); const isPageExcluded = isExcluded(`${pageId}/*/*`); const { confirm } = useConfirmContext(); + const notification = useNotifications(); if (isPageExcluded) return null; diff --git a/src/v4/social/internal-components/Comment/index.tsx b/src/v4/social/internal-components/Comment/index.tsx index 3c9eaafe4..b93888388 100644 --- a/src/v4/social/internal-components/Comment/index.tsx +++ b/src/v4/social/internal-components/Comment/index.tsx @@ -3,7 +3,6 @@ import { FormattedMessage, useIntl } from 'react-intl'; import useComment from '~/social/hooks/useComment'; -import { notification } from '~/core/components/Notification'; import useMention from '~/v4/chat/hooks/useMention'; import { @@ -50,6 +49,7 @@ import { ReactionList } from '~/v4/social/components/ReactionList'; import { useTheme } from 'styled-components'; import useGetStoryByStoryId from '../../hooks/useGetStoryByStoryId'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; +import { useNotifications } from '~/v4/core/providers/NotificationProvider'; const REPLIES_PER_PAGE = 5; @@ -120,6 +120,7 @@ const Comment = ({ const [bottomSheet, setBottomSheet] = useState(false); const [selectedCommentId, setSelectedCommentId] = useState(''); const { confirm } = useConfirmContext(); + const notification = useNotifications(); const commentAuthor = useUser(comment?.userId); const commentAuthorAvatar = useImage({ fileId: commentAuthor?.avatarFileId, imageSize: 'small' }); diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index a097fc000..3ddbfe255 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -16,13 +16,13 @@ import { AspectRatioButton, BackButton, HyperLinkButton, ShareStoryButton } from import { useStoryContext } from '../../providers/StoryProvider'; import { StoryVideoPreview } from './styles'; import { StoryRepository } from '@amityco/ts-sdk'; -import { notification } from '~/core/components/Notification'; import { HyperLink } from '../../elements/HyperLink'; import { HyperlinkFormContainer } from '../../components/HyperLinkConfig/styles'; import { HyperLinkConfig } from '../../components'; import { useNavigation } from '~/social/providers/NavigationProvider'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; +import { useNotifications } from '~/v4/core/providers/NotificationProvider'; type AmityStoryMediaType = { type: 'image'; url: string } | { type: 'video'; url: string }; @@ -44,6 +44,7 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor const { navigationBehavior } = usePageBehavior(); const [isHyperLinkBottomSheetOpen, setIsHyperLinkBottomSheetOpen] = useState(false); const { confirm } = useConfirmContext(); + const notification = useNotifications(); const [hyperLink, setHyperLink] = useState< { diff --git a/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx b/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx index a29e0f9a6..67f6e9d65 100644 --- a/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx +++ b/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx @@ -8,7 +8,6 @@ import { useMedia } from 'react-use'; import { useIntl } from 'react-intl'; import { FinalColor } from 'extract-colors/lib/types/Color'; -import { notification } from '~/core/components/Notification'; import { StoryRepository } from '@amityco/ts-sdk'; import { CreateStoryButton } from '../../elements'; import { Trash2Icon } from '~/icons'; @@ -32,6 +31,7 @@ import { AmityDraftStoryPage } from '..'; import { checkStoryPermission } from '~/utils'; import { useStoryContext } from '../../providers/StoryProvider'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; +import { useNotifications } from '~/v4/core/providers/NotificationProvider'; interface CommunityFeedStoryProps { communityId: string; @@ -42,6 +42,7 @@ const DURATION = 5000; export const CommunityFeedStory = ({ communityId }: CommunityFeedStoryProps) => { const { onBack } = useNavigation(); const { confirm } = useConfirmContext(); + const notification = useNotifications(); const { stories } = useStories({ targetId: communityId, diff --git a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx index d6fd00a04..59b99b11d 100644 --- a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx +++ b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx @@ -8,7 +8,6 @@ import { useMedia } from 'react-use'; import { useIntl } from 'react-intl'; import { FinalColor } from 'extract-colors/lib/types/Color'; -import { notification } from '~/core/components/Notification'; import { StoryRepository } from '@amityco/ts-sdk'; import { CreateStoryButton } from '../../elements'; import { Trash2Icon } from '~/icons'; @@ -32,6 +31,7 @@ import { AmityDraftStoryPage } from '..'; import { checkStoryPermission } from '~/utils'; import { useStoryContext } from '../../providers/StoryProvider'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; +import { useNotifications } from '~/v4/core/providers/NotificationProvider'; interface CommunityFeedStoryProps { communityId: string; @@ -42,6 +42,7 @@ const DURATION = 5000; export const GlobalFeedStory = ({ communityId }: CommunityFeedStoryProps) => { const { onBack } = useNavigation(); const { confirm } = useConfirmContext(); + const notification = useNotifications(); const { stories } = useStories({ targetId: communityId, diff --git a/src/v4/utils/copyMessage.tsx b/src/v4/utils/copyMessage.tsx deleted file mode 100644 index a702720b1..000000000 --- a/src/v4/utils/copyMessage.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { FormattedMessage } from 'react-intl'; -import { notification } from '~/v4/core/components/Notification'; - -export const copyMessage = (message: string) => { - navigator.clipboard.writeText(message).then(() => { - notification.show({ - content: , - }); - }); -}; diff --git a/src/v4/utils/index.ts b/src/v4/utils/index.ts index 085a82c06..ed2618a9b 100644 --- a/src/v4/utils/index.ts +++ b/src/v4/utils/index.ts @@ -1,4 +1,3 @@ -export { copyMessage } from './copyMessage'; export { deleteMessage } from './deleteMessage'; export { flagMessage } from './flagMessage'; export * from './generateShadeColors'; From 0197c270fba18c01a0cc4ad5e193ed348de19897 Mon Sep 17 00:00:00 2001 From: Bonn Date: Wed, 24 Apr 2024 14:07:03 +0700 Subject: [PATCH 34/88] fix: ASC-00000 - add login step on UiKitProvider (#287) * fix: login * fix: Update src/core/providers/UiKitProvider/index.tsx --- src/core/providers/UiKitProvider/index.tsx | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/src/core/providers/UiKitProvider/index.tsx b/src/core/providers/UiKitProvider/index.tsx index 140e224f2..ca56d683e 100644 --- a/src/core/providers/UiKitProvider/index.tsx +++ b/src/core/providers/UiKitProvider/index.tsx @@ -58,6 +58,7 @@ const UiKitProvider = ({ apiKey, apiRegion, apiEndpoint, + authToken, userId, displayName, customComponents = {}, @@ -68,7 +69,6 @@ const UiKitProvider = ({ actionHandlers, onConnectionStatusChange, onDisconnected, - pageBehavior, }: UiKitProviderProps) => { const queryClient = new QueryClient(); const [isConnected, setIsConnected] = useState(false); @@ -98,6 +98,20 @@ const UiKitProvider = ({ setClient(ascClient); } +await ASCClient.login( + { userId, displayName, authToken }, + { + sessionWillRenewAccessToken(renewal) { + // secure mode + if (authToken) { + renewal.renewWithAuthToken(authToken); + return; + } + + renewal.renew(); + }, + }, + ); setIsConnected(true); if (stateChangeRef.current == null) { @@ -114,7 +128,11 @@ const UiKitProvider = ({ } useEffect(() => { - login(); + async function run() { + await login(); + } + + run(); return () => { stateChangeRef.current?.(); From 0942cb07912fbee39d60f1fbb6585d187001ac2f Mon Sep 17 00:00:00 2001 From: Pitchaya T <33589608+ptchayap@users.noreply.github.com> Date: Wed, 24 Apr 2024 15:45:43 +0700 Subject: [PATCH 35/88] fix: message remain on compose bar after sending success (#289) --- .../chat/components/AmityLiveChatMessageComposeBar/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx index ef558cfcd..a4435f8dd 100644 --- a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx @@ -81,6 +81,8 @@ export const AmityLiveChatMessageComposeBar = ({ metadata, parentId: replyMessage?.messageId || undefined, }); + + onChange({ text: '', plainText: '', mentions: [] }); } catch (error) { const errorMessage = (error as Error).message; let notificationMessage = formatMessage({ id: 'livechat.error.sendingMessage' }); @@ -96,7 +98,7 @@ export const AmityLiveChatMessageComposeBar = ({ notification.error({ content: notificationMessage, }); - onChange({ text, plainText: text, mentions: [] }); + return; } From ab87cd0158defe95ae9e6fba2da69f14227ebf4e Mon Sep 17 00:00:00 2001 From: Pitchaya T <33589608+ptchayap@users.noreply.github.com> Date: Thu, 25 Apr 2024 10:44:10 +0700 Subject: [PATCH 36/88] fix: user muted state (#293) --- src/i18n/en.json | 3 +++ .../AmityLiveChatMessageComposeBar/index.tsx | 8 +++++-- .../hooks/collections/useSearchChannelUser.ts | 2 +- .../ChatContainer/ChatReadyState.tsx | 21 +++++++++++++++---- .../ChatContainer/styles.module.css | 6 +++--- .../components/InputText/styles.module.css | 6 +----- 6 files changed, 31 insertions(+), 15 deletions(-) diff --git a/src/i18n/en.json b/src/i18n/en.json index 2e08c43e8..2e77c1e71 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -421,6 +421,9 @@ "livechat.delete.message.error": "Unable to delete message. Please try again.", + "livechat.member.muted": "You’ve been muted by the channel moderator", + "livechat.member.muted.error": "User is muted", + "livechat.member.banned.title": "You are banned from chat", "livechat.member.banned.description": "You won’t be able to participate in this chat until you’ve been unbanned.", "livechat.report.message.success": "Message reported", diff --git a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx index a4435f8dd..90877b8df 100644 --- a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx @@ -24,6 +24,7 @@ interface AmityLiveChatMessageComposeBarProps { channel: Amity.Channel; composeAction: ComposeActionTypes; suggestionRef?: RefObject; + disabled?: boolean; } type ComposeBarMention = { @@ -38,6 +39,7 @@ export const AmityLiveChatMessageComposeBar = ({ channel, suggestionRef, composeAction: { replyMessage, mentionMessage, clearReplyMessage, clearMention }, + disabled, }: AmityLiveChatMessageComposeBarProps) => { const [mentionList, setMentionList] = useState<{ [key: ComposeBarMention['id']]: ComposeBarMention; @@ -85,7 +87,7 @@ export const AmityLiveChatMessageComposeBar = ({ onChange({ text: '', plainText: '', mentions: [] }); } catch (error) { const errorMessage = (error as Error).message; - let notificationMessage = formatMessage({ id: 'livechat.error.sendingMessage' }); + let notificationMessage = formatMessage({ id: 'livechat.error.sendingMessage.error' }); if (errorMessage === 'Amity SDK (400308): Text contain blocked word') { notificationMessage = formatMessage({ id: 'livechat.error.sendingMessage.blockedWord' }); @@ -93,6 +95,8 @@ export const AmityLiveChatMessageComposeBar = ({ errorMessage === 'Amity SDK (400309): Data contain link that is not in whitelist' ) { notificationMessage = formatMessage({ id: 'livechat.error.sendingMessage.notAllowLink' }); + } else if (errorMessage === 'Amity SDK (400302): User is muted') { + notificationMessage = formatMessage({ id: 'livechat.member.muted.error' }); } notification.error({ @@ -119,7 +123,7 @@ export const AmityLiveChatMessageComposeBar = ({ suggestionRef={suggestionRef} data-qa-anchor="live-chat-compose-bar" multiline - disabled={channel.isMuted} + disabled={disabled} placeholder={ componentConfig?.placeholder_text || formatMessage({ diff --git a/src/v4/chat/hooks/collections/useSearchChannelUser.ts b/src/v4/chat/hooks/collections/useSearchChannelUser.ts index faaca7df7..ae4da933b 100644 --- a/src/v4/chat/hooks/collections/useSearchChannelUser.ts +++ b/src/v4/chat/hooks/collections/useSearchChannelUser.ts @@ -9,7 +9,7 @@ const useSearchChannelUser = ( const { items, ...rest } = useLiveCollection({ fetcher: ChannelRepository.Membership.searchMembers, params: { channelId, search: search || '', memberships }, - shouldCall: () => !!channelId && !!search, + shouldCall: () => !!channelId, }); return { diff --git a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx index ec47ac2ab..9303dd7a7 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx +++ b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx @@ -13,10 +13,15 @@ import mentionStyles from '~/v4/core/components/InputText/styles.module.css'; import { FormattedMessage } from 'react-intl'; import useCurrentUserChannelMembership from '~/v4/chat/hooks/useCurrentUserChannelMembership'; import CommentAltExclamation from '~/v4/icons/CommentAltExclamation'; +import useSearchChannelUser from '~/v4/chat/hooks/collections/useSearchChannelUser'; +import useSDK from '~/core/hooks/useSDK'; const ChatReadyState = ({ channel }: { channel: Amity.Channel }) => { const isOnline = useConnectionStates(); - const currentUserMembership = useCurrentUserChannelMembership(channel.channelId); + + const currentUserId = useSDK().currentUserId; + const { channelMembers } = useSearchChannelUser(channel.channelId, ['member', 'banned', 'muted']); + const currentUserMembership = channelMembers.find((member) => member.userId === currentUserId); const [replyMessage, setReplyMessage] = useState | undefined>(undefined); const [mentionMessage, setMentionMessage] = useState | undefined>( @@ -57,14 +62,21 @@ const ChatReadyState = ({ channel }: { channel: Amity.Channel }) => { {isOnline && ( <>
- {channel.isMuted && ( + {channel.isMuted ? (
- +
- )} + ) : currentUserMembership?.isMuted ? ( +
+ + + + +
+ ) : null} {replyMessage && ( {
Date: Thu, 25 Apr 2024 11:04:12 +0700 Subject: [PATCH 37/88] fix: ASC-22026 - moderator cannot send message on muted channel (#294) * fix: user muted state * fix: moderator cannot send message on muted channel --- .../AmityLiveChatPage/ChatContainer/ChatReadyState.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx index 9303dd7a7..8d414bbe4 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx +++ b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx @@ -11,14 +11,16 @@ import MutedIcon from '~/v4/icons/Muted'; import { Typography } from '~/v4/core/components/Typography'; import mentionStyles from '~/v4/core/components/InputText/styles.module.css'; import { FormattedMessage } from 'react-intl'; -import useCurrentUserChannelMembership from '~/v4/chat/hooks/useCurrentUserChannelMembership'; import CommentAltExclamation from '~/v4/icons/CommentAltExclamation'; import useSearchChannelUser from '~/v4/chat/hooks/collections/useSearchChannelUser'; import useSDK from '~/core/hooks/useSDK'; +import useChannelPermission from '~/v4/chat/hooks/useChannelPermission'; const ChatReadyState = ({ channel }: { channel: Amity.Channel }) => { const isOnline = useConnectionStates(); + const { isModerator } = useChannelPermission(channel.channelId); + const currentUserId = useSDK().currentUserId; const { channelMembers } = useSearchChannelUser(channel.channelId, ['member', 'banned', 'muted']); const currentUserMembership = channelMembers.find((member) => member.userId === currentUserId); @@ -62,7 +64,7 @@ const ChatReadyState = ({ channel }: { channel: Amity.Channel }) => { {isOnline && ( <>
- {channel.isMuted ? ( + {!isModerator && channel.isMuted ? (
@@ -96,7 +98,7 @@ const ChatReadyState = ({ channel }: { channel: Amity.Channel }) => {
Date: Thu, 25 Apr 2024 11:08:18 +0700 Subject: [PATCH 38/88] fix: ASC-219999 - incorrect comment count color (#283) * fix: font * fix: story tab gap * fix: modal --- src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx | 2 +- .../social/elements/CommentButton/CommentButton.module.css | 5 +++-- src/v4/social/elements/ReactButton/styles.tsx | 1 - 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx b/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx index 1873d88cb..47630fb9c 100644 --- a/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx +++ b/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx @@ -37,7 +37,7 @@ export const StoryTabGlobalFeed: React.FC = () => { next={loadMoreStories} hasMore={hasMore} loader={

Loading...

} - style={{ display: 'flex', overflowX: 'auto' }} + style={{ display: 'flex', overflowX: 'auto', gap: '0.5rem' }} scrollThreshold={0.9} scrollableTarget="containerRef" > diff --git a/src/v4/social/elements/CommentButton/CommentButton.module.css b/src/v4/social/elements/CommentButton/CommentButton.module.css index ef3a87d73..29c15780b 100644 --- a/src/v4/social/elements/CommentButton/CommentButton.module.css +++ b/src/v4/social/elements/CommentButton/CommentButton.module.css @@ -1,11 +1,12 @@ .uiCommentButton { + font-family: "Inter"; font-weight: var(--asc-text-font-weight-bold); - color: var(--asc-color-base-inverse); + color: var(--asc-color-white); display: flex; align-items: center; justify-content: space-between; gap: var(--asc-spacing-xxs2); - border-radius: var(--asc-border-radius-full); + border-radius: 1.5rem; padding: var(--asc-spacing-s1) var(--asc-spacing-s2); background-color: var(--asc-color-base-default); cursor: pointer; diff --git a/src/v4/social/elements/ReactButton/styles.tsx b/src/v4/social/elements/ReactButton/styles.tsx index 01548cb86..467d54247 100644 --- a/src/v4/social/elements/ReactButton/styles.tsx +++ b/src/v4/social/elements/ReactButton/styles.tsx @@ -2,7 +2,6 @@ import styled from 'styled-components'; export const UIReactButton = styled.button` ${({ theme }) => theme.typography.bodyBold}; - color: #fff; display: flex; align-items: center; justify-content: space-between; From 1bfad593417670f80a58e27d10f863cbc12f0225 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Thu, 25 Apr 2024 11:42:51 +0700 Subject: [PATCH 39/88] fix: ASC-21979 - can't click header on video preview (#282) * fix: use css var * fix: move v4 story * fix: move folder * fix: remove index path * fix: styled to css module --- .../pages/Application/Application.module.css | 24 ++++++ src/v4/social/pages/Application/index.tsx | 82 +++++++++++++++++++ .../social/pages/Application/sdk.stories.tsx | 24 ++++++ .../pages/DraftsPage/DraftsPage.module.css | 47 ++++++----- src/v4/social/pages/DraftsPage/DraftsPage.tsx | 27 +++--- 5 files changed, 171 insertions(+), 33 deletions(-) create mode 100644 src/v4/social/pages/Application/Application.module.css create mode 100644 src/v4/social/pages/Application/index.tsx create mode 100644 src/v4/social/pages/Application/sdk.stories.tsx diff --git a/src/v4/social/pages/Application/Application.module.css b/src/v4/social/pages/Application/Application.module.css new file mode 100644 index 000000000..85a1fbe2a --- /dev/null +++ b/src/v4/social/pages/Application/Application.module.css @@ -0,0 +1,24 @@ +.applicationContainer { + height: 100%; + width: 100%; + } + + .styledCommunitySideMenu { + display: none; + } + + @media (min-width: 768px) { + .styledCommunitySideMenu { + min-height: 100%; + display: block; + } + } + + .wrapper { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; + } \ No newline at end of file diff --git a/src/v4/social/pages/Application/index.tsx b/src/v4/social/pages/Application/index.tsx new file mode 100644 index 000000000..53e16b9fa --- /dev/null +++ b/src/v4/social/pages/Application/index.tsx @@ -0,0 +1,82 @@ +import React, { useEffect, useState } from 'react'; +import styles from './Application.module.css'; +import { PageTypes } from '~/social/constants'; +import MainLayout from '~/social/layouts/Main'; +import CommunitySideMenu from '~/social/components/CommunitySideMenu'; +import ExplorePage from '~/social/pages/Explore'; +import NewsFeedPage from '~/social/pages/NewsFeed'; +import UserFeedPage from '~/social/pages/UserFeed'; +import CategoryCommunitiesPage from '~/social/pages/CategoryCommunities'; +import CommunityEditPage from '~/social/pages/CommunityEdit'; +import ProfileSettings from '~/social/components/ProfileSettings'; +import { useNavigation } from '~/social/providers/NavigationProvider'; +import useSDK from '~/core/hooks/useSDK'; +import { AmityViewStoryPage } from '~/v4/social/pages/StoryPage'; +import { StoryProvider } from '~/v4/social/providers/StoryProvider'; +import CommunityFeed from '~/social/pages/CommunityFeed'; + +const Community = () => { + const { page } = useNavigation(); + const { client } = useSDK(); + const [socialSettings, setSocialSettings] = useState(null); + const [open, setOpen] = useState(false); + + const toggleOpen = () => { + setOpen(!open); + }; + + useEffect(() => { + if (client === null) return; + async function run() { + const settings = await client?.getSocialSettings(); + if (settings) { + setSocialSettings(settings); + } + } + run(); + }, [client]); + + return ( + +
+ + +
+ } + > + {page.type === PageTypes.Explore && } + {page.type === PageTypes.NewsFeed && ( + + )} + {page.type === PageTypes.CommunityFeed && ( + + )} + {page.type === PageTypes.ViewStory && ( +
+ +
+ )} + {page.type === PageTypes.CommunityEdit && ( + + )} + {page.type === PageTypes.Category && ( + + )} + {page.type === PageTypes.UserFeed && ( + + )} + {page.type === PageTypes.UserEdit && } + +
+ + ); +}; + +export default Community; diff --git a/src/v4/social/pages/Application/sdk.stories.tsx b/src/v4/social/pages/Application/sdk.stories.tsx new file mode 100644 index 000000000..e6875f829 --- /dev/null +++ b/src/v4/social/pages/Application/sdk.stories.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import UiKitApp from './index'; + +export default { + title: 'V4/Social', +}; + +export const SDKCommunityAppV4 = { + render: (props) => { + return ; + }, + name: 'ApplicationV4', + + args: { + shouldHideExplore: false, + socialCommunityCreationButtonVisible: true, + }, + + argTypes: { + shouldHideExplore: { control: { type: 'boolean' } }, + socialCommunityCreationButtonVisible: { control: { type: 'boolean' } }, + onMemberClick: { action: 'onMemberClick()' }, + }, +}; diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.module.css b/src/v4/social/pages/DraftsPage/DraftsPage.module.css index 210791a06..fddc35208 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.module.css +++ b/src/v4/social/pages/DraftsPage/DraftsPage.module.css @@ -4,6 +4,16 @@ width: 23.438rem; height: 40.875rem; position: relative; + font-family: var(--asc-text-global-font-family); + font-style: var(--asc-text-global-font-style); +} + +.headerContainer { + position: absolute; + top: 0; + left: 0; + right: 0; + z-index: 1; } .header { @@ -11,31 +21,29 @@ width: 100%; justify-content: space-between; align-items: center; - position: absolute; - top: 0; - padding: 1rem; + padding: var(--asc-spacing-m1); } .topRightButtons { display: flex; width: 100%; justify-content: flex-end; - gap: 8px; + gap: var(--asc-spacing-s2); } .mainContainer { - flex: 1; - display: flex; - justify-content: center; - align-items: center; - overflow: hidden; - border-top-left-radius: 0.75rem; - border-top-right-radius: 0.75rem; - background: linear-gradient( - 180deg, - var(--draft-image-container-color-0, #000) 0%, - var(--draft-image-container-color-last, #000) 100% - ); + flex: 1; + display: flex; + justify-content: center; + align-items: center; + overflow: hidden; + border-top-left-radius: var(--asc-border-radius-lg); + border-top-right-radius: var(--asc-border-radius-lg); + background: linear-gradient( + 180deg, + var(--draft-image-container-color-0, var(--asc-color-black)) 0%, + var(--draft-image-container-color-last, var(--asc-color-black)) 100% + ); } .previewImage { @@ -46,8 +54,7 @@ .footer { display: flex; justify-content: flex-end; - padding: 16px; - background-color: black; + padding: var(--asc-spacing-m1); + background-color: var(--asc-color-black); width: 100%; -} - +} \ No newline at end of file diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index 3ddbfe255..fc55bd598 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from 'react'; import { useIntl } from 'react-intl'; import { extractColors } from 'extract-colors'; - import { readFileAsync } from '~/helpers'; import useUser from '~/core/hooks/useUser'; import useSDK from '~/core/hooks/useSDK'; @@ -178,21 +177,23 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor return ( <>
-
- -
- {mediaType?.type === 'image' && ( - +
+ +
+ {mediaType?.type === 'image' && ( + + )} + setIsHyperLinkBottomSheetOpen(true)} /> - )} - setIsHyperLinkBottomSheetOpen(true)} - /> +
From e141fb80524f08354cc0585ab6bc48d2ac68774b Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Thu, 25 Apr 2024 11:57:38 +0700 Subject: [PATCH 40/88] fix: use v4 (#295) --- src/v4/core/components/ConfirmModal/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v4/core/components/ConfirmModal/index.tsx b/src/v4/core/components/ConfirmModal/index.tsx index 13dab2ecf..7bb1f5804 100644 --- a/src/v4/core/components/ConfirmModal/index.tsx +++ b/src/v4/core/components/ConfirmModal/index.tsx @@ -3,7 +3,7 @@ import Modal from '~/v4/core/components/Modal'; import { Button } from '~/v4/core/components/Button'; import clsx from 'clsx'; import styles from './styles.module.css'; -import { useConfirmContext } from '~/core/providers/ConfirmProvider'; +import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; const Confirm = ({ 'data-qa-anchor': dataQaAnchor = '', From 5b229e2924708196701b54ca8083c557c6847873 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Thu, 25 Apr 2024 12:28:18 +0700 Subject: [PATCH 41/88] fix: ASC-20502 - shouldAllowCreation condition (#296) * fix: shouldAllowCreation * fix: type --- src/v4/social/components/CommentTray/CommentTray.tsx | 4 ++-- .../StoryCommentComposeBar/StoryCommentComposeBar.tsx | 4 ++-- .../internal-components/StoryViewer/Renderers/Image.tsx | 4 ++-- .../internal-components/StoryViewer/Renderers/Video.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/v4/social/components/CommentTray/CommentTray.tsx b/src/v4/social/components/CommentTray/CommentTray.tsx index fb3636e06..93e33403e 100644 --- a/src/v4/social/components/CommentTray/CommentTray.tsx +++ b/src/v4/social/components/CommentTray/CommentTray.tsx @@ -11,7 +11,7 @@ interface CommentTrayProps { referenceId: string; community: Amity.Community; shouldAllowInteraction: boolean; - shouldAllowCreation: boolean; + shouldAllowCreation?: boolean; } export const CommentTray = ({ @@ -19,7 +19,7 @@ export const CommentTray = ({ referenceId, community = {} as Amity.Community, shouldAllowInteraction = true, - shouldAllowCreation = true, + shouldAllowCreation = false, }: CommentTrayProps) => { const [isReplying, setIsReplying] = useState(false); const [replyTo, setReplyTo] = useState(null); diff --git a/src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx b/src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx index 100c93c9f..79b3aecfc 100644 --- a/src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx +++ b/src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx @@ -44,7 +44,7 @@ export const StoryCommentComposeBar = ({ data: { text: commentText, }, - mentionees, + mentionees: mentionees as Amity.UserMention[], metadata, }); }; @@ -62,7 +62,7 @@ export const StoryCommentComposeBar = ({ }, parentId: replyTo?.commentId, metadata, - mentionees, + mentionees: mentionees as Amity.UserMention[], }); }; diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx index 63e653e28..1cddc6862 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx @@ -208,8 +208,8 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { referenceId={storyId} referenceType="story" community={community as Amity.Community} - shouldAllowCreation={community?.allowCommentInStory || true} - shouldAllowInteraction={isJoined || true} + shouldAllowCreation={community?.allowCommentInStory} + shouldAllowInteraction={isJoined} /> diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx index 5831ae7c7..5e450346e 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx @@ -263,8 +263,8 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler (selectedComment?.referenceType as Amity.CommentReferenceType) || 'story' } community={community as Amity.Community} - shouldAllowCreation={community?.allowCommentInStory || true} - shouldAllowInteraction={isJoined || true} + shouldAllowCreation={community?.allowCommentInStory} + shouldAllowInteraction={isJoined} /> From 4955abc3e2a542e60c2f2bb72b35fa8c62f97434 Mon Sep 17 00:00:00 2001 From: Bonn Date: Thu, 25 Apr 2024 13:08:38 +0700 Subject: [PATCH 42/88] fix: ASC-20883 - remove latestComments prop (#290) * fix: pass latestComments to CommentList component * fix: remove latestComments prop --- src/social/components/CommentList/index.tsx | 31 ++++--------------- .../EngagementBar/UIEngagementBar.tsx | 19 +++++++----- 2 files changed, 17 insertions(+), 33 deletions(-) diff --git a/src/social/components/CommentList/index.tsx b/src/social/components/CommentList/index.tsx index bc888dcba..0f4c71f02 100644 --- a/src/social/components/CommentList/index.tsx +++ b/src/social/components/CommentList/index.tsx @@ -14,7 +14,6 @@ interface CommentListProps { readonly?: boolean; isExpanded?: boolean; limit?: number; - latestComments?: Amity.Comment[]; } const CommentList = ({ @@ -24,21 +23,15 @@ const CommentList = ({ limit = 5, readonly = false, isExpanded = true, - latestComments, }: CommentListProps) => { const { formatMessage } = useIntl(); const isReplyComment = !!parentId; - const { - comments: fetchedComments, - hasMore, - loadMore, - } = useCommentsCollection({ + const { comments, hasMore, loadMore } = useCommentsCollection({ parentId, referenceId, referenceType, limit, - shouldCall: () => latestComments?.length === 0, }); usePostSubscription({ @@ -47,8 +40,6 @@ const CommentList = ({ shouldSubscribe: () => referenceType === 'post' && !parentId, }); - const comments = latestComments || fetchedComments; - const loadMoreText = isReplyComment ? formatMessage({ id: 'collapsible.viewMoreReplies' }) : formatMessage({ id: 'collapsible.viewMoreComments' }); @@ -59,11 +50,7 @@ const CommentList = ({ ) : null; - if ( - (latestComments?.length === 0 || comments.length === 0) && - referenceType === 'story' && - !isReplyComment - ) { + if (comments.length === 0 && referenceType === 'story' && !isReplyComment) { return ( {formatMessage({ id: 'storyViewer.commentSheet.empty' })} @@ -71,7 +58,7 @@ const CommentList = ({ ); } - if (latestComments?.length === 0 || comments.length === 0) return null; + if (comments.length === 0) return null; return ( ( - - )) - : comments.map((comment) => ( - - )) - } + contentSlot={comments.map((comment) => ( + + ))} /> ); }; diff --git a/src/social/components/EngagementBar/UIEngagementBar.tsx b/src/social/components/EngagementBar/UIEngagementBar.tsx index 9b236fc4c..08340c882 100644 --- a/src/social/components/EngagementBar/UIEngagementBar.tsx +++ b/src/social/components/EngagementBar/UIEngagementBar.tsx @@ -73,7 +73,9 @@ const UIEngagementBar = ({ - + {latestComments.length > 0 ? ( + + ) : null} {isComposeBarDisplayed && ( - + {latestComments.length > 0 ? ( + + ) : null} )} From 313ffdf59f8f9fb627e4ba0fedc4fd5b47e3d57b Mon Sep 17 00:00:00 2001 From: Bonn Date: Thu, 25 Apr 2024 14:46:43 +0700 Subject: [PATCH 43/88] fix: add v3 provider (#298) --- src/v4/core/providers/AmityUIKitProvider.tsx | 46 ++++++++++++-------- 1 file changed, 28 insertions(+), 18 deletions(-) diff --git a/src/v4/core/providers/AmityUIKitProvider.tsx b/src/v4/core/providers/AmityUIKitProvider.tsx index 934a4720d..d7f7b4a97 100644 --- a/src/v4/core/providers/AmityUIKitProvider.tsx +++ b/src/v4/core/providers/AmityUIKitProvider.tsx @@ -12,7 +12,9 @@ import NavigationProvider from '~/social/providers/NavigationProvider'; import ConfigProvider from '~/social/providers/ConfigProvider'; import { ConfirmComponent } from '~/v4/core/components/ConfirmModal'; +import { ConfirmComponent as LegacyConfirmComponent } from '~/core/components/Confirm'; import { NotificationsContainer } from '~/v4/core/components/Notification'; +import { NotificationsContainer as LegacyNotificationsContainer } from '~/core/components/Notification'; import Localization from '~/core/providers/UiKitProvider/Localization'; @@ -25,7 +27,9 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { UIStyles } from '~/core/providers/UiKitProvider/styles'; import AmityUIKitManager from '../AmityUIKitManager'; import { ConfirmProvider } from '~/v4/core/providers/ConfirmProvider'; +import { ConfirmProvider as LegacyConfirmProvider } from '~/core/providers/ConfirmProvider'; import { NotificationProvider } from '~/v4/core/providers/NotificationProvider'; +import { NotificationProvider as LegacyNotificationProvider } from '~/core/providers/NotificationProvider'; export type AmityUIKitConfig = Config; @@ -138,24 +142,30 @@ const AmityUIKitProvider: React.FC = ({ - - - - - - {children} - - - - - - - + + + + + + + + {children} + + + + + + + + + + + From 0052c57341cbff729cc342647a24375a4445e900 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Thu, 25 Apr 2024 16:56:30 +0700 Subject: [PATCH 44/88] fix: ASC-21980 - hyper link background color (#299) * fix: use v4 * fix: hyperlink position and bg color * fix: remove styled component --- .../components/HyperLinkConfig/styles.tsx | 104 ------------------ .../pages/DraftsPage/DraftsPage.module.css | 11 ++ src/v4/social/pages/DraftsPage/DraftsPage.tsx | 5 +- 3 files changed, 13 insertions(+), 107 deletions(-) delete mode 100644 src/v4/social/components/HyperLinkConfig/styles.tsx diff --git a/src/v4/social/components/HyperLinkConfig/styles.tsx b/src/v4/social/components/HyperLinkConfig/styles.tsx deleted file mode 100644 index 43c043a07..000000000 --- a/src/v4/social/components/HyperLinkConfig/styles.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import styled from 'styled-components'; -import { SecondaryButton } from '~/core/components/Button'; - -import { Trash2Icon } from '~/icons'; - -export const HyperlinkFormContainer = styled.div` - padding: 1rem; - border-radius: var(--asc-border-radius-md); - margin: auto; -`; - -export const Form = styled.form` - display: flex; - flex-direction: column; - gap: 2rem; -`; - -export const InputContainer = styled.div` - display: flex; - flex-direction: column; - gap: 0.25rem; -`; - -export const Input = styled.input<{ hasError?: boolean }>` - width: 100%; - padding: 0.5rem; - border: none; - border-bottom: 1px solid - ${({ hasError, theme }) => - hasError ? theme.v4.colors.alert.default : theme.v4.colors.base.shade4}; - outline: none; - color: ${({ hasError, theme }) => (hasError ? theme.v4.colors.alert.default : 'inherit')}; -`; - -export const Label = styled.label<{ required?: boolean }>` - ${({ theme }) => theme.v4.typography.title}; - display: block; - - &::after { - content: ${({ required }) => (required ? "'*'" : 'none')}; - color: ${({ theme }) => theme.v4.colors.alert.default}; - } -`; - -export const Description = styled.label` - ${({ theme }) => theme.v4.typography.caption}; - color: ${({ theme }) => theme.v4.colors.base.shade2}; -`; - -export const ErrorText = styled.span` - ${({ theme }) => theme.v4.typography.caption}; - color: ${({ theme }) => theme.v4.colors.alert.default}; -`; - -export const CharacterCount = styled.div` - ${({ theme }) => theme.v4.typography.caption}; - color: ${({ theme }) => theme.v4.colors.base.shade1}; - text-align: right; - margin-top: 0.3rem; -`; - -export const HeaderContainer = styled.div` - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 1rem; -`; - -export const LabelContainer = styled.div` - display: flex; - justify-content: space-between; - align-items: center; -`; - -export const HeaderTitle = styled.div` - ${({ theme }) => theme.v4.typography.title}; -`; - -export const StyledSecondaryButton = styled(SecondaryButton)` - color: ${({ theme }) => theme.v4.colors.primary.default}; -`; - -export const RemoveIcon = styled(Trash2Icon)` - width: 1.5rem; - height: 1.5rem; - fill: ${({ theme }) => theme.v4.colors.alert.default}; -`; - -export const RemoveLinkButton = styled(SecondaryButton)` - ${({ theme }) => theme.v4.typography.body}; - display: flex; - justify-content: flex-start; - align-items: center; - gap: 0.5rem; - color: ${({ theme }) => theme.v4.colors.alert.default}; - border-radius: 0; -`; - -export const Divider = styled.div` - width: 100%; - height: 0.0625rem; - align-self: stretch; - background-color: ${({ theme }) => theme.v4.colors.base.shade4}; -`; diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.module.css b/src/v4/social/pages/DraftsPage/DraftsPage.module.css index fddc35208..97ea83386 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.module.css +++ b/src/v4/social/pages/DraftsPage/DraftsPage.module.css @@ -57,4 +57,15 @@ padding: var(--asc-spacing-m1); background-color: var(--asc-color-black); width: 100%; +} + +.hyperLinkContainer { + position: absolute; + background-color: transparent; + padding: 1rem; + display: flex; + justify-content: center; + bottom: 6rem; + left: 0; + right: 0; } \ No newline at end of file diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index fc55bd598..84499e35e 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -17,7 +17,6 @@ import { StoryVideoPreview } from './styles'; import { StoryRepository } from '@amityco/ts-sdk'; import { HyperLink } from '../../elements/HyperLink'; -import { HyperlinkFormContainer } from '../../components/HyperLinkConfig/styles'; import { HyperLinkConfig } from '../../components'; import { useNavigation } from '~/social/providers/NavigationProvider'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; @@ -228,7 +227,7 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor /> ) : null} {hyperLink[0]?.data?.url && ( - +
{hyperLink[0]?.data?.customText || hyperLink[0].data.url} - +
)} Date: Thu, 25 Apr 2024 21:19:40 +0700 Subject: [PATCH 45/88] feat: ASC-21665 - darkmode config (#279) * fix: type and optional field on config * fix: remove undefined checking * fix: use config from customization provider * feat: handle switch light/dark mode * feat: add configuration live chat page * feat: add config on livechat header * feat: add theme configuration message list * feat: add configuration theme on message composer * fix: modal styling * feat: add configuration for livechat notification * fix: copy message to use livechat notification * fix: pr review * fix: pr * fix: user preferred theme --- .storybook/decorators/UiKitV4Decorator.tsx | 3 +- amity-uikit.config.json | 37 ++++- .../AmityLiveChatHeader/styles.module.css | 15 +- .../AmityLiveChatMessageComposeBar/index.tsx | 1 + .../livechatMessageComposeBar.stories.tsx | 8 +- .../styles.module.css | 30 +++- .../styles.module.css | 3 +- .../HomeIndicator/styles.module.css | 2 +- .../MessageAction/index.tsx | 4 +- .../MessageAction/styles.module.css | 50 ++++-- .../MessageBubble/styles.module.css | 41 ++++- .../MessageBubbleContainer/styles.module.css | 5 +- .../MessageTextWithMention/index.tsx | 22 +-- .../MessageTextWithMention/styles.module.css | 12 +- .../LiveChatMessageContent/styles.module.css | 15 +- .../components/LiveChatNotification/index.tsx | 2 +- .../LiveChatNotification/styles.module.css | 10 +- .../ChatContainer/styles.module.css | 31 ++-- .../livechatPage.stories.tsx | 7 +- .../pages/AmityLiveChatPage/styles.module.css | 8 +- .../LiveChatNotificationProvider.module.css | 2 +- .../core/components/Button/Button.module.css | 108 ++++++------- src/v4/core/components/ConfirmModal/index.tsx | 2 +- .../components/ConfirmModal/styles.module.css | 7 +- .../core/components/HyperlinkText/index.tsx | 10 +- .../HyperlinkText/styles.module.css | 2 +- .../components/InputText/InsideInputText.tsx | 4 +- src/v4/core/components/InputText/index.tsx | 1 + .../components/InputText/styles.module.css | 4 +- src/v4/core/components/Modal/index.tsx | 2 +- .../core/components/Modal/styles.module.css | 9 +- src/v4/core/components/Notification/index.tsx | 2 +- .../SocialMentionItem/styles.module.css | 4 +- src/v4/core/hooks.ts | 6 +- .../core/providers/CustomizationProvider.tsx | 6 +- src/v4/core/providers/ThemeProvider.tsx | 145 ++++++++++++++---- src/v4/icons/CheckCircle.tsx | 16 +- src/v4/icons/ExclamationCircle.tsx | 6 +- src/v4/icons/Kebub.tsx | 16 +- .../StoryTab/StoryTabItem.module.css | 98 ++++++------ src/v4/styles/global.css | 2 +- 41 files changed, 461 insertions(+), 297 deletions(-) diff --git a/.storybook/decorators/UiKitV4Decorator.tsx b/.storybook/decorators/UiKitV4Decorator.tsx index 0e47d469e..afb8dde46 100644 --- a/.storybook/decorators/UiKitV4Decorator.tsx +++ b/.storybook/decorators/UiKitV4Decorator.tsx @@ -2,6 +2,7 @@ import React, { useCallback } from 'react'; import { AmityUIKitProvider } from '../../src/v4/core/providers'; import { Preview } from '@storybook/react'; import amityConfig from '../../amity-uikit.config.json'; +import { Config } from '../../src/v4/core/providers/CustomizationProvider'; const GLOBAL_NAME = 'user'; const global = { @@ -73,7 +74,7 @@ const decorator: NonNullable[number] = ( onConnectionStatusChange={handleConnectionStatusChange} onConnected={handleConnected} onDisconnected={handleDisconnected} - configs={amityConfig} + configs={amityConfig as Config} > diff --git a/amity-uikit.config.json b/amity-uikit.config.json index adc377baf..789219ae1 100644 --- a/amity-uikit.config.json +++ b/amity-uikit.config.json @@ -10,18 +10,20 @@ "base_shade3_color": "#a5a9b5", "base_shade4_color": "#ebecef", "alert_color": "#FA4D30", - "background_color": "#FFFFFF" + "background_color": "#FFFFFF", + "base_inverse_color": "#000000" }, "dark": { "primary_color": "#1054DE", - "secondary_color": "#292B32", + "secondary_color": "#ebecef", "base_color": "#ebecef", "base_shade1_color": "#a5a9b5", "base_shade2_color": "#6e7487", "base_shade3_color": "#40434e", "base_shade4_color": "#292b32", "alert_color": "#FA4D30", - "background_color": "#191919" + "background_color": "#191919", + "base_inverse_color": "#FFFFFF" } }, "excludes": [], @@ -165,7 +167,34 @@ "theme": {}, "close_icon": "close.png" }, - "live_chat/*/*": {}, + "live_chat/*/*": { + "theme": { + "light": { + "primary_color": "#1054DE", + "secondary_color": "#292B32", + "base_color": "#292b32", + "base_shade1_color": "#636878", + "base_shade2_color": "#898e9e", + "base_shade3_color": "#a5a9b5", + "base_shade4_color": "#ebecef", + "alert_color": "#FA4D30", + "background_color": "#FFFFFF", + "base_inverse_color": "#000000" + }, + "dark": { + "primary_color": "#1054DE", + "secondary_color": "#ebecef", + "base_color": "#ebecef", + "base_shade1_color": "#a5a9b5", + "base_shade2_color": "#6e7487", + "base_shade3_color": "#40434e", + "base_shade4_color": "#292b32", + "alert_color": "#FA4D30", + "background_color": "#191919", + "base_inverse_color": "#FFFFFF" + } + } + }, "live_chat/chat_header/*": {}, "live_chat/message_list/*": {}, "live_chat/message_composer/*": { diff --git a/src/v4/chat/components/AmityLiveChatHeader/styles.module.css b/src/v4/chat/components/AmityLiveChatHeader/styles.module.css index 09580e17d..d1d81ab14 100644 --- a/src/v4/chat/components/AmityLiveChatHeader/styles.module.css +++ b/src/v4/chat/components/AmityLiveChatHeader/styles.module.css @@ -7,11 +7,17 @@ } .displayName { - color: var(--asc-color-base-inverse); + color: var( + --live-chat-chat-header-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + ); } .memberCount { - color: var(--asc-color-base-default); + color: var( + --live-chat-chat-header-asc-color-base-default, + var(--live-chat-asc-color-base-default, var(--asc-color-base-default)) + ); display: flex; align-items: center; } @@ -20,5 +26,8 @@ width: 0.75rem; height: 0.75rem; margin-right: var(--asc-spacing-xxs2); - fill: var(--asc-color-base-default); + fill: var( + --live-chat-chat-header-asc-color-base-default, + var(--live-chat-asc-color-base-default, var(--asc-color-base-default)) + ); } diff --git a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx index 90877b8df..25314d9dc 100644 --- a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx @@ -142,6 +142,7 @@ export const AmityLiveChatMessageComposeBar = ({ }} value={markup} queryMentionees={queryMentionees} + mentionColor={styles.mentionText} />
diff --git a/src/v4/chat/components/AmityLiveChatMessageComposeBar/livechatMessageComposeBar.stories.tsx b/src/v4/chat/components/AmityLiveChatMessageComposeBar/livechatMessageComposeBar.stories.tsx index 29b22195b..693604f08 100644 --- a/src/v4/chat/components/AmityLiveChatMessageComposeBar/livechatMessageComposeBar.stories.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageComposeBar/livechatMessageComposeBar.stories.tsx @@ -19,13 +19,7 @@ const SampleLiveChatHeader = () => { return
No channels
; return (
- {}} - mentionsMessage={undefined} - clearMention={() => {}} - /> +
); }; diff --git a/src/v4/chat/components/AmityLiveChatMessageComposeBar/styles.module.css b/src/v4/chat/components/AmityLiveChatMessageComposeBar/styles.module.css index 2c3aef85f..d6f78cbef 100644 --- a/src/v4/chat/components/AmityLiveChatMessageComposeBar/styles.module.css +++ b/src/v4/chat/components/AmityLiveChatMessageComposeBar/styles.module.css @@ -2,7 +2,10 @@ border-radius: var(--asc-border-radius-xxl); width: 1rem; height: 1rem; - background-color: var(--asc-color-primary); + background-color: var( + --live-chat-message-composer-asc-color-primary-default, + var(--live-chat-asc-color-primary-default, var(--asc-color-primary-default)) + ); cursor: pointer; padding: var(--asc-spacing-xxs2); fill: white; @@ -34,7 +37,7 @@ gap: var(--asc-spacing-s2); padding: var(--asc-spacing-s1) var(--asc-spacing-s2); background-color: inherit; - border-top: 1px solid var(--asc-color-base-shade4); + box-shadow: 0px -1px 0px 0px var(--live-chat-message-composer-asc-color-base-shade4, var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4))); } .textInputContainer { @@ -44,8 +47,10 @@ & > div { width: 100%; border-radius: var(--asc-border-radius-xxl); - border: 1px solid var(--asc-color-base-background); - background: var(--asc-color-secondary-shade4); + background: var( + --live-chat-message-composer-asc-color-secondary-shade4, + var(--live-chat-asc-color-secondary-shade4, var(--asc-color-secondary-shade4)) + ); textarea { padding: 0.563rem 1rem; @@ -60,8 +65,14 @@ padding: var(--asc-spacing-s1) var(--asc-spacing-s2); border-radius: var(--asc-border-radius-sm); border: var(--asc-border-radius-none); - background-color: var(--asc-color-secondary-default); - color: var(--asc-color-base-inverse); + background-color: var( + --live-chat-message-composer-asc-color-secondary, + var(--live-chat-asc-color-secondary, var(--asc-color-secondary-default)) + ); + color: var( + --live-chat-message-composer-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + ); display: flex; align-items: center; @@ -70,3 +81,10 @@ font-weight: var(--asc-text-font-weight-light); } } + +.mentionText { + color: var( + --live-chat-message-composer-asc-color-primary-default, + var(--live-chat-asc-color-primary-default, var(--asc-color-primary-default)) + ) !important; +} diff --git a/src/v4/chat/components/AmityLiveChatMessageList/styles.module.css b/src/v4/chat/components/AmityLiveChatMessageList/styles.module.css index bda68abe2..0a394e098 100644 --- a/src/v4/chat/components/AmityLiveChatMessageList/styles.module.css +++ b/src/v4/chat/components/AmityLiveChatMessageList/styles.module.css @@ -29,7 +29,8 @@ width: 100%; height: 100%; align-items: center; - color: var(--asc-color-secondary-shade2); + color: var(--live-chat-message-list-asc-color-secondary-shade2), + var(--live-chat-asc-color-secondary-shade2, var(--asc-color-secondary-shade2)); font-weight: var(--asc-text-font-weight-light); font-size: var(--asc-text-font-size-md); } diff --git a/src/v4/chat/components/HomeIndicator/styles.module.css b/src/v4/chat/components/HomeIndicator/styles.module.css index c8fc4e832..7cc527f79 100644 --- a/src/v4/chat/components/HomeIndicator/styles.module.css +++ b/src/v4/chat/components/HomeIndicator/styles.module.css @@ -8,5 +8,5 @@ width: 8.375rem; height: 0.3125rem; border-radius: var(--asc-border-radius-full); - background-color: var(--asc-color-base-shade1); + background-color: var(--live-chat-asc-color-base-shade1, var(--asc-color-base-shade1)); } diff --git a/src/v4/chat/components/LiveChatMessageContent/MessageAction/index.tsx b/src/v4/chat/components/LiveChatMessageContent/MessageAction/index.tsx index b51e184c1..5f96e94b0 100644 --- a/src/v4/chat/components/LiveChatMessageContent/MessageAction/index.tsx +++ b/src/v4/chat/components/LiveChatMessageContent/MessageAction/index.tsx @@ -137,13 +137,13 @@ const MessageAction = ({ } >
{ setIsPopoverOpen(!isPopoverOpen); }} > - +
{/* */} diff --git a/src/v4/chat/components/LiveChatMessageContent/MessageAction/styles.module.css b/src/v4/chat/components/LiveChatMessageContent/MessageAction/styles.module.css index 544605d7e..2a2559ccf 100644 --- a/src/v4/chat/components/LiveChatMessageContent/MessageAction/styles.module.css +++ b/src/v4/chat/components/LiveChatMessageContent/MessageAction/styles.module.css @@ -1,14 +1,24 @@ -.optionIcon { - width: auto; - height: 1.25rem; - +.optionButton { + display: flex; :hover { cursor: pointer; - background-color: var(--asc-color-secondary-shade4); + background-color: var( + --live-chat-message-list-asc-color-secondary-shade4, + var(--live-chat-asc-color-secondary-shade4, var(--asc-color-secondary-shade4)) + ); border-radius: var(--asc-border-radius-sm); } } +.optionIcon { + fill: var( + --live-chat-message-list-asc-color-secondary-shade2, + var(--live-chat-asc-color-secondary-shade2, var(--asc-color-secondary-shade2)) + ); + width: auto; + height: 1.25rem; +} + .reactionIcon { width: 1.25rem; height: 1.25rem; @@ -16,7 +26,10 @@ .timestamp { font-family: var(--asc-text-global-font-family); - color: var(--asc-color-base-shade2); + color: var( + --live-chat-message-list-asc-color-base-shade2, + var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2)) + ); font-size: 0.5rem; line-height: 0.75rem; margin-bottom: var(--asc-spacing-s1); @@ -30,25 +43,40 @@ } .messageActionButtonText { - color: var(--asc-color-base-inverse); + color: var( + --live-chat-message-list-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + ); } .messageDangerActionButtonText { - color: var(--asc-color-alert); + color: var( + --live-chat-message-list-asc-color-alert, + var(--live-chat-asc-color-alert, var(--asc-color-alert)) + ); } .copyIcon { - fill: var(--asc-color-base-inverse); + fill: var( + --live-chat-message-list-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + ); } .replyIcon { - fill: var(--asc-color-base-inverse); + fill: var( + --live-chat-message-list-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + ); } .binIcon { width: 1.25rem; height: 1.25rem; - fill: var(--asc-color-alert); + fill: var( + --live-chat-message-list-asc-color-alert, + var(--live-chat-asc-color-alert, var(--asc-color-alert)) + ); } .mentionIcon { diff --git a/src/v4/chat/components/LiveChatMessageContent/MessageBubble/styles.module.css b/src/v4/chat/components/LiveChatMessageContent/MessageBubble/styles.module.css index a90cce7ad..99e0ceae5 100644 --- a/src/v4/chat/components/LiveChatMessageContent/MessageBubble/styles.module.css +++ b/src/v4/chat/components/LiveChatMessageContent/MessageBubble/styles.module.css @@ -2,8 +2,14 @@ padding: var(--asc-spacing-s1) 0.625rem; border-radius: var(--asc-border-radius-lg); border-top-left-radius: var(--asc-border-radius-none); - color: var(--asc-color-base-inverse); - background-color: var(--asc-color-base-shade4); + color: var( + --live-chat-message-list-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + ); + background-color: var( + --live-chat-message-list-asc-color-base-shade4, + var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4)) + ); max-width: 7.5rem; word-break: break-word; overflow-wrap: break-word; @@ -12,7 +18,11 @@ } .messageBubble[data-mentioned='true'] { - border: 1px solid var(--asc-color-primary-dark, var(--asc-color-primary)); + border: 1px solid + var( + --live-chat-message-list-asc-color-primary-default, + var(--live-chat-asc-color-primary-default, var(--asc-color-primary-default)) + ); } .messageRepliedBubble { @@ -22,15 +32,24 @@ .messageParentContainer { padding: var(--asc-spacing-s2); border-radius: var(--asc-border-radius-lg) var(--asc-border-radius-lg) 0 0; - background-color: var(--asc-color-base-shade3); + background-color: var( + --live-chat-message-list-asc-color-base-shade3, + var(--live-chat-asc-color-base-shade3, var(--asc-color-base-shade3)) + ); } .messageParentDisplayName { - color: var(--asc-color-base-inverse); + color: var( + --live-chat-message-list-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + ); } .messageParentText { - color: var(--asc-color-base-default); + color: var( + --live-chat-message-list-asc-color-base-default, + var(--live-chat-asc-color-base-default, var(--asc-color-base-default)) + ); text-overflow: ellipsis; overflow: hidden; @@ -39,8 +58,14 @@ .messageChildContainer { border-radius: 0 0 var(--asc-border-radius-lg) var(--asc-border-radius-lg); - background-color: var(--asc-color-base-shade4); - color: var(--asc-color-base-inverse); + background-color: var( + --live-chat-message-list-asc-color-base-shade4, + var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4)) + ); + color: var( + --live-chat-message-list-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + ); padding: var(--asc-spacing-s1) var(--asc-spacing-s2); } diff --git a/src/v4/chat/components/LiveChatMessageContent/MessageBubbleContainer/styles.module.css b/src/v4/chat/components/LiveChatMessageContent/MessageBubbleContainer/styles.module.css index 1300170cc..240434c91 100644 --- a/src/v4/chat/components/LiveChatMessageContent/MessageBubbleContainer/styles.module.css +++ b/src/v4/chat/components/LiveChatMessageContent/MessageBubbleContainer/styles.module.css @@ -8,7 +8,10 @@ display: flex; gap: var(--asc-spacing-xxs2); align-items: center; - color: var(--asc-color-secondary-shade1); + color: var( + --live-chat-message-list-asc-color-secondary-shade1, + var(--live-chat-asc-color-secondary-shade1, var(--asc-color-secondary-shade1)) + ); margin-bottom: var(--asc-spacing-xxs2); } diff --git a/src/v4/chat/components/LiveChatMessageContent/MessageTextWithMention/index.tsx b/src/v4/chat/components/LiveChatMessageContent/MessageTextWithMention/index.tsx index 1a4851463..4cd103569 100644 --- a/src/v4/chat/components/LiveChatMessageContent/MessageTextWithMention/index.tsx +++ b/src/v4/chat/components/LiveChatMessageContent/MessageTextWithMention/index.tsx @@ -1,7 +1,6 @@ import React from 'react'; import styles from './styles.module.css'; import { Typography } from '~/v4/core/components'; -import { useCustomization } from '~/v4/core/providers/CustomizationProvider'; import HyperLinkText from '~/v4/core/components/HyperlinkText/index'; interface MessageTextWithMentionProps { @@ -10,12 +9,6 @@ interface MessageTextWithMentionProps { } const MessageTextWithMention = ({ message, className }: MessageTextWithMentionProps) => { - const { getConfig } = useCustomization(); - - // TODO: uncomment this when full configuration on the component is supported - // const pageConfig = getConfig('live_chat/*/*'); - // const componentConfig = getConfig('live_chat/message_list/*'); - const mentionList = message.metadata?.mentioned as { index: number; userId: string; @@ -53,21 +46,12 @@ const MessageTextWithMention = ({ message, className }: MessageTextWithMentionPr {segments.map((segment, index) => segment.isMention ? ( - + {segment.text} ) : ( - {segment.text} + {segment.text} ), )} @@ -77,7 +61,7 @@ const MessageTextWithMention = ({ message, className }: MessageTextWithMentionPr return ( - {message.data?.text} + {message.data?.text} ); }; diff --git a/src/v4/chat/components/LiveChatMessageContent/MessageTextWithMention/styles.module.css b/src/v4/chat/components/LiveChatMessageContent/MessageTextWithMention/styles.module.css index cb4c68018..b49054e75 100644 --- a/src/v4/chat/components/LiveChatMessageContent/MessageTextWithMention/styles.module.css +++ b/src/v4/chat/components/LiveChatMessageContent/MessageTextWithMention/styles.module.css @@ -1,3 +1,13 @@ .mentionText { - color: var(--asc-color-primary-dark, var(--asc-color-primary)); + color: var( + --live-chat-message-list-asc-color-primary-default, + var(--live-chat-asc-color-primary-default, var(--asc-color-primary-default)) + ); +} + +.hyperlink { + color: var( + --live-chat-message-list-asc-color-primary-default, + var(--live-chat-asc-color-primary-default, var(--asc-color-primary-default)) + ); } diff --git a/src/v4/chat/components/LiveChatMessageContent/styles.module.css b/src/v4/chat/components/LiveChatMessageContent/styles.module.css index bf4fe0237..26529261c 100644 --- a/src/v4/chat/components/LiveChatMessageContent/styles.module.css +++ b/src/v4/chat/components/LiveChatMessageContent/styles.module.css @@ -18,7 +18,10 @@ background-color: var(--asc-color-base-shade4); gap: var(--asc-spacing-xxs2); border-radius: var(--asc-border-radius-lg); - color: var(--asc-color-base-inverse); + color: var( + --live-chat-message-list-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + ); } .messageOptionsWrap { @@ -30,7 +33,10 @@ .binIcon { height: 1rem; width: 1rem; - fill: var(--asc-color-base-inverse); + fill: var( + --live-chat-message-list-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + ); } .optionIcon { @@ -49,7 +55,10 @@ .timestamp { font-family: var(--asc-text-global-font-family); - color: var(--asc-color-base-shade2); + color: var( + --live-chat-message-list-asc-color-base-shade2, + var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2)) + ); margin-bottom: var(--asc-spacing-s1); /* This value is not available in global css */ diff --git a/src/v4/chat/components/LiveChatNotification/index.tsx b/src/v4/chat/components/LiveChatNotification/index.tsx index 7fdb99d57..5b33fde89 100644 --- a/src/v4/chat/components/LiveChatNotification/index.tsx +++ b/src/v4/chat/components/LiveChatNotification/index.tsx @@ -11,7 +11,7 @@ interface NotificationProps { } const LiveChatNotification = ({ className, content, icon }: NotificationProps) => ( -
+
{icon} {content}
diff --git a/src/v4/chat/components/LiveChatNotification/styles.module.css b/src/v4/chat/components/LiveChatNotification/styles.module.css index beea9f782..f0e3857b5 100644 --- a/src/v4/chat/components/LiveChatNotification/styles.module.css +++ b/src/v4/chat/components/LiveChatNotification/styles.module.css @@ -1,10 +1,4 @@ /* styles.module.css */ -.icon { - width: 1.5rem; - height: 1.5rem; - fill: var(--asc-color-base-inverse); - margin-right: var(--asc-spacing-s2); -} .notifications { position: relative; @@ -21,13 +15,13 @@ padding: 1.125rem var(--asc-spacing-m1); display: flex; align-items: center; - color: var(--asc-color-base-inverse); + color: var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)); border-radius: var(--asc-border-radius-md); animation-duration: 0.3s; animation-name: appear; animation-fill-mode: forwards; pointer-events: auto; - background-color: var(--asc-color-base-shade4); + background-color: var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4)); } @keyframes appear { diff --git a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/styles.module.css b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/styles.module.css index 44b37ffe8..7644a5b91 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/styles.module.css +++ b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/styles.module.css @@ -10,7 +10,7 @@ gap: var(--asc-spacing-s2); padding: var(--asc-spacing-s1) var(--asc-spacing-s2); background-color: inherit; - border-top: 1px solid var(--asc-color-base-shade2); + border-top: 1px solid var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2)); } .textInputContainer { @@ -20,8 +20,8 @@ & > div { width: 100%; border-radius: var(--asc-border-radius-xxl); - border: 1px solid var(--asc-color-base-background); - background: var(--asc-color-secondary-shade4); + border: 1px solid var(--live-chat-asc-color-base-background, var(--asc-color-base-background)); + background: var(--live-chat-asc-color-secondary-shade4, var(--asc-color-secondary-shade4)); textarea { padding: 0.563rem 1rem; @@ -36,8 +36,11 @@ padding: var(--asc-spacing-s1) var(--asc-spacing-s2); border-radius: var(--asc-border-radius-sm); border: var(--asc-border-radius-none); - background-color: var(--asc-color-secondary-default); - color: var(--asc-color-base-inverse); + background-color: var( + --live-chat-asc-color-secondary-default, + var(--asc-color-secondary-default) + ); + color: var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)); display: flex; align-items: center; @@ -50,8 +53,8 @@ .replyPlaceholderContainer { display: flex; font-family: var(--asc-text-global-font-family); - background-color: var(--asc-color-base-shade4); - color: var(--asc-color-white); + background-color: var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4)); + color: var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)); max-width: 100%; padding: var(--asc-spacing-s2); padding-left: var(--asc-spacing-m1); @@ -66,7 +69,7 @@ .replyProfile { display: flex; flex-direction: column; - color: var(--asc-color-white); + color: var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)); font-size: var(--asc-text-font-size-sm); line-height: var(--asc-line-height-sm); flex: 1; @@ -103,8 +106,8 @@ .mutedChannelContainer { display: flex; font-family: var(--asc-text-global-font-family); - background-color: var(--asc-color-base-shade4); - color: var(--asc-color-base-shade1); + background-color: var(--live-chat-asc-color-base-shade4, var(--asc-color-base-shade4)); + color: var(--live-chat-asc-color-base-shade1, var(--asc-color-base-shade1)); max-width: 100%; padding: var(--asc-spacing-s2); padding-left: var(--asc-spacing-m1); @@ -112,12 +115,12 @@ align-items: center; } -.mutedIcon { - color: var(--asc-color-base-shade1); +.mutedChannelIcon { + color: var(--live-chat-asc-color-base-shade3, var(--asc-color-base-shade3)); } .commentAltIcon { - color: var(--asc-color-base-shade2); + color: var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2)); } .banStatePanel { @@ -129,5 +132,5 @@ text-align: center; gap: var(--asc-spacing-s2); padding: var(--asc-spacing-m1); - color: var(--asc-color-base-shade2); + color: var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2)); } diff --git a/src/v4/chat/pages/AmityLiveChatPage/livechatPage.stories.tsx b/src/v4/chat/pages/AmityLiveChatPage/livechatPage.stories.tsx index bf2e2ca43..7c63683bf 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/livechatPage.stories.tsx +++ b/src/v4/chat/pages/AmityLiveChatPage/livechatPage.stories.tsx @@ -63,12 +63,7 @@ const LiveChatList = () => { ) : null} - setOpen(false)} - className={styles.messageListSheet} - data-theme="dark" - > + setOpen(false)} className={styles.messageListSheet}> diff --git a/src/v4/chat/pages/AmityLiveChatPage/styles.module.css b/src/v4/chat/pages/AmityLiveChatPage/styles.module.css index 4679b53b0..451ec7536 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/styles.module.css +++ b/src/v4/chat/pages/AmityLiveChatPage/styles.module.css @@ -15,16 +15,10 @@ box-shadow: var(--asc-box-shadow-01); } -.chatIcon { - width: 2rem; - height: 2rem; - fill: var(--asc-color-white); -} - .amtiyLivechatPage { display: flex; flex-direction: column; - background-color: var(--asc-color-base-background); + background-color: var(--live-chat-asc-color-base-background, var(--asc-color-base-background)); height: 100%; overflow-y: hidden; } diff --git a/src/v4/chat/providers/LiveChatNotificationProvider.module.css b/src/v4/chat/providers/LiveChatNotificationProvider.module.css index f46b11921..4eea2808d 100644 --- a/src/v4/chat/providers/LiveChatNotificationProvider.module.css +++ b/src/v4/chat/providers/LiveChatNotificationProvider.module.css @@ -1,6 +1,6 @@ .icon { width: 1.5rem; height: 1.5rem; - fill: var(--asc-color-base-inverse); + fill: var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)); margin-right: var(--asc-spacing-s2); } diff --git a/src/v4/core/components/Button/Button.module.css b/src/v4/core/components/Button/Button.module.css index bb32938c6..adb2c9e8b 100644 --- a/src/v4/core/components/Button/Button.module.css +++ b/src/v4/core/components/Button/Button.module.css @@ -1,55 +1,55 @@ .button { - display: inline-flex; - align-items: center; - justify-content: center; - padding: var(--asc-spacing-s1) var(--asc-spacing-m1); - font-size: var(--asc-text-font-size-md); - font-weight: var(--asc-text-font-weight-bold); - border-radius: var(--asc-border-radius-sm); - cursor: pointer; - transition: background-color 0.3s ease; - } - - .disabled { - opacity: 0.6; - cursor: not-allowed; - } - - .primary { - background-color: var(--asc-color-primary); - color: var(--asc-color-white); - border: none; - } - - .primary:hover:not(.disabled) { - background-color: var(--asc-color-primary-50); - } - - .secondary { - background-color: var(--asc-color-white); - color: var(--asc-color-primary); - border: 1px solid var(--asc-color-primary); - } - - .secondary:hover:not(.disabled) { - background-color: var(--asc-color-base-shade4); - } - - .small { - font-size: var(--asc-text-font-size-sm); - padding: var(--asc-spacing-xxs2) var(--asc-spacing-s1); - } - - .medium { - font-size: var(--asc-text-font-size-md); - padding: var(--asc-spacing-s1) var(--asc-spacing-m1); - } - - .large { - font-size: var(--asc-text-font-size-xl); - padding: var(--asc-spacing-s2) var(--asc-spacing-m2); - } - - .icon { - margin-right: var(--asc-spacing-s1); - } \ No newline at end of file + display: inline-flex; + align-items: center; + justify-content: center; + padding: var(--asc-spacing-s1) var(--asc-spacing-m1); + font-size: var(--asc-text-font-size-md); + font-weight: var(--asc-text-font-weight-bold); + border-radius: var(--asc-border-radius-sm); + cursor: pointer; + transition: background-color 0.3s ease; +} + +.disabled { + opacity: 0.6; + cursor: not-allowed; +} + +.primary { + background-color: var(--asc-color-primary-default); + color: var(--asc-color-white); + border: none; +} + +.primary:hover:not(.disabled) { + background-color: var(--asc-color-primary-50); +} + +.secondary { + background-color: var(--asc-color-white); + color: var(--asc-color-primary-default); + border: 1px solid var(--asc-color-primary-default); +} + +.secondary:hover:not(.disabled) { + background-color: var(--asc-color-base-shade4); +} + +.small { + font-size: var(--asc-text-font-size-sm); + padding: var(--asc-spacing-xxs2) var(--asc-spacing-s1); +} + +.medium { + font-size: var(--asc-text-font-size-md); + padding: var(--asc-spacing-s1) var(--asc-spacing-m1); +} + +.large { + font-size: var(--asc-text-font-size-xl); + padding: var(--asc-spacing-s2) var(--asc-spacing-m2); +} + +.icon { + margin-right: var(--asc-spacing-s1); +} diff --git a/src/v4/core/components/ConfirmModal/index.tsx b/src/v4/core/components/ConfirmModal/index.tsx index 7bb1f5804..077f257af 100644 --- a/src/v4/core/components/ConfirmModal/index.tsx +++ b/src/v4/core/components/ConfirmModal/index.tsx @@ -42,7 +42,7 @@ const Confirm = ({ } onCancel={onCancel} > -
{content}
+ {content} ); diff --git a/src/v4/core/components/ConfirmModal/styles.module.css b/src/v4/core/components/ConfirmModal/styles.module.css index 901d3eeef..75d341c64 100644 --- a/src/v4/core/components/ConfirmModal/styles.module.css +++ b/src/v4/core/components/ConfirmModal/styles.module.css @@ -2,24 +2,19 @@ max-width: 22.5rem !important; } -.confirmModalContent { - padding: var(--asc-spacing-m1) var(--asc-spacing-m1) var(--asc-spacing-s2) var(--asc-spacing-m1); -} - .footer { display: flex; justify-content: flex-end; } .okButton { - color: var(--asc-color-secondary-default); background: var(--asc-color-alert) !important; border: none; } .cancelButton { margin-right: var(--asc-spacing-s1); - background-color: var(--asc-color-base-background) !important; + background: transparent !important; color: var(--asc-color-secondary-default); border: 1px solid var(--asc-color-secondary-default) !important; } diff --git a/src/v4/core/components/HyperlinkText/index.tsx b/src/v4/core/components/HyperlinkText/index.tsx index 20400c55e..aacf9d147 100644 --- a/src/v4/core/components/HyperlinkText/index.tsx +++ b/src/v4/core/components/HyperlinkText/index.tsx @@ -3,14 +3,20 @@ import styles from './styles.module.css'; import Linkify from 'linkify-react'; -const HyperLinkText = ({ children }: { children: ReactNode }) => { +const HyperLinkText = ({ + linkClassName, + children, +}: { + linkClassName?: string; + children: ReactNode; +}) => { return ( { return ( - + {content} ); diff --git a/src/v4/core/components/HyperlinkText/styles.module.css b/src/v4/core/components/HyperlinkText/styles.module.css index bc591e562..899aac484 100644 --- a/src/v4/core/components/HyperlinkText/styles.module.css +++ b/src/v4/core/components/HyperlinkText/styles.module.css @@ -1,3 +1,3 @@ .hyperlink { - color: var(--asc-color-primary-dark, var(--asc-color-primary)); + color: var(--asc-color-primary-dark, var(--asc-color-primary-default)); } diff --git a/src/v4/core/components/InputText/InsideInputText.tsx b/src/v4/core/components/InputText/InsideInputText.tsx index d0fdddbe9..02a42574b 100644 --- a/src/v4/core/components/InputText/InsideInputText.tsx +++ b/src/v4/core/components/InputText/InsideInputText.tsx @@ -49,6 +49,7 @@ interface InsideInputTextProps { onClear?: () => void; onClick?: () => void; suggestionRef?: RefObject; + mentionColor?: string; } const InsideInputText = forwardRef( @@ -76,6 +77,7 @@ const InsideInputText = forwardRef { @@ -147,7 +149,7 @@ const InsideInputText = forwardRef { if (!queryMentionees) return callback([]); queryMentionees(queryValue).then((result) => { diff --git a/src/v4/core/components/InputText/index.tsx b/src/v4/core/components/InputText/index.tsx index 48058b622..b1786c1d5 100644 --- a/src/v4/core/components/InputText/index.tsx +++ b/src/v4/core/components/InputText/index.tsx @@ -36,6 +36,7 @@ export interface InputTextProps { onClear?: () => void; onClick?: () => void; suggestionRef?: React.RefObject; + mentionColor?: string; } const InputText = forwardRef( diff --git a/src/v4/core/components/InputText/styles.module.css b/src/v4/core/components/InputText/styles.module.css index e9e7109d2..5814ee3f7 100644 --- a/src/v4/core/components/InputText/styles.module.css +++ b/src/v4/core/components/InputText/styles.module.css @@ -82,7 +82,7 @@ outline: none; font: inherit; resize: vertical; - color: var(--asc-color-white); + color: var(--asc-color-base-inverse); &::placeholder { font-weight: 400; @@ -113,7 +113,7 @@ .mentions_mention { position: relative; z-index: 1; - color: var(--asc-color-primary-dark, var(--asc-color-primary)); + color: var(--asc-color-primary-dark, var(--asc-color-primary-default)); pointer-events: none; background-color: var(--asc-color-base-shade4); } diff --git a/src/v4/core/components/Modal/index.tsx b/src/v4/core/components/Modal/index.tsx index 5b9db4beb..4fc246cbf 100644 --- a/src/v4/core/components/Modal/index.tsx +++ b/src/v4/core/components/Modal/index.tsx @@ -31,7 +31,7 @@ const Modal = ({ }, [modalRef?.current]); return ( -
+
( -
+
{icon} {content}
); diff --git a/src/v4/core/components/SocialMentionItem/styles.module.css b/src/v4/core/components/SocialMentionItem/styles.module.css index 1c78bda54..2bd4cfc65 100644 --- a/src/v4/core/components/SocialMentionItem/styles.module.css +++ b/src/v4/core/components/SocialMentionItem/styles.module.css @@ -20,7 +20,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; - color: var(--asc-color-white); + color: var(--asc-color-base-inverse); } .mentionAllDescription { @@ -35,4 +35,4 @@ display: flex; align-items: center; } -} \ No newline at end of file +} diff --git a/src/v4/core/hooks.ts b/src/v4/core/hooks.ts index 7f62da8d1..6bbe3eca2 100644 --- a/src/v4/core/hooks.ts +++ b/src/v4/core/hooks.ts @@ -1,13 +1,13 @@ import { useIntl } from 'react-intl'; -import { useNotifications } from '~/v4/core/providers/NotificationProvider'; +import { useLiveChatNotifications } from '~/v4/chat/providers/LiveChatNotificationProvider'; export const useCopyMessage = () => { - const notification = useNotifications(); + const notification = useLiveChatNotifications(); const { formatMessage } = useIntl(); const copyMessage = async (message: string) => { await navigator.clipboard.writeText(message); - notification.show({ + notification.success({ content: formatMessage({ id: 'livechat.notification.copy.message' }), }); }; diff --git a/src/v4/core/providers/CustomizationProvider.tsx b/src/v4/core/providers/CustomizationProvider.tsx index c356aaa1c..52a385c4e 100644 --- a/src/v4/core/providers/CustomizationProvider.tsx +++ b/src/v4/core/providers/CustomizationProvider.tsx @@ -7,7 +7,7 @@ interface CustomizationContextValue { getConfig: (path: string) => Record; } -type Theme = { +export type Theme = { light: { primary_color: string; secondary_color: string; @@ -18,6 +18,7 @@ type Theme = { base_shade4_color: string; alert_color: string; background_color: string; + base_inverse_color: string; }; dark: { primary_color: string; @@ -29,6 +30,7 @@ type Theme = { base_shade4_color: string; alert_color: string; background_color: string; + base_inverse_color: string; }; }; @@ -269,6 +271,7 @@ export const defaultConfig: Config = { base_shade4_color: '#ebecef', alert_color: '#FA4D30', background_color: '#FFFFFF', + base_inverse_color: '#000000', }, dark: { primary_color: '#1054DE', @@ -280,6 +283,7 @@ export const defaultConfig: Config = { base_shade4_color: '#292b32', alert_color: '#FA4D30', background_color: '#191919', + base_inverse_color: '#FFFFFF', }, }, excludes: [], diff --git a/src/v4/core/providers/ThemeProvider.tsx b/src/v4/core/providers/ThemeProvider.tsx index ccf95d2f9..6e6a7489d 100644 --- a/src/v4/core/providers/ThemeProvider.tsx +++ b/src/v4/core/providers/ThemeProvider.tsx @@ -1,6 +1,6 @@ import React, { createContext, useEffect, useState } from 'react'; import { lighten, parseToHsl, darken, hslToColorString } from 'polished'; -import { defaultConfig, useCustomization } from './CustomizationProvider'; +import { useCustomization, Config, Theme } from './CustomizationProvider'; const SHADE_PERCENTAGES = [0.25, 0.4, 0.5, 0.75]; @@ -23,6 +23,94 @@ const generateShades = (hexColor: string, isDarkMode = false): string[] => { return shades; }; +const generatePalleteByConfig = ({ + themeConfig, + configId, + isDarkMode, +}: { + themeConfig: Theme['light'] | Theme['dark']; + configId?: string; + isDarkMode?: boolean; +}) => { + const primaryColorShades = generateShades(themeConfig.primary_color, isDarkMode); + const secondaryColorShades = generateShades(themeConfig.secondary_color, isDarkMode); + + const prefix = configId ? configId + '-' : ''; + + setCSSVariable(`--${prefix}asc-color-primary-default`, themeConfig.primary_color); + setCSSVariable(`--${prefix}asc-color-primary-shade1`, primaryColorShades[0]); + setCSSVariable(`--${prefix}asc-color-primary-shade2`, primaryColorShades[1]); + setCSSVariable(`--${prefix}asc-color-primary-shade3`, primaryColorShades[2]); + setCSSVariable(`--${prefix}asc-color-primary-shade4`, primaryColorShades[3]); + + setCSSVariable(`--${prefix}asc-color-secondary-default`, themeConfig.secondary_color); + setCSSVariable(`--${prefix}asc-color-secondary-shade1`, secondaryColorShades[0]); + setCSSVariable(`--${prefix}asc-color-secondary-shade2`, secondaryColorShades[1]); + setCSSVariable(`--${prefix}asc-color-secondary-shade3`, secondaryColorShades[2]); + setCSSVariable(`--${prefix}asc-color-secondary-shade4`, secondaryColorShades[3]); + + setCSSVariable(`--${prefix}asc-color-base-default`, themeConfig.base_color); + setCSSVariable(`--${prefix}asc-color-base-shade1`, themeConfig.base_shade1_color); + setCSSVariable(`--${prefix}asc-color-base-shade2`, themeConfig.base_shade2_color); + setCSSVariable(`--${prefix}asc-color-base-shade3`, themeConfig.base_shade3_color); + setCSSVariable(`--${prefix}asc-color-base-shade4`, themeConfig.base_shade4_color); + + setCSSVariable(`--${prefix}asc-color-alert`, themeConfig.alert_color); + setCSSVariable(`--${prefix}asc-color-base-background`, themeConfig.background_color); + setCSSVariable(`--${prefix}asc-color-base-inverse`, themeConfig.base_inverse_color); +}; + +const generateComponentPalette = (config: Config, currentTheme: 'light' | 'dark') => { + const configurables = [ + { + pageId: 'live_chat', + componentIds: ['chat_header', 'message_list', 'message_composer'], + }, + ]; + + configurables.forEach((configurable) => { + const pageConfig = (config.customizations as { [key: string]: { theme: Theme } })?.[ + `${configurable.pageId}/*/*` + ]?.theme; + + if (pageConfig) { + const themeToGenerate = currentTheme === 'light' ? pageConfig.light : pageConfig.dark; + const configId = configurable.pageId.replace('_', '-'); + + if (themeToGenerate) { + generatePalleteByConfig({ + themeConfig: themeToGenerate, + configId, + isDarkMode: currentTheme === 'dark', + }); + } + } + + if (configurable.componentIds.length === 0) return; + + configurable.componentIds.forEach((componentId) => { + const componentConfig = (config.customizations as { [key: string]: { theme: Theme } })?.[ + `${configurable.pageId}/${componentId}/*` + ].theme; + if (componentConfig) { + const themeToGenerate = + currentTheme === 'light' ? componentConfig.light : componentConfig.dark; + + const configId = + configurable.pageId.replace('_', '-') + '-' + componentId.replace('_', '-'); + + if (themeToGenerate) { + generatePalleteByConfig({ + themeConfig: themeToGenerate, + configId, + isDarkMode: currentTheme === 'dark', + }); + } + } + }); + }); +}; + export const ThemeContext = createContext<{ currentTheme: 'light' | 'dark'; toggleTheme: () => void; @@ -32,52 +120,43 @@ export const ThemeContext = createContext<{ }); export const ThemeProvider: React.FC = ({ children }) => { - const config = useCustomization().config || defaultConfig; - - const [currentTheme, setCurrentTheme] = useState<'light' | 'dark'>('light'); + const { config } = useCustomization(); + const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); + + const [currentTheme, setCurrentTheme] = useState<'light' | 'dark'>( + config?.preferred_theme && config?.preferred_theme !== 'default' + ? config.preferred_theme + : mediaQuery.matches + ? 'dark' + : 'light', + ); useEffect(() => { - if (config.theme?.light) { - const primaryColorShades = generateShades(config.theme.light.primary_color); - const secondaryColorShades = generateShades(config.theme.light.secondary_color); - - setCSSVariable('--asc-color-primary-default', config.theme.light.primary_color); - setCSSVariable('--asc-color-primary-shade1', primaryColorShades[0]); - setCSSVariable('--asc-color-primary-shade2', primaryColorShades[1]); - setCSSVariable('--asc-color-primary-shade3', primaryColorShades[2]); - setCSSVariable('--asc-color-primary-shade4', primaryColorShades[3]); - - setCSSVariable('--asc-color-secondary-default', config.theme.light.secondary_color); - setCSSVariable('--asc-color-secondary-shade1', secondaryColorShades[0]); - setCSSVariable('--asc-color-secondary-shade2', secondaryColorShades[1]); - setCSSVariable('--asc-color-secondary-shade3', secondaryColorShades[2]); - setCSSVariable('--asc-color-secondary-shade4', secondaryColorShades[3]); - - setCSSVariable('--asc-color-base-default', config.theme.light.base_color); - setCSSVariable('--asc-color-base-shade1', config.theme.light.base_shade1_color); - setCSSVariable('--asc-color-base-shade2', config.theme.light.base_shade2_color); - setCSSVariable('--asc-color-base-shade3', config.theme.light.base_shade3_color); - setCSSVariable('--asc-color-base-shade4', config.theme.light.base_shade4_color); - - setCSSVariable('--asc-color-alert', config.theme.light.alert_color); - setCSSVariable('--asc-color-background', config.theme.light.background_color); + if (!config) return; + const themeToGenerate = currentTheme === 'light' ? config.theme?.light : config.theme?.dark; + + if (themeToGenerate) { + generatePalleteByConfig({ + themeConfig: themeToGenerate, + isDarkMode: currentTheme === 'dark', + }); } - if (config.theme?.dark) { - setCSSVariable('--asc-color-primary-dark', config.theme.dark.primary_color); - } + generateComponentPalette(config, currentTheme); }, [currentTheme, config]); useEffect(() => { + if (!config) return; + if (config.preferred_theme === 'default') { - const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'); const handleChange = (e: MediaQueryListEvent) => { setCurrentTheme(e.matches ? 'dark' : 'light'); }; + mediaQuery.addEventListener('change', handleChange); return () => mediaQuery.removeEventListener('change', handleChange); } - }, [config.preferred_theme]); + }, [config?.preferred_theme]); const toggleTheme = () => { setCurrentTheme((prevTheme) => (prevTheme === 'light' ? 'dark' : 'light')); diff --git a/src/v4/icons/CheckCircle.tsx b/src/v4/icons/CheckCircle.tsx index 4baef5430..c9843dde7 100644 --- a/src/v4/icons/CheckCircle.tsx +++ b/src/v4/icons/CheckCircle.tsx @@ -1,18 +1,8 @@ import React from 'react'; -const CheckCircle = ({ fill = '#FFFFFF', ...rest }: React.SVGProps) => ( - - +const CheckCircle = ({ ...props }: React.SVGProps) => ( + + ); diff --git a/src/v4/icons/ExclamationCircle.tsx b/src/v4/icons/ExclamationCircle.tsx index 059892654..4154b25a9 100644 --- a/src/v4/icons/ExclamationCircle.tsx +++ b/src/v4/icons/ExclamationCircle.tsx @@ -1,13 +1,12 @@ import React from 'react'; -const ExclamationCircle = ({ fill = '#FFFFFF', ...rest }: React.SVGProps) => ( +const ExclamationCircle = ({ ...props }: React.SVGProps) => ( ); diff --git a/src/v4/icons/Kebub.tsx b/src/v4/icons/Kebub.tsx index beb0b627c..a470a080a 100644 --- a/src/v4/icons/Kebub.tsx +++ b/src/v4/icons/Kebub.tsx @@ -1,18 +1,8 @@ import React from 'react'; -const Kebub = ({ fill = '#A5A9B5', ...props }: React.SVGProps) => ( - - +const Kebub = ({ ...props }: React.SVGProps) => ( + + ); diff --git a/src/v4/social/components/StoryTab/StoryTabItem.module.css b/src/v4/social/components/StoryTab/StoryTabItem.module.css index 63b3aed9b..1418faff6 100644 --- a/src/v4/social/components/StoryTab/StoryTabItem.module.css +++ b/src/v4/social/components/StoryTab/StoryTabItem.module.css @@ -1,50 +1,50 @@ .container { - display: flex; - flex-direction: column; - align-items: center; - cursor: pointer; - } - - .avatarContainer { - position: relative; - width: 4rem; - height: 4rem; - margin-bottom: 0.5rem; - } - - .verifiedIcon { - position: absolute; - bottom: 0; - right: 0; - z-index: 2; - fill: var(--asc-color-primary); - } - - .avatarBackground { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - width: 3.5rem; - height: 3.5rem; - border-radius: 50%; - overflow: hidden; - background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' fill='%23D9E5FC'/%3E%3Cpath d='M19.8462 12C20.7625 12 21.6413 12.356 22.2893 12.9898C22.9373 13.6235 23.3013 14.4831 23.3013 15.3793C23.3013 16.2756 22.9373 17.1351 22.2893 17.7688C21.6413 18.4026 20.7625 18.7586 19.8462 18.7586C18.9298 18.7586 18.051 18.4026 17.403 17.7688C16.755 17.1351 16.391 16.2756 16.391 15.3793C16.391 14.4831 16.755 13.6235 17.403 12.9898C18.051 12.356 18.9298 12 19.8462 12ZM12.9359 14.4138C13.4887 14.4138 14.0021 14.5586 14.4463 14.8193C14.2982 16.2 14.7128 17.571 15.5618 18.6428C15.0682 19.5697 14.081 20.2069 12.9359 20.2069C12.1504 20.2069 11.3972 19.9017 10.8418 19.3585C10.2864 18.8153 9.97436 18.0786 9.97436 17.3103C9.97436 16.5421 10.2864 15.8054 10.8418 15.2622C11.3972 14.719 12.1504 14.4138 12.9359 14.4138ZM26.7564 14.4138C27.5419 14.4138 28.2951 14.719 28.8505 15.2622C29.4059 15.8054 29.7179 16.5421 29.7179 17.3103C29.7179 18.0786 29.4059 18.8153 28.8505 19.3585C28.2951 19.9017 27.5419 20.2069 26.7564 20.2069C25.6113 20.2069 24.6241 19.5697 24.1305 18.6428C24.9795 17.571 25.3941 16.2 25.246 14.8193C25.6903 14.5586 26.2036 14.4138 26.7564 14.4138ZM13.4295 24.3103C13.4295 22.3117 16.3022 20.6897 19.8462 20.6897C23.3901 20.6897 26.2628 22.3117 26.2628 24.3103V26H13.4295V24.3103ZM8 26V24.5517C8 23.2097 9.86577 22.08 12.3929 21.7517C11.8105 22.4083 11.4551 23.3159 11.4551 24.3103V26H8ZM31.6923 26H28.2372V24.3103C28.2372 23.3159 27.8818 22.4083 27.2994 21.7517C29.8265 22.08 31.6923 23.2097 31.6923 24.5517V26Z' fill='white'/%3E%3C/svg%3E%0A"); - } - - .avatar { - width: 100%; - height: 100%; - object-fit: cover; - border-radius: 50%; - } - - .displayName { - margin: 0; - color: var(--asc-color-base-default); - text-align: center; - max-width: 4.5rem; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } \ No newline at end of file + display: flex; + flex-direction: column; + align-items: center; + cursor: pointer; +} + +.avatarContainer { + position: relative; + width: 4rem; + height: 4rem; + margin-bottom: 0.5rem; +} + +.verifiedIcon { + position: absolute; + bottom: 0; + right: 0; + z-index: 2; + fill: var(--asc-color-primary-default); +} + +.avatarBackground { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 3.5rem; + height: 3.5rem; + border-radius: 50%; + overflow: hidden; + background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='40' height='40' rx='20' fill='%23D9E5FC'/%3E%3Cpath d='M19.8462 12C20.7625 12 21.6413 12.356 22.2893 12.9898C22.9373 13.6235 23.3013 14.4831 23.3013 15.3793C23.3013 16.2756 22.9373 17.1351 22.2893 17.7688C21.6413 18.4026 20.7625 18.7586 19.8462 18.7586C18.9298 18.7586 18.051 18.4026 17.403 17.7688C16.755 17.1351 16.391 16.2756 16.391 15.3793C16.391 14.4831 16.755 13.6235 17.403 12.9898C18.051 12.356 18.9298 12 19.8462 12ZM12.9359 14.4138C13.4887 14.4138 14.0021 14.5586 14.4463 14.8193C14.2982 16.2 14.7128 17.571 15.5618 18.6428C15.0682 19.5697 14.081 20.2069 12.9359 20.2069C12.1504 20.2069 11.3972 19.9017 10.8418 19.3585C10.2864 18.8153 9.97436 18.0786 9.97436 17.3103C9.97436 16.5421 10.2864 15.8054 10.8418 15.2622C11.3972 14.719 12.1504 14.4138 12.9359 14.4138ZM26.7564 14.4138C27.5419 14.4138 28.2951 14.719 28.8505 15.2622C29.4059 15.8054 29.7179 16.5421 29.7179 17.3103C29.7179 18.0786 29.4059 18.8153 28.8505 19.3585C28.2951 19.9017 27.5419 20.2069 26.7564 20.2069C25.6113 20.2069 24.6241 19.5697 24.1305 18.6428C24.9795 17.571 25.3941 16.2 25.246 14.8193C25.6903 14.5586 26.2036 14.4138 26.7564 14.4138ZM13.4295 24.3103C13.4295 22.3117 16.3022 20.6897 19.8462 20.6897C23.3901 20.6897 26.2628 22.3117 26.2628 24.3103V26H13.4295V24.3103ZM8 26V24.5517C8 23.2097 9.86577 22.08 12.3929 21.7517C11.8105 22.4083 11.4551 23.3159 11.4551 24.3103V26H8ZM31.6923 26H28.2372V24.3103C28.2372 23.3159 27.8818 22.4083 27.2994 21.7517C29.8265 22.08 31.6923 23.2097 31.6923 24.5517V26Z' fill='white'/%3E%3C/svg%3E%0A"); +} + +.avatar { + width: 100%; + height: 100%; + object-fit: cover; + border-radius: 50%; +} + +.displayName { + margin: 0; + color: var(--asc-color-base-default); + text-align: center; + max-width: 4.5rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} diff --git a/src/v4/styles/global.css b/src/v4/styles/global.css index 479bdf456..b83778659 100644 --- a/src/v4/styles/global.css +++ b/src/v4/styles/global.css @@ -29,7 +29,7 @@ --asc-color-black: #000000; --asc-color-white: #ffffff; - --asc-color-primary: #1054de; + --asc-color-primary-default: #1054de; --asc-color-primary-shade1: #4a82f2; --asc-color-primary-shade2: #a0bdf8; --asc-color-primary-shade3: #d9e5fc; From 108a81c5349f9e93b78ba095e4caa70b6f05c987 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Thu, 25 Apr 2024 21:26:41 +0700 Subject: [PATCH 46/88] fix: ASC-21980 - fix remove link button style (#300) * fix: use v4 * fix: hyperlink position and bg color * fix: remove styled component * fix: button --- .../HyperLinkConfig/HyperLinkConfig.module.css | 15 +++++++++------ .../HyperLinkConfig/HyperLinkConfig.tsx | 9 +++++++-- 2 files changed, 16 insertions(+), 8 deletions(-) diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css index b31fe412c..93810290c 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css @@ -25,8 +25,8 @@ } .input.hasError { - border-bottom-color: var(--asc-color-alert-default); - color: var(--asc-color-alert-default); + border-bottom-color: var(--asc-color-alert); + color: var(--asc-color-alert); } .label { @@ -35,7 +35,7 @@ .label::after { content: none; - color: var(--asc-color-alert-default); + color: var(--asc-color-alert); } .label.required::after { @@ -47,7 +47,7 @@ } .errorText { - color: var(--asc-color-alert-default); + color: var(--asc-color-alert); } .characterCount { @@ -80,7 +80,7 @@ .removeIcon { width: 1.5rem; height: 1.5rem; - fill: var(--asc-color-alert-default); + fill: var(--asc-color-alert); } .removeLinkButton { @@ -88,8 +88,11 @@ justify-content: flex-start; align-items: center; gap: var(--asc-spacing-s1); - color: var(--asc-color-alert-default); + color: var(--asc-color-alert) ; border-radius: 0; + background-color: transparent; + transition: color 0.3s ease; + border: none; } .divider { diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx index f44cb3af2..1995c17fa 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx @@ -17,6 +17,7 @@ import { useCustomization } from '~/v4/core/providers/CustomizationProvider'; import { Trash2Icon } from '~/icons'; import styles from './HyperLinkConfig.module.css'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; +import Button from '~/v4/core/components/Button/Button'; interface HyperLinkConfigProps { pageId: '*'; @@ -201,10 +202,14 @@ export const HyperLinkConfig = ({
{isHaveHyperLink && (
- +
)} From fc7745eb6ded30577720906a7fb18a6e624bcdb8 Mon Sep 17 00:00:00 2001 From: Pitchaya T <33589608+ptchayap@users.noreply.github.com> Date: Fri, 26 Apr 2024 01:08:47 +0700 Subject: [PATCH 47/88] fix: character limit (#302) --- amity-uikit.config.json | 1 + .../components/AmityLiveChatMessageComposeBar/index.tsx | 8 ++++++-- .../AmityLiveChatPage/ChatContainer/ChatReadyState.tsx | 1 + .../AmityLiveChatPage/ChatContainer/styles.module.css | 2 +- src/v4/core/components/Modal/styles.module.css | 2 +- 5 files changed, 10 insertions(+), 4 deletions(-) diff --git a/amity-uikit.config.json b/amity-uikit.config.json index 789219ae1..f25286441 100644 --- a/amity-uikit.config.json +++ b/amity-uikit.config.json @@ -198,6 +198,7 @@ "live_chat/chat_header/*": {}, "live_chat/message_list/*": {}, "live_chat/message_composer/*": { + "message_limit": 200, "placeholder_text": "Write a message" } } diff --git a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx index 25314d9dc..b5ae3ec51 100644 --- a/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageComposeBar/index.tsx @@ -25,6 +25,7 @@ interface AmityLiveChatMessageComposeBarProps { composeAction: ComposeActionTypes; suggestionRef?: RefObject; disabled?: boolean; + pageId?: string; } type ComposeBarMention = { @@ -36,6 +37,7 @@ type ComposeBarMention = { }; export const AmityLiveChatMessageComposeBar = ({ + pageId = 'live_chat', channel, suggestionRef, composeAction: { replyMessage, mentionMessage, clearReplyMessage, clearMention }, @@ -44,11 +46,13 @@ export const AmityLiveChatMessageComposeBar = ({ const [mentionList, setMentionList] = useState<{ [key: ComposeBarMention['id']]: ComposeBarMention; }>({}); + const componentId = 'message_composer'; + const { confirm } = useConfirmContext(); const notification = useLiveChatNotifications(); const { getConfig } = useCustomization(); - const componentConfig = getConfig('live_chat/message_composer/*'); + const componentConfig = getConfig(`${pageId}/${componentId}/*`); const commentInputRef = useRef(null); const { queryMentionees, mentionees, onChange, markup, metadata, text } = useMention({ @@ -64,7 +68,7 @@ export const AmityLiveChatMessageComposeBar = ({ if (!channel) return; if (text?.trim().length === 0) return; - if (text.trim().length > COMPOSEBAR_MAX_CHARACTER_LIMIT) { + if (text.trim().length > (componentConfig?.message_limit || COMPOSEBAR_MAX_CHARACTER_LIMIT)) { confirm({ title: formatMessage({ id: 'livechat.error.tooLongMessage.title' }), content: formatMessage({ id: 'livechat.error.tooLongMessage.description' }), diff --git a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx index 8d414bbe4..012c6b0ba 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx +++ b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx @@ -98,6 +98,7 @@ const ChatReadyState = ({ channel }: { channel: Amity.Channel }) => {
Date: Fri, 26 Apr 2024 09:51:51 +0700 Subject: [PATCH 48/88] fix: change permission to check if user is a moderator (#304) --- src/v4/chat/components/LiveChatMessageContent/index.tsx | 2 +- src/v4/chat/hooks/useChannelPermission.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/v4/chat/components/LiveChatMessageContent/index.tsx b/src/v4/chat/components/LiveChatMessageContent/index.tsx index 0e10856e3..40aa71f56 100644 --- a/src/v4/chat/components/LiveChatMessageContent/index.tsx +++ b/src/v4/chat/components/LiveChatMessageContent/index.tsx @@ -7,7 +7,7 @@ import { FormattedTime, useIntl } from 'react-intl'; import Bin from '~/v4/icons/Bin'; import useSDK from '~/core/hooks/useSDK'; import MessageBubble from './MessageBubble'; -import useChannelPermission from '../../hooks/useChannelPermission'; +import useChannelPermission from '~/v4/chat/hooks/useChannelPermission'; import Flag from '~/v4/icons/Flag'; interface MessageItemProps { diff --git a/src/v4/chat/hooks/useChannelPermission.ts b/src/v4/chat/hooks/useChannelPermission.ts index fcab98b61..1d42662c1 100644 --- a/src/v4/chat/hooks/useChannelPermission.ts +++ b/src/v4/chat/hooks/useChannelPermission.ts @@ -6,9 +6,9 @@ const useChannelPermission = (subChannelId: Amity.SubChannel['subChannelId']) => const [isModerator, setIsModerator] = useState(false); useEffect(() => { - const currentUser = client?.hasPermission('EDIT_CHANNEL_USER').currentUser() || false; + const currentUser = client?.hasPermission('MUTE_CHANNEL').currentUser() || false; const currentUserInChannel = - client?.hasPermission('EDIT_CHANNEL_USER').channel(subChannelId) || false; + client?.hasPermission('MUTE_CHANNEL').channel(subChannelId) || false; setIsModerator(currentUser || currentUserInChannel); }, [subChannelId]); From d79d39ac6ad1a437a28c9cf18a29575eb8b3d7ae Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 26 Apr 2024 10:01:08 +0700 Subject: [PATCH 49/88] fix: ASC-22060 - remove onBack() on draft page (#303) * fix: use v4 * fix: hyperlink position and bg color * fix: remove styled component * fix: button * fix: hyperlink style * fix: style * fix: story tab item font color * fix: css var * fix: remove onBack() * fix: css * fix: remove unused * fix: remove unused line --- .../core/components/Modal/styles.module.css | 1 + .../HyperLinkConfig.module.css | 3 +- .../HyperLinkConfig/HyperLinkConfig.tsx | 28 +++++++++++-------- .../StoryTab/StoryTabItem.module.css | 1 - src/v4/social/pages/DraftsPage/DraftsPage.tsx | 3 -- src/v4/styles/global.css | 2 +- 6 files changed, 20 insertions(+), 18 deletions(-) diff --git a/src/v4/core/components/Modal/styles.module.css b/src/v4/core/components/Modal/styles.module.css index 36293845c..3d3ea9430 100644 --- a/src/v4/core/components/Modal/styles.module.css +++ b/src/v4/core/components/Modal/styles.module.css @@ -36,6 +36,7 @@ animation-name: appear; margin-top: 0 !important; } + .modalWindow { margin: auto; background-color: var(--asc-color-base-background); diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css index 93810290c..a4ab26807 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css @@ -22,11 +22,11 @@ border-bottom: 1px solid var(--asc-color-base-shade4); outline: none; color: inherit; + background-color: transparent; } .input.hasError { border-bottom-color: var(--asc-color-alert); - color: var(--asc-color-alert); } .label { @@ -93,6 +93,7 @@ background-color: transparent; transition: color 0.3s ease; border: none; + font-weight: var(--asc-text-font-weight-normal); } .divider { diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx index 1995c17fa..19df8ccf9 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx @@ -6,7 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod'; import { SecondaryButton } from '~/core/components/Button'; import useSDK from '~/core/hooks/useSDK'; -import { BottomSheet } from '~/v4/core/components'; +import { BottomSheet, Typography } from '~/v4/core/components'; import { MobileSheet, MobileSheetContainer, @@ -128,9 +128,9 @@ export const HyperLinkConfig = ({ )} -
+ {formatMessage({ id: 'storyCreation.hyperlink.bottomSheet.title' })} -
+
- + + +
- + + +
{watch('customText')?.length} / {MAX_LENGTH}
diff --git a/src/v4/social/components/StoryTab/StoryTabItem.module.css b/src/v4/social/components/StoryTab/StoryTabItem.module.css index 1418faff6..ad1e132a8 100644 --- a/src/v4/social/components/StoryTab/StoryTabItem.module.css +++ b/src/v4/social/components/StoryTab/StoryTabItem.module.css @@ -41,7 +41,6 @@ .displayName { margin: 0; - color: var(--asc-color-base-default); text-align: center; max-width: 4.5rem; white-space: nowrap; diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index 84499e35e..2b509ae4b 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -36,8 +36,6 @@ type HyperLinkFormInputs = { }; const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStoryPageProps) => { - // TODO: Change to usePageBehavior() to align with v4 - const { onBack } = useNavigation(); const { file, setFile } = useStoryContext(); const { navigationBehavior } = usePageBehavior(); const [isHyperLinkBottomSheetOpen, setIsHyperLinkBottomSheetOpen] = useState(false); @@ -78,7 +76,6 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor items?: Amity.StoryItem[], ) => { if (!file) return; - onBack(); const formData = new FormData(); formData.append('files', file); setFile(null); diff --git a/src/v4/styles/global.css b/src/v4/styles/global.css index b83778659..32b8d9b2e 100644 --- a/src/v4/styles/global.css +++ b/src/v4/styles/global.css @@ -166,4 +166,4 @@ --asc-color-secondary-shade3: #40434e; --asc-color-secondary-shade4: #292b32; --asc-color-secondary-shade5: #191919; -} +} \ No newline at end of file From 663520d69b361b059aeeac9c6bc3d12aaf50e514 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 26 Apr 2024 10:17:55 +0700 Subject: [PATCH 50/88] fix: ASC-21980 - hyperlink style (#301) * fix: use v4 * fix: hyperlink position and bg color * fix: remove styled component * fix: button * fix: hyperlink style * fix: style * fix: story tab item font color * fix: css var * fix: css * fix: remove unused * fix: remove line From 8c0ad0ccd1e644df88fa5d39043d67fe35c1210f Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 26 Apr 2024 11:02:41 +0700 Subject: [PATCH 51/88] fix: ASC-22063 - fix story global feed pagination (#305) * fix: use v4 * fix: hyperlink position and bg color * fix: remove styled component * fix: button * fix: hyperlink style * fix: style * fix: story tab item font color * fix: css var * fix: remove onBack() * fix: story global feed pagination * fix: add comment * fix: remove new line * fix: remove console.log * fix: logic * fix: story style * chore: Update src/v4/styles/global.css * fix: remove console.log --------- Co-authored-by: Bonn --- .../core/components/Modal/styles.module.css | 2 +- .../HyperLinkConfig.module.css | 2 +- .../StoryTab/StoryTabGlobalFeed.module.css | 1 + .../StoryTab/StoryTabGlobalFeed.tsx | 74 ++++++++++++------- ...yTargets.tsx => useGlobalStoryTargets.tsx} | 2 +- 5 files changed, 50 insertions(+), 31 deletions(-) rename src/v4/social/hooks/collections/{useGetGlobalStoryTargets.tsx => useGlobalStoryTargets.tsx} (92%) diff --git a/src/v4/core/components/Modal/styles.module.css b/src/v4/core/components/Modal/styles.module.css index 3d3ea9430..90ffcdc37 100644 --- a/src/v4/core/components/Modal/styles.module.css +++ b/src/v4/core/components/Modal/styles.module.css @@ -71,4 +71,4 @@ .footer { padding: var(--asc-spacing-m2) var(--asc-spacing-s2); padding-top: var(--asc-spacing-xxs2); -} +} \ No newline at end of file diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css index a4ab26807..dca8251d6 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css @@ -101,4 +101,4 @@ height: 0.0625rem; align-self: stretch; background-color: var(--asc-color-base-shade4); -} +} \ No newline at end of file diff --git a/src/v4/social/components/StoryTab/StoryTabGlobalFeed.module.css b/src/v4/social/components/StoryTab/StoryTabGlobalFeed.module.css index 19dafcdaa..3bf905ab4 100644 --- a/src/v4/social/components/StoryTab/StoryTabGlobalFeed.module.css +++ b/src/v4/social/components/StoryTab/StoryTabGlobalFeed.module.css @@ -4,6 +4,7 @@ padding: 0.625rem; background-color: var(--asc-color-white); border-bottom: 0.0625rem solid #e6e6e6; + gap: var(--asc-spacing-s1) } .storyTab { diff --git a/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx b/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx index 47630fb9c..6dcb48a51 100644 --- a/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx +++ b/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx @@ -1,19 +1,47 @@ -import React, { useRef } from 'react'; +import React, { useRef, useEffect } from 'react'; import styles from './StoryTabGlobalFeed.module.css'; import { useNavigation } from '~/social/providers/NavigationProvider'; -import { useGetGlobalStoryTargets } from '../../hooks/collections/useGetGlobalStoryTargets'; import { StoryTabItem } from './StoryTabItem'; -import InfiniteScroll from 'react-infinite-scroll-component'; +import { useGlobalStoryTargets } from '~/v4/social/hooks/collections/useGlobalStoryTargets'; -interface StoryTabGlobalFeedProps {} +const STORIES_PER_PAGE = 10; -export const StoryTabGlobalFeed: React.FC = () => { - const { stories, isLoading, hasMore, loadMoreStories } = useGetGlobalStoryTargets({ +export const StoryTabGlobalFeed: React.FC = () => { + const { stories, isLoading, hasMore, loadMoreStories } = useGlobalStoryTargets({ seenState: 'smart' as Amity.StorySeenQuery, - limit: 10, + limit: STORIES_PER_PAGE, }); const { onClickStory } = useNavigation(); const containerRef = useRef(null); + const observerRef = useRef(null); + + useEffect(() => { + if (containerRef.current) { + observerRef.current = new IntersectionObserver( + (entries) => { + const lastStory = entries[0]; + + if (lastStory.isIntersecting && hasMore) { + loadMoreStories(); + } + }, + { root: containerRef.current, rootMargin: '0px', threshold: 0.9 }, + ); + + if (stories.length > 0) { + const lastStoryElement = containerRef.current.children[stories.length - 1]; + if (lastStoryElement) { + observerRef.current.observe(lastStoryElement); + } + } + } + + return () => { + if (observerRef.current) { + observerRef.current.disconnect(); + } + }; + }, [stories, hasMore, loadMoreStories]); if (isLoading) { return ( @@ -32,27 +60,17 @@ export const StoryTabGlobalFeed: React.FC = () => { return (
- Loading...} - style={{ display: 'flex', overflowX: 'auto', gap: '0.5rem' }} - scrollThreshold={0.9} - scrollableTarget="containerRef" - > - {stories.map((story) => { - return ( - onClickStory(story.targetId)} - size={64} - /> - ); - })} - + {stories.map((story) => { + return ( + onClickStory(story.targetId)} + size={64} + /> + ); + })}
); }; diff --git a/src/v4/social/hooks/collections/useGetGlobalStoryTargets.tsx b/src/v4/social/hooks/collections/useGlobalStoryTargets.tsx similarity index 92% rename from src/v4/social/hooks/collections/useGetGlobalStoryTargets.tsx rename to src/v4/social/hooks/collections/useGlobalStoryTargets.tsx index a75bd4fd4..127de2c3f 100644 --- a/src/v4/social/hooks/collections/useGetGlobalStoryTargets.tsx +++ b/src/v4/social/hooks/collections/useGlobalStoryTargets.tsx @@ -1,7 +1,7 @@ import { StoryRepository } from '@amityco/ts-sdk'; import useLiveCollection from '~/core/hooks/useLiveCollection'; -export const useGetGlobalStoryTargets = ( +export const useGlobalStoryTargets = ( params: Amity.LiveCollectionParams, ) => { const { items, hasMore, loadMore, ...rest } = useLiveCollection({ From 7ac39658db8018240bb00c29eccef04def52b304 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 26 Apr 2024 11:49:14 +0700 Subject: [PATCH 52/88] fix: official condition (#306) --- .../StoryViewer/Renderers/Wrappers/Header/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/index.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/index.tsx index 61d763ec7..174cd9af9 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/index.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/index.tsx @@ -65,7 +65,7 @@ const Header: React.FC< {heading}
- {!isOfficial && } + {isOfficial && }
{subheading}
From 04e1a61a664f1cfa72139da7702b7ee1489e3bb2 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 26 Apr 2024 12:08:09 +0700 Subject: [PATCH 53/88] fix: ASC-19646 - notification error when failed create story (#307) * fix: official condition * fix: add error --- src/v4/social/pages/DraftsPage/DraftsPage.tsx | 65 ++++++++++--------- 1 file changed, 35 insertions(+), 30 deletions(-) diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index 2b509ae4b..07121ec41 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -18,7 +18,6 @@ import { StoryRepository } from '@amityco/ts-sdk'; import { HyperLink } from '../../elements/HyperLink'; import { HyperLinkConfig } from '../../components'; -import { useNavigation } from '~/social/providers/NavigationProvider'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; import { useNotifications } from '~/v4/core/providers/NotificationProvider'; @@ -76,36 +75,42 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor items?: Amity.StoryItem[], ) => { if (!file) return; - const formData = new FormData(); - formData.append('files', file); - setFile(null); - if (mediaType?.type === 'image') { - const { data: imageData } = await StoryRepository.createImageStory( - targetType, - targetId, - formData, - metadata, - imageMode, - items, - ); - if (imageData) { - notification.success({ - content: formatMessage({ id: 'storyViewer.notification.success' }), - }); - } - } else if (mediaType?.type === 'video') { - const { data: videoData } = await StoryRepository.createVideoStory( - targetType, - targetId, - formData, - metadata, - items, - ); - if (videoData) { - notification.success({ - content: formatMessage({ id: 'storyViewer.notification.success' }), - }); + try { + const formData = new FormData(); + formData.append('files', file); + setFile(null); + if (mediaType?.type === 'image') { + const { data: imageData } = await StoryRepository.createImageStory( + targetType, + targetId, + formData, + metadata, + imageMode, + items, + ); + if (imageData) { + notification.success({ + content: formatMessage({ id: 'storyViewer.notification.success' }), + }); + } + } else if (mediaType?.type === 'video') { + const { data: videoData } = await StoryRepository.createVideoStory( + targetType, + targetId, + formData, + metadata, + items, + ); + if (videoData) { + notification.success({ + content: formatMessage({ id: 'storyViewer.notification.success' }), + }); + } } + } catch (error) { + notification.error({ + content: formatMessage({ id: 'storyViewer.notification.error' }), + }); } }; From 72b7abfe5b74d0a9e58573310380167a0d59d747 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 26 Apr 2024 12:15:40 +0700 Subject: [PATCH 54/88] fix: ASC-22060 - navigate to community when create story (#308) * fix: official condition * fix: add error * fix: navigate --- src/v4/social/pages/DraftsPage/DraftsPage.tsx | 3 + .../pages/StoryPage/CommunityFeedStory.tsx | 65 ++++++++++--------- 2 files changed, 38 insertions(+), 30 deletions(-) diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index 07121ec41..4ae7d2982 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -20,6 +20,7 @@ import { HyperLink } from '../../elements/HyperLink'; import { HyperLinkConfig } from '../../components'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; import { useNotifications } from '~/v4/core/providers/NotificationProvider'; +import { useNavigation } from '~/social/providers/NavigationProvider'; type AmityStoryMediaType = { type: 'image'; url: string } | { type: 'video'; url: string }; @@ -35,6 +36,7 @@ type HyperLinkFormInputs = { }; const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStoryPageProps) => { + const { onClickCommunity } = useNavigation(); const { file, setFile } = useStoryContext(); const { navigationBehavior } = usePageBehavior(); const [isHyperLinkBottomSheetOpen, setIsHyperLinkBottomSheetOpen] = useState(false); @@ -76,6 +78,7 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor ) => { if (!file) return; try { + onClickCommunity(targetId); const formData = new FormData(); formData.append('files', file); setFile(null); diff --git a/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx b/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx index 67f6e9d65..f5addb5f4 100644 --- a/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx +++ b/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx @@ -116,37 +116,42 @@ export const CommunityFeedStory = ({ communityId }: CommunityFeedStoryProps) => metadata?: Amity.Metadata, items?: Amity.StoryItem[], ) => { - onBack(); - const formData = new FormData(); - formData.append('files', file); - setFile(null); - if (file?.type.includes('image')) { - const { data: imageData } = await StoryRepository.createImageStory( - 'community', - communityId, - formData, - metadata, - imageMode, - items, - ); - if (imageData) { - notification.success({ - content: formatMessage({ id: 'storyViewer.notification.success' }), - }); - } - } else { - const { data: videoData } = await StoryRepository.createVideoStory( - 'community', - communityId, - formData, - metadata, - items, - ); - if (videoData) { - notification.success({ - content: formatMessage({ id: 'storyViewer.notification.success' }), - }); + try { + const formData = new FormData(); + formData.append('files', file); + setFile(null); + if (file?.type.includes('image')) { + const { data: imageData } = await StoryRepository.createImageStory( + 'community', + communityId, + formData, + metadata, + imageMode, + items, + ); + if (imageData) { + notification.success({ + content: formatMessage({ id: 'storyViewer.notification.success' }), + }); + } + } else { + const { data: videoData } = await StoryRepository.createVideoStory( + 'community', + communityId, + formData, + metadata, + items, + ); + if (videoData) { + notification.success({ + content: formatMessage({ id: 'storyViewer.notification.success' }), + }); + } } + } catch (error) { + notification.error({ + content: formatMessage({ id: 'storyViewer.notification.error' }), + }); } }; From ebf39f0718d1460e2096f4612f411c7564b4f583 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 26 Apr 2024 15:49:31 +0700 Subject: [PATCH 55/88] fix: ASC-21985 - navigate story target for global feed story (#309) * fix: official condition * fix: add error * fix: navigate * fix: story global feed navigate * fix: onClose * fix: ASC-22060 - create story on view story page (#310) * fix: story global feed upload * fix: remove console.log * fix: navigate --- src/social/components/CommunityInfo/index.tsx | 2 +- src/social/pages/Application/index.tsx | 7 - src/social/providers/NavigationProvider.tsx | 27 +++- .../components/StoryTab/StoryTabCommunity.tsx | 2 +- .../StoryTab/StoryTabGlobalFeed.tsx | 8 +- .../social/components/ViewStoryPage/index.tsx | 2 +- .../StoryViewer/Renderers/Image.tsx | 11 +- .../StoryViewer/Renderers/Video.tsx | 22 ++- src/v4/social/pages/Application/index.tsx | 4 +- src/v4/social/pages/DraftsPage/DraftsPage.tsx | 17 ++- .../pages/StoryPage/GlobalFeedStory.tsx | 139 +++++++++++------- .../social/pages/StoryPage/ViewStoryPage.tsx | 6 + 12 files changed, 158 insertions(+), 89 deletions(-) diff --git a/src/social/components/CommunityInfo/index.tsx b/src/social/components/CommunityInfo/index.tsx index 8adfd8fbe..fa96b3be5 100644 --- a/src/social/components/CommunityInfo/index.tsx +++ b/src/social/components/CommunityInfo/index.tsx @@ -41,7 +41,7 @@ const CommunityInfo = ({ communityId, stories }: CommunityInfoProps) => { canReviewCommunityPosts, } = useCommunityInfo(communityId); - const { info, confirm } = useConfirmContext(); + const { confirm } = useConfirmContext(); const categoryNames = (communityCategories || []).map((category) => category.name); diff --git a/src/social/pages/Application/index.tsx b/src/social/pages/Application/index.tsx index fd6c685e2..c06c3b3ba 100644 --- a/src/social/pages/Application/index.tsx +++ b/src/social/pages/Application/index.tsx @@ -16,7 +16,6 @@ import CommunityEditPage from '~/social/pages/CommunityEdit'; import ProfileSettings from '~/social/components/ProfileSettings'; import { useNavigation } from '~/social/providers/NavigationProvider'; import useSDK from '~/core/hooks/useSDK'; -import { AmityViewStoryPage } from '~/v4/social/pages/StoryPage'; import { StoryProvider } from '~/v4/social/providers/StoryProvider'; import CommunityFeed from '../CommunityFeed'; @@ -88,12 +87,6 @@ const Community = () => { /> )} - {page.type === PageTypes.ViewStory && ( - - - - )} - {page.type === PageTypes.CommunityEdit && ( )} diff --git a/src/social/providers/NavigationProvider.tsx b/src/social/providers/NavigationProvider.tsx index 435b56b3e..271a51e25 100644 --- a/src/social/providers/NavigationProvider.tsx +++ b/src/social/providers/NavigationProvider.tsx @@ -34,6 +34,8 @@ type Page = storyId: string; targetId?: string; communityId?: string; + targetIds?: string[]; + storyType?: 'communityFeed' | 'globalFeed'; }; type ContextValue = { @@ -42,7 +44,11 @@ type ContextValue = { onClickCategory: (categoryId: string) => void; onClickCommunity: (communityId: string) => void; onClickUser: (userId: string, pageType?: string) => void; - onClickStory: (storyId: string) => void; + onClickStory: ( + storyId: string, + storyType: 'communityFeed' | 'globalFeed', + targetId?: string[], + ) => void; onCommunityCreated: (communityId: string) => void; onEditCommunity: (communityId: string, tab?: string) => void; onEditUser: (userId: string) => void; @@ -66,7 +72,11 @@ let defaultValue: ContextValue = { onClickCategory: (categoryId: string) => {}, onClickCommunity: (communityId: string) => {}, onClickUser: (userId: string) => {}, - onClickStory: (storyId: string) => {}, + onClickStory: ( + storyId: string, + storyType: 'communityFeed' | 'globalFeed', + targetId?: string[], + ) => {}, onCommunityCreated: (communityId: string) => {}, onEditCommunity: (communityId: string) => {}, onEditUser: (userId: string) => {}, @@ -90,7 +100,8 @@ if (process.env.NODE_ENV !== 'production') { onClickCommunity: (communityId) => console.log(`NavigationContext onClickCommunity(${communityId})`), onClickUser: (userId) => console.log(`NavigationContext onClickUser(${userId})`), - onClickStory: (storyId) => console.log(`NavigationContext onClickStory(${storyId})`), + onClickStory: (storyId, storyType, targetIds) => + console.log(`NavigationContext onClickStory(${storyId}, ${storyType}, ${targetIds})`), onCommunityCreated: (communityId) => console.log(`NavigationContext onCommunityCreated(${communityId})`), onEditCommunity: (communityId) => @@ -118,7 +129,11 @@ interface NavigationProviderProps { onClickCategory?: (categoryId: string) => void; onClickCommunity?: (communityId: string) => void; onClickUser?: (userId: string) => void; - onClickStory?: (storyId: string) => void; + onClickStory?: ( + storyId: string, + storyType: 'communityFeed' | 'globalFeed', + targetId?: string[], + ) => void; onCommunityCreated?: (communityId: string) => void; onEditCommunity?: (communityId: string, options?: { tab?: string }) => void; onEditUser?: (userId: string) => void; @@ -313,10 +328,12 @@ export default function NavigationProvider({ ); const handleClickStory = useCallback( - (targetId) => { + (targetId, storyType, targetIds) => { const next = { type: PageTypes.ViewStory, targetId, + storyType, + targetIds, }; if (onChangePage) return onChangePage(next); diff --git a/src/v4/social/components/StoryTab/StoryTabCommunity.tsx b/src/v4/social/components/StoryTab/StoryTabCommunity.tsx index 9c8ee3785..dfdc0ad2b 100644 --- a/src/v4/social/components/StoryTab/StoryTabCommunity.tsx +++ b/src/v4/social/components/StoryTab/StoryTabCommunity.tsx @@ -50,7 +50,7 @@ export const StoryTabCommunityFeed: React.FC = ({ co const handleOnClick = () => { if (Array.isArray(stories) && stories.length === 0) return; - onClickStory(communityId); + onClickStory(communityId, 'communityFeed'); }; const { client } = useSDK(); diff --git a/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx b/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx index 6dcb48a51..1d36be6dc 100644 --- a/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx +++ b/src/v4/social/components/StoryTab/StoryTabGlobalFeed.tsx @@ -66,7 +66,13 @@ export const StoryTabGlobalFeed: React.FC = () => { key={story.targetId} targetId={story.targetId} hasUnseen={story.hasUnseen} - onClick={() => onClickStory(story.targetId)} + onClick={() => + onClickStory( + story.targetId, + 'globalFeed', + stories.map((s) => s.targetId), + ) + } size={64} /> ); diff --git a/src/v4/social/components/ViewStoryPage/index.tsx b/src/v4/social/components/ViewStoryPage/index.tsx index bb81e37c0..ba3ed181c 100644 --- a/src/v4/social/components/ViewStoryPage/index.tsx +++ b/src/v4/social/components/ViewStoryPage/index.tsx @@ -253,7 +253,7 @@ const StoryViewer = ({ pageId, targetId, duration = 5000, onClose }: StoryViewer } }, [stories, file, currentIndex]); - if (isDraft && file) { + if (file) { return ( { const { formatMessage } = useIntl(); - const { onBack, onClickCommunity } = useNavigation(); + const { page, onChangePage, onClickCommunity } = useNavigation(); const [loaded, setLoaded] = useState(false); const [isOpenBottomSheet, setIsOpenBottomSheet] = useState(false); const [isOpenCommentSheet, setIsOpenCommentSheet] = useState(false); @@ -143,7 +144,13 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { onAction={openBottomSheet} onAddStory={handleAddIconClick} onClickCommunity={() => onClickCommunity(community?.communityId as string)} - onClose={onBack} + onClose={() => { + if (page.type === PageTypes.ViewStory && page.storyType === 'globalFeed') { + onChangePage(PageTypes.NewsFeed); + return; + } + onClickCommunity(community?.communityId as string); + }} addStoryButton={addStoryButton} /> { const { formatMessage } = useIntl(); - const { onBack, onClickCommunity } = useNavigation(); + const { page, onClickCommunity, onChangePage } = useNavigation(); const [loaded, setLoaded] = useState(false); const [muted, setMuted] = useState(false); const [isPaused, setIsPaused] = useState(false); @@ -36,13 +37,6 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler const [isOpenCommentSheet, setIsOpenCommentSheet] = useState(false); const { width, height, loader, storyStyles } = config; const { client } = useSDK(); - const [isReplying, setIsReplying] = useState(false); - const [replyTo, setReplyTo] = useState(undefined); - const [selectedComment, setSelectedComment] = useState<{ - referenceType?: string; - referenceId?: string; - commentId?: string; - } | null>(null); const isLiked = !!(story && story.myReactions && story.myReactions.includes(LIKE_REACTION_KEY)); const totalLikes = story?.reactions[LIKE_REACTION_KEY] || 0; @@ -187,7 +181,13 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler onAction={openBottomSheet} onAddStory={handleAddIconClick} onClickCommunity={() => onClickCommunity(community?.communityId as string)} - onClose={onBack} + onClose={() => { + if (page.type === PageTypes.ViewStory && page.storyType === 'globalFeed') { + onChangePage(PageTypes.NewsFeed); + return; + } + onClickCommunity(community?.communityId as string); + }} addStoryButton={addStoryButton} /> { toggleOpen={toggleOpen} /> )} - {page.type === PageTypes.ViewStory && ( + {page.type === PageTypes.ViewStory && page.storyType && (
- +
)} {page.type === PageTypes.CommunityEdit && ( diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index 4ae7d2982..55fbdbf86 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -21,11 +21,12 @@ import { HyperLinkConfig } from '../../components'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; import { useNotifications } from '~/v4/core/providers/NotificationProvider'; import { useNavigation } from '~/social/providers/NavigationProvider'; +import { PageTypes } from '~/social/constants'; type AmityStoryMediaType = { type: 'image'; url: string } | { type: 'video'; url: string }; type AmityDraftStoryPageProps = { - targetId: string; + targetId?: string; targetType: Amity.StoryTargetType; mediaType?: AmityStoryMediaType; }; @@ -36,7 +37,7 @@ type HyperLinkFormInputs = { }; const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStoryPageProps) => { - const { onClickCommunity } = useNavigation(); + const { page, onChangePage, onClickCommunity } = useNavigation(); const { file, setFile } = useStoryContext(); const { navigationBehavior } = usePageBehavior(); const [isHyperLinkBottomSheetOpen, setIsHyperLinkBottomSheetOpen] = useState(false); @@ -78,11 +79,17 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor ) => { if (!file) return; try { - onClickCommunity(targetId); const formData = new FormData(); formData.append('files', file); setFile(null); - if (mediaType?.type === 'image') { + if (page.type === PageTypes.ViewStory && page.storyType === 'globalFeed') { + onChangePage(PageTypes.NewsFeed); + } else { + if (page.communityId) { + onClickCommunity(page.communityId); + } + } + if (mediaType?.type === 'image' && targetId) { const { data: imageData } = await StoryRepository.createImageStory( targetType, targetId, @@ -96,7 +103,7 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor content: formatMessage({ id: 'storyViewer.notification.success' }), }); } - } else if (mediaType?.type === 'video') { + } else if (mediaType?.type === 'video' && targetId) { const { data: videoData } = await StoryRepository.createVideoStory( targetType, targetId, diff --git a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx index 59b99b11d..01d93e801 100644 --- a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx +++ b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx @@ -1,21 +1,15 @@ import React, { useEffect, useRef, useState } from 'react'; - import useStories from '~/social/hooks/useStories'; - import useSDK from '~/core/hooks/useSDK'; - import { useMedia } from 'react-use'; import { useIntl } from 'react-intl'; - import { FinalColor } from 'extract-colors/lib/types/Color'; import { StoryRepository } from '@amityco/ts-sdk'; import { CreateStoryButton } from '../../elements'; import { Trash2Icon } from '~/icons'; -import { isNonNullable } from '~/helpers/utils'; +import { isNonNullable } from '~/v4/helpers/utils'; import { extractColors } from 'extract-colors'; - import { useNavigation } from '~/social/providers/NavigationProvider'; - import { HiddenInput, StoryArrowLeftButton, @@ -32,21 +26,26 @@ import { checkStoryPermission } from '~/utils'; import { useStoryContext } from '../../providers/StoryProvider'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; import { useNotifications } from '~/v4/core/providers/NotificationProvider'; - -interface CommunityFeedStoryProps { - communityId: string; -} +import { PageTypes } from '~/social/constants'; const DURATION = 5000; -export const GlobalFeedStory = ({ communityId }: CommunityFeedStoryProps) => { - const { onBack } = useNavigation(); +interface GlobalFeedStoryProps { + targetId: string; +} + +export const GlobalFeedStory: React.FC = () => { + const { page } = useNavigation(); + const { onClickStory, onChangePage } = useNavigation(); const { confirm } = useConfirmContext(); const notification = useNotifications(); const { stories } = useStories({ - targetId: communityId, targetType: 'community', + targetId: + page.type === PageTypes.ViewStory && page.storyType === 'globalFeed' && page.targetId + ? page.targetId + : '', options: { orderBy: 'asc', sortBy: 'createdAt', @@ -81,7 +80,7 @@ export const GlobalFeedStory = ({ communityId }: CommunityFeedStoryProps) => { const [colors, setColors] = useState([]); const isStoryCreator = stories[currentIndex]?.creator?.userId === currentUserId; - const haveStoryPermission = checkStoryPermission(client, communityId); + const haveStoryPermission = checkStoryPermission(client, stories[currentIndex]?.targetId); const confirmDeleteStory = (storyId: string) => { const isLastStory = currentIndex === 0; @@ -92,7 +91,7 @@ export const GlobalFeedStory = ({ communityId }: CommunityFeedStoryProps) => { onOk: async () => { previousStory(); if (isLastStory) { - onBack(); + onChangePage(PageTypes.NewsFeed); } await StoryRepository.softDeleteStory(storyId); notification.success({ @@ -116,37 +115,44 @@ export const GlobalFeedStory = ({ communityId }: CommunityFeedStoryProps) => { metadata?: Amity.Metadata, items?: Amity.StoryItem[], ) => { - onBack(); - const formData = new FormData(); - formData.append('files', file); - setFile(null); - if (file?.type.includes('image')) { - const { data: imageData } = await StoryRepository.createImageStory( - 'community', - communityId, - formData, - metadata, - imageMode, - items, - ); - if (imageData) { - notification.success({ - content: formatMessage({ id: 'storyViewer.notification.success' }), - }); - } - } else { - const { data: videoData } = await StoryRepository.createVideoStory( - 'community', - communityId, - formData, - metadata, - items, - ); - if (videoData) { - notification.success({ - content: formatMessage({ id: 'storyViewer.notification.success' }), - }); + try { + const formData = new FormData(); + formData.append('files', file); + setFile(null); + if (file?.type.includes('image') && currentUserId) { + const { data: imageData } = await StoryRepository.createImageStory( + 'user', + currentUserId, + formData, + metadata, + imageMode, + items, + ); + if (imageData) { + notification.success({ + content: formatMessage({ id: 'storyViewer.notification.success' }), + }); + } + } else { + if (currentUserId) { + const { data: videoData } = await StoryRepository.createVideoStory( + 'user', + currentUserId, + formData, + metadata, + items, + ); + if (videoData) { + notification.success({ + content: formatMessage({ id: 'storyViewer.notification.success' }), + }); + } + } } + } catch (error) { + notification.error({ + content: formatMessage({ id: 'storyViewer.notification.error' }), + }); } }; @@ -184,15 +190,44 @@ export const GlobalFeedStory = ({ communityId }: CommunityFeedStoryProps) => { }); const nextStory = () => { - if (currentIndex === stories.length - 1) { - onBack(); + if ( + page.type === PageTypes.ViewStory && + page.targetIds && + page.targetId && + currentIndex === formattedStories?.length - 1 + ) { + const currentTargetIndex = page.targetIds.indexOf(page.targetId); + const nextTargetIndex = currentTargetIndex + 1; + + if (nextTargetIndex < page.targetIds.length) { + const nextTargetId = page.targetIds[nextTargetIndex]; + onClickStory(nextTargetId, 'globalFeed', page.targetIds); + } else { + onChangePage(PageTypes.NewsFeed); + } return; } setCurrentIndex(currentIndex + 1); }; const previousStory = () => { - if (currentIndex === 0) return; + if ( + page.type === PageTypes.ViewStory && + page.targetIds && + page.targetId && + currentIndex === 0 + ) { + const currentTargetIndex = page.targetIds.indexOf(page.targetId); + const previousTargetIndex = currentTargetIndex - 1; + + if (previousTargetIndex >= 0) { + const previousTargetId = page.targetIds[previousTargetIndex]; + onClickStory(previousTargetId, 'globalFeed', page.targetIds); + } else { + onChangePage(PageTypes.NewsFeed); + } + return; + } setCurrentIndex(currentIndex - 1); }; @@ -242,7 +277,7 @@ export const GlobalFeedStory = ({ communityId }: CommunityFeedStoryProps) => { } }, [stories, file, currentIndex]); - if (file) { + if (file && page.type === PageTypes.ViewStory && page.storyType === 'globalFeed') { return ( { ? { type: 'image', url: URL.createObjectURL(file) } : { type: 'video', url: URL.createObjectURL(file) } } - targetId={communityId} + targetId={page.targetId} targetType="community" /> ); @@ -287,7 +322,7 @@ export const GlobalFeedStory = ({ communityId }: CommunityFeedStoryProps) => { onStoryEnd={increaseIndex} onNext={nextStory} onPrevious={previousStory} - onAllStoriesEnd={onBack} + onAllStoriesEnd={() => onChangePage(PageTypes.NewsFeed)} /> ) : null} diff --git a/src/v4/social/pages/StoryPage/ViewStoryPage.tsx b/src/v4/social/pages/StoryPage/ViewStoryPage.tsx index 521826696..2a452ef3c 100644 --- a/src/v4/social/pages/StoryPage/ViewStoryPage.tsx +++ b/src/v4/social/pages/StoryPage/ViewStoryPage.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { CommunityFeedStory } from './CommunityFeedStory'; import { useNavigation } from '~/social/providers/NavigationProvider'; import { PageTypes } from '~/social/constants'; +import { GlobalFeedStory } from './GlobalFeedStory'; type AmityViewStoryPageType = 'communityFeed' | 'globalFeed'; @@ -19,6 +20,11 @@ const AmityViewStoryPage: React.FC = ({ type }) => { return ; } return null; + case 'globalFeed': + if (page.type === PageTypes.ViewStory && page.targetId) { + return ; + } + return null; default: return null; } From 6120a05cc11d66e8ad15db11867d75be6a3730b2 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 26 Apr 2024 16:24:07 +0700 Subject: [PATCH 56/88] fix: ASC-21970 - story uploading state (#297) * fix: font * fix: story tab gap * fix: use css var * fix: modal * fix: can't delete story * fix: v4 component * fix: hyperlink config * fix: shouldAllowCreation * fix: type * fix: uploading state * fix: remove console.log * fix: use css var * fix: modal * fix: v4 component * fix: hyperlink config * fix: shouldAllowCreation * fix: type * fix: uploading state * fix: remove console.log * fix: storyRing state * fix: remove fill in verified icon * fix: story ring * fix: icon * fix: story --------- Co-authored-by: Bonn --- src/social/components/CommunityInfo/index.tsx | 23 -- src/v4/core/components/ConfirmModal/index.tsx | 2 +- src/v4/icons/Verified.tsx | 21 ++ .../HyperLinkConfig.module.css | 6 +- .../HyperLinkConfig/HyperLinkConfig.tsx | 1 + .../components/StoryTab/StoryRing.module.css | 21 +- .../social/components/StoryTab/StoryRing.tsx | 249 +++++++++++++----- .../components/StoryTab/StoryTabCommunity.tsx | 8 +- .../StoryTab/StoryTabGlobalFeed.module.css | 2 +- .../components/StoryTab/StoryTabItem.tsx | 8 +- src/v4/social/icons/verified.tsx | 5 +- .../Wrappers/Header/Header.module.css | 2 +- .../Renderers/Wrappers/Header/index.tsx | 2 +- .../social/pages/Application/sdk.stories.tsx | 2 +- .../pages/DraftsPage/DraftsPage.module.css | 2 +- src/v4/social/pages/DraftsPage/DraftsPage.tsx | 10 +- .../pages/StoryPage/GlobalFeedStory.tsx | 11 +- 17 files changed, 253 insertions(+), 122 deletions(-) create mode 100644 src/v4/icons/Verified.tsx diff --git a/src/social/components/CommunityInfo/index.tsx b/src/social/components/CommunityInfo/index.tsx index fa96b3be5..3ed33b2f6 100644 --- a/src/social/components/CommunityInfo/index.tsx +++ b/src/social/components/CommunityInfo/index.tsx @@ -3,12 +3,7 @@ import { CommunityPostSettings } from '@amityco/ts-sdk'; import UICommunityInfo from './UICommunityInfo'; import { useCommunityInfo } from './hooks'; -import { useNavigation } from '~/social/providers/NavigationProvider'; -import useSDK from '~/core/hooks/useSDK'; - -import { useStoryContext } from '~/v4/social/providers/StoryProvider'; -import { checkStoryPermission } from '~/utils'; import { FormattedMessage } from 'react-intl'; import { useConfirmContext } from '~/core/providers/ConfirmProvider'; @@ -18,17 +13,6 @@ interface CommunityInfoProps { } const CommunityInfo = ({ communityId, stories }: CommunityInfoProps) => { - const { setFile } = useStoryContext(); - const haveStories = stories?.length > 0; - const isStorySyncing = haveStories && stories.some((story) => story?.syncState === 'syncing'); - const isStoryErrored = haveStories && stories.some((story) => story?.syncState === 'error'); - const isSeen = haveStories && stories.every((story) => story?.isSeen); - - const { onClickStory } = useNavigation(); - - const { client } = useSDK(); - const haveStoryPermission = checkStoryPermission(client, communityId); - const { community, communityCategories, @@ -83,13 +67,6 @@ const CommunityInfo = ({ communityId, stories }: CommunityInfoProps) => { onOk: () => leaveCommunity(), }) } - setStoryFile={(storyFile) => setFile(storyFile)} - haveStories={haveStories || false} - haveStoryPermission={haveStoryPermission} - isStorySyncing={isStorySyncing || false} - isStoryErrored={isStoryErrored || false} - isSeen={isSeen || false} - onClickStory={onClickStory} /> ); }; diff --git a/src/v4/core/components/ConfirmModal/index.tsx b/src/v4/core/components/ConfirmModal/index.tsx index 077f257af..7bb1f5804 100644 --- a/src/v4/core/components/ConfirmModal/index.tsx +++ b/src/v4/core/components/ConfirmModal/index.tsx @@ -42,7 +42,7 @@ const Confirm = ({ } onCancel={onCancel} > - {content} +
{content}
); diff --git a/src/v4/icons/Verified.tsx b/src/v4/icons/Verified.tsx new file mode 100644 index 000000000..7fd75ef2b --- /dev/null +++ b/src/v4/icons/Verified.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +const Svg = (props: React.SVGProps) => ( + + + +); + +export default Svg; diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css index dca8251d6..a1bb228d7 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css @@ -21,12 +21,13 @@ border: none; border-bottom: 1px solid var(--asc-color-base-shade4); outline: none; - color: inherit; + color: var(--asc-color-base-default); background-color: transparent; } .input.hasError { border-bottom-color: var(--asc-color-alert); + color: var(--asc-color-alert); } .label { @@ -40,6 +41,7 @@ .label.required::after { content: '*'; + color: var(--asc-color-alert); } .description { @@ -88,7 +90,7 @@ justify-content: flex-start; align-items: center; gap: var(--asc-spacing-s1); - color: var(--asc-color-alert) ; + color: var(--asc-color-alert); border-radius: 0; background-color: transparent; transition: color 0.3s ease; diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx index 19df8ccf9..dad3c7fac 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx @@ -170,6 +170,7 @@ export const HyperLinkConfig = ({ {formatMessage({ id: 'storyCreation.hyperlink.form.urlLabel' })} + { - pageId: '*'; - componentId: 'story_tab_component'; + pageId?: '*'; + componentId?: 'story_tab_component'; hasUnseen?: boolean; uploading?: boolean; isErrored?: boolean; size?: number; } +const EmptyStateRingSvg = ({ + pageId, + componentId, + elementId, + size, +}: { + pageId: string; + componentId: string; + elementId: string; + size: number; +}) => { + const { getConfig } = useCustomization(); + const elementConfig = getConfig(`${pageId}/${componentId}/${elementId}`); + return ( + + + + + + + + + + ); +}; + +const HasSeenRingSvg = ({ + pageId, + componentId, + elementId, + size, +}: { + pageId: string; + componentId: string; + elementId: string; + size: number; +}) => { + const { getConfig } = useCustomization(); + const elementConfig = getConfig(`${pageId}/${componentId}/${elementId}`); + return ( + + + + + + + + + + ); +}; + +const UploadingRingSvg = ({ + pageId, + componentId, + elementId, + size, +}: { + pageId: string; + componentId: string; + elementId: string; + size: number; +}) => { + const { getConfig } = useCustomization(); + const elementConfig = getConfig(`${pageId}/${componentId}/${elementId}`); + return ( + + + + + + + + + + ); +}; + const StoryRing = ({ pageId = '*', componentId = 'story_tab_component', @@ -22,21 +170,10 @@ const StoryRing = ({ ...props }: StoryRingProps) => { const elementId = 'story_ring'; - const { getConfig, isExcluded } = useCustomization(); - const elementConfig = getConfig(`${pageId}/${componentId}/${elementId}`); + const { isExcluded } = useCustomization(); const isElementExcluded = isExcluded(`${pageId}/${componentId}/${elementId}`); - const scaleFactor = size / 64; // Assuming the default size is 64 - const ringSize = 48 * scaleFactor; // Adjust the ring size based on the scale factor - const viewBox = `0 0 ${ringSize} ${ringSize}`; - const ringRadius = 23 * scaleFactor; - const strokeWidth = 2 * scaleFactor; - - const strokeDasharray = 339 * scaleFactor; - const strokeDashoffset = (339 / 2) * scaleFactor; - if (isElementExcluded) return null; - if (isErrored) { return ( + strokeWidth="2" + > ); } - return ( - - - - - - - - - {hasUnseen && ( - - )} - + ); + } + + if (hasUnseen) { + return ( + + ); + } + + return ( + ); }; diff --git a/src/v4/social/components/StoryTab/StoryTabCommunity.tsx b/src/v4/social/components/StoryTab/StoryTabCommunity.tsx index dfdc0ad2b..d804de851 100644 --- a/src/v4/social/components/StoryTab/StoryTabCommunity.tsx +++ b/src/v4/social/components/StoryTab/StoryTabCommunity.tsx @@ -1,7 +1,7 @@ import React, { useRef } from 'react'; import Truncate from 'react-truncate-markup'; import { backgroundImage as CommunityImage } from '~/icons/Community'; -import styles from './StoryTabCommunity.module.css'; + import StoryRing from './StoryRing'; import useStories from '~/social/hooks/useStories'; import useSDK from '~/core/hooks/useSDK'; @@ -9,7 +9,7 @@ import { checkStoryPermission } from '~/utils'; import { useStoryContext } from '~/v4/social/providers/StoryProvider'; import { useCommunityInfo } from '~/social/components/CommunityInfo/hooks'; import { useNavigation } from '~/social/providers/NavigationProvider'; -import { StoryTabItem } from './StoryTabItem'; + import { AddStoryButton, ErrorButton, @@ -56,7 +56,7 @@ export const StoryTabCommunityFeed: React.FC = ({ co const { client } = useSDK(); const hasStoryPermission = checkStoryPermission(client, communityId); const hasStoryRing = stories?.length > 0; - const isSeen = stories.every((story) => story?.isSeen); + const hasUnSeen = stories.some((story) => !story?.isSeen); const uploading = stories.some((story) => story?.syncState === 'syncing'); const isErrored = stories.some((story) => story?.syncState === 'error'); @@ -67,7 +67,7 @@ export const StoryTabCommunityFeed: React.FC = ({ co = ({ targetId, hasUnseen, onC
- {community?.isOfficial && ( - - )} + {community?.isOfficial && }
{communityAvatar && ( {community?.displayName} diff --git a/src/v4/social/icons/verified.tsx b/src/v4/social/icons/verified.tsx index 9bb8d4066..f2dac3f5d 100644 --- a/src/v4/social/icons/verified.tsx +++ b/src/v4/social/icons/verified.tsx @@ -10,10 +10,7 @@ function Verified(props: React.SVGProps) { fill="none" {...props} > - + ); } diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/Header.module.css b/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/Header.module.css index 189a9df01..8294adf3d 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/Header.module.css +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/Header.module.css @@ -70,7 +70,7 @@ } .verifiedBadge { - color: var(--asc-color-white); + fill: var(--asc-color-white); } .dotsButton { diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/index.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/index.tsx index 174cd9af9..0237b22cf 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/index.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Header/index.tsx @@ -4,7 +4,7 @@ import Truncate from 'react-truncate-markup'; import Avatar from '~/core/components/Avatar'; import { backgroundImage as communityBackgroundImage } from '~/icons/Community'; -import { PauseIcon, PlayIcon, VerifiedIcon } from '~/icons'; +import { PauseIcon, PlayIcon } from '~/icons'; import { CloseButton, OverflowMenuButton } from '~/v4/social/elements'; import Verified from '~/v4/social/icons/verified'; diff --git a/src/v4/social/pages/Application/sdk.stories.tsx b/src/v4/social/pages/Application/sdk.stories.tsx index e6875f829..24fd1f577 100644 --- a/src/v4/social/pages/Application/sdk.stories.tsx +++ b/src/v4/social/pages/Application/sdk.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import UiKitApp from './index'; +import UiKitApp from '.'; export default { title: 'V4/Social', diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.module.css b/src/v4/social/pages/DraftsPage/DraftsPage.module.css index 97ea83386..72f273564 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.module.css +++ b/src/v4/social/pages/DraftsPage/DraftsPage.module.css @@ -68,4 +68,4 @@ bottom: 6rem; left: 0; right: 0; -} \ No newline at end of file +} diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index 55fbdbf86..9173ef398 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -152,7 +152,15 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor }; const onRemoveHyperLink = () => { - setHyperLink([]); + setHyperLink([ + { + data: { + url: '', + customText: '', + }, + type: 'hyperlink' as Amity.StoryItemType, + }, + ]); }; useEffect(() => { diff --git a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx index 01d93e801..c55e9cda3 100644 --- a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx +++ b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx @@ -177,7 +177,13 @@ export const GlobalFeedStory: React.FC = () => { ? { name: 'delete', action: () => deleteStory(story?.storyId as string), - icon: , + icon: ( + + ), } : null, ].filter(isNonNullable), @@ -205,6 +211,7 @@ export const GlobalFeedStory: React.FC = () => { } else { onChangePage(PageTypes.NewsFeed); } + setCurrentIndex(0); return; } setCurrentIndex(currentIndex + 1); @@ -226,6 +233,7 @@ export const GlobalFeedStory: React.FC = () => { } else { onChangePage(PageTypes.NewsFeed); } + setCurrentIndex(0); return; } setCurrentIndex(currentIndex - 1); @@ -322,7 +330,6 @@ export const GlobalFeedStory: React.FC = () => { onStoryEnd={increaseIndex} onNext={nextStory} onPrevious={previousStory} - onAllStoriesEnd={() => onChangePage(PageTypes.NewsFeed)} /> ) : null} From e1e17e9dd9dd380a4e4600d8c11c6769a20e803c Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 26 Apr 2024 17:13:44 +0700 Subject: [PATCH 57/88] fix: notification style (#311) --- src/v4/core/components/Notification/styles.module.css | 4 ++-- src/v4/core/providers/NotificationProvider.module.css | 2 +- src/v4/core/providers/NotificationProvider.tsx | 5 +++-- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/v4/core/components/Notification/styles.module.css b/src/v4/core/components/Notification/styles.module.css index ab5a7aafa..36dd28e5c 100644 --- a/src/v4/core/components/Notification/styles.module.css +++ b/src/v4/core/components/Notification/styles.module.css @@ -24,13 +24,13 @@ display: flex; justify-content: center; align-items: center; - color: white; + color: var(--asc-color-white); border-radius: 4px; margin-bottom: 10px; animation-duration: 0.3s; animation-name: appear; pointer-events: auto; - background-color: var(--asc-color-base-shade4); + background-color: var(--asc-color-base-default); } @keyframes appear { diff --git a/src/v4/core/providers/NotificationProvider.module.css b/src/v4/core/providers/NotificationProvider.module.css index ab5a7aafa..0f8bf6de4 100644 --- a/src/v4/core/providers/NotificationProvider.module.css +++ b/src/v4/core/providers/NotificationProvider.module.css @@ -1,8 +1,8 @@ -/* styles.module.css */ .icon { width: 1.125rem; height: 1.125rem; margin-right: 8px; + fill: var(--asc-color-white); } .notifications { diff --git a/src/v4/core/providers/NotificationProvider.tsx b/src/v4/core/providers/NotificationProvider.tsx index 97a4c8d85..1fd6846f3 100644 --- a/src/v4/core/providers/NotificationProvider.tsx +++ b/src/v4/core/providers/NotificationProvider.tsx @@ -1,5 +1,6 @@ import React, { createContext, ReactNode, useContext, useState } from 'react'; -import Check from '~/v4/icons/Check'; + +import CheckCircle from '~/v4/icons/CheckCircle'; import ExclamationCircle from '~/v4/icons/ExclamationCircle'; import Remove from '~/v4/icons/Remove'; import styles from './NotificationProvider.module.css'; @@ -65,7 +66,7 @@ export const NotificationProvider: React.FC = ({ children }) => { notifications, notificationFunction: { success: (data: Omit) => - addNotifications({ ...data, icon: }), + addNotifications({ ...data, icon: }), info: (data: Omit) => addNotifications({ ...data, icon: }), error: (data: Omit) => From 2b05e243dcf3ccba3f9e3453ea5ff12578d8f49f Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 26 Apr 2024 18:01:03 +0700 Subject: [PATCH 58/88] fix: add onAllStoriesEnd (#312) --- src/v4/social/pages/StoryPage/GlobalFeedStory.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx index c55e9cda3..1a22193ba 100644 --- a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx +++ b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx @@ -330,6 +330,7 @@ export const GlobalFeedStory: React.FC = () => { onStoryEnd={increaseIndex} onNext={nextStory} onPrevious={previousStory} + onAllStoriesEnd={nextStory} /> ) : null} From bfe560ce6357b44d8e8f65a20d670f76d23d347c Mon Sep 17 00:00:00 2001 From: Pitchaya T <33589608+ptchayap@users.noreply.github.com> Date: Fri, 26 Apr 2024 21:23:26 +0700 Subject: [PATCH 59/88] Release/v4.0.0 beta.3 (#314) * chore: upgrade dependencies * fix: cherry-pick bugs from v3 * chore(release): 4.0.0-beta.3 --------- Co-authored-by: bmo-amity-bot --- CHANGELOG.md | 6 +++++ package.json | 4 ++-- pnpm-lock.yaml | 8 +++---- src/core/providers/UiKitProvider/index.tsx | 25 +++++++++++---------- src/social/hooks/useFeed.ts | 5 +++++ src/social/providers/NavigationProvider.tsx | 11 ++++++++- 6 files changed, 40 insertions(+), 19 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7c87e2f89..8191dcf49 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 4.0.0-beta.3 (2024-04-26) + +### Bug Fixes + +- cherry-pick bugs from v3 ([7b01a95](https://github.com/EkoCommunications/AmityUiKitWeb/commit/7b01a956db5a7c019164ee4ffaf781a55c588714)) + ## 4.0.0-beta.2 (2024-04-12) ### Bug Fixes diff --git a/package.json b/package.json index 74a0d0fd9..d6cac5f43 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@amityco/ui-kit", - "version": "4.0.0-beta.2", + "version": "4.0.0-beta.3", "engines": { "node": ">=16", "pnpm": ">=8" @@ -39,7 +39,7 @@ "react-dom": ">=17.0.2" }, "devDependencies": { - "@amityco/ts-sdk": "^6.21.0", + "@amityco/ts-sdk": "^6.23.0", "@fortawesome/pro-light-svg-icons": "^5.15.4", "@fortawesome/pro-regular-svg-icons": "^5.15.4", "@fortawesome/pro-solid-svg-icons": "^5.15.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0de01765d..8f77de438 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -101,8 +101,8 @@ dependencies: devDependencies: '@amityco/ts-sdk': - specifier: ^6.21.0 - version: 6.22.0 + specifier: ^6.23.0 + version: 6.23.0 '@fortawesome/pro-light-svg-icons': specifier: ^5.15.4 version: 5.15.4 @@ -274,8 +274,8 @@ packages: resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==} dev: true - /@amityco/ts-sdk@6.22.0: - resolution: {integrity: sha512-JWJ1c0+5ipEwBwXzVNjNWRkk2MCsNkSGjunfXWEoOqfZEjxnjAVW9eoS5ev1vB/j9HdfVSumuwhYqbxEcHQu1g==} + /@amityco/ts-sdk@6.23.0: + resolution: {integrity: sha512-0wLdz4h8hojNcM7WFpgk/sGCbe3ir+lCHu9+yxmSckMoK18/vOq7jSZNHCkElM99smqtU8R5+EoLurQTSW45Gw==} engines: {node: '>=12', npm: '>=6'} dependencies: agentkeepalive: 4.5.0 diff --git a/src/core/providers/UiKitProvider/index.tsx b/src/core/providers/UiKitProvider/index.tsx index ca56d683e..3dad3d09c 100644 --- a/src/core/providers/UiKitProvider/index.tsx +++ b/src/core/providers/UiKitProvider/index.tsx @@ -46,6 +46,7 @@ interface UiKitProviderProps { onEditCommunity?: (communityId: string, options?: { tab?: string }) => void; onEditUser?: (userId: string) => void; onMessageUser?: (userId: string) => void; + onBack?: () => void; }; socialCommunityCreationButtonVisible?: boolean; onConnectionStatusChange?: (state: Amity.SessionStates) => void; @@ -98,20 +99,20 @@ const UiKitProvider = ({ setClient(ascClient); } -await ASCClient.login( - { userId, displayName, authToken }, - { - sessionWillRenewAccessToken(renewal) { - // secure mode - if (authToken) { - renewal.renewWithAuthToken(authToken); - return; - } + await ASCClient.login( + { userId, displayName, authToken }, + { + sessionWillRenewAccessToken(renewal) { + // secure mode + if (authToken) { + renewal.renewWithAuthToken(authToken); + return; + } - renewal.renew(); - }, + renewal.renew(); }, - ); + }, + ); setIsConnected(true); if (stateChangeRef.current == null) { diff --git a/src/social/hooks/useFeed.ts b/src/social/hooks/useFeed.ts index f58089db9..3a22d9e92 100644 --- a/src/social/hooks/useFeed.ts +++ b/src/social/hooks/useFeed.ts @@ -22,6 +22,11 @@ const useFeed = () => { useEffect(() => { fetchMore(); + + return () => { + setItems([]); + setQueryToken(null); + }; }, []); const prependItem = (post: Amity.Post) => { diff --git a/src/social/providers/NavigationProvider.tsx b/src/social/providers/NavigationProvider.tsx index 271a51e25..e2bf1d385 100644 --- a/src/social/providers/NavigationProvider.tsx +++ b/src/social/providers/NavigationProvider.tsx @@ -138,6 +138,7 @@ interface NavigationProviderProps { onEditCommunity?: (communityId: string, options?: { tab?: string }) => void; onEditUser?: (userId: string) => void; onMessageUser?: (userId: string) => void; + onBack?: () => void; } export default function NavigationProvider({ @@ -151,6 +152,7 @@ export default function NavigationProvider({ onEditCommunity, onEditUser, onMessageUser, + onBack, }: NavigationProviderProps) { const [pages, setPages] = useState([ { type: PageTypes.NewsFeed, communityId: undefined }, @@ -327,6 +329,13 @@ export default function NavigationProvider({ [onChangePage, onMessageUser], ); + const handleBack = useCallback(() => { + if (onBack) { + onBack(); + } + popPage(); + }, [onChangePage, onBack, popPage]); + const handleClickStory = useCallback( (targetId, storyType, targetIds) => { const next = { @@ -356,7 +365,7 @@ export default function NavigationProvider({ onEditCommunity: handleEditCommunity, onEditUser: handleEditUser, onMessageUser: handleMessageUser, - onBack: popPage, + onBack: handleBack, setNavigationBlocker, }} > From acd2075614cf4af9826ce598308a1b1f45fa4b4b Mon Sep 17 00:00:00 2001 From: Bonn Date: Mon, 29 Apr 2024 18:19:35 +0700 Subject: [PATCH 60/88] chore(sdk): ASC-00000 - custom build ci (#316) * chore: custom build ci * chore: remove unused libs * chore: fix ci * chore: fix ci * fix: revert ci * fix: remove pnpm cache step * fix: pnpm install step * fix: ci * fix: add NPM_TOKEN * fix: update .npmrc * fix: update pnpm-lock.yaml * fix: path * chore: add cache step --- .github/workflows/dev.yaml | 25 + .npmrc | 3 +- package.json | 3 - pnpm-lock.yaml | 4697 +++++++++-------- .../ChatContainer/ChatReadyState.tsx | 4 +- 5 files changed, 2441 insertions(+), 2291 deletions(-) diff --git a/.github/workflows/dev.yaml b/.github/workflows/dev.yaml index dc41ee555..a361edb96 100644 --- a/.github/workflows/dev.yaml +++ b/.github/workflows/dev.yaml @@ -3,6 +3,9 @@ name: Dev release pipeline on: pull_request: +env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + jobs: sync_dev: runs-on: ubuntu-latest @@ -53,6 +56,28 @@ jobs: - name: build storybook run: pnpm run storybook:build + - name: get version + id: version + run: echo "current_version=$(node -p "require('./package.json').version")" >> $GITHUB_OUTPUT + + - name: increase version (pre-release) + run: pnpm standard-version --release-as ${{ steps.version.outputs.current_version }} --prerelease alpha.$(git rev-parse --short HEAD) --skip.changelog --skip.commit --skip.tag + + - name: unpublish old version + if: "contains(github.event.pull_request.title, '(sdk):')" + continue-on-error: true + run: | + prev=$(npm view @amityco/ui-kit dist-tags.dev/${{ github.event.pull_request.number }}) + [[ ! -z $prev ]] && npm unpublish @amityco/ui-kit@$prev + + - name: build + run: pnpm run build + + - name: publish on npm with dev dist-tag + if: "contains(github.event.pull_request.title, '(sdk):')" + continue-on-error: true + run: npm publish --tag dev/${{ github.event.pull_request.number }} + - name: publish on s3 uses: jakejarvis/s3-sync-action@master with: diff --git a/.npmrc b/.npmrc index 1a03e44e8..bd3327ab5 100644 --- a/.npmrc +++ b/.npmrc @@ -1,2 +1 @@ -@fortawesome:registry=https://npm.fontawesome.com/ -//npm.fontawesome.com/:_authToken=${NPM_FONT_AWESOME_TOKEN} +//registry.npmjs.org/:_authToken=${NPM_TOKEN} \ No newline at end of file diff --git a/package.json b/package.json index d6cac5f43..df1e21b43 100644 --- a/package.json +++ b/package.json @@ -40,9 +40,6 @@ }, "devDependencies": { "@amityco/ts-sdk": "^6.23.0", - "@fortawesome/pro-light-svg-icons": "^5.15.4", - "@fortawesome/pro-regular-svg-icons": "^5.15.4", - "@fortawesome/pro-solid-svg-icons": "^5.15.4", "@storybook/addon-a11y": "^7.6.7", "@storybook/addon-actions": "^7.6.7", "@storybook/addon-backgrounds": "^7.6.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8f77de438..c8f28b455 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,37 +7,37 @@ settings: dependencies: '@fortawesome/fontawesome-svg-core': specifier: ^1.2.36 - version: 1.2.36 + version: 1.3.0 '@fortawesome/free-solid-svg-icons': specifier: ^5.15.4 version: 5.15.4 '@fortawesome/react-fontawesome': specifier: ^0.2.0 - version: 0.2.0(@fortawesome/fontawesome-svg-core@1.2.36)(react@18.2.0) + version: 0.2.0(@fortawesome/fontawesome-svg-core@1.3.0)(react@18.3.1) '@hookform/error-message': specifier: ^2.0.1 - version: 2.0.1(react-dom@18.2.0)(react-hook-form@7.49.2)(react@18.2.0) + version: 2.0.1(react-dom@18.3.1)(react-hook-form@7.51.3)(react@18.3.1) '@hookform/resolvers': specifier: ^3.3.4 - version: 3.3.4(react-hook-form@7.49.2) + version: 3.3.4(react-hook-form@7.51.3) '@tanstack/react-query': specifier: ^5.28.14 - version: 5.28.14(react@18.2.0) + version: 5.32.0(react@18.3.1) clsx: specifier: ^2.1.0 - version: 2.1.0 + version: 2.1.1 extract-colors: specifier: ^4.0.2 - version: 4.0.2 + version: 4.0.4 filesize: specifier: ^9.0.11 version: 9.0.11 hls.js: specifier: ^1.4.14 - version: 1.4.14 + version: 1.5.8 linkify-react: specifier: ^4.1.3 - version: 4.1.3(linkifyjs@4.1.3)(react@18.2.0) + version: 4.1.3(linkifyjs@4.1.3)(react@18.3.1) linkifyjs: specifier: ^4.1.3 version: 4.1.3 @@ -52,114 +52,105 @@ dependencies: version: 4.3.1 react-hook-form: specifier: ^7.49.2 - version: 7.49.2(react@18.2.0) + version: 7.51.3(react@18.3.1) react-infinite-scroll-component: specifier: ^6.1.0 - version: 6.1.0(react@18.2.0) + version: 6.1.0(react@18.3.1) react-insta-stories: specifier: ^2.6.2 - version: 2.6.2(react@18.2.0) + version: 2.6.2(react@18.3.1) react-intl: specifier: ^6.5.5 - version: 6.5.5(react@18.2.0)(typescript@4.9.5) + version: 6.6.5(react@18.3.1)(typescript@4.9.5) react-loading-skeleton: specifier: ^3.3.1 - version: 3.3.1(react@18.2.0) + version: 3.4.0(react@18.3.1) react-mentions: specifier: ^4.4.10 - version: 4.4.10(react-dom@18.2.0)(react@18.2.0) + version: 4.4.10(react-dom@18.3.1)(react@18.3.1) react-modal-sheet: specifier: ^2.2.0 - version: 2.2.0(framer-motion@10.18.0)(react@18.2.0) + version: 2.2.0(framer-motion@11.1.7)(react@18.3.1) react-sizeme: specifier: ^3.0.2 version: 3.0.2 react-textarea-autosize: specifier: ^8.5.3 - version: 8.5.3(@types/react@17.0.74)(react@18.2.0) + version: 8.5.3(@types/react@17.0.80)(react@18.3.1) react-timeago: specifier: ^7.2.0 - version: 7.2.0(react@18.2.0) + version: 7.2.0(react@18.3.1) react-tiny-popover: specifier: ^7.2.4 - version: 7.2.4(react-dom@18.2.0)(react@18.2.0) + version: 7.2.4(react-dom@18.3.1)(react@18.3.1) react-truncate-markup: specifier: ^5.1.2 - version: 5.1.2(react@18.2.0) + version: 5.1.2(react@18.3.1) react-use: specifier: ^17.4.2 - version: 17.4.2(react-dom@18.2.0)(react@18.2.0) + version: 17.5.0(react-dom@18.3.1)(react@18.3.1) stylis: specifier: ^4.3.1 - version: 4.3.1 + version: 4.3.2 uuid: specifier: ^8.3.2 version: 8.3.2 zod: specifier: ^3.22.4 - version: 3.22.4 + version: 3.23.4 devDependencies: '@amityco/ts-sdk': specifier: ^6.23.0 version: 6.23.0 - '@fortawesome/pro-light-svg-icons': - specifier: ^5.15.4 - version: 5.15.4 - '@fortawesome/pro-regular-svg-icons': - specifier: ^5.15.4 - version: 5.15.4 - '@fortawesome/pro-solid-svg-icons': - specifier: ^5.15.4 - version: 5.15.4 '@storybook/addon-a11y': specifier: ^7.6.7 - version: 7.6.7 + version: 7.6.18 '@storybook/addon-actions': specifier: ^7.6.7 - version: 7.6.7 + version: 7.6.18 '@storybook/addon-backgrounds': specifier: ^7.6.7 - version: 7.6.7 + version: 7.6.18 '@storybook/addon-controls': specifier: ^7.6.7 - version: 7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) + version: 7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) '@storybook/addon-essentials': specifier: ^7.6.7 - version: 7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) + version: 7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) '@storybook/addon-toolbars': specifier: ^7.6.7 - version: 7.6.7 + version: 7.6.18 '@storybook/addon-viewport': specifier: ^7.6.7 - version: 7.6.7 + version: 7.6.18 '@storybook/client-api': specifier: ^7.6.7 - version: 7.6.7 + version: 7.6.17 '@storybook/preview-api': specifier: ^7.6.7 - version: 7.6.7 + version: 7.6.18 '@storybook/react': specifier: ^7.6.7 - version: 7.6.7(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5) + version: 7.6.18(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5) '@storybook/react-vite': specifier: ^7.6.7 - version: 7.6.7(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(vite@4.5.1) + version: 7.6.18(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)(vite@4.5.3) '@storybook/theming': specifier: ^7.6.7 - version: 7.6.7(react-dom@18.2.0)(react@18.2.0) + version: 7.6.18(react-dom@18.3.1)(react@18.3.1) '@types/jest': specifier: ^29.5.11 - version: 29.5.11 + version: 29.5.12 '@types/lodash': specifier: ^4.14.202 - version: 4.14.202 + version: 4.17.0 '@types/prop-types': specifier: ^15.7.11 - version: 15.7.11 + version: 15.7.12 '@types/react': specifier: ^17.0.74 - version: 17.0.74 + version: 17.0.80 '@types/react-helmet': specifier: ^6.1.11 version: 6.1.11 @@ -177,37 +168,37 @@ devDependencies: version: 5.1.34 '@types/uuid': specifier: ^9.0.7 - version: 9.0.7 + version: 9.0.8 '@typescript-eslint/eslint-plugin': specifier: ^6.18.0 - version: 6.18.0(@typescript-eslint/parser@6.18.0)(eslint@8.56.0)(typescript@4.9.5) + version: 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@4.9.5) '@typescript-eslint/parser': specifier: ^6.18.0 - version: 6.18.0(eslint@8.56.0)(typescript@4.9.5) + version: 6.21.0(eslint@8.57.0)(typescript@4.9.5) '@vitejs/plugin-react': specifier: ^4.2.1 - version: 4.2.1(vite@4.5.1) + version: 4.2.1(vite@4.5.3) autoprefixer: specifier: ^10.4.16 - version: 10.4.16(postcss@8.4.33) + version: 10.4.19(postcss@8.4.38) esbuild-plugin-replace: specifier: ^1.4.0 version: 1.4.0 eslint: specifier: ^8.56.0 - version: 8.56.0 + version: 8.57.0 eslint-config-prettier: specifier: ^9.1.0 - version: 9.1.0(eslint@8.56.0) + version: 9.1.0(eslint@8.57.0) eslint-import-resolver-typescript: specifier: ^3.6.1 - version: 3.6.1(@typescript-eslint/parser@6.18.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0) + version: 3.6.1(@typescript-eslint/parser@6.21.0)(eslint-plugin-import@2.29.1)(eslint@8.57.0) eslint-plugin-import: specifier: ^2.29.1 - version: 2.29.1(@typescript-eslint/parser@6.18.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0) + version: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) eslint-plugin-jest: specifier: ^27.6.1 - version: 27.6.1(@typescript-eslint/eslint-plugin@6.18.0)(eslint@8.56.0)(jest@29.7.0)(typescript@4.9.5) + version: 27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.0)(jest@29.7.0)(typescript@4.9.5) husky: specifier: ^8.0.3 version: 8.0.3 @@ -219,37 +210,37 @@ devDependencies: version: 13.3.0 postcss: specifier: ^8.4.33 - version: 8.4.33 + version: 8.4.38 prettier: specifier: 2.4.0 version: 2.4.0 react: specifier: ^18.2.0 - version: 18.2.0 + version: 18.3.1 react-dom: specifier: ^18.2.0 - version: 18.2.0(react@18.2.0) + version: 18.3.1(react@18.3.1) react-router-dom: specifier: ^6.21.1 - version: 6.21.1(react-dom@18.2.0)(react@18.2.0) + version: 6.23.0(react-dom@18.3.1)(react@18.3.1) standard-version: specifier: ^9.5.0 version: 9.5.0 storybook: specifier: ^7.6.7 - version: 7.6.7 + version: 7.6.18 styled-components: specifier: ^6.1.6 - version: 6.1.6(react-dom@18.2.0)(react@18.2.0) + version: 6.1.8(react-dom@18.3.1)(react@18.3.1) svg-url-loader: specifier: ^7.1.1 - version: 7.1.1(webpack@5.89.0) + version: 7.1.1(webpack@5.91.0) ts-jest: specifier: ^29.1.1 - version: 29.1.1(@babel/core@7.23.7)(esbuild@0.19.11)(jest@29.7.0)(typescript@4.9.5) + version: 29.1.2(@babel/core@7.24.4)(esbuild@0.19.12)(jest@29.7.0)(typescript@4.9.5) tsup: specifier: ^7.3.0 - version: 7.3.0(postcss@8.4.33)(typescript@4.9.5) + version: 7.3.0(postcss@8.4.38)(typescript@4.9.5) typescript: specifier: ^4.9.5 version: 4.9.5 @@ -258,18 +249,13 @@ devDependencies: version: 5.1.0(typescript@4.9.5) vite: specifier: ^4.5.1 - version: 4.5.1 + version: 4.5.3 vite-tsconfig-paths: specifier: ^4.2.3 - version: 4.2.3(typescript@4.9.5)(vite@4.5.1) + version: 4.3.2(typescript@4.9.5)(vite@4.5.3) packages: - /@aashutoshrathi/word-wrap@1.2.6: - resolution: {integrity: sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==} - engines: {node: '>=0.10.0'} - dev: true - /@adobe/css-tools@4.3.3: resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==} dev: true @@ -279,14 +265,14 @@ packages: engines: {node: '>=12', npm: '>=6'} dependencies: agentkeepalive: 4.5.0 - axios: 1.6.5(debug@4.3.4) + axios: 1.6.8(debug@4.3.4) debug: 4.3.4 - hls.js: 1.4.14 - js-base64: 3.7.5 + hls.js: 1.5.8 + js-base64: 3.7.7 mitt: 3.0.1 mqtt: 4.3.8 object-hash: 3.0.0 - react-native-uuid: 2.0.1 + react-native-uuid: 2.0.2 socket.io-client: 2.2.0 transitivePeerDependencies: - bufferutil @@ -294,12 +280,12 @@ packages: - utf-8-validate dev: true - /@ampproject/remapping@2.2.1: - resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==} + /@ampproject/remapping@2.3.0: + resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} engines: {node: '>=6.0.0'} dependencies: - '@jridgewell/gen-mapping': 0.3.3 - '@jridgewell/trace-mapping': 0.3.20 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 dev: true /@aw-web-design/x-default-browser@1.4.126: @@ -309,33 +295,33 @@ packages: default-browser-id: 3.0.0 dev: true - /@babel/code-frame@7.23.5: - resolution: {integrity: sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==} + /@babel/code-frame@7.24.2: + resolution: {integrity: sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/highlight': 7.23.4 - chalk: 2.4.2 + '@babel/highlight': 7.24.2 + picocolors: 1.0.0 dev: true - /@babel/compat-data@7.23.5: - resolution: {integrity: sha512-uU27kfDRlhfKl+w1U6vp16IuvSLtjAxdArVXPa9BvLkrr7CYIsxH5adpHObeAGY/41+syctUWOZ140a2Rvkgjw==} + /@babel/compat-data@7.24.4: + resolution: {integrity: sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==} engines: {node: '>=6.9.0'} dev: true - /@babel/core@7.23.7: - resolution: {integrity: sha512-+UpDgowcmqe36d4NwqvKsyPMlOLNGMsfMmQ5WGCu+siCe3t3dfe9njrzGfdN4qq+bcNUt0+Vw6haRxBOycs4dw==} + /@babel/core@7.24.4: + resolution: {integrity: sha512-MBVlMXP+kkl5394RBLSxxk/iLTeVGuXTV3cIDXavPpMMqnSnt6apKgan/U8O3USWZCWZT/TbgfEpKa4uMgN4Dg==} engines: {node: '>=6.9.0'} dependencies: - '@ampproject/remapping': 2.2.1 - '@babel/code-frame': 7.23.5 - '@babel/generator': 7.23.6 + '@ampproject/remapping': 2.3.0 + '@babel/code-frame': 7.24.2 + '@babel/generator': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.7) - '@babel/helpers': 7.23.7 - '@babel/parser': 7.23.6 - '@babel/template': 7.22.15 - '@babel/traverse': 7.23.7 - '@babel/types': 7.23.6 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4) + '@babel/helpers': 7.24.4 + '@babel/parser': 7.24.4 + '@babel/template': 7.24.0 + '@babel/traverse': 7.24.1 + '@babel/types': 7.24.0 convert-source-map: 2.0.0 debug: 4.3.4 gensync: 1.0.0-beta.2 @@ -345,13 +331,13 @@ packages: - supports-color dev: true - /@babel/generator@7.23.6: - resolution: {integrity: sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==} + /@babel/generator@7.24.4: + resolution: {integrity: sha512-Xd6+v6SnjWVx/nus+y0l1sxMOTOMBkyL4+BIdbALyatQnAe/SRVjANeDPSCYaX+i1iJmuGSKf3Z+E+V/va1Hvw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.6 - '@jridgewell/gen-mapping': 0.3.3 - '@jridgewell/trace-mapping': 0.3.20 + '@babel/types': 7.24.0 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 jsesc: 2.5.2 dev: true @@ -359,65 +345,65 @@ packages: resolution: {integrity: sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 dev: true /@babel/helper-builder-binary-assignment-operator-visitor@7.22.15: resolution: {integrity: sha512-QkBXwGgaoC2GtGZRoma6kv7Szfv06khvhFav67ZExau2RaXzy8MpHSMO2PNoP2XtmQphJQRHFfg77Bq731Yizw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 dev: true /@babel/helper-compilation-targets@7.23.6: resolution: {integrity: sha512-9JB548GZoQVmzrFgp8o7KxdgkTGm6xs9DW0o/Pim72UDjzr5ObUQ6ZzYPqA+g9OTS2bBQoctLJrky0RDCAWRgQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/compat-data': 7.23.5 + '@babel/compat-data': 7.24.4 '@babel/helper-validator-option': 7.23.5 - browserslist: 4.22.2 + browserslist: 4.23.0 lru-cache: 5.1.1 semver: 6.3.1 dev: true - /@babel/helper-create-class-features-plugin@7.23.7(@babel/core@7.23.7): - resolution: {integrity: sha512-xCoqR/8+BoNnXOY7RVSgv6X+o7pmT5q1d+gGcRlXYkI+9B31glE4jeejhKVpA04O1AtzOt7OSQ6VYKP5FcRl9g==} + /@babel/helper-create-class-features-plugin@7.24.4(@babel/core@7.24.4): + resolution: {integrity: sha512-lG75yeuUSVu0pIcbhiYMXBXANHrpUPaOfu7ryAzskCgKUHuAxRQI5ssrtmF0X9UXldPlvT0XM/A4F44OXRt6iQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-function-name': 7.23.0 '@babel/helper-member-expression-to-functions': 7.23.0 '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.7) + '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.4) '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 semver: 6.3.1 dev: true - /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.23.7): + /@babel/helper-create-regexp-features-plugin@7.22.15(@babel/core@7.24.4): resolution: {integrity: sha512-29FkPLFjn4TPEa3RE7GpW+qbE8tlsu3jntNYNfcGsc49LphF1PQIiD+vMZ1z1xVOKt+93khA9tc2JBs3kBjA7w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 regexpu-core: 5.3.2 semver: 6.3.1 dev: true - /@babel/helper-define-polyfill-provider@0.4.4(@babel/core@7.23.7): - resolution: {integrity: sha512-QcJMILQCu2jm5TFPGA3lCpJJTeEP+mqeXooG/NZbg/h5FTFi6V0+99ahlRsW8/kRLyb24LZVCCiclDedhLKcBA==} + /@babel/helper-define-polyfill-provider@0.6.2(@babel/core@7.24.4): + resolution: {integrity: sha512-LV76g+C502biUK6AyZ3LK10vDpDyCzZnhZFXkH1L75zHPj68+qc8Zfpx2th+gzwA2MzyK+1g/3EPl62yFnVttQ==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 debug: 4.3.4 lodash.debounce: 4.0.8 resolve: 1.22.8 @@ -434,40 +420,40 @@ packages: resolution: {integrity: sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/template': 7.22.15 - '@babel/types': 7.23.6 + '@babel/template': 7.24.0 + '@babel/types': 7.24.0 dev: true /@babel/helper-hoist-variables@7.22.5: resolution: {integrity: sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 dev: true /@babel/helper-member-expression-to-functions@7.23.0: resolution: {integrity: sha512-6gfrPwh7OuT6gZyJZvd6WbTfrqAo7vm4xCzAXOusKqq/vWdKXphTpj5klHKNmRUU6/QRGlBsyU9mAIPaWHlqJA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 dev: true - /@babel/helper-module-imports@7.22.15: - resolution: {integrity: sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==} + /@babel/helper-module-imports@7.24.3: + resolution: {integrity: sha512-viKb0F9f2s0BCS22QSF308z/+1YWKV/76mwt61NBzS5izMzDPwdq1pTrzf+Li3npBWX9KdQbkeCt1jSAM7lZqg==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 dev: true - /@babel/helper-module-transforms@7.23.3(@babel/core@7.23.7): + /@babel/helper-module-transforms@7.23.3(@babel/core@7.24.4): resolution: {integrity: sha512-7bBs4ED9OmswdfDzpz4MpWgSrV7FXlc3zIagvLFjS5H+Mk7Snr21vQ6QwrsoCGMfNC4e4LQPdoULEt4ykz0SRQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-module-imports': 7.22.15 + '@babel/helper-module-imports': 7.24.3 '@babel/helper-simple-access': 7.22.5 '@babel/helper-split-export-declaration': 7.22.6 '@babel/helper-validator-identifier': 7.22.20 @@ -477,33 +463,33 @@ packages: resolution: {integrity: sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 dev: true - /@babel/helper-plugin-utils@7.22.5: - resolution: {integrity: sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==} + /@babel/helper-plugin-utils@7.24.0: + resolution: {integrity: sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==} engines: {node: '>=6.9.0'} dev: true - /@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.23.7): + /@babel/helper-remap-async-to-generator@7.22.20(@babel/core@7.24.4): resolution: {integrity: sha512-pBGyV4uBqOns+0UvhsTO8qgl8hO89PmiDYv+/COyp1aeMcmfrfruz+/nCMFiYyFF/Knn0yfrC85ZzNFjembFTw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-wrap-function': 7.22.20 dev: true - /@babel/helper-replace-supers@7.22.20(@babel/core@7.23.7): - resolution: {integrity: sha512-qsW0In3dbwQUbK8kejJ4R7IHVGwHJlV6lpG6UA7a9hSa2YEiAib+N1T2kr6PEeUT+Fl7najmSOS6SmAwCHK6Tw==} + /@babel/helper-replace-supers@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-QCR1UqC9BzG5vZl8BMicmZ28RuUBnHhAMddD8yHFHDRH9lLTZ9uUPehX8ctVPT8l0TKblJidqcgUUKGVrePleQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-member-expression-to-functions': 7.23.0 '@babel/helper-optimise-call-expression': 7.22.5 @@ -513,25 +499,25 @@ packages: resolution: {integrity: sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 dev: true /@babel/helper-skip-transparent-expression-wrappers@7.22.5: resolution: {integrity: sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 dev: true /@babel/helper-split-export-declaration@7.22.6: resolution: {integrity: sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==} engines: {node: '>=6.9.0'} dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 dev: true - /@babel/helper-string-parser@7.23.4: - resolution: {integrity: sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==} + /@babel/helper-string-parser@7.24.1: + resolution: {integrity: sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==} engines: {node: '>=6.9.0'} dev: true @@ -550,1000 +536,1011 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/helper-function-name': 7.23.0 - '@babel/template': 7.22.15 - '@babel/types': 7.23.6 + '@babel/template': 7.24.0 + '@babel/types': 7.24.0 dev: true - /@babel/helpers@7.23.7: - resolution: {integrity: sha512-6AMnjCoC8wjqBzDHkuqpa7jAKwvMo4dC+lr/TFBz+ucfulO1XMpDnwWPGBNwClOKZ8h6xn5N81W/R5OrcKtCbQ==} + /@babel/helpers@7.24.4: + resolution: {integrity: sha512-FewdlZbSiwaVGlgT1DPANDuCHaDMiOo+D/IDYRFYjHOuv66xMSJ7fQwwODwRNAPkADIO/z1EoF/l2BCWlWABDw==} engines: {node: '>=6.9.0'} dependencies: - '@babel/template': 7.22.15 - '@babel/traverse': 7.23.7 - '@babel/types': 7.23.6 + '@babel/template': 7.24.0 + '@babel/traverse': 7.24.1 + '@babel/types': 7.24.0 transitivePeerDependencies: - supports-color dev: true - /@babel/highlight@7.23.4: - resolution: {integrity: sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==} + /@babel/highlight@7.24.2: + resolution: {integrity: sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==} engines: {node: '>=6.9.0'} dependencies: '@babel/helper-validator-identifier': 7.22.20 chalk: 2.4.2 js-tokens: 4.0.0 + picocolors: 1.0.0 dev: true - /@babel/parser@7.23.6: - resolution: {integrity: sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==} + /@babel/parser@7.24.4: + resolution: {integrity: sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==} engines: {node: '>=6.0.0'} hasBin: true dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 + dev: true + + /@babel/plugin-bugfix-firefox-class-in-computed-class-key@7.24.4(@babel/core@7.24.4): + resolution: {integrity: sha512-qpl6vOOEEzTLLcsuqYYo8yDtrTocmu2xkGvgNebvPjT9DTtfFYGmgDqY+rBYXNlqL4s9qLDn6xkrJv4RxAPiTA==} + engines: {node: '>=6.9.0'} + peerDependencies: + '@babel/core': ^7.0.0 + dependencies: + '@babel/core': 7.24.4 + '@babel/helper-environment-visitor': 7.22.20 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-iRkKcCqb7iGnq9+3G6rZ+Ciz5VywC4XNRHe57lKM+jOeYAoR0lVqdeeDRfh0tQcTfw/+vBhHn926FmQhLtlFLQ==} + /@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-y4HqEnkelJIOQGd+3g1bTeKsA5c6qM7eOn7VggGVbBc0y8MLSKHacwcIE2PplNlQSj0PqS9rrXL/nkPVK+kUNg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-WwlxbfMNdVEpQjZmK5mhm7oSwD3dS6eU+Iwsi4Knl9wAletWem7kaRsGOG+8UEbRyqxY4SS5zvtfXwX+jMxUwQ==} + /@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-Hj791Ii4ci8HqnaKHAlLNs+zaLXb0EzSDhiAWp5VNlyvCNymYfacs64pxTxbH1znW/NcArSmwpmG9IKE/TUVVQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.13.0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.7) + '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.4) dev: true - /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.23.7(@babel/core@7.23.7): - resolution: {integrity: sha512-LlRT7HgaifEpQA1ZgLVOIJZZFVPWN5iReq/7/JixwBtwcoeVGDBD53ZV28rrsLYOZs1Y/EHhA8N/Z6aazHR8cw==} + /@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-m9m/fXsXLiHfwdgydIFnpk+7jlVbnvlK5B2EKiPdLUb6WX654ZaaEWJUjk8TftRbZpK0XibovlLWX4KIZhV6jw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.23.7): + /@babel/plugin-proposal-private-property-in-object@7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.4): resolution: {integrity: sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 dev: true - /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.23.7): + /@babel/plugin-syntax-async-generators@7.8.4(@babel/core@7.24.4): resolution: {integrity: sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.23.7): + /@babel/plugin-syntax-bigint@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-wnTnFlG+YxQm3vDxpGE57Pj0srRU4sHE/mDkt1qv2YJJSeUAec2ma4WLUnUPeKjyrfntVwe/N6dCXpU+zL3Npg==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.23.7): + /@babel/plugin-syntax-class-properties@7.12.13(@babel/core@7.24.4): resolution: {integrity: sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.23.7): + /@babel/plugin-syntax-class-static-block@7.14.5(@babel/core@7.24.4): resolution: {integrity: sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.23.7): + /@babel/plugin-syntax-dynamic-import@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.23.7): + /@babel/plugin-syntax-export-namespace-from@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-flow@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-YZiAIpkJAwQXBJLIQbRFayR5c+gJ35Vcz3bg954k7cd73zqjvhacJuL9RbrzPz8qPmZdgqP6EUKwy0PCNhaaPA==} + /@babel/plugin-syntax-flow@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-sxi2kLTI5DeW5vDtMUsk4mTPwvlUDbjOnoWayhynCwrw4QXRld4QEYwqzY8JmQXaJUtgUuCIurtSRH5sn4c7mA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-import-assertions@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-lPgDSU+SJLK3xmFDTV2ZRQAiM7UuUjGidwBywFavObCiZc1BeAAcMtHJKUya92hPHO+at63JJPLygilZard8jw==} + /@babel/plugin-syntax-import-assertions@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-IuwnI5XnuF189t91XbxmXeCDz3qs6iDRO7GJ++wcfgeXNs/8FmIlKcpDSXNVyuLQxlwvskmI3Ct73wUODkJBlQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-import-attributes@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-pawnE0P9g10xgoP7yKr6CK63K2FMsTE+FZidZO/1PwRdzmAPVs+HS1mAURUsgaoxammTJvULUdIkEK0gOcU2tA==} + /@babel/plugin-syntax-import-attributes@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-zhQTMH0X2nVLnb04tz+s7AMuasX8U0FnpE+nHTOhSOINjWMnopoZTxtIKsd45n4GQ/HIZLyfIpoul8e2m0DnRA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.23.7): + /@babel/plugin-syntax-import-meta@7.10.4(@babel/core@7.24.4): resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.23.7): + /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-jsx@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==} + /@babel/plugin-syntax-jsx@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-2eCtxZXf+kbkMIsXS4poTvT4Yu5rXiRa+9xGVT56raghjmBTKMpFNc9R4IDiB4emao9eO22Ox7CxuJG7BgExqA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.23.7): + /@babel/plugin-syntax-logical-assignment-operators@7.10.4(@babel/core@7.24.4): resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.23.7): + /@babel/plugin-syntax-nullish-coalescing-operator@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.23.7): + /@babel/plugin-syntax-numeric-separator@7.10.4(@babel/core@7.24.4): resolution: {integrity: sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.23.7): + /@babel/plugin-syntax-object-rest-spread@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.23.7): + /@babel/plugin-syntax-optional-catch-binding@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.23.7): + /@babel/plugin-syntax-optional-chaining@7.8.3(@babel/core@7.24.4): resolution: {integrity: sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.23.7): + /@babel/plugin-syntax-private-property-in-object@7.14.5(@babel/core@7.24.4): resolution: {integrity: sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.23.7): + /@babel/plugin-syntax-top-level-await@7.14.5(@babel/core@7.24.4): resolution: {integrity: sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-typescript@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-9EiNjVJOMwCO+43TqoTrgQ8jMwcAd0sWyXi9RPfIsLTj4R2MADDDQXELhffaUx/uJv2AYcxBgPwH6j4TIA4ytQ==} + /@babel/plugin-syntax-typescript@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-Yhnmvy5HZEnHUty6i++gcfH1/l68AHnItFHnaCv6hn9dNh0hQvvQJsxpi4BMBFN5DLeHBuucT/0DgzXif/OyRw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.23.7): + /@babel/plugin-syntax-unicode-sets-regex@7.18.6(@babel/core@7.24.4): resolution: {integrity: sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-arrow-functions@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-NzQcQrzaQPkaEwoTm4Mhyl8jI1huEL/WWIEvudjTCMJ9aBZNpsJbMASx7EQECtQQPS/DcnFpo0FIh3LvEO9cxQ==} + /@babel/plugin-transform-arrow-functions@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-ngT/3NkRhsaep9ck9uj2Xhv9+xB1zShY3tM3g6om4xxCELwCDN4g4Aq5dRn48+0hasAql7s2hdBOysCfNpr4fw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-async-generator-functions@7.23.7(@babel/core@7.23.7): - resolution: {integrity: sha512-PdxEpL71bJp1byMG0va5gwQcXHxuEYC/BgI/e88mGTtohbZN28O5Yit0Plkkm/dBzCF/BxmbNcses1RH1T+urA==} + /@babel/plugin-transform-async-generator-functions@7.24.3(@babel/core@7.24.4): + resolution: {integrity: sha512-Qe26CMYVjpQxJ8zxM1340JFNjZaF+ISWpr1Kt/jGo+ZTUzKkfw/pphEWbRCb+lmSM6k/TOgfYLvmbHkUQ0asIg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-environment-visitor': 7.22.20 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.7) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.7) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.4) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-async-to-generator@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-A7LFsKi4U4fomjqXJlZg/u0ft/n8/7n7lpffUP/ZULx/DtV9SGlNKZolHH6PE8Xl1ngCc0M11OaeZptXVkfKSw==} + /@babel/plugin-transform-async-to-generator@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-AawPptitRXp1y0n4ilKcGbRYWfbbzFWz2NqNu7dacYDtFtz0CMjG64b3LQsb3KIgnf4/obcUL78hfaOS7iCUfw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-module-imports': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-module-imports': 7.24.3 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/helper-remap-async-to-generator': 7.22.20(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-block-scoped-functions@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-vI+0sIaPIO6CNuM9Kk5VmXcMVRiOpDh7w2zZt9GXzmE/9KD70CUEVhvPR/etAeNK/FAEkhxQtXOzVF3EuRL41A==} + /@babel/plugin-transform-block-scoped-functions@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-TWWC18OShZutrv9C6mye1xwtam+uNi2bnTOCBUd5sZxyHOiWbU6ztSROofIMrK84uweEZC219POICK/sTYwfgg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-block-scoping@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-0QqbP6B6HOh7/8iNR4CQU2Th/bbRtBp4KS9vcaZd1fZ0wSh5Fyssg0UCIHwxh+ka+pNDREbVLQnHCMHKZfPwfw==} + /@babel/plugin-transform-block-scoping@7.24.4(@babel/core@7.24.4): + resolution: {integrity: sha512-nIFUZIpGKDf9O9ttyRXpHFpKC+X3Y5mtshZONuEUYBomAKoM4y029Jr+uB1bHGPhNmK8YXHevDtKDOLmtRrp6g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-class-properties@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-uM+AN8yCIjDPccsKGlw271xjJtGii+xQIF/uMPS8H15L12jZTsLfF4o5vNO7d/oUguOyfdikHGc/yi9ge4SGIg==} + /@babel/plugin-transform-class-properties@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-OMLCXi0NqvJfORTaPQBwqLXHhb93wkBKZ4aNwMl6WtehO7ar+cmp+89iPEQPqxAnxsOKTaMcs3POz3rKayJ72g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-create-class-features-plugin': 7.23.7(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-class-static-block@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-nsWu/1M+ggti1SOALj3hfx5FXzAY06fwPJsUZD4/A5e1bWi46VUIWtD+kOX6/IdhXGsXBWllLFDSnqSCdUNydQ==} + /@babel/plugin-transform-class-static-block@7.24.4(@babel/core@7.24.4): + resolution: {integrity: sha512-B8q7Pz870Hz/q9UgP8InNpY01CSLDSCyqX7zcRuv3FcPl87A2G17lASroHWaCtbdIcbYzOZ7kWmXFKbijMSmFg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.12.0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-create-class-features-plugin': 7.23.7(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-classes@7.23.5(@babel/core@7.23.7): - resolution: {integrity: sha512-jvOTR4nicqYC9yzOHIhXG5emiFEOpappSJAl73SDSEDcybD+Puuze8Tnpb9p9qEyYup24tq891gkaygIFvWDqg==} + /@babel/plugin-transform-classes@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-ZTIe3W7UejJd3/3R4p7ScyyOoafetUShSf4kCqV0O7F/RiHxVj/wRaRnQlrGwflvcehNA8M42HkAiEDYZu2F1Q==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 '@babel/helper-compilation-targets': 7.23.6 '@babel/helper-environment-visitor': 7.22.20 '@babel/helper-function-name': 7.23.0 - '@babel/helper-optimise-call-expression': 7.22.5 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.7) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.4) '@babel/helper-split-export-declaration': 7.22.6 globals: 11.12.0 dev: true - /@babel/plugin-transform-computed-properties@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-dTj83UVTLw/+nbiHqQSFdwO9CbTtwq1DsDqm3CUEtDrZNET5rT5E6bIdTlOftDTDLMYxvxHNEYO4B9SLl8SLZw==} + /@babel/plugin-transform-computed-properties@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-5pJGVIUfJpOS+pAqBQd+QMaTD2vCL/HcePooON6pDpHgRp4gNRmzyHTPIkXntwKsq3ayUFVfJaIKPw2pOkOcTw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/template': 7.22.15 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/template': 7.24.0 dev: true - /@babel/plugin-transform-destructuring@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-n225npDqjDIr967cMScVKHXJs7rout1q+tt50inyBCPkyZ8KxeI6d+GIbSBTT/w/9WdlWDOej3V9HE5Lgk57gw==} + /@babel/plugin-transform-destructuring@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-ow8jciWqNxR3RYbSNVuF4U2Jx130nwnBnhRw6N6h1bOejNkABmcI5X5oz29K4alWX7vf1C+o6gtKXikzRKkVdw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-dotall-regex@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-vgnFYDHAKzFaTVp+mneDsIEbnJ2Np/9ng9iviHw3P/KVcgONxpNULEW/51Z/BaFojG2GI2GwwXck5uV1+1NOYQ==} + /@babel/plugin-transform-dotall-regex@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-p7uUxgSoZwZ2lPNMzUkqCts3xlp8n+o05ikjy7gbtFJSt9gdU88jAmtfmOxHM14noQXBxfgzf2yRWECiNVhTCw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-duplicate-keys@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-RrqQ+BQmU3Oyav3J+7/myfvRCq7Tbz+kKLLshUmMwNlDHExbGL7ARhajvoBJEvc+fCguPPu887N+3RRXBVKZUA==} + /@babel/plugin-transform-duplicate-keys@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-msyzuUnvsjsaSaocV6L7ErfNsa5nDWL1XKNnDePLgmz+WdU4w/J8+AxBMrWfi9m4IxfL5sZQKUPQKDQeeAT6lA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-dynamic-import@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-V6jIbLhdJK86MaLh4Jpghi8ho5fGzt3imHOBu/x0jlBaPYqDoWz4RDXjmMOfnh+JWNaQleEAByZLV0QzBT4YQQ==} + /@babel/plugin-transform-dynamic-import@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-av2gdSTyXcJVdI+8aFZsCAtR29xJt0S5tas+Ef8NvBNmD1a+N/3ecMLeMBgfcK+xzsjdLDT6oHt+DFPyeqUbDA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-exponentiation-operator@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-5fhCsl1odX96u7ILKHBj4/Y8vipoqwsJMh4csSA8qFfxrZDEA4Ssku2DyNvMJSmZNOEBT750LfFPbtrnTP90BQ==} + /@babel/plugin-transform-exponentiation-operator@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-U1yX13dVBSwS23DEAqU+Z/PkwE9/m7QQy8Y9/+Tdb8UWYaGNDYwTLi19wqIAiROr8sXVum9A/rtiH5H0boUcTw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-builder-binary-assignment-operator-visitor': 7.22.15 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-export-namespace-from@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-GzuSBcKkx62dGzZI1WVgTWvkkz84FZO5TC5T8dl/Tht/rAla6Dg/Mz9Yhypg+ezVACf/rgDuQt3kbWEv7LdUDQ==} + /@babel/plugin-transform-export-namespace-from@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-Ft38m/KFOyzKw2UaJFkWG9QnHPG/Q/2SkOrRk4pNBPg5IPZ+dOxcmkK5IyuBcxiNPyyYowPGUReyBvrvZs7IlQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-flow-strip-types@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-26/pQTf9nQSNVJCrLB1IkHUKyPxR+lMrH2QDPG89+Znu9rAMbtrybdbWeE9bb7gzjmE5iXHEY+e0HUwM6Co93Q==} + /@babel/plugin-transform-flow-strip-types@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-iIYPIWt3dUmUKKE10s3W+jsQ3icFkw0JyRVyY1B7G4yK/nngAOHLVx8xlhA6b/Jzl/Y0nis8gjqhqKtRDQqHWQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-flow': 7.23.3(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-flow': 7.24.1(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-for-of@7.23.6(@babel/core@7.23.7): - resolution: {integrity: sha512-aYH4ytZ0qSuBbpfhuofbg/e96oQ7U2w1Aw/UQmKT+1l39uEhUPoFS3fHevDc1G0OvewyDudfMKY1OulczHzWIw==} + /@babel/plugin-transform-for-of@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-OxBdcnF04bpdQdR3i4giHZNZQn7cm8RQKcSwA17wAAqEELo1ZOwp5FFgeptWUQXFyT9kwHo10aqqauYkRZPCAg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 dev: true - /@babel/plugin-transform-function-name@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-I1QXp1LxIvt8yLaib49dRW5Okt7Q4oaxao6tFVKS/anCdEOMtYwWVKoiOA1p34GOWIZjUK0E+zCp7+l1pfQyiw==} + /@babel/plugin-transform-function-name@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-BXmDZpPlh7jwicKArQASrj8n22/w6iymRnvHYYd2zO30DbE277JO20/7yXJT3QxDPtiQiOxQBbZH4TpivNXIxA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 '@babel/helper-function-name': 7.23.0 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-json-strings@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-81nTOqM1dMwZ/aRXQ59zVubN9wHGqk6UtqRK+/q+ciXmRy8fSolhGVvG09HHRGo4l6fr/c4ZhXUQH0uFW7PZbg==} + /@babel/plugin-transform-json-strings@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-U7RMFmRvoasscrIFy5xA4gIp8iWnWubnKkKuUGJjsuOH7GfbMkB+XZzeslx2kLdEGdOJDamEmCqOks6e8nv8DQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-literals@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-wZ0PIXRxnwZvl9AYpqNUxpZ5BiTGrYt7kueGQ+N5FiQ7RCOD4cm8iShd6S6ggfVIWaJf2EMk8eRzAh52RfP4rQ==} + /@babel/plugin-transform-literals@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-zn9pwz8U7nCqOYIiBaOxoQOtYmMODXTJnkxG4AtX8fPmnCRYWBOHD0qcpwS9e2VDSp1zNJYpdnFMIKb8jmwu6g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-logical-assignment-operators@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-Mc/ALf1rmZTP4JKKEhUwiORU+vcfarFVLfcFiolKUo6sewoxSEgl36ak5t+4WamRsNr6nzjZXQjM35WsU+9vbg==} + /@babel/plugin-transform-logical-assignment-operators@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-OhN6J4Bpz+hIBqItTeWJujDOfNP+unqv/NJgyhlpSqgBTPm37KkMmZV6SYcOj+pnDbdcl1qRGV/ZiIjX9Iy34w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-member-expression-literals@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-sC3LdDBDi5x96LA+Ytekz2ZPk8i/Ck+DEuDbRAll5rknJ5XRTSaPKEYwomLcs1AA8wg9b3KjIQRsnApj+q51Ag==} + /@babel/plugin-transform-member-expression-literals@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-4ojai0KysTWXzHseJKa1XPNXKRbuUrhkOPY4rEGeR+7ChlJVKxFa3H3Bz+7tWaGKgJAXUWKOGmltN+u9B3+CVg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-modules-amd@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-vJYQGxeKM4t8hYCKVBlZX/gtIY2I7mRGFNcm85sgXGMTBcoV3QdVtdpbcWEbzbfUIUZKwvgFT82mRvaQIebZzw==} + /@babel/plugin-transform-modules-amd@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-lAxNHi4HVtjnHd5Rxg3D5t99Xm6H7b04hUS7EHIXcUl2EV4yl1gWdqZrNzXnSrHveL9qMdbODlLF55mvgjAfaQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-modules-commonjs@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-aVS0F65LKsdNOtcz6FRCpE4OgsP2OFnW46qNxNIX9h3wuzaNcSQsJysuMwqSibC98HPrf2vCgtxKNwS0DAlgcA==} + /@babel/plugin-transform-modules-commonjs@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-szog8fFTUxBfw0b98gEWPaEqF42ZUD/T3bkynW/wtgx2p/XCP55WEsb+VosKceRSd6njipdZvNogqdtI4Q0chw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-simple-access': 7.22.5 dev: true - /@babel/plugin-transform-modules-systemjs@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-ZxyKGTkF9xT9YJuKQRo19ewf3pXpopuYQd8cDXqNzc3mUNbOME0RKMoZxviQk74hwzfQsEe66dE92MaZbdHKNQ==} + /@babel/plugin-transform-modules-systemjs@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-mqQ3Zh9vFO1Tpmlt8QPnbwGHzNz3lpNEMxQb1kAemn/erstyqw1r9KeOlOfo3y6xAnFEcOv2tSyrXfmMk+/YZA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-hoist-variables': 7.22.5 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-identifier': 7.22.20 dev: true - /@babel/plugin-transform-modules-umd@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-zHsy9iXX2nIsCBFPud3jKn1IRPWg3Ing1qOZgeKV39m1ZgIdpJqvlWVeiHBZC6ITRG0MfskhYe9cLgntfSFPIg==} + /@babel/plugin-transform-modules-umd@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-tuA3lpPj+5ITfcCluy6nWonSL7RvaG0AOTeAuvXqEKS34lnLzXpDb0dcP6K8jD0zWZFNDVly90AGFJPnm4fOYg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-module-transforms': 7.23.3(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-module-transforms': 7.23.3(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.23.7): + /@babel/plugin-transform-named-capturing-groups-regex@7.22.5(@babel/core@7.24.4): resolution: {integrity: sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-new-target@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-YJ3xKqtJMAT5/TIZnpAR3I+K+WaDowYbN3xyxI8zxx/Gsypwf9B9h0VB+1Nh6ACAAPRS5NSRje0uVv5i79HYGQ==} + /@babel/plugin-transform-new-target@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-/rurytBM34hYy0HKZQyA0nHbQgQNFm4Q/BOc9Hflxi2X3twRof7NaE5W46j4kQitm7SvACVRXsa6N/tSZxvPug==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-nullish-coalescing-operator@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-jHE9EVVqHKAQx+VePv5LLGHjmHSJR76vawFPTdlxR/LVJPfOEGxREQwQfjuZEOPTwG92X3LINSh3M40Rv4zpVA==} + /@babel/plugin-transform-nullish-coalescing-operator@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-iQ+caew8wRrhCikO5DrUYx0mrmdhkaELgFa+7baMcVuhxIkN7oxt06CZ51D65ugIb1UWRQ8oQe+HXAVM6qHFjw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-numeric-separator@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-mps6auzgwjRrwKEZA05cOwuDc9FAzoyFS4ZsG/8F43bTLf/TgkJg7QXOrPO1JO599iA3qgK9MXdMGOEC8O1h6Q==} + /@babel/plugin-transform-numeric-separator@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-7GAsGlK4cNL2OExJH1DzmDeKnRv/LXq0eLUSvudrehVA5Rgg4bIrqEUW29FbKMBRT0ztSqisv7kjP+XIC4ZMNw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-object-rest-spread@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-9x9K1YyeQVw0iOXJlIzwm8ltobIIv7j2iLyP2jIhEbqPRQ7ScNgwQufU2I0Gq11VjyG4gI4yMXt2VFags+1N3g==} + /@babel/plugin-transform-object-rest-spread@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-XjD5f0YqOtebto4HGISLNfiNMTTs6tbkFf2TOqJlYKYmbo+mN9Dnpl4SRoofiziuOWMIyq3sZEUqLo3hLITFEA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.7) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-object-super@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-BwQ8q0x2JG+3lxCVFohg+KbQM7plfpBwThdW9A6TMtWwLsbDA01Ek2Zb/AgDN39BiZsExm4qrXxjk+P1/fzGrA==} + /@babel/plugin-transform-object-super@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-oKJqR3TeI5hSLRxudMjFQ9re9fBVUU0GICqM3J1mi8MqlhVr6hC/ZN4ttAyMuQR6EZZIY6h/exe5swqGNNIkWQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/helper-replace-supers': 7.22.20(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/helper-replace-supers': 7.24.1(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-optional-catch-binding@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-XIq8t0rJPHf6Wvmbn9nFxU6ao4c7WhghTR5WyV8SrJfUFzyxhCm4nhC+iAp3HFhbAKLfYpgzhJ6t4XCtVwqO5A==} + /@babel/plugin-transform-optional-catch-binding@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-oBTH7oURV4Y+3EUrf6cWn1OHio3qG/PVwO5J03iSJmBg6m2EhKjkAu/xuaXaYwWW9miYtvbWv4LNf0AmR43LUA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-optional-chaining@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-ZU8y5zWOfjM5vZ+asjgAPwDaBjJzgufjES89Rs4Lpq63O300R/kOz30WCLo6BxxX6QVEilwSlpClnG5cZaikTA==} + /@babel/plugin-transform-optional-chaining@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-n03wmDt+987qXwAgcBlnUUivrZBPZ8z1plL0YvgQalLm+ZE5BMhGm94jhxXtA1wzv1Cu2aaOv1BM9vbVttrzSg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.7) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-parameters@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-09lMt6UsUb3/34BbECKVbVwrT9bO6lILWln237z7sLaWnMsTi7Yc9fhX5DLpkJzAGfaReXI22wP41SZmnAA3Vw==} + /@babel/plugin-transform-parameters@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-8Jl6V24g+Uw5OGPeWNKrKqXPDw2YDjLc53ojwfMcKwlEoETKU9rU0mHUtcg9JntWI/QYzGAXNWEcVHZ+fR+XXg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-private-methods@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-UzqRcRtWsDMTLrRWFvUBDwmw06tCQH9Rl1uAjfh6ijMSmGYQ+fpdB+cnqRC8EMh5tuuxSv0/TejGL+7vyj+50g==} + /@babel/plugin-transform-private-methods@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-tGvisebwBO5em4PaYNqt4fkw56K2VALsAbAakY0FjTYqJp7gfdrgr7YX76Or8/cpik0W6+tj3rZ0uHU9Oil4tw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-create-class-features-plugin': 7.23.7(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-private-property-in-object@7.23.4(@babel/core@7.23.7): - resolution: {integrity: sha512-9G3K1YqTq3F4Vt88Djx1UZ79PDyj+yKRnUy7cZGSMe+a7jkwD259uKKuUzQlPkGam7R+8RJwh5z4xO27fA1o2A==} + /@babel/plugin-transform-private-property-in-object@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-pTHxDVa0BpUbvAgX3Gat+7cSciXqUcY9j2VZKTbSB6+VQGpNgNO9ailxTGHSXlqOnX1Hcx1Enme2+yv7VqP9bg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.23.7(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.7) + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-property-literals@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-jR3Jn3y7cZp4oEWPFAlRsSWjxKe4PZILGBSd4nis1TsC5qeSpb+nrtihJuDhNI7QHiVbUaiXa0X2RZY3/TI6Nw==} + /@babel/plugin-transform-property-literals@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-LetvD7CrHmEx0G442gOomRr66d7q8HzzGGr4PMHGr+5YIm6++Yke+jxj246rpvsbyhJwCLxcTn6zW1P1BSenqA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-react-jsx-self@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-qXRvbeKDSfwnlJnanVRp0SfuWE5DQhwQr5xtLBzp56Wabyo+4CMosF6Kfp+eOD/4FYpql64XVJ2W0pVLlJZxOQ==} + /@babel/plugin-transform-react-jsx-self@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-kDJgnPujTmAZ/9q2CN4m2/lRsUUPDvsG3+tSHWUJIzMGTt5U/b/fwWd3RO3n+5mjLrsBrVa5eKFRVSQbi3dF1w==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-react-jsx-source@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-91RS0MDnAWDNvGC6Wio5XYkyWI39FMFO+JK9+4AlgaTH+yWwVTsw7/sn6LK0lH7c5F+TFkpv/3LfCJ1Ydwof/g==} + /@babel/plugin-transform-react-jsx-source@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-1v202n7aUq4uXAieRTKcwPzNyphlCuqHHDcdSNc+vdhoTEZcFMh+L5yZuCmGaIO7bs1nJUNfHB89TZyoL48xNA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-regenerator@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-KP+75h0KghBMcVpuKisx3XTu9Ncut8Q8TuvGO4IhY+9D5DFEckQefOuIsB/gQ2tG71lCke4NMrtIPS8pOj18BQ==} + /@babel/plugin-transform-regenerator@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-sJwZBCzIBE4t+5Q4IGLaaun5ExVMRY0lYwos/jNecjMrVCygCdph3IKv0tkP5Fc87e/1+bebAmEAGBfnRD+cnw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 regenerator-transform: 0.15.2 dev: true - /@babel/plugin-transform-reserved-words@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-QnNTazY54YqgGxwIexMZva9gqbPa15t/x9VS+0fsEFWplwVpXYZivtgl43Z1vMpc1bdPP2PP8siFeVcnFvA3Cg==} + /@babel/plugin-transform-reserved-words@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-JAclqStUfIwKN15HrsQADFgeZt+wexNQ0uLhuqvqAUFoqPMjEcFCYZBhq0LUdz6dZK/mD+rErhW71fbx8RYElg==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-shorthand-properties@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-ED2fgqZLmexWiN+YNFX26fx4gh5qHDhn1O2gvEhreLW2iI63Sqm4llRLCXALKrCnbN4Jy0VcMQZl/SAzqug/jg==} + /@babel/plugin-transform-shorthand-properties@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-LyjVB1nsJ6gTTUKRjRWx9C1s9hE7dLfP/knKdrfeH9UPtAGjYGgxIbFfx7xyLIEWs7Xe1Gnf8EWiUqfjLhInZA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-spread@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-VvfVYlrlBVu+77xVTOAoxQ6mZbnIq5FM0aGBSFEcIh03qHf+zNqA4DC/3XMUozTg7bZV3e3mZQ0i13VB6v5yUg==} + /@babel/plugin-transform-spread@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-KjmcIM+fxgY+KxPVbjelJC6hrH1CgtPmTvdXAfn3/a9CnWGSTY7nH4zm5+cjmWJybdcPSsD0++QssDsjcpe47g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-skip-transparent-expression-wrappers': 7.22.5 dev: true - /@babel/plugin-transform-sticky-regex@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-HZOyN9g+rtvnOU3Yh7kSxXrKbzgrm5X4GncPY1QOquu7epga5MxKHVpYu2hvQnry/H+JjckSYRb93iNfsioAGg==} + /@babel/plugin-transform-sticky-regex@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-9v0f1bRXgPVcPrngOQvLXeGNNVLc8UjMVfebo9ka0WF3/7+aVUHmaJVT3sa0XCzEFioPfPHZiOcYG9qOsH63cw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-template-literals@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-Flok06AYNp7GV2oJPZZcP9vZdszev6vPBkHLwxwSpaIqx75wn6mUd3UFWsSsA0l8nXAKkyCmL/sR02m8RYGeHg==} + /@babel/plugin-transform-template-literals@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-WRkhROsNzriarqECASCNu/nojeXCDTE/F2HmRgOzi7NGvyfYGq1NEjKBK3ckLfRgGc6/lPAqP0vDOSw3YtG34g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-typeof-symbol@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-4t15ViVnaFdrPC74be1gXBSMzXk3B4Us9lP7uLRQHTFpV5Dvt33pn+2MyyNxmN3VTTm3oTrZVMUmuw3oBnQ2oQ==} + /@babel/plugin-transform-typeof-symbol@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-CBfU4l/A+KruSUoW+vTQthwcAdwuqbpRNB8HQKlZABwHRhsdHZ9fezp4Sn18PeAlYxTNiLMlx4xUBV3AWfg1BA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-typescript@7.23.6(@babel/core@7.23.7): - resolution: {integrity: sha512-6cBG5mBvUu4VUD04OHKnYzbuHNP8huDsD3EDqqpIpsswTDoqHCjLoHb6+QgsV1WsT2nipRqCPgxD3LXnEO7XfA==} + /@babel/plugin-transform-typescript@7.24.4(@babel/core@7.24.4): + resolution: {integrity: sha512-79t3CQ8+oBGk/80SQ8MN3Bs3obf83zJ0YZjDmDaEZN8MqhMI760apl5z6a20kFeMXBwJX99VpKT8CKxEBp5H1g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@babel/helper-annotate-as-pure': 7.22.5 - '@babel/helper-create-class-features-plugin': 7.23.7(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 - '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.7) + '@babel/helper-create-class-features-plugin': 7.24.4(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 + '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.4) dev: true - /@babel/plugin-transform-unicode-escapes@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-OMCUx/bU6ChE3r4+ZdylEqAjaQgHAgipgW8nsCfu5pGqDcFytVd91AwRvUJSBZDz0exPGgnjoqhgRYLRjFZc9Q==} + /@babel/plugin-transform-unicode-escapes@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-RlkVIcWT4TLI96zM660S877E7beKlQw7Ig+wqkKBiWfj0zH5Q4h50q6er4wzZKRNSYpfo6ILJ+hrJAGSX2qcNw==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-unicode-property-regex@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-KcLIm+pDZkWZQAFJ9pdfmh89EwVfmNovFBcXko8szpBeF8z68kWIPeKlmSOkT9BXJxs2C0uk+5LxoxIv62MROA==} + /@babel/plugin-transform-unicode-property-regex@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-Ss4VvlfYV5huWApFsF8/Sq0oXnGO+jB+rijFEFugTd3cwSObUSnUi88djgR5528Csl0uKlrI331kRqe56Ov2Ng==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-unicode-regex@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-wMHpNA4x2cIA32b/ci3AfwNgheiva2W0WUKWTK7vBHBhDKfPsc5cFGNWm69WBqpwd86u1qwZ9PWevKqm1A3yAw==} + /@babel/plugin-transform-unicode-regex@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-2A/94wgZgxfTsiLaQ2E36XAOdcZmGAaEEgVmxQWwZXWkGhvoHbaqXcKnU8zny4ycpu3vNqg0L/PcCiYtHtA13g==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/plugin-transform-unicode-sets-regex@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-W7lliA/v9bNR83Qc3q1ip9CQMZ09CcHDbHfbLRDNuAhn1Mvkr1ZNF7hPmztMQvtTGVLJ9m8IZqWsTkXOml8dbw==} + /@babel/plugin-transform-unicode-sets-regex@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-fqj4WuzzS+ukpgerpAoOnMfQXwUHFxXUZUE84oL2Kao2N8uSlvcpnAidKASgsNgzZHBsHWvcm8s9FPWUhAb8fA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.23.7) - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-create-regexp-features-plugin': 7.22.15(@babel/core@7.24.4) + '@babel/helper-plugin-utils': 7.24.0 dev: true - /@babel/preset-env@7.23.7(@babel/core@7.23.7): - resolution: {integrity: sha512-SY27X/GtTz/L4UryMNJ6p4fH4nsgWbz84y9FE0bQeWJP6O5BhgVCt53CotQKHCOeXJel8VyhlhujhlltKms/CA==} + /@babel/preset-env@7.24.4(@babel/core@7.24.4): + resolution: {integrity: sha512-7Kl6cSmYkak0FK/FXjSEnLJ1N9T/WA2RkMhu17gZ/dsxKJUuTYNIylahPTzqpLyJN4WhDif8X0XK1R8Wsguo/A==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.7 + '@babel/compat-data': 7.24.4 + '@babel/core': 7.24.4 '@babel/helper-compilation-targets': 7.23.6 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.23.7(@babel/core@7.23.7) - '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.23.7) - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.7) - '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.23.7) - '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.23.7) - '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-import-assertions': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-syntax-import-attributes': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.7) - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.7) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.7) - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.23.7) - '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.23.7) - '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.23.7) - '@babel/plugin-transform-arrow-functions': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-async-generator-functions': 7.23.7(@babel/core@7.23.7) - '@babel/plugin-transform-async-to-generator': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-block-scoped-functions': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-block-scoping': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-class-properties': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-class-static-block': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-classes': 7.23.5(@babel/core@7.23.7) - '@babel/plugin-transform-computed-properties': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-destructuring': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-dotall-regex': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-duplicate-keys': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-dynamic-import': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-exponentiation-operator': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-export-namespace-from': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-for-of': 7.23.6(@babel/core@7.23.7) - '@babel/plugin-transform-function-name': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-json-strings': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-literals': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-logical-assignment-operators': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-member-expression-literals': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-modules-amd': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-modules-systemjs': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-modules-umd': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.23.7) - '@babel/plugin-transform-new-target': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-nullish-coalescing-operator': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-numeric-separator': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-object-rest-spread': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-object-super': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-optional-catch-binding': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-parameters': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-private-methods': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-private-property-in-object': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-property-literals': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-regenerator': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-reserved-words': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-shorthand-properties': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-spread': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-sticky-regex': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-template-literals': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-typeof-symbol': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-unicode-escapes': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-unicode-property-regex': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-unicode-regex': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-unicode-sets-regex': 7.23.3(@babel/core@7.23.7) - '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.23.7) - babel-plugin-polyfill-corejs2: 0.4.7(@babel/core@7.23.7) - babel-plugin-polyfill-corejs3: 0.8.7(@babel/core@7.23.7) - babel-plugin-polyfill-regenerator: 0.5.4(@babel/core@7.23.7) - core-js-compat: 3.35.0 + '@babel/plugin-bugfix-firefox-class-in-computed-class-key': 7.24.4(@babel/core@7.24.4) + '@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-proposal-private-property-in-object': 7.21.0-placeholder-for-preset-env.2(@babel/core@7.24.4) + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.4) + '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.4) + '@babel/plugin-syntax-class-static-block': 7.14.5(@babel/core@7.24.4) + '@babel/plugin-syntax-dynamic-import': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-export-namespace-from': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-import-assertions': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-syntax-import-attributes': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.4) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.4) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.4) + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-private-property-in-object': 7.14.5(@babel/core@7.24.4) + '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.4) + '@babel/plugin-syntax-unicode-sets-regex': 7.18.6(@babel/core@7.24.4) + '@babel/plugin-transform-arrow-functions': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-async-generator-functions': 7.24.3(@babel/core@7.24.4) + '@babel/plugin-transform-async-to-generator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-block-scoped-functions': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-block-scoping': 7.24.4(@babel/core@7.24.4) + '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-class-static-block': 7.24.4(@babel/core@7.24.4) + '@babel/plugin-transform-classes': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-computed-properties': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-destructuring': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-dotall-regex': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-duplicate-keys': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-dynamic-import': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-exponentiation-operator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-export-namespace-from': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-for-of': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-function-name': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-json-strings': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-literals': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-logical-assignment-operators': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-member-expression-literals': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-amd': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-systemjs': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-umd': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-named-capturing-groups-regex': 7.22.5(@babel/core@7.24.4) + '@babel/plugin-transform-new-target': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-numeric-separator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-object-rest-spread': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-object-super': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-optional-catch-binding': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-parameters': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-private-property-in-object': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-property-literals': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-regenerator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-reserved-words': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-shorthand-properties': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-spread': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-sticky-regex': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-template-literals': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-typeof-symbol': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-unicode-escapes': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-unicode-property-regex': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-unicode-regex': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-unicode-sets-regex': 7.24.1(@babel/core@7.24.4) + '@babel/preset-modules': 0.1.6-no-external-plugins(@babel/core@7.24.4) + babel-plugin-polyfill-corejs2: 0.4.11(@babel/core@7.24.4) + babel-plugin-polyfill-corejs3: 0.10.4(@babel/core@7.24.4) + babel-plugin-polyfill-regenerator: 0.6.2(@babel/core@7.24.4) + core-js-compat: 3.37.0 semver: 6.3.1 transitivePeerDependencies: - supports-color dev: true - /@babel/preset-flow@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-7yn6hl8RIv+KNk6iIrGZ+D06VhVY35wLVf23Cz/mMu1zOr7u4MMP4j0nZ9tLf8+4ZFpnib8cFYgB/oYg9hfswA==} + /@babel/preset-flow@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-sWCV2G9pcqZf+JHyv/RyqEIpFypxdCSxWIxQjpdaQxenNog7cN1pr76hg8u0Fz8Qgg0H4ETkGcJnXL8d4j0PPA==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-transform-flow-strip-types': 7.23.3(@babel/core@7.23.7) + '@babel/plugin-transform-flow-strip-types': 7.24.1(@babel/core@7.24.4) dev: true - /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.23.7): + /@babel/preset-modules@0.1.6-no-external-plugins(@babel/core@7.24.4): resolution: {integrity: sha512-HrcgcIESLm9aIR842yhJ5RWan/gebQUJ6E/E5+rf0y9o6oj7w0Br+sWuL6kEQ/o/AdfvR1Je9jG18/gnpwjEyA==} peerDependencies: '@babel/core': ^7.0.0-0 || ^8.0.0-0 <8.0.0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 - '@babel/types': 7.23.6 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 + '@babel/types': 7.24.0 esutils: 2.0.3 dev: true - /@babel/preset-typescript@7.23.3(@babel/core@7.23.7): - resolution: {integrity: sha512-17oIGVlqz6CchO9RFYn5U6ZpWRZIngayYCtrPRSgANSwC2V1Jb+iP74nVxzzXJte8b8BYxrL1yY96xfhTBrNNQ==} + /@babel/preset-typescript@7.24.1(@babel/core@7.24.4): + resolution: {integrity: sha512-1DBaMmRDpuYQBPWD8Pf/WEwCrtgRHxsZnP4mIy9G/X+hFfbI47Q2G4t1Paakld84+qsk2fSsUPMKg71jkoOOaQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-plugin-utils': 7.22.5 + '@babel/core': 7.24.4 + '@babel/helper-plugin-utils': 7.24.0 '@babel/helper-validator-option': 7.23.5 - '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.7) + '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-typescript': 7.24.4(@babel/core@7.24.4) dev: true - /@babel/register@7.23.7(@babel/core@7.23.7): + /@babel/register@7.23.7(@babel/core@7.24.4): resolution: {integrity: sha512-EjJeB6+kvpk+Y5DAkEAmbOBEFkh9OASx0huoEkqYTFxAZHzOAX2Oh5uwAUuL2rUddqfM0SA+KPXV2TbzoZ2kvQ==} engines: {node: '>=6.9.0'} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 clone-deep: 4.0.1 find-cache-dir: 2.1.0 make-dir: 2.1.0 @@ -1555,8 +1552,8 @@ packages: resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==} dev: true - /@babel/runtime@7.23.7: - resolution: {integrity: sha512-w06OXVOFso7LcbzMiDGt+3X7Rh7Ho8MmgPoWU3rarH+8upf+wSU/grlGbWzQyr3DkdN6ZeuMFjpdwW0Q+HxobA==} + /@babel/runtime@7.24.4: + resolution: {integrity: sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==} engines: {node: '>=6.9.0'} dependencies: regenerator-runtime: 0.14.1 @@ -1567,38 +1564,38 @@ packages: regenerator-runtime: 0.13.11 dev: false - /@babel/template@7.22.15: - resolution: {integrity: sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==} + /@babel/template@7.24.0: + resolution: {integrity: sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.23.5 - '@babel/parser': 7.23.6 - '@babel/types': 7.23.6 + '@babel/code-frame': 7.24.2 + '@babel/parser': 7.24.4 + '@babel/types': 7.24.0 dev: true - /@babel/traverse@7.23.7: - resolution: {integrity: sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==} + /@babel/traverse@7.24.1: + resolution: {integrity: sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==} engines: {node: '>=6.9.0'} dependencies: - '@babel/code-frame': 7.23.5 - '@babel/generator': 7.23.6 + '@babel/code-frame': 7.24.2 + '@babel/generator': 7.24.4 '@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.6 - '@babel/types': 7.23.6 + '@babel/parser': 7.24.4 + '@babel/types': 7.24.0 debug: 4.3.4 globals: 11.12.0 transitivePeerDependencies: - supports-color dev: true - /@babel/types@7.23.6: - resolution: {integrity: sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==} + /@babel/types@7.24.0: + resolution: {integrity: sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==} engines: {node: '>=6.9.0'} dependencies: - '@babel/helper-string-parser': 7.23.4 + '@babel/helper-string-parser': 7.24.1 '@babel/helper-validator-identifier': 7.22.20 to-fast-properties: 2.0.0 dev: true @@ -1623,26 +1620,12 @@ packages: engines: {node: '>=10.0.0'} dev: true - /@emotion/is-prop-valid@0.8.8: - resolution: {integrity: sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==} - requiresBuild: true - dependencies: - '@emotion/memoize': 0.7.4 - dev: false - optional: true - /@emotion/is-prop-valid@1.2.1: resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==} dependencies: '@emotion/memoize': 0.8.1 dev: true - /@emotion/memoize@0.7.4: - resolution: {integrity: sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==} - requiresBuild: true - dev: false - optional: true - /@emotion/memoize@0.8.1: resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==} dev: true @@ -1651,16 +1634,16 @@ packages: resolution: {integrity: sha512-VINS5vEYAscRl2ZUDiT3uMPlrFQupiKgHz5AA4bCH1miKBg4qtwkim1qPmJj/4WG6TreYMY111rEFsjupcOKHw==} dev: true - /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0): + /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.3.1): resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==} peerDependencies: react: '>=16.8.0' dependencies: - react: 18.2.0 + react: 18.3.1 dev: true - /@esbuild/aix-ppc64@0.19.11: - resolution: {integrity: sha512-FnzU0LyE3ySQk7UntJO4+qIiQgI7KoODnZg5xzXIrFJlKd2P2gwHsHY4927xj9y5PJmJSzULiUCWmv7iWnNa7g==} + /@esbuild/aix-ppc64@0.19.12: + resolution: {integrity: sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==} engines: {node: '>=12'} cpu: [ppc64] os: [aix] @@ -1677,8 +1660,8 @@ packages: dev: true optional: true - /@esbuild/android-arm64@0.19.11: - resolution: {integrity: sha512-aiu7K/5JnLj//KOnOfEZ0D90obUkRzDMyqd/wNAUQ34m4YUPVhRZpnqKV9uqDGxT7cToSDnIHsGooyIczu9T+Q==} + /@esbuild/android-arm64@0.19.12: + resolution: {integrity: sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==} engines: {node: '>=12'} cpu: [arm64] os: [android] @@ -1695,8 +1678,8 @@ packages: dev: true optional: true - /@esbuild/android-arm@0.19.11: - resolution: {integrity: sha512-5OVapq0ClabvKvQ58Bws8+wkLCV+Rxg7tUVbo9xu034Nm536QTII4YzhaFriQ7rMrorfnFKUsArD2lqKbFY4vw==} + /@esbuild/android-arm@0.19.12: + resolution: {integrity: sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==} engines: {node: '>=12'} cpu: [arm] os: [android] @@ -1713,8 +1696,8 @@ packages: dev: true optional: true - /@esbuild/android-x64@0.19.11: - resolution: {integrity: sha512-eccxjlfGw43WYoY9QgB82SgGgDbibcqyDTlk3l3C0jOVHKxrjdc9CTwDUQd0vkvYg5um0OH+GpxYvp39r+IPOg==} + /@esbuild/android-x64@0.19.12: + resolution: {integrity: sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==} engines: {node: '>=12'} cpu: [x64] os: [android] @@ -1731,8 +1714,8 @@ packages: dev: true optional: true - /@esbuild/darwin-arm64@0.19.11: - resolution: {integrity: sha512-ETp87DRWuSt9KdDVkqSoKoLFHYTrkyz2+65fj9nfXsaV3bMhTCjtQfw3y+um88vGRKRiF7erPrh/ZuIdLUIVxQ==} + /@esbuild/darwin-arm64@0.19.12: + resolution: {integrity: sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==} engines: {node: '>=12'} cpu: [arm64] os: [darwin] @@ -1749,8 +1732,8 @@ packages: dev: true optional: true - /@esbuild/darwin-x64@0.19.11: - resolution: {integrity: sha512-fkFUiS6IUK9WYUO/+22omwetaSNl5/A8giXvQlcinLIjVkxwTLSktbF5f/kJMftM2MJp9+fXqZ5ezS7+SALp4g==} + /@esbuild/darwin-x64@0.19.12: + resolution: {integrity: sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==} engines: {node: '>=12'} cpu: [x64] os: [darwin] @@ -1767,8 +1750,8 @@ packages: dev: true optional: true - /@esbuild/freebsd-arm64@0.19.11: - resolution: {integrity: sha512-lhoSp5K6bxKRNdXUtHoNc5HhbXVCS8V0iZmDvyWvYq9S5WSfTIHU2UGjcGt7UeS6iEYp9eeymIl5mJBn0yiuxA==} + /@esbuild/freebsd-arm64@0.19.12: + resolution: {integrity: sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==} engines: {node: '>=12'} cpu: [arm64] os: [freebsd] @@ -1785,8 +1768,8 @@ packages: dev: true optional: true - /@esbuild/freebsd-x64@0.19.11: - resolution: {integrity: sha512-JkUqn44AffGXitVI6/AbQdoYAq0TEullFdqcMY/PCUZ36xJ9ZJRtQabzMA+Vi7r78+25ZIBosLTOKnUXBSi1Kw==} + /@esbuild/freebsd-x64@0.19.12: + resolution: {integrity: sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==} engines: {node: '>=12'} cpu: [x64] os: [freebsd] @@ -1803,8 +1786,8 @@ packages: dev: true optional: true - /@esbuild/linux-arm64@0.19.11: - resolution: {integrity: sha512-LneLg3ypEeveBSMuoa0kwMpCGmpu8XQUh+mL8XXwoYZ6Be2qBnVtcDI5azSvh7vioMDhoJFZzp9GWp9IWpYoUg==} + /@esbuild/linux-arm64@0.19.12: + resolution: {integrity: sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==} engines: {node: '>=12'} cpu: [arm64] os: [linux] @@ -1821,8 +1804,8 @@ packages: dev: true optional: true - /@esbuild/linux-arm@0.19.11: - resolution: {integrity: sha512-3CRkr9+vCV2XJbjwgzjPtO8T0SZUmRZla+UL1jw+XqHZPkPgZiyWvbDvl9rqAN8Zl7qJF0O/9ycMtjU67HN9/Q==} + /@esbuild/linux-arm@0.19.12: + resolution: {integrity: sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==} engines: {node: '>=12'} cpu: [arm] os: [linux] @@ -1839,8 +1822,8 @@ packages: dev: true optional: true - /@esbuild/linux-ia32@0.19.11: - resolution: {integrity: sha512-caHy++CsD8Bgq2V5CodbJjFPEiDPq8JJmBdeyZ8GWVQMjRD0sU548nNdwPNvKjVpamYYVL40AORekgfIubwHoA==} + /@esbuild/linux-ia32@0.19.12: + resolution: {integrity: sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==} engines: {node: '>=12'} cpu: [ia32] os: [linux] @@ -1857,8 +1840,8 @@ packages: dev: true optional: true - /@esbuild/linux-loong64@0.19.11: - resolution: {integrity: sha512-ppZSSLVpPrwHccvC6nQVZaSHlFsvCQyjnvirnVjbKSHuE5N24Yl8F3UwYUUR1UEPaFObGD2tSvVKbvR+uT1Nrg==} + /@esbuild/linux-loong64@0.19.12: + resolution: {integrity: sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==} engines: {node: '>=12'} cpu: [loong64] os: [linux] @@ -1875,8 +1858,8 @@ packages: dev: true optional: true - /@esbuild/linux-mips64el@0.19.11: - resolution: {integrity: sha512-B5x9j0OgjG+v1dF2DkH34lr+7Gmv0kzX6/V0afF41FkPMMqaQ77pH7CrhWeR22aEeHKaeZVtZ6yFwlxOKPVFyg==} + /@esbuild/linux-mips64el@0.19.12: + resolution: {integrity: sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==} engines: {node: '>=12'} cpu: [mips64el] os: [linux] @@ -1893,8 +1876,8 @@ packages: dev: true optional: true - /@esbuild/linux-ppc64@0.19.11: - resolution: {integrity: sha512-MHrZYLeCG8vXblMetWyttkdVRjQlQUb/oMgBNurVEnhj4YWOr4G5lmBfZjHYQHHN0g6yDmCAQRR8MUHldvvRDA==} + /@esbuild/linux-ppc64@0.19.12: + resolution: {integrity: sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==} engines: {node: '>=12'} cpu: [ppc64] os: [linux] @@ -1911,8 +1894,8 @@ packages: dev: true optional: true - /@esbuild/linux-riscv64@0.19.11: - resolution: {integrity: sha512-f3DY++t94uVg141dozDu4CCUkYW+09rWtaWfnb3bqe4w5NqmZd6nPVBm+qbz7WaHZCoqXqHz5p6CM6qv3qnSSQ==} + /@esbuild/linux-riscv64@0.19.12: + resolution: {integrity: sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==} engines: {node: '>=12'} cpu: [riscv64] os: [linux] @@ -1929,8 +1912,8 @@ packages: dev: true optional: true - /@esbuild/linux-s390x@0.19.11: - resolution: {integrity: sha512-A5xdUoyWJHMMlcSMcPGVLzYzpcY8QP1RtYzX5/bS4dvjBGVxdhuiYyFwp7z74ocV7WDc0n1harxmpq2ePOjI0Q==} + /@esbuild/linux-s390x@0.19.12: + resolution: {integrity: sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==} engines: {node: '>=12'} cpu: [s390x] os: [linux] @@ -1947,8 +1930,8 @@ packages: dev: true optional: true - /@esbuild/linux-x64@0.19.11: - resolution: {integrity: sha512-grbyMlVCvJSfxFQUndw5mCtWs5LO1gUlwP4CDi4iJBbVpZcqLVT29FxgGuBJGSzyOxotFG4LoO5X+M1350zmPA==} + /@esbuild/linux-x64@0.19.12: + resolution: {integrity: sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==} engines: {node: '>=12'} cpu: [x64] os: [linux] @@ -1965,8 +1948,8 @@ packages: dev: true optional: true - /@esbuild/netbsd-x64@0.19.11: - resolution: {integrity: sha512-13jvrQZJc3P230OhU8xgwUnDeuC/9egsjTkXN49b3GcS5BKvJqZn86aGM8W9pd14Kd+u7HuFBMVtrNGhh6fHEQ==} + /@esbuild/netbsd-x64@0.19.12: + resolution: {integrity: sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==} engines: {node: '>=12'} cpu: [x64] os: [netbsd] @@ -1983,8 +1966,8 @@ packages: dev: true optional: true - /@esbuild/openbsd-x64@0.19.11: - resolution: {integrity: sha512-ysyOGZuTp6SNKPE11INDUeFVVQFrhcNDVUgSQVDzqsqX38DjhPEPATpid04LCoUr2WXhQTEZ8ct/EgJCUDpyNw==} + /@esbuild/openbsd-x64@0.19.12: + resolution: {integrity: sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==} engines: {node: '>=12'} cpu: [x64] os: [openbsd] @@ -2001,8 +1984,8 @@ packages: dev: true optional: true - /@esbuild/sunos-x64@0.19.11: - resolution: {integrity: sha512-Hf+Sad9nVwvtxy4DXCZQqLpgmRTQqyFyhT3bZ4F2XlJCjxGmRFF0Shwn9rzhOYRB61w9VMXUkxlBy56dk9JJiQ==} + /@esbuild/sunos-x64@0.19.12: + resolution: {integrity: sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==} engines: {node: '>=12'} cpu: [x64] os: [sunos] @@ -2019,8 +2002,8 @@ packages: dev: true optional: true - /@esbuild/win32-arm64@0.19.11: - resolution: {integrity: sha512-0P58Sbi0LctOMOQbpEOvOL44Ne0sqbS0XWHMvvrg6NE5jQ1xguCSSw9jQeUk2lfrXYsKDdOe6K+oZiwKPilYPQ==} + /@esbuild/win32-arm64@0.19.12: + resolution: {integrity: sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==} engines: {node: '>=12'} cpu: [arm64] os: [win32] @@ -2037,8 +2020,8 @@ packages: dev: true optional: true - /@esbuild/win32-ia32@0.19.11: - resolution: {integrity: sha512-6YOrWS+sDJDmshdBIQU+Uoyh7pQKrdykdefC1avn76ss5c+RN6gut3LZA4E2cH5xUEp5/cA0+YxRaVtRAb0xBg==} + /@esbuild/win32-ia32@0.19.12: + resolution: {integrity: sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==} engines: {node: '>=12'} cpu: [ia32] os: [win32] @@ -2055,8 +2038,8 @@ packages: dev: true optional: true - /@esbuild/win32-x64@0.19.11: - resolution: {integrity: sha512-vfkhltrjCAb603XaFhqhAF4LGDi2M4OrCRrFusyQ+iTLQ/o60QQXxc9cZC/FFpihBI9N1Grn6SMKVJ4KP7Fuiw==} + /@esbuild/win32-x64@0.19.12: + resolution: {integrity: sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==} engines: {node: '>=12'} cpu: [x64] os: [win32] @@ -2064,13 +2047,13 @@ packages: dev: true optional: true - /@eslint-community/eslint-utils@4.4.0(eslint@8.56.0): + /@eslint-community/eslint-utils@4.4.0(eslint@8.57.0): resolution: {integrity: sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || >=8.0.0 dependencies: - eslint: 8.56.0 + eslint: 8.57.0 eslint-visitor-keys: 3.4.3 dev: true @@ -2087,7 +2070,7 @@ packages: debug: 4.3.4 espree: 9.6.1 globals: 13.24.0 - ignore: 5.3.0 + ignore: 5.3.1 import-fresh: 3.3.0 js-yaml: 4.1.0 minimatch: 3.1.2 @@ -2096,8 +2079,8 @@ packages: - supports-color dev: true - /@eslint/js@8.56.0: - resolution: {integrity: sha512-gMsVel9D7f2HLkBma9VbtzZRehRogVRfbr++f06nL2vnCGCNlzOD+/MUov/F4p8myyAHspEhVobgjpX64q5m6A==} + /@eslint/js@8.57.0: + resolution: {integrity: sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true @@ -2105,38 +2088,38 @@ packages: resolution: {integrity: sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==} dev: true - /@floating-ui/core@1.5.3: - resolution: {integrity: sha512-O0WKDOo0yhJuugCx6trZQj5jVJ9yR0ystG2JaNAemYUWce+pmM6WUEFIibnWyEJKdrDxhm75NoSRME35FNaM/Q==} + /@floating-ui/core@1.6.1: + resolution: {integrity: sha512-42UH54oPZHPdRHdw6BgoBD6cg/eVTmVrFcgeRDM3jbO7uxSoipVcmcIGFcA5jmOHO5apcyvBhkSKES3fQJnu7A==} dependencies: - '@floating-ui/utils': 0.2.1 + '@floating-ui/utils': 0.2.2 dev: true - /@floating-ui/dom@1.5.4: - resolution: {integrity: sha512-jByEsHIY+eEdCjnTVu+E3ephzTOzkQ8hgUfGwos+bg7NlH33Zc5uO+QHz1mrQUOgIKKDD1RtS201P9NvAfq3XQ==} + /@floating-ui/dom@1.6.4: + resolution: {integrity: sha512-0G8R+zOvQsAG1pg2Q99P21jiqxqGBW1iRe/iXHsBRBxnpXKFI8QwbB4x5KmYLggNO5m34IQgOIu9SCRfR/WWiQ==} dependencies: - '@floating-ui/core': 1.5.3 - '@floating-ui/utils': 0.2.1 + '@floating-ui/core': 1.6.1 + '@floating-ui/utils': 0.2.2 dev: true - /@floating-ui/react-dom@2.0.5(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-UsBK30Bg+s6+nsgblXtZmwHhgS2vmbuQK22qgt2pTQM6M3X6H1+cQcLXqgRY3ihVLcZJE6IvqDQozhsnIVqK/Q==} + /@floating-ui/react-dom@2.0.9(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-q0umO0+LQK4+p6aGyvzASqKbKOJcAHJ7ycE9CuUvfx3s9zTHWmGJTPOIlM/hmSBfUfg/XfY5YhLBLR/LHwShQQ==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' dependencies: - '@floating-ui/dom': 1.5.4 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@floating-ui/dom': 1.6.4 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@floating-ui/utils@0.2.1: - resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==} + /@floating-ui/utils@0.2.2: + resolution: {integrity: sha512-J4yDIIthosAsRZ5CPYP/jQvUAQtlZTTD/4suA08/FEnlxqW3sKS9iAhgsa9VYLZ6vDHn/ixJgIqRQPotoBjxIw==} dev: true - /@formatjs/ecma402-abstract@1.18.0: - resolution: {integrity: sha512-PEVLoa3zBevWSCZzPIM/lvPCi8P5l4G+NXQMc/CjEiaCWgyHieUoo0nM7Bs0n/NbuQ6JpXEolivQ9pKSBHaDlA==} + /@formatjs/ecma402-abstract@1.18.2: + resolution: {integrity: sha512-+QoPW4csYALsQIl8GbN14igZzDbuwzcpWrku9nyMXlaqAlwRBgl5V+p0vWMGFqHOw37czNXaP/lEk4wbLgcmtA==} dependencies: - '@formatjs/intl-localematcher': 0.5.2 + '@formatjs/intl-localematcher': 0.5.4 tslib: 2.6.2 dev: false @@ -2146,142 +2129,127 @@ packages: tslib: 2.6.2 dev: false - /@formatjs/icu-messageformat-parser@2.7.3: - resolution: {integrity: sha512-X/jy10V9S/vW+qlplqhMUxR8wErQ0mmIYSq4mrjpjDl9mbuGcCILcI1SUYkL5nlM4PJqpc0KOS0bFkkJNPxYRw==} + /@formatjs/icu-messageformat-parser@2.7.6: + resolution: {integrity: sha512-etVau26po9+eewJKYoiBKP6743I1br0/Ie00Pb/S/PtmYfmjTcOn2YCh2yNkSZI12h6Rg+BOgQYborXk46BvkA==} dependencies: - '@formatjs/ecma402-abstract': 1.18.0 - '@formatjs/icu-skeleton-parser': 1.7.0 + '@formatjs/ecma402-abstract': 1.18.2 + '@formatjs/icu-skeleton-parser': 1.8.0 tslib: 2.6.2 dev: false - /@formatjs/icu-skeleton-parser@1.7.0: - resolution: {integrity: sha512-Cfdo/fgbZzpN/jlN/ptQVe0lRHora+8ezrEeg2RfrNjyp+YStwBy7cqDY8k5/z2LzXg6O0AdzAV91XS0zIWv+A==} + /@formatjs/icu-skeleton-parser@1.8.0: + resolution: {integrity: sha512-QWLAYvM0n8hv7Nq5BEs4LKIjevpVpbGLAJgOaYzg9wABEoX1j0JO1q2/jVkO6CVlq0dbsxZCngS5aXbysYueqA==} dependencies: - '@formatjs/ecma402-abstract': 1.18.0 + '@formatjs/ecma402-abstract': 1.18.2 tslib: 2.6.2 dev: false - /@formatjs/intl-displaynames@6.6.4: - resolution: {integrity: sha512-ET8KQ+L9Q0K8x1SnJQa4DNssUcbATlMopWqYvGGR8yAvw5qwAQc1fv+DshCoZNIE9pbcue0IGC4kWNAkWqlFag==} + /@formatjs/intl-displaynames@6.6.6: + resolution: {integrity: sha512-Dg5URSjx0uzF8VZXtHb6KYZ6LFEEhCbAbKoYChYHEOnMFTw/ZU3jIo/NrujzQD2EfKPgQzIq73LOUvW6Z/LpFA==} dependencies: - '@formatjs/ecma402-abstract': 1.18.0 - '@formatjs/intl-localematcher': 0.5.2 + '@formatjs/ecma402-abstract': 1.18.2 + '@formatjs/intl-localematcher': 0.5.4 tslib: 2.6.2 dev: false - /@formatjs/intl-listformat@7.5.3: - resolution: {integrity: sha512-l7EOr0Yh1m8KagytukB90yw81uyzrM7amKFrgxXqphz4KeSIL0KPa68lPsdtZ+JmQB73GaDQRwLOwUKFZ1VZPQ==} + /@formatjs/intl-listformat@7.5.5: + resolution: {integrity: sha512-XoI52qrU6aBGJC9KJddqnacuBbPlb/bXFN+lIFVFhQ1RnFHpzuFrlFdjD9am2O7ZSYsyqzYRpkVcXeT1GHkwDQ==} dependencies: - '@formatjs/ecma402-abstract': 1.18.0 - '@formatjs/intl-localematcher': 0.5.2 + '@formatjs/ecma402-abstract': 1.18.2 + '@formatjs/intl-localematcher': 0.5.4 tslib: 2.6.2 dev: false - /@formatjs/intl-localematcher@0.5.2: - resolution: {integrity: sha512-txaaE2fiBMagLrR4jYhxzFO6wEdEG4TPMqrzBAcbr4HFUYzH/YC+lg6OIzKCHm8WgDdyQevxbAAV1OgcXctuGw==} + /@formatjs/intl-localematcher@0.5.4: + resolution: {integrity: sha512-zTwEpWOzZ2CiKcB93BLngUX59hQkuZjT2+SAQEscSm52peDW/getsawMcWF1rGRpMCX6D7nSJA3CzJ8gn13N/g==} dependencies: tslib: 2.6.2 dev: false - /@formatjs/intl@2.9.9(typescript@4.9.5): - resolution: {integrity: sha512-JI3CNgL2Zdg5lv9ncT2sYKqbAj2RGrCbdzaCckIxMPxn4QuHuOVvYUGmBAXVusBmfG/0sxLmMrnwnBioz+QKdA==} + /@formatjs/intl@2.10.1(typescript@4.9.5): + resolution: {integrity: sha512-dsLG15U7xDi8yzKf4hcAWSsCaez3XrjTO2oaRHPyHtXLm1aEzYbDw6bClo/HMHu+iwS5GbDqT3DV+hYP2ylScg==} peerDependencies: - typescript: '5' + typescript: ^4.7 || 5 peerDependenciesMeta: typescript: optional: true dependencies: - '@formatjs/ecma402-abstract': 1.18.0 + '@formatjs/ecma402-abstract': 1.18.2 '@formatjs/fast-memoize': 2.2.0 - '@formatjs/icu-messageformat-parser': 2.7.3 - '@formatjs/intl-displaynames': 6.6.4 - '@formatjs/intl-listformat': 7.5.3 - intl-messageformat: 10.5.8 + '@formatjs/icu-messageformat-parser': 2.7.6 + '@formatjs/intl-displaynames': 6.6.6 + '@formatjs/intl-listformat': 7.5.5 + intl-messageformat: 10.5.11 tslib: 2.6.2 typescript: 4.9.5 dev: false /@fortawesome/fontawesome-common-types@0.2.36: - resolution: {integrity: sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==, tarball: https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.36/fontawesome-common-types-0.2.36.tgz} + resolution: {integrity: sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==} engines: {node: '>=6'} requiresBuild: true - - /@fortawesome/fontawesome-svg-core@1.2.36: - resolution: {integrity: sha512-YUcsLQKYb6DmaJjIHdDWpBIGCcyE/W+p/LMGvjQem55Mm2XWVAP5kWTMKWLv9lwpCVjpLxPyOMOyUocP1GxrtA==, tarball: https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.36/fontawesome-svg-core-1.2.36.tgz} - engines: {node: '>=6'} - requiresBuild: true - dependencies: - '@fortawesome/fontawesome-common-types': 0.2.36 dev: false - /@fortawesome/free-solid-svg-icons@5.15.4: - resolution: {integrity: sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==, tarball: https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/5.15.4/free-solid-svg-icons-5.15.4.tgz} + /@fortawesome/fontawesome-common-types@0.3.0: + resolution: {integrity: sha512-CA3MAZBTxVsF6SkfkHXDerkhcQs0QPofy43eFdbWJJkZiq3SfiaH1msOkac59rQaqto5EqWnASboY1dBuKen5w==} engines: {node: '>=6'} + deprecated: Please upgrade to 6.1.0. https://fontawesome.com/docs/changelog/ requiresBuild: true - dependencies: - '@fortawesome/fontawesome-common-types': 0.2.36 dev: false - /@fortawesome/pro-light-svg-icons@5.15.4: - resolution: {integrity: sha512-+Hk1YVmuk+1TYhbRTD4WhabQhWuK/DG8IVGO+iXM5A4OW1D6rHFHr8rt9JNc7iybXFQWY7HuCRPoVXdCm4YZ0A==, tarball: https://npm.fontawesome.com/@fortawesome/pro-light-svg-icons/-/5.15.4/pro-light-svg-icons-5.15.4.tgz} - engines: {node: '>=6'} - requiresBuild: true - dependencies: - '@fortawesome/fontawesome-common-types': 0.2.36 - dev: true - - /@fortawesome/pro-regular-svg-icons@5.15.4: - resolution: {integrity: sha512-LN9wOPIISKg3jZBbAuMm6YcsCiMRzTcpVkotLonRuzDmw0OLszUPCHZ6vB5hEnOC7g6IIOwOOnV12fW0V8IS9Q==, tarball: https://npm.fontawesome.com/@fortawesome/pro-regular-svg-icons/-/5.15.4/pro-regular-svg-icons-5.15.4.tgz} + /@fortawesome/fontawesome-svg-core@1.3.0: + resolution: {integrity: sha512-UIL6crBWhjTNQcONt96ExjUnKt1D68foe3xjEensLDclqQ6YagwCRYVQdrp/hW0ALRp/5Fv/VKw+MqTUWYYvPg==} engines: {node: '>=6'} + deprecated: Please upgrade to 6.1.0. https://fontawesome.com/docs/changelog/ requiresBuild: true dependencies: - '@fortawesome/fontawesome-common-types': 0.2.36 - dev: true + '@fortawesome/fontawesome-common-types': 0.3.0 + dev: false - /@fortawesome/pro-solid-svg-icons@5.15.4: - resolution: {integrity: sha512-ZlSg/RyAlwYJcsJlw2WfZSeOJ8GMKwIQ3ZY+GNFRZ+7pF+RRXxyZp2WIgUKhPK/M43SfSou6R6XdKZyz2xVVEQ==, tarball: https://npm.fontawesome.com/@fortawesome/pro-solid-svg-icons/-/5.15.4/pro-solid-svg-icons-5.15.4.tgz} + /@fortawesome/free-solid-svg-icons@5.15.4: + resolution: {integrity: sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==} engines: {node: '>=6'} requiresBuild: true dependencies: '@fortawesome/fontawesome-common-types': 0.2.36 - dev: true + dev: false - /@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@1.2.36)(react@18.2.0): - resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==, tarball: https://npm.fontawesome.com/@fortawesome/react-fontawesome/-/0.2.0/react-fontawesome-0.2.0.tgz} + /@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@1.3.0)(react@18.3.1): + resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==} peerDependencies: '@fortawesome/fontawesome-svg-core': ~1 || ~6 react: '>=16.3' dependencies: - '@fortawesome/fontawesome-svg-core': 1.2.36 + '@fortawesome/fontawesome-svg-core': 1.3.0 prop-types: 15.8.1 - react: 18.2.0 + react: 18.3.1 dev: false - /@hookform/error-message@2.0.1(react-dom@18.2.0)(react-hook-form@7.49.2)(react@18.2.0): + /@hookform/error-message@2.0.1(react-dom@18.3.1)(react-hook-form@7.51.3)(react@18.3.1): resolution: {integrity: sha512-U410sAr92xgxT1idlu9WWOVjndxLdgPUHEB8Schr27C9eh7/xUnITWpCMF93s+lGiG++D4JnbSnrb5A21AdSNg==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' react-hook-form: ^7.0.0 dependencies: - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-hook-form: 7.49.2(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-hook-form: 7.51.3(react@18.3.1) dev: false - /@hookform/resolvers@3.3.4(react-hook-form@7.49.2): + /@hookform/resolvers@3.3.4(react-hook-form@7.51.3): resolution: {integrity: sha512-o5cgpGOuJYrd+iMKvkttOclgwRW86EsWJZZRC23prf0uU2i48Htq4PuT73AVb9ionFyZrwYEITuOFGF+BydEtQ==} peerDependencies: react-hook-form: ^7.0.0 dependencies: - react-hook-form: 7.49.2(react@18.2.0) + react-hook-form: 7.51.3(react@18.3.1) dev: false - /@humanwhocodes/config-array@0.11.13: - resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==} + /@humanwhocodes/config-array@0.11.14: + resolution: {integrity: sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==} engines: {node: '>=10.10.0'} dependencies: - '@humanwhocodes/object-schema': 2.0.1 + '@humanwhocodes/object-schema': 2.0.3 debug: 4.3.4 minimatch: 3.1.2 transitivePeerDependencies: @@ -2293,8 +2261,8 @@ packages: engines: {node: '>=12.22'} dev: true - /@humanwhocodes/object-schema@2.0.1: - resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==} + /@humanwhocodes/object-schema@2.0.3: + resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==} dev: true /@hutson/parse-repository-url@3.0.2: @@ -2335,7 +2303,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 20.10.7 + '@types/node': 20.12.7 chalk: 4.1.2 jest-message-util: 29.7.0 jest-util: 29.7.0 @@ -2356,14 +2324,14 @@ packages: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.10.7 + '@types/node': 20.12.7 ansi-escapes: 4.3.2 chalk: 4.1.2 ci-info: 3.9.0 exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@20.10.7) + jest-config: 29.7.0(@types/node@20.12.7) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -2391,7 +2359,7 @@ packages: dependencies: '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.10.7 + '@types/node': 20.12.7 jest-mock: 29.7.0 dev: true @@ -2418,7 +2386,7 @@ packages: dependencies: '@jest/types': 29.6.3 '@sinonjs/fake-timers': 10.3.0 - '@types/node': 20.10.7 + '@types/node': 20.12.7 jest-message-util: 29.7.0 jest-mock: 29.7.0 jest-util: 29.7.0 @@ -2450,18 +2418,18 @@ packages: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@jridgewell/trace-mapping': 0.3.20 - '@types/node': 20.10.7 + '@jridgewell/trace-mapping': 0.3.25 + '@types/node': 20.12.7 chalk: 4.1.2 collect-v8-coverage: 1.0.2 exit: 0.1.2 glob: 7.2.3 graceful-fs: 4.2.11 istanbul-lib-coverage: 3.2.2 - istanbul-lib-instrument: 6.0.1 + istanbul-lib-instrument: 6.0.2 istanbul-lib-report: 3.0.1 istanbul-lib-source-maps: 4.0.1 - istanbul-reports: 3.1.6 + istanbul-reports: 3.1.7 jest-message-util: 29.7.0 jest-util: 29.7.0 jest-worker: 29.7.0 @@ -2484,7 +2452,7 @@ packages: resolution: {integrity: sha512-MHjT95QuipcPrpLM+8JMSzFx6eHp5Bm+4XeFDJlwsvVBjmKNiIAvasGK2fxz2WbGRlnvqehFbh07MMa7n3YJnw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@jridgewell/trace-mapping': 0.3.20 + '@jridgewell/trace-mapping': 0.3.25 callsites: 3.1.0 graceful-fs: 4.2.11 dev: true @@ -2513,9 +2481,9 @@ packages: resolution: {integrity: sha512-ok/BTPFzFKVMwO5eOHRrvnBVHdRy9IrsrW1GpMaQ9MCnilNLXQKmAX8s1YXDFaai9xJpac2ySzV0YeRRECr2Vw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@jest/types': 29.6.3 - '@jridgewell/trace-mapping': 0.3.20 + '@jridgewell/trace-mapping': 0.3.25 babel-plugin-istanbul: 6.1.1 chalk: 4.1.2 convert-source-map: 2.0.0 @@ -2539,12 +2507,12 @@ packages: '@jest/schemas': 29.6.3 '@types/istanbul-lib-coverage': 2.0.6 '@types/istanbul-reports': 3.0.4 - '@types/node': 20.10.7 + '@types/node': 20.12.7 '@types/yargs': 17.0.32 chalk: 4.1.2 dev: true - /@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@4.9.5)(vite@4.5.1): + /@joshwooding/vite-plugin-react-docgen-typescript@0.3.0(typescript@4.9.5)(vite@4.5.3): resolution: {integrity: sha512-2D6y7fNvFmsLmRt6UCOFJPvFoPMJGT0Uh1Wg0RaigUp7kdQPs6yYn8Dmx6GZkOH/NW0yMTwRz/p0SRMMRo50vA==} peerDependencies: typescript: '>= 4.3.x' @@ -2558,42 +2526,42 @@ packages: magic-string: 0.27.0 react-docgen-typescript: 2.2.2(typescript@4.9.5) typescript: 4.9.5 - vite: 4.5.1 + vite: 4.5.3 dev: true - /@jridgewell/gen-mapping@0.3.3: - resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==} + /@jridgewell/gen-mapping@0.3.5: + resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} engines: {node: '>=6.0.0'} dependencies: - '@jridgewell/set-array': 1.1.2 + '@jridgewell/set-array': 1.2.1 '@jridgewell/sourcemap-codec': 1.4.15 - '@jridgewell/trace-mapping': 0.3.20 + '@jridgewell/trace-mapping': 0.3.25 dev: true - /@jridgewell/resolve-uri@3.1.1: - resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==} + /@jridgewell/resolve-uri@3.1.2: + resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} engines: {node: '>=6.0.0'} dev: true - /@jridgewell/set-array@1.1.2: - resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==} + /@jridgewell/set-array@1.2.1: + resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==} engines: {node: '>=6.0.0'} dev: true - /@jridgewell/source-map@0.3.5: - resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==} + /@jridgewell/source-map@0.3.6: + resolution: {integrity: sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==} dependencies: - '@jridgewell/gen-mapping': 0.3.3 - '@jridgewell/trace-mapping': 0.3.20 + '@jridgewell/gen-mapping': 0.3.5 + '@jridgewell/trace-mapping': 0.3.25 dev: true /@jridgewell/sourcemap-codec@1.4.15: resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==} - /@jridgewell/trace-mapping@0.3.20: - resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==} + /@jridgewell/trace-mapping@0.3.25: + resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} dependencies: - '@jridgewell/resolve-uri': 3.1.1 + '@jridgewell/resolve-uri': 3.1.2 '@jridgewell/sourcemap-codec': 1.4.15 dev: true @@ -2601,14 +2569,14 @@ packages: resolution: {integrity: sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==} dev: true - /@mdx-js/react@2.3.0(react@18.2.0): + /@mdx-js/react@2.3.0(react@18.3.1): resolution: {integrity: sha512-zQH//gdOmuu7nt2oJR29vFhDv88oGPmVw6BggmrHeMI+xgEkp1B2dX9/bMBSYtK0dyLX/aOmesKS09g222K1/g==} peerDependencies: react: '>=16' dependencies: - '@types/mdx': 2.0.10 - '@types/react': 17.0.74 - react: 18.2.0 + '@types/mdx': 2.0.13 + '@types/react': 17.0.80 + react: 18.3.1 dev: true /@ndelangen/get-tarball@3.0.9: @@ -2637,7 +2605,7 @@ packages: engines: {node: '>= 8'} dependencies: '@nodelib/fs.scandir': 2.1.5 - fastq: 1.16.0 + fastq: 1.17.1 dev: true /@pkgjs/parseargs@0.11.0: @@ -2650,16 +2618,16 @@ packages: /@radix-ui/number@1.0.1: resolution: {integrity: sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==} dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 dev: true /@radix-ui/primitive@1.0.1: resolution: {integrity: sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==} dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 dev: true - /@radix-ui/react-arrow@1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + /@radix-ui/react-arrow@1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==} peerDependencies: '@types/react': '*' @@ -2672,14 +2640,14 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@babel/runtime': 7.24.4 + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@radix-ui/react-collection@1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + /@radix-ui/react-collection@1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==} peerDependencies: '@types/react': '*' @@ -2692,17 +2660,17 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-context': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-slot': 1.0.2(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@babel/runtime': 7.24.4 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-context': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-slot': 1.0.2(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@radix-ui/react-compose-refs@1.0.1(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-compose-refs@1.0.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==} peerDependencies: '@types/react': '*' @@ -2711,12 +2679,12 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-context@1.0.1(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-context@1.0.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==} peerDependencies: '@types/react': '*' @@ -2725,12 +2693,12 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-direction@1.0.1(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-direction@1.0.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==} peerDependencies: '@types/react': '*' @@ -2739,12 +2707,12 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-dismissable-layer@1.0.4(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + /@radix-ui/react-dismissable-layer@1.0.4(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==} peerDependencies: '@types/react': '*' @@ -2757,18 +2725,18 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@radix-ui/react-focus-guards@1.0.1(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-focus-guards@1.0.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==} peerDependencies: '@types/react': '*' @@ -2777,12 +2745,12 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-focus-scope@1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + /@radix-ui/react-focus-scope@1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==} peerDependencies: '@types/react': '*' @@ -2795,16 +2763,16 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@babel/runtime': 7.24.4 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@radix-ui/react-id@1.0.1(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-id@1.0.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==} peerDependencies: '@types/react': '*' @@ -2813,13 +2781,13 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-popper@1.1.2(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + /@radix-ui/react-popper@1.1.2(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==} peerDependencies: '@types/react': '*' @@ -2832,23 +2800,23 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@floating-ui/react-dom': 2.0.5(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-arrow': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-context': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-use-rect': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-use-size': 1.0.1(@types/react@17.0.74)(react@18.2.0) + '@babel/runtime': 7.24.4 + '@floating-ui/react-dom': 2.0.9(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-arrow': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-context': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-use-rect': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-use-size': 1.0.1(@types/react@17.0.80)(react@18.3.1) '@radix-ui/rect': 1.0.1 - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@radix-ui/react-portal@1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + /@radix-ui/react-portal@1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==} peerDependencies: '@types/react': '*' @@ -2861,14 +2829,14 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@babel/runtime': 7.24.4 + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@radix-ui/react-primitive@1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + /@radix-ui/react-primitive@1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==} peerDependencies: '@types/react': '*' @@ -2881,14 +2849,14 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-slot': 1.0.2(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@babel/runtime': 7.24.4 + '@radix-ui/react-slot': 1.0.2(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@radix-ui/react-roving-focus@1.0.4(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + /@radix-ui/react-roving-focus@1.0.4(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==} peerDependencies: '@types/react': '*' @@ -2901,22 +2869,22 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-collection': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-context': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-direction': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-id': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: true - - /@radix-ui/react-select@1.2.2(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + '@radix-ui/react-collection': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-context': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-direction': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-id': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: true + + /@radix-ui/react-select@1.2.2(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==} peerDependencies: '@types/react': '*' @@ -2929,34 +2897,34 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 '@radix-ui/number': 1.0.1 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-collection': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-context': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-direction': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-dismissable-layer': 1.0.4(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-focus-guards': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-focus-scope': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-id': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-popper': 1.1.2(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-portal': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-slot': 1.0.2(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-use-previous': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-visually-hidden': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@types/react': 17.0.74 - aria-hidden: 1.2.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-remove-scroll: 2.5.5(@types/react@17.0.74)(react@18.2.0) - dev: true - - /@radix-ui/react-separator@1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + '@radix-ui/react-collection': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-context': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-direction': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-dismissable-layer': 1.0.4(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-focus-guards': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-focus-scope': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-id': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-popper': 1.1.2(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-portal': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-slot': 1.0.2(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-use-previous': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-visually-hidden': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@types/react': 17.0.80 + aria-hidden: 1.2.4 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-remove-scroll: 2.5.5(@types/react@17.0.80)(react@18.3.1) + dev: true + + /@radix-ui/react-separator@1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==} peerDependencies: '@types/react': '*' @@ -2969,14 +2937,14 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@babel/runtime': 7.24.4 + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@radix-ui/react-slot@1.0.2(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-slot@1.0.2(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==} peerDependencies: '@types/react': '*' @@ -2985,13 +2953,13 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@radix-ui/react-compose-refs': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-toggle-group@1.0.4(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + /@radix-ui/react-toggle-group@1.0.4(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==} peerDependencies: '@types/react': '*' @@ -3004,20 +2972,20 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-context': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-direction': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-roving-focus': 1.0.4(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-toggle': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: true - - /@radix-ui/react-toggle@1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + '@radix-ui/react-context': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-direction': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-roving-focus': 1.0.4(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-toggle': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: true + + /@radix-ui/react-toggle@1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==} peerDependencies: '@types/react': '*' @@ -3030,16 +2998,16 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@radix-ui/react-toolbar@1.0.4(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + /@radix-ui/react-toolbar@1.0.4(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==} peerDependencies: '@types/react': '*' @@ -3052,20 +3020,20 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-context': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-direction': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-roving-focus': 1.0.4(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-separator': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-toggle-group': 1.0.4(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - dev: true - - /@radix-ui/react-use-callback-ref@1.0.1(@types/react@17.0.74)(react@18.2.0): + '@radix-ui/react-context': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-direction': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-roving-focus': 1.0.4(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-separator': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-toggle-group': 1.0.4(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + dev: true + + /@radix-ui/react-use-callback-ref@1.0.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==} peerDependencies: '@types/react': '*' @@ -3074,12 +3042,12 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-use-controllable-state@1.0.1(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-use-controllable-state@1.0.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==} peerDependencies: '@types/react': '*' @@ -3088,13 +3056,13 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-use-escape-keydown@1.0.3(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==} peerDependencies: '@types/react': '*' @@ -3103,13 +3071,13 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-use-layout-effect@1.0.1(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-use-layout-effect@1.0.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==} peerDependencies: '@types/react': '*' @@ -3118,12 +3086,12 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-use-previous@1.0.1(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-use-previous@1.0.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==} peerDependencies: '@types/react': '*' @@ -3132,12 +3100,12 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-use-rect@1.0.1(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-use-rect@1.0.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==} peerDependencies: '@types/react': '*' @@ -3146,13 +3114,13 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 '@radix-ui/rect': 1.0.1 - '@types/react': 17.0.74 - react: 18.2.0 + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-use-size@1.0.1(@types/react@17.0.74)(react@18.2.0): + /@radix-ui/react-use-size@1.0.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==} peerDependencies: '@types/react': '*' @@ -3161,13 +3129,13 @@ packages: '@types/react': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.74)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 + '@babel/runtime': 7.24.4 + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@17.0.80)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 dev: true - /@radix-ui/react-visually-hidden@1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): + /@radix-ui/react-visually-hidden@1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==} peerDependencies: '@types/react': '*' @@ -3180,61 +3148,61 @@ packages: '@types/react-dom': optional: true dependencies: - '@babel/runtime': 7.23.7 - '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@types/react': 17.0.74 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@babel/runtime': 7.24.4 + '@radix-ui/react-primitive': 1.0.3(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@types/react': 17.0.80 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true /@radix-ui/rect@1.0.1: resolution: {integrity: sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==} dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 dev: true - /@react-aria/ssr@3.9.1(react@18.2.0): - resolution: {integrity: sha512-NqzkLFP8ZVI4GSorS0AYljC13QW2sc8bDqJOkBvkAt3M8gbcAXJWVRGtZBCRscki9RZF+rNlnPdg0G0jYkhJcg==} + /@react-aria/ssr@3.9.2(react@18.3.1): + resolution: {integrity: sha512-0gKkgDYdnq1w+ey8KzG9l+H5Z821qh9vVjztk55rUg71vTk/Eaebeir+WtzcLLwTjw3m/asIjx8Y59y1lJZhBw==} engines: {node: '>= 12'} peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 dependencies: - '@swc/helpers': 0.5.3 - react: 18.2.0 + '@swc/helpers': 0.5.11 + react: 18.3.1 dev: false - /@react-aria/utils@3.17.0(react@18.2.0): + /@react-aria/utils@3.17.0(react@18.3.1): resolution: {integrity: sha512-NEul0cQ6tQPdNSHYzNYD+EfFabeYNvDwEiHB82kK/Tsfhfm84SM+baben/at2N51K7iRrJPr5hC5fi4+P88lNg==} peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 dependencies: - '@react-aria/ssr': 3.9.1(react@18.2.0) - '@react-stately/utils': 3.9.0(react@18.2.0) - '@react-types/shared': 3.22.0(react@18.2.0) + '@react-aria/ssr': 3.9.2(react@18.3.1) + '@react-stately/utils': 3.9.1(react@18.3.1) + '@react-types/shared': 3.22.1(react@18.3.1) '@swc/helpers': 0.4.36 clsx: 1.2.1 - react: 18.2.0 + react: 18.3.1 dev: false - /@react-stately/utils@3.9.0(react@18.2.0): - resolution: {integrity: sha512-yPKFY1F88HxuZ15BG2qwAYxtpE4HnIU0Ofi4CuBE0xC6I8mwo4OQjDzi+DZjxQngM9D6AeTTD6F1V8gkozA0Gw==} + /@react-stately/utils@3.9.1(react@18.3.1): + resolution: {integrity: sha512-yzw75GE0iUWiyps02BOAPTrybcsMIxEJlzXqtvllAb01O9uX5n0i3X+u2eCpj2UoDF4zS08Ps0jPgWxg8xEYtA==} peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 dependencies: - '@swc/helpers': 0.5.3 - react: 18.2.0 + '@swc/helpers': 0.5.11 + react: 18.3.1 dev: false - /@react-types/shared@3.22.0(react@18.2.0): - resolution: {integrity: sha512-yVOekZWbtSmmiThGEIARbBpnmUIuePFlLyctjvCbgJgGhz8JnEJOipLQ/a4anaWfzAgzSceQP8j/K+VOOePleA==} + /@react-types/shared@3.22.1(react@18.3.1): + resolution: {integrity: sha512-PCpa+Vo6BKnRMuOEzy5zAZ3/H5tnQg1e80khMhK2xys0j6ZqzkgQC+fHMNZ7VDFNLqqNMj/o0eVeSBDh2POjkw==} peerDependencies: react: ^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 dependencies: - react: 18.2.0 + react: 18.3.1 dev: false - /@remix-run/router@1.14.1: - resolution: {integrity: sha512-Qg4DMQsfPNAs88rb2xkdk03N3bjK4jgX5fR24eHCTR9q6PrhZQZ4UJBPzCHJkIpTRN1UKxx2DzjZmnC+7Lj0Ow==} + /@remix-run/router@1.16.0: + resolution: {integrity: sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==} engines: {node: '>=14.0.0'} dev: true @@ -3252,104 +3220,128 @@ packages: picomatch: 2.3.1 dev: true - /@rollup/rollup-android-arm-eabi@4.9.4: - resolution: {integrity: sha512-ub/SN3yWqIv5CWiAZPHVS1DloyZsJbtXmX4HxUTIpS0BHm9pW5iYBo2mIZi+hE3AeiTzHz33blwSnhdUo+9NpA==} + /@rollup/rollup-android-arm-eabi@4.17.1: + resolution: {integrity: sha512-P6Wg856Ou/DLpR+O0ZLneNmrv7QpqBg+hK4wE05ijbC/t349BRfMfx+UFj5Ha3fCFopIa6iSZlpdaB4agkWp2Q==} cpu: [arm] os: [android] requiresBuild: true dev: true optional: true - /@rollup/rollup-android-arm64@4.9.4: - resolution: {integrity: sha512-ehcBrOR5XTl0W0t2WxfTyHCR/3Cq2jfb+I4W+Ch8Y9b5G+vbAecVv0Fx/J1QKktOrgUYsIKxWAKgIpvw56IFNA==} + /@rollup/rollup-android-arm64@4.17.1: + resolution: {integrity: sha512-piwZDjuW2WiHr05djVdUkrG5JbjnGbtx8BXQchYCMfib/nhjzWoiScelZ+s5IJI7lecrwSxHCzW026MWBL+oJQ==} cpu: [arm64] os: [android] requiresBuild: true dev: true optional: true - /@rollup/rollup-darwin-arm64@4.9.4: - resolution: {integrity: sha512-1fzh1lWExwSTWy8vJPnNbNM02WZDS8AW3McEOb7wW+nPChLKf3WG2aG7fhaUmfX5FKw9zhsF5+MBwArGyNM7NA==} + /@rollup/rollup-darwin-arm64@4.17.1: + resolution: {integrity: sha512-LsZXXIsN5Q460cKDT4Y+bzoPDhBmO5DTr7wP80d+2EnYlxSgkwdPfE3hbE+Fk8dtya+8092N9srjBTJ0di8RIA==} cpu: [arm64] os: [darwin] requiresBuild: true dev: true optional: true - /@rollup/rollup-darwin-x64@4.9.4: - resolution: {integrity: sha512-Gc6cukkF38RcYQ6uPdiXi70JB0f29CwcQ7+r4QpfNpQFVHXRd0DfWFidoGxjSx1DwOETM97JPz1RXL5ISSB0pA==} + /@rollup/rollup-darwin-x64@4.17.1: + resolution: {integrity: sha512-S7TYNQpWXB9APkxu/SLmYHezWwCoZRA9QLgrDeml+SR2A1LLPD2DBUdUlvmCF7FUpRMKvbeeWky+iizQj65Etw==} cpu: [x64] os: [darwin] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm-gnueabihf@4.9.4: - resolution: {integrity: sha512-g21RTeFzoTl8GxosHbnQZ0/JkuFIB13C3T7Y0HtKzOXmoHhewLbVTFBQZu+z5m9STH6FZ7L/oPgU4Nm5ErN2fw==} + /@rollup/rollup-linux-arm-gnueabihf@4.17.1: + resolution: {integrity: sha512-Lq2JR5a5jsA5um2ZoLiXXEaOagnVyCpCW7xvlcqHC7y46tLwTEgUSTM3a2TfmmTMmdqv+jknUioWXlmxYxE9Yw==} + cpu: [arm] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-linux-arm-musleabihf@4.17.1: + resolution: {integrity: sha512-9BfzwyPNV0IizQoR+5HTNBGkh1KXE8BqU0DBkqMngmyFW7BfuIZyMjQ0s6igJEiPSBvT3ZcnIFohZ19OqjhDPg==} cpu: [arm] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm64-gnu@4.9.4: - resolution: {integrity: sha512-TVYVWD/SYwWzGGnbfTkrNpdE4HON46orgMNHCivlXmlsSGQOx/OHHYiQcMIOx38/GWgwr/po2LBn7wypkWw/Mg==} + /@rollup/rollup-linux-arm64-gnu@4.17.1: + resolution: {integrity: sha512-e2uWaoxo/rtzA52OifrTSXTvJhAXb0XeRkz4CdHBK2KtxrFmuU/uNd544Ogkpu938BzEfvmWs8NZ8Axhw33FDw==} cpu: [arm64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-arm64-musl@4.9.4: - resolution: {integrity: sha512-XcKvuendwizYYhFxpvQ3xVpzje2HHImzg33wL9zvxtj77HvPStbSGI9czrdbfrf8DGMcNNReH9pVZv8qejAQ5A==} + /@rollup/rollup-linux-arm64-musl@4.17.1: + resolution: {integrity: sha512-ekggix/Bc/d/60H1Mi4YeYb/7dbal1kEDZ6sIFVAE8pUSx7PiWeEh+NWbL7bGu0X68BBIkgF3ibRJe1oFTksQQ==} cpu: [arm64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-riscv64-gnu@4.9.4: - resolution: {integrity: sha512-LFHS/8Q+I9YA0yVETyjonMJ3UA+DczeBd/MqNEzsGSTdNvSJa1OJZcSH8GiXLvcizgp9AlHs2walqRcqzjOi3A==} + /@rollup/rollup-linux-powerpc64le-gnu@4.17.1: + resolution: {integrity: sha512-UGV0dUo/xCv4pkr/C8KY7XLFwBNnvladt8q+VmdKrw/3RUd3rD0TptwjisvE2TTnnlENtuY4/PZuoOYRiGp8Gw==} + cpu: [ppc64] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-linux-riscv64-gnu@4.17.1: + resolution: {integrity: sha512-gEYmYYHaehdvX46mwXrU49vD6Euf1Bxhq9pPb82cbUU9UT2NV+RSckQ5tKWOnNXZixKsy8/cPGtiUWqzPuAcXQ==} cpu: [riscv64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-x64-gnu@4.9.4: - resolution: {integrity: sha512-dIYgo+j1+yfy81i0YVU5KnQrIJZE8ERomx17ReU4GREjGtDW4X+nvkBak2xAUpyqLs4eleDSj3RrV72fQos7zw==} + /@rollup/rollup-linux-s390x-gnu@4.17.1: + resolution: {integrity: sha512-xeae5pMAxHFp6yX5vajInG2toST5lsCTrckSRUFwNgzYqnUjNBcQyqk1bXUxX5yhjWFl2Mnz3F8vQjl+2FRIcw==} + cpu: [s390x] + os: [linux] + requiresBuild: true + dev: true + optional: true + + /@rollup/rollup-linux-x64-gnu@4.17.1: + resolution: {integrity: sha512-AsdnINQoDWfKpBzCPqQWxSPdAWzSgnYbrJYtn6W0H2E9It5bZss99PiLA8CgmDRfvKygt20UpZ3xkhFlIfX9zQ==} cpu: [x64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-linux-x64-musl@4.9.4: - resolution: {integrity: sha512-RoaYxjdHQ5TPjaPrLsfKqR3pakMr3JGqZ+jZM0zP2IkDtsGa4CqYaWSfQmZVgFUCgLrTnzX+cnHS3nfl+kB6ZQ==} + /@rollup/rollup-linux-x64-musl@4.17.1: + resolution: {integrity: sha512-KoB4fyKXTR+wYENkIG3fFF+5G6N4GFvzYx8Jax8BR4vmddtuqSb5oQmYu2Uu067vT/Fod7gxeQYKupm8gAcMSQ==} cpu: [x64] os: [linux] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-arm64-msvc@4.9.4: - resolution: {integrity: sha512-T8Q3XHV+Jjf5e49B4EAaLKV74BbX7/qYBRQ8Wop/+TyyU0k+vSjiLVSHNWdVd1goMjZcbhDmYZUYW5RFqkBNHQ==} + /@rollup/rollup-win32-arm64-msvc@4.17.1: + resolution: {integrity: sha512-J0d3NVNf7wBL9t4blCNat+d0PYqAx8wOoY+/9Q5cujnafbX7BmtYk3XvzkqLmFECaWvXGLuHmKj/wrILUinmQg==} cpu: [arm64] os: [win32] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-ia32-msvc@4.9.4: - resolution: {integrity: sha512-z+JQ7JirDUHAsMecVydnBPWLwJjbppU+7LZjffGf+Jvrxq+dVjIE7By163Sc9DKc3ADSU50qPVw0KonBS+a+HQ==} + /@rollup/rollup-win32-ia32-msvc@4.17.1: + resolution: {integrity: sha512-xjgkWUwlq7IbgJSIxvl516FJ2iuC/7ttjsAxSPpC9kkI5iQQFHKyEN5BjbhvJ/IXIZ3yIBcW5QDlWAyrA+TFag==} cpu: [ia32] os: [win32] requiresBuild: true dev: true optional: true - /@rollup/rollup-win32-x64-msvc@4.9.4: - resolution: {integrity: sha512-LfdGXCV9rdEify1oxlN9eamvDSjv9md9ZVMAbNHA87xqIfFCxImxan9qZ8+Un54iK2nnqPlbnSi4R54ONtbWBw==} + /@rollup/rollup-win32-x64-msvc@4.17.1: + resolution: {integrity: sha512-0QbCkfk6cnnVKWqqlC0cUrrUMDMfu5ffvYMTUHf+qMN2uAb3MKP31LPcwiMXBNsvoFGs/kYdFOsuLmvppCopXA==} cpu: [x64] os: [win32] requiresBuild: true @@ -3360,8 +3352,8 @@ packages: resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==} dev: true - /@sinonjs/commons@3.0.0: - resolution: {integrity: sha512-jXBtWAF4vmdNmZgD5FoKsVLv3rPgDnLgPbU84LIJ3otV44vJlDRokVng5v8NFJdCf/da9legHcKaRuZs4L7faA==} + /@sinonjs/commons@3.0.1: + resolution: {integrity: sha512-K3mCHKQ9sVh8o1C9cxkwxaOmXoAMlDxC1mYyHrjqOWEcBjYr76t96zL2zlj5dUGZ3HSw240X1qgH3Mjf1yJWpQ==} dependencies: type-detect: 4.0.8 dev: true @@ -3369,39 +3361,39 @@ packages: /@sinonjs/fake-timers@10.3.0: resolution: {integrity: sha512-V4BG07kuYSUkTCSBHG8G8TNhM+F19jXFWnQtzj+we8DrkpSBCee9Z3Ms8yiGer/dlmhe35/Xdgyo3/0rQKg7YA==} dependencies: - '@sinonjs/commons': 3.0.0 + '@sinonjs/commons': 3.0.1 dev: true - /@storybook/addon-a11y@7.6.7: - resolution: {integrity: sha512-poT2oXIYDwLnhqn6g9ACTQ+7gi8QDHVlib4TQANdcozC/qYg+Bs6Pd99wT6rT4lrC/npVNTSKKwLw+3oXqlCxg==} + /@storybook/addon-a11y@7.6.18: + resolution: {integrity: sha512-eTnj/eAh6Lzh5gZ5y/wn5qoGrei9tpKz/HliS4AxEKUlAG80LVXyDooYA+EXN1vo/9EH3TiiS01roRJOGdzTUA==} dependencies: - '@storybook/addon-highlight': 7.6.7 - axe-core: 4.8.3 + '@storybook/addon-highlight': 7.6.18 + axe-core: 4.9.0 dev: true - /@storybook/addon-actions@7.6.7: - resolution: {integrity: sha512-+6EZvhIeKEqG/RNsU3R5DxOrd60BL5GEvmzE2w60s2eKaNNxtyilDjiO1g4z2s2zDNyr7JL/Ft03pJ0Jgo0lew==} + /@storybook/addon-actions@7.6.18: + resolution: {integrity: sha512-HWS2NqUNH7FGG5QyWMvV3aw2IcwXw6xQwCx2xLUD7fJFqCAf4cDXZIsGnTVHCtoddVRBIlcS+LRmiGU8+mQKdw==} dependencies: - '@storybook/core-events': 7.6.7 + '@storybook/core-events': 7.6.18 '@storybook/global': 5.0.0 - '@types/uuid': 9.0.7 + '@types/uuid': 9.0.8 dequal: 2.0.3 polished: 4.3.1 uuid: 9.0.1 dev: true - /@storybook/addon-backgrounds@7.6.7: - resolution: {integrity: sha512-55sBy1YUqponAVe+qL16qtWxdf63vHEnIoqFyHEwGpk7K9IhFA1BmdSpFr5VnWEwXeJXKj30db78frh2LUdk3Q==} + /@storybook/addon-backgrounds@7.6.18: + resolution: {integrity: sha512-Bai0n3RfO+PmsQ69KdRhPvuwCistNLvpKtAEzo9nlpHfYh921OgVfZrKFfWJgYskvyVlaNu0DeR3t6TT8CbT/A==} dependencies: '@storybook/global': 5.0.0 memoizerific: 1.11.3 ts-dedent: 2.2.0 dev: true - /@storybook/addon-controls@7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-DJ3gfvcdCgqi7AQxu83vx0AEUKiuJrNcSATfWV3Jqi8dH6fYO2yqpemHEeWOEy+DAHxIOaqLKwb1QjIBj+vSRQ==} + /@storybook/addon-controls@7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-iH/JbltgjDFihRppeniNlGE3Qc86Q5oW8+p77E9B0ILn3yGk3rNOSlOTUg7a1seMjddJfsptDn4xMFHuunYuyQ==} dependencies: - '@storybook/blocks': 7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) + '@storybook/blocks': 7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) lodash: 4.17.21 ts-dedent: 2.2.0 transitivePeerDependencies: @@ -3413,30 +3405,30 @@ packages: - supports-color dev: true - /@storybook/addon-docs@7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-2dfajNhweofJ3LxjGO83UE5sBMvKtJB0Agj7q8mMtK/9PUCUcbvsFSyZnO/s6X1zAjSn5ZrirbSoTXU4IqxwSA==} + /@storybook/addon-docs@7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-+JzGL5ImwZ5VE+PiEUzRHWKbgvFsg/G2OTzyqZD8vQ+NlB6rmKGzGpXz0c4D6xEupzIJwjbpSN2ZOzgld0Du9Q==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: '@jest/transform': 29.7.0 - '@mdx-js/react': 2.3.0(react@18.2.0) - '@storybook/blocks': 7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@storybook/client-logger': 7.6.7 - '@storybook/components': 7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@storybook/csf-plugin': 7.6.7 - '@storybook/csf-tools': 7.6.7 + '@mdx-js/react': 2.3.0(react@18.3.1) + '@storybook/blocks': 7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@storybook/client-logger': 7.6.18 + '@storybook/components': 7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@storybook/csf-plugin': 7.6.18 + '@storybook/csf-tools': 7.6.18 '@storybook/global': 5.0.0 '@storybook/mdx2-csf': 1.1.0 - '@storybook/node-logger': 7.6.7 - '@storybook/postinstall': 7.6.7 - '@storybook/preview-api': 7.6.7 - '@storybook/react-dom-shim': 7.6.7(react-dom@18.2.0)(react@18.2.0) - '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0) - '@storybook/types': 7.6.7 + '@storybook/node-logger': 7.6.18 + '@storybook/postinstall': 7.6.18 + '@storybook/preview-api': 7.6.18 + '@storybook/react-dom-shim': 7.6.18(react-dom@18.3.1)(react@18.3.1) + '@storybook/theming': 7.6.18(react-dom@18.3.1)(react@18.3.1) + '@storybook/types': 7.6.18 fs-extra: 11.2.0 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) remark-external-links: 8.0.0 remark-slug: 6.1.0 ts-dedent: 2.2.0 @@ -3447,27 +3439,27 @@ packages: - supports-color dev: true - /@storybook/addon-essentials@7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-nNLMrpIvc04z4XCA+kval/44eKAFJlUJeeL2pxwP7F/PSzjWe5BXv1bQHOiw8inRO5II0PzqwWnVCI9jsj7K5A==} + /@storybook/addon-essentials@7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-qgVH442LhIdzCbx0E+eB1+xTj1TOKqSqrUy76viILCK1wfMSeIsU8TNkqnc8hzUQH2IatUJb/t76wXh2eV9s4w==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@storybook/addon-actions': 7.6.7 - '@storybook/addon-backgrounds': 7.6.7 - '@storybook/addon-controls': 7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@storybook/addon-docs': 7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@storybook/addon-highlight': 7.6.7 - '@storybook/addon-measure': 7.6.7 - '@storybook/addon-outline': 7.6.7 - '@storybook/addon-toolbars': 7.6.7 - '@storybook/addon-viewport': 7.6.7 - '@storybook/core-common': 7.6.7 - '@storybook/manager-api': 7.6.7(react-dom@18.2.0)(react@18.2.0) - '@storybook/node-logger': 7.6.7 - '@storybook/preview-api': 7.6.7 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + '@storybook/addon-actions': 7.6.18 + '@storybook/addon-backgrounds': 7.6.18 + '@storybook/addon-controls': 7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@storybook/addon-docs': 7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@storybook/addon-highlight': 7.6.18 + '@storybook/addon-measure': 7.6.18 + '@storybook/addon-outline': 7.6.18 + '@storybook/addon-toolbars': 7.6.18 + '@storybook/addon-viewport': 7.6.18 + '@storybook/core-common': 7.6.18 + '@storybook/manager-api': 7.6.18(react-dom@18.3.1)(react@18.3.1) + '@storybook/node-logger': 7.6.18 + '@storybook/preview-api': 7.6.18 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) ts-dedent: 2.2.0 transitivePeerDependencies: - '@types/react' @@ -3476,65 +3468,65 @@ packages: - supports-color dev: true - /@storybook/addon-highlight@7.6.7: - resolution: {integrity: sha512-2F/tJdn45d4zrvf/cmE1vsczl99wK8+I+kkj0G7jLsrJR0w1zTgbgjy6T9j86HBTBvWcnysNFNIRWPAOh5Wdbw==} + /@storybook/addon-highlight@7.6.18: + resolution: {integrity: sha512-XUR9sTcxqYbes9ckj1b/GyAJ3yFfE/2YnvPFz8vWO9hIZjlL0Wvyiy/1L2DePF1S+zHrYA8+dg65vK8pMXUrnQ==} dependencies: '@storybook/global': 5.0.0 dev: true - /@storybook/addon-measure@7.6.7: - resolution: {integrity: sha512-t1RnnNO4Xzgnsxu63FlZwsCTF0+9jKxr44NiJAUOxW9ppbCvs/JfSDOOvcDRtPWyjgnyzexNUUctMfxvLrU01A==} + /@storybook/addon-measure@7.6.18: + resolution: {integrity: sha512-ixEW/RG3iJCiyJQ51vKqlTJHq6vJ7O/xHGGMFV9+RYP0S2klZctQQwLZxUWUjSLUUjCX/DrxVlmK03h+7f+wWA==} dependencies: '@storybook/global': 5.0.0 - tiny-invariant: 1.3.1 + tiny-invariant: 1.3.3 dev: true - /@storybook/addon-outline@7.6.7: - resolution: {integrity: sha512-gu2y46ijjMkXlxy1f8Cctgjw5b5y8vSIqNAYlrs5/Qy+hJAWyU6lj2PFGOCCUG4L+F45fAjwWAin6qz43+WnRQ==} + /@storybook/addon-outline@7.6.18: + resolution: {integrity: sha512-YKHjir/+KZH0P/F8spmm9l/EC28VXlE0beAxeErvpPiA6t1Ykrh7GEPvPEolY1DydKBaLLnd20adLhDskl+oGg==} dependencies: '@storybook/global': 5.0.0 ts-dedent: 2.2.0 dev: true - /@storybook/addon-toolbars@7.6.7: - resolution: {integrity: sha512-vT+YMzw8yVwndhJglI0XtELfXWq1M0HEy5ST3XPzbjmsJ54LgTf1b29UMkh0E/05qBQNFCcbT9B/tLxqWezxlg==} + /@storybook/addon-toolbars@7.6.18: + resolution: {integrity: sha512-AlqW8rA5gNtxjbTyJtJlVfmqbcSJAWFHTvC7OfwbZRZLmF5agdBUQeAZYI75WBZpdlYrp23s88O+MRMa/CF2yA==} dev: true - /@storybook/addon-viewport@7.6.7: - resolution: {integrity: sha512-Q/BKjJaKzl4RWxH45K2iIXwkicj4ReVAUIpIyd7dPBb/Bx+hEDYZxR5dDg82AMkZdA71x5ttMnuDSuVpmWAE6g==} + /@storybook/addon-viewport@7.6.18: + resolution: {integrity: sha512-fgn38aXappEeDNg5u52fswhjkNN5Sru6Rf/2WhuuQXteIC2tX27J03Ud8h2aKydzHai7zz8jJ0IoGt7cA6W0Nw==} dependencies: memoizerific: 1.11.3 dev: true - /@storybook/blocks@7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-+QEvGQ0he/YvFS3lsZORJWxhQIyqcCDWsxbJxJiByePd+Z4my3q8xwtPhHW0TKRL0xUgNE/GnTfMMqJfevTuSw==} + /@storybook/blocks@7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-mCEyGew2nyiFwJ1iHfm4ItB/bDrVzYUODkKktmHDmJJgjKFIDQJPTgLsiQhXBtxqW0TImL4JpSU/aUAAbXpZeg==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@storybook/channels': 7.6.7 - '@storybook/client-logger': 7.6.7 - '@storybook/components': 7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@storybook/core-events': 7.6.7 - '@storybook/csf': 0.1.2 - '@storybook/docs-tools': 7.6.7 + '@storybook/channels': 7.6.18 + '@storybook/client-logger': 7.6.18 + '@storybook/components': 7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@storybook/core-events': 7.6.18 + '@storybook/csf': 0.1.5 + '@storybook/docs-tools': 7.6.18 '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.6.7(react-dom@18.2.0)(react@18.2.0) - '@storybook/preview-api': 7.6.7 - '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0) - '@storybook/types': 7.6.7 - '@types/lodash': 4.14.202 + '@storybook/manager-api': 7.6.18(react-dom@18.3.1)(react@18.3.1) + '@storybook/preview-api': 7.6.18 + '@storybook/theming': 7.6.18(react-dom@18.3.1)(react@18.3.1) + '@storybook/types': 7.6.18 + '@types/lodash': 4.17.0 color-convert: 2.0.1 dequal: 2.0.3 lodash: 4.17.21 - markdown-to-jsx: 7.4.0(react@18.2.0) + markdown-to-jsx: 7.4.7(react@18.3.1) memoizerific: 1.11.3 polished: 4.3.1 - react: 18.2.0 - react-colorful: 5.6.1(react-dom@18.2.0)(react@18.2.0) - react-dom: 18.2.0(react@18.2.0) + react: 18.3.1 + react-colorful: 5.6.1(react-dom@18.3.1)(react@18.3.1) + react-dom: 18.3.1(react@18.3.1) telejson: 7.2.0 - tocbot: 4.25.0 + tocbot: 4.27.13 ts-dedent: 2.2.0 util-deprecate: 1.0.2 transitivePeerDependencies: @@ -3544,21 +3536,21 @@ packages: - supports-color dev: true - /@storybook/builder-manager@7.6.7: - resolution: {integrity: sha512-6HYpj6+g/qbDMvImVz/G/aANbkhppyBa1ozfHxLK7tRD79YvozCWmj2Z9umRekPv9VIeMxnI5EEzJXOsoMX5DQ==} + /@storybook/builder-manager@7.6.18: + resolution: {integrity: sha512-kXnC/lDA3zUeXgwAoHKed+CXbDcKV8GJ6qrPCw1D1a3ug5Lw5DYPBJC/KP3CgNpVx6vukkeEIwKYg2M+LRmI6g==} dependencies: '@fal-works/esbuild-plugin-global-externals': 2.1.2 - '@storybook/core-common': 7.6.7 - '@storybook/manager': 7.6.7 - '@storybook/node-logger': 7.6.7 + '@storybook/core-common': 7.6.18 + '@storybook/manager': 7.6.18 + '@storybook/node-logger': 7.6.18 '@types/ejs': 3.1.5 '@types/find-cache-dir': 3.2.1 '@yarnpkg/esbuild-plugin-pnp': 3.0.0-rc.15(esbuild@0.18.20) browser-assert: 1.2.1 - ejs: 3.1.9 + ejs: 3.1.10 esbuild: 0.18.20 esbuild-plugin-alias: 0.2.1 - express: 4.18.2 + express: 4.19.2 find-cache-dir: 3.3.2 fs-extra: 11.2.0 process: 0.11.10 @@ -3568,8 +3560,8 @@ packages: - supports-color dev: true - /@storybook/builder-vite@7.6.7(typescript@4.9.5)(vite@4.5.1): - resolution: {integrity: sha512-Sv+0ROFU9k+mkvIPsPHC0lkKDzBeMpvfO9uFRl1RDSsXBfcPPZKNo5YK7U7fOhesH0BILzurGA+U/aaITMSZ9g==} + /@storybook/builder-vite@7.6.18(typescript@4.9.5)(vite@4.5.3): + resolution: {integrity: sha512-f3chnC6ug9KJDz3Z+HNl8yhJ/SUT0ASdJjKViVJ90MKKyFpeCvzs2DSgMGv2UJrPfBMh6PhFM2dy26+LksioCQ==} peerDependencies: '@preact/preset-vite': '*' typescript: '>= 4.3.x' @@ -3583,81 +3575,91 @@ packages: vite-plugin-glimmerx: optional: true dependencies: - '@storybook/channels': 7.6.7 - '@storybook/client-logger': 7.6.7 - '@storybook/core-common': 7.6.7 - '@storybook/csf-plugin': 7.6.7 - '@storybook/node-logger': 7.6.7 - '@storybook/preview': 7.6.7 - '@storybook/preview-api': 7.6.7 - '@storybook/types': 7.6.7 + '@storybook/channels': 7.6.18 + '@storybook/client-logger': 7.6.18 + '@storybook/core-common': 7.6.18 + '@storybook/csf-plugin': 7.6.18 + '@storybook/node-logger': 7.6.18 + '@storybook/preview': 7.6.18 + '@storybook/preview-api': 7.6.18 + '@storybook/types': 7.6.18 '@types/find-cache-dir': 3.2.1 browser-assert: 1.2.1 es-module-lexer: 0.9.3 - express: 4.18.2 + express: 4.19.2 find-cache-dir: 3.3.2 fs-extra: 11.2.0 - magic-string: 0.30.5 + magic-string: 0.30.10 rollup: 3.29.4 typescript: 4.9.5 - vite: 4.5.1 + vite: 4.5.3 transitivePeerDependencies: - encoding - supports-color dev: true - /@storybook/channels@7.6.7: - resolution: {integrity: sha512-u1hURhfQHHtZyRIDUENRCp+CRRm7IQfcjQaoWI06XCevQPuhVEtFUfXHjG+J74aA/JuuTLFUtqwNm1zGqbXTAQ==} + /@storybook/channels@7.6.17: + resolution: {integrity: sha512-GFG40pzaSxk1hUr/J/TMqW5AFDDPUSu+HkeE/oqSWJbOodBOLJzHN6CReJS6y1DjYSZLNFt1jftPWZZInG/XUA==} + dependencies: + '@storybook/client-logger': 7.6.17 + '@storybook/core-events': 7.6.17 + '@storybook/global': 5.0.0 + qs: 6.12.1 + telejson: 7.2.0 + tiny-invariant: 1.3.3 + dev: true + + /@storybook/channels@7.6.18: + resolution: {integrity: sha512-ayMJ6GJot81URJySXcwZG1mLacblUVdLgAMIhU7oSW1K1v4KvQPxv3FqjNN+48g/1s+2A9UraCDqN0qzO3wznQ==} dependencies: - '@storybook/client-logger': 7.6.7 - '@storybook/core-events': 7.6.7 + '@storybook/client-logger': 7.6.18 + '@storybook/core-events': 7.6.18 '@storybook/global': 5.0.0 - qs: 6.11.2 + qs: 6.12.1 telejson: 7.2.0 - tiny-invariant: 1.3.1 + tiny-invariant: 1.3.3 dev: true - /@storybook/cli@7.6.7: - resolution: {integrity: sha512-DwDWzkifBH17ry+n+d+u52Sv69dZQ+04ETJdDDzghcyAcKnFzrRNukj4tJ21cm+ZAU/r0fKR9d4Qpbogca9fAg==} + /@storybook/cli@7.6.18: + resolution: {integrity: sha512-2zlCyX4m1Jb3p+P/Z+7ioa7cXA+Sv+j0JevUWaaVZbBLrjj/G2k5bYzgrks0FhQZ6MLv5bkuZPGtJMgWQ8+c3Q==} hasBin: true dependencies: - '@babel/core': 7.23.7 - '@babel/preset-env': 7.23.7(@babel/core@7.23.7) - '@babel/types': 7.23.6 + '@babel/core': 7.24.4 + '@babel/preset-env': 7.24.4(@babel/core@7.24.4) + '@babel/types': 7.24.0 '@ndelangen/get-tarball': 3.0.9 - '@storybook/codemod': 7.6.7 - '@storybook/core-common': 7.6.7 - '@storybook/core-events': 7.6.7 - '@storybook/core-server': 7.6.7 - '@storybook/csf-tools': 7.6.7 - '@storybook/node-logger': 7.6.7 - '@storybook/telemetry': 7.6.7 - '@storybook/types': 7.6.7 - '@types/semver': 7.5.6 + '@storybook/codemod': 7.6.18 + '@storybook/core-common': 7.6.18 + '@storybook/core-events': 7.6.18 + '@storybook/core-server': 7.6.18 + '@storybook/csf-tools': 7.6.18 + '@storybook/node-logger': 7.6.18 + '@storybook/telemetry': 7.6.18 + '@storybook/types': 7.6.18 + '@types/semver': 7.5.8 '@yarnpkg/fslib': 2.10.3 '@yarnpkg/libzip': 2.3.0 chalk: 4.1.2 commander: 6.2.1 cross-spawn: 7.0.3 detect-indent: 6.1.0 - envinfo: 7.11.0 + envinfo: 7.13.0 execa: 5.1.1 - express: 4.18.2 + express: 4.19.2 find-up: 5.0.0 fs-extra: 11.2.0 get-npm-tarball-url: 2.1.0 get-port: 5.1.1 - giget: 1.2.1 + giget: 1.2.3 globby: 11.1.0 - jscodeshift: 0.15.1(@babel/preset-env@7.23.7) + jscodeshift: 0.15.2(@babel/preset-env@7.24.4) leven: 3.1.0 ora: 5.4.1 prettier: 2.8.8 prompts: 2.4.2 puppeteer-core: 2.1.1 read-pkg-up: 7.0.1 - semver: 7.5.4 - simple-update-notifier: 2.0.0 + semver: 7.6.0 strip-json-comments: 3.1.1 tempy: 1.0.1 ts-dedent: 2.2.0 @@ -3669,79 +3671,85 @@ packages: - utf-8-validate dev: true - /@storybook/client-api@7.6.7: - resolution: {integrity: sha512-nhQL2dtr6/MHY+FPmK55lyLR0by+J6wnfbs8znkSC08zhRXwHBYQpX7TrBwq2RrmzWbIcqgWvIHpbDsKonMNjA==} + /@storybook/client-api@7.6.17: + resolution: {integrity: sha512-rsxKBRLtUmBXbxG79Pf1GzUuMDMsFdhNR/a5k7kIA/mlEsvWD8are/aH/zk1oLr7+5QOqEkiXLL6+Erry7dzXA==} + dependencies: + '@storybook/client-logger': 7.6.17 + '@storybook/preview-api': 7.6.17 + dev: true + + /@storybook/client-logger@7.6.17: + resolution: {integrity: sha512-6WBYqixAXNAXlSaBWwgljWpAu10tPRBJrcFvx2gPUne58EeMM20Gi/iHYBz2kMCY+JLAgeIH7ZxInqwO8vDwiQ==} dependencies: - '@storybook/client-logger': 7.6.7 - '@storybook/preview-api': 7.6.7 + '@storybook/global': 5.0.0 dev: true - /@storybook/client-logger@7.6.7: - resolution: {integrity: sha512-A16zpWgsa0gSdXMR9P3bWVdC9u/1B1oG4H7Z1+JhNzgnL3CdyOYO0qFSiAtNBso4nOjIAJVb6/AoBzdRhmSVQg==} + /@storybook/client-logger@7.6.18: + resolution: {integrity: sha512-/mSKa968G++M7RTW1XLM0jgNMUATxKv/vggLyQ9Oo2UpQhRaXX8dKRl7GVu2yFDRm9sDKs7rg+KSsstrEjQcSg==} dependencies: '@storybook/global': 5.0.0 dev: true - /@storybook/codemod@7.6.7: - resolution: {integrity: sha512-an2pD5OHqO7CE8Wb7JxjrDnpQgeoxB22MyOs8PPJ9Rvclhpjg+Ku9RogoObYm//zR4g406l7Ec8mTltUkVCEOA==} + /@storybook/codemod@7.6.18: + resolution: {integrity: sha512-XV9/oZYctRKQzllqjwcH17Fys91cmaL+/Vy9aJmpnv/+yNFUdvsyrjqEGfVpl5c00/Ge3ueP+y7YhLYSjTezUg==} dependencies: - '@babel/core': 7.23.7 - '@babel/preset-env': 7.23.7(@babel/core@7.23.7) - '@babel/types': 7.23.6 - '@storybook/csf': 0.1.2 - '@storybook/csf-tools': 7.6.7 - '@storybook/node-logger': 7.6.7 - '@storybook/types': 7.6.7 + '@babel/core': 7.24.4 + '@babel/preset-env': 7.24.4(@babel/core@7.24.4) + '@babel/types': 7.24.0 + '@storybook/csf': 0.1.5 + '@storybook/csf-tools': 7.6.18 + '@storybook/node-logger': 7.6.18 + '@storybook/types': 7.6.18 '@types/cross-spawn': 6.0.6 cross-spawn: 7.0.3 globby: 11.1.0 - jscodeshift: 0.15.1(@babel/preset-env@7.23.7) + jscodeshift: 0.15.2(@babel/preset-env@7.24.4) lodash: 4.17.21 prettier: 2.8.8 - recast: 0.23.4 + recast: 0.23.6 transitivePeerDependencies: - supports-color dev: true - /@storybook/components@7.6.7(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-1HN4p+MCI4Tx9VGZayZyqbW7SB7mXQLnS5fUbTE1gXaMYHpzFvcrRNROeV1LZPClJX6qx1jgE5ngZojhxGuxMA==} + /@storybook/components@7.6.18(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-t27jyQUTkLgpQc2b7AQ848MJkihOfTgXsDIIMW1sYixqYO1R2anWE2qF5+1ZXZ58xyQEbUWnWUNYrGj3jGwAOw==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@radix-ui/react-select': 1.2.2(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-toolbar': 1.0.4(@types/react@17.0.74)(react-dom@18.2.0)(react@18.2.0) - '@storybook/client-logger': 7.6.7 - '@storybook/csf': 0.1.2 + '@radix-ui/react-select': 1.2.2(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@radix-ui/react-toolbar': 1.0.4(@types/react@17.0.80)(react-dom@18.3.1)(react@18.3.1) + '@storybook/client-logger': 7.6.18 + '@storybook/csf': 0.1.5 '@storybook/global': 5.0.0 - '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0) - '@storybook/types': 7.6.7 + '@storybook/theming': 7.6.18(react-dom@18.3.1)(react@18.3.1) + '@storybook/types': 7.6.18 memoizerific: 1.11.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - use-resize-observer: 9.1.0(react-dom@18.2.0)(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + use-resize-observer: 9.1.0(react-dom@18.3.1)(react@18.3.1) util-deprecate: 1.0.2 transitivePeerDependencies: - '@types/react' - '@types/react-dom' dev: true - /@storybook/core-client@7.6.7: - resolution: {integrity: sha512-ZQivyEzYsZok8vRj5Qan7LbiMUnO89rueWzTnZs4IS6JIaQtjoPI1rGVq+h6qOCM6tki478hic8FS+zwGQ6q+w==} + /@storybook/core-client@7.6.18: + resolution: {integrity: sha512-gKelPHlE4Xr8mkC0q1CotxB1hoR54P94LeJ6NrmNp2W8vZLiV8d/3CShJwTyEEkhhOB8diEGyya2LawboMYPpg==} dependencies: - '@storybook/client-logger': 7.6.7 - '@storybook/preview-api': 7.6.7 + '@storybook/client-logger': 7.6.18 + '@storybook/preview-api': 7.6.18 dev: true - /@storybook/core-common@7.6.7: - resolution: {integrity: sha512-F1fJnauVSPQtAlpicbN/O4XW38Ai8kf/IoU0Hgm9gEwurIk6MF5hiVLsaTI/5GUbrepMl9d9J+iIL4lHAT8IyA==} + /@storybook/core-common@7.6.18: + resolution: {integrity: sha512-ZZbvjpDKs3KPyoUWLTaMn8/0N2S8tXZpMfdrZrHHOzy9O3mmbk2Silr1OytWS6CBICFgDb71p7EWZ026KOVNkA==} dependencies: - '@storybook/core-events': 7.6.7 - '@storybook/node-logger': 7.6.7 - '@storybook/types': 7.6.7 + '@storybook/core-events': 7.6.18 + '@storybook/node-logger': 7.6.18 + '@storybook/types': 7.6.18 '@types/find-cache-dir': 3.2.1 - '@types/node': 18.19.5 - '@types/node-fetch': 2.6.10 + '@types/node': 18.19.31 + '@types/node-fetch': 2.6.11 '@types/pretty-hrtime': 1.0.3 chalk: 4.1.2 esbuild: 0.18.20 @@ -3750,7 +3758,7 @@ packages: find-cache-dir: 3.3.2 find-up: 5.0.0 fs-extra: 11.2.0 - glob: 10.3.10 + glob: 10.3.12 handlebars: 4.7.8 lazy-universal-dotenv: 4.0.0 node-fetch: 2.7.0 @@ -3764,56 +3772,62 @@ packages: - supports-color dev: true - /@storybook/core-events@7.6.7: - resolution: {integrity: sha512-KZ5d03c47pnr5/kY26pJtWq7WpmCPXLbgyjJZDSc+TTY153BdZksvlBXRHtqM1yj2UM6QsSyIuiJaADJNAbP2w==} + /@storybook/core-events@7.6.17: + resolution: {integrity: sha512-AriWMCm/k1cxlv10f+jZ1wavThTRpLaN3kY019kHWbYT9XgaSuLU67G7GPr3cGnJ6HuA6uhbzu8qtqVCd6OfXA==} + dependencies: + ts-dedent: 2.2.0 + dev: true + + /@storybook/core-events@7.6.18: + resolution: {integrity: sha512-K4jrHedFRfokvkIfKfNtQTcguPzeWF3oiuyXQR4gv4bnMCndCoiSRKfCE5zesgGmfml/Krt2zb4nNz/UPLbDeA==} dependencies: ts-dedent: 2.2.0 dev: true - /@storybook/core-server@7.6.7: - resolution: {integrity: sha512-elKRv/DNahNNkGcQY/FdOBrLPmZF0T0fwmAmbc4qqeAisjl+to9TO77zdo2ieaEHKyRwE3B3dOB4EXomdF4N/g==} + /@storybook/core-server@7.6.18: + resolution: {integrity: sha512-LXsbVqsHHcF/9mCcCDebRUO+ZuvK10Xtrgt8KJfAuWGU2nj8D2sJLw7suuDEB7UBTNMsJMOAmyrVU9FQbfWLCQ==} dependencies: '@aw-web-design/x-default-browser': 1.4.126 '@discoveryjs/json-ext': 0.5.7 - '@storybook/builder-manager': 7.6.7 - '@storybook/channels': 7.6.7 - '@storybook/core-common': 7.6.7 - '@storybook/core-events': 7.6.7 - '@storybook/csf': 0.1.2 - '@storybook/csf-tools': 7.6.7 + '@storybook/builder-manager': 7.6.18 + '@storybook/channels': 7.6.18 + '@storybook/core-common': 7.6.18 + '@storybook/core-events': 7.6.18 + '@storybook/csf': 0.1.5 + '@storybook/csf-tools': 7.6.18 '@storybook/docs-mdx': 0.1.0 '@storybook/global': 5.0.0 - '@storybook/manager': 7.6.7 - '@storybook/node-logger': 7.6.7 - '@storybook/preview-api': 7.6.7 - '@storybook/telemetry': 7.6.7 - '@storybook/types': 7.6.7 + '@storybook/manager': 7.6.18 + '@storybook/node-logger': 7.6.18 + '@storybook/preview-api': 7.6.18 + '@storybook/telemetry': 7.6.18 + '@storybook/types': 7.6.18 '@types/detect-port': 1.3.5 - '@types/node': 18.19.5 + '@types/node': 18.19.31 '@types/pretty-hrtime': 1.0.3 - '@types/semver': 7.5.6 + '@types/semver': 7.5.8 better-opn: 3.0.2 chalk: 4.1.2 - cli-table3: 0.6.3 + cli-table3: 0.6.4 compression: 1.7.4 detect-port: 1.5.1 - express: 4.18.2 + express: 4.19.2 fs-extra: 11.2.0 globby: 11.1.0 - ip: 2.0.0 + ip: 2.0.1 lodash: 4.17.21 open: 8.4.2 pretty-hrtime: 1.0.3 prompts: 2.4.2 read-pkg-up: 7.0.1 - semver: 7.5.4 + semver: 7.6.0 telejson: 7.2.0 - tiny-invariant: 1.3.1 + tiny-invariant: 1.3.3 ts-dedent: 2.2.0 util: 0.12.5 util-deprecate: 1.0.2 - watchpack: 2.4.0 - ws: 8.16.0 + watchpack: 2.4.1 + ws: 8.17.0 transitivePeerDependencies: - bufferutil - encoding @@ -3821,33 +3835,33 @@ packages: - utf-8-validate dev: true - /@storybook/csf-plugin@7.6.7: - resolution: {integrity: sha512-YL7e6H4iVcsDI0UpgpdQX2IiGDrlbgaQMHQgDLWXmZyKxBcy0ONROAX5zoT1ml44EHkL60TMaG4f7SinviJCog==} + /@storybook/csf-plugin@7.6.18: + resolution: {integrity: sha512-dV/f0oIuv/OsmAh3FVqBkZAvQ5YRQXglZlHynaqt8cUVXi+Nsc/b7kFTBGj2GyIi9TCdiqfV5Yns+Bq2bIVHrA==} dependencies: - '@storybook/csf-tools': 7.6.7 - unplugin: 1.6.0 + '@storybook/csf-tools': 7.6.18 + unplugin: 1.10.1 transitivePeerDependencies: - supports-color dev: true - /@storybook/csf-tools@7.6.7: - resolution: {integrity: sha512-hyRbUGa2Uxvz3U09BjcOfMNf/5IYgRum1L6XszqK2O8tK9DGte1r6hArCIAcqiEmFMC40d0kalPzqu6WMNn7sg==} + /@storybook/csf-tools@7.6.18: + resolution: {integrity: sha512-ngRNHEtLJv6vMlqCeJaG8dh1CwtCaGCHi7xuS+b71Y97xXLJlA6RR9rhsMG6bDwMJR+xiIqKUc6HH3ZBSVVhiA==} dependencies: - '@babel/generator': 7.23.6 - '@babel/parser': 7.23.6 - '@babel/traverse': 7.23.7 - '@babel/types': 7.23.6 - '@storybook/csf': 0.1.2 - '@storybook/types': 7.6.7 + '@babel/generator': 7.24.4 + '@babel/parser': 7.24.4 + '@babel/traverse': 7.24.1 + '@babel/types': 7.24.0 + '@storybook/csf': 0.1.5 + '@storybook/types': 7.6.18 fs-extra: 11.2.0 - recast: 0.23.4 + recast: 0.23.6 ts-dedent: 2.2.0 transitivePeerDependencies: - supports-color dev: true - /@storybook/csf@0.1.2: - resolution: {integrity: sha512-ePrvE/pS1vsKR9Xr+o+YwdqNgHUyXvg+1Xjx0h9LrVx7Zq4zNe06pd63F5EvzTbCbJsHj7GHr9tkiaqm7U8WRA==} + /@storybook/csf@0.1.5: + resolution: {integrity: sha512-pW7Dtk/bE2JGrAe/KuBY4Io02NBe/2CLP2DkgVgWlSwvEVdm/rbQyiwy8RaL0lQlJCv9CsGBY+n9HQG8d4bZjQ==} dependencies: type-fest: 2.19.0 dev: true @@ -3856,12 +3870,12 @@ packages: resolution: {integrity: sha512-JDaBR9lwVY4eSH5W8EGHrhODjygPd6QImRbwjAuJNEnY0Vw4ie3bPkeGfnacB3OBW6u/agqPv2aRlR46JcAQLg==} dev: true - /@storybook/docs-tools@7.6.7: - resolution: {integrity: sha512-enTO/xVjBqwUraGCYTwdyjMvug3OSAM7TPPUEJ3KPieJNwAzcYkww/qNDMIAR4S39zPMrkAmtS3STvVadlJz7g==} + /@storybook/docs-tools@7.6.18: + resolution: {integrity: sha512-gE4He4YoOAFnFwarSsOJVLC1YVN6iilQXMZsKD2SNI0M30nOeqK5NjFwXtAklq6QQvBZVZV7VRG5sY7i4aGBcQ==} dependencies: - '@storybook/core-common': 7.6.7 - '@storybook/preview-api': 7.6.7 - '@storybook/types': 7.6.7 + '@storybook/core-common': 7.6.18 + '@storybook/preview-api': 7.6.18 + '@storybook/types': 7.6.18 '@types/doctrine': 0.0.3 assert: 2.1.0 doctrine: 3.0.0 @@ -3875,21 +3889,21 @@ packages: resolution: {integrity: sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==} dev: true - /@storybook/manager-api@7.6.7(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-3Wk/BvuGUlw/X05s57zZO7gJbzfUeE9Xe+CSIvuH7RY5jx9PYnNwqNlTXPXhJ5LPvwMthae7WJVn3SuBpbptoQ==} + /@storybook/manager-api@7.6.18(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-4c2japUMjnHiel38wQoNWh5RVac6ATMcWxvzPhOKx3I19gbSoUF1CcDg+1piRMWuSyzUBIBlIrBB3s4/02gnnA==} dependencies: - '@storybook/channels': 7.6.7 - '@storybook/client-logger': 7.6.7 - '@storybook/core-events': 7.6.7 - '@storybook/csf': 0.1.2 + '@storybook/channels': 7.6.18 + '@storybook/client-logger': 7.6.18 + '@storybook/core-events': 7.6.18 + '@storybook/csf': 0.1.5 '@storybook/global': 5.0.0 - '@storybook/router': 7.6.7 - '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0) - '@storybook/types': 7.6.7 + '@storybook/router': 7.6.18 + '@storybook/theming': 7.6.18(react-dom@18.3.1)(react@18.3.1) + '@storybook/types': 7.6.18 dequal: 2.0.3 lodash: 4.17.21 memoizerific: 1.11.3 - store2: 2.14.2 + store2: 2.14.3 telejson: 7.2.0 ts-dedent: 2.2.0 transitivePeerDependencies: @@ -3897,73 +3911,92 @@ packages: - react-dom dev: true - /@storybook/manager@7.6.7: - resolution: {integrity: sha512-ZCrkB2zEXogzdOcVzD242ZVm4tlHqrayotnI6iOn9uiun0Pgny0m2d7s9Zge6K2dTOO1vZiOHuA/Mr6nnIDjsA==} + /@storybook/manager@7.6.18: + resolution: {integrity: sha512-ZFatbkbK5qv2a4jJEm6WqKZZqkYm++t0uAZozBA6TNq/bWMaD9ihummPTGND8R0M7SW0rfUVFDAE8bv14gLcdg==} dev: true /@storybook/mdx2-csf@1.1.0: resolution: {integrity: sha512-TXJJd5RAKakWx4BtpwvSNdgTDkKM6RkXU8GK34S/LhidQ5Pjz3wcnqb0TxEkfhK/ztbP8nKHqXFwLfa2CYkvQw==} dev: true - /@storybook/node-logger@7.6.7: - resolution: {integrity: sha512-XLih8MxylkpZG9+8tgp8sPGc2tldlWF+DpuAkUv6J3Mc81mPyc3cQKQWZ7Hb+m1LpRGqKV4wyOQj1rC+leVMoQ==} + /@storybook/node-logger@7.6.18: + resolution: {integrity: sha512-e75XQ6TekxjpzdlW6rZAFtv/9aD/nQb4z9kaBr3GhuVMGVJNihs9ek6eVEFZLxpks4FDVSPTSg0QtFpSgOpbrg==} dev: true - /@storybook/postinstall@7.6.7: - resolution: {integrity: sha512-mrpRmcwFd9FcvtHPXA9x6vOrHLVCKScZX/Xx2QPWgAvB3W6uzP8G+8QNb1u834iToxrWeuszUMB9UXZK4Qj5yg==} + /@storybook/postinstall@7.6.18: + resolution: {integrity: sha512-TTTvuR6LyaRfzrtJvSr+L4Bys8gp3wOKACOErZBXjt3UCQR4rwhwGP7k2GsysiHHLbxGu25ZU2fnnT2OYYeTNA==} + dev: true + + /@storybook/preview-api@7.6.17: + resolution: {integrity: sha512-wLfDdI9RWo1f2zzFe54yRhg+2YWyxLZvqdZnSQ45mTs4/7xXV5Wfbv3QNTtcdw8tT3U5KRTrN1mTfTCiRJc0Kw==} + dependencies: + '@storybook/channels': 7.6.17 + '@storybook/client-logger': 7.6.17 + '@storybook/core-events': 7.6.17 + '@storybook/csf': 0.1.5 + '@storybook/global': 5.0.0 + '@storybook/types': 7.6.17 + '@types/qs': 6.9.15 + dequal: 2.0.3 + lodash: 4.17.21 + memoizerific: 1.11.3 + qs: 6.12.1 + synchronous-promise: 2.0.17 + ts-dedent: 2.2.0 + util-deprecate: 1.0.2 dev: true - /@storybook/preview-api@7.6.7: - resolution: {integrity: sha512-ja85ItrT6q2TeBQ6n0CNoRi1R6L8yF2kkis9hVeTQHpwLdZyHUTRqqR5WmhtLqqQXcofyasBPOeJV06wuOhgRQ==} + /@storybook/preview-api@7.6.18: + resolution: {integrity: sha512-X3r3MnoLJWUhHTVFggJcfHzDLCKSOdHNOpXXRNkdG2WXFcCZAlTdm0KqThCvQmdqS4OAOJMfn4pHqtxPG8yfyg==} dependencies: - '@storybook/channels': 7.6.7 - '@storybook/client-logger': 7.6.7 - '@storybook/core-events': 7.6.7 - '@storybook/csf': 0.1.2 + '@storybook/channels': 7.6.18 + '@storybook/client-logger': 7.6.18 + '@storybook/core-events': 7.6.18 + '@storybook/csf': 0.1.5 '@storybook/global': 5.0.0 - '@storybook/types': 7.6.7 - '@types/qs': 6.9.11 + '@storybook/types': 7.6.18 + '@types/qs': 6.9.15 dequal: 2.0.3 lodash: 4.17.21 memoizerific: 1.11.3 - qs: 6.11.2 + qs: 6.12.1 synchronous-promise: 2.0.17 ts-dedent: 2.2.0 util-deprecate: 1.0.2 dev: true - /@storybook/preview@7.6.7: - resolution: {integrity: sha512-/ddKIyT+6b8CKGJAma1wood4nwCAoi/E1olCqgpCmviMeUtAiMzgK0xzPwvq5Mxkz/cPeXVi8CQgaQZCa4yvNA==} + /@storybook/preview@7.6.18: + resolution: {integrity: sha512-iltkZxz991GmzXMNkM9b7ddM45IsfZoQ+pMGXOv902Xawx9otvNkMVxBMhpXG+tf7G3FrSM1DFT6V9SycC6pqg==} dev: true - /@storybook/react-dom-shim@7.6.7(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-b/rmy/YzVrwP+ifyZG4yXVIdeFVdTbmziodHUlbrWiUNsqtTZZur9kqkKRUH/7ofji9MFe81nd0MRlcTNFomqg==} + /@storybook/react-dom-shim@7.6.18(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-s4eIq5KVnS7E4pIXdq31YzqRZX0FZEYKoUeZziBBajRvmPAJ/zWSBbrGeOIR71xDHT7UkUoeb5EuyfykS9yuoA==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@storybook/react-vite@7.6.7(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5)(vite@4.5.1): - resolution: {integrity: sha512-1cBpxVZ4vLO5rGbhTBNR2SjL+ZePCUAEY+I31tbORYFAoOKmlsNef4fRLnXJ9NYUAyjwZpUmbW0cIxxOFk7nGA==} + /@storybook/react-vite@7.6.18(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5)(vite@4.5.3): + resolution: {integrity: sha512-7Q4x7SEA9ajb348z5bX+dXM8x+JWgLus1xGPySnVKariYrlgmJrSbFSE07oMsA0m0Y2mwXzWQgv7imjU7Jwklg==} engines: {node: '>=16'} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 vite: ^3.0.0 || ^4.0.0 || ^5.0.0 dependencies: - '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@4.9.5)(vite@4.5.1) + '@joshwooding/vite-plugin-react-docgen-typescript': 0.3.0(typescript@4.9.5)(vite@4.5.3) '@rollup/pluginutils': 5.1.0 - '@storybook/builder-vite': 7.6.7(typescript@4.9.5)(vite@4.5.1) - '@storybook/react': 7.6.7(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5) - '@vitejs/plugin-react': 3.1.0(vite@4.5.1) - magic-string: 0.30.5 - react: 18.2.0 - react-docgen: 7.0.1 - react-dom: 18.2.0(react@18.2.0) - vite: 4.5.1 + '@storybook/builder-vite': 7.6.18(typescript@4.9.5)(vite@4.5.3) + '@storybook/react': 7.6.18(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5) + '@vitejs/plugin-react': 3.1.0(vite@4.5.3) + magic-string: 0.30.10 + react: 18.3.1 + react-docgen: 7.0.3 + react-dom: 18.3.1(react@18.3.1) + vite: 4.5.3 transitivePeerDependencies: - '@preact/preset-vite' - encoding @@ -3973,8 +4006,8 @@ packages: - vite-plugin-glimmerx dev: true - /@storybook/react@7.6.7(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.5): - resolution: {integrity: sha512-uT9IBPDM1SQg6FglWqb7IemOJ1Z8kYB5rehIDEDToi0u5INihSY8rHd003TxG4Wx4REp6J+rfbDJO2aVui/gxA==} + /@storybook/react@7.6.18(react-dom@18.3.1)(react@18.3.1)(typescript@4.9.5): + resolution: {integrity: sha512-cWAMz8W7Xa1fv8ugFsUCw0w08GsWGGw5XiYgLJJ+2/zQNhkMGzsY9zl7XQtULhIBfY0MptC7CLIYHc0t61xvHw==} engines: {node: '>=16.0.0'} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -3984,16 +4017,16 @@ packages: typescript: optional: true dependencies: - '@storybook/client-logger': 7.6.7 - '@storybook/core-client': 7.6.7 - '@storybook/docs-tools': 7.6.7 + '@storybook/client-logger': 7.6.18 + '@storybook/core-client': 7.6.18 + '@storybook/docs-tools': 7.6.18 '@storybook/global': 5.0.0 - '@storybook/preview-api': 7.6.7 - '@storybook/react-dom-shim': 7.6.7(react-dom@18.2.0)(react@18.2.0) - '@storybook/types': 7.6.7 + '@storybook/preview-api': 7.6.18 + '@storybook/react-dom-shim': 7.6.18(react-dom@18.3.1)(react@18.3.1) + '@storybook/types': 7.6.18 '@types/escodegen': 0.0.6 '@types/estree': 0.0.51 - '@types/node': 18.19.5 + '@types/node': 18.19.31 acorn: 7.4.1 acorn-jsx: 5.3.2(acorn@7.4.1) acorn-walk: 7.2.0 @@ -4001,9 +4034,9 @@ packages: html-tags: 3.3.1 lodash: 4.17.21 prop-types: 15.8.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-element-to-jsx-string: 15.0.0(react-dom@18.2.0)(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-element-to-jsx-string: 15.0.0(react-dom@18.3.1)(react@18.3.1) ts-dedent: 2.2.0 type-fest: 2.19.0 typescript: 4.9.5 @@ -4013,20 +4046,20 @@ packages: - supports-color dev: true - /@storybook/router@7.6.7: - resolution: {integrity: sha512-kkhNSdC3fXaQxILg8a26RKk4/ZbF/AUVrepUEyO8lwvbJ6LItTyWSE/4I9Ih4qV2Mjx33ncc8vLqM9p8r5qnMA==} + /@storybook/router@7.6.18: + resolution: {integrity: sha512-Kw6nAPWRAFE9DM//pnyjL7Xnxt+yQIONdERDnPrdEmHG5mErXGtO18aFMsb/7GiAD50J/i5ObTp7FJsWffAnbg==} dependencies: - '@storybook/client-logger': 7.6.7 + '@storybook/client-logger': 7.6.18 memoizerific: 1.11.3 - qs: 6.11.2 + qs: 6.12.1 dev: true - /@storybook/telemetry@7.6.7: - resolution: {integrity: sha512-NHGzC/LGLXpK4AFbVj8ln5ab86ZiiNFvORQMn3+LNGwUt3ZdsHBzExN+WPZdw7OPtfk4ubUY89FXH2GedhTALw==} + /@storybook/telemetry@7.6.18: + resolution: {integrity: sha512-fVgQtWYpAA1Htiu05GwipBNM5odCi05FpaoaxnCO/CsqrTfKYBJTorVo8mh8wc03gfQJs1/nXN2v0WEo0ahUoA==} dependencies: - '@storybook/client-logger': 7.6.7 - '@storybook/core-common': 7.6.7 - '@storybook/csf-tools': 7.6.7 + '@storybook/client-logger': 7.6.18 + '@storybook/core-common': 7.6.18 + '@storybook/csf-tools': 7.6.18 chalk: 4.1.2 detect-package-manager: 2.0.1 fetch-retry: 5.0.6 @@ -4037,24 +4070,33 @@ packages: - supports-color dev: true - /@storybook/theming@7.6.7(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-+42rfC4rZtWVAXJ7JBUQKnQ6vWBXJVHZ9HtNUWzQLPR9sJSMmHnnSMV6y5tizGgZqmBnAIkuoYk+Tt6NfwUmSA==} + /@storybook/theming@7.6.18(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-5nwqV/rAVzS8wZ6DbsX5/ugDLV189hn2m3K9JlJmhVW9b2mSDYW5i1cTjpoChh1t9gMZl82VPnEhgPRMx5bXgw==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) - '@storybook/client-logger': 7.6.7 + '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.3.1) + '@storybook/client-logger': 7.6.18 '@storybook/global': 5.0.0 memoizerific: 1.11.3 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /@storybook/types@7.6.7: - resolution: {integrity: sha512-VcGwrI4AkBENxkoAUJ+Z7SyMK73hpoY0TTtw2J7tc05/xdiXhkQTX15Qa12IBWIkoXCyNrtaU+q7KR8Tjzi+uw==} + /@storybook/types@7.6.17: + resolution: {integrity: sha512-GRY0xEJQ0PrL7DY2qCNUdIfUOE0Gsue6N+GBJw9ku1IUDFLJRDOF+4Dx2BvYcVCPI5XPqdWKlEyZdMdKjiQN7Q==} dependencies: - '@storybook/channels': 7.6.7 + '@storybook/channels': 7.6.17 + '@types/babel__core': 7.20.5 + '@types/express': 4.17.21 + file-system-cache: 2.3.0 + dev: true + + /@storybook/types@7.6.18: + resolution: {integrity: sha512-W7/8kUtMhEopZhwXFMOKlXwQCrz0PBJ5wQwmJNZ4i0YPTVfFzb+/6pgpkzUNtbXiTp6dfxi3ERoAF9wz9Zyt7w==} + dependencies: + '@storybook/channels': 7.6.18 '@types/babel__core': 7.20.5 '@types/express': 4.17.21 file-system-cache: 2.3.0 @@ -4073,30 +4115,30 @@ packages: tslib: 2.6.2 dev: false - /@swc/helpers@0.5.3: - resolution: {integrity: sha512-FaruWX6KdudYloq1AHD/4nU+UsMTdNE8CKyrseXWEcgjDAbvkwJg2QGPAnfIJLIWsjZOSPLOAykK6fuYp4vp4A==} + /@swc/helpers@0.5.11: + resolution: {integrity: sha512-YNlnKRWF2sVojTpIyzwou9XoTNbzbzONwRhOoniEioF1AtaitTvVZblaQRrAzChWQ1bLYyYSWzM18y4WwgzJ+A==} dependencies: tslib: 2.6.2 dev: false - /@tanstack/query-core@5.28.13: - resolution: {integrity: sha512-C3+CCOcza+mrZ7LglQbjeYEOTEC3LV0VN0eYaIN6GvqAZ8Foegdgch7n6QYPtT4FuLae5ALy+m+ZMEKpD6tMCQ==} + /@tanstack/query-core@5.32.0: + resolution: {integrity: sha512-Z3flEgCat55DRXU5UMwYU1U+DgFZKA3iufyOKs+II7iRAo0uXkeU7PH5e6sOH1CGEag0IpKmZxlUFpCg6roSKw==} dev: false - /@tanstack/react-query@5.28.14(react@18.2.0): - resolution: {integrity: sha512-cZqt03Igb3I9tM72qNX5TAAmeYl75Z+k4Mv92VkXIXc2hCrv0fIywd7GN3JV1BBJl4mr7Cc+OOKKOPy8sNVOkA==} + /@tanstack/react-query@5.32.0(react@18.3.1): + resolution: {integrity: sha512-+E3UudQtarnx9A6xhpgMZapyF+aJfNBGFMgI459FnduEZqT/9KhOWnMOneZahLRt52yzskSA0AuOyLkXHK0yBA==} peerDependencies: react: ^18.0.0 dependencies: - '@tanstack/query-core': 5.28.13 - react: 18.2.0 + '@tanstack/query-core': 5.32.0 + react: 18.3.1 dev: false /@types/babel__core@7.20.5: resolution: {integrity: sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==} dependencies: - '@babel/parser': 7.23.6 - '@babel/types': 7.23.6 + '@babel/parser': 7.24.4 + '@babel/types': 7.24.0 '@types/babel__generator': 7.6.8 '@types/babel__template': 7.4.4 '@types/babel__traverse': 7.20.5 @@ -4105,39 +4147,39 @@ packages: /@types/babel__generator@7.6.8: resolution: {integrity: sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==} dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 dev: true /@types/babel__template@7.4.4: resolution: {integrity: sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==} dependencies: - '@babel/parser': 7.23.6 - '@babel/types': 7.23.6 + '@babel/parser': 7.24.4 + '@babel/types': 7.24.0 dev: true /@types/babel__traverse@7.20.5: resolution: {integrity: sha512-WXCyOcRtH37HAUkpXhUduaxdm82b4GSlyTqajXviN4EfiuPgNYR109xMCKvpl6zPIpua0DGlMEDCq+g8EdoheQ==} dependencies: - '@babel/types': 7.23.6 + '@babel/types': 7.24.0 dev: true /@types/body-parser@1.19.5: resolution: {integrity: sha512-fB3Zu92ucau0iQ0JMCFQE7b/dv8Ot07NI3KaZIkIUNXq82k4eBAqUaneXfleGY9JWskeS9y+u0nXMyspcuQrCg==} dependencies: '@types/connect': 3.4.38 - '@types/node': 20.10.7 + '@types/node': 20.12.7 dev: true /@types/connect@3.4.38: resolution: {integrity: sha512-K6uROf1LD88uDQqJCktA4yzL1YYAK6NgfsI0v/mTgyPKWsX1CnJ0XPSDhViejru1GcRkLWb8RlzFYJRqGUbaug==} dependencies: - '@types/node': 20.10.7 + '@types/node': 20.12.7 dev: true /@types/cross-spawn@6.0.6: resolution: {integrity: sha512-fXRhhUkG4H3TQk5dBhQ7m/JDdSNHKwR2BBia62lhwEIq9xGiQKLxd6LymNhn47SjXhsUEPmxi+PKw2OkW4LLjA==} dependencies: - '@types/node': 20.10.7 + '@types/node': 20.12.7 dev: true /@types/detect-port@1.3.5: @@ -4167,12 +4209,12 @@ packages: /@types/eslint-scope@3.7.7: resolution: {integrity: sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==} dependencies: - '@types/eslint': 8.56.1 + '@types/eslint': 8.56.10 '@types/estree': 1.0.5 dev: true - /@types/eslint@8.56.1: - resolution: {integrity: sha512-18PLWRzhy9glDQp3+wOgfLYRWlhgX0azxgJ63rdpoUHyrC9z0f5CkFburjQx4uD7ZCruw85ZtMt6K+L+R8fLJQ==} + /@types/eslint@8.56.10: + resolution: {integrity: sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==} dependencies: '@types/estree': 1.0.5 '@types/json-schema': 7.0.15 @@ -4186,11 +4228,11 @@ packages: resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==} dev: true - /@types/express-serve-static-core@4.17.41: - resolution: {integrity: sha512-OaJ7XLaelTgrvlZD8/aa0vvvxZdUmlCn6MtWeB7TkiKW70BQLc9XEPpDLPdbo52ZhXUCrznlWdCHWxJWtdyajA==} + /@types/express-serve-static-core@4.19.0: + resolution: {integrity: sha512-bGyep3JqPCRry1wq+O5n7oiBgGWmeIJXPjXXCo8EK0u8duZGSYar7cGqd3ML2JUsLGeB7fmc06KYo9fLGWqPvQ==} dependencies: - '@types/node': 20.10.7 - '@types/qs': 6.9.11 + '@types/node': 20.12.7 + '@types/qs': 6.9.15 '@types/range-parser': 1.2.7 '@types/send': 0.17.4 dev: true @@ -4199,9 +4241,9 @@ packages: resolution: {integrity: sha512-ejlPM315qwLpaQlQDTjPdsUFSc6ZsP4AN6AlWnogPjQ7CVi7PYF3YVz+CY3jE2pwYf7E/7HlDAN0rV2GxTG0HQ==} dependencies: '@types/body-parser': 1.19.5 - '@types/express-serve-static-core': 4.17.41 - '@types/qs': 6.9.11 - '@types/serve-static': 1.15.5 + '@types/express-serve-static-core': 4.19.0 + '@types/qs': 6.9.15 + '@types/serve-static': 1.15.7 dev: true /@types/find-cache-dir@3.2.1: @@ -4212,19 +4254,19 @@ packages: resolution: {integrity: sha512-ZUxbzKl0IfJILTS6t7ip5fQQM/J3TJYubDm3nMbgubNNYS62eXeUpoLUC8/7fJNiFYHTrGPQn7hspDUzIHX3UA==} dependencies: '@types/minimatch': 5.1.2 - '@types/node': 20.10.7 + '@types/node': 20.12.7 dev: true /@types/graceful-fs@4.1.9: resolution: {integrity: sha512-olP3sd1qOEe5dXTSaFvQG+02VdRXcdytWLAZsAq1PecU8uqQAhkrnbli7DagjtXKW/Bl7YJbUsa8MPcuc8LHEQ==} dependencies: - '@types/node': 20.10.7 + '@types/node': 20.12.7 dev: true /@types/hoist-non-react-statics@3.3.5: resolution: {integrity: sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==} dependencies: - '@types/react': 17.0.74 + '@types/react': 17.0.80 hoist-non-react-statics: 3.3.2 /@types/http-errors@2.0.4: @@ -4247,8 +4289,8 @@ packages: '@types/istanbul-lib-report': 3.0.3 dev: true - /@types/jest@29.5.11: - resolution: {integrity: sha512-S2mHmYIVe13vrm6q4kN6fLYYAka15ALQki/vgDC3mIukEOx8WJlv0kQPM+d4w8Gp6u0uSdKND04IlTXBv0rwnQ==} + /@types/jest@29.5.12: + resolution: {integrity: sha512-eDC8bTvT/QhYdxJAulQikueigY5AsdBRH2yDKW3yveW7svY3+DzN84/2NUgkw10RTiJbWqZrTtoGVdYlvFJdLw==} dependencies: expect: 29.7.0 pretty-format: 29.7.0 @@ -4266,12 +4308,12 @@ packages: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: true - /@types/lodash@4.14.202: - resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==} + /@types/lodash@4.17.0: + resolution: {integrity: sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==} dev: true - /@types/mdx@2.0.10: - resolution: {integrity: sha512-Rllzc5KHk0Al5/WANwgSPl1/CwjqCy+AZrGd78zuK+jO9aDM6ffblZ+zIjgPNAaEBmlO0RYDvLNh7wD0zKVgEg==} + /@types/mdx@2.0.13: + resolution: {integrity: sha512-+OWZQfAYyio6YkJb3HLxDrvnx6SWWDbC0zVPfBRzUk0/nqoDyf6dNxQi3eArPe8rJ473nobTMQ/8Zk+LxJ+Yuw==} dev: true /@types/mime-types@2.1.4: @@ -4282,10 +4324,6 @@ packages: resolution: {integrity: sha512-/pyBZWSLD2n0dcHE3hq8s8ZvcETHtEuF+3E7XVt0Ig2nvsVQXdghHVcEkIWjy9A0wKfTn97a/PSDYohKIlnP/w==} dev: true - /@types/mime@3.0.4: - resolution: {integrity: sha512-iJt33IQnVRkqeqC7PzBHPTC6fDlRNRW8vjrgqtScAhrmMwe8c4Eo7+fUGTa+XdWrpEgpyKWMYmi2dIwMAYRzPw==} - dev: true - /@types/minimatch@5.1.2: resolution: {integrity: sha512-K0VQKziLUWkVKiRVrx4a40iPaxTUefQmjtkQofBkYRcoaaL/8rhwDWww9qWbrgicNOgnpIsMxyNIUM4+n6dUIA==} dev: true @@ -4294,21 +4332,21 @@ packages: resolution: {integrity: sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==} dev: true - /@types/node-fetch@2.6.10: - resolution: {integrity: sha512-PPpPK6F9ALFTn59Ka3BaL+qGuipRfxNE8qVgkp0bVixeiR2c2/L+IVOiBdu9JhhT22sWnQEp6YyHGI2b2+CMcA==} + /@types/node-fetch@2.6.11: + resolution: {integrity: sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g==} dependencies: - '@types/node': 18.19.5 + '@types/node': 18.19.31 form-data: 4.0.0 dev: true - /@types/node@18.19.5: - resolution: {integrity: sha512-22MG6T02Hos2JWfa1o5jsIByn+bc5iOt1IS4xyg6OG68Bu+wMonVZzdrgCw693++rpLE9RUT/Bx15BeDzO0j+g==} + /@types/node@18.19.31: + resolution: {integrity: sha512-ArgCD39YpyyrtFKIqMDvjz79jto5fcI/SVUs2HwB+f0dAzq68yqOdyaSivLiLugSziTpNXLQrVb7RZFmdZzbhA==} dependencies: undici-types: 5.26.5 dev: true - /@types/node@20.10.7: - resolution: {integrity: sha512-fRbIKb8C/Y2lXxB5eVMj4IU7xpdox0Lh8bUPEdtLysaylsml1hOOx1+STloRs/B9nf7C6kPRmmg/V7aQW7usNg==} + /@types/node@20.12.7: + resolution: {integrity: sha512-wq0cICSkRLVaf3UGLMGItu/PtdY7oaXaI/RVU+xliKVOtRna3PRY57ZDfztpDL0n11vfymMUnXv8QwYCO7L1wg==} dependencies: undici-types: 5.26.5 dev: true @@ -4333,11 +4371,11 @@ packages: resolution: {integrity: sha512-nj39q0wAIdhwn7DGUyT9irmsKK1tV0bd5WFEhgpqNTMFZ8cE+jieuTphCW0tfdm47S2zVT5mr09B28b1chmQMA==} dev: true - /@types/prop-types@15.7.11: - resolution: {integrity: sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==} + /@types/prop-types@15.7.12: + resolution: {integrity: sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==} - /@types/qs@6.9.11: - resolution: {integrity: sha512-oGk0gmhnEJK4Yyk+oI7EfXsLayXatCWPHary1MtcmbAifkobT9cM9yutG/hZKIseOU0MqbIwQ/u2nn/Gb+ltuQ==} + /@types/qs@6.9.15: + resolution: {integrity: sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg==} dev: true /@types/range-parser@1.2.7: @@ -4347,31 +4385,31 @@ packages: /@types/react-helmet@6.1.11: resolution: {integrity: sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==} dependencies: - '@types/react': 17.0.74 + '@types/react': 17.0.80 dev: true /@types/react-infinite-scroller@1.2.5: resolution: {integrity: sha512-fJU1jhMgoL6NJFrqTM0Ob7tnd2sQWGxe2ESwiU6FZWbJK/VO/Er5+AOhc+e2zbT0dk5pLygqctsulOLJ8xnSzw==} dependencies: - '@types/react': 17.0.74 + '@types/react': 17.0.80 dev: true /@types/react-mentions@4.1.13: resolution: {integrity: sha512-kRulAAjlmhCtsJ9bapO0foocknaE/rEuFKpmFEU81fBfnXZmZNBaJ9J/DBjwigT3WDHjQVUmYoi5sxEXrcdzAw==} dependencies: - '@types/react': 17.0.74 + '@types/react': 17.0.80 dev: true /@types/react-timeago@4.1.7: resolution: {integrity: sha512-ogD4Ror/hDG+pQggCX+TgPgJ8W2jeeUxsgNU485Qpm0Ma+E2TND2EJuKwK5+sxlkDXDEgsHradO0zWBkTgLzNg==} dependencies: - '@types/react': 17.0.74 + '@types/react': 17.0.80 dev: true - /@types/react@17.0.74: - resolution: {integrity: sha512-nBtFGaeTMzpiL/p73xbmCi00SiCQZDTJUk9ZuHOLtil3nI+y7l269LHkHIAYpav99ZwGnPJzuJsJpfLXjiQ52g==} + /@types/react@17.0.80: + resolution: {integrity: sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA==} dependencies: - '@types/prop-types': 15.7.11 + '@types/prop-types': 15.7.12 '@types/scheduler': 0.16.8 csstype: 3.1.3 @@ -4382,23 +4420,23 @@ packages: /@types/scheduler@0.16.8: resolution: {integrity: sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==} - /@types/semver@7.5.6: - resolution: {integrity: sha512-dn1l8LaMea/IjDoHNd9J52uBbInB796CDffS6VdIxvqYCPSG0V0DzHp76GpaWnlhg88uYyPbXCDIowa86ybd5A==} + /@types/semver@7.5.8: + resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==} dev: true /@types/send@0.17.4: resolution: {integrity: sha512-x2EM6TJOybec7c52BX0ZspPodMsQUd5L6PRwOunVyVUhXiBSKf3AezDL8Dgvgt5o0UfKNfuA0eMLr2wLT4AiBA==} dependencies: '@types/mime': 1.3.5 - '@types/node': 20.10.7 + '@types/node': 20.12.7 dev: true - /@types/serve-static@1.15.5: - resolution: {integrity: sha512-PDRk21MnK70hja/YF8AHfC7yIsiQHn1rcXx7ijCFBX/k+XQJhQT/gw3xekXKJvx+5SXaMMS8oqQy09Mzvz2TuQ==} + /@types/serve-static@1.15.7: + resolution: {integrity: sha512-W8Ym+h8nhuRwaKPaDw34QUkwsGi6Rc4yYqvKFo5rm2FUEhCFbzVWrxXUxuKK8TASjWsysJY0nsmNCGhCOIsrOw==} dependencies: '@types/http-errors': 2.0.4 - '@types/mime': 3.0.4 - '@types/node': 20.10.7 + '@types/node': 20.12.7 + '@types/send': 0.17.4 dev: true /@types/stack-utils@2.0.3: @@ -4409,7 +4447,7 @@ packages: resolution: {integrity: sha512-mmiVvwpYklFIv9E8qfxuPyIt/OuyIrn6gMOAMOFUO3WJfSrSE+sGUoa4PiZj77Ut7bKZpaa6o1fBKS/4TOEvnA==} dependencies: '@types/hoist-non-react-statics': 3.3.5 - '@types/react': 17.0.74 + '@types/react': 17.0.80 csstype: 3.1.3 dev: true @@ -4421,8 +4459,8 @@ packages: resolution: {integrity: sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA==} dev: true - /@types/uuid@9.0.7: - resolution: {integrity: sha512-WUtIVRUZ9i5dYXefDEAI7sh9/O7jGvHg7Df/5O/gtH3Yabe5odI3UWopVR1qbPXQtvOxWu3mM4XxlYeZtMWF4g==} + /@types/uuid@9.0.8: + resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==} dev: true /@types/yargs-parser@21.0.3: @@ -4435,8 +4473,8 @@ packages: '@types/yargs-parser': 21.0.3 dev: true - /@typescript-eslint/eslint-plugin@6.18.0(@typescript-eslint/parser@6.18.0)(eslint@8.56.0)(typescript@4.9.5): - resolution: {integrity: sha512-3lqEvQUdCozi6d1mddWqd+kf8KxmGq2Plzx36BlkjuQe3rSTm/O98cLf0A4uDO+a5N1KD2SeEEl6fW97YHY+6w==} + /@typescript-eslint/eslint-plugin@6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@4.9.5): + resolution: {integrity: sha512-oy9+hTPCUFpngkEZUSzbf9MxI65wbKFoQYsgPdILTfbUldp5ovUuphZVe4i30emU9M/kP+T64Di0mxl7dSw3MA==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha @@ -4447,25 +4485,25 @@ packages: optional: true dependencies: '@eslint-community/regexpp': 4.10.0 - '@typescript-eslint/parser': 6.18.0(eslint@8.56.0)(typescript@4.9.5) - '@typescript-eslint/scope-manager': 6.18.0 - '@typescript-eslint/type-utils': 6.18.0(eslint@8.56.0)(typescript@4.9.5) - '@typescript-eslint/utils': 6.18.0(eslint@8.56.0)(typescript@4.9.5) - '@typescript-eslint/visitor-keys': 6.18.0 + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@4.9.5) + '@typescript-eslint/scope-manager': 6.21.0 + '@typescript-eslint/type-utils': 6.21.0(eslint@8.57.0)(typescript@4.9.5) + '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@4.9.5) + '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.4 - eslint: 8.56.0 + eslint: 8.57.0 graphemer: 1.4.0 - ignore: 5.3.0 + ignore: 5.3.1 natural-compare: 1.4.0 - semver: 7.5.4 - ts-api-utils: 1.0.3(typescript@4.9.5) + semver: 7.6.0 + ts-api-utils: 1.3.0(typescript@4.9.5) typescript: 4.9.5 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/parser@6.18.0(eslint@8.56.0)(typescript@4.9.5): - resolution: {integrity: sha512-v6uR68SFvqhNQT41frCMCQpsP+5vySy6IdgjlzUWoo7ALCnpaWYcz/Ij2k4L8cEsL0wkvOviCMpjmtRtHNOKzA==} + /@typescript-eslint/parser@6.21.0(eslint@8.57.0)(typescript@4.9.5): + resolution: {integrity: sha512-tbsV1jPne5CkFQCgPBcDOt30ItF7aJoZL997JSF7MhGQqOeT3svWRYxiqlfA5RUdlHN6Fi+EI9bxqbdyAUZjYQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -4474,12 +4512,12 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/scope-manager': 6.18.0 - '@typescript-eslint/types': 6.18.0 - '@typescript-eslint/typescript-estree': 6.18.0(typescript@4.9.5) - '@typescript-eslint/visitor-keys': 6.18.0 + '@typescript-eslint/scope-manager': 6.21.0 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/typescript-estree': 6.21.0(typescript@4.9.5) + '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.4 - eslint: 8.56.0 + eslint: 8.57.0 typescript: 4.9.5 transitivePeerDependencies: - supports-color @@ -4493,16 +4531,16 @@ packages: '@typescript-eslint/visitor-keys': 5.62.0 dev: true - /@typescript-eslint/scope-manager@6.18.0: - resolution: {integrity: sha512-o/UoDT2NgOJ2VfHpfr+KBY2ErWvCySNUIX/X7O9g8Zzt/tXdpfEU43qbNk8LVuWUT2E0ptzTWXh79i74PP0twA==} + /@typescript-eslint/scope-manager@6.21.0: + resolution: {integrity: sha512-OwLUIWZJry80O99zvqXVEioyniJMa+d2GrqpUTqi5/v5D5rOrppJVBPa0yKCblcigC0/aYAzxxqQ1B+DS2RYsg==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 6.18.0 - '@typescript-eslint/visitor-keys': 6.18.0 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/visitor-keys': 6.21.0 dev: true - /@typescript-eslint/type-utils@6.18.0(eslint@8.56.0)(typescript@4.9.5): - resolution: {integrity: sha512-ZeMtrXnGmTcHciJN1+u2CigWEEXgy1ufoxtWcHORt5kGvpjjIlK9MUhzHm4RM8iVy6dqSaZA/6PVkX6+r+ChjQ==} + /@typescript-eslint/type-utils@6.21.0(eslint@8.57.0)(typescript@4.9.5): + resolution: {integrity: sha512-rZQI7wHfao8qMX3Rd3xqeYSMCL3SoiSQLBATSiVKARdFGCYSRvmViieZjqc58jKgs8Y8i9YvVVhRbHSTA4VBag==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 @@ -4511,11 +4549,11 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/typescript-estree': 6.18.0(typescript@4.9.5) - '@typescript-eslint/utils': 6.18.0(eslint@8.56.0)(typescript@4.9.5) + '@typescript-eslint/typescript-estree': 6.21.0(typescript@4.9.5) + '@typescript-eslint/utils': 6.21.0(eslint@8.57.0)(typescript@4.9.5) debug: 4.3.4 - eslint: 8.56.0 - ts-api-utils: 1.0.3(typescript@4.9.5) + eslint: 8.57.0 + ts-api-utils: 1.3.0(typescript@4.9.5) typescript: 4.9.5 transitivePeerDependencies: - supports-color @@ -4526,8 +4564,8 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /@typescript-eslint/types@6.18.0: - resolution: {integrity: sha512-/RFVIccwkwSdW/1zeMx3hADShWbgBxBnV/qSrex6607isYjj05t36P6LyONgqdUrNLl5TYU8NIKdHUYpFvExkA==} + /@typescript-eslint/types@6.21.0: + resolution: {integrity: sha512-1kFmZ1rOm5epu9NZEZm1kckCDGj5UJEf7P1kliH4LKu/RkwpsfqqGmY2OOcUs18lSlQBKLDYBOGxRVtrMN5lpg==} engines: {node: ^16.0.0 || >=18.0.0} dev: true @@ -4545,15 +4583,15 @@ packages: debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 - semver: 7.5.4 + semver: 7.6.0 tsutils: 3.21.0(typescript@4.9.5) typescript: 4.9.5 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/typescript-estree@6.18.0(typescript@4.9.5): - resolution: {integrity: sha512-klNvl+Ql4NsBNGB4W9TZ2Od03lm7aGvTbs0wYaFYsplVPhr+oeXjlPZCDI4U9jgJIDK38W1FKhacCFzCC+nbIg==} + /@typescript-eslint/typescript-estree@6.21.0(typescript@4.9.5): + resolution: {integrity: sha512-6npJTkZcO+y2/kr+z0hc4HwNfrrP4kNYh57ek7yCNlrBjWQ1Y0OS7jiZTkgumrvkX5HkEKXFZkkdFNkaW2wmUQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: typescript: '*' @@ -4561,53 +4599,53 @@ packages: typescript: optional: true dependencies: - '@typescript-eslint/types': 6.18.0 - '@typescript-eslint/visitor-keys': 6.18.0 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/visitor-keys': 6.21.0 debug: 4.3.4 globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.3 - semver: 7.5.4 - ts-api-utils: 1.0.3(typescript@4.9.5) + semver: 7.6.0 + ts-api-utils: 1.3.0(typescript@4.9.5) typescript: 4.9.5 transitivePeerDependencies: - supports-color dev: true - /@typescript-eslint/utils@5.62.0(eslint@8.56.0)(typescript@4.9.5): + /@typescript-eslint/utils@5.62.0(eslint@8.57.0)(typescript@4.9.5): resolution: {integrity: sha512-n8oxjeb5aIbPFEtmQxQYOLI0i9n5ySBEY/ZEHHZqKQSFnxio1rv6dthascc9dLuwrL0RC5mPCxB7vnAVGAYWAQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) '@types/json-schema': 7.0.15 - '@types/semver': 7.5.6 + '@types/semver': 7.5.8 '@typescript-eslint/scope-manager': 5.62.0 '@typescript-eslint/types': 5.62.0 '@typescript-eslint/typescript-estree': 5.62.0(typescript@4.9.5) - eslint: 8.56.0 + eslint: 8.57.0 eslint-scope: 5.1.1 - semver: 7.5.4 + semver: 7.6.0 transitivePeerDependencies: - supports-color - typescript dev: true - /@typescript-eslint/utils@6.18.0(eslint@8.56.0)(typescript@4.9.5): - resolution: {integrity: sha512-wiKKCbUeDPGaYEYQh1S580dGxJ/V9HI7K5sbGAVklyf+o5g3O+adnS4UNJajplF4e7z2q0uVBaTdT/yLb4XAVA==} + /@typescript-eslint/utils@6.21.0(eslint@8.57.0)(typescript@4.9.5): + resolution: {integrity: sha512-NfWVaC8HP9T8cbKQxHcsJBY5YE1O33+jpMwN45qzWWaPDZgLIbo12toGMWnmhvCpd3sIxkpDw3Wv1B3dYrbDQQ==} engines: {node: ^16.0.0 || >=18.0.0} peerDependencies: eslint: ^7.0.0 || ^8.0.0 dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) '@types/json-schema': 7.0.15 - '@types/semver': 7.5.6 - '@typescript-eslint/scope-manager': 6.18.0 - '@typescript-eslint/types': 6.18.0 - '@typescript-eslint/typescript-estree': 6.18.0(typescript@4.9.5) - eslint: 8.56.0 - semver: 7.5.4 + '@types/semver': 7.5.8 + '@typescript-eslint/scope-manager': 6.21.0 + '@typescript-eslint/types': 6.21.0 + '@typescript-eslint/typescript-estree': 6.21.0(typescript@4.9.5) + eslint: 8.57.0 + semver: 7.6.0 transitivePeerDependencies: - supports-color - typescript @@ -4621,11 +4659,11 @@ packages: eslint-visitor-keys: 3.4.3 dev: true - /@typescript-eslint/visitor-keys@6.18.0: - resolution: {integrity: sha512-1wetAlSZpewRDb2h9p/Q8kRjdGuqdTAQbkJIOUMLug2LBLG+QOjiWoSj6/3B/hA9/tVTFFdtiKvAYoYnSRW/RA==} + /@typescript-eslint/visitor-keys@6.21.0: + resolution: {integrity: sha512-JJtkDduxLi9bivAB+cYOVMtbkqdPOhZ+ZI5LC47MIRrDV4Yn2o+ZnW10Nkmr28xRpSpdJ6Sm42Hjf2+REYXm0A==} engines: {node: ^16.0.0 || >=18.0.0} dependencies: - '@typescript-eslint/types': 6.18.0 + '@typescript-eslint/types': 6.21.0 eslint-visitor-keys: 3.4.3 dev: true @@ -4633,40 +4671,40 @@ packages: resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==} dev: true - /@vitejs/plugin-react@3.1.0(vite@4.5.1): + /@vitejs/plugin-react@3.1.0(vite@4.5.3): resolution: {integrity: sha512-AfgcRL8ZBhAlc3BFdigClmTUMISmmzHn7sB2h9U1odvc5U/MjWXsAaz18b/WoppUTDBzxOJwo2VdClfUcItu9g==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: vite: ^4.1.0-beta.0 dependencies: - '@babel/core': 7.23.7 - '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/plugin-transform-react-jsx-self': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.4) magic-string: 0.27.0 - react-refresh: 0.14.0 - vite: 4.5.1 + react-refresh: 0.14.2 + vite: 4.5.3 transitivePeerDependencies: - supports-color dev: true - /@vitejs/plugin-react@4.2.1(vite@4.5.1): + /@vitejs/plugin-react@4.2.1(vite@4.5.3): resolution: {integrity: sha512-oojO9IDc4nCUUi8qIR11KoQm0XFFLIwsRBwHRR4d/88IWghn1y6ckz/bJ8GHDCsYEJee8mDzqtJxh15/cisJNQ==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: vite: ^4.2.0 || ^5.0.0 dependencies: - '@babel/core': 7.23.7 - '@babel/plugin-transform-react-jsx-self': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-react-jsx-source': 7.23.3(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/plugin-transform-react-jsx-self': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-react-jsx-source': 7.24.1(@babel/core@7.24.4) '@types/babel__core': 7.20.5 - react-refresh: 0.14.0 - vite: 4.5.1 + react-refresh: 0.14.2 + vite: 4.5.3 transitivePeerDependencies: - supports-color dev: true - /@webassemblyjs/ast@1.11.6: - resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==} + /@webassemblyjs/ast@1.12.1: + resolution: {integrity: sha512-EKfMUOPRRUTy5UII4qJDGPpqfwjOmZ5jeGFwid9mnoqIFK+e0vqoi1qH56JpmZSzEL53jKnNzScdmftJyG5xWg==} dependencies: '@webassemblyjs/helper-numbers': 1.11.6 '@webassemblyjs/helper-wasm-bytecode': 1.11.6 @@ -4680,8 +4718,8 @@ packages: resolution: {integrity: sha512-o0YkoP4pVu4rN8aTJgAyj9hC2Sv5UlkzCHhxqWj8butaLvnpdc2jOwh4ewE6CX0txSfLn/UYaV/pheS2Txg//Q==} dev: true - /@webassemblyjs/helper-buffer@1.11.6: - resolution: {integrity: sha512-z3nFzdcp1mb8nEOFFk8DrYLpHvhKC3grJD2ardfKOzmbmJvEf/tPIqCY+sNcwZIY8ZD7IkB2l7/pqhUhqm7hLA==} + /@webassemblyjs/helper-buffer@1.12.1: + resolution: {integrity: sha512-nzJwQw99DNDKr9BVCOZcLuJJUlqkJh+kVzVl6Fmq/tI5ZtEyWT1KZMyOXltXLZJmDtvLCDgwsyrkohEtopTXCw==} dev: true /@webassemblyjs/helper-numbers@1.11.6: @@ -4696,13 +4734,13 @@ packages: resolution: {integrity: sha512-sFFHKwcmBprO9e7Icf0+gddyWYDViL8bpPjJJl0WHxCdETktXdmtWLGVzoHbqUcY4Be1LkNfwTmXOJUFZYSJdA==} dev: true - /@webassemblyjs/helper-wasm-section@1.11.6: - resolution: {integrity: sha512-LPpZbSOwTpEC2cgn4hTydySy1Ke+XEu+ETXuoyvuyezHO3Kjdu90KK95Sh9xTbmjrCsUwvWwCOQQNta37VrS9g==} + /@webassemblyjs/helper-wasm-section@1.12.1: + resolution: {integrity: sha512-Jif4vfB6FJlUlSbgEMHUyk1j234GTNG9dBJ4XJdOySoj518Xj0oGsNi59cUQF4RRMS9ouBUxDDdyBVfPTypa5g==} dependencies: - '@webassemblyjs/ast': 1.11.6 - '@webassemblyjs/helper-buffer': 1.11.6 + '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/helper-buffer': 1.12.1 '@webassemblyjs/helper-wasm-bytecode': 1.11.6 - '@webassemblyjs/wasm-gen': 1.11.6 + '@webassemblyjs/wasm-gen': 1.12.1 dev: true /@webassemblyjs/ieee754@1.11.6: @@ -4721,42 +4759,42 @@ packages: resolution: {integrity: sha512-vtXf2wTQ3+up9Zsg8sa2yWiQpzSsMyXj0qViVP6xKGCUT8p8YJ6HqI7l5eCnWx1T/FYdsv07HQs2wTFbbof/RA==} dev: true - /@webassemblyjs/wasm-edit@1.11.6: - resolution: {integrity: sha512-Ybn2I6fnfIGuCR+Faaz7YcvtBKxvoLV3Lebn1tM4o/IAJzmi9AWYIPWpyBfU8cC+JxAO57bk4+zdsTjJR+VTOw==} + /@webassemblyjs/wasm-edit@1.12.1: + resolution: {integrity: sha512-1DuwbVvADvS5mGnXbE+c9NfA8QRcZ6iKquqjjmR10k6o+zzsRVesil54DKexiowcFCPdr/Q0qaMgB01+SQ1u6g==} dependencies: - '@webassemblyjs/ast': 1.11.6 - '@webassemblyjs/helper-buffer': 1.11.6 + '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/helper-buffer': 1.12.1 '@webassemblyjs/helper-wasm-bytecode': 1.11.6 - '@webassemblyjs/helper-wasm-section': 1.11.6 - '@webassemblyjs/wasm-gen': 1.11.6 - '@webassemblyjs/wasm-opt': 1.11.6 - '@webassemblyjs/wasm-parser': 1.11.6 - '@webassemblyjs/wast-printer': 1.11.6 + '@webassemblyjs/helper-wasm-section': 1.12.1 + '@webassemblyjs/wasm-gen': 1.12.1 + '@webassemblyjs/wasm-opt': 1.12.1 + '@webassemblyjs/wasm-parser': 1.12.1 + '@webassemblyjs/wast-printer': 1.12.1 dev: true - /@webassemblyjs/wasm-gen@1.11.6: - resolution: {integrity: sha512-3XOqkZP/y6B4F0PBAXvI1/bky7GryoogUtfwExeP/v7Nzwo1QLcq5oQmpKlftZLbT+ERUOAZVQjuNVak6UXjPA==} + /@webassemblyjs/wasm-gen@1.12.1: + resolution: {integrity: sha512-TDq4Ojh9fcohAw6OIMXqiIcTq5KUXTGRkVxbSo1hQnSy6lAM5GSdfwWeSxpAo0YzgsgF182E/U0mDNhuA0tW7w==} dependencies: - '@webassemblyjs/ast': 1.11.6 + '@webassemblyjs/ast': 1.12.1 '@webassemblyjs/helper-wasm-bytecode': 1.11.6 '@webassemblyjs/ieee754': 1.11.6 '@webassemblyjs/leb128': 1.11.6 '@webassemblyjs/utf8': 1.11.6 dev: true - /@webassemblyjs/wasm-opt@1.11.6: - resolution: {integrity: sha512-cOrKuLRE7PCe6AsOVl7WasYf3wbSo4CeOk6PkrjS7g57MFfVUF9u6ysQBBODX0LdgSvQqRiGz3CXvIDKcPNy4g==} + /@webassemblyjs/wasm-opt@1.12.1: + resolution: {integrity: sha512-Jg99j/2gG2iaz3hijw857AVYekZe2SAskcqlWIZXjji5WStnOpVoat3gQfT/Q5tb2djnCjBtMocY/Su1GfxPBg==} dependencies: - '@webassemblyjs/ast': 1.11.6 - '@webassemblyjs/helper-buffer': 1.11.6 - '@webassemblyjs/wasm-gen': 1.11.6 - '@webassemblyjs/wasm-parser': 1.11.6 + '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/helper-buffer': 1.12.1 + '@webassemblyjs/wasm-gen': 1.12.1 + '@webassemblyjs/wasm-parser': 1.12.1 dev: true - /@webassemblyjs/wasm-parser@1.11.6: - resolution: {integrity: sha512-6ZwPeGzMJM3Dqp3hCsLgESxBGtT/OeCvCZ4TA1JUPYgmhAx38tTPR9JaKy0S5H3evQpO/h2uWs2j6Yc/fjkpTQ==} + /@webassemblyjs/wasm-parser@1.12.1: + resolution: {integrity: sha512-xikIi7c2FHXysxXe3COrVUPSheuBtpcfhbpFj4gmu7KRLYOzANztwUU0IbsqvMqzuNK2+glRGWCEqZo1WCLyAQ==} dependencies: - '@webassemblyjs/ast': 1.11.6 + '@webassemblyjs/ast': 1.12.1 '@webassemblyjs/helper-api-error': 1.11.6 '@webassemblyjs/helper-wasm-bytecode': 1.11.6 '@webassemblyjs/ieee754': 1.11.6 @@ -4764,10 +4802,10 @@ packages: '@webassemblyjs/utf8': 1.11.6 dev: true - /@webassemblyjs/wast-printer@1.11.6: - resolution: {integrity: sha512-JM7AhRcE+yW2GWYaKeHL5vt4xqee5N2WcezptmgyhNS+ScggqcT1OtXykhAb13Sn5Yas0j2uv9tHgrjwvzAP4A==} + /@webassemblyjs/wast-printer@1.12.1: + resolution: {integrity: sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==} dependencies: - '@webassemblyjs/ast': 1.11.6 + '@webassemblyjs/ast': 1.12.1 '@xtuc/long': 4.2.2 dev: true @@ -4988,18 +5026,19 @@ packages: resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==} dev: true - /aria-hidden@1.2.3: - resolution: {integrity: sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==} + /aria-hidden@1.2.4: + resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==} engines: {node: '>=10'} dependencies: tslib: 2.6.2 dev: true - /array-buffer-byte-length@1.0.0: - resolution: {integrity: sha512-LPuwb2P+NrQw3XhxGc36+XSvuBPopovXYTR9Ew++Du9Yb/bx5AzBfrIsBoj0EZUifjQU+sHL21sseZ3jerWO/A==} + /array-buffer-byte-length@1.0.1: + resolution: {integrity: sha512-ahC5W1xgou+KTXix4sAO8Ki12Q+jf4i0+tmk3sC+zgcynshkHxzpXdImBehiUYKKKDwvfFiJl1tZt6ewscS1Mg==} + engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 - is-array-buffer: 3.0.2 + call-bind: 1.0.7 + is-array-buffer: 3.0.4 dev: true /array-flatten@1.1.1: @@ -5010,14 +5049,15 @@ packages: resolution: {integrity: sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==} dev: true - /array-includes@3.1.7: - resolution: {integrity: sha512-dlcsNBIiWhPkHdOEEKnehA+RNUWDc4UqFtnIXU4uuYDPtA4LDkr7qip2p0VvFAEXNDr0yWZ9PJyIRiGjRLQzwQ==} + /array-includes@3.1.8: + resolution: {integrity: sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 - get-intrinsic: 1.2.2 + es-abstract: 1.23.3 + es-object-atoms: 1.0.0 + get-intrinsic: 1.2.4 is-string: 1.0.7 dev: true @@ -5026,24 +5066,25 @@ packages: engines: {node: '>=8'} dev: true - /array.prototype.findlastindex@1.2.3: - resolution: {integrity: sha512-LzLoiOMAxvy+Gd3BAq3B7VeIgPdo+Q8hthvKtXybMvRV0jrXfJM/t8mw7nNlpEcVlVUnCnM2KSX4XU5HmpodOA==} + /array.prototype.findlastindex@1.2.5: + resolution: {integrity: sha512-zfETvRFA8o7EiNn++N5f/kaCw221hrpGsDmcpndVupkPzEc1Wuf3VgC0qby1BbHs7f5DVYjgtEU2LLh5bqeGfQ==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-abstract: 1.23.3 + es-errors: 1.3.0 + es-object-atoms: 1.0.0 es-shim-unscopables: 1.0.2 - get-intrinsic: 1.2.2 dev: true /array.prototype.flat@1.3.2: resolution: {integrity: sha512-djYB+Zx2vLewY8RWlNCUdHjDXs2XOgm602S9E7P/UpHgfeHL00cRiIF+IN/G/aUJ7kGPb6yO/ErDI5V2s8iycA==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-abstract: 1.23.3 es-shim-unscopables: 1.0.2 dev: true @@ -5051,23 +5092,24 @@ packages: resolution: {integrity: sha512-Ewyx0c9PmpcsByhSW4r+9zDU7sGjFc86qf/kKtuSCRdhfbk0SNLLkaT5qvcHnRGgc5NP/ly/y+qkXkqONX54CQ==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-abstract: 1.23.3 es-shim-unscopables: 1.0.2 dev: true - /arraybuffer.prototype.slice@1.0.2: - resolution: {integrity: sha512-yMBKppFur/fbHu9/6USUe03bZ4knMYiwFBcyiaXB8Go0qNehwX6inYPzK9U0NeQvGxKthcmHcaR8P5MStSRBAw==} + /arraybuffer.prototype.slice@1.0.3: + resolution: {integrity: sha512-bMxMKAjg13EBSVscxTaYA4mRc5t1UAXa2kXiGTNfZ079HIWXEkKmkgFrh/nJqamaLSrXO5H4WFFkPEaLJWbs3A==} engines: {node: '>= 0.4'} dependencies: - array-buffer-byte-length: 1.0.0 - call-bind: 1.0.5 + array-buffer-byte-length: 1.0.1 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 - get-intrinsic: 1.2.2 - is-array-buffer: 3.0.2 - is-shared-array-buffer: 1.0.2 + es-abstract: 1.23.3 + es-errors: 1.3.0 + get-intrinsic: 1.2.4 + is-array-buffer: 3.0.4 + is-shared-array-buffer: 1.0.3 dev: true /arraybuffer.slice@0.0.7: @@ -5082,9 +5124,9 @@ packages: /assert@2.1.0: resolution: {integrity: sha512-eLHpSK/Y4nhMJ07gDaAzoX/XAKS8PSaojml3M0DM4JpV1LAi5JOJ/p6H/XWrl8L+DzVEvVCW1z3vWAaB9oTsQw==} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 is-nan: 1.3.2 - object-is: 1.1.5 + object-is: 1.1.6 object.assign: 4.1.5 util: 0.12.5 dev: true @@ -5108,61 +5150,63 @@ packages: resolution: {integrity: sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==} dev: true - /autoprefixer@10.4.16(postcss@8.4.33): - resolution: {integrity: sha512-7vd3UC6xKp0HLfua5IjZlcXvGAGy7cBAXTg2lyQ/8WpNhd6SiZ8Be+xm3FyBSYJx5GKcpRCzBh7RH4/0dnY+uQ==} + /autoprefixer@10.4.19(postcss@8.4.38): + resolution: {integrity: sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==} engines: {node: ^10 || ^12 || >=14} hasBin: true peerDependencies: postcss: ^8.1.0 dependencies: - browserslist: 4.22.2 - caniuse-lite: 1.0.30001576 + browserslist: 4.23.0 + caniuse-lite: 1.0.30001614 fraction.js: 4.3.7 normalize-range: 0.1.2 picocolors: 1.0.0 - postcss: 8.4.33 + postcss: 8.4.38 postcss-value-parser: 4.2.0 dev: true - /available-typed-arrays@1.0.5: - resolution: {integrity: sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==} + /available-typed-arrays@1.0.7: + resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==} engines: {node: '>= 0.4'} + dependencies: + possible-typed-array-names: 1.0.0 dev: true - /axe-core@4.8.3: - resolution: {integrity: sha512-d5ZQHPSPkF9Tw+yfyDcRoUOc4g/8UloJJe5J8m4L5+c7AtDdjDLRxew/knnI4CxvtdxEUVgWz4x3OIQUIFiMfw==} + /axe-core@4.9.0: + resolution: {integrity: sha512-H5orY+M2Fr56DWmMFpMrq5Ge93qjNdPVqzBv5gWK3aD1OvjBEJlEzxf09z93dGVQeI0LiW+aCMIx1QtShC/zUw==} engines: {node: '>=4'} dev: true - /axios@1.6.5(debug@4.3.4): - resolution: {integrity: sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==} + /axios@1.6.8(debug@4.3.4): + resolution: {integrity: sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==} dependencies: - follow-redirects: 1.15.4(debug@4.3.4) + follow-redirects: 1.15.6(debug@4.3.4) form-data: 4.0.0 proxy-from-env: 1.1.0 transitivePeerDependencies: - debug dev: true - /babel-core@7.0.0-bridge.0(@babel/core@7.23.7): + /babel-core@7.0.0-bridge.0(@babel/core@7.24.4): resolution: {integrity: sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==} peerDependencies: '@babel/core': ^7.0.0-0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 dev: true - /babel-jest@29.7.0(@babel/core@7.23.7): + /babel-jest@29.7.0(@babel/core@7.24.4): resolution: {integrity: sha512-BrvGY3xZSwEcCzKvKsCi2GgHqDqsYkOP4/by5xCgIwGXQxIEh+8ew3gmrE1y7XRR6LHZIj6yLYnUi/mm2KXKBg==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} peerDependencies: '@babel/core': ^7.8.0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@jest/transform': 29.7.0 '@types/babel__core': 7.20.5 babel-plugin-istanbul: 6.1.1 - babel-preset-jest: 29.6.3(@babel/core@7.23.7) + babel-preset-jest: 29.6.3(@babel/core@7.24.4) chalk: 4.1.2 graceful-fs: 4.2.11 slash: 3.0.0 @@ -5174,7 +5218,7 @@ packages: resolution: {integrity: sha512-Y1IQok9821cC9onCx5otgFfRm7Lm+I+wwxOx738M/WLPZ9Q42m4IG5W0FNX8WLL2gYMZo3JkuXIH2DOpWM+qwA==} engines: {node: '>=8'} dependencies: - '@babel/helper-plugin-utils': 7.22.5 + '@babel/helper-plugin-utils': 7.24.0 '@istanbuljs/load-nyc-config': 1.1.0 '@istanbuljs/schema': 0.1.3 istanbul-lib-instrument: 5.2.1 @@ -5187,77 +5231,77 @@ packages: resolution: {integrity: sha512-ESAc/RJvGTFEzRwOTT4+lNDk/GNHMkKbNzsvT0qKRfDyyYTskxB5rnU2njIDYVxXCBHHEI1c0YwHob3WaYujOg==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@babel/template': 7.22.15 - '@babel/types': 7.23.6 + '@babel/template': 7.24.0 + '@babel/types': 7.24.0 '@types/babel__core': 7.20.5 '@types/babel__traverse': 7.20.5 dev: true - /babel-plugin-polyfill-corejs2@0.4.7(@babel/core@7.23.7): - resolution: {integrity: sha512-LidDk/tEGDfuHW2DWh/Hgo4rmnw3cduK6ZkOI1NPFceSK3n/yAGeOsNT7FLnSGHkXj3RHGSEVkN3FsCTY6w2CQ==} + /babel-plugin-polyfill-corejs2@0.4.11(@babel/core@7.24.4): + resolution: {integrity: sha512-sMEJ27L0gRHShOh5G54uAAPaiCOygY/5ratXuiyb2G46FmlSpc9eFCzYVyDiPxfNbwzA7mYahmjQc5q+CZQ09Q==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: - '@babel/compat-data': 7.23.5 - '@babel/core': 7.23.7 - '@babel/helper-define-polyfill-provider': 0.4.4(@babel/core@7.23.7) + '@babel/compat-data': 7.24.4 + '@babel/core': 7.24.4 + '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.24.4) semver: 6.3.1 transitivePeerDependencies: - supports-color dev: true - /babel-plugin-polyfill-corejs3@0.8.7(@babel/core@7.23.7): - resolution: {integrity: sha512-KyDvZYxAzkC0Aj2dAPyDzi2Ym15e5JKZSK+maI7NAwSqofvuFglbSsxE7wUOvTg9oFVnHMzVzBKcqEb4PJgtOA==} + /babel-plugin-polyfill-corejs3@0.10.4(@babel/core@7.24.4): + resolution: {integrity: sha512-25J6I8NGfa5YkCDogHRID3fVCadIR8/pGl1/spvCkzb6lVn6SR3ojpx9nOn9iEBcUsjY24AmdKm5khcfKdylcg==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-define-polyfill-provider': 0.4.4(@babel/core@7.23.7) - core-js-compat: 3.35.0 + '@babel/core': 7.24.4 + '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.24.4) + core-js-compat: 3.37.0 transitivePeerDependencies: - supports-color dev: true - /babel-plugin-polyfill-regenerator@0.5.4(@babel/core@7.23.7): - resolution: {integrity: sha512-S/x2iOCvDaCASLYsOOgWOq4bCfKYVqvO/uxjkaYyZ3rVsVE3CeAI/c84NpyuBBymEgNvHgjEot3a9/Z/kXvqsg==} + /babel-plugin-polyfill-regenerator@0.6.2(@babel/core@7.24.4): + resolution: {integrity: sha512-2R25rQZWP63nGwaAswvDazbPXfrM3HwVoBXK6HcqeKrSrL/JqcC/rDcf95l4r7LXLyxDXc8uQDa064GubtCABg==} peerDependencies: '@babel/core': ^7.4.0 || ^8.0.0-0 <8.0.0 dependencies: - '@babel/core': 7.23.7 - '@babel/helper-define-polyfill-provider': 0.4.4(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/helper-define-polyfill-provider': 0.6.2(@babel/core@7.24.4) transitivePeerDependencies: - supports-color dev: true - /babel-preset-current-node-syntax@1.0.1(@babel/core@7.23.7): + /babel-preset-current-node-syntax@1.0.1(@babel/core@7.24.4): resolution: {integrity: sha512-M7LQ0bxarkxQoN+vz5aJPsLBn77n8QgTFmo8WK0/44auK2xlCXrYcUxHFxgU7qW5Yzw/CjmLRK2uJzaCd7LvqQ==} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 - '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.23.7) - '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.23.7) - '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.23.7) - '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.23.7) - '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.23.7) - '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.23.7) - '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.23.7) - dev: true - - /babel-preset-jest@29.6.3(@babel/core@7.23.7): + '@babel/core': 7.24.4 + '@babel/plugin-syntax-async-generators': 7.8.4(@babel/core@7.24.4) + '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-class-properties': 7.12.13(@babel/core@7.24.4) + '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.4) + '@babel/plugin-syntax-json-strings': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-logical-assignment-operators': 7.10.4(@babel/core@7.24.4) + '@babel/plugin-syntax-nullish-coalescing-operator': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-numeric-separator': 7.10.4(@babel/core@7.24.4) + '@babel/plugin-syntax-object-rest-spread': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-optional-catch-binding': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-optional-chaining': 7.8.3(@babel/core@7.24.4) + '@babel/plugin-syntax-top-level-await': 7.14.5(@babel/core@7.24.4) + dev: true + + /babel-preset-jest@29.6.3(@babel/core@7.24.4): resolution: {integrity: sha512-0B3bhxR6snWXJZtR/RliHTDPRgn1sNHOR0yVtq/IiQFyuOVjFS+wuio/R4gSNkyYmKmJB4wGZv2NZanmKmTnNA==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} peerDependencies: '@babel/core': ^7.0.0 dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 babel-plugin-jest-hoist: 29.6.3 - babel-preset-current-node-syntax: 1.0.1(@babel/core@7.23.7) + babel-preset-current-node-syntax: 1.0.1(@babel/core@7.24.4) dev: true /backo2@1.0.2: @@ -5303,8 +5347,8 @@ packages: resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==} dev: true - /binary-extensions@2.2.0: - resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} + /binary-extensions@2.3.0: + resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==} engines: {node: '>=8'} dev: true @@ -5320,8 +5364,8 @@ packages: resolution: {integrity: sha512-gaqbzQPqOoamawKg0LGVd7SzLgXS+JH61oWprSLH+P+abTczqJbhTR8CmJ2u9/bUYNmHTGJx/UEmn6doAvvuig==} dev: true - /body-parser@1.20.1: - resolution: {integrity: sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==} + /body-parser@1.20.2: + resolution: {integrity: sha512-ml9pReCu3M61kGlqoTm2umSXTlRTuGTx0bfYj+uIUKKYycG5NtSbeetV3faSU6R7ajOPw0g/J1PvK4qNy7s5bA==} engines: {node: '>= 0.8', npm: 1.2.8000 || >= 1.4.16} dependencies: bytes: 3.1.2 @@ -5333,7 +5377,7 @@ packages: iconv-lite: 0.4.24 on-finished: 2.4.1 qs: 6.11.0 - raw-body: 2.5.1 + raw-body: 2.5.2 type-is: 1.6.18 unpipe: 1.0.0 transitivePeerDependencies: @@ -5377,15 +5421,15 @@ packages: pako: 0.2.9 dev: true - /browserslist@4.22.2: - resolution: {integrity: sha512-0UgcrvQmBDvZHFGdYUehrCNIazki7/lUP3kkoi/r3YB2amZbFM9J43ZRkJTXBUZK4gmx56+Sqk9+Vs9mwZx9+A==} + /browserslist@4.23.0: + resolution: {integrity: sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==} engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} hasBin: true dependencies: - caniuse-lite: 1.0.30001576 - electron-to-chromium: 1.4.623 + caniuse-lite: 1.0.30001614 + electron-to-chromium: 1.4.750 node-releases: 2.0.14 - update-browserslist-db: 1.0.13(browserslist@4.22.2) + update-browserslist-db: 1.0.13(browserslist@4.23.0) dev: true /bs-logger@0.2.6: @@ -5416,13 +5460,13 @@ packages: ieee754: 1.2.1 dev: true - /bundle-require@4.0.2(esbuild@0.19.11): - resolution: {integrity: sha512-jwzPOChofl67PSTW2SGubV9HBQAhhR2i6nskiOThauo9dzwDUgOWQScFVaJkjEfYX+UXiD+LEx8EblQMc2wIag==} + /bundle-require@4.0.3(esbuild@0.19.12): + resolution: {integrity: sha512-2iscZ3fcthP2vka4Y7j277YJevwmsby/FpFDwjgw34Nl7dtCpt7zz/4TexmHMzY6KZEih7En9ImlbbgUNNQGtA==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} peerDependencies: esbuild: '>=0.17' dependencies: - esbuild: 0.19.11 + esbuild: 0.19.12 load-tsconfig: 0.2.5 dev: true @@ -5441,12 +5485,15 @@ packages: engines: {node: '>=8'} dev: true - /call-bind@1.0.5: - resolution: {integrity: sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==} + /call-bind@1.0.7: + resolution: {integrity: sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==} + engines: {node: '>= 0.4'} dependencies: + es-define-property: 1.0.0 + es-errors: 1.3.0 function-bind: 1.1.2 - get-intrinsic: 1.2.2 - set-function-length: 1.1.1 + get-intrinsic: 1.2.4 + set-function-length: 1.2.2 dev: true /callsite@1.0.0: @@ -5481,8 +5528,8 @@ packages: resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==} dev: true - /caniuse-lite@1.0.30001576: - resolution: {integrity: sha512-ff5BdakGe2P3SQsMsiqmt1Lc8221NR1VzHj5jXN5vBny9A6fpze94HiVV/n7XRosOlsShJcvMv5mdnpjOGCEgg==} + /caniuse-lite@1.0.30001614: + resolution: {integrity: sha512-jmZQ1VpmlRwHgdP1/uiKzgiAuGOfLEJsYFP4+GBou/QQ4U6IOJCB4NP1c+1p9RGLpwObcT94jA5/uO+F1vBbog==} dev: true /chalk@2.4.2: @@ -5512,8 +5559,8 @@ packages: engines: {node: '>=10'} dev: true - /chokidar@3.5.3: - resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==} + /chokidar@3.6.0: + resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} engines: {node: '>= 8.10.0'} dependencies: anymatch: 3.1.3 @@ -5546,14 +5593,14 @@ packages: engines: {node: '>=8'} dev: true - /citty@0.1.5: - resolution: {integrity: sha512-AS7n5NSc0OQVMV9v6wt3ByujNIrne0/cTjiC2MYqhvao57VNfiuVksTSr2p17nVOhEr2KtqiAkGwHcgMC/qUuQ==} + /citty@0.1.6: + resolution: {integrity: sha512-tskPPKEs8D2KPafUypv2gxwJP8h/OaJmC82QQGGDQcHvXX43xF2VDACcJVmZ0EuSxkpO9Kc4MlrA3q0+FG58AQ==} dependencies: consola: 3.2.3 dev: true - /cjs-module-lexer@1.2.3: - resolution: {integrity: sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==} + /cjs-module-lexer@1.3.1: + resolution: {integrity: sha512-a3KdPAANPbNE4ZUv9h6LckSl9zLsYOP4MBmhIPkRaeyybt+r4UghLvq+xw/YwUcC1gqylCkL4rdVs3Lwupjm4Q==} dev: true /clean-stack@2.2.0: @@ -5580,8 +5627,8 @@ packages: engines: {node: '>=6'} dev: true - /cli-table3@0.6.3: - resolution: {integrity: sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==} + /cli-table3@0.6.4: + resolution: {integrity: sha512-Lm3L0p+/npIQWNIiyF/nAn7T5dnOwR3xNTHXYEBFBFVPXzCVNZ5lqEC/1eo/EVfpDsQ1I+TX4ORPQgp+UI0CRw==} engines: {node: 10.* || >= 12.*} dependencies: string-width: 4.2.3 @@ -5632,8 +5679,8 @@ packages: engines: {node: '>=6'} dev: false - /clsx@2.1.0: - resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==} + /clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} engines: {node: '>=6'} dev: false @@ -5969,8 +6016,8 @@ packages: resolution: {integrity: sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==} dev: true - /cookie@0.5.0: - resolution: {integrity: sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==} + /cookie@0.6.0: + resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==} engines: {node: '>= 0.6'} dev: true @@ -5986,10 +6033,10 @@ packages: toggle-selection: 1.0.6 dev: false - /core-js-compat@3.35.0: - resolution: {integrity: sha512-5blwFAddknKeNgsjBzilkdQ0+YK8L1PfqPYq40NOYMYFSS38qj+hpTcLLWwpIwA2A5bje/x5jmVn2tzUMg9IVw==} + /core-js-compat@3.37.0: + resolution: {integrity: sha512-vYq4L+T8aS5UuFg4UwDhc7YNRWVeVZwltad9C/jV3R2LgVOpS9BDr7l/WL6BN0dbV3k1XejPTHqqEzJgsa0frA==} dependencies: - browserslist: 4.22.2 + browserslist: 4.23.0 dev: true /core-util-is@1.0.3: @@ -6005,7 +6052,7 @@ packages: chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@20.10.7) + jest-config: 29.7.0(@types/node@20.12.7) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -6074,6 +6121,33 @@ packages: engines: {node: '>=8'} dev: true + /data-view-buffer@1.0.1: + resolution: {integrity: sha512-0lht7OugA5x3iJLOWFhWK/5ehONdprk0ISXqVFn/NFrDu+cuc8iADFrGQz5BnRK7LLU3JmkbXSxaqX+/mXYtUA==} + engines: {node: '>= 0.4'} + dependencies: + call-bind: 1.0.7 + es-errors: 1.3.0 + is-data-view: 1.0.1 + dev: true + + /data-view-byte-length@1.0.1: + resolution: {integrity: sha512-4J7wRJD3ABAzr8wP+OcIcqq2dlUKp4DVflx++hs5h5ZKydWMI6/D/fAot+yh6g2tHh8fLFTvNOaVN357NvSrOQ==} + engines: {node: '>= 0.4'} + dependencies: + call-bind: 1.0.7 + es-errors: 1.3.0 + is-data-view: 1.0.1 + dev: true + + /data-view-byte-offset@1.0.0: + resolution: {integrity: sha512-t/Ygsytq+R995EJ5PZlD4Cu56sWa8InXySaViRzw9apusqsOO2bQP+SbYzAhR0pFKoB+43lYy8rWban9JSuXnA==} + engines: {node: '>= 0.4'} + dependencies: + call-bind: 1.0.7 + es-errors: 1.3.0 + is-data-view: 1.0.1 + dev: true + /dateformat@3.0.3: resolution: {integrity: sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==} dev: true @@ -6136,8 +6210,8 @@ packages: engines: {node: '>=0.10.0'} dev: true - /dedent@1.5.1: - resolution: {integrity: sha512-+LxW+KLWxu3HW3M2w2ympwtqPrqYRzU8fqi6Fhd18fBALe15blJPI/I4+UHveMVG6lJqB4JNd4UG0S5cnVHwIg==} + /dedent@1.5.3: + resolution: {integrity: sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==} peerDependencies: babel-plugin-macros: ^3.1.0 peerDependenciesMeta: @@ -6168,13 +6242,13 @@ packages: clone: 1.0.4 dev: true - /define-data-property@1.1.1: - resolution: {integrity: sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==} + /define-data-property@1.1.4: + resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==} engines: {node: '>= 0.4'} dependencies: - get-intrinsic: 1.2.2 + es-define-property: 1.0.0 + es-errors: 1.3.0 gopd: 1.0.1 - has-property-descriptors: 1.0.1 dev: true /define-lazy-prop@2.0.0: @@ -6186,8 +6260,8 @@ packages: resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==} engines: {node: '>= 0.4'} dependencies: - define-data-property: 1.1.1 - has-property-descriptors: 1.0.1 + define-data-property: 1.1.4 + has-property-descriptors: 1.0.2 object-keys: 1.1.1 dev: true @@ -6298,11 +6372,6 @@ packages: engines: {node: '>=12'} dev: true - /dotenv@16.3.1: - resolution: {integrity: sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==} - engines: {node: '>=12'} - dev: true - /dotenv@16.4.5: resolution: {integrity: sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==} engines: {node: '>=12'} @@ -6322,16 +6391,16 @@ packages: end-of-stream: 1.4.4 inherits: 2.0.4 readable-stream: 2.3.8 - stream-shift: 1.0.1 + stream-shift: 1.0.3 dev: true - /duplexify@4.1.2: - resolution: {integrity: sha512-fz3OjcNCHmRP12MJoZMPglx8m4rrFP8rovnk4vT8Fs+aonZoCwGg10dSsQsfP/E62eZcPTMSMP6686fu9Qlqtw==} + /duplexify@4.1.3: + resolution: {integrity: sha512-M3BmBhwJRZsSx38lZyhE53Csddgzl5R7xGJNk7CVddZD6CcmwMCH8J+7AprIrQKH7TonKxaCjcv27Qmf+sQ+oA==} dependencies: end-of-stream: 1.4.4 inherits: 2.0.4 readable-stream: 3.6.2 - stream-shift: 1.0.1 + stream-shift: 1.0.3 dev: true /eastasianwidth@0.2.0: @@ -6342,16 +6411,16 @@ packages: resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==} dev: true - /ejs@3.1.9: - resolution: {integrity: sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==} + /ejs@3.1.10: + resolution: {integrity: sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==} engines: {node: '>=0.10.0'} hasBin: true dependencies: jake: 10.8.7 dev: true - /electron-to-chromium@1.4.623: - resolution: {integrity: sha512-lKoz10iCYlP1WtRYdh5MvocQPWVRoI7ysp6qf18bmeBgR8abE6+I2CsfyNKztRDZvhdWc+krKT6wS7Neg8sw3A==} + /electron-to-chromium@1.4.750: + resolution: {integrity: sha512-9ItEpeu15hW5m8jKdriL+BQrgwDTXEL9pn4SkillWFu73ZNNNQ2BKKLS+ZHv2vC9UkNhosAeyfxOf/5OSeTCPA==} dev: true /element-resize-detector@1.2.4: @@ -6418,16 +6487,16 @@ packages: has-binary2: 1.0.3 dev: true - /enhanced-resolve@5.15.0: - resolution: {integrity: sha512-LXYT42KJ7lpIKECr2mAXIaMldcNCh/7E0KBKOu4KSfkHmP+mZmSs+8V5gBAqisWBy0OO4W5Oyys0GO1Y8KtdKg==} + /enhanced-resolve@5.16.0: + resolution: {integrity: sha512-O+QWCviPNSSLAD9Ucn8Awv+poAkqn3T1XY5/N7kR7rQO9yfSGWkYZDwpJ+iKF7B8rxaQKWngSqACpgzeapSyoA==} engines: {node: '>=10.13.0'} dependencies: graceful-fs: 4.2.11 tapable: 2.2.1 dev: true - /envinfo@7.11.0: - resolution: {integrity: sha512-G9/6xF1FPbIw0TtalAMaVPpiq2aDEuKLXM314jPVAO9r2fo2a4BLqMNkmRS7O/xPPZ+COAhGIz3ETvHEV3eUcg==} + /envinfo@7.13.0: + resolution: {integrity: sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==} engines: {node: '>=4'} hasBin: true dev: true @@ -6453,72 +6522,98 @@ packages: stackframe: 1.3.4 dev: false - /es-abstract@1.22.3: - resolution: {integrity: sha512-eiiY8HQeYfYH2Con2berK+To6GrK2RxbPawDkGq4UiCQQfZHb6wX9qQqkbpPqaxQFcl8d9QzZqo0tGE0VcrdwA==} + /es-abstract@1.23.3: + resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==} engines: {node: '>= 0.4'} dependencies: - array-buffer-byte-length: 1.0.0 - arraybuffer.prototype.slice: 1.0.2 - available-typed-arrays: 1.0.5 - call-bind: 1.0.5 - es-set-tostringtag: 2.0.2 + array-buffer-byte-length: 1.0.1 + arraybuffer.prototype.slice: 1.0.3 + available-typed-arrays: 1.0.7 + call-bind: 1.0.7 + data-view-buffer: 1.0.1 + data-view-byte-length: 1.0.1 + data-view-byte-offset: 1.0.0 + es-define-property: 1.0.0 + es-errors: 1.3.0 + es-object-atoms: 1.0.0 + es-set-tostringtag: 2.0.3 es-to-primitive: 1.2.1 function.prototype.name: 1.1.6 - get-intrinsic: 1.2.2 - get-symbol-description: 1.0.0 + get-intrinsic: 1.2.4 + get-symbol-description: 1.0.2 globalthis: 1.0.3 gopd: 1.0.1 - has-property-descriptors: 1.0.1 - has-proto: 1.0.1 + has-property-descriptors: 1.0.2 + has-proto: 1.0.3 has-symbols: 1.0.3 - hasown: 2.0.0 - internal-slot: 1.0.6 - is-array-buffer: 3.0.2 + hasown: 2.0.2 + internal-slot: 1.0.7 + is-array-buffer: 3.0.4 is-callable: 1.2.7 - is-negative-zero: 2.0.2 + is-data-view: 1.0.1 + is-negative-zero: 2.0.3 is-regex: 1.1.4 - is-shared-array-buffer: 1.0.2 + is-shared-array-buffer: 1.0.3 is-string: 1.0.7 - is-typed-array: 1.1.12 + is-typed-array: 1.1.13 is-weakref: 1.0.2 object-inspect: 1.13.1 object-keys: 1.1.1 object.assign: 4.1.5 - regexp.prototype.flags: 1.5.1 - safe-array-concat: 1.0.1 - safe-regex-test: 1.0.0 - string.prototype.trim: 1.2.8 - string.prototype.trimend: 1.0.7 - string.prototype.trimstart: 1.0.7 - typed-array-buffer: 1.0.0 - typed-array-byte-length: 1.0.0 - typed-array-byte-offset: 1.0.0 - typed-array-length: 1.0.4 + regexp.prototype.flags: 1.5.2 + safe-array-concat: 1.1.2 + safe-regex-test: 1.0.3 + string.prototype.trim: 1.2.9 + string.prototype.trimend: 1.0.8 + string.prototype.trimstart: 1.0.8 + typed-array-buffer: 1.0.2 + typed-array-byte-length: 1.0.1 + typed-array-byte-offset: 1.0.2 + typed-array-length: 1.0.6 unbox-primitive: 1.0.2 - which-typed-array: 1.1.13 + which-typed-array: 1.1.15 + dev: true + + /es-define-property@1.0.0: + resolution: {integrity: sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==} + engines: {node: '>= 0.4'} + dependencies: + get-intrinsic: 1.2.4 + dev: true + + /es-errors@1.3.0: + resolution: {integrity: sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==} + engines: {node: '>= 0.4'} dev: true /es-module-lexer@0.9.3: resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==} dev: true - /es-module-lexer@1.4.1: - resolution: {integrity: sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==} + /es-module-lexer@1.5.2: + resolution: {integrity: sha512-l60ETUTmLqbVbVHv1J4/qj+M8nq7AwMzEcg3kmJDt9dCNrTk+yHcYFf/Kw75pMDwd9mPcIGCG5LcS20SxYRzFA==} dev: true - /es-set-tostringtag@2.0.2: - resolution: {integrity: sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==} + /es-object-atoms@1.0.0: + resolution: {integrity: sha512-MZ4iQ6JwHOBQjahnjwaC1ZtIBH+2ohjamzAO3oaHcXYup7qxjF2fixyH+Q71voWHeOkI2q/TnJao/KfXYIZWbw==} engines: {node: '>= 0.4'} dependencies: - get-intrinsic: 1.2.2 - has-tostringtag: 1.0.0 - hasown: 2.0.0 + es-errors: 1.3.0 + dev: true + + /es-set-tostringtag@2.0.3: + resolution: {integrity: sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==} + engines: {node: '>= 0.4'} + dependencies: + get-intrinsic: 1.2.4 + has-tostringtag: 1.0.2 + hasown: 2.0.2 dev: true /es-shim-unscopables@1.0.2: resolution: {integrity: sha512-J3yBRXCzDu4ULnQwxyToo/OjdMx6akgVC7K6few0a7F/0wLtmKKN7I73AH5T2836UuXRqN7Qg+IIUw/+YJksRw==} dependencies: - hasown: 2.0.0 + hasown: 2.0.2 dev: true /es-to-primitive@1.2.1: @@ -6581,39 +6676,39 @@ packages: '@esbuild/win32-x64': 0.18.20 dev: true - /esbuild@0.19.11: - resolution: {integrity: sha512-HJ96Hev2hX/6i5cDVwcqiJBBtuo9+FeIJOtZ9W1kA5M6AMJRHUZlpYZ1/SbEwtO0ioNAW8rUooVpC/WehY2SfA==} + /esbuild@0.19.12: + resolution: {integrity: sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==} engines: {node: '>=12'} hasBin: true requiresBuild: true optionalDependencies: - '@esbuild/aix-ppc64': 0.19.11 - '@esbuild/android-arm': 0.19.11 - '@esbuild/android-arm64': 0.19.11 - '@esbuild/android-x64': 0.19.11 - '@esbuild/darwin-arm64': 0.19.11 - '@esbuild/darwin-x64': 0.19.11 - '@esbuild/freebsd-arm64': 0.19.11 - '@esbuild/freebsd-x64': 0.19.11 - '@esbuild/linux-arm': 0.19.11 - '@esbuild/linux-arm64': 0.19.11 - '@esbuild/linux-ia32': 0.19.11 - '@esbuild/linux-loong64': 0.19.11 - '@esbuild/linux-mips64el': 0.19.11 - '@esbuild/linux-ppc64': 0.19.11 - '@esbuild/linux-riscv64': 0.19.11 - '@esbuild/linux-s390x': 0.19.11 - '@esbuild/linux-x64': 0.19.11 - '@esbuild/netbsd-x64': 0.19.11 - '@esbuild/openbsd-x64': 0.19.11 - '@esbuild/sunos-x64': 0.19.11 - '@esbuild/win32-arm64': 0.19.11 - '@esbuild/win32-ia32': 0.19.11 - '@esbuild/win32-x64': 0.19.11 - dev: true - - /escalade@3.1.1: - resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} + '@esbuild/aix-ppc64': 0.19.12 + '@esbuild/android-arm': 0.19.12 + '@esbuild/android-arm64': 0.19.12 + '@esbuild/android-x64': 0.19.12 + '@esbuild/darwin-arm64': 0.19.12 + '@esbuild/darwin-x64': 0.19.12 + '@esbuild/freebsd-arm64': 0.19.12 + '@esbuild/freebsd-x64': 0.19.12 + '@esbuild/linux-arm': 0.19.12 + '@esbuild/linux-arm64': 0.19.12 + '@esbuild/linux-ia32': 0.19.12 + '@esbuild/linux-loong64': 0.19.12 + '@esbuild/linux-mips64el': 0.19.12 + '@esbuild/linux-ppc64': 0.19.12 + '@esbuild/linux-riscv64': 0.19.12 + '@esbuild/linux-s390x': 0.19.12 + '@esbuild/linux-x64': 0.19.12 + '@esbuild/netbsd-x64': 0.19.12 + '@esbuild/openbsd-x64': 0.19.12 + '@esbuild/sunos-x64': 0.19.12 + '@esbuild/win32-arm64': 0.19.12 + '@esbuild/win32-ia32': 0.19.12 + '@esbuild/win32-x64': 0.19.12 + dev: true + + /escalade@3.1.2: + resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==} engines: {node: '>=6'} /escape-html@1.0.3: @@ -6647,13 +6742,13 @@ packages: source-map: 0.6.1 dev: true - /eslint-config-prettier@9.1.0(eslint@8.56.0): + /eslint-config-prettier@9.1.0(eslint@8.57.0): resolution: {integrity: sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==} hasBin: true peerDependencies: eslint: '>=7.0.0' dependencies: - eslint: 8.56.0 + eslint: 8.57.0 dev: true /eslint-import-resolver-node@0.3.9: @@ -6666,7 +6761,7 @@ packages: - supports-color dev: true - /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.18.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0): + /eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@6.21.0)(eslint-plugin-import@2.29.1)(eslint@8.57.0): resolution: {integrity: sha512-xgdptdoi5W3niYeuQxKmzVDTATvLYqhpwmykwsh7f6HIOStGWEIL9iqZgQDF9u9OEzrRwR8no5q2VT+bjAujTg==} engines: {node: ^14.18.0 || >=16.0.0} peerDependencies: @@ -6674,12 +6769,12 @@ packages: eslint-plugin-import: '*' dependencies: debug: 4.3.4 - enhanced-resolve: 5.15.0 - eslint: 8.56.0 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.18.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.18.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0) + enhanced-resolve: 5.16.0 + eslint: 8.57.0 + eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) fast-glob: 3.3.2 - get-tsconfig: 4.7.2 + get-tsconfig: 4.7.3 is-core-module: 2.13.1 is-glob: 4.0.3 transitivePeerDependencies: @@ -6689,8 +6784,8 @@ packages: - supports-color dev: true - /eslint-module-utils@2.8.0(@typescript-eslint/parser@6.18.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0): - resolution: {integrity: sha512-aWajIYfsqCKRDgUfjEXNN/JlrzauMuSEy5sbd7WXbtW3EH6A6MpwEh42c7qD+MqQo9QMJ6fWLAeIJynx0g6OAw==} + /eslint-module-utils@2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==} engines: {node: '>=4'} peerDependencies: '@typescript-eslint/parser': '*' @@ -6710,16 +6805,16 @@ packages: eslint-import-resolver-webpack: optional: true dependencies: - '@typescript-eslint/parser': 6.18.0(eslint@8.56.0)(typescript@4.9.5) + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@4.9.5) debug: 3.2.7 - eslint: 8.56.0 + eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.18.0)(eslint-plugin-import@2.29.1)(eslint@8.56.0) + eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@6.21.0)(eslint-plugin-import@2.29.1)(eslint@8.57.0) transitivePeerDependencies: - supports-color dev: true - /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.18.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0): + /eslint-plugin-import@2.29.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): resolution: {integrity: sha512-BbPC0cuExzhiMo4Ff1BTVwHpjjv28C5R+btTOGaCRC7UEz801up0JadwkeSk5Ued6TG34uaczuVuH6qyy5YUxw==} engines: {node: '>=4'} peerDependencies: @@ -6729,23 +6824,23 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 6.18.0(eslint@8.56.0)(typescript@4.9.5) - array-includes: 3.1.7 - array.prototype.findlastindex: 1.2.3 + '@typescript-eslint/parser': 6.21.0(eslint@8.57.0)(typescript@4.9.5) + array-includes: 3.1.8 + array.prototype.findlastindex: 1.2.5 array.prototype.flat: 1.3.2 array.prototype.flatmap: 1.3.2 debug: 3.2.7 doctrine: 2.1.0 - eslint: 8.56.0 + eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.0(@typescript-eslint/parser@6.18.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.56.0) - hasown: 2.0.0 + eslint-module-utils: 2.8.1(@typescript-eslint/parser@6.21.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 minimatch: 3.1.2 - object.fromentries: 2.0.7 - object.groupby: 1.0.1 - object.values: 1.1.7 + object.fromentries: 2.0.8 + object.groupby: 1.0.3 + object.values: 1.2.0 semver: 6.3.1 tsconfig-paths: 3.15.0 transitivePeerDependencies: @@ -6754,11 +6849,11 @@ packages: - supports-color dev: true - /eslint-plugin-jest@27.6.1(@typescript-eslint/eslint-plugin@6.18.0)(eslint@8.56.0)(jest@29.7.0)(typescript@4.9.5): - resolution: {integrity: sha512-WEYkyVXD9NlmFBKvrkmzrC+C9yZoz5pAml2hO19PlS3spJtoiwj4p2u8spd/7zx5IvRsZsCmsoImaAvBB9X93Q==} + /eslint-plugin-jest@27.9.0(@typescript-eslint/eslint-plugin@6.21.0)(eslint@8.57.0)(jest@29.7.0)(typescript@4.9.5): + resolution: {integrity: sha512-QIT7FH7fNmd9n4se7FFKHbsLKGQiw885Ds6Y/sxKgCZ6natwCsXdgPOADnYVxN2QrRweF0FZWbJ6S7Rsn7llug==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} peerDependencies: - '@typescript-eslint/eslint-plugin': ^5.0.0 || ^6.0.0 + '@typescript-eslint/eslint-plugin': ^5.0.0 || ^6.0.0 || ^7.0.0 eslint: ^7.0.0 || ^8.0.0 jest: '*' peerDependenciesMeta: @@ -6767,9 +6862,9 @@ packages: jest: optional: true dependencies: - '@typescript-eslint/eslint-plugin': 6.18.0(@typescript-eslint/parser@6.18.0)(eslint@8.56.0)(typescript@4.9.5) - '@typescript-eslint/utils': 5.62.0(eslint@8.56.0)(typescript@4.9.5) - eslint: 8.56.0 + '@typescript-eslint/eslint-plugin': 6.21.0(@typescript-eslint/parser@6.21.0)(eslint@8.57.0)(typescript@4.9.5) + '@typescript-eslint/utils': 5.62.0(eslint@8.57.0)(typescript@4.9.5) + eslint: 8.57.0 jest: 29.7.0 transitivePeerDependencies: - supports-color @@ -6797,16 +6892,16 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true - /eslint@8.56.0: - resolution: {integrity: sha512-Go19xM6T9puCOWntie1/P997aXxFsOi37JIHRWI514Hc6ZnaHGKY9xFhrU65RT6CcBEzZoGG1e6Nq+DT04ZtZQ==} + /eslint@8.57.0: + resolution: {integrity: sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} hasBin: true dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) + '@eslint-community/eslint-utils': 4.4.0(eslint@8.57.0) '@eslint-community/regexpp': 4.10.0 '@eslint/eslintrc': 2.1.4 - '@eslint/js': 8.56.0 - '@humanwhocodes/config-array': 0.11.13 + '@eslint/js': 8.57.0 + '@humanwhocodes/config-array': 0.11.14 '@humanwhocodes/module-importer': 1.0.1 '@nodelib/fs.walk': 1.2.8 '@ungap/structured-clone': 1.2.0 @@ -6827,7 +6922,7 @@ packages: glob-parent: 6.0.2 globals: 13.24.0 graphemer: 1.4.0 - ignore: 5.3.0 + ignore: 5.3.1 imurmurhash: 0.1.4 is-glob: 4.0.3 is-path-inside: 3.0.3 @@ -6837,7 +6932,7 @@ packages: lodash.merge: 4.6.2 minimatch: 3.1.2 natural-compare: 1.4.0 - optionator: 0.9.3 + optionator: 0.9.4 strip-ansi: 6.0.1 text-table: 0.2.0 transitivePeerDependencies: @@ -6930,7 +7025,7 @@ packages: human-signals: 4.3.1 is-stream: 3.0.0 merge-stream: 2.0.0 - npm-run-path: 5.2.0 + npm-run-path: 5.3.0 onetime: 6.0.0 signal-exit: 3.0.7 strip-final-newline: 3.0.0 @@ -6945,7 +7040,7 @@ packages: human-signals: 5.0.0 is-stream: 3.0.0 merge-stream: 2.0.0 - npm-run-path: 5.2.0 + npm-run-path: 5.3.0 onetime: 6.0.0 signal-exit: 4.1.0 strip-final-newline: 3.0.0 @@ -6967,16 +7062,16 @@ packages: jest-util: 29.7.0 dev: true - /express@4.18.2: - resolution: {integrity: sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==} + /express@4.19.2: + resolution: {integrity: sha512-5T6nhjsT+EOMzuck8JjBHARTHfMht0POzlA60WV2pMD3gyXw2LZnZ+ueGdNxG+0calOJcWKbpFcuzLZ91YWq9Q==} engines: {node: '>= 0.10.0'} dependencies: accepts: 1.3.8 array-flatten: 1.1.1 - body-parser: 1.20.1 + body-parser: 1.20.2 content-disposition: 0.5.4 content-type: 1.0.5 - cookie: 0.5.0 + cookie: 0.6.0 cookie-signature: 1.0.6 debug: 2.6.9 depd: 2.0.0 @@ -7010,8 +7105,8 @@ packages: resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==} dev: true - /extract-colors@4.0.2: - resolution: {integrity: sha512-G7v2C3LJqW38U+yRUPD6nJCjBRfdLD7y8efEHn+1qONt1mhj+OZBpzFmiaS+dZiHU/k0dvgK2kgIkbAllHVbRw==} + /extract-colors@4.0.4: + resolution: {integrity: sha512-/ZfiJzkTBpTA46ZrUEmk6mtfQy+xJqS8m5N259oiF3yKjUDJprS0H4buTpMGt5IA7LMLY/gEHVx5Qx/v9PynNQ==} dev: false /extract-zip@1.7.0: @@ -7060,8 +7155,8 @@ packages: resolution: {integrity: sha512-bijHueCGd0LqqNK9b5oCMHc0MluJAx0cwqASgbWMvkO01lCYgIhacVRLcaDz3QnyYIRNJRDwMb41VuT6pHJ91Q==} dev: false - /fastq@1.16.0: - resolution: {integrity: sha512-ifCoaXsDrsdkWTtiNJX5uzHDsrck5TzfKKDcuFFTIrrc/BS076qgEIfoIy1VeZqViznfKiysPYTh/QeHtnIsYA==} + /fastq@1.17.1: + resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==} dependencies: reusify: 1.0.4 dev: true @@ -7096,7 +7191,7 @@ packages: flat-cache: 3.2.0 dev: true - /file-loader@6.2.0(webpack@5.89.0): + /file-loader@6.2.0(webpack@5.91.0): resolution: {integrity: sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -7104,7 +7199,7 @@ packages: dependencies: loader-utils: 2.0.4 schema-utils: 3.3.0 - webpack: 5.89.0(esbuild@0.19.11) + webpack: 5.91.0(esbuild@0.19.12) dev: true /file-system-cache@2.3.0: @@ -7199,22 +7294,22 @@ packages: resolution: {integrity: sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==} engines: {node: ^10.12.0 || >=12.0.0} dependencies: - flatted: 3.2.9 + flatted: 3.3.1 keyv: 4.5.4 rimraf: 3.0.2 dev: true - /flatted@3.2.9: - resolution: {integrity: sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==} + /flatted@3.3.1: + resolution: {integrity: sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==} dev: true - /flow-parser@0.225.1: - resolution: {integrity: sha512-50fjR6zbLQcpq5IFNkheUSY/AFPxVeeLiBM5B3NQBSKId2G0cUuExOlDDOguxc49dl9lnh8hI1xcYlPJWNp4KQ==} + /flow-parser@0.235.1: + resolution: {integrity: sha512-s04193L4JE+ntEcQXbD6jxRRlyj9QXcgEl2W6xSjH4l9x4b0eHoCHfbYHjqf9LdZFUiM5LhgpiqsvLj/AyOyYQ==} engines: {node: '>=0.4.0'} dev: true - /follow-redirects@1.15.4(debug@4.3.4): - resolution: {integrity: sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==} + /follow-redirects@1.15.6(debug@4.3.4): + resolution: {integrity: sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==} engines: {node: '>=4.0'} peerDependencies: debug: '*' @@ -7257,22 +7352,23 @@ packages: resolution: {integrity: sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==} dev: true - /framer-motion@10.18.0(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-oGlDh1Q1XqYPksuTD/usb0I70hq95OUzmL9+6Zd+Hs4XV0oaISBa/UUMSjYiq6m8EUF32132mOJ8xVZS+I0S6w==} + /framer-motion@11.1.7(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-cW11Pu53eDAXUEhv5hEiWuIXWhfkbV32PlgVISn7jRdcAiVrJ1S03YQQ0/DzoswGYYwKi4qYmHHjCzAH52eSdQ==} peerDependencies: + '@emotion/is-prop-valid': '*' react: ^18.0.0 react-dom: ^18.0.0 peerDependenciesMeta: + '@emotion/is-prop-valid': + optional: true react: optional: true react-dom: optional: true dependencies: - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) tslib: 2.6.2 - optionalDependencies: - '@emotion/is-prop-valid': 0.8.8 dev: false /fresh@0.5.2: @@ -7329,9 +7425,9 @@ packages: resolution: {integrity: sha512-Z5kx79swU5P27WEayXM1tBi5Ze/lbIyiNgU3qyXUOf9b2rgXYyF9Dy9Cx+IQv/Lc8WCG6L82zwUPpSS9hGehIg==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-abstract: 1.23.3 functions-have-names: 1.2.3 dev: true @@ -7348,13 +7444,15 @@ packages: resolution: {integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==} engines: {node: 6.* || 8.* || >= 10.*} - /get-intrinsic@1.2.2: - resolution: {integrity: sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==} + /get-intrinsic@1.2.4: + resolution: {integrity: sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==} + engines: {node: '>= 0.4'} dependencies: + es-errors: 1.3.0 function-bind: 1.1.2 - has-proto: 1.0.1 + has-proto: 1.0.3 has-symbols: 1.0.3 - hasown: 2.0.0 + hasown: 2.0.2 dev: true /get-nonce@1.0.1: @@ -7398,32 +7496,33 @@ packages: engines: {node: '>=16'} dev: true - /get-symbol-description@1.0.0: - resolution: {integrity: sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==} + /get-symbol-description@1.0.2: + resolution: {integrity: sha512-g0QYk1dZBxGwk+Ngc+ltRH2IBp2f7zBkBMBJZCDerh6EhlhSR6+9irMCuT/09zD6qkarHUSn529sK/yL4S27mg==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 - get-intrinsic: 1.2.2 + call-bind: 1.0.7 + es-errors: 1.3.0 + get-intrinsic: 1.2.4 dev: true - /get-tsconfig@4.7.2: - resolution: {integrity: sha512-wuMsz4leaj5hbGgg4IvDU0bqJagpftG5l5cXIAvo8uZrqn0NJqwtfupTN00VnkQJPcIRrxYrm1Ue24btpCha2A==} + /get-tsconfig@4.7.3: + resolution: {integrity: sha512-ZvkrzoUA0PQZM6fy6+/Hce561s+faD1rsNwhnO5FelNjyy7EMGJ3Rz1AQ8GYDWjhRs/7dBLOEJvhK8MiEJOAFg==} dependencies: resolve-pkg-maps: 1.0.0 dev: true - /giget@1.2.1: - resolution: {integrity: sha512-4VG22mopWtIeHwogGSy1FViXVo0YT+m6BrqZfz0JJFwbSsePsCdOzdLIIli5BtMp7Xe8f/o2OmBpQX2NBOC24g==} + /giget@1.2.3: + resolution: {integrity: sha512-8EHPljDvs7qKykr6uw8b+lqLiUc/vUg+KVTI0uND4s63TdsZM2Xus3mflvF0DDG9SiM4RlCkFGL+7aAjRmV7KA==} hasBin: true dependencies: - citty: 0.1.5 + citty: 0.1.6 consola: 3.2.3 defu: 6.1.4 - node-fetch-native: 1.6.1 - nypm: 0.3.4 + node-fetch-native: 1.6.4 + nypm: 0.3.8 ohash: 1.1.3 - pathe: 1.1.1 - tar: 6.2.0 + pathe: 1.1.2 + tar: 6.2.1 dev: true /git-raw-commits@2.0.11: @@ -7493,16 +7592,16 @@ packages: resolution: {integrity: sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==} dev: true - /glob@10.3.10: - resolution: {integrity: sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==} + /glob@10.3.12: + resolution: {integrity: sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==} engines: {node: '>=16 || 14 >=14.17'} hasBin: true dependencies: foreground-child: 3.1.1 jackspeak: 2.3.6 - minimatch: 9.0.3 + minimatch: 9.0.4 minipass: 7.0.4 - path-scurry: 1.10.1 + path-scurry: 1.10.2 dev: true /glob@7.2.3: @@ -7542,7 +7641,7 @@ packages: array-union: 2.1.0 dir-glob: 3.0.1 fast-glob: 3.3.2 - ignore: 5.3.0 + ignore: 5.3.1 merge2: 1.4.1 slash: 3.0.0 dev: true @@ -7554,7 +7653,7 @@ packages: /gopd@1.0.1: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} dependencies: - get-intrinsic: 1.2.2 + get-intrinsic: 1.2.4 dev: true /graceful-fs@4.2.11: @@ -7619,14 +7718,14 @@ packages: engines: {node: '>=8'} dev: true - /has-property-descriptors@1.0.1: - resolution: {integrity: sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==} + /has-property-descriptors@1.0.2: + resolution: {integrity: sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==} dependencies: - get-intrinsic: 1.2.2 + es-define-property: 1.0.0 dev: true - /has-proto@1.0.1: - resolution: {integrity: sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==} + /has-proto@1.0.3: + resolution: {integrity: sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==} engines: {node: '>= 0.4'} dev: true @@ -7635,15 +7734,15 @@ packages: engines: {node: '>= 0.4'} dev: true - /has-tostringtag@1.0.0: - resolution: {integrity: sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==} + /has-tostringtag@1.0.2: + resolution: {integrity: sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==} engines: {node: '>= 0.4'} dependencies: has-symbols: 1.0.3 dev: true - /hasown@2.0.0: - resolution: {integrity: sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==} + /hasown@2.0.2: + resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} engines: {node: '>= 0.4'} dependencies: function-bind: 1.1.2 @@ -7656,8 +7755,8 @@ packages: readable-stream: 3.6.2 dev: true - /hls.js@1.4.14: - resolution: {integrity: sha512-UppQjyvPVclg+6t2KY/Rv03h0+bA5u6zwqVoz4LAC/L0fgYmIaCD7ZCrwe8WI1Gv01be1XL0QFsRbSdIHV/Wbw==} + /hls.js@1.5.8: + resolution: {integrity: sha512-hJYMPfLhWO7/7+n4f9pn6bOheCGx0WgvVz7k3ouq3Pp1bja48NN+HeCQu3XCGYzqWQF/wo7Sk6dJAyWVJD8ECA==} /hoist-non-react-statics@3.3.2: resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==} @@ -7765,8 +7864,8 @@ packages: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} dev: true - /ignore@5.3.0: - resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==} + /ignore@5.3.1: + resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==} engines: {node: '>= 4'} dev: true @@ -7835,21 +7934,21 @@ packages: fast-loops: 1.1.3 dev: false - /internal-slot@1.0.6: - resolution: {integrity: sha512-Xj6dv+PsbtwyPpEflsejS+oIZxmMlV44zAhG479uYu89MsjcYOhCFnNyKrkJrihbsiasQyY0afoCl/9BLR65bg==} + /internal-slot@1.0.7: + resolution: {integrity: sha512-NGnrKwXzSms2qUUih/ILZ5JBqNTSa1+ZmP6flaIp6KmSElgE9qdndzS3cqjrDovwFdmwsGsLdeFgB6suw+1e9g==} engines: {node: '>= 0.4'} dependencies: - get-intrinsic: 1.2.2 - hasown: 2.0.0 - side-channel: 1.0.4 + es-errors: 1.3.0 + hasown: 2.0.2 + side-channel: 1.0.6 dev: true - /intl-messageformat@10.5.8: - resolution: {integrity: sha512-NRf0jpBWV0vd671G5b06wNofAN8tp7WWDogMZyaU8GUAsmbouyvgwmFJI7zLjfAMpm3zK+vSwRP3jzaoIcMbaA==} + /intl-messageformat@10.5.11: + resolution: {integrity: sha512-eYq5fkFBVxc7GIFDzpFQkDOZgNayNTQn4Oufe8jw6YY6OHVw70/4pA3FyCsQ0Gb2DnvEJEMmN2tOaXUGByM+kg==} dependencies: - '@formatjs/ecma402-abstract': 1.18.0 + '@formatjs/ecma402-abstract': 1.18.2 '@formatjs/fast-memoize': 2.2.0 - '@formatjs/icu-messageformat-parser': 2.7.3 + '@formatjs/icu-messageformat-parser': 2.7.6 tslib: 2.6.2 dev: false @@ -7858,8 +7957,8 @@ packages: dependencies: loose-envify: 1.4.0 - /ip@2.0.0: - resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==} + /ip@2.0.1: + resolution: {integrity: sha512-lJUL9imLTNi1ZfXT+DU6rBBdbiKGBuay9B6xGSPVjUeQwaH1RIGqef8RZkUtHioLmSNpPR5M4HVKJGm1j8FWVQ==} dev: true /ipaddr.js@1.9.1: @@ -7876,16 +7975,16 @@ packages: resolution: {integrity: sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 - has-tostringtag: 1.0.0 + call-bind: 1.0.7 + has-tostringtag: 1.0.2 dev: true - /is-array-buffer@3.0.2: - resolution: {integrity: sha512-y+FyyR/w8vfIRq4eQcM1EYgSTnmHXPqaF+IgzgraytCFq5Xh8lllDVmAZolPJiZttZLeFSINPYMaEJ7/vWUa1w==} + /is-array-buffer@3.0.4: + resolution: {integrity: sha512-wcjaerHw0ydZwfhiKbXJWLDY8A7yV7KhjQOpb83hGgGfId/aQa4TOvwyzn2PuswW2gPCYEL/nEAiSVpdOj1lXw==} + engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 - get-intrinsic: 1.2.2 - is-typed-array: 1.1.12 + call-bind: 1.0.7 + get-intrinsic: 1.2.4 dev: true /is-arrayish@0.2.1: @@ -7902,15 +8001,15 @@ packages: resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} engines: {node: '>=8'} dependencies: - binary-extensions: 2.2.0 + binary-extensions: 2.3.0 dev: true /is-boolean-object@1.1.2: resolution: {integrity: sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 - has-tostringtag: 1.0.0 + call-bind: 1.0.7 + has-tostringtag: 1.0.2 dev: true /is-callable@1.2.7: @@ -7921,14 +8020,21 @@ packages: /is-core-module@2.13.1: resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==} dependencies: - hasown: 2.0.0 + hasown: 2.0.2 + dev: true + + /is-data-view@1.0.1: + resolution: {integrity: sha512-AHkaJrsUVW6wq6JS8y3JnM/GJF/9cf+k20+iDzlSaJrinEo5+7vRiteOSwBhHRiAyQATN1AmY4hwzxJKPmYf+w==} + engines: {node: '>= 0.4'} + dependencies: + is-typed-array: 1.1.13 dev: true /is-date-object@1.0.5: resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==} engines: {node: '>= 0.4'} dependencies: - has-tostringtag: 1.0.0 + has-tostringtag: 1.0.2 dev: true /is-deflate@1.0.0: @@ -7964,7 +8070,7 @@ packages: resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==} engines: {node: '>= 0.4'} dependencies: - has-tostringtag: 1.0.0 + has-tostringtag: 1.0.2 dev: true /is-glob@4.0.3: @@ -7988,12 +8094,12 @@ packages: resolution: {integrity: sha512-E+zBKpQ2t6MEo1VsonYmluk9NxGrbzpeeLC2xIViuO2EjU2xsXsBPwTr3Ykv9l08UYEVEdWeRZNouaZqF6RN0w==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 dev: true - /is-negative-zero@2.0.2: - resolution: {integrity: sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==} + /is-negative-zero@2.0.3: + resolution: {integrity: sha512-5KoIu2Ngpyek75jXodFvnafB6DJgr3u8uuK0LEZJjrU19DrMD3EVERaR8sjz8CCGgpZvxPl9SuE1GMVPFHx1mw==} engines: {node: '>= 0.4'} dev: true @@ -8001,7 +8107,7 @@ packages: resolution: {integrity: sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==} engines: {node: '>= 0.4'} dependencies: - has-tostringtag: 1.0.0 + has-tostringtag: 1.0.2 dev: true /is-number@7.0.0: @@ -8045,14 +8151,15 @@ packages: resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 - has-tostringtag: 1.0.0 + call-bind: 1.0.7 + has-tostringtag: 1.0.2 dev: true - /is-shared-array-buffer@1.0.2: - resolution: {integrity: sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==} + /is-shared-array-buffer@1.0.3: + resolution: {integrity: sha512-nA2hv5XIhLR3uVzDDfCIknerhx8XUKnstuOERPNNIinXG7v9u+ohXF67vxm4TPTEPU6lm61ZkwP3c9PCB97rhg==} + engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 dev: true /is-stream@2.0.1: @@ -8069,7 +8176,7 @@ packages: resolution: {integrity: sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==} engines: {node: '>= 0.4'} dependencies: - has-tostringtag: 1.0.0 + has-tostringtag: 1.0.2 dev: true /is-symbol@1.0.4: @@ -8086,11 +8193,11 @@ packages: text-extensions: 1.9.0 dev: true - /is-typed-array@1.1.12: - resolution: {integrity: sha512-Z14TF2JNG8Lss5/HMqt0//T9JeHXttXy5pH/DBU4vi98ozO2btxzq9MwYDZYnKwU8nRsz/+GVFVRDq3DkVuSPg==} + /is-typed-array@1.1.13: + resolution: {integrity: sha512-uZ25/bUAlUY5fR4OKT4rZQEBrzQWYV9ZJYGGsUmEJ6thodVJ1HX64ePQ6Z0qPWP+m+Uq6e9UugrE38jeYsDSMw==} engines: {node: '>= 0.4'} dependencies: - which-typed-array: 1.1.13 + which-typed-array: 1.1.15 dev: true /is-unicode-supported@0.1.0: @@ -8101,7 +8208,7 @@ packages: /is-weakref@1.0.2: resolution: {integrity: sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 dev: true /is-what@3.14.1: @@ -8145,8 +8252,8 @@ packages: resolution: {integrity: sha512-pzqtp31nLv/XFOzXGuvhCb8qhjmTVo5vjVk19XE4CRlSWz0KoeJ3bw9XsA7nOp9YBf4qHjwBxkDzKcME/J29Yg==} engines: {node: '>=8'} dependencies: - '@babel/core': 7.23.7 - '@babel/parser': 7.23.6 + '@babel/core': 7.24.4 + '@babel/parser': 7.24.4 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.2 semver: 6.3.1 @@ -8154,15 +8261,15 @@ packages: - supports-color dev: true - /istanbul-lib-instrument@6.0.1: - resolution: {integrity: sha512-EAMEJBsYuyyztxMxW3g7ugGPkrZsV57v0Hmv3mm1uQsmB+QnZuepg731CRaIgeUVSdmsTngOkSnauNF8p7FIhA==} + /istanbul-lib-instrument@6.0.2: + resolution: {integrity: sha512-1WUsZ9R1lA0HtBSohTkm39WTPlNKSJ5iFk7UwqXkBLoHQT+hfqPsfsTDVuZdKGaBwn7din9bS7SsnoAr943hvw==} engines: {node: '>=10'} dependencies: - '@babel/core': 7.23.7 - '@babel/parser': 7.23.6 + '@babel/core': 7.24.4 + '@babel/parser': 7.24.4 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.2 - semver: 7.5.4 + semver: 7.6.0 transitivePeerDependencies: - supports-color dev: true @@ -8187,8 +8294,8 @@ packages: - supports-color dev: true - /istanbul-reports@3.1.6: - resolution: {integrity: sha512-TLgnMkKg3iTDsQ9PbPTdpfAK2DzjF9mqUG7RMgcQl8oFjad8ob4laGxv5XV5U9MAfx8D6tSJiUyuAwzLicaxlg==} + /istanbul-reports@3.1.7: + resolution: {integrity: sha512-BewmUXImeuRk2YY0PVbxgKAysvhRPUQE0h5QRM++nVWyubKGV0l8qQ5op8+B2DOmwSe63Jivj0BjkPQVf8fP5g==} engines: {node: '>=8'} dependencies: html-escaper: 2.0.2 @@ -8232,10 +8339,10 @@ packages: '@jest/expect': 29.7.0 '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.10.7 + '@types/node': 20.12.7 chalk: 4.1.2 co: 4.6.0 - dedent: 1.5.1 + dedent: 1.5.3 is-generator-fn: 2.1.0 jest-each: 29.7.0 jest-matcher-utils: 29.7.0 @@ -8245,7 +8352,7 @@ packages: jest-util: 29.7.0 p-limit: 3.1.0 pretty-format: 29.7.0 - pure-rand: 6.0.4 + pure-rand: 6.1.0 slash: 3.0.0 stack-utils: 2.0.6 transitivePeerDependencies: @@ -8270,7 +8377,7 @@ packages: create-jest: 29.7.0 exit: 0.1.2 import-local: 3.1.0 - jest-config: 29.7.0(@types/node@20.10.7) + jest-config: 29.7.0(@types/node@20.12.7) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -8281,7 +8388,7 @@ packages: - ts-node dev: true - /jest-config@29.7.0(@types/node@20.10.7): + /jest-config@29.7.0(@types/node@20.12.7): resolution: {integrity: sha512-uXbpfeQ7R6TZBqI3/TxCU4q4ttk3u0PJeC+E0zbfSoSjq6bJ7buBPxzQPL0ifrkY4DNu4JUdk0ImlBUYi840eQ==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} peerDependencies: @@ -8293,11 +8400,11 @@ packages: ts-node: optional: true dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 '@jest/test-sequencer': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.10.7 - babel-jest: 29.7.0(@babel/core@7.23.7) + '@types/node': 20.12.7 + babel-jest: 29.7.0(@babel/core@7.24.4) chalk: 4.1.2 ci-info: 3.9.0 deepmerge: 4.3.1 @@ -8356,7 +8463,7 @@ packages: '@jest/environment': 29.7.0 '@jest/fake-timers': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.10.7 + '@types/node': 20.12.7 jest-mock: 29.7.0 jest-util: 29.7.0 dev: true @@ -8372,7 +8479,7 @@ packages: dependencies: '@jest/types': 29.6.3 '@types/graceful-fs': 4.1.9 - '@types/node': 20.10.7 + '@types/node': 20.12.7 anymatch: 3.1.3 fb-watchman: 2.0.2 graceful-fs: 4.2.11 @@ -8407,7 +8514,7 @@ packages: resolution: {integrity: sha512-GBEV4GRADeP+qtB2+6u61stea8mGcOT4mCtrYISZwfu9/ISHFJ/5zOMXYbpBE9RsS5+Gb63DW4FgmnKJ79Kf6w==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@babel/code-frame': 7.23.5 + '@babel/code-frame': 7.24.2 '@jest/types': 29.6.3 '@types/stack-utils': 2.0.3 chalk: 4.1.2 @@ -8423,7 +8530,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 20.10.7 + '@types/node': 20.12.7 jest-util: 29.7.0 dev: true @@ -8478,7 +8585,7 @@ packages: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.10.7 + '@types/node': 20.12.7 chalk: 4.1.2 emittery: 0.13.1 graceful-fs: 4.2.11 @@ -8509,9 +8616,9 @@ packages: '@jest/test-result': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.10.7 + '@types/node': 20.12.7 chalk: 4.1.2 - cjs-module-lexer: 1.2.3 + cjs-module-lexer: 1.3.1 collect-v8-coverage: 1.0.2 glob: 7.2.3 graceful-fs: 4.2.11 @@ -8532,15 +8639,15 @@ packages: resolution: {integrity: sha512-Rm0BMWtxBcioHr1/OX5YCP8Uov4riHvKPknOGs804Zg9JGZgmIBkbtlxJC/7Z4msKYVbIJtfU+tKb8xlYNfdkw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@babel/core': 7.23.7 - '@babel/generator': 7.23.6 - '@babel/plugin-syntax-jsx': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-syntax-typescript': 7.23.3(@babel/core@7.23.7) - '@babel/types': 7.23.6 + '@babel/core': 7.24.4 + '@babel/generator': 7.24.4 + '@babel/plugin-syntax-jsx': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-syntax-typescript': 7.24.1(@babel/core@7.24.4) + '@babel/types': 7.24.0 '@jest/expect-utils': 29.7.0 '@jest/transform': 29.7.0 '@jest/types': 29.6.3 - babel-preset-current-node-syntax: 1.0.1(@babel/core@7.23.7) + babel-preset-current-node-syntax: 1.0.1(@babel/core@7.24.4) chalk: 4.1.2 expect: 29.7.0 graceful-fs: 4.2.11 @@ -8551,7 +8658,7 @@ packages: jest-util: 29.7.0 natural-compare: 1.4.0 pretty-format: 29.7.0 - semver: 7.5.4 + semver: 7.6.0 transitivePeerDependencies: - supports-color dev: true @@ -8561,7 +8668,7 @@ packages: engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: '@jest/types': 29.6.3 - '@types/node': 20.10.7 + '@types/node': 20.12.7 chalk: 4.1.2 ci-info: 3.9.0 graceful-fs: 4.2.11 @@ -8586,7 +8693,7 @@ packages: dependencies: '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 20.10.7 + '@types/node': 20.12.7 ansi-escapes: 4.3.2 chalk: 4.1.2 emittery: 0.13.1 @@ -8598,7 +8705,7 @@ packages: resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==} engines: {node: '>= 10.13.0'} dependencies: - '@types/node': 20.10.7 + '@types/node': 20.12.7 merge-stream: 2.0.0 supports-color: 8.1.1 dev: true @@ -8607,7 +8714,7 @@ packages: resolution: {integrity: sha512-eIz2msL/EzL9UFTFFx7jBTkeZfku0yUAyZZZmJ93H2TYEiroIx2PQjEXcwYtYl8zXCxb+PAmA2hLIt/6ZEkPHw==} engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} dependencies: - '@types/node': 20.10.7 + '@types/node': 20.12.7 jest-util: 29.7.0 merge-stream: 2.0.0 supports-color: 8.1.1 @@ -8639,8 +8746,8 @@ packages: engines: {node: '>=10'} dev: true - /js-base64@3.7.5: - resolution: {integrity: sha512-3MEt5DTINKqfScXKfJFrRbxkrnk2AxPWGBL/ycjz4dK8iqiSJ06UxD8jh8xuh6p10TX4t2+7FsBYVxxQbMg+qA==} + /js-base64@3.7.7: + resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==} dev: true /js-cookie@2.2.1: @@ -8669,8 +8776,8 @@ packages: argparse: 2.0.1 dev: true - /jscodeshift@0.15.1(@babel/preset-env@7.23.7): - resolution: {integrity: sha512-hIJfxUy8Rt4HkJn/zZPU9ChKfKZM1342waJ1QC2e2YsPcWhM+3BJ4dcfQCzArTrk1jJeNLB341H+qOcEHRxJZg==} + /jscodeshift@0.15.2(@babel/preset-env@7.24.4): + resolution: {integrity: sha512-FquR7Okgmc4Sd0aEDwqho3rEiKR3BdvuG9jfdHjLJ6JQoWSMpavug3AoIfnfWhxFlf+5pzQh8qjqz0DWFrNQzA==} hasBin: true peerDependencies: '@babel/preset-env': ^7.1.6 @@ -8678,25 +8785,25 @@ packages: '@babel/preset-env': optional: true dependencies: - '@babel/core': 7.23.7 - '@babel/parser': 7.23.6 - '@babel/plugin-transform-class-properties': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-modules-commonjs': 7.23.3(@babel/core@7.23.7) - '@babel/plugin-transform-nullish-coalescing-operator': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.7) - '@babel/plugin-transform-private-methods': 7.23.3(@babel/core@7.23.7) - '@babel/preset-env': 7.23.7(@babel/core@7.23.7) - '@babel/preset-flow': 7.23.3(@babel/core@7.23.7) - '@babel/preset-typescript': 7.23.3(@babel/core@7.23.7) - '@babel/register': 7.23.7(@babel/core@7.23.7) - babel-core: 7.0.0-bridge.0(@babel/core@7.23.7) + '@babel/core': 7.24.4 + '@babel/parser': 7.24.4 + '@babel/plugin-transform-class-properties': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-modules-commonjs': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-nullish-coalescing-operator': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-optional-chaining': 7.24.1(@babel/core@7.24.4) + '@babel/plugin-transform-private-methods': 7.24.1(@babel/core@7.24.4) + '@babel/preset-env': 7.24.4(@babel/core@7.24.4) + '@babel/preset-flow': 7.24.1(@babel/core@7.24.4) + '@babel/preset-typescript': 7.24.1(@babel/core@7.24.4) + '@babel/register': 7.23.7(@babel/core@7.24.4) + babel-core: 7.0.0-bridge.0(@babel/core@7.24.4) chalk: 4.1.2 - flow-parser: 0.225.1 + flow-parser: 0.235.1 graceful-fs: 4.2.11 micromatch: 4.0.5 neo-async: 2.6.2 node-dir: 0.1.17 - recast: 0.23.4 + recast: 0.23.6 temp: 0.8.4 write-file-atomic: 2.4.3 transitivePeerDependencies: @@ -8785,7 +8892,7 @@ packages: engines: {node: '>=14.0.0'} dependencies: app-root-dir: 1.0.2 - dotenv: 16.3.1 + dotenv: 16.4.5 dotenv-expand: 10.0.0 dev: true @@ -8830,8 +8937,8 @@ packages: engines: {node: '>=10'} dev: true - /lilconfig@3.0.0: - resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==} + /lilconfig@3.1.1: + resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==} engines: {node: '>=14'} dev: true @@ -8846,14 +8953,14 @@ packages: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} dev: true - /linkify-react@4.1.3(linkifyjs@4.1.3)(react@18.2.0): + /linkify-react@4.1.3(linkifyjs@4.1.3)(react@18.3.1): resolution: {integrity: sha512-rhI3zM/fxn5BfRPHfi4r9N7zgac4vOIxub1wHIWXLA5ENTMs+BGaIaFO1D1PhmxgwhIKmJz3H7uCP0Dg5JwSlA==} peerDependencies: linkifyjs: ^4.0.0 react: '>= 15.0.0' dependencies: linkifyjs: 4.1.3 - react: 18.2.0 + react: 18.3.1 dev: false /linkifyjs@4.1.3: @@ -8893,7 +9000,7 @@ packages: colorette: 2.0.20 eventemitter3: 5.0.1 log-update: 5.0.1 - rfdc: 1.3.0 + rfdc: 1.3.1 wrap-ansi: 8.1.0 dev: true @@ -9008,8 +9115,8 @@ packages: dependencies: js-tokens: 4.0.0 - /lru-cache@10.1.0: - resolution: {integrity: sha512-/1clY/ui8CzjKFyjdvwPWJUYKiFVXG2I2cY0ssG7h4+hwk+XOIX7ZSG9Q7TW8TW3Kp3BUSqgFWBLgL4PJ+Blag==} + /lru-cache@10.2.2: + resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==} engines: {node: 14 || >=16.14} dev: true @@ -9039,9 +9146,8 @@ packages: '@jridgewell/sourcemap-codec': 1.4.15 dev: true - /magic-string@0.30.5: - resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==} - engines: {node: '>=12'} + /magic-string@0.30.10: + resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==} dependencies: '@jridgewell/sourcemap-codec': 1.4.15 dev: true @@ -9065,7 +9171,7 @@ packages: resolution: {integrity: sha512-hXdUTZYIVOt1Ex//jAQi+wTZZpUpwBj/0QsOzqegb3rGMMeJiSEu5xLHnYfBrRV4RH2+OCSOO95Is/7x1WJ4bw==} engines: {node: '>=10'} dependencies: - semver: 7.5.4 + semver: 7.6.0 dev: true /make-error@1.3.6: @@ -9092,13 +9198,13 @@ packages: resolution: {integrity: sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg==} dev: true - /markdown-to-jsx@7.4.0(react@18.2.0): - resolution: {integrity: sha512-zilc+MIkVVXPyTb4iIUTIz9yyqfcWjszGXnwF9K/aiBWcHXFcmdEMTkG01/oQhwSCH7SY1BnG6+ev5BzWmbPrg==} + /markdown-to-jsx@7.4.7(react@18.3.1): + resolution: {integrity: sha512-0+ls1IQZdU6cwM1yu0ZjjiVWYtkbExSyUIFU2ZeDIFuZM1W42Mh4OlJ4nb4apX4H8smxDHRdFaoIVJGwfv5hkg==} engines: {node: '>= 10'} peerDependencies: react: '>= 0.14.0' dependencies: - react: 18.2.0 + react: 18.3.1 dev: true /mdast-util-definitions@4.0.0: @@ -9239,6 +9345,13 @@ packages: brace-expansion: 2.0.1 dev: true + /minimatch@9.0.4: + resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==} + engines: {node: '>=16 || 14 >=14.17'} + dependencies: + brace-expansion: 2.0.1 + dev: true + /minimist-options@4.1.0: resolution: {integrity: sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==} engines: {node: '>= 6'} @@ -9321,7 +9434,7 @@ packages: commist: 1.1.0 concat-stream: 2.0.0 debug: 4.3.4 - duplexify: 4.1.2 + duplexify: 4.1.3 help-me: 3.0.0 inherits: 2.0.4 lru-cache: 6.0.0 @@ -9331,7 +9444,7 @@ packages: pump: 3.0.0 readable-stream: 3.6.2 reinterval: 1.1.0 - rfdc: 1.3.0 + rfdc: 1.3.1 split2: 3.2.2 ws: 7.5.9 xtend: 4.0.2 @@ -9361,7 +9474,7 @@ packages: thenify-all: 1.6.0 dev: true - /nano-css@5.6.1(react-dom@18.2.0)(react@18.2.0): + /nano-css@5.6.1(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-T2Mhc//CepkTa3X4pUhKgbEheJHYAxD0VptuqFhDbGMUWVV2m+lkNiW/Ieuj35wrfC8Zm0l7HvssQh7zcEttSw==} peerDependencies: react: '*' @@ -9372,11 +9485,11 @@ packages: csstype: 3.1.3 fastest-stable-stringify: 2.0.2 inline-style-prefixer: 7.0.0 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) rtl-css-js: 1.16.1 stacktrace-js: 2.0.2 - stylis: 4.3.1 + stylis: 4.3.2 dev: false /nanoid@3.3.7: @@ -9416,8 +9529,8 @@ packages: minimatch: 3.1.2 dev: true - /node-fetch-native@1.6.1: - resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==} + /node-fetch-native@1.6.4: + resolution: {integrity: sha512-IhOigYzAKHd244OC0JIMIUrjzctirCmPkaIfhDeGcEETWof5zKYUW7e7MYvChGWh/4CJeXEgsRyGzuF334rOOQ==} dev: true /node-fetch@2.7.0: @@ -9455,7 +9568,7 @@ packages: dependencies: hosted-git-info: 4.1.0 is-core-module: 2.13.1 - semver: 7.5.4 + semver: 7.6.0 validate-npm-package-license: 3.0.4 dev: true @@ -9476,8 +9589,8 @@ packages: path-key: 3.1.1 dev: true - /npm-run-path@5.2.0: - resolution: {integrity: sha512-W4/tgAXFqFA0iL7fk0+uQ3g7wkL8xJmx3XdK0VGb4cHW//eZTtKGvFBBoRKVTpY7n6ze4NL9ly7rgXcHufqXKg==} + /npm-run-path@5.3.0: + resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} dependencies: path-key: 4.0.0 @@ -9492,15 +9605,16 @@ packages: - supports-color dev: true - /nypm@0.3.4: - resolution: {integrity: sha512-1JLkp/zHBrkS3pZ692IqOaIKSYHmQXgqfELk6YTOfVBnwealAmPA1q2kKK7PHJAHSMBozerThEFZXP3G6o7Ukg==} + /nypm@0.3.8: + resolution: {integrity: sha512-IGWlC6So2xv6V4cIDmoV0SwwWx7zLG086gyqkyumteH2fIgCAM4nDVFB2iDRszDvmdSVW9xb1N+2KjQ6C7d4og==} engines: {node: ^14.16.0 || >=16.10.0} hasBin: true dependencies: - citty: 0.1.5 + citty: 0.1.6 + consola: 3.2.3 execa: 8.0.1 - pathe: 1.1.1 - ufo: 1.3.2 + pathe: 1.1.2 + ufo: 1.5.3 dev: true /object-assign@4.1.1: @@ -9520,11 +9634,11 @@ packages: resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==} dev: true - /object-is@1.1.5: - resolution: {integrity: sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==} + /object-is@1.1.6: + resolution: {integrity: sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 dev: true @@ -9537,37 +9651,38 @@ packages: resolution: {integrity: sha512-byy+U7gp+FVwmyzKPYhW2h5l3crpmGsxl7X2s8y43IgxvG4g3QZ6CffDtsNQy1WsmZpQbO+ybo0AlW7TY6DcBQ==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 has-symbols: 1.0.3 object-keys: 1.1.1 dev: true - /object.fromentries@2.0.7: - resolution: {integrity: sha512-UPbPHML6sL8PI/mOqPwsH4G6iyXcCGzLin8KvEPenOZN5lpCNBZZQ+V62vdjB1mQHrmqGQt5/OJzemUA+KJmEA==} + /object.fromentries@2.0.8: + resolution: {integrity: sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-abstract: 1.23.3 + es-object-atoms: 1.0.0 dev: true - /object.groupby@1.0.1: - resolution: {integrity: sha512-HqaQtqLnp/8Bn4GL16cj+CUYbnpe1bh0TtEaWvybszDG4tgxCJuRpV8VGuvNaI1fAnI4lUJzDG55MXcOH4JZcQ==} + /object.groupby@1.0.3: + resolution: {integrity: sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==} + engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 - get-intrinsic: 1.2.2 + es-abstract: 1.23.3 dev: true - /object.values@1.1.7: - resolution: {integrity: sha512-aU6xnDFYT3x17e/f0IiiwlGPTy2jzMySGfUB4fq6z7CV8l85CWHDk5ErhyhpfDHhrOMwGFhSQkhMGHaIotA6Ng==} + /object.values@1.2.0: + resolution: {integrity: sha512-yBYjY9QX2hnRmZHAjG/f13MzmBzxzYgQhFrke06TTyKY5zSTEqkOeukBzIdVA3j3ulu8Qa3MbVFShV7T2RmGtQ==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-object-atoms: 1.0.0 dev: true /ohash@1.1.3: @@ -9615,16 +9730,16 @@ packages: is-wsl: 2.2.0 dev: true - /optionator@0.9.3: - resolution: {integrity: sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==} + /optionator@0.9.4: + resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==} engines: {node: '>= 0.8.0'} dependencies: - '@aashutoshrathi/word-wrap': 1.2.6 deep-is: 0.1.4 fast-levenshtein: 2.0.6 levn: 0.4.1 prelude-ls: 1.2.1 type-check: 0.4.0 + word-wrap: 1.2.5 dev: true /ora@5.4.1: @@ -9731,7 +9846,7 @@ packages: resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==} engines: {node: '>=8'} dependencies: - '@babel/code-frame': 7.23.5 + '@babel/code-frame': 7.24.2 error-ex: 1.3.2 json-parse-even-better-errors: 2.3.1 lines-and-columns: 1.2.4 @@ -9788,11 +9903,11 @@ packages: resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} dev: true - /path-scurry@1.10.1: - resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==} + /path-scurry@1.10.2: + resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==} engines: {node: '>=16 || 14 >=14.17'} dependencies: - lru-cache: 10.1.0 + lru-cache: 10.2.2 minipass: 7.0.4 dev: true @@ -9812,8 +9927,8 @@ packages: engines: {node: '>=8'} dev: true - /pathe@1.1.1: - resolution: {integrity: sha512-d+RQGp0MAYTIaDBIMmOfMwz3E+LOZnxx1HZd5R18mmCZY0QBlK0LDZfPc8FW8Ed2DlvsuE6PRjroDY+wg4+j/Q==} + /pathe@1.1.2: + resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==} dev: true /peek-stream@1.1.3: @@ -9889,7 +10004,12 @@ packages: resolution: {integrity: sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==} engines: {node: '>=10'} dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 + + /possible-typed-array-names@1.0.0: + resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} + engines: {node: '>= 0.4'} + dev: true /postcss-load-config@3.1.4(postcss@8.4.38): resolution: {integrity: sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==} @@ -9908,7 +10028,7 @@ packages: yaml: 1.10.2 dev: true - /postcss-load-config@4.0.2(postcss@8.4.33): + /postcss-load-config@4.0.2(postcss@8.4.38): resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} engines: {node: '>= 14'} peerDependencies: @@ -9920,9 +10040,9 @@ packages: ts-node: optional: true dependencies: - lilconfig: 3.0.0 - postcss: 8.4.33 - yaml: 2.3.4 + lilconfig: 3.1.1 + postcss: 8.4.38 + yaml: 2.4.2 dev: true /postcss-modules-extract-imports@3.1.0(postcss@8.4.38): @@ -9974,16 +10094,7 @@ packages: dependencies: nanoid: 3.3.7 picocolors: 1.0.0 - source-map-js: 1.0.2 - dev: true - - /postcss@8.4.33: - resolution: {integrity: sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==} - engines: {node: ^10 || ^12 || >=14} - dependencies: - nanoid: 3.3.7 - picocolors: 1.0.0 - source-map-js: 1.0.2 + source-map-js: 1.2.0 dev: true /postcss@8.4.38: @@ -10018,7 +10129,7 @@ packages: dependencies: '@jest/schemas': 29.6.3 ansi-styles: 5.2.0 - react-is: 18.2.0 + react-is: 18.3.1 dev: true /pretty-hrtime@1.0.3: @@ -10120,8 +10231,8 @@ packages: - utf-8-validate dev: true - /pure-rand@6.0.4: - resolution: {integrity: sha512-LA0Y9kxMYv47GIPJy6MI84fqTd2HmYZI83W/kM/SkKfDlajnZYfmXFTxkbY+xSBPkLJxltMa9hIkmdc29eguMA==} + /pure-rand@6.1.0: + resolution: {integrity: sha512-bVWawvoZoBYpp6yIoQtQXHZjmz35RSVHnUOTefl8Vcjr8snTPY1wnpSPMWekcFwbxI6gtmT7rSYPFvz71ldiOA==} dev: true /q@1.5.1: @@ -10133,14 +10244,14 @@ packages: resolution: {integrity: sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==} engines: {node: '>=0.6'} dependencies: - side-channel: 1.0.4 + side-channel: 1.0.6 dev: true - /qs@6.11.2: - resolution: {integrity: sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==} + /qs@6.12.1: + resolution: {integrity: sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ==} engines: {node: '>=0.6'} dependencies: - side-channel: 1.0.4 + side-channel: 1.0.6 dev: true /queue-microtask@1.2.3: @@ -10167,8 +10278,8 @@ packages: engines: {node: '>= 0.6'} dev: true - /raw-body@2.5.1: - resolution: {integrity: sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==} + /raw-body@2.5.2: + resolution: {integrity: sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==} engines: {node: '>= 0.8'} dependencies: bytes: 3.1.2 @@ -10177,14 +10288,14 @@ packages: unpipe: 1.0.0 dev: true - /react-colorful@5.6.1(react-dom@18.2.0)(react@18.2.0): + /react-colorful@5.6.1(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==} peerDependencies: react: '>=16.8.0' react-dom: '>=16.8.0' dependencies: - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true /react-docgen-typescript@2.2.2(typescript@4.9.5): @@ -10195,13 +10306,13 @@ packages: typescript: 4.9.5 dev: true - /react-docgen@7.0.1: - resolution: {integrity: sha512-rCz0HBIT0LWbIM+///LfRrJoTKftIzzwsYDf0ns5KwaEjejMHQRtphcns+IXFHDNY9pnz6G8l/JbbI6pD4EAIA==} + /react-docgen@7.0.3: + resolution: {integrity: sha512-i8aF1nyKInZnANZ4uZrH49qn1paRgBZ7wZiCNBMnenlPzEv0mRl+ShpTVEI6wZNl8sSc79xZkivtgLKQArcanQ==} engines: {node: '>=16.14.0'} dependencies: - '@babel/core': 7.23.7 - '@babel/traverse': 7.23.7 - '@babel/types': 7.23.6 + '@babel/core': 7.24.4 + '@babel/traverse': 7.24.1 + '@babel/types': 7.24.0 '@types/babel__core': 7.20.5 '@types/babel__traverse': 7.20.5 '@types/doctrine': 0.0.9 @@ -10213,16 +10324,16 @@ packages: - supports-color dev: true - /react-dom@18.2.0(react@18.2.0): - resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} + /react-dom@18.3.1(react@18.3.1): + resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==} peerDependencies: - react: ^18.2.0 + react: ^18.3.1 dependencies: loose-envify: 1.4.0 - react: 18.2.0 - scheduler: 0.23.0 + react: 18.3.1 + scheduler: 0.23.2 - /react-element-to-jsx-string@15.0.0(react-dom@18.2.0)(react@18.2.0): + /react-element-to-jsx-string@15.0.0(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-UDg4lXB6BzlobN60P8fHWVPX3Kyw8ORrTeBtClmIlGdkOOE+GYQSFvmEU5iLLpwp/6v42DINwNcwOhOLfQ//FQ==} peerDependencies: react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0 @@ -10230,56 +10341,56 @@ packages: dependencies: '@base2/pretty-print-object': 1.0.1 is-plain-object: 5.0.0 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) react-is: 18.1.0 dev: true - /react-hook-form@7.49.2(react@18.2.0): - resolution: {integrity: sha512-TZcnSc17+LPPVpMRIDNVITY6w20deMdNi6iehTFLV1x8SqThXGwu93HjlUVU09pzFgZH7qZOvLMM7UYf2ShAHA==} - engines: {node: '>=18', pnpm: '8'} + /react-hook-form@7.51.3(react@18.3.1): + resolution: {integrity: sha512-cvJ/wbHdhYx8aviSWh28w9ImjmVsb5Y05n1+FW786vEZQJV5STNM0pW6ujS+oiBecb0ARBxJFyAnXj9+GHXACQ==} + engines: {node: '>=12.22.0'} peerDependencies: react: ^16.8.0 || ^17 || ^18 dependencies: - react: 18.2.0 + react: 18.3.1 dev: false - /react-infinite-scroll-component@6.1.0(react@18.2.0): + /react-infinite-scroll-component@6.1.0(react@18.3.1): resolution: {integrity: sha512-SQu5nCqy8DxQWpnUVLx7V7b7LcA37aM7tvoWjTLZp1dk6EJibM5/4EJKzOnl07/BsM1Y40sKLuqjCwwH/xV0TQ==} peerDependencies: react: '>=16.0.0' dependencies: - react: 18.2.0 + react: 18.3.1 throttle-debounce: 2.3.0 dev: false - /react-insta-stories@2.6.2(react@18.2.0): + /react-insta-stories@2.6.2(react@18.3.1): resolution: {integrity: sha512-eM1YHr92bV7WK5h9sECjyYnqZtPxnzJrZFr9IaoDcaZaAEOHVRav+pST513DIG8Hk8QjSTHtdvHHZ0Ka5HwH8w==} peerDependencies: react: '>=16.8.2' dependencies: - react: 18.2.0 + react: 18.3.1 dev: false - /react-intl@6.5.5(react@18.2.0)(typescript@4.9.5): - resolution: {integrity: sha512-cI5UKvBh4tc1zxLIziHBYGMX3dhYWDEFlvUDVN6NfT2i96zTXz/zH2AmM8+2waqgOhwkFUzd+7kK1G9q7fiC2g==} + /react-intl@6.6.5(react@18.3.1)(typescript@4.9.5): + resolution: {integrity: sha512-OErDPbGqus0QKVj77MGCC9Plbnys3CDQrq6Lw41c60pmeTdn41AhoS1SIzXG6SUlyF7qNN2AVqfrrIvHUgSyLQ==} peerDependencies: react: ^16.6.0 || 17 || 18 - typescript: '5' + typescript: ^4.7 || 5 peerDependenciesMeta: typescript: optional: true dependencies: - '@formatjs/ecma402-abstract': 1.18.0 - '@formatjs/icu-messageformat-parser': 2.7.3 - '@formatjs/intl': 2.9.9(typescript@4.9.5) - '@formatjs/intl-displaynames': 6.6.4 - '@formatjs/intl-listformat': 7.5.3 + '@formatjs/ecma402-abstract': 1.18.2 + '@formatjs/icu-messageformat-parser': 2.7.6 + '@formatjs/intl': 2.10.1(typescript@4.9.5) + '@formatjs/intl-displaynames': 6.6.6 + '@formatjs/intl-listformat': 7.5.5 '@types/hoist-non-react-statics': 3.3.5 - '@types/react': 17.0.74 + '@types/react': 17.0.80 hoist-non-react-statics: 3.3.2 - intl-messageformat: 10.5.8 - react: 18.2.0 + intl-messageformat: 10.5.11 + react: 18.3.1 tslib: 2.6.2 typescript: 4.9.5 dev: false @@ -10291,19 +10402,19 @@ packages: resolution: {integrity: sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==} dev: true - /react-is@18.2.0: - resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==} + /react-is@18.3.1: + resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==} dev: true - /react-loading-skeleton@3.3.1(react@18.2.0): - resolution: {integrity: sha512-NilqqwMh2v9omN7LteiDloEVpFyMIa0VGqF+ukqp0ncVlYu1sKYbYGX9JEl+GtOT9TKsh04zCHAbavnQ2USldA==} + /react-loading-skeleton@3.4.0(react@18.3.1): + resolution: {integrity: sha512-1oJEBc9+wn7BbkQQk7YodlYEIjgeR+GrRjD+QXkVjwZN7LGIcAFHrx4NhT7UHGBxNY1+zax3c+Fo6XQM4R7CgA==} peerDependencies: react: '>=16.8.0' dependencies: - react: 18.2.0 + react: 18.3.1 dev: false - /react-mentions@4.4.10(react-dom@18.2.0)(react@18.2.0): + /react-mentions@4.4.10(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-JHiQlgF1oSZR7VYPjq32wy97z1w1oE4x10EuhKjPr4WUKhVzG1uFQhQjKqjQkbVqJrmahf+ldgBTv36NrkpKpA==} peerDependencies: react: '>=16.8.3' @@ -10312,35 +10423,35 @@ packages: '@babel/runtime': 7.4.5 invariant: 2.2.4 prop-types: 15.8.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - substyle: 9.4.1(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + substyle: 9.4.1(react@18.3.1) dev: false - /react-modal-sheet@2.2.0(framer-motion@10.18.0)(react@18.2.0): + /react-modal-sheet@2.2.0(framer-motion@11.1.7)(react@18.3.1): resolution: {integrity: sha512-OAIWuVWxMx3zQqrMLbYWnczadplg0WLd+AaBWmN5+ysNF5/pneqjkOV3AWaIZOCIF4TcrejiCsTduutbzCRP2Q==} engines: {node: '>=16'} peerDependencies: framer-motion: '>=6' react: '>=16' dependencies: - '@react-aria/utils': 3.17.0(react@18.2.0) - framer-motion: 10.18.0(react-dom@18.2.0)(react@18.2.0) - react: 18.2.0 + '@react-aria/utils': 3.17.0(react@18.3.1) + framer-motion: 11.1.7(react-dom@18.3.1)(react@18.3.1) + react: 18.3.1 dev: false - /react-native-uuid@2.0.1: - resolution: {integrity: sha512-cptnoIbL53GTCrWlb/+jrDC6tvb7ypIyzbXNJcpR3Vab0mkeaaVd5qnB3f0whXYzS+SMoSQLcUUB0gEWqkPC0g==} + /react-native-uuid@2.0.2: + resolution: {integrity: sha512-5ypj/hV58P+6VREdjkW0EudSibsH3WdqDERoHKnD9syFWjF+NfRWWrJb2sa3LIwI5zpzMvUiabs+DX40WHpEMw==} engines: {node: '>=10.0.0', npm: '>=6.0.0'} dev: true - /react-refresh@0.14.0: - resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} + /react-refresh@0.14.2: + resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==} engines: {node: '>=0.10.0'} dev: true - /react-remove-scroll-bar@2.3.4(@types/react@17.0.74)(react@18.2.0): - resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==} + /react-remove-scroll-bar@2.3.6(@types/react@17.0.80)(react@18.3.1): + resolution: {integrity: sha512-DtSYaao4mBmX+HDo5YWYdBWQwYIQQshUV/dVxFxK+KM26Wjwp1gZ6rv6OC3oujI6Bfu6Xyg3TwK533AQutsn/g==} engines: {node: '>=10'} peerDependencies: '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -10349,13 +10460,13 @@ packages: '@types/react': optional: true dependencies: - '@types/react': 17.0.74 - react: 18.2.0 - react-style-singleton: 2.2.1(@types/react@17.0.74)(react@18.2.0) + '@types/react': 17.0.80 + react: 18.3.1 + react-style-singleton: 2.2.1(@types/react@17.0.80)(react@18.3.1) tslib: 2.6.2 dev: true - /react-remove-scroll@2.5.5(@types/react@17.0.74)(react@18.2.0): + /react-remove-scroll@2.5.5(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==} engines: {node: '>=10'} peerDependencies: @@ -10365,36 +10476,36 @@ packages: '@types/react': optional: true dependencies: - '@types/react': 17.0.74 - react: 18.2.0 - react-remove-scroll-bar: 2.3.4(@types/react@17.0.74)(react@18.2.0) - react-style-singleton: 2.2.1(@types/react@17.0.74)(react@18.2.0) + '@types/react': 17.0.80 + react: 18.3.1 + react-remove-scroll-bar: 2.3.6(@types/react@17.0.80)(react@18.3.1) + react-style-singleton: 2.2.1(@types/react@17.0.80)(react@18.3.1) tslib: 2.6.2 - use-callback-ref: 1.3.1(@types/react@17.0.74)(react@18.2.0) - use-sidecar: 1.1.2(@types/react@17.0.74)(react@18.2.0) + use-callback-ref: 1.3.2(@types/react@17.0.80)(react@18.3.1) + use-sidecar: 1.1.2(@types/react@17.0.80)(react@18.3.1) dev: true - /react-router-dom@6.21.1(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-QCNrtjtDPwHDO+AO21MJd7yIcr41UetYt5jzaB9Y1UYaPTCnVuJq6S748g1dE11OQlCFIQg+RtAA1SEZIyiBeA==} + /react-router-dom@6.23.0(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' react-dom: '>=16.8' dependencies: - '@remix-run/router': 1.14.1 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-router: 6.21.1(react@18.2.0) + '@remix-run/router': 1.16.0 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-router: 6.23.0(react@18.3.1) dev: true - /react-router@6.21.1(react@18.2.0): - resolution: {integrity: sha512-W0l13YlMTm1YrpVIOpjCADJqEUpz1vm+CMo47RuFX4Ftegwm6KOYsL5G3eiE52jnJpKvzm6uB/vTKTPKM8dmkA==} + /react-router@6.23.0(react@18.3.1): + resolution: {integrity: sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==} engines: {node: '>=14.0.0'} peerDependencies: react: '>=16.8' dependencies: - '@remix-run/router': 1.14.1 - react: 18.2.0 + '@remix-run/router': 1.16.0 + react: 18.3.1 dev: true /react-sizeme@3.0.2: @@ -10406,7 +10517,7 @@ packages: throttle-debounce: 3.0.1 dev: false - /react-style-singleton@2.2.1(@types/react@17.0.74)(react@18.2.0): + /react-style-singleton@2.2.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==} engines: {node: '>=10'} peerDependencies: @@ -10416,46 +10527,46 @@ packages: '@types/react': optional: true dependencies: - '@types/react': 17.0.74 + '@types/react': 17.0.80 get-nonce: 1.0.1 invariant: 2.2.4 - react: 18.2.0 + react: 18.3.1 tslib: 2.6.2 dev: true - /react-textarea-autosize@8.5.3(@types/react@17.0.74)(react@18.2.0): + /react-textarea-autosize@8.5.3(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==} engines: {node: '>=10'} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - '@babel/runtime': 7.23.7 - react: 18.2.0 - use-composed-ref: 1.3.0(react@18.2.0) - use-latest: 1.2.1(@types/react@17.0.74)(react@18.2.0) + '@babel/runtime': 7.24.4 + react: 18.3.1 + use-composed-ref: 1.3.0(react@18.3.1) + use-latest: 1.2.1(@types/react@17.0.80)(react@18.3.1) transitivePeerDependencies: - '@types/react' dev: false - /react-timeago@7.2.0(react@18.2.0): + /react-timeago@7.2.0(react@18.3.1): resolution: {integrity: sha512-2KsBEEs+qRhKx/kekUVNSTIpop3Jwd7SRBm0R4Eiq3mPeswRGSsftY9FpKsE/lXLdURyQFiHeHFrIUxLYskG5g==} peerDependencies: react: ^16.0.0 || ^17.0.0 || ^18.0.0 dependencies: - react: 18.2.0 + react: 18.3.1 dev: false - /react-tiny-popover@7.2.4(react-dom@18.2.0)(react@18.2.0): + /react-tiny-popover@7.2.4(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-T7ZSwXcUtPXCog3Bux9+TjoTvUeMi/+zI0Yv/TkIznZCWUg0XTt2797G0IiT5mTVeJeLivUzdOmKA1hOQdMfOQ==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: false - /react-truncate-markup@5.1.2(react@18.2.0): + /react-truncate-markup@5.1.2(react@18.3.1): resolution: {integrity: sha512-eEq6T8Rs+wz98cRYzQECGFNBfXwRYraLg/kz52f6DRBKmzxqB+GYLeDkVe/zrC+2vh5AEwM6nSYFvDWEBljd0w==} peerDependencies: react: '>=16.3' @@ -10463,22 +10574,22 @@ packages: line-height: 0.3.1 memoize-one: 5.2.1 prop-types: 15.8.1 - react: 18.2.0 + react: 18.3.1 resize-observer-polyfill: 1.5.1 dev: false - /react-universal-interface@0.6.2(react@18.2.0)(tslib@2.6.2): + /react-universal-interface@0.6.2(react@18.3.1)(tslib@2.6.2): resolution: {integrity: sha512-dg8yXdcQmvgR13RIlZbTRQOoUrDciFVoSBZILwjE2LFISxZZ8loVJKAkuzswl5js8BHda79bIb2b84ehU8IjXw==} peerDependencies: react: '*' tslib: '*' dependencies: - react: 18.2.0 + react: 18.3.1 tslib: 2.6.2 dev: false - /react-use@17.4.2(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-1jPtmWLD8OJJNYCdYLJEH/HM+bPDfJuyGwCYeJFgPmWY8ttwpgZnW5QnzgM55CYUByUiTjHxsGOnEpLl6yQaoQ==} + /react-use@17.5.0(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-PbfwSPMwp/hoL847rLnm/qkjg3sTRCvn6YhUZiHaUa3FA6/aNoFX79ul5Xt70O1rK+9GxSVqkY0eTwMdsR/bWg==} peerDependencies: react: '*' react-dom: '*' @@ -10489,10 +10600,10 @@ packages: fast-deep-equal: 3.1.3 fast-shallow-equal: 1.0.0 js-cookie: 2.2.1 - nano-css: 5.6.1(react-dom@18.2.0)(react@18.2.0) - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) - react-universal-interface: 0.6.2(react@18.2.0)(tslib@2.6.2) + nano-css: 5.6.1(react-dom@18.3.1)(react@18.3.1) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-universal-interface: 0.6.2(react@18.3.1)(tslib@2.6.2) resize-observer-polyfill: 1.5.1 screenfull: 5.2.0 set-harmonic-interval: 1.0.1 @@ -10501,8 +10612,8 @@ packages: tslib: 2.6.2 dev: false - /react@18.2.0: - resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} + /react@18.3.1: + resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} dependencies: loose-envify: 1.4.0 @@ -10571,14 +10682,14 @@ packages: picomatch: 2.3.1 dev: true - /recast@0.23.4: - resolution: {integrity: sha512-qtEDqIZGVcSZCHniWwZWbRy79Dc6Wp3kT/UmDA2RJKBPg7+7k51aQBZirHmUGn5uvHf2rg8DkjizrN26k61ATw==} + /recast@0.23.6: + resolution: {integrity: sha512-9FHoNjX1yjuesMwuthAmPKabxYQdOgihFYmT5ebXfYGBcnqXZf3WOVz+5foEZ8Y83P4ZY6yQD5GMmtV+pgCCAQ==} engines: {node: '>= 4'} dependencies: - assert: 2.1.0 ast-types: 0.16.1 esprima: 4.0.1 source-map: 0.6.1 + tiny-invariant: 1.3.3 tslib: 2.6.2 dev: true @@ -10611,16 +10722,17 @@ packages: /regenerator-transform@0.15.2: resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==} dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 dev: true - /regexp.prototype.flags@1.5.1: - resolution: {integrity: sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==} + /regexp.prototype.flags@1.5.2: + resolution: {integrity: sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - set-function-name: 2.0.1 + es-errors: 1.3.0 + set-function-name: 2.0.2 dev: true /regexpu-core@5.3.2: @@ -10732,8 +10844,8 @@ packages: engines: {iojs: '>=1.0.0', node: '>=0.10.0'} dev: true - /rfdc@1.3.0: - resolution: {integrity: sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==} + /rfdc@1.3.1: + resolution: {integrity: sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==} dev: true /rimraf@2.6.3: @@ -10765,33 +10877,36 @@ packages: fsevents: 2.3.3 dev: true - /rollup@4.9.4: - resolution: {integrity: sha512-2ztU7pY/lrQyXSCnnoU4ICjT/tCG9cdH3/G25ERqE3Lst6vl2BCM5hL2Nw+sslAvAf+ccKsAq1SkKQALyqhR7g==} + /rollup@4.17.1: + resolution: {integrity: sha512-0gG94inrUtg25sB2V/pApwiv1lUb0bQ25FPNuzO89Baa+B+c0ccaaBKM5zkZV/12pUUdH+lWCSm9wmHqyocuVQ==} engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true dependencies: '@types/estree': 1.0.5 optionalDependencies: - '@rollup/rollup-android-arm-eabi': 4.9.4 - '@rollup/rollup-android-arm64': 4.9.4 - '@rollup/rollup-darwin-arm64': 4.9.4 - '@rollup/rollup-darwin-x64': 4.9.4 - '@rollup/rollup-linux-arm-gnueabihf': 4.9.4 - '@rollup/rollup-linux-arm64-gnu': 4.9.4 - '@rollup/rollup-linux-arm64-musl': 4.9.4 - '@rollup/rollup-linux-riscv64-gnu': 4.9.4 - '@rollup/rollup-linux-x64-gnu': 4.9.4 - '@rollup/rollup-linux-x64-musl': 4.9.4 - '@rollup/rollup-win32-arm64-msvc': 4.9.4 - '@rollup/rollup-win32-ia32-msvc': 4.9.4 - '@rollup/rollup-win32-x64-msvc': 4.9.4 + '@rollup/rollup-android-arm-eabi': 4.17.1 + '@rollup/rollup-android-arm64': 4.17.1 + '@rollup/rollup-darwin-arm64': 4.17.1 + '@rollup/rollup-darwin-x64': 4.17.1 + '@rollup/rollup-linux-arm-gnueabihf': 4.17.1 + '@rollup/rollup-linux-arm-musleabihf': 4.17.1 + '@rollup/rollup-linux-arm64-gnu': 4.17.1 + '@rollup/rollup-linux-arm64-musl': 4.17.1 + '@rollup/rollup-linux-powerpc64le-gnu': 4.17.1 + '@rollup/rollup-linux-riscv64-gnu': 4.17.1 + '@rollup/rollup-linux-s390x-gnu': 4.17.1 + '@rollup/rollup-linux-x64-gnu': 4.17.1 + '@rollup/rollup-linux-x64-musl': 4.17.1 + '@rollup/rollup-win32-arm64-msvc': 4.17.1 + '@rollup/rollup-win32-ia32-msvc': 4.17.1 + '@rollup/rollup-win32-x64-msvc': 4.17.1 fsevents: 2.3.3 dev: true /rtl-css-js@1.16.1: resolution: {integrity: sha512-lRQgou1mu19e+Ya0LsTvKrVJ5TYUbqCVPAiImX3UfLTenarvPUl1QFdvu5Z3PYmHT9RCcwIfbjRQBntExyj3Zg==} dependencies: - '@babel/runtime': 7.23.7 + '@babel/runtime': 7.24.4 dev: false /run-parallel@1.2.0: @@ -10800,12 +10915,12 @@ packages: queue-microtask: 1.2.3 dev: true - /safe-array-concat@1.0.1: - resolution: {integrity: sha512-6XbUAseYE2KtOuGueyeobCySj9L4+66Tn6KQMOPQJrAJEowYKW/YR/MGJZl7FdydUdaFu4LYyDZjxf4/Nmo23Q==} + /safe-array-concat@1.1.2: + resolution: {integrity: sha512-vj6RsCsWBCf19jIeHEfkRMw8DPiBb+DMXklQ/1SGDHOMlHdPUkZXFQ2YdplS23zESTijAcurb1aSgJA3AgMu1Q==} engines: {node: '>=0.4'} dependencies: - call-bind: 1.0.5 - get-intrinsic: 1.2.2 + call-bind: 1.0.7 + get-intrinsic: 1.2.4 has-symbols: 1.0.3 isarray: 2.0.5 dev: true @@ -10818,11 +10933,12 @@ packages: resolution: {integrity: sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==} dev: true - /safe-regex-test@1.0.0: - resolution: {integrity: sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==} + /safe-regex-test@1.0.3: + resolution: {integrity: sha512-CdASjNJPvRa7roO6Ra/gLYBTzYzzPyyBXxIMdGW3USQLyjWEls2RgW5UBTXaQVp+OrpeCK3bLem8smtmheoRuw==} + engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 - get-intrinsic: 1.2.2 + call-bind: 1.0.7 + es-errors: 1.3.0 is-regex: 1.1.4 dev: true @@ -10830,22 +10946,22 @@ packages: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} dev: true - /sass@1.74.1: - resolution: {integrity: sha512-w0Z9p/rWZWelb88ISOLyvqTWGmtmu2QJICqDBGyNnfG4OUnPX9BBjjYIXUpXCMOOg5MQWNpqzt876la1fsTvUA==} + /sass@1.75.0: + resolution: {integrity: sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==} engines: {node: '>=14.0.0'} hasBin: true dependencies: - chokidar: 3.5.3 + chokidar: 3.6.0 immutable: 4.3.5 - source-map-js: 1.0.2 + source-map-js: 1.2.0 dev: true /sax@1.3.0: resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==} dev: true - /scheduler@0.23.0: - resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} + /scheduler@0.23.2: + resolution: {integrity: sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==} dependencies: loose-envify: 1.4.0 @@ -10873,8 +10989,8 @@ packages: hasBin: true dev: true - /semver@7.5.4: - resolution: {integrity: sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==} + /semver@7.6.0: + resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==} engines: {node: '>=10'} hasBin: true dependencies: @@ -10902,8 +11018,8 @@ packages: - supports-color dev: true - /serialize-javascript@6.0.1: - resolution: {integrity: sha512-owoXEFjWRllis8/M1Q+Cw5k8ZH40e3zhp/ovX+Xr/vi1qj6QesbyXXViFbpNvWvPNAD62SutwEXavefrLJWj7w==} + /serialize-javascript@6.0.2: + resolution: {integrity: sha512-Saa1xPByTTq2gdeFZYLLo+RFE35NHZkAbqZeWNd3BpzppeVisAqpDjcp8dyf6uIvEqJRd46jemmyA4iFIeVk8g==} dependencies: randombytes: 2.1.0 dev: true @@ -10920,23 +11036,26 @@ packages: - supports-color dev: true - /set-function-length@1.1.1: - resolution: {integrity: sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==} + /set-function-length@1.2.2: + resolution: {integrity: sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==} engines: {node: '>= 0.4'} dependencies: - define-data-property: 1.1.1 - get-intrinsic: 1.2.2 + define-data-property: 1.1.4 + es-errors: 1.3.0 + function-bind: 1.1.2 + get-intrinsic: 1.2.4 gopd: 1.0.1 - has-property-descriptors: 1.0.1 + has-property-descriptors: 1.0.2 dev: true - /set-function-name@2.0.1: - resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==} + /set-function-name@2.0.2: + resolution: {integrity: sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==} engines: {node: '>= 0.4'} dependencies: - define-data-property: 1.1.1 + define-data-property: 1.1.4 + es-errors: 1.3.0 functions-have-names: 1.2.3 - has-property-descriptors: 1.0.1 + has-property-descriptors: 1.0.2 dev: true /set-harmonic-interval@1.0.1: @@ -10970,11 +11089,13 @@ packages: engines: {node: '>=8'} dev: true - /side-channel@1.0.4: - resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} + /side-channel@1.0.6: + resolution: {integrity: sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==} + engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 - get-intrinsic: 1.2.2 + call-bind: 1.0.7 + es-errors: 1.3.0 + get-intrinsic: 1.2.4 object-inspect: 1.13.1 dev: true @@ -10987,13 +11108,6 @@ packages: engines: {node: '>=14'} dev: true - /simple-update-notifier@2.0.0: - resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==} - engines: {node: '>=10'} - dependencies: - semver: 7.5.4 - dev: true - /sisteransi@1.0.5: resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==} dev: true @@ -11044,11 +11158,6 @@ packages: - supports-color dev: true - /source-map-js@1.0.2: - resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} - engines: {node: '>=0.10.0'} - dev: true - /source-map-js@1.2.0: resolution: {integrity: sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==} engines: {node: '>=0.10.0'} @@ -11102,22 +11211,22 @@ packages: resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==} dependencies: spdx-expression-parse: 3.0.1 - spdx-license-ids: 3.0.16 + spdx-license-ids: 3.0.17 dev: true - /spdx-exceptions@2.3.0: - resolution: {integrity: sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==} + /spdx-exceptions@2.5.0: + resolution: {integrity: sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==} dev: true /spdx-expression-parse@3.0.1: resolution: {integrity: sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==} dependencies: - spdx-exceptions: 2.3.0 - spdx-license-ids: 3.0.16 + spdx-exceptions: 2.5.0 + spdx-license-ids: 3.0.17 dev: true - /spdx-license-ids@3.0.16: - resolution: {integrity: sha512-eWN+LnM3GR6gPu35WxNgbGl8rmY1AEmoMDvL/QD6zYmPWgywxWqJWNdLGT+ke8dKNWrcYgYjPpG5gbTfghP8rw==} + /spdx-license-ids@3.0.17: + resolution: {integrity: sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==} dev: true /split2@3.2.2: @@ -11184,7 +11293,7 @@ packages: figures: 3.2.0 find-up: 5.0.0 git-semver-tags: 4.1.1 - semver: 7.5.4 + semver: 7.6.0 stringify-package: 1.0.1 yargs: 16.2.0 dev: true @@ -11194,15 +11303,15 @@ packages: engines: {node: '>= 0.8'} dev: true - /store2@2.14.2: - resolution: {integrity: sha512-siT1RiqlfQnGqgT/YzXVUNsom9S0H1OX+dpdGN1xkyYATo4I6sep5NmsRD/40s3IIOvlCq6akxkqG82urIZW1w==} + /store2@2.14.3: + resolution: {integrity: sha512-4QcZ+yx7nzEFiV4BMLnr/pRa5HYzNITX2ri0Zh6sT9EyQHbBHacC6YigllUPU9X3D0f/22QCgfokpKs52YRrUg==} dev: true - /storybook@7.6.7: - resolution: {integrity: sha512-1Cd895dqYIT5MOUOCDlD73OTWoJubLq/sWC7AMzkMrLu76yD4Cu6f+wv1HDrRAheRaCaeT3yhYEhsMB6qHIcaA==} + /storybook@7.6.18: + resolution: {integrity: sha512-AUhWAVISi+qTsfpJlVuo65VfhqWtapkqJDXA/bK+4actBR9DpRXXwow6xJQJH5wrp8TZk0X9Pkqm3fykTQ5MCA==} hasBin: true dependencies: - '@storybook/cli': 7.6.7 + '@storybook/cli': 7.6.18 transitivePeerDependencies: - bufferutil - encoding @@ -11210,8 +11319,8 @@ packages: - utf-8-validate dev: true - /stream-shift@1.0.1: - resolution: {integrity: sha512-AiisoFqQ0vbGcZgQPY1cdP2I76glaVA/RauYR4G4thNFgkTqr90yXTo4LYX60Jl+sIlPNHHdGSwo01AvbKUSVQ==} + /stream-shift@1.0.3: + resolution: {integrity: sha512-76ORR0DO1o1hlKwTbi/DM3EXWGf3ZJYO8cXX5RJwnul2DEg2oyoZyjLNoQM8WsvZiFKCRfC1O0J7iCvie3RZmQ==} dev: true /string-argv@0.3.2: @@ -11244,29 +11353,31 @@ packages: strip-ansi: 7.1.0 dev: true - /string.prototype.trim@1.2.8: - resolution: {integrity: sha512-lfjY4HcixfQXOfaqCvcBuOIapyaroTXhbkfJN3gcB1OtyupngWK4sEET9Knd0cXd28kTUqu/kHoV4HKSJdnjiQ==} + /string.prototype.trim@1.2.9: + resolution: {integrity: sha512-klHuCNxiMZ8MlsOihJhJEBJAiMVqU3Z2nEXWfWnIqjN0gEFS9J9+IxKozWWtQGcgoa1WUZzLjKPTr4ZHNFTFxw==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-abstract: 1.23.3 + es-object-atoms: 1.0.0 dev: true - /string.prototype.trimend@1.0.7: - resolution: {integrity: sha512-Ni79DqeB72ZFq1uH/L6zJ+DKZTkOtPIHovb3YZHQViE+HDouuU4mBrLOLDn5Dde3RF8qw5qVETEjhu9locMLvA==} + /string.prototype.trimend@1.0.8: + resolution: {integrity: sha512-p73uL5VCHCO2BZZ6krwwQE3kCzM7NKmis8S//xEC6fQonchbum4eP6kR4DLEjQFO3Wnj3Fuo8NM0kOSjVdHjZQ==} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-object-atoms: 1.0.0 dev: true - /string.prototype.trimstart@1.0.7: - resolution: {integrity: sha512-NGhtDFu3jCEm7B4Fy0DpLewdJQOZcQ0rGbwQ/+stjnrp2i+rlKeCvos9hOIeCmqwratM47OBxY7uFZzjxHXmrg==} + /string.prototype.trimstart@1.0.8: + resolution: {integrity: sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==} + engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 define-properties: 1.2.1 - es-abstract: 1.22.3 + es-object-atoms: 1.0.0 dev: true /string_decoder@1.1.1: @@ -11338,8 +11449,8 @@ packages: engines: {node: '>=8'} dev: true - /styled-components@6.1.6(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-DgTLULSC29xpabJ24bbn1+hulU6vvGFQf4RPwBOJrm8WJFnN42yXpo5voBt3jDSJBa5tBd1L6PqswJjQ0wRKdg==} + /styled-components@6.1.8(react-dom@18.3.1)(react@18.3.1): + resolution: {integrity: sha512-PQ6Dn+QxlWyEGCKDS71NGsXoVLKfE1c3vApkvDYS5KAK+V8fNWGhbSUEo9Gg2iaID2tjLXegEW3bZDUGpofRWw==} engines: {node: '>= 16'} peerDependencies: react: '>= 16.8.0' @@ -11351,8 +11462,8 @@ packages: css-to-react-native: 3.2.0 csstype: 3.1.2 postcss: 8.4.31 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) shallowequal: 1.1.0 stylis: 4.3.1 tslib: 2.5.0 @@ -11360,6 +11471,11 @@ packages: /stylis@4.3.1: resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==} + dev: true + + /stylis@4.3.2: + resolution: {integrity: sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==} + dev: false /stylus@0.62.0: resolution: {integrity: sha512-v3YCf31atbwJQIMtPNX8hcQ+okD4NQaTuKGUWfII8eaqn+3otrbttGL1zSMZAAtiPsBztQnujVBugg/cXFUpyg==} @@ -11374,14 +11490,14 @@ packages: - supports-color dev: true - /substyle@9.4.1(react@18.2.0): + /substyle@9.4.1(react@18.3.1): resolution: {integrity: sha512-VOngeq/W1/UkxiGzeqVvDbGDPM8XgUyJVWjrqeh+GgKqspEPiLYndK+XRcsKUHM5Muz/++1ctJ1QCF/OqRiKWA==} peerDependencies: react: '>=16.8.3' dependencies: '@babel/runtime': 7.4.5 invariant: 2.2.4 - react: 18.2.0 + react: 18.3.1 dev: false /sucrase@3.35.0: @@ -11389,9 +11505,9 @@ packages: engines: {node: '>=16 || 14 >=14.17'} hasBin: true dependencies: - '@jridgewell/gen-mapping': 0.3.3 + '@jridgewell/gen-mapping': 0.3.5 commander: 4.1.1 - glob: 10.3.10 + glob: 10.3.12 lines-and-columns: 1.2.4 mz: 2.7.0 pirates: 4.0.6 @@ -11424,15 +11540,15 @@ packages: engines: {node: '>= 0.4'} dev: true - /svg-url-loader@7.1.1(webpack@5.89.0): + /svg-url-loader@7.1.1(webpack@5.91.0): resolution: {integrity: sha512-NlsMCePODm7FQhU9aEZyGLPx5Xe1QRI1cSEUE6vTq5LJc9l9pStagvXoEIyZ9O3r00w6G3+Wbkimb+SC3DI/Aw==} engines: {node: '>=10'} peerDependencies: webpack: ^4.0.0 || ^5.0.0 dependencies: - file-loader: 6.2.0(webpack@5.89.0) + file-loader: 6.2.0(webpack@5.91.0) loader-utils: 2.0.4 - webpack: 5.89.0(esbuild@0.19.11) + webpack: 5.91.0(esbuild@0.19.12) dev: true /synchronous-promise@2.0.17: @@ -11464,8 +11580,8 @@ packages: readable-stream: 3.6.2 dev: true - /tar@6.2.0: - resolution: {integrity: sha512-/Wo7DcT0u5HUV486xg675HtjNd3BXZ6xDbzsCUZPt5iw8bTQ63bP0Raut3mvro9u+CUyq7YQd8Cx55fsZXxqLQ==} + /tar@6.2.1: + resolution: {integrity: sha512-DZ4yORTwrbTj/7MZYq2w+/ZFdI6OZ/f9SFHR+71gIVUZhOQPHzVCLpvRnPgyaMpfWxxk/4ONva3GQSyNIKRv6A==} engines: {node: '>=10'} dependencies: chownr: 2.0.0 @@ -11505,7 +11621,7 @@ packages: unique-string: 2.0.0 dev: true - /terser-webpack-plugin@5.3.10(esbuild@0.19.11)(webpack@5.89.0): + /terser-webpack-plugin@5.3.10(esbuild@0.19.12)(webpack@5.91.0): resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -11521,21 +11637,21 @@ packages: uglify-js: optional: true dependencies: - '@jridgewell/trace-mapping': 0.3.20 - esbuild: 0.19.11 + '@jridgewell/trace-mapping': 0.3.25 + esbuild: 0.19.12 jest-worker: 27.5.1 schema-utils: 3.3.0 - serialize-javascript: 6.0.1 - terser: 5.26.0 - webpack: 5.89.0(esbuild@0.19.11) + serialize-javascript: 6.0.2 + terser: 5.30.4 + webpack: 5.91.0(esbuild@0.19.12) dev: true - /terser@5.26.0: - resolution: {integrity: sha512-dytTGoE2oHgbNV9nTzgBEPaqAWvcJNl66VZ0BkJqlvp71IjO8CxdBx/ykCNb47cLnCmCvRZ6ZR0tLkqvZCdVBQ==} + /terser@5.30.4: + resolution: {integrity: sha512-xRdd0v64a8mFK9bnsKVdoNP9GQIKUAaJPTaqEQDL4w/J8WaW4sWXXoMZ+6SimPkfT5bElreXf8m9HnmPc3E1BQ==} engines: {node: '>=10'} hasBin: true dependencies: - '@jridgewell/source-map': 0.3.5 + '@jridgewell/source-map': 0.3.6 acorn: 8.11.3 commander: 2.20.3 source-map-support: 0.5.21 @@ -11599,8 +11715,8 @@ packages: resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==} dev: true - /tiny-invariant@1.3.1: - resolution: {integrity: sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==} + /tiny-invariant@1.3.3: + resolution: {integrity: sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==} dev: true /tmpl@1.0.5: @@ -11623,8 +11739,8 @@ packages: is-number: 7.0.0 dev: true - /tocbot@4.25.0: - resolution: {integrity: sha512-kE5wyCQJ40hqUaRVkyQ4z5+4juzYsv/eK+aqD97N62YH0TxFhzJvo22RUQQZdO3YnXAk42ZOfOpjVdy+Z0YokA==} + /tocbot@4.27.13: + resolution: {integrity: sha512-zS8GVVg14x/KBTxbvF6s3BNLltfMNZxTPaBpj+FjuwmnSv+ZK0trNN4uV5Ptw64NLFi2E30gt33+/a1Fkt3cWQ==} dev: true /toggle-selection@1.0.6: @@ -11656,9 +11772,9 @@ packages: engines: {node: '>=8'} dev: true - /ts-api-utils@1.0.3(typescript@4.9.5): - resolution: {integrity: sha512-wNMeqtMz5NtwpT/UZGY5alT+VoKdSsOOP/kqHFcUW1P/VRhH2wJ48+DN2WwUliNbQ976ETwDL0Ifd2VVvgonvg==} - engines: {node: '>=16.13.0'} + /ts-api-utils@1.3.0(typescript@4.9.5): + resolution: {integrity: sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==} + engines: {node: '>=16'} peerDependencies: typescript: '>=4.2.0' dependencies: @@ -11678,9 +11794,9 @@ packages: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} dev: true - /ts-jest@29.1.1(@babel/core@7.23.7)(esbuild@0.19.11)(jest@29.7.0)(typescript@4.9.5): - resolution: {integrity: sha512-D6xjnnbP17cC85nliwGiL+tpoKN0StpgE0TeOjXQTU6MVCfsB4v7aW05CgQ/1OywGb0x/oy9hHFnN+sczTiRaA==} - engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0} + /ts-jest@29.1.2(@babel/core@7.24.4)(esbuild@0.19.12)(jest@29.7.0)(typescript@4.9.5): + resolution: {integrity: sha512-br6GJoH/WUX4pu7FbZXuWGKGNDuU7b8Uj77g/Sp7puZV6EXzuByl6JrECvm0MzVzSTkSHWTihsXt+5XYER5b+g==} + engines: {node: ^16.10.0 || ^18.0.0 || >=20.0.0} hasBin: true peerDependencies: '@babel/core': '>=7.0.0-beta.0 <8' @@ -11699,26 +11815,26 @@ packages: esbuild: optional: true dependencies: - '@babel/core': 7.23.7 + '@babel/core': 7.24.4 bs-logger: 0.2.6 - esbuild: 0.19.11 + esbuild: 0.19.12 fast-json-stable-stringify: 2.1.0 jest: 29.7.0 jest-util: 29.7.0 json5: 2.2.3 lodash.memoize: 4.1.2 make-error: 1.3.6 - semver: 7.5.4 + semver: 7.6.0 typescript: 4.9.5 yargs-parser: 21.1.1 dev: true - /tsconfck@2.1.2(typescript@4.9.5): - resolution: {integrity: sha512-ghqN1b0puy3MhhviwO2kGF8SeMDNhEbnKxjK7h6+fvY9JAxqvXi8y5NAHSQv687OVboS2uZIByzGd45/YxrRHg==} - engines: {node: ^14.13.1 || ^16 || >=18} + /tsconfck@3.0.3(typescript@4.9.5): + resolution: {integrity: sha512-4t0noZX9t6GcPTfBAbIbbIU4pfpCwh0ueq3S4O/5qXI1VwK1outmxhe9dOiEWqMz3MW2LKgDTpqWV+37IWuVbA==} + engines: {node: ^18 || >=20} hasBin: true peerDependencies: - typescript: ^4.3.5 || ^5.0.0 + typescript: ^5.0.0 peerDependenciesMeta: typescript: optional: true @@ -11755,7 +11871,7 @@ packages: /tslib@2.6.2: resolution: {integrity: sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==} - /tsup@7.3.0(postcss@8.4.33)(typescript@4.9.5): + /tsup@7.3.0(postcss@8.4.38)(typescript@4.9.5): resolution: {integrity: sha512-Ja1eaSRrE+QarmATlNO5fse2aOACYMBX+IZRKy1T+gpyH+jXgRrl5l4nHIQJQ1DoDgEjHDTw8cpE085UdBZuWQ==} engines: {node: '>=18'} deprecated: Breaking node 16 @@ -11772,18 +11888,18 @@ packages: typescript: optional: true dependencies: - bundle-require: 4.0.2(esbuild@0.19.11) + bundle-require: 4.0.3(esbuild@0.19.12) cac: 6.7.14 - chokidar: 3.5.3 + chokidar: 3.6.0 debug: 4.3.4 - esbuild: 0.19.11 + esbuild: 0.19.12 execa: 5.1.1 globby: 11.1.0 joycon: 3.1.1 - postcss: 8.4.33 - postcss-load-config: 4.0.2(postcss@8.4.33) + postcss: 8.4.38 + postcss-load-config: 4.0.2(postcss@8.4.38) resolve-from: 5.0.0 - rollup: 4.9.4 + rollup: 4.17.1 source-map: 0.8.0-beta.0 sucrase: 3.35.0 tree-kill: 1.2.2 @@ -11863,42 +11979,48 @@ packages: mime-types: 2.1.35 dev: true - /typed-array-buffer@1.0.0: - resolution: {integrity: sha512-Y8KTSIglk9OZEr8zywiIHG/kmQ7KWyjseXs1CbSo8vC42w7hg2HgYTxSWwP0+is7bWDc1H+Fo026CpHFwm8tkw==} + /typed-array-buffer@1.0.2: + resolution: {integrity: sha512-gEymJYKZtKXzzBzM4jqa9w6Q1Jjm7x2d+sh19AdsD4wqnMPDYyvwpsIc2Q/835kHuo3BEQ7CjelGhfTsoBb2MQ==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 - get-intrinsic: 1.2.2 - is-typed-array: 1.1.12 + call-bind: 1.0.7 + es-errors: 1.3.0 + is-typed-array: 1.1.13 dev: true - /typed-array-byte-length@1.0.0: - resolution: {integrity: sha512-Or/+kvLxNpeQ9DtSydonMxCx+9ZXOswtwJn17SNLvhptaXYDJvkFFP5zbfU/uLmvnBJlI4yrnXRxpdWH/M5tNA==} + /typed-array-byte-length@1.0.1: + resolution: {integrity: sha512-3iMJ9q0ao7WE9tWcaYKIptkNBuOIcZCCT0d4MRvuuH88fEoEH62IuQe0OtraD3ebQEoTRk8XCBoknUNc1Y67pw==} engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 for-each: 0.3.3 - has-proto: 1.0.1 - is-typed-array: 1.1.12 + gopd: 1.0.1 + has-proto: 1.0.3 + is-typed-array: 1.1.13 dev: true - /typed-array-byte-offset@1.0.0: - resolution: {integrity: sha512-RD97prjEt9EL8YgAgpOkf3O4IF9lhJFr9g0htQkm0rchFp/Vx7LW5Q8fSXXub7BXAODyUQohRMyOc3faCPd0hg==} + /typed-array-byte-offset@1.0.2: + resolution: {integrity: sha512-Ous0vodHa56FviZucS2E63zkgtgrACj7omjwd/8lTEMEPFFyjfixMZ1ZXenpgCFBBt4EC1J2XsyVS2gkG0eTFA==} engines: {node: '>= 0.4'} dependencies: - available-typed-arrays: 1.0.5 - call-bind: 1.0.5 + available-typed-arrays: 1.0.7 + call-bind: 1.0.7 for-each: 0.3.3 - has-proto: 1.0.1 - is-typed-array: 1.1.12 + gopd: 1.0.1 + has-proto: 1.0.3 + is-typed-array: 1.1.13 dev: true - /typed-array-length@1.0.4: - resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==} + /typed-array-length@1.0.6: + resolution: {integrity: sha512-/OxDN6OtAk5KBpGb28T+HZc2M+ADtvRxXrKKbUwtsLgdoxgX13hyy7ek6bFRl5+aBs2yZzB0c4CnQfAtVypW/g==} + engines: {node: '>= 0.4'} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 for-each: 0.3.3 - is-typed-array: 1.1.12 + gopd: 1.0.1 + has-proto: 1.0.3 + is-typed-array: 1.1.13 + possible-typed-array-names: 1.0.0 dev: true /typedarray@0.0.6: @@ -11922,8 +12044,8 @@ packages: postcss-modules-local-by-default: 4.0.5(postcss@8.4.38) postcss-modules-scope: 3.2.0(postcss@8.4.38) reserved-words: 0.1.2 - sass: 1.74.1 - source-map-js: 1.0.2 + sass: 1.75.0 + source-map-js: 1.2.0 stylus: 0.62.0 tsconfig-paths: 4.2.0 typescript: 4.9.5 @@ -11937,8 +12059,8 @@ packages: engines: {node: '>=4.2.0'} hasBin: true - /ufo@1.3.2: - resolution: {integrity: sha512-o+ORpgGwaYQXgqGDwd+hkS4PuZ3QnmqMMxRuajK/a38L6fTpcE5GPIfrf+L/KemFzfUpeUQc1rRS1iDBozvnFA==} + /ufo@1.5.3: + resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==} dev: true /uglify-js@3.17.4: @@ -11952,7 +12074,7 @@ packages: /unbox-primitive@1.0.2: resolution: {integrity: sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==} dependencies: - call-bind: 1.0.5 + call-bind: 1.0.7 has-bigints: 1.0.2 has-symbols: 1.0.3 which-boxed-primitive: 1.0.2 @@ -12021,11 +12143,12 @@ packages: engines: {node: '>= 0.8'} dev: true - /unplugin@1.6.0: - resolution: {integrity: sha512-BfJEpWBu3aE/AyHx8VaNE/WgouoQxgH9baAiH82JjX8cqVyi3uJQstqwD5J+SZxIK326SZIhsSZlALXVBCknTQ==} + /unplugin@1.10.1: + resolution: {integrity: sha512-d6Mhq8RJeGA8UfKCu54Um4lFA0eSaRa3XxdAJg8tIdxbu1ubW0hBCZUL7yI2uGyYCRndvbK8FLHzqy2XKfeMsg==} + engines: {node: '>=14.0.0'} dependencies: acorn: 8.11.3 - chokidar: 3.5.3 + chokidar: 3.6.0 webpack-sources: 3.2.3 webpack-virtual-modules: 0.6.1 dev: true @@ -12035,14 +12158,14 @@ packages: engines: {node: '>=8'} dev: true - /update-browserslist-db@1.0.13(browserslist@4.22.2): + /update-browserslist-db@1.0.13(browserslist@4.23.0): resolution: {integrity: sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==} hasBin: true peerDependencies: browserslist: '>= 4.21.0' dependencies: - browserslist: 4.22.2 - escalade: 3.1.1 + browserslist: 4.23.0 + escalade: 3.1.2 picocolors: 1.0.0 dev: true @@ -12052,8 +12175,8 @@ packages: punycode: 2.3.1 dev: true - /use-callback-ref@1.3.1(@types/react@17.0.74)(react@18.2.0): - resolution: {integrity: sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==} + /use-callback-ref@1.3.2(@types/react@17.0.80)(react@18.3.1): + resolution: {integrity: sha512-elOQwe6Q8gqZgDA8mrh44qRTQqpIHDcZ3hXTLjBe1i4ph8XpNJnO+aQf3NaG+lriLopI4HMx9VjQLfPQ6vhnoA==} engines: {node: '>=10'} peerDependencies: '@types/react': ^16.8.0 || ^17.0.0 || ^18.0.0 @@ -12062,20 +12185,20 @@ packages: '@types/react': optional: true dependencies: - '@types/react': 17.0.74 - react: 18.2.0 + '@types/react': 17.0.80 + react: 18.3.1 tslib: 2.6.2 dev: true - /use-composed-ref@1.3.0(react@18.2.0): + /use-composed-ref@1.3.0(react@18.3.1): resolution: {integrity: sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==} peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 dependencies: - react: 18.2.0 + react: 18.3.1 dev: false - /use-isomorphic-layout-effect@1.1.2(@types/react@17.0.74)(react@18.2.0): + /use-isomorphic-layout-effect@1.1.2(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==} peerDependencies: '@types/react': '*' @@ -12084,11 +12207,11 @@ packages: '@types/react': optional: true dependencies: - '@types/react': 17.0.74 - react: 18.2.0 + '@types/react': 17.0.80 + react: 18.3.1 dev: false - /use-latest@1.2.1(@types/react@17.0.74)(react@18.2.0): + /use-latest@1.2.1(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==} peerDependencies: '@types/react': '*' @@ -12097,23 +12220,23 @@ packages: '@types/react': optional: true dependencies: - '@types/react': 17.0.74 - react: 18.2.0 - use-isomorphic-layout-effect: 1.1.2(@types/react@17.0.74)(react@18.2.0) + '@types/react': 17.0.80 + react: 18.3.1 + use-isomorphic-layout-effect: 1.1.2(@types/react@17.0.80)(react@18.3.1) dev: false - /use-resize-observer@9.1.0(react-dom@18.2.0)(react@18.2.0): + /use-resize-observer@9.1.0(react-dom@18.3.1)(react@18.3.1): resolution: {integrity: sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow==} peerDependencies: react: 16.8.0 - 18 react-dom: 16.8.0 - 18 dependencies: '@juggle/resize-observer': 3.4.0 - react: 18.2.0 - react-dom: 18.2.0(react@18.2.0) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) dev: true - /use-sidecar@1.1.2(@types/react@17.0.74)(react@18.2.0): + /use-sidecar@1.1.2(@types/react@17.0.80)(react@18.3.1): resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==} engines: {node: '>=10'} peerDependencies: @@ -12123,9 +12246,9 @@ packages: '@types/react': optional: true dependencies: - '@types/react': 17.0.74 + '@types/react': 17.0.80 detect-node-es: 1.1.0 - react: 18.2.0 + react: 18.3.1 tslib: 2.6.2 dev: true @@ -12139,8 +12262,8 @@ packages: inherits: 2.0.4 is-arguments: 1.1.1 is-generator-function: 1.0.10 - is-typed-array: 1.1.12 - which-typed-array: 1.1.13 + is-typed-array: 1.1.13 + which-typed-array: 1.1.15 dev: true /utils-merge@1.0.1: @@ -12162,7 +12285,7 @@ packages: resolution: {integrity: sha512-/EH/sDgxU2eGxajKdwLCDmQ4FWq+kpi3uCmBGpw1xJtnAxEjlD8j8PEiGWpCIMIs3ciNAgH0d3TTJiUkYzyZjA==} engines: {node: '>=10.12.0'} dependencies: - '@jridgewell/trace-mapping': 0.3.20 + '@jridgewell/trace-mapping': 0.3.25 '@types/istanbul-lib-coverage': 2.0.6 convert-source-map: 2.0.0 dev: true @@ -12179,8 +12302,8 @@ packages: engines: {node: '>= 0.8'} dev: true - /vite-tsconfig-paths@4.2.3(typescript@4.9.5)(vite@4.5.1): - resolution: {integrity: sha512-xVsA2xe6QSlzBujtWF8q2NYexh7PAUYfzJ4C8Axpe/7d2pcERYxuxGgph9F4f0iQO36g5tyGq6eBUYIssdUrVw==} + /vite-tsconfig-paths@4.3.2(typescript@4.9.5)(vite@4.5.3): + resolution: {integrity: sha512-0Vd/a6po6Q+86rPlntHye7F31zA2URZMbH8M3saAZ/xR9QoGN/L21bxEGfXdWmFdNkqPpRdxFT7nmNe12e9/uA==} peerDependencies: vite: '*' peerDependenciesMeta: @@ -12189,15 +12312,15 @@ packages: dependencies: debug: 4.3.4 globrex: 0.1.2 - tsconfck: 2.1.2(typescript@4.9.5) - vite: 4.5.1 + tsconfck: 3.0.3(typescript@4.9.5) + vite: 4.5.3 transitivePeerDependencies: - supports-color - typescript dev: true - /vite@4.5.1: - resolution: {integrity: sha512-AXXFaAJ8yebyqzoNB9fu2pHoo/nWX+xZlaRwoeYUxEqBO+Zj4msE5G+BhGBll9lYEKv9Hfks52PAF2X7qDYXQA==} + /vite@4.5.3: + resolution: {integrity: sha512-kQL23kMeX92v3ph7IauVkXkikdDRsYMGTVl5KY2E9OY4ONLvkHf04MDTbnfo6NKxZiDLWzVpP5oTa8hQD8U3dg==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true peerDependencies: @@ -12225,7 +12348,7 @@ packages: optional: true dependencies: esbuild: 0.18.20 - postcss: 8.4.33 + postcss: 8.4.38 rollup: 3.29.4 optionalDependencies: fsevents: 2.3.3 @@ -12237,8 +12360,8 @@ packages: makeerror: 1.0.12 dev: true - /watchpack@2.4.0: - resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==} + /watchpack@2.4.1: + resolution: {integrity: sha512-8wrBCMtVhqcXP2Sup1ctSkga6uc2Bx0IIvKyT7yTFier5AXHooSI+QyQQAtTb7+E0IUCCKyTFmXqdqgum2XWGg==} engines: {node: '>=10.13.0'} dependencies: glob-to-regexp: 0.4.1 @@ -12268,8 +12391,8 @@ packages: resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==} dev: true - /webpack@5.89.0(esbuild@0.19.11): - resolution: {integrity: sha512-qyfIC10pOr70V+jkmud8tMfajraGCZMBWJtrmuBymQKCrLTRejBI8STDp1MCyZu/QTdZSeacCQYpYNQVOzX5kw==} + /webpack@5.91.0(esbuild@0.19.12): + resolution: {integrity: sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==} engines: {node: '>=10.13.0'} hasBin: true peerDependencies: @@ -12280,15 +12403,15 @@ packages: dependencies: '@types/eslint-scope': 3.7.7 '@types/estree': 1.0.5 - '@webassemblyjs/ast': 1.11.6 - '@webassemblyjs/wasm-edit': 1.11.6 - '@webassemblyjs/wasm-parser': 1.11.6 + '@webassemblyjs/ast': 1.12.1 + '@webassemblyjs/wasm-edit': 1.12.1 + '@webassemblyjs/wasm-parser': 1.12.1 acorn: 8.11.3 acorn-import-assertions: 1.9.0(acorn@8.11.3) - browserslist: 4.22.2 + browserslist: 4.23.0 chrome-trace-event: 1.0.3 - enhanced-resolve: 5.15.0 - es-module-lexer: 1.4.1 + enhanced-resolve: 5.16.0 + es-module-lexer: 1.5.2 eslint-scope: 5.1.1 events: 3.3.0 glob-to-regexp: 0.4.1 @@ -12299,8 +12422,8 @@ packages: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(esbuild@0.19.11)(webpack@5.89.0) - watchpack: 2.4.0 + terser-webpack-plugin: 5.3.10(esbuild@0.19.12)(webpack@5.91.0) + watchpack: 2.4.1 webpack-sources: 3.2.3 transitivePeerDependencies: - '@swc/core' @@ -12333,15 +12456,15 @@ packages: is-symbol: 1.0.4 dev: true - /which-typed-array@1.1.13: - resolution: {integrity: sha512-P5Nra0qjSncduVPEAr7xhoF5guty49ArDTwzJ/yNuPIbZppyRxFQsRCWrocxIY+CnMVG+qfbU2FmDKyvSGClow==} + /which-typed-array@1.1.15: + resolution: {integrity: sha512-oV0jmFtUky6CXfkqehVvBP/LSWJ2sy4vWMioiENyJLePrBO/yKyV9OyJySfAKosh+RYkIl5zJCNZ8/4JncrpdA==} engines: {node: '>= 0.4'} dependencies: - available-typed-arrays: 1.0.5 - call-bind: 1.0.5 + available-typed-arrays: 1.0.7 + call-bind: 1.0.7 for-each: 0.3.3 gopd: 1.0.1 - has-tostringtag: 1.0.0 + has-tostringtag: 1.0.2 dev: true /which@2.0.2: @@ -12352,6 +12475,11 @@ packages: isexe: 2.0.0 dev: true + /word-wrap@1.2.5: + resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==} + engines: {node: '>=0.10.0'} + dev: true + /wordwrap@1.0.0: resolution: {integrity: sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==} dev: true @@ -12434,8 +12562,8 @@ packages: optional: true dev: true - /ws@8.16.0: - resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==} + /ws@8.17.0: + resolution: {integrity: sha512-uJq6108EgZMAl20KagGkzCKfMEjxmKvZHG7Tlq0Z6nOky7YF7aq4mOx6xK8TJ/i1LeK4Qus7INktacctDgY8Ow==} engines: {node: '>=10.0.0'} peerDependencies: bufferutil: ^4.0.1 @@ -12479,9 +12607,10 @@ packages: engines: {node: '>= 14'} dev: true - /yaml@2.3.4: - resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==} + /yaml@2.4.2: + resolution: {integrity: sha512-B3VqDZ+JAg1nZpaEmWtTXUlBneoGx6CPM9b0TENK6aoSu5t73dItudwdgmi6tHlIZZId4dZ9skcAQ2UbcyAeVA==} engines: {node: '>= 14'} + hasBin: true dev: true /yargs-parser@20.2.9: @@ -12498,7 +12627,7 @@ packages: engines: {node: '>=10'} dependencies: cliui: 7.0.4 - escalade: 3.1.1 + escalade: 3.1.2 get-caller-file: 2.0.5 require-directory: 2.1.1 string-width: 4.2.3 @@ -12511,7 +12640,7 @@ packages: engines: {node: '>=12'} dependencies: cliui: 8.0.1 - escalade: 3.1.1 + escalade: 3.1.2 get-caller-file: 2.0.5 require-directory: 2.1.1 string-width: 4.2.3 @@ -12534,6 +12663,6 @@ packages: engines: {node: '>=10'} dev: true - /zod@3.22.4: - resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==} + /zod@3.23.4: + resolution: {integrity: sha512-/AtWOKbBgjzEYYQRNfoGKHObgfAZag6qUJX1VbHo2PRBgS+wfWagEY2mizjfyAPcGesrJOcx/wcl0L9WnVrHFw==} dev: false diff --git a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx index 012c6b0ba..84eef0373 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx +++ b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; -import { AmityLiveChatMessageList } from 'v4/chat/components/AmityLiveChatMessageList'; -import AmityLiveChatMessageComposeBar from 'v4/chat/components/AmityLiveChatMessageComposeBar'; +import { AmityLiveChatMessageList } from '~/v4/chat/components/AmityLiveChatMessageList'; +import AmityLiveChatMessageComposeBar from '~/v4/chat/components/AmityLiveChatMessageComposeBar'; import ReplyMessagePlaceholder from '~/v4/chat/pages/AmityLiveChatPage/ChatContainer/ReplyMessagePlaceholder'; import useConnectionStates from '~/social/hooks/useConnectionStates'; import ChatLoadingState from '~/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatLoadingState'; From 61368cc720ecbb34705cbe54fac7d079e5aff22b Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Tue, 30 Apr 2024 11:08:13 +0700 Subject: [PATCH 61/88] feat: only creator or story permission can see impression (#319) --- .../StoryViewer/Renderers/Image.tsx | 6 +++- .../StoryViewer/Renderers/Video.tsx | 4 +++ .../Renderers/Wrappers/Footer/index.tsx | 31 ++++++++++++------- 3 files changed, 28 insertions(+), 13 deletions(-) diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx index c7af7aa34..a56ec0c8a 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx @@ -27,6 +27,7 @@ import { HyperLink } from '~/v4/social/elements/HyperLink'; import Footer from './Wrappers/Footer'; import Header from './Wrappers/Header'; import { PageTypes } from '~/social/constants'; +import useUser from '~/core/hooks/useUser'; export const renderer: CustomRenderer = ({ story, action, config }) => { const { formatMessage } = useIntl(); @@ -62,6 +63,8 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { imageSize: 'small', }); + const user = useUser(); + const heading =
{community?.displayName}
; const subheading = createdAt && creator?.displayName ? ( @@ -74,7 +77,7 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { ); const isOfficial = community?.isOfficial || false; - + const isCreator = creator?.userId === user?.userId; const haveStoryPermission = checkStoryPermission(client, community?.communityId); const computedStyles = { @@ -247,6 +250,7 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { totalLikes={totalLikes} isLiked={isLiked} onClickComment={openCommentSheet} + showImpression={isCreator || haveStoryPermission} />
); diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx index 0a05a9881..5e9f447f6 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx @@ -26,6 +26,7 @@ import { CommentTray } from '~/v4/social/components'; import { HyperLink } from '~/v4/social/elements/HyperLink'; import Footer from './Wrappers/Footer'; import { PageTypes } from '~/social/constants'; +import useUser from '~/core/hooks/useUser'; export const renderer: CustomRenderer = ({ story, action, config, messageHandler }) => { const { formatMessage } = useIntl(); @@ -37,6 +38,7 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler const [isOpenCommentSheet, setIsOpenCommentSheet] = useState(false); const { width, height, loader, storyStyles } = config; const { client } = useSDK(); + const user = useUser(client.currentUserId); const isLiked = !!(story && story.myReactions && story.myReactions.includes(LIKE_REACTION_KEY)); const totalLikes = story?.reactions[LIKE_REACTION_KEY] || 0; @@ -76,6 +78,7 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler ); const haveStoryPermission = checkStoryPermission(client, community?.communityId); + const isCreator = creator?.userId === user?.userId; const computedStyles = { ...styles.storyContent, @@ -294,6 +297,7 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler totalLikes={totalLikes} isLiked={isLiked} onClickComment={openCommentSheet} + showImpression={isCreator || haveStoryPermission} /> ); diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Footer/index.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Footer/index.tsx index a1e0c254a..8e0cbe87b 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Footer/index.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Wrappers/Footer/index.tsx @@ -12,6 +12,7 @@ import { CommentButton, ImpressionButton, ReactButton } from '~/v4/social/elemen const Footer: React.FC< React.PropsWithChildren<{ storyId: string; + showImpression: boolean; reach: number | null; commentsCount: number; totalLikes: number; @@ -19,9 +20,16 @@ const Footer: React.FC< onClickComment: () => void; syncState?: Amity.SyncState; }> -> = ({ syncState, reach, commentsCount, totalLikes, isLiked, storyId, onClickComment }) => { - const [isActive, setIsActive] = useState(isLiked); - const [likeCount, setLikeCount] = useState(totalLikes); +> = ({ + syncState, + reach, + commentsCount, + totalLikes, + isLiked, + storyId, + onClickComment, + showImpression, +}) => { const { formatMessage } = useIntl(); const handleLike = async () => { @@ -36,11 +44,6 @@ const Footer: React.FC< } }; - useEffect(() => { - setIsActive(isLiked); - setLikeCount(totalLikes); - }, [isLiked, totalLikes]); - if (syncState === 'syncing') { return (
@@ -66,16 +69,20 @@ const Footer: React.FC< return (
-
- - {millify(reach || 0)} +
+ {showImpression && ( +
+ + {millify(reach || 0)} +
+ )}
{millify(commentsCount) || 0} - {millify(likeCount || 0)} + {millify(totalLikes || 0)}
From 3dc78939b118213149012fc7a68e2f0cf56dc3a5 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Tue, 30 Apr 2024 11:20:29 +0700 Subject: [PATCH 62/88] feat: ASC-22084 - StoryPreview component for Console (#317) * feat: story preview component for console * fix: ui * fix: story preview prop * fix: export * fix: story prop * fix: story prop * fix: trigger action * fix: trigger action * fix: trigger action * fix: trigger action * fix: action --- .github/workflows/staging.yaml | 10 +- src/index.ts | 3 + .../StoryPreview/StoryPreview.module.css | 81 +++++++++ .../StoryPreview/StoryPreview.tsx | 160 ++++++++++++++++++ .../internal-components/StoryPreview/index.ts | 1 + .../StoryPreview/ui.stories.tsx | 47 +++++ .../pages/DraftsPage/DraftsPage.module.css | 131 +++++++++++++- 7 files changed, 423 insertions(+), 10 deletions(-) create mode 100644 src/v4/social/internal-components/StoryPreview/StoryPreview.module.css create mode 100644 src/v4/social/internal-components/StoryPreview/StoryPreview.tsx create mode 100644 src/v4/social/internal-components/StoryPreview/index.ts create mode 100644 src/v4/social/internal-components/StoryPreview/ui.stories.tsx diff --git a/.github/workflows/staging.yaml b/.github/workflows/staging.yaml index f719bc5e2..9d91d85c6 100644 --- a/.github/workflows/staging.yaml +++ b/.github/workflows/staging.yaml @@ -34,12 +34,7 @@ jobs: - uses: pnpm/action-setup@v2 with: version: 8 - run_install: false - - - name: Get pnpm store directory - id: pnpm-cache - run: | - echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT + run_install: true - uses: actions/cache@v3 name: Setup pnpm cache @@ -49,9 +44,6 @@ jobs: restore-keys: | ${{ runner.os }}-pnpm-store- - - name: Install dependencies - run: pnpm install - - name: build storybook run: pnpm run storybook:build diff --git a/src/index.ts b/src/index.ts index 0c66ebd1d..5927767c4 100644 --- a/src/index.ts +++ b/src/index.ts @@ -40,6 +40,9 @@ export type { AmityMessageActionType }; export { AmityLiveChatPage } from '~/v4/chat/pages'; +// v4 internal use only (Amity Console) +export { StoryPreview as AmityStoryPreview } from './v4/social/internal-components/StoryPreview'; + // import AmityComment from './components/Comment'; // import AmityCommentComposeBar from './components/CommentComposeBar'; // import AmityCommentLikeButton from './components/CommentLikeButton'; diff --git a/src/v4/social/internal-components/StoryPreview/StoryPreview.module.css b/src/v4/social/internal-components/StoryPreview/StoryPreview.module.css new file mode 100644 index 000000000..8baf236c1 --- /dev/null +++ b/src/v4/social/internal-components/StoryPreview/StoryPreview.module.css @@ -0,0 +1,81 @@ +.storyPreview_title { + color: var(--asc-color-white); +} + +.storyPreview_description { + color: var(--asc-color-white); +} + +.storyPreviewContainer { + width: 100%; + height: 100%; + position: relative; + } + + .headerContainer { + position: absolute; + top: 10px; + left: 10px; + right: 10px; + z-index: 1; + display: flex; + align-items: center; + padding: 0.75rem 0 0.625rem 0; + } + + .progressBar { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 0.125rem; + border-radius: 0.25rem; + background-color: rgba(255, 255, 255, 0.3); + } + + .progressFill { + height: 100%; + background-color: white; + transition: width 0.1s linear; + } + + .userInfo { + width: 100%; + display: flex; + justify-content: flex-start; + align-items: center; + gap: 0.5rem; + } + + .storyPreviewTitle { + color: white; + } + + .nameContainer { + display: flex; + align-items: center; + gap: 0.25rem; + } + + .hyperLinkContainer { + position: absolute; + bottom: 0; + z-index: 1; + display: flex; + justify-content: center; + align-items: center; + padding: 0.75rem 1rem 0.625rem 1rem; + left: 50%; + transform: translateX(-50%); + } + + .mediaContainer { + width: 100%; + height: 100%; + } + + .media { + width: 100%; + height: 100%; + object-fit: cover; + } \ No newline at end of file diff --git a/src/v4/social/internal-components/StoryPreview/StoryPreview.tsx b/src/v4/social/internal-components/StoryPreview/StoryPreview.tsx new file mode 100644 index 000000000..bb077752e --- /dev/null +++ b/src/v4/social/internal-components/StoryPreview/StoryPreview.tsx @@ -0,0 +1,160 @@ +import React, { useEffect, useRef, useState } from 'react'; +import UserAvatar from '~/v4/chat/components/UserAvatar'; +import { backgroundImage as communityBackgroundImage } from '~/icons/Community'; +import Verified from '~/v4/social/icons/verified'; +import { Typography } from '~/v4/core/components'; +import { HyperLink } from '~/v4/social/elements/HyperLink'; +import TruncateMarkup from 'react-truncate-markup'; +import styles from './StoryPreview.module.css'; + +type AmityStoryMediaType = { type: 'image'; url: string } | { type: 'video'; url: string }; + +type StoryPreviewProps = { + mediaType?: AmityStoryMediaType; + file?: File | null; + imageMode: 'fit' | 'fill'; + + hyperLink: { + data: { url: string; customText: string }; + type: Amity.StoryItemType; + }[]; + onPlay?: () => void; + onPause?: () => void; + onComplete?: () => void; + avatar: string; + title: string; + description: string; + duration?: number; + isOfficial?: boolean; +}; + +export const StoryPreview: React.FC = ({ + mediaType, + file, + hyperLink, + onPlay, + onPause, + onComplete, + avatar, + title, + duration = 5000, + isOfficial = true, +}) => { + const [isPlaying, setIsPlaying] = useState(true); + const [progress, setProgress] = useState(0); + const videoRef = useRef(null); + const imageRef = useRef(null); + + let progressInterval: NodeJS.Timeout; + + useEffect(() => { + if (isPlaying) { + progressInterval = setInterval(() => { + setProgress((prevProgress) => { + if (prevProgress >= 100) { + clearInterval(progressInterval); + handleMediaComplete(); + return 100; + } + return prevProgress + 1; + }); + }, duration / 100); + } else { + clearInterval(progressInterval); + } + + return () => { + clearInterval(progressInterval); + }; + }, [isPlaying, duration]); + + const handleMediaPlay = () => { + setIsPlaying(true); + if (onPlay) { + onPlay(); + } + }; + + const handleMediaPause = () => { + setIsPlaying(false); + if (onPause) { + onPause(); + } + }; + + const handleMediaComplete = () => { + if (mediaType?.type === 'video' && videoRef.current) { + videoRef.current.currentTime = 0; + videoRef.current.play(); + } else if (mediaType?.type === 'image') { + setIsPlaying(false); + if (onComplete) { + onComplete(); + } + } + }; + + const handlePlayPauseClick = () => { + if (isPlaying) { + handleMediaPause(); + } else { + handleMediaPlay(); + } + }; + + return ( +
+
+
+
+
+
+ + + + {title} {isOfficial && } + + +
+
+ +
+ {hyperLink[0]?.data?.url && ( + + + {hyperLink[0]?.data?.customText || hyperLink[0].data.url} + + + )} +
+ +
+ {mediaType?.type === 'video' ? ( +
+
+ ); +}; diff --git a/src/v4/social/internal-components/StoryPreview/index.ts b/src/v4/social/internal-components/StoryPreview/index.ts new file mode 100644 index 000000000..f1a01cb5e --- /dev/null +++ b/src/v4/social/internal-components/StoryPreview/index.ts @@ -0,0 +1 @@ +export { StoryPreview } from './StoryPreview'; diff --git a/src/v4/social/internal-components/StoryPreview/ui.stories.tsx b/src/v4/social/internal-components/StoryPreview/ui.stories.tsx new file mode 100644 index 000000000..4d7d7527a --- /dev/null +++ b/src/v4/social/internal-components/StoryPreview/ui.stories.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { StoryPreview } from '.'; + +export default { + title: 'v4/Social/Story Preview', + component: StoryPreview, +} as ComponentMeta; + +const Template: ComponentStory = (args) => ( +
+ +
+); + +export const ImageStory = Template.bind({}); +ImageStory.args = { + mediaType: { type: 'image', url: 'https://picsum.photos/400/600' }, + file: null, + imageMode: 'fit', + hyperLink: [], + avatar: 'https://picsum.photos/120/120', + title: 'John Doe', + description: 'This is an image story', +}; + +export const StoryWithHyperlink = Template.bind({}); +StoryWithHyperlink.args = { + mediaType: { type: 'image', url: 'https://picsum.photos/400/600' }, + file: null, + imageMode: 'fit', + hyperLink: [ + { + data: { url: 'https://example.com', customText: 'Visit Website' }, + type: 'hyperlink' as Amity.StoryItemType, + }, + ], + avatar: 'https://picsum.photos/120/120', + title: 'Sarah Johnson', + description: 'This is a story with a hyperlink', +}; diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.module.css b/src/v4/social/pages/DraftsPage/DraftsPage.module.css index 72f273564..c2783e65d 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.module.css +++ b/src/v4/social/pages/DraftsPage/DraftsPage.module.css @@ -32,7 +32,10 @@ } .mainContainer { + width: 100%; + height: 100%; flex: 1; + position: relative; display: flex; justify-content: center; align-items: center; @@ -65,7 +68,133 @@ padding: 1rem; display: flex; justify-content: center; - bottom: 6rem; + bottom: 2rem; + left: 0; + right: 0; +} + +.playPauseButton { + position: absolute; + top: 10px; + right: 10px; + background: none; + border: none; + cursor: pointer; + color: var(--color-white); + font-size: 1.5rem; +} + +.header { + position: absolute; + display: flex; + align-items: center; + padding: 10px; + background-color: var(--color-white); + top: 0; +} + +.progressBar { + position: absolute; + top: 0; left: 0; right: 0; + height: 4px; + background-color: var(--color-gray); +} + +.progressFill { + height: 100%; + background-color: var(--color-primary); + transition: width 0.1s linear; +} + +.userInfo { + display: flex; + flex-direction: column; + margin-left: 10px; +} + +.name { + font-size: 16px; + font-weight: bold; + color: var(--color-black); +} + +.description { + font-size: 14px; + color: var(--color-gray); +} + +.storyPreview { + position: relative; + width: 100%; + height: 100%; +} + +.mainContainer { + position: relative; + width: 100%; + height: 100%; +} + +.header { + position: absolute; + top: 0; + left: 0; + right: 0; + display: flex; + align-items: center; + padding: 10px; + background-color: rgba(0, 0, 0, 0.5); + color: var(--color-white); +} + +.progressBar { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 4px; + background-color: rgba(255, 255, 255, 0.3); +} + +.progressFill { + height: 100%; + background-color: var(--color-white); + transition: width 0.1s linear; +} + +.userInfo { + display: flex; + flex-direction: column; + margin-left: 10px; +} + +.name { + font-size: 16px; + font-weight: bold; +} + +.description { + font-size: 14px; +} + +.hyperLinkContainer { + position: absolute; + bottom: 20px; + left: 20px; + right: 20px; + text-align: center; +} + +.playPauseButton { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background: none; + border: none; + color: var(--color-white); + font-size: 48px; + cursor: pointer; } From 3919fe7caa776f7df1a381f73e9305d800286425 Mon Sep 17 00:00:00 2001 From: Kiattirat Sujjapongse Date: Thu, 2 May 2024 16:09:21 +0700 Subject: [PATCH 63/88] update readme (#323) --- readme.md | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index d56d9036a..3e4513621 100644 --- a/readme.md +++ b/readme.md @@ -2,6 +2,11 @@ ## Getting started +Before starting to work, please read the following instructions. +https://ekoapp.atlassian.net/wiki/spaces/UP/pages/2443706407/ASC+Web+UIKit+V4+Governance + +If you have any questions, please ask / discuss with the team. + ### Installation 1. `npm install --save @amityco/ui-kit` @@ -9,8 +14,8 @@ ### Documentation -Please refer to our online documentation at https://docs.amity.co or contact a Ui-Kit representative at **developers@amity.co** for support. +Please refer to our online documentation at https://docs.amity.co or contact a Ui-Kit representative at \* \*developers@amity.co** for support. ## Contributing -See [our contributing guide](https://github.com/EkoCommunications/AmityUiKitWeb/blob/develop/CONTRIBUTING.md) \ No newline at end of file +See [our contributing guide](https://github.com/EkoCommunications/AmityUiKitWeb/blob/develop/CONTRIBUTING.md) From baebc187222eccbddf9a8b21371ce052f8bbed54 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Tue, 7 May 2024 15:58:48 +0700 Subject: [PATCH 64/88] feat: ASC-20558 - swipe down gesture to close story (#321) * feat: apply framer motion * feat: add transition * fix: swipe down for video * fix: video story should pause when drag * fix: remove unused libs * fix: wrong spell function name * fix: remove unused * chore: change story component name * fix: v4 avatar component * feat: add ghost prop to button * fix: remove unused * fix: bottom sheet component * fix: use rem * fix: load more wrapper * fix: draft page * fix: load more button * fix: hyperlink * fix: css * fix: icon * fix: css * fix: css * fix: comment * fix: story comment * fix: remove unused * fix: import * fix: button dark theme * fix: custom css * fix: bottom sheet css * fix: css * fix: import * fix: css * fix: css * fix: avatar * fix: remove console.log * fix: avatar * fix: use clsx * fix: whitespace * fix: use icon from v4 * fix: icon * fix: loading indicator --- package.json | 1 + pnpm-lock.yaml | 23 +- .../core/components/Avatar/Avatar.module.css | 100 ++++ src/v4/core/components/Avatar/Avatar.tsx | 67 +++ src/v4/core/components/Avatar/index.ts | 1 + .../BottomSheet/BottomSheet.module.css | 31 ++ .../components/BottomSheet/BottomSheet.tsx | 45 +- src/v4/core/components/BottomSheet/styles.tsx | 40 -- .../core/components/Button/Button.module.css | 12 +- src/v4/core/components/Button/Button.tsx | 2 +- src/v4/core/components/InputText/index.tsx | 1 - .../components/InputText/styles.module.css | 2 +- .../LoadMoreWrapper.module.css | 43 ++ .../LoadMoreWrapper/LoadMoreWrapper.tsx | 62 +++ .../core/components/LoadMoreWrapper/index.ts | 1 + src/v4/core/components/index.ts | 2 + src/v4/core/providers/ThemeProvider.tsx | 8 +- .../CommentTray/CommentTray.module.css | 15 + .../components/CommentTray/CommentTray.tsx | 16 +- .../components/CommentTray/ui.stories.tsx | 2 + .../HyperLinkConfig.module.css | 4 +- .../HyperLinkConfig/HyperLinkConfig.tsx | 209 ++++---- .../ReactionList/ReactionList.module.css | 15 +- .../components/ReactionList/ReactionList.tsx | 8 +- .../components/StoryTab/StoryRing.module.css | 27 +- .../social/components/StoryTab/StoryRing.tsx | 12 +- .../components/StoryTab/StoryTab.module.css | 227 +++++---- .../elements/HyperLink/HyperLink.module.css | 21 + .../social/elements/HyperLink/HyperLink.tsx | 17 +- src/v4/social/elements/HyperLink/styles.tsx | 23 - src/v4/social/elements/index.ts | 1 + src/v4/social/icons/chevron_down.tsx | 20 + src/v4/social/icons/expand.tsx | 21 + src/v4/social/icons/flag.tsx | 21 + src/v4/social/icons/index.ts | 6 + src/v4/social/icons/link.tsx | 21 + src/v4/social/icons/pen.tsx | 21 + src/v4/social/icons/trash.tsx | 21 + .../Badege/Badge.module.css | 10 + .../internal-components/Badege/Badge.tsx | 6 +- .../internal-components/Badege/styles.tsx | 12 - .../Badege/{types.tsx => types.ts} | 0 .../internal-components/Badege/ui.stories.tsx | 29 ++ .../Comment/Comment.module.css | 17 + .../Comment/CommentText.module.css | 25 + .../Comment/CommentText.tsx | 12 +- .../Comment/UIComment.module.css | 148 ++++++ .../internal-components/Comment/UIComment.tsx | 143 +++--- .../internal-components/Comment/index.tsx | 152 ++---- .../internal-components/Comment/styles.tsx | 305 ----------- .../CommentComposeBar.module.css | 62 +++ .../CommentComposeBar/CommentComposeBar.tsx | 35 +- .../CommentComposeBar/{index.tsx => index.ts} | 0 .../CommentComposeBar/styles.tsx | 64 --- .../CommentList/CommentList.module.css | 28 ++ .../CommentList/CommentList.tsx | 70 +-- .../LoadingIndicator.module.css | 20 + .../LoadingIndicator/LoadingIndicator.tsx | 15 + .../LoadingIndicator/index.ts | 1 + .../Playground/Playground.tsx | 5 - .../internal-components/Playground/index.ts | 1 - .../StoryCommentComposeBar.module.css | 44 ++ .../StoryCommentComposeBar.tsx | 34 +- .../StoryCommentComposeBar/styles.tsx | 23 - .../StoryViewer/Renderers/Image.tsx | 137 +++-- .../Renderers/Renderers.module.css | 476 +++++++++--------- .../StoryViewer/Renderers/Video.tsx | 157 +++--- .../StoryViewer/Renderers/styles.tsx | 7 - .../VideoPreview/VideoPreview.tsx | 19 + .../internal-components/VideoPreview/index.ts | 1 + .../social/pages/Application/sdk.stories.tsx | 6 +- .../pages/DraftsPage/DraftsPage.module.css | 32 +- src/v4/social/pages/DraftsPage/DraftsPage.tsx | 17 +- src/v4/social/pages/DraftsPage/styles.tsx | 98 ---- .../pages/StoryPage/GlobalFeedStory.tsx | 2 +- src/v4/styles/global.css | 45 -- 76 files changed, 1786 insertions(+), 1641 deletions(-) create mode 100644 src/v4/core/components/Avatar/Avatar.module.css create mode 100644 src/v4/core/components/Avatar/Avatar.tsx create mode 100644 src/v4/core/components/Avatar/index.ts create mode 100644 src/v4/core/components/BottomSheet/BottomSheet.module.css delete mode 100644 src/v4/core/components/BottomSheet/styles.tsx create mode 100644 src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.module.css create mode 100644 src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.tsx create mode 100644 src/v4/core/components/LoadMoreWrapper/index.ts create mode 100644 src/v4/social/elements/HyperLink/HyperLink.module.css delete mode 100644 src/v4/social/elements/HyperLink/styles.tsx create mode 100644 src/v4/social/icons/chevron_down.tsx create mode 100644 src/v4/social/icons/expand.tsx create mode 100644 src/v4/social/icons/flag.tsx create mode 100644 src/v4/social/icons/link.tsx create mode 100644 src/v4/social/icons/pen.tsx create mode 100644 src/v4/social/icons/trash.tsx create mode 100644 src/v4/social/internal-components/Badege/Badge.module.css delete mode 100644 src/v4/social/internal-components/Badege/styles.tsx rename src/v4/social/internal-components/Badege/{types.tsx => types.ts} (100%) create mode 100644 src/v4/social/internal-components/Badege/ui.stories.tsx create mode 100644 src/v4/social/internal-components/Comment/Comment.module.css create mode 100644 src/v4/social/internal-components/Comment/CommentText.module.css create mode 100644 src/v4/social/internal-components/Comment/UIComment.module.css delete mode 100644 src/v4/social/internal-components/Comment/styles.tsx create mode 100644 src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.module.css rename src/v4/social/internal-components/CommentComposeBar/{index.tsx => index.ts} (100%) delete mode 100644 src/v4/social/internal-components/CommentComposeBar/styles.tsx create mode 100644 src/v4/social/internal-components/CommentList/CommentList.module.css create mode 100644 src/v4/social/internal-components/LoadingIndicator/LoadingIndicator.module.css create mode 100644 src/v4/social/internal-components/LoadingIndicator/LoadingIndicator.tsx create mode 100644 src/v4/social/internal-components/LoadingIndicator/index.ts delete mode 100644 src/v4/social/internal-components/Playground/Playground.tsx delete mode 100644 src/v4/social/internal-components/Playground/index.ts create mode 100644 src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.module.css delete mode 100644 src/v4/social/internal-components/StoryCommentComposeBar/styles.tsx create mode 100644 src/v4/social/internal-components/VideoPreview/VideoPreview.tsx create mode 100644 src/v4/social/internal-components/VideoPreview/index.ts delete mode 100644 src/v4/social/pages/DraftsPage/styles.tsx diff --git a/package.json b/package.json index df1e21b43..e6f7132fa 100644 --- a/package.json +++ b/package.json @@ -101,6 +101,7 @@ "clsx": "^2.1.0", "extract-colors": "^4.0.2", "filesize": "^9.0.11", + "framer-motion": "^11.1.7", "hls.js": "^1.4.14", "linkify-react": "^4.1.3", "linkifyjs": "^4.1.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c8f28b455..295db7885 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ dependencies: filesize: specifier: ^9.0.11 version: 9.0.11 + framer-motion: + specifier: ^11.1.7 + version: 11.1.7(react-dom@18.3.1)(react@18.3.1) hls.js: specifier: ^1.4.14 version: 1.5.8 @@ -237,7 +240,7 @@ devDependencies: version: 7.1.1(webpack@5.91.0) ts-jest: specifier: ^29.1.1 - version: 29.1.2(@babel/core@7.24.4)(esbuild@0.19.12)(jest@29.7.0)(typescript@4.9.5) + version: 29.1.2(@babel/core@7.24.4)(esbuild@0.18.20)(jest@29.7.0)(typescript@4.9.5) tsup: specifier: ^7.3.0 version: 7.3.0(postcss@8.4.38)(typescript@4.9.5) @@ -7199,7 +7202,7 @@ packages: dependencies: loader-utils: 2.0.4 schema-utils: 3.3.0 - webpack: 5.91.0(esbuild@0.19.12) + webpack: 5.91.0(esbuild@0.18.20) dev: true /file-system-cache@2.3.0: @@ -11548,7 +11551,7 @@ packages: dependencies: file-loader: 6.2.0(webpack@5.91.0) loader-utils: 2.0.4 - webpack: 5.91.0(esbuild@0.19.12) + webpack: 5.91.0(esbuild@0.18.20) dev: true /synchronous-promise@2.0.17: @@ -11621,7 +11624,7 @@ packages: unique-string: 2.0.0 dev: true - /terser-webpack-plugin@5.3.10(esbuild@0.19.12)(webpack@5.91.0): + /terser-webpack-plugin@5.3.10(esbuild@0.18.20)(webpack@5.91.0): resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -11638,12 +11641,12 @@ packages: optional: true dependencies: '@jridgewell/trace-mapping': 0.3.25 - esbuild: 0.19.12 + esbuild: 0.18.20 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.30.4 - webpack: 5.91.0(esbuild@0.19.12) + webpack: 5.91.0(esbuild@0.18.20) dev: true /terser@5.30.4: @@ -11794,7 +11797,7 @@ packages: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} dev: true - /ts-jest@29.1.2(@babel/core@7.24.4)(esbuild@0.19.12)(jest@29.7.0)(typescript@4.9.5): + /ts-jest@29.1.2(@babel/core@7.24.4)(esbuild@0.18.20)(jest@29.7.0)(typescript@4.9.5): resolution: {integrity: sha512-br6GJoH/WUX4pu7FbZXuWGKGNDuU7b8Uj77g/Sp7puZV6EXzuByl6JrECvm0MzVzSTkSHWTihsXt+5XYER5b+g==} engines: {node: ^16.10.0 || ^18.0.0 || >=20.0.0} hasBin: true @@ -11817,7 +11820,7 @@ packages: dependencies: '@babel/core': 7.24.4 bs-logger: 0.2.6 - esbuild: 0.19.12 + esbuild: 0.18.20 fast-json-stable-stringify: 2.1.0 jest: 29.7.0 jest-util: 29.7.0 @@ -12391,7 +12394,7 @@ packages: resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==} dev: true - /webpack@5.91.0(esbuild@0.19.12): + /webpack@5.91.0(esbuild@0.18.20): resolution: {integrity: sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==} engines: {node: '>=10.13.0'} hasBin: true @@ -12422,7 +12425,7 @@ packages: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(esbuild@0.19.12)(webpack@5.91.0) + terser-webpack-plugin: 5.3.10(esbuild@0.18.20)(webpack@5.91.0) watchpack: 2.4.1 webpack-sources: 3.2.3 transitivePeerDependencies: diff --git a/src/v4/core/components/Avatar/Avatar.module.css b/src/v4/core/components/Avatar/Avatar.module.css new file mode 100644 index 000000000..1fa3fe8e1 --- /dev/null +++ b/src/v4/core/components/Avatar/Avatar.module.css @@ -0,0 +1,100 @@ +.avatarContainer { + position: relative; + flex-shrink: 0; + overflow: hidden; + border-radius: 50%; + background-color: var(--asc-color-base-shade3); +} + +.avatarContainer.visible .img { + opacity: 1; +} + +.avatarContainer.clickable:hover { + cursor: pointer; +} + +.avatarContainer.small { + width: 2rem; + height: 2rem; +} + +.avatarContainer.medium { + width: 3rem; + height: 3rem; +} + +.avatarContainer.large { + width: 4rem; + height: 4rem; +} + +.skeleton { + width: 100%; + height: 100%; + display: block; + border-radius: 50%; + background-color: var(--asc-color-base-shade4); +} + +.skeleton-small { + width: 2rem; + height: 2rem; +} + +.skeleton-medium { + width: 3rem; + height: 3rem; +} + +.skeleton-large { + width: 4rem; + height: 4rem; +} + +.avatarOverlay { + position: absolute; + z-index: 2; + opacity: 0.5; + background-color: #000000; + width: 100%; + height: 100%; +} + +.avatarOverlay-small { + width: 2rem; + height: 2rem; +} + +.avatarOverlay-medium { + width: 3rem; + height: 3rem; +} + +.avatarOverlay-large { + width: 4rem; + height: 4rem; +} + +.img { + height: 100%; + width: 100%; + object-fit: cover; + opacity: 0; + transition: opacity 0.3s; +} + +.img-small { + height: 2rem; + width: 2rem; +} + +.img-medium { + height: 3rem; + width: 3rem; +} + +.img-large { + height: 4rem; + width: 4rem; +} diff --git a/src/v4/core/components/Avatar/Avatar.tsx b/src/v4/core/components/Avatar/Avatar.tsx new file mode 100644 index 000000000..93b513a3c --- /dev/null +++ b/src/v4/core/components/Avatar/Avatar.tsx @@ -0,0 +1,67 @@ +import React, { useState, useCallback } from 'react'; +import clsx from 'clsx'; +import styles from './Avatar.module.css'; + +export interface AvatarProps { + className?: string; + avatar?: string | null; + showOverlay?: boolean; + onClick?: () => void; + loading?: boolean; + backgroundImage?: string | null; + size?: 'small' | 'medium' | 'large'; +} + +export const Avatar = ({ + className = '', + avatar = null, + showOverlay, + onClick, + loading, + size = 'medium', + ...props +}: AvatarProps) => { + const [visible, setVisible] = useState(false); + const onLoad = useCallback(() => setVisible(true), []); + const onError = useCallback(() => setVisible(false), []); + + return ( +
+ {loading ? ( +
+ ) : avatar ? ( + showOverlay ? ( +
+ Avatar +
+ ) : ( + Avatar + ) + ) : null} +
+ ); +}; diff --git a/src/v4/core/components/Avatar/index.ts b/src/v4/core/components/Avatar/index.ts new file mode 100644 index 000000000..d3fb6dfa7 --- /dev/null +++ b/src/v4/core/components/Avatar/index.ts @@ -0,0 +1 @@ +export { Avatar } from './Avatar'; diff --git a/src/v4/core/components/BottomSheet/BottomSheet.module.css b/src/v4/core/components/BottomSheet/BottomSheet.module.css new file mode 100644 index 000000000..50dfbf72a --- /dev/null +++ b/src/v4/core/components/BottomSheet/BottomSheet.module.css @@ -0,0 +1,31 @@ +/* +You can add your own styles or override the default sheet styles via the exposed class names. +Note that you might need to use !important for style overrides since the inner styles are applied as inline styles +which have higher specificity. +*/ + +.react-modal-sheet-container { + border-top-left-radius: var(--asc-spacing-m2) !important; + border-top-right-radius: var(--asc-spacing-m2) !important; + background-color: var(--asc-color-base-background); + color: var(--asc-color-base-default); +} + +.react-modal-sheet-backdrop { + background-color: var(--asc-color-base-inverse, rgba(0, 0, 0, 0.5)); +} + +.react-modal-sheet-header { + background-color: var(--asc-color-base-background); + color: var(--asc-color-base-default); + text-align: center; + border-bottom: 1px solid var(--asc-color-base-shade4); + padding-bottom: 0.5rem; + background: var(--asc-color-base-background); +} + +.react-modal-sheet-content { + background-color: var(--asc-color-base-background); + padding: 1rem; + color: var(--asc-color-base-default); +} diff --git a/src/v4/core/components/BottomSheet/BottomSheet.tsx b/src/v4/core/components/BottomSheet/BottomSheet.tsx index 3c23343f1..0ddd38cc6 100644 --- a/src/v4/core/components/BottomSheet/BottomSheet.tsx +++ b/src/v4/core/components/BottomSheet/BottomSheet.tsx @@ -1,5 +1,8 @@ import React from 'react'; -import { MobileSheet } from './styles'; +import Sheet from 'react-modal-sheet'; +import { Typography } from '~/v4/core/components/Typography'; + +import styles from './BottomSheet.module.css'; interface BottomSheetProps { isOpen: boolean; @@ -8,28 +11,28 @@ interface BottomSheetProps { rootId?: string; mountPoint?: HTMLElement; detent?: 'content-height' | 'full-height'; - 'data-qa-anchor'?: string; + headerTitle?: string; + cancelText?: string; + okText?: string; } -export const BottomSheet = ({ - isOpen = false, - onClose = () => {}, - detent = 'content-height', - rootId, - children, - mountPoint, - ...props -}: BottomSheetProps) => { +export const BottomSheet = ({ children, headerTitle, ...props }: BottomSheetProps) => { return ( - - {children} - + + + + {headerTitle && ( + + {headerTitle} + + )} + {children} + + + ); }; diff --git a/src/v4/core/components/BottomSheet/styles.tsx b/src/v4/core/components/BottomSheet/styles.tsx deleted file mode 100644 index aacb273c5..000000000 --- a/src/v4/core/components/BottomSheet/styles.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import styled from 'styled-components'; -import Sheet from 'react-modal-sheet'; -import { SecondaryButton } from '~/core/components/Button'; - -export const MobileSheet = styled(Sheet)` - margin: 0 auto; - width: 100%; - z-index: 9999; -`; - -export const MobileSheetNestedBackDrop = styled(MobileSheet.Backdrop)` - background-color: rgba(0, 0, 0, 0.5); -`; - -export const MobileSheetContainer = styled(MobileSheet.Container)` - z-index: 101; -`; - -export const MobileSheetHeader = styled(MobileSheet.Header)` - ${({ theme }) => theme.typography.title}; - color: ${({ theme }) => theme.palette.base.default}; - text-align: center; - border-bottom: 1px solid #e3e4e8; - padding-bottom: 0.5rem; - z-index: 100; - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -`; - -export const MobileSheetContent = styled(MobileSheet.Content)` - z-index: 100; -`; - -export const MobileSheetButton = styled(SecondaryButton)` - display: flex; - justify-content: flex-start; - align-items: center; - gap: 0.5rem; - width: 100%; -`; diff --git a/src/v4/core/components/Button/Button.module.css b/src/v4/core/components/Button/Button.module.css index adb2c9e8b..f0c9688d3 100644 --- a/src/v4/core/components/Button/Button.module.css +++ b/src/v4/core/components/Button/Button.module.css @@ -35,6 +35,16 @@ background-color: var(--asc-color-base-shade4); } +.ghost { + background-color: transparent; + color: var(--asc-color-primary-default); + border: 1px solid var(--asc-color-primary-default); +} + +.ghost:hover:not(.disabled) { + background-color: var(--asc-color-base-shade4); +} + .small { font-size: var(--asc-text-font-size-sm); padding: var(--asc-spacing-xxs2) var(--asc-spacing-s1); @@ -52,4 +62,4 @@ .icon { margin-right: var(--asc-spacing-s1); -} +} \ No newline at end of file diff --git a/src/v4/core/components/Button/Button.tsx b/src/v4/core/components/Button/Button.tsx index 30c161aec..95f24f2b2 100644 --- a/src/v4/core/components/Button/Button.tsx +++ b/src/v4/core/components/Button/Button.tsx @@ -4,7 +4,7 @@ import styles from './Button.module.css'; interface ButtonProps extends React.ButtonHTMLAttributes { children: React.ReactNode; - variant?: 'primary' | 'secondary'; + variant?: 'primary' | 'secondary' | 'ghost'; size?: 'small' | 'medium' | 'large'; icon?: React.ReactNode; } diff --git a/src/v4/core/components/InputText/index.tsx b/src/v4/core/components/InputText/index.tsx index b1786c1d5..0274cf713 100644 --- a/src/v4/core/components/InputText/index.tsx +++ b/src/v4/core/components/InputText/index.tsx @@ -1,5 +1,4 @@ import React, { forwardRef } from 'react'; - import InsideInputText from './InsideInputText'; import { QueryMentioneesFnType } from '~/v4/chat/hooks/useMention'; diff --git a/src/v4/core/components/InputText/styles.module.css b/src/v4/core/components/InputText/styles.module.css index 5814ee3f7..4f93ad650 100644 --- a/src/v4/core/components/InputText/styles.module.css +++ b/src/v4/core/components/InputText/styles.module.css @@ -6,7 +6,7 @@ background: var(--asc-color-base-shade4); border: 1px solid var(--asc-color-base-shade4); - border-radius: var(--asc-border-radius-sm); + border-radius: 1.25rem; transition: background 0.2s, border-color 0.2s; &.invalid { diff --git a/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.module.css b/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.module.css new file mode 100644 index 000000000..cc3eb1311 --- /dev/null +++ b/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.module.css @@ -0,0 +1,43 @@ +.loadMoreButton { + display: inline-flex; + justify-items: center; + background: var(--asc-color-base-background); + color: var(--asc-color-base-shade2); + border: 1px solid var(--asc-color-base-shade4); + padding: 0.3125rem 0.75rem 0.3125rem 0.5rem; + border-radius: 0.25rem; + margin-left: 3rem; +} + +.loadMoreButton.textCenter { + justify-content: center; +} + +.loadMoreButton.noBorder { + border: none; +} + +.loadMoreButton.commentsButton { + justify-content: flex-start; + color: var(--asc-color-base-default); + border: none; + margin-top: 1rem; + padding: 0 0 1rem 0; + border-bottom: 1px solid #e3e4e8; +} + +.loadMoreButton.replyButton { + width: fit-content; + background-color: var(--asc-color-base-shade4); + color: var(--asc-color-base-shade1); + margin: 0.75rem 0 1rem 3rem; + padding: 0.3125rem 0.75rem; + border-radius: 0.5rem; + font-size: var(--asc-text-font-size-xs); + font-weight: var(--asc-text-font-weight-bold); + line-height: var(--asc-line-height-xs); +} + +.chevronDownIcon { + margin-left: 0.3125rem; +} diff --git a/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.tsx b/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.tsx new file mode 100644 index 000000000..fbb7328f3 --- /dev/null +++ b/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.tsx @@ -0,0 +1,62 @@ +import React, { useState, useEffect, ReactNode } from 'react'; +import { useIntl } from 'react-intl'; +import clsx from 'clsx'; +import { Button } from '~/v4/core/components'; +import styles from './LoadMoreWrapper.module.css'; +import { ChevronDownIcon } from '~/v4/social/icons'; + +interface LoadMoreWrapperProps { + hasMore?: boolean; + loadMore?: () => void; + text?: string; + contentSlot: ReactNode; + className?: string; + prependIcon?: ReactNode; + appendIcon?: ReactNode; + isExpanded?: boolean; +} + +export const LoadMoreWrapper = ({ + hasMore, + loadMore, + text = '', + contentSlot, + className = '', + prependIcon = null, + appendIcon = , + isExpanded = true, +}: LoadMoreWrapperProps) => { + const { formatMessage } = useIntl(); + const [expanded, setExpanded] = useState(isExpanded); + + useEffect(() => setExpanded(isExpanded), [isExpanded]); + + if (expanded) { + return ( + <> + {contentSlot} + {hasMore && ( + + )} + + ); + } + + return !expanded ? ( + <> + + + ) : null; +}; diff --git a/src/v4/core/components/LoadMoreWrapper/index.ts b/src/v4/core/components/LoadMoreWrapper/index.ts new file mode 100644 index 000000000..aac7b91d4 --- /dev/null +++ b/src/v4/core/components/LoadMoreWrapper/index.ts @@ -0,0 +1 @@ +export { LoadMoreWrapper } from './LoadMoreWrapper'; diff --git a/src/v4/core/components/index.ts b/src/v4/core/components/index.ts index 8596d8256..cb0434874 100644 --- a/src/v4/core/components/index.ts +++ b/src/v4/core/components/index.ts @@ -1,3 +1,5 @@ export { BottomSheet } from './BottomSheet'; export { Icon } from './Icon'; export { Typography } from './Typography'; +export { Avatar } from './Avatar'; +export { Button } from './Button'; diff --git a/src/v4/core/providers/ThemeProvider.tsx b/src/v4/core/providers/ThemeProvider.tsx index 6e6a7489d..472898a5c 100644 --- a/src/v4/core/providers/ThemeProvider.tsx +++ b/src/v4/core/providers/ThemeProvider.tsx @@ -23,7 +23,7 @@ const generateShades = (hexColor: string, isDarkMode = false): string[] => { return shades; }; -const generatePalleteByConfig = ({ +const generatePaletteByConfig = ({ themeConfig, configId, isDarkMode, @@ -78,7 +78,7 @@ const generateComponentPalette = (config: Config, currentTheme: 'light' | 'dark' const configId = configurable.pageId.replace('_', '-'); if (themeToGenerate) { - generatePalleteByConfig({ + generatePaletteByConfig({ themeConfig: themeToGenerate, configId, isDarkMode: currentTheme === 'dark', @@ -100,7 +100,7 @@ const generateComponentPalette = (config: Config, currentTheme: 'light' | 'dark' configurable.pageId.replace('_', '-') + '-' + componentId.replace('_', '-'); if (themeToGenerate) { - generatePalleteByConfig({ + generatePaletteByConfig({ themeConfig: themeToGenerate, configId, isDarkMode: currentTheme === 'dark', @@ -136,7 +136,7 @@ export const ThemeProvider: React.FC = ({ children }) => { const themeToGenerate = currentTheme === 'light' ? config.theme?.light : config.theme?.dark; if (themeToGenerate) { - generatePalleteByConfig({ + generatePaletteByConfig({ themeConfig: themeToGenerate, isDarkMode: currentTheme === 'dark', }); diff --git a/src/v4/social/components/CommentTray/CommentTray.module.css b/src/v4/social/components/CommentTray/CommentTray.module.css index dedaa992d..72a5395b5 100644 --- a/src/v4/social/components/CommentTray/CommentTray.module.css +++ b/src/v4/social/components/CommentTray/CommentTray.module.css @@ -48,3 +48,18 @@ background-color: rgba(0, 0, 0, 0.5); z-index: -1; } + +.commentTrayContainer { + height: 100%; + display: flex; + flex-direction: column; +} + +.commentListContainer { + overflow-y: auto; + flex-grow: 1; +} + +.mobileSheetComposeBarContainer { + width: 100%; +} diff --git a/src/v4/social/components/CommentTray/CommentTray.tsx b/src/v4/social/components/CommentTray/CommentTray.tsx index 93e33403e..5dd1d940d 100644 --- a/src/v4/social/components/CommentTray/CommentTray.tsx +++ b/src/v4/social/components/CommentTray/CommentTray.tsx @@ -1,8 +1,7 @@ import React, { useState } from 'react'; - -import { CommentList } from '../../internal-components/CommentList'; -import { MobileSheetComposeBarContainer } from '../../internal-components/StoryViewer/styles'; -import { StoryCommentComposeBar } from '../../internal-components/StoryCommentComposeBar'; +import { CommentList } from '~/v4/social/internal-components/CommentList'; +import { StoryCommentComposeBar } from '~/v4/social/internal-components/StoryCommentComposeBar'; +import styles from './CommentTray.module.css'; const REPLIES_PER_PAGE = 5; @@ -35,8 +34,8 @@ export const CommentTray = ({ }; return ( -
-
+
+
- +
- +
); }; diff --git a/src/v4/social/components/CommentTray/ui.stories.tsx b/src/v4/social/components/CommentTray/ui.stories.tsx index 0fb5a9611..fd6c64553 100644 --- a/src/v4/social/components/CommentTray/ui.stories.tsx +++ b/src/v4/social/components/CommentTray/ui.stories.tsx @@ -26,6 +26,7 @@ export default { base_shade4_color: '#000000', alert_color: '#000000', background_color: '#FFFFFF', + base_inverse_color: '#FFFFFF', }, dark: { primary_color: '#FF0000', @@ -37,6 +38,7 @@ export default { base_shade4_color: '#000000', alert_color: '#000000', background_color: '#000000', + base_inverse_color: '#FFFFFF', }, }, excludes: [], diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css index a1bb228d7..5e40478f4 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css @@ -1,5 +1,4 @@ .hyperlinkFormContainer { - padding: var(--asc-spacing-m1); border-radius: var(--asc-border-radius-md); } @@ -62,7 +61,6 @@ display: flex; align-items: center; justify-content: space-between; - padding: 0 var(--asc-spacing-m1); } .labelContainer { @@ -76,7 +74,9 @@ } .styledSecondaryButton { + border: none; color: var(--asc-color-base-default); + background: var(--asc-color-base-background) } .removeIcon { diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx index dad3c7fac..72483ff46 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx @@ -3,21 +3,15 @@ import { useIntl } from 'react-intl'; import { useForm } from 'react-hook-form'; import { z } from 'zod'; import { zodResolver } from '@hookform/resolvers/zod'; -import { SecondaryButton } from '~/core/components/Button'; +import clsx from 'clsx'; import useSDK from '~/core/hooks/useSDK'; import { BottomSheet, Typography } from '~/v4/core/components'; -import { - MobileSheet, - MobileSheetContainer, - MobileSheetContent, - MobileSheetHeader, -} from '~/v4/core/components/BottomSheet/styles'; import { useCustomization } from '~/v4/core/providers/CustomizationProvider'; import { Trash2Icon } from '~/icons'; import styles from './HyperLinkConfig.module.css'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; -import Button from '~/v4/core/components/Button/Button'; +import { Button } from '~/v4/core/components/Button'; interface HyperLinkConfigProps { pageId: '*'; @@ -105,123 +99,102 @@ export const HyperLinkConfig = ({ isOpen={isOpen} onClose={onClose} > - - - + + + {formatMessage({ id: 'storyCreation.hyperlink.bottomSheet.title' })} + + +
+
+
+
+
- {formatMessage({ id: 'storyCreation.hyperlink.bottomSheet.title' })} + - - {doneButtonConfig?.done_button_text || - formatMessage({ id: 'storyCreation.hyperlink.bottomSheet.submit' })} - {doneButtonConfig?.done_icon && ( - - )} - -
- - -
- -
- - - - - {errors?.url && {errors?.url?.message}} -
-
-
- - - -
- {watch('customText')?.length} / {MAX_LENGTH} -
-
- - {errors?.customText && ( - {errors?.customText?.message} - )} -
+
+
+ + + +
+ {watch('customText')?.length || 0} / {MAX_LENGTH}
- {isHaveHyperLink && ( -
- -
-
- )} - +
+ + {errors?.customText && ( + {errors?.customText?.message} + )} + + +
- - + {isHaveHyperLink && ( +
+ +
+
+ )} + +
); }; diff --git a/src/v4/social/components/ReactionList/ReactionList.module.css b/src/v4/social/components/ReactionList/ReactionList.module.css index 16886317c..cf31c26be 100644 --- a/src/v4/social/components/ReactionList/ReactionList.module.css +++ b/src/v4/social/components/ReactionList/ReactionList.module.css @@ -7,7 +7,7 @@ .tabList { display: flex; gap: var(--asc-spacing-s1); - border-bottom: 1px solid var(--asc-color-base-shade3); + border-bottom: 1px solid var(--asc-color-base-shade4); padding-bottom: var(--asc-spacing-s1); } @@ -15,25 +15,25 @@ cursor: pointer; padding: var(--asc-spacing-xxs2) var(--asc-spacing-s1); border-radius: var(--asc-border-radius-sm); - background-color: var(--asc-color-base-inverse); + background: var(--asc-color-base-background); color: var(--asc-color-base-shade6); } .tabItem.active { background-color: var(--asc-color-base-shade4); - color: var(--asc-color-base-inverse); + color: var(--asc-color-primary-default); } .reactionEmoji { display: flex; align-items: center; - gap: var(--asc-spacing-xxs); + gap: var(--asc-spacing-s1); } .tabCount { font-size: 0.8rem; - background-color: var(--asc-color-base-shade4); - color: var(--asc-color-base-inverse); + background: var(--asc-color-base-background); + color: var(--asc-color-base-shade1); padding: 0.1rem 0.3rem; border-radius: var(--asc-border-radius-sm); } @@ -48,7 +48,7 @@ display: flex; align-items: center; gap: var(--asc-spacing-s1); - background-color: var(--asc-color-base-inverse); + background: var(--asc-color-base-background); padding: var(--asc-spacing-s1); border-radius: var(--asc-border-radius-sm); width: 100%; @@ -58,4 +58,5 @@ display: flex; align-items: center; gap: var(--asc-spacing-s1); + color: var(--asc-color-base-default); } diff --git a/src/v4/social/components/ReactionList/ReactionList.tsx b/src/v4/social/components/ReactionList/ReactionList.tsx index 8100f03dd..c653c3b66 100644 --- a/src/v4/social/components/ReactionList/ReactionList.tsx +++ b/src/v4/social/components/ReactionList/ReactionList.tsx @@ -1,9 +1,9 @@ import React, { Fragment, useState } from 'react'; -import Avatar from '~/core/components/Avatar'; + import { FireIcon, HeartIcon, LikedIcon } from '~/icons'; import styles from './ReactionList.module.css'; -import { useReactionsCollection } from '../../hooks'; -import { Typography } from '~/v4/core/components'; +import { useReactionsCollection } from '~/v4/social/hooks/collections/useReactionsCollection'; +import { Avatar, Typography } from '~/v4/core/components'; interface ReactionListProps { referenceId: string; @@ -83,7 +83,7 @@ export const ReactionList = ({ referenceId, referenceType }: ReactionListProps)
- {reaction.user?.displayName} + {reaction.user?.displayName}
diff --git a/src/v4/social/components/StoryTab/StoryRing.module.css b/src/v4/social/components/StoryTab/StoryRing.module.css index 673a987e4..dc031eac5 100644 --- a/src/v4/social/components/StoryTab/StoryRing.module.css +++ b/src/v4/social/components/StoryTab/StoryRing.module.css @@ -1,14 +1,25 @@ -@keyframes animateRing { +.emptyStateRing { + stroke: var(--asc-color-base-shade4); + stroke-width: 2; + fill: none; +} + +.errorRing { + stroke: var(--asc-color-alert); +} + +.uploadingProgressRing { + stroke-dasharray: 339; + stroke-dashoffset: 339; + transform: rotate(-90deg); + animation: progress 2s linear infinite; +} + +@keyframes progress { 0% { stroke-dashoffset: 339; } 100% { stroke-dashoffset: 0; } -} - -.uploadingProgressRing { - animation: animateRing 2s linear 0s infinite; - -webkit-animation: animateRing 2s linear 0s infinite; - -moz-animation: animateRing 2s linear 0s infinite; -} +} \ No newline at end of file diff --git a/src/v4/social/components/StoryTab/StoryRing.tsx b/src/v4/social/components/StoryTab/StoryRing.tsx index 95b94ee71..c99a69c5d 100644 --- a/src/v4/social/components/StoryTab/StoryRing.tsx +++ b/src/v4/social/components/StoryTab/StoryRing.tsx @@ -45,16 +45,7 @@ const EmptyStateRingSvg = ({ - + ); }; @@ -121,6 +112,7 @@ const UploadingRingSvg = ({ }) => { const { getConfig } = useCustomization(); const elementConfig = getConfig(`${pageId}/${componentId}/${elementId}`); + return ( { href: string; - icon?: React.ReactNode; } -export const HyperLink: React.FC = ({ - href, - children, - icon = , - ...rest -}) => { +export const HyperLink: React.FC = ({ href, children, ...rest }) => { return ( - - {icon && icon} + + {children} - + ); }; diff --git a/src/v4/social/elements/HyperLink/styles.tsx b/src/v4/social/elements/HyperLink/styles.tsx deleted file mode 100644 index 5b295869e..000000000 --- a/src/v4/social/elements/HyperLink/styles.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import styled from 'styled-components'; -import { Icon } from '~/v4/core/components/Icon'; - -export const StyledLink = styled.a` - border: ${({ theme }) => `1px solid ${theme.v4.colors.base.shade4}`}; - color: ${({ theme }) => theme.v4.colors.secondary.default}; - background: ${({ theme }) => theme.v4.colors.hyperlink.default}; - display: inline-flex; - align-items: center; - padding: 0.625rem 1rem 0.625rem 0.75rem; - border-radius: 1.5rem; - transition: background-color 0.3s, color 0.3s; - font-size: 0.9375rem; - font-style: normal; - font-weight: 600; - line-height: 1.25rem; - letter-spacing: -0.015rem; - gap: 0.5rem; -`; - -export const StyledLinkIcon = styled(Icon)` - fill: ${({ theme }) => theme.v4.colors.primary.default}; -`; diff --git a/src/v4/social/elements/index.ts b/src/v4/social/elements/index.ts index e9882c4fe..db4ec65b3 100644 --- a/src/v4/social/elements/index.ts +++ b/src/v4/social/elements/index.ts @@ -11,3 +11,4 @@ export { ReactButton } from './ReactButton'; export { SaveButton } from './SaveButton'; export { ShareStoryButton } from './ShareStoryButton/ShareStoryButton'; export { SpeakerButton } from './SpeakerButton'; +export { HyperLink } from './HyperLink'; diff --git a/src/v4/social/icons/chevron_down.tsx b/src/v4/social/icons/chevron_down.tsx new file mode 100644 index 000000000..4c50049e9 --- /dev/null +++ b/src/v4/social/icons/chevron_down.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +const ChevronDown = (props: React.SVGProps) => ( + + + +); + +export default ChevronDown; diff --git a/src/v4/social/icons/expand.tsx b/src/v4/social/icons/expand.tsx new file mode 100644 index 000000000..865e3a81f --- /dev/null +++ b/src/v4/social/icons/expand.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Expand(props: React.SVGProps) { + return ( + + + + ); +} + +export default Expand; diff --git a/src/v4/social/icons/flag.tsx b/src/v4/social/icons/flag.tsx new file mode 100644 index 000000000..dd706f400 --- /dev/null +++ b/src/v4/social/icons/flag.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Flag(props: React.SVGProps) { + return ( + + + + ); +} + +export default Flag; diff --git a/src/v4/social/icons/index.ts b/src/v4/social/icons/index.ts index c62acf949..ee745d9a9 100644 --- a/src/v4/social/icons/index.ts +++ b/src/v4/social/icons/index.ts @@ -1,2 +1,8 @@ export { default as AspectRatioIcon } from './aspect_ratio'; export { default as VerifiedIcon } from './verified'; +export { default as ExpandIcon } from './expand'; +export { default as PenIcon } from './pen'; +export { default as TrashIcon } from './trash'; +export { default as FlagIcon } from './flag'; +export { default as ChevronDownIcon } from './chevron_down'; +export { default as LinkIcon } from './link'; diff --git a/src/v4/social/icons/link.tsx b/src/v4/social/icons/link.tsx new file mode 100644 index 000000000..1729ae218 --- /dev/null +++ b/src/v4/social/icons/link.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Link(props: React.SVGProps) { + return ( + + + + ); +} + +export default Link; diff --git a/src/v4/social/icons/pen.tsx b/src/v4/social/icons/pen.tsx new file mode 100644 index 000000000..8d21fb6c8 --- /dev/null +++ b/src/v4/social/icons/pen.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Pen(props: React.SVGProps) { + return ( + + + + ); +} + +export default Pen; diff --git a/src/v4/social/icons/trash.tsx b/src/v4/social/icons/trash.tsx new file mode 100644 index 000000000..5c9cb6065 --- /dev/null +++ b/src/v4/social/icons/trash.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +function Trash(props: React.SVGProps) { + return ( + + + + ); +} + +export default Trash; diff --git a/src/v4/social/internal-components/Badege/Badge.module.css b/src/v4/social/internal-components/Badege/Badge.module.css new file mode 100644 index 000000000..fdf079b3e --- /dev/null +++ b/src/v4/social/internal-components/Badege/Badge.module.css @@ -0,0 +1,10 @@ +.badge { + display: inline-flex; + justify-content: center; + align-items: center; + gap: 3px; + background-color: var(--asc-color-primary-shade3); + color: var(--asc-color-primary-main); + border-radius: 20px; + padding: 0px 6px 0px 4px; +} \ No newline at end of file diff --git a/src/v4/social/internal-components/Badege/Badge.tsx b/src/v4/social/internal-components/Badege/Badge.tsx index c2fcacea5..d70e5cf73 100644 --- a/src/v4/social/internal-components/Badege/Badge.tsx +++ b/src/v4/social/internal-components/Badege/Badge.tsx @@ -1,12 +1,12 @@ import React from 'react'; -import { StyledBadge } from './styles'; +import styles from './Badge.module.css'; import { BadgeProps } from './types'; export const Badge = ({ icon, communityRole }: BadgeProps) => { return ( - +
{icon} {communityRole} - +
); }; diff --git a/src/v4/social/internal-components/Badege/styles.tsx b/src/v4/social/internal-components/Badege/styles.tsx deleted file mode 100644 index a05c21b4e..000000000 --- a/src/v4/social/internal-components/Badege/styles.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import styled from 'styled-components'; - -export const StyledBadge = styled.div` - display: inline-flex; - justify-content: center; - align-items: center; - gap: 3px; - background-color: ${({ theme }) => theme.palette.primary.shade3}; - color: ${({ theme }) => theme.palette.primary.main}; - border-radius: 20px; - padding: 0px 6px 0px 4px; -`; diff --git a/src/v4/social/internal-components/Badege/types.tsx b/src/v4/social/internal-components/Badege/types.ts similarity index 100% rename from src/v4/social/internal-components/Badege/types.tsx rename to src/v4/social/internal-components/Badege/types.ts diff --git a/src/v4/social/internal-components/Badege/ui.stories.tsx b/src/v4/social/internal-components/Badege/ui.stories.tsx new file mode 100644 index 000000000..4c347bc5c --- /dev/null +++ b/src/v4/social/internal-components/Badege/ui.stories.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import { Meta, Story } from '@storybook/react'; +import { Badge } from './Badge'; +import { BadgeProps } from './types'; +import { ModeratorBadgeIcon } from '~/icons'; + +export default { + title: 'V4/Components/Badge', + component: Badge, + argTypes: { + icon: { + control: { + type: 'select', + options: ['crown', 'star', 'heart'], // Adjust the options based on your available icons + }, + }, + communityRole: { + control: 'text', + }, + }, +} as Meta; + +const Template: Story = (args) => ; + +export const Default = Template.bind({}); +Default.args = { + icon: , + communityRole: 'Moderator', +}; diff --git a/src/v4/social/internal-components/Comment/Comment.module.css b/src/v4/social/internal-components/Comment/Comment.module.css new file mode 100644 index 000000000..c847277c9 --- /dev/null +++ b/src/v4/social/internal-components/Comment/Comment.module.css @@ -0,0 +1,17 @@ +.actionButton { + display: inline-flex; + justify-content: flex-start; + align-items: center; + gap: 0.25rem; + border: none; + color: var(--asc-color-base-default); + background: var(--asc-color-base-background); + text-align: start; + } + + .actionIcon { + width: 1.25rem; + height: 1.25rem; + fill: var(--asc-color-base-default); + color: var(--asc-color-base-default); + } \ No newline at end of file diff --git a/src/v4/social/internal-components/Comment/CommentText.module.css b/src/v4/social/internal-components/Comment/CommentText.module.css new file mode 100644 index 000000000..f56f9b394 --- /dev/null +++ b/src/v4/social/internal-components/Comment/CommentText.module.css @@ -0,0 +1,25 @@ +.commentContent { + overflow-wrap: anywhere !important; + word-break: break-word; + color: var(--asc-color-base-default); + background-color: var(--asc-color-base-shade4); + border-radius: 0 0.75rem 0.75rem 0.75rem; + padding: 0.75rem; + display: inline-block; + white-space: pre-wrap; + font-size: var(--asc-text-font-size-md); + font-weight: var(--asc-text-font-weight-normal); + line-height: var(--asc-line-height-lg); +} + +.readMoreButton { + color: var(--asc-color-primary-default); + padding: 0 0 0 0.25rem; + background: none; + border: none; + cursor: pointer; +} + +.readMoreButton:hover { + text-decoration: underline; +} diff --git a/src/v4/social/internal-components/Comment/CommentText.tsx b/src/v4/social/internal-components/Comment/CommentText.tsx index 6baca788a..693df78e6 100644 --- a/src/v4/social/internal-components/Comment/CommentText.tsx +++ b/src/v4/social/internal-components/Comment/CommentText.tsx @@ -1,11 +1,12 @@ import React, { useMemo, useState } from 'react'; import { FormattedMessage } from 'react-intl'; import Truncate from 'react-truncate-markup'; +import clsx from 'clsx'; import { findChunks, Mentioned } from '~/v4/helpers/utils'; import MentionHighlightTag from '~/core/components/MentionHighlightTag'; import { processChunks } from '~/core/components/ChunkHighlighter'; import Linkify from '~/core/components/Linkify'; -import { CommentContent, ReadMoreButton } from './styles'; +import styles from './CommentText.module.css'; const COMMENT_MAX_LINES = 8; @@ -31,7 +32,7 @@ const CommentText = ({ const expand = () => setIsExpanded(true); const textContent = text ? ( - +
{chunks.map((chunk) => { const key = `${text}-${chunk.start}-${chunk.end}`; @@ -45,13 +46,12 @@ const CommentText = ({ ); } - return {sub}; } return {sub}; })} - +
) : null; if (isExpanded) { @@ -62,9 +62,9 @@ const CommentText = ({ + } > {textContent} diff --git a/src/v4/social/internal-components/Comment/UIComment.module.css b/src/v4/social/internal-components/Comment/UIComment.module.css new file mode 100644 index 000000000..6e73ad1e3 --- /dev/null +++ b/src/v4/social/internal-components/Comment/UIComment.module.css @@ -0,0 +1,148 @@ +.avatar { + margin-right: 0.5rem; +} + +.container { + display: flex; + gap: 1rem; + width: 100%; +} + +.banIcon { + margin-left: 0.265rem; + margin-top: 1px; +} + +.commentDate { + color: var(--asc-color-base-shade2); +} + +.editedMark { + margin-left: 0.3125rem; + color: var(--asc-color-neutral-shade1); + font-size: var(--asc-text-font-size-sm); + font-weight: var(--asc-text-font-weight-normal); + line-height: var(--asc-line-height-sm); +} + +.editedMark:before { + content: '('; +} + +.editedMark:after { + content: ')'; +} + +.interactionWrapper { + display: flex; + justify-content: flex-start; + align-items: center; + gap: 0.75rem; +} + +.reactionsWrapper { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.interactionBar { + width: 100%; + display: flex; + justify-content: space-between; + width: 100%; + gap: 0.5rem; + align-items: center; + padding: 0.125rem 0; +} + +.commentEditContainer { + display: flex; + flex-direction: column; +} + +.buttonContainer { + display: flex; + justify-content: flex-end; + margin-top: 0.5rem; +} + +.buttonContainer > * { + margin-left: 0.5rem; +} + +.commentEditTextarea { + font-size: var(--asc-text-font-size-md); + font-weight: var(--asc-text-font-weight-normal); + line-height: var(--asc-line-height-lg); + border-radius: 0 0.75rem 0.75rem 0.75rem; + height: 7.5rem; + padding: 0.75rem; +} + +.reactionListButtonContainer { + display: flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + color: var(--asc-color-base-shade2); +} + +.reactionsListButtonWrapper { + display: flex; + align-items: center; + flex-shrink: 1; +} + +.reactionIcon { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; + margin-left: -0.25rem; +} + +.reactionIcon:first-child { + margin-left: 0; +} + +.commentInteractionButton { + padding: 0.25rem; + display: flex; + align-items: center; + gap: 0.5rem; + color: var(--asc-color-base-shade2); + cursor: pointer; + border: none; +} + +.likeButton { + padding: 0.25rem; + color: var(--asc-color-base-shade2); + border: none; +} + +.liked { + padding: 0.25rem; + color: var(--asc-color-primary-default); + border: none; +} + +.reactionListButton { + border: none; + color: var(--asc-color-primary-default); +} + +.content { + width: 100%; +} + +.commentHeader { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.5rem; + color: var(--asc-color-base-default); +} diff --git a/src/v4/social/internal-components/Comment/UIComment.tsx b/src/v4/social/internal-components/Comment/UIComment.tsx index de6c98b97..4a81267f4 100644 --- a/src/v4/social/internal-components/Comment/UIComment.tsx +++ b/src/v4/social/internal-components/Comment/UIComment.tsx @@ -7,33 +7,18 @@ import CommentText from './CommentText'; import { backgroundImage as UserImage } from '~/icons/User'; import BanIcon from '~/icons/Ban'; -import { - AuthorName, - Avatar, - ButtonContainer, - CommentDate, - CommentEditContainer, - CommentEditTextarea, - CommentHeader, - CommentInteractionButton, - Content, - EditedMark, - InteractionBar, - InteractionWrapper, - LikeButton, - ReactionIcon, - ReactionListButtonContainer, - ReactionsListButtonWrapper, -} from './styles'; - import { Mentioned, Metadata } from '~/v4/helpers/utils'; import { QueryMentioneesFnType } from '~/v4/chat/hooks/useMention'; import { formatTimeAgo } from '~/utils'; import { EllipsisH, FireIcon, HeartIcon, LikedIcon } from '~/icons'; -import { PrimaryButton, SecondaryButton } from '~/core/components/Button'; import millify from 'millify'; import { FIRE_REACTION_KEY, LIKE_REACTION_KEY, LOVE_REACTION_KEY } from '~/constants'; +import styles from './UIComment.module.css'; +import InputText from '~/v4/core/components/InputText'; +import { Avatar, Typography } from '~/v4/core/components'; +import Button from '~/v4/core/components/Button/Button'; +import clsx from 'clsx'; interface StyledCommentProps { commentId?: string; @@ -120,28 +105,20 @@ const UIComment = ({ onClickReactionList, }: StyledCommentProps) => { return ( - <> - - - - {authorName} +
+ +
+
+ {authorName} - <> - {isBanned && ( - - )} - + <>{isBanned && } - +
{isEditing ? ( - - + onChange?.(data)} /> - - + +
+
) : ( )} {!isEditing && (canLike || canReply || options.length > 0) && ( - - - +
+
+
{formatTimeAgo(createdAt)} {(editedAt?.getTime() || 0) - (createdAt?.getTime() || 0) > 0 && ( - + - + )} - +
{canLike && ( - + )} {canReply && ( - onClickReply?.(authorName, referenceType, referenceId, commentId)} > - + )} - + +
+ {reactionsCount > 0 && ( + + )} +
)} - - +
+
); }; diff --git a/src/v4/social/internal-components/Comment/index.tsx b/src/v4/social/internal-components/Comment/index.tsx index b93888388..f22158cc8 100644 --- a/src/v4/social/internal-components/Comment/index.tsx +++ b/src/v4/social/internal-components/Comment/index.tsx @@ -1,26 +1,9 @@ -import React, { memo, useState } from 'react'; +import React, { useState } from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; import useComment from '~/social/hooks/useComment'; - import useMention from '~/v4/chat/hooks/useMention'; -import { - CommentBlock, - CommentContainer, - DeletedCommentContainer, - DeletedIcon, - DeletedReplyContainer, - IconContainer, - MessageContainer, - MobileSheet, - MobileSheetButton, - MobileSheetContent, - MobileSheetHeader, - MobileSheetNestedBackDrop, - ReplyContainer, - Text, -} from './styles'; import { extractMetadata, isNonNullable, @@ -29,61 +12,32 @@ import { Metadata, parseMentionsMarkup, } from '~/v4/helpers/utils'; -import { LoadingIndicator } from '~/core/components/ProgressBar/styles'; + import useSDK from '~/core/hooks/useSDK'; import useUser from '~/core/hooks/useUser'; import { CommentRepository, ReactionRepository } from '@amityco/ts-sdk'; -import { useCustomComponent } from '~/core/providers/CustomComponentsProvider'; + import useCommentFlaggedByMe from '~/social/hooks/useCommentFlaggedByMe'; import useCommentPermission from '~/social/hooks/useCommentPermission'; import useCommentSubscription from '~/social/hooks/useCommentSubscription'; - import useImage from '~/core/hooks/useImage'; -import { FlagIcon, Pencil2Icon, Trash2Icon } from '~/icons'; import UIComment from './UIComment'; import { LIKE_REACTION_KEY } from '~/constants'; import { CommentList } from '~/v4/social/internal-components/CommentList'; import { ReactionList } from '~/v4/social/components/ReactionList'; -import { useTheme } from 'styled-components'; import useGetStoryByStoryId from '../../hooks/useGetStoryByStoryId'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; import { useNotifications } from '~/v4/core/providers/NotificationProvider'; -const REPLIES_PER_PAGE = 5; +import { Button, BottomSheet, Typography } from '~/v4/core/components'; -const DeletedComment = () => { - return ( - - - - - - - - - - - ); -}; +import styles from './Comment.module.css'; +import { TrashIcon, PenIcon, FlagIcon } from '~/v4/social/icons'; +import { LoadingIndicator } from '~/v4/social/internal-components/LoadingIndicator'; -const DeletedReply = () => { - return ( -
- - - - - - - - - - -
- ); -}; +const REPLIES_PER_PAGE = 5; function getCommentData(comment: Amity.Comment | null) { if (comment == null) return ''; @@ -103,18 +57,10 @@ interface CommentProps { commentId: Amity.Comment['commentId'], ) => void; style?: React.CSSProperties; - onClickReactionList: (commentId: string) => void; shouldAllowInteraction?: boolean; } -const Comment = ({ - commentId, - readonly, - onClickReply, - style, - shouldAllowInteraction, -}: CommentProps) => { - const theme = useTheme(); +export const Comment = ({ commentId, readonly, onClickReply }: CommentProps) => { const comment = useComment(commentId); const story = useGetStoryByStoryId(comment?.referenceId); const [bottomSheet, setBottomSheet] = useState(false); @@ -241,7 +187,7 @@ const Comment = ({ ? formatMessage({ id: 'reply.edit' }) : formatMessage({ id: 'comment.edit' }), action: startEditing, - icon: , + icon: , } : null, canReport @@ -250,7 +196,7 @@ const Comment = ({ ? formatMessage({ id: 'report.undoReport' }) : formatMessage({ id: 'report.doReport' }), action: handleReportComment, - icon: , + icon: , } : null, canDelete @@ -259,23 +205,13 @@ const Comment = ({ ? formatMessage({ id: 'reply.delete' }) : formatMessage({ id: 'comment.delete' }), action: deleteComment, - icon: , + icon: , } : null, ].filter(isNonNullable); if (comment == null) return null; - if (comment?.isDeleted) { - return isReplyComment ? ( - - ) : ( - - - - ); - } - const renderedComment = ( {isReplyComment ? ( - {renderedComment} +
{renderedComment}
) : ( - - {renderedComment} +
+
{renderedComment}
{comment.children.length > 0 && ( )} - +
)} - - - - - {options.map((bottomSheetAction) => ( - { - bottomSheetAction.action(); - setBottomSheet(false); - }} - > - {bottomSheetAction?.icon} - {bottomSheetAction.name} - - ))} - - - - - ( + + ))} + + setSelectedCommentId('')} mountPoint={document.getElementById('asc-uikit-stories-viewer') as HTMLElement} detent="full-height" > - - - - - - - - - setSelectedCommentId('')} /> - + + ); }; - -export default memo((props: CommentProps) => { - const CustomComponentFn = useCustomComponent('Comment'); - - if (CustomComponentFn) return CustomComponentFn(props); - - return ; -}); diff --git a/src/v4/social/internal-components/Comment/styles.tsx b/src/v4/social/internal-components/Comment/styles.tsx deleted file mode 100644 index 8967647c3..000000000 --- a/src/v4/social/internal-components/Comment/styles.tsx +++ /dev/null @@ -1,305 +0,0 @@ -import React, { ReactNode } from 'react'; -import InputText from '~/core/components/InputText'; -import UICommentComposeBar from '~/social/components/CommentComposeBar'; -import { SecondaryButton } from '~/core/components/Button'; -import { MinusCircle, Reply } from '~/icons'; -import styled, { DefaultTheme } from 'styled-components'; -import UIAvatar from '~/core/components/Avatar'; -import Sheet from 'react-modal-sheet'; - -export const Avatar = styled(UIAvatar)` - margin-right: 0.5rem; -`; - -export const TimeContainer = styled.div` - color: ${({ theme }) => theme.palette.base.shade2}; -`; - -export const EngagementButton = styled(SecondaryButton)` - padding: 0.5rem; - color: ${({ theme }) => theme.palette.base.shade2}; -`; - -export const LikeButton = styled(SecondaryButton)<{ isLiked?: boolean }>` - padding: 0.25rem; - color: ${({ theme, isLiked }) => - isLiked ? theme.palette.primary.main : theme.palette.neutral.shade2}; -`; - -export const CommentInteractionButton = styled(SecondaryButton)` - color: ${({ theme }) => theme.palette.neutral.shade2}; - padding: 0.25rem; -`; - -export const MobileSheet = styled(Sheet)` - margin: 0 auto; - width: 100%; -`; - -export const MobileSheetNestedBackDrop = styled(MobileSheet.Backdrop)` - background-color: rgba(0, 0, 0, 0.5); -`; - -export const MobileSheetContainer = styled(MobileSheet.Container)` - z-index: 100; -`; - -export const MobileSheetHeader = styled(MobileSheet.Header)` - z-index: 100; -`; - -export const MobileSheetContent = styled(MobileSheet.Content)` - z-index: 100; - padding: 0rem 1rem; -`; - -export const MobileSheetButton = styled(SecondaryButton)` - display: flex; - justify-content: flex-start; - align-items: center; - gap: 0.5rem; - width: 100%; - margin-bottom: 0.5rem; -`; - -export const CommentBlock = styled.div` - width: 100%; - display: flex; - flex-direction: column; - gap: 0.5rem; - align-items: start; - justify-content: flex-start; - overflow: hidden; -`; - -export const AuthorName = styled.div` - display: inline !important; - ${({ theme }) => theme.typography.captionBold} -`; - -export const CommentBubble = styled.div` - display: flex; - flex-direction: column; - gap: 0.25rem; - padding: 0.75rem; - background-color: #f0f0f0; - border-top-right-radius: 0.75rem; - border-bottom-right-radius: 0.75rem; - border-bottom-left-radius: 0.75rem; -`; - -const encodeHexColor = (hex: string) => hex.replace('#', '%23'); - -const getCommentComposeBarBackground = (theme: DefaultTheme) => - ` - -`; - -export const CommentContainer = styled.div` - display: flex; - width: 100%; - color: black; - padding-top: 1rem; -`; - -export const ReplyContainer = styled.div` - display: flex; - color: black; - padding-top: 1rem; - padding-left: 2.5rem; -`; - -export const CommentComposeBar = styled(UICommentComposeBar)` - border: none; - padding: 0.5rem 0 1rem; - background-repeat: no-repeat; - background-image: ${({ theme }) => - `url('data:image/svg+xml;utf8,${getCommentComposeBarBackground(theme)}')`}; -`; - -export const Content = styled.div` - width: 100%; -`; - -export const CommentHeader = styled.div` - word-break: break-all; - margin-bottom: 0.3125rem; -`; - -export const CommentContent = styled.div` - overflow-wrap: anywhere !important; - word-break: break-word; - color: ${({ theme }) => theme.palette.neutral.main}; - background-color: ${({ theme }) => theme.palette.base.shade4}; - border-radius: 0 0.75rem 0.75rem 0.75rem; - padding: 0.75rem; - display: inline-block; - white-space: pre-wrap; - ${({ theme }) => theme.typography.body} -`; - -export const CommentInfo = styled.div` - margin-left: 0.5rem; -`; - -export const CommentDate = styled.span` - margin-left: 0.3125rem; - color: ${({ theme }) => theme.palette.neutral.shade1}; - ${({ theme }) => theme.typography.subTitle} -`; - -export const EditedMark = styled.span` - margin-left: 0.3125rem; - color: ${({ theme }) => theme.palette.neutral.shade1}; - ${({ theme }) => theme.typography.subTitle} - - &:before { - content: '('; - } - - &:after { - content: ')'; - } -`; - -export const ReadMoreButton = styled(SecondaryButton)` - color: ${({ theme }) => theme.palette.primary.main}; - padding: 0 0 0 0.25rem; - - &:hover { - background: none; - text-decoration: underline; - } -`; - -export const InteractionWrapper = styled.div` - display: flex; - align-items: center; - gap: 0.5rem; -`; - -export const ReactionsWrapper = styled.div` - display: flex; - align-items: center; - gap: 0.5rem; -`; - -export const InteractionBar = styled.div` - display: flex; - justify-content: space-between; - width: 100%; - gap: 0.5rem; - align-items: center; - padding: 0.125rem 0; -`; - -export const DeletedCommentContainer = styled.div` - display: flex; - align-items: center; - color: ${({ theme }) => theme.palette.base.shade3}; - padding: 1rem 0; - - &.reply { - display: inline-flex; - margin-left: 2.5rem; - background: ${({ theme }) => theme.palette.base.shade4}; - color: ${({ theme }) => theme.palette.base.shade2}; - border-radius: 0.25rem; - margin: 0.875rem 0; - padding: 0.25rem 0.5rem 0.125rem 0; - } -`; - -export const DeletedReplyContainer = styled.div` - display: inline-flex; - align-items: center; - margin: 0.4375rem 0 0.4375rem 2.5rem; - background: ${({ theme }) => theme.palette.base.shade4}; - color: ${({ theme }) => theme.palette.base.shade2}; - border-radius: 0.25rem; - padding: 0.25rem 0.5rem 0.125rem 0; -`; - -export const DeletedIcon = styled(MinusCircle)<{ icon?: ReactNode }>` - font-size: 1.125rem; - width: 1.25rem; - height: 1.25rem; -`; - -export const IconContainer = styled.div` - display: flex; - padding-right: 0.625rem; - - &.reply { - padding: 0.25rem 0.625rem 0.25rem 0.25rem; - } -`; - -export const MessageContainer = styled.div` - display: flex; - align-items: center; -`; - -export const Text = styled.span` - font-size: 0.875rem; -`; - -export const ReplyIcon = styled(Reply)<{ icon?: ReactNode }>` - font-size: 1rem; - margin-right: 0.3125rem; -`; - -export const ReplyButton = styled(SecondaryButton)``; - -export const CommentEditContainer = styled.div` - display: flex; - flex-direction: column; -`; - -export const ButtonContainer = styled.div` - display: flex; - justify-content: flex-end; - margin-top: 0.5rem; - - > * { - margin-left: 0.5rem; - } -`; - -export const CommentEditTextarea = styled(InputText).attrs({ - rows: 1, - maxRows: 15, -})` - ${({ theme }) => theme.typography.body} - border-radius: 0 0.75rem 0.75rem 0.75rem; - height: 7.5rem; - padding: 0.75rem; -`; - -export const ReactionListButtonContainer = styled.div` - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; - color: ${({ theme }) => theme.v4.colors.base.shade2}; -`; - -export const ReactionsListButtonWrapper = styled.div` - display: flex; - align-items: center; - flex-shrink: 1; -`; - -export const ReactionIcon = styled.div` - display: flex; - align-items: center; - justify-content: center; - width: 1.25rem; - height: 1.25rem; - border-radius: 50%; - margin-left: -0.25rem; - - &:first-child { - margin-left: 0; - } -`; diff --git a/src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.module.css b/src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.module.css new file mode 100644 index 000000000..df0923e47 --- /dev/null +++ b/src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.module.css @@ -0,0 +1,62 @@ +.avatar { + margin-right: 8px; +} + +.replyContainer { + display: flex; + padding: 10px 12px 10px 16px; + align-items: center; + justify-content: space-between; + gap: 12px; + background: var(--asc-color-base-shade4); + transform: translateY(100%); + transition: transform 0.5s ease-in-out; +} + +.replyingToText { + color: var(--asc-color-base-shade2); + font-size: var(--asc-text-font-size-sm); + font-weight: var(--asc-text-font-weight-normal); + line-height: var(--asc-line-height-sm); +} + +.replyingToUsername { + color: var(--asc-color-base-shade2); + font-size: var(--asc-text-font-size-sm); + font-weight: var(--asc-text-font-weight-bold); + line-height: var(--asc-line-height-sm); +} + +.animatedReplyContainer { + transform: translateY(0%); +} + +.commentComposeBarContainer { + width: 100%; + background: var(--asc-color-base-background); + display: flex; + gap: var(--asc-spacing-s1); + align-items: center; +} + +.commentComposeBarInput { + outline: none; + flex-grow: 1; + font: inherit; + font-size: 14px; + resize: vertical; + border-radius: 1.25rem; + color: var(--asc-color-base-shade2); + background-color: var(--asc-color-base-shade4); + border-radius: 20px; +} + +.addCommentButton { + color: var(--asc-color-primary-default) !important; + cursor: pointer !important; + padding: 0.625rem; + background-color: transparent; + border: none; + font-size: var(--asc-text-font-size-sm); + font-weight: var(--asc-text-font-weight-bold); +} \ No newline at end of file diff --git a/src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.tsx b/src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.tsx index fb353edfd..73aa98d1e 100644 --- a/src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.tsx +++ b/src/v4/social/internal-components/CommentComposeBar/CommentComposeBar.tsx @@ -4,19 +4,17 @@ import useMention from '~/v4/chat/hooks/useMention'; import { Mentionees, Metadata } from '~/v4/helpers/utils'; import useSDK from '~/core/hooks/useSDK'; -import { LoadingIndicator } from '~/core/components/ProgressBar/styles'; -import { FormattedMessage, useIntl } from 'react-intl'; -import { - AddCommentButton, - Avatar, - CommentComposeBarContainer, - CommentComposeBarInput, -} from './styles'; +import { FormattedMessage, useIntl } from 'react-intl'; +import styles from './CommentComposeBar.module.css'; import { backgroundImage as UserImage } from '~/icons/User'; import useImage from '~/core/hooks/useImage'; import { useConfirmContext } from '~/core/providers/ConfirmProvider'; +import InputText from '~/v4/core/components/InputText'; +import { Avatar } from '~/v4/core/components'; +import Button from '~/v4/core/components/Button/Button'; +import { LoadingIndicator } from '~/v4/social/internal-components/LoadingIndicator'; const TOTAL_MENTIONEES_LIMIT = 30; const COMMENT_LENGTH_LIMIT = 50000; @@ -28,15 +26,9 @@ interface CommentComposeBarProps { onSubmit: (text: string, mentionees: Mentionees, metadata: Metadata) => void; onCancelReply?: () => void; isReplying?: boolean; - style?: React.CSSProperties; } -export const CommentComposeBar = ({ - style, - userToReply, - onSubmit, - targetId, -}: CommentComposeBarProps) => { +export const CommentComposeBar = ({ userToReply, onSubmit, targetId }: CommentComposeBarProps) => { const { currentUserId } = useSDK(); const user = useUser(currentUserId); const avatarFileUrl = useImage({ fileId: user?.avatarFileId, imageSize: 'small' }); @@ -86,9 +78,9 @@ export const CommentComposeBar = ({ : formatMessage({ id: 'CommentComposeBar.saySomething' }); return ( - +
- onChange?.(data)} onKeyPress={(e) => e.key === 'Enter' && addComment()} + className={styles.commentComposeBarInput} /> - {formatMessage({ id: 'storyViewer.commentComposeBar.submit' })} - - + +
); }; diff --git a/src/v4/social/internal-components/CommentComposeBar/index.tsx b/src/v4/social/internal-components/CommentComposeBar/index.ts similarity index 100% rename from src/v4/social/internal-components/CommentComposeBar/index.tsx rename to src/v4/social/internal-components/CommentComposeBar/index.ts diff --git a/src/v4/social/internal-components/CommentComposeBar/styles.tsx b/src/v4/social/internal-components/CommentComposeBar/styles.tsx deleted file mode 100644 index 616f0b310..000000000 --- a/src/v4/social/internal-components/CommentComposeBar/styles.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import styled from 'styled-components'; -import InputText from '~/core/components/InputText'; -import { SecondaryButton } from '~/core/components/Button'; - -import UIAvatar from '~/core/components/Avatar'; - -export const Avatar = styled(UIAvatar)` - margin-right: 8px; -`; - -export const ReplyContainer = styled.div` - display: flex; - padding: 10px 12px 10px 16px; - align-items: center; - justify-content: space-between; - gap: 12px; - background: ${({ theme }) => theme.palette.base.shade4}; - transform: translateY(100%); - transition: transform 0.5s ease-in-out; /* Adjust the duration and timing function as needed */ -`; - -export const ReplyingToText = styled.span` - ${({ theme }) => theme.typography.body}; - color: ${({ theme }) => theme.palette.base.shade2}; -`; - -export const ReplyingToUsername = styled.span` - ${({ theme }) => theme.typography.bodyBold}; - color: ${({ theme }) => theme.palette.base.shade2}; -`; - -export const AnimatedReplyContainer = styled(ReplyContainer)` - transform: translateY(0%); -`; - -export const CommentComposeBarContainer = styled.div` - width: 100%; - padding: 1rem; - background: ${({ theme }) => theme.palette.system.background}; - display: flex; - align-items: center; -`; - -export const CommentComposeBarInput = styled(InputText).attrs<{ rows?: number; maxRows?: number }>({ - rows: 1, - maxRows: 15, -})` - outline: none; - flex-grow: 1; - font: inherit; - font-size: 14px; - resize: vertical; - border-radius: 1.25rem; - color: ${({ theme }) => theme.palette.base.shade2}; - background-color: ${({ theme }) => theme.palette.base.shade4}; - border-radius: 20px; -`; - -export const AddCommentButton = styled(SecondaryButton)` - color: ${({ theme }) => theme.palette.primary.main} !important; - cursor: pointer !important; - padding: 0.625rem; - margin-left: 0.625rem; -`; diff --git a/src/v4/social/internal-components/CommentList/CommentList.module.css b/src/v4/social/internal-components/CommentList/CommentList.module.css new file mode 100644 index 000000000..1b8bce01b --- /dev/null +++ b/src/v4/social/internal-components/CommentList/CommentList.module.css @@ -0,0 +1,28 @@ +.commentListContainer { + max-height: calc(100vh - 16rem); + overflow-y: auto; + overflow: hidden; +} + +.tabIcon { + fill: var(--asc-color-base-shade2); + height: 1rem; + width: 1rem; +} + +.tabIconContainer { + display: flex; + margin-right: 8px; +} + +.noCommentsContainer { + font-size: var(--asc-text-font-size-md); + font-weight: var(--asc-text-font-weight-normal); + line-height: var(--asc-line-height-lg); + color: var(--asc-color-base-shade2); + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; +} diff --git a/src/v4/social/internal-components/CommentList/CommentList.tsx b/src/v4/social/internal-components/CommentList/CommentList.tsx index e01740ac8..efa7266ca 100644 --- a/src/v4/social/internal-components/CommentList/CommentList.tsx +++ b/src/v4/social/internal-components/CommentList/CommentList.tsx @@ -1,29 +1,21 @@ import React, { memo, useState } from 'react'; import { useIntl } from 'react-intl'; - import useCommentsCollection from '~/social/hooks/collections/useCommentsCollection'; -import LoadMoreWrapper from '~/social/components/LoadMoreWrapper'; -import { - NoCommentsContainer, - TabIcon, - TabIconContainer, -} from '~/social/components/CommentList/styles'; -import { MobileSheet } from '../Comment/styles'; -import Comment from '../Comment'; -import { ReactionList } from '../../components'; +import { Comment } from '../Comment'; +import styles from './CommentList.module.css'; +import { LoadMoreWrapper } from '~/v4/core/components/LoadMoreWrapper'; +import { ExpandIcon } from '~/v4/social/icons'; interface CommentListProps { parentId?: string; referenceId?: string; referenceType: Amity.CommentReferenceType; - // filterByParentId?: boolean; readonly?: boolean; isExpanded?: boolean; limit?: number; onClickReply?: (comment: Amity.Comment) => void; style?: React.CSSProperties; - onClickReaction?: (commentId: string) => void; shouldAllowInteraction?: boolean; } @@ -32,68 +24,45 @@ export const CommentList = ({ referenceId, referenceType, limit = 5, - // TODO: breaking change - // filterByParentId = false, readonly = false, isExpanded = true, onClickReply, style, shouldAllowInteraction, }: CommentListProps) => { - const [selectedCommentId, setSelectedCommentId] = useState(''); const { comments, hasMore, loadMore } = useCommentsCollection({ parentId, referenceId, referenceType, limit, }); - const { formatMessage } = useIntl(); - const handleReactionClick = (commentId: string) => { - setSelectedCommentId(commentId); - }; - - const handleReactionListClose = () => { - setSelectedCommentId(''); - }; - const isReplyComment = !!parentId; - const commentCount = comments?.length; const loadMoreText = isReplyComment - ? formatMessage( - { - id: 'collapsible.viewMoreReplies', - }, - { count: commentCount }, - ) + ? formatMessage({ id: 'collapsible.viewMoreReplies' }, { count: commentCount }) : formatMessage({ id: 'collapsible.viewMoreComments' }); const prependIcon = isReplyComment ? ( - - - +
+ +
) : null; if (comments?.length === 0 && referenceType === 'story') { return ( - +
{formatMessage({ id: 'storyViewer.commentSheet.empty' })} - +
); } if (comments?.length === 0) return null; return ( -
+
onClickReply?.(comment as Amity.Comment)} style={style} - onClickReactionList={() => handleReactionClick(comment.commentId)} shouldAllowInteraction={shouldAllowInteraction} /> ); })} /> - {selectedCommentId && ( - - - - - - - - - )}
); }; diff --git a/src/v4/social/internal-components/LoadingIndicator/LoadingIndicator.module.css b/src/v4/social/internal-components/LoadingIndicator/LoadingIndicator.module.css new file mode 100644 index 000000000..ad350cfd2 --- /dev/null +++ b/src/v4/social/internal-components/LoadingIndicator/LoadingIndicator.module.css @@ -0,0 +1,20 @@ +.loadingIndicator { + position: absolute; + left: 0; + top: 0; + bottom: 0; + z-index: 1; + opacity: 0.75; + transition: width 0.4s ease; + animation: glow 0.8s alternate infinite linear; + background: var(--asc-color-base-shade4); +} + +@keyframes glow { + from { + opacity: 0.5; + } + to { + opacity: 0.75; + } +} diff --git a/src/v4/social/internal-components/LoadingIndicator/LoadingIndicator.tsx b/src/v4/social/internal-components/LoadingIndicator/LoadingIndicator.tsx new file mode 100644 index 000000000..64d93ce2d --- /dev/null +++ b/src/v4/social/internal-components/LoadingIndicator/LoadingIndicator.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import clsx from 'clsx'; +import styles from './LoadingIndicator.module.css'; + +interface LoadingIndicatorProps { + progress?: number; +} + +export const LoadingIndicator: React.FC = ({ progress }) => { + const indicatorStyle = { + width: `${progress || 0}%`, + }; + + return
; +}; diff --git a/src/v4/social/internal-components/LoadingIndicator/index.ts b/src/v4/social/internal-components/LoadingIndicator/index.ts new file mode 100644 index 000000000..7b559ef06 --- /dev/null +++ b/src/v4/social/internal-components/LoadingIndicator/index.ts @@ -0,0 +1 @@ +export { LoadingIndicator } from './LoadingIndicator'; diff --git a/src/v4/social/internal-components/Playground/Playground.tsx b/src/v4/social/internal-components/Playground/Playground.tsx deleted file mode 100644 index f11e65db1..000000000 --- a/src/v4/social/internal-components/Playground/Playground.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react'; - -export const Playground = () => { - return
Playground
; -}; diff --git a/src/v4/social/internal-components/Playground/index.ts b/src/v4/social/internal-components/Playground/index.ts deleted file mode 100644 index 670f784fa..000000000 --- a/src/v4/social/internal-components/Playground/index.ts +++ /dev/null @@ -1 +0,0 @@ -import { Playground } from './Playground'; diff --git a/src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.module.css b/src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.module.css new file mode 100644 index 000000000..df442ae37 --- /dev/null +++ b/src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.module.css @@ -0,0 +1,44 @@ +.storyCommentComposerBarContainer { + padding: 0 1rem; + } + + .disabledCommentComposerBarContainer { + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; + padding: 0.625rem 1rem; + border-top: 1px solid #e3e4e8; + color: var(--asc-color-base-shade2); + } + + .replyingBlock { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0.625rem 1rem; + background-color: var(--asc-color-base-shade4); + margin-bottom: 1rem; + } + + .replyingToText { + font-size: var(--asc-text-font-size-sm); + font-weight: var(--asc-text-font-weight-normal); + line-height: var(--asc-line-height-sm); + color: var(--asc-color-base-shade1); + } + + .replyingToUsername { + font-weight: var(--asc-text-font-weight-bold); + } + + .closeButton { + fill: var(--asc-color-base-shade2); + width: 1.25rem; + height: 1.25rem; + cursor: pointer; + } + + .commentComposeBar { + background: red; + } \ No newline at end of file diff --git a/src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx b/src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx index 79b3aecfc..3b3c5878d 100644 --- a/src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx +++ b/src/v4/social/internal-components/StoryCommentComposeBar/StoryCommentComposeBar.tsx @@ -3,10 +3,8 @@ import React from 'react'; import { FormattedMessage, useIntl } from 'react-intl'; import { Mentionees, Metadata } from '~/v4/helpers/utils'; import { Close, Lock2Icon } from '~/icons'; -import { ReplyingBlock } from '../StoryViewer/styles'; -import { ReplyingToText, ReplyingToUsername } from '../CommentComposeBar/styles'; import { CommentComposeBar } from '../CommentComposeBar'; -import { StoryDisabledCommentComposerBarContainer } from './styles'; +import styles from './StoryCommentComposeBar.module.css'; interface StoryCommentComposeBarProps { communityId: string; @@ -16,7 +14,6 @@ interface StoryCommentComposeBarProps { shouldAllowCreation?: boolean; replyTo?: Amity.Comment | null; onCancelReply?: () => void; - referenceType?: string; referenceId?: string; style?: React.CSSProperties; } @@ -28,11 +25,10 @@ export const StoryCommentComposeBar = ({ isReplying, replyTo, onCancelReply, - referenceType, referenceId, - style, }: StoryCommentComposeBarProps) => { const { formatMessage } = useIntl(); + const handleAddComment = async ( commentText: string, mentionees: Mentionees, @@ -57,9 +53,7 @@ export const StoryCommentComposeBar = ({ await CommentRepository.createComment({ referenceType: replyTo?.referenceType as Amity.CommentReferenceType, referenceId: replyTo?.referenceId as string, - data: { - text: replyCommentText, - }, + data: { text: replyCommentText }, parentId: replyTo?.commentId, metadata, mentionees: mentionees as Amity.UserMention[], @@ -70,20 +64,18 @@ export const StoryCommentComposeBar = ({ return ( <> {isReplying && ( - - +
+
{' '} - {replyTo?.userId} - - - + {replyTo?.userId} +
+ +
)} - {!isReplying ? ( handleAddComment(text, mentionees, metadata)} - style={style} /> ) : ( )} @@ -102,9 +93,10 @@ export const StoryCommentComposeBar = ({ if (isJoined && shouldAllowCreation) { return ( - - {formatMessage({ id: 'storyViewer.commentSheet.disabled' })} - +
+ + {formatMessage({ id: 'storyViewer.commentSheet.disabled' })} +
); } diff --git a/src/v4/social/internal-components/StoryCommentComposeBar/styles.tsx b/src/v4/social/internal-components/StoryCommentComposeBar/styles.tsx deleted file mode 100644 index ae8d01998..000000000 --- a/src/v4/social/internal-components/StoryCommentComposeBar/styles.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import styled from 'styled-components'; -import { Close } from '~/icons'; - -export const StoryCommentComposerBarContainer = styled.div` - padding: 0 1rem; -`; - -export const StoryDisabledCommentComposerBarContainer = styled.div` - ${({ theme }) => theme.typography.body}; - color: ${({ theme }) => theme.palette.base.shade2}; - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; - padding: 0.625rem 1rem; - border-top: 1px solid #e3e4e8; -`; - -export const CloseButton = styled(Close)` - fill: ${({ theme }) => theme.palette.base.shade2}; - width: 20px; - height: 20px; -`; diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx index a56ec0c8a..7372cfdbc 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx @@ -4,30 +4,27 @@ import { Tester } from 'react-insta-stories/dist/interfaces'; import styles from './Renderers.module.css'; import { useNavigation } from '~/social/providers/NavigationProvider'; import useImage from '~/core/hooks/useImage'; + import { checkStoryPermission, formatTimeAgo } from '~/utils'; import useSDK from '~/core/hooks/useSDK'; -import { FormattedMessage, useIntl } from 'react-intl'; +import { useIntl } from 'react-intl'; import { LIKE_REACTION_KEY } from '~/constants'; import Truncate from 'react-truncate-markup'; -import { HyperLinkButtonContainer } from './styles'; import { CustomRenderer } from './types'; -import { BottomSheet } from '~/v4/core/components'; -import { MobileSheet } from '~/v4/core/components/BottomSheet/styles'; -import { - MobileActionSheetContent, - MobileSheetHeader, - StoryActionItem, - StoryActionItemText, -} from '../styles'; + import { CommentTray } from '~/v4/social/components'; import { HyperLink } from '~/v4/social/elements/HyperLink'; import Footer from './Wrappers/Footer'; import Header from './Wrappers/Header'; import { PageTypes } from '~/social/constants'; +import { motion, PanInfo, useAnimationControls } from 'framer-motion'; import useUser from '~/core/hooks/useUser'; +import { BottomSheet } from '~/v4/core/components/BottomSheet'; +import { Typography } from '~/v4/core/components'; +import { Button } from '~/v4/core/components/Button'; export const renderer: CustomRenderer = ({ story, action, config }) => { const { formatMessage } = useIntl(); @@ -63,7 +60,7 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { imageSize: 'small', }); - const user = useUser(); + const user = useUser(client?.userId); const heading =
{community?.displayName}
; const subheading = @@ -103,6 +100,37 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { const targetRootId = 'asc-uikit-stories-viewer'; + const controls = useAnimationControls(); + + const handleSwipeDown = () => { + controls + .start({ + y: '100%', + transition: { duration: 0.3, ease: 'easeOut' }, + }) + .then(() => { + if (page.type === PageTypes.ViewStory && page.storyType === 'globalFeed') { + onChangePage(PageTypes.NewsFeed); + } else { + onClickCommunity(community?.communityId as string); + } + }); + }; + + const handleDragStart = () => { + action('pause', true); + }; + + const handleDragEnd = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => { + if (info.offset.y > 100) { + handleSwipeDown(); + } else { + controls.start({ y: 0, transition: { duration: 0.3, ease: 'easeOut' } }).then(() => { + action('play', true); + }); + } + }; + useEffect(() => { if (isPaused || isOpenBottomSheet || isOpenCommentSheet) { action('pause', true); @@ -133,7 +161,16 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { }, []); return ( -
+
{ }} addStoryButton={addStoryButton} /> + { onLoad={imageLoaded} alt="Story Image" /> + {!loaded && (
{loader ||
loading...
}
)} + - - - - {actions?.map((bottomSheetAction) => ( - { - bottomSheetAction.action(); - closeBottomSheet(); - }} - > - {bottomSheetAction.icon} - - {formatMessage({ id: bottomSheetAction.name })} - - - ))} - - - + {actions?.map((bottomSheetAction) => ( + + ))} + - - - - - - - - - + + {story.items?.[0]?.data?.url && ( - +
{ {story.items?.[0]?.data?.customText || story.items?.[0].data.url} - +
)} +
{ onClickComment={openCommentSheet} showImpression={isCreator || haveStoryPermission} /> -
+ ); }; diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Renderers.module.css b/src/v4/social/internal-components/StoryViewer/Renderers/Renderers.module.css index 8f70388ca..27f4f8618 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Renderers.module.css +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Renderers.module.css @@ -1,234 +1,244 @@ .iconButton { - position: absolute; - width: 2rem; - height: 2rem; - background-color: rgba(0, 0, 0, 0.5); - border-radius: 50%; - border: none; - top: 6rem; - left: 1.25rem; - z-index: 9999; - cursor: pointer; - } - - .rendererContainer { - position: relative; - width: 100%; - height: 100%; - } - - .storyVideo { - width: 100%; - height: 100%; - object-fit: contain; - } - - .muteCircleIcon { - width: 100%; - height: 100%; - } - - .unmuteCircleIcon { - width: 100%; - height: 100%; - } - - .loadingOverlay { - position: absolute; - left: 0; - top: 0; - background: rgba(0, 0, 0, 0.9); - z-index: 9; - display: flex; - justify-content: center; - align-items: center; - color: #ccc; - } - - .storyImage { - width: auto; - max-width: 100%; - max-height: 100%; - margin: auto; - } - - .playStoryButton { - color: #ffffff; - cursor: pointer; - } - - .pauseStoryButton { - color: #ffffff; - cursor: pointer; - } - - .closeButton { - color: #ffffff; - width: 1.25rem; - height: 1.25rem; - cursor: pointer; - } - - .verifiedBadge { - color: #ffffff; - } - - .dotsButton { - width: 1.5rem; - height: 1.5rem; - cursor: pointer; - color: #ffffff; - } - - .viewStoryInfoContainer { - display: flex; - flex-direction: column; - justify-content: flex-start; - width: 100%; - } - - .viewStoryCompostBarContainer { - width: 100%; - display: flex; - position: absolute; - justify-content: space-between; - align-items: center; - height: 3.5rem; - padding: 0.75rem; - background-color: #000; - bottom: 0; - } - - .viewStoryCompostBarViewIconContainer { - display: flex; - align-items: center; - justify-content: space-between; - color: #fff; - gap: 0.25rem; - } - - .viewStoryCompostBarEngagementContainer { - display: flex; - align-items: center; - justify-content: space-between; - color: #fff; - gap: 0.75rem; - } - - .viewStoryCompostBarEngagementIconContainer { - display: flex; - align-items: center; - justify-content: space-between; - color: #fff; - gap: 0.25rem; - border-radius: 50%; - padding: 0.5rem 0.625rem; - background-color: #292b32; - } - - .storyContent { - flex: 1; - } - - .header { - height: 5rem; - padding: 0.75rem 1rem 0.625rem 1rem; - } - - .viewStoryContainer { - position: relative; - width: 100%; - height: 100%; - display: flex; - flex-direction: column; - background-color: black; - } - - .viewStoryHeaderContainer { - z-index: 9999; - position: absolute; - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: column; - padding: 1.5rem 1rem 0.625rem 1rem; - gap: 0.5rem; - } - - .avatarContainer { - position: relative; - width: 2.5rem; - height: 2.5rem; - border-radius: 50%; - flex-shrink: 0; - } - - .addStoryButton { - position: absolute; - bottom: 0; - right: 0; - } - - .addStoryButton:hover { - cursor: pointer; - } - - .viewStoryHeaderListActionsContainer { - display: flex; - gap: 1.25rem; - justify-content: flex-end; - align-items: center; - } - - .viewStoryHeadingInfoContainer { - display: flex; - justify-content: space-between; - width: 100%; - gap: 0.75rem; - align-items: center; - } - - .viewStoryHeading { - cursor: pointer; - display: flex; - gap: 0.25rem; - color: #fff; - font-size: 0.938rem; - font-style: normal; - font-weight: 600; - line-height: 1.25rem; - letter-spacing: -0.24px; - margin-right: 0.25rem; - align-items: center; - } - - .viewStoryHeadingTitle { - width: auto; - max-width: 11.688rem; - } - - .viewStorySubHeading { - display: inline-flex; - gap: 0.25rem; - margin-bottom: 0.25rem; - color: #fff; - font-size: 0.813rem; - font-style: normal; - font-weight: 400; - line-height: 1.25rem; - letter-spacing: -0.1px; - } - - .story { - display: flex; - position: relative; - overflow: hidden; - } - - .storyContent { - width: auto; - max-width: 100%; - max-height: 100%; - margin: auto; - } \ No newline at end of file + position: absolute; + width: 2rem; + height: 2rem; + background-color: rgba(0, 0, 0, 0.5); + border-radius: 50%; + border: none; + top: 6rem; + left: 1.25rem; + z-index: 9999; + cursor: pointer; +} + +.rendererContainer { + position: relative; + width: 100%; + height: 100%; +} + +.storyVideo { + width: 100%; + height: 100%; + object-fit: contain; +} + +.muteCircleIcon { + width: 100%; + height: 100%; +} + +.unmuteCircleIcon { + width: 100%; + height: 100%; +} + +.loadingOverlay { + position: absolute; + left: 0; + top: 0; + background: rgba(0, 0, 0, 0.9); + z-index: 9; + display: flex; + justify-content: center; + align-items: center; + color: #ccc; +} + +.storyImage { + width: auto; + max-width: 100%; + max-height: 100%; + margin: auto; +} + +.playStoryButton { + color: #ffffff; + cursor: pointer; +} + +.pauseStoryButton { + color: #ffffff; + cursor: pointer; +} + +.closeButton { + color: #ffffff; + width: 1.25rem; + height: 1.25rem; + cursor: pointer; +} + +.verifiedBadge { + color: #ffffff; +} + +.dotsButton { + width: 1.5rem; + height: 1.5rem; + cursor: pointer; + color: #ffffff; +} + +.viewStoryInfoContainer { + display: flex; + flex-direction: column; + justify-content: flex-start; + width: 100%; +} + +.viewStoryCompostBarContainer { + width: 100%; + display: flex; + position: absolute; + justify-content: space-between; + align-items: center; + height: 3.5rem; + padding: 0.75rem; + background-color: #000; + bottom: 0; +} + +.viewStoryCompostBarViewIconContainer { + display: flex; + align-items: center; + justify-content: space-between; + color: #fff; + gap: 0.25rem; +} + +.viewStoryCompostBarEngagementContainer { + display: flex; + align-items: center; + justify-content: space-between; + color: #fff; + gap: 0.75rem; +} + +.viewStoryCompostBarEngagementIconContainer { + display: flex; + align-items: center; + justify-content: space-between; + color: #fff; + gap: 0.25rem; + border-radius: 50%; + padding: 0.5rem 0.625rem; + background-color: #292b32; +} + +.storyContent { + flex: 1; +} + +.header { + height: 5rem; + padding: 0.75rem 1rem 0.625rem 1rem; +} + +.viewStoryContainer { + position: relative; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + background-color: black; +} + +.viewStoryHeaderContainer { + z-index: 9999; + position: absolute; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + padding: 1.5rem 1rem 0.625rem 1rem; + gap: 0.5rem; +} + +.avatarContainer { + position: relative; + width: 2.5rem; + height: 2.5rem; + border-radius: 50%; + flex-shrink: 0; +} + +.addStoryButton { + position: absolute; + bottom: 0; + right: 0; +} + +.addStoryButton:hover { + cursor: pointer; +} + +.viewStoryHeaderListActionsContainer { + display: flex; + gap: 1.25rem; + justify-content: flex-end; + align-items: center; +} + +.viewStoryHeadingInfoContainer { + display: flex; + justify-content: space-between; + width: 100%; + gap: 0.75rem; + align-items: center; +} + +.viewStoryHeading { + cursor: pointer; + display: flex; + gap: 0.25rem; + color: #fff; + font-size: 0.938rem; + font-style: normal; + font-weight: 600; + line-height: 1.25rem; + letter-spacing: -0.24px; + margin-right: 0.25rem; + align-items: center; +} + +.viewStoryHeadingTitle { + width: auto; + max-width: 11.688rem; +} + +.viewStorySubHeading { + display: inline-flex; + gap: 0.25rem; + margin-bottom: 0.25rem; + color: #fff; + font-size: 0.813rem; + font-style: normal; + font-weight: 400; + line-height: 1.25rem; + letter-spacing: -0.1px; +} + +.story { + display: flex; + position: relative; + overflow: hidden; +} + +.storyContent { + width: auto; + max-width: 100%; + max-height: 100%; + margin: auto; +} + +.actionButton { + display: inline-flex; + justify-content: flex-start; + text-align: left; + gap: var(--asc-spacing-s1); + border: none; + color: var(--asc-color-base-default); + background-color: var(--asc-color-base-background); +} diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx index 5e9f447f6..cff53dd2a 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx @@ -11,21 +11,18 @@ import useSDK from '~/core/hooks/useSDK'; import { LIKE_REACTION_KEY } from '~/constants'; import Truncate from 'react-truncate-markup'; import { CustomRenderer } from './types'; -import { HyperLinkButtonContainer, LoadingOverlay, RendererContainer, StoryVideo } from './styles'; +import { LoadingOverlay, StoryVideo } from './styles'; import { SpeakerButton } from '~/v4/social/elements'; import Header from './Wrappers/Header'; -import { BottomSheet } from '~/v4/core/components'; -import { MobileSheet } from '~/v4/core/components/BottomSheet/styles'; -import { - MobileActionSheetContent, - MobileSheetHeader, - StoryActionItem, - StoryActionItemText, -} from '../styles'; +import { BottomSheet, Button, Typography } from '~/v4/core/components'; + import { CommentTray } from '~/v4/social/components'; import { HyperLink } from '~/v4/social/elements/HyperLink'; import Footer from './Wrappers/Footer'; import { PageTypes } from '~/social/constants'; +import { motion, PanInfo, useAnimationControls } from 'framer-motion'; + +import rendererStyles from './Renderers.module.css'; import useUser from '~/core/hooks/useUser'; export const renderer: CustomRenderer = ({ story, action, config, messageHandler }) => { @@ -38,7 +35,7 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler const [isOpenCommentSheet, setIsOpenCommentSheet] = useState(false); const { width, height, loader, storyStyles } = config; const { client } = useSDK(); - const user = useUser(client.currentUserId); + const user = useUser(client?.userId); const isLiked = !!(story && story.myReactions && story.myReactions.includes(LIKE_REACTION_KEY)); const totalLikes = story?.reactions[LIKE_REACTION_KEY] || 0; @@ -81,11 +78,12 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler const isCreator = creator?.userId === user?.userId; const computedStyles = { - ...styles.storyContent, + ...storyContentStyles, ...(storyStyles || {}), }; const vid = useRef(null); + const controls = useAnimationControls(); const onWaiting = () => { action('pause', true); @@ -128,6 +126,37 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler const targetRootId = 'asc-uikit-stories-viewer'; + const handleSwipeDown = () => { + controls + .start({ + y: '100%', + transition: { duration: 0.3, ease: 'easeOut' }, + }) + .then(() => { + if (page.type === PageTypes.ViewStory && page.storyType === 'globalFeed') { + onChangePage(PageTypes.NewsFeed); + } else { + onClickCommunity(community?.communityId as string); + } + }); + }; + + const handleDragStart = () => { + setIsPaused(true); + action('pause', true); + }; + + const handleDragEnd = (_event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => { + if (info.offset.y > 100) { + handleSwipeDown(); + } else { + controls.start({ y: 0, transition: { duration: 0.3, ease: 'easeOut' } }).then(() => { + setIsPaused(false); + action('play', true); + }); + } + }; + useEffect(() => { if (vid.current) { if (isPaused || isOpenBottomSheet || isOpenCommentSheet) { @@ -162,7 +191,16 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler }, []); return ( - + - - - - {actions?.map((bottomSheetAction) => ( - { - bottomSheetAction.action(); - closeBottomSheet(); - }} - > - {bottomSheetAction.icon} - - {formatMessage({ id: bottomSheetAction.name })} - - - ))} - - - + {actions?.map((bottomSheetAction) => ( + + ))} - - - - - - - - - - - + {story.items?.[0]?.data?.url && ( - +
{story.items?.[0].data?.customText || story.items?.[0].data.url} - +
)}
- + ); }; -const styles = { - storyContent: { - width: 'auto', - maxWidth: '100%', - maxHeight: '100%', - margin: 'auto', - position: 'relative' as const, - }, - videoContainer: { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - }, +const storyContentStyles = { + width: 'auto', + maxWidth: '100%', + maxHeight: '100%', + margin: 'auto', + position: 'relative' as const, +}; + +const videoContainerStyles = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', }; export const tester: Tester = (story) => { diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/styles.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/styles.tsx index e60ee3683..a6d7e2deb 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/styles.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/styles.tsx @@ -1,5 +1,4 @@ import styled from 'styled-components'; -import { POSITION_BOTTOM } from '~/helpers'; import { PauseIcon, @@ -11,7 +10,6 @@ import { MuteCircle, UnmuteCircle, } from '~/icons'; -import { LinkButtonContainer } from '~/v4/social/pages/DraftsPage/styles'; export const IconButton = styled.button` position: absolute; @@ -26,11 +24,6 @@ export const IconButton = styled.button` cursor: pointer; `; -export const HyperLinkButtonContainer = styled(LinkButtonContainer)` - bottom: 6rem; - z-index: 9999; -`; - export const RendererContainer = styled.div` display: flex; flex-direction: column; diff --git a/src/v4/social/internal-components/VideoPreview/VideoPreview.tsx b/src/v4/social/internal-components/VideoPreview/VideoPreview.tsx new file mode 100644 index 000000000..2449f0334 --- /dev/null +++ b/src/v4/social/internal-components/VideoPreview/VideoPreview.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +type BaseVideoPreviewProps = { + src: string; + mimeType?: string; + mediaFit?: string; +} & React.VideoHTMLAttributes; + +export const BaseVideoPreview = React.forwardRef( + ({ src, mimeType, mediaFit, ...props }, ref) => ( + + ), +); diff --git a/src/v4/social/internal-components/VideoPreview/index.ts b/src/v4/social/internal-components/VideoPreview/index.ts new file mode 100644 index 000000000..442a23464 --- /dev/null +++ b/src/v4/social/internal-components/VideoPreview/index.ts @@ -0,0 +1 @@ +export { BaseVideoPreview } from './VideoPreview'; diff --git a/src/v4/social/pages/Application/sdk.stories.tsx b/src/v4/social/pages/Application/sdk.stories.tsx index 24fd1f577..048b7785b 100644 --- a/src/v4/social/pages/Application/sdk.stories.tsx +++ b/src/v4/social/pages/Application/sdk.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import UiKitApp from '.'; +import UiKitSocialApplication from '.'; export default { title: 'V4/Social', @@ -7,9 +7,9 @@ export default { export const SDKCommunityAppV4 = { render: (props) => { - return ; + return ; }, - name: 'ApplicationV4', + name: 'Application', args: { shouldHideExplore: false, diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.module.css b/src/v4/social/pages/DraftsPage/DraftsPage.module.css index c2783e65d..4fcab54f9 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.module.css +++ b/src/v4/social/pages/DraftsPage/DraftsPage.module.css @@ -64,11 +64,10 @@ .hyperLinkContainer { position: absolute; - background-color: transparent; padding: 1rem; display: flex; justify-content: center; - bottom: 2rem; + bottom: 6rem; left: 0; right: 0; } @@ -80,31 +79,21 @@ background: none; border: none; cursor: pointer; - color: var(--color-white); + color: var(--asc-color-white); font-size: 1.5rem; } -.header { - position: absolute; - display: flex; - align-items: center; - padding: 10px; - background-color: var(--color-white); - top: 0; -} - .progressBar { position: absolute; top: 0; left: 0; right: 0; height: 4px; - background-color: var(--color-gray); } .progressFill { height: 100%; - background-color: var(--color-primary); + background-color: var(--asc-color-primary-default); transition: width 0.1s linear; } @@ -117,12 +106,11 @@ .name { font-size: 16px; font-weight: bold; - color: var(--color-black); + color: var(--asc-color-black); } .description { font-size: 14px; - color: var(--color-gray); } .storyPreview { @@ -144,8 +132,8 @@ right: 0; display: flex; align-items: center; - padding: 10px; - background-color: rgba(0, 0, 0, 0.5); + padding: var(--asc-spacing-s1); + background-color: transparent; color: var(--color-white); } @@ -179,14 +167,6 @@ font-size: 14px; } -.hyperLinkContainer { - position: absolute; - bottom: 20px; - left: 20px; - right: 20px; - text-align: center; -} - .playPauseButton { position: absolute; top: 50%; diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index 9173ef398..486f5dfda 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -11,17 +11,22 @@ import { SubmitHandler } from 'react-hook-form'; import Truncate from 'react-truncate-markup'; import { usePageBehavior } from '~/v4/core/providers/PageBehaviorProvider'; -import { AspectRatioButton, BackButton, HyperLinkButton, ShareStoryButton } from '../../elements'; -import { useStoryContext } from '../../providers/StoryProvider'; -import { StoryVideoPreview } from './styles'; +import { + AspectRatioButton, + BackButton, + HyperLinkButton, + ShareStoryButton, + HyperLink, +} from '~/v4/social/elements'; +import { useStoryContext } from '~/v4/social/providers/StoryProvider'; import { StoryRepository } from '@amityco/ts-sdk'; -import { HyperLink } from '../../elements/HyperLink'; -import { HyperLinkConfig } from '../../components'; +import { HyperLinkConfig } from '~/v4/social/components'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; import { useNotifications } from '~/v4/core/providers/NotificationProvider'; import { useNavigation } from '~/social/providers/NavigationProvider'; import { PageTypes } from '~/social/constants'; +import { BaseVideoPreview } from '../../internal-components/VideoPreview'; type AmityStoryMediaType = { type: 'image'; url: string } | { type: 'video'; url: string }; @@ -239,7 +244,7 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor />
) : mediaType?.type === 'video' ? ( - ` - width: 2rem; - height: 2rem; - border-radius: 50%; - background-color: ${({ backgroundColor }) => backgroundColor}; - border: none; - cursor: pointer; -`; - -export const ActionsContainer = styled.div` - display: flex; - gap: 0.75rem; -`; - -export const LinkButtonContainer = styled.div` - position: absolute; - bottom: 2rem; - left: 50%; - transform: translateX(-50%); -`; - -export const DraftImageContainer = styled.div<{ colors: { hex: string }[] }>` - width: 100%; - height: 100%; - position: relative; - border-radius: 0.75rem; - overflow: hidden; - background: linear-gradient( - 180deg, - ${(props) => props.colors?.[0]?.hex || '#000'} 0%, - ${(props) => props.colors?.[props?.colors?.length - 1]?.hex || '#000'} 100% - ); -`; - -export const DraftImage = styled.img<{ imageMode: 'fit' | 'fill'; colors: { hex: string }[] }>` - width: 100%; - height: 100%; - object-fit: ${(props) => (props?.imageMode === 'fit' ? 'contain' : 'cover')}; -`; - -export const StoryDraftFooter = styled.div` - width: 100%; - position: absolute; - bottom: -50px; - background-color: #000; - display: flex; - justify-content: flex-end; - padding: 0.75rem; - overflow: hidden; -`; - -export const ShareStoryButton = styled.button` - display: inline-flex; - height: 2.5rem; - padding: 0.375rem 0.5rem 0.25rem 0.25rem; - align-items: center; - justify-content: center; - flex-shrink: 0; - border-radius: 1.5rem; - background-color: #fff; - border: none; - color: #292b32; - font-size: 0.938rem; - font-style: normal; - font-weight: 600; - line-height: 1.25rem; - letter-spacing: -0.24px; - cursor: pointer; - gap: 0.5rem; -`; - -export const StoryVideoPreview = styled(VideoPreview)` - background-color: #000; -`; diff --git a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx index 1a22193ba..825226238 100644 --- a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx +++ b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx @@ -180,7 +180,7 @@ export const GlobalFeedStory: React.FC = () => { icon: ( ), diff --git a/src/v4/styles/global.css b/src/v4/styles/global.css index 32b8d9b2e..579508fd3 100644 --- a/src/v4/styles/global.css +++ b/src/v4/styles/global.css @@ -122,48 +122,3 @@ 0px 2px 4px 0px rgba(40, 41, 61, 0.04); } -/* - The [data-theme='light'] attribute selector targets elements with the data-theme attribute set to 'light'. - It is used to define styles specific to the light theme. -*/ -[data-theme='light'] { - --asc-color-base-default: #292b32; - --asc-color-base-shade1: #636878; - --asc-color-base-shade2: #898e9e; - --asc-color-base-shade3: #a5a9b5; - --asc-color-base-shade4: #ebecef; - --asc-color-base-shade5: #f9f9fa; - - --asc-color-base-inverse: #ffffff; - - --asc-color-secondary-default: #292b32; - --asc-color-secondary-shade1: #636878; - --asc-color-secondary-shade2: #898e9e; - --asc-color-secondary-shade3: #a5a9b5; - --asc-color-secondary-shade4: #ebecef; - --asc-color-secondary-shade5: #f9f9fa; -} - -/* - The [data-theme='dark'] attribute selector targets elements with the data-theme attribute set to 'dark'. - It is used to define styles specific to the dark theme. -*/ -[data-theme='dark'] { - --asc-color-base-background: #191919; - - --asc-color-base-inverse: #ffffff; - - --asc-color-base-default: #ebecef; - --asc-color-base-shade1: #a5a9b5; - --asc-color-base-shade2: #6e7487; - --asc-color-base-shade3: #40434e; - --asc-color-base-shade4: #292b32; - --asc-color-base-shade5: #191919; - - --asc-color-secondary-default: #ebecef; - --asc-color-secondary-shade1: #a5a9b5; - --asc-color-secondary-shade2: #6e7487; - --asc-color-secondary-shade3: #40434e; - --asc-color-secondary-shade4: #292b32; - --asc-color-secondary-shade5: #191919; -} \ No newline at end of file From 240f0e54bc3283529f2159a38a8a834700b71917 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Wed, 8 May 2024 10:40:29 +0700 Subject: [PATCH 65/88] fix: ASC-22263 - hyperlink background (#326) * fix: hyperlink background * fix: hyperlink icon color * fix: css (#327) --- .../elements/HyperLink/HyperLink.module.css | 40 +++++++++---------- .../pages/DraftsPage/DraftsPage.module.css | 6 +++ src/v4/social/pages/DraftsPage/DraftsPage.tsx | 1 + 3 files changed, 27 insertions(+), 20 deletions(-) diff --git a/src/v4/social/elements/HyperLink/HyperLink.module.css b/src/v4/social/elements/HyperLink/HyperLink.module.css index 6568d869b..2698895eb 100644 --- a/src/v4/social/elements/HyperLink/HyperLink.module.css +++ b/src/v4/social/elements/HyperLink/HyperLink.module.css @@ -1,21 +1,21 @@ .hyperlink { - border: 1px solid var(--asc-color-base-shade4); - color: var(--asc-color-secondary-default); - background: rgba(255, 255, 255, 0.80); - display: inline-flex; - align-items: center; - padding: var(--asc-spacing-s2) var(--asc-spacing-m1) var(--asc-spacing-s2) var(--asc-spacing-s2); - border-radius: var(--asc-border-radius-xxl); - gap: var(--asc-spacing-s1); - font-size: 0.9375rem; - font-style: normal; - font-weight: 600; - line-height: 1.25rem; - letter-spacing: -0.015rem; - } - - .hyperlinkIcon { - fill: var(--asc-color-primary-default); - width: 1.5rem; - height: 1.5rem; - } \ No newline at end of file + border: 1px solid var(--asc-color-base-shade4); + color: var(--asc-color-secondary-default); + background: rgba(255, 255, 255, 0.2); + display: inline-flex; + align-items: center; + padding: var(--asc-spacing-s2) var(--asc-spacing-m1) var(--asc-spacing-s2) var(--asc-spacing-s2); + border-radius: var(--asc-border-radius-xxl); + gap: var(--asc-spacing-s1); + font-size: 0.9375rem; + font-style: normal; + font-weight: 600; + line-height: 1.25rem; + letter-spacing: -0.015rem; +} + +.hyperlinkIcon { + color: var(--asc-color-primary-default); + width: 1.5rem; + height: 1.5rem; +} diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.module.css b/src/v4/social/pages/DraftsPage/DraftsPage.module.css index 4fcab54f9..280baf472 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.module.css +++ b/src/v4/social/pages/DraftsPage/DraftsPage.module.css @@ -62,6 +62,12 @@ width: 100%; } +.videoPreview { + width: 100%; + height: 100%; + background-color: var(--asc-color-black); +} + .hyperLinkContainer { position: absolute; padding: 1rem; diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index 486f5dfda..fff95e43f 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -245,6 +245,7 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor
) : mediaType?.type === 'video' ? ( Date: Thu, 9 May 2024 14:39:37 +0700 Subject: [PATCH 66/88] fix: ASC-22263 - hyperlink doesn't show in view story page (#328) * fix: hyperlink background * fix: hyperlink icon color * fix: css (#327) * fix: story * fix: css --- .../StoryViewer/Renderers/Image.tsx | 2 +- .../Renderers/Renderers.module.css | 80 +++++++++++-------- .../StoryViewer/Renderers/Video.tsx | 2 +- 3 files changed, 50 insertions(+), 34 deletions(-) diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx index 7372cfdbc..7c7c314f3 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx @@ -251,7 +251,7 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { {story.items?.[0]?.data?.url && ( -
+
{story.items?.[0]?.data?.url && ( -
+
Date: Fri, 10 May 2024 13:59:45 +0700 Subject: [PATCH 67/88] fix: ASC-22264 - reply comment margin (#329) * fix: hyperlink background * fix: hyperlink icon color * fix: css * fix: add scroller * fix: comment --- .../BottomSheet/BottomSheet.module.css | 14 ++++---- .../components/BottomSheet/BottomSheet.tsx | 15 ++++++-- .../Comment/Comment.module.css | 34 +++++++++++-------- .../Comment/CommentText.module.css | 3 -- .../Comment/UIComment.module.css | 25 ++++++-------- .../internal-components/Comment/UIComment.tsx | 10 +++--- .../internal-components/Comment/index.tsx | 4 ++- .../CommentList/CommentList.module.css | 1 + .../CommentList/CommentList.tsx | 4 +-- .../Renderers/Renderers.module.css | 3 +- src/v4/social/pages/DraftsPage/DraftsPage.tsx | 4 +-- 11 files changed, 61 insertions(+), 56 deletions(-) diff --git a/src/v4/core/components/BottomSheet/BottomSheet.module.css b/src/v4/core/components/BottomSheet/BottomSheet.module.css index 50dfbf72a..747db51f9 100644 --- a/src/v4/core/components/BottomSheet/BottomSheet.module.css +++ b/src/v4/core/components/BottomSheet/BottomSheet.module.css @@ -5,9 +5,6 @@ which have higher specificity. */ .react-modal-sheet-container { - border-top-left-radius: var(--asc-spacing-m2) !important; - border-top-right-radius: var(--asc-spacing-m2) !important; - background-color: var(--asc-color-base-background); color: var(--asc-color-base-default); } @@ -16,12 +13,15 @@ which have higher specificity. } .react-modal-sheet-header { + display: flex; + height: 2.5rem; + padding-bottom: 1rem; + justify-content: center; + align-items: center; + gap: 0.5rem; + align-self: stretch; background-color: var(--asc-color-base-background); color: var(--asc-color-base-default); - text-align: center; - border-bottom: 1px solid var(--asc-color-base-shade4); - padding-bottom: 0.5rem; - background: var(--asc-color-base-background); } .react-modal-sheet-content { diff --git a/src/v4/core/components/BottomSheet/BottomSheet.tsx b/src/v4/core/components/BottomSheet/BottomSheet.tsx index 0ddd38cc6..3eadd5e1b 100644 --- a/src/v4/core/components/BottomSheet/BottomSheet.tsx +++ b/src/v4/core/components/BottomSheet/BottomSheet.tsx @@ -19,10 +19,17 @@ interface BottomSheetProps { export const BottomSheet = ({ children, headerTitle, ...props }: BottomSheetProps) => { return ( - + {headerTitle && ( @@ -30,7 +37,9 @@ export const BottomSheet = ({ children, headerTitle, ...props }: BottomSheetProp {headerTitle} )} - {children} + + {children} + diff --git a/src/v4/social/internal-components/Comment/Comment.module.css b/src/v4/social/internal-components/Comment/Comment.module.css index c847277c9..327387304 100644 --- a/src/v4/social/internal-components/Comment/Comment.module.css +++ b/src/v4/social/internal-components/Comment/Comment.module.css @@ -1,17 +1,21 @@ .actionButton { - display: inline-flex; - justify-content: flex-start; - align-items: center; - gap: 0.25rem; - border: none; - color: var(--asc-color-base-default); - background: var(--asc-color-base-background); - text-align: start; - } + display: inline-flex; + justify-content: flex-start; + align-items: center; + gap: 0.25rem; + border: none; + color: var(--asc-color-base-default); + background: var(--asc-color-base-background); + text-align: start; +} - .actionIcon { - width: 1.25rem; - height: 1.25rem; - fill: var(--asc-color-base-default); - color: var(--asc-color-base-default); - } \ No newline at end of file +.actionIcon { + width: 1.25rem; + height: 1.25rem; + fill: var(--asc-color-base-default); + color: var(--asc-color-base-default); +} + +.replyContainer { + margin-left: 3.25rem; +} diff --git a/src/v4/social/internal-components/Comment/CommentText.module.css b/src/v4/social/internal-components/Comment/CommentText.module.css index f56f9b394..abcd23fcf 100644 --- a/src/v4/social/internal-components/Comment/CommentText.module.css +++ b/src/v4/social/internal-components/Comment/CommentText.module.css @@ -7,9 +7,6 @@ padding: 0.75rem; display: inline-block; white-space: pre-wrap; - font-size: var(--asc-text-font-size-md); - font-weight: var(--asc-text-font-weight-normal); - line-height: var(--asc-line-height-lg); } .readMoreButton { diff --git a/src/v4/social/internal-components/Comment/UIComment.module.css b/src/v4/social/internal-components/Comment/UIComment.module.css index 6e73ad1e3..d5f70fc13 100644 --- a/src/v4/social/internal-components/Comment/UIComment.module.css +++ b/src/v4/social/internal-components/Comment/UIComment.module.css @@ -8,11 +8,6 @@ width: 100%; } -.banIcon { - margin-left: 0.265rem; - margin-top: 1px; -} - .commentDate { color: var(--asc-color-base-shade2); } @@ -47,13 +42,11 @@ } .interactionBar { - width: 100%; display: flex; - justify-content: space-between; - width: 100%; - gap: 0.5rem; - align-items: center; - padding: 0.125rem 0; + padding: 0.25rem 1rem 0.75rem 0rem; + align-items: flex-start; + gap: 12.9375rem; + align-self: stretch; } .commentEditContainer { @@ -136,13 +129,15 @@ } .content { - width: 100%; + display: inline-flex; + flex-direction: column; + gap: 0.25rem; } .commentHeader { - display: flex; - justify-content: space-between; + display: inline-flex; + justify-content: flex-start; align-items: center; - gap: 0.5rem; + gap: 0.125rem; color: var(--asc-color-base-default); } diff --git a/src/v4/social/internal-components/Comment/UIComment.tsx b/src/v4/social/internal-components/Comment/UIComment.tsx index 4a81267f4..8ded27d94 100644 --- a/src/v4/social/internal-components/Comment/UIComment.tsx +++ b/src/v4/social/internal-components/Comment/UIComment.tsx @@ -1,11 +1,10 @@ import React from 'react'; -import Truncate from 'react-truncate-markup'; + import { FormattedMessage } from 'react-intl'; import CommentText from './CommentText'; import { backgroundImage as UserImage } from '~/icons/User'; -import BanIcon from '~/icons/Ban'; import { Mentioned, Metadata } from '~/v4/helpers/utils'; import { QueryMentioneesFnType } from '~/v4/chat/hooks/useMention'; @@ -110,9 +109,6 @@ const UIComment = ({
{authorName} - - <>{isBanned && } -
{isEditing ? ( @@ -144,7 +140,9 @@ const UIComment = ({
) : ( - +
+ +
)} {!isEditing && (canLike || canReply || options.length > 0) && ( diff --git a/src/v4/social/internal-components/Comment/index.tsx b/src/v4/social/internal-components/Comment/index.tsx index f22158cc8..518878018 100644 --- a/src/v4/social/internal-components/Comment/index.tsx +++ b/src/v4/social/internal-components/Comment/index.tsx @@ -264,7 +264,9 @@ export const Comment = ({ commentId, readonly, onClickReply }: CommentProps) => return ( <> {isReplyComment ? ( -
{renderedComment}
+
+ {renderedComment} +
) : (
{renderedComment}
diff --git a/src/v4/social/internal-components/CommentList/CommentList.module.css b/src/v4/social/internal-components/CommentList/CommentList.module.css index 1b8bce01b..b84f93ef2 100644 --- a/src/v4/social/internal-components/CommentList/CommentList.module.css +++ b/src/v4/social/internal-components/CommentList/CommentList.module.css @@ -2,6 +2,7 @@ max-height: calc(100vh - 16rem); overflow-y: auto; overflow: hidden; + margin-bottom: 1rem; } .tabIcon { diff --git a/src/v4/social/internal-components/CommentList/CommentList.tsx b/src/v4/social/internal-components/CommentList/CommentList.tsx index efa7266ca..f3024056e 100644 --- a/src/v4/social/internal-components/CommentList/CommentList.tsx +++ b/src/v4/social/internal-components/CommentList/CommentList.tsx @@ -1,4 +1,4 @@ -import React, { memo, useState } from 'react'; +import React, { memo } from 'react'; import { useIntl } from 'react-intl'; import useCommentsCollection from '~/social/hooks/collections/useCommentsCollection'; @@ -27,7 +27,6 @@ export const CommentList = ({ readonly = false, isExpanded = true, onClickReply, - style, shouldAllowInteraction, }: CommentListProps) => { const { comments, hasMore, loadMore } = useCommentsCollection({ @@ -78,7 +77,6 @@ export const CommentList = ({ commentId={comment.commentId} readonly={readonly} onClickReply={() => onClickReply?.(comment as Amity.Comment)} - style={style} shouldAllowInteraction={shouldAllowInteraction} /> ); diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Renderers.module.css b/src/v4/social/internal-components/StoryViewer/Renderers/Renderers.module.css index 775b6c148..9cc7a4d32 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Renderers.module.css +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Renderers.module.css @@ -250,7 +250,8 @@ } .actionButton { - display: inline-flex; + width: 100%; + display: flex; justify-content: flex-start; text-align: left; gap: var(--asc-spacing-s1); diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index fff95e43f..6e1f562fa 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -227,8 +227,8 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor style={{ background: `linear-gradient( 180deg, - ${colors?.length > 0 ? colors[0].hex : 'var(--color-black)'} 0%, - ${colors?.length > 0 ? colors[colors?.length - 1].hex : 'var(--color-black)'} 100% + ${colors?.length > 0 ? colors[0].hex : 'var(--asc-color-black)'} 0%, + ${colors?.length > 0 ? colors[colors?.length - 1].hex : 'var(--asc-color-black)'} 100% )`, }} > From bbcd949c6dd9cfc6deb42a8f17678afa02d4a0e6 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Mon, 13 May 2024 15:42:31 +0700 Subject: [PATCH 68/88] fix: ASC-21792 - comment list infinite scroll (#330) * fix: hyperlink background * fix: hyperlink icon color * fix: css * fix: add scroller * fix: comment * fix: scroll * fix: comment list * fix: reaction list * fix: comment date css shrink * fix: type * fix: css * fix: color * fix: comment scroll * fix: comment list * fix: use intersection observer instead * fix: padding --- .../BottomSheet/BottomSheet.module.css | 3 +- .../components/BottomSheet/BottomSheet.tsx | 6 +- .../LoadMoreWrapper.module.css | 7 ++ .../LoadMoreWrapper/LoadMoreWrapper.tsx | 53 +++++---- .../HyperLinkConfig.module.css | 5 +- .../ReactionList/ReactionList.module.css | 58 ++++++---- .../components/ReactionList/ReactionList.tsx | 1 - .../social/components/ReactionList/styles.tsx | 104 ------------------ .../Comment/UIComment.module.css | 8 +- .../internal-components/Comment/index.tsx | 6 +- .../CommentList/CommentList.tsx | 48 ++++---- 11 files changed, 114 insertions(+), 185 deletions(-) delete mode 100644 src/v4/social/components/ReactionList/styles.tsx diff --git a/src/v4/core/components/BottomSheet/BottomSheet.module.css b/src/v4/core/components/BottomSheet/BottomSheet.module.css index 747db51f9..b258fba24 100644 --- a/src/v4/core/components/BottomSheet/BottomSheet.module.css +++ b/src/v4/core/components/BottomSheet/BottomSheet.module.css @@ -14,7 +14,6 @@ which have higher specificity. .react-modal-sheet-header { display: flex; - height: 2.5rem; padding-bottom: 1rem; justify-content: center; align-items: center; @@ -22,9 +21,11 @@ which have higher specificity. align-self: stretch; background-color: var(--asc-color-base-background); color: var(--asc-color-base-default); + border-bottom: 1px solid var(--asc-color-base-shade4); } .react-modal-sheet-content { + display: flex; background-color: var(--asc-color-base-background); padding: 1rem; color: var(--asc-color-base-default); diff --git a/src/v4/core/components/BottomSheet/BottomSheet.tsx b/src/v4/core/components/BottomSheet/BottomSheet.tsx index 3eadd5e1b..d74a40450 100644 --- a/src/v4/core/components/BottomSheet/BottomSheet.tsx +++ b/src/v4/core/components/BottomSheet/BottomSheet.tsx @@ -1,7 +1,7 @@ import React from 'react'; + import Sheet from 'react-modal-sheet'; import { Typography } from '~/v4/core/components/Typography'; - import styles from './BottomSheet.module.css'; interface BottomSheetProps { @@ -37,9 +37,7 @@ export const BottomSheet = ({ children, headerTitle, ...props }: BottomSheetProp {headerTitle} )} - - {children} - + {children} diff --git a/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.module.css b/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.module.css index cc3eb1311..a766c66c0 100644 --- a/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.module.css +++ b/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.module.css @@ -41,3 +41,10 @@ .chevronDownIcon { margin-left: 0.3125rem; } + +.content { + display: flex; + flex-direction: column; + flex: 1; + overflow-y: auto; +} diff --git a/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.tsx b/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.tsx index fbb7328f3..175a74e1d 100644 --- a/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.tsx +++ b/src/v4/core/components/LoadMoreWrapper/LoadMoreWrapper.tsx @@ -1,15 +1,14 @@ -import React, { useState, useEffect, ReactNode } from 'react'; +import React, { useState, useEffect, ReactNode, useRef } from 'react'; import { useIntl } from 'react-intl'; import clsx from 'clsx'; import { Button } from '~/v4/core/components'; import styles from './LoadMoreWrapper.module.css'; -import { ChevronDownIcon } from '~/v4/social/icons'; interface LoadMoreWrapperProps { - hasMore?: boolean; - loadMore?: () => void; + hasMore: boolean; + loadMore: () => void; text?: string; - contentSlot: ReactNode; + contentSlot: React.JSX.Element[]; className?: string; prependIcon?: ReactNode; appendIcon?: ReactNode; @@ -23,30 +22,44 @@ export const LoadMoreWrapper = ({ contentSlot, className = '', prependIcon = null, - appendIcon = , + appendIcon, isExpanded = true, }: LoadMoreWrapperProps) => { const { formatMessage } = useIntl(); const [expanded, setExpanded] = useState(isExpanded); + const observerRef = useRef(null); - useEffect(() => setExpanded(isExpanded), [isExpanded]); + useEffect(() => { + setExpanded(isExpanded); + }, [isExpanded]); + + useEffect(() => { + const observer = new IntersectionObserver( + (entries) => { + if (entries[0].isIntersecting && hasMore) { + loadMore(); + } + }, + { threshold: 1 }, + ); + + if (observerRef.current) { + observer.observe(observerRef.current); + } + + return () => { + if (observerRef.current) { + observer.unobserve(observerRef.current); + } + }; + }, [hasMore, loadMore]); if (expanded) { return ( - <> +
{contentSlot} - {hasMore && ( - - )} - +
+
); } diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css index 5e40478f4..5e5e68d50 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.module.css @@ -76,7 +76,7 @@ .styledSecondaryButton { border: none; color: var(--asc-color-base-default); - background: var(--asc-color-base-background) + background: var(--asc-color-base-background); } .removeIcon { @@ -103,4 +103,5 @@ height: 0.0625rem; align-self: stretch; background-color: var(--asc-color-base-shade4); -} \ No newline at end of file + margin: 1rem 0; +} diff --git a/src/v4/social/components/ReactionList/ReactionList.module.css b/src/v4/social/components/ReactionList/ReactionList.module.css index cf31c26be..484874fd7 100644 --- a/src/v4/social/components/ReactionList/ReactionList.module.css +++ b/src/v4/social/components/ReactionList/ReactionList.module.css @@ -6,57 +6,67 @@ .tabList { display: flex; - gap: var(--asc-spacing-s1); - border-bottom: 1px solid var(--asc-color-base-shade4); - padding-bottom: var(--asc-spacing-s1); + justify-content: flex-start; + align-items: center; + border-bottom: 1px solid var(--asc-color-neutral-shade2); + margin-bottom: 1rem; } .tabItem { cursor: pointer; - padding: var(--asc-spacing-xxs2) var(--asc-spacing-s1); - border-radius: var(--asc-border-radius-sm); - background: var(--asc-color-base-background); - color: var(--asc-color-base-shade6); + padding: 0.5rem 1rem; + position: relative; + transition: color 0.3s ease; +} + +.tabItem::after { + content: ''; + position: absolute; + bottom: -1px; + left: 0; + width: 100%; + height: 2px; + background-color: transparent; + transition: background-color 0.3s ease; } .tabItem.active { - background-color: var(--asc-color-base-shade4); color: var(--asc-color-primary-default); } +.tabItem.active::after { + background-color: var(--asc-color-primary-default); +} + .reactionEmoji { display: flex; align-items: center; - gap: var(--asc-spacing-s1); + gap: 0.5rem; } .tabCount { - font-size: 0.8rem; - background: var(--asc-color-base-background); - color: var(--asc-color-base-shade1); - padding: 0.1rem 0.3rem; - border-radius: var(--asc-border-radius-sm); + color: var(--asc-color-base-shade2); + transition: color 0.3s ease; +} + +.tabItem.active .tabCount { + color: var(--asc-color-primary-default); } .userList { - display: flex; - flex-wrap: wrap; - gap: var(--asc-spacing-s1); + display: grid; + grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); + gap: 1rem; } .userItem { display: flex; align-items: center; - gap: var(--asc-spacing-s1); - background: var(--asc-color-base-background); - padding: var(--asc-spacing-s1); - border-radius: var(--asc-border-radius-sm); - width: 100%; + gap: 0.5rem; } .userDetailsContainer { display: flex; align-items: center; - gap: var(--asc-spacing-s1); - color: var(--asc-color-base-default); + gap: 0.5rem; } diff --git a/src/v4/social/components/ReactionList/ReactionList.tsx b/src/v4/social/components/ReactionList/ReactionList.tsx index c653c3b66..af25bb11f 100644 --- a/src/v4/social/components/ReactionList/ReactionList.tsx +++ b/src/v4/social/components/ReactionList/ReactionList.tsx @@ -1,5 +1,4 @@ import React, { Fragment, useState } from 'react'; - import { FireIcon, HeartIcon, LikedIcon } from '~/icons'; import styles from './ReactionList.module.css'; import { useReactionsCollection } from '~/v4/social/hooks/collections/useReactionsCollection'; diff --git a/src/v4/social/components/ReactionList/styles.tsx b/src/v4/social/components/ReactionList/styles.tsx deleted file mode 100644 index d5a90df78..000000000 --- a/src/v4/social/components/ReactionList/styles.tsx +++ /dev/null @@ -1,104 +0,0 @@ -import styled from 'styled-components'; - -export const ReactionListContainer = styled.div` - border-radius: 0.25rem; - overflow: hidden; - max-height: 100%; - width: 100%; - display: flex; - flex-direction: column; -`; - -export const TabList = styled.ul` - display: flex; - list-style-type: none; - padding: 0; - margin: 0; - overflow-x: auto; - white-space: nowrap; - width: 100%; - height: 3rem; - border-bottom: 0.0625rem solid ${({ theme }) => theme.v4.colors.base.shade4}; - gap: 1.25rem; - - &::-webkit-scrollbar { - display: none; - } - -ms-overflow-style: none; - scrollbar-width: none; -`; - -export const TabItem = styled.li<{ active: boolean }>` - display: flex; - align-items: center; - justify-content: center; - padding: 0rem 0.25rem; - cursor: pointer; - border-radius: 0.25rem; - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - border-bottom: 0.125rem solid transparent; - flex-shrink: 0; - - &:hover { - background-color: ${({ theme }) => theme.v4.colors.base.shade4}; - } - - ${({ active, theme }) => - active && - ` - border-bottom-color: ${theme.v4.colors.primary.default}; - color: ${theme.v4.colors.primary.default}; - `} -`; - -export const TabCount = styled.span` - margin-left: 0.25rem; -`; - -export const UserList = styled.ul` - list-style-type: none; - margin: 0; - padding: 0; - overflow-y: auto; - flex: 1; - max-height: calc(100% - 3rem); -`; - -export const UserItem = styled.li` - display: flex; - justify-content: space-between; - gap: 0.5rem; - align-items: center; - margin-bottom: 0.5rem; - padding: 0.5rem; - border-bottom: 0.0625rem solid ${({ theme }) => theme.v4.colors.base.shade4}; - - &:hover { - cursor: pointer; - background-color: ${({ theme }) => theme.v4.colors.base.shade4}; - } -`; - -export const Divider = styled.hr` - border: none; - border-bottom: 0.0625rem solid ${({ theme }) => theme.v4.colors.base.shade4}; - margin: 0.5rem 0; - - &:last-child { - display: none; - } -`; - -export const ReactionEmoji = styled.div` - display: flex; - align-items: center; - justify-content: center; - gap: 0.5rem; -`; - -export const UserDetailsContainer = styled.div` - display: flex; - align-items: center; - gap: 0.5rem; -`; diff --git a/src/v4/social/internal-components/Comment/UIComment.module.css b/src/v4/social/internal-components/Comment/UIComment.module.css index d5f70fc13..879e00e65 100644 --- a/src/v4/social/internal-components/Comment/UIComment.module.css +++ b/src/v4/social/internal-components/Comment/UIComment.module.css @@ -9,6 +9,7 @@ } .commentDate { + flex-shrink: 0; color: var(--asc-color-base-shade2); } @@ -43,10 +44,10 @@ .interactionBar { display: flex; + width: 100%; + justify-content: space-between; padding: 0.25rem 1rem 0.75rem 0rem; - align-items: flex-start; - gap: 12.9375rem; - align-self: stretch; + align-items: center; } .commentEditContainer { @@ -132,6 +133,7 @@ display: inline-flex; flex-direction: column; gap: 0.25rem; + width: 100%; } .commentHeader { diff --git a/src/v4/social/internal-components/Comment/index.tsx b/src/v4/social/internal-components/Comment/index.tsx index 518878018..4f12418fe 100644 --- a/src/v4/social/internal-components/Comment/index.tsx +++ b/src/v4/social/internal-components/Comment/index.tsx @@ -102,7 +102,11 @@ export const Comment = ({ commentId, readonly, onClickReply }: CommentProps) => return toggleFlagComment(); }; - const handleEditComment = async (text: string, mentionees: Mentionees, metadata: Metadata) => + const handleEditComment = async ( + text: string, + mentionees: Amity.UserMention[], + metadata: Metadata, + ) => commentId && CommentRepository.updateComment(commentId, { data: { diff --git a/src/v4/social/internal-components/CommentList/CommentList.tsx b/src/v4/social/internal-components/CommentList/CommentList.tsx index f3024056e..00718965e 100644 --- a/src/v4/social/internal-components/CommentList/CommentList.tsx +++ b/src/v4/social/internal-components/CommentList/CommentList.tsx @@ -1,11 +1,11 @@ import React, { memo } from 'react'; import { useIntl } from 'react-intl'; import useCommentsCollection from '~/social/hooks/collections/useCommentsCollection'; - import { Comment } from '../Comment'; import styles from './CommentList.module.css'; -import { LoadMoreWrapper } from '~/v4/core/components/LoadMoreWrapper'; import { ExpandIcon } from '~/v4/social/icons'; +import { Button } from '~/v4/core/components'; +import { LoadMoreWrapper } from '~/v4/core/components/LoadMoreWrapper/LoadMoreWrapper'; interface CommentListProps { parentId?: string; @@ -35,8 +35,8 @@ export const CommentList = ({ referenceType, limit, }); - const { formatMessage } = useIntl(); + const { formatMessage } = useIntl(); const isReplyComment = !!parentId; const commentCount = comments?.length; @@ -60,29 +60,27 @@ export const CommentList = ({ if (comments?.length === 0) return null; - return ( -
- { - return ( - onClickReply?.(comment as Amity.Comment)} - shouldAllowInteraction={shouldAllowInteraction} - /> - ); - })} + const renderComments = () => { + return comments.map((comment) => ( + onClickReply?.(comment as Amity.Comment)} + shouldAllowInteraction={shouldAllowInteraction} /> -
+ )); + }; + + return ( + ); }; From 3528ce48f847495dda3246ec5a2e7ba9f5cbf002 Mon Sep 17 00:00:00 2001 From: Bonn Date: Mon, 13 May 2024 17:45:38 +0700 Subject: [PATCH 69/88] Release/v4.0.0 beta.4 (#334) * fix: github actions * chore: dropdown instead of free-text * chore: add none option * chore: add none option for pre-release input * fix: add NPM_TOKEN env * chore(release): 4.0.0-beta.4 --------- Co-authored-by: bmo-amity-bot --- .github/workflows/dev.yaml | 2 +- .github/workflows/production.yaml | 30 ++++++++++++++++++++++-------- CHANGELOG.md | 6 ++++++ package.json | 2 +- 4 files changed, 30 insertions(+), 10 deletions(-) diff --git a/.github/workflows/dev.yaml b/.github/workflows/dev.yaml index a361edb96..fc182ba67 100644 --- a/.github/workflows/dev.yaml +++ b/.github/workflows/dev.yaml @@ -40,7 +40,7 @@ jobs: - name: Get pnpm store directory id: pnpm-cache run: | - echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT + echo "pnpm_cache_dir=$(pnpm store path | tr -d '\n')" >> $GITHUB_OUTPUT - uses: actions/cache@v3 name: Setup pnpm cache diff --git a/.github/workflows/production.yaml b/.github/workflows/production.yaml index f55defe2c..63351027c 100644 --- a/.github/workflows/production.yaml +++ b/.github/workflows/production.yaml @@ -4,11 +4,25 @@ on: workflow_dispatch: inputs: release_as: + type: choice description: 'release as' required: false + options: + - none + - major + - minor + - patch pre-release: + type: choice description: 'prerelease' required: false + options: + - none + - alpha + - beta + +env: + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} jobs: publish: @@ -34,7 +48,7 @@ jobs: - name: Get pnpm store directory id: pnpm-cache run: | - echo "pnpm_cache_dir=$(pnpm store path)" >> $GITHUB_OUTPUT + echo "pnpm_cache_dir=$(pnpm store path | tr -d '\n')" >> $GITHUB_OUTPUT - uses: actions/cache@v3 name: Setup pnpm cache @@ -49,31 +63,31 @@ jobs: - name: increase version (patch) run: pnpm standard-version --yes - if: github.event.inputs.release_as == 'patch' && github.event.inputs.pre-release == '' + if: github.event.inputs.release_as == 'patch' && github.event.inputs.pre-release == 'none' - name: increase version (patch) (pre-release) run: pnpm standard-version --yes --release-as patch --prerelease ${{ github.event.inputs.pre-release }} - if: github.event.inputs.release_as == 'patch' && github.event.inputs.pre-release != '' + if: github.event.inputs.release_as == 'patch' && github.event.inputs.pre-release != 'none' - name: increase version (minor) run: pnpm standard-version --yes --release-as minor - if: github.event.inputs.release_as == 'minor' && github.event.inputs.pre-release == '' + if: github.event.inputs.release_as == 'minor' && github.event.inputs.pre-release == 'none' - name: increase version (minor) (pre-release) run: pnpm standard-version --yes --prerelease ${{ github.event.inputs.pre-release }} - if: github.event.inputs.release_as == 'minor' && github.event.inputs.pre-release != '' + if: github.event.inputs.release_as == 'minor' && github.event.inputs.pre-release != 'none' - name: increase version (major) run: pnpm standard-version --yes --release-as major - if: github.event.inputs.release_as == 'major' && github.event.inputs.pre-release == '' + if: github.event.inputs.release_as == 'major' && github.event.inputs.pre-release == 'none' - name: increase version (major) (pre-release) run: pnpm standard-version --yes --release-as major --prerelease ${{ github.event.inputs.pre-release }} - if: github.event.inputs.release_as == 'major' && github.event.inputs.pre-release != '' + if: github.event.inputs.release_as == 'major' && github.event.inputs.pre-release != 'none' - name: increase version (pre-release) run: pnpm standard-version --prerelease ${{ github.event.inputs.pre-release }} - if: github.event.inputs.release_as == '' && github.event.inputs.pre-release != '' + if: github.event.inputs.release_as == 'none' && github.event.inputs.pre-release != 'none' - name: build run: pnpm run build diff --git a/CHANGELOG.md b/CHANGELOG.md index 8191dcf49..f656294b4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,12 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 4.0.0-beta.4 (2024-05-13) + +### Bug Fixes + +- add NPM_TOKEN env ([b22eca3](https://github.com/EkoCommunications/AmityUiKitWeb/commit/b22eca3208f632498db40d8a320a8aeac402f45c)) + ## 4.0.0-beta.3 (2024-04-26) ### Bug Fixes diff --git a/package.json b/package.json index e6f7132fa..742139c97 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@amityco/ui-kit", - "version": "4.0.0-beta.3", + "version": "4.0.0-beta.4", "engines": { "node": ">=16", "pnpm": ">=8" From 1e41eeff723b8aecd238e32ff97ca7d3cfab97ec Mon Sep 17 00:00:00 2001 From: Pitchaya T <33589608+ptchayap@users.noreply.github.com> Date: Wed, 15 May 2024 10:55:40 +0700 Subject: [PATCH 70/88] fix: to support un config value (#340) --- src/v4/core/providers/ThemeProvider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v4/core/providers/ThemeProvider.tsx b/src/v4/core/providers/ThemeProvider.tsx index 472898a5c..928d15037 100644 --- a/src/v4/core/providers/ThemeProvider.tsx +++ b/src/v4/core/providers/ThemeProvider.tsx @@ -91,7 +91,7 @@ const generateComponentPalette = (config: Config, currentTheme: 'light' | 'dark' configurable.componentIds.forEach((componentId) => { const componentConfig = (config.customizations as { [key: string]: { theme: Theme } })?.[ `${configurable.pageId}/${componentId}/*` - ].theme; + ]?.theme; if (componentConfig) { const themeToGenerate = currentTheme === 'light' ? componentConfig.light : componentConfig.dark; From 26621609a8359e56ac2a3490240c93e8189a1c1a Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Mon, 20 May 2024 11:00:54 +0700 Subject: [PATCH 71/88] fix: hyperlink long text (#335) --- .../elements/HyperLink/HyperLink.module.css | 20 ++++++++++++++++++- .../social/elements/HyperLink/HyperLink.tsx | 4 +++- src/v4/social/pages/DraftsPage/DraftsPage.tsx | 4 +--- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/src/v4/social/elements/HyperLink/HyperLink.module.css b/src/v4/social/elements/HyperLink/HyperLink.module.css index 2698895eb..e16c56d0e 100644 --- a/src/v4/social/elements/HyperLink/HyperLink.module.css +++ b/src/v4/social/elements/HyperLink/HyperLink.module.css @@ -1,7 +1,7 @@ .hyperlink { border: 1px solid var(--asc-color-base-shade4); color: var(--asc-color-secondary-default); - background: rgba(255, 255, 255, 0.2); + background: #ffffffcc; display: inline-flex; align-items: center; padding: var(--asc-spacing-s2) var(--asc-spacing-m1) var(--asc-spacing-s2) var(--asc-spacing-s2); @@ -12,10 +12,28 @@ font-weight: 600; line-height: 1.25rem; letter-spacing: -0.015rem; + max-width: 200px; + border: var(--asc-color-base-shade4); + text-decoration: none; } .hyperlinkIcon { color: var(--asc-color-primary-default); width: 1.5rem; height: 1.5rem; + flex-shrink: 0; +} + +.hyperlinkText { + display: flex; + align-items: center; + max-width: calc(100% - 2rem); + overflow: hidden; + color: var(--asc-color-secondary-shade4); +} + +.text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } diff --git a/src/v4/social/elements/HyperLink/HyperLink.tsx b/src/v4/social/elements/HyperLink/HyperLink.tsx index e107f63ba..e4dff3e56 100644 --- a/src/v4/social/elements/HyperLink/HyperLink.tsx +++ b/src/v4/social/elements/HyperLink/HyperLink.tsx @@ -10,7 +10,9 @@ export const HyperLink: React.FC = ({ href, children, ...rest } return ( - {children} +
+ {children} +
); }; diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index 6e1f562fa..52a19c9c7 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -263,9 +263,7 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor target="_blank" rel="noopener noreferrer" > - - {hyperLink[0]?.data?.customText || hyperLink[0].data.url} - + {hyperLink[0]?.data?.customText || hyperLink[0].data.url}
)} From ccdbbddcb5b1aed817bf1411c74242b0b7463946 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Mon, 20 May 2024 11:05:19 +0700 Subject: [PATCH 72/88] fix: hyperlink custom text input max length (#336) --- src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx index 72483ff46..26b7f13d2 100644 --- a/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx +++ b/src/v4/social/components/HyperLinkConfig/HyperLinkConfig.tsx @@ -170,6 +170,7 @@ export const HyperLinkConfig = ({ })} className={clsx(styles.input, errors?.customText && styles.hasError)} {...register('customText')} + maxLength={MAX_LENGTH} /> {errors?.customText && ( {errors?.customText?.message} From 3ebfc1a5021ec299d531bc5507d2c7236ceca4a0 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Mon, 20 May 2024 12:21:43 +0700 Subject: [PATCH 73/88] fix: ASC-220001 - share story button (#337) * fix: share story button * fix: use avatar v4 * fix: remove unused --- src/v4/core/components/Avatar/Avatar.tsx | 1 + .../elements/ShareStoryButton/ShareStoryButton.tsx | 10 ++++++++-- src/v4/social/pages/DraftsPage/DraftsPage.tsx | 10 +++------- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/v4/core/components/Avatar/Avatar.tsx b/src/v4/core/components/Avatar/Avatar.tsx index 93b513a3c..12a061429 100644 --- a/src/v4/core/components/Avatar/Avatar.tsx +++ b/src/v4/core/components/Avatar/Avatar.tsx @@ -19,6 +19,7 @@ export const Avatar = ({ onClick, loading, size = 'medium', + backgroundImage, ...props }: AvatarProps) => { const [visible, setVisible] = useState(false); diff --git a/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx b/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx index 949665925..3b66ac7b8 100644 --- a/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx +++ b/src/v4/social/elements/ShareStoryButton/ShareStoryButton.tsx @@ -1,11 +1,12 @@ import React from 'react'; -import Avatar from '~/core/components/Avatar'; import { useIntl } from 'react-intl'; import { isValidHttpUrl } from '~/utils'; import { useCustomization } from '~/v4/core/providers/CustomizationProvider'; import { Icon } from '~/v4/core/components/Icon'; +import { backgroundImage as communityBackgroundImage } from '~/icons/Community'; import styles from './ShareStoryButton.module.css'; +import { Avatar } from '~/v4/core/components'; interface ShareButtonProps { onClick: () => void; @@ -41,7 +42,12 @@ export const ShareStoryButton = ({ onClick={onClick} > {!elementConfig?.hide_avatar && ( - + )} {formatMessage({ id: 'storyDraft.button.shareStory' })} {isRemoteImage ? ( diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index 52a19c9c7..1c6974911 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -2,9 +2,6 @@ import React, { useEffect, useState } from 'react'; import { useIntl } from 'react-intl'; import { extractColors } from 'extract-colors'; import { readFileAsync } from '~/helpers'; -import useUser from '~/core/hooks/useUser'; -import useSDK from '~/core/hooks/useSDK'; -import useImage from '~/core/hooks/useImage'; import styles from './DraftsPage.module.css'; import { SubmitHandler } from 'react-hook-form'; @@ -27,6 +24,7 @@ import { useNotifications } from '~/v4/core/providers/NotificationProvider'; import { useNavigation } from '~/social/providers/NavigationProvider'; import { PageTypes } from '~/social/constants'; import { BaseVideoPreview } from '../../internal-components/VideoPreview'; +import { useCommunityInfo } from '~/social/components/CommunityInfo/hooks'; type AmityStoryMediaType = { type: 'image'; url: string } | { type: 'video'; url: string }; @@ -60,9 +58,7 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor setIsHyperLinkBottomSheetOpen(false); }; - const { currentUserId } = useSDK(); - const user = useUser(currentUserId); - const creatorAvatar = useImage({ imageSize: 'small', fileId: user?.avatarFileId }); + const community = useCommunityInfo(targetId); const { formatMessage } = useIntl(); @@ -284,7 +280,7 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor onClick={() => onCreateStory(file, imageMode, {}, hyperLink.length > 0 ? hyperLink : []) } - avatar={creatorAvatar} + avatar={community.avatarFileUrl} />
From 067ff98c45898f2f7100a5c7a15d378287f7e1e7 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Mon, 20 May 2024 12:37:10 +0700 Subject: [PATCH 74/88] fix: ASC-21590 - hyperlink ui (#347) * fix: hyperlink long text * fix: story hyperlink --- .../internal-components/StoryViewer/Renderers/Image.tsx | 5 ++++- .../internal-components/StoryViewer/Renderers/Video.tsx | 5 ++++- src/v4/social/pages/DraftsPage/DraftsPage.tsx | 2 +- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx index 7c7c314f3..05bd831ef 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx @@ -263,7 +263,10 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { onClick={() => story.analytics.markLinkAsClicked()} > - {story.items?.[0]?.data?.customText || story.items?.[0].data.url} + + {story.items[0]?.data?.customText || + story.items[0].data.url.replace(/^https?:\/\//, '')} +
diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx index bf090aeb1..42ee12517 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx @@ -302,7 +302,10 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler onClick={() => story.analytics.markLinkAsClicked()} > - {story.items?.[0].data?.customText || story.items?.[0].data.url} + + {story.items[0]?.data?.customText || + story.items[0].data.url.replace(/^https?:\/\//, '')} +
diff --git a/src/v4/social/pages/DraftsPage/DraftsPage.tsx b/src/v4/social/pages/DraftsPage/DraftsPage.tsx index 1c6974911..70163b802 100644 --- a/src/v4/social/pages/DraftsPage/DraftsPage.tsx +++ b/src/v4/social/pages/DraftsPage/DraftsPage.tsx @@ -259,7 +259,7 @@ const AmityDraftStoryPage = ({ targetId, targetType, mediaType }: AmityDraftStor target="_blank" rel="noopener noreferrer" > - {hyperLink[0]?.data?.customText || hyperLink[0].data.url} + {hyperLink[0]?.data?.customText || hyperLink[0].data.url.replace(/^https?:\/\//, '')}
)} From 83a1d348363238a433f3cb78a1d536a26a692a77 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Mon, 20 May 2024 12:44:58 +0700 Subject: [PATCH 75/88] fix: story commu condition (#346) --- src/utils.ts | 6 ------ src/v4/social/components/ViewStoryPage/index.tsx | 5 +---- .../internal-components/StoryViewer/Renderers/Image.tsx | 6 +++--- .../internal-components/StoryViewer/Renderers/Video.tsx | 6 +++--- src/v4/social/pages/StoryPage/CommunityFeedStory.tsx | 4 ++-- src/v4/social/pages/StoryPage/GlobalFeedStory.tsx | 4 ++-- 6 files changed, 11 insertions(+), 20 deletions(-) diff --git a/src/utils.ts b/src/utils.ts index 6357a8e4b..8dd500000 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -22,12 +22,6 @@ export const checkStoryPermission = ( return false; } - const userPermission = client.hasPermission(Permissions.ManageStoryPermission).currentUser(); - - if (userPermission) { - return true; - } - if (communityId) { const communityPermission = client .hasPermission(Permissions.ManageStoryPermission) diff --git a/src/v4/social/components/ViewStoryPage/index.tsx b/src/v4/social/components/ViewStoryPage/index.tsx index ba3ed181c..3049611e3 100644 --- a/src/v4/social/components/ViewStoryPage/index.tsx +++ b/src/v4/social/components/ViewStoryPage/index.tsx @@ -18,7 +18,7 @@ import { useCustomization } from '~/v4/core/providers/CustomizationProvider'; import { CreateStoryButton } from '../../elements'; import { renderers } from '../../internal-components/StoryViewer/Renderers'; -import { checkStoryPermission } from '~/utils'; + import { AmityDraftStoryPage } from '../../pages'; import { useStoryContext } from '../../providers/StoryProvider'; import { useConfirmContext } from '~/v4/core/providers/ConfirmProvider'; @@ -78,10 +78,7 @@ const StoryViewer = ({ pageId, targetId, duration = 5000, onClose }: StoryViewer const { file, setFile } = useStoryContext(); const [colors, setColors] = useState([]); - const { client } = useSDK(); - const isStoryCreator = stories[currentIndex]?.creator?.userId === currentUserId; - const haveStoryPermission = checkStoryPermission(client, targetId); const confirmDeleteStory = (storyId: string) => { const isLastStory = currentIndex === 0; diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx index 05bd831ef..0b60e110c 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx @@ -75,7 +75,7 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { const isOfficial = community?.isOfficial || false; const isCreator = creator?.userId === user?.userId; - const haveStoryPermission = checkStoryPermission(client, community?.communityId); + const isModerator = checkStoryPermission(client, community?.communityId); const computedStyles = { ...rendererStyles.storyContent, @@ -176,7 +176,7 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { heading={heading} subheading={subheading} isHaveActions={actions?.length > 0} - haveStoryPermission={haveStoryPermission} + haveStoryPermission={isModerator} isOfficial={isOfficial} isPaused={isPaused} onPlay={play} @@ -280,7 +280,7 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { totalLikes={totalLikes} isLiked={isLiked} onClickComment={openCommentSheet} - showImpression={isCreator || haveStoryPermission} + showImpression={isCreator || isModerator} /> ); diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx index 42ee12517..6c9c18432 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx @@ -74,7 +74,7 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler '' ); - const haveStoryPermission = checkStoryPermission(client, community?.communityId); + const isModerator = checkStoryPermission(client, community?.communityId); const isCreator = creator?.userId === user?.userId; const computedStyles = { @@ -212,7 +212,7 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler heading={heading} subheading={subheading} isHaveActions={actions?.length > 0} - haveStoryPermission={haveStoryPermission} + haveStoryPermission={isModerator} isOfficial={isOfficial} isPaused={isPaused} onPlay={play} @@ -318,7 +318,7 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler totalLikes={totalLikes} isLiked={isLiked} onClickComment={openCommentSheet} - showImpression={isCreator || haveStoryPermission} + showImpression={isCreator || isModerator} /> ); diff --git a/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx b/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx index f5addb5f4..159309e4f 100644 --- a/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx +++ b/src/v4/social/pages/StoryPage/CommunityFeedStory.tsx @@ -81,7 +81,7 @@ export const CommunityFeedStory = ({ communityId }: CommunityFeedStoryProps) => const [colors, setColors] = useState([]); const isStoryCreator = stories[currentIndex]?.creator?.userId === currentUserId; - const haveStoryPermission = checkStoryPermission(client, communityId); + const isModerator = checkStoryPermission(client, communityId); const confirmDeleteStory = (storyId: string) => { const isLastStory = currentIndex === 0; @@ -172,7 +172,7 @@ export const CommunityFeedStory = ({ communityId }: CommunityFeedStoryProps) => url, type: isImage ? 'image' : 'video', actions: [ - isStoryCreator || haveStoryPermission + isStoryCreator || isModerator ? { name: 'delete', action: () => deleteStory(story?.storyId as string), diff --git a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx index 825226238..f5109aa64 100644 --- a/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx +++ b/src/v4/social/pages/StoryPage/GlobalFeedStory.tsx @@ -80,7 +80,7 @@ export const GlobalFeedStory: React.FC = () => { const [colors, setColors] = useState([]); const isStoryCreator = stories[currentIndex]?.creator?.userId === currentUserId; - const haveStoryPermission = checkStoryPermission(client, stories[currentIndex]?.targetId); + const isModerator = checkStoryPermission(client, stories[currentIndex]?.targetId); const confirmDeleteStory = (storyId: string) => { const isLastStory = currentIndex === 0; @@ -173,7 +173,7 @@ export const GlobalFeedStory: React.FC = () => { url, type: isImage ? 'image' : 'video', actions: [ - isStoryCreator || haveStoryPermission + isStoryCreator || isModerator ? { name: 'delete', action: () => deleteStory(story?.storyId as string), From fe8aab87d9319fcc79f14458a1d7ccc473661499 Mon Sep 17 00:00:00 2001 From: Pitchaya T <33589608+ptchayap@users.noreply.github.com> Date: Mon, 20 May 2024 16:52:33 +0700 Subject: [PATCH 76/88] feat: ASC-22133 - custom reaction provider (#325) * feat: add custom reaction provider * feat: add to use reactionsContext * fix: rename provider * feat: ASC-22127 - reaction preview message bubble (#331) * feat: add reaction preview container * feat: add abbreviateCount function * feat: add fallback reaction * feat: update pr --------- Co-authored-by: Kiattirat S * feat: ASC-22124 - message reaction picker (#332) * feat: add reaction container and button * feat: add active and hover state * fix: storybook display * fix: remove unused * feat: add checking for active state * feat: add open state on reaction picker * feat: add hover state on Quick reaction button * feat: seperate components * feat: close picker when clicking outside * feat: add handling on click reaction button * fix: hover state * Update src/v4/chat/components/LiveChatMessageContent/MessageReaction/index.tsx * Delete src/v4/chat/hooks/useMessageReactions.ts --------- Co-authored-by: Kiattirat Sujjapongse * feat: ASC-22130 - add quick reaction (#339) * feat: add handling for quick reaction button * fix: add await to wait for add and remove reaction * fix: reaction pickert style * fix: storybook name * fix: reaction picker storybook * feat: add pageId, componentId and elementId * fix: change internal component name and export * fix: export from components * fix: message reaction components name * feat: add static file to include in storybook build * fix: remove duplicated file * fix: new design on my reaction * fix: not use z-index * fix: position of each reaction * fix: remove border on reaction preview for my reaction style * fix: remove unused * feat(reaction): ASC-22136 - reaction panel (#344) * feat: add handling for quick reaction button * fix: add await to wait for add and remove reaction * fix: reaction pickert style * fix: storybook name * fix: reaction picker storybook * feat: add pageId, componentId and elementId * fix: remove comment * feat(reaction-list): add empty files * feat(reaction): reuse reaction tab from social * feat(reaction): pass openReaction func to child * feat(reaction): render data from config * feat(reaction): update panel style * feat(reaction): update reaction list * feat(reaction): update reaction list * feat(reaction): add all state for reaction list * feat(reaction): change unit * feat(reaction): remove unused files * feat(reaction): update PR * feat(reaction): update PR * feat(reaction): update PR * fix: remove unused * feat(reaction): update PR --------- Co-authored-by: ptchaya_p Co-authored-by: Pitchaya T <33589608+ptchayap@users.noreply.github.com> --------- Co-authored-by: Kiattirat S --- .storybook/main.ts | 1 + amity-uikit.config.json | 10 ++ src/i18n/en.json | 5 +- src/index.ts | 4 + .../AmityLiveChatMessageList/index.tsx | 8 + .../index.tsx | 0 .../index.tsx | 6 + .../AmityLiveChatMessageSenderView/index.tsx | 6 + .../MessageReaction/index.tsx | 153 ++++++++++++++++++ .../MessageReaction/styles.module.css | 15 ++ .../LiveChatMessageContent/index.tsx | 103 ++++++++---- .../LiveChatMessageContent/styles.module.css | 50 ++++-- .../components/MessageQuickReaction/index.tsx | 44 +++++ .../MessageQuickReaction/styles.module.css | 18 +++ .../MessageReactionPicker/index.tsx | 40 +++++ .../livechatMessageReactionPicker.stories.tsx | 41 +++++ .../MessageReactionPicker/styles.module.css | 31 ++++ .../MessageReactionPreview/index.tsx | 61 +++++++ ...livechatMessageReactionPreview.stories.tsx | 41 +++++ .../MessageReactionPreview/styles.module.css | 50 ++++++ src/v4/chat/components/index.ts | 4 + .../ChatContainer/ChatReadyState.tsx | 4 +- .../AmityLiveChatPage/ChatContainer/index.tsx | 10 +- .../ChatContainer/styles.module.css | 6 +- src/v4/chat/pages/AmityLiveChatPage/index.tsx | 3 +- .../core/components/Typography/Typography.tsx | 57 +++++-- src/v4/core/providers/AmityUIKitProvider.tsx | 67 ++++---- .../core/providers/CustomReactionProvider.tsx | 32 ++++ .../core/providers/CustomizationProvider.tsx | 2 + src/v4/helpers/utils.ts | 8 + src/v4/icons/FallbackReaction.tsx | 28 ++++ src/v4/icons/QuickReactionIcon.tsx | 27 ++++ src/v4/icons/ReactionListSkeleton.tsx | 17 ++ src/v4/icons/SmilePlus.tsx | 19 +++ .../components/ReactionList/ReactionIcon.tsx | 20 +++ .../ReactionList/ReactionList.module.css | 117 ++++++++++---- .../components/ReactionList/ReactionList.tsx | 112 +++++++------ .../ReactionList/ReactionListEmptyState.tsx | 23 +++ .../ReactionList/ReactionListError.tsx | 18 +++ .../ReactionList/ReactionListLoadingState.tsx | 17 ++ .../ReactionList/ReactionListPanel.tsx | 53 ++++++ src/v4/utils/abbreviateCount.ts | 9 ++ src/v4/utils/selectMessageReaction.ts | 23 +++ static/message_reaction_fire.png | Bin 0 -> 4712 bytes static/message_reaction_grinning.png | Bin 0 -> 1658 bytes static/message_reaction_heart.png | Bin 0 -> 4439 bytes static/message_reaction_like.png | Bin 0 -> 4302 bytes static/message_reaction_sad.png | Bin 0 -> 1833 bytes 48 files changed, 1178 insertions(+), 185 deletions(-) create mode 100644 src/v4/chat/components/AmityLiveChatMessageQuickReaction/index.tsx create mode 100644 src/v4/chat/components/LiveChatMessageContent/MessageReaction/index.tsx create mode 100644 src/v4/chat/components/LiveChatMessageContent/MessageReaction/styles.module.css create mode 100644 src/v4/chat/components/MessageQuickReaction/index.tsx create mode 100644 src/v4/chat/components/MessageQuickReaction/styles.module.css create mode 100644 src/v4/chat/components/MessageReactionPicker/index.tsx create mode 100644 src/v4/chat/components/MessageReactionPicker/livechatMessageReactionPicker.stories.tsx create mode 100644 src/v4/chat/components/MessageReactionPicker/styles.module.css create mode 100644 src/v4/chat/components/MessageReactionPreview/index.tsx create mode 100644 src/v4/chat/components/MessageReactionPreview/livechatMessageReactionPreview.stories.tsx create mode 100644 src/v4/chat/components/MessageReactionPreview/styles.module.css create mode 100644 src/v4/core/providers/CustomReactionProvider.tsx create mode 100644 src/v4/icons/FallbackReaction.tsx create mode 100644 src/v4/icons/QuickReactionIcon.tsx create mode 100644 src/v4/icons/ReactionListSkeleton.tsx create mode 100644 src/v4/icons/SmilePlus.tsx create mode 100644 src/v4/social/components/ReactionList/ReactionIcon.tsx create mode 100644 src/v4/social/components/ReactionList/ReactionListEmptyState.tsx create mode 100644 src/v4/social/components/ReactionList/ReactionListError.tsx create mode 100644 src/v4/social/components/ReactionList/ReactionListLoadingState.tsx create mode 100644 src/v4/social/components/ReactionList/ReactionListPanel.tsx create mode 100644 src/v4/utils/abbreviateCount.ts create mode 100644 src/v4/utils/selectMessageReaction.ts create mode 100644 static/message_reaction_fire.png create mode 100644 static/message_reaction_grinning.png create mode 100644 static/message_reaction_heart.png create mode 100644 static/message_reaction_like.png create mode 100644 static/message_reaction_sad.png diff --git a/.storybook/main.ts b/.storybook/main.ts index af637becd..29eb40d98 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -13,6 +13,7 @@ const config: StorybookConfig = { '@storybook/addon-a11y', ], framework: '@storybook/react-vite', + staticDirs: ['../static'], }; export default config; diff --git a/amity-uikit.config.json b/amity-uikit.config.json index f25286441..ce9f67eda 100644 --- a/amity-uikit.config.json +++ b/amity-uikit.config.json @@ -27,6 +27,13 @@ } }, "excludes": [], + "message_reactions": [ + { "name": "heart", "image": "message_reaction_heart.png" }, + { "name": "like", "image": "message_reaction_like.png" }, + { "name": "fire", "image": "message_reaction_fire.png" }, + { "name": "grinning", "image": "message_reaction_grinning.png" }, + { "name": "sad", "image": "message_reaction_sad.png" } + ], "customizations": { "select_target_page/*/*": { "theme": {}, @@ -200,6 +207,9 @@ "live_chat/message_composer/*": { "message_limit": 200, "placeholder_text": "Write a message" + }, + "live_chat_page/message_list/message_quick_reaction": { + "reaction": "heart" } } } diff --git a/src/i18n/en.json b/src/i18n/en.json index 2e77c1e71..154427c33 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -435,5 +435,8 @@ "livechat.error.tooLongMessage.description": "Your message is too long. Please shorten your message and try again.", "livechat.error.sendingMessage.error": "Your message wasn't sent. Please try again.", "livechat.error.sendingMessage.blockedWord": "Your message wasn't sent as it contains a blocked word.", - "livechat.error.sendingMessage.notAllowLink": "Your message wasn’t sent as it contained a link that’s not allowed." + "livechat.error.sendingMessage.notAllowLink": "Your message wasn’t sent as it contained a link that’s not allowed.", + "livechat.reaction.errorOnload": "Unable to load reactions", + "livechat.reaction.emptyState": "No reactions yet", + "livechat.reaction.emptyState.description": "Be the first to react to this message!" } diff --git a/src/index.ts b/src/index.ts index 5927767c4..3ff2fb0c9 100644 --- a/src/index.ts +++ b/src/index.ts @@ -35,6 +35,10 @@ export { AmityLiveChatMessageComposeBar, } from '~/v4/chat/components'; +export { MessageReactionPreview as AmityLiveChatMessageReactionPreview } from '~/v4/chat/components/MessageReactionPreview'; +export { MessageReactionPicker as AmityLiveChatMessageReactionPicker } from '~/v4/chat/components/MessageReactionPicker'; +export { MessageQuickReaction as AmityLiveChatMessageQuickReaction } from '~/v4/chat/components/MessageQuickReaction'; + import type { AmityMessageActionType } from '~/v4/chat/components'; export type { AmityMessageActionType }; diff --git a/src/v4/chat/components/AmityLiveChatMessageList/index.tsx b/src/v4/chat/components/AmityLiveChatMessageList/index.tsx index 329b18e2f..34cbb6e9f 100644 --- a/src/v4/chat/components/AmityLiveChatMessageList/index.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageList/index.tsx @@ -16,14 +16,18 @@ import { useLiveChatNotifications } from '~/v4/chat/providers/LiveChatNotificati import { useCopyMessage } from '~/v4/core/hooks'; interface AmityLiveChatMessageListProps { + pageId?: string; channel: Amity.Channel; replyMessage: (message: Amity.Message<'text'>) => void; } export const AmityLiveChatMessageList = ({ + pageId, channel, replyMessage, }: AmityLiveChatMessageListProps) => { + const componentId = 'message_list'; + const sdk = useSDK(); const containerRef = React.useRef(null); const { formatMessage } = useIntl(); @@ -132,6 +136,8 @@ export const AmityLiveChatMessageList = ({ } key={message.messageId} containerRef={containerRef} + pageId={pageId} + componentId={componentId} /> ); @@ -169,6 +175,8 @@ export const AmityLiveChatMessageList = ({ }} key={message.messageId} containerRef={containerRef} + pageId={pageId} + componentId={componentId} /> ); })} diff --git a/src/v4/chat/components/AmityLiveChatMessageQuickReaction/index.tsx b/src/v4/chat/components/AmityLiveChatMessageQuickReaction/index.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/src/v4/chat/components/AmityLiveChatMessageReceiverView/index.tsx b/src/v4/chat/components/AmityLiveChatMessageReceiverView/index.tsx index 4419aa1bd..74859a42a 100644 --- a/src/v4/chat/components/AmityLiveChatMessageReceiverView/index.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageReceiverView/index.tsx @@ -5,12 +5,16 @@ import LiveChatMessageContent from '../LiveChatMessageContent'; import { AmityMessageActionType } from '../LiveChatMessageContent/MessageAction'; interface AmityLiveChatMessageReceiverViewProps { + pageId?: string; + componentId?: string; message: Amity.Message; containerRef: React.RefObject; action: AmityMessageActionType; } export const AmityLiveChatMessageReceiverView = ({ + pageId = '*', + componentId = '*', message, containerRef, action, @@ -20,6 +24,8 @@ export const AmityLiveChatMessageReceiverView = ({ return ( } userDisplayName={user?.displayName} avatarUrl={avatarFileUrl} diff --git a/src/v4/chat/components/AmityLiveChatMessageSenderView/index.tsx b/src/v4/chat/components/AmityLiveChatMessageSenderView/index.tsx index 5478e4ac4..1b5f8f870 100644 --- a/src/v4/chat/components/AmityLiveChatMessageSenderView/index.tsx +++ b/src/v4/chat/components/AmityLiveChatMessageSenderView/index.tsx @@ -5,12 +5,16 @@ import LiveChatMessageContent from '../LiveChatMessageContent'; import { AmityMessageActionType } from '../LiveChatMessageContent/MessageAction'; interface AmityLiveChatMessageSenderViewProps { + pageId?: string; + componentId?: string; message: Amity.Message; containerRef: React.RefObject; action?: AmityMessageActionType; } export const AmityLiveChatMessageSenderView = ({ + pageId = '*', + componentId = '*', message, containerRef, action, @@ -25,6 +29,8 @@ export const AmityLiveChatMessageSenderView = ({ avatarUrl={avatarFileUrl} containerRef={containerRef} action={action} + pageId={pageId} + componentId={componentId} /> ); }; diff --git a/src/v4/chat/components/LiveChatMessageContent/MessageReaction/index.tsx b/src/v4/chat/components/LiveChatMessageContent/MessageReaction/index.tsx new file mode 100644 index 000000000..4b6499e43 --- /dev/null +++ b/src/v4/chat/components/LiveChatMessageContent/MessageReaction/index.tsx @@ -0,0 +1,153 @@ +import React, { useCallback, useRef, useEffect, useState } from 'react'; +import { MessageQuickReaction } from '~/v4/chat/components/MessageQuickReaction'; +import { MessageReactionPicker } from '~/v4/chat/components/MessageReactionPicker'; +import { convertRemToPx, getCssVariableValue } from '~/v4/helpers/utils'; +import styles from './styles.module.css'; + +export const MessageReaction = ({ + pageId = '*', + componentId = '*', + message, + containerRef, +}: { + pageId?: string; + componentId?: string; + message: Amity.Message; + containerRef?: React.RefObject; +}) => { + const [isReactionPickerOpen, setIsReactionPickerOpen] = useState(false); + + const [isHoveredQuickReaction, setIsHoveredQuickReaction] = useState(false); + const [isHoveredReactionPicker, setIsHoveredReactionPicker] = useState(false); + + const [transform, setTransform] = React.useState(); + const ref = useRef(null); + + const isHoveredQuickReactionRef = useRef(isHoveredQuickReaction); + + useEffect(() => { + isHoveredQuickReactionRef.current = isHoveredQuickReaction; + }, [isHoveredQuickReaction]); + + const onOpenPicker = useCallback(() => { + if (!isHoveredQuickReactionRef.current) return; + + const timeoutId = setTimeout(() => { + if (isHoveredQuickReactionRef.current) { + setIsReactionPickerOpen(true); + } + }, 500); + + return () => clearTimeout(timeoutId); + }, []); + + const isHoveredReactionPickerRef = useRef(isHoveredReactionPicker); + + useEffect(() => { + isHoveredReactionPickerRef.current = isHoveredReactionPicker; + }, [isHoveredReactionPicker]); + + const onClosePicker = useCallback(() => { + setTimeout(() => { + if (!isHoveredReactionPickerRef.current) { + setIsReactionPickerOpen(false); + } + }, 1000); + }, []); + + const handleClickOutside = useCallback((event) => { + if (ref.current && !ref.current.contains(event.target)) { + setIsReactionPickerOpen(false); + } + }, []); + + const calculateTransform = () => { + if (!ref.current || !containerRef?.current) return 'translate(-50%, 0px)'; + + const parentRect = containerRef.current.getBoundingClientRect(); + const pickerRect = ref.current.getBoundingClientRect(); + + if (!parentRect || !pickerRect) return 'translate(-50%, 0px)'; + + const padding = convertRemToPx( + Number(getCssVariableValue('--asc-spacing-s1').replace('rem', '')), + ); + + const overflowRight = pickerRect.right - parentRect.right; + const overflowLeft = parentRect.left - pickerRect.left; + + if (overflowRight > 0) { + // If overflowing to the right, adjust the transform + return `translate(calc(-50% - ${overflowRight}px), 0px)`; + } else if (overflowLeft > 0) { + // If overflowing to the left, adjust the transform + return `translate(calc(-50% + ${overflowLeft}px), 0px)`; + } else { + // If not overflowing, keep the original transform + return 'translate(-50%, 0px)'; + } + }; + + const onMouseDown = (event: any) => { + handleClickOutside(event); + }; + + const onSelectReaction = () => { + setIsHoveredQuickReaction(false); + setIsHoveredReactionPicker(false); + setIsReactionPickerOpen(false); + }; + + useEffect(() => { + + document.addEventListener('mousedown', onMouseDown); + document.addEventListener('touchstart', handleClickOutside); + return () => { + document.removeEventListener('mousedown', handleClickOutside); + document.removeEventListener('touchstart', handleClickOutside); + }; + }, []); + + useEffect(() => { + if (isHoveredQuickReaction) { + !isReactionPickerOpen && onOpenPicker(); + } else { + isReactionPickerOpen && onClosePicker(); + } + }, [isHoveredQuickReaction, isReactionPickerOpen]); + + return ( +
+ {isReactionPickerOpen && ( +
setIsHoveredReactionPicker(true)} + onMouseLeave={() => { + setIsHoveredReactionPicker(false); + }} + > + +
+ )} + +
{ + setIsHoveredQuickReaction(true); + }} + onMouseLeave={() => { + setIsHoveredQuickReaction(false); + }} + > + +
+
+ ); +}; diff --git a/src/v4/chat/components/LiveChatMessageContent/MessageReaction/styles.module.css b/src/v4/chat/components/LiveChatMessageContent/MessageReaction/styles.module.css new file mode 100644 index 000000000..6b1de54dc --- /dev/null +++ b/src/v4/chat/components/LiveChatMessageContent/MessageReaction/styles.module.css @@ -0,0 +1,15 @@ +.reactionContainer { + position: relative; +} + +.reactionPickerWrap { + position: absolute; + bottom: 1.5rem; + left: 0.625rem; + transform: translate(-50%, 0px); +} + +.reactionButton { + width: 1.25rem; + height: 1.25rem; +} diff --git a/src/v4/chat/components/LiveChatMessageContent/index.tsx b/src/v4/chat/components/LiveChatMessageContent/index.tsx index 40aa71f56..01bed88fc 100644 --- a/src/v4/chat/components/LiveChatMessageContent/index.tsx +++ b/src/v4/chat/components/LiveChatMessageContent/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useState } from 'react'; import styles from './styles.module.css'; import { Typography } from '~/v4/core/components'; import MessageAction, { AmityMessageActionType } from './MessageAction'; @@ -9,8 +9,14 @@ import useSDK from '~/core/hooks/useSDK'; import MessageBubble from './MessageBubble'; import useChannelPermission from '~/v4/chat/hooks/useChannelPermission'; import Flag from '~/v4/icons/Flag'; +import { MessageReaction } from './MessageReaction'; +import { MessageReactionPreview } from '~/v4/chat/components/MessageReactionPreview'; +import Sheet from 'react-modal-sheet'; +import { ReactionList } from '~/v4/social/components'; interface MessageItemProps { + pageId?: string; + componentId?: string; message: Amity.Message<'text'>; userDisplayName?: string; avatarUrl?: string; @@ -19,6 +25,8 @@ interface MessageItemProps { } const LiveChatMessageContent = ({ + pageId = '*', + componentId = '*', message, avatarUrl, userDisplayName, @@ -29,41 +37,76 @@ const LiveChatMessageContent = ({ const sdk = useSDK(); const isOwner = message.creatorId === sdk.currentUserId; const { isModerator } = useChannelPermission(message.channelId); + const [openReactionPanel, setOpenReactionPanel] = useState(undefined); return ( - -
- {message.isDeleted ? ( -
- -
- - {formatMessage({ - id: 'livechat.deleted.message', - })} - + <> + +
+ {message.isDeleted ? ( +
+ +
+ + {formatMessage({ + id: 'livechat.deleted.message', + })} + +
-
- ) : ( -
- - {action && ( - + +
+ setOpenReactionPanel(message)} + /> +
+ {action && ( + 0} + /> + )} + 0} + pageId={pageId} + componentId={componentId} /> - )} - {message.flagCount > 0 && } -
- + {message.flagCount > 0 && } +
+ +
-
- )} -
- + )} +
+ + + {openReactionPanel && ( + setOpenReactionPanel(undefined)} + className={styles.reactionListSheet} + > + + + + + + + + + )} + ); }; diff --git a/src/v4/chat/components/LiveChatMessageContent/styles.module.css b/src/v4/chat/components/LiveChatMessageContent/styles.module.css index 26529261c..2b92e5f8e 100644 --- a/src/v4/chat/components/LiveChatMessageContent/styles.module.css +++ b/src/v4/chat/components/LiveChatMessageContent/styles.module.css @@ -4,12 +4,25 @@ gap: var(--asc-spacing-s1); } +.messageItemContainerInner { + position: relative; +} + +.messageItemContainerInner[data-reactions='true'] { + margin-bottom: 1.313rem; +} + .messageBubbleWrap { display: flex; align-items: flex-end; gap: var(--asc-spacing-xxs3); } +.messageReaction { + position: absolute; + bottom: -1.313rem; +} + .messageDeletedBubble { display: flex; align-items: center; @@ -19,8 +32,8 @@ gap: var(--asc-spacing-xxs2); border-radius: var(--asc-border-radius-lg); color: var( - --live-chat-message-list-asc-color-base-inverse, - var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + --live-chat-message-list-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) ); } @@ -34,8 +47,8 @@ height: 1rem; width: 1rem; fill: var( - --live-chat-message-list-asc-color-base-inverse, - var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) + --live-chat-message-list-asc-color-base-inverse, + var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)) ); } @@ -44,11 +57,6 @@ height: 1.25rem; } -.reactionIcon { - width: 1.25rem; - height: 1.25rem; -} - .flagIcon { height: 1rem; } @@ -56,8 +64,8 @@ .timestamp { font-family: var(--asc-text-global-font-family); color: var( - --live-chat-message-list-asc-color-base-shade2, - var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2)) + --live-chat-message-list-asc-color-base-shade2, + var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2)) ); margin-bottom: var(--asc-spacing-s1); @@ -65,3 +73,23 @@ font-size: 0.5rem; line-height: 0.75rem; } + +.reactionListSheet { + z-index: 1001 !important; + max-height: 85%; + top: 15% !important; + + @media (min-width: 768px) { + width: 375px !important; + } +} + +.reactionListContainer { + height: 100% !important; + background-color: var(--asc-color-base-background) !important; +} + +.reactionListBackdrop { + background-color: var(--asc-color-black) !important; + opacity: 0.5 !important; +} \ No newline at end of file diff --git a/src/v4/chat/components/MessageQuickReaction/index.tsx b/src/v4/chat/components/MessageQuickReaction/index.tsx new file mode 100644 index 000000000..33a350d58 --- /dev/null +++ b/src/v4/chat/components/MessageQuickReaction/index.tsx @@ -0,0 +1,44 @@ +import React, { useCallback } from 'react'; +import { useCustomization } from '~/v4/core/providers/CustomizationProvider'; +import { useCustomReaction } from '~/v4/core/providers/CustomReactionProvider'; +import { QuickReactionIcon } from '~/v4/icons/QuickReactionIcon'; +import { selectMessageReaction } from '~/v4/utils/selectMessageReaction'; +import styles from './styles.module.css'; + +interface MessageQuickReactionProps { + pageId?: string; + componentId?: string; + message: Amity.Message; + onSelectReaction?: () => void; +} + +export const MessageQuickReaction = ({ + pageId = '*', + componentId = '*', + message, + onSelectReaction, +}: MessageQuickReactionProps) => { + const elementId = 'message_quick_reaction'; + const { config: reactionConfig } = useCustomReaction(); + const { getConfig } = useCustomization(); + + const elementConfig = getConfig(`${pageId}/${componentId}/${elementId}`); + + const onClickQuickReaction = useCallback(() => { + if ( + reactionConfig && + elementConfig.reaction && + reactionConfig.find((config) => config.name === elementConfig.reaction) + ) { + selectMessageReaction({ reactionName: elementConfig.reaction, message }); + } + + onSelectReaction && onSelectReaction(); + }, [reactionConfig, elementConfig, message]); + + return ( +
+ +
+ ); +}; diff --git a/src/v4/chat/components/MessageQuickReaction/styles.module.css b/src/v4/chat/components/MessageQuickReaction/styles.module.css new file mode 100644 index 000000000..ce96cb230 --- /dev/null +++ b/src/v4/chat/components/MessageQuickReaction/styles.module.css @@ -0,0 +1,18 @@ +.quickReactionIcon { + width: 1.25rem; + height: 1.25rem; + color: var(--asc-color-base-shade2); +} + +.quickReactionIconContainer { + display: flex; +} + +.quickReactionIconContainer:hover { + cursor: pointer; + background-color: var( + --live-chat-message-list-asc-color-secondary-shade4, + var(--live-chat-asc-color-secondary-shade4, var(--asc-color-secondary-shade4)) + ); + border-radius: var(--asc-border-radius-sm); +} diff --git a/src/v4/chat/components/MessageReactionPicker/index.tsx b/src/v4/chat/components/MessageReactionPicker/index.tsx new file mode 100644 index 000000000..6f2feb347 --- /dev/null +++ b/src/v4/chat/components/MessageReactionPicker/index.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { AmityReactionType, useCustomReaction } from '~/v4/core/providers/CustomReactionProvider'; +import { selectMessageReaction } from '~/v4/utils/selectMessageReaction'; +import styles from './styles.module.css'; + +export const MessageReactionPicker = ({ + message, + onSelectReaction, +}: { + message: Amity.Message; + onSelectReaction: (reactionName: string) => void; +}) => { + const { config } = useCustomReaction(); + + const onClickReaction = (reactionName: AmityReactionType['name']) => { + selectMessageReaction({ reactionName, message }); + }; + + if (!config) return null; + + return ( +
+ {config.map((reaction) => { + return ( + {reaction.name} { + onClickReaction(reaction.name); + onSelectReaction && onSelectReaction(reaction.name); + }} + /> + ); + })} +
+ ); +}; diff --git a/src/v4/chat/components/MessageReactionPicker/livechatMessageReactionPicker.stories.tsx b/src/v4/chat/components/MessageReactionPicker/livechatMessageReactionPicker.stories.tsx new file mode 100644 index 000000000..3e4a42805 --- /dev/null +++ b/src/v4/chat/components/MessageReactionPicker/livechatMessageReactionPicker.stories.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { MessageReactionPicker } from '.'; + +export default { + title: 'V4/MessageReactionPicker', +}; + +const message = { + reactions: { + like: 1, + angry: 2, + haha: 3, + wow: 4, + sad: 5, + heart: 6, + }, + reactionsCount: 21, + myReactions: ['grinning'], +}; + +export const liveChatMessageReactionPicker = { + render: () => ( +
+
+ {}} /> +
+
+ ), + name: 'MessageReactionPicker', +}; diff --git a/src/v4/chat/components/MessageReactionPicker/styles.module.css b/src/v4/chat/components/MessageReactionPicker/styles.module.css new file mode 100644 index 000000000..f74b32273 --- /dev/null +++ b/src/v4/chat/components/MessageReactionPicker/styles.module.css @@ -0,0 +1,31 @@ +.reactionPickerContainer { + display: flex; + cursor: pointer; + background-color: var(--asc-color-base-shade4); + border-radius: var(--asc-border-radius-full); + gap: var(--asc-spacing-xxs3); + width: max-content; + padding: 0.313rem 0.438rem; +} + +.reactionButton { + width: 2rem; + height: 2rem; + border: 0.313rem var(--asc-color-base-shade4) solid; + border-radius: var(--asc-border-radius-full); +} + +.reactionButton[data-active='true'] { + border-radius: var(--asc-border-radius-full); + border: 0.313rem var(--asc-color-base-shade1) solid; +} + +.reactionButton[data-active='true']:hover { + border-radius: var(--asc-border-radius-full); + border: 0.313rem var(--asc-color-base-shade1) solid; +} + +.reactionButton:hover { + border-radius: var(--asc-border-radius-full); + border: 0.313rem var(--asc-color-secondary-shade3) solid; +} diff --git a/src/v4/chat/components/MessageReactionPreview/index.tsx b/src/v4/chat/components/MessageReactionPreview/index.tsx new file mode 100644 index 000000000..fc5d22f88 --- /dev/null +++ b/src/v4/chat/components/MessageReactionPreview/index.tsx @@ -0,0 +1,61 @@ +import React, { useMemo } from 'react'; +import styles from './styles.module.css'; +import { useCustomReaction } from '~/v4/core/providers/CustomReactionProvider'; +import FallbackReaction from '~/v4/icons/FallbackReaction'; +import { abbreviateCount } from '~/v4/utils/abbreviateCount'; + +export const MessageReactionPreview = ({ + message, + onClick, +}: { + message: Amity.Message; + onClick?: () => void; +}) => { + const { config: reactionConfig } = useCustomReaction(); + // find the top 3 reactions + const topReactions = useMemo( + () => + Object.entries(message.reactions) + .sort((a, b) => b[1] - a[1]) // sort by value in descending order + // remove reaction that has zero value + .filter((reaction) => reaction[1] > 0) + .slice(0, 3) + .sort((a, b) => a[1] - b[1]), + [message.reactions], + ); + + if (!message.reactionsCount) return null; + + return ( +
+
+ {topReactions.map((reaction) => { + const reactionMapConfig = reactionConfig.find((config) => config.name === reaction[0]); + return ( + <> + {reactionMapConfig ? ( + {reactionMapConfig.name} + ) : ( + + )} + + ); + })} +
+
{abbreviateCount(message.reactionsCount)}
+
+ ); +}; diff --git a/src/v4/chat/components/MessageReactionPreview/livechatMessageReactionPreview.stories.tsx b/src/v4/chat/components/MessageReactionPreview/livechatMessageReactionPreview.stories.tsx new file mode 100644 index 000000000..e0efcf5b4 --- /dev/null +++ b/src/v4/chat/components/MessageReactionPreview/livechatMessageReactionPreview.stories.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { MessageReactionPreview } from './'; + +export default { + title: 'V4/MessageReactionPreview', +}; + +const message = { + reactions: { + like: 1, + angry: 2, + haha: 3, + wow: 4, + sad: 5, + heart: 6, + }, + reactionsCount: 21, + myReactions: ['grinning'], +}; + +export const liveChatMessageReactionPreview = { + render: () => ( +
+
+ +
+
+ ), + name: 'MessageReactionPreview', +}; diff --git a/src/v4/chat/components/MessageReactionPreview/styles.module.css b/src/v4/chat/components/MessageReactionPreview/styles.module.css new file mode 100644 index 000000000..b8fd6addb --- /dev/null +++ b/src/v4/chat/components/MessageReactionPreview/styles.module.css @@ -0,0 +1,50 @@ +.reactionPreviewContainer { + display: flex; + flex-direction: row; + align-items: center; + background-color: var(--asc-color-base-shade3); + border: 1px solid var(--asc-color-secondary-shade4); + padding: var(--asc-spacing-xxs2) var(--asc-spacing-xxs3); + border-radius: var(--asc-border-radius-full); +} + +.reactionPreviewContainer[data-myreaction='true'] { + background-color: var(--asc-color-primary-default); + border: none; +} + +.reactionIconContainer { + display: flex; + flex-direction: row-reverse; + align-items: center; +} + +.reactionIconContainer > :not(:first-child) { + margin-right: calc(var(--asc-spacing-s1) * -1); +} + +.reactionIconContainer > :first-child { + transform: translateX(0rem); +} + +.reactionIconContainer > :nth-child(2) { + transform: translateX(0rem); +} + +.reactionIconContainer > :last-child { + transform: translateX(0rem); +} + +.reactionIcon { + width: 1.25rem; + height: 1.25rem; +} + +.reactionCount { + margin-left: var(--asc-spacing-xxs1); + color: var(--asc-color-base-inverse); +} + +.fallbackIcon { + color: var(--asc-color-base-shade1); +} diff --git a/src/v4/chat/components/index.ts b/src/v4/chat/components/index.ts index 777c787b3..9b139945e 100644 --- a/src/v4/chat/components/index.ts +++ b/src/v4/chat/components/index.ts @@ -4,5 +4,9 @@ export { AmityLiveChatMessageSenderView } from './AmityLiveChatMessageSenderView export { AmityLiveChatMessageList } from './AmityLiveChatMessageList'; export { AmityLiveChatMessageComposeBar } from './AmityLiveChatMessageComposeBar'; +export { MessageReactionPicker } from './MessageReactionPicker'; +export { MessageQuickReaction } from './MessageQuickReaction'; +export { MessageReactionPreview } from './MessageReactionPreview'; + import type { AmityMessageActionType } from './LiveChatMessageContent/MessageAction'; export type { AmityMessageActionType }; diff --git a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx index 84eef0373..58c46e592 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx +++ b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/ChatReadyState.tsx @@ -16,7 +16,7 @@ import useSearchChannelUser from '~/v4/chat/hooks/collections/useSearchChannelUs import useSDK from '~/core/hooks/useSDK'; import useChannelPermission from '~/v4/chat/hooks/useChannelPermission'; -const ChatReadyState = ({ channel }: { channel: Amity.Channel }) => { +const ChatReadyState = ({ pageId = '*', channel }: { pageId?: string; channel: Amity.Channel }) => { const isOnline = useConnectionStates(); const { isModerator } = useChannelPermission(channel.channelId); @@ -59,7 +59,7 @@ const ChatReadyState = ({ channel }: { channel: Amity.Channel }) => { return ( <> - + {isOnline && ( <> diff --git a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/index.tsx b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/index.tsx index ee5b4208f..aa1b8c735 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/index.tsx +++ b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/index.tsx @@ -2,9 +2,15 @@ import React from 'react'; import ChatLoadingState from './ChatLoadingState'; import ChatReadyState from './ChatReadyState'; -const ChatContainer = ({ channel }: { channel: Amity.Channel | null }) => { +const ChatContainer = ({ + pageId = '*', + channel, +}: { + pageId?: string; + channel: Amity.Channel | null; +}) => { if (!channel) return ; - return ; + return ; }; export default ChatContainer; diff --git a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/styles.module.css b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/styles.module.css index e5884d283..6be928595 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/styles.module.css +++ b/src/v4/chat/pages/AmityLiveChatPage/ChatContainer/styles.module.css @@ -37,8 +37,8 @@ border-radius: var(--asc-border-radius-sm); border: var(--asc-border-radius-none); background-color: var( - --live-chat-asc-color-secondary-default, - var(--asc-color-secondary-default) + --live-chat-asc-color-secondary-default, + var(--asc-color-secondary-default) ); color: var(--live-chat-asc-color-base-inverse, var(--asc-color-base-inverse)); display: flex; @@ -133,4 +133,4 @@ gap: var(--asc-spacing-s2); padding: var(--asc-spacing-m1); color: var(--live-chat-asc-color-base-shade2, var(--asc-color-base-shade2)); -} +} \ No newline at end of file diff --git a/src/v4/chat/pages/AmityLiveChatPage/index.tsx b/src/v4/chat/pages/AmityLiveChatPage/index.tsx index b9c9dcca2..18321dd20 100644 --- a/src/v4/chat/pages/AmityLiveChatPage/index.tsx +++ b/src/v4/chat/pages/AmityLiveChatPage/index.tsx @@ -12,6 +12,7 @@ interface AmityLiveChatPageProps { export const AmityLiveChatPage = ({ channelId }: AmityLiveChatPageProps) => { const channel = useChannel(channelId); const ref = useRef(null); + const pageId = 'live_chat_page'; return ( @@ -19,7 +20,7 @@ export const AmityLiveChatPage = ({ channelId }: AmityLiveChatPageProps) => {
- +
); diff --git a/src/v4/core/components/Typography/Typography.tsx b/src/v4/core/components/Typography/Typography.tsx index fbc295f91..7eff4074b 100644 --- a/src/v4/core/components/Typography/Typography.tsx +++ b/src/v4/core/components/Typography/Typography.tsx @@ -15,61 +15,86 @@ const Typography: React.FC & { BodyBold: React.FC; Caption: React.FC; CaptionBold: React.FC; -} = ({ children, className = '' }) => { - return
{children}
; +} = ({ children, className = '', ...props }) => { + return ( +
+ {children} +
+ ); }; -Typography.Heading = ({ children, className = '' }) => { +Typography.Heading = ({ children, className = '', ...props }) => { return ( -

+

{children}

); }; -Typography.Title = ({ children, className = '' }) => { +Typography.Title = ({ children, className = '', ...props }) => { return ( -

+

{children}

); }; -Typography.Subtitle = ({ children, className = '' }) => { +Typography.Subtitle = ({ children, className = '', ...props }) => { return ( -

+

{children}

); }; -Typography.Body = ({ children, className = '' }) => { +Typography.Body = ({ children, className = '', ...props }) => { return ( -

+

{children}

); }; -Typography.BodyBold = ({ children, className = '' }) => { +Typography.BodyBold = ({ children, className = '', ...props }) => { return ( -

+

{children}

); }; -Typography.Caption = ({ children, className = '' }) => { +Typography.Caption = ({ children, className = '', ...props }) => { return ( -

+

{children}

); }; -Typography.CaptionBold = ({ children, className = '' }) => { +Typography.CaptionBold = ({ children, className = '', ...props }) => { return ( -

+

{children}

); diff --git a/src/v4/core/providers/AmityUIKitProvider.tsx b/src/v4/core/providers/AmityUIKitProvider.tsx index d7f7b4a97..7e8188e2b 100644 --- a/src/v4/core/providers/AmityUIKitProvider.tsx +++ b/src/v4/core/providers/AmityUIKitProvider.tsx @@ -30,6 +30,7 @@ import { ConfirmProvider } from '~/v4/core/providers/ConfirmProvider'; import { ConfirmProvider as LegacyConfirmProvider } from '~/core/providers/ConfirmProvider'; import { NotificationProvider } from '~/v4/core/providers/NotificationProvider'; import { NotificationProvider as LegacyNotificationProvider } from '~/core/providers/NotificationProvider'; +import { CustomReactionProvider } from './CustomReactionProvider'; export type AmityUIKitConfig = Config; @@ -138,38 +139,40 @@ const AmityUIKitProvider: React.FC = ({ - - - - - - - - - - - - {children} - - - - - - - - - - - - - - - + + + + + + + + + + + + + {children} + + + + + + + + + + + + + + + + diff --git a/src/v4/core/providers/CustomReactionProvider.tsx b/src/v4/core/providers/CustomReactionProvider.tsx new file mode 100644 index 000000000..7c18eb89b --- /dev/null +++ b/src/v4/core/providers/CustomReactionProvider.tsx @@ -0,0 +1,32 @@ +import React, { createContext, useContext } from 'react'; +import { useCustomization } from './CustomizationProvider'; + +export type AmityReactionType = { + name: string; + image: string; +}; + +const CustomReactionContext = createContext([]); + +export const useCustomReaction = () => { + const config = useContext(CustomReactionContext); + return { config }; +}; + +export const CustomReactionProvider: React.FC = ({ children }) => { + const { config } = useCustomization(); + const [reactions, setReactions] = React.useState([]); + + React.useEffect(() => { + if (!config) return; + + const reactionConfig = config?.message_reactions; + if (!reactionConfig) return; + + setReactions(reactionConfig); + }, [config]); + + return ( + {children} + ); +}; diff --git a/src/v4/core/providers/CustomizationProvider.tsx b/src/v4/core/providers/CustomizationProvider.tsx index 52a385c4e..fde68dca0 100644 --- a/src/v4/core/providers/CustomizationProvider.tsx +++ b/src/v4/core/providers/CustomizationProvider.tsx @@ -1,4 +1,5 @@ import React, { createContext, useContext, useState, useEffect } from 'react'; +import { AmityReactionType } from './CustomReactionProvider'; interface CustomizationContextValue { config: Config | null; @@ -41,6 +42,7 @@ export interface Config { dark?: Theme['dark']; }; excludes?: string[]; + message_reactions?: AmityReactionType[]; customizations?: { 'select_target_page/*/*'?: { theme?: { diff --git a/src/v4/helpers/utils.ts b/src/v4/helpers/utils.ts index 0c7e1c4d0..9afa54300 100644 --- a/src/v4/helpers/utils.ts +++ b/src/v4/helpers/utils.ts @@ -164,3 +164,11 @@ export function parseMentionsMarkup( export function isNonNullable(value: TValue | undefined | null): value is TValue { return value != null; } + +export function getCssVariableValue(variable: string) { + return getComputedStyle(document.documentElement).getPropertyValue(variable); +} + +export function convertRemToPx(rem: number) { + return rem * parseFloat(getComputedStyle(document.documentElement).fontSize); +} diff --git a/src/v4/icons/FallbackReaction.tsx b/src/v4/icons/FallbackReaction.tsx new file mode 100644 index 000000000..4aca57bcd --- /dev/null +++ b/src/v4/icons/FallbackReaction.tsx @@ -0,0 +1,28 @@ +import React from 'react'; + +interface FallbackIconProps extends React.SVGProps { + backgroundColor?: string; +} + +const FallbackReaction = ({ backgroundColor, ...props }: FallbackIconProps) => ( + + + + +); + +export default FallbackReaction; diff --git a/src/v4/icons/QuickReactionIcon.tsx b/src/v4/icons/QuickReactionIcon.tsx new file mode 100644 index 000000000..7fd55731f --- /dev/null +++ b/src/v4/icons/QuickReactionIcon.tsx @@ -0,0 +1,27 @@ +import React from 'react'; + +export const QuickReactionIcon = (props: React.SVGProps) => { + return ( + + + + + ); +}; diff --git a/src/v4/icons/ReactionListSkeleton.tsx b/src/v4/icons/ReactionListSkeleton.tsx new file mode 100644 index 000000000..301439259 --- /dev/null +++ b/src/v4/icons/ReactionListSkeleton.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +const Svg = (props: React.SVGProps) => ( + + + + +); + +export default Svg; diff --git a/src/v4/icons/SmilePlus.tsx b/src/v4/icons/SmilePlus.tsx new file mode 100644 index 000000000..d09da778b --- /dev/null +++ b/src/v4/icons/SmilePlus.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +const Svg = (props: React.SVGProps) => ( + + + +); + +export default Svg; diff --git a/src/v4/social/components/ReactionList/ReactionIcon.tsx b/src/v4/social/components/ReactionList/ReactionIcon.tsx new file mode 100644 index 000000000..b1359a7aa --- /dev/null +++ b/src/v4/social/components/ReactionList/ReactionIcon.tsx @@ -0,0 +1,20 @@ +import { AmityReactionType } from '~/v4/core/providers/CustomReactionProvider'; +import React from 'react'; + +export const ReactionIcon = ({ + reactionConfigItem, + className, +}: { + reactionConfigItem: AmityReactionType; + className: string; +}) => { + return ( + {reactionConfigItem.name} + ); +}; diff --git a/src/v4/social/components/ReactionList/ReactionList.module.css b/src/v4/social/components/ReactionList/ReactionList.module.css index 484874fd7..6f1c28c47 100644 --- a/src/v4/social/components/ReactionList/ReactionList.module.css +++ b/src/v4/social/components/ReactionList/ReactionList.module.css @@ -1,72 +1,119 @@ .reactionListContainer { display: flex; flex-direction: column; - gap: var(--asc-spacing-m); + gap: var(--asc-spacing-m1); + height: 100%; } .tabList { display: flex; - justify-content: flex-start; - align-items: center; - border-bottom: 1px solid var(--asc-color-neutral-shade2); - margin-bottom: 1rem; + gap: var(--asc-spacing-s2); + border-bottom: 1px solid var(--asc-color-base-shade4); + overflow: auto; } .tabItem { cursor: pointer; - padding: 0.5rem 1rem; - position: relative; - transition: color 0.3s ease; + padding: var(--asc-spacing-xxs2) var(--asc-spacing-s1); + background: var(--asc-color-base-background); + color: var(--asc-color-base-shade6); + padding-bottom: var(--asc-spacing-s1); + border-bottom: transparent; +} + +.tabItem.active { + color: var(--asc-color-primary-default); + border-bottom: 1px solid var(--asc-color-primary-default); +} + +.reactionEmoji { + display: flex; + align-items: center; + gap: var(--asc-spacing-s1); } -.tabItem::after { - content: ''; - position: absolute; - bottom: -1px; - left: 0; +.userList { + display: flex; + flex-wrap: wrap; + gap: var(--asc-spacing-s1); +} + +.userItem { + display: flex; + align-items: center; + gap: var(--asc-spacing-s1); + background: var(--asc-color-base-background); + padding: var(--asc-spacing-s1); + border-radius: var(--asc-border-radius-sm); width: 100%; - height: 2px; - background-color: transparent; - transition: background-color 0.3s ease; + border-bottom: 1px solid var(--asc-color-base-shade4); } -.tabItem.active { - color: var(--asc-color-primary-default); +.userDetailsContainer { + display: flex; + color: var(--asc-color-base-default); + justify-content: space-between; + width: 100%; } -.tabItem.active::after { - background-color: var(--asc-color-primary-default); +.userDetailsProfile { + display: flex; + gap: var(--asc-spacing-s2); + align-items: center; } -.reactionEmoji { +.userDetailsReaction { display: flex; align-items: center; - gap: 0.5rem; } -.tabCount { - color: var(--asc-color-base-shade2); - transition: color 0.3s ease; +.reactionItem { + width: 1.25rem; } -.tabItem.active .tabCount { - color: var(--asc-color-primary-default); +.reactionIcon { + width: 1.5rem; } -.userList { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); - gap: 1rem; +.reactionCustomStateContainer { + display: flex; + width: 100%; + height: 100%; + align-items: center; + justify-content: center; + color: var(--asc-color-base-shade2) } -.userItem { +.reactionCustomStateContainer.loadingState { + flex-direction: column; + justify-content: start; + align-items: flex-start; + animation: skeletonPulse 1.5s ease-in-out infinite; +} + +.reactionState { display: flex; + flex-direction: column; align-items: center; - gap: 0.5rem; + gap: var(--asc-spacing-s2); } -.userDetailsContainer { +.reactionState2Line { display: flex; + flex-direction: column; align-items: center; - gap: 0.5rem; + gap: var(--asc-spacing-xxs2); } + + +@keyframes skeletonPulse { + 0% { + opacity: 0.6; + } + 50% { + opacity: 1; + } + 100% { + opacity: 0.6; + } +} \ No newline at end of file diff --git a/src/v4/social/components/ReactionList/ReactionList.tsx b/src/v4/social/components/ReactionList/ReactionList.tsx index af25bb11f..b6d6a9b3d 100644 --- a/src/v4/social/components/ReactionList/ReactionList.tsx +++ b/src/v4/social/components/ReactionList/ReactionList.tsx @@ -1,22 +1,52 @@ -import React, { Fragment, useState } from 'react'; -import { FireIcon, HeartIcon, LikedIcon } from '~/icons'; +import React, { useState } from 'react'; import styles from './ReactionList.module.css'; import { useReactionsCollection } from '~/v4/social/hooks/collections/useReactionsCollection'; -import { Avatar, Typography } from '~/v4/core/components'; +import { Typography } from '~/v4/core/components'; +import { useCustomReaction } from '~/v4/core/providers/CustomReactionProvider'; +import { abbreviateCount } from '~/v4/utils/abbreviateCount'; +import { ReactionIcon } from '~/v4/social/components/ReactionList/ReactionIcon'; +import { ReactionListPanel } from '~/v4/social/components/ReactionList/ReactionListPanel'; +import { ReactionListError } from '~/v4/social/components/ReactionList/ReactionListError'; +import { ReactionListEmptyState } from '~/v4/social/components/ReactionList/ReactionListEmptyState'; +import { ReactionListLoadingState } from '~/v4/social/components/ReactionList/ReactionListLoadingState'; interface ReactionListProps { + pageId: string; referenceId: string; referenceType: Amity.ReactableType; } -type ReactionType = 'like' | 'love' | 'fire'; -type ReactionTabType = ReactionType | 'All'; +const RenderCondition = ({ + filteredReactions, + isLoading, + error, +}: { + filteredReactions: Amity.Reactor[]; + isLoading: boolean; + error: Error | null; +}) => { + if (isLoading) { + return ; + } -export const ReactionList = ({ referenceId, referenceType }: ReactionListProps) => { - const { reactions } = useReactionsCollection({ referenceId, referenceType }); + if (error) { + return ; + } + + if (filteredReactions.length === 0) { + return ; + } + + return ; +}; + +export const ReactionList = ({ pageId = '*', referenceId, referenceType }: ReactionListProps) => { + const componentId = 'reaction_list'; + const { reactions, error, isLoading } = useReactionsCollection({ referenceId, referenceType }); const [activeTab, setActiveTab] = useState('All'); + const { config } = useCustomReaction(); - const handleTabClick = (tab: ReactionTabType) => { + const handleTabClick = (tab: string) => { setActiveTab(tab); }; @@ -25,70 +55,48 @@ export const ReactionList = ({ referenceId, referenceType }: ReactionListProps) ? reactions : reactions.filter((reaction) => reaction.reactionName === activeTab.toLowerCase()); - if (reactions == null) return null; + if (reactions == null || !config) return null; return ( -
-
+
+
handleTabClick('All')} > - - - All {reactions.length} - - + + All {abbreviateCount(reactions.length)} +
- {(['like', 'love', 'fire'] as ReactionType[]).map((reactionType) => { + + {config.map((reactionConfigItem) => { + const { name: reactionType, image } = reactionConfigItem; + const count = reactions.filter( (reaction) => reaction.reactionName === reactionType, ).length; + return (
handleTabClick(reactionType)} > - {reactionType === 'like' && ( - - - {count} - - - )} - {reactionType === 'love' && ( - - - {count} - - - )} - {reactionType === 'fire' && ( - - - {count} - - - )} + + + + {abbreviateCount(count)} + +
); })}
-
- {filteredReactions.map((reaction) => { - return ( - -
-
- - {reaction.user?.displayName} -
-
- - ); - })} -
+ +
); }; diff --git a/src/v4/social/components/ReactionList/ReactionListEmptyState.tsx b/src/v4/social/components/ReactionList/ReactionListEmptyState.tsx new file mode 100644 index 000000000..a238af1aa --- /dev/null +++ b/src/v4/social/components/ReactionList/ReactionListEmptyState.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import styles from './ReactionList.module.css'; +import { Typography } from '~/v4/core/components'; +import SmilePlus from '~/v4/icons/SmilePlus'; + +export const ReactionListEmptyState = () => { + return ( +
+
+ +
+ + + + + + +
+
+
+ ); +}; diff --git a/src/v4/social/components/ReactionList/ReactionListError.tsx b/src/v4/social/components/ReactionList/ReactionListError.tsx new file mode 100644 index 000000000..7510eef0d --- /dev/null +++ b/src/v4/social/components/ReactionList/ReactionListError.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import styles from './ReactionList.module.css'; +import { Typography } from '~/v4/core/components'; +import Redo from '~/v4/icons/Redo'; + +export const ReactionListError = () => { + return ( +
+
+ + + + +
+
+ ); +}; diff --git a/src/v4/social/components/ReactionList/ReactionListLoadingState.tsx b/src/v4/social/components/ReactionList/ReactionListLoadingState.tsx new file mode 100644 index 000000000..57fd91356 --- /dev/null +++ b/src/v4/social/components/ReactionList/ReactionListLoadingState.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import styles from './ReactionList.module.css'; +import ReactionListSkeleton from '~/v4/icons/ReactionListSkeleton'; +import clsx from 'clsx'; + +export const ReactionListLoadingState = () => { + return ( +
+ {Array.from({ length: 8 }).map((_, index) => ( + + ))} +
+ ); +}; diff --git a/src/v4/social/components/ReactionList/ReactionListPanel.tsx b/src/v4/social/components/ReactionList/ReactionListPanel.tsx new file mode 100644 index 000000000..b268bf450 --- /dev/null +++ b/src/v4/social/components/ReactionList/ReactionListPanel.tsx @@ -0,0 +1,53 @@ +import styles from './ReactionList.module.css'; +import React, { Fragment, useMemo } from 'react'; +import { Avatar, Typography } from '~/v4/core/components'; +import FallbackReaction from '~/v4/icons/FallbackReaction'; +import { ReactionIcon } from '~/v4/social/components/ReactionList/ReactionIcon'; +import { useCustomReaction } from '~/v4/core/providers/CustomReactionProvider'; + +export const ReactionListPanel = ({ + filteredReactions, +}: { + filteredReactions: Amity.Reactor[]; +}) => { + const { config } = useCustomReaction(); + const reactionList = useMemo(() => config.map(({ name }) => name), [config]); + + return ( +
+ {filteredReactions.map((reaction) => { + return ( + +
+
+
+ + + {reaction.user?.displayName} + +
+ +
+ {reactionList.includes(reaction.reactionName) ? ( + name === reaction.reactionName)! + } + className={styles.reactionIcon} + /> + ) : ( + + )} +
+
+
+ + ); + })} +
+ ); +}; diff --git a/src/v4/utils/abbreviateCount.ts b/src/v4/utils/abbreviateCount.ts new file mode 100644 index 000000000..118a6615c --- /dev/null +++ b/src/v4/utils/abbreviateCount.ts @@ -0,0 +1,9 @@ +export const abbreviateCount = (count: number) => { + if (count >= 1000000) { + return (count / 1000000).toFixed(1) + 'M'; + } else if (count >= 1000) { + return (count / 1000).toFixed(1) + 'K'; + } else { + return count; + } +}; diff --git a/src/v4/utils/selectMessageReaction.ts b/src/v4/utils/selectMessageReaction.ts new file mode 100644 index 000000000..c35d4af04 --- /dev/null +++ b/src/v4/utils/selectMessageReaction.ts @@ -0,0 +1,23 @@ +import { ReactionRepository } from '@amityco/ts-sdk'; +import { AmityReactionType } from '~/v4/core/providers/CustomReactionProvider'; + +export const selectMessageReaction = async ({ + reactionName, + message, +}: { + reactionName: AmityReactionType['name']; + message: Amity.Message; +}) => { + const myReactions = message.myReactions || []; + + if (myReactions.includes(reactionName)) { + await ReactionRepository.removeReaction('message', message.messageId, reactionName); + return; + } + + if (myReactions.length > 0) { + await ReactionRepository.removeReaction('message', message.messageId, myReactions[0]); + } + + await ReactionRepository.addReaction('message', message.messageId, reactionName); +}; diff --git a/static/message_reaction_fire.png b/static/message_reaction_fire.png new file mode 100644 index 0000000000000000000000000000000000000000..143e7c0d9613bf59d58c7b35ae09a1383369ae83 GIT binary patch literal 4712 zcmV-u5|{0XP)!}*N zi-Pbj2rE4e34R6?eU?X<3>P{Nq7y`H2GR${9_Az|{r?&Q&hx1=IPugxJYacX24JPf z`QsQrah4}L9zC4^L?`{7m1GawPkqvT0{COfU2``Z%PeLpJ5j1s<{uO??%M!H@q`s8 zRvZkp?PHzt+OvrADK{x?1Olg*Q z=&c{k!WLyq2B4MG&v5)c%ZFobqR;_yuLK5W7ex>Pw2gHdzq4&EV)oUOFQ2msK z{1Zi&{E=4Lhk=Vt6&V2p@<5HVm!S2x%jR5qea$|`@rWp8*+hk!Kq-vF#~ajKv}7rc z&<37SSH6D^9)tmm=K+pL7)D+I8=6{iF@ZZN6BLCBgHi*Pn|K!p(u%Q;&AbvICy)Ak|Qopa0;^J zb%>QWmm6(J7jC(Gow3C86lD(`2584Y4G4n>bRlByB0-5aQZ_@EpMD1J#Q?N&Mzj5K za7s`>yH9t{`-YqxTPZygiAn1b5_qru_~pW}+OOWw_eeHS5!9?_eF#}D;GZa|707ws z&LQRqUsbBvY+-J8O9n7`p46NWtPop5VN79vU)_lpY|LxB_=#I$18APR0*Vn(B+c_n zK+Tp+SVG6fa#SlwU^sHrqC%E{I8}lR344O)bDS3DCI>bE%URIXogp@F7OO0VP&Xz} z0rmipBPN-Io&ar}eGPgEHBxB&Y0(?ku~~q!LdX|DV7Y=o3I&5YACggZX~RQ}5oD(Z zG5~vj#&mEodOw~zHTfPub?dzbI+G3Ch55s!tvIfD`TkPQiMkjBdku$gES z+;YSgVL_`=lhaWY^p)lUl0H&+c3l=gbaFBNS+_11c zM(7;KLX#jraK>payS@s8NV>QT8!!IHHB-?z06xP=b?6K(o|oxK&h-SCp9_0zOhMyV zp#d!MnUohu&ivmoJz*$plqX>V2TN&PZ4CQZH7RZjvhiXKRei(9zTz}_=NJEm#!FX# zIy|cT0rZK&lBOd`Gz=LjZ(B$}1;=6(#0Z!M*U!5&CzX{6HVaGe1OrlsORVvvY3=z} zu)XjOcrs##v@X8gQ&}wYz1y;`^LKxJ37l8c*KR}m(kV_1(}DqWu~GQe>=tIiIYOu8|=7qP6grYH!2)gQl%?Tgnzv%PqVbo};$KMrM3 z`M+yWI#}kXi28lsy)a(N(Fxlv=<+R!C`(6H~!@fro|^KY0szf(&4 z*VyZ=aH6d8-$ghC9NfEvni;JBcEKud=0rXmT^~V#D9t^-QIhn^zx#|afaLzkpgcq@ z3*h1JiW?z57b?wjONEnc%)iMnzM4Cyp|1_lWt4*}uvJMfuR-ILw=J`SHG*Uy3YmaH zaRk0>c1wMnD+%o7>wb+#T;LH z&sxuGy)aO7gXeh#lm&_L|CIiVdKS%IZyishT{Qkj=Z6 z6Ho|M|F(7h>cErL9xn2}6J#!cW0h>u23dz2^PNs;Wt`TrZa=otvT#HSRD~zP@ zu_$QuiGM#~PH~R)v8;OhxT7Cq6zJk8i4arf=k*JRbcv1C$V5?7n;0Kr$Nb6nDS`$Q z0#fKufVxG-0@pTE0&xRDQJX33sZ(E^S5ZpgUR7QfT-o!L0)>q7@8Q3p za`&|&v}iOg?JBTW|S4&ZjGuJlUhb&gVmH$3527^j6akuciTGjKRz;edx%9X$9+hHFD=C`$k%~W@#lV4BrRa6KM z*^buVxyvi=;08%`#{0WR^XIfdMz+HsqEXO`3)E^0{92$Ta$^UJX7UTTo(~X~6Lxyd zI-6XYbG?6vn>c=S{5OgX&@z2NJyVwx-MdMZMA|C#+ zMHMFF+j4_rsYjs`!&#%Cp8>X4^VjvgMHxaHyNGNn=!zW*O;N}S`4XQWox%A;zgEHq zs`*TyWP1ywqVio9#5WTTm2zYE?Brr{)5;B)^6U(go*60x^C1c78ytJcW;vz=zgb`4gFn@hzY)ALGj`6A=9G2xU^Y(z_0x^P;jS_GO zS*(2c^t?BK=y=i|C{J{LBU0Ymkwr&aCveP_-?uZ&fIUJTUMYgEhCOQxSbfM22W4oC zJ_S_T1L=-WL7^0+PP$w5$J+Zil7L$uwEnXFfUShwlA!g*}uyGMj9I&23U`wPvN~EmrKMTcI9RG(}%ePwu)yrhx1{O zcBIB~i1h|O294x@IXd%wfer;#{XqV{W}flYOYE^Uhgbn> zWza|uk~07vo~!eA+PuwzKlv zbwY(sNvj=Uun~HU^vW1#oU-AdkX{kDbuG%C5x9AU5%vG=2tqWXZ-SrtY;{|FcyhCU%95Un7D&Ob2Gz<_KRMksRMGgDrcd(2R+0pWB8APnQeYt#Z8e$erHO59 zg#R%{XkXfESz0T9BdX=eb&-9_VI$F2o4&u*=GEV_d2VTM1x7wM0i`_^*}qVs)&+>m zU15>a%hlLky22sy4&cLM zrmRhNe!?*Rdh(INF;U%u?YF*VJWq>j4EbG9J~#nGM}~PP8OSH8nB*wh00~{7NrUX3 zrz=y>&-K!=uK~1V3*S4%A2acQ{&f?9AK8@`qON}zU_bSGU3&EfP<0h(?+_%1KL+XW zG&J$y+*qZ%FG2PCbAVSF_IHLkz3qlFL!O%)0AHSKQ8vGe@dfUFN61%%0B6cm&&~AH zZ&L%9;TFDojt4nnhI3nJuGREPgH&PQsx3oC+A>O(r6o^6wsIF?Y?SMO1B?bHwQLnf&BVoh*1{#}H4X&%B# zb(HpnlW@L-*^|9e-2*p(lk~N(&Y*d{PQPIWrdE&|!K1>i#}nGjp+e6dL))t27i2rV zozE)r-5x9}P)}EO|0VVN(UOyJJR`&Hb@12aG@?TcTYX62t?MW$JiLoP>qLx^GGFo}4= zqJaF|YW)3I{P{v<>ZkMYfaP5=KrD3eOOsg}k79|AGGQJ`h$cC1$9dpGFP)T-4q8Ge4A6Hy=ayF}wC_jzUfTzLl5*Q}dfz?go_pT?ah`zB z$UE^E6}^zgB|yX=5raTfm4^|~>AO_66hBkBz%S9B(BUHjK0r#d!UI%&{FtKd(dm_h zCZ@?4NqCHB29PW9D7K9uWW=!QVSmu6$z#xv^vW~JHb8|GKXOqTDw>>v&?d??L|F!q z%kd!?a5>qH5w+fMW)bOYuRV>=j(?K@+z^6Q#T% zpj@AO|0Eh9O9~OuDq0gM^NV~BkhH2hxymz9q>Vf;$az4yf$yJxCGOqNsP~Vb)9}=J z*UOAb)t~1D;oR2-EpAFs{+Fda-1_Qau5l*Z$ZLIP@Y3Zvl!FiTn_e)=9}YZVX&u6hGTg{(Z=OLZ_*j36rpf2{jq)S4hv$Rxrd;y79k|8k`lIr;(s@4!8uA?% zKc?|$Ao=a_i?%%*M%#rj3N>v0&BmDx?tL}CG578psFnKn ziLve)cFSMta)XY27xnHo=v)1C=hF~!Z-5ssA6TCo_w@PDF_{-S!g&qv>I|b+>dzsK zZb7%d&**I&F5z)_m&Phz`0OL1s0_Pi+l5e3nQGOaMa+nRZg+VDojtM-oup;2J0w&j ziQ)7T^LE7&K>jxXPC0A<9j6za4UocVMId#$JwS@pF#myYu#|k_ZJ_Q+1cLM;`SsUM zBp1Re8_SO9>sbQ?1#T~Q*5996%c+^5h9vBWbRuv#@m4m#{&A6RDY(6Yz`?`73IUyU z&&~s+n6VUIr}328M4;HTF@O|FF7^$8grzVmzwRig)CL>?cmJ}MF)+=AGJxnxBvtO6 z6>B#U80>?eu5`xXsjv_emOo;PrUKvvPI_O8ToTp6!N`0(iaNPsc{&to!20LyFw(9! zAS*(+C4{CoR_zRsmn)FlNE1DY6djF|7s!#KKc!d@3V(ymFV<0uMBk;up53$7LQ+nP z_8Hy$n7cx!SLuZXnFkp>_;`)VJyerWOBgL5Hd7h07Ual(ai;a? z*IE(b>vltdFUS|JrYCUEJ5rtlpAc6I{iC1(vTkBO6qFHeG*=}iL|%@d`9_NqyN(m7#YFgDG=ZCI%fy1M0`n>_R&aXUUrF<}HHvis+*@{YZ= z3?vzYOD5bLf*_?stoU>FZhQJjBjp4s@A#n(*GH;yk+Uty2(_0=n^MufGvO-1yPSun z<~(>P(i;SAZqVGNl!vCudu)#LiUoN?^$bx`uOFuT2PfGZ_ApGbfdgcvhD8bn?O!xv z{BYiHDR}qjtV*=zY*Sx7!ZXE9JTt&yR1%`VAbG`WWgCN+um)|~(!Qm+jpZf27~n9< zGdL41n~Ze{oRA@8k;mr+_bNX|zp4&wc95hcx(*-t4-u=J64pxoV*mgE07*qoM6N<$ Ef&{JjfI`g0T zKkhl_cYfz_?;1GEqjuc`Ww@YTv6)?N0Lp;wWlTE)mJJ$rh+x1V6ksn{9Cw#g-M1s| zeHTo^NXM3&t8f;FfwM4bJ@+|*@frhmm3u_le}~~8)Tesk>3ddy`vU#%at`okv{iS) zu(jFd#anJ4hB+Q{rhr<{Ks!tpdYxQ-PLTF+b7P`}7~TL4z55Xa4$25eKGld zR>Ai+ycaNFk&+f^ta;obix$nW1x6g+;m3=bQvPe=&Y z0R8U1usqkGkeWN*TqxL~jxGIFn8lct0%~8muh*jOcQhs5laSdfXo7|Ku0p$%=hk$A?WPvA5 zC=W(wVbG9u4WlGj8bGa0Z{cLtAez)o^gMErYVo|{l`}y@0j4>;)iEpVbmCkQ#3F3d z{DP=#Tyk7G4$2|BkwU!S1bGZXSeDVhXM_N2>D-_sx`xO>T!n-urPy-zdVS}?Rk!!S zG{>|MP+NWPfP;LW_;k2ILUci7_G4mpFqrzao{(6T-u(|`P4Rtp3$Gly4ZDVT0xQS8 zFklNU@eE@B;$Ppheu^SZT>-V#gC6od`UQfRHGe}^i06X{Z-f-a>h}zDZ2X@5J-CI0 zPeUg*Uyte*NC*nB-n{5HKU_Nnv8JYg!`BZv$is4tU!nkjhy+OD8!)>AD6#o>haSWD zCO1Y4Ijaf}q=L~6AVOb4BQX!6ZIL^K>g?{&8tP$Dz&bc$)>sh)UP9U8X*XyS%LRUX<2 zOi_>#WRu_#j;)5!JQu_)F(3rk{S$654ae>oH+OD(U~tL`2yxzpI(KQiL^4SHoi5}; zMu-qoUkj%0+ud8c3FhS>ZV3LG!io^qMwm;S_Auu-?$0qo99H7E11-gSR*;P($No;%Wq%L1 zV80jF(PNA1Lg5N9axXszuVm+P3*A4PTFKg^fJ3VXdffBM2&ms72$WD%OQ{}6R)!5I z@USMoN61(QUSM$tKG$X-Tp&co@DBd%l@NJExgziaD(Mk7gwKH#qr!A5W?4rPV#l(1x{ye2z4g@21!yQd4P%5QN?0o5u^zXsx|p+ zy-!dODj5pY`MSi__Re0tEj^0^C{dRQ7EvxsY@8iDkBne=y9JH&VLPhTOxq1ztaiQ zt~I-0o^k-75JY5{*6yH5PcEy&)UwFstP!70(qOV8Fk~aMi?SGh;Ul3kqK3I5)<-d6 zqU-Vs!GHp5mURyk3QD4YEGt%=0PXxVniq#Osz0R~BSnCaw}i38HA$sp`e9_dOL%^%62lqI^%W5$eF8WeFx6&jDX+~A9ERF$Lx2YkDGE6^;5xx7;xtEK zlt#3M&*PoLk94R4YS#}`oE^94wFp8o9K(Z8n;gt7$9p&0E?Ww3x%FCSwF}@(BXhzZ zz55qX-~CE>Mse9CX5q%KLgB(QUyBnbVEo$ySl|6p>>(QE7>r$)NQ|PS#P!@Y#VeN# zKRg^r(3;|!77*gp(rUqBAi|c-A8uAybkUTB_oH}m2Q2*l4N&Utgktv+C;W|565bE9 zU>>yJ(`O3q9w4F4wjx0078DY7oQp9cWwyS`-;bhz%_@QXnxJvh9)&05kA(Rt5NJ+l!iA1 zMF0tinjMNFsKAnAM}Xy$JG~q%$_g`FNN{EWDm=;;o&c?+S>a}IE{9rNpdK1AYWWzl zt*%>ec<`X_D!3oog&EK_`(2I>kRU+V)mL-c!X}|ZSg~W{aIOYU9FM6u^B6N6M<|U1 zDm-G6hGW+56o6f!W=^v{U!eH=VME`}YgAWCsxghagNrczpw38zh888|kNiN*y`oDI=xf&;){41h_HeFY+X;q3jH^8O@ z2@7fB5X;w$6~dt;CP?9GL5Am!lYe{)?XeT^W{+(DK{&o`yQI0|^lW{L5$fD5!MM^S z2zJ915~qk=8Q{V~<7tEsCiQsu{@8JIbZ`s2+2iP@U&Um{Dx`yuEI3HwlS}eI3!?D3 z;3$1>AUI8b1p%Zrt)Qg);@eITNyoq5*zq(T`{k4HW{n9a{K?-BC-CNV1BE~4$WT!X z3DW8OYRMgqbKecMY$PjFdmo~|b08E1n55=5#~#@h>Vf&IDsVQ3xBSGW$8uRK>W&MR zA(+vEHbj7`L2Hq_d%|~EE1+LvcUG0OF=5aol%R5g)Coy(L0w#T&csh2hZBF;0cUF* z-!=@#e)cGGYmJNq!cp8y1mY;8ZcOuwO;RrKC@TD~gxO>jbQc5alCu$CC)GlX5ZoU? z$qX^a3rBzQaJXXLRUd`99FFkdwY%=e*qMqcE=^G&PRFQGjbxEy_J3p&-&t@6yZA=R zs37h`zQWBT7`x`SJw7Xfw4)M*ZTe1%4e`5hx70lZYOZ_p zwg=XQqGcu{+dl>edv0+l?=g@hhYM38I$A&EmLQQb0IHivmk87K1yr}FUOMu(?gCH# ziKKCmXf_HT>u6$LiLHj<6_u1E9(Z&DYPbBr333RgJG}6(-gKv<{Rz$N62b$dRiGpd z))1HLItwaMf7cpe*gq#Iz*RL{AxUw$+A{`Y6j0cQpc9%98e{YBVRHnOjgDdMn|I-K zlrR~D|E|0CfPaFKwL&3UcFjoKlInsQ1VOXD#E9WO$m@<~bC6vgI`;XSYrq>Ekxx$G z!;nV~H(;6OO+}vbnkgMX&0mPw(hf1hCLUAU9;VMaTs-Af}BGEj2~cz!52;lA&I zbtUZSgg72AULc{Jr_w1Kvsshd{!Jz97 z)gsZ^9Gor3ebG8bI0gX|c#;bt#Bjvi;H`SNcYRAG_{dSa?QXRD4j}oi)h-UCkk&l{ zx!oXXM_4jcHd+umtV8m>#)}2`OOpaRwhp?^hC_kXWoOXVH(!l!eM85_nT&-v8;{C(9#zZZOCls>PA{>(x8dd`BY&?pDZr1? z@seA2!g0;EWIc_onlQcieH0u?aja?JjSqemIDfr+)t}#uM>gIUAnz?dzH!KX_adgf z{DgFqghvpOn+F&Wgkab>Wt5YYoMoQXQpx1D$~5)!_Fet8KDTHvpzS5YJrT_SA;9hanZj`m<9w986weF%L0a{6tV=y)#A~B_eDbXOz-bj`xeFn>ki@=*)htKoS z2FQk%xnX znj|9x_CZia)?Fkqba4X%Y)W)097u;Jx{h*8d{!j5#M&l}IGD8Z-0e0jd2XcIO4if% z^!I;qjo)P0o2Hj}Kj%MUKq)bU4g6=I#a`Fgg5CO=OF(og|9XHKId4jnh z+{%i3_|j}c*Rv!2r;_oEiyEVq)tlTMd-4y3W?$5W2h9kfkt7?kM}XuwY_`O>sX_Ah zxJ;KQqe1z}Z~7ikV_g=z4d8gCma#DB_Ug+NlJ(~&?BLSjTjH z*d;>D?+1q1GcdV$Pw!R}D{&z(>F;t+$n`78;wS~0aDun|6omI~yC{~_LBUBOltd!Bx7F{B*qinU`A6LAgrD+Xj!a7d ze(d}B7v0V6ItYIuW>X){`>>74OsXuY6eX_bH$2+}+7Oiq$+kR8_@lqpv5^A|9C81y zcft=&N1kabz>m?&sxrO-+uf79!kQcXbqMfUy>^MkFDW*Qz<$^qIub-l+d3jc$xzM% zNVq~Gz;Fg;ZTBfc-JB~x#>G0#_yh*1C`*@j1dUMHJ3 z6iMUmlP1KsrWORLXUL6)p^}a7)qtkFUxu=C`{wxh~Y!dQe8y_+Es?synJW{O@YZ?C_Eq d5ZiRd{{beuF)-7h`-K1i002ovPDHLkV1h8*OFRGo literal 0 HcmV?d00001 diff --git a/static/message_reaction_like.png b/static/message_reaction_like.png new file mode 100644 index 0000000000000000000000000000000000000000..6fc08d1c7f1f62a04aed91cd1bd2f30ed2700073 GIT binary patch literal 4302 zcmV;<5HatGP)&~6&o8E#=pcuG=sI(z%rxJu1?DU6d1f>2!en6P=h&4v05`L(EIwdBM7}8b~ zC2G=6E009fqNx1Pbg0o(d9)R@NE^5XYrz<1TH4OEGj}id-s`dVx%2MK-RYfs&pG?- zvmW32*4lfYA~d;e+(FgzEzns4SVaI;AgKE93Wnd>5Xhf9h6DrtcMTB^`r||O5jePW z1J(LvpXm1k^|qAD+h=Ns85!Wd-PG+} z)8j{}L{EDqGe`3SFjH7As5OGZ=5>Y$k)vojLL>pt2-U^Oy zh|eM&BlL4JM#wA<4}9f^XE(t#+q4jH|1R1}f#k5@<*25Fx1b^OEP%m2`x#vdN(pQg z^Xvc|8nr`D;N{jAVtTL=c!Q+ z?%A}cV=~<)<$!y==Y#T$Y2l#c67S`}+%b2f#&IF0mEaT!#K?%bKI?b)jV<=f`5pyd zSlI#(-P{T;#d#bi@`#+P$8!`d;e<3JN3a!E-~RZi9Wye(y}N0%*SgE%J%g|i7%PrN z;S8FQ#JF#~7VinH7UP+_`th!~1mPo#MuTz1d-~pfG{b-xHYD)^a6n9GI(Fl$So077zFOeF`kO7h59kYEz!t%?;kHqWR zTP!2EsI;O@$A^?XTxMu<5N*2Ud;OcHWq>e&@pAP)a7rkCd(#;jc6#P>X;E+204DPKr{*&krCn))MEe^PHV3zN75Ttc^w~E zA&@v%s__?7_&E!?Xs~#HBIwS~Ki1zpp#i!A^ucZB2SjdFh*1_(qGTPzz;(8K9*ahH zVAh}5G{OSrjYzh0!zGgRT{Zsw@p# zIu<1JeM?T^d`pW-iaKo88ebtKhyp9{`KnAo!)cdKQR955IE8gG?Pp_zZc8shxZ~4p zlPbSoVt?tPaKyJW0!vY#_fHz}`eziU)Fu;9LI=~e^uZ7YJv_2+cm2eBpJ;EUjEzH9 z1hDc1Y4XC$R6ICAf|~YGd1L|=5w-QM1<<~9+OzOc?aUCtFJBsj-TThkx!`1k^xT3R zXe=DFh%fNg_4QoV7bWpm?lA}{tRn2WxN(_bc>bOZrs>W?1G1U{5+V9?cizx8E6Rtq zU@pSlH_eBKZ(9V#dLT>PS?%J4r=$@-3Hixp807dwuXwXkY@ombz z44{~|93QvZ9Fh~*8RZG#1EX{|DEum8IaPyb~o64wn^m+?Dang`8ly?tk(_r=pP zVdcVyWkMx0o5ZPZ;k&h7YA+*|RhPz-LovpI7wb?`7utM5)~89_5iOL%>Z^Hrs12sSPL zL;G;hMUQf-7T=|Ch=!iGHwz5&aQ61ip8LzfxEOiPhsb;ownMpi^MCkveDAAwhno>P)ZPT@*b z<5;Vh2BElxG?YX+sgrF*O)6j{%~*RvQ`(9Cy1-v%+bniWf1pJl zOOBR}Ny>c}-Eyq#<9Z-YV~MgpvVNBok+_M6IAwjD(JC~fEu4$7@Ii%lmU2|qL<}-L zmnNayU-I|XoH9cA)MZiux}lSQ(gb5FP4)aW<6mRgi{eyb_ zopL?wtp{)GKA!*wvUznpla-U8U8c~qKxsznd;Kg>p6W0wy7W9JH7rhqI3ns)I^aW~ zen=3MmXe{E6%;(qWG9}MH~UmdjboB^7H zfR~RB@&>7tvAje`dDs!9%>$b(iLTLX!{iQ@UikKsnm?|E*w-yD34Yti;5E*i1BwCg znQPkOOfu~4-?Um-Z*|fDosx2Y06IodBKy#eli^Y#lG+>8UX9{Jq}yC^)fGZIxO7ix3*AI zBxseGT1WfnmEI2r>ynz{2vL~lUp_<6zkC`4Up(-+iZ{d@Sa$K`OXPWb;)QPuVU(YuzwrIoRT z|LrSh;JZKXFN{?zNkOHh&THr4nvczePb_PLPhQ>zi{=#~YAp1opYRWgS*Lha2TFK;gxptI*hkH2U0D63_bg)x?#!|!Z4T5hxTgS4MO ziLZ(50aBz;x`kx!#U{7y@4TE$<$J3AGe>FaP3A!$Dz^rgknM-}H)m$awIf~wL`5Ks_eYxtR0H4N>!KpCo}zh>@G7iiW~BS5-` zz?c0k+X_182ZDkvi~^Sg<+&xtxYMwRQ!vae4WqnIh4*;G5NQ|5DKZpM87lN1S>cVw zb{bk#+dIi~H`Z`wYUD@8K>zFx=U}S@H zEeCw!U+f@T24hH(8UiiVD3kNVgR_Fmt~q;0P}W^AKOdSgJ1F5hUF*Z5Qt>&+G*3bu z$;iR+Xzya$ZtwtNecf2Pj=590|FQO(zjKQtmu+(D3l9!Ct;i;6w)Ymru9L-j@jJ>* zMxNryh8LxoE1ZRmmE|sjy%L>sDo-&>aR}P$J%NZGsqO5jjiu{^6P4>8KDO1X)lH2k zPz2`-3<6o6c`@9vP>krimP~2#m6ZotM`Y{!`XC)6c5!KyDyu7KEClg(<|FUyTGcb2 zj+4&R);#p~4nJZSWLyAHfL|QPaM%#9DHanf)ez~JJ2@6Oc`jld#p4onY&?0KDV#W_ z7&5)@{%lp(MEXr>s@k#Xtpk3+cq1?--GGl@2 zp6vh?oB&X)1`i#7a`nt#mJaQ}wyQck8Sb+96%HWK|Lh?9@sQrtU&?d2Cwz zgX}p_@+QdAT>k!#PJIOeTopPizT|xP?wyMAp-pSCV&#KJdMM5p%#(b9@;FuJ#7Re% zA+l5mDb)!l6~;TIg>k?DFpZ!=!7^hT)q<-~4JcU@klN}*23 z*q^Al5F)>&@iaHo-6^FhAto7PeIGI9Cv1M^I(MkFt+uCQ0A|o;ZN)Ykq7I!NlAFB( z)naPP2`ew2;@?JyE32W@PneiBu2*=)Vf#!K*VdFJ>#Og7%^L#m@kH23;r)ZyG9q)0 z`P|4Z%0ygEYZj?_-#K%!fC}gjgrV)Bl}aqCasjE1`UepH0-V19a&MJHf(uoV zp;9@tQY@9KqADa6Nsw9~<^c3ka0N|*6YunWCt1gicfB*a>%@-uNM?<9GQ021o0&In z-UzBQ@=h|&mjp?BH<5^wq&NwRscSica{OC<{wn_9>nJ{AdnQM9L{J@Ip&@WLSD&mB z)SMiDvSf)NRz{X0CNc%c$z+UX?9)^fy{d)lLylj$k1WbYWf`FruuOt4c_?=kOAeB- z`ok(Blmg^L@-*2py=;P4lY>QwotZ%jNFW8MflbN*Zixgn200!hjs&p=iwse%UX&vZ zBs_?-C64gB^^ze*79b~%o#QFW_#w-RCDUU2)jr+g+6s_&x(CRn6g3BfV&|0}oq}2l zkmKDWeCeX*Vw9Dz$FGp@7@%6d`Gf~u+;9Vag=#8*NBgr)WcF^P)VNgx&n}=wdnwP; zYCwoHVn@bR7FPwRc^*^U$~ibu!=9tq)BS9lPkDZ9c7N)`}i;CuMU=1-A2 zJ1yF{!J_uIy2M#%dPb^eO;1Z|Zx^(6^BM|3g%zwV{cQ8%#!&dX_ltDl(lkAJYL|Y4 z@QDvv>64FNp(wfb;|t1OFDNBAbaq&D{IfQCd*@n{svIjw<3EcQFy1{$2Ih~Kx%~Z% z=l%WrTItk@Hj09atmGRvXFczqJkd@E_O*}!d3KXK@I{RQDu!nuJX#zrQj6bi7U;(B zvlJH8QA>D$hA6iT4Px@Pl6heewB?rue@uVfD{4K^@5Obvam&9Bj0wid7IqRBXBJ41 z0eA1uX_b5UxJY5Sdr$LOk8CnRh;Cf0g}8m3>Hu1%fr&$Qi)PK2x*Ip>O+Q;V8;#EH zb!^eAW9yaxQzFlN7OgQ?07hJ$x&FXAMkBN5v;4rjYzv}nX?O7$Aa|1?a6*nBt3Acx z#SNz>&wBRz)Pr~F>lG_3-T{PUGk0>~CN({Sh46tiZG>j~Y7R)W4~AC`m%qqFPT8s4KIKmj>wA|QDB z`O&K1)6XlFqFWslkf$c1@7Yn$dp-Hj$p}IDrm}!+VG|8b@2z?mcZU6-=Y!~II!THyYCcaog zup7*>&-(#VT%iW%aOHv#brSOl%WO(US2{&390s5dTy~zL%1x4#mBmz zHu{Dr9G!9(cqtHkc-=St3V`|VxS|G%#kGJC{j7$wR41^My*)NZe@+(FE)tf{P88Pv#t$X3pjIrQLfg(QTZMHxmFE^y@ z7rU;OHb^TK5RnyNL*(*R1Y$^#d1lv;=zn%6ihZaRl4>3f5?t(a9d2rQ>lV7w4vxKsd zznrxmg?o6OG|m;MwU6gSiw|(0_Ug}20J;wp>7|U@6SF}Skca8J-EdU^`UrOgo+`|` zf>$)y$rtd87CU`C@qR01e<`?jr73>{tA?jNuS{~!keJw&IZrlx1AQRqQm}WABnFdE zIl2ZEfxoSK#-Ua+!j^qX77u*iN{$^HWb@J9K7aVwrs3-a_5BF9WZ2j}x&o3hrg)k^ zxUa=*6GX}(p7K()io8sgCJj_YtW9bb(DE9>18w_Mreq84g9t0eyr-AaEpF67#ao#) zkEmzVsjbE%k9R9~b9D%FXlgiuLy^%SIJm*SOOQiT;f~EAuUPQnY2_4=S95%gY0i)E z2Pa_-bJRCm zfhDZXL0gVn@*te0h^bF1M;Xd8kcl>*jD>upI9rLw@p*w(#WDH^YQv^LS+S?S$LIeC X(VE9x=t%rf00000NkvXXu0mjfeCJet literal 0 HcmV?d00001 From eca154ad8ddfb6bdbae6a02300781f7a94b98e31 Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 24 May 2024 13:06:21 +0700 Subject: [PATCH 77/88] fix: ASC-22623 - story video (#349) * fix: story video * fix: video * fix: remove console.log --- .../social/internal-components/StoryViewer/Renderers/Video.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx index 6c9c18432..a5d2d6224 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx @@ -235,7 +235,7 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler data-qa-anchor="video_view" ref={vid} style={computedStyles} - src={story?.url || undefined} + src={story?.videoData?.fileUrl || story?.videoData?.videoUrl?.original} controls={false} onLoadedData={videoLoaded} playsInline From 596d1587913d46c2467615b0fcafefca619238e0 Mon Sep 17 00:00:00 2001 From: Kiattirat Sujjapongse Date: Fri, 24 May 2024 14:10:01 +0700 Subject: [PATCH 78/88] feat(reaction): update condition (#350) --- .../components/LiveChatMessageContent/MessageAction/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v4/chat/components/LiveChatMessageContent/MessageAction/index.tsx b/src/v4/chat/components/LiveChatMessageContent/MessageAction/index.tsx index 5f96e94b0..38bfc9136 100644 --- a/src/v4/chat/components/LiveChatMessageContent/MessageAction/index.tsx +++ b/src/v4/chat/components/LiveChatMessageContent/MessageAction/index.tsx @@ -104,7 +104,7 @@ const MessageAction = ({
)} */} - {isModerator && !isOwner && ( + {(isModerator || !isOwner) && (
Date: Fri, 24 May 2024 15:50:50 +0700 Subject: [PATCH 79/88] fix(reaction): ASC-22611 - update missing ui and action to remove reaction from message (#348) * fix: ASC-22611 - update ui * fix(reaction): missing ui and action to remove reaction from message * fix: ASC-22611 - update ui * fix: ASC-22611 - update ui * fix(reaction): hide 0 reaction count * fix(reaction): update pr * fix(reaction): export reaction list --- src/i18n/en.json | 3 +- src/index.ts | 4 + .../index.tsx | 0 src/v4/chat/hooks/useReaction.ts | 18 ++++ .../ReactionList/ReactionList.module.css | 25 +++++- .../components/ReactionList/ReactionList.tsx | 85 +++++++++++-------- .../ReactionList/ReactionListPanel.tsx | 15 ++++ 7 files changed, 112 insertions(+), 38 deletions(-) delete mode 100644 src/v4/chat/components/AmityLiveChatMessageQuickReaction/index.tsx create mode 100644 src/v4/chat/hooks/useReaction.ts diff --git a/src/i18n/en.json b/src/i18n/en.json index 154427c33..6e52a2f06 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -438,5 +438,6 @@ "livechat.error.sendingMessage.notAllowLink": "Your message wasn’t sent as it contained a link that’s not allowed.", "livechat.reaction.errorOnload": "Unable to load reactions", "livechat.reaction.emptyState": "No reactions yet", - "livechat.reaction.emptyState.description": "Be the first to react to this message!" + "livechat.reaction.emptyState.description": "Be the first to react to this message!", + "livechat.reaction.label.removeReaction": "Tap to remove reaction" } diff --git a/src/index.ts b/src/index.ts index 3ff2fb0c9..835c8c3ef 100644 --- a/src/index.ts +++ b/src/index.ts @@ -38,9 +38,13 @@ export { export { MessageReactionPreview as AmityLiveChatMessageReactionPreview } from '~/v4/chat/components/MessageReactionPreview'; export { MessageReactionPicker as AmityLiveChatMessageReactionPicker } from '~/v4/chat/components/MessageReactionPicker'; export { MessageQuickReaction as AmityLiveChatMessageQuickReaction } from '~/v4/chat/components/MessageQuickReaction'; +export { ReactionList as AmityReactionList } from '~/v4/social/components/ReactionList'; import type { AmityMessageActionType } from '~/v4/chat/components'; +import type { ReactionListProps } from '~/v4/social/components/ReactionList'; + export type { AmityMessageActionType }; +export type { ReactionListProps as AmityReactionListProps }; export { AmityLiveChatPage } from '~/v4/chat/pages'; diff --git a/src/v4/chat/components/AmityLiveChatMessageQuickReaction/index.tsx b/src/v4/chat/components/AmityLiveChatMessageQuickReaction/index.tsx deleted file mode 100644 index e69de29bb..000000000 diff --git a/src/v4/chat/hooks/useReaction.ts b/src/v4/chat/hooks/useReaction.ts new file mode 100644 index 000000000..168aabfd9 --- /dev/null +++ b/src/v4/chat/hooks/useReaction.ts @@ -0,0 +1,18 @@ +import { ReactionRepository } from '@amityco/ts-sdk'; + +const useReaction = (referenceType: Amity.ReactableType, referenceId: string) => { + const addReaction = async (reaction: string) => { + await ReactionRepository.addReaction(referenceType, referenceId, reaction); + }; + + const removeReaction = async (reaction: string) => { + await ReactionRepository.removeReaction(referenceType, referenceId, reaction); + }; + + return { + addReaction, + removeReaction, + }; +}; + +export default useReaction; diff --git a/src/v4/social/components/ReactionList/ReactionList.module.css b/src/v4/social/components/ReactionList/ReactionList.module.css index 6f1c28c47..59cc3b21d 100644 --- a/src/v4/social/components/ReactionList/ReactionList.module.css +++ b/src/v4/social/components/ReactionList/ReactionList.module.css @@ -5,11 +5,26 @@ height: 100%; } +.tabListContainer { + display: flex; + align-items: center; + overflow-x: auto; + position: relative; + width: 100%; + scrollbar-width: none; /* For Firefox */ + -ms-overflow-style: none; /* For Internet Explorer and Edge */ +} + +.tabListContainer::-webkit-scrollbar { + display: none; /* For Chrome, Safari, and Opera */ +} + .tabList { display: flex; - gap: var(--asc-spacing-s2); + gap: var(--asc-spacing-s1); border-bottom: 1px solid var(--asc-color-base-shade4); - overflow: auto; + width: 100%; + min-width: max-content; } .tabItem { @@ -21,7 +36,7 @@ border-bottom: transparent; } -.tabItem.active { +.tabItem[data-active='true'] { color: var(--asc-color-primary-default); border-bottom: 1px solid var(--asc-color-primary-default); } @@ -105,6 +120,10 @@ gap: var(--asc-spacing-xxs2); } +.removeBtn { + cursor: pointer; + color: var(--asc-color-base-shade1); +} @keyframes skeletonPulse { 0% { diff --git a/src/v4/social/components/ReactionList/ReactionList.tsx b/src/v4/social/components/ReactionList/ReactionList.tsx index b6d6a9b3d..c254682f3 100644 --- a/src/v4/social/components/ReactionList/ReactionList.tsx +++ b/src/v4/social/components/ReactionList/ReactionList.tsx @@ -9,6 +9,7 @@ import { ReactionListPanel } from '~/v4/social/components/ReactionList/ReactionL import { ReactionListError } from '~/v4/social/components/ReactionList/ReactionListError'; import { ReactionListEmptyState } from '~/v4/social/components/ReactionList/ReactionListEmptyState'; import { ReactionListLoadingState } from '~/v4/social/components/ReactionList/ReactionListLoadingState'; +import useReaction from '~/v4/chat/hooks/useReaction'; interface ReactionListProps { pageId: string; @@ -19,10 +20,12 @@ interface ReactionListProps { const RenderCondition = ({ filteredReactions, isLoading, + removeReaction, error, }: { filteredReactions: Amity.Reactor[]; isLoading: boolean; + removeReaction: (reaction: string) => Promise; error: Error | null; }) => { if (isLoading) { @@ -37,7 +40,9 @@ const RenderCondition = ({ return ; } - return ; + return ( + + ); }; export const ReactionList = ({ pageId = '*', referenceId, referenceType }: ReactionListProps) => { @@ -45,6 +50,7 @@ export const ReactionList = ({ pageId = '*', referenceId, referenceType }: React const { reactions, error, isLoading } = useReactionsCollection({ referenceId, referenceType }); const [activeTab, setActiveTab] = useState('All'); const { config } = useCustomReaction(); + const { removeReaction } = useReaction(referenceType, referenceId); const handleTabClick = (tab: string) => { setActiveTab(tab); @@ -59,44 +65,55 @@ export const ReactionList = ({ pageId = '*', referenceId, referenceType }: React return (
-
-
handleTabClick('All')} - > - - All {abbreviateCount(reactions.length)} - -
+
+
+
handleTabClick('All')} + > + + All {abbreviateCount(reactions.length)} + +
- {config.map((reactionConfigItem) => { - const { name: reactionType, image } = reactionConfigItem; + {config.map((reactionConfigItem) => { + const { name: reactionType, image } = reactionConfigItem; - const count = reactions.filter( - (reaction) => reaction.reactionName === reactionType, - ).length; + const count = reactions.filter( + (reaction) => reaction.reactionName === reactionType, + ).length; - return ( -
handleTabClick(reactionType)} - > - - - - {abbreviateCount(count)} - - -
- ); - })} + if (!count) return null; + + return ( +
handleTabClick(reactionType)} + > + + + + {abbreviateCount(count)} + + +
+ ); + })} +
- +
); }; diff --git a/src/v4/social/components/ReactionList/ReactionListPanel.tsx b/src/v4/social/components/ReactionList/ReactionListPanel.tsx index b268bf450..d8294724d 100644 --- a/src/v4/social/components/ReactionList/ReactionListPanel.tsx +++ b/src/v4/social/components/ReactionList/ReactionListPanel.tsx @@ -4,12 +4,17 @@ import { Avatar, Typography } from '~/v4/core/components'; import FallbackReaction from '~/v4/icons/FallbackReaction'; import { ReactionIcon } from '~/v4/social/components/ReactionList/ReactionIcon'; import { useCustomReaction } from '~/v4/core/providers/CustomReactionProvider'; +import useSDK from '~/core/hooks/useSDK'; +import { FormattedMessage } from 'react-intl'; export const ReactionListPanel = ({ filteredReactions, + removeReaction, }: { filteredReactions: Amity.Reactor[]; + removeReaction: (reaction: string) => Promise; }) => { + const { currentUserId } = useSDK(); const { config } = useCustomReaction(); const reactionList = useMemo(() => config.map(({ name }) => name), [config]); @@ -28,6 +33,16 @@ export const ReactionListPanel = ({ /> {reaction.user?.displayName} + {currentUserId === reaction.user?.userId && ( + <> +
+
removeReaction(reaction.reactionName)}> + + + +
+ + )}
From 1799fe5202f198338d6076091781f8df12560e3e Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Fri, 24 May 2024 17:40:19 +0700 Subject: [PATCH 80/88] fix: create story condition (#352) --- src/i18n/en.json | 2 ++ .../social/components/StoryTab/StoryTabCommunity.tsx | 12 +++++++++--- .../StoryViewer/Renderers/Image.tsx | 4 +++- .../StoryViewer/Renderers/Video.tsx | 6 ++++-- 4 files changed, 18 insertions(+), 6 deletions(-) diff --git a/src/i18n/en.json b/src/i18n/en.json index 6e52a2f06..3afa6e9c5 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -386,6 +386,8 @@ "storyDraft.button.shareStory": "Share story", + "storyTab.title": "Story", + "select.chatType.item": "{answerType} type", "chatComposer.label.channelId": "Channel ID", "chatComposer.label.displayName": "Display Name", diff --git a/src/v4/social/components/StoryTab/StoryTabCommunity.tsx b/src/v4/social/components/StoryTab/StoryTabCommunity.tsx index d804de851..915237160 100644 --- a/src/v4/social/components/StoryTab/StoryTabCommunity.tsx +++ b/src/v4/social/components/StoryTab/StoryTabCommunity.tsx @@ -19,6 +19,8 @@ import { StoryTitle, StoryWrapper, } from './styles'; +import { isAdmin } from '~/helpers/permissions'; +import { FormattedMessage } from 'react-intl'; interface StoryTabCommunityFeedProps { communityId: string; @@ -53,8 +55,10 @@ export const StoryTabCommunityFeed: React.FC = ({ co onClickStory(communityId, 'communityFeed'); }; - const { client } = useSDK(); - const hasStoryPermission = checkStoryPermission(client, communityId); + const { userRoles, client } = useSDK(); + const isGlobalAdmin = isAdmin(userRoles); + const hasStoryPermission = checkStoryPermission(client, communityId) || isGlobalAdmin; + const hasStoryRing = stories?.length > 0; const hasUnSeen = stories.some((story) => !story?.isSeen); const uploading = stories.some((story) => story?.syncState === 'syncing'); @@ -92,7 +96,9 @@ export const StoryTabCommunityFeed: React.FC = ({ co {isErrored && } - Story + + + ); diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx index 0b60e110c..93eb225fc 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx @@ -25,6 +25,7 @@ import useUser from '~/core/hooks/useUser'; import { BottomSheet } from '~/v4/core/components/BottomSheet'; import { Typography } from '~/v4/core/components'; import { Button } from '~/v4/core/components/Button'; +import { isAdmin } from '~/helpers/permissions'; export const renderer: CustomRenderer = ({ story, action, config }) => { const { formatMessage } = useIntl(); @@ -75,7 +76,8 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { const isOfficial = community?.isOfficial || false; const isCreator = creator?.userId === user?.userId; - const isModerator = checkStoryPermission(client, community?.communityId); + const isGlobalAdmin = isAdmin(user?.roles); + const isModerator = checkStoryPermission(client, community?.communityId) || isGlobalAdmin; const computedStyles = { ...rendererStyles.storyContent, diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx index a5d2d6224..d7fc9cd42 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx @@ -4,7 +4,7 @@ import { Tester } from 'react-insta-stories/dist/interfaces'; import useImage from '~/core/hooks/useImage'; import { checkStoryPermission, formatTimeAgo } from '~/utils'; import { useNavigation } from '~/social/providers/NavigationProvider'; -import { FormattedMessage, useIntl } from 'react-intl'; +import { useIntl } from 'react-intl'; import useSDK from '~/core/hooks/useSDK'; @@ -24,6 +24,7 @@ import { motion, PanInfo, useAnimationControls } from 'framer-motion'; import rendererStyles from './Renderers.module.css'; import useUser from '~/core/hooks/useUser'; +import { isAdmin } from '~/helpers/permissions'; export const renderer: CustomRenderer = ({ story, action, config, messageHandler }) => { const { formatMessage } = useIntl(); @@ -74,8 +75,9 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler '' ); - const isModerator = checkStoryPermission(client, community?.communityId); const isCreator = creator?.userId === user?.userId; + const isGlobalAdmin = isAdmin(user?.roles); + const isModerator = checkStoryPermission(client, community?.communityId) || isGlobalAdmin; const computedStyles = { ...storyContentStyles, From 7d6e687c3778ed2f1211d9c64a8a111cac8069bb Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Mon, 27 May 2024 10:55:19 +0700 Subject: [PATCH 81/88] fix: ASC-222740 - create story condition for global-admin role (#354) * fix: create story condition * fix: condition * fix: condition * fix: condition --- src/v4/social/components/StoryTab/StoryTabCommunity.tsx | 8 +++++--- .../internal-components/StoryViewer/Renderers/Image.tsx | 2 +- .../internal-components/StoryViewer/Renderers/Video.tsx | 2 +- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/v4/social/components/StoryTab/StoryTabCommunity.tsx b/src/v4/social/components/StoryTab/StoryTabCommunity.tsx index 915237160..faa615072 100644 --- a/src/v4/social/components/StoryTab/StoryTabCommunity.tsx +++ b/src/v4/social/components/StoryTab/StoryTabCommunity.tsx @@ -21,6 +21,7 @@ import { } from './styles'; import { isAdmin } from '~/helpers/permissions'; import { FormattedMessage } from 'react-intl'; +import useUser from '~/core/hooks/useUser'; interface StoryTabCommunityFeedProps { communityId: string; @@ -55,9 +56,10 @@ export const StoryTabCommunityFeed: React.FC = ({ co onClickStory(communityId, 'communityFeed'); }; - const { userRoles, client } = useSDK(); - const isGlobalAdmin = isAdmin(userRoles); - const hasStoryPermission = checkStoryPermission(client, communityId) || isGlobalAdmin; + const { currentUserId, client } = useSDK(); + const user = useUser(currentUserId); + const isGlobalAdmin = isAdmin(user?.roles); + const hasStoryPermission = isGlobalAdmin || checkStoryPermission(client, communityId); const hasStoryRing = stories?.length > 0; const hasUnSeen = stories.some((story) => !story?.isSeen); diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx index 93eb225fc..5dcb410e7 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx @@ -77,7 +77,7 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { const isOfficial = community?.isOfficial || false; const isCreator = creator?.userId === user?.userId; const isGlobalAdmin = isAdmin(user?.roles); - const isModerator = checkStoryPermission(client, community?.communityId) || isGlobalAdmin; + const isModerator = isGlobalAdmin || checkStoryPermission(client, community?.communityId); const computedStyles = { ...rendererStyles.storyContent, diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx index d7fc9cd42..579280275 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx @@ -77,7 +77,7 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler const isCreator = creator?.userId === user?.userId; const isGlobalAdmin = isAdmin(user?.roles); - const isModerator = checkStoryPermission(client, community?.communityId) || isGlobalAdmin; + const isModerator = isGlobalAdmin || checkStoryPermission(client, community?.communityId); const computedStyles = { ...storyContentStyles, From 0c95669a273a8a97c2fc99f8bb8262e8a151ac42 Mon Sep 17 00:00:00 2001 From: Kiattirat Sujjapongse Date: Mon, 27 May 2024 13:41:19 +0700 Subject: [PATCH 82/88] fix(reaction): ASC-22622 - fix reaction UI bugs (#355) * fix(reaction): update pagination * fix(reaction): use total reactor count from message / story / post / comments * fix(reaction): update ui * fix(reaction): update ui --- package.json | 2 +- pnpm-lock.yaml | 28 ++-- src/i18n/en.json | 2 +- src/v4/chat/hooks/useReactionByReference.ts | 47 +++++++ .../ReactionList/ReactionList.module.css | 20 ++- .../components/ReactionList/ReactionList.tsx | 121 +++++++++++++++--- .../ReactionList/ReactionListPanel.tsx | 108 ++++++++++------ .../components/ReactionList/styles.module.css | 0 8 files changed, 247 insertions(+), 81 deletions(-) create mode 100644 src/v4/chat/hooks/useReactionByReference.ts create mode 100644 src/v4/social/components/ReactionList/styles.module.css diff --git a/package.json b/package.json index 742139c97..9b40a2017 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "react-dom": ">=17.0.2" }, "devDependencies": { - "@amityco/ts-sdk": "^6.23.0", + "@amityco/ts-sdk": "^6.25.0", "@storybook/addon-a11y": "^7.6.7", "@storybook/addon-actions": "^7.6.7", "@storybook/addon-backgrounds": "^7.6.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 295db7885..faf632901 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -104,8 +104,8 @@ dependencies: devDependencies: '@amityco/ts-sdk': - specifier: ^6.23.0 - version: 6.23.0 + specifier: ^6.25.0 + version: 6.25.0 '@storybook/addon-a11y': specifier: ^7.6.7 version: 7.6.18 @@ -240,7 +240,7 @@ devDependencies: version: 7.1.1(webpack@5.91.0) ts-jest: specifier: ^29.1.1 - version: 29.1.2(@babel/core@7.24.4)(esbuild@0.18.20)(jest@29.7.0)(typescript@4.9.5) + version: 29.1.2(@babel/core@7.24.4)(esbuild@0.19.12)(jest@29.7.0)(typescript@4.9.5) tsup: specifier: ^7.3.0 version: 7.3.0(postcss@8.4.38)(typescript@4.9.5) @@ -263,8 +263,8 @@ packages: resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==} dev: true - /@amityco/ts-sdk@6.23.0: - resolution: {integrity: sha512-0wLdz4h8hojNcM7WFpgk/sGCbe3ir+lCHu9+yxmSckMoK18/vOq7jSZNHCkElM99smqtU8R5+EoLurQTSW45Gw==} + /@amityco/ts-sdk@6.25.0: + resolution: {integrity: sha512-TLqxGVWZMqP0LdwR+9iGGx2a0G3GqoDF1gxC543CCg5dP+D0BsEqohiPl4x+Svxdi6L3975D5+t3X3HjG4CBWg==} engines: {node: '>=12', npm: '>=6'} dependencies: agentkeepalive: 4.5.0 @@ -7202,7 +7202,7 @@ packages: dependencies: loader-utils: 2.0.4 schema-utils: 3.3.0 - webpack: 5.91.0(esbuild@0.18.20) + webpack: 5.91.0(esbuild@0.19.12) dev: true /file-system-cache@2.3.0: @@ -11551,7 +11551,7 @@ packages: dependencies: file-loader: 6.2.0(webpack@5.91.0) loader-utils: 2.0.4 - webpack: 5.91.0(esbuild@0.18.20) + webpack: 5.91.0(esbuild@0.19.12) dev: true /synchronous-promise@2.0.17: @@ -11624,7 +11624,7 @@ packages: unique-string: 2.0.0 dev: true - /terser-webpack-plugin@5.3.10(esbuild@0.18.20)(webpack@5.91.0): + /terser-webpack-plugin@5.3.10(esbuild@0.19.12)(webpack@5.91.0): resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==} engines: {node: '>= 10.13.0'} peerDependencies: @@ -11641,12 +11641,12 @@ packages: optional: true dependencies: '@jridgewell/trace-mapping': 0.3.25 - esbuild: 0.18.20 + esbuild: 0.19.12 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.30.4 - webpack: 5.91.0(esbuild@0.18.20) + webpack: 5.91.0(esbuild@0.19.12) dev: true /terser@5.30.4: @@ -11797,7 +11797,7 @@ packages: resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} dev: true - /ts-jest@29.1.2(@babel/core@7.24.4)(esbuild@0.18.20)(jest@29.7.0)(typescript@4.9.5): + /ts-jest@29.1.2(@babel/core@7.24.4)(esbuild@0.19.12)(jest@29.7.0)(typescript@4.9.5): resolution: {integrity: sha512-br6GJoH/WUX4pu7FbZXuWGKGNDuU7b8Uj77g/Sp7puZV6EXzuByl6JrECvm0MzVzSTkSHWTihsXt+5XYER5b+g==} engines: {node: ^16.10.0 || ^18.0.0 || >=20.0.0} hasBin: true @@ -11820,7 +11820,7 @@ packages: dependencies: '@babel/core': 7.24.4 bs-logger: 0.2.6 - esbuild: 0.18.20 + esbuild: 0.19.12 fast-json-stable-stringify: 2.1.0 jest: 29.7.0 jest-util: 29.7.0 @@ -12394,7 +12394,7 @@ packages: resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==} dev: true - /webpack@5.91.0(esbuild@0.18.20): + /webpack@5.91.0(esbuild@0.19.12): resolution: {integrity: sha512-rzVwlLeBWHJbmgTC/8TvAcu5vpJNII+MelQpylD4jNERPwpBJOE2lEcko1zJX3QJeLjTTAnQxn/OJ8bjDzVQaw==} engines: {node: '>=10.13.0'} hasBin: true @@ -12425,7 +12425,7 @@ packages: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(esbuild@0.18.20)(webpack@5.91.0) + terser-webpack-plugin: 5.3.10(esbuild@0.19.12)(webpack@5.91.0) watchpack: 2.4.1 webpack-sources: 3.2.3 transitivePeerDependencies: diff --git a/src/i18n/en.json b/src/i18n/en.json index 3afa6e9c5..fc61f27f0 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -441,5 +441,5 @@ "livechat.reaction.errorOnload": "Unable to load reactions", "livechat.reaction.emptyState": "No reactions yet", "livechat.reaction.emptyState.description": "Be the first to react to this message!", - "livechat.reaction.label.removeReaction": "Tap to remove reaction" + "livechat.reaction.label.removeReaction": "Click to remove reaction" } diff --git a/src/v4/chat/hooks/useReactionByReference.ts b/src/v4/chat/hooks/useReactionByReference.ts new file mode 100644 index 000000000..0b8576309 --- /dev/null +++ b/src/v4/chat/hooks/useReactionByReference.ts @@ -0,0 +1,47 @@ +import { + CommentRepository, + MessageRepository, + PostRepository, + StoryRepository, +} from '@amityco/ts-sdk'; +import { useEffect, useState } from 'react'; + +const useReactionByReference = (referenceType: Amity.ReactableType, referenceId: string) => { + const [reactionCount, setReactionCount] = useState(0); + const [reactions, setReactions] = useState>({}); + const [myReaction, setMyReaction] = useState(null); + + const updateReaction = ({ + data, + loading, + error, + }: Amity.LiveObject) => { + if (loading || error) return; + + setReactionCount(data.reactionsCount); + setReactions(data.reactions); + setMyReaction(data.myReaction); + }; + + useEffect(() => { + if (referenceType === 'message') { + MessageRepository.getMessage(referenceId, updateReaction); + } else if (referenceType === 'story') { + StoryRepository.getStoryByStoryId(referenceId, updateReaction); + } else if (referenceType === 'comment') { + CommentRepository.getComment(referenceId, updateReaction); + } else if (referenceType === 'post') { + PostRepository.getPost(referenceId, updateReaction); + } else { + throw new Error('Unsupported reference type'); + } + }, [referenceId, referenceType]); + + return { + reactions, + reactionCount, + myReaction, + }; +}; + +export default useReactionByReference; diff --git a/src/v4/social/components/ReactionList/ReactionList.module.css b/src/v4/social/components/ReactionList/ReactionList.module.css index 59cc3b21d..04c531acc 100644 --- a/src/v4/social/components/ReactionList/ReactionList.module.css +++ b/src/v4/social/components/ReactionList/ReactionList.module.css @@ -49,8 +49,9 @@ .userList { display: flex; - flex-wrap: wrap; gap: var(--asc-spacing-s1); + width: 100%; + flex-direction: column; } .userItem { @@ -58,7 +59,6 @@ align-items: center; gap: var(--asc-spacing-s1); background: var(--asc-color-base-background); - padding: var(--asc-spacing-s1); border-radius: var(--asc-border-radius-sm); width: 100%; border-bottom: 1px solid var(--asc-color-base-shade4); @@ -67,6 +67,7 @@ .userDetailsContainer { display: flex; color: var(--asc-color-base-default); + padding: var(--asc-spacing-s1); justify-content: space-between; width: 100%; } @@ -135,4 +136,19 @@ 100% { opacity: 0.6; } +} + +.infiniteScrollContainer { + display: flex; + flex-grow: 1; + overflow: auto; + width: 100%; + + > div { + width: 100%; + } +} + +.reactionPanel { + height: 100%; } \ No newline at end of file diff --git a/src/v4/social/components/ReactionList/ReactionList.tsx b/src/v4/social/components/ReactionList/ReactionList.tsx index c254682f3..66b4afbbd 100644 --- a/src/v4/social/components/ReactionList/ReactionList.tsx +++ b/src/v4/social/components/ReactionList/ReactionList.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useMemo, useRef, useState } from 'react'; import styles from './ReactionList.module.css'; import { useReactionsCollection } from '~/v4/social/hooks/collections/useReactionsCollection'; import { Typography } from '~/v4/core/components'; @@ -10,6 +10,8 @@ import { ReactionListError } from '~/v4/social/components/ReactionList/ReactionL import { ReactionListEmptyState } from '~/v4/social/components/ReactionList/ReactionListEmptyState'; import { ReactionListLoadingState } from '~/v4/social/components/ReactionList/ReactionListLoadingState'; import useReaction from '~/v4/chat/hooks/useReaction'; +import useReactionByReference from '~/v4/chat/hooks/useReactionByReference'; +import FallbackReaction from '~/v4/icons/FallbackReaction'; interface ReactionListProps { pageId: string; @@ -17,16 +19,36 @@ interface ReactionListProps { referenceType: Amity.ReactableType; } +const UNKNOWN_TAB = 'unknown'; + +const filterReactionsByTab = ( + reactions: Amity.Reactor[], + activeTab: string, + allConfigReactions: string[], +) => { + if (activeTab === 'All') return reactions; + if (activeTab === UNKNOWN_TAB) { + return reactions.filter((reaction) => !allConfigReactions.includes(reaction.reactionName)); + } + return reactions.filter((reaction) => reaction.reactionName === activeTab.toLowerCase()); +}; + const RenderCondition = ({ filteredReactions, + hasMore, + loadMore, isLoading, removeReaction, error, + currentRef, }: { filteredReactions: Amity.Reactor[]; isLoading: boolean; + hasMore: boolean; + loadMore: () => void; removeReaction: (reaction: string) => Promise; error: Error | null; + currentRef: HTMLDivElement | null; }) => { if (isLoading) { return ; @@ -37,18 +59,40 @@ const RenderCondition = ({ } if (filteredReactions.length === 0) { + if (isLoading) { + return ; + } + return ; } return ( - + ); }; export const ReactionList = ({ pageId = '*', referenceId, referenceType }: ReactionListProps) => { const componentId = 'reaction_list'; - const { reactions, error, isLoading } = useReactionsCollection({ referenceId, referenceType }); + const { reactions, error, isLoading, hasMore, loadMore } = useReactionsCollection({ + referenceId, + referenceType, + limit: 25, + }); + + const { reactions: allReacted, reactionCount } = useReactionByReference( + referenceType, + referenceId, + ); + const [activeTab, setActiveTab] = useState('All'); + const containerRef = useRef(null); const { config } = useCustomReaction(); const { removeReaction } = useReaction(referenceType, referenceId); @@ -56,13 +100,31 @@ export const ReactionList = ({ pageId = '*', referenceId, referenceType }: React setActiveTab(tab); }; - const filteredReactions = - activeTab === 'All' - ? reactions - : reactions.filter((reaction) => reaction.reactionName === activeTab.toLowerCase()); - if (reactions == null || !config) return null; + const allConfigReactions = useMemo( + () => config.map((reactionConfigItem) => reactionConfigItem.name), + [config], + ); + + const unknownReaction = useMemo( + () => + Object.keys(allReacted).filter((reaction) => { + return !allConfigReactions.includes(reaction); + }), + [allReacted], + ); + + const totalUnknownReactionCount = useMemo( + () => unknownReaction.reduce((acc, curr) => acc + allReacted[curr], 0), + [allReacted], + ); + + const filteredReactions = useMemo( + () => filterReactionsByTab(reactions, activeTab, allConfigReactions), + [reactions, activeTab], + ); + return (
@@ -73,18 +135,14 @@ export const ReactionList = ({ pageId = '*', referenceId, referenceType }: React onClick={() => handleTabClick('All')} > - All {abbreviateCount(reactions.length)} + All {abbreviateCount(reactionCount)}
{config.map((reactionConfigItem) => { const { name: reactionType, image } = reactionConfigItem; - const count = reactions.filter( - (reaction) => reaction.reactionName === reactionType, - ).length; - - if (!count) return null; + if (!allReacted[reactionType]) return null; return (
- {abbreviateCount(count)} + {abbreviateCount(allReacted[reactionType])}
); })} + + {unknownReaction.length > 0 && ( +
handleTabClick(UNKNOWN_TAB)} + > + + + + {abbreviateCount(totalUnknownReactionCount)} + + +
+ )}
- +
+ +
); }; diff --git a/src/v4/social/components/ReactionList/ReactionListPanel.tsx b/src/v4/social/components/ReactionList/ReactionListPanel.tsx index d8294724d..6bfbe4f99 100644 --- a/src/v4/social/components/ReactionList/ReactionListPanel.tsx +++ b/src/v4/social/components/ReactionList/ReactionListPanel.tsx @@ -6,63 +6,87 @@ import { ReactionIcon } from '~/v4/social/components/ReactionList/ReactionIcon'; import { useCustomReaction } from '~/v4/core/providers/CustomReactionProvider'; import useSDK from '~/core/hooks/useSDK'; import { FormattedMessage } from 'react-intl'; +import InfiniteScroll from 'react-infinite-scroll-component'; export const ReactionListPanel = ({ filteredReactions, removeReaction, + hasMore, + loadMore, + isLoading, + currentRef, }: { filteredReactions: Amity.Reactor[]; removeReaction: (reaction: string) => Promise; + hasMore: boolean; + loadMore: () => void; + isLoading: boolean; + currentRef: HTMLDivElement | null; }) => { const { currentUserId } = useSDK(); const { config } = useCustomReaction(); const reactionList = useMemo(() => config.map(({ name }) => name), [config]); + if (!currentRef || !filteredReactions) return null; + return ( -
- {filteredReactions.map((reaction) => { - return ( - -
-
-
- - - {reaction.user?.displayName} - {currentUserId === reaction.user?.userId && ( - <> -
-
removeReaction(reaction.reactionName)}> - - - -
- - )} - -
+
+ Loading... : null} + dataLength={filteredReactions.length || 0} + style={{ display: 'flex', width: '100%' }} + height={currentRef.clientHeight} + > +
+ {filteredReactions.map((reaction) => { + return ( + +
+
+
+ + + {reaction.user?.displayName} + {currentUserId === reaction.user?.userId && ( + <> +
+
removeReaction(reaction.reactionName)}> + + + +
+ + )} + +
-
- {reactionList.includes(reaction.reactionName) ? ( - name === reaction.reactionName)! - } - className={styles.reactionIcon} - /> - ) : ( - - )} +
+ {reactionList.includes(reaction.reactionName) ? ( + name === reaction.reactionName)! + } + className={styles.reactionIcon} + /> + ) : ( + + )} +
+
-
-
- - ); - })} + + ); + })} +
+
); }; diff --git a/src/v4/social/components/ReactionList/styles.module.css b/src/v4/social/components/ReactionList/styles.module.css new file mode 100644 index 000000000..e69de29bb From c138b5739d74d78f41877d8cdb7f68216582b6de Mon Sep 17 00:00:00 2001 From: Chaiwat Trisuwan Date: Mon, 27 May 2024 15:59:22 +0700 Subject: [PATCH 83/88] fix: ASC-22740 - create story permission condition to create story (#356) * fix: create story condition * fix: condition * fix: condition * fix: condition * fix: condition --- .../components/StoryTab/StoryTabCommunity.tsx | 6 ++++-- .../StoryViewer/Renderers/Image.tsx | 10 ++++++---- .../StoryViewer/Renderers/Video.tsx | 13 +++++++------ 3 files changed, 17 insertions(+), 12 deletions(-) diff --git a/src/v4/social/components/StoryTab/StoryTabCommunity.tsx b/src/v4/social/components/StoryTab/StoryTabCommunity.tsx index faa615072..0e23dccfb 100644 --- a/src/v4/social/components/StoryTab/StoryTabCommunity.tsx +++ b/src/v4/social/components/StoryTab/StoryTabCommunity.tsx @@ -19,7 +19,7 @@ import { StoryTitle, StoryWrapper, } from './styles'; -import { isAdmin } from '~/helpers/permissions'; +import { isAdmin, isModerator } from '~/helpers/permissions'; import { FormattedMessage } from 'react-intl'; import useUser from '~/core/hooks/useUser'; @@ -59,7 +59,9 @@ export const StoryTabCommunityFeed: React.FC = ({ co const { currentUserId, client } = useSDK(); const user = useUser(currentUserId); const isGlobalAdmin = isAdmin(user?.roles); - const hasStoryPermission = isGlobalAdmin || checkStoryPermission(client, communityId); + const isCommunityModerator = isModerator(user?.roles); + const hasStoryPermission = + isGlobalAdmin || isCommunityModerator || checkStoryPermission(client, communityId); const hasStoryRing = stories?.length > 0; const hasUnSeen = stories.some((story) => !story?.isSeen); diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx index 5dcb410e7..55612a5cd 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Image.tsx @@ -25,7 +25,7 @@ import useUser from '~/core/hooks/useUser'; import { BottomSheet } from '~/v4/core/components/BottomSheet'; import { Typography } from '~/v4/core/components'; import { Button } from '~/v4/core/components/Button'; -import { isAdmin } from '~/helpers/permissions'; +import { isAdmin, isModerator } from '~/helpers/permissions'; export const renderer: CustomRenderer = ({ story, action, config }) => { const { formatMessage } = useIntl(); @@ -77,7 +77,9 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { const isOfficial = community?.isOfficial || false; const isCreator = creator?.userId === user?.userId; const isGlobalAdmin = isAdmin(user?.roles); - const isModerator = isGlobalAdmin || checkStoryPermission(client, community?.communityId); + const isCommunityModerator = isModerator(user?.roles); + const haveStoryPermission = + isGlobalAdmin || isCommunityModerator || checkStoryPermission(client, community?.communityId); const computedStyles = { ...rendererStyles.storyContent, @@ -178,7 +180,7 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { heading={heading} subheading={subheading} isHaveActions={actions?.length > 0} - haveStoryPermission={isModerator} + haveStoryPermission={haveStoryPermission} isOfficial={isOfficial} isPaused={isPaused} onPlay={play} @@ -282,7 +284,7 @@ export const renderer: CustomRenderer = ({ story, action, config }) => { totalLikes={totalLikes} isLiked={isLiked} onClickComment={openCommentSheet} - showImpression={isCreator || isModerator} + showImpression={isCreator || haveStoryPermission} /> ); diff --git a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx index 579280275..f2f7bafa7 100644 --- a/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx +++ b/src/v4/social/internal-components/StoryViewer/Renderers/Video.tsx @@ -24,7 +24,7 @@ import { motion, PanInfo, useAnimationControls } from 'framer-motion'; import rendererStyles from './Renderers.module.css'; import useUser from '~/core/hooks/useUser'; -import { isAdmin } from '~/helpers/permissions'; +import { isAdmin, isModerator } from '~/helpers/permissions'; export const renderer: CustomRenderer = ({ story, action, config, messageHandler }) => { const { formatMessage } = useIntl(); @@ -62,8 +62,6 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler imageSize: 'small', }); - const isOfficial = community?.isOfficial || false; - const heading =
{community?.displayName}
; const subheading = createdAt && creator?.displayName ? ( @@ -75,9 +73,12 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler '' ); + const isOfficial = community?.isOfficial || false; const isCreator = creator?.userId === user?.userId; const isGlobalAdmin = isAdmin(user?.roles); - const isModerator = isGlobalAdmin || checkStoryPermission(client, community?.communityId); + const isCommunityModerator = isModerator(user?.roles); + const haveStoryPermission = + isGlobalAdmin || isCommunityModerator || checkStoryPermission(client, community?.communityId); const computedStyles = { ...storyContentStyles, @@ -214,7 +215,7 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler heading={heading} subheading={subheading} isHaveActions={actions?.length > 0} - haveStoryPermission={isModerator} + haveStoryPermission={haveStoryPermission} isOfficial={isOfficial} isPaused={isPaused} onPlay={play} @@ -320,7 +321,7 @@ export const renderer: CustomRenderer = ({ story, action, config, messageHandler totalLikes={totalLikes} isLiked={isLiked} onClickComment={openCommentSheet} - showImpression={isCreator || isModerator} + showImpression={isCreator || haveStoryPermission} /> ); From be48905cfc8cc05837738611d4e58646304c332c Mon Sep 17 00:00:00 2001 From: Kiattirat S Date: Tue, 28 May 2024 15:57:45 +0700 Subject: [PATCH 84/88] feat(SDK): test build From cc22a385d72c679407aab0324003b66077813fd7 Mon Sep 17 00:00:00 2001 From: Kiattirat S Date: Tue, 28 May 2024 16:17:56 +0700 Subject: [PATCH 85/88] feat(SDK): upgrade ts-sdk version --- package.json | 2 +- pnpm-lock.yaml | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 9b40a2017..d5b3dcd82 100644 --- a/package.json +++ b/package.json @@ -39,7 +39,7 @@ "react-dom": ">=17.0.2" }, "devDependencies": { - "@amityco/ts-sdk": "^6.25.0", + "@amityco/ts-sdk": "^6.25.1", "@storybook/addon-a11y": "^7.6.7", "@storybook/addon-actions": "^7.6.7", "@storybook/addon-backgrounds": "^7.6.7", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index faf632901..3ebcec89f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -104,8 +104,8 @@ dependencies: devDependencies: '@amityco/ts-sdk': - specifier: ^6.25.0 - version: 6.25.0 + specifier: ^6.25.1 + version: 6.25.1 '@storybook/addon-a11y': specifier: ^7.6.7 version: 7.6.18 @@ -263,8 +263,8 @@ packages: resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==} dev: true - /@amityco/ts-sdk@6.25.0: - resolution: {integrity: sha512-TLqxGVWZMqP0LdwR+9iGGx2a0G3GqoDF1gxC543CCg5dP+D0BsEqohiPl4x+Svxdi6L3975D5+t3X3HjG4CBWg==} + /@amityco/ts-sdk@6.25.1: + resolution: {integrity: sha512-Xm0BhctI1bMw2IDtpd2weY+BIF5bVhu0CXsG6qkZMVNx3whGteh24YDD3J6ZM8h29RaZp3VXb0yHGZLh6InKAw==} engines: {node: '>=12', npm: '>=6'} dependencies: agentkeepalive: 4.5.0 From 23892cf3759a8550fae1fdd3f1524ccc8443eb69 Mon Sep 17 00:00:00 2001 From: Kiattirat S Date: Tue, 28 May 2024 18:40:02 +0700 Subject: [PATCH 86/88] update readme --- readme.md | 137 +++++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 126 insertions(+), 11 deletions(-) diff --git a/readme.md b/readme.md index 3e4513621..ef335f14c 100644 --- a/readme.md +++ b/readme.md @@ -1,21 +1,136 @@ -# Amity Ui-Kit for Web +# Amity UI-Kit for Web (Open-Source) -## Getting started +## Prerequisites -Before starting to work, please read the following instructions. -https://ekoapp.atlassian.net/wiki/spaces/UP/pages/2443706407/ASC+Web+UIKit+V4+Governance +Before getting started, ensure that you have the following prerequisites installed on your system: -If you have any questions, please ask / discuss with the team. +- [Node.js](https://nodejs.org/) LTS version (currently version 20) +- [pnpm](https://pnpm.io/) version 8 -### Installation +## How to install PNPM (Optional) -1. `npm install --save @amityco/ui-kit` -2. `yarn add @amityco/ui-kit` +``` +corepack enable pnpm +``` -### Documentation +Ref: https://pnpm.io/installation#using-corepack -Please refer to our online documentation at https://docs.amity.co or contact a Ui-Kit representative at \* \*developers@amity.co** for support. +## Running Storybook (Optional) + +To run Storybook and view the UI components in isolation, follow these steps: + +1. Clone the Amity UI-Kit repository: + + ``` + git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git + ``` + +2. Navigate to the cloned repository's directory: + + ``` + cd Amity-Social-Cloud-UIKit-Web-OpenSource + ``` + +3. Install the dependencies using pnpm: + + ``` + pnpm install + ``` + +4. Create a `.env` file at the root of the project with the following content: + + ``` + STORYBOOK_API_REGION= + STORYBOOK_API_KEY= + ``` + + Replace `` and `` with your actual credentials. + +5. Run Storybook: + + ``` + pnpm run storybook + ``` + +6. Open your browser and navigate to `http://localhost:6006` to view the Storybook interface. + +## Installation + +To install the Amity UI-Kit together with another project, follow these steps: + +1. Clone the repository using the following command: + + ``` + git clone https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource.git + ``` + +2. Navigate to the cloned repository's directory: + + ``` + cd ./Amity-Social-Cloud-UIKit-Web-OpenSource + ``` + +3. Install the dependencies using pnpm: + + ``` + pnpm install + ``` + +4. Build the project: + + ``` + pnpm run build + ``` + +5. Pack the project + + ``` + pnpm pack + ``` + +6. Navigate to your application's directory: + + ``` + cd + ``` + +7. Install the Amity UI-Kit to your application using one of the following package managers: + - NPM: + ``` + npm i file:/ --save + ``` + - Yarn (Classic): + ``` + yarn add file:/ + ``` + - PNPM: + ``` + pnpm i file:/ + ``` + +## Documentation + +For detailed information and guidance on using the Amity UI-Kit, please refer to our comprehensive online documentation available at [https://docs.amity.co](https://docs.amity.co). + +If you require further assistance or have any questions, please don't hesitate to contact our dedicated UI-Kit support team at **developers@amity.co**. We are here to help you make the most of the Amity UI-Kit. ## Contributing -See [our contributing guide](https://github.com/EkoCommunications/AmityUiKitWeb/blob/develop/CONTRIBUTING.md) +We welcome contributions from the community to help improve and enhance the Amity UI-Kit. If you are interested in contributing to this project, please review our [contributing guide](https://github.com/AmityCo/Amity-Social-Cloud-UIKit-Web-OpenSource/blob/develop/contributing.md) for guidelines and best practices. + +Thank you for choosing the Amity UI-Kit for your web development needs! + +### FAQ + +Q: I tried to run `pnpm build` and it throws a types error. +A: Try to structure your project to be like this: + +``` +- your_app + - src +- Amity-Social-Cloud-UIKit-Web-OpenSource + - src +``` + +Q: The modifications I made to the code do not appear to be applied. +A: Please attempt to execute `npm cache clean` or `npm cache clean --force` to resolve this issue. From ac8cfc38ca8f47ac40c2fb088b54053b1160c4f0 Mon Sep 17 00:00:00 2001 From: Kiattirat S Date: Tue, 28 May 2024 18:46:56 +0700 Subject: [PATCH 87/88] manual update version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 54846851d..45569ca75 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@amityco/ui-kit-open-source", - "version": "4.0.0-beta.3", + "version": "4.0.0-beta.4", "engines": { "node": ">=16", "pnpm": ">=8" From 7a055740fee1fafbf58c096bdadedcb9b8848c5b Mon Sep 17 00:00:00 2001 From: bmo-amity-bot Date: Tue, 28 May 2024 12:02:56 +0000 Subject: [PATCH 88/88] chore(release): 4.0.0-beta.5 --- CHANGELOG.md | 2 ++ package.json | 2 +- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9df8d2bff..6725f071f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. +## 4.0.0-beta.5 (2024-05-28) + ## 4.0.0-beta.3 (2024-04-26) ### Bug Fixes diff --git a/package.json b/package.json index 45569ca75..0b05b14e4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@amityco/ui-kit-open-source", - "version": "4.0.0-beta.4", + "version": "4.0.0-beta.5", "engines": { "node": ">=16", "pnpm": ">=8"