@@ -27,7 +27,7 @@ title: كائنات مخصصة
لإضافة كائن مخصص، سيقوم عضو مساحة العمل بالاستعلام عن واجهة برمجة التطبيقات /metadata. يقوم هذا بتحديث البيانات الوصفية وفقًا لذلك ويحسب مخطط GraphQL استنادًا إلى البيانات الوصفية، ويخزنها في ذاكرة GQL للاستخدام لاحقًا.
-
+
@@ -35,5 +35,5 @@ title: كائنات مخصصة
لجلب البيانات، تتضمن العملية إجراء استعلامات من خلال نقطة النهاية /graphql وتمريرها من خلال محلل الاستعلام.
-
+
diff --git a/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/server-commands.mdx b/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/server-commands.mdx
index 0e6215d822..111efbb093 100644
--- a/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/server-commands.mdx
+++ b/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/server-commands.mdx
@@ -60,9 +60,11 @@ npx nx run twenty-server:command workspace:sync-metadata -f
```
- سيؤدي هذا إلى إسقاط قاعدة البيانات وإعادة تشغيل الهجرات والبذور.
- تأكد من عمل نسخة احتياطية لأي بيانات تريد الاحتفاظ بها قبل تشغيل هذا الأمر.
+سيؤدي هذا إلى إسقاط قاعدة البيانات وإعادة تشغيل الهجرات والبذور.
+
+تأكد من عمل نسخة احتياطية لأي بيانات تريد الاحتفاظ بها قبل تشغيل هذا الأمر.
+
## "التقنية المستخدمة"
diff --git a/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/zapier.mdx b/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/zapier.mdx
index 1bf77436c1..59254f9538 100644
--- a/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/zapier.mdx
+++ b/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/zapier.mdx
@@ -43,7 +43,9 @@ cp .env.example .env
## التطوير
- تأكد من تشغيل `yarn build` قبل أي أمر `zapier`.
+
+تأكد من تشغيل `yarn build` قبل أي أمر `zapier`.
+
### تجربة
diff --git a/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/best-practices-front.mdx b/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/best-practices-front.mdx
index cca3a7a64d..9384b6f2fa 100644
--- a/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/best-practices-front.mdx
+++ b/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/best-practices-front.mdx
@@ -13,7 +13,9 @@ title: أفضل الممارسات
من الجيد إنشاء أكبر عدد ممكن من الذرات لتخزين الحالة الخاصة بك.
- من الأفضل استخدام ذرات إضافية بدلاً من محاولة أن تكون مقتضبًا باستخدام تمرير الخصائص.
+
+من الأفضل استخدام ذرات إضافية بدلاً من محاولة أن تكون مقتضبًا باستخدام تمرير الخصائص.
+
```tsx
diff --git a/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/work-with-figma.mdx b/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/work-with-figma.mdx
index 001e9b0021..d374fa38e1 100644
--- a/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/work-with-figma.mdx
+++ b/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/work-with-figma.mdx
@@ -13,7 +13,9 @@ info: تعرّف على كيفية التعاون باستخدام Figma الخ
تتوفر المميزات الرئيسية فقط للمستخدمين الذين قاموا بتسجيل الدخول، مثل وضع المطور والقدرة على اختيار إطار مخصص.
- لن تتمكن من التعاون بفعالية بدون حساب.
+
+لن تتمكن من التعاون بفعالية بدون حساب.
+
## هيكل فيجما
diff --git a/packages/twenty-docs/l/ar/developers/contribute/capabilities/local-setup.mdx b/packages/twenty-docs/l/ar/developers/contribute/capabilities/local-setup.mdx
index 44801abf65..a25bc5697c 100644
--- a/packages/twenty-docs/l/ar/developers/contribute/capabilities/local-setup.mdx
+++ b/packages/twenty-docs/l/ar/developers/contribute/capabilities/local-setup.mdx
@@ -6,66 +6,66 @@ description: الدليل للمساهمين (أو المطورين الفضول
## المتطلبات الأساسية
-
- قبل أن تتمكن من تثبيت واستخدام Twenty، تأكد من تثبيت الأمور التالية على جهاز الكمبيوتر الخاص بك:
+
- * [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)
+قبل أن تتمكن من تثبيت واستخدام Twenty، تأكد من تثبيت الأمور التالية على جهاز الكمبيوتر الخاص بك:
+* [Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
+* [Node v24.5.0](https://nodejs.org/en/download)
+* [yarn v4](https://yarnpkg.com/getting-started/install)
+* [nvm](https://github.com/nvm-sh/nvm/blob/master/README.md)
-
- لن يعمل `npm` ، يجب عليك استخدام `yarn` بدلًا من ذلك. يأتي Yarn الآن مع Node.js، لذا لست بحاجة إلى تثبيته بشكل منفصل.
- عليك فقط تشغيل `corepack enable` لتفعيل Yarn إذا لم تقم بذلك بعد.
-
-
+
+لن يعمل `npm` ، يجب عليك استخدام `yarn` بدلًا من ذلك. يأتي Yarn الآن مع Node.js، لذا لست بحاجة إلى تثبيته بشكل منفصل.
+عليك فقط تشغيل `corepack enable` لتفعيل Yarn إذا لم تقم بذلك بعد.
+
-
- 1. ثبّت WSL
- افتح PowerShell كمسؤول ثم نفّذ:
+
- ```powershell
- wsl --install
- ```
+
- يجب أن ترى الآن مطالبة لإعادة تشغيل جهاز الكمبيوتر الخاص بك. إذا لم يكن كذلك، فأعد تشغيله يدويًا.
+1. ثبّت WSL
+ افتح PowerShell كمسؤول ثم نفّذ:
+```powershell
+wsl --install
+```
+يجب أن ترى الآن مطالبة لإعادة تشغيل جهاز الكمبيوتر الخاص بك. إذا لم يكن كذلك، فأعد تشغيله يدويًا.
- عند إعادة التشغيل، ستُفتح نافذة PowerShell وسيتم تثبيت Ubuntu. قد يستغرق هذا وقتًا طويلاً.
- سترى مطالبة لإنشاء اسم المستخدم وكلمة المرور لتثبيت Ubuntu الخاص بك.
+عند إعادة التشغيل، ستُفتح نافذة PowerShell وسيتم تثبيت Ubuntu. قد يستغرق هذا وقتًا طويلاً.
+سترى مطالبة لإنشاء اسم المستخدم وكلمة المرور لتثبيت Ubuntu الخاص بك.
- 2. تثبيت وإعداد git
+2. تثبيت وإعداد git
- ```bash
- sudo apt-get install git
+```bash
+sudo apt-get install git
- git config --global user.name "Your Name"
+git config --global user.name "Your Name"
- git config --global user.email "youremail@domain.com"
- ```
+git config --global user.email "youremail@domain.com"
+```
- 3. تثبيت nvm و node.js و yarn
+3. تثبيت nvm و node.js و yarn
-
- استخدم `nvm` لتثبيت نسخة `node` الصحيحة. الملف `.nvmrc` يضمن استخدام جميع المشاركين لنفس النسخة.
-
+
+استخدم `nvm` لتثبيت نسخة `node` الصحيحة. الملف `.nvmrc` يضمن استخدام جميع المشاركين لنفس النسخة.
+
- ```bash
- sudo apt-get install curl
+```bash
+sudo apt-get install curl
- curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
- ```
+curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
+```
+أغلق وأعد فتح برنامجك الطرفي لاستخدام nvm. ثم قم بتشغيل الأوامر التالية.
- أغلق وأعد فتح برنامجك الطرفي لاستخدام nvm. ثم قم بتشغيل الأوامر التالية.
+```bash
- ```bash
+nvm install # يثبت إصدار node الموصى به
- nvm install # يثبت إصدار node الموصى به
+nvm use # استخدم إصدار node الموصى به
- nvm use # استخدم إصدار node الموصى به
+corepack enable
+```
- corepack enable
- ```
-
+
---
@@ -75,19 +75,19 @@ description: الدليل للمساهمين (أو المطورين الفضول
في الطرفية الخاصة بك، قم بتشغيل الأمر التالي.
-
- إذا لم تكن قد أعددت مفاتيح SSH بالفعل، يمكنك معرفة كيفية القيام بذلك [هنا](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh).
+
+إذا لم تكن قد أعددت مفاتيح SSH بالفعل، يمكنك معرفة كيفية القيام بذلك [هنا](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/about-ssh).
+```bash
+git clone git@github.com:twentyhq/twenty.git
+```
+
+
- ```bash
- git clone git@github.com:twentyhq/twenty.git
- ```
-
+```bash
+git clone https://github.com/twentyhq/twenty.git
+```
-
- ```bash
- git clone https://github.com/twentyhq/twenty.git
- ```
-
+
## الخطوة 2: انتقل إلى جذر المشروع
@@ -104,20 +104,16 @@ cd twenty
**الخيار 1 (المفضل):** لتوفير قاعدة بياناتك محليًا:
استخدم الرابط التالي لتثبيت Postgresql على جهاز Linux الخاص بك: [تثبيت Postgresql](https://www.postgresql.org/download/linux/)
-
```bash
psql postgres -c "CREATE DATABASE \"default\";" -c "CREATE DATABASE test;"
```
-
ملاحظة: قد تحتاج إلى إضافة `sudo -u postgres` إلى الأمر قبل `psql` لتجنب أخطاء الإذن.
**الخيار 2:** إذا كنت قد قمت بتثبيت docker:
-
```bash
make -C packages/twenty-docker postgres-on-docker
```
-
**الخيار 1 (المفضل):** لتوفير قاعدة بياناتك محليًا مع `brew`:
@@ -129,7 +125,6 @@ cd twenty
```
يمكنك التحقق مما إذا كان خادم PostgreSQL يعمل بتنفيذ:
-
```bash
brew services list
```
@@ -138,7 +133,6 @@ cd twenty
عبر Homebrew على MacOS. بدلاً من ذلك، فإنه ينشئ دور PostgreSQL يطابق
اسم المستخدم الخاص بك في MacOS (مثل "john").
للتحقق وإنشاء المستخدم `postgres` إذا لزم الأمر، اتبع هذه الخطوات:
-
```bash
# قم بالاتصال بPostgreSQL
psql postgres
@@ -147,59 +141,48 @@ cd twenty
```
بمجرد أن تكون عند مطالبة psql (postgres=#)، قم بتشغيل:
-
- ```bash
- # قائمة الأدوار الموجودة في PostgreSQL
- \du
- ```
-
+ ```bash
+ # قائمة الأدوار الموجودة في PostgreSQL
+ \du
+ ```
سترى مخرجات مشابهة ل:
-
- ```bash
- اسم الأدوار | الخصائص | عضو في
- -----------+-------------+-----------
- john | مشرف نظام | {}
- ```
+ ```bash
+ اسم الأدوار | الخصائص | عضو في
+ -----------+-------------+-----------
+ john | مشرف نظام | {}
+ ```
إذا لم ترَ دور `postgres` مدرجًا، انتقل إلى الخطوة التالية.
قم بإنشاء دور `postgres` يدويًا:
-
- ```bash
- CREATE ROLE postgres WITH SUPERUSER LOGIN;
- ```
-
+ ```bash
+ CREATE ROLE postgres WITH SUPERUSER LOGIN;
+ ```
يقوم هذا بإنشاء دور مشرف نظام باسم `postgres` مع إمكانية تسجيل الدخول.
-
- ```bash
- اسم الدور | الخصائص | عضو في
- -----------+-------------+-----------
- postgres | مشرف نظام | {}
- john | مشرف نظام | {}
- ```
+ ```bash
+ اسم الدور | الخصائص | عضو في
+ -----------+-------------+-----------
+ postgres | مشرف نظام | {}
+ john | مشرف نظام | {}
+ ```
**الخيار 2:** إذا كنت قد قمت بتثبيت docker:
-
```bash
make -C packages/twenty-docker postgres-on-docker
```
-
يجب أن تُنفذ جميع الخطوات التالية في تيرمينال WSL (داخل جهازك الافتراضي)
**الخيار 1:** لتوفير قاعدة بيانات Postgresql الخاصة بك محليًا:
استخدم الرابط التالي لتثبيت Postgresql على جهاز Linux الافتراضي الخاص بك: [تثبيت Postgresql](https://www.postgresql.org/download/linux/)
-
```bash
psql postgres -c "CREATE DATABASE \"default\";" -c "CREATE DATABASE test;"
```
-
ملاحظة: قد تحتاج إلى إضافة `sudo -u postgres` إلى الأمر قبل `psql` لتجنب أخطاء الإذن.
**الخيار 2:** إذا كنت قد قمت بتثبيت docker:
تشغيل Docker على WSL يضيف طبقة إضافية من التعقيد.
استخدم هذا الخيار فقط إذا كنت مرتاحًا مع الخطوات الإضافية المتضمنة، بما في ذلك تشغيل [Docker Desktop WSL2](https://docs.docker.com/desktop/wsl).
-
```bash
make -C packages/twenty-docker postgres-on-docker
```
@@ -218,35 +201,28 @@ cd twenty
استخدم الرابط التالي لتثبيت Redis على جهاز Linux: [تثبيت Redis](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
**الخيار 2:** إذا كنت قد قمت بتثبيت docker:
-
```bash
make -C packages/twenty-docker redis-on-docker
```
-
**الخيار 1 (المفضل):** لتوفير Redis الخاص بك محليًا مع `brew`:
-
```bash
brew install redis
```
-
ابدأ خادم redis الخاص بك:
`brew services start redis`
**الخيار 2:** إذا كنت قد قمت بتثبيت docker:
-
```bash
make -C packages/twenty-docker redis-on-docker
```
-
**الخيار 1:** لتوفير Redis الخاص بك محليًا:
استخدم الرابط التالي لتثبيت Redis على جهاز Linux الافتراضي الخاص بك: [تثبيت Redis](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/install-redis-on-linux/)
**الخيار 2:** إذا كنت قد قمت بتثبيت docker:
-
```bash
make -C packages/twenty-docker redis-on-docker
```
@@ -267,7 +243,7 @@ cp ./packages/twenty-server/.env.example ./packages/twenty-server/.env
```
- **وضع تعدد مساحات العمل:** بشكل افتراضي، يعمل Twenty في وضع مساحة عمل واحدة حيث يمكن إنشاء مساحة عمل واحدة فقط. لتمكين دعم تعدد مساحات العمل (مفيد لاختبار الميزات المعتمدة على النطاقات الفرعية)، عيّن `IS_MULTIWORKSPACE_ENABLED=true` في ملف الخادم `.env`. راجع [وضع تعدد مساحات العمل](/l/ar/developers/self-host/capabilities/setup#multi-workspace-mode) للحصول على التفاصيل.
+**وضع تعدد مساحات العمل:** بشكل افتراضي، يعمل Twenty في وضع مساحة عمل واحدة حيث يمكن إنشاء مساحة عمل واحدة فقط. لتمكين دعم تعدد مساحات العمل (مفيد لاختبار الميزات المعتمدة على النطاقات الفرعية)، عيّن `IS_MULTIWORKSPACE_ENABLED=true` في ملف الخادم `.env`. راجع [وضع تعدد مساحات العمل](/l/ar/developers/self-host/capabilities/setup#multi-workspace-mode) للحصول على التفاصيل.
## الخطوة 6: تثبيت التبعيات
@@ -287,15 +263,12 @@ yarn
اعتمادًا على توزيعة Linux الخاصة بك، قد يتم بدء خادم Redis تلقائيًا.
إذا لم يكن كذلك، تحقق من [دليل تثبيت Redis](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/) لتوزيعتك.
-
- من المفترض أن يكون Redis قد تم تشغيله بالفعل. إذا لم يكن كذلك، قم بتشغيل:
-
+ من المفترض أن يكون Redis قد تم تشغيله بالفعل. إذا لم يكن كذلك، قم بتشغيل:
```bash
brew services start redis
```
-
اعتمادًا على توزيعة Linux الخاصة بك، قد يتم بدء خادم Redis تلقائيًا.
إذا لم يكن كذلك، تحقق من [دليل تثبيت ريديس](https://redis.io/docs/latest/operate/oss_and_stack/install/install-redis/) لتوزيعتك.
diff --git a/packages/twenty-docs/l/ar/developers/contribute/contribute.mdx b/packages/twenty-docs/l/ar/developers/contribute/contribute.mdx
index b37d09d91b..5bfe90d4e7 100644
--- a/packages/twenty-docs/l/ar/developers/contribute/contribute.mdx
+++ b/packages/twenty-docs/l/ar/developers/contribute/contribute.mdx
@@ -25,7 +25,6 @@ Twenty مفتوح المصدر ويرحب بمساهمات المجتمع. سو
أبلغ عن المشكلات أو اطلب ميزات
-
ساهم في واجهة المستخدم
diff --git a/packages/twenty-docs/l/ar/developers/extend/capabilities/apis.mdx b/packages/twenty-docs/l/ar/developers/extend/capabilities/apis.mdx
index e957970dd3..6039d0e7f5 100644
--- a/packages/twenty-docs/l/ar/developers/extend/capabilities/apis.mdx
+++ b/packages/twenty-docs/l/ar/developers/extend/capabilities/apis.mdx
@@ -17,7 +17,7 @@ import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
* **وثائق مخصصة**: يتم إنشاؤها خصيصًا لنموذج بيانات مساحة عملك
- وثائق واجهة برمجة التطبيقات المخصصة لك متاحة ضمن **الإعدادات → API & Webhooks** بعد إنشاء مفتاح API. نظرًا لأن Twenty تُنشئ واجهات برمجة تطبيقات تتطابق مع نموذج البيانات المخصص لديك، فإن الوثائق فريدة لمساحة عملك.
+وثائق واجهة برمجة التطبيقات المخصصة لك متاحة ضمن **الإعدادات → API & Webhooks** بعد إنشاء مفتاح API. نظرًا لأن Twenty تُنشئ واجهات برمجة تطبيقات تتطابق مع نموذج البيانات المخصص لديك، فإن الوثائق فريدة لمساحة عملك.
## نوعا واجهات برمجة التطبيقات
@@ -81,7 +81,7 @@ Authorization: Bearer YOUR_API_KEY
- يمنح مفتاح API الخاص بك الوصول إلى بيانات حساسة. لا تشاركه مع خدمات غير موثوقة. إذا تم اختراقه، عطّلْه فوراً وأنشئ مفتاحاً جديداً.
+يمنح مفتاح API الخاص بك الوصول إلى بيانات حساسة. لا تشاركه مع خدمات غير موثوقة. إذا تم اختراقه، عطّلْه فوراً وأنشئ مفتاحاً جديداً.
### تعيين دور لمفتاح API
@@ -143,5 +143,5 @@ Authorization: Bearer YOUR_API_KEY
| **حجم الدفعة** | 60 سجل لكل استدعاء |
- استخدم عمليات الدفعات لزيادة الإنتاجية — عالج ما يصل إلى 60 سجلًا في استدعاء API واحد بدلاً من إجراء طلبات فردية.
+استخدم عمليات الدفعات لزيادة الإنتاجية — عالج ما يصل إلى 60 سجلًا في استدعاء API واحد بدلاً من إجراء طلبات فردية.
diff --git a/packages/twenty-docs/l/ar/developers/extend/capabilities/apps.mdx b/packages/twenty-docs/l/ar/developers/extend/capabilities/apps.mdx
index 66635e5ff2..7ae2e29eb0 100644
--- a/packages/twenty-docs/l/ar/developers/extend/capabilities/apps.mdx
+++ b/packages/twenty-docs/l/ar/developers/extend/capabilities/apps.mdx
@@ -4,7 +4,7 @@ description: أنشئ وأدِر تخصيصات Twenty على هيئة كود.
---
- التطبيقات حاليًا في مرحلة الاختبار الألفا. الميزة تعمل لكنها لا تزال قيد التطور.
+التطبيقات حاليًا في مرحلة الاختبار الألفا. الميزة تعمل لكنها لا تزال قيد التطور.
## ما هي التطبيقات؟
@@ -32,13 +32,6 @@ description: أنشئ وأدِر تخصيصات Twenty على هيئة كود.
npx create-twenty-app@latest my-twenty-app
cd my-twenty-app
-# إذا كنت لا تستخدم yarn@4
-corepack enable
-yarn install
-
-# قم بالمصادقة باستخدام مفتاح واجهة برمجة التطبيقات الخاص بك (سيُطلب منك ذلك)
-yarn twenty auth:login
-
# ابدأ وضع التطوير: يُزامن التغييرات المحلية تلقائيًا مع مساحة العمل الخاصة بك
yarn twenty app:dev
```
@@ -154,7 +147,7 @@ my-twenty-app/
| `defineSkill()` | تعريفات مهارات وكيل الذكاء الاصطناعي |
- **تسمية الملفات مرنة.** يعتمد اكتشاف الكيانات على بنية الشجرة المجردة (AST) — إذ يقوم SDK بفحص ملفات المصدر لديك بحثًا عن النمط `export default define({...})`. يمكنك تنظيم ملفاتك ومجلداتك كيفما تشاء. التجميع حسب نوع الكيان (مثلًا، `logic-functions/` و`roles/`) هو مجرد عرف لتنظيم الشيفرة، وليس مطلبًا إلزاميًا.
+**تسمية الملفات مرنة.** يعتمد اكتشاف الكيانات على بنية الشجرة المجردة (AST) — إذ يقوم SDK بفحص ملفات المصدر لديك بحثًا عن النمط `export default define({...})`. يمكنك تنظيم ملفاتك ومجلداتك كيفما تشاء. التجميع حسب نوع الكيان (مثلًا، `logic-functions/` و`roles/`) هو مجرد عرف لتنظيم الشيفرة، وليس مطلبًا إلزاميًا.
مثال على كيان تم اكتشافه:
@@ -312,11 +305,11 @@ export default defineObject({
* يمكنك إنشاء كائنات جديدة باستخدام `yarn twenty entity:add`، والذي يرشدك خلال التسمية والحقول والعلاقات.
- **يتم إنشاء الحقول الأساسية تلقائيًا.** عند تعريف كائن مخصص، يضيف Twenty تلقائيًا حقولًا قياسية
- مثل `id` و`name` و`createdAt` و`updatedAt` و`createdBy` و`updatedBy` و`deletedAt`.
- لا تحتاج إلى تعريف هذه في مصفوفة `fields` — أضف فقط حقولك المخصصة.
- يمكنك تجاوز الحقول الافتراضية من خلال تعريف حقل بالاسم نفسه في مصفوفة `fields` الخاصة بك،
- لكن هذا غير مستحسن.
+**يتم إنشاء الحقول الأساسية تلقائيًا.** عند تعريف كائن مخصص، يضيف Twenty تلقائيًا حقولًا قياسية
+مثل `id` و`name` و`createdAt` و`updatedAt` و`createdBy` و`updatedBy` و`deletedAt`.
+لا تحتاج إلى تعريف هذه في مصفوفة `fields` — أضف فقط حقولك المخصصة.
+يمكنك تجاوز الحقول الافتراضية من خلال تعريف حقل بالاسم نفسه في مصفوفة `fields` الخاصة بك،
+لكن هذا غير مستحسن.
### تكوين التطبيق (application-config.ts)
@@ -550,27 +543,25 @@ yarn twenty function:execute --postInstall
### حمولة مشغل المسار
- **تغيير غير متوافق (v1.16، يناير 2026):** لقد تغير تنسيق حمولة مشغل المسار. قبل v1.16، كانت معلمات الاستعلام، ومعلمات المسار، وجسم الطلب تُرسل مباشرةً كحمولة. بدءًا من v1.16، أصبحت متداخلة داخل كائن منظَّم `RoutePayload`.
+**تغيير غير متوافق (v1.16، يناير 2026):** لقد تغير تنسيق حمولة مشغل المسار. قبل v1.16، كانت معلمات الاستعلام، ومعلمات المسار، وجسم الطلب تُرسل مباشرةً كحمولة. بدءًا من v1.16، أصبحت متداخلة داخل كائن منظَّم `RoutePayload`.
- **قبل v1.16:**
+**قبل v1.16:**
+```typescript
+const handler = async (params) => {
+ const { param1, param2 } = params; // Direct access
+};
+```
- ```typescript
- const handler = async (params) => {
- const { param1, param2 } = params; // Direct access
- };
- ```
+**بعد v1.16:**
+```typescript
+const handler = async (event: RoutePayload) => {
+ const { param1, param2 } = event.body; // Access via .body
+ const { queryParam } = event.queryStringParameters;
+ const { id } = event.pathParameters;
+};
+```
- **بعد v1.16:**
-
- ```typescript
- const handler = async (event: RoutePayload) => {
- const { param1, param2 } = event.body; // Access via .body
- const { queryParam } = event.queryStringParameters;
- const { id } = event.pathParameters;
- };
- ```
-
- **لترحيل الدوال الحالية:** حدّث المعالج لديك لفكّ البنية من `event.body` أو `event.queryStringParameters` أو `event.pathParameters` بدلاً من القراءة مباشرةً من كائن params.
+**لترحيل الدوال الحالية:** حدّث المعالج لديك لفكّ البنية من `event.body` أو `event.queryStringParameters` أو `event.pathParameters` بدلاً من القراءة مباشرةً من كائن params.
عندما يستدعي مشغّل المسار وظيفتك المنطقية، يتلقى كائنًا من النوع `RoutePayload` يتبع تنسيق AWS HTTP API v2. استورد النوع من `twenty-sdk`:
@@ -706,7 +697,7 @@ export default defineLogicFunction({
* يمكنك دمج `isTool` مع المشغِّلات — إذ يمكن للدالة أن تكون أداة (قابلة للاستدعاء من قِبل وكلاء الذكاء الاصطناعي) وأن تُشغَّل بواسطة أحداث (cron، وأحداث قاعدة البيانات، والمسارات) في الوقت نفسه.
- **اكتب `description` جيدًا.** يعتمد وكلاء الذكاء الاصطناعي على حقل `description` الخاص بالدالة لتحديد وقت استخدام الأداة. كن محددًا بشأن ما تفعله الأداة ومتى ينبغي استدعاؤها.
+**اكتب `description` جيدًا.** يعتمد وكلاء الذكاء الاصطناعي على حقل `description` الخاص بالدالة لتحديد وقت استخدام الأداة. كن محددًا بشأن ما تفعله الأداة ومتى ينبغي استدعاؤها.
### المكوّنات الأمامية
diff --git a/packages/twenty-docs/l/ar/developers/extend/capabilities/webhooks.mdx b/packages/twenty-docs/l/ar/developers/extend/capabilities/webhooks.mdx
index e63036bcd6..f1497ef5c0 100644
--- a/packages/twenty-docs/l/ar/developers/extend/capabilities/webhooks.mdx
+++ b/packages/twenty-docs/l/ar/developers/extend/capabilities/webhooks.mdx
@@ -62,7 +62,7 @@ import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
| `الطابع الزمني` | وقت حدوث الحدث (UTC) |
- استجب بحالة **HTTP 2xx** (200-299) لتأكيد الاستلام. تُسجَّل الاستجابات غير 2xx كإخفاقات في التسليم.
+استجب بحالة **HTTP 2xx** (200-299) لتأكيد الاستلام. تُسجَّل الاستجابات غير 2xx كإخفاقات في التسليم.
## التحقق من صحة خطاف الويب
diff --git a/packages/twenty-docs/l/ar/developers/extend/extend.mdx b/packages/twenty-docs/l/ar/developers/extend/extend.mdx
index 23c600dcc8..4e411cc42b 100644
--- a/packages/twenty-docs/l/ar/developers/extend/extend.mdx
+++ b/packages/twenty-docs/l/ar/developers/extend/extend.mdx
@@ -23,11 +23,9 @@ description: وسّع وظائف Twenty باستخدام واجهات برمجة
اتصل بـ Twenty برمجياً
-
احصل على إشعارات بالأحداث في الوقت الفعلي
-
أنشئ تخصيصات كرمز برمجي (ألفا)
diff --git a/packages/twenty-docs/l/ar/developers/self-host/capabilities/docker-compose.mdx b/packages/twenty-docs/l/ar/developers/self-host/capabilities/docker-compose.mdx
index fdd3952620..22f82c45dc 100644
--- a/packages/twenty-docs/l/ar/developers/self-host/capabilities/docker-compose.mdx
+++ b/packages/twenty-docs/l/ar/developers/self-host/capabilities/docker-compose.mdx
@@ -3,7 +3,7 @@ title: بنقرة واحدة مع Docker Compose
---
- الحاويات الخاصة بدوكر مخصصة للاستضافة الإنتاجية أو الاستضافة الذاتية، للتحقيق يرجى التحقق من [الإعداد المحلي](/l/ar/developers/contribute/capabilities/local-setup).
+الحاويات الخاصة بدوكر مخصصة للاستضافة الإنتاجية أو الاستضافة الذاتية، للتحقيق يرجى التحقق من [الإعداد المحلي](/l/ar/developers/contribute/capabilities/local-setup).
## نظرة عامة
diff --git a/packages/twenty-docs/l/ar/developers/self-host/capabilities/setup.mdx b/packages/twenty-docs/l/ar/developers/self-host/capabilities/setup.mdx
index 07982de696..b6eeb12979 100644
--- a/packages/twenty-docs/l/ar/developers/self-host/capabilities/setup.mdx
+++ b/packages/twenty-docs/l/ar/developers/self-host/capabilities/setup.mdx
@@ -5,7 +5,7 @@ title: إعداد
# إدارة الإعدادات
- **هل هي المرة الأولى التي تقوم فيها بالتثبيت؟** اتبع [دليل تثبيت Docker Compose](/l/ar/developers/self-host/capabilities/docker-compose) لتشغيل Twenty، ثم عد هنا للإعداد.
+**هل هي المرة الأولى التي تقوم فيها بالتثبيت؟** اتبع [دليل تثبيت Docker Compose](/l/ar/developers/self-host/capabilities/docker-compose) لتشغيل Twenty، ثم عد هنا للإعداد.
يوفر Twenty **وضعين للإعداد** ليلائم احتياجات النشر المختلفة:
@@ -26,7 +26,7 @@ IS_CONFIG_VARIABLES_IN_DB_ENABLED=true # افتراضي
4. تسري التغييرات على الفور (خلال 15 ثانية لعمليات النشر متعددة الحاويات)
- **نشرات متعددة الحاويات:** عند استخدام إعدادات قاعدة البيانات (`IS_CONFIG_VARIABLES_IN_DB_ENABLED=true`)، يقوم كل من حاويات الخادم والعامل بالقراءة من نفس قاعدة البيانات. التغييرات في لوحة الإدارة تؤثر عليهما تلقائيًا، مما يلغي الحاجة إلى تكرار متغيرات البيئة بين الحاويات (باستثناء متغيرات البنية التحتية).
+**نشرات متعددة الحاويات:** عند استخدام إعدادات قاعدة البيانات (`IS_CONFIG_VARIABLES_IN_DB_ENABLED=true`)، يقوم كل من حاويات الخادم والعامل بالقراءة من نفس قاعدة البيانات. التغييرات في لوحة الإدارة تؤثر عليهما تلقائيًا، مما يلغي الحاجة إلى تكرار متغيرات البيئة بين الحاويات (باستثناء متغيرات البنية التحتية).
**ما يمكنك تكوينه عبر لوحة الإدارة:**
@@ -41,10 +41,10 @@ IS_CONFIG_VARIABLES_IN_DB_ENABLED=true # افتراضي
- كل متغير موثق بوصف في لوحة الإدارة الخاصة بك في **الإعدادات → لوحة الإدارة → متغيرات التكوين**.
- بعض إعدادات البنية التحتية مثل اتصالات قاعدة البيانات (`PG_DATABASE_URL`)، عناوين الخوادم (`SERVER_URL`)، وأسرار التطبيقات (`APP_SECRET`) يمكن ضبطها فقط عبر ملف `.env`.
+كل متغير موثق بوصف في لوحة الإدارة الخاصة بك في **الإعدادات → لوحة الإدارة → متغيرات التكوين**.
+بعض إعدادات البنية التحتية مثل اتصالات قاعدة البيانات (`PG_DATABASE_URL`)، عناوين الخوادم (`SERVER_URL`)، وأسرار التطبيقات (`APP_SECRET`) يمكن ضبطها فقط عبر ملف `.env`.
- [مرجع تقني كامل →](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/twenty-config/config-variables.ts)
+[مرجع تقني كامل →](https://github.com/twentyhq/twenty/blob/main/packages/twenty-server/src/engine/core-modules/twenty-config/config-variables.ts)
## 2. إعداد بيئي فقط
@@ -93,7 +93,7 @@ DEFAULT_SUBDOMAIN=app # default value
* إعدادات خاصة بمساحة العمل مثل النطاق الفرعي والنطاق المخصص تصبح متاحة ضمن إعدادات مساحة العمل
- **إعداد خاص بالبيئة فقط:** لا يمكن تكوين `IS_MULTIWORKSPACE_ENABLED` إلا عبر ملف `.env` ويتطلب إعادة تشغيل. لا يمكن تغييره عبر لوحة الإدارة.
+**إعداد خاص بالبيئة فقط:** لا يمكن تكوين `IS_MULTIWORKSPACE_ENABLED` إلا عبر ملف `.env` ويتطلب إعادة تشغيل. لا يمكن تغييره عبر لوحة الإدارة.
### تكوين DNS لوضع تعدد مساحات العمل
@@ -149,7 +149,7 @@ IS_WORKSPACE_CREATION_LIMITED_TO_SERVER_ADMINS=true
* `AUTH_GOOGLE_APIS_CALLBACK_URL=https://{your-domain}/auth/google-apis/get-access-token`
- **وضع بيئي فقط:** إذا كنت قد ضبطت `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`، فأضف هذه المتغيرات إلى ملف `.env` الخاص بك بدلاً من ذلك.
+**وضع بيئي فقط:** إذا كنت قد ضبطت `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`، فأضف هذه المتغيرات إلى ملف `.env` الخاص بك بدلاً من ذلك.
**النطاقات المطلوبة** (يتم تكوينها تلقائيًا):
@@ -168,7 +168,7 @@ IS_WORKSPACE_CREATION_LIMITED_TO_SERVER_ADMINS=true
## تكامل Microsoft 365
- يجب على المستخدمين الحصول على [ترخيص Microsoft 365](https://admin.microsoft.com/Adminportal/Home) ليتمكنوا من استخدام تقويم API ورسائل. لن يتمكنوا من مزامنة حسابهم في Twenty دون واحد منها.
+يجب على المستخدمين الحصول على [ترخيص Microsoft 365](https://admin.microsoft.com/Adminportal/Home) ليتمكنوا من استخدام تقويم API ورسائل. لن يتمكنوا من مزامنة حسابهم في Twenty دون واحد منها.
### إنشاء مشروع في Microsoft Azure
@@ -211,7 +211,7 @@ IS_WORKSPACE_CREATION_LIMITED_TO_SERVER_ADMINS=true
* `AUTH_MICROSOFT_APIS_CALLBACK_URL=https://{your-domain}/auth/microsoft-apis/get-access-token`
- **وضع بيئي فقط:** إذا كنت قد ضبطت `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`، فأضف هذه المتغيرات إلى ملف `.env` الخاص بك بدلاً من ذلك.
+**وضع بيئي فقط:** إذا كنت قد ضبطت `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`، فأضف هذه المتغيرات إلى ملف `.env` الخاص بك بدلاً من ذلك.
### تكوين النطاقات
@@ -256,40 +256,45 @@ yarn command:prod cron:workflow:automated-cron-trigger
3. قم بضبط إعدادات SMTP الخاصة بك:
-
- ستحتاج إلى توفير [كلمة مرور التطبيق](https://support.google.com/accounts/answer/185833).
+
+
+ ستحتاج إلى توفير [كلمة مرور التطبيق](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'
+
+
+
+
+
+ تذكر أنه إذا كنت تشغل التحقق بعاملين، ستحتاج إلى توفير [كلمة مرور التطبيق](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9).
+ * EMAIL_DRIVER=smtp
+ * EMAIL_SMTP_HOST=smtp.office365.com
+ * EMAIL_SMTP_PORT=587
+ * EMAIL_SMTP_USER=office365_email_address
+ * EMAIL_SMTP_PASSWORD='office365_password'
+
+
+
+
+
+ **smtp4dev** هو خادم بريد إلكتروني مزيف للتطوير والاختبار.
+ * قم بتشغيل صورة smtp4dev: `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
+ * الوصول إلى واجهة المستخدم smtp4dev هنا: [http://localhost:8090](http://localhost:8090)
+ * حدد المتغيرات التالية:
* 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'
+ * EMAIL_SMTP_HOST=localhost
+ * EMAIL_SMTP_PORT=2525
+
-
- تذكر أنه إذا كنت تشغل التحقق بعاملين، ستحتاج إلى توفير [كلمة مرور التطبيق](https://support.microsoft.com/en-us/account-billing/manage-app-passwords-for-two-step-verification-d6dc8c6d-4bf7-4851-ad95-6d07799387e9).
-
- * EMAIL_DRIVER=smtp
- * EMAIL_SMTP_HOST=smtp.office365.com
- * EMAIL_SMTP_PORT=587
- * EMAIL_SMTP_USER=office365_email_address
- * EMAIL_SMTP_PASSWORD='office365_password'
-
-
-
- **smtp4dev** هو خادم بريد إلكتروني مزيف للتطوير والاختبار.
-
- * قم بتشغيل صورة smtp4dev: `docker run --rm -it -p 8090:80 -p 2525:25 rnwood/smtp4dev`
- * الوصول إلى واجهة المستخدم smtp4dev هنا: [http://localhost:8090](http://localhost:8090)
- * حدد المتغيرات التالية:
- * EMAIL_DRIVER=smtp
- * EMAIL_SMTP_HOST=localhost
- * EMAIL_SMTP_PORT=2525
-
- **وضع بيئي فقط:** إذا كنت قد ضبطت `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`، فأضف هذه المتغيرات إلى ملف `.env` الخاص بك بدلاً من ذلك.
+**وضع بيئي فقط:** إذا كنت قد ضبطت `IS_CONFIG_VARIABLES_IN_DB_ENABLED=false`، فأضف هذه المتغيرات إلى ملف `.env` الخاص بك بدلاً من ذلك.
## الوظائف المنطقية
@@ -297,7 +302,7 @@ yarn command:prod cron:workflow:automated-cron-trigger
تدعم Twenty الوظائف المنطقية لعمليات سير العمل والمنطق المخصص. يتم تكوين بيئة التنفيذ عبر متغير البيئة `SERVERLESS_TYPE`.
- **ملاحظة أمنية:** يقوم برنامج التشغيل المحلي (`SERVERLESS_TYPE=LOCAL`) بتشغيل الشيفرة مباشرةً على المضيف ضمن عملية Node.js من دون عزل. يجب استخدامه فقط للشيفرة الموثوقة أثناء التطوير. بالنسبة لعمليات النشر الإنتاجية التي تتعامل مع شيفرة غير موثوق بها، نوصي بشدة باستخدام `SERVERLESS_TYPE=LAMBDA` أو `SERVERLESS_TYPE=DISABLED`.
+**ملاحظة أمنية:** يقوم برنامج التشغيل المحلي (`SERVERLESS_TYPE=LOCAL`) بتشغيل الشيفرة مباشرةً على المضيف ضمن عملية Node.js من دون عزل. يجب استخدامه فقط للشيفرة الموثوقة أثناء التطوير. بالنسبة لعمليات النشر الإنتاجية التي تتعامل مع شيفرة غير موثوق بها، نوصي بشدة باستخدام `SERVERLESS_TYPE=LAMBDA` أو `SERVERLESS_TYPE=DISABLED`.
### برامج التشغيل المتاحة
@@ -333,5 +338,5 @@ SERVERLESS_TYPE=DISABLED
```
- عند استخدام `SERVERLESS_TYPE=DISABLED`، ستؤدي أي محاولة لتنفيذ وظيفة منطقية إلى إرجاع خطأ. يكون هذا مفيدًا إذا كنت ترغب في تشغيل Twenty من دون إمكانات الوظائف المنطقية.
+عند استخدام `SERVERLESS_TYPE=DISABLED`، ستؤدي أي محاولة لتنفيذ وظيفة منطقية إلى إرجاع خطأ. يكون هذا مفيدًا إذا كنت ترغب في تشغيل Twenty من دون إمكانات الوظائف المنطقية.
diff --git a/packages/twenty-docs/l/ar/developers/self-host/self-host.mdx b/packages/twenty-docs/l/ar/developers/self-host/self-host.mdx
index 4cd863334b..b808e0c096 100644
--- a/packages/twenty-docs/l/ar/developers/self-host/self-host.mdx
+++ b/packages/twenty-docs/l/ar/developers/self-host/self-host.mdx
@@ -23,7 +23,6 @@ description: قم بنشر Twenty وإدارته على البنية التحت
إعداد سريع باستخدام Docker
-
انشر على AWS أو GCP أو Azure
diff --git a/packages/twenty-docs/l/ar/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/ar/twenty-ui/display/app-tooltip.mdx
index 088efc38de..4a224608b4 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/display/app-tooltip.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/display/app-tooltip.mdx
@@ -10,46 +10,54 @@ image: /images/user-guide/tips/light-bulb.png
رسالة مختصرة تعرض معلومات إضافية عند تفاعل المستخدم مع عنصر.
-
- ```jsx
- import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
- export const MyComponent = () => {
- return (
- <>
-
+
+
+ );
+};
+```
+
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| ------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| اسم الفئة | نص | فئة CSS اختيارية للتنسيق الإضافي |
+| اختيار الربط | محدد CSS | المحدِّد لمرساة التلميح (العنصر الذي يُفعّل التلميح) |
+| المحتوى | نص | المحتوى الذي تريد عرضه داخل التلميح |
+| تأخير الإخفاء | رقم | التأخير بالثواني قبل إخفاء التلميح بعد مغادرة المؤشر للمرساة |
+| الإزاحة | رقم | الإزاحة بالبكسل لتحديد موضع التلميح |
+| بدون سهم | قيمة منطقية | إذا كانت القيمة `صحيح`, سيتم إخفاء السهم في المربط التنبيهي |
+| مفتوح | قيمة منطقية | إذا كانت القيمة `صحيح`, يكون المربط التنبيهي مفتوحًا افتراضيًا |
+| المكان | نص `PlacesType` من `react-tooltip` | يحدد موضع المربط التنبيهي. تتضمن القيم `bottom`، `left`، `right`، `top`، `top-start`، `top-end`، `right-start`، `right-end`، `bottom-start`، `bottom-end`، `left-start`، و`left-end` |
+| استراتيجية الوضعية | نص `PositionStrategy` من `react-tooltip` | استراتيجية وضعية للمربط التنبيهي. له قيمتان: `absolute` و`fixed` |
+
+
+
+
-
- | المحددات | النوع | الوصف |
- | ------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
- | اسم الفئة | نص | فئة CSS اختيارية للتنسيق الإضافي |
- | اختيار الربط | محدد CSS | المحدِّد لمرساة التلميح (العنصر الذي يُفعّل التلميح) |
- | المحتوى | نص | المحتوى الذي تريد عرضه داخل التلميح |
- | تأخير الإخفاء | رقم | التأخير بالثواني قبل إخفاء التلميح بعد مغادرة المؤشر للمرساة |
- | الإزاحة | رقم | الإزاحة بالبكسل لتحديد موضع التلميح |
- | بدون سهم | قيمة منطقية | إذا كانت القيمة `صحيح`, سيتم إخفاء السهم في المربط التنبيهي |
- | مفتوح | قيمة منطقية | إذا كانت القيمة `صحيح`, يكون المربط التنبيهي مفتوحًا افتراضيًا |
- | المكان | نص `PlacesType` من `react-tooltip` | يحدد موضع المربط التنبيهي. تتضمن القيم `bottom`، `left`، `right`، `top`، `top-start`، `top-end`، `right-start`، `right-end`، `bottom-start`، `bottom-end`، `left-start`، و`left-end` |
- | استراتيجية الوضعية | نص `PositionStrategy` من `react-tooltip` | استراتيجية وضعية للمربط التنبيهي. له قيمتان: `absolute` و`fixed` |
-
## نص متجاوز مع تلميح
@@ -57,22 +65,30 @@ image: /images/user-guide/tips/light-bulb.png
يعالج النص الزائد ويعرض مربط تنبيهي عند فيضان النص.
-
- ```jsx
- import { OverflowingTextWithTooltip } from 'twenty-ui/display';
+
- export const MyComponent = () => {
- const crmTaskDescription =
- 'المتابعة مع العميل بشأن استفساره الأخير عن المنتج. مناقشة خيارات التسعير، ومعالجة أي مخاوف، وتقديم معلومات إضافية عن المنتج. تسجيل تفاصيل المحادثة في نظام إدارة علاقات العملاء (CRM) للرجوع إليها لاحقاً.';
+```jsx
+import { OverflowingTextWithTooltip } from 'twenty-ui/display';
- return ;
- };
- ```
-
+export const MyComponent = () => {
+ const crmTaskDescription =
+ 'المتابعة مع العميل بشأن استفساره الأخير عن المنتج. مناقشة خيارات التسعير، ومعالجة أي مخاوف، وتقديم معلومات إضافية عن المنتج. تسجيل تفاصيل المحادثة في نظام إدارة علاقات العملاء (CRM) للرجوع إليها لاحقاً.';
+
+ return ;
+};
+```
+
+
+
+
+
+
+| الخصائص | النوع | الوصف |
+| ------- | ------ | --------------------------------------------- |
+| نص | string | المحتوى الذي تريد عرضه في منطقة النص المتجاوز |
+
+
+
+
-
- | الخصائص | النوع | الوصف |
- | ------- | ------ | --------------------------------------------- |
- | نص | string | المحتوى الذي تريد عرضه في منطقة النص المتجاوز |
-
diff --git a/packages/twenty-docs/l/ar/twenty-ui/display/checkmark.mdx b/packages/twenty-docs/l/ar/twenty-ui/display/checkmark.mdx
index a83a399325..5ab60fb425 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/display/checkmark.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/display/checkmark.mdx
@@ -10,19 +10,25 @@ image: /images/user-guide/tasks/tasks_header.png
يمثل إجراءً ناجحًا أو مكتملًا.
-
- ```jsx
- import { Checkmark } from 'twenty-ui/display';
+
- export const MyComponent = () => {
- return ;
- };
- ```
-
+```jsx
+import { Checkmark } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+
+يمتد `React.ComponentPropsWithoutRef<'div'>` و يقبل جميع خصائص عنصر `div` العادي.
+
+
-
- يمتد `React.ComponentPropsWithoutRef<'div'>` و يقبل جميع خصائص عنصر `div` العادي.
-
## علامة صحيح متحركة
@@ -30,29 +36,38 @@ image: /images/user-guide/tasks/tasks_header.png
يمثل رمز علامة صحيح مع ميزة الإضافة للحركة.
-
- ```jsx
- import { AnimatedCheckmark } from 'twenty-ui/display';
- export const MyComponent = () => {
- return (
-
- );
- };
- ```
-
+
+
+```jsx
+import { AnimatedCheckmark } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+
+| الخصائص | النوع | الوصف | الإعداد الافتراضي |
+| ----------- | ----------- | ------------------------------------- | ----------------- |
+| isAnimating | قيمة منطقية | يتحكم فيما إذا كانت علامة صحيح متحركة | خاطئ |
+| اللون | string | لون علامة الاختيار | |
+| المدة | رقم | مدة الحركة بالثواني | 0.5 ثانية |
+| الحجم | رقم | حجم علامة الاختيار | 28 بكسل |
+
+
+
+
-
- | الخصائص | النوع | الوصف | الإعداد الافتراضي |
- | ----------- | ----------- | ------------------------------------- | ----------------- |
- | isAnimating | قيمة منطقية | يتحكم فيما إذا كانت علامة صحيح متحركة | خاطئ |
- | اللون | string | لون علامة الاختيار | |
- | المدة | رقم | مدة الحركة بالثواني | 0.5 ثانية |
- | الحجم | رقم | حجم علامة الاختيار | 28 بكسل |
-
diff --git a/packages/twenty-docs/l/ar/twenty-ui/display/chip.mdx b/packages/twenty-docs/l/ar/twenty-ui/display/chip.mdx
index 909f8f6bae..92ed29fa18 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/display/chip.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/display/chip.mdx
@@ -10,40 +10,48 @@ image: /images/user-guide/github/github-header.png
عنصر مرئي يمكن استخدامه كحاوية قابلة للنقر أو غير قابلة للنقر، مع علامة وعناصر اختيارية يسار ويمين، وخيارات تصميم متنوعة لعرض العلامات والبطاقات.
-
- ```jsx
- import { Chip } from 'twenty-ui/components';
- export const MyComponent = () => {
- return (
-
- );
- };
+
- ```
-
+```jsx
+import { Chip } from 'twenty-ui/components';
-
- | المحددات | النوع | الوصف |
- | ------------------ | ----------------------- | ---------------------------------------------------------------------- |
- | linkToEntity | نص | الرابط إلى الكيان |
- | معرف الكيان | نص | المعرف الفريد للكيان |
- | الاسم | نص | اسم الكيان |
- | رابط الصورة | نص | s picture", |
- | نوع الصورة الرمزية | نوع الصورة الرمزية | نوع الصورة الرمزية التي تريد عرضها. لديه خياران: `مستدير` و `مربع` |
- | التنوع | تعداد EntityChipVariant | تنوع الرقاقة الكيانية التي ترغب في عرضها. لديه خياران: `عادي` و `شفاف` |
- | الأيقونة اليسرى | مكون رمز | مكون React يمثل رمزًا. يظهر على الجانب الأيسر من الرقاقة |
-
+export const MyComponent = () => {
+ return (
+
+ );
+};
+
+```
+
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| ------------------ | ----------------------- | ---------------------------------------------------------------------- |
+| linkToEntity | نص | الرابط إلى الكيان |
+| معرف الكيان | نص | المعرف الفريد للكيان |
+| الاسم | نص | اسم الكيان |
+| رابط الصورة | نص | s picture", |
+| نوع الصورة الرمزية | نوع الصورة الرمزية | نوع الصورة الرمزية التي تريد عرضها. لديه خياران: `مستدير` و `مربع` |
+| التنوع | تعداد EntityChipVariant | تنوع الرقاقة الكيانية التي ترغب في عرضها. لديه خياران: `عادي` و `شفاف` |
+| الأيقونة اليسرى | مكون رمز | مكون React يمثل رمزًا. يظهر على الجانب الأيسر من الرقاقة |
+
+
+
+
## الأمثلة
@@ -100,39 +108,47 @@ export const MyComponent = () => {
عنصر يشبه الرقاقة لعرض معلومات عن كيان.
-
- ```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 (
-
-
-
- );
- };
- ```
-
+
-
- | الخصائص | النوع | الوصف |
- | ------------------ | ----------------------- | ---------------------------------------------------------------------- |
- | linkToEntity | نص | الرابط إلى الكيان |
- | معرف الكيان | نص | المعرف الفريد للكيان |
- | الاسم | نص | اسم الكيان |
- | رابط الصورة | نص | s picture", |
- | نوع الصورة الرمزية | نوع الصورة الرمزية | نوع الصورة الرمزية التي تريد عرضها. لديه خياران: `مستدير` و `مربع` |
- | التنوع | تعداد EntityChipVariant | تنوع الرقاقة الكيانية التي ترغب في عرضها. لديه خياران: `عادي` و `شفاف` |
- | الأيقونة اليسرى | مكون رمز | مكون React يمثل رمزًا. يظهر على الجانب الأيسر من الرقاقة |
-
+```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 (
+
+
+
+ );
+};
+```
+
+
+
+
+
+
+| الخصائص | النوع | الوصف |
+| ------------------ | ----------------------- | ---------------------------------------------------------------------- |
+| linkToEntity | نص | الرابط إلى الكيان |
+| معرف الكيان | نص | المعرف الفريد للكيان |
+| الاسم | نص | اسم الكيان |
+| رابط الصورة | نص | s picture", |
+| نوع الصورة الرمزية | نوع الصورة الرمزية | نوع الصورة الرمزية التي تريد عرضها. لديه خياران: `مستدير` و `مربع` |
+| التنوع | تعداد EntityChipVariant | تنوع الرقاقة الكيانية التي ترغب في عرضها. لديه خياران: `عادي` و `شفاف` |
+| الأيقونة اليسرى | مكون رمز | مكون React يمثل رمزًا. يظهر على الجانب الأيسر من الرقاقة |
+
+
+
+
diff --git a/packages/twenty-docs/l/ar/twenty-ui/display/icons.mdx b/packages/twenty-docs/l/ar/twenty-ui/display/icons.mdx
index 7e7befc357..81dddd8eb6 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/display/icons.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/display/icons.mdx
@@ -14,35 +14,44 @@ image: /images/user-guide/objects/objects.png
نستخدم أيقونات Tabler لـ React في جميع أنحاء التطبيق.
-
-
- ```
- yarn add @tabler/icons-react
- ```
-
+
+
-
- يمكنك استيراد كل أيقونة كمكون. إليك مثال:
+```
+yarn add @tabler/icons-react
+```
-
+
- ```jsx
- import { IconArrowLeft } from "@tabler/icons-react";
+
- export const MyComponent = () => {
- return ;
- };
- ```
-
+يمكنك استيراد كل أيقونة كمكون. إليك مثال:
+
+
+```jsx
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+
+| الإزاحة | النوع | الوصف | الإعداد الافتراضي |
+| ----------- | ------ | -------------------------------- | ----------------- |
+| الحجم | رقم | ارتفاع وعرض الأيقونة بالبكسل | 24 |
+| اللون | string | لون الأيقونات | اللون الحالي |
+| الخط العريض | رقم | عرض الخط العريض للأيقونة بالبكسل | 2 |
+
+
+
+
-
- | الإزاحة | النوع | الوصف | الإعداد الافتراضي |
- | ----------- | ------ | -------------------------------- | ----------------- |
- | الحجم | رقم | ارتفاع وعرض الأيقونة بالبكسل | 24 |
- | اللون | string | لون الأيقونات | اللون الحالي |
- | الخط العريض | رقم | عرض الخط العريض للأيقونة بالبكسل | 2 |
-
## أيقونات مخصصة
@@ -54,20 +63,29 @@ image: /images/user-guide/objects/objects.png
يعرض أيقونة دفتر العناوين.
-
- ```jsx
- import { IconAddressBook } from 'twenty-ui/display';
- export const MyComponent = () => {
- return ;
- };
- ```
-
+
+
+```jsx
+import { IconAddressBook } from 'twenty-ui/display';
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+
+| خصائص | النوع | الوصف | الإعداد الافتراضي |
+| ----------- | ----- | -------------------------------- | ----------------- |
+| الحجم | رقم | ارتفاع وعرض الأيقونة بالبكسل | 24 |
+| الخط العريض | رقم | عرض الخط العريض للأيقونة بالبكسل | 2 |
+
+
+
+
-
- | خصائص | النوع | الوصف | الإعداد الافتراضي |
- | ----------- | ----- | -------------------------------- | ----------------- |
- | الحجم | رقم | ارتفاع وعرض الأيقونة بالبكسل | 24 |
- | الخط العريض | رقم | عرض الخط العريض للأيقونة بالبكسل | 2 |
-
diff --git a/packages/twenty-docs/l/ar/twenty-ui/display/tag.mdx b/packages/twenty-docs/l/ar/twenty-ui/display/tag.mdx
index d3b9357263..a38594d8e9 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/display/tag.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/display/tag.mdx
@@ -10,29 +10,38 @@ image: /images/user-guide/table-views/table.png
مكوّن لتصنيف المحتوى أو وسمه بصريًا.
-
- ```jsx
- import { Tag } from "@/ui/display/tag/components/Tag";
- export const MyComponent = () => {
- return (
- console.log("click")}
- />
- );
- };
- ```
-
+
+
+```jsx
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+ return (
+ console.log("click")}
+ />
+ );
+};
+```
+
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| --------- | ----- | --------------------------------------------------------------------------------------------------------------------- |
+| اسم الفئة | نص | اسم اختياري لتنسيقات إضافية |
+| اللون | نص | لون العلامة. الخيارات تشمل: `أخضر`, `تركواز`, `سماوي`, `أزرق`, `أرجواني`, `وردي`, `أحمر`, `برتقالي`, `أصفر`, `رمادي`. |
+| نص | نص | محتوى العلامة |
+| عند_النقر | دالة | دالة اختيارية تُستدعى عند نقر المستخدم على العلامة |
+
+
+
+
-
- | المحددات | النوع | الوصف |
- | --------- | ----- | --------------------------------------------------------------------------------------------------------------------- |
- | اسم الفئة | نص | اسم اختياري لتنسيقات إضافية |
- | اللون | نص | لون العلامة. الخيارات تشمل: `أخضر`, `تركواز`, `سماوي`, `أزرق`, `أرجواني`, `وردي`, `أحمر`, `برتقالي`, `أصفر`, `رمادي`. |
- | نص | نص | محتوى العلامة |
- | عند_النقر | دالة | دالة اختيارية تُستدعى عند نقر المستخدم على العلامة |
-
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/block-editor.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/block-editor.mdx
index 8c133b329e..9c9f74d2cf 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/input/block-editor.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/block-editor.mdx
@@ -10,22 +10,28 @@ image: /images/user-guide/api/api.png
يستخدم محرر نصوص غني يعتمد على الكتل من [BlockNote](https://www.blocknotejs.org/) للسماح للمستخدمين بتحرير وعرض كتل المحتوى.
-
- ```jsx
- import { useBlockNote } from "@blocknote/react";
- import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
+
- export const MyComponent = () => {
- const BlockNoteEditor = useBlockNote();
+```jsx
+import { useBlockNote } from "@blocknote/react";
+import { BlockEditor } from "@/ui/input/editor/components/BlockEditor";
- return ;
- };
- ```
-
+export const MyComponent = () => {
+ const BlockNoteEditor = useBlockNote();
-
- | المحددات | النوع | الوصف |
- | -------- | ----------------- | ------------------------ |
- | محرر | `BlockNoteEditor` | مثيل أو تكوين محرر الكتل |
-
+ return ;
+};
+```
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| -------- | ----------------- | ------------------------ |
+| محرر | `BlockNoteEditor` | مثيل أو تكوين محرر الكتل |
+
+
+
+
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/buttons.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/buttons.mdx
index 1619ed4373..ed8ba40f3c 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/input/buttons.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/buttons.mdx
@@ -12,428 +12,511 @@ image: /images/user-guide/views/filter.png
## زر
-
- ```jsx
- import { Button } from "@/ui/input/button/components/Button";
- export const MyComponent = () => {
- return (
-
+
+
+```jsx
+import { Button } from "@/ui/input/button/components/Button";
+
+export const MyComponent = () => {
+ return (
+
+
+
+
+
+| خصائص | النوع | الوصف |
+| --------- | --------------------- | ---------------------------------------------------------------------------------- |
+| className | string | اسم فئة اختياري لتنسيقات إضافية |
+| أيقونة | `React.ComponentType` | مكون رمز اختياري يُعرض داخل الزر |
+| العنوان | string | محتوى نص الزر |
+| عرض كامل | قيمة منطقية | يُحدد إذا كان الزر يجب أن يمتد ليغطي العرض الكامل للحاوية الخاصة به |
+| التنوع | string | النمط المرئي للزر. تشمل الخيارات `primary`، `secondary`، و`tertiary`. |
+| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
+| الموقع | string | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `right`، و`middle`. |
+| accent | string | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `default`، `blue`، `danger` |
+| قريباً | قيمة منطقية | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة) |
+| معطل | قيمة منطقية | يحدد إذا كان الزر معطل أم لا |
+| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
+| عند النقر | وظيفة | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
+
+
+
+
+
-
- | خصائص | النوع | الوصف |
- | --------- | --------------------- | ---------------------------------------------------------------------------------- |
- | className | string | اسم فئة اختياري لتنسيقات إضافية |
- | أيقونة | `React.ComponentType` | مكون رمز اختياري يُعرض داخل الزر |
- | العنوان | string | محتوى نص الزر |
- | عرض كامل | قيمة منطقية | يُحدد إذا كان الزر يجب أن يمتد ليغطي العرض الكامل للحاوية الخاصة به |
- | التنوع | string | النمط المرئي للزر. تشمل الخيارات `primary`، `secondary`، و`tertiary`. |
- | الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
- | الموقع | string | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `right`، و`middle`. |
- | accent | string | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `default`، `blue`، `danger` |
- | قريباً | قيمة منطقية | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة) |
- | معطل | قيمة منطقية | يحدد إذا كان الزر معطل أم لا |
- | تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
- | عند النقر | وظيفة | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
-
## مجموعة الأزرار
-
- ```jsx
- import { Button } from "@/ui/input/button/components/Button";
- import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
+
+```jsx
+import { Button } from "@/ui/input/button/components/Button";
+import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
- export const MyComponent = () => {
- return (
-
-
- );
- };
+export const MyComponent = () => {
+ return (
+
+
+ );
+};
- ```
-
+```
+
-
- | الخصائص | النوع | الوصف |
- | --------- | --------- | -------------------------------------------------------------------------------------- |
- | التنوع | string | النمط المرئي للأزرار داخل المجموعة. تشمل الخيارات `primary`، `secondary`، و`tertiary`. |
- | الحجم | string | حجم الأزرار داخل المجموعة. يوجد خياران: `medium` و`small`. |
- | accent | نص | لون تمييز الأزرار داخل المجموعة. تشمل الخيارات `default`، `blue` و`danger`. |
- | className | string | اسم فئة اختياري لتنسيقات إضافية |
- | الأبناء | ReactNode | مجموعة من عناصر React تمثل الأزرار الفردية داخل المجموعة |
-
+
+
+
+| الخصائص | النوع | الوصف |
+| --------- | --------- | -------------------------------------------------------------------------------------- |
+| التنوع | string | النمط المرئي للأزرار داخل المجموعة. تشمل الخيارات `primary`، `secondary`، و`tertiary`. |
+| الحجم | string | حجم الأزرار داخل المجموعة. يوجد خياران: `medium` و`small`. |
+| accent | نص | لون تمييز الأزرار داخل المجموعة. تشمل الخيارات `default`، `blue` و`danger`. |
+| className | string | اسم فئة اختياري لتنسيقات إضافية |
+| الأبناء | ReactNode | مجموعة من عناصر React تمثل الأزرار الفردية داخل المجموعة |
+
+
+
+
## زر عائم
-
- ```jsx
- import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
- import { IconSearch } from "@tabler/icons-react";
+
- export const MyComponent = () => {
- return (
-
- );
- };
- ```
-
+```jsx
+import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
+import { IconSearch } from "@tabler/icons-react";
-
- | الخصائص | النوع | الوصف |
- | ------------ | --------------------- | --------------------------------------------------------------------------------- |
- | className | string | اسم اختياري لتنسيقات إضافية |
- | أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
- | العنوان | string | محتوى نص الزر |
- | الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
- | الموقع | string | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `middle`، `right`. |
- | تطبيق الظل | قيمة منطقية | يحدد إذا ما سيتم تطبيق الظلال على الزر |
- | تطبيق الضباب | قيمة منطقية | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر |
- | معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
- | تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
-
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+
+| الخصائص | النوع | الوصف |
+| ------------ | --------------------- | --------------------------------------------------------------------------------- |
+| className | string | اسم اختياري لتنسيقات إضافية |
+| أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
+| العنوان | string | محتوى نص الزر |
+| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
+| الموقع | string | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `middle`، `right`. |
+| تطبيق الظل | قيمة منطقية | يحدد إذا ما سيتم تطبيق الظلال على الزر |
+| تطبيق الضباب | قيمة منطقية | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر |
+| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
+| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
+
+
+
+
## مجموعة الأزرار العائمة
-
- ```jsx
- import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
- import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
- import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
+
- export const MyComponent = () => {
- return (
-
-
-
-
- );
- };
- ```
-
+```jsx
+import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
+import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
+import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+ return (
+
+
+
+
+ );
+};
+```
+
+
+
+
+
+
+| خصائص | النوع | الوصف | الإعداد الافتراضي |
+| ------- | --------- | -------------------------------------------------------- | ----------------- |
+| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` | صغير |
+| الأبناء | ReactNode | مجموعة من عناصر React تمثل الأزرار الفردية داخل المجموعة | |
+
+
+
+
-
- | خصائص | النوع | الوصف | الإعداد الافتراضي |
- | ------- | --------- | -------------------------------------------------------- | ----------------- |
- | الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` | صغير |
- | الأبناء | ReactNode | مجموعة من عناصر React تمثل الأزرار الفردية داخل المجموعة | |
-
## زر رمز عائم
-
- ```jsx
- import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
- import { IconSearch } from "@tabler/icons-react";
+
- export const MyComponent = () => {
- return (
- console.log("click")}
- isActive={true}
- />
- );
- };
- ```
-
+```jsx
+import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+ return (
+ console.log("click")}
+ isActive={true}
+ />
+ );
+};
+```
+
+
+
+
+
+
+| الخصائص | النوع | الوصف |
+| ------------ | --------------------- | ---------------------------------------------------------------------------------- |
+| className | نص | اسم اختياري لتنسيقات إضافية |
+| أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
+| الحجم | نص | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
+| الموقع | نص | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `right`، و`middle`. |
+| تطبيق الظل | قيمة منطقية | يحدد إذا ما سيتم تطبيق الظلال على الزر |
+| تطبيق الضباب | قيمة منطقية | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر |
+| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
+| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
+| عند النقر | وظيفة | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
+| فعّال | قيمة منطقية | يحدد إذا كان الزر في وضع فعّال |
+
+
+
+
-
- | الخصائص | النوع | الوصف |
- | ------------ | --------------------- | ---------------------------------------------------------------------------------- |
- | className | نص | اسم اختياري لتنسيقات إضافية |
- | أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
- | الحجم | نص | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
- | الموقع | نص | موقع الزر بالنسبة لأخوته. تشمل الخيارات: `standalone`، `left`، `right`، و`middle`. |
- | تطبيق الظل | قيمة منطقية | يحدد إذا ما سيتم تطبيق الظلال على الزر |
- | تطبيق الضباب | قيمة منطقية | يحدد ما إذا كان ينبغي تطبيق تأثير الضباب على الزر |
- | معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
- | تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
- | عند النقر | وظيفة | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
- | فعّال | قيمة منطقية | يحدد إذا كان الزر في وضع فعّال |
-
## مجموعة أزرار الرموز العائمة
-
- ```jsx
- import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
- import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
+
- export const MyComponent = () => {
- const iconButtons = [
- {
- Icon: IconClipboardText,
- onClick: () => console.log("Button 1 clicked"),
- isActive: true,
- },
- {
- Icon: IconCheckbox,
- onClick: () => console.log("Button 2 clicked"),
- isActive: true,
- },
- ];
+```jsx
+import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
+import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
- return (
-
- );
- };
+export const MyComponent = () => {
+ const iconButtons = [
+ {
+ Icon: IconClipboardText,
+ onClick: () => console.log("Button 1 clicked"),
+ isActive: true,
+ },
+ {
+ Icon: IconCheckbox,
+ onClick: () => console.log("Button 2 clicked"),
+ isActive: true,
+ },
+ ];
- ```
-
+ return (
+
+ );
+};
+
+```
+
+
+
+
+
+
+| الخصائص | النوع | الوصف |
+| ------------ | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| className | string | اسم اختياري لتنسيقات إضافية |
+| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
+| أزرار الرموز | array | مجموعة من الكائنات، يمثل كل منها زر رمز في المجموعة. يجب أن يشمل كل كائن مكون الرمز الذي تريد عرضه في الزر، الوظيفة التي ترغب في استدعائها عند نقر المستخدم على الزر، وما إذا كان الزر ينبغي أن يكون نشطًا أم لا. |
+
+
+
+
-
- | الخصائص | النوع | الوصف |
- | ------------ | ------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
- | className | string | اسم اختياري لتنسيقات إضافية |
- | الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
- | أزرار الرموز | array | مجموعة من الكائنات، يمثل كل منها زر رمز في المجموعة. يجب أن يشمل كل كائن مكون الرمز الذي تريد عرضه في الزر، الوظيفة التي ترغب في استدعائها عند نقر المستخدم على الزر، وما إذا كان الزر ينبغي أن يكون نشطًا أم لا. |
-
## زر خفيف
-
- ```jsx
- import { LightButton } from "@/ui/input/button/components/LightButton";
+
- export const MyComponent = () => {
- return console.log('click')}
- />;
- };
- ```
-
+```jsx
+import { LightButton } from "@/ui/input/button/components/LightButton";
+
+export const MyComponent = () => {
+ return console.log('click')}
+ />;
+};
+```
+
+
+
+
+
+
+
+| الإزاحة | النوع | الوصف |
+| --------- | ----------------- | -------------------------------------------------------------------------- |
+| className | string | اسم اختياري لتنسيقات إضافية |
+| أيقونة | `React.ReactNode` | الرمز الذي تريد عرضه في الزر |
+| العنوان | string | محتوى نص الزر |
+| accent | string | موقع الزر بالنسبة لأخوته. لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
+| نشط | قيمة منطقية | يحدد إذا كان الزر في وضع فعّال |
+| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
+| تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
+| عند النقر | وظيفة | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
+
+
+
+
+
-
- | الإزاحة | النوع | الوصف |
- | --------- | ----------------- | -------------------------------------------------------------------------- |
- | className | string | اسم اختياري لتنسيقات إضافية |
- | أيقونة | `React.ReactNode` | الرمز الذي تريد عرضه في الزر |
- | العنوان | string | محتوى نص الزر |
- | accent | string | موقع الزر بالنسبة لأخوته. لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
- | نشط | قيمة منطقية | يحدد إذا كان الزر في وضع فعّال |
- | معطل | قيمة منطقية | يحدد ما إذا كان الزر معطل |
- | تركيز | قيمة منطقية | يحدد إذا كان الزر في وضع التركيز |
- | عند النقر | وظيفة | وظيفة رد فعل تنطلق عند نقر المستخدم على الزر |
-
## زر أيقونة خفيف
-
- ```jsx
- import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
- import { IconSearch } from "@tabler/icons-react";
+
- export const MyComponent = () => {
- return (
- console.log("click")}
- />
- );
- };
- ```
-
+```jsx
+import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+ return (
+ console.log("click")}
+ />
+ );
+};
+```
+
+
+
+
+
+
+
+| العناصر | النوع | الوصف |
+| --------- | --------------------- | ------------------------------------------------ |
+| className | string | اسم اختياري لتنسيقات إضافية |
+| testId | string | معرف اختبار للزر |
+| أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
+| العنوان | string | محتوى نصي للزر |
+| الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
+| accent | string | لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
+| نشط | قيمة منطقية | يحدد ما إذا كان الزر في حالة نشطة |
+| معطل | قيمة منطقية | يحدد ما إذا كان الزر معطلاً |
+| التركيز | قيمة منطقية | يشير إلى ما إذا كان الزر لديه تركيز |
+| عند النقر | function | وظيفة رد اتصال تتفعّل عند نقر المستخدم على الزر |
+
+
+
+
-
- | العناصر | النوع | الوصف |
- | --------- | --------------------- | ------------------------------------------------ |
- | className | string | اسم اختياري لتنسيقات إضافية |
- | testId | string | معرف اختبار للزر |
- | أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
- | العنوان | string | محتوى نصي للزر |
- | الحجم | string | حجم الزر. يوجد خياران: `صغير` و `متوسط` |
- | accent | string | لون الزر المميز تشمل الخيارات: `ثانوي` و `ثالثي` |
- | نشط | قيمة منطقية | يحدد ما إذا كان الزر في حالة نشطة |
- | معطل | قيمة منطقية | يحدد ما إذا كان الزر معطلاً |
- | التركيز | قيمة منطقية | يشير إلى ما إذا كان الزر لديه تركيز |
- | عند النقر | function | وظيفة رد اتصال تتفعّل عند نقر المستخدم على الزر |
-
## الزر الرئيسي
-
- ```jsx
- import { MainButton } from "@/ui/input/button/components/MainButton";
- import { IconCheckbox } from "@tabler/icons-react";
+
- export const MyComponent = () => {
- return (
-
- );
- };
- ```
-
+```jsx
+import { MainButton } from "@/ui/input/button/components/MainButton";
+import { IconCheckbox } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+
+
+| العناصر | النوع | الوصف |
+| -------------- | -------------------------------- | -------------------------------------------------------------- |
+| العنوان | string | محتوى نصي للزر |
+| عرض كامل | قيمة منطقية | يحدد ما إذا كان الزر يجب أن يمتد على كامل عرض الحاوية |
+| التنوع | string | النمط البصري للزر. تشمل الخيارات `أساسي` و `ثانوي` |
+| قريباً | قيمة منطقية | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة) |
+| أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
+| خصائص زر React | `React.ComponentProps<'button'>` | كل خصائص زر HTML القياسية مدعومة |
+
+
+
+
+
-
- | العناصر | النوع | الوصف |
- | -------------- | -------------------------------- | -------------------------------------------------------------- |
- | العنوان | string | محتوى نصي للزر |
- | عرض كامل | قيمة منطقية | يحدد ما إذا كان الزر يجب أن يمتد على كامل عرض الحاوية |
- | التنوع | string | النمط البصري للزر. تشمل الخيارات `أساسي` و `ثانوي` |
- | قريباً | قيمة منطقية | يشير إلى ما إذا كان الزر معلمًا "قريبًا" (مثل الميزات القادمة) |
- | أيقونة | `React.ComponentType` | مكون أيقونة اختياري يظهر داخل الزر |
- | خصائص زر React | `React.ComponentProps<'button'>` | كل خصائص زر HTML القياسية مدعومة |
-
## زر أيقونة دائري
-
- ```jsx
- import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
- import { IconSearch } from "@tabler/icons-react";
+
- export const MyComponent = () => {
- return (
-
- );
- };
- ```
-
+```jsx
+import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+
+
+| العناصر | النوع | الوصف |
+| -------------- | ----------------------------------------------- | ----- |
+| أيقونة | `React.ComponentType` | |
+| خصائص زر React | `React.ButtonHTMLAttributes` | |
+
+
+
+
-
- | العناصر | النوع | الوصف |
- | -------------- | ----------------------------------------------- | ----- |
- | أيقونة | `React.ComponentType` | |
- | خصائص زر React | `React.ButtonHTMLAttributes` | |
-
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/checkbox.mdx
index 1eb1f284be..1d721a22c4 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/input/checkbox.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/checkbox.mdx
@@ -10,35 +10,41 @@ image: /images/user-guide/tasks/tasks_header.png
يُستخدم عندما يحتاج المستخدم إلى اختيار قيم متعددة من بين عدة خيارات.
-
- ```jsx
- import { Checkbox } from "twenty-ui/display";
+
- export const MyComponent = () => {
- return (
- console.log("onChange function fired")}
- onCheckedChange={() => console.log("onCheckedChange function fired")}
- variant="primary"
- size="small"
- shape="squared"
- />
- );
- };
- ```
-
+```jsx
+import { Checkbox } from "twenty-ui/display";
-
- | المحددات | النوع | الوصف |
- | ------------------------ | ----------- | ----------------------------------------------------------------------------- |
- | مختار | قيمة منطقية | يشير إلى ما إذا كان مربع الاختيار محددًا |
- | غير محدد | قيمة منطقية | يشير إلى ما إذا كان مربع الاختيار في حالة غير محددة (لا هو محدد ولا غير محدد) |
- | عند التغيير | دالة | الدالة التي ترغب في تفعيلها عند تغيير حالة مربع الاختيار |
- | عند تغيير الحالة المحددة | دالة | الدالة التي ترغب في تفعيلها عند تغيّر حالة `checked` |
- | نموذج | نص | النمط البصري للصندوق. تتضمن الخيارات: 'أساسي'، 'ثانوي'، و 'ثالثي' |
- | الحجم | نص | حجم مربع الاختيار. له خياران: `small` و `large` |
- | الشكل | نص | شكل مربع الاختيار. لديه خياران: 'مربع' و 'مدور' |
-
+export const MyComponent = () => {
+ return (
+ console.log("onChange function fired")}
+ onCheckedChange={() => console.log("onCheckedChange function fired")}
+ variant="primary"
+ size="small"
+ shape="squared"
+ />
+ );
+};
+```
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| ------------------------ | ----------- | ----------------------------------------------------------------------------- |
+| مختار | قيمة منطقية | يشير إلى ما إذا كان مربع الاختيار محددًا |
+| غير محدد | قيمة منطقية | يشير إلى ما إذا كان مربع الاختيار في حالة غير محددة (لا هو محدد ولا غير محدد) |
+| عند التغيير | دالة | الدالة التي ترغب في تفعيلها عند تغيير حالة مربع الاختيار |
+| عند تغيير الحالة المحددة | دالة | الدالة التي ترغب في تفعيلها عند تغيّر حالة `checked` |
+| نموذج | نص | النمط البصري للصندوق. تتضمن الخيارات: 'أساسي'، 'ثانوي'، و 'ثالثي' |
+| الحجم | نص | حجم مربع الاختيار. له خياران: `small` و `large` |
+| الشكل | نص | شكل مربع الاختيار. لديه خياران: 'مربع' و 'مدور' |
+
+
+
+
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/color-scheme.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/color-scheme.mdx
index 3be9016e92..cfaad4404a 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/input/color-scheme.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/color-scheme.mdx
@@ -12,28 +12,36 @@ image: /images/user-guide/fields/field.png
يمثل مخططات ألوان مختلفة ومخصص بشكل خاص للمواضيع الفاتحة والداكنة.
-
- ```jsx
- import { ColorSchemeCard } from "twenty-ui/display";
+
- export const MyComponent = () => {
- return (
-
- );
- };
- ```
-
+```jsx
+import { ColorSchemeCard } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return (
+
+ );
+};
+```
+
+
+
+
+
+
+| خصائص | النوع | الوصف | الإعداد الافتراضي |
+| ------------ | --------------------------------------- | ---------------------------------------------------------------------- | ----------------- |
+| التنوع | string | نوع مخطط الألوان. تشمل الخيارات `داكنة`, `فاتحة`, و `النظام` | فاتح |
+| المحدد | قيمة منطقية | إذا كان `صحيح`, يتم عرض علامة الاختيار للدلالة على مخطط الألوان المحدد | |
+| خصائص إضافية | `React.ComponentPropsWithoutRef<'div'>` | خصائص عنصر `div` العادي في HTML | |
+
+
+
+
-
- | خصائص | النوع | الوصف | الإعداد الافتراضي |
- | ------------ | --------------------------------------- | ---------------------------------------------------------------------- | ----------------- |
- | التنوع | string | نوع مخطط الألوان. تشمل الخيارات `داكنة`, `فاتحة`, و `النظام` | فاتح |
- | المحدد | قيمة منطقية | إذا كان `صحيح`, يتم عرض علامة الاختيار للدلالة على مخطط الألوان المحدد | |
- | خصائص إضافية | `React.ComponentPropsWithoutRef<'div'>` | خصائص عنصر `div` العادي في HTML | |
-
## منتقي مخطط الألوان
@@ -41,23 +49,31 @@ image: /images/user-guide/fields/field.png
يتيح للمستخدمين اختيار بين مخططات الألوان المختلفة.
-
- ```jsx
- import { ColorSchemePicker } from "twenty-ui/display";
+
- export const MyComponent = () => {
- return ;
- };
- ```
-
+```jsx
+import { ColorSchemePicker } from "twenty-ui/display";
+
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+
+| خصائص | النوع | الوصف |
+| ----------- | ------------------- | ------------------------------------------------------------- |
+| القيمة | `طريقة عرض الألوان` | مخطط الألوان المحدد حاليًا |
+| عند التغيير | function | الدالة التي ترغب في تفعيلها عندما يختار المستخدم نظام الألوان |
+
+
+
+
-
- | خصائص | النوع | الوصف |
- | ----------- | ------------------- | ------------------------------------------------------------- |
- | القيمة | `طريقة عرض الألوان` | مخطط الألوان المحدد حاليًا |
- | عند التغيير | function | الدالة التي ترغب في تفعيلها عندما يختار المستخدم نظام الألوان |
-
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/icon-picker.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/icon-picker.mdx
index b819eab33a..fd1cca333b 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/input/icon-picker.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/icon-picker.mdx
@@ -10,43 +10,52 @@ image: /images/user-guide/github/github-header.png
منتقى الأيقونات المعتمد على القائمة المنسدلة الذي يتيح للمستخدمين اختيار أيقونة من قائمة.
-
- ```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);
- };
+```jsx
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
- return (
-
-
-
- );
- };
- ```
-
+export const MyComponent = () => {
-
- | المحددات | النوع | الوصف |
- | ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------ |
- | معطل | قيمة منطقية | يقوم بتعطيل منتقى الأيقونات إذا تم تعيينه إلى `true` |
- | عند التغيير | دالة | الدالة الارتجاعية التي تُفعل عندما يختار المستخدم أيقونة. يستقبل كائنًا يحتوي على الخصائص `iconKey` و `Icon` |
- | مفتاح الأيقونة المختارة | نص | مفتاح الأيقونة المختارة في البداية |
- | النقر بالخارج | دالة | الدالة الارتجاعية التي تُفعل عندما ينقر المستخدم خارج القائمة المنسدلة |
- | عند الإغلاق | دالة | الدالة الارتجاعية التي تُفعل عند إغلاق القائمة المنسدلة |
- | عند الفتح | دالة | الدالة الارتجاعية التي تُفعل عند فتح القائمة المنسدلة |
- | التنوع | نص | متغير النمط البصري للأيقونة القابلة للنقر. تشمل الخيارات: `رئيسي`, `ثانوي`, و `ثالثي` |
-
+ const [selectedIcon, setSelectedIcon] = useState("");
+ const handleIconChange = ({ iconKey, Icon }) => {
+ console.log("Selected Icon:", iconKey);
+ setSelectedIcon(iconKey);
+ };
+
+ return (
+
+
+
+ );
+};
+```
+
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| ----------------------- | ----------- | ------------------------------------------------------------------------------------------------------------ |
+| معطل | قيمة منطقية | يقوم بتعطيل منتقى الأيقونات إذا تم تعيينه إلى `true` |
+| عند التغيير | دالة | الدالة الارتجاعية التي تُفعل عندما يختار المستخدم أيقونة. يستقبل كائنًا يحتوي على الخصائص `iconKey` و `Icon` |
+| مفتاح الأيقونة المختارة | نص | مفتاح الأيقونة المختارة في البداية |
+| النقر بالخارج | دالة | الدالة الارتجاعية التي تُفعل عندما ينقر المستخدم خارج القائمة المنسدلة |
+| عند الإغلاق | دالة | الدالة الارتجاعية التي تُفعل عند إغلاق القائمة المنسدلة |
+| عند الفتح | دالة | الدالة الارتجاعية التي تُفعل عند فتح القائمة المنسدلة |
+| التنوع | نص | متغير النمط البصري للأيقونة القابلة للنقر. تشمل الخيارات: `رئيسي`, `ثانوي`, و `ثالثي` |
+
+
+
+
+
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/image-input.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/image-input.mdx
index 0ee7a2dbb9..5c77e52751 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/input/image-input.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/image-input.mdx
@@ -10,25 +10,32 @@ image: /images/user-guide/objects/objects.png
4A4F33452D 44445245332A2E2F454A46 28452F 482532274429 35483129.
-
- ```jsx
- import { ImageInput } from "@/ui/input/components/ImageInput";
+
- export const MyComponent = () => {
- return ;
- };
- ```
-
+```jsx
+import { ImageInput } from "@/ui/input/components/ImageInput";
-
- | المحددات | النوع | الوصف |
- | ------------ | ----------- | --------------------------------------------------------------------------------- |
- | صورة | نص | 3946482746 45352F31 274435483129 27442544432A3148464A |
- | onUpload | دالة | الدالة التي تُستدعى عند قيام المستخدم بتحميل صورة جديدة. تستقبل كائن `File` كوسيط |
- | onRemove | دالة | الدالة التي تُستدعى عند نقر المستخدم على زر الإزالة |
- | onAbort | دالة | الدالة التي تُستدعى عند نقر المستخدم على زر الإلغاء أثناء تحميل الصورة |
- | isUploading | قيمة منطقية | يشير إلى ما إذا كان يتم تحميل صورة حاليًا |
- | errorMessage | نص | رسالة خطأ اختيارية لعرضها أسفل حقل إدخال الصورة |
- | معطل | قيمة منطقية | إذا كانت `true`، فسيكون حقل الإدخال بأكمله معطلاً، ولن تكون الأزرار قابلة للنقر |
-
+export const MyComponent = () => {
+ return ;
+};
+```
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| ------------ | ----------- | --------------------------------------------------------------------------------- |
+| صورة | نص | 3946482746 45352F31 274435483129 27442544432A3148464A |
+| onUpload | دالة | الدالة التي تُستدعى عند قيام المستخدم بتحميل صورة جديدة. تستقبل كائن `File` كوسيط |
+| onRemove | دالة | الدالة التي تُستدعى عند نقر المستخدم على زر الإزالة |
+| onAbort | دالة | الدالة التي تُستدعى عند نقر المستخدم على زر الإلغاء أثناء تحميل الصورة |
+| isUploading | قيمة منطقية | يشير إلى ما إذا كان يتم تحميل صورة حاليًا |
+| errorMessage | نص | رسالة خطأ اختيارية لعرضها أسفل حقل إدخال الصورة |
+| معطل | قيمة منطقية | إذا كانت `true`، فسيكون حقل الإدخال بأكمله معطلاً، ولن تكون الأزرار قابلة للنقر |
+
+
+
+
+
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/radio.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/radio.mdx
index 96337aa74a..931d30ec79 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/input/radio.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/radio.mdx
@@ -10,50 +10,58 @@ image: /images/user-guide/create-workspace/workspace-cover.png
تستخدم عندما يمكن للمستخدمين اختيار خيار واحد فقط من سلسلة من الخيارات.
-
- ```jsx
- import { Radio } from "twenty-ui/display";
+
- export const MyComponent = () => {
+```jsx
+import { Radio } from "twenty-ui/display";
- const handleRadioChange = (event) => {
- console.log("Radio button changed:", event.target.checked);
- };
+export const MyComponent = () => {
- const handleCheckedChange = (checked) => {
- console.log("Checked state changed:", checked);
- };
+ const handleRadioChange = (event) => {
+ console.log("Radio button changed:", event.target.checked);
+ };
+
+ const handleCheckedChange = (checked) => {
+ console.log("Checked state changed:", checked);
+ };
- return (
-
- );
- };
- },{
- ```
-
+ return (
+
+ );
+};
+},{
+```
-
- | المحددات | النوع | الوصف |
- | ------------------------ | ----------------- | ------------------------------------------------------------------ |
- | النمط | خصائص `React.CSS` | أنماط إضافية مضمنة للمكون |
- | اسم الفئة | نص | فئة CSS اختيارية لتصميم إضافي |
- | مختار | قيمة منطقية | يشير إلى ما إذا كان زر الراديو محددًا |
- | القيمة | نص | التسمية أو النص المرتبط بزر الراديو |
- | عند التغيير | دالة | الدالة التي تُستدعى عند تغيير زر الاختيار المحدد. |
- | عند تغيير الحالة المحددة | دالة | الدالة التي تُستدعى عند تغيير حالة `checked` لزر الاختيار. |
- | الحجم | نص | حجم زر الراديو. تشمل الخيارات: `large` و `small` |
- | معطل | قيمة منطقية | إذا كانت `true`، فسيكون زر الاختيار معطلاً وغير قابل للنقر |
- | موضع التسمية | نص | موضع نص التسمية بالنسبة لزر الراديو. يوجد خياران: `left` و `right` |
-
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| ------------------------ | ----------------- | ------------------------------------------------------------------ |
+| النمط | خصائص `React.CSS` | أنماط إضافية مضمنة للمكون |
+| اسم الفئة | نص | فئة CSS اختيارية لتصميم إضافي |
+| مختار | قيمة منطقية | يشير إلى ما إذا كان زر الراديو محددًا |
+| القيمة | نص | التسمية أو النص المرتبط بزر الراديو |
+| عند التغيير | دالة | الدالة التي تُستدعى عند تغيير زر الاختيار المحدد. |
+| عند تغيير الحالة المحددة | دالة | الدالة التي تُستدعى عند تغيير حالة `checked` لزر الاختيار. |
+| الحجم | نص | حجم زر الراديو. تشمل الخيارات: `large` و `small` |
+| معطل | قيمة منطقية | إذا كانت `true`، فسيكون زر الاختيار معطلاً وغير قابل للنقر |
+| موضع التسمية | نص | موضع نص التسمية بالنسبة لزر الراديو. يوجد خياران: `left` و `right` |
+
+
+
+
+
## مجموعة الراديو
@@ -61,37 +69,45 @@ image: /images/user-guide/create-workspace/workspace-cover.png
يجمع أزرار الراديو ذات الصلة معًا.
-
- ```jsx
- import React, { useState } from "react";
- import { Radio, RadioGroup } from "twenty-ui/display";
+
- export const MyComponent = () => {
+```jsx
+import React, { useState } from "react";
+import { Radio, RadioGroup } from "twenty-ui/display";
- const [selectedValue, setSelectedValue] = useState("Option 1");
+export const MyComponent = () => {
- const handleChange = (event) => {
- setSelectedValue(event.target.value);
- };
-
- return (
-
-
-
-
-
- );
- };
+ const [selectedValue, setSelectedValue] = useState("Option 1");
- ```
-
+ const handleChange = (event) => {
+ setSelectedValue(event.target.value);
+ };
+
+ return (
+
+
+
+
+
+ );
+};
+
+```
+
+
+
+
+
+| الخصائص | النوع | الوصف |
+| ------------- | ----------------- | --------------------------------------------------------------------- |
+| القيمة | string | قيمة زر الراديو المحدد حاليًا |
+| عند التغيير | دالة | دالة الاستدعاء التي يتم تشغيلها عند تغيير زر الاختيار. |
+| onValueChange | دالة | دالة الاستدعاء التي يتم تشغيلها عند تغيير القيمة المحددة في المجموعة. |
+| الأبناء | `React.ReactNode` | يتيح لك تمرير مكوّنات React (مثل Radio) كعناصر فرعية إلى Radio Group |
+
+
+
+
+
-
- | الخصائص | النوع | الوصف |
- | ------------- | ----------------- | --------------------------------------------------------------------- |
- | القيمة | string | قيمة زر الراديو المحدد حاليًا |
- | عند التغيير | دالة | دالة الاستدعاء التي يتم تشغيلها عند تغيير زر الاختيار. |
- | onValueChange | دالة | دالة الاستدعاء التي يتم تشغيلها عند تغيير القيمة المحددة في المجموعة. |
- | الأبناء | `React.ReactNode` | يتيح لك تمرير مكوّنات React (مثل Radio) كعناصر فرعية إلى Radio Group |
-
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/select.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/select.mdx
index 0e114450b6..347e2d3083 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/input/select.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/select.mdx
@@ -10,42 +10,49 @@ image: /images/user-guide/what-is-twenty/20.png
يتيح للمستخدمين اختيار قيمة من قائمة من الخيارات المحددة مسبقًا.
-
- ```jsx
- import { RecoilRoot } from 'recoil';
- import { IconTwentyStar } from 'twenty-ui/display';
+
- import { Select } from '@/ui/input/components/Select';
+```jsx
+import { RecoilRoot } from 'recoil';
+import { IconTwentyStar } from 'twenty-ui/display';
- export const MyComponent = () => {
+import { Select } from '@/ui/input/components/Select';
- return (
-
-
-
- );
- };
+export const MyComponent = () => {
- ```
-
+ return (
+
+
+
+ );
+};
-
- | المحددات | النوع | الوصف |
- | ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
- | اسم الفئة | نص | فئة CSS اختيارية للتنسيق الإضافي |
- | معطل | قيمة منطقية | عند ضبطها على `true`، يتم تعطيل تفاعل المستخدم مع المكون |
- | التسمية | نص | التسمية التي تصف غرض مكوّن `Select` |
- | عند التغيير | دالة | الدالة التي تُستدعى عند تغيير القيم المحددة |
- | خيارات | مصفوفة | تمثل الخيارات المتاحة في مكون `الاختيار`. إنها مصفوفة من الكائنات حيث يحتوي كل كائن على `قيمة` (معرف فريد)، `تسمية` (معرف فريد)، و`أيقونة` اختيارية |
- | القيمة | نص | تمثل القيمة المحددة حاليًا. يجب أن تطابق إحدى خصائص `القيمة` في مصفوفة `الخيارات` |
-
+```
+
+
+
+
+
+| المحددات | النوع | الوصف |
+| ----------- | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
+| اسم الفئة | نص | فئة CSS اختيارية للتنسيق الإضافي |
+| معطل | قيمة منطقية | عند ضبطها على `true`، يتم تعطيل تفاعل المستخدم مع المكون |
+| التسمية | نص | التسمية التي تصف غرض مكوّن `Select` |
+| عند التغيير | دالة | الدالة التي تُستدعى عند تغيير القيم المحددة |
+| خيارات | مصفوفة | تمثل الخيارات المتاحة في مكون `الاختيار`. إنها مصفوفة من الكائنات حيث يحتوي كل كائن على `قيمة` (معرف فريد)، `تسمية` (معرف فريد)، و`أيقونة` اختيارية |
+| القيمة | نص | تمثل القيمة المحددة حاليًا. يجب أن تطابق إحدى خصائص `القيمة` في مصفوفة `الخيارات` |
+
+
+
+
+
diff --git a/packages/twenty-docs/l/ar/twenty-ui/input/text.mdx b/packages/twenty-docs/l/ar/twenty-ui/input/text.mdx
index 2f096d4c61..7c752227e2 100644
--- a/packages/twenty-docs/l/ar/twenty-ui/input/text.mdx
+++ b/packages/twenty-docs/l/ar/twenty-ui/input/text.mdx
@@ -12,53 +12,64 @@ image: /images/user-guide/notes/notes_header.png
يسمح للمستخدمين بإدخال وتحرير النص.
-
- ```jsx
- import { RecoilRoot } from "recoil";
- import { TextInput } from "@/ui/input/components/TextInput";
- export const MyComponent = () => {
- const handleChange = (text) => {
- console.log("تم تغيير الإدخال:", text);
- };
+
- const handleKeyDown = (event) => {
- console.log("تم ضغط المفتاح:", event.key);
- };
+```jsx
+import { RecoilRoot } from "recoil";
+import { TextInput } from "@/ui/input/components/TextInput";
- return (
-
-
-
- );
- };
- },{
- ```
-
+export const MyComponent = () => {
+ const handleChange = (text) => {
+ console.log("تم تغيير الإدخال:", text);
+ };
-
- | خصائص | النوع | الوصف |
- | ---------------- | ------------- | ------------------------------------------------------------------------------------------------------- |
- | className | string | اسم اختياري للتنسيق الإضافي. |
- | التسمية | نص | يمثل التسمية للإدخال. |
- | onChange | وظيفة | الدالة التي تُستدعى عند تغيير قيمة الإدخال. |
- | عرض كامل | قيمة منطقية | يشير إلى ما إذا كان الإدخال يجب أن يشغل 100% من العرض. |
- | تعطيل الإختصارات | قيمة منطقية | يشير إلى ما إذا كانت الاختصارات ممكنة للإدخال. |
- | خطأ | string | يمثل رسالة الخطأ التي سيتم عرضها. عند توفرها، تضيف رمز خطأ على الجانب الأيمن من الإدخال. |
- | onKeyDown | دالة | يتم الاستدعاء عندما يتم الضغط على مفتاح عند التركيز على حقل الإدخال. يتلقى `React.KeyboardEvent` كمعلمة |
- | أيقونة يمين | مكون الأيقونة | مكون أيقونة اختياري معروض على الجانب الأيمن من الإدخال. |
+ const handleKeyDown = (event) => {
+ console.log("تم ضغط المفتاح:", event.key);
+ };
+
+ return (
+
+
+
+ );
+};
+},{
+```
+
+
+
+
+
+
+
+| خصائص | النوع | الوصف |
+| ---------------- | ------------- | ------------------------------------------------------------------------------------------------------- |
+| className | string | اسم اختياري للتنسيق الإضافي. |
+| التسمية | نص | يمثل التسمية للإدخال. |
+| onChange | وظيفة | الدالة التي تُستدعى عند تغيير قيمة الإدخال. |
+| عرض كامل | قيمة منطقية | يشير إلى ما إذا كان الإدخال يجب أن يشغل 100% من العرض. |
+| تعطيل الإختصارات | قيمة منطقية | يشير إلى ما إذا كانت الاختصارات ممكنة للإدخال. |
+| خطأ | string | يمثل رسالة الخطأ التي سيتم عرضها. عند توفرها، تضيف رمز خطأ على الجانب الأيمن من الإدخال. |
+| onKeyDown | دالة | يتم الاستدعاء عندما يتم الضغط على مفتاح عند التركيز على حقل الإدخال. يتلقى `React.KeyboardEvent` كمعلمة |
+| أيقونة يمين | مكون الأيقونة | مكون أيقونة اختياري معروض على الجانب الأيمن من الإدخال. |
+
+
+
+
+يقبل المكون أيضًا دعم خصائص HTML أخرى لعناصر الإدخال.
+
+
- يقبل المكون أيضًا دعم خصائص HTML أخرى لعناصر الإدخال.
-
## إدخال نص بالحجم التلقائي
@@ -66,40 +77,51 @@ image: /images/user-guide/notes/notes_header.png
مكون إدخال نصي يعدل ارتفاعه تلقائيًا بناءً على المحتوى.
-
- ```jsx
- import { RecoilRoot } from "recoil";
- import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
- export const MyComponent = () => {
- return (
-
- console.log("تم تشغيل الدالة onValidate")}
- minRows={1}
- placeholder="اكتب تعليقًا"
- onFocus={() => console.log("تم تشغيل الدالة onFocus")}
- variant="icon"
- buttonTitle
- value="المهمة: "
- />
-
- );
- };},{
- ```
-
+
+
+```jsx
+import { RecoilRoot } from "recoil";
+import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
+
+export const MyComponent = () => {
+ return (
+
+ console.log("تم تشغيل الدالة onValidate")}
+ minRows={1}
+ placeholder="اكتب تعليقًا"
+ onFocus={() => console.log("تم تشغيل الدالة onFocus")}
+ variant="icon"
+ buttonTitle
+ value="المهمة: "
+ />
+
+ );
+};},{
+```
+
+
+
+
+
+
+
+| خصائص | النوع | الوصف |
+| ------------------ | ----- | ------------------------------------------------------------- |
+| onValidate | دالة | الدالة التي ترغب في تفعيلها عند تصديق المستخدم الإدخال. |
+| الحد الأدنى للأسطر | رقم | عدد الأسطر الأدنى للمساحة النصية. |
+| النص التوضيحي | نص | النص التوضيحي الذي ترغب في عرضه عند كون المساحة النصية فارغة. |
+| onFocus | دالة | الدالة التي ترغب في تفعيلها عند تركيز المساحة النصية. |
+| البديل | نص | البديل للإدخال. تشمل الخيارات: `افتراضي`، `أيقونة`، و`زر`. |
+| عنوان الزر | نص | العنوان للزر (فقط للبديل الزر). |
+| القيمة | نص | القيمة الأولية للمساحة النصية. |
+
+
+
+
+
-
- | خصائص | النوع | الوصف |
- | ------------------ | ----- | ------------------------------------------------------------- |
- | onValidate | دالة | الدالة التي ترغب في تفعيلها عند تصديق المستخدم الإدخال. |
- | الحد الأدنى للأسطر | رقم | عدد الأسطر الأدنى للمساحة النصية. |
- | النص التوضيحي | نص | النص التوضيحي الذي ترغب في عرضه عند كون المساحة النصية فارغة. |
- | onFocus | دالة | الدالة التي ترغب في تفعيلها عند تركيز المساحة النصية. |
- | البديل | نص | البديل للإدخال. تشمل الخيارات: `افتراضي`، `أيقونة`، و`زر`. |
- | عنوان الزر | نص | العنوان للزر (فقط للبديل الزر). |
- | القيمة | نص | القيمة الأولية للمساحة النصية. |
-
## مساحة نصية
@@ -107,31 +129,40 @@ image: /images/user-guide/notes/notes_header.png
تتيح لك إنشاء إدخالات نصية متعددة الأسطر.
-
- ```jsx
- import { TextArea } from "@/ui/input/components/TextArea";
+
- export const MyComponent = () => {
- return (
-
+ 
+