@yourdash/uikit 1.0.23 → 1.0.24

package/package.json

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

package/src/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[]; className?: string }> = ({ children, className }) => {
+  return <div className={clippy(styles.component, className)}>{children}</div>;
+};
+
+export default ButtonCombo;

package/src/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/src/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/views/onBoarding/onBoarding.tsx~

@@ -1,138 +0,0 @@
-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)}
-                    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;