@yourdash/uikit 1.0.1 → 1.0.2

package/components/textInput/textInput.tsx

@@ -1,54 +1,84 @@
-/*
- * 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.js";
-import Icon from "../icon/icon.js";
-import { UKIcon } from "../icon/iconDictionary.js";
-import styles from "./textInput.module.scss";
-import { FC } from "react";
-
-// TODO: maybe remove onEnter for onSubmit
-
-const TextInput: FC<{
-  onChange?: (value: string) => void;
-  onSubmit?: (value: string) => void;
-  placeholder: string;
-  icon?: UKIcon;
-  onEnter?: (value: string) => void;
-  defaultValue?: string;
-  accessibleName: string;
-  className?: string;
-}> = (props) => {
-  return (
-    <div className={clippy(styles.component, props.className)}>
-      {props.icon && (
-        <Icon
-          className={styles.icon}
-          icon={props.icon}
-        />
-      )}
-      <input
-        aria-label={props.accessibleName}
-        defaultValue={props.defaultValue}
-        className={clippy(styles.input, !props.icon && styles.noIcon)}
-        placeholder={props.placeholder}
-        type="text"
-        onKeyUp={(e) => {
-          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>
-  );
-};
-
-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.ForwardRefExoticComponent<{
+  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, fwrdRef) => {
+  const ref = useRef<HTMLInputElement>(null);
+
+  React.useImperativeHandle(fwrdRef, () => ref.current);
+
+  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);
+      }
+    }, 500);
+  }, []);
+
+  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 = React.forwardRef(TextInputComponent);
+
+export default TextInput;

package/components/toast/toast.module.scss

@@ -1,31 +1,71 @@
 /*!
- * 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)
+ * Copyright ©2024 Ewsgit<https://ewsgit.uk> and YourDash<https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
  */
 
 .container {
   position: fixed;
-  bottom: 1rem;
-  right: 1rem;
+  top: 0;
+  right: 0;
   z-index: 10000;
+  text-align: start;
+  opacity: 0.75;
+  overflow: hidden;
+  pointer-events: none;
+  gap: 0.25rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .component {
   border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  pointer-events: none;
+  backdrop-filter: blur(1rem);
+  max-width: 32rem;
+  margin-right: 0.5rem;
+
+  &:first-child {
+    margin-top: 0.5rem;
+  }
+}
+
+.cardContent {
+  gap: 0;
+  padding: 0.25rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  margin-right: -0.5rem;
 }
 
 .success {
-  border-color: #2ea967;
+  border-right: 0.5rem solid #2ea967;
 }
 
 .error {
-  border-color: #ff4500;
+  border-right: 0.5rem solid #ff4500;
 }
 
 .warning {
-  border-color: #daa520;
+  border-right: 0.5rem solid #daa520;
 }
 
 .info {
-  border-color: #00b8ff;
+  border-right: 0.5rem solid #00b8ff;
+}
+
+.heading {
+  text-align: left;
+  line-height: 1;
+  padding-top: 0.25rem;
+}
+
+.body {
+
+}
+
+.pointerEvents {
+  pointer-events: all;
 }

package/components/toast/toast.ts

@@ -0,0 +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 type IToastAction from "./toastAction.ts";
+
+export default interface Toast {
+  type: "success" | "error" | "warning" | "info" | "debug";
+  content: { title: string; body: string; actions?: IToastAction[] };
+  persist?: boolean;
+}

package/components/toast/toastAction.ts

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

package/components/toast/toastContext.ts

@@ -1,14 +1,16 @@
-/*
- * 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 React from "react";
-
-const ToastContext = React.createContext({
-  showToast: (data: { type: "success" | "error" | "warning" | "info"; content: string; persist?: boolean }) => {
-    /* empty */
-  },
-});
-
-export default ToastContext;
+/*
+ * 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 Toast from "./toast.ts";
+
+const ToastContext = React.createContext({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  showToast: (data: Toast) => {
+    /* empty */
+  },
+});
+
+export default ToastContext;

