From c7333658da45ffb098e73337cc33ead9382942dc Mon Sep 17 00:00:00 2001
From: Jineshbansal <732005jinesh@gmail.com>
Date: Tue, 4 Feb 2025 07:56:38 +0530
Subject: [PATCH] frontend: tsdocs: Add TSDoc comments to
 ThemeProviderNexti18n.tsx

Signed-off-by: Jineshbansal <732005jinesh@gmail.com>
---
 frontend/src/i18n/ThemeProviderNexti18n.tsx | 40 +++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/frontend/src/i18n/ThemeProviderNexti18n.tsx b/frontend/src/i18n/ThemeProviderNexti18n.tsx
index 68f0ca5fdde..950ff6523b0 100644
--- a/frontend/src/i18n/ThemeProviderNexti18n.tsx
+++ b/frontend/src/i18n/ThemeProviderNexti18n.tsx
@@ -4,6 +4,21 @@ import React, { ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Loader } from '../components/common';
 
+/**
+ * Returns the Material UI locale object for the given language code.
+ *
+ * @remarks
+ * This method retrieves the locale configuration for a specific language supported by
+ * Material UI. It checks the provided language code against a predefined set of available locales,
+ * and returns the corresponding locale object. If the language code is not found, it defaults to 
+ * English (`enUS`).
+ *
+ * @param locale - The language code for which the locale object is required (e.g., 'en', 'pt', 'es').
+ * 
+ * @returns The Material UI locale object corresponding to the provided language code. 
+ *          Defaults to `enUS` if the locale is not found in the predefined list.
+ */
+
 function getLocale(locale: string): typeof enUS {
   const LOCALES = {
     en: enUS,
@@ -18,8 +33,29 @@ function getLocale(locale: string): typeof enUS {
   return locale in LOCALES ? LOCALES[locale as LocalesType] : LOCALES['en'];
 }
 
-/** Like a ThemeProvider but uses reacti18next for the language selection
- *  Because Material UI is localized as well.
+/**
+ * A custom theme provider component that integrates Material UI's theme with `react-i18next` for language selection.
+ * It ensures that both the theme and language are synchronized, providing seamless localization across the application.
+ * 
+ * @remarks
+ * This component functions like a standard Material UI `ThemeProvider`, but it also listens for language changes using `react-i18next`. 
+ * When the language is changed, the corresponding Material UI locale is applied to update the theme accordingly.
+ * This is essential for supporting multiple languages and ensuring the UI behaves correctly with Right-To-Left (RTL) languages.
+ * 
+ * The component will show a loading state (`<Loader />`) until the i18n resources are ready for rendering.
+ * 
+ * @param {object} props - The properties for the component.
+ * @param {Theme} props.theme - The Material UI theme object to be applied to the app.
+ * @param {ReactNode} props.children - The child components wrapped by this theme provider.
+ * 
+ * @returns {ReactNode} The children components wrapped with the updated Material UI theme and language configurations.
+ * 
+ * @example
+ * ```tsx
+ * <ThemeProviderNexti18n theme={theme}>
+ *   <YourComponent />
+ * </ThemeProviderNexti18n>
+ * ```
  */
 const ThemeProviderNexti18n: React.FunctionComponent<{
   theme: Theme;