@weaverse/react 0.6.24 → 0.6.26

package/dist/index.d.ts

@@ -18,8 +18,9 @@ declare type WeaverseRootPropsType = {
 declare type ItemComponentProps = {
     instance: InstanceType<typeof WeaverseItemStore>;
 };
-interface PlaceholderProps extends WeaverseElementProps {
+interface PlaceholderProps {
     element: string;
+    children: ReactElement | ReactElement[] | ReactNode | ReactNode[];
 }
 interface ButtonElementProps extends WeaverseElementProps {
     value: string;
@@ -33,6 +34,11 @@ interface ContainerElementProps extends WeaverseElementProps {
 interface ImageElementProps extends WeaverseElementProps {
     src: string;
     alt: string;
+    objectFit: 'contain' | 'cover';
+    objectPosition: 'left' | 'right' | 'top' | 'bottom' | 'center' | 'center left' | 'center right' | 'top left' | 'top right' | 'bottom left' | 'bottom right';
+    onClickAction: 'none' | 'open-lightbox' | 'open-link';
+    linkTo?: string;
+    openLinkInNewTab?: boolean;
 }
 interface LayoutElementProps extends WeaverseElementProps {
     gridSize: number;
@@ -87,6 +93,6 @@ declare type InstagramMedia = {
     caption: string;
 };
 
-declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element;
+declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element | null;
 
 export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutElementProps, MapElementProps, PlaceholderProps, TextElementProps, TimerBlockProps, VideoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };

package/dist/index.js

@@ -241,23 +241,58 @@ var countdown_default = Countdown;
 // src/elements/image.tsx
 var import_react4 = __toESM(require("react"));
 var Image = import_react4.default.forwardRef((props, ref) => {
-  let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
-  return /* @__PURE__ */ import_react4.default.createElement("div", __spreadValues({
+  let { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
+  let _a = props, {
+    src,
+    alt,
+    objectFit,
+    objectPosition,
+    onClickAction,
+    openLinkInNewTab
+  } = _a, rest = __objRest(_a, [
+    "src",
+    "alt",
+    "objectFit",
+    "objectPosition",
+    "onClickAction",
+    "openLinkInNewTab"
+  ]);
+  let style = {
+    "--wv-img-object-fit": objectFit,
+    "--wv-img-object-position": objectPosition
+  };
+  let handleClick = () => {
+    if (isDesignMode) {
+      return console.log("Click action:", onClickAction);
+    }
+    if (onClickAction) {
+      console.log("TODO: click action:", onClickAction);
+    }
+  };
+  return /* @__PURE__ */ import_react4.default.createElement("div", __spreadProps(__spreadValues({
     ref
-  }, rest), /* @__PURE__ */ import_react4.default.createElement("img", {
+  }, rest), {
+    style,
+    onClick: handleClick
+  }), /* @__PURE__ */ import_react4.default.createElement("img", {
     alt,
     src
   }));
 });
 Image.defaultProps = {
   src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
-  alt: "weaverse image element",
+  alt: "Image alt text",
+  objectFit: "cover",
+  objectPosition: "center",
+  onClickAction: "open-lightbox",
+  openLinkInNewTab: false,
   css: {
     "@desktop": {
       img: {
         width: "100%",
         height: "100%",
-        objectFit: "cover"
+        objectFit: "var(--wv-img-object-fit, cover)",
+        objectPosition: "var(--wv-img-object-position, center)"
       }
     }
   }
@@ -434,10 +469,9 @@ var Placeholder_default = Placeholder;
 // src/elements/instagram.tsx
 var INSTAGRAM_API = "https://graph.instagram.com";
 var Instagram = (0, import_react9.forwardRef)((props, ref) => {
-  const _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
-  const [media, setMedia] = (0, import_react9.useState)([]);
-  const [error, setError] = (0, import_react9.useState)(null);
-  let { isDesignMode } = (0, import_react9.useContext)(WeaverseContext);
+  let _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
+  let [media, setMedia] = (0, import_react9.useState)([]);
+  let [error, setError] = (0, import_react9.useState)(null);
   (0, import_react9.useEffect)(() => {
     if (token) {
       let params = new URLSearchParams({
@@ -463,7 +497,7 @@ var Instagram = (0, import_react9.forwardRef)((props, ref) => {
   }
   let style = {
     "--wv-ig-images-per-row": imagesPerRow,
-    "--wv-ig-images-gap": gap
+    "--wv-ig-images-gap": gap + "px"
   };
   return /* @__PURE__ */ import_react9.default.createElement("div", __spreadProps(__spreadValues({
     ref
@@ -472,15 +506,15 @@ var Instagram = (0, import_react9.forwardRef)((props, ref) => {
   }), /* @__PURE__ */ import_react9.default.createElement("div", {
     className: "wv-ig-media-container"
   }, media.slice(0, numberOfImages).map((item) => {
-    let linkProps;
-    if (!isDesignMode) {
-      linkProps = { href: item.permalink, target: "_blank" };
-    }
-    return /* @__PURE__ */ import_react9.default.createElement("a", __spreadValues({
-      key: item.id
-    }, linkProps), /* @__PURE__ */ import_react9.default.createElement("img", {
-      alt: item.caption,
-      src: item.media_url
+    let { id, permalink, caption, media_url } = item;
+    return /* @__PURE__ */ import_react9.default.createElement("a", {
+      key: id,
+      href: permalink,
+      target: "_blank",
+      rel: "noreferrer"
+    }, /* @__PURE__ */ import_react9.default.createElement("img", {
+      alt: caption,
+      src: media_url
     }));
   })));
 });
@@ -725,7 +759,7 @@ function generateItemClass(instance, stitchesInstance) {
 
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
-  var _a;
+  var _a, _b;
   let [, setData] = (0, import_react14.useState)(context.projectData);
   let rootRef = (0, import_react14.useRef)();
   (0, import_react14.useEffect)(() => {
@@ -741,15 +775,15 @@ var WeaverseRoot = ({ context }) => {
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ import_react14.default.createElement("div", __spreadProps(__spreadValues({
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react14.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
   }), /* @__PURE__ */ import_react14.default.createElement(WeaverseContextProvider, {
     value: context
   }, /* @__PURE__ */ import_react14.default.createElement(ItemInstance, {
-    id: context.projectData.rootId || 0
-  })));
+    id: context.projectData.rootId
+  }))) : null;
 };
 var ItemComponent = ({ instance }) => {
   let { stitchesInstance, elementInstances } = (0, import_react14.useContext)(WeaverseContext);

package/dist/index.mjs

@@ -209,25 +209,60 @@ Countdown.defaultProps = {
 var countdown_default = Countdown;
 
 // src/elements/image.tsx
-import React5 from "react";
+import React5, { useContext as useContext2 } from "react";
 var Image = React5.forwardRef((props, ref) => {
-  let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
-  return /* @__PURE__ */ React5.createElement("div", __spreadValues({
+  let { isDesignMode } = useContext2(WeaverseContext);
+  let _a = props, {
+    src,
+    alt,
+    objectFit,
+    objectPosition,
+    onClickAction,
+    openLinkInNewTab
+  } = _a, rest = __objRest(_a, [
+    "src",
+    "alt",
+    "objectFit",
+    "objectPosition",
+    "onClickAction",
+    "openLinkInNewTab"
+  ]);
+  let style = {
+    "--wv-img-object-fit": objectFit,
+    "--wv-img-object-position": objectPosition
+  };
+  let handleClick = () => {
+    if (isDesignMode) {
+      return console.log("Click action:", onClickAction);
+    }
+    if (onClickAction) {
+      console.log("TODO: click action:", onClickAction);
+    }
+  };
+  return /* @__PURE__ */ React5.createElement("div", __spreadProps(__spreadValues({
     ref
-  }, rest), /* @__PURE__ */ React5.createElement("img", {
+  }, rest), {
+    style,
+    onClick: handleClick
+  }), /* @__PURE__ */ React5.createElement("img", {
     alt,
     src
   }));
 });
 Image.defaultProps = {
   src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
-  alt: "weaverse image element",
+  alt: "Image alt text",
+  objectFit: "cover",
+  objectPosition: "center",
+  onClickAction: "open-lightbox",
+  openLinkInNewTab: false,
   css: {
     "@desktop": {
       img: {
         width: "100%",
         height: "100%",
-        objectFit: "cover"
+        objectFit: "var(--wv-img-object-fit, cover)",
+        objectPosition: "var(--wv-img-object-position, center)"
       }
     }
   }
@@ -335,9 +370,9 @@ Text.defaultProps = {
 var text_default = Text;
 
 // src/elements/video.tsx
-import React9, { forwardRef as forwardRef7, useContext as useContext2 } from "react";
+import React9, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
 var Video = forwardRef7((props, ref) => {
-  let { isDesignMode } = useContext2(WeaverseContext);
+  let { isDesignMode } = useContext3(WeaverseContext);
   let _a = props, { src, type, controls, poster, autoPlay, loop, muted } = _a, rest = __objRest(_a, ["src", "type", "controls", "poster", "autoPlay", "loop", "muted"]);
   return /* @__PURE__ */ React9.createElement("div", __spreadValues({
     ref
@@ -374,7 +409,7 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-import React11, { forwardRef as forwardRef9, useContext as useContext3, useEffect as useEffect2, useState } from "react";
+import React11, { forwardRef as forwardRef9, useEffect as useEffect2, useState } from "react";
 
 // src/elements/shared/Placeholder.tsx
 import React10, { forwardRef as forwardRef8 } from "react";
@@ -404,10 +439,9 @@ var Placeholder_default = Placeholder;
 // src/elements/instagram.tsx
 var INSTAGRAM_API = "https://graph.instagram.com";
 var Instagram = forwardRef9((props, ref) => {
-  const _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
-  const [media, setMedia] = useState([]);
-  const [error, setError] = useState(null);
-  let { isDesignMode } = useContext3(WeaverseContext);
+  let _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
+  let [media, setMedia] = useState([]);
+  let [error, setError] = useState(null);
   useEffect2(() => {
     if (token) {
       let params = new URLSearchParams({
@@ -433,7 +467,7 @@ var Instagram = forwardRef9((props, ref) => {
   }
   let style = {
     "--wv-ig-images-per-row": imagesPerRow,
-    "--wv-ig-images-gap": gap
+    "--wv-ig-images-gap": gap + "px"
   };
   return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({
     ref
@@ -442,15 +476,15 @@ var Instagram = forwardRef9((props, ref) => {
   }), /* @__PURE__ */ React11.createElement("div", {
     className: "wv-ig-media-container"
   }, media.slice(0, numberOfImages).map((item) => {
-    let linkProps;
-    if (!isDesignMode) {
-      linkProps = { href: item.permalink, target: "_blank" };
-    }
-    return /* @__PURE__ */ React11.createElement("a", __spreadValues({
-      key: item.id
-    }, linkProps), /* @__PURE__ */ React11.createElement("img", {
-      alt: item.caption,
-      src: item.media_url
+    let { id, permalink, caption, media_url } = item;
+    return /* @__PURE__ */ React11.createElement("a", {
+      key: id,
+      href: permalink,
+      target: "_blank",
+      rel: "noreferrer"
+    }, /* @__PURE__ */ React11.createElement("img", {
+      alt: caption,
+      src: media_url
     }));
   })));
 });
@@ -695,7 +729,7 @@ function generateItemClass(instance, stitchesInstance) {
 
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
-  var _a;
+  var _a, _b;
   let [, setData] = useState3(context.projectData);
   let rootRef = useRef();
   useEffect3(() => {
@@ -711,15 +745,15 @@ var WeaverseRoot = ({ context }) => {
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ React15.createElement("div", __spreadProps(__spreadValues({
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ React15.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
   }), /* @__PURE__ */ React15.createElement(WeaverseContextProvider, {
     value: context
   }, /* @__PURE__ */ React15.createElement(ItemInstance, {
-    id: context.projectData.rootId || 0
-  })));
+    id: context.projectData.rootId
+  }))) : null;
 };
 var ItemComponent = ({ instance }) => {
   let { stitchesInstance, elementInstances } = useContext5(WeaverseContext);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.24",
+  "version": "0.6.26",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
@@ -31,6 +31,6 @@
   "name": "@weaverse/react",
   "author": "Weaverse Team",
   "dependencies": {
-    "@weaverse/core": "0.6.24"
+    "@weaverse/core": "0.6.26"
   }
 }