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

package/README.md

@@ -1 +1,12 @@
-pds-dev-kit-web-test
+# PDS
+
+publ design system 프로젝트
+
+## 프로젝트 목적
+
+이용자에게 publ 서비스를 쉽게 이해하기 위하여 기능이나 목적의 유형에 맞춘 일관된 인터페이스를 제공하고, publ팀에는 제품을 개발하는데 필요한 화면 구성의 기획, 시각적인 표현, 최종 산출물까지 이어질 수 있는 품질 관리를 달성하기 위함
+
+## 참고 문서
+
+해당 패키지 버전은 PDS 문서 2.0 버전을 따르고 있음
+[PDS 2.0 문서 링크](https://design.docs.publ.biz/pds-project/)

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type ImagePropTypes = {
+    imageSrc: string;
+    viewType?: 'fit' | 'fill';
+    imagePosition?: 'left-top' | 'left-center' | 'left-bottom' | 'center-top' | 'center-center' | 'center-bottom' | 'right-top' | 'right-center' | 'right-bottom';
+};
+declare const Image: import("react").ForwardRefExoticComponent<ImagePropTypes & import("react").RefAttributes<HTMLImageElement>>;
+export default Image;

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

@@ -0,0 +1,46 @@
+"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 __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 react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Image = (0, react_1.forwardRef)(function (_a, ref) {
+    var imageSrc = _a.imageSrc, _b = _a.viewType, viewType = _b === void 0 ? 'fit' : _b, _c = _a.imagePosition, imagePosition = _c === void 0 ? 'center-center' : _c;
+    return (0, jsx_runtime_1.jsx)(S_Image, { ref: ref, src: imageSrc, viewType: viewType, imagePosition: imagePosition }, void 0);
+});
+var S_Image = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: ", ";\n  object-fit: ", ";\n  object-fit: ", ";\n  width: ", ";\n"], ["\n  height: ", ";\n  object-fit: ", ";\n  object-fit: ", ";\n  width: ", ";\n"])), function (_a) {
+    var viewType = _a.viewType;
+    return (viewType === 'fit' ? 'auto' : '100%');
+}, function (_a) {
+    var viewType = _a.viewType;
+    switch (viewType) {
+        case 'fit':
+            return 'contain';
+        case 'fill':
+            return 'cover';
+        default:
+            return 'contain';
+    }
+}, function (_a) {
+    var viewType = _a.viewType;
+    switch (viewType) {
+        case 'fit':
+            return 'contain';
+        case 'fill':
+            return 'cover';
+        default:
+            return 'contain';
+    }
+}, function (_a) {
+    var viewType = _a.viewType;
+    return (viewType === 'fit' ? 'auto' : '100%');
+});
+exports.default = Image;
+Image.displayName = 'Image';
+var templateObject_1;

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

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

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

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

@@ -1,7 +1,6 @@
 /// <reference types="react" />
