@cntrl-site/sdk-nextjs 1.0.17 → 1.0.19-alpha.0

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,11 @@
-import { HoverParams, ArticleItemType, AnchorSide, ItemHoverState } from '@cntrl-site/sdk';
+import { StateParams, ArticleItemType, AnchorSide, ItemState } 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;
 
-const hoverTransformationMap: Record<keyof ItemHoverParams, HoverParamsGetter> = {
+const stateTransformationMap: Record<keyof ItemState<ArticleItemType>, 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 +24,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',
@@ -45,16 +44,17 @@ const CSSPropertyNameMap: Record<keyof ItemHoverParams, string> = {
 };
 
 export function getTransitions<T extends ArticleItemType>(
-  values: Array<keyof ItemHoverParams>,
-  hover?: ItemHoverParams
+  values: Array<keyof ItemState<ArticleItemType>>,
+  state?: ItemState<ArticleItemType>
 ): string {
-  if (!hover) return 'unset';
+  if (!state) 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 (valueName in state && state[valueName] !== undefined) {
+      // @ts-ignore TODO
+      const stateProperties = state[valueName] as StateParams<string | number>;
       return [
         ...acc,
-        `${CSSPropertyNameMap[valueName]} ${hoverProperties!.duration}ms ${hoverProperties!.timing} ${hoverProperties!.delay}ms`
+        `${CSSPropertyNameMap[valueName]} ${stateProperties!.duration}ms ${stateProperties!.timing} ${stateProperties!.delay}ms`
       ];
     }
     return acc;
@@ -63,23 +63,24 @@ export function getTransitions<T extends ArticleItemType>(
   return transitionValues.join(', ');
 }
 
-export function getHoverStyles<T extends ArticleItemType>(
-  values: Array<keyof ItemHoverParams>,
-  hover?: ItemHoverParams,
+export function getStateStyles<T extends ArticleItemType>(
+  values: Array<keyof ItemState<ArticleItemType>>,
+  state?: ItemState<ArticleItemType>,
   anchorSide?: AnchorSide
 ): 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 '';
+  const stateValues = values.reduce<string[]>((acc, valueName) => {
+    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)
+        stateTransformationMap[valueName](stateProperties.value, anchorSide)
       ];
     }
     return acc;
   }, []);
-  if (!hoverValues.length) return '';
-  return hoverValues.join('\n');
+  if (!stateValues.length) return '';
+  return stateValues.join('\n');
 }
 

package/src/utils/getStatesCSS.ts

@@ -0,0 +1,21 @@
+import { AnchorSide, ArticleItemType, ItemState } from '@cntrl-site/sdk';
+import { getStateStyles } from './StateStyles/StateStyles';
+
+export function getStatesCSS(
+  itemId: string,
+  classNamePrefix: string,
+  keys: Array<keyof ItemState<ArticleItemType>>,
+  states: Record<string, ItemState<ArticleItemType>> | undefined,
+  anchorSide?: AnchorSide
+) {
+  return states
+    ? Object.entries(states).map(([stateId, params]) => {
+      return `
+      .${classNamePrefix}-${itemId}-state-${stateId} {
+        ${getStateStyles(keys, params, anchorSide)};
+      }
+    `;
+    }).join('\n')
+    : '';
+}
+