@cntrl-site/sdk-nextjs 1.8.40 → 1.9.1

package/src/utils/getCompoundBoundaryStyles.ts

@@ -1,60 +1,60 @@
-import { AreaAnchor, DimensionMode } from '@cntrl-site/sdk';
-
-const positionMatrix: Record<AreaAnchor, [number, number]> = {
-  [AreaAnchor.TopLeft]: [0, 0],
-  [AreaAnchor.TopCenter]: [0, 0.5],
-  [AreaAnchor.TopRight]: [0, 1],
-  [AreaAnchor.MiddleLeft]: [0.5, 0],
-  [AreaAnchor.MiddleCenter]: [0.5, 0.5],
-  [AreaAnchor.MiddleRight]: [0.5, 1],
-  [AreaAnchor.BottomLeft]: [1, 0],
-  [AreaAnchor.BottomCenter]: [1, 0.5],
-  [AreaAnchor.BottomRight]: [1, 1]
-};
-
-export function getCompoundHeight(compoundSettings: CompoundSettings | undefined, height: number | undefined) {
-  if (height === undefined || !compoundSettings) return;
-  if (compoundSettings.heightMode === 'relative') {
-    return `${height * 100}%`;
-  }
-  return `${height * 100}vw`;
-}
-
-export function getCompoundWidth(compoundSettings: CompoundSettings | undefined, width: number | undefined, isRichText: boolean, exemplary?: number) {
-  if (width === undefined || !compoundSettings) return;
-  if (compoundSettings.widthMode === 'relative') {
-    return `${width * 100}%`;
-  }
-  return isRichText && exemplary ? `${width * exemplary}px` : `${width * 100}vw`;
-}
-
-export function getCompoundTop(compoundSettings: CompoundSettings | undefined, top: number | undefined) {
-  if (top === undefined || !compoundSettings) return;
-  if (compoundSettings.heightMode === 'relative') {
-    return `${top * 100}%`;
-  }
-  const [ky] = positionMatrix[compoundSettings.positionAnchor];
-  return `calc(${ky * 100}% + ${top * 100}vw)`;
-}
-
-export function getCompoundLeft(compoundSettings: CompoundSettings | undefined, left: number | undefined) {
-  if (left === undefined || !compoundSettings) return;
-  if (compoundSettings.widthMode === 'relative') {
-    return `${left * 100}%`;
-  }
-  const [_, kx] = positionMatrix[compoundSettings.positionAnchor];
-  return `calc(${kx * 100}% + ${left * 100}vw)`;
-}
-
-export function getCompoundTransform(compoundSettings: CompoundSettings | undefined) {
-  if (!compoundSettings) return 'unset';
-  const areaAnchor = compoundSettings.positionAnchor as AreaAnchor;
-  const [ky, kx] = positionMatrix[areaAnchor];
-  return `translate(${kx * (-100)}%, ${ky * (-100)}%)`;
-}
-
-type CompoundSettings = {
-  positionAnchor: AreaAnchor;
-  widthMode: DimensionMode;
-  heightMode: DimensionMode;
-};
+import { AreaAnchor, DimensionMode } from '@cntrl-site/sdk';
+
+const positionMatrix: Record<AreaAnchor, [number, number]> = {
+  [AreaAnchor.TopLeft]: [0, 0],
+  [AreaAnchor.TopCenter]: [0, 0.5],
+  [AreaAnchor.TopRight]: [0, 1],
+  [AreaAnchor.MiddleLeft]: [0.5, 0],
+  [AreaAnchor.MiddleCenter]: [0.5, 0.5],
+  [AreaAnchor.MiddleRight]: [0.5, 1],
+  [AreaAnchor.BottomLeft]: [1, 0],
+  [AreaAnchor.BottomCenter]: [1, 0.5],
+  [AreaAnchor.BottomRight]: [1, 1]
+};
+
+export function getCompoundHeight(compoundSettings: CompoundSettings | undefined, height: number | undefined) {
+  if (height === undefined || !compoundSettings) return;
+  if (compoundSettings.heightMode === 'relative') {
+    return `${height * 100}%`;
+  }
+  return `${height * 100}vw`;
+}
+
+export function getCompoundWidth(compoundSettings: CompoundSettings | undefined, width: number | undefined, isRichText: boolean, exemplary?: number) {
+  if (width === undefined || !compoundSettings) return;
+  if (compoundSettings.widthMode === 'relative') {
+    return `${width * 100}%`;
+  }
+  return isRichText && exemplary ? `${width * exemplary}px` : `${width * 100}vw`;
+}
+
+export function getCompoundTop(compoundSettings: CompoundSettings | undefined, top: number | undefined) {
+  if (top === undefined || !compoundSettings) return;
+  if (compoundSettings.heightMode === 'relative') {
+    return `${top * 100}%`;
+  }
+  const [ky] = positionMatrix[compoundSettings.positionAnchor];
+  return `calc(${ky * 100}% + ${top * 100}vw)`;
+}
+
+export function getCompoundLeft(compoundSettings: CompoundSettings | undefined, left: number | undefined) {
+  if (left === undefined || !compoundSettings) return;
+  if (compoundSettings.widthMode === 'relative') {
+    return `${left * 100}%`;
+  }
+  const [_, kx] = positionMatrix[compoundSettings.positionAnchor];
+  return `calc(${kx * 100}% + ${left * 100}vw)`;
+}
+
+export function getCompoundTransform(compoundSettings: CompoundSettings | undefined) {
+  if (!compoundSettings) return 'unset';
+  const areaAnchor = compoundSettings.positionAnchor as AreaAnchor;
+  const [ky, kx] = positionMatrix[areaAnchor];
+  return `translate(${kx * (-100)}%, ${ky * (-100)}%)`;
+}
+
+type CompoundSettings = {
+  positionAnchor: AreaAnchor;
+  widthMode: DimensionMode;
+  heightMode: DimensionMode;
+};

