@cntrl-site/sdk-nextjs 0.12.8 → 0.12.9

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 (14) hide show
  1. package/.idea/inspectionProfiles/Project_Default.xml +15 -0
  2. package/lib/components/Section.js +6 -1
  3. package/lib/components/items/ImageItem.js +7 -2
  4. package/lib/components/items/RectangleItem.js +0 -6
  5. package/lib/components/items/VideoItem.js +8 -3
  6. package/lib/components/useSectionColor.js +4 -2
  7. package/lib/utils/RichTextConverter/RichTextConverter.js +10 -0
  8. package/package.json +1 -1
  9. package/src/components/Section.tsx +6 -1
  10. package/src/components/items/ImageItem.tsx +7 -2
  11. package/src/components/items/RectangleItem.tsx +1 -7
  12. package/src/components/items/VideoItem.tsx +16 -10
  13. package/src/components/useSectionColor.ts +7 -3
  14. package/src/utils/RichTextConverter/RichTextConverter.tsx +10 -0
package/.idea/inspectionProfiles/Project_Default.xml ADDED
@@ -0,0 +1,15 @@
1
+ <component name="InspectionProjectProfileManager">
2
+ <profile version="1.0">
3
+ <option name="myName" value="Project Default" />
4
+ <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
5
+ <option name="myValues">
6
+ <value>
7
+ <list size="1">
8
+ <item index="0" class="java.lang.String" itemvalue="jsx" />
9
+ </list>
10
+ </value>
11
+ </option>
12
+ <option name="myCustomValuesEnabled" value="true" />
13
+ </inspection_tool>
14
+ </profile>
15
+ </component>
package/lib/components/Section.js CHANGED
@@ -35,7 +35,7 @@ const Section = ({ section, data, children }) => {
35
35
  if (SectionComponent)
36
36
  return (0, jsx_runtime_1.jsx)("div", { ref: sectionRef, children: (0, jsx_runtime_1.jsx)(SectionComponent, { data: data, children: children }) });
37
37
  return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `section-${section.id}`, id: section.name, style: {
38
- backgroundColor: backgroundColor
38
+ backgroundColor: backgroundColor.toCss()
39
39
  }, ref: sectionRef, children: children }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
40
40
  ${(0, sdk_1.getLayoutStyles)(layouts, [section.height], ([height]) => (`
41
41
  .section-${section.id} {
@@ -43,6 +43,11 @@ const Section = ({ section, data, children }) => {
43
43
  position: relative;
44
44
  }`))}
45
45
  ${getSectionVisibilityStyles()}
