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

package/src/components/Accordion/Accordion.tsx

@@ -1,242 +0,0 @@
-"use client";
-/* eslint-disable react-refresh/only-export-components */
-import React from "react";
-import cn from "classnames/bind";
-import styles from "./Accordion.module.scss";
-import {
-  AccordionRootContext,
-  AccordionRootProvider,
-  AccordionsRootProviderProps,
-} from "./Accordion.context";
-
-import { Icon } from "../Icon/Icon";
-
-const cx = cn.bind(styles);
-
-type ItemProps = React.PropsWithChildren<{
-  className?: string;
-}>;
-
-const Item = (props: ItemProps) => {
-  const { children, className } = props;
-
-  const itemRef = React.useRef<HTMLDivElement>(null);
-
-  const rootContext = React.useContext(AccordionRootContext);
-  const { open, disabled, transition, "#firstClick": firstClick } = rootContext;
-
-  React.useEffect(() => {
-    if (!itemRef.current || !transition) return;
-    const computedStyle = window.getComputedStyle(itemRef.current);
-    const pb = computedStyle.paddingBottom;
-
-    const currMaxHeight = `${Array.from(itemRef.current.childNodes).reduce(
-      (acc, child) => acc + (child as HTMLDivElement).scrollHeight,
-      +pb.split("px")[0]
-    )}`;
-
-    const animationOptions = {
-      duration:
-        typeof transition === "boolean" ? 250 : transition?.duration ?? 250,
-      easing:
-        typeof transition === "boolean"
-          ? "ease-in-out"
-          : transition?.timingFC ?? "ease-in-out",
-    };
-
-    const animate = (...keyframes: Keyframe[]) => {
-      if (itemRef.current) itemRef.current.animate(keyframes, animationOptions);
-    };
-
-    if (open) {
-      if (!firstClick) return;
-
-      animate(
-        { maxHeight: 0, opacity: 0, marginBottom: `-${pb}` },
-        { maxHeight: `${currMaxHeight}px`, opacity: 1, marginBottom: 0 }
-      );
-    } else {
-      if (!firstClick) return;
-      animate(
-        {
-          maxHeight: `${itemRef.current.scrollHeight}px`,
-          opacity: 1,
-          marginBottom: 0,
-        },
-        { maxHeight: 0, opacity: 0, marginBottom: `-${pb}` }
-      );
-    }
-  }, [firstClick, transition, open]);
-
-  return (
-    <div
-      ref={itemRef}
-      className={cx("Item", className, {
-        open: open,
-        disabled: disabled,
-        transition: !!transition,
-      })}
-    >
-      {children}
-    </div>
-  );
-};
-
-type AsProps = {
-  id?: string;
-  open?: boolean;
-  disabled?: boolean;
-};
-
-type TriggerProps = React.PropsWithChildren<{
-  as?: (props: AsProps) => React.ReactNode;
-  className?: string;
-}>;
-
-const Trigger = (props: TriggerProps) => {
-  const { as, children, className } = props;
-
-  const {
-    id,
-    open,
-    disabled,
-    transition,
-    onClick,
-    onChange,
-    "#triggerRef": triggerRef,
-  } = React.useContext(AccordionRootContext);
-
-  const inputProps = {
-    hidden: true,
-    type: "checkbox",
-    defaultChecked: open,
-    id,
-    disabled,
-    onClick,
-    onChange,
-  };
-
-  return as ? (
-    <label htmlFor={id}>
-      <input ref={triggerRef} {...inputProps} />
-      {as({ id, open, disabled })}
-    </label>
-  ) : (
-    <label
-      htmlFor={id}
-      className={cx("Trigger", className, {
-        disabled: disabled,
-      })}
-    >
-      <input ref={triggerRef} {...inputProps} />
-      {children}
-      <Icon
-        name={"ExpandMore"}
-        className={cx("TriggerIcon", {
-          open,
-          transition: !!transition,
-        })}
-      />
-    </label>
-  );
-};
-
-const Root = (
-  props: Omit<AccordionsRootProviderProps, "#triggerRef" | "#firstClick">
-) => {
-  const {
-    children,
-    className,
-    open,
-    variant = "contained",
-    disabled = false,
-    autoClosed = true,
-    transition = true,
-    onClick,
-  } = props;
-
-  const [privateOpen, setPrivateOpen] = React.useState(false);
-  const [firstClick, setFirstClick] = React.useState(false);
-
-  const privateId = React.useId();
-
-  const rootRef = React.useRef<HTMLDivElement>(null);
-  const triggerRef = React.useRef<HTMLInputElement>(null);
-
-  const handleTriggerClick = React.useCallback(() => {
-    if (disabled) return;
-    if (open === undefined) setPrivateOpen?.((curr) => !curr);
-    if (!firstClick) setFirstClick?.(true);
-    onClick?.();
-  }, [disabled, open, firstClick, setPrivateOpen, onClick, setFirstClick]);
-
-  const currOpen = React.useMemo(
-    () => open ?? privateOpen,
-    [open, privateOpen]
-  );
-  const contextValue = React.useMemo(() => {
-    return {
-      ...props,
-      id: props.id ?? privateId,
-      open: currOpen,
-      "#triggerRef": triggerRef,
-      "#firstClick": firstClick,
-      onClick: handleTriggerClick,
-    };
-  }, [props, privateId, currOpen, firstClick, handleTriggerClick]);
-
-  const handleClickOutside = React.useCallback((e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (!rootRef.current?.contains(target)) {
-      triggerRef.current?.click();
-    }
-  }, []);
-
-  React.useEffect(() => {
-    if (disabled || !currOpen) return;
-    if (autoClosed) {
-      document.addEventListener("click", handleClickOutside);
-      return () => {
-        document.removeEventListener("click", handleClickOutside);
-      };
-    }
-  }, [disabled, currOpen, autoClosed, handleClickOutside]);
-
-  return (
-    <AccordionRootProvider {...contextValue}>
-      <div
-        ref={rootRef}
-        className={cx(
-          variant === "unset" ? "Unset" : "Root",
-          className,
-          variant,
-          {
-            open: currOpen,
-            transition: !!transition,
-            disabled,
-          }
-        )}
-        style={{
-          ...(typeof transition !== "boolean" && {
-            transitionDuration: `${+(transition?.duration ?? 250) / 1000}s`,
-            transitionTimingFunction: transition?.timingFC ?? "ease-in-out",
-          }),
-        }}
-      >
-        {children}
-      </div>
-    </AccordionRootProvider>
-  );
-};
-
-interface IAccordion {
-  Root: typeof Root;
-  Trigger: typeof Trigger;
-  Item: typeof Item;
-}
-
-export default {
-  Root,
-  Trigger,
-  Item,
-} as IAccordion;

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;
-  }
-}