pds-dev-kit-web-test 0.2.1 → 0.2.3

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/parseStylePropTextSpec.js

@@ -0,0 +1,80 @@
+"use strict";
+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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var AVAILABLE_SPECS = [
+    'CB_STYLE_PROP_TEXT_SPEC_COLOR',
+    'CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE',
+    'CB_STYLE_PROP_TEXT_SPEC_FONT',
+    'CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING',
+    'CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT',
+    'CB_STYLE_PROP_TEXT_SPEC_SIZE',
+    'CB_STYLE_PROP_TEXT_SPEC_WEIGHT'
+];
+function parseStylePropTextSpec(namedProps, device) {
+    var specs = namedProps.specs;
+    return AVAILABLE_SPECS.reduce(function (acc, cur) {
+        var _a, _b;
+        var baseKey = device === 'DESKTOP' ? cur : cur + ":MOBILE";
+        var cssPropertyKey = getParsedKey(baseKey);
+        var value = specs[baseKey];
+        var hoverValue = specs[baseKey + ":HOVER"];
+        return {
+            style: __assign(__assign({}, acc.style), (_a = {}, _a[cssPropertyKey] = value, _a)),
+            hoverStyle: __assign(__assign({}, acc.hoverStyle), (_b = {}, _b[cssPropertyKey] = hoverValue, _b))
+        };
+    }, {
+        style: {},
+        hoverStyle: {}
+    });
+}
+exports.default = parseStylePropTextSpec;
+function getParsedKey(key) {
+    switch (key) {
+        case "CB_STYLE_PROP_TEXT_SPEC_COLOR":
+        case "CB_STYLE_PROP_TEXT_SPEC_COLOR:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_COLOR:MOBILE:HOVER":
+            return 'color';
+        case "CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE":
+        case "CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_FITTOSIZE:MOBILE:HOVER":
+            // NOTE: 뭐지?
+            return 'unknown';
+        case "CB_STYLE_PROP_TEXT_SPEC_FONT":
+        case "CB_STYLE_PROP_TEXT_SPEC_FONT:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_FONT:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_FONT:MOBILE:HOVER":
+            return 'fontFamily';
+        case "CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING":
+        case "CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_LETTERSPACING:MOBILE:HOVER":
+            return 'letterSpacing';
+        case "CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT":
+        case "CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_LINEHEIGHT:MOBILE:HOVER":
+            return 'lineHeight';
+        case "CB_STYLE_PROP_TEXT_SPEC_SIZE":
+        case "CB_STYLE_PROP_TEXT_SPEC_SIZE:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER":
+            return 'fontSize';
+        case "CB_STYLE_PROP_TEXT_SPEC_WEIGHT":
+        case "CB_STYLE_PROP_TEXT_SPEC_WEIGHT:HOVER":
+        case "CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE":
+        case "CB_STYLE_PROP_TEXT_SPEC_WEIGHT:MOBILE:HOVER":
+            return 'fontWeight';
+    }
+}

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/types.d.ts

