@cntrl-site/sdk-nextjs 1.0.18 → 1.0.19-alpha.1

package/src/components/items/VideoItem.tsx

@@ -1,16 +1,18 @@
 import { FC, useId, useMemo, useRef, useState } from 'react';
 import JSXStyle from 'styled-jsx/style';
 import { CntrlColor } from '@cntrl-site/color';
-import { ArticleItemType, getLayoutStyles, VideoItem as TVideoItem } from '@cntrl-site/sdk';
+import { getLayoutStyles, VideoItem as TVideoItem } from '@cntrl-site/sdk';
 import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useFileItem } from './useFileItem';
 import { useItemAngle } from '../useItemAngle';
 import { useCntrlContext } from '../../provider/useCntrlContext';
-import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRegisterResize } from "../../common/useRegisterResize";
 import { useLayoutContext } from '../useLayoutContext';
 import { ScrollPlaybackVideo } from '../ScrollPlaybackVideo';
+import { useStatesClassNames } from '../useStatesClassNames';
+import { getStatesCSS } from '../../utils/getStatesCSS';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -22,8 +24,12 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const layoutId = useLayoutContext();
   const scrollPlayback = layoutId ? item.layoutParams[layoutId].scrollPlayback : null;
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
+  const statesWrapperClassNames = useStatesClassNames(item.id, item.state, 'video-wrapper');
+  const statesVideoClassNames = useStatesClassNames(item.id, item.state, 'video');
   const hasScrollPlayback = scrollPlayback !== null;
+  useStatesTransitions(ref, item.state, ['angle', 'opacity', 'blur']);
+  useStatesTransitions(videoRef.current, item.state, ['strokeWidth', 'radius', 'strokeColor']);
   useRegisterResize(ref, onResize);
   const inlineStyles = {
     ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
@@ -34,7 +40,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
-        className={`video-wrapper-${item.id}`}
+        className={`video-wrapper-${item.id} ${statesWrapperClassNames}`}
         ref={setRef}
         style={{
           ...(opacity !== undefined ? { opacity } : {}),
@@ -48,7 +54,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
             src={item.commonParams.url}
             playbackParams={scrollPlayback}
             style={inlineStyles}
-            className={`video video-playback-wrapper video-${item.id}`}
+            className={`video video-playback-wrapper video-${item.id} ${statesWrapperClassNames}`}
           />
           ) : (
           <video
@@ -58,7 +64,7 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
             muted
             loop
             playsInline
-            className={`video video-${item.id}`}
+            className={`video video-${item.id} ${statesVideoClassNames}`}
             style={inlineStyles}
           >
             <source src={item.commonParams.url} />
@@ -92,26 +98,24 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId, onResize
           display: flex;
           justify-content: center;
         }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
+          const wrapperStatesCSS = getStatesCSS(item.id, 'video-wrapper', ['angle', 'opacity', 'blur'], stateParams);
+          const videoStatesCSS = getStatesCSS(item.id, 'video', ['strokeWidth', 'radius', 'strokeColor'], stateParams);
           return (`
             .video-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              transition: ${getTransitions<ArticleItemType.Video>(['angle', 'opacity', 'blur'], hoverParams)};
-            }
-            .video-wrapper-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.Video>(['angle', 'opacity', 'blur'], hoverParams)};
+              transition: all 0.2s ease;
             }
             .video-${item.id} {
               border-color: ${CntrlColor.parse(layoutParams.strokeColor).fmt('rgba')};
               border-radius: ${layoutParams.radius * 100}vw;
               border-width: ${layoutParams.strokeWidth * 100}vw;
-              transition: ${getTransitions<ArticleItemType.Video>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
-            }
-            .video-wrapper-${item.id}:hover .video {
-              ${getHoverStyles<ArticleItemType.Video>(['strokeWidth', 'radius', 'strokeColor'], hoverParams)};
+              transition: all 0.2s ease;
             }
+            ${wrapperStatesCSS}
+            ${videoStatesCSS}
           `);
         })}
     `}</JSXStyle>

package/src/components/items/VimeoEmbed.tsx

@@ -5,10 +5,12 @@ import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
-import { ArticleItemType, getLayoutStyles, VimeoEmbedItem as TVimeoEmbedItem } from '@cntrl-site/sdk';
+import { getLayoutStyles, VimeoEmbedItem as TVimeoEmbedItem } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../provider/useCntrlContext';
-import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
 import { useRegisterResize } from "../../common/useRegisterResize";
+import { useStatesClassNames } from '../useStatesClassNames';
+import { getStatesCSS } from '../../utils/getStatesCSS';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -21,8 +23,12 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   const [ref, setRef] = useState<HTMLDivElement | null>(null);
   const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
   const [isCoverVisible, setIsCoverVisible] = useState(false);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
+  const wrapperClassNames = useStatesClassNames(item.id, item.state, 'embed-video-wrapper');
+  const videoClassNames = useStatesClassNames(item.id, item.state, 'embed-video');
   useRegisterResize(ref, onResize);
+  useStatesTransitions(ref, item.state, ['angle', 'blur', 'opacity']);
+  useStatesTransitions(iframeRef, item.state, ['radius']);
   const getValidVimeoUrl = (url: string): string => {
     const validURL = new URL(url);
     validURL.searchParams.append('controls', String(controls));
@@ -60,7 +66,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
-        className={`embed-video-wrapper-${item.id}`}
+        className={`embed-video-wrapper-${item.id} ${wrapperClassNames}`}
         ref={setRef}
         style={{
           ...(opacity !== undefined ? { opacity } : {}),
@@ -96,7 +102,7 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         )}
         <iframe
           ref={setIframeRef}
-          className="embedVideo"
+          className={`embed-video ${videoClassNames}`}
           src={validUrl || ''}
           allow="autoplay; fullscreen; picture-in-picture;"
           allowFullScreen
@@ -111,31 +117,29 @@ export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, sectionId
         width: 100%;
         height: 100%;
       }
-      .embedVideo {
+      .embed-video {
         width: 100%;
         height: 100%;
         z-index: 1;
         border: none;
         overflow: hidden;
       }
-      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+      ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
+        const wrapperStatesCSS = getStatesCSS(item.id, 'embed-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
+        const videoStatesCSS = getStatesCSS(item.id, 'embed-video', ['radius'], stateParams);
         return (`
           .embed-video-wrapper-${item.id} {
             opacity: ${layoutParams.opacity};
             transform: rotate(${area.angle}deg);
             filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-            transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
+            transition: all 0.2s ease;
           }
