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

package/src/components/Section/SectionVideo.tsx

@@ -1,144 +1,144 @@
-import { CSSProperties, FC, useEffect, useId, useRef, useState } from 'react';
-import JSXStyle from 'styled-jsx/style';
-
-export type TSectionVideo = {
-  url: string;
-  size: string;
-  type: 'video';
-  play: 'on-click' | 'auto';
-  position: string;
-  coverUrl: string | null;
-  offsetX: number | null;
-};
-
-interface Props {
-  container: HTMLDivElement;
-  sectionId: string;
-  media: TSectionVideo;
-}
-
-export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
-  const [video, setVideo] = useState<HTMLVideoElement | null>(null);
-  const [videoWrapper, setVideoWrapper] = useState<HTMLDivElement | null>(null);
-  const [isVideoWidthOverflow, setIsVideoWidthOverflow] = useState(false);
-  const { url, size, position, offsetX, coverUrl, play } = media;
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [userPaused, setUserPaused] = useState(false);
-  const [isClickedOnCover, setIsClickedOnCover] = useState(false);
-
-  const handleCoverClick = () => {
-    if (!video || play !== 'on-click') return;
-    setIsClickedOnCover(true);
-    if (isPlaying) {
-      video.pause();
-      setUserPaused(true);
-    } else {
-      video.play();
-      setUserPaused(false);
-    }
-  };
-
-  useEffect(() => {
-    if (!video || play !== 'on-click') return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (userPaused || !isClickedOnCover) return;
-        if (entry.isIntersecting) {
-          video.play();
-        } else {
-          video.pause();
-        }
-      }
-    );
-    observer.observe(container);
-    return () => observer.disconnect();
-  }, [container, play, userPaused, isClickedOnCover]);
-
-  useEffect(() => {
-    if (!video || !videoWrapper) return;
-    video.addEventListener('loadedmetadata', () => {
-      const h = video.videoHeight;
-      const w = video.videoWidth;
-      const width = (videoWrapper.clientHeight / h) * w;
-      if (width > videoWrapper.clientWidth) {
-        setIsVideoWidthOverflow(true);
-      } else {
-        setIsVideoWidthOverflow(false);
-      }
-    });
-  }, [video, videoWrapper]);
-
-  const isContainHeight = size === 'contain-height';
-  const hasOffsetX = offsetX !== null && size === 'contain';
-
-  return (
-    <>
-      <div
-        ref={setVideoWrapper}
-        className={`section-video-wrapper-${sectionId}`}
-        style={{
-          position: position === 'fixed' ? 'sticky' : 'relative',
-          height: position === 'fixed' ? '100vh' : '100%',
-          top: position === 'fixed' ? '100vh' : '0',
-          overflow: 'hidden',
-          width: '100%'
-        }}
-      >
-        <video
-          ref={setVideo}
-          autoPlay={play === 'auto'}
-          loop
-          style={{
-            opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
-            objectFit: isContainHeight ? 'cover' : (size ?? 'cover') as CSSProperties['objectFit'],
-            width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
-            transform: isContainHeight ? 'translateX(-50%)' : 'none',
-            left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
-            height: '100%',
-            position: 'relative'
-          }}
-          controls={play === 'on-click'}
-          muted={play === 'auto'}
-          playsInline
-          preload="auto"
-          className={`video-background-${sectionId}`}
-          onPlay={() => setIsPlaying(true)}
-          onPause={() => setIsPlaying(false)}
-        >
-          <source src={`${url}`} />
-        </video>
-        {play === 'on-click' && !isClickedOnCover && (
-          <div
-            className={`video-background-${sectionId}-cover-container`}
-            style={{
-              position: 'absolute',
-              left: 0,
-              width: '100%',
-              height: '100%',
-              top: 0
-            }}
-            onClick={handleCoverClick}
-          >
-            {coverUrl && play === 'on-click' && (
-              <img
-                src={coverUrl}
-                alt="Video cover"
-                className={`video-background-${sectionId}-cover`}
-                style={{
-                  opacity: isPlaying ? 0 : 1,
-                  left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
-                  width: isContainHeight ? 'auto' : '100%',
-                  objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],
-                  transform: isContainHeight ? 'translateX(-50%)' : 'none',
-                  position: 'relative',
-                  height: '100%',
-                  transition: 'opacity 0.1s ease-in-out'
-                }}
-              />
-            )}
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
+import { CSSProperties, FC, useEffect, useId, useRef, useState } from 'react';
+import JSXStyle from 'styled-jsx/style';
+
+export type TSectionVideo = {
+  url: string;
+  size: string;
+  type: 'video';
+  play: 'on-click' | 'auto';
+  position: string;
+  coverUrl: string | null;
+  offsetX: number | null;
+};
+
+interface Props {
+  container: HTMLDivElement;
+  sectionId: string;
+  media: TSectionVideo;
+}
+
+export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
+  const [video, setVideo] = useState<HTMLVideoElement | null>(null);
+  const [videoWrapper, setVideoWrapper] = useState<HTMLDivElement | null>(null);
+  const [isVideoWidthOverflow, setIsVideoWidthOverflow] = useState(false);
+  const { url, size, position, offsetX, coverUrl, play } = media;
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [userPaused, setUserPaused] = useState(false);
+  const [isClickedOnCover, setIsClickedOnCover] = useState(false);
+
+  const handleCoverClick = () => {
+    if (!video || play !== 'on-click') return;
+    setIsClickedOnCover(true);
+    if (isPlaying) {
+      video.pause();
+      setUserPaused(true);
+    } else {
+      video.play();
+      setUserPaused(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!video || play !== 'on-click') return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (userPaused || !isClickedOnCover) return;
+        if (entry.isIntersecting) {
+          video.play();
+        } else {
+          video.pause();
+        }
+      }
+    );
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [container, play, userPaused, isClickedOnCover]);
+
+  useEffect(() => {
+    if (!video || !videoWrapper) return;
+    video.addEventListener('loadedmetadata', () => {
+      const h = video.videoHeight;
+      const w = video.videoWidth;
+      const width = (videoWrapper.clientHeight / h) * w;
+      if (width > videoWrapper.clientWidth) {
+        setIsVideoWidthOverflow(true);
+      } else {
+        setIsVideoWidthOverflow(false);
+      }
+    });
+  }, [video, videoWrapper]);
+
+  const isContainHeight = size === 'contain-height';
+  const hasOffsetX = offsetX !== null && size === 'contain';
+
+  return (
+    <>
+      <div
+        ref={setVideoWrapper}
+        className={`section-video-wrapper-${sectionId}`}
+        style={{
+          position: position === 'fixed' ? 'sticky' : 'relative',
+          height: position === 'fixed' ? '100vh' : '100%',
+          top: position === 'fixed' ? '100vh' : '0',
+          overflow: 'hidden',
+          width: '100%'
+        }}
+      >
+        <video
+          ref={setVideo}
+          autoPlay={play === 'auto'}
+          loop
+          style={{
+            opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
+            objectFit: isContainHeight ? 'cover' : (size ?? 'cover') as CSSProperties['objectFit'],
+            width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
+            transform: isContainHeight ? 'translateX(-50%)' : 'none',
+            left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
+            height: '100%',
+            position: 'relative'
+          }}
+          controls={play === 'on-click'}
+          muted={play === 'auto'}
+          playsInline
+          preload="auto"
+          className={`video-background-${sectionId}`}
+          onPlay={() => setIsPlaying(true)}
+          onPause={() => setIsPlaying(false)}
+        >
+          <source src={`${url}`} />
+        </video>
+        {play === 'on-click' && !isClickedOnCover && (
+          <div
+            className={`video-background-${sectionId}-cover-container`}
+            style={{
+              position: 'absolute',
+              left: 0,
+              width: '100%',
+              height: '100%',
+              top: 0
+            }}
+            onClick={handleCoverClick}
+          >
+            {coverUrl && play === 'on-click' && (
+              <img
+                src={coverUrl}
+                alt="Video cover"
+                className={`video-background-${sectionId}-cover`}
+                style={{
+                  opacity: isPlaying ? 0 : 1,
+                  left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
+                  width: isContainHeight ? 'auto' : '100%',
+                  objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],
+                  transform: isContainHeight ? 'translateX(-50%)' : 'none',
+                  position: 'relative',
+                  height: '100%',
+                  transition: 'opacity 0.1s ease-in-out'
+                }}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </>
+  );
+};

package/src/components/Section/useSectionColor.ts

@@ -1,19 +1,19 @@
-import { useMemo } from 'react';
-import { CntrlColor } from '@cntrl-site/color';
-import { useLayoutContext } from '../useLayoutContext';
-
-type LayoutIdentifier = string;
-const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-
-export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
-  const layoutId = useLayoutContext();
-   return useMemo(() => {
-     if (!layoutId) return CntrlColor.parse(DEFAULT_COLOR);
-     const layoutColor = colorData[layoutId];
-     return CntrlColor.parse(
-       !layoutColor
-         ? DEFAULT_COLOR
-         : layoutColor
-     );
-   }, [layoutId]);
-};
+import { useMemo } from 'react';
+import { CntrlColor } from '@cntrl-site/color';
+import { useLayoutContext } from '../useLayoutContext';
+
+type LayoutIdentifier = string;
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
+
+export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
+  const layoutId = useLayoutContext();
+   return useMemo(() => {
+     if (!layoutId) return CntrlColor.parse(DEFAULT_COLOR);
+     const layoutColor = colorData[layoutId];
+     return CntrlColor.parse(
+       !layoutColor
+         ? DEFAULT_COLOR
+         : layoutColor
+     );
+   }, [layoutId]);
+};

package/src/components/Section/useSectionHeightMap.ts

@@ -1,19 +1,19 @@
-import { useContext } from 'react';
-import { CntrlContext } from '../../provider/CntrlContext';
-import { Layout, SectionHeight } from '@cntrl-site/sdk';
-import { getSectionHeight } from './Section';
-
-export function useSectionHeightData(sectionId: string): Record<string, string> {
-  const sectionHeightContext = useContext(CntrlContext);
-  const layouts = sectionHeightContext.layouts;
-  const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
-  return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
-}
-
-export function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string> {
-  return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
-}
-
-function getDefaultHeightData(layouts: Layout[]) {
-  return layouts.reduce((acc, layout) => ({ ...acc, [layout.id]: '0' }), {});
-}
+import { useContext } from 'react';
+import { CntrlContext } from '../../provider/CntrlContext';
+import { Layout, SectionHeight } from '@cntrl-site/sdk';
+import { getSectionHeight } from './Section';
+
+export function useSectionHeightData(sectionId: string): Record<string, string> {
+  const sectionHeightContext = useContext(CntrlContext);
+  const layouts = sectionHeightContext.layouts;
+  const sectionHeightData = sectionHeightContext.getSectionHeightData(sectionId);
+  return sectionHeightData ? getSectionHeightMap(sectionHeightData) : getDefaultHeightData(layouts);
+}
+
+export function getSectionHeightMap(sectionHeight: Record<string, SectionHeight>): Record<string, string> {
+  return Object.fromEntries(Object.entries(sectionHeight).map(([sectionId, heightData]) => [sectionId, getSectionHeight(heightData)]));
+}
+
+function getDefaultHeightData(layouts: Layout[]) {
+  return layouts.reduce((acc, layout) => ({ ...acc, [layout.id]: '0' }), {});
+}

package/src/components/StructuredBlockItem/StructuredBlockItem.tsx

@@ -1,69 +1,69 @@
-import { getLayoutStyles, StructuredBlockAny, StructuredBlockType } from '@cntrl-site/sdk';
-import { ComponentType, FC, useId } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { parseSizing } from '../items/useSizing';
-import { StructuredComponent } from './StructuredComponent/StructuredComponent';
-
-export interface StructuredBlockItemProps<I extends StructuredBlockAny> {
-  block: I;
-}
-
-interface Props {
-  block: StructuredBlockAny;
-  maxWidthMap: Record<string, number>;
-}
-
-const noop = () => null;
-
-const itemsMap: Record<StructuredBlockType, ComponentType<StructuredBlockItemProps<any>>> = {
-  [StructuredBlockType.Component]: StructuredComponent,
-  [StructuredBlockType.RichText]: noop,
-  [StructuredBlockType.Image]: noop,
-  [StructuredBlockType.VimeoEmbed]: noop,
-  [StructuredBlockType.YoutubeEmbed]: noop,
-};
-
-export const StructuredBlockItem: FC<Props> = ({ block, maxWidthMap }) => {
-  const reactId = useId();
-  const id = `${reactId}-item-${block.id}`;
-  const { layouts } = useCntrlContext();
-  const layoutValues: Record<string, any>[] = [block.area, block.layoutParams, block.hidden ?? {}, maxWidthMap];
-  const ItemComponent = itemsMap[block.type] || noop;
-  return (
-    <div
-      className={`structured-block-item-${block.id}`}
-    >
-      <ItemComponent block={block} />
-      <JSXStyle id={id}>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hidden, maxWidth]) => {
-          const sizingAxis = parseSizing(layoutParams.sizing);
-          return (`
-                .structured-block-item-${block.id} {
-                  display: ${hidden ? 'none' : 'block'};
-                  align-self: ${getAlignSelf(area.alignment ?? 'center')};
-                  width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth ?? 'max-content'};
-                  height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
-                  padding-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
-                  outline: none;
-                  left: ${(area.horizontalOffset ?? 0) * 100}vw;
-                  position: relative;
-                }
-              `);
-          })}
-        `}
-      </JSXStyle>
-    </div>
-  );
-};
-
-function getAlignSelf(alignment: 'left' | 'center' | 'right') {
-  switch (alignment) {
-    case 'left':
-      return 'start';
-    case 'right':
-      return 'end';
-    default:
-      return 'center';
-  }
-}
+import { getLayoutStyles, StructuredBlockAny, StructuredBlockType } from '@cntrl-site/sdk';
+import { ComponentType, FC, useId } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { parseSizing } from '../items/useSizing';
+import { StructuredComponent } from './StructuredComponent/StructuredComponent';
+
+export interface StructuredBlockItemProps<I extends StructuredBlockAny> {
+  block: I;
+}
+
+interface Props {
+  block: StructuredBlockAny;
+  maxWidthMap: Record<string, number>;
+}
+
+const noop = () => null;
+
+const itemsMap: Record<StructuredBlockType, ComponentType<StructuredBlockItemProps<any>>> = {
+  [StructuredBlockType.Component]: StructuredComponent,
+  [StructuredBlockType.RichText]: noop,
+  [StructuredBlockType.Image]: noop,
+  [StructuredBlockType.VimeoEmbed]: noop,
+  [StructuredBlockType.YoutubeEmbed]: noop,
+};
+
+export const StructuredBlockItem: FC<Props> = ({ block, maxWidthMap }) => {
+  const reactId = useId();
+  const id = `${reactId}-item-${block.id}`;
+  const { layouts } = useCntrlContext();
+  const layoutValues: Record<string, any>[] = [block.area, block.layoutParams, block.hidden ?? {}, maxWidthMap];
+  const ItemComponent = itemsMap[block.type] || noop;
+  return (
+    <div
+      className={`structured-block-item-${block.id}`}
+    >
+      <ItemComponent block={block} />
+      <JSXStyle id={id}>{`
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams, hidden, maxWidth]) => {
+          const sizingAxis = parseSizing(layoutParams.sizing);
+          return (`
+                .structured-block-item-${block.id} {
+                  display: ${hidden ? 'none' : 'block'};
+                  align-self: ${getAlignSelf(area.alignment ?? 'center')};
+                  width: ${sizingAxis.x === 'manual' && area.width ? `${area.width * 100}vw` : maxWidth ?? 'max-content'};
+                  height: ${sizingAxis.y === 'manual' && area.height ? `${area.height * 100}vw` : 'unset'};
+                  padding-top: ${area.paddingTop ? `${area.paddingTop * 100}vw` : 'unset'};
+                  outline: none;
+                  left: ${(area.horizontalOffset ?? 0) * 100}vw;
+                  position: relative;
+                }
+              `);
+          })}
+        `}
+      </JSXStyle>
+    </div>
+  );
+};
+
+function getAlignSelf(alignment: 'left' | 'center' | 'right') {
+  switch (alignment) {
+    case 'left':
+      return 'start';
+    case 'right':
+      return 'end';
+    default:
+      return 'center';
+  }
+}

package/src/components/StructuredBlockItem/StructuredComponent/StructuredComponent.tsx

@@ -1,66 +1,68 @@
-import JSXStyle from 'styled-jsx/style';
-import { StructuredBlock, StructuredBlockType, getLayoutStyles } from '@cntrl-site/sdk';
-import { FC, useState } from 'react';
-import { useCntrlContext } from '../../../provider/useCntrlContext';
-import { useLayoutContext } from '../../useLayoutContext';
-import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
-
-interface Props {
-  block: StructuredBlock<StructuredBlockType.Component>;
-}
-
-export const StructuredComponent: FC<Props> = ({ block }) => {
-  const sdk = useCntrlContext();
-  const { layouts } = sdk;
-  const layout = useLayoutContext();
-  const fallbackLayout = layouts[0]?.id;
-  const effectiveLayout = layout ?? fallbackLayout;
-  const layoutValues: Record<string, any>[] = [block.layoutParams];
-  const component = sdk.getComponent(block.commonParams.componentId);
-  const [ref, setRef] = useState<HTMLDivElement | null>(null);
-  useItemGeometry(block.id, ref);
-  const Element = component ? component.element : undefined;
-  const layoutParameters = effectiveLayout ? block.layoutParams[effectiveLayout]?.parameters : undefined;
-  const commonParameters = block.commonParams.parameters;
-  const parameters = layoutParameters ? {
-    ...layoutParameters,
-    settings: { ...layoutParameters.settings, ...commonParameters?.settings }
-  } : undefined;
-
-  return (
-    <>
-      <div
-        className={`custom-component-${block.id}`}
-        ref={setRef}
-      >
-        {parameters && Element && (
-          <Element
-            metadata={{
-              itemId: block.id,
-              submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
-            }}
-            portalId="component-portal"
-            content={block.commonParams.content}
-            {...parameters}
-          />
-        )}
-      </div>
-      <JSXStyle id={block.id}>{`
-      .custom-component-${block.id} {
-        width: 100%;
-        height: 100%;
-        pointer-events: auto;
-      }
-      ${getLayoutStyles(layouts, layoutValues, ([layoutParams]) => {
-      return (`
-          .custom-component-${block.id} {
-            opacity: ${layoutParams.opacity};
-            filter: blur(${layoutParams.blur}vw);
-            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
-          }
-        `);
-    })}`}
-      </JSXStyle>
-    </>
-  );
-};
+import JSXStyle from 'styled-jsx/style';
+import { StructuredBlock, StructuredBlockType, getLayoutStyles } from '@cntrl-site/sdk';
+import { FC, useState } from 'react';
+import { useCntrlContext } from '../../../provider/useCntrlContext';
+import { useLayoutContext } from '../../useLayoutContext';
+import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
+
+interface Props {
+  block: StructuredBlock<StructuredBlockType.Component>;
+}
+
+export const StructuredComponent: FC<Props> = ({ block }) => {
+  const sdk = useCntrlContext();
+  const { layouts } = sdk;
+  const layout = useLayoutContext();
+  const fallbackLayout = layouts[0]?.id;
+  const effectiveLayout = layout ?? fallbackLayout;
+  const layoutValues: Record<string, any>[] = [block.layoutParams];
+  const component = sdk.getComponent(block.commonParams.componentId);
+  const [ref, setRef] = useState<HTMLDivElement | null>(null);
+  useItemGeometry(block.id, ref);
+  const Element = component ? component.element : undefined;
+  const layoutParameters = effectiveLayout ? block.layoutParams[effectiveLayout]?.parameters : undefined;
+  const commonParameters = block.commonParams.parameters;
+  const parameters = layoutParameters ? {
+    ...layoutParameters,
+    settings: { ...layoutParameters.settings, ...commonParameters?.settings }
+  } : undefined;
+
+  return (
+    <>
+      <div
+        className={`custom-component-${block.id}`}
+        ref={setRef}
+        // preventing layout shift while supporting SSG for proper SEO
+        style={{ opacity: layout == null ? 0 : undefined }}
+      >
+        {parameters && Element && (
+          <Element
+            metadata={{
+              itemId: block.id,
+              submitUrl: sdk.getSubmitUrl(commonParameters?.pluginConfigId)
+            }}
+            portalId="component-portal"
+            content={block.commonParams.content}
+            {...parameters}
+          />
+        )}
+      </div>
+      <JSXStyle id={block.id}>{`
+      .custom-component-${block.id} {
+        width: 100%;
+        height: 100%;
+        pointer-events: auto;
+      }
+      ${getLayoutStyles(layouts, layoutValues, ([layoutParams]) => {
+      return (`
+          .custom-component-${block.id} {
+            opacity: ${layoutParams.opacity};
+            filter: blur(${layoutParams.blur}vw);
+            ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
+          }
+        `);
+    })}`}
+      </JSXStyle>
+    </>
+  );
+};