@croquiscom/pds 0.46.1 → 0.47.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @croquiscom/pds
 
+## 0.47.0
+
+### Minor Changes
+
+- b86657c: Table 컴포넌트 추가
+
+### Patch Changes
+
+- f0bb138: feat: build 시 class, function 명 유지되도록 설정 변경
+
+## 0.46.2
+
+### Patch Changes
+
+- df895c1: Pagination boundaryCount 오류 수정
+
 ## 0.46.1
 
 ### Patch Changes

package/dist/components/checkbox/Checkbox.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
     checked?: boolean;
     disabled?: boolean;
+    indeterminate?: boolean;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/index.d.ts

@@ -26,3 +26,4 @@ export * from './date-picker';
 export * from './time-picker';
 export * from './pagination';
 export * from './file-upload';
+export * from './table';

package/dist/components/pagination/Pagination.d.ts

@@ -2,7 +2,7 @@ import { HTMLAttributes } from 'react';
 export interface PaginationProps extends HTMLAttributes<HTMLUListElement> {
     disabled?: boolean;
     /**
-     * 전체 페이지 갯수, 음수 또는 undefined일 경우 렌더되지 않습니다.
+     * 전체 페이지 갯수, 음수일 경우 렌더되지 않습니다.
      */
     totalPages: number;
     currentPage: number;

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

@@ -0,0 +1,69 @@
+import React, { Key, ReactElement, PropsWithChildren, Ref } from 'react';
+import { SortDirection, Scroll, TableColumnsType, TableRowsType } from './types';
+export interface TableProps<DataType> {
+    className?: string;
+    /**
+     * 테이블 컬럼 목록
+     *  - useMemo를 통한 메모이제이션된 값을 권장합니다.
+     */
+    columns: TableColumnsType<DataType>;
+    /**
+     * 테이블 로우 목록
+     *  - useMemo를 통한 메모이제이션된 값을 권장합니다.
+     */
+    rows: TableRowsType<DataType>;
+    /**
+     * 테이블 스크롤 영역 너비/높이를 지정할 수 있습니다.
+     *  - { x: number | string, y: number | string }
+     *  - x: 가로 스크롤을 설정하고 스크롤 영역의 너비를 지정합니다.
+     *  - y: 세로 스크롤을 설정하고 스크롤 영역의 높이를 지정합니다.
+     */
+    scroll?: Scroll;
+    /**
+     * 테이블 Loading 여부
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * 테이블 헤더 고정 여부, 세로 스크롤 발생시 고정됩니다.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Sort 대상 컬럼 아이디
+     */
+    sortBy?: string;
+    /**
+     * Sort 정렬 기준
+     */
+    sortDirection?: SortDirection;
+    /**
+     * Row Selection 사용 유무
+     *  - true일 경우 각 테이블 로우는 고유 key가 존재해야 합니다.
+     */
+    selectableRows?: boolean;
+    /**
+     * Table 데이터가 없을 경우 노출되는 텍스트를 지정할 수 있습니다.
+     * @default '데이터가 없습니다'
+     */
+    noDataText?: string;
+    /**
+     * 테이블 로우 호버 스타일 사용 유무, 스펙아웃될 예정입니다.
+     *   - rowspan to highlight all relevant rows 이슈 처리전 임시 props
+     * @default true
+     */
+    cellHoverStyle?: boolean;
+    /**
+     * Sort 이벤트, 대상 Column 아이디를 전달합니다.
+     */
+    onSortBy?: (sortBy: string) => void;
+    /**
+     * Select 이벤트, 선택된 rows, rows key 리스트를 전달합니다.
+     */
+    onSelectRows?: (selectedRowKeys: Key[], selectedRows: TableRowsType<DataType>) => void;
+}
+export declare const Table: <DataType extends object = any>(props: TableProps<DataType> & {
+    children?: React.ReactNode;
+} & {
+    ref?: Ref<HTMLTableElement>;
+}) => ReactElement;

package/dist/components/table/Table.stories.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<(<DataType_1 extends object = any>(props: import("./Table").TableProps<DataType_1> & {
+    children?: React.ReactNode;
+} & {
+    ref?: React.Ref<HTMLTableElement>;
+}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>)>;
+export default _default;
+export declare const Base: any;
+export declare const ColumnAlignAndWidth: any;
+export declare const CustomColumnCell: any;
+export declare const CustomRowCell: any;
+export declare const Loading: any;
+export declare const NoData: any;
+export declare const CustomNoDataText: any;
+export declare const ColumnGroup: any;
+export declare const CellRowSpan: any;
+export declare const ColumnFixed: any;
+export declare const StickyHeader: any;
+export declare const Scroll: any;
+export declare const Selection: any;
+export declare const Sort: any;
+export declare const WithPagination: any;

package/dist/components/table/TableCol.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { TableColumnBase, SortDirection } from './types';
+export declare const COLUMNS_MIN_WIDTH = 48;
+interface TableColProps extends TableColumnBase {
+    id: string;
+    fixedColWidth?: number;
+    stickyHeader?: boolean;
+    sortBy?: string;
+    sortDirection?: SortDirection;
+    onClick?: (sortBy: string) => void;
+}
+export declare const TableCol: React.ForwardRefExoticComponent<TableColProps & React.RefAttributes<HTMLTableCellElement>>;
+export declare const TableColumn: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType<any>;
+} & Omit<TableColProps, "id" | "text">, React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, {}>;
+export {};

package/dist/components/table/TableHeader.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { SelectRowsAction, TableRowsType } from './types';
+import { TableProps } from './Table';
+export interface TableHeaderProps<DataType> extends Pick<TableProps<DataType>, 'columns' | 'rows' | 'stickyHeader' | 'sortBy' | 'sortDirection' | 'onSortBy' | 'selectableRows'> {
+    allSelected?: boolean;
+    selectedRows?: TableRowsType<DataType>;
+    onSelectedRows?: (action: SelectRowsAction<DataType>) => void;
+}
+export declare const TableHeader: <DataType extends object = any>({ columns, rows, stickyHeader, sortBy, sortDirection, allSelected, selectedRows, selectableRows, onSelectedRows, onSortBy, }: TableHeaderProps<DataType>) => JSX.Element;

package/dist/components/table/TableRows.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { TableProps } from './Table';
+import { TableRowsType, SelectRowAction } from './types';
+interface TableRowsProps<DataType> extends Pick<TableProps<DataType>, 'columns' | 'rows' | 'noDataText' | 'loading' | 'selectableRows' | 'cellHoverStyle'> {
+    tableContainerAttribute: number;
+    allSelected?: boolean;
+    selectedRows?: TableRowsType<DataType>;
+    onSelectedRow?: (action: SelectRowAction<DataType>) => void;
+}
+export declare const TableRows: <DataType extends object = any>({ columns, rows, loading, selectableRows, selectedRows, noDataText, cellHoverStyle, tableContainerAttribute, onSelectedRow, }: TableRowsProps<DataType>) => JSX.Element;
+export {};

package/dist/components/table/TableSortIndicator.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { SortDirection } from './types';
+interface TableSortIndicatorProps {
+    isSorted: boolean;
+    sortDirection: SortDirection;
+}
+export declare const TableSortIndicator: ({ isSorted, sortDirection }: TableSortIndicatorProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './Table';
+export * from './types';

package/dist/components/table/reducer.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { TableState, TableAction } from './types';
+export declare function tableReducer<DataType>(state: TableState<DataType>, action: TableAction<DataType>): {
+    allSelected: boolean;
+    selectedRows: import("./types").TableRowsType<DataType>;
+    selectedRowsKey: import("react").Key[];
+    selectableRows?: boolean;
+};

package/dist/components/table/storybook-helper/custom.argTypes.d.ts

@@ -0,0 +1,39 @@
+import { Key } from 'react';
+import { TableColumnBase, TableColumnsType, CellProps } from '../types';
+/** storybook table type helper용 컴포넌트 */
+export interface HelperTableColumnTypeProps<DataType> extends TableColumnBase {
+    /**
+     * 테이블 컬럼 unique id
+     *  - Row data object와 연결할 key name으로 사용됩니다.
+     */
+    id: string;
+    /**
+     * 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.
+     *  - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean })
+     */
+    cellAttributes?: CellProps<DataType>;
+}
+export declare const HelperTableColumnType: <DataType extends object = any>(props: HelperTableColumnTypeProps<DataType>) => any;
+export interface HelperTableColumnGroupTypeProps<DataType> extends TableColumnBase {
+    /**
+     * 테이블 컬럼 그룹
+     *  - 상위 컬럼은 id 속성이 없습니다.
+     *  - 매칭할 row 데이터 key 속성은 각 group 하위 컬럼 id입니다.
+     */
+    columnGroup?: TableColumnsType<DataType>;
+    /**
+     * 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.
+     *  - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean })
+     */
+    cellAttributes?: CellProps<DataType>;
+}
+export declare const HelperTableColumnGroupType: <DataType extends object = any>(props: HelperTableColumnGroupTypeProps<DataType>) => any;
+export interface HelperTableRowsTypeProps {
+    /**
+     * Key: number | string
+     *  - 테이블 로우 데이터 unique key값, selectableRows가 true일 경우 필수로 존재해야합니다.
+     *  - DataType & { key: Key }
+     */
+    key?: Key;
+}
+export declare const HelperTableRowsType: (props: HelperTableRowsTypeProps) => any;

package/dist/components/table/storybook-helper/index.d.ts

@@ -0,0 +1,2 @@
+export * from './custom.argTypes';
+export * from './sampleData';

package/dist/components/table/storybook-helper/sampleData.d.ts

@@ -0,0 +1,32 @@
+import { Key, ReactNode } from 'react';
+import { TableColumnsType, TableRowsType } from '../index';
+export interface DataType {
+    key?: Key;
+    id: number;
+    name: string;
+    engName?: string;
+    code: number;
+    date: string;
+    price: string;
+    amount: number;
+}
+export interface DataTypeReactNode {
+    id: ReactNode;
+    name: ReactNode;
+    code: ReactNode;
+    date: ReactNode;
+    price: ReactNode;
+    amount: ReactNode;
+}
+export declare const columns: TableColumnsType<DataType | DataTypeReactNode>;
+export declare const rows: TableRowsType<DataType>;
+export declare const customColumns: TableColumnsType<DataType | DataTypeReactNode>;
+export declare const customColumnCell: TableColumnsType<DataType | DataTypeReactNode>;
+export declare const customRowCell: TableRowsType<DataTypeReactNode>;
+export declare const groupColumns: TableColumnsType<DataType>;
+export declare const groupRows: TableRowsType<DataType>;
+export declare const RowSpanColumns: TableColumnsType<DataType | DataTypeReactNode>;
+export declare const RowSpanRows: TableRowsType<DataType | DataTypeReactNode>;
+export declare const fixedColumns: TableColumnsType<DataType | DataTypeReactNode>;
+export declare const selectionRows: TableRowsType<DataType>;
+export declare const sortColumns: TableColumnsType<DataType>;

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

@@ -0,0 +1,75 @@
+import { Key, ReactNode, TdHTMLAttributes } from 'react';
+import { CSSValueWithLength } from '../../styles';
+export type SortDirection = 'asc' | 'desc' | 'default';
+export type ColumnAlign = 'left' | 'right' | 'center';
+export type Scroll = {
+    x?: CSSValueWithLength;
+    y?: CSSValueWithLength;
+};
+export type CellProps<DataType> = (row: DataType, index?: number) => Pick<TdHTMLAttributes<any>, 'rowSpan'> & {
+    hidden?: boolean;
+};
+export type TableColumnBase = {
+    /**
+     * 테이블 컬럼 텍스트
+     */
+    text: ReactNode;
+    /**
+     * Column Sort 여부
+     */
+    sortable?: boolean;
+    /**
+     * Column 너비를 지정할 수 있습니다.
+     */
+    width?: number;
+    /**
+     * 가로 스크롤 발생시 Column 고정 여부
+     *  - true일 경우 width값 지정이 필수 입니다.
+     *  - columnGroup이 있을 경우 적용되지 않습니다.
+     */
+    fixed?: boolean;
+    /**
+     * 컬럼 정렬을 지정할 수 있습니다.
+     * @default left
+     */
+    align?: ColumnAlign;
+    /**
+     * 셀 정렬을 지정할 수 있습니다.
+     *  - 지정하지 않을 경우 컬럼 정렬값을 따릅니다.
+     * @default left
+     */
+    cellAlign?: ColumnAlign;
+};
+export interface TableColumnType<DataType> extends TableColumnBase {
+    id: Extract<keyof DataType, string>;
+    /**
+     * 테이블 셀 rowSpan 속성, hidden 여부를 지정할 수 있습니다.
+     *  - (row: DataType, index: index) => ({ rowSpan: number, hidden: boolean })
+     */
+    cellAttributes?: CellProps<DataType>;
+}
+export interface TableColumnGroupType<DataType> extends Omit<TableColumnType<DataType>, 'id'> {
+    columnGroup: TableColumnsType<DataType>;
+}
+export type TableColumnsType<DataType = unknown> = Array<TableColumnType<DataType> | TableColumnGroupType<DataType>>;
+export type TableRowType<DataType> = DataType & {
+    key?: Key;
+};
+export type TableRowsType<DataType = unknown> = Array<TableRowType<DataType>>;
+export interface TableState<DataType = unknown> {
+    allSelected?: boolean;
+    selectableRows?: boolean;
+    selectedRowsKey?: Key[];
+    selectedRows?: TableRowsType<DataType>;
+}
+export interface SelectRowsAction<DataType> {
+    type: 'SELECT_ROWS';
+    rows: TableRowsType<DataType>;
+}
+export interface SelectRowAction<DataType> {
+    type: 'SELECT_ROW';
+    row: TableRowType<DataType>;
+    selected: boolean;
+    totalRowCount: number;
+}
+export type TableAction<DataType> = SelectRowsAction<DataType> | SelectRowAction<DataType>;

package/dist/components/table/utils.d.ts

@@ -0,0 +1,8 @@
+import { TableColumnsType } from './types';
+export interface UseTableColumnsProps<DataType> {
+    columns: TableColumnsType<DataType>;
+}
+export declare function getColGroup<DataType>({ columns }: UseTableColumnsProps<DataType>): any[];
+export declare function getGroupColumns<DataType>({ columns }: UseTableColumnsProps<DataType>): TableColumnsType<DataType>;
+export declare function getFlattenColumns<DataType>({ columns }: UseTableColumnsProps<DataType>): TableColumnsType<DataType>;
+export declare function getFixedMergeColumn<DataType>(columns: TableColumnsType<DataType>, selectableRows: boolean, columnCount: number): number;

package/dist/hooks/useUpdateEffect.d.ts

@@ -0,0 +1 @@
+export declare const useUpdateEffect: (callback: () => void, dependencies?: Array<unknown>) => void;