pds-dev-kit-web-test 0.1.10 → 0.2.0

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/TwitterTimeline/TwitterTimeline.js

@@ -0,0 +1,52 @@
+"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 jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var customChrome = {
+    noheader: 'noheader',
+    nofooter: 'nofooter',
+    noborders: 'noborders',
+    noscrollbar: 'noscrollbar',
+    transparent: 'transparent'
+};
+/**
+ * 트위터의 Profile Timeline 임베드 컴포넌트입니다.
+ *
+ * Profile Timeline 가이드: https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/profile-timeline
+ *
+ * Parameter Reference: https://developer.twitter.com/en/docs/twitter-for-websites/timelines/guides/parameter-reference
+ *
+ * 트위터 표시 요구 약관: https://developer.twitter.com/en/developer-terms/display-requirements
+ */
+function TwitterTimeline(_a) {
+    var userId = _a.userId, _b = _a.tweetLimit, tweetLimit = _b === void 0 ? 5 : _b, _c = _a.showReplies, showReplies = _c === void 0 ? false : _c, _d = _a.theme, theme = _d === void 0 ? 'light' : _d, _e = _a.ariaPolite, ariaPolite = _e === void 0 ? 'polite' : _e, _f = _a.dnt, dnt = _f === void 0 ? true : _f, _g = _a.customChrome, customChrome = _g === void 0 ? [] : _g, width = _a.width, _h = _a.height, height = _h === void 0 ? 600 : _h, fallback = _a.fallback;
+    var TWITTER_EMBED_TIMELINE_SCRIPT_ID = 'twitter-timeline';
+    var TWITTER_EMBED_TIMELINE_SCRIPT_SRC = 'https://platform.twitter.com/widgets.js';
+    /**
+      @when : 컴포넌트 렌더시
+      @expected : 트위터 임베드 스크립트가 없다면 스크립트 주소와 아이디를 설정해줍니다.
+      @clear : -
+     */
+    (0, react_1.useEffect)(function () {
+        var hasScript = document.getElementById(TWITTER_EMBED_TIMELINE_SCRIPT_ID);
+        if (!hasScript) {
+            var script = document.createElement('script');
+            script.src = TWITTER_EMBED_TIMELINE_SCRIPT_SRC;
+            script.id = TWITTER_EMBED_TIMELINE_SCRIPT_ID;
+            document.body.append(script);
+        }
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("section", __assign({ className: "twitter-embed-container" }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "twitter-embed" }, { children: (0, jsx_runtime_1.jsx)("a", __assign({ className: "twitter-timeline", "data-tweet-limit": tweetLimit, "data-show-replies": showReplies, "data-aria-polite": ariaPolite, "data-dnt": dnt, "data-theme": theme, "data-chrome": customChrome.join(' '), "data-width": width, "data-height": height, href: "https://twitter.com/" + userId }, { children: fallback }), void 0) }), void 0) }), void 0));
+}
+exports.default = TwitterTimeline;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/TwitterTimeline/index.d.ts

@@ -0,0 +1,2 @@
+import TwitterTimeline from './TwitterTimeline';
+export { TwitterTimeline };

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/TwitterTimeline/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.TwitterTimeline = void 0;
+var TwitterTimeline_1 = __importDefault(require("./TwitterTimeline"));
+exports.TwitterTimeline = TwitterTimeline_1.default;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/index.d.ts

@@ -0,0 +1,3 @@
+import { RichText } from './RichText';
+import { TwitterTimeline } from './TwitterTimeline';
+export { RichText, TwitterTimeline };

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/index.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TwitterTimeline = exports.RichText = void 0;
+var RichText_1 = require("./RichText");
+Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
+var TwitterTimeline_1 = require("./TwitterTimeline");
+Object.defineProperty(exports, "TwitterTimeline", { enumerable: true, get: function () { return TwitterTimeline_1.TwitterTimeline; } });

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

