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

package/src/components/Popup/Popup.tsx

@@ -1,116 +0,0 @@
-import React from "react";
-import { PopupContext, PopupContextType } from "./Popup.context";
-import styles from "./Popup.module.scss";
-import cn from "classnames/bind";
-
-const cx = cn.bind(styles);
-
-const usePopup = () => {
-  const id = React.useId();
-  const ref = React.useRef<HTMLDivElement>(null);
-
-  const createAttr = (
-    action: React.JSX.IntrinsicElements["div"]["popoverTargetAction"]
-  ) =>
-    ({
-      popoverTargetAction: action,
-      popoverTarget: id,
-    } as const);
-
-  const controlAttr = {
-    hide: createAttr("hide"),
-    toggle: createAttr("toggle"),
-    show: createAttr("show"),
-  };
-
-  const show = React.useCallback(() => ref.current?.showPopover(), []);
-  const hide = React.useCallback(() => ref.current?.hidePopover(), []);
-  const toggle = React.useCallback(() => ref.current?.togglePopover(), []);
-
-  return { id, controlAttr, ref, show, hide, toggle };
-};
-
-type PopupDimmedProps = React.JSX.IntrinsicElements["button"];
-const Dimmed = (props: PopupDimmedProps) => {
-  const { onClick, ...rest } = props;
-  const { id, dimmedDisabled } = React.useContext(PopupContext);
-
-  return (
-    <button
-      {...rest}
-      className={cx("Dimmed", rest.className)}
-      {...(!dimmedDisabled && {
-        onClick,
-        popoverTargetAction: "hide",
-        popoverTarget: id,
-      })}
-    />
-  );
-};
-
-type PopupContentsProps = React.PropsWithChildren<
-  React.JSX.IntrinsicElements["div"]
->;
-const Contents = (props: PopupContentsProps) => {
-  const { children, ...rest } = props;
-
-  return (
-    <div {...rest} className={cx("Contents", rest.className)}>
-      {children}
-    </div>
-  );
-};
-
-type PopupLayerProps = React.PropsWithChildren<
-  Omit<React.JSX.IntrinsicElements["div"], "id" | "popover">
->;
-const Layer = (props: PopupLayerProps) => {
-  const { children, ...rest } = props;
-
-  const { id, bodyScroll } = React.useContext(PopupContext);
-
-  return (
-    <div
-      {...rest}
-      id={id}
-      popover="manual"
-      className={cx("Layer", rest.className, {
-        bodyScroll,
-      })}
-    >
-      {children}
-    </div>
-  );
-};
-
-type PopupRootProps = React.PropsWithChildren<PopupContextType>;
-const Root = (props: PopupRootProps) => {
-  const { children, dimmedDisabled = false, ...rest } = props;
-
-  const contextValue = {
-    ...rest,
-    dimmedDisabled,
-  };
-
-  return <PopupContext value={contextValue}>{children}</PopupContext>;
-};
-
-interface IPopup {
-  Root: typeof Root;
-  Layer: typeof Layer;
-  Dimmed: typeof Dimmed;
-  Contents: typeof Contents;
-  usePopup: typeof usePopup;
-}
-
-const Popup = {
-  Root,
-  Layer,
-  Dimmed,
-  Contents,
-  usePopup,
-} as IPopup;
-
-export type { PopupRootProps };
-
-export default Popup;

package/src/components/Popup/README.md

