pds-dev-kit-web-test 0.1.3 → 0.1.5

package/dist/src/mobile/components/MobileTabBar/MobileTabBar.stories.js

@@ -0,0 +1,79 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_router_dom_1 = require("react-router-dom");
+var MobileTabBar_1 = __importDefault(require("./MobileTabBar"));
+exports.default = {
+    title: 'mobile/components/MobileTabBar',
+    component: MobileTabBar_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'mobile환경에 최적화 된 MobileTabBar 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        itemArray: {
+            description: 'tab item의 title, isActive, onClick 이벤트 값 리스트 입니다.',
+            control: null,
+            table: {
+                type: {
+                    detail: '{\n  title: PDSTextType,\n  isActive: Boolean,\n  onClick: () => void\n}[]'
+                }
+            }
+        },
+        colorTheme: {
+            description: '컬러의 프리셋 테마입니다.',
+            control: { type: 'inline-radio' }
+        },
+        textArray: {
+            description: '`deprecated v1.5.0` 해당 필드 대신 `itemArray`를 사용하세요.',
+            control: { type: 'array' },
+            table: {
+                category: 'deprecated'
+            }
+        }
+    },
+    decorators: [function (story) { return (0, jsx_runtime_1.jsx)(react_router_dom_1.HashRouter, { children: story() }, void 0); }]
+};
+var Default = function (args) {
+    var _a = (0, react_1.useState)(''), selectedItem = _a[0], setSelectedItem = _a[1];
+    return ((0, jsx_runtime_1.jsx)(MobileTabBar_1.default, __assign({}, args, { itemArray: [
+            {
+                title: '전체 보기',
+                isActive: selectedItem === '전체 보기',
+                onClick: function () { return setSelectedItem('전체 보기'); }
+            },
+            {
+                title: '홈으로',
+                isActive: selectedItem === '홈으로',
+                onClick: function () { return setSelectedItem('홈으로'); }
+            },
+            {
+                title: '내 정보',
+                isActive: selectedItem === '내 정보',
+                onClick: function () { return setSelectedItem('내 정보'); }
+            }
+        ] }), void 0));
+};
+exports.Default = Default;
+exports.Default.args = {
+    colorTheme: 'none'
+};

package/dist/src/mobile/components/Radio/Radio.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common';
 declare type RadioProps = {
     text?: PDSTextType;
     fontWeight?: 'bold' | 'regular';

package/dist/src/mobile/components/Radio/Radio.js

@@ -3,11 +3,22 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 var hybrid_1 = require("../../../hybrid");
 var TextLabel_1 = require("../TextLabel");
@@ -21,23 +32,16 @@ function Radio(_a) {
     var icon = function () {
         switch (state) {
             case 'normal': {
-                return checked ? (react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" })) : (react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_radio_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }));
+                return checked ? ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_default" }, void 0));
             }
             case 'disabled': {
-                return checked ? (react_1.default.createElement(S_OverrideIconWrapper, null,
-                    react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }),
-                    react_1.default.createElement(S_OverrideIcon, null,
-                        react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" })))) : (react_1.default.createElement(hybrid_1.Icon, { size: 16, iconName: "ic_radio_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }));
+                return checked ? ((0, jsx_runtime_1.jsxs)(S_OverrideIconWrapper, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_primary" }, void 0), (0, jsx_runtime_1.jsx)(S_OverrideIcon, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_on", fillType: "fill", colorKey: "ui_cpnt_selcontrols_icon_on_base_hover" }, void 0) }, void 0)] }, void 0)) : ((0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, iconName: "ic_radio_off", fillType: "line", colorKey: "ui_cpnt_selcontrols_icon_disabled" }, void 0));
             }
         }
     };
