@webstudio-is/react-sdk 0.68.0 → 0.69.0

package/src/app/custom-components/image.tsx

@@ -1,55 +0,0 @@
-import {
-  forwardRef,
-  useMemo,
-  type ComponentPropsWithoutRef,
-  type ElementRef,
-} from "react";
-import {
-  Image as WebstudioImage,
-  createImageLoader,
-} from "@webstudio-is/image";
-import { Image as SdkImage } from "../../components/image";
-import { usePropAsset, getInstanceIdFromComponentProps } from "../../props";
-import { getParams } from "../params";
-
-const defaultTag = "img";
-
-type Props = ComponentPropsWithoutRef<typeof WebstudioImage>;
-
-export const Image = forwardRef<ElementRef<typeof defaultTag>, Props>(
-  (props, ref) => {
-    const asset = usePropAsset(getInstanceIdFromComponentProps(props), "src");
-
-    const loader = useMemo(() => {
-      const params = getParams();
-      return createImageLoader({ imageBaseUrl: params.imageBaseUrl });
-    }, []);
-
-    const src = asset?.name ?? props.src;
-
-    if (asset == null || loader == null) {
-      return <SdkImage key={src} {...props} src={src} ref={ref} />;
-    }
-
-    return (
-      <WebstudioImage
-        /**
-         * `key` is needed to recreate the image in case of asset change in builder,
-         * this gives immediate feedback when an asset is changed.
-         * Also, it visually fixes image distortion when another asset has a seriously different  aspectRatio
-         * (we change aspectRatio CSS prop on asset change)
-         *
-         * In non-builder mode, key on images are usually also a good idea,
-         * prevents showing outdated images on route change.
-         **/
-        key={src}
-        {...props}
-        loader={loader}
-        src={src}
-        ref={ref}
-      />
-    );
-  }
-);
-
-Image.displayName = "Image";

package/src/app/custom-components/index.ts

@@ -1,28 +0,0 @@
-import { imageProps } from "@webstudio-is/image";
-import type { WsComponentPropsMeta } from "../../components/component-meta";
-import { Image } from "./image";
-import { Link } from "./link";
-import { LinkBlock } from "./link-block";
-import { RichTextLink } from "./rich-text-link";
-import { Form } from "./form";
-import { meta as formMeta, propsMeta as formPropsMeta } from "./form.ws";
-
-export const customComponents = {
-  Image,
-  Link,
-  RichTextLink,
-  LinkBlock,
-  Form,
-};
-
-export const customComponentPropsMetas: Record<string, WsComponentPropsMeta> = {
-  Image: {
-    props: imageProps,
-    initialProps: ["src", "width", "height", "alt", "loading"],
-  },
-  Form: formPropsMeta,
-};
-
-export const customComponentMetas = {
-  Form: formMeta,
-};

package/src/app/custom-components/link-block.tsx

@@ -1,4 +0,0 @@
-import { LinkBlock as BaseLink } from "../../components/link-block";
-import { wrapLinkComponent } from "./shared/remix-link";
-
-export const LinkBlock = wrapLinkComponent(BaseLink);

package/src/app/custom-components/link.tsx

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

package/src/app/custom-components/rich-text-link.tsx

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

package/src/app/custom-components/shared/remix-link.tsx

@@ -1,28 +0,0 @@
-import { NavLink as RemixLink } from "@remix-run/react";
-import type { ComponentPropsWithoutRef } from "react";
-import { forwardRef } from "react";
-import type { Link } from "../../../components/link";
-import { usePropUrl, getInstanceIdFromComponentProps } from "../../../props";
-
-type LinkComponent = typeof Link;
-type LinkProps = ComponentPropsWithoutRef<LinkComponent>;
-
-export const wrapLinkComponent = (BaseLink: LinkComponent) => {
-  const Component: LinkComponent = forwardRef((props: LinkProps, ref) => {
-    const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-
-    if (href?.type === "page") {
-      let to = href.page.path === "" ? "/" : href.page.path;
-      if (href.hash !== undefined) {
-        to += `#${href.hash}`;
-      }
-      return <RemixLink {...props} to={to} ref={ref} />;
-    }
-
-    return <BaseLink {...props} ref={ref} />;
-  });
-
-  Component.displayName = BaseLink.displayName;
-
-  return Component;
-};