@pop-ui/core 0.0.41 → 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.
Files changed (8) hide show
  1. package/README.md +46 -148
  2. package/dist/core.css +1 -1
  3. package/dist/core.js +1872 -1169
  4. package/dist/core.umd.cjs +26 -24
  5. package/dist/types/index.d.ts +118 -28
  6. package/package.json +10 -5
  7. package/src/components/CalendarDatePicker/README.md +409 -0
  8. package/LICENSE.md +0 -21
package/README.md CHANGED
@@ -1,184 +1,82 @@
1
1
  # @pop-ui/core
2
2
 
3
- 사내 디자인 시스템을 위한 React UI 컴포넌트 라이브러리입니다.
3
+ Pop UI의 공용 React 컴포넌트 패키지입니다.
4
4
 
5
- ## 설치
6
-
7
- ### 기본 설치
8
-
9
- 모든 컴포넌트를 사용하기 위한 필수 패키지를 설치합니다.
10
-
11
- ```bash
12
- yarn add @pop-ui/core react react-dom @mantine/core @mantine/hooks @emotion/react @emotion/cache @emotion/serialize @emotion/utils
13
- ```
14
-
15
- ### 컴포넌트별 추가 패키지
16
-
17
- 일부 컴포넌트는 추가 패키지가 필요합니다. 사용하는 컴포넌트에 따라 필요한 패키지를 설치하세요.
18
-
19
- #### Button, TextField, SearchBar, Dropdown, Checkbox, Radio, Toggle
20
-
21
- 추가 패키지 불필요 (기본 설치만으로 사용 가능)
22
-
23
- #### DatePicker, TimePicker
24
-
25
- ```bash
26
- yarn add @mantine/dates dayjs
27
- ```
28
-
29
- #### ImageUploader
30
-
31
- ```bash
32
- yarn add @mantine/dropzone
33
- ```
34
-
35
- #### Table
36
-
37
- ```bash
38
- yarn add react-beautiful-dnd @tabler/icons-react
39
- ```
40
-
41
- #### Pagination
42
-
43
- ```bash
44
- yarn add @tabler/icons-react
45
- ```
46
-
47
- #### Modal
5
+ ## 요구 사항
48
6
 
49
- ```bash
50
- yarn add @mantine/modals
51
- ```
7
+ - React `19.2.x`
8
+ - `react-dom` `19.2.x`
52
9
 
53
- #### Alert, Tooltip
54
-
55
- ```bash
56
- yarn add @mantine/notifications
57
- ```
10
+ 패키지는 `@pop-ui/core/styles.css`를 export 하므로, 앱 엔트리에서 한 번만 로드해야 합니다.
58
11
 
59
- #### 에디터 컴포넌트
12
+ ## 설치
60
13
 
61
14
  ```bash
62
- yarn add @mantine/tiptap @tiptap/react @tiptap/starter-kit @tiptap/extension-link
15
+ yarn add @pop-ui/core react react-dom
63
16
  ```
64
17
 
65
18
  ## 사용 방법
66
19
 
67
- ### React (Vite)
20
+ `PopUiProvider`로 앱을 감싸고, 전역 스타일을 함께 불러오세요.
68
21
 
69
22
  ```tsx
70
- import { Button, TextField } from '@pop-ui/core';
23
+ import '@pop-ui/core/styles.css';
24
+
25
+ import { Button, Checkbox, PopUiProvider, Radio, TextField, toast } from '@pop-ui/core';
71
26
 
72
- function App() {
27
+ export function App() {
73
28
  return (
74
- <div>
75
- <Button styleType="primary" size="md">
76
- 클릭하세요
77
- </Button>
78
- <TextField placeholder="텍스트를 입력하세요" />
79
- </div>
29
+ <PopUiProvider>
30
+ <main>
31
+ <Button variant="primary">Button</Button>
32
+ <TextField label="Name" value="" onChange={() => {}} />
33
+ <Checkbox label="Agree" checked={false} onChange={() => {}} />
34
+ <Radio label="Option" checked={false} onChange={() => {}} />
35
+ <button onClick={() => toast({ message: 'Saved' })}>Toast</button>
36
+ </main>
37
+ </PopUiProvider>
80
38
  );
81
39
  }
82
40
  ```
83
41
 
84
- ### Next.js
42
+ `PopUiProvider` sets up Mantine provider, CSS variable injection, and Notifications. `toast` depends on the `Notifications` mounted by this provider.
85
43
 
86
- Next.js에서 사용하려면 Mantine Provider 설정이 필요합니다.
44
+ ## Stabilized surfaces
87
45
 
88
- #### App Router (Next.js 13+)
46
+ This phase stabilizes the following surfaces:
89
47
 
90
- 1. Providers 컴포넌트 생성:
48
+ - `Button`
49
+ - `TextField`
50
+ - `Checkbox`
51
+ - `Radio`
52
+ - `toast`
91
53
 
