@cntrl-site/sdk-nextjs 1.0.0 → 1.0.1

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 (10) hide show
  1. package/cntrl-site-sdk-nextjs-1.0.0.tgz +0 -0
  2. package/lib/common/useKeyframeValue.js +1 -1
  3. package/lib/components/items/RichTextItem.js +7 -13
  4. package/lib/components/items/useRichTextItemValues.js +7 -5
  5. package/package.json +1 -1
  6. package/src/common/useKeyframeValue.ts +1 -1
  7. package/src/components/items/RichTextItem.tsx +11 -9
  8. package/src/components/items/useRichTextItemValues.ts +8 -5
  9. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  10. package/.idea/inspectionProfiles/Project_Default.xml +0 -15
package/cntrl-site-sdk-nextjs-1.0.0.tgz ADDED
Binary file
package/lib/common/useKeyframeValue.js CHANGED
@@ -71,6 +71,6 @@ const useKeyframeValue = (item, type, itemParamsGetter, animatorGetter, sectionI
71
71
  handleKeyframeValue(scroll);
72
72
  });
73
73
  }, [handleKeyframeValue, articleRectObserver, animator]);
74
- return adjustedValue;
74
+ return keyframes.length ? adjustedValue : paramValue;
75
75
  };
76
76
  exports.useKeyframeValue = useKeyframeValue;
package/lib/components/items/RichTextItem.js CHANGED
@@ -23,25 +23,19 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
23
23
  const [ref, setRef] = (0, react_1.useState)(null);
24
24
  const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
25
25
  const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
26
- const { blur, wordSpacing, letterSpacing, color } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
26
+ const { blur, wordSpacing, letterSpacing, color, fontSize, lineHeight } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
27
27
  const textColor = (0, react_1.useMemo)(() => color_1.CntrlColor.parse(color), [color]);
28
28
  const layoutValues = [item.area, item.layoutParams, item.state.hover];
29
29
  const exemplary = (0, useExemplary_1.useExemplary)();
30
30
  (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
31
- 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: {
32
- transform: `rotate(${angle}deg)`,
33
- filter: `blur(${blur * exemplary}px)`,
34
- letterSpacing: `${letterSpacing * exemplary}px`,
35
- wordSpacing: `${wordSpacing * exemplary}px`,
36
- color: `${textColor.fmt('rgba')}`
37
- }, children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams, hoverParams], exemplary) => {
31
+ 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) => {
38
32
  const color = color_1.CntrlColor.parse(layoutParams.color);
39
33
  return (`
40
34
  .rich-text-wrapper-${item.id} {
41
- font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
42
- line-height: ${layoutParams.lineHeight * exemplary}px;
43
- letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
44
- word-spacing: ${layoutParams.wordSpacing * exemplary}px;
35
+ font-size: ${layoutParams.fontSize * 100}vw;
36
+ line-height: ${layoutParams.lineHeight * 100}vw;
37
+ letter-spacing: ${layoutParams.letterSpacing * 100}vw;
38
+ word-spacing: ${layoutParams.wordSpacing * 100}vw;
45
39
  font-family: ${(0, getFontFamilyValue_1.getFontFamilyValue)(layoutParams.typeFace)};
46
40
  font-weight: ${layoutParams.fontWeight};
47
41
  font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
@@ -49,7 +43,7 @@ const RichTextItem = ({ item, sectionId, onResize }) => {
49
43
  font-variant: ${layoutParams.fontVariant};
50
44
  color: ${color.fmt('rgba')};
51
45
  transform: rotate(${area.angle}deg);
52
- filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * exemplary}px)` : 'unset'};
46
+ filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
53
47
  text-transform: ${layoutParams.textTransform};
54
48
  transition: ${(0, HoverStyles_1.getTransitions)(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
55
49
  }
package/lib/components/items/useRichTextItemValues.js CHANGED
@@ -15,22 +15,24 @@ const useRichTextItemValues = (item, sectionId) => {
15
15
  }, (animator, scroll, value) => animator.getBlur({ blur: value }, scroll).blur, sectionId, [layoutId]);
16
16
  const letterSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.LetterSpacing, (item, layoutId) => {
17
17
  if (!layoutId)
18
- return 0;
18
+ return;
19
19
  const layoutParams = item.layoutParams[layoutId];
20
20
  return 'letterSpacing' in layoutParams ? layoutParams.letterSpacing : 0;
21
- }, (animator, scroll, value) => animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing, sectionId, [layoutId]);
21
+ }, (animator, scroll, value) => value !== undefined ? animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing : undefined, sectionId, [layoutId]);
22
22
  const wordSpacing = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.WordSpacing, (item, layoutId) => {
23
23
  if (!layoutId)
24
- return 0;
24
+ return;
25
25
  const layoutParams = item.layoutParams[layoutId];
26
26
  return 'wordSpacing' in layoutParams ? layoutParams.wordSpacing : 0;
27
- }, (animator, scroll, value) => animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing, sectionId, [layoutId]);
27
+ }, (animator, scroll, value) => value !== undefined ? animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing : undefined, sectionId, [layoutId]);
28
28
  const color = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.TextColor, (item, layoutId) => {
29
29
  if (!layoutId)
30
30
  return DEFAULT_COLOR;
31
31
  const layoutParams = item.layoutParams[layoutId];
32
32
  return 'color' in layoutParams ? layoutParams.color : DEFAULT_COLOR;
33
33
  }, (animator, scroll, value) => animator.getTextColor({ color: value }, scroll).color, sectionId, [layoutId]);
34
- return { blur, letterSpacing, wordSpacing, color };
34
+ const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
35
+ const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
36
+ return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight };
35
37
  };
