@cntrl-site/sdk-nextjs 1.8.11 → 1.8.13

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 (124) 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.12.tgz +0 -0
  5. package/cntrl-site-sdk-nextjs-1.8.13.tgz +0 -0
  6. package/eslint.config.mjs +35 -35
  7. package/jest.config.js +6 -6
  8. package/lib/common/useItemFXData.js +7 -7
  9. package/lib/common/useRegisterResize.js +2 -2
  10. package/lib/components/Article.js +5 -5
  11. package/lib/components/LayoutStyle.js +4 -4
  12. package/lib/components/Section/Section.js +43 -43
  13. package/lib/components/items/CodeEmbedItem/CodeEmbedItem.js +35 -35
  14. package/lib/components/items/ComponentItem/ComponentItem.js +16 -14
  15. package/lib/components/items/ComponentItem/useComponentItem.js +8 -1
  16. package/lib/components/items/CompoundItem/CompoundChild.js +20 -20
  17. package/lib/components/items/CompoundItem/CompoundItem.js +14 -14
  18. package/lib/components/items/CustomItem/CustomItem.js +9 -9
  19. package/lib/components/items/EmbedVideoItem/VimeoEmbed.js +23 -23
  20. package/lib/components/items/EmbedVideoItem/YoutubeEmbed.js +26 -26
  21. package/lib/components/items/FileItem/ImageItem.js +38 -38
  22. package/lib/components/items/FileItem/VideoItem.js +45 -45
  23. package/lib/components/items/GroupItem/GroupItem.js +13 -13
  24. package/lib/components/items/Item.js +30 -30
  25. package/lib/components/items/RectangleItem/RectangleItem.js +20 -20
  26. package/lib/components/items/RichTextItem/RichTextItem.js +21 -21
  27. package/lib/utils/RichTextConverter/RichTextConverter.js +21 -21
  28. package/package.json +57 -58
  29. package/src/common/useCurrentLayout.ts +52 -52
  30. package/src/common/useExemplary.ts +9 -9
  31. package/src/common/useItemFXData.ts +47 -47
  32. package/src/common/useKeyframeValue.ts +85 -85
  33. package/src/common/useRegisterResize.ts +16 -17
  34. package/src/components/Article.tsx +66 -66
  35. package/src/components/ArticleWrapper.tsx +21 -21
  36. package/src/components/Head.tsx +56 -56
  37. package/src/components/LayoutStyle.tsx +21 -21
  38. package/src/components/Page.tsx +33 -33
  39. package/src/components/ScrollPlaybackVideo.tsx +56 -56
  40. package/src/components/Section/Section.tsx +164 -164
  41. package/src/components/Section/useSectionColor.ts +19 -19
  42. package/src/components/Section/useSectionHeightMap.ts +19 -19
  43. package/src/components/items/CodeEmbedItem/CodeEmbedItem.tsx +137 -137
  44. package/src/components/items/CodeEmbedItem/useCodeEmbedItem.ts +36 -36
  45. package/src/components/items/ComponentItem/ComponentItem.tsx +65 -62
  46. package/src/components/items/ComponentItem/useComponentItem.ts +35 -23
  47. package/src/components/items/CompoundItem/CompoundChild.tsx +150 -150
  48. package/src/components/items/CompoundItem/CompoundItem.tsx +70 -70
  49. package/src/components/items/CompoundItem/useCompoundItem.ts +21 -21
  50. package/src/components/items/CustomItem/CustomItem.tsx +48 -48
  51. package/src/components/items/EmbedVideoItem/VimeoEmbed.tsx +202 -202
  52. package/src/components/items/EmbedVideoItem/YoutubeEmbed.tsx +187 -187
  53. package/src/components/items/EmbedVideoItem/useEmbedVideoItem.ts +46 -46
  54. package/src/components/items/FileItem/ImageItem.tsx +156 -156
  55. package/src/components/items/FileItem/VideoItem.tsx +185 -185
  56. package/src/components/items/FileItem/useFileItem.ts +73 -73
  57. package/src/components/items/GroupItem/GroupItem.tsx +79 -79
  58. package/src/components/items/GroupItem/useGroupItem.ts +34 -34
  59. package/src/components/items/Item.tsx +251 -251
  60. package/src/components/items/LinkWrapper.tsx +39 -39
  61. package/src/components/items/RectangleItem/RectangleItem.tsx +95 -95
  62. package/src/components/items/RectangleItem/useRectangleItem.ts +82 -82
  63. package/src/components/items/RichTextItem/RichTextItem.tsx +105 -105
  64. package/src/components/items/RichTextItem/useRichTextItem.ts +12 -12
  65. package/src/components/items/RichTextWrapper.tsx +15 -15
  66. package/src/components/items/itemsMap.ts +28 -28
  67. package/src/components/items/useDraggable.ts +252 -252
  68. package/src/components/items/useItemAngle.ts +13 -13
  69. package/src/components/items/useItemArea.ts +35 -35
  70. package/src/components/items/useItemPointerEvents.ts +23 -23
  71. package/src/components/items/useItemScale.ts +17 -17
  72. package/src/components/items/useItemTriggers.ts +15 -15
  73. package/src/components/items/useRichTextItemValues.ts +65 -65
  74. package/src/components/items/useSizing.ts +25 -25
  75. package/src/components/items/useStickyItemTop.ts +21 -21
  76. package/src/components/useLayoutContext.ts +7 -7
  77. package/src/index.ts +24 -24
  78. package/src/interactions/CSSPropertyNameMap.ts +38 -38
  79. package/src/interactions/InteractionsRegistry.ts +283 -283
  80. package/src/interactions/ItemInteractionCtrl.ts +77 -77
  81. package/src/interactions/getTransition.ts +27 -27
  82. package/src/interactions/types.ts +36 -36
  83. package/src/interactions/useItemInteractionCtrl.ts +18 -18
  84. package/src/provider/ArticleRectContext.ts +4 -4
  85. package/src/provider/CntrlContext.ts +5 -5
  86. package/src/provider/CntrlProvider.tsx +11 -11
  87. package/src/provider/CntrlSdkContext.ts +83 -83
  88. package/src/provider/CustomItemRegistry.ts +14 -14
  89. package/src/provider/CustomItemTypes.ts +3 -3
  90. package/src/provider/CustomSectionRegistry.ts +25 -25
  91. package/src/provider/InteractionsContext.old.tsx +66 -66
  92. package/src/provider/InteractionsContext.test.tsx +97 -97
  93. package/src/provider/InteractionsContext.tsx +28 -28
  94. package/src/provider/Keyframes.ts +11 -11
  95. package/src/provider/KeyframesContext.ts +5 -5
  96. package/src/provider/LayoutContext.ts +3 -3
  97. package/src/provider/defaultContext.ts +8 -8
  98. package/src/provider/useCntrlContext.ts +8 -8
  99. package/src/styled-jsx.d.ts +1 -1
  100. package/src/utils/Animator/Animator.ts +371 -371
  101. package/src/utils/ArticleRectManager/ArticleRectObserver.ts +93 -93
  102. package/src/utils/ArticleRectManager/useArticleRectObserver.ts +17 -17
  103. package/src/utils/ArticleRectManager/useSectionRegistry.ts +11 -11
  104. package/src/utils/EventEmitter.ts +41 -41
  105. package/src/utils/RichTextConverter/RichTextConverter.tsx +326 -326
  106. package/src/utils/ScaleAnchorMap.ts +13 -13
  107. package/src/utils/StickyManager/StickyManager.ts +23 -23
  108. package/src/utils/Youtube/YouTubeIframeApiLoader.ts +58 -58
  109. package/src/utils/Youtube/YoutubeIframeApi.ts +101 -101
  110. package/src/utils/Youtube/useYouTubeIframeApi.ts +12 -12
  111. package/src/utils/binSearchInsertAt.ts +33 -33
  112. package/src/utils/castObject.ts +10 -10
  113. package/src/utils/effects/useImageFx.ts +113 -113
  114. package/src/utils/effects/useVideoFx.ts +116 -116
  115. package/src/utils/getAnchoredItemTop.ts +12 -12
  116. package/src/utils/getCompoundBoundaryStyles.ts +60 -60
  117. package/src/utils/getFontFamilyValue.ts +3 -3
  118. package/src/utils/getInvertedRanges.ts +43 -43
  119. package/src/utils/getItemTopStyle.ts +14 -14
  120. package/src/utils/getStyleFromItemStateAndParams.ts +8 -8
  121. package/src/utils/getValidYoutubeUrl.ts +29 -29
  122. package/src/utils/isItemType.ts +5 -5
  123. package/src/utils/rangeMap.ts +13 -13
  124. package/src/utils/useElementRect.ts +23 -23
