Merge branch 'develop' into feat/login-signup

.gitignore

@@ -24,3 +24,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# npm registry
+.npmrc

package.json

@@ -15,6 +15,8 @@
     "@emotion/styled": "^11.14.1",
     "@mui/material": "^7.2.0",
     "@mui/stylis-plugin-rtl": "^7.2.0",
+    "@rkheftan/harmony-ui": "^0.1.6",
+    "@types/stylis": "^4.2.7",
     "i18next": "^25.3.0",
     "i18next-browser-languagedetector": "^8.2.0",
     "i18next-http-backend": "^3.0.2",
@@ -24,7 +26,6 @@
     "react-country-flag": "^3.1.0",
     "react-dom": "^19.1.0",
     "react-i18next": "^15.6.0",
-    "react-router": "^7.8.0",
     "react-router-dom": "^7.8.0",
     "stylis": "^4.3.6",
     "stylis-plugin-rtl": "^2.1.1"

public/locales/fa/common.json

@@ -186,5 +186,17 @@
   },
   "messages": {
     "noResualtFound": "نتیجه ای یافت نشد."
+  },
+  "side": {
+    "account": "حساب کاربری",
+    "personalInfo": "اطلاعات شخصی",
+    "contactInfo": "شماره تماس",
+    "email": "ایمیل",
+    "security": "امنیت",
+    "password": "رمز عبور",
+    "confirmedIps": "آدرس های تایید شده",
+    "recentSessions": "ورود های اخیر",
+    "activeSessions": "نشست های فعال",
+    "setting": "تنظیمات"
   }
 }

src/App.tsx

@@ -1,12 +1,15 @@
 import { CssBaseline } from '@mui/material';
 import './App.css';
-import { LanguageManager } from './components/LanguageManager';
+import { LanguageManager } from '@/components/LanguageManager';
+import { RouterProvider } from 'react-router-dom';
+import { router } from '@/routes';
 
 function App() {
   return (
     <>
       <CssBaseline />
       <LanguageManager />
+      <RouterProvider router={router} />
     </>
   );
 }

src/components/Layout/Header.tsx

@@ -0,0 +1,35 @@
+import { Box, IconButton, Typography } from '@mui/material';
+import { Icon } from '@rkheftan/harmony-ui';
+import { More } from 'iconsax-react';
+import type { User } from './type';
+
+interface HeaderProps {
+  user: User;
+}
+
+export const Header: React.FC<HeaderProps> = ({ user }) => {
+  return (
+    <Box
+      sx={{
+        p: 2,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        height: (t) => t.spacing(10.5),
+      }}
+    >
+      <Box>
+        <Typography variant="body1">
+          {user.firstName + ' ' + user.lastName}
+        </Typography>
+        <Typography variant="body2" color="textSecondary">
+          {user.phoneNumber}
+        </Typography>
+      </Box>
+
+      <IconButton>
+        <Icon Component={More} />
+      </IconButton>
+    </Box>
+  );
+};

src/components/Layout/Layout.tsx

