@opsnow-mcp/opsnow-mcp-common-ui-server 1.0.30 → 1.0.31
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.
|
@@ -2,47 +2,47 @@
|
|
|
2
2
|
export const CalendarExamples = [
|
|
3
3
|
{
|
|
4
4
|
title: "dateRange",
|
|
5
|
-
code: `<
|
|
5
|
+
code: `<OpsnowCommonDatePicker type="dateRange" />`,
|
|
6
6
|
description: "날짜 범위 선택이 가능한 달력 예제입니다.",
|
|
7
7
|
},
|
|
8
8
|
{
|
|
9
9
|
title: "date",
|
|
10
|
-
code: `<
|
|
10
|
+
code: `<OpsnowCommonDatePicker type="date" />`,
|
|
11
11
|
description: "단일 날짜 선택이 가능한 달력 예제입니다.",
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
title: "date-minDate-maxDate",
|
|
15
|
-
code: `<
|
|
15
|
+
code: `<OpsnowCommonDatePicker type="date" minDate={dayjs('YYYY-MM-DD')} maxDate={dayjs('YYYY-MM-DD')} />`,
|
|
16
16
|
description: "단일 날짜 선택이 가능한 달력 예제입니다. 최소 최대 날짜를 설정할 수 있습니다.",
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
title: "dateRange-minDate-maxDate",
|
|
20
|
-
code: `<
|
|
20
|
+
code: `<OpsnowCommonDatePicker type="dateRange" minDate={dayjs('YYYY-MM-DD')} maxDate={dayjs('YYYY-MM-DD')} />`,
|
|
21
21
|
description: "날짜 범위 선택이 가능한 달력 예제입니다. 최소 최대 날짜를 설정할 수 있습니다.",
|
|
22
22
|
},
|
|
23
23
|
{
|
|
24
24
|
title: "dateTimeRange",
|
|
25
|
-
code: `<
|
|
25
|
+
code: `<OpsnowCommonDatePicker type="dateTimeRange" />`,
|
|
26
26
|
description: "날짜 + 시간 조합으로 범위 선택이 가능한 달력 예제입니다.",
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
|
-
title: "
|
|
30
|
-
code: `<
|
|
31
|
-
description: "날짜 범위 선택이 가능한 달력 예제입니다. 지난 3개월과 같은 기본 쇼트컷을 사용할 수 있습니다.",
|
|
29
|
+
title: "dateRange-useShortcuts",
|
|
30
|
+
code: `<OpsnowCommonDatePicker type="dateRange" useShortcuts/>`,
|
|
31
|
+
description: "날짜 범위 선택이 가능한 달력 예제입니다. 지난 3개월과 같은 기본 쇼트컷을 사용할 수 있습니다. (useShortcuts는 dateRange 타입 전용)",
|
|
32
32
|
},
|
|
33
33
|
{
|
|
34
|
-
title: "
|
|
35
|
-
code: `<
|
|
36
|
-
description: "날짜 범위 선택이 가능한 달력 예제입니다. 원하는 쇼트컷을 추가하여 사용할 수 있습니다.",
|
|
34
|
+
title: "dateRange-customShortcuts",
|
|
35
|
+
code: `<OpsnowCommonDatePicker type="dateRange" useShortcuts customShortcuts={customShortcuts} />`,
|
|
36
|
+
description: "날짜 범위 선택이 가능한 달력 예제입니다. 원하는 쇼트컷을 추가하여 사용할 수 있습니다. (customShortcuts는 dateRange 타입 전용)",
|
|
37
37
|
},
|
|
38
38
|
{
|
|
39
39
|
title: "dateTime",
|
|
40
|
-
code: `<
|
|
40
|
+
code: `<OpsnowCommonDatePicker type="dateTime" />`,
|
|
41
41
|
description: "단일 날짜 + 시간 조합으로 선택이 가능한 달력 예제입니다.",
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
44
|
title: "dateTime-minDate-maxDate",
|
|
45
|
-
code: `<
|
|
45
|
+
code: `<OpsnowCommonDatePicker type="dateTime" minDate={dayjs('YYYY-MM-DD')} maxDate={dayjs('YYYY-MM-DD')} />`,
|
|
46
46
|
description: "단일 날짜 + 시간 조합으로 선택이 가능한 달력 예제입니다. 최소 최대 날짜를 설정할 수 있습니다.",
|
|
47
47
|
},
|
|
48
48
|
];
|
|
@@ -60,7 +60,7 @@ export const GridLayoutExamples = [
|
|
|
60
60
|
{
|
|
61
61
|
title: 'Tile with Checkbox UI',
|
|
62
62
|
description: 'Tile 내부에 체크박스와 텍스트가 포함된 2열 레이아웃 예제입니다.',
|
|
63
|
-
code: `<Grid container spacing={3} sx={{ marginTop: '20px' }}><Grid item xs={12} md={6} sx={{ display: 'flex' }}><OpsnowCommonTile sx={{ width: '100%' }}><OpsnowCommonTile.Content><Stack direction="row" alignItems="flex-start" spacing={2}><OpsnowCommonCheckbox name="organizationScope" checked={checkboxStates.organizationScope} onChange={handleCheckboxChange} color="primary" /><Stack spacing={1}><OpsnowCommonTypography variant="
|
|
63
|
+
code: `<Grid container spacing={3} sx={{ marginTop: '20px' }}><Grid item xs={12} md={6} sx={{ display: 'flex' }}><OpsnowCommonTile sx={{ width: '100%' }}><OpsnowCommonTile.Content><Stack direction="row" alignItems="flex-start" spacing={2}><OpsnowCommonCheckbox name="organizationScope" checked={checkboxStates.organizationScope} onChange={handleCheckboxChange} color="primary" /><Stack spacing={1}><OpsnowCommonTypography variant="e-b10">Use Organization Scope(Cost Allocation)</OpsnowCommonTypography><OpsnowCommonTypography variant="e-r11" color="commonPalette.gray.600">The same scope defined in Organization Settings is used as the baseline for Budget and KPI tracking.</OpsnowCommonTypography></Stack></Stack></OpsnowCommonTile.Content></OpsnowCommonTile></Grid><Grid item xs={12} md={6} sx={{ display: 'flex' }}><OpsnowCommonTile sx={{ width: '100%' }}><OpsnowCommonTile.Content><Stack direction="row" alignItems="flex-start" spacing={2}><OpsnowCommonCheckbox name="customizeScope" checked={checkboxStates.customizeScope} onChange={handleCheckboxChange} color="primary" /><Stack spacing={1}><OpsnowCommonTypography variant="e-b10">Customize Scope</OpsnowCommonTypography><OpsnowCommonTypography variant="e-r11" color="commonPalette.gray.600">Apply only to selected dimensions, such as specific services (e.g., EC2)</OpsnowCommonTypography></Stack></Stack></OpsnowCommonTile.Content></OpsnowCommonTile></Grid></Grid>`,
|
|
64
64
|
},
|
|
65
65
|
];
|
|
66
66
|
export const MegaFilterExamples = [
|