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,125 @@
+---
+title: Traduções
+description: Publique seu aplicativo em vários idiomas — traduza rótulos do manifesto e strings da interface do usuário por meio de um único catálogo de localidades.
+icon: language
+---
+
+Os aplicativos Twenty são escritos em **inglês**: as strings no seu código-fonte e no manifesto
+são o texto-fonte em inglês, `en` é a localidade de origem a partir da qual você traduz, e
+qualquer localidade deixada sem tradução reverte para essa localidade.
+
+Seu aplicativo tem dois tipos de texto traduzível, e ambos passam pelo mesmo
+catálogo `locales/`:
+
+* **Rótulos do manifesto** — nomes de objetos e campos, títulos de exibição, itens de menu e
+  outras strings declaradas nos metadados do seu aplicativo.
+* **Front-component strings** — A interface do usuário que processa seus componentes frontais do React.
+
+Você marca as strings traduzíveis, extraa-as em catálogos por localidade,
+traduza os catálogos, e a compilação serve a linguagem certa para o usuário atual
+— sem asas extras.
+
+## Marcando strings front-component
+
+Importe os auxiliares de tradução de `vinte e 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>
+  );
+};
+```
+
+### Quando usar qual
+
+* **`<Trans>…</Trans>`** — texto estático em JSX. Use as propriedades `message` e`values`
+  para interpolação (`<Trans message="Hi {name}" values={{ name }} />`);
+  interpolar diretamente nos filhos não é estaticamente extracurável.
+* **`useTranslate().t`** — strings dinâmicas dentro de um componente. Rerenderiza quando o usuário
+  muda de linguagem. Prefere isso dentro de renderização.
+* **`t(...)`** (importado diretamente) — tradução ávida utilizável **em qualquer lugar**,
+  incluindo manipuladores de eventos, auxiliares e escopo de módulo — não apenas dentro de renderização.
+* **`msg(...)`** — um descritor preguiçoso para frases declaradas como dados (constantes,
+  config). Resolva-o mais tarde com `t(descriptor)`.
+
+### Contexto
+
+Passe `context` para desambiguar sequências de caracteres de origem idênticas que traduzem
+de forma diferente:
+
+```tsx
+t({ message: 'Open', context: 'door' });
+t({ message: 'Open', context: 'window' });
+<Trans context="card-title">Untitled</Trans>
+```
+
+## Extraindo e traduzindo
+
+Execute o comando extracto a partir do diretório do seu aplicativo:
+
+```bash
+twenty dev:translations-extract                  # collect strings into locales/en.json
+twenty dev:translations-extract --locale fr-FR   # also scaffold a target locale
+```
+
+Extração coleta as duas strings do seu manifesto e `t()`/`msg()`/`\<Trans>
+do código do seu front-component em `locales/\<locale>. son\`, chave por
+string de origem. Preencha as traduções:
+
+```json
+// locales/fr-FR.json
+{
+  "Loading postcard…": "Chargement de la carte…",
+  "Hi {name}": "Bonjour {name}",
+  "Saved {count} cards": "{count} cartes enregistrées"
+}
+```
+
+Espaços reservados como `{name}` são substituídos no tempo de execução — mantenha-os na tradução
+. Qualquer cadeia de caracteres deixada vazia retorna ao texto de origem.
+
+## Como ele funciona
+
+`twenty dev:build` compila os catálogos e fornece o idioma correto para o
+usuário atual: os rótulos do manifesto são resolvidos no lado do servidor e os catálogos de componentes de front-end
+são incorporados em cada pacote de componente. No tempo de execução, um componente lê a localidade
+de seu contexto de execução (o idioma atual do host) e resolve
+cada seqüência de caracteres contra seu catálogo, voltando à fonte quando uma tradução
+estiver faltando. Mudar idioma no host renderiza novamente as strings `\<Trans>e
+`useTranslate().t\` ao vivo.
+
+Como os catálogos são compilados no tempo de construção, atualizar uma tradução significa
+reexecutar `vinte dev:build` (e redistribuir), o mesmo que qualquer outra mudança.
+
+<Note>
+As traduções são compiladas por `vinte dev:build` (e `vinte aplicam`). O relógio
+contínuo `vinte dev` mostra strings de origem, então teste saída localizada
+com uma compilação única.
+</Note>
+
+`<Trans>` Crianças de texto podem span várias linhas — espaço em branco é recolhido o
+da mesma forma que JSX o colapsa, so `<Trans>Bem-vindo\n  de volta</Trans>` e a chave extraída
+ambas se tornam `Bem-vindo de volta`.