@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.27 → 1.0.29

package/build/components/all-component-tools.js

@@ -0,0 +1,45 @@
+// createXxx 툴 정의 수집 (서버 index.ts와 validate-props CLI가 공용)
+// 새 컴포넌트 파일 추가 시 여기에만 팩토리를 등록하면 서버/CLI 모두 반영된다.
+import { createCalendarComponent } from "./opsnow-common-calendar.js";
+import { createChartComponent } from "./opsnow-common-chart.js";
+import { createDataGridComponent } from "./opsnow-common-grid.js";
+import { createFormsComponent } from "./opsnow-common-forms.js";
+import { createDataStatusComponent } from "./opsnow-common-data-status.js";
+import { createProgressComponent } from "./opsnow-common-progress.js";
+import { createNotificationComponent } from "./opsnow-common-notification.js";
+import { createPaginationComponent } from "./opsnow-common-pagination.js";
+import { createIconsComponent } from "./opsnow-common-icons.js";
+import { createTabComponent } from "./opsnow-common-tab.js";
+import { createGridLayoutComponent } from "./opsnow-common-layout.js";
+import { createTypographyComponent } from "./opsnow-common-typography.js";
+import { createTooltipComponent } from "./opsnow-common-tooltip.js";
+import { createCoachMarkComponent } from "./opsnow-common-coach-mark.js";
+import { createSelectComponent } from "./opsnow-common-select.js";
+import { createPopupComponent } from "./opsnow-common-popup.js";
+import { createStepperComponent } from "./opsnow-common-stepper.js";
+import { createToastPopupComponent } from "./opsnow-common-toast-popup.js";
+import { createFileUploaderComponent } from "./opsnow-common-file-upload.js";
+const componentFactories = [
+    createCalendarComponent,
+    createChartComponent,
+    createDataGridComponent,
+    createFormsComponent,
+    createIconsComponent,
+    createDataStatusComponent,
+    createProgressComponent,
+    createNotificationComponent,
+    createPaginationComponent,
+    createTabComponent,
+    createGridLayoutComponent,
+    createTypographyComponent,
+    createTooltipComponent,
+    createCoachMarkComponent,
+    createSelectComponent,
+    createPopupComponent,
+    createStepperComponent,
+    createToastPopupComponent,
+    createFileUploaderComponent,
+];
+export function collectComponentTools() {
+    return componentFactories.flatMap(factory => factory());
+}

package/build/components/examples/opsnow-common-coach-mark-examples-data.js

@@ -0,0 +1,91 @@
+// CoachMark 컴포넌트 예제 데이터
+export const CoachMarkExamples = [
+    {
+        title: "storageKey-title-content-placement",
+        code: `<OpsnowCommonCoachMark
+  storageKey="dashboard-filter-guide"
+  title="필터 사용법"
+  content="여기서 기간과 계정을 선택해 비용을 필터링할 수 있어요."
+  placement="bottom"
+>
+  <Button>필터</Button>
+</OpsnowCommonCoachMark>`,
+        description: "기본 가이드 말풍선 예제입니다. storageKey는 가이드마다 고유하게 지정하며(localStorage 키로 사용), X로 닫으면 localStorage에 저장되어 새로고침해도 다시 뜨지 않습니다.",
+    },
+    {
+        title: "content-only",
+        code: `<OpsnowCommonCoachMark
+  storageKey="content-only-guide"
+  content="제목 없이 본문만 표시할 수도 있어요."
+  placement="right"
+>
+  <Button>본문만</Button>
+</OpsnowCommonCoachMark>`,
+        description: "title 없이 content만 넘기면 본문만 표시되는 예제입니다.",
+    },
+    {
+        title: "placement-top",
+        code: `<OpsnowCommonCoachMark
+  storageKey="top-guide"
+  title="위쪽 말풍선"
+  content="대상 요소 위에 표시됩니다."
+  placement="top"
+>
+  <Button>placement top</Button>
+</OpsnowCommonCoachMark>`,
+        description: "placement로 말풍선 위치를 지정하는 예제입니다 (top/bottom/left/right).",
+    },
+    {
+        title: "placement-left",
+        code: `<OpsnowCommonCoachMark
+  storageKey="left-guide"
+  title="왼쪽 말풍선"
+  content="대상 요소 왼쪽에 표시됩니다."
+  placement="left"
+>
+  <Button>placement left</Button>
+</OpsnowCommonCoachMark>`,
+        description: "대상 요소 왼쪽에 표시되는 예제입니다. 공간이 부족하면 MUI가 자동으로 반대쪽으로 flip 됩니다.",
+    },
+    {
+        title: "jsx-content-onClose",
+        code: `<OpsnowCommonCoachMark
+  storageKey="jsx-guide"
+  title="새 기능 안내"
+  content={
+    <>
+      <div>여러 줄로 구성된 안내 문구입니다.</div>
+      <div><b>굵은 텍스트</b>나 링크도 넣을 수 있어요.</div>
+    </>
+  }
+  placement="right"
+  onClose={() => console.log('closed')}
+>
+  <Button>JSX content</Button>
+</OpsnowCommonCoachMark>`,
+        description: "content에 JSX를 넘겨 여러 줄/굵은 글씨/링크 등을 표현하고, onClose로 닫힐 때 콜백을 실행하는 예제입니다.",
+    },
+    {
+        title: "actions-button",
+        code: `<OpsnowCommonCoachMark
+  storageKey="actions-guide"
+  title="새 기능 안내"
+  content="아래 확인 버튼을 누르면 안내가 닫힙니다."
+  placement="bottom"
+  actions={(close) => (
+    <Button size="small" onClick={close}>확인</Button>
+  )}
+>
+  <Button>actions 버튼</Button>
+</OpsnowCommonCoachMark>`,
+        description: "actions에 함수를 주면 close 인자로 '닫기+영구저장' 핸들러를 받아 하단 우측에 액션 버튼을 표시하는 예제입니다.",
+    },
+    {
+        title: "reset-dismissed-guides",
+        code: `Object.keys(window.localStorage)
+  .filter((k) => k.startsWith('opsnow-common-coach-mark:'))
+  .forEach((k) => window.localStorage.removeItem(k));
+window.location.reload();`,
+        description: "닫힘 기록을 초기화하는 예제입니다. localStorage에서 'opsnow-common-coach-mark:' prefix 키를 제거하면 닫았던 가이드가 다시 표시됩니다.",
+    },
+];

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

