@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Sheet/README.md

@@ -0,0 +1,92 @@
+# 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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,68 @@
+@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

@@ -0,0 +1,146 @@
+"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;