@cntrl-site/sdk-nextjs 1.9.78 → 1.9.80-0

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,66 +1,66 @@
-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;
-  const xSizing = layoutId ? item.layoutParams[layoutId].sizing : undefined;
-
-  return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight, xSizing };
-};
+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;
+  const xSizing = layoutId ? item.layoutParams[layoutId].sizing : undefined;
+
+  return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight, xSizing };
+};

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,25 +1,25 @@
-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, CustomComponentBundlesData } 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 { evaluateComponentBundle, resolveCustomComponents } from './utils/evaluateComponentBundle';
-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, CustomComponentBundlesData } 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 { evaluateComponentBundle, resolveCustomComponents } from './utils/evaluateComponentBundle';
+export const customItems = sdk.customItems;
+export const customSections = sdk.customSections;
+export const cntrlSdkContext = sdk;