@yourdash/uikit 1.0.21 → 1.0.23

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.
Files changed (10) hide show
  1. package/package.json +1 -1
  2. package/src/components/buttonWithIcon/buttonWithIcon.module.scss +1 -1
  3. package/src/components/contextMenu/contextMenuRoot.module.scss +1 -1
  4. package/src/components/image/image.tsx +83 -83
  5. package/src/components/progressBar/progressBar.module.scss +1 -1
  6. package/src/components/tag/tag.module.scss +1 -1
  7. package/src/components/toast/toastAction.ts +12 -12
  8. package/src/theme/defaultTheme.module.scss +29 -29
  9. package/src/views/header/header.module.scss +1 -1
  10. package/views/onBoarding/onBoarding.tsx~ +138 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yourdash/uikit",
3
- "version": "1.0.21",
3
+ "version": "1.0.23",
4
4
  "license": "MIT",
5
5
  "type": "module",
6
6
  "engines": {
package/src/components/buttonWithIcon/buttonWithIcon.module.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @use "@yourdash/uikit/theme/themeValues" as *;
6
+ @use "@yourdash/uikit/src/theme/themeValues" as *;
7
7
 
8
8
  .component {
9
9
  display: flex;
package/src/components/contextMenu/contextMenuRoot.module.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @use "@yourdash/uikit/theme/themeValues" as *;
6
+ @use "@yourdash/uikit/src/theme/themeValues" as *;
7
7
 
8
8
  .component {
9
9
  position: fixed;
package/src/components/image/image.tsx CHANGED
@@ -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;
package/src/components/progressBar/progressBar.module.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @use "@yourdash/uikit/theme/themeValues" as *;
6
+ @use "@yourdash/uikit/src/theme/themeValues" as *;
7
7
 
8
8
  .component {
9
9
  padding: var(#{$theme+$padding});
package/src/components/tag/tag.module.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @use "@yourdash/uikit/theme/themeValues" as *;
6
+ @use "@yourdash/uikit/src/theme/themeValues" as *;
7
7
 
8
8
  .component {
9
9
  display: inline-block;
package/src/components/toast/toastAction.ts CHANGED
@@ -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
+ }
package/src/theme/defaultTheme.module.scss CHANGED
@@ -32,13 +32,13 @@
32
32
  #{$theme+$subcolor}: #bbbbbb;
33
33
  #{$theme+$background}: #222222;
34
34
  #{$theme+$accent}: #768ce7;
35
- #{$theme+$border}: 0.125rem solid #444444;
35
+ #{$theme+$border}: 1px solid #555555;
36
36
  #{$theme+$radius}: 1rem;
37
37
  #{$theme+$padding}: 1rem;
38
38
  #{$theme+$gap}: 0.5rem;
39
39
  #{$theme+$transition}: all 200ms ease-in-out;
40
40
  #{$theme+$transition+$transition}: 200ms ease-in-out;
41
- #{$theme+$separator+$size}: 0.125rem;
41
+ #{$theme+$separator+$size}: 1px;
42
42
  #{$theme+$separator+$color}: #444444;
43
43
  #{$theme+$scrollbar+$width}: 0.4rem;
44
44
  #{$theme+$scrollbar+$radius}: 0.1rem;
@@ -60,7 +60,7 @@
60
60
  // input
61
61
  #{$theme+$input+$color}: #ffffff;
62
62
  #{$theme+$input+$background}: #222222;
63
- #{$theme+$input+$border}: 0.125rem solid #444444;
63
+ #{$theme+$input+$border}: 1px solid #444444;
64
64
  #{$theme+$input+$radius}: 0.5rem;
65
65
  #{$theme+$input+$height}: 2rem;
66
66
  #{$theme+$input+$padding+$horizontal}: 0.5rem;
@@ -68,12 +68,12 @@
68
68
  // focus
69
69
  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
70
70
  #{$theme}#{$input}#{$focus}#{$background}: #333333;
71
- #{$theme}#{$input}#{$focus}#{$border}: 0.125rem solid #555555;
71
+ #{$theme}#{$input}#{$focus}#{$border}: 1px solid #666666;
72
72
 
73
73
  // button
74
74
  #{$theme}#{$button}#{$color}: #ffffff;
75
75
  #{$theme}#{$button}#{$background}: #444444;
76
- #{$theme}#{$button}#{$border}: 0.125rem solid #555555;
76
+ #{$theme}#{$button}#{$border}: 1px solid #666666;
77
77
  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
78
78
  #{$theme}#{$button}#{$font}#{$weight}: 400;
79
79
  #{$theme}#{$button}#{$radius}: 0.5rem;
@@ -82,13 +82,13 @@
82
82
  // hover
83
83
  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
84
84
  #{$theme}#{$button}#{$hover}#{$background}: #555555;
85
- #{$theme}#{$button}#{$hover}#{$border}: 0.125rem solid #666666;
85
+ #{$theme}#{$button}#{$hover}#{$border}: 1px solid #666666;
86
86
  #{$theme}#{$button}#{$hover}#{$radius}: 0.5rem;
87
87
  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
88
88
  // active
89
89
  #{$theme}#{$button}#{$active}#{$color}: #000000;
90
90
  #{$theme}#{$button}#{$active}#{$background}: #666666;
91
- #{$theme}#{$button}#{$active}#{$border}: 0.125rem solid #777777;
91
+ #{$theme}#{$button}#{$active}#{$border}: 1px solid #777777;
92
92
  #{$theme}#{$button}#{$active}#{$radius}: 0.5rem;
93
93
  #{$theme}#{$button}#{$active}#{$transition}: all 50ms ease-in-out;
94
94
 
@@ -114,7 +114,7 @@
114
114
 
115
115
  #{$theme}#{$color}: #ffffff;
116
116
  #{$theme}#{$background}: #333333;
117
- #{$theme}#{$border}: 0.125rem solid #555555;
117
+ #{$theme}#{$border}: 1px solid #666666;
118
118
  #{$theme}#{$accent}: #768ce7;
119
119
  #{$theme}#{$radius}: 0.5rem;
120
120
  #{$theme}#{$font}#{$family}: Inter;
@@ -123,7 +123,7 @@
123
123
  #{$theme}#{$padding}: 0.75rem;
124
124
  #{$theme}#{$gap}: 0.5rem;
125
125
  #{$theme}#{$transition}: all 200ms ease-in-out;
126
- #{$theme}#{$separator}#{$size}: 0.125rem;
126
+ #{$theme}#{$separator}#{$size}: 1px;
127
127
  #{$theme}#{$separator}#{$color}: #555555;
128
128
 
129
129
  // heading
@@ -143,7 +143,7 @@
143
143
  // input
144
144
  #{$theme}#{$input}#{$color}: #ffffff;
145
145
  #{$theme}#{$input}#{$background}: #222222;
146
- #{$theme}#{$input}#{$border}: 0.125rem solid #444444;
146
+ #{$theme}#{$input}#{$border}: 1px solid #444444;
147
147
  #{$theme}#{$input}#{$radius}: 0.5rem;
148
148
  #{$theme}#{$input}#{$height}: 2rem;
149
149
  #{$theme}#{$input}#{$padding}#{$horizontal}: 0.5rem;
@@ -151,12 +151,12 @@
151
151
  // focus
152
152
  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
153
153
  #{$theme}#{$input}#{$focus}#{$background}: #333333;
154
- #{$theme}#{$input}#{$focus}#{$border}: 0.125rem solid #555555;
154
+ #{$theme}#{$input}#{$focus}#{$border}: 1px solid #666666;
155
155
 
156
156
  // button
157
157
  #{$theme}#{$button}#{$color}: #ffffff;
158
158
  #{$theme}#{$button}#{$background}: #444444;
159
- #{$theme}#{$button}#{$border}: 0.125rem solid #444444;
159
+ #{$theme}#{$button}#{$border}: 1px solid #444444;
160
160
  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
161
161
  #{$theme}#{$button}#{$font}#{$weight}: 400;
162
162
  #{$theme}#{$button}#{$radius}: 0.5rem;
@@ -165,13 +165,13 @@
165
165
  // hover
166
166
  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
167
167
  #{$theme}#{$button}#{$hover}#{$background}: #555555;
168
- #{$theme}#{$button}#{$hover}#{$border}: 0.125rem solid #555555;
168
+ #{$theme}#{$button}#{$hover}#{$border}: 1px solid #666666;
169
169
  #{$theme}#{$button}#{$hover}#{$radius}: 0.5rem;
170
170
  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
171
171
  // active
172
172
  #{$theme}#{$button}#{$active}#{$color}: #000000;
173
173
  #{$theme}#{$button}#{$active}#{$background}: #666666;
174
- #{$theme}#{$button}#{$active}#{$border}: 0.125rem solid #555555;
174
+ #{$theme}#{$button}#{$active}#{$border}: 1px solid #666666;
175
175
  #{$theme}#{$button}#{$active}#{$radius}: 0.5rem;
176
176
 
177
177
  // header
@@ -188,13 +188,13 @@
188
188
 
189
189
  #{$theme}#{$color}: #ffffff;
190
190
  #{$theme}#{$background}: #444444;
191
- #{$theme}#{$border}: 0.125rem solid #555555;
191
+ #{$theme}#{$border}: 1px solid #666666;
192
192
  #{$theme}#{$accent}: #768ce7;
193
193
  #{$theme}#{$radius}: 0.25rem;
194
194
  #{$theme}#{$padding}: 0.5rem;
195
195
  #{$theme}#{$gap}: 0.75rem;
196
196
  #{$theme}#{$transition}: all 200ms ease-in-out;
197
- #{$theme}#{$separator}#{$size}: 0.125rem;
197
+ #{$theme}#{$separator}#{$size}: 1px;
198
198
  #{$theme}#{$separator}#{$color}: #555555;
199
199
 
200
200
  // heading
@@ -222,7 +222,7 @@
222
222
  // input
223
223
  #{$theme}#{$input}#{$color}: #ffffff;
224
224
  #{$theme}#{$input}#{$background}: #222222;
225
- #{$theme}#{$input}#{$border}: 0.125rem solid #444444;
225
+ #{$theme}#{$input}#{$border}: 1px solid #444444;
226
226
  #{$theme}#{$input}#{$radius}: 0.5rem;
227
227
  #{$theme}#{$input}#{$height}: 2rem;
228
228
  #{$theme}#{$input}#{$padding}#{$horizontal}: 0.5rem;
@@ -230,12 +230,12 @@
230
230
  // focus
231
231
  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
232
232
  #{$theme}#{$input}#{$focus}#{$background}: #333333;
233
- #{$theme}#{$input}#{$focus}#{$border}: 0.125rem solid #555555;
233
+ #{$theme}#{$input}#{$focus}#{$border}: 1px solid #666666;
234
234
 
235
235
  // button
236
236
  #{$theme}#{$button}#{$color}: #ffffff;
237
237
  #{$theme}#{$button}#{$background}: #555555;
238
- #{$theme}#{$button}#{$border}: 0.125rem solid #555555;
238
+ #{$theme}#{$button}#{$border}: 1px solid #666666;
239
239
  #{$theme}#{$button}#{$font}#{$family}: Inter;
240
240
  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
241
241
  #{$theme}#{$button}#{$font}#{$weight}: 400;
@@ -245,13 +245,13 @@
245
245
  // hover
246
246
  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
247
247
  #{$theme}#{$button}#{$hover}#{$background}: #666666;
248
- #{$theme}#{$button}#{$hover}#{$border}: 0.125rem solid #666666;
248
+ #{$theme}#{$button}#{$hover}#{$border}: 1px solid #666666;
249
249
  #{$theme}#{$button}#{$hover}#{$radius}: 0.25rem;
250
250
  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
251
251
  // active
252
252
  #{$theme}#{$button}#{$active}#{$color}: #000000;
253
253
  #{$theme}#{$button}#{$active}#{$background}bg: #666666;
254
- #{$theme}#{$button}#{$active}#{$border}: 0.125rem solid #666666;
254
+ #{$theme}#{$button}#{$active}#{$border}: 1px solid #666666;
255
255
  #{$theme}#{$button}#{$active}#{$radius}: 0.25rem;
256
256
 
257
257
  // header
@@ -268,13 +268,13 @@
268
268
 
269
269
  #{$theme}#{$color}: #ffffff;
270
270
  #{$theme}#{$background}: #555555;
271
- #{$theme}#{$border}: 0.125rem solid #666666;
271
+ #{$theme}#{$border}: 1px solid #666666;
272
272
  #{$theme}#{$accent}: #768ce7;
273
- #{$theme}#{$radius}: 0.125rem;
273
+ #{$theme}#{$radius}: 1px;
274
274
  #{$theme}#{$padding}: 0.5rem;
275
275
  #{$theme}#{$gap}: 1rem;
276
276
  #{$theme}#{$transition}: all 200ms ease-in-out;
277
- #{$theme}#{$separator}#{$size}: 0.125rem;
277
+ #{$theme}#{$separator}#{$size}: 1px;
278
278
  #{$theme}#{$separator}#{$color}: #555555;
279
279
 
280
280
  // heading
@@ -302,7 +302,7 @@
302
302
  // input
303
303
  #{$theme}#{$input}#{$color}: #ffffff;
304
304
  #{$theme}#{$input}#{$background}: #222222;
305
- #{$theme}#{$input}#{$border}: 0.125rem solid #444444;
305
+ #{$theme}#{$input}#{$border}: 1px solid #444444;
306
306
  #{$theme}#{$input}#{$radius}: 0.5rem;
307
307
  #{$theme}#{$input}#{$height}: 2rem;
308
308
  #{$theme}#{$input}#{$padding}#{$horizontal}: 0.5rem;
@@ -310,12 +310,12 @@
310
310
  // focus
311
311
  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
312
312
  #{$theme}#{$input}#{$focus}#{$background}: #333333;
313
- #{$theme}#{$input}#{$focus}#{$border}: 0.125rem solid #555555;
313
+ #{$theme}#{$input}#{$focus}#{$border}: 1px solid #666666;
314
314
 
315
315
  // button
316
316
  #{$theme}#{$button}#{$color}: #ffffff;
317
317
  #{$theme}#{$button}#{$background}: #666666;
318
- #{$theme}#{$button}#{$border}: 0.125rem solid #666666;
318
+ #{$theme}#{$button}#{$border}: 1px solid #666666;
319
319
  #{$theme}#{$button}#{$font}#{$family}: Inter;
320
320
  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
321
321
  #{$theme}#{$button}#{$font}#{$weight}: 400;
@@ -324,13 +324,13 @@
324
324
  // hover
325
325
  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
326
326
  #{$theme}#{$button}#{$hover}#{$background}: #777777;
327
- #{$theme}#{$button}#{$hover}#{$border}: 0.125rem solid #777777;
327
+ #{$theme}#{$button}#{$hover}#{$border}: 1px solid #777777;
328
328
  #{$theme}#{$button}#{$hover}#{$radius}: 0.25rem;
329
329
  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
330
330
  // active
331
331
  #{$theme}#{$button}#{$active}#{$color}: #000000;
332
332
  #{$theme}#{$button}#{$active}#{$background}: #777777;
333
- #{$theme}#{$button}#{$active}#{$border}: 0.125rem solid #777777;
333
+ #{$theme}#{$button}#{$active}#{$border}: 1px solid #777777;
334
334
  #{$theme}#{$button}#{$active}#{$radius}: 0.25rem;
335
335
 
336
336
  // header
package/src/views/header/header.module.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
4
4
  */
5
5
 
6
- @use "@yourdash/uikit/theme/themeValues" as *;
6
+ @use "@yourdash/uikit/src/theme/themeValues" as *;
7
7
 
8
8
  .view {
9
9
  width: 100%;
package/views/onBoarding/onBoarding.tsx~ ADDED
@@ -0,0 +1,138 @@
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;