@cntrl-site/sdk-nextjs 1.1.5 → 1.2.1

package/src/components/items/{RectangleItem.tsx → RectangleItem/RectangleItem.tsx}

@@ -6,9 +6,9 @@ import { ItemProps } from '../Item';
 import { LinkWrapper } from '../LinkWrapper';
 import { useRectangleItem } from './useRectangleItem';
 import { useItemAngle } from '../useItemAngle';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useRegisterResize } from "../../common/useRegisterResize";
-import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useRegisterResize } from "../../../common/useRegisterResize";
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
 
 export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();

package/src/components/items/{useRectangleItem.ts → RectangleItem/useRectangleItem.ts}

@@ -1,6 +1,6 @@
 import { KeyframeType, RectangleItem } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../../common/useKeyframeValue';
-import { useLayoutContext } from '../useLayoutContext';
+import { useKeyframeValue } from '../../../common/useKeyframeValue';
+import { useLayoutContext } from '../../useLayoutContext';
 
 const defaultColor = 'rgba(0, 0, 0, 1)';
 

package/src/components/items/{RichTextItem.tsx → RichTextItem/RichTextItem.tsx}

@@ -4,14 +4,14 @@ import { getLayoutStyles, RichTextItem as TRichTextItem } from '@cntrl-site/sdk'
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useRichTextItemValues } from './useRichTextItemValues';
-import { useRegisterResize } from "../../common/useRegisterResize";
-import { getFontFamilyValue } from '../../utils/getFontFamilyValue';
-import { useExemplary } from '../../common/useExemplary';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useRichTextItemValues } from '../useRichTextItemValues';
+import { useRegisterResize } from "../../../common/useRegisterResize";
+import { getFontFamilyValue } from '../../../utils/getFontFamilyValue';
+import { useExemplary } from '../../../common/useExemplary';
 import { useItemAngle } from '../useItemAngle';
-import { getStyleFromItemStateAndParams } from '../../utils/getStyleFromItemStateAndParams';
-import { useCurrentLayout } from '../../common/useCurrentLayout';
+import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
+import { useCurrentLayout } from '../../../common/useCurrentLayout';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const id = useId();

package/src/components/items/{useRichTextItem.ts → RichTextItem/useRichTextItem.ts}

@@ -1,6 +1,6 @@
 import { RichTextItem } from '@cntrl-site/sdk';
-import { RichTextConverter } from '../../utils/RichTextConverter/RichTextConverter';
-import { useCntrlContext } from '../../provider/useCntrlContext';
+import { RichTextConverter } from '../../../utils/RichTextConverter/RichTextConverter';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
 import { ReactNode } from 'react';
 
 const richTextConverter = new RichTextConverter();

package/src/components/items/RichTextWrapper.tsx

@@ -0,0 +1,15 @@
+import React, { FC, PropsWithChildren } from 'react';
+
+interface RTWrapperProps {
+  isRichText: boolean;
+  transformOrigin?: string;
+}
+
+export const RichTextWrapper: FC<PropsWithChildren<RTWrapperProps>> = ({ isRichText, children, transformOrigin = 'top left' }) => {
+  if (!isRichText) return <>{children}</>;
+  return (
+    <div style={{ transformOrigin, transform: 'scale(var(--layout-deviation))' }}>
+      {children}
+    </div>
+  );
+};

package/src/components/items/itemsMap.ts

@@ -0,0 +1,26 @@
+import { ArticleItemType } from '@cntrl-site/sdk';
+import { ComponentType } from 'react';
+import { RectangleItem } from './RectangleItem/RectangleItem';
+import { ImageItem } from './FileItem/ImageItem';
+import { VideoItem } from './FileItem/VideoItem';
+import { RichTextItem } from './RichTextItem/RichTextItem';
+import { YoutubeEmbedItem } from './EmbedVideoItem/YoutubeEmbed';
+import { VimeoEmbedItem } from './EmbedVideoItem/VimeoEmbed';
+import { CustomItem } from './CustomItem/CustomItem';
+import { GroupItem } from './GroupItem/GroupItem';
+import { CodeEmbedItem } from './CodeEmbedItem/CodeEmbedItem';
+import { ItemProps } from './Item';
+import { CompoundItem } from './CompoundItem/CompoundItem';
+
+export const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
+  [ArticleItemType.Rectangle]: RectangleItem,
+  [ArticleItemType.Image]: ImageItem,
+  [ArticleItemType.Video]: VideoItem,
+  [ArticleItemType.RichText]: RichTextItem,
+  [ArticleItemType.YoutubeEmbed]: YoutubeEmbedItem,
+  [ArticleItemType.VimeoEmbed]: VimeoEmbedItem,
+  [ArticleItemType.Custom]: CustomItem,
+  [ArticleItemType.Group]: GroupItem,
+  [ArticleItemType.Compound]: CompoundItem,
+  [ArticleItemType.CodeEmbed]: CodeEmbedItem
+};

package/src/components/{useItemAngle.ts → items/useItemAngle.ts}

