Skip to content

Commit 21d09cc

Browse files
TrySoundTrySound
authored
refactor: migrate radix to component content model (webstudio-is#5143)
Replaced legacy constraints with component content model in radix components. Checked all locally. Removed meta.type for good.
1 parent a449f66 commit 21d09cc

19 files changed

Lines changed: 249 additions & 445 deletions

‎apps/builder/app/shared/matcher.test.tsx‎

Lines changed: 0 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -677,7 +677,6 @@ describe("is tree matching", () => {
677677
[
678678
"ListItem",
679679
{
680-
type: "container",
681680
icon: "",
682681
constraints: {
683682
relation: "parent",
@@ -688,7 +687,6 @@ describe("is tree matching", () => {
688687
[
689688
"Tabs",
690689
{
691-
type: "container",
692690
icon: "",
693691
constraints: {
694692
relation: "descendant",
@@ -813,25 +811,6 @@ describe("is instance detachable", () => {
813811
).toBeTruthy();
814812
});
815813

816-
test("prevent deleting last matching instance", () => {
817-
expect(
818-
isInstanceDetachable({
819-
...renderData(
820-
<$.Body ws:id="body">
821-
<radix.Tabs ws:id="tabs">
822-
<radix.TabsList ws:id="list">
823-
<radix.TabsTrigger ws:id="trigger1"></radix.TabsTrigger>
824-
</radix.TabsList>
825-
<radix.TabsContent ws:id="content1"></radix.TabsContent>
826-
</radix.Tabs>
827-
</$.Body>
828-
),
829-
metas,
830-
instanceSelector: ["trigger1", "list", "tabs", "body"],
831-
})
832-
).toBeFalsy();
833-
});
834-
835814
test("allow deleting when siblings not matching", () => {
836815
expect(
837816
isInstanceDetachable({

‎packages/react-sdk/src/component-generator.test.tsx‎

Lines changed: 3 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1148,14 +1148,8 @@ test("generate prop with index within ancestor", () => {
11481148
rootInstanceId: "body",
11491149
parameters: [],
11501150
metas: new Map<string, WsComponentMeta>([
1151-
[
1152-
"TabsTrigger",
1153-
{ type: "container", icon: "", indexWithinAncestor: "Tabs" },
1154-
],
1155-
[
1156-
"TabsContent",
1157-
{ type: "container", icon: "", indexWithinAncestor: "Tabs" },
1158-
],
1151+
["TabsTrigger", { icon: "", indexWithinAncestor: "Tabs" }],
1152+
["TabsContent", { icon: "", indexWithinAncestor: "Tabs" }],
11591153
]),
11601154
...renderData(
11611155
<$.Body ws:id="body">
@@ -1212,10 +1206,7 @@ test("ignore ws:block-template when generate index attribute", () => {
12121206
rootInstanceId: "bodyId",
12131207
parameters: [],
12141208
metas: new Map<string, WsComponentMeta>([
1215-
[
1216-
"TabsTrigger",
1217-
{ type: "container", icon: "", indexWithinAncestor: "Tabs" },
1218-
],
1209+
["TabsTrigger", { icon: "", indexWithinAncestor: "Tabs" }],
12191210
]),
12201211
...renderData(
12211212
<$.Body ws:id="bodyId">

‎packages/sdk-components-animation/src/animate-children.ws.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { animation } from "./shared/meta";
44

55
export const meta: WsComponentMeta = {
66
category: "animations",
7-
type: "container",
87
description: "Animation Group component is designed to animate its children.",
98
icon: AnimationGroupIcon,
109
order: 5,

‎packages/sdk-components-animation/src/animate-text.ws.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { props } from "./__generated__/animate-text.props";
55

66
export const meta: WsComponentMeta = {
77
category: "animations",
8-
type: "container",
98
description:
109
"Text animation allows you to split text by char or by word to animate it.",
1110
icon: TextAnimationIcon,

‎packages/sdk-components-animation/src/stagger-animation.ws.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { props } from "./__generated__/stagger-animation.props";
55

66
export const meta: WsComponentMeta = {
77
category: "animations",
8-
type: "container",
98
description:
109
"Stagger animation allows you to animate children elements with a sliding window.",
1110
icon: StaggerAnimationIcon,

‎packages/sdk-components-animation/src/video-animation.ws.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
33
import { props } from "./__generated__/video-animation.props";
44

55
export const meta: WsComponentMeta = {
6-
type: "container",
76
icon: Youtube1cIcon,
87
label: "Video Animation",
98
contentModel: {

‎packages/sdk-components-react-radix/src/accordion.ws.ts‎

Lines changed: 30 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
} from "@webstudio-is/icons/svg";
88
import {
99
defaultStates,
10-
type PresetStyle,
1110
type WsComponentMeta,
1211
type WsComponentPropsMeta,
1312
} from "@webstudio-is/sdk";
@@ -22,58 +21,40 @@ import {
2221
propsAccordionContent,
2322
} from "./__generated__/accordion.props";
2423

25-
const presetStyle = {
26-
div,
27-
} satisfies PresetStyle<"div">;
28-
2924
export const metaAccordion: WsComponentMeta = {
30-
type: "container",
3125
icon: AccordionIcon,
32-
presetStyle,
33-
constraints: [
34-
{
35-
relation: "descendant",
36-
component: { $eq: radix.AccordionItem },
37-
},
38-
],
26+
contentModel: {
27+
category: "instance",
28+
children: ["instance"],
29+
descendants: [radix.AccordionItem],
30+
},
31+
presetStyle: {
32+
div,
33+
},
3934
};
4035

4136
export const metaAccordionItem: WsComponentMeta = {
42-
type: "container",
4337
label: "Item",
4438
icon: ItemIcon,
45-
constraints: [
46-
{
47-
relation: "ancestor",
48-
component: { $eq: radix.Accordion },
49-
},
50-
{
51-
relation: "descendant",
52-
component: { $eq: radix.AccordionHeader },
53-
},
54-
{
55-
relation: "descendant",
56-
component: { $eq: radix.AccordionContent },
57-
},
58-
],
5939
indexWithinAncestor: radix.Accordion,
60-
presetStyle,
40+
contentModel: {
41+
category: "none",
42+
children: ["instance"],
43+
descendants: [radix.AccordionHeader, radix.AccordionContent],
44+
},
45+
presetStyle: {
46+
div,
47+
},
6148
};
6249

6350
export const metaAccordionHeader: WsComponentMeta = {
64-
type: "container",
6551
label: "Item Header",
6652
icon: HeaderIcon,
67-
constraints: [
68-
{
69-
relation: "ancestor",
70-
component: { $eq: radix.AccordionItem },
71-
},
72-
{
73-
relation: "descendant",
74-
component: { $eq: radix.AccordionTrigger },
75-
},
76-
],
53+
contentModel: {
54+
category: "none",
55+
children: ["instance"],
56+
descendants: [radix.AccordionTrigger],
57+
},
7758
presetStyle: {
7859
h3: [
7960
...h3,
@@ -90,12 +71,11 @@ export const metaAccordionHeader: WsComponentMeta = {
9071
};
9172

9273
export const metaAccordionTrigger: WsComponentMeta = {
93-
type: "container",
9474
label: "Item Trigger",
9575
icon: TriggerIcon,
96-
constraints: {
97-
relation: "ancestor",
98-
component: { $eq: radix.AccordionHeader },
76+
contentModel: {
77+
category: "none",
78+
children: ["instance", "rich-text"],
9979
},
10080
states: [
10181
...defaultStates,
@@ -111,14 +91,15 @@ export const metaAccordionTrigger: WsComponentMeta = {
11191
};
11292

11393
export const metaAccordionContent: WsComponentMeta = {
114-
type: "container",
11594
label: "Item Content",
11695
icon: ContentIcon,
117-
constraints: {
118-
relation: "ancestor",
119-
component: { $eq: radix.AccordionItem },
96+
contentModel: {
97+
category: "none",
98+
children: ["instance", "rich-text"],
99+
},
100+
presetStyle: {
101+
div,
120102
},
121-
presetStyle,
122103
};
123104

124105
export const propsMetaAccordion: WsComponentPropsMeta = {

‎packages/sdk-components-react-radix/src/checkbox.ws.ts‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ import {
1313
} from "./__generated__/checkbox.props";
1414

1515
export const metaCheckbox: WsComponentMeta = {
16-
type: "container",
17-
constraints: {
18-
relation: "descendant",
19-
component: { $eq: radix.CheckboxIndicator },
20-
},
2116
icon: CheckboxCheckedIcon,
17+
contentModel: {
18+
category: "instance",
19+
children: ["instance"],
20+
descendants: [radix.CheckboxIndicator],
21+
},
2222
states: [
2323
...defaultStates,
2424
{
@@ -38,12 +38,11 @@ export const metaCheckbox: WsComponentMeta = {
3838
};
3939

4040
export const metaCheckboxIndicator: WsComponentMeta = {
41-
type: "container",
42-
constraints: {
43-
relation: "ancestor",
44-
component: { $eq: radix.Checkbox },
45-
},
4641
icon: TriggerIcon,
42+
contentModel: {
43+
category: "none",
44+
children: ["instance", "rich-text"],
45+
},
4746
states: defaultStates,
4847
presetStyle: {
4948
span,

‎packages/sdk-components-react-radix/src/collapsible.ws.ts‎

Lines changed: 14 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -13,42 +13,34 @@ import {
1313
} from "./__generated__/collapsible.props";
1414

1515
export const metaCollapsible: WsComponentMeta = {
16-
type: "container",
17-
constraints: [
18-
{
19-
relation: "descendant",
20-
component: { $eq: radix.CollapsibleTrigger },
21-
},
22-
{
23-
relation: "descendant",
24-
component: { $eq: radix.CollapsibleContent },
25-
},
26-
],
16+
icon: CollapsibleIcon,
17+
contentModel: {
18+
category: "instance",
19+
children: ["instance"],
20+
descendants: [radix.CollapsibleTrigger, radix.CollapsibleContent],
21+
},
2722
presetStyle: {
2823
div,
2924
},
30-
icon: CollapsibleIcon,
3125
};
3226

3327
export const metaCollapsibleTrigger: WsComponentMeta = {
34-
type: "container",
3528
icon: TriggerIcon,
36-
constraints: {
37-
relation: "ancestor",
38-
component: { $eq: radix.Collapsible },
29+
contentModel: {
30+
category: "none",
31+
children: ["instance", "rich-text"],
3932
},
4033
};
4134

4235
export const metaCollapsibleContent: WsComponentMeta = {
43-
type: "container",
36+
icon: ContentIcon,
37+
contentModel: {
38+
category: "none",
39+
children: ["instance", "rich-text"],
40+
},
4441
presetStyle: {
4542
div,
4643
},
47-
icon: ContentIcon,
48-
constraints: {
49-
relation: "ancestor",
50-
component: { $eq: radix.Collapsible },
51-
},
5244
};
5345

5446
export const propsMetaCollapsible: WsComponentPropsMeta = {

0 commit comments

Comments
 (0)