From 99d5aa25898f164c9c863aac3aad73bfc57c9b80 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Tue, 23 Dec 2025 01:40:21 +0100 Subject: [PATCH] i18n - docs translations (#16767) Created by Github action Co-authored-by: github-actions --- .../backend-development/custom-objects.mdx | 39 +++ .../backend-development/zapier.mdx | 83 +++++++ .../folder-architecture-front.mdx | 109 +++++++++ .../frontend-commands.mdx | 86 +++++++ packages/twenty-docs/l/ar/twenty-ui/input.mdx | 4 +- .../twenty-ui/navigation/navigation-bar.mdx | 69 +++--- .../backend-development/custom-objects.mdx | 39 +++ .../backend-development/feature-flags.mdx | 46 ++++ .../backend-development/queue.mdx | 41 ++++ .../backend-development/zapier.mdx | 81 ++++++ .../frontend-development/hotkeys.mdx | 178 ++++++++++++++ .../capabilities/cloud-providers.mdx | 45 ++++ packages/twenty-docs/l/cs/twenty-ui/input.mdx | 4 +- .../twenty-docs/l/cs/twenty-ui/navigation.mdx | 4 +- .../l/cs/twenty-ui/navigation/breadcrumb.mdx | 55 ++--- .../l/cs/twenty-ui/navigation/links.mdx | 227 ++++++++--------- .../twenty-ui/navigation/navigation-bar.mdx | 69 +++--- .../need-more-help/professional-services.mdx | 29 +++ .../best-practices-server.mdx | 22 ++ .../backend-development/queue.mdx | 41 ++++ .../frontend-commands.mdx | 90 +++++++ .../frontend-development/hotkeys.mdx | 178 ++++++++++++++ .../frontend-development/storybook.mdx | 8 + packages/twenty-docs/l/de/twenty-ui/input.mdx | 4 +- .../twenty-docs/l/de/twenty-ui/navigation.mdx | 4 +- .../twenty-ui/navigation/navigation-bar.mdx | 69 +++--- .../l/de/twenty-ui/navigation/step-bar.mdx | 44 ++-- .../best-practices-server.mdx | 22 ++ .../backend-development/custom-objects.mdx | 39 +++ .../backend-development/queue.mdx | 41 ++++ .../frontend-development/hotkeys.mdx | 178 ++++++++++++++ .../frontend-development/storybook.mdx | 8 + .../frontend-development/work-with-figma.mdx | 59 +++++ packages/twenty-docs/l/es/twenty-ui/input.mdx | 4 +- .../l/es/twenty-ui/input/checkbox.mdx | 63 +++-- .../twenty-docs/l/es/twenty-ui/navigation.mdx | 4 +- .../l/es/twenty-ui/navigation/links.mdx | 227 ++++++++--------- .../l/es/twenty-ui/progress-bar.mdx | 97 ++++---- .../billing/capabilities/pricing-plans.mdx | 79 ++++++ .../es/user-guide/data-migration/overview.mdx | 89 +++++++ .../permissions-access/overview.mdx | 40 +++ .../how-tos/restrict-access-to-your-view.mdx | 32 +++ .../how-tos/track-time-in-stage.mdx | 231 ++++++++++++++++++ .../best-practices-server.mdx | 22 ++ .../folder-architecture-front.mdx | 109 +++++++++ .../frontend-commands.mdx | 86 +++++++ .../frontend-development/storybook.mdx | 8 + .../capabilities/cloud-providers.mdx | 45 ++++ .../l/fr/twenty-ui/display/app-tooltip.mdx | 118 ++++----- packages/twenty-docs/l/fr/twenty-ui/input.mdx | 4 +- .../l/fr/twenty-ui/input/checkbox.mdx | 63 +++-- .../l/fr/twenty-ui/input/icon-picker.mdx | 76 +++--- .../l/fr/twenty-ui/input/image-input.mdx | 43 ++-- .../twenty-docs/l/fr/twenty-ui/input/text.mdx | 215 ++++++++-------- .../twenty-docs/l/fr/twenty-ui/navigation.mdx | 4 +- .../l/fr/twenty-ui/navigation/breadcrumb.mdx | 55 ++--- .../l/fr/twenty-ui/navigation/links.mdx | 227 ++++++++--------- .../l/fr/twenty-ui/navigation/step-bar.mdx | 44 ++-- .../l/fr/twenty-ui/progress-bar.mdx | 97 ++++---- .../permissions-access-control.mdx | 35 +++ .../billing/capabilities/pricing-plans.mdx | 79 ++++++ .../how-tos/limit-emails-imported.mdx | 52 ++++ .../capabilities/file-formats.mdx | 48 ++++ .../fr/user-guide/data-migration/overview.mdx | 89 +++++++ .../data-model/capabilities/fields.mdx | 122 +++++++++ .../how-tos/customize-your-data-model.mdx | 22 ++ .../permissions-access/overview.mdx | 40 +++ .../how-tos/restrict-access-to-your-view.mdx | 32 +++ .../show-expected-amount-in-pipeline.mdx | 149 +++++++++++ .../how-tos/track-time-in-stage.mdx | 231 ++++++++++++++++++ .../user-guide/views-pipelines/overview.mdx | 137 +++++++++++ .../capabilities/workflow-branches.mdx | 66 +++++ .../capabilities/workflow-versions.mdx | 85 +++++++ .../best-practices-server.mdx | 22 ++ .../backend-development/queue.mdx | 41 ++++ .../frontend-commands.mdx | 90 +++++++ .../frontend-development/hotkeys.mdx | 178 ++++++++++++++ .../frontend-development/storybook.mdx | 8 + packages/twenty-docs/l/it/twenty-ui/input.mdx | 4 +- .../twenty-docs/l/it/twenty-ui/navigation.mdx | 4 +- .../twenty-ui/navigation/navigation-bar.mdx | 69 +++--- .../l/it/twenty-ui/progress-bar.mdx | 97 ++++---- .../backend-development/feature-flags.mdx | 46 ++++ .../backend-development/server-commands.mdx | 106 ++++++++ .../frontend-commands.mdx | 90 +++++++ .../frontend-development/hotkeys.mdx | 178 ++++++++++++++ .../frontend-development/storybook.mdx | 8 + .../frontend-development/work-with-figma.mdx | 136 +++++++++++ .../capabilities/cloud-providers.mdx | 46 ++++ .../l/ja/twenty-ui/display/app-tooltip.mdx | 118 ++++----- packages/twenty-docs/l/ja/twenty-ui/input.mdx | 4 +- .../l/ja/twenty-ui/input/icon-picker.mdx | 76 +++--- .../twenty-docs/l/ja/twenty-ui/navigation.mdx | 4 +- .../l/ja/twenty-ui/navigation/breadcrumb.mdx | 55 ++--- .../l/ja/twenty-ui/navigation/links.mdx | 227 ++++++++--------- .../twenty-ui/navigation/navigation-bar.mdx | 69 +++--- .../l/ja/twenty-ui/navigation/step-bar.mdx | 44 ++-- .../best-practices-server.mdx | 22 ++ .../folder-architecture-front.mdx | 109 +++++++++ .../frontend-commands.mdx | 90 +++++++ .../frontend-development/work-with-figma.mdx | 58 +++++ .../l/ko/twenty-ui/display/app-tooltip.mdx | 96 +++----- packages/twenty-docs/l/ko/twenty-ui/input.mdx | 4 +- .../l/ko/twenty-ui/input/checkbox.mdx | 63 +++-- .../l/ko/twenty-ui/input/image-input.mdx | 43 ++-- .../twenty-docs/l/ko/twenty-ui/navigation.mdx | 4 +- .../l/ko/twenty-ui/navigation/step-bar.mdx | 44 ++-- .../best-practices-server.mdx | 22 ++ .../backend-development/queue.mdx | 41 ++++ .../backend-development/zapier.mdx | 83 +++++++ .../folder-architecture-front.mdx | 109 +++++++++ .../frontend-commands.mdx | 90 +++++++ .../frontend-development/hotkeys.mdx | 178 ++++++++++++++ .../frontend-development/storybook.mdx | 8 + .../capabilities/cloud-providers.mdx | 45 ++++ .../l/pt/twenty-ui/display/app-tooltip.mdx | 118 ++++----- packages/twenty-docs/l/pt/twenty-ui/input.mdx | 4 +- .../twenty-docs/l/pt/twenty-ui/navigation.mdx | 4 +- .../l/pt/twenty-ui/navigation/links.mdx | 226 ++++++++--------- .../l/pt/twenty-ui/navigation/step-bar.mdx | 44 ++-- .../backend-development/custom-objects.mdx | 39 +++ .../frontend-development/storybook.mdx | 8 + packages/twenty-docs/l/ro/twenty-ui/input.mdx | 4 +- .../l/ro/twenty-ui/input/checkbox.mdx | 63 +++-- .../l/ro/twenty-ui/input/icon-picker.mdx | 76 +++--- .../twenty-docs/l/ro/twenty-ui/navigation.mdx | 4 +- .../l/ro/twenty-ui/navigation/links.mdx | 227 ++++++++--------- .../twenty-ui/navigation/navigation-bar.mdx | 69 +++--- .../l/ro/twenty-ui/progress-bar.mdx | 97 ++++---- .../permissions-access-control.mdx | 35 +++ .../billing/capabilities/pricing-plans.mdx | 79 ++++++ .../how-tos/limit-emails-imported.mdx | 52 ++++ .../capabilities/file-formats.mdx | 48 ++++ .../ro/user-guide/data-migration/overview.mdx | 89 +++++++ .../data-model/capabilities/fields.mdx | 122 +++++++++ .../permissions-access/overview.mdx | 40 +++ .../show-expected-amount-in-pipeline.mdx | 149 +++++++++++ .../capabilities/workflow-branches.mdx | 66 +++++ .../capabilities/workflow-versions.mdx | 85 +++++++ .../frontend-commands.mdx | 90 +++++++ .../frontend-development/hotkeys.mdx | 178 ++++++++++++++ .../frontend-development/storybook.mdx | 8 + .../frontend-development/work-with-figma.mdx | 59 +++++ .../l/ru/twenty-ui/display/app-tooltip.mdx | 118 ++++----- packages/twenty-docs/l/ru/twenty-ui/input.mdx | 4 +- .../l/ru/twenty-ui/input/icon-picker.mdx | 76 +++--- .../twenty-docs/l/ru/twenty-ui/navigation.mdx | 4 +- .../l/ru/twenty-ui/navigation/breadcrumb.mdx | 55 ++--- .../l/ru/twenty-ui/navigation/step-bar.mdx | 44 ++-- .../l/ru/twenty-ui/progress-bar.mdx | 97 ++++---- .../backend-development/feature-flags.mdx | 46 ++++ .../backend-development/queue.mdx | 41 ++++ .../backend-development/zapier.mdx | 83 +++++++ .../frontend-commands.mdx | 90 +++++++ .../frontend-development/hotkeys.mdx | 178 ++++++++++++++ .../frontend-development/storybook.mdx | 8 + packages/twenty-docs/l/tr/twenty-ui/input.mdx | 4 +- .../twenty-docs/l/tr/twenty-ui/navigation.mdx | 4 +- .../twenty-ui/navigation/navigation-bar.mdx | 69 +++--- .../backend-development/queue.mdx | 42 ++++ .../folder-architecture-front.mdx | 109 +++++++++ .../frontend-commands.mdx | 90 +++++++ .../frontend-development/hotkeys.mdx | 178 ++++++++++++++ .../frontend-development/storybook.mdx | 8 + packages/twenty-docs/l/zh/twenty-ui/input.mdx | 4 +- .../l/zh/twenty-ui/input/icon-picker.mdx | 60 ++--- .../twenty-docs/l/zh/twenty-ui/navigation.mdx | 4 +- .../l/zh/twenty-ui/navigation/breadcrumb.mdx | 55 ++--- .../l/zh/twenty-ui/navigation/links.mdx | 181 ++++---------- .../twenty-ui/navigation/navigation-bar.mdx | 69 +++--- .../l/zh/twenty-ui/navigation/step-bar.mdx | 44 ++-- 171 files changed, 9366 insertions(+), 2595 deletions(-) create mode 100644 packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/custom-objects.mdx create mode 100644 packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/zapier.mdx create mode 100644 packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx create mode 100644 packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/frontend-commands.mdx create mode 100644 packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/custom-objects.mdx create mode 100644 packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/feature-flags.mdx create mode 100644 packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/queue.mdx create mode 100644 packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/zapier.mdx create mode 100644 packages/twenty-docs/l/cs/developers/contribute/capabilities/frontend-development/hotkeys.mdx create mode 100644 packages/twenty-docs/l/cs/developers/self-host/capabilities/cloud-providers.mdx create mode 100644 packages/twenty-docs/l/cs/user-guide/workflows/how-tos/need-more-help/professional-services.mdx create mode 100644 packages/twenty-docs/l/de/developers/contribute/capabilities/backend-development/best-practices-server.mdx create mode 100644 packages/twenty-docs/l/de/developers/contribute/capabilities/backend-development/queue.mdx create mode 100644 packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/frontend-commands.mdx create mode 100644 packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/hotkeys.mdx create mode 100644 packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/storybook.mdx create mode 100644 packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/best-practices-server.mdx create mode 100644 packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/custom-objects.mdx create mode 100644 packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/queue.mdx create mode 100644 packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/hotkeys.mdx create mode 100644 packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/storybook.mdx create mode 100644 packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/work-with-figma.mdx create mode 100644 packages/twenty-docs/l/es/user-guide/billing/capabilities/pricing-plans.mdx create mode 100644 packages/twenty-docs/l/es/user-guide/data-migration/overview.mdx create mode 100644 packages/twenty-docs/l/es/user-guide/permissions-access/overview.mdx create mode 100644 packages/twenty-docs/l/es/user-guide/views-pipelines/how-tos/restrict-access-to-your-view.mdx create mode 100644 packages/twenty-docs/l/es/user-guide/views-pipelines/how-tos/track-time-in-stage.mdx create mode 100644 packages/twenty-docs/l/fr/developers/contribute/capabilities/backend-development/best-practices-server.mdx create mode 100644 packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx create mode 100644 packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/frontend-commands.mdx create mode 100644 packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/storybook.mdx create mode 100644 packages/twenty-docs/l/fr/developers/self-host/capabilities/cloud-providers.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/ai/capabilities/permissions-access-control.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/billing/capabilities/pricing-plans.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/calendar-emails/how-tos/limit-emails-imported.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/data-migration/capabilities/file-formats.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/data-migration/overview.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/data-model/capabilities/fields.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/data-model/how-tos/customize-your-data-model.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/permissions-access/overview.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/views-pipelines/how-tos/restrict-access-to-your-view.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/views-pipelines/how-tos/show-expected-amount-in-pipeline.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/views-pipelines/how-tos/track-time-in-stage.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/views-pipelines/overview.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/workflows/capabilities/workflow-branches.mdx create mode 100644 packages/twenty-docs/l/fr/user-guide/workflows/capabilities/workflow-versions.mdx create mode 100644 packages/twenty-docs/l/it/developers/contribute/capabilities/backend-development/best-practices-server.mdx create mode 100644 packages/twenty-docs/l/it/developers/contribute/capabilities/backend-development/queue.mdx create mode 100644 packages/twenty-docs/l/it/developers/contribute/capabilities/frontend-development/frontend-commands.mdx create mode 100644 packages/twenty-docs/l/it/developers/contribute/capabilities/frontend-development/hotkeys.mdx create mode 100644 packages/twenty-docs/l/it/developers/contribute/capabilities/frontend-development/storybook.mdx create mode 100644 packages/twenty-docs/l/ja/developers/contribute/capabilities/backend-development/feature-flags.mdx create mode 100644 packages/twenty-docs/l/ja/developers/contribute/capabilities/backend-development/server-commands.mdx create mode 100644 packages/twenty-docs/l/ja/developers/contribute/capabilities/frontend-development/frontend-commands.mdx create mode 100644 packages/twenty-docs/l/ja/developers/contribute/capabilities/frontend-development/hotkeys.mdx create mode 100644 packages/twenty-docs/l/ja/developers/contribute/capabilities/frontend-development/storybook.mdx create mode 100644 packages/twenty-docs/l/ja/developers/contribute/capabilities/frontend-development/work-with-figma.mdx create mode 100644 packages/twenty-docs/l/ja/developers/self-host/capabilities/cloud-providers.mdx create mode 100644 packages/twenty-docs/l/ko/developers/contribute/capabilities/backend-development/best-practices-server.mdx create mode 100644 packages/twenty-docs/l/ko/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx create mode 100644 packages/twenty-docs/l/ko/developers/contribute/capabilities/frontend-development/frontend-commands.mdx create mode 100644 packages/twenty-docs/l/ko/developers/contribute/capabilities/frontend-development/work-with-figma.mdx create mode 100644 packages/twenty-docs/l/pt/developers/contribute/capabilities/backend-development/best-practices-server.mdx create mode 100644 packages/twenty-docs/l/pt/developers/contribute/capabilities/backend-development/queue.mdx create mode 100644 packages/twenty-docs/l/pt/developers/contribute/capabilities/backend-development/zapier.mdx create mode 100644 packages/twenty-docs/l/pt/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx create mode 100644 packages/twenty-docs/l/pt/developers/contribute/capabilities/frontend-development/frontend-commands.mdx create mode 100644 packages/twenty-docs/l/pt/developers/contribute/capabilities/frontend-development/hotkeys.mdx create mode 100644 packages/twenty-docs/l/pt/developers/contribute/capabilities/frontend-development/storybook.mdx create mode 100644 packages/twenty-docs/l/pt/developers/self-host/capabilities/cloud-providers.mdx create mode 100644 packages/twenty-docs/l/ro/developers/contribute/capabilities/backend-development/custom-objects.mdx create mode 100644 packages/twenty-docs/l/ro/developers/contribute/capabilities/frontend-development/storybook.mdx create mode 100644 packages/twenty-docs/l/ro/user-guide/ai/capabilities/permissions-access-control.mdx create mode 100644 packages/twenty-docs/l/ro/user-guide/billing/capabilities/pricing-plans.mdx create mode 100644 packages/twenty-docs/l/ro/user-guide/calendar-emails/how-tos/limit-emails-imported.mdx create mode 100644 packages/twenty-docs/l/ro/user-guide/data-migration/capabilities/file-formats.mdx create mode 100644 packages/twenty-docs/l/ro/user-guide/data-migration/overview.mdx create mode 100644 packages/twenty-docs/l/ro/user-guide/data-model/capabilities/fields.mdx create mode 100644 packages/twenty-docs/l/ro/user-guide/permissions-access/overview.mdx create mode 100644 packages/twenty-docs/l/ro/user-guide/views-pipelines/how-tos/show-expected-amount-in-pipeline.mdx create mode 100644 packages/twenty-docs/l/ro/user-guide/workflows/capabilities/workflow-branches.mdx create mode 100644 packages/twenty-docs/l/ro/user-guide/workflows/capabilities/workflow-versions.mdx create mode 100644 packages/twenty-docs/l/ru/developers/contribute/capabilities/frontend-development/frontend-commands.mdx create mode 100644 packages/twenty-docs/l/ru/developers/contribute/capabilities/frontend-development/hotkeys.mdx create mode 100644 packages/twenty-docs/l/ru/developers/contribute/capabilities/frontend-development/storybook.mdx create mode 100644 packages/twenty-docs/l/ru/developers/contribute/capabilities/frontend-development/work-with-figma.mdx create mode 100644 packages/twenty-docs/l/tr/developers/contribute/capabilities/backend-development/feature-flags.mdx create mode 100644 packages/twenty-docs/l/tr/developers/contribute/capabilities/backend-development/queue.mdx create mode 100644 packages/twenty-docs/l/tr/developers/contribute/capabilities/backend-development/zapier.mdx create mode 100644 packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/frontend-commands.mdx create mode 100644 packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/hotkeys.mdx create mode 100644 packages/twenty-docs/l/tr/developers/contribute/capabilities/frontend-development/storybook.mdx create mode 100644 packages/twenty-docs/l/zh/developers/contribute/capabilities/backend-development/queue.mdx create mode 100644 packages/twenty-docs/l/zh/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx create mode 100644 packages/twenty-docs/l/zh/developers/contribute/capabilities/frontend-development/frontend-commands.mdx create mode 100644 packages/twenty-docs/l/zh/developers/contribute/capabilities/frontend-development/hotkeys.mdx create mode 100644 packages/twenty-docs/l/zh/developers/contribute/capabilities/frontend-development/storybook.mdx diff --git a/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/custom-objects.mdx b/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/custom-objects.mdx new file mode 100644 index 0000000000..5e40ef3bbb --- /dev/null +++ b/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/custom-objects.mdx @@ -0,0 +1,39 @@ +--- +title: كائنات مخصصة +--- + +الكائنات هي هياكل تسمح لك بتخزين البيانات (السجلات، السمات والقيم) الخاصة بالمؤسسة. توفر Twenty كلاً من الكائنات القياسية والمخصصة. + +الكائنات القياسية هي كائنات مدمجة مع مجموعة من السمات المتاحة لجميع المستخدمين. تتضمن الأمثلة على الكائنات القياسية في Twenty الشركات والأشخاص. الكائنات القياسية تحتوي على حقول قياسية تتوفر أيضاً لجميع مستخدمي Twenty، مثل Company.displayName. + +الكائنات المخصصة هي كائنات يمكنك إنشاؤها لتخزين المعلومات التي تخص مؤسستك. هذه الكائنات ليست مدمجة؛ يمكن لأعضاء مساحة العمل الخاصة بك إنشاء وتخصيص الكائنات المخصصة للاحتفاظ بالمعلومات التي لا تناسبها الكائنات القياسية. + +## مخطط على مستوى عالي + +
+ مخطط على مستوى عالي +
+ +
+ +## كيف يعمل + +الكائنات المخصصة تأتي من جداول الميتاداتا التي تحدد شكل، اسم، ونوع الكائنات. كل هذه المعلومات موجودة في قاعدة بيانات المخطط البياني للبيانات الوصفية، والتي تتكون من جداول: + +* **مصدر البيانات**: يشير إلى مكان وجود البيانات. +* **الكائن**: يصف الكائن ويرتبط بمصدر البيانات. +* **الحقل**: يحدد حقول الكائن ويرتبط بالكائن. + +لإضافة كائن مخصص، سيقوم عضو مساحة العمل بالاستعلام عن واجهة برمجة التطبيقات /metadata. يقوم هذا بتحديث البيانات الوصفية وفقًا لذلك ويحسب مخطط GraphQL استنادًا إلى البيانات الوصفية، ويخزنها في ذاكرة GQL للاستخدام لاحقًا. + +
+ استعلام واجهة برمجة التطبيقات /metadata لإضافة الكائنات المخصصة +
+ +
+ +لجلب البيانات، تتضمن العملية إجراء استعلامات من خلال نقطة النهاية /graphql وتمريرها من خلال محلل الاستعلام. + +
+ استعلام نقطة النهاية /graphql لجلب البيانات +
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 new file mode 100644 index 0000000000..1bf77436c1 --- /dev/null +++ b/packages/twenty-docs/l/ar/developers/contribute/capabilities/backend-development/zapier.mdx @@ -0,0 +1,83 @@ +--- +title: تطبيق Zapier +--- + +قم بمزامنة Twenty مع أكثر من 3000 تطبيق باستخدام [Zapier](https://zapier.com/) بسهولة. قم بأتمتة المهام، وزيادة الإنتاجية، وتعزيز علاقاتك مع العملاء! + +## حول Zapier + +Zapier هي أداة تتيح لك أتمتة سير العمل من خلال ربط التطبيقات التي يستخدمها فريقك يوميًا. المفهوم الأساسي ل Zapier هو سير العمل الآلي، المسمى Zaps، والذي يتضمن محفزات وإجراءات. + +يمكنك معرفة المزيد حول كيفية عمل Zapier [هنا](https://zapier.com/how-it-works). + +## إعداد + +### الخطوة 1: تثبيت حزم Zapier + +```bash +cd packages/twenty-zapier + +yarn +``` + +### الخطوة 2: تسجيل الدخول باستخدام CLI + +استخدم بيانات اعتماد Zapier الخاصة بك لتسجيل الدخول باستخدام CLI: + +```bash +zapier login +``` + +### الخطوة 3: تعيين متغيرات البيئة + +من مجلد `packages/twenty-zapier`، قم بتشغيل: + +```bash +cp .env.example .env +``` + +شغل التطبيق محليًا، اذهب إلى [http://localhost:3000/settings/api-webhooks](http://localhost:3000/settings/api-webhooks)، وولد مفتاح API. + +استبدل قيمة **YOUR_API_KEY** في ملف `.env` بمفتاح API الذي قمت بتوليده للتو. + +## التطوير + + + تأكد من تشغيل `yarn build` قبل أي أمر `zapier`. + + +### تجربة + +```bash +yarn test +``` + +### Lint + +```bash +yarn format +``` + +### راقب وقم بالتحويل عند تحرير الكود + +```bash +yarn watch +``` + +### تحقق من صحة تطبيق Zapier الخاص بك + +```bash +yarn validate +``` + +### قم بنشر تطبيق Zapier الخاص بك + +```bash +yarn deploy +``` + +### اعرض جميع أوامر Zapier CLI + +```bash +zapier +``` diff --git a/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx b/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx new file mode 100644 index 0000000000..e805ba1b8f --- /dev/null +++ b/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx @@ -0,0 +1,109 @@ +--- +title: هيكلية المجلدات +info: نظرة مفصلة على هيكل المجلدات الخاصة بنا +--- + +في هذا الدليل، ستستكشف تفاصيل هيكل دليل المشروع وكيف يساهم في تنظيم Twenty وسهولة صيانتها. + +باتباع اصطلاح هيكل المجلدات هذا، يسهل العثور على الملفات المتعلقة بميزات محددة وضمان أن يكون التطبيق قابلاً للتوسّع والصيانة. + +``` +front +└───modules +│ └───module1 +│ │ └───submodule1 +│ └───module2 +│ └───ui +│ │ └───display +│ │ └───inputs +│ │ │ └───buttons +│ │ └───... +└───pages +└───... +``` + +## الصفحات + +تشمل المكونات عالية المستوى المحددة من قبل مسارات التطبيق. وتستورد مكوّنات منخفضة المستوى من مجلد الوحدات (تفاصيل إضافية أدناه). + +## الوحدات + +تمثّل كل وحدة ميزة أو مجموعة من الميزات، وتضم مكوّناتها الخاصة وحالاتها ومنطقها التشغيلي. +يجب أن تتبع جميعها البنية المذكورة أدناه. يمكنك تعشيق الوحدات داخل الوحدات (تُعرف بالوحدات الفرعية) وستطبق نفس القواعد. + +``` +module1 + └───components + │ └───component1 + │ └───component2 + └───constants + └───contexts + └───graphql + │ └───fragments + │ └───queries + │ └───mutations + └───hooks + │ └───internal + └───states + │ └───selectors + └───types + └───utils +``` + +### السياقات + +السياق هو وسيلة لتمرير البيانات عبر شجرة المكوّنات دون الحاجة إلى تمرير الخصائص يدويًا في كل مستوى. + +انظر [React Context](https://react.dev/reference/react#context-hooks) لمزيد من التفاصيل. + +### جراف كيو إل + +تشمل الأجزاء، الاستعلامات والتحويرات. + +انظر [GraphQL](https://graphql.org/learn/) لمزيد من التفاصيل. + +* الأجزاء + +الجزء هو جزء قابل لإعادة الاستخدام من استعلام، والذي يمكنك استخدامه في أماكن مختلفة. باستخدام الأجزاء، يصبح من الأسهل تجنب تكرار التعليمات البرمجية. + +انظر [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) لمزيد من التفاصيل. + +* الاستعلامات + +انظر [GraphQL Queries](https://graphql.org/learn/queries/) لمزيد من التفاصيل. + +* التحويرات + +انظر [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) لمزيد من التفاصيل. + +### الخطافات + +انظر [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) لمزيد من التفاصيل. + +### الحالات + +تشمل منطق إدارة الحالة. [RecoilJS](https://recoiljs.org) يتولّى ذلك. + +* المحددات: انظر [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) لمزيد من التفاصيل. + +لا تزال إدارة الحالة المدمجة في React تتولّى الحالة داخل المكوّن. + +### الأدوات + +يجب أن تحتوي فقط على دوال نقية قابلة لإعادة الاستخدام. بخلاف ذلك، أنشئ خطافات مخصصة في مجلد `hooks`. + +## واجهة المستخدم + +تحتوي على جميع مكونات واجهة المستخدم القابلة لإعادة الاستخدام المستخدمة في التطبيق. + +يمكن أن يحتوي هذا المجلد على مجلّدات فرعية، مثل `data`، `display`، `feedback`، و `input` لأنواع معينة من المكوّنات. يجب أن يكون كل مكون مستقلًا وقابلًا لإعادة الاستخدام، حتى تتمكن من استخدامه في أجزاء مختلفة من التطبيق. + +من خلال فصل مكونات واجهة المستخدم عن المكونات الأخرى في مجلد `modules`، يسهل الحفاظ على تصميم متسق وإجراء تغييرات على واجهة المستخدم دون التأثير على الأجزاء الأخرى (منطق الأعمال) من قاعدة الشيفرة. + +## الواجهة والتبعيات + +يمكنك استيراد شيفرة وحدة أخرى من أي وحدة باستثناء مجلد `ui`. سيجعل هذا شيفرته سهلة الاختبار. + +### داخلي + +كل جزء (خطافات، حالات، ...) من الممكن أن يحتوي جزء من الوحدة على مجلد `internal`، والذي يحتوي على الأجزاء التي تُستخدم فقط داخل الوحدة. diff --git a/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/frontend-commands.mdx b/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/frontend-commands.mdx new file mode 100644 index 0000000000..5b88f6bae7 --- /dev/null +++ b/packages/twenty-docs/l/ar/developers/contribute/capabilities/frontend-development/frontend-commands.mdx @@ -0,0 +1,86 @@ +--- +title: أوامر الواجهة الأمامية +--- + +## الأوامر المفيدة + +### "بدء التطبيق" + +```bash +"npx nx start twenty-front" +``` + +### "إعادة توليد مخطط graphql بناءً على مخطط API graphql" + +```bash +"npx nx run twenty-front:graphql:generate --configuration=metadata" +``` + +"أو" + +```bash +"npx nx run twenty-front:graphql:generate" +``` + +### Lint + +```bash +"npx nx run twenty-front:lint # مرر --fix لإصلاح أخطاء التدقيق" +``` + +## "الترجمات" + +```bash +"npx nx run twenty-front:lingui:extract\nnpx nx run twenty-front:lingui:compile" +``` + +### تجربة + +```bash +"npx nx run twenty-front:test # تشغيل اختبارات jest\nnpx nx run twenty-front:storybook:serve:dev # تشغيل storybook\nnpx nx run twenty-front:storybook:test # تشغيل الاختبارات # (يحتاج إلى تشغيل yarn storybook:serve:dev)\nnpx nx run twenty-front:storybook:coverage # (يحتاج إلى تشغيل yarn storybook:serve:dev)" +``` + +## "التقنية المستخدمة" + +"المشروع يحتوي على تقنية بسيطة ونظيفة، مع الحد الأدنى من كود البويلر بليت." + +"**التطبيق**" + +* "[React](https://react.dev/)" +* "[Apollo](https://www.apollographql.com/docs/)" +* "[GraphQL Codegen](https://the-guild.dev/graphql/codegen)" +* "[Recoil](https://recoiljs.org/docs/introduction/core-concepts)" +* "[TypeScript](https://www.typescriptlang.org/)" + +**الاختبار** + +* [Jest](https://jestjs.io/) +* "[Storybook](https://storybook.js.org/)" + +**الأدوات** + +* [Yarn](https://yarnpkg.com/) +* "[Craco](https://craco.js.org/docs/)" +* [ESLint](https://eslint.org/) + +## "الهيكلية" + +### "التوجيه" + +"[React Router](https://reactrouter.com/) يتعامل مع التوجيه." + +"لتجنب [إعادة العرض](/l/ar/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) غير الضرورية، يوجد منطق التوجيه في `useEffect` في `PageChangeEffect`." + +### "إدارة الحالة" + +"[Recoil](https://recoiljs.org/docs/introduction/core-concepts) يتعامل مع إدارة الحالة." + +"راجع [أفضل الممارسات](/l/ar/developers/contribute/capabilities/frontend-development/best-practices-front#state-management) لمزيد من المعلومات حول إدارة الحالة." + +## "الاختبار" + +"[Jest](https://jestjs.io/) يعمل كأداة لاختبار الوحدات بينما يعمل [Storybook](https://storybook.js.org/) لاختبار المكونات." + +"يستخدم Jest بشكل رئيسي لاختبار دوال الأدوات وليس المكونات نفسها." + +"Storybook لاختبار سلوك المكونات المعزولة، وكذلك عرض نظام التصميم." diff --git a/packages/twenty-docs/l/ar/twenty-ui/input.mdx b/packages/twenty-docs/l/ar/twenty-ui/input.mdx index d9147a43fb..daaef26518 100644 --- a/packages/twenty-docs/l/ar/twenty-ui/input.mdx +++ b/packages/twenty-docs/l/ar/twenty-ui/input.mdx @@ -4,5 +4,5 @@ image: /images/user-guide/tips/light-bulb.png --- - Header - \ No newline at end of file + رأس الصفحة + diff --git a/packages/twenty-docs/l/ar/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/ar/twenty-ui/navigation/navigation-bar.mdx index 9a47a96362..6b232d5662 100644 --- a/packages/twenty-docs/l/ar/twenty-ui/navigation/navigation-bar.mdx +++ b/packages/twenty-docs/l/ar/twenty-ui/navigation/navigation-bar.mdx @@ -4,49 +4,46 @@ image: /images/user-guide/table-views/table.png --- - Header + رأس الصفحة يستعرض شريط التنقل الذي يحتوي على عدة مكونات `NavigationBarItem`. - + + ```jsx + استيراد { IconHome, IconUser, IconSettings } من '@tabler/icons-react'; + استيراد { NavigationBar } من "@/ui/navigation/navigation-bar/components/NavigationBar"; -```jsx -import { IconHome, IconUser, IconSettings } from '@tabler/icons-react'; -import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar"; + export const MyComponent = () => { -export const MyComponent = () => { + const navigationItems = [ + { + name: "الصفحة الرئيسية", + Icon: IconHome, + onClick: () => console.log("تم النقر على الصفحة الرئيسية"), + }, + { + name: "الملف الشخصي", + Icon: IconUser, + onClick: () => console.log("تم النقر على الملف الشخصي"), + }, + { + name: "الإعدادات", + Icon: IconSettings, + onClick: () => console.log("تم النقر على الإعدادات"), + }, + ]; - const navigationItems = [ - { - name: "Home", - Icon: IconHome, - onClick: () => console.log("Home clicked"), - }, - { - name: "Profile", - Icon: IconUser, - onClick: () => console.log("Profile clicked"), - }, - { - name: "Settings", - Icon: IconSettings, - onClick: () => console.log("Settings clicked"), - }, - ]; + return ; + }; + ``` + - return ; -}; -``` - - - - -| المحددات | النوع | الوصف | -| ---------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| اسم العنصر النشط | string | اسم العنصر النشط حاليًا في قائمة التنقل | -| العناصر | array | مصفوفة من الكائنات التي تمثل كل عنصر من عناصر التنقل. كل كائن يحتوي على `الاسم` للعنصر، ومكون `الأيقونة` للعرض، ودالة `onClick` التي تستدعي عند النقر على العنصر | - - + + | المحددات | النوع | الوصف | + | ---------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | اسم العنصر النشط | نص | اسم العنصر النشط حاليًا في قائمة التنقل | + | العناصر | مصفوفة | مصفوفة من الكائنات التي تمثل كل عنصر من عناصر التنقل. كل كائن يحتوي على `الاسم` للعنصر، ومكون `الأيقونة` للعرض، ودالة `onClick` التي تستدعي عند النقر على العنصر | + diff --git a/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/custom-objects.mdx b/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/custom-objects.mdx new file mode 100644 index 0000000000..72cd6dcfcd --- /dev/null +++ b/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/custom-objects.mdx @@ -0,0 +1,39 @@ +--- +title: Vlastní objekty +--- + +Objekty jsou struktury, které vám umožňují ukládat data (záznamy, atributy a hodnoty) specifická pro organizaci. Twenty poskytuje jak standardní, tak vlastní objekty. + +Standardní objekty jsou vestavěné objekty se sadou atributů dostupných pro všechny uživatele. Příklady standardních objektů v Twenty zahrnují Firma a Osoba. Standardní objekty mají standardní pole, která jsou také dostupná pro všechny uživatele Twenty, jako například Firma.displayName. + +Vlastní objekty jsou objekty, které můžete vytvářet pro ukládání informací specifických pro vaši organizaci. Nejsou vestavěné; členové vaší pracovní skupiny mohou vytvářet a upravovat vlastní objekty pro ukládání informací, které nejsou vhodné pro standardní objekty. + +## Schema na vysoké úrovni + +
+ Schema na vysoké úrovni +
+ +
+ +## Jak to funguje + +Vlastní objekty pocházejí z tabulek metadat, které určují tvar, název a typ objektů. Veškeré tyto informace jsou přítomny v databázi schémat metadat, která se skládá z následujících tabulek: + +* **Zdroj dat**: Definuje, kde se data nacházejí. +* **Objekt**: Popisuje objekt a odkazuje na DataSource. +* **Pole**: Vymezuje pole objektu a připojuje je k objektu. + +Pro přidání vlastního objektu vyhledá člen pracovní skupiny rozhraní /metadata API. To aktualizuje metadata odpovídajícím způsobem a generuje GraphQL schéma na základě metadat, které se ukládá v GQL cache pro pozdější použití. + +
+ Vyhledejte /metadata API pro přidání vlastních objektů +
+ +
+ +Pro načtení dat proces zahrnuje provádění dotazů přes /graphql endpoint a jejich předání přes Query Resolver. + +
+ Dotazujte se na /graphql endpoint pro načtení dat. +
diff --git a/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/feature-flags.mdx b/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/feature-flags.mdx new file mode 100644 index 0000000000..1bb5e8640c --- /dev/null +++ b/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/feature-flags.mdx @@ -0,0 +1,46 @@ +--- +title: Příznaky funkcí +--- + +Příznaky funkcí slouží k skrytí zkušebních funkcí. Pro Twenty jsou nastaveny na úrovni pracovního prostoru, nikoli na úrovni uživatele. + +## Přidání nového příznaku funkce + +V `FeatureFlagKey.ts` přidat příznak funkce: + +```ts +type FeatureFlagKey = + | 'IS_FEATURENAME_ENABLED' + | ...; +``` + +Také jej přidejte do výčtu v `feature-flag.entity.ts`: + +```ts +enum FeatureFlagKeys { + IsFeatureNameEnabled = 'IS_FUNKCEPOVOLENA', + ... +} +``` + +Pro uplatnění příznaku funkce na **backendové** funkci použijte: + +```ts +@Gate({ + featureFlag: 'IS_FEATURENAME_ENABLED', +}) +``` + +Pro uplatnění příznaku funkce na **frontendové** funkci použijte: + +```ts +const isFeatureNameEnabled = useIsFeatureEnabled('IS_FUNKCEPOVOLENA'); +``` + +## Nakonfigurujte příznaky funkcí pro nasazení + +Změnit odpovídající záznam v tabulce `core.featureFlag`: + +| id | klíč | workspaceId | hodnota | +| ------- | ------------------- | ----------- | -------- | +| Náhodný | `IS_FUNKCEPOVOLENA` | WorkspaceID | `pravda` | diff --git a/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/queue.mdx b/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/queue.mdx new file mode 100644 index 0000000000..0702077543 --- /dev/null +++ b/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/queue.mdx @@ -0,0 +1,41 @@ +--- +title: Fronta zpráv +--- + +Fronty usnadňují provádění asynchronních operací. Mohou být použity pro provádění úkolů na pozadí, jako je například zaslání uvítacího e-mailu při registraci. +Každý případ použití bude mít svou vlastní třídu fronty rozšířenou z `MessageQueueServiceBase`. + +Aktuálně podporujeme pouze `bull-mq`[bull-mq](https://bullmq.io/) jako ovladač fronty. + +## Kroky pro vytvoření a použití nové fronty + +1. Přidejte název fronty pro vaši novou frontu pod výčtem `MESSAGE_QUEUES`. +2. Poskytněte implementaci továrny fronty s názvem fronty jako token závislosti. +3. Injektujte frontu, kterou jste vytvořili, do požadovaného modulu/služby s názvem fronty jako token závislosti. +4. Přidejte třídu pracovníka s injekcí založenou na tokenu stejně jako producent. + +### Ukázkové použití + +```ts +class Resolver { + constructor(@Inject(MESSAGE_QUEUES.custom) private queue: MessageQueueService) {} + + async onSomeAction() { + //business logic + await this.queue.add(someData); + } +} + +//async worker +class CustomWorker { + constructor(@Inject(MESSAGE_QUEUES.custom) private queue: MessageQueueService) { + this.initWorker(); + } + + async initWorker() { + await this.queue.work(async ({ id, data }) => { + //worker logic + }); + } +} +``` diff --git a/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/zapier.mdx b/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/zapier.mdx new file mode 100644 index 0000000000..ec1495f8b5 --- /dev/null +++ b/packages/twenty-docs/l/cs/developers/contribute/capabilities/backend-development/zapier.mdx @@ -0,0 +1,81 @@ +--- +title: Zapier App +--- + +Snadno synchronizujte Twenty s více než 3000 aplikacemi pomocí [Zapier](https://zapier.com/). Automatizujte úkoly, zvyšte produktivitu a zlepšete vztahy se zákazníky! + +## O Zapier + +Zapier je nástroj, který umožňuje automatizovat pracovní postupy připojením aplikací, které váš tým používá každý den. Základním konceptem Zapier je automatizace pracovních postupů, nazývaných Zaps, které zahrnují spouštěče a akce. + +Více o tom, jak Zapier funguje, se dozvíte [zde](https://zapier.com/how-it-works). + +## Nastavení + +### Krok 1: Nainstalujte balíčky Zapier + +```bash +cd packages/twenty-zapier\n\nyarn +``` + +### Krok 2: Přihlaste se pomocí CLI + +Použijte své Zapier přihlašovací údaje k přihlášení pomocí CLI: + +```bash +zapier login +``` + +### Krok 3: Nastavte proměnné prostředí + +Z adresáře `packages/twenty-zapier` spusťte: + +```bash +cp .env.example .env +``` + +Spusťte aplikaci lokálně, přejděte na [http://localhost:3000/settings/api-webhooks](http://localhost:3000/settings/api-webhooks), a vygenerujte klíč API. + +Nahraďte hodnotu **YOUR_API_KEY** v souboru `.env` klíčem API, který jste právě vygenerovali. + +## Vývoj + + + Ujistěte se, že před jakýmkoli příkazem `zapier` spustíte `yarn build`. + + +### Testovat + +```bash +yarn test +``` + +### Linter + +```bash +yarn format +``` + +### Sledování a kompilace při úpravě kódu + +```bash +yarn watch +``` + +### Ověřte svou aplikaci Zapier + +```bash +yarn validate +``` + +### Nasazení vaší aplikace Zapier + +```bash +yarn deploy +``` + +### Seznam všech příkazů Zapier CLI + +```bash +zapier +``` diff --git a/packages/twenty-docs/l/cs/developers/contribute/capabilities/frontend-development/hotkeys.mdx b/packages/twenty-docs/l/cs/developers/contribute/capabilities/frontend-development/hotkeys.mdx new file mode 100644 index 0000000000..53c860b687 --- /dev/null +++ b/packages/twenty-docs/l/cs/developers/contribute/capabilities/frontend-development/hotkeys.mdx @@ -0,0 +1,178 @@ +--- +title: Klávesové zkratky +--- + +## Úvod + +Pokud potřebujete poslouchat klávesovou zkratku, obvykle použijete posluchač událostí `onKeyDown`. + +Ve `twenty-front` však můžete mít konflikty mezi stejnými klávesovými zkratkami, které jsou použity v různých komponentách, nasazených současně. + +Například, pokud máte stránku, která poslouchá klávesu Enter, a modal, který poslouchá klávesu Enter, s komponentou Select uvnitř tohoto modalu, která poslouchá klávesu Enter, můžete mít konflikt, když jsou všechny nasazeny současně. + +## Funkce hook `useScopedHotkeys` + +K řešení tohoto problému máme vlastní hook, který umožňuje poslouchat klávesové zkratky bez jakéhokoliv konfliktu. + +Umístíte ho do komponenty a bude poslouchat klávesové zkratky pouze když je komponenta nasazena A když je aktivní specifikovaný **hotkey scope**. + +## Jak v praxi poslouchat klávesové zkratky? + +Jsou potřebné dva kroky k nastavení poslouchání klávesových zkratek : + +1. Nastavte [hotkey scope](#what-is-a-hotkey-scope-), který bude poslouchat klávesové zkratky +2. Použijte hook `useScopedHotkeys` k poslouchání klávesových zkratek + +Nastavení oblastí klávesových zkratek je potřebné i na jednoduchých stránkách, protože jiné UI prvky jako levé menu nebo příkazové menu mohou také poslouchat klávesové zkratky. + +## Použití klávesových zkratek + +Obecně budete mít dva případy použití, které vyžadují klávesové zkratky : + +1. Na stránce nebo v komponentě nasazené na stránce +2. V komponentě typu modal, která přebírá fokus kvůli akci uživatele + +Druhý případ použití se může stát rekurzivně: například rozbalovací seznam v modalu. + +### Poslouchání klávesových zkratek na stránce + +Příklad : + +```tsx +const PageListeningEnter = () => { + const { + setHotkeyScopeAndMemorizePreviousScope, + goBackToPreviousHotkeyScope, + } = usePreviousHotkeyScope(); + + // 1. Nastavte rozsah klávesových zkratek v useEffect + useEffect(() => { + setHotkeyScopeAndMemorizePreviousScope( + ExampleHotkeyScopes.ExampleEnterPage, + ); + + // Vraťte se k předchozímu rozsahu klávesových zkratek, když se komponenta odpojí + return () => { + goBackToPreviousHotkeyScope(); + }; + }, [goBackToPreviousHotkeyScope, setHotkeyScopeAndMemorizePreviousScope]); + + // 2. Použijte hook useScopedHotkeys + useScopedHotkeys( + Key.Enter, + () => { + // Nějaká logika vykonaná na této stránce, když uživatel stiskne Enter + // ... + }, + ExampleHotkeyScopes.ExampleEnterPage, + ); + + return
Moje stránka, která poslouchá Enter
; +}; +``` + +### Poslouchání klávesových zkratek v komponentě typu modal + +V tomto příkladu použijeme komponentu typu modal, která poslouchá klávesu Escape, aby svému nadřazenému komponentu řekla, že se má zavřít. + +Zde interakce uživatele mění rozsah. + +```tsx +const ExamplePageWithModal = () => { + const [showModal, setShowModal] = useState(false); + + const { + setHotkeyScopeAndMemorizePreviousScope, + goBackToPreviousHotkeyScope, + } = usePreviousHotkeyScope(); + + const handleOpenModalClick = () => { + // 1. Nastavte rozsah klávesových zkratek, když uživatel otevře modal + setShowModal(true); + setHotkeyScopeAndMemorizePreviousScope( + ExampleHotkeyScopes.ExampleModal, + ); + }; + + const handleModalClose = () => { + // 1. Vraťte se k předchozímu rozsahu klávesových zkratek, když se modal zavře + setShowModal(false); + goBackToPreviousHotkeyScope(); + }; + + return
+

Moje stránka s modálem

+ + {showModal && } +
; +}; +``` + +Pak v komponentě modalu : + +```tsx +const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => { + // 2. Použijte hook useScopedHotkeys k poslouchání Escape. + // Všimněte si, že escape je běžná klávesová zkratka, kterou může použít mnoho jiných komponent + // Je tedy důležité používat rozsah klávesových zkratek, aby se předešlo konfliktům + useScopedHotkeys( + Key.Escape, + () => { + onClose() + }, + ExampleHotkeyScopes.ExampleModal, + ); + + return
Moje komponenta modalu
; +}; +``` + +Je důležité používat tento vzor, když si nejste jisti, že samotné použití useEffect pro nastavení a odebrání bude dostatečné k zabránění konfliktům. + +Tyto konflikty mohou být těžké ladit a mohou se vyskytovat častěji než ne u useEffects. + +## Co je to hotkey scope? + +Rozsah klávesových zkratek je řetězec, který představuje kontext, ve kterém jsou klávesové zkratky aktivní. Obecně je kódován jako enum. + +Když změníte rozsah klávesových zkratek, klávesové zkratky, které poslouchají tento rozsah, budou povolené a klávesové zkratky, které poslouchají jiné rozsahy, budou zakázané. + +Můžete nastavit pouze jeden rozsah najednou. + +Například rozsahy klávesových zkratek pro každou stránku jsou definovány v `PageHotkeyScope` enumu: + +```tsx +export enum PageHotkeyScope { + Nastavení = 'settings', + VytvořitPracovníProstor = 'create-workspace', + PřihlášeníRegistrace = 'sign-in-up', + VytvořitProfil = 'create-profile', + PožadovánoPlán = 'plan-required', + ZobrazitStránku = 'show-page', + OsobníZobrazitStránku = 'person-show-page', + FiremníZobrazitStránku = 'company-show-page', + FirmyStránka = 'companies-page', + LidéStránka = 'people-page', + PříležitostiStránka = 'opportunities-page', + ProfilStránka = 'profile-page', + ČlenPracovníhoProstoruStránka = 'workspace-member-page', + ÚkolStránka = 'task-page', +} +``` + +Interně je aktuálně vybraný rozsah uložen v Recoil stavu, který je sdílen napříč aplikací : + +```tsx +export const currentHotkeyScopeState = createState({ + key: 'currentHotkeyScopeState', + defaultValue: INITIAL_HOTKEYS_SCOPE, +}); +``` + +Ale tento Recoil stav by neměl být nikdy řízen ručně! Ukážeme si, jak jej používat v příští sekci. + +## Jak to funguje interně? + +Vytvořili jsme tenkou vrstvu nad [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro), která je výkonnější a vyhýbá se zbytečným překreslením. + +Také jsme vytvořili Recoil stav, abychom mohli řídit stav rozsahu klávesových zkratek a učinit jej dostupným kdekoli v aplikaci. diff --git a/packages/twenty-docs/l/cs/developers/self-host/capabilities/cloud-providers.mdx b/packages/twenty-docs/l/cs/developers/self-host/capabilities/cloud-providers.mdx new file mode 100644 index 0000000000..582a401f86 --- /dev/null +++ b/packages/twenty-docs/l/cs/developers/self-host/capabilities/cloud-providers.mdx @@ -0,0 +1,45 @@ +--- +title: Další metody +--- + + + Tento dokument je udržován komunitou. Může obsahovat problémy. + + +## Kubernetes pomocí Terraform a Manifestů + +Dokumentace vedená komunitou k nasazení Kubernetes je k dispozici [zde](https://github.com/twentyhq/twenty/tree/main/packages/twenty-docker/k8s) + +### Coolify + +Nasazení Twenty na serverech pomocí Coolify. (oficiální obrázek na Coolify bude brzy k dispozici) + +[Dokumentace Coolify](https://coolify.io/docs/get-started/introduction) + +### EasyPanel + +Nasazení Twenty na EasyPanel s komunitně udržovanou šablonou níže. + +[Nasadit na EasyPanel](https://easypanel.io/docs/templates/twenty) + +### Elest.io + +Nasazení Twenty na serverech pomocí Elest.io s odkazem níže. + +[Nasadit na Elest.io](https://elest.io/open-source/twenty) + +### Twenty na Railway + +Nasazení Twenty na Railway s komunitně udržovanou šablonou níže. + +[![Nasadit na Railway](https://railway.com/button.svg)](https://railway.com/deploy/nAL3hA) + +### Ostatní + +Nasazení Twenty na Sealos s komunitně udržovanou šablonou níže. + +[![Nasadit na Sealos](https://sealos.io/Deploy-on-Sealos.svg)](https://sealos.io/products/app-store/twenty) + +## Ostatní + +Neváhejte otevřít PR pro přidání dalších možností poskytovatele cloudových služeb. diff --git a/packages/twenty-docs/l/cs/twenty-ui/input.mdx b/packages/twenty-docs/l/cs/twenty-ui/input.mdx index 56dcf07865..4ecce430a0 100644 --- a/packages/twenty-docs/l/cs/twenty-ui/input.mdx +++ b/packages/twenty-docs/l/cs/twenty-ui/input.mdx @@ -4,5 +4,5 @@ image: /images/user-guide/tips/light-bulb.png --- - Header - \ No newline at end of file + Hlavička + diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation.mdx index bcdc757cb2..0016dc78bf 100644 --- a/packages/twenty-docs/l/cs/twenty-ui/navigation.mdx +++ b/packages/twenty-docs/l/cs/twenty-ui/navigation.mdx @@ -4,5 +4,5 @@ image: /images/user-guide/tasks/tasks_header.png --- - Header - \ No newline at end of file + Hlavička + diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation/breadcrumb.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation/breadcrumb.mdx index 7a5a017758..0b32596f2f 100644 --- a/packages/twenty-docs/l/cs/twenty-ui/navigation/breadcrumb.mdx +++ b/packages/twenty-docs/l/cs/twenty-ui/navigation/breadcrumb.mdx @@ -4,41 +4,38 @@ image: /images/user-guide/fields/field.png --- - Header + Hlavička Zobrazuje drobečkovou navigační lištu. - + + ```jsx + import { BrowserRouter } from "react-router-dom"; + import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb"; -```jsx -import { BrowserRouter } from "react-router-dom"; -import { Breadcrumb } from "@/ui/navigation/bread-crumb/components/Breadcrumb"; + export const MyComponent = () => { + const breadcrumbLinks = [ + { children: "Domů", href: "/" }, + { children: "Kategorie", href: "/category" }, + { children: "Podkategorie", href: "/category/subcategory" }, + { children: "Aktuální stránka" }, + ]; -export const MyComponent = () => { - const breadcrumbLinks = [ - { children: "Home", href: "/" }, - { children: "Category", href: "/category" }, - { children: "Subcategory", href: "/category/subcategory" }, - { children: "Current Page" }, - ]; + return ( + + + + ) + }; + ``` + - return ( - - - - ) -}; -``` - - - - -| Vlastnosti | Typ | Popis | -| ---------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| className | textový řetězec | Volitelný název třídy pro dodatečné stylování | -| odkazy | pole | Pole objektů, z nichž každý představuje odkaz na drobečkovou navigaci. Každý objekt má vlastnost `children` (text obsahu odkazu) a nepovinnou vlastnost `href` (URL, na které se má navigovat po kliknutí na odkaz) | - - + + | Vlastnosti | Typ | Popis | + | ---------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | className | řetězec | Volitelný název třídy pro dodatečné stylování | + | odkazy | pole | Pole objektů, z nichž každý představuje odkaz na drobečkovou navigaci. Každý objekt má vlastnost `children` (text obsahu odkazu) a nepovinnou vlastnost `href` (URL, na které se má navigovat po kliknutí na odkaz) | + diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation/links.mdx index 327db7d1b3..ea3e720205 100644 --- a/packages/twenty-docs/l/cs/twenty-ui/navigation/links.mdx +++ b/packages/twenty-docs/l/cs/twenty-ui/navigation/links.mdx @@ -4,7 +4,7 @@ image: /images/user-guide/what-is-twenty/20.png --- - Header + Hlavička ## Odkaz na kontakt @@ -12,44 +12,40 @@ image: /images/user-guide/what-is-twenty/20.png Stylizovaná komponenta odkazu pro zobrazení kontaktních informací. - + + ```jsx + import { BrowserRouter as Router } from 'react-router-dom'; -```jsx -import { BrowserRouter as Router } from 'react-router-dom'; + import { ContactLink } from 'twenty-ui/navigation'; -import { ContactLink } from 'twenty-ui/navigation'; + export const MyComponent = () => { + const handleLinkClick = (event) => { + console.log('Odkaz na kontakt kliknut!', event); + }; -export const MyComponent = () => { - const handleLinkClick = (event) => { - console.log('Contact link clicked!', event); - }; - - return ( - - - example@example.com - - - ); -}; -``` - - - - -| Vlastnosti | Typ | Popis | -| ---------- | ----------------- | ----------------------------------------------------- | -| className | textový řetězec | Volitelný název pro dodatečné stylování | -| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz | -| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz | -| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu | - - + return ( + + + example@example.com + + + ); + }; + ``` + + + | Vlastnosti | Typ | Popis | + | ---------- | ----------------- | ----------------------------------------------------- | + | className | řetězec | Volitelný název pro další stylování | + | href | řetězec | Cílová URL adresa nebo cesta pro odkaz | + | onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz | + | děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu | + ## Surový odkaz @@ -57,39 +53,35 @@ export const MyComponent = () => { Stylizovaná komponenta odkazu pro zobrazení odkazů. - + + ```jsx + import { RawLink } from "/navigation"; + import { BrowserRouter as Router } from "react-router-dom"; -```jsx -import { RawLink } from "/navigation"; -import { BrowserRouter as Router } from "react-router-dom"; + export const MyComponent = () => { + const handleLinkClick = (event) => { + console.log("Odkaz na kontakt kliknut!", event); + }; -export const MyComponent = () => { - const handleLinkClick = (event) => { - console.log("Contact link clicked!", event); - }; + return ( + + + Kontaktujte nás + + + ); + }; + ``` + - return ( - - - Contact Us - - - ); -}; - -``` - - - - -| Vlastnosti | Typ | Popis | -| ---------- | ----------------- | ----------------------------------------------------- | -| className | textový řetězec | Volitelný název pro dodatečné stylování | -| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz | -| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz | -| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu | - - + + | Vlastnosti | Typ | Popis | + | ---------- | ----------------- | ----------------------------------------------------- | + | className | řetězec | Volitelný název pro dodatečné stylování | + | href | řetězec | Cílová URL adresa nebo cesta pro odkaz | + | onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz | + | děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu | + ## Zaoblený odkaz @@ -97,38 +89,34 @@ export const MyComponent = () => { Zaobleně stylizovaný odkaz s komponentou Chip pro odkazy. - + + ```jsx + import { RoundedLink } from "/navigation"; + import { BrowserRouter as Router } from "react-router-dom"; -```jsx -import { RoundedLink } from "/navigation"; -import { BrowserRouter as Router } from "react-router-dom"; + export const MyComponent = () => { + const handleLinkClick = (event) => { + console.log("Odkaz na kontakt kliknut!", event); + }; -export const MyComponent = () => { - const handleLinkClick = (event) => { - console.log("Contact link clicked!", event); - }; + return ( + + + Kontaktujte nás + + + ); + }; + ``` + - return ( - - - Contact Us - - - ); -}; -``` - - - - - -| Vlastnosti | Typ | Popis | -| ---------- | ----------------- | ----------------------------------------------------- | -| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz | -| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu | -| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz | - - + + | Vlastnosti | Typ | Popis | + | ---------- | ----------------- | ----------------------------------------------------- | + | href | řetězec | Cílová URL adresa nebo cesta pro odkaz | + | děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu | + | onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz | + ## Sociální odkaz @@ -136,33 +124,30 @@ export const MyComponent = () => { Stylizované sociální odkazy s podporou různých typů sociálních odkazů, jako jsou URL, LinkedIn a X (nebo Twitter). - + + ```jsx + import { SocialLink } from "twenty-ui/navigation"; + import { BrowserRouter as Router } from "react-router-dom"; -```jsx -import { SocialLink } from "twenty-ui/navigation"; -import { BrowserRouter as Router } from "react-router-dom"; + export const MyComponent = () => { + return ( + + + + ); + }; + ``` + -export const MyComponent = () => { - return ( - - - - ); -}; -``` - - - - -| Vlastnosti | Typ | Popis | -| ---------- | ----------------- | ------------------------------------------------------------------------------------------------------- | -| href | textový řetězec | Cílová URL adresa nebo cesta pro odkaz | -| děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu | -| typ | textový řetězec | Typ sociálního odkazu. Možnosti zahrnují: `url`, `LinkedIn` a `Twitter` | -| onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz | - - + + | Vlastnosti | Typ | Popis | + | ---------- | ----------------- | ----------------------------------------------------------------------- | + | href | řetězec | Cílová URL adresa nebo cesta pro odkaz | + | děti | `React.ReactNode` | Obsah, který se má zobrazovat uvnitř odkazu | + | typ | řetězec | Typ sociálního odkazu. Možnosti zahrnují: `url`, `LinkedIn` a `Twitter` | + | onClick | funkce | Funkce zpětného volání spuštěná při kliknutí na odkaz | + diff --git a/packages/twenty-docs/l/cs/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/cs/twenty-ui/navigation/navigation-bar.mdx index b79cf1a3c4..b139abe859 100644 --- a/packages/twenty-docs/l/cs/twenty-ui/navigation/navigation-bar.mdx +++ b/packages/twenty-docs/l/cs/twenty-ui/navigation/navigation-bar.mdx @@ -4,49 +4,46 @@ image: /images/user-guide/table-views/table.png --- - Header + Hlavička Zobrazuje navigační panel, který obsahuje více komponent `NavigationBarItem`. - + + ```jsx + import { IconHome, IconUser, IconSettings } from '@tabler/icons-react'; + import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar"; -```jsx -import { IconHome, IconUser, IconSettings } from '@tabler/icons-react'; -import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar"; + export const MyComponent = () => { -export const MyComponent = () => { + const navigationItems = [ + { + name: "Home", + Icon: IconHome, + onClick: () => console.log("Domů kliknuto"), + }, + { + name: "Profile", + Icon: IconUser, + onClick: () => console.log("Profil kliknuto"), + }, + { + name: "Settings", + Icon: IconSettings, + onClick: () => console.log("Nastavení kliknuto"), + }, + ]; - const navigationItems = [ - { - name: "Home", - Icon: IconHome, - onClick: () => console.log("Home clicked"), - }, - { - name: "Profile", - Icon: IconUser, - onClick: () => console.log("Profile clicked"), - }, - { - name: "Settings", - Icon: IconSettings, - onClick: () => console.log("Settings clicked"), - }, - ]; + return ; + }; + ``` + - return ; -}; -``` - - - - -| Vlastnosti | Typ | Popis | -| -------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| activeItemName | textový řetězec | Název aktuálně aktivního navigačního prvku | -| položky | pole | Pole objektů představujících jednotlivé navigační položky. Každý objekt obsahuje `název` položky, komponent `Ikona` ke zobrazení a funkce `onClick`, která se volá při kliknutí na položku. | - - + + | Vlastnosti | Typ | Popis | + | -------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | activeItemName | řetězec | Název aktuálně aktivního navigačního prvku | + | položky | pole | Pole objektů představujících jednotlivé navigační položky. Každý objekt obsahuje `název` položky, komponent `Ikona` ke zobrazení a funkce `onClick`, která se volá při kliknutí na položku. | + diff --git a/packages/twenty-docs/l/cs/user-guide/workflows/how-tos/need-more-help/professional-services.mdx b/packages/twenty-docs/l/cs/user-guide/workflows/how-tos/need-more-help/professional-services.mdx new file mode 100644 index 0000000000..968d5d9439 --- /dev/null +++ b/packages/twenty-docs/l/cs/user-guide/workflows/how-tos/need-more-help/professional-services.mdx @@ -0,0 +1,29 @@ +--- +title: Profesionální služby +description: Získejte profesionální pomoc s vytvářením složitých pracovních toků a automatizací od týmu Twenty a certifikovaných partnerů. +--- + +## Kdy potřebujete profesionální pomoc? + +Zvažte profesionální služby pro: + +* Složitá více-systémová integrace +* Pokročilá obchodní logika a pravidla automatizace +* Velkoplošné pracovní postupy pro zpracování dat +* Vývoj vlastních API +* Školení týmu a optimalizace pracovního toku +* Když nemáte interní zdroje + +## Možnosti služeb + +### Úvodní balíčky + +Získejte pomoc od našeho hlavního týmu s našimi 4hodinovými [Úvodními balíčky](https://twenty.com/onboarding-packages): + +* **Vytváření pracovních toků**: Vytvářejte vlastní pracovní toky pro Vaše podnikové procesy +* **Návrh datového modelu**: Optimalizujte strukturu svých dat pro automatizaci pracovního toku +* **Migrace dat**: Importujte stávající data s řádnou integrací pracovního toku + +### Implementační partneři + +Spolupracujte s certifikovanými partnery na pokročilých úpravách. Kontaktujte nás na contact@twenty.com pro spojení s našimi [implementačními partnery](https://twenty.com/partners). diff --git a/packages/twenty-docs/l/de/developers/contribute/capabilities/backend-development/best-practices-server.mdx b/packages/twenty-docs/l/de/developers/contribute/capabilities/backend-development/best-practices-server.mdx new file mode 100644 index 0000000000..701ba604e2 --- /dev/null +++ b/packages/twenty-docs/l/de/developers/contribute/capabilities/backend-development/best-practices-server.mdx @@ -0,0 +1,22 @@ +--- +title: Beste Praktiken +--- + +Dieses Dokument beschreibt die Best Practices, die Sie bei der Arbeit am Backend befolgen sollten. + +## Verfolgen Sie einen modularen Ansatz + +Das Backend folgt einem modularen Ansatz, was ein grundlegendes Prinzip bei der Arbeit mit NestJS ist. Stellen Sie sicher, dass Sie Ihren Code in wiederverwendbare Module aufteilen, um eine saubere und organisierte Codebasis aufrechtzuerhalten. +Jedes Modul sollte ein bestimmtes Feature oder eine Funktionalität kapseln und einen klar definierten Umfang haben. Dieser modulare Ansatz ermöglicht eine klare Trennung der Verantwortlichkeiten und beseitigt unnötige Komplexitäten. + +## Dienste zur Verwendung in Modulen bereitstellen + +Erstellen Sie immer Dienste mit einer klaren Einzelverantwortung, was die Lesbarkeit und Wartbarkeit des Codes verbessert. Benennen Sie die Dienste beschreibend und konsistent. + +Sie sollten auch Dienste bereitstellen, die Sie in anderen Modulen verwenden möchten. Das Bereitstellen von Diensten für andere Module ist durch das leistungsstarke Abhängigkeitsinjektionssystem von NestJS möglich und fördert die lose Kopplung zwischen den Komponenten. + +## Vermeiden Sie die Verwendung des Typs `any` + +Wenn Sie eine Variable als `any` deklarieren, führt der TypeScript-Typenprüfer keine Typprüfung durch, was es möglich macht, der Variablen Werte beliebigen Typs zuzuweisen. TypeScript verwendet Typinferenz, um den Typ einer Variable basierend auf dem Wert zu bestimmen. Durch die Deklaration als `any` kann TypeScript den Typ nicht mehr ableiten. Dies erschwert es, typbezogene Fehler während der Entwicklung zu erkennen, was zu Laufzeitfehlern führt und den Code weniger wartbar, weniger zuverlässig und schwerer verständlich für andere macht. + +Deshalb sollte alles einen Typ haben. Wenn Sie also ein neues Objekt mit Vor- und Nachnamen erstellen, sollten Sie eine Schnittstelle oder einen Typ definieren, der Vor- und Nachnamen enthält und die Struktur des Objekts definiert, mit dem Sie arbeiten. diff --git a/packages/twenty-docs/l/de/developers/contribute/capabilities/backend-development/queue.mdx b/packages/twenty-docs/l/de/developers/contribute/capabilities/backend-development/queue.mdx new file mode 100644 index 0000000000..9552e9c144 --- /dev/null +++ b/packages/twenty-docs/l/de/developers/contribute/capabilities/backend-development/queue.mdx @@ -0,0 +1,41 @@ +--- +title: Nachrichtenwarteschlange +--- + +Warteschlangen erleichtern die Durchführung asynchroner Vorgänge. Sie können für die Ausführung von Hintergrundaufgaben verwendet werden, wie z.B. das Versenden einer Willkommens-E-Mail bei der Registrierung. +Jeder Anwendungsfall hat seine eigene Warteschlangenklasse, die von `MessageQueueServiceBase` erweitert wird. + +Derzeit unterstützen wir nur `bull-mq`[bull-mq](https://bullmq.io/) als Warteschlangentreiber. + +## Schritte zur Erstellung und Nutzung einer neuen Warteschlange + +1. Fügen Sie einen Warteschlangennamen für Ihre neue Warteschlange unter dem Enum `MESSAGE_QUEUES` hinzu. +2. Stellen Sie die Factory-Implementierung der Warteschlange mit dem Warteschlangennamen als Abhängigkeits-Token bereit. +3. Injizieren Sie die von Ihnen erstellte Warteschlange im erforderlichen Modul/Service mit dem Warteschlangennamen als Abhängigkeits-Token. +4. Fügen Sie eine Worker-Klasse mit tokenbasierter Injektion hinzu, genau wie der Producer. + +### Beispielverwendung + +```ts +class Resolver { + constructor(@Inject(MESSAGE_QUEUES.custom) private queue: MessageQueueService) {} + + async onSomeAction() { + //business logic + await this.queue.add(someData); + } +} + +// async-WorKer +class CustomWorker { + constructor(@Inject(MESSAGE_QUEUES.custom) private queue: MessageQueueService) { + this.initWorker(); + } + + async initWorker() { + await this.queue.work(async ({ id, data }) => { + //worker logic + }); + } +} +``` diff --git a/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/frontend-commands.mdx b/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/frontend-commands.mdx new file mode 100644 index 0000000000..1501dab325 --- /dev/null +++ b/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/frontend-commands.mdx @@ -0,0 +1,90 @@ +--- +title: Frontend-Befehle +--- + +## Nützliche Befehle + +### Die App starten + +```bash +npx nx start twenty-front +``` + +### GraphQL-Schema basierend auf API-GraphQL-Schema regenerieren + +```bash +npx nx run twenty-front:graphql:generate --configuration=metadata +``` + +ODER + +```bash +npx nx run twenty-front:graphql:generate +``` + +### Lint + +```bash +npx nx run twenty-front:lint # Füge --fix hinzu, um Lint-Fehler zu beheben +``` + +## Übersetzungen + +```bash +npx nx run twenty-front:lingui:extract +npx nx run twenty-front:lingui:compile +``` + +### Test + +```bash +npx nx run twenty-front:test # führe JEST-Tests aus +npx nx run twenty-front:storybook:serve:dev # führe Storybook aus +npx nx run twenty-front:storybook:test # führe Tests aus # benötigt yarn storybook:serve:dev als laufenden Prozess +npx nx run twenty-front:storybook:coverage # benötigt yarn storybook:serve:dev als laufenden Prozess +``` + +## Technologie-Stack + +Das Projekt hat einen sauberen und einfachen Stack mit minimalem Boilerplate-Code. + +**App** + +* [React](https://react.dev/) +* [Apollo](https://www.apollographql.com/docs/) +* [GraphQL Codegen](https://the-guild.dev/graphql/codegen) +* [Recoil](https://recoiljs.org/docs/introduction/core-concepts) +* [TypeScript](https://www.typescriptlang.org/) + +**Tests** + +* [Jest](https://jestjs.io/) +* [Storybook](https://storybook.js.org/) + +**Tools** + +* [Yarn](https://yarnpkg.com/) +* [Craco](https://craco.js.org/docs/) +* [ESLint](https://eslint.org/) + +## Architektur + +### Routing + +[React Router](https://reactrouter.com/) übernimmt das Routing. + +Um unnötige [Re-Renders](/l/de/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) zu vermeiden, befindet sich die gesamte Routing-Logik in einem `useEffect` in `PageChangeEffect`. + +### Zustandsverwaltung + +[Recoil](https://recoiljs.org/docs/introduction/core-concepts) übernimmt die Zustandsverwaltung. + +Siehe [Best Practices](/l/de/developers/contribute/capabilities/frontend-development/best-practices-front#state-management) für mehr Informationen zur Zustandsverwaltung. + +## Tests + +[Jest](https://jestjs.io/) dient als Werkzeug für Unittests, während [Storybook](https://storybook.js.org/) für Komponententests verwendet wird. + +Jest ist hauptsächlich für das Testen von Dienstprogrammfunktionen und nicht für die Komponenten selbst gedacht. + +Storybook dient zum Testen des Verhaltens isolierter Komponenten sowie zur Darstellung des Designsystems. diff --git a/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/hotkeys.mdx b/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/hotkeys.mdx new file mode 100644 index 0000000000..510174523c --- /dev/null +++ b/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/hotkeys.mdx @@ -0,0 +1,178 @@ +--- +title: Tastenkombinationen +--- + +## Einführung + +Wenn Sie eine Tastenkombination abhören müssen, verwenden Sie normalerweise den `onKeyDown` Event-Listener. + +In `twenty-front` jedoch könnten Sie Konflikte zwischen gleichen Tastenkombinationen haben, die in verschiedenen Komponenten, die gleichzeitig eingebunden sind, verwendet werden. + +Zum Beispiel, wenn Sie eine Seite haben, die auf die Enter-Taste hört, und ein Modal das auf die Enter-Taste hört, und ein Select-Element innerhalb dieses Modals auf die Enter-Taste hört, könnte ein Konflikt entstehen, wenn alle gleichzeitig eingebunden sind. + +## Der `useScopedHotkeys` Hook + +Um dieses Problem zu lösen, verfügen wir über einen benutzerdefinierten Hook, der es ermöglicht, auf Tastenkombinationen zu hören, ohne Konflikte. + +Sie platzieren ihn in einer Komponente, und er wird auf die Tastenkombinationen nur hören, wenn die Komponente eingebunden ist UND wenn der spezifizierte **Tastenkombinationsbereich** aktiv ist. + +## Wie hört man in der Praxis auf Tastenkombinationen? + +Es gibt zwei Schritte, um das Abhören von Tastenkombinationen einzurichten: + +1. Setzen Sie den [Tastenkombinationsbereich](#what-is-a-hotkey-scope-), der auf Tastenkombinationen hören wird +2. Verwenden Sie den `useScopedHotkeys` Hook, um auf Tastenkombinationen zu hören + +Das Einrichten von Tastenkombinationsbereichen ist auch bei einfachen Seiten erforderlich, da andere UI-Elemente wie das linke Menü oder das Befehlsmenü ebenfalls auf Tastenkombinationen hören könnten. + +## Anwendungsfälle für Tastenkombinationen + +Im Allgemeinen haben Sie zwei Anwendungsfälle, die Tastenkombinationen erfordern: + +1. Auf einer Seite oder einer Komponente, die auf einer Seite eingebunden ist +2. In einer Modal-Komponente, die wegen einer Benutzeraktion den Fokus erhält + +Der zweite Anwendungsfall kann rekursiv auftreten: ein Dropdown in einem Modal zum Beispiel. + +### Auf Tastenkombinationen in einer Seite hören + +Beispiel: + +```tsx +const PageListeningEnter = () => { + const { + setHotkeyScopeAndMemorizePreviousScope, + goBackToPreviousHotkeyScope, + } = usePreviousHotkeyScope(); + + // 1. Setze den Tastenkombinationsbereich in einem useEffect + useEffect(() => { + setHotkeyScopeAndMemorizePreviousScope( + ExampleHotkeyScopes.ExampleEnterPage, + ); + + // Zurückkehren zum vorherigen Tastenkombinationsbereich, wenn die Komponente entfernt wird + return () => { + goBackToPreviousHotkeyScope(); + }; + }, [goBackToPreviousHotkeyScope, setHotkeyScopeAndMemorizePreviousScope]); + + // 2. Verwenden Sie den useScopedHotkeys Hook + useScopedHotkeys( + Key.Enter, + () => { + // Eine Logik, die auf dieser Seite ausgeführt wird, wenn der Benutzer Enter drückt + // ... + }, + ExampleHotkeyScopes.ExampleEnterPage, + ); + + return
Meine Seite, die auf Enter hört
; +}; +``` + +### Auf Tastenkombinationen in einer Modal-Komponente hören + +Für dieses Beispiel verwenden wir eine Modalkomponente, die auf die Escape-Taste hört, um ihrem übergeordneten Element mitzuteilen, dass sie geschlossen werden soll. + +Hier ändert die Benutzerinteraktion den Bereich. + +```tsx +const ExamplePageWithModal = () => { + const [showModal, setShowModal] = useState(false); + + const { + setHotkeyScopeAndMemorizePreviousScope, + goBackToPreviousHotkeyScope, + } = usePreviousHotkeyScope(); + + const handleOpenModalClick = () => { + // 1. Setze den Tastenkombinationsbereich, wenn der Benutzer das Modal öffnet + setShowModal(true); + setHotkeyScopeAndMemorizePreviousScope( + ExampleHotkeyScopes.ExampleModal, + ); + }; + + const handleModalClose = () => { + // 1. Zurückkehren zum vorherigen Tastenkombinationsbereich, wenn das Modal geschlossen wird + setShowModal(false); + goBackToPreviousHotkeyScope(); + }; + + return
+

Meine Seite mit einem Modal

+ + {showModal && } +
; +}; +``` + +Dann in der Modalkomponente: + +```tsx +const MyDropdownComponent = ({ onClose }: { onClose: () => void }) => { + // 2. Verwenden Sie den useScopedHotkeys Hook, um auf Escape zu hören. + // Beachten Sie, dass Escape eine gängige Tastenkombination ist, die von vielen anderen Komponenten verwendet werden könnte + // Daher ist es wichtig, einen Tastenkombinationsbereich zu verwenden, um Konflikte zu vermeiden + useScopedHotkeys( + Key.Escape, + () => { + onClose() + }, + ExampleHotkeyScopes.ExampleModal, + ); + + return
Meine Modalkomponente
; +}; +``` + +Es ist wichtig, dieses Muster zu verwenden, wenn Sie sich nicht sicher sind, ob das einfache Benutzen eines useEffect bei Ein-/Ausbindung ausreicht, um Konflikte zu vermeiden. + +Diese Konflikte können schwer zu debuggen sein und treten möglicherweise häufiger auf, als man denkt, mit useEffects. + +## Was ist ein Tastenkombinationsbereich? + +Ein Tastenkombinationsbereich ist ein String, der einen Kontext darstellt, in dem die Tastenkombinationen aktiv sind. Er wird im Allgemeinen als Enum kodiert. + +Wenn Sie den Tastenkombinationsbereich ändern, werden die Tastenkombinationen aktiviert, die auf diesen Bereich hören, und die Tastenkombinationen, die auf andere Bereiche hören, werden deaktiviert. + +Sie können immer nur einen Bereich gleichzeitig setzen. + +Als Beispiel sind die Tastenkombinationsbereiche für jede Seite im `PageHotkeyScope` Enum definiert: + +```tsx +export enum PageHotkeyScope { + Settings = 'settings', + CreateWorkspace = 'create-workspace', + SignInUp = 'sign-in-up', + CreateProfile = 'create-profile', + PlanRequired = 'plan-required', + ShowPage = 'show-page', + PersonShowPage = 'person-show-page', + CompanyShowPage = 'company-show-page', + CompaniesPage = 'companies-page', + PeoplePage = 'people-page', + OpportunitiesPage = 'opportunities-page', + ProfilePage = 'profile-page', + WorkspaceMemberPage = 'workspace-member-page', + TaskPage = 'task-page', +} +``` + +Intern wird der aktuell ausgewählte Bereich in einem Recoil-State gespeichert, der in der gesamten Anwendung geteilt wird: + +```tsx +export const currentHotkeyScopeState = createState({ + key: 'currentHotkeyScopeState', + defaultValue: INITIAL_HOTKEYS_SCOPE, +}); +``` + +Aber dieser Recoil-State sollte niemals manuell bearbeitet werden! Wir werden im nächsten Abschnitt sehen, wie man es verwendet. + +## Wie funktioniert es intern? + +Wir haben eine dünne Schicht über [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) erstellt, die es leistungsfähiger macht und unnötige Neu-Renderings vermeidet. + +Wir haben auch einen Recoil-State erstellt, um den Tastenkombinationsbereich zu verwalten und in der gesamten Anwendung verfügbar zu machen. diff --git a/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/storybook.mdx b/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/storybook.mdx new file mode 100644 index 0000000000..a1c4b2a441 --- /dev/null +++ b/packages/twenty-docs/l/de/developers/contribute/capabilities/frontend-development/storybook.mdx @@ -0,0 +1,8 @@ +--- +title: Storybook +description: Durchsuchen Sie die UI-Komponentenbibliothek von Twenty +--- + +Sehen Sie sich unsere vollständige Komponentenbibliothek und Dokumentation in Storybook an. + +[Storybook öffnen →](https://storybook.twenty.com) diff --git a/packages/twenty-docs/l/de/twenty-ui/input.mdx b/packages/twenty-docs/l/de/twenty-ui/input.mdx index 12e7c50a65..ef860dbec8 100644 --- a/packages/twenty-docs/l/de/twenty-ui/input.mdx +++ b/packages/twenty-docs/l/de/twenty-ui/input.mdx @@ -4,5 +4,5 @@ image: /images/user-guide/tips/light-bulb.png --- - Header - \ No newline at end of file + Kopfzeile + diff --git a/packages/twenty-docs/l/de/twenty-ui/navigation.mdx b/packages/twenty-docs/l/de/twenty-ui/navigation.mdx index e1264f0997..6c71341b17 100644 --- a/packages/twenty-docs/l/de/twenty-ui/navigation.mdx +++ b/packages/twenty-docs/l/de/twenty-ui/navigation.mdx @@ -4,5 +4,5 @@ image: /images/user-guide/tasks/tasks_header.png --- - Header - \ No newline at end of file + Kopfzeile + diff --git a/packages/twenty-docs/l/de/twenty-ui/navigation/navigation-bar.mdx b/packages/twenty-docs/l/de/twenty-ui/navigation/navigation-bar.mdx index 98df96d4d5..74f176bb20 100644 --- a/packages/twenty-docs/l/de/twenty-ui/navigation/navigation-bar.mdx +++ b/packages/twenty-docs/l/de/twenty-ui/navigation/navigation-bar.mdx @@ -4,49 +4,46 @@ image: /images/user-guide/table-views/table.png --- - Header + Kopfzeile Rendert eine Navigationsleiste, die mehrere `NavigationBarItem`-Komponenten enthält. - + + ```jsx + import { IconHome, IconUser, IconSettings } from '@tabler/icons-react'; + import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar"; -```jsx -import { IconHome, IconUser, IconSettings } from '@tabler/icons-react'; -import { NavigationBar } from "@/ui/navigation/navigation-bar/components/NavigationBar"; + export const MyComponent = () => { -export const MyComponent = () => { + const navigationItems = [ + { + name: "Home", + Icon: IconHome, + onClick: () => console.log("Home geklickt"), + }, + { + name: "Profil", + Icon: IconUser, + onClick: () => console.log("Profil geklickt"), + }, + { + name: "Einstellungen", + Icon: IconSettings, + onClick: () => console.log("Einstellungen geklickt"), + }, + ]; - const navigationItems = [ - { - name: "Home", - Icon: IconHome, - onClick: () => console.log("Home clicked"), - }, - { - name: "Profile", - Icon: IconUser, - onClick: () => console.log("Profile clicked"), - }, - { - name: "Settings", - Icon: IconSettings, - onClick: () => console.log("Settings clicked"), - }, - ]; + return ; + }; + ``` + - return ; -}; -``` - - - - -| Props | Typ | Beschreibung | -| -------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| activeItemName | Zeichenkette | Der Name des aktuell aktiven Navigationselements | -| items | array | Ein Array von Objekten, die jeweils ein Navigationselement repräsentieren. Jedes Objekt enthält den `name` des Elements, die zugehörige `Icon`-Komponente und eine Funktion `onClick`, die ausgeführt wird, wenn das Element angeklickt wird | - - + + | "Eigenschaften" | Typ | Beschreibung | + | --------------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | activeItemName | Zeichenkette | Der Name des aktuell aktiven Navigationselements | + | items | array | Ein Array von Objekten, die jeweils ein Navigationselement repräsentieren. Jedes Objekt enthält den `name` des Elements, die zugehörige `Icon`-Komponente und eine Funktion `onClick`, die ausgeführt wird, wenn das Element angeklickt wird | + diff --git a/packages/twenty-docs/l/de/twenty-ui/navigation/step-bar.mdx b/packages/twenty-docs/l/de/twenty-ui/navigation/step-bar.mdx index a12d31032f..c5dd7d17d0 100644 --- a/packages/twenty-docs/l/de/twenty-ui/navigation/step-bar.mdx +++ b/packages/twenty-docs/l/de/twenty-ui/navigation/step-bar.mdx @@ -4,35 +4,31 @@ image: /images/user-guide/api/api.png --- - Header + Kopfzeile Zeigt den Fortschritt durch eine Folge von nummerierten Schritten, indem der aktive Schritt hervorgehoben wird. Es rendert einen Container mit Schritten, die jeweils durch die `Step`-Komponente dargestellt werden. - + + ```jsx + import { StepBar } from "@/ui/navigation/step-bar/components/StepBar"; -```jsx -import { StepBar } from "@/ui/navigation/step-bar/components/StepBar"; + export const MyComponent = () => { + return ( + + Schritt 1 + Schritt 2 + Schritt 3 + + ); + }; + ``` + -export const MyComponent = () => { - return ( - - Step 1 - Step 2 - Step 3 - - ); -}; -``` - - - - - -| Props | Typ | Beschreibung | -| -------------- | ------ | ----------------------------------------------------------------------------------------------------------------------------------------- | -| aktiverSchritt | nummer | Der Index des derzeit aktiven Schritts. Dies bestimmt, welcher Schritt visuell hervorgehoben werden soll. | - - + + | "Eigenschaften" | Typ | Beschreibung | + | --------------- | ------ | --------------------------------------------------------------------------------------------------------- | + | aktiverSchritt | nummer | Der Index des derzeit aktiven Schritts. Dies bestimmt, welcher Schritt visuell hervorgehoben werden soll. | + diff --git a/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/best-practices-server.mdx b/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/best-practices-server.mdx new file mode 100644 index 0000000000..b476a16282 --- /dev/null +++ b/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/best-practices-server.mdx @@ -0,0 +1,22 @@ +--- +title: Mejores prácticas +--- + +Este documento describe las mejores prácticas que debe seguir al trabajar en el backend. + +## Siga un enfoque modular + +El backend sigue un enfoque modular, que es un principio fundamental al trabajar con NestJS. Asegúrese de descomponer su código en módulos reutilizables para mantener una base de código limpia y organizada. +Cada módulo debe encapsular una característica o funcionalidad particular y tener un alcance bien definido. Este enfoque modular permite una clara separación de responsabilidades y elimina complejidades innecesarias. + +## Exponer servicios para usar en módulos + +Siempre cree servicios que tengan una responsabilidad clara y única, lo que mejora la legibilidad y mantenibilidad del código. Nombre los servicios de manera descriptiva y consistente. + +También debe exponer servicios que desee usar en otros módulos. Exponer servicios a otros módulos es posible a través del poderoso sistema de inyección de dependencias de NestJS, y promueve un acoplamiento débil entre los componentes. + +## Evitar usar el tipo `any` + +Cuando declara una variable como `any`, el verificador de tipos de TypeScript no realiza ninguna comprobación de tipos, lo que hace posible asignar cualquier tipo de valores a la variable. TypeScript utiliza la inferencia de tipos para determinar el tipo de la variable a partir del valor. Al declararlo como `any`, TypeScript ya no puede inferir el tipo. Esto dificulta la captura de errores relacionados con el tipo durante el desarrollo, lo que lleva a errores en tiempo de ejecución y hace que el código sea menos mantenible, menos fiable y más difícil de entender para otros. + +Por eso todo debe tener un tipo. Entonces, si crea un nuevo objeto con un nombre y apellido, debe crear una interfaz o tipo que contenga un nombre y apellido y defina la forma del objeto que está manipulando. diff --git a/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/custom-objects.mdx b/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/custom-objects.mdx new file mode 100644 index 0000000000..7ce5c14c0b --- /dev/null +++ b/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/custom-objects.mdx @@ -0,0 +1,39 @@ +--- +title: Objetos personalizados +--- + +Los objetos son estructuras que te permiten almacenar datos (registros, atributos y valores) específicos de una organización. Twenty proporciona tanto objetos estándar como personalizados. + +Los objetos estándar son objetos incorporados con un conjunto de atributos disponibles para todos los usuarios. Ejemplos de objetos estándar en Twenty incluyen Empresa y Persona. Los objetos estándar tienen campos estándar que también están disponibles para todos los usuarios de Twenty, como Company.displayName. + +Los objetos personalizados son objetos que puedes crear para almacenar información que es única para tu organización. No están incorporados; los miembros de tu espacio de trabajo pueden crear y personalizar objetos personalizados para albergar información para la cual los objetos estándar no son aptos. + +## Esquema de alto nivel + +
+ Esquema de alto nivel +
+ +
+ +## Cómo funciona + +Los objetos personalizados provienen de tablas de metadatos que determinan la forma, el nombre y el tipo de los objetos. Toda esta información está presente en la base de datos del esquema de metadatos, que consta de tablas: + +* **DataSource**: Detalles de dónde se encuentra la información. +* **Object**: Describe el objeto y lo vincula a un DataSource. +* **Field**: Describe los campos de un objeto y lo conecta al objeto. + +Para añadir un objeto personalizado, el workspaceMember consultará la API de /metadata. Esto actualiza los metadatos de acuerdo y calcula un esquema GraphQL basado en los metadatos, almacenándolo en un caché de GQL para su uso posterior. + +
+ Consultando la API de /metadata para añadir objetos personalizados +
+ +
+ +Para obtener datos, el proceso implica hacer consultas a través del endpoint /graphql y pasarlos a través del Query Resolver. + +
+ Consulta el endpoint /graphql para obtener datos +
diff --git a/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/queue.mdx b/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/queue.mdx new file mode 100644 index 0000000000..886d867a5f --- /dev/null +++ b/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/queue.mdx @@ -0,0 +1,41 @@ +--- +title: Cola de Mensajes +--- + +Las colas facilitan la realización de operaciones asíncronas. Se pueden utilizar para realizar tareas en segundo plano, como enviar un correo de bienvenida al registrarse. +Cada caso de uso tendrá su propia clase de cola extendida de `MessageQueueServiceBase`. + +Actualmente, solo soportamos `bull-mq`[bull-mq](https://bullmq.io/) como el controlador de cola. + +## Pasos para crear y usar una nueva cola + +1. Agregue un nombre de cola para su nueva cola en la enumeración `MESSAGE_QUEUES`. +2. Proporcione la implementación de fábrica de la cola con el nombre de la cola como el token de dependencia. +3. Inyecte la cola que creó en el módulo/servicio requerido con el nombre de la cola como el token de dependencia. +4. Agregue una clase de trabajador con inyección basada en token, al igual que el productor. + +### Ejemplo de uso + +```ts +class Resolver { + constructor(@Inject(MESSAGE_QUEUES.custom) private queue: MessageQueueService) {} + + async onSomeAction() { + //lógica de negocio + await this.queue.add(someData); + } +} + +//trabajador asíncrono +class CustomWorker { + constructor(@Inject(MESSAGE_QUEUES.custom) private queue: MessageQueueService) { + this.initWorker(); + } + + async initWorker() { + await this.queue.work(async ({ id, data }) => { + //lógica del trabajador + }); + } +} +``` diff --git a/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/hotkeys.mdx b/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/hotkeys.mdx new file mode 100644 index 0000000000..4264b4afe0 --- /dev/null +++ b/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/hotkeys.mdx @@ -0,0 +1,178 @@ +--- +title: Atajos de teclado +--- + +## Introducción + +Cuando necesitas escuchar una tecla de acceso rápido, normalmente usarías el evento `onKeyDown`. + +En `twenty-front`, sin embargo, podrías tener conflictos entre los mismos atajos de teclado utilizados en diferentes componentes, montados al mismo tiempo. + +Por ejemplo, si tienes una página que escucha la tecla Enter y un modal que escucha la tecla Enter, con un componente Select dentro de ese modal que también escucha la tecla Enter, podrías tener un conflicto cuando todos están montados al mismo tiempo. + +## El gancho `useScopedHotkeys` + +Para manejar este problema, tenemos un gancho personalizado que hace posible escuchar atajos de teclado sin ningún conflicto. + +Lo colocas en un componente, y escuchará los atajos de teclado solo cuando el componente está montado Y cuando el **ámbito del atajo de teclado** especificado está activo. + +## ¿Cómo escuchar atajos de teclado en la práctica? + +Hay dos pasos involucrados en configurar la escucha de atajos de teclado: + +1. Establece el [ámbito del atajo de teclado](#qué-es-un-ambito-de-atajo-de-teclado-) que escuchará los atajos de teclado +2. Usa el gancho `useScopedHotkeys` para escuchar atajos de teclado + +Configurar los ámbitos de atajos de teclado es necesario incluso en páginas simples, porque otros elementos de la interfaz de usuario como el menú lateral o el menú de comandos también podrían escuchar atajos de teclado. + +## Casos de uso para atajos de teclado + +En general, tendrás dos casos de uso que requieren atajos de teclado: + +1. En una página o un componente montado en una página +2. En un componente tipo modal que toma el enfoque debido a la acción del usuario + +El segundo caso de uso puede ocurrir recursivamente: un desplegable en un modal, por ejemplo. + +### Escuchando atajos de teclado en una página + +Ejemplo: + +```tsx +const EscuchaEnterEnPagina = () => { + const { + estableceAmbitoDeAtajoYMemorizaAmbitoAnterior, + regresaAlAmbitoDeAtajoAnterior, + } = usePreviousHotkeyScope(); + + // 1. Establece el ámbito de atajo en un useEffect + useEffect(() => { + estableceAmbitoDeAtajoYMemorizaAmbitoAnterior( + EjemploAmbitosDeAtajo.EjemploEnterPagina, + ); + + // Revertir al ámbito de atajo anterior cuando se desmonte el componente + return () => { + regresaAlAmbitoDeAtajoAnterior(); + }; + }, [regresaAlAmbitoDeAtajoAnterior, estableceAmbitoDeAtajoYMemorizaAmbitoAnterior]); + + // 2. Usa el gancho useScopedHotkeys + useScopedHotkeys( + Key.Enter, + () => { + // Alguna lógica ejecutada en esta página cuando el usuario presiona Enter + // ... + }, + EjemploAmbitosDeAtajo.EjemploEnterPagina, + ); + + return
Mi página que escucha Enter
; +}; +``` + +### Escuchando atajos de teclado en un componente tipo modal + +Para este ejemplo utilizaremos un componente modal que escucha la tecla Escape para indicar a su padre que lo cierre. + +Aquí la interacción del usuario está cambiando el ámbito. + +```tsx +const PaginaEjemploConModal = () => { + const [mostrarModal, establecerMostrarModal] = useState(false); + + const { + estableceAmbitoDeAtajoYMemorizaAmbitoAnterior, + regresaAlAmbitoDeAtajoAnterior, + } = usePreviousHotkeyScope(); + + const manejarClicAbrirModal = () => { + // 1. Establece el ámbito de atajo cuando el usuario abre el modal + establecerMostrarModal(true); + estableceAmbitoDeAtajoYMemorizaAmbitoAnterior( + EjemploAmbitosDeAtajo.EjemploModal, + ); + }; + + const manejarCierreModal = () => { + // 1. Revertir al ámbito de atajo anterior cuando se cierra el modal + establecerMostrarModal(false); + regresaAlAmbitoDeAtajoAnterior(); + }; + + return
+

Mi página con un modal

+ + {mostrarModal && } +
; +}; +``` + +Luego, en el componente modal: + +```tsx +const MiComponenteDesplegable = ({ onClose }: { onClose: () => void }) => { + // 2. Usa el gancho useScopedHotkeys para escuchar la tecla Escape. + // Tenga en cuenta que Escape es una tecla de acceso rápido común que podría usarse en muchos otros componentes + // Por lo tanto, es importante usar un ámbito de atajo para evitar conflictos + useScopedHotkeys( + Key.Escape, + () => { + onClose() + }, + EjemploAmbitosDeAtajo.EjemploModal, + ); + + return
Mi componente modal
; +}; +``` + +Es importante usar este patrón cuando no estás seguro de que solo usar un useEffect con mount/unmount será suficiente para evitar conflictos. + +Esos conflictos pueden ser difíciles de depurar, y puede suceder más a menudo de lo que crees con useEffects. + +## ¿Qué es un ámbito de atajo de teclado? + +Un ámbito de atajo de teclado es una cadena que representa un contexto en el que los atajos de teclado están activos. Por lo general, se codifica como un enum. + +Cuando cambias el ámbito del atajo de teclado, se habilitarán los atajos que están escuchando este ámbito y se deshabilitarán los atajos que escuchan otros ámbitos. + +Solo puedes establecer un ámbito a la vez. + +Como ejemplo, los ámbitos de atajos de teclado para cada página se definen en el enum `PageHotkeyScope`: + +```tsx +export enum PageHotkeyScope { + Configuración = 'configuración', + CrearEspacioTrabajo = 'crear-espacio-trabajo', + IniciarSesion = 'iniciar-sesión', + CrearPerfil = 'crear-perfil', + PlanRequerido = 'plan-requerido', + MostrarPagina = 'mostrar-pagina', + MostrarPersonaPagina = 'mostrar-persona-pagina', + MostrarEmpresaPagina = 'mostrar-empresa-pagina', + PaginaEmpresas = 'pagina-empresas', + PaginaPersonas = 'pagina-personas', + PaginaOportunidades = 'pagina-oportunidades', + PaginaPerfil = 'pagina-perfil', + PaginaMiembroEspacioTrabajo = 'pagina-miembro-espacio-trabajo', + PaginaTareas = 'pagina-tareas', +} +``` + +Internamente, el ámbito seleccionado se almacena en un estado de Recoil que se comparte en toda la aplicación: + +```tsx +export const estadoActualDeAmbitoDeAtajo = createState({ + key: 'estadoActualDeAmbitoDeAtajo', + defaultValue: AMBITO_INICIAL_ATAJOS, +}); +``` + +¡Pero este estado de Recoil nunca debe manejarse manualmente! Veremos cómo usarlo en la siguiente sección. + +## ¿Cómo funciona internamente? + +Hicimos un contenedor delgado sobre [react-hotkeys-hook](https://react-hotkeys-hook.vercel.app/docs/intro) que lo hace más eficiente y evita renders innecesarios. + +También creamos un estado de Recoil para manejar el estado del ámbito de atajos de teclado y hacerlo disponible en toda la aplicación. diff --git a/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/storybook.mdx b/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/storybook.mdx new file mode 100644 index 0000000000..f6e770b67b --- /dev/null +++ b/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/storybook.mdx @@ -0,0 +1,8 @@ +--- +title: Storybook +description: Navegar por la biblioteca de componentes de interfaz de Twenty +--- + +Ver nuestra biblioteca completa de componentes y documentación en Storybook. + +[Abrir Storybook →](https://storybook.twenty.com) diff --git a/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/work-with-figma.mdx b/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/work-with-figma.mdx new file mode 100644 index 0000000000..85382f32b1 --- /dev/null +++ b/packages/twenty-docs/l/es/developers/contribute/capabilities/frontend-development/work-with-figma.mdx @@ -0,0 +1,59 @@ +--- +title: Trabajar con Figma +info: Aprende cómo puedes colaborar con Twenty en Figma +--- + +Figma es una herramienta de diseño de interfaces colaborativa que ayuda a superar la barrera de comunicación entre diseñadores y desarrolladores. +Esta guía explica cómo puedes colaborar con Figma. + +## Acceso + +1. **Accede al enlace compartido:** Puedes acceder al archivo de Figma del proyecto [aquí](https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty). +2. **Inicia sesión:** Si aún no has iniciado sesión, Figma te pedirá que lo hagas. + Las características clave solo están disponibles para usuarios registrados, como el modo desarrollador y la capacidad de seleccionar un marco dedicado. + + + No podrás colaborar efectivamente sin una cuenta. + + +## Estructura de Figma + +En la barra lateral izquierda, puedes acceder a las diferentes páginas del Figma de Twenty. Así es como están organizadas: + +* **Página de componentes:** Esta es la primera página. El diseñador la utiliza para crear y organizar los elementos de diseño reutilizables que se usan en todo el archivo de diseño. Por ejemplo, botones, íconos, símbolos u otros componentes reutilizables. Sirve para mantener la consistencia a lo largo del diseño. +* **Página principal:** La segunda página es la página principal, que muestra la interfaz de usuario completa del proyecto. Puedes presionar ***Play*** para usar el prototipo completo de la aplicación. +* **Páginas de características:** Las otras páginas están típicamente dedicadas a características en progreso. Contienen el diseño de características específicas o módulos de la aplicación o sitio web. Normalmente, aún están en desarrollo. + +## Consejos útiles + +Con acceso de solo lectura, no puedes editar el diseño, pero puedes acceder a todas las características que serán útiles para convertir los diseños en código. + +### Usa el modo Dev + +El Modo Dev de Figma mejora la productividad de los desarrolladores al proporcionar una navegación fácil por el diseño, una gestión eficaz de assets, herramientas de comunicación eficientes, integraciones de caja de herramientas, fragmentos de código rápidos e información clave de capas, superando la brecha entre diseño y desarrollo. Puedes aprender más sobre el Modo Dev [aquí](https://www.figma.com/dev-mode/). + +Cambia al modo "Desarrollador" en la parte derecha de la barra de herramientas para ver las especificaciones de diseño, copiar CSS y acceder a los assets. + +### Usar el prototipo + +Haz clic en cualquier elemento del lienzo y presiona el botón "Play" en el extremo superior derecho de la interfaz para acceder a la vista del prototipo. El modo de prototipo te permite interactuar con el diseño como si fuera el producto final. Demuestra el flujo entre pantallas y cómo los elementos de la interfaz, como botones, enlaces o menús, se comportan al interactuar con ellos. + +1. **Entendiendo las transiciones y animaciones:** En el modo Prototipo, puedes ver cualquier transición o animación añadida por un diseñador entre pantallas o elementos de UI, proporcionando instrucciones visuales claras a los desarrolladores sobre la conducta y el estilo intencionados. +2. **Aclaración de implementación:** Un prototipo también puede ayudar a reducir las ambigüedades. Los desarrolladores pueden interactuar con él para obtener una mejor comprensión de la funcionalidad o apariencia de elementos particulares. + +Para más detalles y orientación sobre el aprendizaje de la plataforma Figma, puedes visitar la [Documentación Oficial de Figma](https://help.figma.com/hc/en-us). + +### Medir distancias + +Selecciona un elemento, mantén presionada la tecla `Option` (Mac) o `Alt` (Windows), luego pasa el cursor sobre otro elemento para ver la distancia entre ellos. + +### Extensión Figma para VSCode (Recomendado) + +[Figma para VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension) +te permite navegar e inspeccionar archivos de diseño, colaborar con diseñadores, rastrear cambios y acelerar la implementación, todo sin salir de tu editor de texto. +Forma parte de nuestras extensiones recomendadas. + +## Colaboración + +1. **Uso de Comentarios:** Puedes utilizar la función de comentarios haciendo clic en el ícono de burbuja en la parte izquierda de la barra de herramientas. +2. **Chat de Cursor:** Una característica agradable de Figma es el Chat de Cursor. Simplemente presiona `;` en Mac y `/` en Windows para enviar un mensaje si ves a alguien más usando Figma al mismo tiempo que tú. diff --git a/packages/twenty-docs/l/es/twenty-ui/input.mdx b/packages/twenty-docs/l/es/twenty-ui/input.mdx index e2e309dc53..a2550d107a 100644 --- a/packages/twenty-docs/l/es/twenty-ui/input.mdx +++ b/packages/twenty-docs/l/es/twenty-ui/input.mdx @@ -4,5 +4,5 @@ image: /images/user-guide/tips/light-bulb.png --- - Header - \ No newline at end of file + Encabezado + diff --git a/packages/twenty-docs/l/es/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/l/es/twenty-ui/input/checkbox.mdx index 2f9d84206d..f01ee51116 100644 --- a/packages/twenty-docs/l/es/twenty-ui/input/checkbox.mdx +++ b/packages/twenty-docs/l/es/twenty-ui/input/checkbox.mdx @@ -4,44 +4,41 @@ image: /images/user-guide/tasks/tasks_header.png --- - Header + Encabezado Usado cuando un usuario necesita seleccionar múltiples valores entre varias opciones. - + + ```jsx + import { Checkbox } from "twenty-ui/display"; -```jsx -import { Checkbox } from "twenty-ui/display"; + export const MyComponent = () => { + return ( + console.log("función onChange ejecutada")} + onCheckedChange={() => console.log("función onCheckedChange ejecutada")} + variant="primary" + size="small" + shape="squared" + /> + ); + }; + ``` + -export const MyComponent = () => { - return ( - console.log("onChange function fired")} - onCheckedChange={() => console.log("onCheckedChange function fired")} - variant="primary" - size="small" - shape="squared" - /> - ); -}; -``` - - - - -| "Props" | Tipo | Descripción | -| --------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------------- | -| marcado | booleano | Indica si la caja de selección está marcada | -| indeterminado | booleano | Indica si la caja de selección está en un estado indeterminado (ni marcada ni desmarcada) | -| "onChange" | función | La función de devolución de llamada que desea activar cuando cambia el estado de la caja de selección | -| onCheckedChange | "función" | La función de devolución de llamada que desea activar cuando cambia el estado `marcado` | -| variante | "cadena" | La variante de estilo visual de la caja. Las opciones incluyen: `primario`, `secundario` y `terciario` | -| tamaño | "cadena" | El tamaño de la caja de selección. Tiene dos opciones: `pequeño` y `grande` | -| forma | cadena | La forma de la caja de selección. Tiene dos opciones: `cuadrado` y `redondeado` | - - + + | Props | Tipo | Descripción | + | --------------- | -------- | ------------------------------------------------------------------------------------------------------ | + | marcado | booleano | Indica si la caja de selección está marcada | + | indeterminado | booleano | Indica si la caja de selección está en un estado indeterminado (ni marcada ni desmarcada) | + | onChange | función | La función de devolución de llamada que desea activar cuando cambia el estado de la caja de selección | + | onCheckedChange | función | La función de devolución de llamada que desea activar cuando cambia el estado `marcado` | + | variante | cadena | La variante de estilo visual de la caja. Las opciones incluyen: `primario`, `secundario` y `terciario` | + | tamaño | cadena | El tamaño de la caja de selección. Tiene dos opciones: `pequeño` y `grande` | + | forma | cadena | La forma de la caja de selección. Tiene dos opciones: `cuadrado` y `redondeado` | + diff --git a/packages/twenty-docs/l/es/twenty-ui/navigation.mdx b/packages/twenty-docs/l/es/twenty-ui/navigation.mdx index 8d50701bfa..d604ffba0c 100644 --- a/packages/twenty-docs/l/es/twenty-ui/navigation.mdx +++ b/packages/twenty-docs/l/es/twenty-ui/navigation.mdx @@ -4,5 +4,5 @@ image: /images/user-guide/tasks/tasks_header.png --- - Header - \ No newline at end of file + Encabezado + diff --git a/packages/twenty-docs/l/es/twenty-ui/navigation/links.mdx b/packages/twenty-docs/l/es/twenty-ui/navigation/links.mdx index b094bb5692..03e007339a 100644 --- a/packages/twenty-docs/l/es/twenty-ui/navigation/links.mdx +++ b/packages/twenty-docs/l/es/twenty-ui/navigation/links.mdx @@ -4,7 +4,7 @@ image: /images/user-guide/what-is-twenty/20.png --- - Header + Encabezado ## Enlace de Contacto @@ -12,44 +12,40 @@ image: /images/user-guide/what-is-twenty/20.png Un componente de enlace estilizado para mostrar información de contacto. - + + ```jsx + import { BrowserRouter as Router } from 'react-router-dom'; -```jsx -import { BrowserRouter as Router } from 'react-router-dom'; + import { ContactLink } from 'twenty-ui/navigation'; -import { ContactLink } from 'twenty-ui/navigation'; + export const MyComponent = () => { + const handleLinkClick = (event) => { + console.log('¡Enlace de contacto pulsado!', event); + }; -export const MyComponent = () => { - const handleLinkClick = (event) => { - console.log('Contact link clicked!', event); - }; - - return ( - - - example@example.com - - - ); -}; -``` - - - - -| "Props" | Tipo | Descripción | -| ----------- | ----------------- | ------------------------------------------------------------------------------- | -| "className" | "cadena" | "Nombre opcional para estilización adicional" | -| href | "cadena" | La URL o ruta objetivo del enlace | -| alHacerClic | "función" | Función de devolución de llamada que se activa cuando se hace clic en el enlace | -| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace | - - + return ( + + + example@example.com + + + ); + }; + ``` + + + | "Props" | Tipo | Descripción | + | ----------- | ----------------- | ------------------------------------------------------------------------------- | + | "className" | string | "Nombre opcional para estilización adicional" | + | href | string | La URL o ruta objetivo del enlace | + | onClick | "función" | Función de devolución de llamada que se activa cuando se hace clic en el enlace | + | hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace | + ## Enlace Sin Estilo @@ -57,39 +53,35 @@ export const MyComponent = () => { Un componente de enlace estilizado para mostrar enlaces. - + + ```jsx + import { RawLink } from "/navigation"; + import { BrowserRouter as Router } from "react-router-dom"; -```jsx -import { RawLink } from "/navigation"; -import { BrowserRouter as Router } from "react-router-dom"; + export const MyComponent = () => { + const handleLinkClick = (event) => { + console.log("¡Enlace de contacto pulsado!", event); + }; -export const MyComponent = () => { - const handleLinkClick = (event) => { - console.log("Contact link clicked!", event); - }; + return ( + + + Contáctanos + + + ); + }; + ``` + - return ( - - - Contact Us - - - ); -}; - -``` - - - - -| "Props" | Tipo | Descripción | -| ----------- | ----------------- | ------------------------------------------------------------------------------- | -| "className" | cadena | "Nombre opcional para estilización adicional" | -| href | "cadena" | La URL o ruta objetivo del enlace | -| alHacerClic | función | Función de devolución de llamada que se activa cuando se hace clic en el enlace | -| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace | - - + + | "Props" | Tipo | Descripción | + | ------------- | ----------------- | ------------------------------------------------------------------------------- | + | nombreDeClase | string | Nombre opcional para estilo adicional | + | href | string | La URL o ruta objetivo del enlace | + | onClick | función | Función de devolución de llamada que se activa cuando se hace clic en el enlace | + | hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace | + ## Enlace Redondeado @@ -97,38 +89,34 @@ export const MyComponent = () => { Un enlace de estilo redondeado con un componente Chip para enlaces. - + + ```jsx + import { RoundedLink } from "/navigation"; + import { BrowserRouter as Router } from "react-router-dom"; -```jsx -import { RoundedLink } from "/navigation"; -import { BrowserRouter as Router } from "react-router-dom"; + export const MyComponent = () => { + const handleLinkClick = (event) => { + console.log("¡Enlace de contacto pulsado!", event); + }; -export const MyComponent = () => { - const handleLinkClick = (event) => { - console.log("Contact link clicked!", event); - }; + return ( + + + Contáctanos + + + ); + }; + ``` + - return ( - - - Contact Us - - - ); -}; -``` - - - - - -| "Props" | Tipo | Descripción | -| ----------- | ----------------- | ------------------------------------------------------------------------------- | -| href | "cadena" | La URL o ruta objetivo del enlace | -| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace | -| alHacerClic | "función" | Función de devolución de llamada que se activa cuando se hace clic en el enlace | - - + + | "Props" | Tipo | Descripción | + | ------- | ----------------- | ------------------------------------------------------------------------------- | + | href | cadena | La URL o ruta objetivo del enlace | + | hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace | + | onClick | "función" | Función de devolución de llamada que se activa cuando se hace clic en el enlace | + ## Enlace Social @@ -136,33 +124,30 @@ export const MyComponent = () => { Enlaces sociales estilizados, con soporte para varios tipos de enlaces sociales, como URLs, LinkedIn y X (o Twitter). - + + ```jsx + import { SocialLink } from "twenty-ui/navigation"; + import { BrowserRouter as Router } from "react-router-dom"; -```jsx -import { SocialLink } from "twenty-ui/navigation"; -import { BrowserRouter as Router } from "react-router-dom"; + export const MyComponent = () => { + return ( + + + + ); + }; + ``` + -export const MyComponent = () => { - return ( - - - - ); -}; -``` - - - - -| "Props" | Tipo | Descripción | -| ----------- | ----------------- | ------------------------------------------------------------------------------------------------------------------ | -| href | "cadena" | La URL o ruta objetivo del enlace | -| hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace | -| tipo | "cadena" | El tipo de enlaces sociales. Las opciones incluyen: `url`, `LinkedIn`, y `Twitter` | -| alHacerClic | "función" | Función de devolución de llamada que se activa cuando se hace clic en el enlace | - - + + | Props | Tipo | Descripción | + | ------- | ----------------- | ---------------------------------------------------------------------------------- | + | href | string | La URL o ruta objetivo del enlace | + | hijos | `React.ReactNode` | El contenido que se mostrará dentro del enlace | + | tipo | string | El tipo de enlaces sociales. Las opciones incluyen: `url`, `LinkedIn`, y `Twitter` | + | onClick | función | Función de devolución de llamada que se activa cuando se hace clic en el enlace | + diff --git a/packages/twenty-docs/l/es/twenty-ui/progress-bar.mdx b/packages/twenty-docs/l/es/twenty-ui/progress-bar.mdx index b6e0a0eecc..87c450d275 100644 --- a/packages/twenty-docs/l/es/twenty-ui/progress-bar.mdx +++ b/packages/twenty-docs/l/es/twenty-ui/progress-bar.mdx @@ -4,46 +4,41 @@ image: /images/user-guide/emails/emails_header.png --- - Header + Encabezado Indica el progreso o la cuenta regresiva y se mueve de derecha a izquierda. + + ```jsx + import { ProgressBar } from "twenty-ui/feedback"; - + export const MyComponent = () => { + return ( + + ); + }; + ``` + -```jsx -import { ProgressBar } from "twenty-ui/feedback"; - -export const MyComponent = () => { - return ( - - ); -}; -``` - - - - - -| "Props" | Tipo | Descripción | Predeterminado | -| ---------------- | -------- | --------------------------------------------------------------------------------------------------------- | -------------- | -| duración | número | La duración total de la animación de la barra de progreso en milisegundos | 3 | -| retraso | número | El retraso en el inicio de la animación de la barra de progreso en milisegundos | 0 | -| aceleración | "cadena" | Función de aceleración para la animación de la barra de progreso | easeInOut | -| alturaDeBarra | número | La altura de la barra en píxeles | 24 | -| colorDeBarra | "cadena" | El color de la barra | gray80 | -| inicioAutomático | booleano | Si es `true`, la animación de la barra de progreso comienza automáticamente cuando el componente se monta | `verdadero` | - - + + | Props | Tipo | Descripción | Predeterminado | + | ---------------- | -------- | --------------------------------------------------------------------------------------------------------- | -------------- | + | duración | número | La duración total de la animación de la barra de progreso en milisegundos | 3 | + | retraso | número | El retraso en el inicio de la animación de la barra de progreso en milisegundos | 0 | + | aceleración | cadena | Función de aceleración para la animación de la barra de progreso | easeInOut | + | alturaDeBarra | número | La altura de la barra en píxeles | 24 | + | colorDeBarra | cadena | El color de la barra | gray80 | + | inicioAutomático | booleano | Si es `true`, la animación de la barra de progreso comienza automáticamente cuando el componente se monta | `verdadero` | + ## Barra de Progreso Circular @@ -51,27 +46,21 @@ export const MyComponent = () => { Indica el progreso de una tarea, a menudo se usa en pantallas de carga o áreas donde se desea comunicar procesos en curso al usuario. + + ```jsx + import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar"; - - -```jsx -import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar"; - -export const MyComponent = () => { - return ; -}; -``` - - - - - -| "Props" | Tipo | Descripción | Predeterminado | -| ------------ | ------ | -------------------------------------------- | -------------- | -| tamaño | número | El tamaño de la barra de progreso circular | 50 | -| anchoDeBarra | número | El ancho de la línea de la barra de progreso | 5 | -| colorDeBarra | cadena | El color de la barra de progreso | currentColor | - - + export const MyComponent = () => { + return ; + }; + ``` + + + | Props | Tipo | Descripción | Predeterminado | + | ------------ | ------ | -------------------------------------------- | -------------- | + | tamaño | número | El tamaño de la barra de progreso circular | 50 | + | anchoDeBarra | número | El ancho de la línea de la barra de progreso | 5 | + | colorDeBarra | cadena | El color de la barra de progreso | currentColor | + diff --git a/packages/twenty-docs/l/es/user-guide/billing/capabilities/pricing-plans.mdx b/packages/twenty-docs/l/es/user-guide/billing/capabilities/pricing-plans.mdx new file mode 100644 index 0000000000..1de0d238e1 --- /dev/null +++ b/packages/twenty-docs/l/es/user-guide/billing/capabilities/pricing-plans.mdx @@ -0,0 +1,79 @@ +--- +title: Planes de precios},{ +description: Obtén información sobre los planes de precios de Twenty y cómo cambiar entre ellos. +--- + +## Resumen + +Twenty ofrece precios flexibles para adaptarse a equipos de todos los tamaños, tanto si prefieres alojamiento en la nube como autoalojamiento. + +## Planes en la nube + +### Pro (Nube) + +Para equipos listos para escalar: + +* Todas las funciones principales de CRM +* Sincronización de correo electrónico y calendario +* Flujos de trabajo y automatizaciones +* Soporte estándar + + + Las funciones premium (SSO y permisos a nivel de fila) no están incluidas en el plan Pro. + + +### Organización (Nube) + +Para equipos más grandes con necesidades avanzadas: + +* Todo lo de Pro +* **Funciones premium**: integración de SSO y permisos a nivel de fila +* Soporte prioritario + +## Planes de autoalojamiento + +### Gratis (Autoalojado) + +Aloja Twenty en tu propia infraestructura sin costo: + +* Incluye todas las funciones de Pro +* Soporte de la comunidad a través de Discord +* Control total sobre tus datos + +### Organización (Autoalojado) + +Para equipos que necesitan funciones premium mientras se autoalojan: + +* Todas las funciones de Pro +* **Funciones premium**: integración de SSO y permisos a nivel de fila +* Soporte del equipo de Twenty +* No es obligatorio publicar el código personalizado como código abierto antes de distribuirlo + +## Funciones premium + +Las funciones premium solo están disponibles en los planes de Organización (Nube o Autoalojado): + +* **Integración de SSO**: inicio de sesión único con tu proveedor de identidad +* **Permisos a nivel de fila**: control de acceso granular a nivel de registro + +## Cambiar de plan + +### Actualizar a Organización + +1. Ir a **Ajustes → Facturación** +2. Haz clic en **Cambiar a Organización** +3. Confirma tu actualización + +### Reducir a Pro + +Contacta al equipo de soporte para reducir tu plan. + +### Cambiar a facturación anual + +1. Ir a **Ajustes → Facturación** +2. Haz clic en **Cambiar a anual** +3. Ahorra con la facturación anual + +### Cambiar a facturación mensual + +Contacta al equipo de soporte para volver a la facturación mensual. diff --git a/packages/twenty-docs/l/es/user-guide/data-migration/overview.mdx b/packages/twenty-docs/l/es/user-guide/data-migration/overview.mdx new file mode 100644 index 0000000000..2500fd7da2 --- /dev/null +++ b/packages/twenty-docs/l/es/user-guide/data-migration/overview.mdx @@ -0,0 +1,89 @@ +--- +title: Migración de datos +description: Importe y exporte sus datos de CRM mediante archivos CSV o la API. +image: /images/user-guide/import-export-data/cloud.png +--- + +import { VimeoEmbed } from '/snippets/vimeo-embed.mdx'; + + + Migración de datos + + +## Métodos de importación + +Twenty admite dos métodos principales para importar datos: + +| Método | Ideal para | Límite de volumen | +| ---------------------------- | ------------------------------------------------ | ---------------------------- | +| **Importación CSV** | Migraciones estándar, actualizaciones periódicas | 10.000 registros por archivo | +| **Importación mediante API** | Migraciones a gran escala, automatización | Ilimitado | + +Para conjuntos de datos muy grandes (cientos de miles de registros), use la API. Nuestros [socios de implementación](/l/es/user-guide/getting-started/capabilities/implementation-services) pueden ayudar a ejecutar estos scripts si es necesario. + +## Conceptos básicos de la importación CSV + +Puede importar datos de cualquier objeto mediante archivos CSV, XLSX o XLS. Cada archivo debe contener **solo un tipo de objeto** (por ejemplo, solo registros de Personas). + +**Los campos deben existir antes de la importación.** Cargar un CSV crea registros, pero no crea campos. Si necesita campos personalizados, créelos primero en **Configuración → Modelo de datos**. + +### Pasos + +1. Vaya al objeto en el que desea importar datos +2. Haga clic en el icono **⋮** en la esquina superior derecha (este es el Menú de comandos) y haga clic en **Importar registros** +3. Descargue el archivo de plantilla para asegurarse de que sus datos estén en el formato esperado +4. Cargue su archivo CSV con el formato correcto +5. Asigne sus columnas a los campos de Twenty +6. Revise los errores (resaltados en amarillo) y corríjalos, editando directamente en la interfaz de usuario +7. Confirme la importación + +### Importación de relaciones entre objetos + +Puede importar relaciones entre objetos utilizando la función de importación CSV. Debe hacer referencia al objeto relacionado utilizando un campo único de ese objeto: el `id`, el `email` para Personas y Miembros del espacio de trabajo, el `domain` para empresas, cualquier otro campo establecido como único en el modelo de datos para cualquier otro objeto. + +**Los registros eliminados cuentan para la unicidad.** Los registros eliminados lógicamente (visibles en Menú de comandos → Ver registros eliminados) se incluyen en las comprobaciones de unicidad. Si importa un registro con el mismo valor único que un registro eliminado, el registro eliminado se restaurará. + + + **¡Importa el orden de importación!** + + Al importar objetos relacionados, cargue los archivos en este orden: + + 1. **Empresas** primero (el lado "uno" de las relaciones) + 2. **Personas** segundo (vinculadas a empresas mediante companyId) + 3. **Oportunidades** tercero (vinculadas a empresas/personas) + 4. **Objetos personalizados** con relaciones al final + + ¿Por qué? El lado "uno" de una relación de uno a muchos debe existir antes de que pueda hacer referencia a él. Por ejemplo, el registro de Empresa debe existir antes de importar una Persona con el ID de esa empresa. + + +Consulte [este artículo](/l/es/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv) para ver una guía paso a paso sobre cómo proceder. + +## Exportar Datos + +Exporte los datos de su espacio de trabajo para copias de seguridad, informes o migración. + +### Pasos + +1. Vaya al objeto que desea exportar +2. Configure la vista con las columnas que necesita +3. Haga clic en **⋮** → **Exportar vista** +4. Guarde el archivo CSV + +**Solo se exportan las columnas visibles.** El archivo CSV contendrá únicamente las columnas que se muestran en su vista actual. Agregue u oculte columnas antes de exportar para controlar qué datos se incluyen. + +**Límites de exportación**: hasta 20.000 registros por exportación. + +## Permisos + +La importación y exportación de datos requieren permisos específicos: + +* **Importación**: requiere el permiso "Importar CSV" +* **Exportación**: requiere el permiso "Exportar CSV" + +Póngase en contacto con el administrador de su espacio de trabajo si no tiene estos permisos. + +## Próximos Pasos + +* [Prepare sus archivos CSV](/l/es/user-guide/data-migration/how-tos/prepare-your-csv-files) +* [Importe relaciones entre objetos](/l/es/user-guide/data-migration/how-tos/import-relations-between-objects-via-csv) +* [Importe mediante API para conjuntos de datos grandes](/l/es/user-guide/data-migration/how-tos/import-data-via-api) diff --git a/packages/twenty-docs/l/es/user-guide/permissions-access/overview.mdx b/packages/twenty-docs/l/es/user-guide/permissions-access/overview.mdx new file mode 100644 index 0000000000..07ff71b19f --- /dev/null +++ b/packages/twenty-docs/l/es/user-guide/permissions-access/overview.mdx @@ -0,0 +1,40 @@ +--- +title: Permisos y acceso +description: Administra roles, permisos y el control de acceso en tu espacio de trabajo. +--- + + + Permisos y acceso + + +El sistema de permisos de Twenty te permite controlar quién puede acceder y modificar los datos en tu espacio de trabajo. Crea roles, asigna permisos y configura SSO para un acceso seguro. + +## Qué incluye esta sección + + + + Crea roles y configura permisos de objetos, campos y configuración. + + + + Configura el inicio de sesión único (SSO) con tu proveedor de identidad. + + + + Preguntas comunes sobre roles, permisos y SSO. + + + +## Características clave + +* **Acceso basado en roles**: Crea roles personalizados con permisos específicos +* **Permisos de objetos**: Controla quién puede ver, editar o eliminar registros +* **Permisos de campos**: Restringe el acceso a campos sensibles +* **Permisos de configuración**: Controla el acceso a la configuración del espacio de trabajo +* **Integración con SSO**: Configura el inicio de sesión único para seguridad a nivel empresarial (plan Organization) + +## Enlaces rápidos + +* [Crear un rol](/l/es/user-guide/permissions-access/capabilities/permissions#create-a-role) +* [Configurar SSO](/l/es/user-guide/permissions-access/capabilities/sso-configuration) +* [Administrar miembros del equipo](/l/es/user-guide/settings/capabilities/member-management) diff --git a/packages/twenty-docs/l/es/user-guide/views-pipelines/how-tos/restrict-access-to-your-view.mdx b/packages/twenty-docs/l/es/user-guide/views-pipelines/how-tos/restrict-access-to-your-view.mdx new file mode 100644 index 0000000000..f2fbaf5201 --- /dev/null +++ b/packages/twenty-docs/l/es/user-guide/views-pipelines/how-tos/restrict-access-to-your-view.mdx @@ -0,0 +1,32 @@ +--- +title: Restringir el acceso a tu vista +description: Controla quién puede ver tus vistas personalizadas. +--- + +Cada vista (excepto las vistas predeterminadas "Todas las [Object Name]") tiene su propia configuración de visibilidad. + +## Pasos + +1. Abre la vista que deseas restringir +2. Haz clic en **Opciones** en la esquina superior derecha +3. Haz clic en **Visibilidad** +4. Selecciona **No listada** + +Tu vista ahora es visible solo para ti. + +## Opciones de visibilidad + +| Configuración | Quién puede ver | +| ---------------------- | ----------------------------------------- | +| **Espacio de trabajo** | Todos los miembros del espacio de trabajo | +| **No listada** | Solo tú | + +## Notas + +* Las vistas predeterminadas "Todas las [Object Name]" no se pueden establecer como no listadas +* Las vistas no listadas no aparecen en los menús desplegables de vistas de otros usuarios +* Puedes cambiar la visibilidad de nuevo a Espacio de trabajo en cualquier momento + +## Relacionado + +* [Configuración de vistas](/l/es/user-guide/views-pipelines/capabilities/view-settings) — todas las opciones de configuración de vistas diff --git a/packages/twenty-docs/l/es/user-guide/views-pipelines/how-tos/track-time-in-stage.mdx b/packages/twenty-docs/l/es/user-guide/views-pipelines/how-tos/track-time-in-stage.mdx new file mode 100644 index 0000000000..9269fb8de1 --- /dev/null +++ b/packages/twenty-docs/l/es/user-guide/views-pipelines/how-tos/track-time-in-stage.mdx @@ -0,0 +1,231 @@ +--- +title: Realiza un seguimiento de cuánto tiempo permanecen las oportunidades en cada etapa. +description: Supervisa la velocidad de las oportunidades registrando cuándo ingresan a cada etapa. +--- + + + Este es un ejemplo de cómo crear [Campos de fórmula](/l/es/user-guide/workflows/how-tos/crm-automations/formula-fields) usando flujos de trabajo — específicamente cálculos de fechas. + + +Registrar cuándo las oportunidades ingresan a cada etapa te ayuda a identificar cuellos de botella y medir la velocidad de las oportunidades. + +Esta guía te muestra cómo configurar campos personalizados y un flujo de trabajo para registrar automáticamente cuándo una oportunidad pasa a cada etapa y calcular cuántos días pasó en la etapa anterior. + +## Paso 1: Crear campos personalizados + +Necesitas dos tipos de campos para cada etapa: + +* **Campos de fecha y hora**: Registran cuándo la oportunidad ingresó a cada etapa +* **Campos numéricos**: Almacenan cuántos días pasó la oportunidad en cada etapa + +### Crea los campos "Última entrada" + +1. Ve a **Ajustes → Modelo de datos → Oportunidades** +2. Para cada etapa, haz clic en **+ Agregar campo** y configura: + * **Nombre**: Última entrada en [Nombre de la etapa] (p. ej., "Última entrada en Nuevo", "Última entrada en Calificado") + * **Tipo**: Fecha y hora + * **Descripción**: Marca de tiempo cuando la oportunidad ingresó a esta etapa +3. Haga clic en **Guardar** + +Crea estos campos: + +* Última entrada en Nuevo +* Última entrada en Calificado +* Última entrada en Reunión +* Última entrada en Propuesta +* Última entrada en Negociación +* Última entrada en Cerrado ganado +* Última entrada en Cerrado perdido + +### Crea los campos "Días en la etapa" + +1. Para cada etapa, haz clic en **+ Agregar campo** y configura: + * **Nombre**: Días en [Nombre de la etapa] (p. ej., "Días en Nuevo", "Días en Calificado") + * **Tipo**: Número + * **Descripción**: Número de días que pasó en esta etapa +2. Haga clic en **Guardar** + +Crea estos campos: + +* Días en Nuevo +* Días en Calificado +* Días en Reunión +* Días en Propuesta +* Días en Negociación + + + No necesitas campos "Días en" para Cerrado ganado y Cerrado perdido, ya que son etapas finales. + + +### Opcional: Hacer que los campos sean de solo lectura + +Si no quieres que los usuarios editen manualmente estos campos calculados: + +1. Ve a **Ajustes → Roles** +2. Selecciona el rol que deseas configurar +3. Busca el objeto Oportunidades +4. Configura los campos "Última entrada" y "Días en" como de solo lectura + +## Paso 2: Crear el flujo de trabajo + +Este único flujo de trabajo gestiona ambas tareas: + +* Registra la marca de tiempo al entrar en una nueva etapa +* Calcula los días que se pasaron en la etapa anterior + +### Crea el flujo de trabajo + +1. Ve a **Flujos de trabajo** +2. Haz clic en **+ Nuevo flujo de trabajo** +3. Ponle el nombre "Seguimiento del tiempo por etapa" + +### Configura el disparador + +1. Agrega un disparador **Registro actualizado** +2. Selecciona **Oportunidades** como objeto +3. Filtrar por: el campo **Etapa** se actualiza + +### Agrega ramas para cada etapa + + + Para crear una nueva rama, haz clic derecho en el lienzo del flujo de trabajo y haz clic en **Nueva acción**. Luego, vincula esta acción al nodo anterior arrastrando la flecha desde el nodo anterior hasta esta nueva acción. + + +--- + +**Rama 1: Etapa = Nuevo (primera etapa)** + +Como esta es la primera etapa, solo registramos la marca de tiempo de entrada; no hay una etapa anterior que calcular. + +1. Agrega un nodo **Filtro**: Etapa = Nuevo +2. Agrega una acción de **Código**: + +```javascript +export const main = async (): Promise => { + return { now: new Date().toISOString() }; +}; +``` + +3. Agrega una acción **Actualizar registro**: + * Registro: la Oportunidad que activó el evento + * Campo: Última entrada en Nuevo + * Valor: `now` del nodo de Código + +--- + +**Rama 2: Etapa = Calificado** + +Al pasar a Calificado, registra la hora de entrada Y calcula los días que se pasaron en Nuevo. + +1. Agrega un nodo **Filtro**: Etapa = Calificado +2. Agrega una acción de **Código**: + +```javascript +export const main = async (params: { + lastEnteredPreviousStage: Date; +}): Promise => { + const { lastEnteredPreviousStage } = params; + + const now = new Date(); + const entryDate = new Date(lastEnteredPreviousStage); + const diffTime = Math.abs(now.getTime() - entryDate.getTime()); + const daysInPreviousStage = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + + return { + now: now.toISOString(), + daysInPreviousStage: daysInPreviousStage + }; +}; +``` + +3. Configura la entrada del nodo de Código: mapea `lastEnteredPreviousStage` al campo **Última entrada en Nuevo** +4. Agrega una acción **Actualizar registro**: + * Registro: la Oportunidad que activó el evento + * Campos a actualizar: + * Última entrada en Calificado = `now` + * Días en Nuevo = `daysInPreviousStage` + +--- + +**Rama 3: Etapa = Reunión** + +Al pasar a Reunión, registra la hora de entrada Y calcula los días que se pasaron en Calificado. + +1. Agrega un nodo **Filtro**: Etapa = Reunión +2. Agrega una acción de **Código**: + +```javascript +export const main = async (params: { + lastEnteredPreviousStage: Date; +}): Promise => { + const { lastEnteredPreviousStage } = params; + + const now = new Date(); + const entryDate = new Date(lastEnteredPreviousStage); + const diffTime = Math.abs(now.getTime() - entryDate.getTime()); + const daysInPreviousStage = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); + + return { + now: now.toISOString(), + daysInPreviousStage: daysInPreviousStage + }; +}; +``` + +3. Configura la entrada del nodo de Código: mapea `lastEnteredPreviousStage` al campo **Última entrada en Calificado** +4. Agrega una acción **Actualizar registro**: + * Registro: la Oportunidad que activó el evento + * Campos a actualizar: + * Última entrada en Reunión = `now` + * Días en Calificado = `daysInPreviousStage` + +--- + +**Continúa con las etapas restantes:** + +| Etapa | Registros | Calcula | +| --------------- | --------------------------------- | ------------------- | +| Propuesta | Última entrada en Propuesta | Días en Reunión | +| Negociación | Última entrada en Negociación | Días en Propuesta | +| Cerrado ganado | Última entrada en Cerrado ganado | Días en Negociación | +| Cerrado perdido | Última entrada en Cerrado perdido | Días en Negociación | + +Las ramas no necesitan volver a unirse; cada una se ejecuta de forma independiente cuando se cumple su condición de etapa. + +## Paso 3: Analizar el tiempo en la etapa + +Con las marcas de tiempo y los recuentos de días registrados, ahora puedes analizar la velocidad de las oportunidades. + +### Crea una vista "Oportunidades lentas" + +1. Crea una vista de tabla de Oportunidades +2. Agrega columnas: Nombre, Etapa, Días en [etapa anterior], Importe +3. Ordena por el campo "Días en" (descendente) +4. Filtra por Etapa para centrarte en una etapa a la vez + +Las oportunidades en la parte superior pasaron más tiempo en la etapa anterior. + +### Usa agregaciones + +En tu vista Kanban del pipeline: + +1. Haz clic en el número junto al nombre de una Etapa +2. Selecciona **Promedio** +3. Elige un campo "Días en" + +Esto muestra el tiempo promedio que las oportunidades pasan en cada etapa. + +## Resumen + +| Componente | Propósito | +| --------------------------- | ------------------------------------------------------------------------- | +| **Campos "Última entrada"** | Almacenan cuándo la oportunidad ingresó a cada etapa | +| **Campos "Días en"** | Almacenan cuántos días se pasaron en cada etapa | +| **Flujo de trabajo** | Registra la marca de tiempo Y calcula los días en una sola pasada | +| **Vistas y agregaciones** | Analiza la velocidad de las oportunidades e identifica cuellos de botella | + +## Relacionado + +* [Flujos de trabajo](/l/es/user-guide/workflows/overview) — conceptos básicos de automatización +* [Cómo crear campos personalizados](/l/es/user-guide/data-model/how-tos/create-custom-fields) — configuración de campos +* [Vistas Kanban](/l/es/user-guide/views-pipelines/capabilities/kanban-views) — agregaciones diff --git a/packages/twenty-docs/l/fr/developers/contribute/capabilities/backend-development/best-practices-server.mdx b/packages/twenty-docs/l/fr/developers/contribute/capabilities/backend-development/best-practices-server.mdx new file mode 100644 index 0000000000..c5d7388c5d --- /dev/null +++ b/packages/twenty-docs/l/fr/developers/contribute/capabilities/backend-development/best-practices-server.mdx @@ -0,0 +1,22 @@ +--- +title: Meilleures pratiques +--- + +Ce document décrit les meilleures pratiques à suivre lors de travaux sur le backend. + +## Suivez une approche modulaire + +Le backend suit une approche modulaire, qui est un principe fondamental lors de l'utilisation de NestJS. Assurez-vous de décomposer votre code en modules réutilisables pour maintenir une base de code propre et organisée. +Chaque module doit encapsuler une fonctionnalité particulière et avoir un périmètre bien défini. Cette approche modulaire permet une séparation claire des préoccupations et supprime les complexités inutiles. + +## Exposez des services à utiliser dans les modules + +Créez toujours des services avec une responsabilité claire et unique, ce qui améliore la lisibilité et la maintenabilité du code. Nommez les services de manière descriptive et cohérente. + +Vous devez également exposer les services que vous souhaitez utiliser dans d'autres modules. Exposer des services à d'autres modules est possible grâce au puissant système d'injection de dépendance de NestJS, et favorise un couplage lâche entre les composants. + +## Évitez d'utiliser le type `any` + +Lorsque vous déclarez une variable comme `any`, le vérificateur de types de TypeScript ne procède à aucune vérification de type, ce qui permet d'affecter n'importe quel type de valeur à la variable. TypeScript utilise l'inférence de type pour déterminer le type d'une variable en fonction de sa valeur. En le déclarant comme `any`, TypeScript ne peut plus inférer le type. Cela rend difficile la détection des erreurs liées aux types pendant le développement, conduisant à des erreurs d'exécution et rendant le code moins maintenable, moins fiable et plus difficile à comprendre pour d'autres. + +C'est pourquoi tout devrait avoir un type. Donc si vous créez un nouvel objet avec un prénom et un nom, vous devriez créer une interface ou un type contenant un prénom et un nom qui définit la forme de l'objet que vous manipulez. diff --git a/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx b/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx new file mode 100644 index 0000000000..fd0c45d576 --- /dev/null +++ b/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/folder-architecture-front.mdx @@ -0,0 +1,109 @@ +--- +title: Architecture des Dossiers +info: Un aperçu détaillé de notre architecture de dossiers +--- + +Dans ce guide, vous explorerez les détails de la structure du répertoire de projet et comment elle contribue à l'organisation et à la maintenabilité de Twenty. + +En suivant cette convention d'architecture de dossiers, il est plus facile de trouver les fichiers liés à des fonctionnalités spécifiques et de s'assurer que l'application est évolutive et maintenable. + +``` +front +└───modules +│ └───module1 +│ │ └───sous-module1 +│ └───module2 +│ └───ui +│ │ └───affichage +│ │ └───entrées +│ │ │ └───boutons +│ │ └───... +└───pages +└───... +``` + +## Pages + +Comprend les composants de haut niveau définis par les routes de l'application. Ils importent des composants de plus bas niveau depuis le dossier `modules` (plus de détails ci-dessous). + +## Modules + +Chaque module représente une fonctionnalité ou un groupe de fonctionnalités, comprenant ses composants spécifiques, ses états, et sa logique opérationnelle. +Ils doivent tous suivre la structure ci-dessous. Vous pouvez imbriquer des modules dans des modules (appelés sous-modules) et les mêmes règles s'appliqueront. + +``` +module1 + └───composants + │ └───composant1 + │ └───composant2 + └───constantes + └───contextes + └───graphql + │ └───fragments + │ └───requêtes + │ └───mutations + └───hooks + │ └───interne + └───états + │ └───sélecteurs + └───types + └───utilitaires +``` + +### Contextes + +Un contexte est un moyen de transmettre des données à travers l'arborescence de composants sans avoir à transmettre les propriétés manuellement à chaque niveau. + +Voir [React Context](https://react.dev/reference/react#context-hooks) pour plus de détails. + +### GraphQL + +Comprend des fragments, des requêtes et des mutations. + +Voir [GraphQL](https://graphql.org/learn/) pour plus de détails. + +* Fragments + +Un fragment est une partie réutilisable d'une requête, que vous pouvez utiliser dans différents endroits. En utilisant des fragments, il est plus facile d'éviter de dupliquer du code. + +Voir [GraphQL Fragments](https://graphql.org/learn/queries/#fragments) pour plus de détails. + +* Requêtes + +Voir [GraphQL Queries](https://graphql.org/learn/queries/) pour plus de détails. + +* Mutations + +Voir [GraphQL Mutations](https://graphql.org/learn/queries/#mutations) pour plus de détails. + +### Hooks + +Voir [Hooks](https://react.dev/learn/reusing-logic-with-custom-hooks) pour plus de détails. + +### États + +Contient la logique de gestion des états. [RecoilJS](https://recoiljs.org) gère cela. + +* Sélecteurs : Voir [RecoilJS Selectors](https://recoiljs.org/docs/basic-tutorial/selectors) pour plus de détails. + +La gestion de l'état intégrée de React gère toujours l'état au sein d'un composant. + +### Utilitaires + +Devrait juste contenir des fonctions pures réutilisables. Autrement, créez des hooks personnalisés dans le dossier `hooks`. + +## UI + +Contient tous les composants d'interface utilisateur réutilisables utilisés dans l'application. + +Ce dossier peut contenir des sous-dossiers, comme `data`, `display`, `feedback`, et `input` pour des types de composants spécifiques. Chaque composant doit être autonome et réutilisable, de sorte que vous puissiez l'utiliser dans différentes parties de l'application. + +En séparant les composants UI des autres composants dans le dossier `modules`, il est plus facile de maintenir un design cohérent et d'effectuer des changements de l'interface utilisateur sans affecter d'autres parties (logique métier) de la base de code. + +## Interface et dépendances + +Vous pouvez importer le code d'autres modules depuis n'importe quel module, sauf le dossier `ui`. Cela permettra de garder son code facile à tester. + +### Interne + +Chaque partie (hooks, états, ...) d'un module peut avoir un dossier `internal`, qui contient des parties utilisées uniquement au sein du module. diff --git a/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/frontend-commands.mdx b/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/frontend-commands.mdx new file mode 100644 index 0000000000..9921f33a18 --- /dev/null +++ b/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/frontend-commands.mdx @@ -0,0 +1,86 @@ +--- +title: Commandes Frontend +--- + +## Commandes utiles + +### Lancement de l'application + +```bash +npx nx start twenty-front +``` + +### Régénérer le schéma GraphQL basé sur le schéma API GraphQL + +```bash +npx nx run twenty-front:graphql:generate --configuration=metadata +``` + +OU + +```bash +npx nx run twenty-front:graphql:generate +``` + +### Analyse + +```bash +npx nx run twenty-front:lint # passez --fix pour corriger les erreurs de lint +``` + +## Traductions + +```bash +npx nx run twenty-front:lingui:extract\nnpx nx run twenty-front:lingui:compile +``` + +### Test + +```bash +npx nx run twenty-front:test # exécuter les tests jest\nnpx nx run twenty-front:storybook:serve:dev # exécuter storybook\nnpx nx run twenty-front:storybook:test # exécuter les tests # (besoin de yarn storybook:serve:dev pour fonctionner)\nnpx nx run twenty-front:storybook:coverage # (besoin de yarn storybook:serve:dev pour fonctionner) +``` + +## Écosystème Tech + +Le projet a une stack simple et propre, avec un code boilerplate minimal. + +**Application** + +* [React](https://react.dev/) +* [Apollo](https://www.apollographql.com/docs/) +* [GraphQL Codegen](https://the-guild.dev/graphql/codegen) +* [Recoil](https://recoiljs.org/docs/introduction/core-concepts) +* [TypeScript](https://www.typescriptlang.org/) + +**Tests** + +* [Jest](https://jestjs.io/) +* [Storybook](https://storybook.js.org/) + +**Outils** + +* [Yarn](https://yarnpkg.com/) +* [Craco](https://craco.js.org/docs/) +* [ESLint](https://eslint.org/) + +## Architecture + +### Routage + +[React Router](https://reactrouter.com/) gère le routage. + +Pour éviter les [re-renders](/l/fr/developers/contribute/capabilities/frontend-development/best-practices-front#managing-re-renders) inutiles, toute la logique de routage est dans un `useEffect` dans `PageChangeEffect`. + +### Gestion de l'État + +[Recoil](https://recoiljs.org/docs/introduction/core-concepts) gère la gestion de l'état. + +Voir [les meilleures pratiques](/l/fr/developers/contribute/capabilities/frontend-development/best-practices-front#state-management) pour plus d'informations sur la gestion de l'état. + +## Tests + +[Jest](https://jestjs.io/) sert de guide pour les tests unitaires tandis que [Storybook](https://storybook.js.org/) est utilisé pour les tests de composants. + +Jest est principalement utilisé pour tester les fonctions utilitaires, et non les composants eux-mêmes. + +Storybook est utilisé pour tester le comportement des composants isolés, ainsi que pour afficher le système de design. diff --git a/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/storybook.mdx b/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/storybook.mdx new file mode 100644 index 0000000000..456c270679 --- /dev/null +++ b/packages/twenty-docs/l/fr/developers/contribute/capabilities/frontend-development/storybook.mdx @@ -0,0 +1,8 @@ +--- +title: Storybook +description: Parcourir la bibliothèque de composants UI de Twenty +--- + +Consultez notre bibliothèque de composants complète et la documentation dans Storybook. + +[Ouvrir Storybook →](https://storybook.twenty.com) diff --git a/packages/twenty-docs/l/fr/developers/self-host/capabilities/cloud-providers.mdx b/packages/twenty-docs/l/fr/developers/self-host/capabilities/cloud-providers.mdx new file mode 100644 index 0000000000..cc975ad41e --- /dev/null +++ b/packages/twenty-docs/l/fr/developers/self-host/capabilities/cloud-providers.mdx @@ -0,0 +1,45 @@ +--- +title: Autres méthodes +--- + + + Ce document est maintenu par la communauté. Il pourrait contenir des problèmes. + + +## Kubernetes via Terraform et Manifests + +La documentation communautaire pour le déploiement de Kubernetes est disponible [ici](https://github.com/twentyhq/twenty/tree/main/packages/twenty-docker/k8s) + +### Coolify + +Déployer Twenty sur les serveurs avec Coolify. (l'image officielle sur Coolify sera bientôt disponible) + +[Documentation Coolify](https://coolify.io/docs/get-started/introduction) + +### EasyPanel + +Déployez Twenty sur EasyPanel avec le modèle maintenu par la communauté ci-dessous. + +[Déployer sur EasyPanel](https://easypanel.io/docs/templates/twenty) + +### Elest.io + +Déployez Twenty sur les serveurs avec Elest.io en utilisant le lien ci-dessous. + +[Déployer sur Elest.io](https://elest.io/open-source/twenty) + +### Twenty sur Railway + +Déployez Twenty sur Railway avec le modèle maintenu par la communauté ci-dessous. + +[![Déployer sur Railway](https://railway.com/button.svg)](https://railway.com/deploy/nAL3hA) + +### Twenty sur Sealos + +Déployez Twenty sur Sealos avec le modèle maintenu par la communauté ci-dessous. + +[![Déployer sur Sealos](https://sealos.io/Deploy-on-Sealos.svg)](https://sealos.io/products/app-store/twenty) + +## Autres + +N'hésitez pas à ouvrir une PR pour ajouter d'autres options de fournisseur cloud. diff --git a/packages/twenty-docs/l/fr/twenty-ui/display/app-tooltip.mdx b/packages/twenty-docs/l/fr/twenty-ui/display/app-tooltip.mdx index ed88adeac3..6b43167a3b 100644 --- a/packages/twenty-docs/l/fr/twenty-ui/display/app-tooltip.mdx +++ b/packages/twenty-docs/l/fr/twenty-ui/display/app-tooltip.mdx @@ -4,57 +4,52 @@ image: /images/user-guide/tips/light-bulb.png --- - Header + En-tête Un message bref qui affiche des informations supplémentaires lorsqu'un utilisateur interagit avec un élément. - + + ```jsx + import { AppTooltip } from "@/ui/display/tooltip/AppTooltip"; -```jsx -import { AppTooltip } from "@/ui/display/tooltip/AppTooltip"; - -export const MyComponent = () => { - return ( - <> -

- Customer Insights -

- - - ); -}; -``` - - - - - -| Propriétés | Type | Description | -| ----------------------- | -------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire | -| sélecteurAncre | Sélecteur CSS | Sélecteur pour l'ancre de l'info-bulle (l'élément qui déclenche l'info-bulle) | -| contenu | chaîne | Le contenu que vous souhaitez afficher dans l'info-bulle | -| délaiMasquer | nombre | Le délai avant de masquer l'info-bulle après que le curseur ait quitté l'ancre | -| décalage | nombre | Le décalage en pixels pour positionner l'info-bulle | -| pasDeFlèche | booléen | Si `vrai`, masque la flèche sur l'info-bulle | -| estOuvert | booléen | Si `vrai`, l'info-bulle est ouverte par défaut | -| emplacement | Chaîne `PlacesType` de `react-tooltip` | Spécifie le placement de l'info-bulle. Les valeurs incluent `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, et `left-end` | -| stratégiePositionnement | Chaîne `PositionStrategy` de `react-tooltip` | Stratégie de positionnement pour l'info-bulle. A deux valeurs : `absolute` et `fixed` | - - + export const MyComponent = () => { + return ( + <> +

