@janbox/storefront-builder 1.0.8 → 2.0.0

package/dist/color-picker-popover-B3AVFuei.js

@@ -0,0 +1,201 @@
+import { isString as g } from "lodash-es";
+import { useCallback as v, useMemo as P, useSyncExternalStore as W, Fragment as z } from "react";
+import "clsx";
+import "tailwind-merge";
+import { q as M, s as F, r as V, m as j, W as R, c as T, f as U } from "./dialog-header-DPLOS7TT.js";
+import { useEditor as q } from "@craftjs/core";
+import { jsxs as c, jsx as r } from "@emotion/react/jsx-runtime";
+import { parseColor as x, paletteVars as B, groupedColors as O } from "@janbox/storefront-ui/theme";
+import { flatten as $ } from "flat";
+import "@janbox/storefront-ui/hooks";
+import "@janbox/storefront-ui/utils";
+import "@floating-ui/react";
+import "react-use";
+import "overlayscrollbars-react";
+import "@tanstack/react-virtual";
+import "react-dropzone";
+import "react-datepicker/dist/react-datepicker.css";
+import "react-datepicker";
+const k = (e) => e.info ?? {}, y = (e) => e.data?.custom ?? {}, de = (e) => {
+  const t = y(e);
+  if (g(t.displayName))
+    return t.displayName;
+  const o = k(e);
+  return g(o.displayName) ? o.displayName : o.displayName?.(e.data.props) ?? e.data.displayName;
+}, le = (e) => e.data.displayName, ce = (e) => e.related ?? {}, he = (e) => y(e).selectable ?? k(e).selectable ?? !0, ue = (e, t) => {
+  try {
+    e.craft && (e.craft = {
+      ...e.craft,
+      related: {
+        ...e.craft?.related,
+        ...t
+      }
+    });
+  } catch (o) {
+    console.error(`Error setting related for ${e.craft?.displayName}`, o);
+  }
+}, pe = (e, t = "xs") => t === "xs" ? e : { [t]: e }, we = (e, t) => {
+  const { resolved: o, ...i } = t;
+  return e.craft = {
+    displayName: o,
+    ...i,
+    related: i.related ?? {}
+  }, e;
+}, me = (e = () => ({})) => {
+  const t = q(e), { query: o, actions: i } = t, h = v(
+    (s, a, d) => {
+      const l = o.node(s).get(), n = a ?? l.data.parent, w = n ? o.node(n).get() : null;
+      if (!w)
+        throw new Error("Parent node not found");
+      const u = {
+        data: {
+          ...l.data,
+          nodes: [],
+          linkedNodes: {}
+        }
+      }, f = o.parseFreshNode(u).toNode();
+      return i.add(f, w.id, d ?? w.data.nodes.length), l.data.nodes.forEach((S, E) => {
+        h(S, f.id, E);
+      }), o.node(f.id).get();
+    },
+    [i, o]
+  ), p = v(
+    (s) => {
+      const a = s.parentId ?? o.node(s.nodeId).get().data.parent;
+      if (!a)
+        throw new Error("Parent node not found");
+      let d;
+      if ("sourceIndex" in s) {
+        const { sourceIndex: l, destinationIndex: n } = s;
+        d = n > l ? n + 1 : n;
+      } else
+        d = s.moveIndex;
+      i.move(s.nodeId, a, d);
+    },
+    [i, o]
+  );
+  return P(() => ({
+    ...t,
+    actions: {
+      ...t.actions,
+      move: p,
+      duplicate: h
+    }
+  }), [h, t, p]);
+}, A = () => {
+  let e;
+  const t = /* @__PURE__ */ new Set();
+  return { getSnapshot: () => {
+    if (!e)
+      throw new Error("useEditor must be initialized with initialState before use.");
+    return e;
+  }, subscribe: (s) => (t.add(s), () => t.delete(s)), initialize: (s) => {
+    e = s, t.forEach((a) => a());
+  }, setState: (s) => {
+    if (!e)
+      throw new Error("useEditor must be initialized before setState.");
+    e = { ...e, ...s }, t.forEach((a) => a());
+  } };
+}, m = A();
+let N = !1;
+const I = (e) => (e && !N && (N = !0, m.initialize(e)), {
+  ...W(m.subscribe, m.getSnapshot),
+  setState: m.setState
+}), b = ({ color: e, size: t = 24 }) => {
+  const o = I(), i = x(e, o.theme.palette);
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      title: e,
+      className: "tw:rounded-full tw:border tw:border-ic-white-3s tw:overflow-hidden",
+      style: { backgroundColor: i?.toString(), width: t, height: t },
+      children: [
+        !i && /* @__PURE__ */ c("svg", { className: "tw:w-full tw:h-full tw:text-ic-white-5s", viewBox: "0 0 32 32", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ r("pattern", { id: "diagonal-stripes", patternUnits: "userSpaceOnUse", width: "8", height: "8", children: /* @__PURE__ */ r("path", { d: "M-2,2 l4,-4 M0,8 l8,-8 M6,10 l4,-4", stroke: "currentColor", strokeWidth: "1.5" }) }) }),
+          /* @__PURE__ */ r("rect", { width: "32", height: "32", fill: "url(#diagonal-stripes)" })
+        ] }),
+        i?.alpha() === 0 && /* @__PURE__ */ c("svg", { className: "tw:w-full tw:h-full", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ c("pattern", { id: "checkerboard", patternUnits: "userSpaceOnUse", width: "8", height: "8", children: [
+            /* @__PURE__ */ r("rect", { width: "8", height: "8", fill: "white" }),
+            /* @__PURE__ */ r("rect", { width: "4", height: "4", fill: "lightgray" }),
+            /* @__PURE__ */ r("rect", { x: "4", y: "4", width: "4", height: "4", fill: "lightgray" })
+          ] }) }),
+          /* @__PURE__ */ r("rect", { width: "100%", height: "100%", fill: "url(#checkerboard)" })
+        ] })
+      ]
+    }
+  );
+}, D = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.999 8C11.861 8 11.749 8.112 11.75 8.25C11.75 8.388 11.862 8.5 12 8.5C12.138 8.5 12.25 8.388 12.25 8.25C12.25 8.112 12.138 8 11.999 8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 21V21C7.029 21 3 16.971 3 12V12C3 7.029 7.029 3 12 3V3C16.971 3 21 7.029 21 12V12C21 16.971 16.971 21 12 21Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12 12V17" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+`, C = $(B), fe = ({
+  color: e,
+  onChange: t,
+  children: o,
+  placement: i = "right-start",
+  ...h
+}) => {
+  const p = (n) => {
+    t?.(C[n.currentTarget.value]);
+  }, s = I(), a = x(e, s.theme.palette)?.hex(), d = (n) => {
+    n.target.select();
+  }, l = (n) => {
+    t?.(n.target.value);
+  };
+  return /* @__PURE__ */ c(M, { placement: i, ...h, children: [
+    /* @__PURE__ */ r(F, { children: o ?? /* @__PURE__ */ r("button", { className: "tw:border tw:border-ic-white-1s tw:rounded-full tw:hover:border-ic-white-3s tw:p-0.5", children: /* @__PURE__ */ r(b, { color: e }) }) }),
+    /* @__PURE__ */ r(V, { children: /* @__PURE__ */ c("div", { className: "tw:flex tw:flex-col tw:gap-3", children: [
+      /* @__PURE__ */ r("div", { className: "tw:flex tw:items-center tw:gap-2", children: /* @__PURE__ */ r("div", { className: "tw:flex-1", children: /* @__PURE__ */ r(
+        j,
+        {
+          fullWidth: !0,
+          suffix: /* @__PURE__ */ r(
+            R,
+            {
+              className: T({
+                hidden: e === a
+              }),
+              size: 16,
+              source: D
+            }
+          ),
+          onChange: l,
+          onFocus: d,
+          value: a,
+          size: "32"
+        }
+      ) }) }),
+      /* @__PURE__ */ r(U, { className: "tw:min-w-72", color: a, onChange: t }),
+      /* @__PURE__ */ r(
+        "div",
+        {
+          style: {
+            gridTemplateColumns: "max-content 1fr"
+          },
+          className: "tw:grid tw:items-center tw:gap-x-4 tw:gap-y-2",
+          children: O.map((n, w) => /* @__PURE__ */ c(z, { children: [
+            /* @__PURE__ */ r("p", { className: "tw:text-xs", children: n.name }),
+            /* @__PURE__ */ r("div", { className: "tw:inline-flex tw:items-center tw:gap-2", children: n.colors.map((u) => /* @__PURE__ */ r("div", { className: "tw:inline-flex", children: /* @__PURE__ */ r("button", { title: u, onClick: p, type: "button", value: u, children: /* @__PURE__ */ r(b, { color: C[u] }) }) }, u)) })
+          ] }, w))
+        }
+      )
+    ] }) })
+  ] });
+};
+export {
+  fe as C,
+  D as I,
+  de as a,
+  k as b,
+  ce as c,
+  we as d,
+  le as e,
+  I as f,
+  y as g,
+  he as i,
+  ue as r,
+  pe as t,
+  me as u
+};

package/dist/components/composer/dataset.d.ts

@@ -9,6 +9,7 @@ export declare const defaultResolver: {
     flexbox: (props: import('../../lib/flexbox/flexbox.node').FlexboxNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     "flex-item": ({ children, ...props }: import('../../lib/flex-item/flex-item.node').FlexItemNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     box: ({ children, ...props }: import('../../lib/box/box.node').BoxNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    container: ({ children, ...props }: import('../../lib/container/container.node').ContainerNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     image: (props: import('../../lib/image/image.node').ImageNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     video: ({ ...props }: import('../../lib/video/video.node').VideoNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
     icon: (props: import('../../lib/icon/icon.node').IconNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/constants/index.d.ts

@@ -30,6 +30,7 @@ export declare enum CoreNodeResolvedEnum {
     Accordion = "accordion",
     AccordionSummary = "accordion-summary",
     AccordionContent = "accordion-content",
+    Container = "container",
     CountdownTimer = "countdown-timer"
 }
 export declare enum NodeDatasetAttributes {