@dmsi/wedgekit-react 0.0.369 → 0.0.371

package/src/components/MobileDataGrid/index.tsx

@@ -0,0 +1,92 @@
+import { ComponentProps } from "react";
+import { MobileDataGridHeader } from "./MobileDataGridHeader";
+import { ColumnDef } from "@tanstack/react-table";
+import { GridContextProvider } from "./GridContextProvider";
+import { RowDetailModalProvider } from "./RowDetailModalProvider";
+import { GridContextType } from "./GridContextProvider/GridContext";
+import { ColumnList } from "./ColumnList";
+import { Stack } from "../Stack";
+import { RowActions, RowData } from "./types";
+
+export type MobileDataGridProps<T> = {
+  columns: ColumnDef<T>[];
+  data: T[];
+  header?: string | ((ctx: GridContextType<T>) => React.ReactNode);
+  getId: (data: T) => string | number | undefined;
+  renderLink?: (data: T) => React.ReactNode;
+  primaryKey: keyof T;
+  id?: string;
+  testid?: string;
+  enableColumnSelector?: boolean;
+  enableRowSelection?: boolean;
+  onRowSelect?: (row: T, selectedIds: (string | number)[]) => void;
+  withBorder?: boolean;
+  footer?: (ctx: GridContextType<T>) => React.ReactNode;
+  numberOfColumnsToShow?: number;
+  renderChevron?: boolean;
+  hideHeader?: boolean;
+  rowActions?: RowActions<T>;
+  rounded?: boolean;
+};
+
+export function MobileDataGrid<T extends RowData>(
+  props: MobileDataGridProps<T> & ComponentProps<"div">,
+) {
+  const {
+    columns,
+    data,
+    renderLink,
+    renderChevron,
+    getId,
+    id,
+    testid,
+    enableColumnSelector,
+    enableRowSelection,
+    header,
+    withBorder = true,
+    footer,
+    onRowSelect,
+    numberOfColumnsToShow,
+    primaryKey,
+    hideHeader,
+    rowActions,
+    rounded,
+  } = props;
+
+  return (
+    <GridContextProvider<T>
+      initialColumns={columns}
+      id={id}
+      testid={testid}
+      data={data}
+      getId={getId}
+      onRowSelect={onRowSelect}
+      numberOfColumnsToShow={numberOfColumnsToShow}
+      primaryKey={primaryKey}
+    >
+      <Stack
+        height="full"
+        rounded={rounded}
+        overflowX="hidden"
+        overflowY="hidden"
+      >
+        {!hideHeader && (
+          <MobileDataGridHeader<T>
+            header={header}
+            enableColumnSelector={enableColumnSelector}
+            enableRowSelection={enableRowSelection}
+          />
+        )}
+        <ColumnList<T>
+          withBorder={withBorder}
+          renderLink={renderLink}
+          renderChevron={renderChevron}
+          enableRowSelection={enableRowSelection}
+          footer={footer}
+          rowActions={rowActions}
+        />
+      </Stack>
+      <RowDetailModalProvider />
+    </GridContextProvider>
+  );
+}

package/src/components/MobileDataGrid/types.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from "react";
+
+export type RowActions<T> = (rowData: T) => ReactNode;
+export type RowData = Record<string, unknown>;

package/src/components/Modal.tsx

