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]
co-authored by
github-actions
github-actions
parent
f740bac988
commit
4c4eeef5ae
@@ -0,0 +1,47 @@
|
||||
---
|
||||
title: File d'attente de messages
|
||||
image: /images/user-guide/emails/emails_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/emails/emails_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@@ -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
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Prérequis
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux and MacOS">
|
||||
|
||||
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)
|
||||
|
||||
<Warning>
|
||||
`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.
|
||||
</Warning>
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Windows (WSL)">
|
||||
|
||||
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
|
||||
<Warning>
|
||||
|
||||
Utilisez `nvm` pour installer la version correcte de `node`. Le fichier `.nvmrc` garantit que tous les contributeurs utilisent la même version.
|
||||
|
||||
</Warning>
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
---
|
||||
|
||||
## Étape 1 : Cloner Git
|
||||
|
||||
Dans votre terminal, exécutez la commande suivante.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="SSH (Recommended)">
|
||||
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
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="HTTPS">
|
||||
|
||||
```bash
|
||||
git clone https://github.com/twentyhq/twenty.git
|
||||
```
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## É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
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux">
|
||||
**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
|
||||
```
|
||||
````
|
||||
|
||||
</Tab>
|
||||
<Tab title="Mac OS">
|
||||
**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
|
||||
```
|
||||
````
|
||||
|
||||
</Tab>
|
||||
<Tab title="Windows (WSL)">
|
||||
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
|
||||
```
|
||||
````
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
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
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux">
|
||||
**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
|
||||
```
|
||||
````
|
||||
|
||||
</Tab>
|
||||
<Tab title="Mac OS">
|
||||
**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
|
||||
```
|
||||
````
|
||||
|
||||
</Tab>
|
||||
<Tab title="Windows (WSL)">
|
||||
**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
|
||||
```
|
||||
````
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
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
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Linux">
|
||||
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.
|
||||
</Tab>
|
||||
<Tab title="Mac OS">
|
||||
Redis devrait déjà être en cours d'exécution. Si ce n'est pas le cas, exécutez :
|
||||
```bash
|
||||
brew services start redis
|
||||
```
|
||||
</Tab>
|
||||
<Tab title="Windows (WSL)">
|
||||
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.
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
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.
|
||||
@@ -0,0 +1,251 @@
|
||||
---
|
||||
title: Installation
|
||||
image: /images/user-guide/table-views/table.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/table-views/table.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
import OptionTable from '@site/src/theme/OptionTable'
|
||||
|
||||
# Gestion de la configuration
|
||||
|
||||
<Warning>
|
||||
**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.
|
||||
</Warning>
|
||||
|
||||
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)
|
||||
|
||||
<Warning>
|
||||
**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).
|
||||
</Warning>
|
||||
|
||||
**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...**
|
||||
|
||||
|
||||
|
||||
<Warning>
|
||||
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) </Warning>
|
||||
|
||||
## 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://<votre-domaine>/auth/google/redirect` (pour le SSO)
|
||||
- `https://<votre-domaine>/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=<client-id>`
|
||||
- `AUTH_GOOGLE_CLIENT_SECRET=<client-secret>`
|
||||
- `AUTH_GOOGLE_CALLBACK_URL=https://<votre-domaine>/auth/google/redirect`
|
||||
- `AUTH_GOOGLE_APIS_CALLBACK_URL=https://<votre-domaine>/auth/google-apis/get-access-token`
|
||||
|
||||
<Warning>
|
||||
**Mode réservé à l'environnement :** Si vous définissez `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, ajoutez ces variables à votre fichier `.env` à la place.
|
||||
</Warning>
|
||||
|
||||
**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
|
||||
|
||||
<Warning>
|
||||
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.
|
||||
</Warning>
|
||||
|
||||
### 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://<votre-domaine>/auth/microsoft/redirect` si vous souhaitez utiliser Microsoft SSO
|
||||
- `https://<votre-domaine>/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=<client-id>`
|
||||
- `AUTH_MICROSOFT_CLIENT_SECRET=<client-secret>`
|
||||
- `AUTH_MICROSOFT_CALLBACK_URL=https://<votre-domaine>/auth/microsoft/redirect`
|
||||
- `AUTH_MICROSOFT_APIS_CALLBACK_URL=https://<votre-domaine>/auth/microsoft-apis/get-access-token`
|
||||
|
||||
<Warning>
|
||||
**Mode réservé à l'environnement :** Si vous définissez `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, ajoutez ces variables à votre fichier `.env` à la place.
|
||||
</Warning>
|
||||
|
||||
### 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 :
|
||||
|
||||
<ArticleTabs label1="Gmail" label2="Office365" label3="Smtp4dev">
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
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'
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
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'
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
<ArticleTab>
|
||||
|
||||
**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
|
||||
|
||||
</ArticleTab>
|
||||
|
||||
</ArticleTabs>
|
||||
|
||||
<Warning>
|
||||
**Mode réservé à l'environnement :** Si vous définissez `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`, ajoutez ces variables à votre fichier `.env` à la place.
|
||||
</Warning>
|
||||
@@ -0,0 +1,226 @@
|
||||
---
|
||||
title: Résolution des problèmes
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## 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**.
|
||||
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/developers/self-hosting/webhook-test.jpg" alt="Webhook test" />
|
||||
</div>
|
||||
- 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éé`.
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/developers/self-hosting/webhook-settings.jpg" alt="Webhook settings" />
|
||||
</div>
|
||||
- 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.
|
||||
<div style={{textAlign: 'center'}}>
|
||||
<img src="/images/docs/developers/self-hosting/webhook-test-result.jpg" alt="Webhook test result" />
|
||||
</div>
|
||||
- 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.
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
title: Info-bulle de l'application
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Un message bref qui affiche des informations supplémentaires lorsqu'un utilisateur interagit avec un élément.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<>
|
||||
<p id="hoverText" style={{ display: "inline-block" }}>
|
||||
Customer Insights
|
||||
</p>
|
||||
<AppTooltip
|
||||
className
|
||||
anchorSelect="#hoverText"
|
||||
content="Explore customer behavior and preferences"
|
||||
delayHide={0}
|
||||
offset={6}
|
||||
noArrow={false}
|
||||
isOpen={true}
|
||||
place="bottom"
|
||||
positionStrategy="absolute"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 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` |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Texte débordant avec info-bulle
|
||||
|
||||
Gère le texte débordant et affiche une info-bulle lorsque le texte déborde.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```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 <OverflowingTextWithTooltip text={crmTaskDescription} />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ---------- | ------ | ----------------------------------------------------------------------- |
|
||||
| texte | chaîne | Le contenu que vous souhaitez afficher dans la zone de texte débordante |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -0,0 +1,148 @@
|
||||
---
|
||||
title: Puce
|
||||
image: /images/user-guide/github/github-header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/github/github-header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
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.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { Chip } from 'twenty-ui/components';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Clickable Chip"
|
||||
clickable={true}
|
||||
variant="highlighted"
|
||||
accent="text-primary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 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 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Exemples
|
||||
|
||||
### Puce transparente désactivée
|
||||
|
||||
```jsx
|
||||
import { Chip } from 'twenty-ui/components';
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Transparent Disabled Chip"
|
||||
clickable={false}
|
||||
variant="rounded"
|
||||
accent="text-secondary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
<br/>
|
||||
|
||||
### Puce désactivée avec infobulle
|
||||
|
||||
```jsx
|
||||
import { Chip } from "twenty-ui/components";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Chip
|
||||
size="large"
|
||||
label="Disabled chip that triggers a tooltip when overflowing."
|
||||
clickable={false}
|
||||
variant="regular"
|
||||
accent="text-primary"
|
||||
leftComponent
|
||||
rightComponent
|
||||
maxWidth="200px"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
## Puce entité
|
||||
|
||||
Un élément semblable à une puce pour afficher des informations sur une entité.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```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 (
|
||||
<Router>
|
||||
<Chip
|
||||
linkToEntity="/entity-link"
|
||||
entityId="entityTest"
|
||||
name="Entity name"
|
||||
pictureUrl=""
|
||||
avatarType="rounded"
|
||||
variant="regular"
|
||||
LeftIcon={IconTwentyStar}
|
||||
/>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| 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 |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: "Entrée "
|
||||
image: /images/user-guide/tips/light-bulb.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tips/light-bulb.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Navigation
|
||||
image: /images/user-guide/tasks/tasks_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/tasks/tasks_header.png" alt="Header" />
|
||||
</Frame>
|
||||
@@ -0,0 +1,44 @@
|
||||
---
|
||||
title: Fil d'Ariane
|
||||
image: /images/user-guide/fields/field.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Affiche une barre de navigation en fil d'Ariane.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { BrowserRouter } from "react-router-dom";
|
||||
import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const breadcrumbLinks = [
|
||||
{ children: "Home", href: "/" },
|
||||
{ children: "Category", href: "/category" },
|
||||
{ children: "Subcategory", href: "/category/subcategory" },
|
||||
{ children: "Current Page" },
|
||||
];
|
||||
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<Breadcrumb className links={breadcrumbLinks} />
|
||||
</BrowserRouter>
|
||||
)
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| nomDeClasse | chaîne | Nom de classe facultatif pour un style supplémentaire |
|
||||
| liens | tableau | Un tableau d'objets, chacun représentant un lien de fil d'Ariane. Chaque objet a une propriété `children` (le contenu textuel du lien) et une propriété `href` facultative (l'URL vers laquelle naviguer lorsque le lien est cliqué) |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,168 @@
|
||||
---
|
||||
title: Liens
|
||||
image: /images/user-guide/what-is-twenty/20.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/what-is-twenty/20.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
## Lien de contact
|
||||
|
||||
Un composant de lien stylisé pour afficher les informations de contact.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { BrowserRouter as Router } from 'react-router-dom';
|
||||
|
||||
import { ContactLink } from 'twenty-ui/navigation';
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleLinkClick = (event) => {
|
||||
console.log('Contact link clicked!', event);
|
||||
};
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<ContactLink
|
||||
className
|
||||
href="mailto:example@example.com"
|
||||
onClick={handleLinkClick}
|
||||
>
|
||||
example@example.com
|
||||
</ContactLink>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | ----------------- | -------------------------------------------------------- |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
| href | chaîne | L'URL cible ou le chemin du lien |
|
||||
| onClick | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
|
||||
| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
|
||||
## Lien brut
|
||||
|
||||
Un composant de lien stylisé pour afficher les liens.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RawLink } from "/navigation";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleLinkClick = (event) => {
|
||||
console.log("Contact link clicked!", event);
|
||||
};
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<RawLink className href="/contact" onClick={handleLinkClick}>
|
||||
Contact Us
|
||||
</RawLink>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | ----------------- | -------------------------------------------------------- |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
| href | chaîne | L'URL cible ou le chemin du lien |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
|
||||
| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Lien arrondi
|
||||
|
||||
Un lien de style arrondi avec un composant Chip pour les liens.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { RoundedLink } from "/navigation";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleLinkClick = (event) => {
|
||||
console.log("Contact link clicked!", event);
|
||||
};
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<RoundedLink href="/contact" onClick={handleLinkClick}>
|
||||
Contact Us
|
||||
</RoundedLink>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ---------- | ----------------- | -------------------------------------------------------- |
|
||||
| href | chaîne | L'URL cible ou le chemin du lien |
|
||||
| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Lien social
|
||||
|
||||
Liens sociaux stylisés, avec support pour différents types de liens sociaux, tels que les URL, LinkedIn, et X (ou Twitter).
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { SocialLink } from "twenty-ui/navigation";
|
||||
import { BrowserRouter as Router } from "react-router-dom";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<Router>
|
||||
<SocialLink
|
||||
type="twitter"
|
||||
href="https://twitter.com/twentycrm"
|
||||
></SocialLink>
|
||||
</Router>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ---------- | ----------------- | --------------------------------------------------------------------------------------------------------------- |
|
||||
| href | chaîne | L'URL cible ou le chemin du lien |
|
||||
| enfants | `React.ReactNode` | Le contenu à afficher à l'intérieur du lien |
|
||||
| type | chaîne | Le type de liens sociaux. Les options incluent: `url`, `LinkedIn`, et `Twitter` |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,458 @@
|
||||
---
|
||||
title: Élément de menu
|
||||
image: /images/user-guide/kanban-views/kanban.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/kanban-views/kanban.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Un élément de menu polyvalent conçu pour être utilisé dans un menu ou une liste de navigation.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { IconAlertCircle } from "@tabler/icons-react";
|
||||
import { MenuItem } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleMenuItemClick = (event) => {
|
||||
console.log("Menu item clicked!", event);
|
||||
};
|
||||
|
||||
const handleButtonClick = (event) => {
|
||||
console.log("Icon button clicked!", event);
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItem
|
||||
LeftIcon={IconBell}
|
||||
accent="default"
|
||||
text="Menu item text"
|
||||
iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
|
||||
isTooltipOpen={true}
|
||||
testId="menu-item-1"
|
||||
onClick={handleMenuItemClick}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| accent | chaîne | Spécifie la couleur d'accent de l'élément de menu. Les options incluent : `default`, `danger` et `placeholder` |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| boutonsIcône | tableau | Un tableau d'objets représentant des boutons d'icônes supplémentaires associés à l'élément de menu |
|
||||
| isTooltipOpen | booléen | Contrôle la visibilité de l'infobulle associée à l'élément de menu |
|
||||
| testId | chaîne | L'attribut data-testid à des fins de test |
|
||||
| auClique | fonction | Fonction de rappel déclenchée lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Variantes
|
||||
|
||||
Les différentes variantes du composant d'élément de menu incluent les suivantes :
|
||||
|
||||
### Commande
|
||||
|
||||
Un élément de menu de style commande dans un menu pour indiquer des raccourcis clavier.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemCommand } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleCommandClick = () => {
|
||||
console.log("Command clicked!");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemCommand
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
firstHotKey="⌘"
|
||||
secondHotKey="1"
|
||||
isSelected={true}
|
||||
onClick={handleCommandClick}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------------- | -------------- | ----------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| premierRaccourci | chaîne | Le premier raccourci clavier associé à la commande |
|
||||
| deuxièmeRaccourci | chaîne | Le deuxième raccourci clavier associé à la commande |
|
||||
| estSélectionné | booléen | Indique si l'élément de menu est sélectionné ou surligné |
|
||||
| onClick | fonction | Fonction de rappel déclenchée lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Draggable
|
||||
|
||||
Un élément de menu draggable conçu pour être utilisé dans un menu ou une liste où les éléments peuvent être glissés, et des actions supplémentaires peuvent être effectuées via les boutons d'icônes.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { IconAlertCircle } from "@tabler/icons-react";
|
||||
import { MenuItemDraggable } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleMenuItemClick = (event) => {
|
||||
console.log("Menu item clicked!", event);
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemDraggable
|
||||
LeftIcon={IconBell}
|
||||
accent="default"
|
||||
iconButtons={[{ Icon: IconAlertCircle, onClick: handleButtonClick }]}
|
||||
isTooltipOpen={false}
|
||||
onClick={handleMenuItemClick}
|
||||
text="Menu item draggable"
|
||||
isDragDisabled={false}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| -------------- | -------------- | ------------------------------------------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| accent | chaîne | La couleur d'accent de l'élément de menu. Elle peut être `défaut`, `placeholder`, et `danger` |
|
||||
| boutonsIcône | tableau | Un tableau d'objets représentant des boutons d'icônes supplémentaires associés à l'élément de menu |
|
||||
| isTooltipOpen | booléen | Contrôle la visibilité de l'infobulle associée à l'élément de menu |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lors du clic sur le lien |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| isDragDisabled | booléen | Indique si le glissement est désactivé |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Sélection multiple
|
||||
|
||||
Fournit un moyen d'implémenter une fonctionnalité de sélection multiple avec une case à cocher associée.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemMultiSelect } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<MenuItemMultiSelect
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
selected={false}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| -------------- | -------------- | ----------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
|
||||
| onSelectChange | fonction | Fonction de rappel déclenchée lorsque l'état de la case à cocher change |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Sélection multiple avec avatar
|
||||
|
||||
Un élément de menu multi-sélection avec un avatar, une case à cocher pour la sélection, et du contenu textuel.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { MenuItemMultiSelectAvatar } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const imageUrl =
|
||||
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
|
||||
|
||||
return (
|
||||
<MenuItemMultiSelectAvatar
|
||||
avatar={<img src={imageUrl} alt="Avatar" />}
|
||||
text="First Option"
|
||||
selected={false}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| -------------- | ----------- | ----------------------------------------------------------------------- |
|
||||
| avatar | `ReactNode` | L'avatar ou l'icône à afficher sur le côté gauche de l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
|
||||
| onSelectChange | fonction | Fonction de rappel déclenchée lorsque l'état de la case à cocher change |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Naviguer
|
||||
|
||||
Un élément de menu comportant une icône facultative à gauche, un contenu textuel, et une icône de chevron droite.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemNavigate } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleNavigation = () => {
|
||||
console.log("Navigate to another page");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemNavigate
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
onClick={handleNavigation}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | -------------- | ----------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Sélectionner
|
||||
|
||||
Un élément de menu sélectionnable, avec un contenu facultatif à gauche (icône et texte) et un indicateur (icône de coche) pour l'état sélectionné.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from "@tabler/icons-react";
|
||||
import { MenuItemSelect } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleSelection = () => {
|
||||
console.log("Menu item selected");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemSelect
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
selected={true}
|
||||
disabled={false}
|
||||
hovered={false}
|
||||
onClick={handleSelection}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | -------------- | ----------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
|
||||
| désactivé | booléen | Indique si l'élément de menu est désactivé |
|
||||
| survolé | booléen | Indique si l'élément de menu est actuellement survolé |
|
||||
| auClique | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Sélectionner Avatar
|
||||
|
||||
Un élément de menu sélectionnable avec un avatar, avec un contenu facultatif à gauche (avatar et texte) et un indicateur (icône de coche) pour l'état sélectionné.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { MenuItemSelectAvatar } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const imageUrl =
|
||||
"data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAAASgEbAAUAAAABAAAAUgEoAAMAAAABAAIAAIdpAAQAAAABAAAAWgAAAAAAAABgAAAAAQAAAGAAAAABAAOgAQADAAAAAQABAACgAgAEAAAAAQAAABSgAwAEAAAAAQAAABQAAAAA/8AAEQgAFAAUAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/bAEMACwgICggHCwoJCg0MCw0RHBIRDw8RIhkaFBwpJCsqKCQnJy0yQDctMD0wJyc4TDk9Q0VISUgrNk9VTkZUQEdIRf/bAEMBDA0NEQ8RIRISIUUuJy5FRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRf/dAAQAAv/aAAwDAQACEQMRAD8Ava1q728otYY98joSCTgZrnbXWdTtrhrfVZXWLafmcAEkdgR/hVltQku9Q8+OIEBcGOT+ID0PY1ka1KH2u8ToqnPLbmIqG7u6LtbQ7RXBRec4Uck9eKXcPWsKDWVnhWSL5kYcFelSf2m3901POh8jP//QoyIAnTuKpXsY82NsksUyWPU5q/L9z8RVK++/F/uCsVsaEURwgA4HtT9x9TUcf3KfUGh//9k=";
|
||||
|
||||
const handleSelection = () => {
|
||||
console.log("Menu item selected");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemSelectAvatar
|
||||
avatar={<img src={imageUrl} alt="Avatar" />}
|
||||
text="First Option"
|
||||
selected={true}
|
||||
disabled={false}
|
||||
hovered={false}
|
||||
testId="menu-item-test"
|
||||
onClick={handleSelection}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | ----------- | ----------------------------------------------------------------------- |
|
||||
| avatar | `ReactNode` | L'avatar ou l'icône à afficher sur le côté gauche de l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
|
||||
| désactivé | booléen | Indique si l'élément de menu est désactivé |
|
||||
| survolé | booléen | Indique si l'élément de menu est actuellement survolé |
|
||||
| testId | chaîne | L'attribut data-testid à des fins de test |
|
||||
| onClick | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Sélection de Couleur
|
||||
|
||||
Un élément de menu sélectionnable avec un échantillon de couleur pour les scénarios où vous souhaitez que les utilisateurs choisissent une couleur dans un menu.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { MenuItemSelectColor } from "twenty-ui/display";
|
||||
|
||||
export const MyComponent = () => {
|
||||
const handleSelection = () => {
|
||||
console.log("Menu item selected");
|
||||
};
|
||||
|
||||
return (
|
||||
<MenuItemSelectColor
|
||||
color="green"
|
||||
selected={true}
|
||||
disabled={false}
|
||||
hovered={true}
|
||||
variant="default"
|
||||
onClick={handleSelection}
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| couleur | chaîne | La couleur à thème à afficher comme échantillon dans l'élément de menu. Les options incluent: `vert`, `turquoise`, `ciel`, `bleu`, `violet`, `rose`, `rouge`, `orange`, `jaune`, `gris` |
|
||||
| sélectionné | booléen | Indique si l'élément de menu est sélectionné (coché) |
|
||||
| désactivé | booléen | Indique si l'élément de menu est désactivé |
|
||||
| survolé | booléen | Indique si l'élément de menu est actuellement survolé |
|
||||
| variante | chaîne | La variante de l'échantillon de couleur. Elle peut être `défaut` ou `pipeline` |
|
||||
| onClick | fonction | Fonction de rappel à déclencher lorsqu'on clique sur l'élément de menu |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
### Basculer
|
||||
|
||||
Un élément de menu avec un interrupteur à bascule associé pour permettre aux utilisateurs d'activer ou de désactiver une fonctionnalité spécifique
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { IconBell } from '@tabler/icons-react';
|
||||
|
||||
import { MenuItemToggle } from 'twenty-ui/display';
|
||||
|
||||
export const MyComponent = () => {
|
||||
|
||||
return (
|
||||
<MenuItemToggle
|
||||
LeftIcon={IconBell}
|
||||
text="First Option"
|
||||
toggled={true}
|
||||
toggleSize="small"
|
||||
className
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| --------------------- | -------------- | -------------------------------------------------------------------------------------- |
|
||||
| LeftIcon | ComposantIcône | Une icône à gauche optionnelle affichée avant le texte dans l'élément de menu |
|
||||
| texte | chaîne | Le contenu texte de l'élément de menu |
|
||||
| basculé | booléen | Indique si l'interrupteur est en "marche" ou "arrêt". |
|
||||
| surChangementBasculer | fonction | Fonction de rappel déclenchée lorsque l'état de l'interrupteur change. |
|
||||
| tailleBasculer | chaîne | La taille de l'interrupteur à bascule. Cela peut être soit \ |
|
||||
| nomDeClasse | chaîne | Nom facultatif pour un style supplémentaire |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
title: Barre d'étape
|
||||
image: /images/user-guide/api/api.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/api/api.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Affiche la progression à travers une séquence d'étapes numérotées en surlignant l'étape active. Il affiche un conteneur avec des étapes, chacune représentée par le composant `Step`.
|
||||
|
||||
<Tabs>
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { StepBar } from "@/ui/navigation/step-bar/components/StepBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<StepBar activeStep={2}>
|
||||
<StepBar.Step>Step 1</StepBar.Step>
|
||||
<StepBar.Step>Step 2</StepBar.Step>
|
||||
<StepBar.Step>Step 3</StepBar.Step>
|
||||
</StepBar>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description |
|
||||
| ----------- | ------ | ------------------------------------------------------------------------------------------------------------------------- |
|
||||
| étapeActive | nombre | L'index de l'étape actuellement active. Cela détermine quelle étape doit être visuellement mise en valeur |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
title: Retour d'information
|
||||
image: /images/user-guide/emails/emails_header.png
|
||||
---
|
||||
|
||||
<Frame>
|
||||
<img src="/images/user-guide/emails/emails_header.png" alt="Header" />
|
||||
</Frame>
|
||||
|
||||
Indique le progrès ou le compte à rebours et passe de droite à gauche.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { ProgressBar } from "twenty-ui/feedback";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return (
|
||||
<ProgressBar
|
||||
duration={6000}
|
||||
delay={0}
|
||||
easing="easeInOut"
|
||||
barHeight={10}
|
||||
barColor="#4bb543"
|
||||
autoStart={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description | Par défaut |
|
||||
| -------------------- | ------- | --------------------------------------------------------------------------------------------------------- | ---------- |
|
||||
| durée | nombre | La durée totale de l'animation de la barre de progression en millisecondes | 3 |
|
||||
| délai | nombre | Le délai de démarrage de l'animation de la barre de progression en millisecondes | 0 |
|
||||
| adoucissement | chaîne | Fonction d'adoucissement pour l'animation de la barre de progression | easeInOut |
|
||||
| hauteurBarre | nombre | La hauteur de la barre en pixels | 24 |
|
||||
| couleurBarre | chaîne | La couleur de la barre | gray80 |
|
||||
| démarrageAutomatique | booléen | Si `true`, l'animation de la barre de progression commence automatiquement lorsque le composant est monté | `vrai` |
|
||||
|
||||
</Tab>
|
||||
</Tabs>
|
||||
|
||||
## Barre de Progression Circulaire
|
||||
|
||||
Indique le progrès d'une tâche, souvent utilisé sur des écrans de chargement ou dans des zones où vous souhaitez communiquer des processus en cours à l'utilisateur.
|
||||
|
||||
<Tabs>
|
||||
|
||||
<Tab title="Usage">
|
||||
|
||||
```jsx
|
||||
import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
|
||||
|
||||
export const MyComponent = () => {
|
||||
return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
|
||||
};
|
||||
```
|
||||
|
||||
</Tab>
|
||||
|
||||
<Tab title="Props">
|
||||
|
||||
| Propriétés | Type | Description | Par défaut |
|
||||
| ------------ | ------ | ------------------------------------------------- | --------------- |
|
||||
| taille | nombre | La taille de la barre de progression circulaire | 50 |
|
||||
| largeurBarre | nombre | La largeur de la ligne de la barre de progression | 5 |
|
||||
| couleurBarre | chaîne | La couleur de la barre de progression | couleurCourante |
|
||||
|
||||
</Tab>
|
||||
|
||||
</Tabs>
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
title: FAQ sur le modèle de données
|
||||
info: Questions fréquemment posées concernant la configuration du modèle de données, les limitations et les futures fonctionnalités.
|
||||
info: "Questions fréquemment posées concernant la configuration du modèle de données, les limitations et les futures fonctionnalités."
|
||||
image: /images/user-guide/what-is-twenty/faq.png
|
||||
sectionInfo: Modèle de données flexible conçu pour soutenir vos processus métier uniques
|
||||
---
|
||||
@@ -20,9 +20,7 @@ Pas encore. L'ordre des objets dans la navigation est actuellement fixe, mais ce
|
||||
Tous les objets actifs apparaissent dans la navigation. Vous pouvez désactiver les objets dont vous n'avez pas besoin sous **Paramètres → Modèle de données**.
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="Can I delete standard objects (People, Companies, etc.)?">
|
||||
Vous pouvez désactiver les objets standard, mais vous ne pouvez pas les supprimer définitivement.
|
||||
</Accordion>
|
||||
<Accordion title="Can I delete standard objects (People, Companies, etc.)?">Vous pouvez désactiver les objets standard, mais vous ne pouvez pas les supprimer définitivement.</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Capacités des champs
|
||||
@@ -45,8 +43,7 @@ Notre API GraphQL utilise les deux formes pour différentes opérations :
|
||||
- `createPerson` (singulier) pour les actions sur un seul enregistrement
|
||||
- `createPeople` (pluriel) pour les opérations en masse
|
||||
|
||||
Cela crée des limitations lorsque les formes singulier et pluriel sont identiques, mais cela améliore l'expérience développeur.
|
||||
</Accordion>
|
||||
Cela crée des limitations lorsque les formes singulier et pluriel sont identiques, mais cela améliore l'expérience développeur. </Accordion>
|
||||
|
||||
<Accordion title="Why are some field names protected?">
|
||||
Certains noms de champs comme `Type` ou `Application` sont réservés à l'usage du système. Choisissez des noms alternatifs comme `Catégorie` ou `Classification`.
|
||||
@@ -72,17 +69,13 @@ Le réagencement des champs sera disponible avec les mises en page personnalisé
|
||||
## Accès et Permissions
|
||||
|
||||
<AccordionGroup>
|
||||
<Accordion title="Where can I see and edit my data model?">
|
||||
Vous pouvez accéder à votre modèle de données sous **Paramètres → Modèle de données**.
|
||||
</Accordion>
|
||||
<Accordion title="Where can I see and edit my data model?">Vous pouvez accéder à votre modèle de données sous **Paramètres → Modèle de données**.</Accordion>
|
||||
|
||||
<Accordion title="Why can't I see the Data Model under Settings?">
|
||||
Contactez votre administrateur d'espace de travail. L'accès au modèle de données est généralement limité aux administrateurs uniquement.
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How many custom objects or fields can I create?">
|
||||
Vous pouvez créer autant d'objets et de champs personnalisés que vous le souhaitez - le prix ne changera pas.
|
||||
</Accordion>
|
||||
<Accordion title="How many custom objects or fields can I create?">Vous pouvez créer autant d'objets et de champs personnalisés que vous le souhaitez - le prix ne changera pas.</Accordion>
|
||||
</AccordionGroup>
|
||||
|
||||
## Besoin de plus d'aide ?
|
||||
|
||||
@@ -25,9 +25,7 @@ Vous pouvez **voir, modifier, supprimer des enregistrements** à partir de là a
|
||||
- Utilisez la **barre de recherche** (appuyez sur `/` pour y accéder instantanément)
|
||||
- Ouvrir la section **Paramètres**
|
||||
|
||||
<Warning>
|
||||
Veuillez noter que notre documentation API est accessible sous la section Paramètres et non dans le guide de l'utilisateur.
|
||||
</Warning>
|
||||
<Warning>Veuillez noter que notre documentation API est accessible sous la section Paramètres et non dans le guide de l'utilisateur.</Warning>
|
||||
- Ayez un accès direct à vos **vues favorites**. Les favoris sont uniques pour chaque utilisateur.
|
||||
- Alternez entre différents objets
|
||||
- **Créez des automatisations** en utilisant des workflows
|
||||
|
||||
@@ -50,9 +50,9 @@ Utilisez l'importation CSV via le menu Commande `Cmd + K` (Mac) ou `Ctrl + K` (W
|
||||
|
||||
- **Adresses email** - supprimez les doublons (exigence de l'objet Personnes)
|
||||
- **Domaine** - supprimez les doublons (exigence de l'objet Entreprises)
|
||||
<Warning>
|
||||
Veuillez noter que les URL de domaine créées par la synchronisation avec votre boîte aux lettres et votre calendrier ont le format suivant `https://domain.com`
|
||||
</Warning>
|
||||
<Warning>
|
||||
|
||||
Veuillez noter que les URL de domaine créées par la synchronisation avec votre boîte aux lettres et votre calendrier ont le format suivant `https://domain.com` </Warning>
|
||||
|
||||
- **Formats de date** - assurez une uniformité (JJJJ-MM-JJ) ou modifiez ce format sous Paramètres → Expérience
|
||||
- **Numéros de téléphone** - utilisez le format international (+1234567890)
|
||||
|
||||
@@ -15,8 +15,7 @@ sectionInfo: Comprendre comment fonctionne la tarification de Twenty.
|
||||
<Accordion title="Can I use Twenty for free while self-hosting?">
|
||||
Oui, vous pouvez utiliser Twenty gratuitement tout en l'hébergeant vous-même. Vous aurez accès à tout ce qui est inclus dans l'abonnement Pro (cloud), sauf le support de notre équipe centrale. Le support est accessible via notre communauté Discord.
|
||||
|
||||
Si vous souhaitez héberger vous-même et avoir accès aux fonctionnalités incluses dans l'abonnement Organisation (cloud), y compris le support de notre équipe centrale, vous pouvez le faire en choisissant les licences Organisation payantes, disponibles en auto-hébergement.
|
||||
</Accordion>
|
||||
Si vous souhaitez héberger vous-même et avoir accès aux fonctionnalités incluses dans l'abonnement Organisation (cloud), y compris le support de notre équipe centrale, vous pouvez le faire en choisissant les licences Organisation payantes, disponibles en auto-hébergement. </Accordion>
|
||||
|
||||
<Accordion title="Do you offer free seats for view-only users?">
|
||||
Nous n'offrons pas de sièges gratuits. La tarification se fait par utilisateur et chaque utilisateur a besoin d'une licence pour accéder à Twenty.
|
||||
@@ -52,8 +51,7 @@ Chaque action de workflow consomme des crédits en fonction de sa complexité :
|
||||
- **Opérations plus complexes** telles que des nœuds de code et des requêtes vers des services externes consomment plus de crédits
|
||||
- **Requêtes IA** (bientôt disponible !) consommeront également plus de crédits en fonction de l'utilisation
|
||||
|
||||
Les crédits sont déduits en temps réel lors de l'exécution des workflows. Vous pouvez suivre votre utilisation dans **Paramètres → Facturation** pour suivre la consommation et les crédits restants.
|
||||
</Accordion>
|
||||
Les crédits sont déduits en temps réel lors de l'exécution des workflows. Vous pouvez suivre votre utilisation dans **Paramètres → Facturation** pour suivre la consommation et les crédits restants. </Accordion>
|
||||
|
||||
<Accordion title="Can I buy more workflow credits?">
|
||||
Vous pouvez acheter des crédits supplémentaires sous `Paramètres → Facturation`.
|
||||
|
||||
@@ -16,17 +16,12 @@ sectionInfo: Configurez les paramètres et préférences de votre espace de trav
|
||||
Absolument. Vous pouvez créer un nouvel espace de travail en cliquant sur le menu déroulant en haut à gauche de l'écran (celui qui contient le nom de votre espace de travail), sur les trois points, puis sur `Créer un espace de travail`.
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="I accidentally created multiple workspaces but only need one. What should I do?">
|
||||
Il suffit de supprimer les espaces de travail dont vous n'avez plus besoin, vous pouvez le faire sous `Paramètres → Paramètres de l'espace de travail`.
|
||||
<Accordion title="I accidentally created multiple workspaces but only need one. What should I do?">Il suffit de supprimer les espaces de travail dont vous n'avez plus besoin, vous pouvez le faire sous `Paramètres → Paramètres de l'espace de travail`.
|
||||
|
||||
<Warning>
|
||||
Ne supprimez pas votre compte (accessible sous Paramètres → Paramètres de profil) : votre compte est partagé entre les différents espaces de travail.
|
||||
</Warning>
|
||||
<Warning>Ne supprimez pas votre compte (accessible sous Paramètres → Paramètres de profil) : votre compte est partagé entre les différents espaces de travail.</Warning>
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How can I disable my workspace?">
|
||||
Si vous souhaitez juste désactiver votre espace de travail (et non le supprimer), allez dans `Paramètres → Facturation` et cliquez sur `Annuler le plan`.
|
||||
</Accordion>
|
||||
<Accordion title="How can I disable my workspace?">Si vous souhaitez juste désactiver votre espace de travail (et non le supprimer), allez dans `Paramètres → Facturation` et cliquez sur `Annuler le plan`.</Accordion>
|
||||
|
||||
<Accordion title="How can I delete my workspace?">
|
||||
Vous pouvez le faire dans `Paramètres → Paramètres de l'espace de travail`. Nous espérons vous revoir bientôt, merci d'avoir essayé Twenty !
|
||||
@@ -69,8 +64,7 @@ Oui! Rendez-vous dans `Paramètres → Domaines` pour configurer un domaine pers
|
||||
Les fonctionnalités de Lab sont des capacités expérimentales que vous pouvez tester avant leur sortie officielle. Accédez-y sous `Paramètres → Versions → Lab`. Des fonctionnalités comme la sélection de Dossier de Messages sont stables et utiles, mais rappelez-vous que les fonctionnalités de lab peuvent changer ou être supprimées dans les versions futures.
|
||||
</Accordion>
|
||||
|
||||
<Accordion title="How do I change my workspace appearance and regional settings?">
|
||||
Allez dans `Paramètres → Expérience` pour personnaliser :
|
||||
<Accordion title="How do I change my workspace appearance and regional settings?">Allez dans `Paramètres → Expérience` pour personnaliser :
|
||||
- **Thème** : Clair, sombre ou basé sur le système
|
||||
- **Paramètres régionaux** : Langue, fuseau horaire, formats de date/numéro
|
||||
- **Format du calendrier** : Premier jour de la semaine, format de l'heure (12/24 heures)
|
||||
|
||||
@@ -60,9 +60,9 @@ Choisissez comment le flux de travail doit gérer la sélection des enregistreme
|
||||
|
||||
- **Unique** : Le(s) enregistrement(s) sélectionné(s) seront transmis à votre flux de travail. Cela est configuré pour un objet donné. Plusieurs enregistrements peuvent être sélectionnés avant de déclencher le flux de travail. Le flux de travail s'exécutera autant de fois qu'il y a d'enregistrements sélectionnés.
|
||||
|
||||
<Warning>
|
||||
Vous ne pouvez pas exécuter plus de 100 flux de travail en parallèle à un moment donné.
|
||||
</Warning>
|
||||
<Warning>
|
||||
Vous ne pouvez pas exécuter plus de 100 flux de travail en parallèle à un moment donné.
|
||||
</Warning>
|
||||
|
||||
- **En masse** : Les enregistrements sélectionnés seront passés à votre flux de travail. Cela est configuré pour un objet donné. Plusieurs enregistrements peuvent être sélectionnés avant de déclencher le flux de travail. Le flux de travail s'exécutera une fois, en fournissant la liste entière des enregistrements comme entrée. Cela signifie que le flux de travail doit contenir une action Itérateur. C'est idéal pour les personnes qui souhaitent optimiser/limiter le nombre d'exécutions de flux de travail.
|
||||
|
||||
|
||||
@@ -57,9 +57,7 @@ Les formulaires sont actuellement conçus uniquement pour les déclencheurs manu
|
||||
|
||||
**Problème** : Atteindre la limite de 100 flux de travail concurrents par espace de travail.
|
||||
|
||||
<Warning>
|
||||
Vous ne pouvez pas exécuter plus de 100 flux de travail en parallèle à tout moment par espace de travail.
|
||||
</Warning>
|
||||
<Warning>Vous ne pouvez pas exécuter plus de 100 flux de travail en parallèle à tout moment par espace de travail.</Warning>
|
||||
|
||||
**Solutions** :
|
||||
|
||||
|
||||
Reference in New Issue
Block a user