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

package/src/__generated__/rich-text-link.props.ts

@@ -1,117 +1,8 @@
 import type { PropMeta } from "@webstudio-is/generate-arg-types";
 
 export const props: Record<string, PropMeta> = {
-  slot: { required: false, control: "text", type: "string" },
-  style: { required: false, control: "text", type: "string" },
-  title: { required: false, control: "text", type: "string" },
-  download: { required: false, control: "text", type: "string" },
-  href: { required: false, control: "text", type: "string" },
-  hrefLang: { required: false, control: "text", type: "string" },
-  media: { required: false, control: "text", type: "string" },
-  ping: { required: false, control: "text", type: "string" },
-  type: { required: false, control: "text", type: "string" },
-  referrerPolicy: {
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "",
-      "no-referrer",
-      "no-referrer-when-downgrade",
-      "origin",
-      "origin-when-cross-origin",
-      "same-origin",
-      "strict-origin",
-      "strict-origin-when-cross-origin",
-      "unsafe-url",
-    ],
-  },
-  defaultChecked: { required: false, control: "boolean", type: "boolean" },
-  defaultValue: { required: false, control: "text", type: "string" },
-  suppressContentEditableWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-  },
-  suppressHydrationWarning: {
-    required: false,
-    control: "boolean",
-    type: "boolean",
-  },
-  accessKey: { required: false, control: "text", type: "string" },
-  autoFocus: { required: false, control: "boolean", type: "boolean" },
-  className: { required: false, control: "text", type: "string" },
-  contentEditable: { required: false, control: "text", type: "string" },
-  contextMenu: { required: false, control: "text", type: "string" },
-  dir: { required: false, control: "text", type: "string" },
-  draggable: { required: false, control: "boolean", type: "boolean" },
-  hidden: { required: false, control: "boolean", type: "boolean" },
-  id: { required: false, control: "text", type: "string" },
-  lang: { required: false, control: "text", type: "string" },
-  nonce: { required: false, control: "text", type: "string" },
-  placeholder: { required: false, control: "text", type: "string" },
-  spellCheck: { required: false, control: "boolean", type: "boolean" },
-  tabIndex: { required: false, control: "number", type: "number" },
-  translate: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["yes", "no"],
-  },
-  radioGroup: { required: false, control: "text", type: "string" },
-  role: { required: false, control: "text", type: "string" },
   about: { required: false, control: "text", type: "string" },
