dev-dga

كود منصات هيئة الحكومة الرقمية ← React 19

نظام التصميم الحكومي السعودي، بمكونات React.

مكتبة واجهات حرة الاستخدام برخصة MIT لكود منصات هيئة الحكومة الرقمية: 65 مكون React 19 متاح الوصول، مبني للاتجاه من اليمين إلى اليسار، جاهز للوضع الداكن، ومتوافق مع WCAG 2.2 AA.

مشروع مستقل. غير تابع لهيئة الحكومة الرقمية السعودية ولا معتمد منها.

تصفح المكوناتStorybook
مباشر · جرب تبديل السمة ↑
Building permitStep 2 of 4
رخصة بناءالخطوة 2 من 4
معاينة مكون · DigitalStamp

خدمة حكومية مسجلة لدى هيئة الحكومة الرقمية.

بيانات تجريبية. هذا الموقع ليس خدمة حكومية مسجلة.
التثبيت
npm i @dev-dga/react @dev-dga/css @dev-dga/tokens
65مكون
3حزم
WCAG 2.2 AA
عربي و RTL
وضع داكن
React 19

البراهين

ثلاثة أشياء يتحقق منها أي فريق حكومي أولاً.

كل ما نقوله هنا وراءه صفحة تثبته. اقرأها بنفسك.

التوافقمطابق لكود المنصاتكل مكون مطابق لصفحته الرسمية في كود منصات هيئة الحكومة الرقمية، مع حالته.اطلع على التغطيةإمكانية الوصولWCAG 2.2 AA بتقييم ذاتيما ندعمه، وكيف نختبره، وما يبقى على عاتقك.اقرأ البيانالعربية والاتجاهلغة أولى في كل مكونتقويم هجري، وترقيم عربي للقوائم، وبيانات سعودية تبقى مقروءة.استكشف العربيةStorybookكل مكون، مباشرةمستكشف المكونات الكامل: فاتح وداكن، عربي وإنجليزي.افتح Storybook

عن المكتبة

نظام واحد لكل منصة حكومية.

يحول dev-dga كود منصات هيئة الحكومة الرقمية إلى مكتبة React جاهزة للتثبيت، لتبني الفرق منتجات متسقة ومتاحة الوصول وعربية أولاً دون إعادة بناء الأساسيات.

مطابق للمواصفة

الألوان والخطوط والمسافات والمكونات تطابق كود منصات هيئة الحكومة الرقمية، قيمة بقيمة.

عربي أولاً

الاتجاه من اليمين إلى اليسار وخط IBM Plex Sans Arabic هما الأساس منذ البداية.

قابل للتركيب وموثق الأنواع

React 19، وأنماط cva، وتركيب asChild، وأنواع TypeScript كاملة لكل خاصية.

رخصة MIT

مستقل وحر الاستخدام برخصة MIT. غير تابع لهيئة الحكومة الرقمية الرسمية.

التثبيت

ثلاث خطوات لبدء الاستخدام.

أضف الحزم الثلاث، واستورد ملف الأنماط مرة واحدة، وضع تطبيقك داخل المزود. هذا كل الإعداد.

ثبت الحزم

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

استورد الأنماط مرة واحدة (في الجذر مثلاً)

import '@dev-dga/css';

ضع تطبيقك داخل المزود وابدأ

import { DgaProvider, Button } from '@dev-dga/react';export default function App() {  return (    <DgaProvider dir="rtl" mode="light" theme={{ primary: 'saGreen' }}>      <Button>ابدأ الآن</Button>    </DgaProvider>  );}

السمات

رمز واحد يقود النظام كله.

عند تبديل اللون الرئيس على المزود تتغير ألوان كل مكون، وتشتق حالات التمرير والضغط تلقائياً عبر color-mix().

theme = { primary: 'info' }مباشر
مميزتجريبي

العربية والاتجاه

الاتجاه من اليمين إلى اليسار هو الأصل.

عند ضبط dir="rtl" على المزود ينعكس التخطيط كله عبر الخصائص المنطقية. ويغطي خط IBM Plex Sans Arabic العربية واللاتينية من عائلة واحدة.

dir="ltr"English

Renew vehicle registration

Letters and numbers

EligibleSR 300
dir="rtl"العربية

تجديد استمارة المركبة

أحرف وأرقام

مؤهلة300 ر.س

الوضع الداكن

كل سطح يقرأ بوضوح في الوضع الداكن.

يعتمد الوضع الداكن على متغيرات --ddga-* وألوان اختيرت لكل سطح على حدة. ويعمل المكون نفسه في الوضعين دون اختلاف.

