@cntrl-site/sdk-nextjs 0.2.9 → 0.2.10

package/lib/components/Article.js

@@ -2,18 +2,14 @@
 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 {
+       .article {
             position: relative;
             overflow: hidden;
-            background-color: ${color ? color : 'transparent'};
           }
-        `))}
       ` })] }));
 };
 exports.Article = Article;

package/lib/components/Item.js

@@ -31,7 +31,7 @@ const Item = ({ item, layouts }) => {
         ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;
-              top: ${area.top * 100}vw;
+              top: ${getItemTopStyle(area.top, area.anchorSide)};
               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'};
@@ -42,10 +42,23 @@ const Item = ({ item, layouts }) => {
       ` })] }));
 };
 exports.Item = Item;
-const parseSizing = (sizing) => {
+function getItemTopStyle(top, anchorSide) {
+    const defaultValue = `${top * 100}vw`;
+    if (!anchorSide)
+        return defaultValue;
+    switch (anchorSide) {
+        case sdk_1.AnchorSide.Top:
+            return defaultValue;
+        case sdk_1.AnchorSide.Center:
+            return `calc(50% + ${top * 100}vw)`;
+        case sdk_1.AnchorSide.Bottom:
+            return `calc(100% + ${top * 100}vw)`;
+    }
+}
+function parseSizing(sizing) {
     const axisSizing = sizing.split(' ');
     return {
         y: axisSizing[0],
         x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
     };
-};
+}

package/lib/components/Section.js

@@ -21,10 +21,22 @@ const Section = ({ section, layouts, children }) => {
     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;
+            height: ${getSectionHeight(height)};
             position: relative;
           }`))}
+      ${(0, sdk_1.getLayoutStyles)(layouts, [section.color], ([color]) => (`
+         .section-${section.id} {
+            background-color: ${color ? color : 'transparent'};
+          }`))}
       ${getSectionVisibilityStyles()}
     ` })] }));
 };
 exports.Section = Section;
+function getSectionHeight(heightData) {
+    const { units, vhUnits, mode } = heightData;
+    if (mode === sdk_1.SectionHeightMode.ViewportHeightUnits)
+        return `${vhUnits}vh`;
+    if (mode === sdk_1.SectionHeightMode.ControlUnits)
+        return `${units * 100}vw`;
+    return '0';
+}

package/package.json

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

package/src/components/Article.tsx

@@ -21,13 +21,10 @@ export const Article: FC<Props> = ({ article, layouts }) => {
         ))}
       </div>
       <style jsx>{`
-        ${getLayoutStyles(layouts, [article.color], ([color]) => (`
-          .article {
+       .article {
             position: relative;
             overflow: hidden;
-            background-color: ${color ? color : 'transparent'};
           }
-        `))}
       `}</style>
     </>
   );

package/src/components/Item.tsx

@@ -4,7 +4,8 @@ import {
   ArticleItemType,
   ArticleItemSizingType as SizingType,
   TArticleItemAny,
-  TLayout
+  TLayout,
+  AnchorSide
 } from '@cntrl-site/sdk';
 import { RectangleItem } from './items/RectangleItem';
 import { ImageItem } from './items/ImageItem';
@@ -47,7 +48,7 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
         ${getLayoutStyles(layouts, layoutValues, ([area]) => (`
            .item-${item.id} {
               position: absolute;
-              top: ${area.top * 100}vw;
+              top: ${getItemTopStyle(area.top, area.anchorSide)};
               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'};
@@ -60,13 +61,26 @@ export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
   );
 };
 
-const parseSizing = (sizing: string): Axis => {
+function getItemTopStyle(top: number, anchorSide: AnchorSide) {
+  const defaultValue = `${top * 100}vw`;
+  if (!anchorSide) return defaultValue;
+  switch (anchorSide) {
+    case AnchorSide.Top:
+      return defaultValue;
+    case AnchorSide.Center:
+      return `calc(50% + ${top * 100}vw)`;
+    case AnchorSide.Bottom:
+      return `calc(100% + ${top * 100}vw)`;
+  }
+}
+
+function parseSizing(sizing: string): Axis {
   const axisSizing = sizing.split(' ');
   return {
     y: axisSizing[0],
     x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
   } as Axis;
-};
+}
 
 interface Axis {
   x: SizingType;

package/src/components/Section.tsx

@@ -1,5 +1,5 @@
 import { FC, ReactElement } from 'react';
-import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TLayout } from '@cntrl-site/sdk';
+import { getLayoutMediaQuery, getLayoutStyles, TArticleSection, TLayout, TSectionHeight, SectionHeightMode } from '@cntrl-site/sdk';
 
 type SectionChild = ReactElement<any, any>;
 
@@ -34,13 +34,27 @@ export const Section: FC<Props> = ({ section, layouts, children }) => {
       ${
         getLayoutStyles(layouts, [section.height], ([height]) => (`
          .section-${section.id} {
-            height: ${height * 100}vw;
+            height: ${getSectionHeight(height)};
             position: relative;
           }`
         ))
       }
+      ${
+        getLayoutStyles(layouts, [section.color], ([color]) => (`
+         .section-${section.id} {
+            background-color: ${color ? color : 'transparent'};
+          }`
+        ))
+      }
       ${getSectionVisibilityStyles()}
     `}</style>
     </>
   );
 };
+
+function getSectionHeight(heightData: TSectionHeight): string {
+  const { units, vhUnits, mode } = heightData;
+  if (mode === SectionHeightMode.ViewportHeightUnits) return `${vhUnits}vh`;
+  if (mode === SectionHeightMode.ControlUnits) return `${units * 100}vw`;
+  return '0';
+}

package/.idea/inspectionProfiles/Project_Default.xml

@@ -1,15 +0,0 @@
-<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>