@designbasekorea/ui-wc 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +83 -0
- package/dist/chunks/lottie-aaf17dfb.js +1 -0
- package/dist/chunks/prism-10c2500e.js +1 -0
- package/dist/index.cjs +1 -0
- package/dist/index.css +1 -0
- package/dist/index.d.ts +3261 -0
- package/dist/index.esm.js +1 -0
- package/dist/react/chunks/lottie-eed75107.js +1 -0
- package/dist/react/chunks/prism-0e153489.js +1 -0
- package/dist/react/index.cjs +1 -0
- package/dist/react/index.d.ts +6355 -0
- package/dist/react/index.esm.js +1 -0
- package/package.json +86 -0
package/README.md
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# @designbasekorea/ui-wc
|
|
2
|
+
|
|
3
|
+
Designbase **Web Components** — Vue 3, Angular, React, vanilla HTML에서 공통으로 사용하는 웹 컴포넌트 원본입니다.
|
|
4
|
+
|
|
5
|
+
React 사용자는 `@designbasekorea/ui-wc/react`의 `Button`, `Input`, `Tabs` wrapper를 사용할 수 있습니다. vanilla/Vue/Angular는 `<db-button>` 같은 Custom Elements를 직접 사용할 수 있습니다. 기존 `@designbasekorea/ui` React 패키지는 별도 레거시/완성형 패키지로 유지합니다.
|
|
6
|
+
|
|
7
|
+
## 설치
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @designbasekorea/ui-wc @designbasekorea/tokens @designbasekorea/theme
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## 사용법
|
|
14
|
+
|
|
15
|
+
```ts
|
|
16
|
+
import '@designbasekorea/tokens/dist/css/tokens.css';
|
|
17
|
+
import '@designbasekorea/theme/dist/css/theme.css';
|
|
18
|
+
import '@designbasekorea/ui-wc/dist/index.css';
|
|
19
|
+
import '@designbasekorea/ui-wc';
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
```html
|
|
23
|
+
<db-button variant="primary">저장</db-button>
|
|
24
|
+
<db-input label="이메일" placeholder="you@example.com"></db-input>
|
|
25
|
+
<db-tabs labels="홈,탐색,알림" active-index="0"></db-tabs>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## React wrapper
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
import '@designbasekorea/tokens/dist/css/tokens.css';
|
|
32
|
+
import '@designbasekorea/theme/dist/css/theme.css';
|
|
33
|
+
import '@designbasekorea/ui-wc/dist/index.css';
|
|
34
|
+
import { Button } from '@designbasekorea/ui-wc/react';
|
|
35
|
+
|
|
36
|
+
<Button variant="primary" onPress={() => save()}>
|
|
37
|
+
저장
|
|
38
|
+
</Button>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## 컴포넌트 (11개)
|
|
42
|
+
|
|
43
|
+
| 태그 | 설명 |
|
|
44
|
+
|------|------|
|
|
45
|
+
| `db-button` | 버튼 |
|
|
46
|
+
| `db-input` | 텍스트 입력 |
|
|
47
|
+
| `db-checkbox` | 체크박스 |
|
|
48
|
+
| `db-toggle` | 토글 |
|
|
49
|
+
| `db-badge` | 뱃지 |
|
|
50
|
+
| `db-spinner` | 로딩 스피너 |
|
|
51
|
+
| `db-card` | 카드 |
|
|
52
|
+
| `db-tabs` | 탭 |
|
|
53
|
+
| `db-modal` | 모달 (`<dialog>`) |
|
|
54
|
+
| `db-dropdown` | 드롭다운 |
|
|
55
|
+
| `db-tooltip` | 툴팁 |
|
|
56
|
+
|
|
57
|
+
## 이벤트
|
|
58
|
+
|
|
59
|
+
커스텀 이벤트는 `db-` 접두사를 사용합니다.
|
|
60
|
+
|
|
61
|
+
- `db-click` — Button
|
|
62
|
+
- `db-input` — Input (`detail.value`)
|
|
63
|
+
- `db-change` — Checkbox, Toggle, Tabs, Dropdown
|
|
64
|
+
- `db-close` — Modal
|
|
65
|
+
|
|
66
|
+
## 스타일
|
|
67
|
+
|
|
68
|
+
Light DOM + 글로벌 `--db-*` CSS 변수. 자세한 내용은 [docs/STYLING.md](./docs/STYLING.md).
|
|
69
|
+
|
|
70
|
+
## 프레임워크별 가이드
|
|
71
|
+
|
|
72
|
+
- [멀티플랫폼 가이드](../../docs/MULTI-PLATFORM-GUIDE.md)
|
|
73
|
+
- [크로스플랫폼 컴포넌트 전략](../../docs/CROSS_PLATFORM_COMPONENT_STRATEGY.md)
|
|
74
|
+
- [React 통합](../../docs/REACT-WC-INTEGRATION.md)
|
|
75
|
+
- [Vue / Angular 통합](../../docs/VUE-ANGULAR-INTEGRATION.md)
|
|
76
|
+
|
|
77
|
+
## Storybook
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npm run storybook
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
포트: `6007`
|