@webstudio-is/sdk-components-react 0.100.1-c4ae8b2.0 → 0.101.0

package/lib/components.js

@@ -137,35 +137,10 @@ var Paragraph = forwardRef8((props, ref) => /* @__PURE__ */ jsx5("p", { ...props
 Paragraph.displayName = "Paragraph";
 
 // src/link.tsx
-import { forwardRef as forwardRef9, useContext as useContext2 } from "react";
-import {
-  usePropUrl,
-  getInstanceIdFromComponentProps,
-  ReactSdkContext as ReactSdkContext2
-} from "@webstudio-is/react-sdk";
+import { forwardRef as forwardRef9 } from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var Link = forwardRef9((props, ref) => {
-  const { assetBaseUrl } = useContext2(ReactSdkContext2);
-  const href = usePropUrl(getInstanceIdFromComponentProps(props), "href");
-  let url = "#";
-  switch (href?.type) {
-    case "page": {
-      url = href.page.path === "" ? "/" : href.page.path;
-      const urlTo = new URL(url, "https://any-valid.url");
-      url = urlTo.pathname;
-      if (href.hash !== void 0) {
-        urlTo.hash = encodeURIComponent(href.hash);
-        url = `${urlTo.pathname}${urlTo.hash}`;
-      }
-      break;
-    }
-    case "asset":
-      url = `${assetBaseUrl}${href.asset.name}`;
-      break;
-    case "string":
-      url = href.url;
-  }
-  return /* @__PURE__ */ jsx6("a", { ...props, href: url, ref });
+  return /* @__PURE__ */ jsx6("a", { ...props, href: props.href ?? "#", ref });
 });
 Link.displayName = "Link";
 
@@ -228,14 +203,10 @@ Form.displayName = "Form";
 // src/image.tsx
 import {
   forwardRef as forwardRef19,
-  useContext as useContext3
+  useContext as useContext2
 } from "react";
 import { Image as WebstudioImage } from "@webstudio-is/image";
-import {
-  usePropAsset,
-  getInstanceIdFromComponentProps as getInstanceIdFromComponentProps2,
-  ReactSdkContext as ReactSdkContext3
-} from "@webstudio-is/react-sdk";
+import { ReactSdkContext as ReactSdkContext2 } from "@webstudio-is/react-sdk";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
   width="140"
@@ -262,21 +233,20 @@ var imagePlaceholderSvg = `data:image/svg+xml;base64,${btoa(`<svg
 </svg>`)}`;
 var Image = forwardRef19(
   ({ loading = "lazy", ...props }, ref) => {
-    const { imageLoader } = useContext3(ReactSdkContext3);
-    const asset = usePropAsset(getInstanceIdFromComponentProps2(props), "src");
-    const src = asset?.name ?? props.src;
-    if (asset == null) {
+    const { imageLoader, assetBaseUrl } = useContext2(ReactSdkContext2);
+    if (props.src === void 0 || props.src.startsWith(assetBaseUrl) === false) {
       return /* @__PURE__ */ jsx16(
         "img",
         {
           loading,
           ...props,
-          src: src || imagePlaceholderSvg,
+          src: props.src || imagePlaceholderSvg,
           ref
         },
-        src
+        props.src
       );
     }
+    const src = props.src.slice(assetBaseUrl.length);
     return /* @__PURE__ */ jsx16(
       WebstudioImage,
       {
@@ -386,11 +356,11 @@ import {
   useState,
   useRef as useRef2,
   useEffect as useEffect2,
-  useContext as useContext4,
+  useContext as useContext3,
   createContext,
   useMemo
 } from "react";
-import { ReactSdkContext as ReactSdkContext4 } from "@webstudio-is/react-sdk";
+import { ReactSdkContext as ReactSdkContext3 } from "@webstudio-is/react-sdk";
 import { shallowEqual } from "shallow-equal";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var getUrl = (options) => {
@@ -573,7 +543,7 @@ var Vimeo = forwardRef29(
     children,
     ...rest
   }, ref) => {
-    const { renderer } = useContext4(ReactSdkContext4);
+    const { renderer } = useContext3(ReactSdkContext3);
     const { previewImageUrl, playerStatus, setPlayerStatus, elementRef } = useVimeo({
       renderer,
       showPreview,
@@ -661,12 +631,12 @@ var VimeoContext = createContext({
 // src/vimeo-preview-image.tsx
 import {
   forwardRef as forwardRef30,
-  useContext as useContext5
+  useContext as useContext4
 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
 var base64Preview = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkOAMAANIAzr59FiYAAAAASUVORK5CYII=`;
 var VimeoPreviewImage = forwardRef30(({ src, ...rest }, ref) => {
-  const vimeoContext = useContext5(VimeoContext);
+  const vimeoContext = useContext4(VimeoContext);
   return /* @__PURE__ */ jsx22(
     Image,
     {
@@ -681,12 +651,12 @@ VimeoPreviewImage.displayName = "VimeoPreviewImage";
 // src/vimeo-play-button.tsx
 import {
   forwardRef as forwardRef31,
-  useContext as useContext6
+  useContext as useContext5
 } from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var VimeoPlayButton = forwardRef31(
   (props, ref) => {
-    const vimeoContext = useContext6(VimeoContext);
+    const vimeoContext = useContext5(VimeoContext);
     if (vimeoContext.status !== "initial") {
       return null;
     }
@@ -698,12 +668,12 @@ VimeoPlayButton.displayName = "VimeoPlayButton";
 // src/vimeo-spinner.tsx
 import {
   forwardRef as forwardRef32,
-  useContext as useContext7
+  useContext as useContext6
 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 var VimeoSpinner = forwardRef32(
   (props, ref) => {
-    const vimeoContext = useContext7(VimeoContext);
+    const vimeoContext = useContext6(VimeoContext);
     if (vimeoContext.status !== "initialized") {
       return null;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react",
-  "version": "0.100.1-c4ae8b2.0",
+  "version": "0.101.0",
   "description": "Webstudio default library for react",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -14,19 +14,19 @@
   ],
   "exports": {
     ".": {
-      "source": "./src/components.ts",
+      "webstudio": "./src/components.ts",
       "types": "./lib/types/components.d.ts",
       "import": "./lib/components.js",
       "require": "./lib/components.js"
     },
     "./metas": {
-      "source": "./src/metas.ts",
+      "webstudio": "./src/metas.ts",
       "types": "./lib/types/metas.d.ts",
       "import": "./lib/metas.js",
       "require": "./lib/metas.js"
     },
     "./props": {
-      "source": "./src/props.ts",
+      "webstudio": "./src/props.ts",
       "types": "./lib/types/props.d.ts",
       "import": "./lib/props.js",
       "require": "./lib/props.js"
@@ -40,10 +40,10 @@
     "@react-aria/utils": "^3.19.0",
     "colord": "^2.9.3",
     "shallow-equal": "^3.1.0",
-    "@webstudio-is/css-vars": "0.100.1-c4ae8b2.0",
-    "@webstudio-is/icons": "0.100.1-c4ae8b2.0",
-    "@webstudio-is/image": "0.100.1-c4ae8b2.0",
-    "@webstudio-is/react-sdk": "0.100.1-c4ae8b2.0"
+    "@webstudio-is/css-vars": "0.101.0",
+    "@webstudio-is/icons": "0.101.0",
+    "@webstudio-is/image": "0.101.0",
+    "@webstudio-is/react-sdk": "0.101.0"
   },
   "devDependencies": {
     "@storybook/react": "^7.4.0",
@@ -52,14 +52,14 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "5.2.2",
-    "@webstudio-is/generate-arg-types": "0.100.1-c4ae8b2.0",
-    "@webstudio-is/storybook-config": "0.0.1-c4ae8b2.0",
-    "@webstudio-is/tsconfig": "1.0.8-c4ae8b2.0"
+    "@webstudio-is/generate-arg-types": "0.101.0",
+    "@webstudio-is/storybook-config": "0.0.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "dev": "rm -rf lib && esbuild 'src/**/*.ts' 'src/**/*.tsx' --outdir=lib --watch",
     "build": "rm -rf lib && esbuild src/components.ts src/metas.ts src/props.ts --outdir=lib --bundle --format=esm --packages=external",
-    "build:args": "NODE_OPTIONS=--conditions=source generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
+    "build:args": "NODE_OPTIONS=--conditions=webstudio generate-arg-types './src/*.tsx !./src/*.stories.tsx !./src/*.ws.tsx' && prettier --write \"**/*.props.ts\"",
     "dts": "tsc --project tsconfig.dts.json",
     "typecheck": "tsc",
     "checks": "pnpm typecheck",