@1d1s/design-system 1.2.0 → 1.2.1
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.
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
export type HeatmapTone = "main" | "mint" | "blue" | "green" | "gray";
|
|
3
|
-
export interface
|
|
3
|
+
export interface HeatmapCellInfo {
|
|
4
|
+
/** 셀 인덱스 (0-based, column-first) */
|
|
5
|
+
index: number;
|
|
6
|
+
/** 셀 레벨 (0~4) */
|
|
7
|
+
level: number;
|
|
8
|
+
}
|
|
9
|
+
export interface HeatmapProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "onClick"> {
|
|
4
10
|
/** 셀 값 배열 (각 0~4 레벨). 길이는 rows×cols 권장 */
|
|
5
11
|
cells?: number[];
|
|
6
12
|
/** 컬럼 수 (default 20) */
|
|
@@ -15,21 +21,50 @@ export interface HeatmapProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
|
|
|
15
21
|
gap?: number;
|
|
16
22
|
/** 셀 모서리 둥글기 px */
|
|
17
23
|
cellRadius?: number;
|
|
18
|
-
/**
|
|
24
|
+
/** 셀 a11y 라벨 생성 함수 (셀 인덱스/레벨 → 텍스트). */
|
|
19
25
|
ariaLabel?: (index: number, level: number) => string;
|
|
26
|
+
/**
|
|
27
|
+
* Hover/포커스 시 popover로 보여줄 컨텐츠 생성 함수.
|
|
28
|
+
* 지정하면 셀이 인터랙티브해지고 hover/click으로 popover가 열려요.
|
|
29
|
+
*/
|
|
30
|
+
renderCellTooltip?: (info: HeatmapCellInfo) => React.ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* 셀 클릭 시 popover 하단에 추가로 렌더링할 액션 영역.
|
|
33
|
+
* 클릭으로 선택된 상태에서만 표시되며, 인터랙션을 위해 `renderCellTooltip`이 함께 필요해요.
|
|
34
|
+
*/
|
|
35
|
+
renderCellActions?: (info: HeatmapCellInfo) => React.ReactNode;
|
|
36
|
+
/** 셀 클릭 콜백 */
|
|
37
|
+
onCellClick?: (info: HeatmapCellInfo) => void;
|
|
38
|
+
/** 셀 hover 콜백 */
|
|
39
|
+
onCellHover?: (info: HeatmapCellInfo | null) => void;
|
|
20
40
|
}
|
|
21
41
|
/**
|
|
22
42
|
* Heatmap
|
|
23
43
|
* GitHub-style 활동 잔디. 7행 × N열 그리드, 각 셀 0~4 레벨.
|
|
24
44
|
*
|
|
45
|
+
* `renderCellTooltip`을 넘기면 각 셀에 hover popover + 클릭 선택 인터랙션이 활성화돼요.
|
|
46
|
+
*
|
|
25
47
|
* @param tone `main` (default) · `mint` · `blue` · `green` · `gray`
|
|
26
48
|
* @param cells 길이 rows×cols 의 number[] 0~4
|
|
27
49
|
* @param cols 컬럼 수 (default 20)
|
|
28
50
|
*
|
|
29
51
|
* @example
|
|
30
52
|
* ```tsx
|
|
53
|
+
* // 정적 (인터랙션 없음)
|
|
31
54
|
* <Heatmap cols={20} cells={data} tone="main" />
|
|
32
|
-
*
|
|
55
|
+
*
|
|
56
|
+
* // hover/click 인터랙션
|
|
57
|
+
* <Heatmap
|
|
58
|
+
* cols={20}
|
|
59
|
+
* cells={data}
|
|
60
|
+
* renderCellTooltip={({ index, level }) =>
|
|
61
|
+
* `${dates[index]} · ${level}회 활동`
|
|
62
|
+
* }
|
|
63
|
+
* renderCellActions={({ index }) => (
|
|
64
|
+
* <Button size="xs" onClick={() => openDay(dates[index])}>일지 보기</Button>
|
|
65
|
+
* )}
|
|
66
|
+
* onCellClick={({ index, level }) => track(index, level)}
|
|
67
|
+
* />
|
|
33
68
|
* ```
|
|
34
69
|
*/
|
|
35
|
-
export declare function Heatmap({ cells, cols, rows, tone, palette, gap, cellRadius, ariaLabel, className, ...props }: HeatmapProps): React.ReactElement;
|
|
70
|
+
export declare function Heatmap({ cells, cols, rows, tone, palette, gap, cellRadius, ariaLabel, renderCellTooltip, renderCellActions, onCellClick, onCellHover, className, ...props }: HeatmapProps): React.ReactElement;
|