@cntrl-site/sdk-nextjs 0.2.1 → 0.2.3

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/lib/components/Item.js

@@ -8,12 +8,15 @@ 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 CustomItem_1 = require("./items/CustomItem");
 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.VimeoEmbed]: VimeoEmbed_1.VimeoEmbed
+    [sdk_1.ArticleItemType.YoutubeEmbed]: () => null,
+    [sdk_1.ArticleItemType.VimeoEmbed]: VimeoEmbed_1.VimeoEmbedItem,
+    [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem
 };
 const noop = () => null;
 const Item = ({ item, layouts }) => {

package/lib/components/items/CustomItem.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomItem = void 0;
+const useCntrlContext_1 = require("../../provider/useCntrlContext");
+const CustomItem = ({ item }) => {
+    const sdk = (0, useCntrlContext_1.useCntrlContext)();
+    const component = sdk.customItems.get(item.commonParams.name);
+    if (!component)
+        return null;
+    return component({});
+};
+exports.CustomItem = CustomItem;

package/lib/components/items/VimeoEmbed.js

@@ -1,8 +1,42 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VimeoEmbed = void 0;
+exports.VimeoEmbedItem = 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;
+const LinkWrapper_1 = require("../LinkWrapper");
+const sdk_1 = require("@cntrl-site/sdk");
+const VimeoEmbedItem = ({ item, layouts }) => {
+    const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
+    const getValidVimeoUrl = (url) => {
+        const validURL = new URL(url);
+        validURL.searchParams.append('autoplay', String(autoplay));
+        validURL.searchParams.append('controls', String(controls));
+        validURL.searchParams.append('muted', String(muted));
+        validURL.searchParams.append('loop', String(loop));
+        validURL.searchParams.append('pip', String(pictureInPicture));
+        validURL.searchParams.append('title', '0');
+        validURL.searchParams.append('byline', '0');
+        validURL.searchParams.append('portrait', '0');
+        return validURL.href;
+    };
+    const validUrl = getValidVimeoUrl(url);
+    return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `embed-video-wrapper-${item.id}`, children: (0, jsx_runtime_1.jsx)("iframe", { className: "embedVideo", src: validUrl || '', allow: "autoplay; fullscreen; picture-in-picture;", allowFullScreen: true }) }), (0, jsx_runtime_1.jsx)("style", { jsx: true, children: `
+        ${(0, sdk_1.getLayoutStyles)(layouts, [item.layoutParams], ([{ radius }]) => (`
+           .embed-video-wrapper-${item.id} {
+              position: absolute;
+              overflow: hidden;
+              width: 100%;
+              height: 100%;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              border-radius: ${radius * 100}vw;
+            }`))}
+        .embedVideo {
+          width: 100%;
+          height: 100%;
+          z-index: 1;
+          border: none;
+        }
+      ` })] }));
+};
+exports.VimeoEmbedItem = VimeoEmbedItem;

package/lib/index.js

@@ -14,8 +14,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Page = exports.RichTextConverter = void 0;
+exports.CustomItems = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Page = exports.RichTextConverter = exports.CntrlProvider = void 0;
+const defaultContext_1 = require("./provider/defaultContext");
 __exportStar(require("@cntrl-site/sdk"), exports);
+var CntrlProvider_1 = require("./provider/CntrlProvider");
+Object.defineProperty(exports, "CntrlProvider", { enumerable: true, get: function () { return CntrlProvider_1.CntrlProvider; } });
 var RichTextConverter_1 = require("./utils/RichTextConverter");
 Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });
 var Page_1 = require("./components/Page");
@@ -36,3 +39,4 @@ var VideoItem_1 = require("./components/items/VideoItem");
 Object.defineProperty(exports, "VideoItem", { enumerable: true, get: function () { return VideoItem_1.VideoItem; } });
 var LayoutStyle_1 = require("./components/LayoutStyle");
 Object.defineProperty(exports, "LayoutStyle", { enumerable: true, get: function () { return LayoutStyle_1.LayoutStyle; } });
+exports.CustomItems = defaultContext_1.cntrlSdkContext.customItems;

package/lib/provider/CntrlContext.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CntrlContext = void 0;
+const react_1 = require("react");
+const defaultContext_1 = require("./defaultContext");
+exports.CntrlContext = (0, react_1.createContext)(defaultContext_1.cntrlSdkContext);

