@bundle-stats/ui 4.4.0-beta.0 → 4.4.0-beta.1

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 (59) hide show
  1. package/lib/app/app.js +9 -3
  2. package/lib/app/app.js.map +1 -1
  3. package/lib/assets/icons.svg +9 -1
  4. package/lib/assets/icons.svg.js +6 -0
  5. package/lib/assets/icons.svg.js.map +1 -1
  6. package/lib/components/index.js +3 -3
  7. package/lib/components/index.js.map +1 -1
  8. package/lib/components/{duplicate-packages-insight → insights}/index.js +1 -1
  9. package/lib/components/insights/index.js.map +1 -0
  10. package/lib/components/insights/insights.js +58 -0
  11. package/lib/components/insights/insights.js.map +1 -0
  12. package/lib/components/insights/insights.module.css +32 -0
  13. package/lib/ui/icon/icon.js +2 -0
  14. package/lib/ui/icon/icon.js.map +1 -1
  15. package/lib-esm/app/app.js +10 -4
  16. package/lib-esm/app/app.js.map +1 -1
  17. package/lib-esm/assets/icons.svg +9 -1
  18. package/lib-esm/assets/icons.svg.js +6 -0
  19. package/lib-esm/assets/icons.svg.js.map +1 -1
  20. package/lib-esm/components/index.js +1 -1
  21. package/lib-esm/components/index.js.map +1 -1
  22. package/lib-esm/components/insights/index.js +2 -0
  23. package/lib-esm/components/insights/index.js.map +1 -0
  24. package/lib-esm/components/insights/insights.js +51 -0
  25. package/lib-esm/components/insights/insights.js.map +1 -0
  26. package/lib-esm/components/insights/insights.module.css +32 -0
  27. package/lib-esm/ui/icon/icon.js +2 -0
  28. package/lib-esm/ui/icon/icon.js.map +1 -1
  29. package/package.json +14 -16
  30. package/src/app/app.jsx +18 -8
  31. package/src/assets/icons/error.svg +6 -0
  32. package/src/assets/icons/info.svg +6 -0
  33. package/src/assets/icons.svg +9 -1
  34. package/src/assets/icons.svg.jsx +26 -0
  35. package/src/components/index.js +1 -1
  36. package/src/components/insights/index.ts +1 -0
  37. package/src/components/insights/insights.module.css +32 -0
  38. package/src/components/insights/insights.stories.tsx +50 -0
  39. package/src/components/insights/insights.tsx +101 -0
  40. package/src/ui/icon/icon.jsx +2 -0
  41. package/types/components/index.d.ts +1 -1
  42. package/types/components/insights/index.d.ts +1 -0
  43. package/types/components/insights/insights.d.ts +8 -0
  44. package/types/ui/icon/icon.d.ts +2 -0
  45. package/lib/components/duplicate-packages-insight/duplicate-packages-insight.js +0 -31
  46. package/lib/components/duplicate-packages-insight/duplicate-packages-insight.js.map +0 -1
  47. package/lib/components/duplicate-packages-insight/duplicate-packages-insight.module.css +0 -18
  48. package/lib/components/duplicate-packages-insight/index.js.map +0 -1
  49. package/lib-esm/components/duplicate-packages-insight/duplicate-packages-insight.js +0 -24
  50. package/lib-esm/components/duplicate-packages-insight/duplicate-packages-insight.js.map +0 -1
  51. package/lib-esm/components/duplicate-packages-insight/duplicate-packages-insight.module.css +0 -18
  52. package/lib-esm/components/duplicate-packages-insight/index.js +0 -2
  53. package/lib-esm/components/duplicate-packages-insight/index.js.map +0 -1
  54. package/src/components/duplicate-packages-insight/duplicate-packages-insight.module.css +0 -18
  55. package/src/components/duplicate-packages-insight/duplicate-packages-insight.stories.tsx +0 -66
  56. package/src/components/duplicate-packages-insight/duplicate-packages-insight.tsx +0 -81
  57. package/src/components/duplicate-packages-insight/index.ts +0 -1
  58. package/types/components/duplicate-packages-insight/duplicate-packages-insight.d.ts +0 -11
  59. package/types/components/duplicate-packages-insight/index.d.ts +0 -1
