@janbox/storefront-builder 1.0.7 → 1.0.9

package/dist/index.js

@@ -1,112 +1,374 @@
-import { A as m, a as I, b as P, d as l, B as g, e as x, C as b, f as C, g as T, F as L, h as S, G as f, H as w, i as A, I as F, j as R, L as v, k as B, M as G, l as h, P as H, R as k, m as q, S as M, n as U, T as V, o as y, p as D, q as z, r as j, U as E, s as J, V as K, c as O, t as Q, u as W, v as X, w as Y, x as Z, y as _, z as $, D as ee, E as se, J as oe, K as ae, N as re, O as de } from "./countdown-timer.node-CGKz1DZI.js";
-import { u as e } from "./index-Du5uN6Rq.js";
-import { A as ne, B as pe, a as Ne, C as ie, b as ue, c as ce, d as me, F as Ie, e as Pe, G as le, H as ge, f as xe, I as be, g as Ce, L as Te, M as Le, P as Se, h as fe, S as we, i as Ae, T as Fe, j as Re, U as ve, V as Be, k as Ge, l as he, m as He, n as ke, o as qe, p as Me, q as Ue, r as Ve, s as ye, t as De, v as ze, w as je, x as Ee, y as Je, z as Ke, D as Oe, E as Qe, J as We, K as Xe, N as Ye, O as Ze } from "./index-Du5uN6Rq.js";
-import { useNode as $e } from "@craftjs/core";
-import "lodash-es";
-import "react";
+import { u as x, P as B, H } from "./countdown-timer.node-j79tvSTR.js";
+import { A as Ee, a as _e, b as Re, c as Ve, B as De, d as je, C as qe, e as Ge, f as We, g as Oe, F as Ke, h as Ze, G as Je, i as Qe, I as $e, j as Xe, L as Ye, k as eo, M as oo, l as to, m as so, R as ro, n as no, S as ao, o as io, T as co, p as lo, q as uo, r as po, s as mo, U as No, t as fo, V as go } from "./countdown-timer.node-j79tvSTR.js";
+import { D as v, a as k } from "./index-C9Q0Iqvf.js";
+import { A as wo, B as Io, b as Po, C as So, c as bo, d as Co, e as xo, f as vo, F as ko, g as To, G as yo, H as Lo, I as Ao, h as Mo, L as Bo, M as Ho, P as zo, S as Fo, i as Uo, T as Eo, j as _o, U as Ro, V as Vo, k as Do, u as jo, l as qo, m as Go, n as Wo, o as Oo, p as Ko, q as Zo, r as Jo, s as Qo, t as $o, v as Xo, w as Yo, x as et, y as ot, z as tt, E as st, J as rt, K as nt, N as at } from "./index-C9Q0Iqvf.js";
+import { useNode as P } from "@craftjs/core";
+import { useNode as dt } from "@craftjs/core";
+import { isString as b, isNil as T } from "lodash-es";
+import { Fragment as N, useState as z, useEffect as S, useRef as h } from "react";
 import "clsx";
 import "tailwind-merge";
