@exem-ui/react 0.3.4-next.20260701100258 → 0.3.4-next.20260702065311

package/README.en.md

@@ -23,8 +23,8 @@
 
 ## Key Features
 
-- **22 Component Categories** — Enterprise-grade components including Button, Modal, Tabs, Table, Toast
-- **207 Icons** — Auto-generated React icon components from SVG sources
+- **23 Component Categories** — Enterprise-grade components including Button, Modal, Tabs, Table, Toast
+- **200+ Icons** — Auto-generated React icon components from SVG sources
 - **Accessibility First** — WAI-ARIA compliant, built on Radix UI primitives
 - **Compound Component Pattern** — Intuitive composition API like `Modal.Header`, `Tabs.Content`
 - **High-performance Table** — Virtual scrolling powered by TanStack Table + Virtual
@@ -109,8 +109,9 @@ Import from `@exem-ui/react`. Icons are imported from `@exem-ui/react/icon`.
 | Breadcrumb | Navigation breadcrumb             |
 | Button     | Button (variant, size)            |
 | Checkbox   | Checkbox                          |
+| CodeEditor | SQL/JSON code viewer and light editing |
 | Flat       | Flat list                         |
-| Icon       | 207 icons (`@exem-ui/react/icon`) |
+| Icon       | 200+ icons (`@exem-ui/react/icon`) |
 | Input      | Text input                        |
 | Loading    | Loading indicator                 |
 | MessageBox | Message box                       |

package/README.md

@@ -23,8 +23,8 @@
 
 ## 주요 특징
 
-- **22개 컴포넌트 카테고리** — Button, Modal, Tabs, Table, Toast 등 엔터프라이즈급 컴포넌트
-- **207개 아이콘** — SVG에서 자동 생성되는 React 아이콘 컴포넌트
+- **23개 컴포넌트 카테고리** — Button, Modal, Tabs, Table, Toast 등 엔터프라이즈급 컴포넌트
+- **200+ 아이콘** — SVG에서 자동 생성되는 React 아이콘 컴포넌트
 - **접근성 우선** — Radix UI 기반으로 WAI-ARIA 패턴 준수
 - **Compound Component 패턴** — `Modal.Header`, `Tabs.Content` 등 직관적 조합 API
 - **고성능 테이블** — TanStack Table + Virtual 기반 가상 스크롤링 지원
@@ -118,6 +118,19 @@ function App() {
 }
 ```
 
+### CodeEditor
+
+CodeEditor는 Monaco 기반 optional 컴포넌트라 별도 서브패스에서 import합니다.
+Monaco worker 설정은 사용처의 번들러/Monaco 설정을 따릅니다.
+
+```bash
+pnpm add monaco-editor @monaco-editor/react
+```
+
+```tsx
+import { CodeEditor } from "@exem-ui/react/code-editor";
+```
+
 ### 아이콘
 
 ```tsx
