@loword/loword-design-system 0.1.1 → 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 +24 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
|
|
12
12
|
- **React 19** / **React DOM 19** (peer dependency)
|
|
13
13
|
- **Tailwind CSS v4** — `theme.css` 경로로 쓸 때만 필요합니다. 완성된 `styles.css`만 쓴다면 없어도 됩니다.
|
|
14
|
-
- **Next.js 15** (optional) — `LDTanstackTable`·`LDCollapsibleTanstackTable
|
|
14
|
+
- **Next.js 15** (optional) — `LDTanstackTable`·`LDCollapsibleTanstackTable`은 내부에서 `next/navigation`을 무조건 호출하므로 Next 환경에서만 돕니다.
|
|
15
15
|
|
|
16
16
|
## 설치
|
|
17
17
|
|
|
@@ -21,7 +21,7 @@ npm install @loword/loword-design-system
|
|
|
21
21
|
pnpm add @loword/loword-design-system
|
|
22
22
|
```
|
|
23
23
|
|
|
24
|
-
Editor·Carousel·Drawer·Table·
|
|
24
|
+
Editor·Carousel·Drawer·Table·Chart·DatePicker 같은 일부 컴포넌트는 뒤에 깔린 라이브러리를 **optional peer dependency**로 둡니다. 해당 컴포넌트를 쓸 때만 같이 설치하면 됩니다 — `@tiptap/*`(Editor), `embla-carousel*`(Carousel), `vaul`(Drawer), `@radix-ui/*`(Accordion/Modal/Popover/Tabs/Tooltip), `@tanstack/react-table`·`next`(Table), `chart.js`·`react-chartjs-2`(Chart), `react-day-picker`·`dayjs`(DatePicker/Calendar), `react-hot-toast`(Toast), `react-daum-postcode`(DaumPostButton).
|
|
25
25
|
|
|
26
26
|
## 설정
|
|
27
27
|
|
|
@@ -81,28 +81,45 @@ import LDButton from '@loword/loword-design-system/components/LDButton/LDButton'
|
|
|
81
81
|
|
|
82
82
|
**레이아웃/표시**: `LDBadge` · `LDAvatar` · `LDDivider` · `LDCallout` · `LDEmpty` · `LDSkeleton` · `LDSpinner` · `LDLoadingDots` · `LDProgressBar` · `LDScrollArea` · `LDAccordion` · `LDTeamHistory`
|
|
83
83
|
|
|
84
|
-
**내비게이션**: `LDBreadCrumb` · `LDMenuBar` · `LDTabs` · `LDSectionNav` · `LDPagination` · `LDLNB`
|
|
84
|
+
**내비게이션**: `LDBreadCrumb` · `LDMenuBar` · `LDTabs` · `LDSectionNav` · `LDPagination` · `LDLNB`
|
|
85
85
|
|
|
86
86
|
**오버레이/피드백**: `LDModal` · `LDModalView` · `LDDrawer` · `LDPopover` · `LDTooltip` · `LDToast` · `LDToaster` · `LDNotification`
|
|
87
87
|
|
|
88
|
-
**콘텐츠/데이터**: `LDEditor` · `LDViewer` · `LDCarousel` · `LDChart` · `LDTable` · `LDTanstackTable` · `LDCollapsibleTanstackTable`
|
|
88
|
+
**콘텐츠/데이터**: `LDEditor` · `LDViewer` · `LDCarousel` · `LDChart` · `LDTable` · `LDTanstackTable` · `LDCollapsibleTanstackTable`
|
|
89
89
|
|
|
90
90
|
**폼 연동**: `LDForm` · `LDNativeForm` · `LDFormField` · `LDFormErrorMessage` · `LDFormInput` · `LDFormTextarea` · `LDFormSelect` · `LDFormMultiSelect` · `LDFormCheckbox` · `LDFormCheckboxGroup` · `LDFormRadioGroup` · `LDFormDatePicker` · `LDFormDateRangePicker` · `LDFormTimePicker` · `LDFormToggleButton` · `LDFormOTPInput` · `LDFormRate`
|
|
91
91
|
|
|
92
|
-
|
|
92
|
+
**유틸**: `Show` — 조건부 렌더링 컴포넌트. `when`이 truthy면 `children`, falsy면 `fallback`을 렌더링하고, `children`을 함수로 넘기면 `NonNullable`로 좁혀진 값을 인자로 받습니다.
|
|
93
|
+
|
|
94
|
+
```tsx
|
|
95
|
+
<Show when={user} fallback={<LDSpinner />}>
|
|
96
|
+
{(result) => <span>{result.name}</span>}
|
|
97
|
+
</Show>
|
|
98
|
+
```
|
|
99
|
+
|
|
100
|
+
> barrel의 값 export는 `Show` · `openModal`(`LDModal`의 하위호환 별칭) · `TextareaContent` 셋 말고는 전부 `LD` 접두사입니다. 타입 export에는 예외가 조금 더 있습니다.
|
|
93
101
|
|
|
94
102
|
## 빠른 시작 (개발)
|
|
95
103
|
|
|
96
104
|
```bash
|
|
97
105
|
pnpm install # 의존성 설치
|
|
106
|
+
pnpm switch -c <브랜치> # 열려 있는 release/* 위에 작업 브랜치 생성
|
|
98
107
|
pnpm storybook # Storybook 개발 서버 (port 6006)
|
|
99
108
|
pnpm build # 프로덕션 빌드
|
|
100
109
|
pnpm check-types # 타입 체크
|
|
101
110
|
pnpm lint # ESLint (--fix 포함, src + .storybook)
|
|
102
111
|
pnpm prettier # Prettier
|
|
103
112
|
pnpm test # vitest (utils 유닛 + 스토리 브라우저 실행 + a11y)
|
|
113
|
+
pnpm test:coverage # 커버리지 (utils / components 분리 측정)
|
|
114
|
+
pnpm changeset # .changes/{브랜치명}.md 생성
|
|
104
115
|
```
|
|
105
116
|
|
|
117
|
+
## 변경 기록 (기여)
|
|
118
|
+
|
|
119
|
+
코드를 고쳤으면 `pnpm changeset`으로 **`.changes/{브랜치명}.md`** 를 만들어 같은 PR에 포함합니다. 이 디렉토리가 변경 기록의 유일한 원본이고, `docs/CHANGELOG.md`와 `docs/releases/vX.Y.Z.md`는 배포 시점에 여기서 생성되므로 직접 편집하지 않습니다.
|
|
120
|
+
|
|
121
|
+
작업 브랜치는 `main`이 아니라 열려 있는 `release/*`에서 분기하고 PR base도 거기로 잡습니다(`pnpm switch -c <브랜치>`가 자동으로 처리합니다). 모든 PR은 merge commit으로 머지합니다(squash 금지). 자세한 규칙은 [docs/release-process.md](./docs/release-process.md).
|
|
122
|
+
|
|
106
123
|
## 문서
|
|
107
124
|
|
|
108
125
|
- **아키텍처와 상세 가이드**: [docs/architecture.md](./docs/architecture.md)
|
|
@@ -114,7 +131,8 @@ pnpm test # vitest (utils 유닛 + 스토리 브라우저 실행 + a
|
|
|
114
131
|
- **프리셋 스타일 작성 규칙**: [docs/style-conventions.md](./docs/style-conventions.md)
|
|
115
132
|
- **CSS 캐스케이드 레이어**: [docs/css-layers.md](./docs/css-layers.md) — 컴포넌트 스타일이 왜 이기고 지는지, className override가 안 먹을 때의 진단 순서
|
|
116
133
|
- **타입 컨벤션**: [docs/type-conventions.md](./docs/type-conventions.md)
|
|
117
|
-
-
|
|
134
|
+
- **릴리즈/브랜치 운영**: [docs/release-process.md](./docs/release-process.md) — changeset 작성법, `release/*` 브랜치 흐름, 배포 자동화
|
|
135
|
+
- **변경 이력**: [docs/CHANGELOG.md](./docs/CHANGELOG.md) (생성물) · 버전별 릴리즈 노트는 [docs/releases/](./docs/releases/)
|
|
118
136
|
|
|
119
137
|
## 라이선스
|
|
120
138
|
|