lib-pajakio-v2 1.0.23 → 1.0.25

package/AGENTS.md

@@ -0,0 +1,174 @@
+# Panduan Library Component Pajak.io
+
+Dokumen ini menjelaskan cara memakai `lib-pajakio-v2`, daftar component yang diekspor, teknologi yang dipakai, dan syarat minimal agar library bisa digunakan di project lain.
+
+## Ringkasan
+
+`lib-pajakio-v2` adalah library UI berbasis Vue untuk aplikasi Pajak.io/Fintax. Entry point library berada di `src/install.js` dan mengekspor named component dari `src/components/index.js`.
+
+Package:
+
+- Nama package: `lib-pajakio-v2`
+- Versi saat dokumen dibuat: `1.0.24`
+- Main bundle: `dist/lib-pajakio-v2.common.js`
+- Style bundle: `dist/lib-pajakio-v2.css`
+
+## Bahasa dan teknologi
+
+Library ini memakai:
+
+- JavaScript
+- Vue Single File Component (`.vue`)
+- Vue 3
+- SCSS/Sass
+- HTML template Vue
+- CSS utility class lokal dari `src/assets/style`
+
+Build tool yang tersedia:
+
+- Vue CLI untuk build library (`npm run build-library`)
+- Vite untuk development/build aplikasi demo (`npm run dev`, `npm run build:vite`)
+
+## Syarat penggunaan di project lain
+
+Project yang memakai library ini sebaiknya memenuhi syarat berikut:
+
+- Menggunakan Vue 3.
+- Menggunakan bundler yang mendukung Vue SFC dan CSS import, misalnya Vite atau Vue CLI.
+- Meng-install dependency runtime yang dibutuhkan component:
+  - `vue`
+  - `vue-router` jika memakai component yang memakai `<router-link>` atau `$route`, seperti `DashboardFooter` dan sebagian alur `DashboardHeader`.
+  - `js-cookie` jika memakai `DashboardHeader` dengan fitur session/logout.
+- Mengimpor CSS library agar styling component aktif.
+- Memastikan alias `@` di project consumer tidak bentrok bila memakai source component langsung. Untuk penggunaan normal dari package, gunakan bundle `dist`.
+- Menyediakan data props dengan shape yang sesuai. Beberapa component masih mengakses property object secara langsung, jadi nilai `null`/shape berbeda bisa memicu error.
+
+## Instalasi dan penggunaan
+
+Install package dari registry/private registry yang digunakan project:
+
+```bash
+npm install lib-pajakio-v2
+```
+
+Import component yang dibutuhkan:
+
+```js
+import { BaseButton, FormInput, DatePicker } from "lib-pajakio-v2";
+import "lib-pajakio-v2/dist/lib-pajakio-v2.css";
+```
+
+Contoh pemakaian di Vue:
+
+```vue
+<template>
+  <form-input v-model="name" placeholder="Nama wajib pajak">
+    <template #label>
+      <typo-text variant="body-1-bold">Nama</typo-text>
+    </template>
+  </form-input>
+
+  <base-button variant="primary" icon-left="save">
+    Simpan
+  </base-button>
+</template>
+
+<script>
+import { BaseButton, FormInput, TypoText } from "lib-pajakio-v2";
+import "lib-pajakio-v2/dist/lib-pajakio-v2.css";
+
+export default {
+  components: { BaseButton, FormInput, TypoText },
+  data() {
+    return { name: "" };
+  },
+};
+</script>
+```
+
+Library ini belum menyediakan plugin installer global (`app.use(...)`). Cara paling aman adalah import named component dan register di component/page yang membutuhkan.
+
+## Development library
+
+Install dependency:
+
+```bash
+npm install
+```
+
+Jalankan demo Vue CLI:
+
+```bash
+npm run serve
+```
+
+Jalankan demo Vite:
+
+```bash
+npm run dev
+```
+
+Build library:
+
+```bash
+npm run build-library
+```
+
+## Component yang tersedia
+
+Named export dari `src/components/index.js`:
+
+- `AnimatedIconLogo`
+- `BaseButton`
+- `BaseIcon`
+- `BaseTable`
+- `Breadcrumbs`
+- `DashboardFooter`
+- `DashboardHeader`
+- `DatePicker`
+- `Dropdown`
+- `DropdownCheckbox`
+- `DropdownCompany`
+- `DropdownMultipleTag`
+- `DropdownSearchList`
+- `DropdownSelect`
+- `ExpansionPanel`
+- `FormCheckbox`
+- `FormGroupCheckbox`
+- `FormInput`
+- `FormInputTag`
+- `FormRadio`
+- `FormSwitch`
+- `FormTextarea`
+- `FormWysiwyg`
+- `LoadingIcon`
+- `ModalDialog`
+- `SideNav`
+- `Snackbar`
+- `Stepper`
+- `TablePagination`
+- `Tabmenu`
+- `TypoText`
+
+Ada juga banyak component SVG icon di `src/components/Icons/*`. Icon individual tidak diekspor satu per satu dari package utama, tetapi digunakan melalui `BaseIcon` dengan prop `iconName`.
+
+## Struktur dokumentasi component
+
+Detail component, props, events, slots, dan contoh penggunaan ada di:
+
+- `docs/specs/README.md`
+- `docs/specs/base-and-icons.md`
+- `docs/specs/forms.md`
+- `docs/specs/dropdowns.md`
+- `docs/specs/date-picker.md`
+- `docs/specs/navigation-layout.md`
+- `docs/specs/feedback-overlays.md`
+- `docs/specs/table-and-tabs.md`
+
+## Catatan integrasi penting
+
+- Mayoritas input memakai kontrak `v-model` Vue 3, yaitu prop `modelValue` dan event `update:modelValue`.
+- Beberapa component memakai event custom seperti `clickPage`, `changeSize`, `actionMenu`, `handleClose`, atau `actionRoute`.
+- Component `FormInput`, `FormTextarea`, `FormInputTag`, dan `FormWysiwyg` menerima slot `label`.
+- Component `Dropdown`, `DropdownCheckbox`, `DropdownCompany`, `ModalDialog`, `ExpansionPanel`, dan `Snackbar` mengandalkan slot untuk isi yang fleksibel.
+- `DashboardHeader` melakukan redirect logout dan membaca cookie `pajakio`; pakai component ini hanya bila aplikasi consumer memang punya flow session yang kompatibel.