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

package/dist/src/desktop/panels/DesktopTutorialModal/DesktopTutorialModal.stories.js

@@ -1,148 +0,0 @@
-"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.Variation = exports.OverrideInfoTitleText = exports.NoButton = exports.Default = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-/* eslint-disable no-console */
-var DesktopTutorialModal_1 = __importDefault(require("./DesktopTutorialModal"));
-exports.default = {
-    title: 'desktop/panels/DesktopTutorialModal',
-    component: DesktopTutorialModal_1.default,
-    parameters: {
-        docs: {
-            description: {
-                component: 'DesktopTutorialModal은 어떠한 기능에 대해 사용자의 이해를 돕기 위해 단계별로 설명이 필요할 때 사용할 수 있는 모달입니다.'
-            }
-        }
-    },
-    argTypes: {
-        modalTitleText: {
-            description: '모달의 제목을 표시합니다.',
-            control: { type: 'string' }
-        },
-        infoArray: {
-            description: '모달의 정보와 관련된 요소들을 표시하는 array 형태의 값입니다.',
-            table: {
-                type: {
-                    detail: "{\n  sideTabTitleText: PDSTextType;\n  infoTitleText?: PDSTextType;\n  infoDescText?: PDSTextType;\n  imageSrc?: string;\n  btnMode?: 'none' | 'btn_amount1';\n  btn1Text?: PDSTextType;\n  onClickBtn1?: (e: React.MouseEvent<HTMLButtonElement>) => void\n }[]"
-                }
-            },
-            control: { type: 'object' }
-        },
-        onClose: {
-            description: '모달 내부 우측 상단에 위치한 X 버튼을 눌렀을 경우에 실행할 액션을 부여합니다.',
-            action: 'onClose',
-            control: { type: 'object' }
-        }
-    }
-};
-var Template = function (args) { return ((0, jsx_runtime_1.jsx)(DesktopTutorialModal_1.default, __assign({}, args), void 0)); };
-var defaultInfoArray = [
-    {
-        sideTabTitleText: 'sideTabTitleText',
-        infoDescText: 'infoDescText',
-        imageSrc: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
-        btnMode: 'btn_amount1',
-        btn1Text: 'btn1Text',
-        onClickBtn1: function () { return console.log('click1'); }
-    }
-];
-var noButtonInfoArray = [
-    {
-        sideTabTitleText: 'sideTabTitleText',
-        infoDescText: 'infoDescText',
-        imageSrc: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
-        btnMode: 'none'
-    }
-];
-var infoTitleTextInfoArray = [
-    {
-        sideTabTitleText: 'sideTabTitleText',
-        infoTitleText: 'infoTitleText',
-        infoDescText: 'infoDescText',
-        imageSrc: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
-        btnMode: 'btn_amount1',
-        btn1Text: 'btn1Text'
-    }
-];
-var infoArray = [
-    {
-        sideTabTitleText: '이 pApp에 대해서',
-        infoDescText: '영화,시리즈,애니메이션 등 다양한 콘텐츠로 OTT 서비스 화면을 구현합니다. 사용자는 시중의 스트리밍 서비스처럼 작품별로 콘텐츠를 선택해서 시청 가능하고 구매할 수 있습니다. 막대한 비용과 시간 걱정 없이 나만의 OTT 서비스를 구현해보세요.',
-        imageSrc: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80',
-        btnMode: 'btn_amount1',
-        btn1Text: '자세히 알아보기',
-        onClickBtn1: function () { return console.log('click1'); }
-    },
-    {
-        sideTabTitleText: '에피소드 업로드하기',
-        infoDescText: ' 에피소드는 작품을 구성하는 요소로 개별 동영상을 의미합니다. 에피소드를 작품에 추가하지 않으면 사용자에게 노출되지 않습니다. 여러 자막을 추가할 수 있어 글로벌한 사용자들이 더 다양한 언어로 에피소드를 즐길 수 있습니다.',
-        imageSrc: 'https://images.unsplash.com/photo-1586752488885-6ce47fdfd874?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1813&q=80',
-        btnMode: 'none'
-    },
-    {
-        sideTabTitleText: '작품 만들어보기',
-        infoTitleText: '나만의 작품 만들기 ',
-        infoDescText: '작품은 OTT를 구성하는 핵심 요소로 개별 에피소드를 묶어서 하나의 작품으로 제공합니다. 업로드한 에피소드를 원하는 순서대로 작품에 추가하면 사용자는 다음 에피소드를 자동으로 연속해서 시청할 수 있습니다. 작품에 라벨을 지정하면 사용자는 장르나 국가별로 나눠서 한눈에 볼 수 있습니다. 작품 정보에 감독,출연자,시놉시스 등의 정보를 입력하고 예고편 영상을 추가해서 나만의 작품을 만들어보세요.',
-        imageSrc: 'https://images.unsplash.com/photo-1467269204594-9661b134dd2b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80',
-        btnMode: 'btn_amount1',
-        btn1Text: '자세히 알아보기',
-        onClickBtn1: function () { return console.log('click3'); }
-    },
-    {
-        sideTabTitleText: '추가 수익 창출 방법',
-        infoDescText: 'OTT형 VOD pApp으로 수익을 창출하는 방법에는 두 가지가 있습니다. 첫 번째 방법은 유료이용권을 생성하여 유료 pApp으로 전환하는 것입니다. 설정한 금액을 지불한 구매자만 일정 기간동안 pApp을 이용할 수 있습니다. 두 번째는 작품이나 작품안의 일부 에피소드를 유료 콘텐츠로 판매할 수 있습니다. 사용자는 CP를 충전하여 유료 콘텐츠를 구매할 수 있습니다. 내가 만든 가치있는 작품들을 OTT 비즈니스로 활용하여 수익을 얻어보세요. ',
-        imageSrc: 'https://images.unsplash.com/photo-1520175480921-4edfa2983e0f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2067&q=80',
-        btnMode: 'none',
-        onClickBtn1: function () { return console.log('click4'); }
-    },
-    {
-        sideTabTitleText: '통계 데이터 확인하기',
-        infoDescText: '내 콘텐츠의 시청 정보를 분석하여 다양한 통계 데이터를 제공합니다. 내가 업로드한 에피소드와 작품의 누적 시청시간, 조회수를 제공해 순위를 매길 수 있어 사용자들의 선호도를 분석하거나 개선이 필요한 영역을 찾을 수 있습니다. 각종 데이터를 활용하여 콘텐츠 전략을 조정하고 더 높은 수익으로 이어질 수 있습니다.',
-        imageSrc: 'https://images.unsplash.com/photo-1509840841025-9088ba78a826?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80',
-        btnMode: 'btn_amount1',
-        btn1Text: '통계 데이터 보러가기',
-        onClickBtn1: function () { return console.log('click4'); }
-    },
-    {
-        sideTabTitleText: 'OTT형 VOD pApp 사용해보기',
-        infoDescText: '큰 비용 없이 나만의 OTT 비즈니스를 손쉽게 시작할 수 있습니다. 지금 바로 OTT형 VOD pApp을 사용해보세요.',
-        imageSrc: 'https://images.unsplash.com/photo-1633912343155-6073bc1075e9?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1740&q=80',
-        btnMode: 'btn_amount1',
-        btn1Text: 'pApp 사용하러 가기',
-        onClickBtn1: function () { return console.log('click4'); }
-    }
-];
-exports.Default = Template.bind({});
-exports.Default.args = {
-    modalTitleText: 'modalTitleText',
-    infoArray: defaultInfoArray
-};
-exports.NoButton = Template.bind({});
-exports.NoButton.args = {
-    modalTitleText: 'modalTitleText',
-    infoArray: noButtonInfoArray
-};
-exports.OverrideInfoTitleText = Template.bind({});
-exports.OverrideInfoTitleText.args = {
-    modalTitleText: 'modalTitleText',
-    infoArray: infoTitleTextInfoArray
-};
-exports.Variation = Template.bind({});
-exports.Variation.args = {
-    modalTitleText: 'OTT형VOD',
-    infoArray: infoArray
-};

