@weing-dev/ui-kit-primitive 0.0.1 → 0.0.3

package/src/components/ScrollCalendar/ScrollCalendar.tsx

@@ -1,448 +0,0 @@
-import React from "react";
-import dayjs from "dayjs";
-import cn from "classnames/bind";
-import styles from "./ScrollCalendar.module.scss";
-import "dayjs/locale/ko";
-import { ScrollCalendarContext } from "./ScrollCalendar.context";
-import { CalendarContext } from "../Calendar/Calendar.context";
-
-dayjs.locale("ko");
-
-const cx = cn.bind(styles);
-
-interface ScrollCalendarProps {
-  date: string;
-  visible: boolean;
-  className?: string;
-  selected: boolean;
-  onClick?: (date: string) => void;
-  disabled: boolean;
-  between: boolean;
-  both: boolean;
-  start: boolean;
-  end: boolean;
-  columns: dayjs.Dayjs[];
-  dateClassName?: string;
-  textClassName?: string;
-}
-
-const Column = (props: ScrollCalendarProps) => {
-  const {
-    date,
-    visible,
-    className,
-    selected,
-    onClick,
-    disabled,
-    between,
-    both,
-    start,
-    end,
-    dateClassName,
-    textClassName,
-  } = props;
-
-  const { columnWidth, isDragging, hasMoved } = React.useContext(
-    ScrollCalendarContext
-  );
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (isDragging || hasMoved) {
-      e.preventDefault();
-      return;
-    }
-
-    onClick?.(date);
-  };
-
-  return (
-    <button
-      className={cx("Column", className, {
-        between,
-        both,
-        start,
-        end,
-        visible,
-        selected,
-      })}
-      disabled={disabled}
-      style={{
-        visibility: visible
-          ? "visible"
-          : dayjs(date).isSame(dayjs(), "month")
-          ? "visible"
-          : "hidden",
-        width: `${columnWidth}px`,
-      }}
-      onClick={handleClick}
-    >
-      <div className={cx("Date", dateClassName)}>
-        {dayjs(date).format("ddd")}
-      </div>
-      <div className={cx("Text", textClassName)}>{dayjs(date).format("D")}</div>
-    </button>
-  );
-};
-
-interface BodyProps {
-  className?: string;
-  columnWrapClassName?: string;
-  columnRender: () => React.ReactNode;
-}
-
-const Body = (props: BodyProps) => {
-  const { className, columnWrapClassName, columnRender } = props;
-
-  const {
-    isDragging,
-    startX,
-    setIsDragging,
-    setHasMoved,
-    setStartX,
-    bodyRef,
-    columnWrapRef,
-  } = React.useContext(ScrollCalendarContext);
-
-  const [dragStartX, setDragStartX] = React.useState(0);
-  const [previousTranslateX, setPreviousTranslateX] = React.useState(0);
-  const [lastTime, setLastTime] = React.useState(0);
-  const [lastClientX, setLastClientX] = React.useState(0);
-  const [velocity, setVelocity] = React.useState(0);
-  const [isOverscrolling, setIsOverscrolling] = React.useState(false);
-
-  const animationRef = React.useRef<number | null>(null);
-
-  const handleDragStart = React.useCallback(
-    (e: React.MouseEvent | React.TouchEvent) => {
-      setIsDragging(true);
-      setHasMoved(false);
-      const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
-      setDragStartX(clientX);
-      setPreviousTranslateX(startX);
-      setLastTime(Date.now());
-      setLastClientX(clientX);
-      setVelocity(0);
-
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-        animationRef.current = null;
-      }
-    },
-    [
-      setIsDragging,
-      setHasMoved,
-      startX,
-      setDragStartX,
-      setPreviousTranslateX,
-      setLastTime,
-      setLastClientX,
-      setVelocity,
-    ]
-  );
-
-  const handleDragMove = React.useCallback(
-    (e: React.MouseEvent | React.TouchEvent | MouseEvent | TouchEvent) => {
-      if (!isDragging || !columnWrapRef?.current || !bodyRef?.current) return;
-
-      const clientX = "touches" in e ? e.touches[0].clientX : e.clientX;
-      if (Math.abs(clientX - dragStartX) > 5) {
-        setHasMoved(true);
-      }
-      const currentTime = Date.now();
-      const deltaTime = currentTime - lastTime;
-
-      if (deltaTime > 0) {
-        setVelocity((clientX - lastClientX) / deltaTime);
-      }
-
-      setLastTime(currentTime);
-      setLastClientX(clientX);
-
-      const diff = clientX - dragStartX;
-      const newTranslateX = previousTranslateX + diff;
-      const maxScroll =
-        columnWrapRef.current.scrollWidth - bodyRef.current.clientWidth;
-
-      if (newTranslateX > 0 || newTranslateX < -maxScroll) {
-        setIsOverscrolling(true);
-        const overscroll =
-          newTranslateX > 0
-            ? newTranslateX / 3
-            : -maxScroll + (newTranslateX + maxScroll) / 3;
-        setStartX(overscroll);
-      } else {
-        setIsOverscrolling(false);
-        setStartX(newTranslateX);
-      }
-    },
-    [
-      isDragging,
-      columnWrapRef,
-      bodyRef,
-      dragStartX,
-      setHasMoved,
-      lastTime,
-      lastClientX,
-      previousTranslateX,
-      setStartX,
-      setIsOverscrolling,
-      setVelocity,
-    ]
-  );
-
-  const handleDragEnd = React.useCallback(() => {
-    if (!isDragging) return;
-
-    setIsDragging(false);
-
-    if (isOverscrolling && bodyRef?.current && columnWrapRef?.current) {
-      const maxScroll =
-        columnWrapRef.current.scrollWidth - bodyRef.current.clientWidth;
-      const targetPosition = startX > 0 ? 0 : -maxScroll;
-
-      let currentPosition = startX;
-      const animate = () => {
-        const diff = targetPosition - currentPosition;
-        if (Math.abs(diff) < 0.5) {
-          setStartX(targetPosition);
-          setIsOverscrolling(false);
-          if (animationRef.current) {
-            cancelAnimationFrame(animationRef.current);
-            animationRef.current = null;
-          }
-          return;
-        }
-
-        currentPosition += diff * 0.2;
-        setStartX(currentPosition);
-        animationRef.current = requestAnimationFrame(animate);
-      };
-
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
-      animationRef.current = requestAnimationFrame(animate);
-      return;
-    }
-
-    if (Math.abs(velocity) > 0.1) {
-      let currentVelocity = velocity * 30;
-      let currentPosition = startX;
-
-      const animate = () => {
-        if (Math.abs(currentVelocity) < 0.1) {
-          if (animationRef.current) {
-            cancelAnimationFrame(animationRef.current);
-            animationRef.current = null;
-          }
-          return;
-        }
-
-        currentVelocity *= 0.8;
-        currentPosition += currentVelocity;
-
-        const maxScroll =
-          (columnWrapRef?.current?.scrollWidth ?? 0) -
-          (bodyRef?.current?.clientWidth ?? 0);
-        const boundedPosition = Math.min(
-          0,
-          Math.max(-maxScroll, currentPosition)
-        );
-
-        if (boundedPosition !== currentPosition) {
-          currentVelocity = 0;
-        }
-
-        currentPosition = boundedPosition;
-        setStartX(currentPosition);
-
-        animationRef.current = requestAnimationFrame(animate);
-      };
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-      }
-      animationRef.current = requestAnimationFrame(animate);
-    }
-
-    setTimeout(() => {
-      setHasMoved(false);
-    }, 0);
-  }, [
-    isDragging,
-    setIsDragging,
-    isOverscrolling,
-    bodyRef,
-    columnWrapRef,
-    startX,
-    setStartX,
-    setIsOverscrolling,
-    velocity,
-    setHasMoved,
-  ]);
-
-  React.useEffect(() => {
-    const onMouseMove = (event: MouseEvent) => {
-      handleDragMove(event);
-    };
-    const onMouseUp = () => {
-      handleDragEnd();
-    };
-
-    if (isDragging) {
-      window.addEventListener("mousemove", onMouseMove);
-      window.addEventListener("mouseup", onMouseUp);
-    } else {
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
-    }
-
-    return () => {
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
-    };
-  }, [isDragging, handleDragMove, handleDragEnd]);
-
-  React.useEffect(() => {
-    return () => {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-        animationRef.current = null;
-      }
-    };
-  }, []);
-
-  return (
-    <div
-      ref={bodyRef}
-      className={cx("Body", className)}
-      onMouseDown={handleDragStart}
-      onTouchStart={handleDragStart}
-      onTouchMove={handleDragMove}
-      onTouchEnd={handleDragEnd}
-    >
-      <div
-        ref={columnWrapRef}
-        className={cx("ColumnWrap", columnWrapClassName)}
-        style={{
-          transform: `translateX(${startX}px)`,
-          transition:
-            startX === 0 && !isDragging ? "transform 0.05s linear" : "none",
-        }}
-      >
-        {startX !== undefined ? columnRender() : null}
-      </div>
-    </div>
-  );
-};
-
-interface RootProps {
-  children: React.ReactNode;
-  columnWidth?: number;
-}
-
-const Root = (props: RootProps) => {
-  const { children, columnWidth = 48 } = props;
-  const { currentDate } = React.use(CalendarContext);
-
-  const [isDragging, setIsDragging] = React.useState(false);
-  const [hasMoved, setHasMoved] = React.useState(false);
-  const [startX, setStartX] = React.useState(0);
-  const [isFirstRender, setIsFirstRender] = React.useState(true);
-
-  const bodyRef = React.useRef<HTMLDivElement>(null);
-  const columnWrapRef = React.useRef<HTMLDivElement>(null);
-  const animationRef = React.useRef<number | null>(null);
-  const valuesRef = React.useRef({ startX, isFirstRender });
-
-  React.useEffect(() => {
-    valuesRef.current = { startX, isFirstRender };
-  });
-
-  React.useEffect(() => {
-    const selectedIndex = dayjs(currentDate).date() - 1;
-
-    if (
-      selectedIndex !== -1 &&
-      bodyRef?.current &&
-      columnWrapRef?.current &&
-      columnWidth
-    ) {
-      const containerWidth = bodyRef.current.offsetWidth;
-      const centerPosition = containerWidth / 2;
-      const selectedPosition = selectedIndex * columnWidth;
-      const targetPosition =
-        centerPosition - selectedPosition - columnWidth / 2;
-      const maxScroll = columnWrapRef.current.scrollWidth - containerWidth;
-      const boundedPosition = Math.min(0, Math.max(-maxScroll, targetPosition));
-
-      if (valuesRef.current.isFirstRender) {
-        setStartX(boundedPosition);
-        setIsFirstRender(false);
-        return;
-      }
-
-      const startPosition = valuesRef.current.startX;
-      const distance = boundedPosition - startPosition;
-      const duration = 250;
-      const startTime = performance.now();
-
-      const animate = (currentTime: number) => {
-        const elapsed = currentTime - startTime;
-        const progress = Math.min(elapsed / duration, 1);
-        const currentPosition =
-          startPosition + distance * (progress * (2 - progress));
-
-        setStartX(currentPosition);
-
-        if (progress < 1) {
-          animationRef.current = requestAnimationFrame(animate);
-        } else {
-          if (animationRef.current) {
-            cancelAnimationFrame(animationRef.current);
-            animationRef.current = null;
-          }
-        }
-      };
-
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-        animationRef.current = null;
-      }
-
-      animationRef.current = requestAnimationFrame(animate);
-    }
-
-    return () => {
-      if (animationRef.current) {
-        cancelAnimationFrame(animationRef.current);
-        animationRef.current = null;
-      }
-    };
-  }, [currentDate, columnWidth, setIsFirstRender, setStartX]);
-
-  return (
-    <ScrollCalendarContext.Provider
-      value={{
-        columnWidth,
-        isDragging,
-        hasMoved,
-        startX,
-        setIsDragging,
-        setHasMoved,
-        setStartX,
-        bodyRef,
-        columnWrapRef,
-      }}
-    >
-      {children}
-    </ScrollCalendarContext.Provider>
-  );
-};
-
-const ScrollCalendar = {
-  Column,
-  Body,
-  Root,
-};
-
-export default ScrollCalendar;