-declare type RichTextPropTypes = {
+export declare type RichTextPropTypes = {
     text: string;
-    style: React.CSSProperties;
 };
-declare function RichText({ text, style }: RichTextPropTypes): JSX.Element;
+declare function RichText({ text }: RichTextPropTypes): JSX.Element;
 export default RichText;

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

@@ -10,10 +10,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = __importDefault(require("styled-components"));
 function RichText(_a) {
-    var text = _a.text, style = _a.style;
-    return (0, jsx_runtime_1.jsx)(S_RichText, { style: style, dangerouslySetInnerHTML: { __html: text } }, void 0);
+    var text = _a.text;
+    return (0, jsx_runtime_1.jsx)(S_RichText, { dangerouslySetInnerHTML: { __html: text } }, void 0);
 }
-var S_RichText = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  height: 100%;\n  line-height: 1.5;\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  overflow: hidden;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n    /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n    width: 100%;\n  }\n"], ["\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  height: 100%;\n  line-height: 1.5;\n  /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n  overflow: hidden;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n    /* NOTE: \uAD1C\uCC2E\uC740\uC9C0? */\n    width: 100%;\n  }\n"])), function (_a) {
+var S_RichText = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n"], ["\n  line-height: 1.5;\n  text-align: left;\n  white-space: pre-wrap;\n  width: 100%;\n  word-break: break-word;\n\n  a {\n    color: ", ";\n  }\n\n  img {\n    width: 100%;\n  }\n\n  figure {\n    margin: 0;\n    max-width: 100%;\n\n    img {\n      width: 100%;\n    }\n  }\n\n  blockquote {\n    border-left: 4px solid ", ";\n    margin: 4px;\n    padding: 4px;\n\n    p {\n      font-style: oblique;\n      margin: 0;\n    }\n  }\n\n  iframe {\n    border: none;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.ui_papp_post_notice_link;
 }, function (_a) {

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

@@ -1,2 +1,2 @@
-import RichText from './RichText';
-export { RichText };
+import RichText, { RichTextPropTypes } from './RichText';
+export { RichText, RichTextPropTypes };

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+export declare type TextPropTypes = {
+    text: string;
+    fontFamilyName?: 'Pretendard' | 'sans-serif' | 'serif';
+    fontWeight?: number;
+    fontSize?: number;
+    lineHeight?: number;
+    letterSpacing?: number;
+    textColor?: string;
+    textAlign?: 'left' | 'center' | 'right';
+};
+declare const Text: import("react").ForwardRefExoticComponent<TextPropTypes & import("react").RefAttributes<HTMLParagraphElement>>;
+export default Text;

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

@@ -0,0 +1,63 @@
+"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 __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 react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Text = (0, react_1.forwardRef)(function (_a, ref) {
+    var text = _a.text, _b = _a.letterSpacing, letterSpacing = _b === void 0 ? 0 : _b, _c = _a.lineHeight, lineHeight = _c === void 0 ? 1.3 : _c, _d = _a.textAlign, textAlign = _d === void 0 ? 'left' : _d, args = __rest(_a, ["text", "letterSpacing", "lineHeight", "textAlign"]);
+    return ((0, jsx_runtime_1.jsx)(S_Text, __assign({ ref: ref, letterSpacing: letterSpacing, lineHeight: lineHeight, textAlign: textAlign }, args, { children: text }), void 0));
+});
+var S_Text = styled_components_1.default.p(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  height: auto;\n  letter-spacing: ", "em;\n  line-height: ", ";\n  margin: 0;\n  text-align: ", ";\n  width: auto;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  height: auto;\n  letter-spacing: ", "em;\n  line-height: ", ";\n  margin: 0;\n  text-align: ", ";\n  width: auto;\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (_a) {
+    var letterSpacing = _a.letterSpacing;
+    return letterSpacing;
+}, function (_a) {
+    var lineHeight = _a.lineHeight;
+    return lineHeight;
+}, function (_a) {
+    var textAlign = _a.textAlign;
+    return textAlign;
+}, function (_a) {
+    var fontFamilyName = _a.fontFamilyName;
+    return fontFamilyName && "font-family: " + fontFamilyName;
+}, function (_a) {
+    var fontWeight = _a.fontWeight;
+    return fontWeight && "font-weight: " + fontWeight;
+}, function (_a) {
+    var fontSize = _a.fontSize;
+    return fontSize && "font-size: " + fontSize + "px";
+}, function (_a) {
+    var textColor = _a.textColor;
+    return textColor && "color: " + textColor;
+});
+exports.default = Text;
+Text.displayName = 'Text';
+var templateObject_1;

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

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

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

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

@@ -6,7 +6,7 @@ declare const customChrome: {
     readonly noscrollbar: "noscrollbar";
     readonly transparent: "transparent";
 };
