@yourdash/uikit 1.0.9 → 1.0.11

package/components/textInput/textInput.tsx

@@ -1,82 +1,82 @@
-/*
- * 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 { UKIcon } 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?: UKIcon;
-  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 { UKIcon } 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?: UKIcon;
+  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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yourdash/uikit",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "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;

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;