92
- ```tsx
93
- // app/providers.tsx
94
- 'use client'
54
+ ### Button
95
55
 
96
- import { MantineProvider } from '@mantine/core'
97
- import '@mantine/core/styles.css'
56
+ `Button`은 현재 `variant`, `size`, `isLoading` 같은 기존 사용 패턴을 유지합니다. `danger`는 호환성용 공개 변형으로 남아 있고, 현재는 warning 토큰 계열과 같은 스타일을 사용합니다.
98
57
 
99
- export function Providers({ children }: { children: React.ReactNode }) {
100
- return <MantineProvider>{children}</MantineProvider>
101
- }
102
- ```
58
+ ### TextField
103
59
 
104
- 2. Layout에서 사용:
60
+ `TextField`는 controlled `value`를 표시 상태와 clear affordance, counter sync의 기준으로 사용합니다. `maxTextCount`가 있으면 오버런 입력은 잘라내지 않고 차단합니다.
105
61
 
106
- ```tsx
107
- // app/layout.tsx
108
- import { Providers } from './providers'
109
-
110
- export default function RootLayout({
111
- children,
112
- }: {
113
- children: React.ReactNode
114
- }) {
115
- return (
116
- <html lang="ko">
117
- <body>
118
- <Providers>{children}</Providers>
119
- </body>
120
- </html>
121
- )
122
- }
123
- ```
62
+ ### Checkbox
124
63
 
125
- 3. 컴포넌트 사용:
64
+ `Checkbox`는 JSX label과 DOM-style `onChange` 이벤트를 유지합니다. `e.target.checked` 기반 사용이 기준입니다.
126
65
 
127
- ```tsx
128
- // app/page.tsx
129
- 'use client'
66
+ ### Radio
130
67
 
131
- import { Button } from '@pop-ui/core'
68
+ `Radio`는 개별 controlled item으로 사용합니다. `e.target.value` 기반 이벤트 처리가 기준입니다.
132
69
 
133
- export default function Page() {
134
- return <Button onClick={() => alert('클릭!')}>클릭하세요</Button>
135
- }
136
- ```
70
+ ### toast
137
71
 
138
- #### Pages Router (Next.js 12 이하)
72
+ `toast`는 함수형 API를 유지합니다. `toast(input)`, `toast.update(id, input)`, `toast.hide(id)`, `toast.clean()`가 현재 안정화된 호출 형태입니다.
139
73
 
140
- ```tsx
141
- // pages/_app.tsx
142
- import { MantineProvider } from '@mantine/core'
143
- import '@mantine/core/styles.css'
144
- import type { AppProps } from 'next/app'
74
+ ### Date picker surfaces
145
75
 
146
- export default function App({ Component, pageProps }: AppProps) {
147
- return (
148
- <MantineProvider>
149
- <Component {...pageProps} />
150
- </MantineProvider>
151
- )
152
- }
153
- ```
76
+ `DatePicker`와 `CalendarDatePicker`는 이번 단계에서 시각 계약만 맞췄습니다. `DatePicker`는 입력과 팝업 중심 surface로 남아 있고, `CalendarDatePicker`는 inline calendar surface와 exclusion 기능을 유지합니다.
77
+
78
+ 이 단계에서는 behavior parity를 구현하지 않습니다. `Date`와 `Dayjs` 값 모델, confirm/cancel 흐름은 다음 결정으로 남겨 둡니다.
79
+
80
+ ## What this package does not document here
154
81
 
155
- ## 제공 컴포넌트
156
-
157
- - **Button** - 다양한 스타일의 버튼
158
- - **TextField** - 텍스트 입력 필드
159
- - **SearchBar** - 검색 입력 필드
160
- - **Dropdown** - 드롭다운 선택
161
- - **Checkbox** - 체크박스
162
- - **Radio** - 라디오 버튼
163
- - **Toggle** - 토글 스위치
164
- - **DatePicker** - 날짜 선택
165
- - **TimePicker** - 시간 선택
166
- - **Pagination** - 페이지네이션
167
- - **Tab** - 탭 메뉴
168
- - **SegmentButton** - 세그먼트 버튼
169
- - **Alert** - 알림 메시지
170
- - **Tooltip** - 툴팁
171
- - **Table** - 데이터 테이블
172
- - **Modal** - 모달 다이얼로그
173
- - **ImageUploader** - 이미지 업로드
174
-
175
- ## 기술 스택
176
-
177
- - React 18
178
- - TypeScript
179
- - Mantine UI 6.x
180
- - SCSS Modules
181
-
182
- ## 라이센스
183
-
184
- MIT
82
+ 이 README는 아직 안정화되지 않은 다른 export 전체를 자세히 설명하지 않습니다. `CalendarDatePicker`, `DatePicker`, `Dropdown`, `ImageUploader`, `Modal`, `Pagination`, `SearchBar`, `SegmentButton`, `Tab`, `TimePicker`, `Toggle`, `Tooltip`, and map-related exports are outside the scope of this stabilization note.