pds-dev-kit-web-test 0.2.52 → 0.2.54

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

@@ -270,7 +270,7 @@ exports.pages0803PreviewSections = [
                             'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:HOVER': 16,
                             'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE': null,
                             'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE:HOVER': null,
-                            CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE: 'PRETENDARD',
+                            CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE: 'GOOGLE:Cherry Bomb One',
                             'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:HOVER': 'PRETENDARD',
                             'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE': null,
                             'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE:HOVER': null,

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js

@@ -30,6 +30,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
+var useGoogleFonts_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks/useGoogleFonts");
 var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils");
 var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
 var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
@@ -50,6 +51,8 @@ function Button(props) {
     var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
     var _f = (0, util_1.parseProperties)(props, device), propsStyle = _f.style, propsHoverStyle = _f.hoverStyle, _g = _f.layout, paddingLeft = _g.paddingLeft, paddingRight = _g.paddingRight, paddingTop = _g.paddingTop, paddingBottom = _g.paddingBottom, layoutStyle = __rest(_g, ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom"]), effect = _f.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
+    var googleFonts = (0, useGoogleFonts_1.getGoogleFontsFromBtnCB)(props.CB_STYLE_PROP_BTNTEXT, device === 'MOBILE');
+    (0, useGoogleFonts_1.useGoogleFonts)({ fonts: googleFonts });
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';
     }

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js

@@ -19,14 +19,14 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
 var hooks_1 = require("../../../../hooks");
+var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts");
+var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
 var textUtil_1 = require("../../../../newUtils/textUtil");
 var util_1 = require("../../../../util");
 var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
 var S_CB_Box_1 = require("../components/S_CB_Box");
 var S_HiddenCover_1 = require("../components/S_HiddenCover");
 var useCLINK_1 = __importDefault(require("../hooks/useCLINK"));
-var getGoogleFonts_1 = __importDefault(require("./getGoogleFonts"));
-var useGoogleFonts_1 = __importDefault(require("./useGoogleFonts"));
 function Text(props) {
     var _a = (0, react_1.useContext)(DynamicLayout_1.dynamicLayoutContext), device = _a.device, mode = _a.mode;
     var _b = props.CB_CONTENT_PROP_CLINK, CB_CONTENT_PROP_CLINK_SPEC_SRC = _b.CB_CONTENT_PROP_CLINK_SPEC_SRC, CB_CONTENT_PROP_CLINK_SPEC_TYPE = _b.CB_CONTENT_PROP_CLINK_SPEC_TYPE, CB_CONTENT_PROP_CLINK_SPEC_NEWTAB = _b.CB_CONTENT_PROP_CLINK_SPEC_NEWTAB, CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC = _b.CB_CONTENT_PROP_CLINK_SPEC_INTERNALSRC, CB_EFFECT_PROP_ENTANIM = props.CB_EFFECT_PROP_ENTANIM;
@@ -39,7 +39,7 @@ function Text(props) {
     var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
     var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
     var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
-    var googleFonts = (0, getGoogleFonts_1.default)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
+    var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextCB)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
     (0, useGoogleFonts_1.default)({ fonts: googleFonts });
     if (mode === 'EDIT') {
         propsStyle.visibility = 'visible';

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/getGoogleFonts.d.ts

@@ -0,0 +1,4 @@
+import type { CB_BTNTEXT_STYLE_PROPS } from '../../components/ComponentBlock/componentBlocks/Button/btnTypes';
+import type { CB_STYLE_PROP_TEXT_SPECS } from '../../components/ComponentBlock/componentBlocks/Text/types';
+export declare function getGoogleFontsFromTextCB(props: CB_STYLE_PROP_TEXT_SPECS, isMobile: boolean): string[];
+export declare function getGoogleFontsFromBtnCB(props: CB_BTNTEXT_STYLE_PROPS, isMobile: boolean): string[];

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/getGoogleFonts.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getGoogleFontsFromBtnCB = exports.getGoogleFontsFromTextCB = void 0;
+function getGoogleFontsFromTextCB(props, isMobile) {
+    var typeface = props.CB_STYLE_PROP_TEXT_SPEC_TYPEFACE;
+    var typefaceHover = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER'];
+    var typefaceMobile = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE'];
+    var typefaceMobileHover = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER'];
+    if (isMobile) {
+        return [typefaceMobile, typefaceMobileHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
+    }
+    return [typeface, typefaceHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
+}
+exports.getGoogleFontsFromTextCB = getGoogleFontsFromTextCB;
+function getGoogleFontsFromBtnCB(props, isMobile) {
+    var typeface = props.CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE;
+    var typefaceHover = props['CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:HOVER'];
+    var typefaceMobile = props['CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE'];
+    var typefaceMobileHover = props['CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE:HOVER'];
+    if (isMobile) {
+        return [typefaceMobile, typefaceMobileHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
+    }
+    return [typeface, typefaceHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
+}
+exports.getGoogleFontsFromBtnCB = getGoogleFontsFromBtnCB;

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/index.d.ts

@@ -0,0 +1,2 @@
+export { getGoogleFontsFromBtnCB, getGoogleFontsFromTextCB } from './getGoogleFonts';
+export { default as useGoogleFonts } from './useGoogleFonts';

package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/index.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useGoogleFonts = exports.getGoogleFontsFromTextCB = exports.getGoogleFontsFromBtnCB = void 0;
+var getGoogleFonts_1 = require("./getGoogleFonts");
+Object.defineProperty(exports, "getGoogleFontsFromBtnCB", { enumerable: true, get: function () { return getGoogleFonts_1.getGoogleFontsFromBtnCB; } });
+Object.defineProperty(exports, "getGoogleFontsFromTextCB", { enumerable: true, get: function () { return getGoogleFonts_1.getGoogleFontsFromTextCB; } });
+var useGoogleFonts_1 = require("./useGoogleFonts");
+Object.defineProperty(exports, "useGoogleFonts", { enumerable: true, get: function () { return __importDefault(useGoogleFonts_1).default; } });

package/dist/src/sub/DynamicLayout/sections/CustomSection/{components/ComponentBlock/componentBlocks/Text → hooks/useGoogleFonts}/useGoogleFonts.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var callGoogleFontCSSAndApply_1 = __importDefault(require("../../../../../../../GoogleFontkit/utils/callGoogleFontCSSAndApply"));
+var callGoogleFontCSSAndApply_1 = __importDefault(require("../../../../../GoogleFontkit/utils/callGoogleFontCSSAndApply"));
 function useGoogleFonts(_a) {
     var fonts = _a.fonts;
     (0, react_1.useEffect)(function () {

package/dist/src/sub/GoogleFontkit/headless/GoogleFontsList.js

@@ -50,6 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable no-console */
 var react_1 = require("react");
 var getGoogleWebFonts_1 = __importDefault(require("../api/getGoogleWebFonts"));
 var getFontId_1 = __importDefault(require("../utils/getFontId"));
@@ -96,21 +97,26 @@ function GoogleFontsList(_a) {
     (0, react_1.useEffect)(function () {
         function getFilteredFontsAsync() {
             return new Promise(function (resolve) {
-                var filteredFonts = fonts.filter(function (font) {
-                    var categories = filterOptions.categories, searchQuery = filterOptions.searchQuery, subsets = filterOptions.subsets;
-                    var isSelectedCategory = categories.includes(font.category);
-                    var query = searchQuery.toLocaleLowerCase().trim();
-                    var matchSearchQuery = font.family.toLocaleLowerCase().includes(query);
-                    if (!matchSearchQuery) {
+                console.log('filter start (1)');
+                setTimeout(function () {
+                    var filteredFonts = fonts.filter(function (font) {
+                        var categories = filterOptions.categories, searchQuery = filterOptions.searchQuery, subsets = filterOptions.subsets;
+                        var isSelectedCategory = categories.includes(font.category);
+                        var query = searchQuery.toLocaleLowerCase().trim();
+                        var matchSearchQuery = font.family.toLocaleLowerCase().includes(query);
+                        if (!matchSearchQuery) {
+                            return false;
+                        }
+                        var hasSomeScript = subsets.length > 0 ? font.subsets.some(function (subset) { return subsets.includes(subset); }) : true;
+                        if (isSelectedCategory && hasSomeScript) {
+                            return true;
+                        }
                         return false;
-                    }
-                    var hasSomeScript = subsets.length > 0 ? font.subsets.some(function (subset) { return subsets.includes(subset); }) : true;
-                    if (isSelectedCategory && hasSomeScript) {
-                        return true;
-                    }
-                    return false;
-                });
-                resolve(filteredFonts);
+                    });
+                    resolve(filteredFonts);
+                    console.log('filter resolved (3)');
+                }, 0);
+                console.log('after filter (2)');
             });
         }
         setIsLoading(true);

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

@@ -36,7 +36,7 @@ export type FilterOptionHandlerArgType = {
     name: 'subsets';
     value: Subset[];
 };
-export type ChangeFilterOptionHandler = (arg: FilterOptionHandlerArgType) => void;
+export type ChangeFilterOptionHandler = (arg: FilterOptionHandlerArgType, setLoading?: boolean) => void;
 export type FilterOptionType = {
     searchQuery: string;
     categories: Category[];

package/dist/src/sub/GoogleFontkit/utils/callGoogleFontCSSAndApply.js

@@ -57,7 +57,7 @@ function callGoogleFontCSSAndApply(fontFamily) {
                     }
                     (0, createStyleSheet_1.default)(fontId, false);
                     return [4 /*yield*/, (0, getGoogleFontCss_1.default)({
-                            family: "".concat(fontFamily, ":wght@100;200;300;500;700;800;900"),
+                            family: "".concat(fontFamily, ":wght@100;200;300;400;500;700;800;900"),
                             'font-display': 'swap'
                         })];
                 case 1:

package/package.json

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

package/release-note.md

@@ -1,6 +1,6 @@
 # pds-dev-kit-web-test Release Notes
-## [v0.2.51]
+## [v0.2.54]
 ## 기준 pds-dev-kit-web 버전 @2.2.10
 ### sub
-    * GoogleFontKit
-        * DL에 API key제거
+    * DynamicLayout
+        * Button CB에도 google font적용

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/getGoogleFonts.d.ts

@@ -1,2 +0,0 @@
-import type { CB_STYLE_PROP_TEXT_SPECS } from './types';
-export default function getGoogleFonts(props: CB_STYLE_PROP_TEXT_SPECS, isMobile: boolean): string[];

package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/getGoogleFonts.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-function getGoogleFonts(props, isMobile) {
-    var typeface = props.CB_STYLE_PROP_TEXT_SPEC_TYPEFACE;
-    var typefaceHover = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER'];
-    var typefaceMobile = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE'];
-    var typefaceMobileHover = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER'];
-    if (isMobile) {
-        return [typefaceMobile, typefaceMobileHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
-    }
-    return [typeface, typefaceHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
-}
-exports.default = getGoogleFonts;