# سِياج (Siyaj) — ستاك الواجهة الأمامية (Frontend Stack) اختيارات مبنية على بحث لأفضل الأدوات في 2026، مع أولوية لدعم العربية (RTL) لأنه ميزة تمايز أساسية. ## المكوّنات المعتمدة | الطبقة | الأداة | السبب | |---|---|---| | الإطار | Next.js 16 + React 19 + TypeScript 5 | المعيار الاحترافي لتطبيقات SaaS | | التنسيق | Tailwind CSS v4 | أداء عالٍ، حديث، يتكامل مع shadcn | | نظام المكوّنات | shadcn/ui (Radix + Tailwind) | **دعم RTL رسمي من الدرجة الأولى (يناير 2026)** — الـ CLI يحوّل كلاسات الموضع الفيزيائية إلى منطقية تلقائياً؛ مستخدم في OpenAI و Adobe | | اللوحات والرسوم | Tremor (مبني على Recharts) | 35+ مكوّن جاهز للـ dashboards، يطابق جمالية shadcn — مثالي للوحات الأمن | | الرسوم منخفضة المستوى | Recharts v3 | الأساس، خفيف (~150kB)، declarative | | التدويل | next-intl | دعم عربي/إنجليزي + RTL | | الخطوط | Noto Sans Arabic (عربي) + Geist/Inter (لاتيني) | توصية shadcn الرسمية للعربية | | الأيقونات | lucide-react | الافتراضي في shadcn | | الجداول | TanStack Table | جداول الثغرات مع فرز/تصفية/ترقيم | | جلب البيانات وحالة الخادم | TanStack Query | إدارة احترافية للبيانات غير المتزامنة | | النماذج | react-hook-form + zod | تحقّق قوي من المدخلات | | السحب والإفلات | @dnd-kit | لوحات kanban/ترتيب | | الإشعارات | sonner | toasts أنيقة (جزء من shadcn) | ## قرارات RTL (حرجة للعربية) - ضبط `dir="rtl"` و `lang="ar"` على مستوى `` عند اللغة العربية. - استخدام الخصائص المنطقية في Tailwind (`ms-*`, `me-*`, `ps-*`, `pe-*`) بدل `ml/mr/pl/pr`. - shadcn CLI يتكفّل بالتحويل تلقائياً عند التثبيت. - الخط: Noto Sans Arabic كخط أساسي للعربية. - ثنائية اللغة: مفتاح تبديل عربي/إنجليزي مع تبديل الاتجاه. ## المرجعية / القوالب الملهمة - shadcn/ui admin dashboards مع RTL (NexaDash, Aniq UI, Shadcn Space) — للاسترشاد بالتصميم. - Tremor blocks — للوحات التحليلات الأمنية. ## أوامر التهيئة (مرجع) ```bash # إنشاء التطبيق npx create-next-app@latest apps/web --ts --tailwind --eslint --app --src-dir --import-alias "@/*" # shadcn/ui npx shadcn@latest init npx shadcn@latest add button card table badge dialog input form sonner # مكتبات إضافية npm i @tremor/react recharts next-intl @tanstack/react-table @tanstack/react-query react-hook-form zod @dnd-kit/core lucide-react ``` ## المصادر - shadcn/ui RTL — ui.shadcn.com/docs/rtl - Tremor — tremor.so - أفضل مكتبات React 2026 — Untitled UI / HeroUI / LogRocket