مستودع Arabic UI Components يركز على مكونات Front-end عربية يمكن إعادة استخدامها في أكثر من صفحة. التقنيات بسيطة: HTML وCSS وJavaScript، وهذا متعمد حتى تبقى الفكرة واضحة ويمكن نقل المكونات إلى مشاريع مختلفة بسهولة.
1. RTL يبدأ من البنية وليس من المحاذاة فقط
استخدام dir="rtl" يحدد الاتجاه الأساسي للمستند، لكن التصميم يحتاج أيضًا إلى التفكير في ترتيب عناصر التنقل، مواقع الأيقونات، المسافات، واتجاه المكونات التي تحتوي أرقامًا أو كلمات إنجليزية. الاعتماد على خصائص CSS المنطقية مثل margin-inline وpadding-inline يجعل المكون أكثر مرونة من ربطه دائمًا بـleft وright.
2. مكونات صغيرة وقابلة لإعادة الاستخدام
المستودع يضم شريط تنقل RTL، بطاقات إحصائية، حقول نماذج عربية، رسائل تنبيه، وتخطيط dashboard متجاوب. وجود هذه الوحدات بشكل منفصل يساعد على اختبار المظهر والسلوك قبل إدخالها في تطبيق أكبر.
3. النماذج العربية
النماذج تحتاج اهتمامًا خاصًا لأن القيمة قد تكون عربية أو بريدًا إلكترونيًا أو رقم هاتف أو كودًا إنجليزيًا. التصميم الجيد لا يفترض أن كل محتوى الحقل RTL؛ بل يسمح بتحديد الاتجاه المناسب للقيمة مع إبقاء label والتعليمات متوافقة مع اللغة العربية.
4. الاستجابة للشاشات الصغيرة
RTL لا يلغي قواعد responsive design. البطاقات والتخطيطات يجب أن تتحول من عدة أعمدة إلى عمود واحد أو عدد أقل حسب المساحة، بينما يبقى ترتيب القراءة منطقيًا. لذلك وجود dashboard responsive ضمن المختبر مفيد لاختبار هذا السلوك بشكل مستقل.
5. لماذا هذه المكونات مفيدة؟
- تقلل إعادة كتابة نفس أنماط RTL في كل مشروع.
- تجعل اختبار الواجهة العربية أسرع.
- تساعد على إبقاء HTML وCSS واضحين بدون اعتماديات كثيرة.
- يمكن استخدامها كنقطة بداية للوحات تحكم أو نماذج عربية.