@dmsi/wedgekit-react 0.0.4

package/src/components/MenuOption.tsx

@@ -0,0 +1,275 @@
+"use client";
+
+import clsx from "clsx";
+import { PropsWithChildren, ReactNode, RefObject, useId, useRef } from "react";
+import { baseTransition, componentGap, componentPadding } from "../classNames";
+import { AsProps } from "../types";
+import { Label, Tags } from "./Label";
+import { Paragraph } from "./Paragraph";
+import { Icon } from "./Icon";
+import { MenuPosition } from "./Menu";
+import { useMatchesMobile } from "./useMatchesMedia";
+
+type BaseProps = PropsWithChildren<{
+  disabled?: boolean;
+  value?: string;
+  before?: ReactNode;
+  after?: ReactNode;
+  onClick?: (id: string, value?: string) => void;
+  ref?: React.Ref<HTMLDivElement> | undefined;
+  mobilePositionTo?: RefObject<HTMLElement | null>;
+  selected?: boolean;
+  currentSubMenuLevel?: number | null;
+}> & (
+  | {
+      subMenu: (props: {
+        menuId: string,
+        positionTo?: RefObject<HTMLDivElement>,
+        mobilePositionTo?: RefObject<HTMLElement | null>,
+        position?: MenuPosition,
+        subMenuLevel: number,
+        mobileBackMenuOption?: () => ReactNode;
+        mobileHide?: boolean;
+      }) => ReactNode;
+      subMenuLevel?: number;
+      onSubMenuHover: (menuId: string, level: number) => void;
+      onSubMenuLeave: (level: number) => void;
+      onSubMenuEnter: () => void;
+      toggleMenu: (id: string, level: number) => void;
+      activeMenu: string;
+      closeSubMenuLevel: (level: number) => void;
+    }
+  | {
+      subMenu?: undefined;
+      subMenuLevel?: number;
+      onSubMenuHover?: (menuId: string, level: number) => void;
+      onSubMenuLeave?: (level: number) => void;
+      onSubMenuEnter?: () => void;
+      toggleMenu?: (id: string, level: number) => void;
+      closeSubMenuLevel?: (level: number) => void;
+      activeMenu?: string;
+    }
+) & (
+  | {
+    highlightMatchingText: true;
+    menuValue: string;
+  }
+  | {
+    highlightMatchingText?: false | undefined;
+    menuValue?: string;
+  }
+);
+
+type ActionProps = BaseProps & {
+  variant: "action";
+} & AsProps<Tags>;
+
+type NormalProps = BaseProps & {
+  variant?: "normal";
+};
+
+type MenuOptionProps = ActionProps | NormalProps;
+
+export const MenuOption = ({
+  children,
+  disabled = false,
+  variant = "normal",
+  value,
+  before,
+  after,
+  subMenu,
+  onClick,
+  selected,
+  ref,
+  onSubMenuHover,
+  onSubMenuLeave,
+  onSubMenuEnter,
+  toggleMenu,
+  subMenuLevel = 1,
+  currentSubMenuLevel,
+  closeSubMenuLevel,
+  activeMenu,
+  mobilePositionTo,
+  highlightMatchingText = false,
+  menuValue
+}: MenuOptionProps) => {
+  const uniqueId = useId();
+  const internalRef = useRef(null);
+  const actualRef = (ref || internalRef) as RefObject<HTMLDivElement>;
+  const menuId = useRef(`menu-${uniqueId}`);
+  const isMobile = useMatchesMobile();
+
+  const handleMouseEnter = () => {
+    if (subMenu && onSubMenuHover && !disabled) {
+      onSubMenuHover(menuId.current, subMenuLevel);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (subMenu && onSubMenuLeave && !disabled) {
+      onSubMenuLeave(subMenuLevel);
+    }
+  };
+
+  const handleSubMenuEnter = () => {
+    if (onSubMenuEnter) {
+      onSubMenuEnter();
+    }
+  };
+
+  const additionalAttributes = {
+    "data-selected": selected || null,
+  };
+
+  const svgStyles = clsx(
+    "[&>svg]:shrink-0 [&>svg]:fill-icon-action-primary-normal",
+  );
+
+  const textLabelStyles = clsx("w-full whitespace-nowrap !leading-6");
+
+  const normalStyles =
+    variant === "normal" &&
+    !disabled &&
+    clsx(
+      "bg-transparent text-text-primary-normal",
+      "hover:bg-background-action-secondary-hover",
+      "focus:bg-background-action-secondary-hover",
+      "data-selected:bg-background-action-secondary-hover",
+      "active:bg-background-action-secondary-active",
+    );
+
+  const normalDisabledStyles =
+    variant === "normal" && disabled && clsx("text-text-primary-disabled");
+
+  const actionStyles =
+    variant === "action" &&
+    !disabled &&
+    clsx(
+      "text-action-400 bg-transparent",
+      "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+      "focus:bg-background-action-secondary-hover focus:text-text-action-hover",
+      "data-selected:bg-background-action-secondary-active data-selected:text-text-action-active",
+      "active:bg-background-action-secondary-active active:text-text-action-active",
+    );
+
+  const actionDisabledStyles =
+    variant === "action" && disabled && clsx("text-text-action-disabled");
+
+  const disabledStyles =
+    disabled && clsx("bg-transparent cursor-default pointer-events-none");
+
+  const renderChildren = typeof children === 'string' && highlightMatchingText
+    ? (
+      highlightMatch(children, menuValue)
+    ) : children
+
+  return (
+    <>
+      <div
+        ref={actualRef}
+        className={clsx(
+          "flex items-center cursor-pointer w-full text-left relative outline-none",
+          svgStyles,
+          componentGap,
+          componentPadding,
+          baseTransition,
+          normalStyles,
+          normalDisabledStyles,
+          actionStyles,
+          actionDisabledStyles,
+          disabledStyles,
+        )}
+        data-value={value || children}
+        onClick={() => {
+          onClick?.(menuId.current, (value || children) as string);
+          if (subMenu) {
+            toggleMenu(menuId.current, subMenuLevel)
+          }
+        }}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+        {...additionalAttributes}
+        tabIndex={-1}
+        role="menuitem"
+        aria-haspopup={subMenu ? "menu" : undefined}
+      >
+
+        {before && (
+          <div className="shrink-0 flex items-center">{before}</div>
+        )}
+
+        {variant === "action" ? (
+          <Label padded className={textLabelStyles}>
+            {renderChildren}
+          </Label>
+        ) : (
+          <Paragraph padded className={textLabelStyles}>
+            {renderChildren}
+          </Paragraph>
+        )}
+
+        {renderAfterProp()}
+      </div>
+
+      {subMenu && (
+        <div 
+          onMouseEnter={handleSubMenuEnter} 
+          onMouseLeave={handleMouseLeave}
+          data-submenu-parent={menuId.current}
+          data-menu-level={subMenuLevel + 1}
+        >
+          {subMenu({ menuId: menuId.current, positionTo: actualRef, mobilePositionTo, position: "right", subMenuLevel, mobileBackMenuOption, mobileHide: isMobile && activeMenu !== menuId.current })}
+        </div>
+      )}
+    </>
+  );
+
+  function renderAfterProp() {
+    if (after) {
+      return after;
+    }
+
+    if (subMenu && after !== null) {
+      return <Icon name="chevron_right" />
+    }
+  }
+
+  function mobileBackMenuOption() {
+    if (!isMobile) {
+      return;
+    }
+
+    return (
+      <MenuOption
+        onClick={() => {
+          closeSubMenuLevel?.(currentSubMenuLevel ?? 0)
+        }}
+        variant="action"
+        before={<Icon name="chevron_left" />}
+      >
+        Back
+      </MenuOption>
+    )
+  }
+};
+
+MenuOption.displayName = "MenuOption";
+
+function highlightMatch(text: string, searchValue?: string): React.ReactNode {
+  if (!searchValue || !searchValue.trim()) {
+    return text;
+  }
+
+  const regex = new RegExp(`(${searchValue.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
+  const parts = text.split(regex);
+
+  return parts.map((part, index) =>
+    regex.test(part) ? (
+      <span key={index} className="font-bold">
+        {part}
+      </span>
+    ) : (
+      part
+    )
+  );
+}

package/src/components/Modal.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import clsx from "clsx";
+import { PropsWithChildren, useCallback, useEffect, useRef } from "react";
+import { ModalHeader } from "./ModalHeader";
+import { ModalContent } from "./ModalContent";
+import { ModalButtons } from "./ModalButtons";
+import { ModalScrim } from "./ModalScrim";
+import { createPortal } from "react-dom";
+import { findDocumentRoot } from "../utils";
+import { usePrevious } from "react-use";
+import { useMounted } from "./useMounted";
+
+type ModalProps = PropsWithChildren<{
+  title?: string;
+  open?: boolean;
+  size?: "small" | "medium" | "large" | "x-large";
+  className?: string;
+  onClose?: () => void;
+  onContinue?: () => void;
+  closeOnBackdropClick?: boolean;
+  showButtons?: boolean;
+}>;
+
+const fadeInScale = (element: HTMLElement, duration = 300) =>
+  element.animate(
+    [
+      { opacity: 0, transform: "scale(0.95)" },
+      { opacity: 1, transform: "scale(1)" },
+    ],
+    {
+      duration,
+      easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+      fill: "both",
+    },
+  );
+
+const fadeOutScale = (element: HTMLElement, duration = 200) =>
+  element.animate(
+    [
+      { opacity: 1, transform: "scale(1)" },
+      { opacity: 0, transform: "scale(0.95)" },
+    ],
+    {
+      duration,
+      easing: "ease-in-out",
+      fill: "both",
+    },
+  );
+
+const bgFadeIn = (element: HTMLElement, duration = 300) =>
+  element.animate([{ opacity: 0 }, { opacity: 1 }], {
+    duration,
+    easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+    fill: "both",
+  });
+
+const bgFadeOut = (element: HTMLElement, duration = 200) =>
+  element.animate([{ opacity: 1 }, { opacity: 0 }], {
+    duration,
+    easing: "ease-in-out",
+    fill: "both",
+  });
+
+const whenAllAnimationsFinish = (
+  animations: Animation[],
+  callback: () => void,
+) => {
+  let finishedCount = 0;
+
+  animations.forEach((animation) => {
+    animation.onfinish = () => {
+      finishedCount += 1;
+      if (finishedCount === animations.length) {
+        callback();
+      }
+    };
+  });
+};
+
+const sizes = {
+  small: {
+    sizeClass: "max-w-120",
+  },
+  medium: {
+    sizeClass: "max-w-180",
+  },
+  large: {
+    sizeClass: "max-w-240",
+  },
+  "x-large": {
+    sizeClass: "max-w-300",
+  },
+};
+
+export const Modal = ({
+  title,
+  open = false,
+  size = "small",
+  className,
+  children,
+  onClose,
+  onContinue,
+  closeOnBackdropClick = true,
+  showButtons = false,
+}: ModalProps) => {
+  const mounted = useMounted();
+
+  const modalRef = useRef<HTMLDivElement>(null);
+  const bgRef = useRef<HTMLDivElement>(null);
+
+  const wasOpen = usePrevious(open);
+
+  useEffect(() => {
+    console.log("was open", wasOpen, open);
+    if (!mounted) return;
+    if (!modalRef.current || !bgRef.current) {
+      console.error("Modal or background reference is not set.");
+      return;
+    }
+    if (wasOpen === undefined) return;
+    if (wasOpen && !open) {
+      console.log('"Closing modal"');
+      const modalAnimation = fadeOutScale(modalRef.current);
+      const bgAnimation = bgFadeOut(bgRef.current);
+      whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
+        if (onClose) {
+          onClose();
+        }
+      });
+    } else if (!wasOpen && open) {
+      console.log('"Opening modal"');
+      fadeInScale(modalRef.current);
+      bgFadeIn(bgRef.current);
+    }
+  }, [mounted, open]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        if (onClose) {
+          e.preventDefault();
+          onClose();
+        }
+      }
+    },
+    [onClose, bgRef, modalRef],
+  );
+
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      onClose();
+    }
+  }, [onClose]);
+
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("keyup", handleKeyDown);
+    }
+
+    return () => {
+      document.removeEventListener("keyup", handleKeyDown);
+    };
+  }, [open, handleKeyDown]);
+
+  const { sizeClass } = sizes[size] ?? sizes.small;
+
+  const backgroundClickHandler = useCallback(
+    (e: React.MouseEvent<HTMLElement>) => {
+      const target = e.target as HTMLElement;
+      const currentTarget = e.currentTarget as HTMLElement;
+      console.log(currentTarget, target, currentTarget.contains(target));
+      if (currentTarget.contains(target) && currentTarget !== target) {
+        e.stopPropagation();
+        return;
+      }
+
+      if (open && closeOnBackdropClick) {
+        handleClose();
+      }
+    },
+    [open, closeOnBackdropClick, handleClose],
+  );
+
+  if (!mounted) {
+    return null;
+  }
+
+  return createPortal(
+    <ModalScrim ref={bgRef} show={open} onClick={backgroundClickHandler}>
+      <div
+        ref={modalRef}
+        className={clsx(
+          "bg-white shadow-md rounded-sm flex flex-col overflow-hidden max-h-[calc(100vh-32px)] w-full opacity-0",
+          className,
+          sizeClass,
+        )}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ModalHeader title={title} onClose={handleClose} />
+        {children && <ModalContent>{children}</ModalContent>}
+        {showButtons && (
+          <ModalButtons onClose={handleClose} onContinue={onContinue} />
+        )}
+      </div>
+    </ModalScrim>,
+    findDocumentRoot(bgRef.current),
+  );
+};
+
+Modal.displayName = "Modal";

package/src/components/ModalButtons.tsx

@@ -0,0 +1,35 @@
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+
+type ModalButtonsProps = {
+  title?: string;
+  onClose?: () => void;
+  onContinue?: () => void;
+  sampleWidth?: boolean;
+};
+
+export const ModalButtons = ({ onClose, onContinue }: ModalButtonsProps) => {
+  return (
+    <div className="border-t border-neutral-300 p-4 flex justify-end space-x-2">
+      <Button
+        variant="secondary"
+        leftIcon={<Icon name="close" size={24} />}
+        onClick={onClose}
+        className="max-sm:w-full"
+      >
+        Close
+      </Button>
+
+      <Button
+        variant="primary"
+        leftIcon={<Icon name="check" size={24} />}
+        className="max-sm:w-full"
+        onClick={onContinue} // Assuming you want to close the modal on continue
+      >
+        Continue
+      </Button>
+    </div>
+  );
+};
+
+ModalButtons.displayName = "ModalButtons";

package/src/components/ModalContent.tsx

@@ -0,0 +1,5 @@
+export function ModalContent({ children }: { children: React.ReactNode }) {
+  return <div className="p-4">{children}</div>;
+}
+
+ModalContent.displayName = "ModalContent";

package/src/components/ModalHeader.tsx

@@ -0,0 +1,30 @@
+import { Heading2 } from "./Heading";
+
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+
+type ModalHeaderProps = {
+  title?: string;
+  onClose?: () => void;
+};
+
+export const ModalHeader = ({ title, onClose }: ModalHeaderProps) => {
+  return (
+    <div className="flex justify-between items-center p-mobile-container-padding desktop:p-desktop-container-padding compact:p-desktop-compact-container-padding gap-mobile-container-gap desktop:gap-desktop-container-gap compact:gap-desktop-compact-container-gap">
+      {title && <Heading2 as="p">{title}</Heading2>}
+
+      <Button
+        iconOnly
+        variant="tertiary"
+        onClick={onClose}
+        leftIcon={
+          <span className="text-icon-primary-normal contents">
+            <Icon name="close" size={24} />
+          </span>
+        }
+      />
+    </div>
+  );
+};
+
+ModalHeader.displayName = "ModalHeader";

package/src/components/ModalScrim.tsx

@@ -0,0 +1,34 @@
+import clsx from "clsx";
+import { PropsWithChildren } from "react";
+
+type ModalScrimProps = PropsWithChildren<{
+  sampleWidth?: boolean;
+  show?: boolean;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  ref?: React.Ref<HTMLDivElement>;
+}>;
+
+export const ModalScrim = ({
+  show = false,
+  children,
+  onClick,
+  ref,
+}: ModalScrimProps) => {
+  return (
+    <div
+      className={clsx(
+        "transition-[visibility,opacity,background] ease-in-out duration-100 grid place-content-center p-4 group bg-neutral-600/50 fixed opacity-0",
+        !show && " pointer-events-none",
+
+        "inset-0 z-50",
+      )}
+      onMouseDown={onClick}
+      ref={ref}
+    >
+      <h1>{show}</h1>
+      {children}
+    </div>
+  );
+};
+
+ModalScrim.displayName = "ModalScrim";

package/src/components/NavigationTab.tsx

@@ -0,0 +1,89 @@
+import clsx from "clsx";
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+import { CSSProperties } from "react";
+
+export type NavigationTabProps = {
+  label?: string;
+  onClick?: () => void;
+  selected?: boolean;
+  className?: string;
+  disabled?: boolean;
+  colorPrimitives?: "dmsi" | "agility";
+  href?: string;
+};
+
+export const NavigationTab = ({
+  label,
+  onClick,
+  selected = false,
+  className,
+  disabled = false,
+  href,
+  ...props
+}: NavigationTabProps) => {
+  const textClassName = clsx(
+    // "!text-text-on-action-primary-hover", // use this once semantic tokens are available
+    "!text-brand-text-on-action-primary-hover",
+    // "hover:!text-text-on-action-primary-hover", // use this once semantic tokens are available
+    "hover:!text-brand-text-on-action-primary-hover",
+    // "active:!text-text-on-action-primary-active", // use this once semantic tokens are available
+    "active:!text-brand-text-on-action-primary-active",
+    "disabled:!text-brand-text-on-action-primary-disabled",
+  );
+
+  const disabledClassName = clsx(
+    "disabled:!bg-background-on-action-primary-disabled disabled:pointer-events-none",
+  );
+
+  const paddingClassName = clsx(
+    "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding",
+  );
+
+  const unselectedClassName = clsx(
+    "!bg-brand-200",
+    "hover:!bg-background-on-action-primary-normal",
+    // "hover:!bg-background-action-primary-normal", // use this once semantic tokens are available
+    "active:!bg-background-on-action-primary-active",
+    // "active:!bg-background-action-primary-active", // use this once semantic tokens are available
+    "shadow-nav-tab",
+  );
+
+  const selectedClassName = clsx(
+    "!bg-neutral-000",
+    "hover:!bg-background-on-action-primary-normal",
+    "active:!bg-background-on-action-primary-active",
+  );
+
+  const tokenOverrides: CSSProperties = {
+    '--color-text-on-action-primary-hover': 'var(--color-brand-500)',
+    '--color-text-on-action-primary-active': 'var(--color-brand-300)'
+  }
+
+  return (
+    <Button
+      variant="tertiary-critical"
+      colorClassName={textClassName}
+      className={clsx(
+        "!border-0 !rounded-b-none h-10 min-w-20 relative",
+        paddingClassName,
+        disabledClassName,
+        !selected && unselectedClassName,
+        selected && selectedClassName,
+        className,
+      )}
+      style={tokenOverrides}
+      classNameLabel="px-1"
+      rightIcon={<Icon name="close" size={16} />}
+      onClick={onClick}
+      disabled={disabled}
+      {...props}
+      as={href ? "a" : undefined}
+      href={href}
+    >
+      {label}
+    </Button>
+  );
+};
+
+NavigationTab.displayName = "NavigationTab";