@cntrl-site/sdk-nextjs 1.8.15 → 1.8.17

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/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 extends string | number>(
+  stateValue: string | number | 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;
+}