@yourdash/uikit 1.0.10 → 1.0.12

package/components/iconButton/iconButton.tsx

@@ -10,7 +10,7 @@ import styles from "./iconButton.module.scss";
 import { FC } from "react";
 
 const IconButton: FC<{
-  icon: UKIcon;
+  icon: (typeof UKIcon)[keyof typeof UKIcon];
   accessibleLabel: string;
   onClick: () => void;
   className?: string;

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/textInput/textInput.tsx

@@ -5,7 +5,7 @@
 
 import clippy from "@yourdash/shared/web/helpers/clippy.ts";
 import Icon from "../icon/icon.tsx";
-import { UKIcon } from "../icon/iconDictionary.ts";
+import { UKIconType } from "../icon/iconDictionary.ts";
 import styles from "./textInput.module.scss";
 import React, { useEffect, useRef, useState } from "react";
 
@@ -15,7 +15,7 @@ const TextInputComponent: React.FC<{
   onChange?: (value: string) => void;
   onSubmit?: (value: string) => void;
   placeholder: string;
-  icon?: UKIcon;
+  icon?: UKIconType;
   onEnter?: (value: string) => void;
   defaultValue?: string;
   value?: string;

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 { UKIcon } from "../icon/iconDictionary.ts";
-
-export default interface IToastAction {
-  label: string;
-  icon?: UKIcon;
-  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.10",
+  "version": "1.0.12",
   "license": "MIT",
   "type": "module",
   "engines": {

package/views/dialog/dialog.tsx

@@ -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)
- */
-
-import React from "react";
-import Card from "../../components/card/card.tsx";
-import styles from "./dialog.module.scss";
-
-const Dialog: React.FC<{ children: React.ReactNode | React.ReactNode[]; className?: string }> = ({ children, className }) => {
-  return (
-    <div className={styles.background}>
-      <Card
-        containerClassName={styles.view}
-        className={className}
-      >
-        {children}
-      </Card>
-    </div>
-  );
-};
-
-export default Dialog;
+/*
+ * 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 React from "react";
+import Card from "../../components/card/card.tsx";
+import styles from "./dialog.module.scss";
+
+const Dialog: React.FC<{ children: React.ReactNode | React.ReactNode[]; className?: string }> = ({ children, className }) => {
+  return (
+    <div className={styles.background}>
+      <Card
+        containerClassName={styles.view}
+        className={className}
+      >
+        {children}
+      </Card>
+    </div>
+  );
+};
+
+export default Dialog;

package/views/onBoarding/onBoarding.tsx

@@ -1,138 +1,143 @@
-import * as React from "react";
-import Card from "../../components/card/card.tsx";
-import { UKIcon } from "../../components/icon/iconDictionary.ts";
-import IconButton from "../../components/iconButton/iconButton.tsx";
-import Image from "../../components/image/image.tsx";
-import Heading from "../../components/heading/heading.tsx";
-import Text from "../../components/text/text.tsx";
-import ButtonWithIcon from "../../components/buttonWithIcon/buttonWithIcon.tsx";
-import Button from "../../components/button/button.tsx";
-import { Outlet } from "react-router";
-import styles from "./onBoarding.module.scss";
-import Flex from "../../components/flex/flex.tsx";
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-
-const OnBoarding: React.FC<{
-  meta: { id: string };
-  pages: {
-    headerImage: string;
-    header: string;
-    body: string;
-    actions: { label: string; icon?: UKIcon; onClick: () => void; changeTo?: "next" | "previous" | "remain" | "completed" }[];
-    allowGoBack?: boolean;
-  }[];
-}> = ({ pages, meta }) => {
-  const [currentPage, setCurrentPage] = React.useState<number>(0);
-  const page = pages[currentPage];
-
-  if (localStorage.getItem(`yourdash-application-visited-${meta.id}`) || currentPage > pages.length - 1) {
-    localStorage.setItem(`yourdash-application-visited-${meta.id}`, "true");
-
-    return <Outlet />;
-  }
-
-  return (
-    <div className={styles.page}>
-      <Card
-        className={styles.card}
-        containerClassName={styles.cardContainer}
-      >
-        {page.allowGoBack && (
-          <IconButton
-            className={clippy(styles.goBackButton, "animate__animated animate__fadeInDown")}
-            accessibleLabel="Go back to the last page"
-            icon={UKIcon.ChevronLeft}
-            onClick={() => {
-              setCurrentPage(currentPage - 1);
-            }}
-          />
-        )}
-        <Image
-          className={styles.headerImage}
-          src={page.headerImage}
-          accessibleLabel=""
-        />
-        <Heading
-          className={styles.header}
-          text={page.header}
-        />
-        <Text
-          className={styles.body}
-          text={page.body}
-        />
-        <Flex
-          className={styles.actions}
-          direction="row"
-        >
-          {page.actions.map((action) => {
-            if (action.icon) {
-              return (
-                <>
-                  <ButtonWithIcon
-                    key={action.label}
-                    className={clippy(styles.action, styles.actionWithIcon, "animate__animated animate__fadeInUp")}
-                    text={action.label}
-                    icon={action.icon}
-                    onClick={() => {
-                      action.onClick();
-                      if (action.changeTo) {
-                        switch (action.changeTo) {
-                          case "next":
-                            setCurrentPage(currentPage + 1);
-                            break;
-                          case "previous":
-                            if (currentPage > 0) setCurrentPage(currentPage - 1);
-                            break;
-                          case "remain":
-                            break;
-                          case "completed":
-                            setCurrentPage(pages.length + 1);
-                            break;
-                          default:
-                            break;
-                        }
-                      }
-                    }}
-                  />
-                </>
-              );
-            }
-
-            return (
-              <>
-                <Button
-                  key={action.icon}
-                  className={clippy(styles.action, styles.actionWithoutIcon, "animate__animated animate__fadeInUp")}
-                  text={action.label}
-                  onClick={() => {
-                    action.onClick();
-
-                    if (action.changeTo) {
-                      switch (action.changeTo) {
-                        case "next":
-                          setCurrentPage(currentPage + 1);
-                          break;
-                        case "previous":
-                          if (currentPage > 0) setCurrentPage(currentPage - 1);
-                          break;
-                        case "remain":
-                          break;
-                        case "completed":
-                          setCurrentPage(pages.length + 1);
-                          break;
-                        default:
-                          break;
-                      }
-                    }
-                  }}
-                />
-              </>
-            );
-          })}
-        </Flex>
-      </Card>
-    </div>
-  );
-};
-
-export default OnBoarding;
+import * as React from "react";
+import Card from "../../components/card/card.tsx";
+import { UKIcon, UKIconType } from "../../components/icon/iconDictionary.ts";
+import IconButton from "../../components/iconButton/iconButton.tsx";
+import Image from "../../components/image/image.tsx";
+import Heading from "../../components/heading/heading.tsx";
+import Text from "../../components/text/text.tsx";
+import ButtonWithIcon from "../../components/buttonWithIcon/buttonWithIcon.tsx";
+import Button from "../../components/button/button.tsx";
+import { Outlet } from "react-router";
+import styles from "./onBoarding.module.scss";
+import Flex from "../../components/flex/flex.tsx";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+
+const OnBoarding: React.FC<{
+  meta: { id: string };
+  pages: {
+    headerImage: string;
+    header: string;
+    body: string;
+    actions: {
+      label: string;
+      icon?: UKIconType;
+      onClick: () => void;
+      changeTo?: "next" | "previous" | "remain" | "completed";
+    }[];
+    allowGoBack?: boolean;
+  }[];
+}> = ({ pages, meta }) => {
+  const [currentPage, setCurrentPage] = React.useState<number>(0);
+  const page = pages[currentPage];
+
+  if (localStorage.getItem(`yourdash-application-visited-${meta.id}`) || currentPage > pages.length - 1) {
+    localStorage.setItem(`yourdash-application-visited-${meta.id}`, "true");
+
+    return <Outlet />;
+  }
+
+  return (
+    <div className={styles.page}>
+      <Card
+        className={styles.card}
+        containerClassName={styles.cardContainer}
+      >
+        {page.allowGoBack && (
+          <IconButton
+            className={clippy(styles.goBackButton, "animate__animated animate__fadeInDown")}
+            accessibleLabel="Go back to the last page"
+            icon={UKIcon.ChevronLeft}
+            onClick={() => {
+              setCurrentPage(currentPage - 1);
+            }}
+          />
+        )}
+        <Image
+          className={styles.headerImage}
+          src={page.headerImage}
+          accessibleLabel=""
+        />
+        <Heading
+          className={styles.header}
+          text={page.header}
+        />
+        <Text
+          className={styles.body}
+          text={page.body}
+        />
+        <Flex
+          className={styles.actions}
+          direction="row"
+        >
+          {page.actions.map((action) => {
+            if (action.icon) {
+              return (
+                <>
+                  <ButtonWithIcon
+                    key={action.label}
+                    className={clippy(styles.action, styles.actionWithIcon, "animate__animated animate__fadeInUp")}
+                    text={action.label}
+                    icon={action.icon}
+                    onClick={() => {
+                      action.onClick();
+                      if (action.changeTo) {
+                        switch (action.changeTo) {
+                          case "next":
+                            setCurrentPage(currentPage + 1);
+                            break;
+                          case "previous":
+                            if (currentPage > 0) setCurrentPage(currentPage - 1);
+                            break;
+                          case "remain":
+                            break;
+                          case "completed":
+                            setCurrentPage(pages.length + 1);
+                            break;
+                          default:
+                            break;
+                        }
+                      }
+                    }}
+                  />
+                </>
+              );
+            }
+
+            return (
+              <>
+                <Button
+                  key={action.icon}
+                  className={clippy(styles.action, styles.actionWithoutIcon, "animate__animated animate__fadeInUp")}
+                  text={action.label}
+                  onClick={() => {
+                    action.onClick();
+
+                    if (action.changeTo) {
+                      switch (action.changeTo) {
+                        case "next":
+                          setCurrentPage(currentPage + 1);
+                          break;
+                        case "previous":
+                          if (currentPage > 0) setCurrentPage(currentPage - 1);
+                          break;
+                        case "remain":
+                          break;
+                        case "completed":
+                          setCurrentPage(pages.length + 1);
+                          break;
+                        default:
+                          break;
+                      }
+                    }
+                  }}
+                />
+              </>
+            );
+          })}
+        </Flex>
+      </Card>
+    </div>
+  );
+};
+
+export default OnBoarding;