chak-blocks v0.0.12

Chak-Blocks (Beta)

독서 기록 플랫폼 Chak을 위한 UI 라이브러리입니다 ✨ 블록(컴포넌트)을 조립하여 빠르게 페이지를 만들기 위한 용도로 만들어졌습니다 🟦 🟥 🟨   ➡️  🏡

Features ✨

• 서버 컴포넌트를 지원합니다 🌐
• 📝 시맨틱한 마크업을 지원합니다. HTML 엘리먼트 타입은 물론, 엘리먼트 속성도 자유롭게 지정할 수 있습니다. 시맨틱한 마크업으로 웹 접근성과 SEO를 향상 시킬 수 있습니다.
• 🗿 예측 가능한 정적 타입을 지원합니다. 모든 코드는 Typescript로 작성되었습니다.
• 📦 ESM, CJS 모듈을 지원합니다.

Install

🟢 chak-blocks는 아래와 같은 종속성을 요구합니다

"peerDependencies": {
  "react": "^19.0.0",
  "react-dom": "^19.0.0",
  "@vanilla-extract/dynamic": "^2.1.2",
  "@vanilla-extract/recipes": "^0.5.5"
}

 yarn add chak-blocks // yarn을 사용하신다면!

 npm install chak-blocks // npm을 사용하신다면!

Usage

🟢 chak-blocks는 plain 컴포넌트와 context 컴포넌트로 구분됩니다. context 컴포넌트를 사용할 때는 파일 상단에 'use client'를 작성하여 클라이언트 컴포넌트임을 명시해주세요.

Plain 컴포넌트

Toast, Accordion을 제외한 모든 컴포넌트는 plain 컴포넌트입니다. 서버 컴포넌트, 클라이언트 컴포넌트 모두 자유롭게 사용 가능합니다. (브라우저 렌더링 후 javascript를 통한 동적 액션이 예상된다면 클라이언트 컴포넌트로 사용해주세요.)

"chak-blocks/plain" 패키지와 "chak-blocks/plain/index.css" 스타일 파일을 import하여 사용해주세요.

import { Typography } from "chak-blocks/plain";
import "chak-blocks/plain/index.css";

export default function Component() {
  return <Typography>글씨!</Typography>;
}

Context 컴포넌트

React의 Context API를 사용하는 컴포넌트입니다. Toast와 Accordion이 포함됩니다. 클라이언트 컴포넌트로만 사용이 가능합니다.

"chak-blocks/context" 패키지와 "chak-blocks/context/index.css" 스타일 파일을 import하여 사용해주세요.

"use client";

import { Accordion } from "chak-blocks/context";
import "chak-blocks/context/index.css";

export default function Component {
  return <Accordion>...</Accordion>;
}

UI

Chak-Blocks에서 제공하는 UI입니다. 🎨 Chak Block의 스토리북에서 모든 컴포넌트를 직접 확인해보세요.

Typography

유연한 사용을 위해 Heading Level에 고정된 스타일 없이 as, variant props를 조합하여 커스터마이징이 가능합니다. HTML 엘리먼트와 스타일을 조합하여 다양한 Typography를 만들 수 있습니다.

Button

Tag

Divider

ColorChip

Icon

RatingStar

Card

Skeleton

Input

InputField

Accordion

정보를 계층적으로 표현할 때 유용한 Accordion UI 입니다. 다양한 상황에 유연하게 대응하기 위해 컴파운드 패턴으로 구현되었습니다. 기본으로 제공되는 Accordion 컴포넌트 구성으로 쉽게, 혹은 커스터마이징를 통해 다양한 Accordion UI를 만들어보세요.

기본 컴포넌트 구성

<Accordion initActiveItems={["2"]} style={{ width: "500px" }}>
  <Accordion.Item
    accordionKey="1"
    renderChildren={(accordionKey, isActive) => {
      return (
        <>
          <Accordion.Button accordionKey={accordionKey} isActive={isActive}>
            <Accordion.Label accordionKey={accordionKey} isActive={isActive}>
              Title 1
            </Accordion.Label>
            <Accordion.Icon accordionKey={accordionKey} isActive={isActive} />
          </Accordion.Button>
          <Accordion.Content accordionKey={accordionKey} isActive={isActive}>
            //...
          </Accordion.Content>
        </>
      );
    }}
  />
  ...
  <Accordion.Item
    accordionKey="4"
    renderChildren={(accordionKey, isActive) => {
      return (
        <>
          <Accordion.Button accordionKey={accordionKey} isActive={isActive}>
            <Accordion.Label accordionKey={accordionKey} isActive={isActive}>
              Title 4
            </Accordion.Label>
            <Accordion.Icon accordionKey={accordionKey} isActive={isActive} />
          </Accordion.Button>
          <Accordion.Content accordionKey={accordionKey} isActive={isActive}>
            //...
          </Accordion.Content>
        </>
      );
    }}
  />
</Accordion>

Accordion

Accordion 컴포넌트의 최상위 요소입니다.

AccordionItem

정보를 계층화할 Accordion 항목입니다. 각 항목을 구별할 고유한 키(accordionKey)를 가져야합니다. 이때 AccordionItem의 자식요소는 renderChild 함수를 통해 accordionKey와 isActiveprops를 전달받아야 합니다.

AccordionButton

AccordionItem의 열림 / 닫힘 상태를 컨트롤하는 버튼입니다.

AccordionLabel

AccordionItem의 제목을 보여주는 라벨입니다.

AccordionIcon

AccordionItem의 열림 / 닫힘 상태를 표시하는 아이콘입니다.

AccordionContent

AccordionItem의 세부 정보를 보여주는 콘텐츠입니다.

Toast

사용자에게 알림을 전달하기 위한 Toast UI입니다. Toast 컴포넌트를 단독으로 사용할 수 있으며, Context API로 구현된 useToast 훅이 제공하는 open, close 함수를 사용하여 Toast 렌더링을 컨트롤할 수 있습니다.

Toast 컴포넌트

useToast

ToastProvider 내부에서 useToast 훅을 사용하여 Toast 렌더링을 컨트롤할 수 있습니다.

const ToastContainer = ({
  title,
  description,
  status,
}: Pick<ToastProps, "title" | "status" | "description">) => {
  const { open } = useToast();
  const handleButtonClick = () => {
    open({ status, title, description });
  };
  return (
    <Button
      theme={buttonMap.get(status || "primary") as ButtonProps["theme"]}
      onClick={handleButtonClick}
    >
      Toast Open!
    </Button>
  );
};

<ToastProvider>
  <ToastContainer {...args} />
</ToastProvider>;