@dmsi/wedgekit-react 0.0.2

package/src/components/Toast.tsx

@@ -0,0 +1,244 @@
+"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";
+
+export interface ToastProps {
+  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 = ({
+  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
+      ref={toastElementRef}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      className={clsx(
+        "flex items-start gap-desktop-component-gap p-desktop-component-padding border-2 rounded-sm bg-white shadow-md cursor-pointer pointer-events-auto transition-all duration-300 ease-in-out w-fit",
+        className,
+      )}
+      {...props}
+      style={props.style}
+    >
+      {iconElement}
+      <div className="flex gap-desktop-layout-group-gap items-center">
+        <div className="flex flex-col gap-desktop-component-gap w-68">
+          {title && <Heading3>{title}</Heading3>}
+          {message && <Paragraph>{message}</Paragraph>}
+        </div>
+        {showViewButton && (
+          <Button variant="tertiary" href={viewButtonLink}>
+            View
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+Toast.displayName = "Toast";
+
+export function createToast(config: ToastProps) {
+  const toastRoot = getToastRoot();
+  const toastContainer = document.createElement("div");
+  toastRoot.appendChild(toastContainer);
+  
+  const root = createRoot(toastContainer);
+  
+  const handleClose = () => {
+    root.unmount();
+    toastContainer.remove();
+  };
+  
+  root.render(
+    <Toast
+      show={true}
+      onClose={handleClose}
+      variant={config.variant}
+      title={config.title}
+      message={config.message}
+      showViewButton={config.showViewButton}
+      viewButtonLink={config.viewButtonLink}
+    />
+  );
+}

package/src/components/Tooltip.tsx

@@ -0,0 +1,137 @@
+"use client";
+
+import clsx from "clsx";
+import { PropsWithChildren, ReactNode, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { typography } from "../classNames";
+
+export type TooltipProps = PropsWithChildren<{
+  message: string;
+  position?: "top" | "bottom" | "left" | "right";
+  children?: ReactNode;
+  showOnTruncation?: boolean;
+  offset?: number;
+}>;
+
+export const Tooltip = ({
+  message,
+  position = "top",
+  children,
+  showOnTruncation = false,
+  offset = 8,
+}: TooltipProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+  const tooltipRef = useRef<HTMLDivElement>(null);
+  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
+      ref={ref}
+      className="relative inline-grid grid-cols-[auto_1fr] items-center"
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+    >
+      {children}
+
+      {isVisible && typeof document !== 'undefined' && createPortal(
+        <div
+          ref={tooltipRef}
+          style={{
+            position: 'fixed',
+            top: `${tooltipPosition.top}px`,
+            left: `${tooltipPosition.left}px`,
+            zIndex: 9999,
+          }}
+          className={clsx(
+            typography.caption,
+            "p-2 bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+            !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;
+        setIsTruncated(isTruncated);
+
+        return isTruncated;
+      }
+    }
+
+    return false;
+  }
+};
+
+Tooltip.displayName = "Tooltip";

package/src/components/TopBar.tsx

@@ -0,0 +1,124 @@
+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 />,
+  ...props
+}: TopBarProps) => {
+  const defaultStyles = clsx("bg-background-primary-normal");
+
+  return (
+    <div
+      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",
+            layoutGroupGap,
+          )}
+        >
+          {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-[400px] h-auto max-h-10 *: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 />,
+
+  ...props
+}: TopBarProps & { brandLogo?: ReactNode }) => {
+  return (
+    <TopBarBase
+      {...props}
+      brandLogo={brandLogo}
+      left={
+        <>
+          <a
+            href="/"
+            className="grow max-w-[400px] h-auto max-h-10 *:max-h-[inherit]"
+          >
+            {brandLogo && brandLogo}
+          </a>
+
+          {left}
+        </>
+      }
+    />
+  );
+};
+
+TopBar.displayName = "TopBar";

package/src/components/useInfiniteScroll.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { useEffect, RefObject } from "react";
+
+export function useInfiniteScroll({
+  containerRef,
+  onLoadMore,
+  isLoading,
+  offset = 50,
+  enabled = true, // ✅ Add this
+}: {
+  containerRef: RefObject<HTMLElement | null>;
+  onLoadMore: () => void;
+  isLoading: boolean;
+  offset?: number;
+  enabled?: boolean; // ✅ Add this
+}) {
+  useEffect(() => {
+    if (!enabled) return; // ✅ Skip logic if not enabled
+
+    const handleScroll = () => {
+      const el = containerRef.current;
+      if (!el || isLoading) return;
+
+      const { scrollTop, scrollHeight, clientHeight } = el;
+      const isNearBottom = scrollTop + clientHeight >= scrollHeight - offset;
+
+      if (isNearBottom) {
+        onLoadMore();
+      }
+    };
+
+    const el = containerRef.current;
+    if (el) el.addEventListener("scroll", handleScroll);
+
+    return () => {
+      if (el) el.removeEventListener("scroll", handleScroll);
+    };
+  }, [containerRef, onLoadMore, isLoading, offset, enabled]); // ✅ include enabled
+}

package/src/components/useMatchesMedia.tsx

@@ -0,0 +1,28 @@
+import { useLayoutEffect, useState } from "react";
+
+export const useMatchesMedia = (query: string): boolean => {
+  const [matches, setMatches] = useState(() =>
+    typeof window !== "undefined" ? window.matchMedia(query).matches : false,
+  );
+
+  useLayoutEffect(() => {
+    const mediaQueryList = window.matchMedia(query);
+    const listener = (event: MediaQueryListEvent) => {
+      setMatches(event.matches);
+    };
+
+    mediaQueryList.addEventListener("change", listener);
+    setMatches(mediaQueryList.matches);
+    return () => {
+      mediaQueryList.removeEventListener("change", listener);
+    };
+  }, [query]);
+
+  return matches;
+};
+
+export const useMatchesMobile = (): boolean => {
+  const isMobile = useMatchesMedia("(width < 48rem)");
+
+  return isMobile;
+};