@bundle-stats/ui 4.2.0-beta.5 → 4.2.0-beta.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/insights/insights.js +1 -1
- package/lib/components/insights/insights.js.map +1 -1
- package/lib/components/insights/insights.module.css +7 -6
- package/lib-esm/components/insights/insights.js +1 -1
- package/lib-esm/components/insights/insights.js.map +1 -1
- package/lib-esm/components/insights/insights.module.css +7 -6
- package/package.json +3 -3
- package/src/components/insights/insights.module.css +7 -6
- package/src/components/insights/insights.stories.tsx +53 -0
- package/src/components/insights/insights.tsx +4 -3
|
@@ -12,7 +12,7 @@ const stack_1 = require("../../layout/stack");
|
|
|
12
12
|
const icon_1 = require("../../ui/icon");
|
|
13
13
|
const component_link_1 = require("../component-link");
|
|
14
14
|
const insights_module_css_1 = __importDefault(require("./insights.module.css"));
|
|
15
|
-
const normalizedInsights = ({ duplicatePackages, newPackages }) => {
|
|
15
|
+
const normalizedInsights = ({ duplicatePackages, newPackages, }) => {
|
|
16
16
|
const insightsByLevel = {
|
|
17
17
|
[utils_1.InsightType.ERROR]: [],
|
|
18
18
|
[utils_1.InsightType.WARNING]: [],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../src/components/insights/insights.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,+CAM6B;AAE7B,wDAAoD;AACpD,8CAA2C;AAC3C,wCAAqC;AACrC,sDAAkD;AAElD,gFAAwC;AAQxC,MAAM,kBAAkB,GAAG,
|
|
1
|
+
{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../src/components/insights/insights.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,+CAM6B;AAE7B,wDAAoD;AACpD,8CAA2C;AAC3C,wCAAqC;AACrC,sDAAkD;AAElD,gFAAwC;AAQxC,MAAM,kBAAkB,GAAG,CAAC,EAC1B,iBAAiB,EACjB,WAAW,GACyB,EAAuB,EAAE;IAC7D,MAAM,eAAe,GAA6C;QAChE,CAAC,mBAAW,CAAC,KAAK,CAAC,EAAE,EAAE;QACvB,CAAC,mBAAW,CAAC,OAAO,CAAC,EAAE,EAAE;QACzB,CAAC,mBAAW,CAAC,IAAI,CAAC,EAAE,EAAE;KACvB,CAAC;IAEF,IAAI,iBAAiB,EAAE;QACrB,eAAe,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;YAC3C,IAAI,EAAE,mBAAmB;YACzB,OAAO,EAAE,iBAAiB;YAC1B,IAAI,EAAE,iCAAyB;SAChC,CAAC,CAAC;KACJ;IAED,IAAI,WAAW,EAAE;QACf,eAAe,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC;YACrC,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,WAAW;YACpB,IAAI,EAAE,6BAAqB;SAC5B,CAAC,CAAC;KACJ;IAED,OAAO;QACL,GAAG,CAAC,eAAe,CAAC,mBAAW,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAC7C,GAAG,CAAC,eAAe,CAAC,mBAAW,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;QAC/C,GAAG,CAAC,eAAe,CAAC,mBAAW,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;KAC7C,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC;IACjC,CAAC,mBAAW,CAAC,KAAK,EAAE,WAAI,CAAC,KAAK,CAAC,KAAK,CAAC;IACrC,CAAC,mBAAW,CAAC,OAAO,EAAE,WAAI,CAAC,KAAK,CAAC,OAAO,CAAC;IACzC,CAAC,mBAAW,CAAC,IAAI,EAAE,WAAI,CAAC,KAAK,CAAC,IAAI,CAAC;CACpC,CAAC,CAAC;AAQI,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IAC/C,MAAM,EACJ,iBAAiB,EACjB,WAAW,EACX,mBAAmB,EAAE,mBAAmB,GAAG,8BAAa,EACxD,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,QAAQ,GAAG,kBAAkB,CAAC,EAAE,iBAAiB,EAAE,WAAW,EAAE,CAAC,CAAC;IAExE,OAAO,CACL,8BAAC,aAAK,IAAC,KAAK,EAAC,SAAS,KAAK,SAAS,IACjC,QAAQ,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,EAAE;QACxC,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACnD,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC,IAAwB,CAAC;QAElD,OAAO,CACL,8BAAC,sBAAS,IACR,GAAG,EAAE,IAAI,EACT,KAAK,EAAC,SAAS,EACf,UAAU,EAAC,QAAQ,EACnB,EAAE,EAAE,mBAAmB,KACnB,IAAI,EACR,SAAS,EAAE,IAAA,oBAAE,EAAC,6BAAG,CAAC,KAAK,EAAE,6BAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YAE1C,KAAK,IAAI,8BAAC,WAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,6BAAG,CAAC,IAAI,GAAI;YACrD,4CAAO,IAAI,CAAQ,CACT,CACb,CAAC;IACJ,CAAC,CAAC,CACI,CACT,CAAC;AACJ,CAAC,CAAC;AAhCW,QAAA,QAAQ,YAgCnB"}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
.icon {
|
|
2
|
+
outline: 3px solid transparent;
|
|
2
3
|
border-radius: 50%;
|
|
3
|
-
padding: 3px;
|
|
4
|
-
width: 22px;
|
|
5
|
-
height: 22px;
|
|
6
4
|
background: var(--color-highlight);
|
|
7
5
|
}
|
|
8
6
|
|
|
9
|
-
.
|
|
7
|
+
.error .icon {
|
|
8
|
+
outline-color: var(--color-red-50);
|
|
10
9
|
background: var(--color-red-50);
|
|
11
10
|
color: var(--color-danger);
|
|
12
11
|
}
|
|
13
12
|
|
|
14
|
-
.
|
|
13
|
+
.warning .icon {
|
|
14
|
+
outline-color: var(--color-yellow-100);
|
|
15
15
|
background: var(--color-yellow-100);
|
|
16
16
|
color: var(--color-warning-dark);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.
|
|
19
|
+
.info .icon {
|
|
20
|
+
outline-color: var(--color-highlight-info);
|
|
20
21
|
background: var(--color-highlight-info);
|
|
21
22
|
color: var(--color-info);
|
|
22
23
|
}
|
|
@@ -6,7 +6,7 @@ import { Stack } from '../../layout/stack';
|
|
|
6
6
|
import { Icon } from '../../ui/icon';
|
|
7
7
|
import { ComponentLink } from '../component-link';
|
|
8
8
|
import css from './insights.module.css';
|
|
9
|
-
const normalizedInsights = ({ duplicatePackages, newPackages }) => {
|
|
9
|
+
const normalizedInsights = ({ duplicatePackages, newPackages, }) => {
|
|
10
10
|
const insightsByLevel = {
|
|
11
11
|
[InsightType.ERROR]: [],
|
|
12
12
|
[InsightType.WARNING]: [],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../src/components/insights/insights.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EACL,yBAAyB,EACzB,qBAAqB,EACrB,WAAW,GAGZ,MAAM,qBAAqB,CAAC;AAE7B,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAElD,OAAO,GAAG,MAAM,uBAAuB,CAAC;AAQxC,MAAM,kBAAkB,GAAG,
|
|
1
|
+
{"version":3,"file":"insights.js","sourceRoot":"","sources":["../../../src/components/insights/insights.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
.icon {
|
|
2
|
+
outline: 3px solid transparent;
|
|
2
3
|
border-radius: 50%;
|
|
3
|
-
padding: 3px;
|
|
4
|
-
width: 22px;
|
|
5
|
-
height: 22px;
|
|
6
4
|
background: var(--color-highlight);
|
|
7
5
|
}
|
|
8
6
|
|
|
9
|
-
.
|
|
7
|
+
.error .icon {
|
|
8
|
+
outline-color: var(--color-red-50);
|
|
10
9
|
background: var(--color-red-50);
|
|
11
10
|
color: var(--color-danger);
|
|
12
11
|
}
|
|
13
12
|
|
|
14
|
-
.
|
|
13
|
+
.warning .icon {
|
|
14
|
+
outline-color: var(--color-yellow-100);
|
|
15
15
|
background: var(--color-yellow-100);
|
|
16
16
|
color: var(--color-warning-dark);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.
|
|
19
|
+
.info .icon {
|
|
20
|
+
outline-color: var(--color-highlight-info);
|
|
20
21
|
background: var(--color-highlight-info);
|
|
21
22
|
color: var(--color-info);
|
|
22
23
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bundle-stats/ui",
|
|
3
|
-
"version": "4.2.0-beta.
|
|
3
|
+
"version": "4.2.0-beta.6",
|
|
4
4
|
"description": "UI components for BundleStats projects.",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"module": "lib-esm/index.js",
|
|
@@ -82,11 +82,11 @@
|
|
|
82
82
|
"react-router-dom": "^5.0.0"
|
|
83
83
|
},
|
|
84
84
|
"dependencies": {
|
|
85
|
-
"@bundle-stats/utils": "^4.2.0-beta.
|
|
85
|
+
"@bundle-stats/utils": "^4.2.0-beta.6",
|
|
86
86
|
"ariakit": "2.0.0-next.43",
|
|
87
87
|
"modern-css-reset": "1.4.0",
|
|
88
88
|
"query-string": "7.1.3",
|
|
89
89
|
"use-query-params": "2.1.2"
|
|
90
90
|
},
|
|
91
|
-
"gitHead": "
|
|
91
|
+
"gitHead": "fa5c0da7c8d6de3d6cd1cb42a581bdca55dccf31"
|
|
92
92
|
}
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
.icon {
|
|
2
|
+
outline: 3px solid transparent;
|
|
2
3
|
border-radius: 50%;
|
|
3
|
-
padding: 3px;
|
|
4
|
-
width: 22px;
|
|
5
|
-
height: 22px;
|
|
6
4
|
background: var(--color-highlight);
|
|
7
5
|
}
|
|
8
6
|
|
|
9
|
-
.
|
|
7
|
+
.error .icon {
|
|
8
|
+
outline-color: var(--color-red-50);
|
|
10
9
|
background: var(--color-red-50);
|
|
11
10
|
color: var(--color-danger);
|
|
12
11
|
}
|
|
13
12
|
|
|
14
|
-
.
|
|
13
|
+
.warning .icon {
|
|
14
|
+
outline-color: var(--color-yellow-100);
|
|
15
15
|
background: var(--color-yellow-100);
|
|
16
16
|
color: var(--color-warning-dark);
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
-
.
|
|
19
|
+
.info .icon {
|
|
20
|
+
outline-color: var(--color-highlight-info);
|
|
20
21
|
background: var(--color-highlight-info);
|
|
21
22
|
color: var(--color-info);
|
|
22
23
|
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
import { getWrapperDecorator } from '../../stories';
|
|
4
|
+
import { Insights } from '.';
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: 'Components/Insights',
|
|
8
|
+
component: Insights,
|
|
9
|
+
decorators: [getWrapperDecorator()],
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
const Template = (props: any) => <Insights {...props} />;
|
|
13
|
+
|
|
14
|
+
export const Default = Template.bind({});
|
|
15
|
+
|
|
16
|
+
Default.args = {
|
|
17
|
+
duplicatePackages: {
|
|
18
|
+
type: 'error',
|
|
19
|
+
data: {
|
|
20
|
+
packages: { 'package-a': ['package-a', 'package-a~1'] },
|
|
21
|
+
text: 'Bundle introduced 1 and removed 2 duplicate packages',
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
newPackages: {
|
|
25
|
+
type: 'warning',
|
|
26
|
+
data: {
|
|
27
|
+
text: 'Bundle introduced 2 new packages: package-c, package-d',
|
|
28
|
+
packages: ['package-c', 'package-d'],
|
|
29
|
+
},
|
|
30
|
+
changes: true,
|
|
31
|
+
},
|
|
32
|
+
};
|
|
33
|
+
|
|
34
|
+
export const Info = Template.bind({});
|
|
35
|
+
|
|
36
|
+
Info.args = {
|
|
37
|
+
duplicatePackages: {
|
|
38
|
+
type: 'info',
|
|
39
|
+
data: {
|
|
40
|
+
packages: { 'package-a': ['package-a', 'package-a~1'] },
|
|
41
|
+
text: 'Bundle removed 1 duplicate packages',
|
|
42
|
+
},
|
|
43
|
+
changes: false,
|
|
44
|
+
},
|
|
45
|
+
newPackages: {
|
|
46
|
+
type: 'warning',
|
|
47
|
+
data: {
|
|
48
|
+
text: 'Bundle introduced 2 new packages: package-c, package-d',
|
|
49
|
+
packages: ['package-c', 'package-d'],
|
|
50
|
+
},
|
|
51
|
+
changes: true,
|
|
52
|
+
},
|
|
53
|
+
};
|
|
@@ -21,9 +21,10 @@ interface InsightEntry {
|
|
|
21
21
|
link: any;
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
const normalizedInsights = (
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
const normalizedInsights = ({
|
|
25
|
+
duplicatePackages,
|
|
26
|
+
newPackages,
|
|
27
|
+
}: Partial<JobInsightsType['webpack']>): Array<InsightEntry> => {
|
|
27
28
|
const insightsByLevel: Record<InsightType, Array<InsightEntry>> = {
|
|
28
29
|
[InsightType.ERROR]: [],
|
|
29
30
|
[InsightType.WARNING]: [],
|