implement twake mui

__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(<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

@@ -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>
     );
   };