@cntrl-site/sdk-nextjs 0.30.4 → 1.0.1

package/lib/common/useKeyframeValue.js

@@ -71,6 +71,6 @@ const useKeyframeValue = (item, type, itemParamsGetter, animatorGetter, sectionI
             handleKeyframeValue(scroll);
         });
     }, [handleKeyframeValue, articleRectObserver, animator]);
-    return adjustedValue;
+    return keyframes.length ? adjustedValue : paramValue;
 };
 exports.useKeyframeValue = useKeyframeValue;

package/lib/components/items/RichTextItem.js

@@ -23,25 +23,19 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const { blur, wordSpacing, letterSpacing, color } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
+    const { blur, wordSpacing, letterSpacing, color, fontSize, lineHeight } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
     const textColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(color), [color]);
     const layoutValues = [item.area, item.layoutParams, item.state.hover];
     const exemplary = (0, useExemplary_1.useExemplary)();
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: {
-                    transform: `rotate(${angle}deg)`,
-                    filter: `blur(${blur * exemplary}px)`,
-                    letterSpacing: `${letterSpacing * exemplary}px`,
-                    wordSpacing: `${wordSpacing * exemplary}px`,
-                    color: `${textColor.fmt('rgba')}`
-                }, children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { ref: setRef, className: `rich-text-wrapper-${item.id}`, style: Object.assign(Object.assign(Object.assign(Object.assign({ transform: `rotate(${angle}deg)`, filter: `blur(${blur * exemplary}px)`, color: `${textColor.fmt('rgba')}` }, (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
                         const color = color_1.CntrlColor.parse(layoutParams.color);
                         return (`
             .rich-text-wrapper-${item.id} {
-              font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
-              line-height: ${layoutParams.lineHeight * exemplary}px;
-              letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
-              word-spacing: ${layoutParams.wordSpacing * exemplary}px;
+              font-size: ${layoutParams.fontSize * 100}vw;
+              line-height: ${layoutParams.lineHeight * 100}vw;
+              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
+              word-spacing: ${layoutParams.wordSpacing * 100}vw;
               font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
               font-weight: ${layoutParams.fontWeight};
               font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
@@ -49,7 +43,7 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
               font-variant: ${layoutParams.fontVariant};
               color: ${color.fmt('rgba')};
               transform: rotate(${area.angle}deg);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * exemplary}px)` : 'unset'};
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               text-transform: ${layoutParams.textTransform};
               transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
             }

package/lib/components/items/useRichTextItemValues.js

@@ -15,22 +15,24 @@ const useRichTextItemValues = (item, sectionId) => {
     }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
     const letterSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.LetterSpacing, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'letterSpacing' in layoutParams ? layoutParams.letterSpacing : 0;
-    }, (animator, scroll, value) => animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value !== undefined ? animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing : undefined, sectionId, [layoutId]);
     const wordSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.WordSpacing, (item, layoutId) => {
         if (!layoutId)
-            return 0;
+            return;
         const layoutParams = item.layoutParams[layoutId];
         return 'wordSpacing' in layoutParams ? layoutParams.wordSpacing : 0;
-    }, (animator, scroll, value) => animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing, sectionId, [layoutId]);
+    }, (animator, scroll, value) => value !== undefined ? animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing : undefined, sectionId, [layoutId]);
     const color = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.TextColor, (item, layoutId) => {
         if (!layoutId)
             return DEFAULT_COLOR;
         const layoutParams = item.layoutParams[layoutId];
         return 'color' in layoutParams ? layoutParams.color : DEFAULT_COLOR;
     }, (animator, scroll, value) => animator.getTextColor({ color: value }, scroll).color, sectionId, [layoutId]);
-    return { blur, letterSpacing, wordSpacing, color };
+    const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
+    const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
+    return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight };
 };
 exports.useRichTextItemValues = useRichTextItemValues;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.30.4",
