@webiny/website-builder-react 6.3.0 → 6.4.0-beta.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 (79) hide show
  1. package/components/ConnectToEditor.js +16 -18
  2. package/components/ConnectToEditor.js.map +1 -1
  3. package/components/DocumentFragment.js +5 -7
  4. package/components/DocumentFragment.js.map +1 -1
  5. package/components/DocumentRenderer.js +37 -46
  6. package/components/DocumentRenderer.js.map +1 -1
  7. package/components/DocumentStoreProvider.js +15 -21
  8. package/components/DocumentStoreProvider.js.map +1 -1
  9. package/components/EditingElementRenderer/EditingElementRenderer.js +31 -35
  10. package/components/EditingElementRenderer/EditingElementRenderer.js.map +1 -1
  11. package/components/EditingElementRenderer/EditingElementRenderer.presenter.js +29 -35
  12. package/components/EditingElementRenderer/EditingElementRenderer.presenter.js.map +1 -1
  13. package/components/EditingElementRenderer/index.js +0 -2
  14. package/components/ElementIndexProvider.js +9 -14
  15. package/components/ElementIndexProvider.js.map +1 -1
  16. package/components/ElementRenderer.js +11 -16
  17. package/components/ElementRenderer.js.map +1 -1
  18. package/components/ElementSlot.js +6 -9
  19. package/components/ElementSlot.js.map +1 -1
  20. package/components/ElementSlotDepthProvider.js +9 -14
  21. package/components/ElementSlotDepthProvider.js.map +1 -1
  22. package/components/FragmentsProvider.js +30 -36
  23. package/components/FragmentsProvider.js.map +1 -1
  24. package/components/LiveElementRenderer.js +53 -68
  25. package/components/LiveElementRenderer.js.map +1 -1
  26. package/components/LiveElementSlot.js +12 -14
  27. package/components/LiveElementSlot.js.map +1 -1
  28. package/components/PreviewElementSlot.js +17 -23
  29. package/components/PreviewElementSlot.js.map +1 -1
  30. package/components/index.js +0 -2
  31. package/components/useBindingsForElement.js +13 -11
  32. package/components/useBindingsForElement.js.map +1 -1
  33. package/components/useDocumentState.js +4 -3
  34. package/components/useDocumentState.js.map +1 -1
  35. package/components/useSelectFromState.js +29 -35
  36. package/components/useSelectFromState.js.map +1 -1
  37. package/components/useViewportInfo.js +5 -6
  38. package/components/useViewportInfo.js.map +1 -1
  39. package/createComponent.js +26 -31
  40. package/createComponent.js.map +1 -1
  41. package/createComponent.test.js +108 -119
  42. package/createComponent.test.js.map +1 -1
  43. package/editorComponents/Box.js +3 -6
  44. package/editorComponents/Box.js.map +1 -1
  45. package/editorComponents/Box.manifest.js +15 -15
  46. package/editorComponents/Box.manifest.js.map +1 -1
  47. package/editorComponents/Fragment.js +23 -32
  48. package/editorComponents/Fragment.js.map +1 -1
  49. package/editorComponents/Fragment.manifest.js +14 -12
  50. package/editorComponents/Fragment.manifest.js.map +1 -1
  51. package/editorComponents/Grid.js +33 -61
  52. package/editorComponents/Grid.js.map +1 -1
  53. package/editorComponents/Grid.manifest.js +163 -167
  54. package/editorComponents/Grid.manifest.js.map +1 -1
  55. package/editorComponents/GridColumn.js +3 -6
  56. package/editorComponents/GridColumn.js.map +1 -1
  57. package/editorComponents/GridColumn.manifest.js +20 -18
  58. package/editorComponents/GridColumn.manifest.js.map +1 -1
  59. package/editorComponents/Image.js +99 -119
  60. package/editorComponents/Image.js.map +1 -1
  61. package/editorComponents/Image.manifest.js +33 -33
  62. package/editorComponents/Image.manifest.js.map +1 -1
  63. package/editorComponents/Lexical.js +13 -21
  64. package/editorComponents/Lexical.js.map +1 -1
  65. package/editorComponents/Lexical.manifest.js +17 -15
  66. package/editorComponents/Lexical.manifest.js.map +1 -1
  67. package/editorComponents/Root.js +3 -6
  68. package/editorComponents/Root.js.map +1 -1
  69. package/editorComponents/Root.manifest.js +7 -7
  70. package/editorComponents/Root.manifest.js.map +1 -1
  71. package/editorComponents/index.js +10 -1
  72. package/editorComponents/index.js.map +1 -1
  73. package/index.js +1 -3
  74. package/package.json +6 -6
  75. package/types.js +0 -3
  76. package/components/EditingElementRenderer/index.js.map +0 -1
  77. package/components/index.js.map +0 -1
  78. package/index.js.map +0 -1
  79. package/types.js.map +0 -1
@@ -1,37 +1,32 @@
1
1
  import { createSlotInput } from "@webiny/website-builder-sdk";
