dev-dga

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

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

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

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

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

التثبيت
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

المكتبة

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

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

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

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

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

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