@dmsi/wedgekit-react 0.0.2

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/MobileDataGrid.tsx

@@ -0,0 +1,135 @@
+import clsx from "clsx";
+import { Icon } from "./Icon";
+import { ComponentProps } from "react";
+import { Stack } from "./Stack";
+import { Button } from "./Button";
+import { Theme } from "./Theme";
+import { Heading3 } from "./Heading";
+import { Paragraph } from "./Paragraph";
+
+export type RowData = Record<string, unknown>;
+
+export type MobileColumnDef<T extends RowData> = {
+  header: string;
+  accessorKey: keyof T;
+  show?: boolean;
+
+  cell?: (info: { row: T }) => React.ReactNode;
+};
+
+export function MobileDataGrid<T extends RowData>({
+  columns,
+  data,
+  header,
+  getId,
+  renderLink,
+  renderChevron,
+}: {
+  columns: MobileColumnDef<T>[];
+  data: T[];
+  header: string;
+  getId: (data: T) => string | number | undefined;
+  renderLink?: (data: T) => React.ReactNode;
+  renderChevron?: (data: T) => React.ReactNode;
+} & ComponentProps<"div">) {
+  return (
+    <div
+      className={clsx(
+        "rounded",
+        "overflow-hidden",
+        "divide-y divide-border-primary-normal",
+        "border border-border-primary-normal",
+        "overflow-y-scroll scrollbar-thin",
+      )}
+    >
+      <MobileDataGridHeader header={header} />
+      {data.map((item) => (
+        <MobileDataGridCard
+          data={item}
+          key={getId(item)}
+          columns={columns}
+          renderLink={renderLink}
+          renderChevron={renderChevron}
+        />
+      ))}
+    </div>
+  );
+}
+
+function MobileDataGridHeader({ header }: { header: string }) {
+  return (
+    <div className="sticky top-0">
+      <Theme theme="brand">
+        <Stack
+          horizontal
+          items="start"
+          justify="center"
+          backgroundColor="background-primary-normal"
+          padding
+          sizing="component"
+        >
+          <Heading3 as="span" color="text-primary-normal">
+            {header}
+          </Heading3>
+        </Stack>
+      </Theme>
+    </div>
+  );
+}
+
+function MobileDataGridCard<T extends RowData>({
+  data,
+  columns,
+  renderLink,
+  renderChevron,
+}: {
+  data: T;
+  columns: MobileColumnDef<T>[];
+  renderLink?: (data: T) => React.ReactNode;
+  renderChevron?: (data: T) => React.ReactNode;
+}) {
+  return (
+    <div>
+      <Stack sizing="component" padding>
+        <Stack horizontal horizontalMobile items="center" justify="between">
+          {renderLink && renderLink(data)}
+          <Stack horizontal horizontalMobile items="center" justify="end">
+            <Button
+              iconOnly
+              variant="tertiary"
+              onClick={() => console.log("Edit", data.id)}
+              leftIcon={<Icon name="docs" />}
+            ></Button>
+            <Button
+              iconOnly
+              variant="tertiary"
+              onClick={() => console.log("Edit", data.id)}
+              leftIcon={<Icon name="swap_vert" />}
+            ></Button>
+          </Stack>
+        </Stack>
+
+        {columns
+          .filter((x) => x.show)
+          .map((column) => (
+            <div
+              key={String(column.accessorKey)}
+              className="mb-2 grid grid-cols-2"
+            >
+              <Paragraph color="text-secondary-normal" className="text-left">
+                {column.header}:
+              </Paragraph>{" "}
+              {column.cell
+                ? column.cell({ row: data })
+                : String(data[column.accessorKey])}
+            </div>
+          ))}
+      </Stack>
+      {renderChevron && (
+        <Stack items="center" justify="center" horizontal horizontalMobile>
+          {renderChevron(data)}
+        </Stack>
+      )}
+    </div>
+  );
+}

package/src/components/Modal.tsx

