@cntrl-site/sdk-nextjs 0.10.1 → 0.11.1

package/lib/components/Article.js

@@ -11,11 +11,14 @@ const Section_1 = require("./Section");
 const Item_1 = require("./Item");
 const useArticleRectObserver_1 = require("../utils/ArticleRectManager/useArticleRectObserver");
 const ArticleRectContext_1 = require("../provider/ArticleRectContext");
-const Article = ({ article }) => {
+const Article = ({ article, sectionData }) => {
     const articleRef = (0, react_1.useRef)(null);
     const articleRectObserver = (0, useArticleRectObserver_1.useArticleRectObserver)(articleRef.current);
     const id = (0, react_1.useId)();
-    return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: [(0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item }, item.id))) }, section.id))) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
+    return ((0, jsx_runtime_1.jsxs)(ArticleRectContext_1.ArticleRectContext.Provider, { value: articleRectObserver, children: [(0, jsx_runtime_1.jsx)("div", { className: "article", ref: articleRef, children: article.sections.map((section, i) => {
+                    const data = section.name ? sectionData[section.name] : {};
+                    return ((0, jsx_runtime_1.jsx)(Section_1.Section, { section: section, data: data, children: article.sections[i].items.map(item => ((0, jsx_runtime_1.jsx)(Item_1.Item, { item: item }, item.id))) }, section.id));
+                }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
        .article {
             position: relative;
             overflow: clip;

package/lib/components/Page.js

@@ -13,11 +13,11 @@ const Head_1 = require("./Head");
 const useCntrlContext_1 = require("../provider/useCntrlContext");
 const generateTypePresetStyles_1 = require("../utils/generateTypePresetStyles/generateTypePresetStyles");
 const Keyframes_1 = require("../provider/Keyframes");
-const Page = ({ article, project, meta, keyframes }) => {
+const Page = ({ article, project, meta, keyframes, sectionData }) => {
     const afterBodyOpen = (0, html_react_parser_1.default)(project.html.afterBodyOpen);
     const beforeBodyClose = (0, html_react_parser_1.default)(project.html.beforeBodyClose);
     const keyframesRepo = (0, react_1.useMemo)(() => new Keyframes_1.Keyframes(keyframes), [keyframes]);
     const { typePresets, layouts } = (0, useCntrlContext_1.useCntrlContext)();
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article }) }), beforeBodyClose, typePresets && typePresets.presets.length > 0 && ((0, jsx_runtime_1.jsx)("style", { children: (0, generateTypePresetStyles_1.generateTypePresetStyles)(typePresets, layouts) }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Head_1.CNTRLHead, { project: project, meta: meta }), afterBodyOpen, (0, jsx_runtime_1.jsx)(KeyframesContext_1.KeyframesContext.Provider, { value: keyframesRepo, children: (0, jsx_runtime_1.jsx)(Article_1.Article, { article: article, sectionData: sectionData }) }), beforeBodyClose, typePresets && typePresets.presets.length > 0 && ((0, jsx_runtime_1.jsx)("style", { children: (0, generateTypePresetStyles_1.generateTypePresetStyles)(typePresets, layouts) }))] }));
 };
 exports.Page = Page;

package/lib/components/Section.js

@@ -10,10 +10,11 @@ const style_1 = __importDefault(require("styled-jsx/style"));
 const sdk_1 = require("@cntrl-site/sdk");
 const useCntrlContext_1 = require("../provider/useCntrlContext");
 const useSectionColor_1 = require("./useSectionColor");
-const Section = ({ section, children }) => {
+const Section = ({ section, data, children }) => {
     const id = (0, react_1.useId)();
-    const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
+    const { layouts, customSections } = (0, useCntrlContext_1.useCntrlContext)();
     const backgroundColor = (0, useSectionColor_1.useSectionColor)(section.color);
+    const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
     const getSectionVisibilityStyles = () => {
         return layouts
             .sort((a, b) => a.startsWith - b.startsWith)
@@ -28,6 +29,8 @@ const Section = ({ section, children }) => {
           }`;
         }, '');
     };
+    if (SectionComponent)
+        return (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, style: {
                     backgroundColor: backgroundColor
                 }, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
@@ -35,7 +38,7 @@ const Section = ({ section, children }) => {
          .section-${section.id} {
             height: ${getSectionHeight(height)};
             position: relative;
-          }`))}
+         }`))}
       ${getSectionVisibilityStyles()}
     ` })] }));
 };

