@cntrl-site/sdk-nextjs 0.0.1

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/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/sdk-nextjs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 CNTRL
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1 @@
+# sdk-nextjs

package/TODO.md

@@ -0,0 +1 @@
+1. Uninstall `@types/isomorphic-fetch` package and run `npm run build` - results in a TS compile error 

package/jest.config.js

@@ -0,0 +1,6 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'node',
+  rootDir: './src'
+};

package/lib/components/Article.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Article = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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: `
+          .article {
+            position: relative;
+            overflow-x: hidden;
+          }
+      ` })] }));
+};
+exports.Article = Article;

package/lib/components/Item.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Item = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@cntrl-site/core");
+const sdk_1 = require("@cntrl-site/sdk");
+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 itemsMap = {
+    [core_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
+    [core_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
+    [core_1.ArticleItemType.Video]: VideoItem_1.VideoItem,
+    [core_1.ArticleItemType.RichText]: RichTextItem_1.RichTextItem
+};
+const noop = () => null;
+const Item = ({ item, layouts }) => {
+    const layoutValues = [item.area];
+    if (item.layoutParams) {
+        layoutValues.push(item.layoutParams);
+    }
+    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]) => (`
+           .item-${item.id} {
+              position: absolute;
+              top: ${area.top * 100}vw;
+              left: ${layoutParams?.fullwidth ? 0 : area.left * 100}vw;
+              width: ${layoutParams?.fullwidth ? '100vw' : sizingAxis.x === core_1.ArticleItemSizingType.Manual ? `${area.width * 100}vw` : 'auto'};
+              height: ${sizingAxis.y === core_1.ArticleItemSizingType.Manual ? `${area.height * 100}vw` : 'auto'};
+              z-index: ${area.zIndex};
+              transform: rotate(${area.angle}deg);
+            }
+        `))}
+      ` })] }));
+};
+exports.Item = Item;
+const parseSizing = (sizing) => {
+    const axisSizing = sizing.split(' ');
+    return {
+        y: axisSizing[0],
+        x: axisSizing[1] ? axisSizing[1] : axisSizing[0]
+    };
+};

package/lib/components/LinkWrapper.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LinkWrapper = ({ url, children }) => (url ? (0, jsx_runtime_1.jsx)("a", { href: url, target: "_blank", rel: "noreferrer", children: children }) : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }));
+exports.LinkWrapper = LinkWrapper;

package/lib/components/Section.js

@@ -0,0 +1,12 @@
+"use strict";
+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: `
+      ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
+         .section-${section.id} {
+            height: ${height * 100}vw;
+          }`))}
+    ` })] }));
+exports.Section = Section;

package/lib/components/items/ImageItem.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImageItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const sdk_1 = require("@cntrl-site/sdk");
+const LinkWrapper_1 = require("../LinkWrapper");
+const ImageItem = ({ item, layouts }) => ((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}`, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+        ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
+           .image-wrapper-${item.id} {
+              position: absolute;
+              width: 100%;
+              height: 100%;
+              border-style: solid;
+              box-sizing: border-box;
+              border-color: ${strokeColor};
+              border-radius: ${radius * 100}vw;
+              opacity: ${opacity};
+              border-width: ${strokeWidth * 100}vw;
+            }`))}
+        .image {
+          width: 100%;
+          height: 100%;
+          opacity: 1;
+          object-fit: cover;
+          pointer-events: none;
+        }
+      ` })] }) }));
+exports.ImageItem = ImageItem;

package/lib/components/items/RectangleItem.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RectangleItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LinkWrapper_1 = require("../LinkWrapper");
+const sdk_1 = require("@cntrl-site/sdk");
+const RectangleItem = ({ item, layouts }) => ((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: `rectangle-${item.id}` }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+      ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, fillColor, radius, strokeWidth }]) => (`
+         .rectangle-${item.id} {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-style: solid;
+            box-sizing: border-box;
+            border-color: ${strokeColor};
+            background-color: ${fillColor};
+            border-radius: ${radius * 100}vw;
+            border-width: ${strokeWidth * 100}vw;
+          }`))}
+      ` })] }) }));
+exports.RectangleItem = RectangleItem;

