استخراج مفاتيح i18n باستخدام الذكاء الاصطناعي

npx lingo.dev@latest init

mkdir -p src/locales
echo '{}' > src/locales/en.json

{
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "json": {
      "include": ["src/locales/[locale].json"]
    }
  }
}

function WelcomeCard() {
  return (
    <div className="card">
      <h2>Welcome to our platform</h2>
      <p>Start your journey with us today</p>
      <button>Get started</button>
    </div>
  );
}

Extract all hardcoded strings from React components and:

1. Replace with react-intl:
   - Use useIntl hook for dynamic strings
   - Use FormattedMessage for static text
   - Add ICU formatting for variables ({name}) and plurals ({count})

2. Structure translation keys:
   - Group by component hierarchy (components.*, pages.*)
   - Use descriptive, nested keys (header.nav.home)
   - Match component structure in JSON

3. Update locales:
   - Add all keys to src/locales/en.json
   - Maintain consistent naming across app

import { useIntl } from "react-intl";

function WelcomeCard() {
  const intl = useIntl();

  return (
    <div className="card">
      <h2>{intl.formatMessage({ id: "welcome.title" })}</h2>
      <p>{intl.formatMessage({ id: "welcome.description" })}</p>
      <button>{intl.formatMessage({ id: "welcome.getStarted" })}</button>
    </div>
  );
}

{
  "welcome.title": "Welcome to our platform",
  "welcome.description": "Start your journey with us today",
  "welcome.getStarted": "Get started"
}

npx lingo.dev@latest run

src/locales/
  en.json    (source with extracted keys)
  es.json    (Spanish translations)
  fr.json    (French translations)
  de.json    (German translations)

npx lingo.dev@latest run --frozen

// Switch locale in your app to verify translations work
<IntlProvider locale="es" messages={spanishMessages}>
  <WelcomeCard />
</IntlProvider>