@webstudio-is/sdk-components-react-remix 0.75.0 → 0.76.0

package/lib/cjs/form.ws.js

@@ -24,6 +24,7 @@ __export(form_ws_exports, {
 module.exports = __toCommonJS(form_ws_exports);
 var import_svg = require("@webstudio-is/icons/svg");
 var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_react_sdk = require("@webstudio-is/react-sdk");
 var import_form = require("./__generated__/form.props");
 const presetStyle = {
   form: [
@@ -34,6 +35,7 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "container",
+  invalidAncestors: ["Form"],
   label: "Form",
   icon: import_svg.FormIcon,
   presetStyle,
@@ -46,59 +48,101 @@ const meta = {
     {
       type: "instance",
       component: "Form",
-      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" }]
-        },
+      props: [
         {
-          type: "instance",
-          component: "Input",
-          props: [{ type: "string", name: "name", value: "email" }],
-          children: []
-        },
-        {
-          type: "instance",
-          component: "Button",
-          children: [{ type: "text", value: "Submit" }]
-        },
+          name: "state",
+          type: "string",
+          value: "initial",
+          dataSourceRef: {
+            type: "variable",
+            name: "formState"
+          }
+        }
+      ],
+      children: [
         {
           type: "instance",
-          component: "SuccessMessage",
+          label: "Form Content",
+          component: "Box",
+          props: [
+            {
+              name: import_react_sdk.showAttribute,
+              type: "boolean",
+              value: false,
+              dataSourceRef: {
+                type: "expression",
+                name: "formInitial",
+                code: `formState === 'initial' || formState === 'error'`
+              }
+            }
+          ],
           children: [
             {
               type: "instance",
-              component: "Text",
-              children: [
-                { type: "text", value: "Thank you for getting in touch!" }
-              ]
+              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",
-          component: "ErrorMessage",
-          children: [
+          label: "Success Message",
+          component: "Box",
+          props: [
             {
-              type: "instance",
-              component: "Text",
-              children: [
-                { type: "text", value: "Sorry, something went wrong." }
-              ]
+              name: import_react_sdk.showAttribute,
+              type: "boolean",
+              value: false,
+              dataSourceRef: {
+                type: "expression",
+                name: "formSuccess",
+                code: `formState === 'success'`
+              }
             }
+          ],
+          children: [
+            { type: "text", value: "Thank you for getting in touch!" }
           ]
+        },
+        {
+          type: "instance",
+          label: "Error Message",
+          component: "Box",
+          props: [
+            {
+              name: import_react_sdk.showAttribute,
+              type: "boolean",
+              value: false,
+              dataSourceRef: {
+                type: "expression",
+                name: "formError",
+                code: `formState === 'error'`
+              }
+            }
+          ],
+          children: [{ type: "text", value: "Sorry, something went wrong." }]
         }
       ]
     }
@@ -106,5 +150,5 @@ const meta = {
 };
 const propsMeta = {
   props: import_form.props,
-  initialProps: ["initialState"]
+  initialProps: ["state"]
 };

package/lib/cjs/shared/remix-link.js

@@ -30,8 +30,11 @@ const wrapLinkComponent = (BaseLink) => {
     const href = (0, import_react_sdk.usePropUrl)((0, import_react_sdk.getInstanceIdFromComponentProps)(props), "href");
     if (href?.type === "page") {
       let to = href.page.path === "" ? "/" : href.page.path;
+      const urlTo = new URL(to, "https://any-valid.url");
+      to = urlTo.pathname;
       if (href.hash !== void 0) {
-        to += `#${href.hash}`;
+        urlTo.hash = encodeURIComponent(href.hash);
+        to = `${urlTo.pathname}${urlTo.hash}`;
       }
       return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.NavLink, { ...props, to, ref });
     }

package/lib/form.js

@@ -1,61 +1,39 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
-  Children,
-  cloneElement,
-  forwardRef
+  forwardRef,
+  useRef,
+  useEffect,
+  useContext
 } from "react";
 import { useFetcher } from "@remix-run/react";
 import { formIdFieldName } from "@webstudio-is/form-handlers";
-import { getInstanceIdFromComponentProps } from "@webstudio-is/react-sdk";
+import {
+  ReactSdkContext,
+  getInstanceIdFromComponentProps
+} from "@webstudio-is/react-sdk";
 const defaultTag = "form";
-const isComponentNode = (component, node) => "props" in node && node.props.instance?.component === component;
-const onlyErrorMessage = (children) => Children.map(children, (child) => {
-  if (typeof child !== "object" || child === null) {
-    return null;
-  }
-  if (isComponentNode("ErrorMessage", child)) {
-    return child;
-  }
-  if ("props" in child) {
-    const newChildren = onlyErrorMessage(child.props.children);
-    return Children.toArray(newChildren).some((child2) => child2 !== null) ? cloneElement(child, { children: newChildren }) : null;
-  }
-  return onlyErrorMessage(child);
-});
-const onlySuccessMessage = (children) => Children.map(children, (child) => {
-  if (typeof child !== "object" || child === null) {
-    return null;
-  }
-  if (isComponentNode("SuccessMessage", child)) {
-    return child;
-  }
-  if ("props" in child) {
-    const newChildren = onlySuccessMessage(child.props.children);
-    return Children.toArray(newChildren).some((child2) => child2 !== null) ? cloneElement(child, { children: newChildren }) : null;
-  }
-  return onlySuccessMessage(child);
-});
-const withoutMessages = (children) => Children.map(children, (child) => {
-  if (typeof child !== "object" || child === null) {
-    return child;
-  }
-  if (isComponentNode("ErrorMessage", child) || isComponentNode("SuccessMessage", child)) {
-    return null;
-  }
-  if ("props" in child) {
-    return cloneElement(child, {
-      children: withoutMessages(child.props.children)
-    });
-  }
-  return withoutMessages(child);
-});
-const Form = forwardRef(({ children, initialState = "initial", ...props }, ref) => {
+const useOnFetchEnd = (fetcher, handler) => {
+  const latestHandler = useRef(handler);
+  latestHandler.current = handler;
+  const prevFetcher = useRef(fetcher);
+  useEffect(() => {
+    if (prevFetcher.current.state !== fetcher.state && fetcher.state === "idle" && fetcher.data !== void 0) {
+      latestHandler.current(fetcher.data);
+    }
+    prevFetcher.current = fetcher;
+  }, [fetcher]);
+};
+const Form = forwardRef(({ children, action, method, state = "initial", ...rest }, ref) => {
+  const { setDataSourceValue } = useContext(ReactSdkContext);
   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: [
+  const instanceId = getInstanceIdFromComponentProps(rest);
+  useOnFetchEnd(fetcher, (data) => {
+    const state2 = data?.success === true ? "success" : "error";
+    setDataSourceValue(instanceId, "state", state2);
+  });
+  return /* @__PURE__ */ jsxs(fetcher.Form, { ...rest, 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)
+    children
   ] });
 });
 Form.displayName = "Form";

package/lib/form.ws.js

@@ -1,5 +1,8 @@
 import { FormIcon } from "@webstudio-is/icons/svg";
 import { form } from "@webstudio-is/react-sdk/css-normalize";
+import {
+  showAttribute
+} from "@webstudio-is/react-sdk";
 import { props } from "./__generated__/form.props";
 const presetStyle = {
   form: [
@@ -10,6 +13,7 @@ const presetStyle = {
 const meta = {
   category: "forms",
   type: "container",
+  invalidAncestors: ["Form"],
   label: "Form",
   icon: FormIcon,
   presetStyle,
@@ -22,59 +26,101 @@ const meta = {
     {
       type: "instance",
       component: "Form",
-      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" }]
-        },
+      props: [
         {
-          type: "instance",
-          component: "Input",
-          props: [{ type: "string", name: "name", value: "email" }],
-          children: []
-        },
-        {
-          type: "instance",
-          component: "Button",
-          children: [{ type: "text", value: "Submit" }]
-        },
+          name: "state",
+          type: "string",
+          value: "initial",
+          dataSourceRef: {
+            type: "variable",
+            name: "formState"
+          }
+        }
+      ],
+      children: [
         {
           type: "instance",
-          component: "SuccessMessage",
+          label: "Form Content",
+          component: "Box",
+          props: [
+            {
+              name: showAttribute,
+              type: "boolean",
+              value: false,
+              dataSourceRef: {
+                type: "expression",
+                name: "formInitial",
+                code: `formState === 'initial' || formState === 'error'`
+              }
+            }
+          ],
           children: [
             {
               type: "instance",
-              component: "Text",
-              children: [
-                { type: "text", value: "Thank you for getting in touch!" }
-              ]
+              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",
-          component: "ErrorMessage",
-          children: [
+          label: "Success Message",
+          component: "Box",
+          props: [
             {
-              type: "instance",
-              component: "Text",
-              children: [
-                { type: "text", value: "Sorry, something went wrong." }
-              ]
+              name: showAttribute,
+              type: "boolean",
+              value: false,
+              dataSourceRef: {
+                type: "expression",
+                name: "formSuccess",
+                code: `formState === 'success'`
+              }
             }
+          ],
+          children: [
+            { type: "text", value: "Thank you for getting in touch!" }
           ]
+        },
+        {
+          type: "instance",
+          label: "Error Message",
+          component: "Box",
+          props: [
+            {
+              name: showAttribute,
+              type: "boolean",
+              value: false,
+              dataSourceRef: {
+                type: "expression",
+                name: "formError",
+                code: `formState === 'error'`
+              }
+            }
+          ],
+          children: [{ type: "text", value: "Sorry, something went wrong." }]
         }
       ]
     }
@@ -82,7 +128,7 @@ const meta = {
 };
 const propsMeta = {
   props,
-  initialProps: ["initialState"]
+  initialProps: ["state"]
 };
 export {
   meta,

package/lib/shared/remix-link.js

@@ -10,8 +10,11 @@ const wrapLinkComponent = (BaseLink) => {
     const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
     if (href?.type === "page") {
       let to = href.page.path === "" ? "/" : href.page.path;
+      const urlTo = new URL(to, "https://any-valid.url");
+      to = urlTo.pathname;
       if (href.hash !== void 0) {
-        to += `#${href.hash}`;
+        urlTo.hash = encodeURIComponent(href.hash);
+        to = `${urlTo.pathname}${urlTo.hash}`;
       }
       return /* @__PURE__ */ jsx(RemixLink, { ...props, to, ref });
     }

package/lib/types/form.d.ts

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

package/lib/types/form.ws.d.ts

@@ -1,3 +1,3 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/react-sdk";
+import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
 export declare const meta: WsComponentMeta;
 export declare const propsMeta: WsComponentPropsMeta;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-remix",
-  "version": "0.75.0",
+  "version": "0.76.0",
   "description": "Webstudio components for Remix",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -38,11 +38,11 @@
     "react-dom": "^18.2.0"
   },
   "dependencies": {
-    "@webstudio-is/form-handlers": "^0.75.0",
-    "@webstudio-is/generate-arg-types": "^0.75.0",
-    "@webstudio-is/icons": "^0.75.0",
-    "@webstudio-is/react-sdk": "^0.75.0",
-    "@webstudio-is/sdk-components-react": "^0.75.0"
+    "@webstudio-is/form-handlers": "^0.76.0",
+    "@webstudio-is/generate-arg-types": "^0.76.0",
+    "@webstudio-is/icons": "^0.76.0",
+    "@webstudio-is/react-sdk": "^0.76.0",
+    "@webstudio-is/sdk-components-react": "^0.76.0"
   },
   "devDependencies": {
     "@remix-run/react": "^1.15.0",
@@ -60,7 +60,6 @@
     "build:args": "generate-arg-types './src/*.tsx !./src/**/*.stories.tsx !./src/**/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false",
-    "lint": "eslint ./src --ext .ts,.tsx --max-warnings 0",
-    "checks": "pnpm typecheck && pnpm lint"
+    "checks": "pnpm typecheck"
   }
 }