pds-dev-kit-web 2.2.246 → 2.2.249

package/dist/src/common/types/systemUI.d.ts

@@ -1,6 +1,7 @@
 export type SystemUIPositionType = 'top' | 'bottom' | 'start_top' | 'start_bottom' | 'end_top' | 'end_bottom' | 'left_top' | 'left_bottom' | 'center_top' | 'center_bottom' | 'right_top' | 'right_bottom';
 export type IconCaseTooltipPositionType = Exclude<SystemUIPositionType, 'start_top' | 'start_bottom' | 'end_top' | 'end_bottom'>;
 export type TextCaseTooltipPositionType = Exclude<IconCaseTooltipPositionType, 'center_top' | 'center_bottom'>;
+export type BubblePositionType = 'start_top' | 'start_bottom' | 'center_top' | 'center_bottom' | 'end_top' | 'end_bottom';
 export type SystemUIPositionOffsetType = {
     top: number;
     right: number;

package/dist/src/desktop/components/Calendar/index.d.ts

@@ -1,9 +1,5 @@
 export * from './types/types';
 export * from './context/CalendarContext';
 export { default as Calendar } from './Calendar';
-export * from './views/DailyView';
-export * from './views/WeeklyView';
-export * from './views/MonthlyView';
-export * from './views/YearlyView';
 export { default as CurrentTimeIndicator } from './components/CurrentTimeIndicator';
 export * from './components/Schedule';

package/dist/src/desktop/components/Calendar/index.js

@@ -22,10 +22,6 @@ __exportStar(require("./types/types"), exports);
 __exportStar(require("./context/CalendarContext"), exports);
 var Calendar_1 = require("./Calendar"); // 필요 시
 Object.defineProperty(exports, "Calendar", { enumerable: true, get: function () { return __importDefault(Calendar_1).default; } });
-__exportStar(require("./views/DailyView"), exports);
-__exportStar(require("./views/WeeklyView"), exports);
-__exportStar(require("./views/MonthlyView"), exports);
-__exportStar(require("./views/YearlyView"), exports);
 var CurrentTimeIndicator_1 = require("./components/CurrentTimeIndicator");
 Object.defineProperty(exports, "CurrentTimeIndicator", { enumerable: true, get: function () { return __importDefault(CurrentTimeIndicator_1).default; } });
 __exportStar(require("./components/Schedule"), exports);

package/dist/src/hybrid/components/ContextBubble/ContextBubble.d.ts

@@ -0,0 +1,37 @@
+import type { UiColors } from '../../../common/types';
+import type { BubblePositionType } from '../../../common/types/systemUI';
+import type { ReactNode } from 'react';
+declare const paddingSpacing: {
+    readonly spacing_a: "spacingA";
+    readonly spacing_b: "spacingB";
+    readonly spacing_c: "spacingC";
+    readonly spacing_d: "spacingD";
+    readonly spacing_e: "spacingE";
+    readonly spacing_f: "spacingF";
+    readonly spacing_g: "spacingG";
+    readonly spacing_h: "spacingH";
+    readonly spacing_i: "spacingI";
+    readonly spacing_j: "spacingJ";
+    readonly spacing_k: "spacingK";
+    readonly spacing_l: "spacingL";
+    readonly spacing_m: "spacingM";
+    readonly spacing_n: "spacingN";
+};
+type PaddingSpacingType = 'none' | keyof typeof paddingSpacing;
+type ContextBubbleSheetProps = {
+    bubbleAlign: 'right' | 'middle' | 'left';
+    backgroundColorKey?: UiColors;
+    pointingPosition: BubblePositionType;
+    customPointingPosition?: number;
+    shapeType?: 'rectangle' | 'round';
+    radius?: '8' | '12' | '16';
+    borderMode?: 'none' | 'use';
+    borderColorKey?: UiColors;
+    paddingTop?: PaddingSpacingType;
+    paddingRight?: PaddingSpacingType;
+    paddingBottom?: PaddingSpacingType;
+    paddingLeft?: PaddingSpacingType;
+    children: ReactNode;
+};
+declare const ContextBubble: ({ bubbleAlign, backgroundColorKey, pointingPosition, customPointingPosition, shapeType, radius, borderMode, borderColorKey, paddingTop, paddingRight, paddingBottom, paddingLeft, children }: ContextBubbleSheetProps) => JSX.Element;
+export default ContextBubble;

package/dist/src/hybrid/components/ContextBubble/ContextBubble.js

@@ -0,0 +1,145 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importStar(require("styled-components"));
+var paddingSpacing = {
+    spacing_a: 'spacingA',
+    spacing_b: 'spacingB',
+    spacing_c: 'spacingC',
+    spacing_d: 'spacingD',
+    spacing_e: 'spacingE',
+    spacing_f: 'spacingF',
+    spacing_g: 'spacingG',
+    spacing_h: 'spacingH',
+    spacing_i: 'spacingI',
+    spacing_j: 'spacingJ',
+    spacing_k: 'spacingK',
+    spacing_l: 'spacingL',
+    spacing_m: 'spacingM',
+    spacing_n: 'spacingN'
+};
+var ContextBubble = function (_a) {
+    var _b = _a.bubbleAlign, bubbleAlign = _b === void 0 ? 'left' : _b, _c = _a.backgroundColorKey, backgroundColorKey = _c === void 0 ? 'ui_temp_red' : _c, _d = _a.pointingPosition, pointingPosition = _d === void 0 ? 'start_bottom' : _d, customPointingPosition = _a.customPointingPosition, _e = _a.shapeType, shapeType = _e === void 0 ? 'round' : _e, _f = _a.radius, radius = _f === void 0 ? '8' : _f, _g = _a.borderMode, borderMode = _g === void 0 ? 'none' : _g, _h = _a.borderColorKey, borderColorKey = _h === void 0 ? 'ui_cpnt_contextmenu_border' : _h, _j = _a.paddingTop, paddingTop = _j === void 0 ? 'spacing_a' : _j, _k = _a.paddingRight, paddingRight = _k === void 0 ? 'spacing_c' : _k, _l = _a.paddingBottom, paddingBottom = _l === void 0 ? 'spacing_a' : _l, _m = _a.paddingLeft, paddingLeft = _m === void 0 ? 'spacing_c' : _m, children = _a.children;
+    var theme = (0, styled_components_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(S_ContextBubbleArea, __assign({ "$bubbleAlign": bubbleAlign, "$position": pointingPosition }, { children: (0, jsx_runtime_1.jsxs)(S_ContextBubbleWrapper, __assign({ "$bgColor": backgroundColorKey, "$position": pointingPosition, "$customPointingPosition": customPointingPosition, useBorder: borderMode, borderColor: borderColorKey, shapeType: shapeType, radius: radius, paddingTop: paddingTop, paddingRight: paddingRight, paddingBottom: paddingBottom, paddingLeft: paddingLeft }, { children: [children, (0, jsx_runtime_1.jsxs)(Arrow, __assign({ "$position": pointingPosition, "$customPointingPosition": customPointingPosition, viewBox: "0 0 18 10", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("polygon", { points: "9,10 3,0 15,0", fill: theme[backgroundColorKey] }), (0, jsx_runtime_1.jsx)("path", { d: "M3,1 L9,10", stroke: borderMode === 'use' ? theme[borderColorKey] : 'none', strokeWidth: "1", strokeLinecap: "butt" }), (0, jsx_runtime_1.jsx)("path", { d: "M15,1 L9,10", stroke: borderMode === 'use' ? theme[borderColorKey] : 'none', strokeWidth: "1", strokeLinecap: "butt" }), borderMode === 'use' && (0, jsx_runtime_1.jsx)("path", { d: "M0,0 L15,0", strokeWidth: "1" })] }))] })) })));
+};
+exports.default = ContextBubble;
+var S_ContextBubbleArea = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  ", "\n  ", "\n"], ["\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  ", "\n  ", "\n"])), function (_a) {
+    var $position = _a.$position, theme = _a.theme;
+    var isTop = $position.includes('top');
+    return !isTop
+        ? "margin-bottom: ".concat(theme.spacing.spacingB, ";")
+        : "margin-top: ".concat(theme.spacing.spacingB, ";");
+}, function (_a) {
+    var $bubbleAlign = _a.$bubbleAlign;
+    if ($bubbleAlign === 'left') {
+        return "align-items: flex-start;";
+    }
+    if ($bubbleAlign === 'middle') {
+        return "align-items: center;";
+    }
+    if ($bubbleAlign === 'right') {
+        return "align-items: flex-end;";
+    }
+    return "align-items: flex-start;";
+});
+var paddingTopStyle = (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  padding-top: ", ";\n"], ["\n  padding-top: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingTop = _a.paddingTop;
+    return paddingTop && (paddingTop === 'none' ? 0 : theme.spacing[paddingSpacing[paddingTop]]);
+});
+var paddingRightStyle = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding-right: ", ";\n"], ["\n  padding-right: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingRight = _a.paddingRight;
+    return paddingRight && (paddingRight === 'none' ? 0 : theme.spacing[paddingSpacing[paddingRight]]);
+});
+var paddingBottomStyle = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  padding-bottom: ", ";\n"], ["\n  padding-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingBottom = _a.paddingBottom;
+    return paddingBottom && (paddingBottom === 'none' ? 0 : theme.spacing[paddingSpacing[paddingBottom]]);
+});
+var paddingLeftStyle = (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding-left: ", ";\n"], ["\n  padding-left: ", ";\n"])), function (_a) {
+    var theme = _a.theme, paddingLeft = _a.paddingLeft;
+    return paddingLeft && (paddingLeft === 'none' ? 0 : theme.spacing[paddingSpacing[paddingLeft]]);
+});
+var S_ContextBubbleWrapper = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  position: relative;\n  width: 'fit-content';\n"], ["\n  align-items: center;\n  background-color: ", ";\n  border: ", ";\n  border-radius: ", ";\n\n  display: flex;\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  position: relative;\n  width: 'fit-content';\n"])), function (_a) {
+    var $bgColor = _a.$bgColor, theme = _a.theme;
+    return theme[$bgColor];
+}, function (_a) {
+    var useBorder = _a.useBorder, _b = _a.borderColor, borderColor = _b === void 0 ? 'ui_cpnt_contextmenu_border' : _b, theme = _a.theme;
+    return useBorder === 'use' && "1px solid ".concat(theme[borderColor]);
+}, function (_a) {
+    var shapeType = _a.shapeType, _b = _a.radius, radius = _b === void 0 ? 8 : _b;
+    return shapeType === 'round' && "".concat(radius, "px");
+}, function (_a) {
+    var paddingTop = _a.paddingTop;
+    return paddingTop !== 'none' && paddingTopStyle;
+}, function (_a) {
+    var paddingRight = _a.paddingRight;
+    return paddingRight !== 'none' && paddingRightStyle;
+}, function (_a) {
+    var paddingBottom = _a.paddingBottom;
+    return paddingBottom !== 'none' && paddingBottomStyle;
+}, function (_a) {
+    var paddingLeft = _a.paddingLeft;
+    return paddingLeft !== 'none' && paddingLeftStyle;
+});
+var Arrow = styled_components_1.default.svg(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"], ["\n  height: 12.6px;\n  position: absolute;\n  width: 15px;\n\n  ", "\n\n  ", "\n"])), function (_a) {
+    var $position = _a.$position;
+    var isTop = $position.includes('top');
+    if (isTop) {
+        return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "], ["\n        top: -10px;\n        transform: translateX(-50%) rotate(180deg);\n      "])));
+    }
+    return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "], ["\n      bottom: -10px;\n      transform: translateX(-50%);\n    "])));
+}, function (_a) {
+    var $position = _a.$position, $customPointingPosition = _a.$customPointingPosition;
+    if ($customPointingPosition && $position.includes('start')) {
+        return "left: ".concat($customPointingPosition, "px;");
+    }
+    if ($customPointingPosition && $position.includes('end')) {
+        return "right: ".concat($customPointingPosition, "px;");
+    }
+    if ($position.includes('center')) {
+        return "left: 50%;";
+    }
+    if ($position.includes('end')) {
+        return "right: 12px;";
+    }
+    return "left: 19.5px;";
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;

package/dist/src/hybrid/components/ContextBubble/index.d.ts

@@ -0,0 +1 @@
+export { default as ContextBubble } from './ContextBubble';

package/dist/src/hybrid/components/ContextBubble/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContextBubble = void 0;
+var ContextBubble_1 = require("./ContextBubble");
+Object.defineProperty(exports, "ContextBubble", { enumerable: true, get: function () { return __importDefault(ContextBubble_1).default; } });

package/dist/src/hybrid/components/index.d.ts

@@ -1,3 +1,4 @@
+import { ContextBubble } from './ContextBubble';
 import { Divider } from './Divider';
 import { Icon } from './Icon';
 import { ImageView } from './ImageView';
@@ -5,4 +6,4 @@ import { LinearProgress } from './LinearProgress';
 import { LottieIcon } from './LottieIcon';
 import { Spacing } from './Spacing';
 import { Switch } from './Switch';
-export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch };
+export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch, ContextBubble };