46
+ @supports not (color: oklch(42% 0.3 90 / 1)) {
47
+ .section-${section.id} {
48
+ background-color: ${backgroundColor.fmt('rgba')};
49
+ }
50
+ }
46
51
  ` })] }));
47
52
  };
48
53
  exports.Section = Section;
package/lib/components/items/ImageItem.js CHANGED
@@ -15,14 +15,19 @@ const ImageItem = ({ item, sectionId }) => {
15
15
  const id = (0, react_1.useId)();
16
16
  const { radius, strokeWidth, opacity, strokeColor } = (0, useFileItem_1.useFileItem)(item, sectionId);
17
17
  const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
18
- const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
18
+ const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
19
19
  return ((0, jsx_runtime_1.jsx)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: `image-wrapper-${item.id}`, style: {
20
20
  borderRadius: `${radius * 100}vw`,
21
21
  borderWidth: `${strokeWidth * 100}vw`,
22
22
  opacity: `${opacity}`,
23
- borderColor: `${borderColor}`,
23
+ borderColor: `${borderColor.toCss()}`,
24
24
  transform: `rotate(${angle}deg)`
25
25
  }, children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: item.commonParams.url }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
26
+ @supports not (color: oklch(42% 0.3 90 / 1)) {
27
+ .image-wrapper-${item.id} {
28
+ border-color: ${borderColor.fmt('rgba')};
29
+ }
30
+ }
26
31
  .image-wrapper-${item.id} {
27
32
  position: absolute;
28
33
  overflow: hidden;
package/lib/components/items/RectangleItem.js CHANGED
@@ -24,12 +24,6 @@ const RectangleItem = ({ item, sectionId }) => {
24
24
  borderColor: `${borderColor.toCss()}`,
25
25
  transform: `rotate(${angle}deg)`
26
26
  } }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
27
- @supports (color: oklch(42% 0.3 90 / 1)) {
28
- .rectangle-${item.id} {
29
- background-color: ${backgroundColor.fmt('oklch')};
30
- border-color: ${borderColor.fmt('oklch')};
31
- }
32
- }
33
27
  @supports not (color: oklch(42% 0.3 90 / 1)) {
34
28
  .rectangle-${item.id} {
35
29
  background-color: ${backgroundColor.fmt('rgba')};
package/lib/components/items/VideoItem.js CHANGED
@@ -15,15 +15,20 @@ const VideoItem = ({ item, sectionId }) => {
15
15
  const id = (0, react_1.useId)();
16
16
  const { radius, strokeWidth, strokeColor, opacity } = (0, useFileItem_1.useFileItem)(item, sectionId);
17
17
  const angle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
18
- const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
18
+ const borderColor = (0, react_1.useMemo)(() => sdk_1.CntrlColor.parse(strokeColor), [strokeColor]);
19
19
  return ((0, jsx_runtime_1.jsxs)(LinkWrapper_1.LinkWrapper, { url: item.link?.url, children: [(0, jsx_runtime_1.jsx)("div", { className: `video-wrapper-${item.id}`, style: {
20
20
  borderRadius: `${radius * 100}vw`,
21
21
  borderWidth: `${strokeWidth * 100}vw`,
22
22
  opacity: `${opacity}`,
23
- borderColor: `${borderColor}`,
23
+ borderColor: `${borderColor.toCss()}`,
24
24
  transform: `rotate(${angle}deg)`
25
25
  }, children: (0, jsx_runtime_1.jsx)("video", { autoPlay: true, muted: true, loop: true, playsInline: true, className: "video", children: (0, jsx_runtime_1.jsx)("source", { src: item.commonParams.url }) }) }), (0, jsx_runtime_1.jsx)(style_1.default, { id: id, children: `
