@pfct/purple 1.4.0-rc.4 → 1.4.0-rc.6

package/dist/components/Navigation/index.stories.js

@@ -1,146 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Story7 = exports.Story6 = exports.Story5 = exports.Story4 = exports.Story3 = exports.Story2 = exports.Story1 = void 0;
-const react_1 = __importDefault(require("react"));
-const _1 = require(".");
-/**
- * updated 230523
- *
- * 현재 사용자가 위치한 화면의 정보와 액션 기능을 담고 있는 컴포넌트입니다.
- *
- */
-const meta = {
-    title: 'Component/Navigation Bar',
-    component: _1.Navigation,
-    tags: ['autodocs'],
-};
-exports.default = meta;
-// Props 교체 가능
-exports.Story1 = {
-    render: (props) => react_1.default.createElement(_1.Navigation, Object.assign({}, props)),
-    args: {
-        contentColor: 'gray',
-        hasBackgroundColor: true,
-        title: '타이틀',
-        leftArea: {
-            type: 'backIcon',
-            handleClickButton: () => {
-                console.log('left button click');
-            },
-        },
-        rightArea: {
-            type: 'text',
-            children: '텍스트',
-            handleClickButton: () => {
-                console.log('right button click');
-            },
-        },
-    },
-};
-exports.Story1.storyName = '배경컬러 있음';
-exports.Story2 = {
-    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
-        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
-    args: {
-        contentColor: 'gray',
-        hasBackgroundColor: false,
-        title: '타이틀',
-        leftArea: {
-            type: 'backIcon',
-            handleClickButton: () => {
-                console.log('left button click');
-            },
-        },
-        rightArea: {
-            type: 'text',
-            children: '텍스트',
-            handleClickButton: () => {
-                console.log('right button click');
-            },
-        },
-    },
-};
-exports.Story2.storyName = '배경컬러 없음';
-exports.Story3 = {
-    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
-        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
-    args: {
-        contentColor: 'gray',
-        hasBackgroundColor: true,
-        title: '타이틀',
-    },
-};
-exports.Story3.storyName = 'leftArea / rightArea - 없음';
-exports.Story4 = {
-    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
-        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
-    args: {
-        contentColor: 'gray',
-        hasBackgroundColor: true,
-        title: '타이틀',
-        rightArea: {
-            type: 'text',
-            children: '텍스트',
-            handleClickButton: () => {
-                console.log('right button click');
-            },
-        },
-    },
-};
-exports.Story4.storyName = 'rightArea - Text';
-exports.Story5 = {
-    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
-        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
-    args: {
-        contentColor: 'gray',
-        hasBackgroundColor: true,
-        title: '타이틀',
-        rightArea: {
-            type: 'closeIcon',
-            handleClickButton: () => {
-                console.log('right button click');
-            },
-        },
-    },
-};
-exports.Story5.storyName = 'rightArea - 취소 아이콘';
-exports.Story6 = {
-    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
-        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
-    args: {
-        contentColor: 'white',
-        hasBackgroundColor: true,
-        title: '타이틀',
-        rightArea: {
-            type: 'closeIcon',
-            handleClickButton: () => {
-                console.log('right button click');
-            },
-        },
-    },
-};
-exports.Story6.storyName = 'contentColor - white';
-exports.Story7 = {
-    render: (props) => (react_1.default.createElement("div", { style: { background: 'transparent' } },
-        react_1.default.createElement(_1.Navigation, Object.assign({}, props)))),
-    args: {
-        contentColor: 'gray',
-        hasBackgroundColor: true,
-        leftArea: {
-            type: 'backIcon',
-            handleClickButton: () => {
-                console.log('left button click');
-            },
-        },
-        rightArea: {
-            type: 'closeIcon',
-            handleClickButton: () => {
-                console.log('right button click');
-            },
-        },
-    },
-};
-exports.Story7.storyName = 'title 없음';

package/dist/components/Navigation/index.styled.js

@@ -1,17 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextWrapper = exports.IconWrapper = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const VerticalCenterizeWrapper = styled_1.default.div `
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-`;
-exports.IconWrapper = VerticalCenterizeWrapper;
-exports.TextWrapper = (0, styled_1.default)(VerticalCenterizeWrapper) `
-	margin-right: 5px;
-`;

package/dist/components/OverlayRoot/index.js