package/src/utils/getFill.ts

@@ -0,0 +1,46 @@
+import { FillLayer } from '@cntrl-site/sdk/dist/types/article/Item';
+
+export function getFill(fill: FillLayer) {
+  if (fill.type === 'linear-gradient' && Array.isArray(fill.colors)) {
+    return `linear-gradient(${fill.angle}deg, ${fill.colors
+      .map(c => `${c.value} ${c.position}%`)
+      .join(', ')})`;
+  }
+
+  if (fill.type === 'radial-gradient' && Array.isArray(fill.colors)) {
+    const center = fill.center
+      ? `${fill.center[0] * 100}% ${fill.center[1] * 100}%`
+      : '50% 50%';
+    const diameter = fill.diameter;
+    return `radial-gradient(circle ${diameter * 100} at ${center}, ${fill.colors
+      .map(c => `${c.value} ${c.position}%`)
+      .join(', ')})`;
+  }
+
+  if (fill.type === 'conic-gradient' && Array.isArray(fill.colors)) {
+    const center = fill.center
+      ? `${fill.center[0] * 100}% ${fill.center[1] * 100}%`
+      : '50% 50%';
+    const angle = (fill.angle ?? 0);
+    const hasMultipleStops = fill.colors.length > 1;
+    const lastStop = fill.colors[fill.colors.length - 1];
+    const shouldAppendWrapStop = hasMultipleStops && typeof lastStop.position === 'number' && lastStop.position < 100;
+    const colorsWithWrap = shouldAppendWrapStop
+      ? [...fill.colors, { value: fill.colors[0].value, position: 100 }]
+      : fill.colors;
+
+    return `conic-gradient(from ${angle + 90}deg at ${center}, ${colorsWithWrap
+      .map(c => `${c.value} ${c.position}%`)
+      .join(', ')})`;
+  }
+
+  if (fill.type === 'image' && fill.src) {
+    return `url(${fill.src})`;
+  }
+
+  if (fill.type === 'solid') {
+    return fill.value;
+  }
+
+  return 'transparent';
+}

package/src/utils/getFontFamilyValue.ts

@@ -1,3 +1,3 @@
-export function getFontFamilyValue(value: string | undefined) {
-  return value && value.includes('"') ? value : `"${value}"`;
-}
+export function getFontFamilyValue(value: string | undefined) {
+  return value && value.includes('"') ? value : `"${value}"`;
+}