-declare type TwitterTimelinePropTypes = {
+export declare type TwitterTimelinePropTypes = {
     /**
      * 임베드할 트위터 유저의 id 값 입니다.
      */
@@ -51,19 +51,11 @@ declare type TwitterTimelinePropTypes = {
      * @types transparent: 위젯의 배경색을 제거합니다.
      */
     customChrome?: (keyof typeof customChrome)[];
-    /**
-     * 임베드할 트위터 타임라인 위젯의 너비를 결정합니다. 최소 너비 180픽셀, 최대 너비 520픽셀로 상위 요소의 너비에 맞게 자동으로 조정됩니다.
-     */
-    width?: number;
-    /**
-     * 임베드할 트위터 타임라인 위젯의 높이를 결정합니다.
-     */
-    height?: number;
     /**
      * 트위터 스크립트가 로드 되기 전 혹은 로드 실패시 보여지는 컴포넌트입니다.
      * a 태그 내부에 들어가기 때문에 로딩과는 다른 용도로 사용됩니다.
      */
-    fallback?: React.ReactNode;
+    fallback?: React.ReactNode | JSX.Element;
 };
 /**
  * 트위터의 Profile Timeline 임베드 컴포넌트입니다.
@@ -74,5 +66,5 @@ declare type TwitterTimelinePropTypes = {
  *
  * 트위터 표시 요구 약관: https://developer.twitter.com/en/developer-terms/display-requirements
  */
-declare function TwitterTimeline({ userId, tweetLimit, showReplies, theme, ariaPolite, dnt, customChrome, width, height, fallback }: TwitterTimelinePropTypes): JSX.Element;
+declare const TwitterTimeline: import("react").ForwardRefExoticComponent<TwitterTimelinePropTypes & import("react").RefAttributes<HTMLDivElement>>;
 export default TwitterTimeline;

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

@@ -29,24 +29,24 @@ var customChrome = {
  *
  * 트위터 표시 요구 약관: 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 TwitterTimeline = (0, react_1.forwardRef)(function (_a, ref) {
+    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, 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));
-}
+    function scriptLoader(scriptId, scriptUrl) {
+        var script = document.createElement('script');
+        script.async = true;
+        script.id = scriptId;
+        script.src = scriptUrl;
+        script.type = 'text/javascript';
+        script.onerror = function () {
+            // eslint-disable-next-line no-console
+            console.log('onerror >>>', userId);
+        };
+        document.head.appendChild(script);
+    }
+    scriptLoader(TWITTER_EMBED_TIMELINE_SCRIPT_ID, TWITTER_EMBED_TIMELINE_SCRIPT_SRC);
+    return ((0, jsx_runtime_1.jsx)("section", __assign({ className: "twitter-embed-container", ref: ref }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "twitter-embed" }, { children: (0, jsx_runtime_1.jsx)("a", __assign({ target: "_blank", 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(' '), href: "https://twitter.com/" + userId, rel: "noreferrer" }, { children: fallback }), void 0) }), void 0) }), void 0));
+});
 exports.default = TwitterTimeline;
+TwitterTimeline.displayName = 'TwitterTimeline';

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { TwitterTimelinePropTypes } from './TwitterTimeline';
+export declare type TwitterTimelineWrapperPropTypes = TwitterTimelinePropTypes & {
+    /**
+     * 임베드할 트위터 타임라인 위젯의 너비를 결정합니다. 최소 너비 180픽셀, 최대 너비 520픽셀로 상위 요소의 너비에 맞게 자동으로 조정됩니다.
+     */
+    width?: number;
+    /**
+     * 임베드할 트위터 타임라인 위젯의 높이를 결정합니다.
+     */
+    height?: number;
+};
+declare function TwitterTimelineRerender(args: TwitterTimelineWrapperPropTypes): JSX.Element;
+export default TwitterTimelineRerender;

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

