@1d1s/design-system 0.2.18 → 0.2.20
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.
|
@@ -14,10 +14,18 @@ export interface StreakProps {
|
|
|
14
14
|
gap?: number;
|
|
15
15
|
/** 추가 클래스 */
|
|
16
16
|
className?: string;
|
|
17
|
+
/**
|
|
18
|
+
* 셀 클릭 시 팝오버 하단에 렌더링할 액션 영역.
|
|
19
|
+
* 버튼, 링크 등 인터랙티브 요소를 넣을 수 있습니다.
|
|
20
|
+
*/
|
|
21
|
+
renderCellActions?: (item: StreakData) => React.ReactNode;
|
|
17
22
|
}
|
|
18
23
|
/**
|
|
19
24
|
* Streak
|
|
20
25
|
* 활동 기록을 깃허브 잔디(Contribution Graph) 스타일로 보여주는 컴포넌트.
|
|
21
26
|
* 7행 그리드 구조로 요일별로 쌓이며 가로로 데이터가 추가됩니다.
|
|
27
|
+
*
|
|
28
|
+
* - 데스크탑: hover 시 날짜/활동 정보 팝오버 표시
|
|
29
|
+
* - 모바일: 클릭 시 테두리 + 정보 팝오버 표시, renderCellActions로 액션 영역 추가 가능
|
|
22
30
|
*/
|
|
23
|
-
export declare function Streak({ data, size, gap, className, }: StreakProps): React.ReactElement;
|
|
31
|
+
export declare function Streak({ data, size, gap, className, renderCellActions, }: StreakProps): React.ReactElement;
|
|
@@ -6,3 +6,7 @@ type Story = StoryObj<typeof Streak>;
|
|
|
6
6
|
export declare const Default: Story;
|
|
7
7
|
export declare const OneYear: Story;
|
|
8
8
|
export declare const Empty: Story;
|
|
9
|
+
/** 클릭 시 테두리와 함께 액션 버튼이 나타납니다. 모바일 환경 대응용. */
|
|
10
|
+
export declare const WithCellActions: Story;
|
|
11
|
+
/** 모바일 뷰포트에서 클릭 인터랙션을 확인합니다. */
|
|
12
|
+
export declare const MobileWithCellActions: Story;
|