@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Avatar/Avatar.tsx

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

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

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

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