@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 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);