@lotte-innovate/ui-component-test 0.0.14 → 0.0.15

Sign up to get free protection for your applications and to get access to all the features.
Files changed (110) hide show
  1. package/package.json +11 -2
  2. package/dist/app/layout.d.ts +0 -7
  3. package/dist/app/layout.jsx +0 -13
  4. package/dist/app/page.d.ts +0 -2
  5. package/dist/app/page.jsx +0 -9
  6. package/dist/app/template/colorPicker.d.ts +0 -7
  7. package/dist/app/template/colorPicker.jsx +0 -19
  8. package/dist/app/template/theme.d.ts +0 -12
  9. package/dist/app/template/theme.jsx +0 -17
  10. package/dist/stories/Welcome.d.ts +0 -3
  11. package/dist/stories/Welcome.jsx +0 -48
  12. package/dist/stories/accordion/Accordion.stories.d.ts +0 -71
  13. package/dist/stories/accordion/Accordion.stories.jsx +0 -79
  14. package/dist/stories/alert-dialog/AlertDialog.stories.d.ts +0 -107
  15. package/dist/stories/alert-dialog/AlertDialog.stories.jsx +0 -73
  16. package/dist/stories/aspect-ratio/AspectRatio.stories.d.ts +0 -68
  17. package/dist/stories/aspect-ratio/AspectRatio.stories.jsx +0 -106
  18. package/dist/stories/avatar/Avatar.stories.d.ts +0 -127
  19. package/dist/stories/avatar/Avatar.stories.jsx +0 -105
  20. package/dist/stories/badge/Badge.stories.d.ts +0 -133
  21. package/dist/stories/badge/Badge.stories.jsx +0 -130
  22. package/dist/stories/bubble-chart/BubbleChart.stories.d.ts +0 -103
  23. package/dist/stories/bubble-chart/BubbleChart.stories.jsx +0 -176
  24. package/dist/stories/button/Button.stories.d.ts +0 -148
  25. package/dist/stories/button/Button.stories.jsx +0 -98
  26. package/dist/stories/button/IconButton.stories.d.ts +0 -125
  27. package/dist/stories/button/IconButton.stories.jsx +0 -93
  28. package/dist/stories/callout/Callout.stories.d.ts +0 -129
  29. package/dist/stories/callout/Callout.stories.jsx +0 -205
  30. package/dist/stories/card/Card.stories.d.ts +0 -100
  31. package/dist/stories/card/Card.stories.jsx +0 -134
  32. package/dist/stories/checkbox/Checkbox.stories.d.ts +0 -147
  33. package/dist/stories/checkbox/Checkbox.stories.jsx +0 -166
  34. package/dist/stories/checkbox/CheckboxCard.stories.d.ts +0 -129
  35. package/dist/stories/checkbox/CheckboxCard.stories.jsx +0 -125
  36. package/dist/stories/checkbox/CheckboxGroup.stories.d.ts +0 -91
  37. package/dist/stories/checkbox/CheckboxGroup.stories.jsx +0 -144
  38. package/dist/stories/context-menu/ContextMenu.stories.d.ts +0 -113
  39. package/dist/stories/context-menu/ContextMenu.stories.jsx +0 -155
  40. package/dist/stories/data-list/DataList.stories.d.ts +0 -97
  41. package/dist/stories/data-list/DataList.stories.jsx +0 -185
  42. package/dist/stories/dialog/Dialog.stories.d.ts +0 -88
  43. package/dist/stories/dialog/Dialog.stories.jsx +0 -82
  44. package/dist/stories/doughnut-chart/DoughnutChart.stories.d.ts +0 -181
  45. package/dist/stories/doughnut-chart/DoughnutChart.stories.jsx +0 -236
  46. package/dist/stories/dropdown-menu/DropdownMenu.stories.d.ts +0 -112
  47. package/dist/stories/dropdown-menu/DropdownMenu.stories.jsx +0 -170
  48. package/dist/stories/header/Header.stories.d.ts +0 -112
  49. package/dist/stories/header/Header.stories.jsx +0 -116
  50. package/dist/stories/hover-card/HoverCard.stories.d.ts +0 -107
  51. package/dist/stories/hover-card/HoverCard.stories.jsx +0 -98
  52. package/dist/stories/inset/Inset.stories.d.ts +0 -58
  53. package/dist/stories/inset/Inset.stories.jsx +0 -79
  54. package/dist/stories/label/Label.stories.d.ts +0 -94
  55. package/dist/stories/label/Label.stories.jsx +0 -112
  56. package/dist/stories/menubar/Menubar.stories.d.ts +0 -119
  57. package/dist/stories/menubar/Menubar.stories.jsx +0 -135
  58. package/dist/stories/navigation-menu/NavigationMenu.stories.d.ts +0 -385
  59. package/dist/stories/navigation-menu/NavigationMenu.stories.jsx +0 -144
  60. package/dist/stories/pie-chart/PieChart.stories.d.ts +0 -186
  61. package/dist/stories/pie-chart/PieChart.stories.jsx +0 -300
  62. package/dist/stories/popover/Popover.stories.d.ts +0 -78
  63. package/dist/stories/popover/Popover.stories.jsx +0 -107
  64. package/dist/stories/progress/Progress.stories.d.ts +0 -113
  65. package/dist/stories/progress/Progress.stories.jsx +0 -82
  66. package/dist/stories/radar-chart/RadarChart.stories.d.ts +0 -111
  67. package/dist/stories/radar-chart/RadarChart.stories.jsx +0 -200
  68. package/dist/stories/radio/Radio.stories.d.ts +0 -108
  69. package/dist/stories/radio/Radio.stories.jsx +0 -94
  70. package/dist/stories/radio/RadioCards.stories.d.ts +0 -127
  71. package/dist/stories/radio/RadioCards.stories.jsx +0 -153
  72. package/dist/stories/radio/RadioGroup.stories.d.ts +0 -111
  73. package/dist/stories/radio/RadioGroup.stories.jsx +0 -142
  74. package/dist/stories/scroll-area/ScrollArea.stories.d.ts +0 -59
  75. package/dist/stories/scroll-area/ScrollArea.stories.jsx +0 -123
  76. package/dist/stories/segmented-control/SegmentedControl.stories.d.ts +0 -97
  77. package/dist/stories/segmented-control/SegmentedControl.stories.jsx +0 -101
  78. package/dist/stories/select/Select.stories.d.ts +0 -116
  79. package/dist/stories/select/Select.stories.jsx +0 -149
  80. package/dist/stories/separator/Separator.stories.d.ts +0 -93
  81. package/dist/stories/separator/Separator.stories.jsx +0 -106
  82. package/dist/stories/skeleton/Skeleton.stories.d.ts +0 -88
  83. package/dist/stories/skeleton/Skeleton.stories.jsx +0 -119
  84. package/dist/stories/slider/Slider.stories.d.ts +0 -114
  85. package/dist/stories/slider/Slider.stories.jsx +0 -94
  86. package/dist/stories/spinner/Spinner.stories.d.ts +0 -83
  87. package/dist/stories/spinner/Spinner.stories.jsx +0 -112
  88. package/dist/stories/switch/Switch.stories.d.ts +0 -146
  89. package/dist/stories/switch/Switch.stories.jsx +0 -119
  90. package/dist/stories/tab-nav/TabNav.stories.d.ts +0 -55
  91. package/dist/stories/tab-nav/TabNav.stories.jsx +0 -68
  92. package/dist/stories/table/Table.stories.d.ts +0 -87
  93. package/dist/stories/table/Table.stories.jsx +0 -106
  94. package/dist/stories/tabs/Tabs.stories.d.ts +0 -55
  95. package/dist/stories/tabs/Tabs.stories.jsx +0 -76
  96. package/dist/stories/text/Text.stories.d.ts +0 -74
  97. package/dist/stories/text/Text.stories.jsx +0 -91
  98. package/dist/stories/textArea/TextArea.stories.d.ts +0 -117
  99. package/dist/stories/textArea/TextArea.stories.jsx +0 -112
  100. package/dist/stories/textfield/TextField.stories.d.ts +0 -116
  101. package/dist/stories/textfield/TextField.stories.jsx +0 -120
  102. package/dist/stories/toast/Toast.stories.d.ts +0 -138
  103. package/dist/stories/toast/Toast.stories.jsx +0 -122
  104. package/dist/stories/toggle/Toggle.stories.d.ts +0 -115
  105. package/dist/stories/toggle/Toggle.stories.jsx +0 -106
  106. package/dist/stories/toggle/ToggleGroup.stories.d.ts +0 -103
  107. package/dist/stories/toggle/ToggleGroup.stories.jsx +0 -127
  108. package/dist/stories/tooltip/Tooltip.stories.d.ts +0 -93
  109. package/dist/stories/tooltip/Tooltip.stories.jsx +0 -91
  110. package/dist/tsconfig.tsbuildinfo +0 -1
