@reactberry/system 2.0.0-beta

package/src/blocks/Gallery/Carousel/index.tsx

@@ -0,0 +1,257 @@
+"use client";
+import Image from "next/image";
+import { AnimatePresence, motion, MotionConfig } from "motion/react";
+import { useState } from "react";
+import { variants } from "../utils/animationVariants";
+import downloadPhoto from "../utils/downloadPhoto";
+import { useSwipeable } from "react-swipeable";
+import Box from "@/design-system/elements/box";
+import {
+  IconArrowLeft,
+  IconArrowRight,
+  IconDownloadData,
+  IconLaunch,
+} from "@/design-system/icons";
+import { useKeypress } from "@/design-system/hooks/useKeypress";
+import { Control } from "../../Controls/Control";
+
+export default function Carousel({
+  photos,
+  current,
+  navigation = true,
+}: {
+  photos: any;
+  current: number;
+  navigation?: boolean;
+}) {
+  // Handle undefined or empty photos array
+  if (!photos || photos.length === 0) {
+    return null;
+  }
+
+  const [index, setIndex] = useState(Number(current));
+
+  const photo: any = photos[index];
+  const [direction, setDirection] = useState(0);
+  const filteredImages = photos;
+
+  // console.log(photo);
+
+  function changePhotoId(newVal: number) {
+    if (newVal > index) {
+      setDirection(1);
+    } else {
+      setDirection(-1);
+    }
+    setIndex(Number(newVal));
+  }
+
+  const handlers = useSwipeable({
+    onSwipedLeft: () => {
+      if (index < photos?.length - 1) {
+        changePhotoId(index + 1);
+      }
+    },
+    onSwipedRight: () => {
+      if (index > 0) {
+        changePhotoId(index - 1);
+      }
+    },
+    trackMouse: true,
+  });
+
+  useKeypress("ArrowRight", () => {
+    if (index + 1 < photos.length) {
+      changePhotoId(index + 1);
+    }
+  });
+
+  useKeypress("ArrowLeft", () => {
+    if (index > 0) {
+      changePhotoId(index - 1);
+    }
+  });
+
+  return (
+    <>
+      <MotionConfig
+        transition={{
+          x: { type: "spring", stiffness: 300, damping: 30 },
+          opacity: { duration: 0.2 },
+        }}
+      >
+        {/* Main image */}
+
+        <Box
+          position="relative"
+          aspect={3 / 2}
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          width="100%"
+          maxWidth="80rem"
+          maxHeight="90vh"
+          mx="auto"
+          overflow="hidden"
+          {...handlers}
+        >
+          <AnimatePresence initial={false} custom={direction}>
+            <Box
+              as={motion.div}
+              key={photo.url}
+              initial="enter"
+              animate="center"
+              exit="exit"
+              custom={direction}
+              variants={variants}
+              position="absolute"
+              width="100%"
+              mx="auto"
+              aspect={1 / 1}
+              //onClick={() => router.push(`/gallery/photos/${photo.id}`)}
+            >
+              <Image
+                src={photo?.url}
+                fill
+                sizes="100vw"
+                style={{ objectFit: "contain" }}
+                priority
+                alt="Image"
+              />
+            </Box>
+          </AnimatePresence>
+          {/* Buttons */}
+
+          <Box as={motion.div}>
+            {navigation && (
+              <>
+                {index > 0 && (
+                  <Control ml="small" onClick={() => changePhotoId(index - 1)}>
+                    <Box as={IconArrowLeft} size="1.125rem" />
+                  </Control>
+                )}
+                {index + 1 < photos.length && (
+                  <Control
+                    mr="small"
+                    left="auto"
+                    right="0"
+                    onClick={() => changePhotoId(index + 1)}
+                  >
+                    <Box as={IconArrowRight} size="1.125rem" />
+                  </Control>
+                )}
+              </>
+            )}
+            <Box
+              display="flex"
+              position="absolute"
+              alignItems={"center"}
+              justifyContent={"space-between"}
+              width={"100%"}
+              top="0"
+              right="0"
+              gap="xxsmall"
+              p="small"
+              //mr="small"
+            >
+              <Box color="white" flex="auto">
+                Title
+              </Box>
+              <Control
+                as={motion.a}
+                position={"static"}
+                href={photo.url}
+                target="_blank"
+                title="Open fullsize version"
+                rel="noreferrer"
+              >
+                <Box as={IconLaunch} size="1.125rem" />
+              </Control>
+
+              <Control
+                position={"static"}
+                onClick={() => downloadPhoto(`${photo.url}`, `${index}.jpg`)}
+                title="Download fullsize version"
+              >
+                <Box as={IconDownloadData} size="1.125rem" />
+              </Control>
+            </Box>
+          </Box>
+        </Box>
+
+        {navigation && (
+          <Box
+            position={"fixed"}
+            width={"100%"}
+            bottom="0"
+            left="0"
+            backgroundImage="linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.6))"
+            height="6rem"
+            zIndex={40}
+            display={"flex"}
+            overflow={"hidden"}
+          >
+            <Box
+              as={motion.div}
+              initial={false}
+              aspect={3 / 2}
+              mx="auto"
+              my="small"
+              display={"flex"}
+            >
+              {/* Bottom Nav bar */}
+              <AnimatePresence initial={false}>
+                {filteredImages?.map((image: { url: string }, i: number) => (
+                  <Box
+                    as={motion.div}
+                    key={image.url + i}
+                    initial={{
+                      width: "0%",
+                      x: `${Math.max((index - 1) * -100, 15 * -100)}%`,
+                    }}
+                    exit={{ width: "0%" }}
+                    whileHover={{ opacity: 1 }}
+                    animate={{
+                      scale: Number(i) === index ? 1.25 : 1,
+                      zIndex: Number(i) === index ? 19 : 1,
+                      opacity: Number(i) === index ? 1 : 0.9,
+                      width: "100%",
+                      x: `${Math.max(index * -100, 15 * -100)}%`,
+                    }}
+                    onClick={() => changePhotoId(Number(i))}
+                    opacity={0.9}
+                    position={"relative"}
+                    display={"inline-block"}
+                    shape={
+                      Number(i) === index
+                        ? "rounded"
+                        : Number(i) === 0
+                          ? "roundedLeft"
+                          : Number(i) === filteredImages.length - 1
+                            ? "roundedRight"
+                            : "square"
+                    }
+                    overflow="hidden"
+                    flex="none"
+                    style={{ transform: "translate3d(0, 0, 0)" }}
+                    cursor="pointer"
+                    bg="black"
+                    boxShadow="medium"
+                  >
+                    <Image
+                      alt="small photos on the bottom"
+                      fill
+                      src={image.url}
+                      sizes="100vw"
+                      style={{ objectFit: "cover" }}
+                    />
+                  </Box>
+                ))}
+              </AnimatePresence>
+            </Box>
+          </Box>
+        )}
+      </MotionConfig>
+    </>
+  );
+}

