fix: fix props meta generation (#2344)

- fixed incorrect jsdoc parsing in accordion collapsible
- fixed form default props by inlining destructuring

packages/generate-arg-types/src/arg-types.ts

@@ -41,17 +41,30 @@ export const getArgType = (propItem: PropItem): PropMeta | undefined => {
   const { type, name, description, defaultValue } = propItem;
 
   // eslint-disable-next-line @typescript-eslint/ban-types
-  const makePropMeta = (type: string, control: string, extra?: {}) =>
-    PropMeta.parse({
+  const makePropMeta = (type: string, control: string, extra?: {}) => {
+    let value = defaultValue?.value;
+    // react-docgen-typescript incorrectly parse jsdoc default values as strings
+    // to fix check and cast to correct type
+    if (type === "boolean") {
+      if (value === "true") {
+        value = true;
+      }
+      if (value === "false") {
+        value = false;
+      }
+    }
+    if (type === "number" && typeof value === "string") {
+      value = Number(value);
+    }
+    return PropMeta.parse({
       type,
       required: propItem.required,
       control,
-      ...(defaultValue?.value == null
-        ? {}
-        : { defaultValue: defaultValue.value }),
+      ...(value == null ? {} : { defaultValue: value }),
       ...(description ? { description } : {}),
       ...extra,
     });
+  };
 
   // args that end with background or color e.g. iconColor
   if (matchers.color.test(name) && type.name === "string") {

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

@@ -41,7 +41,7 @@
   "scripts": {
     "dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
     "build": "rm -rf lib && esbuild src/components.ts src/metas.ts src/props.ts src/hooks.ts --outdir=lib --bundle --format=esm --packages=external",
-    "build:args": "NODE_OPTIONS=--conditions=source generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.tsx' -e asChild -e modal -e defaultValue -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
+    "build:args": "NODE_OPTIONS=--conditions=source generate-arg-types './src/accordion.tsx !./src/*.stories.tsx !./src/*.ws.tsx' -e asChild -e modal -e defaultValue -e defaultOpen -e defaultChecked && prettier --write \"**/*.props.ts\"",
     "build:tailwind": "tsx scripts/generate-tailwind-theme.ts && prettier --write src/theme/__generated__",
     "build:stories": "webstudio-sdk generate-stories && prettier --write \"src/__generated__/*.stories.tsx\"",
     "dts": "tsc --project tsconfig.dts.json",

packages/sdk-components-react-radix/src/__generated__/accordion.props.ts

@@ -404,6 +404,14 @@ export const propsAccordion: Record<string, PropMeta> = {
   },
   autoSave: { required: false, control: "text", type: "string" },
   className: { required: false, control: "text", type: "string" },
+  collapsible: {
+    description:
+      "Whether an accordion item can be collapsed after it has been opened.",
+    required: false,
+    control: "boolean",
+    type: "boolean",
+    defaultValue: false,
+  },
   color: {
     required: false,
     control: "color",
@@ -1168,11 +1176,11 @@ export const propsAccordionItem: Record<string, PropMeta> = {
     options: ["on", "off"],
   },
   value: {
-    description:
-      "A string value for the accordion item. All items within an accordion should use a unique value.",
-    required: true,
+    required: false,
     control: "text",
     type: "string",
+    description:
+      "Defines a default value which will be displayed in the element on pageload.",
   },
   vocab: { required: false, control: "text", type: "string" },
 };

packages/sdk-components-react-radix/src/__generated__/tabs.props.ts

@@ -1799,7 +1799,7 @@ export const propsTabsTrigger: Record<string, PropMeta> = {
     options: ["on", "off"],
   },
   value: {
-    required: true,
+    required: false,
     control: "text",
     type: "string",
     description:
@@ -2376,7 +2376,7 @@ export const propsTabsContent: Record<string, PropMeta> = {
     options: ["on", "off"],
   },
   value: {
-    required: true,
+    required: false,
     control: "text",
     type: "string",
     description:

packages/sdk-components-react-remix/src/form.tsx

@@ -37,34 +37,31 @@ export const Form = forwardRef<
   ElementRef<typeof defaultTag>,
   ComponentProps<typeof defaultTag> & {
     /** Use this property to reveal the Success and Error states on the canvas so they can be styled. The Initial state is displayed when the page first opens. The Success and Error states are displayed depending on whether the Form submits successfully or unsuccessfully. */
-    state: State;
+    state?: State;
     encType?: FormProps["encType"];
     onStateChange?: (state: State) => void;
   }
->((props, ref) => {
-  const {
-    children,
-    action,
-    method,
-    state = "initial",
-    onStateChange,
-    ...rest
-  } = props;
-  const fetcher = useFetcher();
+>(
+  (
+    { children, action, method, state = "initial", onStateChange, ...rest },
+    ref
+  ) => {
+    const fetcher = useFetcher();
 
-  const instanceId = getInstanceIdFromComponentProps(rest);
+    const instanceId = getInstanceIdFromComponentProps(rest);
 
-  useOnFetchEnd(fetcher, (data) => {
-    const state: State = data?.success === true ? "success" : "error";
-    onStateChange?.(state);
-  });
+    useOnFetchEnd(fetcher, (data) => {
+      const state: State = data?.success === true ? "success" : "error";
+      onStateChange?.(state);
+    });
 
-  return (
-    <fetcher.Form {...rest} method="post" data-state={state} ref={ref}>
-      <input type="hidden" name={formIdFieldName} value={instanceId} />
-      {children}
-    </fetcher.Form>
-  );
-});
+    return (
+      <fetcher.Form {...rest} method="post" data-state={state} ref={ref}>
+        <input type="hidden" name={formIdFieldName} value={instanceId} />
+        {children}
+      </fetcher.Form>
+    );
+  }
+);
 
 Form.displayName = "Form";

packages/sdk-components-react/src/__generated__/html-embed.props.ts

@@ -3,7 +3,7 @@ import type { PropMeta } from "@webstudio-is/react-sdk";
 export const props: Record<string, PropMeta> = {
   code: { required: true, control: "text", type: "string" },
   executeScriptOnCanvas: {
-    required: true,
+    required: false,
     control: "boolean",
     type: "boolean",
   },