@bundle-stats/ui 4.22.2-beta.1 → 4.22.3

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.
Files changed (89) hide show
  1. package/.babelrc.js +65 -24
  2. package/globals.d.ts +13 -0
  3. package/lib/components/bundle-modules/index.js.map +1 -1
  4. package/lib/components/index.js.map +1 -1
  5. package/lib/components/metrics-table-header/metrics-table-header.js +2 -2
  6. package/lib/components/metrics-table-header/metrics-table-header.js.map +1 -1
  7. package/lib/css/default.css +1 -1
  8. package/lib/hooks/rows-sort.js +13 -12
  9. package/lib/hooks/rows-sort.js.map +1 -1
  10. package/lib/ui/button/button.js.map +1 -1
  11. package/lib/ui/empty-set/empty-set.js +3 -3
  12. package/lib/ui/empty-set/empty-set.js.map +1 -1
  13. package/lib-esm/components/bundle-modules/index.js.map +1 -1
  14. package/lib-esm/components/index.js.map +1 -1
  15. package/lib-esm/components/metrics-table-header/metrics-table-header.js +2 -2
  16. package/lib-esm/components/metrics-table-header/metrics-table-header.js.map +1 -1
  17. package/lib-esm/css/default.css +1 -1
  18. package/lib-esm/hooks/rows-sort.js +10 -8
  19. package/lib-esm/hooks/rows-sort.js.map +1 -1
  20. package/lib-esm/ui/button/button.js.map +1 -1
  21. package/lib-esm/ui/empty-set/empty-set.js +3 -3
  22. package/lib-esm/ui/empty-set/empty-set.js.map +1 -1
  23. package/package.json +26 -15
  24. package/src/app/app.stories.tsx +2 -2
  25. package/src/components/asset-info/asset-info.stories.tsx +47 -39
  26. package/src/components/asset-name/asset-name.stories.tsx +1 -3
  27. package/src/components/asset-not-predictive/asset-not-predictive.stories.tsx +22 -15
  28. package/src/components/browsertime-table/browsertime-table.stories.tsx +45 -0
  29. package/src/components/bundle-assets-totals/bundle-assets-totals.stories.tsx +47 -0
  30. package/src/components/bundle-modules/bundle-modules.stories.tsx +191 -0
  31. package/src/components/bundle-modules/bundle-modules.tsx +1 -1
  32. package/src/components/bundle-modules/index.tsx +4 -0
  33. package/src/components/bundle-packages/bundle-packages.stories.tsx +87 -0
  34. package/src/components/delta/delta.stories.tsx +57 -0
  35. package/src/components/entry-info/entry-info.stories.tsx +49 -54
  36. package/src/components/{index.js → index.ts} +4 -2
  37. package/src/components/insights/insights.stories.tsx +36 -33
  38. package/src/components/job-name/job-name.stories.tsx +46 -0
  39. package/src/components/jobs-header/jobs-header.stories.tsx +19 -15
  40. package/src/components/lighthouse-table/lighthouse-table.stories.tsx +30 -0
  41. package/src/components/metric/metric.stories.tsx +24 -22
  42. package/src/components/metric-run-info/metric-run-info.stories.tsx +45 -41
  43. package/src/components/metrics-table/metrics-table.stories.tsx +33 -13
  44. package/src/components/metrics-table/metrics-table.tsx +1 -1
  45. package/src/components/metrics-table-header/metrics-table-header.tsx +9 -4
  46. package/src/components/module-info/module-info.stories.tsx +41 -30
  47. package/src/components/package-info/package-info.stories.tsx +20 -15
  48. package/src/components/run-info/run-info.stories.tsx +39 -37
  49. package/src/components/summary/summary.stories.tsx +26 -32
  50. package/src/css/default.css +1 -1
  51. package/src/hooks/rows-sort.ts +9 -6
  52. package/src/layout/box/box.stories.tsx +35 -28
  53. package/src/layout/flex-stack/flex-stack.stories.tsx +79 -48
  54. package/src/layout/footer/footer.stories.tsx +30 -0
  55. package/src/layout/stack/stack.stories.tsx +68 -44
  56. package/src/ui/alert/alert.stories.tsx +25 -21
  57. package/src/ui/button/button.stories.tsx +181 -176
  58. package/src/ui/button/button.tsx +8 -1
  59. package/src/ui/container/container.stories.tsx +28 -21
  60. package/src/ui/control-group/control-group.stories.tsx +23 -16
  61. package/src/ui/dropdown/dropdown.stories.tsx +23 -15
  62. package/src/ui/empty-set/empty-set.jsx +16 -4
  63. package/src/ui/empty-set/empty-set.stories.tsx +41 -0
  64. package/src/ui/file-name/file-name.stories.tsx +45 -0
  65. package/src/ui/filters/filters.stories.tsx +29 -26
  66. package/src/ui/hover-card/hover-card.stories.tsx +35 -26
  67. package/src/ui/icon/icon.stories.tsx +36 -28
  68. package/src/ui/input/input.stories.tsx +17 -5
  69. package/src/ui/input-search/input-search.stories.tsx +31 -0
  70. package/src/ui/loader/loader.stories.tsx +22 -0
  71. package/src/ui/skeleton/skeleton.stories.tsx +42 -0
  72. package/src/ui/table/table.stories.tsx +244 -218
  73. package/src/ui/tag/tag.stories.tsx +11 -10
  74. package/src/ui/toolbar/toolbar.stories.tsx +41 -0
  75. package/types/components/bundle-modules/bundle-modules.d.ts +1 -1
  76. package/types/components/bundle-modules/index.d.ts +2 -1
  77. package/types/components/index.d.ts +22 -20
  78. package/types/components/metrics-table/metrics-table.d.ts +1 -1
  79. package/types/components/metrics-table-header/metrics-table-header.d.ts +1 -1
  80. package/types/hooks/rows-sort.d.ts +2 -2
  81. package/types/ui/button/button.d.ts +1 -1
  82. package/vitest.config.ts +47 -0
  83. package/vitest.setup.ts +26 -0
  84. package/lib/assets/icons.svg.js +0 -100
  85. package/lib/assets/icons.svg.js.map +0 -1
  86. package/lib-esm/assets/icons.svg.js +0 -63
  87. package/lib-esm/assets/icons.svg.js.map +0 -1
  88. package/src/assets/icons.svg.jsx +0 -279
  89. package/types/assets/icons.svg.d.ts +0 -2
