@shoplflow/templates 0.1.67 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.cts +20 -20
- package/dist/index.d.ts +20 -20
- package/package.json +14 -30
package/dist/index.d.cts
CHANGED
|
@@ -7,13 +7,13 @@ import { Table as Table$1, ColumnDef, Header, RowData, ColumnFilter } from '@tan
|
|
|
7
7
|
export { createColumnHelper } from '@tanstack/react-table';
|
|
8
8
|
import { IconSource } from '@shoplflow/shopl-assets';
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
type ActionsProps = {
|
|
11
11
|
children: ReactNode;
|
|
12
12
|
};
|
|
13
|
-
|
|
13
|
+
type DescriptionProps = {
|
|
14
14
|
description?: string;
|
|
15
15
|
} & TextProps;
|
|
16
|
-
|
|
16
|
+
type TitleGroupHelpIconProps = {
|
|
17
17
|
/**
|
|
18
18
|
* 툴팁 내용, 없을 경우 Tooltip 미노출
|
|
19
19
|
*/
|
|
@@ -35,7 +35,7 @@ declare type TitleGroupHelpIconProps = {
|
|
|
35
35
|
*/
|
|
36
36
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
37
37
|
};
|
|
38
|
-
|
|
38
|
+
type TitleGroupHeaderProps = {
|
|
39
39
|
/**
|
|
40
40
|
* 제목
|
|
41
41
|
*/
|
|
@@ -70,7 +70,7 @@ declare const TitleGroup: {
|
|
|
70
70
|
Description: ({ description, ...rest }: DescriptionProps) => react_jsx_runtime.JSX.Element;
|
|
71
71
|
};
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
type TableContextType<T extends object> = {
|
|
74
74
|
table: Table$1<T>;
|
|
75
75
|
headerRef: RefObject<HTMLDivElement>;
|
|
76
76
|
bodyRef: RefObject<HTMLDivElement>;
|
|
@@ -86,7 +86,7 @@ declare type TableContextType<T extends object> = {
|
|
|
86
86
|
setFilterValue: Dispatch<SetStateAction<string>>;
|
|
87
87
|
};
|
|
88
88
|
|
|
89
|
-
|
|
89
|
+
type TableProps<T extends object> = {
|
|
90
90
|
data: T[];
|
|
91
91
|
columns: Array<ColumnDef<T, any>>;
|
|
92
92
|
columnResizing?: boolean;
|
|
@@ -98,7 +98,7 @@ declare type TableProps<T extends object> = {
|
|
|
98
98
|
onSelectedRowsChange?: (rows: T[]) => void;
|
|
99
99
|
onClickRow?: (data?: T) => void;
|
|
100
100
|
};
|
|
101
|
-
|
|
101
|
+
type TableMainProps = {
|
|
102
102
|
fixedColumns?: FixedColumn[];
|
|
103
103
|
useVirtualization?: boolean;
|
|
104
104
|
useColumnVirtualization?: boolean;
|
|
@@ -109,7 +109,7 @@ declare type TableMainProps = {
|
|
|
109
109
|
maxHeight?: string;
|
|
110
110
|
emptyRowCount?: number;
|
|
111
111
|
};
|
|
112
|
-
|
|
112
|
+
type TableToolbarProps = {
|
|
113
113
|
filterAccessor?: string;
|
|
114
114
|
height?: string;
|
|
115
115
|
padding?: string;
|
|
@@ -124,17 +124,17 @@ declare type TableToolbarProps = {
|
|
|
124
124
|
*/
|
|
125
125
|
totalCount?: number;
|
|
126
126
|
};
|
|
127
|
-
|
|
127
|
+
type TableHeadCellProps = {
|
|
128
128
|
header: Header<any, unknown>;
|
|
129
129
|
onFilterChange?: (value: string) => void;
|
|
130
130
|
onSortChange?: (direction: 'asc' | 'desc' | undefined) => void;
|
|
131
131
|
};
|
|
132
|
-
|
|
133
|
-
|
|
132
|
+
type PinningPosition = 'left' | 'right';
|
|
133
|
+
type FixedColumn = {
|
|
134
134
|
index: number;
|
|
135
135
|
position: PinningPosition;
|
|
136
136
|
};
|
|
137
|
-
|
|
137
|
+
type TablePaginationProps = {
|
|
138
138
|
total: number;
|
|
139
139
|
defaultPageSize: number;
|
|
140
140
|
children?: ReactNode;
|
|
@@ -152,9 +152,9 @@ declare type TablePaginationProps = {
|
|
|
152
152
|
sizeVar?: 'S' | 'XS';
|
|
153
153
|
};
|
|
154
154
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
155
|
+
type FilterChangeHandler = (value: string) => void;
|
|
156
|
+
type SortChangeHandler = (order: 'asc' | 'desc' | undefined) => void;
|
|
157
|
+
type GlobalFilterChangeHandler = (value: string) => void;
|
|
158
158
|
/**
|
|
159
159
|
* @typedef {Object} ColumnMeta 테이블 컬럼의 메타 데이터 타입 정의
|
|
160
160
|
* @property {'text' | 'range' | 'select'} [filterVariant] - 필터 입력 타입
|
|
@@ -253,7 +253,7 @@ declare const TableToolbar: ({ children, filterAccessor, height, padding, totalC
|
|
|
253
253
|
*/
|
|
254
254
|
declare const TableMain: ({ fixedColumns, useVirtualization, isSticky, stickyHeaderTopPosition, children, maxHeight, emptyRowCount, }: TableMainProps) => react_jsx_runtime.JSX.Element;
|
|
255
255
|
|
|
256
|
-
|
|
256
|
+
type TableEmptyProps = {
|
|
257
257
|
children?: React__default.ReactNode;
|
|
258
258
|
};
|
|
259
259
|
declare const TableEmpty: ({ children }: TableEmptyProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -266,22 +266,22 @@ declare const TableColumnVisibility: () => react_jsx_runtime.JSX.Element;
|
|
|
266
266
|
* @returns {JSX.Element} 필터 바 렌더링
|
|
267
267
|
*/
|
|
268
268
|
declare const TableFilterBar: React$1.MemoExoticComponent<({ outsideFilters }: {
|
|
269
|
-
outsideFilters?: ColumnFilter[]
|
|
269
|
+
outsideFilters?: ColumnFilter[];
|
|
270
270
|
}) => react_jsx_runtime.JSX.Element>;
|
|
271
271
|
|
|
272
|
-
|
|
272
|
+
type TableButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
273
273
|
leftSource?: ReactNode;
|
|
274
274
|
children: string;
|
|
275
275
|
rightSource?: ReactNode;
|
|
276
276
|
};
|
|
277
277
|
declare const TableButton: ({ children, leftSource, rightSource, ...buttonProps }: TableButtonProps) => react_jsx_runtime.JSX.Element;
|
|
278
278
|
|
|
279
|
-
|
|
279
|
+
type TableBadgeProps = {
|
|
280
280
|
children: ReactNode;
|
|
281
281
|
};
|
|
282
282
|
declare const TableBadge: ({ children }: TableBadgeProps) => react_jsx_runtime.JSX.Element;
|
|
283
283
|
|
|
284
|
-
|
|
284
|
+
type TableComponentType = typeof Table & {
|
|
285
285
|
Toolbar: typeof TableToolbar;
|
|
286
286
|
FilterBar: typeof TableFilterBar;
|
|
287
287
|
Main: typeof TableMain;
|
package/dist/index.d.ts
CHANGED
|
@@ -7,13 +7,13 @@ import { Table as Table$1, ColumnDef, Header, RowData, ColumnFilter } from '@tan
|
|
|
7
7
|
export { createColumnHelper } from '@tanstack/react-table';
|
|
8
8
|
import { IconSource } from '@shoplflow/shopl-assets';
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
type ActionsProps = {
|
|
11
11
|
children: ReactNode;
|
|
12
12
|
};
|
|
13
|
-
|
|
13
|
+
type DescriptionProps = {
|
|
14
14
|
description?: string;
|
|
15
15
|
} & TextProps;
|
|
16
|
-
|
|
16
|
+
type TitleGroupHelpIconProps = {
|
|
17
17
|
/**
|
|
18
18
|
* 툴팁 내용, 없을 경우 Tooltip 미노출
|
|
19
19
|
*/
|
|
@@ -35,7 +35,7 @@ declare type TitleGroupHelpIconProps = {
|
|
|
35
35
|
*/
|
|
36
36
|
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
|
37
37
|
};
|
|
38
|
-
|
|
38
|
+
type TitleGroupHeaderProps = {
|
|
39
39
|
/**
|
|
40
40
|
* 제목
|
|
41
41
|
*/
|
|
@@ -70,7 +70,7 @@ declare const TitleGroup: {
|
|
|
70
70
|
Description: ({ description, ...rest }: DescriptionProps) => react_jsx_runtime.JSX.Element;
|
|
71
71
|
};
|
|
72
72
|
|
|
73
|
-
|
|
73
|
+
type TableContextType<T extends object> = {
|
|
74
74
|
table: Table$1<T>;
|
|
75
75
|
headerRef: RefObject<HTMLDivElement>;
|
|
76
76
|
bodyRef: RefObject<HTMLDivElement>;
|
|
@@ -86,7 +86,7 @@ declare type TableContextType<T extends object> = {
|
|
|
86
86
|
setFilterValue: Dispatch<SetStateAction<string>>;
|
|
87
87
|
};
|
|
88
88
|
|
|
89
|
-
|
|
89
|
+
type TableProps<T extends object> = {
|
|
90
90
|
data: T[];
|
|
91
91
|
columns: Array<ColumnDef<T, any>>;
|
|
92
92
|
columnResizing?: boolean;
|
|
@@ -98,7 +98,7 @@ declare type TableProps<T extends object> = {
|
|
|
98
98
|
onSelectedRowsChange?: (rows: T[]) => void;
|
|
99
99
|
onClickRow?: (data?: T) => void;
|
|
100
100
|
};
|
|
101
|
-
|
|
101
|
+
type TableMainProps = {
|
|
102
102
|
fixedColumns?: FixedColumn[];
|
|
103
103
|
useVirtualization?: boolean;
|
|
104
104
|
useColumnVirtualization?: boolean;
|
|
@@ -109,7 +109,7 @@ declare type TableMainProps = {
|
|
|
109
109
|
maxHeight?: string;
|
|
110
110
|
emptyRowCount?: number;
|
|
111
111
|
};
|
|
112
|
-
|
|
112
|
+
type TableToolbarProps = {
|
|
113
113
|
filterAccessor?: string;
|
|
114
114
|
height?: string;
|
|
115
115
|
padding?: string;
|
|
@@ -124,17 +124,17 @@ declare type TableToolbarProps = {
|
|
|
124
124
|
*/
|
|
125
125
|
totalCount?: number;
|
|
126
126
|
};
|
|
127
|
-
|
|
127
|
+
type TableHeadCellProps = {
|
|
128
128
|
header: Header<any, unknown>;
|
|
129
129
|
onFilterChange?: (value: string) => void;
|
|
130
130
|
onSortChange?: (direction: 'asc' | 'desc' | undefined) => void;
|
|
131
131
|
};
|
|
132
|
-
|
|
133
|
-
|
|
132
|
+
type PinningPosition = 'left' | 'right';
|
|
133
|
+
type FixedColumn = {
|
|
134
134
|
index: number;
|
|
135
135
|
position: PinningPosition;
|
|
136
136
|
};
|
|
137
|
-
|
|
137
|
+
type TablePaginationProps = {
|
|
138
138
|
total: number;
|
|
139
139
|
defaultPageSize: number;
|
|
140
140
|
children?: ReactNode;
|
|
@@ -152,9 +152,9 @@ declare type TablePaginationProps = {
|
|
|
152
152
|
sizeVar?: 'S' | 'XS';
|
|
153
153
|
};
|
|
154
154
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
155
|
+
type FilterChangeHandler = (value: string) => void;
|
|
156
|
+
type SortChangeHandler = (order: 'asc' | 'desc' | undefined) => void;
|
|
157
|
+
type GlobalFilterChangeHandler = (value: string) => void;
|
|
158
158
|
/**
|
|
159
159
|
* @typedef {Object} ColumnMeta 테이블 컬럼의 메타 데이터 타입 정의
|
|
160
160
|
* @property {'text' | 'range' | 'select'} [filterVariant] - 필터 입력 타입
|
|
@@ -253,7 +253,7 @@ declare const TableToolbar: ({ children, filterAccessor, height, padding, totalC
|
|
|
253
253
|
*/
|
|
254
254
|
declare const TableMain: ({ fixedColumns, useVirtualization, isSticky, stickyHeaderTopPosition, children, maxHeight, emptyRowCount, }: TableMainProps) => react_jsx_runtime.JSX.Element;
|
|
255
255
|
|
|
256
|
-
|
|
256
|
+
type TableEmptyProps = {
|
|
257
257
|
children?: React__default.ReactNode;
|
|
258
258
|
};
|
|
259
259
|
declare const TableEmpty: ({ children }: TableEmptyProps) => react_jsx_runtime.JSX.Element;
|
|
@@ -266,22 +266,22 @@ declare const TableColumnVisibility: () => react_jsx_runtime.JSX.Element;
|
|
|
266
266
|
* @returns {JSX.Element} 필터 바 렌더링
|
|
267
267
|
*/
|
|
268
268
|
declare const TableFilterBar: React$1.MemoExoticComponent<({ outsideFilters }: {
|
|
269
|
-
outsideFilters?: ColumnFilter[]
|
|
269
|
+
outsideFilters?: ColumnFilter[];
|
|
270
270
|
}) => react_jsx_runtime.JSX.Element>;
|
|
271
271
|
|
|
272
|
-
|
|
272
|
+
type TableButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
|
|
273
273
|
leftSource?: ReactNode;
|
|
274
274
|
children: string;
|
|
275
275
|
rightSource?: ReactNode;
|
|
276
276
|
};
|
|
277
277
|
declare const TableButton: ({ children, leftSource, rightSource, ...buttonProps }: TableButtonProps) => react_jsx_runtime.JSX.Element;
|
|
278
278
|
|
|
279
|
-
|
|
279
|
+
type TableBadgeProps = {
|
|
280
280
|
children: ReactNode;
|
|
281
281
|
};
|
|
282
282
|
declare const TableBadge: ({ children }: TableBadgeProps) => react_jsx_runtime.JSX.Element;
|
|
283
283
|
|
|
284
|
-
|
|
284
|
+
type TableComponentType = typeof Table & {
|
|
285
285
|
Toolbar: typeof TableToolbar;
|
|
286
286
|
FilterBar: typeof TableFilterBar;
|
|
287
287
|
Main: typeof TableMain;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shoplflow/templates",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -40,38 +40,23 @@
|
|
|
40
40
|
"@emotion/styled": "11.10.8",
|
|
41
41
|
"@rollup/plugin-commonjs": "^25.0.7",
|
|
42
42
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
43
|
-
"@storybook/addon-a11y": "^
|
|
44
|
-
"@storybook/addon-
|
|
45
|
-
"@storybook/addon-
|
|
46
|
-
"@storybook/addon-
|
|
47
|
-
"@storybook/addon-
|
|
48
|
-
"@storybook/
|
|
49
|
-
"@storybook/addon-essentials": "^8.4.7",
|
|
50
|
-
"@storybook/addon-interactions": "^8.4.7",
|
|
51
|
-
"@storybook/addon-links": "^8.4.7",
|
|
52
|
-
"@storybook/addon-mdx-gfm": "^8.4.7",
|
|
53
|
-
"@storybook/addon-measure": "^8.4.7",
|
|
54
|
-
"@storybook/addon-outline": "^8.4.7",
|
|
55
|
-
"@storybook/addon-toolbars": "^8.4.7",
|
|
56
|
-
"@storybook/addon-viewport": "^8.4.7",
|
|
57
|
-
"@storybook/blocks": "^8.4.7",
|
|
58
|
-
"@storybook/manager-api": "^8.4.7",
|
|
59
|
-
"@storybook/preview-api": "^8.4.7",
|
|
60
|
-
"@storybook/react": "^8.4.7",
|
|
61
|
-
"@storybook/react-vite": "^8.4.7",
|
|
62
|
-
"@storybook/test": "^8.4.7",
|
|
63
|
-
"@storybook/theming": "^8.4.7",
|
|
43
|
+
"@storybook/addon-a11y": "^10.2.1",
|
|
44
|
+
"@storybook/addon-designs": "^11.1.1",
|
|
45
|
+
"@storybook/addon-links": "^10.2.1",
|
|
46
|
+
"@storybook/addon-mcp": "^0.2.2",
|
|
47
|
+
"@storybook/addon-docs": "^10.2.4",
|
|
48
|
+
"@storybook/react-vite": "^10.2.1",
|
|
64
49
|
"@types/node": "20.4.9",
|
|
65
50
|
"@types/react": "^18.2.0",
|
|
66
51
|
"@types/react-dom": "^18.2.1",
|
|
67
52
|
"classnames": "^2.3.2",
|
|
68
|
-
"eslint-plugin-storybook": "
|
|
69
|
-
"storybook": "^
|
|
53
|
+
"eslint-plugin-storybook": "9.1.17",
|
|
54
|
+
"storybook": "^10.2.1",
|
|
70
55
|
"storybook-addon-code-editor": "^4.1.2",
|
|
71
56
|
"ts-node": "^10.9.1",
|
|
72
57
|
"tslib": "^2.6.2",
|
|
73
58
|
"tsup": "7.2.0",
|
|
74
|
-
"typescript": "
|
|
59
|
+
"typescript": "^5.9.0"
|
|
75
60
|
},
|
|
76
61
|
"eslintConfig": {
|
|
77
62
|
"extends": [
|
|
@@ -91,10 +76,10 @@
|
|
|
91
76
|
"react-datepicker": "^7.3.0",
|
|
92
77
|
"react-dom": "^18.2.0",
|
|
93
78
|
"simplebar-react": "^3.2.6",
|
|
94
|
-
"@shoplflow/base": "^0.
|
|
79
|
+
"@shoplflow/base": "^0.46.0",
|
|
95
80
|
"@shoplflow/hada-assets": "^0.1.10",
|
|
96
|
-
"@shoplflow/shopl-assets": "^0.12.
|
|
97
|
-
"@shoplflow/utils": "^0.
|
|
81
|
+
"@shoplflow/shopl-assets": "^0.12.36",
|
|
82
|
+
"@shoplflow/utils": "^0.8.0"
|
|
98
83
|
},
|
|
99
84
|
"repository": {
|
|
100
85
|
"type": "git",
|
|
@@ -112,8 +97,7 @@
|
|
|
112
97
|
"build:storybook": "storybook build",
|
|
113
98
|
"build": "pnpm run build:package && pnpm run build:storybook",
|
|
114
99
|
"dev:stories": "storybook dev -p 6008",
|
|
115
|
-
"dev": "tsup --watch"
|
|
116
|
-
"build-storybook": "storybook build"
|
|
100
|
+
"dev": "tsup --watch"
|
|
117
101
|
},
|
|
118
102
|
"module": "dist/index.js",
|
|
119
103
|
"types": "dist/index.d.ts"
|