@simple-builder/react 1.2.4 → 1.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,263 +0,0 @@
1
- 'use strict';
2
-
3
- var chunk7SAGJTH2_js = require('./chunk-7SAGJTH2.js');
4
- var React = require('react');
5
- var reactSlot = require('@radix-ui/react-slot');
6
- var classVarianceAuthority = require('class-variance-authority');
7
-
8
- function _interopNamespace(e) {
9
- if (e && e.__esModule) return e;
10
- var n = Object.create(null);
11
- if (e) {
12
- Object.keys(e).forEach(function (k) {
13
- if (k !== 'default') {
14
- var d = Object.getOwnPropertyDescriptor(e, k);
15
- Object.defineProperty(n, k, d.get ? d : {
16
- enumerable: true,
17
- get: function () { return e[k]; }
18
- });
19
- }
20
- });
21
- }
22
- n.default = e;
23
- return Object.freeze(n);
24
- }
25
-
26
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
27
-
28
- var BuilderContext = React__namespace.createContext(
29
- null
30
- );
31
- var BuilderProvider = (props) => {
32
- const url = props.url ?? "/api/simple-builder";
33
- const [content, setContent] = React__namespace.useState(
34
- props.content ?? []
35
- );
36
- const getItem = React__namespace.useCallback(
37
- (id) => {
38
- return findRecursive(content, (item) => item.id === id);
39
- },
40
- [content]
41
- );
42
- const patchItem = React__namespace.useCallback(
43
- (id, patch) => {
44
- setContent(
45
- (content2) => mapRecursive(content2, (item) => {
46
- if (item.id === id) {
47
- return {
48
- ...item,
49
- ...patch
50
- };
51
- }
52
- return item;
53
- })
54
- );
55
- },
56
- [setContent, mapRecursive]
57
- );
58
- const addContent = React__namespace.useCallback(
59
- (name, container, parent, index = 0) => {
60
- const component = chunk7SAGJTH2_js.builder.getComponent(name);
61
- if (!component) {
62
- throw new Error(`[simple-builder]: Component "${name}" not found`);
63
- }
64
- const entry = {
65
- id: crypto.randomUUID(),
66
- component: component.name,
67
- ...parent && { parent },
68
- ...component.inputs && {
69
- props: component.inputs.reduce(
70
- (acc, input) => ({
71
- ...acc,
72
- [input.name]: input.defaultValue
73
- }),
74
- {}
75
- )
76
- },
77
- ...component.defaultStyles && {
78
- styles: component.defaultStyles
79
- }
80
- };
81
- if (!parent) {
82
- setContent((content2) => chunk7SAGJTH2_js.insertAt(content2, index, entry));
83
- return;
84
- }
85
- setContent(
86
- (content2) => mapRecursive(content2, (item) => {
87
- if (item.id === parent) {
88
- return {
89
- ...item,
90
- content: {
91
- ...item.content,
92
- [container]: chunk7SAGJTH2_js.insertAt(item.content?.[container], index, entry)
93
- }
94
- };
95
- }
96
- return item;
97
- })
98
- );
99
- },
100
- [setContent, mapRecursive]
101
- );
102
- const deleteContent = React__namespace.useCallback(
103
- (id) => setContent((prev) => filterRecursive(prev, (item) => item.id !== id)),
104
- [setContent, filterRecursive]
105
- );
106
- const bringUp = React__namespace.useCallback(
107
- (id) => {
108
- setContent(
109
- (content2) => mapRecursive(content2, (item, index, arr) => {
110
- if (item.id === id && index > 0) {
111
- return arr[index - 1];
112
- }
113
- if (arr[index + 1]?.id === id) {
114
- return arr[index + 1];
115
- }
116
- return item;
117
- })
118
- );
119
- },
120
- [setContent, mapRecursive]
121
- );
122
- const bringDown = React__namespace.useCallback(
123
- (id) => {
124
- setContent(
125
- (content2) => mapRecursive(content2, (item, index, arr) => {
126
- if (item.id === id && index < arr.length - 1) {
127
- return arr[index + 1];
128
- }
129
- if (arr[index - 1]?.id === id) {
130
- return arr[index - 1];
131
- }
132
- return item;
133
- })
134
- );
135
- },
136
- [setContent, mapRecursive]
137
- );
138
- const save = React__namespace.useCallback(async () => {
139
- const slug = window.location.pathname;
140
- await fetch(`${url}/page/update`, {
141
- method: "POST",
142
- body: JSON.stringify({
143
- slug,
144
- content
145
- })
146
- });
147
- }, [content]);
148
- return /* @__PURE__ */ React__namespace.createElement(
149
- BuilderContext.Provider,
150
- {
151
- value: {
152
- url,
153
- content,
154
- setContent,
155
- getItem,
156
- patchItem,
157
- addContent,
158
- bringUp,
159
- bringDown,
160
- deleteContent,
161
- save
162
- }
163
- },
164
- props.children
165
- );
166
- };
167
- var useBuilder = () => {
168
- const context = React__namespace.useContext(BuilderContext);
169
- if (!context) {
170
- throw new Error(
171
- "[simple-builder]: useBuilder must be used within a BuilderProvider"
172
- );
173
- }
174
- return context;
175
- };
176
- var filterRecursive = (items, predicate, key = "content") => {
177
- return items.filter(predicate).map((item) => ({
178
- ...item,
179
- ...item[key] && {
180
- [key]: Object.entries(item[key] ?? {}).reduce(
181
- (acc, [name, content]) => ({
182
- ...acc,
183
- [name]: filterRecursive(content, predicate, key)
184
- }),
185
- {}
186
- )
187
- }
188
- }));
189
- };
190
- var mapRecursive = (items, predicate, key = "content") => {
191
- return items.map(predicate).map((item) => ({
192
- ...item,
193
- ...item[key] && {
194
- [key]: Object.entries(item[key] ?? {}).reduce(
195
- (acc, [name, content]) => ({
196
- ...acc,
197
- [name]: mapRecursive(content, predicate, key)
198
- }),
199
- {}
200
- )
201
- }
202
- }));
203
- };
204
- var findRecursive = (items, predicate, key = "content") => {
205
- for (const item of items) {
206
- if (predicate(item)) {
207
- return item;
208
- }
209
- if (item[key]) {
210
- const keys = Object.keys(item[key] ?? {});
211
- for (const x of keys) {
212
- const found = findRecursive(item[key][x], predicate, key);
213
- if (found) {
214
- return found;
215
- }
216
- }
217
- }
218
- }
219
- };
220
- var buttonVariants = classVarianceAuthority.cva(
221
- "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 focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-pointer-events-none disabled:sb-opacity-50 [&_svg]:sb-pointer-events-none [&_svg]:sb-size-4 [&_svg]:sb-shrink-0",
222
- {
223
- variants: {
224
- variant: {
225
- default: "sb-bg-primary sb-text-primary-foreground sb-shadow hover:sb-bg-primary/90",
226
- destructive: "sb-bg-destructive sb-text-destructive-foreground sb-shadow-sm hover:sb-bg-destructive/90",
227
- outline: "sb-border sb-border-input sb-bg-background sb-shadow-sm hover:sb-bg-accent hover:sb-text-accent-foreground",
228
- secondary: "sb-bg-secondary sb-text-secondary-foreground sb-shadow-sm hover:sb-bg-secondary/80",
229
- ghost: "hover:sb-bg-accent hover:sb-text-accent-foreground",
230
- link: "sb-text-primary sb-underline-offset-4 hover:sb-underline"
231
- },
232
- size: {
233
- default: "sb-h-9 sb-px-4 sb-py-2",
234
- sm: "sb-h-8 sb-rounded-md sb-px-3 sb-text-xs",
235
- lg: "sb-h-10 sb-rounded-md sb-px-8",
236
- icon: "sb-h-9 sb-w-9"
237
- }
238
- },
239
- defaultVariants: {
240
- variant: "default",
241
- size: "default"
242
- }
243
- }
244
- );
245
- var Button = React__namespace.forwardRef(
246
- ({ className, variant, size, asChild = false, ...props }, ref) => {
247
- const Comp = asChild ? reactSlot.Slot : "button";
248
- return /* @__PURE__ */ React__namespace.createElement(
249
- Comp,
250
- {
251
- className: chunk7SAGJTH2_js.cn(buttonVariants({ variant, size, className })),
252
- ref,
253
- ...props
254
- }
255
- );
256
- }
257
- );
258
- Button.displayName = "Button";
259
-
260
- exports.BuilderProvider = BuilderProvider;
261
- exports.Button = Button;
262
- exports.buttonVariants = buttonVariants;
263
- exports.useBuilder = useBuilder;
@@ -1,123 +0,0 @@
1
- import * as React3 from 'react';
2
- import { createElement } from 'react';
3
- import NextImage from 'next/image';
4
- import { clsx } from 'clsx';
5
- import { extendTailwindMerge } from 'tailwind-merge';
6
- import { createTV } from 'tailwind-variants';
7
-
8
- // src/lib/builder.ts
9
- var builder = /* @__PURE__ */ (() => {
10
- const components = [];
11
- return {
12
- register: (component, config) => {
13
- if (components.find(({ name }) => name === config.name)) {
14
- console.log(
15
- `[simple-builder]: Component ${config.name} already registered.`
16
- );
17
- return;
18
- }
19
- components.push({
20
- component,
21
- ...config
22
- });
23
- },
24
- getComponents: () => components,
25
- getComponent: (name) => {
26
- return components.find((c) => c.name === name);
27
- },
28
- bindComponent: ({ content, ...block }, edit) => {
29
- const component = components.find(({ name }) => name === block.component);
30
- if (!component) {
31
- throw new Error(
32
- `[simple-builder]: Component ${block.component} not found`
33
- );
34
- }
35
- const Element = createElement(component.component, {
36
- key: block.id,
37
- builder: { id: block.id, content, edit },
38
- ...block.props
39
- });
40
- return Element;
41
- }
42
- };
43
- })();
44
- var Image = (props) => {
45
- if (typeof NextImage !== "undefined") {
46
- return /* @__PURE__ */ React3.createElement(NextImage, { ...props });
47
- }
48
- return /* @__PURE__ */ React3.createElement("img", { ...props });
49
- };
50
- var twMerge = extendTailwindMerge({
51
- prefix: "sb-"
52
- });
53
- function cn(...inputs) {
54
- return twMerge(clsx(inputs));
55
- }
56
- var tv = createTV({
57
- twMergeConfig: {
58
- prefix: "sb-"
59
- }
60
- });
61
- var insertAt = (items, index, item) => {
62
- return Array.isArray(items) ? [...items.slice(0, index), item, ...items.slice(index)] : [item];
63
- };
64
-
65
- // src/components/design-wrapper.tsx
66
- var DesignWrapper = (props) => {
67
- const { children, className, building = false } = props;
68
- const { background } = props.styles?.desktop ?? {};
69
- const matches = typeof background === "string" ? background.match(/url\(["']?(.*?)["']?\)/) : void 0;
70
- const src = matches ? matches[1] : void 0;
71
- const desktopStyles = props.styles?.desktop ?? {};
72
- const mobileStyles = props.styles?.mobile ?? {};
73
- const container = props.styles?.container ?? true;
74
- const hidden = props.styles?.hidden ?? "never";
75
- const id = React3.useId().replace(/[^a-zA-Z0-9]/g, "");
76
- let hiddenClass = "";
77
- switch (hidden) {
78
- case "always":
79
- hiddenClass = building ? "sb-opacity-30" : "sb-hidden";
80
- break;
81
- case "mobile":
82
- hiddenClass = building ? "max-md:sb-opacity-30" : "max-md:sb-hidden";
83
- break;
84
- case "desktop":
85
- hiddenClass = building ? "md:sb-opacity-30" : "md:sb-hidden";
86
- break;
87
- case "never":
88
- hiddenClass = "";
89
- break;
90
- }
91
- return /* @__PURE__ */ React3.createElement("div", { id, className: cn("sb-relative", className, hiddenClass) }, src && /* @__PURE__ */ React3.createElement(
92
- Image,
93
- {
94
- src,
95
- alt: "",
96
- fill: true,
97
- className: "sb-object-cover sb-absolute sb-inset-0 sb-pointer-events-none sb--z-[1]"
98
- }
99
- ), container ? /* @__PURE__ */ React3.createElement("div", { className: "container sb-mx-auto" }, children) : children, /* @__PURE__ */ React3.createElement("style", null, `
100
- #${id} {
101
- ${Object.entries(desktopStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value};`).join(" ")}
102
- }
103
-
104
- @media (max-width: 1024px) {
105
- #${id} {
106
- ${Object.entries(mobileStyles).filter(([key]) => !(key === "background" && src)).map(([key, value]) => `${key}: ${value}; `).join(" ")}
107
- }
108
- }
109
- `.replace(/\s\s+/g, " ")));
110
- };
111
- var BuildContainerInner = React3.lazy(
112
- () => import('./build-container-client-KI3QULNY.mjs')
113
- );
114
- var BuildContainer = (props) => {
115
- const { content, edit, name } = props;
116
- const items = Array.isArray(content) ? content : content?.[name] || [];
117
- if (!edit) {
118
- return items.map((item) => /* @__PURE__ */ React3.createElement(DesignWrapper, { styles: item.styles }, builder.bindComponent(item, true)));
119
- }
120
- return /* @__PURE__ */ React3.createElement(React3.Suspense, { fallback: /* @__PURE__ */ React3.createElement("div", null, "Loading...") }, /* @__PURE__ */ React3.createElement(BuildContainerInner, { ...props }));
121
- };
122
-
123
- export { BuildContainer, DesignWrapper, Image, builder, cn, insertAt, tv };
@@ -1,20 +0,0 @@
1
- import { BuildContainer } from './chunk-527WHDFS.mjs';
2
- import * as React from 'react';
3
- import { lazy } from 'react';
4
-
5
- var StaticContent = (props) => {
6
- return /* @__PURE__ */ React.createElement(
7
- BuildContainer,
8
- {
9
- name: "root",
10
- edit: false,
11
- multiple: true,
12
- content: props.content || []
13
- }
14
- );
15
- };
16
-
17
- // src/index.ts
18
- var BuilderContent = lazy(() => import('./builder-content-J45ZXXEM.mjs'));
19
-
20
- export { BuilderContent, StaticContent };
@@ -1,263 +0,0 @@
1
- 'use strict';
2
-
3
- var chunk47IWLKYO_js = require('./chunk-47IWLKYO.js');
4
- var React = require('react');
5
- var reactSlot = require('@radix-ui/react-slot');
6
- var classVarianceAuthority = require('class-variance-authority');
7
-
8
- function _interopNamespace(e) {
9
- if (e && e.__esModule) return e;
10
- var n = Object.create(null);
11
- if (e) {
12
- Object.keys(e).forEach(function (k) {
13
- if (k !== 'default') {
14
- var d = Object.getOwnPropertyDescriptor(e, k);
15
- Object.defineProperty(n, k, d.get ? d : {
16
- enumerable: true,
17
- get: function () { return e[k]; }
18
- });
19
- }
20
- });
21
- }
22
- n.default = e;
23
- return Object.freeze(n);
24
- }
25
-
26
- var React__namespace = /*#__PURE__*/_interopNamespace(React);
27
-
28
- var BuilderContext = React__namespace.createContext(
29
- null
30
- );
31
- var BuilderProvider = (props) => {
32
- const url = props.url ?? "/api/simple-builder";
33
- const [content, setContent] = React__namespace.useState(
34
- props.content ?? []
35
- );
36
- const getItem = React__namespace.useCallback(
37
- (id) => {
38
- return findRecursive(content, (item) => item.id === id);
39
- },
40
- [content]
41
- );
42
- const patchItem = React__namespace.useCallback(
43
- (id, patch) => {
44
- setContent(
45
- (content2) => mapRecursive(content2, (item) => {
46
- if (item.id === id) {
47
- return {
48
- ...item,
49
- ...patch
50
- };
51
- }
52
- return item;
53
- })
54
- );
55
- },
56
- [setContent, mapRecursive]
57
- );
58
- const addContent = React__namespace.useCallback(
59
- (name, container, parent, index = 0) => {
60
- const component = chunk47IWLKYO_js.builder.getComponent(name);
61
- if (!component) {
62
- throw new Error(`[simple-builder]: Component "${name}" not found`);
63
- }
64
- const entry = {
65
- id: crypto.randomUUID(),
66
- component: component.name,
67
- ...parent && { parent },
68
- ...component.inputs && {
69
- props: component.inputs.reduce(
70
- (acc, input) => ({
71
- ...acc,
72
- [input.name]: input.defaultValue
73
- }),
74
- {}
75
- )
76
- },
77
- ...component.defaultStyles && {
78
- styles: component.defaultStyles
79
- }
80
- };
81
- if (!parent) {
82
- setContent((content2) => chunk47IWLKYO_js.insertAt(content2, index, entry));
83
- return;
84
- }
85
- setContent(
86
- (content2) => mapRecursive(content2, (item) => {
87
- if (item.id === parent) {
88
- return {
89
- ...item,
90
- content: {
91
- ...item.content,
92
- [container]: chunk47IWLKYO_js.insertAt(item.content?.[container], index, entry)
93
- }
94
- };
95
- }
96
- return item;
97
- })
98
- );
99
- },
100
- [setContent, mapRecursive]
101
- );
102
- const deleteContent = React__namespace.useCallback(
103
- (id) => setContent((prev) => filterRecursive(prev, (item) => item.id !== id)),
104
- [setContent, filterRecursive]
105
- );
106
- const bringUp = React__namespace.useCallback(
107
- (id) => {
108
- setContent(
109
- (content2) => mapRecursive(content2, (item, index, arr) => {
110
- if (item.id === id && index > 0) {
111
- return arr[index - 1];
112
- }
113
- if (arr[index + 1]?.id === id) {
114
- return arr[index + 1];
115
- }
116
- return item;
117
- })
118
- );
119
- },
120
- [setContent, mapRecursive]
121
- );
122
- const bringDown = React__namespace.useCallback(
123
- (id) => {
124
- setContent(
125
- (content2) => mapRecursive(content2, (item, index, arr) => {
126
- if (item.id === id && index < arr.length - 1) {
127
- return arr[index + 1];
128
- }
129
- if (arr[index - 1]?.id === id) {
130
- return arr[index - 1];
131
- }
132
- return item;
133
- })
134
- );
135
- },
136
- [setContent, mapRecursive]
137
- );
138
- const save = React__namespace.useCallback(async () => {
139
- const slug = window.location.pathname;
140
- await fetch(`${url}/page/update`, {
141
- method: "POST",
142
- body: JSON.stringify({
143
- slug,
144
- content
145
- })
146
- });
147
- }, [content]);
148
- return /* @__PURE__ */ React__namespace.createElement(
149
- BuilderContext.Provider,
150
- {
151
- value: {
152
- url,
153
- content,
154
- setContent,
155
- getItem,
156
- patchItem,
157
- addContent,
158
- bringUp,
159
- bringDown,
160
- deleteContent,
161
- save
162
- }
163
- },
164
- props.children
165
- );
166
- };
167
- var useBuilder = () => {
168
- const context = React__namespace.useContext(BuilderContext);
169
- if (!context) {
170
- throw new Error(
171
- "[simple-builder]: useBuilder must be used within a BuilderProvider"
172
- );
173
- }
174
- return context;
175
- };
176
- var filterRecursive = (items, predicate, key = "content") => {
177
- return items.filter(predicate).map((item) => ({
178
- ...item,
179
- ...item[key] && {
180
- [key]: Object.entries(item[key] ?? {}).reduce(
181
- (acc, [name, content]) => ({
182
- ...acc,
183
- [name]: filterRecursive(content, predicate, key)
184
- }),
185
- {}
186
- )
187
- }
188
- }));
189
- };
190
- var mapRecursive = (items, predicate, key = "content") => {
191
- return items.map(predicate).map((item) => ({
192
- ...item,
193
- ...item[key] && {
194
- [key]: Object.entries(item[key] ?? {}).reduce(
195
- (acc, [name, content]) => ({
196
- ...acc,
197
- [name]: mapRecursive(content, predicate, key)
198
- }),
199
- {}
200
- )
201
- }
202
- }));
203
- };
204
- var findRecursive = (items, predicate, key = "content") => {
205
- for (const item of items) {
206
- if (predicate(item)) {
207
- return item;
208
- }
209
- if (item[key]) {
210
- const keys = Object.keys(item[key] ?? {});
211
- for (const x of keys) {
212
- const found = findRecursive(item[key][x], predicate, key);
213
- if (found) {
214
- return found;
215
- }
216
- }
217
- }
218
- }
219
- };
220
- var buttonVariants = classVarianceAuthority.cva(
221
- "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 focus-visible:sb-outline-none focus-visible:sb-ring-1 focus-visible:sb-ring-ring disabled:sb-pointer-events-none disabled:sb-opacity-50 [&_svg]:sb-pointer-events-none [&_svg]:sb-size-4 [&_svg]:sb-shrink-0",
222
- {
223
- variants: {
224
- variant: {
225
- default: "sb-bg-primary sb-text-primary-foreground sb-shadow hover:sb-bg-primary/90",
226
- destructive: "sb-bg-destructive sb-text-destructive-foreground sb-shadow-sm hover:sb-bg-destructive/90",
227
- outline: "sb-border sb-border-input sb-bg-background sb-shadow-sm hover:sb-bg-accent hover:sb-text-accent-foreground",
228
- secondary: "sb-bg-secondary sb-text-secondary-foreground sb-shadow-sm hover:sb-bg-secondary/80",
229
- ghost: "hover:sb-bg-accent hover:sb-text-accent-foreground",
230
- link: "sb-text-primary sb-underline-offset-4 hover:sb-underline"
231
- },
232
- size: {
233
- default: "sb-h-9 sb-px-4 sb-py-2",
234
- sm: "sb-h-8 sb-rounded-md sb-px-3 sb-text-xs",
235
- lg: "sb-h-10 sb-rounded-md sb-px-8",
236
- icon: "sb-h-9 sb-w-9"
237
- }
238
- },
239
- defaultVariants: {
240
- variant: "default",
241
- size: "default"
242
- }
243
- }
244
- );
245
- var Button = React__namespace.forwardRef(
246
- ({ className, variant, size, asChild = false, ...props }, ref) => {
247
- const Comp = asChild ? reactSlot.Slot : "button";
248
- return /* @__PURE__ */ React__namespace.createElement(
249
- Comp,
250
- {
251
- className: chunk47IWLKYO_js.cn(buttonVariants({ variant, size, className })),
252
- ref,
253
- ...props
254
- }
255
- );
256
- }
257
- );
258
- Button.displayName = "Button";
259
-
260
- exports.BuilderProvider = BuilderProvider;
261
- exports.Button = Button;
262
- exports.buttonVariants = buttonVariants;
263
- exports.useBuilder = useBuilder;