مقدمة
نظام تصميم Truvar.ai هو مجموعة واحدة من رموز التصميم ومكونات React المبنية عليها. العربية فيه أولًا مع دعم كامل للكتابة من اليمين لليسار، وهو سهل الاستخدام للجميع بفضل React Aria، ومصمم ليبدو كتطبيق أصلي على الهواتف.
التثبيتأضف الحزمة وأنماطها.Next.jsالخطوط والتخطيط والروابط والعربية في App Router.المكوناتكل المكونات مع أمثلة حية.أمثلةشاشات كاملة مبنية بالنظام.
المبادئ
- للجميع أولًا. دعم لوحة المفاتيح والتركيز وقارئات الشاشة يأتي من React Aria، فيعمل كل مكوّن للجميع.
- لغتان وتخطيط واحد. المكونات تستخدم خصائص CSS منطقية، فتنعكس العربية بدون ملف أنماط منفصل.
- الرموز هي المرجع. الألوان والخطوط والمسافات والحواف تأتي من رموز التصميم، وليس من قيم ثابتة.
- أصلي على كل شاشة. المكونات نفسها تعمل بالفأرة ولوحة المفاتيح والإصبع.
ما الذي يتضمنه
| الاستيراد | المحتوى |
|---|---|
| @truvar-ai/design-system | المكونات الأساسية: الأزرار والحقول والقوائم والتواريخ والنوافذ والأوراق والجداول والإشعارات والبطاقات وشريط التنقل وحقول الهاتف والدولة والشعار |
| @truvar-ai/design-system/icons | أيقونات الواجهة وأيقونات النظام |
| @truvar-ai/design-system/charts | رسوم بيانية ومؤشرات وخرائط حرارية وقمع وخريطة العالم |
| @truvar-ai/design-system/voice | مشغل المكالمات والنص وسجل المكالمات والمكالمة المباشرة ومنشئ سير العمل |
| @truvar-ai/design-system/os | مكونات Truvar OS: شريط النظام وشريط الصوت وبطاقات المهام والموافقات |
| @truvar-ai/design-system/crm | المحادثات عبر كل القنوات والتسليم للذكاء الاصطناعي وجهات الاتصال والأدوار والصلاحيات |
| @truvar-ai/design-system/widget | مساعد المواقع: محادثة ورسائل صوتية ومكالمات مباشرة |
| @truvar-ai/design-system/tokens | رموز التصميم بصيغة JS ومتغيرات CSS و JSON |