@yourdash/uikit 1.0.1 → 1.0.3

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

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

@@ -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 DecrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
-  return <LevelContext.Provider value={useLevel() - 1}>{props.children}</LevelContext.Provider>;
-};
-
-export default DecrementLevel;
+/*
+ * 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 DecrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
+  return <LevelContext.Provider value={useLevel() - 1}>{props.children}</LevelContext.Provider>;
+};
+
+export default DecrementLevel;

package/core/incrementLevel.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 IncrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {

package/core/level.tsx

@@ -4,7 +4,7 @@
  */
 
 import { createContext, useContext } from "react";
-import styles from "./../theme/defaultTheme.module.scss";
+import styles from "../theme/defaultTheme.module.scss";
 
 const LevelContext = createContext(0);
 export default LevelContext;

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,32 +1,26 @@
-/*
- * 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 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());
-  }, []);
-
-  return (
-    <div className={clippy(styles.theme, styles.level0, isMobile && styles.mobile)}>
-      <ContextMenuRoot>
-        <Toast>
-          <LevelContext.Provider value={0}>{props.children}</LevelContext.Provider>
-        </Toast>
-      </ContextMenuRoot>
-    </div>
-  );
-};
-
-export default UIKitRoot;
+/*
+ * 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 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, isMobileDevice() && styles.mobile)}>
+      <ContextMenuRoot>
+        <Toasts>
+          <LevelContext.Provider value={0}>{props.children}</LevelContext.Provider>
+        </Toasts>
+      </ContextMenuRoot>
+    </div>
+  );
+};
+
+export default UIKitRoot;

package/core/toast.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yourdash/uikit",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -8,44 +8,13 @@
   },
   "author": "Ewsgit <ewsgit@duck.com>",
   "dependencies": {
-    "@loadable/component": "^5.15.3",
-    "@remix-run/router": "^1.15.3",
-    "@tailwindcss/container-queries": "^0.1.1",
-    "@types/express": "^4.17.21",
-    "@types/loadable__component": "^5.13.7",
-    "@types/minimist": "^1.2.2",
-    "@types/node": "^20.1.4",
-    "@types/path-browserify": "^1.0.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^5.59.11",
-    "@typescript-eslint/parser": "^5.59.11",
-    "@vitejs/plugin-react-swc": "^3.3.2",
-    "animate.css": "^4.1.1",
-    "autoprefixer": "^10.4.15",
-    "clsx": "^2.0.0",
-    "concurrently": "^8.2.2",
-    "cross-env": "^7.0.3",
-    "es-abstract": "^1.22.1",
-    "eslint": "^8.47.0",
-    "minimist": "^1.2.8",
-    "path": "^0.12.7",
-    "path-browserify": "^1.0.1",
-    "path-to-regexp": "^6.2.1",
-    "postcss": "^8.4.27",
     "react": "^18.3.1",
-    "react-dom": "^18.2.0",
-    "react-router": "^6.15.0",
-    "react-router-dom": "^6.15.0",
-    "sass": "^1.65.1",
-    "socket.io-client": "^4.6.1",
-    "type-fest": "^4.14.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.4.9",
-    "vite-plugin-dynamic-import": "^1.5.0",
-    "web-tree-sitter": "^0.20.8",
-    "xml2js": "^0.6.2",
-    "yarn": "^1.22.19",
-    "@yourdash/shared": "^1.0.0"
+    "react-dom": "^18.3.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^5.6.2",
+    "sass": "^1.78.0",
+    "vite": "^5.4.5",
+    "@yourdash/shared": "workspace:*"
   }
-}
+}

package/theme/defaultTheme.module.scss

@@ -6,14 +6,23 @@
 @import "./themeValues";
 
 .theme {
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+
+  background: var(#{$theme+$background});
   #{$theme}-author: "Ewsgit";
   #{$theme}-name: "YourDash Classic Dark";
   #{$theme}-version: "0.0.1";
 
-  background: var(#{$theme+$background});
-  height: 100%;
-  overflow-x: hidden;
-  overflow-y: auto;
+  ::-webkit-scrollbar {
+    width: var(#{$theme+$scrollbar+$width});
+    border-radius: 0;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: var(#{$theme+$scrollbar+$radius});
+  }
 }
 
 .level0 {
@@ -28,8 +37,11 @@
   #{$theme+$padding}: 1rem;
   #{$theme+$gap}: 0.5rem;
   #{$theme+$transition}: all 200ms ease-in-out;
+  #{$theme+$transition+$transition}: 200ms ease-in-out;
   #{$theme+$separator+$size}: 0.125rem;
   #{$theme+$separator+$color}: #444444;
+  #{$theme+$scrollbar+$width}: 0.4rem;
+  #{$theme+$scrollbar+$radius}: 0.1rem;
 
   // heading
   #{$theme+$heading+$h1+$weight}: 900;

package/theme/themeValues.scss

@@ -15,16 +15,17 @@ $subcolor: "scl";
 $color: "col";
 $background: "bgn";
 $gap: "gap";
-$transition: "trn";
-$font: "fnt";
-$size: "siz";
+$transition: "trans";
+$font: "font";
+$size: "size";
 $weight: "wgt";
 $family: "fam";
-$vertical: "vrt";
-$horizontal: "hrt";
+$vertical: "vert";
+$horizontal: "horiz";
 $header: "hed";
 $separator: "sep";
 $height: "hei";
+$width: "wid";
 $heading: "hed";
 $input: "inp";
 $focus: "foc";
@@ -35,6 +36,8 @@ $h3: "he3";
 $h4: "he4";
 $h5: "he5";
 $h6: "he6";
+$scrollbar: "scrlbr";
+
 
 $sizeMobile: 440px;
 $sizeLargeMobile: 560px;

package/tsconfig.json

@@ -1,20 +1,30 @@
 {
   "compilerOptions": {
-    "strict": true,
     "target": "ESNext",
     "module": "ESNext",
-    "moduleResolution": "node",
+    "useDefineForClassFields": true,
+    "lib": [
+      "DOM",
+      "DOM.Iterable",
+      "ESNext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
     "allowSyntheticDefaultImports": true,
-    "esModuleInterop": true,
-    "jsx": "preserve",
-    "jsxImportSource": "react",
-    "types": ["vite/client"],
-    "noEmit": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
     "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx"
   },
   "include": [
     "./**/*",
