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

package/src/components/Sheet/README.md

@@ -1,92 +0,0 @@
-# Sheet UI
-
-바텀시트, 사이드시트 등 슬라이딩 형태의 UI를 구현하기 위한 컴포넌트입니다.
-
-## Contents List
-
-1. [Quick Start](#QuickStart)
-2. [Reference](#Reference)
-3. [Example](#Example)
-
-## Quick Start
-
-```tsx
-import { Sheet } from "@weing-dev/ui-kit-primitive";
-
-const Component = () => {
-  const [open, setOpen] = useState(false);
-
-  return (
-    <Sheet.Root open={open} handleClose={() => setOpen(false)}>
-      <Sheet.Dimmed />
-      <Sheet.Content>
-        <div>Sheet Content</div>
-      </Sheet.Content>
-    </Sheet.Root>
-  );
-};
-```
-
-## Reference
-
-### Root
-
-`Sheet.Root`는 Sheet UI의 Context를 관리하고 기본 설정을 제공합니다.
-
-| Prop              |                                    Type                                    | Required | Default Value |
-| :---------------- | :------------------------------------------------------------------------: | :------: | :-----------: |
-| open              |                                  boolean                                   |    -     |     false     |
-| direction         |                   "top" \| "bottom" \| "left" \| "right"                   |    -     |   "bottom"    |
-| drag              |                                  boolean                                   |    -     |     true      |
-| dragDirectionLock |                                  boolean                                   |    -     |     true      |
-| dragMomentum      |                                  boolean                                   |    -     |     false     |
-| dragElastic       | number \| { top?: number; bottom?: number; left?: number; right?: number } |    -     |       -       |
-| dragConstraints   |      { top?: number; bottom?: number; left?: number; right?: number }      |    -     |       -       |
-| handleClose       |                                 () => void                                 |    -     |       -       |
-
-#### open
-
-Sheet의 열림/닫힘 상태를 제어합니다.
-
-#### direction
-
-Sheet가 나타나는 방향을 설정합니다.
-
-- `"bottom"`: 하단에서 위로 (기본값)
-- `"top"`: 상단에서 아래로
-- `"left"`: 좌측에서 우측으로
-- `"right"`: 우측에서 좌측으로
-
-#### drag
-
-드래그 기능의 활성화 여부를 설정합니다.
-
-#### dragDirectionLock
-
-드래그 방향을 direction 값에 따라 고정할지 설정합니다.
-
-#### dragMomentum
-
-드래그 후 관성 효과를 적용할지 설정합니다.
-
-### Content
-
-`Sheet.Content`는 Sheet의 내용을 담는 컨테이너입니다.
-
-```tsx
-<Sheet.Content>
-  <div>Sheet Content</div>
-</Sheet.Content>
-```
-
-### Dimmed
-
-`Sheet.Dimmed`는 Sheet가 열렸을 때 배경을 어둡게 처리하는 오버레이입니다.
-
-```tsx
-<Sheet.Dimmed />
-```
-
-## Example
-
-프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/sheet)에서 확인할 수 있습니다.

package/src/components/Sheet/Sheet.context.tsx

@@ -1,23 +0,0 @@
-import React from "react";
-
-export type SheetContextType = {
-  drag?: boolean;
-  direction?: "top" | "bottom" | "left" | "right";
-  open?: boolean;
-  dragElastic?:
-    | number
-    | { top?: number; bottom?: number; left?: number; right?: number };
-  dragConstraints?: {
-    top?: number;
-    bottom?: number;
-    left?: number;
-    right?: number;
-  };
-  dragDirectionLock?: boolean;
-  dragMomentum?: boolean;
-  handleClose?: () => void;
-};
-
-const initialState: SheetContextType = {};
-
-export const SheetContext = React.createContext<SheetContextType>(initialState);

package/src/components/Sheet/Sheet.module.scss

@@ -1,68 +0,0 @@
-@layer Sheet {
-  .Dimmed {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100dvw;
-    height: 100dvh;
-    background-color: rgba(0, 0, 0, 0.5);
-    z-index: 998;
-  }
-
-  @property --safe-size {
-    syntax: "<length>";
-    initial-value: 1000px;
-    inherits: false;
-  }
-
-  @property --shadow-color {
-    syntax: "<color>";
-    initial-value: #919eab1f;
-    inherits: false;
-  }
-
-  .Wrapper {
-    position: fixed;
-    z-index: 999;
-    display: none;
-    transition: display 0.25s ease-in-out allow-discrete;
-    background-color: white;
-
-    &.open {
-      display: block;
-    }
-
-    &.top {
-      width: 100vw;
-      box-shadow: 0 40px 40px -4px var(--shadow-color);
-      padding-top: var(--safe-size);
-      top: calc(0% - var(--safe-size));
-      left: 0;
-    }
-
-    &.bottom {
-      width: 100vw;
-      border-radius: 16px 16px 0 0;
-      box-shadow: 0 -40px 40px -4px var(--shadow-color);
-      padding-bottom: var(--safe-size);
-      bottom: calc(0% - var(--safe-size));
-      left: 0;
-    }
-
-    &.left {
-      height: 100vh;
-      box-shadow: 40px 0 40px -4px var(--shadow-color);
-      padding-left: var(--safe-size);
-      top: 0;
-      left: calc(0% - var(--safe-size));
-    }
-
-    &.right {
-      height: 100vh;
-      box-shadow: -40px 0 40px -4px var(--shadow-color);
-      padding-right: var(--safe-size);
-      top: 0;
-      right: calc(0% - var(--safe-size));
-    }
-  }
-}

package/src/components/Sheet/Sheet.tsx

@@ -1,146 +0,0 @@
-"use client";
-import React from "react";
-import { motion, useAnimation, PanInfo, HTMLMotionProps } from "framer-motion";
-import styles from "./Sheet.module.scss";
-import cn from "classnames/bind";
-import { SheetContext, SheetContextType } from "./Sheet.context";
-
-const cx = cn.bind(styles);
-
-const Dimmed = () => {
-  const { open, handleClose } = React.use(SheetContext);
-  if (!open) return null;
-  return <div className={cx("Dimmed")} onClick={handleClose} />;
-};
-
-type SheetContentProps = React.PropsWithChildren<HTMLMotionProps<"div">>;
-
-const Content = (props: SheetContentProps) => {
-  const { children, ...rest } = props;
-  const {
-    open,
-    dragElastic,
-    dragConstraints,
-    drag = true,
-    direction = "bottom",
-    dragDirectionLock = true,
-    dragMomentum = false,
-    handleClose,
-  } = React.use(SheetContext);
-  const controls = useAnimation();
-  const bottomSheetRef = React.useRef<HTMLDivElement>(null);
-  const [innerHeight, setInnerHeight] = React.useState<number>(0);
-
-  React.useEffect(() => {
-    if (window == undefined) return;
-    setInnerHeight(window.innerHeight);
-  }, []);
-
-  const DIRECTION_CONFIG = {
-    bottom: {
-      initial: { y: "100%", x: 0 },
-      animate: { y: open ? 0 : "100%" },
-      drag: "y" as const,
-      dragElastic: { top: 0.05, bottom: 1 },
-      dragConstraints: { top: 0, bottom: innerHeight },
-      shouldClose: (info: PanInfo) => info.offset.y > 20,
-    },
-    top: {
-      initial: { y: "-100%", x: 0 },
-      animate: { y: open ? 0 : "-100%" },
-      drag: "y" as const,
-      dragElastic: { top: 1, bottom: 0.05 },
-      dragConstraints: { bottom: 0 },
-      shouldClose: (info: PanInfo) => info.offset.y < -20,
-    },
-    left: {
-      initial: { x: "-100%", y: 0 },
-      animate: { x: open ? 0 : "-100%" },
-      drag: "x" as const,
-      dragElastic: { left: 1, right: 0.05 },
-      dragConstraints: { right: 0 },
-      shouldClose: (info: PanInfo) => info.offset.x < -20,
-    },
-    right: {
-      initial: { x: "100%", y: 0 },
-      animate: { x: open ? 0 : "100%" },
-      drag: "x" as const,
-      dragElastic: { left: 0.05, right: 1 },
-      dragConstraints: { left: 0 },
-      shouldClose: (info: PanInfo) => info.offset.x > 20,
-    },
-  };
-
-  const config = DIRECTION_CONFIG[direction];
-  const options = {
-    ...config,
-    dragDirectionLock,
-    dragMomentum,
-    drag: drag && config.drag,
-    dragElastic: dragElastic ?? config.dragElastic,
-    dragConstraints: dragConstraints ?? config.dragConstraints,
-    animate: {
-      ...config.animate,
-      transition: {
-        type: "tween",
-        duration: 0.25,
-        ease: "easeInOut",
-      },
-    },
-  };
-
-  const onDragEnd = React.useCallback(
-    (_: PointerEvent, info: PanInfo) => {
-      if (config.shouldClose(info)) handleClose?.();
-      else controls.start("visible");
-    },
-    [controls, config, handleClose]
-  );
-
-  return (
-    <motion.div
-      {...rest}
-      {...options}
-      ref={bottomSheetRef}
-      className={cx("Wrapper", rest.className, direction, { open })}
-      onDragEnd={onDragEnd}
-    >
-      {children}
-    </motion.div>
-  );
-};
-
-type SheetRootProps = React.PropsWithChildren<SheetContextType>;
-
-const Root = (props: SheetRootProps) => {
-  const { children, ...rest } = props;
-
-  const contextValue = {
-    ...rest,
-  };
-
-  React.useEffect(() => {
-    document.body.style.overflow = rest.open ? "hidden" : "";
-    return () => {
-      document.body.style.overflow = "";
-    };
-  }, [rest.open]);
-
-  return <SheetContext value={contextValue}>{children}</SheetContext>;
-};
-
-interface ISheet {
-  Root: typeof Root;
-  Content: typeof Content;
-  Dimmed: typeof Dimmed;
-}
-
-const Sheet = {
-  Root,
-  Content,
-  Dimmed,
-} as ISheet;
-
-export type { SheetRootProps };
-
-export default Sheet;