@@ -1,58 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OverlayRoot = void 0;
-const react_1 = __importStar(require("react"));
-const Styled = __importStar(require("./index.styled"));
-const hooks_1 = require("../../hooks");
-const style_constants_1 = require("../../constants/style.constants");
-const OverlayRoot = react_1.default.memo(({ className, visible, onClick, zIndex = style_constants_1.zIndex.modal, children }) => {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const onCloseEvent = (e) => {
-        if (e.target === e.currentTarget) {
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        let timeoutId;
-        if (visible) {
-            setOpen(true);
-        }
-        else {
-            timeoutId = setTimeout(() => setOpen(false), 400);
-        }
-        return () => {
-            if (timeoutId !== undefined) {
-                clearTimeout(timeoutId);
-            }
-        };
-    }, [visible]);
-    (0, hooks_1.useOverlayPreventScroll)(visible);
-    if (!open) {
-        return null;
-    }
-    return (react_1.default.createElement(Styled.Overlay, { className: className, visible: visible, zIndex: zIndex, onClick: onCloseEvent }, children));
-});
-exports.OverlayRoot = OverlayRoot;

package/dist/components/OverlayRoot/index.styled.js

@@ -1,43 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Overlay = exports.modalSettings = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const Colors_1 = require("../../core/Colors");
-const react_1 = require("@emotion/react");
-const fadeIn = (0, react_1.keyframes) `
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-`;
-const fadeOut = (0, react_1.keyframes) `
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-`;
-const modalSettings = (visible) => (0, react_1.css) `
-	visibility: ${visible ? 'visible' : 'hidden'};
-	animation: ${visible ? fadeIn : fadeOut} 0.4s ease-out;
-	transition: visibility 0.4s ease-out;
-`;
-exports.modalSettings = modalSettings;
-exports.Overlay = styled_1.default.div `
-	box-sizing: border-box;
-	position: fixed;
-	top: 0;
-	bottom: 0;
-	left: 0;
-	right: 0;
-	background-color: ${(0, Colors_1.generateHexWithAlphaInLightMode)(Colors_1.basicColors.black, '60%')};
-	z-index: ${(el) => el.zIndex};
-
-	${({ visible }) => (0, exports.modalSettings)(visible)};
-`;

package/dist/components/Segment/BaseSegment/index.js

@@ -1,53 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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 });
-exports.Segment = void 0;
-const react_1 = __importDefault(require("react"));
-const Styled = __importStar(require("./index.styled"));
-const Segment = ({ item, value, onChange }) => {
-    const width = 100 / item.length;
-    const control = () => {
-        const idx = item.findIndex((i) => i === value) * 100;
-        if (idx < 0) {
-            return 0;
-        }
-        else {
-            return idx / item.length;
-        }
-    };
-    return (react_1.default.createElement(Styled.Wrapper, null,
-        react_1.default.createElement(Styled.LabelWrapper, { width: width },
-            item.map((label, index) => {
-                return (react_1.default.createElement(react_1.default.Fragment, { key: index },
-                    react_1.default.createElement(Styled.Label, { className: Styled.className.segmentLabel, active: value === label },
-                        react_1.default.createElement(Styled.Input, { type: "radio", name: "radio", value: label, checked: value === label, onChange: (e) => onChange(e.target.value) }),
-                        label)));
-            }),
-            react_1.default.createElement(Styled.Control, { className: Styled.className.segmentControl, control: control(), width: width }))));
-};
-exports.Segment = Segment;

package/dist/components/Segment/BaseSegment/index.spec.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/components/Segment/BaseSegment/index.spec.js

@@ -1,21 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@testing-library/react");
-const _1 = require(".");
-const props = {
-    item: ['1', '2', '3'],
-    value: '1',
-    onChange: () => {
-        console.log('onChange');
-    },
-};
-describe('<Segment />', () => {
-    it('렌더링 체크', () => {
-        (0, react_2.render)(react_1.default.createElement(_1.Segment, Object.assign({}, props), "\uD655\uC778"));
-        expect(react_2.screen.getByText('확인')).toBeInTheDocument();
-    });
-});

package/dist/components/Segment/BaseSegment/index.styled.js