@@ -0,0 +1,69 @@
+import { SideNav } from '@rkheftan/harmony-ui';
+import { buildNavItems } from './buildNavItems';
+import { appRoutes } from '@/routes/config';
+import { Outlet, useLocation } from 'react-router-dom';
+import { Box, useMediaQuery, useTheme } from '@mui/material';
+import { Header } from './Header';
+import { useState } from 'react';
+import { Toolbar } from './Toolbar';
+import type { User } from './type';
+
+export const Layout = () => {
+  const navItemConfigs = buildNavItems(appRoutes);
+  const location = useLocation();
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('md'));
+  const [sideNavOpen, setSideNavOpen] = useState(false);
+  const [user] = useState<User>({
+    firstName: 'محمد حسین',
+    lastName: 'برزه گر',
+    phoneNumber: '09123456789',
+  });
+
+  return (
+    <Box
+      sx={{
+        height: '100vh',
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+      }}
+    >
+      <Box
+        sx={{
+          // TODO: Check for better approach
+          width: isMobile ? '100%' : 1070,
+          height: isMobile ? '100vh' : '80%',
+          display: 'flex',
+          flexDirection: 'row-reverse',
+          borderRadius: isMobile ? 0 : 4,
+          backgroundColor: 'background.paper',
+          overflow: 'hidden',
+        }}
+      >
+        <Box sx={{ flex: 1 }}>
+          <Toolbar
+            isMobile={isMobile}
+            sideNavOpen={sideNavOpen}
+            setSideNavOpen={setSideNavOpen}
+            user={user}
+          />
+          <Outlet />
+        </Box>
+
+        <SideNav
+          open={sideNavOpen}
+          onClose={() => setSideNavOpen(false)}
+          header={isMobile ? undefined : <Header user={user} />}
+          footer={isMobile ? <Header user={user} /> : undefined}
+          navConfig={navItemConfigs}
+          activePath={location.pathname + location.hash}
+          selectedVariant="textOnly"
+          positioning="absolute"
+          sideNavVariant={isMobile ? 'temporary' : 'full'}
+          top={8.125}
+        />
+      </Box>
+    </Box>
+  );
+};

src/components/Layout/Toolbar.tsx

@@ -0,0 +1,75 @@
+import {
+  Avatar,
+  Box,
+  IconButton,
+  Toolbar as MuiToolbar,
+  Typography,
+} from '@mui/material';
+import { Icon } from '@rkheftan/harmony-ui';
+import { HambergerMenu, Menu } from 'iconsax-react';
+import type { Dispatch, SetStateAction } from 'react';
+import type { User } from './type';
+
+interface ToolbarProps {
+  sideNavOpen: boolean;
+  setSideNavOpen: Dispatch<SetStateAction<boolean>>;
+  isMobile: boolean;
+  user: User;
+}
+
+export const Toolbar: React.FC<ToolbarProps> = ({
+  sideNavOpen,
+  setSideNavOpen,
+  isMobile,
+  user,
+}) => {
+  return (
+    <MuiToolbar
+      sx={{
+        height: (t) => t.spacing(isMobile ? 8 : 10.5),
+        px: isMobile ? 3 : 2,
+        borderBottom: (t) => `1px solid ${t.palette.divider}`,
+        boxSizing: 'content-box',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+      }}
+    >
+      <Box
+        sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 2 }}
+      >
+        {isMobile && (
+          <IconButton
+            sx={{
+              backgroundColor: sideNavOpen ? 'primary.light' : undefined,
+              color: sideNavOpen ? 'primary.main' : undefined,
+              '&:hover': {
+                backgroundColor: sideNavOpen ? 'primary.light' : undefined,
+              },
+            }}
+            onClick={() => setSideNavOpen(!sideNavOpen)}
+          >
+            <Icon Component={HambergerMenu} />
+          </IconButton>
+        )}
+        {/* <Logo /> */}
+        <Typography variant="h6">LOGO placeholder</Typography>
+      </Box>
+      <Box
+        sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 1 }}
+      >
+        {isMobile && (
+          <Avatar
+            sx={{ width: 32, height: 32, fontSize: '14px' }}
+            src={user.profileUrl}
+          >
+            {user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
+          </Avatar>
+        )}
+        <IconButton>
+          <Icon Component={Menu} variant="Bold" />
+        </IconButton>
+      </Box>
+    </MuiToolbar>
+  );
+};

src/components/Layout/buildNavItems.tsx

