@dmsi/wedgekit-react 0.0.551 → 0.0.552

package/src/components/Toast.tsx

@@ -1,268 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import { useEffect, useRef, useState } from "react";
-import { Heading3 } from "./Heading";
-import { Paragraph } from "./Paragraph";
-import { Icon } from "./Icon";
-import { Button } from "./Button";
-import { createRoot } from "react-dom/client";
-import { componentGap, componentPadding, layoutGroupGap } from "../classNames";
-
-export interface ToastProps {
-  id?: string;
-  testid?: string;
-  variant?: "success" | "warning" | "error" | "info";
-  title?: string;
-  message?: string;
-  show?: boolean;
-  showToast?: boolean; // deprecated but still supported
-  onClose?: () => void;
-  viewButtonLink?: string;
-  showViewButton?: boolean;
-  style?: React.CSSProperties;
-}
-
-// Shared variant styles
-const variants = {
-  success: {
-    className: "border-success-400",
-    icon: (
-      <span className="text-icon-success-normal contents">
-        <Icon name="check_circle" size={24} />
-      </span>
-    ),
-  },
-  warning: {
-    className: "border-warning-400",
-    icon: (
-      <span className="text-icon-warning-normal contents">
-        <Icon name="warning" size={24} />
-      </span>
-    ),
-  },
-  error: {
-    className: "border-critical-400",
-    icon: (
-      <span className="text-icon-critical-normal contents">
-        <Icon name="error" size={24} />
-      </span>
-    ),
-  },
-  info: {
-    className: "border-action-400",
-    icon: (
-      <span className="text-icon-on-action-secondary-normal contents">
-        <Icon name="info" size={24} />
-      </span>
-    ),
-  },
-};
-
-// Animation utility
-const slideInFromBottomAnimation = (
-  element: HTMLElement,
-  displayDuration = 8000,
-  inDuration = 50,
-  outDuration = 50,
-) => {
-  const totalDuration = inDuration + displayDuration + outDuration;
-  const rect = element.getBoundingClientRect();
-  const slideDistance = window.innerHeight - rect.bottom + 16; // 16px for padding
-
-  return element.animate(
-    [
-      {
-        opacity: 0,
-        transform: `translateY(${slideDistance}px)`,
-        offset: 0,
-      },
-      {
-        opacity: 1,
-        transform: "translateY(0)",
-        offset: inDuration / totalDuration,
-      },
-      {
-        opacity: 1,
-        transform: "translateY(0)",
-        offset: (inDuration + displayDuration) / totalDuration,
-      },
-      {
-        opacity: 0,
-        transform: `translateY(${slideDistance}px)`,
-        offset: 1,
-      },
-    ],
-    {
-      duration: totalDuration,
-      easing: "cubic-bezier(0.4, 0, 0.2, 1)",
-      fill: "both",
-    },
-  );
-};
-
-// Get or create the shared toast root container
-const TOAST_ROOT_ID = "toast-root";
-function getToastRoot(): HTMLElement {
-  let root = document.getElementById(TOAST_ROOT_ID);
-  if (!root) {
-    root = document.createElement("div");
-    root.id = TOAST_ROOT_ID;
-    root.className =
-      "fixed bottom-6 right-6 z-50 flex flex-col items-end gap-4 pointer-events-none";
-    document.body.appendChild(root);
-  }
-  return root;
-}
-
-export const Toast = ({
-  id,
-  testid,
-  variant = "success",
-  title,
-  message,
-  show = false,
-  showToast = false, // deprecated
-  onClose,
-  viewButtonLink,
-  showViewButton = false,
-  ...props
-}: ToastProps) => {
-  const toastElementRef = useRef<HTMLDivElement>(null);
-  const animationRef = useRef<Animation | null>(null);
-  const [isHovered, setIsHovered] = useState(false);
-
-  useEffect(() => {
-    if (show && !showToast) {
-      if (toastElementRef.current) {
-        const animation = slideInFromBottomAnimation(toastElementRef.current);
-        animationRef.current = animation;
-
-        animation.onfinish = () => {
-          onClose?.();
-        };
-      }
-      return () => {
-        if (animationRef.current) {
-          animationRef.current.cancel();
-        }
-      };
-    }
-  }, [show, showToast, onClose]);
-
-  useEffect(() => {
-    if (animationRef.current) {
-      if (isHovered) {
-        animationRef.current.pause();
-      } else {
-        animationRef.current.play();
-      }
-    }
-  }, [isHovered]);
-
-  useEffect(() => {
-    const handleAnimationEnd = () => {
-      if (!isHovered) {
-        onClose?.();
-      }
-    };
-
-    if (animationRef.current) {
-      animationRef.current.addEventListener("finish", handleAnimationEnd);
-      return () => {
-        if (animationRef.current) {
-          animationRef.current.removeEventListener(
-            "finish",
-            handleAnimationEnd,
-          );
-        }
-      };
-    }
-  }, [isHovered, onClose]);
-
-  const handleMouseEnter = () => setIsHovered(true);
-  const handleMouseLeave = () => {
-    setIsHovered(false);
-    // Resume animation when mouse leaves
-    if (animationRef.current && animationRef.current.playState === "paused") {
-      animationRef.current.play();
-    }
-  };
-
-  const { className, icon: iconElement } =
-    variants[variant] ?? variants.success;
-
-  if (!show) return null;
-
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      ref={toastElementRef}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      className={clsx(
-        "flex items-start border-2 rounded-sm bg-white shadow-md cursor-pointer pointer-events-auto transition-all duration-300 ease-in-out w-fit",
-        componentPadding,
-        layoutGroupGap,
-        className,
-      )}
-      {...props}
-      style={props.style}
-    >
-      {iconElement}
-      <div className={clsx("flex items-center", layoutGroupGap)}>
-        <div className={clsx("flex flex-col w-68", componentGap)}>
-          {title && (
-            <Heading3 testid={testid ? `${testid}-title` : undefined} id={id ? `${id}-title` : undefined}>{title}</Heading3>
-          )}
-          {message && (
-            <Paragraph testid={testid ? `${testid}-message` : undefined} id={id ? `${id}-message` : undefined}>
-              {message}
-            </Paragraph>
-          )}
-        </div>
-
-        {showViewButton && (
-          <Button
-            id={id ? `${id}-view-button` : undefined}
-            testid={testid ? `${testid}-view-button` : undefined}
-            variant="tertiary"
-            href={viewButtonLink}
-          >
-            View
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-};
-
-Toast.displayName = "Toast";
-
-export function createToast(config: Omit<ToastProps, "id"> & { id?: string, testid?: string }) {
-  const toastRoot = getToastRoot();
-  const toastContainer = document.createElement("div");
-  toastRoot.appendChild(toastContainer);
-
-  const root = createRoot(toastContainer);
-
-  const handleClose = () => {
-    root.unmount();
-    toastContainer.remove();
-  };
-
-  root.render(
-    <Toast
-      id={config.id}
-      testid={config.testid}
-      show={true}
-      onClose={handleClose}
-      variant={config.variant}
-      title={config.title}
-      message={config.message}
-      showViewButton={config.showViewButton}
-      viewButtonLink={config.viewButtonLink}
-    />,
-  );
-}

package/src/components/Tooltip.tsx

@@ -1,159 +0,0 @@
-"use client";
-
-import clsx from "clsx";
-import {
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-import { createPortal } from "react-dom";
-import { componentPadding, typography } from "../classNames";
-
-export type TooltipProps = PropsWithChildren<{
-  id?: string;
-  testid?: string;
-  message: string;
-  position?: "top" | "bottom" | "left" | "right";
-  children?: ReactNode;
-  showOnTruncation?: boolean;
-  offset?: number;
-  keepHidden?: boolean; // for scenario where we want to keep the tooltip hidden based on a condition
-}>;
-
-export const Tooltip = ({
-  id,
-  testid,
-  message,
-  position = "top",
-  children,
-  showOnTruncation = false,
-  offset = 8,
-  keepHidden = false,
-}: TooltipProps) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const tooltipRef = useRef<HTMLDivElement>(null);
-  // Commented as state: "isTruncated" is not used
-  // const [isTruncated, setIsTruncated] = useState(false);
-  const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
-  const [isVisible, setIsVisible] = useState(false);
-  const [removeOpacity, setRemoveOpacity] = useState(false);
-
-  const updatePosition = () => {
-    if (!ref.current || !tooltipRef.current) return;
-
-    const rect = ref.current.getBoundingClientRect();
-    const tooltipRect = tooltipRef.current.getBoundingClientRect();
-
-    let top = 0;
-    let left = 0;
-
-    switch (position) {
-      case "top":
-        top = rect.top - tooltipRect.height - offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "bottom":
-        top = rect.bottom + offset;
-        left = rect.left + rect.width / 2 - tooltipRect.width / 2;
-        break;
-      case "left":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.left - tooltipRect.width - offset;
-        break;
-      case "right":
-        top = rect.top + rect.height / 2 - tooltipRect.height / 2;
-        left = rect.right + offset;
-        break;
-    }
-
-    setTooltipPosition({ top, left });
-    requestAnimationFrame(() => {
-      setRemoveOpacity(true);
-    });
-  };
-
-  const handleMouseEnter = () => {
-    if (!showOnTruncation || checkForTextTruncation()) {
-      setIsVisible(true);
-    }
-  };
-
-  const handleMouseLeave = () => {
-    setIsVisible(false);
-    setRemoveOpacity(false);
-  };
-
-  useEffect(() => {
-    if (isVisible && tooltipRef.current) {
-      requestAnimationFrame(() => {
-        updatePosition();
-      });
-    }
-  }, [isVisible]);
-
-  useEffect(() => {
-    if (isVisible) {
-      window.addEventListener("resize", updatePosition);
-      return () => window.removeEventListener("resize", updatePosition);
-    }
-  }, [isVisible]);
-
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      ref={ref}
-      className="relative inline-grid grid-cols-[auto_1fr] items-center cursor-pointer"
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-    >
-      {children}
-
-      {!keepHidden &&
-        isVisible &&
-        typeof document !== "undefined" &&
-        createPortal(
-          <div
-            id={id ? `${id}-message` : undefined}
-            data-testid={testid ? `${testid}-message` : undefined}
-            ref={tooltipRef}
-            style={{
-              position: "fixed",
-              top: `${tooltipPosition.top}px`,
-              left: `${tooltipPosition.left}px`,
-              zIndex: 9999,
-            }}
-            className={clsx(
-              typography.caption,
-              "bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
-              componentPadding,
-              !removeOpacity && "opacity-0",
-            )}
-          >
-            {message}
-          </div>,
-          document.body,
-        )}
-    </div>
-  );
-
-  function checkForTextTruncation() {
-    if (showOnTruncation && ref.current) {
-      const paragraph = ref.current.querySelector("p");
-
-      if (paragraph) {
-        const isTruncated = paragraph.scrollWidth > paragraph.clientWidth;
-        // Commented as state: "isTruncated" is not used
-        // setIsTruncated(isTruncated);
-
-        return isTruncated;
-      }
-    }
-
-    return false;
-  }
-};
-
-Tooltip.displayName = "Tooltip";

package/src/components/TopBar.tsx

@@ -1,139 +0,0 @@
-import clsx from "clsx";
-import { ComponentProps, ReactNode } from "react";
-import {
-  containerPaddingX,
-  gapUsingContainerPadding,
-  layoutGap,
-  layoutGroupGap,
-  layoutGroupGapPaddingY,
-} from "../classNames";
-import { LogoDMSiTopBar } from "./LogoDMSiTopBar";
-
-export type TopBarProps = ComponentProps<"div"> & {
-  left?: ReactNode;
-  right?: ReactNode;
-  topNavLinks?: ReactNode;
-  mobileLeft?: ReactNode;
-  mobileRight?: ReactNode;
-  brandLogo?: ReactNode;
-};
-
-export const TopBarBase = ({
-  left,
-  right,
-  topNavLinks,
-  mobileLeft,
-  mobileRight,
-  brandLogo = <LogoDMSiTopBar />,
-  id,
-  testid,
-  ...props
-}: TopBarProps & { id?: string; testid?: string }) => {
-  const defaultStyles = clsx("bg-background-primary-normal");
-
-  return (
-    <div
-      id={id}
-      data-testid={testid}
-      className={clsx(
-        "flex items-center justify-between",
-        containerPaddingX,
-        layoutGroupGapPaddingY,
-        layoutGap,
-        defaultStyles,
-      )}
-      {...props}
-    >
-      {left && (
-        <div
-          className={clsx(
-            "hidden desktop:flex items-center",
-            gapUsingContainerPadding,
-          )}
-        >
-          {left}
-        </div>
-      )}
-
-      {(right || topNavLinks) && (
-        <div
-          className={clsx(
-            "hidden desktop:flex items-center shrink-0 ml-auto",
-            "[&>a]:leading-6",
-            layoutGap,
-          )}
-        >
-          {topNavLinks}
-
-          {topNavLinks && right && (
-            <div className="h-6 border-r border-border-primary-normal"></div>
-          )}
-
-          {right}
-        </div>
-      )}
-
-      {mobileLeft && (
-        <div
-          className={clsx("flex items-center desktop:hidden", layoutGroupGap)}
-        >
-          {mobileLeft}
-
-          <a
-            href="/"
-            className="grow max-w-100 h-auto max-h-18 *:max-h-[inherit]"
-          >
-            {brandLogo && brandLogo}
-          </a>
-        </div>
-      )}
-
-      {mobileRight && (
-        <div
-          className={clsx("flex items-center desktop:hidden", layoutGroupGap)}
-        >
-          {mobileRight}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export const TopBar = ({
-  left,
-  brandLogo = <LogoDMSiTopBar />,
-  id,
-  testid,
-  brandHref = "/",
-  ...props
-}: TopBarProps & {
-  brandLogo?: ReactNode;
-  id?: string;
-  testid?: string;
-  brandHref?: string;
-}) => {
-  return (
-    <TopBarBase
-      {...props}
-      id={id}
-      testid={testid}
-      brandLogo={brandLogo}
-      left={
-        <>
-          <a
-            id={id ? `${id}-brand-logo-link` : undefined}
-            data-testid={testid ? `${testid}-brand-logo-link` : undefined}
-            href={brandHref}
-            className="grow max-w-100 h-auto max-h-18 *:max-h-[inherit]"
-          >
-            {brandLogo && brandLogo}
-          </a>
-
-          {left}
-        </>
-      }
-    />
-  );
-};
-
-TopBar.displayName = "TopBar";

package/src/components/Upload.tsx

@@ -1,107 +0,0 @@
-import clsx from "clsx";
-import { ComponentProps, MouseEvent } from "react";
-import { componentGap } from "../classNames";
-import { Icon } from "./Icon";
-import { Paragraph } from "./Paragraph";
-import { Button } from "./Button";
-import { Stack } from "./Stack";
-import { Spinner } from "./Spinner";
-
-export type UploadProps = {
-  isLoading?: boolean;
-  text?: string;
-  errorText?: string;
-  onRemove?: () => void;
-  testid?: string;
-} & ComponentProps<"input">;
-
-export function Upload(props: UploadProps) {
-  const {
-    isLoading,
-    style,
-    errorText,
-    text = "Upload your file",
-    value,
-    onRemove,
-    testid,
-    ...rest
-  } = props;
-
-  return (
-    <label
-      style={{
-        ...style,
-      }}
-      className={clsx(
-        "border border-dashed border-border-primary-normal",
-        "flex flex-col items-center justify-center",
-        "p-6",
-        "cursor-pointer",
-        "relative",
-        "w-full h-[166px] desktop:w-[340px] desktop:h-[190px]",
-        componentGap,
-      )}
-      data-testid={testid}
-    >
-      <input
-        {...rest}
-        type="file"
-        className="sr-only"
-        data-testid={testid ? `${testid}-file-input` : undefined}
-      />
-
-      {isLoading && (
-        <Stack
-          centered
-          items="center"
-          justify="center"
-          sizing="container"
-          padding
-        >
-          <Spinner size="large" />
-        </Stack>
-      )}
-
-      {!value && !isLoading && (
-        <>
-          <Icon
-            testid={testid ? `${testid}-icon` : undefined}
-            name="cloud_upload"
-            className="text-icon-primary-normal"
-          />
-          <Paragraph
-            testid={testid ? `${testid}-text` : undefined}
-            color={errorText ? "text-primary-error" : "text-secondary-normal"}
-          >
-            {errorText ? errorText : text}
-          </Paragraph>
-        </>
-      )}
-
-      {value && (
-        <>
-          <img
-            data-testid={testid ? `${testid}-uploaded-image` : undefined}
-            src={value as string}
-            alt=""
-            className="absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
-          />
-
-          <div className="absolute right-2 top-2">
-            <Button
-              testid={testid ? `${testid}-remove-image-button` : undefined}
-              onClick={(e: MouseEvent) => {
-                e.preventDefault();
-                e.stopPropagation();
-
-                onRemove?.();
-              }}
-              iconOnly
-              leftIcon={<Icon name="delete" />}
-            />
-          </div>
-        </>
-      )}
-    </label>
-  );
-}

package/src/components/WorldpayIframe.tsx

@@ -1,7 +0,0 @@
-"use client";
-
-export function WorldpayIframe({ url }: { url: string }) {
-  return (
-    <iframe src={url} style={{ width: "100%", height: "100%", flex: 1 }} />
-  );
-}

package/src/components/index.ts

@@ -1,34 +0,0 @@
-export {
-  DataCellHeader,
-  DataGridCell,
-  DragAlongCell,
-  DraggableCellHeader,
-} from "./DataGridCell";
-export { DataGrid } from "./DataGrid";
-export type { ColumnDef } from "./DataGrid";
-export { Label } from "./Label";
-export { Select } from "./Select";
-export { Subheader } from "./Subheader";
-export { Icon } from "./Icon";
-export { Checkbox } from "./Checkbox";
-export { Paragraph } from "./Paragraph";
-export { Button } from "./Button";
-export { Menu } from "./Menu";
-export { MenuOption } from "./MenuOption";
-export { Search } from "./Search";
-export { Tooltip } from "./Tooltip";
-export { Input } from "./Input";
-export { DateInput } from "./DateInput";
-export { Accordion } from "./Accordion";
-export { Card } from "./Card";
-export { MobileDataGrid } from "./MobileDataGrid";
-export { ProductImagePreview } from "./ProductImagePreview";
-export { CompactImagesPreview } from "./CompactImagesPreview";
-export { SimpleTable } from "./SimpleTable";
-export { ListGroup } from "./ListGroup";
-export { Pagination } from "./Pagination";
-export { SkeletonParagraph } from "./SkeletonParagraph";
-export { EmptyCartIcon } from "./EmptyCartIcon";
-export { SearchResultImage } from "./SearchResultImage";
-export { Alert } from "./Alert";
-export { OrderCheckIcon } from "./OrderCheckIcon";