أدخل ⁦@dev-dga⁩ إلى تطبيق قائم.

#أعدّ ملف الأنماط

استورد ⁦@dev-dga/css⁩ مرة واحدة. ومع ⁦Tailwind v4⁩ عرّف طبقات ⁦CSS⁩ أولاً لتقع المكتبة بين أساس ⁦Tailwind⁩ وأدواته، ثم أضف جسر الرموز لتحصل على ⁦bg-primary⁩ و⁦text-ink⁩ وبقية مقياس ⁦DGA⁩.

npm i @dev-dga/react @dev-dga/css @dev-dga/tokens

/* resources/css/app.css (Laravel) or app/globals.css (Next.js) */@layer theme, base, ddga-base, ddga-components, components, utilities;@import 'tailwindcss/theme.css' layer(theme);@import 'tailwindcss/utilities.css' layer(utilities);@import '@dev-dga/css';@import '@dev-dga/css/tailwind.css';/* keep your own @source lines */@source '../views';

احتفظ بأسطر ⁦@source⁩ في مشروعك. تأتي المكتبة بتصفير خاص بها، لذا يصبح ⁦preflight⁩ في ⁦Tailwind⁩ اختيارياً. التنسيق مع Tailwind

#غلف التطبيق بـ ⁦DgaProvider⁩

يضبط ⁦DgaProvider⁩ الاتجاه واللغة وخط ⁦DGA⁩ والوضع الفاتح أو الداكن عبر ⁦data-theme⁩. وتعرض الطبقات المنبثقة مثل ⁦Modal⁩ و⁦Select⁩ و⁦DatePicker⁩ داخله، مما يجعلها ترث السمة والاتجاه.

// resources/js/app.tsx (Inertia)import { createInertiaApp } from '@inertiajs/react';import { createRoot } from 'react-dom/client';import { DgaProvider } from '@dev-dga/react';createInertiaApp({  setup({ el, App, props }) {    createRoot(el).render(      <DgaProvider dir="rtl" locale="ar" mode="light">        <App {...props} />      </DgaProvider>,    );  },});

#اختر المكونات

لكل حاجة مكونات تقابلها في ⁦@dev-dga⁩. التسمية والنص المساعد والأخطاء خصائص في الحقل نفسه، لذا لا تحتاج إلى ربط المعرفات يدوياً.

كل المكونات

#روابط الموجه

تقبل المكونات التي تعرض رابطاً أو زر قائمة الخاصية ⁦asChild⁩، مما يجعل ⁦<Link>⁩ في ⁦Inertia⁩ أو ⁦Next.js⁩ هو العنصر نفسه: عنصر واحد قابل للتركيز، وتنقل من جهة العميل، وأنماط الحالة النشطة من ⁦isActive⁩.

import { Link, usePage } from '@inertiajs/react';import { Button, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@dev-dga/react';<Button asChild>  <Link href="/requests/new">New request</Link></Button>export function NavMain({ items }: { items: { title: string; href: string }[] }) {  const { url } = usePage();  return (    <SidebarMenu>      {items.map((item) => (        <SidebarMenuItem key={item.href}>          <SidebarMenuButton asChild isActive={url.startsWith(item.href)}>            <Link href={item.href}>{item.title}</Link>          </SidebarMenuButton>        </SidebarMenuItem>      ))}    </SidebarMenu>  );}

#النماذج

ترسل كل عناصر النماذج عبر ⁦FormData⁩ متى أعطيتها اسماً، مما يجعل النماذج العادية و⁦<Form>⁩ في ⁦Inertia⁩ وإجراءات ⁦React Router⁩ وإجراءات الخادم تعمل دون ربط إضافي.

اقرأ دليل النماذج

#القادم من مجموعة واجهات أخرى مبنية على ⁦Tailwind⁩

استبدل المجموعة دفعة واحدة بدل تشغيل الاثنتين. مجموعات مثل ⁦shadcn/ui⁩، التي تأتي مع قوالب ⁦Laravel⁩ و⁦Next.js⁩ الجاهزة، تعرّف أسماء سمات ⁦Tailwind⁩ مثل ⁦--color-primary⁩ و⁦--color-border⁩ في كتلة ⁦@theme⁩. ويعرّف جسر رموز ⁦@dev-dga⁩ الأسماء نفسها، لذا يغير الملف الذي يحمّل أخيراً ألوان الآخر.

• احذف كتلة ⁦@theme⁩ الخاصة بالمجموعة ومتغيرات الألوان في ⁦:root⁩ و⁦.dark⁩.
• احذف إضافة الحركة الخاصة بالمجموعة وصيغة الوضع الداكن بالفئة، لأن خاصية ⁦mode⁩ في ⁦DgaProvider⁩ تتحكم في الوضع الداكن.
• استبدل مكونات المجموعة شاشةً شاشة، ثم احذف مجلد مكوناتها.

بعد الاستبدال، ابحث عن ترقيم الصفحات، بطاقات المؤشرات، الحالات الفارغة، ومؤشرات الخطوات التي بناها تطبيقك قبل الانتقال. يستبدل التحويل العناصر الأساسية للمجموعة وحدها، وتبقى الأجزاء التي ركبها تطبيقك منها كما هي. لكل منها بديل:

• ترقيم الصفحات من ⁦paginator⁩ في ⁦Laravel⁩ (وصفة في ⁦Storybook⁩)
• مؤشر الأداء رابطاً عبر ⁦asChild⁩ (وصفة في ⁦Storybook⁩)
• الحالة الفارغة داخل جدول (وصفة في ⁦Storybook⁩)
• مؤشر الخطوات لخطوات المعالج، بينما يبقى شريط ملخص المراحل من كود تطبيقك

#قبل الإطلاق

• يعرّف ملف الأنماط الطبقات قبل استيراد ⁦@dev-dga/css⁩.
• يغلف ⁦DgaProvider⁩ الجذر، ويتبدل الوضع الداكن عبر خاصية ⁦mode⁩.
• يرسل كل نموذج البيانات التي ينتظرها الخادم (راجع دليل النماذج).
• روجعت كل صفحة في الاتجاهين ⁦LTR⁩ و⁦RTL⁩، وفي الوضعين الفاتح والداكن.