@bundle-stats/ui 3.3.0-alpha.0 → 3.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.
Files changed (237) hide show
  1. package/CHANGELOG.md +74 -11
  2. package/lib/app/app.js +124 -104
  3. package/lib/app/app.module.css +11 -4
  4. package/lib/app/app.stories.js +1 -22
  5. package/lib/app/header/header.js +1 -10
  6. package/lib/assets/icons.svg +0 -8
  7. package/lib/components/asset-info/asset-info.module.css +1 -0
  8. package/lib/components/bundle-assets/bundle-assets.js +104 -52
  9. package/lib/components/bundle-assets/bundle-assets.module.css +24 -26
  10. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.js +16 -43
  11. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +2 -2
  12. package/lib/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +1 -20
  13. package/lib/components/bundle-modules/bundle-modules.js +68 -68
  14. package/lib/components/bundle-modules/bundle-modules.module.css +11 -2
  15. package/lib/components/bundle-modules/bundle-modules.utils.js +14 -10
  16. package/lib/components/bundle-modules/index.js +4 -4
  17. package/lib/components/bundle-packages/bundle-packages.js +100 -44
  18. package/lib/components/bundle-packages/bundle-packages.module.css +17 -21
  19. package/lib/components/delta/delta.module.css +1 -0
  20. package/lib/components/job-header/job-header.js +3 -1
  21. package/lib/components/job-header/job-header.module.css +6 -8
  22. package/lib/components/jobs-header/jobs-header.module.css +5 -0
  23. package/lib/components/metrics-table/metrics-table.js +72 -59
  24. package/lib/components/metrics-table/metrics-table.module.css +18 -7
  25. package/lib/components/metrics-table-search/metrics-table-search.module.css +5 -4
  26. package/lib/components/metrics-table-title/metrics-table-title.js +9 -7
  27. package/lib/components/metrics-table-title/metrics-table-title.module.css +2 -0
  28. package/lib/components/module-info/module-info.js +2 -2
  29. package/lib/components/module-info/module-info.module.css +1 -0
  30. package/lib/components/summary/summary.js +7 -12
  31. package/lib/components/summary/summary.module.css +1 -1
  32. package/lib/components/summary/summary.stories.js +0 -29
  33. package/lib/components/summary-item/summary-item.js +18 -38
  34. package/lib/components/summary-item/summary-item.module.css +1 -34
  35. package/lib/components/summary-item/summary-item.stories.js +53 -51
  36. package/lib/components/total-size-type-title/total-size-type-title.js +7 -3
  37. package/lib/constants.js +4 -4
  38. package/lib/css/default.css +14 -3
  39. package/lib/css/variables.css +17 -17
  40. package/lib/hooks/search-params.js +31 -31
  41. package/lib/layout/box/box.module.css +9 -0
  42. package/lib/layout/footer/footer.module.css +1 -1
  43. package/lib/layout/index.js +8 -0
  44. package/lib/layout/separator.js +48 -0
  45. package/lib/layout/separator.module.css +5 -0
  46. package/lib/ui/alert/alert.js +3 -13
  47. package/lib/ui/dropdown/dropdown.js +21 -26
  48. package/lib/ui/dropdown/dropdown.module.css +11 -12
  49. package/lib/ui/dropdown/dropdown.stories.js +2 -9
  50. package/lib/ui/empty-set/empty-set.js +5 -4
  51. package/lib/ui/empty-set/empty-set.module.css +2 -2
  52. package/lib/ui/filters/filters.container.js +1 -1
  53. package/lib/ui/filters/filters.js +22 -7
  54. package/lib/ui/filters/filters.module.css +3 -3
  55. package/lib/ui/horizontal-bar-chart/horizontal-bar-chart.js +1 -1
  56. package/lib/ui/hover-card/hover-card.js +102 -0
  57. package/lib/ui/hover-card/hover-card.module.css +29 -0
  58. package/lib/ui/hover-card/hover-card.stories.js +56 -0
  59. package/lib/{components/budget-info → ui/hover-card}/index.js +4 -4
  60. package/lib/ui/icon/icon.js +6 -8
  61. package/lib/ui/icon/icon.module.css +1 -0
  62. package/lib/ui/index.js +8 -8
  63. package/lib/ui/table/table.js +5 -74
  64. package/lib/ui/table/table.module.css +41 -25
  65. package/lib/ui/table/table.stories.js +1 -1
  66. package/lib/ui/{popover → tag}/index.js +4 -4
  67. package/lib/ui/tag/tag.js +72 -0
  68. package/lib/ui/tag/tag.module.css +55 -0
  69. package/lib/ui/tag/tag.stories.js +38 -0
  70. package/lib/ui/tooltip/tooltip.js +10 -9
  71. package/lib/ui/tooltip/tooltip.module.css +2 -1
  72. package/lib-esm/app/app.js +119 -103
  73. package/lib-esm/app/app.module.css +11 -4
  74. package/lib-esm/app/app.stories.js +1 -22
  75. package/lib-esm/app/header/header.js +1 -9
  76. package/lib-esm/assets/icons.svg +0 -8
  77. package/lib-esm/components/asset-info/asset-info.module.css +1 -0
  78. package/lib-esm/components/bundle-assets/bundle-assets.js +97 -56
  79. package/lib-esm/components/bundle-assets/bundle-assets.module.css +24 -26
  80. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.js +13 -27
  81. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +2 -2
  82. package/lib-esm/components/bundle-assets-totals-table/bundle-assets-totals-table.stories.js +0 -18
  83. package/lib-esm/components/bundle-modules/bundle-modules.js +50 -51
  84. package/lib-esm/components/bundle-modules/bundle-modules.module.css +11 -2
  85. package/lib-esm/components/bundle-modules/bundle-modules.utils.js +14 -6
  86. package/lib-esm/components/bundle-modules/index.js +5 -3
  87. package/lib-esm/components/bundle-packages/bundle-packages.js +88 -41
  88. package/lib-esm/components/bundle-packages/bundle-packages.module.css +17 -21
  89. package/lib-esm/components/delta/delta.module.css +1 -0
  90. package/lib-esm/components/job-header/job-header.js +2 -1
  91. package/lib-esm/components/job-header/job-header.module.css +6 -8
  92. package/lib-esm/components/jobs-header/jobs-header.module.css +5 -0
  93. package/lib-esm/components/metrics-table/metrics-table.js +61 -53
  94. package/lib-esm/components/metrics-table/metrics-table.module.css +18 -7
  95. package/lib-esm/components/metrics-table-search/metrics-table-search.module.css +5 -4
  96. package/lib-esm/components/metrics-table-title/metrics-table-title.js +8 -7
  97. package/lib-esm/components/metrics-table-title/metrics-table-title.module.css +2 -0
  98. package/lib-esm/components/module-info/module-info.js +2 -2
  99. package/lib-esm/components/module-info/module-info.module.css +1 -0
  100. package/lib-esm/components/summary/summary.js +7 -11
  101. package/lib-esm/components/summary/summary.module.css +1 -1
  102. package/lib-esm/components/summary/summary.stories.js +0 -27
  103. package/lib-esm/components/summary-item/summary-item.js +16 -36
  104. package/lib-esm/components/summary-item/summary-item.module.css +1 -34
  105. package/lib-esm/components/summary-item/summary-item.stories.js +38 -50
  106. package/lib-esm/components/total-size-type-title/total-size-type-title.js +6 -3
  107. package/lib-esm/constants.js +4 -4
  108. package/lib-esm/css/default.css +14 -3
  109. package/lib-esm/css/variables.css +17 -17
  110. package/lib-esm/hooks/search-params.js +27 -28
  111. package/lib-esm/layout/box/box.module.css +9 -0
  112. package/lib-esm/layout/footer/footer.module.css +1 -1
  113. package/lib-esm/layout/index.js +1 -0
  114. package/lib-esm/layout/separator.js +28 -0
  115. package/lib-esm/layout/separator.module.css +5 -0
  116. package/lib-esm/ui/alert/alert.js +3 -6
  117. package/lib-esm/ui/dropdown/dropdown.js +20 -25
  118. package/lib-esm/ui/dropdown/dropdown.module.css +11 -12
  119. package/lib-esm/ui/dropdown/dropdown.stories.js +2 -7
  120. package/lib-esm/ui/empty-set/empty-set.js +4 -4
  121. package/lib-esm/ui/empty-set/empty-set.module.css +2 -2
  122. package/lib-esm/ui/filters/filters.js +20 -5
  123. package/lib-esm/ui/filters/filters.module.css +3 -3
  124. package/lib-esm/ui/hover-card/hover-card.js +83 -0
  125. package/lib-esm/ui/hover-card/hover-card.module.css +29 -0
  126. package/lib-esm/ui/hover-card/hover-card.stories.js +35 -0
  127. package/lib-esm/ui/hover-card/index.js +1 -0
  128. package/lib-esm/ui/icon/icon.js +3 -5
  129. package/lib-esm/ui/icon/icon.module.css +1 -0
  130. package/lib-esm/ui/index.js +1 -1
  131. package/lib-esm/ui/table/table.js +5 -65
  132. package/lib-esm/ui/table/table.module.css +41 -25
  133. package/lib-esm/ui/table/table.stories.js +1 -1
  134. package/lib-esm/ui/tag/index.js +1 -0
  135. package/lib-esm/ui/tag/tag.js +45 -0
  136. package/lib-esm/ui/tag/tag.module.css +55 -0
  137. package/lib-esm/ui/tag/tag.stories.js +23 -0
  138. package/lib-esm/ui/tooltip/tooltip.js +10 -9
  139. package/lib-esm/ui/tooltip/tooltip.module.css +2 -1
  140. package/package.json +33 -31
  141. package/src/app/app.jsx +135 -145
  142. package/src/app/app.module.css +11 -4
  143. package/src/app/header/header.jsx +0 -10
  144. package/src/assets/icons.svg +0 -8
  145. package/src/components/asset-info/asset-info.module.css +1 -0
  146. package/src/components/bundle-assets/bundle-assets.jsx +85 -31
  147. package/src/components/bundle-assets/bundle-assets.module.css +24 -26
  148. package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.jsx +13 -26
  149. package/src/components/bundle-assets-totals-table/bundle-assets-totals-table.module.css +2 -2
  150. package/src/components/bundle-modules/bundle-modules.jsx +53 -36
  151. package/src/components/bundle-modules/bundle-modules.module.css +11 -2
  152. package/src/components/bundle-modules/bundle-modules.utils.js +16 -4
  153. package/src/components/bundle-modules/index.jsx +3 -0
  154. package/src/components/bundle-packages/bundle-packages.jsx +89 -39
  155. package/src/components/bundle-packages/bundle-packages.module.css +17 -21
  156. package/src/components/delta/delta.module.css +1 -0
  157. package/src/components/job-header/job-header.jsx +2 -1
  158. package/src/components/job-header/job-header.module.css +6 -8
  159. package/src/components/jobs-header/jobs-header.module.css +5 -0
  160. package/src/components/metrics-table/metrics-table.jsx +53 -44
  161. package/src/components/metrics-table/metrics-table.module.css +18 -7
  162. package/src/components/metrics-table-search/metrics-table-search.module.css +5 -4
  163. package/src/components/metrics-table-title/metrics-table-title.jsx +20 -21
  164. package/src/components/metrics-table-title/metrics-table-title.module.css +2 -0
  165. package/src/components/module-info/module-info.jsx +3 -7
  166. package/src/components/module-info/module-info.module.css +1 -0
  167. package/src/components/summary/summary.jsx +7 -8
  168. package/src/components/summary/summary.module.css +1 -1
  169. package/src/components/summary-item/summary-item.jsx +23 -40
  170. package/src/components/summary-item/summary-item.module.css +1 -34
  171. package/src/components/total-size-type-title/total-size-type-title.jsx +6 -9
  172. package/src/constants.js +11 -7
  173. package/src/css/default.css +14 -3
  174. package/src/css/variables.css +17 -17
  175. package/src/hooks/search-params.js +42 -33
  176. package/src/layout/box/box.module.css +9 -0
  177. package/src/layout/footer/footer.module.css +1 -1
  178. package/src/layout/index.js +1 -0
  179. package/src/layout/separator.jsx +25 -0
  180. package/src/layout/separator.module.css +5 -0
  181. package/src/ui/alert/alert.jsx +2 -7
  182. package/src/ui/dropdown/dropdown.jsx +16 -22
  183. package/src/ui/dropdown/dropdown.module.css +11 -12
  184. package/src/ui/empty-set/empty-set.jsx +25 -21
  185. package/src/ui/empty-set/empty-set.module.css +2 -2
  186. package/src/ui/filters/filters.jsx +64 -53
  187. package/src/ui/filters/filters.module.css +3 -3
  188. package/src/ui/hover-card/hover-card.jsx +73 -0
  189. package/src/ui/hover-card/hover-card.module.css +29 -0
  190. package/src/ui/hover-card/index.js +1 -0
  191. package/src/ui/icon/icon.jsx +11 -9
  192. package/src/ui/icon/icon.module.css +1 -0
  193. package/src/ui/index.js +1 -1
  194. package/src/ui/table/table.jsx +5 -52
  195. package/src/ui/table/table.module.css +41 -25
  196. package/src/ui/tag/index.js +1 -0
  197. package/src/ui/tag/tag.jsx +49 -0
  198. package/src/ui/tag/tag.module.css +55 -0
  199. package/src/ui/tooltip/tooltip.jsx +10 -14
  200. package/src/ui/tooltip/tooltip.module.css +2 -1
  201. package/lib/assets/icons/alert-circle.svg +0 -1
  202. package/lib/assets/icons/check-circle.svg +0 -1
  203. package/lib/components/budget-info/budget-info.js +0 -53
  204. package/lib/components/budget-info/budget-info.module.css +0 -28
  205. package/lib/components/budget-info/budget-info.stories.js +0 -42
  206. package/lib/components/budget-insights/budget-insights.js +0 -200
  207. package/lib/components/budget-insights/budget-insights.module.css +0 -53
  208. package/lib/components/budget-insights/budget-insights.stories.js +0 -104
  209. package/lib/components/budget-insights/index.js +0 -18
  210. package/lib/ui/popover/popover.js +0 -92
  211. package/lib/ui/popover/popover.module.css +0 -66
  212. package/lib/ui/popover/popover.stories.js +0 -26
  213. package/lib-esm/assets/icons/alert-circle.svg +0 -1
  214. package/lib-esm/assets/icons/check-circle.svg +0 -1
  215. package/lib-esm/components/budget-info/budget-info.js +0 -37
  216. package/lib-esm/components/budget-info/budget-info.module.css +0 -28
  217. package/lib-esm/components/budget-info/budget-info.stories.js +0 -26
  218. package/lib-esm/components/budget-info/index.js +0 -1
  219. package/lib-esm/components/budget-insights/budget-insights.js +0 -147
  220. package/lib-esm/components/budget-insights/budget-insights.module.css +0 -53
  221. package/lib-esm/components/budget-insights/budget-insights.stories.js +0 -84
  222. package/lib-esm/components/budget-insights/index.js +0 -1
  223. package/lib-esm/ui/popover/index.js +0 -1
  224. package/lib-esm/ui/popover/popover.js +0 -71
  225. package/lib-esm/ui/popover/popover.module.css +0 -66
  226. package/lib-esm/ui/popover/popover.stories.js +0 -14
  227. package/src/assets/icons/alert-circle.svg +0 -1
  228. package/src/assets/icons/check-circle.svg +0 -1
  229. package/src/components/budget-info/budget-info.jsx +0 -49
  230. package/src/components/budget-info/budget-info.module.css +0 -28
  231. package/src/components/budget-info/index.js +0 -1
  232. package/src/components/budget-insights/budget-insights.jsx +0 -152
  233. package/src/components/budget-insights/budget-insights.module.css +0 -53
  234. package/src/components/budget-insights/index.js +0 -1
  235. package/src/ui/popover/index.js +0 -1
  236. package/src/ui/popover/popover.jsx +0 -79
  237. package/src/ui/popover/popover.module.css +0 -66