package/src/blocks/Gallery/Modal/index.tsx

@@ -0,0 +1,83 @@
+"use client";
+import {
+  Dialog,
+  DialogProps,
+  DialogPanel,
+  DialogBackdrop,
+} from "@headlessui/react";
+import { useRef, useState } from "react";
+import Box, { BoxProps } from "@/design-system/elements/box";
+import { useRouter } from "next/navigation";
+
+type ModalProps = DialogProps<any> &
+  BoxProps & {
+    initial?: boolean;
+    goBack?: boolean;
+    children: React.ReactNode;
+    onClose?: any;
+    panelProps?: any;
+    backdropProps?: any;
+  };
+
+export default function Modal({
+  initial = false,
+  goBack = true,
+  children,
+  onClose = () => null,
+  panelProps,
+  backdropProps,
+  ...props
+}: ModalProps) {
+  const [isOpen, setIsOpen] = useState(initial);
+  const overlayRef = useRef(null);
+  const router = useRouter();
+
+  function handleClose() {
+    if (goBack) return router.back();
+    setIsOpen(false);
+  }
+
+  return (
+    <Box
+      as={Dialog}
+      open={isOpen}
+      onClose={onClose || handleClose}
+      position="fixed"
+      top="0"
+      left="0"
+      width="100%"
+      height="100%"
+      display="flex"
+      alignItems="center"
+      justifyContent="center"
+      zIndex="99999"
+      {...props}
+    >
+      <Box
+        as={DialogPanel}
+        position="relative"
+        width="100%"
+        maxWidth="80rem"
+        maxHeight="90vh"
+        mx="auto"
+        {...panelProps}
+      >
+        {children}
+      </Box>
+      <Box
+        as={DialogBackdrop}
+        ref={overlayRef}
+        key="backdrop"
+        bg="rgba(0,0,0,0.6)"
+        position="fixed"
+        top="0"
+        left="0"
+        width="100%"
+        height="100%"
+        zIndex="-1"
+        style={{ backdropFilter: "blur(10px)" }}
+        {...backdropProps}
+      />
+    </Box>
+  );
+}

