@weaverse/react 0.6.18 → 0.6.21

package/dist/index.d.ts

@@ -13,18 +13,11 @@ interface WeaverseElementProps {
 declare type WeaverseRootPropsType = {
     context: Weaverse;
 };
+declare type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
 declare type ItemComponentProps = {
     instance: InstanceType<typeof WeaverseItemStore>;
 };
-declare type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
-declare type InstagramMedia = {
-    id: string;
-    media_type: 'IMAGE' | 'CAROUSEL_ALBUM';
-    media_url: string;
-    permalink: string;
-    caption: string;
-};
 
 declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element;
 
-export { CountdownTimeKey, InstagramMedia, ItemComponentProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };
+export { CountdownTimeKey, ItemComponentProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };

package/dist/index.js

@@ -62,7 +62,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react10 = require("react");
+var import_react9 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -412,102 +412,50 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-var import_react9 = __toESM(require("react"));
-
-// src/elements/shared/Placeholder.tsx
 var import_react8 = __toESM(require("react"));
-var Placeholder = (0, import_react8.forwardRef)((props, ref) => {
-  let _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
-  let style = {
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "#374151"
-  };
-  return /* @__PURE__ */ import_react8.default.createElement("div", __spreadValues({
-    style,
-    ref
-  }, rest), /* @__PURE__ */ import_react8.default.createElement("div", {
-    style: { fontWeight: 600, marginBottom: "10px" }
-  }, element), /* @__PURE__ */ import_react8.default.createElement("div", null, children));
-});
-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);
-  (0, import_react9.useEffect)(() => {
-    if (token) {
-      let params = new URLSearchParams({
-        access_token: token,
-        fields: "id,media_type,caption,media_url,permalink"
-      });
-      fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
-        if (res.error) {
-          setError(res);
-        } else {
-          setError(null);
-          setMedia([...res.data]);
-        }
-      }).catch(console.error);
-    }
+var Instagram = (0, import_react8.forwardRef)((props, ref) => {
+  const { stitchesInstance } = (0, import_react8.useContext)(WeaverseContext);
+  const _a = props, { token, numberOfImages, imagesPerRow, className } = _a, rest = __objRest(_a, ["token", "numberOfImages", "imagesPerRow", "className"]);
+  const [media, setMedia] = (0, import_react8.useState)([]);
+  (0, import_react8.useEffect)(() => {
+    const url = `https://graph.instagram.com/me/media?fields=id,media_type,caption,media_url&access_token=${token}`;
+    fetch(url).then((res) => res.json()).then((res) => {
+      setMedia(res.data);
+    });
   }, [token]);
-  if (!token || error) {
-    return /* @__PURE__ */ import_react9.default.createElement("div", __spreadValues({
-      ref
-    }, rest), /* @__PURE__ */ import_react9.default.createElement(Placeholder_default, {
-      element: "Instagram"
-    }, !token ? "Connect your Instagram account to display photos on your site." : "Invalid or expired token!"));
-  }
-  let style = {
-    "--wv-ig-images-per-row": imagesPerRow,
-    "--wv-ig-images-gap": gap
+  const css = {
+    gridTemplateColumns: `repeat(${imagesPerRow[0] || 1}, 1fr)`
   };
-  return /* @__PURE__ */ import_react9.default.createElement("div", __spreadProps(__spreadValues({
+  const { className: instagramClass = "" } = stitchesInstance.css(css)();
+  return /* @__PURE__ */ import_react8.default.createElement("div", __spreadValues({
+    className: `${className} ${instagramClass}`,
     ref
-  }, rest), {
-    style
-  }), /* @__PURE__ */ import_react9.default.createElement("div", {
-    className: "wv-ig-media-wrapper"
-  }, 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", {
+  }, rest), !token ? "Token is empty" : media.map((item, key) => {
+    return /* @__PURE__ */ import_react8.default.createElement("div", {
+      key,
+      className: "wv-instagram-item"
+    }, /* @__PURE__ */ import_react8.default.createElement("img", {
+      width: "100%",
+      height: "100%",
       alt: item.caption,
       src: item.media_url
     }));
-  })));
+  }));
 });
 Instagram.defaultProps = {
   token: "",
-  username: "",
-  numberOfImages: 8,
-  imagesPerRow: 4,
-  gap: 0,
+  numberOfImages: [12],
+  imagesPerRow: [4],
   css: {
     "@desktop": {
-      ".wv-ig-media-wrapper": {
-        overflow: "hidden",
-        maxWidth: "100%",
-        maxHeight: "100%",
-        display: "grid",
-        gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
-        gap: "var(--wv-ig-images-gap, 0px)",
-        img: {
-          aspectRatio: "1 / 1",
-          width: "100%",
-          height: "100%",
-          objectFit: "cover"
+      display: "grid",
+      gridTemplateColumns: "repeat(4, 1fr)",
+      "& .wv-instagram-item": {
+        width: "100%",
+        height: "100%",
+        backgroundColor: "red",
+        "& img": {
+          objectFit: "contain"
         }
       }
     }
@@ -564,13 +512,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react10.createContext)({});
+var WeaverseContext = (0, import_react9.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -598,9 +546,9 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = (0, import_react11.useState)(context.projectData);
-  let rootRef = (0, import_react11.useRef)();
-  (0, import_react11.useEffect)(() => {
+  let [, setData] = (0, import_react10.useState)(context.projectData);
+  let rootRef = (0, import_react10.useRef)();
+  (0, import_react10.useEffect)(() => {
     let update = () => setData({});
     context.subscribe(update);
     if (context.projectData) {
@@ -613,21 +561,21 @@ 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_react11.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react10.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ import_react11.default.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ import_react10.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react11.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react11.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react10.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react10.useState)(instance.data);
   let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     var _a2;
     let update = (data2) => setData(__spreadValues({}, data2));
     instance.subscribe(update);
@@ -647,12 +595,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react11.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react10.default.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -660,15 +608,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react11.useContext)(WeaverseContext);
+  let context = (0, import_react10.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react11.default.createElement("div", {
+    return /* @__PURE__ */ import_react10.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react11.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react10.default.createElement(ItemComponent, {
     instance
   });
 };

package/dist/index.mjs

@@ -382,102 +382,50 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-import React11, { forwardRef as forwardRef9, useContext as useContext3, useEffect as useEffect2, useState } from "react";
-
-// src/elements/shared/Placeholder.tsx
-import React10, { forwardRef as forwardRef8 } from "react";
-var Placeholder = forwardRef8((props, ref) => {
-  let _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
-  let style = {
-    height: "100%",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    color: "#374151"
-  };
-  return /* @__PURE__ */ React10.createElement("div", __spreadValues({
-    style,
-    ref
-  }, rest), /* @__PURE__ */ React10.createElement("div", {
-    style: { fontWeight: 600, marginBottom: "10px" }
-  }, element), /* @__PURE__ */ React10.createElement("div", null, children));
-});
-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"]);
+import React10, { forwardRef as forwardRef8, useContext as useContext3, useEffect as useEffect2, useState } from "react";
+var Instagram = forwardRef8((props, ref) => {
+  const { stitchesInstance } = useContext3(WeaverseContext);
+  const _a = props, { token, numberOfImages, imagesPerRow, className } = _a, rest = __objRest(_a, ["token", "numberOfImages", "imagesPerRow", "className"]);
   const [media, setMedia] = useState([]);
-  const [error, setError] = useState(null);
-  let { isDesignMode } = useContext3(WeaverseContext);
   useEffect2(() => {
-    if (token) {
-      let params = new URLSearchParams({
-        access_token: token,
-        fields: "id,media_type,caption,media_url,permalink"
-      });
-      fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
-        if (res.error) {
-          setError(res);
-        } else {
-          setError(null);
-          setMedia([...res.data]);
-        }
-      }).catch(console.error);
-    }
+    const url = `https://graph.instagram.com/me/media?fields=id,media_type,caption,media_url&access_token=${token}`;
+    fetch(url).then((res) => res.json()).then((res) => {
+      setMedia(res.data);
+    });
   }, [token]);
-  if (!token || error) {
-    return /* @__PURE__ */ React11.createElement("div", __spreadValues({
-      ref
-    }, rest), /* @__PURE__ */ React11.createElement(Placeholder_default, {
-      element: "Instagram"
-    }, !token ? "Connect your Instagram account to display photos on your site." : "Invalid or expired token!"));
-  }
-  let style = {
-    "--wv-ig-images-per-row": imagesPerRow,
-    "--wv-ig-images-gap": gap
+  const css = {
+    gridTemplateColumns: `repeat(${imagesPerRow[0] || 1}, 1fr)`
   };
-  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({
+  const { className: instagramClass = "" } = stitchesInstance.css(css)();
+  return /* @__PURE__ */ React10.createElement("div", __spreadValues({
+    className: `${className} ${instagramClass}`,
     ref
-  }, rest), {
-    style
-  }), /* @__PURE__ */ React11.createElement("div", {
-    className: "wv-ig-media-wrapper"
-  }, 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", {
+  }, rest), !token ? "Token is empty" : media.map((item, key) => {
+    return /* @__PURE__ */ React10.createElement("div", {
+      key,
+      className: "wv-instagram-item"
+    }, /* @__PURE__ */ React10.createElement("img", {
+      width: "100%",
+      height: "100%",
       alt: item.caption,
       src: item.media_url
     }));
-  })));
+  }));
 });
 Instagram.defaultProps = {
   token: "",
-  username: "",
-  numberOfImages: 8,
-  imagesPerRow: 4,
-  gap: 0,
+  numberOfImages: [12],
+  imagesPerRow: [4],
   css: {
     "@desktop": {
-      ".wv-ig-media-wrapper": {
-        overflow: "hidden",
-        maxWidth: "100%",
-        maxHeight: "100%",
-        display: "grid",
-        gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
-        gap: "var(--wv-ig-images-gap, 0px)",
-        img: {
-          aspectRatio: "1 / 1",
-          width: "100%",
-          height: "100%",
-          objectFit: "cover"
+      display: "grid",
+      gridTemplateColumns: "repeat(4, 1fr)",
+      "& .wv-instagram-item": {
+        width: "100%",
+        height: "100%",
+        backgroundColor: "red",
+        "& img": {
+          objectFit: "contain"
         }
       }
     }
@@ -540,7 +488,7 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React12, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import React11, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -583,13 +531,13 @@ 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__ */ React12.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ React12.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ React11.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React12.createElement(ItemInstance, {
+  }, /* @__PURE__ */ React11.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
@@ -617,12 +565,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React12.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ React11.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ React12.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ React11.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -634,11 +582,11 @@ var ItemInstance = ({ id }) => {
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React11.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React12.createElement(ItemComponent, {
+  return /* @__PURE__ */ React11.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.18",
+  "version": "0.6.21",
   "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.18"
+    "@weaverse/core": "0.6.21"
   }
 }