@revealui/core 0.0.1-pre.0

package/dist/ui/hooks/useLayoutClasses.ts

@@ -0,0 +1,70 @@
+import { useMemo } from "react";
+import {
+  getContainerClasses,
+  getContainerColClasses,
+  getContainerRowClasses,
+} from "../layouts/container";
+import {
+  getFlexClasses,
+  getFlexColClasses,
+  getFlexRowClasses,
+} from "../layouts/flex";
+import {
+  getGridClasses,
+  getGridColClasses,
+  getGridRowClasses,
+} from "../layouts/grid";
+import getLayoutClasses from "../layouts/main";
+import {
+  getStackClasses,
+  getStackColClasses,
+  getStackRowClasses,
+} from "../layouts/stack";
+import useScreenSize from "./useScreenSize";
+
+const useLayoutClasses = (
+  index: number,
+): { rowClasses: string; colClasses: string; containerClasses: string } => {
+  const { isMobile, isTablet } = useScreenSize();
+  const layoutType = getLayoutClasses(index, "stack", isMobile || isTablet, {
+    items: "items-center",
+    justify: "justify-center",
+  });
+
+  const classes = useMemo(() => {
+    let rowClasses = "";
+    let colClasses = "";
+    let containerClasses = "";
+
+    switch (layoutType) {
+      case "flex":
+        rowClasses = getFlexRowClasses(index);
+        colClasses = getFlexColClasses(index);
+        containerClasses = getFlexClasses(index, isMobile || isTablet);
+        break;
+      case "grid":
+        rowClasses = getGridRowClasses(index);
+        colClasses = getGridColClasses(index);
+        containerClasses = getGridClasses(index, isMobile || isTablet);
+        break;
+      case "container":
+        rowClasses = getContainerRowClasses(index);
+        colClasses = getContainerColClasses(index);
+        containerClasses = getContainerClasses(index, isMobile || isTablet);
+        break;
+      case "stack":
+        rowClasses = getStackRowClasses(index);
+        colClasses = getStackColClasses(index);
+        containerClasses = getStackClasses(index, isMobile || isTablet);
+        break;
+      default:
+        break;
+    }
+
+    return { rowClasses, colClasses, containerClasses };
+  }, [index, isMobile, isTablet, layoutType]);
+
+  return classes;
+};
+
+export default useLayoutClasses;

package/dist/ui/hooks/useLazyLoad.ts

@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+const useLazyLoad = (src: string) => {
+  const [image, setImageSrc] = useState(src); // Initialize with src
+  const [isLoaded, setIsLoaded] = useState(true); // Start as loaded
+  const imgRef = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setImageSrc(src);
+          setIsLoaded(true);
+          observer.disconnect();
+        }
+      });
+    });
+
+    if (imgRef.current) {
+      observer.observe(imgRef.current);
+    } else {
+      // Fallback if ref is not attached
+      setIsLoaded(true);
+    }
+
+    return () => observer.disconnect();
+  }, [src]);
+
+  return { image, isLoaded, setIsLoaded, imgRef };
+};
+
+export default useLazyLoad;
+
+// import { useEffect, useState } from "react";
+
+// const useLazyLoad = (src, alt, fallback) => {
+//   const [image, setImageSrc] = useState("");
+//   const [isLoaded, setIsLoaded] = useState(false);
+//   const [isError, setIsError] = useState(false);
+
+//   useEffect(() => {
+//     const imgElement = document.querySelector(`img[alt="${alt}"]`);
+//     if (!imgElement) return;
+
+//     const observer = new IntersectionObserver((entries) => {
+//       entries.forEach((entry) => {
+//         if (entry.isIntersecting) {
+//           setImageSrc(src);
+//           observer.disconnect();
+//         }
+//       });
+//     });
+
+//     observer.observe(imgElement);
+
+//     return () => observer.disconnect();
+//   }, [src, alt]);
+
+//   const handleImageLoad = () => {
+//     setIsLoaded(true);
+//   };
+
+//   const handleImageError = () => {
+//     setImageSrc(fallback);
+//     setIsError(true);
+//   };
+
+//   return {
+//     image: isError ? fallback : image,
+//     isLoaded,
+//     handleImageLoad,
+//     handleImageError,
+//   };
+// };
+
+// export default useLazyLoad;