package/src/ui/table/table.stories.tsx CHANGED
@@ -1,238 +1,264 @@
1
1
  import React from 'react';
2
+ import type { Meta, StoryObj } from '@storybook/react';
2
3
 
3
4
  import { getWrapperDecorator } from '../../stories';
4
5
  import { Table } from '.';
5
6
 
6
7
  const { THead, TBody, Td, Tr, Th } = Table;
7
8
 
8
- export default {
9
+ const meta = {
9
10
  title: 'UI/Table',
10
11
  component: Table,
11
12
  decorators: [getWrapperDecorator()],
13
+ } satisfies Meta<typeof Table>;
14
+
15
+ export default meta;
16
+
17
+ type Story = StoryObj<typeof meta>;
18
+
19
+ export const Default: Story = {
20
+ render: () => (
21
+ <Table>
22
+ <TBody>
23
+ <Tr>
24
+ <Td>a1</Td>
25
+ <Td>b1</Td>
26
+ <Td>c1</Td>
27
+ </Tr>
28
+ <Tr>
29
+ <Td>a2</Td>
30
+ <Td>b2</Td>
31
+ <Td>c2</Td>
32
+ </Tr>
33
+ <Tr>
34
+ <Td>a3</Td>
35
+ <Td>b3</Td>
36
+ <Td>c3</Td>
37
+ </Tr>
38
+ </TBody>
39
+ </Table>
40
+ ),
12
41
  };
13
42
 
14
- export const Default = () => (
15
- <Table>
16
- <TBody>
17
- <Tr>
18
- <Td>a1</Td>
19
- <Td>b1</Td>
20
- <Td>c1</Td>
21
- </Tr>
22
- <Tr>
23
- <Td>a2</Td>
24
- <Td>b2</Td>
25
- <Td>c2</Td>
26
- </Tr>
27
- <Tr>
28
- <Td>a3</Td>
29
- <Td>b3</Td>
30
- <Td>c3</Td>
31
- </Tr>
32
- </TBody>
33
- </Table>
34
- );
43
+ export const Compact: Story = {
44
+ render: () => (
45
+ <Table compact>
46
+ <TBody>
47
+ <Tr>
48
+ <Td>a1</Td>
49
+ <Td>b1</Td>
50
+ <Td>c1</Td>
51
+ </Tr>
52
+ <Tr>
53
+ <Td>a2</Td>
54
+ <Td>b2</Td>
55
+ <Td>c2</Td>
56
+ </Tr>
57
+ <Tr>
58
+ <Td>a3</Td>
59
+ <Td>b3</Td>
60
+ <Td>c3</Td>
61
+ </Tr>
62
+ </TBody>
63
+ </Table>
64
+ ),
65
+ };
35
66
 
36
- export const Compact = () => (
37
- <Table compact>
38
- <TBody>
39
- <Tr>
40
- <Td>a1</Td>
41
- <Td>b1</Td>
42
- <Td>c1</Td>
43
- </Tr>
44
- <Tr>
45
- <Td>a2</Td>
46
- <Td>b2</Td>
47
- <Td>c2</Td>
48
- </Tr>
49
- <Tr>
50
- <Td>a3</Td>
51
- <Td>b3</Td>
52
- <Td>c3</Td>
53
- </Tr>
54
- </TBody>
55
- </Table>
56
- );
67
+ export const Outline: Story = {
68
+ render: () => (
69
+ <Table outline>
70
+ <TBody>
71
+ <Tr>
72
+ <Td>a1</Td>
73
+ <Td>b1</Td>
74
+ <Td>c1</Td>
75
+ </Tr>
76
+ <Tr>
77
+ <Td>a2</Td>
78
+ <Td>b2</Td>
79
+ <Td>c2</Td>
80
+ </Tr>
81
+ <Tr>
82
+ <Td>a3</Td>
83
+ <Td>b3</Td>
84
+ <Td>c3</Td>
85
+ </Tr>
86
+ </TBody>
87
+ </Table>
88
+ ),
89
+ };
57
90
 
58
- export const Outline = () => (
59
- <Table outline>
60
- <TBody>
61
- <Tr>
62
- <Td>a1</Td>
63
- <Td>b1</Td>
64
- <Td>c1</Td>
65
- </Tr>
66
- <Tr>
67
- <Td>a2</Td>
68
- <Td>b2</Td>
69
- <Td>c2</Td>
70
- </Tr>
71
- <Tr>
72
- <Td>a3</Td>
73
- <Td>b3</Td>
74
- <Td>c3</Td>
75
- </Tr>
76
- </TBody>
77
- </Table>
78
- );
91
+ export const Empty: Story = {
92
+ render: () => <Table />,
93
+ };
79
94
 
80
- export const Empty = () => <Table />;
81
- export const EmptyWithCustomElement = () => (
82
- <Table emptyMessage={<p style={{ outline: '1px solid lightgray' }}>No items available</p>} />
83
- );
95
+ export const EmptyWithCustomElement: Story = {
96
+ render: () => (
97
+ <Table emptyMessage={<p style={{ outline: '1px solid lightgray' }}>No items available</p>} />
98
+ ),
99
+ };
84
100
 
85
- export const WithHeaders = () => (
86
- <Table>
87
- <THead>
88
- <Tr>
89
- <Th>Col A</Th>
90
- <Th>Col B</Th>
91
- <Th>Col C</Th>
92
- </Tr>
93
- </THead>
94
- <TBody>
95
- <Tr>
96
- <Td>a1</Td>
97
- <Td>b1</Td>
98
- <Td>c1</Td>
99
- </Tr>
100
- <Tr>
101
- <Td>a2</Td>
102
- <Td>b2</Td>
103
- <Td>c2</Td>
104
- </Tr>
105
- <Tr>
106
- <Td>a3</Td>
107
- <Td>b3</Td>
108
- <Td>c3</Td>
109
- </Tr>
110
- </TBody>
111
- </Table>
112
- );
101
+ export const WithHeaders: Story = {
102
+ render: () => (
103
+ <Table>
104
+ <THead>
105
+ <Tr>
106
+ <Th>Col A</Th>
107
+ <Th>Col B</Th>
108
+ <Th>Col C</Th>
109
+ </Tr>
110
+ </THead>
111
+ <TBody>
112
+ <Tr>
113
+ <Td>a1</Td>
114
+ <Td>b1</Td>
115
+ <Td>c1</Td>
116
+ </Tr>
117
+ <Tr>
118
+ <Td>a2</Td>
119
+ <Td>b2</Td>
120
+ <Td>c2</Td>
121
+ </Tr>
122
+ <Tr>
123
+ <Td>a3</Td>
124
+ <Td>b3</Td>
125
+ <Td>c3</Td>
126
+ </Tr>
127
+ </TBody>
128
+ </Table>
129
+ ),
130
+ };
113
131
 
114
- export const WithHeadersAndOutline = () => (
115
- <Table outline>
116
- <THead>
117
- <Tr>
118
- <Th>Col A</Th>
119
- <Th>Col B</Th>
120
- <Th>Col C</Th>
121
- </Tr>
122
- </THead>
123
- <TBody>
124
- <Tr>
125
- <Td>a1</Td>
126
- <Td>b1</Td>
127
- <Td>c1</Td>
128
- </Tr>
129
- <Tr>
130
- <Td>a2</Td>
131
- <Td>b2</Td>
132
- <Td>c2</Td>
133
- </Tr>
134
- <Tr>
135
- <Td>a3</Td>
136
- <Td>b3</Td>
137
- <Td>c3</Td>
138
- </Tr>
139
- </TBody>
140
- </Table>
141
- );
132
+ export const WithHeadersAndOutline: Story = {
133
+ render: () => (
134
+ <Table outline>
135
+ <THead>
136
+ <Tr>
137
+ <Th>Col A</Th>
138
+ <Th>Col B</Th>
139
+ <Th>Col C</Th>
140
+ </Tr>
141
+ </THead>
142
+ <TBody>
143
+ <Tr>
144
+ <Td>a1</Td>
145
+ <Td>b1</Td>
146
+ <Td>c1</Td>
147
+ </Tr>
148
+ <Tr>
149
+ <Td>a2</Td>
150
+ <Td>b2</Td>
151
+ <Td>c2</Td>
152
+ </Tr>
153
+ <Tr>
154
+ <Td>a3</Td>
155
+ <Td>b3</Td>
156
+ <Td>c3</Td>
157
+ </Tr>
158
+ </TBody>
159
+ </Table>
160
+ ),
161
+ };
142
162
 
143
- export const WithMultipleRowsHeader = () => (
144
- <Table>
145
- <THead>
146
- <Tr>
147
- <Th> </Th>
148
- <Th colSpan={2}>Colspan</Th>
149
- </Tr>
150
- <Tr>
151
- <Th>Col A</Th>
152
- <Th>Col B</Th>
153
- <Th>Col C</Th>
154
- </Tr>
155
- </THead>
156
- <TBody>
157
- <Tr>
158
- <Td>a1</Td>
159
- <Td>b1</Td>
160
- <Td>c1</Td>
161
- </Tr>
162
- <Tr>
163
- <Td>a2</Td>
164
- <Td>b2</Td>
165
- <Td>c2</Td>
166
- </Tr>
167
- <Tr>
168
- <Td>a3</Td>
169
- <Td>b3</Td>
170
- <Td>c3</Td>
171
- </Tr>
172
- </TBody>
173
- </Table>
174
- );
163
+ export const WithMultipleRowsHeader: Story = {
164
+ render: () => (
165
+ <Table>
166
+ <THead>
167
+ <Tr>
168
+ <Th> </Th>
169
+ <Th colSpan={2}>Colspan</Th>
170
+ </Tr>
171
+ <Tr>
172
+ <Th>Col A</Th>
173
+ <Th>Col B</Th>
174
+ <Th>Col C</Th>
175
+ </Tr>
176
+ </THead>
177
+ <TBody>
178
+ <Tr>
179
+ <Td>a1</Td>
180
+ <Td>b1</Td>
181
+ <Td>c1</Td>
182
+ </Tr>
183
+ <Tr>
184
+ <Td>a2</Td>
185
+ <Td>b2</Td>
186
+ <Td>c2</Td>
187
+ </Tr>
188
+ <Tr>
189
+ <Td>a3</Td>
190
+ <Td>b3</Td>
191
+ <Td>c3</Td>
192
+ </Tr>
193
+ </TBody>
194
+ </Table>
195
+ ),
196
+ };
175
197
 
176
- export const WithRowHeaders = () => (
177
- <Table>
178
- <TBody>
179
- <Tr>
180
- <Th>row 1</Th>
181
- <Td>a1</Td>
182
- <Td>b1</Td>
183
- <Td>c1</Td>
184
- </Tr>
185
- <Tr>
186
- <Th>row 2</Th>
187
- <Td>a2</Td>
188
- <Td>b2</Td>
189
- <Td>c2</Td>
190
- </Tr>
191
- <Tr>
192
- <Th>row 3</Th>
193
- <Td>a3</Td>
194
- <Td>b3</Td>
195
- <Td>c3</Td>
196
- </Tr>
197
- </TBody>
198
- </Table>
199
- );
198
+ export const WithRowHeaders: Story = {
199
+ render: () => (
200
+ <Table>
201
+ <TBody>
202
+ <Tr>
203
+ <Th>row 1</Th>
204
+ <Td>a1</Td>
205
+ <Td>b1</Td>
206
+ <Td>c1</Td>
207
+ </Tr>
208
+ <Tr>
209
+ <Th>row 2</Th>
210
+ <Td>a2</Td>
211
+ <Td>b2</Td>
212
+ <Td>c2</Td>
213
+ </Tr>
214
+ <Tr>
215
+ <Th>row 3</Th>
216
+ <Td>a3</Td>
217
+ <Td>b3</Td>
218
+ <Td>c3</Td>
219
+ </Tr>
220
+ </TBody>
221
+ </Table>
222
+ ),
223
+ };
200
224
 
201
- export const WithCustomContentAndAttributes = () => (
202
- <Table>
203
- <THead>
204
- <Tr>
205
- <Th> </Th>
206
- <Th style={{ textAlign: 'right' }}>Col A (right)</Th>
207
- <Th style={{ textAlign: 'center' }}>Col B (center)</Th>
208
- <Th style={{ textDecoration: 'underline' }}>Col C(underline)</Th>
209
- </Tr>
210
- </THead>
211
- <TBody>
212
- <Tr>
213
- <Th>
214
- <strong>row 1</strong>
215
- </Th>
216
- <Td style={{ textAlign: 'right' }}>a1</Td>
217
- <Td style={{ textAlign: 'center', color: 'red' }}>b1</Td>
218
- <Td style={{ textDecoration: 'underline' }}>c1</Td>
219
- </Tr>
220
- <Tr style={{ color: 'blue', fontSize: '1.5em' }}>
221
- <Th>
222
- <strong>row 2</strong>
223
- </Th>
224
- <Td style={{ textAlign: 'right' }}>a2</Td>
225
- <Td style={{ textAlign: 'center' }}>b2</Td>
226
- <Td style={{ textDecoration: 'underline' }}>c2</Td>
227
- </Tr>
228
- <Tr>
229
- <Th>
230
- <strong>row 3</strong>
231
- </Th>
232
- <Td style={{ textAlign: 'right' }}>a3</Td>
233
- <Td style={{ textAlign: 'center' }}>b3</Td>
234
- <Td style={{ textDecoration: 'underline' }}>c3</Td>
235
- </Tr>
236
- </TBody>
237
- </Table>
238
- );
225
+ export const WithCustomContentAndAttributes: Story = {
226
+ render: () => (
227
+ <Table>
228
+ <THead>
229
+ <Tr>
230
+ <Th> </Th>
231
+ <Th style={{ textAlign: 'right' }}>Col A (right)</Th>
232
+ <Th style={{ textAlign: 'center' }}>Col B (center)</Th>
233
+ <Th style={{ textDecoration: 'underline' }}>Col C(underline)</Th>
234
+ </Tr>
235
+ </THead>
236
+ <TBody>
237
+ <Tr>
238
+ <Th>
239
+ <strong>row 1</strong>
240
+ </Th>
241
+ <Td style={{ textAlign: 'right' }}>a1</Td>
242
+ <Td style={{ textAlign: 'center', color: 'red' }}>b1</Td>
243
+ <Td style={{ textDecoration: 'underline' }}>c1</Td>
244
+ </Tr>
245
+ <Tr style={{ color: 'blue', fontSize: '1.5em' }}>
246
+ <Th>
247
+ <strong>row 2</strong>
248
+ </Th>
249
+ <Td style={{ textAlign: 'right' }}>a2</Td>
250
+ <Td style={{ textAlign: 'center' }}>b2</Td>
251
+ <Td style={{ textDecoration: 'underline' }}>c2</Td>
252
+ </Tr>
253
+ <Tr>
254
+ <Th>
255
+ <strong>row 3</strong>
256
+ </Th>
257
+ <Td style={{ textAlign: 'right' }}>a3</Td>
258
+ <Td style={{ textAlign: 'center' }}>b3</Td>
259
+ <Td style={{ textDecoration: 'underline' }}>c3</Td>
260
+ </Tr>
261
+ </TBody>
262
+ </Table>
263
+ ),
264
+ };
package/src/ui/tag/tag.stories.tsx CHANGED
@@ -1,9 +1,8 @@
1
- import React from 'react';
2
- import { Meta, Story } from '@storybook/react';
1
+ import type { Meta, StoryObj } from '@storybook/react';
3
2
 
4
- import { Tag } from '.';
3
+ import { Tag, TagProps } from '.';
5
4
 
6
- export default {
5
+ const meta = {
7
6
  title: 'UI/Tag',
8
7
  component: Tag,
9
8
  argTypes: {
@@ -19,14 +18,16 @@ export default {
19
18
  args: {
20
19
  children: 'tag',
21
20
  },
22
- } as Meta;
21
+ } satisfies Meta<TagProps>;
23
22
 
24
- const Template: Story = (args) => <Tag {...args} />;
23
+ export default meta;
25
24
 
26
- export const Default = Template.bind({});
25
+ type Story = StoryObj<typeof meta>;
27
26
 
28
- export const OneLetter = Template.bind({});
27
+ export const Default: Story = {};
29
28
 
30
- OneLetter.args = {
31
- children: 'd',
29
+ export const OneLetter: Story = {
30
+ args: {
31
+ children: 'd',
32
+ },
32
33
  };
package/src/ui/toolbar/toolbar.stories.tsx ADDED
@@ -0,0 +1,41 @@
1
+ import React from 'react';
2
+ import type { Meta, StoryObj } from '@storybook/react';
3
+
4
+ import { getWrapperDecorator } from '../../stories';
5
+ import { Toolbar } from '.';
6
+
7
+ // Toolbar is a plain .jsx component with defaultProps instead of inline
8
+ // destructuring defaults, so TS can't infer its props as optional on its own.
9
+ const TypedToolbar = Toolbar as unknown as React.ComponentType<{
10
+ className?: string;
11
+ children: React.ReactNode;
12
+ renderActions?: (params: { actionClassName: string }) => React.ReactNode;
13
+ }>;
14
+
15
+ const meta = {
16
+ title: 'UI/Toolbar',
17
+ component: TypedToolbar,
18
+ decorators: [getWrapperDecorator()],
19
+ } satisfies Meta<typeof TypedToolbar>;
20
+
21
+ export default meta;
22
+
23
+ type Story = StoryObj<typeof meta>;
24
+
25
+ export const Default: Story = {
26
+ args: {
27
+ children: <div>Content</div>,
28
+ },
29
+ };
30
+
31
+ export const WithActions: Story = {
32
+ args: {
33
+ children: 'Content',
34
+ renderActions: ({ actionClassName }) => (
35
+ <>
36
+ <div className={actionClassName}>Action 1</div>
37
+ <div className={actionClassName}>Action 2</div>
38
+ </>
39
+ ),
40
+ },
41
+ };
package/types/components/bundle-modules/bundle-modules.d.ts CHANGED
@@ -22,7 +22,7 @@ interface BundleModulesProps extends React.ComponentProps<'div'> {
22
22
  showEntryInfo: (entryId: string) => void;
23
23
  moduleMetric: ModuleSizeMetric;
24
24
  setModuleMetric: (newValue: ModuleSizeMetric) => void;
25
- customComponentLink: React.ElementType;
25
+ customComponentLink?: React.ElementType;
26
26
  }
27
27
  export declare const BundleModules: (props: BundleModulesProps) => React.JSX.Element;
28
28
  export {};
package/types/components/bundle-modules/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import type { Job } from '@bundle-stats/utils';
3
3
  import type { SortAction } from '../../types';
4
4
  import { BundleModules as BaseComponent } from './bundle-modules';
5
- interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo' | 'showEntryInfo'> {
5
+ interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseComponent>, 'jobs' | 'items' | 'chunks' | 'updateFilters' | 'resetFilters' | 'resetAllFilters' | 'filters' | 'sort' | 'updateSort' | 'search' | 'updateSearch' | 'allItems' | 'totalRowCount' | 'hideEntryInfo' | 'showEntryInfo' | 'moduleMetric' | 'setModuleMetric' | 'customComponentLink'> {
6
6
  jobs: Array<Job>;
7
7
  filters: Record<string, boolean>;
8
8
  search?: string;
@@ -10,6 +10,7 @@ interface BundleModulesProps extends Omit<React.ComponentProps<typeof BaseCompon
10
10
  setState: (params: any) => void;
11
11
  sortBy?: string;
12
12
  direction?: SortAction['direction'];
13
+ customComponentLink?: React.ElementType;
13
14
  }
14
15
  export declare const BundleModules: (props: BundleModulesProps) => React.JSX.Element;
15
16
  export {};
package/types/components/index.d.ts CHANGED
@@ -1,20 +1,22 @@
1
- export { BrowsertimeTable } from "./browsertime-table";
2
- export { BundleAssets } from "./bundle-assets";
3
- export { BundleAssetsTotals } from "./bundle-assets-totals";
4
- export { BundlePackages } from "./bundle-packages";
5
- export { BundleModules } from "./bundle-modules";
6
- export { ComponentLink } from "./component-link";
7
- export { Delta } from "./delta";
8
- export { InsightIcon } from "./insight-icon";
9
- export { Insights } from "./insights";
10
- export { JobName } from "./job-name";
11
- export { JobsHeader } from "./jobs-header";
12
- export { LighthouseTable } from "./lighthouse-table";
13
- export { Metric } from "./metric";
14
- export { MetricsTable } from "./metrics-table";
15
- export { MetricsTableOptions } from "./metrics-table-options";
16
- export { MetricsTableTitle } from "./metrics-table-title";
17
- export { ModuleInfo } from "./module-info";
18
- export { Summary } from "./summary";
19
- export { MetricRunInfo, MetricRunInfoProps } from "./metric-run-info";
20
- export { RunInfo, RunInfoProps } from "./run-info";
1
+ export { BrowsertimeTable } from './browsertime-table';
2
+ export { BundleAssets } from './bundle-assets';
3
+ export { BundleAssetsTotals } from './bundle-assets-totals';
4
+ export { BundlePackages } from './bundle-packages';
5
+ export { BundleModules } from './bundle-modules';
6
+ export { ComponentLink } from './component-link';
7
+ export { Delta } from './delta';
8
+ export { InsightIcon } from './insight-icon';
9
+ export { Insights } from './insights';
10
+ export { JobName } from './job-name';
11
+ export { JobsHeader } from './jobs-header';
12
+ export { LighthouseTable } from './lighthouse-table';
13
+ export { Metric } from './metric';
14
+ export { MetricRunInfo } from './metric-run-info';
15
+ export type { MetricRunInfoProps } from './metric-run-info';
16
+ export { MetricsTable } from './metrics-table';
17
+ export { MetricsTableOptions } from './metrics-table-options';
18
+ export { MetricsTableTitle } from './metrics-table-title';
19
+ export { ModuleInfo } from './module-info';
20
+ export { RunInfo } from './run-info';
21
+ export type { RunInfoProps } from './run-info';
22
+ export { Summary } from './summary';
package/types/components/metrics-table/metrics-table.d.ts CHANGED
@@ -4,7 +4,7 @@ import { Table } from '../../ui/table';
4
4
  import { MetricsTableHeaderProps } from '../metrics-table-header';
5
5
  interface MetricsTableProps extends Omit<React.ComponentProps<typeof Table>, 'title'> {
6
6
  runs: Array<{
7
- label: string;
7
+ label: React.ReactNode;
8
8
  internalBuildNumber: number;
9
9
  }>;
10
10
  items: Array<ReportMetricRow>;
package/types/components/metrics-table-header/metrics-table-header.d.ts CHANGED
@@ -4,7 +4,7 @@ export interface MetricsTableHeaderProps {
4
4
  metricTitle?: React.ReactNode;
5
5
  showSum?: boolean;
6
6
  jobs: Array<{
7
- label: string;
7
+ label: React.ReactNode;
8
8
  internalBuildNumber: number;
9
9
  }>;
10
10
  rows: Array<ReportMetricRow>;