@stack-spot/portal-components 1.3.5-rc → 1.4.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.
- package/CHANGELOG.md +15 -0
- package/dist/components/ErrorFeedback.d.ts +15 -2
- package/dist/components/ErrorFeedback.d.ts.map +1 -1
- package/dist/components/ErrorFeedback.js +6 -3
- package/dist/components/ErrorFeedback.js.map +1 -1
- package/package.json +1 -1
- package/src/components/ErrorFeedback.tsx +32 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## [1.4.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v1.3.3...portal-components@v1.4.0) (2024-06-25)
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
### Features
|
|
7
|
+
|
|
8
|
+
* custom feedback error ([b065a50](https://github.com/stack-spot/portal-commons/commit/b065a50f861a5f8f850b239038b0cbcab74b9cee))
|
|
9
|
+
* custom feedback error ([b065a50](https://github.com/stack-spot/portal-commons/commit/b065a50f861a5f8f850b239038b0cbcab74b9cee))
|
|
10
|
+
|
|
11
|
+
## [1.3.3](https://github.com/stack-spot/portal-commons/compare/portal-components@v1.3.2...portal-components@v1.3.3) (2024-06-25)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Bug Fixes
|
|
15
|
+
|
|
16
|
+
* notifications ([97776bd](https://github.com/stack-spot/portal-commons/commit/97776bd9799fa7492091247dd31fcae1bf900f37))
|
|
17
|
+
|
|
3
18
|
## [1.3.2](https://github.com/stack-spot/portal-commons/compare/portal-components@v1.3.0...portal-components@v1.3.1) (2024-06-20)
|
|
4
19
|
|
|
5
20
|
## [1.3.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v1.2.0...portal-components@v1.3.1) (2024-06-19)
|
|
@@ -1,16 +1,29 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
export interface ErrorDescription {
|
|
2
3
|
/**
|
|
3
4
|
* The HTTP Error code if this is a network error.
|
|
4
5
|
*/
|
|
5
6
|
code?: number;
|
|
6
7
|
/**
|
|
7
|
-
* The error message.
|
|
8
|
+
* The error message. This is only visible if debug is true.
|
|
8
9
|
*/
|
|
9
10
|
message?: string;
|
|
10
11
|
/**
|
|
11
12
|
* Whether or not the application is in debug mode.
|
|
12
13
|
*/
|
|
13
14
|
debug?: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* The title for this error. Overwrites anything preset by "code".
|
|
17
|
+
*/
|
|
18
|
+
title?: string;
|
|
19
|
+
/**
|
|
20
|
+
* The content for this error. Overwrites anything preset by "code".
|
|
21
|
+
*/
|
|
22
|
+
body?: React.ReactNode;
|
|
23
|
+
/**
|
|
24
|
+
* The image for the error. Overwrites anything preset by "code".
|
|
25
|
+
*/
|
|
26
|
+
image?: React.ReactElement;
|
|
14
27
|
}
|
|
15
28
|
/**
|
|
16
29
|
* A box with an icon and an error message. This is used for giving error feedbacks to the user.
|
|
@@ -19,5 +32,5 @@ export interface ErrorDescription {
|
|
|
19
32
|
*
|
|
20
33
|
* @param options the error code, the error message and whether or not the application is in debug mode.
|
|
21
34
|
*/
|
|
22
|
-
export declare const ErrorFeedback: ({ code, message, debug }: ErrorDescription) => import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
export declare const ErrorFeedback: ({ code, message, debug, title, body, image }: ErrorDescription) => import("react/jsx-runtime").JSX.Element;
|
|
23
36
|
//# sourceMappingURL=ErrorFeedback.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorFeedback.d.ts","sourceRoot":"","sources":["../../src/components/ErrorFeedback.tsx"],"names":[],"mappings":"AAoBA,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ErrorFeedback.d.ts","sourceRoot":"","sources":["../../src/components/ErrorFeedback.tsx"],"names":[],"mappings":";AAoBA,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC5B;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,iDAAsD,gBAAgB,4CAyD/F,CAAA"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { Box, Button, Container, Flex, LinkBox, Text } from '@citric/core';
|
|
3
3
|
import { useTranslate } from '@stack-spot/portal-translate';
|
|
4
4
|
import { useState } from 'react';
|
|
@@ -23,10 +23,13 @@ const imageMap = {
|
|
|
23
23
|
*
|
|
24
24
|
* @param options the error code, the error message and whether or not the application is in debug mode.
|
|
25
25
|
*/
|
|
26
|
-
export const ErrorFeedback = ({ code = 0, message, debug }) => {
|
|
26
|
+
export const ErrorFeedback = ({ code = 0, message, debug, title, body, image }) => {
|
|
27
27
|
const t = useTranslate(dictionary);
|
|
28
28
|
const [showDetails, setShowDetails] = useState(false);
|
|
29
|
-
|
|
29
|
+
function renderBody() {
|
|
30
|
+
return typeof body === 'string' ? _jsx(Text, { appearance: "body1", mt: 5, colorScheme: "inverse", children: body }) : body;
|
|
31
|
+
}
|
|
32
|
+
return (_jsx(Box, { bg: "light.400", children: _jsx(Container, { children: _jsxs(Flex, { alignItems: "center", sx: { padding: 12 }, children: [_jsx(Box, { width: 5, sx: { display: ['block', 'none'] }, children: _jsx(Flex, { justifyContent: "flex-end", pr: 20, children: image ?? imageMap[code] ?? _jsx(ServerError, { style: imageStyle }) }) }), _jsxs(Box, { width: [7, 12], children: [_jsx(LinkBox, { href: "/", children: _jsx(Logo, { style: { width: '130px', height: '30px' } }) }), _jsxs(Box, { w: [7, 12], children: [_jsxs(Text, { appearance: "h4", mt: 5, colorScheme: "inverse", children: [(code && !title) ? `${code}. ` : '', _jsx(Text, { appearance: "h4", as: "span", colorScheme: "light.700", children: title ?? t[`${code}.title`] })] }), body ? renderBody() : (_jsxs(_Fragment, { children: [_jsx(Text, { appearance: "body1", mt: 5, colorScheme: "inverse", children: t[`${code}.description`] }), _jsx(Text, { appearance: "body1", colorScheme: "light.700", mt: 1, children: t[`${code}.help`] })] })), debug && message && (_jsx(Button, { appearance: "outlined", colorScheme: "inverse", onClick: () => setShowDetails(v => !v), children: showDetails ? t.hideDetails : t.showDetails })), showDetails && (_jsx(Box, { bg: "danger", mt: 8, p: 4, sx: { borderRadius: '5px' }, children: _jsx(Text, { appearance: "microtext1", colorScheme: "danger.contrastText", children: message }) }))] })] })] }) }) }));
|
|
30
33
|
};
|
|
31
34
|
const dictionary = {
|
|
32
35
|
en: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorFeedback.js","sourceRoot":"","sources":["../../src/components/ErrorFeedback.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC1E,OAAO,EAAc,YAAY,EAAE,MAAM,8BAA8B,CAAA;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAC5C,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAA;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAA;AAExD,MAAM,UAAU,GAAwB;IACtC,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,OAAO;CAChB,CAAA;AAED,MAAM,QAAQ,GAAuC;IACnD,GAAG,EAAE,KAAC,eAAe,IAAC,KAAK,EAAE,UAAU,GAAI;IAC3C,GAAG,EAAE,KAAC,SAAS,IAAC,KAAK,EAAE,UAAU,GAAI;IACrC,GAAG,EAAE,KAAC,QAAQ,IAAC,KAAK,EAAE,UAAU,GAAI;CACrC,CAAA;
|
|
1
|
+
{"version":3,"file":"ErrorFeedback.js","sourceRoot":"","sources":["../../src/components/ErrorFeedback.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -24,13 +24,25 @@ export interface ErrorDescription {
|
|
|
24
24
|
*/
|
|
25
25
|
code?: number,
|
|
26
26
|
/**
|
|
27
|
-
* The error message.
|
|
27
|
+
* The error message. This is only visible if debug is true.
|
|
28
28
|
*/
|
|
29
29
|
message?: string,
|
|
30
30
|
/**
|
|
31
31
|
* Whether or not the application is in debug mode.
|
|
32
32
|
*/
|
|
33
33
|
debug?: boolean,
|
|
34
|
+
/**
|
|
35
|
+
* The title for this error. Overwrites anything preset by "code".
|
|
36
|
+
*/
|
|
37
|
+
title?: string,
|
|
38
|
+
/**
|
|
39
|
+
* The content for this error. Overwrites anything preset by "code".
|
|
40
|
+
*/
|
|
41
|
+
body?: React.ReactNode,
|
|
42
|
+
/**
|
|
43
|
+
* The image for the error. Overwrites anything preset by "code".
|
|
44
|
+
*/
|
|
45
|
+
image?: React.ReactElement,
|
|
34
46
|
}
|
|
35
47
|
|
|
36
48
|
/**
|
|
@@ -40,17 +52,21 @@ export interface ErrorDescription {
|
|
|
40
52
|
*
|
|
41
53
|
* @param options the error code, the error message and whether or not the application is in debug mode.
|
|
42
54
|
*/
|
|
43
|
-
export const ErrorFeedback = ({ code = 0, message, debug }: ErrorDescription) => {
|
|
55
|
+
export const ErrorFeedback = ({ code = 0, message, debug, title, body, image }: ErrorDescription) => {
|
|
44
56
|
const t = useTranslate(dictionary) as Record<string, string>
|
|
45
57
|
const [showDetails, setShowDetails] = useState(false)
|
|
46
58
|
|
|
59
|
+
function renderBody() {
|
|
60
|
+
return typeof body === 'string' ? <Text appearance="body1" mt={5} colorScheme="inverse">{body}</Text> : body
|
|
61
|
+
}
|
|
62
|
+
|
|
47
63
|
return (
|
|
48
64
|
<Box bg="light.400">
|
|
49
65
|
<Container>
|
|
50
66
|
<Flex alignItems="center" sx={{ padding: 12 }}>
|
|
51
67
|
<Box width={5} sx={{ display: ['block', 'none'] }}>
|
|
52
68
|
<Flex justifyContent="flex-end" pr={20}>
|
|
53
|
-
{imageMap[code] ?? <ServerError style={imageStyle} />}
|
|
69
|
+
{image ?? imageMap[code] ?? <ServerError style={imageStyle} />}
|
|
54
70
|
</Flex>
|
|
55
71
|
</Box>
|
|
56
72
|
<Box width={[7, 12]}>
|
|
@@ -59,19 +75,24 @@ export const ErrorFeedback = ({ code = 0, message, debug }: ErrorDescription) =>
|
|
|
59
75
|
</LinkBox>
|
|
60
76
|
<Box w={[7, 12]}>
|
|
61
77
|
<Text appearance="h4" mt={5} colorScheme="inverse">
|
|
62
|
-
{code ? `${code}. ` : ''}
|
|
78
|
+
{(code && !title) ? `${code}. ` : ''}
|
|
63
79
|
<Text appearance="h4" as="span" colorScheme="light.700">
|
|
64
|
-
{t[`${code}.title`]}
|
|
80
|
+
{title ?? t[`${code}.title`]}
|
|
65
81
|
</Text>
|
|
66
82
|
</Text>
|
|
67
83
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
84
|
+
{body ? renderBody() : (
|
|
85
|
+
<>
|
|
86
|
+
<Text appearance="body1" mt={5} colorScheme="inverse">
|
|
87
|
+
{t[`${code}.description`]}
|
|
88
|
+
</Text>
|
|
71
89
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
90
|
+
<Text appearance="body1" colorScheme="light.700" mt={1}>
|
|
91
|
+
{t[`${code}.help`]}
|
|
92
|
+
</Text>
|
|
93
|
+
</>
|
|
94
|
+
)}
|
|
95
|
+
|
|
75
96
|
{debug && message && (
|
|
76
97
|
<Button appearance="outlined" colorScheme="inverse" onClick={() => setShowDetails(v => !v)}>
|
|
77
98
|
{showDetails ? t.hideDetails : t.showDetails}
|