@cntrl-site/sdk-nextjs 1.8.9-alpha.0 → 1.8.9-alpha.10

package/lib/components/items/LinkWrapper.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
 const LinkWrapper = ({ url, children, target }) => {
-    const validUrl = url && buildValidUrl(url);
+    const validUrl = url && prependBasePath(buildValidUrl(url));
     const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
     return url ? ((0, jsx_runtime_1.jsx)("a", Object.assign({ href: validUrl }, targetParams, { children: children }))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
 };
@@ -25,3 +26,10 @@ function buildValidUrl(url) {
         return url;
     return `//${url}`;
 }
+function prependBasePath(url) {
+    // Only prepend for internal links (starting with '/')
+    if (url && url.startsWith('/') && basePath && !url.startsWith(basePath)) {
+        return `${basePath}${url}`;
+    }
+    return url;
+}

package/lib/interactions/InteractionsRegistry.js

@@ -93,8 +93,6 @@ class InteractionsRegistry {
         for (const interaction of this.interactions) {
             const { triggers } = interaction;
             for (const trigger of triggers) {
-                if (!('itemId' in trigger))
-                    continue;
                 if (trigger.itemId !== itemId)
                     continue;
                 if (activeStates.includes(trigger.from)) {
@@ -104,59 +102,12 @@ class InteractionsRegistry {
         }
         return available;
     }
-    notifyScrollTrigger(position) {
-        var _a, _b;
-        const timestamp = Date.now();
-        for (const interaction of this.interactions) {
-            const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-            const matchingTrigger = interaction.triggers.find((trigger) => 'position' in trigger && (trigger.position < position ? trigger.from : trigger.to) === currentStateId);
-            if (!matchingTrigger || !('position' in matchingTrigger))
-                continue;
-            const activeStateId = this.getActiveInteractionState(interaction.id);
-            const targetStateId = matchingTrigger.isReverse && matchingTrigger.position > position
-                ? matchingTrigger.from
-                : matchingTrigger.to;
-            const isNewStateActive = targetStateId === activeStateId;
-            this.setCurrentStateForInteraction(interaction.id, targetStateId !== null && targetStateId !== void 0 ? targetStateId : activeStateId);
-            const transitioningItems = (_a = this.stateItemsIdsMap[targetStateId]) !== null && _a !== void 0 ? _a : [];
-            const state = interaction.states.find((state) => state.id === targetStateId);
-            const actions = (_b = state === null || state === void 0 ? void 0 : state.actions) !== null && _b !== void 0 ? _b : [];
-            for (const action of actions) {
-                const ctrl = this.ctrls.get(action.itemId);
-                if (!ctrl)
-                    continue;
-                ctrl.receiveAction(action.type);
-            }
-            this.itemsStages = this.itemsStages.map((stage) => {
-                if (stage.interactionId !== interaction.id)
-                    return stage;
-                return {
-                    itemId: stage.itemId,
-                    interactionId: stage.interactionId,
-                    type: 'transitioning',
-                    from: stage.type === 'transitioning' ? stage.to : stage.stateId,
-                    to: targetStateId,
-                    direction: isNewStateActive ? 'in' : 'out',
-                    updated: timestamp
-                };
-            });
-            const itemsToNotify = new Set(transitioningItems);
-            for (const trigger of interaction.triggers) {
-                if (!('itemId' in trigger))
-                    continue;
-                itemsToNotify.add(trigger.itemId);
-            }
-            this.notifyItemCtrlsChange(Array.from(itemsToNotify));
-            this.notifyTransitionStartForItems(transitioningItems, activeStateId);
-        }
-    }
-    notifyItemTrigger(itemId, triggerType) {
+    notifyTrigger(itemId, triggerType) {
         var _a, _b;
         const timestamp = Date.now();
         for (const interaction of this.interactions) {
             const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-            const matchingTrigger = interaction.triggers.find((trigger) => 'itemId' in trigger
-                && trigger.itemId === itemId
+            const matchingTrigger = interaction.triggers.find((trigger) => trigger.itemId === itemId
                 && trigger.from === currentStateId
                 && trigger.type === triggerType);
             if (!matchingTrigger)
@@ -188,8 +139,6 @@ class InteractionsRegistry {
             });
             const itemsToNotify = new Set(transitioningItems);
             for (const trigger of interaction.triggers) {
-                if (!('itemId' in trigger))
-                    continue;
                 itemsToNotify.add(trigger.itemId);
             }
             this.notifyItemCtrlsChange(Array.from(itemsToNotify));

package/lib/interactions/ItemInteractionCtrl.js

@@ -56,7 +56,7 @@ class ItemInteractionController {
         return triggers.has(triggerType);
     }
     sendTrigger(type) {
-        this.registry.notifyItemTrigger(this.itemId, type);
+        this.registry.notifyTrigger(this.itemId, type);
     }
     receiveAction(type) {
         var _a;

package/lib/provider/InteractionsContext.js

@@ -13,16 +13,6 @@ const InteractionsProvider = ({ article, children }) => {
             return;
         return new InteractionsRegistry_1.InteractionsRegistry(article, layoutId);
     }, [layoutId]);
-    (0, react_1.useEffect)(() => {
-        if (!registry)
-            return;
-        const handleScroll = () => {
-            const scrollY = window.scrollY;
-            registry.notifyScrollTrigger(scrollY);
-        };
-        window.addEventListener('scroll', handleScroll, { passive: true });
-        return () => window.removeEventListener('scroll', handleScroll);
-    }, [registry]);
     return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: registry, children: children }));
 };
 exports.InteractionsProvider = InteractionsProvider;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.8.9-alpha.0",
+  "version": "1.8.9-alpha.10",
   "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.22.9-alpha.0",
+    "@cntrl-site/sdk": "^1.22.8",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/items/LinkWrapper.tsx

@@ -1,5 +1,7 @@
 import React, { ReactElement, ReactNode } from 'react';
 
+const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
+
 interface Props {
   url?: string;
   children: ReactElement | ReactNode[];
@@ -7,7 +9,7 @@ interface Props {
 }
 
 export const LinkWrapper: React.FC<Props> = ({ url, children, target }) => {
-  const validUrl = url && buildValidUrl(url);
+  const validUrl = url && prependBasePath(buildValidUrl(url));
   const targetParams = target === '_blank' ? { target, rel: 'noreferrer' } : {};
   return url ? (
     <a
@@ -37,3 +39,11 @@ function buildValidUrl(url: string): string {
   if (protocolCheck) return url;
   return `//${url}`;
 }
+
+function prependBasePath(url: string): string {
+  // Only prepend for internal links (starting with '/')
+  if (url && url.startsWith('/') && basePath && !url.startsWith(basePath)) {
+    return `${basePath}${url}`;
+  }
+  return url;
+}

package/src/interactions/InteractionsRegistry.ts

@@ -3,7 +3,7 @@ import {
   Article,
   ArticleItemType,
   Interaction,
-  InteractionItemTrigger,
+  InteractionTrigger,
   ItemAny,
 } from '@cntrl-site/sdk';
 import { isItemType } from '../utils/isItemType';
@@ -96,13 +96,12 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     return itemStyles;
   }
 
-  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']> {
-    const available = new Set<InteractionItemTrigger['type']>();
+  getItemAvailableTriggers(itemId: string): Set<InteractionTrigger['type']> {
+    const available = new Set<InteractionTrigger['type']>();
     const activeStates = Object.values(this.interactionStateMap);
     for (const interaction of this.interactions) {
       const { triggers } = interaction;
       for (const trigger of triggers) {
-        if (!('itemId' in trigger)) continue;
         if (trigger.itemId !== itemId) continue;
         if (activeStates.includes(trigger.from)) {
           available.add(trigger.type);
@@ -112,57 +111,12 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
     return available;
   }
 
-  notifyScrollTrigger(position: number) {
+  notifyTrigger(itemId: string, triggerType: TriggerType): void {
     const timestamp = Date.now();
     for (const interaction of this.interactions) {
       const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
       const matchingTrigger = interaction.triggers.find((trigger) =>
-        'position' in trigger && (trigger.position < position ? trigger.from : trigger.to) === currentStateId
-      );
-      if (!matchingTrigger || !('position' in matchingTrigger)) continue;
-      const activeStateId = this.getActiveInteractionState(interaction.id);
-      const targetStateId = matchingTrigger.isReverse && matchingTrigger.position > position
-        ? matchingTrigger.from
-        : matchingTrigger.to;
-      const isNewStateActive = targetStateId === activeStateId;
-      this.setCurrentStateForInteraction(interaction.id, targetStateId ?? activeStateId);
-      const transitioningItems = this.stateItemsIdsMap[targetStateId] ?? [];
-      const state = interaction.states.find((state) => state.id === targetStateId);
-      const actions = state?.actions ?? [];
-      for (const action of actions) {
-        const ctrl = this.ctrls.get(action.itemId);
-        if (!ctrl) continue;
-        ctrl.receiveAction(action.type);
-      }
-      this.itemsStages = this.itemsStages.map((stage) => {
-        if (stage.interactionId !== interaction.id) return stage;
-        return {
-          itemId: stage.itemId,
-          interactionId: stage.interactionId,
-          type: 'transitioning',
-          from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
-          to: targetStateId,
-          direction: isNewStateActive ? 'in' : 'out',
-          updated: timestamp
-        };
-      });
-      const itemsToNotify = new Set<ItemId>(transitioningItems);
-      for (const trigger of interaction.triggers) {
-        if (!('itemId' in trigger)) continue;
-        itemsToNotify.add(trigger.itemId);
-      }
-      this.notifyItemCtrlsChange(Array.from(itemsToNotify));
-      this.notifyTransitionStartForItems(transitioningItems, activeStateId);
-    }
-  }
-
-  notifyItemTrigger(itemId: string, triggerType: TriggerType): void {
-    const timestamp = Date.now();
-    for (const interaction of this.interactions) {
-      const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
-      const matchingTrigger = interaction.triggers.find((trigger) =>
-        'itemId' in trigger
-        && trigger.itemId === itemId
+        trigger.itemId === itemId
         && trigger.from === currentStateId
         && trigger.type === triggerType
       );
@@ -192,7 +146,6 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       });
       const itemsToNotify = new Set<ItemId>(transitioningItems);
       for (const trigger of interaction.triggers) {
-        if (!('itemId' in trigger)) continue;
         itemsToNotify.add(trigger.itemId);
       }
       this.notifyItemCtrlsChange(Array.from(itemsToNotify));
@@ -316,7 +269,7 @@ type TransitioningStage = {
 type ActiveStage = { type: 'active'; itemId: string; interactionId: string; stateId?: string; isStartState: boolean; updated: number; };
 type InteractionStateMap = Record<InteractionId, StateId>;
 type StateItemsIdsMap = Record<StateId, ItemId[]>;
-type TriggerType = InteractionItemTrigger['type'];
+type TriggerType = InteractionTrigger['type'];
 type InteractionId = string;
 type StateId = string;
 type ItemId = string;

package/src/interactions/ItemInteractionCtrl.ts

@@ -1,12 +1,11 @@
 import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
 import { getTransition } from './getTransition';
 import { getStyleKeysFromCSSProperty } from './CSSPropertyNameMap';
-import { InteractionItemTrigger } from '@cntrl-site/sdk';
+import { InteractionTrigger } from '@cntrl-site/sdk';
 
 export class ItemInteractionController implements ItemInteractionCtrl {
   private transitionsInProgress: Set<string> = new Set();
   private actionReceiver: ((type: 'play' | 'pause') => void) | undefined;
-
   constructor(
     private itemId: string,
     private registry: InteractionsRegistryPort,
@@ -30,13 +29,13 @@ export class ItemInteractionController implements ItemInteractionCtrl {
     };
   }
 
-  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean {
+  getHasTrigger(itemId: string, triggerType: InteractionTrigger['type']): boolean {
     const triggers = this.registry.getItemAvailableTriggers(itemId);
     return triggers.has(triggerType);
   }
 
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out') {
-    this.registry.notifyItemTrigger(this.itemId, type);
+    this.registry.notifyTrigger(this.itemId, type);
   }
 
   receiveAction(type: 'play' | 'pause') {

package/src/interactions/types.ts

@@ -1,8 +1,8 @@
-import { ArticleItemType, InteractionItemTrigger, ItemState } from '@cntrl-site/sdk';
+import { ArticleItemType, InteractionTrigger, ItemState } from '@cntrl-site/sdk';
 
 export interface ItemInteractionCtrl {
   getState(keys: string[]): StateCSSInfo;
-  getHasTrigger(itemId: string, triggerType: InteractionItemTrigger['type']): boolean;
+  getHasTrigger(itemId: string, triggerType: InteractionTrigger['type']): boolean;
   sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
   handleTransitionEnd?: (styleKey: string) => void;
   handleTransitionStart?: (styleKeys: string[]) => void;
@@ -14,8 +14,8 @@ export interface ItemInteractionCtrl {
 export interface InteractionsRegistryPort {
   register(itemId: string, ctrl: ItemInteractionCtrl): void;
   getStatePropsForItem(itemId: string): StateProps;
-  getItemAvailableTriggers(itemId: string): Set<InteractionItemTrigger['type']>;
-  notifyItemTrigger(itemId: string, type: TriggerType): void;
+  getItemAvailableTriggers(itemId: string): Set<InteractionTrigger['type']>;
+  notifyTrigger(itemId: string, type: TriggerType): void;
   notifyTransitionEnd(itemId: string): void;
 }
 

package/src/provider/InteractionsContext.tsx

@@ -1,4 +1,4 @@
-import { createContext, FC, PropsWithChildren, useContext, useEffect, useMemo } from 'react';
+import { createContext, FC, PropsWithChildren, useContext, useMemo } from 'react';
 import { InteractionsRegistry } from '../interactions/InteractionsRegistry';
 import { Article } from '@cntrl-site/sdk';
 import { useCurrentLayout } from '../common/useCurrentLayout';
@@ -15,17 +15,6 @@ export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, ch
     if (!layoutId) return;
     return new InteractionsRegistry(article, layoutId);
   }, [layoutId]);
-
-  useEffect(() => {
-    if (!registry) return;
-    const handleScroll = () => {
-      const scrollY = window.scrollY;
-      registry.notifyScrollTrigger(scrollY);
-    };
-    window.addEventListener('scroll', handleScroll, { passive: true });
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, [registry]);
-
   return (
     <InteractionsContext.Provider value={registry}>
       {children}

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/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/sdk-nextjs.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>