@@ -0,0 +1,41 @@
+"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 __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 react_1 = require("react");
+var styled_components_1 = __importDefault(require("styled-components"));
+var TwitterTimeline_1 = __importDefault(require("./TwitterTimeline"));
+function TwitterTimelineRerender(args) {
+    var userId = args.userId, tweetLimit = args.tweetLimit, showReplies = args.showReplies, theme = args.theme, ariaPolite = args.ariaPolite, dnt = args.dnt, customChrome = args.customChrome, fallback = args.fallback, width = args.width, height = args.height;
+    var forceRenderKey = (0, react_1.useMemo)(function () {
+        return String(userId + tweetLimit + showReplies + theme + ariaPolite + dnt + customChrome + fallback);
+    }, [userId, tweetLimit, showReplies, theme, ariaPolite, dnt, customChrome, fallback]);
+    var widthInRange = width && width > 180 && width < 520 ? width : undefined;
+    return ((0, jsx_runtime_1.jsx)(S_TwitterTimelineWrapper, __assign({ className: "twitter-timeline-wrapper", "$width": widthInRange, "$height": height }, { children: (0, jsx_runtime_1.jsx)(TwitterTimeline_1.default, __assign({}, args), forceRenderKey) }), void 0));
+}
+var S_TwitterTimelineWrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-sizing: content-box;\n  height: ", ";\n  max-width: 520px;\n  min-width: 180px;\n  overflow: auto;\n  width: ", ";\n"], ["\n  box-sizing: content-box;\n  height: ", ";\n  max-width: 520px;\n  min-width: 180px;\n  overflow: auto;\n  width: ", ";\n"])), function (_a) {
+    var $height = _a.$height;
+    return ($height ? $height + "px" : '100%');
+}, function (_a) {
+    var $width = _a.$width;
+    return ($width ? $width + "px" : '100%');
+});
+exports.default = TwitterTimelineRerender;
+var templateObject_1;

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

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+export declare type ComponentBlockWrapperPropTypes = {
+    children?: React.ReactNode;
+    boxSizing?: 'border-box' | 'content-box';
+    width?: number;
+    height?: number;
+    alignVertical?: 'top' | 'center' | 'bottom';
+    alignHorizontal?: 'left' | 'center' | 'right';
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+    zIndex?: number;
+    borderType?: 'none' | 'solid' | 'dashed' | 'dotted';
+    borderSize?: number;
+    borderColor?: string;
+    borderRadius?: number;
+    backgroundType?: 'solid' | 'gradient';
+    backgroundColor?: string;
+    backgroundGradientType?: 'linear' | 'circular';
+    backgroundGradientStartColor?: string;
+    backgroundGradientStartPosition?: number;
+    backgroundGradientEndColor?: string;
+    backgroundGradientEndPosition?: number;
+    backgroundGradientDegree?: number;
+    shadowType?: 'outside' | 'inside';
+    shadowColor?: string;
+    shadowHorizontalDistance?: number;
+    shadowVerticalDistance?: number;
+    shadowBlur?: number;
+    shadowSpread?: number;
+    opacity?: number;
+};
+declare const Wrapper: import("react").ForwardRefExoticComponent<ComponentBlockWrapperPropTypes & import("react").RefAttributes<HTMLDivElement>>;
+export default Wrapper;

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

