@pfct/purple 1.3.4-npm-test.1

package/dist/components/Badge/BaseBadge/index.js

@@ -0,0 +1,42 @@
+"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 });
+const react_1 = __importDefault(require("react"));
+const Styled = __importStar(require("../BaseBadge/index.styled"));
+const BaseBadge = (props) => {
+    const { type, testId } = props;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        type === 'dot' && react_1.default.createElement(Styled.Dot, { "data-testid": testId }),
+        type === 'new-short' && (react_1.default.createElement(Styled.Badge, { "data-testid": testId },
+            react_1.default.createElement(Styled.BadgeContent, null, "N"))),
+        type === 'new-long' && (react_1.default.createElement(Styled.Badge, { "data-testid": testId },
+            react_1.default.createElement(Styled.BadgeContent, null, "NEW"))),
+        type === 'number' && (react_1.default.createElement(react_1.default.Fragment, null, props.value && (react_1.default.createElement(Styled.Badge, { "data-testid": testId },
+            react_1.default.createElement(Styled.BadgeContent, null, props.value > 9 ? '9+' : props.value)))))));
+};
+exports.default = BaseBadge;

package/dist/components/Badge/BaseBadge/index.spec.d.ts

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

package/dist/components/Badge/BaseBadge/index.spec.js

@@ -0,0 +1,35 @@
+"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 index_1 = __importDefault(require("./index"));
+describe('Badge Components', () => {
+    const testId = 'notification-component-test-id';
+    test('Dot type의 컴포넌트가 디자인 의도에 맞게 잘 그려집니다', () => {
+        (0, react_2.render)(react_1.default.createElement(index_1.default, { type: "dot", testId: testId }));
+        expect(react_2.screen.getByTestId(testId)).toHaveStyle({
+            width: '5px',
+            height: '5px',
+            borderRadius: '50%',
+        });
+    });
+    test('New type의 컴포넌트가 디자인 의도에 맞게 잘 그려집니다', () => {
+        (0, react_2.render)(react_1.default.createElement(index_1.default, { type: "new-short" }));
+        expect(react_2.screen.getByText(`N`)).toBeInTheDocument();
+    });
+    test('Number type의 컴포넌트가 잘 그려집니다- number 값이 1보다 작으면 그려지지 않음', () => {
+        (0, react_2.render)(react_1.default.createElement(index_1.default, { type: "dot", testId: testId }));
+        expect(react_2.screen.queryByTestId(testId)).toBeEmptyDOMElement();
+    });
+    test('Number type의 컴포넌트가 잘 그려집니다- number 값이 1이상이면 숫자 나타남', () => {
+        (0, react_2.render)(react_1.default.createElement(index_1.default, { type: "number", value: 1 }));
+        expect(react_2.screen.getByText(`1`)).toBeInTheDocument();
+    });
+    test('Number type의 컴포넌트가 잘 그려집니다- umber 값이 10이상이면 9+로 표시됨', () => {
+        (0, react_2.render)(react_1.default.createElement(index_1.default, { type: "number", value: 10 }));
+        expect(react_2.screen.getByText(`9+`)).toBeInTheDocument();
+    });
+});

package/dist/components/Badge/BaseBadge/index.styled.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare const Dot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Badge: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const BadgeContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Badge/BaseBadge/index.styled.js

@@ -0,0 +1,40 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BadgeContent = exports.Badge = exports.Dot = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+const core_1 = require("../../../core");
+const NoticationBgColor = core_1.basicColors.red400;
+const ContentHeight = '16px';
+const CommonStyle = (0, react_1.css) `
+	background-color: ${NoticationBgColor};
+`;
+exports.Dot = styled_1.default.div `
+	${CommonStyle};
+
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+`;
+exports.Badge = styled_1.default.div `
+	${CommonStyle};
+
+	height: ${ContentHeight};
+	padding: 0 5px;
+	border-radius: 8px;
+
+	display: flex;
+	align-items: center;
+	justify-content: center;
+`;
+exports.BadgeContent = styled_1.default.div `
+	line-height: initial;
+
+	font-size: 11px;
+	font-weight: 500;
+	color: ${core_1.basicColors.white};
+	letter-spacing: -0.2px;
+`;

