@weaverse/react 0.6.1 → 0.6.4

package/dist/index.js

@@ -91,24 +91,31 @@ var schema2 = {
   title: "Button",
   type: "button",
   styles: [
+    {
+      type: "dimensions"
+    },
     {
       type: "alignment"
     },
     {
-      type: "visibility"
+      type: "border"
     },
     {
-      type: "dimensions"
+      type: "background"
     },
     {
       type: "spacing"
+    }
+  ],
+  settings: [],
+  toolbar: [
+    {
+      type: "delete"
     },
     {
-      type: "background"
+      type: "duplicate"
     }
   ],
-  settings: [],
-  toolbar: [],
   data: {
     css: {
       "@desktop": {
@@ -138,7 +145,7 @@ var schema3 = {
         backgroundColor: "rgba(248,203,203,0.38)",
         flexDirection: "column",
         alignItems: "flex-start",
-        justifyContent: "center",
+        justifyContent: "flex-start",
         textAlign: "left",
         gridArea: "1 / 1 / 3 / 6",
         overflow: "hidden",
@@ -157,7 +164,7 @@ var Layout = (0, import_react3.forwardRef)((props, ref) => {
   return /* @__PURE__ */ import_react3.default.createElement("div", __spreadProps(__spreadValues({
     ref
   }, props), {
-    children: props.children || "Layout Placeholder"
+    children: props.children
   }));
 });
 var schema4 = {
@@ -167,12 +174,12 @@ var schema4 = {
     css: {
       "@desktop": {
         display: "grid !important",
-        gridTemplateRows: "repeat(auto-fill, $rowSize)",
-        gridTemplateColumns: "repeat($columns, 1fr)",
-        gridAutoRows: "$sizes$rowSize",
+        gridTemplateRows: "repeat($row-count, $row-size)",
+        gridTemplateColumns: "repeat($column-count, 1fr)",
         gridGap: "$gap",
         minHeight: "104px",
-        width: "100%",
+        width: "$width",
+        maxWidth: "$max-width",
         margin: "0 auto"
       },
       "@mobile": {
@@ -219,6 +226,35 @@ var schema5 = {
 };
 var text_default = Text;
 
+// src/elements/image.tsx
+var import_react4 = __toESM(require("react"));
+var Image = import_react4.default.forwardRef(function Image2(props, ref) {
+  let _a = props, { src, alt, children } = _a, rest = __objRest(_a, ["src", "alt", "children"]);
+  return /* @__PURE__ */ import_react4.default.createElement("img", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    alt,
+    src
+  }));
+});
+Image.defaultProps = {
+  src: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
+  alt: "weaverse image element"
+};
+var schema6 = {
+  settings: [],
+  type: "image",
+  title: "Image",
+  data: {
+    css: {
+      "@desktop": {
+        padding: "10px"
+      }
+    }
+  }
+};
+var image_default = Image;
+
 // src/elements/index.ts
 var elements = {
   Button: {
@@ -240,6 +276,10 @@ var elements = {
   Container: {
     Component: container_default,
     schema: schema3
+  },
+  Image: {
+    Component: image_default,
+    schema: schema6
   }
 };
 var elements_default = elements;
@@ -254,7 +294,7 @@ var shortCssObject = (css) => {
 
 // src/renderer.tsx
 var import_core = require("@weaverse/core");
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var createRootContext = (configs) => {
   const rootContext = new import_core.Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
@@ -264,8 +304,8 @@ var createRootContext = (configs) => {
 };
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = React6.useState(context.projectData);
-  React6.useEffect(() => {
+  let [, setData] = React7.useState(context.projectData);
+  React7.useEffect(() => {
     let handleUpdate = () => {
       setData({});
     };
@@ -277,19 +317,19 @@ var WeaverseRoot = ({ context }) => {
       context.unsubscribe(handleUpdate);
     };
   }, []);
-  let handleProps = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.handleProps) || {};
+  let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ React6.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React7.createElement("div", __spreadValues({
     className: `weaverse-content-root ${themeClass}`
-  }, handleProps), /* @__PURE__ */ React6.createElement(RenderItem, {
+  }, eventHandlers), /* @__PURE__ */ React7.createElement(RenderItem, {
     itemId: context.projectData.rootId || 0,
     context
   }));
 };
 var Item = ({ itemInstance, elementInstances, context }) => {
-  let [data, setData] = React6.useState(itemInstance.data);
+  let [data, setData] = React7.useState(itemInstance.data);
   let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));
     };
@@ -315,13 +355,13 @@ var Item = ({ itemInstance, elementInstances, context }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = itemInstance.ref;
     }
-    return /* @__PURE__ */ React6.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React7.createElement(Component, __spreadProps(__spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id
     }, rest), {
       className: realClassName
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React6.createElement(RenderItem, {
+    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React7.createElement(RenderItem, {
       key: childId,
       itemId: childId,
       context
@@ -336,14 +376,14 @@ var RenderItem = ({
   let { itemInstances, elementInstances } = context;
   let itemInstance = itemInstances.get(itemId);
   if (itemInstance) {
-    return /* @__PURE__ */ React6.createElement(Item, {
+    return /* @__PURE__ */ React7.createElement(Item, {
       itemInstance,
       elementInstances,
       context
     });
   }
   console.warn(`Item instance ${itemId} not found`);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null);
 };
 
 // src/index.ts

package/dist/index.mjs

@@ -64,24 +64,31 @@ var schema2 = {
   title: "Button",
   type: "button",
   styles: [
+    {
+      type: "dimensions"
+    },
     {
       type: "alignment"
     },
     {
-      type: "visibility"
+      type: "border"
     },
     {
-      type: "dimensions"
+      type: "background"
     },
     {
       type: "spacing"
+    }
+  ],
+  settings: [],
+  toolbar: [
+    {
+      type: "delete"
     },
     {
-      type: "background"
+      type: "duplicate"
     }
   ],
-  settings: [],
-  toolbar: [],
   data: {
     css: {
       "@desktop": {
@@ -111,7 +118,7 @@ var schema3 = {
         backgroundColor: "rgba(248,203,203,0.38)",
         flexDirection: "column",
         alignItems: "flex-start",
-        justifyContent: "center",
+        justifyContent: "flex-start",
         textAlign: "left",
         gridArea: "1 / 1 / 3 / 6",
         overflow: "hidden",
@@ -130,7 +137,7 @@ var Layout = forwardRef3((props, ref) => {
   return /* @__PURE__ */ React4.createElement("div", __spreadProps(__spreadValues({
     ref
   }, props), {
-    children: props.children || "Layout Placeholder"
+    children: props.children
   }));
 });
 var schema4 = {
@@ -140,12 +147,12 @@ var schema4 = {
     css: {
       "@desktop": {
         display: "grid !important",
-        gridTemplateRows: "repeat(auto-fill, $rowSize)",
-        gridTemplateColumns: "repeat($columns, 1fr)",
-        gridAutoRows: "$sizes$rowSize",
+        gridTemplateRows: "repeat($row-count, $row-size)",
+        gridTemplateColumns: "repeat($column-count, 1fr)",
         gridGap: "$gap",
         minHeight: "104px",
-        width: "100%",
+        width: "$width",
+        maxWidth: "$max-width",
         margin: "0 auto"
       },
       "@mobile": {
@@ -192,6 +199,35 @@ var schema5 = {
 };
 var text_default = Text;
 
+// src/elements/image.tsx
+import React6 from "react";
+var Image = React6.forwardRef(function Image2(props, ref) {
+  let _a = props, { src, alt, children } = _a, rest = __objRest(_a, ["src", "alt", "children"]);
+  return /* @__PURE__ */ React6.createElement("img", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    alt,
+    src
+  }));
+});
+Image.defaultProps = {
+  src: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
+  alt: "weaverse image element"
+};
+var schema6 = {
+  settings: [],
+  type: "image",
+  title: "Image",
+  data: {
+    css: {
+      "@desktop": {
+        padding: "10px"
+      }
+    }
+  }
+};
+var image_default = Image;
+
 // src/elements/index.ts
 var elements = {
   Button: {
@@ -213,6 +249,10 @@ var elements = {
   Container: {
     Component: container_default,
     schema: schema3
+  },
+  Image: {
+    Component: image_default,
+    schema: schema6
   }
 };
 var elements_default = elements;
@@ -230,7 +270,7 @@ import {
   isBrowser,
   Weaverse
 } from "@weaverse/core";
-import * as React6 from "react";
+import * as React7 from "react";
 var createRootContext = (configs) => {
   const rootContext = new Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
@@ -240,8 +280,8 @@ var createRootContext = (configs) => {
 };
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = React6.useState(context.projectData);
-  React6.useEffect(() => {
+  let [, setData] = React7.useState(context.projectData);
+  React7.useEffect(() => {
     let handleUpdate = () => {
       setData({});
     };
@@ -253,19 +293,19 @@ var WeaverseRoot = ({ context }) => {
       context.unsubscribe(handleUpdate);
     };
   }, []);
-  let handleProps = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.handleProps) || {};
+  let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ React6.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React7.createElement("div", __spreadValues({
     className: `weaverse-content-root ${themeClass}`
-  }, handleProps), /* @__PURE__ */ React6.createElement(RenderItem, {
+  }, eventHandlers), /* @__PURE__ */ React7.createElement(RenderItem, {
     itemId: context.projectData.rootId || 0,
     context
   }));
 };
 var Item = ({ itemInstance, elementInstances, context }) => {
-  let [data, setData] = React6.useState(itemInstance.data);
+  let [data, setData] = React7.useState(itemInstance.data);
   let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  React6.useEffect(() => {
+  React7.useEffect(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));
     };
@@ -291,13 +331,13 @@ var Item = ({ itemInstance, elementInstances, context }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = itemInstance.ref;
     }
-    return /* @__PURE__ */ React6.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React7.createElement(Component, __spreadProps(__spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id
     }, rest), {
       className: realClassName
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React6.createElement(RenderItem, {
+    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React7.createElement(RenderItem, {
       key: childId,
       itemId: childId,
       context
@@ -312,14 +352,14 @@ var RenderItem = ({
   let { itemInstances, elementInstances } = context;
   let itemInstance = itemInstances.get(itemId);
   if (itemInstance) {
-    return /* @__PURE__ */ React6.createElement(Item, {
+    return /* @__PURE__ */ React7.createElement(Item, {
       itemInstance,
       elementInstances,
       context
     });
   }
   console.warn(`Item instance ${itemId} not found`);
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null);
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null);
 };
 
 // src/index.ts

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.1",
+  "version": "0.6.4",
   "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.5.14"
+    "@weaverse/core": "0.6.4"
   }
 }