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

package/dist/src/desktop/components/TextField/TextField.stories.d.ts

@@ -0,0 +1,22 @@
+import TextField from './TextField';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+declare const _default: ComponentMeta<typeof TextField>;
+export default _default;
+export declare const Default: ComponentStory<typeof TextField>;
+export declare const NoKeyAction: ComponentStory<typeof TextField>;
+export declare const SingleSize: ComponentStory<typeof TextField>;
+export declare const SingleSizeIcon: ComponentStory<typeof TextField>;
+export declare const SingleState: ComponentStory<typeof TextField>;
+export declare const SingleStateIcon: ComponentStory<typeof TextField>;
+export declare const SingleColorTheme: ComponentStory<typeof TextField>;
+export declare const TransparentColorTheme: ComponentStory<typeof TextField>;
+export declare const SinglePreventBlankMode: ComponentStory<typeof TextField>;
+export declare const SingleValidation: ComponentStory<typeof TextField>;
+export declare const MultiSizeOnlyLarge: ComponentStory<typeof TextField>;
+export declare const MultiState: ComponentStory<typeof TextField>;
+export declare const MultiRows: ComponentStory<typeof TextField>;
+export declare const MultiValidation: ComponentStory<typeof TextField>;
+export declare const AutoSizeOnlyLarge: ComponentStory<typeof TextField>;
+export declare const AutoState: ComponentStory<typeof TextField>;
+export declare const AutoRows: ComponentStory<typeof TextField>;
+export declare const AutoValidation: ComponentStory<typeof TextField>;

package/dist/src/desktop/components/TextField/TextField.stories.js