package/lib/components/items/RichTextItem.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+//@ts-ignore
+const style_1 = __importDefault(require("styled-jsx/style"));
+const RichTextConverter_1 = require("../../utils/RichTextConverter");
+const richTextConv = new RichTextConverter_1.RichTextConverter();
+const RichTextItem = ({ item, layouts }) => {
+    const [content, styles] = richTextConv.toHtml(item, layouts);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "rich-text", children: content }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: styles })] }));
+};
+exports.RichTextItem = RichTextItem;

package/lib/components/items/VideoItem.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LinkWrapper_1 = require("../LinkWrapper");
+const sdk_1 = require("@cntrl-site/sdk");
+const VideoItem = ({ item, layouts }) => ((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: `video-wrapper-${item.id}`, 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", { jsx: true, children: `
+        ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
+           .video-wrapper-${item.id} {
+              position: absolute;
+              width: 100%;
+              height: 100%;
+              border-style: solid;
+              box-sizing: border-box;
+              border-color: ${strokeColor};
+              border-radius: ${radius * 100}vw;
+              border-width: ${strokeWidth * 100}vw;
+              opacity: ${opacity};
+            }`))}
+        .video {
+          width: 100%;
+          height: 100%;
+          opacity: 1;
+          object-fit: cover;
+          pointer-events: none;
+        }
+      ` })] }) }));
+exports.VideoItem = VideoItem;

package/lib/index.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.RichTextConverter = void 0;
+var RichTextConverter_1 = require("./utils/RichTextConverter");
+Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });
+var Article_1 = require("./components/Article");
+Object.defineProperty(exports, "Article", { enumerable: true, get: function () { return Article_1.Article; } });
+var Section_1 = require("./components/Section");
+Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return Section_1.Section; } });
+var Item_1 = require("./components/Item");
+Object.defineProperty(exports, "Item", { enumerable: true, get: function () { return Item_1.Item; } });
+var ImageItem_1 = require("./components/items/ImageItem");
+Object.defineProperty(exports, "ImageItem", { enumerable: true, get: function () { return ImageItem_1.ImageItem; } });
+var RectangleItem_1 = require("./components/items/RectangleItem");
+Object.defineProperty(exports, "RectangleItem", { enumerable: true, get: function () { return RectangleItem_1.RectangleItem; } });
+var RichTextItem_1 = require("./components/items/RichTextItem");
+Object.defineProperty(exports, "RichTextItem", { enumerable: true, get: function () { return RichTextItem_1.RichTextItem; } });
+var VideoItem_1 = require("./components/items/VideoItem");
+Object.defineProperty(exports, "VideoItem", { enumerable: true, get: function () { return VideoItem_1.VideoItem; } });

package/lib/utils/RichTextConverter.js

