@revealui/core 0.0.1-pre.0

package/dist/ui/images/Carousel.tsx

@@ -0,0 +1,326 @@
+import React, { useState } from "react";
+import { IconButton } from "../buttons";
+import { Container, Field, FlexContainer } from "../shells";
+
+const ChevronLeft = ({ className }: { className: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={`${className} size-3`}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="M15.75 19.5 8.25 12l7.5-7.5"
+      />
+    </svg>
+  );
+};
+
+const ChevronRight = ({ className }: { className: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      fill="none"
+      viewBox="0 0 24 24"
+      strokeWidth={1.5}
+      stroke="currentColor"
+      className={`${className} size-3`}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m8.25 4.5 7.5 7.5-7.5 7.5"
+      />
+    </svg>
+  );
+};
+
+const DotFilled = ({ className }: { className: string }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      className={`size-1 ${className}`}
+    >
+      <circle cx={50} cy={50} r={10} fill="scrapBlack" />
+    </svg>
+  );
+};
+
+const Carousel: React.FC<{
+  slides: {
+    url: string;
+  }[];
+}> = ({ slides }) => {
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+  const [touchPosition, setTouchPosition] = useState<number | null>(null);
+
+  const prevSlide = () => {
+    const isFirstSlide = currentIndex === 0;
+    const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
+    setCurrentIndex(newIndex);
+  };
+
+  const nextSlide = () => {
+    const isLastSlide = currentIndex === slides.length - 1;
+    const newIndex = isLastSlide ? 0 : currentIndex + 1;
+    setCurrentIndex(newIndex);
+  };
+
+  const goToSlide = (slideIndex: number) => {
+    setCurrentIndex(slideIndex);
+  };
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+    // Make sure there's at least one touch point
+    if (e.touches && e.touches.length > 0) {
+      const touchDown = e.touches[0]?.clientX ?? null;
+      setTouchPosition(touchDown);
+    }
+  };
+
+  const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+    const touchDown = touchPosition;
+
+    if (touchDown === null) {
+      return;
+    }
+
+    // Safely check if there are touches
+    const currentTouch = e.touches?.[0]?.clientX ?? null;
+    if (currentTouch === null) {
+      return;
+    }
+
+    const diff = touchDown - currentTouch;
+
+    if (diff > 5) {
+      nextSlide();
+    }
+
+    if (diff < -5) {
+      prevSlide();
+    }
+
+    setTouchPosition(null);
+  };
+
+  return (
+    <>
+      <FlexContainer className=" w-full flex-col items-center justify-center px-1">
+        <Container
+          className=" border-scrapBlack group relative mx-auto my-10 h-[300px] w-full max-w-md rounded-xl border-2 shadow-sm md:max-w-3xl lg:h-[500px] lg:max-w-4xl xl:max-w-5xl"
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+        >
+          <Field className="bg-scrapBlack/10 absolute left-0 top-0 mx-auto size-full rounded-2xl" />
+          <div
+            style={{
+              backgroundImage: `url(${slides[currentIndex]?.url})`,
+            }}
+            className="mx-auto size-full rounded-lg bg-cover bg-center object-cover duration-500"
+            role="img"
+            aria-label={`Slide ${currentIndex + 1}`}
+          >
+            {/* Left Arrow */}
+            <IconButton
+              icon={<ChevronLeft className={"w-3"} />}
+              className="bg-scrapBlack/20 text-scrapWhite absolute left-0 top-1/2 hidden -translate-y-1/2 translate-x-0 cursor-pointer rounded-full p-1 text-2xl hover:block lg:block"
+              onClick={prevSlide}
+            />
+
+            {/* Right Arrow */}
+            <IconButton
+              icon={<ChevronRight className={"w-3"} />}
+              className="bg-scrapBlack/20 text-scrapWhite absolute right-0 top-1/2 hidden -translate-y-1/2 translate-x-0 cursor-pointer rounded-full p-0 text-2xl hover:block lg:block"
+              onClick={nextSlide}
+            />
+
+            {/* Dots */}
+            <div className="absolute bottom-0 left-0 mb-2 flex w-full items-center justify-center p-0">
+              {slides.map((slide, index) => (
+                <IconButton
+                  icon={<DotFilled className={"w-1"} />}
+                  key={index}
+                  aria-current={index === currentIndex ? "step" : undefined}
+                  onClick={() => goToSlide(index)}
+                  className={`${
+                    index === currentIndex ? "bg-scrapBlack" : "bg-scrapWhite"
+                  } mx-2 size-0 cursor-pointer rounded-full p-0`}
+                  aria-label={`Go to slide ${index + 1}`}
+                />
+              ))}
+            </div>
+          </div>
+        </Container>
+      </FlexContainer>
+    </>
+  );
+};
+
+export default Carousel;
+
+// // eslint-disable-next-line prettier/prettier
+
+// import React, { useState } from "react";
+// import { IconButton } from "../buttons";
+// import { Container, Field, FlexContainer } from "../shells";
+
+// const ChevronLeft = ({ className }: { className: string }) => {
+//   return (
+//     <svg
+//       xmlns="http://www.w3.org/2000/svg"
+//       fill="none"
+//       viewBox="0 0 24 24"
+//       strokeWidth={1.5}
+//       stroke="currentColor"
+//       className={`${className} size-3`}
+//     >
+//       <path
+//         strokeLinecap="round"
+//         strokeLinejoin="round"
+//         d="M15.75 19.5 8.25 12l7.5-7.5"
+//       />
+//     </svg>
+//   );
+// };
+
+// const ChevronRight = ({ className }: { className: string }) => {
+//   return (
+//     <svg
+//       xmlns="http://www.w3.org/2000/svg"
+//       fill="none"
+//       viewBox="0 0 24 24"
+//       strokeWidth={1.5}
+//       stroke="currentColor"
+//       className={`${className} size-3`}
+//     >
+//       <path
+//         strokeLinecap="round"
+//         strokeLinejoin="round"
+//         d="m8.25 4.5 7.5 7.5-7.5 7.5"
+//       />
+//     </svg>
+//   );
+// };
+
+// const DotFilled = ({ className }: { className: string }) => {
+//   return (
+//     <svg
+//       xmlns="http://www.w3.org/2000/svg"
+//       viewBox="0 0 100 100"
+//       className={`size-1 ${className}`}
+//     >
+//       <circle cx={50} cy={50} r={10} fill="scrapBlack" />
+//     </svg>
+//   );
+// };
+// const Carousel: React.FC<{
+//   slides: {
+//     url: string;
+//   }[];
+// }> = ({ slides }) => {
+//   const [currentIndex, setCurrentIndex] = useState<number>(0);
+//   const [touchPosition, setTouchPosition] = useState<number | null>(null);
+
+//   const prevSlide = () => {
+//     const isFirstSlide = currentIndex === 0;
+//     const newIndex = isFirstSlide ? slides.length - 1 : currentIndex - 1;
+//     setCurrentIndex(newIndex);
+//   };
+
+//   const nextSlide = () => {
+//     const isLastSlide = currentIndex === slides.length - 1;
+//     const newIndex = isLastSlide ? 0 : currentIndex + 1;
+//     setCurrentIndex(newIndex);
+//   };
+
+//   const goToSlide = (slideIndex: number) => {
+//     setCurrentIndex(slideIndex);
+//   };
+
+//   const handleTouchStart = (e: React.TouchEvent<HTMLDivElement>) => {
+//     const touchDown = e.touches[0].clientX;
+//     setTouchPosition(touchDown);
+//   };
+
+//   const handleTouchMove = (e: React.TouchEvent<HTMLDivElement>) => {
+//     const touchDown = touchPosition;
+
+//     if (touchDown === null) {
+//       return;
+//     }
+
+//     const currentTouch = e.touches[0].clientX;
+//     const diff = touchDown - currentTouch;
+
+//     if (diff > 5) {
+//       nextSlide();
+//     }
+
+//     if (diff < -5) {
+//       prevSlide();
+//     }
+
+//     setTouchPosition(null);
+//   };
+
+//   return (
+//     <>
+//       <FlexContainer className=" w-full flex-col items-center justify-center px-1">
+//         <Container
+//           className=" border-scrapBlack group relative mx-auto my-10 h-[300px] w-full max-w-md rounded-xl border-2 shadow-sm md:max-w-3xl lg:h-[500px] lg:max-w-4xl xl:max-w-5xl"
+//           onTouchStart={handleTouchStart}
+//           onTouchMove={handleTouchMove}
+//         >
+//           <Field className="bg-scrapBlack/10 absolute left-0 top-0 mx-auto size-full rounded-2xl" />
+//           <div
+//             style={{
+//               backgroundImage: `url(${slides[currentIndex].url})`,
+//             }}
+//             className="mx-auto size-full rounded-lg bg-cover bg-center object-cover duration-500"
+//             role="img"
+//             aria-label={`Slide ${currentIndex + 1}`}
+//           >
+//             {/* Left Arrow */}
+//             <IconButton
+//               icon={<ChevronLeft className={"w-3"} />}
+//               className="bg-scrapBlack/20 text-scrapWhite absolute left-0 top-1/2 hidden -translate-y-1/2 translate-x-0 cursor-pointer rounded-full p-1 text-2xl hover:block lg:block"
+//               onClick={prevSlide}
+//             />
+
+//             {/* Right Arrow */}
+//             <IconButton
+//               icon={<ChevronRight className={"w-3"} />}
+//               className="bg-scrapBlack/20 text-scrapWhite absolute right-0 top-1/2 hidden -translate-y-1/2 translate-x-0 cursor-pointer rounded-full p-0 text-2xl hover:block lg:block"
+//               onClick={nextSlide}
+//             />
+
+//             {/* Dots */}
+//             <div className="absolute bottom-0 left-0 mb-2 flex w-full items-center justify-center p-0">
+//               {slides.map((slide, index) => (
+//                 <IconButton
+//                   icon={<DotFilled className={"w-1"} />}
+//                   key={index}
+//                   aria-current={index === currentIndex ? "step" : undefined}
+//                   onClick={() => goToSlide(index)}
+//                   className={`${
+//                     index === currentIndex ? "bg-scrapBlack" : "bg-scrapWhite"
+//                   } mx-2 size-0 cursor-pointer rounded-full p-0`}
+//                   aria-label={`Go to slide ${index + 1}`}
+//                 />
+//               ))}
+//             </div>
+//           </div>
+//         </Container>
+//       </FlexContainer>
+//     </>
+//   );
+// };
+
+// export default Carousel;