-    "../applications/**/frontend/**/*",
-    "../shared/**/*"
+    "../shared/**/*",
+    "../web"
   ]
 }

package/utilityComponent/hasBeenShown/hasBeenShown.tsx

@@ -0,0 +1,47 @@
+/*
+ * 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, useEffect, useRef, useState } from "react";
+
+const HasBeenShown: FC<{
+  className?: string;
+  onSeen: () => void;
+}> = ({ className, onSeen }) => {
+  const [hasBeenSeen, setHasBeenSeen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const current = ref.current;
+
+    const observer = new IntersectionObserver((interaction) => {
+      if (interaction[0].isIntersecting) {
+        onSeen();
+        observer.disconnect();
+        setHasBeenSeen(true);
+      }
+    });
+
+    observer.observe(current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  if (hasBeenSeen) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={ref}
+      className={className}
+    />
+  );
+};
+
+export default HasBeenShown;

package/utilityComponent/onInView/onInView.tsx

@@ -0,0 +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 { FC, useEffect, useRef } from "react";
+
+const OnInView: FC<{
+  className?: string;
+  onEnterView?: (direction: "up" | "down" | "left" | "right") => void;
+  onLeaveView?: (direction: "up" | "down" | "left" | "right") => void;
+}> = ({ className, onEnterView, onLeaveView }) => {
+  const isInView = useRef(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+
+    const current = ref.current;
+
+    const handleScroll = () => {
+      const { top, bottom, left, right } = current.getBoundingClientRect();
+
+      if (!isInView.current) {
+        if (top < 0) {
+          onEnterView?.("up");
+          isInView.current = true;
+          return;
+        } else if (bottom > window.innerHeight) {
+          onEnterView?.("down");
+          isInView.current = true;
+          return;
+        } else if (left < 0) {
+          onEnterView?.("left");
+          isInView.current = true;
+          return;
+        } else if (right > window.innerWidth) {
+          onEnterView?.("right");
+          isInView.current = true;
+          return;
+        }
+      }
+
+      if (top > window.innerHeight) {
+        onLeaveView?.("down");
+        isInView.current = false;
+        return;
+      } else if (bottom < 0) {
+        onLeaveView?.("up");
+        isInView.current = false;
+        return;
+      } else if (left > window.innerWidth) {
+        onLeaveView?.("right");
+        isInView.current = false;
+        return;
+      } else if (right < 0) {
+        onLeaveView?.("left");
+        isInView.current = false;
+        return;
+      }
+    };
+
+    const observer = new IntersectionObserver(() => {
+      handleScroll();
+    });
+
+    observer.observe(current);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      style={{ height: 1, width: 1 }}
+      className={className}
+    />
+  );
+};
+
+export default OnInView;