@reopt-ai/opt-ui 1.11.0 → 1.12.1
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/COMPONENT_CATALOG.md +495 -230
- package/README.md +43 -5
- package/dist/core/index.cjs +2 -2
- package/dist/core/index.d.cts +2 -2
- package/dist/core/index.d.ts +2 -2
- package/dist/core/index.js +2 -2
- package/dist/docs/02-components/01-core.md +154 -85
- package/dist/docs/02-components/02-visuals.md +1 -1
- package/dist/docs/02-components/03-shells.md +349 -149
- package/dist/docs/02-components/04-surfaces.md +1 -1
- package/dist/docs/02-components/index.md +5 -5
- package/dist/docs/03-recipes/02-dashboards.md +126 -10
- package/dist/{field-sidebar-B5SQC35J.d.cts → field-sidebar-CrYlRZew.d.ts} +164 -154
- package/dist/{field-sidebar-DAuN4jPV.cjs → field-sidebar-oa6zOmcd.cjs} +1540 -1537
- package/dist/{field-sidebar-CBeWE8xX.d.ts → field-sidebar-uXmoyvd7.d.cts} +164 -154
- package/dist/{field-sidebar-BXl5RJ3q.js → field-sidebar-zkkqC7__.js} +1541 -1540
- package/dist/id-registry.cjs +78 -6
- package/dist/id-registry.d.cts +1 -2
- package/dist/id-registry.d.ts +1 -2
- package/dist/id-registry.js +78 -8
- package/dist/id-registry.json +168 -19
- package/dist/index.cjs +1127 -224
- package/dist/index.d.cts +567 -58
- package/dist/index.d.ts +567 -58
- package/dist/index.js +1118 -227
- package/dist/{key-pad-menu-BxTy_u0Q.d.cts → key-pad-menu-CwcY_Vps.d.cts} +2 -3
- package/dist/{key-pad-menu-wXkWn1I1.js → key-pad-menu-Di2aRGbM.js} +4 -6
- package/dist/{key-pad-menu-Cg6rZBie.cjs → key-pad-menu-SItoHPLu.cjs} +1 -1
- package/dist/{key-pad-menu-u5GTJl9B.d.ts → key-pad-menu-WBJShCJn.d.ts} +3 -4
- package/dist/meta.cjs +894 -28
- package/dist/meta.d.cts +12 -36
- package/dist/meta.d.ts +12 -36
- package/dist/meta.js +894 -30
- package/dist/query.d.cts +1 -2
- package/dist/query.d.ts +1 -2
- package/dist/query.js +0 -2
- package/dist/shells/index.cjs +1 -1
- package/dist/shells/index.d.cts +1 -1
- package/dist/shells/index.d.ts +1 -1
- package/dist/shells/index.js +1 -1
- package/dist/tailwind.css +7 -0
- package/dist/{text-truncate-DW78lg4S.d.cts → text-truncate-CQyfUZvq.d.cts} +31 -3
- package/dist/{text-truncate-DW78lg4S.d.ts → text-truncate-CQyfUZvq.d.ts} +31 -3
- package/dist/{text-truncate-C17HHCR-.js → text-truncate-DSuZECy0.js} +43 -10
- package/dist/{text-truncate-BZdL1k5Z.cjs → text-truncate-I1XLWmRa.cjs} +48 -7
- package/dist/theme/server.d.cts +1 -2
- package/dist/theme/server.d.ts +1 -2
- package/dist/theme/server.js +0 -2
- package/dist/visuals/index.js +0 -1
- package/package.json +4 -3
- package/dist/field-sidebar-B5SQC35J.d.cts.map +0 -1
- package/dist/field-sidebar-BXl5RJ3q.js.map +0 -1
- package/dist/field-sidebar-CBeWE8xX.d.ts.map +0 -1
- package/dist/id-registry.d.cts.map +0 -1
- package/dist/id-registry.d.ts.map +0 -1
- package/dist/id-registry.js.map +0 -1
- package/dist/index.d.cts.map +0 -1
- package/dist/index.d.ts.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/key-pad-menu-BxTy_u0Q.d.cts.map +0 -1
- package/dist/key-pad-menu-u5GTJl9B.d.ts.map +0 -1
- package/dist/key-pad-menu-wXkWn1I1.js.map +0 -1
- package/dist/meta.d.cts.map +0 -1
- package/dist/meta.d.ts.map +0 -1
- package/dist/meta.js.map +0 -1
- package/dist/query.d.cts.map +0 -1
- package/dist/query.d.ts.map +0 -1
- package/dist/query.js.map +0 -1
- package/dist/text-truncate-C17HHCR-.js.map +0 -1
- package/dist/text-truncate-DW78lg4S.d.cts.map +0 -1
- package/dist/text-truncate-DW78lg4S.d.ts.map +0 -1
- package/dist/theme/server.d.cts.map +0 -1
- package/dist/theme/server.d.ts.map +0 -1
- package/dist/theme/server.js.map +0 -1
package/COMPONENT_CATALOG.md
CHANGED
|
@@ -2,17 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
<!-- DEPRECATED: Prefer dist/docs/02-components/ for per-layer reference. -->
|
|
4
4
|
<!-- Auto-generated from ComponentMeta. Do not edit. -->
|
|
5
|
-
<!-- Version: 1.
|
|
5
|
+
<!-- Version: 1.12.0 -->
|
|
6
6
|
|
|
7
7
|
## Quick Stats
|
|
8
8
|
|
|
9
9
|
| Layer | Count |
|
|
10
10
|
| --------- | ------- |
|
|
11
|
-
| Core |
|
|
11
|
+
| Core | 74 |
|
|
12
12
|
| Visuals | 0 |
|
|
13
|
-
| Shells |
|
|
13
|
+
| Shells | 86 |
|
|
14
14
|
| Surfaces | 0 |
|
|
15
|
-
| **Total** | **
|
|
15
|
+
| **Total** | **160** |
|
|
16
16
|
|
|
17
17
|
## Component Selection Guide
|
|
18
18
|
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
| 인사이트/이상탐지 | InsightsPanel | Shell |
|
|
96
96
|
| 프롬프트 템플릿 | PromptTemplate | Shell |
|
|
97
97
|
|
|
98
|
-
## Core Components (
|
|
98
|
+
## Core Components (74)
|
|
99
99
|
|
|
100
100
|
### Input
|
|
101
101
|
|
|
@@ -175,39 +175,43 @@
|
|
|
175
175
|
|
|
176
176
|
### Other
|
|
177
177
|
|
|
178
|
-
| Component
|
|
179
|
-
|
|
|
180
|
-
| FieldToken
|
|
181
|
-
| Facet
|
|
182
|
-
| Expression
|
|
183
|
-
| TextTruncate
|
|
184
|
-
| Highlight
|
|
185
|
-
| LiveRegion
|
|
186
|
-
| ColorPalette
|
|
187
|
-
| InlineEdit
|
|
188
|
-
| KeyPadMenu
|
|
189
|
-
| Text
|
|
190
|
-
| Heading
|
|
191
|
-
| Separator
|
|
192
|
-
| OtpField
|
|
193
|
-
| Toggle
|
|
194
|
-
| Accordion
|
|
195
|
-
| Meter
|
|
196
|
-
| DescriptionList
|
|
197
|
-
| Identity
|
|
198
|
-
| BlockLayout
|
|
199
|
-
| createBlock
|
|
200
|
-
| StarRating
|
|
201
|
-
| ErrorBoundary
|
|
202
|
-
| Command
|
|
203
|
-
| ShaderSurface
|
|
178
|
+
| Component | Description | Key Exports |
|
|
179
|
+
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
180
|
+
| FieldToken | 필드 타입을 일관된 글리프와 선택적 텍스트 레이블로 표현합니다. 문자열·숫자·날짜·IP·지오 등 분석 스키마 타입마다 같은 아이콘과 팔레트 슬롯을 씁니다. | `FieldToken`, `FIELD_TYPE_TOKENS`, `resolveFieldType` |
|
|
181
|
+
| Facet | 필드 값 분포를 카운트와 점유율 막대로 보여주고 그 행 자체가 필터가 되는 패싯. 긴 꼬리는 접어 두고 상위 값부터 읽힌다. | `Facet`, `FacetGroup` |
|
|
182
|
+
| Expression | 조건을 폼이 아니라 문장으로 쓰고 그 자리에서 편집하는 표현식 절. 알림 규칙·세그먼트 필터처럼 읽어서 검증해야 하는 조건에 쓴다. | `Expression`, `ExpressionGroup` |
|
|
183
|
+
| TextTruncate | 실제 폰트로 실제 가용 폭을 측정해 문자열의 식별력이 가장 낮은 부분을 잘라내는 생략. CSS가 못 하는 앞·중간·양끝 생략을 지원하고 전체 문자열은 접근성 트리에 남는다. | `TextTruncate` |
|
|
184
|
+
| Highlight | 검색어에 해당하는 구간을 <mark>로 표시. 긴 항목 우선 매칭이라 겹치는 검색어도 조각나지 않는다. | `Highlight` |
|
|
185
|
+
| LiveRegion | 라이브 뷰의 변화를 스크린 리더에 읽어 주는 영역. 스로틀로 폭주를 요약하고 두 노드를 번갈아 써서 같은 문구도 다시 읽힌다. | `LiveRegion` |
|
|
186
|
+
| ColorPalette | 시각화 색 팔레트를 그 팔레트의 모습 그대로 보여 주고 고르게 하는 컴포넌트. 범주형은 블록, 순차·발산형은 그라디언트로 그려 데이터 종류를 그림이 말한다. | `ColorPaletteDisplay`, `ColorPalettePicker`, `THEME_PALETTES` |
|
|
187
|
+
| InlineEdit | 대시보드 제목·지표 이름처럼 읽히는 횟수가 훨씬 많은 값을 그 자리에서 고치는 편집. Enter 확정, Escape 되돌리기, 거절된 저장은 입력을 유지한다. | `InlineEdit` |
|
|
188
|
+
| KeyPadMenu | 이름보다 그림으로 알아보기 쉬운 선택지를 타일로 고르는 메뉴. 내부는 실제 radio·checkbox라 키보드와 스크린 리더가 그대로 동작한다. | `KeyPadMenu` |
|
|
189
|
+
| Text | 본문, 레이블, 보조 설명, 코드에 일관된 의미 기반 타이포그래피를 적용합니다. | `Text` |
|
|
190
|
+
| Heading | 문서의 의미 계층과 시각적 타이포그래피 계층을 독립적으로 제어합니다. | `Heading` |
|
|
191
|
+
| Separator | 콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다. | `Separator` |
|
|
192
|
+
| OtpField | 일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션과 폼 이름/오류 연결을 지원합니다. | `OtpField` |
|
|
193
|
+
| Toggle | 눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다. | `Toggle`, `ToggleGroup` |
|
|
194
|
+
| Accordion | 수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원. | `AccordionRoot`, `AccordionItem`, `AccordionTrigger`, `AccordionContent` |
|
|
195
|
+
| Meter | 범위 내 스칼라 측정값 게이지 (디스크 사용량·점수·용량 등). role=meter로 작업 진행률(Progress)과 구분된다. | `Meter` |
|
|
196
|
+
| DescriptionList | 한 대상의 라벨 있는 사실들을 시맨틱 <dl>로 표시한다. 상세 패널의 필드 나열을 표준화하고 식별자 복사를 제공한다. | `DescriptionList` |
|
|
197
|
+
| Identity | 사람(또는 익명 디바이스)을 목록 셀 한 칸으로 표현한다. 이름→이메일→ID 폴백과 익명 표식을 한 곳에서 처리한다. | `Identity` |
|
|
198
|
+
| BlockLayout | Block 루트 레이아웃. 자식 간 section spacing과 선택적 시맨틱 inset을 제공하고 loading prop으로 LoadingOverlay를 자동 래핑합니다. | `BlockLayout` |
|
|
199
|
+
| createBlock | Block 팩토리 함수. BlockLayout 래핑을 구조적으로 강제하여 loading/className 처리를 자동화합니다. | `createBlock` |
|
|
200
|
+
| StarRating | 1~N점 별점을 선택하는 인터랙티브 레이팅 입력. 읽기 전용 표시도 지원. | `StarRating` |
|
|
201
|
+
| ErrorBoundary | React 에러 바운더리. 자식 컴포넌트 렌더 에러를 잡아 fallback UI를 표시합니다. | `ErrorBoundary` |
|
|
202
|
+
| Command | cmdk 스타일 명령 anatomy. 자동 필터링 + 키보드 내비게이션. 인라인 또는 CommandDialog로 사용. | `Command`, `CommandDialog`, `CommandInput`, `CommandList`, `CommandEmpty`, `CommandGroup`, `CommandItem`, `CommandSeparator`, `CommandShortcut` |
|
|
203
|
+
| ShaderSurface | ogl 기반 애니메이션 WebGL 셰이더 배경. 럭셔리 프리셋(메탈릭/실크/유리 등) + 색·파라미터로 배경·카드 배경을 만든다. 정지 프레임·PNG 캡처·WebGL 폴백 지원. | `ShaderSurface` |
|
|
204
|
+
| Callout | 페이지에 머무는 인페이지 고지. Alert와 달리 dismiss가 없고, 조건이 참인 동안 레이아웃의 일부로 남습니다. | `Callout` |
|
|
205
|
+
| StatusDot | 점 + 텍스트로 상태를 표현합니다. 라벨이 필수라 색만으로 상태를 말할 수 없습니다. | `StatusDot` |
|
|
206
|
+
| CopyButton | 값을 클립보드에 올리고 성공 여부를 알립니다. 클립보드 거부를 삼키지 않습니다. | `CopyButton` |
|
|
207
|
+
| SegmentedControl | 선택지를 모두 보여주는 단일 선택 컨트롤. radio-group 프리미티브 위에 올려 화살표 키가 동작합니다. | `SegmentedControl` |
|
|
204
208
|
|
|
205
209
|
## Visual Components (0)
|
|
206
210
|
|
|
207
211
|
| Component | Description | Key Exports |
|
|
208
212
|
| --------- | ----------- | ----------- |
|
|
209
213
|
|
|
210
|
-
## Shell Components (
|
|
214
|
+
## Shell Components (86)
|
|
211
215
|
|
|
212
216
|
### Navigation & Layout
|
|
213
217
|
|
|
@@ -231,19 +235,19 @@
|
|
|
231
235
|
|
|
232
236
|
### Data Display
|
|
233
237
|
|
|
234
|
-
| Component | Description
|
|
235
|
-
| ------------------- |
|
|
236
|
-
| DataTable | 제네릭 데이터 테이블.
|
|
237
|
-
| InlineEditTable | 인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소.
|
|
238
|
-
| TreeTable | 계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론.
|
|
239
|
-
| DomainTable | 도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원.
|
|
240
|
-
| QueryResultsTable | 쿼리 결과 테이블. SQL 결과와 스크린 리더에 안내되는 로딩, 에러, 빈 상태를 지원합니다.
|
|
241
|
-
| DashboardGrid | Composite 기반 통계 카드 그리드. 유효한 1–4열 레이아웃과 화살표 키 2D 탐색을 지원합니다.
|
|
242
|
-
| SummaryRow | 통계 요약 행. StatCard 그리드 레이아웃을 표준화합니다. loading 시 SkeletonCard 표시.
|
|
243
|
-
| CodeSnippetViewer | 코드 스니펫 뷰어. 줄 번호, 복사 버튼, 포커스 가능한 스크롤 영역, syntaxTheme 톤을 지원합니다.
|
|
244
|
-
| CodeDiffViewer | 코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff와 포커스 가능한 스크롤 영역을 제공합니다.
|
|
245
|
-
| ConnectionIndicator | 연결 상태 표시기. connected, connecting, disconnected, error 상태를 지원합니다.
|
|
246
|
-
| EventIcon | 이벤트 아이콘. semantic key 또는 ReactNode 아이콘과 배경색을 표시합니다.
|
|
238
|
+
| Component | Description | Key Exports |
|
|
239
|
+
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- |
|
|
240
|
+
| DataTable | 제네릭 데이터 테이블. 제목은 opt-in이고 ariaLabel로 grid를 이름 붙이며, 동적 컬럼·안전 정렬·키보드 리사이즈·Composite 탐색을 지원합니다. | `DataTable` |
|
|
241
|
+
| InlineEditTable | 인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소. | `InlineEditTable` |
|
|
242
|
+
| TreeTable | 계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론. | `TreeTable` |
|
|
243
|
+
| DomainTable | 도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원. | `DomainTable` |
|
|
244
|
+
| QueryResultsTable | 쿼리 결과 테이블. SQL 결과와 스크린 리더에 안내되는 로딩, 에러, 빈 상태를 지원합니다. | `QueryResultsTable` |
|
|
245
|
+
| DashboardGrid | Composite 기반 통계 카드 그리드. 유효한 1–4열 레이아웃과 화살표 키 2D 탐색을 지원합니다. | `DashboardGrid` |
|
|
246
|
+
| SummaryRow | 통계 요약 행. StatCard 그리드 레이아웃을 표준화합니다. loading 시 SkeletonCard 표시. | `SummaryRow` |
|
|
247
|
+
| CodeSnippetViewer | 코드 스니펫 뷰어. 줄 번호, 복사 버튼, 포커스 가능한 스크롤 영역, syntaxTheme 톤을 지원합니다. | `CodeSnippetViewer` |
|
|
248
|
+
| CodeDiffViewer | 코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff와 포커스 가능한 스크롤 영역을 제공합니다. | `CodeDiffViewer` |
|
|
249
|
+
| ConnectionIndicator | 연결 상태 표시기. connected, connecting, disconnected, error 상태를 지원합니다. | `ConnectionIndicator` |
|
|
250
|
+
| EventIcon | 이벤트 아이콘. semantic key 또는 ReactNode 아이콘과 배경색을 표시합니다. | `EventIcon`, `POPULAR_ICONS`, `COLOR_PRESETS` |
|
|
247
251
|
|
|
248
252
|
### Lists & Feeds
|
|
249
253
|
|
|
@@ -296,14 +300,14 @@
|
|
|
296
300
|
|
|
297
301
|
### Analytics
|
|
298
302
|
|
|
299
|
-
| Component | Description
|
|
300
|
-
| ---------------- |
|
|
301
|
-
| SqlEditor | SQL 에디터. CodeMirror 기반의 SQL 편집기로 구문 강조와 자동 완성을 지원합니다.
|
|
302
|
-
| EventMetaEditor | 이벤트
|
|
303
|
-
| PropertyExplorer |
|
|
304
|
-
| RichTextEditor | 마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합.
|
|
305
|
-
| ExportButton | 데이터 내보내기 버튼. CSV/JSON 변환 내장, PDF는 콜백 위임. DropdownMenu 기반.
|
|
306
|
-
| InsightsPanel | 이상 탐지 인사이트 패널. severity별 카드, 통계 필터, dismiss 기능, 검출 설정(유형/Z-score/days).
|
|
303
|
+
| Component | Description | Key Exports |
|
|
304
|
+
| ---------------- | ---------------------------------------------------------------------------------------------------------- | ------------------ |
|
|
305
|
+
| SqlEditor | SQL 에디터. CodeMirror 기반의 SQL 편집기로 구문 강조와 자동 완성을 지원합니다. | `SqlEditor` |
|
|
306
|
+
| EventMetaEditor | 기본 이벤트 메타와 호출자 소유 섹션을 한 폼에서 편집하고, footer의 한 액션으로 함께 저장할 수 있습니다. | `EventMetaEditor` |
|
|
307
|
+
| PropertyExplorer | 검색 가능한 속성 목록을 그룹별로 표시하고, 숨김 상태와 호출자 소유의 명시적인 편집 액션을 함께 제공합니다. | `PropertyExplorer` |
|
|
308
|
+
| RichTextEditor | 마크다운 리치 텍스트 에디터. 서식 툴바 + textarea 조합. | `RichTextEditor` |
|
|
309
|
+
| ExportButton | 데이터 내보내기 버튼. CSV/JSON 변환 내장, PDF는 콜백 위임. DropdownMenu 기반. | `ExportButton` |
|
|
310
|
+
| InsightsPanel | 이상 탐지 인사이트 패널. severity별 카드, 통계 필터, dismiss 기능, 검출 설정(유형/Z-score/days). | `InsightsPanel` |
|
|
307
311
|
|
|
308
312
|
### Builders
|
|
309
313
|
|
|
@@ -339,23 +343,26 @@
|
|
|
339
343
|
|
|
340
344
|
### Other
|
|
341
345
|
|
|
342
|
-
| Component | Description | Key Exports
|
|
343
|
-
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
344
|
-
| PageAside | Sticky 페이지 사이드 aside chrome. 고정 너비 + header/body/footer 3-slot. | `PageAside`
|
|
345
|
-
| FailureList | 실패 목록 패널. severity별 색상 강조, 그룹핑, 액션 슬롯을 지원합니다. | `FailureList`
|
|
346
|
-
| KeyValueEditor | 키-값 쌍 편집기. 동적 행 추가/삭제, 비밀값 토글, 유효성 검사를 지원합니다. | `KeyValueEditor`
|
|
347
|
-
| EventTimeline | 이벤트를 순서로 읽히게 하는 타임라인. 인접 이벤트 사이의 경과 시간을 라벨링하고, 속성 페이로드를 제자리에서 펼치며, 세션 단위 그룹핑을 지원한다. | `EventTimeline`
|
|
348
|
-
| ScoreBreakdown | 합성 점수를 축별로 분해해 보여준다. 총점과 함께 각 축의 값·가중치·의미를 노출해 '43'을 판정이 아니라 발견으로 만든다. | `ScoreBreakdown`
|
|
349
|
-
| Flyout | 목록을 화면에 둔 채 레코드를 옆에서 보여주는 상세 패널. 모달이 아니다 — 포커스 트랩·aria-modal·inert 없이 Escape로 닫고 포커스를 되돌린다. | `Flyout`
|
|
350
|
-
| AuditTimeline | 변경 이력 타임라인. 액션별 색상 코딩 + 확장 가능한 diff 뷰. | `AuditTimeline`
|
|
351
|
-
| ChatSidebar | AI 채팅 사이드바. 대화 목록, 검색, 새 대화 버튼. | `ChatSidebar`
|
|
352
|
-
| ChatInput | 채팅 입력 컴포넌트. 자동 리사이즈 textarea, 파일 첨부, 모델/스타일 Select. | `ChatInput`
|
|
353
|
-
| ChatMessageList | 채팅 메시지 목록. 역할별 말풍선, 타이핑 인디케이터, 자동 스크롤. | `ChatMessageList`
|
|
354
|
-
| TimeRangeControl | date math(now-7d, now/d) 기반 시간 범위 컨트롤. quick select, 프리셋/최근 사용, 명시적 Update, 자동 갱신, 창 이동·확대/축소 버튼을 제공합니다. | `TimeRangeControl`, `DEFAULT_TIME_PRESETS`
|
|
355
|
-
| TimeSeriesPanel | 시간 범위 컨트롤과 시계열 차트를 한 단위로 묶은 패널. 드래그 줌과 줌 히스토리(되돌리기), 범례 토글을 포함합니다. | `TimeSeriesPanel`
|
|
356
|
-
| LogTable | 계속 도착하는 로그용 윈도잉 테이블. 컬럼 정의 기반, 상단 삽입 시 스크롤 위치 보존, follow 상태 보고, 셀 값 즉시 필터, 밀도·정렬을 지원합니다. | `LogTable`
|
|
357
|
-
| QueryBar | 검색과 필터를 한 입력으로 합친 쿼리 바. field:value, -부정, (a or b), 비교 연산, 필드·값 자동완성, 절(clause) 칩을 지원합니다. | `QueryBar`
|
|
358
|
-
| FieldSidebar | 데이터에 어떤 필드가 있고 각 필드가 무슨 값을 갖는지 보여주는 사이드바. 값 분포 막대, 컬럼으로 승격, 값 기준 포함/제외 필터를 제공합니다. | `FieldSidebar`
|
|
346
|
+
| Component | Description | Key Exports |
|
|
347
|
+
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- |
|
|
348
|
+
| PageAside | Sticky 페이지 사이드 aside chrome. 고정 너비 + header/body/footer 3-slot. | `PageAside` |
|
|
349
|
+
| FailureList | 실패 목록 패널. severity별 색상 강조, 그룹핑, 액션 슬롯을 지원합니다. | `FailureList` |
|
|
350
|
+
| KeyValueEditor | 키-값 쌍 편집기. 동적 행 추가/삭제, 비밀값 토글, 유효성 검사를 지원합니다. | `KeyValueEditor` |
|
|
351
|
+
| EventTimeline | 이벤트를 순서로 읽히게 하는 타임라인. 인접 이벤트 사이의 경과 시간을 라벨링하고, 속성 페이로드를 제자리에서 펼치며, 세션 단위 그룹핑을 지원한다. | `EventTimeline` |
|
|
352
|
+
| ScoreBreakdown | 합성 점수를 축별로 분해해 보여준다. 총점과 함께 각 축의 값·가중치·의미를 노출해 '43'을 판정이 아니라 발견으로 만든다. | `ScoreBreakdown` |
|
|
353
|
+
| Flyout | 목록을 화면에 둔 채 레코드를 옆에서 보여주는 상세 패널. 모달이 아니다 — 포커스 트랩·aria-modal·inert 없이 Escape로 닫고 포커스를 되돌린다. | `Flyout` |
|
|
354
|
+
| AuditTimeline | 변경 이력 타임라인. 액션별 색상 코딩 + 확장 가능한 diff 뷰. | `AuditTimeline` |
|
|
355
|
+
| ChatSidebar | AI 채팅 사이드바. 대화 목록, 검색, 새 대화 버튼. | `ChatSidebar` |
|
|
356
|
+
| ChatInput | 채팅 입력 컴포넌트. 자동 리사이즈 textarea, 파일 첨부, 모델/스타일 Select. | `ChatInput` |
|
|
357
|
+
| ChatMessageList | 채팅 메시지 목록. 역할별 말풍선, 타이핑 인디케이터, 자동 스크롤. | `ChatMessageList` |
|
|
358
|
+
| TimeRangeControl | date math(now-7d, now/d) 기반 시간 범위 컨트롤. quick select, 프리셋/최근 사용, 명시적 Update, 자동 갱신, 창 이동·확대/축소 버튼을 제공합니다. | `TimeRangeControl`, `DEFAULT_TIME_PRESETS` |
|
|
359
|
+
| TimeSeriesPanel | 시간 범위 컨트롤과 시계열 차트를 한 단위로 묶은 패널. 드래그 줌과 줌 히스토리(되돌리기), 범례 토글을 포함합니다. | `TimeSeriesPanel` |
|
|
360
|
+
| LogTable | 계속 도착하는 로그용 윈도잉 테이블. 컬럼 정의 기반, 상단 삽입 시 스크롤 위치 보존, follow 상태 보고, 셀 값 즉시 필터, 밀도·정렬을 지원합니다. | `LogTable` |
|
|
361
|
+
| QueryBar | 검색과 필터를 한 입력으로 합친 쿼리 바. field:value, -부정, (a or b), 비교 연산, 필드·값 자동완성, 절(clause) 칩을 지원합니다. | `QueryBar` |
|
|
362
|
+
| FieldSidebar | 데이터에 어떤 필드가 있고 각 필드가 무슨 값을 갖는지 보여주는 사이드바. 값 분포 막대, 컬럼으로 승격, 값 기준 포함/제외 필터를 제공합니다. | `FieldSidebar` |
|
|
363
|
+
| InspectorLayout | 목록과 인스펙터의 2-pane 레이아웃. 넓으면 밀어내고(push) 좁으면 덮으며(overlay), 닫을 때 포커스를 열었던 자리로 되돌립니다. | `InspectorLayout` |
|
|
364
|
+
| QueryFilterBar | QueryBar와 필터 버튼이 하나의 Query를 공유합니다. 버튼은 상태를 갖지 않고 Query를 읽어 활성 여부를 계산합니다. | `QueryFilterBar`, `hasActiveQuery` |
|
|
365
|
+
| CatalogFrame | 카탈로그 목록의 공통 뼈대. 헤더·통계·고지·필터·인스펙터·페이지네이션·일괄 작업과 빈/에러 상태를 담고, 필터나 페이지가 바뀌면 선택을 비웁니다. | `CatalogFrame`, `CatalogRowActions`, `CatalogCellControls` |
|
|
359
366
|
|
|
360
367
|
## Surface Components (0)
|
|
361
368
|
|
|
@@ -378,6 +385,8 @@
|
|
|
378
385
|
| `shape` | `"square" \| "circle"` | | "square" | 토큰 모양 |
|
|
379
386
|
| `title` | `string` | | | 접근성 이름. 기본값은 타입 이름 |
|
|
380
387
|
| `decorative` | `boolean` | | false | 인접 텍스트가 타입을 이미 말할 때 접근성 트리에서 제외 |
|
|
388
|
+
| `withLabel` | `boolean` | | false | 글리프 옆에 타입 이름을 함께 표시 |
|
|
389
|
+
| `label` | `string` | | | withLabel이 표시할 문구. 기본값은 타입 이름 |
|
|
381
390
|
| `className` | `string` | | | 추가 CSS 클래스 |
|
|
382
391
|
|
|
383
392
|
#### Facet
|
|
@@ -560,11 +569,11 @@
|
|
|
560
569
|
|
|
561
570
|
**Import:** `import { Heading } from "@reopt-ai/opt-ui"`
|
|
562
571
|
|
|
563
|
-
| Prop | Type
|
|
564
|
-
| ---------- |
|
|
565
|
-
| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6`
|
|
566
|
-
| `variant` | `"heading-1"
|
|
567
|
-
| `children` | `ReactNode`
|
|
572
|
+
| Prop | Type | Required | Default | Description |
|
|
573
|
+
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | ------------------------ |
|
|
574
|
+
| `level` | `1 \| 2 \| 3 \| 4 \| 5 \| 6` | | | 의미 기반 HTML 제목 레벨 |
|
|
575
|
+
| `variant` | `"heading-1" \| "heading-2" \| "heading-3" \| "heading-4" \| "heading-5" \| "heading-6" \| "display-1" \| "display-2" \| "display-3"` | | | 시각적 제목 역할 |
|
|
576
|
+
| `children` | `ReactNode` | | | 제목 콘텐츠 |
|
|
568
577
|
|
|
569
578
|
#### Kbd
|
|
570
579
|
|
|
@@ -1553,15 +1562,16 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
1553
1562
|
|
|
1554
1563
|
**Import:** `import { Switch } from "@reopt-ai/opt-ui"`
|
|
1555
1564
|
|
|
1556
|
-
| Prop | Type | Required | Default | Description
|
|
1557
|
-
| ---------------- | ---------------------------- | -------- | ------- |
|
|
1558
|
-
| `label` | `string` | | | 스위치 레이블
|
|
1559
|
-
| `
|
|
1560
|
-
| `
|
|
1561
|
-
| `
|
|
1562
|
-
| `
|
|
1563
|
-
| `
|
|
1564
|
-
| `
|
|
1565
|
+
| Prop | Type | Required | Default | Description |
|
|
1566
|
+
| ---------------- | ---------------------------- | -------- | ------- | -------------------------------------------------------------------------- |
|
|
1567
|
+
| `label` | `string` | | | 스위치 레이블 |
|
|
1568
|
+
| `hint` | `string` | | | 레이블 아래 보조 설명 텍스트 |
|
|
1569
|
+
| `description` | `string` | | | 레이블 아래 설명 텍스트 **⚠️ deprecated since 1.9.0 — use `hint` instead** |
|
|
1570
|
+
| `checked` | `boolean` | | | 제어 모드: 체크 상태 |
|
|
1571
|
+
| `defaultChecked` | `boolean` | | | 비제어 모드: 초기 체크 상태 |
|
|
1572
|
+
| `onChange` | `(checked: boolean) => void` | | | 상태 변경 핸들러 |
|
|
1573
|
+
| `size` | `"sm" \| "md" \| "lg"` | | "md" | 스위치 크기 |
|
|
1574
|
+
| `disabled` | `boolean` | | | 비활성화 상태 |
|
|
1565
1575
|
|
|
1566
1576
|
#### Skeleton
|
|
1567
1577
|
|
|
@@ -1802,16 +1812,17 @@ import {
|
|
|
1802
1812
|
|
|
1803
1813
|
**Checkbox:**
|
|
1804
1814
|
|
|
1805
|
-
| Prop | Type | Required | Default | Description
|
|
1806
|
-
| ---------------- | ---------------------------- | -------- | ------- |
|
|
1807
|
-
| `label` | `string` | | | 체크박스 레이블
|
|
1808
|
-
| `
|
|
1809
|
-
| `
|
|
1810
|
-
| `
|
|
1811
|
-
| `
|
|
1812
|
-
| `
|
|
1813
|
-
| `
|
|
1814
|
-
| `
|
|
1815
|
+
| Prop | Type | Required | Default | Description |
|
|
1816
|
+
| ---------------- | ---------------------------- | -------- | ------- | -------------------------------------------------------------------------- |
|
|
1817
|
+
| `label` | `string` | | | 체크박스 레이블 |
|
|
1818
|
+
| `hint` | `string` | | | 레이블 아래 보조 설명 텍스트 |
|
|
1819
|
+
| `description` | `string` | | | 레이블 아래 설명 텍스트 **⚠️ deprecated since 1.9.0 — use `hint` instead** |
|
|
1820
|
+
| `checked` | `boolean` | | | 제어 모드: 체크 상태 |
|
|
1821
|
+
| `defaultChecked` | `boolean` | | | 비제어 모드: 초기 체크 상태 |
|
|
1822
|
+
| `onChange` | `(checked: boolean) => void` | | | 상태 변경 핸들러 |
|
|
1823
|
+
| `size` | `"sm" \| "md" \| "lg"` | | "md" | 체크박스 크기 |
|
|
1824
|
+
| `value` | `string` | | | CheckboxGroup 내에서 사용할 값 |
|
|
1825
|
+
| `indeterminate` | `boolean` | | false | 불확정 상태 표시 (마이너스 아이콘) |
|
|
1815
1826
|
|
|
1816
1827
|
**CheckboxGroup:**
|
|
1817
1828
|
|
|
@@ -1840,12 +1851,13 @@ import {
|
|
|
1840
1851
|
|
|
1841
1852
|
**Radio:**
|
|
1842
1853
|
|
|
1843
|
-
| Prop | Type | Required | Default | Description
|
|
1844
|
-
| ------------- | ---------------------- | -------- | ------- |
|
|
1845
|
-
| `value` | `string` | | | 라디오 값 (RadioGroup 안에서는 부모가 관리하므로 optional)
|
|
1846
|
-
| `label` | `string` | | | 라디오 레이블
|
|
1847
|
-
| `
|
|
1848
|
-
| `
|
|
1854
|
+
| Prop | Type | Required | Default | Description |
|
|
1855
|
+
| ------------- | ---------------------- | -------- | ------- | -------------------------------------------------------------------------- |
|
|
1856
|
+
| `value` | `string` | | | 라디오 값 (RadioGroup 안에서는 부모가 관리하므로 optional) |
|
|
1857
|
+
| `label` | `string` | | | 라디오 레이블 |
|
|
1858
|
+
| `hint` | `string` | | | 레이블 아래 보조 설명 텍스트 |
|
|
1859
|
+
| `description` | `string` | | | 레이블 아래 설명 텍스트 **⚠️ deprecated since 1.9.0 — use `hint` instead** |
|
|
1860
|
+
| `size` | `"sm" \| "md" \| "lg"` | | "md" | 라디오 크기 |
|
|
1849
1861
|
|
|
1850
1862
|
**Keyboard Shortcuts:**
|
|
1851
1863
|
|
|
@@ -1859,21 +1871,21 @@ import {
|
|
|
1859
1871
|
|
|
1860
1872
|
**Import:** `import { DateRangePicker } from "@reopt-ai/opt-ui"`
|
|
1861
1873
|
|
|
1862
|
-
| Prop | Type
|
|
1863
|
-
| --------------------- |
|
|
1864
|
-
| `value` | `DateRange`
|
|
1865
|
-
| `onChange` | `(range: DateRange) => void`
|
|
1866
|
-
| `presets` | `DateRangePreset[]`
|
|
1867
|
-
| `placeholder` | `string`
|
|
1868
|
-
| `label` | `string`
|
|
1869
|
-
| `disabled` | `boolean`
|
|
1870
|
-
| `format` | `(date: Date) => string`
|
|
1871
|
-
| `comparison` | `boolean`
|
|
1872
|
-
| `comparisonMode` | `"previous" \| "year-over-year"`
|
|
1873
|
-
| `onComparisonChange` | `(
|
|
1874
|
-
| `showGranularity` | `boolean`
|
|
1875
|
-
| `granularity` | `"hour" \| "day" \| "week" \| "month"`
|
|
1876
|
-
| `onGranularityChange` | `(granularity: DateGranularity) => void`
|
|
1874
|
+
| Prop | Type | Required | Default | Description |
|
|
1875
|
+
| --------------------- | ---------------------------------------- | -------- | ------------------- | ------------------------------------------------------ |
|
|
1876
|
+
| `value` | `DateRange` | | | 제어 모드: { start: Date \| null, end: Date \| null } |
|
|
1877
|
+
| `onChange` | `(range: DateRange) => void` | | | 범위 변경 핸들러 |
|
|
1878
|
+
| `presets` | `DateRangePreset[]` | | | 빠른 선택 프리셋 배열 (기본: Today, Last 7/30/90 days) |
|
|
1879
|
+
| `placeholder` | `string` | | "Select date range" | 미선택 시 표시 텍스트 |
|
|
1880
|
+
| `label` | `string` | | | 입력 필드 레이블 |
|
|
1881
|
+
| `disabled` | `boolean` | | false | 비활성화 상태 |
|
|
1882
|
+
| `format` | `(date: Date) => string` | | | 날짜 포맷 함수 |
|
|
1883
|
+
| `comparison` | `boolean` | | false | 비교 모드 활성화 |
|
|
1884
|
+
| `comparisonMode` | `"previous" \| "year-over-year"` | | "previous" | 비교 기준 (이전 기간 / 전년 동기) |
|
|
1885
|
+
| `onComparisonChange` | `(mode: ComparisonMode \| null) => void` | | | 비교 모드 변경 콜백 |
|
|
1886
|
+
| `showGranularity` | `boolean` | | false | 시간 단위 선택기 표시 |
|
|
1887
|
+
| `granularity` | `"hour" \| "day" \| "week" \| "month"` | | "day" | 시간 단위 |
|
|
1888
|
+
| `onGranularityChange` | `(granularity: DateGranularity) => void` | | | 시간 단위 변경 콜백 |
|
|
1877
1889
|
|
|
1878
1890
|
#### TagInput
|
|
1879
1891
|
|
|
@@ -2090,16 +2102,16 @@ import {
|
|
|
2090
2102
|
|
|
2091
2103
|
**ResizablePanelGroup:**
|
|
2092
2104
|
|
|
2093
|
-
| Prop | Type | Required | Default | Description
|
|
2094
|
-
| ----------------- | ------------------------------------------ | -------- | ------- |
|
|
2095
|
-
| `direction` | `"horizontal" \| "vertical"` | Yes | | 패널 분할 방향
|
|
2096
|
-
| `children` | `ReactNode` | Yes | | ResizablePanel + ResizableHandle 조합
|
|
2097
|
-
| `id` | `string` | | | 그룹과 defaultLayout의 패널 크기를 식별하는 고유 ID
|
|
2098
|
-
| `defaultLayout` | `Record<string, number>` | | | 패널 ID별 초기 비율(0-100)
|
|
2099
|
-
| `onLayoutChanged` | `(layout: Record<string, number>) => void` | | | 드래그가 끝난 뒤 확정된 레이아웃 콜백
|
|
2100
|
-
| `groupRef` | `Ref<ResizablePanelGroupHandle>` | | | 레이아웃 조회·설정을 위한 명령형 그룹 ref
|
|
2101
|
-
| `autoSaveId` | `string` | | | id의 deprecated 별칭
|
|
2102
|
-
| `className` | `string` | | | 커스텀 CSS 클래스
|
|
2105
|
+
| Prop | Type | Required | Default | Description |
|
|
2106
|
+
| ----------------- | ------------------------------------------ | -------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------- |
|
|
2107
|
+
| `direction` | `"horizontal" \| "vertical"` | Yes | | 패널 분할 방향 |
|
|
2108
|
+
| `children` | `ReactNode` | Yes | | ResizablePanel + ResizableHandle 조합 |
|
|
2109
|
+
| `id` | `string` | | | 그룹과 defaultLayout의 패널 크기를 식별하는 고유 ID |
|
|
2110
|
+
| `defaultLayout` | `Record<string, number>` | | | 패널 ID별 초기 비율(0-100) |
|
|
2111
|
+
| `onLayoutChanged` | `(layout: Record<string, number>) => void` | | | 드래그가 끝난 뒤 확정된 레이아웃 콜백 |
|
|
2112
|
+
| `groupRef` | `Ref<ResizablePanelGroupHandle>` | | | 레이아웃 조회·설정을 위한 명령형 그룹 ref |
|
|
2113
|
+
| `autoSaveId` | `string` | | | id의 deprecated 별칭 **⚠️ deprecated since 1.6.0 — use `id` instead — id + defaultLayout + onLayoutChanged 조합으로 대체되었습니다.** |
|
|
2114
|
+
| `className` | `string` | | | 커스텀 CSS 클래스 |
|
|
2103
2115
|
|
|
2104
2116
|
**ResizablePanel:**
|
|
2105
2117
|
|
|
@@ -2356,6 +2368,58 @@ const MyDashboard = createBlock<MyDashboardProps>(
|
|
|
2356
2368
|
| `paused` | `boolean` | | | true면 단일 프레임만 렌더 (카드 배경 등) |
|
|
2357
2369
|
| `dpr` | `number` | | | device pixel ratio 상한 (기본 min(dpr, 2)) |
|
|
2358
2370
|
|
|
2371
|
+
#### Callout
|
|
2372
|
+
|
|
2373
|
+
**Import:** `import { Callout } from "@reopt-ai/opt-ui"`
|
|
2374
|
+
|
|
2375
|
+
| Prop | Type | Required | Default | Description |
|
|
2376
|
+
| ---------- | ----------------------------------------------------------- | -------- | ------- | ------------------------------------------- |
|
|
2377
|
+
| `tone` | `"info" \| "success" \| "warning" \| "danger" \| "neutral"` | | "info" | 고지의 성격 |
|
|
2378
|
+
| `title` | `ReactNode` | | | 한 줄 제목 |
|
|
2379
|
+
| `icon` | `ReactNode` | | | tone 기본 글리프 대체. null이면 글리프 없음 |
|
|
2380
|
+
| `action` | `ReactNode` | | | 다음 한 걸음. 둘 이상이면 고지가 아니라 폼 |
|
|
2381
|
+
| `size` | `"sm" \| "md"` | | "md" | 밀도 |
|
|
2382
|
+
| `children` | `ReactNode` | | | 본문 |
|
|
2383
|
+
|
|
2384
|
+
#### StatusDot
|
|
2385
|
+
|
|
2386
|
+
**Import:** `import { StatusDot } from "@reopt-ai/opt-ui"`
|
|
2387
|
+
|
|
2388
|
+
| Prop | Type | Required | Default | Description |
|
|
2389
|
+
| ---------- | ---------------------------------------------------------------------- | -------- | --------- | -------------------------------------- |
|
|
2390
|
+
| `tone` | `"neutral" \| "muted" \| "info" \| "success" \| "warning" \| "danger"` | | "neutral" | 점 색상 |
|
|
2391
|
+
| `size` | `"sm" \| "md"` | | "md" | 점과 글자 크기 |
|
|
2392
|
+
| `children` | `ReactNode` | Yes | | 상태 라벨. 필수 — 색은 상태가 아닙니다 |
|
|
2393
|
+
| `hint` | `string` | | | 판정 기준 툴팁 |
|
|
2394
|
+
|
|
2395
|
+
#### CopyButton
|
|
2396
|
+
|
|
2397
|
+
**Import:** `import { CopyButton } from "@reopt-ai/opt-ui"`
|
|
2398
|
+
|
|
2399
|
+
| Prop | Type | Required | Default | Description |
|
|
2400
|
+
| ------------------ | ----------------------- | -------- | ------- | ------------------------------------------------------- |
|
|
2401
|
+
| `value` | `string` | Yes | | 복사할 텍스트 |
|
|
2402
|
+
| `variant` | `"icon" \| "text"` | | "icon" | 글리프만 / 글리프 + 라벨 |
|
|
2403
|
+
| `size` | `"sm" \| "md"` | | "md" | 버튼 크기 |
|
|
2404
|
+
| `feedbackDuration` | `number` | | 1500 | 확인 상태 유지 시간 (ms) |
|
|
2405
|
+
| `onCopy` | `(ok: boolean) => void` | | | 실제로 복사됐는지 — 비보안 컨텍스트·권한 거부에서 false |
|
|
2406
|
+
| `labels` | `CopyButtonLabels` | | | copy / copied / failed 문구 |
|
|
2407
|
+
|
|
2408
|
+
#### SegmentedControl
|
|
2409
|
+
|
|
2410
|
+
**Import:** `import { SegmentedControl } from "@reopt-ai/opt-ui"`
|
|
2411
|
+
|
|
2412
|
+
| Prop | Type | Required | Default | Description |
|
|
2413
|
+
| ------------ | ----------------------------- | -------- | ------- | ------------------------------------------------------- |
|
|
2414
|
+
| `options` | `SegmentedControlOption<T>[]` | Yes | | 세그먼트 목록 (value / label / icon / badge / disabled) |
|
|
2415
|
+
| `value` | `T` | Yes | | 선택된 값 |
|
|
2416
|
+
| `onChange` | `(value: T) => void` | Yes | | 선택 변경 |
|
|
2417
|
+
| `size` | `"sm" \| "md"` | | "md" | 컨트롤 크기 |
|
|
2418
|
+
| `fullWidth` | `boolean` | | false | 컨테이너를 균등 분할 |
|
|
2419
|
+
| `disabled` | `boolean` | | false | 전체 비활성 |
|
|
2420
|
+
| `aria-label` | `string` | Yes | | radiogroup 이름. 필수 |
|
|
2421
|
+
| `className` | `string` | | | 추가 CSS 클래스 |
|
|
2422
|
+
|
|
2359
2423
|
### Visual Layer
|
|
2360
2424
|
|
|
2361
2425
|
### Shell Layer
|
|
@@ -2369,6 +2433,13 @@ const MyDashboard = createBlock<MyDashboardProps>(
|
|
|
2369
2433
|
| ------- | ----------- | -------- | ------- | --------------------------------------- |
|
|
2370
2434
|
| `items` | `FaqItem[]` | Yes | | FAQ 항목 배열. { id, question, answer } |
|
|
2371
2435
|
|
|
2436
|
+
**Keyboard Shortcuts:**
|
|
2437
|
+
|
|
2438
|
+
| Keys | Action |
|
|
2439
|
+
| --------------- | --------------------- |
|
|
2440
|
+
| `↑ ↓` | 질문 사이 포커스 이동 |
|
|
2441
|
+
| `Enter / Space` | 답변 펼치기 또는 접기 |
|
|
2442
|
+
|
|
2372
2443
|
#### PageAside
|
|
2373
2444
|
|
|
2374
2445
|
**Import:** `import { PageAside } from "@reopt-ai/opt-ui"`
|
|
@@ -2505,33 +2576,42 @@ const fields = [
|
|
|
2505
2576
|
| ------- | ----------- | -------- | ------- | --------------------------------------------------- |
|
|
2506
2577
|
| `menus` | `MenuDef[]` | Yes | | 메뉴 정의 배열. { id, label, items: MenuItemDef[] } |
|
|
2507
2578
|
|
|
2579
|
+
**Keyboard Shortcuts:**
|
|
2580
|
+
|
|
2581
|
+
| Keys | Action |
|
|
2582
|
+
| ------------------- | -------------------------- |
|
|
2583
|
+
| `← →` | 상위 메뉴 사이 포커스 이동 |
|
|
2584
|
+
| `Enter / Space / ↓` | 메뉴 열기 |
|
|
2585
|
+
| `↑ ↓` | 열린 메뉴 항목 이동 |
|
|
2586
|
+
| `Escape` | 메뉴 닫고 트리거로 복귀 |
|
|
2587
|
+
|
|
2508
2588
|
#### CommandPalette
|
|
2509
2589
|
|
|
2510
2590
|
**Import:** `import { CommandPalette } from "@reopt-ai/opt-ui"`
|
|
2511
2591
|
**Dependencies:** dialog (core), combobox (core), kbd (core)
|
|
2512
2592
|
|
|
2513
|
-
| Prop | Type
|
|
2514
|
-
| --------------- |
|
|
2515
|
-
| `commands` | `Omit<
|
|
2516
|
-
| `open` | `boolean`
|
|
2517
|
-
| `onOpenChange` | `(open: boolean) => void`
|
|
2518
|
-
| `onSelect` | `(command: Omit<
|
|
2519
|
-
| `inline` | `boolean`
|
|
2520
|
-
| `labels` | `CommandPaletteLabels`
|
|
2521
|
-
| `footer` | `ReactNode`
|
|
2522
|
-
| `empty` | `ReactNode`
|
|
2523
|
-
| `inputTrailing` | `ReactNode`
|
|
2593
|
+
| Prop | Type | Required | Default | Description |
|
|
2594
|
+
| --------------- | ----------------------------------------------- | -------- | ------- | ----------------------------------------------------- |
|
|
2595
|
+
| `commands` | `Omit<CommandDef, "action">[]` | Yes | | 커맨드 목록. { id, label, group, shortcut? } |
|
|
2596
|
+
| `open` | `boolean` | Yes | | 열림 상태 |
|
|
2597
|
+
| `onOpenChange` | `(open: boolean) => void` | Yes | | 상태 변경 핸들러 |
|
|
2598
|
+
| `onSelect` | `(command: Omit<CommandDef, "action">) => void` | | | 커맨드 선택 핸들러 |
|
|
2599
|
+
| `inline` | `boolean` | | false | true일 때 풀스크린 Dialog 대신 인라인 팝업으로 렌더링 |
|
|
2600
|
+
| `labels` | `CommandPaletteLabels` | | | title/description/input/list/empty/escape 문구 |
|
|
2601
|
+
| `footer` | `ReactNode` | | | 명령 목록 아래에 표시할 footer slot |
|
|
2602
|
+
| `empty` | `ReactNode` | | | 결과가 없을 때 표시할 empty slot |
|
|
2603
|
+
| `inputTrailing` | `ReactNode` | | | 검색 입력 우측 보조 콘텐츠 |
|
|
2524
2604
|
|
|
2525
2605
|
#### CommandPaletteTrigger
|
|
2526
2606
|
|
|
2527
2607
|
**Import:** `import { CommandPaletteTrigger } from "@reopt-ai/opt-ui"`
|
|
2528
2608
|
**Dependencies:** command-palette (shells)
|
|
2529
2609
|
|
|
2530
|
-
| Prop | Type
|
|
2531
|
-
| ---------- |
|
|
2532
|
-
| `commands` | `Omit<
|
|
2533
|
-
| `onSelect` | `(command: Omit<
|
|
2534
|
-
| `labels` | `CommandPaletteTriggerLabels`
|
|
2610
|
+
| Prop | Type | Required | Default | Description |
|
|
2611
|
+
| ---------- | ----------------------------------------------- | -------- | ------- | -------------------------------------------------- |
|
|
2612
|
+
| `commands` | `Omit<CommandDef, "action">[]` | Yes | | 커맨드 목록 |
|
|
2613
|
+
| `onSelect` | `(command: Omit<CommandDef, "action">) => void` | | | 커맨드 선택 핸들러 |
|
|
2614
|
+
| `labels` | `CommandPaletteTriggerLabels` | | | 내부 CommandPalette에 전달할 title/input/list 문구 |
|
|
2535
2615
|
|
|
2536
2616
|
#### DeploymentTimeline
|
|
2537
2617
|
|
|
@@ -2591,14 +2671,15 @@ const fields = [
|
|
|
2591
2671
|
|
|
2592
2672
|
**DataTable:**
|
|
2593
2673
|
|
|
2594
|
-
| Prop | Type | Required | Default | Description
|
|
2595
|
-
| -------------- | -------------------- | -------- | ------------------- |
|
|
2596
|
-
| `data` | `T[]` | Yes | | 테이블 데이터 배열
|
|
2597
|
-
| `columns` | `ColumnDef<T>[]` | Yes | | 컬럼 정의. { id, header, accessor, width?, align? }
|
|
2598
|
-
| `keyExtractor` | `(row: T) => string` | Yes | | 각 행의 고유 키 추출 함수
|
|
2599
|
-
| `title` | `string` | |
|
|
2600
|
-
| `
|
|
2601
|
-
| `
|
|
2674
|
+
| Prop | Type | Required | Default | Description |
|
|
2675
|
+
| -------------- | -------------------- | -------- | ------------------- | ----------------------------------------------------------- |
|
|
2676
|
+
| `data` | `T[]` | Yes | | 테이블 데이터 배열 |
|
|
2677
|
+
| `columns` | `ColumnDef<T>[]` | Yes | | 컬럼 정의. { id, header, accessor, width?, align? } |
|
|
2678
|
+
| `keyExtractor` | `(row: T) => string` | Yes | | 각 행의 고유 키 추출 함수 |
|
|
2679
|
+
| `title` | `string` | | | 테이블 위에 표시할 제목. 생략하면 제목 영역을 렌더하지 않음 |
|
|
2680
|
+
| `ariaLabel` | `string` | | | 보이는 제목이 없을 때 grid에 제공할 접근 가능한 이름 |
|
|
2681
|
+
| `onRowClick` | `(row: T) => void` | | | 행 클릭 핸들러 |
|
|
2682
|
+
| `emptyMessage` | `string` | | "No data available" | 데이터 없을 때 표시할 메시지 |
|
|
2602
2683
|
|
|
2603
2684
|
**ColumnDef:**
|
|
2604
2685
|
|
|
@@ -2741,11 +2822,11 @@ import { DataTable } from "@reopt-ai/opt-ui";
|
|
|
2741
2822
|
**Import:** `import { FilterBar } from "@reopt-ai/opt-ui"`
|
|
2742
2823
|
**Dependencies:** select (core), input (core), button (core), switch (core), checkbox (core), date-range-picker (core)
|
|
2743
2824
|
|
|
2744
|
-
| Prop | Type
|
|
2745
|
-
| ---------------- |
|
|
2746
|
-
| `filters` | `FilterGroupDef[]`
|
|
2747
|
-
| `onFilterChange` | `(filterId: string, value: string \| string[]) => void` | | | 필터 변경 핸들러 |
|
|
2748
|
-
| `onClearAll` | `() => void`
|
|
2825
|
+
| Prop | Type | Required | Default | Description |
|
|
2826
|
+
| ---------------- | ------------------------------------------------------------------ | -------- | ------- | ----------------------------------------------------- |
|
|
2827
|
+
| `filters` | `FilterGroupDef[]` | Yes | | 필터 그룹 배열. { id, label, type, options?, value? } |
|
|
2828
|
+
| `onFilterChange` | `(filterId: string, value: string \| string[] \| boolean) => void` | | | 필터 변경 핸들러 |
|
|
2829
|
+
| `onClearAll` | `() => void` | | | 모든 필터 초기화 핸들러 |
|
|
2749
2830
|
|
|
2750
2831
|
**Examples:**
|
|
2751
2832
|
|
|
@@ -2811,15 +2892,15 @@ const filters = [
|
|
|
2811
2892
|
**Import:** `import { AuthForm } from "@reopt-ai/opt-ui"`
|
|
2812
2893
|
**Dependencies:** form (core)
|
|
2813
2894
|
|
|
2814
|
-
| Prop | Type
|
|
2815
|
-
| ------------------- |
|
|
2816
|
-
| `defaultMode` | `"login" \| "signup"`
|
|
2817
|
-
| `mode` | `"login" \| "signup"`
|
|
2818
|
-
| `onModeChange` | `(mode: "login" \| "signup") => void`
|
|
2819
|
-
| `showRememberMe` | `boolean`
|
|
2820
|
-
| `minPasswordLength` | `number`
|
|
2821
|
-
| `onSubmit` | `(values: { email
|
|
2822
|
-
| `labels` | `AuthFormLabels`
|
|
2895
|
+
| Prop | Type | Required | Default | Description |
|
|
2896
|
+
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | -------------------------------------------- |
|
|
2897
|
+
| `defaultMode` | `"login" \| "signup"` | | "login" | 초기 모드 (비제어) |
|
|
2898
|
+
| `mode` | `"login" \| "signup"` | | | 제어 모드: 현재 모드 |
|
|
2899
|
+
| `onModeChange` | `(mode: "login" \| "signup") => void` | | | 모드 변경 핸들러 |
|
|
2900
|
+
| `showRememberMe` | `boolean` | | true | 로그인 모드에서 '로그인 상태 유지' 표시 여부 |
|
|
2901
|
+
| `minPasswordLength` | `number` | | 8 | 비밀번호 최소 길이 |
|
|
2902
|
+
| `onSubmit` | `(values: { email: string; password: string; confirmPassword?: string; rememberMe?: boolean; mode: "login" \| "signup" }) => void` | | | 제출 핸들러 |
|
|
2903
|
+
| `labels` | `AuthFormLabels` | | | i18n용 라벨 오버라이드 |
|
|
2823
2904
|
|
|
2824
2905
|
#### WizardForm
|
|
2825
2906
|
|
|
@@ -2855,17 +2936,17 @@ const filters = [
|
|
|
2855
2936
|
**Import:** `import { FileUploadForm } from "@reopt-ai/opt-ui"`
|
|
2856
2937
|
**Dependencies:** form (core)
|
|
2857
2938
|
|
|
2858
|
-
| Prop | Type
|
|
2859
|
-
| ----------------- |
|
|
2860
|
-
| `accept` | `string`
|
|
2861
|
-
| `showPreview` | `boolean`
|
|
2862
|
-
| `showFileInfo` | `boolean`
|
|
2863
|
-
| `showDescription` | `boolean`
|
|
2864
|
-
| `maxFileSize` | `number`
|
|
2865
|
-
| `onSubmit` | `(values: { title
|
|
2866
|
-
| `labels` | `FileUploadFormLabels`
|
|
2867
|
-
| `onPreview` | `(file: File) => void`
|
|
2868
|
-
| `columnMapping` | `ReactNode`
|
|
2939
|
+
| Prop | Type | Required | Default | Description |
|
|
2940
|
+
| ----------------- | ------------------------------------------------------------------------------ | -------- | ------------------------- | ----------------------------------------- |
|
|
2941
|
+
| `accept` | `string` | | "image/*,.pdf,.doc,.docx" | 허용 파일 타입 |
|
|
2942
|
+
| `showPreview` | `boolean` | | true | 이미지 미리보기 표시 |
|
|
2943
|
+
| `showFileInfo` | `boolean` | | true | 파일 정보 표시 |
|
|
2944
|
+
| `showDescription` | `boolean` | | true | 설명 텍스트영역 표시 |
|
|
2945
|
+
| `maxFileSize` | `number` | | | 최대 파일 크기 (bytes) |
|
|
2946
|
+
| `onSubmit` | `(values: { title: string; description: string; file: File \| null }) => void` | | | 제출 핸들러 |
|
|
2947
|
+
| `labels` | `FileUploadFormLabels` | | | i18n용 라벨 오버라이드 |
|
|
2948
|
+
| `onPreview` | `(file: File) => void` | | | 파일 선택 후 프리뷰 콜백 |
|
|
2949
|
+
| `columnMapping` | `ReactNode` | | | CSV 컬럼 매핑 UI 슬롯 (파일 선택 후 표시) |
|
|
2869
2950
|
|
|
2870
2951
|
#### EventIcon
|
|
2871
2952
|
|
|
@@ -2979,6 +3060,33 @@ const filters = [
|
|
|
2979
3060
|
| `className` | `string` | | | 커스텀 CSS 클래스 |
|
|
2980
3061
|
| `labels` | `CodeSnippetViewerLabels` | | | 복사 버튼과 코드 영역 레이블 문구 |
|
|
2981
3062
|
|
|
3063
|
+
#### PropertyExplorer
|
|
3064
|
+
|
|
3065
|
+
**Import:** `import { PropertyExplorer } from "@reopt-ai/opt-ui"`
|
|
3066
|
+
**Dependencies:** input (core)
|
|
3067
|
+
|
|
3068
|
+
**PropertyExplorer:**
|
|
3069
|
+
|
|
3070
|
+
| Prop | Type | Required | Default | Description |
|
|
3071
|
+
| ----------- | --------------------------------- | -------- | ------- | -------------------------------------------------------------- |
|
|
3072
|
+
| `groups` | `PropertyGroup[]` | Yes | | 그룹별 속성 목록. 각 속성은 dataType과 hidden 상태를 포함 가능 |
|
|
3073
|
+
| `onSelect` | `(property: PropertyDef) => void` | | | 속성 선택 |
|
|
3074
|
+
| `onEdit` | `(property: PropertyDef) => void` | | | 행에 명시적인 편집 버튼을 표시하고 선택한 속성을 전달 |
|
|
3075
|
+
| `className` | `string` | | | 추가 CSS 클래스 |
|
|
3076
|
+
| `labels` | `PropertyExplorerLabels` | | | 검색·빈 상태·편집·숨김 문구 |
|
|
3077
|
+
|
|
3078
|
+
**PropertyDef:**
|
|
3079
|
+
|
|
3080
|
+
| Prop | Type | Required | Default | Description |
|
|
3081
|
+
| -------------- | --------------- | -------- | ------- | ------------------------------------------------- |
|
|
3082
|
+
| `name` | `string` | Yes | | 속성 이름 |
|
|
3083
|
+
| `type` | `string` | Yes | | 원본 스키마 타입 |
|
|
3084
|
+
| `dataType` | `FieldDataType` | | | 호출자가 이미 판정한 opt-ui 필드 타입 |
|
|
3085
|
+
| `description` | `string` | | | 속성 설명 |
|
|
3086
|
+
| `exampleValue` | `string` | | | 예시 값 |
|
|
3087
|
+
| `eventCount` | `number` | | | 관측 이벤트 수 |
|
|
3088
|
+
| `hidden` | `boolean` | | | 피커에서는 숨기되 탐색기에서는 흐리게 표시할 상태 |
|
|
3089
|
+
|
|
2982
3090
|
#### QueryResultsTable
|
|
2983
3091
|
|
|
2984
3092
|
**Import:** `import { QueryResultsTable } from "@reopt-ai/opt-ui"`
|
|
@@ -3015,21 +3123,47 @@ const filters = [
|
|
|
3015
3123
|
| `labels` | `SqlEditorLabels` | | | 문구 오버라이드 |
|
|
3016
3124
|
| `className` | `string` | | | 기본 스타일 오버라이드 |
|
|
3017
3125
|
|
|
3126
|
+
#### EventMetaEditor
|
|
3127
|
+
|
|
3128
|
+
**Import:** `import { EventMetaEditor } from "@reopt-ai/opt-ui"`
|
|
3129
|
+
**Dependencies:** input (core), icon-picker (core), color-picker (core), tag-input (core)
|
|
3130
|
+
|
|
3131
|
+
**EventMetaEditor:**
|
|
3132
|
+
|
|
3133
|
+
| Prop | Type | Required | Default | Description |
|
|
3134
|
+
| ----------- | --------------------------- | -------- | ------- | ------------------------------------------------------ |
|
|
3135
|
+
| `value` | `EventMeta` | Yes | | 편집 중인 이벤트 메타데이터 |
|
|
3136
|
+
| `onChange` | `(meta: EventMeta) => void` | Yes | | 메타데이터 변경 |
|
|
3137
|
+
| `icons` | `IconDef[]` | | | 선택 가능한 아이콘 |
|
|
3138
|
+
| `sections` | `EventMetaEditorSection[]` | | | 기본 여섯 필드 뒤에 렌더할 호출자 소유 섹션 |
|
|
3139
|
+
| `footer` | `ReactNode` | | | 내장 필드와 추가 섹션을 함께 저장하는 마지막 액션 영역 |
|
|
3140
|
+
| `className` | `string` | | | 추가 CSS 클래스 |
|
|
3141
|
+
| `labels` | `EventMetaEditorLabels` | | | 필드 레이블과 placeholder 문구 |
|
|
3142
|
+
|
|
3143
|
+
**EventMetaEditorSection:**
|
|
3144
|
+
|
|
3145
|
+
| Prop | Type | Required | Default | Description |
|
|
3146
|
+
| ------------- | ----------- | -------- | ------- | ---------------------------- |
|
|
3147
|
+
| `id` | `string` | Yes | | 섹션 키 |
|
|
3148
|
+
| `title` | `ReactNode` | | | 섹션 제목 |
|
|
3149
|
+
| `description` | `ReactNode` | | | 섹션 변경이 미치는 영향 안내 |
|
|
3150
|
+
| `children` | `ReactNode` | Yes | | 호출자가 소유하는 필드 |
|
|
3151
|
+
|
|
3018
3152
|
#### ReportBuilder
|
|
3019
3153
|
|
|
3020
3154
|
**Import:** `import { ReportBuilder } from "@reopt-ai/opt-ui"`
|
|
3021
3155
|
**Dependencies:** button (core), input (core)
|
|
3022
3156
|
|
|
3023
|
-
| Prop | Type
|
|
3024
|
-
| ------------- |
|
|
3025
|
-
| `chartTypes` | `ChartTypeDef[]`
|
|
3026
|
-
| `dataSources` | `DataSourceDef[]`
|
|
3027
|
-
| `configForm` | `ReactNode`
|
|
3028
|
-
| `styleForm` | `ReactNode`
|
|
3029
|
-
| `preview` | `ReactNode`
|
|
3030
|
-
| `onSave` | `(report: { name
|
|
3031
|
-
| `onCancel` | `() => void`
|
|
3032
|
-
| `labels` | `ReportBuilderLabels`
|
|
3157
|
+
| Prop | Type | Required | Default | Description |
|
|
3158
|
+
| ------------- | ------------------------------------------------------------------------------------------------------------------ | -------- | ------- | ----------------------------------- |
|
|
3159
|
+
| `chartTypes` | `ChartTypeDef[]` | | | 차트 타입 그리드 (기본 9종 제공) |
|
|
3160
|
+
| `dataSources` | `DataSourceDef[]` | | | 데이터 소스 드롭다운 옵션 |
|
|
3161
|
+
| `configForm` | `ReactNode` | | | 차트별 데이터 설정 폼 슬롯 (step 2) |
|
|
3162
|
+
| `styleForm` | `ReactNode` | | | 차트별 스타일 설정 폼 슬롯 (step 3) |
|
|
3163
|
+
| `preview` | `ReactNode` | | | 차트 미리보기 슬롯 (step 4) |
|
|
3164
|
+
| `onSave` | `(report: { name: string; description: string; chartType: ReportBuilderChartType; dataSourceId: string }) => void` | | | 저장 콜백 |
|
|
3165
|
+
| `onCancel` | `() => void` | | | 취소 콜백 |
|
|
3166
|
+
| `labels` | `ReportBuilderLabels` | | | UI 텍스트 커스터마이징 |
|
|
3033
3167
|
|
|
3034
3168
|
#### InsightsPanel
|
|
3035
3169
|
|
|
@@ -3275,15 +3409,15 @@ import { AppShell } from "@reopt-ai/opt-ui";
|
|
|
3275
3409
|
**Import:** `import { AsyncCombobox } from "@reopt-ai/opt-ui"`
|
|
3276
3410
|
**Dependencies:** combobox (core), spinner (core)
|
|
3277
3411
|
|
|
3278
|
-
| Prop | Type
|
|
3279
|
-
| ------------- |
|
|
3280
|
-
| `onSearch` | `(
|
|
3281
|
-
| `debounceMs` | `number`
|
|
3282
|
-
| `minChars` | `number`
|
|
3283
|
-
| `placeholder` | `string`
|
|
3284
|
-
| `onSelect` | `(value: string) => void`
|
|
3285
|
-
| `labels` | `AsyncComboboxLabels`
|
|
3286
|
-
| `loadingText` | `string`
|
|
3412
|
+
| Prop | Type | Required | Default | Description |
|
|
3413
|
+
| ------------- | -------------------------------------- | -------- | --------- | ----------------------------------------------------------------------------- |
|
|
3414
|
+
| `onSearch` | `(query: string) => Promise<string[]>` | Yes | | 검색 콜백 |
|
|
3415
|
+
| `debounceMs` | `number` | | 300 | 디바운스 ms |
|
|
3416
|
+
| `minChars` | `number` | | 1 | 최소 검색 글자 수 |
|
|
3417
|
+
| `placeholder` | `string` | | "Search…" | 플레이스홀더 **⚠️ deprecated since 1.9.0 — use `labels.placeholder` instead** |
|
|
3418
|
+
| `onSelect` | `(value: string) => void` | | | 선택 콜백 |
|
|
3419
|
+
| `labels` | `AsyncComboboxLabels` | | | input/loading/noResults/placeholder 문구 |
|
|
3420
|
+
| `loadingText` | `string` | | | 로딩 문구 **⚠️ deprecated since 1.9.0 — use `labels.loading` instead** |
|
|
3287
3421
|
|
|
3288
3422
|
#### VerticalTabs
|
|
3289
3423
|
|
|
@@ -3296,6 +3430,13 @@ import { AppShell } from "@reopt-ai/opt-ui";
|
|
|
3296
3430
|
| `defaultTabId` | `string` | | | 기본 선택 탭 ID |
|
|
3297
3431
|
| `className` | `string` | | | 커스텀 CSS 클래스 |
|
|
3298
3432
|
|
|
3433
|
+
**Keyboard Shortcuts:**
|
|
3434
|
+
|
|
3435
|
+
| Keys | Action |
|
|
3436
|
+
| ------------ | ------------------------------- |
|
|
3437
|
+
| `↑ ↓` | 세로 탭 사이 이동 및 선택 |
|
|
3438
|
+
| `Home / End` | 첫 번째 또는 마지막 탭으로 이동 |
|
|
3439
|
+
|
|
3299
3440
|
#### ColumnToggler
|
|
3300
3441
|
|
|
3301
3442
|
**Import:** `import { ColumnToggler } from "@reopt-ai/opt-ui"`
|
|
@@ -3312,13 +3453,22 @@ import { AppShell } from "@reopt-ai/opt-ui";
|
|
|
3312
3453
|
**Import:** `import { TreeTable } from "@reopt-ai/opt-ui"`
|
|
3313
3454
|
**Dependencies:** data-table (shells)
|
|
3314
3455
|
|
|
3315
|
-
| Prop | Type
|
|
3316
|
-
| ----------------- |
|
|
3317
|
-
| `data` | `TreeNode<T>[]`
|
|
3318
|
-
| `columns` | `TreeColumnDef<T>[]`
|
|
3319
|
-
| `defaultExpanded` | `string[]`
|
|
3320
|
-
| `indentSize` | `number`
|
|
3321
|
-
| `
|
|
3456
|
+
| Prop | Type | Required | Default | Description |
|
|
3457
|
+
| ----------------- | ------------------------------- | -------- | ------- | ----------------------------------------------- |
|
|
3458
|
+
| `data` | `TreeNode<T>[]` | Yes | | 트리 노드 배열 |
|
|
3459
|
+
| `columns` | `TreeColumnDef<T>[]` | Yes | | 컬럼 정의 |
|
|
3460
|
+
| `defaultExpanded` | `string[]` | | [] | 기본 펼침 노드 ID |
|
|
3461
|
+
| `indentSize` | `number` | | 24 | 들여쓰기 크기 (px) |
|
|
3462
|
+
| `getRowLabel` | `(node: TreeNode<T>) => string` | | | 행별 펼침/접기 컨트롤의 접근 가능한 이름 생성기 |
|
|
3463
|
+
| `aria-label` | `string` | | | 표의 접근 가능한 이름 |
|
|
3464
|
+
| `className` | `string` | | | 커스텀 CSS 클래스 |
|
|
3465
|
+
|
|
3466
|
+
**Keyboard Shortcuts:**
|
|
3467
|
+
|
|
3468
|
+
| Keys | Action |
|
|
3469
|
+
| --------------- | -------------------------- |
|
|
3470
|
+
| `Tab` | 펼침/접기 컨트롤 사이 이동 |
|
|
3471
|
+
| `Enter / Space` | 하위 행 펼치기 또는 접기 |
|
|
3322
3472
|
|
|
3323
3473
|
#### InlineEditTable
|
|
3324
3474
|
|
|
@@ -3338,13 +3488,13 @@ import { AppShell } from "@reopt-ai/opt-ui";
|
|
|
3338
3488
|
**Import:** `import { KanbanBoard } from "@reopt-ai/opt-ui"`
|
|
3339
3489
|
**Dependencies:** scroll-area (core)
|
|
3340
3490
|
|
|
3341
|
-
| Prop | Type
|
|
3342
|
-
| -------------- |
|
|
3343
|
-
| `columns` | `KanbanColumn<T>[]`
|
|
3344
|
-
| `onDragEnd` | `(itemId,
|
|
3345
|
-
| `renderCard` | `(item: T) => ReactNode`
|
|
3346
|
-
| `keyExtractor` | `(item: T) => string`
|
|
3347
|
-
| `className` | `string`
|
|
3491
|
+
| Prop | Type | Required | Default | Description |
|
|
3492
|
+
| -------------- | ------------------------------------------------------------------------------------- | -------- | ------- | -------------------------------- |
|
|
3493
|
+
| `columns` | `KanbanColumn<T>[]` | Yes | | 컬럼 목록 (각 컬럼에 items 배열) |
|
|
3494
|
+
| `onDragEnd` | `(itemId: string, fromColumnId: string, toColumnId: string, toIndex: number) => void` | Yes | | 드래그 완료 콜백 |
|
|
3495
|
+
| `renderCard` | `(item: T) => ReactNode` | Yes | | 카드 렌더링 함수 |
|
|
3496
|
+
| `keyExtractor` | `(item: T) => string` | Yes | | 항목 키 추출기 |
|
|
3497
|
+
| `className` | `string` | | | 커스텀 CSS 클래스 |
|
|
3348
3498
|
|
|
3349
3499
|
#### RichTextEditor
|
|
3350
3500
|
|
|
@@ -3402,25 +3552,34 @@ import { AppShell } from "@reopt-ai/opt-ui";
|
|
|
3402
3552
|
**Import:** `import { DataImportWizard } from "@reopt-ai/opt-ui"`
|
|
3403
3553
|
**Dependencies:** button (core)
|
|
3404
3554
|
|
|
3405
|
-
| Prop | Type
|
|
3406
|
-
| ----------------- |
|
|
3407
|
-
| `fields` | `ImportFieldDef[]`
|
|
3408
|
-
| `onImport` | `(mapping, data) => void` | Yes | | 임포트 확정 콜백 |
|
|
3409
|
-
| `acceptedFormats` | `string`
|
|
3410
|
-
| `className` | `string`
|
|
3555
|
+
| Prop | Type | Required | Default | Description |
|
|
3556
|
+
| ----------------- | ------------------------------------------------------------- | -------- | ------- | ------------------- |
|
|
3557
|
+
| `fields` | `ImportFieldDef[]` | Yes | | 매핑 대상 필드 목록 |
|
|
3558
|
+
| `onImport` | `(mapping: Record<string, string>, data: string[][]) => void` | Yes | | 임포트 확정 콜백 |
|
|
3559
|
+
| `acceptedFormats` | `string` | | ".csv" | 허용 파일 형식 |
|
|
3560
|
+
| `className` | `string` | | | 커스텀 CSS 클래스 |
|
|
3411
3561
|
|
|
3412
3562
|
#### MegaMenu
|
|
3413
3563
|
|
|
3414
3564
|
**Import:** `import { MegaMenu } from "@reopt-ai/opt-ui"`
|
|
3415
3565
|
**Dependencies:** popover (core)
|
|
3416
3566
|
|
|
3417
|
-
| Prop | Type | Required | Default | Description
|
|
3418
|
-
| -------------- | ------------------- | -------- | ------- |
|
|
3419
|
-
| `menus` | `MegaMenuSection[]` | Yes | | 메뉴 섹션 배열
|
|
3420
|
-
| `columns` | `number` | | 3 | 그리드 컬럼 수
|
|
3421
|
-
| `footer` | `ReactNode` | | | 하단 footer 슬롯
|
|
3422
|
-
| `triggerLabel` | `string` | | "Menu" | 트리거 버튼 텍스트
|
|
3423
|
-
| `
|
|
3567
|
+
| Prop | Type | Required | Default | Description |
|
|
3568
|
+
| -------------- | ------------------- | -------- | ------- | ------------------------------------------- |
|
|
3569
|
+
| `menus` | `MegaMenuSection[]` | Yes | | 메뉴 섹션 배열 |
|
|
3570
|
+
| `columns` | `number` | | 3 | 그리드 컬럼 수 |
|
|
3571
|
+
| `footer` | `ReactNode` | | | 하단 footer 슬롯 |
|
|
3572
|
+
| `triggerLabel` | `string` | | "Menu" | 트리거 버튼 텍스트 |
|
|
3573
|
+
| `aria-label` | `string` | | | 열린 메가 메뉴 탐색 영역의 접근 가능한 이름 |
|
|
3574
|
+
| `className` | `string` | | | 커스텀 CSS 클래스 |
|
|
3575
|
+
|
|
3576
|
+
**Keyboard Shortcuts:**
|
|
3577
|
+
|
|
3578
|
+
| Keys | Action |
|
|
3579
|
+
| --------------- | -------------------------- |
|
|
3580
|
+
| `Enter / Space` | 메가 메뉴 열기 |
|
|
3581
|
+
| `Tab` | 메뉴 링크와 액션 사이 이동 |
|
|
3582
|
+
| `Escape` | 메가 메뉴 닫기 |
|
|
3424
3583
|
|
|
3425
3584
|
#### BulkActions
|
|
3426
3585
|
|
|
@@ -3610,16 +3769,19 @@ const messages = [
|
|
|
3610
3769
|
|
|
3611
3770
|
**Import:** `import { TimeSeriesPanel } from "@reopt-ai/opt-ui"`
|
|
3612
3771
|
|
|
3613
|
-
| Prop | Type | Required | Default | Description
|
|
3614
|
-
| ------------------ | ---------------------------- | -------- | ------- |
|
|
3615
|
-
| `
|
|
3616
|
-
| `
|
|
3617
|
-
| `
|
|
3618
|
-
| `
|
|
3619
|
-
| `
|
|
3620
|
-
| `
|
|
3621
|
-
| `
|
|
3622
|
-
| `
|
|
3772
|
+
| Prop | Type | Required | Default | Description |
|
|
3773
|
+
| ------------------ | ---------------------------- | -------- | ------- | --------------------------------------------------------- |
|
|
3774
|
+
| `title` | `ReactNode` | | | 패널 제목. aria-label이 없으면 region 이름으로 연결됩니다 |
|
|
3775
|
+
| `description` | `ReactNode` | | | 패널 보조 설명 |
|
|
3776
|
+
| `data` | `TimeSeriesPoint[]` | Yes | | 시계열 데이터 |
|
|
3777
|
+
| `series` | `TimeSeriesDef[]` | Yes | | 시리즈 정의 |
|
|
3778
|
+
| `range` | `TimeRange` | Yes | | 조회 구간 — 차트 축도 여기에 고정됩니다 |
|
|
3779
|
+
| `onRangeChange` | `(range: TimeRange) => void` | Yes | | 드래그 줌·컨트롤 변경으로 구간이 바뀔 때 호출 |
|
|
3780
|
+
| `showRangeControl` | `boolean` | | true | 헤더에 TimeRangeControl 렌더 |
|
|
3781
|
+
| `toggleableLegend` | `boolean` | | false | 범례 클릭으로 시리즈 숨김 |
|
|
3782
|
+
| `annotations` | `TimeSeriesAnnotation[]` | | | 시간축 마커/구간 |
|
|
3783
|
+
| `height` | `number` | | 280 | 차트 높이 |
|
|
3784
|
+
| `aria-label` | `string` | | | 제목 대신 사용할 패널 region의 접근 가능한 이름 |
|
|
3623
3785
|
|
|
3624
3786
|
#### LogTable
|
|
3625
3787
|
|
|
@@ -3669,4 +3831,107 @@ const messages = [
|
|
|
3669
3831
|
| `onToggleColumn` | `(field: string, next: boolean) => void` | | | 컬럼 추가/제거 |
|
|
3670
3832
|
| `onFilter` | `(field: string, value: string, intent: "include" \| "exclude") => void` | | | 값 기준 필터 |
|
|
3671
3833
|
|
|
3834
|
+
#### InspectorLayout
|
|
3835
|
+
|
|
3836
|
+
**Import:** `import { InspectorLayout } from "@reopt-ai/opt-ui"`
|
|
3837
|
+
|
|
3838
|
+
| Prop | Type | Required | Default | Description |
|
|
3839
|
+
| ------------- | ----------------------- | -------- | ------- | ---------------------------------------------- |
|
|
3840
|
+
| `children` | `ReactNode` | Yes | | 목록. 인스펙터가 열려도 마운트와 스크롤을 유지 |
|
|
3841
|
+
| `inspector` | `ReactNode` | | | 인스펙터 내용. 닫혀 있으면 렌더하지 않음 |
|
|
3842
|
+
| `open` | `boolean` | Yes | | 열림 |
|
|
3843
|
+
| `onClose` | `() => void` | Yes | | 닫기 |
|
|
3844
|
+
| `title` | `ReactNode` | | | 인스펙터 제목 |
|
|
3845
|
+
| `description` | `ReactNode` | | | 제목 아래 한 줄 |
|
|
3846
|
+
| `actions` | `ReactNode` | | | 닫기 버튼 옆 컨트롤 |
|
|
3847
|
+
| `footer` | `ReactNode` | | | 인스펙터 하단 |
|
|
3848
|
+
| `breakpoint` | `"lg" \| "xl" \| "2xl"` | | "xl" | 이 폭 이상이면 push |
|
|
3849
|
+
| `width` | `"sm" \| "md" \| "lg"` | | "md" | push 레이아웃에서의 인스펙터 폭 |
|
|
3850
|
+
| `labels` | `InspectorLayoutLabels` | | | 닫기 버튼 등 인스펙터 문구 |
|
|
3851
|
+
| `className` | `string` | | | 추가 CSS 클래스 |
|
|
3852
|
+
|
|
3853
|
+
#### QueryFilterBar
|
|
3854
|
+
|
|
3855
|
+
**Import:** `import { QueryFilterBar } from "@reopt-ai/opt-ui"`
|
|
3856
|
+
|
|
3857
|
+
| Prop | Type | Required | Default | Description |
|
|
3858
|
+
| ---------------- | ------------------------ | -------- | ------- | -------------------------------------------------------------------------- |
|
|
3859
|
+
| `value` | `Query` | Yes | | 필터 상태 전부 |
|
|
3860
|
+
| `onChange` | `(query: Query) => void` | Yes | | Query 변경 |
|
|
3861
|
+
| `filters` | `QueryFilterDef[]` | Yes | | 필터 컨트롤 정의 (is / field_value_selection / field_value_toggle) |
|
|
3862
|
+
| `fields` | `QueryField[]` | | | 텍스트 입력 자동완성 |
|
|
3863
|
+
| `actions` | `ReactNode` | | | 필터 행 끝 슬롯 |
|
|
3864
|
+
| `showClauses` | `boolean` | | true | 절을 제거 가능한 칩으로 표시 |
|
|
3865
|
+
| `live` | `boolean` | | false | 매 입력마다 커밋 |
|
|
3866
|
+
| `disabled` | `boolean` | | false | 전체 비활성 |
|
|
3867
|
+
| `queryBarLabels` | `QueryBarLabels` | | | QueryBar로 통과되는 나머지 문구. placeholder/ariaLabel은 labels가 이깁니다 |
|
|
3868
|
+
| `labels` | `QueryFilterBarLabels` | | | 검색·필터·초기화 문구 |
|
|
3869
|
+
| `className` | `string` | | | 추가 CSS 클래스 |
|
|
3870
|
+
|
|
3871
|
+
#### CatalogFrame
|
|
3872
|
+
|
|
3873
|
+
**Import:** `import { CatalogFrame } from "@reopt-ai/opt-ui"`
|
|
3874
|
+
|
|
3875
|
+
**CatalogFrame:**
|
|
3876
|
+
|
|
3877
|
+
| Prop | Type | Required | Default | Description |
|
|
3878
|
+
| ---------------------- | ------------------------------ | -------- | ------- | ----------------------------------------------------------------- |
|
|
3879
|
+
| `children` | `ReactNode` | Yes | | 테이블. 빈/에러 상태에서는 대체됨 |
|
|
3880
|
+
| `isEmpty` | `boolean` | Yes | | 테이블이 0행인지 |
|
|
3881
|
+
| `query` | `Query` | Yes | | 필터 상태 |
|
|
3882
|
+
| `onQueryChange` | `(query: Query) => void` | Yes | | Query 변경 |
|
|
3883
|
+
| `filters` | `QueryFilterDef[]` | | | 필터 정의 |
|
|
3884
|
+
| `stats` | `StatCardType[]` | | | 통계 카드 |
|
|
3885
|
+
| `onStatClick` | `(stat: StatCardType) => void` | | | 카드 클릭 = 필터 |
|
|
3886
|
+
| `notice` | `ReactNode` | | | 목록 위 고지 |
|
|
3887
|
+
| `emptyActions` | `ReactNode` | | | 필터 없는 빈 상태의 다음 행동 (필터된 빈 상태는 필터 지우기 유지) |
|
|
3888
|
+
| `header` | `ReactNode` | | | 헤더 슬롯 |
|
|
3889
|
+
| `actions` | `ReactNode` | | | 액션 슬롯 |
|
|
3890
|
+
| `toolbar` | `ReactNode` | | | 통계와 필터 사이 컨트롤 (스코프 세그먼트 등) |
|
|
3891
|
+
| `inspector` | `ReactNode` | | | 인스펙터 내용 |
|
|
3892
|
+
| `inspectorOpen` | `boolean` | Yes | | 인스펙터 열림 |
|
|
3893
|
+
| `onInspectorClose` | `() => void` | Yes | | 인스펙터 닫기 |
|
|
3894
|
+
| `inspectorTitle` | `ReactNode` | | | 인스펙터 제목 |
|
|
3895
|
+
| `inspectorDescription` | `ReactNode` | | | 인스펙터 설명 |
|
|
3896
|
+
| `inspectorActions` | `ReactNode` | | | 인스펙터 헤더 컨트롤 |
|
|
3897
|
+
| `inspectorFooter` | `ReactNode` | | | 인스펙터 하단 |
|
|
3898
|
+
| `inspectorWidth` | `"sm" \| "md" \| "lg"` | | | push 레이아웃 폭 |
|
|
3899
|
+
| `page` | `number` | | 1 | 현재 페이지 |
|
|
3900
|
+
| `pageSize` | `number` | | 50 | 페이지 크기 |
|
|
3901
|
+
| `totalCount` | `number` | | | 필터 반영 총 개수 |
|
|
3902
|
+
| `onPageChange` | `(page: number) => void` | | | 페이지 변경 |
|
|
3903
|
+
| `selectedKeys` | `string[]` | | | 선택된 행 |
|
|
3904
|
+
| `onSelectionChange` | `(keys: string[]) => void` | | | 선택 변경. 필터·페이지가 바뀌면 프레임이 비웁니다 |
|
|
3905
|
+
| `bulkActions` | `FloatingAction[]` | | | 일괄 작업 |
|
|
3906
|
+
| `onBulkAction` | `(actionId: string) => void` | | | 일괄 작업 실행 |
|
|
3907
|
+
| `error` | `ReactNode` | | | 읽기 실패. 빈 목록과 다른 답 |
|
|
3908
|
+
| `onRetry` | `() => void` | | | 재시도 |
|
|
3909
|
+
| `labels` | `CatalogFrameLabels` | | | 빈/필터된 빈/에러 문구 |
|
|
3910
|
+
| `className` | `string` | | | 추가 CSS 클래스 |
|
|
3911
|
+
|
|
3912
|
+
**CatalogRowActions:**
|
|
3913
|
+
|
|
3914
|
+
| Prop | Type | Required | Default | Description |
|
|
3915
|
+
| -------------- | ------------------------- | -------- | ------- | ------------------------------------------------------- |
|
|
3916
|
+
| `item` | `T` | Yes | | 이 행의 항목 |
|
|
3917
|
+
| `actions` | `CatalogRowAction<T>[]` | Yes | | 행 액션 |
|
|
3918
|
+
| `visibleCount` | `number` | | 2 | 오버플로 전에 노출할 개수. available 필터링 후에 적용됨 |
|
|
3919
|
+
| `labels` | `CatalogRowActionsLabels` | | | 그룹·오버플로 라벨 |
|
|
3920
|
+
|
|
3921
|
+
**CatalogRowAction:**
|
|
3922
|
+
|
|
3923
|
+
| Prop | Type | Required | Default | Description |
|
|
3924
|
+
| ----------- | ---------------------- | -------- | ------- | ----------------------------------------------- |
|
|
3925
|
+
| `id` | `string` | Yes | | 액션 키 |
|
|
3926
|
+
| `label` | `string` | Yes | | 액션 문구 |
|
|
3927
|
+
| `icon` | `ReactNode` | | | 선택적 액션 아이콘 |
|
|
3928
|
+
| `onSelect` | `(item: T) => void` | Yes | | 행과 함께 호출되는 액션 |
|
|
3929
|
+
| `available` | `(item: T) => boolean` | | | 이 행에 적용되지 않는 액션을 비활성화 대신 제거 |
|
|
3930
|
+
|
|
3931
|
+
**CatalogCellControls:**
|
|
3932
|
+
|
|
3933
|
+
| Prop | Type | Required | Default | Description |
|
|
3934
|
+
| ---------- | ----------- | -------- | ------- | ---------------------------------- |
|
|
3935
|
+
| `children` | `ReactNode` | Yes | | 행 클릭으로 새면 안 되는 셀 컨트롤 |
|
|
3936
|
+
|
|
3672
3937
|
### Surface Layer
|