@simple-builder/react 1.2.9 → 1.3.0
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.
- package/dist/{build-container-client-VF3DTHKE.mjs → build-container-client-5QC5KVS3.mjs} +215 -215
- package/dist/build-container-client-D2ZD6IEH.css +1964 -0
- package/dist/{build-container-client-O3HCUDB7.js → build-container-client-NXIMV3RF.js} +293 -293
- package/dist/{builder-content-325KIPAU.mjs → builder-content-3H7GF3KF.mjs} +3 -3
- package/dist/{builder-content-CUJJ3KBR.js → builder-content-BIVYFWCC.js} +7 -7
- package/dist/builder-content-NFFJ4NAB.css +1964 -0
- package/dist/{chunk-IACBZNOK.js → chunk-2CPAROZB.js} +7 -7
- package/dist/{chunk-2DLJX5FY.mjs → chunk-B5R6QY7N.mjs} +7 -7
- package/dist/{chunk-5DXQZNUR.mjs → chunk-CJGHP5Q7.mjs} +25 -19
- package/dist/{chunk-5N4LAZ6V.js → chunk-WI3YU7TV.js} +3 -3
- package/dist/{chunk-3F3TNWYK.mjs → chunk-XSG7W73Z.mjs} +2 -2
- package/dist/{chunk-6NZWMSQR.js → chunk-YKPZPQ5D.js} +29 -23
- package/dist/index.css +1920 -1486
- package/dist/index.js +6 -6
- package/dist/index.mjs +2 -2
- package/package.json +4 -4
- package/dist/build-container-client-56IGH4EB.mjs +0 -2263
- package/dist/build-container-client-6D4M5MV6.mjs +0 -2259
- package/dist/build-container-client-6NICVHM7.css +0 -1530
- package/dist/build-container-client-7UASGAWO.mjs +0 -2264
- package/dist/build-container-client-FP6NTFZ7.js +0 -2298
- package/dist/build-container-client-IC4ZMQPB.js +0 -2300
- package/dist/build-container-client-JR4HENF4.mjs +0 -2261
- package/dist/build-container-client-JS3CR4W3.js +0 -2299
- package/dist/build-container-client-JXYQOZHZ.js +0 -2295
- package/dist/build-container-client-OANZW6DH.mjs +0 -2263
- package/dist/build-container-client-QBXLJYQD.js +0 -2299
- package/dist/build-container-client-QOFTIHCU.js +0 -2297
- package/dist/build-container-client-XNI5DVSE.mjs +0 -2279
- package/dist/build-container-client-YSPLIQZC.mjs +0 -2262
- package/dist/build-container-client-YTZ4C67E.mjs +0 -2265
- package/dist/build-container-client-Z34EUPR3.js +0 -2301
- package/dist/build-container-client-ZXB5JG67.js +0 -2315
- package/dist/builder-content-5K55QBEE.js +0 -42
- package/dist/builder-content-5K7B4FXR.js +0 -42
- package/dist/builder-content-7CYIKIWQ.mjs +0 -20
- package/dist/builder-content-EHVMYKSR.mjs +0 -20
- package/dist/builder-content-IQHALH5A.js +0 -42
- package/dist/builder-content-J6G2PNIM.js +0 -42
- package/dist/builder-content-JQ7BYR4W.mjs +0 -20
- package/dist/builder-content-KWK44AH6.mjs +0 -20
- package/dist/builder-content-LYSSA6KK.js +0 -42
- package/dist/builder-content-MPQ7ZQN4.js +0 -42
- package/dist/builder-content-OE75E24Z.mjs +0 -20
- package/dist/builder-content-P24OTLH4.css +0 -1530
- package/dist/builder-content-QFRPA4VE.js +0 -42
- package/dist/builder-content-S2ZNOULV.mjs +0 -20
- package/dist/builder-content-STUVQ4ME.mjs +0 -20
- package/dist/builder-content-WJFD3ACD.mjs +0 -20
- package/dist/builder-content-ZHXFSCT7.js +0 -42
- package/dist/chunk-2GRDEACJ.js +0 -153
- package/dist/chunk-2S5KDJXM.js +0 -263
- package/dist/chunk-2UYKRF3Y.js +0 -263
- package/dist/chunk-5NN2XSII.mjs +0 -238
- package/dist/chunk-5VQCJART.js +0 -153
- package/dist/chunk-75X4HNGS.mjs +0 -238
- package/dist/chunk-7DFHZYGR.js +0 -263
- package/dist/chunk-7J7CMYXS.mjs +0 -20
- package/dist/chunk-BUELIHBX.mjs +0 -238
- package/dist/chunk-DMNRRIPC.js +0 -42
- package/dist/chunk-EMZAPBOH.mjs +0 -20
- package/dist/chunk-FKVC2UHD.js +0 -42
- package/dist/chunk-FN6K4WJP.mjs +0 -20
- package/dist/chunk-G6MYXYJU.mjs +0 -238
- package/dist/chunk-GVPZDUDM.js +0 -42
- package/dist/chunk-HA4DTJA7.mjs +0 -123
- package/dist/chunk-I4TPSTXB.js +0 -263
- package/dist/chunk-IVF3GTYS.js +0 -263
- package/dist/chunk-JDB6GNKI.js +0 -263
- package/dist/chunk-KC4V2ZJN.mjs +0 -123
- package/dist/chunk-KS4VUS45.mjs +0 -238
- package/dist/chunk-LNSOKXFY.mjs +0 -20
- package/dist/chunk-LPZDTDBB.js +0 -153
- package/dist/chunk-NJ6FM7SJ.mjs +0 -123
- package/dist/chunk-OOIADGIA.js +0 -153
- package/dist/chunk-ORODN5Q7.js +0 -153
- package/dist/chunk-PFSFBCPI.mjs +0 -123
- package/dist/chunk-QEQT2EER.mjs +0 -238
- package/dist/chunk-RCDOLMDG.js +0 -263
- package/dist/chunk-RFPQNWBX.mjs +0 -123
- package/dist/chunk-RTB6I3Q2.js +0 -153
- package/dist/chunk-RUBQ6OAO.mjs +0 -238
- package/dist/chunk-S4IIRN4J.mjs +0 -20
- package/dist/chunk-SMRPMB3V.js +0 -153
- package/dist/chunk-TF7VKEU2.mjs +0 -123
- package/dist/chunk-TPRY6DEO.js +0 -153
- package/dist/chunk-TSIU64AJ.mjs +0 -238
- package/dist/chunk-TWGYIJD2.js +0 -42
- package/dist/chunk-UFWIAKEA.mjs +0 -20
- package/dist/chunk-UH23D2JA.mjs +0 -123
- package/dist/chunk-UYVCZD2U.mjs +0 -20
- package/dist/chunk-WP7KTUTL.js +0 -42
- package/dist/chunk-WQ376VV2.js +0 -263
- package/dist/chunk-WUYG7TZ5.js +0 -42
- package/dist/chunk-XFIY7HQO.mjs +0 -123
- package/dist/chunk-XJ4ZJCQS.js +0 -42
- package/dist/chunk-XULCJNV7.mjs +0 -20
- package/dist/chunk-YMC3DDLP.js +0 -42
package/dist/chunk-PFSFBCPI.mjs
DELETED
|
@@ -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-7UASGAWO.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 };
|
package/dist/chunk-QEQT2EER.mjs
DELETED
|
@@ -1,238 +0,0 @@
|
|
|
1
|
-
import { cn, builder, insertAt } from './chunk-RFPQNWBX.mjs';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { Slot } from '@radix-ui/react-slot';
|
|
4
|
-
import { cva } from 'class-variance-authority';
|
|
5
|
-
|
|
6
|
-
var BuilderContext = React.createContext(
|
|
7
|
-
null
|
|
8
|
-
);
|
|
9
|
-
var BuilderProvider = (props) => {
|
|
10
|
-
const url = props.url ?? "/api/simple-builder";
|
|
11
|
-
const [content, setContent] = React.useState(
|
|
12
|
-
props.content ?? []
|
|
13
|
-
);
|
|
14
|
-
const getItem = React.useCallback(
|
|
15
|
-
(id) => {
|
|
16
|
-
return findRecursive(content, (item) => item.id === id);
|
|
17
|
-
},
|
|
18
|
-
[content]
|
|
19
|
-
);
|
|
20
|
-
const patchItem = React.useCallback(
|
|
21
|
-
(id, patch) => {
|
|
22
|
-
setContent(
|
|
23
|
-
(content2) => mapRecursive(content2, (item) => {
|
|
24
|
-
if (item.id === id) {
|
|
25
|
-
return {
|
|
26
|
-
...item,
|
|
27
|
-
...patch
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
return item;
|
|
31
|
-
})
|
|
32
|
-
);
|
|
33
|
-
},
|
|
34
|
-
[setContent, mapRecursive]
|
|
35
|
-
);
|
|
36
|
-
const addContent = React.useCallback(
|
|
37
|
-
(name, container, parent, index = 0) => {
|
|
38
|
-
const component = builder.getComponent(name);
|
|
39
|
-
if (!component) {
|
|
40
|
-
throw new Error(`[simple-builder]: Component "${name}" not found`);
|
|
41
|
-
}
|
|
42
|
-
const entry = {
|
|
43
|
-
id: crypto.randomUUID(),
|
|
44
|
-
component: component.name,
|
|
45
|
-
...parent && { parent },
|
|
46
|
-
...component.inputs && {
|
|
47
|
-
props: component.inputs.reduce(
|
|
48
|
-
(acc, input) => ({
|
|
49
|
-
...acc,
|
|
50
|
-
[input.name]: input.defaultValue
|
|
51
|
-
}),
|
|
52
|
-
{}
|
|
53
|
-
)
|
|
54
|
-
},
|
|
55
|
-
...component.defaultStyles && {
|
|
56
|
-
styles: component.defaultStyles
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
if (!parent) {
|
|
60
|
-
setContent((content2) => insertAt(content2, index, entry));
|
|
61
|
-
return;
|
|
62
|
-
}
|
|
63
|
-
setContent(
|
|
64
|
-
(content2) => mapRecursive(content2, (item) => {
|
|
65
|
-
if (item.id === parent) {
|
|
66
|
-
return {
|
|
67
|
-
...item,
|
|
68
|
-
content: {
|
|
69
|
-
...item.content,
|
|
70
|
-
[container]: insertAt(item.content?.[container], index, entry)
|
|
71
|
-
}
|
|
72
|
-
};
|
|
73
|
-
}
|
|
74
|
-
return item;
|
|
75
|
-
})
|
|
76
|
-
);
|
|
77
|
-
},
|
|
78
|
-
[setContent, mapRecursive]
|
|
79
|
-
);
|
|
80
|
-
const deleteContent = React.useCallback(
|
|
81
|
-
(id) => setContent((prev) => filterRecursive(prev, (item) => item.id !== id)),
|
|
82
|
-
[setContent, filterRecursive]
|
|
83
|
-
);
|
|
84
|
-
const bringUp = React.useCallback(
|
|
85
|
-
(id) => {
|
|
86
|
-
setContent(
|
|
87
|
-
(content2) => mapRecursive(content2, (item, index, arr) => {
|
|
88
|
-
if (item.id === id && index > 0) {
|
|
89
|
-
return arr[index - 1];
|
|
90
|
-
}
|
|
91
|
-
if (arr[index + 1]?.id === id) {
|
|
92
|
-
return arr[index + 1];
|
|
93
|
-
}
|
|
94
|
-
return item;
|
|
95
|
-
})
|
|
96
|
-
);
|
|
97
|
-
},
|
|
98
|
-
[setContent, mapRecursive]
|
|
99
|
-
);
|
|
100
|
-
const bringDown = React.useCallback(
|
|
101
|
-
(id) => {
|
|
102
|
-
setContent(
|
|
103
|
-
(content2) => mapRecursive(content2, (item, index, arr) => {
|
|
104
|
-
if (item.id === id && index < arr.length - 1) {
|
|
105
|
-
return arr[index + 1];
|
|
106
|
-
}
|
|
107
|
-
if (arr[index - 1]?.id === id) {
|
|
108
|
-
return arr[index - 1];
|
|
109
|
-
}
|
|
110
|
-
return item;
|
|
111
|
-
})
|
|
112
|
-
);
|
|
113
|
-
},
|
|
114
|
-
[setContent, mapRecursive]
|
|
115
|
-
);
|
|
116
|
-
const save = React.useCallback(async () => {
|
|
117
|
-
const slug = window.location.pathname;
|
|
118
|
-
await fetch(`${url}/page/update`, {
|
|
119
|
-
method: "POST",
|
|
120
|
-
body: JSON.stringify({
|
|
121
|
-
slug,
|
|
122
|
-
content
|
|
123
|
-
})
|
|
124
|
-
});
|
|
125
|
-
}, [content]);
|
|
126
|
-
return /* @__PURE__ */ React.createElement(
|
|
127
|
-
BuilderContext.Provider,
|
|
128
|
-
{
|
|
129
|
-
value: {
|
|
130
|
-
url,
|
|
131
|
-
content,
|
|
132
|
-
setContent,
|
|
133
|
-
getItem,
|
|
134
|
-
patchItem,
|
|
135
|
-
addContent,
|
|
136
|
-
bringUp,
|
|
137
|
-
bringDown,
|
|
138
|
-
deleteContent,
|
|
139
|
-
save
|
|
140
|
-
}
|
|
141
|
-
},
|
|
142
|
-
props.children
|
|
143
|
-
);
|
|
144
|
-
};
|
|
145
|
-
var useBuilder = () => {
|
|
146
|
-
const context = React.useContext(BuilderContext);
|
|
147
|
-
if (!context) {
|
|
148
|
-
throw new Error(
|
|
149
|
-
"[simple-builder]: useBuilder must be used within a BuilderProvider"
|
|
150
|
-
);
|
|
151
|
-
}
|
|
152
|
-
return context;
|
|
153
|
-
};
|
|
154
|
-
var filterRecursive = (items, predicate, key = "content") => {
|
|
155
|
-
return items.filter(predicate).map((item) => ({
|
|
156
|
-
...item,
|
|
157
|
-
...item[key] && {
|
|
158
|
-
[key]: Object.entries(item[key] ?? {}).reduce(
|
|
159
|
-
(acc, [name, content]) => ({
|
|
160
|
-
...acc,
|
|
161
|
-
[name]: filterRecursive(content, predicate, key)
|
|
162
|
-
}),
|
|
163
|
-
{}
|
|
164
|
-
)
|
|
165
|
-
}
|
|
166
|
-
}));
|
|
167
|
-
};
|
|
168
|
-
var mapRecursive = (items, predicate, key = "content") => {
|
|
169
|
-
return items.map(predicate).map((item) => ({
|
|
170
|
-
...item,
|
|
171
|
-
...item[key] && {
|
|
172
|
-
[key]: Object.entries(item[key] ?? {}).reduce(
|
|
173
|
-
(acc, [name, content]) => ({
|
|
174
|
-
...acc,
|
|
175
|
-
[name]: mapRecursive(content, predicate, key)
|
|
176
|
-
}),
|
|
177
|
-
{}
|
|
178
|
-
)
|
|
179
|
-
}
|
|
180
|
-
}));
|
|
181
|
-
};
|
|
182
|
-
var findRecursive = (items, predicate, key = "content") => {
|
|
183
|
-
for (const item of items) {
|
|
184
|
-
if (predicate(item)) {
|
|
185
|
-
return item;
|
|
186
|
-
}
|
|
187
|
-
if (item[key]) {
|
|
188
|
-
const keys = Object.keys(item[key] ?? {});
|
|
189
|
-
for (const x of keys) {
|
|
190
|
-
const found = findRecursive(item[key][x], predicate, key);
|
|
191
|
-
if (found) {
|
|
192
|
-
return found;
|
|
193
|
-
}
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
};
|
|
198
|
-
var buttonVariants = cva(
|
|
199
|
-
"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",
|
|
200
|
-
{
|
|
201
|
-
variants: {
|
|
202
|
-
variant: {
|
|
203
|
-
default: "sb-bg-primary sb-text-primary-foreground sb-shadow hover:sb-bg-primary/90",
|
|
204
|
-
destructive: "sb-bg-destructive sb-text-destructive-foreground sb-shadow-sm hover:sb-bg-destructive/90",
|
|
205
|
-
outline: "sb-border sb-border-input sb-bg-background sb-shadow-sm hover:sb-bg-accent hover:sb-text-accent-foreground",
|
|
206
|
-
secondary: "sb-bg-secondary sb-text-secondary-foreground sb-shadow-sm hover:sb-bg-secondary/80",
|
|
207
|
-
ghost: "hover:sb-bg-accent hover:sb-text-accent-foreground",
|
|
208
|
-
link: "sb-text-primary sb-underline-offset-4 hover:sb-underline"
|
|
209
|
-
},
|
|
210
|
-
size: {
|
|
211
|
-
default: "sb-h-9 sb-px-4 sb-py-2",
|
|
212
|
-
sm: "sb-h-8 sb-rounded-md sb-px-3 sb-text-xs",
|
|
213
|
-
lg: "sb-h-10 sb-rounded-md sb-px-8",
|
|
214
|
-
icon: "sb-h-9 sb-w-9"
|
|
215
|
-
}
|
|
216
|
-
},
|
|
217
|
-
defaultVariants: {
|
|
218
|
-
variant: "default",
|
|
219
|
-
size: "default"
|
|
220
|
-
}
|
|
221
|
-
}
|
|
222
|
-
);
|
|
223
|
-
var Button = React.forwardRef(
|
|
224
|
-
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
225
|
-
const Comp = asChild ? Slot : "button";
|
|
226
|
-
return /* @__PURE__ */ React.createElement(
|
|
227
|
-
Comp,
|
|
228
|
-
{
|
|
229
|
-
className: cn(buttonVariants({ variant, size, className })),
|
|
230
|
-
ref,
|
|
231
|
-
...props
|
|
232
|
-
}
|
|
233
|
-
);
|
|
234
|
-
}
|
|
235
|
-
);
|
|
236
|
-
Button.displayName = "Button";
|
|
237
|
-
|
|
238
|
-
export { BuilderProvider, Button, buttonVariants, useBuilder };
|
package/dist/chunk-RCDOLMDG.js
DELETED
|
@@ -1,263 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var chunkORODN5Q7_js = require('./chunk-ORODN5Q7.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 = chunkORODN5Q7_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) => chunkORODN5Q7_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]: chunkORODN5Q7_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: chunkORODN5Q7_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;
|