@weaverse/react 0.6.24 → 0.6.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -62,7 +62,7 @@ module.exports = __toCommonJS(src_exports);
62
62
 
63
63
  // src/context.ts
64
64
  var import_core = require("@weaverse/core");
65
- var import_react13 = require("react");
65
+ var import_react16 = require("react");
66
66
 
67
67
  // src/elements/button.tsx
68
68
  var React = __toESM(require("react"));
@@ -241,23 +241,58 @@ var countdown_default = Countdown;
241
241
  // src/elements/image.tsx
242
242
  var import_react4 = __toESM(require("react"));
243
243
  var Image = import_react4.default.forwardRef((props, ref) => {
244
- let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
245
- return /* @__PURE__ */ import_react4.default.createElement("div", __spreadValues({
244
+ let { isDesignMode } = (0, import_react4.useContext)(WeaverseContext);
245
+ let _a = props, {
246
+ src,
247
+ alt,
248
+ objectFit,
249
+ objectPosition,
250
+ onClickAction,
251
+ openLinkInNewTab
252
+ } = _a, rest = __objRest(_a, [
253
+ "src",
254
+ "alt",
255
+ "objectFit",
256
+ "objectPosition",
257
+ "onClickAction",
258
+ "openLinkInNewTab"
259
+ ]);
260
+ let style = {
261
+ "--wv-img-object-fit": objectFit,
262
+ "--wv-img-object-position": objectPosition
263
+ };
264
+ let handleClick = () => {
265
+ if (isDesignMode) {
266
+ return console.log("Click action:", onClickAction);
267
+ }
268
+ if (onClickAction) {
269
+ console.log("TODO: click action:", onClickAction);
270
+ }
271
+ };
272
+ return /* @__PURE__ */ import_react4.default.createElement("div", __spreadProps(__spreadValues({
246
273
  ref
247
- }, rest), /* @__PURE__ */ import_react4.default.createElement("img", {
274
+ }, rest), {
275
+ style,
276
+ onClick: handleClick
277
+ }), /* @__PURE__ */ import_react4.default.createElement("img", {
248
278
  alt,
249
279
  src
250
280
  }));
251
281
  });
252
282
  Image.defaultProps = {
253
283
  src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
254
- alt: "weaverse image element",
284
+ alt: "Image alt text",
285
+ objectFit: "cover",
286
+ objectPosition: "center",
287
+ onClickAction: "open-lightbox",
288
+ openLinkInNewTab: false,
255
289
  css: {
256
290
  "@desktop": {
257
291
  img: {
258
292
  width: "100%",
259
293
  height: "100%",
260
- objectFit: "cover"
294
+ objectFit: "var(--wv-img-object-fit, cover)",
295
+ objectPosition: "var(--wv-img-object-position, center)"
261
296
  }
262
297
  }
263
298
  }
@@ -434,10 +469,9 @@ var Placeholder_default = Placeholder;
434
469
  // src/elements/instagram.tsx
435
470
  var INSTAGRAM_API = "https://graph.instagram.com";
436
471
  var Instagram = (0, import_react9.forwardRef)((props, ref) => {
437
- const _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
438
- const [media, setMedia] = (0, import_react9.useState)([]);
439
- const [error, setError] = (0, import_react9.useState)(null);
440
- let { isDesignMode } = (0, import_react9.useContext)(WeaverseContext);
472
+ let _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
473
+ let [media, setMedia] = (0, import_react9.useState)([]);
474
+ let [error, setError] = (0, import_react9.useState)(null);
441
475
  (0, import_react9.useEffect)(() => {
442
476
  if (token) {
443
477
  let params = new URLSearchParams({
@@ -463,7 +497,7 @@ var Instagram = (0, import_react9.forwardRef)((props, ref) => {
463
497
  }
464
498
  let style = {
465
499
  "--wv-ig-images-per-row": imagesPerRow,
466
- "--wv-ig-images-gap": gap
500
+ "--wv-ig-images-gap": gap + "px"
467
501
  };
468
502
  return /* @__PURE__ */ import_react9.default.createElement("div", __spreadProps(__spreadValues({
469
503
  ref
@@ -472,15 +506,15 @@ var Instagram = (0, import_react9.forwardRef)((props, ref) => {
472
506
  }), /* @__PURE__ */ import_react9.default.createElement("div", {
473
507
  className: "wv-ig-media-container"
474
508
  }, media.slice(0, numberOfImages).map((item) => {
475
- let linkProps;
476
- if (!isDesignMode) {
477
- linkProps = { href: item.permalink, target: "_blank" };
478
- }
479
- return /* @__PURE__ */ import_react9.default.createElement("a", __spreadValues({
480
- key: item.id
481
- }, linkProps), /* @__PURE__ */ import_react9.default.createElement("img", {
482
- alt: item.caption,
483
- src: item.media_url
509
+ let { id, permalink, caption, media_url } = item;
510
+ return /* @__PURE__ */ import_react9.default.createElement("a", {
511
+ key: id,
512
+ href: permalink,
513
+ target: "_blank",
514
+ rel: "noreferrer"
515
+ }, /* @__PURE__ */ import_react9.default.createElement("img", {
516
+ alt: caption,
517
+ src: media_url
484
518
  }));
485
519
  })));
486
520
  });
@@ -528,7 +562,6 @@ var Accordion = (0, import_react10.forwardRef)((props, ref) => {
528
562
  setActive(id);
529
563
  }
530
564
  };
531
- console.info("9779 active", active);
532
565
  return /* @__PURE__ */ import_react10.default.createElement("div", __spreadValues({
533
566
  ref
534
567
  }, rest), /* @__PURE__ */ import_react10.default.createElement(AccordionContext.Provider, {
@@ -554,14 +587,14 @@ Accordion.defaultProps = {
554
587
  gap: 4,
555
588
  ".wv-accordion-header": {
556
589
  borderRadius: 4,
557
- padding: 4,
590
+ padding: 12,
558
591
  marginBottom: 4,
559
- backgroundColor: "#aaa",
592
+ border: "1px solid #76A9FA",
560
593
  "&.active": {
561
594
  color: "blue"
562
595
  },
563
596
  '&.active + [data-wv-type="accordion.content"]': {
564
- display: "grid"
597
+ maxHeight: "var(--max-height, inherit)"
565
598
  }
566
599
  }
567
600
  }
@@ -572,18 +605,17 @@ var accordion_default = Accordion;
572
605
  // src/elements/accordion/AccordionWrapper.tsx
573
606
  var import_react11 = __toESM(require("react"));
574
607
  var AccordionWrapper = (0, import_react11.forwardRef)((props, ref) => {
575
- const _a = props, { wrapperId, headerText, children } = _a, rest = __objRest(_a, ["wrapperId", "headerText", "children"]);
608
+ const _a = props, { ["data-wv-id"]: wvId, headerText, children } = _a, rest = __objRest(_a, ["data-wv-id", "headerText", "children"]);
576
609
  const { active, setActive } = (0, import_react11.useContext)(AccordionContext);
577
610
  return /* @__PURE__ */ import_react11.default.createElement("div", __spreadValues({
578
611
  ref
579
612
  }, rest), /* @__PURE__ */ import_react11.default.createElement("div", {
580
- onClick: () => setActive(wrapperId),
581
- className: `wv-accordion-header ${active === wrapperId ? "active" : ""}`
582
- }, headerText, " #", wrapperId), children);
613
+ onClick: () => setActive(wvId),
614
+ className: `wv-accordion-header ${active === wvId ? "active" : ""}`
615
+ }, headerText), children);
583
616
  });
584
617
  AccordionWrapper.defaultProps = {
585
- wrapperId: 1,
586
- headerText: "Header 1",
618
+ headerText: "Header text",
587
619
  css: {
588
620
  "@desktop": {
589
621
  maxHeight: "100%"
@@ -601,7 +633,8 @@ var AccordionContent = (0, import_react12.forwardRef)((props, ref) => {
601
633
  "--columns": columns,
602
634
  "--gap": gap + "px",
603
635
  "--row-size": rowSize + "px",
604
- "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
636
+ "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
637
+ "--max-height": rows * rowSize + gap * (rowSize - 1) + "px"
605
638
  };
606
639
  return /* @__PURE__ */ import_react12.default.createElement("div", __spreadProps(__spreadValues({
607
640
  ref
@@ -620,17 +653,158 @@ AccordionContent.defaultProps = {
620
653
  "@desktop": {
621
654
  width: "100%",
622
655
  maxWidth: "var(--grid-size)",
623
- backgroundColor: "#DDD",
624
- display: "none",
656
+ display: "grid",
625
657
  gridTemplateRows: "repeat(var(--rows), var(--row-size))",
626
658
  gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
627
659
  gap: "var(--gap)",
660
+ overflow: "hidden",
661
+ maxHeight: 0,
662
+ transition: "all var(--transition-duration, 0.3s) ease-in-out",
628
663
  borderRadius: 4
629
664
  }
630
665
  }
631
666
  };
632
667
  var AccordionContent_default = AccordionContent;
633
668
 
669
+ // src/elements/tab/index.tsx
670
+ var import_react14 = __toESM(require("react"));
671
+
672
+ // src/elements/tab/TabHeaderWrapper.tsx
673
+ var import_react13 = __toESM(require("react"));
674
+ function TabHeader(props) {
675
+ const { wvId } = props;
676
+ const { active, setActive } = (0, import_react13.useContext)(TabContext);
677
+ const { itemInstances } = (0, import_react13.useContext)(WeaverseContext);
678
+ const instance = itemInstances.get(wvId);
679
+ let [data, setData] = (0, import_react13.useState)(instance.data);
680
+ (0, import_react13.useEffect)(() => {
681
+ let update = (data2) => setData(__spreadValues({}, data2));
682
+ instance.subscribe(update);
683
+ }, []);
684
+ const text = data.headerText;
685
+ return /* @__PURE__ */ import_react13.default.createElement("div", {
686
+ onClick: () => setActive(wvId),
687
+ className: `wv-tab-header${active === wvId ? " active" : ""}`
688
+ }, text);
689
+ }
690
+ function TabHeaderWrapper(props) {
691
+ const { itemInstances } = (0, import_react13.useContext)(WeaverseContext);
692
+ const instance = itemInstances.get(props.wvId);
693
+ const data = instance.data;
694
+ const childIds = data.childIds;
695
+ return /* @__PURE__ */ import_react13.default.createElement("div", {
696
+ className: "wv-tab-headerWrapper"
697
+ }, childIds.map((id) => /* @__PURE__ */ import_react13.default.createElement(TabHeader, {
698
+ key: id,
699
+ wvId: id
700
+ })));
701
+ }
702
+
703
+ // src/elements/tab/index.tsx
704
+ var TabContext = (0, import_react14.createContext)({
705
+ active: null,
706
+ setActive: () => {
707
+ }
708
+ });
709
+ var Tab = (0, import_react14.forwardRef)((props, ref) => {
710
+ var _b, _c, _d;
711
+ const wvId = props["data-wv-id"];
712
+ const _a = props, { items, children } = _a, rest = __objRest(_a, ["items", "children"]);
713
+ 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;
714
+ const [active, setActive] = (0, import_react14.useState)(defaultActive);
715
+ const setOpenTab = (id) => {
716
+ if (id === active) {
717
+ setActive(null);
718
+ } else {
719
+ setActive(id);
720
+ }
721
+ };
722
+ return /* @__PURE__ */ import_react14.default.createElement("div", __spreadValues({
723
+ ref
724
+ }, rest), /* @__PURE__ */ import_react14.default.createElement(TabContext.Provider, {
725
+ value: { active, setActive: setOpenTab }
726
+ }, /* @__PURE__ */ import_react14.default.createElement(TabHeaderWrapper, {
727
+ wvId
728
+ }), children));
729
+ });
730
+ Tab.defaultProps = {
731
+ items: [
732
+ {
733
+ headerText: "Header 1"
734
+ },
735
+ {
736
+ headerText: "Header 2"
737
+ },
738
+ {
739
+ headerText: "Header 2"
740
+ }
741
+ ],
742
+ css: {
743
+ "@desktop": {
744
+ display: "flex",
745
+ flexDirection: "column",
746
+ gap: 4,
747
+ "& .wv-tab-headerWrapper": {
748
+ width: "100%",
749
+ display: "flex",
750
+ marginBottom: 10
751
+ },
752
+ "& .wv-tab-header": {
753
+ backgroundColor: "#f0f2f3",
754
+ padding: "10px 16px",
755
+ cursor: "pointer",
756
+ "&.active": {
757
+ backgroundColor: "#0F71FF",
758
+ color: "#fff"
759
+ }
760
+ }
761
+ }
762
+ }
763
+ };
764
+ var tab_default = Tab;
765
+
766
+ // src/elements/tab/TabContent.tsx
767
+ var import_react15 = __toESM(require("react"));
768
+ var TabContent = (0, import_react15.forwardRef)((props, ref) => {
769
+ const { active } = (0, import_react15.useContext)(TabContext);
770
+ const wvId = props["data-wv-id"];
771
+ const _a = props, { rows, columns, gap, rowSize, children } = _a, rest = __objRest(_a, ["rows", "columns", "gap", "rowSize", "children"]);
772
+ let style = {
773
+ "--rows": rows,
774
+ "--columns": columns,
775
+ "--gap": gap + "px",
776
+ "--row-size": rowSize + "px",
777
+ "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))",
778
+ "--max-height": rows * rowSize + gap * (rowSize - 1) + "px",
779
+ "--content-active": active === wvId ? "grid" : "none"
780
+ };
781
+ return /* @__PURE__ */ import_react15.default.createElement("div", __spreadProps(__spreadValues({
782
+ ref
783
+ }, rest), {
784
+ style
785
+ }), import_react15.default.Children.count(children) > 0 ? children : /* @__PURE__ */ import_react15.default.createElement(Placeholder_default, {
786
+ element: "Tab"
787
+ }, "Item Content"));
788
+ });
789
+ TabContent.defaultProps = {
790
+ rows: 2,
791
+ columns: 12,
792
+ gap: 4,
793
+ rowSize: 48,
794
+ css: {
795
+ "@desktop": {
796
+ width: "100%",
797
+ maxWidth: "var(--grid-size)",
798
+ display: "var(--content-active, none)",
799
+ gridTemplateRows: "repeat(var(--rows), var(--row-size))",
800
+ gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
801
+ gap: "var(--gap)",
802
+ borderRadius: 4
803
+ }
804
+ }
805
+ };
806
+ var TabContent_default = TabContent;
807
+
634
808
  // src/elements/index.ts
635
809
  var elements = {
636
810
  Countdown: {
@@ -680,6 +854,14 @@ var elements = {
680
854
  AccordionContent: {
681
855
  Component: AccordionContent_default,
682
856
  type: "accordion.content"
857
+ },
858
+ Tab: {
859
+ Component: tab_default,
860
+ type: "tab"
861
+ },
862
+ TabContent: {
863
+ Component: TabContent_default,
864
+ type: "tab.content"
683
865
  }
684
866
  };
685
867
  var elements_default = elements;
@@ -692,13 +874,13 @@ var createRootContext = (configs) => {
692
874
  });
693
875
  return rootContext;
694
876
  };
695
- var WeaverseContext = (0, import_react13.createContext)({});
877
+ var WeaverseContext = (0, import_react16.createContext)({});
696
878
  var WeaverseContextProvider = WeaverseContext.Provider;
697
879
  var WeaverseContextConsumer = WeaverseContext.Consumer;
698
880
 
699
881
  // src/renderer.tsx
700
882
  var import_core2 = require("@weaverse/core");
701
- var import_react14 = __toESM(require("react"));
883
+ var import_react17 = __toESM(require("react"));
702
884
 
703
885
  // src/utils/index.ts
704
886
  var shortCssObject = (css) => {
@@ -725,15 +907,12 @@ function generateItemClass(instance, stitchesInstance) {
725
907
 
726
908
  // src/renderer.tsx
727
909
  var WeaverseRoot = ({ context }) => {
728
- var _a;
729
- let [, setData] = (0, import_react14.useState)(context.projectData);
730
- let rootRef = (0, import_react14.useRef)();
731
- (0, import_react14.useEffect)(() => {
732
- let update = () => setData({});
910
+ var _a, _b;
911
+ let [, setData] = (0, import_react17.useState)(context.projectData);
912
+ let rootRef = (0, import_react17.useRef)();
913
+ let update = () => setData({});
914
+ (0, import_react17.useEffect)(() => {
733
915
  context.subscribe(update);
734
- if (context.projectData) {
735
- setTimeout(update, 110);
736
- }
737
916
  context.contentRootElement = rootRef.current;
738
917
  return () => {
739
918
  context.unsubscribe(update);
@@ -741,21 +920,21 @@ var WeaverseRoot = ({ context }) => {
741
920
  }, []);
742
921
  let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
743
922
  let themeClass = context.stitchesInstance.theme.className;
744
- return /* @__PURE__ */ import_react14.default.createElement("div", __spreadProps(__spreadValues({
923
+ return ((_b = context.projectData) == null ? void 0 : _b.rootId) ? /* @__PURE__ */ import_react17.default.createElement("div", __spreadProps(__spreadValues({
745
924
  className: `weaverse-content-root ${themeClass}`
746
925
  }, eventHandlers), {
747
926
  ref: rootRef
748
- }), /* @__PURE__ */ import_react14.default.createElement(WeaverseContextProvider, {
927
+ }), /* @__PURE__ */ import_react17.default.createElement(WeaverseContextProvider, {
749
928
  value: context
750
- }, /* @__PURE__ */ import_react14.default.createElement(ItemInstance, {
751
- id: context.projectData.rootId || 0
752
- })));
929
+ }, /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
930
+ id: context.projectData.rootId
931
+ }))) : null;
753
932
  };
754
933
  var ItemComponent = ({ instance }) => {
755
- let { stitchesInstance, elementInstances } = (0, import_react14.useContext)(WeaverseContext);
756
- let [data, setData] = (0, import_react14.useState)(instance.data);
934
+ let { stitchesInstance, elementInstances } = (0, import_react17.useContext)(WeaverseContext);
935
+ let [data, setData] = (0, import_react17.useState)(instance.data);
757
936
  let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
758
- (0, import_react14.useEffect)(() => {
937
+ (0, import_react17.useEffect)(() => {
759
938
  var _a2;
760
939
  let update = (data2) => setData(__spreadValues({}, data2));
761
940
  instance.subscribe(update);
@@ -775,12 +954,12 @@ var ItemComponent = ({ instance }) => {
775
954
  if (Component.$$typeof === Symbol.for("react.forward_ref")) {
776
955
  rest.ref = instance.ref;
777
956
  }
778
- return /* @__PURE__ */ import_react14.default.createElement(Component, __spreadValues({
957
+ return /* @__PURE__ */ import_react17.default.createElement(Component, __spreadValues({
779
958
  key: id,
780
959
  "data-wv-type": type,
781
960
  "data-wv-id": id,
782
961
  className: generateItemClass(instance, stitchesInstance)
783
- }, rest), childIds.map((id2) => /* @__PURE__ */ import_react14.default.createElement(ItemInstance, {
962
+ }, rest), childIds.map((id2) => /* @__PURE__ */ import_react17.default.createElement(ItemInstance, {
784
963
  key: id2,
785
964
  id: id2
786
965
  })));
@@ -788,15 +967,15 @@ var ItemComponent = ({ instance }) => {
788
967
  return null;
789
968
  };
790
969
  var ItemInstance = ({ id }) => {
791
- let context = (0, import_react14.useContext)(WeaverseContext);
970
+ let context = (0, import_react17.useContext)(WeaverseContext);
792
971
  let { itemInstances } = context;
793
972
  let instance = itemInstances.get(id);
794
973
  if (!instance) {
795
- return /* @__PURE__ */ import_react14.default.createElement("div", {
974
+ return /* @__PURE__ */ import_react17.default.createElement("div", {
796
975
  style: { display: "none" }
797
976
  }, "Item instance ", id, " not found");
798
977
  }
799
- return /* @__PURE__ */ import_react14.default.createElement(ItemComponent, {
978
+ return /* @__PURE__ */ import_react17.default.createElement(ItemComponent, {
800
979
  instance
801
980
  });
802
981
  };
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "0.6.24",
2
+ "version": "0.6.28",
3
3
  "license": "MIT",
4
4
  "main": "dist/index.js",
5
5
  "typings": "dist/index.d.ts",
@@ -31,6 +31,6 @@
31
31
  "name": "@weaverse/react",
32
32
  "author": "Weaverse Team",
33
33
  "dependencies": {
34
- "@weaverse/core": "0.6.24"
34
+ "@weaverse/core": "0.6.28"
35
35
  }
36
36
  }
package/dist/index.d.ts DELETED
@@ -1,92 +0,0 @@
1
- import * as react from 'react';
2
- import { ReactElement, ReactNode } from 'react';
3
- import { WeaverseType, Weaverse, ElementCSS, WeaverseItemStore } from '@weaverse/core';
4
- export * from '@weaverse/core';
5
-
6
- declare let createRootContext: (configs: WeaverseType) => Weaverse;
7
- declare let WeaverseContext: react.Context<Weaverse>;
8
- declare let WeaverseContextProvider: react.Provider<Weaverse>;
9
- declare let WeaverseContextConsumer: react.Consumer<Weaverse>;
10
-
11
- interface WeaverseElementProps extends ReactElement {
12
- css?: ElementCSS;
13
- children?: ReactElement | ReactElement[] | ReactNode | ReactNode[];
14
- }
15
- declare type WeaverseRootPropsType = {
16
- context: Weaverse;
17
- };
18
- declare type ItemComponentProps = {
19
- instance: InstanceType<typeof WeaverseItemStore>;
20
- };
21
- interface PlaceholderProps extends WeaverseElementProps {
22
- element: string;
23
- }
24
- interface ButtonElementProps extends WeaverseElementProps {
25
- value: string;
26
- openInNewTab: boolean;
27
- target: string;
28
- type: 'button' | 'submit' | 'reset';
29
- }
30
- interface ContainerElementProps extends WeaverseElementProps {
31
- [key: string]: any;
32
- }
33
- interface ImageElementProps extends WeaverseElementProps {
34
- src: string;
35
- alt: string;
36
- }
37
- interface LayoutElementProps extends WeaverseElementProps {
38
- gridSize: number;
39
- rows: number;
40
- columns: number;
41
- gap: number;
42
- rowSize: number;
43
- }
44
- interface MapElementProps extends WeaverseElementProps {
45
- place: string;
46
- zoom: number;
47
- }
48
- interface TextElementProps extends WeaverseElementProps {
49
- value: string;
50
- }
51
- interface VideoElementProps extends WeaverseElementProps {
52
- src: string;
53
- poster: string;
54
- loop: boolean;
55
- type: string;
56
- controls: boolean;
57
- autoPlay: boolean;
58
- muted: boolean;
59
- }
60
- declare type CountdownTimeKey = 'days' | 'hours' | 'minutes' | 'seconds';
61
- interface CountdownElementProps extends WeaverseElementProps {
62
- timerType: 'fixed-time' | 'evergreen';
63
- startTime: number;
64
- endTime: number;
65
- periods: number;
66
- redirectUrl: string;
67
- openInNewTab: boolean;
68
- showLabel: boolean;
69
- showColon: boolean;
70
- }
71
- declare type TimerBlockProps = {
72
- label: string;
73
- value: number;
74
- };
75
- interface InstagramElementProps extends WeaverseElementProps {
76
- token: string;
77
- username: string;
78
- numberOfImages: number;
79
- imagesPerRow: number;
80
- gap: number;
81
- }
82
- declare type InstagramMedia = {
83
- id: string;
84
- media_type: 'IMAGE' | 'CAROUSEL_ALBUM';
85
- media_url: string;
86
- permalink: string;
87
- caption: string;
88
- };
89
-
90
- declare let WeaverseRoot: ({ context }: WeaverseRootPropsType) => JSX.Element;
91
-
92
- export { ButtonElementProps, ContainerElementProps, CountdownElementProps, CountdownTimeKey, ImageElementProps, InstagramElementProps, InstagramMedia, ItemComponentProps, LayoutElementProps, MapElementProps, PlaceholderProps, TextElementProps, TimerBlockProps, VideoElementProps, WeaverseContext, WeaverseContextConsumer, WeaverseContextProvider, WeaverseElementProps, WeaverseRoot, WeaverseRootPropsType, createRootContext };
package/dist/index.mjs DELETED
@@ -1,782 +0,0 @@
1
- var __defProp = Object.defineProperty;
2
- var __defProps = Object.defineProperties;
3
- var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
4
- var __getOwnPropSymbols = Object.getOwnPropertySymbols;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __propIsEnum = Object.prototype.propertyIsEnumerable;
7
- var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
8
- var __spreadValues = (a, b) => {
9
- for (var prop in b || (b = {}))
10
- if (__hasOwnProp.call(b, prop))
11
- __defNormalProp(a, prop, b[prop]);
12
- if (__getOwnPropSymbols)
13
- for (var prop of __getOwnPropSymbols(b)) {
14
- if (__propIsEnum.call(b, prop))
15
- __defNormalProp(a, prop, b[prop]);
16
- }
17
- return a;
18
- };
19
- var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
20
- var __objRest = (source, exclude) => {
21
- var target = {};
22
- for (var prop in source)
23
- if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
24
- target[prop] = source[prop];
25
- if (source != null && __getOwnPropSymbols)
26
- for (var prop of __getOwnPropSymbols(source)) {
27
- if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
28
- target[prop] = source[prop];
29
- }
30
- return target;
31
- };
32
-
33
- // src/context.ts
34
- import { Weaverse } from "@weaverse/core";
35
- import { createContext as createContext2 } from "react";
36
-
37
- // src/elements/button.tsx
38
- import * as React from "react";
39
- var Button = React.forwardRef((props, ref) => {
40
- let _a = props, { openInNewTab, target, value } = _a, rest = __objRest(_a, ["openInNewTab", "target", "value"]);
41
- if (target) {
42
- return /* @__PURE__ */ React.createElement("a", __spreadProps(__spreadValues({
43
- href: target,
44
- target: openInNewTab ? "_blank" : "_self",
45
- rel: "noreferrer"
46
- }, rest), {
47
- ref
48
- }), value);
49
- }
50
- return /* @__PURE__ */ React.createElement("button", __spreadValues({
51
- ref
52
- }, rest), value);
53
- });
54
- Button.defaultProps = {
55
- value: "Shop now",
56
- openInNewTab: false,
57
- target: "",
58
- type: "button",
59
- css: {
60
- "@desktop": {
61
- borderRadius: "72px",
62
- border: "none",
63
- backgroundColor: "#0F71FF",
64
- color: "#fff",
65
- fontSize: "13px",
66
- padding: "10px 20px"
67
- }
68
- }
69
- };
70
- var button_default = Button;
71
-
72
- // src/elements/container.tsx
73
- import React2, { forwardRef as forwardRef2 } from "react";
74
- var Container = forwardRef2((props, ref) => {
75
- let _a = props, { children } = _a, rest = __objRest(_a, ["children"]);
76
- return /* @__PURE__ */ React2.createElement("div", __spreadValues({
77
- ref
78
- }, rest), children);
79
- });
80
- Container.defaultProps = {
81
- css: {
82
- "@desktop": {
83
- alignItems: "flex-start",
84
- backgroundColor: "rgba(248,203,203,0.38)",
85
- display: "flex",
86
- flexDirection: "column",
87
- gridArea: "1 / 1 / 3 / 6",
88
- height: "fit-content",
89
- justifyContent: "flex-start",
90
- overflow: "hidden",
91
- textAlign: "left",
92
- width: "100%"
93
- }
94
- }
95
- };
96
- var container_default = Container;
97
-
98
- // src/elements/countdown/index.tsx
99
- import React4, { forwardRef as forwardRef3, useContext, useEffect } from "react";
100
-
101
- // src/elements/countdown/timer-block.tsx
102
- import React3 from "react";
103
- function TimerBlock({ value, label }) {
104
- return /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("div", {
105
- className: "wv-countdown-number"
106
- }, value.toString().padStart(2, "0")), label && /* @__PURE__ */ React3.createElement("div", {
107
- className: "wv-countdown-label"
108
- }, label));
109
- }
110
-
111
- // src/elements/countdown/utils.ts
112
- var times = ["days", "hours", "minutes", "seconds"];
113
- function getTime(_seconds) {
114
- const ONE_MINUTE = 60 * 1e3;
115
- const ONE_HOUR = 60 * ONE_MINUTE;
116
- const ONE_DAY = 24 * ONE_HOUR;
117
- const days = Math.floor(_seconds / ONE_DAY);
118
- const hours = Math.floor((_seconds - days * ONE_DAY) / ONE_HOUR);
119
- const minutes = Math.floor((_seconds - days * ONE_DAY - hours * ONE_HOUR) / ONE_MINUTE);
120
- const seconds = Math.floor((_seconds - days * ONE_DAY - hours * ONE_HOUR - minutes * ONE_MINUTE) / 1e3);
121
- return { days, hours, minutes, seconds };
122
- }
123
-
124
- // src/elements/countdown/index.tsx
125
- var Countdown = forwardRef3((props, ref) => {
126
- const { isDesignMode } = useContext(WeaverseContext);
127
- let _a = props, {
128
- timerType,
129
- startTime,
130
- endTime,
131
- periods,
132
- redirectUrl,
133
- openInNewTab,
134
- showColon,
135
- showLabel
136
- } = _a, rest = __objRest(_a, [
137
- "timerType",
138
- "startTime",
139
- "endTime",
140
- "periods",
141
- "redirectUrl",
142
- "openInNewTab",
143
- "showColon",
144
- "showLabel"
145
- ]);
146
- const [remaining, setRemaining] = React4.useState(0);
147
- if (typeof endTime !== "number") {
148
- endTime = Number.parseInt(endTime);
149
- }
150
- useEffect(() => {
151
- const flag = setInterval(() => {
152
- const remainingTime = Math.max((timerType === "fixed-time" ? new Date(endTime).getTime() : new Date(startTime).getTime() + periods * 60 * 1e3) - Date.now(), 0);
153
- if (!isDesignMode && redirectUrl && remainingTime > 0 && remainingTime < 1e3) {
154
- window.open(redirectUrl, openInNewTab ? "_blank" : "_self");
155
- }
156
- setRemaining(remainingTime);
157
- }, 1e3);
158
- return () => {
159
- clearInterval(flag);
160
- };
161
- }, [startTime, endTime, periods, timerType]);
162
- const timer = getTime(remaining);
163
- return /* @__PURE__ */ React4.createElement("div", __spreadValues({
164
- ref
165
- }, rest), times.map((time) => {
166
- return /* @__PURE__ */ React4.createElement(React4.Fragment, {
167
- key: time
168
- }, /* @__PURE__ */ React4.createElement(TimerBlock, {
169
- label: showLabel ? time : "",
170
- value: timer[time]
171
- }), time !== "seconds" && /* @__PURE__ */ React4.createElement("span", {
172
- className: `wv-countdown-number ${showColon ? "" : "hidden"}`
173
- }, ":"));
174
- }));
175
- });
176
- Countdown.defaultProps = {
177
- timerType: "fixed-time",
178
- startTime: Date.now(),
179
- endTime: 1661140528e3,
180
- periods: 90,
181
- redirectUrl: "https://myshop.com",
182
- openInNewTab: false,
183
- showLabel: true,
184
- showColon: true,
185
- css: {
186
- "@desktop": {
187
- fontFamily: "Inter",
188
- fontSize: 36,
189
- fontWeight: 500,
190
- display: "grid",
191
- gridAutoFlow: "column",
192
- gap: 10,
193
- "& > div": {
194
- width: 48,
195
- textAlign: "center"
196
- },
197
- ".wv-countdown-label": {
198
- fontSize: 10
199
- },
200
- "& > span": {
201
- lineHeight: "100%"
202
- },
203
- "& .hidden": {
204
- visibility: "hidden"
205
- }
206
- }
207
- }
208
- };
209
- var countdown_default = Countdown;
210
-
211
- // src/elements/image.tsx
212
- import React5 from "react";
213
- var Image = React5.forwardRef((props, ref) => {
214
- let _a = props, { src, alt } = _a, rest = __objRest(_a, ["src", "alt"]);
215
- return /* @__PURE__ */ React5.createElement("div", __spreadValues({
216
- ref
217
- }, rest), /* @__PURE__ */ React5.createElement("img", {
218
- alt,
219
- src
220
- }));
221
- });
222
- Image.defaultProps = {
223
- src: "https://ucarecdn.com/1cdc9d39-ca62-492e-8ec7-f1a86b241a90/",
224
- alt: "weaverse image element",
225
- css: {
226
- "@desktop": {
227
- img: {
228
- width: "100%",
229
- height: "100%",
230
- objectFit: "cover"
231
- }
232
- }
233
- }
234
- };
235
- var image_default = Image;
236
-
237
- // src/elements/layout.tsx
238
- import React6, { forwardRef as forwardRef4 } from "react";
239
- var Layout = forwardRef4((props, ref) => {
240
- let _a = props, { children, rows, gap, rowSize, columns, gridSize } = _a, rest = __objRest(_a, ["children", "rows", "gap", "rowSize", "columns", "gridSize"]);
241
- let style = {
242
- "--grid-size": gridSize + "px",
243
- "--rows": rows,
244
- "--columns": columns,
245
- "--gap": gap + "px",
246
- "--row-size": rowSize + "px",
247
- "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
248
- };
249
- return /* @__PURE__ */ React6.createElement("section", __spreadProps(__spreadValues({
250
- ref
251
- }, rest), {
252
- style
253
- }), /* @__PURE__ */ React6.createElement("div", {
254
- "data-layout-content": true
255
- }, children));
256
- });
257
- Layout.defaultProps = {
258
- gridSize: 1224,
259
- rows: 12,
260
- columns: 12,
261
- gap: 16,
262
- rowSize: 48,
263
- css: {
264
- "@desktop": {
265
- paddingTop: "16px",
266
- paddingBottom: "16px",
267
- paddingLeft: "var(--gap)",
268
- paddingRight: "var(--gap)",
269
- "> [data-layout-content]": {
270
- margin: "0 auto",
271
- display: "grid !important",
272
- gridTemplateRows: "repeat(var(--rows), var(--row-size))",
273
- gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
274
- gap: "var(--gap)",
275
- maxWidth: "var(--grid-size)"
276
- }
277
- },
278
- "@mobile": {
279
- padding: "0 16px",
280
- "> [data-layout-content]": {
281
- display: "flex !important",
282
- flexDirection: "column"
283
- }
284
- }
285
- }
286
- };
287
- var layout_default = Layout;
288
-
289
- // src/elements/map.tsx
290
- import React7, { forwardRef as forwardRef5 } from "react";
291
- var Map = forwardRef5((props, ref) => {
292
- let _a = props, { place, zoom } = _a, rest = __objRest(_a, ["place", "zoom"]);
293
- return /* @__PURE__ */ React7.createElement("div", __spreadValues({
294
- ref
295
- }, rest), /* @__PURE__ */ React7.createElement("iframe", {
296
- loading: "lazy",
297
- scrolling: "no",
298
- width: "100%",
299
- height: "100%",
300
- title: "map",
301
- src: `https://maps.google.com/maps?z=${zoom}&t=m&q=${place}&ie=UTF8&&output=embed`,
302
- style: { pointerEvents: "none" }
303
- }));
304
- });
305
- Map.defaultProps = {
306
- place: "Hanoi",
307
- zoom: 14
308
- };
309
- var map_default = Map;
310
-
311
- // src/elements/text.tsx
312
- import * as React8 from "react";
313
- var Text = React8.forwardRef((props, ref) => {
314
- let _a = props, { children, value } = _a, rest = __objRest(_a, ["children", "value"]);
315
- return /* @__PURE__ */ React8.createElement("div", __spreadProps(__spreadValues({
316
- ref
317
- }, rest), {
318
- dangerouslySetInnerHTML: { __html: value }
319
- }));
320
- });
321
- Text.defaultProps = {
322
- value: "The quick brown fox jumps over the lazy dog",
323
- css: {
324
- "@desktop": {
325
- width: "100%",
326
- height: "fit-content",
327
- padding: "20px",
328
- outline: "none",
329
- wordBreak: "break-word",
330
- overflowWrap: "break-word",
331
- whiteSpace: "break-spaces"
332
- }
333
- }
334
- };
335
- var text_default = Text;
336
-
337
- // src/elements/video.tsx
338
- import React9, { forwardRef as forwardRef7, useContext as useContext2 } from "react";
339
- var Video = forwardRef7((props, ref) => {
340
- let { isDesignMode } = useContext2(WeaverseContext);
341
- let _a = props, { src, type, controls, poster, autoPlay, loop, muted } = _a, rest = __objRest(_a, ["src", "type", "controls", "poster", "autoPlay", "loop", "muted"]);
342
- return /* @__PURE__ */ React9.createElement("div", __spreadValues({
343
- ref
344
- }, rest), /* @__PURE__ */ React9.createElement("video", {
345
- controls: isDesignMode ? false : controls,
346
- autoPlay: isDesignMode ? false : autoPlay,
347
- loop,
348
- muted: true,
349
- controlsList: "nodownload",
350
- disablePictureInPicture: true
351
- }, /* @__PURE__ */ React9.createElement("source", {
352
- src,
353
- type: type || "video/mp4"
354
- }), "Your browser does not support the video tag."));
355
- });
356
- Video.defaultProps = {
357
- src: "https://youtu.be/wM-NT6hcw48",
358
- poster: "https://ucarecdn.com/48d73272-3fe3-43f6-8b5b-22b68fc5a8c8/section.png",
359
- loop: false,
360
- type: "video/mp4",
361
- controls: false,
362
- autoPlay: true,
363
- muted: true,
364
- css: {
365
- "@desktop": {
366
- video: {
367
- height: "100%",
368
- width: "100%",
369
- aspectRatio: "16 / 9"
370
- }
371
- }
372
- }
373
- };
374
- var video_default = Video;
375
-
376
- // src/elements/instagram.tsx
377
- import React11, { forwardRef as forwardRef9, useContext as useContext3, useEffect as useEffect2, useState } from "react";
378
-
379
- // src/elements/shared/Placeholder.tsx
380
- import React10, { forwardRef as forwardRef8 } from "react";
381
- var Placeholder = forwardRef8((props, ref) => {
382
- let _a = props, { element, children } = _a, rest = __objRest(_a, ["element", "children"]);
383
- let style = {
384
- position: "absolute",
385
- height: "100%",
386
- width: "100%",
387
- display: "flex",
388
- flexDirection: "column",
389
- alignItems: "center",
390
- justifyContent: "center",
391
- color: "#374151",
392
- pointerEvents: "none",
393
- zIndex: 1
394
- };
395
- return /* @__PURE__ */ React10.createElement("div", __spreadValues({
396
- style,
397
- ref
398
- }, rest), /* @__PURE__ */ React10.createElement("div", {
399
- style: { fontWeight: 600, marginBottom: "10px" }
400
- }, element), /* @__PURE__ */ React10.createElement("div", null, children));
401
- });
402
- var Placeholder_default = Placeholder;
403
-
404
- // src/elements/instagram.tsx
405
- var INSTAGRAM_API = "https://graph.instagram.com";
406
- var Instagram = forwardRef9((props, ref) => {
407
- const _a = props, { token, username, numberOfImages, imagesPerRow, gap } = _a, rest = __objRest(_a, ["token", "username", "numberOfImages", "imagesPerRow", "gap"]);
408
- const [media, setMedia] = useState([]);
409
- const [error, setError] = useState(null);
410
- let { isDesignMode } = useContext3(WeaverseContext);
411
- useEffect2(() => {
412
- if (token) {
413
- let params = new URLSearchParams({
414
- access_token: token,
415
- fields: "id,media_type,caption,media_url,permalink"
416
- });
417
- fetch(`${INSTAGRAM_API}/me/media?${params.toString()}`).then((res) => res.json()).then((res) => {
418
- if (res.error) {
419
- setError(res);
420
- } else {
421
- setError(null);
422
- setMedia([...res.data]);
423
- }
424
- }).catch(setError);
425
- }
426
- }, [token]);
427
- if (!token || error) {
428
- return /* @__PURE__ */ React11.createElement("div", __spreadValues({
429
- ref
430
- }, rest), /* @__PURE__ */ React11.createElement(Placeholder_default, {
431
- element: "Instagram"
432
- }, !token ? "Connect your Instagram account to display photos on your site." : "Invalid or expired token!"));
433
- }
434
- let style = {
435
- "--wv-ig-images-per-row": imagesPerRow,
436
- "--wv-ig-images-gap": gap
437
- };
438
- return /* @__PURE__ */ React11.createElement("div", __spreadProps(__spreadValues({
439
- ref
440
- }, rest), {
441
- style
442
- }), /* @__PURE__ */ React11.createElement("div", {
443
- className: "wv-ig-media-container"
444
- }, media.slice(0, numberOfImages).map((item) => {
445
- let linkProps;
446
- if (!isDesignMode) {
447
- linkProps = { href: item.permalink, target: "_blank" };
448
- }
449
- return /* @__PURE__ */ React11.createElement("a", __spreadValues({
450
- key: item.id
451
- }, linkProps), /* @__PURE__ */ React11.createElement("img", {
452
- alt: item.caption,
453
- src: item.media_url
454
- }));
455
- })));
456
- });
457
- Instagram.defaultProps = {
458
- token: "",
459
- username: "",
460
- numberOfImages: 8,
461
- imagesPerRow: 4,
462
- gap: 0,
463
- css: {
464
- "@desktop": {
465
- ".wv-ig-media-container": {
466
- overflow: "hidden",
467
- maxWidth: "100%",
468
- maxHeight: "100%",
469
- display: "grid",
470
- gridTemplateColumns: "repeat(var(--wv-ig-images-per-row, 4), 1fr)",
471
- gap: "var(--wv-ig-images-gap, 0px)",
472
- img: {
473
- aspectRatio: "1 / 1",
474
- width: "100%",
475
- height: "100%",
476
- objectFit: "cover"
477
- }
478
- }
479
- }
480
- }
481
- };
482
- var instagram_default = Instagram;
483
-
484
- // src/elements/accordion/index.tsx
485
- import React12, { createContext, forwardRef as forwardRef10, useState as useState2 } from "react";
486
- var AccordionContext = createContext({
487
- active: null,
488
- setActive: () => {
489
- }
490
- });
491
- var Accordion = forwardRef10((props, ref) => {
492
- const _a = props, { items, children } = _a, rest = __objRest(_a, ["items", "children"]);
493
- const [active, setActive] = useState2(null);
494
- const setOpenAccordion = (id) => {
495
- if (id === active) {
496
- setActive(null);
497
- } else {
498
- setActive(id);
499
- }
500
- };
501
- console.info("9779 active", active);
502
- return /* @__PURE__ */ React12.createElement("div", __spreadValues({
503
- ref
504
- }, rest), /* @__PURE__ */ React12.createElement(AccordionContext.Provider, {
505
- value: { active, setActive: setOpenAccordion }
506
- }, children));
507
- });
508
- Accordion.defaultProps = {
509
- items: [
510
- {
511
- id: 1,
512
- headerText: "Header 1",
513
- childrenId: true
514
- },
515
- {
516
- id: 2,
517
- headerText: "Header 2"
518
- }
519
- ],
520
- css: {
521
- "@desktop": {
522
- display: "flex",
523
- flexDirection: "column",
524
- gap: 4,
525
- ".wv-accordion-header": {
526
- borderRadius: 4,
527
- padding: 4,
528
- marginBottom: 4,
529
- backgroundColor: "#aaa",
530
- "&.active": {
531
- color: "blue"
532
- },
533
- '&.active + [data-wv-type="accordion.content"]': {
534
- display: "grid"
535
- }
536
- }
537
- }
538
- }
539
- };
540
- var accordion_default = Accordion;
541
-
542
- // src/elements/accordion/AccordionWrapper.tsx
543
- import React13, { forwardRef as forwardRef11, useContext as useContext4 } from "react";
544
- var AccordionWrapper = forwardRef11((props, ref) => {
545
- const _a = props, { wrapperId, headerText, children } = _a, rest = __objRest(_a, ["wrapperId", "headerText", "children"]);
546
- const { active, setActive } = useContext4(AccordionContext);
547
- return /* @__PURE__ */ React13.createElement("div", __spreadValues({
548
- ref
549
- }, rest), /* @__PURE__ */ React13.createElement("div", {
550
- onClick: () => setActive(wrapperId),
551
- className: `wv-accordion-header ${active === wrapperId ? "active" : ""}`
552
- }, headerText, " #", wrapperId), children);
553
- });
554
- AccordionWrapper.defaultProps = {
555
- wrapperId: 1,
556
- headerText: "Header 1",
557
- css: {
558
- "@desktop": {
559
- maxHeight: "100%"
560
- }
561
- }
562
- };
563
- var AccordionWrapper_default = AccordionWrapper;
564
-
565
- // src/elements/accordion/AccordionContent.tsx
566
- import React14, { forwardRef as forwardRef12 } from "react";
567
- var AccordionContent = forwardRef12((props, ref) => {
568
- const _a = props, { rows, columns, gap, rowSize, children } = _a, rest = __objRest(_a, ["rows", "columns", "gap", "rowSize", "children"]);
569
- let style = {
570
- "--rows": rows,
571
- "--columns": columns,
572
- "--gap": gap + "px",
573
- "--row-size": rowSize + "px",
574
- "--col-size": "calc((var(--grid-size) - calc(var(--columns) - 1) * var(--gap)) / var(--columns))"
575
- };
576
- return /* @__PURE__ */ React14.createElement("div", __spreadProps(__spreadValues({
577
- ref
578
- }, rest), {
579
- style
580
- }), React14.Children.count(children) > 0 ? children : /* @__PURE__ */ React14.createElement(Placeholder_default, {
581
- element: "Accordion"
582
- }, "Item Content"));
583
- });
584
- AccordionContent.defaultProps = {
585
- rows: 2,
586
- columns: 12,
587
- gap: 4,
588
- rowSize: 48,
589
- css: {
590
- "@desktop": {
591
- width: "100%",
592
- maxWidth: "var(--grid-size)",
593
- backgroundColor: "#DDD",
594
- display: "none",
595
- gridTemplateRows: "repeat(var(--rows), var(--row-size))",
596
- gridTemplateColumns: "repeat(var(--columns), minmax(0, var(--col-size)))",
597
- gap: "var(--gap)",
598
- borderRadius: 4
599
- }
600
- }
601
- };
602
- var AccordionContent_default = AccordionContent;
603
-
604
- // src/elements/index.ts
605
- var elements = {
606
- Countdown: {
607
- Component: countdown_default,
608
- type: "countdown"
609
- },
610
- Button: {
611
- Component: button_default,
612
- type: "button"
613
- },
614
- Container: {
615
- Component: container_default,
616
- type: "container"
617
- },
618
- Image: {
619
- Component: image_default,
620
- type: "image"
621
- },
622
- Instagram: {
623
- Component: instagram_default,
624
- type: "instagram"
625
- },
626
- Layout: {
627
- Component: layout_default,
628
- type: "layout"
629
- },
630
- Map: {
631
- Component: map_default,
632
- type: "map"
633
- },
634
- Text: {
635
- Component: text_default,
636
- type: "text"
637
- },
638
- Video: {
639
- Component: video_default,
640
- type: "video"
641
- },
642
- Accordion: {
643
- Component: accordion_default,
644
- type: "accordion"
645
- },
646
- AccordionWrapper: {
647
- Component: AccordionWrapper_default,
648
- type: "accordion.wrapper"
649
- },
650
- AccordionContent: {
651
- Component: AccordionContent_default,
652
- type: "accordion.content"
653
- }
654
- };
655
- var elements_default = elements;
656
-
657
- // src/context.ts
658
- var createRootContext = (configs) => {
659
- let rootContext = new Weaverse(configs);
660
- Object.keys(elements_default).forEach((key) => {
661
- rootContext.registerElement(elements_default[key]);
662
- });
663
- return rootContext;
664
- };
665
- var WeaverseContext = createContext2({});
666
- var WeaverseContextProvider = WeaverseContext.Provider;
667
- var WeaverseContextConsumer = WeaverseContext.Consumer;
668
-
669
- // src/renderer.tsx
670
- import { isBrowser } from "@weaverse/core";
671
- import React15, { useContext as useContext5, useEffect as useEffect3, useRef, useState as useState3 } from "react";
672
-
673
- // src/utils/index.ts
674
- var shortCssObject = (css) => {
675
- return {
676
- "@desktop": css["@desktop"],
677
- "@mobile": css["@mobile"]
678
- };
679
- };
680
- function generateItemClass(instance, stitchesInstance) {
681
- var _a, _b, _c, _d;
682
- let { css, className: cls = "" } = instance.data;
683
- let defaultCss = ((_c = (_b = (_a = instance.Element) == null ? void 0 : _a.Component) == null ? void 0 : _b.defaultProps) == null ? void 0 : _c.css) || {};
684
- let className = "";
685
- if (css || defaultCss) {
686
- let formattedCss = shortCssObject(css || defaultCss);
687
- let { className: newClass = "" } = stitchesInstance.css(formattedCss)();
688
- let { stitchesClass } = instance;
689
- let otherClass = (((_d = instance.ref.current) == null ? void 0 : _d.className) || "").replace(stitchesClass, "").replace(cls, "").trim();
690
- className = `${cls} ${newClass} ${otherClass}`.trim();
691
- instance.stitchesClass = newClass;
692
- }
693
- return className;
694
- }
695
-
696
- // src/renderer.tsx
697
- var WeaverseRoot = ({ context }) => {
698
- var _a;
699
- let [, setData] = useState3(context.projectData);
700
- let rootRef = useRef();
701
- useEffect3(() => {
702
- let update = () => setData({});
703
- context.subscribe(update);
704
- if (context.projectData) {
705
- setTimeout(update, 110);
706
- }
707
- context.contentRootElement = rootRef.current;
708
- return () => {
709
- context.unsubscribe(update);
710
- };
711
- }, []);
712
- let eventHandlers = ((_a = context == null ? void 0 : context.studioBridge) == null ? void 0 : _a.eventHandlers) || {};
713
- let themeClass = context.stitchesInstance.theme.className;
714
- return /* @__PURE__ */ React15.createElement("div", __spreadProps(__spreadValues({
715
- className: `weaverse-content-root ${themeClass}`
716
- }, eventHandlers), {
717
- ref: rootRef
718
- }), /* @__PURE__ */ React15.createElement(WeaverseContextProvider, {
719
- value: context
720
- }, /* @__PURE__ */ React15.createElement(ItemInstance, {
721
- id: context.projectData.rootId || 0
722
- })));
723
- };
724
- var ItemComponent = ({ instance }) => {
725
- let { stitchesInstance, elementInstances } = useContext5(WeaverseContext);
726
- let [data, setData] = useState3(instance.data);
727
- let _a = data, { id, type, childIds = [], css, className } = _a, rest = __objRest(_a, ["id", "type", "childIds", "css", "className"]);
728
- useEffect3(() => {
729
- var _a2;
730
- let update = (data2) => setData(__spreadValues({}, data2));
731
- instance.subscribe(update);
732
- if (isBrowser && !instance.ref.current) {
733
- Object.assign(instance.ref, {
734
- current: document.querySelector(`[data-wv-id="${id}"]`)
735
- });
736
- }
737
- (_a2 = instance.ref.current) == null ? void 0 : _a2.removeAttribute("css");
738
- return () => {
739
- instance.unsubscribe(update);
740
- };
741
- }, []);
742
- let Element = elementInstances.get(type);
743
- if (Element == null ? void 0 : Element.Component) {
744
- let Component = Element.Component;
745
- if (Component.$$typeof === Symbol.for("react.forward_ref")) {
746
- rest.ref = instance.ref;
747
- }
748
- return /* @__PURE__ */ React15.createElement(Component, __spreadValues({
749
- key: id,
750
- "data-wv-type": type,
751
- "data-wv-id": id,
752
- className: generateItemClass(instance, stitchesInstance)
753
- }, rest), childIds.map((id2) => /* @__PURE__ */ React15.createElement(ItemInstance, {
754
- key: id2,
755
- id: id2
756
- })));
757
- }
758
- return null;
759
- };
760
- var ItemInstance = ({ id }) => {
761
- let context = useContext5(WeaverseContext);
762
- let { itemInstances } = context;
763
- let instance = itemInstances.get(id);
764
- if (!instance) {
765
- return /* @__PURE__ */ React15.createElement("div", {
766
- style: { display: "none" }
767
- }, "Item instance ", id, " not found");
768
- }
769
- return /* @__PURE__ */ React15.createElement(ItemComponent, {
770
- instance
771
- });
772
- };
773
-
774
- // src/index.ts
775
- export * from "@weaverse/core";
776
- export {
777
- WeaverseContext,
778
- WeaverseContextConsumer,
779
- WeaverseContextProvider,
780
- WeaverseRoot,
781
- createRootContext
782
- };