@cntrl-site/sdk-nextjs 1.6.15 → 1.7.0-alpha.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Binary file
Binary file
@@ -4,7 +4,7 @@ exports.useCodeEmbedItem = void 0;
4
4
  const sdk_1 = require("@cntrl-site/sdk");
5
5
  const useLayoutContext_1 = require("../../useLayoutContext");
6
6
  const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
7
- const useCodeEmbedItem = (item, sectionId) => {
7
+ function useCodeEmbedItem(item, sectionId) {
8
8
  const layoutId = (0, useLayoutContext_1.useLayoutContext)();
9
9
  const blur = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Blur, (item, layoutId) => {
10
10
  if (!layoutId)
@@ -20,5 +20,5 @@ const useCodeEmbedItem = (item, sectionId) => {
20
20
  }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
21
21
  const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : sdk_1.AreaAnchor.TopLeft;
22
22
  return { anchor, blur, opacity };
23
- };
23
+ }
24
24
  exports.useCodeEmbedItem = useCodeEmbedItem;
@@ -0,0 +1,50 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.ComponentItem = void 0;
7
+ const jsx_runtime_1 = require("react/jsx-runtime");
8
+ const sdk_1 = require("@cntrl-site/sdk");
9
+ const react_1 = require("react");
10
+ const useCntrlContext_1 = require("../../../provider/useCntrlContext");
11
+ const useComponentItem_1 = require("./useComponentItem");
12
+ const useItemAngle_1 = require("../useItemAngle");
13
+ const style_1 = __importDefault(require("styled-jsx/style"));
14
+ const useRegisterResize_1 = require("../../../common/useRegisterResize");
15
+ const getStyleFromItemStateAndParams_1 = require("../../../utils/getStyleFromItemStateAndParams");
16
+ const useLayoutContext_1 = require("../../useLayoutContext");
17
+ const ComponentItem = ({ item, sectionId, onResize, interactionCtrl }) => {
18
+ var _a, _b, _c;
19
+ const sdk = (0, useCntrlContext_1.useCntrlContext)();
20
+ const { layouts } = sdk;
21
+ const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
22
+ const layout = (0, useLayoutContext_1.useLayoutContext)();
23
+ const layoutValues = [item.area, item.layoutParams];
24
+ const component = sdk.getComponent(item.commonParams.componentId);
25
+ const [ref, setRef] = (0, react_1.useState)(null);
26
+ const { opacity: itemOpacity } = (0, useComponentItem_1.useComponentItem)(item, sectionId);
27
+ (0, useRegisterResize_1.useRegisterResize)(ref, onResize);
28
+ const stateParams = interactionCtrl === null || interactionCtrl === void 0 ? void 0 : interactionCtrl.getState(['opacity', 'angle']);
29
+ const angle = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_a = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _a === void 0 ? void 0 : _a.angle, itemAngle);
30
+ const opacity = (0, getStyleFromItemStateAndParams_1.getStyleFromItemStateAndParams)((_b = stateParams === null || stateParams === void 0 ? void 0 : stateParams.styles) === null || _b === void 0 ? void 0 : _b.opacity, itemOpacity);
31
+ if (!component || !layout)
32
+ return null;
33
+ const Element = component.element;
34
+ const parameters = item.layoutParams[layout].parameters;
35
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `custom-component-${item.id}`, ref: setRef, style: Object.assign(Object.assign(Object.assign({}, (opacity !== undefined ? { opacity } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), { transition: (_c = stateParams === null || stateParams === void 0 ? void 0 : stateParams.transition) !== null && _c !== void 0 ? _c : 'none' }), children: (0, jsx_runtime_1.jsx)(Element, Object.assign({ content: item.commonParams.content }, parameters)) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: item.id, children: `
36
+ .custom-component-${item.id} {
37
+ width: 100%;
38
+ height: 100%;
39
+ }
40
+ ${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
41
+ return (`
42
+ .custom-component-${item.id} {
43
+ transform: rotate(${area.angle}deg);
44
+ opacity: ${layoutParams.opacity};
45
+ }
46
+ `);
47
+ })}
48
+ ` })] }));
49
+ };
50
+ exports.ComponentItem = ComponentItem;
@@ -0,0 +1,19 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useComponentItem = void 0;
4
+ const sdk_1 = require("@cntrl-site/sdk");
5
+ const useKeyframeValue_1 = require("../../../common/useKeyframeValue");
6
+ const useLayoutContext_1 = require("../../useLayoutContext");
7
+ function useComponentItem(item, sectionId) {
8
+ const layoutId = (0, useLayoutContext_1.useLayoutContext)();
9
+ const opacity = (0, useKeyframeValue_1.useKeyframeValue)(item, sdk_1.KeyframeType.Opacity, (item, layoutId) => {
10
+ if (!layoutId)
11
+ return;
12
+ const layoutParams = item.layoutParams[layoutId];
13
+ return 'opacity' in layoutParams ? layoutParams.opacity : 1;
14
+ }, (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined, sectionId, [layoutId]);
15
+ return {
16
+ opacity
17
+ };
18
+ }
19
+ exports.useComponentItem = useComponentItem;
@@ -12,6 +12,7 @@ const CustomItem_1 = require("./CustomItem/CustomItem");
12
12
  const GroupItem_1 = require("./GroupItem/GroupItem");
13
13
  const CodeEmbedItem_1 = require("./CodeEmbedItem/CodeEmbedItem");
14
14
  const CompoundItem_1 = require("./CompoundItem/CompoundItem");
15
+ const ComponentItem_1 = require("./ComponentItem/ComponentItem");
15
16
  exports.itemsMap = {
16
17
  [sdk_1.ArticleItemType.Rectangle]: RectangleItem_1.RectangleItem,
17
18
  [sdk_1.ArticleItemType.Image]: ImageItem_1.ImageItem,
@@ -22,5 +23,6 @@ exports.itemsMap = {
22
23
  [sdk_1.ArticleItemType.Custom]: CustomItem_1.CustomItem,
23
24
  [sdk_1.ArticleItemType.Group]: GroupItem_1.GroupItem,
24
25
  [sdk_1.ArticleItemType.Compound]: CompoundItem_1.CompoundItem,
25
- [sdk_1.ArticleItemType.CodeEmbed]: CodeEmbedItem_1.CodeEmbedItem
26
+ [sdk_1.ArticleItemType.CodeEmbed]: CodeEmbedItem_1.CodeEmbedItem,
27
+ [sdk_1.ArticleItemType.Component]: ComponentItem_1.ComponentItem
26
28
  };
package/lib/index.js CHANGED
@@ -15,6 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  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;
18
+ const defaultContext_1 = require("./provider/defaultContext");
18
19
  __exportStar(require("@cntrl-site/sdk"), exports);
19
20
  var RichTextConverter_1 = require("./utils/RichTextConverter/RichTextConverter");
20
21
  Object.defineProperty(exports, "RichTextConverter", { enumerable: true, get: function () { return RichTextConverter_1.RichTextConverter; } });
@@ -42,7 +43,6 @@ var VimeoEmbed_1 = require("./components/items/EmbedVideoItem/VimeoEmbed");
42
43
  Object.defineProperty(exports, "VimeoEmbedItem", { enumerable: true, get: function () { return VimeoEmbed_1.VimeoEmbedItem; } });
43
44
  var YoutubeEmbed_1 = require("./components/items/EmbedVideoItem/YoutubeEmbed");
44
45
  Object.defineProperty(exports, "YoutubeEmbedItem", { enumerable: true, get: function () { return YoutubeEmbed_1.YoutubeEmbedItem; } });
45
- const defaultContext_1 = require("./provider/defaultContext");
46
46
  var CntrlProvider_1 = require("./provider/CntrlProvider");
47
47
  Object.defineProperty(exports, "CntrlProvider", { enumerable: true, get: function () { return CntrlProvider_1.CntrlProvider; } });
48
48
  var useCntrlContext_1 = require("./provider/useCntrlContext");
@@ -10,6 +10,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
10
10
  };
11
11
  Object.defineProperty(exports, "__esModule", { value: true });
12
12
  exports.CntrlSdkContext = void 0;
13
+ const sdk_1 = require("@cntrl-site/sdk");
13
14
  class CntrlSdkContext {
14
15
  constructor(customItems, customSections) {
15
16
  this.customItems = customItems;
@@ -17,6 +18,7 @@ class CntrlSdkContext {
17
18
  this._layouts = [];
18
19
  this._fonts = undefined;
19
20
  this.sectionHeightMap = new Map();
21
+ this.components = new Map();
20
22
  }
21
23
  resolveSectionData(sections) {
22
24
  return __awaiter(this, void 0, void 0, function* () {
@@ -34,12 +36,18 @@ class CntrlSdkContext {
34
36
  }
35
37
  init({ project, article }) {
36
38
  this.setLayouts(project.layouts);
39
+ this.setComponents(sdk_1.components);
37
40
  this.setFonts(project.fonts);
38
41
  this.setSectionsHeight(article.sections);
39
42
  }
40
43
  setLayouts(layouts) {
41
44
  this._layouts = layouts;
42
45
  }
46
+ setComponents(components) {
47
+ for (const component of components) {
48
+ this.components.set(component.id, component);
49
+ }
50
+ }
43
51
  setFonts(fonts) {
44
52
  this._fonts = fonts;
45
53
  }
@@ -58,6 +66,9 @@ class CntrlSdkContext {
58
66
  get fonts() {
59
67
  return this._fonts;
60
68
  }
69
+ getComponent(id) {
70
+ return this.components.get(id);
71
+ }
61
72
  }
62
73
  exports.CntrlSdkContext = CntrlSdkContext;
63
74
  function isDefined(value) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "1.6.15",
3
+ "version": "1.7.0-alpha.0",
4
4
  "description": "SDK for Next.js",
5
5
  "author": "arsen@momdesign.nyc",
6
6
  "license": "MIT",
@@ -31,7 +31,7 @@
31
31
  "@antfu/eslint-config": "^3.8.0",
32
32
  "@cntrl-site/color": "^1.0.0",
33
33
  "@cntrl-site/effects": "^1.3.2",
34
- "@cntrl-site/sdk": "^1.20.1",
34
+ "@cntrl-site/sdk": "^1.21.0-alpha.0",
35
35
  "@types/vimeo__player": "^2.18.0",
36
36
  "@vimeo/player": "^2.25.0",
37
37
  "html-react-parser": "^3.0.1",
@@ -2,7 +2,7 @@ import { CodeEmbedItem, AreaAnchor, KeyframeType } from '@cntrl-site/sdk';
2
2
  import { useLayoutContext } from '../../useLayoutContext';
3
3
  import { useKeyframeValue } from '../../../common/useKeyframeValue';
4
4
 
5
- export const useCodeEmbedItem = (item: CodeEmbedItem, sectionId: string) => {
5
+ export function useCodeEmbedItem(item: CodeEmbedItem, sectionId: string) {
6
6
  const layoutId = useLayoutContext();
7
7
 
8
8
  const blur = useKeyframeValue(
@@ -33,4 +33,4 @@ export const useCodeEmbedItem = (item: CodeEmbedItem, sectionId: string) => {
33
33
 
34
34
  const anchor = layoutId && 'areaAnchor' in item.layoutParams[layoutId] ? item.layoutParams[layoutId].areaAnchor : AreaAnchor.TopLeft;
35
35
  return { anchor, blur, opacity };
36
- };
36
+ }
@@ -0,0 +1,62 @@
1
+ import { ItemProps } from '../Item';
2
+ import { ComponentItem as TComponentItem, getLayoutStyles } from '@cntrl-site/sdk';
3
+ import { FC, useState } from 'react';
4
+ import { useCntrlContext } from '../../../provider/useCntrlContext';
5
+ import { useComponentItem } from './useComponentItem';
6
+ import { useItemAngle } from '../useItemAngle';
7
+ import JSXStyle from 'styled-jsx/style';
8
+ import { useRegisterResize } from '../../../common/useRegisterResize';
9
+ import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
10
+ import { useLayoutContext } from '../../useLayoutContext';
11
+
12
+ export const ComponentItem: FC<ItemProps<TComponentItem>> = ({ item, sectionId, onResize, interactionCtrl }) => {
13
+ const sdk = useCntrlContext();
14
+ const { layouts } = sdk;
15
+ const itemAngle = useItemAngle(item, sectionId);
16
+ const layout = useLayoutContext();
17
+ const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
18
+ const component = sdk.getComponent(item.commonParams.componentId);
19
+ const [ref, setRef] = useState<HTMLDivElement | null>(null);
20
+ const { opacity: itemOpacity } = useComponentItem(item, sectionId);
21
+ useRegisterResize(ref, onResize);
22
+ const stateParams = interactionCtrl?.getState(['opacity', 'angle']);
23
+ const angle = getStyleFromItemStateAndParams(stateParams?.styles?.angle, itemAngle);
24
+ const opacity = getStyleFromItemStateAndParams(stateParams?.styles?.opacity, itemOpacity);
25
+ if (!component || !layout) return null;
26
+ const Element = component.element;
27
+ const parameters = item.layoutParams[layout].parameters;
28
+ return (
29
+ <>
30
+ <div
31
+ className={`custom-component-${item.id}`}
32
+ ref={setRef}
33
+ style={{
34
+ ...(opacity !== undefined ? { opacity } : {}),
35
+ ...(angle !== undefined ? { transform: `rotate(${angle}deg)` } : {}),
36
+ transition: stateParams?.transition ?? 'none'
37
+ }}
38
+ >
39
+ <Element
40
+ content={item.commonParams.content}
41
+ {...parameters}
42
+ />
43
+ </div>
44
+ <JSXStyle id={item.id}>
45
+ {`
46
+ .custom-component-${item.id} {
47
+ width: 100%;
48
+ height: 100%;
49
+ }
50
+ ${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
51
+ return (`
52
+ .custom-component-${item.id} {
53
+ transform: rotate(${area.angle}deg);
54
+ opacity: ${layoutParams.opacity};
55
+ }
56
+ `);
57
+ })}
58
+ `}
59
+ </JSXStyle>
60
+ </>
61
+ );
62
+ };
@@ -0,0 +1,23 @@
1
+ import { ComponentItem, KeyframeType } from '@cntrl-site/sdk';
2
+ import { useKeyframeValue } from '../../../common/useKeyframeValue';
3
+ import { useLayoutContext } from '../../useLayoutContext';
4
+
5
+ export function useComponentItem(item: ComponentItem, sectionId: string) {
6
+ const layoutId = useLayoutContext();
7
+ const opacity = useKeyframeValue(
8
+ item,
9
+ KeyframeType.Opacity,
10
+ (item, layoutId) => {
11
+ if (!layoutId) return;
12
+ const layoutParams = item.layoutParams[layoutId];
13
+ return 'opacity' in layoutParams ? layoutParams.opacity : 1;
14
+ },
15
+ (animator, scroll, value) => value !== undefined ? animator.getOpacity({ opacity: value }, scroll).opacity : undefined,
16
+ sectionId,
17
+ [layoutId]
18
+ );
19
+
20
+ return {
21
+ opacity
22
+ };
23
+ }
@@ -43,5 +43,6 @@ export const CustomItem: FC<ItemProps<TCustomItem>> = ({ item, onResize, section
43
43
  `);
44
44
  })}`}
45
45
  </JSXStyle>
46
- </>);
46
+ </>
47
+ );
47
48
  };
@@ -12,6 +12,7 @@ import {
12
12
  ArticleItemType,
13
13
  getLayoutStyles,
14
14
  ItemAny,
15
+ AreaAnchor,
15
16
  PositionType
16
17
  } from '@cntrl-site/sdk';
17
18
  import { useCntrlContext } from '../../provider/useCntrlContext';
@@ -24,7 +25,6 @@ import { getAnchoredItemTop } from '../../utils/getAnchoredItemTop';
24
25
  import { useLayoutContext } from '../useLayoutContext';
25
26
  import { ArticleRectContext } from '../../provider/ArticleRectContext';
26
27
  import { useExemplary } from '../../common/useExemplary';
27
- import { AreaAnchor } from '@cntrl-site/sdk/src/types/article/ItemArea';
28
28
  import { KeyframesContext } from '../../provider/KeyframesContext';
29
29
  import { useItemInteractionCtrl } from '../../interactions/useItemInteractionCtrl';
30
30
  import { isItemType } from '../../utils/isItemType';
@@ -7,7 +7,7 @@ import { LinkWrapper } from '../LinkWrapper';
7
7
  import { useRectangleItem } from './useRectangleItem';
8
8
  import { useItemAngle } from '../useItemAngle';
9
9
  import { useCntrlContext } from '../../../provider/useCntrlContext';
10
- import { useRegisterResize } from "../../../common/useRegisterResize";
10
+ import { useRegisterResize } from '../../../common/useRegisterResize';
11
11
  import { getStyleFromItemStateAndParams } from '../../../utils/getStyleFromItemStateAndParams';
12
12
 
13
13
  export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
@@ -40,7 +40,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
40
40
  const strokeWidth = getStyleFromItemStateAndParams(styles?.strokeWidth, itemStrokeWidth);
41
41
  const angle = getStyleFromItemStateAndParams(styles?.angle, itemAngle);
42
42
  const blur = getStyleFromItemStateAndParams(styles?.blur, itemBlur);
43
- const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)`: undefined;
43
+ const backdropFilterValue = backdropBlur ? `blur(${backdropBlur * 100}vw)` : undefined;
44
44
  const isInteractive = backgroundColor?.getAlpha() !== 0 || (strokeWidth !== 0 && borderColor?.getAlpha() !== 0);
45
45
  useEffect(() => {
46
46
  onVisibilityChange?.(isInteractive);
@@ -53,7 +53,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId,
53
53
  className={`rectangle-${item.id}`}
54
54
  ref={setRef}
55
55
  style={{
56
- ...(backgroundColor ? { backgroundColor : `${backgroundColor.fmt('rgba')}` } : {}),
56
+ ...(backgroundColor ? { backgroundColor: `${backgroundColor.fmt('rgba')}` } : {}),
57
57
  ...(borderColor ? { borderColor: `${borderColor.fmt('rgba')}` } : {}),
58
58
  ...(radius !== undefined ? { borderRadius: `${radius * 100}vw` } : {}),
59
59
  ...(strokeWidth !== undefined ? { borderWidth: `${strokeWidth * 100}vw` } : {}),
@@ -11,6 +11,7 @@ import { GroupItem } from './GroupItem/GroupItem';
11
11
  import { CodeEmbedItem } from './CodeEmbedItem/CodeEmbedItem';
12
12
  import { ItemProps } from './Item';
13
13
  import { CompoundItem } from './CompoundItem/CompoundItem';
14
+ import { ComponentItem } from './ComponentItem/ComponentItem';
14
15
 
15
16
  export const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> = {
16
17
  [ArticleItemType.Rectangle]: RectangleItem,
@@ -22,5 +23,6 @@ export const itemsMap: Record<ArticleItemType, ComponentType<ItemProps<any>>> =
22
23
  [ArticleItemType.Custom]: CustomItem,
23
24
  [ArticleItemType.Group]: GroupItem,
24
25
  [ArticleItemType.Compound]: CompoundItem,
25
- [ArticleItemType.CodeEmbed]: CodeEmbedItem
26
+ [ArticleItemType.CodeEmbed]: CodeEmbedItem,
27
+ [ArticleItemType.Component]: ComponentItem
26
28
  };
package/src/index.ts CHANGED
@@ -1,5 +1,6 @@
1
- export * from '@cntrl-site/sdk';
1
+ import { cntrlSdkContext as sdk } from './provider/defaultContext';
2
2
 
3
+ export * from '@cntrl-site/sdk';
3
4
  export { RichTextConverter } from './utils/RichTextConverter/RichTextConverter';
4
5
  export { Page } from './components/Page';
5
6
  export type { PageProps } from './components/Page';
@@ -15,7 +16,6 @@ export { LayoutStyle } from './components/LayoutStyle';
15
16
  export { VimeoEmbedItem } from './components/items/EmbedVideoItem/VimeoEmbed';
16
17
  export { YoutubeEmbedItem } from './components/items/EmbedVideoItem/YoutubeEmbed';
17
18
 
18
- import { cntrlSdkContext as sdk } from './provider/defaultContext';
19
19
  export { CntrlProvider } from './provider/CntrlProvider';
20
20
  export type { CustomItemComponent } from './provider/CustomItemTypes';
21
21
  export { useCntrlContext } from './provider/useCntrlContext';
@@ -1,6 +1,7 @@
1
1
  import { CustomItemRegistry } from './CustomItemRegistry';
2
- import { Article, Section, Layout, Project, SectionHeight } from '@cntrl-site/sdk';
2
+ import { Article, Section, Layout, Project, SectionHeight, components, Component as TComponent } from '@cntrl-site/sdk';
3
3
  import { CustomSectionRegistry } from './CustomSectionRegistry';
4
+ import { Component } from 'react';
4
5
 
5
6
  interface SdkContextInitProps {
6
7
  project: Project;
@@ -11,6 +12,8 @@ export class CntrlSdkContext {
11
12
  private _layouts: Layout[] = [];
12
13
  private _fonts?: Project['fonts'] = undefined;
13
14
  private sectionHeightMap: Map<string, Record<string, SectionHeight>> = new Map();
15
+ private components: Map<string, TComponent> = new Map();
16
+
14
17
  constructor(
15
18
  public readonly customItems: CustomItemRegistry,
16
19
  public readonly customSections: CustomSectionRegistry
@@ -32,6 +35,7 @@ export class CntrlSdkContext {
32
35
 
33
36
  init({ project, article }: SdkContextInitProps) {
34
37
  this.setLayouts(project.layouts);
38
+ this.setComponents(components);
35
39
  this.setFonts(project.fonts);
36
40
  this.setSectionsHeight(article.sections);
37
41
  }
@@ -40,6 +44,12 @@ export class CntrlSdkContext {
40
44
  this._layouts = layouts;
41
45
  }
42
46
 
47
+ private setComponents(components: TComponent[]) {
48
+ for (const component of components) {
49
+ this.components.set(component.id, component);
50
+ }
51
+ }
52
+
43
53
  private setFonts(fonts: Project['fonts']) {
44
54
  this._fonts = fonts;
45
55
  }
@@ -62,6 +72,10 @@ export class CntrlSdkContext {
62
72
  get fonts(): Project['fonts'] | undefined {
63
73
  return this._fonts;
64
74
  }
75
+
76
+ getComponent(id: string): TComponent | undefined {
77
+ return this.components.get(id);
78
+ }
65
79
  }
66
80
 
67
81
  function isDefined<T>(value: T): value is Exclude<T, undefined> {
@@ -1,5 +1,5 @@
1
1
  import { AreaAnchor } from '@cntrl-site/sdk';
2
- import { DimensionMode } from '@cntrl-site/sdk/src/types/article/ItemArea';
2
+ import { DimensionMode } from '@cntrl-site/sdk/dist/types/article/ItemArea';
3
3
 
4
4
  const positionMatrix: Record<AreaAnchor, [number, number]> = {
5
5
  [AreaAnchor.TopLeft]: [0, 0],
@@ -1,5 +1,5 @@
1
1
  import { ArticleItemType, ItemAny } from '@cntrl-site/sdk';
2
- import { Item as TItem } from '@cntrl-site/sdk/src/types/article/Item';
2
+ import { Item as TItem } from '@cntrl-site/sdk/dist/types/article/Item';
3
3
 
4
4
  export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
5
5
  return item.type === itemType;
@@ -1,5 +0,0 @@
1
- <component name="ProjectCodeStyleConfiguration">
2
- <state>
3
- <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
4
- </state>
5
- </component>
package/.idea/modules.xml DELETED
@@ -1,8 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="ProjectModuleManager">
4
- <modules>
5
- <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
6
- </modules>
7
- </component>
8
- </project>
@@ -1,12 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <module type="WEB_MODULE" version="4">
3
- <component name="NewModuleRootManager">
4
- <content url="file://$MODULE_DIR$">
5
- <excludeFolder url="file://$MODULE_DIR$/temp" />
6
- <excludeFolder url="file://$MODULE_DIR$/.tmp" />
7
- <excludeFolder url="file://$MODULE_DIR$/tmp" />
8
- </content>
9
- <orderEntry type="inheritedJdk" />
10
- <orderEntry type="sourceFolder" forTests="false" />
11
- </component>
12
- </module>
package/.idea/vcs.xml DELETED
@@ -1,6 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8"?>
2
- <project version="4">
3
- <component name="VcsDirectoryMappings">
4
- <mapping directory="$PROJECT_DIR$" vcs="Git" />
5
- </component>
6
- </project>