td-stylekit 30.14.0 → 30.14.2
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/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,17 @@
|
|
|
1
|
+
## [30.14.2](https://github.com/treasure-data/td-stylekit/compare/v30.14.1...v30.14.2) (2025-07-08)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* **FG-182:** Inconsistent table cell height ([#1686](https://github.com/treasure-data/td-stylekit/issues/1686)) ([228aaba](https://github.com/treasure-data/td-stylekit/commit/228aabac45b1184fad2f39c55d14a73b83addb87))
|
|
7
|
+
|
|
8
|
+
## [30.14.1](https://github.com/treasure-data/td-stylekit/compare/v30.14.0...v30.14.1) (2025-06-26)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
* **FG-179:** Update DataGrid highlight color ([#1681](https://github.com/treasure-data/td-stylekit/issues/1681)) ([4a3ace5](https://github.com/treasure-data/td-stylekit/commit/4a3ace500abfb275aad03d86c7c62c0ef65642cc))
|
|
14
|
+
|
|
1
15
|
# [30.14.0](https://github.com/treasure-data/td-stylekit/compare/v30.13.1...v30.14.0) (2025-06-18)
|
|
2
16
|
|
|
3
17
|
|
package/dist/es/Badge/Badge.js
CHANGED
|
@@ -26,13 +26,16 @@ var getStyle = function getStyle(_ref) {
|
|
|
26
26
|
paddingBottom: theme.space[1],
|
|
27
27
|
paddingLeft: theme.space[3],
|
|
28
28
|
paddingRight: theme.space[3],
|
|
29
|
-
borderRadius:
|
|
29
|
+
borderRadius: theme.radius[4],
|
|
30
30
|
backgroundColor: theme.palette.primary[1],
|
|
31
31
|
color: theme.palette.primary[3],
|
|
32
32
|
borderWidth: 1,
|
|
33
33
|
borderStyle: 'solid',
|
|
34
34
|
borderColor: theme.palette.primary[2],
|
|
35
|
-
fontWeight: 600
|
|
35
|
+
fontWeight: 600,
|
|
36
|
+
display: 'inline-flex',
|
|
37
|
+
alignItems: 'center',
|
|
38
|
+
justifyContent: 'center'
|
|
36
39
|
}, (0, _ThemeProvider.getOverrides)(_ThemeProvider.Overridable.Badge.Root)({
|
|
37
40
|
theme: theme
|
|
38
41
|
}));
|
|
@@ -78,7 +81,7 @@ var Badge = /*#__PURE__*/(0, _base["default"])('span', process.env.NODE_ENV ===
|
|
|
78
81
|
} : {
|
|
79
82
|
target: "e1h5k3bd0",
|
|
80
83
|
label: "Badge"
|
|
81
|
-
})(getStyle, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
84
|
+
})(getStyle, process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9CYWRnZS9CYWRnZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErRWMiLCJmaWxlIjoiLi4vLi4vLi4vc3JjL0JhZGdlL0JhZGdlLnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnXG5pbXBvcnQgY29sb3IgZnJvbSAnY29sb3InXG5pbXBvcnQgeyBCQURHRV9UWVBFUyB9IGZyb20gJy4vY29uc3RhbnRzJ1xuaW1wb3J0IHsgT3ZlcnJpZGFibGUsIGdldE92ZXJyaWRlcyB9IGZyb20gJy4uL1RoZW1lUHJvdmlkZXInXG5jb25zdCBnZXRTdHlsZSA9ICh7IHRoZW1lLCB0eXBlIH0pID0+IHtcbiAgY29uc3QgYmFzZSA9IHtcbiAgICBmb250U2l6ZTogdGhlbWUuZm9udFNpemVbMF0sXG4gICAgcGFkZGluZ1RvcDogdGhlbWUuc3BhY2VbMV0sXG4gICAgcGFkZGluZ0JvdHRvbTogdGhlbWUuc3BhY2VbMV0sXG4gICAgcGFkZGluZ0xlZnQ6IHRoZW1lLnNwYWNlWzNdLFxuICAgIHBhZGRpbmdSaWdodDogdGhlbWUuc3BhY2VbM10sXG4gICAgYm9yZGVyUmFkaXVzOiB0aGVtZS5yYWRpdXNbNF0sXG4gICAgYmFja2dyb3VuZENvbG9yOiB0aGVtZS5wYWxldHRlLnByaW1hcnlbMV0sXG4gICAgY29sb3I6IHRoZW1lLnBhbGV0dGUucHJpbWFyeVszXSxcbiAgICBib3JkZXJXaWR0aDogMSxcbiAgICBib3JkZXJTdHlsZTogJ3NvbGlkJyxcbiAgICBib3JkZXJDb2xvcjogdGhlbWUucGFsZXR0ZS5wcmltYXJ5WzJdLFxuICAgIGZvbnRXZWlnaHQ6IDYwMCxcbiAgICBkaXNwbGF5OiAnaW5saW5lLWZsZXgnLFxuICAgIGFsaWduSXRlbXM6ICdjZW50ZXInLFxuICAgIGp1c3RpZnlDb250ZW50OiAnY2VudGVyJyxcbiAgICAuLi5nZXRPdmVycmlkZXMoT3ZlcnJpZGFibGUuQmFkZ2UuUm9vdCkoeyB0aGVtZSB9KVxuICB9XG4gIHN3aXRjaCAodHlwZSkge1xuICAgIGNhc2UgQkFER0VfVFlQRVMuRVJST1I6XG4gICAgICByZXR1cm4ge1xuICAgICAgICAuLi5iYXNlLFxuICAgICAgICBiYWNrZ3JvdW5kQ29sb3I6IHRoZW1lLnBhbGV0dGUuZXJyb3JbMF0sXG4gICAgICAgIGNvbG9yOiB0aGVtZS5wYWxldHRlLmVycm9yWzFdLFxuICAgICAgICBib3JkZXJDb2xvcjogY29sb3IodGhlbWUucGFsZXR0ZS5lcnJvclsxXSlcbiAgICAgICAgICAuc2F0dXJhdGUoMC41KVxuICAgICAgICAgIC5saWdodGVuKDAuOSlcbiAgICAgICAgICAuc3RyaW5nKCksXG4gICAgICAgIC4uLmdldE92ZXJyaWRlcyhPdmVycmlkYWJsZS5CYWRnZS5FcnJvcikoeyB0aGVtZSB9KVxuICAgICAgfVxuICAgIGNhc2UgQkFER0VfVFlQRVMuV0FSTklORzpcbiAgICAgIHJldHVybiB7XG4gICAgICAgIC4uLmJhc2UsXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS53YXJuaW5nWzBdLFxuICAgICAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS53YXJuaW5nWzFdLFxuICAgICAgICBib3JkZXJDb2xvcjogY29sb3IodGhlbWUucGFsZXR0ZS53YXJuaW5nWzFdKVxuICAgICAgICAgIC5zYXR1cmF0ZSgtMC4xKVxuICAgICAgICAgIC5saWdodGVuKDEpXG4gICAgICAgICAgLnN0cmluZygpLFxuICAgICAgICAuLi5nZXRPdmVycmlkZXMoT3ZlcnJpZGFibGUuQmFkZ2UuV2FybmluZykoeyB0aGVtZSB9KVxuICAgICAgfVxuICAgIGNhc2UgQkFER0VfVFlQRVMuU1VDQ0VTUzpcbiAgICAgIHJldHVybiB7XG4gICAgICAgIC4uLmJhc2UsXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS5zdWNjZXNzWzBdLFxuICAgICAgICBjb2xvcjogY29sb3IodGhlbWUucGFsZXR0ZS5zdWNjZXNzWzFdKVxuICAgICAgICAgIC5zYXR1cmF0ZSgtMC42KVxuICAgICAgICAgIC5saWdodGVuKC0wLjIpXG4gICAgICAgICAgLnN0cmluZygpLFxuICAgICAgICBib3JkZXJDb2xvcjogY29sb3IodGhlbWUucGFsZXR0ZS5zdWNjZXNzWzBdKVxuICAgICAgICAgIC5zYXR1cmF0ZSgtMC43KVxuICAgICAgICAgIC5saWdodGVuKC0wLjIpXG4gICAgICAgICAgLnN0cmluZygpLFxuICAgICAgICAuLi5nZXRPdmVycmlkZXMoT3ZlcnJpZGFibGUuQmFkZ2UuU3VjY2VzcykoeyB0aGVtZSB9KVxuICAgICAgfVxuICAgIGNhc2UgQkFER0VfVFlQRVMuTkVVVFJBTDpcbiAgICAgIHJldHVybiB7XG4gICAgICAgIC4uLmJhc2UsXG4gICAgICAgIGJhY2tncm91bmRDb2xvcjogdGhlbWUucGFsZXR0ZS5uZXV0cmFsWzNdLFxuICAgICAgICBjb2xvcjogdGhlbWUucGFsZXR0ZS5uZXV0cmFsWzEwXSxcbiAgICAgICAgYm9yZGVyQ29sb3I6IHRoZW1lLnBhbGV0dGUubmV1dHJhbFs1XSxcbiAgICAgICAgLi4uZ2V0T3ZlcnJpZGVzKE92ZXJyaWRhYmxlLkJhZGdlLk5ldXRyYWwpKHsgdGhlbWUgfSlcbiAgICAgIH1cbiAgICBkZWZhdWx0OlxuICAgICAgcmV0dXJuIGJhc2VcbiAgfVxufVxuXG5leHBvcnQgdHlwZSBCYWRnZVByb3BzID0ge1xuICAvKiogSGlnaGxpZ2h0aW5nIG9mIHRoZSBiYWRnZS4gRGVmYXVsdHMgdG8gRGVmYXVsdC4gT3B0aW9ucyBhcmUgUHJpbWFyeSwgTmV1dHJhbCwgU3VjY2VzcywgV2FybmluZyBhbmQgRXJyb3IgKi9cbiAgdHlwZT86IEJBREdFX1RZUEVTXG4gIGNoaWxkcmVuPzogUmVhY3QuUmVhY3ROb2RlXG59XG5cbmNvbnN0IEJhZGdlID0gc3R5bGVkKCdzcGFuJyk8QmFkZ2VQcm9wcz4oZ2V0U3R5bGUpXG5CYWRnZS5kaXNwbGF5TmFtZSA9ICdCYWRnZSdcbkJhZGdlLmRlZmF1bHRQcm9wcyA9IHsgdHlwZTogQkFER0VfVFlQRVMuREVGQVVMVCB9XG5leHBvcnQgZGVmYXVsdCBCYWRnZVxuIl19 */");
|
|
82
85
|
Badge.displayName = 'Badge';
|
|
83
86
|
Badge.defaultProps = {
|
|
84
87
|
type: _constants.BADGE_TYPES.DEFAULT
|
|
@@ -117,6 +117,7 @@ declare namespace ThemeProvider {
|
|
|
117
117
|
backgroundColor?: undefined;
|
|
118
118
|
color?: undefined;
|
|
119
119
|
fontWeight?: undefined;
|
|
120
|
+
height?: undefined;
|
|
120
121
|
borderBottom?: undefined;
|
|
121
122
|
':hover'?: undefined;
|
|
122
123
|
borderRight?: undefined;
|
|
@@ -127,6 +128,7 @@ declare namespace ThemeProvider {
|
|
|
127
128
|
backgroundColor: string;
|
|
128
129
|
color: string;
|
|
129
130
|
fontWeight: number;
|
|
131
|
+
height: string;
|
|
130
132
|
borderBottom?: undefined;
|
|
131
133
|
':hover'?: undefined;
|
|
132
134
|
borderRight?: undefined;
|
|
@@ -137,6 +139,7 @@ declare namespace ThemeProvider {
|
|
|
137
139
|
color: string;
|
|
138
140
|
borderRadius?: undefined;
|
|
139
141
|
fontWeight?: undefined;
|
|
142
|
+
height?: undefined;
|
|
140
143
|
borderBottom?: undefined;
|
|
141
144
|
':hover'?: undefined;
|
|
142
145
|
borderRight?: undefined;
|
|
@@ -151,6 +154,7 @@ declare namespace ThemeProvider {
|
|
|
151
154
|
borderColor?: undefined;
|
|
152
155
|
color?: undefined;
|
|
153
156
|
fontWeight?: undefined;
|
|
157
|
+
height?: undefined;
|
|
154
158
|
borderRight?: undefined;
|
|
155
159
|
border?: undefined;
|
|
156
160
|
} | {
|
|
@@ -160,6 +164,7 @@ declare namespace ThemeProvider {
|
|
|
160
164
|
backgroundColor?: undefined;
|
|
161
165
|
color?: undefined;
|
|
162
166
|
fontWeight?: undefined;
|
|
167
|
+
height?: undefined;
|
|
163
168
|
borderBottom?: undefined;
|
|
164
169
|
':hover'?: undefined;
|
|
165
170
|
border?: undefined;
|
|
@@ -172,6 +177,7 @@ declare namespace ThemeProvider {
|
|
|
172
177
|
backgroundColor?: undefined;
|
|
173
178
|
color?: undefined;
|
|
174
179
|
fontWeight?: undefined;
|
|
180
|
+
height?: undefined;
|
|
175
181
|
borderBottom?: undefined;
|
|
176
182
|
borderRight?: undefined;
|
|
177
183
|
border?: undefined;
|
|
@@ -181,6 +187,7 @@ declare namespace ThemeProvider {
|
|
|
181
187
|
borderColor?: undefined;
|
|
182
188
|
backgroundColor?: undefined;
|
|
183
189
|
color?: undefined;
|
|
190
|
+
height?: undefined;
|
|
184
191
|
borderBottom?: undefined;
|
|
185
192
|
':hover'?: undefined;
|
|
186
193
|
borderRight?: undefined;
|
|
@@ -191,6 +198,7 @@ declare namespace ThemeProvider {
|
|
|
191
198
|
backgroundColor?: undefined;
|
|
192
199
|
color?: undefined;
|
|
193
200
|
fontWeight?: undefined;
|
|
201
|
+
height?: undefined;
|
|
194
202
|
borderBottom?: undefined;
|
|
195
203
|
':hover'?: undefined;
|
|
196
204
|
borderRight?: undefined;
|
|
@@ -202,6 +210,7 @@ declare namespace ThemeProvider {
|
|
|
202
210
|
borderColor?: undefined;
|
|
203
211
|
color?: undefined;
|
|
204
212
|
fontWeight?: undefined;
|
|
213
|
+
height?: undefined;
|
|
205
214
|
borderBottom?: undefined;
|
|
206
215
|
':hover'?: undefined;
|
|
207
216
|
borderRight?: undefined;
|
|
@@ -212,9 +221,32 @@ declare namespace ThemeProvider {
|
|
|
212
221
|
borderColor?: undefined;
|
|
213
222
|
color?: undefined;
|
|
214
223
|
fontWeight?: undefined;
|
|
224
|
+
height?: undefined;
|
|
215
225
|
borderBottom?: undefined;
|
|
216
226
|
':hover'?: undefined;
|
|
217
227
|
borderRight?: undefined;
|
|
228
|
+
} | {
|
|
229
|
+
backgroundColor: string;
|
|
230
|
+
borderRadius?: undefined;
|
|
231
|
+
borderColor?: undefined;
|
|
232
|
+
color?: undefined;
|
|
233
|
+
fontWeight?: undefined;
|
|
234
|
+
height?: undefined;
|
|
235
|
+
borderBottom?: undefined;
|
|
236
|
+
':hover'?: undefined;
|
|
237
|
+
borderRight?: undefined;
|
|
238
|
+
border?: undefined;
|
|
239
|
+
} | {
|
|
240
|
+
backgroundColor: string;
|
|
241
|
+
color: string;
|
|
242
|
+
borderRadius?: undefined;
|
|
243
|
+
borderColor?: undefined;
|
|
244
|
+
fontWeight?: undefined;
|
|
245
|
+
height?: undefined;
|
|
246
|
+
borderBottom?: undefined;
|
|
247
|
+
':hover'?: undefined;
|
|
248
|
+
borderRight?: undefined;
|
|
249
|
+
border?: undefined;
|
|
218
250
|
};
|
|
219
251
|
};
|
|
220
252
|
};
|
|
@@ -62,6 +62,7 @@ export declare const theme: {
|
|
|
62
62
|
backgroundColor?: undefined;
|
|
63
63
|
color?: undefined;
|
|
64
64
|
fontWeight?: undefined;
|
|
65
|
+
height?: undefined;
|
|
65
66
|
borderBottom?: undefined;
|
|
66
67
|
':hover'?: undefined;
|
|
67
68
|
borderRight?: undefined;
|
|
@@ -72,6 +73,7 @@ export declare const theme: {
|
|
|
72
73
|
backgroundColor: string;
|
|
73
74
|
color: string;
|
|
74
75
|
fontWeight: number;
|
|
76
|
+
height: string;
|
|
75
77
|
borderBottom?: undefined;
|
|
76
78
|
':hover'?: undefined;
|
|
77
79
|
borderRight?: undefined;
|
|
@@ -82,6 +84,7 @@ export declare const theme: {
|
|
|
82
84
|
color: string;
|
|
83
85
|
borderRadius?: undefined;
|
|
84
86
|
fontWeight?: undefined;
|
|
87
|
+
height?: undefined;
|
|
85
88
|
borderBottom?: undefined;
|
|
86
89
|
':hover'?: undefined;
|
|
87
90
|
borderRight?: undefined;
|
|
@@ -96,6 +99,7 @@ export declare const theme: {
|
|
|
96
99
|
borderColor?: undefined;
|
|
97
100
|
color?: undefined;
|
|
98
101
|
fontWeight?: undefined;
|
|
102
|
+
height?: undefined;
|
|
99
103
|
borderRight?: undefined;
|
|
100
104
|
border?: undefined;
|
|
101
105
|
} | {
|
|
@@ -105,6 +109,7 @@ export declare const theme: {
|
|
|
105
109
|
backgroundColor?: undefined;
|
|
106
110
|
color?: undefined;
|
|
107
111
|
fontWeight?: undefined;
|
|
112
|
+
height?: undefined;
|
|
108
113
|
borderBottom?: undefined;
|
|
109
114
|
':hover'?: undefined;
|
|
110
115
|
border?: undefined;
|
|
@@ -117,6 +122,7 @@ export declare const theme: {
|
|
|
117
122
|
backgroundColor?: undefined;
|
|
118
123
|
color?: undefined;
|
|
119
124
|
fontWeight?: undefined;
|
|
125
|
+
height?: undefined;
|
|
120
126
|
borderBottom?: undefined;
|
|
121
127
|
borderRight?: undefined;
|
|
122
128
|
border?: undefined;
|
|
@@ -126,6 +132,7 @@ export declare const theme: {
|
|
|
126
132
|
borderColor?: undefined;
|
|
127
133
|
backgroundColor?: undefined;
|
|
128
134
|
color?: undefined;
|
|
135
|
+
height?: undefined;
|
|
129
136
|
borderBottom?: undefined;
|
|
130
137
|
':hover'?: undefined;
|
|
131
138
|
borderRight?: undefined;
|
|
@@ -136,6 +143,7 @@ export declare const theme: {
|
|
|
136
143
|
backgroundColor?: undefined;
|
|
137
144
|
color?: undefined;
|
|
138
145
|
fontWeight?: undefined;
|
|
146
|
+
height?: undefined;
|
|
139
147
|
borderBottom?: undefined;
|
|
140
148
|
':hover'?: undefined;
|
|
141
149
|
borderRight?: undefined;
|
|
@@ -147,6 +155,7 @@ export declare const theme: {
|
|
|
147
155
|
borderColor?: undefined;
|
|
148
156
|
color?: undefined;
|
|
149
157
|
fontWeight?: undefined;
|
|
158
|
+
height?: undefined;
|
|
150
159
|
borderBottom?: undefined;
|
|
151
160
|
':hover'?: undefined;
|
|
152
161
|
borderRight?: undefined;
|
|
@@ -157,9 +166,32 @@ export declare const theme: {
|
|
|
157
166
|
borderColor?: undefined;
|
|
158
167
|
color?: undefined;
|
|
159
168
|
fontWeight?: undefined;
|
|
169
|
+
height?: undefined;
|
|
160
170
|
borderBottom?: undefined;
|
|
161
171
|
':hover'?: undefined;
|
|
162
172
|
borderRight?: undefined;
|
|
173
|
+
} | {
|
|
174
|
+
backgroundColor: string;
|
|
175
|
+
borderRadius?: undefined;
|
|
176
|
+
borderColor?: undefined;
|
|
177
|
+
color?: undefined;
|
|
178
|
+
fontWeight?: undefined;
|
|
179
|
+
height?: undefined;
|
|
180
|
+
borderBottom?: undefined;
|
|
181
|
+
':hover'?: undefined;
|
|
182
|
+
borderRight?: undefined;
|
|
183
|
+
border?: undefined;
|
|
184
|
+
} | {
|
|
185
|
+
backgroundColor: string;
|
|
186
|
+
color: string;
|
|
187
|
+
borderRadius?: undefined;
|
|
188
|
+
borderColor?: undefined;
|
|
189
|
+
fontWeight?: undefined;
|
|
190
|
+
height?: undefined;
|
|
191
|
+
borderBottom?: undefined;
|
|
192
|
+
':hover'?: undefined;
|
|
193
|
+
borderRight?: undefined;
|
|
194
|
+
border?: undefined;
|
|
163
195
|
};
|
|
164
196
|
};
|
|
165
197
|
};
|
|
@@ -148,7 +148,8 @@ var overrides = (_overrides = {}, _defineProperty(_defineProperty(_definePropert
|
|
|
148
148
|
borderRadius: '4px',
|
|
149
149
|
backgroundColor: '#F1F4FC',
|
|
150
150
|
color: '#1957DB',
|
|
151
|
-
fontWeight: 500
|
|
151
|
+
fontWeight: 500,
|
|
152
|
+
height: '22px'
|
|
152
153
|
}), _overridable["default"].Badge.Error, {
|
|
153
154
|
borderColor: 'transparent',
|
|
154
155
|
backgroundColor: '#FDE9EB',
|
|
@@ -170,7 +171,7 @@ var overrides = (_overrides = {}, _defineProperty(_defineProperty(_definePropert
|
|
|
170
171
|
// horizontal borders
|
|
171
172
|
borderBottom: "1px solid ".concat(palette.neutral[4]),
|
|
172
173
|
':hover': {
|
|
173
|
-
backgroundColor:
|
|
174
|
+
backgroundColor: '#F8FAFF'
|
|
174
175
|
}
|
|
175
176
|
}), _overridable["default"].DataGrid.Cell, {
|
|
176
177
|
// remove verical borders
|
|
@@ -274,6 +275,11 @@ var overrides = (_overrides = {}, _defineProperty(_defineProperty(_definePropert
|
|
|
274
275
|
};
|
|
275
276
|
}
|
|
276
277
|
return {};
|
|
278
|
+
}), _defineProperty(_defineProperty(_overrides, _overridable["default"].UserAvatar.Root, {
|
|
279
|
+
backgroundColor: palette.neutral[2]
|
|
280
|
+
}), _overridable["default"].UserAvatar.AvatarFallback, {
|
|
281
|
+
backgroundColor: palette.neutral[2],
|
|
282
|
+
color: palette.primary[3]
|
|
277
283
|
}));
|
|
278
284
|
var theme = exports.theme = {
|
|
279
285
|
space: space,
|
package/llms.md
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
# llms.md
|
|
2
|
+
|
|
3
|
+
This file provides guidance to LLM agents. It is symlinked to `CLAUDE.md` and `.github/copilot-settings.md`
|
|
4
|
+
|
|
5
|
+
## Essential Commands
|
|
6
|
+
|
|
7
|
+
### Development
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
yarn start # Start Storybook development server (port 9001)
|
|
11
|
+
yarn build # Build the component library
|
|
12
|
+
yarn test # Run all unit tests
|
|
13
|
+
yarn tdd # Run tests in watch mode
|
|
14
|
+
yarn lint # Run ESLint
|
|
15
|
+
yarn typescript # Run TypeScript type checking
|
|
16
|
+
yarn download:snapshots # Update visual regression snapshots from CircleCI
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
### Pre-commit
|
|
20
|
+
|
|
21
|
+
These commands are run in a pre-commit hook via husky
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
yarn build:icons:types # Generate static types based on icon svgs
|
|
25
|
+
yarn format # Run Prettier
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### CI/CD
|
|
29
|
+
|
|
30
|
+
These commands are only run in CI/CD and are not meant to be run locally:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
yarn release # Publishes a new version to NPM
|
|
34
|
+
yarn build # Builds the library including icons and type declarations
|
|
35
|
+
yarn test:visual-regression # Compares local snapshots against the latest changes
|
|
36
|
+
yarn test:icons # Verifies icons and icon types have been statically generated correctly
|
|
37
|
+
yarn test:dependencies # Verifies depdendency rules in `.dependency-cruiser.js`
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## Architecture Overview
|
|
41
|
+
|
|
42
|
+
**TD Stylekit** is a React component library built with TypeScript and Emotion for styling. The Github owner/repo is `treasure-data/td-stylekit`.
|
|
43
|
+
|
|
44
|
+
Key architectural elements:
|
|
45
|
+
|
|
46
|
+
### Technology Stack
|
|
47
|
+
|
|
48
|
+
- **React 18.2.0** with TypeScript 5.4.5
|
|
49
|
+
- **Emotion 11** for CSS-in-JS styling
|
|
50
|
+
- **Storybook 8.0.9** for component development and documentation
|
|
51
|
+
- **Jest 29** with React Testing Library for testing
|
|
52
|
+
- **Babel** for build transpilation to ES5
|
|
53
|
+
|
|
54
|
+
### Component Structure
|
|
55
|
+
|
|
56
|
+
Each component follows a consistent pattern:
|
|
57
|
+
|
|
58
|
+
```
|
|
59
|
+
ComponentName/
|
|
60
|
+
├── ComponentName.tsx # Main implementation
|
|
61
|
+
├── ComponentName.stories.tsx # Storybook stories
|
|
62
|
+
├── ComponentName.test.tsx # Unit tests
|
|
63
|
+
├── elements.tsx # Styled components (if needed)
|
|
64
|
+
├── types.ts # TypeScript definitions
|
|
65
|
+
└── index.ts # Exports
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Theme System
|
|
69
|
+
|
|
70
|
+
- Centralized theming via `ThemeProvider`
|
|
71
|
+
- v5 theme as primary design system
|
|
72
|
+
- Theme access through Emotion's `useTheme` hook
|
|
73
|
+
- Consistent design tokens and responsive patterns
|
|
74
|
+
|
|
75
|
+
### Styling Approach
|
|
76
|
+
|
|
77
|
+
- CSS-in-JS with Emotion styled components
|
|
78
|
+
- Styled components separated into `elements.tsx` files
|
|
79
|
+
- Theme-driven design with consistent sizing system (small, medium, large, x-large)
|
|
80
|
+
- Accessibility-first design with ARIA support
|
|
81
|
+
|
|
82
|
+
### Icon System
|
|
83
|
+
|
|
84
|
+
- SVG-based icons with build-time optimization
|
|
85
|
+
- Type-safe icon names via TypeScript
|
|
86
|
+
- Custom build script processes icons during build
|
|
87
|
+
|
|
88
|
+
## Testing Requirements
|
|
89
|
+
|
|
90
|
+
### Story Format (Critical for Visual Tests)
|
|
91
|
+
|
|
92
|
+
All Storybook stories must use this exact format:
|
|
93
|
+
|
|
94
|
+
```typescript
|
|
95
|
+
import type { Meta, Story } from '@storybook/react'
|
|
96
|
+
|
|
97
|
+
export default {
|
|
98
|
+
title: 'v5/ComponentName'
|
|
99
|
+
// ... other meta properties
|
|
100
|
+
} as Meta
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
### Testing Strategy
|
|
104
|
+
|
|
105
|
+
- Unit tests with Jest and React Testing Library
|
|
106
|
+
- Visual regression testing via CircleCI
|
|
107
|
+
- Coverage tracking with comprehensive mocking
|
|
108
|
+
- Accessibility testing built into components
|
|
109
|
+
|
|
110
|
+
## Build Process
|
|
111
|
+
|
|
112
|
+
The build system outputs ES modules with TypeScript declarations:
|
|
113
|
+
|
|
114
|
+
- **Entry Point**: `dist/es/index.js`
|
|
115
|
+
- **Types**: Generated TypeScript definitions
|
|
116
|
+
- **Target**: ES5 with modern features
|
|
117
|
+
- **Icons**: Processed and optimized during build
|
|
118
|
+
|
|
119
|
+
## Key Dependencies
|
|
120
|
+
|
|
121
|
+
- **Victory.js** for data visualization components
|
|
122
|
+
- **Framer Motion** for animations
|
|
123
|
+
- **react-select**, **rc-slider** for form controls
|
|
124
|
+
- **date-fns**, **react-day-picker** for date handling
|
|
125
|
+
- **Tippy.js** for tooltips
|
|
126
|
+
|
|
127
|
+
## Development Notes
|
|
128
|
+
|
|
129
|
+
- Uses Yarn v3.2.0 workspaces
|
|
130
|
+
- Conventional commit format required for releases
|
|
131
|
+
- Automated releases via semantic-release
|
|
132
|
+
- Peer dependencies: React & ReactDOM 18.2.0, react-dnd, react-virtualized
|
|
133
|
+
- When you see a code like FG-123, CON-123, API-123, AI-123, etc, that is a Jira ticket you can get more information on using the Jira tool.
|
|
134
|
+
- When you create a branch for a Jira ticket use the format `ai-fix-<ticket key>`, e.g. ai-fix-FG-123.
|
|
135
|
+
- When you create a new branch do it locally with the git cli.
|
|
136
|
+
- Make sure to push the branch to origin before attempting to create a PR.
|
|
137
|
+
- PR titles use the conventional commit format `<scope>(<ticket key>): <description>`. <scope> can be
|
|
138
|
+
- `fix` for bug fixes
|
|
139
|
+
- `feat` for new features
|
|
140
|
+
- `build` for tooling changes
|
|
141
|
+
- `chore` for library upgrades and general maintainance
|
|
142
|
+
- When you are asked to create a PR do it using the GitHub tool.
|