@@ -1,58 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LabelWrapper = exports.Input = exports.Wrapper = exports.Label = exports.Control = exports.className = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const TextStyles_1 = require("../../../core/TextStyles");
-const Colors_1 = require("../../../core/Colors");
-exports.className = {
-    segmentControl: 'segment-control',
-    segmentLabel: 'segment-label',
-};
-exports.Control = styled_1.default.div `
-	width: ${({ width }) => `${width}%`};
-	background-color: ${Colors_1.basicColors.white};
-	position: absolute;
-	left: ${({ control }) => `${control}%`};
-	transition: left 0.4s ease-out;
-	z-index: -10 !important;
-	border-radius: 8px;
-	box-shadow: 0px 2px 4px rgba(208, 208, 208, 0.5);
-`;
-exports.Label = styled_1.default.label `
-	${TextStyles_1.typography.h6};
-	font-weight: 700;
-	transition: all 0.4s ease-out;
-	color: ${({ active }) => (active ? Colors_1.basicColors.gray900 : Colors_1.basicColors.gray200)};
-`;
-exports.Wrapper = styled_1.default.div `
-	box-sizing: border-box;
-	width: 100%;
-	height: 48px;
-	position: relative;
-	background-color: ${Colors_1.semanticColors.segmentControlContainer};
-	z-index: 5;
-	border-radius: 10px;
-	padding: 4px;
-`;
-exports.Input = styled_1.default.input `
-	display: none;
-`;
-exports.LabelWrapper = styled_1.default.div `
-	width: calc(100% - 8px);
-	height: 40px;
-	box-sizing: border-box;
-	position: absolute;
-
-	& > .${exports.className.segmentControl}, .${exports.className.segmentLabel} {
-		width: ${({ width }) => `${width}%`};
-		height: 40px;
-		text-align: center;
-		display: inline-block;
-		z-index: 2;
-		line-height: 40px;
-		cursor: pointer;
-	}
-`;

package/dist/components/Segment/ExtendSegment/index.js

@@ -1,59 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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 });
-exports.ExtendSegment = void 0;
-const react_1 = __importDefault(require("react"));
-const Styled = __importStar(require("./index.styled"));
-const ExtendSegment = ({ item, value = '', onChange }) => {
-    const width = 100 / item.length;
-    const control = () => {
-        const idx = item.findIndex((i) => i.value === value) * 100;
-        if (idx < 0) {
-            return 0;
-        }
-        else {
-            return idx / item.length;
-        }
-    };
-    return (react_1.default.createElement(Styled.Wrapper, null,
-        react_1.default.createElement(Styled.LabelWrapper, { width: width },
-            item.map((label, index) => {
-                const active = value === label.value;
-                const className = (() => {
-                    const result = [active ? 'active' : 'disabled'];
-                    result.push(Styled.className.extendSegmentLabel);
-                    return result.join(' ');
-                })();
-                return (react_1.default.createElement(react_1.default.Fragment, { key: index },
-                    react_1.default.createElement(Styled.Label, { className: className, active: active, onClick: () => {
-                            onChange(label.value);
-                        } }, label.children)));
-            }),
-            react_1.default.createElement(Styled.Control, { control: control(), width: width }))));
-};
-exports.ExtendSegment = ExtendSegment;

package/dist/components/Segment/ExtendSegment/index.styled.js

@@ -1,60 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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 });
-exports.LabelWrapper = exports.Input = exports.Wrapper = exports.Label = exports.Control = exports.className = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const BaseSegmentStyled = __importStar(require("../BaseSegment/index.styled"));
-const Colors_1 = require("../../../core/Colors");
-exports.className = {
-    extendSegmentLabel: 'extend-segment-label',
-};
-exports.Control = BaseSegmentStyled.Control;
-exports.Label = (0, styled_1.default)(BaseSegmentStyled.Label) `
-	/* fyi. selector 여러개와 !important 로 비활성화 색깔 고정 */
-
-	&.disabled > * {
-		color: ${Colors_1.basicColors.gray200} !important;
-	}
-`;
-exports.Wrapper = BaseSegmentStyled.Wrapper;
-exports.Input = BaseSegmentStyled.Input;
-exports.LabelWrapper = (0, styled_1.default)(BaseSegmentStyled.LabelWrapper) `
-	& > .${exports.className.extendSegmentLabel} {
-		width: ${({ width }) => `${width}%`};
-		height: 40px;
-		text-align: center;
-		z-index: 2;
-		line-height: 40px;
-		cursor: pointer;
-
-		/* 다른 속성 */
-		display: inline-flex;
-		flex-direction: row;
-		justify-content: center;
-	}
-`;