@@ -1,66 +0,0 @@
1
- import React from 'react';
2
- import { MemoryRouter } from 'react-router-dom';
3
- import { DuplicatePackagesInsight } from '.';
4
-
5
- export default {
6
- title: 'Components/DuplicatePackagesInsight',
7
- component: DuplicatePackagesInsight,
8
- };
9
-
10
- const Template = (props: any) => <MemoryRouter><DuplicatePackagesInsight {...props} /></MemoryRouter>;
11
-
12
- export const Default = Template.bind({});
13
-
14
- Default.args = {
15
- type: 'INFO',
16
- data: {
17
- packages: {},
18
- text: 'Bundle does not contain duplicate packages',
19
- },
20
- summary: {
21
- current: 0,
22
- baseline: 0,
23
- },
24
- };
25
-
26
- export const NewDuplicates = Template.bind({});
27
-
28
- NewDuplicates.args = {
29
- type: 'ERROR',
30
- data: {
31
- packages: {},
32
- text: 'Bundle introduced 2 duplicate packages',
33
- },
34
- summary: {
35
- current: 4,
36
- baseline: 2,
37
- },
38
- };
39
-
40
- export const NewDuplicatesAndRemovals = Template.bind({});
41
-
42
- NewDuplicatesAndRemovals.args = {
43
- type: 'ERROR',
44
- data: {
45
- packages: {},
46
- text: 'Bundle introduced 2 and removed 1 duplicate packages',
47
- },
48
- summary: {
49
- current: 4,
50
- baseline: 3,
51
- },
52
- };
53
-
54
- export const NoChangeDuplicates = Template.bind({});
55
-
56
- NoChangeDuplicates.args = {
57
- type: 'WARNING',
58
- data: {
59
- packages: {},
60
- text: 'Bundle contains 4 duplicate packages',
61
- },
62
- summary: {
63
- current: 4,
64
- baseline: 4,
65
- },
66
- };
@@ -1,81 +0,0 @@
1
- import React from 'react';
2
- import {
3
- BUNDLE_PACKAGES_DUPLICATE,
4
- BUNDLE_PACKAGES_COUNT,
5
- InsightType,
6
- JobSummaryItem,
7
- getMetricRunInfo,
8
- JobInsightDuplicatePackagesV3Data,
9
- getGlobalMetricType,
10
- } from '@bundle-stats/utils';
11
-
12
- import { Alert } from '../../ui/alert';
13
- import { ComponentLink } from '../component-link';
14
- import { Delta } from '../delta';
15
- // @ts-ignore
16
- import css from './duplicate-packages-insight.module.css';
17
-
18
- interface DuplicatePackagesInsightProps extends React.HTMLAttributes<HTMLDivElement> {
19
- type: InsightType;
20
- data: JobInsightDuplicatePackagesV3Data;
21
- summary: JobSummaryItem;
22
- showDelta?: boolean;
23
- customComponentLink?: React.FunctionComponent<React.HTMLAttributes<HTMLLinkElement>>;
24
- }
25
-
26
- const AlertKindMap = new Map([
27
- [InsightType.INFO, 'info'],
28
- [InsightType.ERROR, 'danger'],
29
- [InsightType.WARNING, 'warning'],
30
- ]);
31
-
32
- export const DuplicatePackagesInsight = (props: DuplicatePackagesInsightProps) => {
33
- const {
34
- type,
35
- data,
36
- summary,
37
- showDelta = true,
38
- customComponentLink: CustomComponentLink = ComponentLink,
39
- ...restProps
40
- } = props;
41
-
42
- const metric = getGlobalMetricType('webpack.duplicatePackageCount');
43
-
44
- const metricRunInfo = getMetricRunInfo(
45
- metric,
46
- summary.current,
47
- summary.baseline,
48
- );
49
-
50
- const hasDuplicatePackages = metricRunInfo.value > 0 || (metricRunInfo && (metricRunInfo.delta !== 0));
51
-
52
- return (
53
- <Alert kind={AlertKindMap.get(type)} {...restProps}>
54
- <span className={css.message}>{data.text}</span>
55
- {hasDuplicatePackages && (
56
- <span className={css.metric}>
57
- {metricRunInfo.value}
58
- {showDelta && typeof metricRunInfo.delta !== 'undefined' && (
59
- <Delta
60
- className={css.delta}
61
- inverted
62
- displayValue={metricRunInfo.displayDelta as string}
63
- deltaType={metricRunInfo.deltaType as string}
64
- />
65
- )}
66
- </span>
67
- )}
68
- <span className={css.link}>
69
- {hasDuplicatePackages ? (
70
- <CustomComponentLink {...BUNDLE_PACKAGES_DUPLICATE as any}>
71
- View duplicate packages
72
- </CustomComponentLink>
73
- ) : (
74
- <CustomComponentLink {...BUNDLE_PACKAGES_COUNT as any}>
75
- View packages
76
- </CustomComponentLink>
77
- )}
78
- </span>
79
- </Alert>
80
- );
81
- };
@@ -1 +0,0 @@
1
- export * from './duplicate-packages-insight';
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { InsightType, JobSummaryItem, JobInsightDuplicatePackagesV3Data } from '@bundle-stats/utils';
3
- interface DuplicatePackagesInsightProps extends React.HTMLAttributes<HTMLDivElement> {
4
- type: InsightType;
5
- data: JobInsightDuplicatePackagesV3Data;
6
- summary: JobSummaryItem;
7
- showDelta?: boolean;
8
- customComponentLink?: React.FunctionComponent<React.HTMLAttributes<HTMLLinkElement>>;
9
- }
10
- export declare const DuplicatePackagesInsight: (props: DuplicatePackagesInsightProps) => JSX.Element;
11
- export {};
@@ -1 +0,0 @@
1
- export * from './duplicate-packages-insight';