package/dist/ui/hooks/useLikeSong.ts

@@ -0,0 +1,22 @@
+import { useCallback } from "react";
+
+const useLikeSong = () => {
+  /**
+   * Function to handle the action of liking a song.
+   * #param songId - The ID of the song to like.
+   */
+  const likeSong = useCallback((songId: string) => {
+    const like = localStorage.getItem("like");
+    if (like) {
+      const likeObject = JSON.parse(like);
+      const newLike = [...likeObject, songId];
+      localStorage.setItem("like", JSON.stringify(newLike));
+    } else {
+      localStorage.setItem("like", JSON.stringify([songId]));
+    }
+  }, []);
+
+  return { likeSong };
+};
+
+export default useLikeSong;

package/dist/ui/hooks/useLivePreview.ts

@@ -0,0 +1,60 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+const useLivePreview = <T>(props: {
+  depth?: number;
+  initialData: T;
+  serverURL: string;
+}): {
+  data: T;
+  isLoading: boolean;
+} => {
+  const { depth = 0, initialData, serverURL } = props;
+  const [data, setData] = useState(initialData);
+  const [isLoading, setIsLoading] = useState(true);
+  const hasSentReadyMessage = useRef(false);
+
+  const onChange = useCallback((mergedData: any) => {
+    // When a change is made, the `onChange` callback will be called with the merged data
+    // Set this merged data into state so that React will re-render the UI
+    setData(mergedData);
+    setIsLoading(false);
+  }, []);
+
+  useEffect(() => {
+    // Listen for `window.postMessage` events from the Admin panel
+    // When a change is made, the `onChange` callback will be called with the merged data
+    // const subscription = subscribe({
+    //   callback: onChange,
+    //   depth,
+    //   initialData,
+    //   serverURL,
+    // });
+    console.log("subscribed");
+
+    // Once subscribed, send a `ready` message back up to the Admin panel
+    // This will indicate that the front-end is ready to receive messages
+    if (!hasSentReadyMessage.current) {
+      hasSentReadyMessage.current = true;
+      console.log("ready");
+      // ready({
+      //   serverURL,
+      // });
+    }
+
+    // When the component unmounts, unsubscribe from the `window.postMessage` events
+    return () => {
+      // unsubscribe(subscription);
+      console.log("unsubscribed");
+    };
+  }, [serverURL, onChange, depth, initialData]);
+
+  return {
+    data,
+    isLoading,
+  };
+};
+
+export default useLivePreview;

package/dist/ui/hooks/useMenu.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import MenuContext from "../contexts/MenuContext";
+
+const useMenu = () => useContext(MenuContext);
+
+export default useMenu;

package/dist/ui/hooks/useOnPlay.ts

@@ -0,0 +1,23 @@
+"use client";
+// eslint-disable-next-line prettier/prettier
+
+import { useCallback, useState } from "react";
+
+const useOnPlay = (initialIds = []) => {
+  const [activeId, setActiveId] = useState(initialIds[0] || null);
+
+  const setId = useCallback(
+    (id: (prevState: null) => never) => {
+      return setActiveId(id);
+    },
+    [setActiveId],
+  );
+
+  return {
+    ids: initialIds,
+    activeId,
+    setId,
+  };
+};
+
+export default useOnPlay;

package/dist/ui/hooks/usePageContext.ts

