@cntrl-site/sdk-nextjs 0.6.0 → 0.7.1

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,15 @@
+<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>

package/lib/common/useCurrentLayout.js

@@ -25,6 +25,11 @@ const useCurrentLayout = () => {
         return layoutRanges.find(l => articleWidth >= l.start && articleWidth < l.end).layoutId;
     }, [layoutRanges]);
     const [layoutId, setLayoutId] = (0, react_1.useState)(getCurrentLayout(0));
+    (0, react_1.useEffect)(() => {
+        if (typeof window !== 'undefined') {
+            getCurrentLayout(window.innerWidth);
+        }
+    }, []);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver)
             return;

package/lib/components/items/RichTextItem.js

@@ -5,20 +5,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RichTextItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 //@ts-ignore
 const style_1 = __importDefault(require("styled-jsx/style"));
 const RichTextConverter_1 = require("../../utils/RichTextConverter/RichTextConverter");
-const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const useRichTextItem_1 = require("./useRichTextItem");
 const richTextConv = new RichTextConverter_1.RichTextConverter();
 const RichTextItem = ({ item }) => {
-    const { layouts, typePresets } = (0, useCntrlContext_1.useCntrlContext)();
-    const preset = item.commonParams.preset
-        ? typePresets?.presets.find(p => p.id === item.commonParams.preset)
-        : null;
-    const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
-    return (0, react_1.createElement)(preset?.tag ?? 'div', {
-        className: preset ? `cntrl-preset-${preset.id}` : undefined
-    }, ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [content, (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] })));
+    const [content, styles, preset] = (0, useRichTextItem_1.useRichTextItem)(item);
+    const className = preset ? `cntrl-preset-${preset.id}` : undefined;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: className, children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
 };
 exports.RichTextItem = RichTextItem;

package/lib/components/items/useItemSticky.js

