@simple-builder/react 1.2.3 → 1.2.4

package/dist/chunk-OOIADGIA.js

@@ -0,0 +1,153 @@
+'use strict';
+
+var React3 = require('react');
+var NextImage = require('next/image');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var tailwindVariants = require('tailwind-variants');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
+var NextImage__default = /*#__PURE__*/_interopDefault(NextImage);
+
+// src/lib/builder.ts
+var builder = /* @__PURE__ */ (() => {
+  const components = [];
+  return {
+    register: (component, config) => {
+      if (components.find(({ name }) => name === config.name)) {
+        console.log(
+          `[simple-builder]: Component ${config.name} already registered.`
+        );
+        return;
+      }
+      components.push({
+        component,
+        ...config
+      });
+    },
+    getComponents: () => components,
+    getComponent: (name) => {
+      return components.find((c) => c.name === name);
+    },
+    bindComponent: ({ content, ...block }, edit) => {
+      const component = components.find(({ name }) => name === block.component);
+      if (!component) {
+        throw new Error(
+          `[simple-builder]: Component ${block.component} not found`
+        );
+      }
+      const Element = React3.createElement(component.component, {
+        key: block.id,
+        builder: { id: block.id, content, edit },
+        ...block.props
+      });
+      return Element;
+    }
+  };
+})();
+var Image = (props) => {
+  if (typeof NextImage__default.default !== "undefined") {
+    return /* @__PURE__ */ React3__namespace.createElement(NextImage__default.default, { ...props });
+  }
+  return /* @__PURE__ */ React3__namespace.createElement("img", { ...props });
+};
+var twMerge = tailwindMerge.extendTailwindMerge({
+  prefix: "sb-"
+});
+function cn(...inputs) {
+  return twMerge(clsx.clsx(inputs));
+}
+var tv = tailwindVariants.createTV({
+  twMergeConfig: {
+    prefix: "sb-"
+  }
+});
+var insertAt = (items, index, item) => {
+  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
+};
+
+// src/components/design-wrapper.tsx
+var DesignWrapper = (props) => {
+  const { children, className, building = false } = props;
+  const { background } = props.styles?.desktop ?? {};
+  const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
+  const src = matches ? matches[1] : void 0;
+  const desktopStyles = props.styles?.desktop ?? {};
+  const mobileStyles = props.styles?.mobile ?? {};
+  const container = props.styles?.container ?? true;
+  const hidden = props.styles?.hidden ?? "never";
+  const id = React3__namespace.useId().replace(/[^a-zA-Z0-9]/g, "");
+  let hiddenClass = "";
+  switch (hidden) {
+    case "always":
+      hiddenClass = building ? "sb-opacity-30" : "sb-hidden";
+      break;
+    case "mobile":
+      hiddenClass = building ? "max-md:sb-opacity-30" : "max-md:sb-hidden";
+      break;
+    case "desktop":
+      hiddenClass = building ? "md:sb-opacity-30" : "md:sb-hidden";
+      break;
+    case "never":
+      hiddenClass = "";
+      break;
+  }
+  return /* @__PURE__ */ React3__namespace.createElement("div", { id, className: cn("sb-relative", className, hiddenClass) }, src && /* @__PURE__ */ React3__namespace.createElement(
+    Image,
+    {
+      src,
+      alt: "",
+      fill: true,
+      className: "sb-object-cover sb-absolute sb-inset-0 sb-pointer-events-none sb--z-[1]"
+    }
+  ), container ? /* @__PURE__ */ React3__namespace.createElement("div", { className: "container sb-mx-auto" }, children) : children, /* @__PURE__ */ React3__namespace.createElement("style", null, `
+        #${id} {
+          ${Object.entries(desktopStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value};`).join(" ")}
+        }
+
+        @media (max-width: 1024px) {
+          #${id} {
+            ${Object.entries(mobileStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value}; `).join(" ")}
+          }
+        }
+      `.replace(/\s\s+/g, " ")));
+};
+var BuildContainerInner = React3__namespace.lazy(
+  () => import('./build-container-client-Z34EUPR3.js')
+);
+var BuildContainer = (props) => {
+  const { content, edit, name } = props;
+  const items = Array.isArray(content) ? content : content?.[name] || [];
+  if (!edit) {
+    return items.map((item) => /* @__PURE__ */ React3__namespace.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)));
+  }
+  return /* @__PURE__ */ React3__namespace.createElement(React3__namespace.Suspense, { fallback: /* @__PURE__ */ React3__namespace.createElement("div", null, "Loading...") }, /* @__PURE__ */ React3__namespace.createElement(BuildContainerInner, { ...props }));
+};
+
+exports.BuildContainer = BuildContainer;
+exports.DesignWrapper = DesignWrapper;
+exports.Image = Image;
+exports.builder = builder;
+exports.cn = cn;
+exports.insertAt = insertAt;
+exports.tv = tv;

package/dist/chunk-XJ4ZJCQS.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var chunkOOIADGIA_js = require('./chunk-OOIADGIA.js');
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var StaticContent = (props) => {
+  return /* @__PURE__ */ React__namespace.createElement(
+    chunkOOIADGIA_js.BuildContainer,
+    {
+      name: "root",
+      edit: false,
+      multiple: true,
+      content: props.content || []
+    }
+  );
+};
+
+// src/index.ts
+var BuilderContent = React.lazy(() => import('./builder-content-IQHALH5A.js'));
+
+exports.BuilderContent = BuilderContent;
+exports.StaticContent = StaticContent;

package/dist/index.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var chunkR7ZUBTTN_js = require('./chunk-R7ZUBTTN.js');
-var chunk7SAGJTH2_js = require('./chunk-7SAGJTH2.js');
+var chunkXJ4ZJCQS_js = require('./chunk-XJ4ZJCQS.js');
+var chunkOOIADGIA_js = require('./chunk-OOIADGIA.js');
 
 
 
 Object.defineProperty(exports, "BuilderContent", {
   enumerable: true,
-  get: function () { return chunkR7ZUBTTN_js.BuilderContent; }
+  get: function () { return chunkXJ4ZJCQS_js.BuilderContent; }
 });
 Object.defineProperty(exports, "StaticContent", {
   enumerable: true,
-  get: function () { return chunkR7ZUBTTN_js.StaticContent; }
+  get: function () { return chunkXJ4ZJCQS_js.StaticContent; }
 });
 Object.defineProperty(exports, "BuildContainer", {
   enumerable: true,
-  get: function () { return chunk7SAGJTH2_js.BuildContainer; }
+  get: function () { return chunkOOIADGIA_js.BuildContainer; }
 });
 Object.defineProperty(exports, "builder", {
   enumerable: true,
-  get: function () { return chunk7SAGJTH2_js.builder; }
+  get: function () { return chunkOOIADGIA_js.builder; }
 });

package/dist/index.mjs

@@ -1,2 +1,2 @@
-export { BuilderContent, StaticContent } from './chunk-5EZQG6MP.mjs';
-export { BuildContainer, builder } from './chunk-NAY45PRQ.mjs';
+export { BuilderContent, StaticContent } from './chunk-7J7CMYXS.mjs';
+export { BuildContainer, builder } from './chunk-NJ6FM7SJ.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-builder/react",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "private": false,
   "description": "React package for the simple builder package.",
   "repository": "https://github.com/pieter-berkel/simple-builder.git",