@@ -0,0 +1,174 @@
+import { useContext } from "react";
+import GlobalContext from "../contexts/GlobalContext";
+
+
+export const usePageContext = () => {
+  const context = useContext(GlobalContext);
+
+  if (!context) {
+    throw new Error("usePageContext must be used within a GlobalContext.Provider");
+  }
+
+  return context;
+};
+
+
+
+// // usePageContext.ts
+// import { useContext } from "react";
+// import GlobalContext from "../contexts/GlobalContext";
+
+// // Hook to access PageContext within components
+// export function usePageContext() {
+//   const pageContext = useContext(GlobalContext);
+
+//   if (!pageContext) {
+//     throw new Error("usePageContext must be used within a PageContextProvider");
+//   }
+
+//   return pageContext;
+// }
+
+// export default usePageContext;
+
+// import React, { createContext, useContext, ReactNode } from "react";
+// import type { PageContextClient, PageContextServer } from "reveal/types"; // Adjust import to match your reveal setup
+// import { getGlobalObject } from "../core/getGlobalObject";
+// import PageContext from "../contexts/PageContext";
+
+// // Define a type that unifies PageContextClient and PageContextServer
+// type PageContextrevealUnified = PageContextClient | PageContextServer;
+
+// type ExtendedPageContext<Data = unknown> = PageContextrevealUnified & {
+//   current: boolean;
+//   updateCurrentPath: (path: string | URL) => string | undefined;
+//   title: string;
+//   description: string;
+//   data?: any;
+// };
+
+// // Create the global object for the context
+// const globalObject = getGlobalObject("PageContextProvider.ts", {
+//   reactContext: createContext<ExtendedPageContext | undefined>(undefined),
+// });
+
+// // PageContextProvider component
+// export function PageContextProvider({
+//   pageContext,
+//   children,
+// }: {
+//   pageContext: ExtendedPageContext;
+//   children: ReactNode;
+// }) {
+//   const { reactContext } = globalObject;
+
+//   return (
+//     <reactContext.Provider value={pageContext}>
+//       {children}
+//     </reactContext.Provider>
+//   );
+// }
+
+// // Hook to access PageContext within components
+// export function usePageContext(): ExtendedPageContext {
+//   const { reactContext } = globalObject;
+//   const pageContext = useContext(reactContext || PageContext);
+
+//   if (!pageContext) {
+//     throw new Error("usePageContext must be used within a PageContextProvider");
+//   }
+
+//   return pageContext;
+// }
+
+// export default globalObject.reactContext;
+
+// import React, { createContext, useContext, ReactNode } from "react";
+// import type { PageContext as PageContextreveal } from "reveal/types"; // importing from reveal/types
+// import { getGlobalObject } from "../core/getGlobalObject";
+// import PageContext from "../contexts/PageContext";
+
+// // Extending PageContextType to include additional properties
+// interface PageContextType extends PageContextreveal {
+//   current: boolean;
+//   updateCurrentPath: (path: string | URL) => string | undefined;
+//   title: string;
+//   description: string;
+//   data?: any;
+// }
+
+// // Create a global object for the context
+// const globalObject = getGlobalObject("PageContextProvider.ts", {
+//   reactContext: createContext<PageContextType | undefined>(undefined),
+// });
+
+// // PageContextProvider to wrap components
+// export function PageContextProvider({
+//   pageContext,
+//   children,
+// }: {
+//   pageContext: PageContextType;
+//   children: ReactNode;
+// }) {
+//   const { reactContext } = globalObject;
+
+//   return (
+//     <reactContext.Provider value={pageContext}>
+//       {children}
+//     </reactContext.Provider>
+//   );
+// }
+
+// // Hook to use the PageContext within components
+// export function usePageContext(): PageContextType {
+//   const { reactContext } = globalObject;
+//   const pageContext = useContext(reactContext || PageContext);
+
+//   if (!pageContext) {
+//     throw new Error("usePageContext must be used within a PageContextProvider");
+//   }
+
+//   return pageContext;
+// }
+
+// // Default export for PageContext (if necessary)
+// export default globalObject.reactContext;
+
+// export { PageContextProvider, usePageContext }
+
+// import React, { useContext } from "react"
+// import type { PageContext as PageContextType } from "reveal/types"
+// import PageContext from "../contexts/PageContext.js"
+// import { getGlobalObject } from "../core/getGlobalObject.js"
+
+// const globalObject = getGlobalObject("PageContextProvider.ts", {
+//   reactContext: React.createContext<PageContextType>(undefined as never),
+// })
+
+// function PageContextProvider({
+//   pageContext,
+//   children,
+// }: {
+//   pageContext: PageContextType
+//   children: React.ReactNode
+// }) {
+//   const { reactContext } = globalObject
+//   return (
+//     <reactContext.Provider value={pageContext}>
+//       {children}
+//     </reactContext.Provider>
+//   )
+// }
+
+// /**
+//  * Access `pageContext` from any React component.
+//  *
+//  * https://reveal.dev/usePageContext
+//  */
+// function usePageContext(): PageContextType {
+//   const { reactContext } = globalObject
+//   const AppContext = reactContext || PageContext
+//   // const pageContext = useContext(reactContext);
+//   const pageContext = useContext(AppContext)
+//   return pageContext
+// }

