@cntrl-site/sdk-nextjs 1.8.14 → 1.8.16

package/src/components/items/useItemPointerEvents.ts

@@ -1,23 +1,23 @@
-import { useCallback, useState } from 'react';
-
-export function useItemPointerEvents(
-  pointerEvents: 'never' | 'when_visible' | 'always',
-  isParentVisible: boolean
-) {
-  const getAllowPointerEvents = () => {
-    switch (pointerEvents) {
-      case 'never':
-        return false;
-      case 'when_visible':
-        return isParentVisible;
-      case 'always':
-        return true;
-    }
-  };
-  const [allowPointerEvents, setAllowPointerEvents] = useState<boolean>(getAllowPointerEvents());
-  const handleVisibilityChange = useCallback((isVisible: boolean) => {
-    if (!isParentVisible || pointerEvents !== 'when_visible') return;
-    setAllowPointerEvents(isVisible);
-  }, [isParentVisible, pointerEvents]);
-  return { allowPointerEvents, handleVisibilityChange };
-}
+import { useCallback, useState } from 'react';
+
+export function useItemPointerEvents(
+  pointerEvents: 'never' | 'when_visible' | 'always',
+  isParentVisible: boolean
+) {
+  const getAllowPointerEvents = () => {
+    switch (pointerEvents) {
+      case 'never':
+        return false;
+      case 'when_visible':
+        return isParentVisible;
+      case 'always':
+        return true;
+    }
+  };
+  const [allowPointerEvents, setAllowPointerEvents] = useState<boolean>(getAllowPointerEvents());
+  const handleVisibilityChange = useCallback((isVisible: boolean) => {
+    if (!isParentVisible || pointerEvents !== 'when_visible') return;
+    setAllowPointerEvents(isVisible);
+  }, [isParentVisible, pointerEvents]);
+  return { allowPointerEvents, handleVisibilityChange };
+}

package/src/components/items/useItemScale.ts

