@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.19 → 1.0.21

package/build/components/opsnow-common-forms.js

@@ -1,1006 +0,0 @@
-import { z } from "zod";
-import { IconNamesMap, generateIconDescription } from "./data/icon-names.js";
-// Button 컴포넌트 관련 스키마 정의
-export const ButtonSchema = z.object({
-    label: z.string().optional().describe("버튼 라벨"),
-    size: z.enum(["large", "medium", "small"]).default("medium").describe("버튼 크기"),
-    color: z.enum(["primary", "secondary", "error", "inherit"]).default("primary").describe("버튼 색상"),
-    variant: z.enum(["contained", "outlined", "text"]).default("contained").describe("버튼 스타일"),
-    theme: z.enum(["white"]).optional().describe("테마"),
-    iconName: z.enum(Object.keys(IconNamesMap)).optional().describe(generateIconDescription({ format: 'nested' })),
-    muiIconName: z.string().optional().transform(val => val?.toLowerCase()).describe("Material-UI 아이콘 이름"),
-    iconPosition: z.enum(["left", "right"]).optional().describe("아이콘 위치"),
-    iconOnly: z.boolean().optional().describe("아이콘만 표시"),
-    disabled: z.boolean().optional().describe("비활성화 여부"),
-    onClick: z.string().optional().describe("클릭 이벤트 핸들러")
-});
-// Badge 컴포넌트 관련 스키마 정의
-export const BadgeSchema = z.object({
-    badgeContent: z.number().optional().describe("뱃지 내용 (숫자)"),
-    color: z.enum(["primary", "error", "info", "warning", "success"]).default("primary").describe("뱃지 색상"),
-    variant: z.enum(["standard", "dot"]).optional().describe("뱃지 스타일"),
-    showZero: z.boolean().optional().describe("0일 때도 표시 여부"),
-    children: z.string().optional().describe("뱃지 내부 콘텐츠")
-});
-// Textarea 컴포넌트 관련 스키마 정의
-export const TextareaSchema = z.object({
-    placeholder: z.string().optional().describe("텍스트 영역에 표시될 플레이스홀더 텍스트"),
-    value: z.string().optional().describe("텍스트 영역의 값. React 상태 변수 이름을 전달하세요 (예: 'description')."),
-    onChange: z.string().optional().describe("값이 변경될 때 실행할 함수의 본문을 문자열로 전달하세요 (예: '(e) => setDescription(e.target.value)')."),
-    variant: z.enum(["outlined", "standard", "filled"]).default("outlined").describe("텍스트 영역 스타일"),
-    rows: z.number().optional().describe("고정 높이를 위한 줄 수"),
-    autoSize: z.boolean().optional().describe("내용에 따라 높이 자동 조절 여부"),
-    helperText: z.string().optional().describe("텍스트 영역 아래에 표시될 도움말 텍스트"),
-});
-// Switch 컴포넌트 관련 스키마 정의
-export const SwitchSchema = z.object({
-    checked: z.string().describe("스위치의 체크 여부를 나타내는 상태 변수. 예: 'isToggled'"),
-    onChange: z.string().describe("스위치 상태 변경 시 호출될 함수. 예: '(e) => setIsToggled(e.target.checked)'"),
-    color: z.enum(["primary", "secondary", "error", "warning", "info", "success", "default"]).optional().describe("스위치 색상"),
-    size: z.enum(["small", "medium"]).optional().describe("스위치 크기 ('small' 또는 'medium')"),
-    disabled: z.boolean().optional().describe("비활성화 여부"),
-});
-// Chip 컴포넌트 관련 스키마 정의
-export const ChipSchema = z.object({
-    label: z.string().optional().describe('칩에 표시될 텍스트'),
-    color: z.enum(['default', 'primary', 'secondary', 'error', 'warning', 'info', 'success']).default('default').describe('칩 색상'),
-    size: z.enum(['medium', 'small']).optional().describe('칩 크기'),
-    variant: z.enum(['filled', 'outlined']).optional().describe('칩 스타일'),
-    disabled: z.boolean().optional().describe('비활성화 여부'),
-    avatar: z.string().optional().describe('Avatar JSX 코드 문자열'),
-    deleteIcon: z.string().optional().describe('DeleteIcon JSX 코드 문자열'),
-    onClick: z.string().optional().describe('클릭 이벤트 핸들러'),
-    onDelete: z.string().optional().describe('삭제 아이콘 클릭 핸들러'),
-});
-// TextField 컴포넌트 관련 스키마 정의
-export const TextFieldSchema = z.object({
-    placeholder: z.string().optional().describe("입력 필드에 표시될 플레이스홀더 텍스트"),
-    value: z.string().optional().describe("입력 필드의 값. React 상태 변수 이름을 전달하세요 (예: 'name')."),
-    onChange: z.string().optional().describe("값이 변경될 때 실행할 함수의 본문을 문자열로 전달하세요 (예: '(e) => setName(e.target.value)')."),
-    variant: z.enum(["standard", "outlined", "filled"]).default("standard").describe("입력 필드 스타일"),
-    type: z.enum(["text", "password", "number"]).optional().describe("입력 타입"),
-    size: z.enum(["medium", "small"]).optional().describe("입력 필드 크기"),
-    error: z.boolean().optional().describe("에러 상태 여부"),
-    helperText: z.string().optional().describe("입력 필드 아래에 표시될 도움말 텍스트"),
-    disabled: z.boolean().optional().describe("비활성화 여부"),
-    inputProps: z.string().optional().describe(`inputProps 객체(JSX/문자열).
-- input 엘리먼트에 직접 전달할 속성 객체입니다.
-- 예: { readOnly: true }, { inputMode: 'numeric', pattern: '[0-9]*' }
-- 여러 줄 객체 사용 시:
-  {
-    inputMode: 'numeric',
-    pattern: '[0-9]*',
-    readOnly: true
-  }
-- 사용 예시:
-  <OpsnowCommonTextField
-    placeholder="Read Only"
-    value="Read only text"
-    inputProps={{ readOnly: true }}
-    variant="outlined"
-  />
-  <OpsnowCommonTextField
-    placeholder="숫자만 입력"
-    inputProps={{ inputMode: 'numeric', pattern: '[0-9]*' }}
-    variant="outlined"
-  />
-
----
-
-※ 고급 활용: InputProps와의 차이 및 비밀번호 보기/숨기기 예시
-- inputProps는 input 엘리먼트에 직접 적용되는 속성(HTML 속성, 예: readOnly, inputMode 등)만 지정합니다.
-- InputProps는 MUI TextField의 고급 확장 속성으로, input의 시작/끝에 커스텀 요소(아이콘, 버튼 등)를 추가할 때 사용합니다.
-- 예시(비밀번호 보기/숨기기 토글):
-  <OpsnowCommonTextField
-    placeholder="비밀번호를 입력하세요"
-    variant="outlined"
-    type={showPassword ? 'text' : 'password'}
-    value={password}
-    onChange={(e) => setPassword(e.target.value)}
-    InputProps={{
-      endAdornment: (
-        <InputAdornment position="end">
-          <IconButton
-            aria-label={showPassword ? '비밀번호 숨기기' : '비밀번호 보이기'}
-            onClick={handleToggleShow}
-            onMouseDown={handleMouseDown}
-            edge="end"
-          >
-            {showPassword ? <VisibilityOff /> : <Visibility />}
-          </IconButton>
-        </InputAdornment>
-      ),
-    }}
-  />
-- InputProps를 활용하면 input 우측(end)에 아이콘 버튼 등 다양한 커스텀 요소를 배치할 수 있습니다.
-`),
-    adornmentLabel: z.string().optional().describe("입력 필드 시작 또는 끝 부분에 표시될 텍스트 장식"),
-    adornmentIconName: z.enum(Object.keys(IconNamesMap)).optional().describe(generateIconDescription({ format: 'nested' })),
-    adornmentPosition: z.enum(["start", "end"]).optional().describe("장식(adornment)의 위치"),
-    readOnly: z.boolean().optional().describe("읽기 전용 상태 여부"),
-});
-// Avatar 컴포넌트 관련 스키마 정의
-export const AvatarSchema = z.object({
-    src: z.string().optional().describe('이미지 URL'),
-    alt: z.string().optional().describe('이미지 대체 텍스트'),
-    size: z.enum(['xsmall', 'small', 'medium', 'large']).optional().describe('아바타 크기'),
-    variant: z.enum(['circular', 'rounded', 'square']).optional().describe('아바타 형태'),
-    showBadge: z.boolean().optional().describe('뱃지 표시 여부'),
-    sx: z.string().optional().describe('MUI sx 스타일 객체(JSX/문자열)'),
-    onClick: z.string().optional().describe('클릭 이벤트 핸들러'),
-    children: z.string().optional().describe('아바타 내부에 표시할 텍스트/JSX (예: 이름, 아이콘 등)'),
-});
-// Checkbox 컴포넌트 관련 스키마 정의
-export const CheckboxSchema = z.object({
-    color: z.enum(["primary", "secondary", "error", "success", "warning", "info", "default"]).optional().describe("체크박스 색상"),
-    checked: z.string().describe("체크 여부를 나타내는 상태 변수. 예: 'isChecked'"),
-    onChange: z.string().describe("체크 상태 변경 시 호출될 함수. 예: '(e) => setIsChecked(e.target.checked)'"),
-    name: z.string().optional().describe("체크박스 이름"),
-    label: z.string().optional().describe("체크박스 라벨"),
-    size: z.enum(["small", "medium", "large"]).optional().describe("체크박스 크기"),
-    disabled: z.boolean().optional().describe("비활성화 여부"),
-    indeterminate: z.string().optional().describe("부분 선택 상태 여부 (부모 체크박스 등)"),
-});
-// RadioGroup 컴포넌트 관련 스키마 정의
-export const RadioGroupSchema = z.object({
-    options: z.string().describe("라디오 옵션 배열 변수명 (예: options)"),
-    color: z.enum(["primary", "secondary", "error", "success", "warning", "info", "default"]).optional().describe("라디오 색상"),
-    name: z.string().describe("라디오 그룹 이름"),
-    defaultValue: z.string().optional().describe("기본 선택값"),
-    row: z.boolean().optional().describe("가로 배치 여부"),
-    size: z.enum(["small", "medium", "large"]).optional().describe("라디오 크기"),
-});
-// Collapse 컴포넌트 관련 스키마 정의
-export const CollapseSchema = z.object({
-    label: z.string().describe("토글 라벨 텍스트"),
-    defaultExpanded: z.boolean().optional().describe("기본 확장 여부"),
-    children: z.string().describe("Collapse 내부에 들어갈 JSX/텍스트"),
-});
-// Slider 컴포넌트 관련 스키마 정의
-export const SliderSchema = z.object({
-    defaultValue: z.string().optional().describe("기본 값 (string, 단일 값: '30', 범위: '[10, 50]')"),
-    color: z.enum(["primary", "secondary"]).optional().describe("슬라이더 색상"),
-    size: z.enum(["small", "medium"]).optional().describe("슬라이더 크기"),
-    step: z.number().optional().describe("슬라이더 step 값"),
-    marks: z.string().optional().describe(`마크 표시 여부/마크 배열(string, 예: 'true', 'false', 또는 아래와 같은 배열 문자열)
-
-예시1 (달러):
-'[{ "value": 1, "label": "$1" }, { "value": 100, "label": "$100" }, { "value": 200, "label": "$200" }, { "value": 300, "label": "$300" }]'
-
-예시2 (온도):
-'[{ "value": 0, "label": "0°C" }, { "value": 20, "label": "20°C" }, { "value": 37, "label": "37°C" }, { "value": 100, "label": "100°C" }]'
-`),
-    valueLabelDisplay: z.enum(["on", "auto", "off"]).optional().describe("값 라벨 표시 방식"),
-    min: z.number().optional().describe("최소값"),
-    max: z.number().optional().describe("최대값"),
-    disabled: z.boolean().optional().describe("비활성화 여부"),
-    orientation: z.enum(["horizontal", "vertical"]).optional().describe("슬라이더 방향"),
-    getAriaValueText: z.string().optional().describe("aria value 텍스트 함수 변수명"),
-    ariaLabel: z.string().optional().describe("aria-label 속성"),
-    sx: z.string().optional().describe("MUI sx 스타일 객체(JSX/문자열)"),
-});
-// Link 컴포넌트 관련 스키마 정의
-export const LinkSchema = z.object({
-    href: z.string().describe("링크 주소(href)"),
-    color: z.enum(["primary", "inherit"]).optional().describe("링크 색상"),
-    underline: z.enum(["always", "hover", "none"]).optional().describe("밑줄 표시 방식"),
-    onClick: z.string().optional().describe("클릭 이벤트 핸들러"),
-    children: z.string().describe("링크 내부 텍스트/JSX"),
-});
-// ToggleButtonGroup 컴포넌트 관련 스키마 정의
-export const ToggleButtonSchema = z.object({
-    value: z.string().describe('선택된 값'),
-    onChange: z.string().describe('값 변경 핸들러 함수명'),
-    size: z.enum(['large', 'medium', 'small']).optional().describe('토글 버튼 크기'),
-    exclusive: z.boolean().optional().describe('단일 선택 여부'),
-    disabled: z.boolean().optional().describe('비활성화 여부'),
-    theme: z.enum(['new']).optional().describe('테마'),
-    buttons: z.array(z.object({
-        value: z.string().describe('버튼 값'),
-        label: z.string().optional().describe('버튼 라벨'),
-        iconName: z.enum(Object.keys(IconNamesMap)).optional().describe(generateIconDescription({ format: 'nested' })),
-        iconOnly: z.boolean().optional().describe('아이콘만 표시'),
-        iconPosition: z.enum(['left', 'right']).optional().describe('아이콘 위치'),
-        disabled: z.boolean().optional().describe('비활성화 여부'),
-    })).describe('토글 버튼 목록'),
-});
-// TreeView 컴포넌트 관련 스키마 정의
-export const TreeViewSchema = z.object({
-    data: z.string().describe(`트리 데이터 배열 변수명 (예: sampleTreeData)
-
-트리 데이터 구조 예시:
-- id: 노드 고유 ID
-- label: 노드 라벨 텍스트
-- muiIconName: Material-UI 아이콘 이름 (예: 'settings', 'person', 'lock' 등)
-- children: 자식 노드 배열 (선택사항)
-- data: 노드에 추가 데이터 (선택사항, 예: { memberCount: 5 })
-
-예시 데이터:
-[
-  {
-    id: 'c1',
-    label: 'Settings',
-    muiIconName: 'settings',
-    children: [
-      { id: 'c11', label: 'Profile', muiIconName: 'person' },
-      { id: 'c12', label: 'Security', muiIconName: 'lock' }
-    ]
-  }
-]`),
-    totalLabel: z.string().optional().describe("최상단 Total 라벨 텍스트"),
-    totalIconName: z.enum(Object.keys(IconNamesMap)).optional().describe(generateIconDescription({ format: 'nested' })),
-    showTotal: z.boolean().optional().describe("Total 라벨 표시 여부 (기본값: true)"),
-    searchable: z.boolean().optional().describe("검색 기능 활성화 여부 (기본값: true)"),
-    defaultExpandAll: z.boolean().optional().describe("기본 전체 확장 여부 (기본값: false)"),
-    checkboxSelection: z.boolean().optional().describe("체크박스 선택 모드 활성화"),
-    multiSelect: z.boolean().optional().describe("다중 선택 허용 여부"),
-    onCheckedItemsChange: z.string().optional().describe("체크된 항목 변경 이벤트 핸들러 (예: handleMultiCheckedItemsChange)"),
-    defaultCheckedItems: z.string().optional().describe("기본 체크된 항목 배열 상태 변수명 (예: multiCheckedItems)"),
-    onTotalClick: z.string().optional().describe("Total 클릭 이벤트 핸들러 함수명 (예: handleTotalClick)"),
-    renderTotalRightContent: z.string().optional().describe("Total 우측에 표시할 JSX 코드 문자열 (함수 형태)"),
-    renderRightContent: z.string().optional().describe("각 노드 우측에 표시할 JSX 코드 문자열 (함수 형태, node 파라미터 사용)"),
-    onNodeClick: z.string().optional().describe("노드 클릭 이벤트 핸들러 함수명 (예: handleNodeClick)"),
-    selectedNodeId: z.string().optional().describe("선택된 노드 ID 상태 변수명 (예: selectedNode?.id)"),
-});
-// InsightCard 컴포넌트 관련 스키마 정의
-export const InsightCardSchema = z.object({
-    loading: z.boolean().optional().describe("로딩 상태 여부 (기본값: false)"),
-    loadingStage: z.enum(["1", "2", "3"]).optional().describe("현재 로딩 단계 (1, 2, 3 중 하나, 기본값: 1)"),
-    loadingStagesMessages: z.string().optional().describe("커스텀 로딩 메시지 배열 변수명 (예: loadingMessages)"),
-    insightText: z.string().optional().describe("AI insight 텍스트 내용"),
-    title: z.string().optional().describe("타일 제목 (기본값: 'Opsnow Insight AI')"),
-    subtitle: z.string().optional().describe("타일 부제목 (기본값: 'AI-powered analysis and recommendations')"),
-    onDownload: z.string().optional().describe("커스텀 다운로드 콜백 함수명 (예: handleDownload)"),
-    sx: z.string().optional().describe("MUI sx 스타일 객체(JSX/문자열)"),
-});
-// InsightContent 컴포넌트 관련 스키마 정의 (타일 없이 콘텐츠만)
-export const InsightContentSchema = z.object({
-    loading: z.boolean().optional().describe("로딩 상태 여부 (기본값: false)"),
-    loadingStage: z.enum(["1", "2", "3"]).optional().describe("현재 로딩 단계 (1, 2, 3 중 하나, 기본값: 1)"),
-    loadingStagesMessages: z.string().optional().describe("커스텀 로딩 메시지 배열 변수명 (예: loadingMessages)"),
-    insightText: z.string().optional().describe("AI insight 텍스트 내용"),
-    collapsed: z.boolean().optional().describe("콘텐츠 접힘 상태 (외부에서 제어, 기본값: false)"),
-    emptyMessage: z.string().optional().describe("insightText가 없을 때 표시할 빈 메시지"),
-    sx: z.string().optional().describe("MUI sx 스타일 객체(JSX/문자열)"),
-});
-// Forms 컴포넌트 함수 - 배열 반환
-export function createFormsComponent() {
-    return [
-        {
-            name: "createButton",
-            description: `버튼 컴포넌트 - 다양한 스타일과 옵션 지원
-
-      - iconName 또는 muiIconName 프로퍼티에 아이콘 이름을 문자열로 전달하여 버튼에 아이콘을 추가할 수 있습니다.
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonButton } = useCommonComponents();
-      \`\`\``,
-            parameters: ButtonSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.label && !args.iconOnly)
-                    props.push(`label="${args.label}"`);
-                if (args.size)
-                    props.push(`size="${args.size}"`);
-                if (args.color)
-                    props.push(`color="${args.color}"`);
-                if (args.variant)
-                    props.push(`variant="${args.variant}"`);
-                if (args.theme)
-                    props.push(`theme="${args.theme}"`);
-                if (args.iconName)
-                    props.push(`iconName="${args.iconName}"`);
-                if (args.muiIconName)
-                    props.push(`muiIconName="${args.muiIconName}"`);
-                if (args.iconPosition)
-                    props.push(`iconPosition="${args.iconPosition}"`);
-                if (args.iconOnly)
-                    props.push(`iconOnly`);
-                if (args.disabled)
-                    props.push(`disabled`);
-                if (args.onClick)
-                    props.push(`onClick={${args.onClick}}`);
-                const code = `<OpsnowCommonButton ${props.join(' ')} />`;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createBadge",
-            description: `뱃지 컴포넌트 - 숫자, dot, 색상, children 지원
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonBadge } = useCommonComponents();
-      \`\`\``,
-            parameters: BadgeSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.badgeContent !== undefined)
-                    props.push(`badgeContent={${args.badgeContent}}`);
-                if (args.color)
-                    props.push(`color="${args.color}"`);
-                if (args.variant && args.variant !== "standard")
-                    props.push(`variant="${args.variant}"`);
-                if (args.showZero)
-                    props.push(`showZero={true}`);
-                let code = "";
-                if (args.children) {
-                    code = `<OpsnowCommonBadge ${props.join(' ')}>\n  ${args.children}\n</OpsnowCommonBadge>`;
-                }
-                else {
-                    code = `<OpsnowCommonBadge ${props.join(' ')} />`;
-                }
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createTextarea",
-            description: `Textarea 컴포넌트 - 여러 줄의 텍스트 입력을 위한 컴포넌트입니다.
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonTextarea } = useCommonComponents();
-      \`\`\``,
-            parameters: TextareaSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.placeholder)
-                    props.push(`placeholder="${args.placeholder}"`);
-                if (args.value)
-                    props.push(`value={${args.value}}`);
-                if (args.onChange)
-                    props.push(`onChange={${args.onChange}}`);
-                if (args.variant && args.variant !== 'outlined')
-                    props.push(`variant="${args.variant}"`);
-                if (args.rows)
-                    props.push(`rows={${args.rows}}`);
-                if (args.autoSize)
-                    props.push(`autoSize`);
-                if (args.helperText)
-                    props.push(`helperText="${args.helperText}"`);
-                const code = `<OpsnowCommonTextarea ${props.join(' ')} />`;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createSwitch",
-            description: `Switch 컴포넌트 - On/Off 토글 스위치를 제공합니다.
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonSwitch } = useCommonComponents();
-      \`\`\``,
-            parameters: SwitchSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.checked)
-                    props.push(`checked={${args.checked}}`);
-                if (args.onChange)
-                    props.push(`onChange={${args.onChange}}`);
-                if (args.color)
-                    props.push(`color="${args.color}"`);
-                if (args.size)
-                    props.push(`size="${args.size}"`);
-                if (args.disabled)
-                    props.push(`disabled`);
-                const code = `<OpsnowCommonSwitch ${props.join(' ')} />`;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createChip",
-            description: `Chip 컴포넌트 - 다양한 색상, 크기, 스타일, 아이콘, Avatar, 삭제 기능 등 지원
-      
-      - deleteIcon, avatar 등은 JSX로 전달할 수 있습니다.
-      - onClick, onDelete 등 이벤트 핸들러도 지원합니다.
-      
-       **import:**
-      \`\`\`javascript
-      import { useCommonComponents, useOpsnowCommonIcons } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonChip } = useCommonComponents();
-      const { OpsnowCommonIcon } = useOpsnowCommonIcons();
-      \`\`\``,
-            parameters: ChipSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.label)
-                    props.push(`label=\"${args.label}\"`);
-                if (args.color && args.color !== 'default')
-                    props.push(`color=\"${args.color}\"`);
-                if (args.size)
-                    props.push(`size=\"${args.size}\"`);
-                if (args.variant)
-                    props.push(`variant=\"${args.variant}\"`);
-                if (args.disabled)
-                    props.push(`disabled`);
-                if (args.avatar)
-                    props.push(`avatar={${args.avatar}}`);
-                if (args.deleteIcon)
-                    props.push(`deleteIcon={${args.deleteIcon}}`);
-                if (args.onClick)
-                    props.push(`onClick={${args.onClick}}`);
-                if (args.onDelete)
-                    props.push(`onDelete={${args.onDelete}}`);
-                const code = `<OpsnowCommonChip ${props.join(' ')} />`;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createTextField",
-            description: `TextField 컴포넌트 - 다양한 스타일, 어도먼트, 에러/비활성/읽기전용 등 지원
-      
-      - adornmentLabel, adornmentIconName, adornmentPosition 등으로 텍스트/아이콘 장식 지원
-      - inputProps, InputProps 등 MUI TextField의 확장 옵션 지원
-      
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonTextField } = useCommonComponents();
-      \`\`\``,
-            parameters: TextFieldSchema,
-            handler: async (args) => {
-                const props = [];
-                let inputPropsBlock = '';
-                let InputPropsBlock = '';
-                if (args.placeholder)
-                    props.push(`placeholder=\"${args.placeholder}\"`);
-                if (args.value)
-                    props.push(`value={${args.value}}`);
-                if (args.onChange)
-                    props.push(`onChange={${args.onChange}}`);
-                if (args.variant && args.variant !== "standard")
-                    props.push(`variant=\"${args.variant}\"`);
-                if (args.type)
-                    props.push(`type=\"${args.type}\"`);
-                if (args.size)
-                    props.push(`size=\"${args.size}\"`);
-                if (args.error)
-                    props.push(`error`);
-                if (args.helperText)
-                    props.push(`helperText=\"${args.helperText}\"`);
-                if (args.disabled)
-                    props.push(`disabled`);
-                if (args.adornmentLabel)
-                    props.push(`adornmentLabel=\"${args.adornmentLabel}\"`);
-                if (args.adornmentIconName)
-                    props.push(`adornmentIconName=\"${args.adornmentIconName}\"`);
-                if (args.adornmentPosition)
-                    props.push(`adornmentPosition=\"${args.adornmentPosition}\"`);
-                if (args.readOnly)
-                    props.push(`readOnly`);
-                // inputProps, InputProps 멀티라인/JSX 대응
-                if (args.inputProps) {
-                    if (args.inputProps.trim().startsWith('{') && args.inputProps.includes('\n')) {
-                        inputPropsBlock = `inputProps=${args.inputProps}`;
-                    }
-                    else {
-                        props.push(`inputProps={${args.inputProps}}`);
-                    }
-                }
-                // 멀티라인 여부에 따라 코드 조립
-                let code = '';
-                if (inputPropsBlock || InputPropsBlock) {
-                    code = `<OpsnowCommonTextField\n  ${props.join('\n  ')}\n  ${inputPropsBlock ? inputPropsBlock + '\n  ' : ''}${InputPropsBlock ? InputPropsBlock + '\n' : ''}/>`;
-                }
-                else {
-                    code = `<OpsnowCommonTextField ${props.join(' ')} />`;
-                }
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createAvatar",
-            description: `Avatar 컴포넌트 - 텍스트, 아이콘, 이미지, 뱃지, 다양한 크기/모양, 클릭 등 지원\n\n- children에 텍스트, 아이콘(JSX), 이니셜 등 자유롭게 전달 가능\n- showBadge, variant, sx 등 다양한 옵션 지원\n\n**import:**\n\u0060\u0060\u0060javascript\nimport { useCommonComponents, useOpsnowCommonIcons } from '@opsnow-common/opsnow-finops-common-ui-loader';\nconst { OpsnowCommonAvatar } = useCommonComponents();\nconst { OpsnowCommonIcon } = useOpsnowCommonIcons();\n\u0060\u0060\u0060`,
-            parameters: AvatarSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.src)
-                    props.push(`src=\"${args.src}\"`);
-                if (args.alt)
-                    props.push(`alt=\"${args.alt}\"`);
-                if (args.size)
-                    props.push(`size=\"${args.size}\"`);
-                if (args.variant)
-                    props.push(`variant=\"${args.variant}\"`);
-                if (args.showBadge)
-                    props.push(`showBadge`);
-                if (args.sx)
-                    props.push(`sx={${args.sx}}`);
-                if (args.onClick)
-                    props.push(`onClick={${args.onClick}}`);
-                let code = '';
-                if (args.children) {
-                    // children이 여러 줄 JSX면 줄바꿈 처리
-                    if (args.children.trim().startsWith('<')) {
-                        code = `<OpsnowCommonAvatar ${props.join(' ')}>
-                      ${args.children}
-                    </OpsnowCommonAvatar>`;
-                    }
-                    else {
-                        code = `<OpsnowCommonAvatar ${props.join(' ')}>${args.children}</OpsnowCommonAvatar>`;
-                    }
-                }
-                else {
-                    code = `<OpsnowCommonAvatar ${props.join(' ')} />`;
-                }
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createCheckbox",
-            description: `Checkbox 컴포넌트 - 다양한 색상, 크기, 라벨, 부분선택 등 지원
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonCheckbox } = useCommonComponents();
-      \`\`\``,
-            parameters: CheckboxSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.color)
-                    props.push(`color=\"${args.color}\"`);
-                if (args.checked)
-                    props.push(`checked={${args.checked}}`);
-                if (args.onChange)
-                    props.push(`onChange={${args.onChange}}`);
-                if (args.name)
-                    props.push(`name=\"${args.name}\"`);
-                if (args.label)
-                    props.push(`label=\"${args.label}\"`);
-                if (args.size)
-                    props.push(`size=\"${args.size}\"`);
-                if (args.disabled)
-                    props.push(`disabled`);
-                if (args.indeterminate)
-                    props.push(`indeterminate={${args.indeterminate}}`);
-                const code = `<OpsnowCommonCheckbox ${props.join(' ')} />`;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createRadioGroup",
-            description: `RadioGroup 컴포넌트 - 옵션, 색상, 크기, 가로/세로 배치 등 지원
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonRadioGroup } = useCommonComponents();
-      \`\`\``,
-            parameters: RadioGroupSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.options)
-                    props.push(`options={${args.options}}`);
-                if (args.color)
-                    props.push(`color=\"${args.color}\"`);
-                if (args.name)
-                    props.push(`name=\"${args.name}\"`);
-                if (args.defaultValue)
-                    props.push(`defaultValue=\"${args.defaultValue}\"`);
-                if (args.row)
-                    props.push(`row`);
-                if (args.size)
-                    props.push(`size=\"${args.size}\"`);
-                const code = `<OpsnowCommonRadioGroup ${props.join(' ')} />`;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createCollapse",
-            description: `Collapse 컴포넌트 - 토글 라벨, 기본 확장, children 등 지원
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonCollapse } = useCommonComponents();
-      \`\`\``,
-            parameters: CollapseSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.label)
-                    props.push(`label=\"${args.label}\"`);
-                if (args.defaultExpanded)
-                    props.push(`defaultExpanded`);
-                let code = '';
-                if (args.children && args.children.trim().startsWith('<')) {
-                    code = `<OpsnowCommonCollapse ${props.join(' ')}>` + `\n  ${args.children}\n</OpsnowCommonCollapse>`;
-                }
-                else {
-                    code = `<OpsnowCommonCollapse ${props.join(' ')}>${args.children || ''}</OpsnowCommonCollapse>`;
-                }
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createSlider",
-            description: `Slider 컴포넌트 - 단일/범위, 색상, 크기, 마크, 라벨, 수직/수평 등 지원
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonSlider } = useCommonComponents();
-      \`\`\``,
-            parameters: SliderSchema,
-            handler: async (args) => {
-                const props = [];
-                // defaultValue 파싱: string -> number | number[] | string
-                if (args.defaultValue !== undefined) {
-                    let parsedValue = undefined;
-                    try {
-                        if (args.defaultValue.trim().startsWith('[')) {
-                            parsedValue = JSON.parse(args.defaultValue);
-                        }
-                        else if (args.defaultValue.trim() !== '') {
-                            const num = Number(args.defaultValue);
-                            parsedValue = isNaN(num) ? args.defaultValue : num;
-                        }
-                    }
-                    catch (e) {
-                        parsedValue = args.defaultValue;
-                    }
-                    if (parsedValue !== undefined) {
-                        props.push(`defaultValue={${JSON.stringify(parsedValue)}}`);
-                    }
-                }
-                // marks 파싱: string -> boolean | any[] | string
-                if (args.marks !== undefined) {
-                    let marksValue = args.marks;
-                    if (args.marks === "true")
-                        marksValue = true;
-                    else if (args.marks === "false")
-                        marksValue = false;
-                    else if (args.marks.trim().startsWith("[")) {
-                        try {
-                            marksValue = JSON.parse(args.marks);
-                        }
-                        catch {
-                            marksValue = args.marks;
-                        }
-                    }
-                    props.push(`marks={${typeof marksValue === "string" ? marksValue : JSON.stringify(marksValue)}}`);
-                }
-                if (args.color)
-                    props.push(`color=\"${args.color}\"`);
-                if (args.size)
-                    props.push(`size=\"${args.size}\"`);
-                if (args.step !== undefined)
-                    props.push(`step={${args.step}}`);
-                if (args.valueLabelDisplay)
-                    props.push(`valueLabelDisplay=\"${args.valueLabelDisplay}\"`);
-                if (args.min !== undefined)
-                    props.push(`min={${args.min}}`);
-                if (args.max !== undefined)
-                    props.push(`max={${args.max}}`);
-                if (args.disabled)
-                    props.push(`disabled`);
-                if (args.orientation)
-                    props.push(`orientation=\"${args.orientation}\"`);
-                if (args.getAriaValueText)
-                    props.push(`getAriaValueText={${args.getAriaValueText}}`);
-                if (args.ariaLabel)
-                    props.push(`aria-label=\"${args.ariaLabel}\"`);
-                if (args.sx)
-                    props.push(`sx={${args.sx}}`);
-                const code = `<OpsnowCommonSlider ${props.join(' ')} />`;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createLink",
-            description: `Link 컴포넌트 - 다양한 색상, 밑줄, 클릭, children 등 지원
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonLink } = useCommonComponents();
-      \`\`\``,
-            parameters: LinkSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.href)
-                    props.push(`href=\"${args.href}\"`);
-                if (args.color)
-                    props.push(`color=\"${args.color}\"`);
-                if (args.underline)
-                    props.push(`underline=\"${args.underline}\"`);
-                if (args.onClick)
-                    props.push(`onClick={${args.onClick}}`);
-                let code = '';
-                if (args.children && args.children.trim().startsWith('<')) {
-                    code = `<OpsnowCommonLink ${props.join(' ')}>` + `\n  ${args.children}\n</OpsnowCommonLink>`;
-                }
-                else {
-                    code = `<OpsnowCommonLink ${props.join(' ')}>${args.children || ''}</OpsnowCommonLink>`;
-                }
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createToggleButton",
-            description: `ToggleButtonGroup 컴포넌트 - 다양한 스타일, 아이콘, 단일/다중 선택 지원
-
-      - 버튼별 아이콘, 라벨, 아이콘 위치, 아이콘만 표시 등 다양한 옵션 지원
-      - exclusive: true로 단일 선택, false 또는 미설정 시 다중 선택
-      - theme, disabled 등 다양한 스타일 속성 지원
-
-      **import 예시:**
-      \`\`\`javascript
-      import { useCommonComponents, useOpsnowCommonIcons } from '@opsnow-common/opsnow-finops-common-ui-loader';
-
-      const { OpsnowCommonToggleButton, OpsnowCommonToggleButtonGroup } =useCommonComponents()
-      const { OpsnowCommonIcon } = useOpsnowCommonIcons()
-      \`\`\``,
-            parameters: ToggleButtonSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.value)
-                    props.push(`value={${args.value}}`);
-                if (args.onChange)
-                    props.push(`onChange={${args.onChange}}`);
-                if (args.size)
-                    props.push(`size=\"${args.size}\"`);
-                if (args.exclusive)
-                    props.push(`exclusive`);
-                if (args.disabled)
-                    props.push(`disabled`);
-                if (args.theme)
-                    props.push(`theme=\"${args.theme}\"`);
-                // 버튼 목록 생성
-                const buttonCodes = args.buttons.map(btn => {
-                    const btnProps = [];
-                    btnProps.push(`value=\"${btn.value}\"`);
-                    if (btn.label)
-                        btnProps.push(btn.iconName ? '' : btn.label); // label은 children으로 처리
-                    if (btn.iconName)
-                        btnProps.push(`<OpsnowCommonIcon iconName=\"${btn.iconName}\" />`);
-                    if (btn.iconOnly)
-                        btnProps.push(`iconOnly`);
-                    if (btn.iconPosition)
-                        btnProps.push(`iconPosition=\"${btn.iconPosition}\"`);
-                    if (btn.disabled)
-                        btnProps.push(`disabled`);
-                    // children 조립
-                    let children = btn.label ? btn.label : '';
-                    if (btn.iconName) {
-                        children = `<OpsnowCommonIcon iconName=\"${btn.iconName}\" />${btn.label ? ' ' + btn.label : ''}`;
-                    }
-                    return `  <OpsnowCommonToggleButton ${btnProps.filter(p => !p.startsWith('<')).join(' ')}>${children}</OpsnowCommonToggleButton>`;
-                }).join('\n');
-                const code = `<OpsnowCommonToggleButtonGroup\n  ${props.join('\n  ')}\n>\n${buttonCodes}\n</OpsnowCommonToggleButtonGroup>`;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createTreeView",
-            description: `TreeView 컴포넌트 - 계층 구조 데이터를 트리 형태로 표시
-
-      - data: 트리 데이터 배열 변수
-      - totalLabel, totalIconName: 최상단 Total 표시 옵션
-      - renderTotalRightContent, renderRightContent: 각 노드의 우측에 커스텀 콘텐츠 렌더링
-      - onTotalClick, onNodeClick: 클릭 이벤트 핸들러
-      - selectedNodeId: 선택된 노드 ID
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonTreeView } = useCommonComponents();
-      \`\`\``,
-            parameters: TreeViewSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.data)
-                    props.push(`data={${args.data}}`);
-                if (args.totalLabel)
-                    props.push(`totalLabel=\"${args.totalLabel}\"`);
-                if (args.totalIconName)
-                    props.push(`totalIconName=\"${args.totalIconName}\"`);
-                if (args.showTotal !== undefined)
-                    props.push(`showTotal={${args.showTotal}}`);
-                if (args.searchable !== undefined)
-                    props.push(`searchable={${args.searchable}}`);
-                if (args.defaultExpandAll !== undefined)
-                    props.push(`defaultExpandAll={${args.defaultExpandAll}}`);
-                if (args.checkboxSelection !== undefined)
-                    props.push(`checkboxSelection={${args.checkboxSelection}}`);
-                if (args.multiSelect !== undefined)
-                    props.push(`multiSelect={${args.multiSelect}}`);
-                if (args.onCheckedItemsChange)
-                    props.push(`onCheckedItemsChange={${args.onCheckedItemsChange}}`);
-                if (args.defaultCheckedItems)
-                    props.push(`defaultCheckedItems={${args.defaultCheckedItems}}`);
-                if (args.onTotalClick)
-                    props.push(`onTotalClick={${args.onTotalClick}}`);
-                if (args.renderTotalRightContent)
-                    props.push(`renderTotalRightContent={${args.renderTotalRightContent}}`);
-                if (args.renderRightContent)
-                    props.push(`renderRightContent={${args.renderRightContent}}`);
-                if (args.onNodeClick)
-                    props.push(`onNodeClick={${args.onNodeClick}}`);
-                if (args.selectedNodeId)
-                    props.push(`selectedNodeId={${args.selectedNodeId}}`);
-                const code = `<OpsnowCommonTreeView\n  ${props.join('\n  ')}\n/>`;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createInsightCard",
-            description: `InsightCard 컴포넌트 - AI 인사이트, 로딩 상태 등 지원
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonInsightCard } = useCommonComponents();
-      \`\`\``,
-            parameters: InsightCardSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.loading !== undefined)
-                    props.push(`loading={${args.loading}}`);
-                if (args.loadingStage !== undefined)
-                    props.push(`loadingStage={${args.loadingStage}}`);
-                if (args.loadingStagesMessages)
-                    props.push(`loadingStagesMessages={${args.loadingStagesMessages}}`);
-                if (args.insightText)
-                    props.push(`insightText="${args.insightText}"`);
-                if (args.title)
-                    props.push(`title="${args.title}"`);
-                if (args.subtitle)
-                    props.push(`subtitle="${args.subtitle}"`);
-                if (args.onDownload)
-                    props.push(`onDownload={${args.onDownload}}`);
-                if (args.sx)
-                    props.push(`sx={${args.sx}}`);
-                const code = `<OpsnowCommonInsightCard\n  ${props.join('\n  ')}\n/>`;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        },
-        {
-            name: "createInsightContent",
-            description: `InsightContent 컴포넌트 - 타일 없이 AI 인사이트 콘텐츠만 표시
-
-      **import:**
-      \`\`\`javascript
-      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
-      const { OpsnowCommonInsightContent } = useCommonComponents();
-      \`\`\``,
-            parameters: InsightContentSchema,
-            handler: async (args) => {
-                const props = [];
-                if (args.loading !== undefined)
-                    props.push(`loading={${args.loading}}`);
-                if (args.loadingStage !== undefined)
-                    props.push(`loadingStage={${args.loadingStage}}`);
-                if (args.loadingStagesMessages)
-                    props.push(`loadingStagesMessages={${args.loadingStagesMessages}}`);
-                if (args.insightText)
-                    props.push(`insightText="${args.insightText}"`);
-                if (args.collapsed !== undefined)
-                    props.push(`collapsed={${args.collapsed}}`);
-                if (args.emptyMessage)
-                    props.push(`emptyMessage="${args.emptyMessage}"`);
-                if (args.sx)
-                    props.push(`sx={${args.sx}}`);
-                const code = `<OpsnowCommonInsightContent\n  ${props.join('\n  ')}\n/>`;
-                return {
-                    content: [
-                        {
-                            type: "text",
-                            text: `\`\`\`jsx\n${code}\n\`\`\``
-                        }
-                    ]
-                };
-            }
-        }
-    ];
-}