@cntrl-site/sdk-nextjs 1.9.69 → 1.9.71-0

package/src/components/Page.tsx

@@ -1,47 +1,47 @@
-import React, { FC, useMemo } from 'react';
-import HTMLReactParser from 'html-react-parser';
-import { Article as TArticle, Project, Meta, KeyframeAny } from '@cntrl-site/sdk';
-import { Article } from './Article';
-import { KeyframesContext } from '../provider/KeyframesContext';
-import { CNTRLHead } from './Head';
-import { Keyframes } from '../provider/Keyframes';
-import { ItemGeometryContext } from '../ItemGeometry/ItemGeometryContext';
-import { ItemGeometryService } from '../ItemGeometry/ItemGeometryService';
-
-export interface CustomComponentBundlesData {
-  bundles: Record<string, string>;
-  schemas: Record<string, Record<string, unknown>>;
-}
-
-export interface PageProps {
-  article: TArticle;
-  project: Project;
-  meta: Meta;
-  keyframes: KeyframeAny[];
-  sectionData: Record<SectionName, any>;
-  publicApiBase?: string;
-  customComponentBundles?: CustomComponentBundlesData;
-  siteUrl?: string;
-}
-
-export const Page: FC<PageProps> = ({ article, project, meta, keyframes, sectionData, siteUrl }) => {
-  const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
-  const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
-  const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
-  const itemGeometryService = useMemo(() => new ItemGeometryService(), []);
-  const currentSlug = project.pages.find(p => p.articleId === article.id)?.slug;
-  return (
-    <>
-      <CNTRLHead project={project} meta={meta} slug={currentSlug} siteUrl={siteUrl} />
-      {afterBodyOpen}
-      <ItemGeometryContext.Provider value={itemGeometryService}>
-        <KeyframesContext.Provider value={keyframesRepo}>
-          <Article article={article} sectionData={sectionData} />
-        </KeyframesContext.Provider>
-      </ItemGeometryContext.Provider>
-      {beforeBodyClose}
-    </>
-  );
-};
-
-type SectionName = string;
+import React, { FC, useMemo } from 'react';
+import HTMLReactParser from 'html-react-parser';
+import { Article as TArticle, Project, Meta, KeyframeAny } from '@cntrl-site/sdk';
+import { Article } from './Article';
+import { KeyframesContext } from '../provider/KeyframesContext';
+import { CNTRLHead } from './Head';
+import { Keyframes } from '../provider/Keyframes';
+import { ItemGeometryContext } from '../ItemGeometry/ItemGeometryContext';
+import { ItemGeometryService } from '../ItemGeometry/ItemGeometryService';
+
+export interface CustomComponentBundlesData {
+  bundles: Record<string, string>;
+  schemas: Record<string, Record<string, unknown>>;
+}
+
+export interface PageProps {
+  article: TArticle;
+  project: Project;
+  meta: Meta;
+  keyframes: KeyframeAny[];
+  sectionData: Record<SectionName, any>;
+  publicApiBase?: string;
+  customComponentBundles?: CustomComponentBundlesData;
+  siteUrl?: string;
+}
+
+export const Page: FC<PageProps> = ({ article, project, meta, keyframes, sectionData, siteUrl }) => {
+  const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
+  const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
+  const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
+  const itemGeometryService = useMemo(() => new ItemGeometryService(), []);
+  const currentSlug = project.pages.find(p => p.articleId === article.id)?.slug;
+  return (
+    <>
+      <CNTRLHead project={project} meta={meta} slug={currentSlug} siteUrl={siteUrl} />
+      {afterBodyOpen}
+      <ItemGeometryContext.Provider value={itemGeometryService}>
+        <KeyframesContext.Provider value={keyframesRepo}>
+          <Article article={article} sectionData={sectionData} />
+        </KeyframesContext.Provider>
+      </ItemGeometryContext.Provider>
+      {beforeBodyClose}
+    </>
+  );
+};
+
+type SectionName = string;

package/src/components/ScrollPlaybackVideo.tsx