@@ -1,170 +0,0 @@
-# Popup UI
-
-팝업 오버레이를 구현하기 위한 컴포넌트입니다.
-
-## Contents List
-
-1. [Quick Start](#QuickStart)
-2. [Reference](#Reference)
-3. [Example](#Example)
-
-## Quick Start
-
-```tsx
-import { Popup } from "@weing-dev/ui-kit-primitive";
-
-const Component = () => {
-  const { id, controlAttr } = Popup.usePopup();
-
-  return (
-    <Popup.Root id={id}>
-      <Button.Root {...controlAttr.toggle}>
-        <Button.Text>열기</Button.Text>
-      </Button.Root>
-      <Popup.Layer>
-        <Popup.Dimmed />
-        <Popup.Contents>
-          <div>팝업 내용</div>
-          <Button.Root {...controlAttr.hide}>
-            <Button.Text>확인</Button.Text>
-          </Button.Root>
-        </Popup.Contents>
-      </Popup.Layer>
-    </Popup.Root>
-  );
-};
-```
-
-## Reference
-
-### Root
-
-`Popup.Root`는 Popup UI의 Context를 관리하고 기본 설정을 제공합니다. 팝업의 최상위 컴포넌트로, 팝업의 동작과 관련된 설정을 제어합니다.
-
-| Prop           | Type    | Required | Default Value | Description                            |
-| :------------- | :------ | :------: | :-----------: | :------------------------------------- |
-| id             | string  |    ✓     |       -       | 팝업의 고유 식별자                     |
-| bodyScroll     | boolean |    -     |     false     | 팝업 오픈 시 body 스크롤 허용 여부     |
-| dimmedDisabled | boolean |    -     |     false     | Dimmed 영역 클릭 시 팝업 닫기 비활성화 |
-
-#### id
-
-팝업의 고유 식별자입니다. usePopup 훅에서 반환되는 id를 사용해야 합니다.
-
-```tsx
-const { id } = Popup.usePopup();
-<Popup.Root id={id}>{/* id는 팝업 제어를 위해 필수입니다 */}</Popup.Root>;
-```
-
-#### bodyScroll
-
-팝업이 열렸을 때 body의 스크롤을 허용할지 설정합니다. 기본값은 `false`로, 팝업이 열리면 body 스크롤이 잠깁니다.
-
-```tsx
-<Popup.Root bodyScroll={true}>
-  {/* 팝업이 열려도 body 스크롤이 가능합니다 */}
-</Popup.Root>
-```
-
-#### dimmedDisabled
-
-Dimmed 영역 클릭 시 팝업 닫기 기능을 비활성화합니다. 기본값은 `false`입니다.
-
-```tsx
-<Popup.Root dimmedDisabled={true}>
-  {/* Dimmed 영역을 클릭해도 팝업이 닫히지 않습니다 */}
-</Popup.Root>
-```
-
-### usePopup
-
-팝업을 제어하기 위한 커스텀 훅입니다. 팝업의 상태 관리와 제어에 필요한 값들을 제공합니다.
-
-```tsx
-const { id, controlAttr, ref, show, hide, toggle } = Popup.usePopup();
-```
-
-#### 반환값 상세 설명
-
-- `id`: 팝업의 고유 식별자. 여러 팝업을 사용할 때 각각을 구분하기 위해 사용됩니다.
-- `controlAttr`: 팝업 제어를 위한 속성 객체
-  - `hide`: 팝업을 닫기 위한 속성
-  - `show`: 팝업을 열기 위한 속성
-  - `toggle`: 팝업을 토글하기 위한 속성
-  ```tsx
-  <Button.Root {...controlAttr.toggle}>
-    <Button.Text>팝업 토글</Button.Text>
-  </Button.Root>
-  ```
-- `ref`: 팝업 레이어의 참조. 프로그래매틱 제어 시 필요합니다.
-- `show`: 프로그래매틱하게 팝업을 여는 함수
-- `hide`: 프로그래매틱하게 팝업을 닫는 함수
-- `toggle`: 프로그래매틱하게 팝업을 토글하는 함수
-  ```tsx
-  // 프로그래매틱 제어 예시
-  const handleClick = () => {
-    if (condition) {
-      show();
-    } else {
-      hide();
-    }
-  };
-  ```
-
-### Layer
-
-`Popup.Layer`는 팝업의 컨테이너 역할을 하는 컴포넌트입니다. 팝업의 위치와 레이어 관리를 담당합니다.
-모든 div 요소의 HTML 속성을 지원합니다.
-
-```tsx
-<Popup.Layer
-  ref={ref}
-  className="custom-layer"
-  style={{ padding: "20px" }}
-  data-testid="popup-layer"
->
-  <Popup.Dimmed />
-  <Popup.Contents>{children}</Popup.Contents>
-</Popup.Layer>
-```
-
-### Contents
-
-`Popup.Contents`는 팝업의 실제 내용을 담는 컨테이너입니다. 스타일링과 레이아웃을 관리합니다.
-모든 div 요소의 HTML 속성을 지원합니다.
-
-```tsx
-<Popup.Contents
-  className="custom-contents"
-  style={{ maxWidth: "500px" }}
-  onClick={handleContentClick}
-  data-testid="popup-contents"
->
-  <div>팝업 제목</div>
-  <div>팝업 내용</div>
-  <div>
-    <Button.Root {...controlAttr.hide}>
-      <Button.Text>닫기</Button.Text>
-    </Button.Root>
-  </div>
-</Popup.Contents>
-```
-
-### Dimmed
-
-`Popup.Dimmed`는 팝업이 열렸을 때 배경을 어둡게 처리하는 오버레이 컴포넌트입니다.
-팝업의 포커스를 강조하고, 클릭 시 팝업을 닫는 기능을 제공합니다.
-모든 button 요소의 HTML 속성을 지원합니다.
-
-```tsx
-<Popup.Dimmed
-  onClick={handleClose} // 커스텀 닫기 핸들러
-  className="custom-dimmed" // 커스텀 스타일
-  style={{ backgroundColor: "rgba(0, 0, 0, 0.7)" }}
-  data-testid="popup-dimmed"
-/>
-```
-
-## Example
-
-더 많은 예시는 프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/popup)에서 확인할 수 있습니다.

package/src/components/QRCode/QRCode.module.scss

@@ -1,2 +0,0 @@
-.Wrapper {
-}

package/src/components/QRCode/QRCode.tsx

@@ -1,61 +0,0 @@
-import React, { useImperativeHandle } from "react";
-import styles from "./QRCode.module.scss";
-import cn from "classnames/bind";
-import { QRCodeCanvas } from "qrcode.react";
-
-const cx = cn.bind(styles);
-
-type QRCodeProps = {
-  link: string;
-  className?: string;
-  ref?: React.Ref<QRCodeRef>;
-};
-
-export type QRCodeRef = {
-  copy: () => Promise<void>;
-};
-
-const QRCode = (props: QRCodeProps) => {
-  const { link, className, ref } = props;
-
-  const _qr = React.useRef<HTMLDivElement>(null);
-
-  const handleCopy = React.useCallback(async () => {
-    try {
-      const canvas = _qr.current?.querySelector("canvas");
-      if (!canvas) return;
-
-      canvas.toBlob(async (blob) => {
-        if (!blob) {
-          return;
-        }
-
-        // 클립보드에 이미지 쓰기
-        const item = new ClipboardItem({ "image/png": blob });
-        await navigator.clipboard.write([item]);
-      }, "image/png");
-    } catch (error) {
-      console.error("복사 실패:", error);
-    }
-  }, [_qr]);
-
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        copy: handleCopy,
-      };
-    },
-    [handleCopy]
-  );
-
-  return (
-    <div className={cx("Wrapper", className)}>
-      <div ref={_qr}>
-        <QRCodeCanvas value={link} size={256} />
-      </div>
-    </div>
-  );
-};
-
-export default QRCode;