@@ -1,17 +1,17 @@
-import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { useLayoutContext } from '../useLayoutContext';
-
-export const useItemScale = (item: ItemAny, sectionId: string) => {
-  const layoutId = useLayoutContext();
-  const scale = useKeyframeValue(
-    item,
-    KeyframeType.Scale,
-    (item, layoutId) => (layoutId ? item.area[layoutId].scale : undefined),
-    (animator, scroll, value) => value !== undefined ? animator.getScale({ scale: value }, scroll).scale : undefined,
-    sectionId,
-    [layoutId]
-  );
-
-  return scale;
-};
+import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { useLayoutContext } from '../useLayoutContext';
+
+export const useItemScale = (item: ItemAny, sectionId: string) => {
+  const layoutId = useLayoutContext();
+  const scale = useKeyframeValue(
+    item,
+    KeyframeType.Scale,
+    (item, layoutId) => (layoutId ? item.area[layoutId].scale : undefined),
+    (animator, scroll, value) => value !== undefined ? animator.getScale({ scale: value }, scroll).scale : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  return scale;
+};

package/src/components/items/useItemTriggers.ts

@@ -1,15 +1,15 @@
-import { ItemInteractionCtrl } from '../../interactions/types';
-
-export function useItemTriggers(interactionCtrl: ItemInteractionCtrl | undefined) {
-  return {
-    onClick: () => {
-      interactionCtrl?.sendTrigger('click');
-    },
-    onMouseEnter: () => {
-      interactionCtrl?.sendTrigger('hover-in');
-    },
-    onMouseLeave: () => {
-      interactionCtrl?.sendTrigger('hover-out');
-    }
-  };
-}
+import { ItemInteractionCtrl } from '../../interactions/types';
+
+export function useItemTriggers(interactionCtrl: ItemInteractionCtrl | undefined) {
+  return {
+    onClick: () => {
+      interactionCtrl?.sendTrigger('click');
+    },
+    onMouseEnter: () => {
+      interactionCtrl?.sendTrigger('hover-in');
+    },
+    onMouseLeave: () => {
+      interactionCtrl?.sendTrigger('hover-out');
+    }
+  };
+}

package/src/components/items/useRichTextItemValues.ts

@@ -1,65 +1,65 @@
-import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { KeyframeType, RichTextItem } from '@cntrl-site/sdk';
-import { useLayoutContext } from '../useLayoutContext';
-
-const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
-
-export const useRichTextItemValues = (item: RichTextItem, sectionId: string) => {
-  const layoutId = useLayoutContext();
-  const blur = useKeyframeValue(
-    item,
-    KeyframeType.Blur,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'blur' in layoutParams ? layoutParams.blur : 0;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
-    sectionId,
-    [layoutId]
-  );
-
-  const letterSpacing = useKeyframeValue(
-    item,
-    KeyframeType.LetterSpacing,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'letterSpacing' in layoutParams ? layoutParams.letterSpacing : 0;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing : undefined,
-    sectionId,
-    [layoutId]
-  );
-
-  const wordSpacing = useKeyframeValue(
-    item,
-    KeyframeType.WordSpacing,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'wordSpacing' in layoutParams ? layoutParams.wordSpacing : 0;
-    },
-    (animator, scroll, value) => value !== undefined ? animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing : undefined,
-    sectionId,
-    [layoutId]
-  );
-
-  const color = useKeyframeValue(
-    item,
-    KeyframeType.TextColor,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      const layoutParams = item.layoutParams[layoutId];
-      return 'color' in layoutParams ? layoutParams.color : DEFAULT_COLOR;
-    },
-    (animator, scroll, value) => value ? animator.getTextColor({ color: value }, scroll).color : undefined,
-    sectionId,
-    [layoutId]
-  );
-
-  const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
-  const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
-
-  return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight };
-};
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { KeyframeType, RichTextItem } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../useLayoutContext';
+
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 1)';
+
+export const useRichTextItemValues = (item: RichTextItem, sectionId: string) => {
+  const layoutId = useLayoutContext();
+  const blur = useKeyframeValue(
+    item,
+    KeyframeType.Blur,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'blur' in layoutParams ? layoutParams.blur : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getBlur({ blur: value }, scroll).blur : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  const letterSpacing = useKeyframeValue(
+    item,
+    KeyframeType.LetterSpacing,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'letterSpacing' in layoutParams ? layoutParams.letterSpacing : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getLetterSpacing({ letterSpacing: value }, scroll).letterSpacing : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  const wordSpacing = useKeyframeValue(
+    item,
+    KeyframeType.WordSpacing,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'wordSpacing' in layoutParams ? layoutParams.wordSpacing : 0;
+    },
+    (animator, scroll, value) => value !== undefined ? animator.getWordSpacing({ wordSpacing: value }, scroll).wordSpacing : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  const color = useKeyframeValue(
+    item,
+    KeyframeType.TextColor,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      const layoutParams = item.layoutParams[layoutId];
+      return 'color' in layoutParams ? layoutParams.color : DEFAULT_COLOR;
+    },
+    (animator, scroll, value) => value ? animator.getTextColor({ color: value }, scroll).color : undefined,
+    sectionId,
+    [layoutId]
+  );
+
+  const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
+  const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
+
+  return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight };
+};

package/src/components/items/useSizing.ts

@@ -1,25 +1,25 @@
-import { isItemType } from '../../utils/isItemType';
-import { ArticleItemType, ItemAny } from '@cntrl-site/sdk';
-import { useLayoutContext } from '../useLayoutContext';
-
-export function useSizing(item: ItemAny) {
-  const layout = useLayoutContext();
-  const sizing = layout && isItemType(item, ArticleItemType.RichText)
-    ? item.layoutParams[layout].sizing
-    : undefined;
-  const sizingAxis = parseSizing(sizing);
-  return sizingAxis;
-}
-
-export function parseSizing(sizing: string = 'manual'): Axis {
-  const axisSizing = sizing.split(' ');
-  return {
-    y: axisSizing[0],
-    x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
-  } as Axis;
-}
-
-interface Axis {
-  x: 'manual' | 'auto';
-  y: 'manual' | 'auto';
-}
+import { isItemType } from '../../utils/isItemType';
+import { ArticleItemType, ItemAny } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../useLayoutContext';
+
+export function useSizing(item: ItemAny) {
+  const layout = useLayoutContext();
+  const sizing = layout && isItemType(item, ArticleItemType.RichText)
+    ? item.layoutParams[layout].sizing
+    : undefined;
+  const sizingAxis = parseSizing(sizing);
+  return sizingAxis;
+}
+
+export function parseSizing(sizing: string = 'manual'): Axis {
+  const axisSizing = sizing.split(' ');
+  return {
+    y: axisSizing[0],
+    x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
+  } as Axis;
+}
+
+interface Axis {
+  x: 'manual' | 'auto';
+  y: 'manual' | 'auto';
+}

