@cntrl-site/sdk-nextjs 1.9.4 → 1.9.5

package/src/utils/ScaleAnchorMap.ts

@@ -1,13 +1,13 @@
-import { AreaAnchor as ScaleAnchor } from '@cntrl-site/sdk';
-
-export const ScaleAnchorMap = {
-  [ScaleAnchor.TopLeft]: 'top left',
-  [ScaleAnchor.TopCenter]: 'top center',
-  [ScaleAnchor.TopRight]: 'top right',
-  [ScaleAnchor.MiddleLeft]: 'center left',
-  [ScaleAnchor.MiddleCenter]: 'center',
-  [ScaleAnchor.MiddleRight]: 'center right',
-  [ScaleAnchor.BottomLeft]: 'bottom left',
-  [ScaleAnchor.BottomCenter]: 'bottom center',
-  [ScaleAnchor.BottomRight]: 'bottom right'
-};
+import { AreaAnchor as ScaleAnchor } from '@cntrl-site/sdk';
+
+export const ScaleAnchorMap = {
+  [ScaleAnchor.TopLeft]: 'top left',
+  [ScaleAnchor.TopCenter]: 'top center',
+  [ScaleAnchor.TopRight]: 'top right',
+  [ScaleAnchor.MiddleLeft]: 'center left',
+  [ScaleAnchor.MiddleCenter]: 'center',
+  [ScaleAnchor.MiddleRight]: 'center right',
+  [ScaleAnchor.BottomLeft]: 'bottom left',
+  [ScaleAnchor.BottomCenter]: 'bottom center',
+  [ScaleAnchor.BottomRight]: 'bottom right'
+};

package/src/utils/StickyManager/StickyManager.ts

@@ -1,23 +1,23 @@
-export type TSticky = { from: number; to?: number; } | null;
-
-export class StickyManager {
-  constructor(
-    private sticky: TSticky
-  ) {}
-
-  getIsSticky(scroll: number): boolean {
-    if (!this.sticky) return false;
-    return (this.sticky.from <= scroll) && (!this.sticky.to || this.sticky.to >= scroll);
-  }
-
-  getPosition(scroll: number, top: number): number {
-    if (!this.sticky) return top;
-    if (this.getIsSticky(scroll)) {
-      return top - this.sticky.from;
-    }
-    if (this.sticky.to !== undefined && this.sticky.to <= scroll) {
-      return top + this.sticky.to - this.sticky.from;
-    }
-    return top;
-  }
-}
+export type TSticky = { from: number; to?: number; } | null;
+
+export class StickyManager {
+  constructor(
+    private sticky: TSticky
+  ) {}
+
+  getIsSticky(scroll: number): boolean {
+    if (!this.sticky) return false;
+    return (this.sticky.from <= scroll) && (!this.sticky.to || this.sticky.to >= scroll);
+  }
+
+  getPosition(scroll: number, top: number): number {
+    if (!this.sticky) return top;
+    if (this.getIsSticky(scroll)) {
+      return top - this.sticky.from;
+    }
+    if (this.sticky.to !== undefined && this.sticky.to <= scroll) {
+      return top + this.sticky.to - this.sticky.from;
+    }
+    return top;
+  }
+}

package/src/utils/Youtube/YouTubeIframeApiLoader.ts