@@ -1,75 +1,75 @@
-import React, { FC, useContext, useEffect, useMemo, useState } from 'react';
-import { rangeMap } from '../utils/rangeMap';
-import { ArticleRectContext } from '../provider/ArticleRectContext';
-import { ScrollPlaybackVideoManager, ScrollPlaybackFrameData } from '@cntrl-site/sdk';
-
-type PlaybackParams = { from: number, to: number };
-
-interface Props {
-  sectionId: string;
-  src: string;
-  playbackParams: PlaybackParams | null;
-  style?: React.CSSProperties;
-  className: string;
-  scrollPlaybackFrameData?: ScrollPlaybackFrameData | null;
-  frameBaseUrl?: string;
-}
-
-export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams, style, className, scrollPlaybackFrameData, frameBaseUrl }) => {
-  const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
-  const [time, setTime] = useState(0);
-  const articleRectObserver = useContext(ArticleRectContext);
-  const hasServerFrames = scrollPlaybackFrameData?.status === 'ready'
-    && scrollPlaybackFrameData.batchId
-    && scrollPlaybackFrameData.frameCount
-    && scrollPlaybackFrameData.frameRate
-    && scrollPlaybackFrameData.frameFormat
-    && frameBaseUrl;
-
-  useEffect(() => {
-    if (!playbackParams || !articleRectObserver) return;
-    const from = playbackParams.from;
-    const to = playbackParams.to;
-    return articleRectObserver.on('scroll', () => {
-      const scrollPos = articleRectObserver.getSectionScroll(sectionId);
-      const nextTime = rangeMap(scrollPos, from, to, 0, 1, true);
-      setTime(toFixed(nextTime));
-    });
-  }, [sectionId, playbackParams?.from, playbackParams?.to, articleRectObserver]);
-
-  const scrollVideoManager = useMemo<ScrollPlaybackVideoManager | null>(() => {
-    if (!containerElement) return null;
-    const manager = new ScrollPlaybackVideoManager({
-      src,
-      videoContainer: containerElement,
-      ...(hasServerFrames ? {
-        frameData: {
-          batchId: scrollPlaybackFrameData.batchId!,
-          frameCount: scrollPlaybackFrameData.frameCount!,
-          frameRate: scrollPlaybackFrameData.frameRate!,
-          frameFormat: scrollPlaybackFrameData.frameFormat!
-        },
-        frameBaseUrl
-      } : {})
-    });
-    return manager;
-  }, [containerElement, src, hasServerFrames, frameBaseUrl]);
-
-  useEffect(() => {
-    return () => {
-      scrollVideoManager?.destroy();
-    };
-  }, [scrollVideoManager]);
-
-  useEffect(() => {
-    if (scrollVideoManager && time >= 0 && time <= 1) {
-      scrollVideoManager.setTargetTimePercent(time);
-    }
-  }, [time, scrollVideoManager]);
-
-  return <div className={className} style={style} ref={setContainerElement} />;
-};
-
-function toFixed(num: number) {
-  return Number(num.toFixed(3));
-}
+import React, { FC, useContext, useEffect, useMemo, useState } from 'react';
+import { rangeMap } from '../utils/rangeMap';
+import { ArticleRectContext } from '../provider/ArticleRectContext';
+import { ScrollPlaybackVideoManager, ScrollPlaybackFrameData } from '@cntrl-site/sdk';
+
+type PlaybackParams = { from: number, to: number };
+
+interface Props {
+  sectionId: string;
+  src: string;
+  playbackParams: PlaybackParams | null;
+  style?: React.CSSProperties;
+  className: string;
+  scrollPlaybackFrameData?: ScrollPlaybackFrameData | null;
+  frameBaseUrl?: string;
+}
+
+export const ScrollPlaybackVideo: FC<Props> = ({ sectionId, src, playbackParams, style, className, scrollPlaybackFrameData, frameBaseUrl }) => {
+  const [containerElement, setContainerElement] = useState<HTMLDivElement | null>(null);
+  const [time, setTime] = useState(0);
+  const articleRectObserver = useContext(ArticleRectContext);
+  const hasServerFrames = scrollPlaybackFrameData?.status === 'ready'
+    && scrollPlaybackFrameData.batchId
+    && scrollPlaybackFrameData.frameCount
+    && scrollPlaybackFrameData.frameRate
+    && scrollPlaybackFrameData.frameFormat
+    && frameBaseUrl;
+
+  useEffect(() => {
+    if (!playbackParams || !articleRectObserver) return;
+    const from = playbackParams.from;
+    const to = playbackParams.to;
+    return articleRectObserver.on('scroll', () => {
+      const scrollPos = articleRectObserver.getSectionScroll(sectionId);
+      const nextTime = rangeMap(scrollPos, from, to, 0, 1, true);
+      setTime(toFixed(nextTime));
+    });
+  }, [sectionId, playbackParams?.from, playbackParams?.to, articleRectObserver]);
+
+  const scrollVideoManager = useMemo<ScrollPlaybackVideoManager | null>(() => {
+    if (!containerElement) return null;
+    const manager = new ScrollPlaybackVideoManager({
+      src,
+      videoContainer: containerElement,
+      ...(hasServerFrames ? {
+        frameData: {
+          batchId: scrollPlaybackFrameData.batchId!,
+          frameCount: scrollPlaybackFrameData.frameCount!,
+          frameRate: scrollPlaybackFrameData.frameRate!,
+          frameFormat: scrollPlaybackFrameData.frameFormat!
+        },
+        frameBaseUrl
+      } : {})
+    });
+    return manager;
+  }, [containerElement, src, hasServerFrames, frameBaseUrl]);
+
+  useEffect(() => {
+    return () => {
+      scrollVideoManager?.destroy();
+    };
+  }, [scrollVideoManager]);
+
+  useEffect(() => {
+    if (scrollVideoManager && time >= 0 && time <= 1) {
+      scrollVideoManager.setTargetTimePercent(time);
+    }
+  }, [time, scrollVideoManager]);
+
+  return <div className={className} style={style} ref={setContainerElement} />;
+};
+
+function toFixed(num: number) {
+  return Number(num.toFixed(3));
+}

