pesona-ui 1.0.1 → 1.0.3

package/dist/types/components/Progress/CircularProgressWithLabel.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './CircularProgressWithLabel.scss';
+interface CircularProgressWithLabelProps {
+    progress?: number;
+    size?: number;
+    className?: string;
+    color?: string;
+    strokeWidth?: number;
+}
+declare const CircularProgressWithLabel: React.FC<CircularProgressWithLabelProps>;
+export { CircularProgressWithLabel };

package/dist/types/components/Progress/LinearProgress.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './LinearProgress.scss';
+interface LinearProgressProps {
+    showLabel?: boolean;
+    progress?: number;
+    className?: string;
+    color?: string;
+}
+declare const LinearProgress: React.FC<LinearProgressProps>;
+export { LinearProgress };

package/dist/types/components/Progress/index.d.ts

@@ -0,0 +1,3 @@
+export { CircularProgress } from './CircularProgress';
+export { LinearProgress } from './LinearProgress';
+export { CircularProgressWithLabel } from './CircularProgressWithLabel';

package/dist/types/components/Tab/Tabs.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactElement, ReactNode } from 'react';
+import './Tabs.scss';
+interface TabProps {
+    children: ReactNode;
+    title: string;
+    icon?: ReactElement;
+}
+interface TabsProps {
+    className?: string;
+    navClassName?: string;
+    contentClassName?: string;
+    children: ReactElement<TabProps>[];
+    activeTab: number;
+    handleActiveTab: (index: number) => void;
+    customHeader?: ReactNode;
+}
+declare const Tabs: React.FC<TabsProps>;
+declare const Tab: React.FC<TabProps>;
+export { Tabs, Tab };

package/dist/types/components/Tab/index.d.ts

@@ -0,0 +1 @@
+export { Tabs, Tab } from './Tabs';

package/dist/types/components/Table/DivTable.d.ts

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+import './DivTable.scss';
+interface DivTableProps {
+    children: ReactNode;
+    className?: string;
+    view?: 'grid' | 'list';
+    gridColumn?: number;
+}
+interface DivTableRowProps {
+    children: ReactNode;
+    className?: string;
+    isActive?: boolean;
+}
+interface DivTableCellProps {
+    children: ReactNode;
+    className?: string;
+    hideOnGrid?: boolean;
+}
+declare const DivTable: React.FC<DivTableProps>;
+declare const DivTableHeader: React.FC<{
+    children: ReactNode;
+}>;
+declare const DivTableBody: React.FC<{
+    children: ReactNode;
+}>;
+declare const DivTableRow: React.FC<DivTableRowProps>;
+declare const DivTableCell: React.FC<DivTableCellProps>;
+declare const DivTableFooter: React.FC<{
+    children: ReactNode;
+}>;
+export { DivTable, DivTableHeader, DivTableBody, DivTableRow, DivTableCell, DivTableFooter };

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

@@ -0,0 +1,24 @@
+import React, { ReactNode } from 'react';
+import './Table.scss';
+interface TableProps {
+    children: ReactNode;
+    className?: string;
+}
+interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    children: ReactNode;
+    className?: string;
+}
+declare const Table: React.FC<TableProps>;
+declare const TableHeader: React.FC<TableProps>;
+declare const TableBody: React.FC<TableProps>;
+declare const TableRow: React.FC<TableRowProps>;
+interface TableCellProps {
+    children: ReactNode;
+    header?: boolean;
+    className?: string;
+    colSpan?: number;
+    style?: React.CSSProperties;
+}
+declare const TableCell: React.FC<TableCellProps>;
+declare const TableFooter: React.FC<TableProps>;
+export { Table, TableHeader, TableBody, TableRow, TableCell, TableFooter };

