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

package/src/components/Slider/Slider.backup.tsx

@@ -1,477 +0,0 @@
-"use client";
-/* eslint-disable react-refresh/only-export-components */
-import React from "react";
-import cn from "classnames/bind";
-import styles from "./Slider.module.scss";
-
-const cx = cn.bind(styles);
-
-type SliderProps = {
-  readOnly?: boolean;
-  disabled?: boolean;
-  invert?: boolean;
-  min?: number;
-  max?: number;
-  step?: number;
-  color?: React.CSSProperties["color"];
-  labelAlwaysOn?: boolean;
-  marks?: { value: number; label: string | number | React.ReactNode }[];
-  scale?: (value: number) => number;
-  label?: ((value: number) => string) | null;
-};
-
-type SingleProps = {
-  defaultValue?: number;
-  thumbChildren?: React.ReactNode;
-  onChange?: (value: number) => void;
-} & SliderProps;
-
-const Single = (props: SingleProps) => {
-  const {
-    readOnly = false,
-    disabled = false,
-    invert = false,
-    min = 0,
-    max = 100,
-    step = 10,
-    color = "#688DEE",
-    labelAlwaysOn = false,
-    marks,
-    defaultValue = 10,
-    thumbChildren,
-    label,
-    scale = (v) => v,
-    onChange,
-  } = props;
-
-  const [value, setValue] = React.useState(defaultValue);
-  const [isDragging, setIsDragging] = React.useState(false);
-
-  const sliderRef = React.useRef<HTMLDivElement>(null);
-
-  const progressRef = React.useRef<HTMLDivElement>(null);
-
-  const thumbRef = React.useRef<HTMLDivElement>(null);
-
-  const valueView = React.useMemo(() => {
-    if (label === null) return;
-    return label?.(scale(value)) ?? scale(value);
-  }, [value, label, scale]);
-
-  const calculateValueFromPosition = React.useCallback(
-    (clientX: number) => {
-      if (progressRef.current) {
-        const rect = progressRef.current.getBoundingClientRect();
-        const sliderWidth = rect.width;
-        const offsetX = clientX - rect.left;
-
-        // 비율 계산
-        const ratio = offsetX / sliderWidth;
-        let newValue = min + ratio * (max - min);
-
-        // step에 맞게 반올림
-        newValue = Math.round(newValue / step) * step;
-
-        // min, max 범위 내로 제한
-        return Math.max(min, Math.min(newValue, max));
-      }
-      return value;
-    },
-    [max, min, step, value]
-  );
-
-  const handleValueChange = React.useCallback(
-    (newValue: number) => {
-      if (readOnly || disabled) return;
-      if (onChange) return onChange?.(newValue);
-      return setValue(newValue);
-    },
-    [readOnly, disabled, onChange]
-  );
-
-  const handleMouseDown = React.useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      if (readOnly || disabled) return;
-      setIsDragging(true);
-      const newValue = calculateValueFromPosition(e.clientX);
-      handleValueChange(newValue);
-    },
-    [readOnly, disabled, calculateValueFromPosition, handleValueChange]
-  );
-
-  const handleMouseMove = React.useCallback(
-    (e: MouseEvent) => {
-      e.preventDefault();
-      if (readOnly || disabled) return;
-      if (isDragging) {
-        const newValue = calculateValueFromPosition(e.clientX);
-        handleValueChange(newValue);
-      }
-    },
-    [
-      readOnly,
-      disabled,
-      isDragging,
-      calculateValueFromPosition,
-      handleValueChange,
-    ]
-  );
-
-  const handleMouseUp = React.useCallback(() => {
-    if (readOnly || disabled) return;
-    if (isDragging) {
-      setIsDragging(false);
-    }
-  }, [readOnly, disabled, isDragging]);
-
-  React.useEffect(() => {
-    if (isDragging) {
-      // 전역적으로 mousemove와 mouseup 이벤트 리스너를 등록
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-    } else {
-      // 드래그가 끝나면 이벤트 리스너 제거
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    }
-
-    return () => {
-      // 컴포넌트 언마운트 시 이벤트 리스너 제거
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, handleMouseMove, handleMouseUp]);
-
-  React.useEffect(() => {
-    setValue(defaultValue);
-  }, [defaultValue]);
-
-  React.useEffect(() => {
-    if (sliderRef.current && progressRef.current) {
-      const progressRect = progressRef.current.getBoundingClientRect();
-      const sliderWidth = progressRect.width;
-
-      // 비율에 따른 thumb 위치를 픽셀 단위로 변환
-      const thumbPositionX = ((value - min) / (max - min)) * sliderWidth;
-
-      sliderRef.current.style.cssText = `
-        --progress-value-width: ${thumbPositionX}px;
-        --progress-value-color: ${color};
-        --progress-sigle-thumb-x: ${thumbPositionX}px;
-      `;
-    }
-  }, [value, min, max, color]);
-
-  return (
-    <div ref={sliderRef} className={cx("Slider")}>
-      <div
-        ref={progressRef}
-        className={cx("Progress", { readOnly, disabled, invert })}
-        onMouseDown={handleMouseDown}
-      >
-        <div className={cx("Value")} />
-        {marks && (
-          <div className={cx("Marks")}>
-            {marks.map((mark, idx) => (
-              <div
-                key={idx}
-                className={cx("MarkWrap")}
-                style={{
-                  left: `${mark.value}%`,
-                }}
-              >
-                <div className={cx("Mark")}>
-                  <div className={cx("MarkLabel")}>{mark.label}</div>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-        <div
-          ref={thumbRef}
-          className={cx("Thumb", "Single", {
-            isDragging,
-            labelAlwaysOn,
-          })}
-        >
-          <div className={cx("Label", { hidden: label === null })}>
-            {valueView}
-          </div>
-          <div className={cx("Point")}>{thumbChildren}</div>
-          <div
-            className={cx("Label", { hidden: label === null })}
-            style={{ visibility: "hidden" }}
-          >
-            {valueView}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-type DualProps = {
-  defaultValue?: [number, number];
-  thumbChildren?: [React.ReactNode?, React.ReactNode?];
-  onChange?: (value: [number, number]) => void;
-} & SliderProps;
-
-const Dual = (props: DualProps) => {
-  const {
-    readOnly = false,
-    disabled = false,
-    invert = false,
-    min = 0,
-    max = 100,
-    step = 10,
-    color = "#688DEE",
-    marks,
-    labelAlwaysOn = false,
-    defaultValue = [0, 10],
-    thumbChildren,
-    label,
-    scale = (v) => v,
-    onChange,
-  } = props;
-
-  const [value, setValue] = React.useState<[number, number]>(defaultValue);
-  const [isDragging, setIsDragging] = React.useState<number | null>(null); // 어느 thumb이 드래그 중인지 (0: 왼쪽, 1: 오른쪽)
-
-  const progressRef = React.useRef<HTMLDivElement>(null);
-
-  const valueView = React.useCallback(
-    (idx: number) => {
-      if (label === null) return;
-      return label?.(scale(value[idx])) ?? scale(value[idx]);
-    },
-    [value, scale, label]
-  );
-
-  // 마우스 위치에 따라 값을 계산하는 함수
-  const calculateValueFromPosition = React.useCallback(
-    (clientX: number) => {
-      if (progressRef.current) {
-        const rect = progressRef.current.getBoundingClientRect();
-        const sliderWidth = rect.width;
-        const offsetX = clientX - rect.left;
-
-        // 비율 계산
-        const ratio = offsetX / sliderWidth;
-        let newValue = min + ratio * (max - min);
-
-        // step에 맞게 반올림
-        newValue = Math.round(newValue / step) * step;
-
-        // min, max 범위 내로 제한
-        return Math.max(min, Math.min(newValue, max));
-      }
-      return value[0]; // 기본값으로 반환
-    },
-    [max, min, step, value]
-  );
-
-  React.useEffect(() => {
-    if (onChange) setValue(defaultValue);
-  }, [onChange, defaultValue]);
-
-  const handleValueChange = React.useCallback(
-    (newValue: [number, number]) => {
-      if (readOnly || disabled) return;
-      if (onChange) return onChange(newValue);
-      return setValue(newValue);
-    },
-    [readOnly, disabled, onChange]
-  );
-
-  // 마우스를 클릭했을 때 처리하는 함수
-  const handleMouseDown = React.useCallback(
-    (e: React.MouseEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      if (readOnly || disabled) return;
-      const newValue = calculateValueFromPosition(e.clientX);
-
-      // 어느 thumb이 가까운지 판단
-      const distanceToThumb1 = Math.abs(newValue - value[0]);
-      const distanceToThumb2 = Math.abs(newValue - value[1]);
-
-      // 가까운 thumb을 드래그 중인 것으로 설정
-      if (distanceToThumb1 < distanceToThumb2) {
-        setIsDragging(0);
-        handleValueChange([newValue, value[1]]);
-      } else {
-        setIsDragging(1);
-        handleValueChange([value[0], newValue]);
-      }
-    },
-    [readOnly, disabled, value, calculateValueFromPosition, handleValueChange]
-  );
-
-  // 마우스를 움직일 때 처리하는 함수
-  const handleMouseMove = React.useCallback(
-    (e: MouseEvent) => {
-      e.preventDefault();
-      if (readOnly || disabled) return;
-      if (isDragging !== null) {
-        const newValue = calculateValueFromPosition(e.clientX);
-
-        let updatedValue: [number, number];
-
-        // 왼쪽 thumb 드래그 중일 때
-        if (isDragging === 0) {
-          const updatedLeftValue = Math.min(newValue, value[1] - step); // 오른쪽 thumb을 넘지 않도록 제한
-          // 만약 왼쪽 thumb이 오른쪽 thumb을 넘으려고 하면 오른쪽 thumb도 같이 이동
-          if (newValue > value[1] - step) {
-            const updatedRightValue = Math.min(
-              max,
-              value[1] + (newValue - value[0])
-            );
-            updatedValue = [updatedLeftValue, updatedRightValue];
-          } else {
-            updatedValue = [updatedLeftValue, value[1]];
-          }
-        }
-        // 오른쪽 thumb 드래그 중일 때
-        else if (isDragging === 1) {
-          const updatedRightValue = Math.max(newValue, value[0] + step); // 왼쪽 thumb을 넘지 않도록 제한
-          // 만약 오른쪽 thumb이 왼쪽 thumb을 넘으려고 하면 왼쪽 thumb도 같이 이동
-          if (newValue < value[0] + step) {
-            const updatedLeftValue = Math.max(
-              min,
-              value[0] - (value[1] - newValue)
-            );
-            updatedValue = [updatedLeftValue, updatedRightValue];
-          } else {
-            updatedValue = [value[0], updatedRightValue];
-          }
-        } else {
-          updatedValue = value;
-        }
-        handleValueChange(updatedValue);
-      }
-    },
-    [
-      readOnly,
-      disabled,
-      isDragging,
-      step,
-      min,
-      max,
-      value,
-      calculateValueFromPosition,
-      handleValueChange,
-    ]
-  );
-
-  const handleMouseUp = React.useCallback(() => {
-    if (readOnly || disabled) return;
-    setIsDragging(null);
-  }, [readOnly, disabled]);
-
-  React.useEffect(() => {
-    if (isDragging !== null) {
-      // 전역적으로 mousemove와 mouseup 이벤트 리스너를 등록
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-    } else {
-      // 드래그가 끝나면 이벤트 리스너 제거
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    }
-
-    return () => {
-      // 컴포넌트 언마운트 시 이벤트 리스너 제거
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [isDragging, handleMouseMove, handleMouseUp]);
-
-  React.useEffect(() => {
-    if (progressRef.current) {
-      const rect = progressRef.current.getBoundingClientRect();
-      const sliderWidth = rect.width;
-
-      // 왼쪽과 오른쪽 thumb의 위치를 계산
-      const thumbPositionX1 = ((value[0] - min) / (max - min)) * sliderWidth;
-      const thumbPositionX2 = ((value[1] - min) / (max - min)) * sliderWidth;
-
-      progressRef.current.style.cssText = `
-        --progress-value-width: ${thumbPositionX2 - thumbPositionX1}px;
-        --progress-value-color: ${color};
-        --progress-dual-thumb1-x: ${thumbPositionX1}px;
-        --progress-dual-thumb2-x: ${thumbPositionX2}px;
-      `;
-    }
-  }, [value, min, max, color]);
-
-  return (
-    <div className={cx("Slider")}>
-      <div
-        ref={progressRef}
-        className={cx("Progress", { readOnly, disabled, invert })}
-        onMouseDown={handleMouseDown}
-      >
-        <div className={cx("Value")} />
-        {marks && (
-          <div className={cx("Marks")}>
-            {marks.map((mark, index) => (
-              <div
-                key={index}
-                className={cx("MarkWrap")}
-                style={{ left: `${mark.value}%` }}
-              >
-                <div className={cx("Mark")}>
-                  <div className={cx("MarkLabel")}>{mark.label}</div>
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-        <div
-          className={cx("Thumb", "DualThumb1", {
-            isDragging: isDragging === 0,
-            labelAlwaysOn,
-          })}
-        >
-          <div className={cx("Label", { hidden: label === null })}>
-            {valueView(0)}
-          </div>
-          <div className={cx("Point")}>{thumbChildren?.[0]}</div>
-          <div
-            className={cx("Label", { hidden: label === null })}
-            style={{ visibility: "hidden" }}
-          >
-            {valueView(0)}
-          </div>
-        </div>
-        <div
-          className={cx("Thumb", "DualThumb2", {
-            isDragging: isDragging === 1,
-            labelAlwaysOn,
-          })}
-        >
-          <div className={cx("Label", { hidden: label === null })}>
-            {valueView(1)}
-          </div>
-          <div className={cx("Point")}>{thumbChildren?.[1]}</div>
-          <div
-            className={cx("Label", { hidden: label === null })}
-            style={{ visibility: "hidden" }}
-          >
-            {valueView(1)}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-interface ISlider {
-  Single: typeof Single;
-  Dual: typeof Dual;
-}
-
-export default {
-  Single,
-  Dual,
-} as ISlider;

package/src/components/Slider/Slider.context.tsx

@@ -1,67 +0,0 @@
-import React from "react";
-
-type SliderContextType = {
-  readOnly?: boolean;
-  disabled?: boolean;
-  invert?: boolean;
-  min?: number;
-  max?: number;
-  step?: number;
-  labelAlwaysOn?: boolean;
-  marks?: { value: number; label: string | number | React.ReactNode }[];
-  markActiveEffect?: boolean;
-  defaultValue?: number[];
-  scale?: (value: number) => number;
-  label?: ((value: number) => string) | null;
-  onChange?: (e: {
-    value: number;
-    idx: number;
-    min: number;
-    max: number;
-    step: number;
-    defaultSetChangeHandler: (curr: number[]) => number[];
-  }) => void;
-
-  // private state
-  progressRef?: React.RefObject<HTMLDivElement | null>;
-  draggingIndex?: number;
-  setDefaultValue?: React.Dispatch<React.SetStateAction<number[]>>;
-  setDraggingIndex?: React.Dispatch<React.SetStateAction<number | undefined>>;
-};
-
-const initialState: SliderContextType = {
-  readOnly: false,
-  disabled: false,
-  invert: false,
-  min: 0,
-  max: 100,
-  step: 10,
-  labelAlwaysOn: false,
-  markActiveEffect: true,
-  defaultValue: [10],
-  scale: (v) => v,
-};
-
-export const SliderContext =
-  React.createContext<SliderContextType>(initialState);
-
-export type SliderProviderProps = React.PropsWithChildren<
-  SliderContextType & {
-    className?: string;
-  }
->;
-
-export const SliderProvider = (props: SliderProviderProps) => {
-  const { children } = props;
-
-  return (
-    <SliderContext.Provider
-      value={{
-        ...initialState,
-        ...props,
-      }}
-    >
-      {children}
-    </SliderContext.Provider>
-  );
-};

package/src/components/Slider/Slider.module.scss

@@ -1,123 +0,0 @@
-.Progress {
-  --progress-progress-height: 8px;
-  --progress-value-width: 0;
-  --progress-value-color: "#688DEE";
-
-  width: 100%;
-  height: var(--progress-progress-height);
-  border-radius: 4px;
-  position: relative;
-  background-color: var(--Gray-Gray80, #b1b3b7);
-  cursor: pointer;
-
-  .Mark {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: inherit;
-    display: flex;
-    align-items: center;
-    .Point {
-      width: 4px;
-      height: 4px;
-      border-radius: 50%;
-      background-color: #fff;
-      position: relative;
-      transform: translate(-50%, 0);
-    }
-    .Label {
-      position: absolute;
-      top: 0;
-      left: 0;
-      transform: translate(-50%, 16px);
-      font-size: 14px;
-      color: var(--Gray-Gray80, #b1b3b7);
-      user-select: none;
-      &.active {
-        color: var(--progress-value-color);
-      }
-    }
-  }
-
-  .Value {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: var(--progress-value-width);
-    height: inherit;
-    border-radius: 4px;
-    background-color: var(--progress-value-color);
-  }
-
-  .Thumb {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: grid;
-    place-items: center;
-    gap: 10px;
-
-    .Point {
-      transition: opacity 0.25s ease-in-out;
-      border-radius: 50%;
-      padding: 4px;
-      background-color: #fff;
-      border: 4px solid var(--progress-value-color);
-      display: grid;
-      place-items: center;
-      transition: opacity 0.25s ease-in-out;
-      opacity: 1;
-      position: relative;
-
-      &::before {
-        content: attr(data-value);
-        box-sizing: border-box;
-        padding: 4px;
-        background-color: var(--Gray-Gray10, #121416);
-        color: #fff;
-        border-radius: 4px;
-        font-size: 14px;
-        transition:
-          opacity 0.25s ease-in-out,
-          display 0.25s ease-in-out allow-discrete;
-        opacity: 0;
-        position: absolute;
-        top: -40px;
-        display: none;
-        white-space: nowrap;
-      }
-      &:hover::before {
-        opacity: 1;
-        display: flex;
-      }
-      &.labelAlwaysOn::before {
-        opacity: 1;
-        display: flex;
-      }
-      &.isDragging::before {
-        opacity: 1;
-        display: flex;
-      }
-      &.hidden::before {
-        opacity: 0;
-        display: none;
-      }
-    }
-  }
-
-  &.readOnly {
-    cursor: default;
-  }
-
-  &.disabled {
-    filter: grayscale(1);
-    cursor: not-allowed;
-  }
-
-  &.invert {
-    background-color: var(--progress-value-color);
-    .Value {
-      background-color: var(--Gray-Gray80, #b1b3b7);
-    }
-  }
-}