package/dist/components/Badge/IconBadge/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseBadgeProps } from '../BaseBadge';
+type IconBadgeProps = {
+    children: React.ReactNode;
+    badge: BaseBadgeProps;
+};
+declare const IconBadge: React.FC<IconBadgeProps>;
+export type { IconBadgeProps };
+export { IconBadge };

package/dist/components/Badge/IconBadge/index.js

@@ -0,0 +1,39 @@
+"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.IconBadge = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseBadge_1 = __importDefault(require("../BaseBadge"));
+const Styled = __importStar(require("./index.styled"));
+const IconBadge = ({ children, badge }) => {
+    return (react_1.default.createElement(Styled.IconBadgeWrapper, { type: badge.type },
+        children,
+        react_1.default.createElement(Styled.AbsoluteWrapper, { className: Styled.className.absoluteWrapper },
+            react_1.default.createElement(BaseBadge_1.default, Object.assign({}, badge)))));
+};
+exports.IconBadge = IconBadge;

package/dist/components/Badge/IconBadge/index.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IconBadgeProps } from '.';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Badge-4371e89366d34f3dbda27d9dfc42b345?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 새로운 업데이트 및 알림에 대한 정보를 제공할 때 사용합니다.
+ * 뱃지는 필요한 모든 곳에 배치할 수 있으며 주로 텍스트, 아이콘의 오른쪽 옆 또는 상단에 배치합니다.
+ *
+ */
+declare const meta: Meta<IconBadgeProps>;
+export default meta;
+export declare const IconBadge2: StoryObj<IconBadgeProps>;
+export declare const IconBadge1: StoryObj<IconBadgeProps>;
+export declare const IconBadgeNewLong: StoryObj<IconBadgeProps>;
+export declare const IconBadge3: StoryObj<IconBadgeProps>;
+export declare const IconBadge4: StoryObj<IconBadgeProps>;

package/dist/components/Badge/IconBadge/index.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconBadge4 = exports.IconBadge3 = exports.IconBadgeNewLong = exports.IconBadge1 = exports.IconBadge2 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const Icon_1 = require("../../../Icon");
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Badge-4371e89366d34f3dbda27d9dfc42b345?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 새로운 업데이트 및 알림에 대한 정보를 제공할 때 사용합니다.
+ * 뱃지는 필요한 모든 곳에 배치할 수 있으며 주로 텍스트, 아이콘의 오른쪽 옆 또는 상단에 배치합니다.
+ *
+ */
+const meta = {
+    title: 'Component/Badge/IconBadge',
+    tags: ['autodocs'],
+};
+exports.default = meta;
+const CommonIcon = Icon_1.AlarmFillIcon;
+exports.IconBadge2 = {
+    render: (props) => (react_1.default.createElement(_1.IconBadge, Object.assign({}, props, { badge: { type: 'dot' } }),
+        react_1.default.createElement(CommonIcon, null))),
+};
+exports.IconBadge2.storyName = 'Icon + Dot Badge';
+exports.IconBadge1 = {
+    render: (props) => (react_1.default.createElement(_1.IconBadge, Object.assign({}, props, { badge: { type: 'new-short' } }),
+        react_1.default.createElement(CommonIcon, null))),
+};
+exports.IconBadge1.storyName = 'Icon + New(Short) Badge';
+exports.IconBadgeNewLong = {
+    render: (props) => (react_1.default.createElement(_1.IconBadge, Object.assign({}, props, { badge: { type: 'new-long' } }),
+        react_1.default.createElement(CommonIcon, null))),
+};
+exports.IconBadgeNewLong.storyName = 'Icon + New(Long) Badge';
+exports.IconBadge3 = {
+    render: (props) => (react_1.default.createElement(_1.IconBadge, Object.assign({}, props, { badge: { type: 'number', value: 8 } }),
+        react_1.default.createElement(CommonIcon, null))),
+};
+exports.IconBadge3.storyName = 'Icon + Number Badge (9 이하)';
+exports.IconBadge4 = {
+    render: (props) => (react_1.default.createElement(_1.IconBadge, Object.assign({}, props, { badge: { type: 'number', value: 10 } }),
+        react_1.default.createElement(CommonIcon, null))),
+};
+exports.IconBadge4.storyName = 'Icon + Number Badge (9 초과)';