package/src/utils/getInvertedRanges.ts

@@ -1,43 +1,43 @@
-interface Range {
-  start: number;
-  end: number;
-}
-
-/**
- * @param length
- * @param ranges - SORTED array of ranges [start, end)
- */
-
-export function getInvertedRanges(length: number, ranges: Range[]): Range[] {
-  if (ranges.length === 0) {
-    return [{
-      start: 0,
-      end: length
-    }];
-  }
-  const inverted: Range[] = [];
-  if (ranges[0].start > 0) {
-    inverted.push({
-      start: 0,
-      end: ranges[0].start
-    });
-  }
-  for (let i = 0; i < ranges.length - 1; i += 1) {
-    const left = ranges[i];
-    const right = ranges[i + 1];
-    if (right.start - left.end > 0) {
-      inverted.push({
-        start: left.end,
-        end: right.start
-      });
-    }
-  }
-  const lastRange = ranges[ranges.length - 1];
-  if (lastRange.end < length) {
-    inverted.push({
-      start: lastRange.end,
-      end: length
-    });
-  }
-  return inverted;
-}
+interface Range {
+  start: number;
+  end: number;
+}
+
+/**
+ * @param length
+ * @param ranges - SORTED array of ranges [start, end)
+ */
+
+export function getInvertedRanges(length: number, ranges: Range[]): Range[] {
+  if (ranges.length === 0) {
+    return [{
+      start: 0,
+      end: length
+    }];
+  }
+  const inverted: Range[] = [];
+  if (ranges[0].start > 0) {
+    inverted.push({
+      start: 0,
+      end: ranges[0].start
+    });
+  }
+  for (let i = 0; i < ranges.length - 1; i += 1) {
+    const left = ranges[i];
+    const right = ranges[i + 1];
+    if (right.start - left.end > 0) {
+      inverted.push({
+        start: left.end,
+        end: right.start
+      });
+    }
+  }
+  const lastRange = ranges[ranges.length - 1];
+  if (lastRange.end < length) {
+    inverted.push({
+      start: lastRange.end,
+      end: length
+    });
+  }
+  return inverted;
+}

package/src/utils/getItemTopStyle.ts

@@ -1,14 +1,14 @@
-import { AnchorSide } from '@cntrl-site/sdk';
-
-export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
-  const defaultValue = `${top * 100}vw`;
-  if (!anchorSide) return defaultValue;
-  switch (anchorSide) {
-    case AnchorSide.Top:
-      return defaultValue;
-    case AnchorSide.Center:
-      return `calc(50% + ${top * 100}vw)`;
-    case AnchorSide.Bottom:
-      return `calc(100% + ${top * 100}vw)`;
-  }
-}
+import { AnchorSide } from '@cntrl-site/sdk';
+
+export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
+  const defaultValue = `${top * 100}vw`;
+  if (!anchorSide) return defaultValue;
+  switch (anchorSide) {
+    case AnchorSide.Top:
+      return defaultValue;
+    case AnchorSide.Center:
+      return `calc(50% + ${top * 100}vw)`;
+    case AnchorSide.Bottom:
+      return `calc(100% + ${top * 100}vw)`;
+  }
+}

package/src/utils/getStyleFromItemStateAndParams.ts

@@ -1,8 +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;
-}
+export function getStyleFromItemStateAndParams<T>(
+  stateValue: T | undefined,
+  paramsValue: T | undefined
+): T | undefined {
+  return (stateValue as T) !== undefined
+    ? stateValue as T
+    : paramsValue;
+}

package/src/utils/getValidYoutubeUrl.ts