@@ -10,16 +10,52 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
-var SectionMatcher_1 = require("../SectionMatcher");
+var sections_1 = require("../../../DynamicLayout/sections");
+var CustomSection_1 = require("../../../DynamicLayout/sections/CustomSection");
 var SectionBox_1 = __importDefault(require("./SectionBox"));
 function EditModeSectionMatcher(_a) {
     var filteredSortedSection = _a.filteredSortedSection, scrollDownTargetSectionId = _a.scrollDownTargetSectionId, editingSectionId = _a.editingSectionId, onClickEditSection = _a.onClickEditSection;
     var iframeSection = filteredSortedSection.find(function (section) { return section.manifest.schema === 'EXP_IFRAME' && section.display; });
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, iframeSection), iframeSection.id) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: (0, jsx_runtime_1.jsx)(SectionMatcher_1.SectionMatcher, __assign({}, section), section.id) }), section.id)); })) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: iframeSection ? ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isIframeSection: true, isEditing: editingSectionId === iframeSection.id, scrollIntoThisSection: iframeSection.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(iframeSection); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, iframeSection), void 0) }), iframeSection.id)) : (filteredSortedSection.map(function (section) { return ((0, jsx_runtime_1.jsx)(SectionBox_1.default, __assign({ isEditing: editingSectionId === section.id, scrollIntoThisSection: section.id === scrollDownTargetSectionId, onClick: function () { return onClickEditSection(section); } }, { children: (0, jsx_runtime_1.jsx)(Matcher, __assign({}, section), void 0) }), section.id)); })) }, void 0));
 }
 exports.default = EditModeSectionMatcher;
+function Matcher(_a) {
+    var props = __rest(_a, []);
+    var schema = props.manifest.schema;
+    switch (schema) {
+        case 'BASE_INTRO':
+            return (0, jsx_runtime_1.jsx)(sections_1.IntroSection, __assign({}, props), void 0);
+        case 'BASE_CONTENTS':
+            return (0, jsx_runtime_1.jsx)(sections_1.ContentsSection, __assign({}, props), void 0);
+        case 'BASE_CONTENTS_CAROUSEL':
+            return (0, jsx_runtime_1.jsx)(sections_1.ContentsCarouselSection, __assign({}, props), void 0);
+        case 'BASE_FOOTER':
+            return (0, jsx_runtime_1.jsx)(sections_1.FooterSection, __assign({}, props), void 0);
+        case 'BASE_INFO_BOX':
+            return (0, jsx_runtime_1.jsx)(sections_1.InfoBoxSection, __assign({}, props), void 0);
+        case 'EXP_IFRAME':
+            return (0, jsx_runtime_1.jsx)(sections_1.FullscreenIframeSection, __assign({}, props), void 0);
+        case 'PRG_MEMBERSHIP_DISPLAY':
+            return (0, jsx_runtime_1.jsx)(sections_1.EditTypeMembershipSection, __assign({}, props), void 0);
+        case 'CUSTOM_SECTION':
+            return (0, jsx_runtime_1.jsx)(CustomSection_1.CustomSection, __assign({}, props), void 0);
+        default:
+            return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
+    }
+}

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