package/src/blocks/Gallery/index.tsx

@@ -0,0 +1,57 @@
+"use client";
+import Image from "next/image";
+import Box from "@/design-system/elements/box";
+import { useState } from "react";
+import Modal from "./Modal";
+import Carousel from "./Carousel";
+import Collection from "../Collection";
+import { motion } from "motion/react";
+import type { ImageType } from "@/design-system/types";
+
+type GalleryProps = {
+  images: ImageType[];
+};
+
+export default function Gallery({ images }: GalleryProps) {
+  const [open, setIsOpen] = useState(false);
+  const [current, setCurrent] = useState(Number(0));
+
+  return (
+    <Collection colsize="medium">
+      {images?.map((image: ImageType, i: number) => {
+        return (
+          <Box
+            key={i}
+            as={motion.div}
+            whileHover={{ scale: 1.04 }}
+            whileTap={{ scale: 1 }}
+            aspect={3 / 2}
+            position="relative"
+            shape="rounded"
+            overflow="hidden"
+            cursor="pointer"
+            $shadow="small"
+            onClick={() => {
+              setIsOpen(!open);
+              setCurrent(Number(i));
+            }}
+          >
+            <Image
+              alt="image"
+              src={image.url}
+              fill
+              style={{ objectFit: "cover" }}
+              sizes="(max-width: 640px) 100vw,
+            (max-width: 1280px) 50vw,
+            (max-width: 1536px) 33vw,
+            25vw"
+            />
+          </Box>
+        );
+      })}
+      <Modal open={open} onClose={() => setIsOpen(false)}>
+        <Carousel current={current} photos={images} />
+      </Modal>
+    </Collection>
+  );
+}

package/src/blocks/Gallery/utils/animationVariants.ts

@@ -0,0 +1,18 @@
+export const variants = {
+  enter: (direction: number) => {
+    return {
+      x: direction > 0 ? 1000 : -1000,
+      opacity: 0,
+    };
+  },
+  center: {
+    x: 0,
+    opacity: 1,
+  },
+  exit: (direction: number) => {
+    return {
+      x: direction < 0 ? 1000 : -1000,
+      opacity: 0,
+    };
+  },
+};

package/src/blocks/Gallery/utils/aspectRatio.ts

@@ -0,0 +1,14 @@
+export default function getAspectRatio(image: any) {
+  const w = image.naturalWidth;
+  const h = image.naturalHeight;
+
+  let aspectRatio;
+
+  if (w > h) {
+    aspectRatio = w / h;
+  } else {
+    aspectRatio = h / w;
+  }
+
+  return aspectRatio;
+}

package/src/blocks/Gallery/utils/downloadPhoto.ts

@@ -0,0 +1,24 @@
+function forceDownload(blobUrl: string, filename: string) {
+  const a: any = document.createElement("a");
+  a.download = filename;
+  a.href = blobUrl;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+}
+
+export default function downloadPhoto(url: any, filename: any) {
+  if (!filename) filename = url.split("\\").pop().split("/").pop();
+  fetch(url, {
+    headers: new Headers({
+      Origin: location.origin,
+    }),
+    mode: "cors",
+  })
+    .then((response) => response.blob())
+    .then((blob) => {
+      const blobUrl = window.URL.createObjectURL(blob);
+      forceDownload(blobUrl, filename);
+    })
+    .catch((e) => console.error(e));
+}

