@cntrl-site/sdk-nextjs 0.1.9 → 0.2.1

package/.idea/codeStyles/codeStyleConfig.xml

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

package/lib/components/Article.js

@@ -2,14 +2,18 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Article = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
 const Section_1 = require("./Section");
 const Item_1 = require("./Item");
 const Article = ({ article, layouts }) => {
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "article", children: article.sections.map((section, i) => ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, layouts: layouts, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { layouts: layouts, item: item }, item.id))) }, section.id))) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+        ${(0, sdk_1.getLayoutStyles)(layouts, [article.color], ([color]) => (`
           .article {
             position: relative;
             overflow: hidden;
+            background-color: ${color ? color : 'transparent'};
           }
+        `))}
       ` })] }));
 };
 exports.Article = Article;

package/lib/components/Item.js

@@ -7,11 +7,13 @@ const RectangleItem_1 = require("./items/RectangleItem");
 const ImageItem_1 = require("./items/ImageItem");
 const VideoItem_1 = require("./items/VideoItem");
 const RichTextItem_1 = require("./items/RichTextItem");
+const VimeoEmbed_1 = require("./items/VimeoEmbed");
 const itemsMap = {
     [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
     [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
     [sdk_1.ArticleItemType.Video]: VideoItem_1.VideoItem,
-    [sdk_1.ArticleItemType.RichText]: RichTextItem_1.RichTextItem
+    [sdk_1.ArticleItemType.RichText]: RichTextItem_1.RichTextItem,
+    [sdk_1.ArticleItemType.VimeoEmbed]: VimeoEmbed_1.VimeoEmbed
 };
 const noop = () => null;
 const Item = ({ item, layouts }) => {
@@ -22,12 +24,12 @@ const Item = ({ item, layouts }) => {
     const sizingAxis = parseSizing(item.commonParams.sizing);
     const ItemComponent = itemsMap[item.type] || noop;
     return ((0, jsx_runtime_1.jsxs)("div", { className: `item-${item.id}`, children: [(0, jsx_runtime_1.jsx)(ItemComponent, { item: item, layouts: layouts }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
-        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => (`
+        ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;
               top: ${area.top * 100}vw;
-              left: ${layoutParams?.fullwidth ? 0 : area.left * 100}vw;
-              width: ${layoutParams?.fullwidth ? '100vw' : sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'auto'};
+              left: ${area.left * 100}vw;
+              width: ${sizingAxis.x === sdk_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'auto'};
               height: ${sizingAxis.y === sdk_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'auto'};
               z-index: ${area.zIndex};
               transform: rotate(${area.angle}deg);

package/lib/components/items/VimeoEmbed.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VimeoEmbed = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const VimeoEmbed = () => (
+// TODO
+(0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}));
+exports.VimeoEmbed = VimeoEmbed;

package/lib/utils/RichTextConverter.js

@@ -19,7 +19,7 @@ class RichTextConverter {
             return rec;
         }, {});
         let currentLineHeight = layouts.reduce((rec, layout) => {
-            const styles = (0, sdk_1.getClosestLayoutValue)(richText.layoutParams, layouts, layout.id)?.styles;
+            const styles = richText.layoutParams[layout.id].styles;
             rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value ?? '0';
             return rec;
         }, {});