package/lib/provider/CntrlProvider.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CntrlProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const CntrlContext_1 = require("./CntrlContext");
+const defaultContext_1 = require("./defaultContext");
+const CntrlProvider = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(CntrlContext_1.CntrlContext.Provider, { value: defaultContext_1.cntrlSdkContext, children: children }));
+};
+exports.CntrlProvider = CntrlProvider;

package/lib/provider/CntrlSdkContext.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CntrlSdkContext = void 0;
+class CntrlSdkContext {
+    constructor(customItems) {
+        this.customItems = customItems;
+    }
+}
+exports.CntrlSdkContext = CntrlSdkContext;

package/lib/provider/CustomItemRegistry.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomItemRegistry = void 0;
+class CustomItemRegistry {
+    constructor() {
+        this.definitions = new Map();
+    }
+    define(type, component) {
+        this.definitions.set(type, component);
+        return this;
+    }
+    get(type) {
+        return this.definitions.get(type);
+    }
+}
+exports.CustomItemRegistry = CustomItemRegistry;

package/lib/provider/CustomItemTypes.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/provider/defaultContext.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.cntrlSdkContext = void 0;
+const CntrlSdkContext_1 = require("./CntrlSdkContext");
+const CustomItemRegistry_1 = require("./CustomItemRegistry");
+const customItems = new CustomItemRegistry_1.CustomItemRegistry();
+exports.cntrlSdkContext = new CntrlSdkContext_1.CntrlSdkContext(customItems);

package/lib/provider/useCntrlContext.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCntrlContext = void 0;
+const react_1 = require("react");
+const CntrlContext_1 = require("./CntrlContext");
+function useCntrlContext() {
+    const context = (0, react_1.useContext)(CntrlContext_1.CntrlContext);
+    return context;
+}
+exports.useCntrlContext = useCntrlContext;

package/package.json

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

package/src/components/Item.tsx

@@ -10,7 +10,8 @@ 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';
+import { VimeoEmbedItem } from './items/VimeoEmbed';
+import { CustomItem } from './items/CustomItem';
 
 export interface ItemProps<I extends TArticleItemAny> {
   layouts: TLayout[];
@@ -22,7 +23,9 @@ const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
   [ArticleItemType.Image]: ImageItem,
   [ArticleItemType.Video]: VideoItem,
   [ArticleItemType.RichText]: RichTextItem,
-  [ArticleItemType.VimeoEmbed]: VimeoEmbed
+  [ArticleItemType.YoutubeEmbed]: () => null,
+  [ArticleItemType.VimeoEmbed]: VimeoEmbedItem,
+  [ArticleItemType.Custom]: CustomItem
 };
 
 const noop = () => null;

package/src/components/items/CustomItem.tsx

@@ -0,0 +1,11 @@
+import { TCustomItem } from '@cntrl-site/sdk';
+import { FC } from 'react';
+import { useCntrlContext } from '../../provider/useCntrlContext';
+import { ItemProps } from '../Item';
+
+export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item }) => {
+  const sdk = useCntrlContext();
+  const component = sdk.customItems.get(item.commonParams.name);
+  if (!component) return null;
+  return component({});
+};

package/src/components/items/VimeoEmbed.tsx

@@ -1,9 +1,58 @@
 import { FC } from 'react';
 import { ItemProps } from '../Item';
-import { VimeoEmbedItem } from '@cntrl-site/core/src/article/ArticleItems';
+import { TVimeoEmbedItem } from '@cntrl-site/core';
+import { LinkWrapper } from '../LinkWrapper';
+import { getLayoutStyles } from '@cntrl-site/sdk';
 