@@ -0,0 +1,34 @@
+// src/components/SideNav.tsx (Conceptual Example)
+
+import { useTranslation } from 'react-i18next';
+import { type RouteConfig } from '@/routes/config';
+import { Icon, type NavItemConfig } from '@rkheftan/harmony-ui';
+import type { Icon as Iconsax } from 'iconsax-react';
+
+const getIcon = (icon?: Iconsax) => (isSelected: boolean) =>
+  icon ? (
+    <Icon Component={icon} variant={isSelected ? 'Bold' : 'Broken'} />
+  ) : undefined;
+
+export function buildNavItems(routes: RouteConfig[]): NavItemConfig[] {
+  const { t } = useTranslation();
+
+  return routes.flatMap((route) => {
+    // Check if route itself does not have a navItem but its child has
+    if (!route.navConfig && route.children) {
+      return buildNavItems(route.children);
+    }
+
+    // Check if route.navConfig is defined before destructuring
+    if (!route.navConfig) {
+      return []; // Return an empty array to be flattened
+    }
+    const { title, icon } = route.navConfig;
+    return {
+      text: t(title),
+      getIcon: getIcon(icon),
+      path: route.path,
+      children: route.children ? buildNavItems(route.children) : undefined,
+    };
+  });
+}

src/components/Layout/type.ts

@@ -0,0 +1,8 @@
+// TODO: this type file is temporary and should replace it with the actual use type and value when api is ready
+
+export interface User {
+  firstName: string;
+  lastName: string;
+  phoneNumber: string;
+  profileUrl?: string;
+}

src/providers/AppProvider.tsx

@@ -3,6 +3,7 @@ import { I18nextProvider } from 'react-i18next';
 import i18n from '@/config/i18n';
 import { CustomThemeProvider } from './CustomThemeProvider';
 import { RtlProvider } from './RtlProvider';
