@webstudio-is/sdk-components-react-remix 0.128.0 → 0.130.0

package/lib/metas.js

@@ -1,4 +1,4 @@
-// src/body.ws.tsx
+// src/body.ws.ts
 import { Body } from "@webstudio-is/sdk-components-react/metas";
 import { Body as Body2 } from "@webstudio-is/sdk-components-react/props";
 
@@ -586,33 +586,19 @@ var propsMeta = {
       required: false
     }
   },
-  initialProps: ["id", "href", "target", "prefetch"]
+  initialProps: ["id", "className", "href", "target", "prefetch"]
 };
 
-// src/rich-text-link.ws.tsx
+// src/rich-text-link.ws.ts
 import { RichTextLink } from "@webstudio-is/sdk-components-react/metas";
 
-// src/form.ws.tsx
-import { FormIcon } from "@webstudio-is/icons/svg";
-import { form } from "@webstudio-is/react-sdk/css-normalize";
+// src/form.ws.ts
+import { Form as baseMeta } from "@webstudio-is/sdk-components-react/metas";
 import {
   showAttribute
 } from "@webstudio-is/react-sdk";
-var presetStyle = {
-  form: [
-    ...form,
-    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
-  ]
-};
 var meta = {
-  category: "forms",
-  type: "container",
-  invalidAncestors: ["Form"],
-  label: "Form",
-  description: "Collect information from your users using validation rules.",
-  icon: FormIcon,
-  presetStyle,
-  order: 0,
+  ...baseMeta,
   states: [
     { selector: "[data-state=error]", label: "Error" },
     { selector: "[data-state=success]", label: "Success" }

package/lib/props.js

@@ -1,4 +1,4 @@
-// src/body.ws.tsx
+// src/body.ws.ts
 import { Body } from "@webstudio-is/sdk-components-react/metas";
 import { Body as Body2 } from "@webstudio-is/sdk-components-react/props";
 
@@ -586,16 +586,15 @@ var propsMeta = {
       required: false
     }
   },
-  initialProps: ["id", "href", "target", "prefetch"]
+  initialProps: ["id", "className", "href", "target", "prefetch"]
 };
 
-// src/rich-text-link.ws.tsx
+// src/rich-text-link.ws.ts
 import { RichTextLink } from "@webstudio-is/sdk-components-react/metas";
 var propsMeta2 = propsMeta;
 
-// src/form.ws.tsx
-import { FormIcon } from "@webstudio-is/icons/svg";
-import { form } from "@webstudio-is/react-sdk/css-normalize";
+// src/form.ws.ts
+import { Form as baseMeta } from "@webstudio-is/sdk-components-react/metas";
 import {
   showAttribute
 } from "@webstudio-is/react-sdk";
@@ -1170,16 +1169,111 @@ var props2 = {
   vocab: { required: false, control: "text", type: "string" }
 };
 
-// src/form.ws.tsx
-var presetStyle = {
-  form: [
-    ...form,
-    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } }
+// src/form.ws.ts
+var meta = {
+  ...baseMeta,
+  states: [
+    { selector: "[data-state=error]", label: "Error" },
+    { selector: "[data-state=success]", label: "Success" }
+  ],
+  template: [
+    {
+      type: "instance",
+      component: "Form",
+      variables: {
+        formState: { initialValue: "initial" }
+      },
+      props: [
+        {
+          type: "expression",
+          name: "state",
+          code: "formState"
+        },
+        {
+          type: "action",
+          name: "onStateChange",
+          value: [
+            { type: "execute", args: ["state"], code: `formState = state` }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          label: "Form Content",
+          component: "Box",
+          props: [
+            {
+              type: "expression",
+              name: showAttribute,
+              code: "formState === 'initial' || formState === 'error'"
+            }
+          ],
+          children: [
+            {
+              type: "instance",
+              component: "Label",
+              children: [{ type: "text", value: "Name" }]
+            },
+            {
+              type: "instance",
+              component: "Input",
+              props: [{ type: "string", name: "name", value: "name" }],
+              children: []
+            },
+            {
+              type: "instance",
+              component: "Label",
+              children: [{ type: "text", value: "Email" }]
+            },
+            {
+              type: "instance",
+              component: "Input",
+              props: [{ type: "string", name: "name", value: "email" }],
+              children: []
+            },
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Submit" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          label: "Success Message",
+          component: "Box",
+          props: [
+            {
+              type: "expression",
+              name: showAttribute,
+              code: "formState === 'success'"
+            }
+          ],
+          children: [
+            { type: "text", value: "Thank you for getting in touch!" }
+          ]
+        },
+        {
+          type: "instance",
+          label: "Error Message",
+          component: "Box",
+          props: [
+            {
+              type: "expression",
+              name: showAttribute,
+              code: "formState === 'error'"
+            }
+          ],
+          children: [{ type: "text", value: "Sorry, something went wrong." }]
+        }
+      ]
+    }
   ]
 };
 var propsMeta3 = {
   props: props2,
-  initialProps: ["id", "state", "action"]
+  initialProps: ["id", "className", "state", "action"]
 };
 export {
   Body2 as Body,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-remix",
-  "version": "0.128.0",
+  "version": "0.130.0",
   "description": "Webstudio components for Remix",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -38,10 +38,10 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@webstudio-is/form-handlers": "0.128.0",
-    "@webstudio-is/react-sdk": "0.128.0",
-    "@webstudio-is/sdk-components-react": "0.128.0",
-    "@webstudio-is/icons": "0.128.0"
+    "@webstudio-is/form-handlers": "0.130.0",
+    "@webstudio-is/react-sdk": "0.130.0",
+    "@webstudio-is/sdk-components-react": "0.130.0",
+    "@webstudio-is/icons": "0.130.0"
   },
   "devDependencies": {
     "@remix-run/react": "^1.19.2",
@@ -50,13 +50,13 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.2.2",
-    "@webstudio-is/generate-arg-types": "0.128.0",
+    "@webstudio-is/generate-arg-types": "0.130.0",
     "@webstudio-is/tsconfig": "1.0.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 --outdir=lib --bundle --format=esm --packages=external",
-    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
+    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.ts' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc",
     "checks": "pnpm typecheck"