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

package/dist/components/Tooltip/BasicTooltip/index.stories.js

@@ -1,92 +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.Story3 = exports.Story2 = exports.Story1 = void 0;
-const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const _1 = __importDefault(require("."));
-const TooltipBase_1 = require("../TooltipBase");
-const Icon_1 = require("../../../Icon");
-const __1 = require("../..");
-const library_1 = require("../../../library");
-/**
- * updated 230523
- *
- * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
- * <br/>
- * 콘텐츠의 이해를 돕기 위한 보충 설명을 제공합니다. 사용자의 행동에 방해되지 않도록 선택적으로 열고 닫을 수 있으며 아이콘, 텍스트 등 버튼의 기능을 가진 컴포넌트에 종속되어 단독으로 사용할 수 없습니다.
- *
- */
-const meta = {
-    title: 'Component/Tooltip/BasicTooltip',
-    component: _1.default,
-    tags: ['autodocs'],
-};
-exports.default = meta;
-const commonArgTypes = {
-    placement: {
-        options: TooltipBase_1.PlacementArray,
-        control: { type: 'radio' },
-    },
-};
-const ContainerForStorybook = styled_1.default.div `
-	width: 100%;
-	padding: 100px 0;
-`;
-const Component1 = (props) => {
-    return (react_1.default.createElement(ContainerForStorybook, null,
-        react_1.default.createElement(_1.default, Object.assign({}, props),
-            react_1.default.createElement(Icon_1.QuestionIcon, null))));
-};
-// Props 교체 가능
-exports.Story1 = {
-    render: (props) => react_1.default.createElement(Component1, Object.assign({}, props)),
-    args: {
-        content: '툴팁 문구를 입력해주세요',
-    },
-    argTypes: commonArgTypes,
-    parameters: {
-        docs: {
-            description: {
-                story: '종속된 컴포넌트 위치에 따라 말풍선 꼬리의 위치를 결정합니다. 화면을 가로로 3등분 하여 콘텐츠의 위치에 따라 왼쪽, 중앙, 오른쪽에 꼬리를 표시하고, 화면을 세로로 2등분 하여 위쪽, 아래쪽으로 말풍선 꼬리를 표시합니다.',
-            },
-        },
-    },
-};
-exports.Story1.storyName = 'w. QuestionIcon';
-const Component2 = (props) => {
-    return (react_1.default.createElement(ContainerForStorybook, null,
-        react_1.default.createElement(_1.default, Object.assign({}, props),
-            react_1.default.createElement(__1.BoxMiniButton, { colorType: "gray" }, "\uC0C1\uD488 \uD544\uD130")),
-        react_1.default.createElement(library_1.Spacing, { spaceNumber: 30 }),
-        react_1.default.createElement(_1.default, Object.assign({}, props, { isChildrenFullWidth: true }),
-            react_1.default.createElement(__1.SingleButton, { colorType: "gray", purpose: "main" }, "SingleButton")),
-        react_1.default.createElement(library_1.Spacing, { spaceNumber: 30 }),
-        react_1.default.createElement(_1.default, Object.assign({}, props),
-            react_1.default.createElement(__1.IconMiniButton, { colorType: "gray", size: "s", icon: react_1.default.createElement(Icon_1.ChevronRightSIcon, null) }, "\uC0C1\uD488 \uAC00\uC774\uB4DC"))));
-};
-// Props 교체 가능
-exports.Story2 = {
-    render: (props) => react_1.default.createElement(Component2, Object.assign({}, props)),
-    args: {
-        content: '툴팁 문구를 입력해주세요',
-    },
-    argTypes: commonArgTypes,
-};
-exports.Story2.storyName = 'w. Buttons';
-const Component3 = (props) => {
-    return (react_1.default.createElement(ContainerForStorybook, null,
-        react_1.default.createElement(_1.default, Object.assign({}, props),
-            react_1.default.createElement(__1.IconMiniButton, { colorType: "gray", size: "s", icon: react_1.default.createElement(Icon_1.ChevronRightSIcon, null) }, "\uC0C1\uD488 \uAC00\uC774\uB4DC"))));
-};
-// Props 교체 가능
-exports.Story3 = {
-    render: (props) => react_1.default.createElement(Component3, Object.assign({}, props)),
-    args: {
-        content: '툴팁 문구를 입력해주세요',
-    },
-    argTypes: commonArgTypes,
-};
-exports.Story3.storyName = 'w. IconMiniButton';

