@starasia/admin 8.2.8 → 8.3.0

package/dist/components/TableLayout/types.d.ts

@@ -0,0 +1,182 @@
+import { ReactNode } from 'react';
+import { IconName } from '@starasia/icon';
+
+export interface TableLayoutRowAction<T> {
+    key: string;
+    /** icon dari @starasia/icon (opsional) */
+    icon?: IconName;
+    /** teks tombol (mobile + kebab) + aria-label */
+    label: string;
+    /** Tooltip saat hover tombol. Default tidak ada tooltip — harus diset eksplisit. */
+    tooltip?: string;
+    /** Tampilkan teks label di sebelah icon (default false = icon only) */
+    showLabel?: boolean;
+    onClick: (row: T, index: number) => void;
+    /** return true → action tidak tampil untuk row ini */
+    hidden?: (row: T) => boolean;
+    /** return true → tombol dinonaktifkan */
+    disabled?: (row: T) => boolean;
+    /**
+     * Variant Button dari @starasia/button (default 'tertiary').
+     * Gunakan 'tertiary' untuk aksi normal, sesuaikan untuk aksi utama/destruktif.
+     */
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';
+    /**
+     * Tone/warna Button dari @starasia/button.
+     * Contoh: 'error' untuk hapus, 'success' untuk approve.
+     */
+    tone?: 'brand' | 'error' | 'success' | 'info' | 'neutral' | 'warning';
+}
+export type TableLayoutAlign = 'left' | 'center' | 'right';
+export type TableLayoutSortDirection = 'asc' | 'desc';
+export interface TableLayoutSort {
+    /** key kolom yang di-sort */
+    key: string;
+    direction: TableLayoutSortDirection;
+}
+/**
+ * Atribut span/skip untuk satu cell body (kasus merge / rowspan-colspan).
+ * Consumer yang menghitung merge-nya; TableLayout hanya menerapkan.
+ */
+export interface TableLayoutCellProps {
+    colSpan?: number;
+    rowSpan?: number;
+    /** kalau true, `<td>` tidak dirender (tertutup span dari sel lain) */
+    hidden?: boolean;
+}
+export interface TableLayoutColumn<T> {
+    /**
+     * Identitas stabil kolom — dipakai untuk hide/show & reorder.
+     * Kalau kosong, fallback ke `accessor` (string), lalu ke index.
+     */
+    key?: string;
+    /** key pada row untuk ambil nilai otomatis; abaikan kalau pakai `render` */
+    accessor?: keyof T | (string & {});
+    /** judul kolom di header */
+    title: ReactNode;
+    /** icon di sebelah kiri judul header (otomatis 16×16) */
+    icon?: IconName;
+    /** custom render isi cell; menang atas `accessor` */
+    render?: (row: T, rowIndex: number, data: T[]) => ReactNode;
+    /** perataan header + cell (default 'left') */
+    align?: TableLayoutAlign;
+    /** lebar awal kolom, mis. '200px' | 160 */
+    width?: string | number;
+    /** lebar minimum saat di-resize (px) */
+    minWidth?: number;
+    /** override resize per kolom; default ikut prop `resizable` di TableLayout */
+    resizable?: boolean;
+    /** boleh di-sort lewat menu kolom (default true bila ada accessor/sortKey) */
+    sortable?: boolean;
+    /** sumber nilai untuk sort kalau beda dari `accessor` (mis. kolom `render`) */
+    sortKey?: keyof T;
+    /** sembunyikan menu kolom (Ascending/Descending/Freeze/Hide) di kolom ini */
+    disableMenu?: boolean;
+    /** kolom terkunci — tidak bisa di-hide (item "Hide column" disembunyikan) */
+    locked?: boolean;
+    /**
+     * Jadi headline di layout mobile (judul kartu / teks utama baris collapsed).
+     * Kalau tidak ada kolom yang ditandai, fallback ke kolom pertama.
+     */
+    primary?: boolean;
+    /** sembunyikan kolom ini sepenuhnya saat layout mobile */
+    hideOnMobile?: boolean;
+    /**
+     * Grouped header: kalau diisi, kolom ini jadi GRUP (accessor/render diabaikan)
+     * dan `children` adalah leaf-column yang menyetir body. Mendukung 1 tingkat grup.
+     * Catatan: saat ada grup, resize & persist-width otomatis non-aktif.
+     */
+    children?: TableLayoutColumn<T>[];
+    /**
+     * Merge sel body (rowspan/colspan). Dipanggil per baris; kembalikan
+     * `{ colSpan, rowSpan, hidden }`. Tandai `hidden: true` pada sel yang
+     * tertutup oleh span sel lain. Diabaikan di layout mobile.
+     */
+    cellProps?: (row: T, rowIndex: number, data: T[]) => TableLayoutCellProps;
+}
+/**
+ * State visibility + urutan kolom. Bentuknya kompatibel dengan `ColumnPrefState`
+ * yang di-emit `FilterBar.onColumnsChange`, jadi bisa langsung disambungkan.
+ */
+export interface TableLayoutColumnState {
+    /** urutan key kolom (boleh subset / lengkap) */
+    order?: string[];
+    /** key kolom yang disembunyikan */
+    hidden?: string[];
+    /**
+     * Freeze "sampai kolom ini": semua leaf dari kiri s/d key ini dipin (sticky kiri).
+     * Kosong = tidak ada yang dibekukan.
+     */
+    frozenKey?: string;
+}
+export interface TableLayoutProps<T> {
+    /** definisi kolom (wajib) */
+    columns: TableLayoutColumn<T>[];
+    /** baris data (wajib) */
+    data: T[];
+    /**
+     * Action buttons per baris — muncul sebagai overlay di atas row saat hover
+     * (Desktop/pointer: tersembunyi, fade-in saat hover · Touch: selalu terlihat).
+     * ≤ 5 visible action → icon buttons inline.
+     * > 5 visible action → kebab menu ⋮.
+     */
+    rowActions?: TableLayoutRowAction<T>[];
+    /** key unik per row; default pakai index */
+    getRowKey?: (row: T, index: number) => string | number;
+    /** padding scale, diteruskan ke primitif Table (default 'md') */
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    /** aktifkan drag-resize lebar kolom (default false) */
+    resizable?: boolean;
+    /**
+     * Kalau diisi, lebar hasil resize dipersist ke localStorage dengan key ini
+     * (lewat `useColumnWidths`) dan dipulihkan saat reload.
+     */
+    widthStorageKey?: string;
+    /**
+     * Visibility, urutan, & freeze kolom. Controlled bila diisi (sambungkan dari
+     * `FilterBar.onColumnsChange` + `onColumnStateChange`); kalau tidak, TableLayout
+     * kelola sendiri (uncontrolled).
+     */
+    columnState?: TableLayoutColumnState;
+    /** dipanggil saat hide/freeze dari menu kolom mengubah state */
+    onColumnStateChange?: (state: TableLayoutColumnState) => void;
+    /**
+     * Tampilkan menu kolom di header (Ascending, Descending, Freeze, Hide column).
+     * Muncul saat hover / saat salah satu item aktif.
+     */
+    columnMenu?: boolean;
+    /**
+     * Sort aktif (controlled). Kalau `onSortChange` diisi → mode server (TableLayout
+     * tidak mengurutkan data sendiri, hanya emit). Tanpa `onSortChange` → client-side.
+     */
+    sort?: TableLayoutSort | null;
+    /** sort awal (uncontrolled) */
+    defaultSort?: TableLayoutSort | null;
+    /** dipanggil saat sort berubah; keberadaannya mengaktifkan mode server */
+    onSortChange?: (sort: TableLayoutSort | null) => void;
+    /**
+     * Tinggi area tabel. Default: mengisi sampai bawah layar
+     * (`calc(100vh - posisiAtas)`, ikut menyesuaikan saat window di-resize).
+     * Override bebas oleh consumer, mis. '60vh' | 480 | '100%'.
+     * Area selalu scrollable (vertikal & horizontal) dan header sticky.
+     */
+    height?: string | number;
+    /**
+     * Layout saat layar < `mobileBreakpoint`:
+     * - 'cards'  : tiap row jadi kartu (label : value bertumpuk) — default
+     * - 'expand' : list ringkas (kolom `primary`) + tap untuk memuai detail
+     * - 'scroll' : tetap tabel dengan horizontal scroll
+     */
+    mobileLayout?: 'cards' | 'expand' | 'scroll';
+    /** titik switch ke layout mobile (default 'md' = < 768px) */
+    mobileBreakpoint?: 'sm' | 'md';
+    /**
+     * Baris pemisah full-width sebelum `row` (mis. grup separator "— Jakarta —").
+     * Kembalikan `null` kalau tidak ada separator untuk baris itu.
+     */
+    groupSeparator?: (row: T, index: number, prevRow: T | undefined) => ReactNode | null;
+    /** baris summary/total full-width di paling bawah body */
+    summary?: ReactNode;
+    /** ditampilkan saat `data` kosong */
+    emptyState?: ReactNode;
+}

package/dist/components/index.d.ts

@@ -13,7 +13,7 @@ export * from './Section';
 export * from './AdvanceFilterBar';
 export * from './FilterBar';
 export * from './TableSection';
-export * from './DataGrid';
+export * from './TableLayout';
 export * from './EachUtils';
 export * from './DecisionWrapper';
 export * from './Form';