package/src/components/Section/Section.tsx

@@ -1,130 +1,164 @@
-import React, { FC, ReactElement, useId, useRef, useMemo } from 'react';
-import JSXStyle from 'styled-jsx/style';
-import {
-  getLayoutMediaQuery,
-  getLayoutStyles,
-  Section as TSection,
-  SectionHeight,
-  SectionHeightMode
-} from '@cntrl-site/sdk';
-import { useCntrlContext } from '../../provider/useCntrlContext';
-import { useSectionRegistry } from '../../utils/ArticleRectManager/useSectionRegistry';
-import { CntrlColor } from '@cntrl-site/color';
-import { useLayoutContext } from '../useLayoutContext';
-import { SectionVideo } from './SectionVideo';
-import { SectionImage } from './SectionImage';
-import { isOverflowClipSupported } from '../../utils/checkOverflowClipSupport';
-
-type SectionChild = ReactElement<any, any>;
-const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
-
-interface Props {
-  section: TSection;
-  children: SectionChild[];
-  zIndex: number;
-  data?: any;
-}
-
-export const Section: FC<Props> = ({ section, data, children, zIndex }) => {
-  const reactId = useId();
-  const id = `${reactId}-section-${section.id}`;
-  const sectionRef = useRef<HTMLDivElement | null>(null);
-  const { layouts, customSections } = useCntrlContext();
-  const layout = useLayoutContext();
-  const layoutValues: Record<string, any>[] = [section.height, section.color, section.media ?? {}];
-  const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
-  useSectionRegistry(section.id, sectionRef.current);
-  const sectionHeight = layout && section.height[layout] ? section.height[layout] : undefined;
-  const layoutMedia = layout && section.media && section.media[layout] ? section.media[layout] : undefined;
-
-  const media = useMemo(() => {
-    if (layoutMedia && !isOverflowClipSupported()) {
-      return {
-        ...layoutMedia,
-        position: 'local'
-      };
-    }
-    return layoutMedia;
-  }, [layoutMedia]);
-
-  const getSectionVisibilityStyles = () => {
-    return layouts
-      .sort((a, b) => a.startsWith - b.startsWith)
-      .reduce((acc, layout) => {
-        const isHidden = section.hidden[layout.id];
-        return `
-          ${acc}
-          ${getLayoutMediaQuery(layout.id, layouts)} {
-            .section-${section.id} {
-              display: ${isHidden ? 'none' : 'block'};
-            }
-          }`;
-      }, '');
-  };
-
-  if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
-
-  return (
-    <>
-      <div
-        className={`section-${section.id}`}
-        id={section.name}
-        ref={sectionRef}
-        style={{ zIndex }}
-      >
-        {media && media.size !== 'none' && sectionRef.current && (
-          <div className={`section-background-overlay-${section.id}`}>
-            <div
-              key={`section-background-wrapper-${section.id}`}
-              className={`section-background-wrapper-${section.id}`}
-              style={{
-                transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset',
-                ...(sectionHeight && { height: media.position === 'fixed' ? `calc(${getSectionHeight(sectionHeight)} + 200vh)` : getSectionHeight(sectionHeight) })
-              }}
-            >
-              {media.type === 'video' && (
-                <SectionVideo container={sectionRef.current} sectionId={section.id} media={media} />
-              )}
-              {media.type === 'image' && (
-                <SectionImage media={media} sectionId={section.id} />
-              )}
-            </div>
-          </div>
-        )}
-        {children}
-      </div>
-      <JSXStyle id={id}>{`
-      ${
-    getLayoutStyles(layouts, layoutValues, ([height, color, media]) => (`
-         .section-${section.id} {
-            height: ${getSectionHeight(height)};
-            position: relative;
-            background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
-         }
-         .section-background-overlay-${section.id} {
-            height: ${getSectionHeight(height)};
-            width: 100%;
-            position: relative;
-            overflow: clip;
-         }
-         .section-background-wrapper-${section.id} {
-            transform: ${media?.position === 'fixed' ? 'translateY(-100vh)' : 'unset'};
-            position: relative;
-            height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
-            width: 100%;
-         }
-        `
-    ))
-    }
-      ${getSectionVisibilityStyles()}
-    `}</JSXStyle>
-    </>
-  );
-};
-
-export function getSectionHeight(heightData: SectionHeight): string {
-  const { units, vhUnits, mode } = heightData;
-  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
-  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
-  return '0';
-}
+import React, { FC, ReactElement, useId, useRef, useMemo, useState, useEffect, PropsWithChildren } from 'react';
+import JSXStyle from 'styled-jsx/style';
+import {
+  getLayoutMediaQuery,
+  getLayoutStyles,
+  Section as TSection,
+  SectionHeight,
+  SectionHeightMode
+} from '@cntrl-site/sdk';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { useSectionRegistry } from '../../utils/ArticleRectManager/useSectionRegistry';
+import { CntrlColor } from '@cntrl-site/color';
+import { useLayoutContext } from '../useLayoutContext';
+import { SectionVideo } from './SectionVideo';
+import { SectionImage } from './SectionImage';
+import { isOverflowClipSupported } from '../../utils/checkOverflowClipSupport';
+import { StructuredContent } from '../StructuredContent/StructuredContent';
+import { Item } from '../items/Item';
+
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
+
+interface Props {
+  section: TSection;
+  zIndex: number;
+  data?: any;
+  articleHeight: number;
+}
+
+export const Section: FC<PropsWithChildren<Props>> = ({ section, data, zIndex, articleHeight }) => {
+  const reactId = useId();
+  const id = `${reactId}-section-${section.id}`;
+  const sectionRef = useRef<HTMLDivElement | null>(null);
+  const { layouts, customSections } = useCntrlContext();
+  const layout = useLayoutContext();
+  const [sectionHeight, setSectionHeight] = useState(0);
+  const layoutValues: Record<string, any>[] = [
+    section.type === 'freehand' ? section.height : section.minHeight,
+    section.color,
+    section.media ?? {}
+  ];
+  const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
+  useSectionRegistry(section.id, sectionRef.current);
+  const layoutMedia = layout && section.media && section.media[layout] ? section.media[layout] : undefined;
+
+  const media = useMemo(() => {
+    if (layoutMedia && !isOverflowClipSupported()) {
+      return {
+        ...layoutMedia,
+        position: 'local'
+      };
+    }
+    return layoutMedia;
+  }, [layoutMedia]);
+
+  const getSectionVisibilityStyles = () => {
+    return layouts
+      .sort((a, b) => a.startsWith - b.startsWith)
+      .reduce((acc, layout) => {
+        const isHidden = section.hidden[layout.id];
+        return `
+          ${acc}
+          ${getLayoutMediaQuery(layout.id, layouts)} {
+            .section-${section.id} {
+              display: ${isHidden ? 'none' : 'block'};
+            }
+          }`;
+      }, '');
+  };
+
+  useEffect(() => {
+    if (!sectionRef.current) return;
+    const observer = new ResizeObserver((entries) => {
+      const [entry] = entries;
+      const height = entry.contentRect.height;
+      setSectionHeight(height);
+    });
+    observer.observe(sectionRef.current);
+    return () => observer.disconnect();
+  }, []);
+
+  const children = (
+    <>
+      {section.type !== 'freehand' && (
+        <StructuredContent section={section} />
+      )}
+      {section.items.map(item => (
+        <Item
+          sectionHeight={sectionHeight}
+          item={item}
+          key={item.id}
+          sectionId={section.id}
+          articleHeight={articleHeight}
+        />
+      ))}
+    </>
+  );
+
+  if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
+
+  return (
+    <>
+      <div
+        className={`section-${section.id}`}
+        id={section.name}
+        ref={sectionRef}
+        style={{ zIndex }}
+      >
+        {media && media.size !== 'none' && sectionRef.current && (
+          <div className={`section-background-overlay-${section.id}`}>
+            <div
+              key={`section-background-wrapper-${section.id}`}
+              className={`section-background-wrapper-${section.id}`}
+              style={{
+                transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset',
+                ...(sectionHeight && { height: media.position === 'fixed' ? `calc(${sectionHeight}px + 200vh)` : `${sectionHeight}px` })
+              }}
+            >
+              {media.type === 'video' && (
+                <SectionVideo container={sectionRef.current} sectionId={section.id} media={media} />
+              )}
+              {media.type === 'image' && (
+                <SectionImage media={media} sectionId={section.id} />
+              )}
+            </div>
+          </div>
+        )}
+        {children}
+      </div>
+      <JSXStyle id={id}>{`
+      ${
+    getLayoutStyles(layouts, layoutValues, ([height, color, media]) => (`
+         .section-${section.id} {
+            height: ${section.type === 'freehand' ? getSectionHeight(height) : 'auto'};
+            min-height: ${section.type !== 'freehand' ? getSectionHeight(height) : 'unset'};
+            position: relative;
+            background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
+         }
+         .section-background-overlay-${section.id} {
+            height: 100%;
+            width: 100%;
+            position: absolute;
+            overflow: clip;
+         }
+         .section-background-wrapper-${section.id} {
+            transform: ${media?.position === 'fixed' ? 'translateY(-100vh)' : 'unset'};
+            position: relative;
+            height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
+            width: 100%;
+         }
+        `
+    ))
+    }
+      ${getSectionVisibilityStyles()}
+    `}</JSXStyle>
+    </>
+  );
+};
+
+export function getSectionHeight(heightData: SectionHeight): string {
+  const { units, vhUnits, mode } = heightData;
+  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
+  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
+  return '0';
+}