package/dist/src/desktop/panels/SectionSheet/SectionSheet.stories.d.ts

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

package/dist/src/desktop/panels/SectionSheet/SectionSheet.stories.js

@@ -1,112 +0,0 @@
-"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.UseCase1PostsSettingSection = exports.Default = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var react_1 = require("react");
-var hybrid_1 = require("../../../hybrid");
-var BasicFormGroup_1 = __importDefault(require("../../components/BasicFormGroup/BasicFormGroup"));
-var PageTitleTextGroup_1 = __importDefault(require("../../components/PageTitleTextGroup/PageTitleTextGroup"));
-var SectionSheet_1 = __importDefault(require("./SectionSheet"));
-exports.default = {
-    title: 'desktop/panels/SectionSheet',
-    component: SectionSheet_1.default,
-    parameters: {
-        docs: {
-            description: {
-                component: 'desktop환경에 최적화 된 SectionSheet 패널'
-            }
-        }
-    },
-    argTypes: {
-        width: {
-            description: '너비값을 입력합니다. (px, %, vw...)',
-            control: { type: 'text' }
-        },
-        height: {
-            description: '높이값을 입력합니다. (px, %, vh...)',
-            control: { type: 'text' }
-        },
-        backgroundColorTheme: {
-            description: '미리 부여되어 있는 색상으로 배경 컬러를 결정합니다.',
-            control: { type: 'inline-radio' }
-        },
-        overrideBackgroundColorKey: {
-            description: '미리 부여되어 있는 색상 외의 색상으로 배경 컬러를 결정합니다. (ui_로 정의된 컬러값)',
-            control: { type: 'select' }
-        },
-        borderMode: {
-            description: '라인의 사용여부를 결정합니다.',
-            control: { type: 'inline-radio' }
-        },
-        borderWidth: {
-            description: '라인의 굵기를 결정합니다.',
-            control: { type: 'inline-radio' }
-        },
-        borderColorTheme: {
-            description: '미리 부여되어 있는 색상으로 라인 컬러를 결정합니다.',
-            control: { type: 'inline-radio' }
-        },
-        overrideBorderColorKey: {
-            description: '미리 부여되어 있는 색상 외의 색상으로 라인 컬러를 결정합니다. (ui_로 정의된 컬러값)',
-            control: { type: 'select' }
-        },
-        shapeType: {
-            description: '형태를 결정합니다.',
-            control: { type: 'inline-radio' }
-        },
-        radius: {
-            description: '모서리값을 결정합니다. (*shapeType : round 일 때만 적용됩니다.)',
-            control: { type: 'inline-radio' }
-        },
-        paddingTop: {
-            description: 'padding-top 값을 결정합니다.',
-            control: { type: 'radio' }
-        },
-        paddingRight: {
-            description: 'padding-right 값을 결정합니다.',
-            control: { type: 'radio' }
-        },
-        paddingBottom: {
-            description: 'padding-bottom 값을 결정합니다.',
-            control: { type: 'radio' }
-        },
-        paddingLeft: {
-            description: 'padding-left 값을 결정합니다.',
-            control: { type: 'radio' }
-        },
-        overrideCSS: {
-            description: '제공되어진 property와 value를 가지고 표현할 수 없는 경우를 자유롭게 기술하여 표현할 수 있습니다.'
-        },
-        children: {
-            description: 'sheet내부에 내용을 부여할 수 있습니다.'
-        },
-        onClick: {
-            description: '사용시에 마우스 포인터의 모양이 변경됩니다.',
-            action: 'onClick'
-        }
-    }
-};
-var Template = function (args) { return ((0, jsx_runtime_1.jsx)(SectionSheet_1.default, __assign({}, args, { onClick: undefined }), void 0)); };
-exports.Default = Template.bind({});
-var UseCaseTemplate = function (args) {
-    var _a = (0, react_1.useState)(false), isActive = _a[0], setIsActive = _a[1];
-    var handleToggleSwitch = function (value) {
-        setIsActive(value);
-    };
-    return ((0, jsx_runtime_1.jsxs)(SectionSheet_1.default, __assign({}, args, { onClick: undefined }, { children: [(0, jsx_runtime_1.jsx)(PageTitleTextGroup_1.default, { titleText: "\uAC8C\uC2DC\uAE00 \uBAA9\uB85D \uC124\uC815" }, void 0), (0, jsx_runtime_1.jsx)(hybrid_1.Spacing, { size: "spacing_e" }, void 0), (0, jsx_runtime_1.jsx)(BasicFormGroup_1.default, { titleText: "\uAC8C\uC2DC\uAE00 \uBAA9\uB85D \uBD84\uB9AC \uC0AC\uC6A9", descText: "\uAC8C\uC2DC\uAE00 \uBAA9\uB85D \uBD84\uB9AC\uB97C \uD65C\uC131\uD654 \uD558\uBA74 \uAD6C\uB3C5\uC790\uB4E4\uC774 \uC791\uC131\uD55C \uAC8C\uC2DC\uAE00\uACFC \uB530\uB85C \uBD84\uB9AC \uD560 \uC218 \uC788\uC2B5\uB2C8\uB2E4.", inputForm: (0, jsx_runtime_1.jsx)(hybrid_1.Switch, { name: "separated", onClick: handleToggleSwitch, status: isActive ? 'on' : 'off' }, void 0) }, void 0)] }), void 0));
-};
-exports.UseCase1PostsSettingSection = UseCaseTemplate.bind({});

