@pearpages/heatmap 0.1.6 → 0.3.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/LICENSE +21 -0
- package/README.md +311 -1
- package/dist/index.css +134 -135
- package/dist/index.css.map +1 -1
- package/dist/index.d.ts +28 -4
- package/dist/index.js +209 -225
- package/dist/index.js.map +1 -1
- package/package.json +24 -5
package/dist/index.css
CHANGED
|
@@ -1,7 +1,20 @@
|
|
|
1
1
|
/* src/ContributionHeatmap/index.scss */
|
|
2
2
|
.contribution-heatmap {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
--heatmap-font-family:
|
|
4
|
+
-apple-system,
|
|
5
|
+
BlinkMacSystemFont,
|
|
6
|
+
"Segoe UI",
|
|
7
|
+
"Noto Sans",
|
|
8
|
+
Helvetica,
|
|
9
|
+
Arial,
|
|
10
|
+
sans-serif;
|
|
11
|
+
--heatmap-label-size: 11px;
|
|
12
|
+
--heatmap-day-header-font-family:
|
|
13
|
+
ui-monospace,
|
|
14
|
+
SFMono-Regular,
|
|
15
|
+
Menlo,
|
|
16
|
+
Consolas,
|
|
17
|
+
monospace;
|
|
5
18
|
--day-size: 12px;
|
|
6
19
|
--day-gap: 2px;
|
|
7
20
|
--border-radius: 6px;
|
|
@@ -16,9 +29,10 @@
|
|
|
16
29
|
--color-level-2: #40c463;
|
|
17
30
|
--color-level-3: #30a14e;
|
|
18
31
|
--color-level-4: #216e39;
|
|
32
|
+
color-scheme: light dark;
|
|
19
33
|
}
|
|
20
34
|
@media (prefers-color-scheme: dark) {
|
|
21
|
-
.contribution-heatmap {
|
|
35
|
+
.contribution-heatmap:not(.contribution-heatmap--light) {
|
|
22
36
|
--color-bg: #0d1117;
|
|
23
37
|
--color-border: #30363d;
|
|
24
38
|
--color-text: #f0f6fc;
|
|
@@ -30,133 +44,205 @@
|
|
|
30
44
|
--color-level-4: #39d353;
|
|
31
45
|
}
|
|
32
46
|
}
|
|
47
|
+
.contribution-heatmap--dark {
|
|
48
|
+
--color-bg: #0d1117;
|
|
49
|
+
--color-border: #30363d;
|
|
50
|
+
--color-text: #f0f6fc;
|
|
51
|
+
--color-text-muted: #8b949e;
|
|
52
|
+
--color-level-0: #161b22;
|
|
53
|
+
--color-level-1: #0e4429;
|
|
54
|
+
--color-level-2: #006d32;
|
|
55
|
+
--color-level-3: #26a641;
|
|
56
|
+
--color-level-4: #39d353;
|
|
57
|
+
color-scheme: dark;
|
|
58
|
+
}
|
|
59
|
+
.contribution-heatmap--light {
|
|
60
|
+
color-scheme: light;
|
|
61
|
+
}
|
|
33
62
|
.contribution-heatmap {
|
|
63
|
+
font-family: var(--heatmap-font-family);
|
|
64
|
+
font-size: var(--heatmap-label-size);
|
|
65
|
+
line-height: 1;
|
|
66
|
+
color: var(--color-text-muted);
|
|
34
67
|
background: var(--color-bg);
|
|
35
68
|
border-radius: var(--border-radius);
|
|
36
69
|
padding: 20px;
|
|
37
70
|
box-shadow: 0 2px 8px var(--shadow-color);
|
|
38
71
|
border: 1px solid var(--color-border);
|
|
39
72
|
transition: var(--transition);
|
|
73
|
+
box-sizing: border-box;
|
|
40
74
|
max-width: 100%;
|
|
75
|
+
}
|
|
76
|
+
.contribution-heatmap__scroll {
|
|
41
77
|
overflow-x: auto;
|
|
78
|
+
overscroll-behavior-x: contain;
|
|
79
|
+
scrollbar-width: thin;
|
|
80
|
+
padding-block: 3px;
|
|
42
81
|
}
|
|
43
82
|
.contribution-heatmap__table {
|
|
44
|
-
|
|
45
|
-
width: 100%;
|
|
83
|
+
width: max-content;
|
|
46
84
|
border-collapse: separate;
|
|
47
85
|
border-spacing: var(--day-gap);
|
|
48
86
|
}
|
|
49
|
-
.contribution-heatmap__month-header
|
|
87
|
+
.contribution-heatmap__month-header,
|
|
88
|
+
.contribution-heatmap__day-header,
|
|
89
|
+
.contribution-heatmap__day-label,
|
|
90
|
+
.contribution-heatmap__month-label {
|
|
91
|
+
font-size: var(--heatmap-label-size);
|
|
50
92
|
font-weight: 500;
|
|
51
|
-
|
|
93
|
+
color: var(--color-text);
|
|
94
|
+
white-space: nowrap;
|
|
52
95
|
padding: 0;
|
|
53
96
|
border: none;
|
|
54
97
|
background: none;
|
|
55
98
|
}
|
|
99
|
+
.contribution-heatmap__month-header,
|
|
56
100
|
.contribution-heatmap__day-header {
|
|
57
|
-
|
|
58
|
-
padding:
|
|
59
|
-
border: none;
|
|
60
|
-
background: none;
|
|
101
|
+
text-align: left;
|
|
102
|
+
padding-bottom: 4px;
|
|
61
103
|
}
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
104
|
+
.contribution-heatmap__month-header {
|
|
105
|
+
position: relative;
|
|
106
|
+
height: calc(var(--heatmap-label-size) + 6px);
|
|
107
|
+
}
|
|
108
|
+
.contribution-heatmap__month-header-text {
|
|
109
|
+
position: absolute;
|
|
110
|
+
left: 0;
|
|
111
|
+
bottom: 4px;
|
|
112
|
+
}
|
|
113
|
+
.contribution-heatmap__month-header--last .contribution-heatmap__month-header-text {
|
|
114
|
+
left: auto;
|
|
115
|
+
right: 0;
|
|
116
|
+
}
|
|
117
|
+
.contribution-heatmap__day-label,
|
|
118
|
+
.contribution-heatmap__month-label {
|
|
119
|
+
width: 1%;
|
|
120
|
+
text-align: right;
|
|
121
|
+
padding-right: 6px;
|
|
122
|
+
position: sticky;
|
|
123
|
+
left: 0;
|
|
124
|
+
z-index: 1;
|
|
125
|
+
background: var(--color-bg);
|
|
126
|
+
}
|
|
127
|
+
.contribution-heatmap__day-label {
|
|
128
|
+
vertical-align: middle;
|
|
129
|
+
}
|
|
130
|
+
.contribution-heatmap__month-label {
|
|
131
|
+
vertical-align: top;
|
|
66
132
|
}
|
|
67
133
|
.contribution-heatmap:hover {
|
|
68
134
|
box-shadow: 0 4px 16px var(--shadow-color);
|
|
69
135
|
}
|
|
70
136
|
@media (max-width: 768px) {
|
|
71
137
|
.contribution-heatmap {
|
|
72
|
-
font-size: 10px;
|
|
73
|
-
--day-size: 10px;
|
|
74
138
|
--day-gap: 1px;
|
|
75
139
|
padding: 15px;
|
|
76
140
|
}
|
|
77
|
-
.contribution-heatmap__container {
|
|
78
|
-
padding: 0;
|
|
79
|
-
}
|
|
80
141
|
}
|
|
81
142
|
@media (max-width: 480px) {
|
|
82
143
|
.contribution-heatmap {
|
|
83
|
-
font-size: 8px;
|
|
84
|
-
--day-size: 8px;
|
|
85
144
|
--day-gap: 1px;
|
|
86
145
|
padding: 10px;
|
|
87
146
|
}
|
|
88
147
|
}
|
|
89
|
-
.contribution-
|
|
90
|
-
|
|
148
|
+
.contribution-heatmap--reverse {
|
|
149
|
+
--day-size: 20px;
|
|
150
|
+
}
|
|
151
|
+
.contribution-heatmap--reverse .contribution-heatmap__day-header {
|
|
152
|
+
font-family: var(--heatmap-day-header-font-family);
|
|
91
153
|
text-align: center;
|
|
92
154
|
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
155
|
+
.contribution-heatmap--reverse .contribution-heatmap__day {
|
|
156
|
+
height: auto;
|
|
157
|
+
}
|
|
158
|
+
.contribution-heatmap--reverse .contribution-heatmap__day::before {
|
|
159
|
+
width: 100%;
|
|
160
|
+
height: auto;
|
|
161
|
+
aspect-ratio: 1;
|
|
162
|
+
}
|
|
163
|
+
@media (max-width: 480px) {
|
|
164
|
+
.contribution-heatmap--reverse .contribution-heatmap__table {
|
|
165
|
+
width: 100%;
|
|
96
166
|
}
|
|
97
167
|
}
|
|
98
168
|
.contribution-heatmap__day {
|
|
99
169
|
width: var(--day-size);
|
|
170
|
+
min-width: var(--day-size);
|
|
100
171
|
height: var(--day-size);
|
|
101
|
-
|
|
172
|
+
padding: 0;
|
|
173
|
+
border: none;
|
|
102
174
|
cursor: pointer;
|
|
103
|
-
transition: var(--transition);
|
|
104
175
|
position: relative;
|
|
105
|
-
border: 1px solid transparent;
|
|
106
|
-
padding: 0;
|
|
107
|
-
box-sizing: border-box;
|
|
108
|
-
min-width: var(--day-size);
|
|
109
|
-
max-width: var(--day-size);
|
|
110
176
|
}
|
|
111
|
-
.contribution-heatmap__day
|
|
177
|
+
.contribution-heatmap__day::before {
|
|
178
|
+
content: "";
|
|
179
|
+
display: block;
|
|
180
|
+
width: var(--day-size);
|
|
181
|
+
height: var(--day-size);
|
|
182
|
+
margin-inline: auto;
|
|
183
|
+
box-sizing: border-box;
|
|
184
|
+
border: 1px solid transparent;
|
|
185
|
+
border-radius: 2px;
|
|
112
186
|
background-color: var(--color-level-0);
|
|
187
|
+
transition: var(--transition);
|
|
113
188
|
}
|
|
114
|
-
.contribution-heatmap__day--level-0:hover {
|
|
189
|
+
.contribution-heatmap__day--level-0:hover::before {
|
|
115
190
|
background-color: var(--color-level-1);
|
|
116
191
|
border-color: var(--color-level-2);
|
|
117
192
|
}
|
|
118
|
-
.contribution-heatmap__day--level-1 {
|
|
193
|
+
.contribution-heatmap__day--level-1::before {
|
|
119
194
|
background-color: var(--color-level-1);
|
|
120
195
|
}
|
|
121
|
-
.contribution-heatmap__day--level-1:hover {
|
|
196
|
+
.contribution-heatmap__day--level-1:hover::before {
|
|
122
197
|
background-color: var(--color-level-2);
|
|
123
198
|
border-color: var(--color-level-3);
|
|
124
199
|
}
|
|
125
|
-
.contribution-heatmap__day--level-2 {
|
|
200
|
+
.contribution-heatmap__day--level-2::before {
|
|
126
201
|
background-color: var(--color-level-2);
|
|
127
202
|
}
|
|
128
|
-
.contribution-heatmap__day--level-2:hover {
|
|
203
|
+
.contribution-heatmap__day--level-2:hover::before {
|
|
129
204
|
background-color: var(--color-level-3);
|
|
130
205
|
border-color: var(--color-level-4);
|
|
131
206
|
}
|
|
132
|
-
.contribution-heatmap__day--level-3 {
|
|
207
|
+
.contribution-heatmap__day--level-3::before {
|
|
133
208
|
background-color: var(--color-level-3);
|
|
134
209
|
}
|
|
135
|
-
.contribution-heatmap__day--level-3:hover {
|
|
210
|
+
.contribution-heatmap__day--level-3:hover::before {
|
|
136
211
|
background-color: var(--color-level-4);
|
|
137
212
|
border-color: var(--color-level-4);
|
|
138
213
|
}
|
|
139
|
-
.contribution-heatmap__day--level-4 {
|
|
214
|
+
.contribution-heatmap__day--level-4::before {
|
|
140
215
|
background-color: var(--color-level-4);
|
|
141
216
|
}
|
|
142
|
-
.contribution-heatmap__day--level-4:hover {
|
|
217
|
+
.contribution-heatmap__day--level-4:hover::before {
|
|
143
218
|
filter: brightness(1.1);
|
|
144
219
|
border-color: var(--color-level-4);
|
|
145
220
|
}
|
|
146
221
|
.contribution-heatmap__day:hover {
|
|
222
|
+
z-index: 10;
|
|
223
|
+
}
|
|
224
|
+
.contribution-heatmap__day:hover::before {
|
|
147
225
|
transform: scale(1.2);
|
|
148
226
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
|
|
149
|
-
z-index: 10;
|
|
150
227
|
border-radius: 3px;
|
|
151
228
|
}
|
|
229
|
+
.contribution-heatmap__day--outside {
|
|
230
|
+
cursor: default;
|
|
231
|
+
}
|
|
232
|
+
.contribution-heatmap__day--outside::before {
|
|
233
|
+
visibility: hidden;
|
|
234
|
+
}
|
|
152
235
|
.contribution-heatmap__day:focus-visible {
|
|
236
|
+
outline: none;
|
|
237
|
+
}
|
|
238
|
+
.contribution-heatmap__day:focus-visible::before {
|
|
153
239
|
outline: 2px solid var(--color-level-3);
|
|
154
240
|
outline-offset: 2px;
|
|
155
241
|
}
|
|
156
242
|
.contribution-heatmap__legend {
|
|
157
243
|
display: flex;
|
|
158
244
|
align-items: center;
|
|
159
|
-
justify-content:
|
|
245
|
+
justify-content: flex-start;
|
|
160
246
|
gap: 4px;
|
|
161
247
|
margin-top: 12px;
|
|
162
248
|
flex-wrap: wrap;
|
|
@@ -169,13 +255,12 @@
|
|
|
169
255
|
}
|
|
170
256
|
.contribution-heatmap__legend-text {
|
|
171
257
|
color: var(--color-text-muted);
|
|
172
|
-
font-size:
|
|
258
|
+
font-size: var(--heatmap-label-size);
|
|
173
259
|
font-weight: 500;
|
|
174
260
|
margin: 0 4px;
|
|
175
261
|
}
|
|
176
262
|
@media (max-width: 768px) {
|
|
177
263
|
.contribution-heatmap__legend-text {
|
|
178
|
-
font-size: 10px;
|
|
179
264
|
margin: 0 2px;
|
|
180
265
|
}
|
|
181
266
|
}
|
|
@@ -225,7 +310,7 @@
|
|
|
225
310
|
.contribution-heatmap {
|
|
226
311
|
animation: fadeInUp 0.6s ease-out;
|
|
227
312
|
}
|
|
228
|
-
.contribution-heatmap__day {
|
|
313
|
+
.contribution-heatmap__day::before {
|
|
229
314
|
animation: fadeInUp 0.3s ease-out;
|
|
230
315
|
animation-delay: var(--animation-delay, 0s);
|
|
231
316
|
animation-fill-mode: both;
|
|
@@ -251,90 +336,4 @@
|
|
|
251
336
|
--color-level-3: #8a1aff;
|
|
252
337
|
--color-level-4: #6600cc;
|
|
253
338
|
}
|
|
254
|
-
|
|
255
|
-
/* src/Example/index.scss */
|
|
256
|
-
.example__controls {
|
|
257
|
-
background: rgba(255, 255, 255, 0.95);
|
|
258
|
-
backdrop-filter: blur(10px);
|
|
259
|
-
padding: 24px;
|
|
260
|
-
border-radius: 16px;
|
|
261
|
-
margin-bottom: 30px;
|
|
262
|
-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
|
|
263
|
-
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
264
|
-
}
|
|
265
|
-
@media (max-width: 768px) {
|
|
266
|
-
.example__controls {
|
|
267
|
-
padding: 20px;
|
|
268
|
-
margin-bottom: 20px;
|
|
269
|
-
border-radius: 12px;
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
.example__heatmap {
|
|
273
|
-
margin-bottom: 40px;
|
|
274
|
-
}
|
|
275
|
-
@media (max-width: 768px) {
|
|
276
|
-
.example__heatmap {
|
|
277
|
-
margin-bottom: 30px;
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
/* src/Example/controlGroups.scss */
|
|
282
|
-
.control-group {
|
|
283
|
-
margin-bottom: 24px;
|
|
284
|
-
}
|
|
285
|
-
.control-group:last-child {
|
|
286
|
-
margin-bottom: 0;
|
|
287
|
-
}
|
|
288
|
-
.control-group__label {
|
|
289
|
-
display: block;
|
|
290
|
-
font-weight: 600;
|
|
291
|
-
color: #333;
|
|
292
|
-
margin-bottom: 12px;
|
|
293
|
-
font-size: 1rem;
|
|
294
|
-
}
|
|
295
|
-
@media (max-width: 768px) {
|
|
296
|
-
.control-group__label {
|
|
297
|
-
font-size: 0.9rem;
|
|
298
|
-
margin-bottom: 10px;
|
|
299
|
-
}
|
|
300
|
-
}
|
|
301
|
-
.control-group__buttons {
|
|
302
|
-
display: flex;
|
|
303
|
-
gap: 12px;
|
|
304
|
-
flex-wrap: wrap;
|
|
305
|
-
}
|
|
306
|
-
@media (max-width: 768px) {
|
|
307
|
-
.control-group__buttons {
|
|
308
|
-
gap: 8px;
|
|
309
|
-
}
|
|
310
|
-
}
|
|
311
|
-
.control-group__checkbox {
|
|
312
|
-
display: flex;
|
|
313
|
-
align-items: center;
|
|
314
|
-
gap: 8px;
|
|
315
|
-
cursor: pointer;
|
|
316
|
-
font-size: 1rem;
|
|
317
|
-
color: #555;
|
|
318
|
-
margin: 0;
|
|
319
|
-
}
|
|
320
|
-
@media (max-width: 768px) {
|
|
321
|
-
.control-group__checkbox {
|
|
322
|
-
font-size: 0.9rem;
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
.control-group__checkbox input[type=checkbox] {
|
|
326
|
-
width: 18px;
|
|
327
|
-
height: 18px;
|
|
328
|
-
accent-color: #667eea;
|
|
329
|
-
cursor: pointer;
|
|
330
|
-
}
|
|
331
|
-
@media (max-width: 768px) {
|
|
332
|
-
.control-group__checkbox input[type=checkbox] {
|
|
333
|
-
width: 16px;
|
|
334
|
-
height: 16px;
|
|
335
|
-
}
|
|
336
|
-
}
|
|
337
|
-
.control-group__checkbox:hover {
|
|
338
|
-
color: #333;
|
|
339
|
-
}
|
|
340
339
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.scss","../src/index.scss","../src/controlGroups.scss"],"sourcesContent":["// ContributionHeatmap.scss\n// GitHub-style contribution heatmap with BEM methodology\n\n.contribution-heatmap {\n color: var(--color-text-muted);\n font-size: 12px;\n // Component variables\n --day-size: 12px;\n --day-gap: 2px;\n --border-radius: 6px;\n --transition: all 0.2s ease;\n --shadow-color: rgba(0, 0, 0, 0.1);\n\n // Color scheme - GitHub-inspired\n --color-bg: #ffffff;\n --color-border: #e1e4e8;\n --color-text: #24292f;\n --color-text-muted: #656d76;\n --color-level-0: #ebedf0;\n --color-level-1: #9be9a8;\n --color-level-2: #40c463;\n --color-level-3: #30a14e;\n --color-level-4: #216e39;\n\n // Dark mode support\n @media (prefers-color-scheme: dark) {\n --color-bg: #0d1117;\n --color-border: #30363d;\n --color-text: #f0f6fc;\n --color-text-muted: #8b949e;\n --color-level-0: #161b22;\n --color-level-1: #0e4429;\n --color-level-2: #006d32;\n --color-level-3: #26a641;\n --color-level-4: #39d353;\n }\n\n background: var(--color-bg);\n border-radius: var(--border-radius);\n padding: 20px;\n box-shadow: 0 2px 8px var(--shadow-color);\n border: 1px solid var(--color-border);\n transition: var(--transition);\n max-width: 100%;\n overflow-x: auto;\n\n // Table-specific styles\n &__table {\n table-layout: fixed;\n width: 100%;\n border-collapse: separate;\n border-spacing: var(--day-gap);\n }\n\n &__month-header {\n font-weight: 500;\n text-align: left;\n padding: 0;\n border: none;\n background: none;\n }\n\n &__day-header {\n width: 30px;\n padding: 0;\n border: none;\n background: none;\n\n @media (max-width: 768px) {\n width: 20px;\n }\n }\n\n // Hover effect for the entire component\n &:hover {\n box-shadow: 0 4px 16px var(--shadow-color);\n }\n\n // Mobile responsiveness\n @media (max-width: 768px) {\n font-size: 10px;\n --day-size: 10px;\n --day-gap: 1px;\n padding: 15px;\n\n // Reduce padding on mobile\n &__container {\n padding: 0;\n }\n }\n\n @media (max-width: 480px) {\n font-size: 8px;\n --day-size: 8px;\n --day-gap: 1px;\n padding: 10px;\n }\n\n // Header section\n &__header {\n margin-bottom: 16px;\n text-align: center;\n\n @media (max-width: 768px) {\n margin-bottom: 12px;\n }\n }\n\n // Individual day square\n &__day {\n width: var(--day-size);\n height: var(--day-size);\n border-radius: 2px;\n cursor: pointer;\n transition: var(--transition);\n position: relative;\n border: 1px solid transparent;\n padding: 0;\n box-sizing: border-box;\n\n // Ensure consistent sizing in table\n min-width: var(--day-size);\n max-width: var(--day-size);\n\n // Contribution levels\n &--level-0 {\n background-color: var(--color-level-0);\n\n &:hover {\n background-color: var(--color-level-1);\n border-color: var(--color-level-2);\n }\n }\n\n &--level-1 {\n background-color: var(--color-level-1);\n\n &:hover {\n background-color: var(--color-level-2);\n border-color: var(--color-level-3);\n }\n }\n\n &--level-2 {\n background-color: var(--color-level-2);\n\n &:hover {\n background-color: var(--color-level-3);\n border-color: var(--color-level-4);\n }\n }\n\n &--level-3 {\n background-color: var(--color-level-3);\n\n &:hover {\n background-color: var(--color-level-4);\n border-color: var(--color-level-4);\n }\n }\n\n &--level-4 {\n background-color: var(--color-level-4);\n\n &:hover {\n filter: brightness(1.1);\n border-color: var(--color-level-4);\n }\n }\n\n // Hover effects\n &:hover {\n transform: scale(1.2);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n z-index: 10;\n border-radius: 3px;\n }\n\n // Focus styles for accessibility\n &:focus-visible {\n outline: 2px solid var(--color-level-3);\n outline-offset: 2px;\n }\n }\n\n // Legend\n &__legend {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n margin-top: 12px;\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n gap: 3px;\n margin-top: 8px;\n }\n }\n\n &__legend-text {\n color: var(--color-text-muted);\n font-size: 12px;\n font-weight: 500;\n margin: 0 4px;\n\n @media (max-width: 768px) {\n font-size: 10px;\n margin: 0 2px;\n }\n }\n\n &__legend-item {\n width: 12px;\n height: 12px;\n border-radius: 2px;\n cursor: help;\n transition: var(--transition);\n border: 1px solid var(--color-border);\n\n @media (max-width: 768px) {\n width: 10px;\n height: 10px;\n }\n\n &:hover {\n transform: scale(1.2);\n border-color: var(--color-text-muted);\n }\n\n &--level-0 {\n background-color: var(--color-level-0);\n }\n &--level-1 {\n background-color: var(--color-level-1);\n }\n &--level-2 {\n background-color: var(--color-level-2);\n }\n &--level-3 {\n background-color: var(--color-level-3);\n }\n &--level-4 {\n background-color: var(--color-level-4);\n }\n }\n}\n\n// Animation for initial load\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.contribution-heatmap {\n animation: fadeInUp 0.6s ease-out;\n\n &__day {\n animation: fadeInUp 0.3s ease-out;\n animation-delay: var(--animation-delay, 0s);\n animation-fill-mode: both;\n }\n}\n\n// Utilities for different themes\n.contribution-heatmap {\n // Ocean theme\n &--ocean {\n --color-level-0: #e6f3ff;\n --color-level-1: #b3daff;\n --color-level-2: #66b3ff;\n --color-level-3: #1a8cff;\n --color-level-4: #0066cc;\n }\n\n // Sunset theme\n &--sunset {\n --color-level-0: #fff2e6;\n --color-level-1: #ffcc99;\n --color-level-2: #ff9933;\n --color-level-3: #ff6600;\n --color-level-4: #cc3300;\n }\n\n // Purple theme\n &--purple {\n --color-level-0: #f3e6ff;\n --color-level-1: #d9b3ff;\n --color-level-2: #b366ff;\n --color-level-3: #8a1aff;\n --color-level-4: #6600cc;\n }\n}\n",".example {\n &__controls {\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(10px);\n padding: 24px;\n border-radius: 16px;\n margin-bottom: 30px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);\n border: 1px solid rgba(255, 255, 255, 0.2);\n\n @media (max-width: 768px) {\n padding: 20px;\n margin-bottom: 20px;\n border-radius: 12px;\n }\n }\n\n &__heatmap {\n margin-bottom: 40px;\n\n @media (max-width: 768px) {\n margin-bottom: 30px;\n }\n }\n}\n","// Control groups\n.control-group {\n margin-bottom: 24px;\n\n &:last-child {\n margin-bottom: 0;\n }\n\n &__label {\n display: block;\n font-weight: 600;\n color: #333;\n margin-bottom: 12px;\n font-size: 1rem;\n\n @media (max-width: 768px) {\n font-size: 0.9rem;\n margin-bottom: 10px;\n }\n }\n\n &__buttons {\n display: flex;\n gap: 12px;\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n gap: 8px;\n }\n }\n\n &__checkbox {\n display: flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n font-size: 1rem;\n color: #555;\n margin: 0;\n\n @media (max-width: 768px) {\n font-size: 0.9rem;\n }\n\n input[type='checkbox'] {\n width: 18px;\n height: 18px;\n accent-color: #667eea;\n cursor: pointer;\n\n @media (max-width: 768px) {\n width: 16px;\n height: 16px;\n }\n }\n\n &:hover {\n color: #333;\n }\n }\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/ContributionHeatmap/index.scss"],"sourcesContent":["// ContributionHeatmap.scss\n// GitHub-style contribution heatmap with BEM methodology\n@use 'sass:meta';\n@use '../shared/typography';\n\n@mixin dark-tokens {\n --color-bg: #0d1117;\n --color-border: #30363d;\n --color-text: #f0f6fc;\n --color-text-muted: #8b949e;\n --color-level-0: #161b22;\n --color-level-1: #0e4429;\n --color-level-2: #006d32;\n --color-level-3: #26a641;\n --color-level-4: #39d353;\n}\n\n.contribution-heatmap {\n // Typography - overridable exactly like the colour tokens below\n // meta.inspect keeps the quotes that plain interpolation would strip.\n --heatmap-font-family: #{meta.inspect(typography.$font-stack)};\n --heatmap-label-size: 11px;\n --heatmap-day-header-font-family: #{meta.inspect(typography.$mono-stack)};\n\n // Component variables\n --day-size: 12px;\n --day-gap: 2px;\n --border-radius: 6px;\n --transition: all 0.2s ease;\n --shadow-color: rgba(0, 0, 0, 0.1);\n\n // Color scheme - GitHub-inspired\n --color-bg: #ffffff;\n --color-border: #e1e4e8;\n --color-text: #24292f;\n --color-text-muted: #656d76;\n --color-level-0: #ebedf0;\n --color-level-1: #9be9a8;\n --color-level-2: #40c463;\n --color-level-3: #30a14e;\n --color-level-4: #216e39;\n\n // Dark mode. Follows the system by default; --light and --dark force it either way,\n // which is why the palette is a mixin - it has to be emitted twice, once guarded by\n // :not(--light) so forcing light wins under a dark system, and once unguarded on\n // --dark so forcing dark wins under a light one.\n color-scheme: light dark;\n\n @media (prefers-color-scheme: dark) {\n &:not(.contribution-heatmap--light) {\n @include dark-tokens;\n }\n }\n\n &--dark {\n @include dark-tokens;\n color-scheme: dark;\n }\n\n &--light {\n color-scheme: light;\n }\n\n font-family: var(--heatmap-font-family);\n font-size: var(--heatmap-label-size);\n line-height: 1;\n color: var(--color-text-muted);\n background: var(--color-bg);\n border-radius: var(--border-radius);\n padding: 20px;\n box-shadow: 0 2px 8px var(--shadow-color);\n border: 1px solid var(--color-border);\n transition: var(--transition);\n // An ordinary full-width block. It used to shrink-wrap its grid so the legend stayed\n // with it, but WebKit would not do that by any means tried - width: fit-content,\n // -webkit-fit-content, and CSS 2.1 inline-block all render full width on iOS while\n // Chrome shrink-wraps all three. The common factor is the scroll container child\n // (__scroll), though that was never confirmed. Rather than guess a fourth time, the\n // legend is aligned to the start instead, so a full-width card reads correctly\n // whatever the reason - and every browser now renders the same thing.\n //\n // border-box matters here: the library ships no reset, and under content-box the\n // padding is added on top of max-width and the card overflows its parent.\n box-sizing: border-box;\n max-width: 100%;\n\n // Only the grid scrolls - the padding, border and legend stay put.\n &__scroll {\n overflow-x: auto;\n overscroll-behavior-x: contain;\n scrollbar-width: thin;\n // overflow-x:auto makes overflow-y compute to auto too, which would clip the\n // :hover scale on the top and bottom rows. Give it room.\n padding-block: 3px;\n }\n\n // Intrinsic width: the columns are sized by the cells, never stretched to the\n // container. This is what makes --day-size mean something and lets the grid\n // scroll instead of squashing.\n &__table {\n width: max-content;\n border-collapse: separate;\n border-spacing: var(--day-gap);\n }\n\n // Sun/Mon/... and the month names. The two classes swap roles between the\n // default and reversed layouts, so both need the same treatment.\n &__month-header,\n &__day-header,\n &__day-label,\n &__month-label {\n font-size: var(--heatmap-label-size);\n font-weight: 500;\n color: var(--color-text);\n white-space: nowrap;\n padding: 0;\n border: none;\n background: none;\n }\n\n &__month-header,\n &__day-header {\n text-align: left;\n padding-bottom: 4px;\n }\n\n // A month at the edge of the period can span a single week, and its own label is\n // wider than one column. Taking the text out of flow stops it setting the column\n // width - otherwise that one week stretches and opens a gap in the grid.\n &__month-header {\n position: relative;\n height: calc(var(--heatmap-label-size) + 6px);\n }\n\n &__month-header-text {\n position: absolute;\n left: 0;\n bottom: 4px;\n }\n\n // The trailing month is the one that can span a single week, and out of flow its\n // label would overhang the last column - widening the scroll area for the sake of\n // a few pixels of text. Anchor it to the right so it overhangs inwards instead.\n &__month-header--last &__month-header-text {\n left: auto;\n right: 0;\n }\n\n // Shrink-to-fit, so the label column keeps its own width instead of\n // collapsing to a day column. Pinned, so it survives a horizontal scroll -\n // the background has to be opaque because cells slide underneath.\n &__day-label,\n &__month-label {\n width: 1%;\n text-align: right;\n padding-right: 6px;\n position: sticky;\n left: 0;\n z-index: 1;\n background: var(--color-bg);\n }\n\n &__day-label {\n vertical-align: middle;\n }\n\n // Sits against a rowSpan in the reversed layout.\n &__month-label {\n vertical-align: top;\n }\n\n // Hover effect for the entire component\n &:hover {\n box-shadow: 0 4px 16px var(--shadow-color);\n }\n\n // Mobile responsiveness. --day-size deliberately does NOT shrink here: a year is\n // 53 weeks plus a label column, so the grid overflows a phone at every size it\n // could reasonably take (507px at 8px squares, against ~373px of usable width).\n // It scrolls either way, so shrinking only cost legibility and left a 9px tap\n // target on cells that are role=\"button\". Reclaiming the padding is free, and so\n // is the tighter gap - border-spacing is not part of a cell's hit area.\n @media (max-width: 768px) {\n --day-gap: 1px;\n padding: 15px;\n }\n\n @media (max-width: 480px) {\n --day-gap: 1px;\n padding: 10px;\n }\n\n // The reversed layout puts the day names above the columns, so no column can be\n // narrower than \"Wed\". Grow the squares to match instead of leaving every one of\n // them floating in a wider cell. Only seven columns, so it fits at any width.\n &--reverse {\n // Sized to clear the widest day header, which the monospace face below brings\n // down to 19.87px from the proportional \"Wed\" at 23.7px.\n --day-size: 20px;\n\n // The day names sit above their own column here, rather than being row labels,\n // so their differing widths show up as uneven spacing. Monospace makes all\n // seven identical - if a fallback face renders wider, every column widens by\n // the same amount, so the rhythm still can't go uneven.\n .contribution-heatmap__day-header {\n font-family: var(--heatmap-day-header-font-family);\n text-align: center;\n }\n\n // The column is only ever as narrow as its day-name header, and that width is\n // locale-dependent: \"Wed\" is three characters, French \"mer.\" is four. Fill the\n // cell rather than sitting at a fixed px size, so the square tracks whatever the\n // header needs and never leaves slack. --day-size above is the floor.\n .contribution-heatmap__day {\n height: auto;\n\n &::before {\n width: 100%;\n height: auto;\n aspect-ratio: 1;\n }\n }\n\n // On a phone the month grid is the only thing in the card, so let it fill the\n // width - 20px squares marooned in a full-width card look lost. The square\n // already fills its cell above, so widening the table is all that is needed.\n // Auto layout, so __month-label's width: 1% still collapses the Aug/Sep column;\n // table-layout: fixed would divide the width equally and hand the label a full\n // day column.\n @media (max-width: 480px) {\n .contribution-heatmap__table {\n width: 100%;\n }\n }\n }\n\n // Individual day. The cell is only a slot: the visible square is drawn by\n // ::before so that a column wider than --day-size - the reversed layout sizes\n // its columns to the Sun/Mon/... headers - can never stretch the square.\n &__day {\n width: var(--day-size);\n min-width: var(--day-size);\n height: var(--day-size);\n padding: 0;\n border: none;\n cursor: pointer;\n position: relative;\n\n &::before {\n content: '';\n display: block;\n width: var(--day-size);\n height: var(--day-size);\n margin-inline: auto;\n box-sizing: border-box;\n border: 1px solid transparent;\n border-radius: 2px;\n background-color: var(--color-level-0);\n transition: var(--transition);\n }\n\n // Contribution levels\n &--level-0:hover::before {\n background-color: var(--color-level-1);\n border-color: var(--color-level-2);\n }\n\n &--level-1::before {\n background-color: var(--color-level-1);\n }\n\n &--level-1:hover::before {\n background-color: var(--color-level-2);\n border-color: var(--color-level-3);\n }\n\n &--level-2::before {\n background-color: var(--color-level-2);\n }\n\n &--level-2:hover::before {\n background-color: var(--color-level-3);\n border-color: var(--color-level-4);\n }\n\n &--level-3::before {\n background-color: var(--color-level-3);\n }\n\n &--level-3:hover::before {\n background-color: var(--color-level-4);\n border-color: var(--color-level-4);\n }\n\n &--level-4::before {\n background-color: var(--color-level-4);\n }\n\n &--level-4:hover::before {\n filter: brightness(1.1);\n border-color: var(--color-level-4);\n }\n\n // Hover effects\n &:hover {\n z-index: 10;\n }\n\n &:hover::before {\n transform: scale(1.2);\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);\n border-radius: 3px;\n }\n\n // Padding days from groupByWeeks' whole-week fill: outside the period, so\n // they hold the column open but draw nothing. visibility rather than display\n // keeps their contribution to the column width.\n &--outside {\n cursor: default;\n\n &::before {\n visibility: hidden;\n }\n }\n\n // Focus styles for accessibility\n &:focus-visible {\n outline: none;\n }\n\n &:focus-visible::before {\n outline: 2px solid var(--color-level-3);\n outline-offset: 2px;\n }\n }\n\n // Legend\n &__legend {\n display: flex;\n align-items: center;\n // Start-aligned, not centred: the card is as wide as its container while the grid\n // is only as wide as its content, so centring floats the legend away from the\n // squares it describes.\n justify-content: flex-start;\n gap: 4px;\n margin-top: 12px;\n flex-wrap: wrap;\n\n @media (max-width: 768px) {\n gap: 3px;\n margin-top: 8px;\n }\n }\n\n &__legend-text {\n color: var(--color-text-muted);\n font-size: var(--heatmap-label-size);\n font-weight: 500;\n margin: 0 4px;\n\n @media (max-width: 768px) {\n margin: 0 2px;\n }\n }\n\n &__legend-item {\n width: 12px;\n height: 12px;\n border-radius: 2px;\n cursor: help;\n transition: var(--transition);\n border: 1px solid var(--color-border);\n\n @media (max-width: 768px) {\n width: 10px;\n height: 10px;\n }\n\n &:hover {\n transform: scale(1.2);\n border-color: var(--color-text-muted);\n }\n\n &--level-0 {\n background-color: var(--color-level-0);\n }\n &--level-1 {\n background-color: var(--color-level-1);\n }\n &--level-2 {\n background-color: var(--color-level-2);\n }\n &--level-3 {\n background-color: var(--color-level-3);\n }\n &--level-4 {\n background-color: var(--color-level-4);\n }\n }\n}\n\n// Animation for initial load\n@keyframes fadeInUp {\n from {\n opacity: 0;\n transform: translateY(20px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n.contribution-heatmap {\n animation: fadeInUp 0.6s ease-out;\n\n // --animation-delay is set inline per cell and inherits into the pseudo-element.\n &__day::before {\n animation: fadeInUp 0.3s ease-out;\n animation-delay: var(--animation-delay, 0s);\n animation-fill-mode: both;\n }\n}\n\n// Utilities for different themes\n.contribution-heatmap {\n // Ocean theme\n &--ocean {\n --color-level-0: #e6f3ff;\n --color-level-1: #b3daff;\n --color-level-2: #66b3ff;\n --color-level-3: #1a8cff;\n --color-level-4: #0066cc;\n }\n\n // Sunset theme\n &--sunset {\n --color-level-0: #fff2e6;\n --color-level-1: #ffcc99;\n --color-level-2: #ff9933;\n --color-level-3: #ff6600;\n --color-level-4: #cc3300;\n }\n\n // Purple theme\n &--purple {\n --color-level-0: #f3e6ff;\n --color-level-1: #d9b3ff;\n --color-level-2: #b366ff;\n --color-level-3: #8a1aff;\n --color-level-4: #6600cc;\n }\n}\n"],"mappings":"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","names":[]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react from 'react';
|
|
2
2
|
|
|
3
|
+
type Theme = '' | 'ocean' | 'sunset' | 'purple';
|
|
3
4
|
interface ContributionData {
|
|
4
5
|
date: string;
|
|
5
6
|
count: number;
|
|
@@ -18,6 +19,18 @@ type Period = {
|
|
|
18
19
|
start: Date;
|
|
19
20
|
end: Date;
|
|
20
21
|
};
|
|
22
|
+
interface HeatmapLabels {
|
|
23
|
+
less?: string;
|
|
24
|
+
more?: string;
|
|
25
|
+
level?: (level: number) => string;
|
|
26
|
+
noContributions?: string;
|
|
27
|
+
contributions?: (count: number) => string;
|
|
28
|
+
}
|
|
29
|
+
declare const monthNames: readonly ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
|
|
30
|
+
declare const dayNames: readonly ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
31
|
+
declare function getLastYearPeriod(): Period;
|
|
32
|
+
declare function getLastMonthPeriod(): Period;
|
|
33
|
+
declare const createDateString: (date: Date) => string;
|
|
21
34
|
|
|
22
35
|
interface ContributionHeatmapProps {
|
|
23
36
|
data: {
|
|
@@ -26,9 +39,20 @@ interface ContributionHeatmapProps {
|
|
|
26
39
|
weeks: Week[];
|
|
27
40
|
};
|
|
28
41
|
className?: string;
|
|
42
|
+
isReverse?: boolean;
|
|
43
|
+
locale?: string;
|
|
44
|
+
labels?: HeatmapLabels;
|
|
45
|
+
}
|
|
46
|
+
declare function ContributionHeatmap({ data: { period, weeks }, className, isReverse, locale, labels, }: ContributionHeatmapProps): react.JSX.Element;
|
|
47
|
+
|
|
48
|
+
interface GroupByWeeksOptions {
|
|
49
|
+
weekStartsOn?: number;
|
|
29
50
|
}
|
|
30
|
-
declare
|
|
51
|
+
declare const groupByWeeks: (contributions: ContributionData[], { weekStartsOn }?: GroupByWeeksOptions) => Week[];
|
|
31
52
|
|
|
32
|
-
declare function
|
|
53
|
+
declare function generateMockData({ period, isRealistic, }: {
|
|
54
|
+
period: Period | 'lastYear';
|
|
55
|
+
isRealistic: boolean;
|
|
56
|
+
}): ContributionData[];
|
|
33
57
|
|
|
34
|
-
export { ContributionHeatmap,
|
|
58
|
+
export { type ContributionData, ContributionHeatmap, type GroupByWeeksOptions, type HeatmapLabels, type Period, type Theme, type Week, createDateString, dayNames, generateMockData, getLastMonthPeriod, getLastYearPeriod, groupByWeeks, monthNames };
|