@stn-uiux/pub-ui-react 0.1.49 → 0.1.51
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/CHANGELOG.md +423 -387
- package/README.md +50 -48
- package/dist/index.js.map +1 -1
- package/package.json +38 -38
package/README.md
CHANGED
|
@@ -1,75 +1,77 @@
|
|
|
1
1
|
# @stn-uiux/pub-ui-react
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
STN Pub 디자인 시스템의 공식 **React 컴포넌트 라이브러리**입니다.
|
|
4
|
+
엄격한 디자인 토큰 규격과 시맨틱 CSS를 기반으로 최적화된 엔터프라이즈 UI 컴포넌트를 제공합니다.
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
- **버전별 변경 이력:** [CHANGELOG.md](./CHANGELOG.md)
|
|
7
|
+
- **CSS 및 디자인 토큰 패키지:** `@stn-uiux/pub-ui`
|
|
7
8
|
|
|
8
|
-
|
|
9
|
+
---
|
|
9
10
|
|
|
10
|
-
##
|
|
11
|
+
## 설치 (Install)
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @stn-uiux/pub-ui @stn-uiux/pub-ui-react
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
---
|
|
18
|
+
|
|
19
|
+
## 빠른 시작 (Quick Start)
|
|
20
|
+
|
|
21
|
+
### 1) 테마 프로바이더 및 스타일 설정
|
|
22
|
+
|
|
23
|
+
애플리케이션 최상단(예: `App.tsx` 또는 `main.tsx`)에서 CSS를 import하고 `StnProvider`로 감싸줍니다:
|
|
11
24
|
|
|
12
25
|
```tsx
|
|
13
26
|
import '@stn-uiux/pub-ui/styles.css'
|
|
14
|
-
import {
|
|
15
|
-
StnProvider,
|
|
16
|
-
StnButton,
|
|
17
|
-
StnPagination,
|
|
18
|
-
StnPopup,
|
|
19
|
-
StnTable,
|
|
20
|
-
} from '@stn-uiux/pub-ui-react'
|
|
27
|
+
import { StnProvider, StnButton, StnTable } from '@stn-uiux/pub-ui-react'
|
|
21
28
|
|
|
22
29
|
export function App() {
|
|
23
30
|
return (
|
|
24
|
-
<StnProvider theme="
|
|
25
|
-
|
|
31
|
+
<StnProvider theme="dark" applyThemeToDocument>
|
|
32
|
+
<main>
|
|
33
|
+
<StnButton variant="primary" size="md">
|
|
34
|
+
실행
|
|
35
|
+
</StnButton>
|
|
36
|
+
</main>
|
|
26
37
|
</StnProvider>
|
|
27
38
|
)
|
|
28
39
|
}
|
|
29
40
|
```
|
|
30
41
|
|
|
31
|
-
|
|
32
|
-
|----------------|------|
|
|
33
|
-
| `theme` | `'light'` \| `'dark'` — Pub `data-theme` |
|
|
34
|
-
| `applyThemeToDocument` | `true`면 `document.documentElement`에 테마 (제품 앱). `false`면 자식 래퍼만 |
|
|
35
|
-
| `useStn()` | 하위에서 현재 theme 읽기 (선택) |
|
|
42
|
+
### StnProvider Props
|
|
36
43
|
|
|
37
|
-
|
|
44
|
+
| Prop | 타입 | 기본값 | 설명 |
|
|
45
|
+
|------|------|--------|------|
|
|
46
|
+
| `theme` | `'light' \| 'dark'` | `'dark'` | 적용할 디자인 시스템 테마 모드 |
|
|
47
|
+
| `applyThemeToDocument` | `boolean` | `false` | `true`일 경우 `<html>` 태그에 `data-theme` 속성을 자동 적용 |
|
|
48
|
+
| `useStn()` | Hook | - | 하위 컴포넌트에서 현재 테마 상태를 조회하는 훅 |
|
|
38
49
|
|
|
39
|
-
|
|
40
|
-
npx @stn-uiux/pub-ui-react help
|
|
41
|
-
# 1. 컴포넌트 · 2. 패턴 · 3. 레이아웃 → 선택 → src/pages/*.tsx 생성
|
|
42
|
-
```
|
|
43
|
-
|
|
44
|
-
(`npx @stn-uiux/pub-ui help` 도 동일 — 엔진은 `@stn-uiux/pub-ui`)
|
|
50
|
+
---
|
|
45
51
|
|
|
46
|
-
|
|
52
|
+
## 빠른 컴포넌트 생성 CLI
|
|
47
53
|
|
|
48
|
-
|
|
54
|
+
새로운 화면이나 레이아웃 템플릿을 빠르게 구성할 수 있는 대화형 스캐폴딩 도구를 제공합니다:
|
|
49
55
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
| `StnButton` | `.stn-btn` (+ `--primary` · `--medium` · `--icon` · `__label` …) | 레이블 생략 + `icon` = icon-only · **aria-label 필수** |
|
|
54
|
-
| `StnPagination` | `.stn-pub-pagination` | Infomap paging · `stn-pub-pagination.css` |
|
|
55
|
-
| `StnPopup` | `.stn-pub-pop-stack` + `.layer_pop.stn-pub-pop` | portal → `StnLayer.Dim`/`Modal` · `open` / `onClose` |
|
|
56
|
-
| `StnTable` | `.stn-table` 셸 | `stnPubTable` — `Grid`/`Head`/`Body`/`Row`/`Th`/`Td`/`ThCheck`/`TdCheck`/`Sort` |
|
|
57
|
-
| `StnTree` | `.stn-pub-tree` | Infomap folder structure · `stnPubTree` — root/folder/server · guide lines |
|
|
58
|
-
| `StnWidget` | `.ds-widget-item` · `none-bg` | `stnPubWidget` — `background` surface \| none · `kind` |
|
|
59
|
-
| `StnSystemMonitorBadge` · `StnThemeToggle` | `.stn-pub-header-chip--monitor` · `.stn-pub-header-chip--theme` | `stnPubIndicator` |
|
|
56
|
+
```bash
|
|
57
|
+
npx @stn-uiux/pub-ui-react help
|
|
58
|
+
```
|
|
60
59
|
|
|
61
|
-
|
|
60
|
+
---
|
|
62
61
|
|
|
63
|
-
|
|
64
|
-
- 페이지 크기 select 등 일부 테이블 footer 컨트롤
|
|
62
|
+
## 주요 컴포넌트 목록
|
|
65
63
|
|
|
66
|
-
|
|
64
|
+
| 분류 | 컴포넌트 |
|
|
65
|
+
|------|----------|
|
|
66
|
+
| **버튼 & 선택** | `StnButton`, `StnToggleButton`, `StnSegmented` |
|
|
67
|
+
| **폼 입력** | `StnTextField`, `StnDropdown`, `StnCheckbox`, `StnRadio`, `StnSwitch`, `StnSlider`, `StnDatePicker`, `StnDateRangeField` |
|
|
68
|
+
| **데이터 & 상태** | `StnTable`, `StnPagination`, `StnTree`, `StnProgressBar`, `StnLoadingSkeleton` |
|
|
69
|
+
| **배지 & 인디케이터** | `StnBadge`, `StnChip`, `StnSeverityBadge`, `StnSeverityFilter`, `StnSystemChip` |
|
|
70
|
+
| **피드백 & 오버레이** | `StnPopup`, `StnToast`, `StnEventBanner` |
|
|
71
|
+
| **레이아웃 & 네비게이션** | `StnWidget`, `StnLayer`, `StnSideNavigation`, `StnHeaderTitle`, `StnBreadcrumb` |
|
|
67
72
|
|
|
68
|
-
|
|
73
|
+
---
|
|
69
74
|
|
|
70
|
-
##
|
|
75
|
+
## 라이선스
|
|
71
76
|
|
|
72
|
-
|
|
73
|
-
2. `packages/stn-pub-ui-react/src/Stn*.tsx` — `forwardRef` + `cn()` 로 클래스 조합
|
|
74
|
-
3. `src/index.ts` export
|
|
75
|
-
4. DS **React 시작하기** 문서에 한 줄 예시
|
|
77
|
+
Private & Proprietary — STN Design System
|