pds-dev-kit-web 2.2.15 → 2.2.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/src/sub/DynamicLayout/mock_samplePage.js +1 -1
  2. package/dist/src/sub/DynamicLayout/pagesPreviewMock.d.ts +1 -1
  3. package/dist/src/sub/DynamicLayout/pagesPreviewMock.js +4 -4
  4. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Button/Button.js +3 -0
  5. package/dist/src/sub/DynamicLayout/sections/CustomSection/components/ComponentBlock/componentBlocks/Text/Text.js +4 -0
  6. package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/getGoogleFonts.d.ts +4 -0
  7. package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/getGoogleFonts.js +25 -0
  8. package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/index.d.ts +2 -0
  9. package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/index.js +11 -0
  10. package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/useGoogleFonts.d.ts +4 -0
  11. package/dist/src/sub/DynamicLayout/sections/CustomSection/hooks/useGoogleFonts/useGoogleFonts.js +17 -0
  12. package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.d.ts +3 -2
  13. package/dist/src/sub/DynamicLayout/sections/CustomSection/newUtils/textUtil.js +5 -2
  14. package/dist/src/sub/GoogleFontkit/GoogleFontApplyExample.d.ts +3 -0
  15. package/dist/src/sub/GoogleFontkit/GoogleFontApplyExample.js +92 -0
  16. package/dist/src/sub/GoogleFontkit/GoogleFontsListExample.d.ts +3 -0
  17. package/dist/src/sub/GoogleFontkit/GoogleFontsListExample.js +57 -0
  18. package/dist/src/sub/GoogleFontkit/api/getGoogleFontCss.d.ts +10 -0
  19. package/dist/src/sub/GoogleFontkit/api/getGoogleFontCss.js +53 -0
  20. package/dist/src/sub/GoogleFontkit/api/getGoogleFontDefaultText.d.ts +2 -0
  21. package/dist/src/sub/GoogleFontkit/api/getGoogleFontDefaultText.js +55 -0
  22. package/dist/src/sub/GoogleFontkit/api/getGoogleWebFonts.d.ts +10 -0
  23. package/dist/src/sub/GoogleFontkit/api/getGoogleWebFonts.js +53 -0
  24. package/dist/src/sub/GoogleFontkit/constants.d.ts +7 -0
  25. package/dist/src/sub/GoogleFontkit/constants.js +44 -0
  26. package/dist/src/sub/GoogleFontkit/headless/GoogleFontItem.d.ts +15 -0
  27. package/dist/src/sub/GoogleFontkit/headless/GoogleFontItem.js +126 -0
  28. package/dist/src/sub/GoogleFontkit/headless/GoogleFontsList.d.ts +17 -0
  29. package/dist/src/sub/GoogleFontkit/headless/GoogleFontsList.js +144 -0
  30. package/dist/src/sub/GoogleFontkit/hooks/useDebounce.d.ts +1 -0
  31. package/dist/src/sub/GoogleFontkit/hooks/useDebounce.js +14 -0
  32. package/dist/src/sub/GoogleFontkit/hooks/useIntersectionObserver.d.ts +6 -0
  33. package/dist/src/sub/GoogleFontkit/hooks/useIntersectionObserver.js +29 -0
  34. package/dist/src/sub/GoogleFontkit/index.d.ts +7 -0
  35. package/dist/src/sub/GoogleFontkit/index.js +32 -0
  36. package/dist/src/sub/GoogleFontkit/types.d.ts +44 -0
  37. package/dist/src/sub/GoogleFontkit/types.js +14 -0
  38. package/dist/src/sub/GoogleFontkit/utils/applyActiveFont.d.ts +2 -0
  39. package/dist/src/sub/GoogleFontkit/utils/applyActiveFont.js +12 -0
  40. package/dist/src/sub/GoogleFontkit/utils/callGoogleFontCSSAndApply.d.ts +2 -0
  41. package/dist/src/sub/GoogleFontkit/utils/callGoogleFontCSSAndApply.js +72 -0
  42. package/dist/src/sub/GoogleFontkit/utils/createStyleSheet.d.ts +1 -0
  43. package/dist/src/sub/GoogleFontkit/utils/createStyleSheet.js +10 -0
  44. package/dist/src/sub/GoogleFontkit/utils/extractFontStyles.d.ts +1 -0
  45. package/dist/src/sub/GoogleFontkit/utils/extractFontStyles.js +22 -0
  46. package/dist/src/sub/GoogleFontkit/utils/fillStyleSheet.d.ts +1 -0
  47. package/dist/src/sub/GoogleFontkit/utils/fillStyleSheet.js +13 -0
  48. package/dist/src/sub/GoogleFontkit/utils/getActiveFontStylesheet.d.ts +1 -0
  49. package/dist/src/sub/GoogleFontkit/utils/getActiveFontStylesheet.js +13 -0
  50. package/dist/src/sub/GoogleFontkit/utils/getFontId.d.ts +1 -0
  51. package/dist/src/sub/GoogleFontkit/utils/getFontId.js +6 -0
  52. package/dist/src/sub/GoogleFontkit/utils/getMatches.d.ts +1 -0
  53. package/dist/src/sub/GoogleFontkit/utils/getMatches.js +14 -0
  54. package/dist/src/sub/GoogleFontkit/utils/isStyleSheetExists.d.ts +1 -0
  55. package/dist/src/sub/GoogleFontkit/utils/isStyleSheetExists.js +12 -0
  56. package/dist/src/sub/GoogleFontkit/utils/parseFontVariants.d.ts +4 -0
  57. package/dist/src/sub/GoogleFontkit/utils/parseFontVariants.js +18 -0
  58. package/dist/src/sub/GoogleFontkit/utils/setStyleSheetType.d.ts +1 -0
  59. package/dist/src/sub/GoogleFontkit/utils/setStyleSheetType.js +15 -0
  60. package/package.json +1 -1
  61. package/release-note.md +4 -15
