@janbox/storefront-builder 1.0.8 → 2.0.0

package/dist/dropzone-Dbfed3jK.js

@@ -0,0 +1,490 @@
+import { jsx as n, jsxs as k, Fragment as q } from "@emotion/react/jsx-runtime";
+import { Children as R, isValidElement as z, cloneElement as J, useRef as j, useEffect as Ce, useMemo as B, useCallback as X, Fragment as ye } from "react";
+import { isNumber as ke, isNil as F, merge as Ie, isUndefined as Q, get as _ } from "lodash-es";
+import { c as g, m as ee, l as K, W as O, P as Ve, M as We, A as Ee, B as Se, D as te, E as Ae, F as Oe, L as Te } from "./dialog-header-DPLOS7TT.js";
+import { useControllableState as V } from "@janbox/storefront-ui/hooks";
+import { useMergeRefs as H, useFloating as ne, autoUpdate as se, offset as re, flip as oe, size as ae, useClick as ie, useHover as Pe, safePolygon as Me, useDismiss as le, useRole as ce, useInteractions as ue, useFloatingParentNodeId as Fe, FloatingTree as Re, FloatingPortal as ze } from "@floating-ui/react";
+import { useUpdateEffect as Le } from "react-use";
+import { FLOATING_Z_INDEX as $ } from "@janbox/storefront-ui/theme";
+import { useVirtualizer as De } from "@tanstack/react-virtual";
+import { OverlayScrollbarsComponent as _e } from "overlayscrollbars-react";
+import { useDropzone as $e } from "react-dropzone";
+const ct = ({
+  children: e,
+  defaultValue: o,
+  value: s,
+  onSelectionChange: i,
+  className: u,
+  ...t
+}) => {
+  const [a, d] = V({
+    defaultValue: o ?? null,
+    value: s
+  }), l = R.toArray(e).filter(
+    (m) => z(m)
+  ), c = (m) => {
+    const f = m.currentTarget.value;
+    f !== a && (d(f), i?.(f, m));
+  };
+  return /* @__PURE__ */ n("div", { className: g("tw:p-1 tw:flex tw:items-center tw:gap-2 tw:bg-ic-white-1s tw:rounded-lg", u), ...t, children: l.map(
+    (m) => J(m, {
+      onClick(f) {
+        c(f), m.props.onClick?.(f);
+      },
+      className: g(
+        "tw:text-ic-white-4s",
+        {
+          "tw:bg-ic-black-7s tw:hover:bg-ic-black-7s tw:text-ic-white-6s": m.props.value?.toString() === a
+        },
+        m.props.className
+      )
+    })
+  ) });
+}, Z = 10, ut = ({
+  min: e = 0,
+  max: o = Number.MAX_SAFE_INTEGER,
+  fractionDigits: s = 0,
+  value: i,
+  defaultValue: u,
+  step: t = 0,
+  ref: a,
+  ...d
+}) => {
+  const l = j(null), [c, m] = V({
+    value: i?.toString(),
+    defaultValue: u?.toString() ?? ""
+  }), f = parseFloat(c), v = H([a, l]), h = typeof s == "number" ? s : Z, W = (r) => {
+    if (r = r.replace(/e|E/g, ""), e >= 0 && (r = r.replace(/^-/, "")), s === 0)
+      r = r.replace(/\.\d+$/, "");
+    else {
+      const b = r.split(".");
+      if (b.length > 1) {
+        const p = b.at(1)?.slice(0, Math.min(h, Z));
+        r = `${b.at(0)}.${p}`;
+      }
+    }
+    return d.transform?.(r) ?? r;
+  }, E = (r) => {
+    d.mode === "onBlur" && r.target.valueAsNumber < e && (r.target.value = e.toString()), m(r.target.value), d.onChange?.(r);
+  }, S = (r) => {
+    (r.key === "e" || r.key === "E") && r.preventDefault(), d.onKeyDown?.(r);
+  }, I = (r) => {
+    if (!l.current) return;
+    Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value")?.set?.call(l.current, r);
+    const p = new Event("input", { bubbles: !0 });
+    l.current.dispatchEvent(p);
+  }, N = (r) => {
+    const b = l.current;
+    if (F(b)) return;
+    const p = b.valueAsNumber, y = Math.min(isNaN(p) ? e + t : p + t, o);
+    p !== y && I(y.toString());
+  }, A = (r) => {
+    const b = l.current;
+    if (F(b)) return;
+    const p = b.valueAsNumber, y = Math.max(isNaN(p) ? e : p - t, e);
+    p !== y && I(y.toString());
+  };
+  return /* @__PURE__ */ n(
+    ee,
+    {
+      ...d,
+      css: {
+        "::-webkit-outer-spin-button": {
+          margin: 0,
+          WebkitAppearance: "none"
+        },
+        "::-webkit-inner-spin-button": {
+          WebkitAppearance: "none",
+          margin: 0
+        }
+      },
+      prefix: d.prefix ?? (t > 0 ? /* @__PURE__ */ n(
+        K,
+        {
+          disabled: ke(i) && i <= e,
+          onClick: A,
+          "aria-disabled": isNaN(f) ? !1 : f >= o,
+          children: /* @__PURE__ */ n(O, { source: We })
+        }
+      ) : null),
+      suffix: d.suffix ?? (t > 0 ? /* @__PURE__ */ n(K, { onClick: N, "aria-disabled": isNaN(f) ? !1 : f <= e, children: /* @__PURE__ */ n(O, { source: Ve }) }) : null),
+      type: "number",
+      value: c,
+      onChange: E,
+      transform: W,
+      ref: v,
+      onKeyDown: S
+    }
+  );
+}, dt = ({ event: e = "click", reason: o, className: s, ref: i, ...u }) => {
+  const t = j(null), {
+    context: { onOpenChange: a }
+  } = Ee(), d = H([i, t]);
+  return Ce(() => {
+    const l = t.current;
+    if (!l) return;
+    const c = function(m) {
+      a?.(!1, m, o);
+    };
+    return l.addEventListener(e, c), () => {
+      l.removeEventListener(e, c);
+    };
+  }, [e, a, o]), /* @__PURE__ */ n("div", { className: g("tw:contents", s), ...u, ref: d });
+}, Y = ({
+  open: e,
+  placement: o = "bottom",
+  onOpenChange: s,
+  dissmiss: i,
+  children: u,
+  reference: t,
+  trigger: a = "click",
+  offset: d = 4
+}) => {
+  const [l, c] = V({
+    defaultValue: !1,
+    value: e
+  }), f = ne({
+    open: l,
+    onOpenChange: (r, b, p) => {
+      c(r), s?.(r, b, p);
+    },
+    placement: o,
+    middleware: [
+      re(d),
+      oe(),
+      ae({
+        apply({ elements: r }) {
+          const b = {
+            zIndex: `${$}`,
+            minWidth: `${r.reference.getBoundingClientRect().width}px`
+          };
+          Object.assign(r.floating.style, b);
+        }
+      })
+    ],
+    whileElementsMounted: se
+  }), { context: v, refs: h } = f, W = ie(v, {
+    enabled: a === "click"
+  }), E = Pe(v, {
+    enabled: a === "hover",
+    handleClose: Me()
+  }), S = le(
+    v,
+    Ie(
+      {
+        ancestorScroll: !0
+      },
+      i
+    )
+  ), I = ce(v), N = ue([W, S, I, E]), A = B(
+    () => ({
+      ...f,
+      ...N
+    }),
+    [f, N]
+  );
+  return Le(() => {
+    Q(t) || (h.setReference?.(t), v.onOpenChange(!F(t)));
+  }, [t]), /* @__PURE__ */ n(Se.Provider, { value: A, children: u });
+}, ft = (e) => Fe() ? /* @__PURE__ */ n(Y, { ...e }) : /* @__PURE__ */ n(Re, { children: /* @__PURE__ */ n(Y, { ...e }) }), je = ({ className: e, ...o }) => /* @__PURE__ */ n("div", { className: g("tw:animate-fade-down", e), ...o }), Be = ({ children: e, className: o, ...s }) => {
+  const { activeIndex: i } = te(), u = R.toArray(e).filter((t) => z(t) && t.type === je).find((t, a) => a === i);
+  return /* @__PURE__ */ n("div", { className: g("tw:relative tw:border-t tw:border-ic-white-1s", o), ...s, children: u });
+}, He = ({ className: e, classes: o, ...s }) => {
+  const { activeIndex: i, focusTab: u } = te(), t = Number(_(s, "data-tab-index")), a = (d) => {
+    u(t), s.onClick?.(d);
+  };
+  return /* @__PURE__ */ n(
+    "li",
+    {
+      "aria-hidden": !0,
+      className: g(
+        "tw:px-3 tw:py-2 tw:rounded-t-lg tw:text-ic-white-5s tw:text-center tw:cursor-pointer",
+        {
+          [g("tw:text-ic-white-6s tw:bg-ic-black-7s", o?.active)]: i === t
+        },
+        e
+      ),
+      ...s,
+      onClick: a
+    }
+  );
+}, Ge = ({ className: e, children: o, layout: s = "auto-fit", ...i }) => {
+  const u = R.toArray(o).filter(
+    (t) => z(t) && t.type === He
+  );
+  return /* @__PURE__ */ n(
+    "ul",
+    {
+      className: g(
+        "tw:flex tw:items-center",
+        {
+          "tw:*:flex-1": s === "auto-fill"
+        },
+        e
+      ),
+      ...i,
+      children: u.map(
+        (t, a) => J(t, {
+          "data-tab-index": a
+        })
+      )
+    }
+  );
+}, wt = ({ defaultIndex: e, activeIndex: o, children: s, onTabChange: i, className: u, ...t }) => {
+  const a = R.toArray(s).filter((h) => z(h)), d = a.find((h) => h.type === Ge), [l, c] = V({
+    defaultValue: e ?? 0,
+    value: o
+  }), m = a.find((h) => h.type === Be), f = (h) => {
+    c(h), i?.(h);
+  }, v = B(() => ({
+    activeIndex: l,
+    focusTab: f
+  }), [l]);
+  return /* @__PURE__ */ n(Ae.Provider, { value: v, children: /* @__PURE__ */ k("div", { className: g("tw:flex tw:flex-col", u), ...t, children: [
+    d,
+    m
+  ] }) });
+}, Ue = ({ children: e, options: o, ...s }) => /* @__PURE__ */ n(
+  _e,
+  {
+    options: {
+      scrollbars: {
+        autoHide: "leave"
+      },
+      ...o
+    },
+    ...s,
+    children: e
+  }
+), Xe = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 9L12 15L18 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, Ke = `<svg fill="currentColor" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10,18a1,1,0,0,1-.71-.29l-5-5a1,1,0,0,1,1.42-1.42L10,15.59l8.29-8.3a1,1,0,1,1,1.42,1.42l-9,9A1,1,0,0,1,10,18Z"></path>
+</svg>`, Ze = ({ RowComponent: e, options: o, ref: s, ...i }) => {
+  const u = j(null), t = H([u, s]), a = De({
+    ...o,
+    getScrollElement: () => {
+      const c = u.current?.getElement()?.firstElementChild;
+      return c instanceof HTMLDivElement ? c : null;
+    }
+  }), d = a.getVirtualItems(), l = a.getTotalSize();
+  return /* @__PURE__ */ n(Ue, { ...i, ref: t, children: /* @__PURE__ */ n(
+    Oe.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      style: {
+        height: l
+      },
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          style: {
+            transform: `translateY(${d.at(0)?.start ?? 0}px)`
+          },
+          children: d.map((c) => /* @__PURE__ */ n("div", { "data-index": c.index, ref: a.measureElement, children: /* @__PURE__ */ n(e, { row: c }) }, c.key))
+        }
+      )
+    }
+  ) });
+}, mt = (e) => {
+  const {
+    placement: o = "bottom-start",
+    contentWidth: s,
+    visible: i,
+    onOpenChange: u,
+    dissmiss: t,
+    searchable: a,
+    value: d,
+    optionValue: l,
+    optionLabel: c,
+    defaultValue: m,
+    options: f,
+    onChange: v,
+    placeholder: h,
+    prefix: W,
+    suffix: E,
+    className: S,
+    size: I = "32",
+    listProps: N,
+    selectedRenderer: A,
+    checkedIcon: r,
+    ...b
+  } = e, [p, y] = V({
+    defaultValue: !1,
+    value: i
+  }), [T, de] = V({
+    defaultValue: m,
+    value: d
+  }), fe = (w, x, C) => {
+    !w && !C || (y(w), u?.(w, x, C));
+  }, { refs: G, floatingStyles: we, context: L } = ne({
+    open: p,
+    onOpenChange: fe,
+    placement: o,
+    middleware: [
+      oe(),
+      re(4),
+      ae({
+        apply({ elements: w }) {
+          const { width: x } = w.reference.getBoundingClientRect(), C = s === "fit-parent" ? x : s, M = {
+            minWidth: `${C ?? x}px`,
+            width: Q(C) ? C : `${C}px`,
+            zIndex: $
+          };
+          Object.assign(w.floating.style, M);
+        }
+      })
+    ],
+    whileElementsMounted: se
+  }), me = ie(L), pe = le(L, t), be = ce(L), { getReferenceProps: he, getFloatingProps: ge } = ue([me, pe, be]), P = X(
+    (w) => typeof l == "function" ? l(w) : _(w, l ?? "value"),
+    [l]
+  ), U = X(
+    (w) => typeof c == "function" ? c(w) : _(w, c ?? "label"),
+    [c]
+  ), xe = (w) => {
+    const x = P(w);
+    x !== T && (de(x), v?.(x, w), y(!1));
+  }, D = B(
+    () => f.find((w) => T === P(w)),
+    [P, f, T]
+  ), ve = ({ row: w }) => {
+    const x = f.at(w.index);
+    if (F(x)) return /* @__PURE__ */ n(q, {});
+    const C = P(x), M = T === C;
+    return /* @__PURE__ */ k(
+      "div",
+      {
+        onClick: (qe) => {
+          xe(x);
+        },
+        "aria-hidden": !0,
+        className: g(
+          "tw:p-2 tw:flex tw:items-center tw:gap-2 tw:cursor-pointer tw:rounded-lg tw:hover:bg-ic-white-1s",
+          {
+            "tw:bg-ic-black-7s": M
+          }
+        ),
+        children: [
+          /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:truncate", children: U(x) }),
+          M && (r ?? /* @__PURE__ */ n(O, { size: 16, source: Ke }))
+        ]
+      }
+    );
+  }, Ne = {
+    height: Number(I)
+  };
+  return /* @__PURE__ */ k(ye, { children: [
+    /* @__PURE__ */ k(
+      "button",
+      {
+        className: g(
+          "tw:rounded-lg tw:overflow-hidden tw:bg-ic-white-1s tw:inline-flex tw:items-center tw:gap-2 tw:relative tw:text-xs tw:px-2 tw:text-ic-white-6s",
+          "tw:after:absolute tw:after:content-empty tw:after:inset-0 tw:after:pointer-events-none tw:after:rounded-lg tw:after:border tw:after:border-transparent",
+          {
+            "tw:after:border-ic-white-1s tw:bg-ic-black-7s": p
+          },
+          S
+        ),
+        css: Ne,
+        ...b,
+        ...he(),
+        ref: G.setReference,
+        children: [
+          W,
+          /* @__PURE__ */ n("div", { className: "tw:flex-1 tw:text-left tw:truncate", children: D ? A?.(D) ?? U(D) : /* @__PURE__ */ n("span", { className: "tw:text-ic-white-3s", children: h }) }),
+          E ?? /* @__PURE__ */ n(
+            O,
+            {
+              source: Xe,
+              className: g("tw:transition-transform", {
+                "tw:-rotate-180": p
+              }),
+              size: 16
+            }
+          )
+        ]
+      }
+    ),
+    p && /* @__PURE__ */ n(ze, { root: document.body, children: /* @__PURE__ */ n(
+      "div",
+      {
+        ref: G.setFloating,
+        className: "tw:bg-ic-ink-6s tw:rounded-lg",
+        style: {
+          ...we,
+          zIndex: $
+        },
+        ...ge(),
+        children: /* @__PURE__ */ k("div", { className: "tw:focus-visible:outline-none tw:rounded-lg tw:py-1 tw:shadow tw:animate-fade tw:animate-duration-300 tw:bg-ic-white-1s tw:text-ic-white-6s tw:text-xs", children: [
+          a && /* @__PURE__ */ n("div", { className: "tw:px-2 tw:mb-2", children: /* @__PURE__ */ n(ee, { fullWidth: !0, autoFocus: !0 }) }),
+          /* @__PURE__ */ n(
+            Ze,
+            {
+              RowComponent: ve,
+              ...N,
+              className: g("tw:px-1", N?.className),
+              style: {
+                // height: 160,
+                ...N?.style
+              },
+              options: {
+                count: f.length,
+                estimateSize: () => 32,
+                ...N?.options
+              }
+            }
+          )
+        ] })
+      }
+    ) })
+  ] });
+}, pt = ({
+  className: e,
+  style: o,
+  children: s,
+  isLoading: i,
+  hideChildrenOnLoading: u,
+  size: t = 24,
+  ...a
+}) => /* @__PURE__ */ k(
+  "div",
+  {
+    className: g("tw:relative", e),
+    style: {
+      minWidth: t,
+      minHeight: t,
+      ...o
+    },
+    ...a,
+    children: [
+      !i || !u ? s : /* @__PURE__ */ n(q, {}),
+      i && /* @__PURE__ */ n("div", { className: "tw:absolute tw:inset-0 tw:z-50 tw:flex tw:items-center tw:justify-center", children: /* @__PURE__ */ n(O, { source: Te, className: "tw:animate-spin tw:text-ic-orange-6s", size: t }) })
+    ]
+  }
+), bt = ({ children: e, ...o }) => {
+  const s = $e(o);
+  return /* @__PURE__ */ k("div", { ...s.getRootProps(), children: [
+    e?.(s),
+    /* @__PURE__ */ n("input", { ...s.getInputProps() })
+  ] });
+};
+export {
+  Xe as A,
+  Ue as W,
+  ct as a,
+  bt as b,
+  ut as c,
+  pt as d,
+  ft as e,
+  dt as f,
+  mt as g,
+  He as h,
+  Be as i,
+  Ge as j,
+  je as k,
+  wt as l,
+  Ze as m
+};

