i18n - docs translations (#16779)

Created by Github action --------- Co-authored-by: github-actions <github-actions@twenty.com>
2025-12-23 17:06:38 +01:00
parent 1bc344c6fa
commit e3757f300a
1080 changed files with 89730 additions and 9944 deletions
@@ -26,7 +26,7 @@ class Resolver {
  }
 }

-// async-WorKer
+//async worker
 class CustomWorker {
  constructor(@Inject(MESSAGE_QUEUES.custom) private queue: MessageQueueService) {
    this.initWorker();
@@ -18,21 +18,21 @@ Es ist eine gute Praxis, so viele Atome zu erstellen, wie Sie benötigen, um Ihr

 ```tsx
 export const myAtomState = atom({
- key: 'myAtomState',
- default: 'Standardwert',
+  key: 'myAtomState',
+  default: 'default value',
 });

 export const MyComponent = () => {
- const [myAtom, setMyAtom] = useRecoilState(myAtomState);
+  const [myAtom, setMyAtom] = useRecoilState(myAtomState);

- return (
- <div>
- <input
- value={myAtom}
- onChange={(e) => setMyAtom(e.target.value)}
- />
- </div>
- );
+  return (
+    <div>
+      <input
+        value={myAtom}
+        onChange={(e) => setMyAtom(e.target.value)}
+      />
+    </div>
+  );
 }
 ```

@@ -40,7 +40,7 @@ export const MyComponent = () => {

 Vermeiden Sie die Verwendung von `useRef`, um den Zustand zu speichern.

-Wenn Sie den Zustand speichern möchten, sollten Sie `useState` oder `useRecoilState` verwenden.
+If you want to store state, you should use `useState` or `useRecoilState`.

 Sehen Sie sich [an, wie Re-Renderings verwaltet werden können](#managing-re-renders), falls Sie das Gefühl haben, dass Sie `useRef` benötigen, um einige Re-Renderings zu verhindern.

@@ -56,23 +56,23 @@ Beachten Sie, dass Sie **immer** Re-Renderings vermeiden können, indem Sie dere

 Das Vermeiden von Re-Renderings in neuen Funktionen wird jetzt erleichtert, indem sie auf Root-Ebene eliminiert werden.

-Die `PageChangeEffect`-Sidecar-Komponente enthält nur einen `useEffect`-Hook, der die gesamte Logik für den Seitenwechsel enthält.
+The `PageChangeEffect` sidecar component contains just one `useEffect` that holds all the logic to execute on a page change.

 Auf diese Weise wissen Sie, dass es nur einen Ort gibt, der ein Re-Rendering auslösen kann.

-### Denken Sie immer zweimal nach, bevor Sie `useEffect` in Ihre Codebasis aufnehmen.
+### Always think twice before adding `useEffect` in your codebase

-Re-Renderings werden oft durch unnötige `useEffect`-Verwendungen verursacht.
+Re-renders are often caused by unnecessary `useEffect`.

-Sie sollten überlegen, ob Sie `useEffect` benötigen oder ob Sie die Logik in eine Event-Handler-Funktion verschieben können.
+You should think whether you need `useEffect`, or if you can move the logic in a event handler function.

-Es ist in der Regel einfach, die Logik in eine `handleClick` oder `handleChange`-Funktion zu verschieben.
+You'll find it generally easy to move the logic in a `handleClick` or `handleChange` function.

 Sie können sie auch in Bibliotheken wie Apollo finden: `onCompleted`, `onError`, usw.

-### Verwenden Sie eine Geschwisterkomponente, um `useEffect`- oder Datenabruf-Logik auszulagern.
+### Use a sibling component to extract `useEffect` or data fetching logic

-Wenn Sie das Gefühl haben, Ihrer Root-Komponente einen `useEffect` hinzufügen zu müssen, sollten Sie erwägen, ihn in eine Sidecar-Komponente auszulagern.
+If you feel like you need to add a `useEffect` in your root component, you should consider extracting it in a sidecar component.

 Dasselbe können Sie auch für die Datenabruflogik mit Apollo-Hooks anwenden.

@@ -187,16 +187,16 @@ const [email, setEmail] = useState('');
 Ereignis-Handler-Namen sollten mit `handle` beginnen, während `on` als Präfix dient, um Ereignisse in Komponenten-Props zu benennen.

 ```tsx
-// ❌ Schlecht
+// ❌ Bad
 const onEmailChange = (val: string) => {
- // ...
+  // ...
 };
 ```

 ```tsx
-// ✅ Gut
+// ✅ Good
 const handleEmailChange = (val: string) => {
- // ...
+  // ...
 };
 ```

@@ -210,24 +210,24 @@ Betrachten Sie die unten definierte `EmailField`-Komponente:

 ```tsx
 type EmailFieldProps = {
- value: string;
- disabled?: boolean;
+  value: string;
+  disabled?: boolean;
 };

 const EmailField = ({ value, disabled = false }: EmailFieldProps) => (
- <TextInput value={value} disabled={disabled} fullWidth />
+  <TextInput value={value} disabled={disabled} fullWidth />
 );
 ```

 **Verwendung**

 ```tsx
-// ❌ Schlecht, den gleichen Wert wie den Standardwert übergeben, fügt keinen Wert hinzu
+// ❌ Bad, passing in the same value as the default value adds no value
 const Form = () => <EmailField value="username@email.com" disabled={false} />;
 ```

 ```tsx
-// ✅ Gut, nimmt den Standardwert an
+// ✅ Good, assumes the default value
 const Form = () => <EmailField value="username@email.com" />;
 ```

@@ -242,13 +242,13 @@ const SomeParentComponent = () => <MyComponent Icon={MyIcon} />;

 // In MyComponent
 const MyComponent = ({ MyIcon }: { MyIcon: IconComponent }) => {
- const theme = useTheme();
+  const theme = useTheme();

- return (
- <div>
- <MyIcon size={theme.icon.size.md}>
- </div>
- )
+  return (
+    <div>
+      <MyIcon size={theme.icon.size.md}>
+    </div>
+  )
 };
 ```

@@ -274,28 +274,28 @@ Beim Importieren sollten Sie die vorgesehenen Aliase anstelle der vollständigen

 ```js
 {
- alias: {
- "~": path.resolve(__dirname, "src"),
- "@": path.resolve(__dirname, "src/modules"),
- "@testing": path.resolve(__dirname, "src/testing"),
- },
+  alias: {
+    "~": path.resolve(__dirname, "src"),
+    "@": path.resolve(__dirname, "src/modules"),
+    "@testing": path.resolve(__dirname, "src/testing"),
+  },
 }
 ```

 **Verwendung**

 ```tsx
-// ❌ Schlecht, gibt den vollständigen relativen Pfad an
+// ❌ Bad, specifies the entire relative path
 import {
- CatalogDecorator
+  CatalogDecorator
 } from '../../../../../testing/decorators/CatalogDecorator';
 import {
- ComponentDecorator
+  ComponentDecorator
 } from '../../../../../testing/decorators/ComponentDecorator';
 ```

 ```tsx
-// ✅ Gut, nutzt die vorgesehenen Aliase
+// ✅ Good, utilises the designated aliases
 import { CatalogDecorator } from '~/testing/decorators/CatalogDecorator';
 import { ComponentDecorator } from 'twenty-ui/testing';
 ```
@@ -306,16 +306,16 @@ import { ComponentDecorator } from 'twenty-ui/testing';

 ```js
 const validationSchema = z
- .object({
- exist: z.boolean(),
- email: z
- .string()
- .email('Email muss eine gültige E-Mail sein'),
- password: z
- .string()
- .regex(PASSWORD_REGEX, 'Passwort muss mindestens 8 Zeichen enthalten'),
- })
- .required();
+  .object({
+    exist: z.boolean(),
+    email: z
+      .string()
+      .email('Email must be a valid email'),
+    password: z
+      .string()
+      .regex(PASSWORD_REGEX, 'Password must contain at least 8 characters'),
+  })
+  .required();

 type Form = z.infer<typeof validationSchema>;
 ```
@@ -73,7 +73,7 @@ Das Projekt hat einen sauberen und einfachen Stack mit minimalem Boilerplate-Cod

 [React Router](https://reactrouter.com/) übernimmt das Routing.

-Um unnötige [Re-Renders](/l/de/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) zu vermeiden, befindet sich die gesamte Routing-Logik in einem `useEffect` in `PageChangeEffect`.
+To avoid unnecessary [re-renders](/l/de/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) all the routing logic is in a `useEffect` in `PageChangeEffect`.

 ### Zustandsverwaltung

@@ -45,29 +45,29 @@ const PageListeningEnter = () => {
    goBackToPreviousHotkeyScope,
  } = usePreviousHotkeyScope();

-  // 1. Setze den Tastenkombinationsbereich in einem useEffect
+  // 1. Set the hotkey scope in a useEffect
  useEffect(() => {
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleEnterPage,
    );

-    // Zurückkehren zum vorherigen Tastenkombinationsbereich, wenn die Komponente entfernt wird
+    // Revert to the previous hotkey scope when the component is unmounted
    return () => {
      goBackToPreviousHotkeyScope();
    };
  }, [goBackToPreviousHotkeyScope, setHotkeyScopeAndMemorizePreviousScope]);

-  // 2. Verwenden Sie den useScopedHotkeys Hook
+  // 2. Use the useScopedHotkeys hook
  useScopedHotkeys(
    Key.Enter,
    () => {
-      // Eine Logik, die auf dieser Seite ausgeführt wird, wenn der Benutzer Enter drückt
+      // Some logic executed on this page when the user presses Enter
      // ...
    },
    ExampleHotkeyScopes.ExampleEnterPage,
  );

-  return <div>Meine Seite, die auf Enter hört</div>;
+  return <div>My page that listens for Enter</div>;
 };
 ```

@@ -87,7 +87,7 @@ const ExamplePageWithModal = () => {
  } = usePreviousHotkeyScope();

  const handleOpenModalClick = () => {
-    // 1. Setze den Tastenkombinationsbereich, wenn der Benutzer das Modal öffnet
+    // 1. Set the hotkey scope when user opens the modal
    setShowModal(true);
    setHotkeyScopeAndMemorizePreviousScope(
      ExampleHotkeyScopes.ExampleModal,
@@ -95,14 +95,14 @@ const ExamplePageWithModal = () => {
  };

  const handleModalClose = () => {
-    // 1. Zurückkehren zum vorherigen Tastenkombinationsbereich, wenn das Modal geschlossen wird
+    // 1. Revert to the previous hotkey scope when the modal is closed
    setShowModal(false);
    goBackToPreviousHotkeyScope();
  };

  return <div>
-    <h1>Meine Seite mit einem Modal</h1>
-    <button onClick={handleOpenModalClick}>Modal öffnen</button>
+    <h1>My page with a modal</h1>
+    <button onClick={handleOpenModalClick}>Open modal</button>
    {showModal && <MyModalComponent onClose={handleModalClose} />}
  </div>;
 };
@@ -112,9 +112,9 @@ Dann in der Modalkomponente:

 ```tsx
 const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
-  // 2. Verwenden Sie den useScopedHotkeys Hook, um auf Escape zu hören.
-  // Beachten Sie, dass Escape eine gängige Tastenkombination ist, die von vielen anderen Komponenten verwendet werden könnte
-  // Daher ist es wichtig, einen Tastenkombinationsbereich zu verwenden, um Konflikte zu vermeiden
+  // 2. Use the useScopedHotkeys hook to listen for Escape.
+  // Note that escape is a common hotkey that could be used by many other components
+  // So it's important to use a hotkey scope to avoid conflicts
  useScopedHotkeys(
    Key.Escape,
    () => {
@@ -123,13 +123,13 @@ const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => {
    ExampleHotkeyScopes.ExampleModal,
  );

-  return <div>Meine Modalkomponente</div>;
+  return <div>My modal component</div>;
 };
 ```

-Es ist wichtig, dieses Muster zu verwenden, wenn Sie sich nicht sicher sind, ob das einfache Benutzen eines useEffect bei Ein-/Ausbindung ausreicht, um Konflikte zu vermeiden.
+It's important to use this pattern when you're not sure that just using a useEffect with mount/unmount will be enough to avoid conflicts.

-Diese Konflikte können schwer zu debuggen sein und treten möglicherweise häufiger auf, als man denkt, mit useEffects.
+Those conflicts can be hard to debug, and it might happen more often than not with useEffects.

 ## Was ist ein Tastenkombinationsbereich?

@@ -21,16 +21,16 @@ Verwenden Sie immer TSX-Funktionskomponenten.
 Vermeiden Sie `import` mit `const`, da es schwieriger zu lesen und schwerer mit Code-Vervollständigung zu importieren ist.

 ```tsx
-// ❌ Schlecht, schwerer zu lesen, schwerer zu importieren mit Code-Vervollständigung
-const MeineKomponente = () => {
-  return <div>Hallo Welt</div>;
+// ❌ Bad, harder to read, harder to import with code completion
+const MyComponent = () => {
+  return <div>Hello World</div>;
 };

-export default MeineKomponente;
+export default MyComponent;

-// ✅ Gut, leicht zu lesen, leicht zu importieren mit Code-Vervollständigung
-export function MeineKomponente() {
-  return <div>Hallo Welt</div>;
+// ✅ Good, easy to read, easy to import with code completion
+export function MyComponent() {
+  return <div>Hello World</div>;
 };
 ```

@@ -41,26 +41,27 @@ Erstellen Sie den Typ der Eigenschaften (props) und nennen Sie ihn `(ComponentNa
 Verwenden Sie Destrukturierung der Props.

 ```tsx
-// ❌ Schlecht, ohne Typ
-export const MeineKomponente = (props) => <div>Hallo {props.name}</div>;
+// ❌ Bad, no type
+export const MyComponent = (props) => <div>Hello {props.name}</div>;

-// ✅ Gut, mit Typ
-type MeineKomponenteProps = {
+// ✅ Good, type
+type MyComponentProps = {
  name: string;
 };

-export const MeineKomponente = ({ name }: MeineKomponenteProps) => <div>Hallo {name}</div>;
+export const MyComponent = ({ name }: MyComponentProps) => <div>Hello {name}</div>;
 ```

 #### Vermeiden Sie die Verwendung von `React.FC` oder `React.FunctionComponent`, um Prop-Typen zu definieren

 ```tsx
-/* ❌ - Schlecht, definiert die Komponententyp-Anmerkungen mit `FC`
- *    - Mit `React.FC` akzeptiert die Komponente implizit ein `children`-Prop,
- *      selbst wenn es nicht im Prop-Typ definiert ist. Dies ist nicht immer gewünscht,
- *      insbesondere wenn die Komponente nicht beabsichtigt, Kinder zu rendern.
+/* ❌ - Bad, defines the component type annotations with `FC`
+ *    - With `React.FC`, the component implicitly accepts a `children` prop
+ *      even if it's not defined in the prop type. This might not always be
+ *      desirable, especially if the component doesn't intend to render
+ *      children.
 */
-const EmailFeld: React.FC<{
+const EmailField: React.FC<{
  value: string;
 }> = ({ value }) => <TextInput value={value} disabled fullWidth />;
 ```
@@ -85,10 +86,10 @@ const EmailField = ({ value }: EmailFieldProps) => (
 Vermeiden Sie das Propspreading einzelner Variablen in JSX-Elementen, wie `{...props}`. Diese Praxis führt oft zu weniger lesbarem und schwer wartbarem Code, da unklar ist, welche Props die Komponente erhält.

 ```tsx
-/* ❌ - Schlecht, spreadet ein einzelnes Variablen-Prop in die darunterliegende Komponente
+/* ❌ - Bad, spreads a single variable prop into the underlying component
 */
-const MeineKomponente = (props: EigeneProps) => {
-  return <AndereKomponente {...props} />;
+const MyComponent = (props: OwnProps) => {
+  return <OtherComponent {...props} />;
 }
 ```

@@ -136,13 +137,13 @@ onClick?.();
 Verwenden Sie immer `type` anstelle von `interface`, da sie fast immer überlappen und `type` flexibler ist.

 ```tsx
-// ❌ Schlecht
-interface MeinInterface {
+// ❌ Bad
+interface MyInterface {
  name: string;
 }

-// ✅ Gut
-type MeinTyp = {
+// ✅ Good
+type MyType = {
  name: string;
 };
 ```
@@ -154,14 +155,14 @@ type MeinTyp = {
 Warum TypeScript empfiehlt, Enums zu vermeiden, sehen Sie [hier](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#enums).

 ```tsx
-// ❌ Schlecht, verwendet ein Enum
-enum Farbe {
-  Rot = "red",
-  Grün = "green",
-  Blau = "blue",
+// ❌ Bad, utilizes an enum
+enum Color {
+  Red = "red",
+  Green = "green",
+  Blue = "blue",
 }

-let farbe = Farbe.Rot;
+let color = Color.Red;
 ```

 ```tsx
@@ -262,13 +263,13 @@ const StyledButton = styled.button`
 Vermeiden Sie Typ-Importe. Um diesen Standard durchzusetzen, überprüft eine ESLint-Regel alle Typ-Importe und meldet sie. Dies trägt zur Konsistenz und Lesbarkeit des TypeScript-Codes bei.

 ```tsx
-// ❌ Schlecht
+// ❌ Bad
 import { type Meta, type StoryObj } from '@storybook/react';

-// ❌ Schlecht
+// ❌ Bad
 import type { Meta, StoryObj } from '@storybook/react';

-// ✅ Gut
+// ✅ Good
 import { Meta, StoryObj } from '@storybook/react';
 ```