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

package/dist/library/IconWithImage/index.styled.js

@@ -0,0 +1,14 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconWrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.IconWrapper = styled_1.default.img `
+	${({ width, height }) => (0, react_1.css) `
+		width: ${width}px
+		height: ${height}px
+	`}
+`;

package/dist/library/List/BottomSheetItemList/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 type BottomSheetItemListProps<ValueType = string> = {
     item: SelectOptionProps<ValueType>[];
     onClick: (value: SelectOptionProps) => void;

package/dist/library/List/BottomSheetItemList/index.js

@@ -0,0 +1,52 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.BottomSheetItemList = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const BottomSheetItemList = ({ item, onClick }) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null, item.map((item) => {
+        var _a;
+        return (react_1.default.createElement(Styled.Item, { key: item.label, onClick: () => {
+                if (!item.disabled) {
+                    onClick({ value: item.value, label: item.label });
+                }
+            }, disabled: (_a = item.disabled) !== null && _a !== void 0 ? _a : false }, item.label));
+    })));
+};
+exports.BottomSheetItemList = BottomSheetItemList;

package/dist/library/List/BottomSheetItemList/index.styled.d.ts

@@ -1,6 +1,6 @@
-export declare const Item: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Item: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     disabled: boolean;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/library/List/BottomSheetItemList/index.styled.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const TextStyles_1 = require("../../../core/TextStyles");
+const Colors_1 = require("../../../core/Colors");
+exports.Item = styled_1.default.div `
+	width: 100%;
+	height: 48px;
+	padding: 15px 25px;
+	background-color: ${Colors_1.basicColors.white};
+	${(0, TextStyles_1.title2)({ color: Colors_1.basicColors.gray400 })}
+
+	${({ disabled }) => disabled &&
+    (0, react_1.css) `
+			background-color: ${Colors_1.basicColors.gray50};
+			color: ${Colors_1.basicColors.gray200};
+			cursor: not-allowed;
+		`}
+
+	&:active {
+		background-color: ${Colors_1.basicColors.gray25};
+	}
+`;

package/dist/library/List/index.js

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

package/dist/library/Lottie/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 import * as Styled from './index.styled';
 interface LottieProps extends Styled.LottieContainerProps {
     lottieFileSrcPath: string;

package/dist/library/Lottie/index.js

@@ -0,0 +1,114 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.Lottie = void 0;
+const react_1 = __importStar(require("react"));
+const react_intersection_observer_1 = require("react-intersection-observer");
+const lottie_web_1 = __importDefault(require("lottie-web"));
+const hooks_1 = require("../../hooks");
+const uuid_util_1 = require("../../utils/uuid.util");
+const IconWithImage_1 = require("../IconWithImage");
+const Styled = __importStar(require("./index.styled"));
+const Lottie = ({ width, height, viewBox, className, playOnce, autoplay = false, alterImgSrcOnLoad, lottieFileSrcPath: lottieFileName, }) => {
+    const [animationData, setAnimationData] = (0, react_1.useState)(null);
+    const rootElement = (0, react_1.useRef)(null);
+    const elementId = (0, react_1.useRef)((0, uuid_util_1.uuid)());
+    const isMobile = (0, hooks_1.useLayoutIsMobile)();
+    const { ref: wrapperRef, inView } = (0, react_intersection_observer_1.useInView)({
+        /**
+         * 모바일 : 로띠의 높이가 PC와 다르게 작기 때문에 스크롤시 로띠의 play 시작점을 자연스럽게 하기위해 0.4
+         * PC : 로띠의 play 시작점이 lottie 끝에 들어왔을때 play하기 위해 value 0.9
+         */
+        threshold: isMobile ? 0.4 : 0.9,
+        /**
+         * rootMargin을 주어서 lottie inview에 대한 범위를 추가하였습니다.
+         * 모바일, PC의 높이가 달라 다르게 선언하였습니다.
+         */
+        rootMargin: isMobile ? '20% 0% 0% 0%' : '40% 0% 10% 0%',
+    });
+    const viewBoxSize = (0, react_1.useMemo)(() => { var _a, _b; return (viewBox ? `${(_a = viewBox.x) !== null && _a !== void 0 ? _a : 0} ${(_b = viewBox.y) !== null && _b !== void 0 ? _b : 0} ${viewBox.width} ${viewBox.height}` : undefined); }, [viewBox]);
+    const [lottieInstance, setLottieInstance] = (0, react_1.useState)();
+    (0, react_1.useEffect)(() => {
+        fetch(lottieFileName)
+            .then((res) => res.json())
+            .then((data) => {
+            setAnimationData(data);
+        })
+            .catch(() => {
+            console.info('lottie load 에 실패했습니다.');
+        });
+    }, [lottieFileName]);
+    (0, react_1.useEffect)(() => {
+        if (!rootElement.current || !animationData) {
+            return;
+        }
+        const lottieInstance = lottie_web_1.default.loadAnimation({
+            container: rootElement.current,
+            renderer: 'svg',
+            loop: !Boolean(playOnce),
+            autoplay,
+            animationData,
+            rendererSettings: {
+                viewBoxSize,
+            },
+            name: className,
+        });
+        setLottieInstance(lottieInstance);
+        return () => lottieInstance.destroy();
+    }, [animationData, className, autoplay, playOnce, viewBoxSize]);
+    (0, react_1.useEffect)(() => {
+        if (inView) {
+            lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.goToAndPlay((lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.currentFrame) > 0.9 * (lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.totalFrames) ? 0 : lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.currentFrame, true);
+        }
+        else {
+            if (playOnce) {
+                lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.stop();
+            }
+            else {
+                lottieInstance === null || lottieInstance === void 0 ? void 0 : lottieInstance.pause();
+            }
+        }
+    }, [inView, lottieInstance, playOnce]);
+    if (animationData === null && alterImgSrcOnLoad) {
+        return (react_1.default.createElement(Styled.AlterImageWrapper, null,
+            react_1.default.createElement(IconWithImage_1.IconWithImage, { width: width || 0, srcPath: alterImgSrcOnLoad })));
+    }
+    return (react_1.default.createElement(Styled.Wrapper, { ref: wrapperRef },
+        react_1.default.createElement(Styled.Container, { id: elementId.current, className: className, ref: rootElement, width: width, height: height })));
+};
+exports.Lottie = Lottie;

package/dist/library/Lottie/index.styled.d.ts

@@ -3,15 +3,15 @@ export interface LottieContainerProps {
     height?: number;
     className?: string;
 }
-export declare const Wrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Wrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const Container: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Container: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-} & LottieContainerProps, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const AlterImageWrapper: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+} & LottieContainerProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const AlterImageWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/library/Lottie/index.styled.js

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AlterImageWrapper = exports.Container = exports.Wrapper = void 0;
+const react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.Wrapper = styled_1.default.div `
+	width: 100%;
+`;
+exports.Container = styled_1.default.div `
+	/* block 사용시 container div와 lottie svg 사이 미세한 여백이 발생하여 flex 사용*/
+	display: flex;
+
+	${(p) => p.width &&
+    (0, react_1.css) `
+			width: ${p.width}px;
+		`}
+	${(p) => p.height &&
+    (0, react_1.css) `
+			height: ${p.height}px;
+		`}
+`;
+// 대체 이미지
+exports.AlterImageWrapper = styled_1.default.div `
+	display: flex;
+	justify-content: center;
+	align-items: center;
+`;