package/dist/ui/hooks/useParallax.ts

@@ -0,0 +1,161 @@
+"use client";
+// eslint-disable-next-line prettier/prettier
+
+import { useCallback, useEffect, useRef } from "react";
+
+const useParallax = (layerCount = 5, speedFactor = 0.5) => {
+  const containerRef = useRef<HTMLDivElement | null>(null); // Explicitly define the type
+  const layersRef = useRef<(HTMLDivElement | null)[]>(
+    Array(layerCount).fill(null),
+  );
+
+  const addLayerRef = useCallback(
+    (index: number) => (node: HTMLDivElement | null) => {
+      layersRef.current[index] = node;
+    },
+    [],
+  );
+
+  const animate = useCallback(
+    (event: MouseEvent) => {
+      const container = containerRef.current;
+      if (!container) return;
+
+      const { clientX, clientY } = event;
+      const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = container;
+
+      const xPos = ((clientX - offsetLeft) / offsetWidth - 0.5) * 2;
+      const yPos = ((clientY - offsetTop) / offsetHeight - 0.5) * 2;
+
+      layersRef.current.forEach((layer, index) => {
+        if (layer) {
+          const speed = speedFactor * (index + 1);
+          const x = speed * xPos;
+          const y = speed * yPos;
+          layer.style.transform = `translateX(${x}%) translateY(${y}%)`;
+        }
+      });
+    },
+    [speedFactor],
+  );
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    container.addEventListener("mousemove", animate);
+    return () => container.removeEventListener("mousemove", animate);
+  }, [animate]);
+
+  return { containerRef, addLayerRef };
+};
+
+export default useParallax;
+
+// "use client";
+// // eslint-disable-next-line prettier/prettier
+
+// import { useCallback, useEffect, useRef } from "react";
+
+// const useParallax = (layerCount = 5, speedFactor = 0.5) => {
+//   const containerRef = useRef(null);
+//   const layersRef = useRef(Array(layerCount).fill(null));
+
+//   const addLayerRef = useCallback(
+//     (index: number) => (node: HTMLDivElement | null) => {
+//       layersRef.current[index] = node;
+//     },
+//     [],
+//   );
+
+//   const animate = useCallback(
+//     (event: MouseEvent) => {
+//       const container = containerRef.current;
+//       if (!container) return;
+
+//       const { clientX, clientY } = event;
+//       const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = container;
+
+//       const xPos = ((clientX - offsetLeft) / offsetWidth - 0.5) * 2;
+//       const yPos = ((clientY - offsetTop) / offsetHeight - 0.5) * 2;
+
+//       layersRef.current.forEach(
+//         (layer: { style: { transform: string } }, index: number) => {
+//           if (layer) {
+//             const speed = speedFactor * (index + 1);
+//             const x = speed * xPos;
+//             const y = speed * yPos;
+//             layer.style.transform = `translateX(${x}%) translateY(${y}%)`;
+//           }
+//         },
+//       );
+//     },
+//     [speedFactor],
+//   );
+
+//   useEffect(() => {
+//     const container = containerRef.current;
+//     if (!container) return;
+//     container.addEventListener("mousemove", animate);
+//     return () => container.removeEventListener("mousemove", animate);
+//   }, [animate]);
+
+//   return { containerRef, addLayerRef };
+// };
+
+// export default useParallax;
+
+// import { useCallback, useEffect, useRef } from "react";
+
+// /**
+//  * Custom hook to create a parallax effect on multiple layered elements.
+//  *
+//  * #param {number} layerCount - The number of layers to apply the parallax effect to.
+//  * #param {number} speedFactor - Factor to control the speed of the parallax effect.
+//  * #returns {Object} An object containing the container ref and a function to add layer refs.
+//  */
+
+// export const useParallax = (layerCount = 5, speedFactor = 0.5) => {
+//   // Specifying the type as HTMLElement (or a more specific type if applicable)
+//   const containerRef = useRef(null);
+//   const layersRef = useRef(new Array(layerCount).fill(null));
+
+//   const addLayerRef = useCallback(
+//     (index) => (node) => {
+//       layersRef.current[index] = node;
+//     },
+//     [],
+//   );
+
+//   const animate = useCallback(
+//     (event) => {
+//       const container = containerRef.current;
+//       if (!container) return;
+
+//       const { clientX, clientY } = event;
+//       const { offsetWidth, offsetHeight, offsetLeft, offsetTop } = container;
+
+//       const xPos = ((clientX - offsetLeft) / offsetWidth - 0.5) * 2;
+//       const yPos = ((clientY - offsetTop) / offsetHeight - 0.5) * 2;
+
+//       layersRef.current.forEach((layer, index) => {
+//         if (layer) {
+//           const speed = speedFactor * (index + 1);
+//           const x = speed * xPos;
+//           const y = speed * yPos;
+//           layer.style.transform = `translateX(${x}%) translateY(${y}%)`;
+//         }
+//       });
+//     },
+//     [speedFactor],
+//   );
+
+//   useEffect(() => {
+//     const container = containerRef.current;
+//     if (container) {
+//       container.addEventListener("mousemove", animate);
+//       return () => container.removeEventListener("mousemove", animate);
+//     }
+//   }, [animate]);
+
+//   return { containerRef, addLayerRef };
+// };

