@chaibuilder/sdk 1.0.21 → 1.0.23
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/README.md +30 -103
- package/dist/{AddBlocks-0-e393Fn.js → AddBlocks-Izn_rxXD.js} +5 -4
- package/dist/AddBlocks-RHuwwfe5.cjs +3 -0
- package/dist/{BrandingOptions-HtNCJO9_.cjs → BrandingOptions-Fyo8qs4o.cjs} +1 -1
- package/dist/{BrandingOptions-QqqJ-YRb.js → BrandingOptions-orZyDGiL.js} +1 -1
- package/dist/{CanvasArea-0hMAhzxn.js → CanvasArea-C30uJLef.js} +72 -71
- package/dist/{CanvasArea-pZz5czrV.cjs → CanvasArea-IM2K8bud.cjs} +2 -2
- package/dist/{CurrentPage-UOkxZISs.js → CurrentPage-70sBzc2_.js} +6 -5
- package/dist/CurrentPage-lIithDJy.cjs +1 -0
- package/dist/{Layers-TB-Lriju.js → Layers-W0N2zfnf.js} +7 -6
- package/dist/Layers-YMtavzUG.cjs +1 -0
- package/dist/{MarkAsGlobalBlock-5h3wP4zj.cjs → MarkAsGlobalBlock-EOsABFjY.cjs} +1 -1
- package/dist/{MarkAsGlobalBlock-Pa8po8qP.js → MarkAsGlobalBlock-FPCQmRIh.js} +1 -1
- package/dist/{PagesPanel-mAMSbYPt.js → PagesPanel-RbHN6lvQ.js} +6 -5
- package/dist/{PagesPanel-ffrNyFyp.cjs → PagesPanel-i-MQEmm_.cjs} +1 -1
- package/dist/ProjectPanel-0BGx-hP-.cjs +1 -0
- package/dist/{ProjectPanel-XvsYajju.js → ProjectPanel-CzwuyR0N.js} +7 -6
- package/dist/{Settings-8AbHXcDP.js → Settings-lxTrbI-C.js} +330 -320
- package/dist/Settings-mTWkKG82.cjs +1 -0
- package/dist/{SidePanels-LQg3mdC4.js → SidePanels-g4M6oTs-.js} +7 -6
- package/dist/SidePanels-pUOJTYfr.cjs +1 -0
- package/dist/{Topbar-wA6jhMj9.js → Topbar-KqZt4TEY.js} +1 -1
- package/dist/{Topbar-A3WZDrK4.cjs → Topbar-kHffytzr.cjs} +1 -1
- package/dist/{UnsplashImages-mzIO1QeT.js → UnsplashImages-Ua7ksJ8c.js} +1 -1
- package/dist/{UnsplashImages-E8zPMgJf.cjs → UnsplashImages-y7I_7_W7.cjs} +1 -1
- package/dist/{UploadImages-qEuDUEMn.cjs → UploadImages-RzEm0Stb.cjs} +1 -1
- package/dist/{UploadImages-qMeaY4sk.js → UploadImages-YP_J6erG.js} +1 -1
- package/dist/{add-page-modal-oER3yE4F.js → add-page-modal-btGWaXyq.js} +18 -18
- package/dist/add-page-modal-ekFis5D8.cjs +1 -0
- package/dist/{confirm-alert-rDSai_jQ.js → confirm-alert-Py2WqZhJ.js} +1 -1
- package/dist/{confirm-alert-tH8UCCSF.cjs → confirm-alert-mAhT8vln.cjs} +1 -1
- package/dist/core.cjs +1 -1
- package/dist/core.js +56 -55
- package/dist/{delete-page-modal-ShTRkqkB.cjs → delete-page-modal-QzleoJG2.cjs} +1 -1
- package/dist/{delete-page-modal-QzQdrLYI.js → delete-page-modal-Rq4ThQpu.js} +6 -5
- package/dist/{form-vWeEsG9Y.js → form-Lm3bupAq.js} +1 -1
- package/dist/{form-MlgUSEy_.cjs → form-kAjrBaV-.cjs} +1 -1
- package/dist/{functions-hmbWDcnW.js → functions-JFP-oMsY.js} +28 -27
- package/dist/{functions-eu6BbvqO.cjs → functions-KMQYiBHf.cjs} +2 -2
- package/dist/{index-G55KtqnU.js → index-Vx4ctSV6.js} +10 -20
- package/dist/{index-T5MFAHA0.cjs → index-W5drgyWI.cjs} +1 -1
- package/dist/{index-mLIwGF5W.js → index-WPlT_Q87.js} +3 -3
- package/dist/{index-pCHSFoQO.cjs → index-fvoD_laH.cjs} +2 -2
- package/dist/lib.cjs +1 -1
- package/dist/lib.d.ts +3 -9
- package/dist/lib.js +93 -152
- package/dist/page-viewer-AlOCzh1b.cjs +1 -0
- package/dist/{page-viewer-X3IEOrUC.js → page-viewer-_wGsV2_o.js} +29 -28
- package/dist/{project-general-setting-oujmeWOG.js → project-general-setting-B8uuHccU.js} +7 -6
- package/dist/{project-general-setting-HZeYf9A1.cjs → project-general-setting-XnNyOpXO.cjs} +1 -1
- package/dist/{project-seo-setting-3FZQXaTn.cjs → project-seo-setting-QJBATF59.cjs} +1 -1
- package/dist/{project-seo-setting-_X6ckVa4.js → project-seo-setting-Zg2Z-Frr.js} +2 -2
- package/dist/render.cjs +1 -1
- package/dist/render.js +1 -1
- package/dist/{single-page-detail-SxboE7TI.js → single-page-detail-HXpxgQnU.js} +8 -7
- package/dist/single-page-detail-MWh30E_-.cjs +1 -0
- package/dist/studio.cjs +1 -1
- package/dist/studio.js +5 -4
- package/dist/tailwind-config-OxLD7oFU.cjs +1 -0
- package/dist/tailwind-config-d1VL1lzE.js +62 -0
- package/dist/tailwind.cjs +1 -0
- package/dist/tailwind.d.ts +80 -0
- package/dist/tailwind.js +24 -0
- package/dist/ui.cjs +1 -1
- package/dist/ui.d.ts +1 -1
- package/dist/ui.js +1 -1
- package/package.json +9 -4
- package/dist/AddBlocks-p68Cz79o.cjs +0 -3
- package/dist/CurrentPage-phMDH1Ub.cjs +0 -1
- package/dist/Layers-NKZXi2LV.cjs +0 -1
- package/dist/ProjectPanel-1ywILLme.cjs +0 -1
- package/dist/Settings-hdmnT_mI.cjs +0 -1
- package/dist/SidePanels-xaNrI3oK.cjs +0 -1
- package/dist/add-page-modal-9deiA1W9.cjs +0 -1
- package/dist/page-viewer-GPNN1H92.cjs +0 -1
- package/dist/single-page-detail-ILshOKys.cjs +0 -1
package/README.md
CHANGED
|
@@ -1,102 +1,25 @@
|
|
|
1
1
|
# Chai Builder - Low-Code Visual Builder
|
|
2
2
|
|
|
3
|
-
Chai Builder is an Open Source Low Code React + Tailwind CSS Builder
|
|
4
|
-
|
|
3
|
+
Chai Builder is an Open Source Low Code React + Tailwind CSS Visual Builder. Its a simple React component which can be integrated into any React based framework.
|
|
5
4
|
|
|
6
5
|
### Try Chai Builder:
|
|
7
|
-
|
|
8
6
|
[Demo Link](https://chaibuilder-demo.vercel.app)
|
|
7
|
+
| [GitHub](https://github.com/surajair/demo)
|
|
9
8
|
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
---
|
|
12
10
|
|
|
13
|
-
###
|
|
11
|
+
### Getting Started:
|
|
14
12
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
Step 1: Install the package
|
|
13
|
+
Step 1: Install the packages
|
|
18
14
|
```bash
|
|
19
|
-
npm install @chaibuilder/sdk @chaibuilder/
|
|
15
|
+
npm install @chaibuilder/sdk @chaibuilder/runtime tailwindcss
|
|
20
16
|
```
|
|
21
17
|
|
|
22
18
|
Step 2: Add a custom tailwind config.
|
|
23
|
-
Create a new file: `tailwind.chaibuilder.config.ts
|
|
24
|
-
```
|
|
25
|
-
import
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* NOTE: This file is only used for the ChaiBuilder UI.
|
|
29
|
-
* Any changes made here will only affect the ChaiBuilder UI and your website will not be affected.
|
|
30
|
-
*/
|
|
31
|
-
const config: Config = {
|
|
32
|
-
content: [
|
|
33
|
-
"./chai-blocks/**/*.{js,ts,jsx,tsx,mdx}",
|
|
34
|
-
"./app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
35
|
-
"node_modules/@chaibuilder/sdk/dist/*.{js,cjs}",
|
|
36
|
-
],
|
|
37
|
-
darkMode: "class",
|
|
38
|
-
theme: {
|
|
39
|
-
extend: {
|
|
40
|
-
colors: {
|
|
41
|
-
border: "hsl(var(--border))",
|
|
42
|
-
input: "hsl(var(--input))",
|
|
43
|
-
ring: "hsl(var(--ring))",
|
|
44
|
-
background: "hsl(var(--background))",
|
|
45
|
-
foreground: "hsl(var(--foreground))",
|
|
46
|
-
primary: {
|
|
47
|
-
DEFAULT: "hsl(var(--primary))",
|
|
48
|
-
foreground: "hsl(var(--primary-foreground))",
|
|
49
|
-
},
|
|
50
|
-
secondary: {
|
|
51
|
-
DEFAULT: "hsl(var(--secondary))",
|
|
52
|
-
foreground: "hsl(var(--secondary-foreground))",
|
|
53
|
-
},
|
|
54
|
-
destructive: {
|
|
55
|
-
DEFAULT: "hsl(var(--destructive))",
|
|
56
|
-
foreground: "hsl(var(--destructive-foreground))",
|
|
57
|
-
},
|
|
58
|
-
muted: {
|
|
59
|
-
DEFAULT: "hsl(var(--muted))",
|
|
60
|
-
foreground: "hsl(var(--muted-foreground))",
|
|
61
|
-
},
|
|
62
|
-
accent: {
|
|
63
|
-
DEFAULT: "hsl(var(--accent))",
|
|
64
|
-
foreground: "hsl(var(--accent-foreground))",
|
|
65
|
-
},
|
|
66
|
-
popover: {
|
|
67
|
-
DEFAULT: "hsl(var(--popover))",
|
|
68
|
-
foreground: "hsl(var(--popover-foreground))",
|
|
69
|
-
},
|
|
70
|
-
card: {
|
|
71
|
-
DEFAULT: "hsl(var(--card))",
|
|
72
|
-
foreground: "hsl(var(--card-foreground))",
|
|
73
|
-
},
|
|
74
|
-
},
|
|
75
|
-
borderRadius: {
|
|
76
|
-
lg: `var(--radius)`,
|
|
77
|
-
md: `calc(var(--radius) - 2px)`,
|
|
78
|
-
sm: "calc(var(--radius) - 4px)",
|
|
79
|
-
},
|
|
80
|
-
keyframes: {
|
|
81
|
-
"accordion-down": {
|
|
82
|
-
from: { height: "0" },
|
|
83
|
-
to: { height: "var(--radix-accordion-content-height)" },
|
|
84
|
-
},
|
|
85
|
-
"accordion-up": {
|
|
86
|
-
from: { height: "var(--radix-accordion-content-height)" },
|
|
87
|
-
to: { height: "0" },
|
|
88
|
-
},
|
|
89
|
-
},
|
|
90
|
-
animation: {
|
|
91
|
-
"accordion-down": "accordion-down 0.2s ease-out",
|
|
92
|
-
"accordion-up": "accordion-up 0.2s ease-out",
|
|
93
|
-
},
|
|
94
|
-
},
|
|
95
|
-
},
|
|
96
|
-
// eslint-disable-next-line no-undef
|
|
97
|
-
plugins: [],
|
|
98
|
-
};
|
|
99
|
-
export default config;
|
|
19
|
+
Create a new file: `tailwind.chaibuilder.config.ts`. <br /> Pass the path to your source files.
|
|
20
|
+
```tsx
|
|
21
|
+
import { chaiBuilderTailwindConfig } from "@chaibuilder/sdk/tailwind";
|
|
22
|
+
export default chaiBuilderTailwindConfig(["./src/**/*.{js,ts,jsx,tsx}"]);
|
|
100
23
|
|
|
101
24
|
```
|
|
102
25
|
|
|
@@ -109,7 +32,7 @@ Step 3: Create a new `chaibuilder.tailwind.css`
|
|
|
109
32
|
@tailwind utilities;
|
|
110
33
|
```
|
|
111
34
|
|
|
112
|
-
Step 4: Add the
|
|
35
|
+
Step 4: Add the builder to your page.
|
|
113
36
|
```tsx
|
|
114
37
|
import "./chaibuilder.tailwind.css";
|
|
115
38
|
import "@chaibuilder/sdk/styles";
|
|
@@ -117,27 +40,31 @@ import {ChaiBuilderEditor} from "@chaibuilder/sdk";
|
|
|
117
40
|
|
|
118
41
|
const BuilderFullPage = () => {
|
|
119
42
|
return (
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
/>
|
|
43
|
+
<ChaiBuilderEditor
|
|
44
|
+
blocks={[]}
|
|
45
|
+
onSavePage={async (blocks) => await saveBlocks(blocks)}
|
|
46
|
+
onSaveBrandingOptions={async (branding) => await saveBranding(branding)}
|
|
47
|
+
/>
|
|
126
48
|
);
|
|
127
49
|
}
|
|
128
50
|
```
|
|
51
|
+
|
|
52
|
+
Step 5: Render the blocks on your page.
|
|
53
|
+
```tsx
|
|
54
|
+
export default async () => {
|
|
55
|
+
const styles = await getStylesForBlocks(blocks, brandingOptions);
|
|
56
|
+
return <>
|
|
57
|
+
<style>{styles}</style>
|
|
58
|
+
<RenderChaiBlocks blocks={blocks} />
|
|
59
|
+
</>
|
|
60
|
+
}
|
|
61
|
+
```
|
|
129
62
|
|
|
63
|
+
## Support
|
|
64
|
+
If you like the project, you can assist us in expanding. ChaiBuilder is a collaborative endeavor crafted by developers in their free time. We value every contribution, no matter how modest, as each one represents a significant step forward in various ways, particularly in fueling our drive to enhance this tool continually.
|
|
130
65
|
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
- **Visual Editor**: Easily tweak and fine-tune Tailwind CSS settings visually.
|
|
134
|
-
- **Customization**: Modify colors, spacing, typography, and more to match your design requirements.
|
|
135
|
-
- **Responsive Design**: Test and preview designs across various screen sizes to ensure responsiveness.
|
|
66
|
+
<a href="https://www.buymeacoffee.com/chaibuilder" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
|
|
136
67
|
|
|
137
|
-
### In Progress
|
|
138
|
-
- **Live Preview**: See real-time changes in a live preview, enabling quick design decisions.
|
|
139
|
-
- **Sub Pages**: Global reusable blocks. Eg: Header, Footer etc
|
|
140
68
|
|
|
141
69
|
## Acknowledgments
|
|
142
|
-
|
|
143
70
|
Chai Builder stands on the shoulders of many open-source libraries and tools. We extend our gratitude to the developers and maintainers of these projects for their contributions.
|
|
@@ -2,7 +2,7 @@ import { j as e } from "./jsx-runtime-NV737rRe.js";
|
|
|
2
2
|
import v, { createElement as K, useState as j, useCallback as q, useMemo as V, useEffect as W, Suspense as J } from "react";
|
|
3
3
|
import { has as z, first as g, isEmpty as w, filter as k, values as B, groupBy as I, mergeWith as Q, isArray as H, get as X, map as L, includes as P, find as E, uniq as Y, reject as M } from "lodash";
|
|
4
4
|
import { useAtom as h } from "jotai";
|
|
5
|
-
import { O as F, j as C, az as D, aA as N, aH as Z, aI as $, aK as ee, i as se, a8 as O, bv as re, bw as te, bx as oe, by as le, bz as ae, bA as ie, aM as ce, bB as ne, bC as de, B as me, bD as pe, bE as ue, bF as xe, ae as he, aB as fe, aC as be, aD as A, bp as ge, bi as je, bj as ye, bk as we, bl as ke, S as Be } from "./index-
|
|
5
|
+
import { O as F, j as C, az as D, aA as N, aH as Z, aI as $, aK as ee, i as se, a8 as O, bv as re, bw as te, bx as oe, by as le, bz as ae, bA as ie, aM as ce, bB as ne, bC as de, B as me, bD as pe, bE as ue, bF as xe, ae as he, aB as fe, aC as be, aD as A, bp as ge, bi as je, bj as ye, bk as we, bl as ke, S as Be } from "./index-Vx4ctSV6.js";
|
|
6
6
|
import { useDrag as R, DragPreviewImage as _ } from "react-dnd";
|
|
7
7
|
import { BoxIcon as ve, ExclamationTriangleIcon as Ce, Cross1Icon as Ne } from "@radix-ui/react-icons";
|
|
8
8
|
import { syncBlocksWithDefaults as G, useChaiBlocks as U } from "@chaibuilder/runtime";
|
|
@@ -38,13 +38,14 @@ import "redux-undo";
|
|
|
38
38
|
import "@react-hookz/web";
|
|
39
39
|
import "react-i18next";
|
|
40
40
|
import "himalaya";
|
|
41
|
-
import "./functions-
|
|
41
|
+
import "./functions-JFP-oMsY.js";
|
|
42
42
|
import "@mhsdesign/jit-browser-tailwindcss";
|
|
43
43
|
import "@bobthered/tailwindcss-palette-generator";
|
|
44
44
|
import "@tailwindcss/forms";
|
|
45
45
|
import "@tailwindcss/typography";
|
|
46
46
|
import "@tailwindcss/aspect-ratio";
|
|
47
47
|
import "@tailwindcss/line-clamp";
|
|
48
|
+
import "./tailwind-config-d1VL1lzE.js";
|
|
48
49
|
import "clsx";
|
|
49
50
|
import "tailwind-merge";
|
|
50
51
|
const Le = ({ block: s }) => {
|
|
@@ -205,7 +206,7 @@ const Le = ({ block: s }) => {
|
|
|
205
206
|
return !P(S, r);
|
|
206
207
|
const t = s._type;
|
|
207
208
|
return t === "List" ? r === "ListItem" : t === "Table" ? r === "TableHead" || r === "TableBody" : t === "TableHead" || t === "TableBody" ? r === "TableRow" : t === "TableRow" ? r === "TableCell" : t === "Row" ? r === "Column" : !P(S, r);
|
|
208
|
-
},
|
|
209
|
+
}, Ps = () => {
|
|
209
210
|
const [s, r] = j("core"), [t, a] = j("basic"), c = U(), [, d] = h(xe), [, m] = h(N), [n] = C(), o = he(), f = E(o, { _id: g(n) }), { data: x, isLoading: p } = O(), b = I(
|
|
210
211
|
k(c, (i) => Ee(f, i.type)),
|
|
211
212
|
"category"
|
|
@@ -265,5 +266,5 @@ const Le = ({ block: s }) => {
|
|
|
265
266
|
] });
|
|
266
267
|
};
|
|
267
268
|
export {
|
|
268
|
-
|
|
269
|
+
Ps as default
|
|
269
270
|
};
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-WUGKV8jN.cjs"),n=require("react"),t=require("lodash"),g=require("jotai"),s=require("./index-W5drgyWI.cjs"),y=require("react-dnd"),w=require("@radix-ui/react-icons"),k=require("@chaibuilder/runtime"),q=require("lucide-react"),A=require("./lib.cjs"),T=require("./utils-It2K33fU.cjs");require("./MODIFIERS-WFzDQfiT.cjs");require("@radix-ui/react-toggle");require("class-variance-authority");require("@radix-ui/react-switch");require("@radix-ui/react-slot");require("@radix-ui/react-accordion");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-dialog");require("@radix-ui/react-label");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-tooltip");require("@radix-ui/react-popover");require("@radix-ui/react-menubar");require("@radix-ui/react-hover-card");require("@radix-ui/react-select");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-separator");require("@radix-ui/react-toast");require("cmdk");require("@radix-ui/react-context-menu");require("react-icons-picker");require("react-dom");require("react-quill");require("flat-to-nested");require("redux-undo");require("@react-hookz/web");require("react-i18next");require("himalaya");require("./functions-KMQYiBHf.cjs");require("@mhsdesign/jit-browser-tailwindcss");require("@bobthered/tailwindcss-palette-generator");require("@tailwindcss/forms");require("@tailwindcss/typography");require("@tailwindcss/aspect-ratio");require("@tailwindcss/line-clamp");require("./tailwind-config-OxLD7oFU.cjs");require("clsx");require("tailwind-merge");const C=({block:r})=>{const{type:o,icon:l,label:c}=r,{addCoreBlock:d,addPredefinedBlock:m}=s.useAddBlock(),[p]=s.useSelectedBlockIds(),[,x]=g.useAtom(s.activePanelAtom),[,i]=g.useAtom(s.addBlocksModalAtom),E=()=>{t.has(r,"blocks")?m(k.syncBlocksWithDefaults(r.blocks),t.first(p)):d(r,t.first(p)),i(!1),x("layers")},[,f,j]=y.useDrag(()=>({type:"CHAI_BLOCK",item:r}));return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(y.DragPreviewImage,{connect:j,src:"https://placehold.co/100x30/000000/FFF?text="+(c||o).replace(/ /g,"+")}),e.jsxRuntimeExports.jsxs(s.Tooltip,{children:[e.jsxRuntimeExports.jsx(s.TooltipTrigger,{asChild:!0,children:e.jsxRuntimeExports.jsxs("button",{onClick:E,type:"button",ref:f,className:"cursor-grab space-y-2 rounded-lg border border-border p-3 text-center hover:bg-slate-300/50",children:[n.createElement(l||w.BoxIcon,{className:"w-4 h-4 mx-auto"}),e.jsxRuntimeExports.jsx("p",{className:"truncate text-xs",children:c||o})]})}),e.jsxRuntimeExports.jsx(s.TooltipContent,{children:e.jsxRuntimeExports.jsx("p",{children:c||o})})]})]})},N=({block:r,closePopover:o})=>{var j;const[l,c]=n.useState(!1),d=s.useBuilderProp("getExternalPredefinedBlock"),{addCoreBlock:m,addPredefinedBlock:p}=s.useAddBlock(),[x]=s.useSelectedBlockIds(),[,i,E]=y.useDrag(()=>({type:"CHAI_BLOCK",item:r}),[r]),f=n.useCallback(async b=>{if(b.stopPropagation(),t.has(r,"component")){m(r,t.first(x)),o();return}c(!0);const a=await d(r);t.isEmpty(a)||p(k.syncBlocksWithDefaults(a),t.first(x)),o()},[r]);return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(y.DragPreviewImage,{connect:E,src:"https://placehold.co/100x30/000000/FFF?text="+((j=r.name||r.label)==null?void 0:j.replace(" ","+"))}),e.jsxRuntimeExports.jsxs("div",{ref:i,onClick:l?()=>{}:f,className:"relative cursor-grab overflow-hidden rounded-md border border-transparent duration-200 hover:scale-x-105 hover:border-foreground/20 hover:shadow-2xl",children:[l&&e.jsxRuntimeExports.jsxs("div",{className:"absolute flex h-full w-full items-center justify-center bg-black bg-opacity-70",children:[e.jsxRuntimeExports.jsx(q.Loader,{className:"animate-spin",size:15,color:"white"})," ",e.jsxRuntimeExports.jsx("span",{className:"pl-2 text-sm text-white",children:"Adding..."})]}),r.preview?e.jsxRuntimeExports.jsx("img",{src:r.preview,className:"min-h-[50px] w-full rounded-md border border-gray-300",alt:r.name}):e.jsxRuntimeExports.jsx("div",{className:"flex h-20 items-center justify-center rounded-md border border-border border-gray-300 bg-gray-200",children:e.jsxRuntimeExports.jsx("p",{className:"max-w-xs text-center text-sm text-gray-700",children:r.name})})]})]})},I=()=>{const{data:r,isLoading:o}=s.useUILibraryBlocks(),l=k.useChaiBlocks(),c=t.filter(t.values(l),{category:"custom"}),d=t.groupBy(c,"group"),m=t.groupBy(r,"group"),[p,x]=n.useState(null),i=n.useMemo(()=>t.mergeWith(d,m,(a,h)=>{if(t.isArray(a)&&t.isArray(h))return[...a,...h]}),[d,m]),[,E]=g.useAtom(s.addBlocksModalAtom),[f,j]=n.useState("Navbar"),b=t.get(i,f,[]);return e.jsxRuntimeExports.jsxs("div",{className:"relative flex h-full max-h-full overflow-hidden py-2",children:[e.jsxRuntimeExports.jsx("ul",{className:"sticky top-0 h-full w-48 space-y-1 overflow-y-auto border-r px-2",children:o?e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx("li",{className:"h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"}),e.jsxRuntimeExports.jsx("li",{className:"mt-2 h-8 w-full animate-pulse bg-gray-200"})]}):n.Children.toArray(t.map(i,(a,h)=>e.jsxRuntimeExports.jsx("li",{onMouseOut:()=>{clearTimeout(p),x(null)},onMouseEnter:()=>{const R=setTimeout(()=>{j(h)},300);x(R)},onClick:()=>j(h),className:T.cn("-mx-2 cursor-default rounded-md rounded-r-none px-2 py-1 text-sm font-medium capitalize",f===h?"bg-blue-500 text-white":" text-gray-700 hover:bg-foreground/10"),children:h})))}),e.jsxRuntimeExports.jsx("div",{className:"h-full w-full space-y-2 overflow-y-auto px-8",children:n.Children.toArray(b.map(a=>e.jsxRuntimeExports.jsx(N,{block:a,closePopover:()=>E(!1)})))})]})},L=()=>{const[r,o]=n.useState(""),{addPredefinedBlock:l}=s.useAddBlock(),[c]=s.useSelectedBlockIds(),[,d]=g.useAtom(s.addBlockOffCanvasAtom),[,m]=g.useAtom(s.activePanelAtom),[,p]=g.useAtom(s.addBlocksModalAtom),x=()=>{const i=A.getBlocksFromHTML(r);l([...i],t.first(c)||null),o(""),d(!1),m("layers"),p(!1)};return e.jsxRuntimeExports.jsxs(s.Card,{className:"border-border/0 p-0 shadow-none",children:[e.jsxRuntimeExports.jsxs(s.CardHeader,{className:"p-3",children:[e.jsxRuntimeExports.jsx(s.CardTitle,{children:"Import HTML"}),e.jsxRuntimeExports.jsx(s.CardDescription,{children:"Use HTML snippets from component libraries like Tailwind UI, Flowbite, Preline, Kitwind, Tailblocks etc. or just copy paste your own HTML code. Only Tailwind CSS markup is supported."})]}),e.jsxRuntimeExports.jsx(s.CardContent,{className:"space-y-2 px-3 py-0",children:e.jsxRuntimeExports.jsxs("div",{className:"space-y-1",children:[e.jsxRuntimeExports.jsx(s.Label,{htmlFor:"current",className:"text-sm",children:"Enter HTML Code:"}),e.jsxRuntimeExports.jsx(s.Textarea,{autoFocus:!0,tabIndex:1,ref:i=>i&&i.focus(),defaultValue:r,onChange:i=>o(i.target.value),rows:12,placeholder:`<div>
|
|
2
|
+
<h1>Enter code here</h1>
|
|
3
|
+
</div>`,className:"resize-none overflow-x-auto whitespace-pre font-mono font-normal"})]})}),e.jsxRuntimeExports.jsxs(s.CardFooter,{className:"flex flex-col justify-end p-3",children:[e.jsxRuntimeExports.jsx(s.Button,{disabled:r.trim()==="",onClick:()=>x(),size:"sm",className:"w-full",children:"Import"}),e.jsxRuntimeExports.jsxs(s.Alert,{variant:"default",className:"mt-2 p-1 text-blue-400",children:[e.jsxRuntimeExports.jsx(w.ExclamationTriangleIcon,{className:"h-4 w-4"}),e.jsxRuntimeExports.jsx(s.AlertTitle,{className:"text-sm leading-4",children:"Imported html will be added to the currently selected block. If no block is selected, the html will be added to the page."})]})]})]})},v=["ListItem","TableHead","TableBody","TableRow","TableCell","Column"],P=(r,o)=>{if(!r)return!t.includes(v,o);const l=r._type;return l==="List"?o==="ListItem":l==="Table"?o==="TableHead"||o==="TableBody":l==="TableHead"||l==="TableBody"?o==="TableRow":l==="TableRow"?o==="TableCell":l==="Row"?o==="Column":!t.includes(v,o)},S=()=>{const[r,o]=n.useState("core"),[l,c]=n.useState("basic"),d=k.useChaiBlocks(),[,m]=g.useAtom(s.showPredefinedBlockCategoryAtom),[,p]=g.useAtom(s.addBlocksModalAtom),[x]=s.useSelectedBlockIds(),i=s.useAllBlocks(),E=t.find(i,{_id:t.first(x)}),{data:f,isLoading:j}=s.useUILibraryBlocks(),b=t.groupBy(t.filter(d,u=>P(E,u.type)),"category"),a=t.uniq(t.map(b.core,"group"));n.useEffect(()=>{!t.includes(a,l)&&!t.isEmpty(a)&&!t.isEmpty(l)&&c(t.first(a))},[a,l]);const h=u=>c(B=>B===u?"":u),R=!j&&!t.isEmpty(f)||t.find(t.values(d),{category:"custom"})!==void 0;return e.jsxRuntimeExports.jsxs("div",{className:"flex h-full flex-col overflow-hidden",children:[e.jsxRuntimeExports.jsxs("div",{className:"mb-2 flex justify-between rounded-md bg-background/30 p-1",children:[e.jsxRuntimeExports.jsxs("h1",{className:"flex flex-col items-baseline px-1 text-2xl font-semibold xl:flex-row",children:["Add block",e.jsxRuntimeExports.jsx("span",{className:"p-0 text-xs font-light leading-3 opacity-80 xl:pl-1",children:r==="html"?"(Enter or paste your own HTML code)":"(Drag & drop into tree view or click to add)"})]}),e.jsxRuntimeExports.jsxs("button",{onClick:()=>p(!1),className:"flex h-max items-center gap-x-1 rounded-full border p-px text-xs text-gray-800 hover:bg-gray-100 md:p-2",children:[e.jsxRuntimeExports.jsx(w.Cross1Icon,{width:12})," Close"]})]}),e.jsxRuntimeExports.jsx(s.Tabs,{onValueChange:u=>{m(""),o(u)},value:r,className:"h-max",children:e.jsxRuntimeExports.jsxs(s.TabsList,{className:"grid w-full "+(R?"grid-cols-3":"grid-cols-2"),children:[e.jsxRuntimeExports.jsx(s.TabsTrigger,{value:"core",children:"Core"}),R?e.jsxRuntimeExports.jsx(s.TabsTrigger,{value:"ui-blocks",children:"UI Blocks"}):null,e.jsxRuntimeExports.jsx(s.TabsTrigger,{value:"html",children:"Import"})]})}),r==="core"&&e.jsxRuntimeExports.jsx(s.ScrollArea,{className:"-mx-1.5 h-full",children:e.jsxRuntimeExports.jsx(s.Accordion,{type:"single",value:l,className:"w-full px-3",children:n.Children.toArray(t.map(a,u=>t.reject(t.filter(t.values(b.core),{group:u}),{hidden:!0}).length?e.jsxRuntimeExports.jsxs(s.AccordionItem,{value:u,className:"border-border",children:[e.jsxRuntimeExports.jsx(s.AccordionTrigger,{onClick:()=>h(u),className:"py-2 capitalize",children:u}),e.jsxRuntimeExports.jsx(s.AccordionContent,{children:e.jsxRuntimeExports.jsx("div",{className:"grid grid-cols-4 gap-2",children:n.Children.toArray(t.reject(t.filter(t.values(b.core),{group:u}),{hidden:!0}).map(B=>e.jsxRuntimeExports.jsx(C,{block:B})))})})]}):null))})}),r==="ui-blocks"&&e.jsxRuntimeExports.jsx(n.Suspense,{fallback:e.jsxRuntimeExports.jsx(s.Skeleton,{className:"h-32 w-full"}),children:e.jsxRuntimeExports.jsx(I,{})}),r==="html"&&e.jsxRuntimeExports.jsx(L,{})]})};exports.default=S;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./jsx-runtime-WUGKV8jN.cjs"),C=require("react"),B=require("@rjsf/validator-ajv8"),j=require("@rjsf/core"),c=require("./index-
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./jsx-runtime-WUGKV8jN.cjs"),C=require("react"),B=require("@rjsf/validator-ajv8"),j=require("@rjsf/core"),c=require("./index-W5drgyWI.cjs"),e=require("./controls-aHZq-q4b.cjs"),R=require("lodash");require("./MODIFIERS-WFzDQfiT.cjs");require("@radix-ui/react-toggle");require("class-variance-authority");require("./utils-It2K33fU.cjs");require("clsx");require("tailwind-merge");require("@radix-ui/react-switch");require("@radix-ui/react-slot");require("@radix-ui/react-accordion");require("@radix-ui/react-icons");require("@radix-ui/react-alert-dialog");require("@radix-ui/react-dialog");require("@radix-ui/react-label");require("@radix-ui/react-scroll-area");require("@radix-ui/react-tabs");require("@radix-ui/react-tooltip");require("@radix-ui/react-popover");require("@radix-ui/react-menubar");require("@radix-ui/react-hover-card");require("@radix-ui/react-select");require("@radix-ui/react-dropdown-menu");require("@radix-ui/react-separator");require("@radix-ui/react-toast");require("cmdk");require("@radix-ui/react-context-menu");require("react-icons-picker");require("react-dom");require("react-quill");require("jotai");require("flat-to-nested");require("redux-undo");require("@chaibuilder/runtime");require("@react-hookz/web");require("react-i18next");function P(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const i in r)if(i!=="default"){const a=Object.getOwnPropertyDescriptor(r,i);Object.defineProperty(t,i,a.get?a:{enumerable:!0,get:()=>r[i]})}}return t.default=r,Object.freeze(t)}const v=P(C),p=[{title:"Roboto",value:"Roboto"},{title:"Open Sans",value:"Open Sans"},{title:"Montserrat",value:"Montserrat"},{title:"Lato",value:"Lato"},{title:"Poppins",value:"Poppins"},{title:"Oswald",value:"Oswald"},{title:"Raleway",value:"Raleway"},{title:"Ubuntu",value:"Ubuntu"},{title:"Nunito",value:"Nunito"},{title:"Merriweather",value:"Merriweather"},{title:"Nunito Sans",value:"Nunito Sans"},{title:"Playfair Display",value:"Playfair Display"},{title:"Rubik",value:"Rubik"},{title:"Inter",value:"Inter"},{title:"Lora",value:"Lora"},{title:"Kanit",value:"Kanit"},{title:"Fira Sans",value:"Fira Sans"},{title:"Hind",value:"Hind"},{title:"Quicksand",value:"Quicksand"},{title:"Mulish",value:"Mulish"},{title:"Barlow",value:"Barlow"},{title:"Inconsolata",value:"Inconsolata"},{title:"Titillium Web",value:"Titillium Web"},{title:"Heebo",value:"Heebo"},{title:"IBM Plex Sans",value:"IBM Plex Sans"},{title:"DM Sans",value:"DM Sans"},{title:"Nanum Gothic",value:"Nanum Gothic"},{title:"Karla",value:"Karla"},{title:"Arimo",value:"Arimo"},{title:"Cabin",value:"Cabin"},{title:"Oxygen",value:"Oxygen"},{title:"Overpass",value:"Overpass"},{title:"Assistant",value:"Assistant"},{title:"Tajawal",value:"Tajawal"},{title:"Play",value:"Play"},{title:"Exo",value:"Exo"},{title:"Cinzel",value:"Cinzel"},{title:"Faustina",value:"Faustina"},{title:"Philosopher",value:"Philosopher"},{title:"Gelasio",value:"Gelasio"},{title:"Sofia Sans Condensed",value:"Sofia Sans Condensed"},{title:"Noto Sans Devanagari",value:"Noto Sans Devanagari"},{title:"Actor",value:"Actor"},{title:"Epilogue",value:"Epilogue"},{title:"Glegoo",value:"Glegoo"},{title:"Overlock",value:"Overlock"},{title:"Lustria",value:"Lustria"},{title:"Ovo",value:"Ovo"},{title:"Suranna",value:"Suranna"}],k=()=>{const r=c.useBuilderProp("onSaveBrandingOptions",async()=>{}),[t,i]=c.useBrandingOptions(),a=v.useRef(t);v.useEffect(()=>()=>{R.isEqual(t,a.current)||r(a.current)},[]);const y=({formData:l},n)=>{n&&(i(l),a.current=l)},{bodyFont:f,headingFont:g,primaryColor:q,bodyTextDarkColor:b,bodyTextLightColor:m,bodyBgDarkColor:x,secondaryColor:h,bodyBgLightColor:S,roundedCorners:O}=t,s={headingFont:e.f({title:"Heading font",default:g,options:p}),bodyFont:e.f({title:"Body font",default:f,options:p}),roundedCorners:e.c({title:"Rounded Corner",default:parseInt(O||5,10)}),primaryColor:e.y({title:"Primary",default:q}),secondaryColor:e.y({title:"Secondary",default:h}),bodyBgLightColor:e.y({title:"Body Background (Light)",default:S}),bodyBgDarkColor:e.y({title:"Body Background (Dark)",default:x}),bodyTextLightColor:e.y({title:"Body Text (Light)",default:b}),bodyTextDarkColor:e.y({title:"Body Text (Dark)",default:m})},u={type:"object",properties:{}},d={};return Object.keys(s).forEach(l=>{const n=s[l];return u.properties||(u.properties={}),u.properties[l]=n.schema,d[l]=n.uiSchema,!0}),o.jsxRuntimeExports.jsxs("div",{className:"flex h-full select-none flex-col",children:[o.jsxRuntimeExports.jsx("div",{className:"rounded-md bg-background/30 p-1",children:o.jsxRuntimeExports.jsx("h1",{className:"px-1 font-semibold",children:"Branding Options"})}),o.jsxRuntimeExports.jsx("div",{className:"-mx-2",children:o.jsxRuntimeExports.jsx(j,{idSeparator:".",autoComplete:"off",omitExtraData:!0,liveOmit:!0,liveValidate:!0,uiSchema:d,schema:u,formData:t,validator:B,onChange:y})})]})};exports.default=k;
|
|
@@ -2,7 +2,7 @@ import { j as i } from "./jsx-runtime-NV737rRe.js";
|
|
|
2
2
|
import * as s from "react";
|
|
3
3
|
import O from "@rjsf/validator-ajv8";
|
|
4
4
|
import k from "@rjsf/core";
|
|
5
|
-
import { i as D, x as N } from "./index-
|
|
5
|
+
import { i as D, x as N } from "./index-Vx4ctSV6.js";
|
|
6
6
|
import { f as p, c as P, y as e } from "./controls-G0puEH71.js";
|
|
7
7
|
import { isEqual as R } from "lodash";
|
|
8
8
|
import "./MODIFIERS-MLfpKQY1.js";
|