@@ -0,0 +1,22 @@
+import type { NAMED_CB_STYLE_BGCOLOR_PROPS } from './parseStylePropBgColor';
+import type { NAMED_CB_STYLE_BGIMAGE_PROPS } from './parseStylePropBgImage';
+import type { NAMED_CB_STYLE_BGOVERLAY_PROPS } from './parseStylePropBgOverlay';
+import type { NAMED_CB_STYLE_BORDER_PROPS } from './parseStylePropBorder';
+import type { NAMED_CB_STYLE_DIVIDER_PROPS } from './parseStylePropDivider';
+import type { NAMED_CB_STYLE_IMAGE_PROPS } from './parseStylePropImage';
+import type { NAMED_CB_STYLE_OPACITY_PROPS } from './parseStylePropOpacity';
+import type { NAMED_CB_STYLE_SHADOW_PROPS } from './parseStylePropShadow';
+import type { NAMED_CB_STYLE_TEXT_PROPS } from './parseStylePropTextSpec';
+export declare enum CB_STYLE_PROP_KEYS {
+    CB_STYLE_PROP_TEXT = "CB_STYLE_PROP_TEXT",
+    CB_STYLE_PROP_OPACITY = "CB_STYLE_PROP_OPACITY",
+    CB_STYLE_PROP_DIVIDER = "CB_STYLE_PROP_DIVIDER",
+    CB_STYLE_PROP_SHADOW = "CB_STYLE_PROP_SHADOW",
+    CB_STYLE_PROP_BORDER = "CB_STYLE_PROP_BORDER",
+    CB_STYLE_PROP_IMAGE = "CB_STYLE_PROP_IMAGE",
+    CB_STYLE_PROP_BTNCOLOR = "CB_STYLE_PROP_BTNCOLOR",
+    CB_STYLE_PROP_BGCOLOR = "CB_STYLE_PROP_BGCOLOR",
+    CB_STYLE_PROP_BGMEDIA = "CB_STYLE_PROP_BGMEDIA",
+    CB_STYLE_PROP_BGOVERLAY = "CB_STYLE_PROP_BGOVERLAY"
+}
+export declare type NamedStylePropType = NAMED_CB_STYLE_TEXT_PROPS | NAMED_CB_STYLE_OPACITY_PROPS | NAMED_CB_STYLE_DIVIDER_PROPS | NAMED_CB_STYLE_SHADOW_PROPS | NAMED_CB_STYLE_BORDER_PROPS | NAMED_CB_STYLE_IMAGE_PROPS | NAMED_CB_STYLE_BGCOLOR_PROPS | NAMED_CB_STYLE_BGIMAGE_PROPS | NAMED_CB_STYLE_BGOVERLAY_PROPS;

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/stylePropParsers/types.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CB_STYLE_PROP_KEYS = void 0;
+var CB_STYLE_PROP_KEYS;
+(function (CB_STYLE_PROP_KEYS) {
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_TEXT"] = "CB_STYLE_PROP_TEXT";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_OPACITY"] = "CB_STYLE_PROP_OPACITY";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_DIVIDER"] = "CB_STYLE_PROP_DIVIDER";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_SHADOW"] = "CB_STYLE_PROP_SHADOW";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BORDER"] = "CB_STYLE_PROP_BORDER";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_IMAGE"] = "CB_STYLE_PROP_IMAGE";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BTNCOLOR"] = "CB_STYLE_PROP_BTNCOLOR";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BGCOLOR"] = "CB_STYLE_PROP_BGCOLOR";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BGMEDIA"] = "CB_STYLE_PROP_BGMEDIA";
+    CB_STYLE_PROP_KEYS["CB_STYLE_PROP_BGOVERLAY"] = "CB_STYLE_PROP_BGOVERLAY";
+})(CB_STYLE_PROP_KEYS = exports.CB_STYLE_PROP_KEYS || (exports.CB_STYLE_PROP_KEYS = {}));

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.d.ts

