From 144f2b3b89c9558d65674bb5e139c4cb2352d753 Mon Sep 17 00:00:00 2001 From: Beatrice Guerra Date: Wed, 13 Nov 2024 15:43:51 +0100 Subject: [PATCH 01/10] chore: update submodule --- src/carbonio-ui-commons | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/carbonio-ui-commons b/src/carbonio-ui-commons index 6a77e163e..33f701019 160000 --- a/src/carbonio-ui-commons +++ b/src/carbonio-ui-commons @@ -1 +1 @@ -Subproject commit 6a77e163ea62b6e414ce53a8b406da157278489f +Subproject commit 33f701019afd195b0b7746889ca2961235d28d5a From f531fe78ae583862a838ed9fa046e4dd821f861d Mon Sep 17 00:00:00 2001 From: Beatrice Guerra Date: Wed, 13 Nov 2024 15:50:26 +0100 Subject: [PATCH 02/10] build(deps): update ds, preview and styled-components deps Refs: CO-1608 --- package-lock.json | 305 ++++++++++++++++++++++++++++++++++++---------- package.json | 6 +- 2 files changed, 247 insertions(+), 64 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7fc8b1a51..462f06bc3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,9 +16,9 @@ "@reduxjs/toolkit": "^1.9.3", "@types/webpack": "^5.28.2", "@types/webpack-env": "^1.18.1", - "@zextras/carbonio-design-system": "^8.0.0", + "@zextras/carbonio-design-system": "9.0.0-devel.7", "@zextras/carbonio-shell-ui": "devel", - "@zextras/carbonio-ui-preview": "^3.0.0", + "@zextras/carbonio-ui-preview": "^3.1.0-devel.2", "asn1js": "^3.0.5", "axios": "^1.6.7", "babel-jest": "^29.4.3", @@ -39,7 +39,7 @@ "react-i18next": "^12.2.0", "react-redux": "^8.0.5", "react-router-dom": "^5.3.4", - "styled-components": "^5.3.6", + "styled-components": "^6.1.13", "uuid": "^9.0.0", "zustand": "^4.5.2" }, @@ -2512,6 +2512,32 @@ "@floating-ui/utils": "^0.2.8" } }, + "node_modules/@floating-ui/react": { + "version": "0.26.27", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.27.tgz", + "integrity": "sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==", + "dependencies": { + "@floating-ui/react-dom": "^2.1.2", + "@floating-ui/utils": "^0.2.8", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", + "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, "node_modules/@floating-ui/utils": { "version": "0.2.8", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", @@ -4730,6 +4756,11 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/stylis": { + "version": "4.2.5", + "resolved": "https://registry.npmjs.org/@types/stylis/-/stylis-4.2.5.tgz", + "integrity": "sha512-1Xve+NMN7FWjY14vLoY5tL3BVEQ/n42YLwaqJIPYhotZ9uBHt87VceMwWQpzmdEt2TNXIorIFG+YeCUUW7RInw==" + }, "node_modules/@types/tough-cookie": { "version": "4.0.5", "resolved": "https://registry.npmjs.org/@types/tough-cookie/-/tough-cookie-4.0.5.tgz", @@ -5185,21 +5216,22 @@ "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==" }, "node_modules/@zextras/carbonio-design-system": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-8.0.0.tgz", - "integrity": "sha512-HDbA9d5JNPm1gZyDPiawbd3Fw5XNaupLN1VNxQcph29opZXWH2QzfCuYVH+dSGVm2sIkICgyBqk1gaPENtocEQ==", + "version": "9.0.0-devel.7", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-9.0.0-devel.7.tgz", + "integrity": "sha512-HOEqVm28nPSShr3uyKqzny7kodLeiXjuYy8QSEA/aFTYNyC5sBOd9q/BTpe1qHuUwSMuSNIE4ZLfMGUiu+3Pcw==", "dependencies": { - "@floating-ui/dom": "^1.5.3", + "@floating-ui/dom": "^1.6.11", "core-js": "^3.38.1", - "darkreader": "^4.9.58", - "polished": "^4.2.2", - "react-datepicker": "^4.25.0" + "darkreader": "^4.9.92", + "polished": "^4.3.1", + "react-datepicker": "^7.5.0" }, "peerDependencies": { + "date-fns": "^4.1.0", "lodash": "^4.17.21", - "react": "^18.0.0", - "react-dom": "^18.0.0", - "styled-components": "^5.3.11" + "react": "^18.3.1", + "react-dom": "^18.3.1", + "styled-components": "^6.1.13" } }, "node_modules/@zextras/carbonio-shell-ui": { @@ -5270,6 +5302,58 @@ } } }, + "node_modules/@zextras/carbonio-shell-ui/node_modules/@emotion/unitless": { + "version": "0.7.5", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", + "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + }, + "node_modules/@zextras/carbonio-shell-ui/node_modules/@zextras/carbonio-design-system": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-8.1.0.tgz", + "integrity": "sha512-PxiPPetc3YCKr7NsxiM83TWZhthdCsUkg6r3Njc5zOQVIE0SAMbv4fjDcPMTtDnqx8TV9e0EVZtGA0TZADmnaQ==", + "dependencies": { + "@floating-ui/dom": "^1.5.3", + "core-js": "^3.38.1", + "darkreader": "^4.9.58", + "polished": "^4.2.2", + "react-datepicker": "^4.25.0" + }, + "peerDependencies": { + "lodash": "^4.17.21", + "react": "^18.0.0", + "react-dom": "^18.0.0", + "styled-components": "^5.3.11" + } + }, + "node_modules/@zextras/carbonio-shell-ui/node_modules/@zextras/carbonio-ui-preview": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-3.0.0.tgz", + "integrity": "sha512-MJM8VVCJ4AYgmWrXHWhLdZPZakdJANF/V6Va7Wy/YRyPsaXXqGlrs27VB3kFLQGp72sGhS0AEqr6LMWnHJQajA==", + "dependencies": { + "core-js": "^3.37.1", + "react-pdf": "^9.1.0" + }, + "peerDependencies": { + "@zextras/carbonio-design-system": "^8.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } + }, + "node_modules/@zextras/carbonio-shell-ui/node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/@zextras/carbonio-shell-ui/node_modules/immer": { "version": "10.1.1", "resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz", @@ -5279,6 +5363,52 @@ "url": "https://opencollective.com/immer" } }, + "node_modules/@zextras/carbonio-shell-ui/node_modules/react-datepicker": { + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz", + "integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==", + "dependencies": { + "@popperjs/core": "^2.11.8", + "classnames": "^2.2.6", + "date-fns": "^2.30.0", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.13.0", + "react-popper": "^2.3.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17 || ^18", + "react-dom": "^16.9.0 || ^17 || ^18" + } + }, + "node_modules/@zextras/carbonio-shell-ui/node_modules/styled-components": { + "version": "5.3.11", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", + "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "dependencies": { + "@babel/helper-module-imports": "^7.0.0", + "@babel/traverse": "^7.4.5", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/stylis": "^0.8.4", + "@emotion/unitless": "^0.7.4", + "babel-plugin-styled-components": ">= 1.12.0", + "css-to-react-native": "^3.0.0", + "hoist-non-react-statics": "^3.0.0", + "shallowequal": "^1.1.0", + "supports-color": "^5.5.0" + }, + "engines": { + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" + }, + "peerDependencies": { + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" + } + }, "node_modules/@zextras/carbonio-ui-configs": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-configs/-/carbonio-ui-configs-1.0.3.tgz", @@ -5608,15 +5738,15 @@ } }, "node_modules/@zextras/carbonio-ui-preview": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-3.0.0.tgz", - "integrity": "sha512-MJM8VVCJ4AYgmWrXHWhLdZPZakdJANF/V6Va7Wy/YRyPsaXXqGlrs27VB3kFLQGp72sGhS0AEqr6LMWnHJQajA==", + "version": "3.1.0-devel.2", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-3.1.0-devel.2.tgz", + "integrity": "sha512-z6Zb/ZlV2U0+CuAmRFR6ZoDwiAUvzFGMQYaR9RmZw0gtZ9JfY1OX/J9f9b49aJpteEXdZyuLClv0/9X7erBjKQ==", "dependencies": { "core-js": "^3.37.1", "react-pdf": "^9.1.0" }, "peerDependencies": { - "@zextras/carbonio-design-system": "^8.0.0", + "@zextras/carbonio-design-system": "^8.0.0 || ^9.0.0-devel", "react": "^18.0.0", "react-dom": "^18.0.0" } @@ -7908,18 +8038,13 @@ } }, "node_modules/date-fns": { - "version": "2.30.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", - "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", - "dependencies": { - "@babel/runtime": "^7.21.0" - }, - "engines": { - "node": ">=0.11" - }, + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz", + "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==", + "peer": true, "funding": { - "type": "opencollective", - "url": "https://opencollective.com/date-fns" + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" } }, "node_modules/debounce": { @@ -14510,7 +14635,6 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -18276,9 +18400,9 @@ } }, "node_modules/path2d": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.1.tgz", - "integrity": "sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==", + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.2.tgz", + "integrity": "sha512-+vnG6S4dYcYxZd+CZxzXCNKdELYZSKfohrk98yajCo1PtRoDgCTrrwOvK1GT0UoAdVszagDVllQc0U1vaX4NUQ==", "optional": true, "engines": { "node": ">=6" @@ -19099,22 +19223,29 @@ } }, "node_modules/react-datepicker": { - "version": "4.25.0", - "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz", - "integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==", + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.5.0.tgz", + "integrity": "sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==", "dependencies": { - "@popperjs/core": "^2.11.8", - "classnames": "^2.2.6", - "date-fns": "^2.30.0", - "prop-types": "^15.7.2", - "react-onclickoutside": "^6.13.0", - "react-popper": "^2.3.0" + "@floating-ui/react": "^0.26.23", + "clsx": "^2.1.1", + "date-fns": "^3.6.0", + "prop-types": "^15.8.1" }, "peerDependencies": { "react": "^16.9.0 || ^17 || ^18", "react-dom": "^16.9.0 || ^17 || ^18" } }, + "node_modules/react-datepicker/node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -20175,7 +20306,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -20495,23 +20625,22 @@ } }, "node_modules/styled-components": { - "version": "5.3.11", - "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.3.11.tgz", - "integrity": "sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==", + "version": "6.1.13", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.13.tgz", + "integrity": "sha512-M0+N2xSnAtwcVAQeFEsGWFFxXDftHUD7XrKla06QbpUMmbmtFBMMTcKWvFXtWxuD5qQkB8iU5gk6QASlx2ZRMw==", "dependencies": { - "@babel/helper-module-imports": "^7.0.0", - "@babel/traverse": "^7.4.5", - "@emotion/is-prop-valid": "^1.1.0", - "@emotion/stylis": "^0.8.4", - "@emotion/unitless": "^0.7.4", - "babel-plugin-styled-components": ">= 1.12.0", - "css-to-react-native": "^3.0.0", - "hoist-non-react-statics": "^3.0.0", - "shallowequal": "^1.1.0", - "supports-color": "^5.5.0" + "@emotion/is-prop-valid": "1.2.2", + "@emotion/unitless": "0.8.1", + "@types/stylis": "4.2.5", + "css-to-react-native": "3.2.0", + "csstype": "3.1.3", + "postcss": "8.4.38", + "shallowequal": "1.1.0", + "stylis": "4.3.2", + "tslib": "2.6.2" }, "engines": { - "node": ">=10" + "node": ">= 16" }, "funding": { "type": "opencollective", @@ -20519,14 +20648,63 @@ }, "peerDependencies": { "react": ">= 16.8.0", - "react-dom": ">= 16.8.0", - "react-is": ">= 16.8.0" + "react-dom": ">= 16.8.0" } }, + "node_modules/styled-components/node_modules/@emotion/is-prop-valid": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.2.tgz", + "integrity": "sha512-uNsoYd37AFmaCdXlg6EYD1KaPOaRWRByMCYzbKUX4+hhMfrxdVSelShywL4JVaAeM/eHUOSprYBQls+/neX3pw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/styled-components/node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==" + }, "node_modules/styled-components/node_modules/@emotion/unitless": { - "version": "0.7.5", - "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz", - "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==" + }, + "node_modules/styled-components/node_modules/postcss": { + "version": "8.4.38", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz", + "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==", + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "dependencies": { + "nanoid": "^3.3.7", + "picocolors": "^1.0.0", + "source-map-js": "^1.2.0" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/styled-components/node_modules/stylis": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.3.2.tgz", + "integrity": "sha512-bhtUjWd/z6ltJiQwg0dUfxEJ+W+jdqQd8TbWLWyeIJHlnsqmGLRFFd8e5mA0AZi/zx90smXRlN66YMTcaSFifg==" + }, + "node_modules/styled-components/node_modules/tslib": { + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/stylis": { "version": "4.2.0", @@ -20577,6 +20755,11 @@ "url": "https://opencollective.com/unts" } }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" + }, "node_modules/tapable": { "version": "2.2.1", "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz", diff --git a/package.json b/package.json index 0c6851aea..cf6dc4a6f 100644 --- a/package.json +++ b/package.json @@ -82,9 +82,9 @@ "@reduxjs/toolkit": "^1.9.3", "@types/webpack": "^5.28.2", "@types/webpack-env": "^1.18.1", - "@zextras/carbonio-design-system": "^8.0.0", + "@zextras/carbonio-design-system": "9.0.0-devel.7", "@zextras/carbonio-shell-ui": "devel", - "@zextras/carbonio-ui-preview": "^3.0.0", + "@zextras/carbonio-ui-preview": "^3.1.0-devel.2", "asn1js": "^3.0.5", "axios": "^1.6.7", "babel-jest": "^29.4.3", @@ -105,7 +105,7 @@ "react-i18next": "^12.2.0", "react-redux": "^8.0.5", "react-router-dom": "^5.3.4", - "styled-components": "^5.3.6", + "styled-components": "^6.1.13", "uuid": "^9.0.0", "zustand": "^4.5.2" }, From 9615856ff5271892f54a70792c70682c28b3617d Mon Sep 17 00:00:00 2001 From: Beatrice Guerra Date: Wed, 13 Nov 2024 17:40:37 +0100 Subject: [PATCH 03/10] fix: remove types.d.ts, allow js in tsconfig and fix types Refs: CO-1608 --- package-lock.json | 7 ++ package.json | 1 + src/commons/gap-container.tsx | 18 ++--- .../banner-message-truncated.tsx | 4 +- .../banner-view-external-images.tsx | 3 +- src/commons/text-styler.tsx | 6 +- src/globals.d.ts | 6 -- .../shared-invite-reply/index.tsx | 2 +- .../parts/color-select.tsx | 8 +-- .../parts/styled-components.jsx | 25 ------- .../parts/styled-components.tsx | 25 +++++++ .../shared-invite-reply/parts/utils.js | 60 ----------------- .../shared-invite-reply/parts/utils.ts | 30 +++++++++ src/types/assets.d.ts | 6 ++ src/types/integrations/carbonio-files-ui.ts | 65 +++++++++++++++++++ src/types/share/{index.d.ts => index.ts} | 8 +-- src/ui-actions/error-page.ts | 1 + .../detail-panel/edit/attachment-preview.tsx | 26 ++++---- .../edit/edit-attachments-block.tsx | 2 +- .../parts/edit-view-styled-components.tsx | 11 ++-- .../edit/parts/send-later-modal.tsx | 2 +- .../preview/attachments-block.tsx | 25 ++++--- src/views/app/extra-windows/extra-window.tsx | 10 ++- src/views/resizable-container.tsx | 6 +- src/views/search/parts/send-date-row.tsx | 6 +- src/views/search/types.d.ts | 6 -- .../parts/create-filters-conditions/date.tsx | 6 +- .../settings/filters/parts/custom-select.tsx | 4 +- src/views/settings/list-old.tsx | 4 +- src/views/settings/recover-messages.tsx | 2 +- .../flat-folders-accordion.tsx | 22 ++----- src/views/sidebar/edit-permissions-modal.tsx | 3 - tsconfig.json | 7 +- 33 files changed, 221 insertions(+), 196 deletions(-) delete mode 100644 src/globals.d.ts delete mode 100644 src/integrations/shared-invite-reply/parts/styled-components.jsx create mode 100644 src/integrations/shared-invite-reply/parts/styled-components.tsx delete mode 100644 src/integrations/shared-invite-reply/parts/utils.js create mode 100644 src/integrations/shared-invite-reply/parts/utils.ts create mode 100644 src/types/assets.d.ts create mode 100644 src/types/integrations/carbonio-files-ui.ts rename src/types/share/{index.d.ts => index.ts} (87%) delete mode 100644 src/views/search/types.d.ts diff --git a/package-lock.json b/package-lock.json index 462f06bc3..ed5257ccb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -63,6 +63,7 @@ "@types/react-redux": "^7.1.25", "@types/react-router-dom": "^5.3.3", "@types/styled-components": "^5.1.26", + "@types/uuid": "^10.0.0", "@zextras/carbonio-ui-configs": "^1.0.0", "@zextras/carbonio-ui-sdk": "^1.7.7", "babel-plugin-styled-components": "^2.0.7", @@ -4772,6 +4773,12 @@ "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz", "integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==" }, + "node_modules/@types/uuid": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz", + "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==", + "dev": true + }, "node_modules/@types/webpack": { "version": "5.28.5", "resolved": "https://registry.npmjs.org/@types/webpack/-/webpack-5.28.5.tgz", diff --git a/package.json b/package.json index cf6dc4a6f..8a0512be2 100644 --- a/package.json +++ b/package.json @@ -56,6 +56,7 @@ "@types/react-redux": "^7.1.25", "@types/react-router-dom": "^5.3.3", "@types/styled-components": "^5.1.26", + "@types/uuid": "^10.0.0", "@zextras/carbonio-ui-configs": "^1.0.0", "@zextras/carbonio-ui-sdk": "^1.7.7", "babel-plugin-styled-components": "^2.0.7", diff --git a/src/commons/gap-container.tsx b/src/commons/gap-container.tsx index fb6301d36..81b2b4944 100644 --- a/src/commons/gap-container.tsx +++ b/src/commons/gap-container.tsx @@ -12,37 +12,37 @@ import { Row, RowProps } from '@zextras/carbonio-design-system'; -import styled, { SimpleInterpolation } from 'styled-components'; +import styled from 'styled-components'; type GapContainerProps = ContainerProps & { gap?: ContainerProps['padding'] }; type GapRowProps = RowProps & { gap?: RowProps['padding'] }; -const StyledGapContainer = styled(Container)` - gap: ${({ theme, gap }): SimpleInterpolation => gap && getPadding(gap, theme)}; +const StyledGapContainer = styled(Container)<{ $gap?: ContainerProps['padding'] }>` + gap: ${({ theme, $gap }): undefined | string | 0 => $gap && getPadding($gap, theme)}; `; -const StyledGapRow = styled(Row)` - gap: ${({ theme, gap }): SimpleInterpolation => gap && getPadding(gap, theme)}; +const StyledGapRow = styled(Row)<{ $gap?: ContainerProps['padding'] }>` + gap: ${({ theme, $gap }): undefined | string | 0 => $gap && getPadding($gap, theme)}; `; const GapContainer = React.forwardRef(function GapContainerFn( - { children, ...rest }, + { children, gap, ...rest }, ref ) { return ( - + {children} ); }); const GapRow = React.forwardRef(function GapRowFn( - { children, ...rest }, + { children, gap, ...rest }, ref ) { return ( - + {children} ); diff --git a/src/commons/mail-message-renderer/banner-message-truncated.tsx b/src/commons/mail-message-renderer/banner-message-truncated.tsx index 4829b128b..db032ed35 100644 --- a/src/commons/mail-message-renderer/banner-message-truncated.tsx +++ b/src/commons/mail-message-renderer/banner-message-truncated.tsx @@ -43,7 +43,7 @@ export const BannerMessageTruncated = ({ label={loadingMessageLabel} icon={AnimatedLoaderWarning} iconPlacement="left" - color="warning" + labelColor="warning" onClick={noop} /> ) : ( @@ -51,7 +51,7 @@ export const BannerMessageTruncated = ({ backgroundColor="transparent" type="outlined" label={truncatedWarningButtonLabel} - color="warning" + labelColor="warning" onClick={loadMessage} /> )} diff --git a/src/commons/mail-message-renderer/banner-view-external-images.tsx b/src/commons/mail-message-renderer/banner-view-external-images.tsx index 2e9283b65..7a6f8487f 100644 --- a/src/commons/mail-message-renderer/banner-view-external-images.tsx +++ b/src/commons/mail-message-renderer/banner-view-external-images.tsx @@ -75,8 +75,7 @@ export const BannerViewExternalImages = ({ }} dropdownProps={{ maxWidth: '31.25rem', - width: 'fit', - items + width: 'fit' }} items={items} /> diff --git a/src/commons/text-styler.tsx b/src/commons/text-styler.tsx index 61478a880..2ea7f7cfb 100644 --- a/src/commons/text-styler.tsx +++ b/src/commons/text-styler.tsx @@ -5,16 +5,16 @@ */ import React, { HTMLAttributes } from 'react'; -import styled, { SimpleInterpolation } from 'styled-components'; +import styled from 'styled-components'; // TODO add supports for italic, strikethrough and underlined export type TextStylerProps = HTMLAttributes & { bold?: boolean; }; -const StyledSpan = styled.span` +const StyledSpan = styled.span<{ $bold?: boolean }>` display: inline-block; - font-weight: ${(props): SimpleInterpolation => props.bold && 'bold'}; + font-weight: ${({ $bold }): false | undefined | string => $bold && 'bold'}; `; export const TextStyler = React.forwardRef(function TextStylerFn( diff --git a/src/globals.d.ts b/src/globals.d.ts deleted file mode 100644 index 067d546a7..000000000 --- a/src/globals.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 Zextras - * - * SPDX-License-Identifier: AGPL-3.0-only - */ -declare module '*.properties'; diff --git a/src/integrations/shared-invite-reply/index.tsx b/src/integrations/shared-invite-reply/index.tsx index 6cf3d6c44..86c5a9485 100644 --- a/src/integrations/shared-invite-reply/index.tsx +++ b/src/integrations/shared-invite-reply/index.tsx @@ -54,7 +54,7 @@ const SharedCalendarResponse: FC = ({ ); const role = useMemo( - () => findLabel(shareCalendarRoleOptions, rights || ''), + () => findLabel(shareCalendarRoleOptions, rights || '') ?? '', [shareCalendarRoleOptions, rights] ); diff --git a/src/integrations/shared-invite-reply/parts/color-select.tsx b/src/integrations/shared-invite-reply/parts/color-select.tsx index 4813a01ea..559d18159 100644 --- a/src/integrations/shared-invite-reply/parts/color-select.tsx +++ b/src/integrations/shared-invite-reply/parts/color-select.tsx @@ -43,7 +43,7 @@ const LabelFactory = ({ {selected[0].label} - + ): React.JSX.Element { const colors = useMemo( () => ZIMBRA_STANDARD_COLORS.map((el, index) => ({ @@ -89,7 +89,7 @@ export default function ColorSelect({ {getColorLabel(el.zLabel)} - + ) })), diff --git a/src/integrations/shared-invite-reply/parts/styled-components.jsx b/src/integrations/shared-invite-reply/parts/styled-components.jsx deleted file mode 100644 index 81bd771fc..000000000 --- a/src/integrations/shared-invite-reply/parts/styled-components.jsx +++ /dev/null @@ -1,25 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 Zextras - * - * SPDX-License-Identifier: AGPL-3.0-only - */ -import styled from 'styled-components'; -import { Container, Text } from '@zextras/carbonio-design-system'; - -export const Square = styled.div` - width: 1.125rem; - height: 1.125rem; - position: relative; - top: -0.1875rem; - border: 0.0625rem solid ${({ theme }) => theme.palette.gray2.regular}; - background: ${({ color }) => color}; - border-radius: 0.25rem; -`; -export const ColorContainer = styled(Container)` - border-bottom: 0.0625rem solid ${({ theme }) => theme.palette.gray2.regular}; - cursor: ${({ disabled }) => (disabled ? 'no-drop' : 'pointer')}; -`; - -export const TextUpperCase = styled(Text)` - text-transform: capitalize; -`; diff --git a/src/integrations/shared-invite-reply/parts/styled-components.tsx b/src/integrations/shared-invite-reply/parts/styled-components.tsx new file mode 100644 index 000000000..e49084101 --- /dev/null +++ b/src/integrations/shared-invite-reply/parts/styled-components.tsx @@ -0,0 +1,25 @@ +/* + * SPDX-FileCopyrightText: 2021 Zextras + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { Container, Text } from '@zextras/carbonio-design-system'; +import styled from 'styled-components'; + +export const Square = styled.div<{ $color: string }>` + width: 1.125rem; + height: 1.125rem; + position: relative; + top: -0.1875rem; + border: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular}; + background: ${({ $color }): string => $color}; + border-radius: 0.25rem; +`; +export const ColorContainer = styled(Container)<{ $disabled?: boolean }>` + border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular}; + cursor: ${({ $disabled }): string => ($disabled ? 'no-drop' : 'pointer')}; +`; + +export const TextUpperCase = styled(Text)` + text-transform: capitalize; +`; diff --git a/src/integrations/shared-invite-reply/parts/utils.js b/src/integrations/shared-invite-reply/parts/utils.js deleted file mode 100644 index b9c698d8e..000000000 --- a/src/integrations/shared-invite-reply/parts/utils.js +++ /dev/null @@ -1,60 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 Zextras - * - * SPDX-License-Identifier: AGPL-3.0-only - */ -// TODO refactor IRIS-4324 -import { isEqual, transform, isObject, filter } from 'lodash'; - -export const ShareCalendarWithOptions = (t) => [ - { - label: t('share.options.share_calendar_with.internal_users_groups', 'Internal Users or Groups'), - value: 'usr' - }, - { - label: t('share.options.share_calendar_with.external_guests', 'External guests (view only)'), - value: '', - disabled: true - }, - { - label: t( - 'share.options.share_calendar_with.public', - 'Public (view only, no password required)' - ), - value: 'pub' - } -]; - -export const ShareCalendarRoleOptions = (t, canViewPrvtAppt) => [ - { label: t('share.options.share_calendar_role.none', 'None'), value: '' }, - { - label: t('share.options.share_calendar_role.viewer', 'Viewer'), - value: canViewPrvtAppt ? 'rp' : 'r' - }, - { - label: t('share.options.share_calendar_role.admin', 'Admin'), - value: canViewPrvtAppt ? 'rwidxap' : 'rwidxa' - }, - { - label: t('share.options.share_calendar_role.manager', 'Manager'), - value: canViewPrvtAppt ? 'rwidxp' : 'rwidx' - } -]; -export const differenceObject = (object, base) => { - // eslint-disable-next-line no-shadow - function changes(object, base) { - return transform(object, (result, value, key) => { - if (!isEqual(value, base[key])) { - // eslint-disable-next-line no-param-reassign - result[key] = isObject(value) && isObject(base[key]) ? changes(value, base[key]) : value; - } - }); - } - return changes(object, base); -}; - -export const validEmailRegex = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/; - -export const validEmail = (email) => !!validEmailRegex.test(email); - -export const findLabel = (list, value) => filter(list, (item) => item.value === value)[0]?.label; diff --git a/src/integrations/shared-invite-reply/parts/utils.ts b/src/integrations/shared-invite-reply/parts/utils.ts new file mode 100644 index 000000000..01d881879 --- /dev/null +++ b/src/integrations/shared-invite-reply/parts/utils.ts @@ -0,0 +1,30 @@ +/* + * SPDX-FileCopyrightText: 2021 Zextras + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +import { SelectItem } from '@zextras/carbonio-design-system'; +import { TFunction } from 'i18next'; +// TODO refactor IRIS-4324 +import { filter } from 'lodash'; + +export const ShareCalendarRoleOptions = (t: TFunction, canViewPrvtAppt?: boolean): SelectItem[] => [ + { label: t('share.options.share_calendar_role.none', 'None'), value: '' }, + { + label: t('share.options.share_calendar_role.viewer', 'Viewer'), + value: canViewPrvtAppt ? 'rp' : 'r' + }, + { + label: t('share.options.share_calendar_role.admin', 'Admin'), + value: canViewPrvtAppt ? 'rwidxap' : 'rwidxa' + }, + { + label: t('share.options.share_calendar_role.manager', 'Manager'), + value: canViewPrvtAppt ? 'rwidxp' : 'rwidx' + } +]; + +export const findLabel = ( + list: { value: unknown; label: string }[], + value: unknown +): string | undefined => filter(list, (item) => item.value === value)[0]?.label; diff --git a/src/types/assets.d.ts b/src/types/assets.d.ts new file mode 100644 index 000000000..635cd207f --- /dev/null +++ b/src/types/assets.d.ts @@ -0,0 +1,6 @@ +/* + * SPDX-FileCopyrightText: 2024 Zextras + * + * SPDX-License-Identifier: AGPL-3.0-only + */ +declare module '*.png'; diff --git a/src/types/integrations/carbonio-files-ui.ts b/src/types/integrations/carbonio-files-ui.ts new file mode 100644 index 000000000..982a55160 --- /dev/null +++ b/src/types/integrations/carbonio-files-ui.ts @@ -0,0 +1,65 @@ +/* + * SPDX-FileCopyrightText: 2024 Zextras + * + * SPDX-License-Identifier: AGPL-3.0-only + */ + +/** + * Types of carbonio-files-ui + * @see https://doc.dev.zextras.com/iris/dev-docs/master/docs/modules/integrations/files + */ + +/** Select nodes action target */ +export type SelectNodesFunctionArgs = { + title: string; + confirmAction: (nodes: ArrayOneOrMore) => void; + confirmLabel: string; + allowFolders?: boolean; + allowFiles?: boolean; + isValidSelection?: (node: NodeWithMetadata) => boolean; + maxSelection?: number; + disabledTooltip?: string; + canSelectOpenedFolder?: boolean; + description?: string; + canCreateFolder?: boolean; +}; + +/** Array with at least one item of type T */ +export type ArrayOneOrMore = [T] & T[]; + +/** Definition of NodeType enumerator. This is used for discriminating the specific type of a node */ +enum NodeType { + Application = 'APPLICATION', + Audio = 'AUDIO', + Folder = 'FOLDER', + Image = 'IMAGE', + Message = 'MESSAGE', + Other = 'OTHER', + Presentation = 'PRESENTATION', + Root = 'ROOT', + Spreadsheet = 'SPREADSHEET', + Text = 'TEXT', + Video = 'VIDEO' +} + +export type NodeWithMetadata = { + id: string; + name: string; + type: NodeType; + permissions?: { + can_read: boolean; + can_write_file: boolean; + can_write_folder: boolean; + }; +} & ( + | { + __typename?: 'File'; + size: number; + mime_type: string; + extension?: string | null; + version: number; + } + | { + __typename?: 'Folder'; + } +); diff --git a/src/types/share/index.d.ts b/src/types/share/index.ts similarity index 87% rename from src/types/share/index.d.ts rename to src/types/share/index.ts index 0425f7933..0b72cf4ea 100644 --- a/src/types/share/index.d.ts +++ b/src/types/share/index.ts @@ -33,7 +33,7 @@ export type ResponseActionsProps = { owner: string; role: string; allowedActions: string; - participants: Participant[s]; + participants: Participant[]; }; export type ReplyShareParameters = { @@ -42,7 +42,7 @@ export type ReplyShareParameters = { export type GranteeInfoProps = { grant: Grant; - shareCalendarRoleOptions: ShareCalendarRoleOptions; + shareCalendarRoleOptions: ShareCalendarRoleOptions[]; hovered?: boolean; }; @@ -52,12 +52,12 @@ export type GranteeProps = { onMouseLeave?: () => void; onMouseEnter?: () => void; setActiveModal: (modal: string) => void; - shareCalendarRoleOptions: ShareCalendarRoleOptions; + shareCalendarRoleOptions: ShareCalendarRoleOptions[]; }; export type ShareFolderPropertiesProps = { folder: Folder; - setActiveModal; + setActiveModal: (modal: string) => void; }; export type ShareCalendarRoleOptions = { diff --git a/src/ui-actions/error-page.ts b/src/ui-actions/error-page.ts index 699cd0a5b..b64124997 100644 --- a/src/ui-actions/error-page.ts +++ b/src/ui-actions/error-page.ts @@ -5,6 +5,7 @@ */ import { t } from '@zextras/carbonio-shell-ui'; + import productLogo from '../assets/logo-product-grey.png'; import logo from '../assets/zextras-logo-gray.png'; diff --git a/src/views/app/detail-panel/edit/attachment-preview.tsx b/src/views/app/detail-panel/edit/attachment-preview.tsx index 63982f7d6..a4cef2653 100644 --- a/src/views/app/detail-panel/edit/attachment-preview.tsx +++ b/src/views/app/detail-panel/edit/attachment-preview.tsx @@ -17,7 +17,7 @@ import { useTheme } from '@zextras/carbonio-design-system'; import { t } from '@zextras/carbonio-shell-ui'; -import styled, { SimpleInterpolation } from 'styled-components'; +import styled from 'styled-components'; import { AttachmentUploadStatus } from './attachment-upload-status'; import { ToggleSmartLinkButton } from './parts/toggle-smart-link-button'; @@ -46,15 +46,13 @@ const AttachmentHoverBarContainer = styled(Container)` display: none; `; -const AttachmentContainer = styled(Container).attrs( - (props: { hoverBarDisabled: boolean; requiresSmartLinkConversion: boolean }) => ({ - hoverBarDisabled: props.hoverBarDisabled, - requiresSmartLinkConversion: props.requiresSmartLinkConversion - }) -)` - border-bottom: ${({ requiresSmartLinkConversion, theme, background }): string => { +const AttachmentContainer = styled(Container)<{ + $requiresSmartLinkConversion: boolean; + $hoverBarDisabled: boolean; +}>` + border-bottom: ${({ $requiresSmartLinkConversion, theme, background }): string => { const color = getColor(`${background}.regular`, theme); - return requiresSmartLinkConversion + return $requiresSmartLinkConversion ? `1px solid ${theme.palette.primary.regular}` : `1px solid ${color}`; }}; @@ -67,10 +65,10 @@ const AttachmentContainer = styled(Container).attrs( const color = getColor(`${background}.hover`, theme); return `1px solid ${color}`; }}; - background-color: ${({ theme, background }): SimpleInterpolation => + background-color: ${({ theme, background }): undefined | string => background && getColor(`${background}.hover`, theme)}; & ${AttachmentHoverBarContainer} { - display: ${(props): string => (props.hoverBarDisabled ? 'none' : 'flex')}; + display: ${({ $hoverBarDisabled }): string => ($hoverBarDisabled ? 'none' : 'flex')}; } } &:focus { @@ -78,7 +76,7 @@ const AttachmentContainer = styled(Container).attrs( const color = getColor(`${background}.focus`, theme); return `1px solid ${color}`; }}; - background-color: ${({ theme, background }): SimpleInterpolation => + background-color: ${({ theme, background }): undefined | string => background && getColor(`${background}.focus`, theme)}; } cursor: pointer; @@ -198,8 +196,8 @@ export const AttachmentPreview: FC = ({ editorId, attachmen height="fit" background={backgroundColor} data-testid={`attachment-container-${attachment.filename}`} - hoverBarDisabled={isUploading} - requiresSmartLinkConversion={requiresSmartLinkConversion} + $hoverBarDisabled={isUploading} + $requiresSmartLinkConversion={requiresSmartLinkConversion} > 0 ? ( - + {map(expanded ? allAttachments : allAttachments.slice(0, 2), (attachment, index) => diff --git a/src/views/app/detail-panel/edit/parts/edit-view-styled-components.tsx b/src/views/app/detail-panel/edit/parts/edit-view-styled-components.tsx index 5ad0ebf24..24234253b 100644 --- a/src/views/app/detail-panel/edit/parts/edit-view-styled-components.tsx +++ b/src/views/app/detail-panel/edit/parts/edit-view-styled-components.tsx @@ -81,9 +81,9 @@ export const EditorWrapper = styled.div` } `; -export const BannerContainer = styled(Container).attrs(() => ({ - bottomBorderColor: undefined -}))<{ $bottomBorderColor: keyof DefaultTheme['palette'] }>` +export const BannerContainer = styled(Container)<{ + $bottomBorderColor: keyof DefaultTheme['palette']; +}>` border-bottom: 0.0625rem solid ${({ theme, $bottomBorderColor }): string => theme.palette[$bottomBorderColor].regular}; border-top-right-radius: 0.25rem; @@ -98,9 +98,8 @@ export const RowContainer = styled(Container)` height: fit-content; `; -export const ColContainer = styled.div` - grid-column: ${({ occupyFull }: { occupyFull: boolean }): string => - `span ${occupyFull ? 12 : 6}`}; +export const ColContainer = styled.div<{ $occupyFull: boolean }>` + grid-column: ${({ $occupyFull }): string => `span ${$occupyFull ? 12 : 6}`}; `; export const StickyTime = styled(Row)` diff --git a/src/views/app/detail-panel/edit/parts/send-later-modal.tsx b/src/views/app/detail-panel/edit/parts/send-later-modal.tsx index 63826c807..b6997be1d 100644 --- a/src/views/app/detail-panel/edit/parts/send-later-modal.tsx +++ b/src/views/app/detail-panel/edit/parts/send-later-modal.tsx @@ -40,7 +40,7 @@ export const SendLaterModal: FC = ({ onAutoSendTimeSelected if (moment(selectedTime).isBefore(moment(), 'hour') || !selectedTime) { return new Date(); } - return moment().hours(0).minutes(0); + return moment().hours(0).minutes(0).toDate(); }, [selectedTime]); const maxTime = useMemo(() => new Date(0, 0, 0, 23, 45, 0, 0), []); diff --git a/src/views/app/detail-panel/preview/attachments-block.tsx b/src/views/app/detail-panel/preview/attachments-block.tsx index 86689d901..c9d031882 100644 --- a/src/views/app/detail-panel/preview/attachments-block.tsx +++ b/src/views/app/detail-panel/preview/attachments-block.tsx @@ -53,6 +53,11 @@ import type { MailMessage, OpenEmlPreviewType } from '../../../../types'; +import { + ArrayOneOrMore, + NodeWithMetadata, + SelectNodesFunctionArgs +} from '../../../../types/integrations/carbonio-files-ui'; import { useExtraWindow } from '../../extra-windows/use-extra-window'; /** @@ -72,15 +77,9 @@ const AttachmentHoverBarContainer = styled(Container)` height: 0; `; -const AttachmentContainer = styled(Container).attrs( - (props: { requiresSmartLinkConversion: boolean }) => ({ - requiresSmartLinkConversion: props.requiresSmartLinkConversion - }) -)` - border-bottom: ${(props): string => - props.requiresSmartLinkConversion - ? `1px solid ${props.theme.palette.primary.regular}` - : 'none'}; +const AttachmentContainer = styled(Container)<{ $requiresSmartLinkConversion: boolean }>` + border-bottom: ${({ $requiresSmartLinkConversion, theme }): string => + $requiresSmartLinkConversion ? `1px solid ${theme.palette.primary.regular}` : 'none'}; border-radius: 0.125rem; width: calc(50% - 0.25rem); @@ -416,7 +415,7 @@ const Attachment: FC = ({ height="fit" background={backgroundColor} data-testid={`attachment-container-${filename}`} - requiresSmartLinkConversion={requiresSmartLinkConversion} + $requiresSmartLinkConversion={requiresSmartLinkConversion} > = ({ const copyToFiles = ( att: AttachmentPart, messageId: string, - nodes: any + nodes: ArrayOneOrMore ): Promise => soapFetch('CopyToFiles', { _jsns: 'urn:zimbraMail', @@ -594,8 +593,8 @@ const AttachmentsBlock: FC<{ [t] ); - const confirmAction = useCallback( - (nodes: any) => { + const confirmAction = useCallback( + (nodes) => { const promises = map(attachments, (att) => copyToFiles(att, messageId, nodes)); Promise.allSettled(promises).then((res: CopyToFileResponse[]) => { const isFault = res.length === filter(res, (r) => r?.value?.Fault)?.length; diff --git a/src/views/app/extra-windows/extra-window.tsx b/src/views/app/extra-windows/extra-window.tsx index 6ade50b2d..73c286fea 100644 --- a/src/views/app/extra-windows/extra-window.tsx +++ b/src/views/app/extra-windows/extra-window.tsx @@ -4,13 +4,15 @@ * SPDX-License-Identifier: AGPL-3.0-only */ +import React, { createContext, FC, useCallback, useMemo, useRef, useState } from 'react'; + import { ModalManager, ThemeProvider } from '@zextras/carbonio-design-system'; import { PreviewManager } from '@zextras/carbonio-ui-preview'; import { omit } from 'lodash'; -import React, { createContext, FC, useCallback, useMemo, useRef, useState } from 'react'; import { DefaultTheme } from 'styled-components'; -import type { ExtraWindowContextType, ExtraWindowProps } from '../../../types'; + import NewWindow, { replaceStyles } from './new-window'; +import type { ExtraWindowContextType, ExtraWindowProps } from '../../../types'; // Enable debug console output const DEBUG = false; @@ -47,7 +49,9 @@ const createStyledElementsObserver = ( debug('creation of STYLED ELEMENTS observer for', parentWindowDoc); const observer = new MutationObserver((mutationList) => { debug('STYLED ELEMENTS mutation detected!', mutationList); - setTimeout(replaceStyles(parentWindowDoc, newWindowObj.document), 10); + // FIXME: I removed the timeout here since as is the function is invoked immediately. + // Check if this is the wanted behavior, otherwise restore the timeout, but use an arrow function instead. + replaceStyles(parentWindowDoc, newWindowObj.document); }); observer.observe(newWindowObj.document.body, { subtree: true, diff --git a/src/views/resizable-container.tsx b/src/views/resizable-container.tsx index d8807b8fd..cc6a01785 100644 --- a/src/views/resizable-container.tsx +++ b/src/views/resizable-container.tsx @@ -6,7 +6,7 @@ import React, { CSSProperties, useMemo, useRef } from 'react'; import { Container, ContainerProps } from '@zextras/carbonio-design-system'; -import styled, { css, SimpleInterpolation } from 'styled-components'; +import styled, { css } from 'styled-components'; import { BORDERS } from '../constants'; import { Border, useResize } from '../hooks/use-resize'; @@ -72,8 +72,8 @@ const BorderWithResize = styled.div< cursor: ${({ $cursor }): CSSProperties['cursor'] => $cursor}; width: ${({ $width }): string => $width}; height: ${({ $height }): string => $height}; - ${({ $position }): SimpleInterpolation => $position}; - ${({ $translateTransform }): SimpleInterpolation => + ${({ $position }): BorderWithResizeProps['$position'] => $position}; + ${({ $translateTransform }): undefined | string | ReturnType => ($translateTransform?.x || $translateTransform?.y) && css` transform: translate(${$translateTransform?.x ?? 0}, ${$translateTransform?.y ?? 0}); diff --git a/src/views/search/parts/send-date-row.tsx b/src/views/search/parts/send-date-row.tsx index 1a22123f0..dc1b40ec4 100644 --- a/src/views/search/parts/send-date-row.tsx +++ b/src/views/search/parts/send-date-row.tsx @@ -110,7 +110,7 @@ const SendReceivedDateRow: FC = ({ compProps }): Re chipProps={{ avatarBackground: 'gray1', avatarIcon: 'CalendarOutline' }} dateFormat={PICKER_DATE_FORMAT} locale={prefLocale} - includeTime={false} + showTimeSelect={false} defaultValue={sentBeforeDefault} onChange={onSentBeforeChange} /> @@ -123,7 +123,7 @@ const SendReceivedDateRow: FC = ({ compProps }): Re chipProps={{ avatarBackground: 'gray1', avatarIcon: 'CalendarOutline' }} dateFormat={PICKER_DATE_FORMAT} locale={prefLocale} - includeTime={false} + showTimeSelect={false} defaultValue={sentAfterDefault} onChange={onSentAfterChange} /> @@ -136,7 +136,7 @@ const SendReceivedDateRow: FC = ({ compProps }): Re chipProps={{ avatarBackground: 'gray1', avatarIcon: 'CalendarOutline' }} dateFormat={PICKER_DATE_FORMAT} locale={prefLocale} - includeTime={false} + showTimeSelect={false} onChange={onSentOnChange} defaultValue={sentOnDefault} /> diff --git a/src/views/search/types.d.ts b/src/views/search/types.d.ts deleted file mode 100644 index f79b3e8fe..000000000 --- a/src/views/search/types.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2021 Zextras - * - * SPDX-License-Identifier: AGPL-3.0-only - */ -declare module '*'; diff --git a/src/views/settings/filters/parts/create-filters-conditions/date.tsx b/src/views/settings/filters/parts/create-filters-conditions/date.tsx index 78c9c5661..9de88aad5 100644 --- a/src/views/settings/filters/parts/create-filters-conditions/date.tsx +++ b/src/views/settings/filters/parts/create-filters-conditions/date.tsx @@ -12,12 +12,14 @@ import React, { useEffect, useCallback } from 'react'; + import { Container, DateTimePicker } from '@zextras/carbonio-design-system'; import type { TFunction } from 'i18next'; import moment from 'moment'; + +import { CreateFilterContext } from '../create-filter-context'; import CustomSelect from '../custom-select'; import { getDateOptions, findDefaultValue } from '../utils'; -import { CreateFilterContext } from '../create-filter-context'; type ComponentProps = { t: TFunction; @@ -92,7 +94,7 @@ const DateCondition: FC = ({ t, activeIndex, defaultValue }): Re = ({ padding={{ all: 'extrasmall' }} - disabled={disabled} + $disabled={disabled} minHeight="3rem" > diff --git a/src/views/settings/list-old.tsx b/src/views/settings/list-old.tsx index 9f1bd3798..ddee854d4 100644 --- a/src/views/settings/list-old.tsx +++ b/src/views/settings/list-old.tsx @@ -16,7 +16,7 @@ import { useKeyboard } from '@zextras/carbonio-design-system'; import { map, some } from 'lodash'; -import styled, { DefaultTheme, SimpleInterpolation } from 'styled-components'; +import styled, { DefaultTheme } from 'styled-components'; const StyledContainer = styled(Container)` overflow-y: auto; @@ -64,7 +64,7 @@ const StyledDiv = styled.div<{ $activeBackground, $active, $selected - }): SimpleInterpolation => + }): ReturnType => pseudoClasses( theme, ($active && $activeBackground) || ($selected && $selectedBackground) || $background diff --git a/src/views/settings/recover-messages.tsx b/src/views/settings/recover-messages.tsx index b884cefcf..6e6008b8e 100644 --- a/src/views/settings/recover-messages.tsx +++ b/src/views/settings/recover-messages.tsx @@ -162,7 +162,7 @@ export const RecoverMessages = (): React.JSX.Element => { width="fill" onChange={onDateTimePickerChange} timeCaption={t('label.time', 'Time')} - includeTime={false} + showTimeSelect={false} locale={zimbraPrefLocale} dateFormat="P" /> diff --git a/src/views/sidebar/commons/flat-folders-accordion/flat-folders-accordion.tsx b/src/views/sidebar/commons/flat-folders-accordion/flat-folders-accordion.tsx index 0746a0feb..24ba609f8 100644 --- a/src/views/sidebar/commons/flat-folders-accordion/flat-folders-accordion.tsx +++ b/src/views/sidebar/commons/flat-folders-accordion/flat-folders-accordion.tsx @@ -11,7 +11,6 @@ import { Collapse, Container, ContainerProps, - getColor, Icon, IconButton, ListItem, @@ -50,22 +49,11 @@ const CustomContainer = styled(Container) const CustomListItemHelper = styled(ListItem)``; -export const CustomListItem = styled(CustomListItemHelper).attrs( - ({ - background = 'gray6', - active, - activeBackground = 'highlight', - selected, - selectedBackground = 'gray5', - theme - }) => ({ - $baseBackgroundColor: getColor( - (active && activeBackground) || (selected && selectedBackground) || background, - theme - ), - $focusBackgroundColor: getColor(`${(active && activeBackground) || 'gray6'}.focus`, theme) - }) -)``; +export const CustomListItem = styled(CustomListItemHelper).attrs({ + background: 'gray6', + activeBackground: 'highlight', + selectedBackground: 'gray5' +})``; type FlatFoldersAccordionFolderProps = { folder: Folder; diff --git a/src/views/sidebar/edit-permissions-modal.tsx b/src/views/sidebar/edit-permissions-modal.tsx index cd225af5a..615236c3f 100644 --- a/src/views/sidebar/edit-permissions-modal.tsx +++ b/src/views/sidebar/edit-permissions-modal.tsx @@ -1,4 +1,3 @@ -/* /* * SPDX-FileCopyrightText: 2021 Zextras * @@ -154,8 +153,6 @@ const EditPermissionsModal: FC = ({ {integrationAvailable ? ( ): void => { diff --git a/tsconfig.json b/tsconfig.json index 64f34f08e..f88bd4ea3 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -2,14 +2,13 @@ "extends": "@zextras/carbonio-ui-configs/rules/typescript.json", "compilerOptions": { "skipLibCheck": true, - "jsx": "react" + "jsx": "react", + "allowJs": true }, "include": [ - "src/**/*.ts", - "src/**/*.tsx", + "src/**/*", "jest.config.ts", "jest-setup.ts", - "src/carbonio-ui-commons/worker/mock/workerMock.js" ], "exclude": ["./node_modules/*", "./dist/*"] } From 1c65b765613a8ba5e7680126ccb0fc4d48f44568 Mon Sep 17 00:00:00 2001 From: Beatrice Guerra Date: Wed, 13 Nov 2024 18:08:52 +0100 Subject: [PATCH 04/10] refactor: add $ prefix on styled components custom props Replace/remove invalid style rules Refs: CO-1608 --- .idea/runConfigurations/start.xml | 12 -------- jest-setup.ts | 4 ++- src/assets/animated-loader.tsx | 22 +++++++++------ src/commons/color-picker.tsx | 12 ++++---- .../print-conversation/get-complete-html.ts | 2 -- src/commons/text-styler.tsx | 4 +-- .../shared-invite-reply/index.tsx | 9 +++--- .../conversation-message-preview.tsx | 7 +---- .../detail-panel/edit/attachment-preview.tsx | 6 ++-- .../edit/parts/add-attachments-dropdown.tsx | 2 +- .../edit/parts/recipients-rows.tsx | 2 +- .../detail-panel/edit/parts/subject-row.tsx | 2 +- .../preview/attachments-block.tsx | 6 ++-- .../preview/parts/mail-preview-block.tsx | 2 +- .../preview/parts/on-behalf-of-displayer.tsx | 28 +++++++++---------- .../preview/parts/preview-header.tsx | 7 ++--- .../conversations/conversation-list-item.tsx | 6 ++-- .../parts/hover-bar-container.tsx | 7 +---- src/views/resizable-container.tsx | 20 ++++++------- .../search-conversation-list-item.tsx | 7 ++--- .../search/parts/advanced-filter-button.tsx | 4 +-- src/views/search/parts/toggle-filters.tsx | 8 +++--- .../settings/filters/parts/filter-item.tsx | 10 +++---- .../tests/compose-msg-settings.test.tsx | 4 +-- .../sidebar/accordion-custom-component.tsx | 17 ++++++----- .../flat-folders-accordion.tsx | 13 ++++----- .../edit/modal-accordion-custom-component.tsx | 1 - .../parts/edit/share-folder-properties.tsx | 9 +++--- 28 files changed, 102 insertions(+), 131 deletions(-) delete mode 100644 .idea/runConfigurations/start.xml diff --git a/.idea/runConfigurations/start.xml b/.idea/runConfigurations/start.xml deleted file mode 100644 index 0ac61971e..000000000 --- a/.idea/runConfigurations/start.xml +++ /dev/null @@ -1,12 +0,0 @@ - - - - - -