package/dist/src/hybrid/components/Divider/Divider.stories.d.ts

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

package/dist/src/hybrid/components/Divider/Divider.stories.js

@@ -1,55 +0,0 @@
-"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 Divider_1 = __importDefault(require("./Divider"));
-exports.default = {
-    title: 'hybrid/components/Divider',
-    component: Divider_1.default,
-    parameters: {
-        docs: {
-            description: {
-                component: 'desktop환경과 mobile환경에 상관없이 사용 할 수 있는 hybrid Divider 컴포넌트 (스토리북에서 보여줄때는 눈으로 확인 가능 하도록 부모에 padding 30px을 임의 부여해 두었습니다.)'
-            }
-        }
-    },
-    argTypes: {
-        displayType: {
-            description: '유형을 결정합니다.',
-            control: { type: 'inline-radio' }
-        },
-        direction: {
-            description: '방향을 결정합니다. (horizontal일때는 block, vertical일때는 inline-block 상태입니다.)',
-            control: { type: 'inline-radio' }
-        },
-        height: {
-            description: '방향이 vertical일 때 높이값을 결정합니다. (부여하지 않으면 해당 컴포넌트 부모 높이의 100%를 차지합니다.)',
-            control: { type: 'number' }
-        },
-        colorTheme: {
-            description: '해당 컴포넌트의 색상을 결정합니다.',
-            control: { type: 'inline-radio' }
-        }
-    }
-};
-var Template = function (args) { return ((0, jsx_runtime_1.jsx)("div", __assign({ style: { padding: '30px', height: '100%' } }, { children: (0, jsx_runtime_1.jsx)(Divider_1.default, __assign({}, args), void 0) }), void 0)); };
-exports.Default = Template.bind({});
-exports.Default.args = {
-    displayType: 'line',
-    direction: 'horizontal',
-    colorTheme: 'none'
-};