+import { ToastProvider } from '@rkheftan/harmony-ui';
 
 export const AppProviders: React.FC<{ children: React.ReactNode }> = ({
   children,
@@ -10,7 +11,9 @@ export const AppProviders: React.FC<{ children: React.ReactNode }> = ({
   return (
     <I18nextProvider i18n={i18n}>
       <RtlProvider>
-        <CustomThemeProvider>{children}</CustomThemeProvider>
+        <CustomThemeProvider>
+          <ToastProvider>{children}</ToastProvider>
+        </CustomThemeProvider>
       </RtlProvider>
     </I18nextProvider>
   );

src/providers/RtlProvider.tsx

@@ -3,6 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 import rtlPlugin from 'stylis-plugin-rtl';
+import { prefixer } from 'stylis';
 
 // This provider configures Emotion's cache to support RTL.
 export const RtlProvider: React.FC<{ children: React.ReactNode }> = ({
@@ -14,7 +15,7 @@ export const RtlProvider: React.FC<{ children: React.ReactNode }> = ({
     const isRtl = i18n.dir(i18n.language) === 'rtl';
     return createCache({
       key: isRtl ? 'muirtl' : 'muiltr',
-      stylisPlugins: isRtl ? [rtlPlugin] : [],
+      stylisPlugins: isRtl ? [prefixer, rtlPlugin] : [],
     });
   }, [i18n]);
 

src/routes/config.tsx

@@ -0,0 +1,119 @@
+import { Layout } from '@/components/Layout/Layout';
+import {
+  Calendar,
+  Devices,
+  LocationTick,
+  Mobile,
+  PasswordCheck,
+  Personalcard,
+  ProfileCircle,
+  Setting,
+  Shield,
+  Sms,
+  type Icon,
+} from 'iconsax-react';
+import { type ReactNode } from 'react';
+import { Navigate } from 'react-router-dom';
+
+export interface RouteConfig {
+  path: string;
+  element?: ReactNode;
+  navConfig?: {
+    title: string; // Translation key
+    icon?: Icon;
+  };
+  children?: RouteConfig[];
+}
+
+// can lazy load component if needed (ex. lazy(() => import('@/features/home/routes/HomePage'));)
+export const appRoutes: RouteConfig[] = [
+  {
+    path: '/',
+    element: <Navigate to="/setting/profile" replace />,
+  },
+  {
+    path: '/setting',
+    element: <Layout />,
+    children: [
+      // TODO: add route component to each route
+      {
+        path: '/setting/profile',
+        navConfig: {
+          // Profile component
+          title: 'side.account',
+          icon: ProfileCircle,
+        },
+        children: [
+          {
+            path: '/setting/profile#info',
+            navConfig: {
+              title: 'side.personalInfo',
+              icon: Personalcard,
+            },
+          },
+          {
+            path: '/setting/profile#contact-info',
+            navConfig: {
+              title: 'side.contactInfo',
+              icon: Mobile,
+            },
+          },
+          {
+            path: '/setting/profile#email',
+            navConfig: {
+              title: 'side.email',
+              icon: Sms,
+            },
+          },
+        ],
+      },
+      {
+        path: '/setting/security',
+        // security component
+        navConfig: {
+          title: 'side.security',
+          icon: Shield,
+        },
+        children: [
+          {
+            path: '/setting/security#password',
+            navConfig: {
+              title: 'side.password',
+              icon: PasswordCheck,
+            },
+          },
+          {
+            path: '/setting/security#confirmed-ips',
+            navConfig: {
+              title: 'side.confirmedIps',
+              icon: LocationTick,
+            },
+          },
+          {
+            path: '/setting/security#recent-sessions',
+            navConfig: {
+              title: 'side.recentSessions',
+              icon: Devices,
+            },
+          },
+        ],
+      },
+      {
+        path: '/setting/active-sessions',
+        // active session component
+        navConfig: {
+          title: 'side.activeSessions',
+          icon: Calendar,
+        },
+      },
+      {
+        path: '/setting/preferences',
+        // setting component
+        navConfig: {
+          title: 'side.setting',
+          icon: Setting,
+        },
+      },
+    ],
+  },
+];

src/routes/index.tsx

@@ -0,0 +1,34 @@
+import { Suspense, type ReactNode } from 'react';
+import { createBrowserRouter, type RouteObject } from 'react-router-dom';
+import { appRoutes, type RouteConfig } from './config';
+
+/**
+ * A recursive function to map our custom route config to the format
+ * that react-router-dom expects, applying layouts and guards.
+ */
+function mapRoutes(routes: RouteConfig[]): RouteObject[] {
+  return routes.map((route) => {
+    // Start with the base element, wrapped in Suspense for lazy loading
+    let element: ReactNode = (
+      <Suspense fallback={<div>Loading...</div>}>{route.element}</Suspense>
+    );
+
+    // Conditionally wrap the element in the specified layout
+    // if (route.layout) {
+    //   element = <route.layout>{element}</route.layout>;
+    // }
+
+    // Conditionally wrap the element in the authentication guard
+    // if (route.authRequired) {
+    //   element = <ProtectedRoute>{element}</ProtectedRoute>;
+    // }
+
+    return {
+      path: route.path,
+      element: element,
+      ...(route.children && { children: mapRoutes(route.children) }),
+    };
+  });
+}
+
+export const router = createBrowserRouter(mapRoutes(appRoutes));

src/theme/colorTmp.ts

@@ -1,188 +0,0 @@
-export const PALETTE = {
-  primary: {
-    light: {
-      main: '#212121',
-      dark: '#000000',
-      light: '#616161',
-      contrastText: '#FFFFFF',
-      hover: '#21212104',
-      selected: '#21212108',
-      focus: '#21212112',
-      focusVisible: '#21212130',
-      outlinedBorder: '#21212150',
-    },
-    // TODO
-    dark: {
-      main: '#64b5f6',
-      light: '#90caf9',
-      dark: '#42a5f5',
-      contrastText: 'rgba(0, 0, 0, 0.87)',
-    },
-  },
-  secondary: {
-    light: {
-      main: '#FF5722',
-      dark: '#E64A19',
-      light: '#FF8A65',
-      contrastText: '#FFFFFF',
-      hover: '#FF572204',
-      selected: '#FF572208',
-      focus: '#FF572212',
-      focusVisible: '#FF572230',
-      outlinedBorder: '#FF572250',
-    },
-    // TODO
-    dark: {
-      main: '#ce93d8',
-      light: '#f3e5f5',
-      dark: '#ab47bc',
-      contrastText: 'rgba(0, 0, 0, 0.87)',
-    },
-  },
-  action: {
-    light: {
-      action: '#00000056',
-      hover: '#00000004',
-      selected: '#00000008',
-      focus: '#00000012',
-      disabled: '#00000038',
-      disabledBackground: '#00000012',
-    },
-    // TODO
-    dark: {
-      action: '#FFFFFF56',
-      hover: '#FFFFFF04',
-      selected: '#FFFFFF08',
-      focus: '#FFFFFF12',
-      disabled: '#FFFFFF38',
-      disabledBackground: '#FFFFFF12',
-    },
-  },
-  error: {
-    light: {
-      main: '#E53935',
-      dark: '#C62828',
-      light: '#EF5350',
-      contrast: '#FFFFFF',
-      hover: '#D32F2F04',
-      selected: '#D32F2F08',
-      focusVisible: '#D32F2F30',
-      outlinedBorder: '#D32F2F50',
-    },
-    // TODO
-    dark: {
-      main: '#E53935',
-      dark: '#C62828',
-      light: '#EF5350',
-      contrast: '#FFFFFF',
-      hover: '#D32F2F04',
-      selected: '#D32F2F08',
-      focusVisible: '#D32F2F30',
-      outlinedBorder: '#D32F2F50',
-    },
-  },
-  warning: {
-    light: {
-      main: '#EF6C00',
-      dark: '#E65100',
-      light: '#FF9800',
-      contrast: '#FFFFFF',
-      hover: '#EF6C0004',
-      selected: '#EF6C0008',
-      focusVisible: '#EF6C0030',
-      outlinedBorder: '#EF6C0050',
-    },
-    // TODO
-    dark: {
-      main: '#EF6C00',
-      dark: '#E65100',
-      light: '#FF9800',
-      contrast: '#FFFFFF',
-      hover: '#EF6C0004',
-      selected: '#EF6C0008',
-      focusVisible: '#EF6C0030',
-      outlinedBorder: '#EF6C0050',
-    },
-  },
-  info: {
-    light: {
-      main: '#29B6F6',
-      dark: '#0288D1',
-      light: '#4FC3F7',
-      contrast: '#FFFFFF',
-      hover: '#0288D104',
-      selected: '#0288D108',
-      focusVisible: '#0288D130',
-      outlinedBorder: '#0288D150',
-    },
-    // TODO
-    dark: {
-      main: '#29B6F6',
-      dark: '#0288D1',
-      light: '#4FC3F7',
-      contrast: '#FFFFFF',
-      hover: '#0288D104',
-      selected: '#0288D108',
-      focusVisible: '#0288D130',
-      outlinedBorder: '#0288D150',
-    },
-  },
-  success: {
-    light: {
-      main: '#43A047',
-      dark: '#1B5E20',
-      light: '#81C784',
-      contrast: '#FFFFFF',
-      hover: '#2E7D3204',
-      selected: '#2E7D3208',
-      focusVisible: '#2E7D3230',
-      outlinedBorder: '#2E7D3250',
-    },
-    // TODO
-    dark: {
-      main: '#43A047',
-      dark: '#1B5E20',
-      light: '#81C784',
-      contrast: '#FFFFFF',
-      hover: '#2E7D3204',
-      selected: '#2E7D3208',
-      focusVisible: '#2E7D3230',
-      outlinedBorder: '#2E7D3250',
-    },
-  },
-  // Background colors
-  background: {
-    light: {
-      default: '#FAFAFA',
-    },
-    dark: {
-      default: '#121212',
-    },
-  },
-  // Text colors
-  text: {
-    light: {
-      primary: '#000000',
-      secondary: '#424242',
-      tertiary: '#757575',
-      disabled: '#00000038',
-      hover: '#00000004',
-      selected: '#00000008',
-      divider: '#E0E0E0',
-      focus: '#00000012',
-      focusVisible: '#00000030',
-    },
-    // TODO
-    dark: {
-      primary: '#FFFFFF',
-      secondary: '#424242',
-      tertiary: '#757575',
-      disabled: '#FFFFFF38',
-      hover: '#FFFFFF04',
-      selected: '#FFFFFF08',
-      divider: '#E0E0E0',
-      focus: '#FFFFFF12',
-      focusVisible: '#FFFFFF30',
-    },
-  },
-};

src/theme/colors.ts

@@ -1,35 +1,33 @@
-import { blue } from '@mui/material/colors';
+import { blue, grey } from '@mui/material/colors';
 import type { Palette } from './color.type';
 
 export const PALETTE: Palette = {
   primary: {
     light: {
-      main: blue.A400,
+      main: blue[400],
-      dark: blue.A700,
+      dark: blue[700],
-      light: blue.A100,
+      light: blue[100],
       contrastText: '#FFFFFF',
     },
-    // TODO
     dark: {
-      main: '#64b5f6',
+      main: blue[300],
-      light: '#90caf9',
+      light: blue[100],
-      dark: '#42a5f5',
+      dark: blue[500],
-      contrastText: 'rgba(0, 0, 0, 0.87)',
+      contrastText: '#FFFFFF',
     },
   },
   secondary: {
     light: {
-      main: '#FF5722',
+      main: grey[900],
-      dark: '#E64A19',
+      dark: '#000000',
-      light: '#FF8A65',
+      light: grey[700],
       contrastText: '#FFFFFF',
     },
-    // TODO
     dark: {
-      main: '#ce93d8',
+      main: grey[300],
-      light: '#f3e5f5',
+      light: grey[100],
-      dark: '#ab47bc',
+      dark: grey[500],
-      contrastText: 'rgba(0, 0, 0, 0.87)',
+      contrastText: '#000000',
     },
   },
   action: {
@@ -56,12 +54,11 @@ export const PALETTE: Palette = {
       light: '#ef5350',
       contrastText: '#FFFFFF',
     },
-    // TODO
     dark: {
-      main: '#E53935',
+      main: '#EF9A9A',
-      dark: '#C62828',
+      dark: '#E57373',
-      light: '#EF5350',
+      light: '#FFCDD2',
-      contrastText: '#FFFFFF',
+      contrastText: '#000000',
     },
   },
   warning: {
@@ -71,12 +68,11 @@ export const PALETTE: Palette = {
       light: '#FF9800',
       contrastText: '#FFFFFF',
     },
-    // TODO
     dark: {
-      main: '#EF6C00',
+      main: '#FFB74D',
-      dark: '#E65100',
+      dark: '#FFA726',
-      light: '#FF9800',
+      light: '#FFE0B2',
-      contrastText: '#FFFFFF',
+      contrastText: '#000000',
     },
   },
   info: {
@@ -86,12 +82,11 @@ export const PALETTE: Palette = {
       light: '#4FC3F7',
       contrastText: '#FFFFFF',
     },
-    // TODO
     dark: {
-      main: '#29B6F6',
+      main: '#81D4FA',
-      dark: '#0288D1',
+      dark: '#4FC3F7',
-      light: '#4FC3F7',
+      light: '#E1F5FE',
-      contrastText: '#FFFFFF',
+      contrastText: '#000000',
     },
   },
   success: {
@@ -103,16 +98,16 @@ export const PALETTE: Palette = {
     },
     // TODO
     dark: {
-      main: '#43A047',
+      main: '#A5D6A7',
-      dark: '#1B5E20',
+      dark: '#66BB6A',
-      light: '#81C784',
+      light: '#C8E6C9',
-      contrastText: '#FFFFFF',
+      contrastText: '#000000',
     },
   },
   // Background colors
   background: {
     light: {
-      default: '#FAFAFA',
+      default: grey[100],
     },
     dark: {
       default: '#121212',
@@ -128,7 +123,7 @@ export const PALETTE: Palette = {
     // TODO
     dark: {
       primary: '#FFFFFF',
-      secondary: '#424242',
+      secondary: '#B0BEC5',
       disabled: '#FFFFFF38',
     },
   },