@simple-builder/react 1.0.0

package/dist/builder-content-I65E3YF2.mjs

@@ -0,0 +1,21 @@
+import { BuildContainer } from './chunk-LKNRLBTK.mjs';
+import { BuilderProvider, useBuilder, Button } from './chunk-KZNIT2AQ.mjs';
+import './chunk-7K7IGTF3.mjs';
+import * as React2 from 'react';
+
+var BuilderHeader = () => {
+  const { save } = useBuilder();
+  return /* @__PURE__ */ React2.createElement("div", { className: "grid grid-cols-3 gap-4 items-center p-2 shadow-lg sticky inset-x-0 top-0 bg-sb-background z-30" }, /* @__PURE__ */ React2.createElement("div", { className: "flex gap-4 items-center" }, /* @__PURE__ */ React2.createElement(Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+};
+
+// src/components/builder-content.tsx
+var BuilderContent = (props) => {
+  return /* @__PURE__ */ React2.createElement(BuilderProvider, { content: props.content }, /* @__PURE__ */ React2.createElement(BuilderContentInner, null));
+};
+var BuilderContentInner = () => {
+  const { content } = useBuilder();
+  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(BuilderHeader, null), /* @__PURE__ */ React2.createElement(BuildContainer, { name: "root", edit: true, multiple: true, content }));
+};
+var builder_content_default = BuilderContent;
+
+export { builder_content_default as default };

package/dist/builder-content-XP2KWHHT.js

@@ -0,0 +1,43 @@
+'use strict';
+
+var chunk4CD23J5W_js = require('./chunk-4CD23J5W.js');
+var chunkTEAHH2DG_js = require('./chunk-TEAHH2DG.js');
+require('./chunk-VMHWPKU4.js');
+var React2 = 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 React2__namespace = /*#__PURE__*/_interopNamespace(React2);
+
+var BuilderHeader = () => {
+  const { save } = chunkTEAHH2DG_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement("div", { className: "grid grid-cols-3 gap-4 items-center p-2 shadow-lg sticky inset-x-0 top-0 bg-sb-background z-30" }, /* @__PURE__ */ React2__namespace.createElement("div", { className: "flex gap-4 items-center" }, /* @__PURE__ */ React2__namespace.createElement(chunkTEAHH2DG_js.Button, { variant: "ghost", size: "sm", onClick: save }, "Opslaan")));
+};
+
+// src/components/builder-content.tsx
+var BuilderContent = (props) => {
+  return /* @__PURE__ */ React2__namespace.createElement(chunkTEAHH2DG_js.BuilderProvider, { content: props.content }, /* @__PURE__ */ React2__namespace.createElement(BuilderContentInner, null));
+};
+var BuilderContentInner = () => {
+  const { content } = chunkTEAHH2DG_js.useBuilder();
+  return /* @__PURE__ */ React2__namespace.createElement(React2__namespace.Fragment, null, /* @__PURE__ */ React2__namespace.createElement(BuilderHeader, null), /* @__PURE__ */ React2__namespace.createElement(chunk4CD23J5W_js.BuildContainer, { name: "root", edit: true, multiple: true, content }));
+};
+var builder_content_default = BuilderContent;
+
+module.exports = builder_content_default;

package/dist/chunk-4CD23J5W.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var chunkVMHWPKU4_js = require('./chunk-VMHWPKU4.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 BuildContainerInner = React__namespace.lazy(
+  () => import('./build-container-client-JPFTBMJ3.js')
+);
+var BuildContainer = (props) => {
+  const { content, edit, name } = props;
+  const items = Array.isArray(content) ? content : content?.[name] || [];
+  if (!edit) {
+    return items.map((item) => chunkVMHWPKU4_js.builder.bindComponent(item));
+  }
+  return /* @__PURE__ */ React__namespace.createElement(BuildContainerInner, { ...props });
+};
+
+exports.BuildContainer = BuildContainer;

package/dist/chunk-7K7IGTF3.mjs

@@ -0,0 +1,40 @@
+import { createElement } from 'react';
+
+// 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 = createElement(component.component, {
+        key: block.id,
+        builder: { id: block.id, content, edit },
+        ...block.props
+      });
+      return Element;
+    }
+  };
+})();
+
+export { builder };

package/dist/chunk-KZNIT2AQ.mjs

