i18n - docs translations (#15721)
Created by Github action Co-authored-by: github-actions <github-actions@twenty.com>
This commit is contained in:
github-actions[bot]
committed by
GitHub
GitHub
parent
f740bac988
commit
4c4eeef5ae
@@ -0,0 +1,34 @@
|
||||
---
|
||||
title: Éditeur de Blocs
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Utilise un éditeur de texte riche basé sur des blocs de [BlockNote](https://www.blocknotejs.org/) pour permettre aux utilisateurs de modifier et de visualiser des blocs de contenu.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { useBlockNote } from "@blocknote/react";
|
||||
import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const BlockNoteEditor = useBlockNote();
|
||||
|
||||
return <BlockEditor editor={BlockNoteEditor} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ---------- | ----------------- | ---------------------------------------------------- |
|
||||
| éditeur | `BlockNoteEditor` | L'instance de l'éditeur de blocs ou sa configuration |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: Case à cocher
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Utilisé lorsqu'un utilisateur doit sélectionner plusieurs valeurs parmi plusieurs options.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Checkbox } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Checkbox
|
||||
checked={true}
|
||||
indeterminate={false}
|
||||
onChange={() => console.log("onChange function fired")}
|
||||
onCheckedChange={() => console.log("onCheckedChange function fired")}
|
||||
variant="primary"
|
||||
size="small"
|
||||
shape="squared"
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| coché | booléen | Indique si la case à cocher est cochée |
|
||||
| indéterminé | booléen | Indique si la case à cocher est dans un état indéterminé (ni cochée ni décochée) |
|
||||
| onChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état de la case à cocher change |
|
||||
| onCheckedChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état `coché` change |
|
||||
| variante | chaîne | Le style visuel de la variante de la boîte. Les options incluent : `primaire`, `secondaire` et `tertiaire` |
|
||||
| taille | chaîne | La taille de la case à cocher. Comporte deux options : `petit` et `grand` |
|
||||
| forme | chaîne | La forme de la case à cocher. Comporte deux options : `carrée` et `arrondie` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,73 @@
|
||||
---
|
||||
title: Schéma de couleurs
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Carte de Schéma de couleurs
|
||||
|
||||
Représente différents schémas de couleurs et est spécialement adapté aux thèmes clairs et sombres.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ColorSchemeCard } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ColorSchemeCard
|
||||
variant="Dark"
|
||||
selected={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description | Par défaut |
|
||||
| -------------------------- | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- | ---------- |
|
||||
| variante | chaîne | La variante du schéma de couleurs. Les options incluent `Sombre`, `Clair` et `Système`. | clair |
|
||||
| sélectionné | booléen | Si `vrai`, affiche une coche pour indiquer le schéma de couleurs sélectionné. | |
|
||||
| propriétés supplémentaires | `React.ComponentPropsWithoutRef<'div'>` | Propriétés standard de l'élément HTML `div`. | |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Sélecteur de Schéma de couleurs
|
||||
|
||||
Permet aux utilisateurs de choisir entre différents schémas de couleurs.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ColorSchemePicker } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <ColorSchemePicker
|
||||
value="Dark"
|
||||
onChange
|
||||
/>;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ---------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
|
||||
| valeur | `Schéma de couleurs` | Le schéma de couleurs actuellement sélectionné. |
|
||||
| onChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsqu'un utilisateur sélectionne un schéma de couleurs. |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,56 @@
|
||||
---
|
||||
title: Sélecteur d'icônes
|
||||
image: /images/user-guide/github/github-header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Un sélecteur d'icônes basé sur un menu déroulant qui permet aux utilisateurs de sélectionner une icône dans une liste.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import React, { useState } from "react";
|
||||
import { IconPicker } from "@/ui/input/components/IconPicker";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const [selectedIcon, setSelectedIcon] = useState("");
|
||||
const handleIconChange = ({ iconKey, Icon }) => {
|
||||
console.log("Selected Icon:", iconKey);
|
||||
setSelectedIcon(iconKey);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<IconPicker
|
||||
disabled={false}
|
||||
onChange={handleIconChange}
|
||||
selectedIconKey={selectedIcon}
|
||||
variant="primary"
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| désactivé | booléen | Désactive le sélecteur d'icônes si défini sur `true` |
|
||||
| onChange | fonction | La fonction de rappel déclenchée lorsque l'utilisateur sélectionne une icône. Elle reçoit un objet avec les propriétés `iconKey` et `Icon` |
|
||||
| selectedIconKey | chaîne | La clé de l'icône initialement sélectionnée |
|
||||
| onClickOutside | fonction | Fonction de rappel déclenchée lorsque l'utilisateur clique en dehors du menu déroulant |
|
||||
| onClose | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est fermé |
|
||||
| onOpen | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est ouvert |
|
||||
| variante | chaîne | La variante de style visuel de l'icône cliquable. Les options incluent : `primaire`, `secondaire` et `tertiaire` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
title: Radio
|
||||
image: /images/user-guide/create-workspace/workspace-cover.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/create-workspace/workspace-cover.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Utilisé lorsque les utilisateurs peuvent choisir une seule option parmi une série d'options.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Radio } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const handleRadioChange = (event) => {
|
||||
console.log("Radio button changed:", event.target.checked);
|
||||
};
|
||||
|
||||
const handleCheckedChange = (checked) => {
|
||||
console.log("Checked state changed:", checked);
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<Radio
|
||||
checked={true}
|
||||
value="Option 1"
|
||||
onChange={handleRadioChange}
|
||||
onCheckedChange={handleCheckedChange}
|
||||
size="large"
|
||||
disabled={false}
|
||||
labelPosition="right"
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| --------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
||||
| style | propriétés `React.CSS` | Styles inline supplémentaires pour le composant |
|
||||
| nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire |
|
||||
| coché | booléen | Indique si le bouton radio est coché |
|
||||
| valeur | chaîne | L'étiquette ou le texte associé au bouton radio |
|
||||
| onChange | fonction | La fonction appelée lorsque le bouton radio sélectionné est modifié |
|
||||
| onCheckedChange | fonction | La fonction appelée lorsque l'état `checked` du bouton radio change |
|
||||
| taille | chaîne | La taille du bouton radio. Les options incluent : `large` et `small` |
|
||||
| désactivé | booléen | Si `true`, le bouton radio est désactivé et ne peut pas être cliqué |
|
||||
| positionLabel | chaîne | La position du texte du label par rapport au bouton radio. A deux options : `left` et `right` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Groupe Radio
|
||||
|
||||
Regroupe ensemble des boutons radio associés.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import React, { useState } from "react";
|
||||
import { Radio, RadioGroup } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
const [selectedValue, setSelectedValue] = useState("Option 1");
|
||||
|
||||
const handleChange = (event) => {
|
||||
setSelectedValue(event.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<RadioGroup value={selectedValue} onChange={handleChange}>
|
||||
<Radio value="Option 1" />
|
||||
<Radio value="Option 2" />
|
||||
<Radio value="Option 3" />
|
||||
</RadioGroup>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ------------- | ----------------- | ------------------------------------------------------------------------------------------------------------ |
|
||||
| valeur | chaîne | La valeur du bouton radio actuellement sélectionné |
|
||||
| onChange | fonction | La fonction de rappel déclenchée lorsque le bouton radio est changé |
|
||||
| onValueChange | fonction | La fonction de rappel déclenchée lorsque la valeur sélectionnée dans le groupe change. |
|
||||
| enfants | `React.ReactNode` | Permet de passer des composants React (tels que Radio) en tant qu'enfants au Groupe Radio |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,54 @@
|
||||
---
|
||||
title: Sélectionner
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Permet aux utilisateurs de choisir une valeur dans une liste d'options prédéfinies.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from 'recoil';
|
||||
import { IconTwentyStar } from 'twenty-ui/display';
|
||||
|
||||
import { Select } from '@/ui/input/components/Select';
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<Select
|
||||
className
|
||||
disabled={false}
|
||||
label="Select an option"
|
||||
options={[
|
||||
{ value: 'option1', label: 'Option A', Icon: IconTwentyStar },
|
||||
{ value: 'option2', label: 'Option B', Icon: IconTwentyStar },
|
||||
]}
|
||||
value="option1"
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire |
|
||||
| désactivé | booléen | Lorsqu'il est réglé sur `true`, cela désactive l'interaction de l'utilisateur avec le composant. |
|
||||
| étiquette | chaîne | L'étiquette pour décrire la fonction du composant `Select`. |
|
||||
| onChange | fonction | La fonction appelée lorsque les valeurs sélectionnées changent. |
|
||||
| options | tableau | Représente les options disponibles pour le composant `Selected`. C'est un tableau d'objets où chaque objet possède une `valeur` (l'identifiant unique), un `label` (l'identifiant unique) et une icône optionnelle. |
|
||||
| valeur | chaîne | Représente la valeur actuellement sélectionnée. Elle doit correspondre à l'une des propriétés `valeur` dans le tableau `options`. |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,153 @@
|
||||
---
|
||||
title: Texte
|
||||
image: /images/user-guide/notes/notes_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/notes/notes_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Entrée de texte
|
||||
|
||||
Permet aux utilisateurs de saisir et de modifier du texte.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import { TextInput } from "@/ui/input/components/TextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleChange = (text) => {
|
||||
console.log("Input changed:", text);
|
||||
};
|
||||
|
||||
const handleKeyDown = (event) => {
|
||||
console.log("Key pressed:", event.key);
|
||||
};
|
||||
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<TextInput
|
||||
className
|
||||
label="Username"
|
||||
onChange={handleChange}
|
||||
fullWidth={false}
|
||||
disableHotkeys={false}
|
||||
error="Invalid username"
|
||||
onKeyDown={handleKeyDown}
|
||||
RightIcon={null}
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------------------- | -------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
| étiquette | chaîne | Représente l'étiquette de l'entrée |
|
||||
| onChange | fonction | La fonction appelée lorsque la valeur de l'entrée change |
|
||||
| largeurTotale | booléen | Indique si l'entrée doit occuper 100% de la largeur |
|
||||
| désactiverLesRaccourcis | booléen | Indique si les raccourcis sont activés pour l'entrée |
|
||||
| erreur | chaîne | Représente le message d'erreur à afficher. Lorsqu'il est fourni, il ajoute également une icône d'erreur sur le côté droit de l'entrée |
|
||||
| surToucheEnfoncée | fonction | Appelée lorsqu'une touche est enfoncée alors que le champ de saisie est focalisé. Reçoit un `React.KeyboardEvent` en tant qu'argument |
|
||||
| IcôneDroite | ComposantIcône | Un composant icône facultatif affiché sur le côté droit de l'entrée |
|
||||
|
||||
Le composant accepte également d'autres propriétés d'éléments d'entrée HTML.
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Entrée de texte à taille automatique
|
||||
|
||||
Composant d'entrée de texte qui ajuste automatiquement sa hauteur en fonction du contenu.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RecoilRoot } from "recoil";
|
||||
import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<RecoilRoot>
|
||||
<AutosizeTextInput
|
||||
onValidate={() => console.log("onValidate function fired")}
|
||||
minRows={1}
|
||||
placeholder="Write a comment"
|
||||
onFocus={() => console.log("onFocus function fired")}
|
||||
variant="icon"
|
||||
buttonTitle
|
||||
value="Task: "
|
||||
/>
|
||||
</RecoilRoot>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| -------------- | -------- | -------------------------------------------------------------------------------------------------------------- |
|
||||
| surValider | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'utilisateur valide l'entrée |
|
||||
| minLignes | nombre | Le nombre minimum de lignes pour la zone de texte |
|
||||
| espace réservé | chaîne | Le texte d'espace réservé que vous souhaitez afficher lorsque la zone de texte est vide |
|
||||
| surFocus | fonction | La fonction de rappel que vous souhaitez déclencher lorsque la zone de texte prend le focus |
|
||||
| variante | chaîne | La variante de l'entrée. Les options incluent : `défaut`, `icône`, et `bouton` |
|
||||
| titreBouton | chaîne | Le titre pour le bouton (applicable uniquement à la variante bouton) |
|
||||
| valeur | chaîne | La valeur initiale pour la zone de texte |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Zone de texte
|
||||
|
||||
Vous permet de créer des entrées de texte multiligne.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { TextArea } from "@/ui/input/components/TextArea";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<TextArea
|
||||
disabled={false}
|
||||
minRows={4}
|
||||
onChange={()=>console.log('On change function fired')}
|
||||
placeholder="Enter text here"
|
||||
value=""
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| -------------- | -------- | --------------------------------------------------------------------------- |
|
||||
| désactivé | booléen | Indique si la zone de texte est désactivée |
|
||||
| minLignes | nombre | Nombre minimum de lignes visibles pour la zone de texte. |
|
||||
| onChange | fonction | Fonction de rappel déclenchée lorsque le contenu de la zone de texte change |
|
||||
| espace réservé | chaîne | Texte de l'espace réservé affiché lorsque la zone de texte est vide |
|
||||
| valeur | chaîne | La valeur actuelle de la zone de texte |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
Reference in New Issue
Block a user