-    return (react_1.default.createElement(S_Label, { "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "mobile", htmlFor: value },
-        icon(),
-        react_1.default.createElement(S_TextWrapper, null,
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
-                    ? 'ui_cpnt_selcontrols_text_default'
-                    : 'ui_cpnt_selcontrols_text_disabled' })),
-        react_1.default.createElement("input", { hidden: true, id: value, type: "radio", name: name, value: value, checked: checked, color: value, onChange: handleChange, disabled: state === 'disabled' })));
+    return ((0, jsx_runtime_1.jsxs)(S_Label, __assign({ "x-pds-name": "Radio", "x-pds-element-type": "component", "x-pds-device-type": "mobile", htmlFor: value }, { children: [icon(), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: text, styleTheme: fontWeight === 'regular' ? 'body2Regular' : 'body2Bold', colorOverride: state === 'normal'
+                        ? 'ui_cpnt_selcontrols_text_default'
+                        : 'ui_cpnt_selcontrols_text_disabled' }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("input", { hidden: true, id: value, type: "radio", name: name, value: value, checked: checked, color: value, onChange: handleChange, disabled: state === 'disabled' }, void 0)] }), void 0));
 }
 var S_Label = styled_components_1.default.label(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"], ["\n  align-items: center;\n  display: flex;\n  height: 24px;\n"])));
 var S_OverrideIconWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  align-items: center;\n  display: flex;\n  position: relative;\n"], ["\n  align-items: center;\n  display: flex;\n  position: relative;\n"])));

package/dist/src/mobile/components/Radio/Radio.stories.d.ts

@@ -0,0 +1,7 @@
+import Radio from './Radio';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof Radio>;
+export default _default;
+export declare const Default: ComponentStory<typeof Radio>;
+export declare const List: ComponentStory<typeof Radio>;
+export declare const Disabled: ComponentStory<typeof Radio>;

package/dist/src/mobile/components/Radio/Radio.stories.js

@@ -0,0 +1,100 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Disabled = exports.List = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Radio_1 = __importDefault(require("./Radio"));
+exports.default = {
+    title: 'mobile/components/Radio',
+    component: Radio_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'mobile환경에 최적화 된 Radio 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        text: {
+            description: '표시할 텍스트 값입니다.',
+            control: { type: 'text' }
+        },
+        fontWeight: {
+            description: '텍스트의 굵기를 의미합니다.',
+            control: { type: 'inline-radio' }
+        },
+        state: {
+            description: '활성화 상태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        checked: {
+            description: '체크 여부를 결정합니다.',
+            control: { type: 'boolean' }
+        },
+        name: {
+            description: '그룹 내에서 동시에 하나의 라디오 버튼만 선택할 수 있게 하기 위한 명칭입니다.',
+            control: { type: 'none' }
+        },
+        value: {
+            description: '라디오 버튼 선택 시 콜백으로 받는 고유한 값입니다.',
+            control: { type: 'none' }
+        },
+        onChange: {
+            action: 'onChange'
+        }
+    }
+};
+var DefaultTemplate = function (args) { return (0, jsx_runtime_1.jsx)(Radio_1.default, __assign({}, args), void 0); };
+var ListTemplate = function () {
+    var _a = (0, react_1.useState)({ text: '🍎', value: 'apple' }), selectedValue = _a[0], setSelectedValue = _a[1];
+    var textArray = [
+        { text: '사과🍎', value: 'apple' },
+        { text: '오렌지🍊', value: 'orange' },
+        { text: '포도🍇', value: 'grape' },
+        { text: '바나나🍌', value: 'banana' },
+        { text: '수박🍉', value: 'watermelon' }
+    ];
+    var onChange = function (e) {
+        var value = e.target.value;
+        var selected = textArray.filter(function (el) { return el.value === value; });
+        if (selected) {
+            setSelectedValue(selected[0]);
+        }
+    };
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: textArray.map(function (_a) {
+            var text = _a.text, value = _a.value;
+            return ((0, jsx_runtime_1.jsx)(Radio_1.default, { text: text, name: "fruit", value: value, checked: value === selectedValue.value, onChange: onChange }, value));
+        }) }, void 0));
+};
+var DisabledTemplate = function (args) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Radio_1.default, __assign({}, args, { checked: true }), void 0), (0, jsx_runtime_1.jsx)(Radio_1.default, __assign({}, args), void 0)] }, void 0));
+};
+exports.Default = DefaultTemplate.bind({});
+exports.Default.args = {
+    text: 'Radio',
+    fontWeight: 'regular',
+    state: 'normal',
+    checked: false
+};
+exports.List = ListTemplate.bind({});
+exports.Disabled = DisabledTemplate.bind({});
+exports.Disabled.args = {
+    text: '비활성화',
+    name: 'disabled',
+    value: 'disabled-checked',
+    state: 'disabled'
+};