36
38
  exports.useRichTextItemValues = useRichTextItemValues;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "SDK for Next.js",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/index.ts",
package/src/common/useKeyframeValue.ts CHANGED
@@ -81,6 +81,6 @@ export const useKeyframeValue = <T>(
81
81
  handleKeyframeValue(scroll);
82
82
  });
83
83
  }, [handleKeyframeValue, articleRectObserver, animator]);
84
- return adjustedValue;
84
+ return keyframes.length ? adjustedValue : paramValue;
85
85
  };
86
86
 
package/src/components/items/RichTextItem.tsx CHANGED
@@ -18,7 +18,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
18
18
  const [ref, setRef] = useState<HTMLDivElement | null>(null);
19
19
  const { layouts } = useCntrlContext();
20
20
  const angle = useItemAngle(item, sectionId);
21
- const { blur, wordSpacing, letterSpacing, color } = useRichTextItemValues(item, sectionId);
21
+ const { blur, wordSpacing, letterSpacing, color, fontSize, lineHeight } = useRichTextItemValues(item, sectionId);
22
22
  const textColor = useMemo(() => CntrlColor.parse(color), [color]);
23
23
  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
24
24
  const exemplary = useExemplary();
@@ -32,9 +32,11 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
32
32
  style={{
33
33
  transform: `rotate(${angle}deg)`,
34
34
  filter: `blur(${blur * exemplary}px)`,
35
- letterSpacing: `${letterSpacing * exemplary}px`,
36
- wordSpacing: `${wordSpacing * exemplary}px`,
37
- color: `${textColor.fmt('rgba')}`
35
+ color: `${textColor.fmt('rgba')}`,
36
+ ...(letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {}),
37
+ ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {}),
38
+ ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
39
+ ...(lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {}),
38
40
  }}
39
41
  >
40
42
  {content}
@@ -45,10 +47,10 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
45
47
  const color = CntrlColor.parse(layoutParams.color);
46
48
  return (`
47
49
  .rich-text-wrapper-${item.id} {
48
- font-size: ${Math.round(layoutParams.fontSize * exemplary)}px;
49
- line-height: ${layoutParams.lineHeight * exemplary}px;
50
- letter-spacing: ${layoutParams.letterSpacing * exemplary}px;
51
- word-spacing: ${layoutParams.wordSpacing * exemplary}px;
50
+ font-size: ${layoutParams.fontSize * 100}vw;
51
+ line-height: ${layoutParams.lineHeight * 100}vw;
52
+ letter-spacing: ${layoutParams.letterSpacing * 100}vw;
53
+ word-spacing: ${layoutParams.wordSpacing * 100}vw;
52
54
  font-family: ${getFontFamilyValue(layoutParams.typeFace)};
53
55
  font-weight: ${layoutParams.fontWeight};
54
56
  font-style: ${layoutParams.fontStyle ? layoutParams.fontStyle : 'normal'};
@@ -56,7 +58,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
56
58
  font-variant: ${layoutParams.fontVariant};
57
59
  color: ${color.fmt('rgba')};
58
60
  transform: rotate(${area.angle}deg);
59
- filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * exemplary}px)` : 'unset'};
61
+ filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
60
62
  text-transform: ${layoutParams.textTransform};
61
63
  transition: ${getTransitions<ArticleItemType.RichText>(['angle', 'blur', 'letterSpacing', 'wordSpacing', 'color'], hoverParams)};
62
64
  }
package/src/components/items/useRichTextItemValues.ts CHANGED
@@ -23,11 +23,11 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
23
23
  item,
24
24
  KeyframeType.LetterSpacing,
25
25
  (item, layoutId) => {
26
- if (!layoutId) return 0;
26
+ if (!layoutId) return;
27
27
  const layoutParams = item.layoutParams[layoutId];
28
28
  return 'letterSpacing' in layoutParams ? layoutParams.letterSpacing : 0;
29
29
  },
30
- (animator, scroll, value) => animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing,
30
+ (animator, scroll, value) => value !== undefined ? animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing : undefined,
31
31
  sectionId,
32
32
  [layoutId]
33
33
  );
@@ -36,11 +36,11 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
36
36
  item,
37
37
  KeyframeType.WordSpacing,
38
38
  (item, layoutId) => {
39
- if (!layoutId) return 0;
39
+ if (!layoutId) return;
40
40
  const layoutParams = item.layoutParams[layoutId];
41
41
  return 'wordSpacing' in layoutParams ? layoutParams.wordSpacing : 0;
42
42
  },
43
- (animator, scroll, value) => animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing,
43
+ (animator, scroll, value) => value !== undefined ? animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing : undefined,
44
44
  sectionId,
45
45
  [layoutId]
46
46
  );
@@ -58,5 +58,8 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
58
58
  [layoutId]
59
59
  );
60
60
 
61
- return { blur, letterSpacing, wordSpacing, color };
61
+ const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
62
+ const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
63
+
64
+ return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight };
62
65
  };
package/.idea/codeStyles/codeStyleConfig.xml DELETED
@@ -1,5 +0,0 @@
1
- <component name="ProjectCodeStyleConfiguration">
2
- <state>
3
- <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
4
- </state>
5
- </component>
package/.idea/inspectionProfiles/Project_Default.xml DELETED
@@ -1,15 +0,0 @@
1
- <component name="InspectionProjectProfileManager">
2
- <profile version="1.0">
3
- <option name="myName" value="Project Default" />
4
- <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
5
- <option name="myValues">
6
- <value>
7
- <list size="1">
8
- <item index="0" class="java.lang.String" itemvalue="jsx" />
9
- </list>
10
- </value>
11
- </option>
12
- <option name="myCustomValuesEnabled" value="true" />
13
- </inspection_tool>
14
- </profile>
15
- </component>