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

package/src/components/MobilePicker/MobilePicker.context.tsx

@@ -1,22 +0,0 @@
-import React from "react";
-
-export type DefaultContextType = { [key: string]: string };
-
-export type MobilePickerContextType<
-  T extends DefaultContextType = DefaultContextType
-> = {
-  selectedValue: T;
-  itemHeight: number;
-  itemViewCount: number;
-  onChange: React.Dispatch<React.SetStateAction<T>>;
-};
-
-const initialState: MobilePickerContextType = {
-  selectedValue: {},
-  itemHeight: 36,
-  itemViewCount: 5,
-  onChange: () => {},
-};
-
-export const MobilePickerContext =
-  React.createContext<MobilePickerContextType<any>>(initialState);

package/src/components/MobilePicker/MobilePicker.module.scss

@@ -1,57 +0,0 @@
-@layer MobilePicker {
-  @property --item-height {
-    syntax: "<length>";
-    inherits: false;
-    initial-value: 36px;
-  }
-
-  .Root {
-    display: flex;
-    width: 100%;
-    height: auto;
-    position: relative;
-  }
-  .Column {
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    overflow: hidden;
-    position: relative;
-    mask-image: linear-gradient(to top, transparent, transparent 5%, #fff 20%, #fff 80%, transparent 95%, transparent);
-  }
-  .Item {
-    height: var(--item-height);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 14px;
-    font-weight: 500;
-    color: #ccc;
-    flex-shrink: 0;
-    user-select: none;
-
-    &.isSelected {
-      color: #333;
-    }
-  }
-  .ItemWrap {
-    position: absolute;
-    width: 100%;
-    transition: transform 0.2s ease-out;
-
-    &.isDragging {
-      transition: none;
-    }
-  }
-  .Divider {
-    width: 100%;
-    height: var(--item-height);
-    position: absolute;
-    top: 50%;
-    left: 0;
-    transform: translateY(-50%);
-    box-sizing: border-box;
-    border-block: 2px solid #ebebeb;
-    z-index: -1;
-  }
-}

package/src/components/MobilePicker/MobilePicker.tsx

@@ -1,336 +0,0 @@
-import React from "react";
-import styles from "./MobilePicker.module.scss";
-import cn from "classnames/bind";
-import {
-  DefaultContextType,
-  MobilePickerContext,
-} from "./MobilePicker.context";
-
-const cx = cn.bind(styles);
-
-type ItemWrapProps = React.PropsWithChildren<
-  { isDragging: boolean } & React.JSX.IntrinsicElements["div"]
->;
-const ItemWrap = (props: ItemWrapProps) => {
-  const { children, isDragging, ...rest } = props;
-
-  return (
-    <div {...rest} className={cx("ItemWrap", rest.className, { isDragging })}>
-      {children}
-    </div>
-  );
-};
-
-type ItemAsProps = {
-  onClick: () => void;
-  isSelected: boolean;
-  defaultClassName: string;
-  defaultStyle: React.CSSProperties;
-};
-type ItemProps = {
-  as?: (props: ItemAsProps) => React.ReactNode;
-  name: string;
-  value: string;
-} & React.JSX.IntrinsicElements["div"];
-const Item = (props: ItemProps) => {
-  const { as, name, value, ...rest } = props;
-  const { selectedValue, itemHeight, onChange } =
-    React.use(MobilePickerContext);
-
-  const handleClick = () => {
-    onChange((prev: DefaultContextType) => ({
-      ...prev,
-      [name]: value,
-    }));
-  };
-
-  const isSelected = selectedValue[name] === value;
-
-  const defaultClassName = cx("Item", rest.className, { isSelected });
-
-  const defaultStyle = {
-    "--item-height": `${itemHeight}px`,
-    ...rest.style,
-  };
-
-  return as ? (
-    as({
-      onClick: handleClick,
-      isSelected,
-      defaultClassName,
-      defaultStyle,
-    })
-  ) : (
-    <div
-      {...rest}
-      onClick={handleClick}
-      className={defaultClassName}
-      style={defaultStyle}
-    >
-      {value}
-    </div>
-  );
-};
-
-type ColumnAsProps = {
-  onWheel: (e: React.WheelEvent) => void;
-  onTouchStart: (e: React.TouchEvent) => void;
-  onTouchMove: (e: React.TouchEvent) => void;
-  onTouchEnd: (e: React.TouchEvent) => void;
-  defaultClassName: string;
-  defaultStyle: React.CSSProperties;
-  children: React.ReactNode;
-};
-
-type ColumnProps = React.PropsWithChildren<
-  {
-    as?: (props: ColumnAsProps) => React.ReactNode;
-  } & React.JSX.IntrinsicElements["div"]
->;
-
-const Column = (props: ColumnProps) => {
-  const { as, children, ...rest } = props;
-  const { itemHeight, itemViewCount, selectedValue, onChange } =
-    React.use(MobilePickerContext);
-
-  const columnRef = React.useRef<HTMLDivElement>(null);
-
-  const [isDragging, setIsDragging] = React.useState(false);
-  const [startY, setStartY] = React.useState(0);
-  const [offsetY, setOffsetY] = React.useState(0);
-
-  const centerOffset = (itemViewCount / 2 - 0.5) * itemHeight;
-  const childrenArray = React.Children.toArray(children);
-
-  const selectedIndex = childrenArray.findIndex((child) => {
-    if (React.isValidElement<ItemProps>(child)) {
-      const { name, value } = child.props;
-      return selectedValue[name] === value;
-    }
-    return false;
-  });
-
-  const handleDragStart = (e: React.MouseEvent | React.TouchEvent) => {
-    setIsDragging(true);
-    setStartY("touches" in e ? e.touches[0].clientY : e.clientY);
-  };
-
-  const handleDragMove = (e: React.MouseEvent | React.TouchEvent) => {
-    if (!isDragging) return;
-
-    const currentY = "touches" in e ? e.touches[0].clientY : e.clientY;
-    const delta = currentY - startY;
-
-    // 최대 이동 가능한 범위 계산
-    const maxOffset = selectedIndex * itemHeight;
-    const minOffset = -(childrenArray.length - 1 - selectedIndex) * itemHeight;
-
-    // 최대 초과 가능 거리 (아이템 높이의 120%로 제한)
-    const maxOverflow = itemHeight * 1.2;
-    const elasticFactor = 0.2;
-    let boundedDelta = delta;
-
-    if (delta > maxOffset) {
-      const overflow = delta - maxOffset;
-      boundedDelta =
-        maxOffset + Math.min(maxOverflow, overflow * elasticFactor);
-    } else if (delta < minOffset) {
-      const overflow = minOffset - delta;
-      boundedDelta =
-        minOffset - Math.min(maxOverflow, overflow * elasticFactor);
-    }
-
-    setOffsetY(boundedDelta);
-  };
-
-  const handleDragEnd = () => {
-    if (!isDragging) return;
-
-    setIsDragging(false);
-    setOffsetY(0);
-
-    const delta = Math.round(offsetY / itemHeight);
-    const nextIndex = Math.min(
-      Math.max(0, selectedIndex - delta),
-      childrenArray.length - 1
-    );
-
-    const nextChild = childrenArray[nextIndex];
-    if (React.isValidElement<ItemProps>(nextChild)) {
-      const { name, value } = nextChild.props;
-      onChange((prev: DefaultContextType) => ({
-        ...prev,
-        [name]: value,
-      }));
-    }
-  };
-
-  // 컴포넌트 마운트 시 wheel 이벤트 리스너 추가
-  React.useEffect(() => {
-    const handleWheelEvent = (e: WheelEvent | TouchEvent) => {
-      e.preventDefault();
-    };
-
-    const el = columnRef.current;
-    if (el) {
-      el.addEventListener("wheel", handleWheelEvent, { passive: false });
-      el.addEventListener("touchmove", handleWheelEvent, { passive: false });
-    }
-
-    return () => {
-      if (el) {
-        el.removeEventListener("wheel", handleWheelEvent);
-        el.removeEventListener("touchmove", handleWheelEvent);
-      }
-    };
-  }, []);
-
-  const handleWheel = (e: React.WheelEvent) => {
-    e.stopPropagation();
-
-    const direction = e.deltaY > 0 ? 1 : -1;
-    const nextIndex = selectedIndex + direction;
-
-    if (nextIndex >= 0 && nextIndex < childrenArray.length) {
-      const nextChild = childrenArray[nextIndex];
-      if (React.isValidElement<ItemProps>(nextChild)) {
-        const { name, value } = nextChild.props;
-        onChange((prev: DefaultContextType) => ({
-          ...prev,
-          [name]: value,
-        }));
-      }
-    }
-  };
-
-  const defaultClassName = cx("Column", rest.className);
-  const defaultStyle = {
-    height: `${itemHeight * itemViewCount}px`,
-    ...rest.style,
-  };
-
-  return as ? (
-    as({
-      onWheel: handleWheel,
-      onTouchStart: handleDragStart,
-      onTouchMove: handleDragMove,
-      onTouchEnd: handleDragEnd,
-      defaultClassName,
-      defaultStyle,
-      children: (
-        <ItemWrap
-          isDragging={isDragging}
-          style={{
-            transform: `translateY(${
-              centerOffset -
-              selectedIndex * itemHeight +
-              (isDragging ? offsetY : 0)
-            }px)`,
-          }}
-        >
-          {children}
-        </ItemWrap>
-      ),
-    })
-  ) : (
-    <div
-      {...rest}
-      ref={columnRef}
-      className={defaultClassName}
-      style={defaultStyle}
-      onWheel={handleWheel}
-      onTouchStart={handleDragStart}
-      onTouchMove={handleDragMove}
-      onTouchEnd={handleDragEnd}
-    >
-      <ItemWrap
-        isDragging={isDragging}
-        style={{
-          transform: `translateY(${
-            centerOffset -
-            selectedIndex * itemHeight +
-            (isDragging ? offsetY : 0)
-          }px)`,
-        }}
-      >
-        {children}
-      </ItemWrap>
-    </div>
-  );
-};
-
-type RootAsProps = {
-  defaultClassName: string;
-  children: React.ReactNode;
-  divider: React.ReactNode;
-};
-
-type RootProps<T extends DefaultContextType> = React.PropsWithChildren<
-  {
-    selectedValue: T;
-    onChange: React.Dispatch<React.SetStateAction<T>>;
-    itemHeight?: number;
-    itemViewCount?: number;
-    as?: (props: RootAsProps) => React.ReactNode;
-  } & Omit<React.JSX.IntrinsicElements["div"], "onChange">
->;
-
-const Root = <T extends DefaultContextType>(props: RootProps<T>) => {
-  const {
-    children,
-    selectedValue,
-    itemHeight = 36,
-    itemViewCount = 5,
-    onChange,
-    as,
-    ...rest
-  } = props;
-
-  const contextValue = {
-    selectedValue,
-    itemHeight,
-    itemViewCount,
-    onChange,
-  };
-
-  const defaultClassName = cx("Root", rest.className);
-  const divider = (
-    <div
-      className={cx("Divider")}
-      style={{
-        "--item-height": `${itemHeight}px`,
-      }}
-    />
-  );
-
-  return (
-    <MobilePickerContext value={contextValue}>
-      {as ? (
-        as({
-          defaultClassName,
-          children,
-          divider,
-        })
-      ) : (
-        <div {...rest} className={defaultClassName}>
-          {children}
-          {divider}
-        </div>
-      )}
-    </MobilePickerContext>
-  );
-};
-
-interface IMobilePicker {
-  Root: typeof Root;
-  Column: typeof Column;
-  Item: typeof Item;
-}
-
-const MobilePicker = {
-  Root,
-  Column,
-  Item,
-} as IMobilePicker;
-
-export default MobilePicker;

package/src/components/MobilePicker/README.md

@@ -1,159 +0,0 @@
-# MobilePicker UI
-
-## Contents List
-
-1. [Quick Start](#QuickStart)
-2. [Reference](#Reference)
-3. [Example](#Example)
-
-## Quick Start
-
-```tsx
-import { MobilePicker } from "@weing-dev/ui-kit-primitive";
-import React from "react";
-
-const Example = () => {
-  const [selectedValue, setSelectedValue] = React.useState({
-    title: "Mr.",
-    name: "John",
-  });
-
-  const selections = {
-    title: ["Mr.", "Mrs.", "Ms.", "Dr."],
-    name: ["John", "Jane", "Mike"],
-  };
-
-  return (
-    <MobilePicker.Root
-      selectedValue={selectedValue}
-      onChange={setSelectedValue}
-      itemHeight={36}
-      itemViewCount={5}
-    >
-      <MobilePicker.Column>
-        {selections.title.map((title) => (
-          <MobilePicker.Item key={title} name="title" value={title} />
-        ))}
-      </MobilePicker.Column>
-      <MobilePicker.Column>
-        {selections.name.map((name) => (
-          <MobilePicker.Item key={name} name="name" value={name} />
-        ))}
-      </MobilePicker.Column>
-    </MobilePicker.Root>
-  );
-};
-```
-
-## Reference
-
-### Root
-
-`MobilePicker.Root`는 전체 Picker UI를 감싸는 컨테이너 컴포넌트입니다.
-
-| Prop                            |                   Type                    | Required | Default Value |
-| :------------------------------ | :---------------------------------------: | :------: | :-----------: |
-| [selectedValue](#selectedValue) |   `T extends { [key: string]: string }`   |    ✓     |       -       |
-| [onChange](#onChange)           | `React.Dispatch<React.SetStateAction<T>>` |    ✓     |       -       |
-| [itemHeight](#itemHeight)       |                 `number`                  |    -     |      36       |
-| [itemViewCount](#itemViewCount) |                 `number`                  |    -     |       5       |
-| [as](#Root-as)                  | `(props: RootAsProps) => React.ReactNode` |    -     |       -       |
-
-#### selectedValue
-
-현재 선택된 값들을 관리하기 위한 객체입니다. 각 Column의 Item들의 name을 key로, value를 value로 가집니다.
-
-```tsx
-const [selectedValue, setSelectedValue] = React.useState({
-  title: "Mr.",
-  name: "John",
-});
-```
-
-#### onChange
-
-선택된 값이 변경될 때 호출되는 함수입니다.
-
-#### itemHeight
-
-각 Item의 높이를 지정하는 값입니다. 픽셀 단위로 설정됩니다.
-
-#### itemViewCount
-
-한 번에 보여질 Item의 개수입니다. 홀수값을 권장합니다.
-
-#### Root-as
-
-Root 컴포넌트의 렌더링을 커스터마이징하기 위한 prop입니다.
-
-##### RootAsProps
-
-| Prop             |       Type        | Required |
-| :--------------- | :---------------: | :------: |
-| defaultClassName |     `string`      |    ✓     |
-| children         | `React.ReactNode` |    ✓     |
-| divider          | `React.ReactNode` |    ✓     |
-
-### Column
-
-`MobilePicker.Column`은 세로로 배치되는 Item들의 컨테이너입니다.
-
-| Prop                         |                    Type                     | Required | Default Value |
-| :--------------------------- | :-----------------------------------------: | :------: | :-----------: |
-| [children](#Column-children) |              `React.ReactNode`              |    ✓     |       -       |
-| [as](#Column-as)             | `(props: ColumnAsProps) => React.ReactNode` |    -     |       -       |
-
-#### Column-children
-
-Column 내부에 들어갈 Item 컴포넌트들입니다.
-
-#### Column-as
-
-Column 컴포넌트의 렌더링을 커스터마이징하기 위한 prop입니다.
-
-##### ColumnAsProps
-
-| Prop             |              Type               | Required |
-| :--------------- | :-----------------------------: | :------: |
-| onWheel          | `(e: React.WheelEvent) => void` |    ✓     |
-| onTouchStart     | `(e: React.TouchEvent) => void` |    ✓     |
-| onTouchMove      | `(e: React.TouchEvent) => void` |    ✓     |
-| onTouchEnd       | `(e: React.TouchEvent) => void` |    ✓     |
-| defaultClassName |            `string`             |    ✓     |
-| defaultStyle     |      `React.CSSProperties`      |    ✓     |
-| children         |        `React.ReactNode`        |    ✓     |
-
-### Item
-
-`MobilePicker.Item`은 선택 가능한 개별 항목을 나타냅니다.
-
-| Prop            |                   Type                    | Required | Default Value |
-| :-------------- | :---------------------------------------: | :------: | :-----------: |
-| [name](#name)   |                 `string`                  |    ✓     |       -       |
-| [value](#value) |                 `string`                  |    ✓     |       -       |
-| [as](#Item-as)  | `(props: ItemAsProps) => React.ReactNode` |    -     |       -       |
-
-#### name
-
-Item이 속한 Column을 구분하기 위한 식별자입니다.
-
-#### value
-
-Item의 실제 값입니다.
-
-#### Item-as
-
-Item 컴포넌트의 렌더링을 커스터마이징하기 위한 prop입니다.
-
-##### ItemAsProps
-
-| Prop             |         Type          | Required |
-| :--------------- | :-------------------: | :------: |
-| onClick          |     `() => void`      |    ✓     |
-| isSelected       |       `boolean`       |    ✓     |
-| defaultClassName |       `string`        |    ✓     |
-| defaultStyle     | `React.CSSProperties` |    ✓     |
-
-## Example
-
-프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/mobile-picker)에서 확인할 수 있습니다.

package/src/components/Modal/Modal.tsx

@@ -1,77 +0,0 @@
-"use client";
-import React from "react";
-import ReactDOM from "react-dom";
-
-type DimmedProps = React.PropsWithChildren<{
-  dimmedColor: "transparent" | "light" | "dark";
-  onClose?: () => void;
-}>;
-
-const Dimmed = (props: DimmedProps) => {
-  const { children, dimmedColor, onClose } = props;
-
-  const backgroundColor = {
-    transparent: "transparent",
-    light: "#00000033",
-    dark: "#0000007a",
-  };
-
-  return (
-    <div
-      style={{
-        position: "fixed",
-        top: 0,
-        left: 0,
-        width: "100dvw",
-        height: "100dvh",
-        zIndex: 9999,
-        backgroundColor: backgroundColor[dimmedColor],
-      }}
-      onClick={onClose}
-    >
-      {children}
-    </div>
-  );
-};
-
-type ModalProps = React.PropsWithChildren<{
-  visible?: boolean;
-  dimmedColor?: "transparent" | "light" | "dark";
-  selector?: string;
-  onClose?: () => void;
-}>;
-
-const Modal = (props: ModalProps) => {
-  const {
-    children,
-    visible,
-    dimmedColor = "dark",
-    selector = "body",
-    onClose,
-  } = props;
-
-  const [portalElement, setPortalElement] = React.useState<Element | null>(
-    null
-  );
-
-  React.useEffect(() => {
-    setPortalElement(document.querySelector(selector));
-  }, [selector]);
-
-  return (
-    <React.Fragment>
-      {portalElement && visible ? (
-        ReactDOM.createPortal(
-          <Dimmed onClose={onClose} dimmedColor={dimmedColor}>
-            {children}
-          </Dimmed>,
-          portalElement
-        )
-      ) : (
-        <React.Fragment />
-      )}
-    </React.Fragment>
-  );
-};
-
-export default Modal;