igaw-components

(작업진행중)

IGAWorks DFN 컴포넌트 패키지 입니다. 내부 디자인시스템을 보유한 컴포넌트를 타 프로젝트에서도 사용할 수 있도록 허용합니다. 디자인이 변경되어도 해당 Repo를 Fork 후에 내부 디자인 토큰 / CSS 수정을 통해 재활용이 가능합니다.

Script

pnpm storybook   # storybook 활성화 명령어
pnpm rollup      # 컴포넌트 번들링 명령어
pnpm dev         # 컴포넌트 실제로 웹서버에서 어떻게 표기되는지 확인용도 (Development)
pnpm lint        # 컴포넌트 형식 수정 (feat. any 무시)

pnpm build-design-token   # 디자인 토큰 적용 명령어
pnpm convert-svg-icon     # 디자인 토큰 내 icon 최신화 명령어

타 프로젝트 내에서 사용방법

1. 동작시켜야할 프로젝트에서 패키지를 설치합니다.

2. Vue 프로젝트의 main.ts 또는 App.vue 에서 라이브러리를 호출하여 전역으로 사용합니다. (현재는 Vue 프로젝트에서만 사용 가능)

// main.ts
import Vue from 'vue';
import DfnComponents from '@';

const app = createApp(App);
app.use(DfnComponents);

3. 일일히 import 하지 않고 전역에서 사용 가능!

i18n 적용 방법

현재는 영문(en) / 한글(ko)을 지원합니다.

컴포넌트 이관 TODO LIST

• Basic
  • [x] 01 Button
  • [x] 02 IconButton
  • [x] 03 Text
• Form
  • [x] 04 Input
  • [ ] 05 Checkbox
  • [x] 06 Select
  • [x] 07 Radio
  • [ ] 08 Cascader
  • [ ] 09 Slider
  • [ ] 10 Switch
  • [ ] 11 Upload
  • [x] 12 Color Picker
  • [ ] 13 Date / Time Picker
  • [ ] 14 Emoji Picker
• Data
  • [x] 15 Badge
  • [ ] 16 Pagination
  • [ ] 17 Progress
  • [x] 18 Tag
  • [ ] 19 Table
  • [x] 20 Avatar
• Navigation
  • [ ] 21 Breadcrumb
  • [ ] 22 Dropdown
  • [x] 23 Step
  • [x] 24 Tabs
• Feedback
  • [x] 25 Alert (Helper)
  • [ ] 26 Dialog
  • [x] 27 Toast (Helper)
  • [ ] 28 Popover
  • [ ] 29 Tooltip
  • [x] 30 Loading