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

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.
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
- };