package/dist/library/Spacing/index.d.ts

@@ -1,4 +1,4 @@
-import { default as React } from 'react';
+import React from 'react';
 interface SpacingProps {
     spaceNumber: number;
 }

package/dist/library/Spacing/index.js

@@ -0,0 +1,45 @@
+"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 () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __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.Spacing = void 0;
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const Spacing = ({ spaceNumber }) => {
+    return react_1.default.createElement(Styled.Spacing, { spaceNumber: spaceNumber });
+};
+exports.Spacing = Spacing;

package/dist/library/Spacing/index.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { SpacingProps } from '.';
+type Story = StoryObj<SpacingProps>;
+declare const meta: Meta<SpacingProps>;
+export default meta;
+export declare const Story1: Story;

package/dist/library/Spacing/index.stories.js

@@ -0,0 +1,22 @@
+"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 _1 = require(".");
+const components_1 = require("../../components");
+const meta = {
+    title: 'Library/Spacing',
+    component: _1.Spacing,
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.Story1 = {
+    render: (props) => (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(components_1.Tag, { type: "fill", colorType: "pink" }, "Pink"),
+        react_1.default.createElement(_1.Spacing, Object.assign({}, props)),
+        react_1.default.createElement(components_1.Tag, { type: "fill", colorType: "blue" }, "Pink"))),
+};
+exports.Story1.storyName = '예제';

package/dist/library/Spacing/index.styled.d.ts

@@ -1,6 +1,6 @@
-export declare const Spacing: import('@emotion/styled').StyledComponent<{
-    theme?: import('@emotion/react').Theme;
+export declare const Spacing: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
     as?: React.ElementType;
 } & {
     spaceNumber: number;
-}, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/library/Spacing/index.styled.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+exports.Spacing = styled_1.default.div `
+	height: ${(el) => el.spaceNumber}px;
+`;

package/dist/library/index.js

@@ -0,0 +1,20 @@
+"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("./IconWithImage"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./Lottie"), exports);
+__exportStar(require("./Spacing"), exports);

package/dist/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/setupTests.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("@testing-library/jest-dom");

package/dist/storybook/extend-color-type.stories.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { ColorType } from '..';
+type Props = {
+    colorType: ColorType;
+};
+type Story = StoryObj<Props>;
+declare const meta: Meta<Props>;
+export default meta;
+export declare const TextTabComponent: (props: Props) => React.JSX.Element;
+export declare const FillTabComponent: (props: Props) => React.JSX.Element;
+export declare const BasicChipsComponent: (props: Props) => React.JSX.Element;
+export declare const Story1: Story;