@revealui/core 0.0.1-pre.0

package/dist/ui/cards/ProductCard.tsx

@@ -0,0 +1,291 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+import Button from "../buttons/Button";
+import IconButton from "../buttons/IconButton";
+import Image from "../images/Image";
+import Currency from "../text/Currency";
+
+const ProductCard: React.FC<{
+  data: {
+    id: string;
+    name: string;
+    price: number;
+    category: {
+      name: string;
+    };
+    images: {
+      url: string;
+    }[];
+  };
+}> = ({ data }) => {
+  const Expand: React.FC<{
+    size: number;
+    className?: string;
+  }> = ({ size, className }) => (
+    <div style={{ fontSize: size }} className={className}>
+      Expand Icon
+    </div>
+  );
+
+  const ShoppingCart: React.FC<{
+    size: number;
+    className?: string;
+  }> = ({ size, className }) => (
+    <div style={{ fontSize: size }} className={className}>
+      Shopping Cart Icon
+    </div>
+  );
+
+  const handleClick = async () => {
+    try {
+      const fetchProductDetailsCached = async (id: string) => {
+        const response = await fetch(`/product/${id}`);
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      };
+      const onOpen = (productDetails: any) => {
+        console.log("Opening product details:", productDetails);
+      };
+
+      const productDetails = await fetchProductDetailsCached(data.id);
+      onOpen(productDetails);
+    } catch (error) {
+      console.error("Error fetching product details:", error);
+    }
+  };
+
+  const onPreview = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    try {
+      const fetchProductDetailsCached = async (id: string) => {
+        const response = await fetch(`/product/${id}`);
+        if (!response.ok) {
+          throw new Error("Network response was not ok");
+        }
+        return response.json();
+      };
+      const onOpen = (productDetails: any) => {
+        console.log("Opening product details:", productDetails);
+      };
+
+      const productDetails = await fetchProductDetailsCached(data.id);
+      onOpen(productDetails);
+    } catch (error) {
+      console.error("Error fetching product details:", error);
+    }
+  };
+
+  const onAddToCart = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    const addItem = (productDetails: any) => {
+      console.log("Adding item to cart:", productDetails);
+    };
+    addItem(data);
+  };
+
+  return (
+    <Button
+      onClick={handleClick}
+      className="group cursor-pointer space-y-4 rounded-xl border bg-white p-3"
+    >
+      <div className="relative aspect-square rounded-xl bg-gray-100">
+        <Image
+          src={data.images?.[0]?.url}
+          alt={data.name}
+          className="aspect-square rounded-md object-cover"
+        />
+        <div className="absolute bottom-5 w-full px-6 opacity-0 transition group-hover:opacity-100">
+          <div className="flex justify-center gap-x-6">
+            <IconButton
+              onClick={onPreview}
+              icon={<Expand size={20} className="text-gray-600" />}
+            />
+            <IconButton
+              onClick={onAddToCart}
+              icon={<ShoppingCart size={20} className="text-gray-600" />}
+            />
+          </div>
+        </div>
+      </div>
+      <p className="text-lg font-semibold">{data.name}</p>
+      <p className="text-sm text-gray-500">{data.category?.name}</p>
+      <div className="flex items-center justify-between">
+        <Currency value={data.price} />
+      </div>
+    </Button>
+  );
+};
+
+export default ProductCard;
+
+// import React from "react";
+// import Button from "../buttons/Button";
+// import IconButton from "../buttons/IconButton";
+// import Image from "../images/Image";
+// import Currency from "../text/Currency";
+
+// const ProductCard: React.FC<{
+//   data: {
+//     id: string;
+//     name: string;
+//     price: number;
+//     category: {
+//       name: string;
+//     };
+//     images: {
+//       url: string;
+//     }[];
+//   };
+// }> = ({ data }) => {
+//   const Expand: React.FC<{
+//     size: number;
+//     className?: string;
+//   }> = ({ size, className }) => {
+//     // Replace this with your actual Expand icon implementation
+//     return (
+//       <div style={{ fontSize: size }} className={className}>
+//         Expand Icon
+//       </div>
+//     );
+//   };
+
+//   const ShoppingCart: React.FC<{
+//     size: number;
+//     className?: string;
+//   }> = ({ size, className }) => {
+//     // Replace this with your actual ShoppingCart icon implementation
+//     return (
+//       <div style={{ fontSize: size }} className={className}>
+//         Shopping Cart Icon
+//       </div>
+//     );
+//   };
+//   // const { addItem } = useCart();
+//   // const { onOpen } = usePreviewModal();
+//   const onOpen = (productData: {
+//     id: string;
+//     name: string;
+//     price: number;
+//     category: {
+//       name: string;
+//     };
+//     images: {
+//       url: string;
+//     }[];
+//   }) => {
+//     // 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
+//   };
+//   const addItem = (productData: {
+//     id: string;
+//     name: string;
+//     price: number;
+//     category: {
+//       name: string;
+//     };
+//     images: {
+//       url: string;
+//     }[];
+//   }) => {
+//     // Logic to add item to cart
+//     // console.log("Adding item to cart:", productData);
+//     // You might set state here or trigger a modal view with the product data
+//     return productData;
+//   };
+//   const handleClick = async () => {
+//     try {
+//       const response = await fetch(`/product/${data?.id}`);
+//       if (!response.ok) {
+//         throw new Error("Network response was not ok");
+//       }
+//       const productDetails = await response.json();
+//       onOpen(productDetails);
+//     } catch (error) {
+//       console.error("Error fetching product details:", error);
+//     }
+//   };
+
+//   const onPreview = (event: React.MouseEvent<HTMLButtonElement>) => {
+//     event.stopPropagation();
+//     const productData: {
+//       id: string;
+//       name: string;
+//       price: number;
+//       category: {
+//         name: string;
+//       };
+//       //  images: {
+//       //     url: string;
+//       //   }[];
+//     } = {
+//       ...data,
+//       id: data.id.toString(),
+//       // images: data.images?.map((image) => image.url),
+//     };
+//     onOpen(
+//       productData as {
+//         id: string;
+//         name: string;
+//         price: number;
+//         category: {
+//           name: string;
+//         };
+//         images: {
+//           url: string;
+//         }[];
+//       },
+//     );
+//   };
+
+//   const onAddToCart = (event: React.MouseEvent<HTMLButtonElement>) => {
+//     event.stopPropagation();
+//     const productData = {
+//       ...data,
+//       id: data.id.toString(),
+//       // images: data.images?.map((image) => image.url),
+//     };
+//     addItem(productData);
+//   };
+
+//   return (
+//     <Button
+//       onClick={handleClick}
+//       className="group cursor-pointer space-y-4 rounded-xl border bg-white p-3"
+//     >
+//       {/* Image & actions */}
+//       <div className="relative aspect-square rounded-xl bg-gray-100">
+//         <Image
+//           src={data.images?.[0]?.url}
+//           alt={data.name}
+//           className="aspect-square rounded-md object-cover"
+//         />
+//         <div className="absolute bottom-5 w-full px-6 opacity-0 transition group-hover:opacity-100">
+//           <div className="flex justify-center gap-x-6">
+//             <IconButton
+//               onClick={() => onPreview}
+//               icon={<Expand size={20} className="text-gray-600" />}
+//             />
+//             <IconButton
+//               onClick={() => onAddToCart}
+//               icon={<ShoppingCart size={20} className="text-gray-600" />}
+//             />
+//           </div>
+//         </div>
+//       </div>
+
+//       {/* Description */}
+//       <p className="text-lg font-semibold">{data.name}</p>
+//       <p className="text-sm text-gray-500">{data.category?.name}</p>
+
+//       {/* Price */}
+//       <div className="flex items-center justify-between">
+//         <Currency value={data?.price} />
+//       </div>
+//     </Button>
+//   );
+// };
+
+// export default ProductCard;