+ Aperçus client +

+ + + ); + }; + ``` + + + | Propriétés | Type | Description | + | ----------------------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | + | nomDeClasse | chaîne | Classe CSS facultative pour le style supplémentaire | + | sélecteurAncre | Sélecteur CSS | Sélecteur pour l'ancre de l'info-bulle (l'élément qui déclenche l'info-bulle) | + | contenu | chaîne | Le contenu que vous souhaitez afficher dans l'info-bulle | + | délaiMasquer | nombre | Le délai avant de masquer l'info-bulle après que le curseur ait quitté l'ancre | + | décalage | nombre | Le décalage en pixels pour positionner l'info-bulle | + | pasDeFlèche | booléen | Si `vrai`, masque la flèche sur l'info-bulle | + | estOuvert | booléen | Si `vrai`, l'info-bulle est ouverte par défaut | + | emplacement | Chaîne `PlacesType` de `react-tooltip` | Spécifie le placement de l'info-bulle. Les valeurs incluent `bottom`, `left`, `right`, `top`, `top-start`, `top-end`, `right-start`, `right-end`, `bottom-start`, `bottom-end`, `left-start`, et `left-end` | + | stratégiePositionnement | Chaîne `PositionStrategy` de `react-tooltip` | Stratégie de positionnement pour l'info-bulle. A deux valeurs : `absolute` et `fixed` | + ## Texte débordant avec info-bulle @@ -62,27 +57,22 @@ export const MyComponent = () => { Gère le texte débordant et affiche une info-bulle lorsque le texte déborde. - + + ```jsx + import { OverflowingTextWithTooltip } from 'twenty-ui/display'; -```jsx -import { OverflowingTextWithTooltip } from 'twenty-ui/display'; + export const MyComponent = () => { + const crmTaskDescription = + 'Suivre avec le client concernant son enquête récente sur le produit. Discuter des options de prix, répondre à toute préoccupation et fournir des informations additionnelles sur le produit. Enregistrer les détails de la conversation dans le CRM pour référence future.'; -export const MyComponent = () => { - const crmTaskDescription = - 'Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.'; - - return ; -}; -``` - - - - - -| Propriétés | Type | Description | -| ---------- | ------ | ----------------------------------------------------------------------- | -| texte | chaîne | Le contenu que vous souhaitez afficher dans la zone de texte débordante | - - + return ; + }; + ``` + + + | Propriétés | Type | Description | + | ---------- | ------ | ----------------------------------------------------------------------- | + | texte | chaîne | Le contenu que vous souhaitez afficher dans la zone de texte débordante | + diff --git a/packages/twenty-docs/l/fr/twenty-ui/input.mdx b/packages/twenty-docs/l/fr/twenty-ui/input.mdx index 4a19239d96..9c298b3927 100644 --- a/packages/twenty-docs/l/fr/twenty-ui/input.mdx +++ b/packages/twenty-docs/l/fr/twenty-ui/input.mdx @@ -4,5 +4,5 @@ image: /images/user-guide/tips/light-bulb.png --- - Header - \ No newline at end of file + En-tête + diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/checkbox.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/checkbox.mdx index f5f1a3e19c..09b17c3888 100644 --- a/packages/twenty-docs/l/fr/twenty-ui/input/checkbox.mdx +++ b/packages/twenty-docs/l/fr/twenty-ui/input/checkbox.mdx @@ -4,44 +4,41 @@ image: /images/user-guide/tasks/tasks_header.png --- - Header + En-tête Utilisé lorsqu'un utilisateur doit sélectionner plusieurs valeurs parmi plusieurs options. - + + ```jsx + import { Checkbox } from "twenty-ui/display"; -```jsx -import { Checkbox } from "twenty-ui/display"; + export const MyComponent = () => { + return ( + console.log("la fonction onChange est exécutée")} + onCheckedChange={() => console.log("la fonction onCheckedChange est exécutée")} + variant="primary" + size="small" + shape="squared" + /> + ); + }; + ``` + -export const MyComponent = () => { - return ( - console.log("onChange function fired")} - onCheckedChange={() => console.log("onCheckedChange function fired")} - variant="primary" - size="small" - shape="squared" - /> - ); -}; -``` - - - - -| Propriétés | Type | Description | -| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -| coché | booléen | Indique si la case à cocher est cochée | -| indéterminé | booléen | Indique si la case à cocher est dans un état indéterminé (ni cochée ni décochée) | -| onChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état de la case à cocher change | -| onCheckedChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état `coché` change | -| variante | chaîne | Le style visuel de la variante de la boîte. Les options incluent : `primaire`, `secondaire` et `tertiaire` | -| taille | chaîne | La taille de la case à cocher. Comporte deux options : `petit` et `grand` | -| forme | chaîne | La forme de la case à cocher. Comporte deux options : `carrée` et `arrondie` | - - + + | Propriétés | Type | Description | + | --------------- | -------- | ---------------------------------------------------------------------------------------------------------- | + | coché | booléen | Indique si la case à cocher est cochée | + | indéterminé | booléen | Indique si la case à cocher est dans un état indéterminé (ni cochée ni décochée) | + | onChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état de la case à cocher change | + | onCheckedChange | fonction | La fonction de rappel que vous souhaitez déclencher lorsque l'état `coché` change | + | variante | chaîne | Le style visuel de la variante de la boîte. Les options incluent : `primaire`, `secondaire` et `tertiaire` | + | taille | chaîne | La taille de la case à cocher. Comporte deux options : `petit` et `grand` | + | forme | chaîne | La forme de la case à cocher. Comporte deux options : `carrée` et `arrondie` | + diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/icon-picker.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/icon-picker.mdx index d583615c42..6e0ada64ed 100644 --- a/packages/twenty-docs/l/fr/twenty-ui/input/icon-picker.mdx +++ b/packages/twenty-docs/l/fr/twenty-ui/input/icon-picker.mdx @@ -4,53 +4,49 @@ image: /images/user-guide/github/github-header.png --- - Header + En-tête Un sélecteur d'icônes basé sur un menu déroulant qui permet aux utilisateurs de sélectionner une icône dans une liste. + + ```jsx + import { RecoilRoot } de "recoil"; + import React, { useState } de "react"; + import { IconPicker } de "@/ui/input/components/IconPicker"; - + export const MonComposant = () => { -```jsx -import { RecoilRoot } from "recoil"; -import React, { useState } from "react"; -import { IconPicker } from "@/ui/input/components/IconPicker"; + const [selectedIcon, setSelectedIcon] = useState(""); + const handleIconChange = ({ iconKey, Icon }) => { + console.log("Icône sélectionnée:", iconKey); + setSelectedIcon(iconKey); + }; -export const MyComponent = () => { + return ( + + + + ); + }; + ``` + - const [selectedIcon, setSelectedIcon] = useState(""); - const handleIconChange = ({ iconKey, Icon }) => { - console.log("Selected Icon:", iconKey); - setSelectedIcon(iconKey); - }; - - return ( - - - - ); -}; -``` - - - - -| Propriétés | Type | Description | -| --------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | -| désactivé | booléen | Désactive le sélecteur d'icônes si défini sur `true` | -| onChange | fonction | La fonction de rappel déclenchée lorsque l'utilisateur sélectionne une icône. Elle reçoit un objet avec les propriétés `iconKey` et `Icon` | -| selectedIconKey | chaîne | La clé de l'icône initialement sélectionnée | -| onClickOutside | fonction | Fonction de rappel déclenchée lorsque l'utilisateur clique en dehors du menu déroulant | -| onClose | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est fermé | -| onOpen | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est ouvert | -| variante | chaîne | La variante de style visuel de l'icône cliquable. Les options incluent : `primaire`, `secondaire` et `tertiaire` | - - + + | Propriétés | Type | Description | + | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------ | + | désactivé | booléen | Désactive le sélecteur d'icônes si défini sur `true` | + | onChange | fonction | La fonction de rappel déclenchée lorsque l'utilisateur sélectionne une icône. Elle reçoit un objet avec les propriétés `iconKey` et `Icon` | + | selectedIconKey | chaîne | La clé de l'icône initialement sélectionnée | + | onClickOutside | fonction | Fonction de rappel déclenchée lorsque l'utilisateur clique en dehors du menu déroulant | + | onClose | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est fermé | + | onOpen | fonction | Fonction de rappel déclenchée lorsque le menu déroulant est ouvert | + | variante | chaîne | La variante de style visuel de l'icône cliquable. Les options incluent : `primaire`, `secondaire` et `tertiaire` | + diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/image-input.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/image-input.mdx index c2246c6ee7..0ac0aae033 100644 --- a/packages/twenty-docs/l/fr/twenty-ui/input/image-input.mdx +++ b/packages/twenty-docs/l/fr/twenty-ui/input/image-input.mdx @@ -4,34 +4,31 @@ image: /images/user-guide/objects/objects.png --- - Header + En-tête Permet aux utilisateurs de télécharger et de supprimer une image. - + + ```jsx + import { ImageInput } from "@/ui/input/components/ImageInput"; -```jsx -import { ImageInput } from "@/ui/input/components/ImageInput"; + export const MyComponent = () => { + return ; + }; + ``` + -export const MyComponent = () => { - return ; -}; -``` - - - - -| Propriétés | Type | Description | -| ------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| photo | chaîne | L'URL source de l'image | -| onUpload | fonction | La fonction appelée lors du téléchargement d'une nouvelle image par un utilisateur. Elle reçoit l'objet `File` comme paramètre. | -| onRemove | fonction | La fonction appelée lorsque l'utilisateur clique sur le bouton supprimer. | -| onAbort | fonction | La fonction appelée lorsque l'utilisateur clique sur le bouton annuler pendant le téléchargement de l'image. | -| isUploading | booléen | Indique si une image est en cours de téléchargement. | -| messageErreur | chaîne | Un message d'erreur facultatif à afficher sous l'entrée d'image. | -| désactivé | booléen | Si `true`, l'entrée entière est désactivée et les boutons ne sont pas cliquables. | - - + + | Propriétés | Type | Description | + | ------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------- | + | photo | chaîne | L'URL source de l'image | + | onUpload | fonction | La fonction appelée lors du téléchargement d'une nouvelle image par un utilisateur. Elle reçoit l'objet `File` comme paramètre. | + | onRemove | fonction | La fonction appelée lorsque l'utilisateur clique sur le bouton supprimer. | + | onAbort | fonction | La fonction appelée lorsque l'utilisateur clique sur le bouton annuler pendant le téléchargement de l'image. | + | isUploading | booléen | Indique si une image est en cours de téléchargement. | + | messageErreur | chaîne | Un message d'erreur facultatif à afficher sous l'entrée d'image. | + | désactivé | booléen | Si `true`, l'entrée entière est désactivée et les boutons ne sont pas cliquables. | + diff --git a/packages/twenty-docs/l/fr/twenty-ui/input/text.mdx b/packages/twenty-docs/l/fr/twenty-ui/input/text.mdx index d371a99153..f298f1112e 100644 --- a/packages/twenty-docs/l/fr/twenty-ui/input/text.mdx +++ b/packages/twenty-docs/l/fr/twenty-ui/input/text.mdx @@ -4,7 +4,7 @@ image: /images/user-guide/notes/notes_header.png --- - Header + En-tête ## Entrée de texte @@ -12,59 +12,52 @@ image: /images/user-guide/notes/notes_header.png Permet aux utilisateurs de saisir et de modifier du texte. + + ```jsx + import { RecoilRoot } from "recoil"; + import { TextInput } from "@/ui/input/components/TextInput"; - + export const MyComponent = () => { + const handleChange = (text) => { + console.log("Changement d'entrée:", text); + }; -```jsx -import { RecoilRoot } from "recoil"; -import { TextInput } from "@/ui/input/components/TextInput"; + const handleKeyDown = (event) => { + console.log("Touche enfoncée:", event.key); + }; -export const MyComponent = () => { - const handleChange = (text) => { - console.log("Input changed:", text); - }; + return ( + + + + ); + }; + ``` + - const handleKeyDown = (event) => { - console.log("Key pressed:", event.key); - }; - - return ( - - - - ); -}; - -``` - - - - - -| 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. - - + + | 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. + ## Entrée de texte à taille automatique @@ -72,46 +65,40 @@ Le composant accepte également d'autres propriétés d'éléments d'entrée HTM Composant d'entrée de texte qui ajuste automatiquement sa hauteur en fonction du contenu. + + ```jsx + import { RecoilRoot } from "recoil"; + import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput"; - - -```jsx -import { RecoilRoot } from "recoil"; -import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput"; - -export const MyComponent = () => { - return ( - - console.log("onValidate function fired")} - minRows={1} - placeholder="Write a comment" - onFocus={() => console.log("onFocus function fired")} - variant="icon" - buttonTitle - value="Task: " - /> - - ); -}; -``` - - - - - -| 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 | - - + export const MyComponent = () => { + return ( + + console.log("Fonction onValidate déclenchée")} + minRows={1} + placeholder="Écrivez un commentaire" + onFocus={() => console.log("Fonction onFocus déclenchée")} + variant="icon" + buttonTitle + value="Tâche: " + /> + + ); + }; + ``` + + + | 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 | + ## Zone de texte @@ -119,35 +106,31 @@ export const MyComponent = () => { Vous permet de créer des entrées de texte multiligne. - + + ```jsx + import { TextArea } from "@/ui/input/components/TextArea"; -```jsx -import { TextArea } from "@/ui/input/components/TextArea"; + export const MyComponent = () => { + return ( +