package/dist/types/components/Table/TableDeleteSelectedItems.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface TableDeleteSelectedItemsProps {
+    count: number;
+    handleMultipleDelete: () => void;
+}
+declare const TableDeleteSelectedItems: React.FC<TableDeleteSelectedItemsProps>;
+export default TableDeleteSelectedItems;

package/dist/types/components/Table/TablePaginating.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface TablePaginatingProps {
+    startIndex: number;
+    endIndex: number;
+    currentPage: number;
+    totalData: number;
+    itemsPerPage: number;
+    setItemsPerPage: (itemsPerPage: number) => void;
+    setCurrentPage: (currentPage: number) => void;
+    totalPages: number;
+    showPerPage?: boolean;
+}
+declare const TablePaginating: React.FC<TablePaginatingProps>;
+export default TablePaginating;

package/dist/types/components/Table/TablePickSelectedItems.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface TablePickSelectedItemsProps {
+    count: number;
+    selectedItem: (selectedRows: string[]) => void;
+    selectedRows: string[];
+}
+declare const TablePickSelectedItems: React.FC<TablePickSelectedItemsProps>;
+export default TablePickSelectedItems;

package/dist/types/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { DivTable, DivTableHeader, DivTableBody, DivTableRow, DivTableCell, DivTableFooter } from './DivTable';
+export { Table, TableHeader, TableBody, TableRow, TableCell, TableFooter } from './Table';

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

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import './Tooltip.scss';
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+interface TooltipProps {
+    children: ReactNode;
+    text: string;
+    position?: TooltipPosition;
+    className?: string;
+    offset?: number;
+}
+declare const Tooltip: React.FC<TooltipProps>;
+export { Tooltip };

package/dist/types/components/Tooltip/index.d.ts

@@ -0,0 +1 @@
+export { Tooltip } from './Tooltip';

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

@@ -3,3 +3,15 @@ export * from './Card';
 export * from './Spinner';
 export * from './Dropdown';
 export * from './Badge';
+export * from './Tab';
+export * from './Alert';
+export * from './Callout';
+export * from './Tooltip';
+export * from './Popover';
+export * from './Modal';
+export * from './Accordion';
+export * from './Progress';
+export * from './Form';
+export * from './Loading';
+export * from './List';
+export * from './Table';

package/dist/types/hooks/useAutoPosition.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+/**
+ * Hook untuk mengatur posisi dropdown agar muncul di atas jika dropdown terlalu bawah
+ * @param ref Ref object dari element dropdown
+ * @returns boolean
+ *
+ * @example
+ * const dropdownRef = useRef<HTMLDivElement>(null);
+ * const showAbove = useAutoPosition(dropdownRef);
+ *
+ * <div ref={dropdownRef} className={showAbove ? 'show-above' : ''}>
+ */
+declare const useAutoPosition: (ref: RefObject<HTMLElement>) => boolean;
+export default useAutoPosition;

package/dist/types/hooks/useDatePicker.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Hook untuk mengatur date picker
+ * @param initialDate Tanggal awal
+ * @returns Fungsi-fungsi untuk mengatur date picker
+ *
+ * @example
+ * const { selectedDate, handlePrevMonth, handleNextMonth, handleDateClick, isSelectedDate } = useDatePicker(new Date());
+ */
+declare const useDatePicker: (initialDate: Date) => {
+    selectedDate: Date;
+    handlePrevMonth: () => void;
+    handleNextMonth: () => void;
+    handleDateClick: (day: string, month: string, year: string, onSelect: (date: string) => void) => void;
+    isSelectedDate: (day: string, month: string, year: string) => boolean;
+};
+export default useDatePicker;

package/dist/types/hooks/useDropdownPositionAndScroll.d.ts