@@ -75,9 +75,17 @@ function Background() {
         function onResize() {
             setYoutubeSize(getResponsiveYoutubeSize());
         }
-        window.addEventListener('resize', onResize);
+        var element = backgroundRef.current;
+        if (!element)
+            return;
+        var observer = new ResizeObserver(function (entries) {
+            entries.forEach(function () {
+                onResize();
+            });
+        });
+        observer.observe(element);
         return function () {
-            window.removeEventListener('resize', onResize);
+            observer.disconnect();
         };
     }, []);
     var backgroundMedia = (0, react_1.useMemo)(function () {

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

@@ -23,6 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
+var CustomSection_1 = require("../../../DynamicLayout/sections/CustomSection");
 var sections_1 = require("../../sections");
 function SectionMatcher(_a) {
     var props = __rest(_a, []);
@@ -40,6 +41,10 @@ function SectionMatcher(_a) {
             return (0, jsx_runtime_1.jsx)(sections_1.InfoBoxSection, __assign({}, props), void 0);
         case 'EXP_IFRAME':
             return (0, jsx_runtime_1.jsx)(sections_1.FullscreenIframeSection, __assign({}, props), void 0);
+        case 'PRG_MEMBERSHIP_DISPLAY':
+            return (0, jsx_runtime_1.jsx)(sections_1.NormalTypeMembershipSection, __assign({}, props), void 0);
+        case 'CUSTOM_SECTION':
+            return (0, jsx_runtime_1.jsx)(CustomSection_1.CustomSection, __assign({}, props), void 0);
         default:
             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}, void 0);
     }

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

@@ -0,0 +1,173 @@
+export declare const customsectionMock: ({
+    type: string;
+    gridItemData: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        i: string;
+    };
+    content: {
+        data: {
+            type: string;
+            value: {
+                text: string;
+                size?: undefined;
+                src?: undefined;
+                alt?: undefined;
+                accountId?: undefined;
+                startAt?: undefined;
+                endAt?: undefined;
+            };
+        };
+    };
+    style: {
+        backgroundColor: string;
+    };
+    hoverStyle: {
+        backgroundColor: string;
+        color: string;
+        opacity: number;
+    };
+    layout: {};
+} | {
+    type: string;
+    gridItemData: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        i: string;
+    };
+    content: {
+        data: {
+            type: string;
+            value: {
+                text: string;
+                size?: undefined;
+                src?: undefined;
+                alt?: undefined;
+                accountId?: undefined;
+                startAt?: undefined;
+                endAt?: undefined;
+            };
+        };
+    };
+    style: {
+        backgroundColor: string;
+    };
+    layout: {};
+    hoverStyle?: undefined;
+} | {
+    type: string;
+    gridItemData: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        i: string;
+    };
+    content: {
+        data: {
+            type: string;
+            value: {
+                size: number;
+                text?: undefined;
+                src?: undefined;
+                alt?: undefined;
+                accountId?: undefined;
+                startAt?: undefined;
+                endAt?: undefined;
+            };
+        };
+    };
+    style: {
+        backgroundColor: string;
+    };
+    layout: {};
+    hoverStyle?: undefined;
+} | {
+    type: string;
+    gridItemData: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        i: string;
+    };
+    content: {
+        data: {
+            type: string;
+            value: {
+                src: string;
+                alt: string;
+                text?: undefined;
+                size?: undefined;
+                accountId?: undefined;
+                startAt?: undefined;
+                endAt?: undefined;
+            };
+        };
+    };
+    style: {
+        backgroundColor: string;
+    };
+    layout: {};
+    hoverStyle?: undefined;
+} | {
+    type: string;
+    gridItemData: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        i: string;
+    };
+    content: {
+        data: {
+            type: string;
+            value: {
+                accountId: string;
+                text?: undefined;
+                size?: undefined;
+                src?: undefined;
+                alt?: undefined;
+                startAt?: undefined;
+                endAt?: undefined;
+            };
+        };
+    };
+    style: {
+        backgroundColor: string;
+    };
+    layout: {};
+    hoverStyle?: undefined;
+} | {
+    type: string;
+    gridItemData: {
+        x: number;
+        y: number;
+        w: number;
+        h: number;
+        i: string;
+    };
+    content: {
+        data: {
+            type: string;
+            value: {
+                src: string;
+                startAt: number;
+                endAt: number;
+                text?: undefined;
+                size?: undefined;
+                alt?: undefined;
+                accountId?: undefined;
+            };
+        };
+    };
+    style: {
+        backgroundColor: string;
+    };
+    layout: {};
+    hoverStyle?: undefined;
+})[];

