@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/src/components/PDFViewer/PDFNavigation.tsx

@@ -1,68 +0,0 @@
-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

@@ -1,34 +0,0 @@
-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

@@ -1,128 +0,0 @@
-"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/Pagination.tsx

@@ -1,182 +0,0 @@
-import React, { useCallback, useMemo } from "react";
-import clsx from "clsx";
-import { Icon } from "./Icon";
-import { paddingUsingComponentGap } from "../classNames";
-import { Subheader } from "./Subheader";
-
-export interface PaginationProps {
-  /** Total number of pages (>=1). Component returns null if < 2. */
-  totalPages: number;
-  /** Current page (1-based, controlled). */
-  currentPage: number;
-  /** Parent controls state; we just notify desired target page. */
-  onPageChange: (page: number) => void;
-  id?: string;
-  testid?: string;
-  className?: string;
-  disabled?: boolean;
-}
-
-export const Pagination = ({
-  totalPages,
-  currentPage,
-  onPageChange,
-  id,
-  testid,
-  className,
-  disabled,
-}: PaginationProps) => {
-  const goTo = useCallback(
-    (page: number) => {
-      if (disabled) return;
-      onPageChange(page);
-    },
-    [onPageChange, disabled],
-  );
-
-  const handleKey = (e: React.KeyboardEvent) => {
-    if (disabled) return;
-    if (e.key === "ArrowLeft") {
-      e.preventDefault();
-      goTo(currentPage - 1);
-    } else if (e.key === "ArrowRight") {
-      e.preventDefault();
-      goTo(currentPage + 1);
-    }
-  };
-
-  type PageToken = number | "ellipsis";
-
-  const pageTokens: PageToken[] = useMemo(() => {
-    // If 5 or fewer pages, show all directly
-    if (totalPages <= 5) {
-      return Array.from({ length: totalPages }, (_, i) => i + 1);
-    }
-
-    // Build a focused window around current page
-    const pages = new Set<number>();
-    pages.add(1);
-    pages.add(totalPages);
-
-    if (currentPage <= 3) {
-      // Near the start – show first 4 pages
-      pages.add(2);
-      pages.add(3);
-      pages.add(4);
-    } else if (currentPage >= totalPages - 2) {
-      // Near the end – show last 4 pages
-      pages.add(totalPages - 1);
-      pages.add(totalPages - 2);
-      pages.add(totalPages - 3);
-    } else {
-      // Middle – show current, one before & one after
-      pages.add(currentPage - 1);
-      pages.add(currentPage);
-      pages.add(currentPage + 1);
-    }
-
-    const sorted = Array.from(pages).sort((a, b) => a - b);
-
-    const tokens: PageToken[] = [];
-    for (let i = 0; i < sorted.length; i++) {
-      const value = sorted[i];
-      const prev = sorted[i - 1];
-      if (i > 0) {
-        if (value - prev === 2) {
-          // Single gap – include the missing number
-          tokens.push(prev + 1);
-        } else if (value - prev > 2) {
-          // Larger gap – ellipsis
-          tokens.push("ellipsis");
-        }
-      }
-      tokens.push(value);
-    }
-    return tokens;
-  }, [totalPages, currentPage]);
-
-  if (totalPages <= 1) return null;
-
-  const buttonClass = clsx(
-    "cursor-pointer disabled:cursor-default",
-    paddingUsingComponentGap,
-    "w-8 h-8",
-    "flex items-center justify-center",
-    "bg-transparent",
-    "box-content",
-    "hover:bg-background-grouped-secondary-normal",
-    "focus:bg-background-grouped-secondary-normal focus:outline-0",
-    "disabled:bg-transparent disabled:text-text-action-primary-disabled",
-  );
-
-  return (
-    <nav
-      id={id}
-      data-testid={testid}
-      aria-label="Pagination"
-      onKeyDown={handleKey}
-      className={clsx(
-        "flex items-center",
-        "border border-border-primary-normal",
-        "bg-background-grouped-primary-normal",
-        "rounded-sm",
-        className,
-      )}
-    >
-      <button
-        disabled={disabled || currentPage <= 1}
-        aria-label="Previous page"
-        onClick={() => goTo(currentPage - 1)}
-        className={clsx(buttonClass, "border-r-1 border-border-primary-normal")}
-      >
-        <Icon name="keyboard_arrow_left" />
-      </button>
-
-      <ul className={clsx("flex items-center")}>
-        {pageTokens.map((token, index) => {
-          if (token === "ellipsis") {
-            return (
-              <li
-                key={`ellipsis-${index}`}
-                className="w-8 h-8 select-none text-text-action-primary-disabled"
-              >
-                …
-              </li>
-            );
-          }
-          const selected = token === currentPage;
-          return (
-            <li key={token}>
-              <button
-                aria-label={`Page ${token}`}
-                aria-current={selected ? "page" : undefined}
-                disabled={disabled}
-                onClick={() => goTo(token)}
-                className={clsx(
-                  buttonClass,
-                  selected &&
-                    "border-x-1 bg-background-grouped-secondary-normal border-border-primary-normal",
-                )}
-              >
-                <Subheader align="center" weight="bold">
-                  {token}
-                </Subheader>
-              </button>
-            </li>
-          );
-        })}
-      </ul>
-
-      <button
-        disabled={disabled || currentPage >= totalPages}
-        aria-label="Next page"
-        onClick={() => goTo(currentPage + 1)}
-        className={clsx(buttonClass, "border-l-1 border-border-primary-normal")}
-      >
-        <Icon name="keyboard_arrow_right" />
-      </button>
-    </nav>
-  );
-};
-
-Pagination.displayName = "Pagination";

