@webstudio-is/sdk-components-react-remix 0.151.0 → 0.167.0

package/lib/components.js

@@ -22,8 +22,11 @@ import { jsx as jsx2 } from "react/jsx-runtime";
 var wrapLinkComponent = (BaseLink3) => {
   const Component = forwardRef2((props, ref) => {
     const { assetBaseUrl, renderer } = useContext(ReactSdkContext);
-    const href = props.href;
-    if (href === "" || href?.startsWith("/") && href.startsWith(assetBaseUrl) === false) {
+    const href = String(props.href ?? "");
+    if (
+      // remix appends ?index in runtime but not in ssr
+      href === "" || href.startsWith("?") || href.startsWith("#") || href.startsWith("/") && href.startsWith(assetBaseUrl) === false
+    ) {
       if (renderer !== "canvas" && renderer !== "preview") {
         return /* @__PURE__ */ jsx2(RemixLink, { ...props, to: href, ref });
       }
@@ -49,8 +52,15 @@ import {
   useEffect
 } from "react";
 import { useFetcher } from "@remix-run/react";
-import { formIdFieldName } from "@webstudio-is/form-handlers";
+import { formIdFieldName as formIdFieldName2 } from "@webstudio-is/form-handlers";
 import { getInstanceIdFromComponentProps } from "@webstudio-is/react-sdk";
+
+// ../form-handlers/src/shared.ts
+var formHiddenFieldPrefix = "ws--form";
+var formIdFieldName = `${formHiddenFieldPrefix}-id`;
+var formBotFieldName = `${formHiddenFieldPrefix}-bot`;
+
+// src/webhook-form.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var useOnFetchEnd = (fetcher, handler) => {
   const latestHandler = useRef(handler);
@@ -63,6 +73,32 @@ var useOnFetchEnd = (fetcher, handler) => {
     prevFetcher.current = fetcher;
   }, [fetcher]);
 };
+var gcd = (a, b) => b === 0 ? a : gcd(b, a % b);
+var getAspectRatioString = (width, height) => {
+  const r = gcd(width, height);
+  const aspectRatio = `${width / r}/${height / r}`;
+  return aspectRatio;
+};
+var isJSDom = () => {
+  if (typeof matchMedia === "undefined") {
+    return true;
+  }
+  const { width, height } = screen;
+  const deviceAspectRatio = getAspectRatioString(width, height);
+  const matchAspectRatio = matchMedia(
+    `(device-aspect-ratio: ${deviceAspectRatio})`
+  ).matches;
+  const matchWidthHeight = matchMedia(
+    `(device-width: ${width}px) and (device-height: ${height}px)`
+  ).matches;
+  const matchWidthHeightFail = matchMedia(
+    `(device-width: ${width - 1}px) and (device-height: ${height}px)`
+  ).matches;
+  const matchLight = matchMedia("(prefers-color-scheme: light)").matches;
+  const matchDark = matchMedia("(prefers-color-scheme: dark)").matches;
+  const hasMatchMedia = matchAspectRatio && matchWidthHeight && !matchWidthHeightFail && matchLight !== matchDark;
+  return hasMatchMedia === false;
+};
 var WebhookForm = forwardRef3(
   ({ children, action, method, state = "initial", onStateChange, ...rest }, ref) => {
     const fetcher = useFetcher();
@@ -71,21 +107,45 @@ var WebhookForm = forwardRef3(
       const state2 = data?.success === true ? "success" : "error";
       onStateChange?.(state2);
     });
-    return /* @__PURE__ */ jsxs2(fetcher.Form, { ...rest, method: "post", "data-state": state, ref, children: [
-      /* @__PURE__ */ jsx3("input", { type: "hidden", name: formIdFieldName, value: instanceId }),
-      children
-    ] });
+    const handleSubmitAndAddHiddenJsField = (event) => {
+      const hiddenInput = document.createElement("input");
+      hiddenInput.type = "hidden";
+      hiddenInput.name = formBotFieldName;
+      hiddenInput.value = isJSDom() ? "jsdom" : Date.now().toString(16);
+      event.currentTarget.appendChild(hiddenInput);
+    };
+    return /* @__PURE__ */ jsxs2(
+      fetcher.Form,
+      {
+        ...rest,
+        method: "post",
+        "data-state": state,
+        ref,
+        onSubmit: handleSubmitAndAddHiddenJsField,
+        children: [
+          /* @__PURE__ */ jsx3("input", { type: "hidden", name: formIdFieldName2, value: instanceId }),
+          children
+        ]
+      }
+    );
   }
 );
 WebhookForm.displayName = "WebhookForm";
 
 // src/remix-form.tsx
-import { forwardRef as forwardRef4 } from "react";
+import {
+  forwardRef as forwardRef4,
+  useContext as useContext2
+} from "react";
 import { Form } from "@remix-run/react";
+import { ReactSdkContext as ReactSdkContext2 } from "@webstudio-is/react-sdk";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var RemixForm = forwardRef4((props, ref) => {
-  if (props.action === "" || props.action?.startsWith("/")) {
-    return /* @__PURE__ */ jsx4(Form, { ...props, ref });
+  const { renderer } = useContext2(ReactSdkContext2);
+  if (props.action === void 0 || props.action === "" || props.action?.startsWith("/")) {
+    if (renderer !== "canvas" && renderer !== "preview") {
+      return /* @__PURE__ */ jsx4(Form, { ...props, ref });
+    }
   }
   return /* @__PURE__ */ jsx4("form", { ...props, ref });
 });

package/lib/metas.js

@@ -639,7 +639,7 @@ var meta = {
             {
               type: "instance",
               component: "Label",
-              children: [{ type: "text", value: "Name" }]
+              children: [{ type: "text", value: "Name", placeholder: true }]
             },
             {
               type: "instance",
@@ -650,7 +650,7 @@ var meta = {
             {
               type: "instance",
               component: "Label",
-              children: [{ type: "text", value: "Email" }]
+              children: [{ type: "text", value: "Email", placeholder: true }]
             },
             {
               type: "instance",
@@ -661,7 +661,7 @@ var meta = {
             {
               type: "instance",
               component: "Button",
-              children: [{ type: "text", value: "Submit" }]
+              children: [{ type: "text", value: "Submit", placeholder: true }]
             }
           ]
         },
@@ -677,7 +677,11 @@ var meta = {
             }
           ],
           children: [
-            { type: "text", value: "Thank you for getting in touch!" }
+            {
+              type: "text",
+              value: "Thank you for getting in touch!",
+              placeholder: true
+            }
           ]
         },
         {
@@ -691,7 +695,13 @@ var meta = {
               code: "formState === 'error'"
             }
           ],
-          children: [{ type: "text", value: "Sorry, something went wrong." }]
+          children: [
+            {
+              type: "text",
+              value: "Sorry, something went wrong.",
+              placeholder: true
+            }
+          ]
         }
       ]
     }

package/lib/props.js

@@ -1205,7 +1205,7 @@ var meta = {
             {
               type: "instance",
               component: "Label",
-              children: [{ type: "text", value: "Name" }]
+              children: [{ type: "text", value: "Name", placeholder: true }]
             },
             {
               type: "instance",
@@ -1216,7 +1216,7 @@ var meta = {
             {
               type: "instance",
               component: "Label",
-              children: [{ type: "text", value: "Email" }]
+              children: [{ type: "text", value: "Email", placeholder: true }]
             },
             {
               type: "instance",
@@ -1227,7 +1227,7 @@ var meta = {
             {
               type: "instance",
               component: "Button",
-              children: [{ type: "text", value: "Submit" }]
+              children: [{ type: "text", value: "Submit", placeholder: true }]
             }
           ]
         },
@@ -1243,7 +1243,11 @@ var meta = {
             }
           ],
           children: [
-            { type: "text", value: "Thank you for getting in touch!" }
+            {
+              type: "text",
+              value: "Thank you for getting in touch!",
+              placeholder: true
+            }
           ]
         },
         {
@@ -1257,7 +1261,13 @@ var meta = {
               code: "formState === 'error'"
             }
           ],
-          children: [{ type: "text", value: "Sorry, something went wrong." }]
+          children: [
+            {
+              type: "text",
+              value: "Sorry, something went wrong.",
+              placeholder: true
+            }
+          ]
         }
       ]
     }