package/dist/ui/hooks/usePreviewModal.ts

@@ -0,0 +1,25 @@
+const usePreviewModal = (): {
+  onOpen: (productData: {
+    id: string;
+    name: string;
+    images?: string[];
+    category?: string;
+    price: number;
+  }) => void;
+} => {
+  const onOpen = (productData: {
+    id: string;
+    name: string;
+    images?: string[];
+    category?: string;
+    price: number;
+  }) => {
+    // Logic to open the preview modal with specific product data
+    return productData;
+    // You might set state here or trigger a modal view with the product data
+  };
+
+  return { onOpen };
+};
+
+export default usePreviewModal;

package/dist/ui/hooks/useScreenSize.ts

@@ -0,0 +1,56 @@
+"use client";
+// eslint-disable-next-line prettier/prettier
+
+import { useEffect, useState } from "react";
+import useDebounce from "./useDebounce";
+
+const useScreenSize = () => {
+  const getInitialScreenSize = () => {
+    if (typeof window !== "undefined") {
+      return {
+        isMobile: window.innerWidth < 640,
+        isTablet: window.innerWidth >= 640 && window.innerWidth < 1024,
+        isMedium: window.innerWidth >= 768 && window.innerWidth < 1024,
+        isDesktop: window.innerWidth >= 1024,
+        isTV: window.innerWidth >= 1920,
+        is4K: window.innerWidth >= 3840,
+      };
+    }
+    // Return default values for SSR
+    return {
+      isMobile: false,
+      isTablet: false,
+      isMedium: false,
+      isDesktop: true,
+      isTV: false,
+      is4K: false,
+    };
+  };
+
+  const [screenSize, setScreenSize] = useState(getInitialScreenSize);
+  // Debounce the screenSize state
+  const debouncedScreenSize = useDebounce(screenSize, 250);
+
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      const handleResize = () => {
+        setScreenSize({
+          isMobile: window.innerWidth < 640,
+          isTablet: window.innerWidth >= 640 && window.innerWidth < 768,
+          isMedium: window.innerWidth >= 768 && window.innerWidth < 1024,
+          isDesktop: window.innerWidth >= 1024,
+          isTV: window.innerWidth >= 1920,
+          is4K: window.innerWidth >= 3840,
+        });
+      };
+
+      window.addEventListener("resize", handleResize);
+      // Clean up
+      return () => window.removeEventListener("resize", handleResize);
+    }
+  }, []);
+
+  return debouncedScreenSize;
+};
+
+export default useScreenSize;

package/dist/ui/hooks/useTheme.ts

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import ThemeContext from "../contexts/ThemeContext";
+
+const useTheme = () => useContext(ThemeContext);
+
+export default useTheme;