@cntrl-site/sdk-nextjs 1.9.40 → 1.9.41

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.
Files changed (139) hide show
  1. package/.idea/codeStyles/codeStyleConfig.xml +5 -0
  2. package/.idea/modules.xml +8 -0
  3. package/.idea/sdk-nextjs.iml +12 -0
  4. package/.idea/vcs.xml +6 -0
  5. package/LICENSE +21 -21
  6. package/README.md +4 -4
  7. package/TODO.md +1 -1
  8. package/eslint.config.mjs +35 -35
  9. package/jest.config.js +6 -6
  10. package/lib/common/useItemFXData.js +7 -7
  11. package/lib/components/Article.js +5 -5
  12. package/lib/components/LayoutStyle.js +4 -4
  13. package/lib/components/ScrollPlaybackVideo.js +1 -1
  14. package/lib/components/Section/Section.js +27 -27
  15. package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js +36 -36
  16. package/lib/components/items/ComponentItem/ComponentItem.js +13 -13
  17. package/lib/components/items/CompoundItem/CompoundChild.js +20 -20
  18. package/lib/components/items/CompoundItem/CompoundItem.js +14 -14
  19. package/lib/components/items/CustomItem/CustomItem.js +9 -9
  20. package/lib/components/items/EmbedVideoItem/VimeoEmbed.js +24 -24
  21. package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js +27 -27
  22. package/lib/components/items/FileItem/ImageItem.js +40 -40
  23. package/lib/components/items/FileItem/VideoItem.js +64 -64
  24. package/lib/components/items/GroupItem/GroupItem.js +14 -14
  25. package/lib/components/items/Item.js +30 -30
  26. package/lib/components/items/RectangleItem/RectangleItem.js +27 -27
  27. package/lib/components/items/RichTextItem/RichTextItem.js +22 -22
  28. package/lib/utils/RichTextConverter/RichTextConverter.js +21 -21
  29. package/package.json +60 -60
  30. package/src/ItemGeometry/CSSPropertyNameMap.ts +37 -37
  31. package/src/ItemGeometry/GenericGeometryController.ts +59 -59
  32. package/src/ItemGeometry/ItemGeometryContext.ts +4 -4
  33. package/src/ItemGeometry/ItemGeometryController.ts +22 -22
  34. package/src/ItemGeometry/ItemGeometryService.ts +34 -34
  35. package/src/ItemGeometry/RichTextGeometryController.ts +166 -166
  36. package/src/ItemGeometry/useItemGeometry.ts +25 -25
  37. package/src/common/useCurrentLayout.ts +52 -52
  38. package/src/common/useExemplary.ts +9 -9
  39. package/src/common/useItemFXData.ts +47 -47
  40. package/src/common/useKeyframeValue.ts +85 -85
  41. package/src/common/useRegisterResize.ts +16 -16
  42. package/src/components/Article.tsx +75 -75
  43. package/src/components/ArticleWrapper.tsx +21 -21
  44. package/src/components/Head.tsx +56 -56
  45. package/src/components/LayoutStyle.tsx +21 -21
  46. package/src/components/Page.tsx +38 -38
  47. package/src/components/ScrollPlaybackVideo.tsx +56 -56
  48. package/src/components/Section/Section.tsx +129 -129
  49. package/src/components/Section/SectionImage.tsx +48 -48
  50. package/src/components/Section/SectionVideo.tsx +144 -144
  51. package/src/components/Section/useSectionColor.ts +19 -19
  52. package/src/components/Section/useSectionHeightMap.ts +19 -19
  53. package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx +147 -147
  54. package/src/components/items/CodeEmbedItem/useCodeEmbedItem.ts +36 -36
  55. package/src/components/items/ComponentItem/ComponentItem.tsx +72 -72
  56. package/src/components/items/ComponentItem/useComponentItem.ts +35 -35
  57. package/src/components/items/CompoundItem/CompoundChild.tsx +150 -150
  58. package/src/components/items/CompoundItem/CompoundItem.tsx +87 -87
  59. package/src/components/items/CompoundItem/useCompoundItem.ts +21 -21
  60. package/src/components/items/CustomItem/CustomItem.tsx +50 -50
  61. package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx +216 -216
  62. package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx +200 -200
  63. package/src/components/items/EmbedVideoItem/useEmbedVideoItem.ts +46 -46
  64. package/src/components/items/FileItem/ImageItem.tsx +165 -165
  65. package/src/components/items/FileItem/VideoItem.tsx +282 -282
  66. package/src/components/items/FileItem/useFileItem.ts +81 -81
  67. package/src/components/items/GroupItem/GroupItem.tsx +98 -98
  68. package/src/components/items/GroupItem/useGroupItem.ts +34 -34
  69. package/src/components/items/Item.tsx +262 -262
  70. package/src/components/items/LinkWrapper.tsx +39 -39
  71. package/src/components/items/RectangleItem/RectangleItem.tsx +184 -184
  72. package/src/components/items/RectangleItem/useRectangleItem.ts +89 -89
  73. package/src/components/items/RichTextItem/RichTextItem.tsx +112 -112
  74. package/src/components/items/RichTextItem/useRichTextItem.ts +12 -12
  75. package/src/components/items/RichTextWrapper.tsx +15 -15
  76. package/src/components/items/itemsMap.ts +28 -28
  77. package/src/components/items/useDraggable.ts +252 -252
  78. package/src/components/items/useItemAngle.ts +13 -13
  79. package/src/components/items/useItemArea.ts +35 -35
  80. package/src/components/items/useItemPointerEvents.ts +23 -23
  81. package/src/components/items/useItemScale.ts +17 -17
  82. package/src/components/items/useItemTriggers.ts +15 -15
  83. package/src/components/items/useRichTextItemValues.ts +66 -66
  84. package/src/components/items/useSizing.ts +25 -25
  85. package/src/components/items/useStickyItemTop.ts +21 -21
  86. package/src/components/useLayoutContext.ts +7 -7
  87. package/src/index.ts +24 -24
  88. package/src/interactions/InteractionsRegistry.ts +512 -512
  89. package/src/interactions/ItemInteractionCtrl.ts +78 -78
  90. package/src/interactions/getTransition.ts +27 -27
  91. package/src/interactions/types.ts +36 -36
  92. package/src/interactions/useItemInteractionCtrl.ts +18 -18
  93. package/src/provider/ArticleRectContext.ts +4 -4
  94. package/src/provider/CntrlContext.ts +5 -5
  95. package/src/provider/CntrlProvider.tsx +11 -11
  96. package/src/provider/CntrlSdkContext.ts +84 -84
  97. package/src/provider/CustomItemRegistry.ts +14 -14
  98. package/src/provider/CustomItemTypes.ts +3 -3
  99. package/src/provider/CustomSectionRegistry.ts +25 -25
  100. package/src/provider/InteractionsContext.tsx +73 -73
  101. package/src/provider/Keyframes.ts +11 -11
  102. package/src/provider/KeyframesContext.ts +5 -5
  103. package/src/provider/LayoutContext.ts +3 -3
  104. package/src/provider/WebGLContextManagerContext.tsx +4 -4
  105. package/src/provider/defaultContext.ts +8 -8
  106. package/src/provider/useCntrlContext.ts +8 -8
  107. package/src/styled-jsx.d.ts +1 -1
  108. package/src/utils/Animator/Animator.ts +570 -570
  109. package/src/utils/ArticleRectManager/ArticleRectObserver.ts +93 -93
  110. package/src/utils/ArticleRectManager/useArticleRectObserver.ts +17 -17
  111. package/src/utils/ArticleRectManager/useSectionRegistry.ts +11 -11
  112. package/src/utils/CSSNumeric.ts +19 -19
  113. package/src/utils/EventEmitter.ts +41 -41
  114. package/src/utils/RichTextConverter/RichTextConverter.tsx +342 -342
  115. package/src/utils/ScaleAnchorMap.ts +13 -13
  116. package/src/utils/StickyManager/StickyManager.ts +23 -23
  117. package/src/utils/Youtube/YouTubeIframeApiLoader.ts +58 -58
  118. package/src/utils/Youtube/YoutubeIframeApi.ts +101 -101
  119. package/src/utils/Youtube/useYouTubeIframeApi.ts +12 -12
  120. package/src/utils/areFillsVisible/areFillsVisible.test.ts +63 -63
  121. package/src/utils/areFillsVisible/areFillsVisible.ts +37 -37
  122. package/src/utils/binSearchInsertAt.ts +33 -33
  123. package/src/utils/castObject.ts +10 -10
  124. package/src/utils/checkOverflowClipSupport.ts +13 -13
  125. package/src/utils/domDfs.ts +11 -11
  126. package/src/utils/effects/useImageFx.ts +156 -156
  127. package/src/utils/effects/useVideoFx.ts +158 -158
  128. package/src/utils/getAnchoredItemTop.ts +12 -12
  129. package/src/utils/getCompoundBoundaryStyles.ts +60 -60
  130. package/src/utils/getFill.ts +46 -46
  131. package/src/utils/getFontFamilyValue.ts +3 -3
  132. package/src/utils/getInvertedRanges.ts +43 -43
  133. package/src/utils/getItemTopStyle.ts +14 -14
  134. package/src/utils/getStyleFromItemStateAndParams.ts +8 -8
  135. package/src/utils/getValidYoutubeUrl.ts +29 -29
  136. package/src/utils/isItemType.ts +5 -5
  137. package/src/utils/rangeMap.ts +13 -13
  138. package/src/utils/useElementRect.ts +23 -23
  139. package/cntrl-site-sdk-nextjs-1.9.32-0.tgz +0 -0
