@yourdash/uikit 1.0.1 → 1.0.3

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 (82) hide show
  1. package/components/box/box.module.scss +1 -1
  2. package/components/box/box.tsx +3 -3
  3. package/components/button/button.module.scss +3 -3
  4. package/components/button/button.tsx +2 -1
  5. package/components/buttonLink/buttonLink.module.scss +5 -1
  6. package/components/buttonLink/buttonLink.tsx +13 -12
  7. package/components/buttonWithIcon/buttonWithIcon.module.scss +56 -0
  8. package/components/buttonWithIcon/buttonWithIcon.tsx +36 -0
  9. package/components/card/card.module.scss +6 -6
  10. package/components/card/card.tsx +23 -20
  11. package/components/container/container.module.scss +20 -0
  12. package/components/container/container.tsx +22 -0
  13. package/components/contextMenu/contextMenu.tsx +1 -1
  14. package/components/contextMenu/contextMenuRoot.module.scss +1 -1
  15. package/components/contextMenu/contextMenuRoot.tsx +83 -83
  16. package/components/flex/flex.module.scss +31 -19
  17. package/components/flex/flex.tsx +23 -2
  18. package/components/heading/heading.module.scss +1 -1
  19. package/components/heading/heading.tsx +1 -1
  20. package/components/icon/icon.tsx +1 -1
  21. package/components/iconButton/iconButton.module.scss +1 -1
  22. package/components/iconButton/iconButton.tsx +3 -3
  23. package/components/image/image.module.scss +72 -1
  24. package/components/image/image.tsx +65 -10
  25. package/components/link/link.module.scss +1 -1
  26. package/components/link/link.tsx +1 -1
  27. package/components/progressBar/progressBar.module.scss +25 -0
  28. package/components/progressBar/progressBar.tsx +21 -0
  29. package/components/redirect/redirect.tsx +1 -1
  30. package/components/separator/separator.module.scss +9 -4
  31. package/components/separator/separator.tsx +3 -3
  32. package/components/spinner/spinner.module.scss +1 -6
  33. package/components/spinner/spinner.tsx +1 -1
  34. package/components/subtext/subtext.module.scss +1 -1
  35. package/components/subtext/subtext.tsx +1 -1
  36. package/components/tag/tag.module.scss +13 -0
  37. package/components/tag/tag.tsx +21 -0
  38. package/components/text/text.module.scss +1 -1
  39. package/components/text/text.tsx +1 -1
  40. package/components/textButton/textButton.module.scss +1 -1
  41. package/components/textButton/textButton.tsx +1 -1
  42. package/components/textInput/textInput.module.scss +1 -1
  43. package/components/textInput/textInput.tsx +40 -10
  44. package/components/toast/toast.module.scss +71 -31
  45. package/components/toast/toast.ts +12 -0
  46. package/components/toast/toastAction.ts +12 -0
  47. package/components/toast/toastContext.ts +5 -3
  48. package/components/toast/toasts.tsx +99 -0
  49. package/core/decrementLevel.tsx +13 -13
  50. package/core/incrementLevel.tsx +1 -1
  51. package/core/level.tsx +1 -1
  52. package/core/remToPx.ts +8 -0
  53. package/core/root.tsx +26 -32
  54. package/core/toast.ts +18 -17
  55. package/imports.d.ts +81 -0
  56. package/package.json +9 -40
  57. package/theme/defaultTheme.module.scss +16 -4
  58. package/theme/themeValues.scss +8 -5
  59. package/tsconfig.json +19 -9
  60. package/utilityComponent/hasBeenShown/hasBeenShown.tsx +47 -0
  61. package/utilityComponent/onInView/onInView.tsx +83 -0
  62. package/views/carousel/carousel.module.scss +77 -0
  63. package/views/carousel/carousel.tsx +138 -0
  64. package/views/header/header.module.scss +16 -0
  65. package/views/header/header.tsx +28 -0
  66. package/views/infiniteScroll/infiniteScroll.module.scss +26 -0
  67. package/views/infiniteScroll/infiniteScroll.tsx +90 -0
  68. package/views/navBar/components/navImage/navImage.module.scss +7 -0
  69. package/views/navBar/components/navImage/navImage.tsx +15 -0
  70. package/views/navBar/components/navTitle/navTitle.tsx +13 -0
  71. package/views/navBar/navBar.module.scss +22 -0
  72. package/views/navBar/navBar.tsx +37 -0
  73. package/views/onBoarding/onBoarding.module.scss +84 -0
  74. package/views/onBoarding/onBoarding.tsx +138 -0
  75. package/views/panAndZoom/panAndZoom.tsx +121 -114
  76. package/views/sidebar/Sidebar.module.scss +49 -0
  77. package/views/sidebar/Sidebar.tsx +30 -0
  78. package/views/sidebar/SidebarContainer.module.scss +22 -0
  79. package/views/sidebar/SidebarContainer.tsx +38 -0
  80. package/views/sidebar/SidebarContext.tsx +15 -0
  81. package/views/sidebar/SidebarToggleButton.tsx +25 -0
  82. package/components/toast/toast.tsx +0 -65
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- import { UKIcon } from "./iconDictionary.js";
6
+ import { UKIcon } from "./iconDictionary.ts";
7
7
  import styles from "./icon.module.scss";