package/dist/components/Badge/IconBadge/index.styled.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { BadgeTypes } from '../BaseBadge';
+export declare const className: {
+    absoluteWrapper: string;
+};
+export declare const AbsoluteWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconBadgeWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    type: BadgeTypes;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Badge/IconBadge/index.styled.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconBadgeWrapper = exports.AbsoluteWrapper = exports.className = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+exports.className = {
+    absoluteWrapper: 'absolute-wrapper',
+};
+exports.AbsoluteWrapper = styled_1.default.div `
+	position: absolute;
+`;
+const IconSize = 25; // TODO: constant 로 import 하기
+exports.IconBadgeWrapper = styled_1.default.div `
+	position: relative;
+	width: ${IconSize}px;
+	height: ${IconSize}px;
+
+	${({ type }) => {
+    switch (type) {
+        case 'dot':
+            return (0, react_1.css) `
+					.${exports.className.absoluteWrapper} {
+						left: 20px;
+						bottom: 21px;
+					}
+				`;
+        case 'new-short':
+        case 'new-long':
+        case 'number':
+            return (0, react_1.css) `
+					.${exports.className.absoluteWrapper} {
+						left: 13px;
+						bottom: 13px;
+					}
+				`;
+    }
+}}
+`;

package/dist/components/Badge/TextBadge/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BaseBadgeProps } from '../BaseBadge';
+type TextBadgeProps = {
+    children: React.ReactNode;
+    badge: BaseBadgeProps;
+};
+declare const TextBadge: React.FC<TextBadgeProps>;
+export type { TextBadgeProps };
+export { TextBadge };

package/dist/components/Badge/TextBadge/index.js

@@ -0,0 +1,38 @@
+"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.TextBadge = void 0;
+const react_1 = __importDefault(require("react"));
+const BaseBadge_1 = __importDefault(require("../BaseBadge"));
+const Styled = __importStar(require("./index.styled"));
+const TextBadge = ({ children, badge }) => {
+    return (react_1.default.createElement(Styled.TextBadgeWrapper, { type: badge.type },
+        children,
+        react_1.default.createElement(BaseBadge_1.default, Object.assign({}, badge))));
+};
+exports.TextBadge = TextBadge;

package/dist/components/Badge/TextBadge/index.stories.d.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextBadgeProps } from '.';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Badge-4371e89366d34f3dbda27d9dfc42b345?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 새로운 업데이트 및 알림에 대한 정보를 제공할 때 사용합니다.
+ * 뱃지는 필요한 모든 곳에 배치할 수 있으며 주로 텍스트, 아이콘의 오른쪽 옆 또는 상단에 배치합니다.
+ *
+ */
+declare const meta: Meta<TextBadgeProps>;
+export default meta;
+export declare const TextBadge2: StoryObj<TextBadgeProps>;
+export declare const TextBadge1: StoryObj<TextBadgeProps>;
+export declare const TextBadgeNewLong: StoryObj<TextBadgeProps>;
+export declare const TextBadge3: StoryObj<TextBadgeProps>;
+export declare const TextBadge4: StoryObj<TextBadgeProps>;

package/dist/components/Badge/TextBadge/index.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextBadge4 = exports.TextBadge3 = exports.TextBadgeNewLong = exports.TextBadge1 = exports.TextBadge2 = void 0;
+const react_1 = __importDefault(require("react"));
+const _1 = require(".");
+const core_1 = require("../../../core");
+const TEST_TEXT = '안녕하세요';
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Badge-4371e89366d34f3dbda27d9dfc42b345?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 새로운 업데이트 및 알림에 대한 정보를 제공할 때 사용합니다.
+ * 뱃지는 필요한 모든 곳에 배치할 수 있으며 주로 텍스트, 아이콘의 오른쪽 옆 또는 상단에 배치합니다.
+ *
+ */
+const meta = {
+    title: 'Component/Badge/TextBadge',
+    tags: ['autodocs'],
+};
+exports.default = meta;
+exports.TextBadge2 = {
+    render: (props) => (react_1.default.createElement(_1.TextBadge, Object.assign({}, props, { badge: { type: 'dot' } }),
+        react_1.default.createElement(core_1.Title2, null, TEST_TEXT))),
+};
+exports.TextBadge2.storyName = 'Text + Dot Badge';
+exports.TextBadge1 = {
+    render: (props) => (react_1.default.createElement(_1.TextBadge, Object.assign({}, props, { badge: { type: 'new-short' } }),
+        react_1.default.createElement(core_1.Title2, null, TEST_TEXT))),
+};
+exports.TextBadge1.storyName = 'Text + New(Short) Badge';
+exports.TextBadgeNewLong = {
+    render: (props) => (react_1.default.createElement(_1.TextBadge, Object.assign({}, props, { badge: { type: 'new-long' } }),
+        react_1.default.createElement(core_1.Title2, null, TEST_TEXT))),
+};
+exports.TextBadge1.storyName = 'Text + New(Long) Badge';
+exports.TextBadge3 = {
+    render: (props) => (react_1.default.createElement(_1.TextBadge, Object.assign({}, props, { badge: { type: 'number', value: 8 } }),
+        react_1.default.createElement(core_1.Title2, null, TEST_TEXT))),
+};
+exports.TextBadge3.storyName = 'Text + Number Badge (9 이하)';
+exports.TextBadge4 = {
+    render: (props) => (react_1.default.createElement(_1.TextBadge, Object.assign({}, props, { badge: { type: 'number', value: 10 } }),
+        react_1.default.createElement(core_1.Title2, null, TEST_TEXT))),
+};
+exports.TextBadge4.storyName = 'Text + Number Badge (9 초과)';

