1mpacto-react-ui 0.2.0-beta.9 → 1.0.1

package/dist/src/interfaces/components/Table/index.d.ts

@@ -1,94 +1,483 @@
 import { Table as ITableTanstack, Row, ColumnDef } from '@tanstack/react-table';
 import { default as React } from 'react';
 import { ITableVirtualization, IWrapperProps } from '../Virtualization/TableVirtualization';
+
+/**
+ * [ID] : Definisi kolom tabel.
+ * [EN] : Table column definition.
+ * @template T - [ID] : Tipe data baris. [EN] : Row data type.
+ */
 export type ITableColumnDef<T = unknown> = ColumnDef<T>;
+/**
+ * [ID] : Interface untuk breakpoint kolom tabel.
+ * [EN] : Interface for table column breakpoint.
+ */
+export interface ITableColumnBreakpoint {
+    /**
+     * [ID] : Lebar maksimum (opsional).
+     * [EN] : Maximum width (optional).
+     */
+    maxWidth?: number;
+    /**
+     * [ID] : Lebar minimum (opsional).
+     * [EN] : Minimum width (optional).
+     */
+    minWidth?: number;
+    /**
+     * [ID] : Daftar kolom.
+     * [EN] : List of columns.
+     */
+    columns: string[];
+    /**
+     * [ID] : Kolom nyata (opsional).
+     * [EN] : Real columns (optional).
+     */
+    realColumns?: string[];
+    /**
+     * [ID] : Reset ekspansi (opsional).
+     * [EN] : Reset expanded (optional).
+     */
+    resetExpanded?: boolean;
+}
+/**
+ * [ID] : Tipe fungsi render sub-komponen tabel.
+ * [EN] : Table sub-component render function type.
+ * @template T - [ID] : Tipe data baris. [EN] : Row data type.
+ * @param original - [ID] : Data asli. [EN] : Original data.
+ * @param row - [ID] : Objek baris. [EN] : Row object.
+ * @param other - [ID] : Properti lain. [EN] : Other properties.
+ * @returns [ID] : Node React. [EN] : React Node.
+ */
+export type TTableRenderSubComponent<T = unknown> = (original: T, row: Row<T>, other: {
+    visibilityColumns: Pick<ITableColumnBreakpoint, 'columns' | 'realColumns'>;
+    classNameSubMobile: string;
+}) => React.ReactNode | React.ReactNode[];
+/**
+ * [ID] : Tipe handler klik baris tabel.
+ * [EN] : Table row click handler type.
+ * @template T - [ID] : Tipe data baris. [EN] : Row data type.
+ * @param original - [ID] : Data asli. [EN] : Original data.
+ * @param row - [ID] : Objek baris. [EN] : Row object.
+ */
+export type TTableHandlerRowClick<T = unknown> = (original: T, row: Row<T>) => void;
+/**
+ * [ID] : Interface untuk komponen Table.
+ * [EN] : Interface for Table component.
+ * @template T - [ID] : Tipe data baris. [EN] : Row data type.
+ */
 export interface ITable<T = unknown> {
+    /**
+     * [ID] : Instance tabel TanStack.
+     * [EN] : TanStack table instance.
+     */
     tableInstance: ITableTanstack<T>;
+    /**
+     * [ID] : Nama kelas CSS pembungkus tabel (opsional).
+     * [EN] : Table wrapper CSS class name (optional).
+     */
     classNameWrapperTable?: string;
+    /**
+     * [ID] : Nama kelas CSS tabel (opsional).
+     * [EN] : Table CSS class name (optional).
+     */
     classNameTable?: string;
+    /**
+     * [ID] : Collapse semua baris (opsional).
+     * [EN] : Collapse all rows (optional).
+     */
     collapseAll?: boolean;
+    /**
+     * [ID] : Handler klik baris (opsional).
+     * [EN] : Row click handler (optional).
+     * @param original - [ID] : Data asli. [EN] : Original data.
+     * @param row - [ID] : Objek baris. [EN] : Row object.
+     */
     handlerRowClick?: (original: T, row: Row<T>) => void;
+    /**
+     * [ID] : Hak istimewa klik baris (opsional).
+     * [EN] : Row click privilege (optional).
+     */
     privillageRowClick?: boolean;
+    /**
+     * [ID] : Mengaktifkan virtualisasi (opsional).
+     * [EN] : Enable virtualization (optional).
+     */
     virtualization?: boolean;
+    /**
+     * [ID] : Properti virtualisasi (opsional).
+     * [EN] : Virtualization properties (optional).
+     */
     virtualizationProps?: IVirtualizationProps;
+    /**
+     * [ID] : ID header (opsional).
+     * [EN] : Header ID (optional).
+     */
     headerId?: string;
+    /**
+     * [ID] : Fungsi ID baris body (opsional).
+     * [EN] : Body row ID function (optional).
+     * @param row - [ID] : Objek baris. [EN] : Row object.
+     * @returns [ID] : ID baris. [EN] : Row ID.
+     */
     tbodyTrId?: (row: Row<T>) => string | undefined;
+    /**
+     * [ID] : Tinggi maksimum (opsional).
+     * [EN] : Maximum height (optional).
+     */
     maxHeight?: number;
+    /**
+     * [ID] : ID perhitungan tinggi (opsional).
+     * [EN] : Height calculation ID (optional).
+     */
     idCalculateHeight?: string;
-    kind?: 'laba-reguler' | 'payhere-reguler' | 'laba-small';
+    /**
+     * [ID] : Jenis tabel (opsional).
+     * [EN] : Table kind (optional).
+     */
+    kind?: 'laba-reguler' | 'payhere-reguler' | 'laba-small' | 'bill-reguler';
+    /**
+     * [ID] : Varian tabel (opsional).
+     * [EN] : Table variant (optional).
+     */
     variant?: 'laba-grey-02';
+    /**
+     * [ID] : Komponen urutkan menaik (opsional).
+     * [EN] : Sort ascending component (optional).
+     */
     componentSortASC?: Element | React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Komponen urutkan menurun (opsional).
+     * [EN] : Sort descending component (optional).
+     */
     componentSortDESC?: Element | React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Scroll ke atas (opsional).
+     * [EN] : Scroll top (optional).
+     */
     scrollTop?: boolean;
+    /**
+     * [ID] : Placeholder kosong (opsional).
+     * [EN] : Empty placeholder (optional).
+     */
     emptyPlaceholder?: Element | React.ReactNode | React.ReactNode[];
-    renderSubComponent?: (original: T, row: Row<T>) => React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Fungsi render sub-komponen (opsional).
+     * [EN] : Sub-component render function (optional).
+     */
+    renderSubComponent?: (original: T, row: Row<T>, other: {
+        visibilityColumns: Pick<ITableColumnBreakpoint, 'columns' | 'realColumns'>;
+        classNameSubMobile: string;
+    }) => React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Breakpoint kolom (opsional).
+     * [EN] : Column breakpoints (optional).
+     */
+    columnBreakpoints?: ITableColumnBreakpoint[];
 }