mode="light"light

تجديد استمارة المركبة

أحرف وأرقام

مؤهلة300 ر.س
mode="dark"dark

تجديد استمارة المركبة

أحرف وأرقام

مؤهلة300 ر.س

إمكانية الوصول

توافق WCAG 2.2 AA، مثبت بالاختبار.

أساسيات Radix للعناصر المعقدة، ودلالات لوحة مفاتيح حقيقية مختبرة في المتصفح، وفحوص axe تفشل البناء عند أي تراجع.

أساسيات Radix

القوائم والحوارات والتبويبات تعتمد أساسيات مجربة لضبط ARIA وإدارة التركيز.

دلالات لوحة مفاتيح حقيقية

التنقل بالأسهم وفخاخ التركيز و Escape مختبرة في Playwright.

مختبر بـ axe

لكل مكون فحوص vitest-axe تفشل البناء عند أي تراجع في إمكانية الوصول.

تركيز ظاهر

حلقة تركيز ثابتة بلون الحبر، مع احترام prefers-reduced-motion.

البنية

ثلاث حزم، واتجاه واحد للتدفق.

الرموز هي المصدر الأساسي. تحولها حزمة CSS إلى متغيرات في طبقات، بينما تخلو حزمة React من أي CSS وتستخدم أصنافاً تستدعي تلك المتغيرات.

أمثلة تطبيقية

شاشات حقيقية، مبنية بالكامل من المكتبة.

شاهد المكونات مركبة في منتجات كاملة، لوحات وخدمات، بالعربية والإنجليزية، في الوضعين الفاتح والداكن.

لوحة تحكم

مسار

لوحة خدمات حكومية فيها مؤشرات ورسوم بيانية وجدول خدمات ونشاط، مبنية بالكامل من مكونات dev-dga.

معاينة مباشرةCode

القوالب

صفحات حكومية كاملة، من المكتبة وحدها.

يجمع كل قالب أقسام صفحة من كود منصات هيئة الحكومة الرقمية من مكونات dev-dga: الشريط الحكومي، والترويسة، والقسم الرئيسي، ومن نحن، والخدمات، والأخبار، والشركاء، والتذييل. كل قالب متجاوب، ويعمل بالعربية والإنجليزية وفي الوضعين الفاتح والداكن.

قالب الصفحة الرئيسية بالعربية في الوضع الفاتح: القسم الرئيسي ومن نحن والخدمات والأخبار والشركاء.
قالب الصفحة الرئيسية بالعربية على شاشة الجوال.
قالب

قالب الصفحة الرئيسية الحكومية

كل قسم من الشريط الحكومي إلى التذييل مركب من dev-dga دون أي مكون مخصص. انسخ البنية، وبدّل المحتوى، وانشر.

  • dev-dga فقط
  • عربي وإنجليزي
  • فاتح وداكن
  • متجاوب
عرض القالب
قالب اليوم الوطني السعودي بالعربية في الوضع الفاتح: واجهة البطاقات ومن نحن والخدمات.
قالب اليوم الوطني السعودي بالعربية على شاشة الجوال.
قالب

قالب اليوم الوطني السعودي

الصفحة نفسها بهوية اليوم الوطني، مع واجهة من ست بطاقات تتنقل بين محاور الحملة، وأشرطة زخرفية بين الأقسام، وتذييل مزخرف.

  • dev-dga فقط
  • عربي وإنجليزي
  • واجهة متحركة
  • يحترم تقليل الحركة
عرض القالب

المكتبة

65 مكون، مرتبة حسب طريقة عملك.

من الأزرار والحقول إلى الطبقات المنبثقة والرسوم وهيكل تطبيق كامل، ولكل منها أمثلة حية وكود جاهز للنسخ.

5الأزرار والإجراءاتعناصر تطلق إجراءً أو تغير حالة.
17حقول الإدخالحقول وعناصر لجمع المدخلات، مع دعم وصول مدمج للحقول.
16عرض البياناتأسطح وعناصر لعرض المحتوى والسجلات.
1تمثيل البياناترسوم بيانية مبنية على لوحة ألوان هيئة الحكومة الرقمية.
8التنبيهات والحالةرسائل الحالة والتقدم والإشعارات العابرة.
8الطبقات المنبثقةطبقات تطفو فوق الصفحة، ترسى جميعها في جذر المزود.
8التنقلالإرشاد والتسلسل وكشف المحتوى.
1هيكل التطبيقتخطيط هيكلي لتطبيقات كاملة.
1المزود والأدواتسياق التشغيل والخطافات والأدوات التي تربط الكل.

أسئلة شائعة