package/dist/components/Badge/TextBadge/index.styled.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { BadgeTypes } from '../BaseBadge';
+export declare const TextBadgeWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    type: BadgeTypes;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/components/Badge/TextBadge/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.TextBadgeWrapper = void 0;
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_1 = require("@emotion/react");
+exports.TextBadgeWrapper = styled_1.default.div `
+	display: flex;
+
+	${({ type }) => {
+    switch (type) {
+        case 'dot':
+            return (0, react_1.css) `
+					gap: 1px;
+					align-items: start;
+				`;
+        case 'new-short':
+        case 'new-long':
+        case 'number':
+            return (0, react_1.css) `
+					gap: 3px;
+					align-items: center;
+				`;
+    }
+}}
+`;

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,4 @@
+import { IconBadge, IconBadgeProps } from './IconBadge';
+import { TextBadge, TextBadgeProps } from './TextBadge';
+export type { IconBadgeProps, TextBadgeProps };
+export { IconBadge, TextBadge };

package/dist/components/Badge/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextBadge = exports.IconBadge = void 0;
+const IconBadge_1 = require("./IconBadge");
+Object.defineProperty(exports, "IconBadge", { enumerable: true, get: function () { return IconBadge_1.IconBadge; } });
+const TextBadge_1 = require("./TextBadge");
+Object.defineProperty(exports, "TextBadge", { enumerable: true, get: function () { return TextBadge_1.TextBadge; } });

package/dist/components/BottomSheet/BaseBottomSheet/index.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import * as Styled from './index.styled';
+import { ChildrenStyleProps } from './index.styled';
+import { SingleButtonProps } from '../../Button/SingleButton';
+import { DoubleButtonProps } from '../../Button/DoubleButton';
+import { OverlayRootProps } from '../../OverlayRoot';
+import { ReactFCWithChildren } from '../../../types/react';
+declare const BaseBottomSheetCTASingleButton: React.FC<SingleButtonProps>;
+declare const BaseBottomSheetCTADoubleButton: React.FC<DoubleButtonProps>;
+declare const BaseBottomSheetBody: ReactFCWithChildren<ChildrenStyleProps>;
+declare const BaseBottomSheetHeader: ReactFCWithChildren;
+type BaseBottomSheetProps = Omit<OverlayRootProps, 'onClick'> & {
+    onMaskClick?: () => void;
+    hideOverflow?: boolean;
+    minHeight?: Styled.BottomSheetPropsHeight;
+    header?: React.ReactNode;
+};
+declare const BaseBottomSheetComp: ReactFCWithChildren<BaseBottomSheetProps>;
+declare const BaseBottomSheet: ReactFCWithChildren<BaseBottomSheetProps> & {
+    SingleButton: React.FC<import("../../Button/BaseButton").BaseButtonProps>;
+    DoubleButton: React.FC<DoubleButtonProps>;
+    Body: ReactFCWithChildren<Styled.ChildrenStyleProps>;
+    Header: ReactFCWithChildren<unknown>;
+};
+export type { BaseBottomSheetProps };
+export { BaseBottomSheet, BaseBottomSheetComp, BaseBottomSheetHeader, BaseBottomSheetBody, BaseBottomSheetCTASingleButton, BaseBottomSheetCTADoubleButton, };

