@dmsi/wedgekit-react 0.0.4

package/src/components/Time.tsx

@@ -0,0 +1,457 @@
+import { ComponentProps, ReactNode, useEffect, useRef, useState } from "react";
+import { InputBase } from "./Input";
+import { Surface } from "./Surface";
+import { createPortal } from "react-dom";
+import clsx from "clsx";
+import { typography } from "../classNames";
+import { Icon } from "./Icon";
+import { findDocumentRoot } from "../utils";
+
+interface TimeProps
+  extends Omit<
+    ComponentProps<"input">,
+    "type" | "children" | "dangerouslySetInnerHTML"
+  > {
+  label?: string;
+  error?: boolean;
+  readOnly?: boolean;
+  caption?: ReactNode;
+  format?: "12h" | "24h";
+}
+
+const timePickerScrollableStyle = "overflow-auto max-h-full py-4 no-scrollbar";
+
+export const Time = ({ onChange, format = "12h", ...props }: TimeProps) => {
+  const [showTimePicker, setShowTimePicker] = useState(false);
+  const [hasInteracted, setHasInteracted] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const timeRef = useRef<HTMLDivElement>(null);
+  const [timePosition, setTimePosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+
+  const [hour, setHour] = useState<string | null>(null);
+  const [minute, setMinute] = useState<string | null>(null);
+  const [meridiem, setMeridiem] = useState<"AM" | "PM" | null>(null);
+  const [inputValue, setInputValue] = useState("");
+
+  const is12HourFormat = format === "12h";
+
+  const formattedTime =
+    hour && minute
+      ? is12HourFormat
+        ? meridiem
+          ? `${hour}:${minute} ${meridiem}`
+          : `${hour}:${minute}`
+        : `${hour}:${minute}`
+      : "";
+
+  const updatePosition = () => {
+    if (inputRef.current) {
+      requestAnimationFrame(() => {
+        const parent = inputRef.current ? inputRef.current.parentElement : null;
+        const rect = parent?.getBoundingClientRect();
+        if (rect) {
+          setTimePosition({
+            top: rect.bottom + window.scrollY + 6,
+            left: rect.left + window.scrollX,
+            width: rect.width,
+          });
+        }
+      });
+    }
+  };
+
+  useEffect(() => {
+    updatePosition();
+
+    const resizeObserver = new ResizeObserver(updatePosition);
+    if (inputRef.current) {
+      resizeObserver.observe(inputRef.current);
+    }
+
+    window.addEventListener("scroll", updatePosition);
+
+    return () => {
+      resizeObserver.disconnect();
+      window.removeEventListener("scroll", updatePosition);
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        inputRef.current &&
+        timeRef.current &&
+        !inputRef.current.contains(event.target as Node) &&
+        !timeRef.current.contains(event.target as Node)
+      ) {
+        setShowTimePicker(false);
+      }
+    };
+
+    if (showTimePicker) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [showTimePicker]);
+
+  useEffect(() => {
+    if (formattedTime && hasInteracted) {
+      setInputValue(formattedTime);
+
+      onChange?.({
+        target: { value: formattedTime },
+      } as unknown as React.ChangeEvent<HTMLInputElement>);
+    }
+  }, [formattedTime, hasInteracted, onChange]);
+
+  const handleFocus = () => {
+    if (!props.disabled && !props.readOnly) {
+      setHasInteracted(true);
+      setShowTimePicker(true);
+
+      // Initialize meridiem to AM if not set and using 12-hour format
+      if (is12HourFormat && meridiem === null) {
+        setMeridiem("AM");
+      }
+    }
+  };
+
+  const handleSelect = (
+    type: "hour" | "minute" | "meridiem",
+    value: string,
+  ) => {
+    if (type === "hour") setHour(value);
+    if (type === "minute") setMinute(value);
+    if (type === "meridiem") setMeridiem(value as "AM" | "PM");
+
+    setTimeout(() => {
+      const allSet =
+        (type === "hour" ? value : hour) &&
+        (type === "minute" ? value : minute) &&
+        (is12HourFormat ? (type === "meridiem" ? value : meridiem) : true);
+
+      if (allSet) {
+        setShowTimePicker(false);
+      }
+    }, 100);
+  };
+
+  useEffect(() => {
+    if (!showTimePicker && formattedTime) {
+      setInputValue(formattedTime);
+    }
+  }, [showTimePicker, formattedTime]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value
+      .toUpperCase()
+      .replace(/[^0-9:APM ]/gi, "")
+      .trim();
+    setInputValue(value);
+
+    // Check if input is cleared
+    if (value === "") {
+      setHour(null);
+      setMinute(null);
+      setMeridiem(null);
+      setShowTimePicker(true); // Keep dropdown open
+    }
+
+    const match = value.match(
+      is12HourFormat
+        ? /^(\d{1,2}):(\d{2})(?:\s*(AM|PM))?$/
+        : /^(\d{1,2}):(\d{2})$/,
+    );
+
+    if (match) {
+      const [, hRaw, mRaw, mer] = match;
+      const h = parseInt(hRaw, 10);
+      const m = parseInt(mRaw, 10);
+
+      if (h >= 0 && h <= 23 && m >= 0 && m <= 59) {
+        let hStr: string;
+        const mStr = m.toString().padStart(2, "0");
+        let meridiemValue = mer as "AM" | "PM" | undefined;
+
+        if (is12HourFormat) {
+          hStr = (h % 12 || 12).toString().padStart(2, "0");
+          if (h > 12) {
+            meridiemValue = "PM";
+          }
+          setHour(hStr);
+          setMinute(mStr);
+          if (meridiemValue) {
+            setMeridiem(meridiemValue);
+          }
+        } else {
+          hStr = h.toString().padStart(2, "0");
+          setHour(hStr);
+          setMinute(mStr);
+        }
+      }
+    }
+
+    onChange?.(e);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      setShowTimePicker(false);
+      return;
+    }
+
+    if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return;
+
+    e.preventDefault();
+
+    let h: number;
+    let m: number;
+    let mer: "AM" | "PM";
+
+    if (
+      hour === null ||
+      minute === null ||
+      (is12HourFormat && meridiem === null)
+    ) {
+      const now = new Date();
+      h = now.getHours();
+      m = Math.round(now.getMinutes() / 5) * 5;
+      if (m === 60) {
+        m = 0;
+        h += 1;
+      }
+      if (is12HourFormat) {
+        mer = h >= 12 ? "PM" : "AM";
+        h = h % 12 || 12;
+      } else {
+        mer = "AM";
+      }
+    } else {
+      h = parseInt(hour, 10);
+      m = parseInt(minute, 10);
+      mer = (meridiem as "AM" | "PM") || "AM";
+    }
+
+    const step = 5;
+    const remainder = m % step;
+    m +=
+      e.key === "ArrowDown"
+        ? remainder === 0
+          ? step
+          : step - remainder
+        : -(remainder === 0 ? step : remainder);
+
+    if (m >= 60) {
+      m -= 60;
+      h += 1;
+    } else if (m < 0) {
+      m += 60;
+      h -= 1;
+    }
+
+    if (is12HourFormat) {
+      if (h > 12) {
+        h = 1;
+        mer = mer === "AM" ? "PM" : "AM";
+      } else if (h <= 0) {
+        h = 12;
+        mer = mer === "AM" ? "PM" : "AM";
+      }
+    } else {
+      h = (h + 24) % 24;
+    }
+
+    setHour(h.toString().padStart(2, "0"));
+    setMinute(m.toString().padStart(2, "0"));
+    if (is12HourFormat) setMeridiem(mer);
+  };
+
+  const selectedRefs = {
+    hour: useRef<HTMLButtonElement | null>(null),
+    minute: useRef<HTMLButtonElement | null>(null),
+    meridiem: useRef<HTMLButtonElement | null>(null),
+  };
+
+  useEffect(() => {
+    if (showTimePicker) {
+      selectedRefs.hour.current?.scrollIntoView({
+        block: "center",
+        behavior: "instant",
+      });
+      selectedRefs.minute.current?.scrollIntoView({
+        block: "center",
+        behavior: "instant",
+      });
+      if (is12HourFormat) {
+        selectedRefs.meridiem.current?.scrollIntoView({
+          block: "center",
+          behavior: "instant",
+        });
+      }
+    }
+  }, [
+    showTimePicker,
+    hour,
+    minute,
+    meridiem,
+    is12HourFormat,
+    selectedRefs.hour,
+    selectedRefs.minute,
+    selectedRefs.meridiem,
+  ]);
+
+  const renderOptions = (
+    items: string[],
+    type: "hour" | "minute" | "meridiem",
+  ) =>
+    items.map((val) => {
+      const isSelected =
+        (type === "hour" && val === hour) ||
+        (type === "minute" && val === minute) ||
+        (type === "meridiem" && val === meridiem);
+
+      return (
+        <TimeCell
+          key={val}
+          selected={isSelected}
+          ref={
+            isSelected
+              ? (el) => {
+                  selectedRefs[type].current = el;
+                }
+              : null
+          }
+          onClick={() => handleSelect(type, val)}
+          className={clsx("!size-10 cursor-pointer", typography.caption)}
+        >
+          {val}
+        </TimeCell>
+      );
+    });
+
+  return (
+    <div className="relative max-w-38">
+      <InputBase
+        {...props}
+        ref={inputRef}
+        value={inputValue}
+        placeholder={is12HourFormat ? "hh:mm am" : "hh:mm"}
+        after={
+          <span className="text-icon-primary-normal contents">
+            <Icon name="schedule" />
+          </span>
+        }
+        onFocus={handleFocus}
+        caption={props.caption}
+        onChange={handleInputChange}
+        onKeyDown={handleKeyDown}
+        type="text"
+      />
+      {showTimePicker &&
+        createPortal(
+          <Surface
+            elevation={4}
+            className="absolute z-50 bg-background-grouped-primary-normal h-60 overflow-hidden"
+            style={{
+              top: `${timePosition.top}px`,
+              left: `${timePosition.left}px`,
+              minWidth: `${timePosition.width}px`,
+            }}
+          >
+            <div ref={timeRef} className="px-4 flex h-60">
+              <div className={clsx(timePickerScrollableStyle)}>
+                {renderOptions(
+                  Array.from({ length: is12HourFormat ? 12 : 24 }, (_, i) =>
+                    (i + 1).toString().padStart(2, "0"),
+                  ),
+                  "hour",
+                )}
+              </div>
+              <div className={clsx(timePickerScrollableStyle)}>
+                {renderOptions(
+                  Array.from({ length: 12 }, (_, i) =>
+                    (i * 5).toString().padStart(2, "0"),
+                  ),
+                  "minute",
+                )}
+              </div>
+              {is12HourFormat && (
+                <div className="py-4">
+                  {renderOptions(["AM", "PM"], "meridiem")}
+                </div>
+              )}
+            </div>
+          </Surface>,
+          findDocumentRoot(timeRef.current),
+        )}
+    </div>
+  );
+};
+
+type TimeCellProps = {
+  selected?: boolean;
+  children?: React.ReactNode;
+  start?: boolean;
+  intermediate?: boolean;
+  end?: boolean;
+  disabled?: boolean;
+  today?: boolean;
+  onClick?: () => void;
+  onHover?: () => void;
+  onKeyDown?: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
+  className?: string;
+  ref?: React.Ref<HTMLButtonElement> | undefined;
+};
+
+function TimeCell({
+  selected = false,
+  start = false,
+  intermediate = false,
+  end = false,
+  today = false,
+  disabled = false,
+  onClick,
+  onHover,
+  onKeyDown,
+  children,
+  className,
+  ref,
+  ...props
+}: TimeCellProps) {
+  const isDefault = !selected && !start && !intermediate && !end && !today;
+  const isToday = today && !selected && !start && !intermediate && !end;
+  return (
+    <button
+      onPointerOver={onHover}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+      disabled={disabled}
+      ref={ref}
+      className={clsx(
+        "w-full h-full aspect-square flex items-center justify-center ",
+        isDefault &&
+          "text-neutral-500 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 disabled:pointer-events-none rounded",
+        isToday &&
+          "rounded-full border border-neutral-300 hover:bg-action-100 hover:text-action-500 active:text-action-300 disabled:text-neutral-300 ",
+        selected &&
+          "text-white bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded",
+        start &&
+          "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-l",
+        end &&
+          "bg-action-400 hover:bg-action-500 active:bg-action-300 disabled:text-neutral-400 disabled:bg-neutral-200 rounded-r",
+        intermediate && "bg-action-100 border-y border-action-400",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}

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 className="break-all">{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}
+    />
+  );
+}