@cntrl-site/sdk-nextjs 1.0.20 → 1.1.0

package/lib/interactions/InteractionsRegistry.js

@@ -0,0 +1,220 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InteractionsRegistry = void 0;
+const sdk_1 = require("@cntrl-site/sdk");
+const Item_1 = require("../components/Item");
+class InteractionsRegistry {
+    constructor(article, layoutId) {
+        this.layoutId = layoutId;
+        this.ctrls = new Map();
+        const { interactions } = article;
+        this.items = this.unpackItems(article);
+        const activeStatesIds = interactions.reduce((map, inter) => {
+            var _a;
+            const activeStateId = (_a = inter.states.find((state) => state.id !== inter.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
+            map.push(activeStateId);
+            return map;
+        }, []);
+        const interactionStateMap = interactions.reduce((map, { id, startStateId }) => {
+            map[id] = startStateId;
+            return map;
+        }, {});
+        this.activeStateIdInteractionIdMap = interactions.reduce((map, interaction) => {
+            const activeState = interaction.states.find((state) => state.id !== interaction.startStateId);
+            if (activeState) {
+                map[activeState.id] = interaction.id;
+            }
+            return map;
+        }, {});
+        const itemStages = this.getDefaultItemStages();
+        const stateItemsIdsMap = activeStatesIds.reduce((map, stateId) => {
+            map[stateId] = this.items
+                .filter((item) => {
+                var _a, _b;
+                const layoutStates = (_a = item.state[layoutId]) !== null && _a !== void 0 ? _a : {};
+                const state = (_b = layoutStates === null || layoutStates === void 0 ? void 0 : layoutStates[stateId]) !== null && _b !== void 0 ? _b : {};
+                const hasKeys = Object.keys(state).length !== 0;
+                return hasKeys;
+            })
+                .map((item) => item.id);
+            return map;
+        }, {});
+        this.interactions = interactions;
+        this.itemsStages = itemStages;
+        this.stateItemsIdsMap = stateItemsIdsMap;
+        this.interactionStateMap = interactionStateMap;
+    }
+    register(itemId, ctrl) {
+        this.ctrls.set(itemId, ctrl);
+    }
+    getStatePropsForItem(itemId) {
+        var _a, _b, _c, _d, _e;
+        const { items, layoutId } = this;
+        const item = items.find((item) => item.id === itemId);
+        const itemStages = this.itemsStages.filter((stage) => stage.itemId === itemId);
+        itemStages.sort((a, b) => a.updated - b.updated);
+        const itemStyles = {};
+        for (const stage of itemStages) {
+            if (stage.type === 'active') {
+                if (stage.isStartState)
+                    continue;
+                const params = (_b = (_a = item.state[layoutId]) === null || _a === void 0 ? void 0 : _a[stage.stateId]) !== null && _b !== void 0 ? _b : {};
+                for (const [key, stateDetails] of Object.entries(params)) {
+                    itemStyles[key] = {
+                        value: stateDetails.value
+                    };
+                }
+            }
+            if (stage.type === 'transitioning') {
+                const activeStateId = stage.direction === 'in' ? stage.to : stage.from;
+                const params = (_d = (_c = item.state[layoutId]) === null || _c === void 0 ? void 0 : _c[activeStateId]) !== null && _d !== void 0 ? _d : {};
+                for (const [key, stateDetails] of Object.entries(params)) {
+                    itemStyles[key] = {
+                        value: stage.direction === 'in' ? stateDetails.value : (_e = itemStyles[key]) === null || _e === void 0 ? void 0 : _e.value,
+                        transition: {
+                            timing: stateDetails[stage.direction].timing,
+                            duration: stateDetails[stage.direction].duration,
+                            delay: stateDetails[stage.direction].delay
+                        }
+                    };
+                }
+            }
+        }
+        return itemStyles;
+    }
+    notifyTrigger(itemId, triggerType) {
+        var _a;
+        const timestamp = Date.now();
+        for (const interaction of this.interactions) {
+            const currentStateId = this.getCurrentStateByInteractionId(interaction.id);
+            const matchingTrigger = interaction.triggers.find((trigger) => trigger.itemId === itemId
+                && trigger.from === currentStateId
+                && trigger.type === triggerType);
+            if (!matchingTrigger)
+                continue;
+            const activeStateId = this.getActiveInteractionState(interaction.id);
+            const isNewStateActive = matchingTrigger.to === activeStateId;
+            this.setCurrentStateForInteraction(interaction.id, matchingTrigger.to);
+            const transitioningItems = (_a = this.stateItemsIdsMap[activeStateId]) !== null && _a !== void 0 ? _a : [];
+            this.itemsStages = this.itemsStages.map((stage) => {
+                if (stage.interactionId !== interaction.id)
+                    return stage;
+                return {
+                    itemId: stage.itemId,
+                    interactionId: stage.interactionId,
+                    type: 'transitioning',
+                    from: stage.type === 'transitioning' ? stage.to : stage.stateId,
+                    to: matchingTrigger.to,
+                    direction: isNewStateActive ? 'in' : 'out',
+                    updated: timestamp
+                };
+            });
+            this.notifyItemCtrlsChange(transitioningItems);
+            this.notifyTransitionStartForItems(transitioningItems, activeStateId);
+        }
+    }
+    notifyTransitionStartForItems(itemsIds, activeStateId) {
+        var _a, _b, _c;
+        for (const itemId of itemsIds) {
+            const ctrl = this.ctrls.get(itemId);
+            const item = this.items.find((item) => item.id === itemId);
+            const keys = Object.keys((_b = (_a = item.state[this.layoutId]) === null || _a === void 0 ? void 0 : _a[activeStateId]) !== null && _b !== void 0 ? _b : {});
+            (_c = ctrl === null || ctrl === void 0 ? void 0 : ctrl.handleTransitionStart) === null || _c === void 0 ? void 0 : _c.call(ctrl, keys);
+        }
+    }
+    notifyTransitionEnd(itemId) {
+        var _a;
+        const timestamp = Date.now();
+        this.itemsStages = this.itemsStages.map((stage) => {
+            if (stage.itemId !== itemId || stage.type !== 'transitioning')
+                return stage;
+            return {
+                itemId: itemId,
+                interactionId: stage.interactionId,
+                type: 'active',
+                stateId: stage.to,
+                isStartState: stage.direction === 'out',
+                updated: timestamp
+            };
+        });
+        (_a = this.ctrls.get(itemId)) === null || _a === void 0 ? void 0 : _a.receiveChange();
+    }
+    getCurrentStateByInteractionId(id) {
+        let state;
+        for (const interactionId of Object.keys(this.interactionStateMap)) {
+            if (id !== interactionId)
+                continue;
+            state = this.interactionStateMap[interactionId];
+        }
+        if (!state)
+            throw new Error(`Failed to find current state for interaction w/ id="${id}"`);
+        return state;
+    }
+    setCurrentStateForInteraction(interactionId, stateId) {
+        this.interactionStateMap = Object.assign(Object.assign({}, this.interactionStateMap), { [interactionId]: stateId });
+    }
+    getActiveInteractionState(interactionId) {
+        var _a;
+        const { interactions } = this;
+        const interaction = interactions.find((interaction) => interaction.id === interactionId);
+        return (_a = interaction.states.find(state => state.id !== interaction.startStateId)) === null || _a === void 0 ? void 0 : _a.id;
+    }
+    notifyItemCtrlsChange(itemsIds) {
+        var _a;
+        for (const itemId of itemsIds) {
+            (_a = this.ctrls.get(itemId)) === null || _a === void 0 ? void 0 : _a.receiveChange();
+        }
+    }
+    unpackItems(article) {
+        var _a;
+        const itemsArr = [];
+        for (const section of article.sections) {
+            for (const item of section.items) {
+                const { items } = item, itemWithoutChildren = __rest(item, ["items"]);
+                itemsArr.push(itemWithoutChildren);
+                if (!(0, Item_1.isItemType)(item, sdk_1.ArticleItemType.Group))
+                    continue;
+                const groupChildren = (_a = item === null || item === void 0 ? void 0 : item.items) !== null && _a !== void 0 ? _a : [];
+                for (const child of groupChildren) {
+                    itemsArr.push(child);
+                }
+            }
+        }
+        return itemsArr;
+    }
+    getDefaultItemStages() {
+        const timestamp = Date.now();
+        const { items, layoutId } = this;
+        const stages = [];
+        for (const item of items) {
+            const itemStatesMap = item.state[layoutId];
+            if (!itemStatesMap)
+                continue;
+            for (const stateId of Object.keys(itemStatesMap)) {
+                const interactionId = this.activeStateIdInteractionIdMap[stateId];
+                if (!interactionId)
+                    continue;
+                stages.push({
+                    itemId: item.id,
+                    interactionId,
+                    type: 'active',
+                    isStartState: true,
+                    updated: timestamp
+                });
+            }
+        }
+        return stages;
+    }
+}
+exports.InteractionsRegistry = InteractionsRegistry;

package/lib/interactions/ItemInteractionCtrl.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ItemInteractionController = void 0;
+const getTransition_1 = require("./getTransition");
+const CSSPropertyNameMap_1 = require("./CSSPropertyNameMap");
+class ItemInteractionController {
+    constructor(itemId, registry, onChange) {
+        this.itemId = itemId;
+        this.registry = registry;
+        this.onChange = onChange;
+        this.transitionsInProgress = new Set();
+        this.handleTransitionStart = (types) => {
+            this.transitionsInProgress.clear();
+            for (const type of types) {
+                this.transitionsInProgress.add(type);
+            }
+        };
+        this.handleTransitionEnd = (cssPropKey) => {
+            if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-radius')) {
+                cssPropKey = 'border-radius';
+            }
+            if (cssPropKey.startsWith('border-') && cssPropKey.endsWith('-width')) {
+                cssPropKey = 'border-width';
+            }
+            const styleKeys = (0, CSSPropertyNameMap_1.getStyleKeysFromCSSProperty)(cssPropKey);
+            for (const key of styleKeys) {
+                const found = this.transitionsInProgress.has(key);
+                if (!found)
+                    continue;
+                this.transitionsInProgress.delete(key);
+                break;
+            }
+            if (this.transitionsInProgress.size !== 0)
+                return;
+            this.registry.notifyTransitionEnd(this.itemId);
+        };
+        this.registry.register(itemId, this);
+    }
+    getState(keys) {
+        const stateProps = this.registry.getStatePropsForItem(this.itemId);
+        const styles = keys.reduce((map, styleKey) => {
+            const prop = stateProps[styleKey];
+            if ((prop === null || prop === void 0 ? void 0 : prop.value) === undefined)
+                return map;
+            map[styleKey] = prop.value;
+            return map;
+        }, {});
+        const transition = (0, getTransition_1.getTransition)(stateProps, keys);
+        return {
+            styles,
+            transition
+        };
+    }
+    sendTrigger(type) {
+        this.registry.notifyTrigger(this.itemId, type);
+    }
+    receiveChange() {
+        this.onChange();
+    }
+}
+exports.ItemInteractionController = ItemInteractionController;

package/lib/interactions/getTransition.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTransition = void 0;
+const CSSPropertyNameMap_1 = require("./CSSPropertyNameMap");
+function getTransition(state, keys) {
+    if (Object.keys(state).length === 0)
+        return 'none';
+    const transitions = [];
+    for (const [key, params] of Object.entries(state)) {
+        if (!keys.includes(key) || !params.transition)
+            continue;
+        const { transition: { duration, delay, timing } } = params;
+        const cssKey = CSSPropertyNameMap_1.CSSPropertyNameMap[key];
+        const nonZeroDuration = Math.max(duration, 0.01);
+        transitions.push(`${cssKey} ${nonZeroDuration}ms ${timing} ${delay}ms`);
+    }
+    return transitions.length > 0
+        ? transitions.join(', ')
+        : 'none';
+}
+exports.getTransition = getTransition;

package/lib/interactions/types.js

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

package/lib/interactions/useItemInteractionCtrl.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useItemInteractionCtrl = void 0;
+const react_1 = require("react");
+const ItemInteractionCtrl_1 = require("./ItemInteractionCtrl");
+const InteractionsContext_1 = require("../provider/InteractionsContext");
+function useItemInteractionCtrl(itemId) {
+    const [_, triggerRender] = (0, react_1.useState)(0);
+    const registry = (0, InteractionsContext_1.useInteractionsRegistry)();
+    const ctrl = (0, react_1.useMemo)(() => {
+        if (!registry)
+            return;
+        return new ItemInteractionCtrl_1.ItemInteractionController(itemId, registry, () => triggerRender(prev => prev + 1));
+    }, [itemId, registry]);
+    return ctrl;
+}
+exports.useItemInteractionCtrl = useItemInteractionCtrl;

package/lib/provider/InteractionsContext.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useInteractionsRegistry = exports.InteractionsProvider = exports.InteractionsContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const InteractionsRegistry_1 = require("../interactions/InteractionsRegistry");
+const useCurrentLayout_1 = require("../common/useCurrentLayout");
+exports.InteractionsContext = (0, react_1.createContext)(undefined);
+const InteractionsProvider = ({ article, children }) => {
+    const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
+    const registry = (0, react_1.useMemo)(() => {
+        if (!layoutId)
+            return;
+        return new InteractionsRegistry_1.InteractionsRegistry(article, layoutId);
+    }, [layoutId]);
+    return ((0, jsx_runtime_1.jsx)(exports.InteractionsContext.Provider, { value: registry, children: children }));
+};
+exports.InteractionsProvider = InteractionsProvider;
+function useInteractionsRegistry() {
+    const registry = (0, react_1.useContext)(exports.InteractionsContext);
+    return registry;
+}
+exports.useInteractionsRegistry = useInteractionsRegistry;

package/lib/utils/getStyleFromItemStateAndParams.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getStyleFromItemStateAndParams = void 0;
+function getStyleFromItemStateAndParams(stateValue, paramsValue) {
+    return stateValue !== undefined
+        ? stateValue
+        : paramsValue;
+}
+exports.getStyleFromItemStateAndParams = getStyleFromItemStateAndParams;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.0.20",
+  "version": "1.1.0",
   "description": "SDK for Next.js",
   "main": "lib/index.js",
   "types": "src/index.ts",
@@ -23,7 +23,7 @@
   "dependencies": {
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/effects": "^1.2.0",
-    "@cntrl-site/sdk": "^1.12.3",
+    "@cntrl-site/sdk": "^1.12.4-alpha.8",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.20.1",
     "html-react-parser": "^3.0.1",
@@ -38,12 +38,15 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^16.0.0",
     "@tsconfig/node16": "^1.0.3",
     "@tsconfig/recommended": "^1.0.1",
-    "@types/jest": "^29.2.5",
+    "@types/jest": "^29.5.12",
     "@types/node": "^18.11.7",
     "@types/react": "^18.0.15",
-    "jest": "^29.3.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "ts-jest": "^29.0.3",
     "typescript": "^5.2.2"
   },

package/src/components/Article.tsx

@@ -6,6 +6,7 @@ import { Item } from './Item';
 import { useArticleRectObserver } from '../utils/ArticleRectManager/useArticleRectObserver';
 import { ArticleRectContext } from '../provider/ArticleRectContext';
 import { ArticleWrapper } from './ArticleWrapper';
+import { InteractionsProvider } from '../provider/InteractionsContext';
 
 interface Props {
   article: TArticle;
@@ -27,35 +28,37 @@ export const Article: FC<Props> = ({ article, sectionData }) => {
 
   return (
     <ArticleRectContext.Provider value={articleRectObserver}>
-      <ArticleWrapper>
-        <div className="article" ref={articleRef}>
-          {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}
-                    sectionId={section.id}
-                    articleHeight={articleHeight}
-                  />
-                ))}
-              </Section>
-            );
-          })}
-        </div>
-      </ArticleWrapper>
-      <JSXStyle id={id}>{`
+      <InteractionsProvider article={article}>
+        <ArticleWrapper>
+          <div className="article" ref={articleRef}>
+            {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}
+                      sectionId={section.id}
+                      articleHeight={articleHeight}
+                    />
+                  ))}
+                </Section>
+              );
+            })}
+          </div>
+        </ArticleWrapper>
+        <JSXStyle id={id}>{`
        .article {
-            position: relative;
-            overflow: clip;
-          }
+         position: relative;
+         overflow: clip;
+       }
       `}</JSXStyle>
+      </InteractionsProvider>
     </ArticleRectContext.Provider>
   );
 };

package/src/components/ArticleWrapper.tsx

@@ -1,5 +1,4 @@
-import React, { CSSProperties, FC, PropsWithChildren, useEffect, useId, useState } from 'react';
-import JSXStyle from 'styled-jsx/style';
+import React, { CSSProperties, FC, PropsWithChildren } from 'react';
 import { useCurrentLayout } from '../common/useCurrentLayout';
 import { LayoutContext } from '../provider/LayoutContext';
 

package/src/components/Head.tsx

@@ -30,17 +30,13 @@ export const CNTRLHead: FC<Props> = ({ meta, project }) => {
   return (
     <Head>
       <title>{meta.title}</title>
-      <meta name="description" content={meta.description}/>
-      <meta name="keywords" content={meta.keywords}/>
-      <meta name="og:title" content={meta.title}/>
-      <meta name="og:image" content={meta.opengraphThumbnail}/>
-      <meta name="og:description" content={meta.description}/>
-      <meta name="twitter:title" content={meta.title}/>
-      <meta name="twitter:image" content={meta.opengraphThumbnail}/>
-      <meta name="twitter:description" content={meta.description}/>
-      <meta property="twitter:card" content="summary_large_image"/>
-      <meta name="generator" content="https://cntrl.site"/>
-      <link rel="icon" href={meta.favicon}/>
+      <meta name="description" content={meta.description} />
+      <meta name="og:description" content={meta.description} />
+      <meta name="twitter:description" content={meta.description} />
+      <meta name="keywords" content={meta.keywords} />
+      <meta name="og:image" content={meta.opengraphThumbnail} />
+      <meta name="generator" content="https://cntrl.site" />
+      <link rel="icon" href={meta.favicon} />
       {customFonts.length > 0 && (
         <style
           dangerouslySetInnerHTML={{