@@ -0,0 +1,12 @@
+import { RefObject } from 'react';
+/**
+ * Hook untuk mengatur posisi dropdown dan scroll ke opsi yang dipilih
+ * @param isOpen Status dropdown terbuka atau tidak
+ * @param dropdownOptionsRef Ref dari elemen dropdown
+ *
+ * @example
+ * const dropdownOptionsRef = useRef<HTMLDivElement>(null);
+ * useDropdownPositionAndScroll(isOpen, dropdownOptionsRef);
+ */
+declare const useDropdownPositionAndScroll: (isOpen: boolean, dropdownOptionsRef: RefObject<HTMLElement>) => void;
+export default useDropdownPositionAndScroll;

package/dist/types/hooks/useFormValidation.d.ts

@@ -0,0 +1,67 @@
+import { FieldValues, Path, RegisterOptions, UseFormRegister } from 'react-hook-form';
+/**
+ * Hook untuk validasi form menggunakan react-hook-form
+ * @param register Fungsi register dari react-hook-form
+ * @param fields Daftar field dan aturan validasi
+ * @returns Fungsi untuk mengatur input field
+ *
+ * @example
+ * const { register, handleSubmit } = useForm();
+ * const inputs = useFormValidation(register, {
+ *  username: { required: true, minLength: 5 },
+ *  password: { required: true },
+ * });
+ */
+type FieldRules<T extends FieldValues> = RegisterOptions & {
+    required?: boolean | {
+        value: boolean;
+        message: string;
+    };
+    minLength?: number | {
+        value: number;
+        message: string;
+    };
+    maxLength?: number | {
+        value: number;
+        message: string;
+    };
+    validEmail?: boolean | {
+        value: boolean;
+        message: string;
+    };
+    phoneNumber?: boolean | {
+        value: boolean;
+        message: string;
+    };
+    passwordMatch?: boolean | {
+        value: boolean;
+        message: string;
+    };
+    validDate?: boolean | {
+        value: boolean;
+        message: string;
+    };
+    beforeDate?: boolean | {
+        value: boolean;
+        message: string;
+    };
+    afterDate?: boolean | {
+        value: boolean;
+        message: string;
+    };
+    maxFileSize?: number | {
+        value: number;
+        message: string;
+    };
+    nameInput?: boolean | {
+        value: boolean;
+        message: string;
+    };
+    mask?: string;
+    trim?: boolean;
+    setValueAs?: (value: string) => T[keyof T];
+};
+declare const useFormValidation: <T extends FieldValues>(register: UseFormRegister<T>, fields: {
+    [key: string]: FieldRules<T>;
+}) => (name: Path<T>) => import("react-hook-form").UseFormRegisterReturn<Path<T>>;
+export default useFormValidation;

package/dist/types/utils/apiError.d.ts

@@ -0,0 +1,3 @@
+export declare class ApiError extends Error {
+    constructor(message: string);
+}

package/dist/types/utils/avatar.d.ts

@@ -0,0 +1,2 @@
+declare const getUserAvatar: (nip?: string, size?: "pt-small" | "pt-medium" | "pt-large") => string;
+export { getUserAvatar };

package/dist/types/utils/constants.d.ts

@@ -0,0 +1,9 @@
+export declare const BASE_URL: any;
+export declare const API_BASE_URL: any;
+export declare const SMART_URL: any;
+export declare const IMAGE_URL: any;
+export declare const MAX_FILE_SIZE: any;
+export declare const isDevelopment: boolean;
+export declare const isProduction: boolean;
+export declare const GENERAL_SETTING = "general_setting";
+export declare const IMAGE_SETTING = "image_setting";

package/dist/types/utils/date.d.ts

