refactor: merge radix props with component metas (#5213)

Related #5211

We moved html attributes away from props metas and have very little
actual props left in meta. It is safe to merge with component meta to
simplify access in both builder and CLI.

CLI size increase is not very significant

```diff
- 241.92kB
+ 256.64kB
```

Author: TrySound

apps/builder/app/builder/features/settings-panel/props-section/props-section.tsx

@@ -19,6 +19,7 @@ import {
 import {
   isAttributeNameSafe,
   reactPropsToStandardAttributes,
+  showAttribute,
   standardAttributesToReactProps,
 } from "@webstudio-is/react-sdk";
 import {
@@ -115,6 +116,9 @@ const $availableProps = computed(
   (instance, props, propsMetas, initialPropNames) => {
     const availableProps = new Map<Item["name"], Item>();
     for (const [name, { label, description }] of propsMetas) {
+      if (name === showAttribute) {
+        continue;
+      }
       availableProps.set(name, { name, label, description });
     }
     if (instance === undefined) {

apps/builder/app/canvas/canvas.tsx

@@ -18,7 +18,6 @@ import * as animationTemplates from "@webstudio-is/sdk-components-animation/temp
 import { hooks as animationComponentHooks } from "@webstudio-is/sdk-components-animation/hooks";
 import * as radixComponents from "@webstudio-is/sdk-components-react-radix";
 import * as radixComponentMetas from "@webstudio-is/sdk-components-react-radix/metas";
-import * as radixComponentPropsMetas from "@webstudio-is/sdk-components-react-radix/props";
 import * as radixTemplates from "@webstudio-is/sdk-components-react-radix/templates";
 import { hooks as radixComponentHooks } from "@webstudio-is/sdk-components-react-radix/hooks";
 import { ErrorMessage } from "~/shared/error";
@@ -267,7 +266,7 @@ export const Canvas = () => {
       namespace: "@webstudio-is/sdk-components-react-radix",
       components: radixComponents,
       metas: radixComponentMetas,
-      propsMetas: radixComponentPropsMetas,
+      propsMetas: {},
       hooks: radixComponentHooks,
       templates: radixTemplates,
     });

apps/builder/app/shared/nano-states/components.ts

@@ -206,10 +206,22 @@ export const registerComponentLibrary = ({
   }
   $registeredComponents.set(nextComponents);
 
+  const prevPropsMetas = $registeredComponentPropsMetas.get();
+  const nextPropsMetas = new Map(prevPropsMetas);
+  for (const [componentName, propsMeta] of Object.entries(propsMetas)) {
+    nextPropsMetas.set(`${prefix}${componentName}`, propsMeta);
+  }
+
   const prevMetas = $registeredComponentMetas.get();
   const nextMetas = new Map(prevMetas);
   for (const [componentName, meta] of Object.entries(metas)) {
     nextMetas.set(`${prefix}${componentName}`, meta);
+    if (meta.initialProps || meta.props) {
+      nextPropsMetas.set(`${prefix}${componentName}`, {
+        initialProps: meta.initialProps,
+        props: meta.props ?? {},
+      });
+    }
   }
   $registeredComponentMetas.set(nextMetas);
 
@@ -230,10 +242,5 @@ export const registerComponentLibrary = ({
     $registeredComponentHooks.set(nextHooks);
   }
 
-  const prevPropsMetas = $registeredComponentPropsMetas.get();
-  const nextPropsMetas = new Map(prevPropsMetas);
-  for (const [componentName, propsMeta] of Object.entries(propsMetas)) {
-    nextPropsMetas.set(`${prefix}${componentName}`, propsMeta);
-  }
   $registeredComponentPropsMetas.set(nextPropsMetas);
 };

packages/sdk-components-react-radix/package.json

@@ -23,11 +23,6 @@
       "types": "./lib/types/metas.d.ts",
       "import": "./lib/metas.js"
     },
-    "./props": {
-      "webstudio": "./src/props.ts",
-      "types": "./lib/types/props.d.ts",
-      "import": "./lib/props.js"
-    },
     "./hooks": {
       "webstudio": "./src/hooks.ts",
       "types": "./lib/types/hooks.d.ts",

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

@@ -5,11 +5,7 @@ import {
   TriggerIcon,
   ContentIcon,
 } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/sdk";
+import { defaultStates, type WsComponentMeta } from "@webstudio-is/sdk";
 import { div, h3, button } from "@webstudio-is/sdk/normalize.css";
 import { radix } from "./shared/meta";
 import { buttonReset } from "./shared/preset-styles";
@@ -28,9 +24,9 @@ export const metaAccordion: WsComponentMeta = {
     children: ["instance"],
     descendants: [radix.AccordionItem],
   },
-  presetStyle: {
-    div,
-  },
+  presetStyle: { div },
+  initialProps: ["value", "collapsible"],
+  props: propsAccordion,
 };
 
 export const metaAccordionItem: WsComponentMeta = {
@@ -42,9 +38,9 @@ export const metaAccordionItem: WsComponentMeta = {
     children: ["instance"],
     descendants: [radix.AccordionHeader, radix.AccordionContent],
   },
-  presetStyle: {
-    div,
-  },
+  presetStyle: { div },
+  initialProps: ["value"],
+  props: propsAccordionItem,
 };
 
 export const metaAccordionHeader: WsComponentMeta = {
@@ -68,6 +64,7 @@ export const metaAccordionHeader: WsComponentMeta = {
       },
     ],
   },
+  props: propsAccordionHeader,
 };
 
 export const metaAccordionTrigger: WsComponentMeta = {
@@ -88,6 +85,7 @@ export const metaAccordionTrigger: WsComponentMeta = {
   presetStyle: {
     button: [button, buttonReset].flat(),
   },
+  props: propsAccordionTrigger,
 };
 
 export const metaAccordionContent: WsComponentMeta = {
@@ -100,26 +98,5 @@ export const metaAccordionContent: WsComponentMeta = {
   presetStyle: {
     div,
   },
-};
-
-export const propsMetaAccordion: WsComponentPropsMeta = {
-  props: propsAccordion,
-  initialProps: ["value", "collapsible"],
-};
-
-export const propsMetaAccordionItem: WsComponentPropsMeta = {
-  props: propsAccordionItem,
-  initialProps: ["value"],
-};
-
-export const propsMetaAccordionHeader: WsComponentPropsMeta = {
-  props: propsAccordionHeader,
-};
-
-export const propsMetaAccordionTrigger: WsComponentPropsMeta = {
-  props: propsAccordionTrigger,
-};
-
-export const propsMetaAccordionContent: WsComponentPropsMeta = {
   props: propsAccordionContent,
 };

packages/sdk-components-react-radix/src/checkbox.tsx

@@ -5,6 +5,7 @@ import {
   type ComponentProps,
 } from "react";
 import { Root, Indicator } from "@radix-ui/react-checkbox";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
 
 export const Checkbox = forwardRef<
   HTMLButtonElement,
@@ -14,9 +15,18 @@ export const Checkbox = forwardRef<
     checked?: boolean;
     defaultChecked?: boolean;
   }
->(({ checked, defaultChecked, ...props }, ref) => {
+>(({ defaultChecked, ...props }, ref) => {
+  const [checked, onCheckedChange] = useControllableState({
+    prop: props.checked ?? defaultChecked ?? false,
+    defaultProp: false,
+  });
   return (
-    <Root {...props} ref={ref} defaultChecked={checked ?? defaultChecked} />
+    <Root
+      {...props}
+      ref={ref}
+      checked={checked}
+      onCheckedChange={(open) => onCheckedChange(open === true)}
+    />
   );
 });
 

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

@@ -1,9 +1,5 @@
 import { CheckboxCheckedIcon, TriggerIcon } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/sdk";
+import { defaultStates, type WsComponentMeta } from "@webstudio-is/sdk";
 import { button, span } from "@webstudio-is/sdk/normalize.css";
 import { radix } from "./shared/meta";
 import { buttonReset } from "./shared/preset-styles";
@@ -35,6 +31,8 @@ export const metaCheckbox: WsComponentMeta = {
   presetStyle: {
     button: [button, buttonReset].flat(),
   },
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: propsCheckbox,
 };
 
 export const metaCheckboxIndicator: WsComponentMeta = {
@@ -47,13 +45,5 @@ export const metaCheckboxIndicator: WsComponentMeta = {
   presetStyle: {
     span,
   },
-};
-
-export const propsMetaCheckbox: WsComponentPropsMeta = {
-  props: propsCheckbox,
-  initialProps: ["id", "className", "name", "value", "required", "checked"],
-};
-
-export const propsMetaCheckboxIndicator: WsComponentPropsMeta = {
   props: propsCheckboxIndicator,
 };

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

@@ -3,7 +3,7 @@ import {
   TriggerIcon,
   ContentIcon,
 } from "@webstudio-is/icons/svg";
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 import { div } from "@webstudio-is/sdk/normalize.css";
 import { radix } from "./shared/meta";
 import {
@@ -22,6 +22,8 @@ export const metaCollapsible: WsComponentMeta = {
   presetStyle: {
     div,
   },
+  initialProps: ["open"],
+  props: propsCollapsible,
 };
 
 export const metaCollapsibleTrigger: WsComponentMeta = {
@@ -30,6 +32,7 @@ export const metaCollapsibleTrigger: WsComponentMeta = {
     category: "none",
     children: ["instance", "rich-text"],
   },
+  props: propsCollapsibleTrigger,
 };
 
 export const metaCollapsibleContent: WsComponentMeta = {
@@ -41,24 +44,5 @@ export const metaCollapsibleContent: WsComponentMeta = {
   presetStyle: {
     div,
   },
-};
-
-export const propsMetaCollapsible: WsComponentPropsMeta = {
-  props: {
-    ...propsCollapsible,
-    onOpenChange: {
-      type: "action",
-      control: "action",
-      required: false,
-    },
-  },
-  initialProps: ["open", "onOpenChange"],
-};
-
-export const propsMetaCollapsibleTrigger: WsComponentPropsMeta = {
-  props: propsCollapsibleTrigger,
-};
-
-export const propsMetaCollapsibleContent: WsComponentPropsMeta = {
   props: propsCollapsibleContent,
 };

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

@@ -7,11 +7,7 @@ import {
   TextIcon,
   ButtonElementIcon,
 } from "@webstudio-is/icons/svg";
-import {
-  defaultStates,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-} from "@webstudio-is/sdk";
+import { defaultStates, type WsComponentMeta } from "@webstudio-is/sdk";
 import { div, button, h2, p } from "@webstudio-is/sdk/normalize.css";
 import { radix } from "./shared/meta";
 import {
@@ -32,6 +28,7 @@ export const metaDialogTrigger: WsComponentMeta = {
     category: "none",
     children: ["instance"],
   },
+  props: propsDialogTrigger,
 };
 
 export const metaDialogOverlay: WsComponentMeta = {
@@ -41,9 +38,8 @@ export const metaDialogOverlay: WsComponentMeta = {
     children: ["instance"],
     descendants: [radix.DialogContent],
   },
-  presetStyle: {
-    div,
-  },
+  presetStyle: { div },
+  props: propsDialogOverlay,
 };
 
 export const metaDialogContent: WsComponentMeta = {
@@ -57,9 +53,8 @@ export const metaDialogContent: WsComponentMeta = {
       radix.DialogClose,
     ],
   },
-  presetStyle: {
-    div,
-  },
+  presetStyle: { div },
+  props: propsDialogContent,
 };
 
 export const metaDialogTitle: WsComponentMeta = {
@@ -68,9 +63,8 @@ export const metaDialogTitle: WsComponentMeta = {
     category: "none",
     children: ["instance", "rich-text"],
   },
-  presetStyle: {
-    h2,
-  },
+  presetStyle: { h2 },
+  props: propsDialogTitle,
 };
 
 export const metaDialogDescription: WsComponentMeta = {
@@ -79,9 +73,8 @@ export const metaDialogDescription: WsComponentMeta = {
     category: "none",
     children: ["instance", "rich-text"],
   },
-  presetStyle: {
-    p,
-  },
+  presetStyle: { p },
+  props: propsDialogDescription,
 };
 
 export const metaDialogClose: WsComponentMeta = {
@@ -95,6 +88,7 @@ export const metaDialogClose: WsComponentMeta = {
   presetStyle: {
     button: [buttonReset, button].flat(),
   },
+  props: propsDialogClose,
 };
 
 export const metaDialog: WsComponentMeta = {
@@ -104,38 +98,5 @@ export const metaDialog: WsComponentMeta = {
     children: ["instance"],
     descendants: [radix.DialogTrigger, radix.DialogOverlay],
   },
-};
-
-export const propsMetaDialog: WsComponentPropsMeta = {
   props: propsDialog,
-  initialProps: [],
-};
-
-export const propsMetaDialogTrigger: WsComponentPropsMeta = {
-  props: propsDialogTrigger,
-};
-
-export const propsMetaDialogContent: WsComponentPropsMeta = {
-  props: propsDialogContent,
-  initialProps: [],
-};
-
-export const propsMetaDialogOverlay: WsComponentPropsMeta = {
-  props: propsDialogOverlay,
-  initialProps: [],
-};
-
-export const propsMetaDialogClose: WsComponentPropsMeta = {
-  props: propsDialogClose,
-  initialProps: [],
-};
-
-export const propsMetaDialogTitle: WsComponentPropsMeta = {
-  props: propsDialogTitle,
-  initialProps: [],
-};
-
-export const propsMetaDialogDescription: WsComponentPropsMeta = {
-  props: propsDialogDescription,
-  initialProps: [],
 };