@simple-builder/react 1.3.4 → 1.3.6

package/dist/chunk-RNGHWAPZ.js

@@ -0,0 +1,269 @@
+'use strict';
+
+var chunkNUDE6YTK_js = require('./chunk-NUDE6YTK.js');
+var React = require('react');
+var reactSlot = require('@radix-ui/react-slot');
+var classVarianceAuthority = require('class-variance-authority');
+
+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 BuilderContext = React__namespace.createContext(
+  null
+);
+var BuilderProvider = (props) => {
+  const url = props.url ?? "/api/simple-builder";
+  const [content, setContent] = React__namespace.useState(
+    props.content ?? []
+  );
+  const getItem = React__namespace.useCallback(
+    (id) => {
+      return findRecursive(content, (item) => item.id === id);
+    },
+    [content]
+  );
+  const patchItem = React__namespace.useCallback(
+    (id, patch) => {
+      setContent(
+        (content2) => mapRecursive(content2, (item) => {
+          if (item.id === id) {
+            return {
+              ...item,
+              ...patch
+            };
+          }
+          return item;
+        })
+      );
+    },
+    [setContent, mapRecursive]
+  );
+  const addContent = React__namespace.useCallback(
+    (name, container, parent, index = 0) => {
+      const component = chunkNUDE6YTK_js.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) => chunkNUDE6YTK_js.insertAt(content2, index, entry));
+        return;
+      }
+      setContent(
+        (content2) => mapRecursive(content2, (item) => {
+          if (item.id === parent) {
+            return {
+              ...item,
+              content: {
+                ...item.content,
+                [container]: chunkNUDE6YTK_js.insertAt(item.content?.[container], index, entry)
+              }
+            };
+          }
+          return item;
+        })
+      );
+    },
+    [setContent, mapRecursive]
+  );
+  const deleteContent = React__namespace.useCallback(
+    (id) => setContent((prev) => filterRecursive(prev, (item) => item.id !== id)),
+    [setContent, filterRecursive]
+  );
+  const bringUp = React__namespace.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__namespace.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__namespace.useCallback(async () => {
+    const slug = window.location.pathname;
+    try {
+      await fetch(`${url}/page/update`, {
+        method: "POST",
+        body: JSON.stringify({
+          slug,
+          content
+        })
+      });
+      alert("Pagina opgeslagen!");
+    } catch (e) {
+      console.error("[simple-builder]: Failed to save content", e);
+      alert("Er is iets fout gegaan. Bekijk de console voor meer info.");
+    }
+  }, [content]);
+  return /* @__PURE__ */ React__namespace.createElement(
+    BuilderContext.Provider,
+    {
+      value: {
+        url,
+        content,
+        setContent,
+        getItem,
+        patchItem,
+        addContent,
+        bringUp,
+        bringDown,
+        deleteContent,
+        save
+      }
+    },
+    props.children
+  );
+};
+var useBuilder = () => {
+  const context = React__namespace.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 = classVarianceAuthority.cva(
+  "sb:inline-flex sb:items-center sb:justify-center sb:gap-2 sb:whitespace-nowrap sb:rounded-md sb:text-sm sb:font-medium sb:transition-colors sb:focus-visible:outline-hidden sb:focus-visible:ring-1 sb:focus-visible:ring-ring sb:disabled:pointer-events-none sb:disabled:opacity-50 sb:[&_svg]:pointer-events-none sb:[&_svg]:size-4 sb:[&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "sb:bg-primary sb:text-primary-foreground sb:shadow sb:hover:bg-primary/90",
+        destructive: "sb:bg-destructive sb:text-destructive-foreground sb:shadow-sm sb:hover:bg-destructive/90",
+        outline: "sb:border sb:border-input sb:bg-background sb:shadow-sm sb:hover:bg-accent sb:hover:text-accent-foreground",
+        secondary: "sb:bg-secondary sb:text-secondary-foreground sb:shadow-sm sb:hover:bg-secondary/80",
+        ghost: "sb:hover:bg-accent sb:hover:text-accent-foreground",
+        link: "sb:text-primary sb:underline-offset-4 sb:hover:underline"
+      },
+      size: {
+        default: "sb:h-9 sb:px-4 sb:py-2",
+        sm: "sb:h-8 sb:rounded-md sb:px-3 sb:text-xs",
+        lg: "sb:h-10 sb:rounded-md sb:px-8",
+        icon: "sb:h-9 sb:w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React__namespace.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? reactSlot.Slot : "button";
+    return /* @__PURE__ */ React__namespace.createElement(
+      Comp,
+      {
+        className: chunkNUDE6YTK_js.cn(buttonVariants({ variant, size, className })),
+        ref,
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+exports.BuilderProvider = BuilderProvider;
+exports.Button = Button;
+exports.buttonVariants = buttonVariants;
+exports.useBuilder = useBuilder;

package/dist/chunk-XLE7GSYM.mjs

@@ -0,0 +1,244 @@
+import { cn, builder, insertAt } from './chunk-6GCUWI4L.mjs';
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+
+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) => {
+      return findRecursive(content, (item) => item.id === id);
+    },
+    [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;
+    try {
+      await fetch(`${url}/page/update`, {
+        method: "POST",
+        body: JSON.stringify({
+          slug,
+          content
+        })
+      });
+      alert("Pagina opgeslagen!");
+    } catch (e) {
+      console.error("[simple-builder]: Failed to save content", e);
+      alert("Er is iets fout gegaan. Bekijk de console voor meer info.");
+    }
+  }, [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(
+  "sb:inline-flex sb:items-center sb:justify-center sb:gap-2 sb:whitespace-nowrap sb:rounded-md sb:text-sm sb:font-medium sb:transition-colors sb:focus-visible:outline-hidden sb:focus-visible:ring-1 sb:focus-visible:ring-ring sb:disabled:pointer-events-none sb:disabled:opacity-50 sb:[&_svg]:pointer-events-none sb:[&_svg]:size-4 sb:[&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "sb:bg-primary sb:text-primary-foreground sb:shadow sb:hover:bg-primary/90",
+        destructive: "sb:bg-destructive sb:text-destructive-foreground sb:shadow-sm sb:hover:bg-destructive/90",
+        outline: "sb:border sb:border-input sb:bg-background sb:shadow-sm sb:hover:bg-accent sb:hover:text-accent-foreground",
+        secondary: "sb:bg-secondary sb:text-secondary-foreground sb:shadow-sm sb:hover:bg-secondary/80",
+        ghost: "sb:hover:bg-accent sb:hover:text-accent-foreground",
+        link: "sb:text-primary sb:underline-offset-4 sb:hover:underline"
+      },
+      size: {
+        default: "sb:h-9 sb:px-4 sb:py-2",
+        sm: "sb:h-8 sb:rounded-md sb:px-3 sb:text-xs",
+        lg: "sb:h-10 sb:rounded-md sb:px-8",
+        icon: "sb:h-9 sb:w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      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, useBuilder };

package/dist/index.d.mts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { createElement } from 'react';
 import * as _simple_builder_server from '@simple-builder/server';
 import { BuilderContent as BuilderContent$1, ContentItem } from '@simple-builder/server';
 
@@ -36,12 +37,17 @@ type BuildContainerProps$1 = {
     };
 };
 
-declare const builder: {
-    register: (component: any, config: Omit<Component, "component">) => void;
-    getComponents: () => Component[];
-    getComponent: (name: string) => Component | undefined;
-    bindComponent: ({ content, ...block }: ContentItem, edit?: boolean) => React.FunctionComponentElement<any>;
-};
+declare class Builder {
+    private static instance;
+    private components;
+    private constructor();
+    static getInstance(): Builder;
+    register(component: Component["component"], config: Omit<Component, "component">): void;
+    getComponents(): Component[];
+    getComponent(name: string): Component | undefined;
+    bindComponent({ content, ...block }: ContentItem, edit?: boolean): ReturnType<typeof createElement>;
+}
+declare const builder: Builder;
 
 type StaticContentProps = {
     content?: BuilderContent$1;

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { createElement } from 'react';
 import * as _simple_builder_server from '@simple-builder/server';
 import { BuilderContent as BuilderContent$1, ContentItem } from '@simple-builder/server';
 
@@ -36,12 +37,17 @@ type BuildContainerProps$1 = {
     };
 };
 
-declare const builder: {
-    register: (component: any, config: Omit<Component, "component">) => void;
-    getComponents: () => Component[];
-    getComponent: (name: string) => Component | undefined;
-    bindComponent: ({ content, ...block }: ContentItem, edit?: boolean) => React.FunctionComponentElement<any>;
-};
+declare class Builder {
+    private static instance;
+    private components;
+    private constructor();
+    static getInstance(): Builder;
+    register(component: Component["component"], config: Omit<Component, "component">): void;
+    getComponents(): Component[];
+    getComponent(name: string): Component | undefined;
+    bindComponent({ content, ...block }: ContentItem, edit?: boolean): ReturnType<typeof createElement>;
+}
+declare const builder: Builder;
 
 type StaticContentProps = {
     content?: BuilderContent$1;

package/dist/index.js

@@ -1,23 +1,23 @@
 'use strict';
 
-var chunk7X5S5JRE_js = require('./chunk-7X5S5JRE.js');
-var chunkLEIASP7E_js = require('./chunk-LEIASP7E.js');
+var chunkNZ4ZQMIS_js = require('./chunk-NZ4ZQMIS.js');
+var chunkNUDE6YTK_js = require('./chunk-NUDE6YTK.js');
 
 
 
 Object.defineProperty(exports, "BuilderContent", {
   enumerable: true,
-  get: function () { return chunk7X5S5JRE_js.BuilderContent; }
+  get: function () { return chunkNZ4ZQMIS_js.BuilderContent; }
 });
 Object.defineProperty(exports, "StaticContent", {
   enumerable: true,
-  get: function () { return chunk7X5S5JRE_js.StaticContent; }
+  get: function () { return chunkNZ4ZQMIS_js.StaticContent; }
 });
 Object.defineProperty(exports, "BuildContainer", {
   enumerable: true,
-  get: function () { return chunkLEIASP7E_js.BuildContainer; }
+  get: function () { return chunkNUDE6YTK_js.BuildContainer; }
 });
 Object.defineProperty(exports, "builder", {
   enumerable: true,
-  get: function () { return chunkLEIASP7E_js.builder; }
+  get: function () { return chunkNUDE6YTK_js.builder; }
 });

package/dist/index.mjs

@@ -1,2 +1,2 @@
-export { BuilderContent, StaticContent } from './chunk-X5GVLHI2.mjs';
-export { BuildContainer, builder } from './chunk-TQQ4WVQU.mjs';
+export { BuilderContent, StaticContent } from './chunk-F5JWY4CM.mjs';
+export { BuildContainer, builder } from './chunk-6GCUWI4L.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-builder/react",
-  "version": "1.3.4",
+  "version": "1.3.6",
   "private": false,
   "description": "React package for the simple builder package.",
   "repository": "https://github.com/pieter-berkel/simple-builder.git",
@@ -59,7 +59,7 @@
     "tailwind-merge": "^2.2.0",
     "tailwind-variants": "^0.1.20",
     "zod": "^3.22.4",
-    "@simple-builder/server": "1.3.4"
+    "@simple-builder/server": "1.3.6"
   },
   "peerDependencies": {
     "react": ">=16.8.0",