@janbox/storefront-builder 2.0.9 → 2.0.11

package/dist/hooks/use-first-mount-state.d.ts

@@ -0,0 +1 @@
+export declare function useFirstMountState(): boolean;

package/dist/hooks/use-node-props.d.ts

@@ -8,7 +8,6 @@ export declare const useNodeProps: <P extends object = object, K = P extends ToR
     transform?: (current: P) => P;
     nodeId?: string;
 }) => {
-    id: string;
     nodeProps: P;
     setNodeProps: (next: DeepPartial<P> | ((prev: P) => void), setPropOptions?: SetPropOptions) => void;
     setNodeResponsiveProps: (props: DeepPartial<K>, screen: Screen, options?: SetPropOptions) => void;

package/dist/hooks/use-update-effect.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList, EffectCallback } from 'react';
+export declare const useUpdateEffect: (effect: EffectCallback, deps: DependencyList) => void;

package/dist/index-fErSlbD2.js

@@ -0,0 +1,206 @@
+import { useNode as b, Element as T, Frame as h, Editor as I, DefaultEventHandlers as v } from "@craftjs/core";
+import { isFunction as x, merge as A, set as w, isNil as C, isString as f } from "lodash-es";
+import { useMemo as S, useEffect as E } from "react";
+import { N as l, W as e, g as L, A as y, c as k, b as B, a as F, p as M, T as q, o as G, n as R, q as U, M as H, l as D, m as j, S as O, k as V, r as _, L as $, I as z, V as J, j as W, f as X, B as Y, F as K, h as Q, e as Z, G as ee, i as oe, P as re, d as se, U as ne, R as te, u as ae, y as de, X as ie, Y as g } from "./countdown-timer.node-d0EtGQ4_.js";
+import { getGridProps as ue, getCellProps as ce, getLinkProps as pe, getButtonProps as le, getFlexboxProps as me, getFlexItemProps as Ne, getImageProps as Pe, getMarqueeProps as fe, getTabsProps as ge, getSwiperProps as be, getUnorderedListProps as Ce, getIconProps as Te, getAccordionProps as he, getAccordionGroupProps as Ie, getVideoProps as ve, getBoxProps as xe, getContainerProps as Ae, Primitive as we } from "@janbox/storefront-ui";
+import { flatten as Se } from "flat";
+import { jsx as m } from "@emotion/react/jsx-runtime";
+const o = (n = {}) => {
+  const { id: r } = b(), s = n?.nodeId ?? r, { nodeProps: a, actions: i } = l((d) => ({
+    nodeProps: d.nodes[s ?? r]?.data.props ?? {}
+  })), t = (d, c) => x(d) ? i.setProp(s, d) : i.setProp(s, (p) => {
+    if (c?.merge) {
+      A(p, d);
+      return;
+    }
+    const N = Se(d);
+    Object.keys(N).forEach((P) => {
+      w(p, P, N[P]);
+    });
+  }), u = (d, c, p) => t(
+    c === "xs" ? d : {
+      [c]: d
+    },
+    p
+  );
+  return {
+    nodeProps: n?.transform?.(a) ?? a,
+    setNodeProps: t,
+    setNodeResponsiveProps: u
+  };
+}, Ue = () => o({
+  transform: ue
+}), He = () => o({
+  transform: ce
+}), De = () => o({
+  transform: pe
+}), je = () => o({
+  transform: le
+}), Oe = () => o({
+  transform: me
+}), Ve = () => o({
+  transform: Ne
+}), _e = () => o({
+  transform: Pe
+}), $e = () => o({
+  transform: fe
+}), ze = (n) => o({
+  transform: ge,
+  nodeId: n
+}), Je = (n) => o({
+  nodeId: n
+}), We = () => o({
+  transform: be
+}), Xe = () => o({
+  transform: Ce
+}), Ye = () => o({
+  transform: Te
+}), Ke = (n) => o({
+  transform: he,
+  nodeId: n
+}), Qe = () => o({
+  transform: Ie
+}), Ze = () => o({
+  transform: ve
+}), eo = () => o({
+  transform: xe
+}), oo = () => o({
+  transform: Ae
+}), ro = () => o(), so = T, no = ({ children: n, data: r }) => {
+  const { resolver: s } = l((i) => ({
+    resolver: i.options.resolver
+  })), a = S(() => {
+    if (C(r)) return r;
+    const i = f(r) ? JSON.parse(r) : r;
+    return Object.entries(i).forEach(([, t]) => {
+      const u = f(t.type) ? t.type : t.type.resolvedName;
+      s[u] || (console.error(`Unknown node: ${u}`), t.type = {
+        resolvedName: e.Unknown
+      });
+    }), i;
+  }, [r, s]);
+  return /* @__PURE__ */ m(h, { data: a, children: n });
+}, Ee = {
+  // Root
+  [e.Root]: te,
+  // Unknown
+  [e.Unknown]: ne,
+  // Button
+  [e.Button]: se,
+  // Text
+  [e.Paragraph]: re,
+  [e.Heading]: oe,
+  // Layout
+  [e.Grid]: ee,
+  [e.Cell]: Z,
+  [e.Flexbox]: Q,
+  [e.FlexItem]: K,
+  [e.Box]: Y,
+  [e.Container]: X,
+  // Media
+  [e.Image]: W,
+  [e.Video]: J,
+  [e.Icon]: z,
+  // Navigation
+  [e.Link]: $,
+  // List
+  [e.UnorderedList]: _,
+  [e.ListItem]: V,
+  // Carousel
+  [e.Swiper]: O,
+  [e.SwiperSlide]: j,
+  [e.Marquee]: D,
+  [e.MarqueeItem]: H,
+  // Tabs
+  [e.Tabs]: U,
+  [e.TabList]: R,
+  [e.Tab]: G,
+  [e.TabContent]: q,
+  [e.TabPanel]: M,
+  // Accordion
+  [e.AccordionGroup]: F,
+  [e.Accordion]: B,
+  [e.AccordionSummary]: k,
+  [e.AccordionContent]: y,
+  // Timer
+  [e.CountdownTimer]: L
+}, to = ({ resolver: n, children: r, ...s }) => /* @__PURE__ */ m(
+  I,
+  {
+    enabled: !1,
+    onRender: Le,
+    handlers: (a) => new ye({
+      store: a,
+      removeHoverOnMouseleave: !0,
+      isMultiSelectEnabled: () => !1
+    }),
+    resolver: { ...Ee, ...n },
+    ...s,
+    children: r
+  }
+), Le = ({ render: n }) => {
+  const { id: r, hidden: s } = b((t) => ({
+    hidden: ae(t).hidden ?? {}
+  })), { query: a } = l();
+  return E(() => {
+    const t = a.node(r).get(), u = de(t);
+    if (C(u))
+      throw new Error(
+        `The node with id "${t.data.displayName}" does not have a resolved ID. Please check your node configuration.`
+      );
+  }, [r, a]), Object.values(s).some((t) => t === !0) ? /* @__PURE__ */ m(
+    we,
+    {
+      sx: {
+        display: s.xs ? "none" : "contents",
+        sm: {
+          display: s.sm ? "none" : "contents"
+        },
+        md: {
+          display: s.md ? "none" : "contents"
+        },
+        lg: {
+          display: s.lg ? "none" : "contents"
+        }
+      },
+      children: n
+    }
+  ) : n;
+};
+class ye extends v {
+  handlers() {
+    const r = super.handlers();
+    return {
+      ...r,
+      select(s, a) {
+        return (s.getAttribute(ie.DATA_NODE_SELECTABLE) ?? g.True) === g.True ? r.select(s, a) : () => {
+        };
+      }
+    };
+  }
+}
+export {
+  no as C,
+  so as N,
+  to as a,
+  Qe as b,
+  Ke as c,
+  eo as d,
+  je as e,
+  He as f,
+  oo as g,
+  ro as h,
+  Ve as i,
+  Oe as j,
+  Ue as k,
+  Ye as l,
+  _e as m,
+  De as n,
+  $e as o,
+  We as p,
+  Je as q,
+  ze as r,
+  Xe as s,
+  Ze as t,
+  o as u
+};

