ofui-react

Headless React UI utility components for the of* ecosystem.

Filosofi

ofui-react dibangun dengan prinsip Headless dan Accessible. Paket ini hanya menyediakan struktur HTML, logika state, dan manajemen interaksi, tanpa memaksakan gaya visual (CSS) tertentu.

Daftar Komponen

Layout & Navigasi

• DataPageLayout: Scaffolding master-detail.
• TabbedContent: Manajemen tab informasi.
• CollapsibleSection: Grup field yang bisa di-collapse.
• Modal: Dialog overlay dengan scroll lock.
• WizardStepper: Progress stepper untuk alur wizard multi-langkah.

Input & Data Entry

• InlineEditField: Input pintar dengan navigasi keyboard (Tab, Enter, Esc).
• NumberInput: Input angka dengan format ribuan otomatis (ID-ID).
• SearchableSelect: Dropdown dengan filter pencarian.
• SearchablePicker: Picker searchable untuk data besar (lebih aman dibanding native select panjang).
• SearchInput: Input pencarian dengan debouncing.
• ConfirmButton: Tombol dengan perlindungan klik ganda.

Data Display & Feedback

• DataBadge: Indikator status (success, warning, error).
• StatusBadge: Mapping status lifecycle ke variant badge semantik.
• StatusChip: Chip status ringkas untuk context state/session/health.
• DataSourceMeta: Metadata sumber data + timestamp pembaruan.
• EntityReference: Tampilan konsisten nama bisnis + id teknis.
• ActivityTimeline: Tampilan audit trail/riwayat.
• QuickActionsBar: Bilah aksi seragam.
• VirtualizedList: List performa tinggi untuk data besar.
• EmptyState: Tampilan saat data kosong.
• SummaryGrid: Ringkasan total transaksi.
• Notification: Sistem toast global (useNotification).

Penggunaan

import { NumberInput, useNotification } from 'ofui-react';
import 'ofui-react-style-basic';

function MyForm() {
  const { notify } = useNotification();
  return (
    <NumberInput 
      label="Harga" 
      value={1000000} 
      onChange={(v) => notify(`Nilai: ${v}`)} 
    />
  );
}