RAKAEZ
Component Library

مكتبة المكونات

Reusable UI Components · For Angular Frontend Team · ٣٢ مكون

homeالرئيسية 🖥 Admin 📝 Validation 🔐 Permissions
الألوان الخطوط الأزرار الحقول Chips Cards جداول Modals Toasts Alerts Avatars Progress Tabs Breadcrumbs Pagination حالات فارغة Loading
١ · الألوان · Colors

منظومة ألوان موحدة لكل التطبيق · ٤ ألوان أساسية + ٤ سيمانتك.

Gold (Primary)
#D4A017 → #F2C94C
--color-primary
Ink (Dark)
#191C1D
--color-ink
Background
#F8F9FA
--color-bg
Surface
#FFFFFF
--color-surface
Success
#22C55E
Warning
#F59E0B
Error
#EF4444
Info
#3B82F6
// Angular Material Theme
$primary: mat.define-palette($gold-palette, 400);
$accent: mat.define-palette(mat.$amber-palette);
$warn: mat.define-palette(mat.$red-palette);
٢ · الخطوط · Typography

خط Cairo (الأساسي) + Tajawal (احتياطي) · ٧ مستويات حجم.

H1 · 48px
عنوان رئيسي للصفحة
font-extrabold text-5xl
H2 · 32px
عنوان قسم
font-extrabold text-3xl
H3 · 24px
عنوان فرعي
font-bold text-2xl
H4 · 18px
عنوان كرت
font-bold text-lg
Body · 14px
نص عادي للقراءة العامة في كل مكان في التطبيق
text-sm
Caption · 12px
نص توضيحي صغير · ملاحظات
text-xs text-ink-500
Label · 10px
LABEL TEXT
text-[10px] uppercase
٣ · الأزرار · Buttons

٥ variants × ٣ أحجام × ٤ states = أكثر من ٦٠ تركيبة.

Variants · ٥ أنواع
Sizes · ٣ أحجام
States · الحالات
With Icons
// Component Spec
<rk-button variant="primary" size="md" [loading]="isLoading"></rk-button>
// Props:
variant: 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
size: 'sm' | 'md' | 'lg'
icon?: string · iconPosition: 'left' | 'right'
loading: boolean · disabled: boolean
fullWidth: boolean · type: 'button' | 'submit'
٤ · حقول الإدخال · Inputs

١٢ نوع حقل · ٤ states لكل واحد.

search
errorهذا الحقل مطلوب
check_circleالبريد متاح
search
٥ · الـ Chips / Badges

للحالات والتصنيفات السريعة · ٥ ألوان × ٢ حجم.

Status Chips
مكتمل قيد التنفيذ في الانتظار متأخر مقفل VIP
Closeable / Removable
القاهرة VIP فقط نشط
Numeric Badge
٦ · الكروت · Cards

٤ أنماط رئيسية للكروت.

Basic Card

عنوان الكرت

وصف قصير لمحتوى الكرت أو معلومة إضافية.

KPI Card
المشاريع النشطة
folder_special
42
trending_up+8 هذا الشهر
Image Card

فيلا الياسمين

الزمالك · ١٨٠ م²
Action Card (Hoverable)
add_circle

إنشاء مشروع جديد

ابدأ مشروع جديد بكل تفاصيله
٧ · الجداول · Data Tables

جدول بـ sorting · pagination · selection · filtering.

المشروع unfold_more العميل الحالة التقدم إجراءات
فيلا الياسمين
VL-2026-014
أ
أحمد المهندس
 قيد التنفيذ
65%
شقة الزمالك
AP-2026-008
س
سارة كمال
 مكتمل
100%
دوبلكس الرحاب
DX-2026-005
ك
كريم سعيد
 متأخر
35%
عرض ١-٣ من ١٢٤ سجل
// Component API
<rk-data-table
[data]="projects$ | async"
[columns]="columns"
[selectable]="true"
[sortable]="true"
[pageSize]="20"
(rowClick)="openDetails($event)">
</rk-data-table>
٨ · النوافذ المنبثقة · Modals / Dialogs