أسئلة عن مكونات React لكود المنصات.

ما تسأل عنه الفرق قبل اعتماد المكتبة: ما كود المنصات، وكيف تثبتها، وإلى أي مدى تصل ضمانات العربية وإمكانية الوصول والترخيص.

هل توجد مكتبة مكونات React لكود المنصات؟

نعم. dev-dga مكتبة واجهات حرة الاستخدام برخصة MIT تطبق كود المنصات بـ React 19، وتضم 65 مكون متاح الوصول في ثلاث حزم على npm: ‏@dev-dga/react و @dev-dga/css و @dev-dga/tokens.

تصفح كل المكونات
ما كود المنصات؟

كود المنصات نظام التصميم الموحد للخدمات الحكومية الرقمية في السعودية، وتصدره هيئة الحكومة الرقمية. يحدد الألوان، الخطوط، المسافات، ومكونات الواجهة التي تشترك فيها المنصات الحكومية، مما يجعل خدمات الجهات المختلفة تبدو نظاماً واحداً.

عرض جدول التغطية
ما الفرق بين dev-dga وحزمة platformscode-new-react؟

تغلف حزمة platformscode-new-react على npm مكتبة @platformscode/core، وهي مكتبة مكونات ويب مبنية بـ Stencil، عبر مخرج React في Stencil. ويكون كل مكون فيها عنصراً مخصصاً (custom element) يحيط به غلاف React مولد. لا تحتوي صفحتها على npm على README أو موقع أو مستودع مصدري، ولم نتمكن من التأكد من الجهة الناشرة لها. وتنشر صفحات كود المنصات في هيئة الحكومة الرقمية دليلاً بصيغة PDF، ولا تذكر أي حزمة npm أو مستودع. لذلك تحقق بنفسك من مصدر أي حزمة قبل الاعتماد عليها. وتختلف dev-dga بأنها تطبيق أصلي بـ React 19: لا تحتاج إلى بيئة تشغيل للعناصر المخصصة، وتستخدم خصائص React وأنواعها مباشرة، وتدعم React Server Components. وهي أيضاً مكتبة مستقلة لا تدعي الصفة الرسمية.

المقارنة بالمواصفة
كيف أثبت مكونات React لكود المنصات؟

ثبّت الحزم الثلاث بالأمر npm i @dev-dga/react @dev-dga/css @dev-dga/tokens، ثم استورد ملف الأنماط مرة واحدة في جذر التطبيق، وضع شجرتك داخل DgaProvider. يحمل المزود اتجاه النص، الوضع الداكن، وسمة العلامة. Tailwind اختياري، ويدعم جسر الرموز إصداريه الثالث والرابع.

قراءة دليل التثبيت
هل تدعم المكونات العربية والاتجاه من اليمين إلى اليسار؟

نعم. الاتجاه من اليمين إلى اليسار هو الوضع الأساسي في المكتبة منذ تصميمها. ينعكس كل مكون عبر الخصائص المنطقية في CSS. وتشمل المكتبة منتقي تاريخ هجري وأم القرى، ترقيم القوائم بالأبجدية، اتصال حروف محمياً، وعرضاً سليم الاتجاه لرقم الهوية والآيبان وأرقام الجوال ‎+966.

عرض أمثلة العربية والاتجاه
هل المكونات متاحة الوصول؟

تستهدف المكونات كلها، وعددها 65، معيار WCAG 2.2 AA. تعتمد القوائم، الحوارات، والتبويبات على أساسيات Radix لضبط ARIA وإدارة التركيز. ونختبر دلالات لوحة المفاتيح في Playwright، وتوقف فحوص axe-core البناء عند أي تراجع. والبيان تقييم ذاتي لم يخضع لتدقيق خارجي.

قراءة بيان التوافق
هل dev-dga حرة الاستخدام تجارياً؟

نعم. الحزم الثلاث برخصة MIT، ويمكنك استخدامها مجاناً في المشاريع التجارية والحكومية دون حد لعدد المستخدمين أو عقد دعم أو شرط لذكر المصدر.

هل هذه المكتبة الرسمية لهيئة الحكومة الرقمية؟

لا. مكتبة dev-dga تطبيق مستقل، وليست تابعة لهيئة الحكومة الرقمية السعودية ولا معتمدة منها. تتبع المكتبة مواصفة كود المنصات المنشورة، وتربط صفحة التوافق كل مكون بما يقابله فيها.

مراجعة التوافق مع كود المنصات

MIT · حر الاستخدام · React 19

ابن منصات حكومية يستطيع الناس استخدامها فعلاً.

تصفح المكتبةGitHub
MIT