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

package/dist/stories/textfield/{TextField.stories.js → TextField.stories.jsx}

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextField, TextFieldSlot } from '../../components/TextField/index';
 import { commonArgTypes, radiusOptions } from '../../constants';
 import { DotsHorizontalIcon, MagnifyingGlassIcon } from '@radix-ui/react-icons';
@@ -68,21 +67,54 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args));
+    return <TextField placeholder="Search the docs..." {...args}/>;
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { size: 'small' })), _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { size: 'medium' })), _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { size: 'large' }))] }));
+    return (<div className="flex items-center gap-3">
+    <TextField placeholder="Search the docs..." {...args} size={'small'}></TextField>
+    <TextField placeholder="Search the docs..." {...args} size={'medium'}></TextField>
+    <TextField placeholder="Search the docs..." {...args} size={'large'}></TextField>
+  </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx("div", { children: radiusOptions.map(function (radius) { return (_jsx("div", { className: "pb-1", children: _jsx(TextField, __assign({ placeholder: "Search the docs...", radius: radius }, args), radius) }, radius)); }) }));
+    return (<div>
+    {radiusOptions.map(function (radius) { return (<div key={radius} className="pb-1">
+        <TextField placeholder="Search the docs..." key={radius} radius={radius} {...args}/>
+      </div>); })}
+  </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx("div", { children: ['classic', 'soft', 'surface'].map(function (appearance) { return (_jsx("div", { className: "pb-1", children: _jsx(TextField, __assign({ placeholder: "Search the docs...", appearance: appearance }, args), appearance) }, appearance)); }) }));
+    return (<div>
+    {['classic', 'soft', 'surface'].map(function (appearance) { return (<div key={appearance} className="pb-1">
+        <TextField placeholder="Search the docs..." key={appearance} appearance={appearance} {...args}/>
+      </div>); })}
+  </div>);
 };
 export var States = function (_a) {
     var args = __rest(_a, []);
-    return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { children: _jsx(TextFieldSlot, { children: _jsx(MagnifyingGlassIcon, { height: "16", width: "16" }) }) })), _jsx(TextField, __assign({ placeholder: "Search the docs..." }, args, { children: _jsx(TextFieldSlot, { side: 'right', children: _jsx(DotsHorizontalIcon, { height: "14", width: "14" }) }) })), _jsxs(TextField, __assign({}, args, { children: [_jsx(TextFieldSlot, { children: _jsx(MagnifyingGlassIcon, { height: "16", width: "16" }) }), _jsx(TextFieldSlot, { children: _jsx(DotsHorizontalIcon, { height: "14", width: "14" }) })] }))] }));
+    return (<div className="flex items-center gap-3">
+    <TextField placeholder="Search the docs..." {...args}>
+      <TextFieldSlot>
+        <MagnifyingGlassIcon height="16" width="16"/>
+      </TextFieldSlot>
+    </TextField>
+
+    <TextField placeholder="Search the docs..." {...args}>
+      <TextFieldSlot side={'right'}>
+        <DotsHorizontalIcon height="14" width="14"/>
+      </TextFieldSlot>
+    </TextField>
+
+    <TextField {...args}>
+      <TextFieldSlot>
+        <MagnifyingGlassIcon height="16" width="16"/>
+      </TextFieldSlot>
+      <TextFieldSlot>
+        <DotsHorizontalIcon height="14" width="14"/>
+      </TextFieldSlot>
+    </TextField>
+  </div>);
 };

package/dist/stories/toast/Toast.stories.d.ts

@@ -129,10 +129,10 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const NoTitleToast: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const NoButtonToast: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/dist/stories/toast/{Toast.stories.js → Toast.stories.jsx}

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { commonArgTypes, sizeOptions } from '../../constants';
 import { Toast, ToastDescription, ToastTitle, ToastActionButton } from 'components/Toast';