package/CHANGELOG.md CHANGED
@@ -3,28 +3,91 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- # [3.3.0-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.2...v3.3.0-alpha.0) (2021-12-17)
6
+ ## [3.2.8](https://github.com/relative-ci/bundle-stats/compare/v3.2.7...v3.2.8) (2022-03-10)
7
+
8
+ **Note:** Version bump only for package @bundle-stats/ui
9
+
10
+
11
+
12
+
13
+
14
+ ## [3.2.7](https://github.com/relative-ci/bundle-stats/compare/v3.2.6...v3.2.7) (2022-03-10)
15
+
16
+
17
+ ### Bug Fixes
18
+
19
+ * **ui:** App - consistent vertical spacing ([4f29d3d](https://github.com/relative-ci/bundle-stats/commit/4f29d3d47edc7f89858f0948d0cdc1e22ce5b157))
20
+ * **ui:** HoverCard - prevent default on close ([9fae6a4](https://github.com/relative-ci/bundle-stats/commit/9fae6a4825d1a016e3b626168f73ca0a90213d10))
21
+ * **ui:** MetricsTable - consistent toolbar spacing ([fcaf38d](https://github.com/relative-ci/bundle-stats/commit/fcaf38df698329bc00bc267e72289fec8064cc61))
22
+
23
+
24
+
25
+
26
+
27
+ ## [3.2.6](https://github.com/relative-ci/bundle-stats/compare/v3.2.5...v3.2.6) (2022-03-04)
7
28
 
8
29
 
9
30
  ### Bug Fixes
10
31
 
11
- * **ui:** Alert - allow to override props ([4d52999](https://github.com/relative-ci/bundle-stats/commit/4d52999e80427f95bac30d0123cc149566b54282))
32
+ * **ui:** Add border-radius to flags ([4f7663b](https://github.com/relative-ci/bundle-stats/commit/4f7663b29a954cf1ace9caa9739acd9f37aa3b95))
33
+ * **ui:** Box - add border-radius to outline ([bd78d20](https://github.com/relative-ci/bundle-stats/commit/bd78d2052db4b781afc3a1d9e8dd583986d0093d))
34
+ * **ui:** Filters - fix border radius ([de014b5](https://github.com/relative-ci/bundle-stats/commit/de014b5d81b1e46a726789e93fa049e8577c2d4b))
35
+ * **ui:** Footer - update border ([7c76df8](https://github.com/relative-ci/bundle-stats/commit/7c76df85090649189b4b52e1dace53c96466402d))
36
+ * **ui:** HoverCard - align close icon ([bd179a8](https://github.com/relative-ci/bundle-stats/commit/bd179a8b74fd7627cc056f52ddeced95211a6ae4))
37
+ * **ui:** Normlize border-radius usage ([e8a6b30](https://github.com/relative-ci/bundle-stats/commit/e8a6b302729112d75a82c74ef1d952fc639d16ab))
38
+ * **ui:** SearchParams - trigger filter change correctly ([0c331d2](https://github.com/relative-ci/bundle-stats/commit/0c331d2704382cd72d42363db539107fe22ed2ee))
39
+ * **ui:** SummaryItem - update vertical spacing ([b4c57dc](https://github.com/relative-ci/bundle-stats/commit/b4c57dc6692d496fc45b3f66515fa4357307ff12))
40
+ * **ui:** Table - correct outline variation ([82804d1](https://github.com/relative-ci/bundle-stats/commit/82804d13a2016332042dd38a21a4a4b0dbb0c928))
41
+ * **ui:** Table - remove last row bottom line ([9398a93](https://github.com/relative-ci/bundle-stats/commit/9398a936e1d937aed188f96ce56ebfa56f3af7d7))
12
42
 
13
43
 
14
44
  ### Features
15
45
 
16
- * App - add BudgetInsights ([4068e33](https://github.com/relative-ci/bundle-stats/commit/4068e334465f6eb624b92790da11306d711718f6))
17
- * **ui:** App - pass budgets info to Summary ([102a4c1](https://github.com/relative-ci/bundle-stats/commit/102a4c1b4a8ab445c1a39ba8d19fba88b0c259d5))
18
- * **ui:** BudgetInsights component ([4458395](https://github.com/relative-ci/bundle-stats/commit/44583958a83458285b896c5564b03df0960fb992))
19
- * **ui:** BundleAssetsTotalsTable - add budgets ([b2fa86e](https://github.com/relative-ci/bundle-stats/commit/b2fa86eb1ec2ad1e4ea183a4f4dee2eefa4cfddc))
20
- * **ui:** Icon - add check-circle icon ([1bc3707](https://github.com/relative-ci/bundle-stats/commit/1bc3707a868ca216da5b9e500ba0536d0163b168))
21
- * **ui:** Icon - alert-circle icon ([9ae82bc](https://github.com/relative-ci/bundle-stats/commit/9ae82bcac0ff55511eafb158322b571e09a4de60))
22
- * **ui:** SummaryItem - budgets ([591bb41](https://github.com/relative-ci/bundle-stats/commit/591bb414f7aa93c2e1f4208f1dfedffa037e5225))
46
+ * **ui:** Add HoverCard component ([6ee79d5](https://github.com/relative-ci/bundle-stats/commit/6ee79d52bf5d02445e3cfca9f41841e5c710355f))
47
+ * **ui:** Add Tag component ([f796f9c](https://github.com/relative-ci/bundle-stats/commit/f796f9c909703dab3a513059215a2ce24bc12244))
23
48
 
24
49
 
25
- ### Performance Improvements
26
50
 
27
- * **ui:** BundleAssetsTotalsTable - use memo / callback ([22ec007](https://github.com/relative-ci/bundle-stats/commit/22ec00772b1b27d19d89a106fbcf93ac49b3d57e))
51
+
52
+
53
+ ## [3.2.5](https://github.com/relative-ci/bundle-stats/compare/v3.2.4...v3.2.5) (2022-02-15)
54
+
55
+
56
+ ### Bug Fixes
57
+
58
+ * **ui:** Move separator to layout ([abc34e7](https://github.com/relative-ci/bundle-stats/commit/abc34e73a0ffb5ae2f4d52538d4f854e1c5857dc))
59
+ * **ui:** Variables - increase outline contrast ([beacc32](https://github.com/relative-ci/bundle-stats/commit/beacc32cf98a49aa150d1820d68f140aebafbc6e))
60
+
61
+
62
+ ### Features
63
+
64
+ * **ui:** Separator component ([1b9e56f](https://github.com/relative-ci/bundle-stats/commit/1b9e56f170834a0a111f8d19fab220d6e7f69095))
65
+
66
+
67
+
68
+
69
+
70
+ ## [3.2.4](https://github.com/relative-ci/bundle-stats/compare/v3.2.3...v3.2.4) (2022-01-17)
71
+
72
+
73
+ ### Bug Fixes
74
+
75
+ * **ui:** Icon - center by default ([8acaf63](https://github.com/relative-ci/bundle-stats/commit/8acaf63273249cafe4a89e701a3afb4555037411))
76
+ * **ui:** Icon - center by default ([889753c](https://github.com/relative-ci/bundle-stats/commit/889753c0feb236130a2707fbc352310ef07c7740))
77
+ * **ui:** Remove popover component ([e07d7a9](https://github.com/relative-ci/bundle-stats/commit/e07d7a91640f67b4f99320e1af92f1092a6e610d))
78
+
79
+
80
+ ### Features
81
+
82
+ * **ui:** Add hover card ([e27169e](https://github.com/relative-ci/bundle-stats/commit/e27169e4dd1e313f6903bd70f5ffc1e1cc147f9a))
83
+
84
+
85
+
86
+
87
+
88
+ ## [3.2.3](https://github.com/relative-ci/bundle-stats/compare/v3.2.2...v3.2.3) (2022-01-10)
89
+
90
+ **Note:** Version bump only for package @bundle-stats/ui
28
91
 
29
92
 
30
93
 
package/lib/app/app.js CHANGED
@@ -23,8 +23,6 @@ var _container = require("../ui/container");
23
23
 
24
24
  var _duplicatePackagesWarning = require("../components/duplicate-packages-warning");
25
25
 
26
- var _budgetInsights = require("../components/budget-insights");
27
-
28
26
  var _summary = require("../components/summary");
29
27
 
30
28
  var _bundleAssets = require("../components/bundle-assets");
@@ -53,7 +51,8 @@ var _header = require("./header");
53
51
 
54
52
  var _appModule = _interopRequireDefault(require("./app.module.css"));
55
53
 
56
- var _excluded = ["jobs", "version"];
54
+ var _excluded = ["jobs", "version"],
55
+ _excluded2 = ["jobs"];
57
56
 
58
57
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
59
58
 
@@ -115,28 +114,130 @@ Layout.defaultProps = {
115
114
  version: null
116
115
  };
117
116
 
118
- var AppComponent = function AppComponent(_ref2) {
119
- var _insights$webpack;
117
+ var JobsContext = /*#__PURE__*/_react["default"].createContext({
118
+ jobs: []
119
+ });
120
+
121
+ var JobsProvider = function JobsProvider(_ref2) {
122
+ var jobs = _ref2.jobs,
123
+ restProps = _objectWithoutProperties(_ref2, _excluded2);
124
+
125
+ var value = (0, _react.useMemo)(function () {
126
+ return {
127
+ jobs: jobs
128
+ };
129
+ }, [jobs]);
130
+ return /*#__PURE__*/_react["default"].createElement(JobsContext.Provider, _extends({
131
+ value: value
132
+ }, restProps));
133
+ };
134
+
135
+ JobsProvider.propTypes = {
136
+ jobs: _propTypes["default"].arrayOf(_propTypes["default"].object).isRequired
137
+ };
138
+
139
+ var OverviewContent = function OverviewContent() {
140
+ var _useContext = (0, _react.useContext)(JobsContext),
141
+ jobs = _useContext.jobs;
142
+
143
+ var duplicatePackagesCount = jobs[0].summary.webpack.duplicatePackagesCount;
144
+ var duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
145
+ return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
146
+ space: "medium"
147
+ }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
148
+ duplicatePackagesCount: duplicatePackagesCount,
149
+ showDelta: jobs.length > 1
150
+ })), /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
151
+ space: "small"
152
+ }, /*#__PURE__*/_react["default"].createElement(_totalSizeTypeTitle.TotalSizeTypeTitle, null), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsChartBars.BundleAssetsTotalsChartBars, {
153
+ jobs: jobs
154
+ }), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsTable.BundleAssetsTotalsTable, {
155
+ jobs: jobs,
156
+ outline: true
157
+ }))));
158
+ };
120
159
 
121
- var version = _ref2.version,
122
- jobs = _ref2.jobs;
160
+ var AssetsContent = function AssetsContent() {
161
+ var _jobs$;
123
162
 
124
163
  var _useComponentQuerySta = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_ASSETS),
125
164
  _useComponentQuerySta2 = _slicedToArray(_useComponentQuerySta, 2),
126
165
  bundleStatsState = _useComponentQuerySta2[0],
127
166
  bundleStatsSetState = _useComponentQuerySta2[1];
128
167
 
129
- var _useComponentQuerySta3 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_PACKAGES),
168
+ var _useContext2 = (0, _react.useContext)(JobsContext),
169
+ jobs = _useContext2.jobs;
170
+
171
+ return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
172
+ space: "medium"
173
+ }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
174
+ keys: _constants.METRICS_WEBPACK_ASSETS,
175
+ data: jobs === null || jobs === void 0 ? void 0 : (_jobs$ = jobs[0]) === null || _jobs$ === void 0 ? void 0 : _jobs$.summary,
176
+ showSummaryItemDelta: (jobs === null || jobs === void 0 ? void 0 : jobs.length) !== 1
177
+ }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
178
+ outline: true
179
+ }, /*#__PURE__*/_react["default"].createElement(_bundleAssets.BundleAssets, _extends({
180
+ jobs: jobs,
181
+ setState: bundleStatsSetState
182
+ }, bundleStatsState)))));
183
+ };
184
+
185
+ var ModulesContent = function ModulesContent() {
186
+ var _jobs$2;
187
+
188
+ var _useComponentQuerySta3 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_MODULES),
130
189
  _useComponentQuerySta4 = _slicedToArray(_useComponentQuerySta3, 2),
131
- bundlePackagesState = _useComponentQuerySta4[0],
132
- bundlePackagesSetState = _useComponentQuerySta4[1];
190
+ bundleModulesState = _useComponentQuerySta4[0],
191
+ bundleModulesSetState = _useComponentQuerySta4[1];
192
+
193
+ var _useContext3 = (0, _react.useContext)(JobsContext),
194
+ jobs = _useContext3.jobs;
133
195
 
134
- var _useComponentQuerySta5 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_MODULES),
196
+ return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
197
+ space: "medium"
198
+ }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
199
+ keys: _constants.METRICS_WEBPACK_MODULES,
200
+ data: jobs === null || jobs === void 0 ? void 0 : (_jobs$2 = jobs[0]) === null || _jobs$2 === void 0 ? void 0 : _jobs$2.summary,
201
+ showSummaryItemDelta: (jobs === null || jobs === void 0 ? void 0 : jobs.length) !== 1
202
+ }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
203
+ outline: true
204
+ }, /*#__PURE__*/_react["default"].createElement(_bundleModules.BundleModules, _extends({
205
+ jobs: jobs,
206
+ setState: bundleModulesSetState
207
+ }, bundleModulesState)))));
208
+ };
209
+
210
+ var PackagesContent = function PackagesContent() {
211
+ var _jobs$3;
212
+
213
+ var _useComponentQuerySta5 = (0, _queryState.useComponentQueryState)(_utils.COMPONENT.BUNDLE_PACKAGES),
135
214
  _useComponentQuerySta6 = _slicedToArray(_useComponentQuerySta5, 2),
136
- bundleModulesState = _useComponentQuerySta6[0],
137
- bundleModulesSetState = _useComponentQuerySta6[1];
215
+ bundlePackagesState = _useComponentQuerySta6[0],
216
+ bundlePackagesSetState = _useComponentQuerySta6[1];
138
217
 
139
- if (jobs.length === 0) {
218
+ var _useContext4 = (0, _react.useContext)(JobsContext),
219
+ jobs = _useContext4.jobs;
220
+
221
+ return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
222
+ space: "medium"
223
+ }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
224
+ keys: _constants.METRICS_WEBPACK_PACKAGES,
225
+ data: jobs === null || jobs === void 0 ? void 0 : (_jobs$3 = jobs[0]) === null || _jobs$3 === void 0 ? void 0 : _jobs$3.summary,
226
+ showSummaryItemDelta: (jobs === null || jobs === void 0 ? void 0 : jobs.length) !== 1
227
+ }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
228
+ outline: true
229
+ }, /*#__PURE__*/_react["default"].createElement(_bundlePackages.BundlePackages, _extends({
230
+ jobs: jobs
231
+ }, bundlePackagesState, {
232
+ setState: bundlePackagesSetState
233
+ })))));
234
+ };
235
+
236
+ var AppComponent = function AppComponent(_ref3) {
237
+ var version = _ref3.version,
238
+ jobs = _ref3.jobs;
239
+
240
+ if ((jobs === null || jobs === void 0 ? void 0 : jobs.length) === 0) {
140
241
  return /*#__PURE__*/_react["default"].createElement(Layout, {
141
242
  version: version
142
243
  }, /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement("div", {
@@ -144,15 +245,9 @@ var AppComponent = function AppComponent(_ref2) {
144
245
  }, _i18n["default"].NO_DATA)));
145
246
  }
146
247
 
147
- var _useMemo = (0, _react.useMemo)(function () {
148
- return jobs[0];
149
- }, jobs),
150
- summary = _useMemo.summary,
151
- insights = _useMemo.insights;
152
-
153
- var duplicatePackagesCount = summary.webpack.duplicatePackagesCount;
154
- var duplicatePackagesInsights = Boolean(duplicatePackagesCount.current || duplicatePackagesCount.baseline);
155
- return /*#__PURE__*/_react["default"].createElement(Layout, {
248
+ return /*#__PURE__*/_react["default"].createElement(JobsProvider, {
249
+ jobs: jobs
250
+ }, /*#__PURE__*/_react["default"].createElement(Layout, {
156
251
  jobs: jobs,
157
252
  version: version
158
253
  }, /*#__PURE__*/_react["default"].createElement(_container.Container, {
@@ -160,8 +255,7 @@ var AppComponent = function AppComponent(_ref2) {
160
255
  }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
161
256
  size: "large",
162
257
  keys: _constants.METRICS_WEBPACK_GENERAL,
163
- data: summary,
164
- budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack = insights.webpack) === null || _insights$webpack === void 0 ? void 0 : _insights$webpack.budgets,
258
+ data: jobs[0].summary,
165
259
  showSummaryItemDelta: jobs.length !== 1
166
260
  })), /*#__PURE__*/_react["default"].createElement(_container.Container, {
167
261
  className: _appModule["default"].tabsContainer
@@ -188,94 +282,20 @@ var AppComponent = function AppComponent(_ref2) {
188
282
  }, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Switch, null, /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
189
283
  exact: true,
190
284
  path: _constants.URLS.ASSETS,
191
- render: function render(_ref3) {
192
- var _insights$webpack2;
193
-
194
- var location = _ref3.location;
195
- return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
196
- space: "medium"
197
- }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
198
- keys: _constants.METRICS_WEBPACK_ASSETS,
199
- data: summary,
200
- budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack2 = insights.webpack) === null || _insights$webpack2 === void 0 ? void 0 : _insights$webpack2.budgets,
201
- showSummaryItemDelta: jobs.length !== 1
202
- }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
203
- outline: true
204
- }, /*#__PURE__*/_react["default"].createElement(_bundleAssets.BundleAssets, _extends({
205
- jobs: jobs,
206
- setState: bundleStatsSetState
207
- }, bundleStatsState, {
208
- key: "".concat(location.pathname, "_").concat(location.search)
209
- })))));
210
- }
285
+ component: AssetsContent
211
286
  }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
212
287
  exact: true,
213
288
  path: _constants.URLS.MODULES,
214
- render: function render() {
215
- var _insights$webpack3;
216
-
217
- return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
218
- space: "medium"
219
- }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
220
- keys: _constants.METRICS_WEBPACK_MODULES,
221
- data: summary,
222
- budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack3 = insights.webpack) === null || _insights$webpack3 === void 0 ? void 0 : _insights$webpack3.budgets,
223
- showSummaryItemDelta: jobs.length !== 1
224
- }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
225
- outline: true
226
- }, /*#__PURE__*/_react["default"].createElement(_bundleModules.BundleModules, _extends({
227
- jobs: jobs,
228
- setState: bundleModulesSetState
229
- }, bundleModulesState)))));
230
- }
289
+ component: ModulesContent
231
290
  }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
232
291
  exact: true,
233
292
  path: _constants.URLS.PACKAGES,
234
- render: function render(_ref4) {
235
- var _insights$webpack4;
236
-
237
- var location = _ref4.location;
238
- return /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
239
- space: "medium"
240
- }, /*#__PURE__*/_react["default"].createElement(_summary.Summary, {
241
- keys: _constants.METRICS_WEBPACK_PACKAGES,
242
- data: summary,
243
- budgets: insights === null || insights === void 0 ? void 0 : (_insights$webpack4 = insights.webpack) === null || _insights$webpack4 === void 0 ? void 0 : _insights$webpack4.budgets,
244
- showSummaryItemDelta: jobs.length !== 1
245
- }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
246
- outline: true
247
- }, /*#__PURE__*/_react["default"].createElement(_bundlePackages.BundlePackages, _extends({
248
- jobs: jobs
249
- }, bundlePackagesState, {
250
- setState: bundlePackagesSetState,
251
- key: "".concat(location.pathname, "_").concat(location.search)
252
- })))));
253
- }
293
+ component: PackagesContent
254
294
  }), /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Route, {
255
295
  exact: true,
256
296
  path: _constants.URLS.OVERVIEW,
257
- render: function render() {
258
- var _insights$webpack5;
259
-
260
- return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
261
- space: "large"
262
- }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
263
- duplicatePackagesCount: duplicatePackagesCount,
264
- showDelta: jobs.length > 1
265
- })), (insights === null || insights === void 0 ? void 0 : (_insights$webpack5 = insights.webpack) === null || _insights$webpack5 === void 0 ? void 0 : _insights$webpack5.budgets) && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_budgetInsights.BudgetInsights, {
266
- source: "webpack",
267
- budgets: insights.webpack.budgets
268
- })), /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
269
- space: "small"
270
- }, /*#__PURE__*/_react["default"].createElement(_totalSizeTypeTitle.TotalSizeTypeTitle, null), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsChartBars.BundleAssetsTotalsChartBars, {
271
- jobs: jobs
272
- }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
273
- outline: true
274
- }, /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsTable.BundleAssetsTotalsTable, {
275
- jobs: jobs
276
- })))));
277
- }
278
- }))));
297
+ component: OverviewContent
298
+ })))));
279
299
  };