+/**
+ * [ID] : Interface untuk tabel non-virtualisasi.
+ * [EN] : Interface for non-virtualization table.
+ * @template T - [ID] : Tipe data baris. [EN] : Row data type.
+ */
 export interface INonVirtualization<T = unknown> {
+    /**
+     * [ID] : Instance tabel TanStack.
+     * [EN] : TanStack table instance.
+     */
     tableInstance: ITableTanstack<T>;
+    /**
+     * [ID] : Nama kelas CSS pembungkus tabel (opsional).
+     * [EN] : Table wrapper CSS class name (optional).
+     */
     classNameWrapperTable?: string;
+    /**
+     * [ID] : Nama kelas CSS tabel (opsional).
+     * [EN] : Table CSS class name (optional).
+     */
     classNameTable?: string;
-    handlerRowClick?: (original: T, row: Row<T>) => void;
+    /**
+     * [ID] : Handler klik baris (opsional).
+     * [EN] : Row click handler (optional).
+     */
+    handlerRowClick?: ITable<T>['handlerRowClick'];
+    /**
+     * [ID] : Hak istimewa klik baris (opsional).
+     * [EN] : Row click privilege (optional).
+     */
     privillageRowClick?: boolean;
+    /**
+     * [ID] : ID header (opsional).
+     * [EN] : Header ID (optional).
+     */
     headerId?: string;
+    /**
+     * [ID] : Fungsi ID baris body.
+     * [EN] : Body row ID function.
+     * @param row - [ID] : Objek baris. [EN] : Row object.
+     * @returns [ID] : ID baris. [EN] : Row ID.
+     */
     tbodyTrId: (row: Row<T>) => string | undefined;
+    /**
+     * [ID] : Tinggi maksimum (opsional).
+     * [EN] : Maximum height (optional).
+     */
     maxHeight?: number;
+    /**
+     * [ID] : ID perhitungan tinggi (opsional).
+     * [EN] : Height calculation ID (optional).
+     */
     idCalculateHeight?: string;
+    /**
+     * [ID] : Komponen urutkan menaik.
+     * [EN] : Sort ascending component.
+     */
     componentSortASC: Element | React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Komponen urutkan menurun.
+     * [EN] : Sort descending component.
+     */
     componentSortDESC: Element | React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Nama kelas CSS pointer.
+     * [EN] : Pointer CSS class name.
+     */
     classNamePointer: string;
+    /**
+     * [ID] : Placeholder kosong (opsional).
+     * [EN] : Empty placeholder (optional).
+     */
     emptyPlaceholder?: Element | React.ReactNode | React.ReactNode[];
-    renderSubComponent?: (original: T, row: Row<T>) => React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Fungsi render sub-komponen (opsional).
+     * [EN] : Sub-component render function (optional).
+     */
+    renderSubComponent?: ITable<T>['renderSubComponent'];
+    /**
+     * [ID] : Kolom yang terlihat.
+     * [EN] : Visible columns.
+     */
+    visibilityColumns: Pick<ITableColumnBreakpoint, 'columns' | 'realColumns'>;
+    /**
+     * [ID] : Nama kelas CSS sub-mobile.
+     * [EN] : Sub-mobile CSS class name.
+     */
+    classNameSubMobile: string;
 }
