@webstudio-is/react-sdk 0.63.0 → 0.64.0

package/lib/app/custom-components/__generated__/form.props.js

@@ -3,10 +3,8 @@ const props = {
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
   acceptCharset: { required: false, control: "text", type: "string" },
-  action: { required: false, control: "text", type: "string" },
   autoComplete: { required: false, control: "text", type: "string" },
   encType: { required: false, control: "text", type: "string" },
-  method: { required: false, control: "text", type: "string" },
   name: { required: false, control: "text", type: "string" },
   noValidate: { required: false, control: "boolean", type: "boolean" },
   target: { required: false, control: "text", type: "string" },
@@ -404,6 +402,7 @@ const props = {
     required: false,
     control: "radio",
     type: "string",
+    defaultValue: "initial",
     options: ["initial", "success", "error"]
   }
 };

package/lib/app/custom-components/form.js

@@ -1,9 +1,12 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useFetcher } from "@remix-run/react";
+import { formIdFieldName } from "@webstudio-is/form-handlers";
 import {
   Children,
   cloneElement,
   forwardRef
 } from "react";
+import { getInstanceIdFromComponentProps } from "../../props";
 const defaultTag = "form";
 const isComponentNode = (component, node) => "props" in node && node.props.instance?.component === component;
 const onlyErrorMessage = (children) => Children.map(children, (child) => {
@@ -46,7 +49,15 @@ const withoutMessages = (children) => Children.map(children, (child) => {
   }
   return withoutMessages(child);
 });
-const Form = forwardRef(({ children, initialState = "initial", ...props }, ref) => /* @__PURE__ */ jsx("form", { ...props, "data-state": initialState, ref, children: initialState === "success" ? onlySuccessMessage(children) : initialState === "error" ? onlyErrorMessage(children) : withoutMessages(children) }));
+const Form = forwardRef(({ children, initialState = "initial", ...props }, ref) => {
+  const fetcher = useFetcher();
+  const state = fetcher.type === "done" ? fetcher.data?.success === true ? "success" : "error" : initialState;
+  const instanceId = getInstanceIdFromComponentProps(props);
+  return /* @__PURE__ */ jsxs(fetcher.Form, { ...props, method: "post", "data-state": state, ref, children: [
+    /* @__PURE__ */ jsx("input", { type: "hidden", name: formIdFieldName, value: instanceId }),
+    state === "success" ? onlySuccessMessage(children) : state === "error" ? onlyErrorMessage(children) : withoutMessages(children)
+  ] });
+});
 Form.displayName = "Form";
 export {
   Form,

package/lib/cjs/app/custom-components/__generated__/form.props.js

@@ -26,10 +26,8 @@ const props = {
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
   acceptCharset: { required: false, control: "text", type: "string" },
-  action: { required: false, control: "text", type: "string" },
   autoComplete: { required: false, control: "text", type: "string" },
   encType: { required: false, control: "text", type: "string" },
-  method: { required: false, control: "text", type: "string" },
   name: { required: false, control: "text", type: "string" },
   noValidate: { required: false, control: "boolean", type: "boolean" },
   target: { required: false, control: "text", type: "string" },
@@ -427,6 +425,7 @@ const props = {
     required: false,
     control: "radio",
     type: "string",
+    defaultValue: "initial",
     options: ["initial", "success", "error"]
   }
 };

package/lib/cjs/app/custom-components/form.js

@@ -23,10 +23,13 @@ __export(form_exports, {
 });
 module.exports = __toCommonJS(form_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
+var import_react = require("@remix-run/react");
+var import_form_handlers = require("@webstudio-is/form-handlers");
+var import_react2 = require("react");
+var import_props = require("../../props");
 const defaultTag = "form";
 const isComponentNode = (component, node) => "props" in node && node.props.instance?.component === component;
-const onlyErrorMessage = (children) => import_react.Children.map(children, (child) => {
+const onlyErrorMessage = (children) => import_react2.Children.map(children, (child) => {
   if (typeof child !== "object" || child === null) {
     return null;
   }
@@ -35,11 +38,11 @@ const onlyErrorMessage = (children) => import_react.Children.map(children, (chil
   }
   if ("props" in child) {
     const newChildren = onlyErrorMessage(child.props.children);
-    return import_react.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react.cloneElement)(child, { children: newChildren }) : null;
+    return import_react2.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react2.cloneElement)(child, { children: newChildren }) : null;
   }
   return onlyErrorMessage(child);
 });
-const onlySuccessMessage = (children) => import_react.Children.map(children, (child) => {
+const onlySuccessMessage = (children) => import_react2.Children.map(children, (child) => {
   if (typeof child !== "object" || child === null) {
     return null;
   }
@@ -48,11 +51,11 @@ const onlySuccessMessage = (children) => import_react.Children.map(children, (ch
   }
   if ("props" in child) {
     const newChildren = onlySuccessMessage(child.props.children);
-    return import_react.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react.cloneElement)(child, { children: newChildren }) : null;
+    return import_react2.Children.toArray(newChildren).some((child2) => child2 !== null) ? (0, import_react2.cloneElement)(child, { children: newChildren }) : null;
   }
   return onlySuccessMessage(child);
 });
-const withoutMessages = (children) => import_react.Children.map(children, (child) => {
+const withoutMessages = (children) => import_react2.Children.map(children, (child) => {
   if (typeof child !== "object" || child === null) {
     return child;
   }
@@ -60,11 +63,19 @@ const withoutMessages = (children) => import_react.Children.map(children, (child
     return null;
   }
   if ("props" in child) {
-    return (0, import_react.cloneElement)(child, {
+    return (0, import_react2.cloneElement)(child, {
       children: withoutMessages(child.props.children)
     });
   }
   return withoutMessages(child);
 });
-const Form = (0, import_react.forwardRef)(({ children, initialState = "initial", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", { ...props, "data-state": initialState, ref, children: initialState === "success" ? onlySuccessMessage(children) : initialState === "error" ? onlyErrorMessage(children) : withoutMessages(children) }));
+const Form = (0, import_react2.forwardRef)(({ children, initialState = "initial", ...props }, ref) => {
+  const fetcher = (0, import_react.useFetcher)();
+  const state = fetcher.type === "done" ? fetcher.data?.success === true ? "success" : "error" : initialState;
+  const instanceId = (0, import_props.getInstanceIdFromComponentProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(fetcher.Form, { ...props, method: "post", "data-state": state, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", { type: "hidden", name: import_form_handlers.formIdFieldName, value: instanceId }),
+    state === "success" ? onlySuccessMessage(children) : state === "error" ? onlyErrorMessage(children) : withoutMessages(children)
+  ] });
+});
 Form.displayName = "Form";

package/lib/cjs/css/normalize.js

@@ -93,7 +93,7 @@ const h5 = baseStyle;
 const h6 = baseStyle;
 const i = baseStyle;
 const img = baseStyle;
-const a = [boxSizing, ...import_presets.borders, ...import_presets.linkColors];
+const a = baseStyle;
 const li = baseStyle;
 const ul = baseStyle;
 const ol = baseStyle;

package/lib/cjs/css/presets.js

@@ -18,8 +18,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var presets_exports = {};
 __export(presets_exports, {
-  borders: () => borders,
-  linkColors: () => linkColors
+  borders: () => borders
 });
 module.exports = __toCommonJS(presets_exports);
 const borders = [
@@ -40,20 +39,3 @@ const borders = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
-const linkColors = [
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
-  },
-  {
-    state: ":active",
-    property: "color",
-    // chrome and safari use rgb(255, 0, 0)
-    value: { type: "rgb", r: 238, g: 0, b: 0, alpha: 1 }
-  },
-  {
-    state: ":visited",
-    property: "color",
-    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 }
-  }
-];

package/lib/css/normalize.js

@@ -1,4 +1,4 @@
-import { borders, linkColors } from "./presets";
+import { borders } from "./presets";
 const boxSizing = {
   property: "boxSizing",
   value: { type: "keyword", value: "border-box" }
@@ -24,7 +24,7 @@ const h5 = baseStyle;
 const h6 = baseStyle;
 const i = baseStyle;
 const img = baseStyle;
-const a = [boxSizing, ...borders, ...linkColors];
+const a = baseStyle;
 const li = baseStyle;
 const ul = baseStyle;
 const ol = baseStyle;

package/lib/css/presets.js

@@ -16,24 +16,6 @@ const borders = [
     value: { type: "unit", value: 1, unit: "px" }
   }
 ];
-const linkColors = [
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
-  },
-  {
-    state: ":active",
-    property: "color",
-    // chrome and safari use rgb(255, 0, 0)
-    value: { type: "rgb", r: 238, g: 0, b: 0, alpha: 1 }
-  },
-  {
-    state: ":visited",
-    property: "color",
-    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 }
-  }
-];
 export {
-  borders,
-  linkColors
+  borders
 };

package/lib/types/app/custom-components/form.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const defaultTag = "form";
-export declare const Form: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLFormElement> & import("react").FormHTMLAttributes<HTMLFormElement> & {
+export declare const Form: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "action" | "method"> & {
     initialState?: "error" | "initial" | "success" | undefined;
 }, "ref"> & import("react").RefAttributes<HTMLFormElement>>;

package/lib/types/app/custom-components/index.d.ts

@@ -21,7 +21,7 @@ export declare const customComponents: {
         target?: "_self" | "_blank" | "_parent" | "_top" | undefined;
         prefetch?: "none" | "intent" | "render" | undefined;
     }, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
-    Form: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLFormElement> & import("react").FormHTMLAttributes<HTMLFormElement> & {
+    Form: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "action" | "method"> & {
         initialState?: "error" | "initial" | "success" | undefined;
     }, "ref"> & import("react").RefAttributes<HTMLFormElement>>;
 };

package/lib/types/css/presets.d.ts

@@ -1,3 +1,2 @@
 import type { Styles } from "./normalize";
 export declare const borders: Styles;
-export declare const linkColors: Styles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/react-sdk",
-  "version": "0.63.0",
+  "version": "0.64.0",
   "description": "Webstudio JavaScript / TypeScript API",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -35,16 +35,17 @@
     "nanoevents": "^7.0.1",
     "nanoid": "^3.2.0",
     "nanostores": "^0.7.1",
-    "@webstudio-is/asset-uploader": "^0.63.0",
-    "@webstudio-is/css-data": "^0.63.0",
-    "@webstudio-is/css-engine": "^0.63.0",
-    "@webstudio-is/css-vars": "^0.63.0",
-    "@webstudio-is/fonts": "^0.63.0",
-    "@webstudio-is/generate-arg-types": "^0.63.0",
-    "@webstudio-is/icons": "^0.63.0",
-    "@webstudio-is/image": "^0.63.0",
-    "@webstudio-is/prisma-client": "^0.63.0",
-    "@webstudio-is/project-build": "^0.63.0"
+    "@webstudio-is/asset-uploader": "^0.64.0",
+    "@webstudio-is/css-data": "^0.64.0",
+    "@webstudio-is/css-engine": "^0.64.0",
+    "@webstudio-is/css-vars": "^0.64.0",
+    "@webstudio-is/fonts": "^0.64.0",
+    "@webstudio-is/generate-arg-types": "^0.64.0",
+    "@webstudio-is/icons": "^0.64.0",
+    "@webstudio-is/image": "^0.64.0",
+    "@webstudio-is/prisma-client": "^0.64.0",
+    "@webstudio-is/project-build": "^0.64.0",
+    "@webstudio-is/form-handlers": "^0.64.0"
   },
   "exports": {
     ".": {

package/src/app/custom-components/__generated__/form.props.ts

@@ -5,10 +5,8 @@ export const props: Record<string, PropMeta> = {
   style: { required: false, control: "text", type: "string" },
   title: { required: false, control: "text", type: "string" },
   acceptCharset: { required: false, control: "text", type: "string" },
-  action: { required: false, control: "text", type: "string" },
   autoComplete: { required: false, control: "text", type: "string" },
   encType: { required: false, control: "text", type: "string" },
-  method: { required: false, control: "text", type: "string" },
   name: { required: false, control: "text", type: "string" },
   noValidate: { required: false, control: "boolean", type: "boolean" },
   target: { required: false, control: "text", type: "string" },
@@ -452,6 +450,7 @@ export const props: Record<string, PropMeta> = {
     required: false,
     control: "radio",
     type: "string",
+    defaultValue: "initial",
     options: ["initial", "success", "error"],
   },
 };

package/src/app/custom-components/form.tsx

@@ -1,3 +1,5 @@
+import { useFetcher } from "@remix-run/react";
+import { formIdFieldName } from "@webstudio-is/form-handlers";
 import {
   Children,
   cloneElement,
@@ -6,6 +8,7 @@ import {
   type ElementRef,
   type ComponentProps,
 } from "react";
+import { getInstanceIdFromComponentProps } from "../../props";
 
 export const defaultTag = "form";
 
@@ -78,17 +81,31 @@ const withoutMessages = (children: ReactNode) =>
 
 export const Form = forwardRef<
   ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag> & {
+  Omit<ComponentProps<typeof defaultTag>, "method" | "action"> & {
     initialState?: "initial" | "success" | "error";
   }
->(({ children, initialState = "initial", ...props }, ref) => (
-  <form {...props} data-state={initialState} ref={ref}>
-    {initialState === "success"
-      ? onlySuccessMessage(children)
-      : initialState === "error"
-      ? onlyErrorMessage(children)
-      : withoutMessages(children)}
-  </form>
-));
+>(({ children, initialState = "initial", ...props }, ref) => {
+  const fetcher = useFetcher();
+
+  const state =
+    fetcher.type === "done"
+      ? fetcher.data?.success === true
+        ? "success"
+        : "error"
+      : initialState;
+
+  const instanceId = getInstanceIdFromComponentProps(props);
+
+  return (
+    <fetcher.Form {...props} method="post" data-state={state} ref={ref}>
+      <input type="hidden" name={formIdFieldName} value={instanceId} />
+      {state === "success"
+        ? onlySuccessMessage(children)
+        : state === "error"
+        ? onlyErrorMessage(children)
+        : withoutMessages(children)}
+    </fetcher.Form>
+  );
+});
 
 Form.displayName = "Form";

package/src/css/normalize.ts

@@ -16,7 +16,7 @@
  */
 
 // webstudio custom opinionated presets
-import { borders, linkColors } from "./presets";
+import { borders } from "./presets";
 import type { EmbedTemplateStyleDecl } from "../embed-template";
 
 export type Styles = EmbedTemplateStyleDecl[];
@@ -63,7 +63,7 @@ export const i = baseStyle;
 
 export const img = baseStyle;
 
-export const a = [boxSizing, ...borders, ...linkColors];
+export const a = baseStyle;
 export const li = baseStyle;
 export const ul = baseStyle;
 export const ol = baseStyle;

package/src/css/presets.ts

@@ -18,21 +18,3 @@ export const borders: Styles = [
     value: { type: "unit", value: 1, unit: "px" },
   },
 ];
-
-export const linkColors: Styles = [
-  {
-    property: "color",
-    value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 },
-  },
-  {
-    state: ":active",
-    property: "color",
-    // chrome and safari use rgb(255, 0, 0)
-    value: { type: "rgb", r: 238, g: 0, b: 0, alpha: 1 },
-  },
-  {
-    state: ":visited",
-    property: "color",
-    value: { type: "rgb", r: 85, g: 26, b: 139, alpha: 1 },
-  },
-];