@cntrl-site/sdk-nextjs 1.9.78 → 1.9.80

package/src/utils/getFill.ts

@@ -1,46 +1,46 @@
-import { FillLayer } from '@cntrl-site/sdk';
-
-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';
-}
+import { FillLayer } from '@cntrl-site/sdk';
+
+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,39 +1,39 @@
-import { AnchorSide } from '@cntrl-site/sdk';
-
-function getAnchorSideShift(anchorSide: AnchorSide, height?: number) {
-  if (!height) return 0;
-  switch (anchorSide) {
-    case AnchorSide.Center:
-      return height / 2;
-    case AnchorSide.Bottom:
-      return height;
-    default:
-      return 0;
-  }
-}
-
-export function getPercentageBasedTopStyle(top: number, height?: 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 - ${getAnchorSideShift(anchorSide, height)}vh)`;
-    case AnchorSide.Bottom:
-      return `calc(100% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
-  }
-}
-
-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';
+
+function getAnchorSideShift(anchorSide: AnchorSide, height?: number) {
+  if (!height) return 0;
+  switch (anchorSide) {
+    case AnchorSide.Center:
+      return height / 2;
+    case AnchorSide.Bottom:
+      return height;
+    default:
+      return 0;
+  }
+}
+
+export function getPercentageBasedTopStyle(top: number, height?: 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 - ${getAnchorSideShift(anchorSide, height)}vh)`;
+    case AnchorSide.Bottom:
+      return `calc(100% + ${top * 100}vw - ${getAnchorSideShift(anchorSide, height)}vh)`;
+  }
+}
+
+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>(
-  stateValue: T | 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;
+}