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