@cntrl-site/sdk-nextjs 1.0.20 → 1.1.1

package/src/components/useItemPosition.ts

@@ -3,7 +3,11 @@ import { useKeyframeValue } from '../common/useKeyframeValue';
 import { getItemTopStyle } from '../utils/getItemTopStyle';
 import { useLayoutContext } from './useLayoutContext';
 
-export const useItemPosition = (item: ItemAny, sectionId: string) => {
+export const useItemPosition = (
+  item: ItemAny,
+  sectionId: string,
+  stateValues: { top?: number; left?: number; }
+) => {
   const layoutId = useLayoutContext();
   const position = useKeyframeValue<{ top: number; left: number } | undefined>(
     item,
@@ -18,12 +22,15 @@ export const useItemPosition = (item: ItemAny, sectionId: string) => {
   );
   const anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
   const positionType = layoutId ? item.area[layoutId].positionType : PositionType.ScreenBased;
-  // tp prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
+  // to prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
   const isScreenBasedBottom = positionType === PositionType.ScreenBased && anchorSide === AnchorSide.Bottom;
+  if (!position) return undefined;
+  const top = stateValues?.top ?? position.top;
+  const left = stateValues?.left ?? position.left;
   return position ? {
-    bottom: isScreenBasedBottom ? `${-position.top * 100}vw` : 'unset',
-    top:  isScreenBasedBottom ? 'unset' : getItemTopStyle(position.top, anchorSide),
-    left: `${position.left * 100}vw`
+    bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
+    top:  isScreenBasedBottom ? 'unset' : getItemTopStyle(top, anchorSide),
+    left: `${left * 100}vw`
   } : undefined;
 };
 

package/src/interactions/CSSPropertyNameMap.ts

@@ -0,0 +1,38 @@
+import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
+
+export const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
+  'width': 'width',
+  'height': 'height',
+  'top': 'top',
+  'left': 'left',
+  'scale': 'transform',
+  'angle': 'transform',
+  'opacity': 'opacity',
+  'radius': 'border-radius',
+  'strokeWidth': 'border-width',
+  'strokeColor': 'border-color',
+  'fillColor': 'background-color',
+  'blur': 'filter',
+  'backdropBlur': 'backdrop-filter',
+  'letterSpacing': 'letter-spacing',
+  'wordSpacing': 'word-spacing',
+  'color': 'color'
+};
+
+const PropertyNameCSSMap: Record<string, string[]> = {
+  'transform': ['angle', 'scale'],
+  'border-radius': ['radius'],
+  'border-width': ['strokeWidth'],
+  'border-color': ['strokeColor'],
+  'background-color': ['fillColor'],
+  'filter': ['blur'],
+  'backdrop-filter': ['backdrop-blur'],
+  'letter-spacing': ['letterSpacing'],
+  'word-spacing': ['wordSpacing'],
+};
+
+
+export function getStyleKeysFromCSSProperty(cssProp: string): string[] {
+  const key = PropertyNameCSSMap[cssProp] ?? [cssProp];
+  return key;
+}

package/src/interactions/InteractionsRegistry.ts

@@ -0,0 +1,244 @@
+import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
+import {
+  Article,
+  ArticleItemType,
+  Interaction,
+  InteractionTrigger,
+  ItemAny,
+} from '@cntrl-site/sdk';
+import { isItemType } from '../components/Item';
+
+export class InteractionsRegistry implements InteractionsRegistryPort {
+  private ctrls: Map<ItemId, ItemInteractionCtrl> = new Map();
+  private items: ItemAny[];
+  private interactions: Interaction[];
+  private stateItemsIdsMap: StateItemsIdsMap;
+  private interactionStateMap: InteractionStateMap;
+  private itemsStages: ItemStages;
+  private activeStateIdInteractionIdMap: Record<StateId, InteractionId>;
+
+  constructor(article: Article, private layoutId: string) {
+    const { interactions } = article;
+    this.items = this.unpackItems(article);
+    const activeStatesIds = interactions.reduce<StateId[]>((map, inter) => {
+      const activeStateId = inter.states.find((state) => state.id !== inter.startStateId)?.id!;
+      map.push(activeStateId);
+      return map;
+    }, []);
+    const interactionStateMap = interactions.reduce<InteractionStateMap>((map, { id, startStateId }) => {
+      map[id] = startStateId;
+      return map;
+    }, {});
+    this.activeStateIdInteractionIdMap = interactions.reduce<Record<StateId, InteractionId>>((map, interaction) => {
+      const activeState = interaction.states.find((state) => state.id !== interaction.startStateId);
+      if (activeState) {
+        map[activeState.id] = interaction.id;
+      }
+      return map;
+    }, {});
+    const itemStages = this.getDefaultItemStages();
+    const stateItemsIdsMap = activeStatesIds.reduce<StateItemsIdsMap>((map, stateId) => {
+      map[stateId] = this.items
+        .filter((item) => {
+          const layoutStates = item.state[layoutId] ?? {};
+          const state = layoutStates?.[stateId] ?? {};
+          const hasKeys = Object.keys(state).length !== 0;
+          return hasKeys;
+        })
+        .map((item) => item.id);
+      return map;
+    }, {});
+    this.interactions = interactions;
+    this.itemsStages = itemStages;
+    this.stateItemsIdsMap = stateItemsIdsMap;
+    this.interactionStateMap = interactionStateMap;
+  }
+
+  register(itemId: ItemId, ctrl: ItemInteractionCtrl) {
+    this.ctrls.set(itemId, ctrl);
+  }
+
+  getStatePropsForItem(itemId: string) {
+    const { items, layoutId } = 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);
+    const itemStyles: StateProps = {};
+    for (const stage of itemStages) {
+      if (stage.type === 'active') {
+        if (stage.isStartState) continue;
+        const params = item.state[layoutId]?.[stage.stateId!] ?? {};
+        for (const [key, stateDetails] of Object.entries(params)) {
+          itemStyles[key] = {
+            value: stateDetails.value
+          };
+        }
+      }
+      if (stage.type === 'transitioning') {
+        const activeStateId = stage.direction === 'in' ? stage.to : stage.from;
+        const params = item.state[layoutId]?.[activeStateId] ?? {};
+        for (const [key, stateDetails] of Object.entries(params)) {
+          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
+            }
+          };
+        }
+      }
+    }
+    return itemStyles;
+  }
+
+  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) =>
+        trigger.itemId === itemId
+        && trigger.from === currentStateId
+        && trigger.type === triggerType
+      );
+      if (!matchingTrigger) continue;
+      const activeStateId = this.getActiveInteractionState(interaction.id);
+      const isNewStateActive = matchingTrigger.to === activeStateId;
+      this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
+      const transitioningItems = this.stateItemsIdsMap[activeStateId] ?? [];
+      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: matchingTrigger.to,
+          direction: isNewStateActive ? 'in' : 'out',
+          updated: timestamp
+        };
+      });
+      this.notifyItemCtrlsChange(transitioningItems);
+      this.notifyTransitionStartForItems(transitioningItems, activeStateId);
+    }
+  }
+
+  notifyTransitionStartForItems(itemsIds: string[], activeStateId: string) {
+    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] ?? {});
+      ctrl?.handleTransitionStart?.(keys);
+    }
+  }
+
+  notifyTransitionEnd(itemId: string): void {
+    const timestamp = Date.now();
+    this.itemsStages = this.itemsStages.map((stage) => {
+      if (stage.itemId !== itemId || stage.type !== 'transitioning') return stage;
+      return {
+        itemId: itemId,
+        interactionId: stage.interactionId,
+        type: 'active',
+        stateId: stage.to,
+        isStartState: stage.direction === 'out',
+        updated: timestamp
+      };
+    });
+    this.ctrls.get(itemId)?.receiveChange();
+  }
+
+
+  private getCurrentStateByInteractionId(id: InteractionId): string {
+    let state;
+    for (const interactionId of Object.keys(this.interactionStateMap)) {
+      if (id !== interactionId) continue;
+      state = this.interactionStateMap[interactionId];
+    }
+    if (!state) throw new Error(`Failed to find current state for interaction w/ id="${id}"`);
+    return state;
+  }
+
+  private setCurrentStateForInteraction(interactionId: InteractionId, stateId: StateId) {
+    this.interactionStateMap = {
+      ...this.interactionStateMap,
+      [interactionId]: stateId
+    };
+  }
+
+  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!;
+  }
+
+  private notifyItemCtrlsChange(itemsIds: string[]) {
+    for (const itemId of itemsIds) {
+      this.ctrls.get(itemId)?.receiveChange();
+    }
+  }
+
+  private unpackItems(article: Article): ItemAny[] {
+    const itemsArr = [];
+    for (const section of article.sections) {
+      for (const item of section.items) {
+        const { items, ...itemWithoutChildren } = item;
+        itemsArr.push(itemWithoutChildren);
+        if (!isItemType(item, ArticleItemType.Group)) continue;
+        const groupChildren = item?.items ?? [];
+        for (const child of groupChildren) {
+          itemsArr.push(child);
+        }
+      }
+    }
+    return itemsArr;
+  }
+
+  private getDefaultItemStages(): ItemStages {
+    const timestamp = Date.now();
+    const { items, layoutId } = this;
+    const stages: ItemStages = [];
+    for (const item of items) {
+      const itemStatesMap = item.state[layoutId];
+      if (!itemStatesMap) continue;
+      for (const stateId of Object.keys(itemStatesMap)) {
+        const interactionId = this.activeStateIdInteractionIdMap[stateId];
+        if (!interactionId) continue;
+        stages.push({
+          itemId: item.id,
+          interactionId,
+          type: 'active',
+          isStartState: true,
+          updated: timestamp
+        });
+      }
+    }
+    return stages;
+  }
+}
+
+type ItemStages = (TransitioningStage | ActiveStage)[];
+type TransitioningStage = {
+  itemId: string;
+  interactionId: string;
+  type: 'transitioning';
+  from: StateId;
+  to: StateId;
+  direction: 'in' | 'out';
+  updated: number;
+};
+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 = InteractionTrigger['type'];
+type InteractionId = string;
+type StateId = string;
+type ItemId = string;
+type StateProps = Record<string, {
+  value?: string | number;
+  transition?: {
+    timing: string;
+    duration: number;
+    delay: number;
+  };
+}>;