package/components/toast/toasts.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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 generateUUID from "@yourdash/shared/web/helpers/uuid.ts";
+import Heading from "../heading/heading.tsx";
+import Separator from "../separator/separator.tsx";
+import type ToastInterface from "./toast.ts";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import { FC, useState } from "react";
+import Card from "../card/card.tsx";
+import { UKIcon } from "../icon/iconDictionary.ts";
+import IconButton from "../iconButton/iconButton.tsx";
+import Text from "../text/text.tsx";
+import ToastContext from "./toastContext.ts";
+import * as React from "react";
+// @ts-ignore
+import styles from "./toast.module.scss";
+
+const TOAST_DISPLAY_TIME = 5000;
+
+const Toasts: FC<{ children: React.ReactNode | React.ReactNode[] }> = ({ children }) => {
+  const [toasts, setToasts] = useState<(ToastInterface & { uuid: string; animatingOut: boolean })[]>([]);
+
+  return (
+    <>
+      <ToastContext.Provider
+        value={{
+          showToast: (data: ToastInterface) => {
+            const uuid = generateUUID();
+
+            setToasts((t) => [...t, { ...data, uuid: uuid, animatingOut: false }]);
+
+            if (!data.persist) {
+              setTimeout(() => {
+                setToasts((t) =>
+                  t.map((toast) => {
+                    if (uuid === toast.uuid) {
+                      return {
+                        ...toast,
+                        animatingOut: true,
+                      };
+                    }
+
+                    return toast;
+                  }),
+                );
+              }, TOAST_DISPLAY_TIME - 500);
+
+              setTimeout(() => {
+                setToasts((t) => t.filter((toast) => toast.uuid !== uuid));
+              }, TOAST_DISPLAY_TIME);
+            }
+          },
+        }}
+      >
+        <div className={styles.container}>
+          {toasts.map((t) => {
+            return (
+              <Card
+                key={t.uuid}
+                actions={
+                  t.persist ? (
+                    <IconButton
+                      accessibleLabel={"Close toast"}
+                      icon={UKIcon.X}
+                      onClick={() => setToasts((toasts) => toasts.filter((x) => x.uuid !== t.uuid))}
+                    />
+                  ) : null
+                }
+                className={clippy(styles.cardContent, t.type && styles[t.type])}
+                containerClassName={clippy(
+                  styles.component,
+                  t.persist && styles.pointerEvents,
+                  t.animatingOut ? "animate__animated animate__fadeOutRightBig" : "animate__animated animate__fadeInDown",
+                )}
+              >
+                <Heading
+                  className={styles.heading}
+                  level={3}
+                  text={t.content.title}
+                />
+                <Separator direction={"column"} />
+                <Text
+                  className={styles.body}
+                  text={t.content.body}
+                />
+              </Card>
+            );
+          })}
+        </div>
+        {children}
+      </ToastContext.Provider>
+    </>
+  );
+};
+
+export default Toasts;

package/core/decrementLevel.tsx

@@ -3,7 +3,7 @@
  * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
  */
 