package/dist/components/Tooltip/ImpactTooltip/index.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 TooltipBase_1 = __importDefault(require("../TooltipBase"));
-const ImpactTooltip = (props) => {
-    return (react_1.default.createElement(TooltipBase_1.default, Object.assign({}, props, { alwaysShow: true, popperOptions: {
-            modifiers: [
-                { name: 'flip', enabled: false },
-                {
-                    name: 'preventOverflow',
-                    options: {
-                        mainAxis: false,
-                    },
-                },
-            ],
-        } })));
-};
-exports.default = ImpactTooltip;

package/dist/components/Tooltip/ImpactTooltip/index.stories.d.ts

@@ -1,14 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ImpactTooltipProps } from '.';
-type Story = StoryObj<ImpactTooltipProps>;
-/**
- * updated 230523
- *
- * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
- * <br/>
- * 사용자에게 필수로 정보를 인지시켜야할 경우 사용합니다. 화면 진입 시 단독으로 노출하며 사용자의 액션을 방해하지 않도록 필요 시 닫기 기능을 제공합니다.
- *
- */
-declare const meta: Meta<ImpactTooltipProps>;
-export default meta;
-export declare const Story1: Story;

package/dist/components/Tooltip/ImpactTooltip/index.stories.js

@@ -1,68 +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.Story1 = void 0;
-const react_1 = __importDefault(require("react"));
-const TooltipBase_1 = require("../TooltipBase");
-const _1 = __importDefault(require("."));
-const Icon_1 = require("../../../Icon");
-const styled_1 = __importDefault(require("@emotion/styled"));
-/**
- * updated 230523
- *
- * <a href="https://www.notion.so/Tooltip-3517bfdc827244d3a8cc91ec2b5c54c3" target="_blank">노션페이지</a>
- * <br/>
- * 사용자에게 필수로 정보를 인지시켜야할 경우 사용합니다. 화면 진입 시 단독으로 노출하며 사용자의 액션을 방해하지 않도록 필요 시 닫기 기능을 제공합니다.
- *
- */
-const meta = {
-    title: 'Component/Tooltip/ImpactTooltip',
-    component: _1.default,
-    tags: ['autodocs'],
-};
-exports.default = meta;
-const commonArgTypes = {
-    colorType: {
-        options: TooltipBase_1.ColorTypeArray.filter((colorType) => colorType !== 'white'),
-        control: { type: 'radio' },
-    },
-    placement: {
-        options: TooltipBase_1.PlacementArray,
-        control: { type: 'radio' },
-    },
-    hasCloseButton: {
-        control: { type: 'boolean' },
-    },
-};
-const ContainerForStorybook = styled_1.default.div `
-	width: 100%;
-	padding: 100px 0;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-`;
-const Component1 = (props) => {
-    return (react_1.default.createElement(ContainerForStorybook, null,
-        react_1.default.createElement(_1.default, Object.assign({}, props),
-            react_1.default.createElement(Icon_1.QuestionIcon, null))));
-};
-// Props 교체 가능
-exports.Story1 = {
-    render: (props) => react_1.default.createElement(Component1, Object.assign({}, props)),
-    args: {
-        colorType: 'gray',
-        content: '툴팁 문구를 입력해주세요',
-        placement: 'top-center',
-    },
-    argTypes: commonArgTypes,
-    parameters: {
-        docs: {
-            description: {
-                story: '화면 영향 없이 콘텐츠가 가려지지 않는 방향으로 자유롭게 말풍선 꼬리를 표시합니다.',
-            },
-        },
-    },
-};
-exports.Story1.storyName = 'playground';

package/dist/components/Tooltip/TooltipBase/index.js

