@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.39 → 1.0.41

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

@@ -3,12 +3,12 @@ import { z } from "zod";
 export const CalendarSchema = z.object({
     // 캘린더 관련 파라미터들
     type: z
-        .enum(["date", "dateRange", "dateTime", "dateTimeRange"])
-        .describe("단일 날짜, 날짜 범위, 날짜 + 시간 타입 중 선택"),
+        .enum(["date", "dateRange", "dateTime", "dateTimeRange", "time"])
+        .describe("단일 날짜, 날짜 범위, 날짜 + 시간, 시간만(time — TimePicker) 중 선택"),
     views: z
         .array(z.enum(["month", "year", "day", "hours", "minutes", "seconds"]))
         .optional()
-        .describe("캘린더 뷰 타입 (여러개 선택 가능)"),
+        .describe("캘린더 뷰 타입 (여러개 선택 가능). date·dateRange·dateTimeRange는 day/month/year만, time은 hours/minutes/seconds만 유효. 월 단위 레인지는 type: 'dateRange' + views: ['year', 'month']"),
     activate: z
         .boolean()
         .describe("캘린더 전체 활성화/비활성화 (false시 전체 캘린더 사용 불가)"),
@@ -16,8 +16,17 @@ export const CalendarSchema = z.object({
         .array(z.string())
         .optional()
         .describe("캘린더는 활성화된 상태에서 특정 날짜만 비활성화 (YYYY-MM-DD 형식 배열)"),
-    minDate: z.string().optional().describe("최소 날짜 (YYYY-MM-DD 형식)"),
-    maxDate: z.string().optional().describe("최대 날짜 (YYYY-MM-DD 형식)"),
+    minDate: z.string().optional().describe("최소 날짜 (YYYY-MM-DD 형식) — 생성기 입력. 실제 prop 타입은 Dayjs이므로 직접 작성 시 minDate={dayjs('2026-01-01')}"),
+    maxDate: z.string().optional().describe("최대 날짜 (YYYY-MM-DD 형식) — 생성기 입력. 실제 prop 타입은 Dayjs이므로 직접 작성 시 maxDate={dayjs('2026-12-31')}"),
+    // 이하 실제 DatePicker prop
+    value: z.string().optional().describe("선택값 상태 변수명. 단일 타입은 Dayjs | null, range 타입은 [Dayjs | null, Dayjs | null]"),
+    disabled: z.boolean().optional().describe("캘린더 전체 비활성화"),
+    shouldDisableDate: z.string().optional().describe("특정 날짜 비활성화 함수명 ((date: Dayjs) => boolean)"),
+    format: z.string().optional().describe("입력 표시 포맷 (예: 'YYYY-MM-DD')"),
+    disablePast: z.boolean().optional().describe("오늘 이전 날짜 선택 불가"),
+    disableFuture: z.boolean().optional().describe("오늘 이후 날짜 선택 불가"),
+    readOnly: z.boolean().optional().describe("읽기 전용"),
+    size: z.enum(["small", "medium"]).optional().describe("입력 필드 크기"),
     // useShortcusts 부분
     useShortcuts: z
         .boolean()
@@ -54,9 +63,10 @@ export const CalendarSchema = z.object({
         message: "Reset일 때는 num, direction 없이 사용하고, Months/Weeks/Days 때는 num과 direction을 모두 설정하세요.",
     }))
         .optional()
-        .describe("커스텀 쇼트컷 - 기본 쇼트컷 대신 사용자가 원하는 날짜 범위 버튼들을 직접 설정 (예: {num: 2, date: 'Months', direction: 'Last'}, {date: 'Reset'}). ⚠️ type이 'dateRange'일 때만 동작 (다른 타입에서는 무시됨)"),
+        .describe("커스텀 쇼트컷 - 기본 쇼트컷 대신 사용자가 원하는 날짜 범위 버튼들을 직접 설정 (예: {num: 2, date: 'Months', direction: 'Last'}, {date: 'Reset'}). ⚠️ type이 'dateRange'일 때만 동작 (다른 타입에서는 무시됨). ⚠️ 이 {num, date, direction} 형식은 생성기 입력이고, 실제 prop은 [{ label: string, getValue: () => [Dayjs, Dayjs] }] — 직접 작성 시 이 형식으로"),
     locale: z.enum(["ko", "en", "ja", "zh"]).optional().describe("달력 표시 언어 로케일 ('ko' | 'en' | 'ja' | 'zh'). 생성 코드는 항상 i18n.getLocale()과 연동된 locale 상태를 자동 전달하므로 보통 지정 불필요. 특정 언어로 고정하려면 생성된 코드의 locale 값을 직접 수정"),
     onChange: z.string().optional().describe("날짜 선택(변경) 시 호출되는 콜백 - 라이브러리 prop으로 (newValue, context) 인자를 받음. 생성 코드에 setSelectedDate 기반 onChange 핸들러가 항상 자동 포함되므로 보통 지정 불필요. 추가 로직은 생성된 onChange 내부에 덧붙이면 됨"),
+    copilotId: z.string().optional().describe("Copilot 연동 ID — Copilot 매니페스트의 bind.copilotId와 매칭되어 AI가 이 컨트롤을 조작할 수 있게 함. useCommonComponents()로 받은 컴포넌트에서만 동작(로더 HOC가 소비 후 제거)"),
 });
 // Calendar 컴포넌트 함수 - 배열 반환
 export function createCalendarComponent() {
@@ -83,6 +93,7 @@ export function createCalendarComponent() {
     \`\`\`javascript
     import { useCommonComponents } from '@opsnow-common/opsnow-finops-common-ui-loader';
     import i18n from '@opsnow-common/opsnow-finops-common-i18n'
+    import dayjs from 'dayjs' // calendar 2.x의 peer 의존성 — 앱 package.json에 dayjs 설치 필요
     const { OpsnowCommonDatePicker } = useCommonComponents();
     \`\`\``,
             parameters: CalendarSchema,
@@ -157,10 +168,13 @@ export function createCalendarComponent() {
                     functionDefinitions += `]\n\n`;
                 }
                 // Props 생성
+                const isRangeType = !!args.type && args.type.includes("Range");
+                const valueVar = isRangeType ? "selectedDateRange" : "selectedDate";
+                const setValueFn = isRangeType ? "setSelectedDateRange" : "setSelectedDate";
                 const props = [];
                 if (args.type)
                     props.push(`type="${args.type}"`);
-                props.push(`value={selectedDate}`);
+                props.push(`value={${valueVar}}`);
                 if (!args.activate) {
                     props.push(`disabled={${!args.activate}}`);
                     props.push(`onChange={(newValue) => {
@@ -171,13 +185,13 @@ export function createCalendarComponent() {
                     props.push(`shouldDisableDate={disableSpecificDates}`);
                     props.push(`onChange={(newValue) => {
              console.log('Selected Date with specific disabled dates:', newValue)
-             setSelectedDate(newValue)
+             ${setValueFn}(newValue)
            }}`);
                 }
                 else {
                     props.push(`onChange={(newValue) => {
             console.log('Selected ${args.type}:', newValue)
-            setSelectedDate(newValue)
+            ${setValueFn}(newValue)
           }}`);
                 }
                 if (args.minDate)
@@ -191,8 +205,15 @@ export function createCalendarComponent() {
                 if (isDateRangeType && args.customShortcuts)
                     props.push(`customShortcuts={customShortcuts}`);
                 props.push(`locale={locale}`);
-                if (args.views)
-                    props.push(`views={[${args.views.map((view) => `'${view}'`).join(", ")}]}`);
+                // range·date 타입은 day/month/year 뷰만 허용
+                const dayOnlyViews = isRangeType || args.type === "date";
+                const views = dayOnlyViews
+                    ? args.views?.filter((view) => ["day", "month", "year"].includes(view))
+                    : args.type === "time"
+                        ? args.views?.filter((view) => ["hours", "minutes", "seconds"].includes(view))
+                        : args.views;
+                if (views && views.length > 0)
+                    props.push(`views={[${views.map((view) => `'${view}'`).join(", ")}]}`);
                 const datePickerCode = `<OpsnowCommonDatePicker ${props.join(" ")} />`;
                 // OpsnowCommonDatePicker 아래 <p> 태그 생성
                 const generateSelectedDateCode = () => {
@@ -200,21 +221,21 @@ export function createCalendarComponent() {
                         return "";
                     const isTime = args.type.includes("Time");
                     const isRange = args.type.includes("Range");
-                    const format = isTime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD";
+                    const format = args.type === "time" ? "HH:mm" : isTime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD";
                     if (isRange) {
                         const label = isTime
                             ? "Selected DateTime Range"
                             : "Selected Date Range";
                         return `<p>
-           ${label}: \${selectedDateRange[0] && selectedDateRange[1]
+           ${label}: {selectedDateRange[0] && selectedDateRange[1]
              ? \`\${selectedDateRange[0].format('${format}')} ~ \${selectedDateRange[1].format('${format}')}\`
              : 'None'}
          </p>`;
                     }
                     else {
-                        const label = isTime ? "Selected DateTime" : "Selected Date";
+                        const label = args.type === "time" ? "Selected Time" : isTime ? "Selected DateTime" : "Selected Date";
                         return `<p>
-           ${label}: \${selectedDate ? selectedDate.format('${format}') : 'None'}
+           ${label}: {selectedDate ? selectedDate.format('${format}') : 'None'}
          </p>`;
                     }
                 };