-          .embed-video-wrapper-${item.id}:hover {
-            ${getHoverStyles<ArticleItemType.VimeoEmbed>(['angle', 'blur', 'opacity'], hoverParams)}
-          }
-          .embed-video-wrapper-${item.id} .embedVideo {
+          .embed-video-wrapper-${item.id} .embed-video {
             border-radius: ${layoutParams.radius * 100}vw;
-            transition: ${getTransitions<ArticleItemType.VimeoEmbed>(['radius'], hoverParams)};
-          }
-          .embed-video-wrapper-${item.id}:hover .embedVideo {
-            ${getHoverStyles<ArticleItemType.VimeoEmbed>(['radius'], hoverParams)};
+            transition: all 0.2s ease;
           }
+          ${wrapperStatesCSS}
+          ${videoStatesCSS}
         `);
       })}
     `}</JSXStyle>

package/src/components/items/YoutubeEmbed.tsx

@@ -5,12 +5,14 @@ import { LinkWrapper } from '../LinkWrapper';
 import { getYoutubeId } from '../../utils/getValidYoutubeUrl';
 import { useEmbedVideoItem } from './useEmbedVideoItem';
 import { useItemAngle } from '../useItemAngle';
-import { ArticleItemType, getLayoutStyles, YoutubeEmbedItem as TYoutubeEmbedItem } from '@cntrl-site/sdk';
-import { getHoverStyles, getTransitions } from '../../utils/HoverStyles/HoverStyles';
+import { getLayoutStyles, YoutubeEmbedItem as TYoutubeEmbedItem } from '@cntrl-site/sdk';
 import { useCntrlContext } from '../../provider/useCntrlContext';
 import { useYouTubeIframeApi } from '../../utils/Youtube/useYouTubeIframeApi';
 import { YTPlayer } from '../../utils/Youtube/YoutubeIframeApi';
 import { useRegisterResize } from "../../common/useRegisterResize";