package/src/interactions/ItemInteractionCtrl.ts

@@ -0,0 +1,62 @@
+import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
+import { getTransition } from './getTransition';
+import { getStyleKeysFromCSSProperty } from './CSSPropertyNameMap';
+
+export class ItemInteractionController implements ItemInteractionCtrl {
+  private transitionsInProgress: Set<string> = new Set();
+  constructor(
+    private itemId: string,
+    private registry: InteractionsRegistryPort,
+    private onChange: () => void
+  ) {
+    this.registry.register(itemId, this);
+  }
+
+  getState(keys: string[]) {
+    const stateProps = this.registry.getStatePropsForItem(this.itemId);
+    const styles = keys.reduce<Record<string, string | number>>((map, styleKey) => {
+      const prop = stateProps[styleKey];
+      if (prop?.value === undefined) return map;
+      map[styleKey] = prop.value;
+      return map;
+    }, {});
+    const transition = getTransition(stateProps, keys);
+    return {
+      styles,
+      transition
+    };
+  }
+
+  sendTrigger(type: 'click' | 'hover-in' | 'hover-out') {
+    this.registry.notifyTrigger(this.itemId, type);
+  }
+
+  handleTransitionStart = (types: string[]) => {
+    this.transitionsInProgress.clear();
+    for (const type of types) {
+      this.transitionsInProgress.add(type);
+    }
+  };
+
+  handleTransitionEnd = (cssPropKey: string) => {
+    if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-radius')) {
+      cssPropKey = 'border-radius';
+    }
+    if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-width')) {
+      cssPropKey = 'border-width';
+    }
+    const styleKeys = getStyleKeysFromCSSProperty(cssPropKey);
+    for (const key of styleKeys) {
+      const found = this.transitionsInProgress.has(key);
+      if (!found) continue;
+      this.transitionsInProgress.delete(key);
+      break;
+    }
+    if (this.transitionsInProgress.size !== 0) return;
+    this.registry.notifyTransitionEnd(this.itemId);
+  };
+
+  receiveChange() {
+    this.onChange();
+  }
+}