@@ -0,0 +1,196 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichTextConverter = exports.FontStyles = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const core_1 = require("@cntrl-site/core");
+exports.FontStyles = {
+    'normal': {},
+    'bold': { 'font-weight': 'bold' },
+    'italic': { 'font-style': 'italic' }
+};
+class RichTextConverter {
+    toHtml(richText, layouts) {
+        const { text, blocks = [] } = richText.commonParams;
+        const root = [];
+        const styleRules = layouts.reduce((rec, layout) => {
+            rec[layout.id] = [];
+            return rec;
+        }, {});
+        for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
+            const block = blocks[blockIndex];
+            const content = text.slice(block.start, block.end);
+            const entities = block.entities.sort((a, b) => a.start - b.start) ?? [];
+            if (content.length === 0) {
+                root.push((0, jsx_runtime_1.jsx)("div", { style: { lineHeight: 0 }, children: (0, jsx_runtime_1.jsx)("br", {}) }));
+                continue;
+            }
+            const newStylesGroup = layouts.map(({ id: layoutId }) => {
+                const params = (0, core_1.getClosestLayoutValue)(richText.layoutParams, layouts, 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 }));
+                return ({
+                    layout: layoutId,
+                    styles: this.normalizeStyles(styles, entities)
+                });
+            });
+            const sameLayouts = groupBy(newStylesGroup, (item) => RichTextConverter.serializeRanges(item.styles ?? []));
+            for (const group of Object.values(sameLayouts)) {
+                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 => {
+                    styleRules[l.id].push(`
+            .${blockClass} {
+              display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
+              text-align: ${(0, core_1.getClosestLayoutValue)(richText.layoutParams, layouts, l.id).textAlign};
+              line-height: 0;
+            }
+          `);
+                });
+                const item = group[0];
+                const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];
+                let offset = 0;
+                for (const entity of entitiesGroups) {
+                    const entityKids = [];
+                    if (offset < entity.start) {
+                        kids.push(content.slice(offset, entity.start));
+                        offset = entity.start;
+                    }
+                    for (const style of entity.stylesGroup) {
+                        if (offset < style.start) {
+                            entityKids.push(content.slice(offset, style.start));
+                        }
+                        entityKids.push((0, jsx_runtime_1.jsx)("span", { className: `s-${style.start}-${style.end}`, children: content.slice(style.start, style.end) }, style.start));
+                        offset = style.end;
+                    }
+                    if (offset < entity.end) {
+                        entityKids.push(content.slice(offset, entity.end));
+                        offset = entity.end;
+                    }
+                    if (entity.link) {
+                        kids.push((0, jsx_runtime_1.jsx)("a", { target: "_blank", href: entity.link, rel: "noreferrer", children: entityKids }, entity.start));
+                        continue;
+                    }
+                    kids.push(...entityKids);
+                }
+                if (offset < content.length) {
+                    kids.push(content.slice(offset));
+                }
+                for (const item of group) {
+                    const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];
+                    for (const entitiesGroup of entitiesGroups) {
+                        if (!entitiesGroup.stylesGroup)
+                            continue;
+                        for (const styleGroup of entitiesGroup.stylesGroup) {
+                            styleRules[item.layout].push(`
+                .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
+                }
+              `);
+                        }
+                    }
+                }
+                root.push((0, jsx_runtime_1.jsx)("div", { className: blockClass, children: kids }, blockClass));
+            }
+        }
+        const styles = layouts.map(l => `
+      ${(0, core_1.getLayoutMediaQuery)(l.id, layouts)} {
+        ${styleRules[l.id].join('\n')}
+      }
+    `).join('\n');
+        return [
+            root,
+            styles
+        ];
+    }
+    static serializeRanges(ranges) {
+        return ranges.map(r => `${r.start},${r.end}`).join(' ');
+    }
+    normalizeStyles(styles, entities) {
+        const styleGroups = [];
+        const dividers = [...styles, ...entities].reduce((ds, s) => {
+            ds.add(s.start);
+            ds.add(s.end);
+            return ds;
+        }, new Set());
+        if (dividers.size === 0)
+            return;
+        const edges = Array.from(dividers).sort((a, b) => a - b);
+        for (let i = 0; i < edges.length - 1; i += 1) {
+            const start = edges[i];
+            const end = edges[i + 1];
+            const applied = styles.filter(s => Math.max(s.start, start) < Math.min(s.end, end));
+            if (applied.length === 0)
+                continue;
+            styleGroups.push({
+                start,
+                end,
+                styles: applied.map(s => ({ name: s.style, value: s.value }))
+            });
+        }
+        return styleGroups;
+    }
+    groupEntities(entities, styleGroups) {
+        const entitiesGroups = [];
+        if (!styleGroups)
+            return;
+        if (entities.length === 0) {
+            entitiesGroups.push({
+                stylesGroup: styleGroups,
+                start: styleGroups[0].start,
+                end: styleGroups[styleGroups.length - 1].end
+            });
+            return entitiesGroups;
+        }
+        const start = entities[0].start < styleGroups[0].start ? entities[0].start : styleGroups[0].start;
+        const end = entities[entities.length - 1].end > styleGroups[styleGroups.length - 1].end ? entities[entities.length - 1].end : styleGroups[styleGroups.length - 1].end;
+        const entitiesDividers = entities.reduce((ds, s) => {
+            ds.add(s.start);
+            ds.add(s.end);
+            return ds;
+        }, new Set([start, end]));
+        const entityDividers = Array.from(entitiesDividers).sort((a, b) => a - b);
+        for (let i = 0; i < entityDividers.length - 1; i += 1) {
+            const start = entityDividers[i];
+            const end = entityDividers[i + 1];
+            const entity = entities.find(e => e.start === start);
+            entitiesGroups.push({
+                stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end),
+                start,
+                end,
+                ...(entity && { link: entity.data.url })
+            });
+        }
+        return entitiesGroups;
+    }
+    static fromDraftToInline(draftStyle) {
+        const { value, name } = draftStyle;
+        const map = {
+            'COLOR': { 'color': value },
+            'TYPEFACE': { 'font-family': `"${value}"` },
+            'FONTSTYLE': value ? { ...exports.FontStyles[value] } : {},
+            'FONTWEIGHT': { 'font-weight': value },
+            'FONTSIZE': { 'font-size': `${parseFloat(value) * 100}vw` },
+            'LINEHEIGHT': { 'line-height': `${parseFloat(value) * 100}vw` },
+            'LETTERSPACING': { 'letter-spacing': `${parseFloat(value) * 100}vw` },
+            'WORDSPACING': { 'word-spacing': `${parseFloat(value) * 100}vw` },
+            'TEXTTRANSFORM': value ? { 'text-transform': value } : { 'text-transform': core_1.TextTransform.None },
+            'VERTICALALIGN': value ? { 'vertical-align': value } : { 'vertical-align': core_1.VerticalAlign.Unset },
+            'TEXTDECORATION': { 'text-decoration': value }
+        };
+        const css = map[name];
+        return Object.entries(css).filter(([, value]) => !!value).map(([prop, value]) => `${prop}: ${value};`).join('\n');
+    }
+}
+exports.RichTextConverter = RichTextConverter;
+function groupBy(items, getKey) {
+    const groups = {};
+    for (const item of items) {
+        const key = getKey(item);
+        if (!groups[key]) {
+            groups[key] = [];
+        }
+        groups[key].push(item);
+    }
+    return groups;
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@cntrl-site/sdk-nextjs",
+  "version": "0.0.1",
+  "description": "SDK for Next.js",
+  "main": "lib/index.js",
+  "types": "src/index.js",
+  "scripts": {
+    "test": "jest",
+    "prebuild": "rm -rf ./lib",
+    "build": "tsc --project tsconfig.build.json",
+    "prepublishOnly": "NODE_ENV=production npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cntrl-site/sdk-nextjs.git"
+  },
+  "author": "arsen@momdesign.nyc",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cntrl-site/sdk-nextjs/issues"
+  },
+  "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
+  "dependencies": {
+    "@cntrl-site/core": "^1.0.6",
+    "@cntrl-site/sdk": "^0.0.1",
+    "styled-jsx": "^5.0.2"
+  },
+  "peerDependencies": {
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node16": "^1.0.3",
+    "@tsconfig/recommended": "^1.0.1",
+    "@types/isomorphic-fetch": "^0.0.36",
+    "@types/react": "^18.0.15",
+    "typescript": "^4.7.4"
+  },
+  "directories": {
+    "lib": "lib"
+  }
+}