@@ -1,58 +1,58 @@
-import { YT } from './YoutubeIframeApi';
-
-const YT_IFRAME_API_URL = 'https://www.youtube.com/iframe_api';
-
-export class YouTubeIframeApiLoader {
-  private static instance: YouTubeIframeApiLoader | undefined;
-
-  public static create(): YouTubeIframeApiLoader {
-    if (!YouTubeIframeApiLoader.instance) {
-      YouTubeIframeApiLoader.instance = new YouTubeIframeApiLoader();
-    }
-    return YouTubeIframeApiLoader.instance;
-  }
-
-  private loadingPromise: Promise<void>;
-
-  private constructor() {
-    this.loadingPromise = this.loadApi();
-  }
-
-  async getApi(): Promise<YT> {
-    await this.loadingPromise;
-    if (!window.YT) {
-      throw new Error('YouTube IFrame API is not loaded');
-    }
-    return window.YT;
-  }
-
-  private loadApi(): Promise<void> {
-    return new Promise<void>((resolve, reject) => {
-      const script = document.createElement('script');
-      script.src = YT_IFRAME_API_URL;
-      const loadError = new Error('YouTube IFrame API loading failed');
-      captureStackTrace(loadError);
-      script.addEventListener('abort', () => {
-        reject(loadError);
-      });
-      script.addEventListener('error', () => {
-        reject(loadError);
-      });
-      window.onYouTubeIframeAPIReady = () => {
-        window.onYouTubeIframeAPIReady = undefined;
-        resolve();
-      };
-      document.head.appendChild(script);
-    });
-  }
-}
-
-export function captureStackTrace(error: Error): void {
-  if (typeof Error.captureStackTrace === 'function') {
-    Error.captureStackTrace(error);
-    return;
-  }
-  try {
-    throw error;
-  } catch (errWithStack) {}
-}
+import { YT } from './YoutubeIframeApi';
+
+const YT_IFRAME_API_URL = 'https://www.youtube.com/iframe_api';
+
+export class YouTubeIframeApiLoader {
+  private static instance: YouTubeIframeApiLoader | undefined;
+
+  public static create(): YouTubeIframeApiLoader {
+    if (!YouTubeIframeApiLoader.instance) {
+      YouTubeIframeApiLoader.instance = new YouTubeIframeApiLoader();
+    }
+    return YouTubeIframeApiLoader.instance;
+  }
+
+  private loadingPromise: Promise<void>;
+
+  private constructor() {
+    this.loadingPromise = this.loadApi();
+  }
+
+  async getApi(): Promise<YT> {
+    await this.loadingPromise;
+    if (!window.YT) {
+      throw new Error('YouTube IFrame API is not loaded');
+    }
+    return window.YT;
+  }
+
+  private loadApi(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      const script = document.createElement('script');
+      script.src = YT_IFRAME_API_URL;
+      const loadError = new Error('YouTube IFrame API loading failed');
+      captureStackTrace(loadError);
+      script.addEventListener('abort', () => {
+        reject(loadError);
+      });
+      script.addEventListener('error', () => {
+        reject(loadError);
+      });
+      window.onYouTubeIframeAPIReady = () => {
+        window.onYouTubeIframeAPIReady = undefined;
+        resolve();
+      };
+      document.head.appendChild(script);
+    });
+  }
+}
+
+export function captureStackTrace(error: Error): void {
+  if (typeof Error.captureStackTrace === 'function') {
+    Error.captureStackTrace(error);
+    return;
+  }
+  try {
+    throw error;
+  } catch (errWithStack) {}
+}

package/src/utils/Youtube/YoutubeIframeApi.ts