package/dist/src/hybrid/components/Icon/Icon.stories.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="react" />
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ iconName, size, colorKey, fillType }: import("./Icon").IconProps) => JSX.Element>;
-export default _default;
-export declare const AllLineIcon: ComponentStory<({ iconName, size, colorKey, fillType }: import("./Icon").IconProps) => JSX.Element>;
-export declare const AllFillIcon: ComponentStory<({ iconName, size, colorKey, fillType }: import("./Icon").IconProps) => JSX.Element>;
-export declare const LineIcon: ComponentStory<({ iconName, size, colorKey, fillType }: import("./Icon").IconProps) => JSX.Element>;
-export declare const FillIcon: ComponentStory<({ iconName, size, colorKey, fillType }: import("./Icon").IconProps) => JSX.Element>;

package/dist/src/hybrid/components/Icon/Icon.stories.js

@@ -1,166 +0,0 @@
-"use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FillIcon = exports.LineIcon = exports.AllFillIcon = exports.AllLineIcon = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var styled_components_1 = __importDefault(require("styled-components"));
-var fill_1 = __importDefault(require("../../../common/assets/icons/fill"));
-var line_1 = __importDefault(require("../../../common/assets/icons/line"));
-var components_1 = require("../../../desktop/components");
-var panels_1 = require("../../../desktop/panels");
-var Icon_1 = __importDefault(require("./Icon"));
-exports.default = {
-    title: 'hybrid/components/Icon',
-    component: Icon_1.default,
-    parameters: {
-        docs: {
-            description: {
-                component: 'desktop환경과 mobile환경에 상관없이 사용 할 수 있는 hybrid Icon 컴포넌트'
-            }
-        }
-    },
-    argTypes: {
-        iconName: {
-            description: 'ic_x로 정의되어 있습니다. 해당 값에 따라 icon의 모양이 바뀝니다.',
-            control: { type: 'text' }
-        },
-        size: {
-            description: '아이콘의 width와 height의 크기를 한번에 결정합니다.',
-            control: { type: 'inline-radio' },
-            options: [12, 16, 20, 24, 32, 40, 48, 56, 64, 72]
-        },
-        colorKey: {
-            description: '디자인 가이드에 명시되어있는 컬러 중 ui_형태의 컬러를 사용합니다.',
-            control: { type: 'text' }
-        },
-        fillType: {
-            description: 'line 아이콘을 우선적으로 찾습니다. 없다면 fill 아이콘에서 찾고 가져옵니다.',
-            control: { type: 'inline-radio' }
-        }
-    }
-};
-var S_Grid = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: grid;\n  grid-gap: 24px;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 180px));\n  margin: 24px;\n"], ["\n  display: grid;\n  grid-gap: 24px;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 180px));\n  margin: 24px;\n"])));
-var S_TextWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  background-color: ", ";\n  border-radius: 0 0 24px 24px;\n  bottom: 0;\n  left: 0;\n  padding: 8px 0;\n  position: absolute;\n  right: 0;\n"], ["\n  background-color: ", ";\n  border-radius: 0 0 24px 24px;\n  bottom: 0;\n  left: 0;\n  padding: 8px 0;\n  position: absolute;\n  right: 0;\n"])), function (_a) {
-    var theme = _a.theme;
-    return theme.ui_cpnt_sheet_base_02;
-});
-var defaultArgs = {
-    iconName: 'ic_unavailable',
-    size: 24,
-    colorKey: 'ui_cpnt_icon_sys_grey_01',
-    fillType: 'line'
-};
-var AllLineTemplate = function (args) {
-    var linesIconKeys = Object.keys(line_1.default);
-    return ((0, jsx_runtime_1.jsx)(S_Grid, { children: linesIconKeys.map(function (key) {
-            var handleCopyUrl = function () { return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, navigator.clipboard.writeText(key)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); };
-            return ((0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ width: "180px", height: "180px", paddingBottom: "spacing_g", shapeType: "round", onClick: handleCopyUrl, overrideCSS: {
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    position: 'relative'
-                } }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, __assign({}, args, { iconName: key }), void 0), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: key, styleTheme: "caption2Bold", textAlign: "center", userSelectMode: "use" }, void 0) }, void 0)] }), key));
-        }) }, void 0));
-};
-AllLineTemplate.args = __assign({}, defaultArgs);
-exports.AllLineIcon = AllLineTemplate.bind({});
-exports.AllLineIcon.args = __assign(__assign({}, defaultArgs), { fillType: 'line' });
-var AllFillTemplate = function (args) {
-    var fillsIconKeys = Object.keys(fill_1.default);
-    return ((0, jsx_runtime_1.jsx)(S_Grid, { children: fillsIconKeys.map(function (key) {
-            var handleCopyUrl = function () { return __awaiter(void 0, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
-                        case 0: return [4 /*yield*/, navigator.clipboard.writeText(key)];
-                        case 1:
-                            _a.sent();
-                            return [2 /*return*/];
-                    }
-                });
-            }); };
-            return ((0, jsx_runtime_1.jsxs)(panels_1.ContentSheet, __assign({ width: "180px", height: "180px", paddingBottom: "spacing_g", shapeType: "round", onClick: handleCopyUrl, overrideCSS: {
-                    display: 'flex',
-                    justifyContent: 'center',
-                    alignItems: 'center',
-                    position: 'relative'
-                } }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, __assign({}, args, { iconName: key }), void 0), (0, jsx_runtime_1.jsx)(S_TextWrapper, { children: (0, jsx_runtime_1.jsx)(components_1.TextLabel, { text: key, styleTheme: "caption2Bold", textAlign: "center", userSelectMode: "use" }, void 0) }, void 0)] }), key));
-        }) }, void 0));
-};
-exports.AllFillIcon = AllFillTemplate.bind({});
-exports.AllFillIcon.args = __assign(__assign({}, defaultArgs), { fillType: 'fill' });
-var S_Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  margin: 24px;\n"], ["\n  margin: 24px;\n"])));
-var Template = function (args) {
-    return ((0, jsx_runtime_1.jsx)(S_Wrapper, { children: (0, jsx_runtime_1.jsx)(panels_1.ContentSheet, __assign({ width: "180px", height: "180px", shapeType: "round", overrideCSS: {
-                display: 'flex',
-                justifyContent: 'center',
-                alignItems: 'center',
-                position: 'relative'
-            } }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, __assign({}, args), void 0) }), void 0) }, void 0));
-};
-exports.LineIcon = Template.bind({});
-exports.LineIcon.args = __assign(__assign({}, defaultArgs), { fillType: 'line' });
-exports.FillIcon = Template.bind({});
-exports.FillIcon.args = __assign(__assign({}, defaultArgs), { fillType: 'fill' });
-var templateObject_1, templateObject_2, templateObject_3;

