feat: setup mantine and implement ThemeProvider

Author: hamidyfine

package.json

@@ -35,7 +35,13 @@
   "dependencies": {
     "@lingui/core": "^5.1.2",
     "@lingui/react": "^5.1.2",
+    "@mantine/core": "^7.15.2",
+    "@mantine/dates": "^7.15.2",
+    "@mantine/hooks": "^7.15.2",
+    "@mantine/modals": "^7.15.2",
+    "@mantine/notifications": "^7.15.2",
     "concurrently": "^9.1.0",
+    "dayjs": "^1.11.13",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "zustand": "^5.0.2"
@@ -89,7 +95,10 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.11",
+    "postcss": "^8.4.49",
     "postcss-html": "^1.7.0",
+    "postcss-preset-mantine": "^1.17.0",
+    "postcss-simple-vars": "^7.0.1",
     "sass-embedded": "^1.83.0",
     "stylelint": "^16.12.0",
     "stylelint-config-hudochenkov": "^11.0.0",

postcss.config.cjs

@@ -0,0 +1,14 @@
+module.exports = {
+    plugins: {
+        'postcss-preset-mantine': {},
+        'postcss-simple-vars': {
+            variables: {
+                'mantine-breakpoint-lg': '75em',
+                'mantine-breakpoint-md': '62em',
+                'mantine-breakpoint-sm': '48em',
+                'mantine-breakpoint-xl': '88em',
+                'mantine-breakpoint-xs': '36em',
+            },
+        },
+    },
+};

src/main.tsx

@@ -2,7 +2,7 @@ import { createRouter,RouterProvider } from '@tanstack/react-router';
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
-import { IntlProvider } from './providers';
+import { IntlProvider, ThemeProvider } from './providers';
 import { routeTree } from './route-tree.gen';
 
 const router = createRouter({
@@ -23,7 +23,9 @@ if (!rootElement.innerHTML) {
     root.render(
         <StrictMode>
             <IntlProvider locale="en">
-                <RouterProvider router={router} />
+                <ThemeProvider>
+                    <RouterProvider router={router} />
+                </ThemeProvider>
             </IntlProvider>
         </StrictMode>,
     );

src/providers/index.ts

@@ -1 +1,2 @@
 export * from './intl';
+export * from './theme';

src/providers/theme/__snapshots__/theme.provider.spec.tsx.snap

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ThemeProvider Component matches snapshot 1`] = `
+<DocumentFragment>
+  <style
+    data-mantine-styles="classes"
+  >
+    @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
+  </style>
+  <div>
+    Snapshot Content
+  </div>
+</DocumentFragment>
+`;

src/providers/theme/index.ts

@@ -0,0 +1 @@
+export * from './theme.provider';

src/providers/theme/theme.provider.spec.tsx

@@ -0,0 +1,42 @@
+import { renderWrapper, screen } from '@/tests';
+
+describe('ThemeProvider Component', () => {
+    it('should render children', async () => {
+        renderWrapper(
+            <div>Children of Theme Provider</div>,
+        );
+
+        expect(screen.getByText('Children of Theme Provider')).toBeInTheDocument();
+    });
+
+    it('forwards props to MantineProvider', () => {
+        const props = { theme: { defaultColorScheme: 'dark' } };
+
+        renderWrapper(
+            <div>Children of Theme Provider</div>,
+            {
+                ...props,
+            },
+        );
+
+        const htmlElement = document.documentElement;
+
+        expect(htmlElement).toHaveAttribute('data-mantine-color-scheme', 'dark');
+    });
+
+    it('renders correctly without additional props', () => {
+        const { container } = renderWrapper(
+            <div>Default Content</div>,
+        );
+
+        expect(container).toBeInTheDocument();
+    });
+
+    it('matches snapshot', () => {
+        const { asFragment } = renderWrapper(
+            <div>Snapshot Content</div>,
+        );
+
+        expect(asFragment()).toMatchSnapshot();
+    });
+});

src/providers/theme/theme.provider.tsx

@@ -0,0 +1,12 @@
+import '@mantine/core/styles.css';
+
+import { MantineProvider } from '@mantine/core';
+import type { ComponentProps, PropsWithChildren } from 'react';
+
+export const ThemeProvider = ({ children, ...props }: PropsWithChildren<ComponentProps<typeof MantineProvider>>) => {
+    return (
+        <MantineProvider {...props}>
+            {children}
+        </MantineProvider>
+    );
+};

src/tests/utils/render.tsx

@@ -1,11 +1,13 @@
 import { render as testingLibraryRender } from '@testing-library/react';
 
-import { IntlProvider } from '../../providers';
+import { IntlProvider, ThemeProvider } from '../../providers';
 
-export const renderWrapper = (ui: React.ReactNode, { locale = 'en' } = {}) => {
+export const renderWrapper = (ui: React.ReactNode, { locale = 'en', theme = {} } = {}) => {
     return testingLibraryRender(
         <IntlProvider locale={locale}>
-            {ui}
+            <ThemeProvider {...theme} >
+                {ui}
+            </ThemeProvider>
         </IntlProvider>,
     );
 };