یک کتابخانه،هر زبانی که اضافه کنید
نیلی یک کتابخانهی کامپوننت ریاکت است که جهت، خط، ارقام و متریک تایپ را ورودی میگیرد؛ نه لایهای که آخر کار روی یک سیستم انگلیسی سوار شود.
npm i @nili/ui @remixicon/reactهر زبانی، یک درخت کامپوننت
جهت از CSS میآید و ارقام از Intl، و هیچکدام پراپ نیستند. این چهار زبان فقط نمونهاند؛ زبان بعدی یک فایل ترجمه و یک locale است، نه فورکِ کتابخانه.
سه مسئلهای که هر رابط چندزبانه به آن میخورد
اینها معمولاً در هر پروژه از نو و ناقص حل میشوند. نیلی یکبار و در لایهی کتابخانه حلشان میکند.
جهت، CSS است نه جاوااسکریپت
همهی کامپوننتها از پراپرتیهای منطقی استفاده میکنند: ms/me، ps/pe، start/end. داخل زیردرخت راستبهچپ هم کار میکنند، زیر SSR هم درستاند چون موقع رندر هیچجا document.dir خوانده نمیشود، و هیچ پراپ جهتی لازم نیست از بالا پایین بیاید.
ارقام، فرمتاند نه ترفند فونت
فونتهای FaNum گلیف فارسی را روی کدپوینت اسکی مینشانند: عدد فارسی دیده میشود ولی در DOM هنوز 123 است. جستوجوی داخل صفحه، کپیپیست و اسکرینریدر با چیزی که کاربر میبیند فرق میکنند — و مقداری که باید لاتین بماند، مثل شبا، راه فراری ندارد.
| formatNumber · en-US | 1,234,567.89 |
| formatNumber · fa-IR | ۱٬۲۳۴٬۵۶۷٫۸۹ |
| formatNumber · ar-EG | ١٬٢٣٤٬٥٦٧٫٨٩ |
| formatNumber · tr-TR | 1.234.567,89 |
| parseLocalizedNumber | ۱٬۲۳۴٬۵۶۷ → 1234567 |
یک نام توکن، هر دو تم
کامپوننتها هیچوقت dark: نمینویسند. هر کامپوننت یک توکن معنایی را صدا میزند و مقدار زیر پایش عوض میشود. یعنی تم تازه — کنتراست بالا، برند یک مشتری — یک استایلشیت است، نه بازنویسی کامپوننت.
فعلاً خصوصی است
نیلی روی یک اسکوپ خصوصی npm با مجوز UNLICENSED منتشر میشود و سورسش هنوز عمومی نیست. دسترسی نفر به نفر یا تیم به تیم داده میشود و بعد از تنظیم توکن، نصبش یک npm install معمولی است.
درخواست دسترسی
پروژه و اکانت npm یا گیتهابی که باید به سازمان @nili اضافه شود را بفرستید.
احراز هویت رجیستری
یک توکن فقطخواندنی در .npmrc بگذارید؛ هم لوکال هم روی CI.
نصب و راهاندازی
پکیج را نصب کنید، استایلشیت را ایمپورت کنید و درخت را داخل NiliProvider بگذارید.
# .npmrc
@nili:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${NILI_TOKEN}
# then
npm i @nili/ui @remixicon/reactimport { NiliProvider, Button } from '@nili/ui';
import '@nili/ui/styles.css';
<NiliProvider locale="fa" defaultTheme="system">
<Button color="primary">Save changes</Button>
</NiliProvider>سازندگان
دو نفر: یک فایل فیگما و یک کتابخانه، که عمداً با هم همقدم نگه داشته میشوند.
Aysan Zeinalvand
مهندسی سیستم طراحی — معماری، کامپوننتها، توکنها، تستها
کتابخانه را نوشته است: زنجیرهی توکن، لایهی راستبهچپ و اعداد، قراردادهای API کامپوننتها، رجیستری و CLI، و ۳۷۴ تستی که پشتشان ایستادهاند.
میخواهید روی پروژهتان بنشیند؟
بگویید چه میسازید تا دسترسی را آماده کنیم، یا سیستم را با تیمتان مرور میکنیم.