@@ -1,5 +1,5 @@
 import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../common/useKeyframeValue';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
 
 export const useItemAngle = (item: ItemAny, sectionId: string) => {
   const angle = useKeyframeValue(

package/src/components/items/useItemArea.ts

@@ -0,0 +1,35 @@
+import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
+import { useLayoutContext } from '../useLayoutContext';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+
+export function useItemArea(
+  item: ItemAny,
+  sectionId: string,
+  stateValues: { top?: number; left?: number; width?: number; height?: number }
+) {
+  const layoutId = useLayoutContext();
+  const position = 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 dimensions = useKeyframeValue<{ width: number; height: number } | undefined>(
+    item,
+    KeyframeType.Dimensions,
+    (item, layoutId) => layoutId ? item.area[layoutId] : undefined,
+    (animator, scroll, value) => value ? animator.getDimensions(value, scroll) : undefined,
+    sectionId,
+    [layoutId]
+  );
+  const width = (stateValues.width ?? dimensions?.width) as number | undefined;
+  const height = (stateValues.height ?? dimensions?.height) as number | undefined;
+  const top = (stateValues.top ?? position?.top) as number | undefined;
+  const left = (stateValues.left ?? position?.left) as number | undefined;
+  return { width, height, top, left };
+}

package/src/components/items/useItemPointerEvents.ts

@@ -0,0 +1,10 @@
+import { useCallback, useState } from 'react';
+
+export function useItemPointerEvents(isParentVisible: boolean) {
+  const [allowPointerEvents, setAllowPointerEvents] = useState<boolean>(isParentVisible);
+  const handleVisibilityChange = useCallback((isVisible: boolean) => {
+    if (!isParentVisible) return;
+    setAllowPointerEvents(isVisible);
+  }, [isParentVisible]);
+  return { allowPointerEvents, handleVisibilityChange };
+}

package/src/components/{useItemScale.ts → items/useItemScale.ts}

@@ -1,6 +1,6 @@
 import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../common/useKeyframeValue';
-import { useLayoutContext } from './useLayoutContext';
+import { useKeyframeValue } from '../../common/useKeyframeValue';
+import { useLayoutContext } from '../useLayoutContext';
 
 export const useItemScale = (item: ItemAny, sectionId: string) => {
   const layoutId = useLayoutContext();

package/src/components/items/useItemTriggers.ts

@@ -0,0 +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');
+    }
+  };
+}

package/src/components/items/useSizing.ts

@@ -0,0 +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';
+}

package/src/index.ts

@@ -5,15 +5,15 @@ 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';
-export { Item } from './components/Item';
-export { ImageItem } from './components/items/ImageItem';
-export { RectangleItem } from './components/items/RectangleItem';
-export { RichTextItem } from './components/items/RichTextItem';
-export { VideoItem } from './components/items/VideoItem';
+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/VimeoEmbed';
-export { YoutubeEmbedItem } from './components/items/YoutubeEmbed';
+export { VimeoEmbedItem } from './components/items/EmbedVideoItem/VimeoEmbed';
+export { YoutubeEmbedItem } from './components/items/EmbedVideoItem/YoutubeEmbed';
 
 import { cntrlSdkContext as sdk } from './provider/defaultContext';
 export { CntrlProvider } from './provider/CntrlProvider';

package/src/interactions/InteractionsRegistry.ts

@@ -6,7 +6,7 @@ import {
   InteractionTrigger,
   ItemAny,
 } from '@cntrl-site/sdk';