280
300
 
281
301
  AppComponent.defaultProps = {
@@ -13,12 +13,13 @@
13
13
  }
14
14
 
15
15
  .summaryContainer {
16
- padding-top: var(--space-large);
16
+ padding-top: var(--space-medium);
17
17
  padding-bottom: var(--space-small);
18
18
  }
19
19
 
20
20
  .tabsContainer {
21
21
  border-bottom: 1px solid var(--color-outline);
22
+ background: var(--color-light);
22
23
  }
23
24
 
24
25
  .tabs {
@@ -34,14 +35,14 @@
34
35
  }
35
36
 
36
37
  .tabsContent {
37
- padding-top: var(--space-large);
38
- padding-bottom: var(--space-large);
38
+ padding-top: var(--space-medium);
39
+ padding-bottom: var(--space-medium);
39
40
  min-height: 480px;
40
41
  }
41
42
 
42
43
  @media (min-width: 600px) {
43
44
  :root {
44
- --header-height: 80px;
45
+ --header-height: 72px;
45
46
  }
46
47
 
47
48
  .header {
@@ -54,4 +55,10 @@
54
55
  background-color: var(--color-background);
55
56
  border-bottom: 1px solid var(--color-outline);
56
57
  }
58
+
59
+ .tabsContainer {
60
+ position: sticky;
61
+ top: var(--header-height);
62
+ z-index: 100;
63
+ }
57
64
  }
