sellmate-design-system-react 0.1.0 → 0.1.2
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 +35 -23
- package/package.json +10 -1
package/README.md
CHANGED
|
@@ -1,17 +1,21 @@
|
|
|
1
1
|
# sellmate-design-system-react
|
|
2
2
|
|
|
3
|
-
Sellmate 디자인 시스템의 React
|
|
4
|
-
기존 Stencil 디자인 시스템(`@sellmate/design-system`)을 네이티브 React 컴포넌트로 이식합니다.
|
|
3
|
+
Sellmate 디자인 시스템의 React 컴포넌트 라이브러리 (React + TypeScript + Tailwind CSS v4).
|
|
5
4
|
|
|
6
5
|
> ⚠️ **소비 앱은 Tailwind CSS v4가 필요합니다.** (v3에서는 클래스가 purge되어 스타일이 적용되지 않습니다.)
|
|
7
6
|
|
|
7
|
+
## 요구 사항
|
|
8
|
+
|
|
9
|
+
- React 18 이상 (`react`, `react-dom`)
|
|
10
|
+
- 방식 1 사용 시 Tailwind CSS v4
|
|
11
|
+
|
|
8
12
|
## 설치
|
|
9
13
|
|
|
10
14
|
```bash
|
|
11
15
|
npm install sellmate-design-system-react
|
|
12
16
|
```
|
|
13
17
|
|
|
14
|
-
##
|
|
18
|
+
## 설정 (방식 1 — 권장, Tailwind v4)
|
|
15
19
|
|
|
16
20
|
소비 앱의 전역 CSS에 다음을 추가합니다.
|
|
17
21
|
|
|
@@ -25,6 +29,16 @@ npm install sellmate-design-system-react
|
|
|
25
29
|
- `theme.css` — 디자인 토큰(`@theme`). 라이브러리와 앱이 같은 토큰을 공유합니다.
|
|
26
30
|
- `@source` — 라이브러리 `dist`를 Tailwind 스캔 대상에 포함시켜 컴포넌트 클래스가 생성되게 합니다. **경로는 여러분의 CSS 파일 위치 기준 상대경로**이며, `node_modules` 전체가 아니라 반드시 이 패키지 `dist`만 지정하세요.
|
|
27
31
|
|
|
32
|
+
## 설정 (방식 2 — 폴백, Tailwind 미사용)
|
|
33
|
+
|
|
34
|
+
Tailwind를 쓰지 않는 앱은 컴파일된 CSS를 직접 import 합니다.
|
|
35
|
+
|
|
36
|
+
```ts
|
|
37
|
+
import "sellmate-design-system-react/styles.css";
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## 사용법
|
|
41
|
+
|
|
28
42
|
```tsx
|
|
29
43
|
import { Button } from "sellmate-design-system-react";
|
|
30
44
|
|
|
@@ -37,29 +51,27 @@ export function Example() {
|
|
|
37
51
|
}
|
|
38
52
|
```
|
|
39
53
|
|
|
40
|
-
##
|
|
41
|
-
|
|
42
|
-
Tailwind를 쓰지 않는 앱은 컴파일된 CSS를 직접 import 합니다.
|
|
54
|
+
## 제공 컴포넌트
|
|
43
55
|
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
56
|
+
| 분류 | 컴포넌트 |
|
|
57
|
+
| --- | --- |
|
|
58
|
+
| 버튼·액션 | `Button` · `GhostButton` · `DropdownButton` · `TextLink` · `Toggle` · `Switch` |
|
|
59
|
+
| 폼 입력 | `Input` · `Textarea` · `NumberInput` · `BarcodeInput` · `Select` · `Checkbox` · `Radio` · `RadioButton` · `Chip` · `ChipInput` · `Field` · `FilePicker` |
|
|
60
|
+
| 날짜 | `Calendar` · `DatePicker` · `DateRangePicker` |
|
|
61
|
+
| 표시·피드백 | `Badge` · `Tag` · `Card` · `Callout` · `Divider` · `Tooltip` · `Popover` · `Popup` · `Guide` · `Toast` |
|
|
62
|
+
| 진행 상태 | `LinearProgress` · `CircleProgress` · `LoadingContainer` · `LoadingModal` |
|
|
63
|
+
| 모달 | `ModalContainer` · `ConfirmModal` · `ActionModal` |
|
|
64
|
+
| 데이터 표시 | `Table` · `KeyValueTable` · `Tabs` · `Pagination` |
|
|
65
|
+
| 아이콘 | `Icon` |
|
|
47
66
|
|
|
48
|
-
|
|
67
|
+
유틸리티로 클래스 병합 헬퍼 `cn`도 export 합니다.
|
|
49
68
|
|
|
50
|
-
|
|
51
|
-
npm install
|
|
52
|
-
npm run build # tsup(ESM+CJS+d.ts) + theme/styles CSS 컴파일 → dist/
|
|
53
|
-
npm run dev # 감시 모드
|
|
54
|
-
npm run typecheck
|
|
55
|
-
```
|
|
69
|
+
## 특징
|
|
56
70
|
|
|
57
|
-
|
|
71
|
+
- **폼 컴포넌트는 form-agnostic** — `forwardRef` + 표준 `value`/`onChange`를 사용하며 특정 폼 라이브러리에 의존하지 않습니다. react-hook-form 등과 자유롭게 조합할 수 있습니다.
|
|
72
|
+
- **단일 라이트 테마** — 다크모드는 지원하지 않습니다.
|
|
73
|
+
- **타입 포함** — 모든 컴포넌트에 TypeScript 타입 정의(`.d.ts`)가 함께 제공됩니다.
|
|
58
74
|
|
|
59
|
-
|
|
60
|
-
- 단순 컴포넌트는 pure React, 복잡/오버레이는 Radix 기반
|
|
61
|
-
- **sd-select**(검색형 콤보박스)만 예외적으로 `@ariakit/react` 사용
|
|
62
|
-
- 폼 컴포넌트는 **form-agnostic** (`forwardRef` + 표준 `value`/`onChange`) — 특정 폼 라이브러리에 의존하지 않음
|
|
63
|
-
- 다크모드 미지원 (단일 라이트 테마)
|
|
75
|
+
## 라이선스
|
|
64
76
|
|
|
65
|
-
|
|
77
|
+
UNLICENSED — Sellmate 내부용 독점 패키지입니다. 무단 사용·복제·재배포를 금합니다.
|
package/package.json
CHANGED
|
@@ -1,7 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "sellmate-design-system-react",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
|
|
5
|
+
"license": "UNLICENSED",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"sellmate",
|
|
8
|
+
"design-system",
|
|
9
|
+
"react",
|
|
10
|
+
"tailwindcss",
|
|
11
|
+
"components",
|
|
12
|
+
"ui"
|
|
13
|
+
],
|
|
5
14
|
"type": "module",
|
|
6
15
|
"sideEffects": [
|
|
7
16
|
"**/*.css"
|