٤ أنواع modals · sizes: sm (400px) · md (600px) · lg (800px) · xl (1000px).

Confirmation Dialog
warning

حذف المشروع؟

هذا الإجراء لا يمكن التراجع عنه. كل البيانات ستحذف نهائياً.

Form Dialog

إضافة مستخدم

// Service Usage
this.dialog.open(ConfirmDialogComponent, {
data: { title, message, type: 'danger' },
width: '400px'
});
٩ · الإشعارات السريعة · Toasts / Snackbars

٤ ألوان · auto-dismiss بعد ٤ ثوانٍ افتراضياً · يظهر أعلى يسار الشاشة.

check_circle
تم بنجاح
تم حفظ المشروع.
error
حدث خطأ
يرجى المحاولة مرة أخرى.
warning
تنبيه
يوجد تغييرات غير محفوظة.
info
معلومة
٣ مستخدمين متصلين الآن.
// Service
this.toast.success('تم بنجاح', 'تم حفظ المشروع');
this.toast.error('حدث خطأ', err.message);
this.toast.warn('تنبيه', '...');
this.toast.info('معلومة', '...');
١٠ · التنبيهات داخل الصفحة · Alerts / Banners

يظهر أعلى الصفحة أو فوق المحتوى المرتبط · ٤ ألوان.

check_circle
العملية مكتملة
تم إنشاء المشروع بنجاح ويمكنك الآن البدء في إضافة البنود.
error
خطأ في الحفظ
لم نتمكن من حفظ التغييرات. تأكد من اتصال الإنترنت.
warning
تنبيه مهم
لديك ٣ بنود متأخرة في هذا المشروع.
info
معلومة
يمكنك الآن استيراد البنود من ملف Excel.
١١ · الصور الشخصية · Avatars
Sizes
أ
أ
أ
أ
أ
أ
With Status / Group
س
أ
س
م
+5
١٢ · مؤشرات التقدم · Progress
Progress Bar
التصميم100%
التنفيذ65%
التشطيب25%
Circular Progress
65%
100%
١٣ · التبويبات · Tabs
محتوى التبويب النشط...
١٥ · ترقيم الصفحات · Pagination
عرض ١-١٠ من ١٢٤ سجل
١٦ · الحالات الفارغة · Empty States
folder_off

لا توجد مشاريع بعد

ابدأ بإنشاء مشروعك الأول لتظهر هنا.

search_off

لا توجد نتائج

جرّب كلمات بحث مختلفة أو أزل الفلاتر.

١٧ · حالات التحميل · Loading States
Skeleton Loader
Spinner / Loader
جاري التحميل...
جاري المعالجة...
// Components Available
<rk-skeleton type="text" />
<rk-skeleton type="card" />
<rk-skeleton type="table" rows="5" />
<rk-spinner size="sm | md | lg" />
<rk-progress-bar [progress]="65" />

سجل المكونات الكامل

٣٢ مكون جاهز للاستخدام في كل المشروع

📐 Layout (٦)
  • • rk-sidebar
  • • rk-topbar
  • • rk-page-header
  • • rk-breadcrumbs
  • • rk-tabs
  • • rk-grid-system
🎯 Actions (٤)
  • • rk-button
  • • rk-icon-button
  • • rk-button-group
  • • rk-fab
📝 Forms (٨)
  • • rk-input
  • • rk-textarea
  • • rk-select
  • • rk-multiselect
  • • rk-checkbox
  • • rk-radio
  • • rk-date-picker
  • • rk-file-upload
📊 Data Display (٧)
  • • rk-data-table
  • • rk-card
  • • rk-kpi-card
  • • rk-list
  • • rk-chip
  • • rk-avatar
  • • rk-badge
💬 Feedback (٤)
  • • rk-toast (service)
  • • rk-alert
  • • rk-dialog (service)
  • • rk-confirm-dialog
⏳ States (٣)
  • • rk-empty-state
  • • rk-skeleton
  • • rk-spinner