+import { useStatesClassNames } from '../useStatesClassNames';
+import { getStatesCSS } from '../../utils/getStatesCSS';
+import { useStatesTransitions } from '../useStatesTransitions';
 
 export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, sectionId, onResize }) => {
   const id = useId();
@@ -20,12 +22,16 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   const angle = useItemAngle(item, sectionId);
   const YT = useYouTubeIframeApi();
   const [div, setDiv] = useState<HTMLDivElement | null>(null);
+  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
   const [player, setPlayer] = useState<YTPlayer | undefined>(undefined);
   const [isCoverVisible, setIsCoverVisible] = useState(false);
   const [imgRef, setImgRef] = useState<HTMLImageElement | null>(null);
-  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state.hover];
+  const layoutValues: Record<string, any>[] = [item.area, item.layoutParams, item.state];
+  const wrapperClassNames = useStatesClassNames(item.id, item.state, 'embed-youtube-video-wrapper');
+  const embedClassNames = useStatesClassNames(item.id, item.state, 'embed');
   useRegisterResize(div, onResize);
-
+  useStatesTransitions(wrapperRef, item.state, ['angle', 'blur', 'opacity']);
+  useStatesTransitions(div, item.state, ['radius']);
   useEffect(() => {
     const newUrl = new URL(url);
     const videoId = getYoutubeId(newUrl);
@@ -78,7 +84,8 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
   return (
     <LinkWrapper url={item.link?.url} target={item.link?.target}>
       <div
-        className={`embed-youtube-video-wrapper-${item.id}`}
+        ref={setWrapperRef}
+        className={`embed-youtube-video-wrapper-${item.id} ${wrapperClassNames}`}
         onMouseEnter={() => {
           if (!player || play !== 'on-hover') return;
           player.playVideo();
@@ -113,11 +120,10 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
           />
         )}
         <div
-          className={`embed-${item.id}`}
+          className={`embed-${item.id} ${embedClassNames}`}
           ref={setDiv}
           style={{
             ...(radius !== undefined  ? { borderRadius: `${radius * 100}vw` } : {}),
-
           }}
         />
       </div>
@@ -137,24 +143,22 @@ export const YoutubeEmbedItem: FC<ItemProps<TYoutubeEmbedItem>> = ({ item, secti
           z-index: 1;
           border: none;
         }
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hoverParams]) => {
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, stateParams]) => {
+          const wrapperStatesCSS = getStatesCSS(item.id, 'embed-youtube-video-wrapper', ['angle', 'blur', 'opacity'], stateParams);
+          const embedStatesCSS = getStatesCSS(item.id, 'embed', ['radius'], stateParams);
           return (`
             .embed-youtube-video-wrapper-${item.id} {
               opacity: ${layoutParams.opacity};
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
-              transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
+              transition: all 0.2s ease;
             }
             .embed-youtube-video-wrapper-${item.id} .embed-${item.id} {
               border-radius: ${layoutParams.radius * 100}vw;
-              transition: ${getTransitions<ArticleItemType.YoutubeEmbed>(['radius'], hoverParams)};
-            }
-            .embed-youtube-video-wrapper-${item.id}:hover {
-              ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['angle', 'blur', 'opacity'], hoverParams)};
-            }
-            .embed-youtube-video-wrapper-${item.id}:hover .embed-${item.id} {
-              ${getHoverStyles<ArticleItemType.YoutubeEmbed>(['radius'], hoverParams)};
+              transition: all 0.2s ease;
             }
+            ${wrapperStatesCSS}
+            ${embedStatesCSS}
           `);
       })}
       `}</JSXStyle>

package/src/components/useStatesClassNames.ts

@@ -0,0 +1,23 @@
+import { ItemStateParams } from '@cntrl-site/sdk';
+import { useContext } from 'react';
+import { InteractionsContext } from '../provider/InteractionsContext';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+
+export function useStatesClassNames(
+  itemId: string,
+  itemStates: Record<LayoutId, Record<StateId, ItemStateParams>>,
+  uniquePrefix: string, // unique in terms of item type, ie. rectangle, code-embed, group etc
+): string {
+  const { interactionsStatesMap } = useContext(InteractionsContext);
+  const { layoutId } = useCurrentLayout();
+  const activeStates = Object.values(interactionsStatesMap);
+  const statesForLayout = layoutId ? itemStates[layoutId] : {};
+  const stateClassNames = Object.keys(statesForLayout ?? {})
+    .filter((stateId) => activeStates.includes(stateId))
+    .map((stateId) => `${uniquePrefix}-${itemId}-state-${stateId}`)
+    .join(' ');
+  return stateClassNames;
+}
+
+type StateId = string;
+type LayoutId = string;

package/src/components/useStatesTransitions.ts

@@ -0,0 +1,95 @@
+import { ArticleItemType, ItemState, ItemStateParams, ItemStatesMap } from '@cntrl-site/sdk';
+import { useContext, useEffect, useMemo } from 'react';
+import { InteractionsContext } from '../provider/InteractionsContext';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+
+type AllKeys<T> = T extends any ? keyof T : never;
+type StatePropertyKey = AllKeys<ItemStatesMap[keyof ItemStatesMap]>;
+
+export function useStatesTransitions(
+  el: HTMLElement | null,
+  state: ItemState<ArticleItemType>,
+  values: StatePropertyKey[]
+) {
+  const { interactionsStatesMap } = useContext(InteractionsContext);
+  const { layoutId } = useCurrentLayout();
+  const activeStates = Object.values(interactionsStatesMap);
+  const statesForLayout = useMemo(() => layoutId ? state[layoutId] : {}, [layoutId]);
+  const itemStatesIds = Object.keys(statesForLayout);
+  const itemActiveStateId = activeStates.find((stateId) => itemStatesIds.includes(stateId));
+  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]);
+}
+
+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'
+};
+
+function getTransition(
+  state: ItemStateParams,
+  direction: 'in' | 'out',
+  values: string[]
+) {
+  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: ItemStateParams, direction: 'in' | 'out', values: string[]): string {
+  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];
+}

package/src/provider/InteractionsContext.test.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import { InteractionsProvider, InteractionsContext } from './InteractionsContext';
+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}>
+        <InteractionsContext.Consumer>
+          {value => {
+            contextValue = value;
+            return null;
+          }}
+        </InteractionsContext.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}>
+        <InteractionsContext.Consumer>
+          {value => {
+            contextValue = value;
+            return null;
+          }}
+        </InteractionsContext.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}>
+        <InteractionsContext.Consumer>
+          {value => {
+            contextValue = value;
+            return null;
+          }}
+        </InteractionsContext.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,65 @@
+import { createContext, FC, PropsWithChildren, useState } from 'react';
+import { Interaction, InteractionTrigger } from '@cntrl-site/sdk';
+
+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);
+
+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 (
+    <InteractionsContext.Provider value={{
+      transitionTo,
+      interactionsStatesMap,
+      interactions,
+      getItemTrigger
+    }}>
+      {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;

package/src/utils/{HoverStyles/HoverStyles.ts → StateStyles/StateStyles.ts}

@@ -1,12 +1,12 @@
-import { HoverParams, ArticleItemType, AnchorSide, ItemHoverState } from '@cntrl-site/sdk';
+import { StateParams, ArticleItemType, AnchorSide, ItemState, ItemStatesMap } from '@cntrl-site/sdk';
 import { CntrlColor } from '@cntrl-site/color';
 import { getItemTopStyle } from '../getItemTopStyle';
 
-type UnionToIntersection<U> = (U extends any ? (arg: U) => void : never) extends (arg: infer I) => void ? I : never;
-type HoverParamsGetter = (value: any, anchorSide?: AnchorSide) => string;
-type ItemHoverParams = Omit<UnionToIntersection<ItemHoverState>, 'autoplay'>;
+type StateParamsGetter = (value: any, anchorSide?: AnchorSide) => string;
+type AllKeys<T> = T extends any ? keyof T : never;
+type StatePropertyKey = AllKeys<ItemStatesMap[keyof ItemStatesMap]>;
 
-const hoverTransformationMap: Record<keyof ItemHoverParams, HoverParamsGetter> = {
+const stateTransformationMap: Record<StatePropertyKey, StateParamsGetter> = {
   'width': (width: number) => `width: ${width * 100}vw !important;`,
   'height': (height: number) => `height: ${height * 100}vw !important;`,
   'top': (top: number, anchorSide?: AnchorSide) => `top: ${getItemTopStyle(top, anchorSide)} !important;`,
@@ -25,7 +25,7 @@ const hoverTransformationMap: Record<keyof ItemHoverParams, HoverParamsGetter> =
   'wordSpacing': (wordSpacing: number) => `word-spacing: ${wordSpacing * 100}vw !important;`
 };
 
-const CSSPropertyNameMap: Record<keyof ItemHoverParams, string> = {
+const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
   'width': 'width',
   'height': 'height',
   'top': 'top',
@@ -44,42 +44,56 @@ const CSSPropertyNameMap: Record<keyof ItemHoverParams, string> = {
   'color': 'color'
 };
 
-export function getTransitions<T extends ArticleItemType>(
-  values: Array<keyof ItemHoverParams>,
-  hover?: ItemHoverParams
+export function getStateStyles<T extends ArticleItemType>(
+  values: Array<StatePropertyKey>,
+  state?: ItemStatesMap[T],
+  anchorSide?: AnchorSide
 ): string {
-  if (!hover) return 'unset';
-  const transitionValues = values.reduce<string[]>((acc, valueName) => {
-    if (valueName in hover && hover[valueName] !== undefined) {
-      const hoverProperties = hover[valueName] as HoverParams<string | number>;
+  if (!state) return '';
+
+  const stateValues = values.reduce<string[]>((acc, valueName) => {
+    // @ts-ignore
+    if (valueName in state && state[valueName] !== undefined) {
+      // @ts-ignore
+      const stateProperties = state[valueName] as StateParams<string | number>;
+      const getter = stateTransformationMap[valueName] as StateParamsGetter;
       return [
         ...acc,
-        `${CSSPropertyNameMap[valueName]} ${hoverProperties!.duration}ms ${hoverProperties!.timing} ${hoverProperties!.delay}ms`
+        getter(stateProperties.value, anchorSide)
       ];
     }
     return acc;
   }, []);
-  if (!transitionValues.length) return 'unset';
-  return transitionValues.join(', ');
+
+  if (!stateValues.length) return '';
+  // @ts-ignore
+  const transitionStr = getTransitions(values, state);
+  stateValues.push(`transition: ${transitionStr};`);
+  return stateValues.join('\n');
 }
 
-export function getHoverStyles<T extends ArticleItemType>(
-  values: Array<keyof ItemHoverParams>,
-  hover?: ItemHoverParams,
-  anchorSide?: AnchorSide
+export function getTransitions<T extends ArticleItemType>(
+  values: Array<StatePropertyKey>,
+  state?: ItemStatesMap[T]
 ): string {
-  if (!hover) return '';
-  const hoverValues = values.reduce<string[]>((acc, valueName) => {
-    if (valueName in hover && hover[valueName] !== undefined) {
-      const hoverProperties = hover[valueName] as HoverParams<string | number>;
+  if (!state) return 'unset';
+  const transitionValues = values.reduce<string[]>((acc, valueName) => {
+    // @ts-ignore TODO
+    if (valueName in state && state[valueName] !== undefined) {
+      // @ts-ignore TODO
+      const stateProperties = state[valueName] as StateParams<string | number>;
       return [
         ...acc,
-        hoverTransformationMap[valueName](hoverProperties.value, anchorSide)
+        // @ts-ignore
+        `${CSSPropertyNameMap[valueName]} ${stateProperties!.duration}ms ${stateProperties!.timing} ${stateProperties!.delay}ms`
       ];
     }
     return acc;
   }, []);
-  if (!hoverValues.length) return '';
-  return hoverValues.join('\n');
+  if (!transitionValues.length) return 'unset';
+  return transitionValues.join(', ');
 }
 
+// export function getStateTransitions<T extends ArticleItemType>(
+//
+// )