package/dist/ui/images/Circle.tsx

@@ -0,0 +1,9 @@
+import React, { SVGProps } from "react";
+
+interface CircleProps extends SVGProps<SVGCircleElement> {}
+
+const Circle: React.FC<CircleProps> = (props) => {
+  return <circle {...props} />;
+};
+
+export default Circle;

package/dist/ui/images/Defs.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+const Defs = ({ children }: { children: React.ReactNode }) => (
+  <defs>{children}</defs>
+);
+
+export default Defs;

package/dist/ui/images/Image.tsx

@@ -0,0 +1,127 @@
+// eslint-disable-next-line prettier/prettier
+
+import React, {
+  SyntheticEvent,
+  forwardRef,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+const Image = forwardRef<
+  HTMLImageElement,
+  React.ImgHTMLAttributes<HTMLImageElement>
+>(
+  (
+    {
+      src = "",
+      srcSet = "",
+      sizes = "",
+      alt = "",
+      className = "",
+      width = "",
+      height = "",
+      style = {},
+      ...rest
+    },
+    // eslint-disable-next-line prettier/prettier
+    ref,
+  ) => {
+    const [isLoaded, setIsLoaded] = useState(true);
+    const imgRef = useRef(null);
+    const image = src || imgRef.current;
+    const fallback = "";
+    const layout = () => {
+      if (width && height) {
+        return "fixed";
+      }
+      return "responsive";
+    };
+
+    useEffect(() => {
+      // Retrieving image paths from sessionStorage
+      const storedImagePaths = sessionStorage.getItem("imagePaths");
+      if (storedImagePaths) {
+        const parsedImagePaths = JSON.parse(storedImagePaths);
+        if (parsedImagePaths.includes(src)) {
+          setIsLoaded(true);
+        }
+        setIsLoaded(true);
+      }
+    }, [src]);
+
+    const handleLoad = () => {
+      setIsLoaded(true);
+      // Storing the image path in sessionStorage
+      const storedImagePaths = sessionStorage.getItem("imagePaths");
+      const updatedImagePaths = storedImagePaths
+        ? JSON.parse(storedImagePaths)
+        : [];
+      updatedImagePaths.push(src);
+      sessionStorage.setItem("imagePaths", JSON.stringify(updatedImagePaths));
+    };
+
+    const handleError = (e: SyntheticEvent<HTMLImageElement, Event>) => {
+      if (fallback) {
+        e.currentTarget.src = fallback;
+      }
+    };
+    const layoutTypeForOrientation =
+      typeof width === "number" && typeof height === "number"
+        ? layout()
+        : "flex";
+
+    const getImageClasses = (width: string | number, layoutType: string) => {
+      return [
+        "prose-img",
+        `w-${width}`,
+        layoutType === "flex" ? "h-auto" : "h-full",
+        "object-cover",
+      ]
+        .filter(Boolean)
+        .join(" ")
+        .trim();
+    };
+
+    const imageClasses = useMemo(() => {
+      if (typeof width === "number") {
+        return getImageClasses(width, layoutTypeForOrientation);
+      }
+      return getImageClasses(width, layoutTypeForOrientation);
+    }, [width, layoutTypeForOrientation]);
+
+    const finalClassName = `${imageClasses} ${className}`;
+    const imageStyle = useMemo(
+      () => ({
+        opacity: isLoaded ? 1 : 0,
+        transition: "opacity 0.5s ease-in-out",
+        ...style,
+      }),
+      // eslint-disable-next-line prettier/prettier
+      [isLoaded, style],
+    );
+
+    return (
+      <img
+        ref={ref}
+        src={image || src}
+        srcSet={srcSet}
+        sizes={sizes}
+        alt={alt}
+        className={finalClassName}
+        width={width}
+        height={height}
+        style={imageStyle}
+        onLoad={handleLoad}
+        onError={handleError}
+        {...rest}
+      />
+    );
+    // eslint-disable-next-line prettier/prettier
+  },
+);
+
+Image.displayName = "Image";
+
+export default Image;

package/dist/ui/images/ImageGrid.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { GridContainer } from "../shells";
+import { Heading } from "../text";
+import { Image } from "./index.js";
+
+const ImageGrid: React.FC<{
+  images: {
+    id: string;
+    image: string;
+    alt: string;
+    primary?: boolean;
+  }[];
+  className?: string;
+}> = ({ images, className }) => {
+  return (
+    <div className={`container mx-auto px-4 ${className}`}>
+      <Heading id="image-gallery-heading" as={"h2"} className="sr-only">
+        Images
+      </Heading>
+      <GridContainer className=" lg:gap-6">
+        {images.map((image) => (
+          <Image
+            key={image.id}
+            src={image.image}
+            alt={image.alt}
+            className={`
+              ${image.primary ? "lg:col-span-2 lg:row-span-2" : ""}
+              rounded-lg
+            `}
+          />
+        ))}
+      </GridContainer>
+    </div>
+  );
+};
+
+export default ImageGrid;
+
+// import React from "react";
+// import { GridContainer } from "src/shells";
+// import { Heading } from "src/text";
+// import Image from "./Image";
+
+// const ImageGallery: React.FC<{
+//   images: {
+//     id: string;
+//     image: string;
+//     alt: string;
+//     primary?: boolean;
+//   }[];
+//   className?: string;
+// }> = ({ images, className }) => {
+//   return (
+//     <GridContainer className="grid grid-cols-1 lg:grid-rows-1 lg:gap-6">
+//       <Heading id="image-gallery-heading" as={"h2"} className="sr-only">
+//         Images
+//       </Heading>
+//       {images.map((image) => (
+//         <Image
+//           key={image.id}
+//           src={image.image}
+//           alt={image.alt}
+//           className={`
+//             ${image.primary ? "lg:col-span-2 lg:row-span-2" : "flex lg:block"}
+//             rounded-lg
+//           `}
+//         />
+//       ))}
+//     </GridContainer>
+//   );
+// };
+
+// export default ImageGallery;

package/dist/ui/images/Logo.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import Image from "./Image.js";
+
+const Logo: React.FC<{
+  className?: string;
+  alt?: string;
+  width?: string;
+}> = ({ className = "", alt = "Logo", width = "" }) => {
+  const logoSrc =
+    "https://res.cloudinary.com/dpytkhyme/image/upload/v1718044729/STREETBEEFS%20SCRAPYARD/streetbeefs-scrapyard-logo-6_jcfv5l.webp";
+
+  return (
+    <Image
+      width={width}
+      src={logoSrc}
+      alt={alt}
+      className={`bg-scrapBlack z-10 ${className}`}
+    />
+  );
+};
+
+export default Logo;

package/dist/ui/images/Path.tsx

@@ -0,0 +1,27 @@
+import React, { SVGProps } from "react";
+
+// Assuming this is your custom Path component
+interface PathProps extends SVGProps<SVGPathElement> {
+  d?: string;
+  strokeWidth?: number;
+  fill?: string;
+}
+
+const Path: React.FC<PathProps> = (props) => {
+  return <path {...props} />;
+};
+
+export default Path;
+// import React from "react";
+
+// interface PathProps {
+//   d: string;
+//   strokeWidth: number;
+//   fill: string;
+// }
+
+// const Path = ({ d, strokeWidth, fill }: PathProps) => (
+//   <path d={d} fill={fill} strokeWidth={strokeWidth} />
+// );
+
+// export default Path;

package/dist/ui/images/Pattern.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+
+interface PatternProps {
+  id: string;
+  width: number;
+  height: number;
+  x: number | string;
+  y: number | string;
+  patternUnits: "userSpaceOnUse" | "objectBoundingBox";
+  patternTransform?: string; // Optional prop for transformations
+  children: React.ReactNode;
+}
+
+const Pattern: React.FC<PatternProps> = ({
+  id,
+  width,
+  height,
+  x,
+  y,
+  patternUnits,
+  patternTransform, // Include patternTransform in the destructured props
+  children,
+}) => (
+  <pattern
+    id={id}
+    width={width}
+    height={height}
+    x={x}
+    y={y}
+    patternUnits={patternUnits}
+    patternTransform={patternTransform} // Apply the patternTransform attribute
+  >
+    {children}
+  </pattern>
+);
+
+export default Pattern;
+
+// import React from "react";
+
+// const Pattern = ({
+//   id,
+//   width,
+//   height,
+//   x,
+//   y,
+//   patternUnits,
+//   children,
+// }: {
+//   id: string;
+//   width: number;
+//   height: number;
+//   x: number | string;
+//   y: number | string;
+//   patternUnits: string;
+//   children: React.ReactNode;
+// }) => (
+//   <pattern
+//     id={id}
+//     width={width}
+//     height={height}
+//     x={x}
+//     y={y}
+//     patternUnits={patternUnits}
+//   >
+//     {children}
+//   </pattern>
+// );
+
+// export default Pattern;

package/dist/ui/images/PromoBanner.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from "react";
+import Image from "./Image.js";
+
+const PromoBanner: FC<{
+  className?: string;
+  alt?: string;
+  width?: string;
+  image: string;
+}> = () => {
+  const image =
+    "https://res.cloudinary.com/dpytkhyme/image/upload/v1683938638/STREETBEEFS%20SCRAPYARD/315324319_501232111949412_1610211327794455698_n_lg8xqk.png";
+  const altText = "promo"; // Replace with a descriptive text or leave empty if decorative
+
+  return (
+    <div className="mx-auto grid grid-cols-1 items-center justify-center gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-3">
+      <Image className="w-full" src={image} alt={altText} />
+
+      <Image className="hidden w-full sm:block" src={image} alt={altText} />
+
+      <Image className="hidden w-full md:block" src={image} alt={altText} />
+    </div>
+  );
+};
+
+export default PromoBanner;