package/src/components/items/useStickyItemTop.ts

@@ -1,21 +1,21 @@
-import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { useLayoutContext } from '../useLayoutContext';
-
-  export function useStickyItemTop(item: ItemAny, sectionId: string, stateTop?: number) {
-  const layoutId = useLayoutContext();
-  const data = useKeyframeValue<{ top: number; left: number } | undefined>(
-    item,
-    KeyframeType.Position,
-    (item, layoutId) => {
-      if (!layoutId) return;
-      return item.area[layoutId];
-    },
-    (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined,
-    sectionId,
-    [layoutId]
-  );
-  const top = data ? data.top : layoutId ? item.area[layoutId].top : 0;
-  const sticky = layoutId ? item.sticky[layoutId] : undefined;
-  return sticky ? (stateTop ?? top) - sticky.from : 0;
-}
+import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { useLayoutContext } from '../useLayoutContext';
+
+  export function useStickyItemTop(item: ItemAny, sectionId: string, stateTop?: number) {
+  const layoutId = useLayoutContext();
+  const data = useKeyframeValue<{ top: number; left: number } | undefined>(
+    item,
+    KeyframeType.Position,
+    (item, layoutId) => {
+      if (!layoutId) return;
+      return item.area[layoutId];
+    },
+    (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined,
+    sectionId,
+    [layoutId]
+  );
+  const top = data ? data.top : layoutId ? item.area[layoutId].top : 0;
+  const sticky = layoutId ? item.sticky[layoutId] : undefined;
+  return sticky ? (stateTop ?? top) - sticky.from : 0;
+}

package/src/components/useLayoutContext.ts

@@ -1,7 +1,7 @@
-import { useContext } from 'react';
-import { LayoutContext } from '../provider/LayoutContext';
-
-export function useLayoutContext() {
-  const layoutId = useContext(LayoutContext);
-  return layoutId;
-}
+import { useContext } from 'react';
+import { LayoutContext } from '../provider/LayoutContext';
+
+export function useLayoutContext() {
+  const layoutId = useContext(LayoutContext);
+  return layoutId;
+}

package/src/index.ts

@@ -1,24 +1,24 @@
-import { cntrlSdkContext as sdk } from './provider/defaultContext';
-
-export * from '@cntrl-site/sdk';
-export { RichTextConverter } from './utils/RichTextConverter/RichTextConverter';
-export { Page } from './components/Page';
-export type { PageProps } from './components/Page';
-export { CNTRLHead as Head } from './components/Head';
-export { Article } from './components/Article';
-export { Section } from './components/Section/Section';
-export { Item } from './components/items/Item';
-export { ImageItem } from './components/items/FileItem/ImageItem';
-export { RectangleItem } from './components/items/RectangleItem/RectangleItem';
-export { RichTextItem } from './components/items/RichTextItem/RichTextItem';
-export { VideoItem } from './components/items/FileItem/VideoItem';
-export { LayoutStyle } from './components/LayoutStyle';
-export { VimeoEmbedItem } from './components/items/EmbedVideoItem/VimeoEmbed';
-export { YoutubeEmbedItem } from './components/items/EmbedVideoItem/YoutubeEmbed';
-
-export { CntrlProvider } from './provider/CntrlProvider';
-export type { CustomItemComponent } from './provider/CustomItemTypes';
-export { useCntrlContext } from './provider/useCntrlContext';
-export const customItems = sdk.customItems;
-export const customSections = sdk.customSections;
-export const cntrlSdkContext = sdk;
+import { cntrlSdkContext as sdk } from './provider/defaultContext';
+
+export * from '@cntrl-site/sdk';
+export { RichTextConverter } from './utils/RichTextConverter/RichTextConverter';
+export { Page } from './components/Page';
+export type { PageProps } from './components/Page';
+export { CNTRLHead as Head } from './components/Head';
+export { Article } from './components/Article';
+export { Section } from './components/Section/Section';
+export { Item } from './components/items/Item';
+export { ImageItem } from './components/items/FileItem/ImageItem';
+export { RectangleItem } from './components/items/RectangleItem/RectangleItem';
+export { RichTextItem } from './components/items/RichTextItem/RichTextItem';
+export { VideoItem } from './components/items/FileItem/VideoItem';
+export { LayoutStyle } from './components/LayoutStyle';
+export { VimeoEmbedItem } from './components/items/EmbedVideoItem/VimeoEmbed';
+export { YoutubeEmbedItem } from './components/items/EmbedVideoItem/YoutubeEmbed';
+
+export { CntrlProvider } from './provider/CntrlProvider';
+export type { CustomItemComponent } from './provider/CustomItemTypes';
+export { useCntrlContext } from './provider/useCntrlContext';
+export const customItems = sdk.customItems;
+export const customSections = sdk.customSections;
+export const cntrlSdkContext = sdk;

package/src/interactions/CSSPropertyNameMap.ts

@@ -1,38 +1,38 @@
-import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
-
-export const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
-  'width': 'width',
-  'height': 'height',
-  'top': 'top',
-  'left': 'left',
-  'scale': 'transform',
-  'angle': 'transform',
-  'opacity': 'opacity',
-  'radius': 'border-radius',
-  'strokeWidth': 'border-width',
-  'strokeColor': 'border-color',
-  'fillColor': 'background-color',
-  'blur': 'filter',
-  'backdropBlur': 'backdrop-filter',
-  'letterSpacing': 'letter-spacing',
-  'wordSpacing': 'word-spacing',
-  'color': 'color'
-};
-
-const PropertyNameCSSMap: Record<string, string[]> = {
-  'transform': ['angle', 'scale'],
-  'border-radius': ['radius'],
-  'border-width': ['strokeWidth'],
-  'border-color': ['strokeColor'],
-  'background-color': ['fillColor'],
-  'filter': ['blur'],
-  'backdrop-filter': ['backdrop-blur'],
-  'letter-spacing': ['letterSpacing'],
-  'word-spacing': ['wordSpacing'],
-};
-
-
-export function getStyleKeysFromCSSProperty(cssProp: string): string[] {
-  const key = PropertyNameCSSMap[cssProp] ?? [cssProp];
-  return key;
-}
+import { ArticleItemType, ItemState } from '@cntrl-site/sdk';
+
+export const CSSPropertyNameMap: Record<keyof ItemState<ArticleItemType>, string> = {
+  'width': 'width',
+  'height': 'height',
+  'top': 'top',
+  'left': 'left',
+  'scale': 'transform',
+  'angle': 'transform',
+  'opacity': 'opacity',
+  'radius': 'border-radius',
+  'strokeWidth': 'border-width',
+  'strokeColor': 'border-color',
+  'fillColor': 'background-color',
+  'blur': 'filter',
+  'backdropBlur': 'backdrop-filter',
+  'letterSpacing': 'letter-spacing',
+  'wordSpacing': 'word-spacing',
+  'color': 'color'
+};
+
+const PropertyNameCSSMap: Record<string, string[]> = {
+  'transform': ['angle', 'scale'],
+  'border-radius': ['radius'],
+  'border-width': ['strokeWidth'],
+  'border-color': ['strokeColor'],
+  'background-color': ['fillColor'],
+  'filter': ['blur'],
+  'backdrop-filter': ['backdrop-blur'],
+  'letter-spacing': ['letterSpacing'],
+  'word-spacing': ['wordSpacing'],
+};
+
+
+export function getStyleKeysFromCSSProperty(cssProp: string): string[] {
+  const key = PropertyNameCSSMap[cssProp] ?? [cssProp];
+  return key;
+}