@contentful/experiences-components-react 3.8.0-beta.0 → 3.8.0-prerelease-20250922T2329-e132272.0
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.
- package/dist/index.js +63 -0
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -602,6 +602,7 @@ const builtInStyles = {
|
|
|
602
602
|
},
|
|
603
603
|
type: 'Text',
|
|
604
604
|
group: 'style',
|
|
605
|
+
description: 'The vertical alignment of the section',
|
|
605
606
|
defaultValue: 'center',
|
|
606
607
|
displayName: 'Vertical alignment',
|
|
607
608
|
},
|
|
@@ -628,6 +629,7 @@ const builtInStyles = {
|
|
|
628
629
|
},
|
|
629
630
|
type: 'Text',
|
|
630
631
|
group: 'style',
|
|
632
|
+
description: 'The horizontal alignment of the section',
|
|
631
633
|
defaultValue: 'center',
|
|
632
634
|
displayName: 'Horizontal alignment',
|
|
633
635
|
},
|
|
@@ -636,71 +638,83 @@ const builtInStyles = {
|
|
|
636
638
|
type: 'Boolean',
|
|
637
639
|
group: 'style',
|
|
638
640
|
defaultValue: true,
|
|
641
|
+
description: 'The visibility of the component',
|
|
639
642
|
},
|
|
640
643
|
cfMargin: {
|
|
641
644
|
displayName: 'Margin',
|
|
642
645
|
type: 'Text',
|
|
643
646
|
group: 'style',
|
|
647
|
+
description: 'The margin of the section',
|
|
644
648
|
defaultValue: '0 0 0 0',
|
|
645
649
|
},
|
|
646
650
|
cfPadding: {
|
|
647
651
|
displayName: 'Padding',
|
|
648
652
|
type: 'Text',
|
|
649
653
|
group: 'style',
|
|
654
|
+
description: 'The padding of the section',
|
|
650
655
|
defaultValue: '0 0 0 0',
|
|
651
656
|
},
|
|
652
657
|
cfBackgroundColor: {
|
|
653
658
|
displayName: 'Background color',
|
|
654
659
|
type: 'Text',
|
|
655
660
|
group: 'style',
|
|
661
|
+
description: 'The background color of the section',
|
|
656
662
|
defaultValue: 'rgba(0, 0, 0, 0)',
|
|
657
663
|
},
|
|
658
664
|
cfWidth: {
|
|
659
665
|
displayName: 'Width',
|
|
660
666
|
type: 'Text',
|
|
661
667
|
group: 'style',
|
|
668
|
+
description: 'The width of the section',
|
|
662
669
|
defaultValue: '100%',
|
|
663
670
|
},
|
|
664
671
|
cfHeight: {
|
|
665
672
|
displayName: 'Height',
|
|
666
673
|
type: 'Text',
|
|
667
674
|
group: 'style',
|
|
675
|
+
description: 'The height of the section',
|
|
668
676
|
defaultValue: 'fit-content',
|
|
669
677
|
},
|
|
670
678
|
cfMaxWidth: {
|
|
671
679
|
displayName: 'Max width',
|
|
672
680
|
type: 'Text',
|
|
673
681
|
group: 'style',
|
|
682
|
+
description: 'The max-width of the section',
|
|
674
683
|
defaultValue: 'none',
|
|
675
684
|
},
|
|
676
685
|
cfFlexDirection: {
|
|
677
686
|
displayName: 'Direction',
|
|
678
687
|
type: 'Text',
|
|
679
688
|
group: 'style',
|
|
689
|
+
description: 'The orientation of the section',
|
|
680
690
|
defaultValue: 'column',
|
|
681
691
|
},
|
|
682
692
|
cfFlexReverse: {
|
|
683
693
|
displayName: 'Reverse Direction',
|
|
684
694
|
type: 'Boolean',
|
|
685
695
|
group: 'style',
|
|
696
|
+
description: 'Toggle the flex direction to be reversed',
|
|
686
697
|
defaultValue: false,
|
|
687
698
|
},
|
|
688
699
|
cfFlexWrap: {
|
|
689
700
|
displayName: 'Wrap objects',
|
|
690
701
|
type: 'Text',
|
|
691
702
|
group: 'style',
|
|
703
|
+
description: 'Wrap objects',
|
|
692
704
|
defaultValue: 'nowrap',
|
|
693
705
|
},
|
|
694
706
|
cfBorder: {
|
|
695
707
|
displayName: 'Border',
|
|
696
708
|
type: 'Text',
|
|
697
709
|
group: 'style',
|
|
710
|
+
description: 'The border of the section',
|
|
698
711
|
defaultValue: '0px solid rgba(0, 0, 0, 0)',
|
|
699
712
|
},
|
|
700
713
|
cfGap: {
|
|
701
714
|
displayName: 'Gap',
|
|
702
715
|
type: 'Text',
|
|
703
716
|
group: 'style',
|
|
717
|
+
description: 'The spacing between the elements of the section',
|
|
704
718
|
defaultValue: '0px',
|
|
705
719
|
},
|
|
706
720
|
cfHyperlink: {
|
|
@@ -711,6 +725,7 @@ const builtInStyles = {
|
|
|
711
725
|
format: 'URL',
|
|
712
726
|
bindingSourceType: ['entry', 'experience', 'manual'],
|
|
713
727
|
},
|
|
728
|
+
description: 'hyperlink for section or container',
|
|
714
729
|
},
|
|
715
730
|
cfOpenInNewTab: {
|
|
716
731
|
displayName: 'URL behaviour',
|
|
@@ -724,6 +739,7 @@ const optionalBuiltInStyles = {
|
|
|
724
739
|
displayName: 'Font Size',
|
|
725
740
|
type: 'Text',
|
|
726
741
|
group: 'style',
|
|
742
|
+
description: 'The font size of the element',
|
|
727
743
|
defaultValue: '16px',
|
|
728
744
|
},
|
|
729
745
|
cfFontWeight: {
|
|
@@ -746,11 +762,13 @@ const optionalBuiltInStyles = {
|
|
|
746
762
|
displayName: 'Font Weight',
|
|
747
763
|
type: 'Text',
|
|
748
764
|
group: 'style',
|
|
765
|
+
description: 'The font weight of the element',
|
|
749
766
|
defaultValue: '400',
|
|
750
767
|
},
|
|
751
768
|
cfImageAsset: {
|
|
752
769
|
displayName: 'Image',
|
|
753
770
|
type: 'Media',
|
|
771
|
+
description: 'Image to display',
|
|
754
772
|
validations: {
|
|
755
773
|
bindingSourceType: ['asset', 'entry', 'manual'],
|
|
756
774
|
},
|
|
@@ -769,11 +787,13 @@ const optionalBuiltInStyles = {
|
|
|
769
787
|
displayName: 'Background color',
|
|
770
788
|
type: 'Text',
|
|
771
789
|
group: 'style',
|
|
790
|
+
description: 'The background color of the element',
|
|
772
791
|
defaultValue: 'rgba(0, 0, 0, 0)',
|
|
773
792
|
},
|
|
774
793
|
cfBackgroundImageUrl: {
|
|
775
794
|
displayName: 'Background image',
|
|
776
795
|
type: 'Media',
|
|
796
|
+
description: 'Background image for component',
|
|
777
797
|
validations: {
|
|
778
798
|
bindingSourceType: ['asset', 'entry', 'manual'],
|
|
779
799
|
},
|
|
@@ -792,24 +812,28 @@ const optionalBuiltInStyles = {
|
|
|
792
812
|
displayName: 'Border Radius',
|
|
793
813
|
type: 'Text',
|
|
794
814
|
group: 'style',
|
|
815
|
+
description: 'The border radius of the section',
|
|
795
816
|
defaultValue: '0px',
|
|
796
817
|
},
|
|
797
818
|
cfLineHeight: {
|
|
798
819
|
displayName: 'Line Height',
|
|
799
820
|
type: 'Text',
|
|
800
821
|
group: 'style',
|
|
822
|
+
description: 'The line height of the element',
|
|
801
823
|
defaultValue: '20px',
|
|
802
824
|
},
|
|
803
825
|
cfLetterSpacing: {
|
|
804
826
|
displayName: 'Letter Spacing',
|
|
805
827
|
type: 'Text',
|
|
806
828
|
group: 'style',
|
|
829
|
+
description: 'The letter spacing of the element',
|
|
807
830
|
defaultValue: '0px',
|
|
808
831
|
},
|
|
809
832
|
cfTextColor: {
|
|
810
833
|
displayName: 'Text Color',
|
|
811
834
|
type: 'Text',
|
|
812
835
|
group: 'style',
|
|
836
|
+
description: 'The text color of the element',
|
|
813
837
|
defaultValue: 'rgba(0, 0, 0, 1)',
|
|
814
838
|
},
|
|
815
839
|
cfTextAlign: {
|
|
@@ -832,6 +856,7 @@ const optionalBuiltInStyles = {
|
|
|
832
856
|
displayName: 'Text Align',
|
|
833
857
|
type: 'Text',
|
|
834
858
|
group: 'style',
|
|
859
|
+
description: 'The text alignment of the element',
|
|
835
860
|
defaultValue: 'start',
|
|
836
861
|
},
|
|
837
862
|
cfTextTransform: {
|
|
@@ -858,24 +883,28 @@ const optionalBuiltInStyles = {
|
|
|
858
883
|
displayName: 'Text Transform',
|
|
859
884
|
type: 'Text',
|
|
860
885
|
group: 'style',
|
|
886
|
+
description: 'The text transform of the element',
|
|
861
887
|
defaultValue: 'none',
|
|
862
888
|
},
|
|
863
889
|
cfTextBold: {
|
|
864
890
|
displayName: 'Bold',
|
|
865
891
|
type: 'Boolean',
|
|
866
892
|
group: 'style',
|
|
893
|
+
description: 'The text bold of the element',
|
|
867
894
|
defaultValue: false,
|
|
868
895
|
},
|
|
869
896
|
cfTextItalic: {
|
|
870
897
|
displayName: 'Italic',
|
|
871
898
|
type: 'Boolean',
|
|
872
899
|
group: 'style',
|
|
900
|
+
description: 'The text italic of the element',
|
|
873
901
|
defaultValue: false,
|
|
874
902
|
},
|
|
875
903
|
cfTextUnderline: {
|
|
876
904
|
displayName: 'Underline',
|
|
877
905
|
type: 'Boolean',
|
|
878
906
|
group: 'style',
|
|
907
|
+
description: 'The text underline of the element',
|
|
879
908
|
defaultValue: false,
|
|
880
909
|
},
|
|
881
910
|
};
|
|
@@ -894,6 +923,7 @@ const containerBuiltInStyles = {
|
|
|
894
923
|
displayName: 'Margin',
|
|
895
924
|
type: 'Text',
|
|
896
925
|
group: 'style',
|
|
926
|
+
description: 'The margin of the container',
|
|
897
927
|
// Note: The UI overwrites '0 Auto 0 Auto' as the default value for top-level containers
|
|
898
928
|
defaultValue: '0 0 0 0',
|
|
899
929
|
},
|
|
@@ -901,6 +931,7 @@ const containerBuiltInStyles = {
|
|
|
901
931
|
displayName: 'Max Width',
|
|
902
932
|
type: 'Text',
|
|
903
933
|
group: 'style',
|
|
934
|
+
description: 'The max-width of the section',
|
|
904
935
|
defaultValue: '1192px',
|
|
905
936
|
},
|
|
906
937
|
};
|
|
@@ -911,30 +942,35 @@ const dividerBuiltInStyles = {
|
|
|
911
942
|
displayName: 'Margin',
|
|
912
943
|
type: 'Text',
|
|
913
944
|
group: 'style',
|
|
945
|
+
description: 'The margin of the divider',
|
|
914
946
|
defaultValue: '20px 0px 20px 0px',
|
|
915
947
|
},
|
|
916
948
|
cfWidth: {
|
|
917
949
|
displayName: 'Width',
|
|
918
950
|
type: 'Text',
|
|
919
951
|
group: 'style',
|
|
952
|
+
description: 'The width of the divider',
|
|
920
953
|
defaultValue: '100%',
|
|
921
954
|
},
|
|
922
955
|
cfHeight: {
|
|
923
956
|
displayName: 'Height',
|
|
924
957
|
type: 'Text',
|
|
925
958
|
group: 'style',
|
|
959
|
+
description: 'The height of the divider',
|
|
926
960
|
defaultValue: '1px',
|
|
927
961
|
},
|
|
928
962
|
cfMaxWidth: {
|
|
929
963
|
displayName: 'Max width',
|
|
930
964
|
type: 'Text',
|
|
931
965
|
group: 'style',
|
|
966
|
+
description: 'The max-width of the divider',
|
|
932
967
|
defaultValue: 'none',
|
|
933
968
|
},
|
|
934
969
|
cfBackgroundColor: {
|
|
935
970
|
displayName: 'Background color',
|
|
936
971
|
type: 'Text',
|
|
937
972
|
group: 'style',
|
|
973
|
+
description: 'The background color of the divider',
|
|
938
974
|
defaultValue: 'rgba(204, 204, 204, 1)',
|
|
939
975
|
},
|
|
940
976
|
};
|
|
@@ -967,6 +1003,7 @@ const singleColumnBuiltInStyles = {
|
|
|
967
1003
|
},
|
|
968
1004
|
type: 'Text',
|
|
969
1005
|
group: 'style',
|
|
1006
|
+
description: 'The vertical alignment of the column',
|
|
970
1007
|
defaultValue: 'center',
|
|
971
1008
|
displayName: 'Vertical alignment',
|
|
972
1009
|
},
|
|
@@ -993,6 +1030,7 @@ const singleColumnBuiltInStyles = {
|
|
|
993
1030
|
},
|
|
994
1031
|
type: 'Text',
|
|
995
1032
|
group: 'style',
|
|
1033
|
+
description: 'The horizontal alignment of the column',
|
|
996
1034
|
defaultValue: 'center',
|
|
997
1035
|
displayName: 'Horizontal alignment',
|
|
998
1036
|
},
|
|
@@ -1000,30 +1038,35 @@ const singleColumnBuiltInStyles = {
|
|
|
1000
1038
|
displayName: 'Padding',
|
|
1001
1039
|
type: 'Text',
|
|
1002
1040
|
group: 'style',
|
|
1041
|
+
description: 'The padding of the column',
|
|
1003
1042
|
defaultValue: '0 0 0 0',
|
|
1004
1043
|
},
|
|
1005
1044
|
cfFlexDirection: {
|
|
1006
1045
|
displayName: 'Direction',
|
|
1007
1046
|
type: 'Text',
|
|
1008
1047
|
group: 'style',
|
|
1048
|
+
description: 'The orientation of the column',
|
|
1009
1049
|
defaultValue: 'column',
|
|
1010
1050
|
},
|
|
1011
1051
|
cfFlexWrap: {
|
|
1012
1052
|
displayName: 'Wrap objects',
|
|
1013
1053
|
type: 'Text',
|
|
1014
1054
|
group: 'style',
|
|
1055
|
+
description: 'Wrap objects',
|
|
1015
1056
|
defaultValue: 'nowrap',
|
|
1016
1057
|
},
|
|
1017
1058
|
cfBorder: {
|
|
1018
1059
|
displayName: 'Border',
|
|
1019
1060
|
type: 'Text',
|
|
1020
1061
|
group: 'style',
|
|
1062
|
+
description: 'The border of the column',
|
|
1021
1063
|
defaultValue: '0px solid rgba(0, 0, 0, 0)',
|
|
1022
1064
|
},
|
|
1023
1065
|
cfGap: {
|
|
1024
1066
|
displayName: 'Gap',
|
|
1025
1067
|
type: 'Text',
|
|
1026
1068
|
group: 'style',
|
|
1069
|
+
description: 'The spacing between the elements of the column',
|
|
1027
1070
|
defaultValue: '0px',
|
|
1028
1071
|
},
|
|
1029
1072
|
cfColumnSpan: {
|
|
@@ -1047,6 +1090,7 @@ const columnsBuiltInStyles = {
|
|
|
1047
1090
|
displayName: 'Margin',
|
|
1048
1091
|
type: 'Text',
|
|
1049
1092
|
group: 'style',
|
|
1093
|
+
description: 'The margin of the columns',
|
|
1050
1094
|
// Note: The UI overwrites '0 Auto 0 Auto' as the default value for top-level columns
|
|
1051
1095
|
defaultValue: '0 0 0 0',
|
|
1052
1096
|
},
|
|
@@ -1054,30 +1098,35 @@ const columnsBuiltInStyles = {
|
|
|
1054
1098
|
displayName: 'Width',
|
|
1055
1099
|
type: 'Text',
|
|
1056
1100
|
group: 'style',
|
|
1101
|
+
description: 'The width of the columns',
|
|
1057
1102
|
defaultValue: '100%',
|
|
1058
1103
|
},
|
|
1059
1104
|
cfMaxWidth: {
|
|
1060
1105
|
displayName: 'Max width',
|
|
1061
1106
|
type: 'Text',
|
|
1062
1107
|
group: 'style',
|
|
1108
|
+
description: 'The max-width of the columns',
|
|
1063
1109
|
defaultValue: '1192px',
|
|
1064
1110
|
},
|
|
1065
1111
|
cfPadding: {
|
|
1066
1112
|
displayName: 'Padding',
|
|
1067
1113
|
type: 'Text',
|
|
1068
1114
|
group: 'style',
|
|
1115
|
+
description: 'The padding of the columns',
|
|
1069
1116
|
defaultValue: '10px 10px 10px 10px',
|
|
1070
1117
|
},
|
|
1071
1118
|
cfBorder: {
|
|
1072
1119
|
displayName: 'Border',
|
|
1073
1120
|
type: 'Text',
|
|
1074
1121
|
group: 'style',
|
|
1122
|
+
description: 'The border of the columns',
|
|
1075
1123
|
defaultValue: '0px solid rgba(0, 0, 0, 0)',
|
|
1076
1124
|
},
|
|
1077
1125
|
cfGap: {
|
|
1078
1126
|
displayName: 'Gap',
|
|
1079
1127
|
type: 'Text',
|
|
1080
1128
|
group: 'style',
|
|
1129
|
+
description: 'The spacing between the elements of the columns',
|
|
1081
1130
|
defaultValue: '10px 10px',
|
|
1082
1131
|
},
|
|
1083
1132
|
cfColumns: {
|
|
@@ -1327,6 +1376,19 @@ const ComponentVariableSchema = z.object({
|
|
|
1327
1376
|
});
|
|
1328
1377
|
const ComponentTreeNodeSchema = BaseComponentTreeNodeSchema.extend({
|
|
1329
1378
|
children: z.lazy(() => ComponentTreeNodeSchema.array()),
|
|
1379
|
+
}).superRefine(({ id, prebindingId, parameters }, ctx) => {
|
|
1380
|
+
if (prebindingId && !parameters) {
|
|
1381
|
+
ctx.addIssue({
|
|
1382
|
+
code: z.ZodIssueCode.custom,
|
|
1383
|
+
message: `Found "prebindingId" but no "parameters" for node with id: "${id}"`,
|
|
1384
|
+
});
|
|
1385
|
+
}
|
|
1386
|
+
if (parameters && !prebindingId) {
|
|
1387
|
+
ctx.addIssue({
|
|
1388
|
+
code: z.ZodIssueCode.custom,
|
|
1389
|
+
message: `Found "parameters" but no "prebindingId" for node with id: "${id}"`,
|
|
1390
|
+
});
|
|
1391
|
+
}
|
|
1330
1392
|
});
|
|
1331
1393
|
const ComponentTreeSchema = z
|
|
1332
1394
|
.object({
|
|
@@ -1430,6 +1492,7 @@ const ParameterDefinitionSchema = z.object({
|
|
|
1430
1492
|
passToNodes: z
|
|
1431
1493
|
.array(PassToNodeSchema)
|
|
1432
1494
|
.max(1, 'At most one "passToNodes" element is allowed per parameter definition.'),
|
|
1495
|
+
// we might change this to be empty array for native parameter definitions, that's why we don't use .length(1)
|
|
1433
1496
|
});
|
|
1434
1497
|
const ParameterDefinitionsSchema = z.record(propertyKeySchema, ParameterDefinitionSchema);
|
|
1435
1498
|
const VariableMappingsSchema = z.record(propertyKeySchema, VariableMappingSchema);
|