package/lib/index.js

@@ -14,9 +14,7 @@ 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.useCntrlContext = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = exports.cntrlSdkContext = void 0;
-var defaultContext_1 = require("./provider/defaultContext");
-Object.defineProperty(exports, "cntrlSdkContext", { enumerable: true, get: function () { return defaultContext_1.cntrlSdkContext; } });
+exports.cntrlSdkContext = exports.customSections = exports.customItems = exports.useCntrlContext = exports.CntrlProvider = exports.YoutubeEmbedItem = exports.VimeoEmbedItem = exports.LayoutStyle = exports.VideoItem = exports.RichTextItem = exports.RectangleItem = exports.ImageItem = exports.Item = exports.Section = exports.Article = exports.Head = exports.Page = exports.RichTextConverter = void 0;
 __exportStar(require("@cntrl-site/sdk"), exports);
 var RichTextConverter_1 = require("./utils/RichTextConverter/RichTextConverter");
 Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });
@@ -44,8 +42,11 @@ var VimeoEmbed_1 = require("./components/items/VimeoEmbed");
 Object.defineProperty(exports, "VimeoEmbedItem", { enumerable: true, get: function () { return VimeoEmbed_1.VimeoEmbedItem; } });
 var YoutubeEmbed_1 = require("./components/items/YoutubeEmbed");
 Object.defineProperty(exports, "YoutubeEmbedItem", { enumerable: true, get: function () { return YoutubeEmbed_1.YoutubeEmbedItem; } });
-// custom items
+const defaultContext_1 = require("./provider/defaultContext");
 var CntrlProvider_1 = require("./provider/CntrlProvider");
 Object.defineProperty(exports, "CntrlProvider", { enumerable: true, get: function () { return CntrlProvider_1.CntrlProvider; } });
 var useCntrlContext_1 = require("./provider/useCntrlContext");
 Object.defineProperty(exports, "useCntrlContext", { enumerable: true, get: function () { return useCntrlContext_1.useCntrlContext; } });
+exports.customItems = defaultContext_1.cntrlSdkContext.customItems;
+exports.customSections = defaultContext_1.cntrlSdkContext.customSections;
+exports.cntrlSdkContext = defaultContext_1.cntrlSdkContext;

package/lib/provider/CntrlSdkContext.js

