feat: modals

package.json

@@ -12,6 +12,7 @@
         "@mantine/core": "8.1.2",
         "@mantine/form": "^8.1.3",
         "@mantine/hooks": "8.1.2",
+        "@mantine/modals": "^8.2.1",
         "@mantine/notifications": "^8.2.1",
         "@next/bundle-analyzer": "^15.3.3",
         "@reduxjs/toolkit": "^2.8.2",

src/app/layout.tsx

@@ -10,12 +10,20 @@ import { theme } from "@/theme";
 import "@/app/global.css";
 import { Notifications } from "@mantine/notifications";
 import ReduxProvider from "@/providers/ReduxProvider";
+import { ModalsProvider } from "@mantine/modals";
+import { modals } from "@/modals/modals";
 
 export const metadata = {
     title: "CRM LogiDex",
     description: "CRM LogiDex",
 };
 
+declare module "@mantine/modals" {
+    export interface MantineModalsOverride {
+        modals: typeof modals;
+    }
+}
+
 type Props = {
     children: ReactNode;
 };
@@ -45,7 +53,13 @@ export default function RootLayout({ children }: Props) {
                 <MantineProvider
                     theme={theme}
                     defaultColorScheme={"auto"}>
-                    <ReduxProvider>{children}</ReduxProvider>
+                    <ReduxProvider>
+                        <ModalsProvider
+                            labels={{ confirm: "Да", cancel: "Нет" }}
+                            modals={modals}>
+                            {children}
+                        </ModalsProvider>
+                    </ReduxProvider>
                     <Notifications position="bottom-right" />
                 </MantineProvider>
             </body>

src/components/ColorSchemeToggle/ColorSchemeToggle.tsx

@@ -1,10 +1,20 @@
 "use client";
 
 import { Button, Group, useMantineColorScheme } from "@mantine/core";
+import { modals } from "@mantine/modals";
 
 export function ColorSchemeToggle() {
     const { setColorScheme } = useMantineColorScheme();
 
+    const openTestModal = () => {
+        modals.openContextModal({
+            modal: "testModal",
+            title: "Тест",
+            withCloseButton: false,
+            innerProps: {},
+        });
+    };
+
     return (
         <Group
             justify="center"
@@ -12,6 +22,7 @@ export function ColorSchemeToggle() {
             <Button onClick={() => setColorScheme("light")}>Light</Button>
             <Button onClick={() => setColorScheme("dark")}>Dark</Button>
             <Button onClick={() => setColorScheme("auto")}>Auto</Button>
+            <Button onClick={() => openTestModal()}>Modal</Button>
         </Group>
     );
 }

src/modals/TestModal/TestModal.tsx

@@ -0,0 +1,16 @@
+"use client"
+
+import { Flex, rem, Text } from "@mantine/core";
+import { ContextModalProps } from "@mantine/modals";
+
+const TestModal = ({ id, context, innerProps }: ContextModalProps) => {
+    return (
+        <Flex
+            gap={rem(10)}
+            direction={"column"}>
+            <Text>Hi</Text>
+        </Flex>
+    );
+};
+
+export default TestModal;

src/modals/modals.ts

@@ -0,0 +1,5 @@
+import TestModal from "@/modals/TestModal/TestModal";
+
+export const modals = {
+    testModal: TestModal,
+};

src/theme.ts

@@ -34,5 +34,10 @@ export const theme = createTheme({
                 size,
             },
         },
+        Modal: {
+            defaultProps: {
+                radius,
+            },
+        },
     },
 });

yarn.lock

@@ -2776,6 +2776,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@mantine/modals@npm:^8.2.1":
+  version: 8.2.1
+  resolution: "@mantine/modals@npm:8.2.1"
+  peerDependencies:
+    "@mantine/core": 8.2.1
+    "@mantine/hooks": 8.2.1
+    react: ^18.x || ^19.x
+    react-dom: ^18.x || ^19.x
+  checksum: 10c0/a11dac5431d1b1828fe2b79e2a0967edb68e05fade781b2f95bc21a2c871d4446659e8d1001a38203455bdfd06f22d00558cad83e067992c6900f13c0fd8b154
+  languageName: node
+  linkType: hard
+
 "@mantine/notifications@npm:^8.2.1":
   version: 8.2.1
   resolution: "@mantine/notifications@npm:8.2.1"
@@ -5817,6 +5829,7 @@ __metadata:
     "@mantine/core": "npm:8.1.2"
     "@mantine/form": "npm:^8.1.3"
     "@mantine/hooks": "npm:8.1.2"
+    "@mantine/modals": "npm:^8.2.1"
     "@mantine/notifications": "npm:^8.2.1"
     "@next/bundle-analyzer": "npm:^15.3.3"
     "@reduxjs/toolkit": "npm:^2.8.2"