@cntrl-site/sdk-nextjs 1.9.29 → 1.9.30

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/LICENSE +21 -21
  2. package/README.md +4 -4
  3. package/TODO.md +1 -1
  4. package/cntrl-site-sdk-nextjs-1.9.28-0.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 +40 -40
  19. package/lib/components/items/FileItem/VideoItem.js +64 -64
  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 +27 -27
  23. package/lib/components/items/RichTextItem/RichTextItem.js +22 -22
  24. package/lib/interactions/InteractionsRegistry.js +2 -1
  25. package/lib/utils/RichTextConverter/RichTextConverter.js +21 -21
  26. package/package.json +60 -60
  27. package/src/ItemGeometry/CSSPropertyNameMap.ts +37 -37
  28. package/src/ItemGeometry/GenericGeometryController.ts +59 -59
  29. package/src/ItemGeometry/ItemGeometryContext.ts +4 -4
  30. package/src/ItemGeometry/ItemGeometryController.ts +22 -22
  31. package/src/ItemGeometry/ItemGeometryService.ts +34 -34
  32. package/src/ItemGeometry/RichTextGeometryController.ts +166 -166
  33. package/src/ItemGeometry/useItemGeometry.ts +25 -25
  34. package/src/common/useCurrentLayout.ts +52 -52
  35. package/src/common/useExemplary.ts +9 -9
  36. package/src/common/useItemFXData.ts +47 -47
  37. package/src/common/useKeyframeValue.ts +85 -85
  38. package/src/common/useRegisterResize.ts +16 -16
  39. package/src/components/Article.tsx +73 -73
  40. package/src/components/ArticleWrapper.tsx +21 -21
  41. package/src/components/Head.tsx +56 -56
  42. package/src/components/LayoutStyle.tsx +21 -21
  43. package/src/components/Page.tsx +38 -38
  44. package/src/components/ScrollPlaybackVideo.tsx +56 -56
  45. package/src/components/Section/Section.tsx +127 -127
  46. package/src/components/Section/SectionImage.tsx +48 -48
  47. package/src/components/Section/SectionVideo.tsx +144 -144
  48. package/src/components/Section/useSectionColor.ts +19 -19
  49. package/src/components/Section/useSectionHeightMap.ts +19 -19
  50. package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx +147 -147
  51. package/src/components/items/CodeEmbedItem/useCodeEmbedItem.ts +36 -36
  52. package/src/components/items/ComponentItem/ComponentItem.tsx +70 -70
  53. package/src/components/items/ComponentItem/useComponentItem.ts +35 -35
  54. package/src/components/items/CompoundItem/CompoundChild.tsx +150 -150
  55. package/src/components/items/CompoundItem/CompoundItem.tsx +87 -87
  56. package/src/components/items/CompoundItem/useCompoundItem.ts +21 -21
  57. package/src/components/items/CustomItem/CustomItem.tsx +50 -50
  58. package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx +216 -216
  59. package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx +200 -200
  60. package/src/components/items/EmbedVideoItem/useEmbedVideoItem.ts +46 -46
  61. package/src/components/items/FileItem/ImageItem.tsx +165 -165
  62. package/src/components/items/FileItem/VideoItem.tsx +282 -282
  63. package/src/components/items/FileItem/useFileItem.ts +81 -81
  64. package/src/components/items/GroupItem/GroupItem.tsx +98 -98
  65. package/src/components/items/GroupItem/useGroupItem.ts +34 -34
  66. package/src/components/items/Item.tsx +262 -262
  67. package/src/components/items/LinkWrapper.tsx +39 -39
  68. package/src/components/items/RectangleItem/RectangleItem.tsx +184 -184
  69. package/src/components/items/RectangleItem/useRectangleItem.ts +89 -89
  70. package/src/components/items/RichTextItem/RichTextItem.tsx +112 -112
  71. package/src/components/items/RichTextItem/useRichTextItem.ts +12 -12
  72. package/src/components/items/RichTextWrapper.tsx +15 -15
  73. package/src/components/items/itemsMap.ts +28 -28
  74. package/src/components/items/useDraggable.ts +252 -252
  75. package/src/components/items/useItemAngle.ts +13 -13
  76. package/src/components/items/useItemArea.ts +35 -35
  77. package/src/components/items/useItemPointerEvents.ts +23 -23
  78. package/src/components/items/useItemScale.ts +17 -17
  79. package/src/components/items/useItemTriggers.ts +15 -15
  80. package/src/components/items/useRichTextItemValues.ts +66 -66
  81. package/src/components/items/useSizing.ts +25 -25
  82. package/src/components/items/useStickyItemTop.ts +21 -21
  83. package/src/components/useLayoutContext.ts +7 -7
  84. package/src/index.ts +24 -24
  85. package/src/interactions/InteractionsRegistry.ts +508 -507
  86. package/src/interactions/ItemInteractionCtrl.ts +78 -78
  87. package/src/interactions/getTransition.ts +27 -27
  88. package/src/interactions/types.ts +36 -36
  89. package/src/interactions/useItemInteractionCtrl.ts +18 -18
  90. package/src/provider/ArticleRectContext.ts +4 -4
  91. package/src/provider/CntrlContext.ts +5 -5
  92. package/src/provider/CntrlProvider.tsx +11 -11
  93. package/src/provider/CntrlSdkContext.ts +84 -84
  94. package/src/provider/CustomItemRegistry.ts +14 -14
  95. package/src/provider/CustomItemTypes.ts +3 -3
  96. package/src/provider/CustomSectionRegistry.ts +25 -25
  97. package/src/provider/InteractionsContext.tsx +61 -61
  98. package/src/provider/Keyframes.ts +11 -11
  99. package/src/provider/KeyframesContext.ts +5 -5
  100. package/src/provider/LayoutContext.ts +3 -3
  101. package/src/provider/WebGLContextManagerContext.tsx +4 -4
  102. package/src/provider/defaultContext.ts +8 -8
  103. package/src/provider/useCntrlContext.ts +8 -8
  104. package/src/styled-jsx.d.ts +1 -1
  105. package/src/utils/Animator/Animator.ts +570 -570
  106. package/src/utils/ArticleRectManager/ArticleRectObserver.ts +93 -93
  107. package/src/utils/ArticleRectManager/useArticleRectObserver.ts +17 -17
  108. package/src/utils/ArticleRectManager/useSectionRegistry.ts +11 -11
  109. package/src/utils/CSSNumeric.ts +19 -19
  110. package/src/utils/EventEmitter.ts +41 -41
  111. package/src/utils/RichTextConverter/RichTextConverter.tsx +342 -342
  112. package/src/utils/ScaleAnchorMap.ts +13 -13
  113. package/src/utils/StickyManager/StickyManager.ts +23 -23
  114. package/src/utils/Youtube/YouTubeIframeApiLoader.ts +58 -58
  115. package/src/utils/Youtube/YoutubeIframeApi.ts +101 -101
  116. package/src/utils/Youtube/useYouTubeIframeApi.ts +12 -12
  117. package/src/utils/areFillsVisible/areFillsVisible.test.ts +63 -63
  118. package/src/utils/areFillsVisible/areFillsVisible.ts +37 -37
  119. package/src/utils/binSearchInsertAt.ts +33 -33
  120. package/src/utils/castObject.ts +10 -10
  121. package/src/utils/checkOverflowClipSupport.ts +13 -13
  122. package/src/utils/domDfs.ts +11 -11
  123. package/src/utils/effects/useImageFx.ts +156 -156
  124. package/src/utils/effects/useVideoFx.ts +158 -158
  125. package/src/utils/getAnchoredItemTop.ts +12 -12
  126. package/src/utils/getCompoundBoundaryStyles.ts +60 -60
  127. package/src/utils/getFill.ts +46 -46
  128. package/src/utils/getFontFamilyValue.ts +3 -3
  129. package/src/utils/getInvertedRanges.ts +43 -43
  130. package/src/utils/getItemTopStyle.ts +14 -14
  131. package/src/utils/getStyleFromItemStateAndParams.ts +8 -8
  132. package/src/utils/getValidYoutubeUrl.ts +29 -29
  133. package/src/utils/isItemType.ts +5 -5
  134. package/src/utils/rangeMap.ts +13 -13
  135. package/src/utils/useElementRect.ts +23 -23
  136. package/.idea/codeStyles/codeStyleConfig.xml +0 -5
  137. package/.idea/modules.xml +0 -8
  138. package/.idea/sdk-nextjs.iml +0 -12
  139. package/.idea/vcs.xml +0 -6