@@ -90,15 +89,34 @@ export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (_jsxs("div", { children: [_jsx(Button, { onClick: function () { return setOpen(true); }, children: "\uD1A0\uC2A4\uD2B8 \uBA54\uC138\uC9C0 \uD638\uCD9C" }), _jsxs(Toast, __assign({ openToast: open, setOpenToast: setOpen }, args, { children: [_jsx(ToastTitle, { titleText: args.titleText, children: "\uD1A0\uC2A4\uD2B8 \uD0C0\uC774\uD2C0" }), _jsx(ToastDescription, { contentText: args.contentText, children: "\uD1A0\uC2A4\uD2B8 \uB0B4\uC6A9\uC774 \uC704\uCE58\uD569\uB2C8\uB2E4" }), _jsx(ToastActionButton, { altText: "\uC561\uC158\uBC84\uD2BC", children: "Action" })] }))] }));
+    return (<div>
+      <Button onClick={function () { return setOpen(true); }}>토스트 메세지 호출</Button>
+      <Toast openToast={open} setOpenToast={setOpen} {...args}>
+        <ToastTitle titleText={args.titleText}>토스트 타이틀</ToastTitle>
+        <ToastDescription contentText={args.contentText}>토스트 내용이 위치합니다</ToastDescription>
+        <ToastActionButton altText="액션버튼">Action</ToastActionButton>
+      </Toast>
+    </div>);
 };
 export var NoTitleToast = function (_a) {
     var args = __rest(_a, []);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (_jsxs("div", { children: [_jsx(Button, { onClick: function () { return setOpen(true); }, children: "\uD0C0\uC774\uD2C0 \uC5C6\uC74C" }), _jsxs(Toast, __assign({ openToast: open, setOpenToast: setOpen }, args, { children: [_jsx(ToastDescription, { children: "\uD1A0\uC2A4\uD2B8 \uB0B4\uC6A9\uC774 \uC704\uCE58\uD569\uB2C8\uB2E4" }), _jsx(ToastActionButton, { altText: "\uC561\uC158\uBC84\uD2BC", children: "\uB2EB\uAE30" })] }))] }));
+    return (<div>
+      <Button onClick={function () { return setOpen(true); }}>타이틀 없음</Button>
+      <Toast openToast={open} setOpenToast={setOpen} {...args}>
+        <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
+        <ToastActionButton altText="액션버튼">닫기</ToastActionButton>
+      </Toast>
+    </div>);
 };
 export var NoButtonToast = function (_a) {
     var args = __rest(_a, []);
     var _b = useState(false), open = _b[0], setOpen = _b[1];
-    return (_jsxs("div", { children: [_jsx(Button, { onClick: function () { return setOpen(true); }, children: "\uBC84\uD2BC \uC5C6\uC74C" }), _jsxs(Toast, __assign({ openToast: open, setOpenToast: setOpen }, args, { children: [_jsx(ToastTitle, { children: "\uD1A0\uC2A4\uD2B8 \uD0C0\uC774\uD2C0" }), _jsx(ToastDescription, { children: "\uD1A0\uC2A4\uD2B8 \uB0B4\uC6A9\uC774 \uC704\uCE58\uD569\uB2C8\uB2E4" })] }))] }));
+    return (<div>
+      <Button onClick={function () { return setOpen(true); }}>버튼 없음</Button>
+      <Toast openToast={open} setOpenToast={setOpen} {...args}>
+        <ToastTitle>토스트 타이틀</ToastTitle>
+        <ToastDescription>토스트 내용이 위치합니다</ToastDescription>
+      </Toast>
+    </div>);
 };

package/dist/stories/toggle/Toggle.stories.d.ts

@@ -100,16 +100,16 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const Radius: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const Size: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const WithText: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const Appearance: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/dist/stories/toggle/{Toggle.stories.js → Toggle.stories.jsx}

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
 import { commonArgTypes, radiusOptions, sizeOptions, appearanceOptions } from '../../constants';
 import { FontBoldIcon } from '@radix-ui/react-icons';
 import { Toggle, ToggleWithText } from '../../components/Toggle';
@@ -69,21 +68,39 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx("div", { className: "flex items-center space-x-4", children: _jsx(Toggle, __assign({}, args, { "aria-label": "Toggle italic", children: _jsx(FontBoldIcon, {}) })) }));
+    return (<div className="flex items-center space-x-4">
+    <Toggle {...args} aria-label="Toggle italic">
+      <FontBoldIcon />
+    </Toggle>
+  </div>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx("div", { className: "flex items-center space-x-4", children: radiusOptions.map(function (radius) { return (_jsx(Toggle, __assign({ "aria-label": "Toggle italic" }, args, { radius: radius, children: _jsx(FontBoldIcon, {}) }), radius)); }) }));
+    return (<div className="flex items-center space-x-4">
+    {radiusOptions.map(function (radius) { return (<Toggle key={radius} aria-label="Toggle italic" {...args} radius={radius}>
+        <FontBoldIcon />
+      </Toggle>); })}
+  </div>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx("div", { className: "flex items-center space-x-4", children: ['small', 'medium', 'large'].map(function (size) { return (_jsx(Toggle, __assign({ "aria-label": "Toggle italic" }, args, { size: size, children: _jsx(FontBoldIcon, {}) }), size)); }) }));
+    return (<div className="flex items-center space-x-4">
+    {['small', 'medium', 'large'].map(function (size) { return (<Toggle key={size} aria-label="Toggle italic" {...args} size={size}>
+        <FontBoldIcon />
+      </Toggle>); })}
+  </div>);
 };
 export var WithText = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx(ToggleWithText, __assign({}, args, { "aria-label": "Toggle italic", text: 'Bold', children: _jsx(FontBoldIcon, {}) })));