@@ -1,43 +1,43 @@
1
- interface Range {
2
- start: number;
3
- end: number;
4
- }
5
-
6
- /**
7
- * @param length
8
- * @param ranges - SORTED array of ranges [start, end)
9
- */
10
-
11
- export function getInvertedRanges(length: number, ranges: Range[]): Range[] {
12
- if (ranges.length === 0) {
13
- return [{
14
- start: 0,
15
- end: length
16
- }];
17
- }
18
- const inverted: Range[] = [];
19
- if (ranges[0].start > 0) {
20
- inverted.push({
21
- start: 0,
22
- end: ranges[0].start
23
- });
24
- }
25
- for (let i = 0; i < ranges.length - 1; i += 1) {
26
- const left = ranges[i];
27
- const right = ranges[i + 1];
28
- if (right.start - left.end > 0) {
29
- inverted.push({
30
- start: left.end,
31
- end: right.start
32
- });
33
- }
34
- }
35
- const lastRange = ranges[ranges.length - 1];
36
- if (lastRange.end < length) {
37
- inverted.push({
38
- start: lastRange.end,
39
- end: length
40
- });
41
- }
42
- return inverted;
43
- }
1
+ interface Range {
2
+ start: number;
3
+ end: number;
4
+ }
5
+
6
+ /**
7
+ * @param length
8
+ * @param ranges - SORTED array of ranges [start, end)
9
+ */
10
+
11
+ export function getInvertedRanges(length: number, ranges: Range[]): Range[] {
12
+ if (ranges.length === 0) {
13
+ return [{
14
+ start: 0,
15
+ end: length
16
+ }];
17
+ }
18
+ const inverted: Range[] = [];
19
+ if (ranges[0].start > 0) {
20
+ inverted.push({
21
+ start: 0,
22
+ end: ranges[0].start
23
+ });
24
+ }
25
+ for (let i = 0; i < ranges.length - 1; i += 1) {
26
+ const left = ranges[i];
27
+ const right = ranges[i + 1];
28
+ if (right.start - left.end > 0) {
29
+ inverted.push({
30
+ start: left.end,
31
+ end: right.start
32
+ });
33
+ }
34
+ }
35
+ const lastRange = ranges[ranges.length - 1];
36
+ if (lastRange.end < length) {
37
+ inverted.push({
38
+ start: lastRange.end,
39
+ end: length
40
+ });
41
+ }
42
+ return inverted;
43
+ }
@@ -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 extends string | number>(
2
- stateValue: string | number | 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 extends string | number>(
2
+ stateValue: string | number | 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
+ }