refactor: merge radix props with component metas

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: [],
 };