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

package/src/components/Avatar/README.md

@@ -1,333 +0,0 @@
-# Avatar UI
-
-## Contents List
-
-1. [Quick Start](#QuickStart)
-2. [Reference](#Reference)
-3. [Example](#Example)
-
-## Quick Start
-
-```ts
-import { Avatar } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return <Avatar.Item />;
-};
-```
-
-## Reference
-
-### Item
-
-`Badge`는 자식 노드의 우측 상단에 작은 뱃지 ui를 보여줍니다.
-
-| Prop                                       |                                         Type                                         | Required | Default Value |
-| :----------------------------------------- | :----------------------------------------------------------------------------------: | :------: | :-----------: |
-| [className](#item-className)               |                                        String                                        |    -     |       -       |
-| [variant](#item-variant)                   |                          "square" or "rounded" or "circle"                           |    -     |   "circle"    |
-| [nameAbbreviation](#item-nameAbbreviation) |                                       boolean                                        |    -     |     true      |
-| [size](#item-size)                         |                                        number                                        |    -     |      40       |
-| [src](#item-src)                           |                                        string                                        |    -     |       -       |
-| [alt](#item-alt)                           |                                        string                                        |    -     |       -       |
-| [as](#item-as)                             |                   (props: [AsProps](#AsProps)) => React.ReactNode                    |    -     |       -       |
-| [rest](#item-rest)                         | React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> |    -     |       -       |
-
-#### item-className
-
-`Item`에 `className`를 전달하기 위한 `props`입니다.
-
-`Avatar`의 이미지나 텍스트의 스타일을 지정하기 위해서는 다음을 참고하세요[↗참고](#item-as)
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return <Avatar.Item className="AvatarItemClassName" />;
-};
-```
-
-#### item-variant
-
-`Item`에 `variant`를 전달하기 위한 `props`입니다. 기본값은 `"circle"`입니다.
-
-입력 값에 따라서 `Avatar`의 형태가 결정됩니다.
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return <Avatar.Item variant="circle" />;
-};
-```
-
-#### item-nameAbbreviation
-
-`Item`에 `nameAbbreviation`를 전달하기 위한 `props`입니다. 기본값은 `true`입니다.
-
-`true`일 경우에 `alt`에 들어오는 문자열을 `" "`공백을 기준으로 나뉜 문자의 첫글자를 조합해서 출력합니다.
-
-`ex) 홍길동=>홍, 홍길 동=>홍동, Cally Carly Davidson=>CCD`
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return <Avatar.Item nameAbbreviation alt={"홍길동"} />;
-};
-```
-
-#### item-size
-
-`Item`에 `size`를 전달하기 위한 `props`입니다. 기본값은 `40`입니다.
-
-`Avatar`의 크기를 조정합니다.
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return <Avatar.Item size={36} />;
-};
-```
-
-#### item-src
-
-`Item`에 `src`를 전달하기 위한 `props`입니다.
-
-`Avatar`의 보여줄 이미지의 `src`입니다.
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return <Avatar.Item src="/image.webp" />;
-};
-```
-
-#### item-alt
-
-`Item`에 `alt`를 전달하기 위한 `props`입니다.
-
-`Item`의 `image` `src`가 전달되지 않았거나 잘못된 주소여서 오류가 발생할 경우 대체할 `Text`입니다.
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return <Avatar.Item alt={"홍길동"} />;
-};
-```
-
-#### item-as
-
-`Item`에 `as`를 전달하기 위한 `props`입니다.
-
-`as`를 통해 `Avatar`안에 들어갈 요소를 대체할 수 있습니다.
-
-##### AsProps
-
-```
-{
-  isError: boolean;
-  nameAbbreviation: boolean;
-  abbreviateName: (name: string) => string;
-  src?: string;
-  alt?: string;
-  textColor: string;
-  abberviateDefaultClassName: string;
-  imgDefaultClassName: string;
-  onError: (e: React.SyntheticEvent<HTMLImageElement, Event>) => void;
-}
-```
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Avatar.Item
-      as={() => {
-        return <Icon name="Settings" color="white" />;
-      }}
-    />
-  );
-};
-```
-
-#### rest
-
-`Item`에 `img element`의 기본 `props`들을 전달할 수 있습니다.
-
-### Group
-
-`Group`은 자식 노드의 우측 상단에 작은 뱃지 ui를 보여줍니다.
-
-| Prop                                        |                                         Type                                          | Required | Default Value |
-| :------------------------------------------ | :-----------------------------------------------------------------------------------: | :------: | :-----------: |
-| [className](#group-className)               |                                        String                                         |    -     |       -       |
-| [itemClassName](#group-itemClassName)       |                                        String                                         |    -     |       -       |
-| [children](#group-children)                 |                                    React.ReactNode                                    |    -     |       -       |
-| [max](#group-max)                           |                                        number                                         |    -     |       4       |
-| [total](#group-total)                       |                                        number                                         |    -     |       -       |
-| [itemSize](#group-itemSize)                 |                                        number                                         |    -     |       -       |
-| [restCounterProps](#group-restCounterProps) | React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement > |    -     |       -       |
-
-#### group-className
-
-`Group`에 `className`를 전달하기 위한 `props`입니다.
-
-`Group`의 가장 상위 레이아웃의 스타일을 위해 사용됩니다.
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Avatar.Group className="AvatarGroupWrapClassName">
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-    </Avatar.Group>
-  );
-};
-```
-
-#### group-itemClassName
-
-`Group`에 `itemClassName`를 전달하기 위한 `props`입니다.
-
-`Item`을 감싸는 레이아웃의 스타일을 컨트롤하기 위해 사용됩니다.
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Avatar.Group itemClassName="AvatarGroupItemClassName">
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-    </Avatar.Group>
-  );
-};
-```
-
-#### group-children
-
-`Group`에 `children`를 전달하기 위한 `props`입니다.
-
-`Item`을 자식으로서 전달하면 그룹 레이아웃의 형태로 재조정해줍니다.
-
-또한, `Item`의 갯수 혹은 `total`값에 따라 끝에 얼마나 `Avatar`가 더 존재하는지 표시해줍니다.
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Avatar.Group>
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-    </Avatar.Group>
-  );
-};
-```
-
-#### group-max
-
-`Group`에 `max`를 전달하기 위한 `props`입니다. 기본값은 `4` 입니다.
-
-`Item`을 보여줄 최대 갯수를 정할 수 있습니다. 만약 `children`으로 들어오는 `Item`컴포넌트의 갯수가 `max`를 초과할 경우 끝에 `+남은숫자`만큼 표시됩니다.
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Avatar.Group max={3}>
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-    </Avatar.Group>
-  );
-};
-```
-
-#### group-total
-
-`Group`에 `total`를 전달하기 위한 `props`입니다.
-
-`Item`과 `max`갯수에 상관없이 `total`의 값만큼 남은 `Avatar`의 갯수를 표시합니다.
-
-남은 혹은 `total`만큼의 `Avatar`의 갯수는 `Metric prefix`를 적용해서 출력합니다.
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Avatar.Group total={3402}>
-      {" "}
-      // +3K 로 표시
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-    </Avatar.Group>
-  );
-};
-```
-
-#### group-itemSize
-
-`Group`에 `itemSize`를 전달하기 위한 `props`입니다.
-
-`Item`과 남은 `Avatar`을 표시해주는 ui의 크기를 조절하기 위해 사용됩니다.
-
-만약, `Item`에 직접 `size`를 입력하더라도 `Group`의 `itemSize`의 크기로 통일됩니다.
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Avatar.Group itemSize={50}>
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-    </Avatar.Group>
-  );
-};
-```
-
-#### group-restCounterProps
-
-`Group`에 `restCounterProps`를 전달하기 위한 `props`입니다.
-
-`restCounterProps`는 `Avatar.Item`을 `max`만큼 보여준 후 남은 수를 표현하는 ui의 `props`를 전달하기 위해 사용됩니다.
-
-```ts
-import Avatar from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Avatar.Group restCounterProps={{ className: "restCounterClassName" }}>
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-      <Avatar.Item />
-    </Avatar.Group>
-  );
-};
-```
-
-## Example
-
-프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/Avatar)에서 확인할 수 있습니다.

package/src/components/Badge/Badge.module.scss

@@ -1,49 +0,0 @@
-@layer Badge {
-  .Wrap {
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 6px;
-    position: relative;
-    min-width: 36px;
-    min-height: fit-content;
-
-    &.square {
-      background-color: #688dee;
-    }
-    &.circle {
-      background-color: #688dee;
-      border-radius: 50%;
-    }
-  }
-  .Badge {
-    position: absolute;
-    top: 0;
-    right: 0;
-    box-sizing: border-box;
-    padding: 4px 6px;
-    border-radius: 50px;
-    font-size: 14px;
-    color: #fff;
-    transform: translate(50%, -25%);
-    height: fit-content;
-
-    &.dot {
-      width: 12px;
-      height: 12px;
-      border-radius: 50%;
-      padding: unset;
-    }
-
-    &.hidden {
-      display: none;
-    }
-  }
-
-  .Standalone {
-    position: relative;
-    transform: unset;
-  }
-}

package/src/components/Badge/Badge.tsx

@@ -1,87 +0,0 @@
-"use client";
-import React from "react";
-import cn from "classnames/bind";
-import styles from "./Badge.module.scss";
-
-const cx = cn.bind(styles);
-
-type BadgeProps = {
-  dot?: boolean;
-  max?: number;
-  badgeColor?: React.CSSProperties["backgroundColor"];
-  value?: number | string | null;
-};
-export type BadgeRenderProps = {
-  defaultClassName?: string;
-} & BadgeProps;
-export type BadgeRootProps = React.PropsWithChildren<
-  {
-    className?: string;
-    overlap?: "square" | "circle" | null;
-    as?: (props: BadgeRenderProps) => React.ReactNode;
-  } & BadgeProps &
-    React.DetailedHTMLProps<
-      React.HTMLAttributes<HTMLDivElement>,
-      HTMLDivElement
-    >
->;
-
-const Badge = (props: BadgeRootProps) => {
-  const {
-    children,
-    className,
-    overlap = null,
-    dot = false,
-    value = 0,
-    max = 100,
-    badgeColor = "crimson",
-    as,
-    ...rest
-  } = props;
-
-  const renderBadge = (standalone?: "Standalone") => (
-    <div
-      className={cx("Badge", standalone, {
-        dot,
-        hidden: value === null || value === undefined,
-      })}
-      style={{ backgroundColor: badgeColor }}
-    >
-      <span>
-        {!dot &&
-          (typeof value === "number"
-            ? value > max
-              ? `${max}+`
-              : value
-            : value)}
-      </span>
-    </div>
-  );
-
-  const renderBadgeWithAs = (standalone?: "Standalone") =>
-    as?.({
-      dot,
-      value,
-      max,
-      badgeColor,
-      defaultClassName: cx("Badge", standalone, {
-        dot,
-        hidden: value === null || value === undefined,
-      }),
-    });
-
-  return React.Children.count(children) === 0 ? (
-    as ? (
-      renderBadgeWithAs("Standalone")
-    ) : (
-      renderBadge("Standalone")
-    )
-  ) : (
-    <div className={cx("Wrap", overlap, className)} {...rest}>
-      {as ? renderBadgeWithAs() : renderBadge()}
-      {children}
-    </div>
-  );
-};
-
-export default Badge;

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)에서 확인할 수 있습니다.