@cntrl-site/sdk-nextjs 1.9.110 → 1.9.112

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/sdk-nextjs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/lib/components/Section/Section.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getSectionHeight = exports.Section = void 0;
+exports.getSectionHeight = exports.getSectionHeightFallback = exports.Section = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const style_1 = __importDefault(require("styled-jsx/style"));
@@ -71,6 +71,7 @@ const Section = ({ section, data, zIndex, articleHeight }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { className: `section-${section.id}`, id: section.name, ref: sectionRef, style: { zIndex }, children: [media && media.size !== 'none' && sectionRef.current && ((0, jsx_runtime_1.jsx)("div", { className: `section-background-overlay-${section.id}`, children: (0, jsx_runtime_1.jsxs)("div", { className: `section-background-wrapper-${section.id}`, style: Object.assign({ transform: media.position === 'fixed' ? 'translateY(-100vh)' : 'unset' }, (sectionHeight && { height: media.position === 'fixed' ? `calc(${sectionHeight}px + 200vh)` : `${sectionHeight}px` })), children: [media.type === 'video' && ((0, jsx_runtime_1.jsx)(SectionVideo_1.SectionVideo, { container: sectionRef.current, sectionId: section.id, media: media })), media.type === 'image' && ((0, jsx_runtime_1.jsx)(SectionImage_1.SectionImage, { media: media, sectionId: section.id }))] }, `section-background-wrapper-${section.id}`) })), children] }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([height, color, media]) => (`
          .section-${section.id} {
+            min-height: ${getSectionHeightFallback(height)};
             min-height: ${getSectionHeight(height)};
             position: relative;
             background-color: ${color_1.CntrlColor.parse(color !== null && color !== void 0 ? color : DEFAULT_COLOR).fmt('rgba')};
@@ -84,6 +85,7 @@ const Section = ({ section, data, zIndex, articleHeight }) => {
          .section-background-wrapper-${section.id} {
             transform: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? 'translateY(-100vh)' : 'unset'};
             position: relative;
+            height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeightFallback(height)} + 200vh)` : getSectionHeightFallback(height)};
             height: ${(media === null || media === void 0 ? void 0 : media.position) === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
             width: 100%;
          }
@@ -92,7 +94,7 @@ const Section = ({ section, data, zIndex, articleHeight }) => {
     ` })] }));
 };
 exports.Section = Section;
-function getSectionHeight(heightData) {
+function getSectionHeightFallback(heightData) {
     const { units, vhUnits, mode } = heightData;
     if (mode === sdk_1.SectionHeightMode.ViewportHeightUnits)
         return `${vhUnits}vh`;
@@ -100,4 +102,13 @@ function getSectionHeight(heightData) {
         return `${units * 100}vw`;
     return '0';
 }
+exports.getSectionHeightFallback = getSectionHeightFallback;
+function getSectionHeight(heightData) {
+    const { units, vhUnits, mode } = heightData;
+    if (mode === sdk_1.SectionHeightMode.ViewportHeightUnits)
+        return `${vhUnits}svh`;
+    if (mode === sdk_1.SectionHeightMode.ControlUnits)
+        return `${units * 100}vw`;
+    return '0';
+}
 exports.getSectionHeight = getSectionHeight;

package/lib/components/Section/SectionImage.js

@@ -3,8 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SectionImage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SectionImage = ({ media, sectionId }) => {
-    const { url, size, position, offsetX } = media;
+    const { url, size, position, offsetX, opacity, tileSize } = media;
     const isContainHeight = size === 'contain-height';
+    const isTile = size === 'tile';
     const hasOffsetX = offsetX !== null && size === 'contain';
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", { className: `section-image-wrapper-${sectionId}`, style: {
                 position: position === 'fixed' ? 'sticky' : 'relative',
@@ -12,13 +13,25 @@ const SectionImage = ({ media, sectionId }) => {
                 top: position === 'fixed' ? '100vh' : '0',
                 width: '100%',
                 overflow: 'hidden'
-            }, children: (0, jsx_runtime_1.jsx)("img", { src: url, className: `image-background-${sectionId}`, style: {
+            }, children: isTile ? ((0, jsx_runtime_1.jsx)("div", { className: `image-background-${sectionId}`, style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    backgroundImage: `url(${url})`,
+                    backgroundSize: `${tileSize}%`,
+                    backgroundRepeat: 'repeat',
+                    backgroundPosition: '0 0',
+                    opacity
+                } })) : ((0, jsx_runtime_1.jsx)("img", { src: url, className: `image-background-${sectionId}`, style: {
                     objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),
                     width: isContainHeight || hasOffsetX ? 'auto' : '100%',
                     transform: isContainHeight ? 'translateX(-50%)' : 'none',
                     position: 'relative',
                     left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
-                    height: '100%'
-                } }) }) }));
+                    height: '100%',
+                    opacity
+                } })) }) }));
 };
 exports.SectionImage = SectionImage;

package/lib/components/Section/SectionVideo.js

@@ -7,7 +7,7 @@ const SectionVideo = ({ container, sectionId, media }) => {
     const [video, setVideo] = (0, react_1.useState)(null);
     const [videoWrapper, setVideoWrapper] = (0, react_1.useState)(null);
     const [isVideoWidthOverflow, setIsVideoWidthOverflow] = (0, react_1.useState)(false);
-    const { url, size, position, offsetX, coverUrl, play } = media;
+    const { url, size, position, offsetX, coverUrl, play, opacity } = media;
     const [isPlaying, setIsPlaying] = (0, react_1.useState)(false);
     const [userPaused, setUserPaused] = (0, react_1.useState)(false);
     const [isClickedOnCover, setIsClickedOnCover] = (0, react_1.useState)(false);
@@ -64,7 +64,7 @@ const SectionVideo = ({ container, sectionId, media }) => {
                 overflow: 'hidden',
                 width: '100%'
             }, children: [(0, jsx_runtime_1.jsx)("video", { ref: setVideo, autoPlay: play === 'auto', loop: true, style: {
-                        opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
+                        opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : opacity,
                         objectFit: isContainHeight ? 'cover' : (size !== null && size !== void 0 ? size : 'cover'),
                         width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
                         transform: isContainHeight ? 'translateX(-50%)' : 'none',
@@ -78,7 +78,7 @@ const SectionVideo = ({ container, sectionId, media }) => {
                         height: '100%',
                         top: 0
                     }, onClick: handleCoverClick, children: coverUrl && play === 'on-click' && ((0, jsx_runtime_1.jsx)("img", { src: coverUrl, alt: "Video cover", className: `video-background-${sectionId}-cover`, style: {
-                            opacity: isPlaying ? 0 : 1,
+                            opacity: isPlaying ? 0 : opacity,
                             left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
                             width: isContainHeight ? 'auto' : '100%',
                             objectFit: isContainHeight ? 'unset' : (size !== null && size !== void 0 ? size : 'cover'),

package/lib/utils/getFill.js

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFill = void 0;
+const color_1 = require("@cntrl-site/color");
 function getFill(fill) {
     var _a;
     if (fill.type === 'linear-gradient' && Array.isArray(fill.colors)) {
         return `linear-gradient(${fill.angle}deg, ${fill.colors
-            .map(c => `${c.value} ${c.position}%`)
+            .map(c => `${getParsedColor(c.value)} ${c.position}%`)
             .join(', ')})`;
     }
     if (fill.type === 'radial-gradient' && Array.isArray(fill.colors)) {
@@ -14,7 +15,7 @@ function getFill(fill) {
             : '50% 50%';
         const diameter = fill.diameter;
         return `radial-gradient(circle ${diameter * 100} at ${center}, ${fill.colors
-            .map(c => `${c.value} ${c.position}%`)
+            .map(c => `${getParsedColor(c.value)} ${c.position}%`)
             .join(', ')})`;
     }
     if (fill.type === 'conic-gradient' && Array.isArray(fill.colors)) {
@@ -26,18 +27,23 @@ function getFill(fill) {
         const lastStop = fill.colors[fill.colors.length - 1];
         const shouldAppendWrapStop = hasMultipleStops && typeof lastStop.position === 'number' && lastStop.position < 100;
         const colorsWithWrap = shouldAppendWrapStop
-            ? [...fill.colors, { value: fill.colors[0].value, position: 100 }]
+            ? [...fill.colors, { value: getParsedColor(fill.colors[0].value), position: 100 }]
             : fill.colors;
         return `conic-gradient(from ${angle + 90}deg at ${center}, ${colorsWithWrap
-            .map(c => `${c.value} ${c.position}%`)
+            .map(c => `${getParsedColor(c.value)} ${c.position}%`)
             .join(', ')})`;
     }
     if (fill.type === 'image' && fill.src) {
         return `url(${fill.src})`;
     }
     if (fill.type === 'solid') {
-        return fill.value;
+        return getParsedColor(fill.value);
     }
     return 'transparent';
 }
 exports.getFill = getFill;
+function getParsedColor(color) {
+    if (!color)
+        return color;
+    return color_1.CntrlColor.parse(color).fmt('rgba');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.110",
+  "version": "1.9.112",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -33,7 +33,7 @@
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/components": "^1.0.56",
     "@cntrl-site/effects": "^1.4.2",
-    "@cntrl-site/sdk": "^1.28.4",
+    "@cntrl-site/sdk": "^1.28.5",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
     "html-react-parser": "^3.0.1",

package/src/components/Section/Section.tsx

@@ -129,6 +129,7 @@ export const Section: FC<PropsWithChildren<Props>> = ({ section, data, zIndex, a
       ${
     getLayoutStyles(layouts, layoutValues, ([height, color, media]) => (`
          .section-${section.id} {
+            min-height: ${getSectionHeightFallback(height)};
             min-height: ${getSectionHeight(height)};
             position: relative;
             background-color: ${CntrlColor.parse(color ?? DEFAULT_COLOR).fmt('rgba')};
@@ -142,6 +143,7 @@ export const Section: FC<PropsWithChildren<Props>> = ({ section, data, zIndex, a
          .section-background-wrapper-${section.id} {
             transform: ${media?.position === 'fixed' ? 'translateY(-100vh)' : 'unset'};
             position: relative;
+            height: ${media?.position === 'fixed' ? `calc(${getSectionHeightFallback(height)} + 200vh)` : getSectionHeightFallback(height)};
             height: ${media?.position === 'fixed' ? `calc(${getSectionHeight(height)} + 200vh)` : getSectionHeight(height)};
             width: 100%;
          }
@@ -154,9 +156,16 @@ export const Section: FC<PropsWithChildren<Props>> = ({ section, data, zIndex, a
   );
 };
 
-export function getSectionHeight(heightData: SectionHeight): string {
+export function getSectionHeightFallback(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';
 }
+
+export function getSectionHeight(heightData: SectionHeight): string {
+  const { units, vhUnits, mode } = heightData;
+  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}svh`;
+  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
+  return '0';
+}

package/src/components/Section/SectionImage.tsx

@@ -7,6 +7,8 @@ export type TSectionImage = {
   size: string;
   position: string;
   offsetX: number | null;
+  opacity?: number;
+  tileSize?: number;
 };
 
 interface Props {
@@ -15,8 +17,9 @@ interface Props {
 }
 
 export const SectionImage: FC<Props> = ({ media, sectionId }) => {
-  const { url, size, position, offsetX } = media;
+  const { url, size, position, offsetX, opacity, tileSize } = media;
   const isContainHeight = size === 'contain-height';
+  const isTile = size === 'tile';
   const hasOffsetX = offsetX !== null && size === 'contain';
   return (
     <>
@@ -30,18 +33,37 @@ export const SectionImage: FC<Props> = ({ media, sectionId }) => {
           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%'
-          }}
-        />
+        {isTile ? (
+          <div
+            className={`image-background-${sectionId}`}
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: '100%',
+              backgroundImage: `url(${url})`,
+              backgroundSize: `${tileSize}%`,
+              backgroundRepeat: 'repeat',
+              backgroundPosition: '0 0',
+              opacity
+            }}
+          />
+        ) : (
+          <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%',
+              opacity
+            }}
+          />
+        )}
       </div>
     </>
   );

package/src/components/Section/SectionVideo.tsx

@@ -9,6 +9,7 @@ export type TSectionVideo = {
   position: string;
   coverUrl: string | null;
   offsetX: number | null;
+  opacity?: number;
 };
 
 interface Props {
@@ -21,7 +22,7 @@ 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 { url, size, position, offsetX, coverUrl, play, opacity } = media;
   const [isPlaying, setIsPlaying] = useState(false);
   const [userPaused, setUserPaused] = useState(false);
   const [isClickedOnCover, setIsClickedOnCover] = useState(false);
@@ -89,7 +90,7 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
           autoPlay={play === 'auto'}
           loop
           style={{
-            opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : 1,
+            opacity: !isClickedOnCover && play === 'on-click' && coverUrl ? 0 : opacity,
             objectFit: isContainHeight ? 'cover' : (size ?? 'cover') as CSSProperties['objectFit'],
             width: isContainHeight && !isVideoWidthOverflow ? 'auto' : '100%',
             transform: isContainHeight ? 'translateX(-50%)' : 'none',
@@ -125,7 +126,7 @@ export const SectionVideo: FC<Props> = ({ container, sectionId, media }) => {
                 alt="Video cover"
                 className={`video-background-${sectionId}-cover`}
                 style={{
-                  opacity: isPlaying ? 0 : 1,
+                  opacity: isPlaying ? 0 : opacity,
                   left: isContainHeight ? '50%' : (hasOffsetX ? `${offsetX * 100}vw` : '0'),
                   width: isContainHeight ? 'auto' : '100%',
                   objectFit: isContainHeight ? 'unset' : (size ?? 'cover') as CSSProperties['objectFit'],

package/src/utils/getFill.ts

@@ -1,9 +1,10 @@
+import { CntrlColor } from '@cntrl-site/color';
 import { FillLayer } from '@cntrl-site/sdk';
 
 export function getFill(fill: FillLayer) {
   if (fill.type === 'linear-gradient' && Array.isArray(fill.colors)) {
     return `linear-gradient(${fill.angle}deg, ${fill.colors
-      .map(c => `${c.value} ${c.position}%`)
+      .map(c => `${getParsedColor(c.value)} ${c.position}%`)
       .join(', ')})`;
   }
 
@@ -13,7 +14,7 @@ export function getFill(fill: FillLayer) {
       : '50% 50%';
     const diameter = fill.diameter;
     return `radial-gradient(circle ${diameter * 100} at ${center}, ${fill.colors
-      .map(c => `${c.value} ${c.position}%`)
+      .map(c => `${getParsedColor(c.value)} ${c.position}%`)
       .join(', ')})`;
   }
 
@@ -26,11 +27,11 @@ export function getFill(fill: FillLayer) {
     const lastStop = fill.colors[fill.colors.length - 1];
     const shouldAppendWrapStop = hasMultipleStops && typeof lastStop.position === 'number' && lastStop.position < 100;
     const colorsWithWrap = shouldAppendWrapStop
-      ? [...fill.colors, { value: fill.colors[0].value, position: 100 }]
+      ? [...fill.colors, { value: getParsedColor(fill.colors[0].value), position: 100 }]
       : fill.colors;
 
     return `conic-gradient(from ${angle + 90}deg at ${center}, ${colorsWithWrap
-      .map(c => `${c.value} ${c.position}%`)
+      .map(c => `${getParsedColor(c.value)} ${c.position}%`)
       .join(', ')})`;
   }
 
@@ -39,8 +40,13 @@ export function getFill(fill: FillLayer) {
   }
 
   if (fill.type === 'solid') {
-    return fill.value;
+    return getParsedColor(fill.value);
   }
 
   return 'transparent';
 }
+
+function getParsedColor(color?: string) {
+  if (!color) return color;
+  return CntrlColor.parse(color).fmt('rgba');
+}