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

package/build/components/opsnow-common-data-status.js

@@ -0,0 +1,116 @@
+import { z } from "zod";
+import { IconNamesMap, generateIconDescription } from "./data/icon-names.js";
+// DataStatus 컴포넌트 관련 스키마 정의
+export const DataStatusSchema = z.object({
+    headline: z
+        .string()
+        .optional()
+        .describe("데이터 상태 아이콘 위에 크게 보이는 헤드라인 메시지"),
+    type: z
+        .enum(["loading", "noData", "noSearchResults", "withAction", "error"])
+        .describe("데이터 상태 및 화면에 노출 되어야하는 데이터 상태 타입"),
+    title: z
+        .string()
+        .optional()
+        .describe("데이터 상태 아이콘 아래에서 크게 보이는 제목 메시지"),
+    useMuiIcon: z.boolean().default(false).describe("MUI 아이콘 사용 여부"),
+    description: z
+        .string()
+        .optional()
+        .describe("제목 아래 작게 보이는 자세한 설명(데이터 상태 메시지)"),
+    iconName: z.string().optional().describe("아이콘 이름"),
+    buttonProps: z
+        .object({
+        label: z.string().describe("버튼 라벨"),
+        disabled: z.boolean().default(true).describe("버튼 활성화 여부"),
+        action: z
+            .string()
+            .optional()
+            .describe("버튼 클릭 시 실행할 함수(기존 onConfirm () => void 오버라이드)"),
+        size: z
+            .enum(["small", "medium", "large"])
+            .default("large")
+            .describe("버튼 크기"),
+        muiIconName: z.string().optional().describe("MUI 아이콘 이름"),
+        iconName: z
+            .enum(Object.keys(IconNamesMap))
+            .describe(generateIconDescription({ format: "nested" }))
+            .optional()
+            .describe("아이콘 이름"),
+        iconPosition: z.enum(["right", "left"]).describe("버튼 위치"),
+    })
+        .optional()
+        .describe("버튼 속성"),
+}).describe("데이터 상태 컴포넌트 - createIconsComponent에서 iconName을 반드시 참조하여 string으로 입력");
+// DataStatus 컴포넌트 함수 - 배열 반환
+export function createDataStatusComponent() {
+    return [
+        {
+            name: "createDataStatus",
+            description: `데이터 상태 컴포넌트 - 로딩, 성공, 에러, no Data, 검색 결과 없음 상태 표시
+      **style 적용 시:**
+       div에 style 적용 보다는 mui/material의 Box, Stack, Typography 컴포넌트를 사용하여 스타일을 적용하는 것을 권장합니다.
+      **버튼 액션 적용 시:**
+       버튼 클릭 시 실행할 onConfirm 함수를 미리 정의한 후, buttonProps에서 참조하여 사용합니다.
+       onConfirm은 콜백 함수이므로 사용자가 직접 구현해서 전달해야 합니다.
+       사용 예시: buttonProps={{onConfirm, label: "Add AWS Account", iconName: "ArrowRight"}}
+      **import:**
+        \`\`\`javascript
+        import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+        const { OpsnowCommonDataStatus } = useCommonComponents();
+        \`\`\``,
+            parameters: DataStatusSchema,
+            handler: async (args) => {
+                // 데이터 상태 컴포넌트 로직 구현
+                let functionDefinitions = "";
+                if (args.type === "withAction") {
+                    functionDefinitions += `
+          const onConfirm = () => {
+            ${args.buttonProps?.action ? args.buttonProps.action : ""}
+          }`;
+                }
+                // OpsnowCommonDataStatus Props 생성
+                const dataStatusProps = [];
+                if (args.type)
+                    dataStatusProps.push(`type="${args.type}"`);
+                if (args.title)
+                    dataStatusProps.push(`title="${args.title}"`);
+                if (args.description)
+                    dataStatusProps.push(`description={${args.description}}`);
+                if (args.iconName)
+                    dataStatusProps.push(`iconName="${args.iconName}"`);
+                if (args.buttonProps) {
+                    const buttonProps = [];
+                    if (args.buttonProps.action) {
+                        buttonProps.push(`onConfirm`);
+                    }
+                    if (args.buttonProps.label)
+                        buttonProps.push(`label: "${args.buttonProps.label}"`);
+                    if (args.buttonProps.size)
+                        buttonProps.push(`size: "${args.buttonProps.size}"`);
+                    if (!args.buttonProps.disabled)
+                        buttonProps.push(`disabled: ${!args.buttonProps.disabled}`);
+                    if (args.buttonProps.muiIconName)
+                        buttonProps.push(`muiIconName: "${args.buttonProps.muiIconName}"`);
+                    if (args.buttonProps.iconName)
+                        buttonProps.push(`iconName: "${args.buttonProps.iconName}"`);
+                    if (args.buttonProps.iconPosition)
+                        buttonProps.push(`iconPosition: "${args.buttonProps.iconPosition}"`);
+                    if (buttonProps.length > 0) {
+                        dataStatusProps.push(`buttonProps={{${buttonProps.join(", ")}}}`);
+                    }
+                }
+                let dataStatusCode = `<OpsnowCommonDataStatus ${dataStatusProps.join(" ")} />`;
+                const code = `${functionDefinitions}\n${dataStatusCode}`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``,
+                        },
+                    ],
+                };
+            },
+        },
+    ];
+}

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

