refactor: migrate project to TypeScript and translate comments to English

app/context/LanguageContext.tsx

@@ -1,13 +1,23 @@
 'use client';
 
-
+import type {Dispatch, SetStateAction, ReactNode} from 'react';
+import type {Locale, SiteContent, Direction} from '@/types/domain';
 import {createContext, useContext, useEffect, useState} from 'react';
 import {content} from '@/data/content';
 
-const LanguageContext = createContext(null);
+interface LanguageContextValue {
+    locale: Locale;
+    setLocale: Dispatch<SetStateAction<Locale>>;
+    toggleLocale: () => void;
+    t: SiteContent;
+    dir: Direction;
+    mounted: boolean;
+}
 
-export function LanguageProvider({children}) {
-    const [locale, setLocale] = useState('fa');
+const LanguageContext = createContext<LanguageContextValue | null>(null);
+
+export function LanguageProvider({children}: {children: ReactNode}) {
+    const [locale, setLocale] = useState<Locale>('fa');
     const [mounted, setMounted] = useState(false);
 
     useEffect(() => {

app/context/ThemeContext.tsx

@@ -1,12 +1,21 @@
 'use client';
 
+import type {Dispatch, SetStateAction, ReactNode} from 'react';
+import type {Theme} from '@/types/domain';
 import {createContext, useContext, useEffect, useState} from 'react';
 
-const ThemeContext = createContext(null);
+interface ThemeContextValue {
+    theme: Theme;
+    setTheme: Dispatch<SetStateAction<Theme>>;
+    toggleTheme: () => void;
+    mounted: boolean;
+}
 
-export function ThemeProvider({children}) {
+const ThemeContext = createContext<ThemeContextValue | null>(null);
 
-    const [theme, setTheme] = useState('light');
+export function ThemeProvider({children}: {children: ReactNode}) {
+
+    const [theme, setTheme] = useState<Theme>('light');
     const [mounted, setMounted] = useState(false);
 
 
@@ -42,4 +51,3 @@ export function useTheme() {
     if (!ctx) throw new Error('useTheme must be used within ThemeProvider');
     return ctx;
 }
-

app/layout.tsx

@@ -1,3 +1,5 @@
+import type {Metadata, Viewport} from 'next';
+import type {ReactNode} from 'react';
 import {Vazirmatn} from 'next/font/google';
 import './globals.css';
 import Providers from './providers';
@@ -9,19 +11,19 @@ const vazirmatn = Vazirmatn({
 });
 
 
-export const metadata = {
+export const metadata: Metadata = {
     title: 'روبات مارکت | دستگاه‌های وندینگ هوشمند',
     description:
         'روبات مارکت؛ دستگاه‌های فروش خودکار هوشمند با مدیریت آنلاین، تحویل نرم و طراحی مدرن.',
 };
 
 
-export const viewport = {
+export const viewport: Viewport = {
     themeColor: '#00a693',
 };
 
 
-export default function RootLayout({children}) {
+export default function RootLayout({children}: {children: ReactNode}) {
 
     return (
         <html lang="fa" dir="rtl" className={`${vazirmatn.variable} light`} suppressHydrationWarning>

app/providers.tsx

@@ -1,8 +1,10 @@
 'use client';
 
-// پل ارتباطی بین Redux، حالت تیره/روشن، و زبان فا/en با تنظیمات ConfigProvider آنت‌دیزاین.
+import type {ReactNode} from 'react';
+// Connect Redux, language, and theme settings to Ant Design.
 
 import {Provider as ReduxProvider} from 'react-redux';
+import type {ThemeConfig} from 'antd';
 import {ConfigProvider, theme as antdThemeApi} from 'antd';
 import faIR from 'antd/locale/fa_IR';
 import enUS from 'antd/locale/en_US';
@@ -10,11 +12,11 @@ import {store} from '@/store/store';
 import {ThemeProvider, useTheme} from './context/ThemeContext';
 import {LanguageProvider, useLanguage} from './context/LanguageContext';
 
-function AntdBridge({children}) {
+function AntdBridge({children}: {children: ReactNode}) {
     const {theme} = useTheme();
     const {locale, dir} = useLanguage();
 
-    const antdTheme = {
+    const antdTheme: ThemeConfig = {
         algorithm: theme === 'dark' ? antdThemeApi.darkAlgorithm : antdThemeApi.defaultAlgorithm,
         token: {
             colorPrimary: '#00a693',
@@ -48,7 +50,7 @@ function AntdBridge({children}) {
     );
 }
 
-export default function Providers({children}) {
+export default function Providers({children}: {children: ReactNode}) {
     return (
         <ReduxProvider store={store}>
             <ThemeProvider>