-export const VimeoEmbed:FC<ItemProps<VimeoEmbedItem>> = () => (
-  // TODO
-  <>
-  </>
-)
+
+export const VimeoEmbedItem: FC<ItemProps<TVimeoEmbedItem>> = ({ item, layouts }) => {
+ const { autoplay, controls, loop, muted, pictureInPicture, url } = item.commonParams;
+  const getValidVimeoUrl = (url: string): string => {
+    const validURL = new URL(url);
+    validURL.searchParams.append('autoplay', String(autoplay));
+    validURL.searchParams.append('controls', String(controls));
+    validURL.searchParams.append('muted', String(muted));
+    validURL.searchParams.append('loop', String(loop));
+    validURL.searchParams.append('pip', String(pictureInPicture));
+    validURL.searchParams.append('title', '0');
+    validURL.searchParams.append('byline', '0');
+    validURL.searchParams.append('portrait', '0');
+
+    return validURL.href;
+  }
+  const validUrl = getValidVimeoUrl(url);
+
+  return (
+    <LinkWrapper url={item.link?.url}>
+        <div className={`embed-video-wrapper-${item.id}`}>
+          <iframe
+            className="embedVideo"
+            src={validUrl || ''}
+            allow="autoplay; fullscreen; picture-in-picture;"
+            allowFullScreen
+          />
+        </div>
+        <style jsx>{`
+        ${getLayoutStyles(layouts, [item.layoutParams], ([{ radius }]) => (`
+           .embed-video-wrapper-${item.id} {
+              position: absolute;
+              overflow: hidden;
+              width: 100%;
+              height: 100%;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              border-radius: ${radius * 100}vw;
+            }`
+        ))
+        }
+        .embedVideo {
+          width: 100%;
+          height: 100%;
+          z-index: 1;
+          border: none;
+        }
+      `}</style>
+    </LinkWrapper>
+  )
+};

package/src/index.ts

@@ -1,4 +1,7 @@
+import { cntrlSdkContext } from './provider/defaultContext';
+
 export * from '@cntrl-site/sdk';
+export { CntrlProvider } from './provider/CntrlProvider';
 
 export { RichTextConverter } from './utils/RichTextConverter';
 export { Page } from './components/Page';
@@ -10,3 +13,7 @@ export { RectangleItem } from './components/items/RectangleItem';
 export { RichTextItem } from './components/items/RichTextItem';
 export { VideoItem } from './components/items/VideoItem';
 export { LayoutStyle } from './components/LayoutStyle';
+
+// custom items
+export { CustomItemComponent } from './provider/CustomItemTypes';
+export const CustomItems = cntrlSdkContext.customItems;

package/src/provider/CntrlContext.ts

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+import { CntrlSdkContext } from './CntrlSdkContext';
+import { cntrlSdkContext } from './defaultContext';
+
+export const CntrlContext = createContext<CntrlSdkContext>(cntrlSdkContext);

package/src/provider/CntrlProvider.tsx

@@ -0,0 +1,11 @@
+import { FC, PropsWithChildren } from 'react';
+import { CntrlContext } from './CntrlContext';
+import { cntrlSdkContext } from './defaultContext';
+
+export const CntrlProvider: FC<PropsWithChildren<{}>> = ({ children }) => {
+  return (
+    <CntrlContext.Provider value={cntrlSdkContext}>
+      {children}
+    </CntrlContext.Provider>
+  );
+};

package/src/provider/CntrlSdkContext.ts

@@ -0,0 +1,7 @@
+import { CustomItemRegistry } from './CustomItemRegistry';
+
+export class CntrlSdkContext {
+  constructor(
+    public readonly customItems: CustomItemRegistry
+  ) { }
+}

package/src/provider/CustomItemRegistry.ts

@@ -0,0 +1,14 @@
+import { CustomItemComponent } from './CustomItemTypes';
+
+export class CustomItemRegistry {
+  private definitions: Map<string, CustomItemComponent<string>> = new Map();
+
+  define<T extends string>(type: T, component: CustomItemComponent<T>): this {
+    this.definitions.set(type, component);
+    return this;
+  }
+
+  get(type: string): CustomItemComponent<string> | undefined {
+    return this.definitions.get(type);
+  }
+}

package/src/provider/CustomItemTypes.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+
+export type CustomItemComponent<T extends string> = FC<{}>;

package/src/provider/defaultContext.ts

@@ -0,0 +1,6 @@
+import { CntrlSdkContext } from './CntrlSdkContext';
+import { CustomItemRegistry } from './CustomItemRegistry';
+
+const customItems = new CustomItemRegistry();
+
+export const cntrlSdkContext = new CntrlSdkContext(customItems);

package/src/provider/useCntrlContext.ts

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { CntrlContext } from './CntrlContext';
+import { CntrlSdkContext } from './CntrlSdkContext';
+
+export function useCntrlContext(): CntrlSdkContext {
+  const context = useContext(CntrlContext);
+  return context;
+}

package/.idea/codeStyles/codeStyleConfig.xml

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