@musecat/uikit 0.1.1

package/packages/Components/Nav/Nav.tsx

@@ -0,0 +1,304 @@
+"use client";
+
+import { useTimeout } from "@musecat/functionkit";
+import clsx from "clsx";
+import { useRouter } from "next/navigation";
+import type React from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import Icon from "@/packages/Components/Icon/Icon";
+import { useNavDrag } from "@/packages/Components/Nav/hooks/useNavDrag";
+import { useNavIndicator } from "@/packages/Components/Nav/hooks/useNavIndicator";
+import styles from "@/packages/Components/Nav/Nav.module.scss";
+import type { NavProps } from "@/packages/Components/Nav/Nav.types";
+import Text from "@/packages/Components/Text/Text";
+import Pressable from "@/packages/Frameworks/Pressable/Pressable";
+import View from "@/packages/Frameworks/View/View";
+
+export default function Nav({
+  name,
+  items,
+  className,
+  radius,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  sizeFull,
+  radio,
+  dragSelection = true,
+  dragSelectionCommit = "end",
+  value,
+  defaultValue,
+  onChange,
+  titleType,
+  titleSize,
+  style,
+  "data-color-mode": dataTheme,
+}: NavProps) {
+  const [internalValue, setInternalValue] = useState<
+    string | number | undefined
+  >(radio ? defaultValue : undefined);
+  const isControlled = value !== undefined;
+  const currentCheckedValue = isControlled ? value : internalValue;
+  const [dragPreviewValue, setDragPreviewValue] = useState<
+    string | number | undefined
+  >();
+  const displayCheckedValue =
+    dragPreviewValue !== undefined ? dragPreviewValue : currentCheckedValue;
+
+  const itemRefs = useRef<(HTMLElement | null)[]>([]);
+  const indicatorRef = useRef<HTMLDivElement>(null);
+  const navRef = useRef<HTMLDivElement>(null);
+  const [isDraggingSelection, setIsDraggingSelection] = useState(false);
+  const [isReleasingSelection, setIsReleasingSelection] = useState(false);
+  const [pressed, setPressed] = useState(false);
+  const committedSelectedIndex = items.findIndex(
+    (item) =>
+      item.checked ??
+      (item.value !== undefined &&
+        currentCheckedValue !== undefined &&
+        item.value === currentCheckedValue),
+  );
+
+  const { applyIndicatorStyle, committedIndicatorStyleRef } = useNavIndicator(
+    committedSelectedIndex,
+    isDraggingSelection,
+    isReleasingSelection,
+    itemRefs,
+    indicatorRef,
+    navRef,
+  );
+
+  const dragReleaseTimer = useTimeout(
+    () => {
+      setDragPreviewValue(undefined);
+      setIsReleasingSelection(false);
+      applyIndicatorStyle(committedIndicatorStyleRef.current);
+    },
+    240,
+    { enabled: false },
+  );
+
+  const getDefaultItemPadding = useCallback(
+    (item: NavProps["items"][number]) =>
+      item.icon && item.title ? ".8rem 1.2rem .8rem 1rem" : ".8rem 1.2rem",
+    [],
+  );
+
+  const router = useRouter();
+
+  const selectValue = useCallback(
+    (nextValue: string | number | undefined) => {
+      if (nextValue === undefined || nextValue === currentCheckedValue) {
+        return;
+      }
+
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+
+      onChange?.(nextValue);
+
+      const item = items.find((i) => i.value === nextValue);
+      if (!item) return;
+
+      const fakeEvent = {
+        preventDefault: () => {},
+        stopPropagation: () => {},
+      } as React.MouseEvent;
+
+      item.onClick?.(fakeEvent);
+
+      if (item.href) {
+        const href = item.href;
+        const isExternal =
+          typeof href === "string" &&
+          (href.startsWith("//") || /^[a-zA-Z][a-zA-Z\d+\-.]*:/.test(href));
+        if (isExternal || item.target === "_blank") {
+          window.open(
+            typeof href === "string" ? href : (href.pathname ?? ""),
+            item.target ?? "_blank",
+            item.rel,
+          );
+        } else {
+          router.push(href as string);
+        }
+      }
+    },
+    [currentCheckedValue, isControlled, onChange, items, router],
+  );
+
+  const {
+    handlePointerDown,
+    handlePointerMove,
+    stopDragging,
+    canDragSelection,
+    dragStartFrameRef,
+    dragMoveFrameRef,
+  } = useNavDrag({
+    items,
+    itemRefs,
+    dragSelection: dragSelection ?? false,
+    radio: radio ?? false,
+    dragSelectionCommit,
+    selectValue,
+    setDragPreviewValue,
+    applyIndicatorStyle,
+    committedIndicatorStyleRef,
+    setIsDraggingSelection,
+    setIsReleasingSelection,
+    setPressed,
+    dragReleaseTimer,
+  });
+
+  useEffect(
+    () => () => {
+      if (dragStartFrameRef.current !== null) {
+        cancelAnimationFrame(dragStartFrameRef.current);
+      }
+
+      if (dragMoveFrameRef.current !== null) {
+        cancelAnimationFrame(dragMoveFrameRef.current);
+      }
+
+      dragReleaseTimer.clear();
+    },
+    [dragReleaseTimer, dragStartFrameRef, dragMoveFrameRef],
+  );
+
+  return (
+    <View
+      ref={navRef}
+      data-color-mode={dataTheme}
+      className={clsx(
+        styles.Nav,
+        sizeFull && styles.SizeFull,
+        canDragSelection && styles.DragSelection,
+        isDraggingSelection && styles.Dragging,
+        className,
+      )}
+      gap={0}
+      background="Base6TP6"
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={stopDragging}
+      onPointerCancel={stopDragging}
+      onPointerLeave={() => {
+        setPressed(false);
+      }}
+      style={style}
+    >
+      {}
+      <View
+        radius={radius ?? "Circle"}
+        data-color-mode={dataTheme}
+        background="Base1"
+        ref={indicatorRef}
+        className={clsx(
+          styles.ActiveIndicator,
+          isDraggingSelection && styles.ActiveIndicatorDragging,
+          isReleasingSelection && styles.ActiveIndicatorReleasing,
+          pressed && !isDraggingSelection && styles.ActiveIndicatorPressed,
+        )}
+      />
+      {items.map((item, index) => {
+        const {
+          checked: itemChecked,
+          icon: itemIcon,
+          title: itemTitle,
+          children: itemChildren,
+          className: itemClassName,
+          onChange: itemOnChange,
+          ...restItem
+        } = item;
+        const isChecked =
+          itemChecked ??
+          (item.value !== undefined &&
+            displayCheckedValue !== undefined &&
+            item.value === displayCheckedValue);
+        const nextValue = item.value;
+        const itemKey =
+          nextValue ??
+          itemTitle ??
+          itemIcon?.icon ??
+          itemIcon?.svg ??
+          itemIcon?.image;
+
+        if (!itemTitle && itemIcon) {
+          return (
+            <Icon
+              key={String(itemKey)}
+              box
+              iconFill={itemIcon.iconFill ?? isChecked}
+              boxOptions={{
+                padding,
+                paddingHorizontal,
+                paddingVertical,
+                ...itemIcon.boxOptions,
+              }}
+              className={clsx(styles.Item, isChecked && styles.Checked)}
+              pressable={{
+                ref: (el) => {
+                  itemRefs.current[index] = el;
+                },
+                type: radio ? "radio" : undefined,
+                name: name,
+                checked: isChecked,
+                themeInteractive: false,
+                "data-color-mode": dataTheme,
+                onChange: (e) => {
+                  selectValue(nextValue);
+                  itemOnChange?.(e);
+                },
+              }}
+              {...itemIcon}
+            />
+          );
+        }
+
+        return (
+          <Pressable
+            key={String(itemKey)}
+            ref={(el) => {
+              itemRefs.current[index] = el;
+            }}
+            className={clsx(
+              styles.Item,
+              isChecked && styles.Checked,
+              itemClassName,
+            )}
+            type={radio ? "radio" : undefined}
+            name={name}
+            {...restItem}
+            themeInteractive={false}
+            data-color-mode={dataTheme}
+            checked={isChecked}
+            onChange={(e) => {
+              selectValue(nextValue);
+              itemOnChange?.(e);
+            }}
+            padding={
+              padding !== undefined ? padding : getDefaultItemPadding(item)
+            }
+            paddingHorizontal={paddingHorizontal}
+            paddingVertical={paddingVertical}
+          >
+            {itemIcon && (
+              <Icon
+                size={itemIcon.size ?? 22}
+                iconFill={itemIcon.iconFill ?? isChecked}
+                {...itemIcon}
+                pressable={undefined}
+              />
+            )}
+            {itemTitle && (
+              <Text type={titleType ?? "Headline"} size={titleSize}>
+                {itemTitle}
+              </Text>
+            )}
+            {itemChildren}
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

package/packages/Components/Nav/Nav.types.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+import type { IconProps } from "@/packages/Components/Icon/Icon.types";
+import type { TextProps } from "@/packages/Components/Text/Text.types";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { PressableProps } from "@/packages/Frameworks/Pressable/Pressable.types";
+import type { RadiusProps } from "@/packages/Frameworks/Theme/Radius.types";
+
+export interface NavOption extends Omit<PressableProps, "title"> {
+  checked?: boolean;
+  icon?: IconProps;
+  title?: ReactNode;
+}
+
+export interface NavProps extends RadiusProps {
+  className?: string;
+  style?: React.CSSProperties;
+  "data-color-mode"?: string;
+  name?: string;
+  padding?: UIKitSizeValue;
+  paddingHorizontal?: UIKitSizeValue;
+  paddingVertical?: UIKitSizeValue;
+  sizeFull?: boolean;
+  radio?: boolean;
+  dragSelection?: boolean;
+  dragSelectionCommit?: "change" | "end";
+  value?: string | number;
+  defaultValue?: string | number;
+  onChange?: (value: string | number) => void;
+  titleType?: TextProps["type"];
+  titleSize?: TextProps["size"];
+  items: NavOption[];
+}

package/packages/Components/Nav/hooks/useNavDrag.ts

@@ -0,0 +1,374 @@
+"use client";
+
+import { useCallback, useRef } from "react";
+import type { NavProps } from "@/packages/Components/Nav/Nav.types";
+
+const DRAG_SELECTION_TOUCH_ACTIVATION_DISTANCE = 10;
+const DRAG_SELECTION_TOUCH_HORIZONTAL_RATIO = 1.75;
+
+export type DragSelectionMetric = {
+  centerX: number;
+  index: number;
+  offsetLeft: number;
+  width: number;
+  value: string | number;
+};
+
+export interface UseNavDragProps {
+  items: NavProps["items"];
+  itemRefs: React.MutableRefObject<(HTMLElement | null)[]>;
+  dragSelection: boolean;
+  radio: boolean;
+  dragSelectionCommit: "change" | "end";
+  selectValue: (nextValue: string | number | undefined) => void;
+  setDragPreviewValue: (value: string | number | undefined) => void;
+  applyIndicatorStyle: (style?: React.CSSProperties) => void;
+  committedIndicatorStyleRef: React.MutableRefObject<
+    React.CSSProperties | undefined
+  >;
+  setIsDraggingSelection: (value: boolean) => void;
+  setIsReleasingSelection: (value: boolean) => void;
+  setPressed: (value: boolean) => void;
+  dragReleaseTimer: { clear: () => void; start: (ms: number) => void };
+}
+
+export function useNavDrag({
+  items,
+  itemRefs,
+  dragSelection,
+  radio,
+  dragSelectionCommit,
+  selectValue,
+  setDragPreviewValue,
+  applyIndicatorStyle,
+  committedIndicatorStyleRef,
+  setIsDraggingSelection,
+  setIsReleasingSelection,
+  setPressed,
+  dragReleaseTimer,
+}: UseNavDragProps) {
+  const dragPointerIdRef = useRef<number | null>(null);
+  const dragSelectedValueRef = useRef<string | number | undefined>(undefined);
+  const dragStartPointRef = useRef<{ x: number; y: number } | null>(null);
+  const dragGestureStateRef = useRef<"idle" | "pending" | "active">("idle");
+  const dragStartFrameRef = useRef<number | null>(null);
+  const dragMoveFrameRef = useRef<number | null>(null);
+  const dragLatestClientXRef = useRef<number | null>(null);
+  const dragRootLeftRef = useRef(0);
+  const dragMetricsRef = useRef<DragSelectionMetric[]>([]);
+
+  const commitDragPreviewValue = useCallback(
+    (nextValue: string | number | undefined) => {
+      if (nextValue === undefined) return;
+
+      if (dragSelectionCommit === "change") {
+        selectValue(nextValue);
+        return;
+      }
+
+      setDragPreviewValue(nextValue);
+    },
+    [dragSelectionCommit, selectValue, setDragPreviewValue],
+  );
+
+  const getDragSelectionFromClientX = useCallback(
+    (clientX: number): { element?: HTMLElement; value?: string | number } => {
+      const dragMetrics = dragMetricsRef.current;
+      if (dragMetrics.length > 0) {
+        let closestMetric: DragSelectionMetric | undefined;
+        let closestDistance = Number.POSITIVE_INFINITY;
+
+        dragMetrics.forEach((metric) => {
+          const distance = Math.abs(clientX - metric.centerX);
+
+          if (distance < closestDistance) {
+            closestDistance = distance;
+            closestMetric = metric;
+          }
+        });
+
+        if (!closestMetric) {
+          return {};
+        }
+
+        return {
+          element: itemRefs.current[closestMetric.index] ?? undefined,
+          value: closestMetric.value,
+        };
+      }
+
+      let closestValue: string | number | undefined;
+      let closestEl: HTMLElement | undefined;
+      let closestDistance = Number.POSITIVE_INFINITY;
+
+      itemRefs.current.forEach((el, index) => {
+        const value = items[index]?.value;
+        if (!el || value === undefined) return;
+
+        const rect = el.getBoundingClientRect();
+        const centerX = rect.left + rect.width / 2;
+        const distance = Math.abs(clientX - centerX);
+
+        if (distance < closestDistance) {
+          closestDistance = distance;
+          closestValue = value;
+          closestEl = el;
+        }
+      });
+
+      return { element: closestEl, value: closestValue };
+    },
+    [items, itemRefs],
+  );
+
+  const getIndicatorStyleForValue = useCallback(
+    (
+      nextValue: string | number | undefined,
+    ): React.CSSProperties | undefined => {
+      if (nextValue === undefined) return undefined;
+
+      const index = items.findIndex((item) => item.value === nextValue);
+      const el = index >= 0 ? itemRefs.current[index] : null;
+      if (!el) return undefined;
+
+      return {
+        left: el.offsetLeft,
+        width: el.offsetWidth,
+        opacity: 1,
+      };
+    },
+    [items, itemRefs],
+  );
+
+  const updateDragSelection = useCallback(
+    (clientX: number) => {
+      const { element, value } = getDragSelectionFromClientX(clientX);
+      if (!element || value === undefined) return;
+
+      const previousValue = dragSelectedValueRef.current;
+      dragSelectedValueRef.current = value;
+      if (value !== previousValue) {
+        commitDragPreviewValue(value);
+      }
+
+      const dragMetrics = dragMetricsRef.current;
+      const firstMetric = dragMetrics[0];
+      const lastMetric = dragMetrics.at(-1);
+      const width = element.offsetWidth;
+      const minLeft = firstMetric?.offsetLeft ?? 0;
+      const maxLeft =
+        lastMetric !== undefined
+          ? lastMetric.offsetLeft + lastMetric.width - width
+          : minLeft;
+      const pointerLeft = clientX - dragRootLeftRef.current - width / 2;
+      const left = Math.min(Math.max(pointerLeft, minLeft), maxLeft);
+
+      applyIndicatorStyle({
+        left,
+        width,
+        opacity: 1,
+      });
+    },
+    [applyIndicatorStyle, commitDragPreviewValue, getDragSelectionFromClientX],
+  );
+
+  const canDragSelection = Boolean(dragSelection && radio);
+
+  const resetDragGesture = useCallback(() => {
+    dragPointerIdRef.current = null;
+    dragStartPointRef.current = null;
+    dragGestureStateRef.current = "idle";
+    dragSelectedValueRef.current = undefined;
+    dragLatestClientXRef.current = null;
+    dragMetricsRef.current = [];
+  }, []);
+
+  const measureDragSelection = useCallback(
+    (rootEl: HTMLElement) => {
+      dragRootLeftRef.current = rootEl.getBoundingClientRect().left;
+      dragMetricsRef.current = itemRefs.current.flatMap((el, index) => {
+        const value = items[index]?.value;
+        if (!el || value === undefined) return [];
+
+        const rect = el.getBoundingClientRect();
+        return [
+          {
+            centerX: rect.left + rect.width / 2,
+            index,
+            offsetLeft: el.offsetLeft,
+            width: el.offsetWidth,
+            value,
+          },
+        ];
+      });
+    },
+    [items, itemRefs],
+  );
+
+  const queueDragSelectionUpdate = useCallback(() => {
+    if (dragMoveFrameRef.current !== null) {
+      return;
+    }
+
+    dragMoveFrameRef.current = requestAnimationFrame(() => {
+      dragMoveFrameRef.current = null;
+      const clientX = dragLatestClientXRef.current;
+      if (clientX === null) return;
+
+      updateDragSelection(clientX);
+    });
+  }, [updateDragSelection]);
+
+  const beginDragSelection = useCallback(
+    (rootEl: HTMLDivElement, pointerId: number, clientX: number) => {
+      dragGestureStateRef.current = "active";
+      dragLatestClientXRef.current = clientX;
+      setDragPreviewValue(undefined);
+      setIsDraggingSelection(true);
+      measureDragSelection(rootEl);
+
+      if (!rootEl.hasPointerCapture(pointerId)) {
+        rootEl.setPointerCapture(pointerId);
+      }
+
+      dragStartFrameRef.current = requestAnimationFrame(() => {
+        updateDragSelection(clientX);
+        dragStartFrameRef.current = null;
+      });
+    },
+    [
+      measureDragSelection,
+      updateDragSelection,
+      setDragPreviewValue,
+      setIsDraggingSelection,
+    ],
+  );
+
+  const handlePointerDown = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (event.button !== 0) return;
+
+      setPressed(true);
+
+      if (!canDragSelection) return;
+
+      dragPointerIdRef.current = event.pointerId;
+      dragStartPointRef.current = { x: event.clientX, y: event.clientY };
+      dragGestureStateRef.current =
+        event.pointerType === "mouse" ? "active" : "pending";
+      dragSelectedValueRef.current = undefined;
+      dragReleaseTimer.clear();
+      setIsReleasingSelection(false);
+      if (event.pointerType === "mouse") {
+        beginDragSelection(event.currentTarget, event.pointerId, event.clientX);
+        event.preventDefault();
+      }
+    },
+    [
+      beginDragSelection,
+      canDragSelection,
+      dragReleaseTimer,
+      setIsReleasingSelection,
+      setPressed,
+    ],
+  );
+
+  const handlePointerMove = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      if (dragPointerIdRef.current !== event.pointerId) return;
+
+      if (dragGestureStateRef.current === "pending") {
+        const startPoint = dragStartPointRef.current;
+        if (!startPoint) return;
+
+        const deltaX = event.clientX - startPoint.x;
+        const deltaY = event.clientY - startPoint.y;
+        const absX = Math.abs(deltaX);
+        const absY = Math.abs(deltaY);
+
+        if (Math.max(absX, absY) < DRAG_SELECTION_TOUCH_ACTIVATION_DISTANCE) {
+          return;
+        }
+
+        if (absX < absY * DRAG_SELECTION_TOUCH_HORIZONTAL_RATIO) {
+          resetDragGesture();
+          return;
+        }
+
+        beginDragSelection(event.currentTarget, event.pointerId, event.clientX);
+        event.preventDefault();
+        return;
+      }
+
+      if (dragGestureStateRef.current !== "active") return;
+
+      if (dragStartFrameRef.current !== null) {
+        cancelAnimationFrame(dragStartFrameRef.current);
+        dragStartFrameRef.current = null;
+      }
+      dragLatestClientXRef.current = event.clientX;
+      queueDragSelectionUpdate();
+      event.preventDefault();
+    },
+    [beginDragSelection, queueDragSelectionUpdate, resetDragGesture],
+  );
+
+  const stopDragging = useCallback(
+    (event: React.PointerEvent<HTMLDivElement>) => {
+      setPressed(false);
+      if (dragPointerIdRef.current !== event.pointerId) return;
+
+      if (dragGestureStateRef.current !== "active") {
+        resetDragGesture();
+        return;
+      }
+
+      if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+      if (dragStartFrameRef.current !== null) {
+        cancelAnimationFrame(dragStartFrameRef.current);
+        dragStartFrameRef.current = null;
+      }
+      if (dragMoveFrameRef.current !== null) {
+        cancelAnimationFrame(dragMoveFrameRef.current);
+        dragMoveFrameRef.current = null;
+      }
+      if (dragSelectionCommit === "end") {
+        selectValue(dragSelectedValueRef.current);
+      }
+      const finalIndicatorStyle = getIndicatorStyleForValue(
+        dragSelectedValueRef.current,
+      );
+      resetDragGesture();
+      setIsDraggingSelection(false);
+      setIsReleasingSelection(true);
+      applyIndicatorStyle(
+        finalIndicatorStyle ?? committedIndicatorStyleRef.current,
+      );
+
+      dragReleaseTimer.start(240);
+    },
+    [
+      applyIndicatorStyle,
+      dragSelectionCommit,
+      getIndicatorStyleForValue,
+      resetDragGesture,
+      selectValue,
+      setIsDraggingSelection,
+      setIsReleasingSelection,
+      setPressed,
+      dragReleaseTimer,
+      committedIndicatorStyleRef,
+    ],
+  );
+
+  return {
+    handlePointerDown,
+    handlePointerMove,
+    stopDragging,
+    canDragSelection,
+    dragStartFrameRef,
+    dragMoveFrameRef,
+  };
+}