@@ -0,0 +1,109 @@
+import { ButtonExamples, BadgeExamples, TextareaExamples, SwitchExamples, ChipExamples, TextFieldExamples, AvatarExamples, CheckboxExamples, RadioGroupExamples, CollapseExamples, SliderExamples, LinkExamples, TreeViewExamples, InsightCardExamples, InsightContentExamples, ToggleButtonExamples } from "./examples/opsnow-common-forms-examples-data.js";
+import { IconExamples, MuiIconExamples } from "./examples/opsnow-common-icons-examples-data.js";
+import { CalendarExamples } from "./examples/opsnow-common-calendar-examples-data.js";
+import { GaugeChartExamples, PieChartExamples, BarChartExamples, LineChartExamples, StackChartExamples, XyMultiChartExamples } from "./examples/opsnow-common-chart-examples-data.js";
+import { TooltipExamples } from "./examples/opsnow-common-tooltip-examples-data.js";
+import { DataGridExamples } from "./examples/opsnow-common-grid-examples-data.js";
+import { PopupExamples } from "./examples/opsnow-common-popup-examples-data.js";
+import { StepperExamples } from "./examples/opsnow-common-stepper-examples-data.js";
+import { StorageExamples } from "./examples/opsnow-common-storage-examples-data.js";
+import { SelectExamples } from "./examples/opsnow-common-select-examples-data.js";
+import { FileUploaderExamples } from "./examples/opsnow-common-file-upload-examples-data.js";
+import { NotificationExamples } from "./examples/opsnow-common-notification-examples-data.js";
+import { PaginationExamples } from "./examples/opsnow-common-pagination-examples-data.js";
+import { DataStatusExamples } from "./examples/opsnow-common-data-status-examples-data.js";
+import { ProgressExamples } from "./examples/opsnow-common-progress-examples-data.js";
+import { TabExamples } from "./examples/opsnow-common-tab-examples-data.js";
+import { GridLayoutExamples, MegaFilterExamples } from "./examples/opsnow-common-layout-examples-data.js";
+import { TypographyExamples } from "./examples/opsnow-common-typography-examples-data.js";
+import { AutocompleteExamples } from "./examples/opsnow-common-select-examples-data.js";
+import { z } from "zod";
+const EXAMPLES_MAP = {
+    Button: ButtonExamples,
+    Badge: BadgeExamples,
+    Textarea: TextareaExamples,
+    Switch: SwitchExamples,
+    Chip: ChipExamples,
+    TextField: TextFieldExamples,
+    Avatar: AvatarExamples,
+    Checkbox: CheckboxExamples,
+    RadioGroup: RadioGroupExamples,
+    Collapse: CollapseExamples,
+    Slider: SliderExamples,
+    Link: LinkExamples,
+    TreeView: TreeViewExamples,
+    InsightCard: InsightCardExamples,
+    InsightContent: InsightContentExamples,
+    ToggleButtonGroup: ToggleButtonExamples,
+    Icon: IconExamples,
+    MuiIcon: MuiIconExamples,
+    Calendar: CalendarExamples,
+    GaugeChart: GaugeChartExamples,
+    PieChart: PieChartExamples,
+    BarChart: BarChartExamples,
+    LineChart: LineChartExamples,
+    StackChart: StackChartExamples,
+    XyMultiChart: XyMultiChartExamples,
+    Tooltip: TooltipExamples,
+    DataGrid: DataGridExamples,
+    Popup: PopupExamples,
+    Stepper: StepperExamples,
+    Storage: StorageExamples,
+    Select: SelectExamples,
+    FileUploader: FileUploaderExamples,
+    Notification: NotificationExamples,
+    Pagination: PaginationExamples,
+    DataStatus: DataStatusExamples,
+    Progress: ProgressExamples,
+    Tab: TabExamples,
+    GridLayout: GridLayoutExamples,
+    MegaFilter: MegaFilterExamples,
+    Typography: TypographyExamples,
+    Autocomplete: AutocompleteExamples,
+};
+export const UIExamplesSchema = z.object({
+    uiType: z
+        .enum(Object.keys(EXAMPLES_MAP))
+        .describe(`UI 컴포넌트 예제명 (예: 'Button', 'Icon') 호출 가능한 예제 항목: ${Object.keys(EXAMPLES_MAP).join(", ")}`)
+});
+export function createCommonExamplesComponent() {
+    return [
+        {
+            name: "getUIExamples",
+            description: `OpsNow 공통 UI 컴포넌트 예제 목록을 반환합니다.
+uiType: string (예: 'Button', 'Icon')
+호출 가능한 예제 항목: ${Object.keys(EXAMPLES_MAP).join(', ')}
+uiType은 필수값입니다.`,
+            parameters: UIExamplesSchema,
+            handler: async (args) => {
+                // 허용된 key만 있는지 검사
+                const allowedKeys = ["uiType"];
+                const extraKeys = Object.keys(args).filter(k => !allowedKeys.includes(k));
+                if (extraKeys.length > 0) {
+                    return { content: [], error: `허용되지 않은 파라미터가 포함되어 있습니다: ${extraKeys.join(", ")}` };
+                }
+                const type = args.uiType;
+                if (!type) {
+                    return { content: [] };
+                }
+                // 단일 예제만 반환
+                const result = [];
+                const examples = EXAMPLES_MAP[type];
+                if (examples) {
+                    for (const example of examples) {
+                        result.push({
+                            type: "text",
+                            text: `**${example.title}** 예제:\n` +
+                                "```jsx\n" +
+                                `${example.code}\n` +
+                                "```\n" +
+                                `${'code_props_usage' in example && example.code_props_usage ? `\n**속성 사용 예제:**\n\`\`\`jsx\n${example.code_props_usage}\n\`\`\`\n` : ''}` +
+                                `${example.description}`,
+                        });
+                    }
+                }
+                return { content: result };
+            }
+        }
+    ];
+}

package/build/components/opsnow-common-file-upload.js

@@ -0,0 +1,57 @@
+import { z } from "zod";
+// FileUploader 컴포넌트 관련 스키마 정의
+export const FileUploaderSchema = z.object({
+    accept: z.record(z.string(), z.array(z.string())).optional().describe("허용할 파일 타입 (예: { 'application/pdf': ['.pdf'] })"),
+    multiple: z.boolean().optional().default(false).describe("다중 파일 업로드 가능 여부"),
+    targetUrl: z.string().optional().describe("업로드 대상 URL"),
+    disabled: z.boolean().optional().default(false).describe("비활성화 여부"),
+    helperText: z.string().optional().describe("도움말 텍스트"),
+    fileNotSelectedText: z.string().optional().describe("파일 미선택 시 텍스트"),
+    fileSizeEmptyText: z.string().optional().describe("파일 크기 없음 텍스트"),
+    fileUploadFailText: z.string().optional().describe("업로드 실패 텍스트"),
+    invalidFileFormatText: z.string().optional().describe("잘못된 포맷 텍스트"),
+    loadingText: z.string().optional().describe("로딩 텍스트"),
+    browseText: z.string().optional().describe("찾아보기 버튼 텍스트"),
+    placeholder: z.string().optional().describe("플레이스홀더 텍스트"),
+    onChange: z.string().optional().describe("onChange 핸들러 함수명"),
+});
+// FileUploader MCP 툴 함수 - Stepper MCP 툴 구조 참고
+export function createFileUploaderComponent() {
+    return [
+        {
+            name: "createFileUploader",
+            description: `파일 업로더 컴포넌트 - 파일 선택 및 업로드 기능
+      
+      **import 예시(React의 모든 훅(useState, useEffect, useCommonComponents 등)은 반드시 함수 컴포넌트 내부에서 호출):**
+      \`\`\`javascript
+      import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
+      const { OpsnowCommonFileUploader } = useCommonComponents();
+      \`\`\``,
+            parameters: FileUploaderSchema,
+            handler: async (args) => {
+                // props 변환
+                const propList = Object.entries(args)
+                    .filter(([_, v]) => v !== undefined)
+                    .map(([k, v]) => {
+                    if (typeof v === 'string')
+                        return `${k}="${v}"`;
+                    if (typeof v === 'boolean')
+                        return v ? `${k}` : '';
+                    if (typeof v === 'object')
+                        return `${k}={${JSON.stringify(v)}}`;
+                    return '';
+                })
+                    .filter(Boolean);
+                const code = `<OpsnowCommonFileUploader\n  ${propList.join('\n  ')}\n/>`;
+                return {
+                    content: [
+                        {
+                            type: "text",
+                            text: `\`\`\`jsx\n${code}\n\`\`\``
+                        }
+                    ]
+                };
+            }
+        }
+    ];
+}