package/src/interactions/getTransition.ts

@@ -0,0 +1,27 @@
+import { CSSPropertyNameMap } from './CSSPropertyNameMap';
+
+export function getTransition(
+  state: Record<string, StateInfo>,
+  keys: string[]
+): string {
+  if (Object.keys(state).length === 0) return 'none';
+  const transitions = [];
+  for (const [key, params] of Object.entries(state)) {
+    if (!keys.includes(key) || !params.transition) continue;
+    const { transition: { duration, delay, timing } } = params;
+    const cssKey = CSSPropertyNameMap[key]!;
+    const nonZeroDuration = Math.max(duration, 0.01);
+    transitions.push(`${cssKey} ${nonZeroDuration}ms ${timing} ${delay}ms`);
+  }
+  return transitions.length > 0
+    ? transitions.join(', ')
+    : 'none';
+}
+
+type StateInfo = {
+  transition?: {
+    duration: number;
+    delay: number;
+    timing: string;
+  };
+};

package/src/interactions/types.ts

@@ -0,0 +1,32 @@
+import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
+
+export interface ItemInteractionCtrl {
+  getState(keys: string[]): StateCSSInfo;
+  sendTrigger(type: 'click' | 'hover-in' | 'hover-out'): void;
+  handleTransitionEnd?: (styleKey: string) => void;
+  handleTransitionStart?: (styleKeys: string[]) => void;
+  receiveChange: () => void;
+}
+
+export interface InteractionsRegistryPort {
+  register(itemId: string, ctrl: ItemInteractionCtrl): void;
+  getStatePropsForItem(itemId: string): StateProps;
+  notifyTrigger(itemId: string, type: TriggerType): void;
+  notifyTransitionEnd(itemId: string): void;
+}
+
+type StateCSSInfo = {
+  styles: Partial<Record<string, string | number>>;
+  transition?: string;
+};
+
+type StateProps = Record<keyof ItemState<ArticleItemType>, {
+  value?: string | number;
+  transition?: {
+    timing: string;
+    duration: number;
+    delay: number;
+  };
+}>;
+
+type TriggerType = 'click' | 'hover-in' | 'hover-out';