package/dist/editor/hooks/index.d.ts

@@ -1,7 +1,7 @@
 import { Screen } from '@janbox/storefront-ui/theme';
 import { ToResponsiveProps } from '@janbox/storefront-ui/types';
 import { Get, Paths } from 'type-fest';
-export * from './use-editor-state';
+export * from './use-editor';
 export declare const useEditorResponsive: () => {
     getResponsiveProp: <O extends object, P extends Paths<O>, R = Get<O, `${P}`>>(record: ToResponsiveProps<O>, field: P, screen?: Screen, options?: {
         condition?: (value?: R) => boolean;

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

@@ -1,13 +1,13 @@
 import { Theme } from '@janbox/storefront-ui/theme';
 import { SidebarProps } from './sidebar';
 import { Resolver } from '../../types';
-import { EditorHandlers } from '../hooks/use-editor-state';
+import { EditorHandlers } from '../hooks/use-editor';
 export type EditorProps = {
     theme: Theme;
     insert?: SidebarProps['insert'];
     resolver?: Resolver;
     handlers: EditorHandlers;
 };
-export type { EditorHandlers } from '../hooks/use-editor-state';
-export type { InsertElementGroup, InsertSectionGroup } from './sidebar/insert-action';
+export type { EditorHandlers } from '../hooks/use-editor';
+export type { InsertTemplate, InsertTemplateGroup } from './sidebar/insert-action';
 export declare const Editor: ({ theme, insert, resolver, handlers }: EditorProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/editor/lib/sidebar/insert-action.d.ts

@@ -1,30 +1,23 @@
 import { WbSvgLoaderProps } from '../../ui';
 import { NodeTree } from '../../../types';
-export type InsertElementGroup = {
-    name: string;
-    elements: {
-        name: string;
-        template: React.ReactElement | (() => NodeTree | React.ReactElement);
-        icon: WbSvgLoaderProps;
-        autoFocus?: boolean | ((nodeTree: NodeTree) => boolean);
-        onCreate?: (nodeTree: NodeTree) => void;
-    }[];
+export type InsertTemplate = {
+    name?: string;
+    icon?: WbSvgLoaderProps;
+    template: React.ReactElement | (() => NodeTree | React.ReactElement);
+    autoFocus?: boolean | ((nodeTree: NodeTree) => boolean);
+    onCreate?: (nodeTree: NodeTree) => void;
 };
-export type InsertSectionGroup = {
+export type InsertTemplateGroup = {
     name: string;
-    icon: WbSvgLoaderProps;
-    sections: {
-        template: React.ReactElement | (() => NodeTree | React.ReactElement);
-        autoFocus?: boolean | ((nodeTree: NodeTree) => boolean);
-        onCreate?: (nodeTree: NodeTree) => void;
-    }[];
+    icon?: WbSvgLoaderProps;
+    templates?: InsertTemplate[];
+    renderer?: React.ComponentType;
 };
 export interface InsertActionProps {
-    elements?: InsertElementGroup[];
-    sections?: InsertSectionGroup[];
+    groups?: InsertTemplateGroup[];
 }
-export declare const InsertAction: ({ elements, sections }: InsertActionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const SectionInsertionGroup: ({ group }: {
-    group: InsertSectionGroup;
+export declare const InsertAction: ({ groups }: InsertActionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TemplateInsertionGroup: ({ group }: {
+    group: InsertTemplateGroup;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const SectionInsertion: ({ template, autoFocus, onCreate }: InsertSectionGroup["sections"][number]) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const TemplateInsertion: ({ template, autoFocus, onCreate }: InsertTemplate) => import("@emotion/react/jsx-runtime").JSX.Element;