@webstudio-is/react-sdk 0.74.0 → 0.76.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.
Files changed (47) hide show
  1. package/lib/cjs/components/component-meta.js +1 -0
  2. package/lib/cjs/context.js +5 -1
  3. package/lib/cjs/css/global-rules.js +1 -1
  4. package/lib/cjs/css/normalize.js +10 -13
  5. package/lib/cjs/embed-template.js +68 -3
  6. package/lib/cjs/expression.js +191 -0
  7. package/lib/cjs/index.js +7 -1
  8. package/lib/cjs/props.js +28 -10
  9. package/lib/cjs/tree/create-elements-tree.js +14 -1
  10. package/lib/cjs/tree/root.js +55 -0
  11. package/lib/cjs/tree/webstudio-component.js +9 -2
  12. package/lib/components/component-meta.js +1 -0
  13. package/lib/context.js +5 -1
  14. package/lib/css/global-rules.js +1 -1
  15. package/lib/css/normalize.js +10 -13
  16. package/lib/embed-template.js +68 -3
  17. package/lib/expression.js +161 -0
  18. package/lib/index.js +13 -1
  19. package/lib/props.js +28 -10
  20. package/lib/tree/create-elements-tree.js +14 -1
  21. package/lib/tree/root.js +63 -1
  22. package/lib/tree/webstudio-component.js +9 -2
  23. package/lib/types/components/component-meta.d.ts +115 -0
  24. package/lib/types/context.d.ts +3 -0
  25. package/lib/types/css/normalize.d.ts +1316 -0
  26. package/lib/types/embed-template.d.ts +512 -0
  27. package/lib/types/expression.d.ts +6 -0
  28. package/lib/types/expression.test.d.ts +1 -0
  29. package/lib/types/index.d.ts +2 -1
  30. package/lib/types/props.d.ts +8 -7
  31. package/lib/types/tree/create-elements-tree.d.ts +4 -2
  32. package/lib/types/tree/root.d.ts +3 -3
  33. package/lib/types/tree/webstudio-component.d.ts +1 -0
  34. package/package.json +15 -15
  35. package/src/components/component-meta.ts +1 -0
  36. package/src/context.tsx +11 -0
  37. package/src/css/global-rules.ts +2 -1
  38. package/src/css/normalize.ts +10 -13
  39. package/src/embed-template.test.ts +177 -1
  40. package/src/embed-template.ts +73 -2
  41. package/src/expression.test.ts +122 -0
  42. package/src/expression.ts +183 -0
  43. package/src/index.ts +7 -0
  44. package/src/props.ts +29 -10
  45. package/src/tree/create-elements-tree.tsx +20 -1
  46. package/src/tree/root.ts +81 -4
  47. package/src/tree/webstudio-component.tsx +7 -1
package/lib/types/components/component-meta.d.ts CHANGED
@@ -642,6 +642,7 @@ declare const WsComponentMeta: z.ZodObject<{
642
642
  invalidAncestors: z.ZodOptional<z.ZodArray<z.ZodString, "many">>;
643
643
  stylable: z.ZodOptional<z.ZodBoolean>;
644
644
  label: z.ZodString;
645
+ description: z.ZodOptional<z.ZodString>;
645
646
  icon: z.ZodString;
646
647
  presetStyle: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodType<{
647
648
  value: {
@@ -693,7 +694,14 @@ declare const WsComponentMeta: z.ZodObject<{
693
694
  type: "unparsed";
694
695
  value: string;
695
696
  hidden?: boolean | undefined;
697
+ } | {
698
+ type: "rgb";
699
+ alpha: number;
700
+ r: number;
701
+ g: number;
702
+ b: number;
696
703
  })[];
704
+ hidden?: boolean | undefined;
697
705
  } | {
698
706
  type: "layers";
699
707
  value: ({
@@ -733,7 +741,14 @@ declare const WsComponentMeta: z.ZodObject<{
733
741
  type: "unparsed";
734
742
  value: string;
735
743
  hidden?: boolean | undefined;
744
+ } | {
745
+ type: "rgb";
746
+ alpha: number;
747
+ r: number;
748
+ g: number;
749
+ b: number;
736
750
  })[];
751
+ hidden?: boolean | undefined;
737
752
  })[];
738
753
  } | {
739
754
  type: "var";
@@ -781,7 +796,14 @@ declare const WsComponentMeta: z.ZodObject<{
781
796
  type: "unparsed";
782
797
  value: string;
783
798
  hidden?: boolean | undefined;
799
+ } | {
800
+ type: "rgb";
801
+ alpha: number;
802
+ r: number;
803
+ g: number;
804
+ b: number;
784
805
  })[];
