@janbox/storefront-builder 1.0.8 → 2.0.0

package/dist/editor/toolbars.js

@@ -0,0 +1,336 @@
+import { T as f, C as k, a as F, b as P, c as A, d as I, F as B, e as O } from "../anchor-target-BlOvysAr.js";
+import { A as Fe, f as Pe, B as Ae, g as Ie, h as Be, i as Oe, j as Ve, k as Ge, D as Me, l as Ue, m as He, G as Re, H as De, J as je, n as qe, M as Je, N as Ee, o as Le, O as $e, p as Ke, P as Qe, R as Xe, S as Ye, q as Ze, r as _e, s as et, W as tt, t as ot } from "../anchor-target-BlOvysAr.js";
+import { jsxs as h, jsx as e } from "@emotion/react/jsx-runtime";
+import { isNumber as T, isNil as b, isString as N, isEqual as V } from "lodash-es";
+import { useRef as G, useState as M } from "react";
+import "@janbox/storefront-ui/hooks";
+import "@janbox/storefront-ui/theme";
+import "@janbox/storefront-ui/utils";
+import { y as U, t as S, l as g, W as p, P as C, M as W, q as H, s as R, c as D, r as j, C as q } from "../dialog-header-DPLOS7TT.js";
+import { c as y, g as J, f as E } from "../dropzone-Dbfed3jK.js";
+import "@floating-ui/react";
+import "react-use";
+import "react-colorful";
+import "overlayscrollbars-react";
+import "@tanstack/react-virtual";
+import "react-dropzone";
+import "react-datepicker/dist/react-datepicker.css";
+import "react-datepicker";
+import "../color-picker-popover-B3AVFuei.js";
+import "@tiptap/extension-text-style";
+import "@tiptap/react";
+import "@tiptap/react/menus";
+import "@tiptap/starter-kit";
+import "react-frame-component";
+import "@craftjs/core";
+import "flat";
+import "@emotion/react";
+import "clsx";
+import "tailwind-merge";
+var u = /* @__PURE__ */ ((t) => (t[t.Pixels = 0] = "Pixels", t[t.Unitless = 1] = "Unitless", t))(u || {});
+const L = [
+  {
+    label: "Pixels",
+    value: 0
+    /* Pixels */
+  },
+  {
+    label: "Unitless",
+    value: 1
+    /* Unitless */
+  }
+], Ne = ({ name: t, responsive: m = !0, value: o, onChange: c }) => {
+  const r = T(o?.lineHeight) ? u.Unitless : u.Pixels, l = r === u.Unitless ? 0.1 : 1, a = U(o?.lineHeight, "float"), i = ({ unit: s, value: d }) => {
+    if (b(d)) {
+      c?.({
+        lineHeight: s === u.Unitless ? 1 : d
+      });
+      return;
+    }
+    c?.({
+      lineHeight: s === u.Unitless ? Number(d.toFixed(1)) : `${d}px`
+    });
+  }, n = (s) => {
+    i({ unit: Number(s.target.value) });
+  }, x = (s) => {
+    const d = isNaN(s.target.valueAsNumber) ? void 0 : s.target.valueAsNumber;
+    i({ unit: r, value: d });
+  }, w = (s) => {
+    s.stopPropagation(), !b(a) && i({ unit: r, value: Math.max(a + l, 0) });
+  }, z = (s) => {
+    s.stopPropagation(), !b(a) && i({ unit: r, value: Math.max(a - l, 0) });
+  };
+  return /* @__PURE__ */ h("div", { className: "tw:flex tw:flex-col tw:gap-2", children: [
+    /* @__PURE__ */ e(f, { responsive: m, name: t ?? "Line height", children: /* @__PURE__ */ e("div", { className: "tw:flex tw:items-center tw:gap-1", children: L.map((s) => /* @__PURE__ */ e(
+      S,
+      {
+        onChange: n,
+        checked: s.value === r,
+        value: s.value,
+        name: "toolbar-line-height",
+        children: s.label
+      },
+      s.value
+    )) }) }),
+    /* @__PURE__ */ e("div", { className: "tw:flex tw:justify-end", children: /* @__PURE__ */ e(
+      y,
+      {
+        fractionDigits: 1,
+        type: r === u.Unitless ? "decimal" : "integer",
+        value: a ?? "",
+        onChange: x,
+        prefix: /* @__PURE__ */ e(g, { disabled: T(a) && a <= 0, onClick: z, children: /* @__PURE__ */ e(p, { source: W }) }),
+        suffix: /* @__PURE__ */ e(g, { onClick: w, children: /* @__PURE__ */ e(p, { source: C }) }),
+        mode: "onBlur",
+        className: "tw:text-center",
+        placeholder: "normal",
+        classes: { container: "tw:w-1/2" }
+      }
+    ) })
+  ] });
+}, ve = ({ name: t, responsive: m = !0, value: o, onChange: c }) => {
+  const r = (i) => {
+    const n = isNaN(i.target.valueAsNumber) ? void 0 : i.target.valueAsNumber;
+    c?.({
+      ...o,
+      fontSize: n
+    });
+  }, l = (i) => {
+    i.stopPropagation();
+    const n = N(o?.fontSize) ? void 0 : o?.fontSize;
+    c?.({
+      ...o,
+      fontSize: b(n) ? 16 : n + 1
+    });
+  }, a = (i) => {
+    i.stopPropagation();
+    const n = N(o?.fontSize) ? void 0 : o?.fontSize;
+    c?.({
+      ...o,
+      fontSize: b(n) ? 16 : Math.max(n - 1, 0)
+    });
+  };
+  return /* @__PURE__ */ e(f, { responsive: m, name: t ?? "Font size", children: /* @__PURE__ */ e(
+    y,
+    {
+      onCanPlay: r,
+      mode: "onBlur",
+      className: "tw:text-center",
+      placeholder: "inherit",
+      classes: { container: "tw:w-1/2" },
+      value: o?.fontSize ?? "",
+      prefix: /* @__PURE__ */ e(g, { disabled: T(o?.fontSize) && o.fontSize <= 0, onClick: a, children: /* @__PURE__ */ e(p, { source: W }) }),
+      suffix: /* @__PURE__ */ e(g, { onClick: l, children: /* @__PURE__ */ e(p, { source: C }) })
+    }
+  ) });
+}, v = [
+  {
+    label: "Block",
+    value: "block"
+  },
+  {
+    label: "Inline",
+    value: "inline"
+  },
+  {
+    label: "Inline Block",
+    value: "inline-block"
+  },
+  {
+    label: "Flex",
+    value: "flex"
+  },
+  {
+    label: "Inline Flex",
+    value: "flex"
+  },
+  {
+    label: "Grid",
+    value: "grid"
+  },
+  {
+    label: "Inline Grid",
+    value: "inline-grid"
+  }
+], Se = ({
+  name: t,
+  responsive: m = !1,
+  availableDisplays: o,
+  onChange: c,
+  value: r
+}) => {
+  const l = b(o) ? v : v.filter((i) => o.includes(i.value)), a = (i) => {
+    c?.({ display: i });
+  };
+  return /* @__PURE__ */ e(f, { name: t ?? "Display", responsive: m, children: /* @__PURE__ */ e(
+    J,
+    {
+      className: "tw:w-1/2",
+      placement: "bottom-end",
+      placeholder: "default",
+      options: l,
+      value: r?.display ?? null,
+      onChange: a
+    }
+  ) });
+}, Ce = ({ value: t, onChange: m, name: o, responsive: c = !1 }) => {
+  const r = {
+    flexBasis: t?.flexBasis ?? "auto",
+    flexGrow: t?.flexGrow ?? 0,
+    flexShrink: t?.flexShrink ?? 1
+  }, l = [
+    {
+      label: "Auto fit",
+      value: 0,
+      rawValue: {
+        flexBasis: "auto",
+        flexGrow: 0,
+        flexShrink: 1
+      }
+    },
+    {
+      label: "Auto fill",
+      value: 1,
+      rawValue: {
+        flexBasis: "0%",
+        flexGrow: 1,
+        flexShrink: 1
+      }
+    }
+  ], a = l.find((n) => V(n.rawValue, r))?.value, i = (n) => {
+    const x = l.find((w) => w.value === Number(n.target.value));
+    x && m?.(x.rawValue);
+  };
+  return /* @__PURE__ */ e(f, { name: o ?? "Content", responsive: c, children: /* @__PURE__ */ e("div", { className: "tw:inline-flex tw:items-center tw:gap-2", children: l.map((n) => /* @__PURE__ */ e(
+    S,
+    {
+      checked: n.value === a,
+      value: n.value,
+      onChange: i,
+      children: n.label
+    },
+    n.value
+  )) }) });
+}, We = ({ name: t, value: m, onChange: o, responsive: c = !0 }) => {
+  const r = G(null), l = (a) => {
+    o?.({
+      minWidth: a
+    });
+  };
+  return /* @__PURE__ */ e(f, { name: t ?? "Min width", responsive: c, children: /* @__PURE__ */ e("div", { className: "tw:relative tw:w-1/2", children: /* @__PURE__ */ e(
+    k,
+    {
+      fullWidth: !0,
+      wrapRef: r,
+      placeholder: "0",
+      value: m?.minWidth,
+      onChange: l,
+      defaultValue: {
+        "%": 100
+      }
+    }
+  ) }) });
+}, ye = ({ value: t, onChange: m }) => {
+  const [o, c] = M(!1), r = (a) => {
+    m?.({ ...t, sizeVariant: a });
+  }, l = (a) => {
+    m?.({
+      ...t,
+      css: {
+        ...t?.css,
+        ...a
+      }
+    });
+  };
+  return /* @__PURE__ */ e(f, { name: "Text style", children: /* @__PURE__ */ h(H, { open: o, onOpenChange: c, placement: "right", children: [
+    /* @__PURE__ */ e(R, { children: /* @__PURE__ */ h(
+      "button",
+      {
+        className: D(
+          "tw:w-1/2 tw:h-8 tw:flex tw:items-center tw:gap-2 tw:rounded-md tw:bg-ic-white-1s tw:px-2 tw:text-left tw:truncate tw:text-xs",
+          {
+            "tw:bg-ic-black-7s": o
+          }
+        ),
+        children: [
+          /* @__PURE__ */ e(p, { className: "tw:text-white", source: F }),
+          /* @__PURE__ */ e("span", { children: "Auto" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ e(j, { children: /* @__PURE__ */ h("div", { style: { width: 280 }, children: [
+      /* @__PURE__ */ h("div", { className: "tw:flex tw:justify-between tw:items-center tw:gap-2", children: [
+        /* @__PURE__ */ e("div", { className: "tw:font-medium", children: "Text style" }),
+        /* @__PURE__ */ e(E, { children: /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(p, { source: q }) }) })
+      ] }),
+      /* @__PURE__ */ e("hr", { className: "tw:border-ic-white-1s tw:my-2" }),
+      /* @__PURE__ */ h("div", { className: "tw:flex tw:flex-col tw:gap-3", children: [
+        /* @__PURE__ */ e(P, { value: t?.sizeVariant, onChange: r }),
+        /* @__PURE__ */ e(A, { value: { color: t?.css?.color }, onChange: l }),
+        /* @__PURE__ */ e(
+          I,
+          {
+            name: "Style",
+            value: {
+              fontWeight: t?.css?.fontWeight,
+              fontStyle: t?.css?.fontStyle,
+              textDecorationLine: t?.css?.textDecorationLine
+            },
+            onChange: l
+          }
+        ),
+        /* @__PURE__ */ e(B, { value: { fontWeight: t?.css?.fontWeight }, onChange: l }),
+        /* @__PURE__ */ e(
+          O,
+          {
+            value: {
+              textTransform: t?.css?.textTransform
+            },
+            onChange: l
+          }
+        )
+      ] })
+    ] }) })
+  ] }) });
+};
+export {
+  Fe as AnchorTargetToolbar,
+  Pe as AspectRatioToolbar,
+  Ae as BackgroundToolbar,
+  Ie as BorderRadiusToolbar,
+  Be as BorderToolbar,
+  Oe as ChildNodesToolbar,
+  A as ColorToolbar,
+  Ve as ColorVariantToolbar,
+  Ge as ColumnGapToolbar,
+  Me as DisplayOnToolbar,
+  Se as DisplayToolbar,
+  Ue as FlexAlignItemsToolbar,
+  Ce as FlexToolbar,
+  He as FlexWrapToolbar,
+  ve as FontSizeToolbar,
+  B as FontWeightToolbar,
+  Re as GridAlignItemsToolbar,
+  De as HeightToolbar,
+  je as JustifyContentToolbar,
+  qe as JustifyItemsToolbar,
+  Ne as LineHeightToolbar,
+  Je as MarginToolbar,
+  We as MinWidthToolbar,
+  Ee as NumberField,
+  Le as NumberFieldMixOptions,
+  $e as ObjectFitToolbar,
+  Ke as OrderToolbar,
+  Qe as PaddingToolbar,
+  Xe as RowGapToolbar,
+  Ye as SpacingToolbar,
+  Ze as SvgSourceToolbar,
+  _e as TagNameToolbar,
+  et as TextAlignToolbar,
+  P as TextSizeVariantToolbar,
+  ye as TextStyleGroupToolbar,
+  I as TextStyleToolbar,
+  O as TextTransformToolbar,
+  tt as WidthToolbar,
+  ot as textSizeVariantOptions
+};

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

@@ -1,3 +1 @@
-export type WbButtonVariant = 'contained' | 'outlined' | 'text';
-export type WbButtonSize = '20' | '24' | '28' | '32' | '36';
 export type CssUnit = 'px' | '%';

package/dist/editor/ui/button/button.d.ts

@@ -1,11 +1,10 @@
 import { JSX } from 'react';
-import { WbButtonSize, WbButtonVariant } from '../../types';
 import { ShallowMerge } from '@janbox/storefront-ui/types';
 export type WbButtonProps = ShallowMerge<JSX.IntrinsicElements['button'], {
-    size?: WbButtonSize;
+    size?: '20' | '24' | '28' | '32' | '36';
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
-    variant?: WbButtonVariant;
+    variant?: 'contained' | 'outlined' | 'text';
     fullWidth?: boolean;
     isLoading?: boolean;
 }>;

package/dist/editor/ui/icon-button/icon-button.d.ts

@@ -1,9 +1,8 @@
 import { JSX } from 'react';
 import { ShallowMerge } from '@janbox/storefront-ui/types';
-import { WbButtonSize } from '../../types';
 import { WbTooltipProps } from '../tooltip';
 export type WbIconButtonProps = ShallowMerge<JSX.IntrinsicElements['button'], {
-    size?: WbButtonSize;
+    size?: '20' | '24' | '28' | '32' | '36';
     tooltip?: Omit<WbTooltipProps, 'children'>;
     isHighlighted?: boolean;
 }>;

package/dist/editor/ui.js

@@ -0,0 +1,110 @@
+import { a as b, b as i, u as n, c as o } from "../dialog-header-DPLOS7TT.js";
+import { d as D, e as F, f as P, g as k, h as I, i as y, j as L, k as B, W as S, l as j, m as M, n as z, o as O, p as V, q as E, r as G, s as _, t as q, v as A, w as H, x as R } from "../dialog-header-DPLOS7TT.js";
+import { W } from "../dropzone-Dbfed3jK.js";
+import { a as Z, b as J, c as K, d as Q, e as U, f as Y, g as $, h as tt, i as et, j as at, k as st, l as ot, m as lt } from "../dropzone-Dbfed3jK.js";
+import { W as bt } from "../tooltip-KbIHELP2.js";
+import { jsx as e, jsxs as l } from "@emotion/react/jsx-runtime";
+import { FLOATING_Z_INDEX as w } from "@janbox/storefront-ui/theme";
+import "lodash-es";
+import { isValidElement as m } from "react";
+import { W as nt } from "../date-picker-B4Rju7gG.js";
+const g = ({ width: a = 600, children: s, ...t }) => /* @__PURE__ */ e(
+  b,
+  {
+    dismissProps: {
+      enabled: !0
+    },
+    ...t,
+    children: /* @__PURE__ */ l(
+      i,
+      {
+        floatingOverlayProps: {
+          disabled: !1,
+          className: "grid place-items-center p-4 sm:p-5 md:p-6",
+          lockScroll: !0,
+          style: {
+            zIndex: w
+          }
+        },
+        className: "tw:max-h-full tw:max-w-full tw:overflow-hidden tw:flex tw:flex-col",
+        children: [
+          /* @__PURE__ */ e(
+            "div",
+            {
+              css: {
+                backdropFilter: "blur(2px)"
+              },
+              className: "tw:fixed tw:inset-0 tw:bg-black tw:bg-opacity-40 tw:pointer-events-none"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              css: {
+                width: a
+              },
+              className: "tw:max-w-full tw:overflow-hidden tw:flex tw:flex-col tw:rounded-lg tw:py-2 tw:relative tw:bg-ic-ink-6s tw:text-white",
+              children: s
+            }
+          )
+        ]
+      }
+    )
+  }
+), v = () => n(), C = ({ className: a, ref: s, ...t }) => /* @__PURE__ */ e(
+  W,
+  {
+    className: o("tw:flex-1 tw:overflow-auto tw:py-3 tw:px-4 tw:sm:px-5 tw:text-xs", a),
+    ...t,
+    ref: s
+  }
+), N = ({ required: a, className: s, children: t, ...r }) => /* @__PURE__ */ l("div", { className: o("tw:mb-1.5 tw:flex tw:w-fit", s), ...r, children: [
+  m(t) ? t : /* @__PURE__ */ e("label", { children: t }),
+  a && /* @__PURE__ */ e("span", { className: "tw:text-ic-red-6s", children: " *" })
+] });
+export {
+  D as WbButton,
+  Z as WbButtonGroup,
+  F as WbCollapse,
+  P as WbColorPicker,
+  nt as WbDatePicker,
+  g as WbDialog,
+  C as WbDialogBody,
+  k as WbDialogClose,
+  I as WbDialogFooter,
+  y as WbDialogHeader,
+  J as WbDropzone,
+  b as WbFloating,
+  L as WbFloatingClose,
+  i as WbFloatingContent,
+  B as WbFloatingContext,
+  N as WbFormLabel,
+  S as WbIcon,
+  j as WbIconButton,
+  M as WbInput,
+  K as WbInputNumber,
+  Q as WbLoadingOverlay,
+  U as WbMenu,
+  z as WbMenuItem,
+  O as WbMenuList,
+  V as WbMenuTrigger,
+  E as WbPopover,
+  Y as WbPopoverClose,
+  G as WbPopoverContent,
+  _ as WbPopoverTrigger,
+  q as WbRadioButton,
+  W as WbScrollView,
+  $ as WbSelect,
+  A as WbSvgLoader,
+  H as WbSwitch,
+  tt as WbTab,
+  et as WbTabContent,
+  at as WbTabList,
+  st as WbTabPanel,
+  ot as WbTabs,
+  R as WbTextarea,
+  bt as WbTooltip,
+  lt as WbVirtualizedList,
+  v as useDialogContext,
+  n as useWbFloatingContext
+};