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,86 @@
+.gallery {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  --button-width: calc(
+    var(--icon--size--m) + 2 * var(--button--padding-icon-only)
+  );
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: var(--light-box--max-height);
+
+    --content-width: calc(
+      (var(--button-width) * 4) + (var(--light-box--spacing) * 2)
+    );
+
+    width: calc(var(--light-box--max-width) - var(--content-width));
+    touch-action: pan-y;
+  }
+
+  .indicators {
+    display: flex;
+    justify-content: center;
+    padding-top: var(--light-box--spacing);
+    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);
+    }
+  }
+
+  .galleryItem {
+    display: flex;
+    justify-content: center;
+
+    --content-height: calc(var(--light-box--spacing) + var(--icon--size--m));
+
+    max-height: calc(var(--light-box--max-height) - var(--content-height));
+    user-select: none;
+
+    .actions {
+      display: flex;
+      flex-direction: column;
+      margin-right: calc(var(--button-width) * -1);
+      margin-inline-start: var(--light-box--spacing);
+      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;
+      max-height: 100%;
+      max-width: 100%;
+      pointer-events: none;
+    }
+
+    @keyframes fade-in {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,111 @@
+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);
+
+  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)}>
+      <Button
+        aria-label={stringFormatter.format("gallery.previous")}
+        onPress={() => paginate(-1)}
+        color="light-static"
+      >
+        <IconChevronLeft />
+      </Button>
+
+      <div
+        className={styles.content}
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
+      >
+        <div className={styles.galleryItem} key={currentIndex}>
+          {children[currentIndex]}
+        </div>
+
+        <div
+          className={styles.indicators}
+          aria-label={stringFormatter.format("gallery.indicator", {
+            current: currentIndex + 1,
+            count,
+          })}
+        >
+          {indicators}
+        </div>
+      </div>
+
+      <Button
+        aria-label={stringFormatter.format("gallery.next")}
+        onPress={() => paginate(1)}
+        color="light-static"
+      >
+        <IconChevronRight />
+      </Button>
+    </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>;
+  }
+}

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

@@ -0,0 +1,48 @@
+import { flowComponent } from "@/lib/componentFactory/flowComponent";
+import styles from "../Gallery/Gallery.module.scss";
+import { type PropsContext, PropsContextProvider } from "@/lib/propsContext";
+import { IconClose } from "@/components/Icon/components/icons";
+import { TunnelExit, TunnelProvider } from "@mittwald/react-tunnel";
+import { useOverlayController } from "@/lib/hooks";
+import { useLocalizedStringFormatter } from "react-aria";
+import locales from "../../locales/*.locale.json";
+import { Button } from "@/components/Button";
+import type { PropsWithChildren } from "react";
+
+export type GalleryItemProps = PropsWithChildren;
+
+/** @flr-generate all */
+export const GalleryItem = flowComponent("GalleryItem", (props) => {
+  const { children } = props;
+
+  const controller = useOverlayController("Modal");
+
+  const propsContext: PropsContext = {
+    ActionGroup: {
+      className: styles.actionGroup,
+      Button: { color: "light-static" },
+      tunnelId: "actionGroup",
+    },
+    Image: { className: styles.image },
+  };
+
+  const stringFormatter = useLocalizedStringFormatter(locales);
+
+  return (
+    <PropsContextProvider props={propsContext}>
+      <TunnelProvider>
+        {children}
+        <div className={styles.actions}>
+          <Button
+            aria-label={stringFormatter.format("gallery.close")}
+            color="light-static"
+            onPress={() => controller.close()}
+          >
+            <IconClose />
+          </Button>
+          <TunnelExit id="actionGroup" />
+        </div>
+      </TunnelProvider>
+    </PropsContextProvider>
+  );
+});

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

@@ -0,0 +1 @@
+export { type GalleryItemProps, GalleryItem } from "./GalleryItem";

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

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

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

@@ -1,3 +1,5 @@
 export * from "./components/LightBoxTrigger";
+export * from "./components/Gallery";
+export * from "./components/GalleryItem";
 export { type LightBoxProps, LightBox } from "./LightBox";
 export { default } from "./LightBox";

packages/components/src/components/LightBox/locales/de-DE.locale.json

@@ -0,0 +1,6 @@
+{
+  "gallery.close": "Schließen",
+  "gallery.indicator": "{current} von {count}",
+  "gallery.next": "Nächstes",
+  "gallery.previous": "Vorheriges"
+}

packages/components/src/components/LightBox/locales/en-US.locale.json

@@ -0,0 +1,6 @@
+{
+  "gallery.close": "Close",
+  "gallery.indicator": "{current} of {count}",
+  "gallery.next": "Next",
+  "gallery.previous": "Previous"
+}