@@ -39,7 +39,7 @@ class RichTextConverter {
                 continue;
             }
             const newStylesGroup = layouts.map(({ id: layoutId }) => {
-                const params = (0, sdk_1.getClosestLayoutValue)(richText.layoutParams, layouts, layoutId);
+                const params = richText.layoutParams[layoutId];
                 const styles = params.styles
                     .filter(s => s.start >= block.start && s.end <= block.end)
                     .map(s => ({ ...s, start: s.start - block.start, end: s.end - block.start }));
@@ -53,7 +53,7 @@ class RichTextConverter {
                 const blockClass = `rt_${richText.id}-b${blockIndex}_${layouts.map(l => group.some(g => g.layout === l.id) ? '1' : '0').join('')}`;
                 const kids = [];
                 layouts.forEach(l => {
-                    const ta = (0, sdk_1.getClosestLayoutValue)(richText.layoutParams, layouts, l.id).textAlign;
+                    const ta = richText.layoutParams[l.id].textAlign;
                     const whiteSpace = ta === sdk_1.TextAlign.Justify || ta === sdk_1.TextAlign.Right ? 'normal' : 'pre-wrap';
                     styleRules[l.id].push(`
             .${blockClass} {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.1.9",
+  "version": "0.2.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.js",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^0.2.6",
+    "@cntrl-site/sdk": "^0.2.8",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },
@@ -33,6 +33,7 @@
   "devDependencies": {
     "@tsconfig/node16": "^1.0.3",
     "@tsconfig/recommended": "^1.0.1",
+    "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",
     "typescript": "^4.7.4"
   },

package/src/components/Article.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { TArticle, TLayout } from '@cntrl-site/sdk';
+import { TArticle, TLayout, getLayoutStyles } from '@cntrl-site/sdk';
 import { Section } from './Section';
 import { Item } from './Item';
 
@@ -21,10 +21,13 @@ export const Article: FC<Props> = ({ article, layouts }) => {
         ))}
       </div>
       <style jsx>{`
+        ${getLayoutStyles(layouts, [article.color], ([color]) => (`
           .article {
             position: relative;
             overflow: hidden;
+            background-color: ${color ? color : 'transparent'};
           }
+        `))}
       `}</style>
     </>
   );

package/src/components/Item.tsx

@@ -10,6 +10,7 @@ import { RectangleItem } from './items/RectangleItem';
 import { ImageItem } from './items/ImageItem';
 import { VideoItem } from './items/VideoItem';
 import { RichTextItem } from './items/RichTextItem';
+import { VimeoEmbed } from './items/VimeoEmbed';
 
 export interface ItemProps<I extends TArticleItemAny> {
   layouts: TLayout[];
@@ -20,7 +21,8 @@ const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
   [ArticleItemType.Rectangle]: RectangleItem,
   [ArticleItemType.Image]: ImageItem,
   [ArticleItemType.Video]: VideoItem,
-  [ArticleItemType.RichText]: RichTextItem
+  [ArticleItemType.RichText]: RichTextItem,
+  [ArticleItemType.VimeoEmbed]: VimeoEmbed
 };
 
 const noop = () => null;
@@ -38,12 +40,12 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
     <div className={`item-${item.id}`}>
       <ItemComponent item={item} layouts={layouts} />
       <style jsx>{`
-        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => (`
+        ${getLayoutStyles(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;
               top: ${area.top * 100}vw;
-              left: ${layoutParams?.fullwidth ? 0 : area.left * 100}vw;
-              width: ${layoutParams?.fullwidth ? '100vw' : sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'auto'};
+              left: ${area.left * 100}vw;
+              width: ${sizingAxis.x === SizingType.Manual ? `${area.width * 100}vw` : 'auto'};
               height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'auto'};
               z-index: ${area.zIndex};
               transform: rotate(${area.angle}deg);

package/src/components/items/VimeoEmbed.tsx

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { ItemProps } from '../Item';
+import { VimeoEmbedItem } from '@cntrl-site/core/src/article/ArticleItems';
+
+export const VimeoEmbed:FC<ItemProps<VimeoEmbedItem>> = () => (
+  // TODO
+  <>
+  </>
+)

package/src/utils/RichTextConverter.tsx

@@ -1,6 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
 import {
-  getClosestLayoutValue,
   getLayoutMediaQuery,
   RichText,
   TextAlign,
@@ -48,7 +47,7 @@ export class RichTextConverter {
       return rec;
     }, {});
     let currentLineHeight = layouts.reduce<Record<string, string>>((rec, layout) => {
-      const styles = getClosestLayoutValue(richText.layoutParams, layouts, layout.id)?.styles;
+      const styles = richText.layoutParams[layout.id].styles;
       rec[layout.id] = styles?.find(s => s.style === 'LINEHEIGHT')?.value ?? '0';
       return rec;
     }, {});
@@ -69,7 +68,7 @@ export class RichTextConverter {
         continue;
       }
       const newStylesGroup = layouts.map(({ id: layoutId }) => {
-        const params = getClosestLayoutValue(richText.layoutParams, layouts, layoutId);
+        const params = richText.layoutParams[layoutId];
         const styles = params.styles!
           .filter(s => s.start >= block.start && s.end <= block.end)
           .map(s => ({ ...s, start: s.start - block.start, end: s.end - block.start }));
@@ -83,7 +82,7 @@ export class RichTextConverter {
         const blockClass = `rt_${richText.id}-b${blockIndex}_${layouts.map(l => group.some(g => g.layout === l.id) ? '1' : '0').join('')}`;
         const kids: ReactNode[] = [];
         layouts.forEach(l => {
-          const ta = getClosestLayoutValue(richText.layoutParams, layouts, l.id).textAlign;
+          const ta = richText.layoutParams[l.id].textAlign;
           const whiteSpace = ta === TextAlign.Justify || ta === TextAlign.Right ? 'normal' : 'pre-wrap';
           styleRules[l.id].push(`
             .${blockClass} {