@yourdash/uikit 1.0.0 → 1.0.2

package/theme/themeValues.scss

@@ -1,46 +1,49 @@
-/*!
- * 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)
- */
-
-$theme: "--ut";
-$button: "btn";
-$hover: "hvr";
-$active: "atv";
-$padding: "pdn";
-$border: "brd";
-$radius: "rad";
-$accent: "acn";
-$subcolor: "scl";
-$color: "col";
-$background: "bgn";
-$gap: "gap";
-$transition: "trn";
-$font: "fnt";
-$size: "siz";
-$weight: "wgt";
-$family: "fam";
-$vertical: "vrt";
-$horizontal: "hrt";
-$header: "hed";
-$separator: "sep";
-$height: "hei";
-$heading: "hed";
-$input: "inp";
-$focus: "foc";
-$textbutton: "txb";
-$h1: "he1";
-$h2: "he2";
-$h3: "he3";
-$h4: "he4";
-$h5: "he5";
-$h6: "he6";
-
-$sizeMobile: 440px;
-$sizeLargeMobile: 560px;
-$sizeTablet: 768px;
-$sizeLargeTablet: 960px;
-$sizeSmallDesktop: 1200px;
-$sizeMediumDesktop: 1440px;
-$sizeLargeDesktop: 1920px;
-$sizeWideDesktop: 2560px;
+/*!
+ * 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)
+ */
+
+$theme: "--ut";
+$button: "btn";
+$hover: "hvr";
+$active: "atv";
+$padding: "pdn";
+$border: "brd";
+$radius: "rad";
+$accent: "acn";
+$subcolor: "scl";
+$color: "col";
+$background: "bgn";
+$gap: "gap";
+$transition: "trans";
+$font: "font";
+$size: "size";
+$weight: "wgt";
+$family: "fam";
+$vertical: "vert";
+$horizontal: "horiz";
+$header: "hed";
+$separator: "sep";
+$height: "hei";
+$width: "wid";
+$heading: "hed";
+$input: "inp";
+$focus: "foc";
+$textbutton: "txb";
+$h1: "he1";
+$h2: "he2";
+$h3: "he3";
+$h4: "he4";
+$h5: "he5";
+$h6: "he6";
+$scrollbar: "scrlbr";
+
+
+$sizeMobile: 440px;
+$sizeLargeMobile: 560px;
+$sizeTablet: 768px;
+$sizeLargeTablet: 960px;
+$sizeSmallDesktop: 1200px;
+$sizeMediumDesktop: 1440px;
+$sizeLargeDesktop: 1920px;
+$sizeWideDesktop: 2560px;

package/tsconfig.json

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

package/views/carousel/carousel.module.scss

