From dd9b7a02a766b5e2c74d43b67ac6309723e065c4 Mon Sep 17 00:00:00 2001 From: Beatrice Guerra Date: Wed, 6 Nov 2024 12:21:02 +0100 Subject: [PATCH 1/5] refactor: upgrade styled-components-to-v6 Refs: CO-1610 --- package-lock.json | 335 +++++++++++------- package.json | 5 +- src/carbonio-ui-commons | 2 +- src/components/Text.tsx | 32 +- src/components/displayer-actions-header.tsx | 2 +- .../flat-folders-accordion.tsx | 35 +- src/components/main-list.tsx | 1 - .../address-book-edit/share-folder-modal.tsx | 4 +- .../address-book-edit/share-revoke-modal.tsx | 4 +- .../users-shares-list.tsx | 2 +- .../shimmed-displayer-list-item.tsx | 2 +- src/components/styled-components.tsx | 54 ++- src/legacy/commons/contact-compact-view.jsx | 8 +- src/legacy/commons/styled-components.jsx | 24 -- src/legacy/integrations/contact-input.tsx | 37 +- src/legacy/ui-actions/actions-context.tsx | 11 +- .../app/folder-panel/contact-list-item.tsx | 10 +- .../views/app/folder-panel/item-avatar.jsx | 14 + src/legacy/views/app/folder-panel/list.tsx | 4 +- src/legacy/views/edit/edit-view.jsx | 17 +- .../views/folder/list-item-action-wrapper.jsx | 10 +- .../views/preview/contact-preview-content.jsx | 2 +- .../views/search/parts/toggle-filters.tsx | 38 +- .../views/search/search-contact-list-item.tsx | 2 +- src/legacy/views/search/search-list.tsx | 4 +- src/legacy/views/search/types.d.ts | 6 - .../accordion-custom-component.tsx | 13 +- .../secondary-bar/commons/modal-footer.tsx | 139 +++++--- .../views/secondary-bar/sidebar-accordion.tsx | 1 - .../settings/components/settings-heading.jsx | 7 +- src/legacy/views/settings/settings-view.jsx | 2 +- .../list/contact-group-list-main-account.tsx | 6 +- .../list/contact-groups-list-shared.tsx | 6 +- .../distribution-lists-view.tsx | 6 +- tsconfig.json | 3 +- 35 files changed, 485 insertions(+), 363 deletions(-) delete mode 100644 src/legacy/commons/styled-components.jsx delete mode 100644 src/legacy/views/search/types.d.ts diff --git a/package-lock.json b/package-lock.json index 26c1b42e..4c0094a5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,19 +14,20 @@ "@mui/icons-material": "^6.1.2", "@mui/material": "^6.1.2", "@reduxjs/toolkit": "^2.2.7", - "@zextras/carbonio-design-system": "^8.0.0", + "@zextras/carbonio-design-system": "9.0.0-devel.5", "@zextras/carbonio-shell-ui": "devel", "axios": "^1.6.8", "core-js": "^3.36.0", "i18next": "^22.5.1", "immer": "^9.0.19", "lodash": "^4.17.21", + "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.0", "react-i18next": "^12.3.1", "react-redux": "^8.1.3", "react-router-dom": "^5.3.4", - "styled-components": "^5.3.11", + "styled-components": "^6.1.13", "uuid": "^9.0.1", "zustand": "^4.5.2" }, @@ -2446,8 +2447,7 @@ "node_modules/@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", - "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==", - "license": "MIT" + "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==" }, "node_modules/@emotion/unitless": { "version": "0.10.0", @@ -2645,6 +2645,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", @@ -5124,6 +5150,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", @@ -5621,34 +5652,58 @@ "license": "Apache-2.0" }, "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==", - "license": "AGPL-3.0-only", + "version": "9.0.0-devel.5", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-9.0.0-devel.5.tgz", + "integrity": "sha512-QcpnkZjqg1DXu2MWhJKFBhO+RdzXHKd8uP7kISDyYO1eR/QjAnnSncv5d/Fyer69vKG+HLmfIwPov2FAyqKPQg==", "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-design-system/node_modules/react-datepicker": { + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.5.0.tgz", + "integrity": "sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==", + "dependencies": { + "@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/@zextras/carbonio-design-system/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/@zextras/carbonio-shell-ui": { - "version": "8.0.3-devel.1727958799084", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-shell-ui/-/carbonio-shell-ui-8.0.3-devel.1727958799084.tgz", - "integrity": "sha512-dNEi2Hr5qEQfvlxv4qNnbpyKBBjsV7OpOjtzGICPiPn8chk+9p4TkU5uFWLdswc+FenmA9JFrIFSPtJFG8htcw==", + "version": "8.0.3-devel.1730804645987", + "resolved": "https://registry.npmjs.org/@zextras/carbonio-shell-ui/-/carbonio-shell-ui-8.0.3-devel.1730804645987.tgz", + "integrity": "sha512-v76ZhI2RxLGUZh5YOV0dg+MeUJ2BYOAn48ubkHC6bcnPhG08u+77Zwt8HcUGq6+TAgYcLnver7zzx4cT18RtGg==", "dependencies": { "@fontsource/roboto": "^5.0.8", "@sentry/browser": "^7.103.0", "@tinymce/tinymce-react": "^4.3.2", - "@zextras/carbonio-design-system": "^7.1.1", - "@zextras/carbonio-ui-preview": "^2.2.0", + "@zextras/carbonio-design-system": "^8.0.0", + "@zextras/carbonio-ui-preview": "^3.0.0", "darkreader": "^4.9.79", "history": "^5.3.0", "i18next": "^22.5.1", @@ -5656,8 +5711,8 @@ "immer": "^10.0.3", "lodash": "^4.17.21", "posthog-js": "^1.163.1", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-i18next": "^12.3.1", "react-router-dom": "^5.3.4", "styled-components": "^5.3.11", @@ -5670,12 +5725,12 @@ "npm": "v10" }, "peerDependencies": { - "@zextras/carbonio-design-system": "^7.1.1", - "@zextras/carbonio-ui-preview": "^2.2.0", + "@zextras/carbonio-design-system": "^8.0.0", + "@zextras/carbonio-ui-preview": "^3.0.0", "core-js": "^3.31.1", "lodash": "^4.17.21", - "react": "^17.0.2", - "react-dom": "^17.0.2", + "react": "^18.3.1", + "react-dom": "^18.3.1", "react-i18next": "^12.3.1", "react-router-dom": "^5.3.4", "styled-components": "^5.3.11" @@ -5707,38 +5762,41 @@ } } }, + "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": "7.1.1", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-design-system/-/carbonio-design-system-7.1.1.tgz", - "integrity": "sha512-VpQ2a/62J6iE3NLOx9KjZ5nSRQjYQd8nfElu0ZIlunLXBMwBXFQt4UWIRrd7v5P/fKcyi2O47h5u15yvXqglHA==", - "hasInstallScript": true, - "license": "AGPL-3.0-only", + "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": "^17.0.2", - "react-dom": "^17.0.2", + "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": "2.2.0", - "resolved": "https://registry.npmjs.org/@zextras/carbonio-ui-preview/-/carbonio-ui-preview-2.2.0.tgz", - "integrity": "sha512-UetOICJ8Tm3UP4mQkQZoiRAtS4z+iQb1adJl2TSH3ShdTrYgTafMxljcfAQKXk26J25wrd3rzd0PpBPJ2S6SiQ==", - "license": "AGPL-3.0-only", + "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": ">=1.0.0", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "@zextras/carbonio-design-system": "^8.0.0", + "react": "^18.0.0", + "react-dom": "^18.0.0" } }, "node_modules/@zextras/carbonio-shell-ui/node_modules/immer": { @@ -5751,41 +5809,33 @@ "url": "https://opencollective.com/immer" } }, - "node_modules/@zextras/carbonio-shell-ui/node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "license": "MIT", + "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": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "@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": ">=0.10.0" - } - }, - "node_modules/@zextras/carbonio-shell-ui/node_modules/react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "node": ">=10" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/styled-components" }, "peerDependencies": { - "react": "17.0.2" - } - }, - "node_modules/@zextras/carbonio-shell-ui/node_modules/scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0", + "react-is": ">= 16.8.0" } }, "node_modules/@zextras/carbonio-ui-configs": { @@ -7583,8 +7633,7 @@ "node_modules/classnames": { "version": "2.5.1", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", - "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==", - "license": "MIT" + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" }, "node_modules/clean-css": { "version": "5.3.3", @@ -8572,19 +8621,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==", - "license": "MIT", - "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": { @@ -15259,7 +15302,6 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.3.2.tgz", "integrity": "sha512-GCXh3bq/WuMbS+Ky4JBPW1hYTOU+znU+Q5m9Pu+pI8EoUqIHk9+tviOKC6/qhHh8C4/As3tzJ69IF32kdz85ww==", - "license": "MIT", "funding": { "url": "https://github.com/wojtekmaj/make-cancellable-promise?sponsor=1" } @@ -15304,7 +15346,6 @@ "version": "1.6.2", "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.6.2.tgz", "integrity": "sha512-iDwf7mA03WPiR8QxvcVHmVWEPfMY1RZXerDVNCRYW7dUr2ppH3J58Rwb39/WG39yTZdRSxr3x+2v22tvI0VEvA==", - "license": "MIT", "funding": { "url": "https://github.com/wojtekmaj/make-event-props?sponsor=1" } @@ -15375,7 +15416,6 @@ "version": "1.3.0", "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.3.0.tgz", "integrity": "sha512-nqXPXbso+1dcKDpPCXvwZyJILz+vSLqGGOnDrYHQYE+B8n9JTCekVLC65AfCpR4ggVyA/45Y0iR9LDyS2iI+zA==", - "license": "MIT", "funding": { "url": "https://github.com/wojtekmaj/merge-refs?sponsor=1" }, @@ -15804,7 +15844,6 @@ "version": "3.3.7", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz", "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==", - "dev": true, "funding": [ { "type": "github", @@ -16509,7 +16548,6 @@ "version": "0.2.1", "resolved": "https://registry.npmjs.org/path2d/-/path2d-0.2.1.tgz", "integrity": "sha512-Fl2z/BHvkTNvkuBzYTpTuirHZg6wW9z8+4SND/3mDTEcYbbNKWAy21dz9D3ePNNwrrK8pqZO5vLPZ1hLF6T7XA==", - "license": "MIT", "optional": true, "engines": { "node": ">=6" @@ -16519,7 +16557,6 @@ "version": "4.4.168", "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-4.4.168.tgz", "integrity": "sha512-MbkAjpwka/dMHaCfQ75RY1FXX3IewBVu6NGZOcxerRFlaBiIkZmUoR0jotX5VUzYZEXAGzSFtknWs5xRKliXPA==", - "license": "Apache-2.0", "engines": { "node": ">=18" }, @@ -17153,7 +17190,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -17358,7 +17394,6 @@ "version": "4.25.0", "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz", "integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==", - "license": "MIT", "dependencies": { "@popperjs/core": "^2.11.8", "classnames": "^2.2.6", @@ -17372,6 +17407,21 @@ "react-dom": "^16.9.0 || ^17 || ^18" } }, + "node_modules/react-datepicker/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/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -17388,8 +17438,7 @@ "node_modules/react-fast-compare": { "version": "3.2.2", "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", - "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==", - "license": "MIT" + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" }, "node_modules/react-i18next": { "version": "12.3.1", @@ -17430,7 +17479,6 @@ "version": "6.13.1", "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz", "integrity": "sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==", - "license": "MIT", "funding": { "type": "individual", "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" @@ -17444,7 +17492,6 @@ "version": "9.1.1", "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-9.1.1.tgz", "integrity": "sha512-Cn3RTJZMqVOOCgLMRXDamLk4LPGfyB2Np3OwQAUjmHIh47EpuGW1OpAA1Z1GVDLoHx4d5duEDo/YbUkDbr4QFQ==", - "license": "MIT", "dependencies": { "clsx": "^2.0.0", "dequal": "^2.0.3", @@ -17473,7 +17520,6 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", - "license": "MIT", "dependencies": { "react-fast-compare": "^3.0.1", "warning": "^4.0.2" @@ -18517,7 +18563,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, "license": "BSD-3-Clause", "engines": { "node": ">=0.10.0" @@ -18868,24 +18913,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==", - "license": "MIT", + "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", @@ -18893,15 +18936,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==", - "license": "MIT" + "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", @@ -18957,6 +19048,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", @@ -19941,7 +20037,6 @@ "version": "4.0.3", "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", - "license": "MIT", "dependencies": { "loose-envify": "^1.0.0" } diff --git a/package.json b/package.json index 1e5f62f8..147148af 100644 --- a/package.json +++ b/package.json @@ -67,19 +67,20 @@ "@mui/icons-material": "^6.1.2", "@mui/material": "^6.1.2", "@reduxjs/toolkit": "^2.2.7", - "@zextras/carbonio-design-system": "^8.0.0", + "@zextras/carbonio-design-system": "9.0.0-devel.5", "@zextras/carbonio-shell-ui": "devel", "axios": "^1.6.8", "core-js": "^3.36.0", "i18next": "^22.5.1", "immer": "^9.0.19", "lodash": "^4.17.21", + "prop-types": "^15.8.1", "react": "^18.3.1", "react-dom": "^18.3.0", "react-i18next": "^12.3.1", "react-redux": "^8.1.3", "react-router-dom": "^5.3.4", - "styled-components": "^5.3.11", + "styled-components": "^6.1.13", "uuid": "^9.0.1", "zustand": "^4.5.2" }, diff --git a/src/carbonio-ui-commons b/src/carbonio-ui-commons index faa8f21c..e5098888 160000 --- a/src/carbonio-ui-commons +++ b/src/carbonio-ui-commons @@ -1 +1 @@ -Subproject commit faa8f21cf9e7559c059d2263d0ca562297819837 +Subproject commit e5098888b4625f1a6a5dd3871ffc7014e9b449e5 diff --git a/src/components/Text.tsx b/src/components/Text.tsx index 4deac3d8..a7947b2c 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -11,30 +11,16 @@ import { TextWithTooltip, type TextWithTooltipProps } from '@zextras/carbonio-design-system'; -import styled, { type SimpleInterpolation } from 'styled-components'; +import styled from 'styled-components'; import { MakeOptional } from '../types/utils'; interface TextExtendedProps { width?: string; centered?: boolean; - italic?: boolean; inline?: boolean; - lineHeight?: number; } -type WithDollarPrefix = `$${S}`; - -type WithoutDollarPrefix = S extends `$${infer WithoutDollarString}` - ? WithoutDollarString - : S; - -type StyledTextProps = { - [K in WithDollarPrefix< - keyof Omit - >]: TextExtendedProps[WithoutDollarPrefix]; -}; - type TextWithOptionalTooltipProps = | ({ withTooltip: true } & MakeOptional) | ({ withTooltip?: boolean } & TextProps); @@ -50,17 +36,14 @@ const TextWithOptionalTooltip = ({ {children} ); -const StyledText = styled(TextWithOptionalTooltip)` - width: ${({ $width }): SimpleInterpolation => $width}; - display: ${({ $inline }): SimpleInterpolation => $inline && 'inline'}; - font-style: ${({ $italic }): SimpleInterpolation => $italic && 'italic'}; - text-align: ${({ $centered }): SimpleInterpolation => $centered && 'center'}; - line-height: ${({ $lineHeight }): SimpleInterpolation => $lineHeight}; +const StyledText = styled(TextWithOptionalTooltip)<{ $width?: string; $inline?: boolean }>` + width: ${({ $width }): string | undefined => $width}; + display: ${({ $inline }): string | undefined | false => $inline && 'inline'}; `; + export const Text = ({ width, centered, - italic, inline, lineHeight = 1.5, withTooltip = false, @@ -68,10 +51,9 @@ export const Text = ({ }: TextExtendedProps & TextWithOptionalTooltipProps): React.JSX.Element => ( diff --git a/src/components/displayer-actions-header.tsx b/src/components/displayer-actions-header.tsx index 5d483961..a690c3d8 100644 --- a/src/components/displayer-actions-header.tsx +++ b/src/components/displayer-actions-header.tsx @@ -25,7 +25,7 @@ export const DisplayerActionsHeader = ({ size={'medium'} backgroundColor={'transparent'} disabled={action.disabled} - color={action.color} + labelColor={action.color} /> )), [actions] diff --git a/src/components/folder-tree-selector/flat-folders-accordion.tsx b/src/components/folder-tree-selector/flat-folders-accordion.tsx index f326a8cb..405e2b23 100644 --- a/src/components/folder-tree-selector/flat-folders-accordion.tsx +++ b/src/components/folder-tree-selector/flat-folders-accordion.tsx @@ -10,8 +10,6 @@ import { Avatar, Collapse, Container, - ContainerProps, - getColor, Icon, IconButton, ListItem, @@ -42,31 +40,18 @@ const RootAccordion = styled(Row)` cursor: pointer; `; -const CustomContainer = styled(Container)` +const CustomContainer = styled(Container)<{ $active?: boolean }>` &:hover { - background-color: ${({ theme, active }): string => - active ? theme.palette.highlight.active : theme.palette.gray6.hover}; + background-color: ${({ theme, $active }): string => + $active ? theme.palette.highlight.active : theme.palette.gray6.hover}; } `; -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(ListItem).attrs({ + background: 'gray6', + activeBackground: 'highlight', + selectedBackground: 'gray5' +})``; type FlatFoldersAccordionFolderProps = { folder: Folder; @@ -142,7 +127,7 @@ const FlatFoldersAccordionFolder: FC = ({ return ( = ({ padding={'small'} onClick={onClick} background={selectedFolderId === folder.id ? 'highlight.active' : 'gray6'} - active={selectedFolderId === folder.id} + $active={selectedFolderId === folder.id} > diff --git a/src/components/main-list.tsx b/src/components/main-list.tsx index 1c4aa26a..4ab8d965 100644 --- a/src/components/main-list.tsx +++ b/src/components/main-list.tsx @@ -41,7 +41,6 @@ export const MainList = ({ data-testid="list-header" flexShrink={0} flexGrow={1} - gap="medium" > diff --git a/src/components/modals/address-book-edit/share-folder-modal.tsx b/src/components/modals/address-book-edit/share-folder-modal.tsx index 55800255..1ee7ced0 100644 --- a/src/components/modals/address-book-edit/share-folder-modal.tsx +++ b/src/components/modals/address-book-edit/share-folder-modal.tsx @@ -215,13 +215,13 @@ export const ShareFolderModal = ({ setStandardMessage(ev.target.value); }} disabled={!sendNotification} - backgroundColor="gray5" + background="gray5" /> diff --git a/src/components/modals/address-book-edit/share-revoke-modal.tsx b/src/components/modals/address-book-edit/share-revoke-modal.tsx index 5a1cde99..cef21044 100644 --- a/src/components/modals/address-book-edit/share-revoke-modal.tsx +++ b/src/components/modals/address-book-edit/share-revoke-modal.tsx @@ -139,13 +139,13 @@ export const ShareRevokeModal = ({ setStandardMessage(ev.target.value); }} disabled={!sendNotification} - backgroundColor="gray5" + background="gray5" /> diff --git a/src/components/modals/shared-address-books-add/users-shares-list.tsx b/src/components/modals/shared-address-books-add/users-shares-list.tsx index de39eb74..d4f443df 100644 --- a/src/components/modals/shared-address-books-add/users-shares-list.tsx +++ b/src/components/modals/shared-address-books-add/users-shares-list.tsx @@ -20,7 +20,7 @@ export type UsersSharesListProps = { const CustomListItem = styled(ListItem)` &:hover { - background-color: ${({ theme, active }): string => theme.palette.transparent.regular} + background-color: ${({ theme }): string => theme.palette.transparent.regular} `; export const UsersSharesList: FC = ({ shares, onSelectionChange }) => { diff --git a/src/components/shimmed-displayer-list-item.tsx b/src/components/shimmed-displayer-list-item.tsx index f39ff116..481b6d1e 100644 --- a/src/components/shimmed-displayer-list-item.tsx +++ b/src/components/shimmed-displayer-list-item.tsx @@ -21,7 +21,7 @@ export const ShimmedDisplayerListItem = (): React.JSX.Element => ( - + diff --git a/src/components/styled-components.tsx b/src/components/styled-components.tsx index 19a5b6e6..175e342d 100644 --- a/src/components/styled-components.tsx +++ b/src/components/styled-components.tsx @@ -4,7 +4,10 @@ * SPDX-License-Identifier: AGPL-3.0-only */ +import React from 'react'; + import { + AnyColor, Avatar, Container, getColor, @@ -13,15 +16,15 @@ import { pseudoClasses, Row } from '@zextras/carbonio-design-system'; -import styled, { css, type DefaultTheme, type SimpleInterpolation } from 'styled-components'; +import styled, { css } from 'styled-components'; export const HoverRow = styled(Row)` position: relative; cursor: pointer; - background: ${({ theme }): SimpleInterpolation => theme.palette.transparent.regular}; + background: ${({ theme }): string => theme.palette.transparent.regular}; &:hover { - background: ${({ theme }): SimpleInterpolation => theme.palette.transparent.hover}; + background: ${({ theme }): string => theme.palette.transparent.hover}; } `; @@ -49,27 +52,22 @@ export const ListItemContainer = styled(Container)` } `; -export const StyledListItem = styled(ListItem).attrs< - ListItemProps, - { backgroundColor?: string | keyof DefaultTheme['palette'] } ->(({ background, selectedBackground, activeBackground, active, selected }) => ({ - backgroundColor: (active && activeBackground) || (selected && selectedBackground) || background -}))` - ${({ backgroundColor, theme }): SimpleInterpolation => - backgroundColor && pseudoClasses(theme, backgroundColor, 'color')} +const StyledListItem = styled(ListItem)<{ $backgroundColor: AnyColor | undefined }>` + ${({ $backgroundColor, theme }): undefined | ReturnType => + $backgroundColor && pseudoClasses(theme, $backgroundColor, 'color')} transition: none; - ${({ backgroundColor, theme }): SimpleInterpolation => - backgroundColor && + ${({ $backgroundColor, theme }): undefined | ReturnType => + $backgroundColor && css` ${HoverBarContainer} { - background: linear-gradient(to right, transparent, ${getColor(backgroundColor, theme)}); + background: linear-gradient(to right, transparent, ${getColor($backgroundColor, theme)}); } &:focus ${HoverBarContainer} { background: linear-gradient( to right, transparent, - ${getColor(`${backgroundColor}.focus`, theme)} + ${getColor(`${$backgroundColor}.focus`, theme)} ); } @@ -77,7 +75,7 @@ export const StyledListItem = styled(ListItem).attrs< background: linear-gradient( to right, transparent, - ${getColor(`${backgroundColor}.hover`, theme)} + ${getColor(`${$backgroundColor}.hover`, theme)} ); } @@ -85,12 +83,34 @@ export const StyledListItem = styled(ListItem).attrs< background: linear-gradient( to right, transparent, - ${getColor(`${backgroundColor}.active`, theme)} + ${getColor(`${$backgroundColor}.active`, theme)} ); } `} `; +export const EnhancedListItem = React.forwardRef( + function EnhancedListItemFn( + { background, selectedBackground, activeBackground, active, selected, ...rest }, + ref + ) { + return ( + + ); + } +); + export const ScrollableContainer = styled(Container)` overflow-y: auto; `; diff --git a/src/legacy/commons/contact-compact-view.jsx b/src/legacy/commons/contact-compact-view.jsx index 8760737e..96e458b2 100644 --- a/src/legacy/commons/contact-compact-view.jsx +++ b/src/legacy/commons/contact-compact-view.jsx @@ -27,8 +27,8 @@ const AvatarMobile = styled(Avatar)` const AvatarHeader = styled(Row)` background: linear-gradient( to right, - ${({ theme, bg }) => theme.avatarColors[bg]}, - ${({ theme, bg2 }) => theme.avatarColors[bg2]} + ${({ theme, $bg }) => theme.avatarColors[$bg]}, + ${({ theme, $bg2 }) => theme.avatarColors[$bg2]} ); `; function calcColor(label) { @@ -101,8 +101,8 @@ export const CompactView = ({ contact, toggleOpen, open }) => { - * - * 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` - 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}; -`; - -export const TextUpperCase = styled(Text)` - text-transform: capitalize; -`; diff --git a/src/legacy/integrations/contact-input.tsx b/src/legacy/integrations/contact-input.tsx index 79d2330f..b572989d 100644 --- a/src/legacy/integrations/contact-input.tsx +++ b/src/legacy/integrations/contact-input.tsx @@ -21,7 +21,7 @@ import { import { soapFetch } from '@zextras/carbonio-shell-ui'; import { filter, find, map, trim, forEach, reject, uniqBy, noop, unescape } from 'lodash'; import { useTranslation } from 'react-i18next'; -import styled, { type DefaultTheme } from 'styled-components'; +import styled from 'styled-components'; import { ContactInputCustomChipComponent } from './contact-input-custom-chip-component'; import { isValidEmail, parseEmail } from '../../carbonio-ui-commons/helpers/email-parser'; @@ -103,20 +103,19 @@ const Hint = ({ contact }: { contact: ContactInputItem }): ReactElement => { }; interface SkeletonTileProps { - width?: string; - height?: string; - radius?: string; - theme: DefaultTheme; + $width?: string; + $height?: string; + $radius?: string; } const SkeletonTile = styled.div` - width: ${({ width }): string => width ?? '1rem'}; - max-width: ${({ width }): string => width ?? '1rem'}; - min-width: ${({ width }): string => width ?? '1rem'}; - height: ${({ height }): string => height ?? '1rem'}; - max-height: ${({ height }): string => height ?? '1rem'}; - min-height: ${({ height }): string => height ?? '1rem'}; - border-radius: ${({ radius }): string => radius ?? '0.125rem'}; + width: ${({ $width }): string => $width ?? '1rem'}; + max-width: ${({ $width }): string => $width ?? '1rem'}; + min-width: ${({ $width }): string => $width ?? '1rem'}; + height: ${({ $height }): string => $height ?? '1rem'}; + max-height: ${({ $height }): string => $height ?? '1rem'}; + min-height: ${({ $height }): string => $height ?? '1rem'}; + border-radius: ${({ $radius }): string => $radius ?? '0.125rem'}; background: ${({ theme }): string => theme.palette.gray2.regular}; `; @@ -128,15 +127,19 @@ const Loader = (): ReactElement => ( minWidth="16rem" minHeight="2rem" > - + - + ); diff --git a/src/legacy/ui-actions/actions-context.tsx b/src/legacy/ui-actions/actions-context.tsx index cc09a2e7..e0e6960b 100644 --- a/src/legacy/ui-actions/actions-context.tsx +++ b/src/legacy/ui-actions/actions-context.tsx @@ -10,7 +10,7 @@ import { Contact } from '../types/contact'; type ACPProps = { folderId: string; - selectedIds: Array; + selectedIds: Record; deselectAll: () => void; children: React.ReactNode; }; @@ -56,15 +56,18 @@ export const ActionsContextProvider: FC( - (item: Contact): ActionList => contextActionsCallback(item), + // FIXME: return type of contextActionsCallback does not match ActionList + (item: Contact): ActionList => contextActionsCallback(item) as ActionList, [contextActionsCallback] ); const getHoverActions = useCallback( - (item: Contact): ActionList => hoverActionsCallback(item), + // FIXME: return type of hoverActionsCallback does not match ActionList + (item: Contact): ActionList => hoverActionsCallback(item) as ActionList, [hoverActionsCallback] ); const getSecondaryActions = useCallback( - (): ActionList => secondaryActionsCallback(), + // FIXME: return type of secondaryActionsCallback does not match ActionList + (): ActionList => secondaryActionsCallback() as ActionList, [secondaryActionsCallback] ); diff --git a/src/legacy/views/app/folder-panel/contact-list-item.tsx b/src/legacy/views/app/folder-panel/contact-list-item.tsx index e4d7a68b..8bb8da57 100644 --- a/src/legacy/views/app/folder-panel/contact-list-item.tsx +++ b/src/legacy/views/app/folder-panel/contact-list-item.tsx @@ -77,14 +77,8 @@ export const ContactListItem = ({ > - - + + diff --git a/src/legacy/views/app/folder-panel/item-avatar.jsx b/src/legacy/views/app/folder-panel/item-avatar.jsx index c551a6d4..94bfcd35 100644 --- a/src/legacy/views/app/folder-panel/item-avatar.jsx +++ b/src/legacy/views/app/folder-panel/item-avatar.jsx @@ -6,6 +6,7 @@ import React, { useCallback, useMemo } from 'react'; import { Avatar, Container, Tooltip } from '@zextras/carbonio-design-system'; +import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import styled from 'styled-components'; @@ -56,3 +57,16 @@ export const ItemAvatar = ({ item, selected, selecting, toggle, isSearch = false ); }; + +ItemAvatar.propTypes = { + item: PropTypes.shape({ + firstName: PropTypes.string, + middleName: PropTypes.string, + lastName: PropTypes.string, + id: PropTypes.string + }), + selected: PropTypes.bool, + selecting: PropTypes.bool, + toggle: PropTypes.func, + isSearch: PropTypes.bool +}; diff --git a/src/legacy/views/app/folder-panel/list.tsx b/src/legacy/views/app/folder-panel/list.tsx index 9f1bd379..ddee854d 100644 --- a/src/legacy/views/app/folder-panel/list.tsx +++ b/src/legacy/views/app/folder-panel/list.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/legacy/views/edit/edit-view.jsx b/src/legacy/views/edit/edit-view.jsx index 848d7b5a..aa2e8984 100644 --- a/src/legacy/views/edit/edit-view.jsx +++ b/src/legacy/views/edit/edit-view.jsx @@ -17,6 +17,7 @@ import { } from '@zextras/carbonio-design-system'; import { useReplaceHistoryCallback, report } from '@zextras/carbonio-shell-ui'; import { filter, find, map, reduce } from 'lodash'; +import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import { useDispatch } from 'react-redux'; import { useParams } from 'react-router-dom'; @@ -69,7 +70,7 @@ const cleanMultivalueFields = (contact) => ({ const CustomStringField = ({ name, label, value, dispatch, autoFocus = false }) => ( ); +CustomStringField.propTypes = { + name: PropTypes.string, + label: PropTypes.string, + value: PropTypes.string, + dispatch: PropTypes.func, + autoFocus: PropTypes.bool +}; + export default function EditView({ panel, onClose, onTitleChanged }) { const { folderId, editId } = useParams(); const storeDispatch = useDispatch(); @@ -432,3 +441,9 @@ export default function EditView({ panel, onClose, onTitleChanged }) { ) : null; } + +EditView.propTypes = { + panel: PropTypes.bool, + onClose: PropTypes.func, + onTitleChanged: PropTypes.func +}; diff --git a/src/legacy/views/folder/list-item-action-wrapper.jsx b/src/legacy/views/folder/list-item-action-wrapper.jsx index 1d15f917..7da60e1b 100644 --- a/src/legacy/views/folder/list-item-action-wrapper.jsx +++ b/src/legacy/views/folder/list-item-action-wrapper.jsx @@ -6,6 +6,7 @@ import React, { useContext, useMemo } from 'react'; import { Container, Tooltip, Dropdown, IconButton } from '@zextras/carbonio-design-system'; +import PropTypes from 'prop-types'; import styled from 'styled-components'; import { HoverRow } from '../../../components/styled-components'; @@ -33,7 +34,7 @@ const CustomHoverRow = styled(HoverRow)` } `; -const ListItemActionWrapper = ({ children, current, onClick, contact }) => { +const ListItemActionWrapper = ({ children, onClick, contact }) => { const { getContextActions, getHoverActions } = useContext(ActionsContext); const hoverActions = useMemo(() => getHoverActions(contact), [contact, getHoverActions]); @@ -45,7 +46,6 @@ const ListItemActionWrapper = ({ children, current, onClick, contact }) => { mainAlignment="flex-start" crossAlignment="unset" onClick={onClick} - current={current} > {children} { ); }; +ListItemActionWrapper.propTypes = { + onClick: PropTypes.func, + contact: PropTypes.object, + children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]) +}; + export default ListItemActionWrapper; diff --git a/src/legacy/views/preview/contact-preview-content.jsx b/src/legacy/views/preview/contact-preview-content.jsx index 33126847..4f39b4d2 100644 --- a/src/legacy/views/preview/contact-preview-content.jsx +++ b/src/legacy/views/preview/contact-preview-content.jsx @@ -345,7 +345,7 @@ function ContactPreviewContent({ contact, onEdit, onDelete, onMail, onMove }) { data-testid="PreviewPanel" padding={{ all: 'extrasmall' }} width="100%" - mainAlignment="baseline" + mainAlignment="normal" style={{ overflowY: 'auto' }} > diff --git a/src/legacy/views/search/parts/toggle-filters.tsx b/src/legacy/views/search/parts/toggle-filters.tsx index b8e54eec..4b94fa17 100644 --- a/src/legacy/views/search/parts/toggle-filters.tsx +++ b/src/legacy/views/search/parts/toggle-filters.tsx @@ -22,29 +22,27 @@ const ToggleFilters: FC = ({ compProps }): ReactElement => { }, [isSharedFolderIncludedTobe, setIsSharedFolderIncludedTobe]); return ( - <> - - - - - - - - {t('label.include_shared_folders', 'Include shared address books')} - - - - - {t('search.shared_folders_note', 'Include shared address books in searches.')} + + + + + + + + {t('label.include_shared_folders', 'Include shared address books')} - + + + {t('search.shared_folders_note', 'Include shared address books in searches.')} + + - + ); }; diff --git a/src/legacy/views/search/search-contact-list-item.tsx b/src/legacy/views/search/search-contact-list-item.tsx index 6e03b1f0..7ecf51aa 100644 --- a/src/legacy/views/search/search-contact-list-item.tsx +++ b/src/legacy/views/search/search-contact-list-item.tsx @@ -31,7 +31,7 @@ export const SearchContactListItem = ({ item }: { item: Contact }): React.JSX.El return ( - + diff --git a/src/legacy/views/search/search-list.tsx b/src/legacy/views/search/search-list.tsx index 73807ca9..14d927a4 100644 --- a/src/legacy/views/search/search-list.tsx +++ b/src/legacy/views/search/search-list.tsx @@ -16,8 +16,8 @@ import { type SearchResults } from './search-view'; import { CustomListItem } from '../../../carbonio-ui-commons/components/list/list-item'; const BorderContainer = styled(Container)` - border-bottom: 0.0625rem solid ${({ theme }): string => theme?.palette?.gray2?.regular}; - border-right: 0.0625rem solid ${({ theme }): string => theme?.palette?.gray2?.regular}; + border-bottom: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular}; + border-right: 0.0625rem solid ${({ theme }): string => theme.palette.gray2.regular}; `; type SearchListProps = { diff --git a/src/legacy/views/search/types.d.ts b/src/legacy/views/search/types.d.ts deleted file mode 100644 index 8ebb455a..00000000 --- a/src/legacy/views/search/types.d.ts +++ /dev/null @@ -1,6 +0,0 @@ -/* - * SPDX-FileCopyrightText: 2024 Zextras - * - * SPDX-License-Identifier: AGPL-3.0-only - */ -declare module '*'; diff --git a/src/legacy/views/secondary-bar/accordion-custom-component.tsx b/src/legacy/views/secondary-bar/accordion-custom-component.tsx index fe66201d..81098986 100644 --- a/src/legacy/views/secondary-bar/accordion-custom-component.tsx +++ b/src/legacy/views/secondary-bar/accordion-custom-component.tsx @@ -5,7 +5,6 @@ */ import React, { FC, useCallback, useMemo } from 'react'; -import { ContainerProps } from '@mui/material'; import { AccordionItem, Avatar, @@ -40,9 +39,9 @@ const FittedRow = styled(Row)` height: 3rem; `; -const DropOverlayContainer = styled(Container)` +const DropOverlayContainer = styled(Container)<{ $folder: Folder }>` position: absolute; - width: calc(15.5rem - ${(props): number => props.folder.depth - 2}rem); + width: calc(15.5rem - ${(props): number => props.$folder.depth - 2}rem); height: 100%; background: ${(props): string => props.theme.palette.primary.regular}; border-radius: 0.25rem; @@ -50,9 +49,9 @@ const DropOverlayContainer = styled(Container)` +const DropDenyOverlayContainer = styled(Container)<{ $folder: Folder }>` position: absolute; - width: calc(15.5rem - ${(props): number => props.folder.depth - 2}rem); + width: calc(15.5rem - ${(props): number => props.$folder.depth - 2}rem); height: 100%; background: ${(props): string => props.theme.palette.gray1.regular}; border-radius: 0.25rem; @@ -197,8 +196,8 @@ export const AccordionCustomComponent: FC<{ item: Folder }> = ({ item: folder }) event: data.event } as OnDropActionProps) } - overlayAcceptComponent={} - overlayDenyComponent={} + overlayAcceptComponent={} + overlayDenyComponent={} > = ({ showDivider = true, tooltip, secondaryTooltip -}): ReactElement => ( - - {showDivider && } +}): ReactElement => { + const secondaryTypeAndColor = useMemo< + | { type: 'ghost'; color: AnyColor } + | { + type: 'default' | 'outlined'; + backgroundColor: AnyColor | undefined; + labelColor: AnyColor; + } + >(() => { + if (secondaryBtnType === 'ghost') { + return { type: secondaryBtnType, color: secondaryColor }; + } + return { + type: secondaryBtnType, + backgroundColor: secondarybackground, + labelColor: secondaryColor + }; + }, [secondaryBtnType, secondaryColor, secondarybackground]); + const primaryTypeAndColor = useMemo< + | { type: 'ghost'; color: AnyColor } + | { + type: 'default' | 'outlined'; + backgroundColor: AnyColor; + labelColor: AnyColor; + } + >(() => { + if (primaryBtnType === 'ghost') { + return { type: primaryBtnType, color }; + } + return { type: primaryBtnType, backgroundColor: background, labelColor: color }; + }, [background, color, primaryBtnType]); + + return ( - {secondaryAction && ( - - {secondaryTooltip ? ( - + {showDivider && } + + + {secondaryAction && ( + + {secondaryTooltip ? ( + +