2
- export function createComponent(component, manifest) {
3
- const inputs = [];
4
-
5
- // Normalize inputs to always be an array of objects.
6
-
7
- if (Array.isArray(manifest.inputs)) {
8
- inputs.push(...manifest.inputs);
9
- } else {
10
- const inputsObject = manifest.inputs ?? {};
11
- Object.keys(inputsObject).forEach(name => {
12
- inputs.push({
13
- ...inputsObject[name],
14
- name
15
- });
16
- });
17
- }
18
- const acceptsChildren = manifest.acceptsChildren;
19
- if (acceptsChildren) {
20
- const hasChildren = inputs.some(input => input.name === "children");
21
- if (!hasChildren) {
22
- inputs.push(createSlotInput({
23
- name: "children"
24
- }));
2
+ function createComponent(component, manifest) {
3
+ const inputs = [];
4
+ if (Array.isArray(manifest.inputs)) inputs.push(...manifest.inputs);
5
+ else {
6
+ const inputsObject = manifest.inputs ?? {};
7
+ Object.keys(inputsObject).forEach((name)=>{
8
+ inputs.push({
9
+ ...inputsObject[name],
10
+ name
11
+ });
12
+ });
25
13
  }
26
- }
27
- return {
28
- component,
29
- manifest: {
30
- ...manifest,
31
- tags: manifest.tags ?? [],
32
- inputs
14
+ const acceptsChildren = manifest.acceptsChildren;
15
+ if (acceptsChildren) {
16
+ const hasChildren = inputs.some((input)=>"children" === input.name);
17
+ if (!hasChildren) inputs.push(createSlotInput({
18
+ name: "children"
19
+ }));
33
20
  }
34
- };
21
+ return {
22
+ component,
23
+ manifest: {
24
+ ...manifest,
25
+ tags: manifest.tags ?? [],
26
+ inputs
27
+ }
28
+ };
35
29
  }
30
+ export { createComponent };
36
31
 
37
32
  //# sourceMappingURL=createComponent.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["createSlotInput","createComponent","component","manifest","inputs","Array","isArray","push","inputsObject","Object","keys","forEach","name","acceptsChildren","hasChildren","some","input","tags"],"sources":["createComponent.ts"],"sourcesContent":["import type {\n Component,\n ComponentInput,\n ComponentManifest,\n ComponentManifestInput,\n InputFactory\n} from \"@webiny/website-builder-sdk\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\nimport type { ExtractInputs } from \"~/types.js\";\n\nexport function createComponent<\n TComponent extends (props: any) => any,\n TInputs extends ExtractInputs<Parameters<TComponent>[0]>\n>(component: TComponent, manifest: ComponentManifestInput<TInputs>): Component {\n const inputs: ComponentInput[] = [];\n\n // Normalize inputs to always be an array of objects.\n\n if (Array.isArray(manifest.inputs)) {\n inputs.push(...manifest.inputs);\n } else {\n const inputsObject: Record<string, InputFactory<any>> = manifest.inputs ?? {};\n Object.keys(inputsObject).forEach((name: string) => {\n inputs.push({ ...inputsObject[name], name });\n });\n }\n\n const acceptsChildren = manifest.acceptsChildren;\n\n if (acceptsChildren) {\n const hasChildren = inputs.some(input => input.name === \"children\");\n if (!hasChildren) {\n inputs.push(createSlotInput({ name: \"children\" }));\n }\n }\n\n return {\n component,\n manifest: { ...manifest, tags: manifest.tags ?? [], inputs } as ComponentManifest\n };\n}\n"],"mappings":"AAOA,SAASA,eAAe,QAAQ,6BAA6B;AAG7D,OAAO,SAASC,eAAeA,CAG7BC,SAAqB,EAAEC,QAAyC,EAAa;EAC3E,MAAMC,MAAwB,GAAG,EAAE;;EAEnC;;EAEA,IAAIC,KAAK,CAACC,OAAO,CAACH,QAAQ,CAACC,MAAM,CAAC,EAAE;IAChCA,MAAM,CAACG,IAAI,CAAC,GAAGJ,QAAQ,CAACC,MAAM,CAAC;EACnC,CAAC,MAAM;IACH,MAAMI,YAA+C,GAAGL,QAAQ,CAACC,MAAM,IAAI,CAAC,CAAC;IAC7EK,MAAM,CAACC,IAAI,CAACF,YAAY,CAAC,CAACG,OAAO,CAAEC,IAAY,IAAK;MAChDR,MAAM,CAACG,IAAI,CAAC;QAAE,GAAGC,YAAY,CAACI,IAAI,CAAC;QAAEA;MAAK,CAAC,CAAC;IAChD,CAAC,CAAC;EACN;EAEA,MAAMC,eAAe,GAAGV,QAAQ,CAACU,eAAe;EAEhD,IAAIA,eAAe,EAAE;IACjB,MAAMC,WAAW,GAAGV,MAAM,CAACW,IAAI,CAACC,KAAK,IAAIA,KAAK,CAACJ,IAAI,KAAK,UAAU,CAAC;IACnE,IAAI,CAACE,WAAW,EAAE;MACdV,MAAM,CAACG,IAAI,CAACP,eAAe,CAAC;QAAEY,IAAI,EAAE;MAAW,CAAC,CAAC,CAAC;IACtD;EACJ;EAEA,OAAO;IACHV,SAAS;IACTC,QAAQ,EAAE;MAAE,GAAGA,QAAQ;MAAEc,IAAI,EAAEd,QAAQ,CAACc,IAAI,IAAI,EAAE;MAAEb;IAAO;EAC/D,CAAC;AACL","ignoreList":[]}
1
+ {"version":3,"file":"createComponent.js","sources":["../src/createComponent.ts"],"sourcesContent":["import type {\n Component,\n ComponentInput,\n ComponentManifest,\n ComponentManifestInput,\n InputFactory\n} from \"@webiny/website-builder-sdk\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\nimport type { ExtractInputs } from \"~/types.js\";\n\nexport function createComponent<\n TComponent extends (props: any) => any,\n TInputs extends ExtractInputs<Parameters<TComponent>[0]>\n>(component: TComponent, manifest: ComponentManifestInput<TInputs>): Component {\n const inputs: ComponentInput[] = [];\n\n // Normalize inputs to always be an array of objects.\n\n if (Array.isArray(manifest.inputs)) {\n inputs.push(...manifest.inputs);\n } else {\n const inputsObject: Record<string, InputFactory<any>> = manifest.inputs ?? {};\n Object.keys(inputsObject).forEach((name: string) => {\n inputs.push({ ...inputsObject[name], name });\n });\n }\n\n const acceptsChildren = manifest.acceptsChildren;\n\n if (acceptsChildren) {\n const hasChildren = inputs.some(input => input.name === \"children\");\n if (!hasChildren) {\n inputs.push(createSlotInput({ name: \"children\" }));\n }\n }\n\n return {\n component,\n manifest: { ...manifest, tags: manifest.tags ?? [], inputs } as ComponentManifest\n };\n}\n"],"names":["createComponent","component","manifest","inputs","Array","inputsObject","Object","name","acceptsChildren","hasChildren","input","createSlotInput"],"mappings":";AAUO,SAASA,gBAGdC,SAAqB,EAAEC,QAAyC;IAC9D,MAAMC,SAA2B,EAAE;IAInC,IAAIC,MAAM,OAAO,CAACF,SAAS,MAAM,GAC7BC,OAAO,IAAI,IAAID,SAAS,MAAM;SAC3B;QACH,MAAMG,eAAkDH,SAAS,MAAM,IAAI,CAAC;QAC5EI,OAAO,IAAI,CAACD,cAAc,OAAO,CAAC,CAACE;YAC/BJ,OAAO,IAAI,CAAC;gBAAE,GAAGE,YAAY,CAACE,KAAK;gBAAEA;YAAK;QAC9C;IACJ;IAEA,MAAMC,kBAAkBN,SAAS,eAAe;IAEhD,IAAIM,iBAAiB;QACjB,MAAMC,cAAcN,OAAO,IAAI,CAACO,CAAAA,QAASA,AAAe,eAAfA,MAAM,IAAI;QACnD,IAAI,CAACD,aACDN,OAAO,IAAI,CAACQ,gBAAgB;YAAE,MAAM;QAAW;IAEvD;IAEA,OAAO;QACHV;QACA,UAAU;YAAE,GAAGC,QAAQ;YAAE,MAAMA,SAAS,IAAI,IAAI,EAAE;YAAEC;QAAO;IAC/D;AACJ"}
@@ -2,128 +2,117 @@ import { describe, expect, it } from "vitest";
2
2
  import { createComponent } from "./createComponent.js";
3
3
  import { createTextInput } from "./index.js";
4
4
  import { createSlotInput } from "@webiny/website-builder-sdk";
5
-
6
- /**
7
- * These tests are aimed at testing TS types rather than functionality itself.
8
- * // TODO: figure out how to enable typechecking for a single test. Currently it only typechecks at build time.
9
- */
10
-
11
- describe("Component Manifest", () => {
12
- it("should support input arrays and strict input objects", () => {
13
- const Button = _ => {
14
- return null;
15
- };
16
- const button1 = createComponent(Button, {
17
- name: "Button",
18
- inputs: [
19
- // Passing a generic narrows down the `name` property and provides autocomplete.
20
- createTextInput({
21
- name: "title",
22
- label: "Title"
23
- }),
24
- // Skipping the generic still performs typechecks, but doesn't provide autocomplete.
25
- createSlotInput({
26
- name: "children"
27
- })]
28
- });
29
- const button2 = createComponent(Button, {
30
- name: "Button",
31
- inputs: {
32
- title: createTextInput({
33
- label: "Title"
34
- }),
35
- children: createSlotInput({})
36
- }
37
- });
38
- const snapshot = {
39
- name: "Button",
40
- tags: [],
41
- inputs: [{
42
- type: "text",
43
- label: "Title",
44
- renderer: "Webiny/Input",
45
- name: "title"
46
- }, {
47
- type: "slot",
48
- renderer: "Webiny/Slot",
49
- name: "children",
50
- list: true,
51
- defaultValue: []
52
- }]
53
- };
54
- expect(button1.manifest).toEqual(snapshot);
55
- expect(button2.manifest).toEqual(snapshot);
56
- });
57
- it("acceptsChildren should satisfy the `children` input requirement", () => {
58
- const Button = _ => {
59
- return null;
60
- };
61
- const {
62
- manifest
63
- } = createComponent(Button, {
64
- name: "Button",
65
- acceptsChildren: true
5
+ describe("Component Manifest", ()=>{
6
+ it("should support input arrays and strict input objects", ()=>{
7
+ const Button = (_)=>null;
8
+ const button1 = createComponent(Button, {
9
+ name: "Button",
10
+ inputs: [
11
+ createTextInput({
12
+ name: "title",
13
+ label: "Title"
14
+ }),
15
+ createSlotInput({
16
+ name: "children"
17
+ })
18
+ ]
19
+ });
20
+ const button2 = createComponent(Button, {
21
+ name: "Button",
22
+ inputs: {
23
+ title: createTextInput({
24
+ label: "Title"
25
+ }),
26
+ children: createSlotInput({})
27
+ }
28
+ });
29
+ const snapshot = {
30
+ name: "Button",
31
+ tags: [],
32
+ inputs: [
33
+ {
34
+ type: "text",
35
+ label: "Title",
36
+ renderer: "Webiny/Input",
37
+ name: "title"
38
+ },
39
+ {
40
+ type: "slot",
41
+ renderer: "Webiny/Slot",
42
+ name: "children",
43
+ list: true,
44
+ defaultValue: []
45
+ }
46
+ ]
47
+ };
48
+ expect(button1.manifest).toEqual(snapshot);
49
+ expect(button2.manifest).toEqual(snapshot);
66
50
  });
67
- expect(manifest).toEqual({
68
- name: "Button",
69
- acceptsChildren: true,
70
- tags: [],
71
- inputs: [{
72
- type: "slot",
73
- list: true,
74
- renderer: "Webiny/Slot",
75
- name: "children",
76
- defaultValue: []
77
- }]
51
+ it("acceptsChildren should satisfy the `children` input requirement", ()=>{
52
+ const Button = (_)=>null;
53
+ const { manifest } = createComponent(Button, {
54
+ name: "Button",
55
+ acceptsChildren: true
56
+ });
57
+ expect(manifest).toEqual({
58
+ name: "Button",
59
+ acceptsChildren: true,
60
+ tags: [],
61
+ inputs: [
62
+ {
63
+ type: "slot",
64
+ list: true,
65
+ renderer: "Webiny/Slot",
66
+ name: "children",
67
+ defaultValue: []
68
+ }
69
+ ]
70
+ });
78
71
  });
79
- });
80
- it("`acceptsChildren` should work alongside other inputs", () => {
81
- const Button = _ => {
82
- return null;
83
- };
84
-
85
- // Inputs as array
86
- const button1 = createComponent(Button, {
87
- name: "Button",
88
- acceptsChildren: true,
89
- inputs: [createTextInput({
90
- name: "title",
91
- label: "Title"
92
- })]
93
- });
94
-
95
- // Inputs as object
96
- const button2 = createComponent(Button, {
97
- name: "Button",
98
- acceptsChildren: true,
99
- inputs: {
100
- title: createTextInput({
101
- label: "Title"
102
- })
103
- }
72
+ it("`acceptsChildren` should work alongside other inputs", ()=>{
73
+ const Button = (_)=>null;
74
+ const button1 = createComponent(Button, {
75
+ name: "Button",
76
+ acceptsChildren: true,
77
+ inputs: [
78
+ createTextInput({
79
+ name: "title",
80
+ label: "Title"
81
+ })
82
+ ]
83
+ });
84
+ const button2 = createComponent(Button, {
85
+ name: "Button",
86
+ acceptsChildren: true,
87
+ inputs: {
88
+ title: createTextInput({
89
+ label: "Title"
90
+ })
91
+ }
92
+ });
93
+ const snapshot = {
94
+ name: "Button",
95
+ acceptsChildren: true,
96
+ tags: [],
97
+ inputs: [
98
+ {
99
+ type: "text",
100
+ renderer: "Webiny/Input",
101
+ name: "title",
102
+ label: "Title"
103
+ },
104
+ {
105
+ type: "slot",
106
+ renderer: "Webiny/Slot",
107
+ name: "children",
108
+ list: true,
109
+ defaultValue: []
110
+ }
111
+ ]
112
+ };
113
+ expect(button1.manifest).toEqual(snapshot);
114
+ expect(button2.manifest).toEqual(snapshot);
104
115
  });
105
-
106
- // Both must produce the same component manifest
107
- const snapshot = {
108
- name: "Button",
109
- acceptsChildren: true,
110
- tags: [],
111
- inputs: [{
112
- type: "text",
113
- renderer: "Webiny/Input",
114
- name: "title",
115
- label: "Title"
116
- }, {
117
- type: "slot",
118
- renderer: "Webiny/Slot",
119
- name: "children",
120
- list: true,
121
- defaultValue: []
122
- }]
123
- };
124
- expect(button1.manifest).toEqual(snapshot);
125
- expect(button2.manifest).toEqual(snapshot);
126
- });
127
116
  });
128
117
 
129
118
  //# sourceMappingURL=createComponent.test.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["describe","expect","it","createComponent","createTextInput","createSlotInput","Button","_","button1","name","inputs","label","button2","title","children","snapshot","tags","type","renderer","list","defaultValue","manifest","toEqual","acceptsChildren"],"sources":["createComponent.test.ts"],"sourcesContent":["import { describe, expect, it } from \"vitest\";\nimport type { ComponentProps, ExtractInputNames } from \"~/types.js\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { createTextInput } from \"~/index.js\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\n\n/**\n * These tests are aimed at testing TS types rather than functionality itself.\n * // TODO: figure out how to enable typechecking for a single test. Currently it only typechecks at build time.\n */\n\ndescribe(\"Component Manifest\", () => {\n it(\"should support input arrays and strict input objects\", () => {\n const Button = (_: ComponentProps<{ title: string; children: React.ReactNode }>) => {\n return null;\n };\n\n type Inputs = ExtractInputNames<typeof Button>;\n\n const button1 = createComponent(Button, {\n name: \"Button\",\n inputs: [\n // Passing a generic narrows down the `name` property and provides autocomplete.\n createTextInput<Inputs>({\n name: \"title\",\n label: \"Title\"\n }),\n // Skipping the generic still performs typechecks, but doesn't provide autocomplete.\n createSlotInput({\n name: \"children\"\n })\n ]\n });\n\n const button2 = createComponent(Button, {\n name: \"Button\",\n inputs: {\n title: createTextInput({\n label: \"Title\"\n }),\n children: createSlotInput({})\n }\n });\n\n const snapshot = {\n name: \"Button\",\n tags: [],\n inputs: [\n {\n type: \"text\",\n label: \"Title\",\n renderer: \"Webiny/Input\",\n name: \"title\"\n },\n {\n type: \"slot\",\n renderer: \"Webiny/Slot\",\n name: \"children\",\n list: true,\n defaultValue: []\n }\n ]\n };\n\n expect(button1.manifest).toEqual(snapshot);\n expect(button2.manifest).toEqual(snapshot);\n });\n\n it(\"acceptsChildren should satisfy the `children` input requirement\", () => {\n const Button = (_: ComponentProps<{ children: React.ReactNode }>) => {\n return null;\n };\n\n const { manifest } = createComponent(Button, {\n name: \"Button\",\n acceptsChildren: true\n });\n\n expect(manifest).toEqual({\n name: \"Button\",\n acceptsChildren: true,\n tags: [],\n inputs: [\n {\n type: \"slot\",\n list: true,\n renderer: \"Webiny/Slot\",\n name: \"children\",\n defaultValue: []\n }\n ]\n });\n });\n\n it(\"`acceptsChildren` should work alongside other inputs\", () => {\n const Button = (_: ComponentProps<{ title: string; children: React.ReactNode }>) => {\n return null;\n };\n\n // Inputs as array\n const button1 = createComponent(Button, {\n name: \"Button\",\n acceptsChildren: true,\n inputs: [\n createTextInput({\n name: \"title\",\n label: \"Title\"\n })\n ]\n });\n\n // Inputs as object\n const button2 = createComponent(Button, {\n name: \"Button\",\n acceptsChildren: true,\n inputs: {\n title: createTextInput({\n label: \"Title\"\n })\n }\n });\n\n // Both must produce the same component manifest\n const snapshot = {\n name: \"Button\",\n acceptsChildren: true,\n tags: [],\n inputs: [\n {\n type: \"text\",\n renderer: \"Webiny/Input\",\n name: \"title\",\n label: \"Title\"\n },\n {\n type: \"slot\",\n renderer: \"Webiny/Slot\",\n name: \"children\",\n list: true,\n defaultValue: []\n }\n ]\n };\n\n expect(button1.manifest).toEqual(snapshot);\n expect(button2.manifest).toEqual(snapshot);\n });\n});\n"],"mappings":"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","ignoreList":[]}
1
+ {"version":3,"file":"createComponent.test.js","sources":["../src/createComponent.test.ts"],"sourcesContent":["import { describe, expect, it } from \"vitest\";\nimport type { ComponentProps, ExtractInputNames } from \"~/types.js\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { createTextInput } from \"~/index.js\";\nimport { createSlotInput } from \"@webiny/website-builder-sdk\";\n\n/**\n * These tests are aimed at testing TS types rather than functionality itself.\n * // TODO: figure out how to enable typechecking for a single test. Currently it only typechecks at build time.\n */\n\ndescribe(\"Component Manifest\", () => {\n it(\"should support input arrays and strict input objects\", () => {\n const Button = (_: ComponentProps<{ title: string; children: React.ReactNode }>) => {\n return null;\n };\n\n type Inputs = ExtractInputNames<typeof Button>;\n\n const button1 = createComponent(Button, {\n name: \"Button\",\n inputs: [\n // Passing a generic narrows down the `name` property and provides autocomplete.\n createTextInput<Inputs>({\n name: \"title\",\n label: \"Title\"\n }),\n // Skipping the generic still performs typechecks, but doesn't provide autocomplete.\n createSlotInput({\n name: \"children\"\n })\n ]\n });\n\n const button2 = createComponent(Button, {\n name: \"Button\",\n inputs: {\n title: createTextInput({\n label: \"Title\"\n }),\n children: createSlotInput({})\n }\n });\n\n const snapshot = {\n name: \"Button\",\n tags: [],\n inputs: [\n {\n type: \"text\",\n label: \"Title\",\n renderer: \"Webiny/Input\",\n name: \"title\"\n },\n {\n type: \"slot\",\n renderer: \"Webiny/Slot\",\n name: \"children\",\n list: true,\n defaultValue: []\n }\n ]\n };\n\n expect(button1.manifest).toEqual(snapshot);\n expect(button2.manifest).toEqual(snapshot);\n });\n\n it(\"acceptsChildren should satisfy the `children` input requirement\", () => {\n const Button = (_: ComponentProps<{ children: React.ReactNode }>) => {\n return null;\n };\n\n const { manifest } = createComponent(Button, {\n name: \"Button\",\n acceptsChildren: true\n });\n\n expect(manifest).toEqual({\n name: \"Button\",\n acceptsChildren: true,\n tags: [],\n inputs: [\n {\n type: \"slot\",\n list: true,\n renderer: \"Webiny/Slot\",\n name: \"children\",\n defaultValue: []\n }\n ]\n });\n });\n\n it(\"`acceptsChildren` should work alongside other inputs\", () => {\n const Button = (_: ComponentProps<{ title: string; children: React.ReactNode }>) => {\n return null;\n };\n\n // Inputs as array\n const button1 = createComponent(Button, {\n name: \"Button\",\n acceptsChildren: true,\n inputs: [\n createTextInput({\n name: \"title\",\n label: \"Title\"\n })\n ]\n });\n\n // Inputs as object\n const button2 = createComponent(Button, {\n name: \"Button\",\n acceptsChildren: true,\n inputs: {\n title: createTextInput({\n label: \"Title\"\n })\n }\n });\n\n // Both must produce the same component manifest\n const snapshot = {\n name: \"Button\",\n acceptsChildren: true,\n tags: [],\n inputs: [\n {\n type: \"text\",\n renderer: \"Webiny/Input\",\n name: \"title\",\n label: \"Title\"\n },\n {\n type: \"slot\",\n renderer: \"Webiny/Slot\",\n name: \"children\",\n list: true,\n defaultValue: []\n }\n ]\n };\n\n expect(button1.manifest).toEqual(snapshot);\n expect(button2.manifest).toEqual(snapshot);\n });\n});\n"],"names":["describe","it","Button","_","button1","createComponent","createTextInput","createSlotInput","button2","snapshot","expect","manifest"],"mappings":";;;;AAWAA,SAAS,sBAAsB;IAC3BC,GAAG,wDAAwD;QACvD,MAAMC,SAAS,CAACC,IACL;QAKX,MAAMC,UAAUC,gBAAgBH,QAAQ;YACpC,MAAM;YACN,QAAQ;gBAEJI,gBAAwB;oBACpB,MAAM;oBACN,OAAO;gBACX;gBAEAC,gBAAgB;oBACZ,MAAM;gBACV;aACH;QACL;QAEA,MAAMC,UAAUH,gBAAgBH,QAAQ;YACpC,MAAM;YACN,QAAQ;gBACJ,OAAOI,gBAAgB;oBACnB,OAAO;gBACX;gBACA,UAAUC,gBAAgB,CAAC;YAC/B;QACJ;QAEA,MAAME,WAAW;YACb,MAAM;YACN,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,OAAO;oBACP,UAAU;oBACV,MAAM;gBACV;gBACA;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;QAEAC,OAAON,QAAQ,QAAQ,EAAE,OAAO,CAACK;QACjCC,OAAOF,QAAQ,QAAQ,EAAE,OAAO,CAACC;IACrC;IAEAR,GAAG,mEAAmE;QAClE,MAAMC,SAAS,CAACC,IACL;QAGX,MAAM,EAAEQ,QAAQ,EAAE,GAAGN,gBAAgBH,QAAQ;YACzC,MAAM;YACN,iBAAiB;QACrB;QAEAQ,OAAOC,UAAU,OAAO,CAAC;YACrB,MAAM;YACN,iBAAiB;YACjB,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;IACJ;IAEAV,GAAG,wDAAwD;QACvD,MAAMC,SAAS,CAACC,IACL;QAIX,MAAMC,UAAUC,gBAAgBH,QAAQ;YACpC,MAAM;YACN,iBAAiB;YACjB,QAAQ;gBACJI,gBAAgB;oBACZ,MAAM;oBACN,OAAO;gBACX;aACH;QACL;QAGA,MAAME,UAAUH,gBAAgBH,QAAQ;YACpC,MAAM;YACN,iBAAiB;YACjB,QAAQ;gBACJ,OAAOI,gBAAgB;oBACnB,OAAO;gBACX;YACJ;QACJ;QAGA,MAAMG,WAAW;YACb,MAAM;YACN,iBAAiB;YACjB,MAAM,EAAE;YACR,QAAQ;gBACJ;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,OAAO;gBACX;gBACA;oBACI,MAAM;oBACN,UAAU;oBACV,MAAM;oBACN,MAAM;oBACN,cAAc,EAAE;gBACpB;aACH;QACL;QAEAC,OAAON,QAAQ,QAAQ,EAAE,OAAO,CAACK;QACjCC,OAAOF,QAAQ,QAAQ,EAAE,OAAO,CAACC;IACrC;AACJ"}
@@ -1,8 +1,5 @@
1
- import React from "react";
2
- export const BoxComponent = ({
3
- inputs
4
- }) => {
5
- return /*#__PURE__*/React.createElement(React.Fragment, null, inputs.children);
6
- };
1
+ import react from "react";
2
+ const BoxComponent = ({ inputs })=>/*#__PURE__*/ react.createElement(react.Fragment, null, inputs.children);
3
+ export { BoxComponent };
7
4
 
8
5
  //# sourceMappingURL=Box.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","BoxComponent","inputs","createElement","Fragment","children"],"sources":["Box.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types.js\";\n\nexport const BoxComponent = ({ inputs }: ComponentPropsWithChildren) => {\n return <>{inputs.children}</>;\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAGzB,OAAO,MAAMC,YAAY,GAAGA,CAAC;EAAEC;AAAmC,CAAC,KAAK;EACpE,oBAAOF,KAAA,CAAAG,aAAA,CAAAH,KAAA,CAAAI,QAAA,QAAGF,MAAM,CAACG,QAAW,CAAC;AACjC,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"editorComponents/Box.js","sources":["../../src/editorComponents/Box.tsx"],"sourcesContent":["import React from \"react\";\nimport type { ComponentPropsWithChildren } from \"~/types.js\";\n\nexport const BoxComponent = ({ inputs }: ComponentPropsWithChildren) => {\n return <>{inputs.children}</>;\n};\n"],"names":["BoxComponent","inputs"],"mappings":";AAGO,MAAMA,eAAe,CAAC,EAAEC,MAAM,EAA8B,GACxD,WAAP,GAAO,0CAAGA,OAAO,QAAQ"}
@@ -1,22 +1,22 @@
1
1
  "use client";
2
-
3
2
  import { createComponent } from "../createComponent.js";
4
3
  import { BoxComponent } from "./Box.js";
5
- export const Box = createComponent(BoxComponent, {
6
- name: "Webiny/Box",
7
- label: "Box",
8
- aiContext: "Generic container with no visual output of its own. Use it to group child elements and apply shared padding, margin, background, or other styles.",
9
- group: "basic",
10
- image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z"/></svg>`,
11
- acceptsChildren: true,
12
- defaults: {
13
- styles: {
14
- paddingTop: "5px",
15
- paddingRight: "5px",
16
- paddingBottom: "5px",
17
- paddingLeft: "5px"
4
+ const Box = createComponent(BoxComponent, {
5
+ name: "Webiny/Box",
6
+ label: "Box",
7
+ aiContext: "Generic container with no visual output of its own. Use it to group child elements and apply shared padding, margin, background, or other styles.",
8
+ group: "basic",
9
+ image: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z"/></svg>',
10
+ acceptsChildren: true,
11
+ defaults: {
12
+ styles: {
13
+ paddingTop: "5px",
14
+ paddingRight: "5px",
15
+ paddingBottom: "5px",
16
+ paddingLeft: "5px"
17
+ }
18
18
  }
19
- }
20
19
  });
20
+ export { Box };
21
21
 
22
22
  //# sourceMappingURL=Box.manifest.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["createComponent","BoxComponent","Box","name","label","aiContext","group","image","acceptsChildren","defaults","styles","paddingTop","paddingRight","paddingBottom","paddingLeft"],"sources":["Box.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { BoxComponent } from \"./Box.js\";\n\nexport const Box = createComponent(BoxComponent, {\n name: \"Webiny/Box\",\n label: \"Box\",\n aiContext:\n \"Generic container with no visual output of its own. Use it to group child elements and apply shared padding, margin, background, or other styles.\",\n group: \"basic\",\n image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z\"/></svg>`,\n acceptsChildren: true,\n defaults: {\n styles: {\n paddingTop: \"5px\",\n paddingRight: \"5px\",\n paddingBottom: \"5px\",\n paddingLeft: \"5px\"\n }\n }\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe;AACxB,SAASC,YAAY;AAErB,OAAO,MAAMC,GAAG,GAAGF,eAAe,CAACC,YAAY,EAAE;EAC7CE,IAAI,EAAE,YAAY;EAClBC,KAAK,EAAE,KAAK;EACZC,SAAS,EACL,mJAAmJ;EACvJC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,+LAA+L;EACtMC,eAAe,EAAE,IAAI;EACrBC,QAAQ,EAAE;IACNC,MAAM,EAAE;MACJC,UAAU,EAAE,KAAK;MACjBC,YAAY,EAAE,KAAK;MACnBC,aAAa,EAAE,KAAK;MACpBC,WAAW,EAAE;IACjB;EACJ;AACJ,CAAC,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"editorComponents/Box.manifest.js","sources":["../../src/editorComponents/Box.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { BoxComponent } from \"./Box.js\";\n\nexport const Box = createComponent(BoxComponent, {\n name: \"Webiny/Box\",\n label: \"Box\",\n aiContext:\n \"Generic container with no visual output of its own. Use it to group child elements and apply shared padding, margin, background, or other styles.\",\n group: \"basic\",\n image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z\"/></svg>`,\n acceptsChildren: true,\n defaults: {\n styles: {\n paddingTop: \"5px\",\n paddingRight: \"5px\",\n paddingBottom: \"5px\",\n paddingLeft: \"5px\"\n }\n }\n});\n"],"names":["Box","createComponent","BoxComponent"],"mappings":";;;AAIO,MAAMA,MAAMC,gBAAgBC,cAAc;IAC7C,MAAM;IACN,OAAO;IACP,WACI;IACJ,OAAO;IACP,OAAO;IACP,iBAAiB;IACjB,UAAU;QACN,QAAQ;YACJ,YAAY;YACZ,cAAc;YACd,eAAe;YACf,aAAa;QACjB;IACJ;AACJ"}
@@ -1,39 +1,30 @@
1
- import React from "react";
1
+ import react from "react";
2
2
  import { contentSdk } from "@webiny/website-builder-sdk";
3
3
  import { useDocumentFragments } from "../components/FragmentsProvider.js";
4
- const findFixedFragmentByName = (fragments, name) => {
5
- return fragments.filter(fragment => fragment.type === "fixed").find(fragment => fragment.name === name);
6
- };
7
- export const FragmentComponent = ({
8
- inputs
9
- }) => {
10
- const isEditing = contentSdk.isEditing();
11
- const fragments = useDocumentFragments();
12
- const fragment = findFixedFragmentByName(fragments, inputs.name);
13
- if (!fragment && isEditing) {
14
- return /*#__PURE__*/React.createElement(FragmentPlaceholder, {
15
- name: inputs.name
4
+ const findFixedFragmentByName = (fragments, name)=>fragments.filter((fragment)=>"fixed" === fragment.type).find((fragment)=>fragment.name === name);
5
+ const FragmentComponent = ({ inputs })=>{
6
+ const isEditing = contentSdk.isEditing();
7
+ const fragments = useDocumentFragments();
8
+ const fragment = findFixedFragmentByName(fragments, inputs.name);
9
+ if (!fragment && isEditing) return /*#__PURE__*/ react.createElement(FragmentPlaceholder, {
10
+ name: inputs.name
16
11
  });
17
- }
18
- if (fragment) {
19
- return /*#__PURE__*/React.createElement(React.Fragment, null, fragment.element);
20
- }
21
- return null;
12
+ if (fragment) return /*#__PURE__*/ react.createElement(react.Fragment, null, fragment.element);
13
+ return null;
22
14
  };
23
- const FragmentPlaceholder = ({
24
- name
25
- }) => {
26
- const fragmentName = name ? /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0", /*#__PURE__*/React.createElement("strong", null, name), "\xA0") : /*#__PURE__*/React.createElement(React.Fragment, null, "\xA0");
27
- return /*#__PURE__*/React.createElement("div", {
28
- style: {
29
- display: "flex",
30
- height: "100px",
31
- backgroundColor: "#f4f4f4",
32
- justifyContent: "center",
33
- alignItems: "center",
34
- fill: "#ffffff"
35
- }
36
- }, "This is a placeholder for", fragmentName, "content coming from your frontend app.");
15
+ const FragmentPlaceholder = ({ name })=>{
16
+ const fragmentName = name ? /*#__PURE__*/ react.createElement(react.Fragment, null, "\xa0", /*#__PURE__*/ react.createElement("strong", null, name), "\xa0") : /*#__PURE__*/ react.createElement(react.Fragment, null, "\xa0");
17
+ return /*#__PURE__*/ react.createElement("div", {
18
+ style: {
19
+ display: "flex",
20
+ height: "100px",
21
+ backgroundColor: "#f4f4f4",
22
+ justifyContent: "center",
23
+ alignItems: "center",
24
+ fill: "#ffffff"
25
+ }
26
+ }, "This is a placeholder for", fragmentName, "content coming from your frontend app.");
37
27
  };
28
+ export { FragmentComponent };
38
29
 
39
30
  //# sourceMappingURL=Fragment.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["React","contentSdk","useDocumentFragments","findFixedFragmentByName","fragments","name","filter","fragment","type","find","FragmentComponent","inputs","isEditing","createElement","FragmentPlaceholder","Fragment","element","fragmentName","style","display","height","backgroundColor","justifyContent","alignItems","fill"],"sources":["Fragment.tsx"],"sourcesContent":["import React from \"react\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport { useDocumentFragments } from \"~/components/FragmentsProvider.js\";\nimport type { ComponentProps } from \"~/types.js\";\nimport type { DocumentFragments } from \"~/components/FragmentsProvider.js\";\n\ntype FragmentComponentProps = ComponentProps<{\n name: string;\n}>;\n\nconst findFixedFragmentByName = (fragments: DocumentFragments, name: string) => {\n return fragments\n .filter(fragment => fragment.type === \"fixed\")\n .find(fragment => fragment.name === name);\n};\n\nexport const FragmentComponent = ({ inputs }: FragmentComponentProps) => {\n const isEditing = contentSdk.isEditing();\n const fragments = useDocumentFragments();\n const fragment = findFixedFragmentByName(fragments, inputs.name);\n\n if (!fragment && isEditing) {\n return <FragmentPlaceholder name={inputs.name} />;\n }\n\n if (fragment) {\n return <>{fragment.element}</>;\n }\n\n return null;\n};\n\nconst FragmentPlaceholder = ({ name }: { name: string }) => {\n const fragmentName = name ? (\n <>\n &nbsp;<strong>{name}</strong>&nbsp;\n </>\n ) : (\n <>&nbsp;</>\n );\n return (\n <div\n style={{\n display: \"flex\",\n height: \"100px\",\n backgroundColor: \"#f4f4f4\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fill: \"#ffffff\"\n }}\n >\n This is a placeholder for{fragmentName}content coming from your frontend app.\n </div>\n );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,UAAU,QAAQ,6BAA6B;AACxD,SAASC,oBAAoB;AAQ7B,MAAMC,uBAAuB,GAAGA,CAACC,SAA4B,EAAEC,IAAY,KAAK;EAC5E,OAAOD,SAAS,CACXE,MAAM,CAACC,QAAQ,IAAIA,QAAQ,CAACC,IAAI,KAAK,OAAO,CAAC,CAC7CC,IAAI,CAACF,QAAQ,IAAIA,QAAQ,CAACF,IAAI,KAAKA,IAAI,CAAC;AACjD,CAAC;AAED,OAAO,MAAMK,iBAAiB,GAAGA,CAAC;EAAEC;AAA+B,CAAC,KAAK;EACrE,MAAMC,SAAS,GAAGX,UAAU,CAACW,SAAS,CAAC,CAAC;EACxC,MAAMR,SAAS,GAAGF,oBAAoB,CAAC,CAAC;EACxC,MAAMK,QAAQ,GAAGJ,uBAAuB,CAACC,SAAS,EAAEO,MAAM,CAACN,IAAI,CAAC;EAEhE,IAAI,CAACE,QAAQ,IAAIK,SAAS,EAAE;IACxB,oBAAOZ,KAAA,CAAAa,aAAA,CAACC,mBAAmB;MAACT,IAAI,EAAEM,MAAM,CAACN;IAAK,CAAE,CAAC;EACrD;EAEA,IAAIE,QAAQ,EAAE;IACV,oBAAOP,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAe,QAAA,QAAGR,QAAQ,CAACS,OAAU,CAAC;EAClC;EAEA,OAAO,IAAI;AACf,CAAC;AAED,MAAMF,mBAAmB,GAAGA,CAAC;EAAET;AAAuB,CAAC,KAAK;EACxD,MAAMY,YAAY,GAAGZ,IAAI,gBACrBL,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAe,QAAA,QAAE,MACQ,eAAAf,KAAA,CAAAa,aAAA,iBAASR,IAAa,CAAC,QAC/B,CAAC,gBAEHL,KAAA,CAAAa,aAAA,CAAAb,KAAA,CAAAe,QAAA,QAAE,MAAQ,CACb;EACD,oBACIf,KAAA,CAAAa,aAAA;IACIK,KAAK,EAAE;MACHC,OAAO,EAAE,MAAM;MACfC,MAAM,EAAE,OAAO;MACfC,eAAe,EAAE,SAAS;MAC1BC,cAAc,EAAE,QAAQ;MACxBC,UAAU,EAAE,QAAQ;MACpBC,IAAI,EAAE;IACV;EAAE,GACL,2BAC4B,EAACP,YAAY,EAAC,wCACtC,CAAC;AAEd,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"editorComponents/Fragment.js","sources":["../../src/editorComponents/Fragment.tsx"],"sourcesContent":["import React from \"react\";\nimport { contentSdk } from \"@webiny/website-builder-sdk\";\nimport { useDocumentFragments } from \"~/components/FragmentsProvider.js\";\nimport type { ComponentProps } from \"~/types.js\";\nimport type { DocumentFragments } from \"~/components/FragmentsProvider.js\";\n\ntype FragmentComponentProps = ComponentProps<{\n name: string;\n}>;\n\nconst findFixedFragmentByName = (fragments: DocumentFragments, name: string) => {\n return fragments\n .filter(fragment => fragment.type === \"fixed\")\n .find(fragment => fragment.name === name);\n};\n\nexport const FragmentComponent = ({ inputs }: FragmentComponentProps) => {\n const isEditing = contentSdk.isEditing();\n const fragments = useDocumentFragments();\n const fragment = findFixedFragmentByName(fragments, inputs.name);\n\n if (!fragment && isEditing) {\n return <FragmentPlaceholder name={inputs.name} />;\n }\n\n if (fragment) {\n return <>{fragment.element}</>;\n }\n\n return null;\n};\n\nconst FragmentPlaceholder = ({ name }: { name: string }) => {\n const fragmentName = name ? (\n <>\n &nbsp;<strong>{name}</strong>&nbsp;\n </>\n ) : (\n <>&nbsp;</>\n );\n return (\n <div\n style={{\n display: \"flex\",\n height: \"100px\",\n backgroundColor: \"#f4f4f4\",\n justifyContent: \"center\",\n alignItems: \"center\",\n fill: \"#ffffff\"\n }}\n >\n This is a placeholder for{fragmentName}content coming from your frontend app.\n </div>\n );\n};\n"],"names":["findFixedFragmentByName","fragments","name","fragment","FragmentComponent","inputs","isEditing","contentSdk","useDocumentFragments","FragmentPlaceholder","fragmentName"],"mappings":";;;AAUA,MAAMA,0BAA0B,CAACC,WAA8BC,OACpDD,UACF,MAAM,CAACE,CAAAA,WAAYA,AAAkB,YAAlBA,SAAS,IAAI,EAChC,IAAI,CAACA,CAAAA,WAAYA,SAAS,IAAI,KAAKD;AAGrC,MAAME,oBAAoB,CAAC,EAAEC,MAAM,EAA0B;IAChE,MAAMC,YAAYC,WAAW,SAAS;IACtC,MAAMN,YAAYO;IAClB,MAAML,WAAWH,wBAAwBC,WAAWI,OAAO,IAAI;IAE/D,IAAI,CAACF,YAAYG,WACb,OAAO,WAAP,GAAO,oBAACG,qBAAmBA;QAAC,MAAMJ,OAAO,IAAI;;IAGjD,IAAIF,UACA,OAAO,WAAP,GAAO,0CAAGA,SAAS,OAAO;IAG9B,OAAO;AACX;AAEA,MAAMM,sBAAsB,CAAC,EAAEP,IAAI,EAAoB;IACnD,MAAMQ,eAAeR,OAAO,WAAPA,GACjB,0CAAE,sBACQ,oBAAC,gBAAQA,OAAc,wBAGjC,0CAAE;IAEN,OAAO,WAAP,GACI,oBAAC;QACG,OAAO;YACH,SAAS;YACT,QAAQ;YACR,iBAAiB;YACjB,gBAAgB;YAChB,YAAY;YACZ,MAAM;QACV;OACH,6BAC6BQ,cAAa;AAGnD"}
@@ -1,20 +1,22 @@
1
1
  "use client";
2
-
3
2
  import { createTextInput } from "@webiny/website-builder-sdk";
4
3
  import { createComponent } from "../createComponent.js";
5
4
  import { FragmentComponent } from "./Fragment.js";
6
- export const Fragment = createComponent(FragmentComponent, {
7
- name: "Webiny/Fragment",
8
- label: "Fragment",
9
- useInAiContentGeneration: false,
10
- group: "basic",
11
- image: `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z"/></svg>`,
12
- inputs: [createTextInput({
13
- name: "name",
5
+ const Fragment = createComponent(FragmentComponent, {
6
+ name: "Webiny/Fragment",
14
7
  label: "Fragment",
15
- description: "Select fragment to display.",
16
- renderer: "Webiny/FragmentSelector"
17
- })]
8
+ useInAiContentGeneration: false,
9
+ group: "basic",
10
+ image: '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z"/></svg>',
11
+ inputs: [
12
+ createTextInput({
13
+ name: "name",
14
+ label: "Fragment",
15
+ description: "Select fragment to display.",
16
+ renderer: "Webiny/FragmentSelector"
17
+ })
18
+ ]
18
19
  });
20
+ export { Fragment };
19
21
 
20
22
  //# sourceMappingURL=Fragment.manifest.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["createTextInput","createComponent","FragmentComponent","Fragment","name","label","useInAiContentGeneration","group","image","inputs","description","renderer"],"sources":["Fragment.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createTextInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { FragmentComponent } from \"./Fragment.js\";\n\nexport const Fragment = createComponent(FragmentComponent, {\n name: \"Webiny/Fragment\",\n label: \"Fragment\",\n useInAiContentGeneration: false,\n group: \"basic\",\n image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z\"/></svg>`,\n inputs: [\n createTextInput({\n name: \"name\",\n label: \"Fragment\",\n description: \"Select fragment to display.\",\n renderer: \"Webiny/FragmentSelector\"\n })\n ]\n});\n"],"mappings":"AAAA,YAAY;;AACZ,SAASA,eAAe,QAAQ,6BAA6B;AAC7D,SAASC,eAAe;AACxB,SAASC,iBAAiB;AAE1B,OAAO,MAAMC,QAAQ,GAAGF,eAAe,CAACC,iBAAiB,EAAE;EACvDE,IAAI,EAAE,iBAAiB;EACvBC,KAAK,EAAE,UAAU;EACjBC,wBAAwB,EAAE,KAAK;EAC/BC,KAAK,EAAE,OAAO;EACdC,KAAK,EAAE,+LAA+L;EACtMC,MAAM,EAAE,CACJT,eAAe,CAAC;IACZI,IAAI,EAAE,MAAM;IACZC,KAAK,EAAE,UAAU;IACjBK,WAAW,EAAE,6BAA6B;IAC1CC,QAAQ,EAAE;EACd,CAAC,CAAC;AAEV,CAAC,CAAC","ignoreList":[]}
1
+ {"version":3,"file":"editorComponents/Fragment.manifest.js","sources":["../../src/editorComponents/Fragment.manifest.ts"],"sourcesContent":["\"use client\";\nimport { createTextInput } from \"@webiny/website-builder-sdk\";\nimport { createComponent } from \"~/createComponent.js\";\nimport { FragmentComponent } from \"./Fragment.js\";\n\nexport const Fragment = createComponent(FragmentComponent, {\n name: \"Webiny/Fragment\",\n label: \"Fragment\",\n useInAiContentGeneration: false,\n group: \"basic\",\n image: `<svg xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"#e8eaed\"><path d=\"M120-120v-720h720v720H120Zm80-80h560v-560H200v560Zm0 0v-560 560Z\"/></svg>`,\n inputs: [\n createTextInput({\n name: \"name\",\n label: \"Fragment\",\n description: \"Select fragment to display.\",\n renderer: \"Webiny/FragmentSelector\"\n })\n ]\n});\n"],"names":["Fragment","createComponent","FragmentComponent","createTextInput"],"mappings":";;;;AAKO,MAAMA,WAAWC,gBAAgBC,mBAAmB;IACvD,MAAM;IACN,OAAO;IACP,0BAA0B;IAC1B,OAAO;IACP,OAAO;IACP,QAAQ;QACJC,gBAAgB;YACZ,MAAM;YACN,OAAO;YACP,aAAa;YACb,UAAU;QACd;KACH;AACL"}