@@ -127,5 +127,26 @@ export const AutocompleteExamples = [
         title: 'Autocomplete - Placeholder only (no label)',
         code: `<OpsnowCommonAutocomplete items={[{ value: '1', label: 'Option 1' }, { value: '2', label: 'Option 2' }, { value: '3', label: 'Option 3' }]} multiple={false} value={value} onChange={setValue} placeholder="Search..." />`,
         description: 'label 없이 placeholder만 사용하는 오토컴플리트 예제입니다.'
+    },
+    {
+        title: 'Autocomplete - 긴 라벨 기본 동작 (드롭다운 자동 확장)',
+        code: `<FormControl sx={{ width: 200 }}>
+  <OpsnowCommonAutocomplete items={[{ value: '1', label: 'aws-prod-123456789012-ap-northeast-2-billing-account' }, { value: '2', label: 'gcp-organization-opsnow-cost-analytics-project' }, { value: '3', label: 'Short option' }]} multiple disableCloseOnSelect value={value} onChange={setValue} useCheckboxOption useSelectAll />
+</FormControl>`,
+        description: '긴 라벨 기본 동작 예제입니다. 별도 prop 없이 사용하면 드롭다운이 옵션 라벨 폭에 맞게 넓어지고(최대 뷰포트 폭), 화면 오른쪽 공간이 부족하면 잘리는 대신 왼쪽으로 이동합니다. 드롭다운 너비 동작은 fitDropdownWidth, dropdownMaxWidth prop으로 제어합니다.'
+    },
+    {
+        title: 'Autocomplete - fitDropdownWidth (드롭다운을 입력 필드 폭에 고정)',
+        code: `<FormControl sx={{ width: 200 }}>
+  <OpsnowCommonAutocomplete items={[{ value: '1', label: 'aws-prod-123456789012-ap-northeast-2-billing-account' }, { value: '2', label: 'Short option' }]} multiple disableCloseOnSelect value={value} onChange={setValue} useCheckboxOption useSelectAll fitDropdownWidth />
+</FormControl>`,
+        description: 'fitDropdownWidth prop을 주면 드롭다운이 입력 필드 폭에 고정되고 긴 라벨은 여러 줄로 줄바꿈됩니다. 좁은 레이아웃에서 드롭다운이 넓어지면 안 되는 곳에 사용하세요.'
+    },
+    {
+        title: 'Autocomplete - dropdownMaxWidth (확장 최대 너비 제한)',
+        code: `<FormControl sx={{ width: 200 }}>
+  <OpsnowCommonAutocomplete items={[{ value: '1', label: 'azure-subscription-9f8e7d6c-5b4a-3210-fedc-ba0987654321-management-group' }, { value: '2', label: 'Short option' }]} multiple disableCloseOnSelect value={value} onChange={setValue} useCheckboxOption useSelectAll dropdownMaxWidth={360} />
+</FormControl>`,
+        description: 'dropdownMaxWidth prop으로 확장 최대 너비(px)를 지정하는 예제입니다. 드롭다운이 입력 필드보다 넓게 확장되되 지정한 너비(360px)로 제한되고, 그보다 긴 라벨은 줄바꿈됩니다.'
     }
 ];

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