@@ -1,141 +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.PlacementArray = exports.ColorTypeArray = void 0;
-const react_1 = __importStar(require("react"));
-const Styled = __importStar(require("./index.styled"));
-const Colors_1 = require("../../../core/Colors");
-const Icon_1 = require("../../../Icon");
-exports.ColorTypeArray = ['white', 'pink', 'blue', 'gray', 'lime'];
-exports.PlacementArray = [
-    'top-left',
-    'top-center',
-    'top-right',
-    'bottom-left',
-    'bottom-center',
-    'bottom-right',
-    'left-center',
-    'right-center',
-];
-const arrowLengthPx = 5.8;
-const distancePx = 2;
-const createArrow = ({ backgroundColor }) => {
-    if (backgroundColor === Colors_1.basicColors.white) {
-        // fyi. borderColor 컬러가 상이해서 다른 svg를 사용합니다.
-        return `<svg width="13" height="8" viewBox="0 0 13 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M4.67395 2.01734L5.08584e-07 8L1.31297 8L5.46343 2.67569C5.86314 2.16294 6.63816 2.16193 7.03919 2.67364L11.2136 8L12.5 8L7.82605 2.01734C7.02531 0.992394 5.4747 0.992392 4.67395 2.01734Z" fill="${Colors_1.basicColors.gray100}" />
-        <path d="M11.201 8L1.30078 8L5.45142 2.66295C5.85118 2.14892 6.62777 2.14801 7.02874 2.6611L11.201 8Z" fill="${Colors_1.basicColors.white}"/>
-    </svg>`;
-    }
-    else {
-        return `
-    <svg id="hello" width="13" height="7" viewBox="0 0 13 7" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <path d="M4.67395 0.768711L0 6.75137L1.30078 6.75137L11.201 6.75137H12.5L7.82605 0.768713C7.02531 -0.256236 5.4747 -0.256238 4.67395 0.768711Z" fill="${backgroundColor}"/>
-    </svg>
-`;
-    }
-};
-const TooltipBase = ({ placement, colorType, content, children, className, alwaysShow = false, hasCloseButton = false, zIndex, popperOptions, isChildrenFullWidth = false, }) => {
-    const [visible, setVisible] = (0, react_1.useState)(false);
-    const placementAssertedType = (0, react_1.useMemo)(() => {
-        switch (placement) {
-            case 'top-left':
-                return 'bottom-start';
-            case 'top-center':
-                return 'bottom';
-            case 'top-right':
-                return 'bottom-end';
-            case 'bottom-left':
-                return 'top-start';
-            case 'bottom-center':
-                return 'top';
-            case 'bottom-right':
-                return 'top-end';
-            case 'left-center':
-                return 'right';
-            case 'right-center':
-                return 'left';
-            default:
-                return 'top';
-        }
-    }, [placement]);
-    const colorStyle = (0, react_1.useMemo)(() => {
-        switch (colorType) {
-            case 'gray':
-                return {
-                    backgroundColor: Colors_1.basicColors.gray700,
-                    borderColor: Colors_1.basicColors.gray700,
-                    contentColor: Colors_1.basicColors.gray25,
-                };
-            case 'white':
-                return {
-                    backgroundColor: Colors_1.basicColors.white,
-                    borderColor: Colors_1.basicColors.gray100,
-                    contentColor: Colors_1.basicColors.gray400,
-                };
-            default:
-                return {
-                    backgroundColor: Colors_1.basicColors[`${colorType}400`],
-                    borderColor: Colors_1.basicColors[`${colorType}400`],
-                    contentColor: Colors_1.basicColors.gray25,
-                };
-        }
-    }, [colorType]);
-    const propsWithoutPlacement = {
-        visible,
-        arrow: createArrow({ backgroundColor: colorStyle.backgroundColor }),
-    };
-    const openTooltip = () => {
-        setVisible(true);
-    };
-    const closeTooltip = () => {
-        setVisible(false);
-    };
-    const convertedContent = (react_1.default.createElement(Styled.TippyContentAndCloseButtonWrapper, { onClick: closeTooltip },
-        react_1.default.createElement("div", null, content),
-        hasCloseButton && (react_1.default.createElement(Styled.CloseButtonWrapper, null,
-            react_1.default.createElement(Icon_1.CancelSIcon, { fillColor: Colors_1.basicColors.white })))));
-    const handleMouseEnter = () => {
-        if (visible && alwaysShow) {
-            return;
-        }
-        openTooltip();
-    };
-    const handleMouseLeave = () => {
-        if (visible && alwaysShow) {
-            return;
-        }
-        closeTooltip();
-    };
-    (0, react_1.useEffect)(() => {
-        if (alwaysShow) {
-            // 초기 렌더링에 툴팁 표시
-            setVisible(true);
-        }
-    }, [alwaysShow]);
-    return (react_1.default.createElement(Styled.TippyWrapper, Object.assign({}, colorStyle, propsWithoutPlacement, { placement: placementAssertedType, className: className, content: convertedContent, offset: [0, arrowLengthPx + distancePx], interactive: true, zIndex: zIndex, popperOptions: popperOptions }),
-        react_1.default.createElement(Styled.Children, { isChildrenFullWidth: isChildrenFullWidth, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave }, children)));
-};
-exports.default = TooltipBase;

package/dist/components/Tooltip/TooltipBase/index.styled.js