+/**
+ * [ID] : Interface untuk properti virtualisasi.
+ * [EN] : Interface for virtualization properties.
+ */
 export interface IVirtualizationProps extends Omit<ITableVirtualization, 'typeHight' | 'itemContent' | 'fixedHeaderContent' | 'itemSizeNames'> {
+    /**
+     * [ID] : Tipe tinggi (opsional).
+     * [EN] : Height type (optional).
+     */
     typeHight?: 'min-max' | 'container';
+    /**
+     * [ID] : Konten item (opsional).
+     * [EN] : Item content (optional).
+     */
     itemContent?: (Wrapper: React.ComponentType<IWrapperProps>, index: number, data: unknown, context: unknown) => React.ReactNode;
+    /**
+     * [ID] : Konten header tetap (opsional).
+     * [EN] : Fixed header content (optional).
+     */
     fixedHeaderContent?: (() => React.ReactNode) | (() => React.ReactNode[]);
+    /**
+     * [ID] : Nama ukuran item (opsional).
+     * [EN] : Item size names (optional).
+     */
     itemSizeNames?: string[];
 }
+/**
+ * [ID] : Interface untuk tabel virtualisasi.
+ * [EN] : Interface for virtualization table.
+ * @template T - [ID] : Tipe data baris. [EN] : Row data type.
+ */
 export interface IVirtualization<T = unknown> {
+    /**
+     * [ID] : Instance tabel TanStack.
+     * [EN] : TanStack table instance.
+     */
     tableInstance: ITableTanstack<T>;
+    /**
+     * [ID] : Nama kelas CSS pembungkus tabel (opsional).
+     * [EN] : Table wrapper CSS class name (optional).
+     */
     classNameWrapperTable?: string;
-    handlerRowClick?: (original: T, row: Row<T>) => void;
+    /**
+     * [ID] : Handler klik baris (opsional).
+     * [EN] : Row click handler (optional).
+     */
+    handlerRowClick?: ITable<T>['handlerRowClick'];
+    /**
+     * [ID] : Hak istimewa klik baris (opsional).
+     * [EN] : Row click privilege (optional).
+     */
     privillageRowClick?: boolean;
+    /**
+     * [ID] : Properti virtualisasi (opsional).
+     * [EN] : Virtualization properties (optional).
+     */
     virtualizationProps?: IVirtualizationProps;
+    /**
+     * [ID] : ID header (opsional).
+     * [EN] : Header ID (optional).
+     */
     headerId?: string;
+    /**
+     * [ID] : Fungsi ID baris body.
+     * [EN] : Body row ID function.
+     * @param row - [ID] : Objek baris. [EN] : Row object.
+     * @returns [ID] : ID baris. [EN] : Row ID.
+     */
     tbodyTrId: (row: Row<T>) => string | undefined;
+    /**
+     * [ID] : Nama kelas CSS tabel (opsional).
+     * [EN] : Table CSS class name (optional).
+     */
     classNameTable?: string;
+    /**
+     * [ID] : Komponen urutkan menaik.
+     * [EN] : Sort ascending component.
+     */
     componentSortASC: Element | React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Komponen urutkan menurun.
+     * [EN] : Sort descending component.
+     */
     componentSortDESC: Element | React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Nama kelas CSS pointer.
+     * [EN] : Pointer CSS class name.
+     */
     classNamePointer: string;
+    /**
+     * [ID] : Placeholder kosong (opsional).
+     * [EN] : Empty placeholder (optional).
+     */
     emptyPlaceholder?: Element | React.ReactNode | React.ReactNode[];
-    renderSubComponent?: (original: T, row: Row<T>) => React.ReactNode | React.ReactNode[];
+    /**
+     * [ID] : Fungsi render sub-komponen (opsional).
+     * [EN] : Sub-component render function (optional).
+     */
+    renderSubComponent?: ITable<T>['renderSubComponent'];
+    /**
+     * [ID] : Kolom yang terlihat.
+     * [EN] : Visible columns.
+     */
+    visibilityColumns: Pick<ITableColumnBreakpoint, 'columns' | 'realColumns'>;
+    /**
+     * [ID] : Nama kelas CSS sub-mobile.
+     * [EN] : Sub-mobile CSS class name.
+     */
+    classNameSubMobile: string;
 }
