@weaverse/react 0.7.27 → 0.7.28

package/dist/index.mjs

@@ -1,22 +1,19 @@
-// src/elements/button.tsx
-import * as React from "react";
-import { useContext } from "react";
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/index.ts
+export * from "@weaverse/core";
 
 // src/context.ts
 import { Weaverse } from "@weaverse/core";
 import { createContext } from "react";
-var createRootContext = (configs) => {
-  let rootContext = new Weaverse(configs);
-  Object.keys(Elements).forEach((key) => {
-    rootContext.registerElement(Elements[key]);
-  });
-  return rootContext;
-};
-var WeaverseContext = createContext({});
-var WeaverseContextProvider = WeaverseContext.Provider;
-var WeaverseContextConsumer = WeaverseContext.Consumer;
 
-// src/elements/button.tsx
+// src/elements/Button.tsx
+import * as React from "react";
+import { useContext } from "react";
 var Button = React.forwardRef((props, ref) => {
   let { isDesignMode } = useContext(WeaverseContext);
   let { text, clickAction, linkTo, openInNewTab, ...rest } = props;
@@ -52,9 +49,9 @@ var css = {
     textDecoration: "none"
   }
 };
-var button_default = Button;
+var Button_default = Button;
 
-// src/elements/container.tsx
+// src/elements/Container.tsx
 import React2, { forwardRef as forwardRef2 } from "react";
 var Container = forwardRef2(
   (props, ref) => {
@@ -80,12 +77,77 @@ var css2 = {
   }
 };
 Container.defaultProps = {};
-var container_default = Container;
+var Container_default = Container;
 
-// src/elements/countdown/index.tsx
+// src/elements/Countdown/index.tsx
 import React4, { forwardRef as forwardRef3, useContext as useContext2, useEffect } from "react";
 
-// src/elements/countdown/timer-block.tsx
+// src/constant/index.ts
+var TIMES = ["days", "hours", "minutes", "seconds"];
+var COUNTDOWN_KEY = "wv-cd-evergreen-start";
+var INSTAGRAM_API = "https://graph.instagram.com";
+
+// src/utils/css.ts
+function shortCssObject(css10) {
+  return {
+    "@desktop": css10["@desktop"],
+    "@mobile": css10["@mobile"]
+  };
+}
+var permanentClasses = {};
+function generateItemClass(instance, stitchesInstance) {
+  let { css: css10, type, className: cls = "" } = instance.data;
+  let className = "";
+  let permanentClass = "";
+  let perCss = instance.Element?.permanentCss;
+  if (perCss) {
+    if (type in permanentClasses) {
+      permanentClass = permanentClasses[type];
+    } else {
+      let { className: perCls } = stitchesInstance.css(perCss)();
+      Object.assign(permanentClasses, { [type]: perCls });
+      permanentClass = perCls;
+    }
+  }
+  className = permanentClass;
+  if (css10) {
+    let formattedCss = shortCssObject(css10);
+    let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
+    let { stitchesClass } = instance;
+    let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
+    className = `${permanentClass} ${cls} ${newClass} ${otherClass}`.trim();
+    instance.stitchesClass = newClass;
+  }
+  return className;
+}
+
+// src/utils/index.ts
+function getTime(_seconds) {
+  let ONE_MINUTE = 60 * 1e3;
+  let ONE_HOUR = 60 * ONE_MINUTE;
+  let ONE_DAY = 24 * ONE_HOUR;
+  let days = Math.floor(_seconds / ONE_DAY);
+  let hours = Math.floor((_seconds - days * ONE_DAY) / ONE_HOUR);
+  let minutes = Math.floor(
+    (_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE
+  );
+  let seconds = Math.floor(
+    (_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3
+  );
+  return { days, hours, minutes, seconds };
+}
+function getYoutubeEmbedId(url) {
+  const match = url.match(
+    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/
+  );
+  return match ? match[1] : null;
+}
+function getVimeoId(url) {
+  const match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);
+  return match ? match[1] : null;
+}
+
+// src/elements/Countdown/TimerBlock.tsx
 import React3 from "react";
 function TimerBlock({ value, label }) {
   return /* @__PURE__ */ React3.createElement("div", {
@@ -97,25 +159,7 @@ function TimerBlock({ value, label }) {
   }, label));
 }
 
-// src/elements/countdown/utils.ts
-var times = ["days", "hours", "minutes", "seconds"];
-function getTime(_seconds) {
-  const ONE_MINUTE = 60 * 1e3;
-  const ONE_HOUR = 60 * ONE_MINUTE;
-  const ONE_DAY = 24 * ONE_HOUR;
-  const days = Math.floor(_seconds / ONE_DAY);
-  const hours = Math.floor((_seconds - days * ONE_DAY) / ONE_HOUR);
-  const minutes = Math.floor(
-    (_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE
-  );
-  const seconds = Math.floor(
-    (_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3
-  );
-  return { days, hours, minutes, seconds };
-}
-
-// src/elements/countdown/index.tsx
-var countdownKey = "wv-cd-evergreen-start";
+// src/elements/Countdown/index.tsx
 var Countdown = forwardRef3(
   (props, ref) => {
     const { isDesignMode } = useContext2(WeaverseContext);
@@ -139,16 +183,16 @@ var Countdown = forwardRef3(
     const getStartTime = () => {
       let startTime = startTimeProp;
       if (timerType === "evergreen") {
-        const start = localStorage.getItem(countdownKey);
+        const start = localStorage.getItem(COUNTDOWN_KEY);
         if (start) {
           startTime = Number.parseInt(start);
           if (startTime + periods < Date.now()) {
             startTime = Date.now();
-            localStorage.setItem(countdownKey, startTime.toString());
+            localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
           }
         } else {
           startTime = Date.now();
-          localStorage.setItem(countdownKey, startTime.toString());
+          localStorage.setItem(COUNTDOWN_KEY, startTime.toString());
         }
       }
       return startTime;
@@ -177,7 +221,7 @@ var Countdown = forwardRef3(
     return /* @__PURE__ */ React4.createElement("div", {
       ref,
       ...rest
-    }, times.map((time) => {
+    }, TIMES.map((time) => {
       return /* @__PURE__ */ React4.createElement(React4.Fragment, {
         key: time
       }, /* @__PURE__ */ React4.createElement(TimerBlock, {
@@ -225,9 +269,9 @@ Countdown.defaultProps = {
   showLabel: true,
   showColon: true
 };
-var countdown_default = Countdown;
+var Countdown_default = Countdown;
 
-// src/elements/image.tsx
+// src/elements/Image.tsx
 import React5 from "react";
 var Image = React5.forwardRef(
   (props, ref) => {
@@ -285,9 +329,9 @@ Image.defaultProps = {
   openLinkInNewTab: false,
   linkTo: ""
 };
-var image_default = Image;
+var Image_default = Image;
 
-// src/elements/layout.tsx
+// src/elements/Layout.tsx
 import React6, { forwardRef as forwardRef4 } from "react";
 var Layout = forwardRef4((props, ref) => {
   let {
@@ -380,9 +424,9 @@ Layout.defaultProps = {
   gap: 16,
   rowSize: 48
 };
-var layout_default = Layout;
+var Layout_default = Layout;
 
-// src/elements/map.tsx
+// src/elements/Map.tsx
 import React7, { forwardRef as forwardRef5 } from "react";
 var Map = forwardRef5((props, ref) => {
   let { place, zoom, ...rest } = props;
@@ -404,9 +448,9 @@ Map.defaultProps = {
   place: "Hanoi",
   zoom: 14
 };
-var map_default = Map;
+var Map_default = Map;
 
-// src/elements/text.tsx
+// src/elements/Text.tsx
 import * as React8 from "react";
 var Text = React8.forwardRef(
   (props, ref) => {
@@ -429,40 +473,32 @@ var css7 = {
 Text.defaultProps = {
   value: "The quick brown fox jumps over the lazy dog"
 };
-var text_default = Text;
+var Text_default = Text;
 
-// src/elements/video/index.tsx
+// src/elements/Video/index.tsx
 import React12, { forwardRef as forwardRef7, useContext as useContext3 } from "react";
 
-// src/elements/video/utils.ts
-function getYoutubeEmbedId(url) {
-  const match = url.match(
-    /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com|youtu\.be)\/(?:watch\?v=)?(.+)/
-  );
-  return match ? match[1] : null;
-}
-function getVimeoId(url) {
-  const match = url.match(/(?:https?:\/\/)?(?:www\.)?vimeo\.com\/(.+)/);
-  return match ? match[1] : null;
-}
-
-// src/elements/video/Youtube.tsx
+// src/elements/Video/HTMLVideo.tsx
 import React9 from "react";
-function Youtube(props) {
-  let { youtubeId, controls, autoPlay, loop, muted } = props;
-  let params = `autoplay=${autoPlay ? 1 : 0}&controls=${controls ? 1 : 0}&loop=${loop ? 1 : 0}&mute=${muted ? 1 : 0}`;
-  let youtubeSrc = `https://www.youtube.com/embed/${youtubeId}?${params}`;
-  let allow = `accelerometer;${autoPlay ? "autoplay;" : ""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`;
-  return /* @__PURE__ */ React9.createElement("iframe", {
-    src: youtubeSrc,
-    width: "100%",
-    height: "100%",
-    allowFullScreen: true,
-    allow
-  });
+function HTMLVideo(props) {
+  let { src, type, controls, autoPlay, loop, muted } = props;
+  return /* @__PURE__ */ React9.createElement("video", {
+    controls,
+    autoPlay,
+    loop,
+    muted,
+    controlsList: "nodownload",
+    disablePictureInPicture: true
+  }, /* @__PURE__ */ React9.createElement("source", {
+    src,
+    type: type || "video/mp4"
+  }), /* @__PURE__ */ React9.createElement("source", {
+    src,
+    type: "video/ogg"
+  }), "Your browser does not support the video tag.");
 }
 
-// src/elements/video/vimeo.tsx
+// src/elements/Video/Vimeo.tsx
 import React10 from "react";
 function Vimeo(props) {
   let { vimeoId, controls, autoPlay, loop, muted } = props;
@@ -476,27 +512,28 @@ function Vimeo(props) {
   });
 }
 
-// src/elements/video/html-video.tsx
+// src/elements/Video/Youtube.tsx
 import React11 from "react";
-function HtmlVideo(props) {
-  let { src, type, controls, autoPlay, loop, muted } = props;
-  return /* @__PURE__ */ React11.createElement("video", {
-    controls,
-    autoPlay,
-    loop,
-    muted,
-    controlsList: "nodownload",
-    disablePictureInPicture: true
-  }, /* @__PURE__ */ React11.createElement("source", {
-    src,
-    type: type || "video/mp4"
-  }), /* @__PURE__ */ React11.createElement("source", {
-    src,
-    type: "video/ogg"
-  }), "Your browser does not support the video tag.");
+function Youtube(props) {
+  let { youtubeId, controls, autoPlay, loop, muted } = props;
+  let params = new URLSearchParams({
+    autoplay: autoPlay ? "1" : "0",
+    controls: controls ? "1" : "0",
+    loop: loop ? "1" : "0",
+    mute: muted ? "1" : "0"
+  });
+  let youtubeSrc = `https://www.youtube.com/embed/${youtubeId}?${params.toString()}`;
+  let allow = `accelerometer;${autoPlay ? "autoplay;" : ""} clipboard-write; encrypted-media; gyroscope; picture-in-picture`;
+  return /* @__PURE__ */ React11.createElement("iframe", {
+    src: youtubeSrc,
+    width: "100%",
+    height: "100%",
+    allowFullScreen: true,
+    allow
+  });
 }
 
-// src/elements/video/index.tsx
+// src/elements/Video/index.tsx
 var Video = forwardRef7((props, ref) => {
   let { isDesignMode } = useContext3(WeaverseContext);
   let {
@@ -524,7 +561,7 @@ var Video = forwardRef7((props, ref) => {
       vimeoId
     });
   } else {
-    content = /* @__PURE__ */ React12.createElement(HtmlVideo, {
+    content = /* @__PURE__ */ React12.createElement(HTMLVideo, {
       ...videoProps
     });
   }
@@ -550,12 +587,12 @@ Video.defaultProps = {
   autoPlay: true,
   muted: true
 };
-var video_default = Video;
+var Video_default = Video;
 
-// src/elements/instagram.tsx
+// src/elements/Instagram.tsx
 import React14, { forwardRef as forwardRef9, useEffect as useEffect2, useState } from "react";
 
-// src/elements/shared/Placeholder.tsx
+// src/components/Placeholder.tsx
 import React13, { forwardRef as forwardRef8 } from "react";
 var Placeholder = forwardRef8(
   (props, ref) => {
@@ -571,8 +608,7 @@ var Placeholder = forwardRef8(
 );
 var Placeholder_default = Placeholder;
 
-// src/elements/instagram.tsx
-var INSTAGRAM_API = "https://graph.instagram.com";
+// src/elements/Instagram.tsx
 var Instagram = forwardRef9(
   (props, ref) => {
     let { token, username, numberOfImages, imagesPerRow, gap, ...rest } = props;
@@ -642,6 +678,19 @@ var permanentCss2 = {
         objectFit: "cover"
       }
     }
+  },
+  "@mobile": {
+    ".wv-ig-media-container": {
+      overflowX: "auto",
+      display: "flex",
+      scrollSnapType: "x mandatory"
+    },
+    ".wv-ig-media-container a": {
+      scrollSnapAlign: "start",
+      flexGrow: 0,
+      flexShrink: 0,
+      flexBasis: "100%"
+    }
   }
 };
 Instagram.defaultProps = {
@@ -651,101 +700,179 @@ Instagram.defaultProps = {
   imagesPerRow: 4,
   gap: 0
 };
-var instagram_default = Instagram;
+var Instagram_default = Instagram;
 
 // src/elements/index.ts
-var SharedComponents = {
-  Placeholder: Placeholder_default
-};
 var Elements = {
   Countdown: {
-    Component: countdown_default,
+    Component: Countdown_default,
     type: "countdown",
     defaultCss: css3
   },
   Button: {
-    Component: button_default,
+    Component: Button_default,
     type: "button",
     defaultCss: css
   },
   Container: {
-    Component: container_default,
+    Component: Container_default,
     type: "container",
     defaultCss: css2
   },
   Image: {
-    Component: image_default,
+    Component: Image_default,
     type: "image",
     defaultCss: css4
   },
   Instagram: {
-    Component: instagram_default,
+    Component: Instagram_default,
     type: "instagram",
     defaultCss: css9,
     permanentCss: permanentCss2
   },
   Layout: {
-    Component: layout_default,
+    Component: Layout_default,
     type: "layout",
     defaultCss: css5,
     permanentCss
   },
   Map: {
-    Component: map_default,
+    Component: Map_default,
     type: "map",
     defaultCss: css6
   },
   Text: {
-    Component: text_default,
+    Component: Text_default,
     type: "text",
     defaultCss: css7
   },
   Video: {
-    Component: video_default,
+    Component: Video_default,
     type: "video",
     defaultCss: css8
   }
 };
 
-// src/renderer.tsx
-import { isBrowser } from "@weaverse/core";
-import React15, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
+// src/context.ts
+var createRootContext = (configs) => {
+  let rootContext = new Weaverse(configs);
+  Object.keys(Elements).forEach((key) => {
+    rootContext.registerElement(Elements[key]);
+  });
+  return rootContext;
+};
+var WeaverseContext = createContext({});
+var WeaverseContextProvider = WeaverseContext.Provider;
+var WeaverseContextConsumer = WeaverseContext.Consumer;
 
-// src/utils/index.ts
-function shortCssObject(css10) {
-  return {
-    "@desktop": css10["@desktop"],
-    "@mobile": css10["@mobile"]
-  };
-}
-var permanentClasses = {};
-function generateItemClass(instance, stitchesInstance) {
-  let { css: css10, type, className: cls = "" } = instance.data;
-  let className = "";
-  let permanentClass = "";
-  let perCss = instance.Element?.permanentCss;
-  if (perCss) {
-    if (type in permanentClasses) {
-      permanentClass = permanentClasses[type];
-    } else {
-      let { className: perCls } = stitchesInstance.css(perCss)();
-      Object.assign(permanentClasses, { [type]: perCls });
-      permanentClass = perCls;
-    }
-  }
-  className = permanentClass;
-  if (css10) {
-    let formattedCss = shortCssObject(css10);
-    let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
-    let { stitchesClass } = instance;
-    let otherClass = (instance.ref.current?.className || "").replace(stitchesClass, "").replace(cls, "").replace(permanentClass, "").trim();
-    className = `${permanentClass} ${cls} ${newClass} ${otherClass}`.trim();
-    instance.stitchesClass = newClass;
+// src/components/Modal.tsx
+var Modal_exports = {};
+__export(Modal_exports, {
+  Modal: () => Modal,
+  ModalClose: () => ModalClose,
+  ModalContent: () => ModalContent,
+  ModalHeader: () => ModalHeader,
+  ModalTrigger: () => ModalTrigger
+});
+import React15, { forwardRef as forwardRef10 } from "react";
+import {
+  Close,
+  Content,
+  Overlay,
+  Portal,
+  Root,
+  Title,
+  Trigger
+} from "@radix-ui/react-dialog";
+import { styled, keyframes } from "@stitches/react";
+var Modal = Root;
+var ModalTrigger = Trigger;
+var ModalHeader = styled(Title, {
+  margin: 0,
+  fontWeight: 500,
+  color: "#ededef",
+  fontSize: 17
+});
+var ModalContent = forwardRef10(
+  (props, ref) => {
+    let { children, ...rest } = props;
+    return /* @__PURE__ */ React15.createElement(Portal, null, /* @__PURE__ */ React15.createElement(StyledOverlay, null), /* @__PURE__ */ React15.createElement(StyledContent, {
+      ...rest,
+      onCloseAutoFocus: (e) => e.preventDefault(),
+      ref
+    }, /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement(ModalClose, null), /* @__PURE__ */ React15.createElement("div", null, children))));
   }
-  return className;
+);
+var ModalClose = Close;
+ModalClose.defaultProps = {
+  asChild: true
+};
+var overlayShow = keyframes({
+  "0%": { opacity: 0 },
+  "100%": { opacity: 1 }
+});
+var contentShow = keyframes({
+  "0%": { opacity: 0, transform: "translate(-50%, -48%) scale(.96)" },
+  "100%": { opacity: 1, transform: "translate(-50%, -50%) scale(1)" }
+});
+var StyledOverlay = styled(Overlay, {
+  backgroundColor: "#707070",
+  position: "fixed",
+  zIndex: 9999,
+  inset: 0,
+  animation: `${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`
+});
+var StyledContent = styled(Content, {
+  backgroundColor: "white",
+  borderRadius: 6,
+  boxShadow: "hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px",
+  position: "fixed",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: "90vw",
+  maxWidth: "450px",
+  maxHeight: "85vh",
+  padding: 25,
+  animation: `${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1)`,
+  "&:focus": { outline: "none" },
+  zIndex: 9999
+});
+
+// src/components/Spinner.tsx
+import React16 from "react";
+function Spinner() {
+  return /* @__PURE__ */ React16.createElement("span", {
+    className: "wv-spinner-wrapper"
+  }, /* @__PURE__ */ React16.createElement("svg", {
+    className: "wv-spinner",
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24"
+  }, /* @__PURE__ */ React16.createElement("circle", {
+    style: { opacity: ".25" },
+    cx: "12",
+    cy: "12",
+    r: "10",
+    stroke: "currentColor",
+    strokeWidth: "4"
+  }), /* @__PURE__ */ React16.createElement("path", {
+    style: { opacity: ".75" },
+    fill: "currentColor",
+    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+  })));
 }
 
+// src/components/index.ts
+var Components = {
+  Placeholder: Placeholder_default,
+  Spinner,
+  ModalComponents: Modal_exports
+};
+
 // src/renderer.tsx
+import { isBrowser } from "@weaverse/core";
+import React17, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
 var WeaverseRoot = ({ context }) => {
   let [, setData] = useState2(context.projectData);
   let rootRef = useRef();
@@ -760,13 +887,13 @@ var WeaverseRoot = ({ context }) => {
   let eventHandlers = context?.studioBridge?.eventHandlers || {};
   let themeClass = context.stitchesInstance.theme.className;
   if (context.projectData?.rootId) {
-    return /* @__PURE__ */ React15.createElement("div", {
+    return /* @__PURE__ */ React17.createElement("div", {
       className: `weaverse-content-root ${themeClass}`,
       ...eventHandlers,
       ref: rootRef
-    }, /* @__PURE__ */ React15.createElement(WeaverseContextProvider, {
+    }, /* @__PURE__ */ React17.createElement(WeaverseContextProvider, {
       value: context
-    }, /* @__PURE__ */ React15.createElement(ItemInstance, {
+    }, /* @__PURE__ */ React17.createElement(ItemInstance, {
       id: context.projectData.rootId
     })));
   }
@@ -792,13 +919,13 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React15.createElement(Component, {
+    return /* @__PURE__ */ React17.createElement(Component, {
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance),
       ...rest
-    }, childIds.map((id2) => /* @__PURE__ */ React15.createElement(ItemInstance, {
+    }, childIds.map((id2) => /* @__PURE__ */ React17.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -812,21 +939,18 @@ var ItemInstance = ({ id }) => {
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React15.createElement("div", {
+    return /* @__PURE__ */ React17.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React15.createElement(ItemComponent, {
+  return /* @__PURE__ */ React17.createElement(ItemComponent, {
     key: id,
     instance
   });
 };
-
-// src/index.ts
-export * from "@weaverse/core";
 export {
+  Components,
   Elements,
-  SharedComponents,
   WeaverseContext,
   WeaverseContextConsumer,
   WeaverseContextProvider,