@@ -0,0 +1,141 @@
+"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;
+};
+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 });
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var styled_components_1 = __importStar(require("styled-components"));
+var Wrapper = (0, react_1.forwardRef)(function (_a, ref) {
+    var children = _a.children, args = __rest(_a, ["children"]);
+    return ((0, jsx_runtime_1.jsx)(S_Wrapper, __assign({ ref: ref }, args, { children: children }), void 0));
+});
+var ShadowStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  box-shadow: ", ";\n"], ["\n  box-shadow: ", ";\n"])), function (_a) {
+    var shadowType = _a.shadowType, shadowColor = _a.shadowColor, shadowHorizontalDistance = _a.shadowHorizontalDistance, shadowVerticalDistance = _a.shadowVerticalDistance, shadowBlur = _a.shadowBlur, shadowSpread = _a.shadowSpread;
+    var isInset = shadowType === 'inside';
+    return (isInset ? 'inset' : '') + " " + shadowHorizontalDistance + "px " + shadowVerticalDistance + "px " + shadowBlur + "px " + shadowSpread + "px " + shadowColor;
+});
+var S_Wrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: ", ";\n  border-radius: ", "px;\n  box-sizing: ", ";\n  display: flex;\n  height: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  width: ", "px;\n  z-index: ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", "\n"], ["\n  border: ", ";\n  border-radius: ", "px;\n  box-sizing: ", ";\n  display: flex;\n  height: ", "px;\n  opacity: ", ";\n  overflow: hidden;\n  padding-bottom: ", "px;\n  padding-left: ", "px;\n  padding-right: ", "px;\n  padding-top: ", "px;\n  width: ", "px;\n  z-index: ", ";\n\n  ", ";\n\n  ", ";\n\n  ", ";\n\n  ", "\n"])), function (_a) {
+    var _b = _a.borderSize, borderSize = _b === void 0 ? 0 : _b, _c = _a.borderType, borderType = _c === void 0 ? 'none' : _c, _d = _a.borderColor, borderColor = _d === void 0 ? '' : _d;
+    return borderSize + "px " + borderType + " " + borderColor;
+}, function (_a) {
+    var _b = _a.borderRadius, borderRadius = _b === void 0 ? 0 : _b;
+    return borderRadius;
+}, function (_a) {
+    var _b = _a.boxSizing, boxSizing = _b === void 0 ? 'content-box' : _b;
+    return boxSizing;
+}, function (_a) {
+    var _b = _a.height, height = _b === void 0 ? '100%' : _b;
+    return height;
+}, function (_a) {
+    var _b = _a.opacity, opacity = _b === void 0 ? 1 : _b;
+    return opacity;
+}, function (_a) {
+    var _b = _a.paddingBottom, paddingBottom = _b === void 0 ? 0 : _b;
+    return paddingBottom;
+}, function (_a) {
+    var _b = _a.paddingLeft, paddingLeft = _b === void 0 ? 0 : _b;
+    return paddingLeft;
+}, function (_a) {
+    var _b = _a.paddingRight, paddingRight = _b === void 0 ? 0 : _b;
+    return paddingRight;
+}, function (_a) {
+    var _b = _a.paddingTop, paddingTop = _b === void 0 ? 0 : _b;
+    return paddingTop;
+}, function (_a) {
+    var _b = _a.width, width = _b === void 0 ? '100%' : _b;
+    return width;
+}, function (_a) {
+    var _b = _a.zIndex, zIndex = _b === void 0 ? 0 : _b;
+    return zIndex;
+}, function (_a) {
+    var _b = _a.alignVertical, alignVertical = _b === void 0 ? 'top' : _b;
+    switch (alignVertical) {
+        case 'top':
+            return 'align-Items: flex-start';
+        case 'center':
+            return 'align-Items: center';
+        case 'bottom':
+            return 'align-Items: flex-end';
+        default:
+            return 'align-Items: flex-start';
+    }
+}, function (_a) {
+    var _b = _a.alignHorizontal, alignHorizontal = _b === void 0 ? 'left' : _b;
+    switch (alignHorizontal) {
+        case 'left':
+            return 'justify-content: flex-start';
+        case 'center':
+            return 'justify-content: center';
+        case 'right':
+            return 'justify-content: flex-end';
+        default:
+            return 'justify-content: flex-start';
+    }
+}, function (_a) {
+    var _b = _a.backgroundType, backgroundType = _b === void 0 ? 'solid' : _b;
+    switch (backgroundType) {
+        case 'solid':
+            return BackgroundSolidType;
+        case 'gradient':
+            return BackgroundGradientType;
+        default:
+            return BackgroundSolidType;
+    }
+}, ShadowStyle);
+var BackgroundSolidType = (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
+    var backgroundColor = _a.backgroundColor;
+    return (backgroundColor ? backgroundColor : 'none');
+});
+var BackgroundGradientType = (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: ", ";\n"], ["\n  background: ", ";\n"])), function (_a) {
+    var _b = _a.backgroundGradientType, backgroundGradientType = _b === void 0 ? 'linear' : _b, _c = _a.backgroundGradientStartColor, backgroundGradientStartColor = _c === void 0 ? 'white' : _c, _d = _a.backgroundGradientStartPosition, backgroundGradientStartPosition = _d === void 0 ? 0 : _d, _e = _a.backgroundGradientEndColor, backgroundGradientEndColor = _e === void 0 ? 'black' : _e, _f = _a.backgroundGradientEndPosition, backgroundGradientEndPosition = _f === void 0 ? 100 : _f, _g = _a.backgroundGradientDegree, backgroundGradientDegree = _g === void 0 ? 90 : _g;
+    var isRadial = backgroundGradientType === 'circular';
+    var gradientType = isRadial ? 'radial' : backgroundGradientType;
+    var degree = isRadial ? '' : backgroundGradientDegree + "deg,";
+    return gradientType + "-gradient(" + degree + " " + backgroundGradientStartColor + " " + backgroundGradientStartPosition + "%, " + backgroundGradientEndColor + " " + backgroundGradientEndPosition + "%)";
+});
+exports.default = Wrapper;
+Wrapper.displayName = 'Wrapper';
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Wrapper/constants.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentBlockWrapperPropTypes } from './Wrapper';
+export declare const WrapperDefaultOptions: ComponentBlockWrapperPropTypes;

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Wrapper/constants.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WrapperDefaultOptions = void 0;
+exports.WrapperDefaultOptions = {
+    width: 600,
+    height: 400,
+    alignHorizontal: 'center',
+    alignVertical: 'center',
+    paddingBottom: 20,
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 20,
+    zIndex: 0,
+    borderType: 'dotted',
+    borderSize: 5,
+    borderColor: 'dodgerblue',
+    borderRadius: 30,
+    backgroundType: 'gradient',
+    backgroundColor: 'gray',
+    backgroundGradientType: 'circular',
+    backgroundGradientStartColor: 'blue',
+    backgroundGradientStartPosition: 0,
+    backgroundGradientEndColor: 'lightblue',
+    backgroundGradientEndPosition: 100,
+    backgroundGradientDegree: 90,
+    shadowType: 'outside',
+    shadowColor: 'gray',
+    shadowHorizontalDistance: 15,
+    shadowVerticalDistance: 10,
+    shadowBlur: 3,
+    shadowSpread: 3,
+    opacity: 0.85
+};

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

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

