@ux7/react

UX7 bileşen katmanı — yoğun SAP ekranları için. Sıfır dış istek, sistem fontu, kendi token sistemi (SAP temasına bağımlılık yok).

Kurulum

npm i @ux7/react

react ve react-dom (>=19) peer bağımlılık. Stil dosyası ayrı:

import '@ux7/react/styles.css'
import { Button, DataTable } from '@ux7/react'

Tema token'ları

Renk / boşluk / tipografi styles.css içinde :root üzerinde CSS custom property olarak tanımlı. Tüketici bunları ezerek markalayabilir:

:root {
  --ux7-accent: #0a5;
  --ux7-radius: 6px;
}

• Koyu mod: prefers-color-scheme otomatik; elle seçim için applyTheme('dark' | 'light' | 'system') (kök data-theme).
• Yoğunluk: applyDensity('compact' | 'comfortable') — kök data-density, kontrol yüksekliği ve tablo satır dolgusunu token seviyesinde değiştirir.

Bileşenler

primitives

• Button — variant: default / primary / ghost / danger; iconOnly
• Heading — level 1–3, size lg / xl
• TextInput Textarea — native; invalid, readOnly görsel olarak ayrı
• NumberInput — odaksızken Intl biçimli, odakta ham; toNumber dışa açık
• DateInput — native type=date, ISO değer, tarayıcı takvimi
• Select Checkbox RadioGroup — Base UI üstünde (odak/klavye/portal)

form

• Field — label + kontrol + hint + mesaj; aria-describedby / aria-invalid otomatik
• FormLayout — etiket-sol grid, dar ekranda tek sütun
• useFieldMessages(messages) — zarf mesajlarını alan / sayfa olarak ayırır

feedback

• MessageStrip MessageList — ton = SAP mesaj tipi (E/A→hata, W→uyarı, …)
• Toast (ToastProvider + useToast) — geçici bildirim
• Dialog ConfirmDialog — Base UI; odak tuzağı, ESC, scroll kilidi
• BusyOverlay — içeriği kaplayan spinner, layout kaymaz

layout

• Page — başlık + alt başlık + sağ aksiyonlar
• Toolbar (Toolbar.Spacer) · Section

data

• LineChart — label, series: { id, label, data: { x, y }[] }[] zorunlu. xType='number' | 'time' (varsayılan number); time için x Unix milisaniyesidir ve UTC ile biçimlenir. y: null eksik veridir, çizgi bu noktada kesilir. X değerleri sıralanır; aynı seride tekrarlanan x, tekrarlanan seri kimliği, boş ad veya sonlu olmayan sayı açıklayıcı durum metni üretir. Çizgi sonunda ad + son mevcut değer gösterilir; beş kategorik renk tokenı (--ux7-chart-1…5), farklı çizgi desenleri ve nokta şekilleri birlikte kullanılır. En fazla 5 seri önerilir; daha fazla seride stiller tekrar eder. Tab her seriye bir kez uğrar; oklar, Home/End noktaları gezdirir. Fare/odak ayrıntıyı açar, Escape kapatır; Enter/Space yeniden açar. Açılabilir semantik veri tablosu eksik değerleri açıkça belirtir. description, source, xLabel, unit, locale, formatOptions, dateFormatOptions desteklenir. height=320 etiket alanına göre büyüyebilir. Genişlik kapsayıcıya uyar; 360 px altındaki alanda grafik içeriden kayar. Y ekseni sıfırı ve veri aralığını kapsar. Playground'daki Ayrı grafikler her seri için bağımsız y ölçeği kullanır; tutarları karşılaştırmak için Ortak ölçek seçilir.
• PieChart — data: { label: string; value: number }[], zorunlu label, innerRadiusRatio?: number, height?: number (320 px), locale?: string. Varsayılan 0 dolu pasta; 0.5–0.7 donut (ayrı bileşen yok). En fazla 6 dilim; fazlasında en büyük 5 korunur, kalanlar Diğer olur. Her dilimde görünür direkt etiket, değer ve yüzde zorunludur. Sıfırlar çizilmez; negatif/sonlu olmayan değer veya boş etiket açıklayıcı durum metni üretir. Ekran başına tek pasta/donut kullanın; yan yana yerleştirmeyin. Bu bir ekran yerleşim kuralıdır; bileşen diğer grafiklerin varlığını denetlemez. Dar alanda etiketleri korumak için grafik yatay kaydırılır.
• GaugeChart — value, label zorunlu; min=0, max=100, target, unit, tone, height=240 (px), locale desteklenir. 240° yayda tek değerin bir limite karşı gösterimi içindir; çok serili/kategorik veri için kullanılmaz. Track --ux7-border; dolgu varsayılan ve info için --ux7-accent, diğer tonlarda --ux7-success/warning/error. Hedef aynı rengin koyu tonuyla işaretlenir. role="meter", ARIA değer/sınır/metin alanları ve {value}/{max} ({percent}) metin alternatifi sağlar; yüzde min–max aralığına göre hesaplanır. Değer aralığa çekilir; geçersiz aralık 0–100 olur; sonlu olmayan değer veri yok durumudur. Aralık dışı hedef çizilmez. Sayılar locale veya uygulama diline göre biçimlenir. Lineer ProgressIndicator ayrı bileşen olarak kalır.
• DataTable — TanStack Table + Virtual: sanallaştırma (50k+), yapışkan başlık
  • ilk sütun, sütun sürükleme, sunucu-taraflı sıralama (onSortChange), satır seçimi, depth/expander slot'u (ağaç tur 3)
• textColumn numberColumn customColumn — sütun tanımı yardımcıları

sap

• ObjectStatus — anlamsal renk + her zaman metin (renk körlüğü)
• ValueHelpDialog (F4) — 250 ms debounce, AbortController, klavye, son seçilenler; veri çekmez, search prop'u uygulamadan gelir
• FilterBar — isimli filtreler + chip'ler; select / date / text / valuehelp tipleri

CustomUI5 ekran bileşenleri

Card, Grid, Panel, KpiCard, Badge, Skeleton, Drawer, Stepper, Timeline, FileUploader ve Slider eklendi. Hepsi paket girişinden prop tipleriyle birlikte export edilir. Drawer mevcut Dialog odak/katman altyapısını kullanır; ValueHelpDialog yükleme görünümü ortak Skeleton'a bağlandı.

Playground → Satınalma çalışma alanı bu bileşenleri birlikte gösterir. Her bileşenin ayrı kullanım örneği ve prop tablosu da vardır. CustomUI5 eşlemesi ve kullanım sözleşmesi doğrulama, dosya seçimi ve kapsam ayrıntılarını anlatır.

Geliştirme komutları

Bu paket ux7 monorepo'sunun bir workspace'i. Bileşenler tek tek apps/playground üzerinde denenir. packages/ux7-react/src/test/ altında Vitest + Testing Library + vitest-axe testleri var.

npm run build -w @ux7/react      # dist/ (ESM, preserveModules) + styles.css + index.d.ts
npm run test -w @ux7/react       # birim + etkileşim
npm run test:a11y -w @ux7/react  # vitest-axe
npm run playground               # apps/playground dev