8cadd00d34
Created by Github action --------- Co-authored-by: Crowdin Bot <support+bot@crowdin.com> Co-authored-by: github-actions <github-actions@twenty.com>
115 lines
5.1 KiB
Plaintext
115 lines
5.1 KiB
Plaintext
---
|
|
title: هيكلية المجلدات
|
|
info: نظرة مفصلة على هيكل المجلدات الخاصة بنا
|
|
image: /images/user-guide/fields/field.png
|
|
---
|
|
|
|
<Frame>
|
|
<img src="/images/user-guide/fields/field.png" alt="Header" />
|
|
</Frame>
|
|
|
|
في هذا الدليل، ستستكشف تفاصيل هيكل مشروع الدليل وكيف يساهم في تنظيم وصيانة 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`، والذي يحتوي على الأجزاء التي تُستخدم فقط داخل الوحدة.
|