i18n - docs translations (#22413)

Created by Github action  <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22413?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a>  Co-authored-by: github-actions <github-actions@twenty.com>
2026-07-01 19:14:28 +02:00
parent d8cc81cb91
commit 15c0c3b773
25 changed files with 1525 additions and 0 deletions
@@ -0,0 +1,121 @@
+---
+title: Překlady
+description: Doručte svou aplikaci v několika jazycích — překládejte popisky manifestu a texty uživatelského rozhraní prostřednictvím jednoho katalogu locales.
+icon: language
+---
+
+Aplikace Twenty jsou psané v **angličtině**: řetězce ve vašem zdrojovém kódu a manifestu tvoří anglický zdrojový text, `en` je zdrojová locale, ze které překládáte, a jakákoli locale ponechaná bez překladu se na ni automaticky vrátí.
+
+Vaše aplikace má dva druhy přeložitelného textu a oba procházejí stejným
+katalogem `locales/`:
+
+* **Popisky manifestu** — názvy objektů a polí, názvy zobrazení, položky nabídky a
+  další řetězce deklarované v metadatech vaší aplikace.
+* **Řetězce front komponent** — text uživatelského rozhraní, který vykreslují vaše React front komponenty.
+
+Označíte přeložitelné řetězce, extrahujete je do katalogů pro jednotlivé jazyky,
+přeložíte tyto katalogy a build doručí správný jazyk pro
+aktuálního uživatele — bez dalšího zapojování.
+
+## Označování řetězců front komponent
+
+Importujte pomocné překladové funkce z `twenty-sdk/front-component`:
+
+```tsx
+import { Trans, t, msg, useTranslate } from 'twenty-sdk/front-component';
+
+const STATUSES = [
+  { id: 'draft', label: msg('Draft') },
+  { id: 'sent', label: msg('Sent') },
+];
+
+const Card = ({ count, name }: { count: number; name: string }) => {
+  const { t } = useTranslate();
+
+  return (
+    <section>
+      {/* Static text — reactive to the user's locale */}
+      <Trans>Loading postcard…</Trans>
+
+      {/* Disambiguate identical sources with a context */}
+      <Trans context="card-title">Untitled</Trans>
+
+      {/* Interpolation: pass values explicitly */}
+      <p>{t('Hi {name}', { name })}</p>
+      <p>{t('Saved {count} cards', { count })}</p>
+
+      {/* Resolve a lazily-declared descriptor */}
+      <ul>{STATUSES.map((s) => <li key={s.id}>{t(s.label)}</li>)}</ul>
+    </section>
+  );
+};
+```
+
+### Kdy co použít
+
+* **`<Trans>…</Trans>`** — statický text v JSX. Použijte props `message` a `values`
+  pro interpolaci (`<Trans message="Hi {name}" values={{ name }} />`);
+  interpolace přímo v potomcích není staticky extrahovatelná.
+* **`useTranslate().t`** — dynamické řetězce uvnitř komponenty. Znovu se vykreslí, když
+  uživatel přepne jazyk. Uvnitř renderu tomuto dávejte přednost.
+* **`t(...)`** (importované přímo) — okamžitý překlad použitelný **kdekoli**,
+  včetně obsluh událostí, pomocných funkcí a v modulovém rozsahu — nejen uvnitř renderu.
+* **`msg(...)`** — líný deskriptor pro řetězce deklarované jako data (konstanty,
+  konfigurace). Vyhodnoťte jej později pomocí `t(descriptor)`.
+
+### Kontext
+
+Předejte `context`, abyste odlišili identické zdrojové řetězce, které se překládají
+rozdílně:
+
+```tsx
+t({ message: 'Open', context: 'door' });
+t({ message: 'Open', context: 'window' });
+<Trans context="card-title">Untitled</Trans>
+```
+
+## Extrahování a překládání
+
+Spusťte příkaz pro extrakci z adresáře své aplikace:
+
+```bash
+twenty dev:translations-extract                  # collect strings into locales/en.json
+twenty dev:translations-extract --locale fr-FR   # also scaffold a target locale
+```
+
+Extrakce shromáždí jak popisky manifestu, tak řetězce `t()`/`msg()`/`\<Trans>`
+z vašeho zdrojového kódu front komponent do `locales/\<locale>.json`, kde jsou klíčem
+zdrojové řetězce. Doplňte překlady:
+
+```json
+// locales/fr-FR.json
+{
+  "Loading postcard…": "Chargement de la carte…",
+  "Hi {name}": "Bonjour {name}",
+  "Saved {count} cards": "{count} cartes enregistrées"
+}
+```
+
+Zástupné symboly jako `{name}` jsou nahrazeny za běhu — ponechejte je v
+překladu. Jakýkoli řetězec ponechaný prázdný spadne zpět na zdrojový text.
+
+## Jak to běží
+
+`twenty dev:build` zkompiluje katalogy a doručí správný jazyk pro
+aktuálního uživatele: popisky manifestu jsou vyhodnoceny na straně serveru a katalogy
+front komponent jsou zabudovány do každého balíčku komponent. Za běhu komponenta čte
+jazykovou verzi (locale) z vykonávacího kontextu (aktuální jazyk hostitele) a překládá
+každý řetězec podle svého katalogu, přičemž při chybějícím překladu spadne zpět na zdroj. Přepnutí jazyka v hostiteli znovu vykreslí řetězce `\<Trans>` a
+`useTranslate().t` v reálném čase.
+
+Protože katalogy jsou kompilovány v době buildu, aktualizace překladu znamená
+znovu spustit `twenty dev:build` (a znovu nasadit) stejně jako jakoukoli jinou změnu.
+
+<Note>
+Překlady jsou kompilovány příkazy `twenty dev:build` (a `twenty apply`). Nepřetržité sledování `twenty dev` zobrazuje zdrojové řetězce, takže lokalizovaný výstup
+otestujte pomocí jednorázového buildu.
+</Note>
+
+Potomci `<Trans>` s textem mohou být rozloženi na více řádků — prázdné znaky jsou zpracovány
+stejně, jako je zpracovává JSX, takže `<Trans>Welcome\n  back</Trans>` i extrahovaný
+klíč se oba stanou `Welcome back`.