806
+ hidden?: boolean | undefined;
785
807
  } | {
786
808
  type: "layers";
787
809
  value: ({
@@ -821,7 +843,14 @@ declare const WsComponentMeta: z.ZodObject<{
821
843
  type: "unparsed";
822
844
  value: string;
823
845
  hidden?: boolean | undefined;
846
+ } | {
847
+ type: "rgb";
848
+ alpha: number;
849
+ r: number;
850
+ g: number;
851
+ b: number;
824
852
  })[];
853
+ hidden?: boolean | undefined;
825
854
  })[];
826
855
  })[];
827
856
  };
@@ -877,7 +906,14 @@ declare const WsComponentMeta: z.ZodObject<{
877
906
  type: "unparsed";
878
907
  value: string;
879
908
  hidden?: boolean | undefined;
909
+ } | {
910
+ type: "rgb";
911
+ alpha: number;
912
+ r: number;
913
+ g: number;
914
+ b: number;
880
915
  })[];
916
+ hidden?: boolean | undefined;
881
917
  } | {
882
918
  type: "layers";
883
919
  value: ({
@@ -917,7 +953,14 @@ declare const WsComponentMeta: z.ZodObject<{
917
953
  type: "unparsed";
918
954
  value: string;
919
955
  hidden?: boolean | undefined;
956
+ } | {
957
+ type: "rgb";
958
+ alpha: number;
959
+ r: number;
960
+ g: number;
961
+ b: number;
920
962
  })[];
963
+ hidden?: boolean | undefined;
921
964
  })[];
922
965
  } | {
923
966
  type: "var";
@@ -965,7 +1008,14 @@ declare const WsComponentMeta: z.ZodObject<{
965
1008
  type: "unparsed";
966
1009
  value: string;
967
1010
  hidden?: boolean | undefined;
1011
+ } | {
1012
+ type: "rgb";
1013
+ alpha: number;
1014
+ r: number;
1015
+ g: number;
1016
+ b: number;
968
1017
  })[];
1018
+ hidden?: boolean | undefined;
969
1019
  } | {
970
1020
  type: "layers";
971
1021
  value: ({
@@ -1005,7 +1055,14 @@ declare const WsComponentMeta: z.ZodObject<{
1005
1055
  type: "unparsed";
1006
1056
  value: string;
1007
1057
  hidden?: boolean | undefined;
1058
+ } | {
1059
+ type: "rgb";
1060
+ alpha: number;
1061
+ r: number;
1062
+ g: number;
1063
+ b: number;
1008
1064
  })[];
1065
+ hidden?: boolean | undefined;
1009
1066
  })[];
1010
1067
  })[];
1011
1068
  };
@@ -1044,6 +1101,7 @@ declare const WsComponentMeta: z.ZodObject<{
1044
1101
  requiredAncestors?: string[] | undefined;
1045
1102
  invalidAncestors?: string[] | undefined;
1046
1103
  stylable?: boolean | undefined;
1104
+ description?: string | undefined;
1047
1105
  presetStyle?: Record<string, {
1048
1106
  value: {
1049
1107
  type: "unit";
@@ -1094,7 +1152,14 @@ declare const WsComponentMeta: z.ZodObject<{
1094
1152
  type: "unparsed";
1095
1153
  value: string;
1096
1154
  hidden?: boolean | undefined;
1155
+ } | {
1156
+ type: "rgb";
1157
+ alpha: number;
1158
+ r: number;
1159
+ g: number;
1160
+ b: number;
1097
1161
  })[];
1162
+ hidden?: boolean | undefined;
1098
1163
  } | {
1099
1164
  type: "layers";
1100
1165
  value: ({
@@ -1134,7 +1199,14 @@ declare const WsComponentMeta: z.ZodObject<{
1134
1199
  type: "unparsed";
1135
1200
  value: string;
1136
1201
  hidden?: boolean | undefined;
1202
+ } | {
1203
+ type: "rgb";
1204
+ alpha: number;
1205
+ r: number;
1206
+ g: number;
1207
+ b: number;
1137
1208
  })[];
1209
+ hidden?: boolean | undefined;
1138
1210
  })[];
1139
1211
  } | {
1140
1212
  type: "var";
@@ -1182,7 +1254,14 @@ declare const WsComponentMeta: z.ZodObject<{
1182
1254
  type: "unparsed";
1183
1255
  value: string;
1184
1256
  hidden?: boolean | undefined;
1257
+ } | {
1258
+ type: "rgb";
1259
+ alpha: number;
1260
+ r: number;
1261
+ g: number;
1262
+ b: number;
1185
1263
  })[];
