@cntrl-site/sdk-nextjs 1.8.40 → 1.9.0

package/src/utils/Animator/Animator.ts

@@ -2,6 +2,7 @@ import { KeyframeType, KeyframeValueMap } from '@cntrl-site/sdk';
 import { CntrlColor } from '@cntrl-site/color';
 import { binSearchInsertAt, createInsert } from '../binSearchInsertAt';
 import { rangeMap } from '../rangeMap';
+import { FillLayer } from '@cntrl-site/sdk/dist/types/article/Item';
 
 export interface AnimationData<T extends KeyframeType> {
   position: number;
@@ -18,6 +19,12 @@ export type KeyframesMap = {
   [T in KeyframeType]: AnimationData<T>[];
 };
 
+type ColorPoint = {
+  id: string;
+  value: string;
+  position: number;
+};
+
 const compare = (lhs: { position: number }, rhs: { position: number }) => lhs.position - rhs.position;
 const insertBin = createInsert(binSearchInsertAt, compare);
 
@@ -93,40 +100,32 @@ export class Animator {
     };
   }
 
-  getColor(
-    values: KeyframeValueMap[KeyframeType.Color],
+  getBorderFill(
+    values: KeyframeValueMap[KeyframeType.BorderFill],
     pos: number
-  ): KeyframeValueMap[KeyframeType.Color] {
-    const keyframes = this.keyframesMap[KeyframeType.Color];
+  ): FillLayer[] {
+    const keyframes = this.keyframesMap[KeyframeType.BorderFill];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
       const [keyframe] = keyframes;
-      return {
-        color: keyframe.value.color
-      };
+      return keyframe.value;
     }
-    const { start, end } = this.getStartEnd<KeyframeType.Color>(pos, keyframes);
-    return {
-      color: this.getRangeColor(start, end, pos)
-    };
+    const { start, end } = this.getStartEnd<KeyframeType.BorderFill>(pos, keyframes);
+    return this.getRangeGradient(start, end, pos);
   }
 
