refactor: migrate radix to component content model (#5143)

Replaced legacy constraints with component content model in radix
components. Checked all locally.

Removed meta.type for good.

Author: TrySound

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

@@ -677,7 +677,6 @@ describe("is tree matching", () => {
     [
       "ListItem",
       {
-        type: "container",
         icon: "",
         constraints: {
           relation: "parent",
@@ -688,7 +687,6 @@ describe("is tree matching", () => {
     [
       "Tabs",
       {
-        type: "container",
         icon: "",
         constraints: {
           relation: "descendant",
@@ -813,25 +811,6 @@ describe("is instance detachable", () => {
     ).toBeTruthy();
   });
 
-  test("prevent deleting last matching instance", () => {
-    expect(
-      isInstanceDetachable({
-        ...renderData(
-          <$.Body ws:id="body">
-            <radix.Tabs ws:id="tabs">
-              <radix.TabsList ws:id="list">
-                <radix.TabsTrigger ws:id="trigger1"></radix.TabsTrigger>
-              </radix.TabsList>
-              <radix.TabsContent ws:id="content1"></radix.TabsContent>
-            </radix.Tabs>
-          </$.Body>
-        ),
-        metas,
-        instanceSelector: ["trigger1", "list", "tabs", "body"],
-      })
-    ).toBeFalsy();
-  });
-
   test("allow deleting when siblings not matching", () => {
     expect(
       isInstanceDetachable({

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

@@ -1148,14 +1148,8 @@ test("generate prop with index within ancestor", () => {
       rootInstanceId: "body",
       parameters: [],
       metas: new Map<string, WsComponentMeta>([
-        [
-          "TabsTrigger",
-          { type: "container", icon: "", indexWithinAncestor: "Tabs" },
-        ],
-        [
-          "TabsContent",
-          { type: "container", icon: "", indexWithinAncestor: "Tabs" },
-        ],
+        ["TabsTrigger", { icon: "", indexWithinAncestor: "Tabs" }],
+        ["TabsContent", { icon: "", indexWithinAncestor: "Tabs" }],
       ]),
       ...renderData(
         <$.Body ws:id="body">
@@ -1212,10 +1206,7 @@ test("ignore ws:block-template when generate index attribute", () => {
       rootInstanceId: "bodyId",
       parameters: [],
       metas: new Map<string, WsComponentMeta>([
-        [
-          "TabsTrigger",
-          { type: "container", icon: "", indexWithinAncestor: "Tabs" },
-        ],
+        ["TabsTrigger", { icon: "", indexWithinAncestor: "Tabs" }],
       ]),
       ...renderData(
         <$.Body ws:id="bodyId">

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

@@ -4,7 +4,6 @@ import { animation } from "./shared/meta";
 
 export const meta: WsComponentMeta = {
   category: "animations",
-  type: "container",
   description: "Animation Group component is designed to animate its children.",
   icon: AnimationGroupIcon,
   order: 5,

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

@@ -5,7 +5,6 @@ import { props } from "./__generated__/animate-text.props";
 
 export const meta: WsComponentMeta = {
   category: "animations",
-  type: "container",
   description:
     "Text animation allows you to split text by char or by word to animate it.",
   icon: TextAnimationIcon,

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

@@ -5,7 +5,6 @@ import { props } from "./__generated__/stagger-animation.props";
 
 export const meta: WsComponentMeta = {
   category: "animations",
-  type: "container",
   description:
     "Stagger animation allows you to animate children elements with a sliding window.",
   icon: StaggerAnimationIcon,

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

@@ -3,7 +3,6 @@ import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
 import { props } from "./__generated__/video-animation.props";
 
 export const meta: WsComponentMeta = {
-  type: "container",
   icon: Youtube1cIcon,
   label: "Video Animation",
   contentModel: {

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

@@ -7,7 +7,6 @@ import {
 } from "@webstudio-is/icons/svg";
 import {
   defaultStates,
-  type PresetStyle,
   type WsComponentMeta,
   type WsComponentPropsMeta,
 } from "@webstudio-is/sdk";
@@ -22,58 +21,40 @@ import {
   propsAccordionContent,
 } from "./__generated__/accordion.props";
 
-const presetStyle = {
-  div,
-} satisfies PresetStyle<"div">;
-
 export const metaAccordion: WsComponentMeta = {
-  type: "container",
   icon: AccordionIcon,
-  presetStyle,
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: radix.AccordionItem },
-    },
-  ],
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.AccordionItem],
+  },
+  presetStyle: {
+    div,
+  },
 };
 
 export const metaAccordionItem: WsComponentMeta = {
-  type: "container",
   label: "Item",
   icon: ItemIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: radix.Accordion },
-    },
-    {
-      relation: "descendant",
-      component: { $eq: radix.AccordionHeader },
-    },
-    {
-      relation: "descendant",
-      component: { $eq: radix.AccordionContent },
-    },
-  ],
   indexWithinAncestor: radix.Accordion,
-  presetStyle,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.AccordionHeader, radix.AccordionContent],
+  },
+  presetStyle: {
+    div,
+  },
 };
 
 export const metaAccordionHeader: WsComponentMeta = {
-  type: "container",
   label: "Item Header",
   icon: HeaderIcon,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: radix.AccordionItem },
-    },
-    {
-      relation: "descendant",
-      component: { $eq: radix.AccordionTrigger },
-    },
-  ],
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [radix.AccordionTrigger],
+  },
   presetStyle: {
     h3: [
       ...h3,
@@ -90,12 +71,11 @@ export const metaAccordionHeader: WsComponentMeta = {
 };
 
 export const metaAccordionTrigger: WsComponentMeta = {
-  type: "container",
   label: "Item Trigger",
   icon: TriggerIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: radix.AccordionHeader },
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"],
   },
   states: [
     ...defaultStates,
@@ -111,14 +91,15 @@ export const metaAccordionTrigger: WsComponentMeta = {
 };
 
 export const metaAccordionContent: WsComponentMeta = {
-  type: "container",
   label: "Item Content",
   icon: ContentIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: radix.AccordionItem },
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"],
+  },
+  presetStyle: {
+    div,
   },
-  presetStyle,
 };
 
 export const propsMetaAccordion: WsComponentPropsMeta = {

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

@@ -13,12 +13,12 @@ import {
 } from "./__generated__/checkbox.props";
 
 export const metaCheckbox: WsComponentMeta = {
-  type: "container",
-  constraints: {
-    relation: "descendant",
-    component: { $eq: radix.CheckboxIndicator },
-  },
   icon: CheckboxCheckedIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.CheckboxIndicator],
+  },
   states: [
     ...defaultStates,
     {
@@ -38,12 +38,11 @@ export const metaCheckbox: WsComponentMeta = {
 };
 
 export const metaCheckboxIndicator: WsComponentMeta = {
-  type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: radix.Checkbox },
-  },
   icon: TriggerIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"],
+  },
   states: defaultStates,
   presetStyle: {
     span,

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

@@ -13,42 +13,34 @@ import {
 } from "./__generated__/collapsible.props";
 
 export const metaCollapsible: WsComponentMeta = {
-  type: "container",
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: radix.CollapsibleTrigger },
-    },
-    {
-      relation: "descendant",
-      component: { $eq: radix.CollapsibleContent },
-    },
-  ],
+  icon: CollapsibleIcon,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [radix.CollapsibleTrigger, radix.CollapsibleContent],
+  },
   presetStyle: {
     div,
   },
-  icon: CollapsibleIcon,
 };
 
 export const metaCollapsibleTrigger: WsComponentMeta = {
-  type: "container",
   icon: TriggerIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: radix.Collapsible },
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"],
   },
 };
 
 export const metaCollapsibleContent: WsComponentMeta = {
-  type: "container",
+  icon: ContentIcon,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"],
+  },
   presetStyle: {
     div,
   },
-  icon: ContentIcon,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: radix.Collapsible },
-  },
 };
 
 export const propsMetaCollapsible: WsComponentPropsMeta = {