@chaibuilder/sdk 1.2.9 → 1.2.10-7.beta.2

package/dist/render.d.ts

@@ -1,5 +1,4 @@
 import { JSX as JSX_2 } from 'react/jsx-runtime';
-import { default as React_2 } from 'react';
 
 declare type ChaiBlock = {
     _id: string;
@@ -9,51 +8,33 @@ declare type ChaiBlock = {
     _bindings?: Record<string, string>;
 } & Record<string, any>;
 
-export declare type ChaiPageData = {
-    page: {
-        blocks: ChaiBlock[];
-        seoData?: Record<string, string>;
-        slug?: string;
-        name?: string;
-        providers?: {
-            providerKey: string;
-            args: Record<string, any>;
-        }[];
-    };
-    subPages?: {
-        uuid: string;
-        blocks: ChaiBlock[];
-        providers: {
-            providerKey: string;
-            args: Record<string, any>;
-        }[];
-    }[];
-    project: {
-        name?: string;
-        favicon?: string;
-        brandingOptions: Record<string, string | number>;
-        seoData?: Record<string, string>;
-        primaryLanguage?: string;
-        languages?: string[];
-        homepage?: string;
-    };
-};
+declare type ChaiBuilderTailwindTheme<T extends Record<string, unknown> = Record<string, unknown>> = {
+    primaryColor: string;
+    secondaryColor: string;
+    headingFont: string;
+    bodyFont: string;
+    roundedCorners: string;
+    bodyBgLightColor: string;
+    bodyBgDarkColor: string;
+    bodyTextLightColor: string;
+    bodyTextDarkColor: string;
+} & T;
 
-declare type ChaiPageProps = {
-    before?: React_2.ReactNode;
-    after?: React_2.ReactNode;
-    pageData: ChaiPageData;
-    classPrefix?: string;
-    externalData?: Record<string, any>;
-};
+/**
+ * This function converts the chai format content to chai blocks
+ * @param chaiFormatContent
+ */
+export declare const convertToBlocks: (chaiFormatContent: string) => ChaiBlock[];
 
-export declare function RenderChaiBlocks({ blocks, parent, classPrefix, externalData, }: {
+export declare const getStylesForBlocks: (blocks: ChaiBlock[], theme?: ChaiBuilderTailwindTheme | Record<string, string>, includeBaseStyles?: boolean) => Promise<string>;
+
+export declare function RenderChaiBlocks({ blocks, parent, classPrefix, externalData, blockModifierCallback, lang, }: {
     blocks: ChaiBlock[];
     parent?: string;
     classPrefix?: string;
     externalData?: Record<string, any>;
+    blockModifierCallback?: (block: ChaiBlock) => ChaiBlock;
+    lang?: string;
 }): JSX_2.Element;
 
-export declare const RenderChaiPage: ({ pageData, externalData, before, after, classPrefix, }: ChaiPageProps) => JSX_2.Element;
-
 export { }

package/dist/render.js

@@ -1,123 +1,215 @@
-import { j as o } from "./jsx-runtime-WbnYoNE9.js";
-import u from "react";
-import { isString as E, memoize as y, get as c, isEmpty as h, each as A, filter as g, omit as x } from "lodash-es";
-import { twMerge as N } from "tailwind-merge";
-import { S as B, a as _, B as R } from "./MODIFIERS-RiXS5Mn1.js";
-import { getBlockComponent as T } from "@chaibuilder/runtime";
-import { a as F, g as L } from "./functions-xIebp8Aw.js";
-import { Provider as Y } from "react-wrap-balancer";
-import "./_commonjsHelpers-UyOWmZb0.js";
-const I = (t) => {
-  const r = {};
-  return Object.keys(t).forEach((n) => {
-    E(t[n]) && t[n].startsWith(B) && (r[n] = t[n].replace(B, "").split(","));
-  }), r;
-}, K = y((t, r) => {
-  const n = t.replace(_, "").split(","), s = N(n[0], n[1]);
-  return F(s, r).replace(_, "").trim();
+import { last, flattenDeep, memoize, filter, isEmpty, omit, isString, get, each, cloneDeep, forEach, keys, has, includes, replace } from "lodash-es";
+import { S as STYLES_KEY, a as SLOT_KEY } from "./STRINGS-t8UhMYZ6.js";
+import { j as jsxRuntimeExports } from "./jsx-runtime-_yxTjXEh.js";
+import React__default from "react";
+import { twMerge } from "tailwind-merge";
+import { getBlockComponent } from "@chaibuilder/runtime";
+import { createTailwindcss } from "@mhsdesign/jit-browser-tailwindcss";
+import forms from "@tailwindcss/forms";
+import typography from "@tailwindcss/typography";
+import aspectRatio from "@tailwindcss/aspect-ratio";
+import { g as getChaiBuilderTheme, c as chaiBuilderPlugin } from "./plugin-T1qbgBUO.js";
+import "./plugin-YcxlCmRm.js";
+const addPrefixToClasses = (classes, prefix = "") => {
+  const classesArray = classes.replace(STYLES_KEY, "").split(",");
+  const array = classesArray.map((item) => {
+    const classes2 = item.split(" ");
+    const newClasses = classes2.map((item2) => {
+      if (item2 === "")
+        return "";
+      if (item2.includes(":")) {
+        const values = item2.split(":");
+        values[values.length - 1] = prefix + last(values);
+        return values.join(":");
+      }
+      return `${prefix}${item2}`;
+    });
+    return newClasses.join(" ");
+  });
+  return flattenDeep(array).join(" ");
+};
+const convertToBlocks = (chaiFormatContent) => {
+  if (!chaiFormatContent)
+    return [];
+  try {
+    const blocks = JSON.parse(removeAssetPrefix(chaiFormatContent));
+    return blocks.filter((block) => !block._type.startsWith("@chai"));
+  } catch (error) {
+    return [{ _type: "Paragraph", _id: "error", content: "Invalid JSON. Please check the JSON string." }];
+  }
+};
+function removeAssetPrefix(input) {
+  const regex = /(asset:\/\/|https:\/\/asset\.localhost\/)(?:localhost\/)?[^"']+/g;
+  return input.replace(regex, (match) => {
+    const decodedUrl = decodeURIComponent(match);
+    const publicIndex = decodedUrl.indexOf("public");
+    if (publicIndex !== -1) {
+      return decodedUrl.substring(publicIndex + 6);
+    }
+    return decodedUrl;
+  });
+}
+const getSlots = (block) => {
+  const slots = {};
+  Object.keys(block).forEach((key) => {
+    if (isString(block[key]) && block[key].startsWith(SLOT_KEY)) {
+      slots[key] = block[key].replace(SLOT_KEY, "").split(",");
+    }
+  });
+  return slots;
+};
+const generateClassNames = memoize((styles, classPrefix) => {
+  const stylesArray = styles.replace(STYLES_KEY, "").split(",");
+  const classes = twMerge(stylesArray[0], stylesArray[1]);
+  if (classPrefix === "")
+    return classes.replace(STYLES_KEY, "").trim();
+  return addPrefixToClasses(classes, classPrefix).replace(STYLES_KEY, "").trim();
 });
-function W(t, r) {
-  return c(t, `${r}_attrs`, {});
+function getElementAttrs(block, key) {
+  const attrs = get(block, `${key}_attrs`, {});
+  if (has(attrs, "data-ai-key")) {
+    delete attrs["data-ai-key"];
+  }
+  const attrsKeys = keys(attrs).join(" ");
+  if (includes(attrsKeys, "x-show") && !includes(attrsKeys, "x-transition")) {
+    attrs["x-transition"] = "";
+  }
+  return attrs;
 }
-function w(t, r) {
-  const n = {};
-  return Object.keys(t).forEach((s) => {
-    if (E(t[s]) && t[s].startsWith(_)) {
-      const i = K(t[s], r);
-      n[s] = {
-        className: i,
-        ...W(t, s)
+function getStyleAttrs(block, classPrefix) {
+  const styles = {};
+  Object.keys(block).forEach((key) => {
+    if (isString(block[key]) && block[key].startsWith(STYLES_KEY)) {
+      const classes = generateClassNames(block[key], classPrefix);
+      styles[key] = {
+        className: classes,
+        ...getElementAttrs(block, key)
       };
     }
-  }), n;
+  });
+  return styles;
+}
+function applyBindings(block, chaiData) {
+  const bindings = get(block, "_bindings", {});
+  if (isEmpty(bindings))
+    return { ...block };
+  each(bindings, (value, key) => {
+    if (isString(value) && get(chaiData, value, null)) {
+      block[key] = get(chaiData, value, null);
+    }
+  });
+  return block;
 }
-function z(t, r) {
-  const n = c(t, "_bindings", {});
-  return h(n) ? { ...t } : (A(n, (s, i) => {
-    E(s) && c(r, s, null) && (t[i] = c(r, s, null));
-  }), t);
+function applyLanguage(_block, lang, blockDefinition) {
+  if (isEmpty(lang))
+    return _block;
+  const block = cloneDeep(_block);
+  forEach(keys(block), (key) => {
+    if (get(blockDefinition, ["props", key, "i18n"]) && !isEmpty(lang)) {
+      block[key] = get(block, `${key}-${lang}`, block[key]);
+    }
+  });
+  return block;
 }
-function j({
-  blocks: t,
-  parent: r,
-  classPrefix: n = "c-",
-  externalData: s = {}
+function RenderChaiBlocks({
+  blocks,
+  parent,
+  classPrefix = "",
+  externalData = {},
+  blockModifierCallback,
+  lang
 }) {
-  const i = t, l = (e) => w(e, n), S = r ? g(t, { _parent: r }) : g(t, (e) => h(e._parent));
-  return /* @__PURE__ */ o.jsx(o.Fragment, { children: u.Children.toArray(
-    S.map((e, C) => {
-      const p = I(e), m = {};
-      h(p) || Object.keys(p).forEach((a) => {
-        m[a] = u.Children.toArray(
-          p[a].map((f) => /* @__PURE__ */ o.jsx(
-            j,
-            {
-              externalData: s,
-              classPrefix: n,
-              blocks: i,
-              parent: f
-            }
-          ))
-        );
-      });
-      const O = g(i, { _parent: e._id });
-      m.children = O.length > 0 ? /* @__PURE__ */ o.jsx(
-        j,
+  const allBlocks = blocks;
+  const getStyles = (block) => getStyleAttrs(block, classPrefix);
+  const filteredBlocks = parent ? filter(blocks, { _parent: parent }) : filter(blocks, (block) => isEmpty(block._parent));
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: React__default.Children.toArray(
+    filteredBlocks.map((block, index) => {
+      const slots = getSlots(block);
+      const attrs = {};
+      if (!isEmpty(slots)) {
+        Object.keys(slots).forEach((key) => {
+          attrs[key] = React__default.Children.toArray(
+            slots[key].map((slotId) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+              RenderChaiBlocks,
+              {
+                externalData,
+                classPrefix,
+                blocks: allBlocks,
+                parent: slotId,
+                lang
+              }
+            ))
+          );
+        });
+      }
+      const blocks2 = filter(allBlocks, { _parent: block._id });
+      attrs.children = blocks2.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        RenderChaiBlocks,
         {
-          externalData: s,
-          classPrefix: n,
-          parent: e._id,
-          blocks: i
+          externalData,
+          classPrefix,
+          parent: block._id,
+          blocks: allBlocks,
+          lang
         }
       ) : null;
-      const d = T(e._type);
-      if (d !== null) {
-        let a = e;
-        const f = d.component;
-        return a = { ...d.defaults, ...e }, u.createElement(
-          f,
-          x(
+      const blockDefinition = getBlockComponent(block._type);
+      if (blockDefinition !== null) {
+        let syncedBlock = block;
+        const Component = blockDefinition.component;
+        syncedBlock = { ...blockDefinition.defaults, ...block };
+        if (blockModifierCallback) {
+          syncedBlock = blockModifierCallback(syncedBlock);
+        }
+        return React__default.createElement(
+          Component,
+          omit(
             {
               blockProps: {},
-              inBuilder: !1,
-              ...a,
-              index: C,
-              ...z(e, s),
-              ...l(a),
-              ...m
+              inBuilder: false,
+              ...syncedBlock,
+              index,
+              ...applyBindings(applyLanguage(block, lang, blockDefinition), externalData),
+              ...getStyles(syncedBlock),
+              ...attrs
             },
             ["_parent"]
           )
         );
       }
-      return /* @__PURE__ */ o.jsxs("noscript", { children: [
-        e._type,
+      return /* @__PURE__ */ jsxRuntimeExports.jsxs("noscript", { children: [
+        block._type,
         " not found"
       ] });
     })
   ) });
 }
-const Q = ({
-  pageData: t,
-  externalData: r = {},
-  before: n = null,
-  after: s = null,
-  classPrefix: i = "c-"
-}) => {
-  const l = c(t.project, "brandingOptions", R);
-  return /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
-    n,
-    /* @__PURE__ */ o.jsx(
-      "div",
-      {
-        className: i.replace("-", "") + " " + L(l, i) + " min-h-screen",
-        children: /* @__PURE__ */ o.jsx(Y, { children: /* @__PURE__ */ o.jsx(j, { externalData: r, blocks: t.page.blocks || [], classPrefix: i }) })
-      }
-    ),
-    s
-  ] });
+async function getTailwindCSS(theme, markupString, safelist = [], prefix = "", includeBaseStyles = false) {
+  const tailwind = createTailwindcss({
+    tailwindConfig: {
+      darkMode: "class",
+      safelist,
+      theme: { extend: getChaiBuilderTheme(theme) },
+      plugins: [forms, typography, aspectRatio, chaiBuilderPlugin],
+      corePlugins: { preflight: includeBaseStyles },
+      ...prefix ? { prefix: `${prefix}` } : {}
+    }
+  });
+  return await tailwind.generateStylesFromContent(
+    ` ${includeBaseStyles ? "@tailwind base;" : ""}
+      @tailwind components;
+      @tailwind utilities;`,
+    markupString
+  );
+}
+const getBlocksTailwindCSS = (blocks, theme, includeBaseStyles = false) => {
+  return getTailwindCSS(theme, [replace(JSON.stringify(blocks), /#styles:,?/g, "")], [], "", includeBaseStyles);
+};
+const getStylesForBlocks = async (blocks, theme = {}, includeBaseStyles = true) => {
+  return await getBlocksTailwindCSS(blocks, theme, includeBaseStyles);
 };
 export {
-  j as RenderChaiBlocks,
-  Q as RenderChaiPage
+  RenderChaiBlocks,
+  convertToBlocks,
+  getStylesForBlocks
 };

package/dist/runtime.cjs

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const runtime = require("@chaibuilder/runtime");
+const controls = require("./controls-4t-C_rP2.cjs");
+require("lodash-es");
+exports.Checkbox = controls.c;
+exports.Code = controls.l;
+exports.Color = controls.h;
+exports.Icon = controls.q;
+exports.Image = controls.x;
+exports.InfoField = controls.u;
+exports.Link = controls.w;
+exports.List = controls.S;
+exports.Model = controls.b;
+exports.MultilineText = controls.f;
+exports.Numeric = controls.s;
+exports.RichText = controls.m;
+exports.SelectOption = controls.y;
+exports.SingleLineText = controls.g;
+exports.Slot = controls.r;
+exports.Styles = controls.T;
+Object.keys(runtime).forEach((k) => {
+  if (k !== "default" && !Object.prototype.hasOwnProperty.call(exports, k))
+    Object.defineProperty(exports, k, {
+      enumerable: true,
+      get: () => runtime[k]
+    });
+});

package/dist/runtime.d.ts

@@ -0,0 +1,5 @@
+
+export * from "@chaibuilder/runtime";
+export * from "@chaibuilder/runtime/controls";
+
+export { }

package/dist/runtime.js

@@ -0,0 +1,21 @@
+export * from "@chaibuilder/runtime";
+import { c, l, h, q, x, u, w, S, b, f, s, m, y, g, r, T } from "./controls-fQIu127i.js";
+import "lodash-es";
+export {
+  c as Checkbox,
+  l as Code,
+  h as Color,
+  q as Icon,
+  x as Image,
+  u as InfoField,
+  w as Link,
+  S as List,
+  b as Model,
+  f as MultilineText,
+  s as Numeric,
+  m as RichText,
+  y as SelectOption,
+  g as SingleLineText,
+  r as Slot,
+  T as Styles
+};