@@ -0,0 +1,77 @@
+@import "@yourdash/uikit/theme/themeValues";
+
+.containerComponent {
+  display: flex;
+  flex-direction: row;
+  max-width: 100%;
+  height: 24rem;
+  position: relative;
+  padding: 0;
+  overflow: hidden;
+}
+
+.component {
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  height: 24rem;
+  gap: 0.5rem;
+  padding: var(#{$theme+$padding});
+  flex-direction: row;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scroll-snap-stop: always;
+  scrollbar-width: none;
+  padding-bottom: 2.5rem;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.page {
+  display: flex;
+  width: 80%;
+  height: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: center;
+
+  &:first-of-type {
+    margin-left: calc(20% + var(#{$theme+$gap}));
+  }
+
+  &:last-of-type {
+    margin-right: calc(20% + var(#{$theme+$gap}));
+  }
+}
+
+.controls {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: row;
+  gap: var(#{$theme+$gap});
+}
+
+.indicator {
+  display: flex;
+  flex-direction: row;
+  gap: var(#{$theme+$gap});
+  padding: calc(var(#{$theme+$padding}) / 2);
+  border-radius: var(#{$theme+$radius});
+
+  .pageIndicator {
+    background-color: var(#{$theme+$color});
+    padding: 0.5rem;
+    border-radius: var(#{$theme+$radius});
+    transition: var(#{$theme+$transition});
+    position: relative;
+
+    &.selected {
+      padding-right: 1.5rem;
+      padding-left: 1.5rem;
+    }
+  }
+}

package/views/carousel/carousel.tsx

@@ -0,0 +1,138 @@
+import page from "@yourdash/web/src/deprecatedLogin/Page.tsx";
+import React, { useEffect, useRef, useState } from "react";
+import Card from "../../components/card/card.tsx";
+import Container from "../../components/container/container.tsx";
+import { UKIcon } from "../../components/icon/iconDictionary.ts";
+import IconButton from "../../components/iconButton/iconButton.tsx";
+import styles from "./carousel.module.scss";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+
+const Carousel: React.FC<{
+  items: { element: React.ReactElement; id: string }[];
+  className?: string;
+}> = ({ items, className }) => {
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const [currentPage, setCurrentPage] = useState<number>(0);
+
+  useEffect(() => {
+    const scrollElement = scrollRef.current;
+
+    if (!scrollElement) return;
+
+    console.log(Array.from(scrollElement.children));
+
+    let timer: Timer;
+    let listener = () => {
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        Array.from(scrollElement.children).forEach((ele: Element, index: number) => {
+          if (
+            Math.abs(
+              ele.getBoundingClientRect().left +
+                ele.getBoundingClientRect().width / 2 -
+                (scrollElement.getBoundingClientRect().left + scrollElement.getBoundingClientRect().width / 2),
+            ) <
+            ele.getBoundingClientRect().width / 2
+          ) {
+            setCurrentPage(index);
+            return;
+          }
+        });
+      }, 25);
+    };
+
+    scrollElement.addEventListener("scroll", listener);
+
+    return () => {
+      scrollElement.removeEventListener("scroll", listener);
+      clearTimeout(timer);
+    };
+  }, []);
+
+  return (
+    <Container className={clippy(styles.containerComponent, className)}>
+      <div
+        className={styles.component}
+        ref={scrollRef}
+      >
+        {items.map((child) => {
+          return (
+            <div
+              key={child.id}
+              className={styles.page}
+            >
+              {child.element}
+            </div>
+          );
+        })}
+      </div>
+      <div className={styles.controls}>
+        <IconButton
+          accessibleLabel={"previous page"}
+          icon={UKIcon.ChevronLeft}
+          className={styles.pageControl}
+          onClick={() => {
+            const scrollElement = scrollRef.current;
+
+            if (!scrollElement) {
+              return;
+            }
+
+            const carouselTargetPage = scrollElement.children[currentPage - 1] as HTMLDivElement;
+
+            if (!carouselTargetPage) {
+              return;
+            }
+
+            carouselTargetPage.scrollIntoView({ behavior: "smooth" });
+          }}
+        />
+        <Card className={styles.indicator}>
+          {items.map((page, index) => {
+            return (
+              <button
+                key={page.id}
+                className={clippy(styles.pageIndicator, index === currentPage && styles.selected)}
+                onClick={() => {
+                  const scrollElement = scrollRef.current;
+
+                  if (!scrollElement) {
+                    return;
+                  }
+
+                  scrollElement.scrollIntoView({ behavior: "smooth" });
+
+                  const carouselTargetPage = scrollElement.children[index] as HTMLDivElement;
+
+                  carouselTargetPage.scrollIntoView({ behavior: "smooth" });
+                }}
+              />
+            );
+          })}
+        </Card>
+        <IconButton
+          accessibleLabel={"next page"}
+          icon={UKIcon.ChevronRight}
+          className={styles.pageControl}
+          onClick={() => {
+            const scrollElement = scrollRef.current;
+
+            if (!scrollElement) {
+              return;
+            }
+
+            const carouselTargetPage = scrollElement.children[currentPage + 1] as HTMLDivElement;
+
+            if (!carouselTargetPage) {
+              return;
+            }
+
+            carouselTargetPage.scrollIntoView({ behavior: "smooth" });
+          }}
+        />
+      </div>
+    </Container>
+  );
+};
+
+export default Carousel;

package/views/header/header.module.scss

@@ -0,0 +1,16 @@
+/*!
+ * 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 "@yourdash/uikit/theme/themeValues";
+
+.view {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(#{$theme+$padding});
+  padding-top: calc(var(#{$theme+$padding}) * 4);
+  padding-bottom: calc(var(#{$theme+$padding}) * 4);
+}

package/views/header/header.tsx

@@ -0,0 +1,28 @@
+/*
+ * 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 Heading from "../../components/heading/heading.tsx";
+import styles from "./header.module.scss";
+
+const Header: React.FC<{ backgroundImage?: string; heading: string }> = ({ backgroundImage, heading }) => {
+  return (
+    <>
+      <div
+        className={styles.view}
+        style={
+          backgroundImage ? { backgroundImage: backgroundImage } : { backgroundImage: "linear-gradient(-45deg, #ff8093aa, #ffd264aa)" }
+        }
+      >
+        <Heading
+          level={1}
+          text={heading}
+        />
+      </div>
+    </>
+  );
+};
+
+export default Header;

package/views/infiniteScroll/infiniteScroll.module.scss

@@ -0,0 +1,26 @@
+/*!
+ * 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 "@yourdash/uikit/theme/themeValues";
+
+.component {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 1rem;
+  align-items: center;
+}
+
+.items {
+  height: 100%;
+}
+
+.endOfItems {
+  text-align: center;
+  padding: var(#{$theme+$padding});
+  gap: var(#{$theme+$gap});
+  width: calc(100% - calc(var(#{$theme+$padding}) * 2));
+}

package/views/infiniteScroll/infiniteScroll.tsx

@@ -0,0 +1,90 @@
+/*
+ *    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, { useEffect, useState } from "react";
+import Heading from "../../components/heading/heading.tsx";
+import Separator from "../../components/separator/separator.tsx";
+import Text from "../../components/text/text.tsx";
+import styles from "./infiniteScroll.module.scss";
+
+const InfiniteScroll: React.FC<{
+  children: React.ReactNode | React.ReactNode[];
+  fetchNextPage: (nextPageNumber: number) => Promise<{ hasAnotherPage?: boolean }>;
+  containerClassName?: string;
+  className?: string;
+  resetState?: string;
+}> = ({ children, fetchNextPage, containerClassName, className, resetState }) => {
+  const endOfItemsRef = React.useRef<HTMLDivElement>(null);
+  const lastFetchedPage = React.useRef<number>(-1);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+  const [isLastPage, setIsLastPage] = useState<boolean>(false);
+
+  useEffect(() => {
+    lastFetchedPage.current = -1;
+    setIsLoading(false);
+    setIsLastPage(false);
+    fetchNextPageWrapper();
+  }, [resetState]);
+
+  async function fetchNextPageWrapper() {
+    if (isLoading) return;
+    setIsLoading(true);
+    const { hasAnotherPage } = await fetchNextPage(lastFetchedPage.current + 1);
+    lastFetchedPage.current++;
+    setIsLoading(false);
+    setIsLastPage(hasAnotherPage || false);
+  }
+
+  useEffect(() => {
+    if (!endOfItemsRef.current) return;
+
+    const element: HTMLDivElement = endOfItemsRef.current;
+
+    const observer = new IntersectionObserver((elem) => {
+      console.log("observer update");
+      const isVisible = elem[0].isIntersecting;
+
+      if (isVisible) fetchNextPageWrapper();
+    });
+
+    observer.observe(element);
+  }, []);
+
+  // TODO: Use interaction observer to detect when the last item is shown on the screen and fetch the next page
+
+  return (
+    <div className={clippy(containerClassName, styles.component)}>
+      {/* @ts-ignore */}
+      {children?.length > 0 ? (
+        <div className={clippy(className, styles.items)}>{children}</div>
+      ) : (
+        <div className={"text-center"}>
+          <Heading
+            level={1}
+            text={"Whoops."}
+          />
+          <Separator direction={"column"} />
+          <Text text={"It looks like nothing could be found..."} />
+        </div>
+      )}
+      <div
+        ref={endOfItemsRef}
+        className={styles.endOfItems}
+      >
+        {isLoading && <Text text={"Loading more content"} />}
+        <Separator direction={"column"} />
+        {isLastPage && (
+          <Text
+            text={"No more items to load"}
+            className={styles.endOfItems}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default InfiniteScroll;

package/views/navBar/components/navImage/navImage.module.scss

@@ -0,0 +1,7 @@
+@import "../../../../theme/themeValues";
+
+.component {
+    height: calc(var(--nav-height) - var(#{$theme+$padding}));
+    aspect-ratio: 1 / 1;
+    border-radius: 0;
+}

package/views/navBar/components/navImage/navImage.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import Image from "../../../../components/image/image.tsx";
+import styles from "./navImage.module.scss";
+
+const NavImage: React.FC<{ src: string }> = ({ src }) => {
+  return (
+    <Image
+      accessibleLabel=""
+      src={src}
+      className={styles.component}
+    />
+  );
+};
+
+export default NavImage;