package/src/interactions/useItemInteractionCtrl.ts

@@ -0,0 +1,18 @@
+import { useMemo, useState } from 'react';
+import { ItemInteractionController } from './ItemInteractionCtrl';
+import { ItemInteractionCtrl } from './types';
+import { useInteractionsRegistry } from '../provider/InteractionsContext';
+
+export function useItemInteractionCtrl(itemId: string): ItemInteractionCtrl | undefined {
+  const [_, triggerRender] = useState(0);
+  const registry = useInteractionsRegistry();
+  const ctrl = useMemo(() => {
+    if (!registry) return;
+    return new ItemInteractionController(
+      itemId,
+      registry,
+      () => triggerRender(prev => prev + 1)
+    );
+  }, [itemId, registry]);
+  return ctrl;
+}

package/src/provider/InteractionsContext.old.tsx

@@ -0,0 +1,65 @@
+import { createContext, FC, PropsWithChildren, useState } from 'react';
+import { Interaction, InteractionTrigger } from '@cntrl-site/sdk';
+
+const defaultState = {
+  interactionsStatesMap: {},
+  interactions: [],
+  transitionTo: () => {},
+  getItemTrigger: () => null
+};
+
+export const InteractionsContextOld = createContext<{
+  interactionsStatesMap: StatesMap,
+  interactions: Interaction[],
+  transitionTo: (interactionId: string, stateId: string) => void,
+  getItemTrigger: (itemId: string, triggerType: TriggerType) => Trigger | null
+}>(defaultState);
+
+interface Props {
+  interactions: Interaction[];
+}
+
+export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ interactions, children }) => {
+  const defaultStatesMap = interactions.reduce<Record<string, string>>((map, { id, startStateId }) => {
+    map[id] = startStateId;
+    return map;
+  }, {});
+  const [interactionsStatesMap, setInteractionsStatesMap] = useState(defaultStatesMap);
+  const transitionTo = (interactionId: string, stateId: string) => {
+    setInteractionsStatesMap((map) => ({ ...map, [interactionId]: stateId }));
+  };
+  const getItemTrigger = (itemId: string, triggerType: TriggerType): Trigger | null => {
+    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
+      );
+      if (matchingTrigger) {
+        return {
+          id: interaction.id,
+          from: matchingTrigger.from,
+          to: matchingTrigger.to,
+        };
+      }
+    }
+    return null;
+  };
+  return (
+    <InteractionsContextOld.Provider value={{
+      transitionTo,
+      interactionsStatesMap,
+      interactions,
+      getItemTrigger
+    }}>
+      {children}
+    </InteractionsContextOld.Provider>
+  );
+};
+
+type StatesMap = Record<InteractionId, StateId>;
+type Trigger = { id: InteractionId, from: StateId, to: StateId };
+type TriggerType = InteractionTrigger['type'];
+type InteractionId = string;
+type StateId = string;