package/lib/types/form-handlers/src/shared.d.ts

@@ -0,0 +1,33 @@
+export declare const formIdFieldName = "ws--form-id";
+export declare const formBotFieldName = "ws--form-bot";
+export type FormInfo = {
+    projectId: string;
+    pageUrl: string;
+    formData: FormData;
+    toEmail: string;
+    fromEmail: string;
+    action: string | null;
+    method: "get" | "post";
+};
+export type EmailInfo = {
+    from: string;
+    to: string;
+    txt: string;
+    /** Only the body content, requers wrapping into `<!DOCTYPE html><html><body>...</body></html>` */
+    html: string;
+    subject: string;
+};
+export type Result = {
+    success: true;
+} | {
+    success: false;
+    errors: string[];
+};
+/** Returns form entries that should be send in email: removes `File` entries and `formId` */
+export declare const getFormEntries: (formData: FormData) => [string, string][];
+export declare const formToEmail: ({ formData, pageUrl, toEmail, fromEmail, }: FormInfo) => EmailInfo;
+export declare const getResponseBody: (response: Response) => Promise<{
+    text: string;
+    json?: Record<string, unknown>;
+}>;
+export declare const getErrors: (json: Record<string, unknown> | undefined) => string[] | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-remix",
-  "version": "0.151.0",
+  "version": "0.167.0",
   "description": "Webstudio components for Remix",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -16,35 +16,32 @@
     ".": {
       "webstudio": "./src/components.ts",
       "types": "./lib/types/components.d.ts",
-      "import": "./lib/components.js",
-      "require": "./lib/components.js"
+      "import": "./lib/components.js"
     },
     "./metas": {
       "webstudio": "./src/metas.ts",
       "types": "./lib/types/metas.d.ts",
-      "import": "./lib/metas.js",
-      "require": "./lib/metas.js"
+      "import": "./lib/metas.js"
     },
     "./props": {
       "webstudio": "./src/props.ts",
       "types": "./lib/types/props.d.ts",
-      "import": "./lib/props.js",
-      "require": "./lib/props.js"
+      "import": "./lib/props.js"
     }
   },
   "peerDependencies": {
-    "@remix-run/react": "^2.9.1",
+    "@remix-run/react": "^2.9.2",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318"
   },
   "dependencies": {
-    "@webstudio-is/form-handlers": "0.151.0",
-    "@webstudio-is/icons": "0.151.0",
-    "@webstudio-is/sdk-components-react": "0.151.0",
-    "@webstudio-is/react-sdk": "0.151.0"
+    "@webstudio-is/form-handlers": "0.167.0",
+    "@webstudio-is/sdk-components-react": "0.167.0",
+    "@webstudio-is/icons": "0.167.0",
+    "@webstudio-is/react-sdk": "0.167.0"
   },
   "devDependencies": {
-    "@remix-run/react": "^2.9.1",
+    "@remix-run/react": "^2.9.2",
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",