@@ -1,29 +1,29 @@
-enum Allowed {
-  Tiny = 'youtu.be',
-  Full = 'www.youtube.com'
-}
-
-export function getYoutubeId({ hostname, pathname, search }: URL): string {
-  if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
-    throw new Error(`Cannot get valid YouTube ID from "${hostname}" - address is not whitelisted`);
-  }
-  switch (hostname) {
-    case Allowed.Tiny:
-      return pathname.replace('/', '');
-    case Allowed.Full:
-      if (pathname.startsWith('/shorts/')) {
-        const shortsId = pathname.split('/shorts/')[1];
-        if (!shortsId) {
-          throw new Error('Cannot get valid YouTube Shorts ID from the pathname.');
-        }
-        return shortsId;
-      } else {
-        const searchParams = new URLSearchParams(search);
-        const id = searchParams.get('v');
-        if (!id) {
-          throw new Error('Cannot get valid YouTube ID from search params.');
-        }
-        return id;
-      }
-  }
-}
+enum Allowed {
+  Tiny = 'youtu.be',
+  Full = 'www.youtube.com'
+}
+
+export function getYoutubeId({ hostname, pathname, search }: URL): string {
+  if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
+    throw new Error(`Cannot get valid YouTube ID from "${hostname}" - address is not whitelisted`);
+  }
+  switch (hostname) {
+    case Allowed.Tiny:
+      return pathname.replace('/', '');
+    case Allowed.Full:
+      if (pathname.startsWith('/shorts/')) {
+        const shortsId = pathname.split('/shorts/')[1];
+        if (!shortsId) {
+          throw new Error('Cannot get valid YouTube Shorts ID from the pathname.');
+        }
+        return shortsId;
+      } else {
+        const searchParams = new URLSearchParams(search);
+        const id = searchParams.get('v');
+        if (!id) {
+          throw new Error('Cannot get valid YouTube ID from search params.');
+        }
+        return id;
+      }
+  }
+}

package/src/utils/isItemType.ts

@@ -1,5 +1,5 @@
-import { ArticleItemType, ItemAny, Item as TItem } from '@cntrl-site/sdk';
-
-export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
-  return item.type === itemType;
-}
+import { ArticleItemType, ItemAny, Item as TItem } from '@cntrl-site/sdk';
+
+export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
+  return item.type === itemType;
+}

package/src/utils/rangeMap.ts

@@ -1,13 +1,13 @@
-export function rangeMap(
-  n: number,
-  start1: number,
-  stop1: number,
-  start2: number,
-  stop2: number,
-  withinBounds: boolean = false
-): number {
-  const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
-  if (withinBounds && n < start1) return start2;
-  if (withinBounds && n > stop1) return stop2;
-  return mapped;
-}
+export function rangeMap(
+  n: number,
+  start1: number,
+  stop1: number,
+  start2: number,
+  stop2: number,
+  withinBounds: boolean = false
+): number {
+  const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
+  if (withinBounds && n < start1) return start2;
+  if (withinBounds && n > stop1) return stop2;
+  return mapped;
+}

package/src/utils/useElementRect.ts

@@ -1,23 +1,23 @@
-import { useEffect, useState } from 'react';
-
-export function useElementRect(element: HTMLElement | null): DOMRect | undefined {
-  const [rect, setRect] = useState<DOMRect | undefined>(() => element?.getBoundingClientRect());
-
-  useEffect(() => {
-    if (!element) return;
-    const observer = new ResizeObserver(entries => {
-      const el = entries.find(entry => entry.target === element);
-      if (!el) {
-        throw new Error('Element is not found in observed entries');
-      }
-      setRect(el.target.getBoundingClientRect());
-    });
-    observer.observe(element);
-    return () => {
-      observer.unobserve(element);
-      observer.disconnect();
-    };
-  }, [element]);
-
-  return rect;
-}
+import { useEffect, useState } from 'react';
+
+export function useElementRect(element: HTMLElement | null): DOMRect | undefined {
+  const [rect, setRect] = useState<DOMRect | undefined>(() => element?.getBoundingClientRect());
+
+  useEffect(() => {
+    if (!element) return;
+    const observer = new ResizeObserver(entries => {
+      const el = entries.find(entry => entry.target === element);
+      if (!el) {
+        throw new Error('Element is not found in observed entries');
+      }
+      setRect(el.target.getBoundingClientRect());
+    });
+    observer.observe(element);
+    return () => {
+      observer.unobserve(element);
+      observer.disconnect();
+    };
+  }, [element]);
+
+  return rect;
+}

package/src/provider/InteractionsContext.old.tsx

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