package/dist/ui/cards/VideoCard.tsx

@@ -0,0 +1,201 @@
+import React, { useEffect, useState } from "react";
+import Image from "../images/Image";
+import { VideoDetail, VideoList } from "../video";
+
+const VideoCard: React.FC<{
+  videos: {
+    id: {
+      videoId: string;
+    };
+    snippet: {
+      title: string;
+      description: string;
+      thumbnails: {
+        medium: {
+          url: string;
+        };
+      };
+      channelTitle: string;
+    };
+  }[];
+  posts: {
+    id: string;
+    title: string;
+    content: string;
+    url: string;
+  }[];
+}> = ({ videos, posts }) => {
+  const [selectedVideo, setSelectedVideo] = useState<{
+    id: {
+      videoId: string;
+    };
+    snippet: {
+      title: string;
+      description: string;
+      thumbnails: {
+        medium: {
+          url: string;
+        };
+      };
+      channelTitle: string;
+    };
+  }>({
+    id: {
+      videoId: "",
+    },
+    snippet: {
+      title: "",
+      description: "",
+      thumbnails: {
+        medium: {
+          url: "",
+        },
+      },
+      channelTitle: "",
+    },
+  });
+
+  useEffect(() => {
+    if (videos.length > 0 && videos[0]) {
+      setSelectedVideo(videos[0]);
+    }
+  }, [videos]);
+
+  return (
+    <>
+      <div className=" flex">
+        <div className="flex">
+          <VideoDetail video={selectedVideo} />
+        </div>
+
+        <div className="flex">
+          <VideoList
+            onVideoSelect={(video) => setSelectedVideo(video)}
+            videos={videos}
+          />
+        </div>
+      </div>
+      <div className="flex">
+        {posts.map((post) => (
+          <div className="flex" key={post.id}>
+            <div className="flex">
+              <Image
+                src={`https://ytimg.googleusercontent.com/vi/${
+                  post.url.split("v=")[1]
+                }/sddefault.jpg`}
+                alt={post.title}
+              />
+            </div>
+
+            <h2>{post.title}</h2>
+            <p>{post.content.slice(0, 100) + "..."}</p>
+            <a href={`/videos/${post.id}`}>Learn more...</a>
+          </div>
+        ))}
+      </div>
+    </>
+  );
+};
+
+export default VideoCard;
+
+// // eslint-disable-next-line prettier/prettier
+
+// import React, { useEffect, useState } from "react";
+// import Image from "../images/Image";
+// import { VideoDetail, VideoList } from "../video";
+
+// const VideoCard: React.FC<{
+//   videos: {
+//     id: {
+//       videoId: string;
+//     };
+//     snippet: {
+//       title: string;
+//       description: string;
+//       thumbnails: {
+//         medium: {
+//           url: string;
+//         };
+//       };
+//       channelTitle: string;
+//     };
+//   }[];
+//   posts: {
+//     id: string;
+//     title: string;
+//     content: string;
+//     url: string;
+//   }[];
+// }> = ({ videos, posts }) => {
+//   const [selectedVideo, setSelectedVideo] = useState<{
+//     id: {
+//       videoId: string;
+//     };
+//     snippet: {
+//       title: string;
+//       description: string;
+//       thumbnails: {
+//         medium: {
+//           url: string;
+//         };
+//       };
+//       channelTitle: string;
+//     };
+//   }>({
+//     id: {
+//       videoId: "",
+//     },
+//     snippet: {
+//       title: "",
+//       description: "",
+//       thumbnails: {
+//         medium: {
+//           url: "",
+//         },
+//       },
+//       channelTitle: "",
+//     },
+//   });
+
+//   useEffect(() => {
+//     if (videos.length > 0) {
+//       setSelectedVideo(videos[0]);
+//     }
+//   }, [videos]);
+
+//   return (
+//     <>
+//       <div className=" flex">
+//         <div className="flex">
+//           <VideoDetail video={selectedVideo} />
+//         </div>
+
+//         <div className="flex">
+//           <VideoList onVideoSelect={() => setSelectedVideo} videos={videos} />
+//         </div>
+//       </div>
+//       <div className="flex">
+//         {posts.map((post) => (
+//           <div className="flex" key={post.id}>
+//             <div className="flex">
+//               <Image
+//                 src={`https://ytimg.googleusercontent.com/vi/${
+//                   post.url.split("v=")[1]
+//                 }/sddefault.jpg`}
+//                 alt={post.title}
+//               />
+//             </div>
+
+//             <h2>{post.title}</h2>
+//             <p>{post.content.slice(0, 100) + "..."}</p>
+//             {/* <Link href={`/videos/${post.id}`}>Learn more...</Link> */}
+//             <a href={`/videos/${post.id}`}>Learn more...</a>
+//           </div>
+//         ))}
+//       </div>
+//     </>
+//   );
+// };
+
+// export default VideoCard;

