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

package/src/components/Badge/README.md

@@ -1,223 +0,0 @@
-# Badge UI
-
-## Contents List
-
-1. [Quick Start](#QuickStart)
-2. [Reference](#Reference)
-3. [Example](#Example)
-
-## Quick Start
-
-```ts
-import { Badge } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Badge>
-      <!-- icon components -->
-    </Badge>
-  );
-};
-```
-
-## Reference
-
-### Badge
-
-`Badge`는 자식 노드의 우측 상단에 작은 뱃지 ui를 보여줍니다.
-
-| Prop                      |                               Type                                | Required | Default Value |
-| :------------------------ | :---------------------------------------------------------------: | :------: | :-----------: |
-| [className](#className)   |                              String                               |    -     |       -       |
-| [children](#children)     |                          React.ReactNode                          |    -     |       -       |
-| [overlap](#overlap)       |                   "square" or "circle" or null                    |    -     |     null      |
-| [dot](#dot)               |                              boolean                              |    -     |     false     |
-| [max](#max)               |                              number                               |    -     |      100      |
-| [badgeColor](#badgeColor) |              React.CSSProperties["backgroundColor"]               |    -     |   "crimson"   |
-| [value](#value)           |                     number or string or null                      |    -     |       0       |
-| [badgeAs](#badgeAs)       | (props: [BadgeRenderProps](#BadgeRenderProps)) => React.ReactNode |    -     |       -       |
-| [rest](#rest)             |                    React <div/> default props                     |    -     |       -       |
-
-#### className
-
-`Badge`에 `className`를 전달하기 위한 `props`입니다.
-
-`Badge`의 가장 바깥 `element`의 `className`이므로 우측 상단의 작은 뱃지를 스타일링 하기 위해서는 다음을 참고하세요.[↗참고](#badgeAs)
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Badge className="BadgeClassName">
-      <!-- ... -->
-    </Badge>
-  );
-}
-```
-
-#### children
-
-`Badge`에 `children`를 전달하기 위한 `props`입니다.
-
-우측 상단의 작은 뱃지가 꾸며줄 대상의 ui를 넣으면 됩니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Badge>
-      <Icon name="Cart" color={"white"} />
-    </Badge>
-  );
-};
-```
-
-#### overlap
-
-`Badge`에 `overlap`를 전달하기 위한 `props`입니다. 기본값은 `null`입니다.
-
-`Badge`의 뒷 배경의 모양을 결정합니다. `null`일 경우 뒷배경을 표시하지 않으며 그 외에는`square | circle`의 형태를 가집니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Badge overlap="circle">
-      <!-- ... -->
-    </Badge>
-  );
-}
-```
-
-#### dot
-
-`Badge`에 `dot`를 전달하기 위한 `props`입니다. 기본값은 `false`입니다.
-
-`true`로 지정시 우측 상단의 작은 뱃지가 `점`으로 표시됩니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Badge dot>
-      <!-- ... -->
-    </Badge>
-  );
-}
-```
-
-#### max
-
-`Badge`에 `max`를 전달하기 위한 `props`입니다. 기본값은 `100` 입니다.
-
-`max`를 초과하는 `value`가 입력될 시 `max`보다 `-1`된 값에다가 `"+"`문자를 붙여서 작은뱃지에 표시해줍니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Badge max={100}>
-      <!-- ... -->
-    </Badge>
-  );
-}
-```
-
-#### badgeColor
-
-`Badge`에 `badgeColor`를 전달하기 위한 `props`입니다. 기본 값은 `"crimson"`입니다.
-
-우측 상단에 표시되는 작은 뱃지의 배경색을 가집니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Badge badgeColor="black">
-      <!-- ... -->
-    </Badge>
-  );
-}
-```
-
-#### value
-
-`Badge`에 `value`를 전달하기 위한 `props`입니다. 기본값은 `0`입니다.
-
-작은 뱃지에 표시되는 값입니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Badge value={1000}>
-      <!-- ... -->
-    </Badge>
-  );
-}
-```
-
-#### badgeAs
-
-`Badge`에 `badgeAs`를 전달하기 위한 `props`입니다.
-
-작은 뱃지를 커스텀 하기 위해 사용되는 `render props` `function`입니다.
-
-아래는 받을 수 있는 `props`의 타입입니다.
-
-##### BadgeRenderProps
-
-```
-{
-  dot?: boolean;
-  max?: number;
-  badgeColor?: React.CSSProperties["backgroundColor"];
-  value?: number | null;
-  defaultClassName?: string;
-}
-```
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Badge
-      className="BadgeClassName"
-      badgeAs={({ defaultClassName, value }) => {
-          return (
-            <div
-              className={cx(defaultClassName)}
-            >
-              {value}
-            </div>
-          );
-        }}
-    >
-      <!-- ... -->
-    </Badge>
-  );
-}
-```
-
-#### rest
-
-`Badge`에 `div element`의 기본 `props`들을 전달할 수 있습니다.
-
-## Example
-
-프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/Badge)에서 확인할 수 있습니다.

package/src/components/BarCode/BarCode.tsx

@@ -1,153 +0,0 @@
-import React, { useImperativeHandle } from "react";
-import Barcode from "react-barcode";
-import cn from "classnames/bind";
-import styles from "./BarCode.module.scss";
-
-const cx = cn.bind(styles);
-
-export type BarcodeActions = {
-  copy: () => Promise<void>;
-  download: () => void;
-};
-
-type BarCodeProps = {
-  value: string;
-  className?: string;
-  ref?: React.Ref<BarcodeActions>;
-  type?: "EAN13" | "EAN8";
-};
-
-const BarCode = (props: BarCodeProps) => {
-  const { value, className, ref, type = "EAN8" } = props;
-
-  const _barcode = React.useRef<HTMLDivElement>(null);
-
-  const handleCopy = React.useCallback(async () => {
-    try {
-      const element = _barcode.current;
-      if (!element) {
-        alert("바코드를 찾을 수 없습니다.");
-        return;
-      }
-
-      // SVG 요소를 찾기
-      const svg = element.querySelector("svg");
-      if (!svg) {
-        alert("바코드를 찾을 수 없습니다.");
-        return;
-      }
-
-      // SVG를 문자열로 직렬화
-      const serializer = new XMLSerializer();
-      const svgString = serializer.serializeToString(svg);
-
-      // SVG 문자열을 데이터 URL로 변환
-      const svgDataUrl = `data:image/svg+xml;base64,${btoa(svgString)}`;
-
-      // Image 객체 생성 및 로드
-      const img = new Image();
-      img.src = svgDataUrl;
-
-      img.onload = async () => {
-        // Canvas 생성 및 이미지 그리기
-        const canvas = document.createElement("canvas");
-        canvas.width = img.width;
-        canvas.height = img.height;
-        const ctx = canvas.getContext("2d");
-        if (!ctx) {
-          alert("이미지를 처리할 수 없습니다.");
-          return;
-        }
-        ctx.drawImage(img, 0, 0);
-
-        // Canvas를 PNG Blob으로 변환
-        canvas.toBlob(async (blob) => {
-          if (!blob) {
-            alert("이미지를 생성하는 데 실패했습니다.");
-            return;
-          }
-
-          try {
-            // 클립보드에 PNG 이미지 쓰기
-            const clipboardItem = new ClipboardItem({ "image/png": blob });
-            await navigator.clipboard.write([clipboardItem]);
-            alert("바코드 이미지가 클립보드에 복사되었습니다!");
-          } catch (error) {
-            console.error("복사 실패:", error);
-            alert("바코드 복사에 실패했습니다.");
-          }
-        }, "image/png");
-      };
-
-      img.onerror = () => {
-        alert("이미지를 로드하는 데 실패했습니다.");
-      };
-    } catch (error) {
-      console.error("복사 실패:", error);
-      alert("바코드 복사에 실패했습니다.");
-    }
-  }, []);
-
-  const handleDownload = React.useCallback(() => {
-    try {
-      const element = _barcode.current;
-      if (!element) {
-        alert("바코드를 찾을 수 없습니다.");
-        return;
-      }
-
-      // SVG 요소를 Blob으로 변환
-      const svg = element.querySelector("svg");
-      if (!svg) {
-        alert("바코드를 찾을 수 없습니다.");
-        return;
-      }
-
-      const serializer = new XMLSerializer();
-      const svgString = serializer.serializeToString(svg);
-      const blob = new Blob([svgString], { type: "image/svg+xml" });
-      const url = URL.createObjectURL(blob);
-
-      // 다운로드 링크 생성 및 클릭
-      const link = document.createElement("a");
-      link.href = url;
-      link.download = `EAN_${value}.svg`;
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-      URL.revokeObjectURL(url);
-    } catch (error) {
-      console.error("다운로드 실패:", error);
-      alert("바코드 다운로드에 실패했습니다.");
-    }
-  }, [value]);
-
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        copy: handleCopy,
-        download: handleDownload,
-      };
-    },
-    [handleCopy, handleDownload]
-  );
-
-  if (value.length !== 12 && type === "EAN13") {
-    return <div>12자리의 숫자를 입력해주세요.</div>;
-  }
-
-  if (value.length !== 7 && type === "EAN8") {
-    return <div>7자리의 숫자를 입력해주세요.</div>;
-  }
-
-  return (
-    <div className={cx("Wrapper", className)} ref={_barcode}>
-      <div className={cx("CodeContainer")}>
-        <Barcode value={value} format={type} />
-      </div>
-    </div>
-  );
-};
-
-export default BarCode;

package/src/components/Breadcrumb/Breadcrumb.module.scss

@@ -1,36 +0,0 @@
-@layer Breadcrumb {
-  .List {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-  }
-
-  .Link {
-    text-decoration: none;
-    color: var(--textDisabled, #c4cdd5);
-    transition: color 0.25s ease-in-out;
-
-    &.href {
-      &:hover {
-        color: var(--textPrimary, #1c252e);
-      }
-    }
-    &.focused {
-      color: var(--textPrimary, #1c252e);
-    }
-  }
-
-  .Separator {
-    & > path {
-      fill: var(--textDisabled, #c4cdd5);
-    }
-  }
-
-  .Ellipsis {
-    rotate: 90deg;
-
-    & > path {
-      fill: var(--textDisabled, #c4cdd5);
-    }
-  }
-}

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,114 +0,0 @@
-"use client";
-/* eslint-disable react-refresh/only-export-components */
-import React from "react";
-import cn from "classnames/bind";
-import styles from "./Breadcrumb.module.scss";
-import { Icon } from "../Icon/Icon";
-
-const cx = cn.bind(styles);
-
-type EllipsisProps = {
-  className?: string;
-  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-};
-const Ellipsis = (props: EllipsisProps) => {
-  const { className, onClick } = props;
-
-  return (
-    <Icon name="More" className={cx("Ellipsis", className)} onClick={onClick} />
-  );
-};
-
-type SeparatorProps = {
-  className?: string;
-};
-const Separator = (props: SeparatorProps) => {
-  const { className } = props;
-
-  return <Icon name={"GoNext"} className={cx("Separator", className)} />;
-};
-
-type AsProps = {
-  className?: string;
-  href?: string;
-  focused?: boolean;
-  onClick?: (e: React.MouseEvent<HTMLAnchorElement>) => void;
-};
-type LinkProps = React.PropsWithChildren<
-  {
-    as?: (props: AsProps) => React.ReactNode;
-  } & AsProps
->;
-
-const Link = (props: LinkProps) => {
-  const { children, className, href, focused = false, onClick, as } = props;
-
-  const clickHandler = React.useCallback(
-    (e: React.MouseEvent<HTMLAnchorElement>) => {
-      if (!href || focused) {
-        e.preventDefault();
-      }
-      onClick?.(e);
-    },
-    [href, focused, onClick]
-  );
-
-  return as ? (
-    as({
-      className: cx("Link", className, { href, focused }),
-      href,
-      focused,
-      onClick: clickHandler,
-    })
-  ) : (
-    <a
-      {...(href && !focused && { href })}
-      className={cx("Link", className, { href, focused })}
-      onClick={clickHandler}
-    >
-      {children}
-    </a>
-  );
-};
-
-type ListProps = React.PropsWithChildren<{
-  className?: string;
-  separator?: React.ReactElement;
-}>;
-
-const List = (props: ListProps) => {
-  const { children, className, separator } = props;
-
-  // children을 배열로 변환
-  const childrenArray = React.Children.toArray(children);
-
-  // separator를 각 컴포넌트 사이에 삽입
-  const childrenWithSeparator = separator
-    ? childrenArray.flatMap((child, index) =>
-        index < childrenArray.length - 1
-          ? [
-              child,
-              React.cloneElement(separator as React.ReactElement, {
-                key: `separator-${index}`,
-              }),
-            ]
-          : [child]
-      )
-    : childrenArray;
-
-  return <div className={cx("List", className)}>{childrenWithSeparator}</div>;
-};
-
-interface IBreadcrumb {
-  List: typeof List;
-  Link: typeof Link;
-  Separator: typeof Separator;
-  Ellipsis: typeof Ellipsis;
-}
-
-export default {
-  List,
-  Link,
-  Separator,
-  Ellipsis,
-} as IBreadcrumb;