@revealui/core 0.0.1-pre.0 → 0.0.1-pre.2

package/dist/ui/hooks/useLayoutClasses.ts

@@ -1,70 +0,0 @@
-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

@@ -1,78 +0,0 @@
-"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

@@ -1,22 +0,0 @@
-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

@@ -1,60 +0,0 @@
-/* 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

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

package/dist/ui/hooks/useOnPlay.ts

@@ -1,23 +0,0 @@
-"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

@@ -1,174 +0,0 @@
-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

@@ -1,161 +0,0 @@
-"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

@@ -1,25 +0,0 @@
-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

@@ -1,56 +0,0 @@
-"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

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