lokal-react 1.0.0

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "lokal-react",
+  "version": "1.0.0",
+  "description": "React & React Native adapter for LOKAL - Hooks and Context Providers",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "lint": "echo 'Use root lint command'"
+  },
+  "dependencies": {
+    "lokal-core": "*"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.2.0",
+    "eslint": "^8.57.0",
+    "react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/src/context/LokalContext.tsx

@@ -0,0 +1,190 @@
+import React, { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
+import type { LocaleData } from 'lokal-core';
+
+// Type for translation function
+export type TranslateFunction = <K extends string>(
+    key: K,
+    params?: Record<string, string | number>
+) => string;
+
+// Storage interface for different platforms
+export interface StorageInterface {
+    getItem(key: string): Promise<string | null>;
+    setItem(key: string, value: string): Promise<void>;
+}
+
+// Default to localStorage for web
+const defaultStorage: StorageInterface = {
+    getItem: (key: string) => {
+        if (typeof window === 'undefined') return Promise.resolve(null);
+        return Promise.resolve(localStorage.getItem(key));
+    },
+    setItem: (key: string, value: string) => {
+        if (typeof window === 'undefined') return Promise.resolve();
+        localStorage.setItem(key, value);
+        return Promise.resolve();
+    },
+};
+
+export interface LokalContextValue {
+    locale: string;
+    setLocale: (locale: string) => void;
+    locales: string[];
+    t: TranslateFunction;
+    translations: LocaleData;
+    isLoading: boolean;
+}
+
+const LokalContext = createContext<LokalContextValue | null>(null);
+
+export interface LokalProviderProps {
+    children: ReactNode;
+    locale?: string;
+    locales?: string[];
+    translations?: LocaleData;
+    storage?: StorageInterface;
+    namespace?: string;
+    defaultLocale?: string;
+    onLocaleChange?: (locale: string) => void;
+}
+
+interface StoredTranslations {
+    [locale: string]: LocaleData;
+}
+
+/**
+ * LokalProvider - Provides localization context to your React app
+ */
+export function LokalProvider({
+    children,
+    locale: initialLocale = 'en',
+    locales = ['en'],
+    translations: initialTranslations = {},
+    storage = defaultStorage,
+    namespace = 'locales',
+    defaultLocale = 'en',
+    onLocaleChange,
+}: LokalProviderProps) {
+    const [locale, setLocaleState] = useState<string>(initialLocale);
+    const [translations, setTranslations] = useState<LocaleData>(initialTranslations);
+    const [isLoading, setIsLoading] = useState<boolean>(true);
+
+    // Load saved locale and translations from storage
+    useEffect(() => {
+        const loadLocale = async () => {
+            try {
+                const savedLocale = await storage.getItem(`${namespace}-locale`);
+                if (savedLocale && locales.includes(savedLocale)) {
+                    setLocaleState(savedLocale);
+                } else {
+                    // Try to detect from browser
+                    const browserLocale = navigator.language.split('-')[0];
+                    if (locales.includes(browserLocale)) {
+                        setLocaleState(browserLocale);
+                    }
+                }
+            } catch (error) {
+                console.warn('Failed to load locale from storage:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+
+        loadLocale();
+    }, [storage, locales, namespace]);
+
+    // Load translations for current locale
+    useEffect(() => {
+        const loadTranslations = async () => {
+            try {
+                const storedData = await storage.getItem(`${namespace}-translations`);
+                if (storedData) {
+                    const parsed: StoredTranslations = JSON.parse(storedData);
+                    if (parsed[locale]) {
+                        setTranslations(parsed[locale]);
+                    }
+                }
+            } catch (error) {
+                console.warn('Failed to load translations from storage:', error);
+            }
+        };
+
+        if (!isLoading) {
+            loadTranslations();
+        }
+    }, [locale, storage, namespace, isLoading]);
+
+    // Set locale and persist
+    const setLocale = useCallback((newLocale: string) => {
+        if (!locales.includes(newLocale)) {
+            console.warn(`Locale ${newLocale} is not in the list of available locales`);
+            return;
+        }
+
+        setLocaleState(newLocale);
+        storage.setItem(`${namespace}-locale`, newLocale);
+
+        if (onLocaleChange) {
+            onLocaleChange(newLocale);
+        }
+    }, [locales, storage, namespace, onLocaleChange]);
+
+    // Translation function
+    const t = useCallback<TranslateFunction>((key, params) => {
+        const keys = key.split('.');
+        let value: any = translations;
+
+        for (const k of keys) {
+            if (value && typeof value === 'object' && k in value) {
+                value = value[k];
+            } else {
+                // Return key if not found
+                return key;
+            }
+        }
+
+        if (typeof value !== 'string') {
+            return key;
+        }
+
+        // Replace parameters
+        if (params) {
+            return Object.entries(params).reduce(
+                (str, [paramKey, paramValue]) => str.replace(new RegExp(`{{${paramKey}}}`, 'g'), String(paramValue)),
+                value
+            );
+        }
+
+        return value;
+    }, [translations]);
+
+    const contextValue: LokalContextValue = {
+        locale,
+        setLocale,
+        locales,
+        t,
+        translations,
+        isLoading,
+    };
+
+    return (
+        <LokalContext.Provider value={contextValue}>
+            {children}
+        </LokalContext.Provider>
+    );
+}
+
+/**
+ * Hook to access the Lokal context
+ */
+export function useLokal(): LokalContextValue {
+    const context = useContext(LokalContext);
+
+    if (!context) {
+        throw new Error('useLokal must be used within a LokalProvider');
+    }
+
+    return context;
+}
+
+export default LokalContext;

package/src/index.ts

@@ -0,0 +1,7 @@
+// Main exports
+export { LokalProvider, useLokal } from './context/LokalContext';
+export type { LokalProviderProps, TranslateFunction, StorageInterface } from './context/LokalContext';
+export type { LokalContextValue } from './context/LokalContext';
+
+// Re-export types from lokal-core
+export type { LocaleData } from 'lokal-core';

package/src/types/lokal-core.d.ts

@@ -0,0 +1,127 @@
+declare module 'lokal-core' {
+    export class ASTParser {
+        constructor(options: {
+            filePath: string;
+            functionName?: string;
+            componentName?: string;
+        });
+        scanDirectory(dirPath: string): ScanResult;
+    }
+
+    export interface ExtractedString {
+        key: string;
+        value: string;
+        location?: {
+            file: string;
+            line: number;
+            column: number;
+        };
+    }
+
+    export interface ScanResult {
+        strings: ExtractedString[];
+        errors: string[];
+    }
+
+    export interface ScanOptions {
+        filePath: string;
+        functionName?: string;
+        componentName?: string;
+    }
+
+    export class ConfigLoader {
+        load(configPath?: string): Promise<LokalConfig>;
+        loadSync(configPath?: string): LokalConfig;
+    }
+
+    export interface LokalConfig {
+        sourceDir: string;
+        outputDir: string;
+        defaultLocale: string;
+        functionName: string;
+        componentName: string;
+        locales?: string[];
+        ai?: {
+            provider: 'openai' | 'gemini';
+            apiKey: string;
+            model?: string;
+        };
+    }
+
+    export const defaultConfig: LokalConfig;
+
+    export class FileStorage {
+        constructor(outputDir: string);
+        loadLocale(locale: string): LocaleFile | null;
+        saveLocale(locale: string, data: LocaleData): void;
+        mergeLocaleData(locale: string, newData: Record<string, string>): LocaleData;
+        getAvailableLocales(): string[];
+    }
+
+    export interface LocaleData {
+        [key: string]: string;
+    }
+
+    export interface LocaleFile {
+        locale: string;
+        data: LocaleData;
+    }
+
+    export class ContentHasher {
+        static hash(content: string): string;
+    }
+
+    export class AITranslator {
+        constructor(provider: TranslationProvider, options?: {
+            batchSize?: number;
+        });
+        translateBatch(request: TranslationBatch): Promise<TranslationResult[]>;
+        translateMissingKeys(
+            sourceData: Record<string, string>,
+            targetData: Record<string, string>,
+            sourceLocale: string,
+            targetLocale: string
+        ): Promise<Record<string, string>>;
+    }
+
+    export interface TranslationProvider {
+        translate(request: TranslationRequest): Promise<TranslationResult>;
+    }
+
+    export interface TranslationRequest {
+        text: string;
+        sourceLocale: string;
+        targetLocale: string;
+        context?: string;
+    }
+
+    export interface TranslationResult {
+        translatedText: string;
+        success: boolean;
+        error?: string;
+    }
+
+    export interface TranslationBatch {
+        items: TranslationRequest[];
+    }
+
+    export class OpenAIProvider implements TranslationProvider {
+        constructor(apiKey: string, options?: {
+            model?: string;
+            temperature?: number;
+        });
+        translate(request: TranslationRequest): Promise<TranslationResult>;
+    }
+
+    export class GeminiProvider implements TranslationProvider {
+        constructor(apiKey: string, options?: {
+            model?: string;
+            temperature?: number;
+        });
+        translate(request: TranslationRequest): Promise<TranslationResult>;
+    }
+
+    export class TranslationProviderFactory {
+        static create(provider: 'openai' | 'gemini', apiKey: string, model?: string): TranslationProvider;
+    }
+}

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "module": "ESNext",
+        "target": "ES2020",
+        "jsx": "react-jsx",
+        "lib": [
+            "ES2020",
+            "DOM",
+            "DOM.Iterable"
+        ]
+    },
+    "include": [
+        "src/**/*"
+    ],
+    "exclude": [
+        "node_modules",
+        "dist",
+        "**/*.test.ts"
+    ]
+}