-import { isItemType } from '../components/Item';
+import { isItemType } from '../utils/isItemType';
 
 export class InteractionsRegistry implements InteractionsRegistryPort {
   private ctrls: Map<ItemId, ItemInteractionCtrl> = new Map();
@@ -203,10 +203,11 @@ export class InteractionsRegistry implements InteractionsRegistryPort {
       for (const item of section.items) {
         const { items, ...itemWithoutChildren } = item;
         itemsArr.push(itemWithoutChildren);
-        if (!isItemType(item, ArticleItemType.Group)) continue;
-        const groupChildren = item?.items ?? [];
-        for (const child of groupChildren) {
-          itemsArr.push(child);
+        if (isItemType(item, ArticleItemType.Group) || isItemType(item, ArticleItemType.Compound)) {
+          const groupChildren = item?.items ?? [];
+          for (const child of groupChildren) {
+            itemsArr.push(child);
+          }
         }
       }
     }

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -9,7 +9,7 @@ import {
   RichTextStyle,
   RichTextEntity
 } from '@cntrl-site/sdk';
-import { LinkWrapper } from '../../components/LinkWrapper';
+import { LinkWrapper } from '../../components/items/LinkWrapper';
 import { getFontFamilyValue } from '../getFontFamilyValue';
 
 interface StyleGroup {

package/src/utils/getCompoundBondaryStyles.ts

@@ -0,0 +1,62 @@
+import { AreaAnchor } from '@cntrl-site/sdk';
+import { DimensionMode } from '@cntrl-site/sdk/src/types/article/ItemArea';
+
+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 || !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 || !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 || !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 || !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/isItemType.ts

@@ -0,0 +1,6 @@
+import { ArticleItemType, ItemAny } from '@cntrl-site/sdk';
+import { Item as TItem } from '@cntrl-site/sdk/src/types/article/Item';
+
+export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
+  return item.type === itemType;
+}

package/lib/components/useItemDimensions.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useItemDimensions = void 0;
-const sdk_1 = require("@cntrl-site/sdk");
-const useKeyframeValue_1 = require("../common/useKeyframeValue");
-const useLayoutContext_1 = require("./useLayoutContext");
-const useItemDimensions = (item, sectionId) => {
-    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const dimensions = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Dimensions, (item, layoutId) => layoutId ? item.area[layoutId] : undefined, (animator, scroll, value) => value ? animator.getDimensions(value, scroll) : undefined, sectionId, [layoutId]);
-    return dimensions;
-};
-exports.useItemDimensions = useItemDimensions;

package/lib/components/useItemPosition.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useItemPosition = void 0;
-const sdk_1 = require("@cntrl-site/sdk");
-const useKeyframeValue_1 = require("../common/useKeyframeValue");
-const getItemTopStyle_1 = require("../utils/getItemTopStyle");
-const useLayoutContext_1 = require("./useLayoutContext");
-const useItemPosition = (item, sectionId, stateValues) => {
-    var _a, _b;
-    const layoutId = (0, useLayoutContext_1.useLayoutContext)();
-    const position = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Position, (item, layoutId) => {
-        if (!layoutId)
-            return;
-        return item.area[layoutId];
-    }, (animator, scroll, value) => value ? animator.getPositions(value, scroll) : undefined, sectionId, [layoutId]);
-    const anchorSide = layoutId ? item.area[layoutId].anchorSide : sdk_1.AnchorSide.Top;
-    const positionType = layoutId ? item.area[layoutId].positionType : sdk_1.PositionType.ScreenBased;
-    // to prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
-    const isScreenBasedBottom = positionType === sdk_1.PositionType.ScreenBased && anchorSide === sdk_1.AnchorSide.Bottom;
-    if (!position)
-        return undefined;
-    const top = (_a = stateValues === null || stateValues === void 0 ? void 0 : stateValues.top) !== null && _a !== void 0 ? _a : position.top;
-    const left = (_b = stateValues === null || stateValues === void 0 ? void 0 : stateValues.left) !== null && _b !== void 0 ? _b : position.left;
-    return position ? {
-        bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
-        top: isScreenBasedBottom ? 'unset' : (0, getItemTopStyle_1.getItemTopStyle)(top, anchorSide),
-        left: `${left * 100}vw`
-    } : undefined;
-};
-exports.useItemPosition = useItemPosition;

package/src/components/useItemDimensions.ts

@@ -1,16 +0,0 @@
-import { ItemAny, KeyframeType } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../common/useKeyframeValue';
-import { useLayoutContext } from './useLayoutContext';
-
-export const useItemDimensions = (item: ItemAny, sectionId: string) => {
-  const layoutId = useLayoutContext();
-  const dimensions = useKeyframeValue<{ width: number; height: number } | undefined>(
-    item,
-    KeyframeType.Dimensions,
-    (item, layoutId) => layoutId ? item.area[layoutId] : undefined,
-    (animator, scroll, value) => value ? animator.getDimensions(value, scroll) : undefined,
-    sectionId,
-    [layoutId]
-  );
-  return dimensions;
-};

package/src/components/useItemPosition.ts

@@ -1,37 +0,0 @@
-import { AnchorSide, ItemAny, KeyframeType, PositionType } from '@cntrl-site/sdk';
-import { useKeyframeValue } from '../common/useKeyframeValue';
-import { getItemTopStyle } from '../utils/getItemTopStyle';
-import { useLayoutContext } from './useLayoutContext';
-
-export const useItemPosition = (
-  item: ItemAny,
-  sectionId: string,
-  stateValues: { top?: number; left?: number; }
-) => {
-  const layoutId = useLayoutContext();
-  const position = 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 anchorSide = layoutId ? item.area[layoutId].anchorSide : AnchorSide.Top;
-  const positionType = layoutId ? item.area[layoutId].positionType : PositionType.ScreenBased;
-  // to prevent fixed item (with anchor point bottom) to jump when scroll in safari on mobile
-  const isScreenBasedBottom = positionType === PositionType.ScreenBased && anchorSide === AnchorSide.Bottom;
-  if (!position) return undefined;
-  const top = stateValues?.top ?? position.top;
-  const left = stateValues?.left ?? position.left;
-  return position ? {
-    bottom: isScreenBasedBottom ? `${-top * 100}vw` : 'unset',
-    top:  isScreenBasedBottom ? 'unset' : getItemTopStyle(top, anchorSide),
-    left: `${left * 100}vw`
-  } : undefined;
-};
-
-