@cntrl-site/sdk-nextjs 1.7.0 → 1.8.1

package/lib/common/useCurrentLayout.js

@@ -4,7 +4,7 @@ exports.useCurrentLayout = void 0;
 const useCntrlContext_1 = require("../provider/useCntrlContext");
 const react_1 = require("react");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
-const useCurrentLayout = () => {
+function useCurrentLayout() {
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const articleRectObserver = (0, react_1.useContext)(ArticleRectContext_1.ArticleRectContext);
     const layoutRanges = (0, react_1.useMemo)(() => {
@@ -39,5 +39,5 @@ const useCurrentLayout = () => {
         });
     }, [articleRectObserver, getCurrentLayout]);
     return { layoutId, layoutDeviation: deviation };
-};
+}
 exports.useCurrentLayout = useCurrentLayout;

package/lib/components/Section/Section.js

@@ -84,7 +84,7 @@ const Section = ({ section, data, children }) => {
          .section-background-wrapper-${section.id} {
             transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
             position: relative;
-            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)}};
+            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
             width: 100%;
          }
          .video-background-${section.id} {

package/lib/components/items/useDraggable.js

@@ -66,7 +66,7 @@ function useDraggable(data, dragHandler, preventDragOnChildren = false) {
         setDragState(state => (Object.assign(Object.assign({}, state), { drag: false, lastX: state.currentX - state.startX + state.lastX, lastY: state.currentY - state.startY + state.lastY })));
         (_a = untrackMouseMoveRef.current) === null || _a === void 0 ? void 0 : _a.call(untrackMouseMoveRef);
     }, [setDragState]);