26
- .video-wrapper-${item.id} {
26
+ @supports not (color: oklch(42% 0.3 90 / 1)) {
27
+ .video-wrapper-${item.id} {
28
+ border-color: ${borderColor.fmt('rgba')};
29
+ }
30
+ }
31
+ .video-wrapper-${item.id} {
27
32
  position: absolute;
28
33
  overflow: hidden;
29
34
  width: 100%;
package/lib/components/useSectionColor.js CHANGED
@@ -4,12 +4,14 @@ exports.useSectionColor = void 0;
4
4
  const useCurrentLayout_1 = require("../common/useCurrentLayout");
5
5
  const react_1 = require("react");
6
6
  const sdk_1 = require("@cntrl-site/sdk");
7
- const DEFAULT_COLOR = 'transparent';
7
+ const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
8
8
  const useSectionColor = (colorData) => {
9
9
  const layoutId = (0, useCurrentLayout_1.useCurrentLayout)();
10
10
  return (0, react_1.useMemo)(() => {
11
11
  const layoutColor = colorData[layoutId];
12
- return !layoutColor ? DEFAULT_COLOR : sdk_1.CntrlColor.parse(layoutColor).toCss();
12
+ return sdk_1.CntrlColor.parse(!layoutColor
13
+ ? DEFAULT_COLOR
14
+ : layoutColor);
13
15
  }, []);
14
16
  };
15
17
  exports.useSectionColor = useSectionColor;
package/lib/utils/RichTextConverter/RichTextConverter.js CHANGED
@@ -100,6 +100,7 @@ class RichTextConverter {
100
100
  continue;
101
101
  for (const styleGroup of entitiesGroup.stylesGroup) {
102
102
  const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
103
+ const color = styleGroup.styles.find(s => s.name === 'COLOR');
103
104
  if (lineHeight?.value) {
104
105
  currentLineHeight[item.layout] = lineHeight.value;
105
106
  }
@@ -108,6 +109,15 @@ class RichTextConverter {
108
109
  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
109
110
  }
110
111
  `);
112
+ if (color) {
113
+ styleRules[item.layout].push(`
114
+ @supports not (color: oklch(42% 0.3 90 / 1)) {
115
+ .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
116
+ color: ${sdk_1.CntrlColor.parse(getResolvedValue(color.value, 'COLOR')).fmt('rgba')};
117
+ }
118
+ }
119
+ `);
120
+ }
111
121
  }
112
122
  }
113
123
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cntrl-site/sdk-nextjs",
3
- "version": "0.12.8",
3
+ "version": "0.12.9",
4
4
  "description": "SDK for Next.js",
5
5
  "main": "lib/index.js",
6
6
  "types": "src/index.ts",
package/src/components/Section.tsx CHANGED
@@ -49,7 +49,7 @@ export const Section: FC<Props> = ({ section, data, children }) => {
49
49
  className={`section-${section.id}`}
50
50
  id={section.name}
51
51
  style={{
52
- backgroundColor: backgroundColor
52
+ backgroundColor: backgroundColor.toCss()
53
53
  }}
54
54
  ref={sectionRef}
55
55
  >
@@ -65,6 +65,11 @@ export const Section: FC<Props> = ({ section, data, children }) => {
65
65
  ))
66
66
  }
67
67
  ${getSectionVisibilityStyles()}
68
+ @supports not (color: oklch(42% 0.3 90 / 1)) {
69
+ .section-${section.id} {
70
+ background-color: ${backgroundColor.fmt('rgba')};
71
+ }
72
+ }
68
73
  `}</JSXStyle>
69
74
  </>
70
75
  );
package/src/components/items/ImageItem.tsx CHANGED
@@ -10,7 +10,7 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
10
10
  const id = useId();
11
11
  const { radius, strokeWidth, opacity, strokeColor } = useFileItem(item, sectionId);
12
12
  const angle = useItemAngle(item, sectionId);
13
- const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
13
+ const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
14
14
  return (
15
15
  <LinkWrapper url={item.link?.url}>
16
16
  <>
@@ -19,13 +19,18 @@ export const ImageItem: FC<ItemProps<TImageItem>> = ({ item, sectionId }) => {
19
19
  borderRadius: `${radius * 100}vw`,
20
20
  borderWidth: `${strokeWidth * 100}vw`,
21
21
  opacity: `${opacity}`,
22
- borderColor: `${borderColor}`,
22
+ borderColor: `${borderColor.toCss()}`,
23
23
  transform: `rotate(${angle}deg)`
24
24
  }}
25
25
  >
26
26
  <img className="image" src={item.commonParams.url} />
27
27
  </div>
28
28
  <JSXStyle id={id}>{`
29
+ @supports not (color: oklch(42% 0.3 90 / 1)) {
30
+ .image-wrapper-${item.id} {
31
+ border-color: ${borderColor.fmt('rgba')};
32
+ }
33
+ }
29
34
  .image-wrapper-${item.id} {
30
35
  position: absolute;
31
36
  overflow: hidden;
package/src/components/items/RectangleItem.tsx CHANGED
@@ -16,7 +16,7 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
16
16
  return (
17
17
  <LinkWrapper url={item.link?.url}>
18
18
  <>
19
- <div className={`rectangle-${item.id}`}
19
+ <div className={`rectangle-${item.id}`}
20
20
  style={{
21
21
  backgroundColor: `${backgroundColor.toCss()}`,
22
22
  borderRadius: `${radius * 100}vw`,
@@ -26,12 +26,6 @@ export const RectangleItem: FC<ItemProps<TRectangleItem>> = ({ item, sectionId }
26
26
  }}
27
27
  />
28
28
  <JSXStyle id={id}>{`
29
- @supports (color: oklch(42% 0.3 90 / 1)) {
30
- .rectangle-${item.id} {
31
- background-color: ${backgroundColor.fmt('oklch')};
32
- border-color: ${borderColor.fmt('oklch')};
33
- }
34
- }
35
29
  @supports not (color: oklch(42% 0.3 90 / 1)) {
36
30
  .rectangle-${item.id} {
37
31
  background-color: ${backgroundColor.fmt('rgba')};
package/src/components/items/VideoItem.tsx CHANGED
@@ -10,24 +10,30 @@ export const VideoItem: FC<ItemProps<TVideoItem>> = ({ item, sectionId }) => {
10
10
  const id = useId();
11
11
  const { radius, strokeWidth, strokeColor, opacity } = useFileItem(item, sectionId);
12
12
  const angle = useItemAngle(item, sectionId);
13
- const borderColor = useMemo(() => CntrlColor.parse(strokeColor).toCss(), [strokeColor]);
13
+ const borderColor = useMemo(() => CntrlColor.parse(strokeColor), [strokeColor]);
14
14
  return (
15
15
  <LinkWrapper url={item.link?.url}>
16
- <div className={`video-wrapper-${item.id}`}
17
- style={{
18
- borderRadius: `${radius * 100}vw`,
19
- borderWidth: `${strokeWidth * 100}vw`,
20
- opacity: `${opacity}`,
21
- borderColor: `${borderColor}`,
22
- transform: `rotate(${angle}deg)`
23
- }}
16
+ <div
17
+ className={`video-wrapper-${item.id}`}
18
+ style={{
19
+ borderRadius: `${radius * 100}vw`,
20
+ borderWidth: `${strokeWidth * 100}vw`,
21
+ opacity: `${opacity}`,
22
+ borderColor: `${borderColor.toCss()}`,
23
+ transform: `rotate(${angle}deg)`
24
+ }}
24
25
  >
25
26
  <video autoPlay muted loop playsInline className="video">
26
27
  <source src={item.commonParams.url} />
27
28
  </video>
28
29
  </div>
29
30
  <JSXStyle id={id}>{`
30
- .video-wrapper-${item.id} {
31
+ @supports not (color: oklch(42% 0.3 90 / 1)) {
32
+ .video-wrapper-${item.id} {
33
+ border-color: ${borderColor.fmt('rgba')};
34
+ }
35
+ }
36
+ .video-wrapper-${item.id} {
31
37
  position: absolute;
32
38
  overflow: hidden;
33
39
  width: 100%;
package/src/components/useSectionColor.ts CHANGED
@@ -3,12 +3,16 @@ import { useMemo } from 'react';
3
3
  import { CntrlColor } from '@cntrl-site/sdk';
4
4
 
5
5
  type LayoutIdentifier = string;
6
- const DEFAULT_COLOR = 'transparent';
6
+ const DEFAULT_COLOR = 'rgba(0, 0, 0, 0)';
7
7
 
8
- export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): string => {
8
+ export const useSectionColor = (colorData: Record<LayoutIdentifier, string | null>): CntrlColor => {
9
9
  const layoutId = useCurrentLayout();
10
10
  return useMemo(() => {
11
11
  const layoutColor = colorData[layoutId];
12
- return !layoutColor ? DEFAULT_COLOR : CntrlColor.parse(layoutColor).toCss();
12
+ return CntrlColor.parse(
13
+ !layoutColor
14
+ ? DEFAULT_COLOR
15
+ : layoutColor
16
+ );
13
17
  }, []);
14
18
  };
package/src/utils/RichTextConverter/RichTextConverter.tsx CHANGED
@@ -134,6 +134,7 @@ export class RichTextConverter {
134
134
  if (!entitiesGroup.stylesGroup) continue;
135
135
  for (const styleGroup of entitiesGroup.stylesGroup) {
136
136
  const lineHeight = styleGroup.styles.find(s => s.name === 'LINEHEIGHT');
137
+ const color = styleGroup.styles.find(s => s.name === 'COLOR');
137
138
  if (lineHeight?.value) {
138
139
  currentLineHeight[item.layout] = lineHeight.value;
139
140
  }
@@ -142,6 +143,15 @@ export class RichTextConverter {
142
143
  ${styleGroup.styles.map(s => RichTextConverter.fromDraftToInline(s)).join('\n')}
143
144
  }
144
145
  `);
146
+ if (color) {
147
+ styleRules[item.layout].push(`
148
+ @supports not (color: oklch(42% 0.3 90 / 1)) {
149
+ .${blockClass} .s-${styleGroup.start}-${styleGroup.end} {
150
+ color: ${CntrlColor.parse(getResolvedValue(color.value, 'COLOR')!).fmt('rgba')};
151
+ }
152
+ }
153
+ `);
154
+ }
145
155
  }
146
156
  }
147
157
  }