@janbox/storefront-builder 2.0.10 → 2.0.12

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/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.js

@@ -1,6 +1,6 @@
 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-3PtMdwiC.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-3PtMdwiC.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";

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/types/index.d.ts

@@ -14,15 +14,14 @@ export type NodeCustom = {
     displayName?: string;
     selectable?: boolean;
     deletable?: boolean;
-    dropzone?: boolean;
+    hidden?: Partial<Record<Screen, boolean>>;
 };
 export type NodeRelated = {
-    inspector?: React.ComponentType<any>;
+    inspector?: React.ComponentType;
     renderer?: React.ComponentType<{
         render: React.ReactElement;
     }>;
 };
-export type DisplayOnValue = Partial<Record<Screen, boolean>>;
 export type NodeConfig<T = object> = ShallowMerge<Partial<UserComponentConfig<T>>, {
     info: NodeInfo;
     custom?: NodeCustom;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@janbox/storefront-builder",
-  "version": "2.0.10",
+  "version": "2.0.12",
   "description": "Standalone storefront builder library extracted from craft-layers-portal",
   "type": "module",
   "files": [
@@ -59,7 +59,7 @@
     "@types/react-dom": "^19.1.6",
     "@types/react-frame-component": "^4.1.6",
     "type-fest": "^5.5.0",
-    "@janbox/storefront-ui": "latest"
+    "@janbox/storefront-ui": "^4.0.0"
   },
   "publishConfig": {
     "access": "public"

package/dist/editor/toolbars/display-on/display-on.d.ts

@@ -1,5 +0,0 @@
-interface DisplayOnToolbarProps {
-    propertyPath?: string;
-}
-export declare const DisplayOnToolbar: ({ propertyPath }: DisplayOnToolbarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export {};

package/dist/editor/toolbars/display-on/index.d.ts

@@ -1 +0,0 @@
-export * from './display-on';

package/dist/index-3PtMdwiC.js

@@ -1,188 +0,0 @@
-import { useNode as T, Element as C, Frame as I, Editor as v, DefaultEventHandlers as A } from "@craftjs/core";
-import { isFunction as w, merge as x, set as h, isNil as g, isString as P } from "lodash-es";
-import { useMemo as E, useEffect as L } from "react";
-import { N, W as e, g as S, A as k, c as B, b as F, a as y, p as M, T as q, o as G, n as R, q as U, M as D, l as H, 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 te, R as ne, y as ae, X as de, Y as f } from "./countdown-timer.node-d0EtGQ4_.js";
-import { getGridProps as ue, getCellProps as ie, getLinkProps as ce, getButtonProps as pe, getFlexboxProps as Ne, getFlexItemProps as me, getImageProps as le, getMarqueeProps as Pe, getTabsProps as fe, getSwiperProps as ge, getUnorderedListProps as be, getIconProps as Te, getAccordionProps as Ce, getAccordionGroupProps as Ie, getVideoProps as ve, getBoxProps as Ae, getContainerProps as we } from "@janbox/storefront-ui";
-import { jsx as b } from "@emotion/react/jsx-runtime";
-import { flatten as xe } from "flat";
-const o = (s = {}) => {
-  const { id: r } = T(), t = s?.nodeId ?? r, { nodeProps: n, actions: a } = N((d) => ({
-    nodeProps: d.nodes[t ?? r]?.data.props ?? {}
-  })), u = (d, c) => w(d) ? a.setProp(t, d) : a.setProp(t, (p) => {
-    if (c?.merge) {
-      x(p, d);
-      return;
-    }
-    const m = xe(d);
-    Object.keys(m).forEach((l) => {
-      h(p, l, m[l]);
-    });
-  }), i = (d, c, p) => u(
-    c === "xs" ? d : {
-      [c]: d
-    },
-    p
-  );
-  return {
-    id: t,
-    nodeProps: s?.transform?.(n) ?? n,
-    setNodeProps: u,
-    setNodeResponsiveProps: i
-  };
-}, Ge = () => o({
-  transform: ue
-}), Re = () => o({
-  transform: ie
-}), Ue = () => o({
-  transform: ce
-}), De = () => o({
-  transform: pe
-}), He = () => o({
-  transform: Ne
-}), je = () => o({
-  transform: me
-}), Oe = () => o({
-  transform: le
-}), Ve = () => o({
-  transform: Pe
-}), _e = (s) => o({
-  transform: fe,
-  nodeId: s
-}), $e = (s) => o({
-  nodeId: s
-}), ze = () => o({
-  transform: ge
-}), Je = () => o({
-  transform: be
-}), We = () => o({
-  transform: Te
-}), Xe = (s) => o({
-  transform: Ce,
-  nodeId: s
-}), Ye = () => o({
-  transform: Ie
-}), Ke = () => o({
-  transform: ve
-}), Qe = () => o({
-  transform: Ae
-}), Ze = () => o({
-  transform: we
-}), eo = () => o(), oo = C, ro = ({ children: s, data: r }) => {
-  const { resolver: t } = N((a) => ({
-    resolver: a.options.resolver
-  })), n = E(() => {
-    if (g(r)) return r;
-    const a = P(r) ? JSON.parse(r) : r;
-    return Object.entries(a).forEach(([, u]) => {
-      const i = P(u.type) ? u.type : u.type.resolvedName;
-      t[i] || (console.error(`Unknown node: ${i}`), u.type = {
-        resolvedName: e.Unknown
-      });
-    }), a;
-  }, [r, t]);
-  return /* @__PURE__ */ b(I, { data: n, children: s });
-}, he = {
-  // Root
-  [e.Root]: ne,
-  // Unknown
-  [e.Unknown]: te,
-  // 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]: H,
-  [e.MarqueeItem]: D,
-  // Tabs
-  [e.Tabs]: U,
-  [e.TabList]: R,
-  [e.Tab]: G,
-  [e.TabContent]: q,
-  [e.TabPanel]: M,
-  // Accordion
-  [e.AccordionGroup]: y,
-  [e.Accordion]: F,
-  [e.AccordionSummary]: B,
-  [e.AccordionContent]: k,
-  // Timer
-  [e.CountdownTimer]: S
-}, so = ({ resolver: s, children: r, ...t }) => /* @__PURE__ */ b(
-  v,
-  {
-    enabled: !1,
-    onRender: Ee,
-    handlers: (n) => new Le({
-      store: n,
-      removeHoverOnMouseleave: !0,
-      isMultiSelectEnabled: () => !1
-    }),
-    resolver: { ...he, ...s },
-    ...t,
-    children: r
-  }
-), Ee = ({ render: s }) => {
-  const { id: r } = o(), { query: t } = N();
-  return L(() => {
-    const n = t.node(r).get(), a = ae(n);
-    if (g(a))
-      throw new Error(
-        `The node with id "${n.data.displayName}" does not have a resolved ID. Please check your node configuration.`
-      );
-  }, [r, t]), s;
-};
-class Le extends A {
-  handlers() {
-    const r = super.handlers();
-    return {
-      ...r,
-      select(t, n) {
-        return (t.getAttribute(de.DATA_NODE_SELECTABLE) ?? f.True) === f.True ? r.select(t, n) : () => {
-        };
-      }
-    };
-  }
-}
-export {
-  ro as C,
-  oo as N,
-  so as a,
-  Ye as b,
-  Xe as c,
-  Qe as d,
-  De as e,
-  Re as f,
-  Ze as g,
-  eo as h,
-  je as i,
-  He as j,
-  Ge as k,
-  We as l,
-  Oe as m,
-  Ue as n,
-  Ve as o,
-  ze as p,
-  $e as q,
-  _e as r,
-  Je as s,
-  Ke as t,
-  o as u
-};