@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
package/package.json CHANGED
@@ -1,11 +1,20 @@
1
1
  {
2
2
  "name": "@lotte-innovate/ui-component-test",
3
3
  "description": "Lotte UI Library",
4
- "version": "0.0.14",
4
+ "version": "0.0.15",
5
5
  "private": false,
6
6
  "type": "module",
7
7
  "files": [
8
- "dist"
8
+ "dist/color",
9
+ "dist/components",
10
+ "dist/Typography",
11
+ "dist/utils",
12
+ "dist/constants.d.ts",
13
+ "dist/constants.js",
14
+ "dist/index.d.ts",
15
+ "dist/index.js",
16
+ "dist/types.d.ts",
17
+ "dist/types.js"
9
18
  ],
10
19
  "main": "dist/index.js",
11
20
  "module": "dist/index.js",
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- import type { Metadata } from 'next';
3
- import './globals.css';
4
- export declare const metadata: Metadata;
5
- export default function RootLayout({ children, }: Readonly<{
6
- children: React.ReactNode;
7
- }>): import("react").JSX.Element;
@@ -1,13 +0,0 @@
1
- import { Inter } from 'next/font/google';
2
- import './globals.css';
3
- var inter = Inter({ subsets: ['latin'] });
4
- export var metadata = {
5
- title: 'Create Next App',
6
- description: 'Generated by create next app',
7
- };
8
- export default function RootLayout(_a) {
9
- var children = _a.children;
10
- return (<html lang="en">
11
- <body className={inter.className}>{children}</body>
12
- </html>);
13
- }
@@ -1,2 +0,0 @@
1
- import React from 'react';
2
- export default function Home(): React.JSX.Element;
package/dist/app/page.jsx DELETED
@@ -1,9 +0,0 @@
1
- 'use client';
2
- import React from 'react';
3
- import { Button, IconButton } from '@lotte-innovate/ui-component-test';
4
- export default function Home() {
5
- return (<div className="flex m-2">
6
- <Button>버튼</Button>
7
- <IconButton />
8
- </div>);
9
- }
@@ -1,7 +0,0 @@
1
- /// <reference types="react" />
2
- import { IColor } from 'types';
3
- declare const ColorPicker: ({ setColorTheme, }: {
4
- setColorTheme: (color: IColor) => void;
5
- mode: string;
6
- }) => import("react").JSX.Element;
7
- export default ColorPicker;
@@ -1,19 +0,0 @@
1
- 'use client';
2
- import { bgColorStyle } from '../../constants';
3
- var ColorPicker = function (_a) {
4
- var setColorTheme = _a.setColorTheme;
5
- var handleColorClick = function (color) {
6
- setColorTheme(color);
7
- };
8
- return (<div>
9
- <div className="flex flex-row flex-wrap gap-2">
10
- {Object.entries(bgColorStyle).map(function (_a) {
11
- var key = _a[0], value = _a[1];
12
- return (<button className={"w-12 p-2 rounded-full text-xs cursor-pointer hover:border-gray-900 ".concat(value, " text-white hover:text-black")} key={key}>
13
- {key.replace('Dark', '')}
14
- </button>);
15
- })}
16
- </div>
17
- </div>);
18
- };
19
- export default ColorPicker;
@@ -1,12 +0,0 @@
1
- import React, { Dispatch, SetStateAction } from 'react';
2
- import { IColor, IRadius, IScaling, IWeight } from 'types';
3
- type ITheme = {
4
- setRadiusTheme: Dispatch<SetStateAction<IRadius>>;
5
- setScalingTheme: Dispatch<SetStateAction<IScaling>>;
6
- setFontWeightTheme: Dispatch<SetStateAction<IWeight>>;
7
- setColorTheme: Dispatch<SetStateAction<IColor>>;
8
- setFontColorTheme: Dispatch<SetStateAction<IColor>>;
9
- mode: string;
10
- };
11
- declare const Theme: ({ setRadiusTheme, setScalingTheme, setFontWeightTheme, setColorTheme, setFontColorTheme, mode, }: ITheme) => React.JSX.Element;
12
- export default Theme;
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- import ColorPicker from './colorPicker';
3
- var Theme = function (_a) {
4
- var setRadiusTheme = _a.setRadiusTheme, setScalingTheme = _a.setScalingTheme, setFontWeightTheme = _a.setFontWeightTheme, setColorTheme = _a.setColorTheme, setFontColorTheme = _a.setFontColorTheme, mode = _a.mode;
5
- var setColor = function (color) {
6
- setColorTheme(color);
7
- setFontColorTheme(color);
8
- };
9
- return (<div className="flex flex-col p-3">
10
- <p className="text-2xl font-bold">Themes</p>
11
- <div className="flex flex-col text-xl gap-2">
12
- Accent Color
13
- <ColorPicker mode={mode} setColorTheme={setColor}/>
14
- </div>
15
- </div>);
16
- };
17
- export default Theme;
@@ -1,3 +0,0 @@
1
- import React from 'react';
2
- declare const Welcome: () => React.JSX.Element;
3
- export default Welcome;
@@ -1,48 +0,0 @@
1
- import React, { useEffect } from 'react';
2
- import Landing from './assets/landing.svg';
3
- import Logo from './assets/logo.svg';
4
- import Figma from './assets/figma.svg';
5
- import Gitlab from './assets/gitlab.svg';
6
- import Image from 'next/image';
7
- import Button from 'components/Button';
8
- var addParentClass = function () {
9
- var elements = document.querySelectorAll('.welcome-wrap');
10
- elements.forEach(function (element) {
11
- var parent = element.parentElement.parentElement;
12
- if (parent) {
13
- parent.classList.add('welcome-wrap-layout');
14
- }
15
- });
16
- };
17
- var Welcome = function () {
18
- useEffect(function () {
19
- addParentClass();
20
- }, []);
21
- var navigateToGitlab = function () {
22
- window.open('http://s-gitlab.ldcc.co.kr/l-ui/ui-component', '_blank');
23
- };
24
- var navigateToFigma = function () {
25
- window.open('https://www.figma.com/design/tlcB7UYdvUNzPk5T66FqLf/UI-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EA%B3%B5%EC%9C%A0%EC%9A%A9?node-id=0-1&t=k7fMSU17MKc42lzy-0', '_blank');
26
- };
27
- return (<div className="welcome-wrap">
28
- <div>
29
- <div>
30
- <Image className="w-[150px] h-auto" layout="fixed" src={Logo} alt="LOTTE INNOVATE"/>
31
- <p className="welcome-sub">Style Guide UI Kit</p>
32
- <h1 className="welcome-title">LOTTE UI Library</h1>
33
- </div>
34
- <div className="flex gap-2 pt-[40px]">
35
- <Button color="slate" radius="medium" scaling="100%" weight="medium" size={'x-large'} appearance={'outline'} onClick={navigateToGitlab} className="relative z-10">
36
- <Image src={Gitlab} width={0} height={0} alt="Gitlab" className="mr-2"/>
37
- GitLab
38
- </Button>
39
- <Button color="slate" radius="medium" scaling="100%" weight="medium" size={'x-large'} appearance={'outline'} onClick={navigateToFigma} className="relative z-10">
40
- <Image src={Figma} width={0} height={0} alt="Figma" className="mr-2"/>
41
- Figma
42
- </Button>
43
- </div>
44
- </div>
45
- <Image className="absolute bottom-0 w-auto" src={Landing} width={0} height={0} alt="컴포넌트 이미지입니다."/>
46
- </div>);
47
- };
48
- export default Welcome;
@@ -1,71 +0,0 @@
1
- /// <reference types="react" />
2
- declare const meta: {
3
- title: string;
4
- component: import("react").ForwardRefExoticComponent<((Omit<import("@radix-ui/react-accordion").AccordionSingleProps & import("react").RefAttributes<HTMLDivElement>, "ref"> | Omit<import("@radix-ui/react-accordion").AccordionMultipleProps & import("react").RefAttributes<HTMLDivElement>, "ref">) & import("../../components/Accordion/index").AccordionProps) & 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
- color: {
19
- description: string;
20
- table: {
21
- category: string;
22
- type: {
23
- summary: string;
24
- };
25
- };
26
- options: import("types").IColor[];
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
- type: {
51
- description: string;
52
- defaultValue: {
53
- summary: string;
54
- };
55
- table: {
56
- category: string;
57
- type: {
58
- summary: string;
59
- };
60
- };
61
- options: string[];
62
- control: {
63
- type: string;
64
- };
65
- };
66
- };
67
- };
68
- export default meta;
69
- export declare const Default: ({ ...args }: {
70
- [x: string]: any;
71
- }) => import("react").JSX.Element;
@@ -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 { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from '../../components/Accordion/index';
24
- import { commonArgTypes } from '../../constants';
25
- var meta = {
26
- title: 'Component/Accordion',
27
- component: Accordion,
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
- color: __assign(__assign({}, commonArgTypes.color), { description: 'Accordion 색상' }),
42
- scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'Accordion 크기' }),
43
- type: {
44
- description: 'Accordion 항목을 하나 또는 여러개 열 수 있는지 설정',
45
- defaultValue: { summary: 'single' },
46
- table: {
47
- category: 'Props',
48
- type: { summary: ['single', 'multiple'].join(' | ') },
49
- },
50
- options: ['single', 'multiple'],
51
- control: { type: 'select' },
52
- },
53
- },
54
- };
55
- export default meta;
56
- export var Default = function (_a) {
57
- var _b;
58
- var args = __rest(_a, []);
59
- return (<Accordion defaultValue="item-1" type={(_b = args.type) !== null && _b !== void 0 ? _b : 'single'} {...args}>
60
- <AccordionItem value="item-1">
61
- <AccordionTrigger {...args}>리액트는 무엇인가요?</AccordionTrigger>
62
- <AccordionContent>
63
- 리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
64
- </AccordionContent>
65
- </AccordionItem>
66
-
67
- <AccordionItem value="item-2">
68
- <AccordionTrigger {...args}>자바스크립트란 무엇인가요?</AccordionTrigger>
69
- <AccordionContent>자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다.</AccordionContent>
70
- </AccordionItem>
71
-
72
- <AccordionItem value="item-3" disabled={true}>
73
- <AccordionTrigger {...args}>Can it be animated?</AccordionTrigger>
74
- <AccordionContent>
75
- Yes! You can animate the Accordion with CSS or JavaScript.
76
- </AccordionContent>
77
- </AccordionItem>
78
- </Accordion>);
79
- };
@@ -1,107 +0,0 @@
1
- /// <reference types="react" />
2
- declare const meta: {
3
- title: string;
4
- component: import("react").ForwardRefExoticComponent<import("@radix-ui/react-alert-dialog").AlertDialogProps & import("components/AlertDialog").AlertDialogProps & import("react").RefAttributes<never>>;
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
- defaultValue: {
21
- summary: string;
22
- };
23
- table: {
24
- category: string;
25
- type: {
26
- summary: string;
27
- };
28
- };
29
- options: import("types").IRadius[];
30
- control: {
31
- type: string;
32
- };
33
- };
34
- size: {
35
- table: {
36
- category: string;
37
- type: {
38
- summary: string;
39
- };
40
- };
41
- options: import("types").ISize[];
42
- description: string;
43
- defaultValue: {
44
- summary: string;
45
- };
46
- control: {
47
- type: string;
48
- };
49
- };
50
- scaling: {
51
- description: string;
52
- table: {
53
- category: string;
54
- type: {
55
- summary: string;
56
- };
57
- };
58
- control: {
59
- type: string;
60
- };
61
- options: import("types").IScaling[];
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
- titleText: {
83
- description: string;
84
- table: {
85
- category: string;
86
- type: {
87
- summary: string;
88
- };
89
- };
90
- control: string;
91
- };
92
- contentText: {
93
- description: string;
94
- table: {
95
- category: string;
96
- type: {
97
- summary: string;
98
- };
99
- };
100
- control: string;
101
- };
102
- };
103
- };
104
- export default meta;
105
- export declare const Default: ({ ...args }: {
106
- [x: string]: any;
107
- }) => import("react").JSX.Element;
@@ -1,73 +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, sizeOptions } from '../../constants';
24
- import Button from 'components/Button';
25
- import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogTitle, AlertDialogTrigger, } from 'components/AlertDialog';
26
- var meta = {
27
- title: 'Component/AlertDialog',
28
- component: AlertDialog,
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: 'AlertDialog 테두리, Dialog 내 버튼 border 둥굴기', defaultValue: { summary: 'large' } }),
43
- size: __assign(__assign({}, commonArgTypes.size), { table: {
44
- category: 'Props',
45
- type: {
46
- summary: sizeOptions.filter(function (option) { return option !== 'x-small'; }).join(' | '),
47
- },
48
- }, options: sizeOptions.filter(function (option) { return option !== 'x-small'; }), description: 'AlertDialog 크기', defaultValue: { summary: 'large' } }),
49
- scaling: __assign(__assign({}, commonArgTypes.scaling), { description: 'AlertDialog 비율' }),
50
- color: __assign(__assign({}, commonArgTypes.color), { description: 'Action Button 메인 색' }),
51
- titleText: __assign(__assign({}, commonArgTypes.basicText), { description: 'AlertDialog 타이틀 텍스트' }),
52
- contentText: __assign(__assign({}, commonArgTypes.basicText), { description: 'AlertDialog 내용 텍스트' }),
53
- },
54
- };
55
- export default meta;
56
- export var Default = function (_a) {
57
- var args = __rest(_a, []);
58
- return (<AlertDialog>
59
- <AlertDialogTrigger>
60
- <Button>버튼을 클릭해주세요</Button>
61
- </AlertDialogTrigger>
62
- <AlertDialogContent {...args}>
63
- <AlertDialogTitle {...args}>AlertDialog 제목</AlertDialogTitle>
64
- <AlertDialogDescription {...args}>
65
- AlertDialog 내용이 들어갈 공간입니다.
66
- </AlertDialogDescription>
67
- <div className="flex justify-end">
68
- <AlertDialogCancel {...args}>취소</AlertDialogCancel>
69
- <AlertDialogAction {...args}>확인</AlertDialogAction>
70
- </div>
71
- </AlertDialogContent>
72
- </AlertDialog>);
73
- };
@@ -1,68 +0,0 @@
1
- /// <reference types="react" />
2
- import { IScaling } from 'types';
3
- declare const meta: {
4
- title: string;
5
- component: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-aspect-ratio").AspectRatioProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("components/AspectRatio").AspectRatioProps & import("react").RefAttributes<HTMLDivElement>>;
6
- parameters: {
7
- layout: string;
8
- docs: {
9
- description: {
10
- component: string;
11
- };
12
- };
13
- };
14
- tags: string[];
15
- argTypes: {
16
- ratio: {
17
- table: {
18
- category: string;
19
- type: {
20
- summary: string;
21
- };
22
- };
23
- options: string[];
24
- mapping: {
25
- '1': number;
26
- '5/4': number;
27
- '5/3': number;
28
- '5/2': number;
29
- '5/1': number;
30
- '16/9': number;
31
- };
32
- control: {
33
- type: string;
34
- };
35
- description: string;
36
- defaultValue: {
37
- summary: string;
38
- };
39
- };
40
- scaling: {
41
- description: string;
42
- table: {
43
- category: string;
44
- type: {
45
- summary: string;
46
- };
47
- };
48
- control: {
49
- type: string;
50
- };
51
- options: IScaling[];
52
- defaultValue: {
53
- summary: string;
54
- };
55
- };
56
- };
57
- args: {};
58
- };
59
- export default meta;
60
- export declare const Default: ({ ...args }: {
61
- [x: string]: any;
62
- }) => import("react").JSX.Element;
63
- export declare const Ratio: ({ ...args }: {
64
- [x: string]: any;
65
- }) => import("react").JSX.Element;
66
- export declare const Scaling: ({ ...args }: {
67
- [x: string]: any;
68
- }) => import("react").JSX.Element;