@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Badge/README.md

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

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

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

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