@weaverse/react 0.3.7 → 0.4.2

package/dist/index.js

@@ -70,29 +70,70 @@ BaseElement.defaultProps = {
   style: {}
 };
 var schema = {
-  type: "base"
+  type: "base",
+  title: "Base",
+  settings: []
 };
 var base_default = BaseElement;
 
 // src/elements/button.tsx
 var React2 = __toESM(require("react"));
 var Button = React2.forwardRef((props, ref) => {
+  const _a = props, { style, buttonType, css } = _a, rest = __objRest(_a, ["style", "buttonType", "css"]);
   return /* @__PURE__ */ React2.createElement("button", __spreadValues({
-    ref
-  }, props), props.value);
+    ref,
+    style
+  }, rest), props.value);
 });
 Button.defaultProps = {
-  value: "Click me",
-  style: {
-    borderRadius: "9999px",
-    fontSize: "13px",
-    padding: "10px 15px"
-  }
+  value: "Click me"
 };
 var schema2 = {
   title: "Button",
   type: "button",
   settings: [
+    {
+      tab: "Settings",
+      label: "Alignment",
+      inspectors: [
+        {
+          binding: "style",
+          type: "alignment"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Spacing",
+      inspectors: [
+        {
+          binding: "style",
+          type: "spacing"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Overlay",
+      inspectors: [
+        {
+          binding: "data",
+          key: "applyOverlay",
+          label: "Apply Overlay",
+          type: "switch"
+        },
+        {
+          binding: "data",
+          key: "buttonType",
+          label: "Button Type",
+          type: "select",
+          options: [
+            { value: 1, label: "One" },
+            { value: 2, label: "Two" }
+          ]
+        }
+      ]
+    },
     {
       tab: "Settings",
       label: "Group 1",
@@ -100,12 +141,14 @@ var schema2 = {
         {
           binding: "data",
           key: "value",
-          componentType: "textarea"
+          type: "textarea",
+          label: "",
+          default: ""
         },
         {
           binding: "style",
           key: "backgroundColor",
-          componentType: "color"
+          type: "color"
         }
       ]
     },
@@ -116,19 +159,65 @@ var schema2 = {
         {
           binding: "style",
           key: "color",
-          componentType: "color"
+          type: "color"
         }
       ]
     }
-  ]
+  ],
+  toolbar: [],
+  data: {
+    css: {
+      "@desktop": {
+        borderRadius: "9999px",
+        fontSize: "13px",
+        padding: "10px 15px"
+      }
+    }
+  }
 };
 var button_default = Button;
 
+// src/elements/grid.tsx
+var import_react2 = __toESM(require("react"));
+var Grid = (0, import_react2.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ import_react2.default.createElement("div", __spreadValues({
+    ref
+  }, props));
+});
+var schema3 = {
+  title: "Grid",
+  type: "grid",
+  data: {
+    css: {
+      "@desktop": {
+        display: "grid",
+        gridTemplateRows: "repeat(auto-fill, 48px)",
+        gridTemplateColumns: "repeat(24, 1fr)",
+        gridGap: "8px",
+        minHeight: "480px",
+        backgroundColor: "#c7c7c7"
+      }
+    }
+  },
+  settings: [
+    {
+      tab: "Layout",
+      label: "Grid",
+      inspectors: [
+        {
+          type: "grid"
+        }
+      ]
+    }
+  ]
+};
+var grid_default = Grid;
+
 // src/elements/text.tsx
-var React3 = __toESM(require("react"));
-var Text = React3.forwardRef((props, ref) => {
+var React4 = __toESM(require("react"));
+var Text = React4.forwardRef((props, ref) => {
   let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
-  return /* @__PURE__ */ React3.createElement("span", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React4.createElement("span", __spreadProps(__spreadValues({
     ref
   }, rest), {
     contentEditable: true,
@@ -139,18 +228,25 @@ Text.defaultProps = {
   value: "sample text",
   tag: "span"
 };
-var schema3 = {
+var schema4 = {
   type: "text",
-  inspectors: [
-    {
-      binding: "data",
-      key: "value",
-      componentType: "textarea"
-    },
+  title: "Text Settings",
+  settings: [
     {
-      binding: "style",
-      key: "color",
-      componentType: "color"
+      tab: "General",
+      label: "Text",
+      inspectors: [
+        {
+          binding: "data",
+          key: "value",
+          type: "textarea"
+        },
+        {
+          binding: "style",
+          key: "color",
+          type: "color"
+        }
+      ]
     }
   ]
 };
@@ -168,14 +264,27 @@ var elements = {
   },
   Text: {
     Component: text_default,
+    schema: schema4
+  },
+  Grid: {
+    Component: grid_default,
     schema: schema3
   }
 };
 var elements_default = elements;
 
+// src/utils/css.ts
+var shortCssObject = (css) => {
+  return {
+    "@desktop": css[`@desktop`],
+    "@tablet": css[`@tablet`],
+    "@mobile": css[`@mobile`]
+  };
+};
+
 // src/renderer.tsx
 var import_core = require("@weaverse/core");
-var React4 = __toESM(require("react"));
+var React5 = __toESM(require("react"));
 var createRootContext = (configs) => {
   const rootContext = new import_core.Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
@@ -188,8 +297,8 @@ var WeaverseRoot = ({
   defaultData
 }) => {
   var _a, _b, _c;
-  let [, setData] = React4.useState(context.projectData);
-  React4.useEffect(() => {
+  let [, setData] = React5.useState(context.projectData);
+  React5.useEffect(() => {
     let handleUpdate = () => {
       setData(__spreadValues({}, context.projectData));
     };
@@ -204,18 +313,18 @@ var WeaverseRoot = ({
     context.initProjectItemData();
   }
   let handleProps = ((_c = context == null ? void 0 : context.studioBridge) == null ? void 0 : _c.handleProps) || {};
-  return /* @__PURE__ */ React4.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React5.createElement("div", __spreadValues({
     className: `weaverse-root`,
     id: "weaverse-root"
-  }, handleProps), /* @__PURE__ */ React4.createElement(RenderItem, {
+  }, handleProps), /* @__PURE__ */ React5.createElement(RenderItem, {
     itemId: context.projectData.rootId || 0,
     context
   }));
 };
 var Item = ({ itemInstance, elementInstances, context }) => {
-  let [data, setData] = React4.useState(itemInstance.data);
+  let [data, setData] = React5.useState(itemInstance.data);
   let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));
     };
@@ -231,7 +340,8 @@ var Item = ({ itemInstance, elementInstances, context }) => {
   }, []);
   let realClassName = className;
   if (css) {
-    let selector = context.stitchesInstance.css(css)().className;
+    let formattedCss = shortCssObject(css);
+    let selector = context.stitchesInstance.css(formattedCss)().className;
     realClassName = realClassName ? `${selector} ${realClassName}` : selector;
   }
   let element = elementInstances.get(type) || elementInstances.get("base");
@@ -240,12 +350,12 @@ var Item = ({ itemInstance, elementInstances, context }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = itemInstance.ref;
     }
-    return /* @__PURE__ */ React4.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React5.createElement(Component, __spreadProps(__spreadValues({
       key: id,
       "data-wv-id": id
     }, rest), {
       className: realClassName
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React4.createElement(RenderItem, {
+    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React5.createElement(RenderItem, {
       key: childId,
       itemId: childId,
       context
@@ -260,13 +370,13 @@ var RenderItem = ({
   let { itemInstances, elementInstances } = context;
   let itemInstance = itemInstances.get(itemId);
   if (itemInstance) {
-    return /* @__PURE__ */ React4.createElement(Item, {
+    return /* @__PURE__ */ React5.createElement(Item, {
       itemInstance,
       elementInstances,
       context
     });
   }
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null);
 };
 
 // src/index.ts

package/dist/index.mjs

@@ -43,29 +43,70 @@ BaseElement.defaultProps = {
   style: {}
 };
 var schema = {
-  type: "base"
+  type: "base",
+  title: "Base",
+  settings: []
 };
 var base_default = BaseElement;
 
 // src/elements/button.tsx
 import * as React2 from "react";
 var Button = React2.forwardRef((props, ref) => {
+  const _a = props, { style, buttonType, css } = _a, rest = __objRest(_a, ["style", "buttonType", "css"]);
   return /* @__PURE__ */ React2.createElement("button", __spreadValues({
-    ref
-  }, props), props.value);
+    ref,
+    style
+  }, rest), props.value);
 });
 Button.defaultProps = {
-  value: "Click me",
-  style: {
-    borderRadius: "9999px",
-    fontSize: "13px",
-    padding: "10px 15px"
-  }
+  value: "Click me"
 };
 var schema2 = {
   title: "Button",
   type: "button",
   settings: [
+    {
+      tab: "Settings",
+      label: "Alignment",
+      inspectors: [
+        {
+          binding: "style",
+          type: "alignment"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Spacing",
+      inspectors: [
+        {
+          binding: "style",
+          type: "spacing"
+        }
+      ]
+    },
+    {
+      tab: "Settings",
+      label: "Overlay",
+      inspectors: [
+        {
+          binding: "data",
+          key: "applyOverlay",
+          label: "Apply Overlay",
+          type: "switch"
+        },
+        {
+          binding: "data",
+          key: "buttonType",
+          label: "Button Type",
+          type: "select",
+          options: [
+            { value: 1, label: "One" },
+            { value: 2, label: "Two" }
+          ]
+        }
+      ]
+    },
     {
       tab: "Settings",
       label: "Group 1",
@@ -73,12 +114,14 @@ var schema2 = {
         {
           binding: "data",
           key: "value",
-          componentType: "textarea"
+          type: "textarea",
+          label: "",
+          default: ""
         },
         {
           binding: "style",
           key: "backgroundColor",
-          componentType: "color"
+          type: "color"
         }
       ]
     },
@@ -89,19 +132,65 @@ var schema2 = {
         {
           binding: "style",
           key: "color",
-          componentType: "color"
+          type: "color"
         }
       ]
     }
-  ]
+  ],
+  toolbar: [],
+  data: {
+    css: {
+      "@desktop": {
+        borderRadius: "9999px",
+        fontSize: "13px",
+        padding: "10px 15px"
+      }
+    }
+  }
 };
 var button_default = Button;
 
+// src/elements/grid.tsx
+import React3, { forwardRef as forwardRef2 } from "react";
+var Grid = forwardRef2((props, ref) => {
+  return /* @__PURE__ */ React3.createElement("div", __spreadValues({
+    ref
+  }, props));
+});
+var schema3 = {
+  title: "Grid",
+  type: "grid",
+  data: {
+    css: {
+      "@desktop": {
+        display: "grid",
+        gridTemplateRows: "repeat(auto-fill, 48px)",
+        gridTemplateColumns: "repeat(24, 1fr)",
+        gridGap: "8px",
+        minHeight: "480px",
+        backgroundColor: "#c7c7c7"
+      }
+    }
+  },
+  settings: [
+    {
+      tab: "Layout",
+      label: "Grid",
+      inspectors: [
+        {
+          type: "grid"
+        }
+      ]
+    }
+  ]
+};
+var grid_default = Grid;
+
 // src/elements/text.tsx
-import * as React3 from "react";
-var Text = React3.forwardRef((props, ref) => {
+import * as React4 from "react";
+var Text = React4.forwardRef((props, ref) => {
   let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
-  return /* @__PURE__ */ React3.createElement("span", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React4.createElement("span", __spreadProps(__spreadValues({
     ref
   }, rest), {
     contentEditable: true,
@@ -112,18 +201,25 @@ Text.defaultProps = {
   value: "sample text",
   tag: "span"
 };
-var schema3 = {
+var schema4 = {
   type: "text",
-  inspectors: [
-    {
-      binding: "data",
-      key: "value",
-      componentType: "textarea"
-    },
+  title: "Text Settings",
+  settings: [
     {
-      binding: "style",
-      key: "color",
-      componentType: "color"
+      tab: "General",
+      label: "Text",
+      inspectors: [
+        {
+          binding: "data",
+          key: "value",
+          type: "textarea"
+        },
+        {
+          binding: "style",
+          key: "color",
+          type: "color"
+        }
+      ]
     }
   ]
 };
@@ -141,17 +237,30 @@ var elements = {
   },
   Text: {
     Component: text_default,
+    schema: schema4
+  },
+  Grid: {
+    Component: grid_default,
     schema: schema3
   }
 };
 var elements_default = elements;
 
+// src/utils/css.ts
+var shortCssObject = (css) => {
+  return {
+    "@desktop": css[`@desktop`],
+    "@tablet": css[`@tablet`],
+    "@mobile": css[`@mobile`]
+  };
+};
+
 // src/renderer.tsx
 import {
   isBrowser,
   Weaverse
 } from "@weaverse/core";
-import * as React4 from "react";
+import * as React5 from "react";
 var createRootContext = (configs) => {
   const rootContext = new Weaverse(configs);
   Object.keys(elements_default).forEach((key) => {
@@ -164,8 +273,8 @@ var WeaverseRoot = ({
   defaultData
 }) => {
   var _a, _b, _c;
-  let [, setData] = React4.useState(context.projectData);
-  React4.useEffect(() => {
+  let [, setData] = React5.useState(context.projectData);
+  React5.useEffect(() => {
     let handleUpdate = () => {
       setData(__spreadValues({}, context.projectData));
     };
@@ -180,18 +289,18 @@ var WeaverseRoot = ({
     context.initProjectItemData();
   }
   let handleProps = ((_c = context == null ? void 0 : context.studioBridge) == null ? void 0 : _c.handleProps) || {};
-  return /* @__PURE__ */ React4.createElement("div", __spreadValues({
+  return /* @__PURE__ */ React5.createElement("div", __spreadValues({
     className: `weaverse-root`,
     id: "weaverse-root"
-  }, handleProps), /* @__PURE__ */ React4.createElement(RenderItem, {
+  }, handleProps), /* @__PURE__ */ React5.createElement(RenderItem, {
     itemId: context.projectData.rootId || 0,
     context
   }));
 };
 var Item = ({ itemInstance, elementInstances, context }) => {
-  let [data, setData] = React4.useState(itemInstance.data);
+  let [data, setData] = React5.useState(itemInstance.data);
   let _a = data, { id, type, childIds, css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     let handleUpdate = (update) => {
       setData(__spreadValues({}, update));
     };
@@ -207,7 +316,8 @@ var Item = ({ itemInstance, elementInstances, context }) => {
   }, []);
   let realClassName = className;
   if (css) {
-    let selector = context.stitchesInstance.css(css)().className;
+    let formattedCss = shortCssObject(css);
+    let selector = context.stitchesInstance.css(formattedCss)().className;
     realClassName = realClassName ? `${selector} ${realClassName}` : selector;
   }
   let element = elementInstances.get(type) || elementInstances.get("base");
@@ -216,12 +326,12 @@ var Item = ({ itemInstance, elementInstances, context }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = itemInstance.ref;
     }
-    return /* @__PURE__ */ React4.createElement(Component, __spreadProps(__spreadValues({
+    return /* @__PURE__ */ React5.createElement(Component, __spreadProps(__spreadValues({
       key: id,
       "data-wv-id": id
     }, rest), {
       className: realClassName
-    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React4.createElement(RenderItem, {
+    }), Array.isArray(childIds) && childIds.map((childId) => /* @__PURE__ */ React5.createElement(RenderItem, {
       key: childId,
       itemId: childId,
       context
@@ -236,13 +346,13 @@ var RenderItem = ({
   let { itemInstances, elementInstances } = context;
   let itemInstance = itemInstances.get(itemId);
   if (itemInstance) {
-    return /* @__PURE__ */ React4.createElement(Item, {
+    return /* @__PURE__ */ React5.createElement(Item, {
       itemInstance,
       elementInstances,
       context
     });
   }
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null);
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null);
 };
 
 // src/index.ts

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.3.7",
+  "version": "0.4.2",
   "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.3.6"
+    "@weaverse/core": "^0.4.2"
   }
 }