@bundle-stats/ui 3.1.4-alpha.0 → 3.2.1-alpha.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.
Files changed (276) hide show
  1. package/.babelrc.js +3 -3
  2. package/CHANGELOG.md +18 -1
  3. package/lib/app/app.js +2 -1
  4. package/lib/app/app.stories.js +2 -1
  5. package/lib/assets/icons/arrow.svg +1 -0
  6. package/lib/assets/icons/cancel.svg +1 -0
  7. package/lib/assets/icons/clock.svg +1 -0
  8. package/lib/assets/icons/close.svg +1 -0
  9. package/lib/assets/icons/commit.svg +1 -0
  10. package/lib/assets/icons/filter.svg +1 -0
  11. package/lib/assets/icons/help.svg +1 -0
  12. package/lib/assets/icons/menu.svg +1 -0
  13. package/lib/{ui/icon/assets → assets/icons}/sort.svg +0 -0
  14. package/lib/assets/icons/warning.svg +1 -0
  15. package/lib/assets/icons.svg +1 -0
  16. package/lib/components/bundle-assets/bundle-assets.constants.js +1 -1
  17. package/lib/components/bundle-assets/bundle-assets.js +3 -3
  18. package/lib/components/bundle-assets/bundle-assets.stories.js +19 -7
  19. package/lib/components/bundle-assets/bundle-assets.utils.js +95 -28
  20. package/lib/components/bundle-assets/index.js +115 -4
  21. package/lib/components/bundle-modules/bundle-modules.constants.js +1 -1
  22. package/lib/components/bundle-modules/bundle-modules.js +3 -3
  23. package/lib/components/bundle-modules/bundle-modules.utils.js +152 -0
  24. package/lib/components/bundle-modules/index.js +135 -4
  25. package/lib/components/bundle-packages/bundle-packages.constants.js +1 -1
  26. package/lib/components/bundle-packages/bundle-packages.js +27 -7
  27. package/lib/components/bundle-packages/bundle-packages.module.css +5 -0
  28. package/lib/components/bundle-packages/{bundle-packages.container.js → bundle-packages.utils.js} +8 -42
  29. package/lib/components/bundle-packages/index.js +111 -3
  30. package/lib/components/duplicate-packages-warning/duplicate-packages-warning.js +7 -4
  31. package/lib/components/duplicate-packages-warning/duplicate-packages-warning.stories.js +4 -3
  32. package/lib/components/index.js +18 -18
  33. package/lib/components/metrics-table/metrics-table.js +3 -7
  34. package/lib/components/metrics-table-search/metrics-table-search.js +2 -1
  35. package/lib/components/metrics-table-search/metrics-table-search.module.css +2 -1
  36. package/lib/constants.js +1 -1
  37. package/lib/hooks/rows-filter.js +28 -0
  38. package/lib/hooks/rows-sort.js +54 -0
  39. package/lib/{hocs/with-search.js → hooks/search-params.js} +15 -64
  40. package/lib/layout/index.js +8 -8
  41. package/lib/ui/icon/icon.js +4 -191
  42. package/lib/ui/logo/logo.constants.js +1 -1
  43. package/lib/ui/popover/popover.js +3 -1
  44. package/lib/ui/popover/popover.module.css +3 -3
  45. package/lib/ui/sort-dropdown/sort-dropdown.js +12 -13
  46. package/lib/ui/sort-dropdown/sort-dropdown.stories.js +2 -2
  47. package/lib/ui/tooltip/tooltip.js +2 -1
  48. package/lib-esm/app/app.js +89 -108
  49. package/lib-esm/app/app.stories.js +50 -70
  50. package/lib-esm/app/header/header.js +19 -20
  51. package/lib-esm/assets/icons/arrow.svg +1 -0
  52. package/lib-esm/assets/icons/cancel.svg +1 -0
  53. package/lib-esm/assets/icons/clock.svg +1 -0
  54. package/lib-esm/assets/icons/close.svg +1 -0
  55. package/lib-esm/assets/icons/commit.svg +1 -0
  56. package/lib-esm/assets/icons/filter.svg +1 -0
  57. package/lib-esm/assets/icons/help.svg +1 -0
  58. package/lib-esm/assets/icons/menu.svg +1 -0
  59. package/lib-esm/{ui/icon/assets → assets/icons}/sort.svg +0 -0
  60. package/lib-esm/assets/icons/warning.svg +1 -0
  61. package/lib-esm/assets/icons.svg +1 -0
  62. package/lib-esm/components/asset-info/asset-info.js +20 -18
  63. package/lib-esm/components/asset-info/asset-info.stories.js +29 -33
  64. package/lib-esm/components/browsertime-table/browsertime-table.js +6 -4
  65. package/lib-esm/components/browsertime-table/browsertime-table.stories.js +9 -13
  66. package/lib-esm/components/bundle-assets/bundle-assets.constants.js +17 -15
  67. package/lib-esm/components/bundle-assets/bundle-assets.js +148 -151
  68. package/lib-esm/components/bundle-assets/bundle-assets.stories.js +58 -63
  69. package/lib-esm/components/bundle-assets/bundle-assets.utils.js +65 -21
  70. package/lib-esm/components/bundle-assets/index.js +89 -2
  71. package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.js +46 -51
  72. package/lib-esm/components/bundle-assets-totals-chart-bars/bundle-assets-totals-chart-bars.stories.js +9 -13
  73. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js +13 -13
  74. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +13 -19
  75. package/lib-esm/components/bundle-modules/bundle-modules.constants.js +17 -15
  76. package/lib-esm/components/bundle-modules/bundle-modules.js +120 -133
  77. package/lib-esm/components/bundle-modules/bundle-modules.stories.js +46 -58
  78. package/lib-esm/components/bundle-modules/bundle-modules.utils.js +95 -0
  79. package/lib-esm/components/bundle-modules/index.js +111 -3
  80. package/lib-esm/components/bundle-packages/bundle-packages.constants.js +17 -15
  81. package/lib-esm/components/bundle-packages/bundle-packages.js +81 -77
  82. package/lib-esm/components/bundle-packages/bundle-packages.module.css +5 -0
  83. package/lib-esm/components/bundle-packages/bundle-packages.stories.js +34 -46
  84. package/lib-esm/components/bundle-packages/bundle-packages.utils.js +44 -0
  85. package/lib-esm/components/bundle-packages/index.js +87 -2
  86. package/lib-esm/components/component-link.js +9 -13
  87. package/lib-esm/components/delta/delta.js +7 -6
  88. package/lib-esm/components/delta/delta.stories.js +26 -38
  89. package/lib-esm/components/duplicate-packages-warning/duplicate-packages-warning.js +15 -10
  90. package/lib-esm/components/duplicate-packages-warning/duplicate-packages-warning.stories.js +20 -25
  91. package/lib-esm/components/job-header/job-header.js +14 -11
  92. package/lib-esm/components/job-header/job-header.stories.js +12 -18
  93. package/lib-esm/components/job-meta/job-meta.js +14 -18
  94. package/lib-esm/components/job-meta/job-meta.stories.js +10 -12
  95. package/lib-esm/components/job-name/job-name.js +11 -17
  96. package/lib-esm/components/job-name/job-name.stories.js +15 -23
  97. package/lib-esm/components/jobs-header/jobs-header.js +12 -12
  98. package/lib-esm/components/jobs-header/jobs-header.stories.js +80 -86
  99. package/lib-esm/components/lighthouse-table/lighthouse-table.js +6 -4
  100. package/lib-esm/components/lighthouse-table/lighthouse-table.stories.js +10 -14
  101. package/lib-esm/components/metric/metric.js +14 -19
  102. package/lib-esm/components/metric/metric.stories.js +36 -58
  103. package/lib-esm/components/metrics-table/metrics-table.js +128 -143
  104. package/lib-esm/components/metrics-table/metrics-table.stories.js +27 -35
  105. package/lib-esm/components/metrics-table-options/metrics-table-options.js +15 -20
  106. package/lib-esm/components/metrics-table-options/metrics-table-options.stories.js +6 -12
  107. package/lib-esm/components/metrics-table-search/metrics-table-search.js +17 -18
  108. package/lib-esm/components/metrics-table-search/metrics-table-search.module.css +2 -1
  109. package/lib-esm/components/metrics-table-search/metrics-table-search.stories.js +4 -9
  110. package/lib-esm/components/metrics-table-title/metrics-table-title.js +9 -7
  111. package/lib-esm/components/module-info/module-info.js +15 -13
  112. package/lib-esm/components/module-info/module-info.stories.js +20 -22
  113. package/lib-esm/components/summary/summary.js +38 -52
  114. package/lib-esm/components/summary/summary.stories.js +28 -46
  115. package/lib-esm/components/summary-item/summary-item.js +25 -29
  116. package/lib-esm/components/summary-item/summary-item.stories.js +40 -50
  117. package/lib-esm/components/total-size-type-title/total-size-type-title.js +14 -15
  118. package/lib-esm/constants.js +25 -30
  119. package/lib-esm/hooks/rows-filter.js +19 -0
  120. package/lib-esm/hooks/rows-sort.js +21 -0
  121. package/lib-esm/hooks/search-params.js +166 -0
  122. package/lib-esm/layout/box/box.js +12 -19
  123. package/lib-esm/layout/box/box.stories.js +34 -46
  124. package/lib-esm/layout/flex-stack/flex-stack.js +9 -12
  125. package/lib-esm/layout/flex-stack/flex-stack.stories.js +39 -49
  126. package/lib-esm/layout/footer/footer.js +34 -37
  127. package/lib-esm/layout/footer/footer.stories.js +7 -11
  128. package/lib-esm/layout/header/header.js +17 -24
  129. package/lib-esm/layout/header/header.stories.js +34 -43
  130. package/lib-esm/layout/stack/stack.js +8 -6
  131. package/lib-esm/layout/stack/stack.stories.js +39 -49
  132. package/lib-esm/layout/sub-header/sub-header.js +14 -12
  133. package/lib-esm/layout/sub-header/sub-header.stories.js +57 -69
  134. package/lib-esm/prototypes/typography.stories.js +48 -58
  135. package/lib-esm/query-state.js +13 -16
  136. package/lib-esm/stories/wrapper.js +14 -26
  137. package/lib-esm/ui/alert/alert.js +6 -4
  138. package/lib-esm/ui/alert/alert.stories.js +14 -24
  139. package/lib-esm/ui/container/container.js +9 -15
  140. package/lib-esm/ui/container/container.stories.js +15 -17
  141. package/lib-esm/ui/dropdown/dropdown.js +13 -11
  142. package/lib-esm/ui/dropdown/dropdown.stories.js +19 -26
  143. package/lib-esm/ui/empty-set/empty-set.js +12 -12
  144. package/lib-esm/ui/empty-set/empty-set.stories.js +11 -19
  145. package/lib-esm/ui/file-name/file-name.js +7 -8
  146. package/lib-esm/ui/file-name/file-name.stories.js +12 -16
  147. package/lib-esm/ui/filters/filters.container.js +52 -77
  148. package/lib-esm/ui/filters/filters.js +61 -89
  149. package/lib-esm/ui/filters/filters.stories.js +81 -100
  150. package/lib-esm/ui/filters/filters.utils.js +24 -28
  151. package/lib-esm/ui/filters/index.js +1 -1
  152. package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.js +67 -78
  153. package/lib-esm/ui/horizontal-bar-chart/horizontal-bar-chart.stories.js +67 -77
  154. package/lib-esm/ui/icon/icon.js +14 -206
  155. package/lib-esm/ui/icon/icon.stories.js +16 -24
  156. package/lib-esm/ui/input/input.js +6 -10
  157. package/lib-esm/ui/input/input.stories.js +8 -12
  158. package/lib-esm/ui/loader/loader.js +7 -13
  159. package/lib-esm/ui/loader/loader.stories.js +5 -9
  160. package/lib-esm/ui/logo/logo.constants.js +6 -6
  161. package/lib-esm/ui/logo/logo.js +14 -15
  162. package/lib-esm/ui/logo/logo.stories.js +14 -28
  163. package/lib-esm/ui/panels/panels.js +14 -27
  164. package/lib-esm/ui/panels/panels.stories.js +14 -16
  165. package/lib-esm/ui/popover/popover.js +13 -10
  166. package/lib-esm/ui/popover/popover.module.css +3 -3
  167. package/lib-esm/ui/popover/popover.stories.js +7 -11
  168. package/lib-esm/ui/skeleton/skeleton.js +6 -9
  169. package/lib-esm/ui/skeleton/skeleton.stories.js +2 -4
  170. package/lib-esm/ui/sort-dropdown/sort-dropdown.js +36 -39
  171. package/lib-esm/ui/sort-dropdown/sort-dropdown.stories.js +14 -16
  172. package/lib-esm/ui/table/table.js +25 -31
  173. package/lib-esm/ui/table/table.stories.js +84 -102
  174. package/lib-esm/ui/tabs/tabs.js +14 -25
  175. package/lib-esm/ui/tabs/tabs.stories.js +4 -6
  176. package/lib-esm/ui/toolbar/toolbar.js +7 -5
  177. package/lib-esm/ui/toolbar/toolbar.stories.js +11 -16
  178. package/lib-esm/ui/tooltip/tooltip.js +15 -17
  179. package/lib-esm/ui/tooltip/tooltip.stories.js +8 -12
  180. package/lib-esm/utils.js +15 -28
  181. package/package.json +19 -27
  182. package/src/app/app.jsx +4 -1
  183. package/src/assets/icons/arrow.svg +1 -0
  184. package/src/assets/icons/cancel.svg +1 -0
  185. package/src/assets/icons/clock.svg +1 -0
  186. package/src/assets/icons/close.svg +1 -0
  187. package/src/assets/icons/commit.svg +1 -0
  188. package/src/assets/icons/filter.svg +1 -0
  189. package/src/assets/icons/help.svg +1 -0
  190. package/src/assets/icons/menu.svg +1 -0
  191. package/src/{ui/icon/assets → assets/icons}/sort.svg +0 -0
  192. package/src/assets/icons/warning.svg +1 -0
  193. package/src/assets/icons.svg +1 -0
  194. package/src/components/bundle-assets/bundle-assets.jsx +3 -3
  195. package/src/components/bundle-assets/bundle-assets.utils.js +96 -17
  196. package/src/components/bundle-assets/index.jsx +89 -0
  197. package/src/components/bundle-modules/bundle-modules.jsx +3 -3
  198. package/src/components/bundle-modules/bundle-modules.utils.js +101 -0
  199. package/src/components/bundle-modules/index.jsx +107 -0
  200. package/src/components/bundle-packages/bundle-packages.jsx +21 -8
  201. package/src/components/bundle-packages/bundle-packages.module.css +5 -0
  202. package/src/components/bundle-packages/bundle-packages.utils.js +47 -0
  203. package/src/components/bundle-packages/index.jsx +84 -0
  204. package/src/components/duplicate-packages-warning/duplicate-packages-warning.jsx +9 -2
  205. package/src/components/metrics-table/metrics-table.jsx +2 -7
  206. package/src/components/metrics-table-search/metrics-table-search.jsx +1 -0
  207. package/src/components/metrics-table-search/metrics-table-search.module.css +2 -1
  208. package/src/hooks/rows-filter.js +16 -0
  209. package/src/hooks/rows-sort.js +24 -0
  210. package/src/hooks/search-params.js +153 -0
  211. package/src/ui/icon/icon.jsx +7 -42
  212. package/src/ui/popover/popover.jsx +1 -1
  213. package/src/ui/popover/popover.module.css +3 -3
  214. package/src/ui/sort-dropdown/sort-dropdown.jsx +11 -11
  215. package/src/ui/tooltip/tooltip.jsx +1 -1
  216. package/lib/components/bundle-assets/bundle-assets.container.js +0 -140
  217. package/lib/components/bundle-modules/bundle-modules.container.js +0 -222
  218. package/lib/hocs/with-custom-sort.js +0 -75
  219. package/lib/hocs/with-filtered-items.js +0 -54
  220. package/lib/ui/icon/assets/arrow.svg +0 -4
  221. package/lib/ui/icon/assets/branch.svg +0 -3
  222. package/lib/ui/icon/assets/cancel.svg +0 -4
  223. package/lib/ui/icon/assets/clock.svg +0 -3
  224. package/lib/ui/icon/assets/close.svg +0 -4
  225. package/lib/ui/icon/assets/commit.svg +0 -3
  226. package/lib/ui/icon/assets/filter.svg +0 -4
  227. package/lib/ui/icon/assets/help.svg +0 -4
  228. package/lib/ui/icon/assets/job.svg +0 -3
  229. package/lib/ui/icon/assets/menu.svg +0 -4
  230. package/lib/ui/icon/assets/package.svg +0 -3
  231. package/lib/ui/icon/assets/pull-request.svg +0 -3
  232. package/lib/ui/icon/assets/repository.svg +0 -3
  233. package/lib/ui/icon/assets/warning.svg +0 -4
  234. package/lib-esm/components/bundle-assets/bundle-assets.container.js +0 -119
  235. package/lib-esm/components/bundle-modules/bundle-modules.container.js +0 -175
  236. package/lib-esm/components/bundle-packages/bundle-packages.container.js +0 -91
  237. package/lib-esm/hocs/with-custom-sort.js +0 -43
  238. package/lib-esm/hocs/with-filtered-items.js +0 -35
  239. package/lib-esm/hocs/with-search.js +0 -214
  240. package/lib-esm/ui/icon/assets/arrow.svg +0 -4
  241. package/lib-esm/ui/icon/assets/branch.svg +0 -3
  242. package/lib-esm/ui/icon/assets/cancel.svg +0 -4
  243. package/lib-esm/ui/icon/assets/clock.svg +0 -3
  244. package/lib-esm/ui/icon/assets/close.svg +0 -4
  245. package/lib-esm/ui/icon/assets/commit.svg +0 -3
  246. package/lib-esm/ui/icon/assets/filter.svg +0 -4
  247. package/lib-esm/ui/icon/assets/help.svg +0 -4
  248. package/lib-esm/ui/icon/assets/job.svg +0 -3
  249. package/lib-esm/ui/icon/assets/menu.svg +0 -4
  250. package/lib-esm/ui/icon/assets/package.svg +0 -3
  251. package/lib-esm/ui/icon/assets/pull-request.svg +0 -3
  252. package/lib-esm/ui/icon/assets/repository.svg +0 -3
  253. package/lib-esm/ui/icon/assets/warning.svg +0 -4
  254. package/src/components/bundle-assets/bundle-assets.container.js +0 -146
  255. package/src/components/bundle-assets/index.js +0 -4
  256. package/src/components/bundle-modules/bundle-modules.container.js +0 -158
  257. package/src/components/bundle-modules/index.js +0 -4
  258. package/src/components/bundle-packages/bundle-packages.container.js +0 -93
  259. package/src/components/bundle-packages/index.js +0 -4
  260. package/src/hocs/with-custom-sort.jsx +0 -35
  261. package/src/hocs/with-filtered-items.jsx +0 -34
  262. package/src/hocs/with-search.jsx +0 -184
  263. package/src/ui/icon/assets/arrow.svg +0 -4
  264. package/src/ui/icon/assets/branch.svg +0 -3
  265. package/src/ui/icon/assets/cancel.svg +0 -4
  266. package/src/ui/icon/assets/clock.svg +0 -3
  267. package/src/ui/icon/assets/close.svg +0 -4
  268. package/src/ui/icon/assets/commit.svg +0 -3
  269. package/src/ui/icon/assets/filter.svg +0 -4
  270. package/src/ui/icon/assets/help.svg +0 -4
  271. package/src/ui/icon/assets/job.svg +0 -3
  272. package/src/ui/icon/assets/menu.svg +0 -4
  273. package/src/ui/icon/assets/package.svg +0 -3
  274. package/src/ui/icon/assets/pull-request.svg +0 -3
  275. package/src/ui/icon/assets/repository.svg +0 -3
  276. package/src/ui/icon/assets/warning.svg +0 -4