@@ -0,0 +1,134 @@
+import type { CB_BTNTEXT_STYLE_PROPS, CB_STYLE_PROP_BTNCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Button/btnTypes';
+import type { CB_TEXT_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Text';
+import type { CB_TWITTER_STYLE_PROPS } from '../components/ComponentBlock/componentBlocks/Twitter';
+import type { CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_IMAGE, CB_CONTENT_PROP_TEXT, CB_CONTENT_PROP_TWITTER } from '../components/ComponentBlock/componentBlocks/types';
+import type { CB_CONTENT_PROP_YOUTUBE_TYPE, CB_STYLE_PROP_BGCOLOR_SPECS } from '../components/ComponentBlock/componentBlocks/Youtube/types';
+import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './contentPropParsers/parseContentVisibility';
+import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './effectPropParsers/parseEffectPropEntAnim';
+import type { CB_LAYOUT_PROP_ARRANGE_SPECS } from './layoutPropParsers/parseLayoutPropArrange';
+import type { CB_LAYOUT_PROP_PADDING_SPECS } from './layoutPropParsers/parseLayoutPropPadding';
+import type { NamedLayoutPropType } from './layoutPropParsers/types';
+import type { CB_STYLE_PROP_BORDER_SPECS } from './stylePropParsers/parseStylePropBorder';
+import type { CB_STYLE_PROP_DIVIDER_SPECS } from './stylePropParsers/parseStylePropDivider';
+import type { CB_STYLE_PROP_IMAGE_SPECS } from './stylePropParsers/parseStylePropImage';
+import type { CB_STYLE_PROP_TEXT_OPACITY_SPECS } from './stylePropParsers/parseStylePropOpacity';
+import type { CB_STYLE_PROP_SHADOW_SPECS } from './stylePropParsers/parseStylePropShadow';
+import type { NamedStylePropType } from './stylePropParsers/types';
+import type { CSSProperties } from 'react';
+export declare type STRING_PLAIN = string;
+export declare type ENUM_STRING = string;
+export declare type NUMBER_INTEGER = number;
+export declare type STRING_8DIGIT_HEX = string;
+export declare type CB_GENERAL_PROPERTIES_TYPE = {
+    CB_PLACEMENT_PROP_PLACEMENT: CB_PLACEMENT_PROP_SPECS;
+    CB_CONTENT_PROP_HOVER: {
+        CB_CONTENT_PROP_HOVER_SPEC_MUSE: boolean;
+    };
+};
+export declare type CB_TEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_STYLE_PROP_TEXT: CB_TEXT_STYLE_PROPS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_CONTENT_PROP_TEXT: CB_CONTENT_PROP_TEXT;
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export declare type CB_BTN_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_TEXT: CB_CONTENT_PROP_TEXT;
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
+    CB_STYLE_PROP_BTNTEXT: CB_BTNTEXT_STYLE_PROPS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+    CB_STYLE_PROP_BTNCOLOR: CB_STYLE_PROP_BTNCOLOR_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+};
+export declare type CB_IMG_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_CLINK: CB_CONTENT_PROP_CLINK;
+    CB_CONTENT_PROP_IMAGE: CB_CONTENT_PROP_IMAGE;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_STYLE_PROP_IMAGE: CB_STYLE_PROP_IMAGE_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export declare type CB_TWITTER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_TWITTER: CB_CONTENT_PROP_TWITTER;
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_STYLE_PROP_TWITTER: CB_TWITTER_STYLE_PROPS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export declare type CB_RICHTEXT_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_TEXTEDIT: {
+        CB_CONTENT_PROP_TEXTEDIT_SPEC_EDITOR: string;
+    };
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_BORDER: CB_STYLE_PROP_BORDER_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+};
+export declare type CB_DIVIDER_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_STYLE_PROP_DIVIDER: CB_STYLE_PROP_DIVIDER_SPECS;
+};
+export declare type CB_YOUTUBE_PROPERTIES_TYPE = CB_GENERAL_PROPERTIES_TYPE & {
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_CONTENT_PROP_YOUTUBE: CB_CONTENT_PROP_YOUTUBE_TYPE;
+    CB_LAYOUT_PROP_ARRANGE: CB_LAYOUT_PROP_ARRANGE_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_OPACITY: CB_STYLE_PROP_TEXT_OPACITY_SPECS;
+    CB_STYLE_PROP_SHADOW: CB_STYLE_PROP_SHADOW_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+};
+export declare type StyleType = {
+    style: CSSProperties;
+};
+export declare type StyleAndHoverStyle = StyleType & {
+    hoverStyle: CSSProperties;
+};
+export declare type OverlayStyleAndOverlayHoverStyle = {
+    overlayStyle: CSSProperties;
+    overlayHoverStyle: CSSProperties;
+};
+export declare type Device = 'DESKTOP' | 'MOBILE';
+export declare type DefaultBrightTheme = 'LIGHT' | 'DARK';
+export declare type ParserResult = {
+    style: CSSProperties;
+    hoverStyle: CSSProperties;
+    layout: CSSProperties;
+    effect: CSSProperties;
+    content: Record<string, unknown>;
+};
+export declare type NamedPropAllTypes = NamedStylePropType | NamedLayoutPropType;
+export declare type CB_PLACEMENT_PROP_SPECS = {
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_COLS:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ROWS:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTX:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_STARTY:MOBILE': number;
+    CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX: number;
+    'CB_PLACEMENT_PROP_PLACEMENT_SPEC_ZINDEX:MOBILE': number;
+};

package/dist/src/sub/DynamicLayout/sections/CustomSection/util/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/src/sub/DynamicLayout/sections/index.d.ts

