From 5f0479e34ac64df50e1d4327a98b2992c2033706 Mon Sep 17 00:00:00 2001 From: lenhanphung Date: Mon, 29 Dec 2025 14:27:06 +0700 Subject: [PATCH] implement twake mui --- __test__/components/ResponsiveDialog.test.tsx | 53 +++++++------- __test__/utils/Renderwithproviders.tsx | 47 +++++++------ jest.config.ts | 6 +- package-lock.json | 69 +++++++++---------- package.json | 1 + rsbuild.config.ts | 11 +++ src/App.tsx | 6 +- src/components/Attendees/PeopleSearch.tsx | 24 +++---- src/components/Calendar/AccessTab.tsx | 2 +- src/components/Calendar/Calendar.tsx | 5 +- .../Calendar/CalendarColorPicker.tsx | 2 +- src/components/Calendar/CalendarItemList.tsx | 6 +- src/components/Calendar/CalendarModal.tsx | 6 +- src/components/Calendar/CalendarName.tsx | 6 +- src/components/Calendar/CalendarSearch.tsx | 20 +++--- src/components/Calendar/CalendarSelection.tsx | 19 +++-- .../Calendar/DeleteCalendarDialog.tsx | 18 ++--- src/components/Calendar/ImportTab.tsx | 2 +- src/components/Calendar/SettingsTab.tsx | 2 +- .../Calendar/TempCalendarsInput.tsx | 4 +- src/components/Calendar/TimezoneSelector.tsx | 2 +- .../Calendar/utils/calendarColorsUtils.tsx | 2 +- src/components/Dialog/ResponsiveDialog.tsx | 7 +- src/components/Error/Error.tsx | 2 +- src/components/Error/ErrorSnackbar.tsx | 4 +- src/components/Event/AddDescButton.tsx | 2 +- src/components/Event/EditModeDialog.tsx | 2 +- .../Event/EventChip/ErrorEventChip.tsx | 2 +- src/components/Event/EventChip/EventChip.tsx | 2 +- .../Event/EventChip/EventChipUtils.tsx | 2 +- .../Event/EventChip/SimpleEventChip.tsx | 2 +- src/components/Event/EventDuplicate.tsx | 2 +- src/components/Event/EventFormFields.tsx | 2 +- src/components/Event/EventRepeat.tsx | 2 +- src/components/Event/InfoRow.tsx | 2 +- .../Event/components/DateTimeFields.tsx | 4 +- .../Event/components/EditableTimeField.tsx | 2 +- .../Event/components/FieldWithLabel.tsx | 2 +- .../Event/components/ReadOnlyPickerField.tsx | 2 +- src/components/Event/utils/eventUtils.tsx | 5 +- src/components/Loading/SnackBarAlert.tsx | 4 +- src/components/Menubar/EventSearchBar.tsx | 4 +- src/components/Menubar/Menubar.tsx | 4 +- .../Timezone/TimezoneAutocomplete.tsx | 2 +- .../AttendanceValidation.tsx | 2 +- .../AttendanceValidation/RSVPButton.tsx | 2 +- src/features/Events/EventDisplayPreview.tsx | 49 ++++++++----- src/features/Events/EventModal.tsx | 2 +- src/features/Events/EventUpdateModal.tsx | 2 +- src/features/Search/SearchResultsPage.tsx | 3 +- src/features/Settings/SettingsPage.tsx | 2 +- src/theme/ThemeProvider.tsx | 19 ----- src/theme/theme.ts | 38 ---------- 53 files changed, 235 insertions(+), 259 deletions(-) delete mode 100644 src/theme/ThemeProvider.tsx delete mode 100644 src/theme/theme.ts diff --git a/__test__/components/ResponsiveDialog.test.tsx b/__test__/components/ResponsiveDialog.test.tsx index 54d2b37..c97795c 100644 --- a/__test__/components/ResponsiveDialog.test.tsx +++ b/__test__/components/ResponsiveDialog.test.tsx @@ -1,19 +1,24 @@ import { fireEvent, render, screen } from "@testing-library/react"; import React from "react"; import { ResponsiveDialog } from "../../src/components/Dialog"; -import { Button, TextField } from "@mui/material"; +import { Button, TextField } from "twake-mui"; +import { TwakeMuiThemeProvider } from "twake-mui"; describe("ResponsiveDialog", () => { const mockOnClose = jest.fn(); const mockOnExpandToggle = jest.fn(); + const renderWithTheme = (ui: React.ReactElement) => { + return render({ui}); + }; + beforeEach(() => { mockOnClose.mockClear(); mockOnExpandToggle.mockClear(); }); it("renders in normal mode by default", () => { - render( + renderWithTheme( @@ -24,7 +29,7 @@ describe("ResponsiveDialog", () => { }); it("renders title in normal mode", () => { - render( + renderWithTheme( { }); it("renders back arrow in extended mode", () => { - render( + renderWithTheme( { }); it("calls onExpandToggle when back arrow is clicked", () => { - render( + renderWithTheme( { }); it("renders actions when provided", () => { - render( + renderWithTheme( { }); it("does not render actions when not provided", () => { - const { container } = render( + const { container } = renderWithTheme(
Content
 @@ -102,7 +107,7 @@ describe("ResponsiveDialog", () => { }); it("calls onClose when backdrop is clicked", () => { - render( + renderWithTheme(
Content
 @@ -117,7 +122,7 @@ describe("ResponsiveDialog", () => { }); it("applies custom normalMaxWidth", () => { - render( + renderWithTheme( { }); it("wraps children in Stack component", () => { - render( + renderWithTheme( @@ -144,7 +149,7 @@ describe("ResponsiveDialog", () => { }); it("uses correct spacing in normal mode", () => { - render( + renderWithTheme( { }); it("uses correct spacing in extended mode", () => { - render( + renderWithTheme( { }); it("applies contentSx custom styles", () => { - render( + renderWithTheme( { }); it("applies titleSx custom styles", () => { - const { container } = render( + const { container } = renderWithTheme( { }); it("shows dividers when dividers prop is true", () => { - render( + renderWithTheme( { }); it("does not show back arrow when onExpandToggle is not provided", () => { - render( + renderWithTheme( { }); it("accepts custom headerHeight", () => { - render( + renderWithTheme( { }); it("renders with custom expandedContentMaxWidth", () => { - render( + renderWithTheme( { }); it("does not render dialog content when open is false", () => { - render( + renderWithTheme(
Test Content
 @@ -280,7 +285,7 @@ describe("ResponsiveDialog", () => { }); it("renders correctly in extended mode", () => { - render( + renderWithTheme( { }); it("renders expand and close icons in normal mode when showHeaderActions is true", () => { - render( + renderWithTheme( { }); it("does not render header icons when showHeaderActions is false", () => { - render( + renderWithTheme( { }); it("calls onClose when close icon is clicked", () => { - render( + renderWithTheme( { }); it("calls onExpandToggle when expand icon is clicked", () => { - render( + renderWithTheme( { @@ -21,28 +22,30 @@ export function renderWithProviders( const Wrapper = ({ children }: PropsWithChildren) => { return ( - ) => { - if (key === "locale") { - return "en"; - } - if (vars) { - const params = Object.entries(vars) - .map(([k, v]) => `${k}=${v}`) - .join(","); - return `${key}(${params})`; - } - return key; - }, - f: (date: Date, formatStr: string) => date.toString(), - lang: "en", - }} - > - - {children} - - + + ) => { + if (key === "locale") { + return "en"; + } + if (vars) { + const params = Object.entries(vars) + .map(([k, v]) => `${k}=${v}`) + .join(","); + return `${key}(${params})`; + } + return key; + }, + f: (date: Date, formatStr: string) => date.toString(), + lang: "en", + }} + > + + {children} + + + ); }; diff --git a/jest.config.ts b/jest.config.ts index ccc83c1..ccfd0de 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -37,7 +37,11 @@ const config: Config = { "/node_modules/(?!(preact|@fullcalendar|react-calendar|get-user-locale|memoize|mimic-function|@wojtekmaj|ky|cozy-ui)/)", ], - moduleNameMapper: { "^preact(/(.*)|$)": "preact$1" }, + moduleNameMapper: { + "^preact(/(.*)|$)": "preact$1", + "^react$": "/node_modules/react", + "^react-dom$": "/node_modules/react-dom", + }, setupFilesAfterEnv: ["/src/setupTests.ts"], }, { diff --git a/package-lock.json b/package-lock.json index 8052938..c4df0fb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,7 @@ "react-router-dom": "^6.23.1", "redux-first-history": "^5.2.0", "twake-i18n": "^0.3.0", + "twake-mui": "file:../twake-ui/packages/twake-mui", "web-vitals": "^2.1.4" }, "devDependencies": { @@ -77,6 +78,29 @@ "node": "24.x" } }, + "../twake-ui/packages/twake-mui": { + "version": "1.0.0", + "license": "MIT", + "dependencies": { + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/react": "^18.3.26", + "@types/react-dom": "^18.3.7", + "typescript": "^4.9.5" + }, + "engines": { + "node": "24.x" + }, + "peerDependencies": { + "@emotion/react": "^11.14.0", + "@emotion/styled": "^11.14.1", + "@mui/material": "^7.1.2", + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, "node_modules/@adobe/css-tools": { "version": "4.4.4", "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.4.4.tgz", @@ -135,7 +159,6 @@ "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.27.1", "@babel/generator": "^7.28.5", @@ -2046,7 +2069,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" }, @@ -2070,7 +2092,6 @@ } ], "license": "MIT", - "peer": true, "engines": { "node": ">=18" } @@ -2173,7 +2194,6 @@ "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz", "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -2217,7 +2237,6 @@ "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz", "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.18.3", "@emotion/babel-plugin": "^11.13.5", @@ -2490,7 +2509,6 @@ "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.19.tgz", "integrity": "sha512-z0aVlO5e4Wah6p6mouM0UEqtRf1MZZPt4mwzEyU6kusaNL+dlWQgAasF2cK23hwT4cmxkEmr4inULXgpyeExdQ==", "license": "MIT", - "peer": true, "dependencies": { "preact": "~10.12.1" } @@ -3213,7 +3231,6 @@ "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.6.tgz", "integrity": "sha512-R4DaYF3dgCQCUAkr4wW1w26GHXcf5rCmBRHVBuuvJvaGLmZdD8EjatP80Nz5JCw0KxORAzwftnHzXVnjR8HnFw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.28.4", "@mui/core-downloads-tracker": "^7.3.6", @@ -3324,7 +3341,6 @@ "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.6.tgz", "integrity": "sha512-8fehAazkHNP1imMrdD2m2hbA9sl7Ur6jfuNweh5o4l9YPty4iaZzRXqYvBCWQNwFaSHmMEj2KPbyXGp7Bt73Rg==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.28.4", "@mui/private-theming": "^7.3.6", @@ -3683,7 +3699,6 @@ "integrity": "sha512-7Isd9G6ufIK5+kPCH8OhvVAVD5clsak9bp9IfhyEWT8SH43cLuXsUpK+4w0a6JA/kM98ea7KJEigIuCHJ5wAag==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@rspack/core": "1.6.6", "@rspack/lite-tapable": "~1.1.0", @@ -3911,7 +3926,6 @@ "integrity": "sha512-2mR+2YBydlgZ7Q0Rpd6bCC3MBnV9TS0x857K0zIhbDj4BQOqaWVy1n7fx/B3MrS8TR0QCuzKfyDAjNz+XTyJVQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@module-federation/runtime-tools": "0.21.6", "@rspack/binding": "1.6.6", @@ -4171,7 +4185,6 @@ "integrity": "sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.21.3", "@svgr/babel-preset": "8.1.0", @@ -4256,7 +4269,6 @@ "integrity": "sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==", "dev": true, "license": "Apache-2.0", - "peer": true, "dependencies": { "tslib": "^2.8.0" } @@ -4267,7 +4279,6 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -4560,7 +4571,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.27.tgz", "integrity": "sha512-cisd7gxkzjBKU2GgdYrTdtQx1SORymWyaAFhaxQPK9bYO9ot3Y5OikQRvY0VYQtvwjeQnizCINJAenh/V7MK2w==", "license": "MIT", - "peer": true, "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" @@ -4572,7 +4582,6 @@ "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==", "dev": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^18.0.0" } @@ -4629,7 +4638,6 @@ "integrity": "sha512-X63hI1bxl5ohelzr0LY5coufyl0LJNthld+abwxpCoo6Gq+hSqhKwci7MUWkXo67mzgUK6YFByhmaHmUcuBJmA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/regexpp": "^4.10.0", "@typescript-eslint/scope-manager": "8.48.1", @@ -4660,7 +4668,6 @@ "integrity": "sha512-PC0PDZfJg8sP7cmKe6L3QIL8GZwU5aRvUFedqSIpw3B+QjRSUZeeITC2M5XKeMXEzL6wccN196iy3JLwKNvDVA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.48.1", "@typescript-eslint/types": "8.48.1", @@ -5167,7 +5174,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -5909,7 +5915,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -6615,7 +6620,6 @@ "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.21.0" }, @@ -6631,8 +6635,7 @@ "version": "1.11.19", "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz", "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/debug": { "version": "4.4.3", @@ -7222,7 +7225,6 @@ "integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -8584,7 +8586,6 @@ "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz", "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==", "license": "MIT", - "peer": true, "dependencies": { "@babel/runtime": "^7.7.6" } @@ -9559,7 +9560,6 @@ "integrity": "sha512-F26gjC0yWN8uAA5m5Ss8ZQf5nDHWGlN/xWZIh8S5SRbsEKBovwZhxGd6LJlbZYxBgCYOtreSUyb8hpXyGC5O4A==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@jest/core": "30.2.0", "@jest/types": "30.2.0", @@ -10324,7 +10324,6 @@ "integrity": "sha512-/xdLSWxK5QkqG524ONSjvg3V/FkNyCv538OIBdQqPNaAta3AsXj/Bd2FbvR87yMbXO2hFSWiAe/Q6IkVPDw+mw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/core": "^7.19.6", "@svgr/babel-preset": "^6.5.1", @@ -10783,7 +10782,6 @@ "integrity": "sha512-Cvc9WUhxSMEo4McES3P7oK3QaXldCfNWp7pl2NNeiIFlCoLr3kfq9kb1fxftiwk1FLV7CvpvDfonxtzUDeSOPg==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "cssstyle": "^4.2.1", "data-urls": "^5.0.0", @@ -11220,7 +11218,6 @@ "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz", "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==", "license": "MIT", - "peer": true, "engines": { "node": "*" } @@ -11230,7 +11227,6 @@ "resolved": "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.48.tgz", "integrity": "sha512-f22b8LV1gbTO2ms2j2z13MuPogNoh5UzxL3nzNAYKGraILnbGc9NEE6dyiiiLv46DGRb8A4kg8UKWLjPthxBHw==", "license": "MIT", - "peer": true, "dependencies": { "moment": "^2.29.4" }, @@ -11266,6 +11262,7 @@ } ], "license": "MIT", + "peer": true, "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -12202,7 +12199,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -12225,7 +12221,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" @@ -12245,7 +12240,6 @@ "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz", "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==", "license": "MIT", - "peer": true, "dependencies": { "@types/use-sync-external-store": "^0.0.6", "use-sync-external-store": "^1.4.0" @@ -12270,7 +12264,6 @@ "integrity": "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -12371,8 +12364,7 @@ "version": "5.0.1", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/redux-first-history": { "version": "5.2.0", @@ -13599,7 +13591,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -13833,6 +13824,10 @@ "react-dom": "^16 || ^17 || ^18" } }, + "node_modules/twake-mui": { + "resolved": "../twake-ui/packages/twake-mui", + "link": true + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -13953,7 +13948,6 @@ "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -14746,7 +14740,6 @@ "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/package.json b/package.json index 37378a3..97f6b5f 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "react-router-dom": "^6.23.1", "redux-first-history": "^5.2.0", "twake-i18n": "^0.3.0", + "twake-mui": "file:../twake-ui/packages/twake-mui", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/rsbuild.config.ts b/rsbuild.config.ts index 636c627..6a0d427 100644 --- a/rsbuild.config.ts +++ b/rsbuild.config.ts @@ -23,4 +23,15 @@ export default defineConfig({ }, minify: false, }, + resolve: { + alias: { + react: require.resolve("react"), + "react-dom": require.resolve("react-dom"), + }, + }, + performance: { + chunkOverflow: { + maxAssetSize: 2000000, + }, + }, }); diff --git a/src/App.tsx b/src/App.tsx index 1ac8242..cf729b4 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -8,7 +8,7 @@ import { Loading } from "./components/Loading/Loading"; import HandleLogin from "./features/User/HandleLogin"; import CalendarLayout from "./components/Calendar/CalendarLayout"; import { Error } from "./components/Error/Error"; -import { CustomThemeProvider } from "./theme/ThemeProvider"; +import { TwakeMuiThemeProvider } from "twake-mui"; import { useAppDispatch, useAppSelector } from "./app/hooks"; import { push } from "redux-first-history"; import { ErrorSnackbar } from "./components/Error/ErrorSnackbar"; @@ -61,7 +61,7 @@ function App() { }, [error, dispatch]); return ( - + locale[lang]} lang={lang} @@ -79,7 +79,7 @@ function App() { - + ); } diff --git a/src/components/Attendees/PeopleSearch.tsx b/src/components/Attendees/PeopleSearch.tsx index 289f235..8e630de 100644 --- a/src/components/Attendees/PeopleSearch.tsx +++ b/src/components/Attendees/PeopleSearch.tsx @@ -1,12 +1,13 @@ -import Autocomplete, { - AutocompleteRenderInputParams, -} from "@mui/material/Autocomplete"; -import Avatar from "@mui/material/Avatar"; -import CircularProgress from "@mui/material/CircularProgress"; -import ListItem from "@mui/material/ListItem"; -import ListItemAvatar from "@mui/material/ListItemAvatar"; -import ListItemText from "@mui/material/ListItemText"; -import TextField from "@mui/material/TextField"; +import { + Autocomplete, + type AutocompleteRenderInputParams, + Avatar, + CircularProgress, + ListItem, + ListItemAvatar, + ListItemText, + TextField, +} from "twake-mui"; import { type ReactNode, useCallback, @@ -16,12 +17,11 @@ import { } from "react"; import { searchUsers } from "../../features/User/userAPI"; import PeopleOutlineOutlinedIcon from "@mui/icons-material/PeopleOutlineOutlined"; -import Chip from "@mui/material/Chip"; -import { useTheme } from "@mui/material/styles"; +import { Chip, useTheme } from "twake-mui"; import { getAccessiblePair } from "../Calendar/utils/calendarColorsUtils"; import { useI18n } from "twake-i18n"; import { SnackbarAlert } from "../Loading/SnackBarAlert"; -import { PopperProps, PaperProps } from "@mui/material"; +import { PopperProps, PaperProps } from "twake-mui"; export interface User { email: string; diff --git a/src/components/Calendar/AccessTab.tsx b/src/components/Calendar/AccessTab.tsx index d14e679..306b742 100644 --- a/src/components/Calendar/AccessTab.tsx +++ b/src/components/Calendar/AccessTab.tsx @@ -9,7 +9,7 @@ import { InputAdornment, Backdrop, CircularProgress, -} from "@mui/material"; +} from "twake-mui"; import { useState, useEffect } from "react"; import { exportCalendar, diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx index e3bf03a..2451f3b 100644 --- a/src/components/Calendar/Calendar.tsx +++ b/src/components/Calendar/Calendar.tsx @@ -20,8 +20,7 @@ import { push } from "redux-first-history"; import EventPreviewModal from "../../features/Events/EventDisplayPreview"; import AddIcon from "@mui/icons-material/Add"; import { TempCalendarsInput } from "./TempCalendarsInput"; -import Button from "@mui/material/Button"; -import { Box } from "@mui/material"; +import { Button, Box } from "twake-mui"; import { updateSlotLabelVisibility, eventToFullCalendarFormat, @@ -36,7 +35,7 @@ import momentTimezonePlugin from "@fullcalendar/moment-timezone"; import { TimezoneSelector } from "./TimezoneSelector"; import { MiniCalendar } from "./MiniCalendar"; import { User } from "../Attendees/PeopleSearch"; -import { useTheme } from "@mui/material/styles"; +import { useTheme } from "twake-mui"; import { updateDarkColor } from "./utils/calendarColorsUtils"; import { useI18n } from "twake-i18n"; import frLocale from "@fullcalendar/core/locales/fr"; diff --git a/src/components/Calendar/CalendarColorPicker.tsx b/src/components/Calendar/CalendarColorPicker.tsx index d7e72da..75b4075 100644 --- a/src/components/Calendar/CalendarColorPicker.tsx +++ b/src/components/Calendar/CalendarColorPicker.tsx @@ -7,7 +7,7 @@ import { TextField, Typography, useTheme, -} from "@mui/material"; +} from "twake-mui"; import { useState } from "react"; import { HexColorPicker } from "react-colorful"; import { useI18n } from "twake-i18n"; diff --git a/src/components/Calendar/CalendarItemList.tsx b/src/components/Calendar/CalendarItemList.tsx index cd6b5b3..9a7f42c 100644 --- a/src/components/Calendar/CalendarItemList.tsx +++ b/src/components/Calendar/CalendarItemList.tsx @@ -1,10 +1,10 @@ import React from "react"; -import { MenuItem } from "@mui/material"; -import { Calendar } from "../../features/Calendars/CalendarTypes"; +import { MenuItem } from "@linagora/twake-mui"; +import { Calendars } from "../../features/Calendars/CalendarTypes"; import { CalendarName } from "./CalendarName"; export function CalendarItemList( - userPersonalCalendars: Calendar[] + userPersonalCalendars: Calendars[] ): React.ReactNode { return Object.values(userPersonalCalendars).map((calendar) => ( diff --git a/src/components/Calendar/CalendarModal.tsx b/src/components/Calendar/CalendarModal.tsx index bc16138..d827711 100644 --- a/src/components/Calendar/CalendarModal.tsx +++ b/src/components/Calendar/CalendarModal.tsx @@ -1,4 +1,4 @@ -import { Button, DialogActions, Tab, Tabs } from "@mui/material"; +import { Button, Tab, Tabs } from "twake-mui"; import { useEffect, useState } from "react"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; import { @@ -198,7 +198,7 @@ function CalendarPopover({ } actions={ - + <> - + } > {tab === "import" && ( diff --git a/src/components/Calendar/CalendarName.tsx b/src/components/Calendar/CalendarName.tsx index 8c64c5a..c2754c6 100644 --- a/src/components/Calendar/CalendarName.tsx +++ b/src/components/Calendar/CalendarName.tsx @@ -1,7 +1,7 @@ -import { Box, Typography } from "@mui/material"; -import { Calendar } from "../../features/Calendars/CalendarTypes"; +import { Box, Typography } from "@linagora/twake-mui"; +import { Calendars } from "../../features/Calendars/CalendarTypes"; import SquareRoundedIcon from "@mui/icons-material/SquareRounded"; -export function CalendarName({ calendar }: { calendar: Calendar }) { +export function CalendarName({ calendar }: { calendar: Calendars }) { return ( ; + calendars: Record; selectedCal: CalendarWithOwner[]; onRemove: (cal: CalendarWithOwner) => void; onColorChange: ( diff --git a/src/components/Calendar/CalendarSelection.tsx b/src/components/Calendar/CalendarSelection.tsx index d6c32c0..1119bbc 100644 --- a/src/components/Calendar/CalendarSelection.tsx +++ b/src/components/Calendar/CalendarSelection.tsx @@ -1,18 +1,23 @@ -import Accordion from "@mui/material/Accordion"; -import AccordionDetails from "@mui/material/AccordionDetails"; -import AccordionSummary from "@mui/material/AccordionSummary"; -import Typography from "@mui/material/Typography"; +import { + Accordion, + AccordionDetails, + AccordionSummary, + Typography, + IconButton, + Checkbox, + Divider, + ListItem, + Menu, + MenuItem, +} from "twake-mui"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; import AddIcon from "@mui/icons-material/Add"; import { useState, useMemo, useEffect } from "react"; import CalendarPopover from "./CalendarModal"; import { Calendar } from "../../features/Calendars/CalendarTypes"; import MoreVertIcon from "@mui/icons-material/MoreVert"; -import IconButton from "@mui/material/IconButton"; -import Checkbox from "@mui/material/Checkbox"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import CalendarSearch from "./CalendarSearch"; -import { Divider, ListItem, Menu, MenuItem } from "@mui/material"; import { removeCalendarAsync } from "../../features/Calendars/CalendarSlice"; import { DeleteCalendarDialog } from "./DeleteCalendarDialog"; import { trimLongTextWithoutSpace } from "../../utils/textUtils"; diff --git a/src/components/Calendar/DeleteCalendarDialog.tsx b/src/components/Calendar/DeleteCalendarDialog.tsx index 502ef2f..86cce19 100644 --- a/src/components/Calendar/DeleteCalendarDialog.tsx +++ b/src/components/Calendar/DeleteCalendarDialog.tsx @@ -1,10 +1,12 @@ -import Dialog from "@mui/material/Dialog"; -import { Calendar } from "../../features/Calendars/CalendarTypes"; -import DialogTitle from "@mui/material/DialogTitle"; -import DialogContent from "@mui/material/DialogContent"; -import DialogContentText from "@mui/material/DialogContentText"; -import DialogActions from "@mui/material/DialogActions"; -import Button from "@mui/material/Button"; +import { + Dialog, + DialogTitle, + DialogContent, + DialogContentText, + DialogActions, + Button, +} from "@linagora/twake-mui"; +import { Calendars } from "../../features/Calendars/CalendarTypes"; import { useI18n } from "twake-i18n"; export function DeleteCalendarDialog({ @@ -17,7 +19,7 @@ export function DeleteCalendarDialog({ }: { deletePopupOpen: boolean; setDeletePopupOpen: (e: boolean) => void; - calendars: Record; + calendars: Record; id: string; isPersonal: boolean; handleDeleteConfirm: () => void; diff --git a/src/components/Calendar/ImportTab.tsx b/src/components/Calendar/ImportTab.tsx index c476b14..223bcf8 100644 --- a/src/components/Calendar/ImportTab.tsx +++ b/src/components/Calendar/ImportTab.tsx @@ -9,7 +9,7 @@ import { ToggleButton, ToggleButtonGroup, Typography, -} from "@mui/material"; +} from "twake-mui"; import { useEffect, useState } from "react"; import { useAppSelector } from "../../app/hooks"; import { CalendarItemList } from "./CalendarItemList"; diff --git a/src/components/Calendar/SettingsTab.tsx b/src/components/Calendar/SettingsTab.tsx index 99d305b..3006186 100644 --- a/src/components/Calendar/SettingsTab.tsx +++ b/src/components/Calendar/SettingsTab.tsx @@ -8,7 +8,7 @@ import { ToggleButton, ToggleButtonGroup, Typography, -} from "@mui/material"; +} from "twake-mui"; import { useI18n } from "twake-i18n"; import { useState, useEffect } from "react"; import { useAppSelector } from "../../app/hooks"; diff --git a/src/components/Calendar/TempCalendarsInput.tsx b/src/components/Calendar/TempCalendarsInput.tsx index 12ca7c0..f5e2c81 100644 --- a/src/components/Calendar/TempCalendarsInput.tsx +++ b/src/components/Calendar/TempCalendarsInput.tsx @@ -1,4 +1,4 @@ -import { useTheme } from "@mui/material/styles"; +import { useTheme } from "twake-mui"; import { useRef } from "react"; import { useI18n } from "twake-i18n"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; @@ -8,7 +8,7 @@ import { } from "../../features/Calendars/CalendarSlice"; import { Calendar } from "../../features/Calendars/CalendarTypes"; import { setView } from "../../features/Settings/SettingsSlice"; -import TextField from "@mui/material/TextField"; +import { TextField } from "twake-mui"; import { User, PeopleSearch } from "../Attendees/PeopleSearch"; import { getAccessiblePair } from "./utils/calendarColorsUtils"; diff --git a/src/components/Calendar/TimezoneSelector.tsx b/src/components/Calendar/TimezoneSelector.tsx index c52669c..a4fa68e 100644 --- a/src/components/Calendar/TimezoneSelector.tsx +++ b/src/components/Calendar/TimezoneSelector.tsx @@ -1,4 +1,4 @@ -import { Button, Popover } from "@mui/material"; +import { Button, Popover } from "twake-mui"; import { useI18n } from "twake-i18n"; import moment from "moment"; import { MouseEvent, useMemo, useState } from "react"; diff --git a/src/components/Calendar/utils/calendarColorsUtils.tsx b/src/components/Calendar/utils/calendarColorsUtils.tsx index f5e97ab..d0ae105 100644 --- a/src/components/Calendar/utils/calendarColorsUtils.tsx +++ b/src/components/Calendar/utils/calendarColorsUtils.tsx @@ -1,4 +1,4 @@ -import { darken, getContrastRatio, lighten, Theme } from "@mui/material"; +import { darken, getContrastRatio, lighten, Theme } from "twake-mui"; import { ThunkDispatch } from "@reduxjs/toolkit"; import { updateCalColor } from "../../../features/Calendars/CalendarSlice"; import { Calendar } from "../../../features/Calendars/CalendarTypes"; diff --git a/src/components/Dialog/ResponsiveDialog.tsx b/src/components/Dialog/ResponsiveDialog.tsx index 0ae14b8..4246be6 100644 --- a/src/components/Dialog/ResponsiveDialog.tsx +++ b/src/components/Dialog/ResponsiveDialog.tsx @@ -11,7 +11,7 @@ import { SxProps, Theme, Box, -} from "@mui/material"; +} from "twake-mui"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import CloseIcon from "@mui/icons-material/Close"; import OpenInFullIcon from "@mui/icons-material/OpenInFull"; @@ -132,7 +132,7 @@ function ResponsiveDialog({ "& .MuiDialogActions-root .MuiBox-root": { maxWidth: isExpanded ? expandedContentMaxWidth : undefined, margin: isExpanded ? "0 auto" : undefined, - padding: isExpanded ? "0 12px" : undefined, + padding: "0", width: isExpanded ? "100%" : undefined, justifyContent: isExpanded ? "flex-end" : undefined, }, @@ -140,7 +140,6 @@ function ResponsiveDialog({ const baseContentSx: SxProps = { width: "100%", - padding: isExpanded ? "16px" : undefined, }; const contentWrapperSx: SxProps = { @@ -239,8 +238,6 @@ function ResponsiveDialog({ ? (theme) => `1px solid ${theme.palette.divider}` : undefined, justifyContent: actionsJustifyContent, - paddingTop: "18px", - paddingBottom: "18px", }} > {actions} diff --git a/src/components/Error/Error.tsx b/src/components/Error/Error.tsx index 1bb1af6..ff8bc07 100644 --- a/src/components/Error/Error.tsx +++ b/src/components/Error/Error.tsx @@ -1,6 +1,6 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline"; import ReplayIcon from "@mui/icons-material/Replay"; -import { Box, Button, Fade, Paper, Stack, Typography } from "@mui/material"; +import { Box, Button, Fade, Paper, Stack, Typography } from "twake-mui"; import { useEffect, useRef } from "react"; import { push } from "redux-first-history"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; diff --git a/src/components/Error/ErrorSnackbar.tsx b/src/components/Error/ErrorSnackbar.tsx index 332f3dd..94c2bf0 100644 --- a/src/components/Error/ErrorSnackbar.tsx +++ b/src/components/Error/ErrorSnackbar.tsx @@ -1,6 +1,4 @@ -import Snackbar from "@mui/material/Snackbar"; -import Alert from "@mui/material/Alert"; -import Button from "@mui/material/Button"; +import { Snackbar, Alert, Button } from "twake-mui"; import { useAppDispatch } from "../../app/hooks"; import { clearError as calendarClearError } from "../../features/Calendars/CalendarSlice"; import { clearError as userClearError } from "../../features/User/userSlice"; diff --git a/src/components/Event/AddDescButton.tsx b/src/components/Event/AddDescButton.tsx index 2a0cd8f..94edf5b 100644 --- a/src/components/Event/AddDescButton.tsx +++ b/src/components/Event/AddDescButton.tsx @@ -1,4 +1,4 @@ -import { Box, Button, TextField } from "@mui/material"; +import { Box, Button, TextField } from "twake-mui"; import { useI18n } from "twake-i18n"; import { FieldWithLabel } from "./components/FieldWithLabel"; import { Description as DescriptionIcon } from "@mui/icons-material"; diff --git a/src/components/Event/EditModeDialog.tsx b/src/components/Event/EditModeDialog.tsx index 2e96542..cd3fc26 100644 --- a/src/components/Event/EditModeDialog.tsx +++ b/src/components/Event/EditModeDialog.tsx @@ -8,7 +8,7 @@ import { FormControlLabel, Radio, RadioGroup, -} from "@mui/material"; +} from "twake-mui"; import { CalendarEvent } from "../../features/Events/EventsTypes"; import { useState } from "react"; import { useI18n } from "twake-i18n"; diff --git a/src/components/Event/EventChip/ErrorEventChip.tsx b/src/components/Event/EventChip/ErrorEventChip.tsx index 144ea0a..b0be61e 100644 --- a/src/components/Event/EventChip/ErrorEventChip.tsx +++ b/src/components/Event/EventChip/ErrorEventChip.tsx @@ -1,4 +1,4 @@ -import { Card, Typography } from "@mui/material"; +import { Card, Typography } from "twake-mui"; import { useRef, useEffect } from "react"; import { EventErrorHandler } from "../../Error/EventErrorHandler"; diff --git a/src/components/Event/EventChip/EventChip.tsx b/src/components/Event/EventChip/EventChip.tsx index cb61602..22631be 100644 --- a/src/components/Event/EventChip/EventChip.tsx +++ b/src/components/Event/EventChip/EventChip.tsx @@ -5,7 +5,7 @@ import { CardContent, CardHeader, Typography, -} from "@mui/material"; +} from "twake-mui"; import React, { useEffect, useRef, useState } from "react"; import { stringAvatar } from "../utils/eventUtils"; import { ErrorEventChip } from "./ErrorEventChip"; diff --git a/src/components/Event/EventChip/EventChipUtils.tsx b/src/components/Event/EventChip/EventChipUtils.tsx index 7b5f97c..8b334ff 100644 --- a/src/components/Event/EventChip/EventChipUtils.tsx +++ b/src/components/Event/EventChip/EventChipUtils.tsx @@ -1,7 +1,7 @@ import CancelIcon from "@mui/icons-material/Cancel"; import HelpOutlineIcon from "@mui/icons-material/HelpOutline"; import LockOutlineIcon from "@mui/icons-material/LockOutline"; -import { Box, getContrastRatio } from "@mui/material"; +import { Box, getContrastRatio } from "twake-mui"; import moment from "moment"; import React, { useLayoutEffect, useState } from "react"; import { Calendar } from "../../../features/Calendars/CalendarTypes"; diff --git a/src/components/Event/EventChip/SimpleEventChip.tsx b/src/components/Event/EventChip/SimpleEventChip.tsx index a28d29d..11c82cc 100644 --- a/src/components/Event/EventChip/SimpleEventChip.tsx +++ b/src/components/Event/EventChip/SimpleEventChip.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Card, Typography } from "@mui/material"; +import { Card, Typography } from "twake-mui"; export function SimpleEventChip({ title }: { title: string }) { return ( diff --git a/src/components/Event/EventDuplicate.tsx b/src/components/Event/EventDuplicate.tsx index 4773794..da2027e 100644 --- a/src/components/Event/EventDuplicate.tsx +++ b/src/components/Event/EventDuplicate.tsx @@ -1,4 +1,4 @@ -import { MenuItem } from "@mui/material"; +import { MenuItem } from "twake-mui"; import { CalendarEvent } from "../../features/Events/EventsTypes"; import { useI18n } from "twake-i18n"; diff --git a/src/components/Event/EventFormFields.tsx b/src/components/Event/EventFormFields.tsx index 70d6bba..65aed1b 100644 --- a/src/components/Event/EventFormFields.tsx +++ b/src/components/Event/EventFormFields.tsx @@ -13,7 +13,7 @@ import { TextField, ToggleButtonGroup, ToggleButton, -} from "@mui/material"; +} from "twake-mui"; import { Description as DescriptionIcon, Public as PublicIcon, diff --git a/src/components/Event/EventRepeat.tsx b/src/components/Event/EventRepeat.tsx index f12b300..d273206 100644 --- a/src/components/Event/EventRepeat.tsx +++ b/src/components/Event/EventRepeat.tsx @@ -12,7 +12,7 @@ import { FormGroup, Radio, RadioGroup, -} from "@mui/material"; +} from "twake-mui"; import { useEffect, useState } from "react"; import { RepetitionObject } from "../../features/Events/EventsTypes"; import { useI18n } from "twake-i18n"; diff --git a/src/components/Event/InfoRow.tsx b/src/components/Event/InfoRow.tsx index cb5388a..5169ad9 100644 --- a/src/components/Event/InfoRow.tsx +++ b/src/components/Event/InfoRow.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Box, Typography, Link } from "@mui/material"; +import { Box, Typography, Link } from "twake-mui"; type InfoRowProps = { icon: React.ReactNode; diff --git a/src/components/Event/components/DateTimeFields.tsx b/src/components/Event/components/DateTimeFields.tsx index 2fbb814..914db3c 100644 --- a/src/components/Event/components/DateTimeFields.tsx +++ b/src/components/Event/components/DateTimeFields.tsx @@ -1,6 +1,6 @@ import React, { useMemo } from "react"; -import { Box, Typography } from "@mui/material"; -import { TextFieldProps } from "@mui/material/TextField"; +import { Box, Typography } from "twake-mui"; +import { TextFieldProps } from "twake-mui"; import { DatePicker } from "@mui/x-date-pickers/DatePicker"; import { DatePickerFieldProps } from "@mui/x-date-pickers/DatePicker"; import { TimePicker } from "@mui/x-date-pickers/TimePicker"; diff --git a/src/components/Event/components/EditableTimeField.tsx b/src/components/Event/components/EditableTimeField.tsx index ecd3869..2cc7e72 100644 --- a/src/components/Event/components/EditableTimeField.tsx +++ b/src/components/Event/components/EditableTimeField.tsx @@ -1,5 +1,5 @@ import React, { useState, useRef, useEffect, useCallback } from "react"; -import TextField from "@mui/material/TextField"; +import { TextField } from "twake-mui"; import { PickerFieldAdapter, PickerValidationScope, diff --git a/src/components/Event/components/FieldWithLabel.tsx b/src/components/Event/components/FieldWithLabel.tsx index bf80f57..8054d15 100644 --- a/src/components/Event/components/FieldWithLabel.tsx +++ b/src/components/Event/components/FieldWithLabel.tsx @@ -1,5 +1,5 @@ import React from "react"; -import { Box, Typography } from "@mui/material"; +import { Box, Typography } from "twake-mui"; /** * Helper component for field with label diff --git a/src/components/Event/components/ReadOnlyPickerField.tsx b/src/components/Event/components/ReadOnlyPickerField.tsx index 2c7a0b3..fb6f714 100644 --- a/src/components/Event/components/ReadOnlyPickerField.tsx +++ b/src/components/Event/components/ReadOnlyPickerField.tsx @@ -1,5 +1,5 @@ import React from "react"; -import TextField from "@mui/material/TextField"; +import { TextField } from "twake-mui"; import { PickerFieldAdapter, PickerValidationScope, diff --git a/src/components/Event/utils/eventUtils.tsx b/src/components/Event/utils/eventUtils.tsx index d02252f..87a5644 100644 --- a/src/components/Event/utils/eventUtils.tsx +++ b/src/components/Event/utils/eventUtils.tsx @@ -1,9 +1,6 @@ import CancelIcon from "@mui/icons-material/Cancel"; import CheckCircleIcon from "@mui/icons-material/CheckCircle"; -import Avatar from "@mui/material/Avatar"; -import Badge from "@mui/material/Badge"; -import Box from "@mui/material/Box"; -import Typography from "@mui/material/Typography"; +import { Avatar, Badge, Box, Typography } from "twake-mui"; import { ThunkDispatch } from "@reduxjs/toolkit"; import { emptyEventsCal, diff --git a/src/components/Loading/SnackBarAlert.tsx b/src/components/Loading/SnackBarAlert.tsx index ab10fdf..e0315b0 100644 --- a/src/components/Loading/SnackBarAlert.tsx +++ b/src/components/Loading/SnackBarAlert.tsx @@ -1,5 +1,5 @@ -import Alert, { AlertColor } from "@mui/material/Alert"; -import Snackbar from "@mui/material/Snackbar"; +import { Alert, Snackbar } from "twake-mui"; +import type { AlertColor } from "twake-mui"; export function SnackbarAlert({ open, diff --git a/src/components/Menubar/EventSearchBar.tsx b/src/components/Menubar/EventSearchBar.tsx index e3de6f3..f7a569e 100644 --- a/src/components/Menubar/EventSearchBar.tsx +++ b/src/components/Menubar/EventSearchBar.tsx @@ -14,8 +14,8 @@ import { Stack, TextField, Typography, -} from "@mui/material"; -import { type AutocompleteRenderInputParams } from "@mui/material/Autocomplete"; +} from "twake-mui"; +import { type AutocompleteRenderInputParams } from "twake-mui"; import { useRef, useState, useEffect } from "react"; import HighlightOffIcon from "@mui/icons-material/HighlightOff"; import SearchIcon from "@mui/icons-material/Search"; diff --git a/src/components/Menubar/Menubar.tsx b/src/components/Menubar/Menubar.tsx index ab7cca1..176f952 100644 --- a/src/components/Menubar/Menubar.tsx +++ b/src/components/Menubar/Menubar.tsx @@ -22,7 +22,7 @@ import { Typography, Box, Divider, -} from "@mui/material"; +} from "twake-mui"; import { push } from "redux-first-history"; import { CalendarApi } from "@fullcalendar/core"; import { useI18n } from "twake-i18n"; @@ -194,7 +194,7 @@ export function Menubar({
- + {dateLabel}
diff --git a/src/components/Timezone/TimezoneAutocomplete.tsx b/src/components/Timezone/TimezoneAutocomplete.tsx index 35a5151..92a878d 100644 --- a/src/components/Timezone/TimezoneAutocomplete.tsx +++ b/src/components/Timezone/TimezoneAutocomplete.tsx @@ -1,4 +1,4 @@ -import { Autocomplete, TextField } from "@mui/material"; +import { Autocomplete, TextField } from "twake-mui"; import { PublicOutlined as TimezoneIcon } from "@mui/icons-material"; import { useMemo } from "react"; diff --git a/src/features/Events/AttendanceValidation/AttendanceValidation.tsx b/src/features/Events/AttendanceValidation/AttendanceValidation.tsx index e3dce1f..b1a7e5c 100644 --- a/src/features/Events/AttendanceValidation/AttendanceValidation.tsx +++ b/src/features/Events/AttendanceValidation/AttendanceValidation.tsx @@ -1,4 +1,4 @@ -import { Box, Typography } from "@mui/material"; +import { Box, Typography } from "@linagora/twake-mui"; import { Dispatch, SetStateAction } from "react"; import { useI18n } from "twake-i18n"; import { Calendar } from "../../Calendars/CalendarTypes"; diff --git a/src/features/Events/AttendanceValidation/RSVPButton.tsx b/src/features/Events/AttendanceValidation/RSVPButton.tsx index 2c29c53..8c308d4 100644 --- a/src/features/Events/AttendanceValidation/RSVPButton.tsx +++ b/src/features/Events/AttendanceValidation/RSVPButton.tsx @@ -1,4 +1,4 @@ -import { Button } from "@mui/material"; +import { Button } from "@linagora/twake-mui"; import { Dispatch, SetStateAction } from "react"; import { useI18n } from "twake-i18n"; import { useAppDispatch } from "../../../app/hooks"; diff --git a/src/features/Events/EventDisplayPreview.tsx b/src/features/Events/EventDisplayPreview.tsx index 757104d..ed3e70e 100644 --- a/src/features/Events/EventDisplayPreview.tsx +++ b/src/features/Events/EventDisplayPreview.tsx @@ -13,7 +13,7 @@ import PeopleAltOutlinedIcon from "@mui/icons-material/PeopleAltOutlined"; import RepeatIcon from "@mui/icons-material/Repeat"; import SubjectIcon from "@mui/icons-material/Subject"; import VideocamIcon from "@mui/icons-material/Videocam"; -import { Box, Typography } from "@mui/material"; +import { Box, Typography } from "@linagora/twake-mui"; import EventPopover from "./EventModal"; import { Button, @@ -23,8 +23,8 @@ import { Menu, MenuItem, Tooltip, -} from "@mui/material"; -import AvatarGroup from "@mui/material/AvatarGroup"; +} from "@linagora/twake-mui"; +import { AvatarGroup } from "@linagora/twake-mui"; import { useEffect, useState, useRef } from "react"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; import { CalendarName } from "../../components/Calendar/CalendarName"; @@ -49,7 +49,6 @@ import { userAttendee } from "../User/models/attendee"; import { browserDefaultTimeZone } from "../../utils/timezone"; import { AttendanceValidation } from "./AttendanceValidation/AttendanceValidation"; import { Calendar } from "../Calendars/CalendarTypes"; -import { userData } from "../User/userDataTypes"; import { createEventContext } from "./createEventContext"; export default function EventPreviewModal({ @@ -100,7 +99,7 @@ export default function EventPreviewModal({ const attendeePreview = makeAttendeePreview(event.attendee, t); const hasCheckedSessionStorageRef = useRef(false); - const [toggleActionMenu, setToggleActionMenu] = useState( + const [toggleActionMenu, setToggleActionMenu] = useState( null ); const mailSpaUrl = (window as any).MAIL_SPA_URL ?? null; @@ -369,7 +368,7 @@ export default function EventPreviewModal({ `${mailSpaUrl}/mailto/?uri=mailto:${event.attendee .map((a) => a.cal_address) .filter((mail) => mail !== user.email) - .join(",")}?subject=${event.title}` + .join(",")}?subject=${encodeURIComponent(event.title ?? "")}` ) } > @@ -402,18 +401,28 @@ export default function EventPreviewModal({ eventId ) ); - setOpenEditModePopup("edit"); + setOpenEditModePopup("delete"); } else { onClose({}, "backdropClick"); - await dispatch( - deleteEventAsync({ - calId, - eventId, - eventURL: event.URL, - }) - ); + try { + const result = await dispatch( + deleteEventAsync({ + calId, + eventId, + eventURL: event.URL, + }) + ); + + // For compatibility with tests that may not mock unwrap + if (result && typeof result.unwrap === "function") { + await result.unwrap(); + } + + updateTempList(); + } catch (error) { + console.error("Failed to delete event:", error); + } } - updateTempList(); }} > {t("eventPreview.deleteEvent")} @@ -616,7 +625,15 @@ export default function EventPreviewModal({ } text={t("eventPreview.alarmText", { trigger: t(`event.form.notifications.${event.alarm.trigger}`), - action: t(`event.form.notifications.${event.alarm.action}`), + action: (() => { + if (!event.alarm.action) return ""; + const translationKey = `event.form.notifications.${event.alarm.action}`; + const translated = t(translationKey); + // If translation returns the key itself, it means translation not found, use raw value + return translated === translationKey + ? event.alarm.action + : translated; + })(), })} style={{ fontSize: "16px", diff --git a/src/features/Events/EventModal.tsx b/src/features/Events/EventModal.tsx index b737700..9b1e4a7 100644 --- a/src/features/Events/EventModal.tsx +++ b/src/features/Events/EventModal.tsx @@ -1,5 +1,5 @@ import { CalendarApi, DateSelectArg } from "@fullcalendar/core"; -import { Box, Button } from "@mui/material"; +import { Box, Button } from "twake-mui"; import AddIcon from "@mui/icons-material/Add"; import React, { useEffect, diff --git a/src/features/Events/EventUpdateModal.tsx b/src/features/Events/EventUpdateModal.tsx index 2a1bba4..6ce1e2b 100644 --- a/src/features/Events/EventUpdateModal.tsx +++ b/src/features/Events/EventUpdateModal.tsx @@ -1,4 +1,4 @@ -import { Box, Button } from "@mui/material"; +import { Box, Button } from "twake-mui"; import AddIcon from "@mui/icons-material/Add"; import { useEffect, useState, useMemo, useCallback, useRef } from "react"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; diff --git a/src/features/Search/SearchResultsPage.tsx b/src/features/Search/SearchResultsPage.tsx index 895bf5d..a255838 100644 --- a/src/features/Search/SearchResultsPage.tsx +++ b/src/features/Search/SearchResultsPage.tsx @@ -2,8 +2,7 @@ import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import RepeatIcon from "@mui/icons-material/Repeat"; import SquareRoundedIcon from "@mui/icons-material/SquareRounded"; import VideocamIcon from "@mui/icons-material/Videocam"; -import { Box, Button, IconButton, Stack, Typography } from "@mui/material"; -import CircularProgress from "@mui/material/CircularProgress"; +import { Box, Button, IconButton, Stack, Typography, CircularProgress } from "twake-mui"; import { useI18n } from "twake-i18n"; import { useState } from "react"; import { useAppDispatch, useAppSelector } from "../../app/hooks"; diff --git a/src/features/Settings/SettingsPage.tsx b/src/features/Settings/SettingsPage.tsx index c846e40..4d5128b 100644 --- a/src/features/Settings/SettingsPage.tsx +++ b/src/features/Settings/SettingsPage.tsx @@ -15,7 +15,7 @@ import { Snackbar, Switch, FormControlLabel, -} from "@mui/material"; +} from "twake-mui"; import ArrowBackIcon from "@mui/icons-material/ArrowBack"; import SettingsIcon from "@mui/icons-material/Settings"; // import SyncIcon from "@mui/icons-material/Sync"; diff --git a/src/theme/ThemeProvider.tsx b/src/theme/ThemeProvider.tsx deleted file mode 100644 index cad62ff..0000000 --- a/src/theme/ThemeProvider.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react"; -import { ThemeProvider } from "@mui/material/styles"; -import { CssBaseline } from "@mui/material"; -import { customTheme } from "./theme"; - -interface CustomThemeProviderProps { - children: React.ReactNode; -} - -export function CustomThemeProvider({ children }: CustomThemeProviderProps) { - return ( - - - {children} - - ); -} - -export { customTheme }; diff --git a/src/theme/theme.ts b/src/theme/theme.ts deleted file mode 100644 index fd23305..0000000 --- a/src/theme/theme.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { createTheme } from "@mui/material/styles"; - -// Custom theme for Twake Calendar -export const customTheme = createTheme({ - palette: { - text: { - primary: "#000000", - secondary: "#717D96", - secondaryContainer: "#243B55", - }, - }, - typography: { - caption: { - fontSize: "0.75rem", - fontWeight: 400, - lineHeight: 1.4, - color: "#8C9CAF", // Custom secondary text color - }, - }, - components: { - // Custom Typography component - MuiTypography: { - styleOverrides: { - // Custom variant for event info text - caption: { - fontSize: "13px", - color: "#717D96", - }, - }, - }, - // Custom Button component - // Custom Dialog component - // Custom DialogActions component - }, -}); - -// Export theme type for TypeScript -export type CustomTheme = typeof customTheme;