@@ -0,0 +1,271 @@
+"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 { useMatchesMobile } from "./useMatchesMedia";
+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;
+  hideCloseIcon?: boolean;
+  headerIcon?: React.ReactNode;
+  fixedHeightScrolling?: boolean;
+  customActions?: React.ReactNode;
+}>;
+
+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-h-screen desktop:max-w-120 rounded-sm",
+  },
+  medium: {
+    sizeClass:
+      "desktop:max-w-180 w-screen desktop:h-fit h-screen desktop:w-full max-w-240",
+  },
+  large: {
+    sizeClass:
+      "desktop:max-w-240 w-screen desktop:h-fit h-screen desktop:w-full max-w-240",
+  },
+  "x-large": {
+    sizeClass:
+      "desktop:max-w-300 w-screen desktop:h-fit h-screen desktop:w-full max-w-240",
+  },
+};
+
+export const Modal = ({
+  title,
+  open = false,
+  size = "small",
+  className,
+  children,
+  onClose,
+  onContinue,
+  closeOnBackdropClick = true,
+  showButtons = false,
+  hideCloseIcon = false,
+  headerIcon,
+  fixedHeightScrolling = false,
+  customActions,
+}: ModalProps) => {
+  const mounted = useMounted();
+
+  const modalRef = useRef<HTMLDivElement>(null);
+  const bgRef = useRef<HTMLDivElement>(null);
+
+  const wasOpen = usePrevious(open);
+
+  const isMobile = useMatchesMobile();
+
+  const computedFixedHeightScrolling = isMobile || fixedHeightScrolling;
+
+  useEffect(() => {
+    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) {
+      const modalAnimation = fadeOutScale(modalRef.current);
+      const bgAnimation = bgFadeOut(bgRef.current);
+      whenAllAnimationsFinish([modalAnimation, bgAnimation], () => {
+        if (onClose) {
+          onClose();
+        }
+      });
+    } else if (!wasOpen && open) {
+      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]);
+
+  // Effect to lock scroll when modal is open
+  useEffect(() => {
+    if (!open) return;
+
+    const scrollY = window.scrollY;
+    const body = document.body;
+
+    // Lock scroll
+    body.style.position = "fixed";
+    body.style.top = `-${scrollY}px`;
+    body.style.left = "0";
+    body.style.right = "0";
+    body.style.overflow = "hidden";
+    body.style.width = "100%";
+
+    return () => {
+      // Restore scroll
+      body.style.position = "";
+      body.style.top = "";
+      body.style.left = "";
+      body.style.right = "";
+      body.style.overflow = "";
+      body.style.width = "";
+
+      window.scrollTo(0, scrollY);
+    };
+  }, [open]);
+
+  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;
+      if (currentTarget.contains(target) && currentTarget !== target) {
+        e.stopPropagation();
+        return;
+      }
+
+      if (open && closeOnBackdropClick) {
+        handleClose();
+      }
+    },
+    [open, closeOnBackdropClick, handleClose],
+  );
+
+  if (!mounted) {
+    return null;
+  }
+
+  return createPortal(
+    <ModalScrim
+      size={size}
+      ref={bgRef}
+      show={open}
+      onClick={backgroundClickHandler}
+    >
+      <div
+        ref={modalRef}
+        className={clsx(
+          "bg-white shadow-md rounded-sm flex flex-col overflow-hidden w-full opacity-0 h-fit",
+          computedFixedHeightScrolling &&
+            "desktop:max-h-[calc(100vh-32px)] desktop:h-auto",
+          className,
+          sizeClass,
+        )}
+        onClick={(e) => e.stopPropagation()}
+      >
+        <ModalHeader
+          title={title}
+          onClose={handleClose}
+          hideCloseIcon={hideCloseIcon}
+          headerIcon={headerIcon}
+        />
+        {children && (
+          <ModalContent fixedHeightScrolling={computedFixedHeightScrolling}>
+            {children}
+          </ModalContent>
+        )}
+        {showButtons && (
+          <ModalButtons
+            onClose={handleClose}
+            onContinue={onContinue}
+            customActions={customActions}
+          />
+        )}
+      </div>
+    </ModalScrim>,
+    findDocumentRoot(bgRef.current),
+  );
+};
+
+Modal.displayName = "Modal";