@cntrl-site/sdk-nextjs 1.8.40-0 → 1.8.40

package/src/provider/InteractionsContext.old.tsx

@@ -1,66 +1,66 @@
-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;
+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,97 +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();
-  });
-});
+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

@@ -1,59 +1,59 @@
-import { createContext, FC, PropsWithChildren, useCallback, useContext, useEffect, useMemo } from 'react';
-import { InteractionsRegistry } from '../interactions/InteractionsRegistry';
-import { Article } from '@cntrl-site/sdk';
-import { useCurrentLayout } from '../common/useCurrentLayout';
-import { ArticleRectContext } from './ArticleRectContext';
-
-export const InteractionsContext = createContext<InteractionsRegistry | undefined>(undefined);
-
-interface Props {
-  article: Article;
-}
-
-export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, children }) => {
-  const { layoutId } = useCurrentLayout();
-  const articleRectObserver = useContext(ArticleRectContext);
-  const registry = useMemo(() => {
-    if (!layoutId) return;
-    return new InteractionsRegistry(article, layoutId);
-  }, [layoutId]);
-
-  useEffect(() => {
-    if (!registry || !articleRectObserver) return;
-    const handleScroll = () => {
-      const scrollY = window.scrollY;
-      registry.notifyScroll(scrollY);
-    };
-    return articleRectObserver.on('scroll', handleScroll);
-  }, [registry, articleRectObserver]);
-
-  const notifyLoad = useCallback(() => {
-    if (!registry) return;
-    requestAnimationFrame(() => {
-      setTimeout(() => {
-        registry.notifyLoad();
-      }, 0);
-    });
-  }, [registry]);
-
-  useEffect(() => {
-    if (document.readyState === 'complete') {
-      notifyLoad();
-    } else {
-      window.addEventListener('load', notifyLoad);
-    }
-
-    return () => window.removeEventListener('load', notifyLoad);
-  }, [notifyLoad]);
-
-  return (
-    <InteractionsContext.Provider value={registry}>
-      {children}
-    </InteractionsContext.Provider>
-  );
-};
-
-export function useInteractionsRegistry(): InteractionsRegistry | undefined {
-  const registry = useContext(InteractionsContext);
-  return registry;
-}
+import { createContext, FC, PropsWithChildren, useCallback, useContext, useEffect, useMemo } from 'react';
+import { InteractionsRegistry } from '../interactions/InteractionsRegistry';
+import { Article } from '@cntrl-site/sdk';
+import { useCurrentLayout } from '../common/useCurrentLayout';
+import { ArticleRectContext } from './ArticleRectContext';
+
+export const InteractionsContext = createContext<InteractionsRegistry | undefined>(undefined);
+
+interface Props {
+  article: Article;
+}
+
+export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, children }) => {
+  const { layoutId } = useCurrentLayout();
+  const articleRectObserver = useContext(ArticleRectContext);
+  const registry = useMemo(() => {
+    if (!layoutId) return;
+    return new InteractionsRegistry(article, layoutId);
+  }, [layoutId]);
+
+  useEffect(() => {
+    if (!registry || !articleRectObserver) return;
+    const handleScroll = () => {
+      const scrollY = window.scrollY;
+      registry.notifyScroll(scrollY);
+    };
+    return articleRectObserver.on('scroll', handleScroll);
+  }, [registry, articleRectObserver]);
+
+  const notifyLoad = useCallback(() => {
+    if (!registry) return;
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        registry.notifyLoad();
+      }, 0);
+    });
+  }, [registry]);
+
+  useEffect(() => {
+    if (document.readyState === 'complete') {
+      notifyLoad();
+    } else {
+      window.addEventListener('load', notifyLoad);
+    }
+
+    return () => window.removeEventListener('load', notifyLoad);
+  }, [notifyLoad]);
+
+  return (
+    <InteractionsContext.Provider value={registry}>
+      {children}
+    </InteractionsContext.Provider>
+  );
+};
+
+export function useInteractionsRegistry(): InteractionsRegistry | undefined {
+  const registry = useContext(InteractionsContext);
+  return registry;
+}

package/src/provider/Keyframes.ts

@@ -1,11 +1,11 @@
-import { KeyframeAny } from '@cntrl-site/sdk';
-
-export class Keyframes {
-  constructor(
-    private keyframes: KeyframeAny[] = []
-  ) {}
-
-  getItemKeyframes(itemId: string) {
-    return this.keyframes.filter(kf => kf.itemId === itemId);
-  }
-}
+import { KeyframeAny } from '@cntrl-site/sdk';
+
+export class Keyframes {
+  constructor(
+    private keyframes: KeyframeAny[] = []
+  ) {}
+
+  getItemKeyframes(itemId: string) {
+    return this.keyframes.filter(kf => kf.itemId === itemId);
+  }
+}

package/src/provider/KeyframesContext.ts

@@ -1,5 +1,5 @@
-import { createContext } from 'react';
-import { Keyframes } from './Keyframes';
-
-export const KeyframesContext = createContext(new Keyframes());
-
+import { createContext } from 'react';
+import { Keyframes } from './Keyframes';
+
+export const KeyframesContext = createContext(new Keyframes());
+

package/src/provider/LayoutContext.ts

@@ -1,3 +1,3 @@
-import { createContext } from 'react';
-
-export const LayoutContext = createContext<string | undefined>(undefined);
+import { createContext } from 'react';
+
+export const LayoutContext = createContext<string | undefined>(undefined);

package/src/provider/WebGLContextManagerContext.tsx

@@ -1,4 +1,4 @@
-import { WebGLContextManager } from '@cntrl-site/effects';
-import { createContext } from 'react';
-
-export const WebglContextManagerContext = createContext(new WebGLContextManager());
+import { WebGLContextManager } from '@cntrl-site/effects';
+import { createContext } from 'react';
+
+export const WebglContextManagerContext = createContext(new WebGLContextManager());

package/src/provider/defaultContext.ts

@@ -1,8 +1,8 @@
-import { CntrlSdkContext } from './CntrlSdkContext';
-import { CustomItemRegistry } from './CustomItemRegistry';
-import { CustomSectionRegistry } from './CustomSectionRegistry';
-
-const customItems = new CustomItemRegistry();
-const customSections = new CustomSectionRegistry();
-
-export const cntrlSdkContext = new CntrlSdkContext(customItems, customSections);
+import { CntrlSdkContext } from './CntrlSdkContext';
+import { CustomItemRegistry } from './CustomItemRegistry';
+import { CustomSectionRegistry } from './CustomSectionRegistry';
+
+const customItems = new CustomItemRegistry();
+const customSections = new CustomSectionRegistry();
+
+export const cntrlSdkContext = new CntrlSdkContext(customItems, customSections);

package/src/provider/useCntrlContext.ts

@@ -1,8 +1,8 @@
-import { useContext } from 'react';
-import { CntrlContext } from './CntrlContext';
-import { CntrlSdkContext } from './CntrlSdkContext';
-
-export function useCntrlContext(): CntrlSdkContext {
-  const context = useContext(CntrlContext);
-  return context;
-}
+import { useContext } from 'react';
+import { CntrlContext } from './CntrlContext';
+import { CntrlSdkContext } from './CntrlSdkContext';
+
+export function useCntrlContext(): CntrlSdkContext {
+  const context = useContext(CntrlContext);
+  return context;
+}

package/src/styled-jsx.d.ts

@@ -1 +1 @@
-/// <reference types="styled-jsx" />
+/// <reference types="styled-jsx" />