@@ -1,101 +1,101 @@
-export interface YT {
-  Player: YTPlayerConstructor;
-}
-
-export interface YTPlayerConstructor {
-  new(container: string | Element, params: YTPlayerParams): YTPlayer;
-}
-
-export interface YTEvent<Data> {
-  target: YTPlayer;
-  data: Data;
-}
-
-type YTBool = 0 | 1 | '0' | '1';
-
-export interface YTPlayerParams {
-  width?: string | number;
-  height?: string | number;
-  videoId?: string;
-  playerVars?: Partial<{
-    autoplay: YTBool;
-    cc_lang_pref: string;
-    cc_load_policy: YTBool;
-    color: string;
-    controls: YTBool;
-    disablekb: YTBool;
-    enablejsapi: YTBool;
-    end: number | string;
-    fs: YTBool;
-    hl: string;
-    iv_load_policy: 1 | 3 | '1' | '3';
-    list: string;
-    listType: 'playlist' | 'user_uploads';
-    loop: YTBool;
-    origin: string;
-    playlist: string;
-    playsinline: YTBool;
-    rel: YTBool;
-    start: number | string;
-    widget_referrer: string;
-  }>;
-  events?: Partial<{
-    onReady: (event: YTEvent<void>) => void;
-    onStateChange: (event: YTEvent<YTPlayerState>) => void;
-  }>
-}
-
-export enum YTPlayerState {
-  Unstarted = -1,
-  Ended = 0,
-  Playing = 1,
-  Paused = 2,
-  Buffering = 3,
-  VideoCued = 5
-}
-
-export interface YTPlayer {
-  loadVideoById(videoId: string, startSeconds?: number): void;
-  loadVideoById(params: {
-    videoId: string;
-    startSeconds?: number;
-    endSeconds?: number;
-  }): void;
-
-  loadVideoByUrl(mediaContentUrl: string, startSeconds?: number): void;
-  loadVideoByUrl(params: {
-    mediaContentUrl: string;
-    startSeconds?: number;
-    endSeconds?: number;
-  }): void;
-
-  playVideo(): void;
-  pauseVideo(): void;
-  stopVideo(): void;
-  seekTo(seconds: number, allowSeekAhead: boolean): void;
-
-  mute(): void;
-  unMute(): void;
-  isMuted(): void;
-  setVolume(volume: number): void;
-  getVolume(): void;
-  setSize(width: number, height: number): void;
-  setLoop(loopPlaylists: boolean): void;
-
-  getVideoLoadedFraction(): number;
-  getPlayerState(): YTPlayerState;
-
-  getDuration(): number; // in seconds
-  getVideoUrl(): string;
-  getVideoEmbedCode(): string;
-
-  getIframe(): HTMLIFrameElement | undefined;
-  destroy(): void;
-}
-
-declare global {
-  interface Window {
-    YT?: YT;
-    onYouTubeIframeAPIReady?: () => void;
-  }
-}
+export interface YT {
+  Player: YTPlayerConstructor;
+}
+
+export interface YTPlayerConstructor {
+  new(container: string | Element, params: YTPlayerParams): YTPlayer;
+}
+
+export interface YTEvent<Data> {
+  target: YTPlayer;
+  data: Data;
+}
+
+type YTBool = 0 | 1 | '0' | '1';
+
+export interface YTPlayerParams {
+  width?: string | number;
+  height?: string | number;
+  videoId?: string;
+  playerVars?: Partial<{
+    autoplay: YTBool;
+    cc_lang_pref: string;
+    cc_load_policy: YTBool;
+    color: string;
+    controls: YTBool;
+    disablekb: YTBool;
+    enablejsapi: YTBool;
+    end: number | string;
+    fs: YTBool;
+    hl: string;
+    iv_load_policy: 1 | 3 | '1' | '3';
+    list: string;
+    listType: 'playlist' | 'user_uploads';
+    loop: YTBool;
+    origin: string;
+    playlist: string;
+    playsinline: YTBool;
+    rel: YTBool;
+    start: number | string;
+    widget_referrer: string;
+  }>;
+  events?: Partial<{
+    onReady: (event: YTEvent<void>) => void;
+    onStateChange: (event: YTEvent<YTPlayerState>) => void;
+  }>
+}
+
+export enum YTPlayerState {
+  Unstarted = -1,
+  Ended = 0,
+  Playing = 1,
+  Paused = 2,
+  Buffering = 3,
+  VideoCued = 5
+}
+
+export interface YTPlayer {
+  loadVideoById(videoId: string, startSeconds?: number): void;
+  loadVideoById(params: {
+    videoId: string;
+    startSeconds?: number;
+    endSeconds?: number;
+  }): void;
+
+  loadVideoByUrl(mediaContentUrl: string, startSeconds?: number): void;
+  loadVideoByUrl(params: {
+    mediaContentUrl: string;
+    startSeconds?: number;
+    endSeconds?: number;
+  }): void;
+
+  playVideo(): void;
+  pauseVideo(): void;
+  stopVideo(): void;
+  seekTo(seconds: number, allowSeekAhead: boolean): void;
+
+  mute(): void;
+  unMute(): void;
+  isMuted(): void;
+  setVolume(volume: number): void;
+  getVolume(): void;
+  setSize(width: number, height: number): void;
+  setLoop(loopPlaylists: boolean): void;
+
+  getVideoLoadedFraction(): number;
+  getPlayerState(): YTPlayerState;
+
+  getDuration(): number; // in seconds
+  getVideoUrl(): string;
+  getVideoEmbedCode(): string;
+
+  getIframe(): HTMLIFrameElement | undefined;
+  destroy(): void;
+}
+
+declare global {
+  interface Window {
+    YT?: YT;
+    onYouTubeIframeAPIReady?: () => void;
+  }
+}

package/src/utils/Youtube/useYouTubeIframeApi.ts

@@ -1,12 +1,12 @@
-import { useEffect, useState } from 'react';
-import { YT } from './YoutubeIframeApi';
-import { YouTubeIframeApiLoader } from './YouTubeIframeApiLoader';
-
-export function useYouTubeIframeApi(): YT | undefined {
-  const [YT, setYT] = useState<YT | undefined>(undefined);
-  useEffect(() => {
-    const loader = YouTubeIframeApiLoader.create();
-    loader.getApi().then((YT) => setYT(YT));
-  }, []);
-  return YT;
-}
+import { useEffect, useState } from 'react';
+import { YT } from './YoutubeIframeApi';
+import { YouTubeIframeApiLoader } from './YouTubeIframeApiLoader';
+
+export function useYouTubeIframeApi(): YT | undefined {
+  const [YT, setYT] = useState<YT | undefined>(undefined);
+  useEffect(() => {
+    const loader = YouTubeIframeApiLoader.create();
+    loader.getApi().then((YT) => setYT(YT));
+  }, []);
+  return YT;
+}

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

@@ -1,63 +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);
-  });
-});
+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 +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;
-}
+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;
+}