-import { getTabPanelProps as s, getListItemProps as o } from "@janbox/storefront-ui";
-const N = () => e({
-  transform: s
-}), i = () => e({
-  transform: o
+import { y as C, l as f, W as g } from "./dialog-header-DPLOS7TT.js";
+import { c as lt, z as ut } from "./dialog-header-DPLOS7TT.js";
+import { u as F, I as U, U as E, v as w, w as y } from "./anchor-target-BlOvysAr.js";
+import { jsxs as l, jsx as e } from "@emotion/react/jsx-runtime";
+import "flat";
+import { C as _, u as L } from "./color-picker-popover-B3AVFuei.js";
+import { d as mt, g as Nt, a as ft, b as gt, c as ht, e as wt, i as It, r as Pt, t as St } from "./color-picker-popover-B3AVFuei.js";
+import { useDebounceCallback as A } from "usehooks-ts";
+import "@janbox/storefront-ui/hooks";
+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/dist/react-datepicker.css";
+import "react-datepicker";
+import { TextStyleKit as R } from "@tiptap/extension-text-style";
+import { useEditor as V, EditorContent as D, useEditorState as j } from "@tiptap/react";
+import { BubbleMenu as q } from "@tiptap/react/menus";
+import { StarterKit as G } from "@tiptap/starter-kit";
+import { useFrame as W } from "react-frame-component";
+import { c as O } from "./dropzone-Dbfed3jK.js";
+import "@emotion/react";
+import { getTextProps as K, getTabPanelProps as Z, getListItemProps as J } from "@janbox/storefront-ui";
+const Q = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.221 4.29206V4.29206C19.438 3.50906 18.183 3.46806 17.35 4.19606L9.31298 11.2281C8.44198 11.9901 8.39798 13.3291 9.21598 14.1471L10.365 15.2961C11.183 16.1141 12.523 16.0691 13.284 15.1991L20.316 7.16206C21.045 6.33006 21.003 5.07506 20.221 4.29206V4.29206Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.87 9.87012L14.65 13.6501" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.59903 20.3231H7.30203C10.287 20.3231 11.782 16.7141 9.67103 14.6031V14.6031C8.11903 13.0511 5.48303 13.6221 4.71303 15.6771L3.19103 19.7351C3.08503 20.0201 3.29503 20.3231 3.59903 20.3231Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, $ = ({ editor: s }) => {
+  const [c, a] = z(!1), { nodeDOM: d } = P((t) => ({
+    nodeDOM: t.dom
+  }));
+  S(() => {
+    const t = () => {
+      a((p) => p && s.state.selection.from !== s.state.selection.to);
+    };
+    return s.on("selectionUpdate", t), () => {
+      s.off("selectionUpdate", t);
+    };
+  }, [s]);
+  const o = j({
+    editor: s,
+    selector(t) {
+      return {
+        isBold: t.editor.isActive("bold") ?? !1,
+        canBold: t.editor.can().chain().toggleBold().run() ?? !1,
+        isItalic: t.editor.isActive("italic") ?? !1,
+        canItalic: t.editor.can().chain().toggleItalic().run() ?? !1,
+        isStrike: t.editor.isActive("strike") ?? !1,
+        canStrike: t.editor.can().chain().toggleStrike().run() ?? !1,
+        textStyle: s.isActive("textStyle") ? t.editor.getAttributes("textStyle") : {}
+      };
+    }
+  }), m = (() => {
+    if (o.textStyle.fontSize && b(o.textStyle.fontSize))
+      return C(o.textStyle.fontSize);
+  })(), u = o.textStyle.color && b(o.textStyle.color) ? o.textStyle.color : d?.computedStyleMap().get("color")?.toString(), r = (t) => {
+    s.chain().focus().setColor(t).run(), a(!1);
+  }, i = (t) => {
+    if (isNaN(t.target.valueAsNumber)) {
+      s.chain().focus().unsetFontSize().run();
+      return;
+    }
+    s.chain().focus().setFontSize(`${t.target.valueAsNumber}px`).run();
+  };
+  return /* @__PURE__ */ l("div", { className: "tw:bg-ic-ink-6s tw:text-white tw:py-1 tw:px-1.5 tw:rounded tw:text-xs tw:flex tw:items-center tw:gap-2 tw:border tw:border-ic-white-2s tw:shadow tw:shadow-ic-white-2s", children: [
+    /* @__PURE__ */ e("div", { className: "tw:w-28 tw:flex-shrink-0", children: /* @__PURE__ */ e(
+      O,
+      {
+        value: m ?? "",
+        placeholder: C(d?.computedStyleMap().get("font-size")?.toString())?.toString(),
+        onChange: i,
+        debounce: 400,
+        min: 10,
+        className: "tw:text-center",
+        step: 1,
+        fullWidth: !0
+      }
+    ) }),
+    /* @__PURE__ */ e("div", { className: "tw:h-5 tw:w-px tw:bg-ic-white-1s" }),
+    /* @__PURE__ */ e(
+      f,
+      {
+        title: "Bold",
+        size: "28",
+        isHighlighted: o.isBold,
+        onClick: () => s.chain().focus().toggleBold().run(),
+        disabled: !o.canBold,
+        children: /* @__PURE__ */ e(g, { source: F })
+      }
+    ),
+    /* @__PURE__ */ e(
+      f,
+      {
+        size: "28",
+        title: "Italic",
+        isHighlighted: o.isItalic,
+        onClick: () => s.chain().focus().toggleItalic().run(),
+        disabled: !o.canItalic,
+        children: /* @__PURE__ */ e(g, { source: U })
+      }
+    ),
+    /* @__PURE__ */ e(
+      f,
+      {
+        size: "28",
+        title: "Underline",
+        isHighlighted: o.isStrike,
+        onClick: () => s.chain().focus().toggleStrike().run(),
+        disabled: !o.canStrike,
+        children: /* @__PURE__ */ e(g, { source: E })
+      }
+    ),
+    /* @__PURE__ */ e(
+      _,
+      {
+        open: c,
+        onOpenChange: a,
+        placement: "bottom",
+        color: u,
+        onChange: r,
+        children: /* @__PURE__ */ e(f, { size: "28", title: "Underline", children: /* @__PURE__ */ l("div", { className: "tw:relative tw:size-5 tw:flex tw:flex-col tw:items-center tw:justify-center", children: [
+          /* @__PURE__ */ e(g, { size: 18, source: Q }),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              style: { backgroundColor: u },
+              className: "tw:absolute tw:inset-x-0 tw:h-1 tw:-bottom-1 tw:rounded tw:border tw:border-ic-white-1s"
+            }
+          )
+        ] }) })
+      }
+    )
+  ] });
+}, M = ({ options: s, deps: c, ref: a }) => {
+  const { document: d } = W(), o = V(
+    {
+      ...s,
+      extensions: [G, R, ...s?.extensions ?? []]
+    },
+    c
+  );
+  return /* @__PURE__ */ l(N, { children: [
+    /* @__PURE__ */ e(
+      D,
+      {
+        css: {
+          ".tiptap": {
+            outline: "none"
+          }
+        },
+        editor: o,
+        ref: a
+      }
+    ),
+    /* @__PURE__ */ e(
+      q,
+      {
+        appendTo: document.body,
+        getReferencedVirtualElement: () => d?.activeElement ?? null,
+        editor: o,
+        children: /* @__PURE__ */ e($, { editor: o })
+      }
+    )
+  ] });
+}, X = () => w(), Me = () => {
+  const s = x(), { connectors: c } = P(), a = h(null), {
+    id: d,
+    nodeProps: { dangerouslySetInnerHTML: o, ...m },
+    setNodeProps: u
+  } = X(), r = h(o?.__html), { isActive: i } = L((n, I) => ({
+    isActive: I.getEvent("selected").contains(d)
+  }));
+  S(() => {
+    i || T(r.current) || (u({
+      dangerouslySetInnerHTML: { __html: r.current }
+    }), r.current = void 0);
+  }, [i]);
+  const t = A(({ editor: n }) => {
+    r.current = n.getHTML();
+  }), {
+    queryParams: { mode: p }
+  } = y();
+  return /* @__PURE__ */ l(N, { children: [
+    i && p === "full" && /* @__PURE__ */ l(N, { children: [
+      /* @__PURE__ */ e(v, {}),
+      /* @__PURE__ */ e(k, {})
+    ] }),
+    /* @__PURE__ */ e(
+      B,
+      {
+        ...m,
+        ...s,
+        ref: (n) => {
+          n && c.connect(n);
+        },
+        children: /* @__PURE__ */ e(
+          M,
+          {
+            ref: a,
+            options: {
+              content: o?.__html,
+              onUpdate: t
+            }
+          }
+        )
+      }
+    )
+  ] });
+}, Y = () => w({
+  transform: K
+}), Be = () => {
+  const s = x(), { connectors: c } = P(), a = h(null), {
+    id: d,
+    nodeProps: { dangerouslySetInnerHTML: o, ...m },
+    setNodeProps: u
+  } = Y(), r = h(o?.__html), { isActive: i } = L((n, I) => ({
+    isActive: I.getEvent("selected").contains(d)
+  }));
+  S(() => {
+    i || T(r.current) || (u({
+      dangerouslySetInnerHTML: { __html: r.current }
+    }), r.current = void 0);
+  }, [i]);
+  const t = A(({ editor: n }) => {
+    r.current = n.getHTML();
+  }), {
+    queryParams: { mode: p }
+  } = y();
+  return /* @__PURE__ */ l(N, { children: [
+    i && p === "full" && /* @__PURE__ */ l(N, { children: [
+      /* @__PURE__ */ e(v, {}),
+      /* @__PURE__ */ e(k, {})
+    ] }),
+    /* @__PURE__ */ e(
+      H,
+      {
+        ...m,
+        ...s,
+        ref: (n) => {
+          n && c.connect(n);
+        },
+        children: /* @__PURE__ */ e(
+          M,
+          {
+            ref: a,
+            options: {
+              content: o?.__html,
+              onUpdate: t
+            }
+          }
+        )
+      }
+    )
+  ] });
+}, He = () => w({
+  transform: Z
+}), ze = () => w({
+  transform: J
 });
 export {
-  m as AccordionContentNode,
-  ne as AccordionGroupInspector,
-  I as AccordionGroupNode,
-  P as AccordionNode,
-  l as AccordionSummaryNode,
-  pe as BoxInspector,
-  g as BoxNode,
-  Ne as ButtonInspector,
-  x as ButtonNode,
-  ie as Canvas,
-  b as CanvasPlaceholder,
-  ue as CellInspector,
-  C as CellNode,
-  ce as Composer,
-  me as CountdownTimerInspector,
-  T as CountdownTimerNode,
-  Ie as FlexItemInspector,
-  L as FlexItemNode,
-  Pe as FlexboxInspector,
-  S as FlexboxNode,
-  le as GridInspector,
-  f as GridNode,
-  w as Heading,
-  ge as HeadingInspector,
-  A as HeadingNode,
-  xe as HeadingRenderer,
-  be as IconInspector,
-  F as IconNode,
-  Ce as ImageInspector,
-  R as ImageNode,
-  Te as LinkInspector,
-  v as LinkNode,
-  B as ListItemNode,
-  Le as MarqueeInspector,
-  G as MarqueeItemNode,
-  h as MarqueeNode,
-  Se as ParagraphInspector,
-  H as ParagraphNode,
-  fe as ParagraphRenderer,
-  k as Resolver,
-  q as RootNode,
-  we as SizeField,
-  Ae as SwiperInspector,
-  M as SwiperNode,
-  U as SwiperSlideNode,
-  V as TabContentNode,
-  y as TabListNode,
-  D as TabNode,
-  z as TabPanelNode,
-  Fe as TabsInspector,
-  j as TabsNode,
-  Re as TextInspector,
-  E as UnknownNode,
-  ve as UnorderedListInspector,
-  J as UnorderedListNode,
-  Be as VariantField,
-  Ge as VideoInspector,
-  K as VideoNode,
-  O as cn,
-  Q as defineNode,
-  W as getNodeCustom,
-  X as getNodeDisplayName,
-  Y as getNodeInfo,
-  Z as getNodeRelated,
-  _ as getNodeResolved,
-  $ as isNodeSelectable,
-  ee as parseNumber,
-  se as parseSvgString,
-  oe as registerNodeRelated,
-  ae as toResponsiveCss,
-  he as useAccordionGroupNodeProps,
-  He as useAccordionNodeProps,
-  ke as useBoxNodeProps,
-  qe as useButtonNodeProps,
-  Me as useCellNodeProps,
-  re as useComposer,
-  Ue as useCountdownTimerNodeProps,
-  Ve as useFlexItemNodeProps,
-  ye as useFlexboxNodeProps,
-  De as useGridNodeProps,
-  ze as useHeadingNodeProps,
-  je as useIconNodeProps,
-  Ee as useImageNodeProps,
-  Je as useLinkNodeProps,
-  i as useListItemNodeProps,
-  Ke as useMarqueeNodeProps,
-  $e as useNode,
-  de as useNodeDataAttributes,
-  e as useNodeProps,
-  Oe as useParagraphNodeProps,
-  Qe as useSwiperNodeProps,
-  We as useTabNodeProps,
-  N as useTabPanelNodeProps,
-  Xe as useTabsNodeProps,
-  Ye as useUnorderedListNodeProps,
-  Ze as useVideoNodeProps
+  Ee as AccordionContentNode,
+  wo as AccordionGroupInspector,
+  _e as AccordionGroupNode,
+  Re as AccordionNode,
+  Ve as AccordionSummaryNode,
+  Io as BoxInspector,
+  De as BoxNode,
+  Po as ButtonInspector,
+  je as ButtonNode,
+  So as Canvas,
+  qe as CanvasPlaceholder,
+  bo as CellInspector,
+  Ge as CellNode,
+  Co as Composer,
+  xo as ContainerInspector,
+  We as ContainerNode,
+  vo as CountdownTimerInspector,
+  Oe as CountdownTimerNode,
+  ko as FlexItemInspector,
+  Ke as FlexItemNode,
+  To as FlexboxInspector,
+  Ze as FlexboxNode,
+  yo as GridInspector,
+  Je as GridNode,
+  H as Heading,
+  Lo as HeadingInspector,
+  Qe as HeadingNode,
+  Be as HeadingRenderer,
+  Ao as IconInspector,
+  $e as IconNode,
+  Mo as ImageInspector,
+  Xe as ImageNode,
+  Bo as LinkInspector,
+  Ye as LinkNode,
+  eo as ListItemNode,
+  Ho as MarqueeInspector,
+  oo as MarqueeItemNode,
+  to as MarqueeNode,
+  zo as ParagraphInspector,
+  so as ParagraphNode,
+  Me as ParagraphRenderer,
+  ro as Resolver,
+  no as RootNode,
+  Fo as SizeField,
+  Uo as SwiperInspector,
+  ao as SwiperNode,
+  io as SwiperSlideNode,
+  co as TabContentNode,
+  lo as TabListNode,
+  uo as TabNode,
+  po as TabPanelNode,
+  Eo as TabsInspector,
+  mo as TabsNode,
+  _o as TextInspector,
+  No as UnknownNode,
+  Ro as UnorderedListInspector,
+  fo as UnorderedListNode,
+  Vo as VariantField,
+  Do as VideoInspector,
+  go as VideoNode,
+  lt as cn,
+  mt as defineNode,
+  Nt as getNodeCustom,
+  ft as getNodeDisplayName,
+  gt as getNodeInfo,
+  ht as getNodeRelated,
+  wt as getNodeResolved,
+  It as isNodeSelectable,
+  C as parseNumber,
+  ut as parseSvgString,
+  Pt as registerNodeRelated,
+  St as toResponsiveCss,
+  jo as useAccordionGroupNodeProps,
+  qo as useAccordionNodeProps,
+  Go as useBoxNodeProps,
+  Wo as useButtonNodeProps,
+  Oo as useCellNodeProps,
+  L as useComposer,
+  Ko as useContainerNodeProps,
+  Zo as useCountdownTimerNodeProps,
+  Jo as useFlexItemNodeProps,
+  Qo as useFlexboxNodeProps,
+  $o as useGridNodeProps,
+  Y as useHeadingNodeProps,
+  Xo as useIconNodeProps,
+  Yo as useImageNodeProps,
+  et as useLinkNodeProps,
+  ze as useListItemNodeProps,
+  ot as useMarqueeNodeProps,
+  dt as useNode,
+  x as useNodeDataAttributes,
+  w as useNodeProps,
+  X as useParagraphNodeProps,
+  tt as useSwiperNodeProps,
+  st as useTabNodeProps,
+  He as useTabPanelNodeProps,
+  rt as useTabsNodeProps,
+  nt as useUnorderedListNodeProps,
+  at as useVideoNodeProps
 };

package/dist/lib/container/container.inspector/container.inspector.d.ts

@@ -0,0 +1 @@
+export declare const ContainerInspector: () => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/lib/container/container.inspector/index.d.ts

@@ -0,0 +1 @@
+export * from './container.inspector';

package/dist/lib/container/container.node/container.node.d.ts

@@ -0,0 +1,2 @@
+import { ContainerNodeProps } from './types';
+export declare const ContainerNode: ({ children, ...props }: ContainerNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/lib/container/container.node/index.d.ts

@@ -0,0 +1,3 @@
+export * from './container.node';
+export * from './types';
+export * from './helpers';

package/dist/lib/container/container.node/types.d.ts

@@ -0,0 +1,2 @@
+import { ContainerProps } from '@janbox/storefront-ui';
+export type ContainerNodeProps = ContainerProps;

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

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

package/dist/lib/index.d.ts

@@ -28,4 +28,5 @@ export * from './accordion-content';
 export * from './accordion-group';
 export * from './video';
 export * from './box';
+export * from './container';
 export * from './countdown-timer';