+  "version": "1.0.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -33,9 +33,9 @@
   "peerDependencies": {
     "@types/lodash.isequal": "^4.5.6",
     "lodash.isequal": "^4.5.0",
-    "next": "^13.0.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "next": "^14.2.3",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@tsconfig/node16": "^1.0.3",

package/src/common/useKeyframeValue.ts

@@ -81,6 +81,6 @@ export const useKeyframeValue = <T>(
       handleKeyframeValue(scroll);
     });
   }, [handleKeyframeValue, articleRectObserver, animator]);
-  return adjustedValue;
+  return keyframes.length ? adjustedValue : paramValue;
 };
 

package/src/components/items/RichTextItem.tsx

@@ -18,7 +18,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { layouts } = useCntrlContext();
   const angle = useItemAngle(item, sectionId);
-  const { blur, wordSpacing, letterSpacing, color } = useRichTextItemValues(item, sectionId);
+  const { blur, wordSpacing, letterSpacing, color, fontSize, lineHeight } = useRichTextItemValues(item, sectionId);
   const textColor = useMemo(() => CntrlColor.parse(color), [color]);
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
   const exemplary = useExemplary();
@@ -32,9 +32,11 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         style={{
           transform: `rotate(${angle}deg)`,
           filter: `blur(${blur * exemplary}px)`,
-          letterSpacing: `${letterSpacing * exemplary}px`,
-          wordSpacing: `${wordSpacing * exemplary}px`,
-          color: `${textColor.fmt('rgba')}`
+          color: `${textColor.fmt('rgba')}`,
+          ...(letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {}),
+          ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {}),
+          ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
+          ...(lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {}),
         }}
       >
         {content}
@@ -45,10 +47,10 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
           const color = CntrlColor.parse(layoutParams.color);
           return (`
             .rich-text-wrapper-${item.id} {
-              font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
-              line-height: ${layoutParams.lineHeight * exemplary}px;
-              letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
-              word-spacing: ${layoutParams.wordSpacing * exemplary}px;
+              font-size: ${layoutParams.fontSize * 100}vw;
+              line-height: ${layoutParams.lineHeight * 100}vw;
+              letter-spacing: ${layoutParams.letterSpacing * 100}vw;
+              word-spacing: ${layoutParams.wordSpacing * 100}vw;
               font-family: ${getFontFamilyValue(layoutParams.typeFace)};
               font-weight: ${layoutParams.fontWeight};
               font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
@@ -56,7 +58,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
               font-variant: ${layoutParams.fontVariant};
               color: ${color.fmt('rgba')};
               transform: rotate(${area.angle}deg);
-              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * exemplary}px)` : 'unset'};
+              filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               text-transform: ${layoutParams.textTransform};
               transition: ${getTransitions<ArticleItemType.RichText>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
             }

package/src/components/items/useRichTextItemValues.ts

@@ -23,11 +23,11 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
     item,
     KeyframeType.LetterSpacing,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'letterSpacing' in layoutParams ? layoutParams.letterSpacing : 0;
     },
-    (animator, scroll, value) => animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing,
+    (animator, scroll, value) => value !== undefined ? animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing : undefined,
     sectionId,
     [layoutId]
   );
@@ -36,11 +36,11 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
     item,
     KeyframeType.WordSpacing,
     (item, layoutId) => {
-      if (!layoutId) return 0;
+      if (!layoutId) return;
       const layoutParams = item.layoutParams[layoutId];
       return 'wordSpacing' in layoutParams ? layoutParams.wordSpacing : 0;
     },
-    (animator, scroll, value) => animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing,
+    (animator, scroll, value) => value !== undefined ? animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing : undefined,
     sectionId,
     [layoutId]
   );
@@ -58,5 +58,8 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
     [layoutId]
   );
 
-  return { blur, letterSpacing, wordSpacing, color };
+  const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
+  const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
+
+  return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight };
 };