-    const handleScroll = (0, react_1.useCallback)((event) => {
+    const handleScroll = (0, react_1.useCallback)(() => {
         setDragState(state => state);
     }, [setDragState]);
     const trackMouseMove = (0, react_1.useCallback)(() => {

package/lib/interactions/InteractionsRegistry.js

@@ -5,13 +5,16 @@ const sdk_1 = require("@cntrl-site/sdk");
 const isItemType_1 = require("../utils/isItemType");
 class InteractionsRegistry {
     constructor(article, layoutId) {
-        this.layoutId = layoutId;
+        var _a;
         this.ctrls = new Map();
-        const { interactions } = article;
         this.items = this.unpackItems(article);
+        const interactions = (_a = article.interactions[layoutId]) !== null && _a !== void 0 ? _a : [];
         const activeStatesIds = interactions.reduce((map, inter) => {
             var _a;
             const activeStateId = (_a = inter.states.find((state) => state.id !== inter.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
+            if (!activeStateId) {
+                throw new Error(`Failed to find active state for interaction w/ id="${inter.id}"`);
+            }
             map.push(activeStateId);
             return map;
         }, []);
@@ -30,9 +33,8 @@ class InteractionsRegistry {
         const stateItemsIdsMap = activeStatesIds.reduce((map, stateId) => {
             map[stateId] = this.items
                 .filter((item) => {
-                var _a, _b;
-                const layoutStates = (_a = item.state[layoutId]) !== null && _a !== void 0 ? _a : {};
-                const state = (_b = layoutStates === null || layoutStates === void 0 ? void 0 : layoutStates[stateId]) !== null && _b !== void 0 ? _b : {};
+                var _a;
+                const state = (_a = item.state[stateId]) !== null && _a !== void 0 ? _a : {};
                 const hasKeys = Object.keys(state).length !== 0;
                 return hasKeys;
             })
@@ -48,8 +50,8 @@ class InteractionsRegistry {
         this.ctrls.set(itemId, ctrl);
     }
     getStatePropsForItem(itemId) {
-        var _a, _b, _c, _d, _e;
-        const { items, layoutId } = this;
+        var _a, _b, _c;
+        const { items } = this;
         const item = items.find((item) => item.id === itemId);
         const itemStages = this.itemsStages.filter((stage) => stage.itemId === itemId);
         itemStages.sort((a, b) => a.updated - b.updated);
@@ -58,7 +60,7 @@ class InteractionsRegistry {
             if (stage.type === 'active') {
                 if (stage.isStartState)
                     continue;
-                const params = (_b = (_a = item.state[layoutId]) === null || _a === void 0 ? void 0 : _a[stage.stateId]) !== null && _b !== void 0 ? _b : {};
+                const params = (_a = item.state[stage.stateId]) !== null && _a !== void 0 ? _a : {};
                 for (const [key, stateDetails] of Object.entries(params)) {
                     itemStyles[key] = {
                         value: stateDetails.value
@@ -67,14 +69,17 @@ class InteractionsRegistry {
             }
             if (stage.type === 'transitioning') {
                 const activeStateId = stage.direction === 'in' ? stage.to : stage.from;
-                const params = (_d = (_c = item.state[layoutId]) === null || _c === void 0 ? void 0 : _c[activeStateId]) !== null && _d !== void 0 ? _d : {};
+                const params = (_b = item.state[activeStateId]) !== null && _b !== void 0 ? _b : {};
                 for (const [key, stateDetails] of Object.entries(params)) {
+                    const transitionDetails = stateDetails[stage.direction];
+                    if (!transitionDetails)
+                        continue;
                     itemStyles[key] = {
-                        value: stage.direction === 'in' ? stateDetails.value : (_e = itemStyles[key]) === null || _e === void 0 ? void 0 : _e.value,
+                        value: stage.direction === 'in' ? stateDetails.value : (_c = itemStyles[key]) === null || _c === void 0 ? void 0 : _c.value,
                         transition: {
-                            timing: stateDetails[stage.direction].timing,
-                            duration: stateDetails[stage.direction].duration,
-                            delay: stateDetails[stage.direction].delay
+                            timing: transitionDetails.timing,
+                            duration: transitionDetails.duration,
+                            delay: transitionDetails.delay
                         }
                     };
                 }
@@ -90,7 +95,7 @@ class InteractionsRegistry {
             for (const trigger of triggers) {
                 if (trigger.itemId !== itemId)
                     continue;
-                if (activeStates.some((stateId) => trigger.from === stateId)) {
+                if (activeStates.includes(trigger.from)) {
                     available.add(trigger.type);
                 }
             }
@@ -141,12 +146,12 @@ class InteractionsRegistry {
         }
     }
     notifyTransitionStartForItems(itemsIds, activeStateId) {
-        var _a, _b, _c;
+        var _a, _b;
         for (const itemId of itemsIds) {
             const ctrl = this.ctrls.get(itemId);
             const item = this.items.find((item) => item.id === itemId);
-            const keys = Object.keys((_b = (_a = item.state[this.layoutId]) === null || _a === void 0 ? void 0 : _a[activeStateId]) !== null && _b !== void 0 ? _b : {});
-            (_c = ctrl === null || ctrl === void 0 ? void 0 : ctrl.handleTransitionStart) === null || _c === void 0 ? void 0 : _c.call(ctrl, keys);
+            const keys = Object.keys((_a = item.state[activeStateId]) !== null && _a !== void 0 ? _a : {});
+            (_b = ctrl === null || ctrl === void 0 ? void 0 : ctrl.handleTransitionStart) === null || _b === void 0 ? void 0 : _b.call(ctrl, keys);
         }
     }
     notifyTransitionEnd(itemId) {
@@ -156,7 +161,7 @@ class InteractionsRegistry {
             if (stage.itemId !== itemId || stage.type !== 'transitioning')
                 return stage;
             return {
-                itemId: itemId,
+                itemId,
                 interactionId: stage.interactionId,
                 type: 'active',
                 stateId: stage.to,
@@ -184,7 +189,11 @@ class InteractionsRegistry {
         var _a;
         const { interactions } = this;
         const interaction = interactions.find((interaction) => interaction.id === interactionId);
-        return (_a = interaction.states.find(state => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
+        const activeStateId = (_a = interaction.states.find(state => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
+        if (!activeStateId) {
+            throw new Error(`Failed to find active state for interaction w/ id="${interactionId}"`);
+        }
+        return activeStateId;
     }
     notifyItemCtrlsChange(itemsIds) {
         var _a;
@@ -215,10 +224,10 @@ class InteractionsRegistry {
     }
     getDefaultItemStages() {
         const timestamp = Date.now();
-        const { items, layoutId } = this;
+        const { items } = this;
         const stages = [];
         for (const item of items) {
-            const itemStatesMap = item.state[layoutId];
+            const itemStatesMap = item.state;
             if (!itemStatesMap)
                 continue;
             for (const stateId of Object.keys(itemStatesMap)) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -31,7 +31,7 @@
     "@antfu/eslint-config": "^3.8.0",
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.3.2",
-    "@cntrl-site/sdk": "^1.21.1",
+    "@cntrl-site/sdk": "^1.22.0",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/common/useCurrentLayout.ts

@@ -14,7 +14,7 @@ type UseCurrentLayoutReturn = {
   layoutDeviation: number;
 };
 
-export const useCurrentLayout = (): UseCurrentLayoutReturn => {
+export function useCurrentLayout(): UseCurrentLayoutReturn {
   const { layouts } = useCntrlContext();
   const articleRectObserver = useContext(ArticleRectContext);
   const layoutRanges = useMemo(() => {
@@ -49,4 +49,4 @@ export const useCurrentLayout = (): UseCurrentLayoutReturn => {
   }, [articleRectObserver, getCurrentLayout]);
 
   return { layoutId, layoutDeviation: deviation };
-};
+}

package/src/components/Section/Section.tsx

@@ -128,7 +128,7 @@ export const Section: FC<Props> = ({ section, data, children }) => {
          .section-background-wrapper-${section.id} {
             transform: ${media?.position === 'fixed' ? 'translateY(-100vh)' : 'unset'};
             position: relative;
-            height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)}};
+            height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
             width: 100%;
          }
          .video-background-${section.id} {

package/src/components/items/useDraggable.ts

@@ -96,10 +96,10 @@ export function useDraggable(
       }));
       untrackMouseMoveRef.current?.();
     },
-    [ setDragState]
+    [setDragState]
   );
 
-  const handleScroll = useCallback<EventHandler<Event>>((event) => {
+  const handleScroll = useCallback<EventHandler<Event>>(() => {
     setDragState(state => state);
   }, [setDragState]);
 
@@ -150,10 +150,10 @@ export function useDraggable(
             lastY: state.lastY
           };
         }
-        
+
         const movementX = touch.clientX - state.currentX;
         const movementY = touch.clientY - state.currentY;
-        
+
         return {
           ...state,
           currentX: state.currentX + movementX,
@@ -198,7 +198,7 @@ export function useDraggable(
         if (event.target !== data.draggableRef && data.draggableRef.contains(event.target)) return;
       }
       document.body.style.overflow = 'hidden';
-      document.documentElement.style.overflow = 'hidden'; 
+      document.documentElement.style.overflow = 'hidden';
       const selection = document.getSelection();
       if (selection) {
         selection.removeAllRanges();

package/src/interactions/InteractionsRegistry.ts

@@ -17,11 +17,14 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
   private itemsStages: ItemStages;
   private activeStateIdInteractionIdMap: Record<StateId, InteractionId>;
 
-  constructor(article: Article, private layoutId: string) {
-    const { interactions } = article;
+  constructor(article: Article, layoutId: string) {
     this.items = this.unpackItems(article);
+    const interactions = article.interactions[layoutId] ?? [];
     const activeStatesIds = interactions.reduce<StateId[]>((map, inter) => {
-      const activeStateId = inter.states.find((state) => state.id !== inter.startStateId)?.id!;
+      const activeStateId = inter.states.find((state) => state.id !== inter.startStateId)?.id;
+      if (!activeStateId) {
+        throw new Error(`Failed to find active state for interaction w/ id="${inter.id}"`);
+      }
       map.push(activeStateId);
       return map;
     }, []);
@@ -40,8 +43,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     const stateItemsIdsMap = activeStatesIds.reduce<StateItemsIdsMap>((map, stateId) => {
       map[stateId] = this.items
         .filter((item) => {
-          const layoutStates = item.state[layoutId] ?? {};
-          const state = layoutStates?.[stateId] ?? {};
+          const state = item.state[stateId] ?? {};
           const hasKeys = Object.keys(state).length !== 0;
           return hasKeys;
         })
@@ -59,7 +61,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
   }
 
   getStatePropsForItem(itemId: string) {
-    const { items, layoutId } = this;
+    const { items } = this;
     const item = items.find((item) => item.id === itemId)!;
     const itemStages = this.itemsStages.filter((stage) => stage.itemId === itemId);
     itemStages.sort((a, b) => a.updated - b.updated);
@@ -67,7 +69,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     for (const stage of itemStages) {
       if (stage.type === 'active') {
         if (stage.isStartState) continue;
-        const params = item.state[layoutId]?.[stage.stateId!] ?? {};
+        const params = item.state[stage.stateId!] ?? {};
         for (const [key, stateDetails] of Object.entries(params)) {
           itemStyles[key] = {
             value: stateDetails.value
@@ -76,14 +78,16 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       }
       if (stage.type === 'transitioning') {
         const activeStateId = stage.direction === 'in' ? stage.to : stage.from;
-        const params = item.state[layoutId]?.[activeStateId] ?? {};
+        const params = item.state[activeStateId] ?? {};
         for (const [key, stateDetails] of Object.entries(params)) {
+          const transitionDetails = stateDetails[stage.direction];
+          if (!transitionDetails) continue;
           itemStyles[key] = {
             value: stage.direction === 'in' ? stateDetails.value : itemStyles[key]?.value,
             transition: {
-              timing: stateDetails[stage.direction].timing,
-              duration: stateDetails[stage.direction].duration,
-              delay: stateDetails[stage.direction].delay
+              timing: transitionDetails.timing,
+              duration: transitionDetails.duration,
+              delay: transitionDetails.delay
             }
           };
         }
@@ -99,7 +103,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       const { triggers } = interaction;
       for (const trigger of triggers) {
         if (trigger.itemId !== itemId) continue;
-        if (activeStates.some((stateId) => trigger.from === stateId)) {
+        if (activeStates.includes(trigger.from)) {
           available.add(trigger.type);
         }
       }
@@ -153,7 +157,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     for (const itemId of itemsIds) {
       const ctrl = this.ctrls.get(itemId);
       const item = this.items.find((item) => item.id === itemId)!;
-      const keys = Object.keys(item.state[this.layoutId]?.[activeStateId] ?? {});
+      const keys = Object.keys(item.state[activeStateId] ?? {});
       ctrl?.handleTransitionStart?.(keys);
     }
   }
@@ -163,7 +167,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     this.itemsStages = this.itemsStages.map((stage) => {
       if (stage.itemId !== itemId || stage.type !== 'transitioning') return stage;
       return {
-        itemId: itemId,
+        itemId,
         interactionId: stage.interactionId,
         type: 'active',
         stateId: stage.to,
@@ -173,7 +177,7 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     });
     this.ctrls.get(itemId)?.receiveChange();
   }
-  
+
   private getCurrentStateByInteractionId(id: InteractionId): string {
     let state;
     for (const interactionId of Object.keys(this.interactionStateMap)) {
@@ -194,7 +198,11 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
   private getActiveInteractionState(interactionId: InteractionId): string {
     const { interactions } = this;
     const interaction = interactions.find((interaction) => interaction.id === interactionId)!;
-    return interaction.states.find(state => state.id !== interaction.startStateId)?.id!;
+    const activeStateId = interaction.states.find(state => state.id !== interaction.startStateId)?.id;
+    if (!activeStateId) {
+      throw new Error(`Failed to find active state for interaction w/ id="${interactionId}"`);
+    }
+    return activeStateId;
   }
 
   private notifyItemCtrlsChange(itemsIds: string[]) {
@@ -227,10 +235,10 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
 
   private getDefaultItemStages(): ItemStages {
     const timestamp = Date.now();
-    const { items, layoutId } = this;
+    const { items } = this;
     const stages: ItemStages = [];
     for (const item of items) {
-      const itemStatesMap = item.state[layoutId];
+      const itemStatesMap = item.state;
       if (!itemStatesMap) continue;
       for (const stateId of Object.keys(itemStatesMap)) {
         const interactionId = this.activeStateIdInteractionIdMap[stateId];

package/src/provider/InteractionsContext.old.tsx

@@ -32,9 +32,9 @@ export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ interaction
     for (const interaction of interactions) {
       const activeStateId = interactionsStatesMap[interaction.id];
       const matchingTrigger = interaction.triggers.find((trigger) =>
-        trigger.itemId === itemId &&
-        trigger.from === activeStateId &&
-        trigger.type === triggerType
+        trigger.itemId === itemId
+        && trigger.from === activeStateId
+        && trigger.type === triggerType
       );
       if (matchingTrigger) {
         return {
@@ -52,7 +52,8 @@ export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ interaction
       interactionsStatesMap,
       interactions,
       getItemTrigger
-    }}>
+    }}
+    >
       {children}
     </InteractionsContextOld.Provider>
   );