package/dist/components/Segment/index.js

@@ -1,18 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./BaseSegment"), exports);
-__exportStar(require("./ExtendSegment"), exports);

package/dist/components/Segment/index.stories.d.ts

@@ -1,16 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SegmentProps } from './BaseSegment';
-import { ExtendSegmentProps } from './ExtendSegment';
-/**
- * updated 230523
- *
- * <a href="https://www.notion.so/Segment-Control-6e06058eb43c4615a71bf37d35631043?pvs=4" target="_blank">노션페이지</a>
- * <br/>
- * 하위 정보를 동일하게 분할하여 구성합니다.
- * 기본적으로 첫 번째 세그먼트가 선택되어 있고 사용자는 나머지 세그먼트를 선택할 수 있습니다.
- *
- */
-declare const meta: Meta<SegmentProps<string>>;
-export default meta;
-export declare const Story1: StoryObj<SegmentProps<string>>;
-export declare const Story2: StoryObj<ExtendSegmentProps>;

package/dist/components/Segment/index.stories.js

@@ -1,105 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Story2 = exports.Story1 = void 0;
-const react_1 = __importStar(require("react"));
-const BaseSegment_1 = require("./BaseSegment");
-const ExtendSegment_1 = require("./ExtendSegment");
-const Colors_1 = require("../../core/Colors");
-/**
- * updated 230523
- *
- * <a href="https://www.notion.so/Segment-Control-6e06058eb43c4615a71bf37d35631043?pvs=4" target="_blank">노션페이지</a>
- * <br/>
- * 하위 정보를 동일하게 분할하여 구성합니다.
- * 기본적으로 첫 번째 세그먼트가 선택되어 있고 사용자는 나머지 세그먼트를 선택할 수 있습니다.
- *
- */
-const meta = {
-    title: 'Component/Segment',
-    component: BaseSegment_1.Segment,
-    tags: ['autodocs'],
-};
-exports.default = meta;
-const BaseSegmentComp = (props) => {
-    const [value, setValue] = (0, react_1.useState)(props.item[0]);
-    const onChange = (val) => {
-        setValue(val);
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        "selected: ",
-        value,
-        react_1.default.createElement("br", null),
-        react_1.default.createElement("br", null),
-        react_1.default.createElement(BaseSegment_1.Segment, Object.assign({}, props, { value: value, onChange: onChange }))));
-};
-// Props 교체 가능
-exports.Story1 = {
-    render: (props) => (react_1.default.createElement("div", { style: { width: '600px' } },
-        react_1.default.createElement(BaseSegmentComp, Object.assign({}, props)))),
-    args: {
-        item: ['One', 'Two', 'Three'],
-    },
-    argTypes: {
-        onChange: { action: 'onChange' },
-    },
-};
-exports.Story1.storyName = 'Segment - 문자열 리스트';
-const ExtendSegmentComp = (props) => {
-    const [value, setValue] = (0, react_1.useState)(props.item[0].value);
-    const onChange = (val) => {
-        setValue(val);
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        "selected: ",
-        value,
-        react_1.default.createElement("br", null),
-        react_1.default.createElement("br", null),
-        react_1.default.createElement(ExtendSegment_1.ExtendSegment, Object.assign({}, props, { value: value, onChange: onChange }))));
-};
-exports.Story2 = {
-    render: (props) => (react_1.default.createElement("div", { style: { width: '600px' } },
-        react_1.default.createElement(ExtendSegmentComp, Object.assign({}, props)))),
-    args: {
-        item: [
-            {
-                value: '부정',
-                children: (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("div", null, "\uBD80\uC815"),
-                    react_1.default.createElement("div", { style: { color: Colors_1.basicColors.red300, paddingLeft: '5px' } }, "4"))),
-            },
-            {
-                value: '긍정',
-                children: (react_1.default.createElement(react_1.default.Fragment, null,
-                    react_1.default.createElement("div", null, "\uAE0D\uC815"),
-                    react_1.default.createElement("div", { style: { color: '#6EED81', paddingLeft: '5px' } }, "1"))),
-            },
-        ],
-    },
-    argTypes: {
-        onChange: { action: 'onChange' },
-    },
-};
-exports.Story2.storyName = 'Segment - 컴포넌트 리스트';