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

package/src/components/Avatar/Avatar.tsx

@@ -1,230 +0,0 @@
-"use client";
-/* eslint-disable react-refresh/only-export-components */
-import React from "react";
-import cn from "classnames/bind";
-import styles from "./Avatar.module.scss";
-import {
-  getColorContrast,
-  getRandomColor,
-  numberToMetricPrefix,
-} from "@/utils/common.utill";
-
-const cx = cn.bind(styles);
-
-type GroupProps = React.PropsWithChildren<{
-  className?: string;
-  itemClassName?: string;
-  max?: number;
-  total?: number;
-  itemSize?: number;
-  restCounterProps?: React.DetailedHTMLProps<
-    React.ImgHTMLAttributes<HTMLImageElement>,
-    HTMLImageElement
-  >;
-}>;
-
-const Group = (props: GroupProps) => {
-  const {
-    children,
-    className,
-    itemClassName,
-    max = 4,
-    total,
-    itemSize,
-    restCounterProps,
-  } = props;
-
-  return (
-    <div className={cx("Group", className)}>
-      {React.Children.map(children, (child, index) => {
-        if (React.isValidElement(child))
-          switch (true) {
-            case index === max:
-              if (total !== undefined) return;
-              return (
-                <div
-                  className={cx("GroupItem", itemClassName)}
-                  style={{ zIndex: `${max + 1 - index}` }}
-                >
-                  {React.cloneElement(child, {
-                    ...restCounterProps,
-                    src: "",
-                    alt: `+${numberToMetricPrefix(
-                      React.Children.count(children) - max + 1
-                    )}`,
-                    nameAbbreviation: false,
-                    size: itemSize,
-                  } as React.ComponentProps<typeof Item>)}
-                </div>
-              );
-            case index > max:
-              return;
-            default:
-              return (
-                <div
-                  className={cx("GroupItem", itemClassName)}
-                  style={{
-                    zIndex: `${max + 1 - index}`,
-                  }}
-                >
-                  {React.cloneElement(child, {
-                    ...(child.props instanceof Object
-                      ? { ...child.props, size: itemSize }
-                      : {}),
-                  } as React.ComponentProps<typeof Item>)}
-                </div>
-              );
-          }
-      })}
-      {total && React.Children.count(children) < total && (
-        <div
-          className={cx("GroupItem")}
-          style={{ zIndex: `${max + 1 - React.Children.count(children)}` }}
-        >
-          <Item
-            {...restCounterProps}
-            src=""
-            alt={`+${numberToMetricPrefix(total)}`}
-            size={itemSize}
-            nameAbbreviation={false}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-type 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;
-};
-
-type ItemProps = {
-  className?: string;
-  variant?: "square" | "rounded" | "circle";
-  nameAbbreviation?: boolean;
-  size?: number;
-  as?: (props: AsProps) => React.ReactNode;
-} & React.DetailedHTMLProps<
-  React.ImgHTMLAttributes<HTMLImageElement>,
-  HTMLImageElement
->;
-
-const Item = (props: ItemProps) => {
-  const {
-    className,
-    variant = "circle",
-    nameAbbreviation = true,
-    size = 40,
-    as,
-    ...imageProps
-  } = props;
-
-  const [load, setLoad] = React.useState(false);
-
-  const [isError, setIsError] = React.useState(false);
-
-  const textRef = React.useRef<HTMLSpanElement>(null);
-
-  const [randomBg, setRandomBg] = React.useState<string>("");
-
-  React.useEffect(() => {
-    setRandomBg(getRandomColor());
-  }, []);
-
-  const imageErrorHandler = React.useCallback(
-    (e: React.SyntheticEvent<HTMLImageElement, Event>) => {
-      setIsError(true);
-      if (imageProps.onError) {
-        imageProps.onError(e);
-      }
-    },
-    [imageProps]
-  );
-
-  const abbreviateName = React.useCallback((name: string): string => {
-    return name
-      .split(" ")
-      .map((word) => word[0])
-      .join("")
-      .toUpperCase();
-  }, []);
-
-  React.useEffect(() => {
-    if (load && textRef.current) {
-      const textElement = textRef.current;
-      if (textElement && (isError || !imageProps.src)) {
-        const textWidth = textElement.scrollWidth;
-        const textHeight = textElement.offsetHeight;
-        const scale = Math.min(size / textWidth, size / textHeight);
-        textElement.style.transform = `scale(${
-          scale === 1 ? scale : scale * 0.8
-        })`;
-      }
-    }
-  }, [load, size, isError, imageProps.src, randomBg]);
-
-  React.useEffect(() => {
-    setLoad(true);
-  }, []);
-
-  return (
-    <div
-      className={cx("Item", variant, className)}
-      style={{
-        "--bgColor": randomBg,
-        "--size": `${size}px`,
-      }}
-    >
-      {as ? (
-        as({
-          isError,
-          nameAbbreviation,
-          abbreviateName,
-          src: imageProps.src,
-          alt: imageProps.alt,
-          textColor: getColorContrast(randomBg),
-          abberviateDefaultClassName: cx("Text"),
-          imgDefaultClassName: cx("AvatarImage"),
-          onError: imageErrorHandler,
-        })
-      ) : isError || !imageProps.src ? (
-        <span
-          {...imageProps}
-          ref={textRef}
-          className={cx("Text")}
-          style={{
-            ...imageProps.style,
-            color: getColorContrast(randomBg),
-          }}
-        >
-          {nameAbbreviation
-            ? abbreviateName(imageProps?.alt ?? "")
-            : imageProps?.alt}
-        </span>
-      ) : (
-        <img
-          {...imageProps}
-          className={cx("AvatarImage")}
-          onError={imageErrorHandler}
-        />
-      )}
-    </div>
-  );
-};
-
-interface IAvatar {
-  Item: typeof Item;
-  Group: typeof Group;
-}
-
-export default {
-  Item,
-  Group,
-} as IAvatar;

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;