@weing-dev/ui-kit-primitive 0.0.0

package/src/components/Accordion/Accordion.tsx

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

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

@@ -0,0 +1,47 @@
+@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;
+  }
+}