@@ -1,99 +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.Children = exports.TippyWrapper = exports.CloseButtonWrapper = exports.TippyContentAndCloseButtonWrapper = void 0;
-const styled_1 = __importDefault(require("@emotion/styled"));
-const react_1 = __importDefault(require("@tippyjs/react"));
-const TextStyles_1 = require("../../../core/TextStyles");
-exports.TippyContentAndCloseButtonWrapper = styled_1.default.div `
-	display: flex;
-	justify-content: space-between;
-	gap: 5px;
-`;
-exports.CloseButtonWrapper = styled_1.default.div `
-	width: 16px;
-	height: 100%;
-
-	svg {
-		/* close buttons */
-		cursor: pointer;
-		width: 16px;
-		height: 16px;
-	}
-`;
-exports.TippyWrapper = (0, styled_1.default)(react_1.default) `
-	background-color: ${({ backgroundColor }) => backgroundColor};
-	border-radius: 8px;
-	border: 1px solid ${({ borderColor }) => borderColor};
-	transform: translate3d(0, 0, 0);
-
-	& > .tippy-content {
-		/* 툴팁 내부 박스 */
-		${(0, TextStyles_1.body2)()}
-		color: ${({ contentColor }) => contentColor} !important;
-
-		position: relative;
-		white-space: pre-wrap;
-		padding: 12.5px 15px;
-
-		#custom-tippy-content-close-btn {
-			/* TODO: 클릭 후 닫히기 기능 점검 필요 */
-			cursor: pointer;
-		}
-	}
-
-	& > .tippy-svg-arrow {
-		& > svg {
-			transform: translate3d(0, 0, 0);
-		}
-	}
-
-	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow {
-		bottom: 0;
-	}
-	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow:after,
-	&.tippy-box[data-placement^='top'] > .tippy-svg-arrow > svg {
-		top: 16px;
-		transform: rotate(180deg);
-	}
-	&.tippy-box[data-placement^='bottom'] > .tippy-svg-arrow {
-		top: 0;
-	}
-	&.tippy-box[data-placement^='bottom'] > .tippy-svg-arrow > svg {
-		bottom: 16px;
-	}
-	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow {
-		right: 0;
-	}
-	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow:after,
-	&.tippy-box[data-placement^='left'] > .tippy-svg-arrow > svg {
-		transform: rotate(90deg);
-		top: calc(50% - 3px);
-		left: 11px;
-	}
-	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow {
-		left: 0;
-	}
-	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow:after,
-	&.tippy-box[data-placement^='right'] > .tippy-svg-arrow > svg {
-		transform: rotate(-90deg);
-		top: calc(50% - 3px);
-		right: 11px;
-	}
-	.tippy-svg-arrow {
-		width: 16px;
-		height: 16px;
-		fill: #333;
-		text-align: initial;
-	}
-	.tippy-svg-arrow,
-	.tippy-svg-arrow > svg {
-		position: absolute;
-	}
-`;
-exports.Children = styled_1.default.div `
-	display: inline-block;
-	${({ isChildrenFullWidth }) => isChildrenFullWidth && 'width: 100%'};
-`;

package/dist/components/Tooltip/index.js

@@ -1,11 +0,0 @@
-"use strict";
-// fyi. 원하는 모듈과 타입만 외부 노출 방법
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ImpactTooltip = exports.BasicTooltip = void 0;
-var BasicTooltip_1 = require("./BasicTooltip");
-Object.defineProperty(exports, "BasicTooltip", { enumerable: true, get: function () { return __importDefault(BasicTooltip_1).default; } });
-var ImpactTooltip_1 = require("./ImpactTooltip");
-Object.defineProperty(exports, "ImpactTooltip", { enumerable: true, get: function () { return __importDefault(ImpactTooltip_1).default; } });

package/dist/components/index.js

@@ -1,38 +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("./Badge"), exports);
-__exportStar(require("./Button"), exports);
-__exportStar(require("./Card"), exports);
-__exportStar(require("./Comment"), exports);
-__exportStar(require("./Control"), exports);
-__exportStar(require("./DatePicker"), exports);
-__exportStar(require("./Divider"), exports);
-__exportStar(require("./Input"), exports);
-__exportStar(require("./Loading"), exports);
-__exportStar(require("./MiniButton"), exports);
-__exportStar(require("./Navigation"), exports);
-__exportStar(require("./Segment"), exports);
-__exportStar(require("./SelectBox"), exports);
-__exportStar(require("./Chips"), exports);
-__exportStar(require("./Tabs"), exports);
-__exportStar(require("./Tag"), exports);
-__exportStar(require("./Title"), exports);
-__exportStar(require("./BottomSheet"), exports);
-__exportStar(require("./Modal"), exports);
-__exportStar(require("./Modal/BaseModal"), exports);
-__exportStar(require("./ToastMessage"), exports);
-__exportStar(require("./Tooltip"), exports);

package/dist/constants/index.js

@@ -1,17 +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("./style.constants"), exports);

package/dist/constants/style.constants.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutSpacing = exports.zIndex = void 0;
-exports.zIndex = {
-    floatButton: 5,
-    gnb: 10,
-    basicLayer: 100,
-    modal: 1000,
-    loading: 19950824,
-};
-exports.LayoutSpacing = {
-    bottomMargin: {
-        mobile: 80,
-        pc: 60,
-    },
-};