Tek kütüphane,eklediğiniz her dil
Nili; yönü, yazı sistemini, rakamları ve tipografi ölçülerini baştan girdi olarak alan bir React bileşen kütüphanesidir. Sonradan eklenen bir çeviri katmanı değil.
npm i @nili/ui @remixicon/reactHer dil, tek bileşen ağacı
Yön CSS'ten, rakamlar Intl'den gelir; ikisi de prop değildir. Buradaki dört dil yalnızca örnek: sıradaki dil, kütüphaneyi çatallamak değil, bir çeviri dosyası ve bir locale demektir.
Her çok dilli arayüzün çarptığı üç sorun
Bunlar genelde her projede baştan ve eksik çözülür. Nili bir kez, kütüphane katmanında çözer.
Yön JavaScript değil, CSS’tir
Tüm bileşenler mantıksal özellikleri kullanır: ms/me, ps/pe, start/end. İç içe bir RTL alt ağacında da, SSR altında da çalışır; render sırasında document.dir okunmaz ve ağaç boyunca taşınan bir yön prop’u yoktur.
Rakamlar bir font hilesi değil, biçimlendirmedir
FaNum türü fontlar Farsça/Arapça rakam şekillerini ASCII kod noktalarının üzerine bindirir: rakam yerel görünür ama DOM’da hâlâ 123 durur. Sayfa içi arama, kopyala-yapıştır ve ekran okuyucu ekranla çelişir; IBAN gibi Latin kalması gereken bir değerin ise çıkışı yoktur.
| formatNumber · en-US | 1,234,567.89 |
| formatNumber · fa-IR | ۱٬۲۳۴٬۵۶۷٫۸۹ |
| formatNumber · ar-EG | ١٬٢٣٤٬٥٦٧٫٨٩ |
| formatNumber · tr-TR | 1.234.567,89 |
| parseLocalizedNumber | ۱٬۲۳۴٬۵۶۷ → 1234567 |
Tek token adı, iki tema
Bileşenler asla dark: yazmaz. Her bileşen tek bir anlamsal token çağırır, değer altından değişir. Yeni bir tema — yüksek kontrast, bir müşteri markası — bileşen değişikliği değil, tek bir stil dosyasıdır.
Şimdilik özel
Nili, UNLICENSED lisansıyla özel bir npm kapsamına yayımlanır; kaynak henüz açık değildir. Erişim kişi ya da ekip bazında verilir ve token tanımlandıktan sonra kurulum sıradan bir npm install’dur.
Erişim iste
Projeyi ve @nili organizasyonuna eklenecek npm veya GitHub hesabını bize iletin.
Kayıt defterinde kimlik doğrula
Salt okunur bir token’ı .npmrc dosyanıza ekleyin — hem yerelde hem CI’da.
Kur ve sar
Paketi kurun, stil dosyasını içe aktarın, ağacı NiliProvider ile sarın.
# .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>Yapanlar
İki kişi: bir Figma dosyası ve bir kütüphane, bilinçli olarak eşzamanlı tutuluyor.
Aysan Zeinalvand
Tasarım sistemi mühendisliği — mimari, bileşenler, token’lar, testler
Kütüphaneyi yazdı: token zinciri, RTL ve rakam katmanı, bileşen API kuralları, registry ile CLI ve arkalarındaki 374 test.
Projenizde kullanmak ister misiniz?
Ne geliştirdiğinizi söyleyin, erişimi hazırlayalım ya da sistemi ekibinizle birlikte gezelim.