@yourdash/uikit 1.0.21 → 1.0.23

Sign up to get free protection for your applications and to get access to all the features.
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;