Feat/rtl indic script support(#1259)

config/i18n-scripts.json

@@ -0,0 +1,44 @@
+{
+  "languageConfig": {
+    "ar": {
+      "direction": "rtl",
+      "script": "arabic",
+      "fontFamily": "'Noto Naskh Arabic', 'Arabic UI', system-ui, -apple-system"
+    },
+    "bn": {
+      "direction": "ltr",
+      "script": "bengali",
+      "fontFamily": "'Noto Sans Bengali', 'Bangla Sangam MN', system-ui, -apple-system"
+    },
+    "fa": {
+      "direction": "rtl",
+      "script": "arabic",
+      "fontFamily": "'Noto Naskh Arabic', 'Arabic UI', system-ui, -apple-system"
+    },
+    "he": {
+      "direction": "rtl",
+      "script": "hebrew",
+      "fontFamily": "'Noto Sans Hebrew', 'Hebrew UI', system-ui, -apple-system"
+    },
+    "hi": {
+      "direction": "ltr",
+      "script": "devanagari",
+      "fontFamily": "'Noto Sans Devanagari', 'Devanagari Sangam MN', system-ui, -apple-system"
+    },
+    "mr": {
+      "direction": "ltr",
+      "script": "devanagari",
+      "fontFamily": "'Noto Sans Devanagari', 'Devanagari Sangam MN', system-ui, -apple-system"
+    },
+    "ne": {
+      "direction": "ltr",
+      "script": "devanagari",
+      "fontFamily": "'Noto Sans Devanagari', 'Devanagari Sangam MN', system-ui, -apple-system"
+    },
+    "si": {
+      "direction": "ltr",
+      "script": "sinhala",
+      "fontFamily": "'Noto Sans Sinhala', 'Sinhala Sangam MN', system-ui, -apple-system"
+    }
+  }
+}

i18n.json

@@ -2,25 +2,68 @@
   "version": "1.10",
   "locale": {
     "source": "en",
+    "config": {
+      "direction": "ltr",
+      "script": "latin"
+    },
     "targets": [
-      "ru",
-      "he",
-      "fr",
-      "es",
-      "de",
-      "zh-Hans",
-      "ko",
-      "ja",
-      "it",
-      "ar",
-      "hi",
-      "pt-BR",
-      "uk-UA",
-      "bn",
-      "fa",
-      "pl",
-      "tr",
-      "ur"
+      {
+        "code": "ar"
+      },
+      {
+        "code": "bn"
+      },
+      {
+        "code": "de"
+      },
+      {
+        "code": "es"
+      },
+      {
+        "code": "fa"
+      },
+      {
+        "code": "fr"
+      },
+      {
+        "code": "he"
+      },
+      {
+        "code": "hi"
+      },
+      {
+        "code": "it"
+      },
+      {
+        "code": "ja"
+      },
+      {
+        "code": "ko"
+      },
+      {
+        "code": "mr"
+      },
+      {
+        "code": "ne"
+      },
+      {
+        "code": "pl"
+      },
+      {
+        "code": "pt-BR"
+      },
+      {
+        "code": "ru"
+      },
+      {
+        "code": "tr"
+      },
+      {
+        "code": "uk-UA"
+      },
+      {
+        "code": "zh-Hans"
+      }
     ]
   },
   "buckets": {

packages/sdk/src/components/LocalizedText.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { useScriptStyle } from '../hooks/useScriptStyle';
+
+interface LocalizedTextProps {
+  locale: string;
+  children: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  as?: keyof JSX.IntrinsicElements;
+}
+
+export function LocalizedText({ locale, children, className = '', style = {}, as: Component = 'div' }: LocalizedTextProps) {
+  const { style: scriptStyle } = useScriptStyle(locale);
+
+  return (
+    <Component className={className} style={{ ...scriptStyle, ...style }}>
+      {children}
+    </Component>
+  );
+}
+
+interface LocalizedContentProps {
+  locale: string;
+  html: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export function LocalizedContent({ locale, html, className = '', style = {} }: LocalizedContentProps) {
+  const { style: scriptStyle } = useScriptStyle(locale);
+
+  return (
+    <div 
+      className={className} 
+      style={{ ...scriptStyle, ...style }}
+      dangerouslySetInnerHTML={{ __html: html }}
+    />
+  );
+}

packages/sdk/src/hooks/useScriptStyle.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { getScriptConfig, getScriptStyle } from '../utils/scriptConfig';
+
+export function useScriptStyle(locale: string) {
+  return useMemo(() => {
+    const config = getScriptConfig(locale);
+    const style = getScriptStyle(locale);
+
+    return {
+      config,
+      style,
+      isRTL: config?.direction === 'rtl',
+      hasSpecialScript: Boolean(config?.script && config.script !== 'latin'),
+    };
+  }, [locale]);
+}
+
+export function useScriptDirection(locale: string) {
+  return useMemo(() => {
+    const config = getScriptConfig(locale);
+    return config?.direction || 'ltr';
+  }, [locale]);
+}

packages/sdk/src/utils/scriptConfig.ts

@@ -0,0 +1,60 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+interface ScriptConfig {
+  direction: 'ltr' | 'rtl';
+  script: string;
+  fontFamily: string;
+}
+
+interface I18nScriptConfig {
+  languageConfig: {
+    [key: string]: ScriptConfig;
+  }
+}
+
+// Module-level cache for the parsed config
+let cachedConfig: I18nScriptConfig | null | undefined = undefined;
+
+export function getScriptConfig(locale: string): ScriptConfig | null {
+  try {
+    if (cachedConfig === undefined) {
+      const configPath = join(__dirname, '../config/i18n-scripts.json');
+      cachedConfig = JSON.parse(readFileSync(configPath, 'utf8')) as I18nScriptConfig;
+    }
+    return cachedConfig?.languageConfig[locale] || null;
+  } catch (error) {
+    console.error('Error loading script configuration:', error);
+    cachedConfig = null;
+    return null;
+  }
+}
+
+export function getDirectionClass(locale: string): string {
+  const config = getScriptConfig(locale);
+  return config?.direction || 'ltr';
+}
+
+export function getScriptStyle(locale: string): { [key: string]: string } {
+  const config = getScriptConfig(locale);
+  if (!config) return {};
+
+  return {
+    direction: config.direction,
+    fontFamily: config.fontFamily,
+    ...(config.direction === 'rtl' && {
+      textAlign: 'right',
+    }),
+  };
+}
+
+export function wrapWithScriptStyle(content: string, locale: string): string {
+  const config = getScriptConfig(locale);
+  if (!config) return content;
+
+  const style = `direction: ${config.direction}; font-family: ${config.fontFamily}; ${
+    config.direction === 'rtl' ? 'text-align: right;' : ''
+  }`;
+
+  return `<div style="${style}">${content}</div>`;
+}