@yourdash/uikit 1.0.14 → 1.0.15

package/components/buttonCombo/buttonCombo.module.scss

@@ -1,23 +1,23 @@
-/*!
- * Copyright ©2024 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-
-.component {
-  display: flex;
-  flex-direction: row;
-
-  > *:not(:first-child):not(:last-child) {
-    border-radius: 0 !important;
-  }
-
-  > *:first-child {
-    border-top-right-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-  }
-
-  > *:last-child {
-    border-top-left-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-  }
-}
+/*!
+ * Copyright ©2024 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+.component {
+  display: flex;
+  flex-direction: row;
+
+  > *:not(:first-child):not(:last-child) {
+    border-radius: 0 !important;
+  }
+
+  > *:first-child {
+    border-top-right-radius: 0 !important;
+    border-bottom-right-radius: 0 !important;
+  }
+
+  > *:last-child {
+    border-top-left-radius: 0 !important;
+    border-bottom-left-radius: 0 !important;
+  }
+}

package/components/buttonCombo/buttonCombo.tsx

@@ -1,14 +1,14 @@
-/*
- * Copyright ©2024 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import React from "react";
-import styles from "./buttonCombo.module.scss";
-
-const ButtonCombo: React.FC<{ children: React.ReactNode[] }> = ({ children }) => {
-  return <div className={clippy(styles.component)}>{children}</div>;
-};
-
-export default ButtonCombo;
+/*
+ * Copyright ©2024 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import React from "react";
+import styles from "./buttonCombo.module.scss";
+
+const ButtonCombo: React.FC<{ children: React.ReactNode[] }> = ({ children }) => {
+  return <div className={clippy(styles.component)}>{children}</div>;
+};
+
+export default ButtonCombo;

package/components/icon/icon.tsx

@@ -1,42 +1,42 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import { UKIconType } from "./iconDictionary.ts";
-import styles from "./icon.module.scss";
-import { FC, useEffect, useState } from "react";
-import ServerErrorIcon from "./icons/server-error.svg";
-
-const Icon: FC<{
-  // noinspection TypeScriptDuplicateUnionOrIntersectionType
-  icon: UKIconType;
-  size?: string;
-  color?: string;
-  preserveColor?: boolean;
-  className?: string;
-}> = (props) => {
-  const [icon, setIcon] = useState(ServerErrorIcon);
-
-  useEffect(() => {
-    if (typeof props.icon === "function") {
-      props.icon().then((val) => {
-        setIcon(val.default);
-      });
-    }
-  }, [props.icon]);
-
-  return (
-    <div
-      className={`${styles.component} ${props.className} ${props.preserveColor ? styles.preserveColor : ""}`}
-      style={{
-        "--icon": `url("${icon}")`,
-        ...(!props.preserveColor ? { "--color": props.color } : {}),
-        // @ts-ignore
-        "--size": props.size,
-      }}
-    />
-  );
-};
-
-export default Icon;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import { UKIconType } from "./iconDictionary.ts";
+import styles from "./icon.module.scss";
+import { FC, useEffect, useState } from "react";
+import ServerErrorIcon from "./icons/server-error.svg";
+
+const Icon: FC<{
+  // noinspection TypeScriptDuplicateUnionOrIntersectionType
+  icon: UKIconType;
+  size?: string;
+  color?: string;
+  preserveColor?: boolean;
+  className?: string;
+}> = (props) => {
+  const [icon, setIcon] = useState(ServerErrorIcon);
+
+  useEffect(() => {
+    if (typeof props.icon === "function") {
+      props.icon().then((val) => {
+        setIcon(val.default);
+      });
+    }
+  }, [props.icon]);
+
+  return (
+    <div
+      className={`${styles.component} ${props.className} ${props.preserveColor ? styles.preserveColor : ""}`}
+      style={{
+        "--icon": `url("${icon}")`,
+        ...(!props.preserveColor ? { "--color": props.color } : {}),
+        // @ts-ignore
+        "--size": props.size,
+      }}
+    />
+  );
+};
+
+export default Icon;

package/components/image/image.tsx

@@ -1,83 +1,83 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import Icon from "../icon/icon.tsx";
-import { UKIcon } from "../icon/iconDictionary.ts";
-import styles from "./image.module.scss";
-import { FC, useEffect, useRef, useState } from "react";
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-
-const Image: FC<{
-  src: string;
-  accessibleLabel: string;
-  containerClassName?: string;
-  className?: string;
-  disableLazyLoading?: boolean;
-  noRounding?: boolean;
-  width?: number;
-  height?: number;
-}> = (props) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const [src, setSrc] = useState<string>(props.src);
-  const [loaded, setLoaded] = useState<boolean>(false);
-  const [hasFailed, setHasFailed] = useState<boolean>(false);
-  const [backgroundSize, setBackgroundSize] = useState<number>(0);
-
-  useEffect(() => {
-    const rc = ref.current;
-
-    if (!rc) {
-      return;
-    }
-
-    setTimeout(() => {
-      const bounds = rc.getBoundingClientRect();
-
-      setBackgroundSize(bounds.height > bounds.width ? bounds.height : bounds.width);
-    }, 0);
-  }, [src]);
-
-  useEffect(() => {
-    setHasFailed(false);
-    setLoaded(false);
-  }, [src]);
-
-  useEffect(() => {
-    if (props.src !== src) {
-      setSrc(props.src);
-    }
-  }, [props.src]);
-
-  return (
-    <div
-      ref={ref}
-      className={clippy(styles.componentContainer, props.containerClassName, !loaded && styles.loading, hasFailed && styles.serverError)}
-      style={{
-        // @ts-ignore
-        "--background-size": backgroundSize + "px",
-      }}
-    >
-      {!hasFailed ? (
-        <img
-          className={clippy(styles.component, props.className, loaded && styles.loaded, props.noRounding && styles.noRounding)}
-          draggable={false}
-          width={props.width}
-          height={props.height}
-          onError={() => setHasFailed(true)}
-          loading={props.disableLazyLoading ? "eager" : "lazy"}
-          alt={props.accessibleLabel}
-          onLoad={(e) => {
-            setLoaded(e.currentTarget.complete);
-          }}
-          src={src}
-        />
-      ) : (
-        <Icon icon={UKIcon.ServerError} />
-      )}
-    </div>
-  );
-};
-
-export default Image;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import Icon from "../icon/icon.tsx";
+import { UKIcon } from "../icon/iconDictionary.ts";
+import styles from "./image.module.scss";
+import { FC, useEffect, useRef, useState } from "react";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+
+const Image: FC<{
+  src: string;
+  accessibleLabel: string;
+  containerClassName?: string;
+  className?: string;
+  disableLazyLoading?: boolean;
+  noRounding?: boolean;
+  width?: number;
+  height?: number;
+}> = (props) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const [src, setSrc] = useState<string>(props.src);
+  const [loaded, setLoaded] = useState<boolean>(false);
+  const [hasFailed, setHasFailed] = useState<boolean>(false);
+  const [backgroundSize, setBackgroundSize] = useState<number>(0);
+
+  useEffect(() => {
+    const rc = ref.current;
+
+    if (!rc) {
+      return;
+    }
+
+    setTimeout(() => {
+      const bounds = rc.getBoundingClientRect();
+
+      setBackgroundSize(bounds.height > bounds.width ? bounds.height : bounds.width);
+    }, 0);
+  }, [src]);
+
+  useEffect(() => {
+    setHasFailed(false);
+    setLoaded(false);
+  }, [src]);
+
+  useEffect(() => {
+    if (props.src !== src) {
+      setSrc(props.src);
+    }
+  }, [props.src]);
+
+  return (
+    <div
+      ref={ref}
+      className={clippy(styles.componentContainer, props.containerClassName, !loaded && styles.loading, hasFailed && styles.serverError)}
+      style={{
+        // @ts-ignore
+        "--background-size": backgroundSize + "px",
+      }}
+    >
+      {!hasFailed ? (
+        <img
+          className={clippy(styles.component, props.className, loaded && styles.loaded, props.noRounding && styles.noRounding)}
+          draggable={false}
+          width={props.width}
+          height={props.height}
+          onError={() => setHasFailed(true)}
+          loading={props.disableLazyLoading ? "eager" : "lazy"}
+          alt={props.accessibleLabel}
+          onLoad={(e) => {
+            setLoaded(e.currentTarget.complete);
+          }}
+          src={src}
+        />
+      ) : (
+        <Icon icon={UKIcon.ServerError} />
+      )}
+    </div>
+  );
+};
+
+export default Image;

package/components/link/link.tsx

@@ -1,29 +1,29 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import Icon from "../icon/icon.tsx";
-import { UKIcon } from "../icon/iconDictionary.ts";
-import styles from "./link.module.scss";
-import { FC } from "react";
-
-const Link: FC<{ text: string; to: string; className?: string; hideLinkIcon?: boolean }> = (props) => {
-  return (
-    <a
-      href={props.to}
-      className={clippy(styles.component, props.className)}
-    >
-      {props.text}
-      {!props.hideLinkIcon && (
-        <Icon
-          icon={UKIcon.Link}
-          className={styles.icon}
-        />
-      )}
-    </a>
-  );
-};
-
-export default Link;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import Icon from "../icon/icon.tsx";
+import { UKIcon } from "../icon/iconDictionary.ts";
+import styles from "./link.module.scss";
+import { FC } from "react";
+
+const Link: FC<{ text: string; to: string; className?: string; hideLinkIcon?: boolean }> = (props) => {
+  return (
+    <a
+      href={props.to}
+      className={clippy(styles.component, props.className)}
+    >
+      {props.text}
+      {!props.hideLinkIcon && (
+        <Icon
+          icon={UKIcon.Link}
+          className={styles.icon}
+        />
+      )}
+    </a>
+  );
+};
+
+export default Link;

package/components/progressBar/progressBar.tsx

@@ -1,29 +1,29 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import styles from "./progressBar.module.scss";
-import { FC } from "react";
-
-// TODO: rewrite this component to use the HTML progress bar
-const ProgressBar: FC<{ maxValue?: number; value: number; className?: string; indeterminate?: boolean }> = ({
-  maxValue,
-  value,
-  className,
-  indeterminate,
-}) => {
-  return (
-    <>
-      <progress
-        max={maxValue}
-        value={value}
-        className={className}
-      />
-      {indeterminate && "This should be indeterminate"}
-    </>
-  );
-};
-
-export default ProgressBar;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import styles from "./progressBar.module.scss";
+import { FC } from "react";
+
+// TODO: rewrite this component to use the HTML progress bar
+const ProgressBar: FC<{ maxValue?: number; value: number; className?: string; indeterminate?: boolean }> = ({
+  maxValue,
+  value,
+  className,
+  indeterminate,
+}) => {
+  return (
+    <>
+      <progress
+        max={maxValue}
+        value={value}
+        className={className}
+      />
+      {indeterminate && "This should be indeterminate"}
+    </>
+  );
+};
+
+export default ProgressBar;

package/components/redirect/redirect.tsx

@@ -1,23 +1,23 @@
-/*
- * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
- * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
- */
-
-import { FC } from "react";
-import { useNavigate } from "react-router";
-import Card from "../card/card.tsx";
-import Text from "../text/text.tsx";
-
-const Redirect: FC<{ to: string | null }> = (props) => {
-  const navigate = useNavigate();
-
-  if (props.to !== null) navigate(props.to);
-
-  return (
-    <Card>
-      <Text text={`Redirecting to ${props.to}`} />
-    </Card>
-  );
-};
-
-export default Redirect;
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import { FC } from "react";
+import { useNavigate } from "react-router";
+import Card from "../card/card.tsx";
+import Text from "../text/text.tsx";
+
+const Redirect: FC<{ to: string | null }> = (props) => {
+  const navigate = useNavigate();
+
+  if (props.to !== null) navigate(props.to);
+
+  return (
+    <Card>
+      <Text text={`Redirecting to ${props.to}`} />
+    </Card>
+  );
+};
+
+export default Redirect;

