@webstudio-is/sdk-components-react-remix 0.91.0 → 0.92.0

package/src/form.tsx

@@ -1,67 +0,0 @@
-import {
-  type ElementRef,
-  type ComponentProps,
-  forwardRef,
-  useRef,
-  useEffect,
-  useContext,
-} from "react";
-import { useFetcher, type Fetcher, type FormProps } from "@remix-run/react";
-import { formIdFieldName } from "@webstudio-is/form-handlers";
-import {
-  ReactSdkContext,
-  getInstanceIdFromComponentProps,
-} from "@webstudio-is/react-sdk";
-
-export const defaultTag = "form";
-
-const useOnFetchEnd = <Data,>(
-  fetcher: Fetcher<Data>,
-  handler: (data: Data) => void
-) => {
-  const latestHandler = useRef(handler);
-  latestHandler.current = handler;
-
-  const prevFetcher = useRef(fetcher);
-  useEffect(() => {
-    if (
-      prevFetcher.current.state !== fetcher.state &&
-      fetcher.state === "idle" &&
-      fetcher.data !== undefined
-    ) {
-      latestHandler.current(fetcher.data);
-    }
-    prevFetcher.current = fetcher;
-  }, [fetcher]);
-};
-
-type State = "initial" | "success" | "error";
-
-export const Form = forwardRef<
-  ElementRef<typeof defaultTag>,
-  ComponentProps<typeof defaultTag> & {
-    /** Use this property to reveal the Success and Error states on the canvas so they can be styled. The Initial state is displayed when the page first opens. The Success and Error states are displayed depending on whether the Form submits successfully or unsuccessfully. */
-    state?: State;
-    encType?: FormProps["encType"];
-  }
->(({ children, action, method, state = "initial", ...rest }, ref) => {
-  const { setBoundDataSourceValue } = useContext(ReactSdkContext);
-
-  const fetcher = useFetcher();
-
-  const instanceId = getInstanceIdFromComponentProps(rest);
-
-  useOnFetchEnd(fetcher, (data) => {
-    const state: State = data?.success === true ? "success" : "error";
-    setBoundDataSourceValue(instanceId, "state", state);
-  });
-
-  return (
-    <fetcher.Form {...rest} method="post" data-state={state} ref={ref}>
-      <input type="hidden" name={formIdFieldName} value={instanceId} />
-      {children}
-    </fetcher.Form>
-  );
-});
-
-Form.displayName = "Form";

package/src/form.ws.tsx

@@ -1,144 +0,0 @@
-import { FormIcon } from "@webstudio-is/icons/svg";
-import { form } from "@webstudio-is/react-sdk/css-normalize";
-import {
-  type PresetStyle,
-  type WsComponentMeta,
-  type WsComponentPropsMeta,
-  showAttribute,
-} from "@webstudio-is/react-sdk";
-import type { defaultTag } from "./form";
-import { props } from "./__generated__/form.props";
-
-const presetStyle = {
-  form: [
-    ...form,
-    { property: "minHeight", value: { type: "unit", unit: "px", value: 20 } },
-  ],
-} satisfies PresetStyle<typeof defaultTag>;
-
-export const meta: WsComponentMeta = {
-  category: "forms",
-  type: "container",
-  invalidAncestors: ["Form"],
-  label: "Form",
-  description: "Collect information from your users using validation rules.",
-  icon: FormIcon,
-  presetStyle,
-  order: 0,
-  states: [
-    { selector: "[data-state=error]", label: "Error" },
-    { selector: "[data-state=success]", label: "Success" },
-  ],
-  template: [
-    {
-      type: "instance",
-      component: "Form",
-      dataSources: {
-        formState: { type: "variable", initialValue: "initial" },
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "state",
-          dataSourceName: "formState",
-        },
-      ],
-      children: [
-        {
-          type: "instance",
-          label: "Form Content",
-          component: "Box",
-          dataSources: {
-            formInitial: {
-              type: "expression",
-              code: `formState === 'initial' || formState === 'error'`,
-            },
-          },
-          props: [
-            {
-              type: "dataSource",
-              name: showAttribute,
-              dataSourceName: "formInitial",
-            },
-          ],
-          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" }],
-            },
-            {
-              type: "instance",
-              component: "Input",
-              props: [{ type: "string", name: "name", value: "email" }],
-              children: [],
-            },
-            {
-              type: "instance",
-              component: "Button",
-              children: [{ type: "text", value: "Submit" }],
-            },
-          ],
-        },
-
-        {
-          type: "instance",
-          label: "Success Message",
-          component: "Box",
-          dataSources: {
-            formSuccess: {
-              type: "expression",
-              code: `formState === 'success'`,
-            },
-          },
-          props: [
-            {
-              type: "dataSource",
-              name: showAttribute,
-              dataSourceName: "formSuccess",
-            },
-          ],
-          children: [
-            { type: "text", value: "Thank you for getting in touch!" },
-          ],
-        },
-
-        {
-          type: "instance",
-          label: "Error Message",
-          component: "Box",
-          dataSources: {
-            formError: {
-              type: "expression",
-              code: `formState === 'error'`,
-            },
-          },
-          props: [
-            {
-              type: "dataSource",
-              name: showAttribute,
-              dataSourceName: "formError",
-            },
-          ],
-          children: [{ type: "text", value: "Sorry, something went wrong." }],
-        },
-      ],
-    },
-  ],
-};
-
-export const propsMeta: WsComponentPropsMeta = {
-  props,
-  initialProps: ["id", "state", "action"],
-};