package/src/components/Paragraph.tsx

@@ -1,55 +0,0 @@
-import clsx from "clsx";
-import { componentPaddingXUsingComponentGap, typography } from "../classNames";
-import { AsProps, TextAttributes, TypographyProps } from "../types";
-
-type Tags = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "span" | "p";
-
-type ParagraphProps = {
-  as?: Tags;
-  id?: string;
-  testid?: string;
-} & AsProps<Tags> &
-  TextAttributes &
-  TypographyProps;
-
-export const Paragraph = ({
-  className,
-  color,
-  padded,
-  align = "left",
-  tall,
-  addOverflow,
-  children,
-  as = "p",
-  id,
-  testid,
-  ...props
-}: ParagraphProps) => {
-  const Element = as;
-
-  return (
-    <Element
-      id={id}
-      data-testid={testid}
-      {...props}
-      className={clsx(
-        typography.paragraph,
-        className,
-        padded && componentPaddingXUsingComponentGap,
-        align === "left" && "text-left",
-        align === "center" && "text-center",
-        align === "right" && "text-right",
-        tall && "!leading-6",
-        addOverflow && "whitespace-nowrap text-ellipsis overflow-hidden",
-      )}
-      style={{
-        ...props.style,
-        color: color ? `var(--color-${color})` : undefined,
-      }}
-    >
-      {children}
-    </Element>
-  );
-};
-
-Paragraph.displayName = "Paragraph";

package/src/components/Password.tsx

@@ -1,62 +0,0 @@
-"use client";
-
-import { ComponentProps, useState } from "react";
-import { InputBase, InputBaseProps } from "./Input";
-import { Icon } from "./Icon";
-import { Tooltip } from "./Tooltip";
-
-export const Password = ({
-  id,
-  testid,
-  ...props
-}: Omit<ComponentProps<"input">, "type" | "children" | "id"> &
-  InputBaseProps) => {
-  const [show, setShow] = useState(false);
-
-  return (
-    <InputBase
-      id={id}
-      testid={testid}
-      {...props}
-      type={show ? "text" : "password"}
-      after={<WhichIcon id={id} testid={testid} show={show} setShow={setShow} />}
-    />
-  );
-};
-
-type WhichIconProps = {
-  id?: string;
-  testid?: string;
-  show: boolean;
-  setShow: (value: boolean) => void;
-};
-
-const WhichIcon = ({ id, testid, show, setShow }: WhichIconProps) => {
-  if (show) {
-    return (
-      <Tooltip message="Show">
-        <Icon
-          id={id ? `${id}-toggle-visibility` : undefined}
-          testid={testid ? `${testid}-toggle-visibility` : undefined}
-          name="visibility_off"
-          className="cursor-pointer"
-          onClick={() => setShow(false)}
-        />
-      </Tooltip>
-    );
-  }
-
-  return (
-    <Tooltip message="Hide">
-      <Icon
-        id={id ? `${id}-toggle-visibility` : undefined}
-        testid={testid ? `${testid}-toggle-visibility` : undefined}
-        name="visibility"
-        className="cursor-pointer"
-        onClick={() => setShow(true)}
-      />
-    </Tooltip>
-  );
-};
-
-Password.displayName = "Password";

package/src/components/ProductImagePreview/CarouselPagination.tsx

@@ -1,54 +0,0 @@
-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>
-  );
-}