-import LevelContext, { useLevel } from "./level";
+import LevelContext, { useLevel } from "./level.tsx";
 import { FC } from "react";
 
 const DecrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {

package/core/incrementLevel.tsx

@@ -1,13 +1,13 @@
-/*
- * 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 LevelContext, { useLevel } from "./level";
-import { FC } from "react";
-
-const IncrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
-  return <LevelContext.Provider value={useLevel() + 1}>{props.children}</LevelContext.Provider>;
-};
-
-export default IncrementLevel;
+/*
+ * 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 LevelContext, { useLevel } from "./level.tsx";
+import { FC } from "react";
+
+const IncrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
+  return <LevelContext.Provider value={useLevel() + 1}>{props.children}</LevelContext.Provider>;
+};
+
+export default IncrementLevel;

package/core/level.tsx

@@ -1,27 +1,27 @@
-/*
- * 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 { createContext, useContext } from "react";
-import styles from "./../theme/defaultTheme.module.scss";
-
-const LevelContext = createContext(0);
-export default LevelContext;
-
-export const useLevel = () => useContext(LevelContext);
-
-export const useLevelClass = (level: number): string => {
-  switch (level) {
-    case 0:
-      return styles.level0;
-    case 1:
-      return styles.level1;
-    case 2:
-      return styles.level2;
-    case 3:
-      return styles.level3;
-    default:
-      return styles.level0;
-  }
-};
+/*
+ * 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 { createContext, useContext } from "react";
+import styles from "../theme/defaultTheme.module.scss";
+
+const LevelContext = createContext(0);
+export default LevelContext;
+
+export const useLevel = () => useContext(LevelContext);
+
+export const useLevelClass = (level: number): string => {
+  switch (level) {
+    case 0:
+      return styles.level0;
+    case 1:
+      return styles.level1;
+    case 2:
+      return styles.level2;
+    case 3:
+      return styles.level3;
+    default:
+      return styles.level0;
+  }
+};

package/core/remToPx.ts

@@ -0,0 +1,8 @@
+/*
+ * Copyright ©2024 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+export default function remToPx(rem: number) {
+  return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+}

package/core/root.tsx

@@ -1,29 +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)
+ * 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.js";
-import isMobileDevice from "@yourdash/shared/web/helpers/isPhone.js";
-import ContextMenuRoot from "../components/contextMenu/contextMenuRoot.js";
-import Toast from "../components/toast/toast.js";
-import LevelContext from "./level.js";
-import styles from "./../theme/defaultTheme.module.scss";
-import React, { FC, useEffect, useState } from "react";
-
-const UIKitRoot: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
-  const [isMobile, setIsMobile] = useState<boolean>(false);
-
-  useEffect(() => {
-    setIsMobile(isMobileDevice());
-  }, []);
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+import isMobileDevice from "@yourdash/shared/web/helpers/isPhone.ts";
+import ContextMenuRoot from "../components/contextMenu/contextMenuRoot.tsx";
+import Toasts from "../components/toast/toasts.tsx";
+import styles from "../theme/defaultTheme.module.scss";
+import React from "react";
+import LevelContext from "./level.tsx";
 
+const UIKitRoot: React.FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
   return (
-    <div className={clippy(styles.theme, styles.level0, isMobile && styles.mobile)}>
+    <div className={clippy(styles.theme, styles.level0, isMobileDevice() && styles.mobile)}>
       <ContextMenuRoot>
-        <Toast>
+        <Toasts>
           <LevelContext.Provider value={0}>{props.children}</LevelContext.Provider>
-        </Toast>
+        </Toasts>
       </ContextMenuRoot>
     </div>
   );

package/core/toast.ts

@@ -1,16 +1,17 @@
 /*
- * 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)
+ * 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 ToastContext from "../components/toast/toastContext.js";
+import Toast from "../components/toast/toast.ts";
+import ToastContext from "../components/toast/toastContext.ts";
 
 export default function useToast() {
   const toastCtx = React.useContext(ToastContext);
 
   return {
-    create(data: { type: "success" | "error" | "warning" | "info"; content: string; persist?: boolean }) {
+    create(data: Toast) {
       toastCtx.showToast(data);
     },
   };

package/imports.d.ts

@@ -0,0 +1,81 @@
+/*
+ * Copyright ©2023 @Ewsgit and YourDash contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+// Declare common file imports as shared for the Typescript Language Server
+
+declare module "*.module.css" {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module "*.module.scss" {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module "*.jpg" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.png" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.svg" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.avif" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.css" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.scss" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.json" {
+  const content: { [className: string]: string };
+  export default content;
+}
+
+declare module "*.obj" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.glb" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.gltf" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.md" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.mdx" {
+  const value: string;
+  export default value;
+}
+
+declare module "*.wasm" {
+  const value: string;
+  export default value;
+}