package/src/components/Article.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { TArticle, TLayout } from '@cntrl-site/core';
+import { Section } from './Section';
+import { Item } from './Item';
+
+interface Props {
+  article: TArticle;
+  layouts: TLayout[];
+}
+
+export const Article: FC<Props> = ({ article, layouts }) => {
+  return (
+    <>
+      <div className="article">
+        {article.sections.map((section, i) => (
+          <Section section={section} key={section.id} layouts={layouts}>
+            {article.sections[i].items.map(item => (
+              <Item layouts={layouts} item={item} key={item.id} />
+            ))}
+          </Section>
+        ))}
+      </div>
+      <style jsx>{`
+          .article {
+            position: relative;
+            overflow-x: hidden;
+          }
+      `}</style>
+    </>
+  );
+};

package/src/components/Item.tsx

@@ -0,0 +1,68 @@
+import { ComponentType, FC } from 'react';
+import {
+  ArticleItemType,
+  ArticleItemSizingType as SizingType,
+  TArticleItemAny,
+  TLayout
+} from '@cntrl-site/core';
+import { getLayoutStyles } from '@cntrl-site/sdk';
+import { RectangleItem } from './items/RectangleItem';
+import { ImageItem } from './items/ImageItem';
+import { VideoItem } from './items/VideoItem';
+import { RichTextItem } from './items/RichTextItem';
+
+export interface ItemProps<I extends TArticleItemAny> {
+  layouts: TLayout[];
+  item: I;
+}
+
+const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
+  [ArticleItemType.Rectangle]: RectangleItem,
+  [ArticleItemType.Image]: ImageItem,
+  [ArticleItemType.Video]: VideoItem,
+  [ArticleItemType.RichText]: RichTextItem
+};
+
+const noop = () => null;
+
+export const Item: FC<ItemProps<TArticleItemAny>> = ({ item, layouts }) => {
+  const layoutValues: Record<string, any>[] = [item.area];
+  if (item.layoutParams) {
+    layoutValues.push(item.layoutParams);
+  }
+
+  const sizingAxis = parseSizing(item.commonParams.sizing);
+  const ItemComponent = itemsMap[item.type] || noop;
+
+  return (
+    <div className={`item-${item.id}`}>
+      <ItemComponent item={item} layouts={layouts} />
+      <style jsx>{`
+        ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => (`
+           .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'};
+              height: ${sizingAxis.y === SizingType.Manual ? `${area.height * 100}vw` : 'auto'};
+              z-index: ${area.zIndex};
+              transform: rotate(${area.angle}deg);
+            }
+        `))}
+      `}</style>
+    </div>
+  );
+};
+
+const 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;
+  y: SizingType;
+}