@@ -5,12 +5,8 @@ export const CalendarSchema = z.object({
     type: z
         .enum(["date", "dateRange", "dateTime", "dateTimeRange"])
         .describe("단일 날짜, 날짜 범위, 날짜 + 시간 타입 중 선택"),
-    date: z
-        .enum(["month", "week", "day"])
-        .optional()
-        .describe("날짜 (YYYY-MM-DD 형식)"),
     views: z
-        .array(z.enum(["month", "year", "week", "day", "hours", "minutes", "seconds"]))
+        .array(z.enum(["month", "year", "day", "hours", "minutes", "seconds"]))
         .optional()
         .describe("캘린더 뷰 타입 (여러개 선택 가능)"),
     activate: z
@@ -26,7 +22,7 @@ export const CalendarSchema = z.object({
     useShortcuts: z
         .boolean()
         .optional()
-        .describe("쇼트컷 - 달력에서 자주 사용하는 날짜 범위를 빠르게 선택할 수 있는 원클릭 버튼들 표시 여부 (예: 오늘, 어제, 지난 7일, 이번 달 등)"),
+        .describe("쇼트컷 - 달력에서 자주 사용하는 날짜 범위를 빠르게 선택할 수 있는 원클릭 버튼들 표시 여부 (예: 오늘, 어제, 지난 7일, 이번 달 등). ⚠️ type이 'dateRange'일 때만 동작 (다른 타입에서는 무시됨)"),
     customShortcuts: z
         .array(z
         .object({
@@ -58,7 +54,9 @@ export const CalendarSchema = z.object({
         message: "Reset일 때는 num, direction 없이 사용하고, Months/Weeks/Days 때는 num과 direction을 모두 설정하세요.",
     }))
         .optional()
-        .describe("커스텀 쇼트컷 - 기본 쇼트컷 대신 사용자가 원하는 날짜 범위 버튼들을 직접 설정 (예: {num: 2, date: 'Months', direction: 'Last'}, {date: 'Reset'})"),
+        .describe("커스텀 쇼트컷 - 기본 쇼트컷 대신 사용자가 원하는 날짜 범위 버튼들을 직접 설정 (예: {num: 2, date: 'Months', direction: 'Last'}, {date: 'Reset'}). ⚠️ type이 'dateRange'일 때만 동작 (다른 타입에서는 무시됨)"),
+    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 내부에 덧붙이면 됨"),
 });
 // Calendar 컴포넌트 함수 - 배열 반환
 export function createCalendarComponent() {
@@ -116,8 +114,9 @@ export function createCalendarComponent() {
          return disabledDates.includes(date.format('YYYY-MM-DD'))
           }\n`;
                 }
-                // 커스텀 쇼트컷 생성
-                if (args.customShortcuts && args.customShortcuts.length > 0) {
+                // 커스텀 쇼트컷 생성 (useShortcuts/customShortcuts는 lib에서 dateRange 타입 전용)
+                const isDateRangeType = args.type === "dateRange";
+                if (isDateRangeType && args.customShortcuts && args.customShortcuts.length > 0) {
                     functionDefinitions += `const customShortcuts = [\n`;
                     args.customShortcuts.forEach((shortcut) => {
                         if (shortcut.date === "Reset") {
@@ -178,11 +177,11 @@ export function createCalendarComponent() {
                     props.push(`minDate={dayjs("${args.minDate}")}`);
                 if (args.maxDate)
                     props.push(`maxDate={dayjs("${args.maxDate}")}`);
-                // customShortcuts가 있으면 useShortcuts는 무조건 true
-                if (args.useShortcuts || args.customShortcuts) {
+                // customShortcuts가 있으면 useShortcuts는 무조건 true (dateRange 타입 전용)
+                if (isDateRangeType && (args.useShortcuts || args.customShortcuts)) {
                     props.push("useShortcuts");
                 }
-                if (args.customShortcuts)
+                if (isDateRangeType && args.customShortcuts)
                     props.push(`customShortcuts={customShortcuts}`);
                 props.push(`locale={locale}`);
                 if (args.views)