package/dist/src/hybrid/components/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
+exports.ContextBubble = exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
+var ContextBubble_1 = require("./ContextBubble");
+Object.defineProperty(exports, "ContextBubble", { enumerable: true, get: function () { return ContextBubble_1.ContextBubble; } });
 var Divider_1 = require("./Divider");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
 var Icon_1 = require("./Icon");

package/dist/src/hybrid/index.d.ts

@@ -1 +1 @@
-export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch } from './components';
+export { Divider, Icon, ImageView, LinearProgress, LottieIcon, Spacing, Switch, ContextBubble } from './components';

package/dist/src/hybrid/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
+exports.ContextBubble = exports.Switch = exports.Spacing = exports.LottieIcon = exports.LinearProgress = exports.ImageView = exports.Icon = exports.Divider = void 0;
 // component
 var components_1 = require("./components");
 Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return components_1.Divider; } });
@@ -10,3 +10,4 @@ Object.defineProperty(exports, "LinearProgress", { enumerable: true, get: functi
 Object.defineProperty(exports, "LottieIcon", { enumerable: true, get: function () { return components_1.LottieIcon; } });
 Object.defineProperty(exports, "Spacing", { enumerable: true, get: function () { return components_1.Spacing; } });
 Object.defineProperty(exports, "Switch", { enumerable: true, get: function () { return components_1.Switch; } });
+Object.defineProperty(exports, "ContextBubble", { enumerable: true, get: function () { return components_1.ContextBubble; } });

package/dist/src/sub/DynamicLayout/components/desktop/Item/Item.d.ts

@@ -16,7 +16,7 @@ declare namespace Item {
         data?: string | undefined;
         styleTheme?: "displayBold" | "headingBold" | "leadParaBold" | "leadParaRegular" | "subTitleBold" | "subTitleRegular" | "body1Bold" | "body1Regular" | "body2Bold" | "body2Regular" | "caption1Bold" | "caption1Regular" | "caption2Bold" | "caption2Regular" | "form1Regular" | "form2Regular" | "blog1Regular" | undefined;
         color?: string | undefined;
-        textAlign?: "left" | "center" | "right" | undefined;
+        textAlign?: "left" | "right" | "center" | undefined;
         colorTheme?: "sysTextPrimary" | "sysTextSecondary" | "sysTextTertiary" | "sysTextWhite" | "sysTextError" | "sysTextWarning" | "sysTextBrandPrimary" | "sysTextBrandSeconVariant" | "usrTextBrandPrimary" | "usrTextBrandSeconVariant" | "usrTextBrandOnPrimary" | undefined;
     }) => JSX.Element;
 }

