{"_id":"@anshjos/trans","_rev":"6-6ade45f0b68e7ee4432ed2c42e070c3f","name":"@anshjos/trans","dist-tags":{"latest":"1.2.3"},"versions":{"1.0.0":{"name":"@anshjos/trans","version":"1.0.0","author":{"name":"R Ansh Joseph"},"license":"MIT","_id":"@anshjos/trans@1.0.0","maintainers":[{"name":"anshjos","email":"ranshjosrph@gmail.com"}],"dist":{"shasum":"5d19ad178b748a22c7f5d652c2cb34c3e6e4855c","tarball":"https://registry.npmjs.org/@anshjos/trans/-/trans-1.0.0.tgz","fileCount":4,"integrity":"sha512-M9eF4jNUlMX418/NyJW56BjNUVzBbdz0sci3PLO0csiZGpi9rvuYOJwdEB0cPRECdLLIxRNzouVo+Ax0pegj2Q==","signatures":[{"sig":"MEYCIQCGcA4D7ei+/fdu5TxO/VmpgXfg/8d5Lm16gUB9a5UtbAIhAIhlptqyMgbmksCWiVUYlEK4OrRY0iboNfnOuU63mirs","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26124},"main":"./src/index.js","type":"module","_npmUser":{"name":"anshjos","email":"ranshjosrph@gmail.com"},"_npmVersion":"11.0.0","description":"A powerful, automated translation system for React applications that extracts translatable text from your components and generates translations using AI models like Groq's Llama.","directories":{},"_nodeVersion":"20.18.0","dependencies":{"fast-glob":"^3.3.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/trans_1.0.0_1758514464774_0.9593271993277277","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@anshjos/trans","version":"1.0.1","author":{"name":"R Ansh Joseph"},"license":"MIT","_id":"@anshjos/trans@1.0.1","maintainers":[{"name":"anshjos","email":"ranshjosrph@gmail.com"}],"dist":{"shasum":"c3870facd507223859f9ccc8df35dd30448fe018","tarball":"https://registry.npmjs.org/@anshjos/trans/-/trans-1.0.1.tgz","fileCount":3,"integrity":"sha512-Y2PZDdstLswd2wb+HHBXn4qGgmE7dkNqyAQmPt7XdQ8kj9AVMgGeHnqIvzg/esaYD4CqdcCHyvL1qO1fk5fGHQ==","signatures":[{"sig":"MEQCIBYKTsgSkHoEfNo1VmwK2JVwLvRdYW/+/wS+2/EDz78rAiA72nhpmyXZKS6Ga9GTy9bdV28iZSYjvgQUEvQeMbswGg==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":26028},"main":"./src/index.js","type":"module","_npmUser":{"name":"anshjos","email":"ranshjosrph@gmail.com"},"_npmVersion":"11.0.0","description":"A powerful, automated translation system for React applications that extracts translatable text from your components and generates translations using AI models like Groq's Llama.","directories":{},"_nodeVersion":"20.18.0","dependencies":{"fast-glob":"^3.3.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/trans_1.0.1_1758517676797_0.36722352164232674","host":"s3://npm-registry-packages-npm-production"}},"1.2.0":{"name":"@anshjos/trans","version":"1.2.0","author":{"name":"R Ansh Joseph"},"license":"MIT","_id":"@anshjos/trans@1.2.0","maintainers":[{"name":"anshjos","email":"ranshjosrph@gmail.com"}],"dist":{"shasum":"64491c1987c51cade16c52c302b88df90c650fd4","tarball":"https://registry.npmjs.org/@anshjos/trans/-/trans-1.2.0.tgz","fileCount":3,"integrity":"sha512-tay9cGwGatjSWVW5iAcG83QgfJzEivN60zuCt5drL9+BUrQRSBDZjP2qADoD1QpLMbrTIAC8dmfYb2pxEZF9NQ==","signatures":[{"sig":"MEUCIQCaNNiUXhuhxzR3BpWmI24KrpNU+Co/tYCQ2Euc43UjswIgcoFCe57i86TQ0JfUIuJhW3hQADVeO9cKi3mVfRo93X4=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":57885},"main":"./src/index.js","type":"module","_npmUser":{"name":"anshjos","email":"ranshjosrph@gmail.com"},"_npmVersion":"11.0.0","description":"A powerful, production-ready automated translation system for React applications that extracts translatable text from your components and generates high-quality translations using AI models like Groq's Llama, OpenAI, and others.","directories":{},"_nodeVersion":"20.18.0","dependencies":{"fast-glob":"^3.3.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/trans_1.2.0_1758520913799_0.9148732151196521","host":"s3://npm-registry-packages-npm-production"}},"1.2.1":{"name":"@anshjos/trans","version":"1.2.1","author":{"name":"R Ansh Joseph"},"license":"MIT","_id":"@anshjos/trans@1.2.1","maintainers":[{"name":"anshjos","email":"ranshjosrph@gmail.com"}],"dist":{"shasum":"5bd4ba3cfae6614b3bcc45f25e9c7ebf7008e864","tarball":"https://registry.npmjs.org/@anshjos/trans/-/trans-1.2.1.tgz","fileCount":3,"integrity":"sha512-79AjO7I7aZJqJQ748oBhxAHIl1h9SRJMPra2BBAmOccj8zkJi2d2UTyLcbnGDZl2OLheQCmatPyJ2FfO50e7PA==","signatures":[{"sig":"MEQCICAGxnwmpNCfQKmUkG+hlaji1gYJ6hWmQo7pSMWwsVk2AiAV7TD25N/a4JBjXQ69WtQmEkCaoGLMblGlEoeZyc6f3g==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":39215},"main":"./src/index.js","type":"module","_npmUser":{"name":"anshjos","email":"ranshjosrph@gmail.com"},"_npmVersion":"11.0.0","description":"A powerful, production-ready automated translation system for React applications that extracts translatable text from your components and generates high-quality translations using AI models like Groq's Llama, OpenAI, and others.","directories":{},"_nodeVersion":"20.18.0","dependencies":{"fast-glob":"^3.3.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/trans_1.2.1_1758550292423_0.13718665167152233","host":"s3://npm-registry-packages-npm-production"}},"1.2.2":{"name":"@anshjos/trans","version":"1.2.2","author":{"name":"R Ansh Joseph"},"license":"MIT","_id":"@anshjos/trans@1.2.2","maintainers":[{"name":"anshjos","email":"ranshjosrph@gmail.com"}],"dist":{"shasum":"780e2b2fc23186c9be96bde171c8abb257b0c22f","tarball":"https://registry.npmjs.org/@anshjos/trans/-/trans-1.2.2.tgz","fileCount":3,"integrity":"sha512-EA24HPBMgbGP+DPkWuJ6mN3zS3P4qYWCR5ORwsQks2z5EwWsBXqqP6+IaTyQMd+mYYSu9mVI/qtXXSswgsPLWw==","signatures":[{"sig":"MEUCIBUvYnzms8hChyQO/qHSjEoKjiVjF7TkMeb8ogxvKDjuAiEA8r/6CVuQcRB8GNjkw797Z/aQXRAafIsWdt3v4NGIotk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":31190},"main":"./src/index.js","type":"module","_npmUser":{"name":"anshjos","email":"ranshjosrph@gmail.com"},"_npmVersion":"11.0.0","description":"A powerful Node.js library that automatically extracts translatable text from React applications and generates translations using AI, complete with React components for seamless integration.","directories":{},"_nodeVersion":"20.18.0","dependencies":{"fast-glob":"^3.3.3"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/trans_1.2.2_1758689405155_0.9015872907125508","host":"s3://npm-registry-packages-npm-production"}},"1.2.3":{"name":"@anshjos/trans","version":"1.2.3","description":"A powerful Node.js library that automatically extracts translatable text from React applications and generates translations using AI, complete with React components for seamless integration.","license":"MIT","author":{"name":"R Ansh Joseph"},"type":"module","main":"./src/index.js","dependencies":{"fast-glob":"^3.3.3"},"_id":"@anshjos/trans@1.2.3","_nodeVersion":"20.18.0","_npmVersion":"11.0.0","dist":{"integrity":"sha512-ussz7HcBjul3+9FlI9iz3ZobR8aU0rFS0Meu4I8LGJ9srkpZD3CLOBjwt6kc5DM/E/nD8/A2vy/inIlHzTzTrA==","shasum":"de47e7c32f0fa494e2020f711252823dba60d723","tarball":"https://registry.npmjs.org/@anshjos/trans/-/trans-1.2.3.tgz","fileCount":3,"unpackedSize":31134,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCS9seE6IvZPfOEsPCqgVKLJIi3DmXYYp2/beiZf7XbugIhANcYf5EteNzaYyiBCsGn1ukzbQ2wwOBoNDXJ4h6B02/D"}]},"_npmUser":{"name":"anshjos","email":"ranshjosrph@gmail.com"},"directories":{},"maintainers":[{"name":"anshjos","email":"ranshjosrph@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/trans_1.2.3_1758689529134_0.5892433215241768"},"_hasShrinkwrap":false}},"time":{"created":"2025-09-22T04:14:24.705Z","modified":"2025-09-24T04:52:09.542Z","1.0.0":"2025-09-22T04:14:24.949Z","1.0.1":"2025-09-22T05:07:56.995Z","1.2.0":"2025-09-22T06:01:53.983Z","1.2.1":"2025-09-22T14:11:32.595Z","1.2.2":"2025-09-24T04:50:05.333Z","1.2.3":"2025-09-24T04:52:09.310Z"},"author":{"name":"R Ansh Joseph"},"license":"MIT","description":"A powerful Node.js library that automatically extracts translatable text from React applications and generates translations using AI, complete with React components for seamless integration.","maintainers":[{"name":"anshjos","email":"ranshjosrph@gmail.com"}],"readme":"# TranslationBuilder Documentation\r\n\r\nA powerful Node.js library that automatically extracts translatable text from React applications and generates translations using AI, complete with React components for seamless integration.\r\n\r\n## π Features\r\n\r\n- **Automatic Text Extraction**: Scans React files for `` components and `t(\"...\")` function calls\r\n- **AI-Powered Translation**: Uses Groq API (or compatible OpenAI-style endpoints) for high-quality translations\r\n- **Smart Caching**: Caches translations to avoid redundant API calls\r\n- **Rate Limiting**: Built-in rate limiting to respect API quotas\r\n- **React Integration**: Generates ready-to-use React components\r\n- **Progress Tracking**: Beautiful progress bars and detailed statistics\r\n- **Multiple Language Support**: Supports 9+ languages out of the box\r\n- **Interpolation Support**: Handle dynamic content with variable substitution\r\n\r\n## π¦ Installation\r\n\r\n```bash\r\nnpm i @anshjos/trans\r\n# or\r\nyarn add @anshjos/trans\r\n```\r\n\r\n## π§ Configuration\r\n\r\n### Environment Setup\r\n\r\nCreate a `.env` file or set environment variables:\r\n\r\n```bash\r\nGROQ_API_KEY=your_groq_api_key_here\r\n```\r\n\r\n### Basic Configuration\r\n\r\n```javascript\r\nimport TranslationBuilder from '@anshjos/trans';\r\n\r\nconst config = {\r\n endpoint: \"https://api.groq.com/openai/v1/chat/completions\",\r\n apiKey: process.env.GROQ_API_KEY,\r\n model: \"llama3-8b-8192\",\r\n defaultLang: \"en\",\r\n supportedLang: [\"en\", \"es\", \"fr\", \"de\", \"it\", \"pt\", \"ja\", \"ko\", \"zh\"],\r\n rateLimitRPS: 5,\r\n outputDir: \"./src/Lang\",\r\n scanPaths: [\"./src/**/*.{jsx,tsx}\"],\r\n cacheFile: \"./translation_cache.json\",\r\n silent: false\r\n};\r\n```\r\n\r\n### Configuration Options\r\n\r\n| Option | Type | Default | Description |\r\n|--------|------|---------|-------------|\r\n| `endpoint` | string | Groq API URL | API endpoint for translations |\r\n| `apiKey` | string | \"\" | Your API key |\r\n| `model` | string | \"llama3-8b-8192\" | AI model to use |\r\n| `defaultLang` | string | \"en\" | Default/source language |\r\n| `supportedLang` | array | 9 languages | List of target languages |\r\n| `rateLimitRPS` | number | 5 | Requests per second limit |\r\n| `outputDir` | string | \"./src/Lang\" | Output directory for generated files |\r\n| `scanPaths` | array | [\"./src/**/*.{jsx,tsx}\"] | File patterns to scan |\r\n| `cacheFile` | string | \"./translation_cache.json\" | Cache file location |\r\n| `silent` | boolean | false | Suppress console output |\r\n\r\n## π― Usage\r\n\r\n### Basic Usage\r\n\r\n```javascript\r\nimport TranslationBuilder from '@anshjos/trans';\r\n\r\n// Initialize and run\r\nconst builder = TranslationBuilder.init({\r\n apiKey: process.env.GROQ_API_KEY,\r\n supportedLang: [\"en\", \"es\", \"fr\", \"de\"]\r\n});\r\n\r\nconst result = await builder.run();\r\n\r\nif (result.success) {\r\n console.log(`β Processed ${result.data.textsFound} texts`);\r\n} else {\r\n console.error(`β Error: ${result.message}`);\r\n}\r\n```\r\n\r\n### Advanced Usage\r\n\r\n```javascript\r\nconst builder = new TranslationBuilder()\r\n .updateConfig({\r\n apiKey: process.env.GROQ_API_KEY,\r\n outputDir: \"./locales\",\r\n rateLimitRPS: 10\r\n })\r\n .addLanguage(\"ru\")\r\n .addLanguage(\"pt-BR\")\r\n .removeLanguage(\"ko\");\r\n\r\n// Run the translation process\r\nconst result = await builder.run();\r\n```\r\n\r\n### Programmatic Configuration Updates\r\n\r\n```javascript\r\nconst builder = new TranslationBuilder(initialConfig);\r\n\r\n// Update configuration\r\nbuilder.updateConfig({ rateLimitRPS: 10 });\r\n\r\n// Add/remove languages\r\nbuilder.addLanguage(\"hi\");\r\nbuilder.removeLanguage(\"ja\");\r\n\r\n// Get current config\r\nconst currentConfig = builder.getConfig();\r\n```\r\n\r\n## π React Integration\r\n\r\n### In Your React Code\r\n\r\nMark translatable text using these patterns:\r\n\r\n```jsx\r\n// Using Trans component (recommended)\r\nimport Trans from './Lang/Trans';\r\n\r\nfunction MyComponent() {\r\n return (\r\n
\r\n \r\n \r\n \r\n
\r\n );\r\n}\r\n\r\n// Using t() function\r\nimport { useTranslation } from './Lang/Trans';\r\n\r\nfunction MyComponent() {\r\n const { t } = useTranslation('es');\r\n \r\n return (\r\n
\r\n
{t(\"Welcome to our app\")}
\r\n
{t(\"Hello {{name}}\", { name: \"MarΓa\" })}
\r\n
\r\n );\r\n}\r\n```\r\n\r\n### Generated Components\r\n\r\nAfter running the build, you'll get:\r\n\r\n#### `Trans.jsx` - Translation Component\r\n\r\n```jsx\r\n\r\n```\r\n\r\n**Props:**\r\n- `text` (string): Text to translate\r\n- `lang` (string): Target language code\r\n- `values` (object): Variables for interpolation\r\n- `as` (ElementType): HTML element to render as\r\n- `...props`: Additional props passed to the element\r\n\r\n#### `useTranslation` Hook\r\n\r\n```jsx\r\nconst { t } = useTranslation('fr');\r\nconst translated = t(\"Hello {{name}}\", { name: \"Pierre\" });\r\n```\r\n\r\n### Generated Files\r\n\r\n```\r\nsrc/Lang/\r\nβββ Trans.jsx # React component and hook\r\nβββ translation.jsx # Translation data\r\nβββ ../translation_cache.json # Cache file\r\n```\r\n\r\n## π Text Extraction Patterns\r\n\r\nThe library automatically finds translatable text using these patterns:\r\n\r\n### Trans Component Pattern\r\n```jsx\r\n\r\n\r\n\r\n\r\n```\r\n\r\n### Function Call Pattern\r\n```jsx\r\nt(\"Translate this\")\r\nt('Single quotes')\r\nt(`Template literal`)\r\n```\r\n\r\n## π Language Support\r\n\r\n### Supported Languages (Default)\r\n\r\n| Code | Language | Code | Language |\r\n|------|----------|------|----------|\r\n| `en` | English | `pt` | Portuguese |\r\n| `es` | Spanish | `ja` | Japanese |\r\n| `fr` | French | `ko` | Korean |\r\n| `de` | German | `zh` | Chinese |\r\n| `it` | Italian | | |\r\n\r\n### Adding Custom Languages\r\n\r\n```javascript\r\nconst builder = TranslationBuilder.init({\r\n supportedLang: [\"en\", \"hi\", \"ar\", \"ru\", \"th\"]\r\n});\r\n```\r\n\r\n## πΎ Caching System\r\n\r\nThe library uses intelligent caching to avoid redundant translations:\r\n\r\n- **Hex Key System**: Converts text to hex keys for efficient lookup\r\n- **Persistent Cache**: Saves translations to JSON file\r\n- **Smart Updates**: Only translates new or missing content\r\n- **Cache Validation**: Handles corrupted cache gracefully\r\n\r\n### Manual Cache Management\r\n\r\n```javascript\r\n// Clear cache by deleting the cache file\r\nimport fs from 'fs';\r\nfs.unlinkSync('./translation_cache.json');\r\n\r\n// Or configure different cache location\r\nconst builder = TranslationBuilder.init({\r\n cacheFile: \"./custom_cache.json\"\r\n});\r\n```\r\n\r\n## π§ Build Scripts\r\n\r\n### NPM Scripts\r\n\r\nAdd to your `package.json`:\r\n\r\n```json\r\n{\r\n \"scripts\": {\r\n \"translate\": \"node scripts/translate.js\",\r\n \"translate:prod\": \"NODE_ENV=production node scripts/translate.js\"\r\n }\r\n}\r\n```\r\n\r\n### Translation Script\r\n\r\nCreate `scripts/translate.js`:\r\n\r\n```javascript\r\nimport TranslationBuilder from '@anshjos/trans';\r\n\r\nconst config = {\r\n apiKey: process.env.GROQ_API_KEY,\r\n supportedLang: [\"en\", \"es\", \"fr\", \"de\", \"it\"],\r\n scanPaths: [\"./src/**/*.{jsx,tsx,js,ts}\"],\r\n outputDir: \"./src/i18n\",\r\n silent: process.env.NODE_ENV === 'production'\r\n};\r\n\r\nasync function main() {\r\n try {\r\n const result = await TranslationBuilder.init(config).run();\r\n \r\n if (result.success) {\r\n console.log(\"π Translation build completed!\");\r\n process.exit(0);\r\n } else {\r\n console.error(\"β Translation build failed:\", result.message);\r\n process.exit(1);\r\n }\r\n } catch (error) {\r\n console.error(\"π₯ Fatal error:\", error);\r\n process.exit(1);\r\n }\r\n}\r\n\r\nmain();\r\n```\r\n\r\n## π Statistics & Reporting\r\n\r\nThe library provides detailed statistics:\r\n\r\n```\r\nπ Translation Summary:\r\n β’ Output directory: /project/src/Lang\r\n β’ Unique texts: 45\r\n β’ Total translations: 180\r\n β’ Languages: en, es, fr, de\r\n\r\nπ Completeness by Language:\r\n β’ en: 100%\r\n β’ es: 95.6%\r\n β’ fr: 91.1%\r\n β’ de: 88.9%\r\n\r\nπ Generated Files:\r\n β’ src/Lang/Trans.jsx - React component\r\n β’ src/Lang/translation.jsx - Translation data\r\n β’ translation_cache.json - Translation cache\r\n```\r\n\r\n## π¨ Error Handling\r\n\r\n### Common Issues & Solutions\r\n\r\n#### API Key Issues\r\n```bash\r\nβ Missing required config: apiKey\r\n```\r\n**Solution**: Set your API key in environment variables or config.\r\n\r\n#### No Texts Found\r\n```bash\r\nβ οΈ No translatable texts found\r\n```\r\n**Solution**: Ensure your code contains `` or `t(\"...\")` patterns.\r\n\r\n#### Rate Limiting\r\n```bash\r\nHTTP 429: Rate limit exceeded\r\n```\r\n**Solution**: Reduce `rateLimitRPS` in configuration or upgrade your API plan.\r\n\r\n#### Translation Failures\r\n```bash\r\nβ Failed to translate \"text\" to es: HTTP 500\r\n```\r\n**Solution**: Check API status, try different model, or implement retry logic.\r\n\r\n### Error Handling in Code\r\n\r\n```javascript\r\nconst result = await builder.run();\r\n\r\nif (!result.success) {\r\n console.error(`Build failed: ${result.message}`);\r\n \r\n if (result.error) {\r\n console.error('Full error:', result.error);\r\n }\r\n \r\n // Handle specific error types\r\n if (result.message.includes('API key')) {\r\n console.log('π‘ Set your API key: export GROQ_API_KEY=\"your-key\"');\r\n }\r\n}\r\n```\r\n\r\n## π§ Advanced Configuration\r\n\r\n### Custom API Endpoints\r\n\r\n```javascript\r\n// Using OpenAI API\r\nconst builder = TranslationBuilder.init({\r\n endpoint: \"https://api.openai.com/v1/chat/completions\",\r\n apiKey: process.env.OPENAI_API_KEY,\r\n model: \"gpt-3.5-turbo\"\r\n});\r\n\r\n// Using local/custom endpoint\r\nconst builder = TranslationBuilder.init({\r\n endpoint: \"http://localhost:8080/v1/chat/completions\",\r\n model: \"custom-model\"\r\n});\r\n```\r\n\r\n### Custom Scan Patterns\r\n\r\n```javascript\r\nconst builder = TranslationBuilder.init({\r\n scanPaths: [\r\n \"./src/**/*.{jsx,tsx}\",\r\n \"./pages/**/*.{js,ts}\",\r\n \"./components/**/*.{jsx,tsx}\",\r\n \"!**/node_modules/**\",\r\n \"!**/build/**\"\r\n ]\r\n});\r\n```\r\n\r\n### Performance Tuning\r\n\r\n```javascript\r\nconst builder = TranslationBuilder.init({\r\n rateLimitRPS: 20, // Higher rate for faster builds\r\n model: \"llama3-70b-8192\" // Better model for quality\r\n});\r\n```\r\n\r\n## π¨ Interpolation & Dynamic Content\r\n\r\n### Template Syntax\r\n\r\nUse `{{variable}}` syntax for dynamic content:\r\n\r\n```jsx\r\n\r\n```\r\n\r\n### Advanced Interpolation\r\n\r\n```jsx\r\nconst { t } = useTranslation('es');\r\n\r\n// Simple interpolation\r\nt(\"Hello {{name}}\", { name: \"MarΓa\" });\r\n\r\n// Multiple variables\r\nt(\"{{user}} sent {{count}} files\", { \r\n user: \"Ana\", \r\n count: 3 \r\n});\r\n\r\n// Nested objects work too\r\nt(\"Welcome {{user.name}}\", { \r\n user: { name: \"Carlos\" } \r\n});\r\n```\r\n\r\n## π Development Workflow\r\n\r\n### 1. Development Phase\r\n```bash\r\n# Add translatable text to your components\r\n\r\n\r\n# Run translation build\r\nnpm run translate\r\n```\r\n\r\n### 2. Review Phase\r\n```bash\r\n# Check generated translations\r\ncat src/Lang/translation.jsx\r\n\r\n# Test in different languages\r\n\r\n```\r\n\r\n### 3. Production Phase\r\n```bash\r\n# Build with production settings\r\nNODE_ENV=production npm run translate\r\n\r\n# Deploy with generated files\r\n```\r\n\r\n## π Examples\r\n\r\n### Complete Example App\r\n\r\n```jsx\r\n// App.jsx\r\nimport React, { useState } from 'react';\r\nimport Trans, { useTranslation } from './Lang/Trans';\r\n\r\nfunction App() {\r\n const [language, setLanguage] = useState('en');\r\n const { t } = useTranslation(language);\r\n\r\n return (\r\n
\r\n );\r\n}\r\n\r\nexport default App;\r\n```\r\n\r\n## π€ Contributing\r\n\r\n1. Fork the repository\r\n2. Create a feature branch\r\n3. Add tests for new functionality\r\n4. Ensure all tests pass\r\n5. Submit a pull request\r\n\r\n## π License\r\n\r\nMIT License - see LICENSE file for details.\r\n\r\n## π Support\r\n\r\n- **Issues**: Report bugs on GitHub Issues\r\n- **Discussions**: Join GitHub Discussions\r\n- **Documentation**: Check the wiki for detailed guides\r\n- **API Reference**: See the full API documentation\r\n\r\n---\r\n\r\n**Made with β€οΈ for the React community**","readmeFilename":"readme.md"}