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

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;

package/src/components/Breadcrumb/README.md

@@ -1,339 +0,0 @@
-# Breadcrumb UI
-
-## Contents List
-
-1. [Quick Start](#QuickStart)
-2. [Reference](#Reference)
-3. [Example](#Example)
-
-## Quick Start
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Breadcrumb.List>
-      <Breadcrumb.Item>A</Breadcrumb.Item>
-      <Breadcrumb.Separator />
-      <Breadcrumb.Item>B</Breadcrumb.Item>
-      <Breadcrumb.Separator />
-      <Breadcrumb.Item>C</Breadcrumb.Item>
-    </Breadcrumb.List>
-  );
-};
-```
-
-## Reference
-
-### List
-
-`Breadcrumb.List`는 Breadcrumb ui를 효과적으로 보여주기 위해 스타일링이 적용된 `component`입니다.
-
-스타일을 제외한 기능은 없기에 `일반 태그`나 `component`로 대체가 가능합니다.
-
-| Prop                         |        Type        | Required | Default Value |
-| :--------------------------- | :----------------: | :------: | :-----------: |
-| [separator](#List-separator) | React.ReactElement |    -     |       -       |
-| [className](#List-className) |       String       |    -     |       -       |
-| [children](#List-children)   |  React.ReactNode   |    -     |       -       |
-
-#### List-separator
-
-`Breadcrumb.List`에 `separator`를 전달하기 위한 `props`입니다.
-
-`separator`로 적용하고자 하는 `component`를 `props`로 전달해주면 `Breadcrumb.List`내부 요소들의 사이에 `separator`가 적용됩니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Breadcrumb.List separator={<Breadcrumb.Separator />}>
-      <!-- ... -->
-    </Breadcrumb.List>
-  );
-}
-```
-
-#### List-className
-
-`Breadcrumb.List`에 `className` class를 전달하기 위한 `props`입니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Breadcrumb.List className="BreadcrumbList">
-      <!-- ... -->
-    </Breadcrumb.List>
-  );
-}
-```
-
-#### List-children
-
-`Breadcrumb.List`에 `children`을 전달하기 위한 `props`입니다.
-
-`children`으로는 `Breadcrumb.Item` `Breadcrumb.Seperate` `Breadcrumb.Ellipsis`가 들어갑니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Breadcrumb.List className="BreadcrumbList">
-      <Breadcrumb.Item>A</Breadcrumb.Item>
-      <Breadcrumb.Separator />
-      <Breadcrumb.Item>B</Breadcrumb.Item>
-      <Breadcrumb.Separator />
-      <Breadcrumb.Item>C</Breadcrumb.Item>
-    </Breadcrumb.List>
-  );
-};
-```
-
-### Link
-
-`Breadcrumb.Link`은 Breadcrumb의 `경로 Text`를 보여주기 위해 스타일링이 적용된 `component`입니다.
-
-| Prop                         |                       Type                       | Required | Default Value |
-| :--------------------------- | :----------------------------------------------: | :------: | :-----------: |
-| [href](#href)                |                      String                      |    -     |       -       |
-| [focused](#focused)          |                     Boolean                      |    -     |     false     |
-| [as](#as)                    |  (props: [AsProps](#AsProps))=>React.ReactNode   |    -     |       -       |
-| [onClick](#onClick)          | (e: React.MouseEvent<HTMLAnchorElement>) => void |    -     |       -       |
-| [className](#Link-className) |                      String                      |    -     |       -       |
-| [children](#Link-children)   |                 React.ReactNode                  |    -     |       -       |
-
-#### href
-
-`Breadcrumb.Link`에 `href`를 전달함과 동시에 기능을 활성화하기 위해 사용됩니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Breadcrumb.List className="BreadcrumbList">
-      <Breadcrumb.Link href="/users/dropdown">Dropdown</Breadcrumb.Link>
-      <!-- ... -->
-    </Breadcrumb.List>
-  );
-}
-```
-
-#### focused
-
-`Breadcrumb.Link`에 `focused`을 전달하기 위한 `props`입니다.
-
-`focused`가 활성화되면 `link`기능이 무효화되고 폰트 색상이 변경됩니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  const [open, setOpen] = React.useState<boolean>(false);
-
-  return (
-    <Breadcrumb.List className="BreadcrumbList">
-      <!-- ... -->
-      <Breadcrumb.Link focused>A</Breadcrumb.Link>
-    </Breadcrumb.List>
-  );
-};
-```
-
-`🔔Tip: <Breadcrumb.List> 내에서 가장 마지막의 <Breadcrumb.Link>에 사용하는걸 권장합니다.`
-
-#### as
-
-`Breadcrumb.Link`에 ui와 기능을 변경을 위해 제공되는 `props`입니다.
-
-`as`는 `props`로 받는 파라미터의 타입은 아래와 같습니다.
-
-##### AsProps
-
-| Prop                         |                       Type                       | Required | Default Value |
-| :--------------------------- | :----------------------------------------------: | :------: | :-----------: |
-| [href](#href)                |                      String                      |    -     |       -       |
-| [focused](#focused)          |                     Boolean                      |    -     |     false     |
-| [onClick](#onClick)          | (e: React.MouseEvent<HTMLAnchorElement>) => void |    -     |       -       |
-| [className](#Link-className) |                      String                      |    -     |       -       |
-
-전달받은 `props`를 통해 `<Breadcrumb.Link>`기본 `props`들을 커스텀하고자 하는 `Element`에 부여할 수 있습니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-import Link from 'next/link';
-
-const components = () => {
-  const [open, setOpen] = React.useState<boolean>(false);
-
-  return (
-    <Breadcrumb.List className="BreadcrumbList">
-      <!-- ... -->
-      <Breadcrumb.Link as={(props) =>
-        <Link {...props}>go home</Link>}
-      />
-    </Breadcrumb.List>
-  );
-};
-```
-
-#### onClick
-
-`Breadcrumb.Link`에 `onClick`이벤트를 전달하기 위한 `props`입니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  const [open, setOpen] = React.useState<boolean>(false);
-
-  return (
-    <Breadcrumb.List className="BreadcrumbList">
-      <!-- ... -->
-      <Breadcrumb.Link onClick={() =>
-        alert("click!!")
-      }>
-        A
-      </Breadcrumb.Link>
-    </Breadcrumb.List>
-  );
-};
-```
-
-`🔔Tip: <Breadcrumb.List> 내에서 가장 마지막의 <Breadcrumb.Link>에 사용하는걸 권장합니다.`
-
-#### Link-className
-
-`Breadcrumb.Link`에 `className` class를 전달하기 위한 `props`입니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Breadcrumb.List>
-      <Breadcrumb.Link className="BreadcrumbItem">A</Breadcrumb.Link>
-      <!-- ... -->
-    </Breadcrumb.List>
-  );
-}
-```
-
-#### Link-children
-
-`Breadcrumb.Link`에 `children`을 전달하기 위한 `props`입니다.
-
-보여주고자 하는 아이템의 `Text`를 전달하면 `Link`의 기본 ui를 사용할 수 있습니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Breadcrumb.List>
-      <Breadcrumb.Link>A</Breadcrumb.Link>
-      <!-- ... -->
-    </Breadcrumb.List>
-  );
-};
-```
-
-### Separator
-
-`Breadcrumb.Separator`은 Breadcrumb의 `Item`사이에 상하관계를 보여주기 위해 존재합니다.
-
-| Prop                              |  Type  | Required | Default Value |
-| :-------------------------------- | :----: | :------: | :-----------: |
-| [className](#Separator-className) | String |    -     |       -       |
-
-#### Separator-className
-
-`Breadcrumb.Separator`에 `className` class를 전달하기 위한 `props`입니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Breadcrumb.List>
-      <Breadcrumb.Item>A</Breadcrumb.Item>
-      <Breadcrumb.Seperator className="BreadcrumbSeperator">
-      <Breadcrumb.Item>A</Breadcrumb.Item>
-      <!-- ... -->
-    </Breadcrumb.List>
-  );
-}
-```
-
-### Ellipsis
-
-`Breadcrumb.Ellipsis`은 Breadcrumb의 목록이 길어졌을때 표시하기 위한 축소 아이콘입니다.
-
-| Prop                             |  Type  | Required | Default Value |
-| :------------------------------- | :----: | :------: | :-----------: |
-| [className](#Ellipsis-className) | String |    -     |       -       |
-
-#### Ellipsis-className
-
-`Breadcrumb.Ellipsis`에 `className` class를 전달하기 위한 `props`입니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Breadcrumb.List>
-      <!-- ... -->
-      <Breadcrumb.Seperator>
-      <Breadcrumb.Ellipsis className="BreadcrumbEllipsis">
-      <Breadcrumb.Seperator>
-      <!-- ... -->
-    </Breadcrumb.List>
-  );
-}
-```
-
-#### Ellipsis-dropdown
-
-`Breadcrumb.Ellipsis`에 `dropdown`을 적용한 예시입니다.
-
-```ts
-import { Breadcrumb } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Dropdown.Root value={dOpen} onChange={handleChangeValue}>
-      <Dropdown.Trigger
-        as={<Breadcrumb.Ellipsis />}
-        className={cx("Trigger")}
-      />
-      <Dropdown.Menu className={cx("Menu")}>
-        {options.map((option, idx) => {
-          return (
-            <a key={idx} href={option.value}>
-              <Dropdown.Item value={option.value} className={cx("Item")}>
-                {option.label}
-              </Dropdown.Item>
-            </a>
-          );
-        })}
-      </Dropdown.Menu>
-    </Dropdown.Root>
-  );
-};
-```
-
-## Example
-
-프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/breadcrumb)에서 확인할 수 있습니다.