@@ -2810,7 +2810,7 @@ var realMock = [
2810
2810
  CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
2811
2811
  },
2812
2812
  CB_CONTENT_PROP_TEXT: {
2813
- CB_CONTENT_PROP_TEXT_SPEC_TEXT: 'New Text'
2813
+ CB_CONTENT_PROP_TEXT_SPEC_TEXT: 'New Text2222'
2814
2814
  },
2815
2815
  CB_CONTENT_PROP_VISIBILITY: {
2816
2816
  CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
@@ -98,7 +98,7 @@ export declare const pages0803PreviewSections: {
98
98
  'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE': null;
99
99
  'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER': null;
100
100
  CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: string;
101
- 'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': null;
101
+ 'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': string;
102
102
  'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE': null;
103
103
  'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER': null;
104
104
  CB_STYLE_PROP_TEXT_SPEC_VERTICAL: string;
@@ -26,7 +26,7 @@ exports.pages0803PreviewSections = [
26
26
  CB_CONTENT_PROP_HOVER_SPEC_MUSE: true
27
27
  },
28
28
  CB_CONTENT_PROP_TEXT: {
29
- CB_CONTENT_PROP_TEXT_SPEC_TEXT: 'New Text'
29
+ CB_CONTENT_PROP_TEXT_SPEC_TEXT: 'New Text3333'
30
30
  },
31
31
  CB_CONTENT_PROP_VISIBILITY: {
32
32
  CB_CONTENT_PROP_VISIBILITY_SPEC_DESKTOP: true,
@@ -102,8 +102,8 @@ exports.pages0803PreviewSections = [
102
102
  'CB_STYLE_PROP_TEXT_SPEC_SIZE:HOVER': null,
103
103
  'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE': null,
104
104
  'CB_STYLE_PROP_TEXT_SPEC_SIZE:MOBILE:HOVER': null,
105
- CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: 'PRETENDARD',
106
- 'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': null,
105
+ CB_STYLE_PROP_TEXT_SPEC_TYPEFACE: 'GOOGLE:Dokdo',
106
+ 'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER': 'GOOGLE:Lobster',
107
107
  'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE': null,
108
108
  'CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER': null,
109
109
  CB_STYLE_PROP_TEXT_SPEC_VERTICAL: 'MIDDLE',
@@ -270,7 +270,7 @@ exports.pages0803PreviewSections = [
270
270
  'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:HOVER': 16,
271
271
  'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE': null,
272
272
  'CB_STYLE_PROP_BTNTEXT_SPEC_SIZE:MOBILE:HOVER': null,
273
- CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE: 'PRETENDARD',
273
+ CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE: 'GOOGLE:Cherry Bomb One',
274
274
  'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:HOVER': 'PRETENDARD',
275
275
  'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE': null,
276
276
  'CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE:HOVER': null,
@@ -30,6 +30,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
30
30
  var react_1 = require("react");
31
31
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
32
32
  var hooks_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks");
33
+ var useGoogleFonts_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/hooks/useGoogleFonts");
33
34
  var newUtils_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils");
34
35
  var colorUtil_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/newUtils/colorUtil");
35
36
  var util_1 = require("../../../../../../../DynamicLayout/sections/CustomSection/util");
@@ -50,6 +51,8 @@ function Button(props) {
50
51
  var _e = getBTNColorStyles(CB_STYLE_PROP_BTNCOLOR, device), btnColorStyle = _e.style, btnColorHoverStyle = _e.hoverStyle;
51
52
  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;
52
53
  var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
54
+ var googleFonts = (0, useGoogleFonts_1.getGoogleFontsFromBtnCB)(props.CB_STYLE_PROP_BTNTEXT, device === 'MOBILE');
55
+ (0, useGoogleFonts_1.useGoogleFonts)({ fonts: googleFonts });
53
56
  if (mode === 'EDIT') {
54
57
  propsStyle.visibility = 'visible';
55
58
  }
@@ -19,6 +19,8 @@ var jsx_runtime_1 = require("react/jsx-runtime");
19
19
  var react_1 = require("react");
20
20
  var DynamicLayout_1 = require("../../../../../../../DynamicLayout");
21
21
  var hooks_1 = require("../../../../hooks");
22
+ var getGoogleFonts_1 = require("../../../../hooks/useGoogleFonts/getGoogleFonts");
23
+ var useGoogleFonts_1 = __importDefault(require("../../../../hooks/useGoogleFonts/useGoogleFonts"));
22
24
  var textUtil_1 = require("../../../../newUtils/textUtil");
23
25
  var util_1 = require("../../../../util");
24
26
  var S_CB_AnimationObserverBox_1 = require("../components/S_CB_AnimationObserverBox");
@@ -37,6 +39,8 @@ function Text(props) {
37
39
  var _d = getTextStyles(props.CB_STYLE_PROP_TEXT, device), textStyle = _d.style, textHoverStyle = _d.hoverStyle;
38
40
  var _e = (0, util_1.parseProperties)(props, device), propsStyle = _e.style, propsHoverStyle = _e.hoverStyle, layoutStyle = _e.layout, effect = _e.effect;
39
41
  var isEditModeAndHidden = propsStyle.visibility === 'hidden' && mode === 'EDIT';
42
+ var googleFonts = (0, getGoogleFonts_1.getGoogleFontsFromTextCB)(props.CB_STYLE_PROP_TEXT, device === 'MOBILE');
43
+ (0, useGoogleFonts_1.default)({ fonts: googleFonts });
40
44
  if (mode === 'EDIT') {
41
45
  propsStyle.visibility = 'visible';
42
46
  }
@@ -0,0 +1,4 @@
1
+ import type { CB_BTNTEXT_STYLE_PROPS } from '../../components/ComponentBlock/componentBlocks/Button/btnTypes';
2
+ import type { CB_STYLE_PROP_TEXT_SPECS } from '../../components/ComponentBlock/componentBlocks/Text/types';
3
+ export declare function getGoogleFontsFromTextCB(props: CB_STYLE_PROP_TEXT_SPECS, isMobile: boolean): string[];
4
+ export declare function getGoogleFontsFromBtnCB(props: CB_BTNTEXT_STYLE_PROPS, isMobile: boolean): string[];
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.getGoogleFontsFromBtnCB = exports.getGoogleFontsFromTextCB = void 0;
4
+ function getGoogleFontsFromTextCB(props, isMobile) {
5
+ var typeface = props.CB_STYLE_PROP_TEXT_SPEC_TYPEFACE;
6
+ var typefaceHover = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:HOVER'];
7
+ var typefaceMobile = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE'];
8
+ var typefaceMobileHover = props['CB_STYLE_PROP_TEXT_SPEC_TYPEFACE:MOBILE:HOVER'];
9
+ if (isMobile) {
10
+ return [typefaceMobile, typefaceMobileHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
11
+ }
12
+ return [typeface, typefaceHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
13
+ }
14
+ exports.getGoogleFontsFromTextCB = getGoogleFontsFromTextCB;
15
+ function getGoogleFontsFromBtnCB(props, isMobile) {
16
+ var typeface = props.CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE;
17
+ var typefaceHover = props['CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:HOVER'];
18
+ var typefaceMobile = props['CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE'];
19
+ var typefaceMobileHover = props['CB_STYLE_PROP_BTNTEXT_SPEC_TYPEFACE:MOBILE:HOVER'];
20
+ if (isMobile) {
21
+ return [typefaceMobile, typefaceMobileHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
22
+ }
23
+ return [typeface, typefaceHover].filter(function (each) { return each && each.startsWith('GOOGLE:'); });
24
+ }
25
+ exports.getGoogleFontsFromBtnCB = getGoogleFontsFromBtnCB;
@@ -0,0 +1,2 @@
1
+ export { getGoogleFontsFromBtnCB, getGoogleFontsFromTextCB } from './getGoogleFonts';
2
+ export { default as useGoogleFonts } from './useGoogleFonts';
@@ -0,0 +1,11 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.useGoogleFonts = exports.getGoogleFontsFromTextCB = exports.getGoogleFontsFromBtnCB = void 0;
7
+ var getGoogleFonts_1 = require("./getGoogleFonts");
8
+ Object.defineProperty(exports, "getGoogleFontsFromBtnCB", { enumerable: true, get: function () { return getGoogleFonts_1.getGoogleFontsFromBtnCB; } });
9
+ Object.defineProperty(exports, "getGoogleFontsFromTextCB", { enumerable: true, get: function () { return getGoogleFonts_1.getGoogleFontsFromTextCB; } });
10
+ var useGoogleFonts_1 = require("./useGoogleFonts");
11
+ Object.defineProperty(exports, "useGoogleFonts", { enumerable: true, get: function () { return __importDefault(useGoogleFonts_1).default; } });
@@ -0,0 +1,4 @@
1
+ declare function useGoogleFonts({ fonts }: {
2
+ fonts: string[];
3
+ }): void;
4
+ export default useGoogleFonts;
@@ -0,0 +1,17 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ var react_1 = require("react");
7
+ var callGoogleFontCSSAndApply_1 = __importDefault(require("../../../../../GoogleFontkit/utils/callGoogleFontCSSAndApply"));
8
+ function useGoogleFonts(_a) {
9
+ var fonts = _a.fonts;
10
+ (0, react_1.useEffect)(function () {
11
+ fonts.forEach(function (fontFamily) {
12
+ var parsedFontFamily = fontFamily.substring(7);
13
+ (0, callGoogleFontCSSAndApply_1.default)(parsedFontFamily);
14
+ });
15
+ }, [fonts]);
16
+ }
17
+ exports.default = useGoogleFonts;
@@ -1,7 +1,8 @@
1
1
  import type { Device } from '../util/types';
2
+ import type { CSSProperties } from 'styled-components';
2
3
  export declare function parseStyleTextToCSSProp<T>({ availableSpecCodes, props, propKey, device }: ParseStyleTextProps<T>): {
3
- style: {};
4
- hoverStyle: {};
4
+ style: CSSProperties;
5
+ hoverStyle: CSSProperties;
5
6
  };
6
7
  type ParseStyleTextProps<T> = {
7
8
  availableSpecCodes: Array<keyof T>;
@@ -173,8 +173,11 @@ function getFontName(value) {
173
173
  return 'serif';
174
174
  case 'PRETENDARD':
175
175
  return 'Pretendard JP, sans-serif';
176
- default:
177
- return '';
176
+ default: {
177
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
178
+ var _a = value.split(':'), _1 = _a[0], font = _a[1];
179
+ return "".concat(font);
180
+ }
178
181
  }
179
182
  }
180
183
  function getHorizontalPositionValue(value) {
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare function GoogleFontApplyExample(): JSX.Element;
3
+ export default GoogleFontApplyExample;
@@ -0,0 +1,92 @@
1
+ "use strict";
2
+ var __assign = (this && this.__assign) || function () {
3
+ __assign = Object.assign || function(t) {
4
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
5
+ s = arguments[i];
6
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
7
+ t[p] = s[p];
8
+ }
9
+ return t;
10
+ };
11
+ return __assign.apply(this, arguments);
12
+ };
13
+ var __importDefault = (this && this.__importDefault) || function (mod) {
14
+ return (mod && mod.__esModule) ? mod : { "default": mod };
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ var jsx_runtime_1 = require("react/jsx-runtime");
18
+ var react_1 = require("react");
19
+ var getGoogleFontDefaultText_1 = __importDefault(require("./api/getGoogleFontDefaultText"));
20
+ var callGoogleFontCSSAndApply_1 = __importDefault(require("./utils/callGoogleFontCSSAndApply"));
21
+ function TextCB(_a) {
22
+ var text = _a.text, font = _a.font;
23
+ var _b = (0, react_1.useState)(text), defaultText = _b[0], setDefaultText = _b[1];
24
+ (0, react_1.useEffect)(function () {
25
+ (0, callGoogleFontCSSAndApply_1.default)(font);
26
+ (0, getGoogleFontDefaultText_1.default)(font).then(function (data) {
27
+ setDefaultText(data.sampleText.tester);
28
+ });
29
+ }, [font]);
30
+ return (0, jsx_runtime_1.jsx)("div", __assign({ style: { fontFamily: font } }, { children: defaultText }));
31
+ }
32
+ function GoogleFontApplyExample() {
33
+ var texts = [
34
+ {
35
+ font: 'Dokdo',
36
+ text: 'Whereas disregard and contempt for human rights have resulted'
37
+ },
38
+ {
39
+ font: 'Open Sans',
40
+ text: 'Whereas disregard and contempt for human rights have resulted'
41
+ },
42
+ {
43
+ font: 'Poppins',
44
+ text: 'Whereas disregard and contempt for human rights have resulted'
45
+ },
46
+ {
47
+ font: 'Dokdo',
48
+ text: 'Whereas disregard and contempt for human rights have resulted'
49
+ },
50
+ {
51
+ font: 'Lato',
52
+ text: 'Whereas disregard and contempt for human rights have resulted'
53
+ },
54
+ {
55
+ font: 'Dokdo',
56
+ text: 'Whereas disregard and contempt for human rights have resulted'
57
+ },
58
+ {
59
+ font: 'Dokdo',
60
+ text: 'Whereas disregard and contempt for human rights have resulted'
61
+ },
62
+ {
63
+ font: 'Caveat',
64
+ text: 'Whereas disregard and contempt for human rights have resulted'
65
+ },
66
+ {
67
+ font: 'Dokdo',
68
+ text: 'Whereas disregard and contempt for human rights have resulted'
69
+ },
70
+ {
71
+ font: 'Material Icons Sharp',
72
+ text: 'Whereas disregard and contempt for human rights have resulted'
73
+ },
74
+ {
75
+ font: 'Material Symbols Rounded',
76
+ text: 'Whereas disregard and contempt for human rights have resulted'
77
+ },
78
+ {
79
+ font: 'Orbitron',
80
+ text: 'Whereas disregard and contempt for human rights have resulted'
81
+ },
82
+ {
83
+ font: 'Noto Color Emoji',
84
+ text: 'a'
85
+ },
86
+ { font: 'Noto Sans KR', test: '노토산스 한국어' },
87
+ { font: 'Noto Sans JP', test: '노토산스 일본어' },
88
+ { font: 'Noto Sans NKo Unjoined', text: '노토산스 외국어' }
89
+ ];
90
+ return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: texts.map(function (group) { return ((0, jsx_runtime_1.jsx)(TextCB, { text: group.text, font: group.font }, group.font)); }) }));
91
+ }
92
+ exports.default = GoogleFontApplyExample;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ declare function GoogleFontsListExample(): JSX.Element;
3
+ export default GoogleFontsListExample;
@@ -0,0 +1,57 @@
1
+ "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __assign = (this && this.__assign) || function () {
7
+ __assign = Object.assign || function(t) {
8
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
9
+ s = arguments[i];
10
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
11
+ t[p] = s[p];
12
+ }
13
+ return t;
14
+ };
15
+ return __assign.apply(this, arguments);
16
+ };
17
+ var __importDefault = (this && this.__importDefault) || function (mod) {
18
+ return (mod && mod.__esModule) ? mod : { "default": mod };
19
+ };
20
+ Object.defineProperty(exports, "__esModule", { value: true });
21
+ var jsx_runtime_1 = require("react/jsx-runtime");
22
+ var styled_components_1 = __importDefault(require("styled-components"));
23
+ var constants_1 = require("./constants");
24
+ var GoogleFontItem_1 = __importDefault(require("./headless/GoogleFontItem"));
25
+ var GoogleFontsList_1 = __importDefault(require("./headless/GoogleFontsList"));
26
+ var GOOGLE_FONT_API_KEY = '문의바람';
27
+ function GoogleFontsListExample() {
28
+ return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(GoogleFontsList_1.default, __assign({ apiKey: GOOGLE_FONT_API_KEY, sort: "trending" }, { children: function (_a) {
29
+ var isLoading = _a.isLoading, filteredFonts = _a.filteredFonts, filterOptions = _a.filterOptions, changeSort = _a.changeSort, changeFilterOption = _a.changeFilterOption;
30
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(SFilters, { children: [(0, jsx_runtime_1.jsx)("button", __assign({ type: "button", onClick: function () { return changeSort('date'); } }, { children: "change sort" })), (0, jsx_runtime_1.jsx)("input", { type: "text", onChange: function (e) {
31
+ return changeFilterOption({
32
+ name: 'searchQuery',
33
+ value: e.target.value
34
+ });
35
+ } }), (0, jsx_runtime_1.jsx)("div", __assign({ style: { backgroundColor: 'yellow' } }, { children: constants_1.SUBSETS.map(function (eachSubset) {
36
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: eachSubset }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: eachSubset, value: eachSubset, checked: filterOptions.subsets.includes(eachSubset), onClick: function () {
37
+ return changeFilterOption({
38
+ name: 'subsets',
39
+ value: [eachSubset]
40
+ });
41
+ } }, eachSubset)] }));
42
+ }) })), (0, jsx_runtime_1.jsx)("div", __assign({ style: { backgroundColor: 'red' } }, { children: constants_1.CATEGORIES.map(function (category) {
43
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { children: category }), (0, jsx_runtime_1.jsx)("input", { type: "checkbox", id: category, value: category, checked: filterOptions.categories.includes(category), onClick: function () {
44
+ return changeFilterOption({
45
+ name: 'categories',
46
+ value: [category]
47
+ });
48
+ } }, category)] }));
49
+ }) }))] }), isLoading && 'isLoading', filteredFonts.map(function (font) { return ((0, jsx_runtime_1.jsx)(GoogleFontItem_1.default, __assign({ font: font, fetchDefaultText: false }, { children: function (_a) {
50
+ var isFontFamilyLoading = _a.isLoading, ref = _a.ref;
51
+ return ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: ref }, { children: [isFontFamilyLoading && (0, jsx_runtime_1.jsx)("div", { children: "loading.." }), (0, jsx_runtime_1.jsx)("div", __assign({ style: { fontFamily: font.family } }, { children: font.family }))] })));
52
+ } }), font.id)); })] }));
53
+ } })) }));
54
+ }
55
+ var SFilters = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid black;\n"], ["\n border: 1px solid black;\n"])));
56
+ exports.default = GoogleFontsListExample;
57
+ var templateObject_1;
@@ -0,0 +1,10 @@
1
+ type Props = {
2
+ family?: string;
3
+ subset?: string;
4
+ text?: string;
5
+ effect?: string;
6
+ 'font-display'?: string;
7
+ wght?: string;
8
+ };
9
+ declare function getGoogleFontCss(searchParamsObj: Props): Promise<string>;
10
+ export default getGoogleFontCss;
@@ -0,0 +1,53 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ var __generator = (this && this.__generator) || function (thisArg, body) {
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
+ function verb(n) { return function (v) { return step([n, v]); }; }
15
+ function step(op) {
16
+ if (f) throw new TypeError("Generator is already executing.");
17
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
18
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
19
+ if (y = 0, t) op = [op[0] & 2, t.value];
20
+ switch (op[0]) {
21
+ case 0: case 1: t = op; break;
22
+ case 4: _.label++; return { value: op[1], done: false };
23
+ case 5: _.label++; y = op[1]; op = [0]; continue;
24
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
+ default:
26
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
+ if (t[2]) _.ops.pop();
31
+ _.trys.pop(); continue;
32
+ }
33
+ op = body.call(thisArg, _);
34
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
+ }
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ var GOOGLE_FONTS_CSS_BASE_URL = 'https://fonts.googleapis.com/css2';
40
+ function getGoogleFontCss(searchParamsObj) {
41
+ return __awaiter(this, void 0, void 0, function () {
42
+ var url;
43
+ return __generator(this, function (_a) {
44
+ url = new URL(GOOGLE_FONTS_CSS_BASE_URL);
45
+ Object.entries(searchParamsObj).forEach(function (param) {
46
+ var key = param[0], value = param[1];
47
+ url.searchParams.append(key, value);
48
+ });
49
+ return [2 /*return*/, fetch(url.href).then(function (res) { return res.text(); })];
50
+ });
51
+ });
52
+ }
53
+ exports.default = getGoogleFontCss;
@@ -0,0 +1,2 @@
1
+ declare function getGoogleFontDefaultText(family: string): Promise<any>;
2
+ export default getGoogleFontDefaultText;
@@ -0,0 +1,55 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ var __generator = (this && this.__generator) || function (thisArg, body) {
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
+ function verb(n) { return function (v) { return step([n, v]); }; }
15
+ function step(op) {
16
+ if (f) throw new TypeError("Generator is already executing.");
17
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
18
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
19
+ if (y = 0, t) op = [op[0] & 2, t.value];
20
+ switch (op[0]) {
21
+ case 0: case 1: t = op; break;
22
+ case 4: _.label++; return { value: op[1], done: false };
23
+ case 5: _.label++; y = op[1]; op = [0]; continue;
24
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
+ default:
26
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
+ if (t[2]) _.ops.pop();
31
+ _.trys.pop(); continue;
32
+ }
33
+ op = body.call(thisArg, _);
34
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
+ }
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ var GOOGLE_SAMPLE_TEXT_BASE_URL = 'https://fonts.google.com/sampletext';
40
+ function getGoogleFontDefaultText(family) {
41
+ return __awaiter(this, void 0, void 0, function () {
42
+ var url;
43
+ return __generator(this, function (_a) {
44
+ url = new URL(GOOGLE_SAMPLE_TEXT_BASE_URL);
45
+ url.searchParams.append('family', family);
46
+ return [2 /*return*/, fetch(url.href).then(function (res) {
47
+ return res.text().then(function (text) {
48
+ var testTexts = JSON.parse(text.substring(5));
49
+ return testTexts;
50
+ });
51
+ })];
52
+ });
53
+ });
54
+ }
55
+ exports.default = getGoogleFontDefaultText;
@@ -0,0 +1,10 @@
1
+ type Props = {
2
+ key: string;
3
+ family?: string;
4
+ sort?: string;
5
+ subset?: string;
6
+ category?: string;
7
+ classification?: string;
8
+ };
9
+ declare function getGoogleWebFonts(searchParamsObj: Props): Promise<any>;
10
+ export default getGoogleWebFonts;
@@ -0,0 +1,53 @@
1
+ "use strict";
2
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
3
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
4
+ return new (P || (P = Promise))(function (resolve, reject) {
5
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
6
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
7
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
8
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
9
+ });
10
+ };
11
+ var __generator = (this && this.__generator) || function (thisArg, body) {
12
+ var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
13
+ return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
14
+ function verb(n) { return function (v) { return step([n, v]); }; }
15
+ function step(op) {
16
+ if (f) throw new TypeError("Generator is already executing.");
17
+ while (g && (g = 0, op[0] && (_ = 0)), _) try {
18
+ if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
19
+ if (y = 0, t) op = [op[0] & 2, t.value];
20
+ switch (op[0]) {
21
+ case 0: case 1: t = op; break;
22
+ case 4: _.label++; return { value: op[1], done: false };
23
+ case 5: _.label++; y = op[1]; op = [0]; continue;
24
+ case 7: op = _.ops.pop(); _.trys.pop(); continue;
25
+ default:
26
+ if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
27
+ if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
28
+ if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
29
+ if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
30
+ if (t[2]) _.ops.pop();
31
+ _.trys.pop(); continue;
32
+ }
33
+ op = body.call(thisArg, _);
34
+ } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
35
+ if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
36
+ }
37
+ };
38
+ Object.defineProperty(exports, "__esModule", { value: true });
39
+ var GOOGLE_WEBFONTS_BASE_URL = 'https://www.googleapis.com/webfonts/v1/webfonts';
40
+ function getGoogleWebFonts(searchParamsObj) {
41
+ return __awaiter(this, void 0, void 0, function () {
42
+ var url;
43
+ return __generator(this, function (_a) {
44
+ url = new URL(GOOGLE_WEBFONTS_BASE_URL);
45
+ Object.entries(searchParamsObj).forEach(function (param) {
46
+ var key = param[0], value = param[1];
47
+ url.searchParams.append(key, value);
48
+ });
49
+ return [2 /*return*/, fetch(url.href).then(function (res) { return res.json(); })];
50
+ });
51
+ });
52
+ }
53
+ exports.default = getGoogleWebFonts;
@@ -0,0 +1,7 @@
1
+ import type { Category, SortOption, Subset } from './types';
2
+ export declare const FONT_FACE_REGEX: RegExp;
3
+ export declare const FONT_FAMILY_REGEX: RegExp;
4
+ export declare const PREVIEW_ATTRIBUTE_NAME = "data-is-preview";
5
+ export declare const CATEGORIES: Category[];
6
+ export declare const SORTS: SortOption[];
7
+ export declare const SUBSETS: Subset[];
@@ -0,0 +1,44 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.SUBSETS = exports.SORTS = exports.CATEGORIES = exports.PREVIEW_ATTRIBUTE_NAME = exports.FONT_FAMILY_REGEX = exports.FONT_FACE_REGEX = void 0;
4
+ exports.FONT_FACE_REGEX = /@font-face {([\s\S]*?)}/gm;
5
+ exports.FONT_FAMILY_REGEX = /font-family: ['"](.*?)['"]/gm;
6
+ exports.PREVIEW_ATTRIBUTE_NAME = 'data-is-preview';
7
+ exports.CATEGORIES = [
8
+ 'serif',
9
+ 'sans-serif',
10
+ 'display',
11
+ 'handwriting',
12
+ 'monospace'
13
+ ];
14
+ exports.SORTS = ['trending', 'popularity', 'date', 'alpha'];
15
+ exports.SUBSETS = [
16
+ 'korean',
17
+ 'latin',
18
+ 'latin-ext',
19
+ 'arabic',
20
+ 'bengali',
21
+ 'chinese-hongkong',
22
+ 'chinese-simplified',
23
+ 'chinese-traditional',
24
+ 'cyrillic',
25
+ 'cyrillic-ext',
26
+ 'devanagari',
27
+ 'greek',
28
+ 'greek-ext',
29
+ 'gujarati',
30
+ 'gurmukhi',
31
+ 'hebrew',
32
+ 'japanese',
33
+ 'kannada',
34
+ 'khmer',
35
+ 'malayalam',
36
+ 'myanmar',
37
+ 'oriya',
38
+ 'sinhala',
39
+ 'tamil',
40
+ '​telugu',
41
+ 'thai',
42
+ 'tibetan',
43
+ 'vietnamese'
44
+ ];
@@ -0,0 +1,15 @@
1
+ import { LegacyRef } from 'react';
2
+ import type { Font } from '../types';
3
+ type HeadlessProps = {
4
+ isLoading: boolean;
5
+ isVisible: boolean;
6
+ ref: LegacyRef<HTMLElement>;
7
+ defaultText: string;
8
+ };
9
+ type Props = {
10
+ font: Font;
11
+ children: (args: HeadlessProps) => JSX.Element;
12
+ fetchDefaultText: boolean;
13
+ };
14
+ declare function GoogleFontItem({ font, fetchDefaultText, children }: Props): JSX.Element;
15
+ export default GoogleFontItem;