@@ -2,10 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CntrlSdkContext = void 0;
 class CntrlSdkContext {
-    constructor(customItems) {
+    constructor(customItems, customSections) {
         this.customItems = customItems;
+        this.customSections = customSections;
         this._layouts = [];
     }
+    async resolveSectionData(sections) {
+        const resolvers = sections.map(section => {
+            const resolver = section.name ? this.customSections.getResolver(section.name) : undefined;
+            if (!resolver)
+                return;
+            return {
+                name: section.name,
+                resolver
+            };
+        }).filter(isDefined);
+        return Object.fromEntries(await Promise.all(resolvers.map(async ({ name, resolver }) => [name, await resolver()])));
+    }
     setTypePresets(typePresets) {
         this._typePresets = typePresets;
     }
@@ -20,3 +33,6 @@ class CntrlSdkContext {
     }
 }
 exports.CntrlSdkContext = CntrlSdkContext;
+function isDefined(value) {
+    return value !== undefined;
+}

package/lib/provider/CustomSectionRegistry.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomSectionRegistry = void 0;
+class CustomSectionRegistry {
+    constructor() {
+        this.definitions = new Map();
+    }
+    define(name, section) {
+        this.definitions.set(name, section);
+        return this;
+    }
+    getComponent(name) {
+        return this.definitions.get(name)?.component;
+    }
+    getResolver(name) {
+        return this.definitions.get(name)?.dataResolver;
+    }
+}
+exports.CustomSectionRegistry = CustomSectionRegistry;

package/lib/provider/defaultContext.js

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

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "0.10.1",
+  "version": "0.11.1",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
-  "types": "src/index.js",
+  "types": "src/index.ts",
   "scripts": {
     "test": "jest",
     "prebuild": "rm -rf ./lib",
@@ -21,7 +21,7 @@
   },
   "homepage": "https://github.com/cntrl-site/sdk-nextjs#readme",
   "dependencies": {
-    "@cntrl-site/sdk": "^1.1.0",
+    "@cntrl-site/sdk": "^1.1.1",
     "html-react-parser": "^3.0.1",
     "styled-jsx": "^5.0.2"
   },

package/src/components/Article.tsx

@@ -8,9 +8,10 @@ import { ArticleRectContext } from '../provider/ArticleRectContext';
 
 interface Props {
   article: TArticle;
+  sectionData: Record<SectionName, any>;
 }
 
-export const Article: FC<Props> = ({ article }) => {
+export const Article: FC<Props> = ({ article, sectionData }) => {
   const articleRef = useRef<HTMLDivElement | null>(null);
   const articleRectObserver = useArticleRectObserver(articleRef.current);
   const id = useId();
@@ -18,13 +19,16 @@ export const Article: FC<Props> = ({ article }) => {
   return (
     <ArticleRectContext.Provider value={articleRectObserver}>
       <div className="article" ref={articleRef}>
-        {article.sections.map((section, i) => (
-          <Section section={section} key={section.id}>
-            {article.sections[i].items.map(item => (
-              <Item item={item} key={item.id} />
-            ))}
-          </Section>
-        ))}
+        {article.sections.map((section, i) => {
+          const data = section.name ? sectionData[section.name] : {};
+          return (
+            <Section section={section} key={section.id} data={data}>
+              {article.sections[i].items.map(item => (
+                <Item item={item} key={item.id} />
+              ))}
+            </Section>
+          );
+        })}
       </div>
       <JSXStyle id={id}>{`
        .article {
@@ -35,3 +39,5 @@ export const Article: FC<Props> = ({ article }) => {
     </ArticleRectContext.Provider>
   );
 };
+
+type SectionName = string;

package/src/components/Page.tsx

@@ -13,9 +13,10 @@ export interface PageProps {
   project: TProject;
   meta: TMeta;
   keyframes: TKeyframeAny[];
+  sectionData: Record<SectionName, any>;
 }
 
-export const Page: FC<PageProps> = ({ article, project, meta, keyframes }) => {
+export const Page: FC<PageProps> = ({ article, project, meta, keyframes, sectionData }) => {
   const afterBodyOpen = HTMLReactParser(project.html.afterBodyOpen);
   const beforeBodyClose = HTMLReactParser(project.html.beforeBodyClose);
   const keyframesRepo = useMemo(() => new Keyframes(keyframes), [keyframes]);
@@ -25,7 +26,7 @@ export const Page: FC<PageProps> = ({ article, project, meta, keyframes }) => {
       <CNTRLHead project={project} meta={meta} />
       {afterBodyOpen}
       <KeyframesContext.Provider value={keyframesRepo}>
-        <Article article={article} />
+        <Article article={article} sectionData={sectionData} />
       </KeyframesContext.Provider>
       {beforeBodyClose}
       {typePresets && typePresets.presets.length > 0 && (
@@ -34,3 +35,5 @@ export const Page: FC<PageProps> = ({ article, project, meta, keyframes }) => {
     </>
   );
 };
+
+type SectionName = string;

package/src/components/Section.tsx

@@ -15,12 +15,14 @@ type SectionChild = ReactElement<any, any>;
 interface Props {
   section: TArticleSection;
   children: SectionChild[];
+  data?: any;
 }
 
-export const Section: FC<Props> = ({ section, children }) => {
+export const Section: FC<Props> = ({ section, data, children }) => {
   const id = useId();
-  const { layouts } = useCntrlContext();
+  const { layouts, customSections } = useCntrlContext();
   const backgroundColor = useSectionColor(section.color);
+  const SectionComponent = section.name ? customSections.getComponent(section.name) : undefined;
   const getSectionVisibilityStyles = () => {
     return layouts
       .sort((a, b) => a.startsWith - b.startsWith)
@@ -36,6 +38,8 @@ export const Section: FC<Props> = ({ section, children }) => {
       }, '');
   };
 
+  if (SectionComponent) return <SectionComponent data={data}>{children}</SectionComponent>;
+
  return (
     <>
       <div
@@ -53,7 +57,7 @@ export const Section: FC<Props> = ({ section, children }) => {
          .section-${section.id} {
             height: ${getSectionHeight(height)};
             position: relative;
-          }`
+         }`
         ))
       }
       ${getSectionVisibilityStyles()}

package/src/index.ts

@@ -1,5 +1,3 @@
-export { cntrlSdkContext } from './provider/defaultContext';
-
 export * from '@cntrl-site/sdk';
 
 export { RichTextConverter } from './utils/RichTextConverter/RichTextConverter';
@@ -17,7 +15,10 @@ export { LayoutStyle } from './components/LayoutStyle';
 export { VimeoEmbedItem } from './components/items/VimeoEmbed';
 export { YoutubeEmbedItem } from './components/items/YoutubeEmbed';
 
-// custom items
+import { cntrlSdkContext as sdk } from './provider/defaultContext';
 export { CntrlProvider } from './provider/CntrlProvider';
 export type { CustomItemComponent } from './provider/CustomItemTypes';
 export { useCntrlContext } from './provider/useCntrlContext';
+export const customItems = sdk.customItems;
+export const customSections = sdk.customSections;
+export const cntrlSdkContext = sdk;

package/src/provider/CntrlSdkContext.ts

@@ -1,13 +1,29 @@
 import { CustomItemRegistry } from './CustomItemRegistry';
-import { TLayout, TTypePresets,  } from '@cntrl-site/sdk';
+import { TArticleSection, TLayout, TTypePresets } from '@cntrl-site/sdk';
+import { CustomSectionRegistry } from './CustomSectionRegistry';
 
 export class CntrlSdkContext {
   private _typePresets?: TTypePresets;
   private _layouts: TLayout[] = [];
   constructor(
     public readonly customItems: CustomItemRegistry,
+    public readonly customSections: CustomSectionRegistry
   ) {}
 
+  async resolveSectionData(sections: TArticleSection[]): Promise<Record<string, any>> {
+    const resolvers = sections.map(section => {
+      const resolver = section.name ? this.customSections.getResolver(section.name) : undefined;
+      if (!resolver) return;
+      return {
+        name: section.name,
+        resolver
+      };
+    }).filter(isDefined);
+    return Object.fromEntries(
+      await Promise.all(resolvers.map(async ({ name, resolver }) => [name, await resolver()]))
+    );
+  }
+
   setTypePresets(typePresets: TTypePresets) {
     this._typePresets = typePresets;
   }
@@ -24,3 +40,7 @@ export class CntrlSdkContext {
     return this._typePresets;
   }
 }
+
+function isDefined<T>(value: T): value is Exclude<T, undefined> {
+  return value !== undefined;
+}

package/src/provider/CustomSectionRegistry.ts

@@ -0,0 +1,25 @@
+import React, { PropsWithChildren } from 'react';
+
+export class CustomSectionRegistry {
+  private definitions: Map<string, CustomSection<any>> = new Map();
+
+  define<TData>(name: string, section: CustomSection<TData>): this {
+    this.definitions.set(name, section);
+    return this;
+  }
+
+  getComponent(name: string): CustomSectionComponent<any> | undefined {
+    return this.definitions.get(name)?.component;
+  }
+
+  getResolver(name: string): (() => Promise<any>) | undefined {
+    return this.definitions.get(name)?.dataResolver;
+  }
+}
+
+type CustomSection<TData = {}> = {
+  component: CustomSectionComponent<TData>,
+  dataResolver?: () => Promise<TData>
+};
+
+type CustomSectionComponent<TData> = React.FC<PropsWithChildren<{ data: TData }>>;

package/src/provider/defaultContext.ts

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