@loword/loword-design-system 0.0.3 → 0.0.5
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 +77 -3
- package/dist/components/LDEditor/LDEditor.js +6 -6
- package/dist/components/{FileUpload/FileUploadBase.d.ts → LDFileUpload/LDFileUploadBase.d.ts} +3 -3
- package/dist/components/LDFileUpload/LDFileUploadBase.d.ts.map +1 -0
- package/dist/components/{FileUpload/FileUploadBase.js → LDFileUpload/LDFileUploadBase.js} +7 -7
- package/dist/components/{LNB/LNBBase.d.ts → LDLNB/LDLNBBase.d.ts} +3 -3
- package/dist/components/LDLNB/LDLNBBase.d.ts.map +1 -0
- package/dist/components/{LNB/LNBBase.js → LDLNB/LDLNBBase.js} +3 -3
- package/dist/components/{Toast/Toast.d.ts → LDToast/LDToast.d.ts} +3 -3
- package/dist/components/LDToast/LDToast.d.ts.map +1 -0
- package/dist/components/{Toast/Toast.js → LDToast/LDToast.js} +2 -2
- package/dist/components/LDToast/LDToaster.d.ts +7 -0
- package/dist/components/LDToast/LDToaster.d.ts.map +1 -0
- package/dist/components/{Toast/Toaster.js → LDToast/LDToaster.js} +2 -2
- package/dist/index.d.ts +4 -4
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -7
- package/package.json +2 -2
- package/dist/components/Avatar/Avatar.d.ts +0 -11
- package/dist/components/Avatar/Avatar.d.ts.map +0 -1
- package/dist/components/Avatar/Avatar.js +0 -24
- package/dist/components/Avatar/AvatarBase.d.ts +0 -32
- package/dist/components/Avatar/AvatarBase.d.ts.map +0 -1
- package/dist/components/Avatar/AvatarBase.js +0 -49
- package/dist/components/Badge/Badge.d.ts +0 -25
- package/dist/components/Badge/Badge.d.ts.map +0 -1
- package/dist/components/Badge/Badge.js +0 -36
- package/dist/components/Badge/BadgeBase.d.ts +0 -10
- package/dist/components/Badge/BadgeBase.d.ts.map +0 -1
- package/dist/components/Badge/BadgeBase.js +0 -9
- package/dist/components/BreadCrumb/BreadCrumb.d.ts +0 -17
- package/dist/components/BreadCrumb/BreadCrumb.d.ts.map +0 -1
- package/dist/components/BreadCrumb/BreadCrumb.js +0 -37
- package/dist/components/BreadCrumb/BreadCrumbBase.d.ts +0 -9
- package/dist/components/BreadCrumb/BreadCrumbBase.d.ts.map +0 -1
- package/dist/components/BreadCrumb/BreadCrumbBase.js +0 -17
- package/dist/components/Button/Button.d.ts +0 -26
- package/dist/components/Button/Button.d.ts.map +0 -1
- package/dist/components/Button/Button.js +0 -102
- package/dist/components/Button/ButtonBase.d.ts +0 -5
- package/dist/components/Button/ButtonBase.d.ts.map +0 -1
- package/dist/components/Button/ButtonBase.js +0 -10
- package/dist/components/Button/ButtonSpinner.d.ts +0 -8
- package/dist/components/Button/ButtonSpinner.d.ts.map +0 -1
- package/dist/components/Button/ButtonSpinner.js +0 -15
- package/dist/components/Calendar/Calendar.d.ts +0 -16
- package/dist/components/Calendar/Calendar.d.ts.map +0 -1
- package/dist/components/Calendar/Calendar.js +0 -75
- package/dist/components/Callout/Callout.d.ts +0 -10
- package/dist/components/Callout/Callout.d.ts.map +0 -1
- package/dist/components/Callout/Callout.js +0 -6
- package/dist/components/Callout/CalloutBase.d.ts +0 -18
- package/dist/components/Callout/CalloutBase.d.ts.map +0 -1
- package/dist/components/Callout/CalloutBase.js +0 -21
- package/dist/components/Carousel/Carousel.d.ts +0 -50
- package/dist/components/Carousel/Carousel.d.ts.map +0 -1
- package/dist/components/Carousel/Carousel.js +0 -22
- package/dist/components/Carousel/CarouselBase.d.ts +0 -98
- package/dist/components/Carousel/CarouselBase.d.ts.map +0 -1
- package/dist/components/Carousel/CarouselBase.js +0 -144
- package/dist/components/Checkbox/Checkbox.d.ts +0 -27
- package/dist/components/Checkbox/Checkbox.d.ts.map +0 -1
- package/dist/components/Checkbox/Checkbox.js +0 -30
- package/dist/components/Checkbox/CheckboxBase.d.ts +0 -40
- package/dist/components/Checkbox/CheckboxBase.d.ts.map +0 -1
- package/dist/components/Checkbox/CheckboxBase.js +0 -57
- package/dist/components/Checkbox/CheckboxGroup.d.ts +0 -22
- package/dist/components/Checkbox/CheckboxGroup.d.ts.map +0 -1
- package/dist/components/Checkbox/CheckboxGroup.js +0 -13
- package/dist/components/Checkbox/FormCheckbox.d.ts +0 -14
- package/dist/components/Checkbox/FormCheckbox.d.ts.map +0 -1
- package/dist/components/Checkbox/FormCheckbox.js +0 -9
- package/dist/components/Checkbox/FormCheckboxGroup.d.ts +0 -13
- package/dist/components/Checkbox/FormCheckboxGroup.d.ts.map +0 -1
- package/dist/components/Checkbox/FormCheckboxGroup.js +0 -9
- package/dist/components/DataCalendar/DataCalendar.d.ts +0 -12
- package/dist/components/DataCalendar/DataCalendar.d.ts.map +0 -1
- package/dist/components/DataCalendar/DataCalendar.js +0 -13
- package/dist/components/DataCalendar/DataCalendarBase.d.ts +0 -45
- package/dist/components/DataCalendar/DataCalendarBase.d.ts.map +0 -1
- package/dist/components/DataCalendar/DataCalendarBase.js +0 -57
- package/dist/components/DatePicker/DatePicker.d.ts +0 -34
- package/dist/components/DatePicker/DatePicker.d.ts.map +0 -1
- package/dist/components/DatePicker/DatePicker.js +0 -44
- package/dist/components/DatePicker/FormDatePicker.d.ts +0 -12
- package/dist/components/DatePicker/FormDatePicker.d.ts.map +0 -1
- package/dist/components/DatePicker/FormDatePicker.js +0 -12
- package/dist/components/DateRangePicker/DateRangePicker.d.ts +0 -49
- package/dist/components/DateRangePicker/DateRangePicker.d.ts.map +0 -1
- package/dist/components/DateRangePicker/DateRangePicker.js +0 -197
- package/dist/components/DateRangePicker/FormDateRangePicker.d.ts +0 -12
- package/dist/components/DateRangePicker/FormDateRangePicker.d.ts.map +0 -1
- package/dist/components/DateRangePicker/FormDateRangePicker.js +0 -10
- package/dist/components/Divider/Divider.d.ts +0 -9
- package/dist/components/Divider/Divider.d.ts.map +0 -1
- package/dist/components/Divider/Divider.js +0 -11
- package/dist/components/Divider/DividerBase.d.ts +0 -9
- package/dist/components/Divider/DividerBase.d.ts.map +0 -1
- package/dist/components/Divider/DividerBase.js +0 -9
- package/dist/components/Drawer/Drawer.d.ts +0 -51
- package/dist/components/Drawer/Drawer.d.ts.map +0 -1
- package/dist/components/Drawer/Drawer.js +0 -30
- package/dist/components/Drawer/DrawerBase.d.ts +0 -52
- package/dist/components/Drawer/DrawerBase.d.ts.map +0 -1
- package/dist/components/Drawer/DrawerBase.js +0 -38
- package/dist/components/Editor/Editor.d.ts +0 -12
- package/dist/components/Editor/Editor.d.ts.map +0 -1
- package/dist/components/Editor/Editor.js +0 -162
- package/dist/components/Editor/EditorBase.d.ts +0 -52
- package/dist/components/Editor/EditorBase.d.ts.map +0 -1
- package/dist/components/Editor/EditorBase.js +0 -89
- package/dist/components/Editor/Viewer.d.ts +0 -7
- package/dist/components/Editor/Viewer.d.ts.map +0 -1
- package/dist/components/Editor/Viewer.js +0 -9
- package/dist/components/Editor/extensions.d.ts +0 -6
- package/dist/components/Editor/extensions.d.ts.map +0 -1
- package/dist/components/Editor/extensions.js +0 -38
- package/dist/components/FileUpload/FileUploadBase.d.ts.map +0 -1
- package/dist/components/Input/FormInput.d.ts +0 -15
- package/dist/components/Input/FormInput.d.ts.map +0 -1
- package/dist/components/Input/FormInput.js +0 -19
- package/dist/components/Input/Input.d.ts +0 -24
- package/dist/components/Input/Input.d.ts.map +0 -1
- package/dist/components/Input/Input.js +0 -71
- package/dist/components/Input/InputBase.d.ts +0 -22
- package/dist/components/Input/InputBase.d.ts.map +0 -1
- package/dist/components/Input/InputBase.js +0 -17
- package/dist/components/LNB/LNBBase.d.ts.map +0 -1
- package/dist/components/LoadingDots/LoadingDots.d.ts +0 -8
- package/dist/components/LoadingDots/LoadingDots.d.ts.map +0 -1
- package/dist/components/LoadingDots/LoadingDots.js +0 -29
- package/dist/components/MenuBar/MenuBar.d.ts +0 -21
- package/dist/components/MenuBar/MenuBar.d.ts.map +0 -1
- package/dist/components/MenuBar/MenuBar.js +0 -33
- package/dist/components/MenuBar/MenuBarBase.d.ts +0 -43
- package/dist/components/MenuBar/MenuBarBase.d.ts.map +0 -1
- package/dist/components/MenuBar/MenuBarBase.js +0 -69
- package/dist/components/Modal/Modal.d.ts +0 -51
- package/dist/components/Modal/Modal.d.ts.map +0 -1
- package/dist/components/Modal/Modal.js +0 -72
- package/dist/components/Modal/ModalBase.d.ts +0 -42
- package/dist/components/Modal/ModalBase.d.ts.map +0 -1
- package/dist/components/Modal/ModalBase.js +0 -30
- package/dist/components/Modal/openModal.d.ts +0 -24
- package/dist/components/Modal/openModal.d.ts.map +0 -1
- package/dist/components/Modal/openModal.js +0 -52
- package/dist/components/OTPInput/OTPInput.d.ts +0 -46
- package/dist/components/OTPInput/OTPInput.d.ts.map +0 -1
- package/dist/components/OTPInput/OTPInput.js +0 -87
- package/dist/components/Pagination/Pagination.d.ts +0 -12
- package/dist/components/Pagination/Pagination.d.ts.map +0 -1
- package/dist/components/Pagination/Pagination.js +0 -5
- package/dist/components/Pagination/PaginationBase.d.ts +0 -36
- package/dist/components/Pagination/PaginationBase.d.ts.map +0 -1
- package/dist/components/Pagination/PaginationBase.js +0 -44
- package/dist/components/Pagination/paginationUtils.d.ts +0 -2
- package/dist/components/Pagination/paginationUtils.d.ts.map +0 -1
- package/dist/components/Pagination/paginationUtils.js +0 -18
- package/dist/components/Popover/Popover.d.ts +0 -42
- package/dist/components/Popover/Popover.d.ts.map +0 -1
- package/dist/components/Popover/Popover.js +0 -31
- package/dist/components/Popover/PopoverBase.d.ts +0 -31
- package/dist/components/Popover/PopoverBase.d.ts.map +0 -1
- package/dist/components/Popover/PopoverBase.js +0 -18
- package/dist/components/Radio/FormRadioGroup.d.ts +0 -13
- package/dist/components/Radio/FormRadioGroup.d.ts.map +0 -1
- package/dist/components/Radio/FormRadioGroup.js +0 -9
- package/dist/components/Radio/Radio.d.ts +0 -24
- package/dist/components/Radio/Radio.d.ts.map +0 -1
- package/dist/components/Radio/Radio.js +0 -39
- package/dist/components/Radio/RadioBase.d.ts +0 -38
- package/dist/components/Radio/RadioBase.d.ts.map +0 -1
- package/dist/components/Radio/RadioBase.js +0 -46
- package/dist/components/Radio/RadioGroup.d.ts +0 -22
- package/dist/components/Radio/RadioGroup.d.ts.map +0 -1
- package/dist/components/Radio/RadioGroup.js +0 -7
- package/dist/components/ScrollArea/ScrollArea.d.ts +0 -15
- package/dist/components/ScrollArea/ScrollArea.d.ts.map +0 -1
- package/dist/components/ScrollArea/ScrollArea.js +0 -10
- package/dist/components/Select/FormMultiSelect.d.ts +0 -13
- package/dist/components/Select/FormMultiSelect.d.ts.map +0 -1
- package/dist/components/Select/FormMultiSelect.js +0 -14
- package/dist/components/Select/FormSelect.d.ts +0 -13
- package/dist/components/Select/FormSelect.d.ts.map +0 -1
- package/dist/components/Select/FormSelect.js +0 -10
- package/dist/components/Select/MultiSelect.d.ts +0 -31
- package/dist/components/Select/MultiSelect.d.ts.map +0 -1
- package/dist/components/Select/MultiSelect.js +0 -59
- package/dist/components/Select/Select.d.ts +0 -41
- package/dist/components/Select/Select.d.ts.map +0 -1
- package/dist/components/Select/Select.js +0 -55
- package/dist/components/Select/SelectBase.d.ts +0 -59
- package/dist/components/Select/SelectBase.d.ts.map +0 -1
- package/dist/components/Select/SelectBase.js +0 -211
- package/dist/components/Skeleton/Skeleton.d.ts +0 -10
- package/dist/components/Skeleton/Skeleton.d.ts.map +0 -1
- package/dist/components/Skeleton/Skeleton.js +0 -8
- package/dist/components/Slider/Slider.d.ts +0 -23
- package/dist/components/Slider/Slider.d.ts.map +0 -1
- package/dist/components/Slider/Slider.js +0 -195
- package/dist/components/Spinner/Spinner.d.ts +0 -25
- package/dist/components/Spinner/Spinner.d.ts.map +0 -1
- package/dist/components/Spinner/Spinner.js +0 -20
- package/dist/components/Table/Table.d.ts +0 -34
- package/dist/components/Table/Table.d.ts.map +0 -1
- package/dist/components/Table/Table.js +0 -29
- package/dist/components/Table/TableBase.d.ts +0 -37
- package/dist/components/Table/TableBase.d.ts.map +0 -1
- package/dist/components/Table/TableBase.js +0 -39
- package/dist/components/Table/TableField.d.ts +0 -64
- package/dist/components/Table/TableField.d.ts.map +0 -1
- package/dist/components/Table/TableField.js +0 -87
- package/dist/components/Table/TanstackTable.d.ts +0 -23
- package/dist/components/Table/TanstackTable.d.ts.map +0 -1
- package/dist/components/Table/TanstackTable.js +0 -35
- package/dist/components/TimePicker/FormTimePicker.d.ts +0 -12
- package/dist/components/TimePicker/FormTimePicker.d.ts.map +0 -1
- package/dist/components/TimePicker/FormTimePicker.js +0 -12
- package/dist/components/TimePicker/TimePicker.d.ts +0 -27
- package/dist/components/TimePicker/TimePicker.d.ts.map +0 -1
- package/dist/components/TimePicker/TimePicker.js +0 -120
- package/dist/components/Toast/Toast.d.ts.map +0 -1
- package/dist/components/Toast/Toaster.d.ts +0 -7
- package/dist/components/Toast/Toaster.d.ts.map +0 -1
- package/dist/components/ToggleButton/FormToggleButton.d.ts +0 -12
- package/dist/components/ToggleButton/FormToggleButton.d.ts.map +0 -1
- package/dist/components/ToggleButton/FormToggleButton.js +0 -9
- package/dist/components/ToggleButton/ToggleButton.d.ts +0 -31
- package/dist/components/ToggleButton/ToggleButton.d.ts.map +0 -1
- package/dist/components/ToggleButton/ToggleButton.js +0 -42
- package/dist/components/ToggleButton/ToggleButtonBase.d.ts +0 -41
- package/dist/components/ToggleButton/ToggleButtonBase.d.ts.map +0 -1
- package/dist/components/ToggleButton/ToggleButtonBase.js +0 -59
- package/dist/components/Tooltip/Tooltip.d.ts +0 -18
- package/dist/components/Tooltip/Tooltip.d.ts.map +0 -1
- package/dist/components/Tooltip/Tooltip.js +0 -13
- package/dist/components/Tooltip/TooltipBase.d.ts +0 -39
- package/dist/components/Tooltip/TooltipBase.d.ts.map +0 -1
- package/dist/components/Tooltip/TooltipBase.js +0 -46
package/README.md
CHANGED
|
@@ -1,24 +1,93 @@
|
|
|
1
1
|
# @loword/loword-design-system
|
|
2
2
|
|
|
3
|
-
loword
|
|
3
|
+
[](https://www.npmjs.com/package/@loword/loword-design-system)
|
|
4
|
+
[](./LICENSE)
|
|
5
|
+
|
|
6
|
+
로워드 디자인 시스템 — React 19 컴포넌트 패키지. Tailwind CSS v4 기반이며 NPM(ESM)으로 배포됩니다.
|
|
7
|
+
|
|
8
|
+
> 모든 공개 컴포넌트는 `LD` 접두사를 사용합니다 (예: `LDButton`, `LDModal`, `LDInput`).
|
|
9
|
+
|
|
10
|
+
## 요구사항
|
|
11
|
+
|
|
12
|
+
- **React 19** / **React DOM 19** (peer dependency)
|
|
13
|
+
- **Tailwind CSS v4** — 스타일 적용을 위해 필요
|
|
14
|
+
- **Next.js 15** — 일부 컴포넌트(`LDTanstackTable`, `LDBreadCrumb`)는 `next/navigation`·`next/link`에 의존하므로 Next 환경에서만 동작 (optional)
|
|
4
15
|
|
|
5
16
|
## 설치
|
|
6
17
|
|
|
7
18
|
```bash
|
|
8
19
|
npm install @loword/loword-design-system
|
|
20
|
+
# 또는
|
|
21
|
+
pnpm add @loword/loword-design-system
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
특정 컴포넌트(Editor, Carousel, Drawer, Table, Select, DatePicker 등)는 해당 기능의 라이브러리를 **optional peer dependency**로 사용합니다. 그 컴포넌트를 쓸 때만 함께 설치하세요 — 예: `@tiptap/*`(Editor), `embla-carousel-react`(Carousel), `vaul`(Drawer), `@radix-ui/*`(Modal/Popover/Tooltip/Select), `@tanstack/react-table`(Table), `react-day-picker`·`dayjs`(DatePicker), `react-hot-toast`(Toast).
|
|
25
|
+
|
|
26
|
+
## 설정
|
|
27
|
+
|
|
28
|
+
스타일시트를 앱 진입점에서 **한 번** import 합니다.
|
|
29
|
+
|
|
30
|
+
```ts
|
|
31
|
+
import '@loword/loword-design-system/styles.css';
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## 사용
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { LDButton } from '@loword/loword-design-system';
|
|
38
|
+
|
|
39
|
+
export default function Example() {
|
|
40
|
+
return (
|
|
41
|
+
<LDButton variant="solid" color="point" onClick={() => alert('clicked')}>
|
|
42
|
+
확인
|
|
43
|
+
</LDButton>
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
명령형 API 예시:
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
import { openModal, Toast } from '@loword/loword-design-system';
|
|
52
|
+
|
|
53
|
+
const result = await openModal({ title: '삭제할까요?', /* ... */ });
|
|
54
|
+
Toast.success('저장되었습니다');
|
|
9
55
|
```
|
|
10
56
|
|
|
57
|
+
### import 방식
|
|
58
|
+
|
|
11
59
|
```ts
|
|
12
|
-
|
|
13
|
-
import '@loword/loword-design-system
|
|
60
|
+
// 1) barrel — 이름으로 가져오기
|
|
61
|
+
import { LDButton, LDModal, LDInput } from '@loword/loword-design-system';
|
|
62
|
+
|
|
63
|
+
// 2) 개별 경로 — 트리셰이킹/명시적 경로
|
|
64
|
+
import LDButton from '@loword/loword-design-system/components/LDButton/LDButton';
|
|
14
65
|
```
|
|
15
66
|
|
|
67
|
+
## 컴포넌트
|
|
68
|
+
|
|
69
|
+
**기본/입력**: `LDButton` · `LDInput` · `LDCheckbox` · `LDCheckboxGroup` · `LDRadio` · `LDRadioGroup` · `LDSelect` · `LDMultiSelect` · `LDToggleButton` · `LDSlider` · `LDOTPInput` · `LDFileUploadBase`
|
|
70
|
+
|
|
71
|
+
**날짜/시간**: `LDCalendar` · `LDDataCalendar` · `LDDatePicker` · `LDDateRangePicker` · `LDTimePicker`
|
|
72
|
+
|
|
73
|
+
**레이아웃/표시**: `LDBadge` · `LDAvatar` · `LDDivider` · `LDCallout` · `LDSkeleton` · `LDSpinner` · `LDLoadingDots` · `LDScrollArea` · `LDBreadCrumb` · `LDMenuBar` · `LDLNBBase`
|
|
74
|
+
|
|
75
|
+
**오버레이/피드백/내비**: `LDModal` (+ `openModal`) · `LDDrawer` · `LDPopover` · `LDTooltip` · `LDToast` · `LDToaster`
|
|
76
|
+
|
|
77
|
+
**콘텐츠**: `LDEditor` · `LDViewer` · `LDCarousel` · `LDTable` · `LDTanstackTable` · `LDPagination`
|
|
78
|
+
|
|
79
|
+
**폼 연동 / 헬퍼** (LD 접두사 없음): `Form` · `NativeForm` · `FormField` · `FormErrorMessage` · `FormInput` · `FormSelect` · `FormMultiSelect` · `FormCheckbox` · `FormCheckboxGroup` · `FormRadioGroup` · `FormDatePicker` · `FormDateRangePicker` · `FormTimePicker` · `FormToggleButton` · `TableField` · `LucideIcon`
|
|
80
|
+
|
|
81
|
+
> 폼 래퍼(`Form*`, `TableField`)와 `LucideIcon`은 디자인 컴포넌트가 아니므로 원래 이름을 유지합니다.
|
|
82
|
+
|
|
16
83
|
## 빠른 시작 (개발)
|
|
17
84
|
|
|
18
85
|
```bash
|
|
19
86
|
pnpm install # 의존성 설치
|
|
20
87
|
pnpm storybook # Storybook 개발 서버 (port 6006)
|
|
21
88
|
pnpm build # 프로덕션 빌드
|
|
89
|
+
pnpm check-types # 타입 체크
|
|
90
|
+
pnpm lint # 린트 (--max-warnings 0)
|
|
22
91
|
```
|
|
23
92
|
|
|
24
93
|
## 문서
|
|
@@ -29,3 +98,8 @@ pnpm build # 프로덕션 빌드
|
|
|
29
98
|
- 스타일 체계 (디자인 토큰, `cn()`)
|
|
30
99
|
- Storybook 스타일 제어 및 stories 생성 방법
|
|
31
100
|
- Props 문서화 (JSDoc)
|
|
101
|
+
- **변경 이력**: [docs/CHANGELOG.md](./docs/CHANGELOG.md)
|
|
102
|
+
|
|
103
|
+
## 라이선스
|
|
104
|
+
|
|
105
|
+
[MIT](./LICENSE)
|
|
@@ -6,7 +6,7 @@ import { useEditorState } from '@tiptap/react';
|
|
|
6
6
|
import EditorBase, { useEditorContext } from './EditorBase.js';
|
|
7
7
|
import { createEditorExtensions } from './extensions.js';
|
|
8
8
|
import cn from '../../utils/cn.js';
|
|
9
|
-
import
|
|
9
|
+
import LDToast from '../LDToast/LDToast.js';
|
|
10
10
|
import { fileToBase64, getFileSizeUnit, isImage, validAllowedExtesions, validFileSize, validImageSize, } from '../../utils/file.js';
|
|
11
11
|
import { FILE_EXTENSIONS, TOOLBAR_ALLOWED_EXTENSIONS, TOOLBAR_MAX_SIZE, } from '../../constants/file.js';
|
|
12
12
|
const FONT_SIZES = [
|
|
@@ -76,15 +76,15 @@ const EditorToolbar = ({ handleImageUpload, }) => {
|
|
|
76
76
|
const file = files[0];
|
|
77
77
|
if (!validAllowedExtesions(file, TOOLBAR_ALLOWED_EXTENSIONS)) {
|
|
78
78
|
const allowedFiles = TOOLBAR_ALLOWED_EXTENSIONS.map((item) => FILE_EXTENSIONS[item].toUpperCase()).join(', ');
|
|
79
|
-
|
|
79
|
+
LDToast.error(`지원하지 않는 파일 형식입니다. ${allowedFiles} 파일만 업로드 가능합니다.`);
|
|
80
80
|
return;
|
|
81
81
|
}
|
|
82
82
|
if (!validFileSize(file, TOOLBAR_MAX_SIZE)) {
|
|
83
|
-
|
|
83
|
+
LDToast.error(`파일 크기가 너무 큽니다. ${getFileSizeUnit(TOOLBAR_MAX_SIZE)} 이하 파일을 선택해주세요.`);
|
|
84
84
|
return;
|
|
85
85
|
}
|
|
86
86
|
if (isImage(file.name) && !(await validImageSize(file))) {
|
|
87
|
-
|
|
87
|
+
LDToast.error('이미지 해상도가 너무 큽니다. 더 작은 이미지를 선택해주세요.');
|
|
88
88
|
return;
|
|
89
89
|
}
|
|
90
90
|
try {
|
|
@@ -94,13 +94,13 @@ const EditorToolbar = ({ handleImageUpload, }) => {
|
|
|
94
94
|
fileName,
|
|
95
95
|
});
|
|
96
96
|
if (!res) {
|
|
97
|
-
|
|
97
|
+
LDToast.error('이미지 업로드에 실패했습니다.');
|
|
98
98
|
return;
|
|
99
99
|
}
|
|
100
100
|
editor.commands.setImage({ src: res });
|
|
101
101
|
}
|
|
102
102
|
catch {
|
|
103
|
-
|
|
103
|
+
LDToast.error('파일 업로드 중 문제가 발생했습니다. 잠시 후 다시 시도해주세요.');
|
|
104
104
|
}
|
|
105
105
|
};
|
|
106
106
|
if (!editor || !state)
|
package/dist/components/{FileUpload/FileUploadBase.d.ts → LDFileUpload/LDFileUploadBase.d.ts}
RENAMED
|
@@ -35,7 +35,7 @@ interface LDInputProps extends LDButtonProps<'button'> {
|
|
|
35
35
|
}) => Promise<string | void>;
|
|
36
36
|
label?: string;
|
|
37
37
|
}
|
|
38
|
-
export declare const
|
|
38
|
+
export declare const LDFileUploadBase: {
|
|
39
39
|
Root: ({ recommendedSize, maxSize, allowedExtensions, maxFileCount, fileList, setFileList, className, children, }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
40
40
|
LDInput: ({ onChangeFile, label, ...props }: LDInputProps) => import("react/jsx-runtime").JSX.Element;
|
|
41
41
|
CardList: ({ emptyContent, className, }: {
|
|
@@ -46,5 +46,5 @@ export declare const FileUploadBase: {
|
|
|
46
46
|
className?: string;
|
|
47
47
|
}) => import("react/jsx-runtime").JSX.Element;
|
|
48
48
|
};
|
|
49
|
-
export default
|
|
50
|
-
//# sourceMappingURL=
|
|
49
|
+
export default LDFileUploadBase;
|
|
50
|
+
//# sourceMappingURL=LDFileUploadBase.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LDFileUploadBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDFileUpload/LDFileUploadBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,QAAQ,EACR,KAAK,SAAS,EACd,cAAc,EAGf,MAAM,OAAO,CAAC;AAEf,OAAO,EAAmB,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAClE,OAAiB,EACf,KAAK,aAAa,EACnB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAGL,KAAK,EAKN,MAAM,kBAAkB,CAAC;AAG1B,UAAU,qBAAqB;IAC7B,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,CAAC;IAClB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IAC/C,YAAY,EAAE,MAAM,CAAC;CACtB;AAID,eAAO,MAAM,oBAAoB,6BAUhC,CAAC;AAEF,UAAU,SAAS;IACjB,eAAe,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACpD,OAAO,EAAE,MAAM,CAAC;IAChB,iBAAiB,EAAE,SAAS,EAAE,CAAC;IAC/B,QAAQ,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC;IACvB,WAAW,EAAE,QAAQ,CAAC,cAAc,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC,CAAC;IACpD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AA8BD,UAAU,YAAa,SAAQ,aAAa,CAAC,QAAQ,CAAC;IACpD,YAAY,EAAE,CAAC,EACb,QAAQ,EACR,UAAU,EACV,IAAI,GACL,EAAE;QACD,QAAQ,EAAE,MAAM,CAAC;QACjB,UAAU,EAAE,MAAM,CAAC;QACnB,IAAI,EAAE,IAAI,CAAC;KACZ,KAAK,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmJD,eAAO,MAAM,gBAAgB;uHAjL1B,SAAS;iDAoCT,YAAY;6CA2EZ;QACD,YAAY,CAAC,EAAE,SAAS,CAAC;QACzB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;iCA6CmC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE;CAuBzD,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -5,12 +5,12 @@ import cn from '../../utils/cn.js';
|
|
|
5
5
|
import { FILE_EXTENSIONS } from '../../constants/file.js';
|
|
6
6
|
import LDButton from '../../components/LDButton/LDButton.js';
|
|
7
7
|
import { fileToBase64, getFileSizeUnit, isImage, validAllowedExtesions, validFileSize, validImageSize, } from '../../utils/file.js';
|
|
8
|
-
import
|
|
8
|
+
import LDToast from '../../components/LDToast/LDToast.js';
|
|
9
9
|
const FileUploadContext = createContext(null);
|
|
10
10
|
export const useFileUploadContext = () => {
|
|
11
11
|
const fileUploadContext = useContext(FileUploadContext);
|
|
12
12
|
if (!fileUploadContext) {
|
|
13
|
-
throw new Error('
|
|
13
|
+
throw new Error('LDFileUploadBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
|
|
14
14
|
}
|
|
15
15
|
return fileUploadContext;
|
|
16
16
|
};
|
|
@@ -49,7 +49,7 @@ const LDInput = ({ onChangeFile, label = '파일 선택', ...props }) => {
|
|
|
49
49
|
for (const file of files) {
|
|
50
50
|
const error = await getFileError(file);
|
|
51
51
|
if (error) {
|
|
52
|
-
|
|
52
|
+
LDToast.error(error);
|
|
53
53
|
return;
|
|
54
54
|
}
|
|
55
55
|
}
|
|
@@ -63,10 +63,10 @@ const LDInput = ({ onChangeFile, label = '파일 선택', ...props }) => {
|
|
|
63
63
|
}
|
|
64
64
|
catch (error) {
|
|
65
65
|
if (error instanceof Error) {
|
|
66
|
-
|
|
66
|
+
LDToast.error(error.message);
|
|
67
67
|
return;
|
|
68
68
|
}
|
|
69
|
-
|
|
69
|
+
LDToast.error('파일 업로드 중 문제가 발생했습니다. 잠시후 다시 시도해주세요.');
|
|
70
70
|
}
|
|
71
71
|
}
|
|
72
72
|
};
|
|
@@ -93,10 +93,10 @@ const Description = ({ className }) => {
|
|
|
93
93
|
const extensionsText = ` (${allowedExtensions.map((item) => FILE_EXTENSIONS[item]).join(', ')})`;
|
|
94
94
|
return (_jsxs("p", { className: cn('display14 text-neutral400 semibold', className), children: [recommendedSizeText, requiredText, extensionsText] }));
|
|
95
95
|
};
|
|
96
|
-
export const
|
|
96
|
+
export const LDFileUploadBase = {
|
|
97
97
|
Root,
|
|
98
98
|
LDInput,
|
|
99
99
|
CardList,
|
|
100
100
|
Description,
|
|
101
101
|
};
|
|
102
|
-
export default
|
|
102
|
+
export default LDFileUploadBase;
|
|
@@ -66,7 +66,7 @@ interface MenuSubItemProps {
|
|
|
66
66
|
className?: string;
|
|
67
67
|
[key: string]: unknown;
|
|
68
68
|
}
|
|
69
|
-
declare const
|
|
69
|
+
declare const LDLNBBase: {
|
|
70
70
|
Provider: ({ children, isMobile, items, pathname, defaultCollapsed, }: ProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
71
71
|
Root: ({ children, className }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
72
72
|
Trigger: ({ className }: TriggerProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -78,5 +78,5 @@ declare const LNBBase: {
|
|
|
78
78
|
MenuSub: ({ children, className }: MenuSubProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
79
79
|
MenuSubItem: ({ as: Comp, href, isActive, children, className, ...rest }: MenuSubItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
80
80
|
};
|
|
81
|
-
export default
|
|
82
|
-
//# sourceMappingURL=
|
|
81
|
+
export default LDLNBBase;
|
|
82
|
+
//# sourceMappingURL=LDLNBBase.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LDLNBBase.d.ts","sourceRoot":"","sources":["../../../src/components/LDLNB/LDLNBBase.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAapD,MAAM,WAAW,OAAO;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA0BD,UAAU,aAAa;IACrB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAyDD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2BD,UAAU,YAAY;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA0BD,UAAU,WAAW;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAqCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAkBD,UAAU,UAAU;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAqCD,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6BD,UAAU,aAAa;IACrB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAiCD,UAAU,YAAY;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAYD,UAAU,gBAAgB;IACxB,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AA2BD,QAAA,MAAM,SAAS;2EA/UZ,aAAa;oCAsDuB,SAAS;6BA6BhB,YAAY;0DA+BiB,WAAW;uCAwC9B,YAAY;2CAsBR,UAAU;oDA0CG,SAAS;iFA6CjE,aAAa;uCA4B0B,YAAY;8EA0BnD,gBAAgB;CA6BlB,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -9,7 +9,7 @@ const LNBContext = createContext(null);
|
|
|
9
9
|
const useLNBContext = () => {
|
|
10
10
|
const ctx = useContext(LNBContext);
|
|
11
11
|
if (!ctx)
|
|
12
|
-
throw new Error('
|
|
12
|
+
throw new Error('LDLNBBase 서브컴포넌트는 LDLNBBase.Provider 내부에서 사용해야 합니다.');
|
|
13
13
|
return ctx;
|
|
14
14
|
};
|
|
15
15
|
const Provider = ({ children, isMobile, items = [], pathname = '', defaultCollapsed = false, }) => {
|
|
@@ -93,7 +93,7 @@ const MenuSub = ({ children, className }) => {
|
|
|
93
93
|
const MenuSubItem = ({ as: Comp = 'a', href, isActive, children, className, ...rest }) => (_jsx(Comp, { href: href, className: cn('flex gap-sm w-full items-center p-sm display14 medium', 'text-neutral500 cursor-pointer hover:bg-mono300 rounded-[5px] hover:text-mono900 ld-transition', isActive &&
|
|
94
94
|
'bg-tintBlue text-blue400 hover:bg-tintBlue hover:text-blue400', className), ...rest, children: children }));
|
|
95
95
|
// ── Export ──
|
|
96
|
-
const
|
|
96
|
+
const LDLNBBase = {
|
|
97
97
|
Provider,
|
|
98
98
|
Root,
|
|
99
99
|
Trigger,
|
|
@@ -105,4 +105,4 @@ const LNBBase = {
|
|
|
105
105
|
MenuSub,
|
|
106
106
|
MenuSubItem,
|
|
107
107
|
};
|
|
108
|
-
export default
|
|
108
|
+
export default LDLNBBase;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export declare const
|
|
1
|
+
export declare const LDToast: {
|
|
2
2
|
/** 성공 메시지를 표시합니다 */
|
|
3
3
|
success: (content: string) => string;
|
|
4
4
|
/** 에러 메시지를 표시합니다 */
|
|
@@ -14,5 +14,5 @@ export declare const Toast: {
|
|
|
14
14
|
/** 인사 메시지를 표시합니다 */
|
|
15
15
|
hello: (content: string) => string;
|
|
16
16
|
};
|
|
17
|
-
export default
|
|
18
|
-
//# sourceMappingURL=
|
|
17
|
+
export default LDToast;
|
|
18
|
+
//# sourceMappingURL=LDToast.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LDToast.d.ts","sourceRoot":"","sources":["../../../src/components/LDToast/LDToast.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,OAAO;IAClB,oBAAoB;uBACD,MAAM;IAIzB,oBAAoB;qBACH,MAAM;IAIvB,uBAAuB;oBACP,MAAM;IAItB,oBAAoB;uBACD,MAAM;IAUzB,uBAAuB;uBACJ,MAAM;IAIzB,4BAA4B;;IAE5B,oBAAoB;qBACH,MAAM;CAMxB,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import toast from 'react-hot-toast';
|
|
4
|
-
export const
|
|
4
|
+
export const LDToast = {
|
|
5
5
|
/** 성공 메시지를 표시합니다 */
|
|
6
6
|
success: (content) => {
|
|
7
7
|
toast.dismiss();
|
|
@@ -39,4 +39,4 @@ export const Toast = {
|
|
|
39
39
|
});
|
|
40
40
|
},
|
|
41
41
|
};
|
|
42
|
-
export default
|
|
42
|
+
export default LDToast;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
interface LDToasterProps {
|
|
2
|
+
position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
|
|
3
|
+
duration?: number;
|
|
4
|
+
}
|
|
5
|
+
declare const LDToaster: ({ position, duration, }: LDToasterProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export default LDToaster;
|
|
7
|
+
//# sourceMappingURL=LDToaster.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LDToaster.d.ts","sourceRoot":"","sources":["../../../src/components/LDToast/LDToaster.tsx"],"names":[],"mappings":"AAIA,UAAU,cAAc;IACtB,QAAQ,CAAC,EACL,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,QAAA,MAAM,SAAS,GAAI,yBAGhB,cAAc,4CAEhB,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { Toaster as HotToaster } from 'react-hot-toast';
|
|
4
|
-
const
|
|
4
|
+
const LDToaster = ({ position = 'top-center', duration = 2500, }) => {
|
|
5
5
|
return _jsx(HotToaster, { position: position, toastOptions: { duration } });
|
|
6
6
|
};
|
|
7
|
-
export default
|
|
7
|
+
export default LDToaster;
|
package/dist/index.d.ts
CHANGED
|
@@ -18,14 +18,14 @@ export { default as LDDivider, type LDDividerProps, } from './components/LDDivid
|
|
|
18
18
|
export { default as LDDrawer } from './components/LDDrawer/LDDrawer.js';
|
|
19
19
|
export { default as LDEditor } from './components/LDEditor/LDEditor.js';
|
|
20
20
|
export { default as LDViewer } from './components/LDEditor/LDViewer.js';
|
|
21
|
-
export { default as
|
|
21
|
+
export { default as LDFileUploadBase } from './components/LDFileUpload/LDFileUploadBase.js';
|
|
22
22
|
export { Form, NativeForm } from './components/Form/Form.js';
|
|
23
23
|
export { default as FormField } from './components/Form/FormField.js';
|
|
24
24
|
export { default as FormErrorMessage } from './components/Form/FormErrorMessage.js';
|
|
25
25
|
export { default as LucideIcon } from './components/Icon/LucideIcon.js';
|
|
26
26
|
export { default as LDInput, type LDInputProps, } from './components/LDInput/LDInput.js';
|
|
27
27
|
export { default as FormInput } from './components/LDInput/FormInput.js';
|
|
28
|
-
export { default as
|
|
28
|
+
export { default as LDLNBBase } from './components/LDLNB/LDLNBBase.js';
|
|
29
29
|
export { default as LDLoadingDots } from './components/LDLoadingDots/LDLoadingDots.js';
|
|
30
30
|
export { default as LDMenuBar } from './components/LDMenuBar/LDMenuBar.js';
|
|
31
31
|
export { default as LDModal } from './components/LDModal/LDModal.js';
|
|
@@ -49,8 +49,8 @@ export { default as LDTanstackTable } from './components/LDTable/LDTanstackTable
|
|
|
49
49
|
export { default as TableField } from './components/LDTable/TableField.js';
|
|
50
50
|
export { default as LDTimePicker } from './components/LDTimePicker/LDTimePicker.js';
|
|
51
51
|
export { default as FormTimePicker } from './components/LDTimePicker/FormTimePicker.js';
|
|
52
|
-
export { default as
|
|
53
|
-
export { default as
|
|
52
|
+
export { default as LDToast } from './components/LDToast/LDToast.js';
|
|
53
|
+
export { default as LDToaster } from './components/LDToast/LDToaster.js';
|
|
54
54
|
export { default as LDToggleButton, type LDToggleButtonProps, } from './components/LDToggleButton/LDToggleButton.js';
|
|
55
55
|
export { default as FormToggleButton } from './components/LDToggleButton/FormToggleButton.js';
|
|
56
56
|
export { default as LDTooltip } from './components/LDTooltip/LDTooltip.js';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,8BAA8B,CAAC;AAGlE,OAAO,EACL,OAAO,IAAI,YAAY,EACvB,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,wCAAwC,CAAC;AAGhD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAGxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAG3E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,yCAAyC,CAAC;AACrF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,sCAAsC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,2CAA2C,CAAC;AAGzF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4CAA4C,CAAC;AAGvF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,wCAAwC,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAGrF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,kDAAkD,CAAC;AAChG,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,oDAAoD,CAAC;AAGpG,OAAO,EACL,OAAO,IAAI,SAAS,EACpB,KAAK,cAAc,GACpB,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAGrE,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
|
package/dist/index.js
CHANGED
|
@@ -34,8 +34,8 @@ export { default as LDDrawer } from './components/LDDrawer/LDDrawer.js';
|
|
|
34
34
|
// LDEditor
|
|
35
35
|
export { default as LDEditor } from './components/LDEditor/LDEditor.js';
|
|
36
36
|
export { default as LDViewer } from './components/LDEditor/LDViewer.js';
|
|
37
|
-
//
|
|
38
|
-
export { default as
|
|
37
|
+
// LDFileUpload (Base 레이어만 제공)
|
|
38
|
+
export { default as LDFileUploadBase } from './components/LDFileUpload/LDFileUploadBase.js';
|
|
39
39
|
// Form
|
|
40
40
|
export { Form, NativeForm } from './components/Form/Form.js';
|
|
41
41
|
export { default as FormField } from './components/Form/FormField.js';
|
|
@@ -45,8 +45,8 @@ export { default as LucideIcon } from './components/Icon/LucideIcon.js';
|
|
|
45
45
|
// LDInput
|
|
46
46
|
export { default as LDInput, } from './components/LDInput/LDInput.js';
|
|
47
47
|
export { default as FormInput } from './components/LDInput/FormInput.js';
|
|
48
|
-
//
|
|
49
|
-
export { default as
|
|
48
|
+
// LDLNB (Base 레이어만 제공)
|
|
49
|
+
export { default as LDLNBBase } from './components/LDLNB/LDLNBBase.js';
|
|
50
50
|
// LDLoadingDots
|
|
51
51
|
export { default as LDLoadingDots } from './components/LDLoadingDots/LDLoadingDots.js';
|
|
52
52
|
// LDMenuBar
|
|
@@ -84,9 +84,9 @@ export { default as TableField } from './components/LDTable/TableField.js';
|
|
|
84
84
|
// LDTimePicker
|
|
85
85
|
export { default as LDTimePicker } from './components/LDTimePicker/LDTimePicker.js';
|
|
86
86
|
export { default as FormTimePicker } from './components/LDTimePicker/FormTimePicker.js';
|
|
87
|
-
//
|
|
88
|
-
export { default as
|
|
89
|
-
export { default as
|
|
87
|
+
// LDToast
|
|
88
|
+
export { default as LDToast } from './components/LDToast/LDToast.js';
|
|
89
|
+
export { default as LDToaster } from './components/LDToast/LDToaster.js';
|
|
90
90
|
// LDToggleButton
|
|
91
91
|
export { default as LDToggleButton, } from './components/LDToggleButton/LDToggleButton.js';
|
|
92
92
|
export { default as FormToggleButton } from './components/LDToggleButton/FormToggleButton.js';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@loword/loword-design-system",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "로워드 디자인 시스템 컴포넌트 패키지(Tailwind v4)",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"license": "MIT",
|
|
47
47
|
"scripts": {
|
|
48
48
|
"build": "pnpm build:components && pnpm build:styles",
|
|
49
|
-
"prepublishOnly": "pnpm build",
|
|
49
|
+
"prepublishOnly": "rm -rf dist && pnpm build",
|
|
50
50
|
"build:components": "tsc && tsc-alias",
|
|
51
51
|
"build:styles": "tailwindcss -i ./src/styles.css -o ./dist/index.css",
|
|
52
52
|
"check-types": "tsc --noEmit",
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
type AvatarSize = 'sm' | 'md' | 'lg';
|
|
2
|
-
export interface AvatarProps {
|
|
3
|
-
src?: string | null;
|
|
4
|
-
alt?: string;
|
|
5
|
-
size?: AvatarSize;
|
|
6
|
-
className?: string;
|
|
7
|
-
style?: React.CSSProperties;
|
|
8
|
-
}
|
|
9
|
-
declare const Avatar: ({ src, alt, size, className, style, }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
-
export default Avatar;
|
|
11
|
-
//# sourceMappingURL=Avatar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAKA,KAAK,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAqBrC,MAAM,WAAW,WAAW;IAC1B,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,QAAA,MAAM,MAAM,GAAI,uCAMb,WAAW,4CAeb,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { UserRound } from 'lucide-react';
|
|
3
|
-
import AvatarBase from './AvatarBase.js';
|
|
4
|
-
import cn from '../../utils/cn.js';
|
|
5
|
-
const SIZE_MAP = {
|
|
6
|
-
sm: 'w-8 h-8',
|
|
7
|
-
md: 'w-12 h-12',
|
|
8
|
-
lg: 'w-16 h-16',
|
|
9
|
-
};
|
|
10
|
-
const IMAGE_SIZE_MAP = {
|
|
11
|
-
sm: 32,
|
|
12
|
-
md: 48,
|
|
13
|
-
lg: 64,
|
|
14
|
-
};
|
|
15
|
-
const ICON_SIZE_MAP = {
|
|
16
|
-
sm: 24,
|
|
17
|
-
md: 32,
|
|
18
|
-
lg: 40,
|
|
19
|
-
};
|
|
20
|
-
const Avatar = ({ src, alt = 'avatar', size = 'sm', className, style, }) => {
|
|
21
|
-
const px = IMAGE_SIZE_MAP[size];
|
|
22
|
-
return (_jsxs(AvatarBase.Root, { src: src, style: style, className: cn(SIZE_MAP[size], className), children: [_jsx(AvatarBase.Image, { alt: alt, width: px, height: px }), _jsx(AvatarBase.Fallback, { className: "bg-mono100", children: _jsx(UserRound, { size: ICON_SIZE_MAP[size], className: "text-mono400" }) })] }));
|
|
23
|
-
};
|
|
24
|
-
export default Avatar;
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
interface AvatarContextType {
|
|
3
|
-
src?: string | null;
|
|
4
|
-
status: 'idle' | 'loading' | 'loaded' | 'error';
|
|
5
|
-
setStatus: (status: 'idle' | 'loading' | 'loaded' | 'error') => void;
|
|
6
|
-
}
|
|
7
|
-
export declare const useAvatarContext: () => AvatarContextType;
|
|
8
|
-
interface RootProps {
|
|
9
|
-
src?: string | null;
|
|
10
|
-
className?: string;
|
|
11
|
-
style?: React.CSSProperties;
|
|
12
|
-
children?: ReactNode;
|
|
13
|
-
}
|
|
14
|
-
interface ImageProps {
|
|
15
|
-
alt?: string;
|
|
16
|
-
width?: number;
|
|
17
|
-
height?: number;
|
|
18
|
-
className?: string;
|
|
19
|
-
}
|
|
20
|
-
interface FallbackProps {
|
|
21
|
-
className?: string;
|
|
22
|
-
children?: ReactNode;
|
|
23
|
-
/** 이미지 로드 지연 처리용 딜레이(ms). 기본값 0 (즉시 표시) */
|
|
24
|
-
delayMs?: number;
|
|
25
|
-
}
|
|
26
|
-
export declare const AvatarBase: {
|
|
27
|
-
Root: ({ src, className, style, children }: RootProps) => import("react/jsx-runtime").JSX.Element;
|
|
28
|
-
Image: ({ alt, width, height, className }: ImageProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
29
|
-
Fallback: ({ className, children, delayMs }: FallbackProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
30
|
-
};
|
|
31
|
-
export default AvatarBase;
|
|
32
|
-
//# sourceMappingURL=AvatarBase.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarBase.d.ts","sourceRoot":"","sources":["../../../src/components/Avatar/AvatarBase.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAIf,UAAU,iBAAiB;IACzB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;IAChD,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,KAAK,IAAI,CAAC;CACtE;AAID,eAAO,MAAM,gBAAgB,yBAO5B,CAAC;AAGF,UAAU,SAAS;IACjB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAiCD,UAAU,UAAU;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAqBD,UAAU,aAAa;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AA6BD,eAAO,MAAM,UAAU;gDA3F4B,SAAS;+CAsCC,UAAU;iDA0Bf,aAAa;CA+BpE,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
-
import { createContext, useContext, useState, useEffect, } from 'react';
|
|
4
|
-
import cn from '../../utils/cn.js';
|
|
5
|
-
const AvatarContext = createContext(null);
|
|
6
|
-
export const useAvatarContext = () => {
|
|
7
|
-
const ctx = useContext(AvatarContext);
|
|
8
|
-
if (!ctx)
|
|
9
|
-
throw new Error('AvatarBase 하위 컴포넌트는 Root 내부에서 사용해야 합니다.');
|
|
10
|
-
return ctx;
|
|
11
|
-
};
|
|
12
|
-
const Root = ({ src, className, style, children }) => {
|
|
13
|
-
const [status, setStatus] = useState(src ? 'loading' : 'error');
|
|
14
|
-
useEffect(() => {
|
|
15
|
-
setStatus(src ? 'loading' : 'error');
|
|
16
|
-
}, [src]);
|
|
17
|
-
return (_jsx(AvatarContext, { value: {
|
|
18
|
-
src,
|
|
19
|
-
status,
|
|
20
|
-
setStatus,
|
|
21
|
-
}, children: _jsx("span", { style: style, className: cn('relative flex shrink-0 overflow-hidden rounded-full', className), children: children }) }));
|
|
22
|
-
};
|
|
23
|
-
const Image = ({ alt = 'avatar', width, height, className }) => {
|
|
24
|
-
const { src, status, setStatus } = useAvatarContext();
|
|
25
|
-
if (!src || status === 'error')
|
|
26
|
-
return null;
|
|
27
|
-
return (_jsx("img", { src: src, alt: alt, width: width, height: height, onLoad: () => setStatus('loaded'), onError: () => setStatus('error'), className: cn('aspect-square h-full w-full object-cover', className) }));
|
|
28
|
-
};
|
|
29
|
-
const Fallback = ({ className, children, delayMs = 0 }) => {
|
|
30
|
-
const { status } = useAvatarContext();
|
|
31
|
-
const [show, setShow] = useState(delayMs === 0);
|
|
32
|
-
useEffect(() => {
|
|
33
|
-
if (delayMs === 0) {
|
|
34
|
-
setShow(true);
|
|
35
|
-
return;
|
|
36
|
-
}
|
|
37
|
-
const timer = setTimeout(() => setShow(true), delayMs);
|
|
38
|
-
return () => clearTimeout(timer);
|
|
39
|
-
}, [delayMs]);
|
|
40
|
-
if (status === 'loaded' || !show)
|
|
41
|
-
return null;
|
|
42
|
-
return (_jsx("span", { className: cn('flex h-full w-full items-center justify-center rounded-full', className), children: children }));
|
|
43
|
-
};
|
|
44
|
-
export const AvatarBase = {
|
|
45
|
-
Root,
|
|
46
|
-
Image,
|
|
47
|
-
Fallback,
|
|
48
|
-
};
|
|
49
|
-
export default AvatarBase;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import { type ReactNode } from 'react';
|
|
2
|
-
import { type IconName } from '../Icon/LucideIcon.js';
|
|
3
|
-
type BadgeSize = 'xsmall' | 'small' | 'medium' | 'large';
|
|
4
|
-
type BadgeColor = 'orange' | 'fillOrange' | 'red' | 'fillRed' | 'green' | 'fillGreen' | 'blue' | 'fillBlue' | 'yellow' | 'fillYellow' | 'gray' | 'fillGray';
|
|
5
|
-
export interface BadgeProps<T extends string> {
|
|
6
|
-
/** 뱃지 유형 키 (colorsMap의 키와 매칭) */
|
|
7
|
-
type: T;
|
|
8
|
-
/** 뱃지 사이즈 */
|
|
9
|
-
size?: BadgeSize;
|
|
10
|
-
/** type별 색상 매핑 객체 (프리셋 BadgeColor 또는 커스텀 Tailwind 클래스) */
|
|
11
|
-
colorsMap: Record<T, BadgeColor | string>;
|
|
12
|
-
/** 뱃지 내용 */
|
|
13
|
-
children?: ReactNode;
|
|
14
|
-
/** 왼쪽 아이콘 (IconName 또는 ReactNode) */
|
|
15
|
-
leftIcon?: IconName | ReactNode;
|
|
16
|
-
/** 오른쪽 아이콘 (IconName 또는 ReactNode) */
|
|
17
|
-
rightIcon?: IconName | ReactNode;
|
|
18
|
-
/** 추가 CSS 클래스 */
|
|
19
|
-
className?: string;
|
|
20
|
-
/** 인라인 스타일 */
|
|
21
|
-
style?: React.CSSProperties;
|
|
22
|
-
}
|
|
23
|
-
declare const Badge: <T extends string>({ type, size, colorsMap, children, leftIcon, rightIcon, className, style, }: BadgeProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
24
|
-
export default Badge;
|
|
25
|
-
//# sourceMappingURL=Badge.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,KAAK,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAInD,KAAK,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzD,KAAK,UAAU,GACX,QAAQ,GACR,YAAY,GACZ,KAAK,GACL,SAAS,GACT,OAAO,GACP,WAAW,GACX,MAAM,GACN,UAAU,GACV,QAAQ,GACR,YAAY,GACZ,MAAM,GACN,UAAU,CAAC;AAEf,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,MAAM;IAC1C,iCAAiC;IACjC,IAAI,EAAE,CAAC,CAAC;IACR,aAAa;IACb,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0DAA0D;IAC1D,SAAS,EAAE,MAAM,CAAC,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC,CAAC;IAC1C,YAAY;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAChC,sCAAsC;IACtC,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACjC,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AA+BD,QAAA,MAAM,KAAK,GAAI,CAAC,SAAS,MAAM,EAAE,6EAS9B,UAAU,CAAC,CAAC,CAAC,4CAmBf,CAAC;AAEF,eAAe,KAAK,CAAC"}
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import BadgeBase from './BadgeBase.js';
|
|
3
|
-
import { renderIcon } from '../../utils/renderIcon.js';
|
|
4
|
-
import cn from '../../utils/cn.js';
|
|
5
|
-
const colorClasses = {
|
|
6
|
-
orange: 'bg-tintOrange text-orange500',
|
|
7
|
-
fillOrange: 'bg-orange400 text-white',
|
|
8
|
-
green: 'bg-tintGreen text-green700',
|
|
9
|
-
fillGreen: 'bg-success600 text-white',
|
|
10
|
-
red: 'bg-tintRed text-red200',
|
|
11
|
-
fillRed: 'bg-danger600 text-white',
|
|
12
|
-
blue: 'bg-tintBlue text-blue200',
|
|
13
|
-
fillBlue: 'bg-accept600 text-white',
|
|
14
|
-
yellow: 'bg-tintYellow text-yellow700',
|
|
15
|
-
fillYellow: 'bg-warning600 text-white',
|
|
16
|
-
gray: 'bg-mono200 text-neutral800',
|
|
17
|
-
fillGray: 'bg-neutral200 text-white',
|
|
18
|
-
};
|
|
19
|
-
const sizeClasses = {
|
|
20
|
-
xsmall: 'badge-xs',
|
|
21
|
-
small: 'badge-sm',
|
|
22
|
-
medium: 'badge-md',
|
|
23
|
-
large: 'badge-lg',
|
|
24
|
-
};
|
|
25
|
-
const iconSizes = {
|
|
26
|
-
xsmall: 'icon-xs',
|
|
27
|
-
small: 'icon-sm',
|
|
28
|
-
medium: 'icon-md',
|
|
29
|
-
large: 'icon-lg',
|
|
30
|
-
};
|
|
31
|
-
const Badge = ({ type, size = 'small', colorsMap, children, leftIcon, rightIcon, className, style, }) => {
|
|
32
|
-
const color = colorsMap[type];
|
|
33
|
-
const iconSize = iconSizes[size];
|
|
34
|
-
return (_jsxs(BadgeBase.Root, { className: cn('w-auto text-center whitespace-nowrap border border-transparent', colorClasses[color] ?? color, sizeClasses[size], className), style: style, children: [renderIcon(leftIcon, iconSize), children, renderIcon(rightIcon, iconSize)] }));
|
|
35
|
-
};
|
|
36
|
-
export default Badge;
|