+ 
+
+
+بمجرد أن يصبح الخادم جاهزًا، سيفتح المتصفح لإجراء تسجيل الدخول. استخدم حساب العرض التوضيحي المُجهَّز مسبقًا:
+
+* **البريد الإلكتروني:** `tim@apple.dev`
+* **كلمة المرور:** `tim@apple.dev`
+
+
+
+ 
+
+
+انقر **Authorize** في الشاشة التالية — يمنح هذا واجهة سطر الأوامر CLI حق الوصول إلى مساحة العمل الخاصة بك.
+
+
+
+ 
+
+
+ستؤكّد الطرفية أن كل شيء قد تم إعداده.
+
+
+
+ 
+
+
+**بعد هذه المرحلة:** لديك خادم Twenty قيد التشغيل على [http://localhost:2020](http://localhost:2020)، مع تفويض CLI لديك للمزامنة معه.
+
+
+
+ 
+
+
+افتح [http://localhost:2020/settings/applications#developer](http://localhost:2020/settings/applications#developer). يفترض أن ترى تطبيقك ضمن **Your Apps**.
+
+
+
+ 
+
+
+انقر **My twenty app** لعرض **تسجيل التطبيق** — وهو سجل على مستوى الخادم يصف تطبيقك (الاسم، المعرّف، بيانات اعتماد OAuth، المصدر). يمكن تثبيت تسجيل واحد عبر عدة مساحات عمل على الخادم نفسه.
+
+
+
+ 
+
+
+انقر **View installed app** لعرض التثبيت في مساحة العمل. تعرض علامة التبويب **About** الإصدار وخيارات الإدارة.
+
+
+
+ 
+
+
+**بعد هذه المرحلة:** لديك دورة تطوير حيّة. حرّر أي ملف في `src/` وسيظهر في واجهة المستخدم.
+
+### مزامنة لمرة واحدة لـ CI والبرامج النصية
+
+مرّر `--once` لتشغيل عملية بناء واحدة + مزامنة واحدة ثم الخروج — نفس خط الأنابيب، من دون مراقِب:
+
+```bash filename="Terminal"
+yarn twenty dev --once
+```
+
+| أمر | السلوك | متى يُستخدم |
+| ---------------------------------- | ------------------------------------------------------------------- | --------------------------------------------------------------------------- |
+| `yarn twenty dev` | يراقب ويعيد المزامنة عند كل تغيير. يستمر في العمل حتى توقفه. | تطوير محلي تفاعلي. |
+| `yarn twenty dev --once` | بناء واحد + مزامنة واحدة، يخرج برمز `0` عند النجاح، و`1` عند الفشل. | CI، وخطافات ما قبل الالتزام، ووكلاء الذكاء الاصطناعي، وسير عمل مكتوب بنصوص. |
+| `yarn twenty dev --once --dry-run` | يبني تغييرات البيانات الوصفية ويطبعها **من دون تطبيقها**. | فحص ما الذي سيُغيِّره التزامن قبل تطبيقه. |
+
+كلا الوضعين يحتاجان إلى جهة بعيدة موثَّقة. راجع قسم [المزامنة والاستعادة](/l/ar/developers/extend/apps/operations/sync-and-recovery#previewing-changes-dry-run) للحصول على المزيد من المعلومات حول `--dry-run`.
+
+### خيارات وضع التطوير
+
+| خيار | الوصف |
+| ------------------------------------- | ------------------------------------------------------------------------------------- |
+| `--once` | قم بالإنشاء والمزامنة مرة واحدة، ثم اخرج. |
+| `--dry-run` | باستخدام `--once`، يمكنك معاينة تغييرات البيانات الوصفية دون تطبيقها. لا يكتب أي شيء. |
+| `--debounceMs \
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: '74c526eb-cb68-4cf7-b05c-0dd8c288d948',
+ name: 'hello-world',
+ description: 'A simple front component',
+ component: HelloWorld,
+});
+```
+
+```ts src/command-menu-items/hello-world.command-menu-item.ts
+import { defineCommandMenuItem } from 'twenty-sdk/define';
+
+export default defineCommandMenuItem({
+ universalIdentifier: 'd4e5f6a7-b8c9-0123-defa-456789012345',
+ shortLabel: 'Hello',
+ label: 'Hello World',
+ icon: 'IconBolt',
+ isPinned: true,
+ availabilityType: 'GLOBAL',
+ frontComponentUniversalIdentifier: '74c526eb-cb68-4cf7-b05c-0dd8c288d948',
+});
+```
+
+بعد المزامنة باستخدام `yarn twenty dev` (أو تشغيل الأمر لمرة واحدة `yarn twenty dev --once`)، يظهر الإجراء السريع في الزاوية العلوية اليمنى من الصفحة:
+
+Hello from my app!
+This component renders inside Twenty.
+
+ 
+
+
+انقره لعرض المكوّن مضمنًا داخل الصفحة.
+
+## حقول التكوين
+
+| الحقل | مطلوب | الوصف |
+| --------------------- | ----- | ------------------------------------------------------------- |
+| `universalIdentifier` | نعم | معرّف فريد ثابت لهذا المكوّن |
+| `component` | نعم | دالة مكوّن React |
+| `name` | لا | الاسم المعروض |
+| `description` | لا | وصف لما يفعله المكوّن |
+| `isHeadless` | لا | عيّنه على `true` إذا كان المكوّن بلا واجهة مرئية (انظر أدناه) |
+
+## وضع مكوّن أمامي على صفحة
+
+إضافةً إلى الأوامر، يمكنك تضمين مكوّن أمامي مباشرةً في صفحة سجل عبر إضافته كودجت في **تخطيط صفحة**. لمزيد من التفاصيل، راجع [تخطيطات الصفحات](/l/ar/developers/extend/apps/layout/page-layouts).
+
+## عديم الرأس مقابل غير عديم الرأس
+
+تأتي مكوّنات الواجهة الأمامية بوضعَي عرض يتحكّم بهما الخيار `isHeadless`:
+
+**غير عديم الرأس (افتراضي)** — يعرض المكوّن واجهة مستخدم مرئية. عند تشغيله من قائمة الأوامر يفتح في اللوحة الجانبية. هذا هو السلوك الافتراضي عندما تكون `isHeadless` تساوي `false` أو يتم تجاهلها.
+
+**عديم الرأس (`isHeadless: true`)** — يتم تركيب المكوّن بشكل غير مرئي في الخلفية. لا يفتح اللوحة الجانبية. تم تصميم المكوّنات عديمة الرأس لإجراءات تنفّذ منطقًا ثم تُزيل تركيبها ذاتيًا — على سبيل المثال، تشغيل مهمة غير متزامنة، أو الانتقال إلى صفحة، أو إظهار نافذة تأكيد منبثقة. تتوافق بشكل طبيعي مع مكوّنات Command في SDK الموصوفة أدناه.
+
+```tsx src/front-components/sync-tracker.tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { useRecordId, enqueueSnackbar } from 'twenty-sdk/front-component';
+import { useEffect } from 'react';
+
+const SyncTracker = () => {
+ const recordId = useRecordId();
+
+ useEffect(() => {
+ enqueueSnackbar({ message: `Tracking record ${recordId}`, variant: 'info' });
+ }, [recordId]);
+
+ return null;
+};
+
+export default defineFrontComponent({
+ universalIdentifier: '...',
+ name: 'sync-tracker',
+ description: 'Tracks record views silently',
+ isHeadless: true,
+ component: SyncTracker,
+});
+```
+
+نظرًا لأن المكوّن يُرجع `null`، فإن Twenty يتخطّى عرض حاوية له — ولن تظهر مساحة فارغة في التخطيط. لا يزال لدى المكوّن إمكانية الوصول إلى جميع الخطافات وواجهة برمجة الاتصال مع المضيف.
+
+## مكوّنات Command في SDK
+
+توفر حزمة `twenty-sdk` أربعة مكوّنات مساعدة من نوع Command مصممة للمكوّنات عديمة الرأس في الواجهة الأمامية. كل مكوّن ينفّذ إجراءً عند التركيب، ويتعامل مع الأخطاء بعرض إشعار Snackbar، ويزيل تركيب مكوّن الواجهة الأمامية تلقائيًا عند الانتهاء.
+
+استوردها من `twenty-sdk/command`:
+
+* **`Command`** — يشغّل رد نداء غير متزامن عبر الخاصية `execute`.
+* **`CommandLink`** — ينتقل إلى مسار في التطبيق. الخصائص: `to`، `params`، `queryParams`، `options`.
+* **`CommandModal`** — يفتح نافذة تأكيد منبثقة. إذا أكّد المستخدم، ينفّذ رد النداء `execute`. الخصائص: `title`، `subtitle`، `execute`، `confirmButtonText`، `confirmButtonAccent`.
+* **`CommandOpenSidePanelPage`** — يفتح صفحة محدّدة في اللوحة الجانبية. الخصائص: `page`، `pageTitle`، `pageIcon`.
+
+فيما يلي مثال كامل لمكوّن واجهة أمامية عديم الرأس يستخدم `Command` لتشغيل إجراء من قائمة الأوامر:
+
+```tsx src/front-components/run-action.tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { Command } from 'twenty-sdk/command';
+import { CoreApiClient } from 'twenty-sdk/clients';
+
+const RunAction = () => {
+ const execute = async () => {
+ const client = new CoreApiClient();
+
+ await client.mutation({
+ createTask: {
+ __args: { data: { title: 'Created by my app' } },
+ id: true,
+ },
+ });
+ };
+
+ return
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'b2c3d4e5-f6a7-8901-bcde-f23456789012',
+ name: 'record-info',
+ component: RecordInfo,
+});
+```
+
+الخطافات المتاحة:
+
+| الخطّاف | القيم المعادة | الوصف |
+| --------------------------------------------- | --------------------- | ---------------------------------------------------------------------- |
+| `useUserId()` | `string` أو `null` | معرّف المستخدم الحالي |
+| `useSelectedRecordIds()` | `string[]` | جميع معرّفات السجلات المحددة (مصفوفة فارغة إذا لم يتم تحديد أي منها) |
+| `useRecordId()` | `string` أو `null` | **مهمل.** استخدم `useSelectedRecordIds()` بدلاً من ذلك |
+| `useFrontComponentId()` | `string` | معرّف مثيل هذا المكوّن |
+| `useColorScheme()` | `'light'` أو `'dark'` | نظام الألوان النشط لواجهة المستخدم المضيفة (`System` تم تحديده بالفعل) |
+| `useFrontComponentExecutionContext(selector)` | يختلف | الوصول إلى سياق التنفيذ الكامل عبر دالة محدِّد |
+
+## متغيرات التطبيق
+
+متغيرات التطبيق المُعرَّفة في [`defineApplication()`](/l/ar/developers/extend/apps/config/application) مع `isSecret: false` تكون متاحة داخل مكوّنات الواجهة عبر أداة `getApplicationVariable`:
+
+```tsx src/front-components/greeting.tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { getApplicationVariable } from 'twenty-sdk/front-component';
+
+const Greeting = () => {
+ const recipientName = getApplicationVariable('DEFAULT_RECIPIENT_NAME') ?? 'World';
+
+ return User: {userId}
+Record: {recordId ?? 'No record context'}
+Component: {componentId}
+Hello, {recipientName}!
; +}; + +export default defineFrontComponent({ + universalIdentifier: '...', + name: 'greeting', + component: Greeting, +}); +``` + +
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'c9d0e1f2-a3b4-5678-cdef-789012345678',
+ name: 'archive-record',
+ description: 'Archives the current record',
+ component: ArchiveRecord,
+});
+```
+
+### العمل مع سجلات متعددة
+
+استخدم `useSelectedRecordIds()` لمعالجة عدة سجلات محددة. هذا مفيد للعمليات المجمّعة:
+
+```tsx src/front-components/bulk-export.tsx
+import { defineFrontComponent, numberOfSelectedRecords } from 'twenty-sdk/define';
+import { useSelectedRecordIds } from 'twenty-sdk/front-component';
+import { enqueueSnackbar, closeSidePanel } from 'twenty-sdk/front-component';
+import { CoreApiClient } from 'twenty-sdk/clients';
+
+const BulkExport = () => {
+ const selectedRecordIds = useSelectedRecordIds();
+
+ const handleExport = async () => {
+ const client = new CoreApiClient();
+
+ for (const recordId of selectedRecordIds) {
+ await client.mutation({
+ updateTask: {
+ __args: { id: recordId, data: { exported: true } },
+ id: true,
+ },
+ });
+ }
+
+ await enqueueSnackbar({
+ message: `Exported ${selectedRecordIds.length} records`,
+ variant: 'success',
+ });
+
+ await closeSidePanel();
+ };
+
+ return (
+ Archive this record?
+ +
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'd0e1f2a3-b4c5-6789-defa-012345678901',
+ name: 'bulk-export',
+ description: 'Export selected records',
+ component: BulkExport,
+ command: {
+ universalIdentifier: 'd0e1f2a3-b4c5-6789-defa-012345678902',
+ label: 'Bulk Export',
+ availabilityType: 'RECORD_SELECTION',
+ conditionalAvailabilityExpression: numberOfSelectedRecords > 0,
+ },
+});
+```
+
+## الأصول العامة
+
+يمكن للمكوّنات الأمامية الوصول إلى ملفات من دليل `public/` للتطبيق باستخدام `getPublicAssetUrl`:
+
+```tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { getPublicAssetUrl } from 'twenty-sdk/utils';
+
+const Logo = () => Export {selectedRecordIds.length} selected record(s)?
+ +})
;
+
+export default defineFrontComponent({
+ universalIdentifier: '...',
+ name: 'logo',
+ component: Logo,
+});
+```
+
+راجع [قسم الأصول العامة](/l/ar/developers/extend/apps/config/public-assets) للتفاصيل.
+
+## التنسيق
+
+تدعم المكوّنات الأمامية عدة أساليب للتنسيق. يمكنك استخدام:
+
+* **أنماط مضمنة** — `style={{ color: 'red' }}`
+* **مكوّنات Twenty لواجهة المستخدم** — استورد من `twenty-sdk/ui` (Button وTag وStatus وChip وAvatar وغيرها)
+* **Emotion** — CSS-in-JS مع `@emotion/react`
+* **Styled-components** — أنماط `styled.div`
+* **Tailwind CSS** — أصناف مساعدة
+* **أي مكتبة CSS-in-JS** متوافقة مع React
+
+```tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { Button, Tag, Status } from 'twenty-sdk/ui';
+
+const StyledWidget = () => {
+ return (
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'e5f6a7b8-c9d0-1234-efab-567890123456',
+ name: 'styled-widget',
+ component: StyledWidget,
+});
+```
diff --git a/packages/twenty-docs/l/ar/developers/extend/apps/layout/navigation-menu-items.mdx b/packages/twenty-docs/l/ar/developers/extend/apps/layout/navigation-menu-items.mdx
new file mode 100644
index 0000000000..43fe180a16
--- /dev/null
+++ b/packages/twenty-docs/l/ar/developers/extend/apps/layout/navigation-menu-items.mdx
@@ -0,0 +1,44 @@
+---
+title: عناصر قائمة التنقّل
+description: أضِف إدخالات مخصّصة إلى الشريط الجانبي لمساحة العمل — روابط إلى العروض المحفوظة أو عناوين URL خارجية.
+icon: bars
+---
+
+يُعَدّ **عنصر قائمة التنقّل** إدخالًا في الشريط الجانبي الأيسر. استخدم `defineNavigationMenuItem()` لتوفير روابط شريط جانبي مخصّصة — عادةً واحدًا لكل [عرض](/l/ar/developers/extend/apps/layout/views) توفّره — أو للإشارة إلى عناوين URL خارجية.
+
+```ts src/navigation-menu-items/example-navigation-menu-item.ts
+import { defineNavigationMenuItem, NavigationMenuItemType } from 'twenty-sdk/define';
+import { EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER } from '../views/example-view';
+
+export default defineNavigationMenuItem({
+ universalIdentifier: '9327db91-afa1-41b6-bd9d-2b51a26efb4c',
+ name: 'example-navigation-menu-item',
+ icon: 'IconList',
+ color: 'blue',
+ position: 0,
+ type: NavigationMenuItemType.VIEW,
+ viewUniversalIdentifier: EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER,
+});
+```
+
+## النقاط الرئيسية
+
+* يحدّد `type` ما الذي يرتبط به عنصر القائمة. كل نوع يقترن بحقل معرّف محدّد:
+
+ | النوع | ماذا يفعل | حقل مطلوب |
+ | ------------------------------------ | ------------------------------------- | -------------------------------------------------------------------------- |
+ | `NavigationMenuItemType.VIEW` | يفتح عرضًا محفوظًا | `viewUniversalIdentifier` |
+ | `NavigationMenuItemType.LINK` | يفتح عنوان URL خارجيًا | `link` |
+ | `NavigationMenuItemType.FOLDER` | يجمع العناصر المتداخلة تحت تسمية | `name` (وتشير العناصر الفرعية إلى المجلّد عبر `folderUniversalIdentifier`) |
+ | `NavigationMenuItemType.OBJECT` | يفتح صفحة الفهرس الافتراضية لكائنٍ ما | `targetObjectUniversalIdentifier` |
+ | `NavigationMenuItemType.PAGE_LAYOUT` | يفتح مخطّط صفحة مستقلًا | `pageLayoutUniversalIdentifier` |
+
+* `position` يتحكّم في الترتيب ضمن الشريط الجانبي.
+
+* `icon` و`color` اختياريان ويخصّصان مظهر الإدخال.
+
+* `folderUniversalIdentifier` متاح أيضًا على أي عنصر لوضعه متداخلًا داخل عنصر أب من النوع `FOLDER`.
+
+Hello
', { + status: 201, + headers: { 'content-type': 'text/html' }, + }); +}; +``` + +لأسباب أمنية، يتم تقييد ترويسات الاستجابة بقائمة مسموح بها. يتم إسقاط أي ترويسة ليست في القائمة (مثل `Set-Cookie`، وترويسات CORS مثل `Access-Control-Allow-Origin`، أو ترويسات `X-*` المخصصة) بصمت قبل إرسال الاستجابة. ترويسات الاستجابة المسموح بها هي: + +* `content-type` +* `content-language` +* `content-disposition` +* `cache-control` +* `retry-after` + +Today is {format(new Date(), 'MMMM do, yyyy')}
; +}; + +export default defineFrontComponent({ + universalIdentifier: '...', + name: 'date-widget', + component: DateWidget, +}); +``` + +### كيف يعمل التجميع + +تستخدم خطوة البناء أداة esbuild لإنتاج ملف واحد مستقل لكل دالة منطقية ولكل مكوّن أمامي. تُضمَّن جميع الحزم المستوردة داخل الحزمة. + +**الدوال المنطقية** تعمل في بيئة Node.js. الوحدات المدمجة في Node (`fs` و`path` و`crypto` و`http` وغيرها) متاحة ولا تحتاج إلى تثبيت. + +**المكوّنات الأمامية** تعمل ضمن Web Worker. وحدات Node المدمجة غير متاحة — المتاح فقط واجهات برمجة المتصفّح وحِزَم npm التي تعمل في بيئة المتصفّح. + +كلتا البيئتين تحتويان على `twenty-client-sdk/core` و`twenty-client-sdk/metadata` كوحدات متاحة مُسبقًا — لا تُضمَّن هذه ضمن الحزم بل تُحلّ وقت التشغيل بواسطة الخادم. + +## إعداد + +يتضمّن التطبيق المُولَّد بالقالب بالفعل Vitest. إذا أعددته يدويًا، فثبّت التبعيات: + +```bash filename="Terminal" +yarn add -D vitest vite-tsconfig-paths +``` + +أنشئ `vitest.config.ts` في جذر تطبيقك: + +```ts vitest.config.ts +import tsconfigPaths from 'vite-tsconfig-paths'; +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + plugins: [ + tsconfigPaths({ + projects: ['tsconfig.spec.json'], + ignoreConfigErrors: true, + }), + ], + test: { + testTimeout: 120_000, + hookTimeout: 120_000, + include: ['src/**/*.integration-test.ts'], + setupFiles: ['src/__tests__/setup-test.ts'], + env: { + TWENTY_API_URL: 'http://localhost:2020', + TWENTY_API_KEY: 'your-api-key', + }, + }, +}); +``` + +أنشئ ملف إعداد يتحقّق من إمكانية الوصول إلى الخادم قبل تشغيل الاختبارات: + +```ts src/__tests__/setup-test.ts +import * as fs from 'fs'; +import * as os from 'os'; +import * as path from 'path'; +import { beforeAll } from 'vitest'; + +const TWENTY_API_URL = process.env.TWENTY_API_URL ?? 'http://localhost:2020'; +const TEST_CONFIG_DIR = path.join(os.tmpdir(), '.twenty-sdk-test'); + +beforeAll(async () => { + // Verify the server is running + const response = await fetch(`${TWENTY_API_URL}/healthz`); + + if (!response.ok) { + throw new Error( + `Twenty server is not reachable at ${TWENTY_API_URL}. ` + + 'Start the server before running integration tests.', + ); + } + + // Write a temporary config for the SDK + fs.mkdirSync(TEST_CONFIG_DIR, { recursive: true }); + + fs.writeFileSync( + path.join(TEST_CONFIG_DIR, 'config.json'), + JSON.stringify({ + remotes: { + local: { + apiUrl: process.env.TWENTY_API_URL, + apiKey: process.env.TWENTY_API_KEY, + }, + }, + defaultRemote: 'local', + }, null, 2), + ); +}); +``` + +## واجهات SDK البرمجية + +يُصدِّر المسار الفرعي `twenty-sdk/cli` دوالًا يمكنك استدعاؤها مباشرةً من شيفرة الاختبار: + +| دالة | الوصف | +| -------------- | ----------------------------------------- | +| `appBuild` | بناء التطبيق واختياريًا حزم ملف tarball | +| `appDeploy` | رفع ملف tarball إلى الخادم | +| `appInstall` | تثبيت التطبيق على مساحة العمل النشطة | +| `appUninstall` | إلغاء تثبيت التطبيق من مساحة العمل النشطة | + +تُرجع كل دالة كائن نتيجة يحتوي على `success: boolean` وعلى إمّا `data` أو `error`. + +## كتابة اختبار تكامل + +إليك مثالًا كاملًا يبني التطبيق وينشره ويثبّته، ثم يتحقّق من ظهوره في مساحة العمل: + +```ts src/__tests__/app-install.integration-test.ts +import { APPLICATION_UNIVERSAL_IDENTIFIER } from 'src/application-config'; +import { appBuild, appDeploy, appInstall, appUninstall } from 'twenty-sdk/cli'; +import { MetadataApiClient } from 'twenty-client-sdk/metadata'; +import { afterAll, beforeAll, describe, expect, it } from 'vitest'; + +const APP_PATH = process.cwd(); + +describe('App installation', () => { + beforeAll(async () => { + const buildResult = await appBuild({ + appPath: APP_PATH, + tarball: true, + onProgress: (message: string) => console.log(`[build] ${message}`), + }); + + if (!buildResult.success) { + throw new Error(`Build failed: ${buildResult.error?.message}`); + } + + const deployResult = await appDeploy({ + tarballPath: buildResult.data.tarballPath!, + onProgress: (message: string) => console.log(`[deploy] ${message}`), + }); + + if (!deployResult.success) { + throw new Error(`Deploy failed: ${deployResult.error?.message}`); + } + + const installResult = await appInstall({ appPath: APP_PATH }); + + if (!installResult.success) { + throw new Error(`Install failed: ${installResult.error?.message}`); + } + }); + + afterAll(async () => { + await appUninstall({ appPath: APP_PATH }); + }); + + it('should find the installed app in the workspace', async () => { + const metadataClient = new MetadataApiClient(); + + const result = await metadataClient.query({ + findManyApplications: { + id: true, + name: true, + universalIdentifier: true, + }, + }); + + const installedApp = result.findManyApplications.find( + (app: { universalIdentifier: string }) => + app.universalIdentifier === APPLICATION_UNIVERSAL_IDENTIFIER, + ); + + expect(installedApp).toBeDefined(); + }); +}); +``` + +## تشغيل الاختبارات + +تأكّد من تشغيل خادم Twenty المحلي لديك، ثم: + +```bash filename="Terminal" +yarn test +``` + +أو في وضع المراقبة أثناء التطوير: + +```bash filename="Terminal" +yarn test:watch +``` + +## التحقق من الأنواع + +يمكنك أيضًا تشغيل التحقق من الأنواع على تطبيقك دون تشغيل الاختبارات: + +```bash filename="Terminal" +yarn twenty dev:typecheck +``` + +يشغِّل هذا الأمر `tsc --noEmit` ويبلغ عن أي أخطاء في الأنواع. + +## التكامل المستمر (CI) باستخدام GitHub Actions + +تولّد أداة إنشاء الهيكل سير عمل GitHub Actions جاهزًا للاستخدام في `.github/workflows/ci.yml`. يشغّل اختبارات التكامل لديك تلقائيًا عند كل دفع إلى `main` وعلى طلبات السحب. + +سير العمل: + +1. يجلب الشيفرة الخاصة بك +2. يشغّل خادم Twenty مؤقتًا باستخدام الإجراء `twentyhq/twenty/.github/actions/spawn-twenty-docker-image` +3. يثبّت التبعيات باستخدام `yarn install --immutable` +4. يشغّل `yarn test` مع حقن `TWENTY_API_URL` و`TWENTY_API_KEY` من مخرجات الإجراء + +```yaml .github/workflows/ci.yml +name: CI + +on: + push: + branches: + - main + pull_request: {} + +env: + TWENTY_VERSION: latest + +jobs: + test: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Spawn Twenty instance + id: twenty + uses: twentyhq/twenty/.github/actions/spawn-twenty-docker-image@main + with: + twenty-version: ${{ env.TWENTY_VERSION }} + github-token: ${{ secrets.GITHUB_TOKEN }} + + - name: Enable Corepack + run: corepack enable + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version-file: '.nvmrc' + cache: 'yarn' + + - name: Install dependencies + run: yarn install --immutable + + - name: Run integration tests + run: yarn test + env: + TWENTY_API_URL: ${{ steps.twenty.outputs.server-url }} + TWENTY_API_KEY: ${{ steps.twenty.outputs.access-token }} +``` + +لا تحتاج إلى تهيئة أي أسرار — إذ يبدأ إجراء `spawn-twenty-docker-image` خادم Twenty عابرًا مباشرة في المشغّل ويُخرِج تفاصيل الاتصال. يتم توفير السر `GITHUB_TOKEN` تلقائيًا من قِبل GitHub. + +لتثبيت إصدار محدّد من Twenty بدلًا من `latest`، غيّر متغير البيئة `TWENTY_VERSION` في أعلى سير العمل. diff --git a/packages/twenty-docs/l/ar/developers/extend/capabilities/apis.mdx b/packages/twenty-docs/l/ar/developers/extend/capabilities/apis.mdx index 6039d0e7f5..fb54564d1d 100644 --- a/packages/twenty-docs/l/ar/developers/extend/capabilities/apis.mdx +++ b/packages/twenty-docs/l/ar/developers/extend/capabilities/apis.mdx @@ -88,7 +88,7 @@ Authorization: Bearer YOUR_API_KEY لتحسين الأمان، عيّن دوراً محدداً لتقييد الوصول: -1. اذهب إلى **الإعدادات → الأدوار** +1. انتقل إلى **الإعدادات → الأعضاء → الأدوار** 2. انقر على الدور الذي ترغب في تعيينه 3. افتح علامة التبويب **التعيين** 4. ضمن **مفاتيح API**، انقر على **+ تعيين إلى مفتاح API** diff --git a/packages/twenty-docs/l/ar/developers/self-host/capabilities/docker-compose.mdx b/packages/twenty-docs/l/ar/developers/self-host/capabilities/docker-compose.mdx index 3d8c0eb0ad..741c332483 100644 --- a/packages/twenty-docs/l/ar/developers/self-host/capabilities/docker-compose.mdx +++ b/packages/twenty-docs/l/ar/developers/self-host/capabilities/docker-compose.mdx @@ -51,7 +51,7 @@ VERSION=vx.y.z BRANCH=branch-name bash <(curl -sL https://raw.githubusercontent. curl -o .env https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-docker/.env.example ``` -2. **إنشاء رموز سرية** +2. **إنشاء مفتاح تشفير** قم بتشغيل الأمر التالي لإنشاء سلسلة عشوائية فريدة: @@ -59,16 +59,18 @@ VERSION=vx.y.z BRANCH=branch-name bash <(curl -sL https://raw.githubusercontent. openssl rand -base64 32 ``` - **مهم:** احتفظ بهذه القيمة سرية ولا تشاركها. + **مهم:** احتفظ بهذه القيمة سرية ولا تشاركها. فقدان `ENCRYPTION_KEY` يعني فقدان الوصول إلى كل سر مخزَّن في قاعدة البيانات (رموز OAuth، متغيرات التطبيق، أسرار TOTP، إلخ). 3. **تحديث الـ `.env`** استبدل قيمة النائب في ملف .env بالقيمة الرمزية المولدة: ```ini - APP_SECRET=first_random_string + ENCRYPTION_KEY=random_string ``` + راجع [دليل تدوير المفاتيح](/l/ar/developers/self-host/capabilities/key-rotation) للحصول على إرشادات حول تدويره بدون توقّف عن العمل. + 4. **تعيين كلمة مرور PostgreSQL** قم بتحديث قيمة `PG_DATABASE_PASSWORD` في ملف .env باستخدام كلمة مرور قوية بدون أحرف خاصة. diff --git a/packages/twenty-docs/l/ar/developers/self-host/capabilities/key-rotation.mdx b/packages/twenty-docs/l/ar/developers/self-host/capabilities/key-rotation.mdx new file mode 100644 index 0000000000..486bd0d241 --- /dev/null +++ b/packages/twenty-docs/l/ar/developers/self-host/capabilities/key-rotation.mdx @@ -0,0 +1,60 @@ +--- +title: تدوير المفاتيح +icon: rotate +--- + +يمتلك Twenty عائلتين مستقلتين من المفاتيح: + +* **مفاتيح توقيع JWT** — أزواج مفاتيح غير متماثلة ES256 (مع علامة `kid`) مُخزَّنة في `core."signingKey"`، تُستخدم لتوقيع والتحقق من رموز الوصول / التحديث. +* **مفتاح التشفير أثناء السكون (At-rest encryption key)** — `ENCRYPTION_KEY`، يُستخدم لتشفير رموز OAuth، ومتغيرات التطبيق، ومفاتيح التوقيع الخاصة، وقيم الإعدادات الحساسة، وأسرار TOTP داخل غلاف `enc:v2:`. + +يُعد `APP_SECRET` سراً قديماً مُحتفَظاً به لأغراض التوافق مع الإصدارات السابقة: عندما لا يكون `ENCRYPTION_KEY` مضبوطاً، فإنه يعمل كحل احتياطي لمفتاح التشفير أثناء السكون / ملفات تعريف الارتباط للجلسة، ولا يزال يتحقق من رموز الوصول HS256 الموجودة مسبقاً. سيتم إهماله (إيقاف دعمه). + +## مفاتيح توقيع JWT + +يحمل كل مفتاح قيمة `publicKey` (يُحتفَظ بها إلى أجل غير مسمى حتى يمكنها التحقق من الرموز المصدرة مسبقاً)، و`privateKey` مُشفَّراً (يُستخدم فقط أثناء كون المفتاح حالياً)، وراية `isCurrent` (صف واحد فقط في كل وقت)، وحقل `revokedAt` اختياري. + +### تدوير المفتاح الحالي + +اضبط `SIGNING_KEY_ROTATION_DAYS` للتفعيل: عندها تصدر مهمة cron يومية مفتاحًا حاليًا جديدًا بمجرد أن يصبح المفتاح القائم أقدم من تلك العتبة. لا يتم إبطال المفاتيح السابقة، لذلك تستمر الرموز الموقعة تحتها في التحقق. اترك المتغير غير معيّن لتعطيل التدوير التلقائي. + +
-4A4F33452D 44445245332A2E2F454A46 28452F 482532274429 35483129.
+Allows users to upload and remove an image.
+
-2. Click **Get Enterprise Key**
-3. When you are redirected to Stripe, enter your payment details and confirm
-4. When your Enterprise key is displayed, paste it into the Enterprise settings page and activate the Organization license
+2. انقر **احصل على مفتاح Enterprise**
+3. عند إعادة توجيهك إلى Stripe، أدخل تفاصيل الدفع الخاصة بك وأكّد
+4. عند عرض مفتاح Enterprise الخاص بك، الصقه في صفحة إعدادات Enterprise وقم بتفعيل ترخيص Organization
diff --git a/packages/twenty-docs/l/ar/user-guide/calendar-emails/overview.mdx b/packages/twenty-docs/l/ar/user-guide/calendar-emails/overview.mdx
index cf2f7015c6..d6a9d4abda 100644
--- a/packages/twenty-docs/l/ar/user-guide/calendar-emails/overview.mdx
+++ b/packages/twenty-docs/l/ar/user-guide/calendar-emails/overview.mdx
@@ -25,15 +25,25 @@ description: Connect your email and calendar accounts to Twenty.
6. Configure calendar sync settings (visibility, auto-creation) → click **Add Account**
7. ستبدأ رسائل البريد الإلكتروني وفعاليات التقويم بالمزامنة تلقائيًا
-### إعداد SMTP/CalDAV (مزودون آخرون)
+### إعداد IMAP/SMTP/CalDAV (مزودون آخرون)
بالنسبة لمزودي البريد الإلكتروني والتقويم الآخرين:
1. اذهب إلى **الإعدادات → الحسابات**
-2. قم بتكوين إعدادات SMTP للبريد الإلكتروني
+2. قم بتهيئة إعدادات IMAP لمزامنة رسائل البريد الإلكتروني الواردة وإعدادات SMTP لإرسال البريد الإلكتروني
3. قم بتكوين إعدادات CalDAV للتقويم
4. اختبر الاتصال
+
+
+
+
+Jakmile server běží, otevře se prohlížeč pro přihlášení. Použijte předpřipravený demo účet:
+
+* **E-mail:** `tim@apple.dev`
+* **Heslo:** `tim@apple.dev`
+
+
+
+
+
+
+Na další obrazovce klikněte na **Authorize** — tím udělíte nástroji CLI přístup k vašemu pracovnímu prostoru.
+
+
+
+
+
+
+Váš terminál potvrdí, že je vše nastaveno.
+
+
+
+
+
+
+**Po této fázi:** máte spuštěný server Twenty na [http://localhost:2020](http://localhost:2020) a vaše CLI má oprávnění se k němu synchronizovat.
+
+
+
+
+
+
+Otevřete [http://localhost:2020/settings/applications#developer](http://localhost:2020/settings/applications#developer). Vaše aplikace by měla být uvedena v části **Your Apps**.
+
+
+
+
+
+
+Klikněte na **My twenty app** a zobrazí se jeho **registrace aplikace** — záznam na úrovni serveru, který popisuje vaši aplikaci (název, identifikátor, přihlašovací údaje OAuth, zdroj). Jedna registrace může být nainstalována ve více pracovních prostorech na stejném serveru.
+
+
+
+
+
+
+Klikněte na **View installed app**, abyste zobrazili instalaci v pracovním prostoru. Karta **About** zobrazuje verzi a možnosti správy.
+
+
+
+
+
+
+**Po této fázi:** máte průběžný vývojový cyklus. Upravte libovolný soubor v `src/` a projeví se to v UI.
+
+### Jednorázová synchronizace pro CI a skripty
+
+Předejte `--once` pro provedení jednoho sestavení + synchronizace a ukončení — stejný postup, bez sledování změn:
+
+```bash filename="Terminal"
+yarn twenty dev --once
+```
+
+| Příkaz | Chování | Kdy použít |
+| ---------------------------------- | ---------------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
+| `yarn twenty dev` | Sleduje změny a při každé změně znovu synchronizuje. Běží, dokud jej nezastavíte. | Interaktivní lokální vývoj. |
+| `yarn twenty dev --once` | Jedno sestavení + synchronizace, ukončí se s kódem `0` při úspěchu, `1` při chybě. | CI, pre-commit hooky, AI agenti, skriptované pracovní postupy. |
+| `yarn twenty dev --once --dry-run` | Sestaví a vypíše změny metadat **bez jejich použití**. | Kontrola toho, co by synchronizace změnila, ještě před jejím potvrzením. |
+
+Oba režimy vyžadují autentizovaný vzdálený server. Více informací o `--dry-run` najdete v části [Synchronizace a obnovení](/l/cs/developers/extend/apps/operations/sync-and-recovery#previewing-changes-dry-run).
+
+### Možnosti vývojového režimu
+
+| Přepínač | Popis |
+| ------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `--once` | Jednou sestavit a synchronizovat, poté ukončit. |
+| `--dry-run` | Pomocí `--once` zobrazíte náhled změn metadat, aniž byste je použili. Nic nezapisuje. |
+| `--debounceMs \
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: '74c526eb-cb68-4cf7-b05c-0dd8c288d948',
+ name: 'hello-world',
+ description: 'A simple front component',
+ component: HelloWorld,
+});
+```
+
+```ts src/command-menu-items/hello-world.command-menu-item.ts
+import { defineCommandMenuItem } from 'twenty-sdk/define';
+
+export default defineCommandMenuItem({
+ universalIdentifier: 'd4e5f6a7-b8c9-0123-defa-456789012345',
+ shortLabel: 'Hello',
+ label: 'Hello World',
+ icon: 'IconBolt',
+ isPinned: true,
+ availabilityType: 'GLOBAL',
+ frontComponentUniversalIdentifier: '74c526eb-cb68-4cf7-b05c-0dd8c288d948',
+});
+```
+
+Po synchronizaci pomocí `yarn twenty dev` (nebo po jednorázovém spuštění `yarn twenty dev --once`) se rychlá akce zobrazí v pravém horním rohu stránky:
+
+Hello from my app!
+This component renders inside Twenty.
+
+
+
+
+Kliknutím na něj vykreslíte komponentu přímo ve stránce.
+
+## Konfigurační pole
+
+| Pole | Povinné | Popis |
+| --------------------- | ------- | ----------------------------------------------------------------- |
+| `universalIdentifier` | Ano | Stabilní jedinečné ID pro tuto komponentu |
+| `component` | Ano | Funkce komponenty React |
+| `name` | Ne | Zobrazovaný název |
+| `description` | Ne | Popis toho, co komponenta dělá |
+| `isHeadless` | Ne | Nastavte na `true`, pokud komponenta nemá viditelné UI (viz níže) |
+
+## Umístění frontendové komponenty na stránku
+
+Mimo příkazy můžete frontendovou komponentu vložit přímo na stránku záznamu přidáním jako widget v **rozvržení stránky**. Podrobnosti viz [Rozložení stránek](/l/cs/developers/extend/apps/layout/page-layouts).
+
+## Headless vs. ne-headless
+
+Front-endové komponenty existují ve dvou režimech vykreslování řízených volbou `isHeadless`:
+
+**Ne-headless (výchozí)** — Komponenta vykreslí viditelné uživatelské rozhraní. Po vyvolání z menu příkazů se otevře v postranním panelu. Toto je výchozí chování, když je `isHeadless` `false` nebo když tato volba není uvedena.
+
+**Headless (`isHeadless: true`)** — Komponenta se neviditelně inicializuje na pozadí. Neotevírá postranní panel. Headless komponenty jsou určené pro akce, které provedou logiku a poté se odpojí — například spuštění asynchronního úkolu, navigaci na stránku nebo zobrazení potvrzovacího modálního okna. Přirozeně se hodí ke komponentám SDK Command popsaným níže.
+
+```tsx src/front-components/sync-tracker.tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { useRecordId, enqueueSnackbar } from 'twenty-sdk/front-component';
+import { useEffect } from 'react';
+
+const SyncTracker = () => {
+ const recordId = useRecordId();
+
+ useEffect(() => {
+ enqueueSnackbar({ message: `Tracking record ${recordId}`, variant: 'info' });
+ }, [recordId]);
+
+ return null;
+};
+
+export default defineFrontComponent({
+ universalIdentifier: '...',
+ name: 'sync-tracker',
+ description: 'Tracks record views silently',
+ isHeadless: true,
+ component: SyncTracker,
+});
+```
+
+Protože komponenta vrací `null`, Twenty přeskočí vykreslení kontejneru — v rozvržení se neobjeví žádné prázdné místo. Komponenta má však stále přístup ke všem hookům a API komunikace s hostitelem.
+
+## Komponenty SDK Command
+
+Balíček `twenty-sdk` poskytuje čtyři pomocné komponenty Command navržené pro headless front-endové komponenty. Každá komponenta při připojení provede akci, chyby zpracuje zobrazením oznámení ve snackbaru a po dokončení automaticky odpojí front-endovou komponentu.
+
+Importujte je z `twenty-sdk/command`:
+
+* **`Command`** — Spustí asynchronní callback přes prop `execute`.
+* **`CommandLink`** — Naviguje na cestu v aplikaci. Props: `to`, `params`, `queryParams`, `options`.
+* **`CommandModal`** — Otevře potvrzovací modální okno. Pokud uživatel potvrdí, provede callback `execute`. Props: `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
+* **`CommandOpenSidePanelPage`** — Otevře konkrétní stránku postranního panelu. Props: `page`, `pageTitle`, `pageIcon`.
+
+Zde je kompletní příklad headless front-endové komponenty, která pomocí `Command` spouští akci z menu příkazů:
+
+```tsx src/front-components/run-action.tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { Command } from 'twenty-sdk/command';
+import { CoreApiClient } from 'twenty-sdk/clients';
+
+const RunAction = () => {
+ const execute = async () => {
+ const client = new CoreApiClient();
+
+ await client.mutation({
+ createTask: {
+ __args: { data: { title: 'Created by my app' } },
+ id: true,
+ },
+ });
+ };
+
+ return
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'b2c3d4e5-f6a7-8901-bcde-f23456789012',
+ name: 'record-info',
+ component: RecordInfo,
+});
+```
+
+Dostupné hooky:
+
+| Hook | Vrací | Popis |
+| --------------------------------------------- | ----------------------- | ------------------------------------------------------------------------------------ |
+| `useUserId()` | `string` nebo `null` | ID aktuálního uživatele |
+| `useSelectedRecordIds()` | `string[]` | Všechna vybraná ID záznamů (prázdné pole, pokud není nic vybráno) |
+| `useRecordId()` | `string` nebo `null` | **Zastaralé.** Použijte místo toho `useSelectedRecordIds()` |
+| `useFrontComponentId()` | `string` | ID této instance komponenty |
+| `useColorScheme()` | `'light'` nebo `'dark'` | Aktivní barevné schéma uživatelského rozhraní hostitele (`System` je již vyhodnocen) |
+| `useFrontComponentExecutionContext(selector)` | různé | Přístup k úplnému kontextu běhu pomocí selektorové funkce |
+
+## Aplikační proměnné
+
+Aplikační proměnné definované v [`defineApplication()`](/l/cs/developers/extend/apps/config/application) s `isSecret: false` jsou k dispozici ve front-endových komponentách prostřednictvím pomocné funkce `getApplicationVariable`:
+
+```tsx src/front-components/greeting.tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { getApplicationVariable } from 'twenty-sdk/front-component';
+
+const Greeting = () => {
+ const recipientName = getApplicationVariable('DEFAULT_RECIPIENT_NAME') ?? 'World';
+
+ return User: {userId}
+Record: {recordId ?? 'No record context'}
+Component: {componentId}
+Hello, {recipientName}!
; +}; + +export default defineFrontComponent({ + universalIdentifier: '...', + name: 'greeting', + component: Greeting, +}); +``` + +
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'c9d0e1f2-a3b4-5678-cdef-789012345678',
+ name: 'archive-record',
+ description: 'Archives the current record',
+ component: ArchiveRecord,
+});
+```
+
+### Práce s více záznamy
+
+Použijte `useSelectedRecordIds()` pro zpracování více vybraných záznamů. To je užitečné pro hromadné operace:
+
+```tsx src/front-components/bulk-export.tsx
+import { defineFrontComponent, numberOfSelectedRecords } from 'twenty-sdk/define';
+import { useSelectedRecordIds } from 'twenty-sdk/front-component';
+import { enqueueSnackbar, closeSidePanel } from 'twenty-sdk/front-component';
+import { CoreApiClient } from 'twenty-sdk/clients';
+
+const BulkExport = () => {
+ const selectedRecordIds = useSelectedRecordIds();
+
+ const handleExport = async () => {
+ const client = new CoreApiClient();
+
+ for (const recordId of selectedRecordIds) {
+ await client.mutation({
+ updateTask: {
+ __args: { id: recordId, data: { exported: true } },
+ id: true,
+ },
+ });
+ }
+
+ await enqueueSnackbar({
+ message: `Exported ${selectedRecordIds.length} records`,
+ variant: 'success',
+ });
+
+ await closeSidePanel();
+ };
+
+ return (
+ Archive this record?
+ +
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'd0e1f2a3-b4c5-6789-defa-012345678901',
+ name: 'bulk-export',
+ description: 'Export selected records',
+ component: BulkExport,
+ command: {
+ universalIdentifier: 'd0e1f2a3-b4c5-6789-defa-012345678902',
+ label: 'Bulk Export',
+ availabilityType: 'RECORD_SELECTION',
+ conditionalAvailabilityExpression: numberOfSelectedRecords > 0,
+ },
+});
+```
+
+## Veřejné soubory
+
+Frontendové komponenty mohou přistupovat k souborům ze složky aplikace `public/` pomocí `getPublicAssetUrl`:
+
+```tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { getPublicAssetUrl } from 'twenty-sdk/utils';
+
+const Logo = () => Export {selectedRecordIds.length} selected record(s)?
+ +;
+
+export default defineFrontComponent({
+ universalIdentifier: '...',
+ name: 'logo',
+ component: Logo,
+});
+```
+
+Podrobnosti viz [sekci veřejných souborů](/l/cs/developers/extend/apps/config/public-assets).
+
+## Stylování
+
+Frontendové komponenty podporují více přístupů ke stylování. Můžete použít:
+
+* **Inline styly** — `style={{ color: 'red' }}`
+* **Komponenty Twenty UI** — import z `twenty-sdk/ui` (Button, Tag, Status, Chip, Avatar a další)
+* **Emotion** — CSS-in-JS s `@emotion/react`
+* **Styled-components** — vzory `styled.div`
+* **Tailwind CSS** — utilitní třídy
+* **Jakákoli CSS-in-JS knihovna** kompatibilní s Reactem
+
+```tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { Button, Tag, Status } from 'twenty-sdk/ui';
+
+const StyledWidget = () => {
+ return (
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'e5f6a7b8-c9d0-1234-efab-567890123456',
+ name: 'styled-widget',
+ component: StyledWidget,
+});
+```
diff --git a/packages/twenty-docs/l/cs/developers/extend/apps/layout/navigation-menu-items.mdx b/packages/twenty-docs/l/cs/developers/extend/apps/layout/navigation-menu-items.mdx
new file mode 100644
index 0000000000..13e713a105
--- /dev/null
+++ b/packages/twenty-docs/l/cs/developers/extend/apps/layout/navigation-menu-items.mdx
@@ -0,0 +1,44 @@
+---
+title: Položky navigační nabídky
+description: Přidejte vlastní položky do postranního panelu pracovního prostoru — odkazy na uložená zobrazení nebo externí adresy URL.
+icon: bars
+---
+
+**Položka navigační nabídky** je položka v levém postranním panelu. Použijte `defineNavigationMenuItem()` k přidání vlastních odkazů do postranního panelu — obvykle jeden pro každé [zobrazení](/l/cs/developers/extend/apps/layout/views), které dodáváte — nebo pro odkaz na externí adresy URL.
+
+```ts src/navigation-menu-items/example-navigation-menu-item.ts
+import { defineNavigationMenuItem, NavigationMenuItemType } from 'twenty-sdk/define';
+import { EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER } from '../views/example-view';
+
+export default defineNavigationMenuItem({
+ universalIdentifier: '9327db91-afa1-41b6-bd9d-2b51a26efb4c',
+ name: 'example-navigation-menu-item',
+ icon: 'IconList',
+ color: 'blue',
+ position: 0,
+ type: NavigationMenuItemType.VIEW,
+ viewUniversalIdentifier: EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER,
+});
+```
+
+## Hlavní body
+
+* `type` určuje, na co položka nabídky odkazuje. Každý typ je spárován s konkrétním identifikačním polem:
+
+ | Typ | K čemu slouží | Povinné pole |
+ | ------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------------------------- |
+ | `NavigationMenuItemType.VIEW` | Otevře uložené zobrazení | `viewUniversalIdentifier` |
+ | `NavigationMenuItemType.LINK` | Otevře externí adresu URL | `link` |
+ | `NavigationMenuItemType.FOLDER` | Seskupuje vnořené položky pod štítkem | `name` (a podřízené položky odkazují na složku prostřednictvím `folderUniversalIdentifier`) |
+ | `NavigationMenuItemType.OBJECT` | Otevře výchozí indexovou stránku objektu | `targetObjectUniversalIdentifier` |
+ | `NavigationMenuItemType.PAGE_LAYOUT` | Otevře samostatné rozvržení stránky | `pageLayoutUniversalIdentifier` |
+
+* `position` určuje pořadí v postranním panelu.
+
+* `icon` a `color` jsou volitelné a upravují, jak položka vypadá.
+
+* `folderUniversalIdentifier` je k dispozici také na libovolné položce, aby ji bylo možné vložit do nadřazené položky typu `FOLDER`.
+
+Hello
', { + status: 201, + headers: { 'content-type': 'text/html' }, + }); +}; +``` + +Z bezpečnostních důvodů jsou hlavičky odpovědi omezeny na seznam povolených položek. Jakákoli hlavička, která není na seznamu (např. `Set-Cookie`, CORS hlavičky jako `Access-Control-Allow-Origin` nebo vlastní hlavičky `X-*`), je tiše zahozena před odesláním odpovědi. Povolené hlavičky odpovědi jsou: + +* `content-type` +* `content-language` +* `content-disposition` +* `cache-control` +* `retry-after` + +Today is {format(new Date(), 'MMMM do, yyyy')}
; +}; + +export default defineFrontComponent({ + universalIdentifier: '...', + name: 'date-widget', + component: DateWidget, +}); +``` + +### Jak funguje bundlování + +Krok sestavení používá esbuild k vytvoření jediného samostatného souboru pro každou logickou funkci a každou frontendovou komponentu. Všechny importované balíčky jsou vloženy přímo do bundlu. + +**Logické funkce** běží v prostředí Node.js. Vestavěné moduly Node (`fs`, `path`, `crypto`, `http` atd.) jsou k dispozici a není je třeba instalovat. + +**Frontendové komponenty** běží ve Web Workeru. Vestavěné moduly Node nejsou k dispozici — pouze prohlížečová API a balíčky npm, které fungují v prohlížečovém prostředí. + +V obou prostředích jsou jako předpřipravené moduly k dispozici `twenty-client-sdk/core` a `twenty-client-sdk/metadata` — nejsou součástí bundlu, ale server je za běhu načítá. + +## Nastavení + +Vygenerovaná aplikace již obsahuje Vitest. Pokud to nastavujete ručně, nainstalujte závislosti: + +```bash filename="Terminal" +yarn add -D vitest vite-tsconfig-paths +``` + +Vytvořte `vitest.config.ts` v kořeni vaší aplikace: + +```ts vitest.config.ts +import tsconfigPaths from 'vite-tsconfig-paths'; +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + plugins: [ + tsconfigPaths({ + projects: ['tsconfig.spec.json'], + ignoreConfigErrors: true, + }), + ], + test: { + testTimeout: 120_000, + hookTimeout: 120_000, + include: ['src/**/*.integration-test.ts'], + setupFiles: ['src/__tests__/setup-test.ts'], + env: { + TWENTY_API_URL: 'http://localhost:2020', + TWENTY_API_KEY: 'your-api-key', + }, + }, +}); +``` + +Vytvořte soubor nastavení, který před spuštěním testů ověří dostupnost serveru: + +```ts src/__tests__/setup-test.ts +import * as fs from 'fs'; +import * as os from 'os'; +import * as path from 'path'; +import { beforeAll } from 'vitest'; + +const TWENTY_API_URL = process.env.TWENTY_API_URL ?? 'http://localhost:2020'; +const TEST_CONFIG_DIR = path.join(os.tmpdir(), '.twenty-sdk-test'); + +beforeAll(async () => { + // Verify the server is running + const response = await fetch(`${TWENTY_API_URL}/healthz`); + + if (!response.ok) { + throw new Error( + `Twenty server is not reachable at ${TWENTY_API_URL}. ` + + 'Start the server before running integration tests.', + ); + } + + // Write a temporary config for the SDK + fs.mkdirSync(TEST_CONFIG_DIR, { recursive: true }); + + fs.writeFileSync( + path.join(TEST_CONFIG_DIR, 'config.json'), + JSON.stringify({ + remotes: { + local: { + apiUrl: process.env.TWENTY_API_URL, + apiKey: process.env.TWENTY_API_KEY, + }, + }, + defaultRemote: 'local', + }, null, 2), + ); +}); +``` + +## Programová rozhraní SDK + +Subcesta `twenty-sdk/cli` exportuje funkce, které můžete volat přímo z testovacího kódu: + +| Funkce | Popis | +| -------------- | ----------------------------------------------------- | +| `appBuild` | Sestaví aplikaci a volitelně zabalí tarball | +| `appDeploy` | Nahraje tarball na server | +| `appInstall` | Nainstaluje aplikaci do aktivního pracovního prostoru | +| `appUninstall` | Odinstaluje aplikaci z aktivního pracovního prostoru | + +Každá funkce vrací objekt výsledku se `success: boolean` a buď `data`, nebo `error`. + +## Psání integračního testu + +Zde je kompletní příklad, který aplikaci sestaví, nasadí a nainstaluje a poté ověří, že se objeví v pracovním prostoru: + +```ts src/__tests__/app-install.integration-test.ts +import { APPLICATION_UNIVERSAL_IDENTIFIER } from 'src/application-config'; +import { appBuild, appDeploy, appInstall, appUninstall } from 'twenty-sdk/cli'; +import { MetadataApiClient } from 'twenty-client-sdk/metadata'; +import { afterAll, beforeAll, describe, expect, it } from 'vitest'; + +const APP_PATH = process.cwd(); + +describe('App installation', () => { + beforeAll(async () => { + const buildResult = await appBuild({ + appPath: APP_PATH, + tarball: true, + onProgress: (message: string) => console.log(`[build] ${message}`), + }); + + if (!buildResult.success) { + throw new Error(`Build failed: ${buildResult.error?.message}`); + } + + const deployResult = await appDeploy({ + tarballPath: buildResult.data.tarballPath!, + onProgress: (message: string) => console.log(`[deploy] ${message}`), + }); + + if (!deployResult.success) { + throw new Error(`Deploy failed: ${deployResult.error?.message}`); + } + + const installResult = await appInstall({ appPath: APP_PATH }); + + if (!installResult.success) { + throw new Error(`Install failed: ${installResult.error?.message}`); + } + }); + + afterAll(async () => { + await appUninstall({ appPath: APP_PATH }); + }); + + it('should find the installed app in the workspace', async () => { + const metadataClient = new MetadataApiClient(); + + const result = await metadataClient.query({ + findManyApplications: { + id: true, + name: true, + universalIdentifier: true, + }, + }); + + const installedApp = result.findManyApplications.find( + (app: { universalIdentifier: string }) => + app.universalIdentifier === APPLICATION_UNIVERSAL_IDENTIFIER, + ); + + expect(installedApp).toBeDefined(); + }); +}); +``` + +## Spuštění testů + +Ujistěte se, že běží váš lokální server Twenty, a poté: + +```bash filename="Terminal" +yarn test +``` + +Nebo v režimu watch během vývoje: + +```bash filename="Terminal" +yarn test:watch +``` + +## Kontrola typů + +Kontrolu typů můžete spustit i na vaší aplikaci bez spuštění testů: + +```bash filename="Terminal" +yarn twenty dev:typecheck +``` + +Spustí se `tsc --noEmit` a nahlásí se případné chyby typů. + +## CI s GitHub Actions + +Generátor kostry vytvoří připravený k použití workflow GitHub Actions v `.github/workflows/ci.yml`. Automaticky spouští integrační testy při každém pushi do `main` a u pull requestů. + +Workflow: + +1. Načte váš kód (checkout). +2. Spustí dočasný server Twenty pomocí akce `twentyhq/twenty/.github/actions/spawn-twenty-docker-image` +3. Nainstaluje závislosti pomocí `yarn install --immutable` +4. Spustí `yarn test` s proměnnými `TWENTY_API_URL` a `TWENTY_API_KEY` vloženými z výstupů akce + +```yaml .github/workflows/ci.yml +name: CI + +on: + push: + branches: + - main + pull_request: {} + +env: + TWENTY_VERSION: latest + +jobs: + test: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Spawn Twenty instance + id: twenty + uses: twentyhq/twenty/.github/actions/spawn-twenty-docker-image@main + with: + twenty-version: ${{ env.TWENTY_VERSION }} + github-token: ${{ secrets.GITHUB_TOKEN }} + + - name: Enable Corepack + run: corepack enable + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version-file: '.nvmrc' + cache: 'yarn' + + - name: Install dependencies + run: yarn install --immutable + + - name: Run integration tests + run: yarn test + env: + TWENTY_API_URL: ${{ steps.twenty.outputs.server-url }} + TWENTY_API_KEY: ${{ steps.twenty.outputs.access-token }} +``` + +Není potřeba konfigurovat žádné secrets — akce `spawn-twenty-docker-image` spustí dočasný server Twenty přímo v runneru a vypíše podrobnosti připojení. Secret `GITHUB_TOKEN` je poskytován GitHubem automaticky. + +Chcete-li připnout konkrétní verzi Twenty místo `latest`, změňte proměnnou prostředí `TWENTY_VERSION` na začátku workflow. diff --git a/packages/twenty-docs/l/cs/developers/extend/capabilities/apis.mdx b/packages/twenty-docs/l/cs/developers/extend/capabilities/apis.mdx index e9f738487e..b6406f571f 100644 --- a/packages/twenty-docs/l/cs/developers/extend/capabilities/apis.mdx +++ b/packages/twenty-docs/l/cs/developers/extend/capabilities/apis.mdx @@ -88,7 +88,7 @@ Váš klíč API poskytuje přístup k citlivým datům. Nesdílejte ho s nedův Pro vyšší bezpečnost přiřaďte konkrétní roli, abyste omezili přístup: -1. Přejděte na **Nastavení → Role** +1. Přejděte na **Nastavení → Členové → Role** 2. Klikněte na roli, kterou chcete přiřadit 3. Otevřete záložku **Přiřazení** 4. V části **API Keys** klikněte na **+ Přiřadit ke klíči API** diff --git a/packages/twenty-docs/l/cs/developers/self-host/capabilities/docker-compose.mdx b/packages/twenty-docs/l/cs/developers/self-host/capabilities/docker-compose.mdx index 76b0fbe650..e7a3f7c46d 100644 --- a/packages/twenty-docs/l/cs/developers/self-host/capabilities/docker-compose.mdx +++ b/packages/twenty-docs/l/cs/developers/self-host/capabilities/docker-compose.mdx @@ -51,7 +51,7 @@ Postupujte podle těchto kroků pro ruční nastavení. curl -o .env https://raw.githubusercontent.com/twentyhq/twenty/refs/heads/main/packages/twenty-docker/.env.example ``` -2. **Vygenerujte tajné tokeny** +2. **Vygenerujte šifrovací klíč** Spusťte následující příkaz k generování jedinečného náhodného řetězce: @@ -59,16 +59,18 @@ Postupujte podle těchto kroků pro ruční nastavení. openssl rand -base64 32 ``` - **Důležité:** Udržujte tuto hodnotu v tajnosti / nesdílejte ji. + **Důležité:** Udržujte tuto hodnotu v tajnosti / nesdílejte ji. Ztráta `ENCRYPTION_KEY` znamená ztrátu přístupu ke všem tajným údajům uloženým v databázi (OAuth tokeny, aplikační proměnné, TOTP tajemství atd.). 3. **Aktualizujte `.env` soubor** Nahraďte místoblokovou hodnotu ve svém .env souboru vygenerovaným tokenem: ```ini - APP_SECRET=první_náhodný_řetězec + ENCRYPTION_KEY=random_string ``` + Podívejte se na [průvodce rotací klíče](/l/cs/developers/self-host/capabilities/key-rotation) pro pokyny, jak jej rotovat bez prostojů. + 4. **Nastavte Heslo pro Postgres** Aktualizujte hodnotu `PG_DATABASE_PASSWORD` ve vašem .env souboru silným heslem bez speciálních znaků. diff --git a/packages/twenty-docs/l/cs/developers/self-host/capabilities/key-rotation.mdx b/packages/twenty-docs/l/cs/developers/self-host/capabilities/key-rotation.mdx new file mode 100644 index 0000000000..3b48efc2bf --- /dev/null +++ b/packages/twenty-docs/l/cs/developers/self-host/capabilities/key-rotation.mdx @@ -0,0 +1,60 @@ +--- +title: Rotace klíčů +icon: rotate +--- + +Twenty má dvě nezávislé rodiny klíčů: + +* **Klíče pro podepisování JWT** — asymetrické páry klíčů ES256 (označené `kid`), uložené v `core."signingKey"`, používané k podepisování a ověřování přístupových/obnovovacích tokenů. +* **Šifrovací klíč pro data v klidu** — `ENCRYPTION_KEY`, používaný k šifrování OAuth tokenů, aplikačních proměnných, soukromých klíčů podepisovacích klíčů, citlivých konfiguračních hodnot a TOTP tajemství uvnitř obálky `enc:v2:`. + +`APP_SECRET` je starší tajný klíč ponechaný kvůli zpětné kompatibilitě: pokud `ENCRYPTION_KEY` není nastaven, slouží jako záložní řešení pro šifrování dat v klidu i pro soubory cookie relace a stále ověřuje dříve existující HS256 přístupové tokeny. Bude označen jako zastaralý (deprecated). + +## Klíče pro podepisování JWT + +Každý klíč nese `publicKey` (uchovávaný neomezeně dlouho, aby mohl ověřovat dříve vydané tokeny), zašifrovaný `privateKey` (používaný pouze tehdy, když je klíč aktuální), příznak `isCurrent` (vždy přesně jeden záznam) a volitelné `revokedAt`. + +### Rotace aktuálního klíče + +Nastavte `SIGNING_KEY_ROTATION_DAYS`, chcete-li funkci povolit: denní cron poté vydá nový klíč jako aktuální, jakmile je stávající starší než zadaný práh. Předchozí klíče *nejsou* odvolány, takže tokeny pod nimi podepsané se dál úspěšně ověřují. Ponechte proměnnou nenastavenou, abyste deaktivovali automatickou rotaci. + +
+
-2. Click **Get Enterprise Key**
-3. When you are redirected to Stripe, enter your payment details and confirm
-4. When your Enterprise key is displayed, paste it into the Enterprise settings page and activate the Organization license
+2. Klikněte na **Získat klíč Enterprise**
+3. Po přesměrování na Stripe zadejte platební údaje a potvrďte
+4. Jakmile se zobrazí váš klíč Enterprise, vložte jej na stránku nastavení Enterprise a aktivujte licenci Organization
diff --git a/packages/twenty-docs/l/cs/user-guide/calendar-emails/overview.mdx b/packages/twenty-docs/l/cs/user-guide/calendar-emails/overview.mdx
index 5c2cc77b01..db08603d89 100644
--- a/packages/twenty-docs/l/cs/user-guide/calendar-emails/overview.mdx
+++ b/packages/twenty-docs/l/cs/user-guide/calendar-emails/overview.mdx
@@ -25,15 +25,25 @@ description: Připojte své účty e-mailu a kalendáře k Twenty.
6. Nastavte synchronizaci kalendáře (viditelnost, automatické vytváření) → klikněte na **Přidat účet**
7. Vaše e-maily a události v kalendáři se začnou synchronizovat automaticky
-### Nastavení SMTP/CalDAV (Další Poskytovatelé)
+### Nastavení IMAP/SMTP/CalDAV (Další poskytovatelé)
Pro další poskytovatele emailu a kalendáře:
1. Přejděte na **Nastavení → Účty**
-2. Nakonfigurujte nastavení SMTP pro email
+2. Nakonfigurujte nastavení IMAP pro synchronizaci příchozích e-mailů a nastavení SMTP pro odesílání e-mailů
3. Nakonfigurujte nastavení CalDAV pro kalendář
4. Otestujte připojení
+
- 
+
+
@@ -27,7 +27,7 @@ Los objetos personalizados provienen de tablas de metadatos que determinan la fo 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.
- 
+
+
@@ -35,5 +35,5 @@ Para añadir un objeto personalizado, el workspaceMember consultará la API de / Para obtener datos, el proceso implica hacer consultas a través del endpoint /graphql y pasarlos a través del Query Resolver.
-
+
diff --git a/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/server-commands.mdx b/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/server-commands.mdx
index e1b96c639e..76c6b24e66 100644
--- a/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/server-commands.mdx
+++ b/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/server-commands.mdx
@@ -1,5 +1,6 @@
---
title: Comandos de Backend
+icon: terminal
---
## Comandos útiles
diff --git a/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/zapier.mdx b/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/zapier.mdx
index 3a853d4d22..b8e4019c1f 100644
--- a/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/zapier.mdx
+++ b/packages/twenty-docs/l/es/developers/contribute/capabilities/backend-development/zapier.mdx
@@ -43,7 +43,9 @@ Reemplaza el valor de **YOUR_API_KEY** en el archivo `.env` con la clave API que
## Desarrollo
+
Hello World
;
+};
+export default MyComponent;
+
+// ✅ Good
+export function MyComponent() {
+ return Hello World
;
+};
+```
+
+### "Props"
+
+Crea un tipo llamado `{ComponentName}Props`. Usa la desestructuración. No uses `React.FC`.
+
+```tsx
+type MyComponentProps = {
+ name: string;
+};
+
+export const MyComponent = ({ name }: MyComponentProps) => Hello {name}
;
+```
+
+### Sin propagación de props de una sola variable
+
+```tsx
+// ❌ Bad
+const MyComponent = (props: MyComponentProps) => {data}
;
+};
+
+// ✅ Good — extract into sibling
+export const PageData = () => {
+ const [data, setData] = useAtomState(dataState);
+ const [dep] = useAtomState(depState);
+ useEffect(() => { setData(dep); }, [dep]);
+ return <>;
+};
+export const Page = () => {
+ const [data] = useAtomState(dataState);
+ return {data}
;
+};
+```
+
+## TypeScript
+
+* **`type` mejor que `interface`** — más flexible, más fácil de componer
+* **Literales de cadena mejor que enums** — excepto para los enums de codegen de GraphQL y las APIs internas de la biblioteca
+* **Sin `any`** — TypeScript estricto obligatorio
+* **Sin importaciones de tipos** — usa importaciones normales (aplicado por Oxlint `typescript/consistent-type-imports`)
+* **Usa [Zod](https://github.com/colinhacks/zod)** para la validación en tiempo de ejecución de objetos no tipados
+
+## JavaScript
+
+```tsx
+// Use nullish-coalescing (??) instead of ||
+const value = process.env.MY_VALUE ?? 'default';
+
+// Use optional chaining
+onClick?.();
+```
+
+## Nomenclatura
+
+* **Variables**: camelCase, descriptivas (`email` no `value`, `fieldMetadata` no `fm`)
+* **Constantes**: SCREAMING_SNAKE_CASE
+* **Tipos/Clases**: PascalCase
+* **Archivos/directorios**: kebab-case (`.component.tsx`, `.service.ts`, `.entity.ts`)
+* **Manejadores de eventos**: `handleClick` (no `onClick` para la función manejadora)
+* **Props de componentes**: anteponer el nombre del componente (`ButtonProps`)
+* **Componentes con estilo**: anteponer `Styled` (`StyledTitle`)
+
+## Estilo
+
+Usa componentes con estilo de [Linaria](https://github.com/callstack/linaria). Usa valores del tema — evita `px`, `rem` o colores fijos.
+
+```tsx
+// ❌ Bad
+const StyledButton = styled.button`
+ color: #333333;
+ font-size: 1rem;
+ margin-left: 4px;
+`;
+
+// ✅ Good
+const StyledButton = styled.button`
+ color: ${({ theme }) => theme.font.color.primary};
+ font-size: ${({ theme }) => theme.font.size.md};
+ margin-left: ${({ theme }) => theme.spacing(1)};
+`;
+```
+
+## Importar
+
+Usa alias en lugar de rutas relativas:
+
+```tsx
+// ❌ Bad
+import { Foo } from '../../../../../testing/decorators/Foo';
+
+// ✅ Good
+import { Foo } from '~/testing/decorators/Foo';
+import { Bar } from '@/modules/bar/components/Bar';
+```
+
+## Estructura de carpetas
+
+```
+front
+└── modules/ # Feature modules
+│ └── module1/
+│ ├── components/
+│ ├── constants/
+│ ├── contexts/
+│ ├── graphql/ (fragments, queries, mutations)
+│ ├── hooks/
+│ ├── states/ (atoms, selectors)
+│ ├── types/
+│ └── utils/
+└── pages/ # Route-level components
+└── ui/ # Reusable UI components (display, input, feedback, ...)
+```
+
+* Los módulos pueden importar desde otros módulos, pero `ui/` debe permanecer sin dependencias
+* Usa subcarpetas `internal/` para código privado del módulo
+* Componentes de menos de 300 líneas, servicios de menos de 500 líneas
diff --git a/packages/twenty-docs/l/es/developers/extend/api.mdx b/packages/twenty-docs/l/es/developers/extend/api.mdx
new file mode 100644
index 0000000000..0319557543
--- /dev/null
+++ b/packages/twenty-docs/l/es/developers/extend/api.mdx
@@ -0,0 +1,55 @@
+---
+title: APIs
+icon: plug
+description: APIs REST y GraphQL generadas a partir del esquema de tu espacio de trabajo.
+---
+
+import { VimeoEmbed } from '/snippets/vimeo-embed.mdx';
+
+## APIs con esquema por tenant
+
+No existe una referencia estática de la API para Twenty. Cada espacio de trabajo tiene su propio esquema — cuando agregas un objeto personalizado (por ejemplo, `Invoice`), inmediatamente obtiene endpoints REST y GraphQL idénticos a los objetos integrados como `Company` o `Person`. La API se genera a partir del esquema, por lo que los endpoints usan directamente los nombres de tus objetos y campos — sin identificadores opacos.
+
+La documentación de la API específica de tu espacio de trabajo está disponible en **Configuración → APIs y Webhooks** después de crear una clave de API. Incluye un entorno de pruebas interactivo donde puedes ejecutar llamadas reales contra tus datos.
+
+## Dos APIs
+
+**API principal** — `/rest/` y `/graphql/`
+
+CRUD sobre registros: Personas, Empresas, Oportunidades y tus objetos personalizados. Consultar, filtrar, recorrer relaciones.
+
+**API de metadatos** — `/rest/metadata/` y `/metadata/`
+
+Gestión del esquema: crear/modificar/eliminar objetos, campos y relaciones. Así es como cambias tu modelo de datos de forma programática.
+
+Ambas están disponibles como REST y GraphQL. GraphQL añade operaciones upsert por lotes y la capacidad de recorrer relaciones en una única consulta. Los mismos datos subyacentes en ambos casos.
+
+## URLs base
+
+| Entorno | URL base |
+| --------------- | ------------------------- |
+| Nube | `https://api.twenty.com/` |
+| Autoalojamiento | `https://{your-domain}/` |
+
+## Autenticación
+
+```
+Authorization: Bearer YOUR_API_KEY
+```
+
+Crea una clave de API en **Configuración → APIs y Webhooks → + Create key**. Cópiala de inmediato — se muestra una sola vez. Las claves pueden acotarse a un rol específico en **Configuración → Members → Roles → Assignment tab** para limitar a qué pueden acceder.
+
+
+
+
+
+Una vez que el servidor esté en marcha, se abrirá un navegador para iniciar sesión. Inicia sesión con la cuenta de demostración precargada:
+
+* **Correo electrónico:** `tim@apple.dev`
+* **Contraseña:** `tim@apple.dev`
+
+
+
+
+
+
+Haz clic en **Authorize** en la siguiente pantalla — esto le da a la CLI acceso a tu espacio de trabajo.
+
+
+
+
+
+
+Tu terminal confirmará que todo está configurado.
+
+
+
+
+
+
+**Después de esta fase:** tienes un servidor de Twenty en ejecución en [http://localhost:2020](http://localhost:2020) con tu CLI autorizada para sincronizar con él.
+
+
+
+
+
+
+Abre [http://localhost:2020/settings/applications#developer](http://localhost:2020/settings/applications#developer) en tu navegador. Deberías ver tu app listada en **Your Apps**.
+
+
+
+
+
+
+Haz clic en **My twenty app** para ver su **registro de la aplicación** — un registro a nivel de servidor que describe tu app (nombre, identificador, credenciales de OAuth, origen). Un único registro puede instalarse en varios espacios de trabajo del mismo servidor.
+
+
+
+
+
+
+Haz clic en **View installed app** para ver la instalación en el espacio de trabajo. La pestaña **About** muestra la versión actual y las opciones de gestión.
+
+
+
+
+
+
+**Después de esta fase:** tienes un ciclo de desarrollo en vivo. Edita cualquier archivo en `src/` y aparecerá en la UI.
+
+### Sincronización de una sola vez para CI y scripts
+
+Pasa `--once` para ejecutar una sola compilación + sincronización y salir — mismo pipeline, sin watcher:
+
+```bash filename="Terminal"
+yarn twenty dev --once
+```
+
+| Comando | Comportamiento | Cuándo usarlo |
+| ---------------------------------- | ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- |
+| `yarn twenty dev` | Supervisa tus archivos fuente y vuelve a sincronizar en cada cambio. Se ejecuta hasta que lo detengas. | Desarrollo local interactivo. |
+| `yarn twenty dev --once` | Realiza una sola compilación + sincronización y luego sale con el código `0` si tiene éxito o `1` si falla. | CI, hooks de pre-commit, agentes de IA, flujos de trabajo con scripts. |
+| `yarn twenty dev --once --dry-run` | Genera y muestra los cambios de metadatos **sin aplicarlos**. | Inspeccionar qué cambiaría una sincronización antes de confirmarla. |
+
+Ambos modos necesitan un remoto autenticado. Consulta [Sincronización y recuperación](/l/es/developers/extend/apps/operations/sync-and-recovery#previewing-changes-dry-run) para obtener más información sobre `--dry-run`.
+
+### Opciones del modo de desarrollo
+
+| Opción | Descripción |
+| ------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `--once` | Compila y sincroniza una vez y luego finaliza. |
+| `--dry-run` | Con `--once`, obtén una vista previa de los cambios de metadatos sin aplicarlos. No escribe nada. |
+| `--debounceMs \
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: '74c526eb-cb68-4cf7-b05c-0dd8c288d948',
+ name: 'hello-world',
+ description: 'A simple front component',
+ component: HelloWorld,
+});
+```
+
+```ts src/command-menu-items/hello-world.command-menu-item.ts
+import { defineCommandMenuItem } from 'twenty-sdk/define';
+
+export default defineCommandMenuItem({
+ universalIdentifier: 'd4e5f6a7-b8c9-0123-defa-456789012345',
+ shortLabel: 'Hello',
+ label: 'Hello World',
+ icon: 'IconBolt',
+ isPinned: true,
+ availabilityType: 'GLOBAL',
+ frontComponentUniversalIdentifier: '74c526eb-cb68-4cf7-b05c-0dd8c288d948',
+});
+```
+
+Después de sincronizar con `yarn twenty dev` (o ejecutar una sola vez `yarn twenty dev --once`), la acción rápida aparece en la esquina superior derecha de la página:
+
+Hello from my app!
+This component renders inside Twenty.
+
+
+
+
+Haz clic para renderizar el componente en línea.
+
+## Campos de configuración
+
+| Campo | Obligatorio | Descripción |
+| --------------------- | ----------- | -------------------------------------------------------------------- |
+| `universalIdentifier` | Sí | ID único estable para este componente |
+| `component` | Sí | Una función de componente de React |
+| `name` | No | Nombre para mostrar |
+| `description` | No | Descripción de lo que hace el componente |
+| `isHeadless` | No | Configura en `true` si el componente no tiene UI visible (ver abajo) |
+
+## Colocar un componente de frontend en una página
+
+Más allá de los comandos, puedes incrustar un componente de frontend directamente en una página de registro agregándolo como un widget en un **diseño de página**. Consulta [Diseños de página](/l/es/developers/extend/apps/layout/page-layouts) para más detalles.
+
+## Headless vs no headless
+
+Los componentes de front vienen en dos modos de renderizado controlados por la opción `isHeadless`:
+
+**No headless (predeterminado)** — El componente renderiza una UI visible. Cuando se activa desde el menú de comandos, se abre en el panel lateral. Este es el comportamiento predeterminado cuando `isHeadless` es `false` o se omite.
+
+**Headless (`isHeadless: true`)** — El componente se monta de forma invisible en segundo plano. No abre el panel lateral. Los componentes headless están diseñados para acciones que ejecutan lógica y luego se desmontan — por ejemplo, ejecutar una tarea asíncrona, navegar a una página o mostrar un modal de confirmación. Se combinan de forma natural con los componentes Command del SDK descritos a continuación.
+
+```tsx src/front-components/sync-tracker.tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { useRecordId, enqueueSnackbar } from 'twenty-sdk/front-component';
+import { useEffect } from 'react';
+
+const SyncTracker = () => {
+ const recordId = useRecordId();
+
+ useEffect(() => {
+ enqueueSnackbar({ message: `Tracking record ${recordId}`, variant: 'info' });
+ }, [recordId]);
+
+ return null;
+};
+
+export default defineFrontComponent({
+ universalIdentifier: '...',
+ name: 'sync-tracker',
+ description: 'Tracks record views silently',
+ isHeadless: true,
+ component: SyncTracker,
+});
+```
+
+Como el componente devuelve `null`, Twenty omite renderizar un contenedor para él — no aparece espacio vacío en el diseño. El componente sigue teniendo acceso a todos los hooks y a la API de comunicación con el host.
+
+## Componentes Command del SDK
+
+El paquete `twenty-sdk` proporciona cuatro componentes auxiliares Command diseñados para componentes de front headless. Cada componente ejecuta una acción al montarse, gestiona los errores mostrando una notificación tipo snackbar y desmonta automáticamente el componente de front al finalizar.
+
+Impórtalos desde `twenty-sdk/command`:
+
+* **`Command`** — Ejecuta un callback asíncrono mediante la prop `execute`.
+* **`CommandLink`** — Navega a una ruta de la aplicación. Props: `to`, `params`, `queryParams`, `options`.
+* **`CommandModal`** — Abre un modal de confirmación. Si el usuario confirma, ejecuta el callback `execute`. Props: `title`, `subtitle`, `execute`, `confirmButtonText`, `confirmButtonAccent`.
+* **`CommandOpenSidePanelPage`** — Abre una página específica del panel lateral. Props: `page`, `pageTitle`, `pageIcon`.
+
+Aquí tienes un ejemplo completo de un componente de front headless que usa `Command` para ejecutar una acción desde el menú de comandos:
+
+```tsx src/front-components/run-action.tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { Command } from 'twenty-sdk/command';
+import { CoreApiClient } from 'twenty-sdk/clients';
+
+const RunAction = () => {
+ const execute = async () => {
+ const client = new CoreApiClient();
+
+ await client.mutation({
+ createTask: {
+ __args: { data: { title: 'Created by my app' } },
+ id: true,
+ },
+ });
+ };
+
+ return
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'b2c3d4e5-f6a7-8901-bcde-f23456789012',
+ name: 'record-info',
+ component: RecordInfo,
+});
+```
+
+Hooks disponibles:
+
+| Hook | Devuelve | Descripción |
+| --------------------------------------------- | -------------------- | ----------------------------------------------------------------------------------------------- |
+| `useUserId()` | `string` o `null` | El ID del usuario actual |
+| `useSelectedRecordIds()` | `string[]` | Todos los ID de los registros seleccionados (array vacío si no hay ninguno seleccionado) |
+| `useRecordId()` | `string` o `null` | **Obsoleto.** Usa `useSelectedRecordIds()` en su lugar |
+| `useFrontComponentId()` | `string` | El ID de esta instancia del componente |
+| `useColorScheme()` | `'light'` o `'dark'` | La combinación de colores activa de la interfaz de usuario del host (`System` ya está resuelto) |
+| `useFrontComponentExecutionContext(selector)` | varía | Accede al contexto de ejecución completo con una función selectora |
+
+## Variables de aplicación
+
+Las variables de aplicación definidas en [`defineApplication()`](/l/es/developers/extend/apps/config/application) con `isSecret: false` están disponibles dentro de los componentes de front mediante la utilidad `getApplicationVariable`:
+
+```tsx src/front-components/greeting.tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { getApplicationVariable } from 'twenty-sdk/front-component';
+
+const Greeting = () => {
+ const recipientName = getApplicationVariable('DEFAULT_RECIPIENT_NAME') ?? 'World';
+
+ return User: {userId}
+Record: {recordId ?? 'No record context'}
+Component: {componentId}
+Hello, {recipientName}!
; +}; + +export default defineFrontComponent({ + universalIdentifier: '...', + name: 'greeting', + component: Greeting, +}); +``` + +
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'c9d0e1f2-a3b4-5678-cdef-789012345678',
+ name: 'archive-record',
+ description: 'Archives the current record',
+ component: ArchiveRecord,
+});
+```
+
+### Trabajar con varios registros
+
+Usa `useSelectedRecordIds()` para manejar varios registros seleccionados. Esto es útil para operaciones por lotes:
+
+```tsx src/front-components/bulk-export.tsx
+import { defineFrontComponent, numberOfSelectedRecords } from 'twenty-sdk/define';
+import { useSelectedRecordIds } from 'twenty-sdk/front-component';
+import { enqueueSnackbar, closeSidePanel } from 'twenty-sdk/front-component';
+import { CoreApiClient } from 'twenty-sdk/clients';
+
+const BulkExport = () => {
+ const selectedRecordIds = useSelectedRecordIds();
+
+ const handleExport = async () => {
+ const client = new CoreApiClient();
+
+ for (const recordId of selectedRecordIds) {
+ await client.mutation({
+ updateTask: {
+ __args: { id: recordId, data: { exported: true } },
+ id: true,
+ },
+ });
+ }
+
+ await enqueueSnackbar({
+ message: `Exported ${selectedRecordIds.length} records`,
+ variant: 'success',
+ });
+
+ await closeSidePanel();
+ };
+
+ return (
+ Archive this record?
+ +
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'd0e1f2a3-b4c5-6789-defa-012345678901',
+ name: 'bulk-export',
+ description: 'Export selected records',
+ component: BulkExport,
+ command: {
+ universalIdentifier: 'd0e1f2a3-b4c5-6789-defa-012345678902',
+ label: 'Bulk Export',
+ availabilityType: 'RECORD_SELECTION',
+ conditionalAvailabilityExpression: numberOfSelectedRecords > 0,
+ },
+});
+```
+
+## Recursos públicos
+
+Los componentes de frontend pueden acceder a archivos del directorio `public/` de la aplicación usando `getPublicAssetUrl`:
+
+```tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { getPublicAssetUrl } from 'twenty-sdk/utils';
+
+const Logo = () => Export {selectedRecordIds.length} selected record(s)?
+ +;
+
+export default defineFrontComponent({
+ universalIdentifier: '...',
+ name: 'logo',
+ component: Logo,
+});
+```
+
+Consulta la [sección de recursos públicos](/l/es/developers/extend/apps/config/public-assets) para más detalles.
+
+## Estilo
+
+Los componentes de frontend admiten varios enfoques de estilos. Puedes usar:
+
+* **Estilos en línea** — `style={{ color: 'red' }}`
+* **Componentes de Twenty UI** — importa desde `twenty-sdk/ui` (Button, Tag, Status, Chip, Avatar y más)
+* **Emotion** — CSS-in-JS con `@emotion/react`
+* **Styled-components** — patrones de `styled.div`
+* **Tailwind CSS** — clases utilitarias
+* **Cualquier librería CSS-in-JS** compatible con React
+
+```tsx
+import { defineFrontComponent } from 'twenty-sdk/define';
+import { Button, Tag, Status } from 'twenty-sdk/ui';
+
+const StyledWidget = () => {
+ return (
+
+
+ );
+};
+
+export default defineFrontComponent({
+ universalIdentifier: 'e5f6a7b8-c9d0-1234-efab-567890123456',
+ name: 'styled-widget',
+ component: StyledWidget,
+});
+```
diff --git a/packages/twenty-docs/l/es/developers/extend/apps/layout/navigation-menu-items.mdx b/packages/twenty-docs/l/es/developers/extend/apps/layout/navigation-menu-items.mdx
new file mode 100644
index 0000000000..bd0f1b223e
--- /dev/null
+++ b/packages/twenty-docs/l/es/developers/extend/apps/layout/navigation-menu-items.mdx
@@ -0,0 +1,44 @@
+---
+title: Elementos del menú de navegación
+description: Agrega entradas personalizadas a la barra lateral del espacio de trabajo — enlaces a vistas guardadas o URLs externas.
+icon: bars
+---
+
+Un **elemento del menú de navegación** es una entrada en la barra lateral izquierda. Usa `defineNavigationMenuItem()` para distribuir enlaces personalizados en la barra lateral — normalmente uno por cada [vista](/l/es/developers/extend/apps/layout/views) que publiques — o para apuntar a URL externas.
+
+```ts src/navigation-menu-items/example-navigation-menu-item.ts
+import { defineNavigationMenuItem, NavigationMenuItemType } from 'twenty-sdk/define';
+import { EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER } from '../views/example-view';
+
+export default defineNavigationMenuItem({
+ universalIdentifier: '9327db91-afa1-41b6-bd9d-2b51a26efb4c',
+ name: 'example-navigation-menu-item',
+ icon: 'IconList',
+ color: 'blue',
+ position: 0,
+ type: NavigationMenuItemType.VIEW,
+ viewUniversalIdentifier: EXAMPLE_VIEW_UNIVERSAL_IDENTIFIER,
+});
+```
+
+## Puntos clave
+
+* `type` determina a qué enlaza el elemento del menú. Cada tipo se asocia con un campo identificador específico:
+
+ | Tipo | Qué hace | Campo obligatorio |
+ | ------------------------------------ | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+ | `NavigationMenuItemType.VIEW` | Abre una vista guardada | `viewUniversalIdentifier` |
+ | `NavigationMenuItemType.LINK` | Abre una URL externa | `link` |
+ | `NavigationMenuItemType.FOLDER` | Agrupa elementos anidados bajo una etiqueta | `name` (y los elementos secundarios hacen referencia a la carpeta mediante `folderUniversalIdentifier`) |
+ | `NavigationMenuItemType.OBJECT` | Abre la página de índice predeterminada de un objeto | `targetObjectUniversalIdentifier` |
+ | `NavigationMenuItemType.PAGE_LAYOUT` | Abre un diseño de página independiente | `pageLayoutUniversalIdentifier` |
+
+* `position` controla el orden en la barra lateral.
+
+* `icon` y `color` son opcionales y personalizan el aspecto de la entrada.
+
+* `folderUniversalIdentifier` también está disponible en cualquier elemento para anidarlo dentro de un elemento padre de tipo `FOLDER`.
+
+Hello
', { + status: 201, + headers: { 'content-type': 'text/html' }, + }); +}; +``` + +Por razones de seguridad, los encabezados de la respuesta están restringidos a una lista de permitidos. Cualquier encabezado que no esté en la lista (por ejemplo, `Set-Cookie`, encabezados CORS como `Access-Control-Allow-Origin`, o encabezados personalizados `X-*`) se descarta silenciosamente antes de que se envíe la respuesta. Los encabezados de respuesta permitidos son: + +* `content-type` +* `content-language` +* `content-disposition` +* `cache-control` +* `retry-after` + +Today is {format(new Date(), 'MMMM do, yyyy')}
; +}; + +export default defineFrontComponent({ + universalIdentifier: '...', + name: 'date-widget', + component: DateWidget, +}); +``` + +### Cómo funciona el empaquetado + +El paso de compilación usa esbuild para producir un solo archivo autónomo por función de lógica y por componente de frontend. Todos los paquetes importados se insertan en el bundle. + +**Las funciones de lógica** se ejecutan en un entorno Node.js. Los módulos integrados de Node (`fs`, `path`, `crypto`, `http`, etc.) están disponibles y no necesitan instalarse. + +**Los componentes de frontend** se ejecutan en un Web Worker. Los módulos integrados de Node **no** están disponibles — solo las APIs del navegador y paquetes de npm que funcionen en un entorno de navegador. + +Ambos entornos tienen `twenty-client-sdk/core` y `twenty-client-sdk/metadata` disponibles como módulos preproporcionados — estos no se incluyen en el bundle sino que se resuelven en tiempo de ejecución por el servidor. + +## Configuración + +La aplicación generada ya incluye Vitest. Si lo configuras manualmente, instala las dependencias: + +```bash filename="Terminal" +yarn add -D vitest vite-tsconfig-paths +``` + +Crea un `vitest.config.ts` en la raíz de tu aplicación: + +```ts vitest.config.ts +import tsconfigPaths from 'vite-tsconfig-paths'; +import { defineConfig } from 'vitest/config'; + +export default defineConfig({ + plugins: [ + tsconfigPaths({ + projects: ['tsconfig.spec.json'], + ignoreConfigErrors: true, + }), + ], + test: { + testTimeout: 120_000, + hookTimeout: 120_000, + include: ['src/**/*.integration-test.ts'], + setupFiles: ['src/__tests__/setup-test.ts'], + env: { + TWENTY_API_URL: 'http://localhost:2020', + TWENTY_API_KEY: 'your-api-key', + }, + }, +}); +``` + +Crea un archivo de configuración que verifique que el servidor es accesible antes de ejecutar las pruebas: + +```ts src/__tests__/setup-test.ts +import * as fs from 'fs'; +import * as os from 'os'; +import * as path from 'path'; +import { beforeAll } from 'vitest'; + +const TWENTY_API_URL = process.env.TWENTY_API_URL ?? 'http://localhost:2020'; +const TEST_CONFIG_DIR = path.join(os.tmpdir(), '.twenty-sdk-test'); + +beforeAll(async () => { + // Verify the server is running + const response = await fetch(`${TWENTY_API_URL}/healthz`); + + if (!response.ok) { + throw new Error( + `Twenty server is not reachable at ${TWENTY_API_URL}. ` + + 'Start the server before running integration tests.', + ); + } + + // Write a temporary config for the SDK + fs.mkdirSync(TEST_CONFIG_DIR, { recursive: true }); + + fs.writeFileSync( + path.join(TEST_CONFIG_DIR, 'config.json'), + JSON.stringify({ + remotes: { + local: { + apiUrl: process.env.TWENTY_API_URL, + apiKey: process.env.TWENTY_API_KEY, + }, + }, + defaultRemote: 'local', + }, null, 2), + ); +}); +``` + +## APIs programáticas del SDK + +La subruta `twenty-sdk/cli` exporta funciones que puedes invocar directamente desde el código de pruebas: + +| Función | Descripción | +| -------------- | ------------------------------------------------------------ | +| `appBuild` | Compilar la aplicación y opcionalmente empaquetar un tarball | +| `appDeploy` | Subir un tarball al servidor | +| `appInstall` | Instalar la aplicación en el espacio de trabajo activo | +| `appUninstall` | Desinstalar la aplicación del espacio de trabajo activo | + +Cada función devuelve un objeto de resultado con `success: boolean` y `data` o `error`. + +## Escribir una prueba de integración + +Aquí tienes un ejemplo completo que compila, despliega e instala la aplicación, y luego verifica que aparezca en el espacio de trabajo: + +```ts src/__tests__/app-install.integration-test.ts +import { APPLICATION_UNIVERSAL_IDENTIFIER } from 'src/application-config'; +import { appBuild, appDeploy, appInstall, appUninstall } from 'twenty-sdk/cli'; +import { MetadataApiClient } from 'twenty-client-sdk/metadata'; +import { afterAll, beforeAll, describe, expect, it } from 'vitest'; + +const APP_PATH = process.cwd(); + +describe('App installation', () => { + beforeAll(async () => { + const buildResult = await appBuild({ + appPath: APP_PATH, + tarball: true, + onProgress: (message: string) => console.log(`[build] ${message}`), + }); + + if (!buildResult.success) { + throw new Error(`Build failed: ${buildResult.error?.message}`); + } + + const deployResult = await appDeploy({ + tarballPath: buildResult.data.tarballPath!, + onProgress: (message: string) => console.log(`[deploy] ${message}`), + }); + + if (!deployResult.success) { + throw new Error(`Deploy failed: ${deployResult.error?.message}`); + } + + const installResult = await appInstall({ appPath: APP_PATH }); + + if (!installResult.success) { + throw new Error(`Install failed: ${installResult.error?.message}`); + } + }); + + afterAll(async () => { + await appUninstall({ appPath: APP_PATH }); + }); + + it('should find the installed app in the workspace', async () => { + const metadataClient = new MetadataApiClient(); + + const result = await metadataClient.query({ + findManyApplications: { + id: true, + name: true, + universalIdentifier: true, + }, + }); + + const installedApp = result.findManyApplications.find( + (app: { universalIdentifier: string }) => + app.universalIdentifier === APPLICATION_UNIVERSAL_IDENTIFIER, + ); + + expect(installedApp).toBeDefined(); + }); +}); +``` + +## Ejecutar pruebas + +Asegúrate de que tu servidor local de Twenty esté en ejecución y luego: + +```bash filename="Terminal" +yarn test +``` + +O en modo watch durante el desarrollo: + +```bash filename="Terminal" +yarn test:watch +``` + +## Comprobación de tipos + +También puedes ejecutar la comprobación de tipos en tu aplicación sin ejecutar pruebas: + +```bash filename="Terminal" +yarn twenty dev:typecheck +``` + +Esto ejecuta `tsc --noEmit` e informa cualquier error de tipo. + +## CI con GitHub Actions + +El generador crea un flujo de trabajo de GitHub Actions listo para usar en `.github/workflows/ci.yml`. Ejecuta tus pruebas de integración automáticamente en cada push a `main` y en los pull requests. + +El flujo de trabajo: + +1. Obtiene tu código +2. Inicia un servidor temporal de Twenty usando la acción `twentyhq/twenty/.github/actions/spawn-twenty-docker-image` +3. Instala las dependencias con `yarn install --immutable` +4. Ejecuta `yarn test` con `TWENTY_API_URL` y `TWENTY_API_KEY` inyectados a partir de las salidas de la acción + +```yaml .github/workflows/ci.yml +name: CI + +on: + push: + branches: + - main + pull_request: {} + +env: + TWENTY_VERSION: latest + +jobs: + test: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - name: Spawn Twenty instance + id: twenty + uses: twentyhq/twenty/.github/actions/spawn-twenty-docker-image@main + with: + twenty-version: ${{ env.TWENTY_VERSION }} + github-token: ${{ secrets.GITHUB_TOKEN }} + + - name: Enable Corepack + run: corepack enable + + - name: Setup Node.js + uses: actions/setup-node@v4 + with: + node-version-file: '.nvmrc' + cache: 'yarn' + + - name: Install dependencies + run: yarn install --immutable + + - name: Run integration tests + run: yarn test + env: + TWENTY_API_URL: ${{ steps.twenty.outputs.server-url }} + TWENTY_API_KEY: ${{ steps.twenty.outputs.access-token }} +``` + +No necesitas configurar secretos: la acción `spawn-twenty-docker-image` inicia un servidor efímero de Twenty directamente en el runner y devuelve los detalles de conexión. El secreto `GITHUB_TOKEN` lo proporciona GitHub automáticamente. + +Para fijar una versión específica de Twenty en lugar de `latest`, cambia la variable de entorno `TWENTY_VERSION` al inicio del flujo de trabajo. diff --git a/packages/twenty-docs/l/es/developers/extend/capabilities/apis.mdx b/packages/twenty-docs/l/es/developers/extend/capabilities/apis.mdx index 65f08139df..5f4f2a53dc 100644 --- a/packages/twenty-docs/l/es/developers/extend/capabilities/apis.mdx +++ b/packages/twenty-docs/l/es/developers/extend/capabilities/apis.mdx @@ -17,7 +17,7 @@ Twenty genera APIs específicamente para tu modelo de datos: * **Documentación personalizada**: Generada específicamente para el modelo de datos de tu espacio de trabajo.- Customer Insights -
-+ Customer Insights +
+- ``` - yarn add @tabler/icons-react - ``` -
-
+
+ +```jsx +import { IconArrowLeft } from "@tabler/icons-react"; + +export const MyComponent = () => { + return