@yourdash/uikit 0.0.1 → 0.1.1

package/lib/views/navBar/navBar.module.css

@@ -0,0 +1,26 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.component {
+  --nav-height: calc(2rem + var(--utpdn));
+  width: 100%;
+  height: calc(var(--nav-height) + var(--utpdn) * 2);
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  padding: var(--utpdn);
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  justify-content: center;
+  align-items: center;
+}
+
+.segment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/*# sourceMappingURL=navBar.module.css.map */

package/lib/views/navBar/navBar.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../theme/themeValues.scss","navBar.module.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACEA;EACI;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA","file":"navBar.module.css"}

package/lib/views/navBar/navBar.module.scss

@@ -0,0 +1,22 @@
+@use "../../theme/themeValues.scss" as *;
+
+.component {
+    --nav-height: calc(2rem + var(#{$theme+$padding}));
+
+    width: 100%;
+    height: calc(var(--nav-height) + calc(var(#{$theme+$padding}) * 2));
+    border-top: 0;
+    border-left: 0;
+    border-right: 0;
+    padding: var(#{$theme+$padding});
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    justify-content: center;
+    align-items: center;
+}
+
+.segment {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

package/lib/views/onBoarding/UKOnBoarding.tsx

@@ -0,0 +1,146 @@
+import * as React from "react";
+import UKCard from "../../components/card/UKCard.tsx";
+import { UKIcons, UKIconType } from "../../core/iconDictionary.ts";
+import UKIconButton from "../../components/iconButton/UKIconButton.tsx";
+import UKImage from "../../components/image/UKImage.tsx";
+import UKHeading from "../../components/heading/UKHeading.tsx";
+import UKText from "../../components/text/UKText.tsx";
+import UKButtonWithIcon from "../../components/buttonWithIcon/UKButtonWithIcon.tsx";
+import UKButton from "../../components/button/UKButton.tsx";
+import { Outlet } from "react-router";
+import styles from "./onBoarding.module.scss";
+import UKFlex from "../../components/flex/UKFlex.tsx";
+import clippy from "../../core/clippy.ts";
+import UKSeparator from "../../components/separator/UKSeparator.tsx";
+
+const UKOnBoarding: React.FC<{
+  applicationId: string;
+  pages: {
+    headerImage: string;
+    header: string;
+    body: string;
+    actions: {
+      label: string;
+      icon?: UKIconType;
+      onClick?: () => void;
+      changeTo?: "next" | "previous" | "remain" | "completed";
+    }[];
+    allowGoBack?: boolean;
+  }[];
+}> = ({ pages, applicationId }) => {
+  const [currentPage, setCurrentPage] = React.useState<number>(0);
+  const page = pages[currentPage];
+
+  if (localStorage.getItem(`yourdash-application-visited-${applicationId}`) || currentPage > pages.length - 1) {
+    localStorage.setItem(`yourdash-application-visited-${applicationId}`, "true");
+
+    return <Outlet />;
+  }
+
+  return (
+    <div className={styles.page}>
+      <UKCard
+        className={styles.card}
+        containerClassName={styles.cardContainer}
+      >
+        {page.allowGoBack && (
+          <UKIconButton
+            key={"GoBackButton"}
+            className={clippy(styles.goBackButton, "animate__animated animate__fadeInDown")}
+            accessibleLabel="Go back to the last page"
+            icon={UKIcons.ChevronLeft}
+            onClick={() => {
+              setCurrentPage(currentPage - 1);
+            }}
+          />
+        )}
+        <UKImage
+          className={styles.headerImage}
+          src={page.headerImage}
+          accessibleLabel=""
+        />
+        <UKHeading
+          className={styles.header}
+          text={page.header}
+        />
+        <UKSeparator direction={"column"} />
+        <UKText
+          className={styles.body}
+          text={page.body}
+        />
+        <UKFlex
+          className={styles.actions}
+          direction="row"
+        >
+          {page.actions.map((action) => {
+            if (action.icon) {
+              return (
+                <>
+                  <UKButtonWithIcon
+                    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 (
+              <>
+                <UKButton
+                  key={action.label}
+                  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;
+                      }
+                    }
+                  }}
+                />
+              </>
+            );
+          })}
+        </UKFlex>
+      </UKCard>
+    </div>
+  );
+};
+
+export default UKOnBoarding;

package/lib/views/onBoarding/onBoarding.module.css

@@ -0,0 +1,74 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  animation: fadeIn 1s 0s cubic-bezier(0.215, 0.61, 0.355, 1);
+}
+.page::before {
+  content: "";
+  background-image: url("/assets/productLogos/yourdash.svg");
+  background-size: 20rem;
+  background-repeat: repeat;
+  width: 1000rem;
+  height: 1000rem;
+  position: absolute;
+  filter: blur(0.25rem) grayscale(1);
+  opacity: 0.1;
+  transform: rotate(-45deg);
+  z-index: -1;
+}
+@keyframes fadeIn {
+  from {
+    transform: translateY(2.5rem);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: calc(var(--utgap) * 2);
+  padding: 2rem;
+  position: relative;
+  transition: var(--transition);
+}
+
+.cardContainer {
+  box-shadow: rgba(0, 0, 0, 0.5333333333) 0 0 4rem;
+}
+
+.goBackButton {
+  position: absolute;
+  top: var(--utpdn);
+  left: var(--utpdn);
+}
+
+.headerImage {
+  height: 16rem;
+}
+
+.header {
+  line-height: 1;
+  text-align: center;
+}
+
+.body {
+  text-align: center;
+}
+
+/*# sourceMappingURL=onBoarding.module.css.map */

package/lib/views/onBoarding/onBoarding.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../theme/themeValues.scss","onBoarding.module.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;IACE;IACA;;EAEF;IACE;IACA;;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE","file":"onBoarding.module.css"}

package/lib/views/onBoarding/onBoarding.module.scss

@@ -0,0 +1,84 @@
+@use "../../theme/themeValues.scss" as *;
+
+.page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  animation: fadeIn 1s 0s cubic-bezier(0.215, 0.610, 0.355, 1);
+
+  &::before {
+    content: "";
+    //noinspection CssUnknownTarget
+    background-image: url("/assets/productLogos/yourdash.svg");
+    background-size: 20rem;
+    background-repeat: repeat;
+    width: 1000rem;
+    height: 1000rem;
+    position: absolute;
+    filter: blur(0.25rem) grayscale(1);
+    opacity: 0.1;
+    transform: rotate(-45deg);
+    z-index: -1;
+  }
+
+  @keyframes fadeIn {
+    from {
+      transform: translateY(2.5rem);
+      opacity: 0;
+    }
+    to {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+}
+
+.card {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: calc(var(#{$theme+$gap}) * 2);
+  padding: 2rem;
+  position: relative;
+  transition: var(--transition);
+}
+
+.cardContainer {
+  box-shadow: #00000088 0 0 4rem;
+}
+
+.goBackButton {
+  position: absolute;
+  top: var(#{$theme+$padding});
+  left: var(#{$theme+$padding});
+}
+
+.headerImage {
+  height: 16rem;
+}
+
+.header {
+  line-height: 1;
+  text-align: center;
+}
+
+.body {
+  text-align: center;
+}
+
+.actions {
+}
+
+.action {
+}
+
+.actionWithoutIcon {
+}
+
+.actionWithIcon {
+}

package/lib/views/pageHeader/UKPageHeader.tsx

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

package/lib/views/pageHeader/header.module.css

@@ -0,0 +1,20 @@
+@charset "UTF-8";
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+.view {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--utpdn);
+  padding-top: calc(var(--utpdn) * 4);
+  padding-bottom: calc(var(--utpdn) * 4);
+}
+
+/*# sourceMappingURL=header.module.css.map */

package/lib/views/pageHeader/header.module.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["header.module.scss","../../theme/themeValues.scss"],"names":[],"mappings":";AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;ADOA;EACE;EACA;EACA;EACA;EACA;EACA;EACA","file":"header.module.css"}

package/lib/views/pageHeader/header.module.scss

@@ -0,0 +1,16 @@
+/*!
+ * Copyright ©2025 Ewsgit <https://ewsgit.uk> and YourDash <https://yourdash.ewsgit.uk> contributors.
+ * YourDash is licensed under the MIT License. (https://mit.ewsgit.uk)
+ */
+
+@use "../../theme/themeValues.scss" as *;
+
+.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/lib/views/panAndZoom/UKPanAndZoom.tsx

@@ -0,0 +1,121 @@
+/*
+ * Copyright ©2025 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, { FC, useEffect, useRef, useState } from "react";
+
+const UKPanAndZoom: FC<{ children: React.ReactNode; minZoom?: number; maxZoom?: number; onScaleChange?: (scale: number) => void }> = ({
+  children,
+  minZoom,
+  maxZoom,
+  onScaleChange,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [translateX, setTranslateX] = useState(0);
+  const [translateY, setTranslateY] = useState(0);
+  const [scale, setScale] = useState(1);
+
+  if (onScaleChange) {
+    useEffect(() => {
+      onScaleChange(scale);
+    }, [scale]);
+  }
+
+  const handleWheel = (event: WheelEvent) => {
+    event.stopPropagation();
+    const delta = event.deltaY;
+    const newScale = scale + delta / 1000;
+    setScale(Math.min(Math.max(newScale, minZoom ?? 0.1), maxZoom ?? 10));
+  };
+
+  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    const startX = event.clientX;
+    const startY = event.clientY;
+    const startTranslateX = translateX;
+    const startTranslateY = translateY;
+
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const handleMouseMove = (event: MouseEvent) => {
+      event.stopPropagation();
+      const deltaX = event.clientX - startX;
+      const deltaY = event.clientY - startY;
+      setTranslateX(startTranslateX + deltaX);
+      setTranslateY(startTranslateY + deltaY);
+    };
+
+    const handleMouseUp = () => {
+      event.stopPropagation();
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  };
+
+  const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
+    event.stopPropagation();
+    const startTouches = event.touches;
+    const startTranslateX = translateX;
+    const startTranslateY = translateY;
+
+    // eslint-disable-next-line @typescript-eslint/no-shadow
+    const handleTouchMove = (event: TouchEvent) => {
+      event.stopPropagation();
+      const currentTouches = event.touches;
+      const deltaX = currentTouches[0].clientX - startTouches[0].clientX;
+      const deltaY = currentTouches[0].clientY - startTouches[0].clientY;
+      setTranslateX(startTranslateX + deltaX);
+      setTranslateY(startTranslateY + deltaY);
+    };
+
+    const handleTouchEnd = () => {
+      event.stopPropagation();
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+    };
+
+    document.addEventListener("touchmove", handleTouchMove);
+    document.addEventListener("touchend", handleTouchEnd);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+      onWheel={handleWheel as unknown as React.WheelEventHandler<HTMLDivElement>}
+      onMouseDown={handleMouseDown}
+      onTouchStart={handleTouchStart}
+      onDragStart={(event) => {
+        event.stopPropagation();
+        event.preventDefault();
+      }}
+      onContextMenu={(event) => {
+        event.preventDefault();
+        event.stopPropagation();
+      }}
+    >
+      <div
+        style={{
+          transform: `translate(${translateX}px, ${translateY}px) scale(${scale})`,
+          transformOrigin: "center center",
+          maxWidth: "max-content",
+          pointerEvents: "none",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default UKPanAndZoom;

package/lib/views/sidebar/UKSidebar.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright ©2025 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 UKFlex from "../../components/flex/UKFlex.tsx";
+import clippy from "../../core/clippy.ts";
+import IncrementLevel from "../../core/incrementLevel.tsx";
+import { useLevel, useLevelClass } from "../../core/level.tsx";
+import styles from "./sidebar.module.scss";
+import UKSidebarContext from "./UKSidebarContext.tsx";
+import { FC, useContext } from "react";
+
+const UKSidebar: FC<{ children: React.ReactNode | React.ReactNode[] }> = ({ children }) => {
+  const sidebarContext = useContext(UKSidebarContext);
+  const level = useLevel();
+
+  return (
+    <IncrementLevel>
+      <UKFlex
+        direction={"column"}
+        className={clippy(styles.component, sidebarContext.isOpen && styles.open, useLevelClass(level + 1))}
+      >
+        {children}
+      </UKFlex>
+    </IncrementLevel>
+  );
+};
+
+export default UKSidebar;

package/lib/views/sidebar/UKSidebarContainer.tsx

@@ -0,0 +1,38 @@
+/*
+ * Copyright ©2025 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, { FC, useState } from "react";
+import clippy from "../../core/clippy.js";
+import UKSidebarContext from "./UKSidebarContext.tsx";
+import styles from "./sidebarContainer.module.scss";
+
+const UKSidebarContainer: FC<{ children: React.ReactNode | React.ReactNode[]; showSidebarByDefault?: boolean; className?: string }> = ({
+  children,
+  showSidebarByDefault,
+  className,
+}) => {
+  const [showSidebar, setShowSidebar] = useState<boolean>(showSidebarByDefault || true);
+
+  return (
+    <UKSidebarContext.Provider
+      value={{
+        closeSidebar: () => {
+          setShowSidebar(false);
+        },
+        toggleSidebar: () => {
+          setShowSidebar(!showSidebar);
+        },
+        openSidebar: () => {
+          setShowSidebar(true);
+        },
+        isOpen: showSidebar,
+      }}
+    >
+      <div className={clippy(styles.component, className)}>{children}</div>
+    </UKSidebarContext.Provider>
+  );
+};
+
+export default UKSidebarContainer;

package/lib/views/sidebar/UKSidebarContext.tsx

@@ -0,0 +1,15 @@
+/*
+ * Copyright ©2025 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 } from "react";
+
+const UKSidebarContext = createContext({
+  openSidebar: () => {},
+  closeSidebar: () => {},
+  toggleSidebar: () => {},
+  isOpen: true,
+});
+
+export default UKSidebarContext;

package/lib/views/sidebar/UKSidebarToggleButton.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright ©2025 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, { FC, useContext } from "react";
+import { UKIcons } from "../../core/iconDictionary.ts";
+import UKSidebarContext from "./UKSidebarContext.tsx";
+import UKIconButton from "../../components/iconButton/UKIconButton.tsx";
+
+const UKSidebarToggleButton: FC<{ className?: string; style?: React.CSSProperties }> = ({ className, style }) => {
+  const sidebarContext = useContext(UKSidebarContext);
+
+  return (
+    <UKIconButton
+      style={style}
+      className={className}
+      accessibleLabel={sidebarContext.isOpen ? "Collapse UKSidebar" : "Expand UKSidebar"}
+      icon={sidebarContext.isOpen ? UKIcons.SidebarCollapse : UKIcons.SidebarExpand}
+      onClick={() => {
+        sidebarContext.toggleSidebar();
+      }}
+    />
+  );
+};
+
+export default UKSidebarToggleButton;