8
8
  import { FC } from "react";
9
9
 
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @import "../../theme/themeValues";
6
+ @use "@yourdash/uikit/theme/themeValues" as *;
7
7
 
8
8
  .component {
9
9
  font-family: var(#{$theme}#{$font}#{$family});
@@ -3,9 +3,9 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- import clippy from "@yourdash/shared/web/helpers/clippy.js";
7
- import Icon from "../icon/icon.js";
8
- import { UKIcon } from "../icon/iconDictionary.js";
6
+ import clippy from "@yourdash/shared/web/helpers/clippy.ts";
7
+ import Icon from "../icon/icon.tsx";
8
+ import { UKIcon } from "../icon/iconDictionary.ts";
9
9
  import styles from "./iconButton.module.scss";
10
10
  import { FC } from "react";
11
11
 
@@ -3,8 +3,79 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @import "../../theme/themeValues";
6
+ @use "@yourdash/uikit/theme/themeValues" as *;
7
+
8
+ .componentContainer {
9
+ position: relative;
10
+ }
7
11
 
8
12
  .component {
9
13
  border-radius: var(#{$theme}#{$radius});
14
+ opacity: 0;
15
+ max-width: 100%;
16
+ max-height: 100%;
17
+ min-width: 2rem;
18
+ min-height: 2rem;
19
+ -webkit-user-select: none;
20
+ -moz-user-select: none;
21
+ -ms-user-select: none;
22
+ user-select: none;
23
+ pointer-events: none;
24
+
25
+ &.noRounding {
26
+ border-radius: 0;
27
+ }
28
+ }
29
+
30
+ .loaded {
31
+ transition: opacity 750ms linear;
32
+ opacity: 1;
33
+ }
34
+
35
+ .loading {
36
+ @keyframes loading {
37
+ from {
38
+ background-position: calc(var(--background-size) * -1) calc(var(--background-size) * -1);
39
+ }
40
+
41
+ to {
42
+ background-position: var(--background-size) var(--background-size);
43
+ }
44
+ }
45
+
46
+ & {
47
+ background: linear-gradient(to bottom right, transparent 12.5%, #bbbbbb, #ffffff 25%, transparent 12.5%, transparent 12.5%, #bbbbbb, #ffffff 25%, transparent 12.5%);
48
+ background-repeat: no-repeat;
49
+ background-size: calc(var(--background-size) * 4) calc(var(--background-size) * 4);
50
+ animation: loading 1.25s infinite forwards cubic-bezier(0.25, 0.5, 0.5, 0.25);
51
+ box-shadow: inset 0 0 0.5rem #0003;
52
+ }
53
+ }
54
+
55
+ .serverError {
56
+ --size: 4rem;
57
+
58
+ @keyframes fail {
59
+ 0% {
60
+ background-size: var(--background-size) var(--background-size);
61
+ }
62
+
63
+ 50% {
64
+ background-size: calc(var(--background-size) * 4) calc(var(--background-size) * 4);
65
+ }
66
+
67
+ 100% {
68
+ background-size: var(--background-size) var(--background-size);
69
+ }
70
+ }
71
+
72
+ & {
73
+ background: radial-gradient(transparent, #ff0000);
74
+ background-repeat: no-repeat;
75
+ background-size: var(--background-size) var(--background-size);
76
+ background-position: center center;
77
+ animation: fail 1s infinite forwards cubic-bezier(0.4, 0, 0.2, 1);
78
+ box-shadow: 0 0 1rem #fff;
79
+ border-radius: 0;
80
+ }
10
81
  }
@@ -3,25 +3,80 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- import csi from "@yourdash/csi/csi.js";
6
+ import Icon from "../icon/icon.tsx";
7
+ import { UKIcon } from "../icon/iconDictionary.ts";
7
8
  import styles from "./image.module.scss";
8
- import { FC } from "react";
9
+ import { FC, useEffect, useRef, useState } from "react";
10
+ import clippy from "@yourdash/shared/web/helpers/clippy.ts";
9
11
 
10
12
  const Image: FC<{
11
13
  src: string;
12
14
  accessibleLabel: string;
15
+ containerClassName?: string;
13
16
  className?: string;
14
- authenticatedImage?: boolean;
15
17
  disableLazyLoading?: boolean;
18
+ noRounding?: boolean;
19
+ width?: number;
20
+ height?: number;
16
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
+
17
53
  return (
18
- <img
19
- className={`${styles.component} ${props.className}`}
20
- src={(props.authenticatedImage ? csi.getInstanceUrl() : "") + props.src}
21
- draggable={false}
22
- loading={props.disableLazyLoading ? "eager" : "lazy"}
23
- alt={props.accessibleLabel}
24
- />
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>
25
80
  );
26
81
  };
27
82
 
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @import "../../theme/themeValues";
6
+ @use "@yourdash/uikit/theme/themeValues" as *;
7
7
 
8
8
  .component {
9
9
  display: inline-block;
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- import clippy from "@yourdash/shared/web/helpers/clippy.js";
6
+ import clippy from "@yourdash/shared/web/helpers/clippy.ts";
7
7
  import styles from "./link.module.scss";
8
8
  import { FC } from "react";
9
9
 
@@ -0,0 +1,25 @@
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
+ @use "@yourdash/uikit/theme/themeValues" as *;
7
+
8
+ .component {
9
+ padding: var(#{$theme+$padding});
10
+ border: var(#{$theme+$border});
11
+ border-radius: var(#{$theme+$radius});
12
+ background-color: var(#{$theme+$background});
13
+ user-select: none;
14
+ width: 100%;
15
+ display: flex;
16
+ align-items: center;
17
+ justify-content: flex-start;
18
+ }
19
+
20
+ .bar {
21
+ background: var(#{$theme+$accent});
22
+ width: var(--ukcomp-progress);
23
+ height: 1rem;
24
+ transition: var(#{$theme+$transition});
25
+ }
@@ -0,0 +1,21 @@
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 clippy from "@yourdash/shared/web/helpers/clippy.ts";
7
+ import styles from "./progressBar.module.scss";
8
+ import { FC } from "react";
9
+
10
+ // TODO: rewrite this component to use the HTML progress bar
11
+ const ProgressBar: FC<{ maxValue?: number; value: number; className?: string }> = ({ maxValue, value, className }) => {
12
+ return (
13
+ <progress
14
+ max={maxValue}
15
+ value={value}
16
+ className={className}
17
+ />
18
+ );
19
+ };
20
+
21
+ export default ProgressBar;
@@ -3,8 +3,8 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- import { useNavigate } from "@solidjs/router";
7
6
  import { FC } from "react";
7
+ import { useNavigate } from "react-router";
8
8
 
9
9
  const Redirect: FC<{ to: string | null }> = (props) => {
10
10
  const navigate = useNavigate();
@@ -3,11 +3,10 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @import "../../theme/themeValues";
6
+ @use "@yourdash/uikit/theme/themeValues" as *;
7
7
 
8
8
  .component {
9
9
  display: flex;
10
-
11
10
  border: var(#{$theme}#{$border});
12
11
  border-bottom: none;
13
12
  border-radius: var(#{$theme}#{$radius});
@@ -16,13 +15,19 @@
16
15
  .row {
17
16
  width: 0;
18
17
  height: calc(100% - calc(var(#{$theme}#{$gap})) * 2);
19
-
20
18
  margin: var(#{$theme}#{$gap});
19
+
20
+ &.disableMargin {
21
+ height: 100%;
22
+ }
21
23
  }
22
24
 
23
25
  .column {
24
26
  width: calc(100% - calc(var(#{$theme}#{$gap})) * 2);
25
27
  height: 0;
26
-
27
28
  margin: var(#{$theme}#{$gap});
29
+
30
+ &.disableMargin {
31
+ width: 100%;
32
+ }
28
33
  }
@@ -3,12 +3,12 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- import clippy from "@yourdash/shared/web/helpers/clippy.js";
6
+ import clippy from "@yourdash/shared/web/helpers/clippy.ts";
7
7
  import styles from "./separator.module.scss";
8
8
  import { FC } from "react";
9
9
 
10
- const Separator: FC<{ direction: "column" | "row" }> = (props) => {
11
- return <div className={clippy(styles.component, styles[props.direction])} />;
10
+ const Separator: FC<{ direction: "column" | "row"; disableMargin?: boolean }> = (props) => {
11
+ return <div className={clippy(styles.component, styles[props.direction], props.disableMargin && styles.disableMargin)} />;
12
12
  };
13
13
 
14
14
  export default Separator;
@@ -1,9 +1,4 @@
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 "@yourdash/uikit/theme/themeValues";
1
+ @use "@yourdash/uikit/theme/themeValues" as *;
7
2
 
8
3
  .component {
9
4
  padding: var(#{$theme+$padding});
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- import clippy from "@yourdash/shared/web/helpers/clippy.js";
6
+ import clippy from "@yourdash/shared/web/helpers/clippy.ts";
7
7
  import styles from "./spinner.module.scss";
8
8
  import { FC } from "react";
9
9
 
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @import "../../theme/themeValues";
6
+ @use "@yourdash/uikit/theme/themeValues" as *;
7
7
 
8
8
  .component {
9
9
  color: var(#{$theme+$subcolor});
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- import clippy from "@yourdash/shared/web/helpers/clippy.js";
6
+ import clippy from "@yourdash/shared/web/helpers/clippy.ts";
7
7
  import styles from "./subtext.module.scss";
8
8
  import { FC } from "react";
9
9
 
@@ -0,0 +1,13 @@
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
+ @use "@yourdash/uikit/theme/themeValues" as *;
7
+
8
+ .component {
9
+ display: inline-block;
10
+ font-weight: var(#{$theme+$font+$weight});
11
+ font-size: var(#{$theme+$font+$size});
12
+ font-family: var(#{$theme+$font+$family});
13
+ }
@@ -0,0 +1,21 @@
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 clippy from "@yourdash/shared/web/helpers/clippy.ts";
7
+ import styles from "./text.module.scss";
8
+ import { FC } from "react";
9
+
10
+ const Tag: FC<{ text: string; color: string; className?: string }> = (props) => {
11
+ return (
12
+ <div
13
+ className={clippy(styles.component, props.className)}
14
+ style={{ backgroundColor: props.color }}
15
+ >
16
+ {props.text}
17
+ </div>
18
+ );
19
+ };
20
+
21
+ export default Tag;
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @import "../../theme/themeValues";
6
+ @use "@yourdash/uikit/theme/themeValues" as *;
7
7
 
8
8
  .component {
9
9
  display: inline-block;
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- import clippy from "@yourdash/shared/web/helpers/clippy.js";
6
+ import clippy from "@yourdash/shared/web/helpers/clippy.ts";
7
7
  import styles from "./text.module.scss";
8
8
  import { FC } from "react";
9
9
 
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @import "../../theme/themeValues";
6
+ @use "@yourdash/uikit/theme/themeValues" as *;
7
7
 
8
8
  .component {
9
9
  font-family: var(#{$theme}#{$font}#{$family});
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- import clippy from "@yourdash/shared/web/helpers/clippy.js";
6
+ import clippy from "@yourdash/shared/web/helpers/clippy.ts";
7
7
  import styles from "./textButton.module.scss";
8
8
  import { FC } from "react";
9
9
 
@@ -3,7 +3,7 @@
3
3
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
4
4
  */
5
5
 
6
- @import '../../theme/themeValues';
6
+ @use '../../theme/themeValues' as *;
7
7
 
8
8
  .component {
9
9
  display: flex;
@@ -1,26 +1,53 @@
1
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)
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
4
  */
5
5
 
6
- import clippy from "@yourdash/shared/web/helpers/clippy.js";
7
- import Icon from "../icon/icon.js";
8
- import { UKIcon } from "../icon/iconDictionary.js";
6
+ import clippy from "@yourdash/shared/web/helpers/clippy.ts";
7
+ import Icon from "../icon/icon.tsx";
8
+ import { UKIcon } from "../icon/iconDictionary.ts";
9
9
  import styles from "./textInput.module.scss";
10
- import { FC } from "react";
10
+ import React, { useEffect, useRef, useState } from "react";
11
11
 
12
12
  // TODO: maybe remove onEnter for onSubmit
13
13
 
14
- const TextInput: FC<{
14
+ const TextInputComponent: React.ForwardRefExoticComponent<{
15
15
  onChange?: (value: string) => void;
16
16
  onSubmit?: (value: string) => void;
17
17
  placeholder: string;
18
18
  icon?: UKIcon;
19
19
  onEnter?: (value: string) => void;
20
20
  defaultValue?: string;
21
+ value?: string;
21
22
  accessibleName: string;
22
23
  className?: string;
23
- }> = (props) => {
24
+ type?: string;
25
+ }> = (props, fwrdRef) => {
26
+ const ref = useRef<HTMLInputElement>(null);
27
+
28
+ React.useImperativeHandle(fwrdRef, () => ref.current);
29
+
30
+ const [value, setValue] = useState(props.defaultValue || "");
31
+
32
+ useEffect(() => {
33
+ if (props.value) setValue(props.value);
34
+ }, [props.value]);
35
+
36
+ useEffect(() => {
37
+ if (!ref.current) return;
38
+
39
+ ref.current.value = value;
40
+ }, [value]);
41
+
42
+ useEffect(() => {
43
+ setTimeout(() => {
44
+ if (ref.current?.value !== props.defaultValue) {
45
+ ref.current?.onkeyup?.({ currentTarget: ref.current } as unknown as KeyboardEvent);
46
+ ref.current?.onchange?.({ currentTarget: ref.current } as unknown as Event);
47
+ }
48
+ }, 500);
49
+ }, []);
50
+
24
51
  return (
25
52
  <div className={clippy(styles.component, props.className)}>
26
53
  {props.icon && (
@@ -30,12 +57,13 @@ const TextInput: FC<{
30
57
  />
31
58
  )}
32
59
  <input
60
+ ref={ref}
61
+ type={props.type || "text"}
33
62
  aria-label={props.accessibleName}
34
- defaultValue={props.defaultValue}
35
63
  className={clippy(styles.input, !props.icon && styles.noIcon)}
36
64
  placeholder={props.placeholder}
37
- type="text"
38
65
  onKeyUp={(e) => {
66
+ setValue(e.currentTarget.value);
39
67
  props.onChange?.(e.currentTarget.value);
40
68
  }}
41
69
  onChange={(e) => props.onSubmit?.(e.currentTarget.value)}
@@ -51,4 +79,6 @@ const TextInput: FC<{
51
79
  );
52
80
  };
53
81
 
82
+ const TextInput = React.forwardRef(TextInputComponent);
83
+
54
84
  export default TextInput;
@@ -1,31 +1,71 @@
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
- .container {
7
- position: fixed;
8
- bottom: 1rem;
9
- right: 1rem;
10
- z-index: 10000;
11
- }
12
-
13
- .component {
14
- border-radius: 0.5rem;
15
- }
16
-
17
- .success {
18
- border-color: #2ea967;
19
- }
20
-
21
- .error {
22
- border-color: #ff4500;
23
- }
24
-
25
- .warning {
26
- border-color: #daa520;
27
- }
28
-
29
- .info {
30
- border-color: #00b8ff;
31
- }
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
+ .container {
7
+ position: fixed;
8
+ top: 0;
9
+ right: 0;
10
+ z-index: 10000;
11
+ text-align: start;
12
+ opacity: 0.75;
13
+ overflow: hidden;
14
+ pointer-events: none;
15
+ gap: 0.25rem;
16
+ display: flex;
17
+ flex-direction: column;
18
+ }
19
+
20
+ .component {
21
+ border-radius: 0.5rem;
22
+ display: flex;
23
+ flex-direction: column;
24
+ gap: 1rem;
25
+ pointer-events: none;
26
+ backdrop-filter: blur(1rem);
27
+ max-width: 32rem;
28
+ margin-right: 0.5rem;
29
+
30
+ &:first-child {
31
+ margin-top: 0.5rem;
32
+ }
33
+ }
34
+
35
+ .cardContent {
36
+ gap: 0;
37
+ padding: 0.25rem;
38
+ padding-left: 0.5rem;
39
+ padding-right: 0.5rem;
40
+ margin-right: -0.5rem;
41
+ }
42
+
43
+ .success {
44
+ border-right: 0.5rem solid #2ea967;
45
+ }
46
+
47
+ .error {
48
+ border-right: 0.5rem solid #ff4500;
49
+ }
50
+
51
+ .warning {
52
+ border-right: 0.5rem solid #daa520;
53
+ }
54
+
55
+ .info {
56
+ border-right: 0.5rem solid #00b8ff;
57
+ }
58
+
59
+ .heading {
60
+ text-align: left;
61
+ line-height: 1;
62
+ padding-top: 0.25rem;
63
+ }
64
+
65
+ .body {
66
+
67
+ }
68
+
69
+ .pointerEvents {
70
+ pointer-events: all;
71
+ }
@@ -0,0 +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 type IToastAction from "./toastAction.ts";
7
+
8
+ export default interface Toast {
9
+ type: "success" | "error" | "warning" | "info" | "debug";
10
+ content: { title: string; body: string; actions?: IToastAction[] };
11
+ persist?: boolean;
12
+ }