@ojiepermana/angular-component

Angular library ini berada di library/component dan dipublikasikan dengan nama paket @ojiepermana/angular-component.

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

Build

Jalankan build library dengan perintah berikut:

bunx ng build angular-component

Nama project di angular.json adalah angular-component. Artefak build akan ditulis ke dist/component.

Penggunaan Lokal

Untuk import dari workspace ini, gunakan path berikut:

@ojiepermana/angular-component

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

@ojiepermana/angular-component/button
@ojiepermana/angular-chart/bar
@ojiepermana/angular-component/icon
@ojiepermana/angular-theme/styles

Untuk helper, gunakan entry point terfokus agar helper murni tidak menarik runtime overlay:

import { cn, injectUniqueId } from '@ojiepermana/angular-component/utils/core';
import { connectedPositionFor } from '@ojiepermana/angular-component/utils/overlay';

@ojiepermana/angular-component/utils tetap tersedia sebagai compatibility barrel, tetapi kode baru sebaiknya memilih utils/core atau utils/overlay.

Unit Test

Jalankan unit test library dengan perintah berikut:

bunx ng test angular-component

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.

Dependensi runtime

• @angular/cdk adalah dependency langsung paket ini (overlay/portal/a11y dipakai oleh banyak komponen), jadi ikut terinstal otomatis — tidak ada lagi error Cannot find module '@angular/cdk/overlay'.
• @angular/common, @angular/core, @angular/forms, @angular/platform-browser, dan rxjs tetap peer dependency (disediakan oleh aplikasi Angular Anda).

Status Dependensi @angular/material

@angular/material masih menjadi peer dependency opsional untuk SelectField, yang kembali menggunakan MatSelect dan MatOption. Calendar dan DatePicker tetap memakai primitif native/CDK, sehingga consumer yang tidak mengimpor SelectField tidak perlu memasang Material.