package/dist/src/sub/DynamicLayout/components/mobile/Item/Item.d.ts

@@ -15,7 +15,7 @@ declare namespace Item {
         data?: string | undefined;
         styleTheme?: "displayBold" | "headingBold" | "leadParaBold" | "leadParaRegular" | "subTitleBold" | "subTitleRegular" | "body1Bold" | "body1Regular" | "body2Bold" | "body2Regular" | "caption1Bold" | "caption1Regular" | "caption2Bold" | "caption2Regular" | "form1Regular" | "form2Regular" | "blog1Regular" | undefined;
         color?: string | undefined;
-        textAlign?: "left" | "center" | "right" | undefined;
+        textAlign?: "left" | "right" | "center" | undefined;
         colorTheme?: "sysTextPrimary" | "sysTextSecondary" | "sysTextTertiary" | "sysTextWhite" | "sysTextError" | "sysTextWarning" | "sysTextBrandPrimary" | "sysTextBrandSeconVariant" | "usrTextBrandPrimary" | "usrTextBrandSeconVariant" | "usrTextBrandOnPrimary" | undefined;
     }) => JSX.Element;
     var Button: ({ buttonType, backgroundColor, textColor, text, linkType, src, linkMethod, state, borderColor }: IItemButton) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web",
-  "version": "2.2.246",
+  "version": "2.2.249",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",

package/release-note.md

@@ -1,7 +1,7 @@
 # PDS-DEV-KIT-WEB Release Notes
-## [v2.2.246]
+## [v2.2.249]
 ## daily|https://design.storybook.publ.biz/
 
 ### 업데이트 사항
 
-* [PDS-1346] 캘린더 개발 수정 사항
+* [PDS-1372] ContextBubble PDS 추가 건