+/**
+ * [ID] : Interface untuk header virtualisasi.
+ * [EN] : Interface for virtualization head.
+ */
 export interface IVirtualizationHead extends React.HTMLAttributes<HTMLTableSectionElement> {
+    /**
+     * [ID] : Konteks (opsional).
+     * [EN] : Context (optional).
+     */
     context?: {
+        /**
+         * [ID] : ID header (opsional).
+         * [EN] : Header ID (optional).
+         */
         headerId?: string;
+        /**
+         * [ID] : Properti dinamis lainnya.
+         * [EN] : Other dynamic properties.
+         */
         [key: string]: unknown;
     };
+    /**
+     * [ID] : Properti dinamis lainnya.
+     * [EN] : Other dynamic properties.
+     */
     [key: string]: unknown;
 }
+/**
+ * [ID] : Interface untuk tabel virtualisasi.
+ * [EN] : Interface for virtualization table.
+ */
 export interface IVirtualizationTable extends React.HTMLAttributes<HTMLTableElement> {
+    /**
+     * [ID] : Konteks (opsional).
+     * [EN] : Context (optional).
+     */
     context?: {
+        /**
+         * [ID] : Nama kelas CSS tabel (opsional).
+         * [EN] : Table CSS class name (optional).
+         */
         classNameTable?: string;
+        /**
+         * [ID] : Lebar tabel.
+         * [EN] : Table width.
+         */
         width: string | number;
+        /**
+         * [ID] : Properti dinamis lainnya.
+         * [EN] : Other dynamic properties.
+         */
         [key: string]: unknown;
     };
+    /**
+     * [ID] : Properti dinamis lainnya.
+     * [EN] : Other dynamic properties.
+     */
     [key: string]: unknown;
 }
