@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.2 → 1.0.3
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/README.md
CHANGED
|
@@ -28,26 +28,6 @@ To integrate with Claude Desktop, add the following snippet to your `claude_desk
|
|
|
28
28
|
}
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
### Claude Desktop Configuration (Zscaler 환경)
|
|
32
|
-
|
|
33
|
-
Zscaler 프록시 환경에서는 TLS 인증서 오류를 방지하기 위해 NODE_EXTRA_CA_CERTS 환경 변수를 설정해야 합니다.
|
|
34
|
-
|
|
35
|
-
```json
|
|
36
|
-
{
|
|
37
|
-
"mcpServers": {
|
|
38
|
-
"opsnow-mcp-common-ui-server": {
|
|
39
|
-
"command": "npx",
|
|
40
|
-
"args": [
|
|
41
|
-
"@opsnow-mcp/opsnow-mcp-common-ui-server"
|
|
42
|
-
],
|
|
43
|
-
"env": {
|
|
44
|
-
"NODE_EXTRA_CA_CERTS": "C:\\ZscalerRootCA.pem"
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
```
|
|
50
|
-
|
|
51
31
|
### nvm(Node Version Manager) 사용 시 설정 예시
|
|
52
32
|
|
|
53
33
|
nvm을 사용하여 Node.js 22.x를 설치한 경우, 다음과 같이 설정할 수 있습니다. `{사용자명}` 부분은 본인의 사용자명으로 변경해주세요.
|
|
@@ -59,16 +59,15 @@ const EXAMPLES_MAP = {
|
|
|
59
59
|
};
|
|
60
60
|
export const UIExamplesSchema = z.object({
|
|
61
61
|
uiType: z
|
|
62
|
-
.
|
|
63
|
-
.
|
|
64
|
-
.describe(`UI 컴포넌트 예제명 배열 (예: ['Button', 'Icon']) 호출 가능한 예제 항목: ${Object.keys(EXAMPLES_MAP).join(", ")}`)
|
|
62
|
+
.enum(Object.keys(EXAMPLES_MAP))
|
|
63
|
+
.describe(`UI 컴포넌트 예제명 (예: 'Button', 'Icon') 호출 가능한 예제 항목: ${Object.keys(EXAMPLES_MAP).join(", ")}`)
|
|
65
64
|
});
|
|
66
65
|
export function createCommonExamplesComponent() {
|
|
67
66
|
return [
|
|
68
67
|
{
|
|
69
68
|
name: "getUIExamples",
|
|
70
69
|
description: `OpsNow 공통 UI 컴포넌트 예제 목록을 반환합니다.
|
|
71
|
-
uiType: string
|
|
70
|
+
uiType: string (예: 'Button', 'Icon')
|
|
72
71
|
호출 가능한 예제 항목: ${Object.keys(EXAMPLES_MAP).join(', ')}
|
|
73
72
|
uiType은 필수값입니다.`,
|
|
74
73
|
parameters: UIExamplesSchema,
|
|
@@ -79,26 +78,24 @@ uiType은 필수값입니다.`,
|
|
|
79
78
|
if (extraKeys.length > 0) {
|
|
80
79
|
return { content: [], error: `허용되지 않은 파라미터가 포함되어 있습니다: ${extraKeys.join(", ")}` };
|
|
81
80
|
}
|
|
82
|
-
const
|
|
83
|
-
if (!
|
|
81
|
+
const type = args.uiType;
|
|
82
|
+
if (!type) {
|
|
84
83
|
return { content: [] };
|
|
85
84
|
}
|
|
86
|
-
//
|
|
85
|
+
// 단일 예제만 반환
|
|
87
86
|
const result = [];
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
});
|
|
101
|
-
}
|
|
87
|
+
const examples = EXAMPLES_MAP[type];
|
|
88
|
+
if (examples) {
|
|
89
|
+
for (const example of examples) {
|
|
90
|
+
result.push({
|
|
91
|
+
type: "text",
|
|
92
|
+
text: `**${example.title}** 예제:\n` +
|
|
93
|
+
"```jsx\n" +
|
|
94
|
+
`${example.code}\n` +
|
|
95
|
+
"```\n" +
|
|
96
|
+
`${'code_props_usage' in example && example.code_props_usage ? `\n**속성 사용 예제:**\n\`\`\`jsx\n${example.code_props_usage}\n\`\`\`\n` : ''}` +
|
|
97
|
+
`${example.description}`,
|
|
98
|
+
});
|
|
102
99
|
}
|
|
103
100
|
}
|
|
104
101
|
return { content: result };
|
|
@@ -3,13 +3,13 @@ import { z } from "zod";
|
|
|
3
3
|
export const NotificationSchema = z.object({
|
|
4
4
|
severity: z
|
|
5
5
|
.enum([
|
|
6
|
+
"infoSuccess",
|
|
7
|
+
"infoError",
|
|
8
|
+
"infoWarning",
|
|
6
9
|
"success",
|
|
7
10
|
"error",
|
|
8
11
|
"warning",
|
|
9
12
|
"info",
|
|
10
|
-
"infoSuccess",
|
|
11
|
-
"infoError",
|
|
12
|
-
"infoWarning",
|
|
13
13
|
])
|
|
14
14
|
.describe(`알림 타입(색상/스타일):
|
|
15
15
|
- "info": 회색/ 흰색 배경 + 배경과 동일한 색상의 아이콘 + 컬러 라인 없음
|
|
@@ -21,7 +21,8 @@ export const NotificationSchema = z.object({
|
|
|
21
21
|
- "warning": 박스 내 주황 배경
|
|
22
22
|
※ infoSuccess/infoWarning/infoError는 배경이 항상 흰색/회색이고, 컬러 라인 색상만 다릅니다.
|
|
23
23
|
※ card 타입에서는 infoSuccess/infoWarning/infoError를 사용하지 않습니다.`),
|
|
24
|
-
|
|
24
|
+
useTitle: z.boolean().optional().describe("제목 사용 여부 - title 옵션 사용 시 true(true시 사용 예시 : useTitle (useTitle={true}처럼 쓰지 않음.)"),
|
|
25
|
+
title: z.string().optional().describe("볼드 처리 된 알림 제목 - 해당 옵션 사용하는 경우 useTitle true 필수"),
|
|
25
26
|
message: z.string().optional().describe("제목 아래 알림 메시지 내용"),
|
|
26
27
|
placement: z
|
|
27
28
|
.enum(["card", "page"])
|
|
@@ -35,12 +36,12 @@ export const NotificationSchema = z.object({
|
|
|
35
36
|
bgWhite: z
|
|
36
37
|
.boolean()
|
|
37
38
|
.default(false)
|
|
38
|
-
.describe("배경 흰색 여부 - severity : info 일때만 사용"),
|
|
39
|
+
.describe("배경 흰색 여부 - severity : info 일때만 사용(true시 사용 예시 : bgWhite (bgWhite={true}처럼 쓰지 않음.)"),
|
|
39
40
|
action: z.string().optional().describe("액션 버튼 코드 - 예시: <OpsnowCommonButton label='확인' />"),
|
|
40
41
|
isCustom: z
|
|
41
42
|
.boolean()
|
|
42
43
|
.default(false)
|
|
43
|
-
.describe("커스텀 action 버튼 사용 여부 - action랑 같이 사용"),
|
|
44
|
+
.describe("커스텀 action 버튼 사용 여부 - action랑 같이 사용, default 버튼이 아닌 custom시 사용"),
|
|
44
45
|
}).describe("알림 컴포넌트 - 박스 형태로 알림을 제공하는 컴포넌트. 알림 컴포넌트 내에 버튼 사용 시 (action, isCustom 옵션 사용 시) 반드시 버튼 컴포넌트 동시 호출 하여 action에 OpsnowCommonButton 컴포넌트를 string으로 전달");
|
|
45
46
|
// Notification 컴포넌트 함수 - 배열 반환
|
|
46
47
|
export function createNotificationComponent() {
|
|
@@ -64,7 +65,7 @@ export function createNotificationComponent() {
|
|
|
64
65
|
if (args.severity) {
|
|
65
66
|
props.push(`severity="${args.severity}"`);
|
|
66
67
|
}
|
|
67
|
-
if (args.title) {
|
|
68
|
+
if (args.title && args.useTitle) {
|
|
68
69
|
props.push("useTitle");
|
|
69
70
|
props.push(`title="${args.title}"`);
|
|
70
71
|
}
|