@@ -136,7 +149,7 @@ function Nav() {
 
 ## 컴포넌트 목록
 
-`@exem-ui/react`에서 import합니다. 아이콘만 `@exem-ui/react/icon`에서 import합니다.
+기본 컴포넌트는 `@exem-ui/react`에서 import합니다. 아이콘은 `@exem-ui/react/icon`, CodeEditor는 `@exem-ui/react/code-editor`에서 import합니다.
 
 | 컴포넌트   | 설명                                 |
 | ---------- | ------------------------------------ |
@@ -145,8 +158,9 @@ function Nav() {
 | Breadcrumb | 탐색 경로                            |
 | Button     | 버튼 (variant, size)                 |
 | Checkbox   | 체크박스                             |
+| CodeEditor | SQL/JSON 코드 뷰어 및 간단 편집 (`@exem-ui/react/code-editor`) |
 | Flat       | 플랫 리스트                          |
-| Icon       | 207개 아이콘 (`@exem-ui/react/icon`) |
+| Icon       | 200+ 아이콘 (`@exem-ui/react/icon`)  |
 | Input      | 텍스트 입력                          |
 | Loading    | 로딩 인디케이터                      |
 | MessageBox | 메시지 박스                          |

package/dist/code-editor/index.d.mts

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BeforeMount, OnMount } from '@monaco-editor/react';
+import { editor } from 'monaco-editor';
+import { SqlLanguage } from 'sql-formatter';
+
+type CodeEditorViewMode = 'original' | 'formatted';
+type CodeEditorFormatter = (value: string) => string;
+type FormatToggleRenderProps = {
+    formatted: boolean;
+    toggle: () => void;
+    getToggleProps: () => {
+        onClick: () => void;
+        'aria-pressed': boolean;
+        type: 'button';
+    };
+};
+type CodeEditorFormatToggleProps = {
+    children: (props: FormatToggleRenderProps) => ReactNode;
+};
+type FormatTriggerRenderProps = {
+    format: () => void;
+    getFormatProps: () => {
+        disabled: boolean;
+        onClick: () => void;
+        type: 'button';
+    };
+};
+type CodeEditorFormatTriggerProps = {
+    children: (props: FormatTriggerRenderProps) => ReactNode;
+};
+
+type CopyTriggerRenderProps = {
+    copied: boolean;
+    copy: () => Promise<void>;
+    getCopyProps: () => {
+        onClick: () => Promise<void>;
+        type: 'button';
+    };
+};
+type CodeEditorCopyTriggerProps = {
+    children: (props: CopyTriggerRenderProps) => ReactNode;
+    copiedDuration?: number;
+    formatter?: CodeEditorFormatter | null;
+    value?: string;
+};
+
+declare const CopyTrigger: {
+    ({ children, copiedDuration, formatter, value, }: CodeEditorCopyTriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const FormatToggle: {
+    ({ children }: CodeEditorFormatToggleProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const FormatTrigger: {
+    ({ children }: CodeEditorFormatTriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type CodeEditorOptions = Omit<editor.IStandaloneEditorConstructionOptions, 'theme'>;
+type CodeEditorSurfaceProps = {
+    className?: string;
+    editorClassName?: string;
+    height?: number | string;
+    language?: string;
+    value?: string;
+    formatter?: CodeEditorFormatter | null;
+    onChange?: (value?: string) => void;
+    options?: CodeEditorOptions;
+    readOnly?: boolean;
+    beforeMount?: BeforeMount;
+    onMount?: OnMount;
+};
+declare const CodeEditorSurface: React.ForwardRefExoticComponent<CodeEditorSurfaceProps & React.RefAttributes<HTMLDivElement>>;
+
+type CodeEditorProps = {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    readOnly?: boolean;
+    defaultViewMode?: CodeEditorViewMode;
+    viewMode?: CodeEditorViewMode;
+    onViewModeChange?: (mode: CodeEditorViewMode) => void;
+    formatter?: CodeEditorFormatter;
+    className?: string;
+    children: React.ReactNode;
+};
+type CodeEditorComponent$1 = React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLDivElement>> & {
+    Surface: typeof CodeEditorSurface;
+    FormatToggle: typeof FormatToggle;
+    FormatTrigger: typeof FormatTrigger;
+    CopyTrigger: typeof CopyTrigger;
+};
+
+type CodeEditorJSONProps = Omit<CodeEditorSurfaceProps, 'language'>;
+declare const CodeEditorJSON: React.ForwardRefExoticComponent<CodeEditorJSONProps & React.RefAttributes<HTMLDivElement>>;
+
+type SqlEditorDbType = SqlLanguage | 'oracle';
+
+type SqlEditorTokenRange = {
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+};
+type SqlEditorToken = {
+    id?: string;
+    match: string;
+    className?: string;
+};
+type ParsedSqlEditorToken = {
+    token: SqlEditorToken;
+    text: string;
+    range: SqlEditorTokenRange;
+    startOffset: number;
+    endOffset: number;
+    className?: string;
+};
+declare const getSqlEditorTokens: (value: string, tokens: SqlEditorToken[]) => ParsedSqlEditorToken[];
+
+type CodeEditorSQLProps = Omit<CodeEditorSurfaceProps, 'language'> & {
+    dbType?: SqlEditorDbType;
+    onTokenClick?: (token: SqlEditorToken) => void;
+    tokens?: SqlEditorToken[];
+};
+declare const CodeEditorSQL: React.ForwardRefExoticComponent<Omit<CodeEditorSurfaceProps, "language"> & {
+    dbType?: SqlEditorDbType;
+    onTokenClick?: (token: SqlEditorToken) => void;
+    tokens?: SqlEditorToken[];
+} & React.RefAttributes<HTMLDivElement>>;
+
+type CodeEditorComponent = CodeEditorComponent$1 & {
+    JSON: typeof CodeEditorJSON;
+    SQL: typeof CodeEditorSQL;
+};
+declare const CodeEditor: CodeEditorComponent;
+
+export { CodeEditor, type CodeEditorComponent, type CodeEditorCopyTriggerProps, type CopyTriggerRenderProps as CodeEditorCopyTriggerRenderProps, type CodeEditorFormatToggleProps, type FormatToggleRenderProps as CodeEditorFormatToggleRenderProps, type CodeEditorFormatTriggerProps, type FormatTriggerRenderProps as CodeEditorFormatTriggerRenderProps, type CodeEditorFormatter, type CodeEditorJSONProps, type CodeEditorOptions, type CodeEditorProps, type CodeEditorSQLProps, type CodeEditorSurfaceProps, type CodeEditorViewMode, type ParsedSqlEditorToken, type SqlEditorDbType, type SqlEditorToken, type SqlEditorTokenRange, getSqlEditorTokens };

package/dist/code-editor/index.d.ts

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BeforeMount, OnMount } from '@monaco-editor/react';
+import { editor } from 'monaco-editor';
+import { SqlLanguage } from 'sql-formatter';
+
+type CodeEditorViewMode = 'original' | 'formatted';
+type CodeEditorFormatter = (value: string) => string;
+type FormatToggleRenderProps = {
+    formatted: boolean;
+    toggle: () => void;
+    getToggleProps: () => {
+        onClick: () => void;
+        'aria-pressed': boolean;
+        type: 'button';
+    };
+};
+type CodeEditorFormatToggleProps = {
+    children: (props: FormatToggleRenderProps) => ReactNode;
+};
+type FormatTriggerRenderProps = {
+    format: () => void;
+    getFormatProps: () => {
+        disabled: boolean;
+        onClick: () => void;
+        type: 'button';
+    };
+};
+type CodeEditorFormatTriggerProps = {
+    children: (props: FormatTriggerRenderProps) => ReactNode;
+};
+
+type CopyTriggerRenderProps = {
+    copied: boolean;
+    copy: () => Promise<void>;
+    getCopyProps: () => {
+        onClick: () => Promise<void>;
+        type: 'button';
+    };
+};
+type CodeEditorCopyTriggerProps = {
+    children: (props: CopyTriggerRenderProps) => ReactNode;
+    copiedDuration?: number;
+    formatter?: CodeEditorFormatter | null;
+    value?: string;
+};
+
+declare const CopyTrigger: {
+    ({ children, copiedDuration, formatter, value, }: CodeEditorCopyTriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const FormatToggle: {
+    ({ children }: CodeEditorFormatToggleProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const FormatTrigger: {
+    ({ children }: CodeEditorFormatTriggerProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type CodeEditorOptions = Omit<editor.IStandaloneEditorConstructionOptions, 'theme'>;
+type CodeEditorSurfaceProps = {
+    className?: string;
+    editorClassName?: string;
+    height?: number | string;
+    language?: string;
+    value?: string;
+    formatter?: CodeEditorFormatter | null;
+    onChange?: (value?: string) => void;
+    options?: CodeEditorOptions;
+    readOnly?: boolean;
+    beforeMount?: BeforeMount;
+    onMount?: OnMount;
+};
+declare const CodeEditorSurface: React.ForwardRefExoticComponent<CodeEditorSurfaceProps & React.RefAttributes<HTMLDivElement>>;
+
+type CodeEditorProps = {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    readOnly?: boolean;
+    defaultViewMode?: CodeEditorViewMode;
+    viewMode?: CodeEditorViewMode;
+    onViewModeChange?: (mode: CodeEditorViewMode) => void;
+    formatter?: CodeEditorFormatter;
+    className?: string;
+    children: React.ReactNode;
+};
+type CodeEditorComponent$1 = React.ForwardRefExoticComponent<CodeEditorProps & React.RefAttributes<HTMLDivElement>> & {
+    Surface: typeof CodeEditorSurface;
+    FormatToggle: typeof FormatToggle;
+    FormatTrigger: typeof FormatTrigger;
+    CopyTrigger: typeof CopyTrigger;
+};
+
+type CodeEditorJSONProps = Omit<CodeEditorSurfaceProps, 'language'>;
+declare const CodeEditorJSON: React.ForwardRefExoticComponent<CodeEditorJSONProps & React.RefAttributes<HTMLDivElement>>;
+
+type SqlEditorDbType = SqlLanguage | 'oracle';
+
+type SqlEditorTokenRange = {
+    startLineNumber: number;
+    startColumn: number;
+    endLineNumber: number;
+    endColumn: number;
+};
+type SqlEditorToken = {
+    id?: string;
+    match: string;
+    className?: string;
+};
+type ParsedSqlEditorToken = {
+    token: SqlEditorToken;
+    text: string;
+    range: SqlEditorTokenRange;
+    startOffset: number;
+    endOffset: number;
+    className?: string;
+};
+declare const getSqlEditorTokens: (value: string, tokens: SqlEditorToken[]) => ParsedSqlEditorToken[];
+
+type CodeEditorSQLProps = Omit<CodeEditorSurfaceProps, 'language'> & {
+    dbType?: SqlEditorDbType;
+    onTokenClick?: (token: SqlEditorToken) => void;
+    tokens?: SqlEditorToken[];
+};
+declare const CodeEditorSQL: React.ForwardRefExoticComponent<Omit<CodeEditorSurfaceProps, "language"> & {
+    dbType?: SqlEditorDbType;
+    onTokenClick?: (token: SqlEditorToken) => void;
+    tokens?: SqlEditorToken[];
+} & React.RefAttributes<HTMLDivElement>>;
+
+type CodeEditorComponent = CodeEditorComponent$1 & {
+    JSON: typeof CodeEditorJSON;
+    SQL: typeof CodeEditorSQL;
+};
+declare const CodeEditor: CodeEditorComponent;
+
+export { CodeEditor, type CodeEditorComponent, type CodeEditorCopyTriggerProps, type CopyTriggerRenderProps as CodeEditorCopyTriggerRenderProps, type CodeEditorFormatToggleProps, type FormatToggleRenderProps as CodeEditorFormatToggleRenderProps, type CodeEditorFormatTriggerProps, type FormatTriggerRenderProps as CodeEditorFormatTriggerRenderProps, type CodeEditorFormatter, type CodeEditorJSONProps, type CodeEditorOptions, type CodeEditorProps, type CodeEditorSQLProps, type CodeEditorSurfaceProps, type CodeEditorViewMode, type ParsedSqlEditorToken, type SqlEditorDbType, type SqlEditorToken, type SqlEditorTokenRange, getSqlEditorTokens };