package/dist/src/mobile/components/ReactionButton/ReactionButton.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { PDSTextType } from '../../../common';
+/// <reference types="react" />
+import type { PDSTextType } from '../../../common';
 export declare type ReactionButtonProps = {
     text?: PDSTextType;
     iconName?: 'ic_thumb_up' | 'ic_heart' | 'ic_thumb_down' | 'ic_reply';

package/dist/src/mobile/components/ReactionButton/ReactionButton.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var numberHelper_1 = require("../../../common/utils/numberHelper");
 var hybrid_1 = require("../../../hybrid");
@@ -85,15 +93,9 @@ function ReactionButton(_a) {
             return value;
         return (0, numberHelper_1.formatCompactNumber)(value);
     };
-    return (react_1.default.createElement(S_ReactionButton, { "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick, onMouseDown: handleMouseDown },
-        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-        react_1.default.createElement(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }),
-        displayType === 'icon_text' && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }),
-            react_1.default.createElement(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }))),
-        react_1.default.createElement(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" })));
+    return ((0, jsx_runtime_1.jsxs)(S_ReactionButton, __assign({ "x-pds-name": "ReactionButton", "x-pds-element-type": "component", "x-pds-device-type": "mobile", onClick: handleClick, onMouseDown: handleMouseDown }, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 20, fillType: "fill", iconName: iconName, colorKey: colorTheme === 'none' ? IconColorByStatus() : IconColorByColorByTheme() }, void 0), displayType === 'icon_text' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.TextLabel, { text: convertTextFormatHelper(text), styleTheme: "body2Bold", singleLineMode: "use", colorTheme: TextLabelColorBySelect(), colorOverride: TextLabelColorByByColorTheme() }, void 0)] }, void 0)), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_b", spacingType: "width" }, void 0)] }), void 0));
 }
-var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  padding: 0;\n  height: 32px;\n"])));
+var ReactionButtonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding: 0;\n"], ["\n  align-items: center;\n  background-color: transparent;\n  border: none;\n  border-radius: 8px;\n  box-sizing: border-box;\n  display: flex;\n  height: 32px;\n  justify-content: center;\n  padding: 0;\n"])));
 var S_ReactionButton = styled_components_1.default.button(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), ReactionButtonStyle);
 exports.default = ReactionButton;
 var templateObject_1, templateObject_2;

package/dist/src/mobile/components/ReactionButton/ReactionButton.stories.d.ts

@@ -0,0 +1,7 @@
+import ReactionButton from './ReactionButton';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof ReactionButton>;
+export default _default;
+export declare const TextType: ComponentStory<typeof ReactionButton>;
+export declare const CountTypeFormatting: ComponentStory<typeof ReactionButton>;
+export declare const CountTypeNonFormatting: ComponentStory<typeof ReactionButton>;

package/dist/src/mobile/components/ReactionButton/ReactionButton.stories.js

@@ -0,0 +1,71 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CountTypeNonFormatting = exports.CountTypeFormatting = exports.TextType = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var ReactionButton_1 = __importDefault(require("./ReactionButton"));
+exports.default = {
+    title: 'mobile/components/ReactionButton',
+    component: ReactionButton_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'mobile환경에 최적화 된 ReactionButton 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        text: {
+            description: '표시할 텍스트 값입니다. Format (1,000개 이상) : 심볼 표시(K, M, B, T)',
+            control: { type: 'number' }
+        },
+        iconName: {
+            description: '아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.',
+            control: { type: 'select' }
+        },
+        status: {
+            description: '선택된 상태인지를 판별합니다.',
+            control: { type: 'select' }
+        },
+        colorTheme: {
+            description: '컬러의 프리셋 테마입니다.',
+            control: { type: 'select' }
+        },
+        displayType: {
+            description: '표시 레이아웃 방식을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        onClick: {
+            action: 'onClick'
+        },
+        onMouseDown: {
+            action: 'onMouseDown'
+        }
+    }
+};
+var Template = function (args) { return (0, jsx_runtime_1.jsx)(ReactionButton_1.default, __assign({}, args), void 0); };
+exports.TextType = Template.bind({});
+exports.TextType.args = {
+    text: '좋아요'
+};
+exports.CountTypeFormatting = Template.bind({});
+exports.CountTypeFormatting.args = {
+    text: 10000
+};
+exports.CountTypeNonFormatting = Template.bind({});
+exports.CountTypeNonFormatting.args = {
+    text: 100
+};