package/dist/src/sub/DynamicLayout/custonSectionSampleData.js

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.customsectionMock = void 0;
+exports.customsectionMock = [
+    {
+        type: 'BUTTON',
+        gridItemData: {
+            x: 2,
+            y: 2,
+            w: 2,
+            h: 2,
+            i: '1'
+        },
+        content: {
+            data: {
+                type: 'BUTTON',
+                value: {
+                    text: 'im button'
+                }
+            }
+        },
+        style: {
+            backgroundColor: 'red'
+        },
+        hoverStyle: {
+            backgroundColor: 'blue',
+            color: 'white',
+            opacity: 0.5
+        },
+        layout: {}
+    },
+    {
+        type: 'TEXT',
+        gridItemData: {
+            x: 3,
+            y: 3,
+            w: 2,
+            h: 2,
+            i: '2'
+        },
+        content: {
+            data: {
+                type: 'TEXT',
+                value: {
+                    text: 'im Text'
+                }
+            }
+        },
+        style: {
+            backgroundColor: 'red'
+        },
+        layout: {}
+    },
+    {
+        type: 'DIVIDER',
+        gridItemData: {
+            x: 8,
+            y: 0,
+            w: 2,
+            h: 4,
+            i: '3'
+        },
+        content: {
+            data: {
+                type: 'DIVIDER',
+                value: {
+                    size: 10
+                }
+            }
+        },
+        style: {
+            backgroundColor: 'red'
+        },
+        layout: {}
+    },
+    {
+        type: 'IMAGE',
+        gridItemData: {
+            x: 0,
+            y: 4,
+            w: 4,
+            h: 4,
+            i: '4'
+        },
+        content: {
+            data: {
+                type: 'IMAGE',
+                value: {
+                    src: 'https://static.publ.site/channel_default_channel_icon.png',
+                    alt: 'text'
+                }
+            }
+        },
+        style: {
+            backgroundColor: 'red'
+        },
+        layout: {}
+    },
+    {
+        type: 'TWITTER',
+        gridItemData: {
+            x: 8,
+            y: 1,
+            w: 5,
+            h: 7,
+            i: '5'
+        },
+        content: {
+            data: {
+                type: 'TWITTER',
+                value: {
+                    accountId: 'elonmusk'
+                }
+            }
+        },
+        style: {
+            backgroundColor: 'red'
+        },
+        layout: {}
+    },
+    {
+        type: 'YOUTUBE',
+        gridItemData: {
+            x: 12,
+            y: 4,
+            w: 6,
+            h: 6,
+            i: '6'
+        },
+        content: {
+            data: {
+                type: 'YOUTUBE',
+                value: {
+                    src: 'https://youtu.be/5ch94AaPZRQ',
+                    startAt: 60,
+                    endAt: 120
+                }
+            }
+        },
+        style: {
+            backgroundColor: 'red'
+        },
+        layout: {}
+    },
+    {
+        type: 'RICH_TEXT',
+        gridItemData: {
+            x: 0,
+            y: 0,
+            w: 6,
+            h: 10,
+            i: '7'
+        },
+        content: {
+            data: {
+                type: 'RICH_TEXT',
+                value: {
+                    text: '<h1>text</h1><h2>text</h2><p><span style="color: rgb(224, 62, 45);">text</span></p><p><span style="color: rgb(132, 63, 161);">text</span></p><p><span style="color: rgb(230, 126, 35);">text</span></p><p><span style="color: rgb(22, 145, 121);">text</span></p><p><em>text</em></p><p><span style="text-decoration: underline;">text</span></p><p><s>text</s></p><p style="text-align: center;">text</p><p style="text-align: right;">text</p><ol><li style="text-align: left;">text</li><li style="text-align: left;">text</li></ol><p>&nbsp;</p><ul><li>text</li><li>text</li></ul><blockquote><p>text</p></blockquote><p><span style="color: rgb(126, 140, 141);"><a href="https://google.com">https://google.com</a></span></p><p><span style="color: rgb(126, 140, 141);"><img title="b4bffd4008803a321411fc7ada27be05.jpeg" src="https://publ-upload-dev.s3.ap-northeast-2.amazonaws.com/45414c0e-496b-43d0-99f7-e8cefe177e81.jpeg" alt="image" width="700" height="394"></span></p><p><span style="color: rgb(126, 140, 141);"><iframe src="https://www.youtube.com/embed/WHD7uNXFspk" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></span></p>'
+                }
+            }
+        },
+        style: {
+            backgroundColor: 'yellow'
+        },
+        layout: {}
+    }
+];

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

@@ -7,4 +7,5 @@ export declare const samplePageInfoBoxSection: ISection;
 export declare const samplePageIntroSection3: ISection;
 export declare const samplePageFooterSection: ISection;
 export declare const samplePageFullscreenIframeSection: ISection;
+export declare const samplePageMembershipSection: ISection;
 export declare const samplePage: ISection[];