package/src/components/LinkWrapper.tsx

@@ -0,0 +1,9 @@
+import React, { ReactElement } from 'react';
+
+interface Props {
+  url?: string;
+  children: ReactElement;
+}
+
+export const LinkWrapper: React.FC<Props> = ({ url, children }) => (
+    url ? <a href={url} target="_blank" rel="noreferrer">{children}</a> : <>{children}</>);

package/src/components/Section.tsx

@@ -0,0 +1,28 @@
+import { FC, ReactElement } from 'react';
+import { TLayout, TArticleSection } from '@cntrl-site/core';
+import { getLayoutStyles } from '@cntrl-site/sdk';
+
+type SectionChild = ReactElement<any, any>;
+
+interface Props {
+  section: TArticleSection;
+  layouts: TLayout[];
+  children: SectionChild[];
+}
+
+export const Section: FC<Props> = ({ section, layouts, children }) => (
+  <>
+    <div className={`section-${section.id}`}>
+      {children}
+    </div>
+    <style jsx>{`
+      ${
+      getLayoutStyles(layouts, [section.height], ([height]) => (`
+         .section-${section.id} {
+            height: ${height * 100}vw;
+          }`
+      ))
+    }
+    `}</style>
+  </>
+);

package/src/components/items/ImageItem.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react';
+import { TImageItem } from '@cntrl-site/core';
+import { getLayoutStyles } from '@cntrl-site/sdk';
+import { ItemProps } from '../Item';
+import { LinkWrapper } from '../LinkWrapper';
+
+export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, layouts }) => (
+  <LinkWrapper url={item.link?.url}>
+    <>
+      <div className={`image-wrapper-${item.id}`}>
+        <img className="image" src={item.commonParams.url} />
+      </div>
+      <style jsx>{`
+        ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
+           .image-wrapper-${item.id} {
+              position: absolute;
+              width: 100%;
+              height: 100%;
+              border-style: solid;
+              box-sizing: border-box;
+              border-color: ${strokeColor};
+              border-radius: ${radius * 100}vw;
+              opacity: ${opacity};
+              border-width: ${strokeWidth * 100}vw;
+            }`
+          ))
+        }
+        .image {
+          width: 100%;
+          height: 100%;
+          opacity: 1;
+          object-fit: cover;
+          pointer-events: none;
+        }
+      `}</style>
+    </>
+  </LinkWrapper>
+);

package/src/components/items/RectangleItem.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react';
+import { TRectangleItem } from '@cntrl-site/core';
+import { ItemProps } from '../Item';
+import { LinkWrapper } from '../LinkWrapper';
+import { getLayoutStyles } from '@cntrl-site/sdk';
+
+export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, layouts }) => (
+  <LinkWrapper url={item.link?.url}>
+    <>
+      <div className={`rectangle-${item.id}`} />
+      <style jsx>{`
+      ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, fillColor, radius, strokeWidth }]) => (`
+         .rectangle-${item.id} {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            border-style: solid;
+            box-sizing: border-box;
+            border-color: ${strokeColor};
+            background-color: ${fillColor};
+            border-radius: ${radius * 100}vw;
+            border-width: ${strokeWidth * 100}vw;
+          }`
+        ))}
+      `}</style>
+    </>
+  </LinkWrapper>
+);

package/src/components/items/RichTextItem.tsx

@@ -0,0 +1,20 @@
+import { FC } from 'react';
+import { TRichTextItem } from '@cntrl-site/core';
+//@ts-ignore
+import JSXStyle from 'styled-jsx/style';
+import { ItemProps } from '../Item';
+import { RichTextConverter } from '../../utils/RichTextConverter';
+
+const richTextConv = new RichTextConverter();
+
+export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, layouts }) => {
+  const [content, styles] = richTextConv.toHtml(item, layouts);
+  return (
+    <>
+      <div className="rich-text">{content}</div>
+      <JSXStyle id={item.id}>
+        {styles}
+      </JSXStyle>
+    </>
+  );
+};

package/src/components/items/VideoItem.tsx

@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { TVideoItem } from '@cntrl-site/core';
+import { ItemProps } from '../Item';
+import { LinkWrapper } from '../LinkWrapper';
+import { getLayoutStyles } from '@cntrl-site/sdk';
+
+export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, layouts }) => (
+  <LinkWrapper url={item.link?.url}>
+    <>
+      <div className={`video-wrapper-${item.id}`}>
+        <video autoPlay muted loop playsInline className="video">
+          <source src={item.commonParams.url} />
+        </video>
+      </div>
+      <style jsx>{`
+        ${getLayoutStyles(layouts, [item.layoutParams], ([{ strokeColor, radius, strokeWidth, opacity }]) => (`
+           .video-wrapper-${item.id} {
+              position: absolute;
+              width: 100%;
+              height: 100%;
+              border-style: solid;
+              box-sizing: border-box;
+              border-color: ${strokeColor};
+              border-radius: ${radius * 100}vw;
+              border-width: ${strokeWidth * 100}vw;
+              opacity: ${opacity};
+            }`
+          ))
+        }
+        .video {
+          width: 100%;
+          height: 100%;
+          opacity: 1;
+          object-fit: cover;
+          pointer-events: none;
+        }
+      `}</style>
+    </>
+  </LinkWrapper>
+);

package/src/index.ts

@@ -0,0 +1,9 @@
+export { RichTextConverter } from './utils/RichTextConverter';
+
+export { Article } from './components/Article';
+export { Section } from './components/Section';
+export { Item } from './components/Item';
+export { ImageItem } from './components/items/ImageItem';
+export { RectangleItem } from './components/items/RectangleItem';
+export { RichTextItem } from './components/items/RichTextItem';
+export { VideoItem } from './components/items/VideoItem';

package/src/styled-jsx.d.ts

@@ -0,0 +1 @@
+/// <reference types="styled-jsx" />

package/src/utils/RichTextConverter.tsx

@@ -0,0 +1,228 @@
+import { ReactElement, ReactNode } from 'react';
+import {
+  TLayout,
+  RichText,
+  TRichTextItem,
+  TextTransform,
+  VerticalAlign,
+  getClosestLayoutValue,
+  getLayoutMediaQuery
+} from '@cntrl-site/core';
+
+interface StyleGroup {
+  start: number;
+  end: number;
+  styles: DraftStyle[];
+}
+
+interface EntitiesGroup {
+  link?: string;
+  stylesGroup: StyleGroup[];
+  start: number;
+  end: number;
+}
+
+interface DraftStyle {
+  name: string;
+  value?: string;
+}
+
+export const FontStyles: Record<string, Record<string, string>> = {
+  'normal': {},
+  'bold': { 'font-weight': 'bold' },
+  'italic': { 'font-style': 'italic' }
+};
+
+export class RichTextConverter {
+  toHtml(
+    richText: TRichTextItem,
+    layouts: TLayout[]
+  ): [ReactNode[], string] {
+    const { text, blocks = [] } = richText.commonParams;
+    const root: ReactElement[] = [];
+    const styleRules = layouts.reduce<Record<string, string[]>>((rec, layout) => {
+      rec[layout.id] = [];
+      return rec;
+    }, {});
+
+    for (let blockIndex = 0; blockIndex < blocks.length; blockIndex++) {
+      const block = blocks[blockIndex];
+      const content = text.slice(block.start, block.end);
+      const entities = block.entities!.sort((a, b) => a.start - b.start) ?? [];
+      if (content.length === 0) {
+        root.push(<div style={{ lineHeight: 0 }}><br /></div>);
+        continue;
+      }
+      const newStylesGroup = layouts.map(({ id: layoutId }) => {
+        const params = getClosestLayoutValue(richText.layoutParams, layouts, 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 }));
+        return ({
+          layout: layoutId,
+          styles: this.normalizeStyles(styles, entities)
+        });
+      });
+      const sameLayouts = groupBy(newStylesGroup, (item) => RichTextConverter.serializeRanges(item.styles ?? []));
+      for (const group of Object.values(sameLayouts)) {
+        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 => {
+          styleRules[l.id].push(`
+            .${blockClass} {
+              display: ${group.some(g => g.layout === l.id) ? 'block' : 'none'};
+              text-align: ${getClosestLayoutValue(richText.layoutParams, layouts, l.id).textAlign};
+              line-height: 0;
+            }
+          `);
+        });
+        const item = group[0];
+        const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];
+        let offset = 0;
+        for (const entity of entitiesGroups) {
+          const entityKids: ReactNode[] = [];
+          if (offset < entity.start) {
+            kids.push(content.slice(offset, entity.start));
+            offset = entity.start;
+          }
+          for (const style of entity.stylesGroup) {
+            if (offset < style.start) {
+              entityKids.push(content.slice(offset, style.start));
+            }
+            entityKids.push(<span key={style.start} className={`s-${style.start}-${style.end}`}>{content.slice(style.start, style.end)}</span>);
+            offset = style.end;
+          }
+          if (offset < entity.end) {
+            entityKids.push(content.slice(offset, entity.end));
+            offset = entity.end;
+          }
+          if (entity.link) {
+            kids.push(<a key={entity.start} target="_blank" href={entity.link} rel="noreferrer">{entityKids}</a>);
+            continue;
+          }
+          kids.push(...entityKids);
+        }
+        if (offset < content.length) {
+          kids.push(content.slice(offset));
+        }
+        for (const item of group) {
+          const entitiesGroups = this.groupEntities(entities, item.styles) ?? [];
+          for (const entitiesGroup of entitiesGroups) {
+            if (!entitiesGroup.stylesGroup) continue;
+            for (const styleGroup of entitiesGroup.stylesGroup) {
+              styleRules[item.layout].push(`
+                .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
+                  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
+                }
+              `);
+            }
+          }
+        }
+        root.push(<div key={blockClass} className={blockClass}>{kids}</div>);
+      }
+    }
+    const styles = layouts.map(l => `
+      ${getLayoutMediaQuery(l.id, layouts)} {
+        ${styleRules[l.id].join('\n')}
+      }
+    `).join('\n');
+    return [
+      root,
+      styles
+    ];
+  }
+
+  private static serializeRanges(ranges: { start: number; end: number; }[]): string {
+    return ranges.map(r => `${r.start},${r.end}`).join(' ');
+  }
+
+  private normalizeStyles(styles: RichText.Style[], entities: RichText.Entity[]): StyleGroup[] | undefined {
+    const styleGroups: StyleGroup[] = [];
+    const dividers = [...styles, ...entities].reduce((ds, s) => {
+      ds.add(s.start);
+      ds.add(s.end);
+      return ds;
+    }, new Set<number>());
+    if (dividers.size === 0) return;
+    const edges = Array.from(dividers).sort((a, b) => a - b);
+    for (let i = 0; i < edges.length - 1; i += 1) {
+      const start = edges[i];
+      const end = edges[i + 1];
+      const applied = styles.filter(s => Math.max(s.start, start) < Math.min(s.end, end));
+      if (applied.length === 0) continue;
+      styleGroups.push({
+        start,
+        end,
+        styles: applied.map(s => ({ name: s.style, value: s.value }))
+      })
+    }
+
+    return styleGroups;
+  }
+
+  private groupEntities(entities: RichText.Entity[], styleGroups?: StyleGroup[]): EntitiesGroup[] | undefined {
+    const entitiesGroups: EntitiesGroup[] = [];
+    if (!styleGroups) return;
+    if (entities.length === 0) {
+      entitiesGroups.push({
+        stylesGroup: styleGroups,
+        start: styleGroups[0].start,
+        end: styleGroups[styleGroups.length - 1].end
+      });
+      return entitiesGroups;
+    }
+    const start = entities[0].start < styleGroups[0].start ? entities[0].start : styleGroups[0].start;
+    const end = entities[entities.length - 1].end > styleGroups[styleGroups.length - 1].end ? entities[entities.length - 1].end : styleGroups[styleGroups.length - 1].end;
+    const entitiesDividers = entities.reduce((ds, s) => {
+      ds.add(s.start);
+      ds.add(s.end);
+      return ds;
+    }, new Set<number>([start, end]));
+    const entityDividers = Array.from(entitiesDividers).sort((a, b) => a - b);
+
+    for (let i = 0; i < entityDividers.length - 1; i += 1) {
+      const start = entityDividers[i];
+      const end = entityDividers[i + 1];
+      const entity = entities.find(e => e.start === start);
+      entitiesGroups.push({
+        stylesGroup: styleGroups.filter(s => s.start >= start && s.end <= end),
+        start,
+        end,
+        ...(entity && { link: entity.data.url })
+      });
+    }
+
+    return entitiesGroups;
+  }
+
+  private static fromDraftToInline(draftStyle: DraftStyle): string {
+    const { value, name } = draftStyle;
+    const map: Record<string, Record<string, string | undefined>> = {
+      'COLOR': { 'color': value },
+      'TYPEFACE': { 'font-family': `"${value}"` },
+      'FONTSTYLE': value ? { ...FontStyles[value] } : {},
+      'FONTWEIGHT': { 'font-weight': value },
+      'FONTSIZE': { 'font-size': `${parseFloat(value!) * 100}vw` },
+      'LINEHEIGHT': { 'line-height': `${parseFloat(value!) * 100}vw` },
+      'LETTERSPACING': { 'letter-spacing': `${parseFloat(value!) * 100}vw` },
+      'WORDSPACING': { 'word-spacing': `${parseFloat(value!) * 100}vw` },
+      'TEXTTRANSFORM': value ? { 'text-transform': value as TextTransform } : { 'text-transform': TextTransform.None },
+      'VERTICALALIGN': value ? { 'vertical-align': value as VerticalAlign } : { 'vertical-align': VerticalAlign.Unset },
+      'TEXTDECORATION': { 'text-decoration': value }
+    };
+    const css = map[name];
+    return Object.entries(css).filter(([, value]) => !!value).map(([prop, value]) => `${prop}: ${value};`).join('\n');
+  }
+}
+
+function groupBy<I>(items: I[], getKey: (item: I) => PropertyKey): Record<PropertyKey, I[]> {
+  const groups: Record<PropertyKey, I[]> = {};
+  for (const item of items) {
+    const key = getKey(item);
+    if (!groups[key]) {
+      groups[key] = [];
+    }
+    groups[key]!.push(item);
+  }
+  return groups;
+}