@@ -0,0 +1,25 @@
+import { DateTime } from 'luxon';
+declare const formatTime: (timeString: string, format?: string, timeZone?: string) => string;
+declare const dateToDb: (date: Date) => string;
+declare const dbToDate: (date: string) => Date;
+declare const dateToId: (date: unknown) => string;
+interface DayOption {
+    value: string;
+    label: string;
+}
+declare const generateCalendarDayOptions: (month: number, year: number) => DayOption[];
+declare const generateDayOptions: (month: number, year: number) => DayOption[];
+interface MonthOption {
+    value: string;
+    label: string;
+}
+declare const generateMonthOptions: (locale?: string) => MonthOption[];
+interface YearOption {
+    value: string;
+    label: string;
+}
+declare const generateYearOptions: () => YearOption[];
+declare const isValidDate: (date: string) => boolean;
+declare const dayNames: string[];
+declare function timeElapsedString(timestamp: DateTime, full: boolean): string;
+export { formatTime, dateToDb, dbToDate, dateToId, generateCalendarDayOptions, generateDayOptions, generateMonthOptions, generateYearOptions, dayNames, isValidDate, timeElapsedString, };

package/dist/types/utils/handleApiError.d.ts

@@ -0,0 +1 @@
+export declare const handleApiError: (error: unknown) => string;

package/dist/types/utils/mask.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Fungsi untuk menerapkan masking pada nilai input
+ * @param value Nilai asli dari input
+ * @param mask Pola masking, gunakan '9' untuk angka, 'X' untuk huruf/karakter bebas, dan simbol untuk karakter tetap
+ * @returns Nilai input yang telah dimask
+ *
+ * @example
+ * applyMask("123456789", "999-999-999") // "123-456-789"
+ * applyMask("abcd1234", "XXXX-9999") // "abcd-1234"
+ * applyMask("12022023", "dd.mm.yyyy") // "12.02.2023"
+ */
+export declare const applyMask: (value: string, mask: string) => string;
+/**
+ * Fungsi untuk menghapus masking pada nilai input
+ * @param maskedValue Nilai input yang telah dimask
+ * @returns Nilai asli tanpa mask
+ *
+ * @example
+ * removeMask("123-456-789") // "123456789"
+ */
+export declare const removeMask: (maskedValue: string) => string;

package/dist/types/utils/media.d.ts

@@ -0,0 +1,4 @@
+export declare const getPhotoThumb: (id: string, photo: string | undefined) => JSX.Element;
+export declare const getFileThumb: (fileType: string, height?: number, width?: number, className?: string) => JSX.Element;
+export declare const formatFileSize: (bytes: number) => string;
+export declare const getFileMimeType: (fileName: string) => string;

package/dist/types/utils/notification.d.ts

@@ -0,0 +1,3 @@
+type ToastType = "info" | "success" | "warning" | "error" | "default";
+declare const showNotification: (type: ToastType, message: string) => void;
+export default showNotification;

package/dist/types/utils/number.d.ts

@@ -0,0 +1 @@
+export declare const formatNumber: (value: number, decimals?: number) => string;

package/dist/types/utils/string.d.ts

@@ -0,0 +1,3 @@
+export declare function getSlug(text: string): string;
+export declare const toTitleCase: (str: string) => string;
+export declare const combineFullname: (gelar_depan?: string | null, nama?: string | null, gelar_belakang?: string | null) => string;

package/dist/types/utils/stringFormater.d.ts

@@ -0,0 +1,3 @@
+export declare const formatStatusLabel: (val: boolean) => JSX.Element;
+export declare const formatStatusPermohonanLabel: (val: string) => JSX.Element;
+export declare const formatStatusHistoryText: (val: string) => string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "type": "module",
   "name": "pesona-ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "PesonaUI - A reusable React component library built with TypeScript and SCSS",
   "keywords": [
     "react",
@@ -52,6 +52,14 @@
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
   "dependencies": {
-    "rollup-plugin-sass": "^1.14.0"
+    "@types/luxon": "^3.6.2",
+    "html-react-parser": "^5.2.3",
+    "luxon": "^3.6.1",
+    "react-hook-form": "^7.56.1",
+    "react-icons": "^5.5.0",
+    "react-toastify": "^11.0.5",
+    "rollup-plugin-sass": "^1.14.0",
+    "slugify": "^1.6.6",
+    "uuid": "^11.1.0"
   }
 }