Add light box gallery

apps/docs/src/content/04-components/overlays/light-box/examples/gallery.tsx

@@ -0,0 +1,49 @@
+import {
+  Button,
+  Flex,
+  Image,
+  LightBox,
+  LightBoxTrigger,
+  ActionGroup,
+  Gallery,
+  GalleryItem,
+  IconDownload,
+} from "@mittwald/flow-react-components";
+
+export default () => {
+  const images = [
+    "https://mittwald.github.io/flow/assets/mittwald_logo_rgb.jpg",
+    "https://cdn.shopify.com/s/files/1/2022/6883/products/IMG_2002_250x250@2x.JPG?v=1538235544",
+  ];
+
+  return (
+    <Flex gap="m">
+      {images.map((src, index) => (
+        <LightBoxTrigger key={index}>
+          <Button>
+            <Image
+              alt=""
+              src={src}
+              height="100px"
+              withBorder
+            />
+          </Button>
+          <LightBox>
+            <Gallery defaultIndex={index}>
+              {images.map((src) => (
+                <GalleryItem>
+                  <Image src={src} />
+                  <ActionGroup>
+                    <Button aria-label="Herunterladen">
+                      <IconDownload />
+                    </Button>
+                  </ActionGroup>
+                </GalleryItem>
+              ))}
+            </Gallery>
+          </LightBox>
+        </LightBoxTrigger>
+      ))}
+    </Flex>
+  );
+};

apps/docs/src/content/04-components/overlays/light-box/overview.mdx

@@ -37,3 +37,14 @@ Darstellung von Inhalten mit großer vertikaler Ausdehnung, wie z. B.
 mehrseitigen PDFs.
 
 <LiveCodeEditor example="fitScreenFalse" editorCollapsed />
+
+---
+
+# Mit Galerie
+
+Innerhalb der LightBox kann eine `Gallery` verwendet werden. Diese kann mit
+`GalleryItems` gefüllt werden, welche die Platzierung von
+[Images](/04-components/content/image/overview) und
+[ActionGroups](/04-components/actions/action-group/overview) unterstützen.
+
+<LiveCodeEditor example="gallery" editorCollapsed />

packages/components/src/components/LightBox/LightBox.module.scss

@@ -54,4 +54,14 @@
   .actions {
     padding-left: var(--light-box--spacing);
   }
+
+  .gallery {
+    width: var(--light-box--max-width);
+  }
+
+  &:has(.gallery) {
+    .actions {
+      display: none;
+    }
+  }
 }

packages/components/src/components/LightBox/LightBox.tsx

