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

package/src/utils/Animator/Animator.ts

@@ -2,7 +2,6 @@ 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;
@@ -19,12 +18,6 @@ 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);
 
@@ -100,32 +93,40 @@ export class Animator {
     };
   }
 
-  getBorderFill(
-    values: KeyframeValueMap[KeyframeType.BorderFill],
+  getColor(
+    values: KeyframeValueMap[KeyframeType.Color],
     pos: number
-  ): FillLayer[] {
-    const keyframes = this.keyframesMap[KeyframeType.BorderFill];
+  ): KeyframeValueMap[KeyframeType.Color] {
+    const keyframes = this.keyframesMap[KeyframeType.Color];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
       const [keyframe] = keyframes;
-      return keyframe.value;
+      return {
+        color: keyframe.value.color
+      };
     }
-    const { start, end } = this.getStartEnd<KeyframeType.BorderFill>(pos, keyframes);
-    return this.getRangeGradient(start, end, pos);
+    const { start, end } = this.getStartEnd<KeyframeType.Color>(pos, keyframes);
+    return {
+      color: this.getRangeColor(start, end, pos)
+    };
   }
 
-  getFill(
-    values: KeyframeValueMap[KeyframeType.Fill],
+  getBorderColor(
+    values: KeyframeValueMap[KeyframeType.BorderColor],
     pos: number
-  ): FillLayer[] {
-    const keyframes = this.keyframesMap[KeyframeType.Fill];
+  ): KeyframeValueMap[KeyframeType.BorderColor] {
+    const keyframes = this.keyframesMap[KeyframeType.BorderColor];
     if (!keyframes || !keyframes.length) return values;
     if (keyframes.length === 1) {
       const [keyframe] = keyframes;
-      return keyframe.value;
+      return {
+        color: keyframe.value.color
+      };
     }
-    const { start, end } = this.getStartEnd<KeyframeType.Fill>(pos, keyframes);
-    return this.getRangeGradient(start, end, pos);
+    const { start, end } = this.getStartEnd<KeyframeType.BorderColor>(pos, keyframes);
+    return {
+      color: this.getRangeColor(start, end, pos)
+    };
   }
 
   getRadius(
@@ -337,8 +338,8 @@ export class Animator {
   }
 
   private getRangeColor(
-    start: AnimationData<KeyframeType.TextColor>,
-    end: AnimationData<KeyframeType.TextColor>,
+    start: AnimationData<KeyframeType.Color | KeyframeType.BorderColor | KeyframeType.TextColor>,
+    end: AnimationData<KeyframeType.Color | KeyframeType.BorderColor | KeyframeType.TextColor>,
     position: number
   ): string {
     const rangeAmount = rangeMap(position, start.position, end.position, 0, 1, true);
@@ -347,207 +348,6 @@ 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 {
@@ -556,8 +356,9 @@ function createKeyframesMap(): KeyframesMap {
     [KeyframeType.Position]: [],
     [KeyframeType.BorderWidth]: [],
     [KeyframeType.BorderRadius]: [],
+    [KeyframeType.Color]: [],
     [KeyframeType.Rotation]: [],
-    [KeyframeType.BorderFill]: [],
+    [KeyframeType.BorderColor]: [],
     [KeyframeType.Opacity]: [],
     [KeyframeType.Scale]: [],
     [KeyframeType.Blur]: [],
@@ -565,7 +366,6 @@ function createKeyframesMap(): KeyframesMap {
     [KeyframeType.LetterSpacing]: [],
     [KeyframeType.WordSpacing]: [],
     [KeyframeType.TextColor]: [],
-    [KeyframeType.FXParams]: [],
-    [KeyframeType.Fill]: []
+    [KeyframeType.FXParams]: []
   };
 }

package/src/utils/getStyleFromItemStateAndParams.ts

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

package/.idea/codeStyles/codeStyleConfig.xml

@@ -1,5 +0,0 @@
-<component name="ProjectCodeStyleConfiguration">
-  <state>
-    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
-  </state>
-</component>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/sdk-nextjs.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/lib/utils/areFillsVisible/areFillsVisible.js

@@ -1,23 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.areFillsVisible = void 0;
-const color_1 = require("@cntrl-site/color");
-function areFillsVisible(fills) {
-    return fills.some(fill => {
-        switch (fill.type) {
-            case 'solid':
-                return color_1.CntrlColor.parse(fill.value).getAlpha() !== 0;
-            case 'linear-gradient':
-                return fill.colors.some(color => color_1.CntrlColor.parse(color.value).getAlpha() !== 0);
-            case 'radial-gradient':
-                return fill.colors.some(color => color_1.CntrlColor.parse(color.value).getAlpha() !== 0);
-            case 'conic-gradient':
-                return fill.colors.some(color => color_1.CntrlColor.parse(color.value).getAlpha() !== 0);
-            case 'image':
-                return fill.opacity !== 0;
-            default:
-                return true;
-        }
-    });
-}
-exports.areFillsVisible = areFillsVisible;

package/lib/utils/getFill.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFill = void 0;
-function getFill(fill) {
-    var _a;
-    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 = ((_a = fill.angle) !== null && _a !== void 0 ? _a : 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';
-}
-exports.getFill = getFill;

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

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

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

@@ -1,46 +0,0 @@
-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';
-}