base

plane-src/packages/hooks/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+export * from "./use-hash-scroll";
+export * from "./use-local-storage";
+export * from "./use-outside-click-detector";
+export * from "./use-platform-os";

plane-src/packages/hooks/src/use-hash-scroll.ts

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+
+type TArgs = {
+  elementId: string;
+  pathname: string;
+  scrollDelay?: number;
+};
+
+type TReturnType = {
+  isHashMatch: boolean;
+  hashIds: string[];
+  scrollToElement: () => boolean;
+};
+
+/**
+ * Custom hook for handling hash-based scrolling to a specific element
+ * Supports multiple IDs in URL hash (comma-separated, space-separated, or other delimiters)
+ *
+ * @param {TArgs} args - The ID of the element to scroll to
+ * @returns {TReturnType} Object containing hash match status and scroll function
+ */
+export const useHashScroll = (args: TArgs): TReturnType => {
+  const { elementId, pathname, scrollDelay = 200 } = args;
+  // State to track if the current hash contains the provided element ID
+  const [isHashMatch, setIsHashMatch] = useState(false);
+  // State to track all IDs found in the hash
+  const [hashIds, setHashIds] = useState<string[]>([]);
+
+  /**
+   * Scrolls to the element with the provided ID
+   * @returns {boolean} - Whether the scroll was successful
+   */
+  const scrollToElement = useCallback((): boolean => {
+    try {
+      const element = document.getElementById(elementId);
+
+      if (element) {
+        setTimeout(() => {
+          element.scrollIntoView({
+            behavior: "smooth",
+            block: "nearest",
+          });
+        }, scrollDelay);
+
+        return true;
+      }
+
+      return false;
+    } catch (error) {
+      console.warn("Hash scroll error:", error);
+      return false;
+    }
+  }, [elementId, scrollDelay]);
+
+  /**
+   * Extracts multiple IDs from hash string
+   * Supports various delimiters: comma, space, pipe, semicolon
+   * @param {string} hashString - The hash part of the URL
+   * @returns {string[]} - Array of clean ID strings
+   */
+  const extractIdsFromHash = (hashString: string | null): string[] => {
+    if (!hashString) return [];
+
+    // Split by common delimiters and clean up
+    return hashString
+      .split(/[,\s|;]+/) // Split by comma, space, pipe, or semicolon
+      .map((id) => id.trim()) // Remove whitespace
+      .filter((id) => id.length > 0); // Remove empty strings
+  };
+
+  /**
+   * Get current hash from window.location
+   * @returns {string | null} - Current hash without the # symbol
+   */
+  const getCurrentHash = (): string | null => {
+    if (typeof window === "undefined") return null;
+    const hash = window.location.hash;
+    return hash ? hash.slice(1) : null; // Remove the # symbol
+  };
+
+  // Effect to handle hash changes and initial load
+  useEffect(() => {
+    if (!elementId) {
+      setIsHashMatch(false);
+      setHashIds([]);
+      return;
+    }
+
+    const handleHashChange = () => {
+      const hash = getCurrentHash();
+
+      // Extract all IDs from the hash
+      const idsInHash = extractIdsFromHash(hash);
+      setHashIds(idsInHash);
+
+      // Check if provided element ID is present in the hash
+      const hashMatches = idsInHash.includes(elementId);
+      setIsHashMatch(hashMatches);
+
+      // If hash matches, attempt to scroll to the element
+      if (hashMatches) {
+        scrollToElement();
+      }
+    };
+
+    // Handle initial load
+    handleHashChange();
+
+    // Listen for hash changes
+    window.addEventListener("hashchange", handleHashChange);
+
+    return () => {
+      window.removeEventListener("hashchange", handleHashChange);
+    };
+  }, [elementId, pathname, scrollToElement]); // Include pathname to handle route changes
+
+  // Return object with hash match status and utility functions
+  return {
+    // Whether the current URL hash contains the provided element ID
+    isHashMatch,
+
+    // Array of all IDs found in the current hash
+    hashIds,
+
+    // Manually trigger scroll to the element
+    scrollToElement,
+  };
+};

