@cntrl-site/sdk-nextjs 0.10.1 → 0.11.0

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/provider/CntrlSdkContext.js

@@ -2,8 +2,9 @@
 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 = [];
     }
     setTypePresets(typePresets) {

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.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
-  "types": "src/index.js",
+  "types": "src/index.ts",
   "scripts": {
     "test": "jest",
     "prebuild": "rm -rf ./lib",

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/provider/CntrlSdkContext.ts

@@ -1,11 +1,13 @@
 import { CustomItemRegistry } from './CustomItemRegistry';
 import { 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
   ) {}
 
   setTypePresets(typePresets: TTypePresets) {

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);