@@ -1,4 +0,0 @@
1
- <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
2
- <path fill="none" d="M0 0h24v24H0V0z"/>
3
- <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z"/>
4
- </svg>
@@ -1,3 +0,0 @@
1
- <svg viewBox="0 0 640 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
2
- <path d="M512 192c-70.625 0-128 57.344-128 128 0 47.219 25.875 88.062 64 110.281V448s0 128-128 128c-53.062 0-94.656 11.375-128 28.812V302.281c38.156-22.219 64-63.062 64-110.281 0-70.656-57.344-128-128-128S0 121.344 0 192c0 47.219 25.844 88.062 64 110.281V721.75C25.844 743.938 0 784.75 0 832c0 70.625 57.344 128 128 128s128-57.375 128-128c0-33.5-13.188-63.75-34.25-86.625C240.375 722.5 270.656 704 320 704c254 0 256-256 256-256v-17.719c38.125-22.219 64-63.062 64-110.281 0-70.656-57.375-128-128-128zm-384-64c35.406 0 64 28.594 64 64s-28.594 64-64 64-64-28.594-64-64 28.594-64 64-64zm0 768c-35.406 0-64-28.625-64-64 0-35.312 28.594-64 64-64s64 28.688 64 64c0 35.375-28.594 64-64 64zm384-512c-35.375 0-64-28.594-64-64s28.625-64 64-64 64 28.594 64 64-28.625 64-64 64z"/>
3
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
2
- <path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,3 +0,0 @@
1
- <svg viewBox="0 0 14 16" fill="currentColor">
2
- <path fill-rule="evenodd" d="M8 8h3v2H7c-.55 0-1-.45-1-1V4h2v4zM7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7z"/>
3
- </svg>
@@ -1,4 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
2
- <path d="M0 0h24v24H0z" fill="none"/>
3
- <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
4
- </svg>
@@ -1,3 +0,0 @@
1
- <svg viewBox="0 0 896 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
2
- <path d="M694.875 448C666.375 337.781 567.125 256 448 256c-119.094 0-218.375 81.781-246.906 192H0v128h201.094C229.625 686.25 328.906 768 448 768c119.125 0 218.375-81.75 246.875-192H896V448H694.875zM448 640c-70.656 0-128-57.375-128-128 0-70.656 57.344-128 128-128 70.625 0 128 57.344 128 128 0 70.625-57.375 128-128 128z"/>
3
- </svg>
@@ -1,4 +0,0 @@
1
- <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
2
- <path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/>
3
- <path d="M0 0h24v24H0z" fill="none"/>
4
- </svg>
@@ -1,4 +0,0 @@
1
- <svg viewBox="0 0 24 24" fill="currentColor">
2
- <path d="M0 0h24v24H0z" fill="none"/>
3
- <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/>
4
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor">
2
- <path d="M73.1 54.9c10.1 0 18.3 8.2 18.3 18.3s-8.2 18.3-18.3 18.3-18.3-8.2-18.3-18.3S63 54.9 73.1 54.9zM256 201.1c0 30.3-24.6 54.9-54.9 54.9h-128l54.9-54.9h23.2c6.3 10.9 18.1 18.3 31.7 18.3 20.2 0 36.6-16.4 36.6-36.6s-16.4-36.6-36.6-36.6c-13.5 0-25.4 7.4-31.7 18.3h-41.5L26.3 248C10.5 238.4 0 221 0 201.1V54.9C0 24.6 24.6 0 54.9 0v41.5C44 47.8 36.6 59.6 36.6 73.2c0 20.2 16.4 36.6 36.6 36.6 13.5 0 25.3-7.3 31.6-18.2l46.4-.1c6.3 10.9 18.1 18.3 31.7 18.3 20.2 0 36.6-16.4 36.6-36.6s-16.4-36.6-36.6-36.6c-13.5 0-25.4 7.4-31.7 18.3l-46.3.1c-3.2-5.6-7.9-10.2-13.4-13.5V0h109.7C231.4 0 256 24.6 256 54.9v146.2zm-91.4-18.2c0-10.1 8.2-18.3 18.3-18.3s18.3 8.2 18.3 18.3-8.2 18.3-18.3 18.3-18.3-8.2-18.3-18.3zm0-109.8c0-10.1 8.2-18.3 18.3-18.3s18.3 8.2 18.3 18.3-8.2 18.3-18.3 18.3-18.3-8.2-18.3-18.3z"/>
3
- </svg>
@@ -1,4 +0,0 @@
1
- <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
2
- <path d="M0 0h24v24H0z" fill="none"/>
3
- <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>
4
- </svg>
@@ -1,3 +0,0 @@
1
- <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
2
- <path d="M480 64L0 192v576l480 128 480-128V192L480 64zM63.875 720.934L63.5 288l384.498 102.533.001 432.833L63.875 720.934zM63.5 224l160.254-42.734L640 292.265v.135l-160 42.667L63.5 224zm832.625 496.934L512.001 823.366l.001-432.833L640 356.4v156l128-34.135V322.267L896.5 288l-.375 432.934zM768 258.267v-.125L351.734 147.138 480 112.934 896.5 224 768 258.267z"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg viewBox="0 0 768 1024" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
2
- <path d="M128 64C57.344 64 0 121.344 0 192c0 47.219 25.906 88.062 64 110.281V721.75C25.906 743.938 0 784.75 0 832c0 70.625 57.344 128 128 128s128-57.375 128-128c0-47.25-25.844-88.062-64-110.25V302.281c38.156-22.219 64-63.062 64-110.281 0-70.656-57.344-128-128-128zm0 832c-35.312 0-64-28.625-64-64 0-35.312 28.688-64 64-64 35.406 0 64 28.688 64 64 0 35.375-28.594 64-64 64zm0-640c-35.312 0-64-28.594-64-64s28.688-64 64-64c35.406 0 64 28.594 64 64s-28.594 64-64 64zm576 465.75V320c0-192.5-192-192-192-192h-64V0L256 192l192 192V256h64c56.438 0 64 64 64 64v401.75c-38.125 22.188-64 62.938-64 110.25 0 70.625 57.375 128 128 128s128-57.375 128-128c0-47.25-25.875-88.062-64-110.25zM640 896c-35.312 0-64-28.625-64-64 0-35.312 28.688-64 64-64 35.375 0 64 28.688 64 64 0 35.375-28.625 64-64 64z"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor">
2
- <path d="M112 64H96v16h16V64zm0-32H96v16h16V32zm96-32H48S32 0 32 16v192c0 16 16 16 16 16h32v32l24-24 24 24v-32h80s16-.3 16-16V16c0-16-16-16-16-16zm0 192c0 15.4-16 16-16 16h-64v-16H80v16H64c-16 0-16-16-16-16v-16h160v16zm0-32H80V16h128.2l-.2 144zm-96-32H96v16h16v-16zm0-32H96v16h16V96z"/>
3
- </svg>
@@ -1,4 +0,0 @@
1
- <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
2
- <path d="M0 0h24v24H0z" fill="none"/>
3
- <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
4
- </svg>
@@ -1,146 +0,0 @@
1
- import { useMemo } from 'react';
2
- import { compose, withProps } from 'recompose';
3
- import { get } from 'lodash';
4
- import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
5
- import {
6
- ASSET_ENTRY_TYPE,
7
- ASSET_FILE_TYPE,
8
- ASSET_FILTERS,
9
- getAssetEntryTypeFilters,
10
- getAssetFileTypeFilters,
11
- getFileType,
12
- } from '@bundle-stats/utils';
13
-
14
- import { withCustomSort } from '../../hocs/with-custom-sort';
15
- import { withFilteredItems } from '../../hocs/with-filtered-items';
16
- import { withSearch } from '../../hocs/with-search';
17
- import {
18
- SORT_BY_NAME,
19
- SORT_BY_DELTA,
20
- SORT_BY_SIZE,
21
- SORT_BY,
22
- } from './bundle-assets.constants';
23
-
24
- const addRowAssetFlags = (row) => {
25
- const { runs } = row;
26
-
27
- const isEntry = runs.map((run) => run?.isEntry).includes(true);
28
- const isInitial = runs.map((run) => run?.isInitial).includes(true);
29
- const isChunk = runs.map((run) => run?.isChunk).includes(true);
30
-
31
- const isAsset = !(isEntry || isInitial || isChunk);
32
-
33
- return {
34
- ...row,
35
- isEntry,
36
- isInitial,
37
- isChunk,
38
- isAsset,
39
- };
40
- };
41
-
42
- const getIsNotPredictive = (key, runs) =>
43
- runs.reduce((agg, current, index) => {
44
- if (agg) {
45
- return agg;
46
- }
47
-
48
- if (index + 1 === runs.length) {
49
- return agg;
50
- }
51
-
52
- if (
53
- current &&
54
- runs[index + 1] &&
55
- current.delta !== 0 &&
56
- key !== current.name &&
57
- current.name === runs[index + 1].name
58
- ) {
59
- return true;
60
- }
61
-
62
- return agg;
63
- }, false);
64
-
65
- const addRowIsNotPredictive = (row) => ({
66
- ...row,
67
- isNotPredictive: getIsNotPredictive(row.key, row.runs),
68
- });
69
-
70
- const getRowFilter = (filters) => (item) => {
71
- if (filters[ASSET_FILTERS.CHANGED] && !item.changed) {
72
- return false;
73
- }
74
-
75
- if (
76
- !(
77
- (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ENTRY}`] && item.isEntry) ||
78
- (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.INITIAL}`] && item.isInitial) ||
79
- (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.CHUNK}`] && item.isChunk) ||
80
- (filters[`${ASSET_ENTRY_TYPE}.${ASSET_FILTERS.ASSET}`] && item.isAsset)
81
- )
82
- ) {
83
- return false;
84
- }
85
-
86
- if (!filters[`${ASSET_FILE_TYPE}.${getFileType(item.key)}`]) {
87
- return false;
88
- }
89
-
90
- return true;
91
- };
92
-
93
- const getCustomSort = (sortId) => (item) => {
94
- if (sortId === SORT_BY_NAME) {
95
- return item.key;
96
- }
97
-
98
- if (sortId === SORT_BY_DELTA) {
99
- return get(item, 'runs[0].deltaPercentage', 0);
100
- }
101
-
102
- if (sortId === SORT_BY_SIZE) {
103
- return get(item, 'runs[0].value', 0);
104
- }
105
-
106
- return [
107
- !item.isNotPredictive,
108
- !item.changed,
109
- !item.isInitial,
110
- !item.isEntry,
111
- !item.isChunk,
112
- item.key,
113
- ];
114
- };
115
-
116
- export const enhance = compose(
117
- withProps(({ jobs }) => {
118
- const items = useMemo(
119
- () => webpack.compareBySection.assets(jobs, [addRowAssetFlags, addRowIsNotPredictive]),
120
- [jobs]
121
- );
122
-
123
- const defaultFilters = {
124
- [ASSET_FILTERS.CHANGED]: jobs?.length > 1,
125
- ...getAssetEntryTypeFilters(true),
126
- ...getAssetFileTypeFilters(true),
127
- };
128
-
129
- const allEntriesFilters = {
130
- [ASSET_FILTERS.CHANGED]: false,
131
- ...getAssetEntryTypeFilters(true),
132
- ...getAssetFileTypeFilters(true),
133
- };
134
-
135
- return {
136
- items,
137
- totalRowCount: items.length,
138
- defaultFilters,
139
- allEntriesFilters,
140
- };
141
- }),
142
-
143
- withSearch(),
144
- withFilteredItems(getRowFilter),
145
- withCustomSort({ sortItems: SORT_BY, getCustomSort }),
146
- );
@@ -1,4 +0,0 @@
1
- import { enhance } from './bundle-assets.container';
2
- import { BundleAssets as BundleAssetsComponent } from './bundle-assets';
3
-
4
- export const BundleAssets = enhance(BundleAssetsComponent);
@@ -1,158 +0,0 @@
1
- import { useMemo } from 'react';
2
- import { compose, withProps } from 'recompose';
3
- import { get, map, max, merge, intersection, uniqBy } from 'lodash';
4
- import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
5
- import {
6
- MODULE_CHUNK,
7
- MODULE_FILTERS,
8
- MODULE_FILE_TYPE,
9
- MODULE_SOURCE_TYPE,
10
- getModuleChunkFilters,
11
- getModuleSourceTypeFilters,
12
- getModuleFileTypeFilters,
13
- getModuleSourceFileType,
14
- } from '@bundle-stats/utils';
15
-
16
- import { withCustomSort } from '../../hocs/with-custom-sort';
17
- import { withFilteredItems } from '../../hocs/with-filtered-items';
18
- import { withSearch } from '../../hocs/with-search';
19
- import { SORT_BY_NAME, SORT_BY_SIZE, SORT_BY_DELTA, SORT_BY } from './bundle-modules.constants';
20
-
21
- const addRowSourceFlag = (row) => {
22
- const { key } = row;
23
- const thirdParty = Boolean(key.match(webpack.MODULE_PATH_PACKAGES));
24
- return { ...row, thirdParty };
25
- };
26
-
27
- const getCustomSort = (sortBy) => (item) => {
28
- if (sortBy === SORT_BY_NAME) {
29
- return item.key;
30
- }
31
-
32
- if (sortBy === SORT_BY_SIZE) {
33
- return get(item, 'runs[0].value', 0);
34
- }
35
-
36
- if (sortBy === SORT_BY_DELTA) {
37
- return get(item, 'runs[0].deltaPercentage', 0);
38
- }
39
-
40
- return [!item.changed, item.key];
41
- };
42
-
43
- const getRowFilter = (filters) => (row) => {
44
- // Skip not changed rows
45
- if (filters[MODULE_FILTERS.CHANGED] && !row.changed) {
46
- return false;
47
- }
48
-
49
- // Skip not matching source type
50
- if (
51
- !(
52
- (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.FIRST_PARTY}`] && row.thirdParty === false) ||
53
- (filters[`${MODULE_SOURCE_TYPE}.${MODULE_FILTERS.THIRD_PARTY}`] && row.thirdParty === true)
54
- )
55
- ) {
56
- return false;
57
- }
58
-
59
- // Skip not matching source file types
60
- const fileType = getModuleSourceFileType(row.key);
61
- if (!filters[`${MODULE_FILE_TYPE}.${fileType}`]) {
62
- return false;
63
- }
64
-
65
- return true;
66
- };
67
-
68
- export default compose(
69
- withProps((props) => {
70
- const { jobs } = props;
71
- const chunks = uniqBy(
72
- jobs.map((job) => job?.meta?.webpack?.chunks || []).flat(),
73
- ({ id }) => id,
74
- );
75
- const chunkIds = map(chunks, 'id');
76
-
77
- const defaultFilters = {
78
- changed: jobs?.length > 1,
79
- ...getModuleSourceTypeFilters(true),
80
- ...getModuleChunkFilters(chunkIds, true),
81
- ...getModuleFileTypeFilters(true),
82
- };
83
-
84
- const allEntriesFilters = {
85
- changed: false,
86
- ...getModuleSourceTypeFilters(true),
87
- ...getModuleChunkFilters(chunkIds, true),
88
- ...getModuleFileTypeFilters(true),
89
- };
90
-
91
- return {
92
- defaultFilters,
93
- allEntriesFilters,
94
- chunks,
95
- chunkIds,
96
- };
97
- }),
98
- withSearch(),
99
- withProps((props) => {
100
- const { jobs, chunkIds, filters } = props;
101
-
102
- // List of chunkIds with filter value set to `true`
103
- const includedChunkIds = chunkIds.reduce((agg, chunkId) => {
104
- if (get(filters, `${MODULE_CHUNK}.${chunkId}`)) {
105
- return [...agg, chunkId];
106
- }
107
- return agg;
108
- }, []);
109
-
110
- // If all the filters are included, return jobs as they are
111
- if (includedChunkIds.length === chunkIds.length) {
112
- return { jobs };
113
- }
114
-
115
- const jobsWithFilteredData = jobs.map((job) => {
116
- const { modules } = job?.metrics?.webpack || {};
117
-
118
- const filteredModules = Object.entries(modules).reduce((agg, [moduleId, moduleEntry]) => {
119
- const match = intersection(moduleEntry.chunkIds, includedChunkIds);
120
-
121
- if (match.length > 0) {
122
- agg[moduleId] = moduleEntry; // eslint-disable-line no-param-reassign
123
- }
124
-
125
- return agg;
126
- }, {});
127
-
128
- // Copy job data into a new object to prevent mutations of the original data
129
- const newJob = merge({}, job);
130
- newJob.metrics.webpack.modules = filteredModules;
131
-
132
- return newJob;
133
- });
134
-
135
- return { jobs: jobsWithFilteredData };
136
- }),
137
- withProps(({ jobs }) => {
138
- const { items, totalRowCount } = useMemo(
139
- () => ({
140
- items: webpack.compareBySection.modules(jobs, [addRowSourceFlag]),
141
- /*
142
- * total amount of rows depends on the way the modules are merged before any filtering.
143
- * to avoid running an expensive operation before filtering, we just show the total amount of
144
- * rows to be the max count between different runs
145
- */
146
- totalRowCount: max(jobs.map((job) => Object.values(job?.metrics?.webpack?.modules || {}).length)),
147
- }),
148
- [jobs],
149
- );
150
-
151
- return {
152
- totalRowCount,
153
- items,
154
- };
155
- }),
156
- withFilteredItems(getRowFilter),
157
- withCustomSort({ sortItems: SORT_BY, getCustomSort }),
158
- );
@@ -1,4 +0,0 @@
1
- import enhance from './bundle-modules.container';
2
- import { BundleModules as Component } from './bundle-modules';
3
-
4
- export const BundleModules = enhance(Component);
@@ -1,93 +0,0 @@
1
- import { useMemo } from 'react';
2
- import { compose, withProps } from 'recompose';
3
- import { get, flatten, uniq } from 'lodash';
4
- import { PACKAGE_FILTERS } from '@bundle-stats/utils';
5
- import * as webpack from '@bundle-stats/utils/lib-esm/webpack';
6
-
7
- import { withCustomSort } from '../../hocs/with-custom-sort';
8
- import { withFilteredItems } from '../../hocs/with-filtered-items';
9
- import { withSearch } from '../../hocs/with-search';
10
- import {
11
- SORT_BY_NAME,
12
- SORT_BY_DELTA,
13
- SORT_BY_SIZE,
14
- SORT_BY,
15
- } from './bundle-packages.constants';
16
-
17
- // Get a list of duplicate packages across jobs
18
- const getDuplicatePackages = (jobs) => {
19
- const jobsDuplicatePackages = jobs.map((job) => {
20
- const insightsData = job?.insights?.webpack?.duplicatePackages?.data || {};
21
- return Object.values(insightsData).flat();
22
- });
23
-
24
- return uniq(flatten(jobsDuplicatePackages));
25
- };
26
-
27
- const getRowFilter = (filters) => (item) => {
28
- if (filters[PACKAGE_FILTERS.CHANGED] && !item.changed) {
29
- return false;
30
- }
31
-
32
- if (filters[PACKAGE_FILTERS.DUPLICATE] && !item.duplicate) {
33
- return false;
34
- }
35
-
36
- return true;
37
- };
38
-
39
- const getCustomSort = (sortId) => (item) => {
40
- if (sortId === SORT_BY_NAME) {
41
- return item.key;
42
- }
43
-
44
- if (sortId === SORT_BY_DELTA) {
45
- return get(item, 'runs[0].deltaPercentage', 0);
46
- }
47
-
48
- if (sortId === SORT_BY_SIZE) {
49
- return get(item, 'runs[0].value', 0);
50
- }
51
-
52
- return [!item.changed, item.key];
53
- };
54
-
55
- const getAddRowDuplicateFlag = (duplicateJobs) => (row) => ({
56
- ...row,
57
- duplicate: duplicateJobs.includes(row.key),
58
- });
59
-
60
- export const enhance = compose(
61
- withProps(({ jobs }) => {
62
- const items = useMemo(() => {
63
- const duplicateJobs = getDuplicatePackages(jobs);
64
- return webpack.compareBySection.packages(jobs, [getAddRowDuplicateFlag(duplicateJobs)]);
65
- }, [jobs]);
66
-
67
- const defaultFilters = {
68
- [PACKAGE_FILTERS.CHANGED]: jobs?.length > 1,
69
- [PACKAGE_FILTERS.DUPLICATE]: false,
70
- };
71
- const allEntriesFilters = {
72
- [PACKAGE_FILTERS.CHANGED]: false,
73
- [PACKAGE_FILTERS.DUPLICATE]: false,
74
- };
75
-
76
- return {
77
- totalRowCount: items.length,
78
- items,
79
- defaultFilters,
80
- allEntriesFilters,
81
- };
82
- }),
83
-
84
- withSearch(),
85
- withFilteredItems(getRowFilter),
86
-
87
- withCustomSort({
88
- sortItems: SORT_BY,
89
- getCustomSort,
90
- sortBy: SORT_BY_SIZE,
91
- direction: SORT_BY[SORT_BY_SIZE].defaultDirection,
92
- }),
93
- );
@@ -1,4 +0,0 @@
1
- import { enhance } from './bundle-packages.container';
2
- import { BundlePackages as BundlePackagesComponent } from './bundle-packages';
3
-
4
- export const BundlePackages = enhance(BundlePackagesComponent);
@@ -1,35 +0,0 @@
1
- import React, { useMemo, useState } from 'react';
2
- import PropTypes from 'prop-types';
3
- import { orderBy } from 'lodash';
4
-
5
- export const withCustomSort = ({
6
- sortItems,
7
- getCustomSort,
8
- sortBy = 'size',
9
- direction = 'desc',
10
- }) => (BaseComponent) => {
11
- const WithCustomSort = (props) => {
12
- const { items } = props;
13
- const [sort, updateSort] = useState({ sortBy, direction });
14
- const orderedItems = useMemo(() => orderBy(items, getCustomSort(sort.sortBy), sort.direction), [
15
- items,
16
- sort.sortBy,
17
- sort.direction,
18
- ]);
19
-
20
- const otherProps = {
21
- sort,
22
- updateSort,
23
- sortItems,
24
- items: orderedItems,
25
- };
26
-
27
- return <BaseComponent {...props} {...otherProps} />;
28
- };
29
-
30
- WithCustomSort.propTypes = {
31
- items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
32
- };
33
-
34
- return WithCustomSort;
35
- };
@@ -1,34 +0,0 @@
1
- import React, { useMemo } from 'react';
2
- import PropTypes from 'prop-types';
3
-
4
- export const withFilteredItems = (getFilter) => (BaseComponent) => {
5
- const WithFilteredItems = (props) => {
6
- const { items, filters, searchPattern } = props;
7
-
8
- const filteredItems = useMemo(
9
- () =>
10
- items.filter((item) => {
11
- if (searchPattern && !searchPattern.test(item?.key)) {
12
- return false;
13
- }
14
-
15
- return getFilter(filters)(item);
16
- }),
17
- [items, searchPattern, filters],
18
- );
19
-
20
- const baseProps = {
21
- items: filteredItems,
22
- };
23
-
24
- return <BaseComponent {...props} {...baseProps} />;
25
- };
26
-
27
- WithFilteredItems.propTypes = {
28
- filters: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
29
- items: PropTypes.array.isRequired, // eslint-disable-line react/forbid-prop-types
30
- searchPattern: PropTypes.instanceOf(RegExp).isRequired,
31
- };
32
-
33
- return WithFilteredItems;
34
- };