package/dist/index-tISPdvwn.js

@@ -0,0 +1,4 @@
+import { W as p } from "./tooltip-5WmNiI2z.js";
+export {
+  p as WbTooltip
+};

package/dist/index.js

@@ -1,215 +1,95 @@
-import { u as f, f as T, g as x, h as H, i as _ } from "./dataset-DQ21hyBo.js";
-import { e as ie, A as pe, c as ce, d as ue, j as Ne, B as me, k as le, a as Pe, C as Ie, l as ge, F as fe, m as Te, G as xe, H as be, n as he, I as Ce, L as Le, o as Ae, p as Se, q as ve, P as He, R as _e, S as Me, r as Fe, T as we, s as Ee, v as Re, w as ye, x as Be, U as Ge, y as Ue, V as ke, z as De, D as qe, E as Ve, J as je, K as ze, N as Je, O as Ke, Q as Oe, W as Qe, X as We, Y as Xe } from "./dataset-DQ21hyBo.js";
-import { u as i, D as b, a as h, T as C } from "./countdown-timer.inspector-EFXiJ973.js";
-import { A as Ze, B as $e, b as eo, C as oo, c as so, d as ro, e as to, f as ao, F as no, g as io, G as po, H as co, I as uo, h as No, L as mo, M as lo, N as Po, P as Io, S as go, i as fo, j as To, k as xo, U as bo, V as ho, l as Co, m as Lo, n as Ao, o as So, p as vo, q as Ho, r as _o, s as Mo, t as Fo, v as wo, w as Eo, x as Ro, y as yo, z as Bo, E as Go, J as Uo, K as ko, O as Do, Q as qo, R as Vo } from "./countdown-timer.inspector-EFXiJ973.js";
-import { useNode as L } from "@craftjs/core";
-import { useNode as zo } from "@craftjs/core";
-import { isNil as A } from "lodash-es";
-import { useRef as a, useEffect as S, Fragment as n } from "react";
-import { jsxs as d, jsx as s } from "@emotion/react/jsx-runtime";
-import "flat";
-import { useDebounceCallback as v } from "usehooks-ts";
-import "@janbox/storefront-ui/utils";
-import "@janbox/storefront-ui/hooks";
-import "@emotion/react";
-import "@floating-ui/react";
-import "react-use";
-import "@janbox/storefront-ui/theme";
-import "react-colorful";
-import "overlayscrollbars-react";
-import "@tanstack/react-virtual";
-import "react-dropzone";
-import "react-datepicker";
-import "react-frame-component";
-import { getTextProps as M, getListItemProps as F, getTabPanelProps as w } from "@janbox/storefront-ui";
-const E = () => i(), se = () => {
-  const p = f(), { connectors: c } = L(), u = a(null), {
-    id: N,
-    nodeProps: { dangerouslySetInnerHTML: t, ...m },
-    setNodeProps: l
-  } = E(), o = a(t?.__html), { isActive: r } = T((e, g) => ({
-    isActive: g.getEvent("selected").contains(N)
-  }));
-  S(() => {
-    r || A(o.current) || (l({
-      dangerouslySetInnerHTML: { __html: o.current }
-    }), o.current = void 0);
-  }, [r]);
-  const P = v(({ editor: e }) => {
-    o.current = e.getHTML();
-  }), { mode: I } = x();
-  return /* @__PURE__ */ d(n, { children: [
-    r && I === "full" && /* @__PURE__ */ d(n, { children: [
-      /* @__PURE__ */ s(b, {}),
-      /* @__PURE__ */ s(h, {})
-    ] }),
-    /* @__PURE__ */ s(
-      H,
-      {
-        ...m,
-        ...p,
-        ref: (e) => {
-          e && c.connect(e);
-        },
-        children: /* @__PURE__ */ s(
-          C,
-          {
-            ref: u,
-            options: {
-              content: t?.__html,
-              onUpdate: P
-            }
-          }
-        )
-      }
-    )
-  ] });
-}, R = () => i({
-  transform: M
-}), re = () => {
-  const p = f(), { connectors: c } = L(), u = a(null), {
-    id: N,
-    nodeProps: { dangerouslySetInnerHTML: t, ...m },
-    setNodeProps: l
-  } = R(), o = a(t?.__html), { isActive: r } = T((e, g) => ({
-    isActive: g.getEvent("selected").contains(N)
-  }));
-  S(() => {
-    r || A(o.current) || (l({
-      dangerouslySetInnerHTML: { __html: o.current }
-    }), o.current = void 0);
-  }, [r]);
-  const P = v(({ editor: e }) => {
-    o.current = e.getHTML();
-  }), { mode: I } = x();
-  return /* @__PURE__ */ d(n, { children: [
-    r && I === "full" && /* @__PURE__ */ d(n, { children: [
-      /* @__PURE__ */ s(b, {}),
-      /* @__PURE__ */ s(h, {})
-    ] }),
-    /* @__PURE__ */ s(
-      _,
-      {
-        ...m,
-        ...p,
-        ref: (e) => {
-          e && c.connect(e);
-        },
-        children: /* @__PURE__ */ s(
-          C,
-          {
-            ref: u,
-            options: {
-              content: t?.__html,
-              onUpdate: P
-            }
-          }
-        )
-      }
-    )
-  ] });
-}, te = () => i({
-  transform: F
-}), ae = () => i({
-  transform: w
+import { A as c, a as g, b, c as C, B as x, d as f, C as T, e as I, f as L, g as S, F as A, h as v, G as w, H as R, i as h, I as k, j as q, L as B, k as F, M as G, l as H, P as M, R as U, S as y, m as D, T as V, n as j, o as E, p as z, q as J, U as K, r as O, V as Q, s as W, u as X, v as Y, w as Z, x as _, y as $, z as ee, D as oe, E as se, J as ae, K as re, N as de, O as Ne } from "./countdown-timer.node-d0EtGQ4_.js";
+import { u as e } from "./index-fErSlbD2.js";
+import { C as ne, a as pe, N as ue, b as ie, c as Pe, d as me, e as le, f as ce, g as ge, h as be, i as Ce, j as xe, k as fe, l as Te, m as Ie, n as Le, o as Se, p as Ae, q as ve, r as we, s as Re, t as he } from "./index-fErSlbD2.js";
+import { getTextProps as s, getTabPanelProps as a, getListItemProps as r } from "@janbox/storefront-ui";
+import { useNode as qe } from "@craftjs/core";
+import "lodash-es";
+import "react";
+const p = () => e({
+  transform: (o) => s({
+    ...o,
+    as: o.as ?? "div"
+  })
+}), u = () => e({
+  transform: s
+}), i = () => e({
+  transform: a
+}), P = () => e({
+  transform: r
 });
 export {
-  ie as AccordionContentNode,
-  Ze as AccordionGroupInspector,
-  pe as AccordionGroupNode,
-  ce as AccordionNode,
-  ue as AccordionSummaryNode,
-  $e as BoxInspector,
-  Ne as BoxNode,
-  eo as ButtonInspector,
-  me as ButtonNode,
-  oo as Canvas,
-  le as CanvasPlaceholder,
-  so as CellInspector,
-  Pe as CellNode,
-  ro as Composer,
-  to as ContainerInspector,
-  Ie as ContainerNode,
-  ao as CountdownTimerInspector,
-  ge as CountdownTimerNode,
-  no as FlexItemInspector,
-  fe as FlexItemNode,
-  io as FlexboxInspector,
-  Te as FlexboxNode,
-  po as GridInspector,
-  xe as GridNode,
-  _ as Heading,
-  co as HeadingInspector,
-  be as HeadingNode,
-  re as HeadingRenderer,
-  uo as IconInspector,
-  he as IconNode,
-  No as ImageInspector,
-  Ce as ImageNode,
-  mo as LinkInspector,
-  Le as LinkNode,
-  Ae as ListItemNode,
-  lo as MarqueeInspector,
-  Se as MarqueeItemNode,
-  ve as MarqueeNode,
-  Po as NodeElement,
-  Io as ParagraphInspector,
-  He as ParagraphNode,
-  se as ParagraphRenderer,
-  _e as RootNode,
-  go as SizeField,
-  fo as SwiperInspector,
-  Me as SwiperNode,
-  Fe as SwiperSlideNode,
-  we as TabContentNode,
-  Ee as TabListNode,
-  Re as TabNode,
-  ye as TabPanelNode,
-  To as TabsInspector,
-  Be as TabsNode,
-  xo as TextInspector,
-  Ge as UnknownNode,
-  bo as UnorderedListInspector,
-  Ue as UnorderedListNode,
-  ho as VariantField,
-  Co as VideoInspector,
-  ke as VideoNode,
-  De as defineNode,
-  qe as getNodeCustom,
-  Ve as getNodeDisplayName,
-  je as getNodeInfo,
-  ze as getNodeRelated,
-  Je as getNodeResolved,
-  Ke as isNodeSelectable,
-  Oe as parseNumber,
-  Qe as parseSvgString,
-  We as registerNodeRelated,
-  Xe as toResponsiveCss,
-  Lo as useAccordionGroupNodeProps,
-  Ao as useAccordionNodeProps,
-  So as useBoxNodeProps,
-  vo as useButtonNodeProps,
-  Ho as useCellNodeProps,
-  T as useComposer,
-  _o as useContainerNodeProps,
-  Mo as useCountdownTimerNodeProps,
-  Fo as useFlexItemNodeProps,
-  wo as useFlexboxNodeProps,
-  Eo as useGridNodeProps,
-  R as useHeadingNodeProps,
-  Ro as useIconNodeProps,
-  yo as useImageNodeProps,
-  Bo as useLinkNodeProps,
-  te as useListItemNodeProps,
-  Go as useMarqueeNodeProps,
-  zo as useNode,
-  f as useNodeDataAttributes,
-  i as useNodeProps,
-  E as useParagraphNodeProps,
-  Uo as useSwiperNodeProps,
-  ko as useTabNodeProps,
-  ae as useTabPanelNodeProps,
-  Do as useTabsNodeProps,
-  qo as useUnorderedListNodeProps,
-  Vo as useVideoNodeProps
+  c as AccordionContentNode,
+  g as AccordionGroupNode,
+  b as AccordionNode,
+  C as AccordionSummaryNode,
+  x as BoxNode,
+  f as ButtonNode,
+  ne as Canvas,
+  T as CanvasPlaceholder,
+  I as CellNode,
+  pe as Composer,
+  L as ContainerNode,
+  S as CountdownTimerNode,
+  A as FlexItemNode,
+  v as FlexboxNode,
+  w as GridNode,
+  R as Heading,
+  h as HeadingNode,
+  k as IconNode,
+  q as ImageNode,
+  B as LinkNode,
+  F as ListItemNode,
+  G as MarqueeItemNode,
+  H as MarqueeNode,
+  ue as NodeElement,
+  M as ParagraphNode,
+  U as RootNode,
+  y as SwiperNode,
+  D as SwiperSlideNode,
+  V as TabContentNode,
+  j as TabListNode,
+  E as TabNode,
+  z as TabPanelNode,
+  J as TabsNode,
+  K as UnknownNode,
+  O as UnorderedListNode,
+  Q as VideoNode,
+  W as defineNode,
+  X as getNodeCustom,
+  Y as getNodeDisplayName,
+  Z as getNodeInfo,
+  _ as getNodeRelated,
+  $ as getNodeResolved,
+  ee as isNodeSelectable,
+  oe as parseNumber,
+  se as parseSvgString,
+  ae as registerNodeRelated,
+  re as toResponsiveCss,
+  ie as useAccordionGroupNodeProps,
+  Pe as useAccordionNodeProps,
+  me as useBoxNodeProps,
+  le as useButtonNodeProps,
+  ce as useCellNodeProps,
+  de as useComposer,
+  ge as useContainerNodeProps,
+  be as useCountdownTimerNodeProps,
+  Ce as useFlexItemNodeProps,
+  xe as useFlexboxNodeProps,
+  fe as useGridNodeProps,
+  u as useHeadingNodeProps,
+  Te as useIconNodeProps,
+  Ie as useImageNodeProps,
+  Le as useLinkNodeProps,
+  P as useListItemNodeProps,
+  Se as useMarqueeNodeProps,
+  qe as useNode,
+  Ne as useNodeDataAttributes,
+  e as useNodeProps,
+  p as useParagraphNodeProps,
+  Ae as useSwiperNodeProps,
+  ve as useTabNodeProps,
+  i as useTabPanelNodeProps,
+  we as useTabsNodeProps,
+  Re as useUnorderedListNodeProps,
+  he as useVideoNodeProps
 };

package/dist/lib/accordion-group/index.d.ts

@@ -1,2 +1 @@
 export * from './accordion-group.node';
-export * from './accordion-group.inspector';

package/dist/lib/box/README.md

@@ -8,12 +8,6 @@ Block container đa năng (render ra `div`). Là canvas node — chứa bất k
 
 ## Configurable props
 
-### Top-level props
-
-| Prop | Type | Description |
-| --- | --- | --- |
-| `container` | `boolean` | Bật max-width container constraint |
-
 ### `sx` props
 
 ```ts
@@ -66,8 +60,8 @@ sx?: {
 import { BoxNode } from '@janbox/storefront-builder';
 
 // Wrapper đơn giản
-<BoxNode sx={{ padding: 16 }}>
-  <TextNode>Hello</TextNode>
+<BoxNode sx={{ paddingTop: 16, paddingRight: 16, paddingBottom: 16, paddingLeft: 16 }}>
+  <HeadingNode as="h2">Hello</HeadingNode>
 </BoxNode>
 
 // Section có background
@@ -81,9 +75,8 @@ import { BoxNode } from '@janbox/storefront-builder';
   ...
 </BoxNode>
 
-// Container với responsive padding
+// Responsive padding
 <BoxNode
-  container
   sx={{
     paddingTop: 24,
     paddingBottom: 24,

package/dist/lib/box/index.d.ts

@@ -1,2 +1 @@
 export * from './box.node';
-export * from './box.inspector';

package/dist/lib/button/README.md

@@ -13,7 +13,7 @@ CTA button node dùng component `Button` từ `@janbox/storefront-ui`. Có thể
 | Prop | Type | Description |
 | --- | --- | --- |
 | `dangerouslySetInnerHTML.__html` | `string` | Text hiển thị trong button |
-| `color` | `ColorVariant` | Màu theme của button |
+| `color` | `ColorScale` | Màu theme của button |
 | `variant` | `ButtonVariant` | Kiểu hiển thị của button |
 | `size` | `ButtonSizeVariant` | Kích thước button |
 | `anchor.to` | `string \| { pathname: string }` | Link destination |
@@ -21,7 +21,7 @@ CTA button node dùng component `Button` từ `@janbox/storefront-ui`. Có thể
 
 `size` hỗ trợ responsive: `size="sm"` xs, `md={{ size: 'lg' }}` desktop.
 
-**`ColorVariant`:** `'primary' | 'secondary' | 'green' | 'red' | 'orange' | 'blue' | 'neutral'`
+**`ColorScale`:** `'primary' | 'secondary' | 'green' | 'red' | 'orange' | 'blue' | 'neutral' | 'yellow' | 'violet'`
 
 **`ButtonVariant`:** `'contained' | 'outlined' | 'text'`
 

package/dist/lib/button/index.d.ts

@@ -1,2 +1 @@
 export * from './button.node';
-export * from './button.inspector';

package/dist/lib/cell/index.d.ts

@@ -1,2 +1 @@
 export * from './cell.node';
-export * from './cell.inspector';