package/src/link.tsx

@@ -1,4 +0,0 @@
-import { Link as BaseLink } from "@webstudio-is/sdk-components-react";
-import { wrapLinkComponent } from "./shared/remix-link";
-
-export const Link = wrapLinkComponent(BaseLink);

package/src/link.ws.ts

@@ -1,16 +0,0 @@
-import type { WsComponentPropsMeta } from "@webstudio-is/react-sdk";
-import { props } from "./__generated__/link.props";
-
-export { Link as meta } from "@webstudio-is/sdk-components-react/metas";
-
-export const propsMeta: WsComponentPropsMeta = {
-  props: {
-    ...props,
-    href: {
-      type: "string",
-      control: "url",
-      required: false,
-    },
-  },
-  initialProps: ["id", "href", "target", "prefetch"],
-};

package/src/metas.ts

@@ -1 +0,0 @@
-export { meta as Form } from "./form.ws";

package/src/props.ts

@@ -1,3 +0,0 @@
-export { propsMeta as Form } from "./form.ws";
-export { propsMeta as Link } from "./link.ws";
-export { propsMeta as RichTextLink } from "./rich-text-link.ws";

package/src/rich-text-link.tsx

@@ -1,4 +0,0 @@
-import { RichTextLink as BaseLink } from "@webstudio-is/sdk-components-react";
-import { wrapLinkComponent } from "./shared/remix-link";
-
-export const RichTextLink = wrapLinkComponent(BaseLink);

package/src/rich-text-link.ws.tsx

@@ -1,6 +0,0 @@
-import type { WsComponentPropsMeta } from "@webstudio-is/react-sdk";
-import { propsMeta as linkPropsMeta } from "./link.ws";
-
-export { RichTextLink as meta } from "@webstudio-is/sdk-components-react/metas";
-
-export const propsMeta: WsComponentPropsMeta = linkPropsMeta;

package/src/shared/remix-link.tsx

@@ -1,46 +0,0 @@
-import { forwardRef, type ComponentPropsWithoutRef } from "react";
-import { NavLink as RemixLink } from "@remix-run/react";
-import {
-  usePropUrl,
-  getInstanceIdFromComponentProps,
-} from "@webstudio-is/react-sdk";
-import type { Link } from "@webstudio-is/sdk-components-react";
-
-type Props = Omit<ComponentPropsWithoutRef<typeof Link>, "target"> & {
-  // override (string & {}) in target to generate keywords
-  target?: "_self" | "_blank" | "_parent" | "_top";
-
-  // useful remix props
-  prefetch?: "none" | "intent" | "render" | "viewport";
-  reloadDocument?: boolean;
-  replace?: boolean;
-  preventScrollReset?: boolean;
-};
-
-export const wrapLinkComponent = (BaseLink: typeof Link) => {
-  const Component = forwardRef<HTMLAnchorElement, Props>((props, ref) => {
-    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 !== undefined) {
-        urlTo.hash = encodeURIComponent(href.hash);
-        to = `${urlTo.pathname}${urlTo.hash}`;
-      }
-
-      return <RemixLink {...props} to={to} ref={ref} />;
-    }
-
-    const { prefetch, reloadDocument, replace, preventScrollReset, ...rest } =
-      props;
-
-    return <BaseLink {...rest} ref={ref} />;
-  });
-
-  Component.displayName = BaseLink.displayName;
-
-  return Component;
-};