@weaverse/react 0.6.27 → 0.6.30

package/dist/index.js

@@ -62,7 +62,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react13 = require("react");
+var import_react16 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -562,7 +562,6 @@ var Accordion = (0, import_react10.forwardRef)((props, ref) => {
       setActive(id);
     }
   };
-  console.info("9779 active", active);
   return /* @__PURE__ */ import_react10.default.createElement("div", __spreadValues({
     ref
   }, rest), /* @__PURE__ */ import_react10.default.createElement(AccordionContext.Provider, {
@@ -660,13 +659,152 @@ AccordionContent.defaultProps = {
       gap: "var(--gap)",
       overflow: "hidden",
       maxHeight: 0,
-      transition: "all 0.3s ease-in-out",
+      transition: "all var(--transition-duration, 0.3s) ease-in-out",
       borderRadius: 4
     }
   }
 };
 var AccordionContent_default = AccordionContent;
 
+// src/elements/tab/index.tsx
+var import_react14 = __toESM(require("react"));
+
+// src/elements/tab/TabHeaderWrapper.tsx
+var import_react13 = __toESM(require("react"));
+function TabHeader(props) {
+  const { wvId } = props;
+  const { active, setActive } = (0, import_react13.useContext)(TabContext);
+  const { itemInstances } = (0, import_react13.useContext)(WeaverseContext);
+  const instance = itemInstances.get(wvId);
+  let [data, setData] = (0, import_react13.useState)(instance.data);
+  (0, import_react13.useEffect)(() => {
+    let update = (data2) => setData(__spreadValues({}, data2));
+    instance.subscribe(update);
+  }, []);
+  const text = data.headerText;
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
+    onClick: () => setActive(wvId),
+    className: `wv-tab-header${active === wvId ? " active" : ""}`
+  }, text);
+}
+function TabHeaderWrapper(props) {
+  const { itemInstances } = (0, import_react13.useContext)(WeaverseContext);
+  const instance = itemInstances.get(props.wvId);
+  const data = instance.data;
+  const childIds = data.childIds;
+  return /* @__PURE__ */ import_react13.default.createElement("div", {
+    className: "wv-tab-headerWrapper"
+  }, childIds.map((id) => /* @__PURE__ */ import_react13.default.createElement(TabHeader, {
+    key: id,
+    wvId: id
+  })));
+}
+
+// src/elements/tab/index.tsx
+var TabContext = (0, import_react14.createContext)({
+  active: null,
+  setActive: () => {
+  }
+});
+var Tab = (0, import_react14.forwardRef)((props, ref) => {
+  var _b, _c, _d;
+  const wvId = props["data-wv-id"];
+  const _a = props, { items, children } = _a, rest = __objRest(_a, ["items", "children"]);
+  const defaultActive = (_d = (_c = (_b = import_react14.default.Children.toArray(children)) == null ? void 0 : _b[0]) == null ? void 0 : _c.props) == null ? void 0 : _d.id;
+  const [active, setActive] = (0, import_react14.useState)(defaultActive);
+  const setOpenTab = (id) => {
+    if (id === active) {
+      setActive(null);
+    } else {
+      setActive(id);
+    }
+  };
+  return /* @__PURE__ */ import_react14.default.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ import_react14.default.createElement(TabContext.Provider, {
+    value: { active, setActive: setOpenTab }
+  }, /* @__PURE__ */ import_react14.default.createElement(TabHeaderWrapper, {
+    wvId
+  }), children));
+});
+Tab.defaultProps = {
+  items: [
+    {
+      headerText: "Header 1"
+    },
+    {
+      headerText: "Header 2"
+    },
+    {
+      headerText: "Header 2"
+    }
+  ],
+  css: {
+    "@desktop": {
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+      "& .wv-tab-headerWrapper": {
+        width: "100%",
+        display: "flex",
+        marginBottom: 10
+      },
+      "& .wv-tab-header": {
+        backgroundColor: "#f0f2f3",
+        padding: "10px 16px",
+        cursor: "pointer",
+        "&.active": {
+          backgroundColor: "#0F71FF",
+          color: "#fff"
+        }
+      }
+    }
+  }
+};
+var tab_default = Tab;
+
+// src/elements/tab/TabContent.tsx
+var import_react15 = __toESM(require("react"));
+var TabContent = (0, import_react15.forwardRef)((props, ref) => {
+  const { active } = (0, import_react15.useContext)(TabContext);
+  const wvId = props["data-wv-id"];
+  const _a = props, { rows, columns, gap, rowSize, children } = _a, rest = __objRest(_a, ["rows", "columns", "gap", "rowSize", "children"]);
+  let style = {
+    "--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))",
+    "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
+    "--content-active": active === wvId ? "grid" : "none"
+  };
+  return /* @__PURE__ */ import_react15.default.createElement("div", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    style
+  }), import_react15.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react15.default.createElement(Placeholder_default, {
+    element: "Tab"
+  }, "Item Content"));
+});
+TabContent.defaultProps = {
+  rows: 2,
+  columns: 12,
+  gap: 4,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      width: "100%",
+      maxWidth: "var(--grid-size)",
+      display: "var(--content-active, none)",
+      gridTemplateRows: "repeat(var(--rows), var(--row-size))",
+      gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
+      gap: "var(--gap)",
+      borderRadius: 4
+    }
+  }
+};
+var TabContent_default = TabContent;
+
 // src/elements/index.ts
 var elements = {
   Countdown: {
@@ -716,6 +854,14 @@ var elements = {
   AccordionContent: {
     Component: AccordionContent_default,
     type: "accordion.content"
+  },
+  Tab: {
+    Component: tab_default,
+    type: "tab"
+  },
+  TabContent: {
+    Component: TabContent_default,
+    type: "tab.content"
   }
 };
 var elements_default = elements;
@@ -728,13 +874,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react13.createContext)({});
+var WeaverseContext = (0, import_react16.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react14 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -762,10 +908,10 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a, _b;
-  let [, setData] = (0, import_react14.useState)(context.projectData);
-  let rootRef = (0, import_react14.useRef)();
+  let [, setData] = (0, import_react17.useState)(context.projectData);
+  let rootRef = (0, import_react17.useRef)();
   let update = () => setData({});
-  (0, import_react14.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     context.subscribe(update);
     context.contentRootElement = rootRef.current;
     return () => {
@@ -774,21 +920,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 ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react14.default.createElement("div", __spreadProps(__spreadValues({
+  return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react17.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ import_react14.default.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ import_react17.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react14.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
     id: context.projectData.rootId
   }))) : null;
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react14.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react14.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react17.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react17.useState)(instance.data);
   let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react17.useEffect)(() => {
     var _a2;
     let update = (data2) => setData(__spreadValues({}, data2));
     instance.subscribe(update);
@@ -808,12 +954,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react14.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react17.default.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react14.default.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -821,15 +967,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react14.useContext)(WeaverseContext);
+  let context = (0, import_react17.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react14.default.createElement("div", {
+    return /* @__PURE__ */ import_react17.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react14.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react17.default.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.27",
+  "version": "0.6.30",
   "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.27"
+    "@weaverse/core": "0.6.30"
   }
 }