@weaverse/react 0.6.17 → 0.6.18

package/dist/index.d.ts

@@ -13,11 +13,18 @@ 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, ItemComponentProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };
+export { CountdownTimeKey, InstagramMedia, 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_react9 = require("react");
+var import_react10 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -412,50 +412,102 @@ 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 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]);
-  const css = {
-    gridTemplateColumns: `repeat(${imagesPerRow[0] || 1}, 1fr)`
+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"
   };
-  const { className: instagramClass = "" } = stitchesInstance.css(css)();
   return /* @__PURE__ */ import_react8.default.createElement("div", __spreadValues({
-    className: `${className} ${instagramClass}`,
+    style,
     ref
-  }, 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%",
+  }, 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);
+    }
+  }, [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
+  };
+  return /* @__PURE__ */ import_react9.default.createElement("div", __spreadProps(__spreadValues({
+    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", {
       alt: item.caption,
       src: item.media_url
     }));
-  }));
+  })));
 });
 Instagram.defaultProps = {
   token: "",
-  numberOfImages: [12],
-  imagesPerRow: [4],
+  username: "",
+  numberOfImages: 8,
+  imagesPerRow: 4,
+  gap: 0,
   css: {
     "@desktop": {
-      display: "grid",
-      gridTemplateColumns: "repeat(4, 1fr)",
-      "& .wv-instagram-item": {
-        width: "100%",
-        height: "100%",
-        backgroundColor: "red",
-        "& img": {
-          objectFit: "contain"
+      ".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"
         }
       }
     }
@@ -512,13 +564,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react9.createContext)({});
+var WeaverseContext = (0, import_react10.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react10 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -546,9 +598,9 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = (0, import_react10.useState)(context.projectData);
-  let rootRef = (0, import_react10.useRef)();
-  (0, import_react10.useEffect)(() => {
+  let [, setData] = (0, import_react11.useState)(context.projectData);
+  let rootRef = (0, import_react11.useRef)();
+  (0, import_react11.useEffect)(() => {
     let update = () => setData({});
     context.subscribe(update);
     if (context.projectData) {
@@ -561,21 +613,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_react10.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react11.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ import_react10.default.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ import_react11.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react10.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react10.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react11.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react11.useState)(instance.data);
   let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     var _a2;
     let update = (data2) => setData(__spreadValues({}, data2));
     instance.subscribe(update);
@@ -595,12 +647,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react10.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react11.default.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react10.default.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -608,15 +660,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react10.useContext)(WeaverseContext);
+  let context = (0, import_react11.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react10.default.createElement("div", {
+    return /* @__PURE__ */ import_react11.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react10.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react11.default.createElement(ItemComponent, {
     instance
   });
 };

package/dist/index.mjs

@@ -382,50 +382,102 @@ Video.defaultProps = {
 var video_default = Video;
 
 // src/elements/instagram.tsx
-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"]);
+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"]);
   const [media, setMedia] = useState([]);
+  const [error, setError] = useState(null);
+  let { isDesignMode } = useContext3(WeaverseContext);
   useEffect2(() => {
-    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);
-    });
+    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);
+    }
   }, [token]);
-  const css = {
-    gridTemplateColumns: `repeat(${imagesPerRow[0] || 1}, 1fr)`
+  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 { className: instagramClass = "" } = stitchesInstance.css(css)();
-  return /* @__PURE__ */ React10.createElement("div", __spreadValues({
-    className: `${className} ${instagramClass}`,
+  return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({
     ref
-  }, 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%",
+  }, 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", {
       alt: item.caption,
       src: item.media_url
     }));
-  }));
+  })));
 });
 Instagram.defaultProps = {
   token: "",
-  numberOfImages: [12],
-  imagesPerRow: [4],
+  username: "",
+  numberOfImages: 8,
+  imagesPerRow: 4,
+  gap: 0,
   css: {
     "@desktop": {
-      display: "grid",
-      gridTemplateColumns: "repeat(4, 1fr)",
-      "& .wv-instagram-item": {
-        width: "100%",
-        height: "100%",
-        backgroundColor: "red",
-        "& img": {
-          objectFit: "contain"
+      ".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"
         }
       }
     }
@@ -488,7 +540,7 @@ var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React11, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import React12, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -531,13 +583,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__ */ React11.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React12.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ React11.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ React12.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React11.createElement(ItemInstance, {
+  }, /* @__PURE__ */ React12.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
@@ -565,12 +617,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React11.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ React12.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ React11.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ React12.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -582,11 +634,11 @@ var ItemInstance = ({ id }) => {
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React11.createElement("div", {
+    return /* @__PURE__ */ React12.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React11.createElement(ItemComponent, {
+  return /* @__PURE__ */ React12.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

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