@edsis/component

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

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

Build

Jalankan build library dengan perintah berikut:

bunx ng build component

Artefak build akan ditulis ke dist/component.

Penggunaan Lokal

Untuk import dari workspace ini, gunakan path berikut:

@edsis/component

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

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

Untuk helper internal yang juga berguna di aplikasi, gunakan subpath paling kecil yang sesuai:

import { cn } from '@edsis/component/class';
import { uniqueId } from '@edsis/component/id';
import { overlayDismissals } from '@edsis/component/overlay';

@edsis/component/utils tetap tersedia untuk kompatibilitas, tetapi komponen baru sebaiknya mengimpor dari subpath kecil agar bundle tidak menarik helper overlay ketika hanya butuh class merge.

Unit Test

Jalankan unit test library dengan perintah berikut:

bunx ng test component --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 Button>, <input Input> | | Container/komposit tanpa padanan elemen native | Element selector | <Card>, <Dialog>, <Tabs> | | Behavior tanpa render (trigger, content marker) | Directive [Xxx] PascalCase | [PopoverTrigger], [Tooltip] |

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

Status Dependensi @angular/material

Library ini memakai @angular/material untuk @edsis/component/select, yang mempertahankan interaksi combobox/listbox Material sambil menerapkan skin shadcn. Calendar dan date picker tetap menggunakan primitive native/CDK:

• @edsis/component/select — turunan MatSelect/MatOption (SelectField/SelectItem, mat-optgroup, typeahead, dan pencarian opt-in).
• @edsis/component/calendar — grid tanggal native (role="grid", navigasi panah/Home/End/PageUp/PageDown, tampilan month/year/multi-year, locale via LOCALE_ID + Intl).
• @edsis/component/date-picker — komposisi input + Calendar dalam CDK overlay (touchUi = dialog terpusat dengan backdrop).

Konsumen yang memakai entry point select perlu menyediakan @angular/material beserta peer dependencies Angular-nya.