package/dist/components/BottomSheet/BaseBottomSheet/index.js

@@ -0,0 +1,87 @@
+"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 __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseBottomSheetCTADoubleButton = exports.BaseBottomSheetCTASingleButton = exports.BaseBottomSheetBody = exports.BaseBottomSheetHeader = exports.BaseBottomSheetComp = exports.BaseBottomSheet = void 0;
+const hooks_1 = require("../../../hooks");
+const react_1 = __importStar(require("react"));
+const Styled = __importStar(require("./index.styled"));
+const SingleButton_1 = require("../../Button/SingleButton");
+const DoubleButton_1 = require("../../Button/DoubleButton");
+const style_constants_1 = require("../../../constants/style.constants");
+const OverlayRoot_1 = require("../../OverlayRoot");
+const BaseBottomSheetCTASingleButton = (props) => (react_1.default.createElement(Styled.FooterWrapper, null,
+    react_1.default.createElement(SingleButton_1.SingleButton, Object.assign({}, props))));
+exports.BaseBottomSheetCTASingleButton = BaseBottomSheetCTASingleButton;
+const BaseBottomSheetCTADoubleButton = (props) => (react_1.default.createElement(Styled.FooterWrapper, null,
+    react_1.default.createElement(DoubleButton_1.DoubleButton, Object.assign({}, props))));
+exports.BaseBottomSheetCTADoubleButton = BaseBottomSheetCTADoubleButton;
+const BaseBottomSheetBody = (_a) => {
+    var { children } = _a, styleProps = __rest(_a, ["children"]);
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scroll(0, 0);
+    }, []);
+    return (react_1.default.createElement(Styled.ChildrenWrapper, Object.assign({ ref: ref }, styleProps), children));
+};
+exports.BaseBottomSheetBody = BaseBottomSheetBody;
+const BaseBottomSheetHeader = ({ children }) => (react_1.default.createElement(Styled.HeaderWrapper, null, children));
+exports.BaseBottomSheetHeader = BaseBottomSheetHeader;
+const BaseBottomSheetComp = ({ visible, onMaskClick, className, zIndex = style_constants_1.zIndex.modal, minHeight, children, }) => {
+    const [vh, setVh] = (0, react_1.useState)(0);
+    const checkVh = (0, react_1.useCallback)(() => {
+        setVh(window === null || window === void 0 ? void 0 : window.innerHeight);
+    }, []);
+    (0, react_1.useEffect)(() => {
+        checkVh();
+    }, [checkVh]);
+    (0, hooks_1.useResize)(checkVh);
+    (0, hooks_1.useOverlayPreventScroll)(visible);
+    if (!visible) {
+        return null;
+    }
+    return (react_1.default.createElement(OverlayRoot_1.OverlayRoot, { visible: visible, className: className, onClick: onMaskClick, zIndex: zIndex },
+        react_1.default.createElement(Styled.ContentWrapper, null,
+            react_1.default.createElement(Styled.Content, { visible: visible, zIndex: zIndex, minHeight: minHeight, vh: vh }, children))));
+};
+exports.BaseBottomSheetComp = BaseBottomSheetComp;
+const BaseBottomSheet = Object.assign(BaseBottomSheetComp, {
+    SingleButton: BaseBottomSheetCTASingleButton,
+    DoubleButton: BaseBottomSheetCTADoubleButton,
+    Body: BaseBottomSheetBody,
+    Header: BaseBottomSheetHeader,
+});
+exports.BaseBottomSheet = BaseBottomSheet;

package/dist/components/BottomSheet/BaseBottomSheet/index.styled.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+export type BottomSheetPropsHeight = 's' | 'm' | 'l' | 'full';
+export declare const ContentWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Content: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & {
+    visible: boolean;
+    zIndex: number;
+    vh: number;
+    minHeight?: BottomSheetPropsHeight | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const ContentWrapperPadding = 25;
+export declare const HeaderWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export type ChildrenStyleProps = {
+    readonly hasBottomPadding?: boolean;
+    readonly hasContentPadding?: boolean;
+    readonly hasFullHeight?: boolean;
+    readonly hideOverflow?: boolean;
+};
+export declare const ChildrenWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & ChildrenStyleProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const FooterWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;