package/src/provider/InteractionsContext.test.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { InteractionsProvider, InteractionsContextOld } from './InteractionsContext.old';
+import { Interaction } from '@cntrl-site/sdk';
+
+describe('InteractionsProvider', () => {
+  const interactions: Interaction[] = [
+    {
+      id: 'interaction1',
+      startStateId: 'state1',
+      triggers: [
+        { itemId: 'item1', type: 'click', from: 'state1', to: 'state2' }
+      ],
+      states: [{ id: 'state1' }, { id: 'state2' }]
+    },
+    {
+      id: 'interaction2',
+      startStateId: 'state3',
+      triggers: [
+        { itemId: 'item2', type: 'hover-in', from: 'state3', to: 'state4' }
+      ],
+      states: [{ id: 'state3' }, { id: 'state4' }]
+    }
+  ];
+
+  it('should generate correct default interactionsStatesMap', () => {
+    let contextValue;
+
+    render(
+      <InteractionsProvider interactions={interactions}>
+        <InteractionsContextOld.Consumer>
+          {value => {
+            contextValue = value;
+            return null;
+          }}
+        </InteractionsContextOld.Consumer>
+      </InteractionsProvider>
+    );
+
+    expect(contextValue!).toBeDefined();
+    expect(contextValue!.interactionsStatesMap).toEqual({
+      interaction1: 'state1',
+      interaction2: 'state3'
+    });
+  });
+
+  it('should correctly update interactionsStatesMap when transitionTo is called', async () => {
+    let contextValue;
+
+    render(
+      <InteractionsProvider interactions={interactions}>
+        <InteractionsContextOld.Consumer>
+          {value => {
+            contextValue = value;
+            return null;
+          }}
+        </InteractionsContextOld.Consumer>
+      </InteractionsProvider>
+    );
+
+    expect(contextValue!).toBeDefined();
+    contextValue!.transitionTo('interaction1', 'state2');
+
+    await waitFor(() => {
+      expect(contextValue!.interactionsStatesMap['interaction1']).toBe('state2');
+    });
+  });
+
+  it('should return the correct trigger using getItemTrigger', () => {
+    let contextValue;
+
+    render(
+      <InteractionsProvider interactions={interactions}>
+        <InteractionsContextOld.Consumer>
+          {value => {
+            contextValue = value;
+            return null;
+          }}
+        </InteractionsContextOld.Consumer>
+      </InteractionsProvider>
+    );
+
+    expect(contextValue!).toBeDefined();
+
+    // Check the correct trigger is returned
+    const trigger = contextValue!.getItemTrigger('item1', 'click');
+    expect(trigger).toEqual({
+      id: 'interaction1',
+      from: 'state1',
+      to: 'state2',
+    });
+
+    // Check that no trigger is returned when conditions don't match
+    const noTrigger = contextValue!.getItemTrigger('item1', 'hover-on');
+    expect(noTrigger).toBeNull();
+  });
+});

package/src/provider/InteractionsContext.tsx

@@ -0,0 +1,28 @@
+import { createContext, FC, PropsWithChildren, useContext, useMemo } from 'react';
+import { InteractionsRegistry } from '../interactions/InteractionsRegistry';
+import { Article } from '@cntrl-site/sdk';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+
+export const InteractionsContext = createContext<InteractionsRegistry | undefined>(undefined);
+
+interface Props {
+  article: Article;
+}
+
+export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, children }) => {
+  const { layoutId } = useCurrentLayout();
+  const registry = useMemo(() => {
+    if (!layoutId) return;
+    return new InteractionsRegistry(article, layoutId);
+  }, [layoutId]);
+  return (
+    <InteractionsContext.Provider value={registry}>
+      {children}
+    </InteractionsContext.Provider>
+  );
+};
+
+export function useInteractionsRegistry(): InteractionsRegistry | undefined {
+  const registry = useContext(InteractionsContext);
+  return registry;
+}

package/src/utils/getStyleFromItemStateAndParams.ts

@@ -0,0 +1,8 @@
+export function getStyleFromItemStateAndParams<T extends string | number>(
+  stateValue: string | number | undefined,
+  paramsValue: T | undefined
+): T | undefined {
+  return (stateValue as T) !== undefined
+    ? stateValue as T
+    : paramsValue;
+}