@cntrl-site/sdk-nextjs 1.0.19-alpha.3 → 1.0.20

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

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

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];
-}

package/lib/provider/InteractionsContext.js

@@ -1,45 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InteractionsProvider = exports.InteractionsContext = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const defaultState = {
-    interactionsStatesMap: {},
-    interactions: [],
-    transitionTo: () => { },
-    getItemTrigger: () => null
-};
-exports.InteractionsContext = (0, react_1.createContext)(defaultState);
-const InteractionsProvider = ({ interactions, children }) => {
-    const defaultStatesMap = interactions.reduce((map, { id, startStateId }) => {
-        map[id] = startStateId;
-        return map;
-    }, {});
-    const [interactionsStatesMap, setInteractionsStatesMap] = (0, react_1.useState)(defaultStatesMap);
-    const transitionTo = (interactionId, stateId) => {
-        setInteractionsStatesMap((map) => (Object.assign(Object.assign({}, map), { [interactionId]: stateId })));
-    };
-    const getItemTrigger = (itemId, triggerType) => {
-        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 ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: {
-            transitionTo,
-            interactionsStatesMap,
-            interactions,
-            getItemTrigger
-        }, children: children }));
-};
-exports.InteractionsProvider = InteractionsProvider;

package/lib/utils/getStatesCSS.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getStatesCSS = void 0;
-const StateStyles_1 = require("./StateStyles/StateStyles");
-function getStatesCSS(itemId, classNamePrefix, keys, states, anchorSide) {
-    return states
-        ? Object.entries(states).map(([stateId, params]) => {
-            return `
-      .${classNamePrefix}-${itemId}-state-${stateId} {
-        ${(0, StateStyles_1.getStateStyles)(keys, params, anchorSide)};
-      }
-    `;
-        }).join('\n')
-        : '';
-}
-exports.getStatesCSS = getStatesCSS;

package/src/components/useStatesClassNames.ts

@@ -1,23 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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] : {}, [state, layoutId]);
-  const itemStatesIds = statesForLayout ? 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

@@ -1,97 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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/getStatesCSS.ts

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