@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.
Files changed (76) hide show
  1. package/README.md +30 -103
  2. package/dist/{AddBlocks-0-e393Fn.js → AddBlocks-Izn_rxXD.js} +5 -4
  3. package/dist/AddBlocks-RHuwwfe5.cjs +3 -0
  4. package/dist/{BrandingOptions-HtNCJO9_.cjs → BrandingOptions-Fyo8qs4o.cjs} +1 -1
  5. package/dist/{BrandingOptions-QqqJ-YRb.js → BrandingOptions-orZyDGiL.js} +1 -1
  6. package/dist/{CanvasArea-0hMAhzxn.js → CanvasArea-C30uJLef.js} +72 -71
  7. package/dist/{CanvasArea-pZz5czrV.cjs → CanvasArea-IM2K8bud.cjs} +2 -2
  8. package/dist/{CurrentPage-UOkxZISs.js → CurrentPage-70sBzc2_.js} +6 -5
  9. package/dist/CurrentPage-lIithDJy.cjs +1 -0
  10. package/dist/{Layers-TB-Lriju.js → Layers-W0N2zfnf.js} +7 -6
  11. package/dist/Layers-YMtavzUG.cjs +1 -0
  12. package/dist/{MarkAsGlobalBlock-5h3wP4zj.cjs → MarkAsGlobalBlock-EOsABFjY.cjs} +1 -1
  13. package/dist/{MarkAsGlobalBlock-Pa8po8qP.js → MarkAsGlobalBlock-FPCQmRIh.js} +1 -1
  14. package/dist/{PagesPanel-mAMSbYPt.js → PagesPanel-RbHN6lvQ.js} +6 -5
  15. package/dist/{PagesPanel-ffrNyFyp.cjs → PagesPanel-i-MQEmm_.cjs} +1 -1
  16. package/dist/ProjectPanel-0BGx-hP-.cjs +1 -0
  17. package/dist/{ProjectPanel-XvsYajju.js → ProjectPanel-CzwuyR0N.js} +7 -6
  18. package/dist/{Settings-8AbHXcDP.js → Settings-lxTrbI-C.js} +330 -320
  19. package/dist/Settings-mTWkKG82.cjs +1 -0
  20. package/dist/{SidePanels-LQg3mdC4.js → SidePanels-g4M6oTs-.js} +7 -6
  21. package/dist/SidePanels-pUOJTYfr.cjs +1 -0
  22. package/dist/{Topbar-wA6jhMj9.js → Topbar-KqZt4TEY.js} +1 -1
  23. package/dist/{Topbar-A3WZDrK4.cjs → Topbar-kHffytzr.cjs} +1 -1
  24. package/dist/{UnsplashImages-mzIO1QeT.js → UnsplashImages-Ua7ksJ8c.js} +1 -1
  25. package/dist/{UnsplashImages-E8zPMgJf.cjs → UnsplashImages-y7I_7_W7.cjs} +1 -1
  26. package/dist/{UploadImages-qEuDUEMn.cjs → UploadImages-RzEm0Stb.cjs} +1 -1
  27. package/dist/{UploadImages-qMeaY4sk.js → UploadImages-YP_J6erG.js} +1 -1
  28. package/dist/{add-page-modal-oER3yE4F.js → add-page-modal-btGWaXyq.js} +18 -18
  29. package/dist/add-page-modal-ekFis5D8.cjs +1 -0
  30. package/dist/{confirm-alert-rDSai_jQ.js → confirm-alert-Py2WqZhJ.js} +1 -1
  31. package/dist/{confirm-alert-tH8UCCSF.cjs → confirm-alert-mAhT8vln.cjs} +1 -1
  32. package/dist/core.cjs +1 -1
  33. package/dist/core.js +56 -55
  34. package/dist/{delete-page-modal-ShTRkqkB.cjs → delete-page-modal-QzleoJG2.cjs} +1 -1
  35. package/dist/{delete-page-modal-QzQdrLYI.js → delete-page-modal-Rq4ThQpu.js} +6 -5
  36. package/dist/{form-vWeEsG9Y.js → form-Lm3bupAq.js} +1 -1
  37. package/dist/{form-MlgUSEy_.cjs → form-kAjrBaV-.cjs} +1 -1
  38. package/dist/{functions-hmbWDcnW.js → functions-JFP-oMsY.js} +28 -27
  39. package/dist/{functions-eu6BbvqO.cjs → functions-KMQYiBHf.cjs} +2 -2
  40. package/dist/{index-G55KtqnU.js → index-Vx4ctSV6.js} +10 -20
  41. package/dist/{index-T5MFAHA0.cjs → index-W5drgyWI.cjs} +1 -1
  42. package/dist/{index-mLIwGF5W.js → index-WPlT_Q87.js} +3 -3
  43. package/dist/{index-pCHSFoQO.cjs → index-fvoD_laH.cjs} +2 -2
  44. package/dist/lib.cjs +1 -1
  45. package/dist/lib.d.ts +3 -9
  46. package/dist/lib.js +93 -152
  47. package/dist/page-viewer-AlOCzh1b.cjs +1 -0
  48. package/dist/{page-viewer-X3IEOrUC.js → page-viewer-_wGsV2_o.js} +29 -28
  49. package/dist/{project-general-setting-oujmeWOG.js → project-general-setting-B8uuHccU.js} +7 -6
  50. package/dist/{project-general-setting-HZeYf9A1.cjs → project-general-setting-XnNyOpXO.cjs} +1 -1
  51. package/dist/{project-seo-setting-3FZQXaTn.cjs → project-seo-setting-QJBATF59.cjs} +1 -1
  52. package/dist/{project-seo-setting-_X6ckVa4.js → project-seo-setting-Zg2Z-Frr.js} +2 -2
  53. package/dist/render.cjs +1 -1
  54. package/dist/render.js +1 -1
  55. package/dist/{single-page-detail-SxboE7TI.js → single-page-detail-HXpxgQnU.js} +8 -7
  56. package/dist/single-page-detail-MWh30E_-.cjs +1 -0
  57. package/dist/studio.cjs +1 -1
  58. package/dist/studio.js +5 -4
  59. package/dist/tailwind-config-OxLD7oFU.cjs +1 -0
  60. package/dist/tailwind-config-d1VL1lzE.js +62 -0
  61. package/dist/tailwind.cjs +1 -0
  62. package/dist/tailwind.d.ts +80 -0
  63. package/dist/tailwind.js +24 -0
  64. package/dist/ui.cjs +1 -1
  65. package/dist/ui.d.ts +1 -1
  66. package/dist/ui.js +1 -1
  67. package/package.json +9 -4
  68. package/dist/AddBlocks-p68Cz79o.cjs +0 -3
  69. package/dist/CurrentPage-phMDH1Ub.cjs +0 -1
  70. package/dist/Layers-NKZXi2LV.cjs +0 -1
  71. package/dist/ProjectPanel-1ywILLme.cjs +0 -1
  72. package/dist/Settings-hdmnT_mI.cjs +0 -1
  73. package/dist/SidePanels-xaNrI3oK.cjs +0 -1
  74. package/dist/add-page-modal-9deiA1W9.cjs +0 -1
  75. package/dist/page-viewer-GPNN1H92.cjs +0 -1
  76. 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 to create beautiful content driven websites. The perfect tool for Startups and Indie-Hackers alike.
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
- Source Code (React App): [GitHub](https://github.com/surajair/demo)
11
-
9
+ ---
12
10
 
13
- ### Usage
11
+ ### Getting Started:
14
12
 
15
- > Please ensure `Tailwind CSS` is configured for your project depending on framework. [https://tailwindcss.com/docs/installation](https://tailwindcss.com/docs/installation)
16
-
17
- Step 1: Install the package
13
+ Step 1: Install the packages
18
14
  ```bash
19
- npm install @chaibuilder/sdk @chaibuilder/blocks
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` and add the following content.
24
- ```js
25
- import type { Config } from "tailwindcss";
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 component on the page.
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
- <ChaiBuilderEditor
121
- logo={<h1>Your Logo</h1>}
122
- blocks={[]}
123
- onSaveBrandingOptions={(options) => console.log(options)}
124
- onSavePage={pageData => console.log(pageData)}
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
- ### Features
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-G55KtqnU.js";
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-hmbWDcnW.js";
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
- }, Ls = () => {
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
- Ls as default
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-T5MFAHA0.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;
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-G55KtqnU.js";
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";