plane-src/packages/hooks/src/use-local-storage.tsx

@@ -0,0 +1,61 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect, useCallback } from "react";
+
+export const getValueFromLocalStorage = (key: string, defaultValue: any) => {
+  if (typeof window === "undefined" || typeof window === "undefined") return defaultValue;
+  try {
+    const item = window.localStorage.getItem(key);
+    return item ? JSON.parse(item) : defaultValue;
+  } catch (_error) {
+    window.localStorage.removeItem(key);
+    return defaultValue;
+  }
+};
+
+export const setValueIntoLocalStorage = (key: string, value: any) => {
+  if (typeof window === "undefined" || typeof window === "undefined") return false;
+  try {
+    window.localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  } catch (_error) {
+    return false;
+  }
+};
+
+export const useLocalStorage = <T,>(key: string, initialValue: T) => {
+  const [storedValue, setStoredValue] = useState<T | null>(() => getValueFromLocalStorage(key, initialValue));
+
+  const setValue = useCallback(
+    (value: T) => {
+      window.localStorage.setItem(key, JSON.stringify(value));
+      setStoredValue(value);
+      window.dispatchEvent(new Event(`local-storage:${key}`));
+    },
+    [key]
+  );
+
+  const clearValue = useCallback(() => {
+    window.localStorage.removeItem(key);
+    setStoredValue(null);
+    window.dispatchEvent(new Event(`local-storage:${key}`));
+  }, [key]);
+
+  const reHydrate = useCallback(() => {
+    const data = getValueFromLocalStorage(key, initialValue);
+    setStoredValue(data);
+  }, [key, initialValue]);
+
+  useEffect(() => {
+    window.addEventListener(`local-storage:${key}`, reHydrate);
+    return () => {
+      window.removeEventListener(`local-storage:${key}`, reHydrate);
+    };
+  }, [key, reHydrate]);
+
+  return { storedValue, setValue, clearValue } as const;
+};

plane-src/packages/hooks/src/use-outside-click-detector.tsx

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import type React from "react";
+import { useEffect } from "react";
+
+export const useOutsideClickDetector = (
+  ref: React.RefObject<HTMLElement> | any,
+  callback: () => void,
+  useCapture = false
+) => {
+  const handleClick = (event: MouseEvent) => {
+    if (ref.current && !ref.current.contains(event.target as any)) {
+      // check for the closest element with attribute name data-prevent-outside-click
+      const preventOutsideClickElement = (event.target as unknown as HTMLElement | undefined)?.closest(
+        "[data-prevent-outside-click]"
+      );
+      // if the closest element with attribute name data-prevent-outside-click is found, return
+      if (preventOutsideClickElement) {
+        return;
+      }
+      // else call the callback
+      callback();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClick, useCapture);
+    return () => {
+      document.removeEventListener("mousedown", handleClick, useCapture);
+    };
+  });
+};

plane-src/packages/hooks/src/use-platform-os.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2023-present Plane Software, Inc. and contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ * See the LICENSE file for details.
+ */
+
+import { useState, useEffect } from "react";
+
+export const usePlatformOS = () => {
+  const [platformData, setPlatformData] = useState({
+    isMobile: false,
+    platform: "",
+  });
+
+  useEffect(() => {
+    const detectPlatform = () => {
+      const userAgent = window.navigator.userAgent;
+      const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent);
+      let platform = "";
+
+      if (!isMobile) {
+        if (userAgent.indexOf("Win") !== -1) {
+          platform = "Windows";
+        } else if (userAgent.indexOf("Mac") !== -1) {
+          platform = "MacOS";
+        } else if (userAgent.indexOf("Linux") !== -1) {
+          platform = "Linux";
+        } else {
+          platform = "Unknown";
+        }
+      }
+
+      setPlatformData({ isMobile, platform });
+    };
+
+    detectPlatform();
+  }, []);
+
+  return platformData;
+};