@@ -12,11 +12,17 @@ const useItemSticky = (top, parentOffsetTop, item) => {
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     const sticky = (0, react_1.useMemo)(() => item.layoutParams[layoutId].sticky, [layoutId]);
-    const stickyManager = (0, react_1.useMemo)(() => new StickyManager_1.StickyManager(sticky), []);
+    const stickyManager = (0, react_1.useMemo)(() => new StickyManager_1.StickyManager(sticky), [sticky]);
+    (0, react_1.useEffect)(() => {
+        setAdjustedTop(top);
+    }, [layoutId, top]);
     const handleSticky = (0, react_1.useCallback)((scroll) => {
         setIsFixed(stickyManager.getIsSticky(scroll));
         setAdjustedTop(stickyManager.getPosition(scroll, top, parentOffsetTop));
     }, [top, stickyManager, parentOffsetTop]);
+    (0, react_1.useEffect)(() => {
+        setAdjustedTop(top);
+    }, [top]);
     (0, react_1.useEffect)(() => {
         if (!articleRectObserver || !sticky)
             return;

package/lib/components/items/useRichTextItem.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRichTextItem = void 0;
+const useCurrentLayout_1 = require("../../common/useCurrentLayout");
+const RichTextConverter_1 = require("../../utils/RichTextConverter/RichTextConverter");
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const richTextConv = new RichTextConverter_1.RichTextConverter();
+const useRichTextItem = (item) => {
+    const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
+    const { layouts, typePresets } = (0, useCntrlContext_1.useCntrlContext)();
+    const presetId = item.layoutParams[layoutId].preset;
+    const preset = presetId
+        ? typePresets?.presets.find(p => p.id === presetId) ?? null
+        : null;
+    const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
+    return [content, styles, preset];
+};
+exports.useRichTextItem = useRichTextItem;

package/lib/utils/Animator/Animator.js

@@ -6,14 +6,14 @@ const binSearchInsertAt_1 = require("../binSearchInsertAt");
 const compare = (lhs, rhs) => lhs.position - rhs.position;
 const insertBin = (0, binSearchInsertAt_1.createInsert)(binSearchInsertAt_1.binSearchInsertAt, compare);
 class Animator {
+    static pushKeyframeToMap(keyframe, map) {
+        insertBin(map[keyframe.type], keyframe);
+    }
     constructor(keyframes) {
         this.keyframes = keyframes;
         this.keyframesMap = createKeyframesMap();
         this.fillKeyframesMap();
     }
-    static pushKeyframeToMap(keyframe, map) {
-        insertBin(map[keyframe.type], keyframe);
-    }
     getDimensions(values, pos) {
         const keyframes = this.keyframesMap[sdk_1.KeyframeType.Dimensions];
         if (!keyframes || !keyframes.length)

package/lib/utils/generateTypePresetStyles/generateTypePresetStyles.js

@@ -15,11 +15,11 @@ function generateTypePresetStyles(preset, layouts) {
   ${sorted.map(l => (`
 ${(0, sdk_1.getLayoutMediaQuery)(l.id, sorted)} {
   .cntrl-preset-${p.id} {
-    font-size: ${p.layoutParams[l.id].fontSize * 100}vw;
-    line-height: ${p.layoutParams[l.id].lineHeight * 100}vw;
-    letter-spacing: ${p.layoutParams[l.id].letterSpacing * 100}vw;
-    word-spacing: ${p.layoutParams[l.id].wordSpacing * 100}vw;
-    color: ${sdk_1.CntrlColor.parse(p.layoutParams[l.id].color).toCss()};
+    font-size: ${p.fontSize / l.exemplary * 100}vw;
+    line-height: ${p.lineHeight / l.exemplary * 100}vw;
+    letter-spacing: ${p.letterSpacing / l.exemplary * 100}vw;
+    word-spacing: ${p.wordSpacing / l.exemplary * 100}vw;
+    color: ${sdk_1.CntrlColor.parse(p.color).toCss()};
   }
 }`)).join('\n')}`)).join('\n')}`);
     return stylesStr.replace(reEmptyLines, '');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.6.0",
+  "version": "0.7.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^0.4.4",
+    "@cntrl-site/sdk": "^0.6.2",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },
@@ -40,7 +40,7 @@
     "@types/react": "^18.0.15",
     "jest": "^29.3.1",
     "ts-jest": "^29.0.3",
-    "typescript": "^4.7.4"
+    "typescript": "^4.9.5"
   },
   "directories": {
     "lib": "lib"

package/src/common/useCurrentLayout.ts

@@ -30,6 +30,12 @@ export const useCurrentLayout = () => {
   }, [layoutRanges]);
   const [layoutId, setLayoutId] = useState<string>(getCurrentLayout(0));
 
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      getCurrentLayout(window.innerWidth);
+    }
+  }, []);
+
   useEffect(() => {
     if (!articleRectObserver) return;
     return articleRectObserver.on('resize', () => {

package/src/components/items/RectangleItem.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useMemo, useState } from 'react';
+import { FC, useMemo } from 'react';
 import { TRectangleItem, CntrlColor } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';

package/src/components/items/RichTextItem.tsx

@@ -5,27 +5,19 @@ import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { RichTextConverter } from '../../utils/RichTextConverter/RichTextConverter';
 import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useRichTextItem } from './useRichTextItem';
 
 const richTextConv = new RichTextConverter();
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item }) => {
-  const { layouts, typePresets } = useCntrlContext();
-  const preset = item.commonParams.preset
-    ? typePresets?.presets.find(p => p.id === item.commonParams.preset)
-    : null;
-  const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
-  return createElement(
-    preset?.tag ?? 'div',
-    {
-      className: preset ? `cntrl-preset-${preset.id}` : undefined
-    },
-    (
-      <>
-        {content}
-        <JSXStyle id={item.id}>
-          {styles}
-        </JSXStyle>
-      </>
-    )
+  const [content, styles, preset] = useRichTextItem(item);
+  const className = preset ? `cntrl-preset-${preset.id}` : undefined;
+  return (
+    <>
+      <div className={className}>{content}</div>
+      <JSXStyle id={item.id}>
+        {styles}
+      </JSXStyle>
+    </>
   );
 };

package/src/components/items/useItemSticky.ts

@@ -10,7 +10,11 @@ export const useItemSticky = (top: number, parentOffsetTop: number, item: TArtic
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutId = useCurrentLayout();
   const sticky = useMemo(() => item.layoutParams[layoutId].sticky, [layoutId]);
-  const stickyManager = useMemo(() => new StickyManager(sticky), []);
+  const stickyManager = useMemo(() => new StickyManager(sticky), [sticky]);
+
+  useEffect(() => {
+    setAdjustedTop(top);
+  }, [layoutId, top]);
 
   const handleSticky = useCallback((scroll: number) => {
     setIsFixed(stickyManager.getIsSticky(scroll));
@@ -21,6 +25,10 @@ export const useItemSticky = (top: number, parentOffsetTop: number, item: TArtic
     ));
   }, [top, stickyManager, parentOffsetTop]);
 
+  useEffect(() => {
+    setAdjustedTop(top);
+  }, [top]);
+
   useEffect(() => {
     if (!articleRectObserver || !sticky) return;
     return articleRectObserver.on('scroll', () => {

package/src/components/items/useRichTextItem.ts

@@ -0,0 +1,18 @@
+import { TRichTextItem, TTypePresetEntry } from '@cntrl-site/sdk';
+import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { RichTextConverter } from '../../utils/RichTextConverter/RichTextConverter';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { ReactNode } from 'react';
+
+const richTextConv = new RichTextConverter();
+
+export const useRichTextItem = (item: TRichTextItem): [ReactNode[], string, TTypePresetEntry | null] => {
+  const layoutId = useCurrentLayout();
+  const { layouts, typePresets } = useCntrlContext();
+  const presetId = item.layoutParams[layoutId].preset;
+  const preset = presetId
+    ? typePresets?.presets.find(p => p.id === presetId) ?? null
+    : null;
+  const [content, styles] = richTextConv.toHtml(item, layouts, !!preset);
+  return [content, styles, preset];
+};

package/src/utils/generateTypePresetStyles/__mock__/presetMock.ts

@@ -1,28 +1,4 @@
-import { AllowedTags, TTypePresets } from '@cntrl-site/sdk';
-
-const layoutParams = {
-  'desktop': {
-    fontSize: 0.011111,
-    lineHeight: 0.013888,
-    wordSpacing: 0.0006944,
-    letterSpacing: 0.0006944,
-    color: 'rgba(0, 0, 0, 1)'
-  },
-  'tablet': {
-    fontSize: 0.02604,
-    lineHeight: 0.03125,
-    wordSpacing: 0,
-    letterSpacing: 0,
-    color: 'rgba(0, 0, 0, 1)'
-  },
-  'mobile': {
-    fontSize: 0.053333,
-    lineHeight: 0.064,
-    wordSpacing: 0.008,
-    letterSpacing: 0.008,
-    color: 'rgba(0, 0, 0, 1)'
-  }
-};
+import { TTypePresets, TypePresetStatus } from '@cntrl-site/sdk';
 
 export const presetMock: TTypePresets = {
   id: 'presetId',
@@ -33,17 +9,25 @@ export const presetMock: TTypePresets = {
       fontWeight: '400',
       fontStyle: '',
       name: 'Heading',
-      tag: AllowedTags.h1,
-      layoutParams
+      fontSize: 24,
+      lineHeight: 36,
+      wordSpacing: 1,
+      letterSpacing: 1,
+      color: 'rgba(0, 0, 0, 1)',
+      status: TypePresetStatus.Active
     },
     {
       id: 'heading02',
       fontFamily: 'Aeonik',
       fontWeight: '400',
       fontStyle: 'italic',
-      name: 'Heading',
-      tag: AllowedTags.h1,
-      layoutParams
+      name: 'Heading 2',
+      fontSize: 24,
+      lineHeight: 36,
+      wordSpacing: 1,
+      letterSpacing: 1,
+      color: 'rgba(0, 0, 0, 1)',
+      status: TypePresetStatus.Active
     }
   ]
 };

package/src/utils/generateTypePresetStyles/generateTypePresetStyles.test.ts

@@ -8,28 +8,28 @@ describe('generateTypePresetStyles', () => {
     const expectedMedia = (id: string) =>
 `@media (min-width: 0px) and (max-width: 767px) {
   .cntrl-preset-${id} {
-    font-size: 5.3332999999999995vw;
-    line-height: 6.4vw;
-    letter-spacing: 0.8vw;
-    word-spacing: 0.8vw;
+    font-size: 6.4vw;
+    line-height: 9.6vw;
+    letter-spacing: 0.26666666666666666vw;
+    word-spacing: 0.26666666666666666vw;
     color: rgba(0, 0, 0, 1);
   }
 }
 @media (min-width: 768px) and (max-width: 1023px) {
   .cntrl-preset-${id} {
-    font-size: 2.604vw;
-    line-height: 3.125vw;
-    letter-spacing: 0vw;
-    word-spacing: 0vw;
+    font-size: 3.125vw;
+    line-height: 4.6875vw;
+    letter-spacing: 0.13020833333333331vw;
+    word-spacing: 0.13020833333333331vw;
     color: rgba(0, 0, 0, 1);
   }
 }
 @media (min-width: 1024px) {
   .cntrl-preset-${id} {
-    font-size: 1.1111vw;
-    line-height: 1.3888vw;
-    letter-spacing: 0.06944vw;
-    word-spacing: 0.06944vw;
+    font-size: 1.6666666666666667vw;
+    line-height: 2.5vw;
+    letter-spacing: 0.06944444444444445vw;
+    word-spacing: 0.06944444444444445vw;
     color: rgba(0, 0, 0, 1);
   }
 }`;

package/src/utils/generateTypePresetStyles/generateTypePresetStyles.ts

@@ -14,11 +14,11 @@ export function generateTypePresetStyles(preset: TTypePresets, layouts: TLayout[
   ${sorted.map(l => (`
 ${getLayoutMediaQuery(l.id, sorted)} {
   .cntrl-preset-${p.id} {
-    font-size: ${p.layoutParams[l.id].fontSize * 100}vw;
-    line-height: ${p.layoutParams[l.id].lineHeight * 100}vw;
-    letter-spacing: ${p.layoutParams[l.id].letterSpacing * 100}vw;
-    word-spacing: ${p.layoutParams[l.id].wordSpacing * 100}vw;
-    color: ${CntrlColor.parse(p.layoutParams[l.id].color).toCss()};
+    font-size: ${p.fontSize / l.exemplary * 100}vw;
+    line-height: ${p.lineHeight / l.exemplary * 100}vw;
+    letter-spacing: ${p.letterSpacing / l.exemplary * 100}vw;
+    word-spacing: ${p.wordSpacing / l.exemplary * 100}vw;
+    color: ${CntrlColor.parse(p.color).toCss()};
   }
 }`)).join('\n')}`)).join('\n')}`);
   return stylesStr.replace(reEmptyLines, '');