@cntrl-site/sdk-nextjs 0.1.8 → 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/Section.js

@@ -3,10 +3,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Section = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sdk_1 = require("@cntrl-site/sdk");
-const Section = ({ section, layouts, children }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, children: children }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+const Section = ({ section, layouts, children }) => {
+    const getSectionVisibilityStyles = () => {
+        return layouts
+            .sort((a, b) => a.startsWith - b.startsWith)
+            .reduce((acc, layout) => {
+            const isHidden = section.hidden[layout.id];
+            return `
+          ${acc}
+          ${(0, sdk_1.getLayoutMediaQuery)(layout.id, layouts)} {
+            .section-${section.id} {
+              display: ${isHidden ? 'none' : 'block'};
+            }
+          }`;
+        }, '');
+    };
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, children: children }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
       ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
             height: ${height * 100}vw;
+            position: relative;
           }`))}
+      ${getSectionVisibilityStyles()}
     ` })] }));
+};
 exports.Section = Section;

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.8",
+  "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/Section.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactElement } from 'react';
-import { getLayoutStyles, TLayout, TArticleSection } from '@cntrl-site/sdk';
+import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TLayout } from '@cntrl-site/sdk';
 
 type SectionChild = ReactElement<any, any>;
 
@@ -9,19 +9,38 @@ interface Props {
   children: SectionChild[];
 }
 
-export const Section: FC<Props> = ({ section, layouts, children }) => (
-  <>
-    <div className={`section-${section.id}`}>
-      {children}
-    </div>
-    <style jsx>{`
+export const Section: FC<Props> = ({ section, layouts, children }) => {
+  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'};
+            }
+          }`;
+      }, '');
+  };
+
+ return (
+    <>
+      <div className={`section-${section.id}`}>
+        {children}
+      </div>
+      <style jsx>{`
       ${
-      getLayoutStyles(layouts, [section.height], ([height]) => (`
+        getLayoutStyles(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
             height: ${height * 100}vw;
+            position: relative;
           }`
-      ))
-    }
+        ))
+      }
+      ${getSectionVisibilityStyles()}
     `}</style>
-  </>
-);
+    </>
+  );
+};

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