From 4c4eeef5aedebead3fef3e010b2cc0bbf02bbdf1 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Sat, 8 Nov 2025 13:22:29 +0100 Subject: [PATCH] i18n - docs translations (#15721) Created by Github action Co-authored-by: github-actions --- .../developers/backend-development/queue.mdx | 47 ++ .../twenty-docs/fr/developers/local-setup.mdx | 331 +++++++++++++ .../fr/developers/self-hosting/setup.mdx | 251 ++++++++++ .../self-hosting/troubleshooting.mdx | 226 +++++++++ .../fr/twenty-ui/display/app-tooltip.mdx | 88 ++++ .../twenty-docs/fr/twenty-ui/display/chip.mdx | 148 ++++++ packages/twenty-docs/fr/twenty-ui/input.mdx | 8 + .../fr/twenty-ui/input/block-editor.mdx | 34 ++ .../fr/twenty-ui/input/checkbox.mdx | 47 ++ .../fr/twenty-ui/input/color-scheme.mdx | 73 +++ .../fr/twenty-ui/input/icon-picker.mdx | 56 +++ .../twenty-docs/fr/twenty-ui/input/radio.mdx | 104 ++++ .../twenty-docs/fr/twenty-ui/input/select.mdx | 54 +++ .../twenty-docs/fr/twenty-ui/input/text.mdx | 153 ++++++ .../twenty-docs/fr/twenty-ui/navigation.mdx | 8 + .../fr/twenty-ui/navigation/breadcrumb.mdx | 44 ++ .../fr/twenty-ui/navigation/links.mdx | 168 +++++++ .../fr/twenty-ui/navigation/menu-item.mdx | 458 ++++++++++++++++++ .../fr/twenty-ui/navigation/step-bar.mdx | 38 ++ .../twenty-docs/fr/twenty-ui/progress-bar.mdx | 77 +++ .../user-guide/data-model/data-model-faq.mdx | 17 +- .../getting-started/getting-around-twenty.mdx | 4 +- .../migrating-from-other-crms.mdx | 6 +- .../pricing/billing-and-pricing-faq.mdx | 6 +- .../fr/user-guide/settings/settings-faq.mdx | 14 +- .../workflows/workflow-features.mdx | 6 +- .../workflows/workflow-troubleshooting.mdx | 4 +- 27 files changed, 2432 insertions(+), 38 deletions(-) create mode 100644 packages/twenty-docs/fr/developers/backend-development/queue.mdx create mode 100644 packages/twenty-docs/fr/developers/local-setup.mdx create mode 100644 packages/twenty-docs/fr/developers/self-hosting/setup.mdx create mode 100644 packages/twenty-docs/fr/developers/self-hosting/troubleshooting.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/display/app-tooltip.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/display/chip.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/input.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/input/block-editor.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/input/checkbox.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/input/color-scheme.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/input/icon-picker.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/input/radio.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/input/select.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/input/text.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/navigation.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/navigation/breadcrumb.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/navigation/links.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/navigation/menu-item.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/navigation/step-bar.mdx create mode 100644 packages/twenty-docs/fr/twenty-ui/progress-bar.mdx diff --git a/packages/twenty-docs/fr/developers/backend-development/queue.mdx b/packages/twenty-docs/fr/developers/backend-development/queue.mdx new file mode 100644 index 00000000000..bb863db906a --- /dev/null +++ b/packages/twenty-docs/fr/developers/backend-development/queue.mdx @@ -0,0 +1,47 @@ +--- +title: File d'attente de messages +image: /images/user-guide/emails/emails_header.png +--- + + + Header + + +Les files d'attente facilitent les opérations asynchrones. Elles peuvent être utilisées pour effectuer des tâches de fond telles que l'envoi d'un e-mail de bienvenue lors de l'enregistrement. +Chaque cas d'utilisation aura sa propre classe de file d'attente étendue à partir de `MessageQueueServiceBase`. + +Actuellement, nous ne supportons que `bull-mq`[bull-mq](https://bullmq.io/) comme pilote de file d'attente. + +## Étapes pour créer et utiliser une nouvelle file d'attente + +1. Ajoutez un nom de file d'attente pour votre nouvelle file sous l'énumération `MESSAGE_QUEUES`. +2. Fournissez l'implémentation de la fabrique de la file d'attente avec le nom de la file comme dépendance. +3. Injectez la file d'attente que vous avez créée dans le module/service requis en utilisant le nom de la file comme dépendance. +4. Ajouter une classe de travailleur avec injection basée sur un jeton comme le producteur. + +### Exemple d'utilisation + +```ts +class Resolver { + constructor(@Inject(MESSAGE_QUEUES.custom) private queue: MessageQueueService) {} + + async onSomeAction() { + //business logic + await this.queue.add(someData); + } +} + +//async worker +class CustomWorker { + constructor(@Inject(MESSAGE_QUEUES.custom) private queue: MessageQueueService) { + this.initWorker(); + } + + async initWorker() { + await this.queue.work(async ({ id, data }) => { + //worker logic + }); + } +} +``` + diff --git a/packages/twenty-docs/fr/developers/local-setup.mdx b/packages/twenty-docs/fr/developers/local-setup.mdx new file mode 100644 index 00000000000..c52ccf2a2a2 --- /dev/null +++ b/packages/twenty-docs/fr/developers/local-setup.mdx @@ -0,0 +1,331 @@ +--- +title: Configuration Locale +description: "Le guide pour les contributeurs (ou les développeurs curieux) qui souhaitent exécuter Twenty localement." +image: /images/user-guide/fields/field.png +--- + + + Header + + +## Prérequis + + + + +Avant de pouvoir installer et utiliser Twenty, assurez-vous d'installer ce qui suit sur votre ordinateur : + +- [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) +- [Node v24.5.0](https://nodejs.org/en/download) +- [yarn v4](https://yarnpkg.com/getting-started/install) +- [nvm](https://github.com/nvm-sh/nvm/blob/master/README.md) + + +`npm` ne fonctionnera pas, vous devez utiliser `yarn` à la place. Yarn est maintenant intégré avec Node.js, vous n'avez donc pas besoin de l'installer séparément. +Vous devez uniquement exécuter `corepack enable` pour activer Yarn si vous ne l'avez pas encore fait. + + + + + + +1. Installer WSL + Ouvrez PowerShell en tant qu'administrateur et exécutez : + +```powershell +wsl --install +``` + +Vous devriez maintenant voir une invite pour redémarrer votre ordinateur. Si ce n'est pas le cas, redémarrez-le manuellement. + +Au redémarrage, une fenêtre PowerShell s'ouvrira et installera Ubuntu. Cela peut prendre un peu de temps. +Une invite pour créer un nom d'utilisateur et un mot de passe pour votre installation Ubuntu s'affichera. + +2. Installez et configurez git + +```bash +sudo apt-get install git + +git config --global user.name "Your Name" + +git config --global user.email "youremail@domain.com" +``` + +3. Installez nvm, node.js et yarn + + +Utilisez `nvm` pour installer la version correcte de `node`. Le fichier `.nvmrc` garantit que tous les contributeurs utilisent la même version. + + + +```bash +sudo apt-get install curl + +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash +``` + +Fermez et rouvrez votre terminal pour utiliser nvm. Ensuite, exécutez les commandes suivantes. + +```bash + +nvm install # installs recommended node version + +nvm use # use recommended node version + +corepack enable +``` + + + + +--- + +## Étape 1 : Cloner Git + +Dans votre terminal, exécutez la commande suivante. + + + +Si vous n'avez pas encore configuré les clés SSH, vous pouvez apprendre à le faire [ici](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh). +```bash +git clone git@github.com:twentyhq/twenty.git +``` + + + +```bash +git clone https://github.com/twentyhq/twenty.git +``` + + + + +## Étape 2 : Positionnez-vous à la racine + +```bash +cd twenty +``` + +Vous devez exécuter toutes les commandes des étapes suivantes depuis la racine du projet. + +## Étape 3 : Configurez une base de données PostgreSQL + + + + **Option 1 (préférée) :** Pour créer votre base de données localement : + Utilisez le lien suivant pour installer PostgreSQL sur votre machine Linux : [Installation de PostgreSQL](https://www.postgresql.org/download/linux/) + ```bash + psql postgres -c "CREATE DATABASE \"default\";" -c "CREATE DATABASE test;" + ``` + Note : Vous pourriez avoir besoin d'ajouter `sudo -u postgres` à la commande avant `psql` pour éviter des erreurs de permission. + +```` +**Option 2:** If you have docker installed: +```bash + make postgres-on-docker +``` +```` + + + + **Option 1 (préférée) :** Pour créer votre base de données localement avec `brew` : + +```` +```bash + brew install postgresql@16 + export PATH="/opt/homebrew/opt/postgresql@16/bin:$PATH" + brew services start postgresql@16 + psql postgres -c "CREATE DATABASE \"default\";" -c "CREATE DATABASE test;" +``` + +You can verify if the PostgreSQL server is running by executing: +```bash + brew services list +``` + +The installer might not create the `postgres` user by default when installing +via Homebrew on MacOS. Instead, it creates a PostgreSQL role that matches your macOS +username (e.g., "john"). +To check and create the `postgres` user if necessary, follow these steps: +```bash + # Connect to PostgreSQL + psql postgres + or + psql -U $(whoami) -d postgres +``` + +Once at the psql prompt (postgres=#), run: + ```bash + # List existing PostgreSQL roles + \du +``` +You'll see output similar to: + ```bash + Role name | Attributes | Member of + -----------+-------------+----------- + john | Superuser | {} +``` + +If you do not see a `postgres` role listed, proceed to the next step. +Create the `postgres` role manually: + ```bash + CREATE ROLE postgres WITH SUPERUSER LOGIN; +``` +This creates a superuser role named `postgres` with login access. + +**Option 2:** If you have docker installed: +```bash + make postgres-on-docker +``` +```` + + + + Toutes les étapes suivantes doivent être exécutées dans le terminal WSL (dans votre machine virtuelle) + +```` +**Option 1:** To provision your Postgresql locally: +Use the following link to install Postgresql on your Linux virtual machine: [Postgresql Installation](https://www.postgresql.org/download/linux/) +```bash + psql postgres -c "CREATE DATABASE \"default\";" -c "CREATE DATABASE test;" +``` +Note: You might need to add `sudo -u postgres` to the command before `psql` to avoid permission errors. + +**Option 2:** If you have docker installed: +Running Docker on WSL adds an extra layer of complexity. +Only use this option if you are comfortable with the extra steps involved, including turning on [Docker Desktop WSL2](https://docs.docker.com/desktop/wsl). +```bash + make postgres-on-docker +``` +```` + + + + +Vous pouvez maintenant accéder à la base de données à [localhost:5432](localhost:5432), avec l'utilisateur `postgres` et le mot de passe `postgres`. + +## Étape 4 : Configuration d'une base de données Redis (cache) + +Twenty nécessite un cache Redis pour offrir la meilleure performance + + + + **Option 1 :** Pour configurer votre Redis localement : + Utilisez le lien suivant pour installer Redis sur votre machine Linux : [Installation de Redis](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/) + +```` +**Option 2:** If you have docker installed: +```bash + make redis-on-docker +``` +```` + + + + **Option 1 (préférée) :** Pour configurer votre Redis localement avec `brew` : + ```bash + brew install redis + ``` + Démarrez votre serveur redis : + ```brew services start redis``` + +```` +**Option 2:** If you have docker installed: +```bash + make redis-on-docker +``` +```` + + + + **Option 1 :** Pour configurer votre Redis localement : + Utilisez le lien suivant pour installer Redis sur votre machine virtuelle Linux : [Installation de Redis](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/) + +```` +**Option 2:** If you have docker installed: +```bash + make redis-on-docker +``` +```` + + + + +Si vous avez besoin d'une interface graphique cliente, nous recommandons [redis insight](https://redis.io/insight/) (version gratuite disponible) + +## Étape 5 : Configurer les variables d'environnement + +Utilisez des variables d'environnement ou des fichiers `.env` pour configurer votre projet. Plus d'informations [ici](https://docs.twenty.com/developers/self-hosting/setup) + +Copiez les fichiers `.env.example` dans `/front` et `/server` : + +```bash +cp ./packages/twenty-front/.env.example ./packages/twenty-front/.env +cp ./packages/twenty-server/.env.example ./packages/twenty-server/.env +``` + +## Étape 6 : Installation des dépendances + +Pour construire le serveur Twenty et injecter des données dans votre base de données, exécutez la commande suivante : + +```bash +yarn +``` + +Notez que `npm` ou `pnpm` ne fonctionneront pas + +## Étape 7 : Exécution du projet + + + + Selon votre distribution Linux, le serveur Redis peut être démarré automatiquement. + Sinon, vérifiez le [guide d'installation de Redis](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/) pour votre distribution. + + + Redis devrait déjà être en cours d'exécution. Si ce n'est pas le cas, exécutez : + ```bash + brew services start redis + ``` + + + Selon votre distribution Linux, le serveur Redis peut être démarré automatiquement. + Sinon, vérifiez le [guide d'installation de Redis](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/) pour votre distribution. + + + +Configurez votre base de données avec la commande suivante : + +```bash +npx nx database:reset twenty-server +``` + +Démarrez le serveur, le worker et les services frontend : + +```bash +npx nx start twenty-server +npx nx worker twenty-server +npx nx start twenty-front +``` + +Alternativement, vous pouvez démarrer tous les services en même temps : + +```bash +npx nx start +``` + +## Étape 8 : Utiliser Twenty + +**Frontend** + +Le frontend de Twenty sera en cours d'exécution à [http://localhost:3001](http://localhost:3001). +Vous pouvez vous connecter en utilisant le compte démo par défaut : `tim@apple.dev` (mot de passe : `tim@apple.dev`) + +**Backend** + +- Le serveur de Twenty sera en fonctionnement à [http://localhost:3000](http://localhost:3000) +- L'API GraphQL est accessible à [http://localhost:3000/graphql](http://localhost:3000/graphql) +- L'API REST est joignable à [http://localhost:3000/rest](http://localhost:3000/rest) + +## Résolution des problèmes + +Si vous rencontrez un problème, consultez [Dépannage](https://docs.twenty.com/developers/self-hosting/troubleshooting) pour des solutions. \ No newline at end of file diff --git a/packages/twenty-docs/fr/developers/self-hosting/setup.mdx b/packages/twenty-docs/fr/developers/self-hosting/setup.mdx new file mode 100644 index 00000000000..557060126f3 --- /dev/null +++ b/packages/twenty-docs/fr/developers/self-hosting/setup.mdx @@ -0,0 +1,251 @@ +--- +title: Installation +image: /images/user-guide/table-views/table.png +--- + + + Header + + +import OptionTable from '@site/src/theme/OptionTable' + +# Gestion de la configuration + + +**Première installation ?** Suivez le [Guide d'installation de Docker Compose](https://docs.twenty.com/developers/self-hosting/docker-compose) pour faire fonctionner Twenty, puis revenez ici pour la configuration. + + +Twenty offre **deux modes de configuration** pour répondre à différents besoins de déploiement : + +**Accès au panneau d'administration :** Seuls les utilisateurs avec des privilèges d'administrateur (`canAccessFullAdminPanel: true`) peuvent accéder à l'interface de configuration. + +## 1. Configuration du panneau d'administration (par défaut) + +```bash +IS_CONFIG_VARIABLES_IN_DB_ENABLED=true # default +``` + +**La plupart des configurations se fait via l'interface utilisateur** après l'installation : + +1. Accédez à votre instance Twenty (généralement `http://localhost:3000`) +2. Allez dans **Paramètres / Panneau d’administration / Variables de configuration** +3. Configurez les intégrations, les e-mails, le stockage et plus encore +4. Les modifications prennent effet immédiatement (dans les 15 secondes pour les déploiements multi-conteneurs) + + +**Déploiements multi-conteneurs :** En utilisant la configuration de la base de données (`IS_CONFIG_VARIABLES_IN_DB_ENABLED=true`), les conteneurs serveur et travailleur lisent à partir de la même base de données. Les modifications du panneau d'administration affectent les deux automatiquement, éliminant le besoin de dupliquer les variables d'environnement entre les conteneurs (sauf pour les variables d'infrastructure). + + +**Ce que vous pouvez configurer via le panneau d'administration :** + +- **Authentification** - Google/Microsoft OAuth, paramètres de mot de passe +- **E-mail** - Paramètres SMTP, modèles, vérification +- **Stockage** - Configuration S3, chemins de stockage local +- **Intégrations** - Gmail, Google Agenda, services Microsoft +- **Workflow & Limitation de débit** - Limites d'exécution, limitation de l'API +- **Et bien plus encore...** + +![Variables de configuration du panneau d'administration](/images/user-guide/setup/admin-panel-config-variables.png) + + +Chaque variable est documentée avec des descriptions dans votre panneau d'administration sous **Paramètres → Panneau d'administration → Variables de configuration**. +Certains paramètres d'infrastructure comme les connexions de base de données (`PG_DATABASE_URL`), les URL du serveur (`SERVER_URL`), et les secrets d'application (`APP_SECRET`) ne peuvent être configurés que via le fichier `.env`. + +[Référence technique complète →](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/twenty-config/config-variables.ts) + +## 2. Configuration réservée à l'environnement + +```bash +IS_CONFIG_VARIABLES_IN_DB_ENABLED=false +``` + +**Toute la configuration est gérée via les fichiers `.env` :** + +1. Définissez `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false` dans votre fichier `.env` +2. Ajoutez toutes les variables de configuration à votre fichier `.env` +3. Redémarrez les conteneurs pour que les modifications prennent effet +4. Le panneau d'administration affichera les valeurs actuelles mais ne pourra pas les modifier + +## Intégration Gmail & Google Agenda + +### Créer un projet Google Cloud + +1. Allez dans [Google Cloud Console](https://console.cloud.google.com/) +2. Créez un nouveau projet ou sélectionnez-en un existant +3. Activez ces API : + +- [API Gmail](https://console.cloud.google.com/apis/library/gmail.googleapis.com) +- [API Google Agenda](https://console.cloud.google.com/apis/library/calendar-json.googleapis.com) +- [API People](https://console.cloud.google.com/apis/library/people.googleapis.com) + +### Configurez OAuth + +1. Allez dans [Identifiants](https://console.cloud.google.com/apis/credentials) +2. Créez un identifiant client OAuth 2.0 +3. Ajoutez ces URI de redirection : + - `https:///auth/google/redirect` (pour le SSO) + - `https:///auth/google-apis/get-access-token` (pour les intégrations) + +### Configurez dans Twenty + +1. Allez dans **Paramètres → Panneau d’administration → Variables de configuration** +2. Retrouvez la section **Google Auth** +3. Définissez ces variables : + - `MESSAGING_PROVIDER_GMAIL_ENABLED=true` + - `CALENDAR_PROVIDER_GOOGLE_ENABLED=true` + - `AUTH_GOOGLE_CLIENT_ID=` + - `AUTH_GOOGLE_CLIENT_SECRET=` + - `AUTH_GOOGLE_CALLBACK_URL=https:///auth/google/redirect` + - `AUTH_GOOGLE_APIS_CALLBACK_URL=https:///auth/google-apis/get-access-token` + + +**Mode réservé à l'environnement :** Si vous définissez `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, ajoutez ces variables à votre fichier `.env` à la place. + + +**Scopes requis** (configurés automatiquement) : +[Voir le code source pertinent](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/auth/utils/get-google-apis-oauth-scopes.ts#L4-L10) + +- `https://www.googleapis.com/auth/calendar.events` +- `https://www.googleapis.com/auth/gmail.readonly` +- `https://www.googleapis.com/auth/profile.emails.read` + +### Si votre application est en mode test + +Si votre application est en mode test, vous devez ajouter des utilisateurs test à votre projet. + +Sous [Écran de consentement OAuth](https://console.cloud.google.com/apis/credentials/consent), ajoutez vos utilisateurs test à la section "Utilisateurs test". + +## Intégration Microsoft 365 + + +Les utilisateurs doivent avoir une [licence Microsoft 365](https://admin.microsoft.com/Adminportal/Home) pour pouvoir utiliser les API Calendrier et Messagerie. Ils ne pourront pas synchroniser leur compte sur Twenty sans cela. + + +### Créez un projet dans Microsoft Azure + +Vous devrez créer un projet dans [Microsoft Azure](https://portal.azure.com/#view/Microsoft_AAD_IAM/AppGalleryBladeV2) et obtenir les identifiants. + +### Activez les API + +Sur la console Microsoft Azure, activez les API suivantes dans "Autorisations" : + +- Microsoft Graph : Mail.ReadWrite +- Microsoft Graph : Mail.Send +- Microsoft Graph : Calendars.Read +- Microsoft Graph : User.Read +- Microsoft Graph : openid +- Microsoft Graph : email +- Microsoft Graph : profile +- Microsoft Graph : offline_access + +Remarque : "Mail.ReadWrite" et "Mail.Send" ne sont obligatoires que si vous souhaitez envoyer des e-mails en utilisant nos actions de flux de travail. Vous pouvez utiliser "Mail.Read" à la place si vous souhaitez uniquement recevoir des e-mails. + +### URI de redirection autorisées + +Vous devez ajouter les URI de redirection suivantes à votre projet : + +- `https:///auth/microsoft/redirect` si vous souhaitez utiliser Microsoft SSO +- `https:///auth/microsoft-apis/get-access-token` + +### Configurez dans Twenty + +1. Allez dans **Paramètres → Panneau d’administration → Variables de configuration** +2. Retrouvez la section **Microsoft Auth** +3. Définissez ces variables : + - `MESSAGING_PROVIDER_MICROSOFT_ENABLED=true` + - `CALENDAR_PROVIDER_MICROSOFT_ENABLED=true` + - `AUTH_MICROSOFT_ENABLED=true` + - `AUTH_MICROSOFT_CLIENT_ID=` + - `AUTH_MICROSOFT_CLIENT_SECRET=` + - `AUTH_MICROSOFT_CALLBACK_URL=https:///auth/microsoft/redirect` + - `AUTH_MICROSOFT_APIS_CALLBACK_URL=https:///auth/microsoft-apis/get-access-token` + + +**Mode réservé à l'environnement :** Si vous définissez `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, ajoutez ces variables à votre fichier `.env` à la place. + + +### Configurer les scopes + +[Voir le code source pertinent](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/auth/utils/get-microsoft-apis-oauth-scopes.ts#L2-L9) + +- 'openid' +- 'email' +- 'profil' +- 'offline_access' +- 'Mail.ReadWrite' +- 'Mail.Send' +- 'Calendars.Read' + +### Si votre application est en mode test + +Si votre application est en mode test, vous devez ajouter des utilisateurs test à votre projet. + +Ajoutez vos utilisateurs test à la section "Utilisateurs et groupes". + +## Tâches en arrière-plan pour Calendrier & Messagerie + +Après avoir configuré les intégrations Gmail, Google Agenda ou Microsoft 365, vous devez démarrer les tâches en arrière-plan qui synchronisent les données. + +Enregistrez les emplois récurrents suivants dans votre conteneur de travailleur : + +```bash +# from your worker container +yarn command:prod cron:messaging:messages-import +yarn command:prod cron:messaging:message-list-fetch +yarn command:prod cron:calendar:calendar-event-list-fetch +yarn command:prod cron:calendar:calendar-events-import +yarn command:prod cron:messaging:ongoing-stale +yarn command:prod cron:calendar:ongoing-stale +yarn command:prod cron:workflow:automated-cron-trigger +``` + +## Configuration des Emails + +1. Allez dans **Paramètres → Panneau d’administration → Variables de configuration** +2. Retrouvez la section **Email** +3. Configurez vos paramètres SMTP : + + + + + +Vous devrez créer un [mot de passe d'application](https://support.google.com/accounts/answer/185833). + +- EMAIL_DRIVER=smtp +- EMAIL_SMTP_HOST=smtp.gmail.com +- EMAIL_SMTP_PORT=465 +- EMAIL_SMTP_USER=gmail_email_address +- EMAIL_SMTP_PASSWORD='gmail_app_password' + + + + + +Gardez à l'esprit que si vous avez activé la validation en deux étapes (2FA), vous devrez mettre en place un [mot de passe d'application](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9). + +- EMAIL_DRIVER=smtp +- EMAIL_SMTP_HOST=smtp.office365.com +- EMAIL_SMTP_PORT=587 +- EMAIL_SMTP_USER=office365_email_address +- EMAIL_SMTP_PASSWORD='office365_password' + + + + + +**smtp4dev** est un serveur SMTP factice pour le développement et les tests. + +- Exécutez l'image smtp4dev : `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev` +- Accédez à l'interface utilisateur smtp4dev ici : [http://localhost:8090](http://localhost:8090) +- Définissez les variables suivantes : + - EMAIL_DRIVER=smtp + - EMAIL_SMTP_HOST=localhost + - EMAIL_SMTP_PORT=2525 + + + + + + +**Mode réservé à l'environnement :** Si vous définissez `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, ajoutez ces variables à votre fichier `.env` à la place. + \ No newline at end of file diff --git a/packages/twenty-docs/fr/developers/self-hosting/troubleshooting.mdx b/packages/twenty-docs/fr/developers/self-hosting/troubleshooting.mdx new file mode 100644 index 00000000000..5e7649ccbbb --- /dev/null +++ b/packages/twenty-docs/fr/developers/self-hosting/troubleshooting.mdx @@ -0,0 +1,226 @@ +--- +title: Résolution des problèmes +image: /images/user-guide/what-is-twenty/20.png +--- + + + Header + + +## Résolution des problèmes + +Si vous rencontrez un problème lors de la configuration de l'environnement pour le développement, la mise à niveau de votre instance ou l'auto-hébergement, voici quelques solutions pour les problèmes courants. + +### Auto-hébergement + +#### La première installation entraîne l'erreur `l'authentification du mot de passe a échoué pour l'utilisateur "postgres"` + +🚨 **IMPORTANT : Cette solution est UNIQUEMENT pour les nouvelles installations** 🚨 +Si vous avez une instance Twenty existante avec des données de production, **NE SUIVEZ PAS** ces étapes, car elles supprimeront définitivement votre base de données ! + +Lors de l'installation de Twenty pour la première fois, vous pouvez vouloir changer le mot de passe par défaut de la base de données. +Le mot de passe que vous définissez lors de la première installation est stocké de façon permanente dans le volume de la base de données. Si vous essayez ensuite de changer ce mot de passe dans votre configuration sans supprimer l'ancien volume, vous obtiendrez des erreurs d'authentification car la base de données utilise toujours le mot de passe original. + +⚠️ AVERTISSEMENT : Les étapes suivantes SUPPRIMERONT DÉFINITIVEMENT toutes les données de la base de données ! ⚠️ +N'avancez que s'il s'agit d'une nouvelle installation sans données importantes. + +Pour mettre à jour le `PG_DATABASE_PASSWORD`, vous devez : + +```sh +# Update the PG_DATABASE_PASSWORD in .env +docker compose down --volumes +docker compose up -d +``` + +#### Retours à la ligne CR trouvés [Windows] + +Cela est dû aux caractères de saut de ligne de Windows et à la configuration de git. Essayez de lancer : + +``` +git config --global core.autocrlf false +``` + +Ensuite, supprimez le dépôt et clonez-le de nouveau. + +#### Schéma de métadonnées manquant + +Pendant l'installation de Twenty, vous devez approvisionner votre base de données postgres avec les bons schémas, extensions et utilisateurs. +Si vous réussissez cet approvisionnement, vous devriez avoir des schémas `default` et `metadata` dans votre base de données. +Sinon, assurez-vous de ne pas avoir plus d'une instance postgres fonctionnant sur votre ordinateur. + +#### Impossible de trouver le module 'twenty-emails' ou les déclarations de type correspondantes. + +Vous devez construire le package `twenty-emails` avant de lancer l'initialisation de la base de données avec `npx nx run twenty-emails:build` + +#### Package twenty-x manquant + +Assurez-vous d'exécuter yarn dans le répertoire racine, puis d'exécuter `npx nx server:dev twenty-server`. Si cela ne fonctionne toujours pas, essayez de construire le package manquant manuellement. + +#### Lint à l'enregistrement ne fonctionne pas + +Cela devrait fonctionner directement avec l'extension eslint installée. Si cela ne fonctionne pas, essayez d'ajouter ceci aux paramètres de votre vscode (dans le champ du conteneur de développement) : + +``` +"editor.codeActionsOnSave": { + + "source.fixAll.eslint": "explicit" + +} +``` + +#### Pendant l'exécution de `npx nx start` ou `npx nx start twenty-front`, une erreur de mémoire est renvoyée + +Dans `packages/twenty-front/.env`, décommentez `VITE_DISABLE_TYPESCRIPT_CHECKER=true` et `VITE_DISABLE_ESLINT_CHECKER=true` pour désactiver les vérifications en arrière-plan, réduisant ainsi la quantité de RAM nécessaire. + +**Si cela ne fonctionne pas :** +Lancez uniquement les services dont vous avez besoin, au lieu de `npx nx start`. Par exemple, si vous travaillez sur le serveur, lancez seulement `npx nx worker twenty-server` + +**Si cela ne fonctionne pas :** +Si vous avez essayé de lancer uniquement `npx nx run twenty-server:start` sur WSL et que cela échoue avec l'erreur de mémoire ci-dessous : + +`ERREUR FATALE : Les compactages inefficaces près de la limite du tas Allocation échouée - tas JavaScript sans mémoire` + +Une solution de contournement consiste à exécuter la commande ci-dessous dans le terminal ou à l'ajouter au profil .bashrc pour la configurer automatiquement : + +`export NODE_OPTIONS="--max-old-space-size=8192"` + +L'option --max-old-space-size=8192 fixe une limite supérieure de 8 Go pour le tas Node.js ; l'utilisation s'adapte à la demande de l'application. +Référence : https://stackoverflow.com/questions/56982005/where-do-i-set-node-options-max-old-space-size-2048 + +**Si cela ne fonctionne pas :** +Enquêter sur les processus qui consomment le plus de RAM sur votre machine. Chez Twenty, nous avons remarqué que certaines extensions de VScode consommaient beaucoup de RAM, nous les désactivons donc temporairement. + +**Si cela ne fonctionne pas :** +Redémarrer votre machine aide à nettoyer les processus fantômes. + +#### Pendant l'exécution de `npx nx start`, il y a des [0] et [1] étranges dans les journaux + +C'est attendu car la commande `npx nx start` exécute plus de commandes en arrière-plan + +#### Aucun e-mail n'est envoyé + +La plupart du temps, c'est parce que le `worker` ne fonctionne pas en arrière-plan. Essayez de lancer + +``` +npx nx worker twenty-server +``` + +#### Impossible de connecter mon compte Microsoft 365 + +La plupart du temps, c'est parce que votre administrateur n'a pas activé la licence Microsoft 365 pour votre compte. Vérifiez [https://admin.microsoft.com/](https://admin.microsoft.com/Adminportal/Home). + +Si vous avez un code d'erreur `AADSTS50020`, cela signifie probablement que vous utilisez un compte personnel Microsoft. Cela n'est pas encore pris en charge. Plus d'informations [ici](https://learn.microsoft.com/fr-fr/troubleshoot/entra/entra-id/app-integration/error-code-aadsts50020-user-account-identity-provider-does-not-exist) + +#### Des avertissements apparaissent dans la console pendant l'exécution de `yarn` + +Les avertissements informent du tirage de dépendances supplémentaires qui ne sont pas explicitement spécifiées dans `package.json`, donc tant qu'aucune erreur bloquante n'apparaît, tout devrait fonctionner comme prévu. + +#### Lorsque l'utilisateur accède à la page de connexion, une erreur concernant des utilisateurs non autorisés essayant d'accéder à l'espace de travail apparaît dans les journaux + +C'est attendu car l'utilisateur est non autorisé lorsqu'il est déconnecté puisque son identité n'est pas vérifiée. + +#### Comment vérifier si votre worker fonctionne ? + +- Allez sur [webhook-test.com](https://webhook-test.com/) et copiez **Votre URL Webhook Unique**. + +
+ Webhook test +
+- Ouvrez votre application Twenty, naviguez jusqu'à `/settings`, et activez le bouton **Avancé** en bas à gauche de l'écran. +- Créez un nouveau webhook. +- Collez **Votre URL Webhook Unique** dans le champ **URL de l'Endpoint** de Twenty. Réglez les **Filtres** sur `Sociétés` et `Créé`. +
+ Webhook settings +
+- Accédez à `/objects/companies` et créez un nouvel enregistrement de société. +- Retournez sur [webhook-test.com](https://webhook-test.com/) et vérifiez si une nouvelle **requête POST** a été reçue. +
+ Webhook test result +
+- Si une **requête POST** est reçue, votre worker fonctionne avec succès. Sinon, vous devez résoudre les problèmes de votre worker. + +#### Le front-end échoue à démarrer et renvoie l'erreur TS5042 : L'option 'project' ne peut pas être mélangée avec les fichiers sources en ligne de commande + +Commentez le plugin de vérification dans `packages/twenty-ui/vite-config.ts` comme dans l'exemple ci-dessous + +``` +plugins: [ + react({ jsxImportSource: '@emotion/react' }), + tsconfigPaths(), + svgr(), + dts(dtsConfig), + // checker(checkersConfig), + wyw({ + include: [ + '**/OverflowingTextWithTooltip.tsx', + '**/Chip.tsx', + '**/Tag.tsx', + '**/Avatar.tsx', + '**/AvatarChip.tsx', + ], + babelOptions: { + presets: ['@babel/preset-typescript', '@babel/preset-react'], + }, + }), + ], +``` + +#### Panneau d'administration inaccessible + +Exécutez `UPDATE core."user" SET "canAccessFullAdminPanel" = TRUE WHERE email = 'vous@votredomaine.com';` dans le conteneur de base de données pour obtenir l'accès au panneau d'administration. + +### Docker compose en un clic + +#### Impossible de se connecter + +Si vous ne pouvez pas vous connecter après la configuration : + +1. Exécutez les commandes suivantes : + ```bash + docker exec -it twenty-server-1 yarn + docker exec -it twenty-server-1 npx nx database:reset --configuration=no-seed + ``` +2. Redémarrez les conteneurs Docker : + ```bash + docker compose down + docker compose up -d + ``` + +Notez que la commande database:reset effacera complètement votre base de données et la recréera à partir de zéro. + +#### Problèmes de connexion derrière un proxy inverse + +Si vous exécutez Twenty derrière un proxy inverse et rencontrez des problèmes de connexion : + +1. **Vérifiez SERVER_URL :** + + Assurez-vous que `SERVER_URL` dans votre fichier `.env` correspond à l'URL d'accès externe, incluant `https` si SSL est activé. + +2. **Vérifiez les paramètres du proxy inverse :** + + - Confirmez que votre proxy inverse transfère correctement les requêtes au serveur Twenty. + - Assurez-vous que les en-têtes comme `X-Forwarded-For` et `X-Forwarded-Proto` sont correctement configurés. + +3. **Redémarrez les services :** + + Après avoir apporté des modifications, redémarrez à la fois le proxy inverse et les conteneurs Twenty. + +#### Erreur lors du téléchargement d'une image - permission refusée + +Changer la propriété du dossier de données sur l'hôte de root à un autre utilisateur et groupe résout ce problème. + +## Obtenir de l'aide + +Si vous rencontrez des problèmes non couverts par ce guide : + +- Vérifiez les journaux : + + Consultez les journaux de conteneur pour les messages d'erreur : + + ```bash + docker compose logs + ``` + +- Support communautaire : + + Contactez la [communauté Twenty](https://github.com/twentyhq/twenty/issues) ou les [canaux de support](https://discord.gg/cx5n4Jzs57) pour obtenir de l'aide. \ No newline at end of file diff --git a/packages/twenty-docs/fr/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/fr/twenty-ui/display/app-tooltip.mdx new file mode 100644 index 00000000000..ed88adeac36 --- /dev/null +++ b/packages/twenty-docs/fr/twenty-ui/display/app-tooltip.mdx @@ -0,0 +1,88 @@ +--- +title: Info-bulle de l'application +image: /images/user-guide/tips/light-bulb.png +--- + + + Header + + +Un message bref qui affiche des informations supplémentaires lorsqu'un utilisateur interagit avec un élément. + + + + +```jsx +import { AppTooltip } from "@/ui/display/tooltip/AppTooltip"; + +export const MyComponent = () => { + return ( + <> +

+ Customer Insights +

+ + + ); +}; +``` + + + + + +| Propriétés | Type | Description | +| ----------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire | +| sélecteurAncre | Sélecteur CSS | Sélecteur pour l'ancre de l'info-bulle (l'élément qui déclenche l'info-bulle) | +| contenu | chaîne | Le contenu que vous souhaitez afficher dans l'info-bulle | +| délaiMasquer | nombre | Le délai avant de masquer l'info-bulle après que le curseur ait quitté l'ancre | +| décalage | nombre | Le décalage en pixels pour positionner l'info-bulle | +| pasDeFlèche | booléen | Si `vrai`, masque la flèche sur l'info-bulle | +| estOuvert | booléen | Si `vrai`, l'info-bulle est ouverte par défaut | +| emplacement | Chaîne `PlacesType` de `react-tooltip` | Spécifie le placement de l'info-bulle. Les valeurs incluent `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, et `left-end` | +| stratégiePositionnement | Chaîne `PositionStrategy` de `react-tooltip` | Stratégie de positionnement pour l'info-bulle. A deux valeurs : `absolute` et `fixed` | + + + + + +## Texte débordant avec info-bulle + +Gère le texte débordant et affiche une info-bulle lorsque le texte déborde. + + + + +```jsx +import { OverflowingTextWithTooltip } from 'twenty-ui/display'; + +export const MyComponent = () => { + const crmTaskDescription = + 'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.'; + + return ; +}; +``` + + + + + +| Propriétés | Type | Description | +| ---------- | ------ | ----------------------------------------------------------------------- | +| texte | chaîne | Le contenu que vous souhaitez afficher dans la zone de texte débordante | + + + + diff --git a/packages/twenty-docs/fr/twenty-ui/display/chip.mdx b/packages/twenty-docs/fr/twenty-ui/display/chip.mdx new file mode 100644 index 00000000000..3d0c83086b5 --- /dev/null +++ b/packages/twenty-docs/fr/twenty-ui/display/chip.mdx @@ -0,0 +1,148 @@ +--- +title: Puce +image: /images/user-guide/github/github-header.png +--- + + + Header + + +Un élément visuel que vous pouvez utiliser comme un conteneur cliquable ou non cliquable avec une étiquette, des composants optionnels à gauche et à droite, et diverses options de style pour afficher des étiquettes et des tags. + + + + + +```jsx +import { Chip } from 'twenty-ui/components'; + +export const MyComponent = () => { + return ( + + ); +}; + +``` + + + + + +| Propriétés | Type | Description | +| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | +| linkToEntity | chaîne | Le lien vers l'entité | +| entityId | chaîne | L'identifiant unique pour l'entité | +| nom | chaîne | Le nom de l'entité | +| pictureUrl | chaîne | Image", | +| avatarType | Type d'avatar | Le type d'avatar que vous souhaitez afficher. A deux options : `arrondie` et `carrée` | +| variante | `EntityChipVariant` enum | Variante de la puce entité que vous souhaitez afficher. A deux options : `régulier` et `transparent` | +| LeftIcon | ComposantIcône | Un composant React représentant une icône. Affiché sur le côté gauche de la puce | + + + + +## Exemples + +### Puce transparente désactivée + +```jsx +import { Chip } from 'twenty-ui/components'; + +export const MyComponent = () => { + return ( + + ); +}; + +``` + +
+ +### Puce désactivée avec infobulle + +```jsx +import { Chip } from "twenty-ui/components"; + +export const MyComponent = () => { + return ( + + ); +}; +``` + +## Puce entité + +Un élément semblable à une puce pour afficher des informations sur une entité. + + + + + +```jsx +import { BrowserRouter as Router } from 'react-router-dom'; +import { IconTwentyStar } from 'twenty-ui/display'; +import { Chip } from 'twenty-ui/components'; + +export const MyComponent = () => { + return ( + + + + ); +}; +``` + + + + + +| Propriétés | Type | Description | +| ------------ | ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | +| linkToEntity | chaîne | Le lien vers l'entité | +| entityId | chaîne | L'identifiant unique pour l'entité | +| nom | chaîne | Le nom de l'entité | +| pictureUrl | chaîne | Image", | +| avatarType | Type d'avatar | Le type d'avatar que vous souhaitez afficher. A deux options : `arrondie` et `carrée` | +| variante | `EntityChipVariant` enum | Variante de la puce entité que vous souhaitez afficher. A deux options : `régulier` et `transparent` | +| LeftIcon | ComposantIcône | Un composant React représentant une icône. Affiché sur le côté gauche de la puce | + + + diff --git a/packages/twenty-docs/fr/twenty-ui/input.mdx b/packages/twenty-docs/fr/twenty-ui/input.mdx new file mode 100644 index 00000000000..4a19239d968 --- /dev/null +++ b/packages/twenty-docs/fr/twenty-ui/input.mdx @@ -0,0 +1,8 @@ +--- +title: "Entrée " +image: /images/user-guide/tips/light-bulb.png +--- + + + Header + \ No newline at end of file diff --git a/packages/twenty-docs/fr/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/fr/twenty-ui/input/block-editor.mdx new file mode 100644 index 00000000000..5b1bf2f90b9 --- /dev/null +++ b/packages/twenty-docs/fr/twenty-ui/input/block-editor.mdx @@ -0,0 +1,34 @@ +--- +title: Éditeur de Blocs +image: /images/user-guide/api/api.png +--- + + + Header + + +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. + + + + +```jsx +import { useBlockNote } from "@blocknote/react"; +import { BlockEditor } from "@/ui/input/editor/components/BlockEditor"; + +export const MyComponent = () => { + const BlockNoteEditor = useBlockNote(); + + return ; +}; +``` + + + + +| Propriétés | Type | Description | +| ---------- | ----------------- | ---------------------------------------------------- | +| éditeur | `BlockNoteEditor` | L'instance de l'éditeur de blocs ou sa configuration | + + + diff --git a/packages/twenty-docs/fr/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/fr/twenty-ui/input/checkbox.mdx new file mode 100644 index 00000000000..f5f1a3e19cb --- /dev/null +++ b/packages/twenty-docs/fr/twenty-ui/input/checkbox.mdx @@ -0,0 +1,47 @@ +--- +title: Case à cocher +image: /images/user-guide/tasks/tasks_header.png +--- + + + Header + + +Utilisé lorsqu'un utilisateur doit sélectionner plusieurs valeurs parmi plusieurs options. + + + + +```jsx +import { Checkbox } from "twenty-ui/display"; + +export const MyComponent = () => { + return ( + console.log("onChange function fired")} + onCheckedChange={() => console.log("onCheckedChange function fired")} + variant="primary" + size="small" + shape="squared" + /> + ); +}; +``` + + + + +| 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` | + + + diff --git a/packages/twenty-docs/fr/twenty-ui/input/color-scheme.mdx b/packages/twenty-docs/fr/twenty-ui/input/color-scheme.mdx new file mode 100644 index 00000000000..eb7b05ae1d4 --- /dev/null +++ b/packages/twenty-docs/fr/twenty-ui/input/color-scheme.mdx @@ -0,0 +1,73 @@ +--- +title: Schéma de couleurs +image: /images/user-guide/fields/field.png +--- + + + Header + + +## 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. + + + + +```jsx +import { ColorSchemeCard } from "twenty-ui/display"; + +export const MyComponent = () => { + return ( + + ); +}; +``` + + + + + +| 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`. | | + + + + + +## Sélecteur de Schéma de couleurs + +Permet aux utilisateurs de choisir entre différents schémas de couleurs. + + + + +```jsx +import { ColorSchemePicker } from "twenty-ui/display"; + +export const MyComponent = () => { + return ; +}; +``` + + + + + +| 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. | + + + + diff --git a/packages/twenty-docs/fr/twenty-ui/input/icon-picker.mdx b/packages/twenty-docs/fr/twenty-ui/input/icon-picker.mdx new file mode 100644 index 00000000000..d583615c429 --- /dev/null +++ b/packages/twenty-docs/fr/twenty-ui/input/icon-picker.mdx @@ -0,0 +1,56 @@ +--- +title: Sélecteur d'icônes +image: /images/user-guide/github/github-header.png +--- + + + Header + + +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. + + + + + +```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 ( + + + + ); +}; +``` + + + + +| 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` | + + + diff --git a/packages/twenty-docs/fr/twenty-ui/input/radio.mdx b/packages/twenty-docs/fr/twenty-ui/input/radio.mdx new file mode 100644 index 00000000000..818b9731ab7 --- /dev/null +++ b/packages/twenty-docs/fr/twenty-ui/input/radio.mdx @@ -0,0 +1,104 @@ +--- +title: Radio +image: /images/user-guide/create-workspace/workspace-cover.png +--- + + + Header + + +Utilisé lorsque les utilisateurs peuvent choisir une seule option parmi une série d'options. + + + + +```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 ( + + ); +}; + +``` + + + + +| 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` | + + + + +## Groupe Radio + +Regroupe ensemble des boutons radio associés. + + + + +```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 ( + + + + + + ); +}; + +``` + + + + +| 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 | + + + + diff --git a/packages/twenty-docs/fr/twenty-ui/input/select.mdx b/packages/twenty-docs/fr/twenty-ui/input/select.mdx new file mode 100644 index 00000000000..9124594cc11 --- /dev/null +++ b/packages/twenty-docs/fr/twenty-ui/input/select.mdx @@ -0,0 +1,54 @@ +--- +title: Sélectionner +image: /images/user-guide/what-is-twenty/20.png +--- + + + Header + + +Permet aux utilisateurs de choisir une valeur dans une liste d'options prédéfinies. + + + + +```jsx +import { RecoilRoot } from 'recoil'; +import { IconTwentyStar } from 'twenty-ui/display'; + +import { Select } from '@/ui/input/components/Select'; + +export const MyComponent = () => { + + return ( + +