@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,6 +1,6 @@
1
1
  {
2
2
  "name": "@yourdash/uikit",
3
- "version": "1.0.23",
3
+ "version": "1.0.24",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "engines": {
@@ -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;