@@ -48,28 +48,7 @@ var JOBS = (0, _utils.createJobs)([CURRENT_SOURCE, BASELINE_SOURCE], {
48
48
  webpack: {
49
49
  budgets: [{
50
50
  metric: 'totalSizeByTypeALL',
51
- value: 2 * 1024 * 1024
52
- }, {
53
- metric: 'totalInitialSizeJS',
54
- value: 512 * 1024
55
- }, {
56
- metric: 'totalInitialSizeCSS',
57
- value: 50 * 1024
58
- }, {
59
- metric: 'chunkCount',
60
- value: 50
61
- }, {
62
- metric: 'moduleCount',
63
- value: 2000
64
- }, {
65
- metric: 'duplicatePackagesCount',
66
- value: 5
67
- }, {
68
- metric: 'sizes.totalSizeByTypeJS',
69
- value: 2 * 1024 * 1024
70
- }, {
71
- metric: 'sizes.totalSizeByTypeCSS',
72
- value: 20 * 1024
51
+ value: 1024 * 1024
73
52
  }]
74
53
  }
75
54
  });
@@ -15,8 +15,6 @@ var _container = require("../../ui/container");
15
15
 
16
16
  var _jobsHeader = require("../../components/jobs-header");
17
17
 
18
- var _logo = require("../../ui/logo");
19
-
20
18
  var _headerModule = _interopRequireDefault(require("./header.module.css"));
