Why ispark-ui?

사내 프로젝트마다 버튼 하나, 모달 하나를 매번 새로 만들고 있었습니다.
ispark-ui는 그 반복을 끝내기 위해 만든 실전 디자인 시스템입니다.

접근성 프리미티브 radix-vue 위에 올려
WAI-ARIA를 기본 준수하면서도, CSS 변수 하나로 테마를 바꿀 수 있습니다.

현재 SGATE 성과관리 솔루션,
TaskFlow,
포트폴리오 등 3개 이상의 실서비스에 적용 중입니다.

[!TIP] 📖 Storybook 문서 에서 모든 컴포넌트를 인터랙티브하게 확인할 수 있습니다.

Numbers

33   컴포넌트       Button · Modal · Table · Tab · Drawer · Toast …
280+ 스토리         variant × size × state 조합별 문서화
3+   적용 서비스    SGATE · TaskFlow · Portfolio

Install

npm install @leechanyong/ispark-ui

import IsparkUI from '@leechanyong/ispark-ui'
import '@leechanyong/ispark-ui/style'

createApp(App).use(IsparkUI).mount('#app')

Architecture

| Layer | Stack | Role | |-------|-------|------| | Primitive | radix-vue | 접근성 동작 (WAI-ARIA) | | Component | Vue 3 + TypeScript | 33개 UI 컴포넌트 | | Token | CSS Variables | 다크/라이트 테마 | | Docs | Storybook 8 | 280+ 인터랙티브 스토리 | | Build | Vite Library Mode | Tree-shakeable 번들 | | Publish | npm | 시맨틱 버저닝 릴리즈 |

Components

UiRate — 별점 입력과 표시

<script setup lang="ts">
import { ref } from 'vue'
import { UiRate } from '@leechanyong/ispark-ui'
import '@leechanyong/ispark-ui/style.css'

const rating = ref(3.5)
</script>

<template>
  <UiRate v-model="rating" allow-half show-value label="리뷰 평점" />
  <UiRate :model-value="4.5" readonly size="sm">(128개 평가)</UiRate>
</template>

xxs / xs / sm / md / lg / xlg / auth (별 크기 12 / 14 / 16 / 24 / 32 / 40 / 48px), 반별 선택, 읽기 전용, 비활성화, 방향키·Home·End 조작을 지원합니다. allow-clear를 켜면 같은 점수를 다시 클릭해 해제할 수 있습니다. Storybook의 Components → Form → UiRate → Showcase에서 다크 테마 시안을 확인할 수 있습니다.

UiButton UiInput UiSelect UiModal UiDrawer UiTab UiTable UiBadge UiToggle UiProgress UiTooltip UiToast UiCalendar UiAccordion UiCheckbox UiRadio UiSwitch UiPagination UiEmpty UiIcon …

Setup

npm install && npm run dev        # 개발
npm run storybook                 # 문서
npm run build:lib                 # 빌드

이찬용 · @box3101