@pareto-engineering/design-system 5.0.0 → 5.0.2
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/dist/cjs/a/{AreaChart → Charts/AreaChart}/AreaChart.js +89 -73
- package/dist/cjs/a/Charts/AreaChart/styles.scss +48 -0
- package/dist/cjs/a/Charts/BarChart/BarChart.js +137 -0
- package/dist/cjs/a/Charts/BarChart/index.js +13 -0
- package/dist/cjs/a/Charts/BarChart/styles.scss +48 -0
- package/dist/cjs/a/Charts/Common/CustomLegend/CustomLegend.js +88 -0
- package/dist/cjs/a/Charts/Common/CustomLegend/index.js +13 -0
- package/dist/cjs/a/Charts/Common/CustomLegend/styles.scss +67 -0
- package/dist/cjs/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js +97 -0
- package/dist/cjs/a/Charts/Common/CustomTooltipContent/index.js +13 -0
- package/dist/cjs/a/Charts/Common/CustomTooltipContent/styles.scss +22 -0
- package/dist/cjs/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.js +97 -0
- package/dist/cjs/a/Charts/Common/YLabelsDropDown/index.js +13 -0
- package/dist/cjs/a/Charts/Common/YLabelsDropDown/styles.scss +89 -0
- package/dist/cjs/a/Charts/Common/index.js +26 -0
- package/dist/cjs/a/Charts/PieChart/PieChart.js +99 -0
- package/dist/cjs/a/Charts/PieChart/index.js +13 -0
- package/dist/cjs/a/Charts/PieChart/styles.scss +48 -0
- package/dist/cjs/a/Charts/index.js +26 -0
- package/dist/cjs/a/Tooltip/styles.scss +1 -1
- package/dist/cjs/a/index.js +14 -2
- package/dist/cjs/f/FormInput/FormInput.js +6 -0
- package/dist/cjs/f/fields/FileUpload/FileUpload.js +18 -4
- package/dist/cjs/f/fields/LatexPreviewInput/LatexPreviewInput.js +78 -0
- package/dist/cjs/f/fields/LatexPreviewInput/convertLatexToHtml.js +46 -0
- package/dist/cjs/f/fields/LatexPreviewInput/index.js +20 -0
- package/dist/cjs/f/fields/LatexPreviewInput/styles.scss +24 -0
- package/dist/cjs/f/fields/index.js +13 -0
- package/dist/cjs/g/FormBuilder/FormBuilder.js +3 -6
- package/dist/cjs/g/FormBuilder/common/Builder/Builder.js +1 -3
- package/dist/cjs/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js +5 -7
- package/dist/cjs/g/FormBuilder/common/Builder/common/Section/Section.js +2 -4
- package/dist/cjs/g/FormBuilder/common/Renderer/Renderer.js +2 -4
- package/dist/cjs/g/FormBuilder/common/Renderer/common/Section/Section.js +2 -10
- package/dist/cjs/utils/formatting.js +119 -0
- package/dist/cjs/utils/index.js +26 -1
- package/dist/es/a/{AreaChart → Charts/AreaChart}/AreaChart.js +88 -69
- package/dist/es/a/Charts/AreaChart/styles.scss +48 -0
- package/dist/es/a/Charts/BarChart/BarChart.js +128 -0
- package/dist/es/a/Charts/BarChart/index.js +1 -0
- package/dist/es/a/Charts/BarChart/styles.scss +48 -0
- package/dist/es/a/Charts/Common/CustomLegend/CustomLegend.js +76 -0
- package/dist/es/a/Charts/Common/CustomLegend/index.js +1 -0
- package/dist/es/a/Charts/Common/CustomLegend/styles.scss +67 -0
- package/dist/es/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.js +87 -0
- package/dist/es/a/Charts/Common/CustomTooltipContent/index.js +1 -0
- package/dist/es/a/Charts/Common/CustomTooltipContent/styles.scss +22 -0
- package/dist/es/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.js +86 -0
- package/dist/es/a/Charts/Common/YLabelsDropDown/index.js +1 -0
- package/dist/es/a/Charts/Common/YLabelsDropDown/styles.scss +89 -0
- package/dist/es/a/Charts/Common/index.js +3 -0
- package/dist/es/a/Charts/PieChart/PieChart.js +89 -0
- package/dist/es/a/Charts/PieChart/index.js +1 -0
- package/dist/es/a/Charts/PieChart/styles.scss +48 -0
- package/dist/es/a/Charts/index.js +3 -0
- package/dist/es/a/Tooltip/styles.scss +1 -1
- package/dist/es/a/index.js +1 -1
- package/dist/es/f/FormInput/FormInput.js +7 -1
- package/dist/es/f/fields/FileUpload/FileUpload.js +18 -4
- package/dist/es/f/fields/LatexPreviewInput/LatexPreviewInput.js +70 -0
- package/dist/es/f/fields/LatexPreviewInput/convertLatexToHtml.js +31 -0
- package/dist/es/f/fields/LatexPreviewInput/index.js +3 -0
- package/dist/es/f/fields/LatexPreviewInput/styles.scss +24 -0
- package/dist/es/f/fields/index.js +1 -0
- package/dist/es/g/FormBuilder/FormBuilder.js +3 -6
- package/dist/es/g/FormBuilder/common/Builder/Builder.js +1 -3
- package/dist/es/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.js +5 -7
- package/dist/es/g/FormBuilder/common/Builder/common/Section/Section.js +2 -4
- package/dist/es/g/FormBuilder/common/Renderer/Renderer.js +2 -4
- package/dist/es/g/FormBuilder/common/Renderer/common/Section/Section.js +32 -42
- package/dist/es/utils/formatting.js +109 -0
- package/dist/es/utils/index.js +2 -1
- package/jest.config.js +3 -0
- package/package.json +7 -3
- package/src/stories/a/AreaChart.stories.jsx +1 -1
- package/src/stories/a/BarChart.stories.jsx +89 -0
- package/src/stories/a/PieChart.stories.jsx +53 -0
- package/src/ui/a/{AreaChart → Charts/AreaChart}/AreaChart.jsx +114 -65
- package/src/ui/a/Charts/AreaChart/styles.scss +48 -0
- package/src/ui/a/Charts/BarChart/BarChart.jsx +167 -0
- package/src/ui/a/Charts/BarChart/index.js +1 -0
- package/src/ui/a/Charts/BarChart/styles.scss +48 -0
- package/src/ui/a/Charts/Common/CustomLegend/CustomLegend.jsx +109 -0
- package/src/ui/a/Charts/Common/CustomLegend/index.js +1 -0
- package/src/ui/a/Charts/Common/CustomLegend/styles.scss +67 -0
- package/src/ui/a/Charts/Common/CustomTooltipContent/CustomTooltipContent.jsx +117 -0
- package/src/ui/a/Charts/Common/CustomTooltipContent/index.js +1 -0
- package/src/ui/a/Charts/Common/CustomTooltipContent/styles.scss +22 -0
- package/src/ui/a/Charts/Common/YLabelsDropDown/YlabelsDropDown.jsx +121 -0
- package/src/ui/a/Charts/Common/YLabelsDropDown/index.js +1 -0
- package/src/ui/a/Charts/Common/YLabelsDropDown/styles.scss +89 -0
- package/src/ui/a/Charts/Common/index.js +3 -0
- package/src/ui/a/Charts/PieChart/PieChart.jsx +125 -0
- package/src/ui/a/Charts/PieChart/index.js +1 -0
- package/src/ui/a/Charts/PieChart/styles.scss +48 -0
- package/src/ui/a/Charts/index.js +3 -0
- package/src/ui/a/Tooltip/styles.scss +1 -1
- package/src/ui/a/index.js +1 -1
- package/src/ui/f/FormInput/FormInput.jsx +11 -0
- package/src/ui/f/fields/FileUpload/FileUpload.jsx +24 -4
- package/src/ui/f/fields/LatexPreviewInput/LatexPreviewInput.jsx +91 -0
- package/src/ui/f/fields/LatexPreviewInput/convertLatexToHtml.jsx +38 -0
- package/src/ui/f/fields/LatexPreviewInput/index.js +3 -0
- package/src/ui/f/fields/LatexPreviewInput/styles.scss +24 -0
- package/src/ui/f/fields/index.js +4 -0
- package/src/ui/g/FormBuilder/FormBuilder.jsx +0 -3
- package/src/ui/g/FormBuilder/common/Builder/Builder.jsx +0 -2
- package/src/ui/g/FormBuilder/common/Builder/common/InputBuilder/InputBuilder.jsx +4 -7
- package/src/ui/g/FormBuilder/common/Builder/common/Section/Section.jsx +0 -2
- package/src/ui/g/FormBuilder/common/Renderer/Renderer.jsx +0 -2
- package/src/ui/g/FormBuilder/common/Renderer/common/Section/Section.jsx +49 -64
- package/src/ui/utils/formatting.js +133 -0
- package/src/ui/utils/index.js +3 -0
- package/tests/__snapshots__/Storyshots.test.js.snap +2227 -296
- package/tests/emptyMock.js +3 -0
- package/tests/mockTextEncoder.js +7 -0
- package/tests/test-setup.js +7 -0
- package/dist/cjs/a/AreaChart/styles.scss +0 -89
- package/dist/es/a/AreaChart/styles.scss +0 -89
- package/src/ui/a/AreaChart/styles.scss +0 -89
- /package/dist/cjs/a/{AreaChart → Charts/AreaChart}/index.js +0 -0
- /package/dist/es/a/{AreaChart → Charts/AreaChart}/index.js +0 -0
- /package/src/ui/a/{AreaChart → Charts/AreaChart}/index.js +0 -0
package/tests/test-setup.js
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import MockResizeObserver from './mockResizeObserver'
|
|
3
|
+
import MockTextEncoder from './mockTextEncoder'
|
|
3
4
|
|
|
5
|
+
global.TextEncoder = class TextEncoder {
|
|
6
|
+
constructor() {
|
|
7
|
+
this.encode = () => {}
|
|
8
|
+
}
|
|
9
|
+
}
|
|
4
10
|
const noop = () => {}
|
|
5
11
|
const emptyDirFunc = () => ({})
|
|
6
12
|
global.ResizeObserver = MockResizeObserver
|
|
13
|
+
global.TextEncoder = MockTextEncoder
|
|
7
14
|
Object.defineProperty(window, 'scrollTo', { value: noop, writable: true })
|
|
8
15
|
Object.defineProperty(window, 'matchMedia', { value: emptyDirFunc, writable: true })
|
|
9
16
|
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
@use "@pareto-engineering/bem";
|
|
2
|
-
|
|
3
|
-
$default-margin: 1rem;
|
|
4
|
-
$default-padding: 1rem;
|
|
5
|
-
$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
|
|
6
|
-
$default-text-font-size: calc(var(--s-1) * 1rem);
|
|
7
|
-
$default-border-radius: .25rem;
|
|
8
|
-
$default-legend-gap: .625rem;
|
|
9
|
-
$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
|
|
10
|
-
$default-legend-line-width: 1.25rem;
|
|
11
|
-
$default-legend-line-height: .125rem;
|
|
12
|
-
$default-legend-line-margin-right: .3125rem;
|
|
13
|
-
$default-border-line-width: .0625rem;
|
|
14
|
-
|
|
15
|
-
.#{bem.$base} {
|
|
16
|
-
&.area-chart {
|
|
17
|
-
background-color: var(--background-far);
|
|
18
|
-
border-radius: var(--theme-default-border-radius);
|
|
19
|
-
box-shadow: $default-box-shadow;
|
|
20
|
-
margin: $default-margin 0;
|
|
21
|
-
padding: $default-padding;
|
|
22
|
-
|
|
23
|
-
h3 {
|
|
24
|
-
color: var(--subtitle);
|
|
25
|
-
margin: calc($default-margin / 5);
|
|
26
|
-
text-align: left;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.custom-legend {
|
|
30
|
-
display: flex;
|
|
31
|
-
gap: $default-legend-gap;
|
|
32
|
-
justify-content: flex-end;
|
|
33
|
-
padding-bottom: $default-padding;
|
|
34
|
-
padding-right: calc($default-padding * .25);
|
|
35
|
-
|
|
36
|
-
.item {
|
|
37
|
-
align-items: center;
|
|
38
|
-
border: $default-border-line-width solid var(--ui-lines);
|
|
39
|
-
border-radius: $default-border-radius;
|
|
40
|
-
display: flex;
|
|
41
|
-
padding: $default-legend-padding;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.line {
|
|
45
|
-
display: inline-block;
|
|
46
|
-
height: $default-legend-line-height;
|
|
47
|
-
margin-right: $default-legend-line-margin-right;
|
|
48
|
-
width: $default-legend-line-width;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.text {
|
|
52
|
-
color: var(--paragraph);
|
|
53
|
-
font-size: calc($default-text-font-size * .75);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.custom-tooltip {
|
|
58
|
-
background-color: var(--background-far);
|
|
59
|
-
border: $default-border-line-width solid var(--ui-lines);
|
|
60
|
-
border-radius: $default-border-radius;
|
|
61
|
-
padding: calc($default-padding * .25);
|
|
62
|
-
|
|
63
|
-
.label {
|
|
64
|
-
color: var(--hard-paragraph);
|
|
65
|
-
font-size: $default-text-font-size;
|
|
66
|
-
margin: calc($default-margin * .25);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* stylelint-disable selector-max-compound-selectors -- nested elements */
|
|
71
|
-
.recharts-wrapper {
|
|
72
|
-
.recharts-surface {
|
|
73
|
-
.recharts-cartesian-grid line {
|
|
74
|
-
stroke: var(--ui-lines);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.recharts-text {
|
|
78
|
-
fill: var(--soft-paragraph);
|
|
79
|
-
font-size: calc($default-text-font-size * .75);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.recharts-text.recharts-label {
|
|
83
|
-
fill: var(--paragraph);
|
|
84
|
-
font-size: $default-text-font-size;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
@use "@pareto-engineering/bem";
|
|
2
|
-
|
|
3
|
-
$default-margin: 1rem;
|
|
4
|
-
$default-padding: 1rem;
|
|
5
|
-
$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
|
|
6
|
-
$default-text-font-size: calc(var(--s-1) * 1rem);
|
|
7
|
-
$default-border-radius: .25rem;
|
|
8
|
-
$default-legend-gap: .625rem;
|
|
9
|
-
$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
|
|
10
|
-
$default-legend-line-width: 1.25rem;
|
|
11
|
-
$default-legend-line-height: .125rem;
|
|
12
|
-
$default-legend-line-margin-right: .3125rem;
|
|
13
|
-
$default-border-line-width: .0625rem;
|
|
14
|
-
|
|
15
|
-
.#{bem.$base} {
|
|
16
|
-
&.area-chart {
|
|
17
|
-
background-color: var(--background-far);
|
|
18
|
-
border-radius: var(--theme-default-border-radius);
|
|
19
|
-
box-shadow: $default-box-shadow;
|
|
20
|
-
margin: $default-margin 0;
|
|
21
|
-
padding: $default-padding;
|
|
22
|
-
|
|
23
|
-
h3 {
|
|
24
|
-
color: var(--subtitle);
|
|
25
|
-
margin: calc($default-margin / 5);
|
|
26
|
-
text-align: left;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.custom-legend {
|
|
30
|
-
display: flex;
|
|
31
|
-
gap: $default-legend-gap;
|
|
32
|
-
justify-content: flex-end;
|
|
33
|
-
padding-bottom: $default-padding;
|
|
34
|
-
padding-right: calc($default-padding * .25);
|
|
35
|
-
|
|
36
|
-
.item {
|
|
37
|
-
align-items: center;
|
|
38
|
-
border: $default-border-line-width solid var(--ui-lines);
|
|
39
|
-
border-radius: $default-border-radius;
|
|
40
|
-
display: flex;
|
|
41
|
-
padding: $default-legend-padding;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.line {
|
|
45
|
-
display: inline-block;
|
|
46
|
-
height: $default-legend-line-height;
|
|
47
|
-
margin-right: $default-legend-line-margin-right;
|
|
48
|
-
width: $default-legend-line-width;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.text {
|
|
52
|
-
color: var(--paragraph);
|
|
53
|
-
font-size: calc($default-text-font-size * .75);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.custom-tooltip {
|
|
58
|
-
background-color: var(--background-far);
|
|
59
|
-
border: $default-border-line-width solid var(--ui-lines);
|
|
60
|
-
border-radius: $default-border-radius;
|
|
61
|
-
padding: calc($default-padding * .25);
|
|
62
|
-
|
|
63
|
-
.label {
|
|
64
|
-
color: var(--hard-paragraph);
|
|
65
|
-
font-size: $default-text-font-size;
|
|
66
|
-
margin: calc($default-margin * .25);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* stylelint-disable selector-max-compound-selectors -- nested elements */
|
|
71
|
-
.recharts-wrapper {
|
|
72
|
-
.recharts-surface {
|
|
73
|
-
.recharts-cartesian-grid line {
|
|
74
|
-
stroke: var(--ui-lines);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.recharts-text {
|
|
78
|
-
fill: var(--soft-paragraph);
|
|
79
|
-
font-size: calc($default-text-font-size * .75);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.recharts-text.recharts-label {
|
|
83
|
-
fill: var(--paragraph);
|
|
84
|
-
font-size: $default-text-font-size;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
@@ -1,89 +0,0 @@
|
|
|
1
|
-
@use "@pareto-engineering/bem";
|
|
2
|
-
|
|
3
|
-
$default-margin: 1rem;
|
|
4
|
-
$default-padding: 1rem;
|
|
5
|
-
$default-box-shadow: 0 .25rem .75rem var(--ui-lines);
|
|
6
|
-
$default-text-font-size: calc(var(--s-1) * 1rem);
|
|
7
|
-
$default-border-radius: .25rem;
|
|
8
|
-
$default-legend-gap: .625rem;
|
|
9
|
-
$default-legend-padding: calc($default-padding * .125) calc($default-padding * .625);
|
|
10
|
-
$default-legend-line-width: 1.25rem;
|
|
11
|
-
$default-legend-line-height: .125rem;
|
|
12
|
-
$default-legend-line-margin-right: .3125rem;
|
|
13
|
-
$default-border-line-width: .0625rem;
|
|
14
|
-
|
|
15
|
-
.#{bem.$base} {
|
|
16
|
-
&.area-chart {
|
|
17
|
-
background-color: var(--background-far);
|
|
18
|
-
border-radius: var(--theme-default-border-radius);
|
|
19
|
-
box-shadow: $default-box-shadow;
|
|
20
|
-
margin: $default-margin 0;
|
|
21
|
-
padding: $default-padding;
|
|
22
|
-
|
|
23
|
-
h3 {
|
|
24
|
-
color: var(--subtitle);
|
|
25
|
-
margin: calc($default-margin / 5);
|
|
26
|
-
text-align: left;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.custom-legend {
|
|
30
|
-
display: flex;
|
|
31
|
-
gap: $default-legend-gap;
|
|
32
|
-
justify-content: flex-end;
|
|
33
|
-
padding-bottom: $default-padding;
|
|
34
|
-
padding-right: calc($default-padding * .25);
|
|
35
|
-
|
|
36
|
-
.item {
|
|
37
|
-
align-items: center;
|
|
38
|
-
border: $default-border-line-width solid var(--ui-lines);
|
|
39
|
-
border-radius: $default-border-radius;
|
|
40
|
-
display: flex;
|
|
41
|
-
padding: $default-legend-padding;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.line {
|
|
45
|
-
display: inline-block;
|
|
46
|
-
height: $default-legend-line-height;
|
|
47
|
-
margin-right: $default-legend-line-margin-right;
|
|
48
|
-
width: $default-legend-line-width;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
.text {
|
|
52
|
-
color: var(--paragraph);
|
|
53
|
-
font-size: calc($default-text-font-size * .75);
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.custom-tooltip {
|
|
58
|
-
background-color: var(--background-far);
|
|
59
|
-
border: $default-border-line-width solid var(--ui-lines);
|
|
60
|
-
border-radius: $default-border-radius;
|
|
61
|
-
padding: calc($default-padding * .25);
|
|
62
|
-
|
|
63
|
-
.label {
|
|
64
|
-
color: var(--hard-paragraph);
|
|
65
|
-
font-size: $default-text-font-size;
|
|
66
|
-
margin: calc($default-margin * .25);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
/* stylelint-disable selector-max-compound-selectors -- nested elements */
|
|
71
|
-
.recharts-wrapper {
|
|
72
|
-
.recharts-surface {
|
|
73
|
-
.recharts-cartesian-grid line {
|
|
74
|
-
stroke: var(--ui-lines);
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.recharts-text {
|
|
78
|
-
fill: var(--soft-paragraph);
|
|
79
|
-
font-size: calc($default-text-font-size * .75);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.recharts-text.recharts-label {
|
|
83
|
-
fill: var(--paragraph);
|
|
84
|
-
font-size: $default-text-font-size;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|