@@ -17,7 +17,7 @@ type ModalProps = PropsWithChildren<{
   testid?: string;
   title?: string;
   open?: boolean;
-  size?: "small" | "medium" | "large" | "x-large";
+  size?: "small" | "medium" | "large" | "x-large" | "screen";
   className?: string;
   onClose?: () => void;
   onContinue?: () => void;
@@ -28,6 +28,10 @@ type ModalProps = PropsWithChildren<{
   headerIconAlign?: "left" | "center" | "right";
   fixedHeightScrolling?: boolean;
   customActions?: React.ReactNode;
+  headerClassname?: string;
+  backgroundColor?: string; // full twcss color with bg- prefix
+  noWrapper?: boolean;
+  customFooter?: boolean;
 }>;
 
 const fadeInScale = (element: HTMLElement, duration = 300) =>
@@ -102,6 +106,9 @@ const sizes = {
     sizeClass:
       "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240",
   },
+  screen: {
+    sizeClass: "w-screen h-screen max-w-screen !rounded-none",
+  },
 };
 
 export const Modal = ({
@@ -121,6 +128,9 @@ export const Modal = ({
   headerIconAlign,
   fixedHeightScrolling = false,
   customActions,
+  headerClassname,
+  customFooter,
+  noWrapper,
 }: ModalProps) => {
   const mounted = useMounted();
 
@@ -246,10 +256,12 @@ export const Modal = ({
         data-testid={testid}
         ref={modalRef}
         className={clsx(
-          "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
+          "shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
           computedFixedHeightScrolling &&
+            size !== "screen" &&
             "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
           className,
+          !className?.includes("bg-") && "bg-white",
           sizeClass,
         )}
         onClick={(e) => e.stopPropagation()}
@@ -262,8 +274,9 @@ export const Modal = ({
           hideCloseIcon={hideCloseIcon}
           headerIcon={headerIcon}
           headerIconAlign={headerIconAlign}
+          headerClassname={headerClassname}
         />
-        {children && (
+        {children && (size !== "screen" || noWrapper) ? (
           <ModalContent
             id={id ? `${id}-content` : undefined}
             testid={testid ? `${testid}-content` : undefined}
@@ -271,16 +284,22 @@ export const Modal = ({
           >
             {children}
           </ModalContent>
+        ) : (
+          children
         )}
-        {showButtons && (
-          <ModalButtons
-            id={id ? `${id}-buttons` : undefined}
-            testid={testid ? `${testid}-buttons` : undefined}
-            onClose={handleClose}
-            onContinue={onContinue}
-            customActions={customActions}
-          />
-        )}
+        {showButtons ? (
+          customFooter ? (
+            customActions
+          ) : (
+            <ModalButtons
+              id={id ? `${id}-buttons` : undefined}
+              testid={testid ? `${testid}-buttons` : undefined}
+              onClose={handleClose}
+              onContinue={onContinue}
+              customActions={customActions}
+            />
+          )
+        ) : null}
       </div>
     </ModalScrim>,
     findDocumentRoot(bgRef.current),

package/src/components/ModalButtons.tsx

@@ -18,7 +18,7 @@ export const ModalButtons = ({
   onContinue,
   customActions,
   id,
-  testid
+  testid,
 }: ModalButtonsProps) => {
   return (
     <div

package/src/components/ModalHeader.tsx

@@ -13,6 +13,7 @@ type ModalHeaderProps = {
   onClose?: () => void;
   id?: string;
   testid?: string;
+  headerClassname?: string;
 };
 
 export const ModalHeader = ({
@@ -23,6 +24,7 @@ export const ModalHeader = ({
   onClose,
   id,
   testid,
+  headerClassname,
 }: ModalHeaderProps) => {
   return (
     <div
@@ -35,9 +37,10 @@ export const ModalHeader = ({
         headerIconAlign === "left" && "justify-start",
         layoutPaddding,
         layoutGroupGap,
+        headerClassname,
       )}
     >
-      <div className={clsx("flex items-center", layoutGroupGap)}>
+      <div className={clsx("flex items-center flex-1", layoutGroupGap)}>
         {headerIcon}
         {title && (
           <Heading2
@@ -58,7 +61,7 @@ export const ModalHeader = ({
           variant="tertiary"
           onClick={onClose}
           leftIcon={
-            <span className="text-icon-primary-normal contents">
+            <span className="text-brand-text-action-primary-normal desktop:text-icon-primary-normal contents">
               <Icon name="close" size={24} />
             </span>
           }

package/src/components/ModalScrim.tsx

@@ -4,7 +4,7 @@ import { PropsWithChildren } from "react";
 type ModalScrimProps = PropsWithChildren<{
   sampleWidth?: boolean;
   show?: boolean;
-  size?: "small" | "medium" | "large" | "x-large";
+  size?: "small" | "medium" | "large" | "x-large" | "screen";
   onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   ref?: React.Ref<HTMLDivElement>;
   id?: string;
@@ -25,9 +25,10 @@ export const ModalScrim = ({
       id={id}
       data-testid={testid}
       className={clsx(
-        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center desktop:p-4 group bg-neutral-600/50 fixed opacity-0",
+        "overflow-y-auto h-screen transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center group bg-neutral-600/50 fixed opacity-0",
         !show && " pointer-events-none",
         size === "small" && "p-4",
+        size === "screen" ? "desktop:p-0" : "desktop:p-4",
         "inset-0 z-50",
       )}
       onMouseDown={onClick}

package/src/components/PDFViewer/DownloadIcon.tsx

@@ -0,0 +1,22 @@
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+
+export function DownloadIcon({
+  onClick,
+  isDownloading,
+  testid,
+}: {
+  onClick: () => void;
+  isDownloading?: boolean;
+  testid?: string;
+}) {
+  return (
+    <Button
+      testid={testid}
+      iconOnly
+      variant="tertiary"
+      leftIcon={<Icon name={isDownloading ? "cached" : "download"} />}
+      onClick={onClick}
+    />
+  );
+}

package/src/components/PDFViewer/PDFElement.tsx

@@ -0,0 +1,90 @@
+import { usePdf } from "@mikecousins/react-pdf";
+import { useRef } from "react";
+import { Spinner } from "../Spinner";
+import { Stack } from "../Stack";
+import { PdfPage } from "./PDFPage";
+import clsx from "clsx";
+
+export function PDFElement({
+  b64,
+  testid,
+  isMobile,
+  error,
+}: {
+  b64: string;
+  testid?: string;
+  isMobile?: boolean;
+  error?: React.ReactNode;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const { pdfDocument } = usePdf({
+    file: `data:application/pdf;base64,${b64}`,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: isMobile ? 1 : 1.3,
+    canvasRef,
+  });
+
+  const pagesArr = new Array(pdfDocument?.numPages ?? 1).fill(null);
+
+  return (
+    <div
+      className="flex flex-col space-y-4"
+      style={
+        !isMobile
+          ? {
+              minHeight: 871,
+              minWidth: 654,
+            }
+          : undefined
+      }
+    >
+      {!!pdfDocument && !!b64 && !error ? (
+        <Stack sizing="layout-group">
+          {pagesArr.length > 1 ? (
+            pagesArr.map((_, i) => (
+              <div
+                key={`${testid}-pdf-page-${i + 1}`}
+                className={clsx(
+                  "flex justify-center border-border-primary-normal",
+                  isMobile ? "border-0" : "border",
+                )}
+              >
+                <PdfPage
+                  testid={testid ? `${testid}-pdf_page_${i + 1}` : undefined}
+                  file={`data:application/pdf;base64,${b64}`}
+                  pageNumber={i + 1}
+                />
+              </div>
+            ))
+          ) : (
+            <div
+              className={clsx(
+                "flex justify-center border-border-primary-normal",
+                isMobile ? "border-0" : "border",
+              )}
+            >
+              <canvas
+                data-testid={testid ? `${testid}-pdf-content` : undefined}
+                ref={canvasRef}
+                style={{ width: "100%", height: "auto" }}
+              />
+            </div>
+          )}
+        </Stack>
+      ) : (
+        <Stack
+          justify="center"
+          items="center"
+          height="full"
+          flexGrow={1}
+          data-testid={
+            testid ? `${testid}-pdf-${error ? "error" : "loading"}` : undefined
+          }
+        >
+          {error ? error : <Spinner size="large" />}
+        </Stack>
+      )}
+    </div>
+  );
+}

package/src/components/PDFViewer/PDFNavigation.tsx

@@ -0,0 +1,68 @@
+import { Button } from "../Button";
+import { Heading3 } from "../Heading";
+import { Icon } from "../Icon";
+import { Paragraph } from "../Paragraph";
+import { Stack } from "../Stack";
+
+export function PdfNavigation({
+  currentIndex,
+  total,
+  onPrev,
+  onNext,
+  disablePrev,
+  disableNext,
+  extraActions,
+  testid,
+  fileName,
+}: {
+  currentIndex: number;
+  total: number;
+  onPrev: () => void;
+  onNext: () => void;
+  disablePrev: boolean;
+  disableNext: boolean;
+  extraActions?: React.ReactNode;
+  testid?: string;
+  fileName?: string;
+}) {
+  // TODO: Bring back horizontalMobile for 1st and 2nd stack after confirming navigation for multi-page/file
+  return (
+    <div className="w-full">
+      <Stack
+        horizontal
+        items="center"
+        justify="between"
+        sizing="layout-group"
+        testid={testid ? `${testid}-pdf-navigation` : undefined}
+      >
+        <Stack horizontal items="center">
+          <Button
+            iconOnly
+            variant="tertiary"
+            onClick={onPrev}
+            leftIcon={<Icon name="chevron_backward" />}
+            disabled={disablePrev}
+            testid={testid ? `${testid}-pdf-file-previous-button` : undefined}
+          />
+          <Heading3 className="text-text-primary-normal whitespace-nowrap">
+            {currentIndex + 1} / {total}
+          </Heading3>
+          <Button
+            iconOnly
+            variant="tertiary"
+            onClick={onNext}
+            rightIcon={<Icon name="chevron_forward" />}
+            disabled={disableNext}
+            testid={testid ? `${testid}-pdf-file-next-button` : undefined}
+          />
+          <Paragraph>
+            {fileName?.endsWith(".pdf") ? fileName : `${fileName}.pdf`}
+          </Paragraph>
+        </Stack>
+        {extraActions && (
+          <div className="flex items-center gap-2">{extraActions}</div>
+        )}
+      </Stack>
+    </div>
+  );
+}

package/src/components/PDFViewer/PDFPage.tsx

@@ -0,0 +1,34 @@
+import { usePdf } from "@mikecousins/react-pdf";
+import { useRef } from "react";
+
+export function PdfPage({
+  file,
+  pageNumber,
+  testid,
+  isMobile,
+}: {
+  file: string;
+  pageNumber: number;
+  testid?: string;
+  isMobile?: boolean;
+}) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  const { pdfDocument } = usePdf({
+    file,
+    page: pageNumber,
+    canvasRef,
+    workerSrc: "/scripts/pdf.worker.min.mjs",
+    scale: isMobile ? 1 : 1.3,
+  });
+
+  if (!pdfDocument) return null;
+
+  return (
+    <canvas
+      ref={canvasRef}
+      data-testid={testid}
+      style={{ width: "100%", height: "auto" }}
+    />
+  );
+}

package/src/components/PDFViewer/index.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useCallback, useState } from "react";
+import { Modal } from "../Modal";
+import { PDFElement } from "./PDFElement";
+import { DownloadIcon } from "./DownloadIcon";
+import { PdfNavigation } from "./PDFNavigation";
+
+type PDFViewerProps = {
+  isOpen: boolean;
+  onClose: () => void;
+  encodedPdfs: { fileName: string; base64: string }[];
+  customActions?: React.ReactNode;
+  testid?: string;
+  isMobile?: boolean;
+  title?: string;
+  withPagination?: boolean;
+  customFooter?: boolean;
+  error?: React.ReactNode;
+};
+
+export function PDFViewer(props: PDFViewerProps) {
+  const {
+    isOpen,
+    onClose,
+    encodedPdfs,
+    customActions,
+    testid,
+    isMobile,
+    title,
+    customFooter = false,
+    withPagination = true,
+    error,
+  } = props;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleDownload = useCallback(() => {
+    setIsDownloading(true);
+    const link = document.createElement("a");
+    const currentPdf = encodedPdfs[currentIndex];
+    if (!currentPdf) {
+      setIsDownloading(false);
+      return;
+    }
+    link.href = `data:application/pdf;base64,${currentPdf.base64}`;
+    link.download = currentPdf.fileName.endsWith(".pdf")
+      ? currentPdf.fileName
+      : `${currentPdf.fileName}.pdf`;
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    setIsDownloading(false);
+  }, [currentIndex, encodedPdfs]);
+
+  if (!encodedPdfs.length) return null;
+
+  function handleNextFile() {
+    if (currentIndex < encodedPdfs.length - 1) {
+      setCurrentIndex((prev) => prev + 1);
+    }
+  }
+
+  function handlePreviousFile() {
+    if (currentIndex > 0) {
+      setCurrentIndex((prev) => prev - 1);
+    }
+  }
+
+  function handleClose() {
+    setCurrentIndex(0);
+    setIsDownloading(false);
+    onClose();
+  }
+
+  return (
+    <Modal
+      testid={testid}
+      open={isOpen}
+      customFooter={customFooter}
+      onClose={handleClose}
+      noWrapper
+      showButtons={
+        isMobile && customFooter ? !!customActions : !!encodedPdfs.length
+      }
+      customActions={
+        !!encodedPdfs.length && !isMobile && withPagination ? (
+          <PdfNavigation
+            testid={testid}
+            currentIndex={currentIndex}
+            total={encodedPdfs.length}
+            onPrev={handlePreviousFile}
+            onNext={handleNextFile}
+            disablePrev={currentIndex === 0}
+            disableNext={currentIndex === encodedPdfs.length - 1}
+            extraActions={customActions}
+            fileName={encodedPdfs[currentIndex].fileName}
+          />
+        ) : (
+          customActions
+        )
+      }
+      fixedHeightScrolling
+      headerIconAlign="right"
+      headerIcon={
+        !isMobile ? (
+          <DownloadIcon
+            testid={testid ? `${testid}-download-icon` : undefined}
+            onClick={handleDownload}
+            isDownloading={isDownloading}
+          />
+        ) : undefined
+      }
+      title={
+        isMobile ? (title ?? encodedPdfs[currentIndex].fileName) : undefined
+      }
+      size={isMobile ? "screen" : "large"}
+      headerClassname="bg-brand-400 desktop:bg-background-grouped-primary-normal p-mobile-layout-padding text-brand-text-action-primary-normal"
+    >
+      <PDFElement
+        testid={testid}
+        b64={encodedPdfs[currentIndex].base64}
+        isMobile={isMobile}
+        error={error}
+      />
+    </Modal>
+  );
+}

package/src/components/ProductImagePreview/CarouselPagination.tsx

@@ -0,0 +1,54 @@
+import { clsx } from "clsx";
+import type { ProductPreviewImage } from "./index";
+
+export type CarouselPaginationProps = {
+  images: ProductPreviewImage[];
+  currentIndex: number;
+  onSelect: (index: number) => void;
+  className?: string;
+};
+export function CarouselPagination({
+  images,
+  currentIndex,
+  onSelect,
+  className,
+}: CarouselPaginationProps) {
+  if (!images?.length) return null;
+
+  return (
+    <div
+      className={clsx(
+        "flex items-center justify-center w-full px-4 md:hidden",
+        className,
+      )}
+      aria-label="Image navigation"
+    >
+      {/* Pagination squares in grid layout */}
+      <div
+        className="grid gap-2 place-items-center"
+        style={{
+          gridTemplateColumns: `repeat(${Math.min(images.length, 8)}, 1fr)`,
+        }}
+        role="tablist"
+      >
+        {images.map((_, index) => (
+          <button
+            key={index}
+            type="button"
+            onClick={() => onSelect(index)}
+            className={clsx(
+              "w-4 h-4 transition-all duration-200 focus:outline-none",
+              index === currentIndex
+                ? "ring-2 ring-brand-400"
+                : "ring ring-neutral-300",
+            )}
+            aria-label={`Go to image ${index + 1}`}
+            role="tab"
+            aria-selected={index === currentIndex}
+            tabIndex={index === currentIndex ? 0 : -1}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}