joseph-ui-kit

Storybook

배포 url: https://joseph-ui-kit.netlify.app

개요

joseph-ui-kit는 오픈 소스로써, React 기반으로 제작된 ui-kit 패키지입니다.

사전 제작된 다양한 ui 키트를 React 프로젝트에 활용해 보세요!

joseph-ui-kit UI의 design은 자체 제작이 아닌, IBM의 오픈소스 carbondesignsystem UI의 design을 클론하였습니다.

IBM의 carbondesignsystem : https://carbondesignsystem.com/

사용 방법

1. npm install 명령어를 입력하여 패키지를 다운로드합니다.

2. 배포된 Storybook에서 필요한 기능과 사용 방법(Note)을 확인합니다.

3. 원하는 기능을 컴포넌트에 import하여 사용하면 됩니다.

예시)

import { Accordion, Button } from "joseph-ui-kit";

return (
  <Accordion title="정렬">
    <Button />
  </Accordion>
);

Tech Stack

기능

자세한 설명 및 상호작용은 배포된 storybook에서 확인해 주세요.

배포 url: https://joseph-ui-kit.netlify.app

Accordion

Accordion은 헤더와 관련된 콘텐츠를 표시하거나, 숨기기 위해 클릭할 수 있는 수직으로 쌓인 헤더 목록입니다.

Button

Button은 클릭 가능한 요소로 특정 작업을 트리거하는 데 사용됩니다. Button은 사용자가 다양한 방식으로 페이지와 상호 작용할 수 있도록 합니다.

DropDown

DropDown은 사용자가 하나 또는 여러 옵션을 선택할 수 있는 옵션 목록을 제공합니다.

FileUploader

FileUploader를 사용하면 사용자가 이미지 파일을 특정 위치에 업로드할 수 있습니다.

FileUploaderDropContainer

FileUploaderDropContainer를 사용하면 사용자가 이미지 파일을 특정 위치에 업로드할 수 있습니다. 사용자는 이미지 파일을 해당 ui에 드래그하여 업로드가 가능합니다.

Loading

Loading은 사용자에게 데이터 fetching 등의 활동이 완료될 때까지 기다리라고 알려주는 역할을 합니다.

Modal

Modal은 애플리케이션의 기본 창 상단에 있는 큰 UI 요소입니다. Modal을 사용하면 맞춤형 콘텐츠 세트를 사용할 수 있습니다.'children' prop은 Modal의 body에 매핑됩니다.

Search

Search는 웹사이트에 대한 검색 보기를 쉽고 유연하게 만드는 방법을 제공합니다.

SkeletonUI

SkeletonUI는 데이터가 로드되기 전에 콘텐츠 미리보기를 표시하여, 사용자가 로드를 기다리게 합니다.

Tabs

Tabs는 사용자가 Tab 목록을 눌러 원하는 대상의 섹션으로 빠르게 이동할 수 있게 해줍니다.

TextArea

TextArea는 사용자가 키보드를 통해 앱에 텍스트를 입력하기 위한 기본 구성 요소입니다. 사용자가 여러 줄의 텍스트를 입력할 수 있습니다.

TextInput

TextInput은 사용자가 키보드를 통해 앱에 텍스트를 입력하기 위한 기본 구성 요소입니다.

Toggle

Toggle은 ON 및 OFF와 같이 상호 배타적인 두 가지 상태가 있는 UI 컨트롤입니다. 사용자는 두가지 상태에 따라 원하는 설정을 택할 수 있습니다.

Typography

IBM Plex를 서체로 사용합니다.