@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.
- package/package.json +11 -2
- package/dist/app/layout.d.ts +0 -7
- package/dist/app/layout.jsx +0 -13
- package/dist/app/page.d.ts +0 -2
- package/dist/app/page.jsx +0 -9
- package/dist/app/template/colorPicker.d.ts +0 -7
- package/dist/app/template/colorPicker.jsx +0 -19
- package/dist/app/template/theme.d.ts +0 -12
- package/dist/app/template/theme.jsx +0 -17
- package/dist/stories/Welcome.d.ts +0 -3
- package/dist/stories/Welcome.jsx +0 -48
- package/dist/stories/accordion/Accordion.stories.d.ts +0 -71
- package/dist/stories/accordion/Accordion.stories.jsx +0 -79
- package/dist/stories/alert-dialog/AlertDialog.stories.d.ts +0 -107
- package/dist/stories/alert-dialog/AlertDialog.stories.jsx +0 -73
- package/dist/stories/aspect-ratio/AspectRatio.stories.d.ts +0 -68
- package/dist/stories/aspect-ratio/AspectRatio.stories.jsx +0 -106
- package/dist/stories/avatar/Avatar.stories.d.ts +0 -127
- package/dist/stories/avatar/Avatar.stories.jsx +0 -105
- package/dist/stories/badge/Badge.stories.d.ts +0 -133
- package/dist/stories/badge/Badge.stories.jsx +0 -130
- package/dist/stories/bubble-chart/BubbleChart.stories.d.ts +0 -103
- package/dist/stories/bubble-chart/BubbleChart.stories.jsx +0 -176
- package/dist/stories/button/Button.stories.d.ts +0 -148
- package/dist/stories/button/Button.stories.jsx +0 -98
- package/dist/stories/button/IconButton.stories.d.ts +0 -125
- package/dist/stories/button/IconButton.stories.jsx +0 -93
- package/dist/stories/callout/Callout.stories.d.ts +0 -129
- package/dist/stories/callout/Callout.stories.jsx +0 -205
- package/dist/stories/card/Card.stories.d.ts +0 -100
- package/dist/stories/card/Card.stories.jsx +0 -134
- package/dist/stories/checkbox/Checkbox.stories.d.ts +0 -147
- package/dist/stories/checkbox/Checkbox.stories.jsx +0 -166
- package/dist/stories/checkbox/CheckboxCard.stories.d.ts +0 -129
- package/dist/stories/checkbox/CheckboxCard.stories.jsx +0 -125
- package/dist/stories/checkbox/CheckboxGroup.stories.d.ts +0 -91
- package/dist/stories/checkbox/CheckboxGroup.stories.jsx +0 -144
- package/dist/stories/context-menu/ContextMenu.stories.d.ts +0 -113
- package/dist/stories/context-menu/ContextMenu.stories.jsx +0 -155
- package/dist/stories/data-list/DataList.stories.d.ts +0 -97
- package/dist/stories/data-list/DataList.stories.jsx +0 -185
- package/dist/stories/dialog/Dialog.stories.d.ts +0 -88
- package/dist/stories/dialog/Dialog.stories.jsx +0 -82
- package/dist/stories/doughnut-chart/DoughnutChart.stories.d.ts +0 -181
- package/dist/stories/doughnut-chart/DoughnutChart.stories.jsx +0 -236
- package/dist/stories/dropdown-menu/DropdownMenu.stories.d.ts +0 -112
- package/dist/stories/dropdown-menu/DropdownMenu.stories.jsx +0 -170
- package/dist/stories/header/Header.stories.d.ts +0 -112
- package/dist/stories/header/Header.stories.jsx +0 -116
- package/dist/stories/hover-card/HoverCard.stories.d.ts +0 -107
- package/dist/stories/hover-card/HoverCard.stories.jsx +0 -98
- package/dist/stories/inset/Inset.stories.d.ts +0 -58
- package/dist/stories/inset/Inset.stories.jsx +0 -79
- package/dist/stories/label/Label.stories.d.ts +0 -94
- package/dist/stories/label/Label.stories.jsx +0 -112
- package/dist/stories/menubar/Menubar.stories.d.ts +0 -119
- package/dist/stories/menubar/Menubar.stories.jsx +0 -135
- package/dist/stories/navigation-menu/NavigationMenu.stories.d.ts +0 -385
- package/dist/stories/navigation-menu/NavigationMenu.stories.jsx +0 -144
- package/dist/stories/pie-chart/PieChart.stories.d.ts +0 -186
- package/dist/stories/pie-chart/PieChart.stories.jsx +0 -300
- package/dist/stories/popover/Popover.stories.d.ts +0 -78
- package/dist/stories/popover/Popover.stories.jsx +0 -107
- package/dist/stories/progress/Progress.stories.d.ts +0 -113
- package/dist/stories/progress/Progress.stories.jsx +0 -82
- package/dist/stories/radar-chart/RadarChart.stories.d.ts +0 -111
- package/dist/stories/radar-chart/RadarChart.stories.jsx +0 -200
- package/dist/stories/radio/Radio.stories.d.ts +0 -108
- package/dist/stories/radio/Radio.stories.jsx +0 -94
- package/dist/stories/radio/RadioCards.stories.d.ts +0 -127
- package/dist/stories/radio/RadioCards.stories.jsx +0 -153
- package/dist/stories/radio/RadioGroup.stories.d.ts +0 -111
- package/dist/stories/radio/RadioGroup.stories.jsx +0 -142
- package/dist/stories/scroll-area/ScrollArea.stories.d.ts +0 -59
- package/dist/stories/scroll-area/ScrollArea.stories.jsx +0 -123
- package/dist/stories/segmented-control/SegmentedControl.stories.d.ts +0 -97
- package/dist/stories/segmented-control/SegmentedControl.stories.jsx +0 -101
- package/dist/stories/select/Select.stories.d.ts +0 -116
- package/dist/stories/select/Select.stories.jsx +0 -149
- package/dist/stories/separator/Separator.stories.d.ts +0 -93
- package/dist/stories/separator/Separator.stories.jsx +0 -106
- package/dist/stories/skeleton/Skeleton.stories.d.ts +0 -88
- package/dist/stories/skeleton/Skeleton.stories.jsx +0 -119
- package/dist/stories/slider/Slider.stories.d.ts +0 -114
- package/dist/stories/slider/Slider.stories.jsx +0 -94
- package/dist/stories/spinner/Spinner.stories.d.ts +0 -83
- package/dist/stories/spinner/Spinner.stories.jsx +0 -112
- package/dist/stories/switch/Switch.stories.d.ts +0 -146
- package/dist/stories/switch/Switch.stories.jsx +0 -119
- package/dist/stories/tab-nav/TabNav.stories.d.ts +0 -55
- package/dist/stories/tab-nav/TabNav.stories.jsx +0 -68
- package/dist/stories/table/Table.stories.d.ts +0 -87
- package/dist/stories/table/Table.stories.jsx +0 -106
- package/dist/stories/tabs/Tabs.stories.d.ts +0 -55
- package/dist/stories/tabs/Tabs.stories.jsx +0 -76
- package/dist/stories/text/Text.stories.d.ts +0 -74
- package/dist/stories/text/Text.stories.jsx +0 -91
- package/dist/stories/textArea/TextArea.stories.d.ts +0 -117
- package/dist/stories/textArea/TextArea.stories.jsx +0 -112
- package/dist/stories/textfield/TextField.stories.d.ts +0 -116
- package/dist/stories/textfield/TextField.stories.jsx +0 -120
- package/dist/stories/toast/Toast.stories.d.ts +0 -138
- package/dist/stories/toast/Toast.stories.jsx +0 -122
- package/dist/stories/toggle/Toggle.stories.d.ts +0 -115
- package/dist/stories/toggle/Toggle.stories.jsx +0 -106
- package/dist/stories/toggle/ToggleGroup.stories.d.ts +0 -103
- package/dist/stories/toggle/ToggleGroup.stories.jsx +0 -127
- package/dist/stories/tooltip/Tooltip.stories.d.ts +0 -93
- package/dist/stories/tooltip/Tooltip.stories.jsx +0 -91
- package/dist/tsconfig.tsbuildinfo +0 -1
|
@@ -1,106 +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 { Separator } from '../../components/Separator/index';
|
|
24
|
-
import { commonArgTypes } from '../../constants';
|
|
25
|
-
var meta = {
|
|
26
|
-
title: 'Component/Separator',
|
|
27
|
-
component: Separator,
|
|
28
|
-
parameters: {
|
|
29
|
-
layout: 'centered',
|
|
30
|
-
themes: {
|
|
31
|
-
themeOverride: 'dark',
|
|
32
|
-
},
|
|
33
|
-
docs: {
|
|
34
|
-
description: {
|
|
35
|
-
component: '시각적, 의미적으로 콘텐츠를 구분하는 선',
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
tags: ['autodocs'],
|
|
40
|
-
argTypes: {
|
|
41
|
-
scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'Separator component 크기' }),
|
|
42
|
-
color: __assign(__assign({}, commonArgTypes.color), { defaultValue: { summary: 'slate' }, description: 'Separator component 색상' }),
|
|
43
|
-
orientation: {
|
|
44
|
-
table: {
|
|
45
|
-
category: 'Props',
|
|
46
|
-
type: { summary: ['horizontal', 'vertical'].join(' | ') },
|
|
47
|
-
},
|
|
48
|
-
options: ['horizontal', 'vertical'],
|
|
49
|
-
description: 'Separator component 방향',
|
|
50
|
-
defaultValue: { summary: 'horizontal' },
|
|
51
|
-
// control: { type: 'select' },
|
|
52
|
-
},
|
|
53
|
-
size: {
|
|
54
|
-
table: {
|
|
55
|
-
category: 'Props',
|
|
56
|
-
type: { summary: ['small', 'medium', 'large', 'fill-large'].join(' | ') },
|
|
57
|
-
},
|
|
58
|
-
control: { type: 'select' },
|
|
59
|
-
options: ['small', 'medium', 'large', 'fill-large'],
|
|
60
|
-
defaultValue: { summary: 'medium' },
|
|
61
|
-
description: 'Separator component 크기',
|
|
62
|
-
},
|
|
63
|
-
},
|
|
64
|
-
};
|
|
65
|
-
export default meta;
|
|
66
|
-
export var Default = function (_a) {
|
|
67
|
-
var args = __rest(_a, []);
|
|
68
|
-
return (<div className="text-slate-12 dark:text-slate-1 w-full max-w-[300px] mx-[15px]">
|
|
69
|
-
Tools for building high-quality, accessible UI.
|
|
70
|
-
<Separator my="3" size="fill-large" {...args}/>
|
|
71
|
-
<div className="flex gap-3 text-slate-12 dark:text-slate-1 ">
|
|
72
|
-
Themes
|
|
73
|
-
<Separator orientation="vertical" {...args}/>
|
|
74
|
-
Primitives
|
|
75
|
-
<Separator orientation="vertical" {...args}/>
|
|
76
|
-
Icons
|
|
77
|
-
<Separator orientation="vertical" {...args}/>
|
|
78
|
-
Colors
|
|
79
|
-
</div>
|
|
80
|
-
</div>);
|
|
81
|
-
};
|
|
82
|
-
export var Orientation = function (_a) {
|
|
83
|
-
var args = __rest(_a, []);
|
|
84
|
-
return (<div className="grid grid-cols-2 gap-2">
|
|
85
|
-
<Separator orientation={'horizontal'} {...args}/>
|
|
86
|
-
<Separator orientation={'vertical'} {...args}/>
|
|
87
|
-
</div>);
|
|
88
|
-
};
|
|
89
|
-
export var HorizontalSize = function (_a) {
|
|
90
|
-
var args = __rest(_a, []);
|
|
91
|
-
return (<div className="w-96 grid gap-4">
|
|
92
|
-
<Separator orientation={'horizontal'} size={'small'} {...args}/>
|
|
93
|
-
<Separator orientation={'horizontal'} size={'medium'} {...args}/>
|
|
94
|
-
<Separator orientation={'horizontal'} size={'large'} {...args}/>
|
|
95
|
-
<Separator orientation={'horizontal'} size={'fill-large'} {...args}/>
|
|
96
|
-
</div>);
|
|
97
|
-
};
|
|
98
|
-
export var VerticalSize = function (_a) {
|
|
99
|
-
var args = __rest(_a, []);
|
|
100
|
-
return (<div className="h-60 grid grid-cols-4 gap-4">
|
|
101
|
-
<Separator orientation={'vertical'} size={'small'} {...args}/>
|
|
102
|
-
<Separator orientation={'vertical'} size={'medium'} {...args}/>
|
|
103
|
-
<Separator orientation={'vertical'} size={'large'} {...args}/>
|
|
104
|
-
<Separator orientation={'vertical'} size={'fill-large'} {...args}/>
|
|
105
|
-
</div>);
|
|
106
|
-
};
|
|
@@ -1,88 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { IRadius } from 'types';
|
|
3
|
-
declare const meta: {
|
|
4
|
-
title: string;
|
|
5
|
-
component: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("../../components/Skeleton/index").SkeletonProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
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
|
-
radius: {
|
|
20
|
-
defaultValue: {
|
|
21
|
-
summary: string;
|
|
22
|
-
};
|
|
23
|
-
description: string;
|
|
24
|
-
table: {
|
|
25
|
-
category: string;
|
|
26
|
-
type: {
|
|
27
|
-
summary: string;
|
|
28
|
-
};
|
|
29
|
-
};
|
|
30
|
-
options: IRadius[];
|
|
31
|
-
control: {
|
|
32
|
-
type: string;
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
loading: {
|
|
36
|
-
table: {
|
|
37
|
-
category: string;
|
|
38
|
-
type: {
|
|
39
|
-
summary: string;
|
|
40
|
-
};
|
|
41
|
-
};
|
|
42
|
-
options: boolean[];
|
|
43
|
-
control: {
|
|
44
|
-
type: string;
|
|
45
|
-
};
|
|
46
|
-
description: string;
|
|
47
|
-
defaultValue: {
|
|
48
|
-
summary: string;
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
width: {
|
|
52
|
-
table: {
|
|
53
|
-
category: string;
|
|
54
|
-
};
|
|
55
|
-
control: {
|
|
56
|
-
type: string;
|
|
57
|
-
};
|
|
58
|
-
description: string;
|
|
59
|
-
defaultValue: {};
|
|
60
|
-
};
|
|
61
|
-
height: {
|
|
62
|
-
table: {
|
|
63
|
-
category: string;
|
|
64
|
-
};
|
|
65
|
-
control: {
|
|
66
|
-
type: string;
|
|
67
|
-
};
|
|
68
|
-
description: string;
|
|
69
|
-
defaultValue: {};
|
|
70
|
-
};
|
|
71
|
-
};
|
|
72
|
-
};
|
|
73
|
-
export default meta;
|
|
74
|
-
export declare const Default: ({ ...args }: {
|
|
75
|
-
[x: string]: any;
|
|
76
|
-
}) => import("react").JSX.Element;
|
|
77
|
-
export declare const Loading: ({ ...args }: {
|
|
78
|
-
[x: string]: any;
|
|
79
|
-
}) => import("react").JSX.Element;
|
|
80
|
-
export declare const WithChildren: ({ ...args }: {
|
|
81
|
-
[x: string]: any;
|
|
82
|
-
}) => import("react").JSX.Element;
|
|
83
|
-
export declare const Radius: ({ ...args }: {
|
|
84
|
-
[x: string]: any;
|
|
85
|
-
}) => import("react").JSX.Element;
|
|
86
|
-
export declare const Size: ({ ...args }: {
|
|
87
|
-
[x: string]: any;
|
|
88
|
-
}) => import("react").JSX.Element;
|
|
@@ -1,119 +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 { Skeleton } from '../../components/Skeleton/index';
|
|
24
|
-
import { commonArgTypes, radiusOptions } from '../../constants';
|
|
25
|
-
import { ToggleSwitch } from '../../components/ToggleSwitch';
|
|
26
|
-
var meta = {
|
|
27
|
-
title: 'Component/Skeleton',
|
|
28
|
-
component: Skeleton,
|
|
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), { defaultValue: { summary: '' }, description: 'Skeleton 컴포넌트 둥글기' }),
|
|
43
|
-
loading: {
|
|
44
|
-
table: {
|
|
45
|
-
category: 'Props',
|
|
46
|
-
type: { summary: [true, false].join(' | ') },
|
|
47
|
-
},
|
|
48
|
-
options: [true, false],
|
|
49
|
-
control: { type: 'select' },
|
|
50
|
-
description: 'Skeleton 컴포넌트 visible',
|
|
51
|
-
defaultValue: { summary: 'true' },
|
|
52
|
-
},
|
|
53
|
-
width: {
|
|
54
|
-
table: {
|
|
55
|
-
category: 'Props',
|
|
56
|
-
},
|
|
57
|
-
control: { type: 'text' },
|
|
58
|
-
description: 'Skeleton 컴포넌트 가로길이',
|
|
59
|
-
defaultValue: {},
|
|
60
|
-
},
|
|
61
|
-
height: {
|
|
62
|
-
table: {
|
|
63
|
-
category: 'Props',
|
|
64
|
-
},
|
|
65
|
-
control: { type: 'text' },
|
|
66
|
-
description: 'Skeleton 컴포넌트 세로길이',
|
|
67
|
-
defaultValue: {},
|
|
68
|
-
},
|
|
69
|
-
},
|
|
70
|
-
};
|
|
71
|
-
export default meta;
|
|
72
|
-
export var Default = function (_a) {
|
|
73
|
-
var args = __rest(_a, []);
|
|
74
|
-
return (<Skeleton {...args}>
|
|
75
|
-
<div>Component</div>
|
|
76
|
-
</Skeleton>);
|
|
77
|
-
};
|
|
78
|
-
export var Loading = function (_a) {
|
|
79
|
-
var args = __rest(_a, []);
|
|
80
|
-
return (<div className="">
|
|
81
|
-
<Skeleton loading={true} {...args}>
|
|
82
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur
|
|
83
|
-
id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec
|
|
84
|
-
magna.
|
|
85
|
-
</Skeleton>
|
|
86
|
-
<Skeleton loading={false} {...args}>
|
|
87
|
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque felis tellus, efficitur
|
|
88
|
-
id convallis a, viverra eget libero. Nam magna erat, fringilla sed commodo sed, aliquet nec
|
|
89
|
-
magna.
|
|
90
|
-
</Skeleton>
|
|
91
|
-
</div>);
|
|
92
|
-
};
|
|
93
|
-
export var WithChildren = function (_a) {
|
|
94
|
-
var args = __rest(_a, []);
|
|
95
|
-
return (<div className="grid gap-4 grid-cols-2">
|
|
96
|
-
<Skeleton loading={true}>
|
|
97
|
-
<ToggleSwitch />
|
|
98
|
-
</Skeleton>
|
|
99
|
-
<Skeleton loading={false}>
|
|
100
|
-
<ToggleSwitch />
|
|
101
|
-
</Skeleton>
|
|
102
|
-
</div>);
|
|
103
|
-
};
|
|
104
|
-
export var Radius = function (_a) {
|
|
105
|
-
var args = __rest(_a, []);
|
|
106
|
-
return (<div className="grid gap-5">
|
|
107
|
-
{radiusOptions.map(function (radius) { return (<div key={radius}>
|
|
108
|
-
<Skeleton loading={true} radius={radius} {...args}>
|
|
109
|
-
<div>Component</div>
|
|
110
|
-
</Skeleton>
|
|
111
|
-
</div>); })}
|
|
112
|
-
</div>);
|
|
113
|
-
};
|
|
114
|
-
export var Size = function (_a) {
|
|
115
|
-
var args = __rest(_a, []);
|
|
116
|
-
return (<div className="">
|
|
117
|
-
<Skeleton loading={true} width="48px" height="48px" {...args}/>
|
|
118
|
-
</div>);
|
|
119
|
-
};
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import { IRadius } from 'types';
|
|
3
|
-
declare const meta: {
|
|
4
|
-
title: string;
|
|
5
|
-
component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/themes").SliderProps & import("react").RefAttributes<HTMLSpanElement>, "ref"> & import("../../components/Slider/index").SliderProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
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: import("types").IScaling[];
|
|
31
|
-
defaultValue: {
|
|
32
|
-
summary: string;
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
radius: {
|
|
36
|
-
description: string;
|
|
37
|
-
table: {
|
|
38
|
-
category: string;
|
|
39
|
-
type: {
|
|
40
|
-
summary: string;
|
|
41
|
-
};
|
|
42
|
-
};
|
|
43
|
-
options: IRadius[];
|
|
44
|
-
control: {
|
|
45
|
-
type: string;
|
|
46
|
-
};
|
|
47
|
-
defaultValue: {
|
|
48
|
-
summary: string;
|
|
49
|
-
};
|
|
50
|
-
};
|
|
51
|
-
color: {
|
|
52
|
-
description: string;
|
|
53
|
-
table: {
|
|
54
|
-
category: string;
|
|
55
|
-
type: {
|
|
56
|
-
summary: string;
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
|
-
options: import("types").IColor[];
|
|
60
|
-
control: {
|
|
61
|
-
type: string;
|
|
62
|
-
};
|
|
63
|
-
defaultValue: {
|
|
64
|
-
summary: string;
|
|
65
|
-
};
|
|
66
|
-
};
|
|
67
|
-
appearance: {
|
|
68
|
-
table: {
|
|
69
|
-
category: string;
|
|
70
|
-
type: {
|
|
71
|
-
summary: string;
|
|
72
|
-
};
|
|
73
|
-
};
|
|
74
|
-
control: {
|
|
75
|
-
type: string;
|
|
76
|
-
};
|
|
77
|
-
defaultValue: {
|
|
78
|
-
summary: string;
|
|
79
|
-
};
|
|
80
|
-
description: string;
|
|
81
|
-
options: string[];
|
|
82
|
-
};
|
|
83
|
-
size: {
|
|
84
|
-
table: {
|
|
85
|
-
category: string;
|
|
86
|
-
type: {
|
|
87
|
-
summary: string;
|
|
88
|
-
};
|
|
89
|
-
};
|
|
90
|
-
control: {
|
|
91
|
-
type: string;
|
|
92
|
-
};
|
|
93
|
-
options: string[];
|
|
94
|
-
defaultValue: {
|
|
95
|
-
summary: string;
|
|
96
|
-
color: string;
|
|
97
|
-
};
|
|
98
|
-
description: string;
|
|
99
|
-
};
|
|
100
|
-
};
|
|
101
|
-
};
|
|
102
|
-
export default meta;
|
|
103
|
-
export declare const Default: ({ ...args }: {
|
|
104
|
-
[x: string]: any;
|
|
105
|
-
}) => import("react").JSX.Element;
|
|
106
|
-
export declare const Size: ({ ...args }: {
|
|
107
|
-
[x: string]: any;
|
|
108
|
-
}) => import("react").JSX.Element;
|
|
109
|
-
export declare const Radius: ({ ...args }: {
|
|
110
|
-
[x: string]: any;
|
|
111
|
-
}) => import("react").JSX.Element;
|
|
112
|
-
export declare const Range: ({ ...args }: {
|
|
113
|
-
[x: string]: any;
|
|
114
|
-
}) => import("react").JSX.Element;
|
|
@@ -1,94 +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 { Slider } from '../../components/Slider/index';
|
|
24
|
-
import { commonArgTypes, radiusOptions } from '../../constants';
|
|
25
|
-
var meta = {
|
|
26
|
-
title: 'Component/Slider',
|
|
27
|
-
component: Slider,
|
|
28
|
-
parameters: {
|
|
29
|
-
layout: 'centered',
|
|
30
|
-
themes: {
|
|
31
|
-
themeOverride: 'dark',
|
|
32
|
-
},
|
|
33
|
-
docs: {
|
|
34
|
-
description: {
|
|
35
|
-
component: '입력 가능한 값을 확인하고, 버튼을 밀고 당기며 값을 조절하는 기능',
|
|
36
|
-
},
|
|
37
|
-
},
|
|
38
|
-
},
|
|
39
|
-
tags: ['autodocs'],
|
|
40
|
-
argTypes: {
|
|
41
|
-
scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'Slider Bar 길이' }),
|
|
42
|
-
radius: __assign(__assign({}, commonArgTypes.radius), { description: 'Slider Bar 둥글기' }),
|
|
43
|
-
color: __assign(__assign({}, commonArgTypes.color), { description: 'Slider 색상' }),
|
|
44
|
-
appearance: {
|
|
45
|
-
table: {
|
|
46
|
-
category: 'Props',
|
|
47
|
-
type: { summary: ['classic', 'soft', 'surface'].join(' | ') },
|
|
48
|
-
},
|
|
49
|
-
control: { type: 'select' },
|
|
50
|
-
defaultValue: { summary: 'surface' },
|
|
51
|
-
description: 'Slider 스타일',
|
|
52
|
-
options: ['classic', 'soft', 'surface'],
|
|
53
|
-
},
|
|
54
|
-
size: {
|
|
55
|
-
table: {
|
|
56
|
-
category: 'Props',
|
|
57
|
-
type: { summary: ['small', 'medium', 'large'].join(' | ') },
|
|
58
|
-
},
|
|
59
|
-
control: { type: 'select' },
|
|
60
|
-
options: ['small', 'medium', 'large'],
|
|
61
|
-
defaultValue: { summary: 'medium', color: 'red' },
|
|
62
|
-
description: 'Slider 크기',
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
};
|
|
66
|
-
export default meta;
|
|
67
|
-
export var Default = function (_a) {
|
|
68
|
-
var args = __rest(_a, []);
|
|
69
|
-
return (<div className="w-60">
|
|
70
|
-
<Slider defaultValue={[50]} {...args}/>
|
|
71
|
-
</div>);
|
|
72
|
-
};
|
|
73
|
-
export var Size = function (_a) {
|
|
74
|
-
var args = __rest(_a, []);
|
|
75
|
-
return (<div className="w-60 grid items-center gap-3">
|
|
76
|
-
<Slider defaultValue={[50]} {...args} size={'small'}></Slider>
|
|
77
|
-
<Slider defaultValue={[50]} {...args} size={'medium'}></Slider>
|
|
78
|
-
<Slider defaultValue={[50]} {...args} size={'large'}></Slider>
|
|
79
|
-
</div>);
|
|
80
|
-
};
|
|
81
|
-
export var Radius = function (_a) {
|
|
82
|
-
var args = __rest(_a, []);
|
|
83
|
-
return (<div className="w-60">
|
|
84
|
-
{radiusOptions.map(function (radius) { return (<div key={radius} className="pb-1">
|
|
85
|
-
<Slider key={radius} defaultValue={[50]} radius={radius} {...args}/>
|
|
86
|
-
</div>); })}
|
|
87
|
-
</div>);
|
|
88
|
-
};
|
|
89
|
-
export var Range = function (_a) {
|
|
90
|
-
var args = __rest(_a, []);
|
|
91
|
-
return (<div className="w-60">
|
|
92
|
-
<Slider defaultValue={[20, 80]} {...args}/>
|
|
93
|
-
</div>);
|
|
94
|
-
};
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
declare const meta: {
|
|
3
|
-
title: string;
|
|
4
|
-
component: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("../../components/Spinner/index").SpinnerProps & import("react").RefAttributes<HTMLSpanElement>>;
|
|
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
|
-
loading: {
|
|
19
|
-
table: {
|
|
20
|
-
category: string;
|
|
21
|
-
type: {
|
|
22
|
-
summary: string;
|
|
23
|
-
};
|
|
24
|
-
};
|
|
25
|
-
options: boolean[];
|
|
26
|
-
control: {
|
|
27
|
-
type: string;
|
|
28
|
-
};
|
|
29
|
-
description: string;
|
|
30
|
-
defaultValue: {
|
|
31
|
-
summary: boolean;
|
|
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
|
-
control: {
|
|
58
|
-
type: string;
|
|
59
|
-
};
|
|
60
|
-
options: string[];
|
|
61
|
-
defaultValue: {
|
|
62
|
-
summary: string;
|
|
63
|
-
};
|
|
64
|
-
description: string;
|
|
65
|
-
};
|
|
66
|
-
};
|
|
67
|
-
};
|
|
68
|
-
export default meta;
|
|
69
|
-
export declare const Default: ({ ...args }: {
|
|
70
|
-
[x: string]: any;
|
|
71
|
-
}) => import("react").JSX.Element;
|
|
72
|
-
export declare const Loading: ({ ...args }: {
|
|
73
|
-
[x: string]: any;
|
|
74
|
-
}) => import("react").JSX.Element;
|
|
75
|
-
export declare const WithChildren: ({ ...args }: {
|
|
76
|
-
[x: string]: any;
|
|
77
|
-
}) => import("react").JSX.Element;
|
|
78
|
-
export declare const WithButton: ({ ...args }: {
|
|
79
|
-
[x: string]: any;
|
|
80
|
-
}) => import("react").JSX.Element;
|
|
81
|
-
export declare const Size: ({ ...args }: {
|
|
82
|
-
[x: string]: any;
|
|
83
|
-
}) => import("react").JSX.Element;
|