+    return (<ToggleWithText {...args} aria-label="Toggle italic" text={'Bold'}>
+    <FontBoldIcon />
+  </ToggleWithText>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx("div", { className: "flex items-center space-x-4", children: ['ghost', 'soft', 'surface', 'outline'].map(function (appearance) { return (_jsx(Toggle, __assign({ "aria-label": "Toggle italic" }, args, { appearance: appearance, children: _jsx(FontBoldIcon, {}) }), appearance)); }) }));
+    return (<div className="flex items-center space-x-4">
+    {['ghost', 'soft', 'surface', 'outline'].map(function (appearance) { return (<Toggle key={appearance} aria-label="Toggle italic" {...args} appearance={appearance}>
+        <FontBoldIcon />
+      </Toggle>); })}
+  </div>);
 };

package/dist/stories/toggle/ToggleGroup.stories.d.ts

@@ -98,6 +98,6 @@ declare const meta: {
     };
 };
 export default meta;
-export declare const Default: ({ ...args }: any) => import("react/jsx-runtime").JSX.Element;
-export declare const Size: ({ ...args }: any) => import("react/jsx-runtime").JSX.Element;
-export declare const Appearance: ({ ...args }: any) => import("react/jsx-runtime").JSX.Element;
+export declare const Default: ({ ...args }: any) => import("react").JSX.Element;
+export declare const Size: ({ ...args }: any) => import("react").JSX.Element;
+export declare const Appearance: ({ ...args }: any) => import("react").JSX.Element;

package/dist/stories/toggle/{ToggleGroup.stories.js → ToggleGroup.stories.jsx}

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { commonArgTypes, sizeOptions, appearanceOptions } from '../../constants';
 import { FontBoldIcon, FontItalicIcon, UnderlineIcon } from '@radix-ui/react-icons';
 import { ToggleGroup, ToggleGroupItem } from '../../components/ToggleGroup';
@@ -78,17 +77,51 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (_jsxs(ToggleGroup, __assign({ type: 'single', defaultValue: 'left', "aria-label": "Text alignment" }, args, { children: [_jsx(ToggleGroupItem, __assign({ value: "left", "aria-label": "Left aligned" }, args, { children: _jsx(FontBoldIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "center", "aria-label": "Center aligned" }, args, { children: _jsx(FontItalicIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "right", "aria-label": "Right aligned" }, args, { children: _jsx(UnderlineIcon, {}) }))] })));
+    return (<ToggleGroup type={'single'} defaultValue={'left'} aria-label="Text alignment" {...args}>
+      <ToggleGroupItem value="left" aria-label="Left aligned" {...args}>
+        <FontBoldIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="center" aria-label="Center aligned" {...args}>
+        <FontItalicIcon />
+      </ToggleGroupItem>
+      <ToggleGroupItem value="right" aria-label="Right aligned" {...args}>
+        <UnderlineIcon />
+      </ToggleGroupItem>
+    </ToggleGroup>);
 };
 export var Size = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx("div", { className: "flex items-center space-x-4", children: sizeOptions
+    return (<div className="flex items-center space-x-4">
+    {sizeOptions
             .filter(function (size) { return !['x-small', 'x-large'].includes(size); })
-            .map(function (size) { return (_jsxs(ToggleGroup, __assign({ type: 'single', defaultValue: 'left', "aria-label": "Text alignment" }, args, { children: [_jsx(ToggleGroupItem, __assign({ value: "left", "aria-label": "Left aligned" }, args, { size: size, children: _jsx(FontBoldIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "center", "aria-label": "Center aligned" }, args, { size: size, children: _jsx(FontItalicIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "right", "aria-label": "Right aligned" }, args, { size: size, children: _jsx(UnderlineIcon, {}) }))] }), size)); }) }));
+            .map(function (size) { return (<ToggleGroup key={size} type={'single'} defaultValue={'left'} aria-label="Text alignment" {...args}>
+          <ToggleGroupItem value="left" aria-label="Left aligned" {...args} size={size}>
+            <FontBoldIcon />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="center" aria-label="Center aligned" {...args} size={size}>
+            <FontItalicIcon />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="right" aria-label="Right aligned" {...args} size={size}>
+            <UnderlineIcon />
+          </ToggleGroupItem>
+        </ToggleGroup>); })}
+  </div>);
 };
 export var Appearance = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx("div", { className: "flex items-center space-x-4", children: appearanceOptions
+    return (<div className="flex items-center space-x-4">
+    {appearanceOptions
             .filter(function (appearance) { return !['classic', 'solid'].includes(appearance); })
-            .map(function (appearance) { return (_jsxs(ToggleGroup, __assign({ type: 'single', defaultValue: 'left', "aria-label": "Text alignment" }, args, { children: [_jsx(ToggleGroupItem, __assign({ value: "left", "aria-label": "Left aligned" }, args, { appearance: appearance, children: _jsx(FontBoldIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "center", "aria-label": "Center aligned" }, args, { appearance: appearance, children: _jsx(FontItalicIcon, {}) })), _jsx(ToggleGroupItem, __assign({ value: "right", "aria-label": "Right aligned" }, args, { appearance: appearance, children: _jsx(UnderlineIcon, {}) }))] }), appearance)); }) }));
+            .map(function (appearance) { return (<ToggleGroup key={appearance} type={'single'} defaultValue={'left'} aria-label="Text alignment" {...args}>
+          <ToggleGroupItem value="left" aria-label="Left aligned" {...args} appearance={appearance}>
+            <FontBoldIcon />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="center" aria-label="Center aligned" {...args} appearance={appearance}>
+            <FontItalicIcon />
+          </ToggleGroupItem>
+          <ToggleGroupItem value="right" aria-label="Right aligned" {...args} appearance={appearance}>
+            <UnderlineIcon />
+          </ToggleGroupItem>
+        </ToggleGroup>); })}
+  </div>);
 };