package/dist/src/mobile/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
-import React, { SelectHTMLAttributes } from 'react';
-import { PDSTextType } from '../../../common';
+import type { PDSTextType } from '../../../common';
+import type { SelectHTMLAttributes } from 'react';
 declare type SelectOption = {
     text: string;
     value: SelectHTMLAttributes<HTMLSelectElement>['value'];

package/dist/src/mobile/components/Select/Select.js

@@ -3,6 +3,17 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
     return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -22,11 +33,8 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
+var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importStar(require("styled-components"));
 var transitionStyle_1 = require("../../../common/styles/movement/transitionStyle");
 var hybrid_1 = require("../../../hybrid");
@@ -51,12 +59,7 @@ function Select(_a) {
         }
         return 'ui_cpnt_select_icon_01';
     };
-    return (react_1.default.createElement(S_Box, { "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth },
-        react_1.default.createElement(S_Icon_Wrapper, { state: state },
-            react_1.default.createElement(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() })),
-        react_1.default.createElement(S_Select, { disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined },
-            hintText && (react_1.default.createElement("option", { disabled: true, value: HINT }, hintText)),
-            valueArray.map(function (el) { return (react_1.default.createElement("option", { key: el.value, value: el.value }, el.text)); }))));
+    return ((0, jsx_runtime_1.jsxs)(S_Box, __assign({ "x-pds-name": "Select", "x-pds-element-type": "component", "x-pds-device-type": "mobile", size: size, responsiveMode: responsiveMode, tabIndex: 0, customWidth: customWidth }, { children: [(0, jsx_runtime_1.jsx)(S_Icon_Wrapper, __assign({ state: state }, { children: (0, jsx_runtime_1.jsx)(hybrid_1.Icon, { size: 16, fillType: "line", iconName: "ic_arrow_down", colorKey: getIconColorKey() }, void 0) }), void 0), (0, jsx_runtime_1.jsxs)(S_Select, __assign({ disabled: state === 'disabled' || state === 'read_only', state: state, colorTheme: colorTheme, onChange: handleChange, defaultValue: (_b = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _b !== void 0 ? _b : HINT, value: value || undefined }, { children: [hintText && ((0, jsx_runtime_1.jsx)("option", __assign({ disabled: true, value: HINT }, { children: hintText }), void 0)), valueArray.map(function (el) { return ((0, jsx_runtime_1.jsx)("option", __assign({ value: el.value }, { children: el.text }), el.value)); })] }), void 0)] }), void 0));
 }
 var large = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: 48px;\n  width: 432px;\n"], ["\n  height: 48px;\n  width: 432px;\n"])));
 var medium = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: 40px;\n  width: 188px;\n"], ["\n  height: 40px;\n  width: 188px;\n"])));