@@ -6,3 +6,4 @@ export { IntroSection } from './IntroSection';
 export { EditTypeMembershipSection } from './MembershipSection';
 export { NormalTypeMembershipSection } from './MembershipSection';
 export { FullscreenIframeSection } from './FullscreenIframeSection';
+export { CustomSection } from './CustomSection';

package/dist/src/sub/DynamicLayout/sections/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FullscreenIframeSection = exports.NormalTypeMembershipSection = exports.EditTypeMembershipSection = exports.IntroSection = exports.InfoBoxSection = exports.FooterSection = exports.ContentsSection = exports.ContentsCarouselSection = void 0;
+exports.CustomSection = exports.FullscreenIframeSection = exports.NormalTypeMembershipSection = exports.EditTypeMembershipSection = exports.IntroSection = exports.InfoBoxSection = exports.FooterSection = exports.ContentsSection = exports.ContentsCarouselSection = void 0;
 var ContentsCarouselSection_1 = require("./ContentsCarouselSection");
 Object.defineProperty(exports, "ContentsCarouselSection", { enumerable: true, get: function () { return ContentsCarouselSection_1.ContentsCarouselSection; } });
 var ContentsSection_1 = require("./ContentsSection");
@@ -17,3 +17,5 @@ var MembershipSection_2 = require("./MembershipSection");
 Object.defineProperty(exports, "NormalTypeMembershipSection", { enumerable: true, get: function () { return MembershipSection_2.NormalTypeMembershipSection; } });
 var FullscreenIframeSection_1 = require("./FullscreenIframeSection");
 Object.defineProperty(exports, "FullscreenIframeSection", { enumerable: true, get: function () { return FullscreenIframeSection_1.FullscreenIframeSection; } });
+var CustomSection_1 = require("./CustomSection");
+Object.defineProperty(exports, "CustomSection", { enumerable: true, get: function () { return CustomSection_1.CustomSection; } });

package/dist/src/sub/DynamicLayout/types.d.ts

@@ -1,8 +1,14 @@
 /// <reference types="react" />
 import type { TypeOfSectionAction } from './sectionActionTypes';
