@bolttech/template-editor 0.0.2 → 0.0.3

package/package.json

@@ -1,30 +1,28 @@
 {
   "name": "@bolttech/template-editor",
   "private": false,
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
-  "main": "./dist/template-editor.umd.js",
-  "module": "./dist/template-editor.es.js",
+  "main": "./dist/template-editor.cjs",
+  "module": "./dist/template-editor.mjs",
   "types": "./dist/template-editor.d.ts",
   "files": [
     "dist"
   ],
+  "sideEffects": [
+    "*.css"
+  ],
   "exports": {
     ".": {
-      "import": {
-        "types": "./dist/template-editor.d.ts",
-        "default": "./dist/template-editor.es.js"
-      },
-      "require": {
-        "types": "./dist/template-editor.d.ts",
-        "default": "./dist/template-editor.umd.js"
-      }
+      "types": "./dist/template-editor.d.ts",
+      "import": "./dist/template-editor.mjs",
+      "require": "./dist/template-editor.cjs"
     },
     "./style.css": "./dist/template-editor.css"
   },
   "engines": {
-    "node": ">=22.18",
-    "npm": ">=10.9"
+    "node": ">=18.x",
+    "npm": ">=9.x"
   },
   "scripts": {
     "start": "node server",
@@ -47,7 +45,7 @@
     "prepare": "npx -y husky"
   },
   "dependencies": {
-    "@bolttech/templating-sdk": "^0.1.2",
+    "@bolttech/templating-sdk": "^0.1.3",
     "@craftjs/core": "^0.2.12",
     "@craftjs/utils": "^0.2.5",
     "@monaco-editor/react": "^4.7.0",
@@ -56,6 +54,7 @@
     "htmlparser2": "^10.0.0",
     "re-resizable": "^6.11.2",
     "react-icons": "^5.5.0",
+    "react-resizable": "^3.0.5",
     "react-shadow": "^20.6.0",
     "sirv": "^3.0.2",
     "vite": "^7.1.7"
@@ -73,6 +72,7 @@
     "@types/htmlparser2": "^3.10.7",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.9",
+    "@types/react-resizable": "^3.0.8",
     "@vitejs/plugin-react": "^5.0.2",
     "@vitest/coverage-v8": "^3.2.4",
     "autoprefixer": "^10.4.21",

package/dist/DataSourceModal-DMKDsjhT.js

@@ -1,433 +0,0 @@
-import { j as e } from "./index-_5hb_xRw.js";
-import { useState as h, useEffect as L } from "react";
-import { FiX as U, FiLink as V, FiUpload as S, FiCode as _, FiCheck as F, FiCopy as P } from "react-icons/fi";
-const O = ({
-  name: p,
-  value: t,
-  path: y,
-  onSelect: i,
-  isSelected: x
-}) => {
-  const m = typeof t == "object" && t !== null && !Array.isArray(t), g = Array.isArray(t), b = () => t === null ? "null" : t === void 0 ? "undefined" : typeof t == "string" ? `"${t}"` : typeof t == "number" || typeof t == "boolean" ? String(t) : g ? `Array(${t.length})` : m ? `Object(${Object.keys(t).length})` : String(t), u = () => t === null ? "null" : t === void 0 ? "undefined" : typeof t == "string" ? "string" : typeof t == "number" ? "number" : typeof t == "boolean" ? "boolean" : g ? "array" : m ? "object" : typeof t;
-  return /* @__PURE__ */ e.jsxs(
-    "button",
-    {
-      onClick: () => i(y, t),
-      className: `flex min-w-[120px] flex-col items-center gap-1 rounded-none border border-[#e8e7ee] p-3 transition-all duration-200 ${x ? "border-[#30aab3] bg-[#170f4f] text-white" : "bg-white text-[#170f4f] hover:border-[#30aab3] hover:bg-gray-50"}`,
-      children: [
-        /* @__PURE__ */ e.jsx("div", { className: "text-xs font-medium", children: p }),
-        /* @__PURE__ */ e.jsx(
-          "div",
-          {
-            className: `text-xs ${u() === "string" ? "text-green-600" : u() === "number" ? "text-blue-600" : u() === "boolean" ? "text-purple-600" : u() === "null" ? "text-gray-500" : "text-orange-600"} ${x ? "text-white" : ""}`,
-            children: b()
-          }
-        ),
-        /* @__PURE__ */ e.jsxs(
-          "div",
-          {
-            className: `text-xs ${x ? "text-gray-300" : "text-gray-400"}`,
-            children: [
-              "(",
-              u(),
-              ")"
-            ]
-          }
-        )
-      ]
-    }
-  );
-}, E = ({ data: p, onPathSelect: t }) => {
-  const [y, i] = h([]), [x, m] = h(null), [g, b] = h(!1), u = (r, n) => n.reduce((a, s) => {
-    if (a != null) {
-      if (s.startsWith("[") && s.endsWith("]")) {
-        const l = parseInt(s.slice(1, -1), 10);
-        return a[l];
-      }
-      return a[s];
-    }
-  }, r), j = (() => {
-    const r = [];
-    let n = [], a = p;
-    r.push({ path: [], value: p, isRoot: !0 });
-    for (const s of y)
-      n = [...n, s], a = u(p, n), a != null && typeof a == "object" && r.push({
-        path: [...n],
-        value: a,
-        isRoot: !1
-      });
-    return r;
-  })(), N = (r, n, a) => {
-    if (typeof a == "object" && a !== null && (i((s) => [...s.slice(0, r), n]), t)) {
-      const s = [...j[r].path, n];
-      t(s.join("."));
-    }
-  }, v = (r, n, a) => {
-    if (typeof a != "object" || a === null) {
-      if (m({ path: [...j[r].path, n], value: a }), t) {
-        const s = [...j[r].path, n];
-        t(s.join("."));
-      }
-    } else
-      m(null);
-  }, w = (r, n) => {
-    const a = r.value;
-    return r.isRoot ? /* @__PURE__ */ e.jsx("div", { className: "flex min-w-[140px] flex-col gap-2", children: Object.entries(p).map(([s, l]) => /* @__PURE__ */ e.jsx(
-      O,
-      {
-        name: s,
-        value: l,
-        path: s,
-        onSelect: (C, c) => typeof c == "object" && c !== null ? N(0, s, c) : v(0, s, c),
-        isSelected: y.length === 0
-      },
-      s
-    )) }, n) : Array.isArray(a) ? /* @__PURE__ */ e.jsx("div", { className: "flex min-w-[140px] flex-col gap-2", children: a.map((s, l) => /* @__PURE__ */ e.jsx(
-      O,
-      {
-        name: `[${l}]`,
-        value: s,
-        path: `[${l}]`,
-        onSelect: (C, c) => typeof c == "object" && c !== null ? N(n, `[${l}]`, c) : v(n, `[${l}]`, c),
-        isSelected: !1
-      },
-      l
-    )) }, n) : typeof a == "object" && a !== null ? /* @__PURE__ */ e.jsx("div", { className: "flex min-w-[140px] flex-col gap-2", children: Object.entries(a).map(([s, l]) => /* @__PURE__ */ e.jsx(
-      O,
-      {
-        name: s,
-        value: l,
-        path: s,
-        onSelect: (C, c) => typeof c == "object" && c !== null ? N(n, s, c) : v(n, s, c),
-        isSelected: !1
-      },
-      s
-    )) }, n) : null;
-  };
-  return /* @__PURE__ */ e.jsxs("div", { className: "overflow-x-auto rounded-none border border-[#e8e7ee] bg-white", children: [
-    /* @__PURE__ */ e.jsx("div", { className: "border-b border-[#e8e7ee] bg-gray-50 px-4 py-2", children: /* @__PURE__ */ e.jsx("h3", { className: "text-sm font-medium text-[#170f4f]", children: "Data Structure" }) }),
-    /* @__PURE__ */ e.jsxs("div", { className: "flex gap-6 overflow-x-auto p-4", children: [
-      j.map((r, n) => w(r, n)),
-      x && /* @__PURE__ */ e.jsx("div", { className: "flex min-w-[180px] flex-col gap-2", children: /* @__PURE__ */ e.jsxs("div", { className: "mt-2 rounded-none border border-[#e8e7ee] bg-gray-50 p-3", children: [
-        /* @__PURE__ */ e.jsx("h4", { className: "mb-1 text-xs font-medium text-gray-600", children: "Selected Value" }),
-        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
-          /* @__PURE__ */ e.jsx("span", { className: "font-medium", children: "Path:" }),
-          " ",
-          x.path.join("."),
-          /* @__PURE__ */ e.jsx(
-            "button",
-            {
-              className: "ml-1 text-gray-400 hover:text-gray-600",
-              onClick: () => {
-                navigator.clipboard.writeText(
-                  x.path.join(".")
-                ), b(!0), setTimeout(() => b(!1), 2e3);
-              },
-              title: "Copy path",
-              children: g ? /* @__PURE__ */ e.jsx(F, { size: 14 }) : /* @__PURE__ */ e.jsx(P, { size: 14 })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e.jsxs("div", { className: "text-sm", children: [
-          /* @__PURE__ */ e.jsx("span", { className: "font-medium", children: "Value:" }),
-          " ",
-          String(x.value)
-        ] }),
-        /* @__PURE__ */ e.jsxs("div", { className: "text-sm", children: [
-          /* @__PURE__ */ e.jsx("span", { className: "font-medium", children: "Type:" }),
-          " ",
-          typeof x.value
-        ] })
-      ] }) })
-    ] })
-  ] });
-}, H = ({
-  isOpen: p,
-  onClose: t,
-  onDataImport: y
-}) => {
-  const [i, x] = h("url"), [m, g] = h(""), [b, u] = h(""), [f, j] = h(""), [N, v] = h(!1), [w, r] = h(""), [n, a] = h(!1), [s, l] = h(null);
-  L(() => {
-    if (p) {
-      const o = localStorage.getItem("bolttech_datasource");
-      if (o)
-        try {
-          const d = JSON.parse(o);
-          d && typeof d == "object" && d.data && (l(d.data), d.url && u(d.url));
-        } catch {
-        }
-    }
-  }, [p]);
-  const C = (o) => {
-    const d = o.target.files?.[0];
-    if (!d) return;
-    if (!d.name.endsWith(".json")) {
-      r("Please select a JSON file");
-      return;
-    }
-    const J = new FileReader();
-    J.onload = (D) => {
-      try {
-        const k = D.target?.result, R = JSON.parse(k);
-        g(k), l(R), r("");
-      } catch {
-        r("Invalid JSON file"), g(""), l(null);
-      }
-    }, J.readAsText(d);
-  }, c = async () => {
-    if (!b.trim()) {
-      r("Please enter a URL");
-      return;
-    }
-    v(!0), r("");
-    try {
-      const o = await fetch(b);
-      if (!o.ok)
-        throw new Error("Failed to fetch data");
-      const d = await o.json();
-      j(JSON.stringify(d, null, 2)), l(d), r("");
-    } catch {
-      r("Failed to fetch data from URL");
-    } finally {
-      v(!1);
-    }
-  }, $ = (o) => {
-    j(o), r("");
-    try {
-      if (o.trim()) {
-        const d = JSON.parse(o);
-        l(d);
-      } else
-        l(null);
-    } catch {
-      r("Invalid JSON format"), l(null);
-    }
-  }, z = () => {
-    let o;
-    try {
-      switch (i) {
-        case "file":
-          if (!m) {
-            r("Please select a file");
-            return;
-          }
-          o = JSON.parse(m);
-          break;
-        case "url":
-          if (!f) {
-            r("Please fetch data from URL first");
-            return;
-          }
-          o = JSON.parse(f);
-          break;
-        case "code":
-          if (!f.trim()) {
-            r("Please enter JSON data");
-            return;
-          }
-          o = JSON.parse(f);
-          break;
-      }
-      i === "url" ? localStorage.setItem(
-        "bolttech_datasource",
-        JSON.stringify({ from: i, data: o, url: b })
-      ) : localStorage.setItem(
-        "bolttech_datasource",
-        JSON.stringify({ from: i, data: o })
-      ), y(o), t();
-    } catch {
-      r("Invalid JSON data");
-    }
-  }, A = () => {
-    navigator.clipboard.writeText(f), a(!0), setTimeout(() => a(!1), 2e3);
-  }, T = () => {
-    try {
-      return f.trim() ? (JSON.parse(f), !0) : !1;
-    } catch {
-      return !1;
-    }
-  };
-  return p ? /* @__PURE__ */ e.jsx(
-    "div",
-    {
-      className: "fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50",
-      onClick: (o) => {
-        o.target === o.currentTarget && t();
-      },
-      children: /* @__PURE__ */ e.jsxs("div", { className: "flex h-[90vh] w-full max-w-6xl flex-col rounded-none bg-white shadow-xl", children: [
-        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between border-b border-[#e8e7ee] bg-white p-6", children: [
-          /* @__PURE__ */ e.jsx("h2", { className: "text-lg font-bold tracking-wide text-[#170f4f]", children: "DataSource" }),
-          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
-            /* @__PURE__ */ e.jsx(
-              "button",
-              {
-                onClick: () => {
-                  localStorage.removeItem("bolttech_datasource"), l(null), g(""), u(""), j("");
-                },
-                className: "rounded-none p-2 text-gray-400 transition-colors duration-200 hover:bg-red-50 hover:text-red-600",
-                title: "Clean Data",
-                children: "🧹"
-              }
-            ),
-            /* @__PURE__ */ e.jsx(
-              "button",
-              {
-                onClick: t,
-                className: "rounded-none p-2 text-gray-400 transition-colors duration-200 hover:bg-gray-50 hover:text-gray-600",
-                children: /* @__PURE__ */ e.jsx(U, { size: 18 })
-              }
-            )
-          ] })
-        ] }),
-        /* @__PURE__ */ e.jsx("div", { className: "max-h-[42vh] overflow-y-auto border-b border-[#e8e7ee] px-6 py-4", children: /* @__PURE__ */ e.jsx(E, { data: { root: s || {} } }) }),
-        /* @__PURE__ */ e.jsxs("div", { className: "flex border-b border-[#e8e7ee]", children: [
-          /* @__PURE__ */ e.jsxs(
-            "button",
-            {
-              onClick: () => x("url"),
-              className: `flex items-center gap-2 px-6 py-3 text-sm font-medium transition-colors duration-200 ${i === "url" ? "border-b-2 border-[#30aab3] text-[#170f4f]" : "text-gray-500 hover:text-[#170f4f]"}`,
-              children: [
-                /* @__PURE__ */ e.jsx(V, { size: 16 }),
-                "URL"
-              ]
-            }
-          ),
-          /* @__PURE__ */ e.jsxs(
-            "button",
-            {
-              onClick: () => x("file"),
-              className: `flex items-center gap-2 px-6 py-3 text-sm font-medium transition-colors duration-200 ${i === "file" ? "border-b-2 border-[#30aab3] text-[#170f4f]" : "text-gray-500 hover:text-[#170f4f]"}`,
-              children: [
-                /* @__PURE__ */ e.jsx(S, { size: 16 }),
-                "Import File"
-              ]
-            }
-          ),
-          /* @__PURE__ */ e.jsxs(
-            "button",
-            {
-              onClick: () => x("code"),
-              className: `flex items-center gap-2 px-6 py-3 text-sm font-medium transition-colors duration-200 ${i === "code" ? "border-b-2 border-[#30aab3] text-[#170f4f]" : "text-gray-500 hover:text-[#170f4f]"}`,
-              children: [
-                /* @__PURE__ */ e.jsx(_, { size: 16 }),
-                "Custom Code"
-              ]
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e.jsxs("div", { className: "flex-1 overflow-hidden p-6", children: [
-          i === "code" && /* @__PURE__ */ e.jsxs("div", { className: "flex h-full flex-col", children: [
-            /* @__PURE__ */ e.jsx("div", { className: "mb-4", children: /* @__PURE__ */ e.jsx("p", { className: "mb-1 text-sm text-gray-500", children: "Enter your JSON data below" }) }),
-            /* @__PURE__ */ e.jsxs("div", { className: "flex-1 overflow-hidden rounded-none bg-gray-900", children: [
-              /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between border-b border-gray-700 bg-gray-800 px-4 py-2", children: [
-                /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium text-gray-300", children: "JSON Editor" }),
-                f && /* @__PURE__ */ e.jsxs(
-                  "button",
-                  {
-                    onClick: A,
-                    className: "flex items-center gap-1 text-xs text-gray-400 hover:text-gray-300",
-                    children: [
-                      n ? /* @__PURE__ */ e.jsx(F, { size: 12 }) : /* @__PURE__ */ e.jsx(P, { size: 12 }),
-                      n ? "Copied!" : "Copy"
-                    ]
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ e.jsx("div", { className: "h-full overflow-auto pb-8", children: /* @__PURE__ */ e.jsx(
-                "textarea",
-                {
-                  value: f,
-                  onChange: (o) => $(o.target.value),
-                  placeholder: '{"name": "John", "age": 30, "city": "New York"}',
-                  className: "h-full w-full resize-none border-none bg-transparent p-4 font-mono text-sm text-gray-300 outline-none"
-                }
-              ) })
-            ] })
-          ] }),
-          i === "url" && /* @__PURE__ */ e.jsx("div", { className: "bte:flex bte:h-full bte:flex-col", children: /* @__PURE__ */ e.jsxs("div", { className: "bte:mb-4", children: [
-            /* @__PURE__ */ e.jsx("label", { className: "mb-2 block text-sm font-medium text-gray-700", children: "JSON URL" }),
-            /* @__PURE__ */ e.jsxs("div", { className: "flex gap-2", children: [
-              /* @__PURE__ */ e.jsx(
-                "input",
-                {
-                  type: "url",
-                  value: b,
-                  onChange: (o) => u(o.target.value),
-                  placeholder: "https://api.example.com/data.json",
-                  className: "flex-1 rounded-none border border-[#e8e7ee] px-3 py-2 focus:outline-none focus:ring-2 focus:ring-[#30aab3]"
-                }
-              ),
-              /* @__PURE__ */ e.jsx(
-                "button",
-                {
-                  onClick: c,
-                  disabled: N || !b.trim(),
-                  className: "rounded-none bg-[#170f4f] px-4 py-2 text-white transition-colors duration-200 hover:bg-[#30aab3] disabled:cursor-not-allowed disabled:opacity-50",
-                  children: N ? "Loading..." : "Fetch"
-                }
-              )
-            ] })
-          ] }) }),
-          i === "file" && /* @__PURE__ */ e.jsxs("div", { className: "bte:flex bte:h-full bte:flex-col", children: [
-            /* @__PURE__ */ e.jsxs("div", { className: "bte:mb-4", children: [
-              /* @__PURE__ */ e.jsx("label", { className: "mb-2 block text-sm font-medium text-gray-700", children: "Select JSON File" }),
-              /* @__PURE__ */ e.jsxs("div", { className: "rounded-none border-2 border-dashed border-[#e8e7ee] p-8 text-center transition-colors duration-200 hover:border-[#30aab3]", children: [
-                /* @__PURE__ */ e.jsx(
-                  "input",
-                  {
-                    type: "file",
-                    accept: ".json",
-                    onChange: C,
-                    className: "hidden",
-                    id: "file-upload"
-                  }
-                ),
-                /* @__PURE__ */ e.jsxs(
-                  "label",
-                  {
-                    htmlFor: "file-upload",
-                    className: "flex cursor-pointer flex-col items-center",
-                    children: [
-                      /* @__PURE__ */ e.jsx(S, { size: 48, className: "mb-4 text-gray-400" }),
-                      /* @__PURE__ */ e.jsx(S, { size: 48, className: "mb-4 text-gray-400" }),
-                      /* @__PURE__ */ e.jsx("span", { className: "text-lg font-medium text-gray-700", children: "Click to upload JSON file" }),
-                      /* @__PURE__ */ e.jsx("span", { className: "mt-1 text-sm text-gray-500", children: "or drag and drop" })
-                    ]
-                  }
-                )
-              ] })
-            ] }),
-            m && /* @__PURE__ */ e.jsxs("div", { className: "flex-1 overflow-hidden rounded-none bg-gray-900", children: [
-              /* @__PURE__ */ e.jsx("div", { className: "flex items-center justify-between border-b border-gray-700 bg-gray-800 px-4 py-2", children: /* @__PURE__ */ e.jsx("span", { className: "text-sm font-medium text-gray-300", children: "File Preview" }) }),
-              /* @__PURE__ */ e.jsx("div", { className: "h-32 overflow-auto", children: /* @__PURE__ */ e.jsx("pre", { className: "whitespace-pre-wrap p-4 font-mono text-sm text-gray-300", children: /* @__PURE__ */ e.jsx("code", { children: m }) }) })
-            ] })
-          ] }),
-          w && /* @__PURE__ */ e.jsx("div", { className: "mt-4 rounded-none border border-red-200 bg-red-50 p-3", children: /* @__PURE__ */ e.jsx("p", { className: "text-sm text-red-600", children: w }) })
-        ] }),
-        /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-end gap-3 border-t border-[#e8e7ee] p-6", children: [
-          /* @__PURE__ */ e.jsx(
-            "button",
-            {
-              onClick: t,
-              className: "rounded-none bg-gray-100 px-4 py-2 text-gray-700 transition-colors duration-200 hover:bg-gray-200",
-              children: "Cancel"
-            }
-          ),
-          /* @__PURE__ */ e.jsx(
-            "button",
-            {
-              onClick: z,
-              disabled: i === "file" && !m || i === "url" && !f || i === "code" && !f || !T(),
-              className: "rounded-none bg-[#170f4f] px-4 py-2 text-white transition-colors duration-200 hover:bg-[#30aab3] disabled:cursor-not-allowed disabled:opacity-50",
-              children: "Import Data"
-            }
-          )
-        ] })
-      ] })
-    }
-  ) : null;
-};
-export {
-  H as DataSourceModal,
-  E as HorizontalDataView
-};