package/dist/ui/cards/index.tsx

@@ -0,0 +1,3 @@
+export { default as Card } from "./Card.js";
+export { default as ProductCard } from "./ProductCard.js";
+export { default as VideoCard } from "./VideoCard.js";

package/dist/ui/contexts/DisclosureContext.tsx

@@ -0,0 +1,44 @@
+"use client";
+// eslint-disable-next-line prettier/prettier
+
+import { createContext } from "react";
+
+// Define the context for disclosure state
+export interface DisclosureContextType {
+  open: boolean;
+  toggle: (
+    event: React.MouseEvent<HTMLElement>,
+  ) => void;
+}
+
+const initialDisclosureContext: DisclosureContextType = {
+  open: false,
+  toggle: (event) => {
+    event.preventDefault();
+  },
+};
+
+const DisclosureContext = createContext(initialDisclosureContext);
+
+export default DisclosureContext;
+// import { createContext } from "react";
+
+// // Interface for DisclosureContext
+// export interface DisclosureContextType {
+//   open: boolean;
+//   toggle: (event: React.MouseEvent<HTMLButtonElement>) => void;
+// }
+
+// export const defaultValue: DisclosureContextType = {
+//   open: false,
+//   toggle: (event) => {
+//     event.preventDefault();
+//   },
+// };
+// // Create context for Disclosure
+// export const DisclosureContext = createContext<
+//   DisclosureContextType | undefined
+// >(
+//   // eslint-disable-next-line prettier/prettier
+//   defaultValue
+// );

