@chaibuilder/sdk 2.0.0-r19-beta.53 → 2.0.0

package/README.md

@@ -4,6 +4,10 @@ Chai Builder is an Open Source Low Code React + Tailwind CSS Visual Builder.
 It allows you to create web pages visually by dragging and dropping elements onto the canvas. 
 It is a simple React component that renders a full-fledged visual builder into any React application. 
 
+Demo: https://chaibuilder-sdk.vercel.app/
+
+NextJS Starter: https://github.com/chaibuilder/chaibuilder-nextjs
+
 ---
 
 ### Manual installation:

package/dist/CodeEditor-C-jeR5bt.js

@@ -0,0 +1,65 @@
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { Cross2Icon as k } from "@radix-ui/react-icons";
+import { useThrottledCallback as C } from "@react-hookz/web";
+import { useState as d, useCallback as v, useEffect as g } from "react";
+import { useTranslation as N } from "react-i18next";
+import { B as w } from "./tooltip-PKiP886L.js";
+import { useCodeEditor as y, useSelectedBlockIds as T, useUpdateBlocksProps as B, useUpdateBlocksPropsRealtime as E } from "./core.js";
+const u = (o) => {
+  const l = document.createElement("div");
+  return l.innerHTML = o, l.innerHTML;
+};
+function S() {
+  const { t: o } = N(), [l, m] = d(!1), [c, f] = d(""), [e, i] = y(), [r] = T(), p = B(), h = E(), x = C(
+    (s) => {
+      const n = u(s);
+      h([e.blockId], { [e.blockProp]: n });
+    },
+    [],
+    300
+  ), b = v(() => {
+    if (l) {
+      const s = u(c);
+      p([e.blockId], { [e.blockProp]: s });
+    }
+  }, [l, c]);
+  return g(() => {
+    r.includes(e == null ? void 0 : e.blockId) || (b(), i(null));
+  }, [r]), /* @__PURE__ */ a("div", { className: "h-full text-white bg-black border-t-4 border-black rounded-t-lg", children: [
+    /* @__PURE__ */ t("button", { onClick: () => {
+      i(null);
+    }, className: "fixed inset-0 z-[100000] cursor-default bg-gray-400/20" }),
+    /* @__PURE__ */ a("div", { className: "relative z-[100001] h-full w-full flex-col gap-y-1", children: [
+      /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-2 py-2 -mt-1", children: [
+        /* @__PURE__ */ a("h3", { className: "space-x-3 text-sm font-semibold", children: [
+          /* @__PURE__ */ t("span", { children: o("HTML Code Editor |") }),
+          /* @__PURE__ */ t("span", { className: "text-xs text-gray-400", children: o("Scripts will be only executed in preview and live mode.") })
+        ] }),
+        /* @__PURE__ */ t("div", { className: "flex gap-x-2", children: /* @__PURE__ */ t(
+          w,
+          {
+            onClick: () => i(null),
+            size: "sm",
+            variant: "destructive",
+            className: "h-6 w-fit",
+            children: /* @__PURE__ */ t(k, {})
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ t(
+        "textarea",
+        {
+          className: "w-full h-full p-2 font-mono text-xs bg-black text-white/90",
+          value: c || e.initialCode,
+          onChange: (s) => {
+            const n = s.target.value;
+            m(!0), f(n), x(n);
+          }
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  S as default
+};

package/dist/CodeEditor-SZJ1H4vl.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),C=require("@radix-ui/react-icons"),v=require("@react-hookz/web"),n=require("react"),j=require("react-i18next"),g=require("./tooltip-1Uu2avkZ.cjs"),a=require("./core.cjs"),u=o=>{const s=document.createElement("div");return s.innerHTML=o,s.innerHTML};function y(){const{t:o}=j.useTranslation(),[s,x]=n.useState(!1),[i,m]=n.useState(""),[t,r]=a.useCodeEditor(),[d]=a.useSelectedBlockIds(),b=a.useUpdateBlocksProps(),f=a.useUpdateBlocksPropsRealtime(),p=v.useThrottledCallback(l=>{const c=u(l);f([t.blockId],{[t.blockProp]:c})},[],300),h=n.useCallback(()=>{if(s){const l=u(i);b([t.blockId],{[t.blockProp]:l})}},[s,i]);n.useEffect(()=>{d.includes(t==null?void 0:t.blockId)||(h(),r(null))},[d]);const k=()=>{r(null)};return e.jsxs("div",{className:"h-full text-white bg-black border-t-4 border-black rounded-t-lg",children:[e.jsx("button",{onClick:k,className:"fixed inset-0 z-[100000] cursor-default bg-gray-400/20"}),e.jsxs("div",{className:"relative z-[100001] h-full w-full flex-col gap-y-1",children:[e.jsxs("div",{className:"flex items-center justify-between px-2 py-2 -mt-1",children:[e.jsxs("h3",{className:"space-x-3 text-sm font-semibold",children:[e.jsx("span",{children:o("HTML Code Editor |")}),e.jsx("span",{className:"text-xs text-gray-400",children:o("Scripts will be only executed in preview and live mode.")})]}),e.jsx("div",{className:"flex gap-x-2",children:e.jsx(g.Button,{onClick:()=>r(null),size:"sm",variant:"destructive",className:"h-6 w-fit",children:e.jsx(C.Cross2Icon,{})})})]}),e.jsx("textarea",{className:"w-full h-full p-2 font-mono text-xs bg-black text-white/90",value:i||t.initialCode,onChange:l=>{const c=l.target.value;x(!0),m(c),p(c)}})]})]})}exports.default=y;

package/dist/Functions-BGzDsf1z.js

@@ -0,0 +1,14 @@
+import "lodash-es";
+import { clsx as n } from "clsx";
+import { twMerge as a } from "tailwind-merge";
+function c(e = 6, o = "abcdefghijklmnopqrstuvwxyzABCD") {
+  let r = "";
+  for (let t = e; t > 0; --t) r += o[Math.floor(Math.random() * o.length)];
+  return r;
+}
+const f = (e) => e >= 1536 ? "2XL" : e >= 1280 ? "XL" : e >= 1024 ? "LG" : e >= 768 ? "MD" : e >= 640 ? "SM" : "XS", g = (...e) => a(n(e));
+export {
+  f as a,
+  g as c,
+  c as g
+};

package/dist/Functions-BZmyleS1.cjs

@@ -0,0 +1 @@
+"use strict";require("lodash-es");const o=require("clsx"),l=require("tailwind-merge");function a(e=6,r="abcdefghijklmnopqrstuvwxyzABCD"){let t="";for(let n=e;n>0;--n)t+=r[Math.floor(Math.random()*r.length)];return t}const c=e=>e>=1536?"2XL":e>=1280?"XL":e>=1024?"LG":e>=768?"MD":e>=640?"SM":"XS",u=(...e)=>l.twMerge(o.clsx(e));exports.cn=u;exports.generateUUID=a;exports.getBreakpointValue=c;

package/dist/Topbar-DSfx67NF.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),r=require("./tooltip-1Uu2avkZ.cjs");require("react-i18next");const c=require("./core.cjs"),i=()=>{const l=c.useBuilderProp("topBarComponents.left",[]),o=c.useBuilderProp("topBarComponents.center",[]),a=c.useBuilderProp("topBarComponents.right",[]);return e.jsxs("div",{className:"flex h-14 items-center justify-between px-2",children:[e.jsx("div",{className:"flex items-center space-x-2",children:e.jsx("div",{className:"flex items-center space-x-2 font-bold",children:l.map((s,t)=>e.jsx(n.Suspense,{fallback:e.jsx(r.Skeleton,{className:"h-10"}),children:e.jsx(s,{})},`left-${t}`))})}),e.jsx("div",{className:"flex items-center space-x-2",children:o.map((s,t)=>e.jsx(n.Suspense,{fallback:e.jsx(r.Skeleton,{className:"h-10"}),children:e.jsx(s,{})},`center-${t}`))}),e.jsx("div",{className:"flex items-center space-x-1",children:a.map((s,t)=>e.jsx(n.Suspense,{fallback:e.jsx(r.Skeleton,{className:"h-10"}),children:e.jsx(s,{})},`right-${t}`))})]})};exports.default=i;

package/dist/Topbar-DZ2jHLv7.js

@@ -0,0 +1,16 @@
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { Suspense as n } from "react";
+import { S as r } from "./tooltip-PKiP886L.js";
+import "react-i18next";
+import { useBuilderProp as a } from "./core.js";
+const x = () => {
+  const c = a("topBarComponents.left", []), l = a("topBarComponents.center", []), o = a("topBarComponents.right", []);
+  return /* @__PURE__ */ m("div", { className: "flex h-14 items-center justify-between px-2", children: [
+    /* @__PURE__ */ e("div", { className: "flex items-center space-x-2", children: /* @__PURE__ */ e("div", { className: "flex items-center space-x-2 font-bold", children: c.map((s, t) => /* @__PURE__ */ e(n, { fallback: /* @__PURE__ */ e(r, { className: "h-10" }), children: /* @__PURE__ */ e(s, {}) }, `left-${t}`)) }) }),
+    /* @__PURE__ */ e("div", { className: "flex items-center space-x-2", children: l.map((s, t) => /* @__PURE__ */ e(n, { fallback: /* @__PURE__ */ e(r, { className: "h-10" }), children: /* @__PURE__ */ e(s, {}) }, `center-${t}`)) }),
+    /* @__PURE__ */ e("div", { className: "flex items-center space-x-1", children: o.map((s, t) => /* @__PURE__ */ e(n, { fallback: /* @__PURE__ */ e(r, { className: "h-10" }), children: /* @__PURE__ */ e(s, {}) }, `right-${t}`)) })
+  ] });
+};
+export {
+  x as default
+};