@weaverse/react 0.6.18 → 0.6.19

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
-import { WeaverseType, Weaverse, WeaverseItemStore } from '@weaverse/core';
+import { ReactElement, ReactNode } from 'react';
+import { WeaverseType, Weaverse, WeaverseElementCSS, WeaverseItemStore } from '@weaverse/core';
 export * from '@weaverse/core';
 
 declare let createRootContext: (configs: WeaverseType) => Weaverse;
@@ -7,8 +8,9 @@ declare let WeaverseContext: react.Context<Weaverse>;
 declare let WeaverseContextProvider: react.Provider<Weaverse>;
 declare let WeaverseContextConsumer: react.Consumer<Weaverse>;
 
-interface WeaverseElementProps {
-    children?: React.ReactNode;
+interface WeaverseElementProps extends ReactElement {
+    css?: WeaverseElementCSS;
+    children?: ReactElement | ReactElement[] | ReactNode | ReactNode[];
 }
 declare type WeaverseRootPropsType = {
     context: Weaverse;
@@ -16,7 +18,60 @@ declare type WeaverseRootPropsType = {
 declare type ItemComponentProps = {
     instance: InstanceType<typeof WeaverseItemStore>;
 };
+interface ButtonElementProps extends WeaverseElementProps {
+    value: string;
+    openInNewTab: boolean;
+    target: string;
+    type: 'button' | 'submit' | 'reset';
+}
+interface ContainerElementProps extends WeaverseElementProps {
+    TODO?: any;
+}
+interface ImageElementProps extends WeaverseElementProps {
+    src: string;
+    alt: string;
+}
+interface LayoutElementProps extends WeaverseElementProps {
+    gridSize: number;
+    rows: number;
+    columns: number;
+    gap: number;
+    rowSize: number;
+}
+interface MapElementProps extends WeaverseElementProps {
+    place: string;
+    zoom: number;
+}
+interface TextElementProps extends WeaverseElementProps {
+    value: string;
+}
+interface VideoElementProps extends WeaverseElementProps {
+    src: string;
+    poster: string;
+    loop: boolean;
+    type: string;
+    controls: boolean;
+    autoPlay: boolean;
+    muted: boolean;
+}
 declare type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
+interface CountdownElementProps extends WeaverseElementProps {
+    timerType: 'fixed-time' | 'evergreen';
+    startTime: number;
+    endTime: number;
+    periods: number;
+    redirectUrl: string;
+    openInNewTab: boolean;
+    showLabel: boolean;
+    showColon: boolean;
+}
+interface InstagramElementProps extends WeaverseElementProps {
+    token: string;
+    username: string;
+    numberOfImages: number;
+    imagesPerRow: number;
+    gap: number;
+}
 declare type InstagramMedia = {
     id: string;
     media_type: 'IMAGE' | 'CAROUSEL_ALBUM';
@@ -27,4 +82,4 @@ declare type InstagramMedia = {
 
 declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element;
 
-export { CountdownTimeKey, InstagramMedia, ItemComponentProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };
+export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutElementProps, MapElementProps, TextElementProps, VideoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };

package/dist/index.js

@@ -67,7 +67,7 @@ var import_react10 = require("react");
 // src/elements/button.tsx
 var React = __toESM(require("react"));
 var Button = React.forwardRef((props, ref) => {
-  const _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
+  let _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
   if (target) {
     return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
       href: target,
@@ -102,9 +102,10 @@ var button_default = Button;
 // src/elements/container.tsx
 var import_react = __toESM(require("react"));
 var Container = (0, import_react.forwardRef)((props, ref) => {
+  let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
   return /* @__PURE__ */ import_react.default.createElement("div", __spreadValues({
     ref
-  }, props));
+  }, rest), children);
 });
 Container.defaultProps = {
   css: {
@@ -178,7 +179,7 @@ var Countdown = (0, import_react3.forwardRef)((props, ref) => {
   }
   (0, import_react3.useEffect)(() => {
     const flag = setInterval(() => {
-      const remainingTime = Math.max((timerType === "specific" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
+      const remainingTime = Math.max((timerType === "fixed-time" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
       if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
         window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
       }
@@ -203,7 +204,7 @@ var Countdown = (0, import_react3.forwardRef)((props, ref) => {
   }));
 });
 Countdown.defaultProps = {
-  timerType: "specific",
+  timerType: "fixed-time",
   startTime: Date.now(),
   endTime: 1661140528e3,
   periods: 90,
@@ -240,10 +241,10 @@ 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, children } = _a, rest = __objRest(_a, ["src", "alt", "children"]);
-  return /* @__PURE__ */ import_react4.default.createElement("img", __spreadProps(__spreadValues({
+  let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
+  return /* @__PURE__ */ import_react4.default.createElement("div", __spreadValues({
     ref
-  }, rest), {
+  }, rest), /* @__PURE__ */ import_react4.default.createElement("img", {
     alt,
     src
   }));
@@ -253,12 +254,11 @@ Image.defaultProps = {
   alt: "weaverse image element",
   css: {
     "@desktop": {
-      width: "100%",
-      height: "100%",
-      objectFit: "cover"
-    },
-    "@mobile": {
-      display: "block"
+      img: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      }
     }
   }
 };
@@ -268,17 +268,19 @@ var image_default = Image;
 var import_react5 = __toESM(require("react"));
 var Layout = (0, import_react5.forwardRef)((props, ref) => {
   let _a = props, { children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["children", "rows", "gap", "rowSize", "columns", "gridSize"]);
-  return /* @__PURE__ */ import_react5.default.createElement("section", __spreadValues({
-    ref,
-    style: {
-      "--grid-size": gridSize + "px",
-      "--rows": rows,
-      "--columns": columns,
-      "--gap": gap + "px",
-      "--row-size": rowSize + "px",
-      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
-    }
-  }, rest), /* @__PURE__ */ import_react5.default.createElement("div", {
+  let style = {
+    "--grid-size": gridSize + "px",
+    "--rows": rows,
+    "--columns": columns,
+    "--gap": gap + "px",
+    "--row-size": rowSize + "px",
+    "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
+  };
+  return /* @__PURE__ */ import_react5.default.createElement("section", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    style
+  }), /* @__PURE__ */ import_react5.default.createElement("div", {
     "data-layout-content": true
   }, children));
 });
@@ -317,7 +319,7 @@ var layout_default = Layout;
 // src/elements/map.tsx
 var import_react6 = __toESM(require("react"));
 var Map = (0, import_react6.forwardRef)((props, ref) => {
-  const _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
+  let _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
   return /* @__PURE__ */ import_react6.default.createElement("div", __spreadValues({
     ref
   }, rest), /* @__PURE__ */ import_react6.default.createElement("iframe", {
@@ -327,19 +329,12 @@ var Map = (0, import_react6.forwardRef)((props, ref) => {
     height: "100%",
     title: "map",
     src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
-    style: {
-      pointerEvents: "none"
-    }
+    style: { pointerEvents: "none" }
   }));
 });
 Map.defaultProps = {
   place: "Hanoi",
-  zoom: 14,
-  css: {
-    "@desktop": {
-      gridArea: "1 / 1 / 11 / 13"
-    }
-  }
+  zoom: 14
 };
 var map_default = Map;
 
@@ -359,8 +354,7 @@ Text.defaultProps = {
     "@desktop": {
       width: "100%",
       height: "fit-content",
-      padding: 0,
-      margin: 0,
+      padding: "20px",
       outline: "none",
       wordBreak: "break-word",
       overflowWrap: "break-word",
@@ -373,20 +367,21 @@ var text_default = Text;
 // src/elements/video.tsx
 var import_react7 = __toESM(require("react"));
 var Video = (0, import_react7.forwardRef)((props, ref) => {
-  const { isDesignMode } = (0, import_react7.useContext)(WeaverseContext);
+  let { isDesignMode } = (0, import_react7.useContext)(WeaverseContext);
   let _a = props, { src, type, controls, poster, autoPlay, loop, muted } = _a, rest = __objRest(_a, ["src", "type", "controls", "poster", "autoPlay", "loop", "muted"]);
-  return /* @__PURE__ */ import_react7.default.createElement("video", __spreadValues({
-    ref,
+  return /* @__PURE__ */ import_react7.default.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ import_react7.default.createElement("video", {
     controls: isDesignMode ? false : controls,
     autoPlay: isDesignMode ? false : autoPlay,
     loop,
     muted: true,
     controlsList: "nodownload",
     disablePictureInPicture: true
-  }, rest), /* @__PURE__ */ import_react7.default.createElement("source", {
+  }, /* @__PURE__ */ import_react7.default.createElement("source", {
     src,
     type: type || "video/mp4"
-  }));
+  })));
 });
 Video.defaultProps = {
   src: "https://ucarecdn.com/7cae0dab-8966-4484-9998-602728c360ca/IMG_0048.MOV",
@@ -403,7 +398,7 @@ Video.defaultProps = {
       outline: "none",
       overflowWrap: "break-word",
       padding: 0,
-      whitespace: "break-spaces",
+      whiteSpace: "break-spaces",
       width: "100%",
       wordBreak: "break-word"
     }
@@ -455,7 +450,7 @@ var Instagram = (0, import_react9.forwardRef)((props, ref) => {
           setError(null);
           setMedia([...res.data]);
         }
-      }).catch(console.error);
+      }).catch(setError);
     }
   }, [token]);
   if (!token || error) {
@@ -474,7 +469,7 @@ var Instagram = (0, import_react9.forwardRef)((props, ref) => {
   }, rest), {
     style
   }), /* @__PURE__ */ import_react9.default.createElement("div", {
-    className: "wv-ig-media-wrapper"
+    className: "wv-ig-medias"
   }, media.slice(0, numberOfImages).map((item) => {
     let linkProps;
     if (!isDesignMode) {
@@ -496,7 +491,7 @@ Instagram.defaultProps = {
   gap: 0,
   css: {
     "@desktop": {
-      ".wv-ig-media-wrapper": {
+      ".wv-ig-medias": {
         overflow: "hidden",
         maxWidth: "100%",
         maxHeight: "100%",

package/dist/index.mjs

@@ -37,7 +37,7 @@ import { createContext } from "react";
 // src/elements/button.tsx
 import * as React from "react";
 var Button = React.forwardRef((props, ref) => {
-  const _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
+  let _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
   if (target) {
     return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
       href: target,
@@ -72,9 +72,10 @@ var button_default = Button;
 // src/elements/container.tsx
 import React2, { forwardRef as forwardRef2 } from "react";
 var Container = forwardRef2((props, ref) => {
+  let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
   return /* @__PURE__ */ React2.createElement("div", __spreadValues({
     ref
-  }, props));
+  }, rest), children);
 });
 Container.defaultProps = {
   css: {
@@ -148,7 +149,7 @@ var Countdown = forwardRef3((props, ref) => {
   }
   useEffect(() => {
     const flag = setInterval(() => {
-      const remainingTime = Math.max((timerType === "specific" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
+      const remainingTime = Math.max((timerType === "fixed-time" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
       if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
         window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
       }
@@ -173,7 +174,7 @@ var Countdown = forwardRef3((props, ref) => {
   }));
 });
 Countdown.defaultProps = {
-  timerType: "specific",
+  timerType: "fixed-time",
   startTime: Date.now(),
   endTime: 1661140528e3,
   periods: 90,
@@ -210,10 +211,10 @@ var countdown_default = Countdown;
 // src/elements/image.tsx
 import React5 from "react";
 var Image = React5.forwardRef((props, ref) => {
-  let _a = props, { src, alt, children } = _a, rest = __objRest(_a, ["src", "alt", "children"]);
-  return /* @__PURE__ */ React5.createElement("img", __spreadProps(__spreadValues({
+  let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
+  return /* @__PURE__ */ React5.createElement("div", __spreadValues({
     ref
-  }, rest), {
+  }, rest), /* @__PURE__ */ React5.createElement("img", {
     alt,
     src
   }));
@@ -223,12 +224,11 @@ Image.defaultProps = {
   alt: "weaverse image element",
   css: {
     "@desktop": {
-      width: "100%",
-      height: "100%",
-      objectFit: "cover"
-    },
-    "@mobile": {
-      display: "block"
+      img: {
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
+      }
     }
   }
 };
@@ -238,17 +238,19 @@ var image_default = Image;
 import React6, { forwardRef as forwardRef4 } from "react";
 var Layout = forwardRef4((props, ref) => {
   let _a = props, { children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["children", "rows", "gap", "rowSize", "columns", "gridSize"]);
-  return /* @__PURE__ */ React6.createElement("section", __spreadValues({
-    ref,
-    style: {
-      "--grid-size": gridSize + "px",
-      "--rows": rows,
-      "--columns": columns,
-      "--gap": gap + "px",
-      "--row-size": rowSize + "px",
-      "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
-    }
-  }, rest), /* @__PURE__ */ React6.createElement("div", {
+  let style = {
+    "--grid-size": gridSize + "px",
+    "--rows": rows,
+    "--columns": columns,
+    "--gap": gap + "px",
+    "--row-size": rowSize + "px",
+    "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
+  };
+  return /* @__PURE__ */ React6.createElement("section", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    style
+  }), /* @__PURE__ */ React6.createElement("div", {
     "data-layout-content": true
   }, children));
 });
@@ -287,7 +289,7 @@ var layout_default = Layout;
 // src/elements/map.tsx
 import React7, { forwardRef as forwardRef5 } from "react";
 var Map = forwardRef5((props, ref) => {
-  const _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
+  let _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
   return /* @__PURE__ */ React7.createElement("div", __spreadValues({
     ref
   }, rest), /* @__PURE__ */ React7.createElement("iframe", {
@@ -297,19 +299,12 @@ var Map = forwardRef5((props, ref) => {
     height: "100%",
     title: "map",
     src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
-    style: {
-      pointerEvents: "none"
-    }
+    style: { pointerEvents: "none" }
   }));
 });
 Map.defaultProps = {
   place: "Hanoi",
-  zoom: 14,
-  css: {
-    "@desktop": {
-      gridArea: "1 / 1 / 11 / 13"
-    }
-  }
+  zoom: 14
 };
 var map_default = Map;
 
@@ -329,8 +324,7 @@ Text.defaultProps = {
     "@desktop": {
       width: "100%",
       height: "fit-content",
-      padding: 0,
-      margin: 0,
+      padding: "20px",
       outline: "none",
       wordBreak: "break-word",
       overflowWrap: "break-word",
@@ -343,20 +337,21 @@ var text_default = Text;
 // src/elements/video.tsx
 import React9, { forwardRef as forwardRef7, useContext as useContext2 } from "react";
 var Video = forwardRef7((props, ref) => {
-  const { isDesignMode } = useContext2(WeaverseContext);
+  let { isDesignMode } = useContext2(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("video", __spreadValues({
-    ref,
+  return /* @__PURE__ */ React9.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ React9.createElement("video", {
     controls: isDesignMode ? false : controls,
     autoPlay: isDesignMode ? false : autoPlay,
     loop,
     muted: true,
     controlsList: "nodownload",
     disablePictureInPicture: true
-  }, rest), /* @__PURE__ */ React9.createElement("source", {
+  }, /* @__PURE__ */ React9.createElement("source", {
     src,
     type: type || "video/mp4"
-  }));
+  })));
 });
 Video.defaultProps = {
   src: "https://ucarecdn.com/7cae0dab-8966-4484-9998-602728c360ca/IMG_0048.MOV",
@@ -373,7 +368,7 @@ Video.defaultProps = {
       outline: "none",
       overflowWrap: "break-word",
       padding: 0,
-      whitespace: "break-spaces",
+      whiteSpace: "break-spaces",
       width: "100%",
       wordBreak: "break-word"
     }
@@ -425,7 +420,7 @@ var Instagram = forwardRef9((props, ref) => {
           setError(null);
           setMedia([...res.data]);
         }
-      }).catch(console.error);
+      }).catch(setError);
     }
   }, [token]);
   if (!token || error) {
@@ -444,7 +439,7 @@ var Instagram = forwardRef9((props, ref) => {
   }, rest), {
     style
   }), /* @__PURE__ */ React11.createElement("div", {
-    className: "wv-ig-media-wrapper"
+    className: "wv-ig-medias"
   }, media.slice(0, numberOfImages).map((item) => {
     let linkProps;
     if (!isDesignMode) {
@@ -466,7 +461,7 @@ Instagram.defaultProps = {
   gap: 0,
   css: {
     "@desktop": {
-      ".wv-ig-media-wrapper": {
+      ".wv-ig-medias": {
         overflow: "hidden",
         maxWidth: "100%",
         maxHeight: "100%",

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.18",
+  "version": "0.6.19",
   "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.19"
   }
 }