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

package/lib/components.js

@@ -22,8 +22,8 @@ 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 (href === "" || href.startsWith("/") && href.startsWith(assetBaseUrl) === false) {
       if (renderer !== "canvas" && renderer !== "preview") {
         return /* @__PURE__ */ jsx2(RemixLink, { ...props, to: href, ref });
       }
@@ -49,8 +49,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 +70,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,10 +104,27 @@ 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";
@@ -84,7 +134,7 @@ import { forwardRef as forwardRef4 } from "react";
 import { Form } from "@remix-run/react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var RemixForm = forwardRef4((props, ref) => {
-  if (props.action === "" || props.action?.startsWith("/")) {
+  if (props.action === void 0 || props.action === "" || props.action?.startsWith("/")) {
     return /* @__PURE__ */ jsx4(Form, { ...props, ref });
   }
   return /* @__PURE__ */ jsx4("form", { ...props, ref });

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.163.0",
   "description": "Webstudio components for Remix",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -16,20 +16,17 @@
     ".": {
       "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": {
@@ -38,10 +35,10 @@
     "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.163.0",
+    "@webstudio-is/icons": "0.163.0",
+    "@webstudio-is/react-sdk": "0.163.0",
+    "@webstudio-is/sdk-components-react": "0.163.0"
   },
   "devDependencies": {
     "@remix-run/react": "^2.9.1",