1264
+ hidden?: boolean | undefined;
1186
1265
  } | {
1187
1266
  type: "layers";
1188
1267
  value: ({
@@ -1222,7 +1301,14 @@ declare const WsComponentMeta: z.ZodObject<{
1222
1301
  type: "unparsed";
1223
1302
  value: string;
1224
1303
  hidden?: boolean | undefined;
1304
+ } | {
1305
+ type: "rgb";
1306
+ alpha: number;
1307
+ r: number;
1308
+ g: number;
1309
+ b: number;
1225
1310
  })[];
1311
+ hidden?: boolean | undefined;
1226
1312
  })[];
1227
1313
  })[];
1228
1314
  };
@@ -1247,6 +1333,7 @@ declare const WsComponentMeta: z.ZodObject<{
1247
1333
  requiredAncestors?: string[] | undefined;
1248
1334
  invalidAncestors?: string[] | undefined;
1249
1335
  stylable?: boolean | undefined;
1336
+ description?: string | undefined;
1250
1337
  presetStyle?: Record<string, {
1251
1338
  value: {
1252
1339
  type: "unit";
@@ -1297,7 +1384,14 @@ declare const WsComponentMeta: z.ZodObject<{
1297
1384
  type: "unparsed";
1298
1385
  value: string;
1299
1386
  hidden?: boolean | undefined;
1387
+ } | {
1388
+ type: "rgb";
1389
+ alpha: number;
1390
+ r: number;
1391
+ g: number;
1392
+ b: number;
1300
1393
  })[];
1394
+ hidden?: boolean | undefined;
1301
1395
  } | {
1302
1396
  type: "layers";
1303
1397
  value: ({
@@ -1337,7 +1431,14 @@ declare const WsComponentMeta: z.ZodObject<{
1337
1431
  type: "unparsed";
1338
1432
  value: string;
1339
1433
  hidden?: boolean | undefined;
1434
+ } | {
1435
+ type: "rgb";
1436
+ alpha: number;
1437
+ r: number;
1438
+ g: number;
1439
+ b: number;
1340
1440
  })[];
1441
+ hidden?: boolean | undefined;
1341
1442
  })[];
1342
1443
  } | {
1343
1444
  type: "var";
@@ -1385,7 +1486,14 @@ declare const WsComponentMeta: z.ZodObject<{
1385
1486
  type: "unparsed";
1386
1487
  value: string;
1387
1488
  hidden?: boolean | undefined;
1489
+ } | {
1490
+ type: "rgb";
1491
+ alpha: number;
1492
+ r: number;
1493
+ g: number;
1494
+ b: number;
1388
1495
  })[];
1496
+ hidden?: boolean | undefined;
1389
1497
  } | {
1390
1498
  type: "layers";
1391
1499
  value: ({
@@ -1425,7 +1533,14 @@ declare const WsComponentMeta: z.ZodObject<{
1425
1533
  type: "unparsed";
1426
1534
  value: string;
1427
1535
  hidden?: boolean | undefined;
1536
+ } | {
1537
+ type: "rgb";
1538
+ alpha: number;
1539
+ r: number;
1540
+ g: number;
1541
+ b: number;
1428
1542
  })[];
1543
+ hidden?: boolean | undefined;
1429
1544
  })[];
1430
1545
  })[];
1431
1546
  };
package/lib/types/context.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import { type ReadableAtom } from "nanostores";
3
3
  import type { Assets } from "@webstudio-is/asset-uploader";
4
+ import type { DataSource, Instance, Prop } from "@webstudio-is/project-build";
4
5
  import type { Pages, PropsByInstanceId } from "./props";
5
6
  export type Params = {
6
7
  renderer?: "canvas" | "preview";
@@ -32,4 +33,6 @@ export declare const ReactSdkContext: import("react").Context<Params & {
32
33
  propsByInstanceIdStore: ReadableAtom<PropsByInstanceId>;
33
34
  assetsStore: ReadableAtom<Assets>;
34
35
  pagesStore: ReadableAtom<Pages>;
36
+ dataSourceValuesStore: ReadableAtom<Map<DataSource["id"], unknown>>;
37
+ setDataSourceValue: (instanceId: Instance["id"], prop: Prop["name"], value: unknown) => void;
35
38
  }>;