@cntrl-site/sdk-nextjs 0.1.9 → 0.2.0

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "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.7",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },

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
+  <>
+  </>
+)