@cntrl-site/sdk-nextjs 0.12.7 → 0.12.9

package/.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,15 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
+      <option name="myValues">
+        <value>
+          <list size="1">
+            <item index="0" class="java.lang.String" itemvalue="jsx" />
+          </list>
+        </value>
+      </option>
+      <option name="myCustomValuesEnabled" value="true" />
+    </inspection_tool>
+  </profile>
+</component>

package/lib/components/Section.js

@@ -33,9 +33,9 @@ const Section = ({ section, data, children }) => {
         }, '');
     };
     if (SectionComponent)
-        return (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children });
+        return (0, jsx_runtime_1.jsx)("div", { ref: sectionRef, children: (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children }) });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, style: {
-                    backgroundColor: backgroundColor
+                    backgroundColor: backgroundColor.toCss()
                 }, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
@@ -43,6 +43,11 @@ const Section = ({ section, data, children }) => {
             position: relative;
          }`))}
       ${getSectionVisibilityStyles()}
+      @supports not (color: oklch(42% 0.3 90 / 1)) {
+        .section-${section.id} {
+          background-color: ${backgroundColor.fmt('rgba')};
+        }
+      }
     ` })] }));
 };
 exports.Section = Section;

package/lib/components/items/ImageItem.js

@@ -15,14 +15,19 @@ const ImageItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
     return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, style: {
                         borderRadius: `${radius * 100}vw`,
                         borderWidth: `${strokeWidth * 100}vw`,
                         opacity: `${opacity}`,
-                        borderColor: `${borderColor}`,
+                        borderColor: `${borderColor.toCss()}`,
                         transform: `rotate(${angle}deg)`
                     }, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+        @supports not (color: oklch(42% 0.3 90 / 1)) {
+          .image-wrapper-${item.id} {
+            border-color: ${borderColor.fmt('rgba')};
+          }
+        }
          .image-wrapper-${item.id} {
             position: absolute;
             overflow: hidden;

package/lib/components/items/RectangleItem.js

@@ -24,12 +24,6 @@ const RectangleItem = ({ item, sectionId }) => {
                         borderColor: `${borderColor.toCss()}`,
                         transform: `rotate(${angle}deg)`
                     } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-        @supports (color: oklch(42% 0.3 90 / 1)) {
-          .rectangle-${item.id} {
-            background-color: ${backgroundColor.fmt('oklch')};
-            border-color: ${borderColor.fmt('oklch')};
-          }
-        }
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .rectangle-${item.id} {
             background-color: ${backgroundColor.fmt('rgba')};

package/lib/components/items/VideoItem.js

@@ -15,15 +15,20 @@ const VideoItem = ({ item, sectionId }) => {
     const id = (0, react_1.useId)();
     const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item, sectionId);
     const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+    const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
     return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, style: {
                     borderRadius: `${radius * 100}vw`,
                     borderWidth: `${strokeWidth * 100}vw`,
                     opacity: `${opacity}`,
-                    borderColor: `${borderColor}`,
+                    borderColor: `${borderColor.toCss()}`,
                     transform: `rotate(${angle}deg)`
                 }, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
-       .video-wrapper-${item.id} {
+        @supports not (color: oklch(42% 0.3 90 / 1)) {
+          .video-wrapper-${item.id} {
+            border-color: ${borderColor.fmt('rgba')};
+          }
+        }
+        .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
           width: 100%;

package/lib/components/useSectionColor.js

@@ -4,12 +4,14 @@ exports.useSectionColor = void 0;
 const useCurrentLayout_1 = require("../common/useCurrentLayout");
 const react_1 = require("react");
 const sdk_1 = require("@cntrl-site/sdk");
-const DEFAULT_COLOR = 'transparent';
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 const useSectionColor = (colorData) => {
     const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
     return (0, react_1.useMemo)(() => {
         const layoutColor = colorData[layoutId];
-        return !layoutColor ? DEFAULT_COLOR : sdk_1.CntrlColor.parse(layoutColor).toCss();
+        return sdk_1.CntrlColor.parse(!layoutColor
+            ? DEFAULT_COLOR
+            : layoutColor);
     }, []);
 };
 exports.useSectionColor = useSectionColor;

package/lib/utils/RichTextConverter/RichTextConverter.js

@@ -100,6 +100,7 @@ class RichTextConverter {
                             continue;
                         for (const styleGroup of entitiesGroup.stylesGroup) {
                             const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
+                            const color = styleGroup.styles.find(s => s.name === 'COLOR');
                             if (lineHeight?.value) {
                                 currentLineHeight[item.layout] = lineHeight.value;
                             }
@@ -108,6 +109,15 @@ class RichTextConverter {
                   ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
                 }
               `);
+                            if (color) {
+                                styleRules[item.layout].push(`
+                @supports not (color: oklch(42% 0.3 90 / 1)) {
+                  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                    color: ${sdk_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
+                  }
+                }
+              `);
+                            }
                         }
                     }
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.12.7",
+  "version": "0.12.9",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",

package/src/components/Section.tsx

@@ -41,7 +41,7 @@ export const Section: FC<Props> = ({ section, data, children }) => {
       }, '');
   };
 
-  if (SectionComponent) return <SectionComponent data={data}>{children}</SectionComponent>;
+  if (SectionComponent) return <div ref={sectionRef}><SectionComponent data={data}>{children}</SectionComponent></div>;
 
  return (
     <>
@@ -49,7 +49,7 @@ export const Section: FC<Props> = ({ section, data, children }) => {
         className={`section-${section.id}`}
         id={section.name}
         style={{
-          backgroundColor: backgroundColor
+          backgroundColor: backgroundColor.toCss()
         }}
         ref={sectionRef}
       >
@@ -65,6 +65,11 @@ export const Section: FC<Props> = ({ section, data, children }) => {
         ))
       }
       ${getSectionVisibilityStyles()}
+      @supports not (color: oklch(42% 0.3 90 / 1)) {
+        .section-${section.id} {
+          background-color: ${backgroundColor.fmt('rgba')};
+        }
+      }
     `}</JSXStyle>
     </>
   );

package/src/components/items/ImageItem.tsx

@@ -10,7 +10,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
   const id = useId();
   const { radius, strokeWidth, opacity, strokeColor } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
-  const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+  const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
   return (
     <LinkWrapper url={item.link?.url}>
       <>
@@ -19,13 +19,18 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
             borderRadius: `${radius * 100}vw`,
             borderWidth: `${strokeWidth * 100}vw`,
             opacity: `${opacity}`,
-            borderColor: `${borderColor}`,
+            borderColor: `${borderColor.toCss()}`,
             transform: `rotate(${angle}deg)`
           }}
         >
           <img className="image" src={item.commonParams.url} />
         </div>
         <JSXStyle id={id}>{`
+        @supports not (color: oklch(42% 0.3 90 / 1)) {
+          .image-wrapper-${item.id} {
+            border-color: ${borderColor.fmt('rgba')};
+          }
+        }
          .image-wrapper-${item.id} {
             position: absolute;
             overflow: hidden;

package/src/components/items/RectangleItem.tsx

@@ -16,7 +16,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
   return (
     <LinkWrapper url={item.link?.url}>
       <>
-        <div  className={`rectangle-${item.id}`}
+        <div className={`rectangle-${item.id}`}
           style={{
             backgroundColor: `${backgroundColor.toCss()}`,
             borderRadius: `${radius * 100}vw`,
@@ -26,12 +26,6 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
           }}
         />
         <JSXStyle id={id}>{`
-        @supports (color: oklch(42% 0.3 90 / 1)) {
-          .rectangle-${item.id} {
-            background-color: ${backgroundColor.fmt('oklch')};
-            border-color: ${borderColor.fmt('oklch')};
-          }
-        }
         @supports not (color: oklch(42% 0.3 90 / 1)) {
           .rectangle-${item.id} {
             background-color: ${backgroundColor.fmt('rgba')};

package/src/components/items/VideoItem.tsx

@@ -10,24 +10,30 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId }) => {
   const id = useId();
   const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item, sectionId);
   const angle = useItemAngle(item, sectionId);
-  const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
+  const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
   return (
     <LinkWrapper url={item.link?.url}>
-      <div className={`video-wrapper-${item.id}`}
-         style={{
-           borderRadius: `${radius * 100}vw`,
-           borderWidth: `${strokeWidth * 100}vw`,
-           opacity: `${opacity}`,
-           borderColor: `${borderColor}`,
-           transform: `rotate(${angle}deg)`
-         }}
+      <div
+        className={`video-wrapper-${item.id}`}
+        style={{
+          borderRadius: `${radius * 100}vw`,
+          borderWidth: `${strokeWidth * 100}vw`,
+          opacity: `${opacity}`,
+          borderColor: `${borderColor.toCss()}`,
+          transform: `rotate(${angle}deg)`
+        }}
       >
         <video autoPlay muted loop playsInline className="video">
           <source src={item.commonParams.url} />
         </video>
       </div>
       <JSXStyle id={id}>{`
-       .video-wrapper-${item.id} {
+        @supports not (color: oklch(42% 0.3 90 / 1)) {
+          .video-wrapper-${item.id} {
+            border-color: ${borderColor.fmt('rgba')};
+          }
+        }
+        .video-wrapper-${item.id} {
           position: absolute;
           overflow: hidden;
           width: 100%;

package/src/components/useSectionColor.ts

@@ -3,12 +3,16 @@ import { useMemo } from 'react';
 import { CntrlColor } from '@cntrl-site/sdk';
 
 type LayoutIdentifier = string;
-const DEFAULT_COLOR = 'transparent';
+const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
 
-export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): string => {
+export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
   const layoutId = useCurrentLayout();
    return useMemo(() => {
      const layoutColor = colorData[layoutId];
-     return !layoutColor ? DEFAULT_COLOR : CntrlColor.parse(layoutColor).toCss();
+     return CntrlColor.parse(
+       !layoutColor
+         ? DEFAULT_COLOR
+         : layoutColor
+     );
    }, []);
 };

package/src/utils/RichTextConverter/RichTextConverter.tsx

@@ -134,6 +134,7 @@ export class RichTextConverter {
             if (!entitiesGroup.stylesGroup) continue;
             for (const styleGroup of entitiesGroup.stylesGroup) {
               const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
+              const color = styleGroup.styles.find(s => s.name === 'COLOR');
               if (lineHeight?.value) {
                 currentLineHeight[item.layout] = lineHeight.value;
               }
@@ -142,6 +143,15 @@ export class RichTextConverter {
                   ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
                 }
               `);
+              if (color) {
+                styleRules[item.layout].push(`
+                @supports not (color: oklch(42% 0.3 90 / 1)) {
+                  .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                    color: ${CntrlColor.parse(getResolvedValue(color.value, 'COLOR')!).fmt('rgba')};
+                  }
+                }
+              `);
+              }
             }
           }
         }

package/.idea/codeStyles/codeStyleConfig.xml

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