@@ -1,14 +1,14 @@
1
- import { AnchorSide } from '@cntrl-site/sdk';
2
-
3
- export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
4
- const defaultValue = `${top * 100}vw`;
5
- if (!anchorSide) return defaultValue;
6
- switch (anchorSide) {
7
- case AnchorSide.Top:
8
- return defaultValue;
9
- case AnchorSide.Center:
10
- return `calc(50% + ${top * 100}vw)`;
11
- case AnchorSide.Bottom:
12
- return `calc(100% + ${top * 100}vw)`;
13
- }
14
- }
1
+ import { AnchorSide } from '@cntrl-site/sdk';
2
+
3
+ export function getItemTopStyle(top: number, anchorSide?: AnchorSide) {
4
+ const defaultValue = `${top * 100}vw`;
5
+ if (!anchorSide) return defaultValue;
6
+ switch (anchorSide) {
7
+ case AnchorSide.Top:
8
+ return defaultValue;
9
+ case AnchorSide.Center:
10
+ return `calc(50% + ${top * 100}vw)`;
11
+ case AnchorSide.Bottom:
12
+ return `calc(100% + ${top * 100}vw)`;
13
+ }
14
+ }
@@ -1,8 +1,8 @@
1
- export function getStyleFromItemStateAndParams<T>(
2
- stateValue: T | undefined,
3
- paramsValue: T | undefined
4
- ): T | undefined {
5
- return (stateValue as T) !== undefined
6
- ? stateValue as T
7
- : paramsValue;
8
- }
1
+ export function getStyleFromItemStateAndParams<T>(
2
+ stateValue: T | undefined,
3
+ paramsValue: T | undefined
4
+ ): T | undefined {
5
+ return (stateValue as T) !== undefined
6
+ ? stateValue as T
7
+ : paramsValue;
8
+ }
@@ -1,29 +1,29 @@
1
- enum Allowed {
2
- Tiny = 'youtu.be',
3
- Full = 'www.youtube.com'
4
- }
5
-
6
- export function getYoutubeId({ hostname, pathname, search }: URL): string {
7
- if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
8
- throw new Error(`Cannot get valid YouTube ID from "${hostname}" - address is not whitelisted`);
9
- }
10
- switch (hostname) {
11
- case Allowed.Tiny:
12
- return pathname.replace('/', '');
13
- case Allowed.Full:
14
- if (pathname.startsWith('/shorts/')) {
15
- const shortsId = pathname.split('/shorts/')[1];
16
- if (!shortsId) {
17
- throw new Error('Cannot get valid YouTube Shorts ID from the pathname.');
18
- }
19
- return shortsId;
20
- } else {
21
- const searchParams = new URLSearchParams(search);
22
- const id = searchParams.get('v');
23
- if (!id) {
24
- throw new Error('Cannot get valid YouTube ID from search params.');
25
- }
26
- return id;
27
- }
28
- }
29
- }
1
+ enum Allowed {
2
+ Tiny = 'youtu.be',
3
+ Full = 'www.youtube.com'
4
+ }
5
+
6
+ export function getYoutubeId({ hostname, pathname, search }: URL): string {
7
+ if (hostname !== Allowed.Full && hostname !== Allowed.Tiny) {
8
+ throw new Error(`Cannot get valid YouTube ID from "${hostname}" - address is not whitelisted`);
9
+ }
10
+ switch (hostname) {
11
+ case Allowed.Tiny:
12
+ return pathname.replace('/', '');
13
+ case Allowed.Full:
14
+ if (pathname.startsWith('/shorts/')) {
15
+ const shortsId = pathname.split('/shorts/')[1];
16
+ if (!shortsId) {
17
+ throw new Error('Cannot get valid YouTube Shorts ID from the pathname.');
18
+ }
19
+ return shortsId;
20
+ } else {
21
+ const searchParams = new URLSearchParams(search);
22
+ const id = searchParams.get('v');
23
+ if (!id) {
24
+ throw new Error('Cannot get valid YouTube ID from search params.');
25
+ }
26
+ return id;
27
+ }
28
+ }
29
+ }
@@ -1,5 +1,5 @@
1
- import { ArticleItemType, ItemAny, Item as TItem } from '@cntrl-site/sdk';
2
-
3
- export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
4
- return item.type === itemType;
5
- }
1
+ import { ArticleItemType, ItemAny, Item as TItem } from '@cntrl-site/sdk';
2
+
3
+ export function isItemType<T extends ArticleItemType>(item: ItemAny, itemType: T): item is TItem<T> {
4
+ return item.type === itemType;
5
+ }
@@ -1,13 +1,13 @@
1
- export function rangeMap(
2
- n: number,
3
- start1: number,
4
- stop1: number,
5
- start2: number,
6
- stop2: number,
7
- withinBounds: boolean = false
8
- ): number {
9
- const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
10
- if (withinBounds && n < start1) return start2;
11
- if (withinBounds && n > stop1) return stop2;
12
- return mapped;
13
- }
1
+ export function rangeMap(
2
+ n: number,
3
+ start1: number,
4
+ stop1: number,
5
+ start2: number,
6
+ stop2: number,
7
+ withinBounds: boolean = false
8
+ ): number {
9
+ const mapped = (n - start1) / (stop1 - start1) * (stop2 - start2) + start2;
10
+ if (withinBounds && n < start1) return start2;
11
+ if (withinBounds && n > stop1) return stop2;
12
+ return mapped;
13
+ }
@@ -1,23 +1,23 @@
1
- import { useEffect, useState } from 'react';
2
-
3
- export function useElementRect(element: HTMLElement | null): DOMRect | undefined {
4
- const [rect, setRect] = useState<DOMRect | undefined>(() => element?.getBoundingClientRect());
5
-
6
- useEffect(() => {
7
- if (!element) return;
8
- const observer = new ResizeObserver(entries => {
9
- const el = entries.find(entry => entry.target === element);
10
- if (!el) {
11
- throw new Error('Element is not found in observed entries');
12
- }
13
- setRect(el.target.getBoundingClientRect());
14
- });
15
- observer.observe(element);
16
- return () => {
17
- observer.unobserve(element);
18
- observer.disconnect();
19
- };
20
- }, [element]);
21
-
22
- return rect;
23
- }
1
+ import { useEffect, useState } from 'react';
2
+
3
+ export function useElementRect(element: HTMLElement | null): DOMRect | undefined {
4
+ const [rect, setRect] = useState<DOMRect | undefined>(() => element?.getBoundingClientRect());
5
+
6
+ useEffect(() => {
7
+ if (!element) return;
8
+ const observer = new ResizeObserver(entries => {
9
+ const el = entries.find(entry => entry.target === element);
10
+ if (!el) {
11
+ throw new Error('Element is not found in observed entries');
12
+ }
13
+ setRect(el.target.getBoundingClientRect());
14
+ });
15
+ observer.observe(element);
16
+ return () => {
17
+ observer.unobserve(element);
18
+ observer.disconnect();
19
+ };
20
+ }, [element]);
21
+
22
+ return rect;
23
+ }
@@ -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>