nili/ui
الإصدار 0.2.0 — السجلّ وCLI

مكتبة واحدة،وأي لغة تضيفها

نيلي مكتبة مكوّنات React تتعامل مع الاتجاه والخط والأرقام ومقاييس الطباعة كمدخلات أساسية، لا كطبقة ترجمة تُضاف في النهاية.

$npm i @nili/ui @remixicon/react
٤١مكوّن
٢٢٠مكوّن فرعي
١٩٦محور تنويع
٨٦٩خاصيّة مُنمَّطة
٣٧٤اختبار ناجح

أي لغة، شجرة مكوّنات واحدة

الاتجاه يأتي من CSS والأرقام من Intl، ولا شيء منهما خاصيّة تُمرَّر. هذه اللغات الأربع أمثلة فقط؛ اللغة التالية ملف ترجمة وlocale، لا نسخة أخرى من المكتبة.

EnglishActive
فارسیفعال
العربيةنشط
TürkçeEtkin
أز
أيسان زينال‌وندحساب تاجر
نشط
التسوية التالية في 17 سبتمبر.
الرصيد القابل للسحب
١٬٢٣٤٬٥٦٧ريال
٦٨٪؜ من السقف الشهري١٨٬٠٠٠٬٠٠٠

ثلاث مشكلات تواجه كل واجهة متعدّدة اللغات

تُحلّ هذه عادةً في كل مشروع من جديد وبشكل ناقص. نيلي يحلّها مرّة واحدة على مستوى المكتبة.

01

الاتجاه CSS وليس JavaScript

تستخدم كل المكوّنات الخصائص المنطقية: ms/me وps/pe وstart/end. تعمل داخل شجرة فرعية RTL، وتعمل مع SSR لأن document.dir لا يُقرأ أثناء الرسم، ولا حاجة لتمرير خاصيّة اتجاه عبر الشجرة.

dir="ltr"dir="rtl"
02

الأرقام تنسيق، لا حيلة خطّية

خطوط FaNum تضع الأشكال العربية فوق نقاط ASCII: يبدو الرقم عربيًا بينما يبقى 123 في الـDOM. عندها يختلف البحث داخل الصفحة والنسخ وقارئ الشاشة عمّا يراه المستخدم — والقيمة التي يجب أن تبقى لاتينية، كرقم الآيبان، لا مهرب لها.

formatNumber · en-US1,234,567.89
formatNumber · fa-IR۱٬۲۳۴٬۵۶۷٫۸۹
formatNumber · ar-EG١٬٢٣٤٬٥٦٧٫٨٩
formatNumber · tr-TR1.234.567,89
parseLocalizedNumber۱٬۲۳۴٬۵۶۷ → 1234567
03

اسم رمز واحد، وكلتا السمتين

لا تكتب المكوّنات ‎dark:‎ أبدًا. كل مكوّن يستدعي رمزًا دلاليًا واحدًا وتتبدّل القيمة تحته. أي سمة جديدة — تباين عالٍ أو هويّة عميل — هي ملف أنماط، لا إعادة كتابة.

أوّلي--nili-blue-500: #335CFF
دلالي--nili-primary-base
@theme--color-primary-base
المكوّنbg-primary-base
تتبدّل الصفحة كاملة

خاصّ في الوقت الحالي

يُنشر نيلي على نطاق npm خاصّ برخصة UNLICENSED، ومصدره ليس عامًّا بعد. يُمنح الوصول لكل شخص أو فريق على حدة، وبعد ضبط الرمز يصبح التثبيت npm install عاديًا.

01

اطلب الوصول

أرسل لنا المشروع وحساب npm أو GitHub الذي يُضاف إلى منظمة ‎@nili‎.

02

توثيق السجلّ

ضع رمزًا للقراءة فقط في ‎.npmrc‎، محليًّا وفي الـCI.

03

التثبيت والتشغيل

ثبّت الحزمة، استورد ملف الأنماط، ولفّ الشجرة بـNiliProvider.

# .npmrc
@nili:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${NILI_TOKEN}

# then
npm i @nili/ui @remixicon/react
import { NiliProvider, Button } from '@nili/ui';
import '@nili/ui/styles.css';

<NiliProvider locale="fa" defaultTheme="system">
  <Button color="primary">Save changes</Button>
</NiliProvider>

من بناه

شخصان: ملف Figma ومكتبة، يُبقيان متوافقين عن قصد.

AZ

Aysan Zeinalvand

هندسة نظام التصميم — البنية والمكوّنات والرموز والاختبارات

كتب المكتبة: سلسلة الرموز، وطبقة RTL والأرقام، وأعراف واجهات المكوّنات، والسجلّ وأداة الطرفية، و374 اختبارًا تسندها.

BR

Behzad Rezazadeh

تصميم المنتج — المرجع الأساسي في Figma

صمّم النظام في Figma: تدرّجات الألوان، ومقياس الطباعة، وتشريح المكوّنات، وكل تنويع نفّذته المكتبة.

تريده في مشروعك؟

أخبرنا بما تبنيه لنهيّئ الوصول، أو نستعرض النظام مع فريقك.