@@ -0,0 +1,278 @@
+"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.AutoValidation = exports.AutoRows = exports.AutoState = exports.AutoSizeOnlyLarge = exports.MultiValidation = exports.MultiRows = exports.MultiState = exports.MultiSizeOnlyLarge = exports.SingleValidation = exports.SinglePreventBlankMode = exports.TransparentColorTheme = exports.SingleColorTheme = exports.SingleStateIcon = exports.SingleState = exports.SingleSizeIcon = exports.SingleSize = exports.NoKeyAction = exports.Default = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var withFormProvider_1 = require("../../../common/decorators/withFormProvider");
+var components_1 = require("../../../hybrid/components");
+var TextLabel_1 = __importDefault(require("../TextLabel/TextLabel"));
+var TextField_1 = __importDefault(require("./TextField"));
+exports.default = {
+    title: 'desktop/components/TextField',
+    component: TextField_1.default,
+    parameters: {
+        docs: {
+            description: {
+                component: 'desktop환경에 최적화 된 TextField 컴포넌트. react-hook-form의 FormProvider와 pds-dev-kit의 Form 컴포넌트로 감싸서 사용해야 작동합니다. (form계열 컴포넌트의 경우 control을 사용하여 테스트 할 수 없습니다.)'
+            },
+            source: { type: 'code' }
+        },
+        controls: { hideNoControlsWarning: true }
+    },
+    argTypes: {
+        name: {
+            description: 'form의 name을 지정해줍니다.'
+        },
+        hintText: {
+            description: 'placeholder에 표시할 텍스트 값입니다.',
+            control: { type: 'text' }
+        },
+        defaultText: {
+            description: '지정된 기본 값을 보여줘야 할 때 사용합니다.',
+            control: { type: 'text' }
+        },
+        textAlign: {
+            description: '텍스트 정렬을 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        prefixText: {
+            description: '입력 값 외에 접두사를 보여줘야 할 때 사용합니다.',
+            control: { type: 'text' }
+        },
+        suffixText: {
+            description: '입력 값 외에 접미사를 보여줘야 할 때 사용합니다.',
+            control: { type: 'text' }
+        },
+        validation: {
+            description: 'validation 조건과 에러 메세지 영역에서 표시할 텍스트 값을 부여할 수 있습니다.'
+        },
+        validationPoint: {
+            description: 'validation 검증(유효성 검증)의 시점을 결정할 수 있습니다. (validation이 부여되었을때 작동합니다.) (onChange: 입력할 때마다 항시 유효성 검증, onBlur: focus-out 시 유효성 검증)'
+        },
+        preventBlankMode: {
+            description: '공백을 막는 행위에 대해 결정할 수 있습니다. (textLineType: single일때만 적용 가능합니다.) (validation, validationPoint와 별개로 작동합니다.) (none: 공백을 막지 않습니다. trim: 앞 뒤 공백을 막으며, onBlur 시점에 적용됩니다. all: 모든 공백을 막으며, onChange 시점에 적용됩니다.)'
+        },
+        enterSubmitMode: {
+            description: 'Enter키를 통한 제출을 사용할 수 있습니다. (textLineType가 single(input)일때만 해당)'
+        },
+        size: {
+            description: '크기를 결정합니다. (textLineType : single일때만 여러가지 크기를 가질 수 있고, 나머지는 Large만 가질 수 있습니다.)'
+        },
+        responsiveMode: {
+            description: '너비의 100% 여부를 결정합니다.',
+            control: { type: 'inline-radio' }
+        },
+        textLineType: {
+            description: '텍스트의 개행 방법을 결정합니다. (single(singleline) : 한 줄, multi(multiline) : 정해진 높이값을 가지고 있는 textarea, auto(multiline auto size) : 글자 수에 따라 함께 늘어나는 형태'
+        },
+        multiRows: {
+            description: 'textLineType : multi일 때, 지정할 문장의 열 수를 결정합니다. (높이값 결정)',
+            control: { type: 'number' }
+        },
+        autoMinRows: {
+            description: 'textLineType : auto일 때, 보여줄 문장의 최소 열 수를 결정합니다.',
+            control: { type: 'number' }
+        },
+        autoMaxRows: {
+            description: 'textLineType : auto일 때, 보여줄 문장의 최대 열 수를 결정합니다.',
+            control: { type: 'number' }
+        },
+        inputType: {
+            description: 'textLineType : single일 때, input의 유형을 설정합니다.',
+            control: { type: 'select' },
+            options: [
+                'text',
+                'date',
+                'datetime',
+                'datetime-local',
+                'month',
+                'number',
+                'range',
+                'time',
+                'week'
+            ]
+        },
+        state: {
+            description: 'textfield의 상태를 결정합니다.'
+        },
+        iBtn1IconName: {
+            description: '우측에서 1번째 아이콘 이름을 의미합니다.'
+        },
+        iBtn1IconFillType: {
+            description: '우측에서 1번째 아이콘의 형태를 결정합니다.'
+        },
+        iBtn2IconName: {
+            description: '우측에서 2번째 아이콘 이름을 의미합니다.'
+        },
+        iBtn2IconFillType: {
+            description: '우측에서 2번째 아이콘의 형태를 결정합니다.'
+        },
+        colorTheme: {
+            description: '컬러의 프리셋 테마입니다.'
+        },
+        min: {
+            description: 'textLineType : single일 때, input의 type이 최솟값 또는 최대값을 가질 수 있는 경우(date, datetime, datetime-local, month, number, range, time, week) 최솟값을 부여합니다.',
+            control: { type: 'text' }
+        },
+        max: {
+            description: 'textLineType : single일 때, input의 type이 최솟값 또는 최대값을 가질 수 있는 경우(date, datetime, datetime-local, month, number, range, time, week) 최댓값을 부여합니다.',
+            control: { type: 'text' }
+        },
+        maxLength: {
+            description: '입력할 수 잇는 최대 문자수를 부여합니다.',
+            control: { type: 'number' }
+        },
+        autoComplete: {
+            description: '자동완성 기능을 어떻게 사용할지 결정합니다.'
+        },
+        customWidth: {
+            description: '직접 지정한 TextField의 사이즈를 결정합니다. (단위도 함께 적어주어야 합니다.) (*반드시 디자인 검수후에 사용가능합니다.)'
+        },
+        onBlur: { action: 'onBlur' },
+        onChange: { action: 'onChange' },
+        onClickIBtn1: {
+            description: '우측에서 1번째 아이콘을 눌렀을때, 행할 액션을 결정합니다.'
+        },
+        onClickIBtn2: {
+            description: '우측에서 2번째 아이콘을 눌렀을때, 행할 액션을 결정합니다.'
+        },
+        onFocus: { action: 'onFocus' },
+        onKeyUp: { action: 'onKeyUp' },
+        onKeyDown: { action: 'onKeyDown' },
+        onTarget: { action: 'onTarget' }
+    },
+    decorators: [function (story) { return (0, withFormProvider_1.withFormProvider)(story); }]
+};
+var Template = function (args) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, __assign({}, args), void 0) }, void 0));
+};
+exports.Default = Template.bind({});
+exports.Default.args = {
+    name: 'TextField',
+    hintText: 'hintText',
+    responsiveMode: 'none',
+    inputType: 'text'
+};
+var NoKeyActionTemplate = function (args) {
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(TextField_1.default, __assign({}, args, { onKeyUp: undefined, onKeyDown: undefined }), void 0) }, void 0));
+};
+exports.NoKeyAction = NoKeyActionTemplate.bind({});
+exports.NoKeyAction.args = {
+    name: 'TextField',
+    hintText: 'hintText',
+    responsiveMode: 'none',
+    inputType: 'text'
+};
+var SingleSizeTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single Small", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleSmall", hintText: "singleSmall", size: "small" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single Medium", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleMedium", hintText: "singleMedium", size: "medium" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single Large", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleLarge", hintText: "singleLarge", size: "large" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single Responsive Large", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleResponsiveLarge", hintText: "singleResponsiveLarge", size: "rlarge" }, void 0)] }, void 0));
+};
+exports.SingleSize = SingleSizeTemplate.bind({});
+var SingleSizeIconTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single Small", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleSmall", hintText: "singleSmall", size: "small", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single Medium", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleMedium", hintText: "singleMedium", size: "medium", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single Large", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleLarge", hintText: "singleLarge", size: "large", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single Responsive Large", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleResponsiveLarge", hintText: "singleResponsiveLarge", size: "rlarge", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0)] }, void 0));
+};
+exports.SingleSizeIcon = SingleSizeIconTemplate.bind({});
+var SingleStateTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single normal", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "normal", hintText: "normal", state: "normal" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single read only", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "readOnly", hintText: "read only", defaultText: "read only", state: "read_only" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single disabled", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "disabled", hintText: "disabled", defaultText: "disabled", state: "disabled" }, void 0)] }, void 0));
+};
+exports.SingleState = SingleStateTemplate.bind({});
+var SingleStateIconTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single normal", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "normal", hintText: "normal", state: "normal", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single read only", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "readOnly", hintText: "read only", defaultText: "read only", state: "read_only", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single disabled", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "disabled", hintText: "disabled", defaultText: "disabled", state: "disabled", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0)] }, void 0));
+};
+exports.SingleStateIcon = SingleStateIconTemplate.bind({});
+var SingleColorThemeTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single None (light tone \uC801\uC6A9\uC2DC\uC5D0\uB294 light \uCEEC\uB7EC, dark tone \uC801\uC6A9\uC2DC\uC5D0\uB294 dark \uCEEC\uB7EC \uC801\uC6A9)", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleNone", hintText: "singleNone", colorTheme: "none", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Single Dark (light tone \uC801\uC6A9\uC2DC\uC5D0\uB3C4 dark\uCEEC\uB7EC \uC720\uC9C0)", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleDark", hintText: "singleDark", colorTheme: "dark", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0)] }, void 0));
+};
+exports.SingleColorTheme = SingleColorThemeTemplate.bind({});
+var TransparentColorThemeTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "normal", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleNone", hintText: "singleNone", colorTheme: "transparent", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "disabled", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleNone", hintText: "singleNone", colorTheme: "transparent", state: "disabled", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "read only", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singleNone", hintText: "singleNone", colorTheme: "transparent", state: "read_only", iBtn1IconName: "ic_copy", iBtn2IconName: "ic_open_page" }, void 0)] }, void 0));
+};
+exports.TransparentColorTheme = TransparentColorThemeTemplate.bind({});
+var SinglePreventBlankModeTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "none (\uACF5\uBC31\uC744 \uB9C9\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4.)", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singlePreventBlankModeNone", hintText: "singlePreventBlankModeNone" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "trim (\uC55E \uB4A4 \uACF5\uBC31\uC744 \uB9C9\uC73C\uBA70, onBlur \uC2DC\uC810\uC5D0 \uC801\uC6A9\uB429\uB2C8\uB2E4.)", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singlePreventBlankModeTrim", hintText: "singlePreventBlankModeTrim", preventBlankMode: "trim" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "all (\uBAA8\uB4E0 \uACF5\uBC31\uC744 \uB9C9\uC73C\uBA70, onChange \uC2DC\uC810\uC5D0 \uC801\uC6A9\uB429\uB2C8\uB2E4.)", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "singlePreventBlankModeAll", hintText: "singlePreventBlankModeAll", preventBlankMode: "all" }, void 0)] }, void 0));
+};
+exports.SinglePreventBlankMode = SinglePreventBlankModeTemplate.bind({});
+var SingleValidationTemplate = function () {
+    var emailValidation = {
+        required: '이메일을 입력해 주세요.',
+        pattern: {
+            // eslint-disable-next-line no-useless-escape
+            value: /^([a-zA-Z0-9\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/,
+            message: '올바르지 않은 이메일입니다.'
+        }
+    };
+    var passwordValidation = {
+        required: '비밀번호를 입력해 주세요.',
+        minLength: { value: 5, message: '비밀번호는 5자 이상이여야합니다.' }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "validationPoint onBlur", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "email", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { inputType: "email", name: "email", validation: emailValidation }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "password", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { inputType: "password", name: "password", validation: passwordValidation }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "validationPoint onChange", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "email", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { inputType: "email", name: "onChangeEmail", validation: emailValidation, validationPoint: "onChange" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "password", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { inputType: "password", name: "onChangePassword", validation: passwordValidation, validationPoint: "onChange" }, void 0)] }, void 0));
+};
+exports.SingleValidation = SingleValidationTemplate.bind({});
+var MultiSizeTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Multi Large", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "multiLarge", hintText: "multiLarge", size: "large", textLineType: "multi" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Multi Responsive Large", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "multiResponsiveLarge", hintText: "multiResponsiveLarge", size: "rlarge", textLineType: "multi" }, void 0)] }, void 0));
+};
+exports.MultiSizeOnlyLarge = MultiSizeTemplate.bind({});
+var MultiStateTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Multi normal", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "normal", hintText: "normal", state: "normal", textLineType: "multi" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Multi read only", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "readOnly", hintText: "read only", defaultText: "read only", state: "read_only", textLineType: "multi" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Multi disabled", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "disabled", hintText: "disabled", defaultText: "disabled", state: "disabled", textLineType: "multi" }, void 0)] }, void 0));
+};
+exports.MultiState = MultiStateTemplate.bind({});
+var MultiRowsTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "multiRows: 1", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "multiRows1", hintText: "multiRows1", state: "normal", textLineType: "multi", multiRows: 1 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "multiRows: 2", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "multiRows2", hintText: "multiRows2", state: "normal", textLineType: "multi", multiRows: 2 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "multiRows: 5", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "multiRow5", hintText: "multiRow5", state: "normal", textLineType: "multi", multiRows: 5 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "multiRows: 8 (default)", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "multiRows8", hintText: "multiRows8", state: "normal", textLineType: "multi", multiRows: 8 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0)] }, void 0));
+};
+exports.MultiRows = MultiRowsTemplate.bind({});
+var MultiValidationTemplate = function () {
+    var emailValidation = {
+        required: '이메일을 입력해 주세요.',
+        pattern: {
+            // eslint-disable-next-line no-useless-escape
+            value: /^([a-zA-Z0-9\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/,
+            message: '올바르지 않은 이메일입니다.'
+        }
+    };
+    var passwordValidation = {
+        required: '비밀번호를 입력해 주세요.',
+        minLength: { value: 5, message: '비밀번호는 5자 이상이여야합니다.' }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "validationPoint onBlur", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "email", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { textLineType: "multi", inputType: "email", name: "multiEmail", validation: emailValidation }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "password", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { textLineType: "multi", inputType: "password", name: "multiPassword", validation: passwordValidation }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "validationPoint onChange", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "email", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { textLineType: "multi", inputType: "email", name: "onChangeMultiEmail", validation: emailValidation, validationPoint: "onChange" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "password", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { textLineType: "multi", inputType: "password", name: "onChangeMultiPassword", validation: passwordValidation, validationPoint: "onChange" }, void 0)] }, void 0));
+};
+exports.MultiValidation = MultiValidationTemplate.bind({});
+var AutoSizeTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Auto Large", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "autoLarge", hintText: "autoLarge", size: "large", textLineType: "auto" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Auto Responsive Large", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "autoResponsiveLarge", hintText: "autoResponsiveLarge", size: "rlarge", textLineType: "auto" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0)] }, void 0));
+};
+exports.AutoSizeOnlyLarge = AutoSizeTemplate.bind({});
+var AutoStateTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Auto normal", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "normal", hintText: "normal", state: "normal", textLineType: "auto" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Auto read only", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "readOnly", hintText: "read only", defaultText: "read only", state: "read_only", textLineType: "auto" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "Auto disabled", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "disabled", hintText: "disabled", defaultText: "disabled", state: "disabled", textLineType: "auto" }, void 0)] }, void 0));
+};
+exports.AutoState = AutoStateTemplate.bind({});
+var AutoRowsTemplate = function () {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "autoRows: 1 to 3", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "autoRows1to3", hintText: "autoRows1to3", state: "normal", textLineType: "auto", autoMinRows: 1, autoMaxRows: 3 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "autoRows: 2 to 5", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "autoRows2to5", hintText: "autoRows2to5", state: "normal", textLineType: "auto", autoMinRows: 2, autoMaxRows: 5 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "autoRows: 5 to 8", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "autoRow5to8", hintText: "autoRow5to8", state: "normal", textLineType: "auto", autoMinRows: 5, autoMaxRows: 8 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "autoRows: 8 to infinity (default)", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { name: "autoRows8toInfinity", hintText: "autoRows8toInfinity", state: "normal", textLineType: "auto", autoMinRows: 8 }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0)] }, void 0));
+};
+exports.AutoRows = AutoRowsTemplate.bind({});
+var AutoValidationTemplate = function () {
+    var emailValidation = {
+        required: '이메일을 입력해 주세요.',
+        pattern: {
+            // eslint-disable-next-line no-useless-escape
+            value: /^([a-zA-Z0-9\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/,
+            message: '올바르지 않은 이메일입니다.'
+        }
+    };
+    var passwordValidation = {
+        required: '비밀번호를 입력해 주세요.',
+        minLength: { value: 5, message: '비밀번호는 5자 이상이여야합니다.' }
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "validationPoint onBlur", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "email", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { textLineType: "auto", inputType: "email", name: "autoEmail", validation: emailValidation }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "password", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { textLineType: "auto", inputType: "password", name: "autoPassword", validation: passwordValidation }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_g" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "validationPoint onChange", styleTheme: "headingBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "email", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { textLineType: "auto", inputType: "email", name: "onChangeAutoEmail", validation: emailValidation, validationPoint: "onChange" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(TextLabel_1.default, { text: "password", styleTheme: "subTitleBold" }, void 0), (0, jsx_runtime_1.jsx)(components_1.Spacing, { size: "spacing_b" }, void 0), (0, jsx_runtime_1.jsx)(TextField_1.default, { textLineType: "auto", inputType: "password", name: "onChangeAutoPassword", validation: passwordValidation, validationPoint: "onChange" }, void 0)] }, void 0));
+};
+exports.AutoValidation = AutoValidationTemplate.bind({});

package/dist/src/desktop/components/TextLabel/TextLabel.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { PDSTextType, UiColors } from '../../../common';
+import type { PDSTextType, UiColors } from '../../../common';
 export declare type TextLabelProps = {
     text: PDSTextType;
     tooltipText?: PDSTextType;