@yourdash/uikit 1.0.2 → 1.0.3

package/views/panAndZoom/panAndZoom.tsx

@@ -1,121 +1,121 @@
-/*
- * 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, { FC, useEffect, useRef, useState } from "react";
-
-const PanAndZoom: 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 PanAndZoom;
+/*
+ * 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, { FC, useEffect, useRef, useState } from "react";
+
+const PanAndZoom: 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 PanAndZoom;

package/views/sidebar/Sidebar.module.scss

@@ -1,49 +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)
- */
-
-@import "@yourdash/uikit/theme/themeValues";
-
-.component {
-  height: 100%;
-  background: var(#{$theme+$background});
-  pointer-events: none;
-  opacity: 0;
-  border: var(#{$theme+$border});
-  border-top: 0;
-  border-bottom: 0;
-  border-left: 0;
-  flex-direction: column;
-  max-height: 100%;
-  max-width: 0;
-  transition: transform var(#{$theme+$transition+$transition}), max-height var(#{$theme+$transition+$transition});
-  transform: translateX(-100%);
-  visibility: hidden;
-  padding: 0;
-
-  @media (max-width: $sizeTablet) {
-    max-width: 100%;
-    max-height: 0;
-    height: max-content;
-    border-right: 0;
-    border-bottom: unset;
-  }
-
-  >*[type="button"] {
-    min-width: 100%;
-  }
-}
-
-.open {
-  pointer-events: all;
-  opacity: 1;
-  transform: translateX(0);
-  visibility: visible;
-  max-width: 32rem;
-  padding: var(#{$theme+$padding});
-
-  @media (max-width: $sizeTablet) {
-    height: max-content;
-  }
-}
+/*!
+ * 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)
+ */
+
+@use "@yourdash/uikit/theme/themeValues" as *;
+
+.component {
+  height: 100%;
+  background: var(#{$theme+$background});
+  pointer-events: none;
+  opacity: 0;
+  border: var(#{$theme+$border});
+  border-top: 0;
+  border-bottom: 0;
+  border-left: 0;
+  flex-direction: column;
+  max-height: 100%;
+  max-width: 0;
+  transition: transform var(#{$theme+$transition+$transition}), max-height var(#{$theme+$transition+$transition});
+  transform: translateX(-100%);
+  visibility: hidden;
+  padding: 0;
+
+  @media (max-width: $sizeTablet) {
+    max-width: 100%;
+    max-height: 0;
+    height: max-content;
+    border-right: 0;
+    border-bottom: unset;
+  }
+
+  >*[type="button"] {
+    min-width: 100%;
+  }
+}
+
+.open {
+  pointer-events: all;
+  opacity: 1;
+  transform: translateX(0);
+  visibility: visible;
+  max-width: 32rem;
+  padding: var(#{$theme+$padding});
+
+  @media (max-width: $sizeTablet) {
+    height: max-content;
+  }
+}

package/views/sidebar/Sidebar.tsx

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

package/views/sidebar/SidebarContainer.module.scss

@@ -1,22 +1,22 @@
-/*!
- * 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 '@yourdash/uikit/theme/themeValues';
-
-.component {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-
-  &[dir=rtl] {
-    flex-direction: row-reverse;
-  }
-
-  @media (max-width: $sizeTablet) {
-    flex-direction: column;
-  }
-}
+/*!
+ * 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 '@yourdash/uikit/theme/themeValues';
+
+.component {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &[dir=rtl] {
+    flex-direction: row-reverse;
+  }
+
+  @media (max-width: $sizeTablet) {
+    flex-direction: column;
+  }
+}

package/views/sidebar/SidebarContainer.tsx

@@ -1,38 +1,38 @@
-/*
- * 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, { FC, useState } from "react";
-import SidebarContext from "./SidebarContext.tsx";
-import styles from "./SidebarContainer.module.scss";
-import clippy from "@yourdash/shared/web/helpers/clippy.ts";
-
-const SidebarContainer: FC<{ children: React.ReactNode | React.ReactNode[]; showSidebarByDefault?: boolean; className?: string }> = ({
-  children,
-  showSidebarByDefault,
-  className,
-}) => {
-  const [showSidebar, setShowSidebar] = useState<boolean>(showSidebarByDefault || true);
-
-  return (
-    <SidebarContext.Provider
-      value={{
-        closeSidebar: () => {
-          setShowSidebar(false);
-        },
-        toggleSidebar: () => {
-          setShowSidebar(!showSidebar);
-        },
-        openSidebar: () => {
-          setShowSidebar(true);
-        },
-        isOpen: showSidebar,
-      }}
-    >
-      <div className={clippy(styles.component, className)}>{children}</div>
-    </SidebarContext.Provider>
-  );
-};
-
-export default SidebarContainer;
+/*
+ * 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, { FC, useState } from "react";
+import SidebarContext from "./SidebarContext.tsx";
+import styles from "./SidebarContainer.module.scss";
+import clippy from "@yourdash/shared/web/helpers/clippy.ts";
+
+const SidebarContainer: FC<{ children: React.ReactNode | React.ReactNode[]; showSidebarByDefault?: boolean; className?: string }> = ({
+  children,
+  showSidebarByDefault,
+  className,
+}) => {
+  const [showSidebar, setShowSidebar] = useState<boolean>(showSidebarByDefault || true);
+
+  return (
+    <SidebarContext.Provider
+      value={{
+        closeSidebar: () => {
+          setShowSidebar(false);
+        },
+        toggleSidebar: () => {
+          setShowSidebar(!showSidebar);
+        },
+        openSidebar: () => {
+          setShowSidebar(true);
+        },
+        isOpen: showSidebar,
+      }}
+    >
+      <div className={clippy(styles.component, className)}>{children}</div>
+    </SidebarContext.Provider>
+  );
+};
+
+export default SidebarContainer;

package/views/sidebar/SidebarContext.tsx

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

package/views/sidebar/SidebarToggleButton.tsx

@@ -1,25 +1,25 @@
-/*
- * 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, useContext } from "react";
-import { UKIcon } from "../../components/icon/iconDictionary.ts";
-import SidebarContext from "./SidebarContext.tsx";
-import IconButton from "../../components/iconButton/iconButton.tsx";
-
-const SidebarToggleButton: FC = () => {
-  const sidebarContext = useContext(SidebarContext);
-
-  return (
-    <IconButton
-      accessibleLabel={sidebarContext.isOpen ? "Collapse Sidebar" : "Expand Sidebar"}
-      icon={sidebarContext.isOpen ? UKIcon.SidebarCollapse : UKIcon.SidebarExpand}
-      onClick={() => {
-        sidebarContext.toggleSidebar();
-      }}
-    />
-  );
-};
-
-export default SidebarToggleButton;
+/*
+ * 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, useContext } from "react";
+import { UKIcon } from "../../components/icon/iconDictionary.ts";
+import SidebarContext from "./SidebarContext.tsx";
+import IconButton from "../../components/iconButton/iconButton.tsx";
+
+const SidebarToggleButton: FC = () => {
+  const sidebarContext = useContext(SidebarContext);
+
+  return (
+    <IconButton
+      accessibleLabel={sidebarContext.isOpen ? "Collapse Sidebar" : "Expand Sidebar"}
+      icon={sidebarContext.isOpen ? UKIcon.SidebarCollapse : UKIcon.SidebarExpand}
+      onClick={() => {
+        sidebarContext.toggleSidebar();
+      }}
+    />
+  );
+};
+
+export default SidebarToggleButton;