@cntrl-site/sdk-nextjs 1.9.0 → 1.9.2

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