@@ -1,73 +1,73 @@
1
- import { createContext, FC, PropsWithChildren, useCallback, useContext, useEffect, useMemo } from 'react';
2
- import { InteractionsRegistry } from '../interactions/InteractionsRegistry';
3
- import { Article } from '@cntrl-site/sdk';
4
- import { useCurrentLayout } from '../common/useCurrentLayout';
5
- import { ArticleRectContext } from './ArticleRectContext';
6
- import { ItemGeometryContext } from '../ItemGeometry/ItemGeometryContext';
7
-
8
- export const InteractionsContext = createContext<InteractionsRegistry | undefined>(undefined);
9
-
10
- interface Props {
11
- article: Article;
12
- }
13
-
14
- export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, children }) => {
15
- const { layoutId } = useCurrentLayout();
16
- const articleRectObserver = useContext(ArticleRectContext);
17
- const itemGeometryService = useContext(ItemGeometryContext);
18
- const registry = useMemo(() => {
19
- if (!layoutId) return;
20
- return new InteractionsRegistry(article, layoutId, itemGeometryService);
21
- }, [layoutId, itemGeometryService]);
22
-
23
- useEffect(() => {
24
- if (!registry || !articleRectObserver) return;
25
- const handleScroll = () => {
26
- const scrollY = window.scrollY;
27
- registry.notifyScroll(scrollY);
28
- };
29
- return articleRectObserver.on('scroll', handleScroll);
30
- }, [registry, articleRectObserver]);
31
-
32
- const notifyLoad = useCallback(() => {
33
- if (!registry) return;
34
- requestAnimationFrame(() => {
35
- setTimeout(() => {
36
- registry.notifyLoad();
37
- }, 0);
38
- });
39
- }, [registry]);
40
-
41
- useEffect(() => {
42
- const handlePageOverlay = (e: CustomEvent) => {
43
- const itemId = e.detail.itemId;
44
- if (!registry || !itemId) return;
45
- registry.notifyPageOverlay(itemId);
46
- };
47
- window.addEventListener('page-overlay', handlePageOverlay as EventListener);
48
- return () => {
49
- window.removeEventListener('page-overlay', handlePageOverlay as EventListener);
50
- };
51
- }, [registry]);
52
-
53
- useEffect(() => {
54
- if (document.readyState === 'complete') {
55
- notifyLoad();
56
- } else {
57
- window.addEventListener('load', notifyLoad);
58
- }
59
-
60
- return () => window.removeEventListener('load', notifyLoad);
61
- }, [notifyLoad]);
62
-
63
- return (
64
- <InteractionsContext.Provider value={registry}>
65
- {children}
66
- </InteractionsContext.Provider>
67
- );
68
- };
69
-
70
- export function useInteractionsRegistry(): InteractionsRegistry | undefined {
71
- const registry = useContext(InteractionsContext);
72
- return registry;
73
- }
1
+ import { createContext, FC, PropsWithChildren, useCallback, useContext, useEffect, useMemo } from 'react';
2
+ import { InteractionsRegistry } from '../interactions/InteractionsRegistry';
3
+ import { Article } from '@cntrl-site/sdk';
4
+ import { useCurrentLayout } from '../common/useCurrentLayout';
5
+ import { ArticleRectContext } from './ArticleRectContext';
6
+ import { ItemGeometryContext } from '../ItemGeometry/ItemGeometryContext';
7
+
8
+ export const InteractionsContext = createContext<InteractionsRegistry | undefined>(undefined);
9
+
10
+ interface Props {
11
+ article: Article;
12
+ }
13
+
14
+ export const InteractionsProvider: FC<PropsWithChildren<Props>> = ({ article, children }) => {
15
+ const { layoutId } = useCurrentLayout();
16
+ const articleRectObserver = useContext(ArticleRectContext);
17
+ const itemGeometryService = useContext(ItemGeometryContext);
18
+ const registry = useMemo(() => {
19
+ if (!layoutId) return;
20
+ return new InteractionsRegistry(article, layoutId, itemGeometryService);
21
+ }, [layoutId, itemGeometryService]);
22
+
23
+ useEffect(() => {
24
+ if (!registry || !articleRectObserver) return;
25
+ const handleScroll = () => {
26
+ const scrollY = window.scrollY;
27
+ registry.notifyScroll(scrollY);
28
+ };
29
+ return articleRectObserver.on('scroll', handleScroll);
30
+ }, [registry, articleRectObserver]);
31
+
32
+ const notifyLoad = useCallback(() => {
33
+ if (!registry) return;
34
+ requestAnimationFrame(() => {
35
+ setTimeout(() => {
36
+ registry.notifyLoad();
37
+ }, 0);
38
+ });
39
+ }, [registry]);
40
+
41
+ useEffect(() => {
42
+ const handlePageOverlay = (e: CustomEvent) => {
43
+ const itemId = e.detail.itemId;
44
+ if (!registry || !itemId) return;
45
+ registry.notifyPageOverlay(itemId);
46
+ };
47
+ window.addEventListener('page-overlay', handlePageOverlay as EventListener);
48
+ return () => {
49
+ window.removeEventListener('page-overlay', handlePageOverlay as EventListener);
50
+ };
51
+ }, [registry]);
52
+
53
+ useEffect(() => {
54
+ if (document.readyState === 'complete') {
55
+ notifyLoad();
56
+ } else {
57
+ window.addEventListener('load', notifyLoad);
58
+ }
59
+
60
+ return () => window.removeEventListener('load', notifyLoad);
61
+ }, [notifyLoad]);
62
+
63
+ return (
64
+ <InteractionsContext.Provider value={registry}>
65
+ {children}
66
+ </InteractionsContext.Provider>
67
+ );
68
+ };
69
+
70
+ export function useInteractionsRegistry(): InteractionsRegistry | undefined {
71
+ const registry = useContext(InteractionsContext);
72
+ return registry;
73
+ }
@@ -1,11 +1,11 @@
1
- import { KeyframeAny } from '@cntrl-site/sdk';
2
-
3
- export class Keyframes {
4
- constructor(
5
- private keyframes: KeyframeAny[] = []
6
- ) {}
7
-
8
- getItemKeyframes(itemId: string) {
9
- return this.keyframes.filter(kf => kf.itemId === itemId);
10
- }
11
- }
1
+ import { KeyframeAny } from '@cntrl-site/sdk';
2
+
3
+ export class Keyframes {
4
+ constructor(
5
+ private keyframes: KeyframeAny[] = []
6
+ ) {}
7
+
8
+ getItemKeyframes(itemId: string) {
9
+ return this.keyframes.filter(kf => kf.itemId === itemId);
10
+ }
11
+ }
@@ -1,5 +1,5 @@
1
- import { createContext } from 'react';
2
- import { Keyframes } from './Keyframes';
3
-
4
- export const KeyframesContext = createContext(new Keyframes());
5
-
1
+ import { createContext } from 'react';
2
+ import { Keyframes } from './Keyframes';
3
+
4
+ export const KeyframesContext = createContext(new Keyframes());
5
+
@@ -1,3 +1,3 @@
1
- import { createContext } from 'react';
2
-
3
- export const LayoutContext = createContext<string | undefined>(undefined);
1
+ import { createContext } from 'react';
2
+
3
+ export const LayoutContext = createContext<string | undefined>(undefined);
@@ -1,4 +1,4 @@
1
- import { WebGLContextManager } from '@cntrl-site/effects';
2
- import { createContext } from 'react';
3
-
4
- export const WebglContextManagerContext = createContext(new WebGLContextManager());
1
+ import { WebGLContextManager } from '@cntrl-site/effects';
2
+ import { createContext } from 'react';
3
+
4
+ export const WebglContextManagerContext = createContext(new WebGLContextManager());
@@ -1,8 +1,8 @@
1
- import { CntrlSdkContext } from './CntrlSdkContext';
2
- import { CustomItemRegistry } from './CustomItemRegistry';
3
- import { CustomSectionRegistry } from './CustomSectionRegistry';
4
-
5
- const customItems = new CustomItemRegistry();
6
- const customSections = new CustomSectionRegistry();
7
-
8
- export const cntrlSdkContext = new CntrlSdkContext(customItems, customSections);
1
+ import { CntrlSdkContext } from './CntrlSdkContext';
2
+ import { CustomItemRegistry } from './CustomItemRegistry';
3
+ import { CustomSectionRegistry } from './CustomSectionRegistry';
4
+
5
+ const customItems = new CustomItemRegistry();
6
+ const customSections = new CustomSectionRegistry();
7
+
8
+ export const cntrlSdkContext = new CntrlSdkContext(customItems, customSections);
@@ -1,8 +1,8 @@
1
- import { useContext } from 'react';
2
- import { CntrlContext } from './CntrlContext';
3
- import { CntrlSdkContext } from './CntrlSdkContext';
4
-
5
- export function useCntrlContext(): CntrlSdkContext {
6
- const context = useContext(CntrlContext);
7
- return context;
8
- }
1
+ import { useContext } from 'react';
2
+ import { CntrlContext } from './CntrlContext';
3
+ import { CntrlSdkContext } from './CntrlSdkContext';
4
+
5
+ export function useCntrlContext(): CntrlSdkContext {
6
+ const context = useContext(CntrlContext);
7
+ return context;
8
+ }
@@ -1 +1 @@
1
- /// <reference types="styled-jsx" />
1
+ /// <reference types="styled-jsx" />