package/src/blocks/Gallery/utils/range.ts

@@ -0,0 +1,11 @@
+export const range = (start: number, end: number) => {
+  const output = [];
+  if (typeof end === "undefined") {
+    end = start;
+    start = 0;
+  }
+  for (let i = start; i < end; i += 1) {
+    output.push(i);
+  }
+  return output;
+};

package/src/blocks/GradientMesh/index.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import { MeshGradient } from "@paper-design/shaders-react";
+import { Box } from "@/design-system/elements";
+import styled from "styled-components";
+import { useReducedMotion } from "@/design-system/hooks/useReducedMotion";
+
+interface GradientMeshProps {
+  /** Animation intensity level */
+  intensity?: "low" | "medium" | "high";
+  /** Custom colors for the gradient (brand cyan, accent purple, bridge blue) */
+  colors?: {
+    primary?: string;
+    secondary?: string;
+    tertiary?: string;
+  };
+  /** Animation speed multiplier (default: 1) */
+  speed?: number;
+  /** Whether the animation is enabled (default: true) */
+  animated?: boolean;
+  /** Distortion amount (0-1) */
+  distortion?: number;
+  /** Swirl amount (0-1) */
+  swirl?: number;
+  /** Grain mixer amount (0-1) */
+  grainMixer?: number;
+  /** Grain overlay amount (0-1) */
+  grainOverlay?: number;
+  /** Scale factor */
+  scale?: number;
+  /** Rotation in degrees */
+  rotation?: number;
+  /** X offset */
+  offsetX?: number;
+  /** Y offset */
+  offsetY?: number;
+  /** Additional props passed to the container */
+  [key: string]: any;
+}
+
+// Intensity presets mapped to shader parameters
+const intensityConfig = {
+  low: { distortion: 0.3, swirl: 0.05 },
+  medium: { distortion: 0.6, swirl: 0.1 },
+  high: { distortion: 0.9, swirl: 0.2 },
+};
+
+const Container = styled(Box)`
+  overflow: hidden;
+  pointer-events: none;
+`;
+
+/**
+ * GradientMesh - Animated gradient mesh background
+ *
+ * Creates a flowing, organic gradient animation using WebGL shaders.
+ * Uses the @paper-design/shaders-react MeshGradient component.
+ */
+export default function GradientMesh({
+  intensity = "medium",
+  colors,
+  speed = 1,
+  animated = true,
+  distortion,
+  swirl,
+  grainMixer = 0,
+  grainOverlay = 0,
+  scale = 1,
+  rotation = 0,
+  offsetX = 0,
+  offsetY = 0,
+  ...props
+}: GradientMeshProps) {
+  const prefersReducedMotion = useReducedMotion();
+  const config = intensityConfig[intensity];
+  const isPaused = prefersReducedMotion || !animated;
+
+  // Brand colors converted to hex
+  // Brand cyan:    hsl(192, 100%, 38%) → #0099c2
+  // Accent purple: hsl(256, 90%, 58%)  → #7c4dff
+  // Bridge blue:   hsl(224, 95%, 52%)  → #1565ef
+  const colorArray = [
+    colors?.primary || "#0099c2",
+    colors?.secondary || "#7c4dff",
+    colors?.tertiary || "#1565ef",
+    colors?.primary || "#0099c2",
+  ];
+
+  return (
+    <Container {...props}>
+      <MeshGradient
+        style={{ width: "100%", height: "100%" }}
+        colors={colorArray}
+        distortion={distortion ?? config.distortion}
+        swirl={swirl ?? config.swirl}
+        speed={isPaused ? 0 : speed}
+        grainMixer={grainMixer}
+        grainOverlay={grainOverlay}
+        scale={scale}
+        rotation={rotation}
+        offsetX={offsetX}
+        offsetY={offsetY}
+      />
+    </Container>
+  );
+}