package/dist/src/hybrid/components/ImageView/ImageView.stories.d.ts

@@ -1,15 +0,0 @@
-/// <reference types="react" />
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-declare const _default: ComponentMeta<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;
-export default _default;
-export declare const AutoWidthResponsive: ComponentStory<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;
-export declare const AutoWidth300: ComponentStory<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;
-export declare const AutoWidth300NoImage400: ComponentStory<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;
-export declare const AutoHeightResponsive: ComponentStory<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;
-export declare const AutoHeight300: ComponentStory<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;
-export declare const AutoHeight300NoImage400: ComponentStory<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;
-export declare const AutoWidth300Height500: ComponentStory<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;
-export declare const RatioResponsive: ComponentStory<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;
-export declare const Ratio300: ComponentStory<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;
-export declare const MultiAutoHeight: ComponentStory<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;
-export declare const MultiAutoWidth: ComponentStory<({ src, shapeType, radius, width, height, noImageHeight, noImageWidth, ratio, scaleType, borderMode, backgroundFillMode, isLoading }: import("./ImageView").ImageViewProps) => JSX.Element>;

package/dist/src/hybrid/components/ImageView/ImageView.stories.js

@@ -1,111 +0,0 @@
-"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.MultiAutoWidth = exports.MultiAutoHeight = exports.Ratio300 = exports.RatioResponsive = exports.AutoWidth300Height500 = exports.AutoHeight300NoImage400 = exports.AutoHeight300 = exports.AutoHeightResponsive = exports.AutoWidth300NoImage400 = exports.AutoWidth300 = exports.AutoWidthResponsive = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var ImageView_1 = __importDefault(require("./ImageView"));
-exports.default = {
-    title: 'hybrid/components/ImageView',
-    component: ImageView_1.default,
-    parameters: {
-        docs: {
-            description: {
-                component: 'desktop환경과 mobile환경에 상관없이 사용 할 수 있는 hybrid ImageView 컴포넌트'
-            }
-        }
-    },
-    argTypes: {
-        src: {
-            description: '표시할 이미지의 주소 값입니다.',
-            control: { type: 'text' }
-        },
-        shapeType: {
-            description: '외관 형태를 결정합니다.',
-            control: { type: 'inline-radio' }
-        },
-        radius: {
-            description: '모서리 값을 결정합니다. (shapeType=round일 때만 적용됩니다.)',
-            control: { type: 'inline-radio' },
-            options: [8, 16, 24]
-        },
-        width: {
-            description: '너비를 결정합니다.'
-        },
-        height: {
-            description: '높이를 결정합니다. (ratio가 auto인 경우에만 사용 가능합니다.)'
-        },
-        noImageHeight: {
-            description: '원본 이미지 그대로 보여주는 상황에 src가 없을 경우 나타나는 회색 배경의 높이를 결정합니다. (ratio가 auto이고, width값이 부여 됐을 경우에만 사용 가능합니다.)',
-            control: { type: 'number' }
-        },
-        noImageWidth: {
-            description: '원본 이미지 그대로 보여주는 상황에 src가 없을 경우 나타나는 회색 배경의 높이를 결정합니다. (ratio가 auto이고, height값이 부여 됐을 경우에만 사용 가능합니다.)',
-            control: { type: 'number' }
-        },
-        ratio: {
-            description: 'width에 의한 height 값을 구하기 위한 비율입니다. (ratio가 auto가 아닐때는 height값이 무시 됩니다.)(ratio가 auto일때는 width나 height값을 자유롭게 줄 수 있습니다.)',
-            control: { type: 'inline-radio' }
-        },
-        scaleType: {
-            description: '이미지를 채우는 방법을 결정합니다. CSS의 object-fit이나 안드로이드의 scaleType과 유사합니다.',
-            control: { type: 'inline-radio' }
-        },
-        borderMode: {
-            description: '이미지에 1px의 border 사용을 결정합니다.',
-            control: { type: 'inline-radio' }
-        },
-        backgroundFillMode: {
-            description: 'src가 있을 경우에 회색 배경의 사용 유무를 결정합니다. (png가 들어갈 확률이 높을때 유용하게 사용할 수 있습니다.)',
-            control: { type: 'inline-radio' }
-        },
-        isLoading: {
-            description: '로딩 상태 여부를 결정합니다.',
-            control: { type: 'boolean' }
-        }
-    }
-};
-var defaultArgs = {
-    shapeType: 'round',
-    radius: 8,
-    ratio: 'auto',
-    scaleType: 'none',
-    borderMode: 'none',
-    backgroundFillMode: 'none'
-};
-var Template = function (args) { return (0, jsx_runtime_1.jsx)(ImageView_1.default, __assign({}, args), void 0); };
-exports.AutoWidthResponsive = Template.bind({});
-exports.AutoWidthResponsive.args = __assign(__assign({}, defaultArgs), { width: 'responsive', src: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80' });
-exports.AutoWidth300 = Template.bind({});
-exports.AutoWidth300.args = __assign(__assign({}, defaultArgs), { width: 300, src: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80' });
-exports.AutoWidth300NoImage400 = Template.bind({});
-exports.AutoWidth300NoImage400.args = __assign(__assign({}, defaultArgs), { width: 300, noImageHeight: 400 });
-exports.AutoHeightResponsive = Template.bind({});
-exports.AutoHeightResponsive.args = __assign(__assign({}, defaultArgs), { height: 'responsive', src: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80' });
-exports.AutoHeight300 = Template.bind({});
-exports.AutoHeight300.args = __assign(__assign({}, defaultArgs), { height: 300, src: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80' });
-exports.AutoHeight300NoImage400 = Template.bind({});
-exports.AutoHeight300NoImage400.args = __assign(__assign({}, defaultArgs), { height: 300, noImageWidth: 400 });
-exports.AutoWidth300Height500 = Template.bind({});
-exports.AutoWidth300Height500.args = __assign(__assign({}, defaultArgs), { width: 300, height: 500, scaleType: 'cover', src: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80' });
-exports.RatioResponsive = Template.bind({});
-exports.RatioResponsive.args = __assign(__assign({}, defaultArgs), { ratio: '1_1', width: 'responsive', scaleType: 'cover', src: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80' });
-exports.Ratio300 = Template.bind({});
-exports.Ratio300.args = __assign(__assign({}, defaultArgs), { ratio: '1_1', width: 300, scaleType: 'cover', src: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80' });
-var MultiAutoTemplate = function (args) { return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ImageView_1.default, __assign({ src: "https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1173&q=80" }, args), void 0), (0, jsx_runtime_1.jsx)(ImageView_1.default, __assign({ src: "https://images.unsplash.com/photo-1511739001486-6bfe10ce785f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" }, args), void 0)] }, void 0)); };
-exports.MultiAutoHeight = MultiAutoTemplate.bind({});
-exports.MultiAutoHeight.args = __assign(__assign({}, defaultArgs), { height: 400 });
-exports.MultiAutoWidth = MultiAutoTemplate.bind({});
-exports.MultiAutoWidth.args = __assign(__assign({}, defaultArgs), { width: 400 });

package/dist/src/hybrid/components/LinearProgress/LinearProgress.stories.d.ts

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