@@ -0,0 +1,266 @@
+import { builder } from './chunk-7K7IGTF3.mjs';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var insertAt = (items, index, item) => {
+  return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
+};
+var spacing = {
+  parse: (input) => {
+    const matches = input.match(/(\d+)/gm);
+    const [top = 0, right = 0, bottom = 0, left = 0] = matches?.map((match) => +match) || [];
+    switch (matches?.length) {
+      case 1:
+        return { top, right: top, bottom: top, left: top };
+      case 2:
+        return { top, bottom: top, left: right, right };
+      case 3:
+        return { top, right, left: right, bottom };
+      default:
+        return { top, right, bottom, left };
+    }
+  },
+  isIndipendent: (input) => {
+    const { top, right, bottom, left } = spacing.parse(input);
+    return top !== bottom || right !== left;
+  }
+};
+
+// src/components/context/builder-context.tsx
+var BuilderContext = React.createContext(
+  null
+);
+var BuilderProvider = (props) => {
+  const url = props.url ?? "/api/simple-builder";
+  const [content, setContent] = React.useState(
+    props.content ?? []
+  );
+  const getItem = React.useCallback(
+    (id) => {
+      const res = findRecursive(content, (item) => item.id === id);
+      console.log("RES", res);
+      return res;
+    },
+    [content]
+  );
+  const patchItem = React.useCallback(
+    (id, patch) => {
+      setContent(
+        (content2) => mapRecursive(content2, (item) => {
+          if (item.id === id) {
+            return {
+              ...item,
+              ...patch
+            };
+          }
+          return item;
+        })
+      );
+    },
+    [setContent, mapRecursive]
+  );
+  const addContent = React.useCallback(
+    (name, container, parent, index = 0) => {
+      const component = builder.getComponent(name);
+      if (!component) {
+        throw new Error(`[simple-builder]: Component "${name}" not found`);
+      }
+      const entry = {
+        id: crypto.randomUUID(),
+        component: component.name,
+        ...parent && { parent },
+        ...component.inputs && {
+          props: component.inputs.reduce(
+            (acc, input) => ({
+              ...acc,
+              [input.name]: input.defaultValue
+            }),
+            {}
+          )
+        },
+        ...component.defaultStyles && {
+          styles: component.defaultStyles
+        }
+      };
+      if (!parent) {
+        setContent((content2) => insertAt(content2, index, entry));
+        return;
+      }
+      setContent(
+        (content2) => mapRecursive(content2, (item) => {
+          if (item.id === parent) {
+            return {
+              ...item,
+              content: {
+                ...item.content,
+                [container]: insertAt(item.content?.[container], index, entry)
+              }
+            };
+          }
+          return item;
+        })
+      );
+    },
+    [setContent, mapRecursive]
+  );
+  const deleteContent = React.useCallback(
+    (id) => setContent((prev) => filterRecursive(prev, (item) => item.id !== id)),
+    [setContent, filterRecursive]
+  );
+  const bringUp = React.useCallback(
+    (id) => {
+      setContent(
+        (content2) => mapRecursive(content2, (item, index, arr) => {
+          if (item.id === id && index > 0) {
+            return arr[index - 1];
+          }
+          if (arr[index + 1]?.id === id) {
+            return arr[index + 1];
+          }
+          return item;
+        })
+      );
+    },
+    [setContent, mapRecursive]
+  );
+  const bringDown = React.useCallback(
+    (id) => {
+      setContent(
+        (content2) => mapRecursive(content2, (item, index, arr) => {
+          if (item.id === id && index < arr.length - 1) {
+            return arr[index + 1];
+          }
+          if (arr[index - 1]?.id === id) {
+            return arr[index - 1];
+          }
+          return item;
+        })
+      );
+    },
+    [setContent, mapRecursive]
+  );
+  const save = React.useCallback(async () => {
+    const slug = window.location.pathname;
+    await fetch(`${url}/page/update`, {
+      method: "POST",
+      body: JSON.stringify({
+        slug,
+        content
+      })
+    });
+  }, [content]);
+  return /* @__PURE__ */ React.createElement(
+    BuilderContext.Provider,
+    {
+      value: {
+        url,
+        content,
+        setContent,
+        getItem,
+        patchItem,
+        addContent,
+        bringUp,
+        bringDown,
+        deleteContent,
+        save
+      }
+    },
+    props.children
+  );
+};
+var useBuilder = () => {
+  const context = React.useContext(BuilderContext);
+  if (!context) {
+    throw new Error(
+      "[simple-builder]: useBuilder must be used within a BuilderProvider"
+    );
+  }
+  return context;
+};
+var filterRecursive = (items, predicate, key = "content") => {
+  return items.filter(predicate).map((item) => ({
+    ...item,
+    ...item[key] && {
+      [key]: Object.entries(item[key] ?? {}).reduce(
+        (acc, [name, content]) => ({
+          ...acc,
+          [name]: filterRecursive(content, predicate, key)
+        }),
+        {}
+      )
+    }
+  }));
+};
+var mapRecursive = (items, predicate, key = "content") => {
+  return items.map(predicate).map((item) => ({
+    ...item,
+    ...item[key] && {
+      [key]: Object.entries(item[key] ?? {}).reduce(
+        (acc, [name, content]) => ({
+          ...acc,
+          [name]: mapRecursive(content, predicate, key)
+        }),
+        {}
+      )
+    }
+  }));
+};
+var findRecursive = (items, predicate, key = "content") => {
+  for (const item of items) {
+    if (predicate(item)) {
+      return item;
+    }
+    if (item[key]) {
+      const keys = Object.keys(item[key] ?? {});
+      for (const x of keys) {
+        const found = findRecursive(item[key][x], predicate, key);
+        if (found) {
+          return found;
+        }
+      }
+    }
+  }
+};
+var buttonVariants = cva(
+  "inline-flex uppercase items-center justify-center whitespace-nowrap rounded-md text-xs font-semibold ring-offset-sb-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sb-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-sb-primary text-sb-primary-foreground hover:bg-sb-primary/90",
+        destructive: "bg-sb-destructive text-sb-destructive-foreground hover:bg-sb-destructive/90",
+        outline: "border border-sb-input bg-sb-background hover:bg-sb-accent hover:text-sb-accent-foreground",
+        ghost: "hover:bg-sb-accent hover:text-sb-accent-foreground"
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-8 px-3 py-1"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "default"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return /* @__PURE__ */ React.createElement(
+      Comp,
+      {
+        className: cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { BuilderProvider, Button, buttonVariants, cn, spacing, useBuilder };

package/dist/chunk-LKNRLBTK.mjs

@@ -0,0 +1,16 @@
+import { builder } from './chunk-7K7IGTF3.mjs';
+import * as React from 'react';
+
+var BuildContainerInner = React.lazy(
+  () => import('./build-container-client-FBOVSG6E.mjs')
+);
+var BuildContainer = (props) => {
+  const { content, edit, name } = props;
+  const items = Array.isArray(content) ? content : content?.[name] || [];
+  if (!edit) {
+    return items.map((item) => builder.bindComponent(item));
+  }
+  return /* @__PURE__ */ React.createElement(BuildContainerInner, { ...props });
+};
+
+export { BuildContainer };