-  content: { required: false, control: "text", type: "string" },
-  datatype: { required: false, control: "text", type: "string" },
-  inlist: { required: false, control: "text", type: "string" },
-  prefix: { required: false, control: "text", type: "string" },
-  property: { required: false, control: "text", type: "string" },
-  rel: { required: false, control: "text", type: "string" },
-  resource: { required: false, control: "text", type: "string" },
-  rev: { required: false, control: "text", type: "string" },
-  typeof: { required: false, control: "text", type: "string" },
-  vocab: { required: false, control: "text", type: "string" },
-  autoCapitalize: { required: false, control: "text", type: "string" },
-  autoCorrect: { required: false, control: "text", type: "string" },
-  autoSave: { required: false, control: "text", type: "string" },
-  color: { required: false, control: "color", type: "string" },
-  itemProp: { required: false, control: "text", type: "string" },
-  itemScope: { required: false, control: "boolean", type: "boolean" },
-  itemType: { required: false, control: "text", type: "string" },
-  itemID: { required: false, control: "text", type: "string" },
-  itemRef: { required: false, control: "text", type: "string" },
-  results: { required: false, control: "number", type: "number" },
-  security: { required: false, control: "text", type: "string" },
-  unselectable: {
-    required: false,
-    control: "radio",
-    type: "string",
-    options: ["on", "off"],
-  },
-  inputMode: {
-    description:
-      "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
-    required: false,
-    control: "select",
-    type: "string",
-    options: [
-      "text",
-      "none",
-      "search",
-      "tel",
-      "url",
-      "email",
-      "numeric",
-      "decimal",
-    ],
-  },
-  is: {
-    description:
-      "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
-    required: false,
-    control: "text",
-    type: "string",
-  },
+  accessKey: { required: false, control: "text", type: "string" },
   "aria-activedescendant": {
     description:
       "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",
@@ -462,19 +353,123 @@ export const props: Record<string, PropMeta> = {
     control: "text",
     type: "string",
   },
-  target: {
+  autoCapitalize: { required: false, control: "text", type: "string" },
+  autoCorrect: { required: false, control: "text", type: "string" },
+  autoFocus: { required: false, control: "boolean", type: "boolean" },
+  autoSave: { required: false, control: "text", type: "string" },
+  className: { required: false, control: "text", type: "string" },
+  color: { required: false, control: "color", type: "string" },
+  content: { required: false, control: "text", type: "string" },
+  contextMenu: { required: false, control: "text", type: "string" },
+  datatype: { required: false, control: "text", type: "string" },
+  defaultChecked: { required: false, control: "boolean", type: "boolean" },
+  dir: { required: false, control: "text", type: "string" },
+  draggable: { required: false, control: "boolean", type: "boolean" },
+  hidden: { required: false, control: "boolean", type: "boolean" },
+  href: { required: false, control: "text", type: "string" },
+  hrefLang: { required: false, control: "text", type: "string" },
+  id: { required: false, control: "text", type: "string" },
+  inputMode: {
+    description:
+      "Hints at the type of data that might be entered by the user while editing the element or its contents\n@see https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute",
     required: false,
     control: "select",
     type: "string",
-    options: ["_self", "_blank", "_parent", "_top"],
+    options: [
+      "text",
+      "none",
+      "search",
+      "tel",
+      "url",
+      "email",
+      "numeric",
+      "decimal",
+    ],
+  },
+  is: {
+    description:
+      "Specify that a standard HTML element should behave like a defined custom built-in element\n@see https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is",
+    required: false,
+    control: "text",
+    type: "string",
   },
+  itemID: { required: false, control: "text", type: "string" },
+  itemProp: { required: false, control: "text", type: "string" },
+  itemRef: { required: false, control: "text", type: "string" },
+  itemScope: { required: false, control: "boolean", type: "boolean" },
+  itemType: { required: false, control: "text", type: "string" },
+  lang: { required: false, control: "text", type: "string" },
+  media: { required: false, control: "text", type: "string" },
+  nonce: { required: false, control: "text", type: "string" },
+  ping: { required: false, control: "text", type: "string" },
+  placeholder: { required: false, control: "text", type: "string" },
   prefetch: {
     required: false,
     control: "radio",
     type: "string",
     options: ["none", "intent", "render"],
   },
+  prefix: { required: false, control: "text", type: "string" },
+  preventScrollReset: { required: false, control: "boolean", type: "boolean" },
+  property: { required: false, control: "text", type: "string" },
+  radioGroup: { required: false, control: "text", type: "string" },
+  referrerPolicy: {
+    required: false,
+    control: "select",
+    type: "string",
+    options: [
+      "",
+      "no-referrer",
+      "no-referrer-when-downgrade",
+      "origin",
+      "origin-when-cross-origin",
+      "same-origin",
+      "strict-origin",
+      "strict-origin-when-cross-origin",
+      "unsafe-url",
+    ],
+  },
+  rel: { required: false, control: "text", type: "string" },
   reloadDocument: { required: false, control: "boolean", type: "boolean" },
   replace: { required: false, control: "boolean", type: "boolean" },
-  preventScrollReset: { required: false, control: "boolean", type: "boolean" },
+  resource: { required: false, control: "text", type: "string" },
+  results: { required: false, control: "number", type: "number" },
+  rev: { required: false, control: "text", type: "string" },
+  role: { required: false, control: "text", type: "string" },
+  security: { required: false, control: "text", type: "string" },
+  slot: { required: false, control: "text", type: "string" },
+  spellCheck: { required: false, control: "boolean", type: "boolean" },
+  suppressContentEditableWarning: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+  },
+  suppressHydrationWarning: {
+    required: false,
+    control: "boolean",
+    type: "boolean",
+  },
+  tabIndex: { required: false, control: "number", type: "number" },
+  target: {
+    required: false,
+    control: "select",
+    type: "string",
+    options: ["_self", "_blank", "_parent", "_top"],
+  },
+  title: { required: false, control: "text", type: "string" },
+  translate: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["yes", "no"],
+  },
+  type: { required: false, control: "text", type: "string" },
+  typeof: { required: false, control: "text", type: "string" },
+  unselectable: {
+    required: false,
+    control: "radio",
+    type: "string",
+    options: ["on", "off"],
+  },
+  vocab: { required: false, control: "text", type: "string" },
 };

package/src/form.tsx

@@ -1,109 +1,61 @@
 import {
-  type ReactNode,
   type ElementRef,
   type ComponentProps,
-  Children,
-  cloneElement,
   forwardRef,
+  useRef,
+  useEffect,
+  useContext,
 } from "react";
-import { useFetcher } from "@remix-run/react";
+import { useFetcher, type Fetcher } 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";
 
 export const defaultTag = "form";
 