+/**
+ * [ID] : Interface untuk konfigurasi tabel.
+ * [EN] : Interface for table configuration.
+ */
 export interface ITableConfig {
+    /**
+     * [ID] : Konfigurasi jenis.
+     * [EN] : Kind configuration.
+     */
     kind: {
         'payhere-reguler': string;
         'laba-reguler': string;
         'laba-small': string;
+        'bill-reguler': string;
+    };
+    /**
+     * [ID] : Konfigurasi sub-mobile.
+     * [EN] : Sub-mobile configuration.
+     */
+    subMobile: {
+        'payhere-reguler': string;
+        'laba-reguler': string;
+        'laba-small': string;
+        'bill-reguler': string;
     };
+    /**
+     * [ID] : Konfigurasi pointer.
+     * [EN] : Pointer configuration.
+     */
     pointer: {
         'payhere-reguler': string;
         'laba-reguler': string;
         'laba-small': string;
+        'bill-reguler': string;
     };
+    /**
+     * [ID] : Konfigurasi utilitas.
+     * [EN] : Utility configuration.
+     */
     utility: {
         'table-scroll-top': string;
     };
+    /**
+     * [ID] : Konfigurasi ikon pengurutan.
+     * [EN] : Sorting icon configuration.
+     */
     sortingIcon: {
         'payhere-reguler': {
             asc: Element | React.ReactNode | React.ReactNode[];
@@ -102,7 +491,15 @@ export interface ITableConfig {
             asc: Element | React.ReactNode | React.ReactNode[];
             desc: Element | React.ReactNode | React.ReactNode[];
         };
+        'bill-reguler': {
+            asc: Element | React.ReactNode | React.ReactNode[];
+            desc: Element | React.ReactNode | React.ReactNode[];
+        };
     };
+    /**
+     * [ID] : Konfigurasi varian.
+     * [EN] : Variant configuration.
+     */
     variant: {
         'laba-grey-02': string;
     };

package/dist/src/interfaces/components/Tabs/index.d.ts

@@ -1,33 +1,163 @@
 import { IBorderRadius } from '../../../config/components/borderRadius';
-export type TVariantTabs = 'original-laba-blue-10' | 'container-payhere-brand-base' | 'container-laba-blue-10' | 'container-laba-blue-10-bg_white';
+import { TKeyLocale } from '../Calendar';
+
+/**
+ * [ID] : Tipe varian tab.
+ * [EN] : Tab variant type.
+ */
+export type TVariantTabs = 'original-laba-blue-10' | 'container-payhere-brand-base' | 'container-payhere-brand-base-bg_white' | 'container-laba-blue-10' | 'container-laba-blue-10-bg_white' | 'original-bill-secondary-800';
+/**
+ * [ID] : Tipe ukuran tab.
+ * [EN] : Tab size type.
+ */
 export type TSizeTabs = 'tabs-m' | 'tabs-s' | 'tabs-medium' | 'tabs-small';
+/**
+ * [ID] : Tipe event tab.
+ * [EN] : Tab event type.
+ */
 export type TTypeEventTabs = 'change' | 'mounted';
+/**
+ * [ID] : Interface untuk item daftar tab.
+ * [EN] : Interface for tab list item.
+ */
 export interface ITabsList {
+    /**
+     * [ID] : ID tab.
+     * [EN] : Tab ID.
+     */
     id: string | number;
+    /**
+     * [ID] : Label tab.
+     * [EN] : Tab label.
+     */
     label: string | number;
+    /**
+     * [ID] : Status disembunyikan (opsional).
+     * [EN] : Is hidden status (optional).
+     */
     isHide?: boolean;
+    /**
+     * [ID] : Nama kelas CSS (opsional).
+     * [EN] : CSS class name (optional).
+     */
     className?: string;
+    /**
+     * [ID] : Warna aktif (opsional).
+     * [EN] : Active color (optional).
+     */
     activeColor?: string;
+    /**
+     * [ID] : Lokal bahasa (opsional).
+     * [EN] : Locale (optional).
+     */
+    locale?: Partial<Record<TKeyLocale, string>>;
 }
+/**
+ * [ID] : Interface untuk komponen Tabs.
+ * [EN] : Interface for Tabs component.
+ */
 export interface ITabs {
+    /**
+     * [ID] : ID elemen (opsional).
+     * [EN] : Element ID (optional).
+     */
     id?: string;
+    /**
+     * [ID] : Nilai tab aktif (opsional).
+     * [EN] : Active tab value (optional).
+     */
     value?: string | number;
+    /**
+     * [ID] : Daftar tab.
+     * [EN] : Tab list.
+     */
     tabsList: ITabsList[];
+    /**
+     * [ID] : Kunci nilai tab (opsional).
+     * [EN] : Tab value key (optional).
+     */
     keyValueTab?: string;
+    /**
+     * [ID] : Nama kelas CSS kontainer (opsional).
+     * [EN] : Container CSS class name (optional).
+     */
     classNameContainer?: string;
+    /**
+     * [ID] : Nama kelas CSS (opsional).
+     * [EN] : CSS class name (optional).
+     */
     className?: string;
+    /**
+     * [ID] : Nama kelas CSS tombol (opsional).
+     * [EN] : Button CSS class name (optional).
+     */
     classNameButton?: string;
+    /**
+     * [ID] : Varian tab (opsional).
+     * [EN] : Tab variant (optional).
+     */
     variant?: TVariantTabs;
+    /**
+     * [ID] : Ukuran tab (opsional).
+     * [EN] : Tab size (optional).
+     */
     size?: TSizeTabs;
+    /**
+     * [ID] : Radius sudut (opsional).
+     * [EN] : Border radius (optional).
+     */
     borderRadius?: IBorderRadius;
+    /**
+     * [ID] : Status non-aktif (opsional).
+     * [EN] : Disabled status (optional).
+     */
     disabled?: boolean;
+    /**
+     * [ID] : Animasi (opsional).
+     * [EN] : Animation (optional).
+     */
     animation?: boolean;
+    /**
+     * [ID] : Eksekusi perubahan saat mounted (opsional).
+     * [EN] : Execute change on mounted (optional).
+     */
     mountedExecuteChange?: boolean;
+    /**
+     * [ID] : Handler perubahan tab (opsional).
+     * [EN] : Tab change handler (optional).
+     * @param v - [ID] : Tab yang dipilih. [EN] : Selected tab.
+     * @param sourceEvent - [ID] : Sumber event. [EN] : Event source.
+     */
     onChange?: (v: ITabsList, sourceEvent: TTypeEventTabs) => void;
+    /**
+     * [ID] : Tipe tombol (opsional).
+     * [EN] : Button type (optional).
+     */
     typeButton?: 'button' | 'submit';
+    /**
+     * [ID] : Lokal bahasa (opsional).
+     * [EN] : Locale (optional).
+     */
+    locale?: TKeyLocale;
 }
+/**
+ * [ID] : Interface untuk gaya tab.
+ * [EN] : Interface for tab style.
+ */
 export interface IStyleTabs {
+    /**
+     * [ID] : Lebar.
+     * [EN] : Width.
+     */
     width: number;
+    /**
+     * [ID] : Tinggi.
+     * [EN] : Height.
+     */
     height: number;
+    /**
+     * [ID] : Posisi kiri.
+     * [EN] : Left position.
+     */
     left: number;
 }

package/dist/src/interfaces/components/TextEditor/index.d.ts

@@ -1,5 +1,18 @@
 import { IAllProps } from '@tinymce/tinymce-react';
+
+/**
+ * [ID] : Interface untuk komponen TextEditor.
+ * [EN] : Interface for TextEditor component.
+ */
 export interface ITextEditorProps extends IAllProps {
+    /**
+     * [ID] : ID editor.
+     * [EN] : Editor ID.
+     */
     id: string;
+    /**
+     * [ID] : Label editor (opsional).
+     * [EN] : Editor label (optional).
+     */
     label?: string;
 }