eduvia/workavia-calendar-front
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

implement twake mui

Browse Source
This commit is contained in:
lenhanphung
2025-12-29 14:27:06 +07:00
parent 9ff75056c7
commit 5f0479e34a
53 changed files with 235 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
__test__/components/ResponsiveDialog.test.tsx
+29 -24
View File
@@ -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(<TwakeMuiThemeProvider>{ui}</TwakeMuiThemeProvider>);
};
beforeEach(() => {
mockOnClose.mockClear();
mockOnExpandToggle.mockClear();
});
it("renders in normal mode by default", () => {
render(
renderWithTheme(
<ResponsiveDialog open={true} onClose={mockOnClose} title="Test Dialog">
<TextField label="Name" />
</ResponsiveDialog>
@@ -24,7 +29,7 @@ describe("ResponsiveDialog", () => {
});
it("renders title in normal mode", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -40,7 +45,7 @@ describe("ResponsiveDialog", () => {
});
it("renders back arrow in extended mode", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -57,7 +62,7 @@ describe("ResponsiveDialog", () => {
});
it("calls onExpandToggle when back arrow is clicked", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -76,7 +81,7 @@ describe("ResponsiveDialog", () => {
});
it("renders actions when provided", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -91,7 +96,7 @@ describe("ResponsiveDialog", () => {
});
it("does not render actions when not provided", () => {
const { container } = render(
const { container } = renderWithTheme(
<ResponsiveDialog open={true} onClose={mockOnClose} title="Test">
<div>Content</div>
</ResponsiveDialog>
@@ -102,7 +107,7 @@ describe("ResponsiveDialog", () => {
});
it("calls onClose when backdrop is clicked", () => {
render(
renderWithTheme(
<ResponsiveDialog open={true} onClose={mockOnClose} title="Test">
<div>Content</div>
</ResponsiveDialog>
@@ -117,7 +122,7 @@ describe("ResponsiveDialog", () => {
});
it("applies custom normalMaxWidth", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -132,7 +137,7 @@ describe("ResponsiveDialog", () => {
});
it("wraps children in Stack component", () => {
render(
renderWithTheme(
<ResponsiveDialog open={true} onClose={mockOnClose} title="Test">
<TextField label="Field 1" />
<TextField label="Field 2" />
@@ -144,7 +149,7 @@ describe("ResponsiveDialog", () => {
});
it("uses correct spacing in normal mode", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -160,7 +165,7 @@ describe("ResponsiveDialog", () => {
});
it("uses correct spacing in extended mode", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -176,7 +181,7 @@ describe("ResponsiveDialog", () => {
});
it("applies contentSx custom styles", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -191,7 +196,7 @@ describe("ResponsiveDialog", () => {
});
it("applies titleSx custom styles", () => {
const { container } = render(
const { container } = renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -207,7 +212,7 @@ describe("ResponsiveDialog", () => {
});
it("shows dividers when dividers prop is true", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -222,7 +227,7 @@ describe("ResponsiveDialog", () => {
});
it("does not show back arrow when onExpandToggle is not provided", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -238,7 +243,7 @@ describe("ResponsiveDialog", () => {
});
it("accepts custom headerHeight", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -254,7 +259,7 @@ describe("ResponsiveDialog", () => {
});
it("renders with custom expandedContentMaxWidth", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -270,7 +275,7 @@ describe("ResponsiveDialog", () => {
});
it("does not render dialog content when open is false", () => {
render(
renderWithTheme(
<ResponsiveDialog open={false} onClose={mockOnClose} title="Test">
<div>Test Content</div>
</ResponsiveDialog>
@@ -280,7 +285,7 @@ describe("ResponsiveDialog", () => {
});
it("renders correctly in extended mode", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -297,7 +302,7 @@ describe("ResponsiveDialog", () => {
});
it("renders expand and close icons in normal mode when showHeaderActions is true", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -315,7 +320,7 @@ describe("ResponsiveDialog", () => {
});
it("does not render header icons when showHeaderActions is false", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -334,7 +339,7 @@ describe("ResponsiveDialog", () => {
});
it("calls onClose when close icon is clicked", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
@@ -353,7 +358,7 @@ describe("ResponsiveDialog", () => {
});
it("calls onExpandToggle when expand icon is clicked", () => {
render(
renderWithTheme(
<ResponsiveDialog
open={true}
onClose={mockOnClose}
__test__/utils/Renderwithproviders.tsx
+25 -22
View File
@@ -4,6 +4,7 @@ import React, { PropsWithChildren } from "react";
import { Provider } from "react-redux";
import { MemoryRouter } from "react-router-dom";
import { I18nContext } from "twake-i18n";
import { TwakeMuiThemeProvider } from "twake-mui";
import type { AppStore, RootState } from "../../src/app/store";
import { setupStore } from "../../src/app/store";
interface ExtendedRenderOptions extends Omit<RenderOptions, "queries"> {
@@ -21,28 +22,30 @@ export function renderWithProviders(
const Wrapper = ({ children }: PropsWithChildren) => {
return (
<I18nContext.Provider
value={{
t: (key: string, vars?: Record<string, string>) => {
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",
}}
>
<MemoryRouter initialEntries={["/"]}>
<Provider store={store}>{children}</Provider>
</MemoryRouter>
</I18nContext.Provider>
<TwakeMuiThemeProvider>
<I18nContext.Provider
value={{
t: (key: string, vars?: Record<string, string>) => {
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",
}}
>
<MemoryRouter initialEntries={["/"]}>
<Provider store={store}>{children}</Provider>
</MemoryRouter>
</I18nContext.Provider>
</TwakeMuiThemeProvider>
);
};
jest.config.ts
+5 -1
View File
@@ -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$": "<rootDir>/node_modules/react",
"^react-dom$": "<rootDir>/node_modules/react-dom",
},
setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
},
{
package-lock.json
Generated
+31 -38
View File
@@ -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"
}
package.json
+1
View File
@@ -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": {
rsbuild.config.ts
+11
View File
@@ -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,
},
},
});
src/App.tsx
+3 -3
View File
@@ -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 (
<CustomThemeProvider>
<TwakeMuiThemeProvider>
<I18n
dictRequire={(lang: keyof typeof locale) => locale[lang]}
lang={lang}
@@ -79,7 +79,7 @@ function App() {
<ErrorSnackbar error={error} type="user" />
</Suspense>
</I18n>
</CustomThemeProvider>
</TwakeMuiThemeProvider>
);
}
src/components/Attendees/PeopleSearch.tsx
+12 -12
View File
@@ -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;
src/components/Calendar/AccessTab.tsx
+1 -1
View File
@@ -9,7 +9,7 @@ import {
InputAdornment,
Backdrop,
CircularProgress,
} from "@mui/material";
} from "twake-mui";
import { useState, useEffect } from "react";
import {
exportCalendar,
src/components/Calendar/Calendar.tsx
+2 -3
View File
@@ -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";
src/components/Calendar/CalendarColorPicker.tsx
+1 -1
View File
@@ -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";
src/components/Calendar/CalendarItemList.tsx
+3 -3
View File
@@ -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) => (
<MenuItem key={calendar.id} value={calendar.id}>
src/components/Calendar/CalendarModal.tsx
+3 -3
View File
@@ -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({
</Tabs>
}
actions={
<DialogActions>
<>
<Button
variant="outlined"
onClick={(e) => handleClose({}, "backdropClick")}
@@ -216,7 +216,7 @@ function CalendarPopover({
? t("actions.save")
: t("actions.create")}
</Button>
</DialogActions>
</>
}
>
{tab === "import" && (
src/components/Calendar/CalendarName.tsx
+3 -3
View File
@@ -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 (
<Box style={{ display: "flex", flexDirection: "row", gap: 8 }}>
<SquareRoundedIcon
src/components/Calendar/CalendarSearch.tsx
+11 -9
View File
@@ -1,17 +1,19 @@
import CloseIcon from "@mui/icons-material/Close";
import Avatar from "@mui/material/Avatar";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import IconButton from "@mui/material/IconButton";
import { useTheme } from "@mui/material/styles";
import Typography from "@mui/material/Typography";
import {
Avatar,
Box,
Button,
IconButton,
Typography,
TextField,
useTheme,
} from "@linagora/twake-mui";
import { useI18n } from "twake-i18n";
import { useState } from "react";
import { useAppDispatch, useAppSelector } from "../../app/hooks";
import { getCalendars } from "../../features/Calendars/CalendarApi";
import { addSharedCalendarAsync } from "../../features/Calendars/CalendarSlice";
import { Calendar } from "../../features/Calendars/CalendarTypes";
import TextField from "@mui/material/TextField";
import { Calendars } from "../../features/Calendars/CalendarTypes";
import { PeopleSearch, User } from "../Attendees/PeopleSearch";
import { ResponsiveDialog } from "../Dialog";
import { ColorPicker } from "./CalendarColorPicker";
@@ -93,7 +95,7 @@ function SelectedCalendarsList({
onRemove,
onColorChange,
}: {
calendars: Record<string, Calendar>;
calendars: Record<string, Calendars>;
selectedCal: CalendarWithOwner[];
onRemove: (cal: CalendarWithOwner) => void;
onColorChange: (
src/components/Calendar/CalendarSelection.tsx
+12 -7
View File
@@ -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";
src/components/Calendar/DeleteCalendarDialog.tsx
+10 -8
View File
@@ -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<string, Calendar>;
calendars: Record<string, Calendars>;
id: string;
isPersonal: boolean;
handleDeleteConfirm: () => void;
src/components/Calendar/ImportTab.tsx
+1 -1
View File
@@ -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";
src/components/Calendar/SettingsTab.tsx
+1 -1
View File
@@ -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";
src/components/Calendar/TempCalendarsInput.tsx
+2 -2
View File
@@ -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";
src/components/Calendar/TimezoneSelector.tsx
+1 -1
View File
@@ -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";
src/components/Calendar/utils/calendarColorsUtils.tsx
+1 -1
View File
@@ -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";
src/components/Dialog/ResponsiveDialog.tsx
+2 -5
View File
@@ -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<Theme> = {
width: "100%",
padding: isExpanded ? "16px" : undefined,
};
const contentWrapperSx: SxProps<Theme> = {
@@ -239,8 +238,6 @@ function ResponsiveDialog({
? (theme) => `1px solid ${theme.palette.divider}`
: undefined,
justifyContent: actionsJustifyContent,
paddingTop: "18px",
paddingBottom: "18px",
}}
>
{actions}
src/components/Error/Error.tsx
+1 -1
View File
@@ -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";
src/components/Error/ErrorSnackbar.tsx
+1 -3
View File
@@ -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";
src/components/Event/AddDescButton.tsx
+1 -1
View File
@@ -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";
src/components/Event/EditModeDialog.tsx
+1 -1
View File
@@ -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";
src/components/Event/EventChip/ErrorEventChip.tsx
+1 -1
View File
@@ -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";
src/components/Event/EventChip/EventChip.tsx
+1 -1
View File
@@ -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";
src/components/Event/EventChip/EventChipUtils.tsx
+1 -1
View File
@@ -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";
src/components/Event/EventChip/SimpleEventChip.tsx
+1 -1
View File
@@ -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 (
src/components/Event/EventDuplicate.tsx
+1 -1
View File
@@ -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";
src/components/Event/EventFormFields.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ import {
TextField,
ToggleButtonGroup,
ToggleButton,
} from "@mui/material";
} from "twake-mui";
import {
Description as DescriptionIcon,
Public as PublicIcon,
src/components/Event/EventRepeat.tsx
+1 -1
View File
@@ -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";
src/components/Event/InfoRow.tsx
+1 -1
View File
@@ -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;
src/components/Event/components/DateTimeFields.tsx
+2 -2
View File
@@ -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";
src/components/Event/components/EditableTimeField.tsx
+1 -1
View File
@@ -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,
src/components/Event/components/FieldWithLabel.tsx
+1 -1
View File
@@ -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
src/components/Event/components/ReadOnlyPickerField.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import React from "react";
import TextField from "@mui/material/TextField";
import { TextField } from "twake-mui";
import {
PickerFieldAdapter,
PickerValidationScope,
src/components/Event/utils/eventUtils.tsx
+1 -4
View File
@@ -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,
src/components/Loading/SnackBarAlert.tsx
+2 -2
View File
@@ -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,
src/components/Menubar/EventSearchBar.tsx
+2 -2
View File
@@ -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";
src/components/Menubar/Menubar.tsx
+2 -2
View File
@@ -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({
</div>
<div className="menu-items">
<div className="current-date-time">
<Typography variant="h6" component="div">
<Typography variant="h3" component="div">
{dateLabel}
</Typography>
</div>
src/components/Timezone/TimezoneAutocomplete.tsx
+1 -1
View File
@@ -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";
src/features/Events/AttendanceValidation/AttendanceValidation.tsx
+1 -1
View File
@@ -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";
src/features/Events/AttendanceValidation/RSVPButton.tsx
+1 -1
View File
@@ -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";
src/features/Events/EventDisplayPreview.tsx
+33 -16
View File
@@ -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<Element | null>(
const [toggleActionMenu, setToggleActionMenu] = useState<HTMLElement | null>(
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",
src/features/Events/EventModal.tsx
+1 -1
View File
@@ -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,
src/features/Events/EventUpdateModal.tsx
+1 -1
View File
@@ -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";
src/features/Search/SearchResultsPage.tsx
+1 -2
View File
@@ -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";
src/features/Settings/SettingsPage.tsx
+1 -1
View File
@@ -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";
src/theme/ThemeProvider.tsx
-19
View File
@@ -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 (
<ThemeProvider theme={customTheme}>
<CssBaseline />
{children}
</ThemeProvider>
);
}
export { customTheme };
src/theme/theme.ts
-38
View File
@@ -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;