Skip to content

Latest commit

 

History

History
128 lines (92 loc) · 11.6 KB

README.md

File metadata and controls

128 lines (92 loc) · 11.6 KB

J Design System

jds-thumb

Introduction

💎 J Design System은 여러 재사용 가능한 핵심적인 UI 컴포넌트를 담아내고 있는 React에서 사용할 수 있는 Design System UI Library 입니다. 빠르고 쉽게 적용할 수 있는 단순한 인터페이스를 지향하였으며, 웹 접근성을 최대한 준수하였습니다.

Why you should use J Design System

  • ⚡️ Compound Component 구조와 일관성 있는 속성 구조를 통해 간결한 사용자 인터페이스를 유지하도록 하였습니다.
  • 🌈 as 속성을 통해 컴포넌트 다형성을 지원하도록 구현했습니다.
  • ⚠️ 웹 접근성을 고려해 적절한 html role을 사용하여 컴포넌트를 구성하였습니다.
  • 🧩 다양한 사용 환경을 고려해 cjs, esm 모듈을 지원하도록 번들링을 구성하였습니다.
  • ⌨️ Uncontrolled Component 특성을 활용해 인터랙션이 필요한 컴포넌트들을 지원하였습니다.
  • 💫 Form 관련 컴포넌트들은 React Hook Form을 지원합니다.

Project Overview

Installation

💅 Emotion 환경에서 동작하기 때문에 emotion dpendency가 필요합니다.
React UI Component

npm install --save @jdesignlab/react @emotion/react@^11

SVG Icons

npm install --save @jdesignlab/react-icons @emotion/react@^11

아래와 같이 필요한 UI 컴포넌트를 import하여 사용할 수 있습니다. 각 컴포넌트의 README를 참고하시면 자세한 인터페이스와 사용법을 확인하실 수 있습니다. 아래 링크를 클릭하시면 각 컴포넌트의 README로 이동하실 수 있습니다.

import { Text, TextInput, Button, Modal, ... } from '@jdesignlab/react';
import {Mail, Bell, Book, ...} from '@jdesignlab/react-icons'

Components

Box

Button

Card

Checkbox

Drawer

Dropdown

Flex

Input

Modal

Popover

Radio

Select

Stack

Tabs

Text

Textarea

Tooltip

Contributors

yondo123
yoycode
tooooo1 helen

Convention

Commit Convention

rule description
✨ Feat 새로운 기능을 작성합니다.
🎨 Style 코드 스타일 규칙을 수정합니다.
➖ Remove 사용되지 않는 파일 또는 코드를 삭제합니다.
🏗️ Structure 프로젝트 구조를 변경합니다.
🔧 Modify 기능에 영향을 주지 않는 코드를 수정합니다.
🐛 Fix 기능의 문제 사항 또는 전반적인 프로젝트 내 이슈를 해결합니다.
♻️ Refactor 성능이나 코드의 구조를 개선합니다.
📝 Doc 문서를 작성하거나 편집합니다.
🤡 Chore 애플리케이션 동작에 영향을 주지 않는 코드들을 수정합니다. (package version, configure)
🚀 Deploy 패키지를 배포합니다.
🧪 Test 테스트 코드를 작성합니다.
💄 Ui 스타일링을 위한 코드를 수정하거나 추가합니다.