@cntrl-site/sdk-nextjs 0.16.14 → 0.17.0

package/lib/components/items/RichTextItem.js

@@ -19,18 +19,22 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
     const id = (0, react_1.useId)();
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    const { angle, blur } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
+    const { angle, blur, wordSpacing, letterSpacing, color } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
+    const textColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(color), [color]);
     (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ ref: setRef, className: `rich-text-wrapper-${item.id}`, style: {
                     transform: `rotate(${angle}deg)`,
-                    filter: `blur(${blur * 100}vw)`
+                    filter: `blur(${blur * 100}vw)`,
+                    letterSpacing: `${letterSpacing * 100}vw`,
+                    wordSpacing: `${wordSpacing * 100}vw`,
+                    color: `${textColor.toCss()}`
                 } }, { children: content })), (0, jsx_runtime_1.jsxs)(style_1.default, Object.assign({ id: id }, { children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, [item.state.hover], ([hoverParams]) => {
                         return (`
             .rich-text-wrapper-${item.id} {
-              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur'], hoverParams)};
+              transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
             }
             .rich-text-wrapper-${item.id}:hover {
-              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur'], hoverParams)}
+              ${(0, HoverStyles_1.getHoverStyles)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)}
             }
           `);
                     })}`, `${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([layoutParams], exemplary) => {

package/lib/components/items/useRichTextItemValues.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useRichTextItemValues = void 0;
 const useKeyframeValue_1 = require("../../common/useKeyframeValue");
 const useLayoutContext_1 = require("../useLayoutContext");
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
 const useRichTextItemValues = (item, sectionId) => {
     const layoutId = (0, useLayoutContext_1.useLayoutContext)();
     const { angle } = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => ({ angle: layoutId ? item.area[layoutId].angle : 0 }), (animator, scroll, value) => animator.getRotation(value, scroll), sectionId);
@@ -12,6 +13,24 @@ const useRichTextItemValues = (item, sectionId) => {
         const layoutParams = item.layoutParams[layoutId];
         return 'blur' in layoutParams ? layoutParams.blur : 0;
     }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
-    return { angle, blur };
+    const letterSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'letterSpacing' in layoutParams ? layoutParams.letterSpacing : 0;
+    }, (animator, scroll, value) => animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing, sectionId, [layoutId]);
+    const wordSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, (item, layoutId) => {
+        if (!layoutId)
+            return 0;
+        const layoutParams = item.layoutParams[layoutId];
+        return 'wordSpacing' in layoutParams ? layoutParams.wordSpacing : 0;
+    }, (animator, scroll, value) => animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing, sectionId, [layoutId]);
+    const color = (0, useKeyframeValue_1.useKeyframeValue)(item, (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 { angle, blur, letterSpacing, wordSpacing, color };
 };
 exports.useRichTextItemValues = useRichTextItemValues;

package/lib/utils/Animator/Animator.js

@@ -183,6 +183,51 @@ class Animator {
             backdropBlur: rangeMap(pos, start.position, end.position, start.value.backdropBlur, end.value.backdropBlur, true)
         };
     }
