@cashub/ui-elv 1.0.6 → 1.0.8
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/esm/wizard/Wizard.js +1 -1
- package/package.json +6 -7
- package/wizard/Wizard.js +1 -1
- package/billing/BarChart.js +0 -51
- package/billing/Grid.js +0 -45
- package/billing/Header2.js +0 -25
- package/billing/Header3.js +0 -37
- package/billing/Paragraph.js +0 -33
- package/billing/ParagraphGroup.js +0 -22
- package/billing/ParagraphText.js +0 -26
- package/billing/Section.js +0 -50
- package/billing/SectionBody.js +0 -17
- package/billing/SectionHeader.js +0 -26
- package/billing/__stories__/BarChart.stories.js_bak +0 -46
- package/billing/__stories__/Grid.stories.js_bak +0 -57
- package/billing/__stories__/Header2.stories.js_bak +0 -62
- package/billing/__stories__/Header3.stories.js_bak +0 -69
- package/billing/__stories__/Paragraph.stories.js_bak +0 -84
- package/billing/__stories__/ParagraphGroup.stories.js_bak +0 -68
- package/billing/__stories__/ParagraphText.stories.js_bak +0 -64
- package/billing/__stories__/Section.stories.js_bak +0 -115
- package/billing/__stories__/SectionBody.stories.js_bak +0 -62
- package/billing/__stories__/SectionHeader.stories.js-bak +0 -68
- package/esm/billing/BarChart.js +0 -45
- package/esm/billing/Grid.js +0 -38
- package/esm/billing/Header2.js +0 -19
- package/esm/billing/Header3.js +0 -31
- package/esm/billing/Paragraph.js +0 -27
- package/esm/billing/ParagraphGroup.js +0 -16
- package/esm/billing/ParagraphText.js +0 -20
- package/esm/billing/Section.js +0 -44
- package/esm/billing/SectionBody.js +0 -11
- package/esm/billing/SectionHeader.js +0 -20
- package/esm/billing/__stories__/BarChart.stories.js_bak +0 -46
- package/esm/billing/__stories__/Grid.stories.js_bak +0 -57
- package/esm/billing/__stories__/Header2.stories.js_bak +0 -62
- package/esm/billing/__stories__/Header3.stories.js_bak +0 -69
- package/esm/billing/__stories__/Paragraph.stories.js_bak +0 -84
- package/esm/billing/__stories__/ParagraphGroup.stories.js_bak +0 -68
- package/esm/billing/__stories__/ParagraphText.stories.js_bak +0 -64
- package/esm/billing/__stories__/Section.stories.js_bak +0 -115
- package/esm/billing/__stories__/SectionBody.stories.js_bak +0 -62
- package/esm/billing/__stories__/SectionHeader.stories.js-bak +0 -68
package/esm/wizard/Wizard.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cashub/ui-elv",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.8",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "CasHUB Team",
|
|
6
6
|
"description": "CasHUB UI components library (Elavon)",
|
|
@@ -18,15 +18,14 @@
|
|
|
18
18
|
"@cashub/utils": "^1.3.2",
|
|
19
19
|
"@googlemaps/markerclusterer": "^2.5.1",
|
|
20
20
|
"@googlemaps/react-wrapper": "^1.1.35",
|
|
21
|
-
"@
|
|
22
|
-
"@popperjs/core": "^2.11.5",
|
|
21
|
+
"@react-leaflet/core": "^1.1.1",
|
|
23
22
|
"@yaireo/tagify": "^4.12.0",
|
|
24
23
|
"chart.js": "^3.8.0",
|
|
25
24
|
"cropperjs": "^1.5.12",
|
|
25
|
+
"fast-deep-equal": "^3.1.3",
|
|
26
26
|
"leaflet": "^1.7.1",
|
|
27
27
|
"leaflet-draw": "^1.0.4",
|
|
28
28
|
"lodash.uniqueid": "^4.0.1",
|
|
29
|
-
"moment": "^2.29.3",
|
|
30
29
|
"normalize.css": "^8.0.1",
|
|
31
30
|
"overlapping-marker-spiderfier": "^1.1.4",
|
|
32
31
|
"qrcode.react": "^3.0.2",
|
|
@@ -37,17 +36,17 @@
|
|
|
37
36
|
"react-leaflet": "^3.1.0",
|
|
38
37
|
"react-leaflet-markercluster": "^3.0.0-rc1",
|
|
39
38
|
"react-outside-click-handler": "^1.3.0",
|
|
40
|
-
"react-popper": "^2.3.0",
|
|
41
39
|
"react-router-dom": "^5.2.0",
|
|
42
40
|
"react-toastify": "^7.0.4",
|
|
43
41
|
"react-transition-group": "^4.4.2",
|
|
44
|
-
"react-window": "^1.8.11",
|
|
45
42
|
"styled-components": "^5.3.0",
|
|
46
43
|
"treeflex": "^2.0.1"
|
|
47
44
|
},
|
|
48
45
|
"peerDependencies": {
|
|
49
46
|
"react": "^17.0.1",
|
|
50
|
-
"react-dom": "^17.0.1"
|
|
47
|
+
"react-dom": "^17.0.1",
|
|
48
|
+
"react-i18next": ">=11.11.4",
|
|
49
|
+
"react-icons": "^4.3.1"
|
|
51
50
|
},
|
|
52
51
|
"publishConfig": {
|
|
53
52
|
"access": "public"
|
package/wizard/Wizard.js
CHANGED
package/billing/BarChart.js
DELETED
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _renderer = require("@react-pdf/renderer");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
const BillingBarChart = _ref => {
|
|
10
|
-
let {
|
|
11
|
-
theme,
|
|
12
|
-
percentage,
|
|
13
|
-
success,
|
|
14
|
-
warning,
|
|
15
|
-
danger
|
|
16
|
-
} = _ref;
|
|
17
|
-
const styles = {
|
|
18
|
-
chart: {
|
|
19
|
-
position: 'relative',
|
|
20
|
-
width: '100%',
|
|
21
|
-
height: 16,
|
|
22
|
-
borderRadius: 16,
|
|
23
|
-
backgroundColor: theme.bgColor3,
|
|
24
|
-
marginTop: 8
|
|
25
|
-
},
|
|
26
|
-
bar: {
|
|
27
|
-
position: 'absolute',
|
|
28
|
-
width: `${percentage}%`,
|
|
29
|
-
borderRadius: 16,
|
|
30
|
-
top: 0,
|
|
31
|
-
bottom: 0,
|
|
32
|
-
backgroundColor: theme.colorPrimary
|
|
33
|
-
}
|
|
34
|
-
};
|
|
35
|
-
if (success) {
|
|
36
|
-
styles.bar.backgroundColor = theme.colorSuccess;
|
|
37
|
-
}
|
|
38
|
-
if (warning) {
|
|
39
|
-
styles.bar.backgroundColor = theme.colorWarning;
|
|
40
|
-
}
|
|
41
|
-
if (danger) {
|
|
42
|
-
styles.bar.backgroundColor = theme.colorDanger;
|
|
43
|
-
}
|
|
44
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
|
|
45
|
-
style: styles.chart,
|
|
46
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
|
|
47
|
-
style: styles.bar
|
|
48
|
-
})
|
|
49
|
-
});
|
|
50
|
-
};
|
|
51
|
-
var _default = exports.default = BillingBarChart;
|
package/billing/Grid.js
DELETED
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.BillingGrid = exports.BillingColumn = void 0;
|
|
7
|
-
var _renderer = require("@react-pdf/renderer");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
const BillingGrid = _ref => {
|
|
10
|
-
let {
|
|
11
|
-
children
|
|
12
|
-
} = _ref;
|
|
13
|
-
const styles = {
|
|
14
|
-
display: 'flex',
|
|
15
|
-
flexWrap: 'wrap',
|
|
16
|
-
flexDirection: 'row',
|
|
17
|
-
margin: '0 -8'
|
|
18
|
-
};
|
|
19
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
|
|
20
|
-
style: styles,
|
|
21
|
-
children: children
|
|
22
|
-
});
|
|
23
|
-
};
|
|
24
|
-
exports.BillingGrid = BillingGrid;
|
|
25
|
-
const BillingColumn = _ref2 => {
|
|
26
|
-
let {
|
|
27
|
-
children,
|
|
28
|
-
flex
|
|
29
|
-
} = _ref2;
|
|
30
|
-
const styles = {
|
|
31
|
-
padding: '0 8',
|
|
32
|
-
width: '50%'
|
|
33
|
-
};
|
|
34
|
-
if (flex) {
|
|
35
|
-
styles.display = 'flex';
|
|
36
|
-
styles.alignContent = 'stretch';
|
|
37
|
-
styles.alignItems = 'stretch';
|
|
38
|
-
styles.flexDirection = 'column';
|
|
39
|
-
}
|
|
40
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
|
|
41
|
-
style: styles,
|
|
42
|
-
children: children
|
|
43
|
-
});
|
|
44
|
-
};
|
|
45
|
-
exports.BillingColumn = BillingColumn;
|
package/billing/Header2.js
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _renderer = require("@react-pdf/renderer");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
const BillingHeader2 = _ref => {
|
|
10
|
-
let {
|
|
11
|
-
children
|
|
12
|
-
} = _ref;
|
|
13
|
-
const styles = {
|
|
14
|
-
fontSize: 20,
|
|
15
|
-
wordBreak: 'break-word',
|
|
16
|
-
textAlign: 'center',
|
|
17
|
-
margin: 0,
|
|
18
|
-
marginBottom: 12
|
|
19
|
-
};
|
|
20
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.Text, {
|
|
21
|
-
style: styles,
|
|
22
|
-
children: children
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
var _default = exports.default = BillingHeader2;
|
package/billing/Header3.js
DELETED
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _renderer = require("@react-pdf/renderer");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
const BillingHeader3 = _ref => {
|
|
10
|
-
let {
|
|
11
|
-
children,
|
|
12
|
-
fontWeightNormal,
|
|
13
|
-
noMarginBottom,
|
|
14
|
-
paddingBottom
|
|
15
|
-
} = _ref;
|
|
16
|
-
const styles = {
|
|
17
|
-
fontSize: 14,
|
|
18
|
-
lineHeight: 1.25,
|
|
19
|
-
wordBreak: 'break-word',
|
|
20
|
-
fontWeight: 'bold',
|
|
21
|
-
marginBottom: 8
|
|
22
|
-
};
|
|
23
|
-
if (fontWeightNormal) {
|
|
24
|
-
styles.fontWeight = 'normal';
|
|
25
|
-
}
|
|
26
|
-
if (noMarginBottom) {
|
|
27
|
-
styles.marginBottom = 0;
|
|
28
|
-
}
|
|
29
|
-
if (paddingBottom) {
|
|
30
|
-
styles.paddingBottom = 8;
|
|
31
|
-
}
|
|
32
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.Text, {
|
|
33
|
-
style: styles,
|
|
34
|
-
children: children
|
|
35
|
-
});
|
|
36
|
-
};
|
|
37
|
-
var _default = exports.default = BillingHeader3;
|
package/billing/Paragraph.js
DELETED
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _renderer = require("@react-pdf/renderer");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
const BillingParagraph = _ref => {
|
|
10
|
-
let {
|
|
11
|
-
children,
|
|
12
|
-
marginRight,
|
|
13
|
-
justifyContentBetween
|
|
14
|
-
} = _ref;
|
|
15
|
-
const styles = {
|
|
16
|
-
margin: 0,
|
|
17
|
-
display: 'flex',
|
|
18
|
-
flexDirection: 'row',
|
|
19
|
-
wordBreak: 'break-word',
|
|
20
|
-
overflowWrap: 'break-word'
|
|
21
|
-
};
|
|
22
|
-
if (marginRight) {
|
|
23
|
-
styles.marginRight = 16;
|
|
24
|
-
}
|
|
25
|
-
if (justifyContentBetween) {
|
|
26
|
-
styles.justifyContent = 'space-between';
|
|
27
|
-
}
|
|
28
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
|
|
29
|
-
style: styles,
|
|
30
|
-
children: children
|
|
31
|
-
});
|
|
32
|
-
};
|
|
33
|
-
var _default = exports.default = BillingParagraph;
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _renderer = require("@react-pdf/renderer");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
const BillingParagraphGroup = _ref => {
|
|
10
|
-
let {
|
|
11
|
-
children
|
|
12
|
-
} = _ref;
|
|
13
|
-
const styles = {
|
|
14
|
-
display: 'flex',
|
|
15
|
-
flexDirection: 'row'
|
|
16
|
-
};
|
|
17
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
|
|
18
|
-
style: styles,
|
|
19
|
-
children: children
|
|
20
|
-
});
|
|
21
|
-
};
|
|
22
|
-
var _default = exports.default = BillingParagraphGroup;
|
package/billing/ParagraphText.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _renderer = require("@react-pdf/renderer");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
const BillingParagraphText = _ref => {
|
|
10
|
-
let {
|
|
11
|
-
children,
|
|
12
|
-
fontWeightBold
|
|
13
|
-
} = _ref;
|
|
14
|
-
const styles = {
|
|
15
|
-
fontSize: 12,
|
|
16
|
-
lineHeight: 1.5
|
|
17
|
-
};
|
|
18
|
-
if (fontWeightBold) {
|
|
19
|
-
styles.fontWeight = 'bold';
|
|
20
|
-
}
|
|
21
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.Text, {
|
|
22
|
-
style: styles,
|
|
23
|
-
children: children
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
var _default = exports.default = BillingParagraphText;
|
package/billing/Section.js
DELETED
|
@@ -1,50 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _renderer = require("@react-pdf/renderer");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
const BillingSection = _ref => {
|
|
10
|
-
let {
|
|
11
|
-
children,
|
|
12
|
-
theme,
|
|
13
|
-
backgroundReverse,
|
|
14
|
-
noPadding,
|
|
15
|
-
noMarginBottom,
|
|
16
|
-
paddingS,
|
|
17
|
-
marginBottomS,
|
|
18
|
-
flexGrow
|
|
19
|
-
} = _ref;
|
|
20
|
-
const styles = {
|
|
21
|
-
backgroundColor: theme.bgColor1,
|
|
22
|
-
borderRadius: 16,
|
|
23
|
-
color: theme.fontOnBg,
|
|
24
|
-
padding: 12,
|
|
25
|
-
marginBottom: 16
|
|
26
|
-
};
|
|
27
|
-
if (backgroundReverse) {
|
|
28
|
-
styles.backgroundColor = theme.bgColor2;
|
|
29
|
-
}
|
|
30
|
-
if (noPadding) {
|
|
31
|
-
styles.padding = 0;
|
|
32
|
-
}
|
|
33
|
-
if (noMarginBottom) {
|
|
34
|
-
styles.marginBottom = 0;
|
|
35
|
-
}
|
|
36
|
-
if (paddingS) {
|
|
37
|
-
styles.padding = 8;
|
|
38
|
-
}
|
|
39
|
-
if (marginBottomS) {
|
|
40
|
-
styles.marginBottom = 12;
|
|
41
|
-
}
|
|
42
|
-
if (flexGrow) {
|
|
43
|
-
styles.flexGrow = 1;
|
|
44
|
-
}
|
|
45
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
|
|
46
|
-
style: styles,
|
|
47
|
-
children: children
|
|
48
|
-
});
|
|
49
|
-
};
|
|
50
|
-
var _default = exports.default = BillingSection;
|
package/billing/SectionBody.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _renderer = require("@react-pdf/renderer");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
const BillingSectionBody = _ref => {
|
|
10
|
-
let {
|
|
11
|
-
children
|
|
12
|
-
} = _ref;
|
|
13
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
|
|
14
|
-
children: children
|
|
15
|
-
});
|
|
16
|
-
};
|
|
17
|
-
var _default = exports.default = BillingSectionBody;
|
package/billing/SectionHeader.js
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = void 0;
|
|
7
|
-
var _renderer = require("@react-pdf/renderer");
|
|
8
|
-
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
|
-
const BillingSectionHeader = _ref => {
|
|
10
|
-
let {
|
|
11
|
-
children,
|
|
12
|
-
inline
|
|
13
|
-
} = _ref;
|
|
14
|
-
const styles = {};
|
|
15
|
-
if (inline) {
|
|
16
|
-
styles.display = 'flex';
|
|
17
|
-
styles.justifyContent = 'space-between';
|
|
18
|
-
styles.flexDirection = 'row';
|
|
19
|
-
styles.alignItems = 'center';
|
|
20
|
-
}
|
|
21
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_renderer.View, {
|
|
22
|
-
style: styles,
|
|
23
|
-
children: children
|
|
24
|
-
});
|
|
25
|
-
};
|
|
26
|
-
var _default = exports.default = BillingSectionHeader;
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
import { useContext } from 'react';
|
|
2
|
-
import { Document, Page, PDFViewer, StyleSheet } from '@react-pdf/renderer';
|
|
3
|
-
import { ThemeContext } from 'styled-components';
|
|
4
|
-
import BillingBarChart from '../BarChart';
|
|
5
|
-
|
|
6
|
-
export default {
|
|
7
|
-
title: 'billing/BillingBarChart',
|
|
8
|
-
component: BillingBarChart,
|
|
9
|
-
argTypes: {
|
|
10
|
-
theme: { description: 'Provide theme styles for components to use' },
|
|
11
|
-
percentage: {
|
|
12
|
-
description: 'Affects the width of the bar, the maximum value is 100',
|
|
13
|
-
},
|
|
14
|
-
success: { description: 'Affects the backgroundColor of the bar' },
|
|
15
|
-
warning: { description: 'Affects the backgroundColor of the bar' },
|
|
16
|
-
danger: { description: 'Affects the backgroundColor of the bar' },
|
|
17
|
-
},
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
export const Default = (args) => {
|
|
21
|
-
const theme = useContext(ThemeContext);
|
|
22
|
-
|
|
23
|
-
const styles = StyleSheet.create({
|
|
24
|
-
page: {
|
|
25
|
-
backgroundColor: theme.bgColor2,
|
|
26
|
-
padding: 8,
|
|
27
|
-
},
|
|
28
|
-
});
|
|
29
|
-
|
|
30
|
-
return (
|
|
31
|
-
<PDFViewer showToolbar={false}>
|
|
32
|
-
<Document>
|
|
33
|
-
<Page size='A4' style={styles.page}>
|
|
34
|
-
<BillingBarChart {...args} theme={theme} marginTop />
|
|
35
|
-
</Page>
|
|
36
|
-
</Document>
|
|
37
|
-
</PDFViewer>
|
|
38
|
-
);
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
Default.args = {
|
|
42
|
-
success: true,
|
|
43
|
-
warning: false,
|
|
44
|
-
danger: false,
|
|
45
|
-
percentage: 100,
|
|
46
|
-
};
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
PDFViewer,
|
|
3
|
-
Document,
|
|
4
|
-
Page,
|
|
5
|
-
StyleSheet,
|
|
6
|
-
Text,
|
|
7
|
-
Font,
|
|
8
|
-
} from '@react-pdf/renderer';
|
|
9
|
-
import { useContext } from 'react';
|
|
10
|
-
import { ThemeContext } from 'styled-components';
|
|
11
|
-
import { BillingGrid, BillingColumn } from '../Grid';
|
|
12
|
-
import NanumGothicBold from '../../assets/font/nanumGothic/NanumGothic-Bold.ttf';
|
|
13
|
-
import NanumGothicExtraBold from '../../assets/font/nanumGothic/NanumGothic-ExtraBold.ttf';
|
|
14
|
-
import NanumGothicRegular from '../../assets/font/nanumGothic/NanumGothic-Regular.ttf';
|
|
15
|
-
|
|
16
|
-
export default {
|
|
17
|
-
title: 'billing/BillingGrid',
|
|
18
|
-
component: BillingGrid,
|
|
19
|
-
subComponent: BillingColumn,
|
|
20
|
-
argTypes: {
|
|
21
|
-
children: { description: 'A BillingColumn component must be passed in.' },
|
|
22
|
-
},
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
export const Default = (args) => {
|
|
26
|
-
const theme = useContext(ThemeContext);
|
|
27
|
-
Font.register({
|
|
28
|
-
family: 'Nanum Gothic',
|
|
29
|
-
fonts: [
|
|
30
|
-
{ src: NanumGothicBold },
|
|
31
|
-
{ src: NanumGothicExtraBold },
|
|
32
|
-
{ src: NanumGothicRegular },
|
|
33
|
-
],
|
|
34
|
-
});
|
|
35
|
-
|
|
36
|
-
const styles = StyleSheet.create({
|
|
37
|
-
page: {
|
|
38
|
-
fontFamily: 'Nanum Gothic',
|
|
39
|
-
color: '#ffffff',
|
|
40
|
-
backgroundColor: theme.bgColor2,
|
|
41
|
-
padding: 8,
|
|
42
|
-
},
|
|
43
|
-
});
|
|
44
|
-
return (
|
|
45
|
-
<PDFViewer style={{ width: '100%' }}>
|
|
46
|
-
<Document>
|
|
47
|
-
<Page size='A4' style={styles.page}>
|
|
48
|
-
<BillingGrid {...args}>
|
|
49
|
-
<BillingColumn>
|
|
50
|
-
<Text>children content</Text>
|
|
51
|
-
</BillingColumn>
|
|
52
|
-
</BillingGrid>
|
|
53
|
-
</Page>
|
|
54
|
-
</Document>
|
|
55
|
-
</PDFViewer>
|
|
56
|
-
);
|
|
57
|
-
};
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Document,
|
|
3
|
-
Page,
|
|
4
|
-
PDFViewer,
|
|
5
|
-
StyleSheet,
|
|
6
|
-
View,
|
|
7
|
-
Font,
|
|
8
|
-
} from "@react-pdf/renderer";
|
|
9
|
-
import BillingHeader2 from "../Header2";
|
|
10
|
-
import { useContext } from "react";
|
|
11
|
-
import { ThemeContext } from "styled-components";
|
|
12
|
-
import NanumGothicBold from "../../assets/font/nanumGothic/NanumGothic-Bold.ttf";
|
|
13
|
-
import NanumGothicExtraBold from "../../assets/font/nanumGothic/NanumGothic-ExtraBold.ttf";
|
|
14
|
-
import NanumGothicRegular from "../../assets/font/nanumGothic/NanumGothic-Regular.ttf";
|
|
15
|
-
|
|
16
|
-
export default {
|
|
17
|
-
title: "billing/header2",
|
|
18
|
-
component: BillingHeader2,
|
|
19
|
-
argTypes: {
|
|
20
|
-
children: {
|
|
21
|
-
description:
|
|
22
|
-
"For displaying text. Supports nesting of other Text or Link components to create inline styling.",
|
|
23
|
-
},
|
|
24
|
-
},
|
|
25
|
-
};
|
|
26
|
-
|
|
27
|
-
export const Default = (args) => {
|
|
28
|
-
const theme = useContext(ThemeContext);
|
|
29
|
-
Font.register({
|
|
30
|
-
family: "Nanum Gothic",
|
|
31
|
-
fonts: [
|
|
32
|
-
{ src: NanumGothicBold },
|
|
33
|
-
{ src: NanumGothicExtraBold },
|
|
34
|
-
{ src: NanumGothicRegular },
|
|
35
|
-
],
|
|
36
|
-
});
|
|
37
|
-
|
|
38
|
-
const styles = StyleSheet.create({
|
|
39
|
-
page: {
|
|
40
|
-
fontFamily: "Nanum Gothic",
|
|
41
|
-
color: "#ffffff",
|
|
42
|
-
backgroundColor: theme.bgColor2,
|
|
43
|
-
padding: 8,
|
|
44
|
-
},
|
|
45
|
-
});
|
|
46
|
-
|
|
47
|
-
return (
|
|
48
|
-
<PDFViewer style={{ width: "100%" }}>
|
|
49
|
-
<Document>
|
|
50
|
-
<Page size="A4" style={styles.page}>
|
|
51
|
-
<View>
|
|
52
|
-
<BillingHeader2 {...args}></BillingHeader2>
|
|
53
|
-
</View>
|
|
54
|
-
</Page>
|
|
55
|
-
</Document>
|
|
56
|
-
</PDFViewer>
|
|
57
|
-
);
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
Default.args = {
|
|
61
|
-
children: "BillingHeader2 content",
|
|
62
|
-
};
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import {
|
|
2
|
-
Document,
|
|
3
|
-
Page,
|
|
4
|
-
PDFViewer,
|
|
5
|
-
StyleSheet,
|
|
6
|
-
View,
|
|
7
|
-
Font,
|
|
8
|
-
} from "@react-pdf/renderer";
|
|
9
|
-
import BillingHeader3 from "../Header3";
|
|
10
|
-
import { useContext } from "react";
|
|
11
|
-
import { ThemeContext } from "styled-components";
|
|
12
|
-
import NanumGothicBold from "../../assets/font/nanumGothic/NanumGothic-Bold.ttf";
|
|
13
|
-
import NanumGothicExtraBold from "../../assets/font/nanumGothic/NanumGothic-ExtraBold.ttf";
|
|
14
|
-
import NanumGothicRegular from "../../assets/font/nanumGothic/NanumGothic-Regular.ttf";
|
|
15
|
-
export default {
|
|
16
|
-
title: "billing/header3",
|
|
17
|
-
component: BillingHeader3,
|
|
18
|
-
argTypes: {
|
|
19
|
-
children: {
|
|
20
|
-
description:
|
|
21
|
-
"For displaying text. Supports nesting of other Text or Link components to create inline styling.",
|
|
22
|
-
},
|
|
23
|
-
fontWeightNormal: { description: "Style variant" },
|
|
24
|
-
noMarginBottom: { description: "Style variant" },
|
|
25
|
-
paddingBottom: { description: "Style variant" },
|
|
26
|
-
},
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export const Default = (args) => {
|
|
30
|
-
const theme = useContext(ThemeContext);
|
|
31
|
-
Font.register({
|
|
32
|
-
family: "Nanum Gothic",
|
|
33
|
-
fonts: [
|
|
34
|
-
{ src: NanumGothicBold },
|
|
35
|
-
{ src: NanumGothicExtraBold },
|
|
36
|
-
{ src: NanumGothicRegular },
|
|
37
|
-
],
|
|
38
|
-
});
|
|
39
|
-
const styles = StyleSheet.create({
|
|
40
|
-
page: {
|
|
41
|
-
fontFamily: "Nanum Gothic",
|
|
42
|
-
color: "#ffffff",
|
|
43
|
-
backgroundColor: theme.bgColor2,
|
|
44
|
-
padding: 8,
|
|
45
|
-
},
|
|
46
|
-
view: {
|
|
47
|
-
border: "1px solid #ffffff",
|
|
48
|
-
},
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
return (
|
|
52
|
-
<PDFViewer style={{ width: "100%" }}>
|
|
53
|
-
<Document>
|
|
54
|
-
<Page size="A4" style={styles.page}>
|
|
55
|
-
<View style={styles.view}>
|
|
56
|
-
<BillingHeader3 {...args}></BillingHeader3>
|
|
57
|
-
</View>
|
|
58
|
-
</Page>
|
|
59
|
-
</Document>
|
|
60
|
-
</PDFViewer>
|
|
61
|
-
);
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
Default.args = {
|
|
65
|
-
children: "BillingHeader3 content",
|
|
66
|
-
fontWeightNormal: false,
|
|
67
|
-
noMarginBottom: false,
|
|
68
|
-
paddingBottom: false,
|
|
69
|
-
};
|