@yourdash/uikit 1.0.23 → 1.0.24
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/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright ©2024 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
|
|
3
|
-
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
|
7
|
-
import React from "react";
|
|
8
|
-
import styles from "./buttonCombo.module.scss";
|
|
9
|
-
|
|
10
|
-
const ButtonCombo: React.FC<{ children: React.ReactNode[] }> = ({ children }) => {
|
|
11
|
-
return <div className={clippy(styles.component)}>{children}</div>;
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
export default ButtonCombo;
|
|
1
|
+
/*
|
|
2
|
+
* Copyright ©2024 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
|
|
3
|
+
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
|
7
|
+
import React from "react";
|
|
8
|
+
import styles from "./buttonCombo.module.scss";
|
|
9
|
+
|
|
10
|
+
const ButtonCombo: React.FC<{ children: React.ReactNode[]; className?: string }> = ({ children, className }) => {
|
|
11
|
+
return <div className={clippy(styles.component, className)}>{children}</div>;
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export default ButtonCombo;
|
|
@@ -1,83 +1,83 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
|
|
3
|
-
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import Icon from "../icon/icon.tsx";
|
|
7
|
-
import { UKIcon } from "../icon/iconDictionary.ts";
|
|
8
|
-
import styles from "./image.module.scss";
|
|
9
|
-
import { FC, useEffect, useRef, useState } from "react";
|
|
10
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
|
11
|
-
|
|
12
|
-
const Image: FC<{
|
|
13
|
-
src: string;
|
|
14
|
-
accessibleLabel: string;
|
|
15
|
-
containerClassName?: string;
|
|
16
|
-
className?: string;
|
|
17
|
-
disableLazyLoading?: boolean;
|
|
18
|
-
noRounding?: boolean;
|
|
19
|
-
width?: number;
|
|
20
|
-
height?: number;
|
|
21
|
-
}> = (props) => {
|
|
22
|
-
const ref = useRef<HTMLDivElement>(null);
|
|
23
|
-
const [src, setSrc] = useState<string>(props.src);
|
|
24
|
-
const [loaded, setLoaded] = useState<boolean>(false);
|
|
25
|
-
const [hasFailed, setHasFailed] = useState<boolean>(false);
|
|
26
|
-
const [backgroundSize, setBackgroundSize] = useState<number>(0);
|
|
27
|
-
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
const rc = ref.current;
|
|
30
|
-
|
|
31
|
-
if (!rc) {
|
|
32
|
-
return;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
setTimeout(() => {
|
|
36
|
-
const bounds = rc.getBoundingClientRect();
|
|
37
|
-
|
|
38
|
-
setBackgroundSize(bounds.height > bounds.width ? bounds.height : bounds.width);
|
|
39
|
-
}, 0);
|
|
40
|
-
}, [src]);
|
|
41
|
-
|
|
42
|
-
useEffect(() => {
|
|
43
|
-
setHasFailed(false);
|
|
44
|
-
setLoaded(false);
|
|
45
|
-
}, [src]);
|
|
46
|
-
|
|
47
|
-
useEffect(() => {
|
|
48
|
-
if (props.src !== src) {
|
|
49
|
-
setSrc(props.src);
|
|
50
|
-
}
|
|
51
|
-
}, [props.src]);
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<div
|
|
55
|
-
ref={ref}
|
|
56
|
-
className={clippy(styles.componentContainer, props.containerClassName, !loaded && styles.loading, hasFailed && styles.serverError)}
|
|
57
|
-
style={{
|
|
58
|
-
// @ts-ignore
|
|
59
|
-
"--background-size": backgroundSize + "px",
|
|
60
|
-
}}
|
|
61
|
-
>
|
|
62
|
-
{!hasFailed ? (
|
|
63
|
-
<img
|
|
64
|
-
className={clippy(styles.component, props.className, loaded && styles.loaded, props.noRounding && styles.noRounding)}
|
|
65
|
-
draggable={false}
|
|
66
|
-
width={props.width}
|
|
67
|
-
height={props.height}
|
|
68
|
-
onError={() => setHasFailed(true)}
|
|
69
|
-
loading={props.disableLazyLoading ? "eager" : "lazy"}
|
|
70
|
-
alt={props.accessibleLabel}
|
|
71
|
-
onLoad={(e) => {
|
|
72
|
-
setLoaded(e.currentTarget.complete);
|
|
73
|
-
}}
|
|
74
|
-
src={src}
|
|
75
|
-
/>
|
|
76
|
-
) : (
|
|
77
|
-
<Icon icon={UKIcon.ServerError} />
|
|
78
|
-
)}
|
|
79
|
-
</div>
|
|
80
|
-
);
|
|
81
|
-
};
|
|
82
|
-
|
|
83
|
-
export default Image;
|
|
1
|
+
/*
|
|
2
|
+
* Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
|
|
3
|
+
* YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import Icon from "../icon/icon.tsx";
|
|
7
|
+
import { UKIcon } from "../icon/iconDictionary.ts";
|
|
8
|
+
import styles from "./image.module.scss";
|
|
9
|
+
import { FC, useEffect, useRef, useState } from "react";
|
|
10
|
+
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
|
11
|
+
|
|
12
|
+
const Image: FC<{
|
|
13
|
+
src: string;
|
|
14
|
+
accessibleLabel: string;
|
|
15
|
+
containerClassName?: string;
|
|
16
|
+
className?: string;
|
|
17
|
+
disableLazyLoading?: boolean;
|
|
18
|
+
noRounding?: boolean;
|
|
19
|
+
width?: number;
|
|
20
|
+
height?: number;
|
|
21
|
+
}> = (props) => {
|
|
22
|
+
const ref = useRef<HTMLDivElement>(null);
|
|
23
|
+
const [src, setSrc] = useState<string>(props.src);
|
|
24
|
+
const [loaded, setLoaded] = useState<boolean>(false);
|
|
25
|
+
const [hasFailed, setHasFailed] = useState<boolean>(false);
|
|
26
|
+
const [backgroundSize, setBackgroundSize] = useState<number>(0);
|
|
27
|
+
|
|
28
|
+
useEffect(() => {
|
|
29
|
+
const rc = ref.current;
|
|
30
|
+
|
|
31
|
+
if (!rc) {
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
setTimeout(() => {
|
|
36
|
+
const bounds = rc.getBoundingClientRect();
|
|
37
|
+
|
|
38
|
+
setBackgroundSize(bounds.height > bounds.width ? bounds.height : bounds.width);
|
|
39
|
+
}, 0);
|
|
40
|
+
}, [src]);
|
|
41
|
+
|
|
42
|
+
useEffect(() => {
|
|
43
|
+
setHasFailed(false);
|
|
44
|
+
setLoaded(false);
|
|
45
|
+
}, [src]);
|
|
46
|
+
|
|
47
|
+
useEffect(() => {
|
|
48
|
+
if (props.src !== src) {
|
|
49
|
+
setSrc(props.src);
|
|
50
|
+
}
|
|
51
|
+
}, [props.src]);
|
|
52
|
+
|
|
53
|
+
return (
|
|
54
|
+
<div
|
|
55
|
+
ref={ref}
|
|
56
|
+
className={clippy(styles.componentContainer, props.containerClassName, !loaded && styles.loading, hasFailed && styles.serverError)}
|
|
57
|
+
style={{
|
|
58
|
+
// @ts-ignore
|
|
59
|
+
"--background-size": backgroundSize + "px",
|
|
60
|
+
}}
|
|
61
|
+
>
|
|
62
|
+
{!hasFailed ? (
|
|
63
|
+
<img
|
|
64
|
+
className={clippy(styles.component, props.className, loaded && styles.loaded, props.noRounding && styles.noRounding)}
|
|
65
|
+
draggable={false}
|
|
66
|
+
width={props.width}
|
|
67
|
+
height={props.height}
|
|
68
|
+
onError={() => setHasFailed(true)}
|
|
69
|
+
loading={props.disableLazyLoading ? "eager" : "lazy"}
|
|
70
|
+
alt={props.accessibleLabel}
|
|
71
|
+
onLoad={(e) => {
|
|
72
|
+
setLoaded(e.currentTarget.complete);
|
|
73
|
+
}}
|
|
74
|
+
src={src}
|
|
75
|
+
/>
|
|
76
|
+
) : (
|
|
77
|
+
<Icon icon={UKIcon.ServerError} />
|
|
78
|
+
)}
|
|
79
|
+
</div>
|
|
80
|
+
);
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
export default Image;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
|
|
3
|
-
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import { UKIconType } from "../icon/iconDictionary.ts";
|
|
7
|
-
|
|
8
|
-
export default interface IToastAction {
|
|
9
|
-
label: string;
|
|
10
|
-
icon?: UKIconType;
|
|
11
|
-
onClick: () => void;
|
|
12
|
-
}
|
|
1
|
+
/*
|
|
2
|
+
* Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
|
|
3
|
+
* YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
import { UKIconType } from "../icon/iconDictionary.ts";
|
|
7
|
+
|
|
8
|
+
export default interface IToastAction {
|
|
9
|
+
label: string;
|
|
10
|
+
icon?: UKIconType;
|
|
11
|
+
onClick: () => void;
|
|
12
|
+
}
|
|
@@ -1,138 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import Card from "../../components/card/card.tsx";
|
|
3
|
-
import { UKIcon } from "../../components/icon/iconDictionary.ts";
|
|
4
|
-
import IconButton from "../../components/iconButton/iconButton.tsx";
|
|
5
|
-
import Image from "../../components/image/image.tsx";
|
|
6
|
-
import Heading from "../../components/heading/heading.tsx";
|
|
7
|
-
import Text from "../../components/text/text.tsx";
|
|
8
|
-
import ButtonWithIcon from "../../components/buttonWithIcon/buttonWithIcon.tsx";
|
|
9
|
-
import Button from "../../components/button/button.tsx";
|
|
10
|
-
import { Outlet } from "react-router";
|
|
11
|
-
import styles from "./onBoarding.module.scss";
|
|
12
|
-
import Flex from "../../components/flex/flex.tsx";
|
|
13
|
-
import clippy from "@yourdash/shared/web/helpers/clippy.ts";
|
|
14
|
-
|
|
15
|
-
const OnBoarding: React.FC<{
|
|
16
|
-
meta: { id: string };
|
|
17
|
-
pages: {
|
|
18
|
-
headerImage: string;
|
|
19
|
-
header: string;
|
|
20
|
-
body: string;
|
|
21
|
-
actions: { label: string; icon?: UKIcon; onClick: () => void; changeTo?: "next" | "previous" | "remain" | "completed" }[];
|
|
22
|
-
allowGoBack?: boolean;
|
|
23
|
-
}[];
|
|
24
|
-
}> = ({ pages, meta }) => {
|
|
25
|
-
const [currentPage, setCurrentPage] = React.useState<number>(0);
|
|
26
|
-
const page = pages[currentPage];
|
|
27
|
-
|
|
28
|
-
if (localStorage.getItem(`yourdash-application-visited-${meta.id}`) || currentPage > pages.length - 1) {
|
|
29
|
-
localStorage.setItem(`yourdash-application-visited-${meta.id}`, "true");
|
|
30
|
-
|
|
31
|
-
return <Outlet />;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<div className={styles.page}>
|
|
36
|
-
<Card
|
|
37
|
-
className={styles.card}
|
|
38
|
-
containerClassName={styles.cardContainer}
|
|
39
|
-
>
|
|
40
|
-
{page.allowGoBack && (
|
|
41
|
-
<IconButton
|
|
42
|
-
className={clippy(styles.goBackButton, "animate__animated animate__fadeInDown")}
|
|
43
|
-
accessibleLabel="Go back to the last page"
|
|
44
|
-
icon={UKIcon.ChevronLeft}
|
|
45
|
-
onClick={() => {
|
|
46
|
-
setCurrentPage(currentPage - 1);
|
|
47
|
-
}}
|
|
48
|
-
/>
|
|
49
|
-
)}
|
|
50
|
-
<Image
|
|
51
|
-
className={styles.headerImage}
|
|
52
|
-
src={page.headerImage}
|
|
53
|
-
accessibleLabel=""
|
|
54
|
-
/>
|
|
55
|
-
<Heading
|
|
56
|
-
className={styles.header}
|
|
57
|
-
text={page.header}
|
|
58
|
-
/>
|
|
59
|
-
<Text
|
|
60
|
-
className={styles.body}
|
|
61
|
-
text={page.body}
|
|
62
|
-
/>
|
|
63
|
-
<Flex
|
|
64
|
-
className={styles.actions}
|
|
65
|
-
direction="row"
|
|
66
|
-
>
|
|
67
|
-
{page.actions.map((action) => {
|
|
68
|
-
if (action.icon) {
|
|
69
|
-
return (
|
|
70
|
-
<>
|
|
71
|
-
<ButtonWithIcon
|
|
72
|
-
key={action.label}
|
|
73
|
-
className={clippy(styles.action, styles.actionWithIcon)}
|
|
74
|
-
text={action.label}
|
|
75
|
-
icon={action.icon}
|
|
76
|
-
onClick={() => {
|
|
77
|
-
action.onClick();
|
|
78
|
-
if (action.changeTo) {
|
|
79
|
-
switch (action.changeTo) {
|
|
80
|
-
case "next":
|
|
81
|
-
setCurrentPage(currentPage + 1);
|
|
82
|
-
break;
|
|
83
|
-
case "previous":
|
|
84
|
-
if (currentPage > 0) setCurrentPage(currentPage - 1);
|
|
85
|
-
break;
|
|
86
|
-
case "remain":
|
|
87
|
-
break;
|
|
88
|
-
case "completed":
|
|
89
|
-
setCurrentPage(pages.length + 1);
|
|
90
|
-
break;
|
|
91
|
-
default:
|
|
92
|
-
break;
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
}}
|
|
96
|
-
/>
|
|
97
|
-
</>
|
|
98
|
-
);
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
return (
|
|
102
|
-
<>
|
|
103
|
-
<Button
|
|
104
|
-
key={action.icon}
|
|
105
|
-
className={clippy(styles.action, styles.actionWithoutIcon, "animate__animated animate__fadeInUp")}
|
|
106
|
-
text={action.label}
|
|
107
|
-
onClick={() => {
|
|
108
|
-
action.onClick();
|
|
109
|
-
|
|
110
|
-
if (action.changeTo) {
|
|
111
|
-
switch (action.changeTo) {
|
|
112
|
-
case "next":
|
|
113
|
-
setCurrentPage(currentPage + 1);
|
|
114
|
-
break;
|
|
115
|
-
case "previous":
|
|
116
|
-
if (currentPage > 0) setCurrentPage(currentPage - 1);
|
|
117
|
-
break;
|
|
118
|
-
case "remain":
|
|
119
|
-
break;
|
|
120
|
-
case "completed":
|
|
121
|
-
setCurrentPage(pages.length + 1);
|
|
122
|
-
break;
|
|
123
|
-
default:
|
|
124
|
-
break;
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
}}
|
|
128
|
-
/>
|
|
129
|
-
</>
|
|
130
|
-
);
|
|
131
|
-
})}
|
|
132
|
-
</Flex>
|
|
133
|
-
</Card>
|
|
134
|
-
</div>
|
|
135
|
-
);
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
export default OnBoarding;
|