21
19
 
22
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -29,14 +27,7 @@ var Header = function Header(_ref) {
29
27
  className: (0, _classnames["default"])(_headerModule["default"].root, className)
30
28
  }, /*#__PURE__*/_react["default"].createElement("div", {
31
29
  className: _headerModule["default"].inner
32
- }, /*#__PURE__*/_react["default"].createElement("a", {
33
- className: _headerModule["default"].branding,
34
- href: "https://github.com/relative-ci/bundle-stats",
35
- target: "_blank",
36
- rel: "noopener noreferrer nofollow"
37
- }, /*#__PURE__*/_react["default"].createElement(_logo.Logo, {
38
- className: _headerModule["default"].brandingLogo
39
- }, "BundleStats")), /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
30
+ }, /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
40
31
  className: _headerModule["default"].jobs,
41
32
  jobs: jobs
42
33
  })));
@@ -1,8 +1,4 @@
1
1
  <svg width="16" height="16">
2
- <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-alert-circle" viewBox="0 0 24 24" id="alert-circle" xmlns="http://www.w3.org/2000/svg">
3
- <circle cx="12" cy="12" r="10"/>
4
- <path d="M12 8v4M12 16h.01"/>
5
- </symbol>
6
2
  <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down" id="arrow" xmlns="http://www.w3.org/2000/svg">
7
3
  <path d="M12 5v14M19 12l-7 7-7-7"/>
8
4
  </symbol>
@@ -14,10 +10,6 @@
14
10
  <circle cx="12" cy="12" r="10"/>
15
11
  <path d="M15 9l-6 6M9 9l6 6"/>
16
12
  </symbol>
17
- <symbol fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle" viewBox="0 0 24 24" id="check-circle" xmlns="http://www.w3.org/2000/svg">
18
- <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/>
19
- <path d="M22 4L12 14.01l-3-3"/>
20
- </symbol>
21
13
  <symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock" id="clock" xmlns="http://www.w3.org/2000/svg">
22
14
  <circle cx="12" cy="12" r="10"/>
23
15
  <path d="M12 6v6l4 2"/>
@@ -1,4 +1,5 @@
1
1
  .fileName {
2
+ max-width: 100%;
2
3
  padding: 2px;
3
4
  background: var(--color-highlight-warning);
4
5
  }