package/src/components/ScrollSpy/README.md

@@ -1,62 +0,0 @@
-# ScrollSpy Hook
-
-## Contents List
-
-1. [Quick Start](#QuickStart)
-2. [Reference](#Reference)
-3. [Example](#Example)
-
-## Quick Start
-
-```ts
-import { ScrollSpy } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  const containerRef = React.useRef();
-
-  const sectionRef = React.useRef();
-
-  const scrollSpy = ScrollSpy.useScrollSpy(
-    containerRef.current,
-    sectionRefs.current
-  );
-
-  return (
-    <div ref={containerRef}>
-      <div id={"first"} ref={(el) => (sectionRef.current[0] = el)}></div>
-      <div id={"second"} ref={(el) => (sectionRef.current[1] = el)}></div>
-      <div id={"third"} ref={(el) => (sectionRef.current[2] = el)}></div>
-    </div>
-  );
-};
-```
-
-## Reference
-
-### useScrollSpy
-
-`useScrollSpy`는 `container`영역내의 `section`들이 화면에 들어오는지 확인해서 `id` 혹은 `index`를 리턴합니다.
-
-| Prop                        |                   Type                    | Required | Default Value |
-| :-------------------------- | :---------------------------------------: | :------: | :-----------: |
-| [containerEl](#containerEl) |  React.RefObject<HTMLElement>["current"]  |   true   |       -       |
-| [spyRefEls](#spyRefEls)     | React.RefObject<HTMLElement>["current"][] |   true   |       -       |
-| [returnType](#returnType)   |              "id" or "index"              |    -     |     "id"      |
-
-#### containerEl
-
-`useScrollSpy`에 첫 번째 인수로 들어가며 스크롤을 감지할 `element`가 들어갑니다.
-
-#### spyRefEls
-
-`useScrollSpy`에 두 번째 인수로 들어가며 `containerEl`내에서 화면에 들어오는걸 감지할 `element`가 배열로 들어갑니다.
-
-#### returnType
-
-`useScrollSpy`에 세 번째 인수로 들어가며 `containerEl`에서 감지된 `element`의 `id`나 `index`를 리턴하기 위해 지정됩니다.
-
-기본값은 `id`입니다.
-
-## Example
-
-프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/ScrollSpy)에서 확인할 수 있습니다.

package/src/components/ScrollSpy/ScrollSpy.tsx

@@ -1,130 +0,0 @@
-"use client";
-import React from "react";
-
-export function useScrollSpy(
-  containerEl: React.RefObject<HTMLElement | null>["current"],
-  spyRefEls: React.RefObject<HTMLElement | null>["current"][],
-  returnType?: "id"
-): string | null;
-export function useScrollSpy(
-  containerEl: React.RefObject<HTMLElement | null>["current"],
-  spyRefEls: React.RefObject<HTMLElement | null>["current"][],
-  returnType?: "index"
-): number | null;
-export function useScrollSpy(
-  containerEl: React.RefObject<HTMLElement | null>["current"],
-  spyRefEls: React.RefObject<HTMLElement | null>["current"][],
-  returnType?: "id" | "index"
-): string | number | null {
-  const [activeSection, setActiveSection] = React.useState<string | null>(null);
-
-  React.useEffect(() => {
-    const scrollElement = containerEl || window;
-
-    const handleScroll = () => {
-      let maxScore: { id: string | null; score: number } = {
-        id: null,
-        score: -Infinity,
-      };
-
-      const containerRect = containerEl?.getBoundingClientRect() || {
-        top: 0,
-        left: 0,
-        width: window.innerWidth,
-        height: window.innerHeight,
-      };
-
-      // 컨테이너의 중심점 계산
-      const containerCenterX = containerRect.left + containerRect.width / 2;
-      const containerCenterY = containerRect.top + containerRect.height / 2;
-
-      spyRefEls.forEach((el) => {
-        if (!el) return;
-
-        const element = el;
-        const rect = element.getBoundingClientRect();
-
-        // 요소의 중심점 계산
-        const elementCenterX = rect.left + rect.width / 2;
-        const elementCenterY = rect.top + rect.height / 2;
-
-        // 컨테이너 중심점과 요소 중심점 사이의 거리 계산
-        const distanceX = Math.abs(containerCenterX - elementCenterX);
-        const distanceY = Math.abs(containerCenterY - elementCenterY);
-
-        // 거리를 0~1 사이로 정규화 (0은 중심에 있을 때)
-        const normalizedDistanceX = distanceX / (containerRect.width / 2);
-        const normalizedDistanceY = distanceY / (containerRect.height / 2);
-
-        // 화면에 보이는 영역 계산
-        const visibleLeft = Math.max(rect.left, containerRect.left);
-        const visibleRight = Math.min(
-          rect.right,
-          containerRect.left + containerRect.width
-        );
-        const visibleTop = Math.max(rect.top, containerRect.top);
-        const visibleBottom = Math.min(
-          rect.bottom,
-          containerRect.top + containerRect.height
-        );
-
-        // 보이는 영역의 크기와 전체 영역 대비 비율 계산
-        const visibleWidth = Math.max(0, visibleRight - visibleLeft);
-        const visibleHeight = Math.max(0, visibleBottom - visibleTop);
-        const visibleArea = visibleWidth * visibleHeight;
-        const totalArea = rect.width * rect.height;
-
-        const visibility = visibleArea / totalArea;
-
-        // 가시성과 중심점 가중치를 결합하여 최종 점수 계산
-        // 중심에 가까울수록 높은 점수를 받음
-        const distanceScore =
-          1 - Math.min(1, (normalizedDistanceX + normalizedDistanceY) / 2);
-        const finalScore = visibility * (1 + distanceScore);
-
-        // 최소 가시성(0.1)을 넘고 최고 점수를 가진 요소를 선택
-        if (finalScore > maxScore.score && visibility > 0.1) {
-          maxScore = {
-            id: element.id,
-            score: finalScore,
-          };
-        }
-      });
-
-      if (maxScore.score > 0) {
-        setActiveSection(maxScore.id);
-      }
-    };
-
-    // 초기 렌더링 시 약간의 딜레이를 두고 체크
-    const initialCheckTimeout = setTimeout(handleScroll, 100);
-
-    // 주기적으로 체크 (500ms 간격)
-    const checkInterval = setInterval(handleScroll, 500);
-
-    scrollElement.addEventListener("scroll", handleScroll);
-    window.addEventListener("resize", handleScroll);
-    handleScroll();
-
-    return () => {
-      scrollElement.removeEventListener("scroll", handleScroll);
-      window.removeEventListener("resize", handleScroll);
-      clearTimeout(initialCheckTimeout);
-      clearInterval(checkInterval);
-    };
-  }, [containerEl, spyRefEls]);
-
-  if (returnType === "index" && activeSection) {
-    return spyRefEls.findIndex((el) => el?.id === activeSection);
-  }
-
-  return activeSection;
-}
-
-interface IScrollSpy {
-  useScrollSpy: typeof useScrollSpy;
-}
-
-export default {
-  useScrollSpy,
-} as IScrollSpy;