package/components/textInput/textInput.tsx

@@ -1,82 +1,64 @@
-/*
- * Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-import Icon from "../icon/icon.tsx";
-import { UKIconType } from "../icon/iconDictionary.ts";
-import styles from "./textInput.module.scss";
-import React, { useEffect, useRef, useState } from "react";
-
-// TODO: maybe remove onEnter for onSubmit
-
-const TextInputComponent: React.FC<{
-  onChange?: (value: string) => void;
-  onSubmit?: (value: string) => void;
-  placeholder: string;
-  icon?: UKIconType;
-  onEnter?: (value: string) => void;
-  defaultValue?: string;
-  value?: string;
-  accessibleName: string;
-  className?: string;
-  type?: string;
-}> = (props) => {
-  const ref = useRef<HTMLInputElement>(null);
-
-  const [value, setValue] = useState(props.defaultValue || "");
-
-  useEffect(() => {
-    if (props.value) setValue(props.value);
-  }, [props.value]);
-
-  useEffect(() => {
-    if (!ref.current) return;
-
-    ref.current.value = value;
-  }, [value]);
-
-  useEffect(() => {
-    setTimeout(() => {
-      if (ref.current?.value !== props.defaultValue) {
-        ref.current?.onkeyup?.({ currentTarget: ref.current } as unknown as KeyboardEvent);
-        ref.current?.onchange?.({ currentTarget: ref.current } as unknown as Event);
-      }
-    }, 200);
-  }, []);
-
-  return (
-    <div className={clippy(styles.component, props.className)}>
-      {props.icon && (
-        <Icon
-          className={styles.icon}
-          icon={props.icon}
-        />
-      )}
-      <input
-        ref={ref}
-        type={props.type || "text"}
-        aria-label={props.accessibleName}
-        className={clippy(styles.input, !props.icon && styles.noIcon)}
-        placeholder={props.placeholder}
-        onKeyUp={(e) => {
-          setValue(e.currentTarget.value);
-          props.onChange?.(e.currentTarget.value);
-        }}
-        onChange={(e) => props.onSubmit?.(e.currentTarget.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-
-            props.onEnter?.(e.currentTarget.value);
-          }
-        }}
-      />
-    </div>
-  );
-};
-
-const TextInput = TextInputComponent;
-
-export default TextInput;
+/*
+ * Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import Icon from "../icon/icon.tsx";
+import { UKIconType } from "../icon/iconDictionary.ts";
+import styles from "./textInput.module.scss";
+import React, { useEffect, useRef, useState } from "react";
+
+const TextInputComponent: React.FC<{
+  getValue?: React.Dispatch<React.SetStateAction<string>>;
+  onSubmit?: (value: string) => void;
+  placeholder: string;
+  icon?: UKIconType;
+  defaultValue?: string;
+  value?: string;
+  accessibleName: string;
+  className?: string;
+  type?: string;
+}> = (props) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    if (props.value) ref.current.value = props.value;
+  }, [props.value]);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    ref.current.onchange = () => {
+      if (!ref.current) return;
+      if (!props.getValue) return;
+
+      props.getValue(ref.current.value);
+    };
+  }, []);
+
+  return (
+    <div className={clippy(styles.component, props.className)}>
+      {props.icon && (
+        <Icon
+          className={styles.icon}
+          icon={props.icon}
+        />
+      )}
+      <input
+        ref={ref}
+        type={props.type || "text"}
+        aria-label={props.accessibleName}
+        defaultValue={props.defaultValue}
+        className={clippy(styles.input, !props.icon && styles.noIcon)}
+        placeholder={props.placeholder}
+      />
+    </div>
+  );
+};
+
+const TextInput = TextInputComponent;
+
+export default TextInput;

package/components/toast/toastAction.ts

@@ -1,12 +1,12 @@
-/*
- * Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
- * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
- */
-
-import { UKIconType } from "../icon/iconDictionary.ts";
-
-export default interface IToastAction {
-  label: string;
-  icon?: UKIconType;
-  onClick: () => void;
-}
+/*
+ * Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+import { UKIconType } from "../icon/iconDictionary.ts";
+
+export default interface IToastAction {
+  label: string;
+  icon?: UKIconType;
+  onClick: () => void;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yourdash/uikit",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "license": "MIT",
   "type": "module",
   "engines": {