-const isComponentNode = (
-  component: string,
-  node: Exclude<ReactNode, null | number | string | boolean | undefined>
-) => "props" in node && node.props.instance?.component === component;
-
-const onlyErrorMessage = (children: ReactNode) =>
-  Children.map(children, (child): ReactNode => {
-    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((child) => child !== null)
-        ? cloneElement(child, { children: newChildren })
-        : null;
-    }
-
-    return onlyErrorMessage(child);
-  });
-
-const onlySuccessMessage = (children: ReactNode) =>
-  Children.map(children, (child): ReactNode => {
-    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((child) => child !== null)
-        ? cloneElement(child, { children: newChildren })
-        : null;
-    }
-
-    return onlySuccessMessage(child);
-  });
-
-const withoutMessages = (children: ReactNode) =>
-  Children.map(children, (child): ReactNode => {
-    if (typeof child !== "object" || child === null) {
-      return child;
-    }
+const useOnFetchEnd = <Data,>(
+  fetcher: Fetcher<Data>,
+  handler: (data: Data) => void
+) => {
+  const latestHandler = useRef(handler);
+  latestHandler.current = handler;
 
+  const prevFetcher = useRef(fetcher);
+  useEffect(() => {
     if (
-      isComponentNode("ErrorMessage", child) ||
-      isComponentNode("SuccessMessage", child)
+      prevFetcher.current.state !== fetcher.state &&
+      fetcher.state === "idle" &&
+      fetcher.data !== undefined
     ) {
-      return null;
-    }
-
-    if ("props" in child) {
-      return cloneElement(child, {
-        children: withoutMessages(child.props.children),
-      });
+      latestHandler.current(fetcher.data);
     }
+    prevFetcher.current = fetcher;
+  }, [fetcher]);
+};
 
-    return withoutMessages(child);
-  });
+type State = "initial" | "success" | "error";
 
 export const Form = forwardRef<
   ElementRef<typeof defaultTag>,
-  Omit<ComponentProps<typeof defaultTag>, "method" | "action"> & {
-    initialState?: "initial" | "success" | "error";
-  }
->(({ children, initialState = "initial", ...props }, ref) => {
+  ComponentProps<typeof defaultTag> & { state?: State }
+>(({ 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(rest);
 
-  const instanceId = getInstanceIdFromComponentProps(props);
+  useOnFetchEnd(fetcher, (data) => {
+    const state: State = data?.success === true ? "success" : "error";
+    setDataSourceValue(instanceId, "state", state);
+  });
 
   return (
-    <fetcher.Form {...props} method="post" data-state={state} ref={ref}>
+    <fetcher.Form {...rest} method="post" data-state={state} ref={ref}>
       <input type="hidden" name={formIdFieldName} value={instanceId} />
-      {state === "success"
-        ? onlySuccessMessage(children)
-        : state === "error"
-        ? onlyErrorMessage(children)
-        : withoutMessages(children)}
+      {children}
     </fetcher.Form>
   );
 });

package/src/form.ws.tsx

@@ -1,9 +1,10 @@
 import { FormIcon } from "@webstudio-is/icons/svg";
 import { form } from "@webstudio-is/react-sdk/css-normalize";
-import type {
-  PresetStyle,
-  WsComponentMeta,
-  WsComponentPropsMeta,
+import {
+  type PresetStyle,
+  type WsComponentMeta,
+  type WsComponentPropsMeta,
+  showAttribute,
 } from "@webstudio-is/react-sdk";
 import type { defaultTag } from "./form";
 import { props } from "./__generated__/form.props";
@@ -18,6 +19,7 @@ const presetStyle = {
 export const meta: WsComponentMeta = {
   category: "forms",
   type: "container",
+  invalidAncestors: ["Form"],
   label: "Form",
   icon: FormIcon,
   presetStyle,
@@ -30,59 +32,103 @@ export const meta: WsComponentMeta = {
     {
       type: "instance",
       component: "Form",
-      children: [
-        {
-          type: "instance",
-          component: "Label",
-          children: [{ type: "text", value: "Name" }],
-        },
+      props: [
         {
-          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" }],
+          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",
+          label: "Success Message",
+          component: "Box",
+          props: [
+            {
+              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: [
             {
-              type: "instance",
-              component: "Text",
-              children: [
-                { type: "text", value: "Sorry, something went wrong." },
-              ],
+              name: showAttribute,
+              type: "boolean",
+              value: false,
+              dataSourceRef: {
+                type: "expression",
+                name: "formError",
+                code: `formState === 'error'`,
+              },
             },
           ],
+          children: [{ type: "text", value: "Sorry, something went wrong." }],
         },
       ],
     },
@@ -91,5 +137,5 @@ export const meta: WsComponentMeta = {
 
 export const propsMeta: WsComponentPropsMeta = {
   props,
-  initialProps: ["initialState"],
+  initialProps: ["state"],
 };

package/src/shared/remix-link.tsx

@@ -23,9 +23,14 @@ export const wrapLinkComponent = (BaseLink: typeof Link) => {
 
     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 !== undefined) {
-        to += `#${href.hash}`;
+        urlTo.hash = encodeURIComponent(href.hash);
+        to = `${urlTo.pathname}${urlTo.hash}`;
       }
+
       return <RemixLink {...props} to={to} ref={ref} />;
     }