package/src/components/Section/SectionImage.tsx

@@ -1,48 +1,48 @@
-import { CSSProperties, FC, useId } from 'react';
-import JSXStyle from 'styled-jsx/style';
-
-export type TSectionImage = {
-  url: string;
-  type: 'image';
-  size: string;
-  position: string;
-  offsetX: number | null;
-};
-
-interface Props {
-  media: TSectionImage;
-  sectionId: string;
-}
-
-export const SectionImage: FC<Props> = ({ media, sectionId }) => {
-  const { url, size, position, offsetX } = media;
-  const isContainHeight = size === 'contain-height';
-  const hasOffsetX = offsetX !== null && size === 'contain';
-  return (
-    <>
-      <div
-        className={`section-image-wrapper-${sectionId}`}
-        style={{
-          position: position === 'fixed' ? 'sticky' : 'relative',
-          height: position === 'fixed' ? '100vh' : '100%',
-          top: position === 'fixed' ? '100vh' : '0',
-          width: '100%',
-          overflow: 'hidden'
-        }}
-      >
-        <img
-          src={url}
-          className={`image-background-${sectionId}`}
-          style={{
-            objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],
-            width: isContainHeight || hasOffsetX ? 'auto' : '100%',
-            transform: isContainHeight ? 'translateX(-50%)' : 'none',
-            position: 'relative',
-            left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
-            height: '100%'
-          }}
-        />
-      </div>
-    </>
-  );
-};
+import { CSSProperties, FC, useId } from 'react';
+import JSXStyle from 'styled-jsx/style';
+
+export type TSectionImage = {
+  url: string;
+  type: 'image';
+  size: string;
+  position: string;
+  offsetX: number | null;
+};
+
+interface Props {
+  media: TSectionImage;
+  sectionId: string;
+}
+
+export const SectionImage: FC<Props> = ({ media, sectionId }) => {
+  const { url, size, position, offsetX } = media;
+  const isContainHeight = size === 'contain-height';
+  const hasOffsetX = offsetX !== null && size === 'contain';
+  return (
+    <>
+      <div
+        className={`section-image-wrapper-${sectionId}`}
+        style={{
+          position: position === 'fixed' ? 'sticky' : 'relative',
+          height: position === 'fixed' ? '100vh' : '100%',
+          top: position === 'fixed' ? '100vh' : '0',
+          width: '100%',
+          overflow: 'hidden'
+        }}
+      >
+        <img
+          src={url}
+          className={`image-background-${sectionId}`}
+          style={{
+            objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],
+            width: isContainHeight || hasOffsetX ? 'auto' : '100%',
+            transform: isContainHeight ? 'translateX(-50%)' : 'none',
+            position: 'relative',
+            left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
+            height: '100%'
+          }}
+        />
+      </div>
+    </>
+  );
+};