+    getTextColor(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.TextColor];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                color: keyframe.value.color
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            color: this.getRangeColor(start, end, pos)
+        };
+    }
+    getLetterSpacing(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.LetterSpacing];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                letterSpacing: keyframe.value.letterSpacing
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            letterSpacing: rangeMap(pos, start.position, end.position, start.value.letterSpacing, end.value.letterSpacing, true)
+        };
+    }
+    getWordSpacing(values, pos) {
+        const keyframes = this.keyframesMap[sdk_1.KeyframeType.WordSpacing];
+        if (!keyframes || !keyframes.length)
+            return values;
+        if (keyframes.length === 1) {
+            const [keyframe] = keyframes;
+            return {
+                wordSpacing: keyframe.value.wordSpacing
+            };
+        }
+        const { start, end } = this.getStartEnd(pos, keyframes);
+        return {
+            wordSpacing: rangeMap(pos, start.position, end.position, start.value.wordSpacing, end.value.wordSpacing, true)
+        };
+    }
     getStartEnd(position, keyframes) {
         const index = (0, binSearchInsertAt_1.binSearchInsertAt)(keyframes, { position }, compare);
         const end = index === keyframes.length ? index - 1 : index;
@@ -216,7 +261,10 @@ function createKeyframesMap() {
         [sdk_1.KeyframeType.Opacity]: [],
         [sdk_1.KeyframeType.Scale]: [],
         [sdk_1.KeyframeType.Blur]: [],
-        [sdk_1.KeyframeType.BackdropBlur]: []
+        [sdk_1.KeyframeType.BackdropBlur]: [],
+        [sdk_1.KeyframeType.LetterSpacing]: [],
+        [sdk_1.KeyframeType.WordSpacing]: [],
+        [sdk_1.KeyframeType.TextColor]: []
     };
 }
 function rangeMap(n, start1, stop1, start2, stop2, withinBounds = false) {

package/lib/utils/HoverStyles/HoverStyles.js

@@ -16,7 +16,10 @@ const hoverTransformationMap = {
     'strokeColor': (strokeColor) => `border-color: ${sdk_1.CntrlColor.parse(strokeColor).toCss()} !important;`,
     'fillColor': (fillColor) => `background-color: ${sdk_1.CntrlColor.parse(fillColor).toCss()} !important;`,
     'blur': (blur) => `filter: blur(${blur * 100}vw) !important;`,
-    'backdropBlur': (backdropBlur) => `backdrop-filter: blur(${backdropBlur * 100}vw) !important;`
+    'backdropBlur': (backdropBlur) => `backdrop-filter: blur(${backdropBlur * 100}vw) !important;`,
+    'color': (color) => `color: ${sdk_1.CntrlColor.parse(color).toCss()} !important;`,
+    'letterSpacing': (letterSpacing) => `letter-spacing: ${letterSpacing * 100}vw !important;`,
+    'wordSpacing': (wordSpacing) => `word-spacing: ${wordSpacing * 100}vw !important;`
 };
 const CSSPropertyNameMap = {
     'width': 'width',
@@ -31,7 +34,10 @@ const CSSPropertyNameMap = {
     'strokeColor': 'border-color',
     'fillColor': 'background-color',
     'blur': 'filter',
-    'backdropBlur': 'backdrop-filter'
+    'backdropBlur': 'backdrop-filter',
+    'letterSpacing': 'letter-spacing',
+    'wordSpacing': 'word-spacing',
+    'color': 'color'
 };
 function getTransitions(values, hover) {
     if (!hover)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.16.14",
+  "version": "0.17.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^1.2.2",
+    "@cntrl-site/sdk": "^1.2.3",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",

package/src/components/items/RichTextItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useId, useState } from 'react';
+import { FC, useId, useMemo, useState } from 'react';
 import { ArticleItemType, CntrlColor, getLayoutStyles, TRichTextItem } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
@@ -14,7 +14,8 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   const id = useId();
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const { layouts } = useCntrlContext();
-  const { angle, blur } = useRichTextItemValues(item, sectionId);
+  const { angle, blur, wordSpacing, letterSpacing, color } = useRichTextItemValues(item, sectionId);
+  const textColor = useMemo(() => CntrlColor.parse(color), [color]);
   useRegisterResize(ref, onResize);
 
   return (
@@ -24,7 +25,10 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         className={`rich-text-wrapper-${item.id}`}
         style={{
           transform: `rotate(${angle}deg)`,
-          filter: `blur(${blur * 100}vw)`
+          filter: `blur(${blur * 100}vw)`,
+          letterSpacing: `${letterSpacing * 100}vw`,
+          wordSpacing: `${wordSpacing * 100}vw`,
+          color: `${textColor.toCss()}`
         }}
       >
         {content}
@@ -34,10 +38,10 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         {`${getLayoutStyles(layouts, [item.state.hover], ([hoverParams]) => {
           return (`
             .rich-text-wrapper-${item.id} {
-              transition: ${getTransitions<ArticleItemType.RichText>(['angle', 'blur'], hoverParams)};
+              transition: ${getTransitions<ArticleItemType.RichText>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
             }
             .rich-text-wrapper-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.RichText>(['angle', 'blur'], hoverParams)}
+              ${getHoverStyles<ArticleItemType.RichText>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)}
             }
           `);
         })}`}

package/src/components/items/useRichTextItemValues.ts

@@ -2,6 +2,8 @@ import { useKeyframeValue } from '../../common/useKeyframeValue';
 import { TRichTextItem } from '@cntrl-site/sdk';
 import { useLayoutContext } from '../useLayoutContext';
 
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
+
 export const useRichTextItemValues = (item: TRichTextItem, sectionId: string) => {
   const layoutId = useLayoutContext();
   const { angle } = useKeyframeValue(
@@ -23,5 +25,41 @@ export const useRichTextItemValues = (item: TRichTextItem, sectionId: string) =>
     [layoutId]
   );
 
-  return { angle, blur };
+  const letterSpacing = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'letterSpacing' in layoutParams ? layoutParams.letterSpacing : 0;
+    },
+    (animator, scroll, value) => animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing,
+    sectionId,
+    [layoutId]
+  );
+
+  const wordSpacing = useKeyframeValue(
+    item,
+    (item, layoutId) => {
+      if (!layoutId) return 0;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'wordSpacing' in layoutParams ? layoutParams.wordSpacing : 0;
+    },
+    (animator, scroll, value) => animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing,
+    sectionId,
+    [layoutId]
+  );
+
+  const color = useKeyframeValue(
+    item,
+    (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 { angle, blur, letterSpacing, wordSpacing, color };
 };

package/src/utils/Animator/Animator.ts

@@ -232,6 +232,75 @@ export class Animator {
     };
   }
 