@@ -49,6 +49,9 @@ export const LightBox = flowComponent("LightBox", (props) => {
       Button: { variant: "solid", color: "light-static" },
       tunnelId: "actionGroup",
     },
+    Gallery: {
+      className: styles.gallery,
+    },
   };
 
   const controllerFromContext = useOverlayController("LightBox", {

packages/components/src/components/LightBox/components/Gallery/Gallery.module.scss

@@ -0,0 +1,135 @@
+.gallery {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  --button-size: calc(
+    var(--icon--size--m) + 2 * var(--button--padding-icon-only)
+  );
+  --button-size-plus-spacing: calc(
+    var(--button-size) + var(--light-box--spacing)
+  );
+  --indicator-height: calc(var(--light-box--spacing) + var(--icon--size--m));
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    height: var(--light-box--max-height);
+    width: 100%;
+    justify-content: center;
+  }
+
+  .galleryItem {
+    position: relative;
+    margin: 0 auto;
+    user-select: none;
+  }
+
+  .actions {
+    position: absolute;
+    top: 0;
+    right: calc(var(--button-size-plus-spacing) * -1);
+    display: flex;
+    flex-direction: column;
+    row-gap: var(--light-box--spacing);
+  }
+
+  .actionGroup {
+    flex-grow: 0;
+    flex-direction: column;
+    row-gap: var(--light-box--spacing);
+  }
+
+  .image {
+    animation: fade-in var(--transition--duration--default) ease-in forwards;
+    height: 100%;
+    width: 100%;
+    pointer-events: none;
+  }
+
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+
+    to {
+      opacity: 1;
+    }
+  }
+
+  .indicators {
+    display: flex;
+    justify-content: center;
+    column-gap: var(--light-box--indicator-spacing);
+    color: var(--light-box--content-color);
+  }
+
+  .indicator {
+    display: block;
+    width: var(--light-box--indicator-size);
+    height: var(--light-box--indicator-size);
+    border: var(--light-box--indicator-border-width)
+      var(--light-box--indicator-border-style) var(--light-box--content-color);
+    border-radius: var(--light-box--indicator-corner-radius);
+
+    &.current {
+      background-color: var(--light-box--content-color);
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .content {
+    padding-inline: calc(
+      var(--button-size-plus-spacing) + var(--light-box--spacing)
+    );
+    padding-bottom: var(--indicator-height);
+  }
+
+  .galleryItem {
+    max-height: calc(var(--light-box--max-height) - var(--indicator-height));
+  }
+
+  .indicators {
+    position: absolute;
+    bottom: calc(var(--light-box--spacing) / 2);
+    inset-inline: 0;
+  }
+
+  .previousButton,
+  .nextButton {
+    position: absolute;
+    top: calc(50% - var(--button-size) / 2);
+  }
+
+  .previousButton {
+    left: 0;
+  }
+
+  .nextButton {
+    right: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .content {
+    padding-inline: var(--button-size-plus-spacing);
+    padding-bottom: var(--button-size-plus-spacing);
+  }
+
+  .galleryItem {
+    max-height: calc(
+      var(--light-box--max-height) - var(--button-size-plus-spacing)
+    );
+  }
+
+  .controls {
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    inset-inline: 0;
+    justify-content: space-between;
+    align-items: center;
+  }
+}

packages/components/src/components/LightBox/components/Gallery/Gallery.tsx

@@ -0,0 +1,113 @@
+import { flowComponent } from "@/lib/componentFactory/flowComponent";
+import React, { type ReactNode, useRef, useState } from "react";
+import {
+  IconChevronLeft,
+  IconChevronRight,
+} from "@/components/Icon/components/icons";
+import styles from "./Gallery.module.scss";
+import type { PropsWithClassName } from "@/lib/types/props";
+import clsx from "clsx";
+import { useLocalizedStringFormatter } from "react-aria";
+import locales from "../../locales/*.locale.json";
+import Button from "@/components/Button";
+
+export interface GalleryProps extends PropsWithClassName {
+  children: ReactNode[];
+  defaultIndex?: number;
+}
+
+/** @flr-generate all */
+export const Gallery = flowComponent("Gallery", (props) => {
+  const { children, className, defaultIndex = 0 } = props;
+
+  const [currentIndex, setIndex] = useState(defaultIndex);
+
+  const count = React.Children.count(children);
+
+  const paginate = (direction: number) => {
+    setIndex((prev: number) => (prev + direction + count) % count);
+  };
+
+  const pointerStartX = useRef<number | null>(null);
+  const SWIPE_THRESHOLD = 50;
+
+  const handlePointerDown = (e: React.PointerEvent) => {
+    if (!e.isPrimary) return;
+    pointerStartX.current = e.clientX;
+  };
+
+  const handlePointerUp = (e: React.PointerEvent) => {
+    if (pointerStartX.current === null) return;
+
+    const distance = pointerStartX.current - e.clientX;
+
+    if (Math.abs(distance) > SWIPE_THRESHOLD) {
+      paginate(distance > 0 ? 1 : -1);
+    }
+
+    pointerStartX.current = null;
+  };
+
+  const handlePointerCancel = () => {
+    pointerStartX.current = null;
+  };
+
+  const stringFormatter = useLocalizedStringFormatter(locales, "LightBox");
+
+  const indicators = Array(count)
+    .fill("")
+    .map((_, index) => (
+      <span
+        key={index}
+        className={clsx(
+          styles.indicator,
+          currentIndex === index && styles.current,
+        )}
+      />
+    ));
+
+  return (
+    <div className={clsx(styles.gallery, className)}>
+      <div
+        className={styles.content}
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
+      >
+        <div className={styles.galleryItem} key={currentIndex}>
+          {children[currentIndex]}
+        </div>
+
+        <div className={styles.controls}>
+          <Button
+            aria-label={stringFormatter.format("gallery.previous")}
+            onPress={() => paginate(-1)}
+            color="light-static"
+            className={styles.previousButton}
+          >
+            <IconChevronLeft />
+          </Button>
+          <div
+            className={styles.indicators}
+            aria-label={stringFormatter.format("gallery.indicator", {
+              current: currentIndex + 1,
+              count,
+            })}
+          >
+            {indicators}
+          </div>
+          <Button
+            aria-label={stringFormatter.format("gallery.next")}
+            onPress={() => paginate(1)}
+            color="light-static"
+            className={styles.nextButton}
+          >
+            <IconChevronRight />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export default Gallery;

packages/components/src/components/LightBox/components/Gallery/index.ts

@@ -0,0 +1 @@
+export { type GalleryProps, Gallery } from "./Gallery";

packages/components/src/components/LightBox/components/Gallery/view.ts

@@ -0,0 +1,10 @@
+/* prettier-ignore */
+/* This file is auto-generated with the remote-components-generator */
+import type { Gallery } from "./Gallery";
+import type { ViewComponent } from "@/lib/viewComponentContext";
+
+declare global {
+  interface FlowViewComponents {
+    Gallery: ViewComponent<typeof Gallery>;
+  }
+}