diff --git a/packages/generate-arg-types/src/arg-types.ts b/packages/generate-arg-types/src/arg-types.ts index 6ad02ec789..ea040ac109 100644 --- a/packages/generate-arg-types/src/arg-types.ts +++ b/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") { diff --git a/packages/sdk-components-react-radix/package.json b/packages/sdk-components-react-radix/package.json index 800e6cb2bc..8a7870b0f5 100644 --- a/packages/sdk-components-react-radix/package.json +++ b/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", diff --git a/packages/sdk-components-react-radix/src/__generated__/accordion.props.ts b/packages/sdk-components-react-radix/src/__generated__/accordion.props.ts index e4087f242e..f46a23e783 100644 --- a/packages/sdk-components-react-radix/src/__generated__/accordion.props.ts +++ b/packages/sdk-components-react-radix/src/__generated__/accordion.props.ts @@ -404,6 +404,14 @@ export const propsAccordion: Record = { }, 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 = { 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" }, }; diff --git a/packages/sdk-components-react-radix/src/__generated__/tabs.props.ts b/packages/sdk-components-react-radix/src/__generated__/tabs.props.ts index 7d49d1ce62..fa9daefa49 100644 --- a/packages/sdk-components-react-radix/src/__generated__/tabs.props.ts +++ b/packages/sdk-components-react-radix/src/__generated__/tabs.props.ts @@ -1799,7 +1799,7 @@ export const propsTabsTrigger: Record = { options: ["on", "off"], }, value: { - required: true, + required: false, control: "text", type: "string", description: @@ -2376,7 +2376,7 @@ export const propsTabsContent: Record = { options: ["on", "off"], }, value: { - required: true, + required: false, control: "text", type: "string", description: diff --git a/packages/sdk-components-react-remix/src/form.tsx b/packages/sdk-components-react-remix/src/form.tsx index 6c93ff346e..13c30a862d 100644 --- a/packages/sdk-components-react-remix/src/form.tsx +++ b/packages/sdk-components-react-remix/src/form.tsx @@ -37,34 +37,31 @@ export const Form = forwardRef< ElementRef, ComponentProps & { /** 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 ( - - - {children} - - ); -}); + return ( + + + {children} + + ); + } +); Form.displayName = "Form"; diff --git a/packages/sdk-components-react/src/__generated__/html-embed.props.ts b/packages/sdk-components-react/src/__generated__/html-embed.props.ts index 6a607e6cdc..f730c44006 100644 --- a/packages/sdk-components-react/src/__generated__/html-embed.props.ts +++ b/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 = { code: { required: true, control: "text", type: "string" }, executeScriptOnCanvas: { - required: true, + required: false, control: "boolean", type: "boolean", },