+  getTextColor(
+    values: TKeyframeValueMap[KeyframeType.TextColor],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.TextColor] {
+    const keyframes = this.keyframesMap[KeyframeType.TextColor];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        color: keyframe.value.color
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.TextColor>(pos, keyframes);
+    return {
+      color: this.getRangeColor(start, end, pos)
+    };
+  }
+
+  getLetterSpacing(
+    values: TKeyframeValueMap[KeyframeType.LetterSpacing],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.LetterSpacing] {
+    const keyframes = this.keyframesMap[KeyframeType.LetterSpacing];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        letterSpacing: keyframe.value.letterSpacing
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.LetterSpacing>(pos, keyframes);
+    return {
+      letterSpacing: rangeMap(
+        pos,
+        start.position,
+        end.position,
+        start.value.letterSpacing,
+        end.value.letterSpacing,
+        true
+      )
+    };
+  }
+
+  getWordSpacing(
+    values: TKeyframeValueMap[KeyframeType.WordSpacing],
+    pos: number
+  ): TKeyframeValueMap[KeyframeType.WordSpacing] {
+    const keyframes = this.keyframesMap[KeyframeType.WordSpacing];
+    if (!keyframes || !keyframes.length) return values;
+    if (keyframes.length === 1) {
+      const [keyframe] = keyframes;
+      return {
+        wordSpacing: keyframe.value.wordSpacing
+      };
+    }
+    const { start, end } = this.getStartEnd<KeyframeType.WordSpacing>(pos, keyframes);
+    return {
+      wordSpacing: rangeMap(
+        pos,
+        start.position,
+        end.position,
+        start.value.wordSpacing,
+        end.value.wordSpacing,
+        true
+      )
+    };
+  }
+
+
   getStartEnd<T extends KeyframeType>(position: number, keyframes: AnimationData<T>[]): PositionKeyframes<T> {
     const index = binSearchInsertAt(keyframes, { position }, compare);
     const end = index === keyframes.length ? index - 1 : index;
@@ -247,8 +316,8 @@ export class Animator {
   }
 
   private getRangeColor(
-    start: AnimationData<KeyframeType.Color | KeyframeType.BorderColor>,
-    end: AnimationData<KeyframeType.Color | KeyframeType.BorderColor>,
+    start: AnimationData<KeyframeType.Color | KeyframeType.BorderColor | KeyframeType.TextColor>,
+    end: AnimationData<KeyframeType.Color | KeyframeType.BorderColor | KeyframeType.TextColor>,
     position: number
   ): string {
     const rangeAmount = rangeMap(position, start.position, end.position, 0, 1, true);
@@ -272,7 +341,10 @@ function createKeyframesMap(): KeyframesMap {
     [KeyframeType.Opacity]: [],
     [KeyframeType.Scale]: [],
     [KeyframeType.Blur]: [],
-    [KeyframeType.BackdropBlur]: []
+    [KeyframeType.BackdropBlur]: [],
+    [KeyframeType.LetterSpacing]: [],
+    [KeyframeType.WordSpacing]: [],
+    [KeyframeType.TextColor]: []
   };
 }
 

package/src/utils/HoverStyles/HoverStyles.ts

@@ -18,7 +18,10 @@ const hoverTransformationMap: Record<keyof ItemHoverParams, HoverParamsGetter> =
   'strokeColor': (strokeColor: string) => `border-color: ${CntrlColor.parse(strokeColor).toCss()} !important;`,
   'fillColor': (fillColor: string) => `background-color: ${CntrlColor.parse(fillColor).toCss()} !important;`,
   'blur': (blur: number) => `filter: blur(${blur * 100}vw) !important;`,
-  'backdropBlur': (backdropBlur: number) => `backdrop-filter: blur(${backdropBlur * 100}vw) !important;`
+  'backdropBlur': (backdropBlur: number) => `backdrop-filter: blur(${backdropBlur * 100}vw) !important;`,
+  'color': (color: string) => `color: ${CntrlColor.parse(color).toCss()} !important;`,
+  'letterSpacing': (letterSpacing: number) => `letter-spacing: ${letterSpacing * 100}vw !important;`,
+  'wordSpacing': (wordSpacing: number) => `word-spacing: ${wordSpacing * 100}vw !important;`
 };
 
 const CSSPropertyNameMap: Record<keyof ItemHoverParams, string> = {
@@ -34,7 +37,10 @@ const CSSPropertyNameMap: Record<keyof ItemHoverParams, string> = {
   'strokeColor': 'border-color',
   'fillColor': 'background-color',
   'blur': 'filter',
-  'backdropBlur': 'backdrop-filter'
+  'backdropBlur': 'backdrop-filter',
+  'letterSpacing': 'letter-spacing',
+  'wordSpacing': 'word-spacing',
+  'color': 'color'
 };
 
 export function getTransitions<T extends ArticleItemType>(

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
-      <option name="myValues">
-        <value>
-          <list size="1">
-            <item index="0" class="java.lang.String" itemvalue="jsx" />
-          </list>
-        </value>
-      </option>
-      <option name="myCustomValuesEnabled" value="true" />
-    </inspection_tool>
-  </profile>
-</component>