package/src/components/ScrollCalendar/ScrollCalendar.context.tsx

@@ -1,26 +0,0 @@
-import React from "react";
-
-interface ScrollCalendarContextType {
-  isDragging: boolean;
-  hasMoved: boolean;
-  startX: number;
-  setIsDragging: (isDragging: boolean) => void;
-  setHasMoved: (hasMoved: boolean) => void;
-  setStartX: (startX: number) => void;
-  columnWidth?: number;
-  bodyRef?: React.RefObject<HTMLDivElement | null>;
-  columnWrapRef?: React.RefObject<HTMLDivElement | null>;
-}
-
-const initialState = {
-  columnWidth: 48,
-  isDragging: false,
-  hasMoved: false,
-  startX: 0,
-  setIsDragging: () => {},
-  setHasMoved: () => {},
-  setStartX: () => {},
-};
-
-export const ScrollCalendarContext =
-  React.createContext<ScrollCalendarContextType>(initialState);

package/src/components/ScrollCalendar/ScrollCalendar.module.scss

@@ -1,42 +0,0 @@
-@layer ScrollCalendar {
-  .Body {
-    width: 100%;
-    height: auto;
-    overflow: hidden;
-    display: flex;
-
-    &::-webkit-scrollbar {
-      display: none;
-    }
-
-    .ColumnWrap {
-      display: flex;
-    }
-  }
-
-  .Column {
-    display: none;
-    flex-direction: column;
-    align-items: center;
-    flex-shrink: 0;
-    color: #637381;
-    font-weight: 400;
-    font-size: 14px;
-
-    &.visible {
-      display: flex;
-    }
-
-    &.selected {
-      color: #00a76f;
-    }
-
-    .Date {
-      line-height: 24px;
-    }
-
-    .Text {
-      line-height: 24px;
-    }
-  }
-}