@weaverse/react 0.6.20 → 0.6.23

package/dist/index.js

@@ -62,7 +62,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/context.ts
 var import_core = require("@weaverse/core");
-var import_react10 = require("react");
+var import_react13 = require("react");
 
 // src/elements/button.tsx
 var React = __toESM(require("react"));
@@ -411,12 +411,16 @@ var import_react8 = __toESM(require("react"));
 var Placeholder = (0, import_react8.forwardRef)((props, ref) => {
   let _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
   let style = {
+    position: "absolute",
     height: "100%",
+    width: "100%",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    color: "#374151"
+    color: "#374151",
+    pointerEvents: "none",
+    zIndex: 1
   };
   return /* @__PURE__ */ import_react8.default.createElement("div", __spreadValues({
     style,
@@ -507,6 +511,123 @@ Instagram.defaultProps = {
 };
 var instagram_default = Instagram;
 
+// src/elements/accordion/index.tsx
+var import_react10 = __toESM(require("react"));
+var AccordionContext = (0, import_react10.createContext)({
+  active: null,
+  setActive: () => {
+  }
+});
+var Accordion = (0, import_react10.forwardRef)((props, ref) => {
+  const _a = props, { items, children } = _a, rest = __objRest(_a, ["items", "children"]);
+  const [active, setActive] = (0, import_react10.useState)(null);
+  const setOpenAccordion = (id) => {
+    if (id === active) {
+      setActive(null);
+    } else {
+      setActive(id);
+    }
+  };
+  console.info("9779 active", active);
+  return /* @__PURE__ */ import_react10.default.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ import_react10.default.createElement(AccordionContext.Provider, {
+    value: { active, setActive: setOpenAccordion }
+  }, children));
+});
+Accordion.defaultProps = {
+  items: [
+    {
+      id: 1,
+      headerText: "Header 1",
+      childrenId: true
+    },
+    {
+      id: 2,
+      headerText: "Header 2"
+    }
+  ],
+  css: {
+    "@desktop": {
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+      ".wv-accordion-header": {
+        borderRadius: 4,
+        padding: 4,
+        marginBottom: 4,
+        backgroundColor: "#aaa",
+        "&.active": {
+          color: "blue"
+        },
+        '&.active + [data-wv-type="accordion.content"]': {
+          display: "grid"
+        }
+      }
+    }
+  }
+};
+var accordion_default = Accordion;
+
+// src/elements/accordion/AccordionWrapper.tsx
+var import_react11 = __toESM(require("react"));
+var AccordionWrapper = (0, import_react11.forwardRef)((props, ref) => {
+  const _a = props, { wrapperId, headerText, children } = _a, rest = __objRest(_a, ["wrapperId", "headerText", "children"]);
+  const { active, setActive } = (0, import_react11.useContext)(AccordionContext);
+  return /* @__PURE__ */ import_react11.default.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ import_react11.default.createElement("div", {
+    onClick: () => setActive(wrapperId),
+    className: `wv-accordion-header ${active === wrapperId ? "active" : ""}`
+  }, headerText, " #", wrapperId), children);
+});
+AccordionWrapper.defaultProps = {
+  wrapperId: 1,
+  headerText: "Header 1",
+  css: {
+    "@desktop": {
+      maxHeight: "100%"
+    }
+  }
+};
+var AccordionWrapper_default = AccordionWrapper;
+
+// src/elements/accordion/AccordionContent.tsx
+var import_react12 = __toESM(require("react"));
+var AccordionContent = (0, import_react12.forwardRef)((props, ref) => {
+  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"
+  };
+  return /* @__PURE__ */ import_react12.default.createElement("div", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    style
+  }), import_react12.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react12.default.createElement(Placeholder_default, {
+    element: "Accordion"
+  }, "Item Content"));
+});
+AccordionContent.defaultProps = {
+  rows: 2,
+  columns: 12,
+  gap: 4,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      width: "100%",
+      backgroundColor: "#DDD",
+      display: "none",
+      gridTemplate: "repeat(var(--rows),var(--row-size))/repeat(var(--columns),1fr)",
+      gridGap: "var(--gap)",
+      borderRadius: 4
+    }
+  }
+};
+var AccordionContent_default = AccordionContent;
+
 // src/elements/index.ts
 var elements = {
   Countdown: {
@@ -544,6 +665,18 @@ var elements = {
   Video: {
     Component: video_default,
     type: "video"
+  },
+  Accordion: {
+    Component: accordion_default,
+    type: "accordion"
+  },
+  AccordionWrapper: {
+    Component: AccordionWrapper_default,
+    type: "accordion.wrapper"
+  },
+  AccordionContent: {
+    Component: AccordionContent_default,
+    type: "accordion.content"
   }
 };
 var elements_default = elements;
@@ -556,13 +689,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = (0, import_react10.createContext)({});
+var WeaverseContext = (0, import_react13.createContext)({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 var import_core2 = require("@weaverse/core");
-var import_react11 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -590,9 +723,9 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = (0, import_react11.useState)(context.projectData);
-  let rootRef = (0, import_react11.useRef)();
-  (0, import_react11.useEffect)(() => {
+  let [, setData] = (0, import_react14.useState)(context.projectData);
+  let rootRef = (0, import_react14.useRef)();
+  (0, import_react14.useEffect)(() => {
     let update = () => setData({});
     context.subscribe(update);
     if (context.projectData) {
@@ -605,21 +738,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 /* @__PURE__ */ import_react11.default.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ import_react14.default.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ import_react11.default.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ import_react14.default.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
+  }, /* @__PURE__ */ import_react14.default.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = (0, import_react11.useContext)(WeaverseContext);
-  let [data, setData] = (0, import_react11.useState)(instance.data);
+  let { stitchesInstance, elementInstances } = (0, import_react14.useContext)(WeaverseContext);
+  let [data, setData] = (0, import_react14.useState)(instance.data);
   let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     var _a2;
     let update = (data2) => setData(__spreadValues({}, data2));
     instance.subscribe(update);
@@ -639,12 +772,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ import_react11.default.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ import_react14.default.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react11.default.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ import_react14.default.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -652,15 +785,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = (0, import_react11.useContext)(WeaverseContext);
+  let context = (0, import_react14.useContext)(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ import_react11.default.createElement("div", {
+    return /* @__PURE__ */ import_react14.default.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ import_react11.default.createElement(ItemComponent, {
+  return /* @__PURE__ */ import_react14.default.createElement(ItemComponent, {
     instance
   });
 };

package/dist/index.mjs

@@ -32,7 +32,7 @@ var __objRest = (source, exclude) => {
 
 // src/context.ts
 import { Weaverse } from "@weaverse/core";
-import { createContext } from "react";
+import { createContext as createContext2 } from "react";
 
 // src/elements/button.tsx
 import * as React from "react";
@@ -381,12 +381,16 @@ import React10, { forwardRef as forwardRef8 } from "react";
 var Placeholder = forwardRef8((props, ref) => {
   let _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
   let style = {
+    position: "absolute",
     height: "100%",
+    width: "100%",
     display: "flex",
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    color: "#374151"
+    color: "#374151",
+    pointerEvents: "none",
+    zIndex: 1
   };
   return /* @__PURE__ */ React10.createElement("div", __spreadValues({
     style,
@@ -477,6 +481,123 @@ Instagram.defaultProps = {
 };
 var instagram_default = Instagram;
 
+// src/elements/accordion/index.tsx
+import React12, { createContext, forwardRef as forwardRef10, useState as useState2 } from "react";
+var AccordionContext = createContext({
+  active: null,
+  setActive: () => {
+  }
+});
+var Accordion = forwardRef10((props, ref) => {
+  const _a = props, { items, children } = _a, rest = __objRest(_a, ["items", "children"]);
+  const [active, setActive] = useState2(null);
+  const setOpenAccordion = (id) => {
+    if (id === active) {
+      setActive(null);
+    } else {
+      setActive(id);
+    }
+  };
+  console.info("9779 active", active);
+  return /* @__PURE__ */ React12.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ React12.createElement(AccordionContext.Provider, {
+    value: { active, setActive: setOpenAccordion }
+  }, children));
+});
+Accordion.defaultProps = {
+  items: [
+    {
+      id: 1,
+      headerText: "Header 1",
+      childrenId: true
+    },
+    {
+      id: 2,
+      headerText: "Header 2"
+    }
+  ],
+  css: {
+    "@desktop": {
+      display: "flex",
+      flexDirection: "column",
+      gap: 4,
+      ".wv-accordion-header": {
+        borderRadius: 4,
+        padding: 4,
+        marginBottom: 4,
+        backgroundColor: "#aaa",
+        "&.active": {
+          color: "blue"
+        },
+        '&.active + [data-wv-type="accordion.content"]': {
+          display: "grid"
+        }
+      }
+    }
+  }
+};
+var accordion_default = Accordion;
+
+// src/elements/accordion/AccordionWrapper.tsx
+import React13, { forwardRef as forwardRef11, useContext as useContext4 } from "react";
+var AccordionWrapper = forwardRef11((props, ref) => {
+  const _a = props, { wrapperId, headerText, children } = _a, rest = __objRest(_a, ["wrapperId", "headerText", "children"]);
+  const { active, setActive } = useContext4(AccordionContext);
+  return /* @__PURE__ */ React13.createElement("div", __spreadValues({
+    ref
+  }, rest), /* @__PURE__ */ React13.createElement("div", {
+    onClick: () => setActive(wrapperId),
+    className: `wv-accordion-header ${active === wrapperId ? "active" : ""}`
+  }, headerText, " #", wrapperId), children);
+});
+AccordionWrapper.defaultProps = {
+  wrapperId: 1,
+  headerText: "Header 1",
+  css: {
+    "@desktop": {
+      maxHeight: "100%"
+    }
+  }
+};
+var AccordionWrapper_default = AccordionWrapper;
+
+// src/elements/accordion/AccordionContent.tsx
+import React14, { forwardRef as forwardRef12 } from "react";
+var AccordionContent = forwardRef12((props, ref) => {
+  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"
+  };
+  return /* @__PURE__ */ React14.createElement("div", __spreadProps(__spreadValues({
+    ref
+  }, rest), {
+    style
+  }), React14.Children.count(children) > 0 ? children : /* @__PURE__ */ React14.createElement(Placeholder_default, {
+    element: "Accordion"
+  }, "Item Content"));
+});
+AccordionContent.defaultProps = {
+  rows: 2,
+  columns: 12,
+  gap: 4,
+  rowSize: 48,
+  css: {
+    "@desktop": {
+      width: "100%",
+      backgroundColor: "#DDD",
+      display: "none",
+      gridTemplate: "repeat(var(--rows),var(--row-size))/repeat(var(--columns),1fr)",
+      gridGap: "var(--gap)",
+      borderRadius: 4
+    }
+  }
+};
+var AccordionContent_default = AccordionContent;
+
 // src/elements/index.ts
 var elements = {
   Countdown: {
@@ -514,6 +635,18 @@ var elements = {
   Video: {
     Component: video_default,
     type: "video"
+  },
+  Accordion: {
+    Component: accordion_default,
+    type: "accordion"
+  },
+  AccordionWrapper: {
+    Component: AccordionWrapper_default,
+    type: "accordion.wrapper"
+  },
+  AccordionContent: {
+    Component: AccordionContent_default,
+    type: "accordion.content"
   }
 };
 var elements_default = elements;
@@ -526,13 +659,13 @@ var createRootContext = (configs) => {
   });
   return rootContext;
 };
-var WeaverseContext = createContext({});
+var WeaverseContext = createContext2({});
 var WeaverseContextProvider = WeaverseContext.Provider;
 var WeaverseContextConsumer = WeaverseContext.Consumer;
 
 // src/renderer.tsx
 import { isBrowser } from "@weaverse/core";
-import React12, { useContext as useContext4, useEffect as useEffect3, useRef, useState as useState2 } from "react";
+import React15, { useContext as useContext5, useEffect as useEffect3, useRef, useState as useState3 } from "react";
 
 // src/utils/index.ts
 var shortCssObject = (css) => {
@@ -560,7 +693,7 @@ function generateItemClass(instance, stitchesInstance) {
 // src/renderer.tsx
 var WeaverseRoot = ({ context }) => {
   var _a;
-  let [, setData] = useState2(context.projectData);
+  let [, setData] = useState3(context.projectData);
   let rootRef = useRef();
   useEffect3(() => {
     let update = () => setData({});
@@ -575,19 +708,19 @@ var WeaverseRoot = ({ context }) => {
   }, []);
   let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
   let themeClass = context.stitchesInstance.theme.className;
-  return /* @__PURE__ */ React12.createElement("div", __spreadProps(__spreadValues({
+  return /* @__PURE__ */ React15.createElement("div", __spreadProps(__spreadValues({
     className: `weaverse-content-root ${themeClass}`
   }, eventHandlers), {
     ref: rootRef
-  }), /* @__PURE__ */ React12.createElement(WeaverseContextProvider, {
+  }), /* @__PURE__ */ React15.createElement(WeaverseContextProvider, {
     value: context
-  }, /* @__PURE__ */ React12.createElement(ItemInstance, {
+  }, /* @__PURE__ */ React15.createElement(ItemInstance, {
     id: context.projectData.rootId || 0
   })));
 };
 var ItemComponent = ({ instance }) => {
-  let { stitchesInstance, elementInstances } = useContext4(WeaverseContext);
-  let [data, setData] = useState2(instance.data);
+  let { stitchesInstance, elementInstances } = useContext5(WeaverseContext);
+  let [data, setData] = useState3(instance.data);
   let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
   useEffect3(() => {
     var _a2;
@@ -609,12 +742,12 @@ var ItemComponent = ({ instance }) => {
     if (Component.$$typeof === Symbol.for("react.forward_ref")) {
       rest.ref = instance.ref;
     }
-    return /* @__PURE__ */ React12.createElement(Component, __spreadValues({
+    return /* @__PURE__ */ React15.createElement(Component, __spreadValues({
       key: id,
       "data-wv-type": type,
       "data-wv-id": id,
       className: generateItemClass(instance, stitchesInstance)
-    }, rest), childIds.map((id2) => /* @__PURE__ */ React12.createElement(ItemInstance, {
+    }, rest), childIds.map((id2) => /* @__PURE__ */ React15.createElement(ItemInstance, {
       key: id2,
       id: id2
     })));
@@ -622,15 +755,15 @@ var ItemComponent = ({ instance }) => {
   return null;
 };
 var ItemInstance = ({ id }) => {
-  let context = useContext4(WeaverseContext);
+  let context = useContext5(WeaverseContext);
   let { itemInstances } = context;
   let instance = itemInstances.get(id);
   if (!instance) {
-    return /* @__PURE__ */ React12.createElement("div", {
+    return /* @__PURE__ */ React15.createElement("div", {
       style: { display: "none" }
     }, "Item instance ", id, " not found");
   }
-  return /* @__PURE__ */ React12.createElement(ItemComponent, {
+  return /* @__PURE__ */ React15.createElement(ItemComponent, {
     instance
   });
 };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.20",
+  "version": "0.6.23",
   "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.20"
+    "@weaverse/core": "0.6.23"
   }
 }