package/dist/ui/contexts/GlobalContext.tsx

@@ -0,0 +1,67 @@
+import { createContext } from "react";
+import { defaultPageContext } from "./PageContext";
+import {updateCurrentPath} from "../../core/targets/url/updateCurrentPath";
+
+
+const GlobalContext = createContext(defaultPageContext);
+
+export { updateCurrentPath }; // Reuse in other parts of the application
+
+export default GlobalContext;
+
+
+
+// import { createContext } from "react"
+// import type {
+//   ExtendedPageContextClient,
+//   ExtendedPageContextServer,
+//   PageContextClient,
+//   PageContextServer,
+// } from "../../types/interfaces/context.js"
+// import { defaultPageContext } from "./PageContext.js"
+
+// // Create the context with Partial<ExtendedPageContext>
+// const GlobalContext =
+//   createContext<
+//     Partial<
+//       | ExtendedPageContextServer
+//       | ExtendedPageContextClient
+//       | PageContextServer
+//       | PageContextClient
+//     >
+//   >(defaultPageContext)
+
+// export default GlobalContext
+
+// // GlobalContext.ts
+// import { createContext } from 'react';
+// import {defaultPageContext} from './PageContext';
+
+// // Create the context
+// const GlobalContext = createContext(defaultPageContext);
+
+// export default GlobalContext;
+
+// import {createContext} from "react"
+// import { getGlobalObject } from "../core/getGlobalObject";
+// import { PageContextClient, PageContextServer } from "reveal/types";
+
+// // Define a type that unifies PageContextClient and PageContextServer
+// export type PageContextrevealUnified = PageContextClient | PageContextServer;
+
+// export type ExtendedPageContext<Data = unknown> = PageContextrevealUnified & {
+// //   children?: React.ReactNode;
+//   data:{
+//   value: any;
+//   current: boolean;
+//   updateCurrentPath: (path: string | URL) => string | undefined;
+//   title: string;
+//   description: string;
+//   }
+// };
+
+// const GlobalContext = getGlobalObject("PageContextProvider.ts", {
+//     reactContext: createContext<ExtendedPageContext | undefined>(undefined),
+//   });
+
+// export default GlobalContext;

package/dist/ui/contexts/MenuContext.tsx

@@ -0,0 +1,8 @@
+"use client";
+// eslint-disable-next-line prettier/prettier
+
+import { createContext } from "react";
+
+const MenuContext = createContext({});
+
+export default MenuContext;

package/dist/ui/contexts/PageContext.tsx

@@ -0,0 +1,28 @@
+import{ updateCurrentPath } from "../../core/targets/url/updateCurrentPath";
+import type {
+  ExtendedPageContextClient,
+  ExtendedPageContextServer,
+} from "../../types/interfaces/context";
+
+// Default values for the PageContext
+export const defaultPageContext: Partial<
+  ExtendedPageContextClient | ExtendedPageContextServer
+> = {
+  title: "Default Title",
+  description: "Default Description",
+  urlPathname: "/",
+  updateCurrentPath: updateCurrentPath,
+  current: false,
+};
+
+// import updateCurrentPath from "../core/updateCurrentPath";
+
+// // Default values for the PageContext
+// export const defaultPageContext = {
+//   pageContext: {
+//   title: "Default Title",
+//   description: "Default Description",
+//   updateCurrentPath: updateCurrentPath,
+//   current: false,
+//   }
+// };