@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/src/components/ProductImagePreview/index.tsx

@@ -0,0 +1,182 @@
+import { Thumbnail } from "./Thumbnail";
+import { Stack } from "../Stack";
+import { Grid } from "../Grid";
+import { ProductPrimaryImage } from "./ProductPrimaryImage";
+import { ZoomWindow } from "./ZoomWindow";
+import { CarouselPagination } from "./CarouselPagination";
+import { MobileImageCarousel } from "./MobileImageCarousel";
+import { useMatchesMobile } from "../../hooks";
+import { useProductImagePreview } from "./useProductImagePreview";
+
+export type ProductPreviewImage = {
+  src: string;
+  alt?: string;
+};
+
+export type ProductImagePreviewProps = {
+  width?: number;
+  height?: number;
+  images: ProductPreviewImage[];
+  currentIndex: number;
+  zoomEnabled?: boolean;
+  zoomLensSize?: number;
+  zoomFactor?: number;
+  zoomWindowScaleFactor?: number;
+  zoomWindowOffset?: number;
+  scrollToZoomEnabled?: boolean;
+  thumbsPerRow?: 8 | 5 | 2 | 4 | 1 | 3 | 6 | 7 | 9 | 10 | 11 | 12;
+  isMobile?: boolean; // Must be used for functionality only
+  onChangeIndex: (next: number) => void;
+};
+
+const PLACEHOLDER_IMAGES = [
+  { src: "", alt: "placeholder" },
+  { src: "", alt: "placeholder" },
+];
+/** Product image gallery with primary image display, thumbnail navigation, and optional zoom functionality */
+export function ProductImagePreview(props: ProductImagePreviewProps) {
+  const {
+    width = 483,
+    height = 483,
+    thumbsPerRow = 4,
+    zoomEnabled = false,
+    scrollToZoomEnabled = false,
+    images,
+    currentIndex,
+    onChangeIndex,
+    zoomLensSize,
+    zoomFactor = 2,
+    zoomWindowScaleFactor = 2.5,
+    zoomWindowOffset = 10,
+  } = props;
+
+  const isMobile = useMatchesMobile();
+
+  const {
+    zoomPoint,
+    zoomActive,
+    currentZoomFactor,
+    primaryImagePosition,
+    safeIndex,
+    active,
+    primaryImageRef,
+    handleSelect,
+    handleZoomPositionChange,
+    handleScrollZoom,
+  } = useProductImagePreview({
+    images,
+    currentIndex,
+    zoomEnabled,
+    zoomFactor,
+    scrollToZoomEnabled,
+    onChangeIndex,
+    isMobile,
+  });
+
+  if (typeof isMobile === "undefined") return null;
+
+  // Disable zoom on mobile
+  const effectiveZoomEnabled = zoomEnabled && !isMobile;
+
+  return (
+    <Stack sizing="layout" style={{ width, position: "relative" }}>
+      {/* Desktop layout - hidden on mobile */}
+      <div className="hidden md:block">
+        <div className="flex gap-4 items-start">
+          <div ref={primaryImageRef}>
+            <ProductPrimaryImage
+              image={active}
+              width={width}
+              height={height}
+              zoomEnabled={effectiveZoomEnabled}
+              zoomLensSize={zoomLensSize}
+              scrollToZoomEnabled={scrollToZoomEnabled && !isMobile}
+              onZoomPositionChange={handleZoomPositionChange}
+              onScrollZoom={handleScrollZoom}
+              isPlaceholder={images.length === 0}
+            />
+          </div>
+          {effectiveZoomEnabled && (
+            <ZoomWindow
+              image={active}
+              width={width}
+              height={height}
+              pointer={zoomPoint}
+              active={zoomActive}
+              zoomFactor={currentZoomFactor}
+              scaleFactor={zoomWindowScaleFactor}
+              primaryImagePosition={primaryImagePosition}
+              offset={zoomWindowOffset}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Mobile carousel - only visible on mobile */}
+      <MobileImageCarousel
+        images={images}
+        currentIndex={safeIndex}
+        width={width}
+        height={height}
+        onChangeIndex={handleSelect}
+      />
+
+      {/* Desktop thumbnail grid - hidden on mobile */}
+      <div className="hidden md:block">
+        {images.length <= 3 ? (
+          <div
+            className="flex justify-center gap-4"
+            style={{ width: "100%", maxWidth: width }}
+            aria-label="Product image thumbnails"
+          >
+            {(images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
+              (img, i) => (
+                <div key={img.src + i} style={{ maxWidth: "115px" }}>
+                  <Thumbnail
+                    src={img.src}
+                    alt={img.alt || `Thumbnail ${i + 1}`}
+                    isActive={i === safeIndex}
+                    onClick={() => handleSelect(i)}
+                    isPlaceholder={images.length === 0}
+                  />
+                </div>
+              ),
+            )}
+          </div>
+        ) : (
+          <Grid
+            sizing="layout-group"
+            aria-label="Product image thumbnails"
+            style={{
+              width: "100%",
+              maxWidth: width,
+            }}
+            columns={
+              thumbsPerRow > 12 ? 12 : thumbsPerRow < 1 ? 1 : thumbsPerRow
+            }
+          >
+            {(images.length === 0 ? PLACEHOLDER_IMAGES : images).map(
+              (img, i) => (
+                <Thumbnail
+                  key={img.src + i}
+                  src={img.src}
+                  alt={img.alt || `Thumbnail ${i + 1}`}
+                  isActive={i === safeIndex}
+                  onClick={() => handleSelect(i)}
+                  isPlaceholder={images.length === 0}
+                />
+              ),
+            )}
+          </Grid>
+        )}
+      </div>
+
+      {/* Mobile carousel pagination - only visible on mobile */}
+      <CarouselPagination
+        images={images}
+        currentIndex={safeIndex}
+        onSelect={handleSelect}
+      />
+    </Stack>
+  );
+}

package/src/components/ProductImagePreview/useProductImagePreview.ts

@@ -0,0 +1,211 @@
+import { useCallback, useEffect, useRef, useState, useMemo } from "react";
+import type { ProductPreviewImage } from ".";
+
+export type UseProductImagePreviewProps = {
+  images: ProductPreviewImage[];
+  currentIndex: number;
+  zoomEnabled?: boolean;
+  zoomFactor?: number;
+  scrollToZoomEnabled?: boolean;
+  onChangeIndex: (next: number) => void;
+  isMobile?: boolean;
+};
+
+export type UseProductImagePreviewReturn = {
+  // State
+  zoomPoint: {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    lensSize: number;
+  } | null;
+  zoomActive: boolean;
+  currentZoomFactor: number;
+  primaryImagePosition: DOMRect | null;
+  hasImages: boolean;
+  safeIndex: number;
+  active: ProductPreviewImage | undefined;
+
+  // Refs
+  primaryImageRef: React.RefObject<HTMLDivElement | null>;
+
+  // Handlers
+  handleSelect: (idx: number) => void;
+  handleZoomPositionChange: (
+    p: {
+      x: number;
+      y: number;
+      w: number;
+      h: number;
+      lensSize: number;
+    } | null,
+    active: boolean,
+  ) => void;
+  handleScrollZoom: (delta: number) => void;
+  handleNext: () => void;
+  handlePrevious: () => void;
+};
+
+/**
+ * Custom hook for managing product image preview logic including zoom, navigation, and mobile behavior
+ */
+export function useProductImagePreview(
+  props: UseProductImagePreviewProps,
+): UseProductImagePreviewReturn {
+  const {
+    images,
+    currentIndex,
+    zoomEnabled = false,
+    zoomFactor = 2,
+    scrollToZoomEnabled = false,
+    onChangeIndex,
+    isMobile = false,
+  } = props;
+
+  // Derived state
+  const hasImages = !!images?.length;
+  const safeIndex =
+    hasImages && currentIndex >= 0 && currentIndex < images.length
+      ? currentIndex
+      : 0;
+
+  // Memoize active image to prevent unnecessary re-renders
+  const active = useMemo(() => {
+    return hasImages ? images[safeIndex] : undefined;
+  }, [hasImages, images, safeIndex]);
+
+  // Zoom state
+  const [zoomPoint, setZoomPoint] = useState<{
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    lensSize: number;
+  } | null>(null);
+  const [zoomActive, setZoomActive] = useState(false);
+  const [currentZoomFactor, setCurrentZoomFactor] = useState(zoomFactor);
+  const [primaryImagePosition, setPrimaryImagePosition] =
+    useState<DOMRect | null>(null);
+
+  // Refs
+  const primaryImageRef = useRef<HTMLDivElement>(null);
+  const cleanupRef = useRef<(() => void) | null>(null);
+
+  // Disable zoom functionality on mobile
+  const effectiveZoomEnabled = zoomEnabled && !isMobile;
+  const effectiveScrollToZoomEnabled = scrollToZoomEnabled && !isMobile;
+
+  // Track primary image position for zoom window
+  useEffect(() => {
+    if (!effectiveZoomEnabled) return;
+
+    const setupTracking = () => {
+      const element = primaryImageRef.current;
+      if (!element) return;
+
+      const updatePosition = () => {
+        if (element) {
+          setPrimaryImagePosition(element.getBoundingClientRect());
+        }
+      };
+
+      updatePosition();
+
+      const resizeObserver = new ResizeObserver(updatePosition);
+      resizeObserver.observe(element);
+
+      window.addEventListener("scroll", updatePosition);
+      window.addEventListener("resize", updatePosition);
+
+      cleanupRef.current = () => {
+        resizeObserver.disconnect();
+        window.removeEventListener("scroll", updatePosition);
+        window.removeEventListener("resize", updatePosition);
+      };
+    };
+
+    if (primaryImageRef.current) {
+      setupTracking();
+    } else {
+      const frameId = requestAnimationFrame(setupTracking);
+      return () => cancelAnimationFrame(frameId);
+    }
+
+    return () => {
+      if (cleanupRef.current) {
+        cleanupRef.current();
+        cleanupRef.current = null;
+      }
+    };
+  }, [effectiveZoomEnabled]);
+
+  // Navigation handlers
+  const handleSelect = useCallback(
+    (idx: number) => {
+      if (idx === safeIndex) return;
+      onChangeIndex(idx);
+    },
+    [safeIndex, onChangeIndex],
+  );
+
+  const handleNext = useCallback(() => {
+    if (!hasImages) return;
+    const nextIndex = (safeIndex + 1) % images.length;
+    onChangeIndex(nextIndex);
+  }, [hasImages, safeIndex, images.length, onChangeIndex]);
+
+  const handlePrevious = useCallback(() => {
+    if (!hasImages) return;
+    const previousIndex = safeIndex === 0 ? images.length - 1 : safeIndex - 1;
+    onChangeIndex(previousIndex);
+  }, [hasImages, safeIndex, images.length, onChangeIndex]);
+
+  // Zoom handlers
+  const handleZoomPositionChange = useCallback(
+    (p: typeof zoomPoint, active: boolean) => {
+      // Only allow zoom on non-mobile devices
+      if (isMobile) return;
+      setZoomPoint(p);
+      setZoomActive(active);
+    },
+    [isMobile],
+  );
+
+  const handleScrollZoom = useCallback(
+    (delta: number) => {
+      if (!effectiveScrollToZoomEnabled) return;
+
+      // Calculate new zoom factor with bounds (1x to 5x)
+      const newZoomFactor = Math.max(1, Math.min(5, currentZoomFactor + delta));
+      setCurrentZoomFactor(newZoomFactor);
+    },
+    [effectiveScrollToZoomEnabled, currentZoomFactor],
+  );
+
+  // Reset zoom factor when base zoom factor changes
+  useEffect(() => {
+    setCurrentZoomFactor(zoomFactor);
+  }, [zoomFactor]);
+
+  return {
+    // State
+    zoomPoint,
+    zoomActive,
+    currentZoomFactor,
+    primaryImagePosition,
+    hasImages,
+    safeIndex,
+    active,
+
+    // Refs
+    primaryImageRef,
+
+    // Handlers
+    handleSelect,
+    handleZoomPositionChange,
+    handleScrollZoom,
+    handleNext,
+    handlePrevious,
+  };
+}

package/src/components/SkeletonParagraph.tsx

@@ -0,0 +1,5 @@
+export function SkeletonParagraph() {
+  return (
+    <div className="h-[24px] bg-gradient-to-r from-neutral-100 to-[#f7f7f7] w-full rounded-xs min-w-32 "></div>
+  );
+}

package/src/components/Stack.tsx

@@ -27,11 +27,11 @@ type StackProps = {
   rounded?: boolean;
   centered?: boolean;
   width?: number | "full" | "fit" | "max";
-  maxWidth?: number;
+  maxWidth?: number | string;
   minWidth?: number;
   height?: string | number | "full";
-  minHeight?: number;
-  maxHeight?: number;
+  minHeight?: number | string;
+  maxHeight?: number | string;
   borderColor?: BorderColorTokens;
   backgroundColor?: BackgroundColorTokens;
   overflowY?: "hidden" | "scroll" | "auto" | "inherit";
@@ -39,6 +39,7 @@ type StackProps = {
   zIndex?: number;
   position?: CSSProperties["position"];
   top?: number;
+  bottom?: number;
   left?: number;
   id?: string;
   testid?: string;
@@ -123,6 +124,8 @@ export const Stack = ({
   marginTop,
   marginBottom,
   testid,
+  bottom,
+  zIndex,
   ...props
 }: StackProps) => {
   const flexClassNames = getFlexClassNames({ items, justify, grow });
@@ -140,9 +143,25 @@ export const Stack = ({
             : height !== undefined
               ? `${height}px`
               : undefined,
-        maxHeight: maxHeight !== undefined ? `${maxHeight}px` : undefined,
-        minHeight: minHeight !== undefined ? `${minHeight}px` : undefined,
-        maxWidth: maxWidth !== undefined ? `${maxWidth}px` : undefined,
+        maxHeight:
+          maxHeight !== undefined
+            ? isNaN(+maxHeight)
+              ? maxHeight
+              : `${maxHeight}px`
+            : props.style?.maxHeight,
+        maxWidth:
+          maxWidth !== undefined
+            ? isNaN(+maxWidth)
+              ? maxWidth
+              : `${maxWidth}px`
+            : props.style?.maxWidth,
+        minHeight:
+          minHeight !== undefined
+            ? isNaN(+minHeight)
+              ? minHeight
+              : `${minHeight}px`
+            : props.style?.minHeight,
+
         width:
           width !== undefined && typeof width === "number"
             ? `${width}px`
@@ -158,7 +177,11 @@ export const Stack = ({
         flexShrink: flexShrink !== undefined ? flexShrink : undefined,
         position: position !== undefined ? position : undefined,
         top: top !== undefined ? `${top}px` : undefined,
+        bottom: bottom !== undefined ? `${bottom}px` : undefined,
         left: left !== undefined ? `${left}px` : undefined,
+        borderBlock: props.style?.borderBlock,
+        marginInline: props.style?.marginInline,
+        zIndex: zIndex !== undefined ? zIndex : undefined,
       }}
       className={clsx(
         "scrollbar-thin",

package/src/components/Stepper.tsx

@@ -38,7 +38,11 @@ export const Stepper = ({
   }
 
   return (
-    <div id={id} data-testid={testid} className={clsx("flex items-center", componentGap)}>
+    <div
+      id={id}
+      data-testid={testid}
+      className={clsx("flex items-center", componentGap)}
+    >
       <Button
         id={id ? `${id}-decrease-button` : undefined}
         testid={testid ? `${testid}-decrease-button` : undefined}

package/src/components/index.ts

@@ -20,3 +20,7 @@ export { Tooltip } from "./Tooltip";
 export { Input } from "./Input";
 export { Accordion } from "./Accordion";
 export { Card } from "./Card";
+export { MobileDataGrid } from "./MobileDataGrid";
+export { ProductImagePreview } from "./ProductImagePreview";
+export { CompactImagesPreview } from "./CompactImagesPreview";
+export { PDFViewer } from "./PDFViewer";

package/src/types.ts

@@ -126,7 +126,8 @@ export type BackgroundColorTokens =
   | "background-action-critical-secondary-normal"
   | "background-action-critical-secondary-hover"
   | "background-action-critical-secondary-active"
-  | "background-action-critical-secondary-disabled";
+  | "background-action-critical-secondary-disabled"
+  | "background-brand-normal";
 
 export type TextAttributes = {
   color?: TextColorTokens;

package/dist/components/MobileDataGrid.js

@@ -1,150 +0,0 @@
-import {
-  Theme
-} from "../chunk-EWGHVZL5.js";
-import {
-  Heading3
-} from "../chunk-EU73QPW7.js";
-import {
-  Stack
-} from "../chunk-NQXZBWDZ.js";
-import {
-  Paragraph
-} from "../chunk-OGIFIPKH.js";
-import {
-  Icon
-} from "../chunk-NKUETCDA.js";
-import {
-  Button
-} from "../chunk-WWAPK5PH.js";
-import "../chunk-6CTCHYIS.js";
-import "../chunk-ORMEWXMH.js";
-
-// src/components/MobileDataGrid.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-function MobileDataGrid({
-  columns,
-  data,
-  header,
-  getId,
-  renderLink,
-  renderChevron,
-  id,
-  testid
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      id,
-      "data-testid": testid,
-      className: clsx(
-        "rounded",
-        "overflow-hidden",
-        "divide-y divide-border-primary-normal",
-        "border border-border-primary-normal",
-        "overflow-y-scroll scrollbar-thin"
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          MobileDataGridHeader,
-          {
-            id: id ? `${id}-header` : void 0,
-            testid: testid ? `${testid}-header` : void 0,
-            header
-          }
-        ),
-        data.map((item) => /* @__PURE__ */ jsx(
-          MobileDataGridCard,
-          {
-            id: id ? `${id}-card-${getId(item)}` : void 0,
-            testid: testid ? `${testid}-card-${getId(item)}` : void 0,
-            data: item,
-            columns,
-            renderLink,
-            renderChevron
-          },
-          getId(item)
-        ))
-      ]
-    }
-  );
-}
-function MobileDataGridHeader({
-  header,
-  id,
-  testid
-}) {
-  return /* @__PURE__ */ jsx("div", { id, "data-testid": testid, className: "sticky top-0", children: /* @__PURE__ */ jsx(Theme, { theme: "brand", children: /* @__PURE__ */ jsx(
-    Stack,
-    {
-      horizontal: true,
-      items: "start",
-      justify: "center",
-      backgroundColor: "background-primary-normal",
-      padding: true,
-      sizing: "component",
-      children: /* @__PURE__ */ jsx(Heading3, { as: "span", color: "text-primary-normal", children: header })
-    }
-  ) }) });
-}
-function MobileDataGridCard({
-  data,
-  columns,
-  renderLink,
-  renderChevron,
-  id,
-  testid
-}) {
-  return /* @__PURE__ */ jsxs("div", { id, "data-testid": testid, children: [
-    /* @__PURE__ */ jsxs(Stack, { sizing: "component", padding: true, children: [
-      /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "between", children: [
-        renderLink && renderLink(data),
-        /* @__PURE__ */ jsxs(Stack, { horizontal: true, horizontalMobile: true, items: "center", justify: "end", children: [
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              id: id ? `${id}-docs-button` : void 0,
-              testid: testid ? `${testid}-docs-button` : void 0,
-              iconOnly: true,
-              variant: "tertiary",
-              onClick: () => {
-              },
-              leftIcon: /* @__PURE__ */ jsx(Icon, { name: "docs" })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              id: id ? `${id}-swap-button` : void 0,
-              testid: testid ? `${testid}-swap-button` : void 0,
-              iconOnly: true,
-              variant: "tertiary",
-              onClick: () => {
-              },
-              leftIcon: /* @__PURE__ */ jsx(Icon, { name: "swap_vert" })
-            }
-          )
-        ] })
-      ] }),
-      columns.filter((x) => x.show).map((column) => /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "mb-2 grid grid-cols-2",
-          children: [
-            /* @__PURE__ */ jsxs(Paragraph, { color: "text-secondary-normal", className: "text-left", children: [
-              column.header,
-              ":"
-            ] }),
-            " ",
-            column.cell ? column.cell({ row: data }) : String(data[column.accessorKey])
-          ]
-        },
-        String(column.accessorKey)
-      ))
-    ] }),
-    renderChevron && /* @__PURE__ */ jsx(Stack, { items: "center", justify: "center", horizontal: true, horizontalMobile: true, children: renderChevron(data) })
-  ] });
-}
-export {
-  MobileDataGrid
-};