package/dist/stories/tooltip/Tooltip.stories.d.ts

@@ -84,10 +84,10 @@ declare const meta: {
 export default meta;
 export declare const Default: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const Radius: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export declare const Position: ({ ...args }: {
     [x: string]: any;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;

package/dist/stories/tooltip/{Tooltip.stories.js → Tooltip.stories.jsx}

@@ -20,7 +20,6 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
 import { Tooltip } from '../../components/Tooltip/index';
 import { commonArgTypes, radiusOptions } from '../../constants';
 var meta = {
@@ -66,13 +65,27 @@ var meta = {
 export default meta;
 export var Default = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx(Tooltip, __assign({ content: "\uD234\uD301 \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uC6A9\uC785\uB2C8\uB2E4." }, args, { children: _jsx("div", { children: "\uB9C8\uC6B0\uC2A4 \uCEE4\uC11C\uB97C \uC62C\uB824\uC8FC\uC138\uC694" }) })));
+    return (<Tooltip content="툴팁 컴포넌트 내용입니다." {...args}>
+    <div>마우스 커서를 올려주세요</div>
+  </Tooltip>);
 };
 export var Radius = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx("div", { className: "", children: radiusOptions.map(function (radius, index) { return (_jsx("div", { className: "flex pt-3 items-center space-x-2", children: _jsx(Tooltip, __assign({ content: "\uD234\uD301 \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uC6A9\uC785\uB2C8\uB2E4.", radius: radius }, args, { children: _jsx("div", { children: "\uB9C8\uC6B0\uC2A4 \uCEE4\uC11C\uB97C \uC62C\uB824\uC8FC\uC138\uC694" }) })) }, radius)); }) }));
+    return (<div className="">
+    {radiusOptions.map(function (radius, index) { return (<div key={radius} className="flex pt-3 items-center space-x-2">
+        <Tooltip content="툴팁 컴포넌트 내용입니다." radius={radius} {...args}>
+          <div>마우스 커서를 올려주세요</div>
+        </Tooltip>
+      </div>); })}
+  </div>);
 };
 export var Position = function (_a) {
     var args = __rest(_a, []);
-    return (_jsx("div", { className: "", children: ['top', 'right', 'left', 'bottom'].map(function (side, index) { return (_jsx("div", { className: "flex pt-3 items-center space-x-2", children: _jsx(Tooltip, __assign({ content: "\uD234\uD301 \uCEF4\uD3EC\uB10C\uD2B8 \uB0B4\uC6A9\uC785\uB2C8\uB2E4.", side: side }, args, { children: _jsx("div", { children: "\uB9C8\uC6B0\uC2A4 \uCEE4\uC11C\uB97C \uC62C\uB824\uC8FC\uC138\uC694" }) })) }, side)); }) }));
+    return (<div className="">
+    {['top', 'right', 'left', 'bottom'].map(function (side, index) { return (<div key={side} className="flex pt-3 items-center space-x-2">
+        <Tooltip content="툴팁 컴포넌트 내용입니다." side={side} {...args}>
+          <div>마우스 커서를 올려주세요</div>
+        </Tooltip>
+      </div>); })}
+  </div>);
 };