package/dist/src/sub/DynamicLayout/components/ComponentBlocks/Wrapper/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.Wrapper = void 0;
+var Wrapper_1 = require("./Wrapper");
+Object.defineProperty(exports, "Wrapper", { enumerable: true, get: function () { return __importDefault(Wrapper_1).default; } });

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

@@ -1,3 +1,4 @@
-import { RichText } from './RichText';
+import { RichText, RichTextPropTypes } from './RichText';
+import { Text, TextPropTypes } from './Text';
 import { TwitterTimeline } from './TwitterTimeline';
-export { RichText, TwitterTimeline };
+export { RichText, RichTextPropTypes, Text, TextPropTypes, TwitterTimeline };

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

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TwitterTimeline = exports.RichText = void 0;
+exports.TwitterTimeline = exports.Text = exports.RichText = void 0;
 var RichText_1 = require("./RichText");
 Object.defineProperty(exports, "RichText", { enumerable: true, get: function () { return RichText_1.RichText; } });
+var Text_1 = require("./Text");
+Object.defineProperty(exports, "Text", { enumerable: true, get: function () { return Text_1.Text; } });
 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

@@ -27,7 +27,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var jsx_runtime_1 = require("react/jsx-runtime");
 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;
@@ -37,6 +36,9 @@ function EditModeSectionMatcher(_a) {
 exports.default = EditModeSectionMatcher;
 function Matcher(_a) {
     var props = __rest(_a, []);
+    if (props.type === 'CUSTOM') {
+        return (0, jsx_runtime_1.jsx)(sections_1.CustomSection, __assign({}, props), void 0);
+    }
     var schema = props.manifest.schema;
     switch (schema) {
         case 'BASE_INTRO':
@@ -53,8 +55,6 @@ function Matcher(_a) {
             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);
     }