-  getBorderColor(
-    values: KeyframeValueMap[KeyframeType.BorderColor],
+  getFill(
+    values: KeyframeValueMap[KeyframeType.Fill],
     pos: number
-  ): KeyframeValueMap[KeyframeType.BorderColor] {
-    const keyframes = this.keyframesMap[KeyframeType.BorderColor];
+  ): FillLayer[] {
+    const keyframes = this.keyframesMap[KeyframeType.Fill];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
       const [keyframe] = keyframes;
-      return {
-        color: keyframe.value.color
-      };
+      return keyframe.value;
     }
-    const { start, end } = this.getStartEnd<KeyframeType.BorderColor>(pos, keyframes);
-    return {
-      color: this.getRangeColor(start, end, pos)
-    };
+    const { start, end } = this.getStartEnd<KeyframeType.Fill>(pos, keyframes);
+    return this.getRangeGradient(start, end, pos);
   }
 
   getRadius(
@@ -338,8 +337,8 @@ export class Animator {
   }
 
   private getRangeColor(
-    start: AnimationData<KeyframeType.Color | KeyframeType.BorderColor | KeyframeType.TextColor>,
-    end: AnimationData<KeyframeType.Color | KeyframeType.BorderColor | KeyframeType.TextColor>,
+    start: AnimationData<KeyframeType.TextColor>,
+    end: AnimationData<KeyframeType.TextColor>,
     position: number
   ): string {
     const rangeAmount = rangeMap(position, start.position, end.position, 0, 1, true);
@@ -348,6 +347,207 @@ export class Animator {
     const mixedColor = startColor.mix(endColor, rangeAmount);
     return mixedColor.fmt('oklch');
   }
+
+  private getRangeGradient(
+    start: AnimationData<KeyframeType.Fill | KeyframeType.BorderFill>,
+    end: AnimationData<KeyframeType.Fill | KeyframeType.BorderFill>,
+    position: number
+  ): FillLayer[] {
+    const rangeAmount = rangeMap(position, start.position, end.position, 0, 1, true);
+    const allLayerIds = new Set([
+      ...start.value.map(layer => layer.id),
+      ...end.value.map(layer => layer.id)
+    ]);
+    const result: FillLayer[] = [];
+    for (const layerId of allLayerIds) {
+      const startLayers = start.value.find(layer => layer.id === layerId);
+      const endLayers = end.value.find(layer => layer.id === layerId);
+      const startLayersArray = Array.isArray(startLayers) ? startLayers : startLayers ? [startLayers] : [];
+      const endLayersArray = Array.isArray(endLayers) ? endLayers : endLayers ? [endLayers] : [];
+      if (startLayersArray.length > 0 && endLayersArray.length === 0) {
+        result.push(...startLayersArray);
+        continue;
+      }
+      if (startLayersArray.length === 0 && endLayersArray.length > 0) {
+        result.push(...endLayersArray);
+        continue;
+      }
+      if (startLayersArray.length > 0 && endLayersArray.length > 0) {
+        result.push(...this.interpolateFillLayerArray(startLayersArray, endLayersArray, rangeAmount));
+      }
+    }
+
+    return result;
+  }
+
+  private interpolateFillLayerArray(startLayers: FillLayer[], endLayers: FillLayer[], rangeAmount: number): FillLayer[] {
+    const startLayerMap = new Map(startLayers.map(layer => [layer.id, layer]));
+    const endLayerMap = new Map(endLayers.map(layer => [layer.id, layer]));
+    const allLayerIds = new Set([
+      ...startLayers.map(layer => layer.id),
+      ...endLayers.map(layer => layer.id)
+    ]);
+
+    const interpolatedLayers: FillLayer[] = [];
+
+    for (const layerId of allLayerIds) {
+      const startLayer = startLayerMap.get(layerId);
+      const endLayer = endLayerMap.get(layerId);
+      if (startLayer && !endLayer) {
+        interpolatedLayers.push(startLayer);
+        continue;
+      }
+      if (!startLayer && endLayer) {
+        interpolatedLayers.push(endLayer);
+        continue;
+      }
+      if (startLayer && endLayer) {
+        interpolatedLayers.push(this.interpolateFillLayer(startLayer, endLayer, rangeAmount));
+      }
+    }
+    const result: FillLayer[] = [];
+    for (const startLayer of startLayers) {
+      const interpolatedLayer = interpolatedLayers.find(layer => layer.id === startLayer.id);
+      if (interpolatedLayer) {
+        result.push(interpolatedLayer);
+      }
+    }
+    for (const endLayer of endLayers) {
+      if (!startLayerMap.has(endLayer.id)) {
+        const interpolatedLayer = interpolatedLayers.find(layer => layer.id === endLayer.id);
+        if (interpolatedLayer) {
+          result.push(interpolatedLayer);
+        }
+      }
+    }
+
+    return result;
+  }
+
+  private interpolateFillLayer(startLayer: FillLayer, endLayer: FillLayer, rangeAmount: number): FillLayer {
+    if (startLayer.type !== endLayer.type) {
+      return startLayer;
+    }
+
+    switch (startLayer.type) {
+      case 'solid': {
+        const endSolidLayer = endLayer as typeof startLayer;
+        const startColor = CntrlColor.parse(startLayer.value);
+        const endColor = CntrlColor.parse(endSolidLayer.value);
+        const mixedColor = startColor.mix(endColor, rangeAmount);
+        return {
+          ...startLayer,
+          value: mixedColor.fmt('oklch')
+        };
+      }
+
+      case 'linear-gradient': {
+        const endLinearLayer = endLayer as typeof startLayer;
+        const interpolatedColors = this.interpolateColorStops(startLayer.colors, endLinearLayer.colors, rangeAmount);
+        const angle = startLayer.angle + (endLinearLayer.angle - startLayer.angle) * rangeAmount;
+        const startPoint: [number, number] = [
+          startLayer.start[0] + (endLinearLayer.start[0] - startLayer.start[0]) * rangeAmount,
+          startLayer.start[1] + (endLinearLayer.start[1] - startLayer.start[1]) * rangeAmount
+        ];
+        const endPoint: [number, number] = [
+          startLayer.end[0] + (endLinearLayer.end[0] - startLayer.end[0]) * rangeAmount,
+          startLayer.end[1] + (endLinearLayer.end[1] - startLayer.end[1]) * rangeAmount
+        ];
+        return {
+          ...startLayer,
+          colors: interpolatedColors,
+          angle,
+          start: startPoint,
+          end: endPoint
+        };
+      }
+
+      case 'radial-gradient': {
+        const endRadialLayer = endLayer as typeof startLayer;
+        const interpolatedColors = this.interpolateColorStops(startLayer.colors, endRadialLayer.colors, rangeAmount);
+        const angle = startLayer.angle + (endRadialLayer.angle - startLayer.angle) * rangeAmount;
+        const center: [number, number] = [
+          startLayer.center[0] + (endRadialLayer.center[0] - startLayer.center[0]) * rangeAmount,
+          startLayer.center[1] + (endRadialLayer.center[1] - startLayer.center[1]) * rangeAmount
+        ];
+        const diameter = startLayer.diameter + (endRadialLayer.diameter - startLayer.diameter) * rangeAmount;
+        return {
+          ...startLayer,
+          colors: interpolatedColors,
+          angle,
+          center,
+          diameter
+        };
+      }
+
+      case 'conic-gradient': {
+        const endConicLayer = endLayer as typeof startLayer;
+        const interpolatedColors = this.interpolateColorStops(startLayer.colors, endConicLayer.colors, rangeAmount);
+        const angle = startLayer.angle + (endConicLayer.angle - startLayer.angle) * rangeAmount;
+        const center: [number, number] = [
+          startLayer.center[0] + (endConicLayer.center[0] - startLayer.center[0]) * rangeAmount,
+          startLayer.center[1] + (endConicLayer.center[1] - startLayer.center[1]) * rangeAmount
+        ];
+        return {
+          ...startLayer,
+          colors: interpolatedColors,
+          angle,
+          center
+        };
+      }
+
+      case 'image': {
+        const endImageLayer = endLayer as typeof startLayer;
+        const opacity = startLayer.opacity + (endImageLayer.opacity - startLayer.opacity) * rangeAmount;
+        const backgroundSize = startLayer.backgroundSize + (endImageLayer.backgroundSize - startLayer.backgroundSize) * rangeAmount;
+        return {
+          ...startLayer,
+          opacity,
+          backgroundSize
+        };
+      }
+
+      default:
+        return startLayer;
+    }
+  }
+
+  private interpolateColorStops(startColors: ColorPoint[], endColors: ColorPoint[], rangeAmount: number): ColorPoint[] {
+    const startColorMap = new Map(startColors.map(stop => [stop.id, stop]));
+    const endColorMap = new Map(endColors.map(stop => [stop.id, stop]));
+    const allStopIds = new Set([
+      ...startColors.map(stop => stop.id),
+      ...endColors.map(stop => stop.id)
+    ]);
+
+    const interpolatedStops: ColorPoint[] = [];
+
+    for (const stopId of allStopIds) {
+      const startStop = startColorMap.get(stopId);
+      const endStop = endColorMap.get(stopId);
+      if (startStop && !endStop) {
+        interpolatedStops.push(startStop);
+        continue;
+      }
+      if (!startStop && endStop) {
+        interpolatedStops.push(endStop);
+        continue;
+      }
+      if (startStop && endStop) {
+        const startColor = CntrlColor.parse(startStop.value);
+        const endColor = CntrlColor.parse(endStop.value);
+        const mixedColor = startColor.mix(endColor, rangeAmount);
+        const position = startStop.position + (endStop.position - startStop.position) * rangeAmount;
+
+        interpolatedStops.push({
+          id: stopId,
+          value: mixedColor.fmt('oklch'),
+          position
+        });
+      }
+    }
+    return interpolatedStops.sort((a, b) => a.position - b.position);
+  }
 }
 
 function createKeyframesMap(): KeyframesMap {
@@ -356,9 +556,8 @@ function createKeyframesMap(): KeyframesMap {
     [KeyframeType.Position]: [],
     [KeyframeType.BorderWidth]: [],
     [KeyframeType.BorderRadius]: [],
-    [KeyframeType.Color]: [],
     [KeyframeType.Rotation]: [],
-    [KeyframeType.BorderColor]: [],
+    [KeyframeType.BorderFill]: [],
     [KeyframeType.Opacity]: [],
     [KeyframeType.Scale]: [],
     [KeyframeType.Blur]: [],
@@ -366,6 +565,7 @@ function createKeyframesMap(): KeyframesMap {
     [KeyframeType.LetterSpacing]: [],
     [KeyframeType.WordSpacing]: [],
     [KeyframeType.TextColor]: [],
-    [KeyframeType.FXParams]: []
+    [KeyframeType.FXParams]: [],
+    [KeyframeType.Fill]: []
   };
 }

package/src/utils/areFillsVisible/areFillsVisible.test.ts

@@ -0,0 +1,63 @@
+import { areFillsVisible, FillLayer } from './areFillsVisible';
+
+const solidFillVisible: FillLayer = {
+  type: 'solid',
+  value: 'rgba(0, 0, 0, 1)',
+};
+
+const linearFillVisible: FillLayer = {
+  type: 'linear-gradient',
+  colors: [{ value: 'rgba(0, 0, 0, 1)' }, { value: 'rgba(255, 255, 255, 1)' }],
+};
+
+const radialFillVisible: FillLayer = {
+  type: 'radial-gradient',
+  colors: [{ value: 'rgba(0, 0, 0, 1)' }, { value: 'rgba(255, 255, 255, 1)' }],
+};
+
+const conicFillVisible: FillLayer = {
+  type: 'conic-gradient',
+  colors: [{ value: 'rgba(0, 0, 0, 1)' }, { value: 'rgba(255, 255, 255, 1)' }],
+};
+
+const imageFillVisible: FillLayer = {
+  type: 'image',
+  opacity: 1,
+};
+
+const solidFillTransparent: FillLayer = {
+  type: 'solid',
+  value: 'rgba(0, 0, 0, 0)',
+};
+
+const linearFillTransparent: FillLayer = {
+  type: 'linear-gradient',
+  colors: [{ value: 'rgba(0, 0, 0, 0)' }, { value: 'rgba(255, 255, 255, 0)' }],
+};
+
+const radialFillTransparent: FillLayer = {
+  type: 'radial-gradient',
+  colors: [{ value: 'rgba(0, 0, 0, 0)' }, { value: 'rgba(255, 255, 255, 0)' }],
+};
+
+const conicFillTransparent: FillLayer = {
+  type: 'conic-gradient',
+  colors: [{ value: 'rgba(0, 0, 0, 0)' }, { value: 'rgba(255, 255, 255, 0)' }],
+};
+
+const imageFillTransparent: FillLayer = {
+  type: 'image',
+  opacity: 0,
+};
+
+describe('areFillsVisible', () => {
+  it('should return true if the fills are visible', () => {
+    expect(areFillsVisible([solidFillVisible, linearFillVisible, radialFillVisible, conicFillVisible, imageFillVisible])).toBe(true);
+  });
+  it('should return false if the fills are transparent', () => {
+    expect(areFillsVisible([solidFillTransparent, linearFillTransparent, radialFillTransparent, conicFillTransparent, imageFillTransparent])).toBe(false);
+  });
+  it('should return true if some fills are visible and some are transparent', () => {
+    expect(areFillsVisible([solidFillVisible, solidFillTransparent, linearFillVisible, linearFillTransparent, radialFillVisible, radialFillTransparent, conicFillVisible, conicFillTransparent, imageFillVisible, imageFillTransparent])).toBe(true);
+  });
+});

package/src/utils/areFillsVisible/areFillsVisible.ts

@@ -0,0 +1,37 @@
+import { CntrlColor } from '@cntrl-site/color';
+
+export function areFillsVisible(fills: FillLayer[]) {
+  return fills.some(fill => {
+    switch (fill.type) {
+      case 'solid':
+        return CntrlColor.parse(fill.value).getAlpha() !== 0;
+      case 'linear-gradient':
+        return fill.colors.some(color => CntrlColor.parse(color.value).getAlpha() !== 0);
+      case 'radial-gradient':
+        return fill.colors.some(color => CntrlColor.parse(color.value).getAlpha() !== 0);
+      case 'conic-gradient':
+        return fill.colors.some(color => CntrlColor.parse(color.value).getAlpha() !== 0);
+      case 'image':
+        return fill.opacity !== 0;
+      default:
+        return true;
+    }
+  });
+}
+
+export type FillLayer = {
+  type: 'solid';
+  value: string;
+} | {
+  type: 'linear-gradient';
+  colors: { value: string; }[];
+} | {
+  type: 'radial-gradient';
+  colors: { value: string; }[];
+} | {
+  type: 'conic-gradient';
+  colors: { value: string; }[];
+} | {
+  type: 'image';
+  opacity: number;
+}

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/getStyleFromItemStateAndParams.ts

@@ -1,5 +1,5 @@
-export function getStyleFromItemStateAndParams<T extends string | number>(
-  stateValue: string | number | undefined,
+export function getStyleFromItemStateAndParams<T>(
+  stateValue: T | undefined,
   paramsValue: T | undefined
 ): T | undefined {
   return (stateValue as T) !== undefined

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();
-  });
-});