@@ -121,7 +124,7 @@ var backgroundActiveColor = (0, styled_components_1.css)(templateObject_8 || (te
     }
 });
 var normalActionColor = (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  &:active {\n    background-color: ", ";\n  }\n"], ["\n  &:active {\n    background-color: ", ";\n  }\n"])), backgroundActiveColor);
-var S_Select = styled_components_1.default.select(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  padding-left: ", ";\n  padding-right: ", ";\n  width: 100%;\n  -webkit-box-orient: vertical;\n  display: -webkit-box;\n  -webkit-line-clamp: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
+var S_Select = styled_components_1.default.select(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: -webkit-box;\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  overflow: hidden;\n  padding-left: ", ";\n  padding-right: ", ";\n  text-overflow: ellipsis;\n  width: 100%;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"], ["\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 1;\n  appearance: none;\n  background-color: ", ";\n  border: 2px solid ", ";\n  border-radius: ", ";\n  box-sizing: border-box;\n  color: ", ";\n  display: -webkit-box;\n  font-family: inherit;\n  font-size: ", ";\n  height: 100%;\n  overflow: hidden;\n  padding-left: ", ";\n  padding-right: ", ";\n  text-overflow: ellipsis;\n  width: 100%;\n  word-break: break-all;\n\n  :disabled {\n    background-color: ", ";\n    border: 2px solid ", ";\n    color: ", ";\n    opacity: 1;\n  }\n\n  :focus {\n    border: 2px solid ", " !important;\n    color: ", ";\n    outline: 0 !important;\n    outline-offset: 0 !important;\n  }\n\n  ", "\n\n  ", "\n\n  ", "\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_cpnt_select_base_normal;
 }, function (_a) {

package/dist/src/mobile/components/Select/Select.stories.d.ts

@@ -0,0 +1,8 @@
+import Select from './Select';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof Select>;
+export default _default;
+export declare const OnlyHintText: ComponentStory<typeof Select>;
+export declare const OnlyDefaultValue: ComponentStory<typeof Select>;
+export declare const HintAndDefaultValue: ComponentStory<typeof Select>;
+export declare const NoHintNoDefaultValue: ComponentStory<typeof Select>;

package/dist/src/mobile/components/Select/Select.stories.js

@@ -0,0 +1,139 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoHintNoDefaultValue = exports.HintAndDefaultValue = exports.OnlyDefaultValue = exports.OnlyHintText = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Select_1 = __importDefault(require("./Select"));
+exports.default = {
+    title: 'mobile/components/Select',
+    component: Select_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'mobile환경에 최적화 된 Select 컴포넌트'
+            }
+        }
+    },
+    argTypes: {
+        hintText: {
+            description: '선택 전 사용자에게 보여질 기본 텍스트입니다.(placeholder)',
+            control: { type: 'text' }
+        },
+        defaultValue: {
+            description: '기본으로 표시할 값입니다.'
+        },
+        value: {
+            description: 'select의 값입니다.'
+        },
+        valueArray: {
+            description: '옵션으로 표시될 값들의 배열입니다.'
+        },
+        size: {
+            description: '요소의 크기를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        responsiveMode: {
+            description: '너비의 100% 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        state: {
+            description: '요소의 활성화 상태를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        colorTheme: {
+            description: '컬러의 프리셋 테마입니다.',
+            control: { type: 'inline-radio' }
+        },
+        customWidth: {
+            description: '직접 지정한 Select의 사이즈를 결정합니다. (단위도 함께 적어주어야 합니다.) (*반드시 디자인 검수후에 사용가능합니다.)',
+            control: { type: 'text' }
+        }
+    }
+};
+var defaultArgs = {
+    size: 'large',
+    responsiveMode: 'none',
+    state: 'normal',
+    colorTheme: 'none'
+};
+var Template = function (args) {
+    var _a = (0, react_1.useState)(''), value = _a[0], setValue = _a[1];
+    var handleChange = function (e) {
+        setValue(e.target.value);
+    };
+    return (0, jsx_runtime_1.jsx)(Select_1.default, __assign({}, args, { value: value, onChange: handleChange }), void 0);
+};
+exports.OnlyHintText = Template.bind({});
+exports.OnlyHintText.args = __assign(__assign({}, defaultArgs), { hintText: '---Select----', valueArray: [
+        {
+            text: '1',
+            value: 1
+        },
+        {
+            text: '2',
+            value: 2
+        },
+        {
+            text: '3',
+            value: 3
+        }
+    ] });
+exports.OnlyDefaultValue = Template.bind({});
+exports.OnlyDefaultValue.args = __assign(__assign({}, defaultArgs), { defaultValue: { value: 2, text: '2' }, valueArray: [
+        {
+            text: '1',
+            value: 1
+        },
+        {
+            text: '2',
+            value: 2
+        },
+        {
+            text: '3',
+            value: 3
+        }
+    ] });
+exports.HintAndDefaultValue = Template.bind({});
+exports.HintAndDefaultValue.args = __assign(__assign({}, defaultArgs), { hintText: '----SELECT-SOMETHING----', defaultValue: { value: 2, text: '2' }, valueArray: [
+        {
+            text: '1',
+            value: 1
+        },
+        {
+            text: '2',
+            value: 2
+        },
+        {
+            text: '3',
+            value: 3
+        }
+    ] });
+exports.NoHintNoDefaultValue = Template.bind({});
+exports.NoHintNoDefaultValue.args = __assign(__assign({}, defaultArgs), { valueArray: [
+        {
+            text: '1',
+            value: 1
+        },
+        {
+            text: '2',
+            value: 2
+        },
+        {
+            text: '3',
+            value: 3
+        }
+    ] });

package/dist/src/mobile/components/StatusBlock/StatusBlock.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTextType } from '../../../common';
+import type { PDSTextType } from '../../../common';
 export declare type StatusBlockProps = {
     text?: PDSTextType;
     size?: 'large' | 'medium' | 'small';