@shoplflow/templates 0.0.54 → 0.1.0

package/dist/index.d.cts

@@ -1,7 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextProps, TooltipProps, IconButtonProps, IconButton } from '@shoplflow/base';
 import { ChildrenProps } from '@shoplflow/base/src/utils/type/ComponentProps';
-import { ReactNode, ReactElement } from 'react';
+import * as React$1 from 'react';
+import React__default, { ReactNode, ReactElement, RefObject, Dispatch, SetStateAction, CSSProperties, ButtonHTMLAttributes } from 'react';
+import { Table as Table$1, ColumnDef, Header, RowData, ColumnFilter } from '@tanstack/react-table';
+export { createColumnHelper } from '@tanstack/react-table';
 
 declare type ActionsProps = {
     children: ReactNode;
@@ -66,4 +69,220 @@ declare const TitleGroup: {
     Description: ({ description, ...rest }: DescriptionProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { ActionsProps, DescriptionProps, TitleGroup, TitleGroupHeaderProps, TitleGroupHelpIconProps, TitleGroupProps };
+declare type TableContextType<T extends object> = {
+    table: Table$1<T>;
+    headerRef: RefObject<HTMLDivElement>;
+    bodyRef: RefObject<HTMLDivElement>;
+    footerRef: RefObject<HTMLDivElement>;
+    tableScrollRef: RefObject<HTMLDivElement>;
+    selectedRows?: T[];
+    onClickRow?: (row?: T) => void;
+    hasToolbar?: boolean;
+    hasFilterBar?: boolean;
+    hasPagination?: boolean;
+    columnResizing?: boolean;
+    filterValue: string;
+    setFilterValue: Dispatch<SetStateAction<string>>;
+};
+
+declare type TableProps<T extends object> = {
+    data: T[];
+    columns: Array<ColumnDef<T, any>>;
+    columnResizing?: boolean;
+    children: ReactNode;
+    manualPagination?: boolean;
+    manualFiltering?: boolean;
+    manualSorting?: boolean;
+    selectedRows?: T[];
+    onSelectedRowsChange?: (rows: T[]) => void;
+    onClickRow?: (data?: T) => void;
+};
+declare type TableMainProps = {
+    fixedColumns?: FixedColumn[];
+    useVirtualization?: boolean;
+    useColumnVirtualization?: boolean;
+    isSticky?: boolean;
+    stickyHeaderTopPosition?: number;
+    onClickRow?: (rowData: any) => void;
+    children?: ReactNode;
+    maxHeight?: string;
+    emptyRowCount?: number;
+};
+declare type TableToolbarProps = {
+    filterAccessor?: string;
+    children: (props: {
+        totalCount: number;
+        filterAccessor: string;
+        onSearch: (value: string) => void;
+        filterValue: string;
+    }) => ReactNode;
+};
+declare type TableHeadCellProps = {
+    header: Header<any, unknown>;
+    onFilterChange?: (value: string) => void;
+    onSortChange?: (direction: 'asc' | 'desc' | undefined) => void;
+};
+declare type PinningPosition = 'left' | 'right';
+declare type FixedColumn = {
+    index: number;
+    position: PinningPosition;
+};
+declare type TablePaginationProps = {
+    total: number;
+    defaultPageSize: number;
+    children?: ReactNode;
+    pageSizeList?: Array<{
+        key: string;
+        label: string;
+    }>;
+    setCurrentPage?: (params: {
+        pageIndex: number;
+        pageSize: number;
+    }) => void;
+    notSizeOption?: boolean;
+    resetDependencies?: any[];
+    currentPage?: number;
+};
+
+declare type FilterChangeHandler = (value: string) => void;
+declare type SortChangeHandler = (order: 'asc' | 'desc' | undefined) => void;
+declare type GlobalFilterChangeHandler = (value: string) => void;
+/**
+ * @typedef {Object} ColumnMeta 테이블 컬럼의 메타 데이터 타입 정의
+ * @property {'text' | 'range' | 'select'} [filterVariant] - 필터 입력 타입
+ * @property {Array<{label: string, value: string}>} [filterOptions] - select 타입 필터의 옵션 목록
+ * @property {string[]} [sortLabels] - 정렬 라벨 목록
+ * @property {{style?: CSSProperties}} [headerProps] - 헤더 셀의 스타일 속성
+ * @property {{style?: CSSProperties}} [cellProps] - 데이터 셀의 스타일 속성
+ * @property {(value: string) => void} [onFilterChange] - 필터 값 변경 핸들러
+ * @property {(order: 'asc' | 'desc' | undefined) => void} [onSortChange] - 정렬 순서 변경 핸들러
+ * @property {(value: string) => void} [onGlobalFilterChange] - 전역 필터 값 변경 핸들러
+ * @property {boolean} [activeHover] - 행 호버 효과 활성화 여부
+ */
+declare module '@tanstack/react-table' {
+    interface TableMeta<TData extends RowData> {
+        onGlobalFilterChange?: GlobalFilterChangeHandler;
+    }
+    interface ColumnMeta<TData extends RowData, TValue> {
+        filterVariant?: 'text' | 'range' | 'select';
+        filterOptions?: Array<{
+            icon?: ReactElement;
+            label: string;
+            value: string;
+        }>;
+        sortLabels?: string[];
+        headerProps?: {
+            style?: CSSProperties;
+        };
+        cellProps?: {
+            style?: CSSProperties;
+        };
+        onFilterChange?: FilterChangeHandler;
+        onSortChange?: SortChangeHandler;
+        onGlobalFilterChange?: GlobalFilterChangeHandler;
+        activeHover?: boolean;
+        hiddenColumn?: boolean;
+        isLastColumn?: boolean;
+    }
+}
+/**
+ * 테이블 컴포넌트
+ * @component
+ * @template T - 테이블 데이터의 타입
+ * @param {Object} props - 컴포넌트 props
+ * @param {T[]} props.data - 테이블에 표시할 데이터 배열
+ * @param {Array<ColumnDef<T>>} props.columns - 테이블 컬럼 정의 배열
+ * @param {boolean} [props.columnResizing=false] - 컬럼 리사이징 활성화 여부
+ * @param {ReactNode} props.children - 테이블 내부에 렌더링할 자식 컴포넌트
+ * @param {boolean} [props.manualPagination=false] - 수동 페이지네이션 사용 여부
+ * @param {T[]} [props.selectedRows=[]] - 선택된 행 데이터 배열
+ * @param {Function} [props.onSelectedRowsChange] - 선택된 행이 변경될 때 호출되는 콜백 함수
+ * @param {Function} [props.onClickRow] - 행 클릭 시 호출되는 콜백 함수
+ * @returns {JSX.Element} 렌더링된 테이블 컴포넌트
+ */
+declare const Table: <T extends object>({ data, columns, columnResizing, children, manualPagination, manualFiltering, manualSorting, selectedRows, onSelectedRowsChange, onClickRow, }: TableProps<T>) => react_jsx_runtime.JSX.Element;
+
+/**
+ * 테이블의 페이지네이션을 처리하는 컴포넌트
+ * @component
+ * @param {Object} props - 컴포넌트 props
+ * @param {number} props.total - 전체 데이터 수
+ * @param {number} props.defaultPageSize - 기본 페이지 크기
+ * @param {ReactNode} props.children - 페이지네이션 내부에 렌더링할 자식 컴포넌트
+ * @param {number[]} [props.pageSizeList] - 페이지 크기 선택 옵션 리스트
+ * @param {Function} [props.setCurrentPage] - 현재 페이지 변경 콜백 함수
+ * @param {boolean} [props.notSizeOption] - 페이지 크기 선택 옵션 표시 여부
+ * @param {number} [props.currentPage] - 현재 페이지 인덱스
+ * @returns {JSX.Element} 렌더링된 페이지네이션 컴포넌트
+ */
+declare const TablePagination: ({ total, defaultPageSize, children, pageSizeList, setCurrentPage, notSizeOption, currentPage, }: TablePaginationProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * 테이블의 툴바를 렌더링하는 컴포넌트
+ * @component
+ * @param {Object} props - 컴포넌트 props
+ * @param {string} [props.filterAccessor] - 필터링할 컬럼의 accessor
+ * @param {Function} props.children - 툴바 내부에 렌더링할 자식 컴포넌트를 반환하는 함수
+ * @param {number} props.children.totalCount - 전체 데이터 수
+ * @param {string} props.children.filterAccessor - 필터링할 컬럼의 accessor
+ * @param {Function} props.children.onSearch - 검색 이벤트 핸들러
+ * @param {string} props.children.filterValue - 현재 필터 값
+ * @returns {JSX.Element} 렌더링된 툴바 컴포넌트
+ */
+declare const TableToolbar: ({ children, filterAccessor }: TableToolbarProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * 테이블의 메인 렌더링을 처리하는 컴포넌트
+ * @component
+ * @param {Object} props - 컴포넌트 props
+ * @param {Array<string>} [props.fixedColumns=[]] - 고정/핀 처리할 컬럼 ID 배열
+ * @param {boolean} [props.useVirtualization=true] - 대용량 데이터 처리를 위한 가상화 사용 여부
+ * @param {boolean} [props.isSticky=true] - 스크롤 시 헤더 고정 여부
+ * @param {number} [props.stickyHeaderTopPosition=120] - 고정 헤더의 상단 위치(픽셀)
+ * @param {ReactNode} props.children - 테이블 내부에 렌더링할 자식 컴포넌트
+ * @param {number} [props.emptyRowCount=8] - 빈 행 수
+ * @returns {JSX.Element} 렌더링된 테이블 컴포넌트
+ */
+declare const TableMain: ({ fixedColumns, useVirtualization, isSticky, stickyHeaderTopPosition, children, maxHeight, emptyRowCount, }: TableMainProps) => react_jsx_runtime.JSX.Element;
+
+declare type TableEmptyProps = {
+    children?: React__default.ReactNode;
+};
+declare const TableEmpty: ({ children }: TableEmptyProps) => react_jsx_runtime.JSX.Element;
+
+declare const TableColumnVisibility: () => react_jsx_runtime.JSX.Element;
+
+/**
+ * 테이블 필터 바 컴포넌트
+ * @component
+ * @returns {JSX.Element} 필터 바 렌더링
+ */
+declare const TableFilterBar: React$1.MemoExoticComponent<({ outsideFilters }: {
+    outsideFilters?: ColumnFilter[] | undefined;
+}) => react_jsx_runtime.JSX.Element>;
+
+declare type TableButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    leftSource?: ReactNode;
+    children: string;
+    rightSource?: ReactNode;
+};
+declare const TableButton: ({ children, leftSource, rightSource, ...buttonProps }: TableButtonProps) => react_jsx_runtime.JSX.Element;
+
+declare type TableBadgeProps = {
+    children: ReactNode;
+};
+declare const TableBadge: ({ children }: TableBadgeProps) => react_jsx_runtime.JSX.Element;
+
+declare type TableComponentType = typeof Table & {
+    Toolbar: typeof TableToolbar;
+    FilterBar: typeof TableFilterBar;
+    Main: typeof TableMain;
+    Pagination: typeof TablePagination;
+    Empty: typeof TableEmpty;
+    ColumnVisibility: typeof TableColumnVisibility;
+    Button: typeof TableButton;
+    Badge: typeof TableBadge;
+};
+declare const TableComponent: TableComponentType;
+
+export { ActionsProps, DescriptionProps, FixedColumn, PinningPosition, TableComponent as Table, TableBadge, TableButton, TableContextType, TableHeadCellProps, TableMainProps, TablePaginationProps, TableProps, TableToolbarProps, TitleGroup, TitleGroupHeaderProps, TitleGroupHelpIconProps, TitleGroupProps };

package/dist/index.d.ts

@@ -1,7 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { TextProps, TooltipProps, IconButtonProps, IconButton } from '@shoplflow/base';
 import { ChildrenProps } from '@shoplflow/base/src/utils/type/ComponentProps';
-import { ReactNode, ReactElement } from 'react';
+import * as React$1 from 'react';
+import React__default, { ReactNode, ReactElement, RefObject, Dispatch, SetStateAction, CSSProperties, ButtonHTMLAttributes } from 'react';
+import { Table as Table$1, ColumnDef, Header, RowData, ColumnFilter } from '@tanstack/react-table';
+export { createColumnHelper } from '@tanstack/react-table';
 
 declare type ActionsProps = {
     children: ReactNode;
@@ -66,4 +69,220 @@ declare const TitleGroup: {
     Description: ({ description, ...rest }: DescriptionProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { ActionsProps, DescriptionProps, TitleGroup, TitleGroupHeaderProps, TitleGroupHelpIconProps, TitleGroupProps };
+declare type TableContextType<T extends object> = {
+    table: Table$1<T>;
+    headerRef: RefObject<HTMLDivElement>;
+    bodyRef: RefObject<HTMLDivElement>;
+    footerRef: RefObject<HTMLDivElement>;
+    tableScrollRef: RefObject<HTMLDivElement>;
+    selectedRows?: T[];
+    onClickRow?: (row?: T) => void;
+    hasToolbar?: boolean;
+    hasFilterBar?: boolean;
+    hasPagination?: boolean;
+    columnResizing?: boolean;
+    filterValue: string;
+    setFilterValue: Dispatch<SetStateAction<string>>;
+};
+
+declare type TableProps<T extends object> = {
+    data: T[];
+    columns: Array<ColumnDef<T, any>>;
+    columnResizing?: boolean;
+    children: ReactNode;
+    manualPagination?: boolean;
+    manualFiltering?: boolean;
+    manualSorting?: boolean;
+    selectedRows?: T[];
+    onSelectedRowsChange?: (rows: T[]) => void;
+    onClickRow?: (data?: T) => void;
+};
+declare type TableMainProps = {
+    fixedColumns?: FixedColumn[];
+    useVirtualization?: boolean;
+    useColumnVirtualization?: boolean;
+    isSticky?: boolean;
+    stickyHeaderTopPosition?: number;
+    onClickRow?: (rowData: any) => void;
+    children?: ReactNode;
+    maxHeight?: string;
+    emptyRowCount?: number;
+};
+declare type TableToolbarProps = {
+    filterAccessor?: string;
+    children: (props: {
+        totalCount: number;
+        filterAccessor: string;
+        onSearch: (value: string) => void;
+        filterValue: string;
+    }) => ReactNode;
+};
+declare type TableHeadCellProps = {
+    header: Header<any, unknown>;
+    onFilterChange?: (value: string) => void;
+    onSortChange?: (direction: 'asc' | 'desc' | undefined) => void;
+};
+declare type PinningPosition = 'left' | 'right';
+declare type FixedColumn = {
+    index: number;
+    position: PinningPosition;
+};
+declare type TablePaginationProps = {
+    total: number;
+    defaultPageSize: number;
+    children?: ReactNode;
+    pageSizeList?: Array<{
+        key: string;
+        label: string;
+    }>;
+    setCurrentPage?: (params: {
+        pageIndex: number;
+        pageSize: number;
+    }) => void;
+    notSizeOption?: boolean;
+    resetDependencies?: any[];
+    currentPage?: number;
+};
+
+declare type FilterChangeHandler = (value: string) => void;
+declare type SortChangeHandler = (order: 'asc' | 'desc' | undefined) => void;
+declare type GlobalFilterChangeHandler = (value: string) => void;
+/**
+ * @typedef {Object} ColumnMeta 테이블 컬럼의 메타 데이터 타입 정의
+ * @property {'text' | 'range' | 'select'} [filterVariant] - 필터 입력 타입
+ * @property {Array<{label: string, value: string}>} [filterOptions] - select 타입 필터의 옵션 목록
+ * @property {string[]} [sortLabels] - 정렬 라벨 목록
+ * @property {{style?: CSSProperties}} [headerProps] - 헤더 셀의 스타일 속성
+ * @property {{style?: CSSProperties}} [cellProps] - 데이터 셀의 스타일 속성
+ * @property {(value: string) => void} [onFilterChange] - 필터 값 변경 핸들러
+ * @property {(order: 'asc' | 'desc' | undefined) => void} [onSortChange] - 정렬 순서 변경 핸들러
+ * @property {(value: string) => void} [onGlobalFilterChange] - 전역 필터 값 변경 핸들러
+ * @property {boolean} [activeHover] - 행 호버 효과 활성화 여부
+ */
+declare module '@tanstack/react-table' {
+    interface TableMeta<TData extends RowData> {
+        onGlobalFilterChange?: GlobalFilterChangeHandler;
+    }
+    interface ColumnMeta<TData extends RowData, TValue> {
+        filterVariant?: 'text' | 'range' | 'select';
+        filterOptions?: Array<{
+            icon?: ReactElement;
+            label: string;
+            value: string;
+        }>;
+        sortLabels?: string[];
+        headerProps?: {
+            style?: CSSProperties;
+        };
+        cellProps?: {
+            style?: CSSProperties;
+        };
+        onFilterChange?: FilterChangeHandler;
+        onSortChange?: SortChangeHandler;
+        onGlobalFilterChange?: GlobalFilterChangeHandler;
+        activeHover?: boolean;
+        hiddenColumn?: boolean;
+        isLastColumn?: boolean;
+    }
+}
+/**
+ * 테이블 컴포넌트
+ * @component
+ * @template T - 테이블 데이터의 타입
+ * @param {Object} props - 컴포넌트 props
+ * @param {T[]} props.data - 테이블에 표시할 데이터 배열
+ * @param {Array<ColumnDef<T>>} props.columns - 테이블 컬럼 정의 배열
+ * @param {boolean} [props.columnResizing=false] - 컬럼 리사이징 활성화 여부
+ * @param {ReactNode} props.children - 테이블 내부에 렌더링할 자식 컴포넌트
+ * @param {boolean} [props.manualPagination=false] - 수동 페이지네이션 사용 여부
+ * @param {T[]} [props.selectedRows=[]] - 선택된 행 데이터 배열
+ * @param {Function} [props.onSelectedRowsChange] - 선택된 행이 변경될 때 호출되는 콜백 함수
+ * @param {Function} [props.onClickRow] - 행 클릭 시 호출되는 콜백 함수
+ * @returns {JSX.Element} 렌더링된 테이블 컴포넌트
+ */
+declare const Table: <T extends object>({ data, columns, columnResizing, children, manualPagination, manualFiltering, manualSorting, selectedRows, onSelectedRowsChange, onClickRow, }: TableProps<T>) => react_jsx_runtime.JSX.Element;
+
+/**
+ * 테이블의 페이지네이션을 처리하는 컴포넌트
+ * @component
+ * @param {Object} props - 컴포넌트 props
+ * @param {number} props.total - 전체 데이터 수
+ * @param {number} props.defaultPageSize - 기본 페이지 크기
+ * @param {ReactNode} props.children - 페이지네이션 내부에 렌더링할 자식 컴포넌트
+ * @param {number[]} [props.pageSizeList] - 페이지 크기 선택 옵션 리스트
+ * @param {Function} [props.setCurrentPage] - 현재 페이지 변경 콜백 함수
+ * @param {boolean} [props.notSizeOption] - 페이지 크기 선택 옵션 표시 여부
+ * @param {number} [props.currentPage] - 현재 페이지 인덱스
+ * @returns {JSX.Element} 렌더링된 페이지네이션 컴포넌트
+ */
+declare const TablePagination: ({ total, defaultPageSize, children, pageSizeList, setCurrentPage, notSizeOption, currentPage, }: TablePaginationProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * 테이블의 툴바를 렌더링하는 컴포넌트
+ * @component
+ * @param {Object} props - 컴포넌트 props
+ * @param {string} [props.filterAccessor] - 필터링할 컬럼의 accessor
+ * @param {Function} props.children - 툴바 내부에 렌더링할 자식 컴포넌트를 반환하는 함수
+ * @param {number} props.children.totalCount - 전체 데이터 수
+ * @param {string} props.children.filterAccessor - 필터링할 컬럼의 accessor
+ * @param {Function} props.children.onSearch - 검색 이벤트 핸들러
+ * @param {string} props.children.filterValue - 현재 필터 값
+ * @returns {JSX.Element} 렌더링된 툴바 컴포넌트
+ */
+declare const TableToolbar: ({ children, filterAccessor }: TableToolbarProps) => react_jsx_runtime.JSX.Element;
+
+/**
+ * 테이블의 메인 렌더링을 처리하는 컴포넌트
+ * @component
+ * @param {Object} props - 컴포넌트 props
+ * @param {Array<string>} [props.fixedColumns=[]] - 고정/핀 처리할 컬럼 ID 배열
+ * @param {boolean} [props.useVirtualization=true] - 대용량 데이터 처리를 위한 가상화 사용 여부
+ * @param {boolean} [props.isSticky=true] - 스크롤 시 헤더 고정 여부
+ * @param {number} [props.stickyHeaderTopPosition=120] - 고정 헤더의 상단 위치(픽셀)
+ * @param {ReactNode} props.children - 테이블 내부에 렌더링할 자식 컴포넌트
+ * @param {number} [props.emptyRowCount=8] - 빈 행 수
+ * @returns {JSX.Element} 렌더링된 테이블 컴포넌트
+ */
+declare const TableMain: ({ fixedColumns, useVirtualization, isSticky, stickyHeaderTopPosition, children, maxHeight, emptyRowCount, }: TableMainProps) => react_jsx_runtime.JSX.Element;
+
+declare type TableEmptyProps = {
+    children?: React__default.ReactNode;
+};
+declare const TableEmpty: ({ children }: TableEmptyProps) => react_jsx_runtime.JSX.Element;
+
+declare const TableColumnVisibility: () => react_jsx_runtime.JSX.Element;
+
+/**
+ * 테이블 필터 바 컴포넌트
+ * @component
+ * @returns {JSX.Element} 필터 바 렌더링
+ */
+declare const TableFilterBar: React$1.MemoExoticComponent<({ outsideFilters }: {
+    outsideFilters?: ColumnFilter[] | undefined;
+}) => react_jsx_runtime.JSX.Element>;
+
+declare type TableButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+    leftSource?: ReactNode;
+    children: string;
+    rightSource?: ReactNode;
+};
+declare const TableButton: ({ children, leftSource, rightSource, ...buttonProps }: TableButtonProps) => react_jsx_runtime.JSX.Element;
+
+declare type TableBadgeProps = {
+    children: ReactNode;
+};
+declare const TableBadge: ({ children }: TableBadgeProps) => react_jsx_runtime.JSX.Element;
+
+declare type TableComponentType = typeof Table & {
+    Toolbar: typeof TableToolbar;
+    FilterBar: typeof TableFilterBar;
+    Main: typeof TableMain;
+    Pagination: typeof TablePagination;
+    Empty: typeof TableEmpty;
+    ColumnVisibility: typeof TableColumnVisibility;
+    Button: typeof TableButton;
+    Badge: typeof TableBadge;
+};
+declare const TableComponent: TableComponentType;
+
+export { ActionsProps, DescriptionProps, FixedColumn, PinningPosition, TableComponent as Table, TableBadge, TableButton, TableContextType, TableHeadCellProps, TableMainProps, TablePaginationProps, TableProps, TableToolbarProps, TitleGroup, TitleGroupHeaderProps, TitleGroupHelpIconProps, TitleGroupProps };