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

package/src/components/Accordion/README.md

@@ -1,408 +0,0 @@
-# Accordion UI
-
-## Contents List
-
-1. [Quick Start](#QuickStart)
-2. [Reference](#Reference)
-3. [Example](#Example)
-
-## Quick Start
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  // ...
-
-  return (
-    <Accordion.Root>
-      <Accordion.Trigger>
-        <div>{TITLE}</div>
-      </Accordion.Trigger>
-      <Accordion.Item>
-        <div>{CONTENT}</div>
-      </Accordion.Item>
-    </Accordion.Root>
-  );
-};
-```
-
-> closed
-
-![alt text](./images/closed.png)
-
-> open
-
-![alt text](./images/open.png)
-
-## Reference
-
-### Root
-
-| Prop                         |                       Type                        | Required | Default Value |
-| :--------------------------- | :-----------------------------------------------: | :------: | :-----------: |
-| [open](#open)                |                      Boolean                      |    -     |     false     |
-| [disabled](#disabled)        |                      Boolean                      |    -     |     false     |
-| [autoClosed](#autoClosed)    |                      Boolean                      |    -     |     true      |
-| [id](#id)                    |                      String                       |    -     | React.useId() |
-| [variant](#variant)          |              [String](#variantType)               |    -     |  "contained"  |
-| [transition](#transition)    |       Boolean or [Object](#transitionType)        |    -     |     true      |
-| [onClick](#onClick)          | (e?: React.MouseEvent<HTMLInputElement>) => void  |    -     |       -       |
-| [onChange](#onChange)        | (e?: React.ChangeEvent<HTMLInputElement>) => void |    -     |       -       |
-| [className](#Root-className) |                      String                       |    -     |       -       |
-| [children](#Root-children)   |                  React.ReactNode                  |    -     |       -       |
-
-#### open
-
-`Accordion`의 `open`을 관리하는 상태입니다. 기본값은 `false`로 아무런 `props`를 전달하지 않을 시 `Accordion.Trigger`를 클릭했을때 내부적으로 `open`의 상태가 반전됩니다. [↗기본 예시](#QuickStart)
-
-`Accordion.Root`에 `boolean`값을 넣어 임의로 상태를 관리할 수 있습니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  const [open, setOpen] = React.useState<boolean>(false);
-
-  return (
-    <Accordion.Root open={open}>
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-`🔔Tip: open의 상태값을 임의로 지정할 시 onClick이벤트를 통해 상태변경을 해주어야 합니다.` [↗onClick](#onClick)
-
-#### disabled
-
-`Accordion`의 `disabled`을 관리하는 상태입니다. 기본값은 `false`입니다.
-
-`disabled === true`일시 아코디언의 조작이 불가해집니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Accordion.Root disabled>
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-#### autoClosed
-
-`Accordion`의 `autoClosed`을 관리하는 상태입니다. 기본값은 `true`입니다.
-
-`autoClosed`는 `Accordion`이 `open === true && autoClosed === true`일때 `Accordion`의 외부를 클릭했을때 자동으로 닫히는 역할을 합니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  return (
-    <Accordion.Root autoClosed>
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-#### id
-
-`Accordion.Trigger`의 `id`를 관리하는 상태입니다. `props`를 전달하지 않을 시 Accordion은 내부적으로 `id`를 생성해서 각 `Accordion.Trigger`를 식별합니다.
-
-`Accordion`의 외부에서 임의의 `id`를 생성해 전달할 수 있습니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  const id = `812ee3f3-c35d-4009-8a29-6103917d1cb0`;
-
-  return (
-    <Accordion.Root id={id}>
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-#### variant
-
-`Accordion`의 `variant`를 관리하는 상태입니다. 기본값은 `"contained"`입니다.
-
-`Accordion`의 기본 스타일을 변경할 수 있습니다.
-
-##### variant Type
-
-```ts
-"contained" |
-  "outlined" |
-  "adaptived" |
-  "sideLined" |
-  "bottomLined" |
-  "shadow" |
-  "unset";
-```
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  const variant = "sideLined";
-
-  return (
-    <Accordion.Root variant={variant}>
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-`🔔Tip: Accordion의 스타일을 커스텀을 하기 위해서는 "unset"을 지정하는게 좋습니다.`
-
-#### transition
-
-`Accordion`의 `transition`를 관리하는 상태입니다. 기본값은 `true`입니다.
-
-`boolean`값을 통해 `transition`애니메이션을 끄고 킬 수 있으며 `true`일시 기본 트랜지션의 시간은 `0.25s` 타이밍 함수는 `ease-in-out`입니다.
-
-시간과 타이밍을 세부적으로 조절하기 위해서는 아래의 예시를 참고하세요.
-
-##### transition Type
-
-```ts
-boolean | {
-  /** 0.25s => 2500 */
-  duration?: number;
-  timingFC?: React.CSSProperties["transitionTimingFunction"];
-}
-```
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  const transition = {
-    duration: 1000, // 1s
-    timingFC: "cubic-bezier(0.64, 2, 0.46, 1.51)"
-  };
-
-  return (
-    <Accordion.Root transition={transition}>
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-#### onClick
-
-`Accordion.Trigger`에 `onClick` 이벤트를 전달하기 위한 `props`입니다.
-
-`onClick`에 전달되는 `event`는 `React.MouseEvent<HTMLInputElement>` 입니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  const [open, setOpen] = React.useState<boolean>(false)
-
-  const onClick = (e) => {
-    setOpen((curr) => !curr);
-  };
-
-  return (
-    <Accordion.Root open={open} onClick={onClick}>
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-`🔔Tip: open의 상태를 변경하기 위해서는 onChange대신 onClick을 사용해 변경하세요.`
-
-#### onChange
-
-`Accordion.Trigger`에 `onChange` 이벤트를 전달하기 위한 `props`입니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-  const onChange = (e) => {
-    console.log(e?.target.checked);
-  };
-
-  return (
-    <Accordion.Root open={open} onChange={onChange}>
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-#### Root-className
-
-`Accordion.Root`에 `className` class를 전달하기 위한 `props`입니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Accordion.Root className="RootClassName">
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-`🔔Tip: Accordion.Root의 class를 전달해줄때 기본 스타일을 없애기 위해 variant="unset"을 지정해주는게 좋습니다.`
-
-#### Root-children
-
-`Accordion.Root`의 내부에 `Accordion.Trigger`와 `Accordion.Item`을 추가하여 기본 아코디언을 구성합니다.[↗기본 예시](#QuickStart)
-
-`Accordion`컴포넌트 외에도 여러 컴포넌트를 조합하여 ui를 구성할 수 있습니다.
-
-### Trigger
-
-| Prop                            |        Type        | Required | Default Value |
-| :------------------------------ | :----------------: | :------: | :-----------: |
-| [as](#as)                       | React.ReactElement |    -     |       -       |
-| [className](#Trigger-className) |       String       |    -     |       -       |
-| [children](#Trigger-children)   |  React.ReactNode   |    -     |       -       |
-
-#### as
-
-`Accordion.Trigger`의 전체적인 ui를 변경하기 위해 있는 `props`입니다.
-
-해당 `props`에는 `JSX`코드를 넣어 ui의 스타일과 기능을 커스텀할 수 있습니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  const [asOpen, setAsOpen] = React.useState<boolean>(false);
-
-  return (
-    <Accordion.Root
-      open={asOpen}
-      onClick={
-        () => setAsOpen((curr) => !curr)
-      }
-    >
-      <Accordion.Trigger as={
-        <div className={cx("AsTriggerWrap", { open: asOpen })}>
-          <Icon name="Company" className={cx("CompanyIcon")} />
-          <div>
-            TEAM <strong>WEing</strong> 이란?
-          </div>
-          <Icon
-            name="ExpandMore"
-            className={cx("ExpandIcon", { open: asOpen })}
-            color="#ffd016"
-          />
-        </div>
-      }>
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-`🔔Tip: open 상태를 생성해 관리하면 as 내부에 Accordion의 open상태에 따라 ui 스타일링이 가능합니다.`
-![alt text](./images/as_trigger.gif)
-
-#### Trigger-className
-
-`Accordion.Trigger`에 `className` class를 전달하기 위한 `props`입니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Accordion.Root>
-      <Accordion.Trigger className="TriggerClassName"/>
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-#### Trigger-children
-
-`Accordion.Trigger`의 `Text`에 들어가는 요소입니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Accordion.Root>
-      <Accordion.Trigger>
-        <div>Trigger Text</div>
-      </Accordion.Trigger>
-      <!-- ... -->
-    </Accordion.Root>
-  );
-}
-```
-
-### Item
-
-| Prop                         |      Type       | Required | Default Value |
-| :--------------------------- | :-------------: | :------: | :-----------: |
-| [className](#Item-className) |     String      |    -     |       -       |
-| [children](#Item-children)   | React.ReactNode |    -     |       -       |
-
-#### Item-className
-
-`Accordion.Item`에 `className` class를 전달하기 위한 `props`입니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Accordion.Root>
-      <!-- ... -->
-      <Accordion.Item className="ItemClassName"/>
-    </Accordion.Root>
-  );
-}
-```
-
-#### Item-children
-
-`Accordion.Item`의 `Text`에 들어가는 요소입니다.
-
-```ts
-import { Accordion } from "@weing-dev/ui-kit-primitive";
-
-const components = () => {
-
-  return (
-    <Accordion.Root>
-      <!-- ... -->
-      <Accordion.Item>
-        <div>Item Text</div>
-      </Accordion.Item>
-    </Accordion.Root>
-  );
-}
-```
-
-## Example
-
-프로젝트를 실행하고 해당 [Link](http://localhost:3000/users/accordion)에서 확인할 수 있습니다.

package/src/components/Avatar/Avatar.module.scss

@@ -1,47 +0,0 @@
-@layer {
-  .Group {
-    display: flex;
-  }
-
-  .GroupItem {
-    margin-inline: -4px;
-  }
-
-  .Item {
-    --bg-color: white;
-    --size: 40px;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    overflow: hidden;
-    user-select: none;
-    border: 2px solid var(--backgroundDefault, #fff);
-    background-color: var(--bgColor);
-    width: var(--size);
-    height: var(--size);
-
-    &.rounded {
-      border-radius: 10px;
-    }
-    &.circle {
-      border-radius: 50%;
-    }
-  }
-
-  .Text {
-    width: inherit;
-    height: inherit;
-    font-size: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    white-space: nowrap;
-  }
-
-  .AvatarImage {
-    width: inherit;
-    height: inherit;
-    object-fit: cover;
-  }
-}

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;