@@ -1,79 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
- import { commonArgTypes } from '../../../src/constants';
24
- import Image from 'next/image';
25
- import { Inset } from '../../components/Inset';
26
- var meta = {
27
- title: 'Component/Inset',
28
- component: Inset,
29
- parameters: {
30
- layout: 'centered',
31
- themes: {
32
- themeOverride: 'dark',
33
- },
34
- docs: {
35
- description: {
36
- component: '여백을 조정하여 콘텐츠 삽입',
37
- },
38
- },
39
- },
40
- tags: ['autodocs'],
41
- argTypes: {
42
- radius: __assign(__assign({}, commonArgTypes.radius), { description: 'inset 둥글기' }),
43
- scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'inset 비율' }),
44
- },
45
- };
46
- export default meta;
47
- export var Default = function (_a) {
48
- var args = __rest(_a, []);
49
- return (<Inset clip="padding-box" side="top" pb="current" className="w-[290px]" {...args}>
50
- <Image src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Bold typography" width={100} height={200} style={{
51
- display: 'block',
52
- objectFit: 'cover',
53
- width: '100%',
54
- backgroundColor: 'var(--gray-5)',
55
- }}/>
56
- <div className="p-4">
57
- <span>
58
- Typography is the art and technique of arranging type to make written language legible.
59
- </span>
60
- </div>
61
- </Inset>);
62
- };
63
- export var Horizontal = function (_a) {
64
- var args = __rest(_a, []);
65
- return (<Inset side="left" pr="current" className="w-[400px]" {...args}>
66
- <div className="flex">
67
- <Image src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Bold typography" width={150} height={140} style={{
68
- display: 'block',
69
- objectFit: 'cover',
70
- backgroundColor: 'var(--gray-5)',
71
- }}/>
72
- <div className="p-4">
73
- <span>
74
- Typography is the art and technique of arranging type to make written language legible.
75
- </span>
76
- </div>
77
- </div>
78
- </Inset>);
79
- };
@@ -1,94 +0,0 @@
1
- /// <reference types="react" />
2
- import { IColor, IScaling } from '../../types';
3
- declare const meta: {
4
- title: string;
5
- component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-label").LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("../../components/Label/index").LabelProps & import("react").RefAttributes<HTMLLabelElement>>;
6
- parameters: {
7
- layout: string;
8
- themes: {
9
- themeOverride: string;
10
- };
11
- docs: {
12
- description: {
13
- component: string;
14
- };
15
- };
16
- };
17
- tags: string[];
18
- argTypes: {
19
- scaling: {
20
- description: string;
21
- table: {
22
- category: string;
23
- type: {
24
- summary: string;
25
- };
26
- };
27
- control: {
28
- type: string;
29
- };
30
- options: IScaling[];
31
- defaultValue: {
32
- summary: string;
33
- };
34
- };
35
- weight: {
36
- table: {
37
- category: string;
38
- type: {
39
- summary: string;
40
- };
41
- };
42
- control: {
43
- type: string;
44
- };
45
- options: string[];
46
- defaultValue: {
47
- summary: string;
48
- };
49
- description: string;
50
- };
51
- color: {
52
- table: {
53
- category: string;
54
- type: {
55
- summary: string;
56
- };
57
- };
58
- options: IColor[];
59
- control: {
60
- type: string;
61
- };
62
- description: string;
63
- };
64
- size: {
65
- table: {
66
- category: string;
67
- type: {
68
- summary: string;
69
- };
70
- };
71
- control: {
72
- type: string;
73
- };
74
- options: string[];
75
- defaultValue: {
76
- summary: string;
77
- };
78
- description: string;
79
- };
80
- };
81
- };
82
- export default meta;
83
- export declare const Default: ({ ...args }: {
84
- [x: string]: any;
85
- }) => import("react").JSX.Element;
86
- export declare const Scaling: ({ ...args }: {
87
- [x: string]: any;
88
- }) => import("react").JSX.Element;
89
- export declare const Size: ({ ...args }: {
90
- [x: string]: any;
91
- }) => import("react").JSX.Element;
92
- export declare const Weight: ({ ...args }: {
93
- [x: string]: any;
94
- }) => import("react").JSX.Element;
@@ -1,112 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
- import { Label } from '../../components/Label/index';
24
- import { commonArgTypes, scalingOptions } from '../../constants';
25
- import { colorOptions } from 'color/constants';
26
- var meta = {
27
- title: 'Component/Label',
28
- component: Label,
29
- parameters: {
30
- layout: 'centered',
31
- themes: {
32
- themeOverride: '',
33
- },
34
- docs: {
35
- description: {
36
- component: '컴포넌트 및 컨트롤 요소의 사용 목적을 알리기 위해 사용되는 설명적 텍스트',
37
- },
38
- },
39
- },
40
- tags: ['autodocs'],
41
- argTypes: {
42
- scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'Label component 크기' }),
43
- weight: {
44
- table: {
45
- category: 'Props',
46
- type: { summary: ['regular', 'bold'].join(' | ') },
47
- },
48
- control: { type: 'select' },
49
- options: ['regular', 'bold'],
50
- defaultValue: { summary: 'regular' },
51
- description: 'Label Component 폰트 두께',
52
- },
53
- color: {
54
- table: {
55
- category: 'Theme Props',
56
- type: { summary: 'colorVariants' },
57
- },
58
- options: colorOptions,
59
- control: { type: 'select' },
60
- description: 'Label component 색상',
61
- },
62
- size: {
63
- table: {
64
- category: 'Props',
65
- type: { summary: ['small', 'medium', 'large'].join(' | ') },
66
- },
67
- control: { type: 'select' },
68
- options: ['small', 'medium', 'large'],
69
- defaultValue: { summary: 'medium' },
70
- description: 'Label component 크기',
71
- },
72
- },
73
- };
74
- export default meta;
75
- export var Default = function (_a) {
76
- var args = __rest(_a, []);
77
- return <Label {...args}>Label component</Label>;
78
- };
79
- export var Scaling = function (_a) {
80
- var args = __rest(_a, []);
81
- return (<div className="">
82
- {scalingOptions.map(function (scaling, index) { return (<div key={scaling} className="flex pt-3 items-center space-x-2">
83
- <Label scaling={scaling} {...args}>
84
- Label component
85
- </Label>
86
- </div>); })}
87
- </div>);
88
- };
89
- export var Size = function (_a) {
90
- var args = __rest(_a, []);
91
- return (<div className="flex flex-wrap items-center gap-[15px] px-5">
92
- <Label size={'small'} {...args}>
93
- Label component
94
- </Label>
95
- <Label size={'medium'} {...args}>
96
- Label component
97
- </Label>
98
- <Label size={'large'} {...args}>
99
- Label component
100
- </Label>
101
- </div>);
102
- };
103
- export var Weight = function (_a) {
104
- var args = __rest(_a, []);
105
- return (<div className="">
106
- {['regular', 'bold'].map(function (weight, index) { return (<div key={weight} className="flex pt-3 items-center space-x-2">
107
- <Label weight={weight} {...args}>
108
- Label component
109
- </Label>
110
- </div>); })}
111
- </div>);
112
- };
@@ -1,119 +0,0 @@
1
- /// <reference types="react" />
2
- declare const meta: {
3
- title: string;
4
- component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-menubar").MenubarProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("components/Menubar").MenubarProps & import("react").RefAttributes<HTMLDivElement>>;
5
- parameters: {
6
- layout: string;
7
- themes: {
8
- themeOverride: string;
9
- };
10
- docs: {
11
- description: {
12
- component: string;
13
- };
14
- };
15
- };
16
- tags: string[];
17
- argTypes: {
18
- radius: {
19
- description: string;
20
- table: {
21
- category: string;
22
- type: {
23
- summary: string;
24
- };
25
- };
26
- options: import("types").IRadius[];
27
- control: {
28
- type: string;
29
- };
30
- defaultValue: {
31
- summary: string;
32
- };
33
- };
34
- scaling: {
35
- description: string;
36
- table: {
37
- category: string;
38
- type: {
39
- summary: string;
40
- };
41
- };
42
- control: {
43
- type: string;
44
- };
45
- options: import("types").IScaling[];
46
- defaultValue: {
47
- summary: string;
48
- };
49
- };
50
- size: {
51
- table: {
52
- category: string;
53
- type: {
54
- summary: string;
55
- };
56
- };
57
- options: import("types").ISize[];
58
- description: string;
59
- control: {
60
- type: string;
61
- };
62
- defaultValue: {
63
- summary: string;
64
- };
65
- };
66
- color: {
67
- description: string;
68
- table: {
69
- category: string;
70
- type: {
71
- summary: string;
72
- };
73
- };
74
- options: import("types").IColor[];
75
- control: {
76
- type: string;
77
- };
78
- defaultValue: {
79
- summary: string;
80
- };
81
- };
82
- appearance: {
83
- description: string;
84
- table: {
85
- category: string;
86
- type: {
87
- summary: string;
88
- };
89
- };
90
- options: import("types").IAppearance[];
91
- control: {
92
- type: string;
93
- };
94
- defaultValue: {
95
- summary: string;
96
- };
97
- };
98
- itemAppearance: {
99
- description: string;
100
- table: {
101
- category: string;
102
- type: {
103
- summary: string;
104
- };
105
- };
106
- options: import("types").IAppearance[];
107
- control: {
108
- type: string;
109
- };
110
- defaultValue: {
111
- summary: string;
112
- };
113
- };
114
- };
115
- };
116
- export default meta;
117
- export declare const Default: ({ ...args }: {
118
- [x: string]: any;
119
- }) => import("react").JSX.Element;
@@ -1,135 +0,0 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
- import { useState } from 'react';
24
- import { appearanceOptions, commonArgTypes, sizeOptions } from '../../constants';
25
- import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, MenubarSeparator, MenubarSub, MenubarSubTrigger, MenubarSubContent, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, } from 'components/Menubar';
26
- var meta = {
27
- title: 'Component/Menubar',
28
- component: Menubar,
29
- parameters: {
30
- layout: 'centered',
31
- themes: {
32
- themeOverride: 'dark',
33
- },
34
- docs: {
35
- description: {
36
- component: '리스트 형태의 선택할 수 있는 항목들이 나열된 인터페이스 요소 컴포넌트',
37
- },
38
- },
39
- },
40
- tags: ['autodocs'],
41
- argTypes: {
42
- radius: __assign(__assign({}, commonArgTypes.radius), { description: 'Menubar border 둥굴기' }),
43
- scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'Menubar 비율' }),
44
- size: __assign(__assign({}, commonArgTypes.size), { table: {
45
- category: 'Props',
46
- type: {
47
- summary: sizeOptions
48
- .filter(function (option) { return option === 'small' || option === 'medium'; })
49
- .join(' | '),
50
- },
51
- }, options: sizeOptions.filter(function (option) { return option === 'small' || option === 'medium'; }), description: 'Menubar 크기' }),
52
- color: __assign(__assign({}, commonArgTypes.color), { description: 'Menubar 메인 색' }),
53
- appearance: {
54
- description: 'Menubar 상단 메뉴 스타일',
55
- table: {
56
- category: 'Props',
57
- type: {
58
- summary: appearanceOptions
59
- .filter(function (option) { return option === 'solid' || option === 'ghost'; })
60
- .join(' | '),
61
- },
62
- },
63
- options: appearanceOptions.filter(function (option) { return option === 'solid' || option === 'ghost'; }),
64
- control: { type: 'select' },
65
- defaultValue: { summary: 'ghost' },
66
- },
67
- itemAppearance: {
68
- description: 'Menubar 하위 아이템 스타일',
69
- table: {
70
- category: 'Props',
71
- type: {
72
- summary: appearanceOptions
73
- .filter(function (option) { return option === 'solid' || option === 'ghost'; })
74
- .join(' | '),
75
- },
76
- },
77
- options: appearanceOptions.filter(function (option) { return option === 'solid' || option === 'ghost'; }),
78
- control: { type: 'select' },
79
- defaultValue: { summary: 'solid' },
80
- },
81
- },
82
- };
83
- export default meta;
84
- export var Default = function (_a) {
85
- var args = __rest(_a, []);
86
- var CHECK_ITEMS = ['북마크 항상 보여주기', '전체 주소 보여주기'];
87
- var RADIO_ITEMS = ['구글', '네이버', '인트라넷'];
88
- var _b = useState([CHECK_ITEMS[0]]), checkedSelection = _b[0], setCheckedSelection = _b[1];
89
- var _c = useState(RADIO_ITEMS[0]), radioSelection = _c[0], setRadioSelection = _c[1];
90
- return (<Menubar {...args}>
91
- {/* 메뉴-기본 */}
92
- <MenubarMenu>
93
- <MenubarTrigger>파일</MenubarTrigger>
94
- <MenubarContent>
95
- <MenubarItem shortcut="⌘ T">새 탭</MenubarItem>
96
- <MenubarItem shortcut="⌘ N">새 창</MenubarItem>
97
- <MenubarItem disabled>사용불가</MenubarItem>
98
- <MenubarSeparator />
99
- <MenubarSub>
100
- <MenubarSubTrigger>공유하기</MenubarSubTrigger>
101
- <MenubarSubContent>
102
- <MenubarItem>이메일</MenubarItem>
103
- <MenubarItem>메신저</MenubarItem>
104
- </MenubarSubContent>
105
- </MenubarSub>
106
- </MenubarContent>
107
- </MenubarMenu>
108
- {/* 메뉴-체크 */}
109
- <MenubarMenu>
110
- <MenubarTrigger>보기</MenubarTrigger>
111
- <MenubarContent>
112
- {CHECK_ITEMS.map(function (item) { return (<MenubarCheckboxItem key={item} checked={checkedSelection.includes(item)} onCheckedChange={function () {
113
- return setCheckedSelection(function (current) {
114
- return current.includes(item)
115
- ? current.filter(function (el) { return el !== item; })
116
- : current.concat(item);
117
- });
118
- }}>
119
- {item}
120
- </MenubarCheckboxItem>); })}
121
- </MenubarContent>
122
- </MenubarMenu>
123
- {/* 메뉴-라디오 */}
124
- <MenubarMenu>
125
- <MenubarTrigger>프로필</MenubarTrigger>
126
- <MenubarContent>
127
- <MenubarRadioGroup value={radioSelection} onValueChange={setRadioSelection}>
128
- {RADIO_ITEMS.map(function (item) { return (<MenubarRadioItem key={item} value={item}>
129
- {item}
130
- </MenubarRadioItem>); })}
131
- </MenubarRadioGroup>
132
- </MenubarContent>
133
- </MenubarMenu>
134
- </Menubar>);
135
- };