@reopt-ai/opt-ui 1.12.5 → 1.14.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.
- package/CHANGELOG.md +236 -0
- package/COMPONENT_CATALOG.md +670 -123
- package/README.md +9 -7
- package/dist/core/index.cjs +13 -13
- 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 +260 -61
- package/dist/docs/02-components/02-visuals.md +1 -1
- package/dist/docs/02-components/03-shells.md +431 -63
- package/dist/docs/02-components/04-surfaces.md +1 -1
- package/dist/docs/02-components/index.md +4 -4
- package/dist/{field-sidebar-YaWHfLLW.d.ts → field-sidebar-CJ4HxP8D.d.cts} +824 -2
- package/dist/{field-sidebar-Ct8c9L4V.d.cts → field-sidebar-DnhpcT2A.d.ts} +824 -2
- package/dist/{field-sidebar-DwtrYSSt.cjs → field-sidebar-ePqFX6MN.cjs} +4339 -244
- package/dist/{field-sidebar-Ben7MQD4.js → field-sidebar-mSVCMAZp.js} +3976 -235
- package/dist/id-registry.cjs +80 -0
- package/dist/id-registry.js +80 -0
- package/dist/id-registry.json +170 -0
- package/dist/index.cjs +1096 -1476
- package/dist/index.d.cts +243 -92
- package/dist/index.d.ts +243 -92
- package/dist/index.js +1004 -1415
- package/dist/{key-pad-menu-BpQebDyw.cjs → key-pad-menu-BgtSL3xe.cjs} +60 -487
- package/dist/{key-pad-menu-CYYtS_Tl.js → key-pad-menu-CqFI6la9.js} +61 -422
- package/dist/{key-pad-menu-CwcY_Vps.d.cts → key-pad-menu-D6pYzaj-.d.cts} +14 -56
- package/dist/{key-pad-menu-WBJShCJn.d.ts → key-pad-menu-Yh7Fpb8m.d.ts} +14 -56
- package/dist/meta.cjs +1312 -12
- package/dist/meta.js +1312 -12
- package/dist/shells/index.cjs +20 -1
- package/dist/shells/index.d.cts +2 -2
- package/dist/shells/index.d.ts +2 -2
- package/dist/shells/index.js +2 -2
- package/dist/{text-truncate-CQyfUZvq.d.cts → text-truncate-Bbul-jMD.d.cts} +52 -30
- package/dist/{text-truncate-CQyfUZvq.d.ts → text-truncate-Bbul-jMD.d.ts} +52 -30
- package/dist/{text-truncate-Dlm7JwDf.js → text-truncate-Bd-0WkSP.js} +461 -97
- package/dist/{text-truncate-CqdiQuj8.cjs → text-truncate-BeYW6XZu.cjs} +523 -99
- package/dist/theme/server.cjs +2 -2
- package/dist/theme/server.d.cts +2 -2
- package/dist/theme/server.d.ts +2 -2
- package/dist/theme/server.js +2 -2
- package/package.json +6 -2
package/COMPONENT_CATALOG.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
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.14.0 -->
|
|
6
6
|
|
|
7
7
|
## Quick Stats
|
|
8
8
|
|
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
| --------- | ------- |
|
|
11
11
|
| Core | 74 |
|
|
12
12
|
| Visuals | 0 |
|
|
13
|
-
| Shells |
|
|
13
|
+
| Shells | 96 |
|
|
14
14
|
| Surfaces | 0 |
|
|
15
|
-
| **Total** | **
|
|
15
|
+
| **Total** | **170** |
|
|
16
16
|
|
|
17
17
|
## Component Selection Guide
|
|
18
18
|
|
|
@@ -211,7 +211,7 @@
|
|
|
211
211
|
| Component | Description | Key Exports |
|
|
212
212
|
| --------- | ----------- | ----------- |
|
|
213
213
|
|
|
214
|
-
## Shell Components (
|
|
214
|
+
## Shell Components (96)
|
|
215
215
|
|
|
216
216
|
### Navigation & Layout
|
|
217
217
|
|
|
@@ -235,19 +235,19 @@
|
|
|
235
235
|
|
|
236
236
|
### Data Display
|
|
237
237
|
|
|
238
|
-
| Component | Description
|
|
239
|
-
| ------------------- |
|
|
240
|
-
| DataTable | 제네릭 데이터 테이블. 제목은 opt-in이고 ariaLabel로 grid를 이름 붙이며, 동적 컬럼·안전 정렬·키보드 리사이즈·Composite 탐색을 지원합니다.
|
|
241
|
-
| InlineEditTable | 인라인 편집 테이블. 더블클릭으로 셀 편집, Enter 확정, Escape 취소.
|
|
242
|
-
| TreeTable | 계층형 트리 테이블. 재귀 행 렌더링 + 펼침/접기 셰브론.
|
|
243
|
-
| DomainTable | 도메인 테이블. Composite 기반 그리드로 키보드 탐색 지원.
|
|
244
|
-
| QueryResultsTable | 쿼리 결과 테이블.
|
|
245
|
-
| DashboardGrid | Composite 기반 통계 카드 그리드. 유효한 1–4열 레이아웃과 화살표 키 2D 탐색을 지원합니다.
|
|
246
|
-
| SummaryRow | 통계 요약 행. StatCard 그리드 레이아웃을 표준화합니다. loading 시 SkeletonCard 표시.
|
|
247
|
-
| CodeSnippetViewer | 코드 스니펫 뷰어. 줄 번호, 복사 버튼, 포커스 가능한 스크롤 영역, syntaxTheme 톤을 지원합니다.
|
|
248
|
-
| CodeDiffViewer | 코드 비교 뷰어. LCS 알고리즘 기반 unified/split 모드 diff와 포커스 가능한 스크롤 영역을 제공합니다.
|
|
249
|
-
| ConnectionIndicator | 연결 상태 표시기. connected, connecting, disconnected, error 상태를 지원합니다.
|
|
250
|
-
| 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 | 쿼리 결과 테이블. 타입이 표시되는 헤더, 로컬 정렬, 컬럼 리사이즈, 행 상세 패널을 갖추고 행을 윈도잉해 만 행도 스크롤로 다룹니다. NULL·불리언·객체를 빈칸 대신 글자로 씁니다. | `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` |
|
|
251
251
|
|
|
252
252
|
### Lists & Feeds
|
|
253
253
|
|
|
@@ -343,26 +343,36 @@
|
|
|
343
343
|
|
|
344
344
|
### Other
|
|
345
345
|
|
|
346
|
-
| Component
|
|
347
|
-
|
|
|
348
|
-
| PageAside
|
|
349
|
-
| FailureList
|
|
350
|
-
| KeyValueEditor
|
|
351
|
-
|
|
|
352
|
-
|
|
|
353
|
-
|
|
|
354
|
-
|
|
|
355
|
-
|
|
|
356
|
-
|
|
|
357
|
-
|
|
|
358
|
-
|
|
|
359
|
-
|
|
|
360
|
-
|
|
|
361
|
-
|
|
|
362
|
-
|
|
|
363
|
-
|
|
|
364
|
-
|
|
|
365
|
-
|
|
|
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
|
+
| CriteriaBuilder | 도메인 무관 2단계 조건 트리 편집기. 그룹 AND/OR, 순서·복제·부정·오류를 셸이 맡고 조건 문장은 소비자가 Expression 칩으로 렌더링합니다. | `CriteriaBuilder`, `criteriaBuilderMove`, `criteriaBuilderDuplicate`, `criteriaBuilderRemove`, `criteriaBuilderInsert`, `criteriaBuilderRemoveGroup`, `criteriaBuilderDuplicateGroup`, `criteriaGroupLetter` |
|
|
352
|
+
| EventTimeline | 이벤트를 순서로 읽히게 하는 타임라인. 인접 이벤트 사이의 경과 시간을 라벨링하고, 속성 페이로드를 제자리에서 펼치며, 세션 단위 그룹핑을 지원한다. | `EventTimeline` |
|
|
353
|
+
| ScoreBreakdown | 합성 점수를 축별로 분해해 보여준다. 총점과 함께 각 축의 값·가중치·의미를 노출해 '43'을 판정이 아니라 발견으로 만든다. | `ScoreBreakdown` |
|
|
354
|
+
| Flyout | 목록을 화면에 둔 채 레코드를 옆에서 보여주는 상세 패널. 모달이 아니다 — 포커스 트랩·aria-modal·inert 없이 Escape로 닫고 포커스를 되돌린다. | `Flyout` |
|
|
355
|
+
| AuditTimeline | 변경 이력 타임라인. 액션별 색상 코딩 + 확장 가능한 diff 뷰. | `AuditTimeline` |
|
|
356
|
+
| ChatSidebar | AI 채팅 사이드바. 대화 목록, 검색, 새 대화 버튼. | `ChatSidebar` |
|
|
357
|
+
| ChatInput | 채팅 입력 컴포넌트. 자동 리사이즈 textarea, 파일 첨부, 모델/스타일 Select. | `ChatInput` |
|
|
358
|
+
| ChatMessageList | 채팅 메시지 목록. 역할별 말풍선, 타이핑 인디케이터, 자동 스크롤. | `ChatMessageList` |
|
|
359
|
+
| TimeRangeControl | date math(now-7d, now/d) 기반 시간 범위 컨트롤. quick select, 프리셋/최근 사용, 명시적 Update, 자동 갱신, 창 이동·확대/축소 버튼을 제공합니다. | `TimeRangeControl`, `DEFAULT_TIME_PRESETS` |
|
|
360
|
+
| TimeSeriesPanel | 시간 범위 컨트롤과 시계열 차트를 한 단위로 묶은 패널. 드래그 줌과 줌 히스토리(되돌리기), 범례 토글을 포함합니다. | `TimeSeriesPanel` |
|
|
361
|
+
| LogTable | 계속 도착하는 로그용 윈도잉 테이블. 컬럼 정의 기반, 상단 삽입 시 스크롤 위치 보존, follow 상태 보고, 셀 값 즉시 필터, 밀도·정렬을 지원합니다. | `LogTable` |
|
|
362
|
+
| QueryBar | 검색과 필터를 한 입력으로 합친 쿼리 바. field:value, -부정, (a or b), 비교 연산, 필드·값 자동완성, 절(clause) 칩을 지원합니다. | `QueryBar` |
|
|
363
|
+
| FieldSidebar | 데이터에 어떤 필드가 있고 각 필드가 무슨 값을 갖는지 보여주는 사이드바. 값 분포 막대, 컬럼으로 승격, 값 기준 포함/제외 필터를 제공합니다. | `FieldSidebar` |
|
|
364
|
+
| InspectorLayout | 목록과 인스펙터의 2-pane 레이아웃. 넓으면 밀어내고(push) 좁으면 덮으며(overlay), 닫을 때 포커스를 열었던 자리로 되돌립니다. | `InspectorLayout` |
|
|
365
|
+
| QueryFilterBar | QueryBar와 필터 버튼이 하나의 Query를 공유합니다. 버튼은 상태를 갖지 않고 Query를 읽어 활성 여부를 계산합니다. | `QueryFilterBar`, `hasActiveQuery` |
|
|
366
|
+
| CatalogFrame | 카탈로그 목록의 공통 뼈대. 헤더·통계·고지·필터·인스펙터·페이지네이션·일괄 작업과 빈/에러 상태를 담고, 필터나 페이지가 바뀌면 선택을 비웁니다. | `CatalogFrame`, `CatalogRowActions`, `CatalogCellControls` |
|
|
367
|
+
| SchemaTree | 쿼리할 수 있는 테이블과 컬럼을 타입 글리프와 함께 보여주는 트리. 테이블·컬럼을 함께 검색하고, 이름을 커서에 삽입하거나 테이블을 미리보기합니다. | `SchemaTree` |
|
|
368
|
+
| QueryToolbar | 실행 버튼 하나가 상태를 말하는 쿼리 툴바. 변경됨/현재/실행 중을 색과 문구로 구분하고, 실행 중이면 취소로 바뀌며, 선택 영역·전체 실행은 분할 버튼 뒤에 둡니다. | `QueryToolbar` |
|
|
369
|
+
| QueryOutputPane | 쿼리 결과가 놓이는 출력 패널. 대기·실행 중·오류·취소·완료 상태를 그리고, 완료는 표·차트·좌우 분할로 전환하며, 상태바에 행 수·경과·읽은 바이트·절단 여부를 남깁니다. | `QueryOutputPane` |
|
|
370
|
+
| QueryResultChart | 결과 행을 차트로 그리는 빌더. 첫 문자·날짜 컬럼을 축으로, 숫자 컬럼을 값으로 고르고, 한 행 한 숫자면 큰 숫자로 보여줍니다. 설정은 호출자가 들고 있어 저장 쿼리와 함께 보관됩니다. | `QueryResultChart` |
|
|
371
|
+
| QueryFiltersMenu | 기간과 속성 조건을 데이터로 들고 {filters} 플레이스홀더로 SQL에 전달하는 메뉴. 플레이스홀더가 없으면 조건이 적용되지 않는다고 경고하고 삽입 버튼을 제공합니다. | `QueryFiltersMenu` |
|
|
372
|
+
| QueryVariablesMenu | 실행마다 바뀌는 값을 이름 붙여 두는 변수 메뉴. SQL은 {variables.name}으로 참조하고 치환은 호출자가 합니다. | `QueryVariablesMenu` |
|
|
373
|
+
| QueryHistoryList | 실행 이력 목록. 각 실행의 성공/실패, 시각, 행 수, 경과를 보여주고 편집기로 되돌리거나 다시 실행합니다. | `QueryHistoryList` |
|
|
374
|
+
| SaveQueryDialog | 쿼리에 이름·설명·공개 여부를 붙여 저장하는 다이얼로그. 편집기에 문장이 여럿이면 어느 문장을 저장할지 넘겨 보며 고릅니다. | `SaveQueryDialog` |
|
|
375
|
+
| QueryWorkspace | 스키마·편집기·출력의 3-pane 쿼리 워크스페이스. 패널은 리사이즈되고 사이드바는 접히며, storageKey로 레이아웃을 기억합니다. 툴바·편집기·출력은 슬롯입니다. | `QueryWorkspace` |
|
|
366
376
|
|
|
367
377
|
## Surface Components (0)
|
|
368
378
|
|
|
@@ -727,11 +737,11 @@
|
|
|
727
737
|
|
|
728
738
|
**DisclosureRoot:**
|
|
729
739
|
|
|
730
|
-
| Prop | Type | Required | Default | Description
|
|
731
|
-
| ------------- | ------------------------- | -------- | ------- |
|
|
732
|
-
| `open` | `boolean` | | | 제어 모드: 열림 상태
|
|
733
|
-
| `setOpen` | `(open: boolean) => void` | | | 제어 모드: 상태 변경 핸들러 |
|
|
734
|
-
| `defaultOpen` | `boolean` | | false | 비제어 모드: 초기 열림 상태
|
|
740
|
+
| Prop | Type | Required | Default | Description |
|
|
741
|
+
| ------------- | ------------------------- | -------- | ------- | --------------------------------------------------------------------------------------- |
|
|
742
|
+
| `open` | `boolean` | | | 제어 모드: 열림 상태 |
|
|
743
|
+
| `setOpen` | `(open: boolean) => void` | | | 제어 모드: 상태 변경 핸들러 **⚠️ deprecated since 1.13.0 — use `onOpenChange` instead** |
|
|
744
|
+
| `defaultOpen` | `boolean` | | false | 비제어 모드: 초기 열림 상태 |
|
|
735
745
|
|
|
736
746
|
**DisclosureTrigger:**
|
|
737
747
|
|
|
@@ -759,12 +769,12 @@
|
|
|
759
769
|
|
|
760
770
|
**TabsRoot:**
|
|
761
771
|
|
|
762
|
-
| Prop | Type | Required | Default | Description
|
|
763
|
-
| ------------------- | ------------------------------ | -------- | ------- |
|
|
764
|
-
| `variant` | `"underline" \| "workspace"` | | | 탭 프레임 형태. workspace는 편집기 탭(문서/쿼리처럼 열고 닫히며 상태를 갖는 작업 단위)
|
|
765
|
-
| `defaultSelectedId` | `string` | | | 초기 선택된 탭 ID
|
|
766
|
-
| `selectedId` | `string \| null` | | | 제어 모드: 선택된 탭 ID
|
|
767
|
-
| `setSelectedId` | `(id: string \| null) => void` | | | 제어 모드: 탭 변경 핸들러
|
|
772
|
+
| Prop | Type | Required | Default | Description |
|
|
773
|
+
| ------------------- | ------------------------------ | -------- | ------- | ------------------------------------------------------------------------------------------- |
|
|
774
|
+
| `variant` | `"underline" \| "workspace"` | | | 탭 프레임 형태. workspace는 편집기 탭(문서/쿼리처럼 열고 닫히며 상태를 갖는 작업 단위) |
|
|
775
|
+
| `defaultSelectedId` | `string` | | | 초기 선택된 탭 ID |
|
|
776
|
+
| `selectedId` | `string \| null` | | | 제어 모드: 선택된 탭 ID |
|
|
777
|
+
| `setSelectedId` | `(id: string \| null) => void` | | | 제어 모드: 탭 변경 핸들러 **⚠️ deprecated since 1.13.0 — use `onSelectedIdChange` instead** |
|
|
768
778
|
|
|
769
779
|
**TabList:**
|
|
770
780
|
|
|
@@ -801,6 +811,27 @@
|
|
|
801
811
|
| `Home` | 첫 번째 탭으로 이동 |
|
|
802
812
|
| `End` | 마지막 탭으로 이동 |
|
|
803
813
|
|
|
814
|
+
**Examples:**
|
|
815
|
+
|
|
816
|
+
_이름 있는 두 패널:_
|
|
817
|
+
|
|
818
|
+
```tsx
|
|
819
|
+
import { TabsRoot, TabList, Tab, TabPanel } from "@reopt-ai/opt-ui";
|
|
820
|
+
|
|
821
|
+
export function Example() {
|
|
822
|
+
return (
|
|
823
|
+
<TabsRoot defaultSelectedId="overview">
|
|
824
|
+
<TabList aria-label="프로젝트 정보">
|
|
825
|
+
<Tab id="overview">개요</Tab>
|
|
826
|
+
<Tab id="activity">활동</Tab>
|
|
827
|
+
</TabList>
|
|
828
|
+
<TabPanel tabId="overview">프로젝트 요약</TabPanel>
|
|
829
|
+
<TabPanel tabId="activity">최근 활동</TabPanel>
|
|
830
|
+
</TabsRoot>
|
|
831
|
+
);
|
|
832
|
+
}
|
|
833
|
+
```
|
|
834
|
+
|
|
804
835
|
#### Select
|
|
805
836
|
|
|
806
837
|
**Import:** `import { SelectRoot } from "@reopt-ai/opt-ui"`
|
|
@@ -830,12 +861,12 @@
|
|
|
830
861
|
|
|
831
862
|
**SelectPopover:**
|
|
832
863
|
|
|
833
|
-
| Prop | Type | Required | Default | Description
|
|
834
|
-
| ----------- | ----------- | -------- | ------- |
|
|
835
|
-
| `children` | `ReactNode` | Yes | | SelectItem 목록
|
|
836
|
-
| `sameWidth` | `boolean` | | true | 트리거와 같은 너비
|
|
837
|
-
| `gutter` | `number` | | 4 | 트리거와의 간격 (px)
|
|
838
|
-
| `className` | `string` | | | 기본 스타일 오버라이드
|
|
864
|
+
| Prop | Type | Required | Default | Description |
|
|
865
|
+
| ----------- | ----------- | -------- | ------- | ------------------------------------------------------------------------------ |
|
|
866
|
+
| `children` | `ReactNode` | Yes | | SelectItem 목록 |
|
|
867
|
+
| `sameWidth` | `boolean` | | true | 트리거와 같은 너비 |
|
|
868
|
+
| `gutter` | `number` | | 4 | 트리거와의 간격 (px) **⚠️ deprecated since 1.13.0 — use `sideOffset` instead** |
|
|
869
|
+
| `className` | `string` | | | 기본 스타일 오버라이드 |
|
|
839
870
|
|
|
840
871
|
**SelectItem:**
|
|
841
872
|
|
|
@@ -884,10 +915,10 @@ import {
|
|
|
884
915
|
|
|
885
916
|
**DialogRoot:**
|
|
886
917
|
|
|
887
|
-
| Prop | Type | Required | Default | Description
|
|
888
|
-
| --------- | ------------------------- | -------- | ------- |
|
|
889
|
-
| `open` | `boolean` | | | 제어 모드: 열림 상태
|
|
890
|
-
| `setOpen` | `(open: boolean) => void` | | | 제어 모드: 상태 변경 핸들러 |
|
|
918
|
+
| Prop | Type | Required | Default | Description |
|
|
919
|
+
| --------- | ------------------------- | -------- | ------- | --------------------------------------------------------------------------------------- |
|
|
920
|
+
| `open` | `boolean` | | | 제어 모드: 열림 상태 |
|
|
921
|
+
| `setOpen` | `(open: boolean) => void` | | | 제어 모드: 상태 변경 핸들러 **⚠️ deprecated since 1.13.0 — use `onOpenChange` instead** |
|
|
891
922
|
|
|
892
923
|
**DialogDisclosure:**
|
|
893
924
|
|
|
@@ -977,10 +1008,10 @@ import {
|
|
|
977
1008
|
|
|
978
1009
|
**ComboboxRoot:**
|
|
979
1010
|
|
|
980
|
-
| Prop | Type | Required | Default | Description
|
|
981
|
-
| ------------------ | ------------------------- | -------- | ------- |
|
|
982
|
-
| `setValue` | `(value: string) => void` | | | 입력값 변경 핸들러
|
|
983
|
-
| `resetValueOnHide` | `boolean` | | false | 팝오버 닫힐 때 입력값 리셋
|
|
1011
|
+
| Prop | Type | Required | Default | Description |
|
|
1012
|
+
| ------------------ | ------------------------- | -------- | ------- | ------------------------------------------------------------------------------- |
|
|
1013
|
+
| `setValue` | `(value: string) => void` | | | 입력값 변경 핸들러 **⚠️ deprecated since 1.13.0 — use `onValueChange` instead** |
|
|
1014
|
+
| `resetValueOnHide` | `boolean` | | false | 팝오버 닫힐 때 입력값 리셋 |
|
|
984
1015
|
|
|
985
1016
|
**ComboboxInput:**
|
|
986
1017
|
|
|
@@ -992,12 +1023,12 @@ import {
|
|
|
992
1023
|
|
|
993
1024
|
**ComboboxPopover:**
|
|
994
1025
|
|
|
995
|
-
| Prop | Type | Required | Default | Description
|
|
996
|
-
| ----------- | ----------- | -------- | ------- |
|
|
997
|
-
| `children` | `ReactNode` | Yes | | ComboboxItem/Group 목록
|
|
998
|
-
| `sameWidth` | `boolean` | | true | 입력과 같은 너비
|
|
999
|
-
| `gutter` | `number` | | 4 | 입력과의 간격 (px)
|
|
1000
|
-
| `className` | `string` | | | 기본 스타일 오버라이드
|
|
1026
|
+
| Prop | Type | Required | Default | Description |
|
|
1027
|
+
| ----------- | ----------- | -------- | ------- | ---------------------------------------------------------------------------- |
|
|
1028
|
+
| `children` | `ReactNode` | Yes | | ComboboxItem/Group 목록 |
|
|
1029
|
+
| `sameWidth` | `boolean` | | true | 입력과 같은 너비 |
|
|
1030
|
+
| `gutter` | `number` | | 4 | 입력과의 간격 (px) **⚠️ deprecated since 1.13.0 — use `sideOffset` instead** |
|
|
1031
|
+
| `className` | `string` | | | 기본 스타일 오버라이드 |
|
|
1001
1032
|
|
|
1002
1033
|
**ComboboxItem:**
|
|
1003
1034
|
|
|
@@ -1071,11 +1102,11 @@ import {
|
|
|
1071
1102
|
|
|
1072
1103
|
**MenuPopover:**
|
|
1073
1104
|
|
|
1074
|
-
| Prop | Type | Required | Default | Description
|
|
1075
|
-
| ----------- | ----------- | -------- | ------- |
|
|
1076
|
-
| `children` | `ReactNode` | Yes | | MenuItem 목록
|
|
1077
|
-
| `gutter` | `number` | | 8 | 트리거와의 간격 (px)
|
|
1078
|
-
| `className` | `string` | | | 기본 스타일 오버라이드
|
|
1105
|
+
| Prop | Type | Required | Default | Description |
|
|
1106
|
+
| ----------- | ----------- | -------- | ------- | ------------------------------------------------------------------------------ |
|
|
1107
|
+
| `children` | `ReactNode` | Yes | | MenuItem 목록 |
|
|
1108
|
+
| `gutter` | `number` | | 8 | 트리거와의 간격 (px) **⚠️ deprecated since 1.13.0 — use `sideOffset` instead** |
|
|
1109
|
+
| `className` | `string` | | | 기본 스타일 오버라이드 |
|
|
1079
1110
|
|
|
1080
1111
|
**MenuItem:**
|
|
1081
1112
|
|
|
@@ -1223,11 +1254,11 @@ import {
|
|
|
1223
1254
|
|
|
1224
1255
|
**FormSelectPopover:**
|
|
1225
1256
|
|
|
1226
|
-
| Prop | Type | Required | Default | Description
|
|
1227
|
-
| ----------- | ----------- | -------- | ------- |
|
|
1228
|
-
| `children` | `ReactNode` | Yes | | FormSelectItem 목록
|
|
1229
|
-
| `sameWidth` | `boolean` | | true | 트리거와 같은 너비
|
|
1230
|
-
| `gutter` | `number` | | 4 | 트리거와의 간격 (px) |
|
|
1257
|
+
| Prop | Type | Required | Default | Description |
|
|
1258
|
+
| ----------- | ----------- | -------- | ------- | ------------------------------------------------------------------------------ |
|
|
1259
|
+
| `children` | `ReactNode` | Yes | | FormSelectItem 목록 |
|
|
1260
|
+
| `sameWidth` | `boolean` | | true | 트리거와 같은 너비 |
|
|
1261
|
+
| `gutter` | `number` | | 4 | 트리거와의 간격 (px) **⚠️ deprecated since 1.13.0 — use `sideOffset` instead** |
|
|
1231
1262
|
|
|
1232
1263
|
**FormSelectItem:**
|
|
1233
1264
|
|
|
@@ -1485,6 +1516,21 @@ import { Button } from "@reopt-ai/opt-ui";
|
|
|
1485
1516
|
| `progress` | `number` | | | 원형 프로그레스 값 (0-100). 설정 시 dot 무시 |
|
|
1486
1517
|
| `progressSize` | `number` | | 16 | 프로그레스 링 SVG 크기 (px) |
|
|
1487
1518
|
|
|
1519
|
+
**Examples:**
|
|
1520
|
+
|
|
1521
|
+
_텍스트가 있는 상태:_
|
|
1522
|
+
|
|
1523
|
+
```tsx
|
|
1524
|
+
import { Badge } from "@reopt-ai/opt-ui";
|
|
1525
|
+
export function Example() {
|
|
1526
|
+
return (
|
|
1527
|
+
<Badge variant="success" dot>
|
|
1528
|
+
동기화 완료
|
|
1529
|
+
</Badge>
|
|
1530
|
+
);
|
|
1531
|
+
}
|
|
1532
|
+
```
|
|
1533
|
+
|
|
1488
1534
|
#### Spinner
|
|
1489
1535
|
|
|
1490
1536
|
**Import:** `import { Spinner } from "@reopt-ai/opt-ui"`
|
|
@@ -1493,6 +1539,17 @@ import { Button } from "@reopt-ai/opt-ui";
|
|
|
1493
1539
|
| ------ | ---------------------- | -------- | ------- | ----------- |
|
|
1494
1540
|
| `size` | `"sm" \| "md" \| "lg"` | | "md" | 스피너 크기 |
|
|
1495
1541
|
|
|
1542
|
+
**Examples:**
|
|
1543
|
+
|
|
1544
|
+
_이름 있는 로딩 표시:_
|
|
1545
|
+
|
|
1546
|
+
```tsx
|
|
1547
|
+
import { Spinner } from "@reopt-ai/opt-ui";
|
|
1548
|
+
export function Example() {
|
|
1549
|
+
return <Spinner size="sm" aria-label="검색 결과 불러오는 중" />;
|
|
1550
|
+
}
|
|
1551
|
+
```
|
|
1552
|
+
|
|
1496
1553
|
#### Alert
|
|
1497
1554
|
|
|
1498
1555
|
**Import:** `import { Alert } from "@reopt-ai/opt-ui"`
|
|
@@ -1505,6 +1562,21 @@ import { Button } from "@reopt-ai/opt-ui";
|
|
|
1505
1562
|
| `dismissible` | `boolean` | | false | 닫기 버튼 표시 여부 |
|
|
1506
1563
|
| `onDismiss` | `() => void` | | | 닫기 버튼 클릭 핸들러 |
|
|
1507
1564
|
|
|
1565
|
+
**Examples:**
|
|
1566
|
+
|
|
1567
|
+
_재시도 가능한 오류 안내:_
|
|
1568
|
+
|
|
1569
|
+
```tsx
|
|
1570
|
+
import { Alert } from "@reopt-ai/opt-ui";
|
|
1571
|
+
export function Example() {
|
|
1572
|
+
return (
|
|
1573
|
+
<Alert variant="error" title="저장하지 못했습니다">
|
|
1574
|
+
연결 상태를 확인한 뒤 다시 저장하세요.
|
|
1575
|
+
</Alert>
|
|
1576
|
+
);
|
|
1577
|
+
}
|
|
1578
|
+
```
|
|
1579
|
+
|
|
1508
1580
|
#### Input
|
|
1509
1581
|
|
|
1510
1582
|
**Import:** `import { Input } from "@reopt-ai/opt-ui"`
|
|
@@ -1573,6 +1645,27 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
1573
1645
|
| `size` | `"sm" \| "md" \| "lg"` | | "md" | 스위치 크기 |
|
|
1574
1646
|
| `disabled` | `boolean` | | | 비활성화 상태 |
|
|
1575
1647
|
|
|
1648
|
+
**Examples:**
|
|
1649
|
+
|
|
1650
|
+
_제어되는 알림 설정:_
|
|
1651
|
+
|
|
1652
|
+
```tsx
|
|
1653
|
+
"use client";
|
|
1654
|
+
import { useState } from "react";
|
|
1655
|
+
import { Switch } from "@reopt-ai/opt-ui";
|
|
1656
|
+
export function Example() {
|
|
1657
|
+
const [enabled, setEnabled] = useState(false);
|
|
1658
|
+
return (
|
|
1659
|
+
<Switch
|
|
1660
|
+
label="이메일 알림"
|
|
1661
|
+
hint="새 댓글을 이메일로 받습니다"
|
|
1662
|
+
checked={enabled}
|
|
1663
|
+
onChange={setEnabled}
|
|
1664
|
+
/>
|
|
1665
|
+
);
|
|
1666
|
+
}
|
|
1667
|
+
```
|
|
1668
|
+
|
|
1576
1669
|
#### Skeleton
|
|
1577
1670
|
|
|
1578
1671
|
**Import:** `import { Skeleton } from "@reopt-ai/opt-ui"`
|
|
@@ -1606,6 +1699,21 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
1606
1699
|
| `rows` | `number` | | 5 | 테이블 행 수 |
|
|
1607
1700
|
| `columns` | `number` | | 4 | 테이블 열 수 |
|
|
1608
1701
|
|
|
1702
|
+
**Examples:**
|
|
1703
|
+
|
|
1704
|
+
_목록 로딩 자리 확보:_
|
|
1705
|
+
|
|
1706
|
+
```tsx
|
|
1707
|
+
import { SkeletonTable } from "@reopt-ai/opt-ui";
|
|
1708
|
+
export function Example() {
|
|
1709
|
+
return (
|
|
1710
|
+
<section aria-label="목록 불러오는 중" aria-busy="true">
|
|
1711
|
+
<SkeletonTable rows={3} columns={4} />
|
|
1712
|
+
</section>
|
|
1713
|
+
);
|
|
1714
|
+
}
|
|
1715
|
+
```
|
|
1716
|
+
|
|
1609
1717
|
#### Textarea
|
|
1610
1718
|
|
|
1611
1719
|
**Import:** `import { Textarea } from "@reopt-ai/opt-ui"`
|
|
@@ -1619,6 +1727,25 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
1619
1727
|
| `resize` | `"none" \| "vertical" \| "horizontal" \| "both"` | | "vertical" | 크기 조절 방향 |
|
|
1620
1728
|
| `rows` | `number` | | 4 | 표시 줄 수 |
|
|
1621
1729
|
|
|
1730
|
+
**Examples:**
|
|
1731
|
+
|
|
1732
|
+
_설명 입력:_
|
|
1733
|
+
|
|
1734
|
+
```tsx
|
|
1735
|
+
import { Textarea } from "@reopt-ai/opt-ui";
|
|
1736
|
+
export function Example() {
|
|
1737
|
+
return (
|
|
1738
|
+
<Textarea
|
|
1739
|
+
label="변경 이유"
|
|
1740
|
+
name="reason"
|
|
1741
|
+
hint="검토자가 알아야 할 내용을 적어주세요"
|
|
1742
|
+
rows={4}
|
|
1743
|
+
resize="vertical"
|
|
1744
|
+
/>
|
|
1745
|
+
);
|
|
1746
|
+
}
|
|
1747
|
+
```
|
|
1748
|
+
|
|
1622
1749
|
#### Avatar
|
|
1623
1750
|
|
|
1624
1751
|
**Import:** `import { Avatar } from "@reopt-ai/opt-ui"`
|
|
@@ -1642,6 +1769,22 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
1642
1769
|
| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | | "md" | 아바타 크기 |
|
|
1643
1770
|
| `children` | `ReactNode` | Yes | | Avatar 요소들 |
|
|
1644
1771
|
|
|
1772
|
+
**Examples:**
|
|
1773
|
+
|
|
1774
|
+
_이미지 없이 사용자 표시:_
|
|
1775
|
+
|
|
1776
|
+
```tsx
|
|
1777
|
+
import { Avatar, AvatarGroup } from "@reopt-ai/opt-ui";
|
|
1778
|
+
export function Example() {
|
|
1779
|
+
return (
|
|
1780
|
+
<AvatarGroup max={3}>
|
|
1781
|
+
<Avatar name="김민수" />
|
|
1782
|
+
<Avatar name="이지수" />
|
|
1783
|
+
</AvatarGroup>
|
|
1784
|
+
);
|
|
1785
|
+
}
|
|
1786
|
+
```
|
|
1787
|
+
|
|
1645
1788
|
#### Progress
|
|
1646
1789
|
|
|
1647
1790
|
**Import:** `import { Progress } from "@reopt-ai/opt-ui"`
|
|
@@ -1672,6 +1815,17 @@ const store = useFormStore({ defaultValues: { name: "" } });
|
|
|
1672
1815
|
| `label` | `string` | | | 접근성 레이블 |
|
|
1673
1816
|
| `indeterminate` | `boolean` | | false | 값을 알 수 없는 진행 상태 |
|
|
1674
1817
|
|
|
1818
|
+
**Examples:**
|
|
1819
|
+
|
|
1820
|
+
_업로드 진행률:_
|
|
1821
|
+
|
|
1822
|
+
```tsx
|
|
1823
|
+
import { Progress } from "@reopt-ai/opt-ui";
|
|
1824
|
+
export function Example() {
|
|
1825
|
+
return <Progress value={35} max={100} aria-label="파일 업로드" />;
|
|
1826
|
+
}
|
|
1827
|
+
```
|
|
1828
|
+
|
|
1675
1829
|
#### Meter
|
|
1676
1830
|
|
|
1677
1831
|
**Import:** `import { Meter } from "@reopt-ai/opt-ui"`
|
|
@@ -1834,6 +1988,22 @@ import {
|
|
|
1834
1988
|
| `orientation` | `"horizontal" \| "vertical"` | | "vertical" | 레이아웃 방향 |
|
|
1835
1989
|
| `label` | `string` | | | 그룹 레이블 |
|
|
1836
1990
|
|
|
1991
|
+
**Examples:**
|
|
1992
|
+
|
|
1993
|
+
_복수 선택 그룹:_
|
|
1994
|
+
|
|
1995
|
+
```tsx
|
|
1996
|
+
import { Checkbox, CheckboxGroup } from "@reopt-ai/opt-ui";
|
|
1997
|
+
export function Example() {
|
|
1998
|
+
return (
|
|
1999
|
+
<CheckboxGroup label="알림 채널" defaultValue={["email"]}>
|
|
2000
|
+
<Checkbox value="email" label="이메일" />
|
|
2001
|
+
<Checkbox value="push" label="푸시" />
|
|
2002
|
+
</CheckboxGroup>
|
|
2003
|
+
);
|
|
2004
|
+
}
|
|
2005
|
+
```
|
|
2006
|
+
|
|
1837
2007
|
#### RadioGroup
|
|
1838
2008
|
|
|
1839
2009
|
**Import:** `import { RadioGroup } from "@reopt-ai/opt-ui"`
|
|
@@ -1953,27 +2123,27 @@ import {
|
|
|
1953
2123
|
|
|
1954
2124
|
**Import:** `import { ConditionBuilder } from "@reopt-ai/opt-ui"`
|
|
1955
2125
|
|
|
1956
|
-
| Prop | Type | Required | Default | Description
|
|
1957
|
-
| --------------------- | --------------------------------------- | -------- | ------------------ |
|
|
1958
|
-
| `groups` | `ConditionGroup[]` | Yes | | 조건 그룹 배열
|
|
1959
|
-
| `onChange` | `(groups: ConditionGroup[]) => void` | Yes | | 그룹 변경 핸들러
|
|
1960
|
-
| `properties` | `string[]` | | | 선택 가능한 속성 목록 (기본 10개 제공)
|
|
1961
|
-
| `label` | `string` | | | 빌더 레이블
|
|
1962
|
-
| `nested` | `boolean` | | false | 중첩 AND/OR 그룹 활성화
|
|
1963
|
-
| `maxDepth` | `number` | | 3 | 최대 중첩 깊이
|
|
1964
|
-
| `conditionTypes` | `Record<string, ConditionTypeRenderer>` | | | 이질적 조건 타입 렌더러 레지스트리
|
|
1965
|
-
| `onPreview` | `(groups: ConditionGroup[]) => void` | | | 조건 변경 시 미리보기 콜백
|
|
1966
|
-
| `previewCount` | `number` | | | 매치 카운트 표시 (toLocaleString 포맷)
|
|
1967
|
-
| `
|
|
2126
|
+
| Prop | Type | Required | Default | Description |
|
|
2127
|
+
| --------------------- | --------------------------------------- | -------- | ------------------ | ------------------------------------------------------------------------------ |
|
|
2128
|
+
| `groups` | `ConditionGroup[]` | Yes | | 조건 그룹 배열 |
|
|
2129
|
+
| `onChange` | `(groups: ConditionGroup[]) => void` | Yes | | 그룹 변경 핸들러 |
|
|
2130
|
+
| `properties` | `string[]` | | | 선택 가능한 속성 목록 (기본 10개 제공) |
|
|
2131
|
+
| `label` | `string` | | | 빌더 레이블 |
|
|
2132
|
+
| `nested` | `boolean` | | false | 중첩 AND/OR 그룹 활성화 |
|
|
2133
|
+
| `maxDepth` | `number` | | 3 | 최대 중첩 깊이 |
|
|
2134
|
+
| `conditionTypes` | `Record<string, ConditionTypeRenderer>` | | | 이질적 조건 타입 렌더러 레지스트리 |
|
|
2135
|
+
| `onPreview` | `(groups: ConditionGroup[]) => void` | | | 조건 변경 시 미리보기 콜백 |
|
|
2136
|
+
| `previewCount` | `number` | | | 매치 카운트 표시 (toLocaleString 포맷) |
|
|
2137
|
+
| `labels` | `ConditionBuilderLabels` | | | 미리보기 문구 오버라이드 (previewSuffix, formatPreview). 기본은 영어 "matches" |
|
|
2138
|
+
| `addNestedGroupLabel` | `string` | | "Add nested group" | 중첩 그룹 추가 버튼 텍스트 |
|
|
1968
2139
|
|
|
1969
2140
|
#### Popover
|
|
1970
2141
|
|
|
1971
2142
|
**Import:** `import { PopoverRoot } from "@reopt-ai/opt-ui"`
|
|
1972
2143
|
|
|
1973
|
-
| Prop | Type | Required | Default | Description
|
|
1974
|
-
| ----------- | -------- | -------- | ------- |
|
|
1975
|
-
| `
|
|
1976
|
-
| `className` | `string` | | | 커스텀 CSS 클래스 |
|
|
2144
|
+
| Prop | Type | Required | Default | Description |
|
|
2145
|
+
| ----------- | -------- | -------- | ------- | ----------------- |
|
|
2146
|
+
| `className` | `string` | | | 커스텀 CSS 클래스 |
|
|
1977
2147
|
|
|
1978
2148
|
**Keyboard Shortcuts:**
|
|
1979
2149
|
|
|
@@ -1982,15 +2152,39 @@ import {
|
|
|
1982
2152
|
| `Esc` | 팝오버 닫기 |
|
|
1983
2153
|
| `Enter / Space` | 트리거 활성화 |
|
|
1984
2154
|
|
|
2155
|
+
**Examples:**
|
|
2156
|
+
|
|
2157
|
+
_보조 설명 열고 닫기:_
|
|
2158
|
+
|
|
2159
|
+
```tsx
|
|
2160
|
+
import {
|
|
2161
|
+
PopoverRoot,
|
|
2162
|
+
PopoverTrigger,
|
|
2163
|
+
PopoverContent,
|
|
2164
|
+
PopoverClose,
|
|
2165
|
+
} from "@reopt-ai/opt-ui";
|
|
2166
|
+
export function Example() {
|
|
2167
|
+
return (
|
|
2168
|
+
<PopoverRoot>
|
|
2169
|
+
<PopoverTrigger>공유 안내</PopoverTrigger>
|
|
2170
|
+
<PopoverContent>
|
|
2171
|
+
<p>초대받은 사용자만 문서를 볼 수 있습니다.</p>
|
|
2172
|
+
<PopoverClose>닫기</PopoverClose>
|
|
2173
|
+
</PopoverContent>
|
|
2174
|
+
</PopoverRoot>
|
|
2175
|
+
);
|
|
2176
|
+
}
|
|
2177
|
+
```
|
|
2178
|
+
|
|
1985
2179
|
#### DropdownMenu
|
|
1986
2180
|
|
|
1987
2181
|
**Import:** `import { DropdownMenu } from "@reopt-ai/opt-ui"`
|
|
1988
2182
|
|
|
1989
2183
|
**DropdownContent:**
|
|
1990
2184
|
|
|
1991
|
-
| Prop | Type | Required | Default | Description
|
|
1992
|
-
| -------- | -------- | -------- | ------- |
|
|
1993
|
-
| `gutter` | `number` | | 4 | 트리거와의 간격 (px) |
|
|
2185
|
+
| Prop | Type | Required | Default | Description |
|
|
2186
|
+
| -------- | -------- | -------- | ------- | ------------------------------------------------------------------------------ |
|
|
2187
|
+
| `gutter` | `number` | | 4 | 트리거와의 간격 (px) **⚠️ deprecated since 1.13.0 — use `sideOffset` instead** |
|
|
1994
2188
|
|
|
1995
2189
|
**DropdownItem:**
|
|
1996
2190
|
|
|
@@ -2279,6 +2473,21 @@ const MyDashboard = createBlock<MyDashboardProps>(
|
|
|
2279
2473
|
| `children` | `ReactNode` | Yes | | 감싸는 콘텐츠 |
|
|
2280
2474
|
| `label` | `string` | | "Loading…" | 로딩 텍스트 |
|
|
2281
2475
|
|
|
2476
|
+
**Examples:**
|
|
2477
|
+
|
|
2478
|
+
_기존 결과를 유지하는 갱신 표시:_
|
|
2479
|
+
|
|
2480
|
+
```tsx
|
|
2481
|
+
import { LoadingOverlay } from "@reopt-ai/opt-ui";
|
|
2482
|
+
export function Example() {
|
|
2483
|
+
return (
|
|
2484
|
+
<LoadingOverlay loading label="목록 새로고침 중">
|
|
2485
|
+
<p>이전 조회 결과</p>
|
|
2486
|
+
</LoadingOverlay>
|
|
2487
|
+
);
|
|
2488
|
+
}
|
|
2489
|
+
```
|
|
2490
|
+
|
|
2282
2491
|
#### StarRating
|
|
2283
2492
|
|
|
2284
2493
|
**Import:** `import { StarRating } from "@reopt-ai/opt-ui"`
|
|
@@ -2770,6 +2979,24 @@ import { DataTable } from "@reopt-ai/opt-ui";
|
|
|
2770
2979
|
| `toast` | `ToastMessage` | Yes | | 토스트 메시지 객체 |
|
|
2771
2980
|
| `onDismiss` | `() => void` | Yes | | 닫기 핸들러 |
|
|
2772
2981
|
|
|
2982
|
+
**Examples:**
|
|
2983
|
+
|
|
2984
|
+
_사용자 동작의 결과 알림:_
|
|
2985
|
+
|
|
2986
|
+
```tsx
|
|
2987
|
+
"use client";
|
|
2988
|
+
import { Button, ToastProvider, toast } from "@reopt-ai/opt-ui";
|
|
2989
|
+
export function Example() {
|
|
2990
|
+
return (
|
|
2991
|
+
<ToastProvider>
|
|
2992
|
+
<Button onClick={() => toast.success("알림 동작을 확인했습니다")}>
|
|
2993
|
+
알림 테스트
|
|
2994
|
+
</Button>
|
|
2995
|
+
</ToastProvider>
|
|
2996
|
+
);
|
|
2997
|
+
}
|
|
2998
|
+
```
|
|
2999
|
+
|
|
2773
3000
|
#### DesignGuidePanel
|
|
2774
3001
|
|
|
2775
3002
|
**Import:** `import { DesignGuidePanel } from "@reopt-ai/opt-ui"`
|
|
@@ -3093,38 +3320,48 @@ const filters = [
|
|
|
3093
3320
|
#### QueryResultsTable
|
|
3094
3321
|
|
|
3095
3322
|
**Import:** `import { QueryResultsTable } from "@reopt-ai/opt-ui"`
|
|
3096
|
-
|
|
3097
|
-
|
|
3098
|
-
|
|
|
3099
|
-
|
|
|
3100
|
-
| `
|
|
3101
|
-
| `
|
|
3102
|
-
| `
|
|
3103
|
-
| `
|
|
3323
|
+
**Dependencies:** field-token (core), flyout (shell), description-list (core)
|
|
3324
|
+
|
|
3325
|
+
| Prop | Type | Required | Default | Description |
|
|
3326
|
+
| -------------- | ----------------------------------------- | -------- | ------- | -------------------------------------------------- |
|
|
3327
|
+
| `columns` | `Array<string \| QueryResultColumn>` | Yes | | 컬럼 이름, 또는 타입을 포함한 컬럼 정의 |
|
|
3328
|
+
| `rows` | `Array<Record<string, unknown>>` | Yes | | 결과 행 |
|
|
3329
|
+
| `maxHeight` | `number \| "fill"` | | 400 | 스크롤 높이(px). fill이면 부모 높이를 채움 |
|
|
3330
|
+
| `loading` | `boolean` | | | polite 로딩 상태 |
|
|
3331
|
+
| `error` | `string` | | | assertive 오류 상태 |
|
|
3332
|
+
| `sortable` | `boolean` | | true | 헤더 클릭 정렬 |
|
|
3333
|
+
| `sort` | `QueryResultSort \| null` | | | 제어형 정렬 상태 |
|
|
3334
|
+
| `onSortChange` | `(sort: QueryResultSort \| null) => void` | | | 정렬 변경 |
|
|
3335
|
+
| `rowHeight` | `number` | | 32 | 행 높이(px). 윈도잉의 기준 |
|
|
3336
|
+
| `rowDetails` | `boolean` | | true | 행을 상세 패널로 열기 |
|
|
3337
|
+
| `footer` | `ReactNode` | | | 행 수 뒤에 붙는 푸터 내용 — 경과 시간, 읽은 바이트 |
|
|
3338
|
+
| `labels` | `QueryResultsTableLabels` | | | 로딩/빈 상태/행 수/정렬/상세 문구 |
|
|
3104
3339
|
|
|
3105
3340
|
#### SqlEditor
|
|
3106
3341
|
|
|
3107
3342
|
**Import:** `import { SqlEditor } from "@reopt-ai/opt-ui"`
|
|
3108
3343
|
**Dependencies:** button (core)
|
|
3109
3344
|
|
|
3110
|
-
| Prop | Type
|
|
3111
|
-
| ------------------- |
|
|
3112
|
-
| `value` | `string`
|
|
3113
|
-
| `onChange` | `(sql: string) => void`
|
|
3114
|
-
| `onRun` | `(sql: string) => void`
|
|
3115
|
-
| `onRunAndAdvance` | `(sql: string) => void`
|
|
3116
|
-
| `schema` | `SqlEditorSchema`
|
|
3117
|
-
| `completionSources` | `SqlEditorCompletionSource[]`
|
|
3118
|
-
| `keymap` | `SqlEditorKeyBinding[]`
|
|
3119
|
-
| `extensions` | `SqlEditorExtension[]`
|
|
3120
|
-
| `height` | `number \| "fill"`
|
|
3121
|
-
| `placeholder` | `string`
|
|
3122
|
-
| `readOnly` | `boolean`
|
|
3123
|
-
| `ariaLabel` | `string`
|
|
3124
|
-
| `autoFocus` | `boolean`
|
|
3125
|
-
| `showFooter` | `boolean`
|
|
3126
|
-
| `
|
|
3127
|
-
| `
|
|
3345
|
+
| Prop | Type | Required | Default | Description |
|
|
3346
|
+
| ------------------- | ----------------------------------------------------- | -------- | ------- | -------------------------------------------------------------------------------- |
|
|
3347
|
+
| `value` | `string` | Yes | | 편집 중인 SQL |
|
|
3348
|
+
| `onChange` | `(sql: string) => void` | Yes | | 본문 변경 핸들러 |
|
|
3349
|
+
| `onRun` | `(sql: string, context: SqlEditorRunContext) => void` | | | Mod+Enter 실행 핸들러. 두 번째 인자로 선택 영역과 커서 위치 |
|
|
3350
|
+
| `onRunAndAdvance` | `(sql: string, context: SqlEditorRunContext) => void` | | | Shift+Enter — 실행 후 다음 셀/탭으로 이동 |
|
|
3351
|
+
| `schema` | `SqlEditorSchema` | | | 테이블/컬럼 자동완성 스키마. 변경 시 에디터를 다시 만들지 않고 자동완성만 재구성 |
|
|
3352
|
+
| `completionSources` | `SqlEditorCompletionSource[]` | | | 스키마 자동완성에 더할 완성 소스 (함수 시그니처, 스니펫) |
|
|
3353
|
+
| `keymap` | `SqlEditorKeyBinding[]` | | | 추가 키 바인딩. 내장 실행 바인딩보다 먼저 평가 |
|
|
3354
|
+
| `extensions` | `SqlEditorExtension[]` | | | 임의의 CodeMirror 확장. 내장 확장 뒤에 붙어 우선권을 가짐 |
|
|
3355
|
+
| `height` | `number \| "fill"` | | | px 고정 높이. fill이면 부모가 정한 높이를 채움 |
|
|
3356
|
+
| `placeholder` | `string` | | | 빈 편집기 안내 문구 |
|
|
3357
|
+
| `readOnly` | `boolean` | | | 편집 잠금 |
|
|
3358
|
+
| `ariaLabel` | `string` | | | 편집 영역 접근성 레이블 |
|
|
3359
|
+
| `autoFocus` | `boolean` | | | 마운트 시 포커스 |
|
|
3360
|
+
| `showFooter` | `boolean` | | | 실행 힌트/버튼 표시. 기본값은 onRun이 있을 때 표시 |
|
|
3361
|
+
| `lineNumbers` | `boolean` | | true | 줄 번호 거터 |
|
|
3362
|
+
| `theme` | `SqlEditorTheme` | | "auto" | 편집기 색상. auto는 OptThemeProvider의 resolved mode를 따름 |
|
|
3363
|
+
| `labels` | `SqlEditorLabels` | | | 문구 오버라이드 |
|
|
3364
|
+
| `className` | `string` | | | 기본 스타일 오버라이드 |
|
|
3128
3365
|
|
|
3129
3366
|
#### EventMetaEditor
|
|
3130
3367
|
|
|
@@ -3168,6 +3405,103 @@ const filters = [
|
|
|
3168
3405
|
| `onCancel` | `() => void` | | | 취소 콜백 |
|
|
3169
3406
|
| `labels` | `ReportBuilderLabels` | | | UI 텍스트 커스터마이징 |
|
|
3170
3407
|
|
|
3408
|
+
#### CriteriaBuilder
|
|
3409
|
+
|
|
3410
|
+
**Import:** `import { CriteriaBuilder } from "@reopt-ai/opt-ui"`
|
|
3411
|
+
**Dependencies:** segmented-control (core), dropdown-menu (core), button (core), callout (core), empty-state (core), kbd (core)
|
|
3412
|
+
|
|
3413
|
+
| Prop | Type | Required | Default | Description |
|
|
3414
|
+
| --------------------- | -------------------------------------------------------------------------------- | -------- | ------- | ------------------------------------------------------------------------------------------ |
|
|
3415
|
+
| `value` | `CriteriaBuilderValue<TCriterion>` | Yes | | 조건 트리. { logic, groups: [{ id, logic, criteria }] } |
|
|
3416
|
+
| `onChange` | `(next: CriteriaBuilderValue<TCriterion>) => void` | Yes | | 트리 변경 핸들러 |
|
|
3417
|
+
| `kinds` | `CriteriaBuilderKindOption[]` | Yes | | 조건 추가 메뉴 항목. group으로 섹션을 나누고 negatedLabel이 있으면 부정 항목을 따로 냅니다 |
|
|
3418
|
+
| `createCriterion` | `(kind: string, negate: boolean) => TCriterion` | Yes | | 메뉴 선택으로 만들 초기 조건. 고유 id를 돌려줘야 합니다 |
|
|
3419
|
+
| `renderCriterion` | `(criterion: TCriterion, api: CriteriaRenderApi<TCriterion>) => React.ReactNode` | Yes | | 조건 한 줄의 편집 가능한 문장 렌더러 |
|
|
3420
|
+
| `cloneCriterion` | `(criterion: TCriterion) => TCriterion` | | | 복제 시 만들 사본. 기본은 새 id를 붙인 얕은 복사 |
|
|
3421
|
+
| `createGroupId` | `() => string` | | | 셸이 만드는 그룹의 id. 기본 group-N |
|
|
3422
|
+
| `errors` | `Record<string, string>` | | | 조건 id 또는 그룹 id별 오류 메시지 |
|
|
3423
|
+
| `maxGroups` | `number` | | 10 | 그룹 최대 수 |
|
|
3424
|
+
| `maxCriteriaPerGroup` | `number` | | 20 | 그룹당 조건 최대 수 |
|
|
3425
|
+
| `allowNegation` | `boolean` | | true | 조건별 부정 토글 표시 |
|
|
3426
|
+
| `disabled` | `boolean` | | false | 전체 비활성화 |
|
|
3427
|
+
| `aside` | `React.ReactNode` | | | 넓은 화면에서 트리 옆, 좁은 화면에서 아래에 놓이는 미리보기 슬롯 |
|
|
3428
|
+
| `labels` | `CriteriaBuilderLabels` | | | i18n용 라벨 오버라이드 (기본 한국어) |
|
|
3429
|
+
| `className` | `string` | | | 루트 CSS 클래스 |
|
|
3430
|
+
| `aria-label` | `string` | | | 빌더 접근성 이름 |
|
|
3431
|
+
|
|
3432
|
+
**Keyboard Shortcuts:**
|
|
3433
|
+
|
|
3434
|
+
| Keys | Action |
|
|
3435
|
+
| ---- | ----------------------------------- |
|
|
3436
|
+
| `A` | 포커스된 그룹에 조건 추가 메뉴 열기 |
|
|
3437
|
+
| `G` | 그룹 추가 |
|
|
3438
|
+
|
|
3439
|
+
**Examples:**
|
|
3440
|
+
|
|
3441
|
+
_이벤트 조건 세그먼트:_
|
|
3442
|
+
|
|
3443
|
+
```tsx
|
|
3444
|
+
"use client";
|
|
3445
|
+
import { useState } from "react";
|
|
3446
|
+
import {
|
|
3447
|
+
CriteriaBuilder,
|
|
3448
|
+
Expression,
|
|
3449
|
+
ExpressionGroup,
|
|
3450
|
+
type CriteriaBuilderValue,
|
|
3451
|
+
} from "@reopt-ai/opt-ui";
|
|
3452
|
+
|
|
3453
|
+
interface Criterion {
|
|
3454
|
+
id: string;
|
|
3455
|
+
kind: string;
|
|
3456
|
+
negate?: boolean;
|
|
3457
|
+
event: string;
|
|
3458
|
+
}
|
|
3459
|
+
|
|
3460
|
+
let seq = 0;
|
|
3461
|
+
|
|
3462
|
+
export function Example() {
|
|
3463
|
+
const [value, setValue] = useState<CriteriaBuilderValue<Criterion>>({
|
|
3464
|
+
logic: "and",
|
|
3465
|
+
groups: [
|
|
3466
|
+
{
|
|
3467
|
+
id: "g1",
|
|
3468
|
+
logic: "and",
|
|
3469
|
+
criteria: [{ id: "c1", kind: "performed", event: "purchase" }],
|
|
3470
|
+
},
|
|
3471
|
+
],
|
|
3472
|
+
});
|
|
3473
|
+
return (
|
|
3474
|
+
<CriteriaBuilder
|
|
3475
|
+
value={value}
|
|
3476
|
+
onChange={setValue}
|
|
3477
|
+
kinds={[
|
|
3478
|
+
{
|
|
3479
|
+
kind: "performed",
|
|
3480
|
+
label: "이벤트를 수행함",
|
|
3481
|
+
negatedLabel: "이벤트를 수행하지 않음",
|
|
3482
|
+
},
|
|
3483
|
+
]}
|
|
3484
|
+
createCriterion={(kind, negate) => ({
|
|
3485
|
+
id: `c${++seq}`,
|
|
3486
|
+
kind,
|
|
3487
|
+
negate,
|
|
3488
|
+
event: "",
|
|
3489
|
+
})}
|
|
3490
|
+
renderCriterion={(criterion, api) => (
|
|
3491
|
+
<ExpressionGroup>
|
|
3492
|
+
<Expression
|
|
3493
|
+
description={criterion.negate ? "수행하지 않음" : "수행함"}
|
|
3494
|
+
value={criterion.event || "이벤트 선택"}
|
|
3495
|
+
invalid={api.invalid || criterion.event === ""}
|
|
3496
|
+
onClick={() => api.update({ event: "purchase" })}
|
|
3497
|
+
/>
|
|
3498
|
+
</ExpressionGroup>
|
|
3499
|
+
)}
|
|
3500
|
+
/>
|
|
3501
|
+
);
|
|
3502
|
+
}
|
|
3503
|
+
```
|
|
3504
|
+
|
|
3171
3505
|
#### InsightsPanel
|
|
3172
3506
|
|
|
3173
3507
|
**Import:** `import { InsightsPanel } from "@reopt-ai/opt-ui"`
|
|
@@ -3194,6 +3528,27 @@ const filters = [
|
|
|
3194
3528
|
| `presets` | `TimePresetDef[]` | | | 빠른 프리셋 목록 (Today, Last 7d 등) |
|
|
3195
3529
|
| `labels` | `TimeRangeSelectorLabels` | | | i18n용 라벨 오버라이드 |
|
|
3196
3530
|
|
|
3531
|
+
**Examples:**
|
|
3532
|
+
|
|
3533
|
+
_제어되는 조회 기간:_
|
|
3534
|
+
|
|
3535
|
+
```tsx
|
|
3536
|
+
"use client";
|
|
3537
|
+
import { useState } from "react";
|
|
3538
|
+
import { TimeRangeSelector, type DateRange } from "@reopt-ai/opt-ui";
|
|
3539
|
+
export function Example() {
|
|
3540
|
+
const [range, setRange] = useState<DateRange>({ start: null, end: null });
|
|
3541
|
+
return (
|
|
3542
|
+
<TimeRangeSelector
|
|
3543
|
+
value={range}
|
|
3544
|
+
onChange={setRange}
|
|
3545
|
+
labels={{ title: "조회 기간", placeholder: "기간 선택" }}
|
|
3546
|
+
presets={[{ label: "최근 7일", days: 7 }]}
|
|
3547
|
+
/>
|
|
3548
|
+
);
|
|
3549
|
+
}
|
|
3550
|
+
```
|
|
3551
|
+
|
|
3197
3552
|
#### ExportButton
|
|
3198
3553
|
|
|
3199
3554
|
**Import:** `import { ExportButton } from "@reopt-ai/opt-ui"`
|
|
@@ -3224,6 +3579,38 @@ const filters = [
|
|
|
3224
3579
|
| `percentageFractionDigits` | `number` | | 1 | percentage 포맷 시 소수점 자리수 |
|
|
3225
3580
|
| `loading` | `boolean` | | false | 로딩 시 스켈레톤 표시 |
|
|
3226
3581
|
|
|
3582
|
+
**Examples:**
|
|
3583
|
+
|
|
3584
|
+
_의미가 다른 통계 비교:_
|
|
3585
|
+
|
|
3586
|
+
```tsx
|
|
3587
|
+
import { SummaryRow } from "@reopt-ai/opt-ui";
|
|
3588
|
+
export function Example() {
|
|
3589
|
+
return (
|
|
3590
|
+
<SummaryRow
|
|
3591
|
+
columns={2}
|
|
3592
|
+
stats={[
|
|
3593
|
+
{
|
|
3594
|
+
id: "orders",
|
|
3595
|
+
title: "주문",
|
|
3596
|
+
value: "120",
|
|
3597
|
+
change: "+10%",
|
|
3598
|
+
trend: "up",
|
|
3599
|
+
},
|
|
3600
|
+
{
|
|
3601
|
+
id: "errors",
|
|
3602
|
+
title: "오류",
|
|
3603
|
+
value: "2",
|
|
3604
|
+
change: "-50%",
|
|
3605
|
+
trend: "down",
|
|
3606
|
+
polarity: "negative",
|
|
3607
|
+
},
|
|
3608
|
+
]}
|
|
3609
|
+
/>
|
|
3610
|
+
);
|
|
3611
|
+
}
|
|
3612
|
+
```
|
|
3613
|
+
|
|
3227
3614
|
#### EventTimeline
|
|
3228
3615
|
|
|
3229
3616
|
**Import:** `import { EventTimeline } from "@reopt-ai/opt-ui"`
|
|
@@ -3937,4 +4324,164 @@ const messages = [
|
|
|
3937
4324
|
| ---------- | ----------- | -------- | ------- | ---------------------------------- |
|
|
3938
4325
|
| `children` | `ReactNode` | Yes | | 행 클릭으로 새면 안 되는 셀 컨트롤 |
|
|
3939
4326
|
|
|
4327
|
+
#### SchemaTree
|
|
4328
|
+
|
|
4329
|
+
**Import:** `import { SchemaTree } from "@reopt-ai/opt-ui"`
|
|
4330
|
+
**Dependencies:** field-token (core), highlight (core)
|
|
4331
|
+
|
|
4332
|
+
| Prop | Type | Required | Default | Description |
|
|
4333
|
+
| ----------------- | ------------------------------------------------------------------ | -------- | ------- | ----------------------------------------- |
|
|
4334
|
+
| `tables` | `SchemaTreeTable[]` | Yes | | 테이블과 컬럼 |
|
|
4335
|
+
| `loading` | `boolean` | | | 스키마 조회 중 |
|
|
4336
|
+
| `defaultExpanded` | `string[]` | | | 처음에 펼칠 테이블. 생략 시 첫 테이블 |
|
|
4337
|
+
| `onInsert` | `(name: string, kind: "table" \| "column", table: string) => void` | | | 이름을 편집기 커서에 삽입 |
|
|
4338
|
+
| `onPreview` | `(table: string) => void` | | | 테이블 미리보기 실행. SQL은 호출자가 작성 |
|
|
4339
|
+
| `header` | `ReactNode` | | | 검색창 위 내용 |
|
|
4340
|
+
| `labels` | `SchemaTreeLabels` | | | 문구 오버라이드 |
|
|
4341
|
+
|
|
4342
|
+
#### QueryToolbar
|
|
4343
|
+
|
|
4344
|
+
**Import:** `import { QueryToolbar } from "@reopt-ai/opt-ui"`
|
|
4345
|
+
**Dependencies:** button (core), kbd (core), dropdown-menu (core)
|
|
4346
|
+
|
|
4347
|
+
| Prop | Type | Required | Default | Description |
|
|
4348
|
+
| ------------------- | -------------------- | -------- | ------- | ----------------------------------------------- |
|
|
4349
|
+
| `onRun` | `() => void` | Yes | | 커서 위치의 문장 실행 |
|
|
4350
|
+
| `onCancel` | `() => void` | | | 실행 중 취소. 있으면 버튼이 Cancel로 전환 |
|
|
4351
|
+
| `running` | `boolean` | | | 실행 중 |
|
|
4352
|
+
| `runState` | `QueryRunState` | | "idle" | 마지막 실행 대비 변경 여부 |
|
|
4353
|
+
| `runDisabledReason` | `string` | | | 실행 불가 사유. 툴팁으로 표시 |
|
|
4354
|
+
| `onRunSelection` | `() => void` | | | 선택 영역만 실행 |
|
|
4355
|
+
| `hasSelection` | `boolean` | | | 선택 영역이 있는지. 없으면 항목 비활성 |
|
|
4356
|
+
| `onRunAll` | `() => void` | | | 전체 문장 실행 |
|
|
4357
|
+
| `multiStatement` | `boolean` | | | 문장이 둘 이상인지. 아니면 전체 실행을 숨김 |
|
|
4358
|
+
| `onSave` | `() => void` | | | 저장 다이얼로그 열기 |
|
|
4359
|
+
| `saveDisabled` | `boolean` | | | 저장 비활성 |
|
|
4360
|
+
| `children` | `ReactNode` | | | 실행 그룹 뒤의 컨트롤 — 필터, 변수 |
|
|
4361
|
+
| `trailing` | `ReactNode` | | | 끝쪽 컨트롤 |
|
|
4362
|
+
| `modifierKey` | `string` | | | 단축키 힌트의 수정자 글리프. 기본은 플랫폼 감지 |
|
|
4363
|
+
| `labels` | `QueryToolbarLabels` | | | 문구 오버라이드 |
|
|
4364
|
+
|
|
4365
|
+
#### QueryOutputPane
|
|
4366
|
+
|
|
4367
|
+
**Import:** `import { QueryOutputPane } from "@reopt-ai/opt-ui"`
|
|
4368
|
+
**Dependencies:** segmented-control (core), empty-state (core), resizable (core)
|
|
4369
|
+
|
|
4370
|
+
| Prop | Type | Required | Default | Description |
|
|
4371
|
+
| ---------------- | ------------------------------------------------------------ | -------- | ------- | ----------------------------------- |
|
|
4372
|
+
| `view` | `QueryOutputView` | Yes | | 표 / 차트 / 분할 |
|
|
4373
|
+
| `onViewChange` | `(view: QueryOutputView) => void` | Yes | | 뷰 전환 |
|
|
4374
|
+
| `results` | `ReactNode` | Yes | | 결과 테이블 |
|
|
4375
|
+
| `chart` | `ReactNode` | | | 차트 빌더. 없으면 차트 뷰를 숨김 |
|
|
4376
|
+
| `status` | `"idle" \| "running" \| "success" \| "error" \| "cancelled"` | Yes | | 실행 수명주기 |
|
|
4377
|
+
| `error` | `string` | | | 백엔드 오류 원문 |
|
|
4378
|
+
| `runningSeconds` | `number` | | | 실행 경과 초. 로딩 상태에 표시 |
|
|
4379
|
+
| `onCancel` | `() => void` | | | 실행 취소 |
|
|
4380
|
+
| `stats` | `QueryRunStats` | | | 행 수, 경과, 읽은 바이트, 절단 여부 |
|
|
4381
|
+
| `actions` | `ReactNode` | | | 뷰 전환 오른쪽 컨트롤 |
|
|
4382
|
+
| `statusExtra` | `ReactNode` | | | 상태바 추가 내용 |
|
|
4383
|
+
| `banner` | `ReactNode` | | | 출력 위 알림 |
|
|
4384
|
+
| `onRetry` | `() => void` | | | 오류 상태 닫기 |
|
|
4385
|
+
| `labels` | `QueryOutputPaneLabels` | | | 문구 오버라이드 |
|
|
4386
|
+
|
|
4387
|
+
#### QueryResultChart
|
|
4388
|
+
|
|
4389
|
+
**Import:** `import { QueryResultChart } from "@reopt-ai/opt-ui"`
|
|
4390
|
+
**Dependencies:** line-chart (visuals), bar-chart (visuals), area-chart (visuals), pie-chart (visuals), segmented-control (core), select (core)
|
|
4391
|
+
|
|
4392
|
+
| Prop | Type | Required | Default | Description |
|
|
4393
|
+
| ---------------- | ------------------------------------ | -------- | ------- | --------------------------------- |
|
|
4394
|
+
| `columns` | `QueryResultColumn[]` | Yes | | 결과 컬럼 |
|
|
4395
|
+
| `rows` | `Array<Record<string, unknown>>` | Yes | | 결과 행 |
|
|
4396
|
+
| `config` | `QueryChartConfig` | Yes | | 차트 종류, 축, 값 컬럼 |
|
|
4397
|
+
| `onConfigChange` | `(config: QueryChartConfig) => void` | Yes | | 설정 변경 |
|
|
4398
|
+
| `showControls` | `boolean` | | true | 컨트롤 표시. 임베드 카드에서는 끔 |
|
|
4399
|
+
| `height` | `number` | | | 차트 높이(px). 기본은 부모 채움 |
|
|
4400
|
+
| `maxPoints` | `number` | | 1000 | 차트에 그릴 최대 행 수 |
|
|
4401
|
+
| `labels` | `QueryResultChartLabels` | | | 문구 오버라이드 |
|
|
4402
|
+
|
|
4403
|
+
#### QueryFiltersMenu
|
|
4404
|
+
|
|
4405
|
+
**Import:** `import { QueryFiltersMenu } from "@reopt-ai/opt-ui"`
|
|
4406
|
+
**Dependencies:** popover (core), date-range-picker (core), select (core), combobox (core), callout (core)
|
|
4407
|
+
|
|
4408
|
+
| Prop | Type | Required | Default | Description |
|
|
4409
|
+
| --------------------- | -------------------------------------- | -------- | ------- | -------------------------------------------------------------- |
|
|
4410
|
+
| `value` | `QueryFilters` | Yes | | 기간과 속성 필터 |
|
|
4411
|
+
| `onChange` | `(filters: QueryFilters) => void` | Yes | | 필터 변경 |
|
|
4412
|
+
| `fields` | `QueryFilterField[]` | Yes | | 필드 선택지 |
|
|
4413
|
+
| `placeholderPresent` | `boolean` | | | SQL에 {filters}가 있는지 |
|
|
4414
|
+
| `onInsertPlaceholder` | `() => void` | | | {filters}를 커서에 삽입 |
|
|
4415
|
+
| `onLoadValues` | `(field: string) => Promise<string[]>` | | | 필드의 알려진 값. 값 입력란의 제안으로 쓰이며 자유 입력도 허용 |
|
|
4416
|
+
| `presets` | `DateRangePreset[]` | | | 기간 프리셋 |
|
|
4417
|
+
| `disabled` | `boolean` | | | 비활성 |
|
|
4418
|
+
| `labels` | `QueryFiltersMenuLabels` | | | 문구 오버라이드 |
|
|
4419
|
+
|
|
4420
|
+
#### QueryVariablesMenu
|
|
4421
|
+
|
|
4422
|
+
**Import:** `import { QueryVariablesMenu } from "@reopt-ai/opt-ui"`
|
|
4423
|
+
**Dependencies:** popover (core), input (core)
|
|
4424
|
+
|
|
4425
|
+
| Prop | Type | Required | Default | Description |
|
|
4426
|
+
| ---------------- | -------------------------------------- | -------- | ------- | ------------------------------ |
|
|
4427
|
+
| `value` | `QueryVariable[]` | Yes | | 변수 목록 |
|
|
4428
|
+
| `onChange` | `(variables: QueryVariable[]) => void` | Yes | | 변수 변경 |
|
|
4429
|
+
| `onInsert` | `(name: string) => void` | | | {variables.name}을 커서에 삽입 |
|
|
4430
|
+
| `disabled` | `boolean` | | | 비활성 |
|
|
4431
|
+
| `disabledReason` | `string` | | | 비활성 사유. 툴팁으로 표시 |
|
|
4432
|
+
| `labels` | `QueryVariablesMenuLabels` | | | 문구 오버라이드 |
|
|
4433
|
+
|
|
4434
|
+
#### QueryHistoryList
|
|
4435
|
+
|
|
4436
|
+
**Import:** `import { QueryHistoryList } from "@reopt-ai/opt-ui"`
|
|
4437
|
+
**Dependencies:** button (core)
|
|
4438
|
+
|
|
4439
|
+
| Prop | Type | Required | Default | Description |
|
|
4440
|
+
| --------- | ---------------------------------- | -------- | ------- | ---------------- |
|
|
4441
|
+
| `items` | `QueryHistoryItem[]` | Yes | | 최근 실행부터 |
|
|
4442
|
+
| `loading` | `boolean` | | | 이력 조회 중 |
|
|
4443
|
+
| `onLoad` | `(item: QueryHistoryItem) => void` | | | 쿼리를 편집기로 |
|
|
4444
|
+
| `onRerun` | `(item: QueryHistoryItem) => void` | | | 그대로 다시 실행 |
|
|
4445
|
+
| `onClear` | `() => void` | | | 이력 비우기 |
|
|
4446
|
+
| `header` | `ReactNode` | | | 목록 위 내용 |
|
|
4447
|
+
| `labels` | `QueryHistoryListLabels` | | | 문구 오버라이드 |
|
|
4448
|
+
|
|
4449
|
+
#### SaveQueryDialog
|
|
4450
|
+
|
|
4451
|
+
**Import:** `import { SaveQueryDialog } from "@reopt-ai/opt-ui"`
|
|
4452
|
+
**Dependencies:** dialog (core), input (core), textarea (core), switch (core)
|
|
4453
|
+
|
|
4454
|
+
| Prop | Type | Required | Default | Description |
|
|
4455
|
+
| ---------------------- | ---------------------------------------------------- | -------- | -------- | ---------------------------------------- |
|
|
4456
|
+
| `open` | `boolean` | Yes | | 열림 |
|
|
4457
|
+
| `onOpenChange` | `(open: boolean) => void` | Yes | | 열림 상태 변경 |
|
|
4458
|
+
| `onSubmit` | `(values: SaveQueryValues) => void \| Promise<void>` | Yes | | 저장 |
|
|
4459
|
+
| `candidates` | `string[]` | Yes | | 저장할 SQL 후보. 문장이 여럿이면 여러 개 |
|
|
4460
|
+
| `initialCandidate` | `number` | | 0 | 처음 보여줄 후보 |
|
|
4461
|
+
| `candidateIsSelection` | `boolean` | | | 후보가 선택 영역인지 |
|
|
4462
|
+
| `initialValues` | `Partial<Omit<SaveQueryValues, "sql">>` | | | 기존 저장 쿼리를 수정할 때의 초기값 |
|
|
4463
|
+
| `mode` | `"create" \| "update"` | | "create" | 새로 저장 / 수정 |
|
|
4464
|
+
| `saving` | `boolean` | | | 저장 중 |
|
|
4465
|
+
| `error` | `string` | | | 저장 실패 메시지 |
|
|
4466
|
+
| `labels` | `SaveQueryDialogLabels` | | | 문구 오버라이드 |
|
|
4467
|
+
|
|
4468
|
+
#### QueryWorkspace
|
|
4469
|
+
|
|
4470
|
+
**Import:** `import { QueryWorkspace } from "@reopt-ai/opt-ui"`
|
|
4471
|
+
**Dependencies:** resizable (core), button (core)
|
|
4472
|
+
|
|
4473
|
+
| Prop | Type | Required | Default | Description |
|
|
4474
|
+
| --------------------- | ------------------------- | -------- | ------- | ------------------------------------ |
|
|
4475
|
+
| `sidebar` | `ReactNode` | | | 왼쪽 패널 내용 |
|
|
4476
|
+
| `sidebarOpen` | `boolean` | | | 제어형 사이드바 열림 |
|
|
4477
|
+
| `onSidebarOpenChange` | `(open: boolean) => void` | | | 사이드바 열림 변경 |
|
|
4478
|
+
| `header` | `ReactNode` | | | 툴바 위 — 탭이나 페이지 헤더 |
|
|
4479
|
+
| `toolbar` | `ReactNode` | | | 툴바 |
|
|
4480
|
+
| `editor` | `ReactNode` | Yes | | 편집기 |
|
|
4481
|
+
| `output` | `ReactNode` | Yes | | 출력 |
|
|
4482
|
+
| `storageKey` | `string` | | | 패널 크기를 localStorage에 기억할 키 |
|
|
4483
|
+
| `defaultSidebarSize` | `number` | | 22 | 사이드바 폭(%) |
|
|
4484
|
+
| `defaultEditorSize` | `number` | | 40 | 편집기 높이(%) |
|
|
4485
|
+
| `labels` | `QueryWorkspaceLabels` | | | 문구 오버라이드 |
|
|
4486
|
+
|
|
3940
4487
|
### Surface Layer
|