@edsis/ui

Angular library ini berada di library/ui dan dipublikasikan dengan nama paket @edsis/ui.

Library ini menggunakan pola secondary entry point per folder. Import yang disarankan adalah langsung ke subpath yang dibutuhkan, misalnya @edsis/ui/button atau @edsis/chart/bar.

Build

Jalankan build library dengan perintah berikut:

bunx ng build ui

Artefak build akan ditulis ke dist/ui.

Penggunaan Lokal

Untuk import dari workspace ini, gunakan path berikut:

@edsis/ui

Untuk komponen atau utilitas spesifik, gunakan subpath secondary entry point:

@edsis/ui/button
@edsis/chart/bar
@edsis/ui/icon
@edsis/theme/styles

Unit Test

Jalankan unit test library dengan perintah berikut:

bunx ng test ui --watch=false

Runner test di workspace ini menggunakan Vitest melalui Angular build tooling.

Konvensi Selector

Aturan baku agar semua tim memakai mental model yang sama:

| Jenis primitif | Selector | Contoh | | ------------------------------------------------------------------------- | ----------------------------- | ---------------------------------------- | | Menempel ke elemen HTML semantik (button, input, label, textarea, select) | Attribute selector | <button ui-button>, <input ui-input> | | Container/komposit tanpa padanan elemen native | Element selector | <ui-card>, <ui-dialog>, <ui-tabs> | | Behavior tanpa render (trigger, content marker) | Directive [uiXxx] camelCase | [uiPopoverTrigger], [uiTooltip] |

Beberapa komponen menyediakan keduanya (ui-label, label[ui-label]) untuk markup fleksibel — gunakan bentuk attribute bila elemen native tersedia karena semantik & aksesibilitasnya gratis dari browser.

Status Dependensi @angular/material

@angular/material kini peer dependency opsional. Hanya tiga entry point yang masih memakainya:

• @edsis/ui/select (MatSelect)
• @edsis/ui/calendar (MatCalendar)
• @edsis/ui/date-picker (MatDatepicker)

Aplikasi yang tidak mengimpor ketiganya tidak perlu menginstal @angular/material dan tidak membayar byte Material sama sekali (tree-shaking per entry point). Komponen lain (checkbox, switch, radio, toast, tooltip) sudah native/CDK.

Jalur migrasi yang direncanakan (lihat issue tracker):

1. ui-calendar → grid tanggal native (role="grid", navigasi panah, token locale via DI) tanpa date adapter Material.
2. ui-date-picker → komposisi ui-input + ui-popover + ui-calendar.
3. ui-select → listbox di atas primitif ui-popover/ui-command (pola yang sama dengan ui-combobox).

Migrasi ini disengaja bertahap: implementasi listbox/calendar yang terburu-buru berisiko menurunkan kualitas aksesibilitas di bawah implementasi Material yang sudah matang.