+import type { ComponentBlock } from './sections/CustomSection/types';
+import type { CB_CONTENT_PROP_VISIBILITY_SPECS } from './sections/CustomSection/util/contentPropParsers/parseContentVisibility';
+import type { CB_EFFECT_PROP_ENTANIM_SPECS } from './sections/CustomSection/util/effectPropParsers/parseEffectPropEntAnim';
+import type { CB_LAYOUT_PROP_PADDING_SPECS } from './sections/CustomSection/util/layoutPropParsers/parseLayoutPropPadding';
+import type { CB_STYLE_PROP_BGCOLOR_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgColor';
+import type { CB_STYLE_PROP_BGOVERLAY_SPECS } from './sections/CustomSection/util/stylePropParsers/parseStylePropBgOverlay';
 export { TypeOfSectionAction };
-export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM_SECTION';
-export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A' | 'EXP_IFRAME_A' | 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B' | 'CUSTOM_SECTION_A';
+export declare type TypeOfSectionManifestSchema = 'BASE_INTRO' | 'BASE_CONTENTS' | 'BASE_CONTENTS_CAROUSEL' | 'BASE_FOOTER' | 'BASE_INFO_BOX' | 'EXP_IFRAME' | 'PRG_MEMBERSHIP_DISPLAY' | 'CUSTOM';
+export declare type TypeofSectionTemplate = 'BASE_INTRO_A' | 'BASE_INTRO_B' | 'BASE_INTRO_C' | 'BASE_INTRO_D' | 'BASE_CONTENTS_A' | 'BASE_CONTENTS_B' | 'BASE_CONTENTS_CAROUSEL_A' | 'BASE_CONTENTS_CAROUSEL_B' | 'BASE_FOOTER_A' | 'BASE_FOOTER_B' | 'BASE_INFO_BOX_A' | 'EXP_IFRAME_A' | 'PRG_MEMBERSHIP_DISPLAY_A' | 'PRG_MEMBERSHIP_DISPLAY_B' | undefined;
 export declare type TypeOfSectionContentMediaType = 'IMAGE' | 'YOUTUBE';
 export declare type TypeOfSectionLinkType = 'WEB_LINK' | 'INTERNAL_LINK' | 'NONE';
 export declare type TypeOfSectionType = 'PROGRAMMED' | 'DESIGNED' | 'CUSTOM';
@@ -21,6 +27,7 @@ declare type KeyOfSectionStyles = 'title_color_in_hex' | 'description_color_in_h
 declare type KeyOfItemProperties = 'title' | 'description' | 'body' | 'logo_image_src' | 'image_src' | 'link_type' | 'link_src' | 'button_label';
 export interface ISection {
     id: number;
+    administrativeTitle?: string;
     display: boolean;
     order: number;
     manifest: {
@@ -28,7 +35,7 @@ export interface ISection {
         availableProperties: Array<KeyOfSectionProperties>;
         availableStyles: Array<KeyOfSectionStyles>;
         availableTemplates: Array<TypeofSectionTemplate>;
-    };
+    } | Record<string, never>;
     template: TypeofSectionTemplate;
     properties: ISectionProperties;
     styles: ISectionStyles;
@@ -37,7 +44,6 @@ export interface ISection {
     updatedAt: string;
     type: TypeOfSectionType;
     program?: 'MEMBERSHIP_DISPLAY';
-    componentBlocks?: any[];
     programData?: {
         mdid: string;
         preview: {
@@ -50,6 +56,8 @@ export interface ISection {
             };
         };
     };
+    componentBlocks?: ComponentBlock[];
+    jsonProperties?: ISectionJsonProperties;
 }
 export interface SubscriptionProductInList {
     id: number;
@@ -282,3 +290,61 @@ export declare type IMembershipDisplay = {
     isDefault: boolean;
     connectedMemberships: IConnectedMembership[];
 };
+export declare type ISectionJsonProperties = {
+    CB_CONTENT_PROP_VISIBILITY: CB_CONTENT_PROP_VISIBILITY_SPECS;
+    CB_EFFECT_PROP_ENTANIM: CB_EFFECT_PROP_ENTANIM_SPECS;
+    CB_LAYOUT_PROP_PADDING: CB_LAYOUT_PROP_PADDING_SPECS;
+    CB_PLACEMENT_PROP_SECTION: {
+        CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH: boolean;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_FULLWIDTH:MOBILE': boolean | undefined;
+        CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT: number;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_MINHEIGHT:MOBILE': number | undefined;
+        CB_PLACEMENT_PROP_SECTION_SPEC_ROWS: number;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_ROWS:MOBILE': number | undefined;
+        CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH: number;
+        'CB_PLACEMENT_PROP_SECTION_SPEC_WIDTH:MOBILE': number | undefined;
+    };
+    CB_STYLE_PROP_BGCOLOR: CB_STYLE_PROP_BGCOLOR_SPECS;
+    CB_STYLE_PROP_BGMEDIA: CB_STYLE_PROP_BGMEDIA_SPECS;
+    CB_STYLE_PROP_BGOVERLAY: CB_STYLE_PROP_BGOVERLAY_SPECS;
+};
+export declare type CB_STYLE_PROP_BGMEDIA_SPECS = {
+    CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME: number;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:HOVER': number;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:MOBILE': number | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_ENDTIME:MOBILE:HOVER': number | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT: string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:HOVER': string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE': string | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEFIT:MOBILE:HOVER': string | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR: string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:HOVER': string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:MOBILE': string | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGESELECTOR:MOBILE:HOVER': string | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION: string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:HOVER': string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE': string | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_IMAGEPOSITION:MOBILE:HOVER': string | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY: boolean;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_MPLAY:MOBILE': boolean | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY: boolean;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:HOVER': boolean;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE': boolean | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_REPLAY:MOBILE:HOVER': boolean | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME: number;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:HOVER': number;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE': number | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_STARTTIME:MOBILE:HOVER': number | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL: boolean;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:HOVER': boolean;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE': boolean | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_SCROLL:MOBILE:HOVER': boolean | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_TYPE: string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:HOVER': string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE': string | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_TYPE:MOBILE:HOVER': string | undefined;
+    CB_STYLE_PROP_BGMEDIA_SPEC_YSRC: string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:HOVER': string;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE': string | undefined;
+    'CB_STYLE_PROP_BGMEDIA_SPEC_YSRC:MOBILE:HOVER': string | undefined;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pds-dev-kit-web-test",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "license": "MIT",
   "private": false,
   "main": "dist/index.js",
@@ -22,7 +22,7 @@
     "i18next-intervalplural-postprocessor": "^3.0.0",
     "lottie-react": "^2.3.1",
     "nuka-carousel": "^4.8.4",
-    "react-grid-layout": "^1.3.4",
+    "publ-echo": "^0.0.20",
     "react-hook-form": "^7.28.1",
     "react-i18next": "^11.12.0",
     "react-router-dom": "^5.2.0",
@@ -85,7 +85,6 @@
     "@storybook/react": "^6.3.12",
     "@types/lodash": "^4.14.175",
     "@types/node": "^16.10.2",
-    "@types/react-grid-layout": "^1.3.2",
     "@types/react-router-dom": "^5.3.3",
     "@types/smoothscroll-polyfill": "^0.3.1",
     "@types/styled-components": "^5.1.9",

package/release-note.md

@@ -1,6 +1,6 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.2.1]
+## [v0.2.3]
 ## 기준 pds-dev-kit-web 버전 @2.0.14
 ### sub
 * DynamicLayout - custom section
-    * Accordion 컴포넌트 블럭 추가
+    * jsonProperties 관련 내용 추가

package/dist/src/sub/DynamicLayout/components/Box.d.ts

@@ -1,13 +0,0 @@
-import type { CSSProperties } from 'react';
-declare type Props = {
-    direction?: 'vertical' | 'horizontal';
-    children: React.ReactNode;
-    relative?: boolean;
-    justifyContent?: boolean;
-    alignItems?: boolean;
-    flex?: boolean;
-    style?: CSSProperties;
-    className?: string;
-};
-declare function Box({ direction, children, relative, justifyContent, alignItems, flex, style, className }: Props): JSX.Element;
-export default Box;

package/dist/src/sub/DynamicLayout/components/Box.js

@@ -1,73 +0,0 @@
-"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;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (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"));
-function Box(_a) {
-    var _b = _a.direction, direction = _b === void 0 ? 'horizontal' : _b, children = _a.children, relative = _a.relative, justifyContent = _a.justifyContent, alignItems = _a.alignItems, flex = _a.flex, style = _a.style, className = _a.className;
-    if (direction === 'horizontal') {
-        return ((0, jsx_runtime_1.jsx)(Row, __assign({ style: style, relative: relative, justifyContent: justifyContent, alignItems: alignItems, flex: flex, className: className }, { children: children }), void 0));
-    }
-    return ((0, jsx_runtime_1.jsx)(Col, __assign({ style: style, relative: relative, justifyContent: justifyContent, alignItems: alignItems, flex: flex, className: className }, { children: children }), void 0));
-}
-exports.default = Box;
-var Col = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
-    var relative = _a.relative;
-    return relative && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      position: relative;\n    "], ["\n      position: relative;\n    "])));
-}, function (_a) {
-    var justifyContent = _a.justifyContent;
-    return justifyContent && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      justify-content: center;\n    "], ["\n      justify-content: center;\n    "])));
-}, function (_a) {
-    var alignItems = _a.alignItems;
-    return alignItems && (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      align-items: center;\n    "], ["\n      align-items: center;\n    "])));
-}, function (_a) {
-    var flex = _a.flex;
-    return flex && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      flex: 1;\n    "], ["\n      flex: 1;\n    "])));
-});
-var Row = styled_components_1.default.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n"])), function (_a) {
-    var relative = _a.relative;
-    return relative && (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      position: relative;\n    "], ["\n      position: relative;\n    "])));
-}, function (_a) {
-    var justifyContent = _a.justifyContent;
-    return justifyContent && (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      justify-content: center;\n    "], ["\n      justify-content: center;\n    "])));
-}, function (_a) {
-    var alignItems = _a.alignItems;
-    return alignItems && (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      align-items: center;\n    "], ["\n      align-items: center;\n    "])));
-}, function (_a) {
-    var flex = _a.flex;
-    return flex && (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n      flex: 1;\n    "], ["\n      flex: 1;\n    "])));
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;