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

package/dist/ui/images/Carousel.tsx

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

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

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

package/dist/ui/images/Image.tsx

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

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

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

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

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

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