@cntrl-site/sdk-nextjs 1.0.19-alpha.2 → 1.0.19-alpha.4

package/src/interactions/InteractionsRegistry.ts

@@ -0,0 +1,193 @@
+import { InteractionsRegistryPort, ItemInteractionCtrl } from './types';
+import {
+  Article,
+  ArticleItemType,
+  Interaction,
+  InteractionTrigger,
+  ItemAny,
+  ItemState,
+  StateParams
+} from '@cntrl-site/sdk';
+
+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 itemStageMap: ItemStageMap;
+
+  constructor(article: Article, private layoutId: string) {
+    const { interactions } = article;
+    const items = article.sections.flatMap((section) => section.items);
+    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;
+    }, {});
+    const itemStageMap = items.reduce<ItemStageMap>((map, item) => {
+      map[item.id] = { type: 'active', isStartState: true };
+      return map;
+    }, {});
+    const stateItemsIdsMap = activeStatesIds.reduce<StateItemsIdsMap>((map, stateId) => {
+      map[stateId] = 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.items = items;
+    this.interactions = interactions;
+    this.itemStageMap = itemStageMap;
+    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 stage = this.itemStageMap[itemId];
+    if (!stage) return {};
+    // handle "active" stage
+    if (stage.type === 'active') {
+      if (stage.isStartState) return {};
+      const params = item.state[layoutId]?.[stage.stateId!];
+      const stateProps = Object.entries(params).reduce<StateProps>((map, [key, stateDetails]) => {
+        const style = key as keyof ItemState<ArticleItemType>;
+        map[style] = {
+          value: stateDetails.value
+        };
+        return map;
+      }, {});
+      return stateProps;
+    }
+    // handle "transitioning" stage
+    const activeStateId = stage.direction === 'in' ? stage.to : stage.from;
+    const params = item.state[layoutId]?.[activeStateId];
+    return Object.entries(params).reduce<StateProps>((map, [key, stateDetails]) => {
+      const style = key as keyof ItemState<ArticleItemType>;
+      const details = stateDetails as StateParams<string | number>;
+      map[style] = {
+        value: stage.direction === 'in' ? details.value : undefined,
+        transition: {
+          timing: details[stage.direction].timing,
+          duration: details[stage.direction].duration,
+          delay: details[stage.direction].delay
+        }
+      };
+      return map;
+    }, {});
+  }
+
+  notifyTrigger(itemId: string, triggerType: TriggerType): void {
+    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] ?? [];
+      for (const [itemId, stage] of Object.entries(this.itemStageMap)) {
+        if (!transitioningItems.includes(itemId)) continue;
+        this.itemStageMap[itemId] = {
+          type: 'transitioning',
+          from: stage.type === 'transitioning' ? stage.to : stage.stateId!,
+          to: matchingTrigger.to,
+          direction: isNewStateActive ? 'in' : 'out'
+        };
+      }
+      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 prevState = this.itemStageMap[itemId];
+    if (prevState.type !== 'transitioning') return; // throw?
+    this.itemStageMap[itemId] = {
+      type: 'active',
+      stateId: prevState.to,
+      isStartState: prevState.direction === 'out'
+    };
+    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();
+    }
+  }
+}
+
+type ItemStageMap = Record<ItemId, TransitioningStage | ActiveStage>;
+type TransitioningStage = {
+  type: 'transitioning';
+  from: StateId;
+  to: StateId;
+  direction: 'in' | 'out';
+};
+type ActiveStage = { type: 'active'; stateId?: string; isStartState: boolean; };
+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,56 @@
+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) => {
+    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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, waitFor } from '@testing-library/react';
-import { InteractionsProvider, InteractionsContext } from './InteractionsContext';
+import { InteractionsProvider, InteractionsContextOld } from './InteractionsContext.old';
 import { Interaction } from '@cntrl-site/sdk';
 
 describe('InteractionsProvider', () => {
@@ -28,12 +28,12 @@ describe('InteractionsProvider', () => {
 
     render(
       <InteractionsProvider interactions={interactions}>
-        <InteractionsContext.Consumer>
+        <InteractionsContextOld.Consumer>
           {value => {
             contextValue = value;
             return null;
           }}
-        </InteractionsContext.Consumer>
+        </InteractionsContextOld.Consumer>
       </InteractionsProvider>
     );
 
@@ -49,12 +49,12 @@ describe('InteractionsProvider', () => {
 
     render(
       <InteractionsProvider interactions={interactions}>
-        <InteractionsContext.Consumer>
+        <InteractionsContextOld.Consumer>
           {value => {
             contextValue = value;
             return null;
           }}
-        </InteractionsContext.Consumer>
+        </InteractionsContextOld.Consumer>
       </InteractionsProvider>
     );
 
@@ -71,12 +71,12 @@ describe('InteractionsProvider', () => {
 
     render(
       <InteractionsProvider interactions={interactions}>
-        <InteractionsContext.Consumer>
+        <InteractionsContextOld.Consumer>
           {value => {
             contextValue = value;
             return null;
           }}
-        </InteractionsContext.Consumer>
+        </InteractionsContextOld.Consumer>
       </InteractionsProvider>
     );
 

package/src/provider/InteractionsContext.tsx

@@ -1,65 +1,28 @@
-import { createContext, FC, PropsWithChildren, useState } from 'react';
-import { Interaction, InteractionTrigger } from '@cntrl-site/sdk';
+import { createContext, FC, PropsWithChildren, useContext, useMemo } from 'react';
+import { InteractionsRegistry } from '../interactions/InteractionsRegistry';
+import { Article } from '@cntrl-site/sdk';
+import { useCurrentLayout } from '../common/useCurrentLayout';
 
-const defaultState = {
-  interactionsStatesMap: {},
-  interactions: [],
-  transitionTo: () => {},
-  getItemTrigger: () => null
-};
-
-export const InteractionsContext = createContext<{
-  interactionsStatesMap: StatesMap,
-  interactions: Interaction[],
-  transitionTo: (interactionId: string, stateId: string) => void,
-  getItemTrigger: (itemId: string, triggerType: TriggerType) => Trigger | null
-}>(defaultState);
+export const InteractionsContext = createContext<InteractionsRegistry | undefined>(undefined);
 
 interface Props {
-  interactions: Interaction[];
+  article: Article;
 }
 
-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;
-  };
+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={{
-      transitionTo,
-      interactionsStatesMap,
-      interactions,
-      getItemTrigger
-    }}>
+    <InteractionsContext.Provider value={registry}>
       {children}
     </InteractionsContext.Provider>
   );
 };
 
-type StatesMap = Record<InteractionId, StateId>;
-type Trigger = { id: InteractionId, from: StateId, to: StateId };
-type TriggerType = InteractionTrigger['type'];
-type InteractionId = string;
-type StateId = string;
+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;
+}

package/lib/components/useStatesClassNames.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStatesClassNames = void 0;
-const react_1 = require("react");
-const InteractionsContext_1 = require("../provider/InteractionsContext");
-const useCurrentLayout_1 = require("../common/useCurrentLayout");
-function useStatesClassNames(itemId, itemStates, uniquePrefix) {
-    const { interactionsStatesMap } = (0, react_1.useContext)(InteractionsContext_1.InteractionsContext);
-    const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
-    const activeStates = Object.values(interactionsStatesMap);
-    const statesForLayout = layoutId ? itemStates[layoutId] : {};
-    const stateClassNames = Object.keys(statesForLayout !== null && statesForLayout !== void 0 ? statesForLayout : {})
-        .filter((stateId) => activeStates.includes(stateId))
-        .map((stateId) => `${uniquePrefix}-${itemId}-state-${stateId}`)
-        .join(' ');
-    return stateClassNames;
-}
-exports.useStatesClassNames = useStatesClassNames;

package/lib/components/useStatesTransitions.js

@@ -1,89 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStatesTransitions = void 0;
-const react_1 = require("react");
-const InteractionsContext_1 = require("../provider/InteractionsContext");
-const useCurrentLayout_1 = require("../common/useCurrentLayout");
-function useStatesTransitions(el, state, values) {
-    const { interactionsStatesMap } = (0, react_1.useContext)(InteractionsContext_1.InteractionsContext);
-    const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
-    const activeStates = Object.values(interactionsStatesMap);
-    const statesForLayout = (0, react_1.useMemo)(() => layoutId ? state[layoutId] : {}, [state, layoutId]);
-    const itemStatesIds = statesForLayout ? Object.keys(statesForLayout) : [];
-    const itemActiveStateId = activeStates.find((stateId) => itemStatesIds.includes(stateId));
-    (0, react_1.useEffect)(() => {
-        if (!itemActiveStateId || !el)
-            return;
-        const state = statesForLayout[itemActiveStateId];
-        const transitionStr = getTransition(state, 'in', values);
-        const slowestProp = getSlowestProperty(state, 'in', values);
-        if (!transitionStr)
-            return;
-        el.style.transition = transitionStr;
-        el.ontransitionend = (e) => {
-            e.stopPropagation();
-            if (e.target !== el || e.propertyName !== slowestProp)
-                return;
-            el.style.transition = 'none';
-        };
-        return () => {
-            const transitionStr = getTransition(state, 'out', values);
-            const slowestProp = getSlowestProperty(state, 'out', values);
-            if (!transitionStr)
-                return;
-            el.style.transition = transitionStr;
-            el.ontransitionend = (e) => {
-                e.stopPropagation();
-                if (e.target !== el || e.propertyName !== slowestProp)
-                    return;
-                el.style.transition = 'none';
-            };
-        };
-    }, [itemActiveStateId, statesForLayout, el]);
-}
-exports.useStatesTransitions = useStatesTransitions;
-const CSSPropertyNameMap = {
-    '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'
-};
-function getTransition(state, direction, values) {
-    return Object.entries(state)
-        .filter(([key]) => values.includes(key))
-        .map(([key, params]) => {
-        const cssKey = CSSPropertyNameMap[key];
-        if (!cssKey) {
-            throw new Error(`Cannot translate "${key}" to a CSS property.`);
-        }
-        return `${cssKey} ${params[direction].duration}ms ${params[direction].timing} ${params[direction].delay}ms`;
-    }, [])
-        .join(', ');
-}
-function getSlowestProperty(state, direction, values) {
-    const mappedEntries = Object.entries(state)
-        .filter(([key]) => values.includes(key))
-        .map(([key, params]) => {
-        const transitionParams = params[direction];
-        return {
-            key,
-            time: transitionParams.duration + transitionParams.delay
-        };
-    });
-    if (mappedEntries.length === 0)
-        return '';
-    const { key } = mappedEntries.reduce((slowest, current) => current.time > slowest.time ? current : slowest);
-    return CSSPropertyNameMap[key];
-}