) => {
29 | const value = event.target.value;
30 | setSelectedValue(value);
31 | onValueChange(value);
32 | };
33 |
34 | return (
35 |
36 |
52 |
53 | );
54 | };
55 |
56 | export default ChaiSelect;
57 |
--------------------------------------------------------------------------------
/src/core/components/count-down.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | const SECONDS = 10;
4 |
5 | export default function Countdown() {
6 | const [timeLeft, setTimeLeft] = useState(SECONDS);
7 | const [isActive, setIsActive] = useState(false);
8 |
9 | useEffect(() => {
10 | if (isActive && timeLeft > 0) {
11 | const timer = setTimeout(() => {
12 | setTimeLeft(timeLeft - 0.1);
13 | }, 100);
14 | return () => clearTimeout(timer);
15 | } else if (timeLeft <= 0) {
16 | setIsActive(false);
17 | setTimeLeft(SECONDS);
18 | }
19 | }, [isActive, timeLeft]);
20 |
21 | const startTimer = () => {
22 | setIsActive(true);
23 | setTimeLeft(SECONDS);
24 | };
25 |
26 | useEffect(() => {
27 | if (timeLeft === SECONDS) {
28 | startTimer();
29 | }
30 | }, [timeLeft]);
31 |
32 | const radius = 18;
33 | const circumference = 2 * Math.PI * radius;
34 | const strokeDashoffset = circumference * (1 - (SECONDS - timeLeft) / SECONDS);
35 |
36 | return (
37 |
38 |
61 |
62 |
63 |
64 |
4 |
5 |
Oops! Something went wrong.
6 |
Please try again.
7 |
8 |
21 |
24 |
25 | {map(stylesProps, (prop) => {
26 | return (
27 | {
30 | setStylingBlocks([{ id: `${prop}-${selectedBlock._id}`, blockId: selectedBlock._id, prop }]);
31 | }}
32 | variant={isSelected(prop) ? "default" : "secondary"}
33 | key={prop}>
34 | {startCase(prop)}
35 |
36 | );
37 | })}
38 |
39 |
40 |
19 | {map(classes, (cls) => (
20 |
21 |
22 |
31 |
32 | {startCase(toLower(cls))}
33 |
34 | ))}
35 |
36 | );
37 | };
38 |
--------------------------------------------------------------------------------
/src/core/components/settings/choices/style-context.tsx:
--------------------------------------------------------------------------------
1 | import { createContext } from "react";
2 |
3 | export const StyleContext = createContext({ canReset: false, canChange: true });
4 |
5 | export const BlockStyleProvider = ({ children, canReset = false, canChange = true }: any) => (
6 | // eslint-disable-next-line react/jsx-no-constructed-context-values
7 | {children}
8 | );
9 |
--------------------------------------------------------------------------------
/src/core/components/settings/new-panel/block-attributes-editor.tsx:
--------------------------------------------------------------------------------
1 | import AttrsEditor from "@/core/components/settings/new-panel/attributes-editor";
2 | import { useSelectedBlock, useSelectedStylingBlocks, useUpdateBlocksProps } from "@/core/hooks";
3 | import { forEach, get, isEmpty, map, set } from "lodash-es";
4 | import * as React from "react";
5 | import { useState } from "react";
6 |
7 | export const BlockAttributesEditor = React.memo(() => {
8 | const block = useSelectedBlock();
9 | const [attributes, setAttributes] = useState([] as Array<{ key: string; value: string }>);
10 | const [selectedStylingBlock] = useSelectedStylingBlocks();
11 | const updateBlockProps = useUpdateBlocksProps();
12 |
13 | const attrKey = `${get(selectedStylingBlock, "0.prop")}_attrs`;
14 |
15 | React.useEffect(() => {
16 | const _attributes = map(get(block, attrKey), (value, key) => ({ key, value }));
17 | if (!isEmpty(_attributes)) setAttributes(_attributes as any);
18 | else setAttributes([]);
19 |
20 | // eslint-disable-next-line react-hooks/exhaustive-deps
21 | }, [get(block, attrKey)]);
22 |
23 | const updateAttributes = React.useCallback(
24 | (updatedAttributes: any = []) => {
25 | const _attrs = {};
26 | forEach(updatedAttributes, (item) => {
27 | if (!isEmpty(item.key)) {
28 | set(_attrs, item.key, item.value);
29 | }
30 | });
31 | updateBlockProps([get(block, "_id")], { [attrKey]: _attrs });
32 | },
33 | [block, updateBlockProps, attrKey],
34 | );
35 |
36 | return (
37 |
44 | );
45 | });
46 |
--------------------------------------------------------------------------------
/src/core/components/settings/new-panel/breakpoint-selector.tsx:
--------------------------------------------------------------------------------
1 | import { Breakpoints, WEB_BREAKPOINTS } from "@/core/components/canvas/topbar/canvas-breakpoints";
2 | import { useScreenSizeWidth } from "@/core/hooks";
3 | import { useMemo } from "react";
4 |
5 | export function BreakpointSelector() {
6 | const [, breakpoint] = useScreenSizeWidth();
7 |
8 | const message = useMemo(() => {
9 | const currentBreakpoint = WEB_BREAKPOINTS.find((bp) => bp.breakpoint === breakpoint);
10 | return currentBreakpoint?.content;
11 | }, [breakpoint, WEB_BREAKPOINTS]);
12 |
13 | return (
14 | <>
15 |
19 |
20 |
21 |
22 |
23 | {breakpoint === "xs" ? "Base" : breakpoint}
24 |
25 | {message}
26 |
27 |
28 |
18 |
{t("Choose library")}
19 |
({
22 | value: uiLibrary.id,
23 | label: uiLibrary.name,
24 | }))}
25 | defaultValue={library}
26 | onValueChange={(v) => setLibrary(v as any)}
27 | />
28 | {children}
;
11 | });
12 |
13 | export const DefaultDragPreview = memo(({ id, isDragging, mouse }: Omit) => {
14 | const [allBlocks] = useBlocksStore();
15 |
16 | const block: ChaiBlock | undefined = useMemo(() => {
17 | return allBlocks.find((block) => block._id === id);
18 | }, [allBlocks, id]);
19 |
20 | const style = useMemo(
21 | () => ({
22 | transform: `translate(${mouse?.x - 10}px, ${mouse?.y - 10}px)`,
23 | }),
24 | [mouse],
25 | );
26 |
27 | if (!mouse) {
28 | return ;
29 | }
30 |
31 | return (
32 |
33 |
34 |
37 |
43 |
45 |
21 | setParentContext(null)}>
22 |
23 |
26 | {
29 | pasteBlocks("root");
30 | setParentContext(null);
31 | }}>
32 | {t("Paste")}
33 |
34 |
35 |
36 |
37 | );
38 | };
39 |
--------------------------------------------------------------------------------
/src/core/components/sidepanels/panels/outline/save-to-library.tsx:
--------------------------------------------------------------------------------
1 | import { saveToLibraryModalAtom } from "@/core/components/sidepanels/panels/outline/upsert-library-block-modal";
2 | import { useSaveToLibraryComponent } from "@/core/extensions/save-to-library";
3 | import { useSelectedBlock } from "@/core/hooks";
4 | import { DropdownMenuItem } from "@/ui/shadcn/components/ui/dropdown-menu";
5 | import { useAtom } from "jotai";
6 | import { SaveIcon } from "lucide-react";
7 | import { useTranslation } from "react-i18next";
8 |
9 | export const SaveToLibrary = () => {
10 | const selectedBlock = useSelectedBlock();
11 | const { t } = useTranslation();
12 | const [, setModalState] = useAtom(saveToLibraryModalAtom);
13 | const SaveToLibraryComponent = useSaveToLibraryComponent();
14 |
15 | const handleSaveToLibrary = () => {
16 | if (selectedBlock) {
17 | setModalState({
18 | isOpen: true,
19 | blockId: selectedBlock._id,
20 | });
21 | }
22 | };
23 |
24 | if (!SaveToLibraryComponent) return null;
25 |
26 | return (
27 |
28 | {t(selectedBlock?._libBlockId ? "Update library block" : "Save to library")}
29 |
30 | );
31 | };
32 |
--------------------------------------------------------------------------------
/src/core/components/sidepanels/panels/outline/unlink-library-block.tsx:
--------------------------------------------------------------------------------
1 | import { useSelectedBlock, useUpdateBlocksProps } from "@/core/hooks";
2 | import { DropdownMenuItem } from "@/ui/shadcn/components/ui/dropdown-menu";
3 | import { UnlinkIcon } from "lucide-react";
4 | import { useTranslation } from "react-i18next";
5 |
6 | export const UnlinkLibraryBlock = () => {
7 | const { t } = useTranslation();
8 | const selectedBlock = useSelectedBlock();
9 | const updateBlocksProps = useUpdateBlocksProps();
10 |
11 | const handleUnlink = () => {
12 | updateBlocksProps([selectedBlock._id], {
13 | _libBlockId: null,
14 | });
15 | };
16 |
17 | return (
18 |
19 | {t("Unlink from library")}
20 |
21 | );
22 | };
23 |
--------------------------------------------------------------------------------
/src/core/components/sidepanels/panels/theme-configuration/BorderRadiusInput.tsx:
--------------------------------------------------------------------------------
1 | import { debounce } from "lodash-es";
2 |
3 | type BorderRadiusInputProps = {
4 | value: string;
5 | onChange: (value: string) => void;
6 | disabled?: boolean;
7 | };
8 |
9 | const BorderRadiusInput = ({ value, onChange, disabled }: BorderRadiusInputProps) => {
10 | const throttledChange = debounce((value: string) => onChange(value), 200);
11 |
12 | return (
13 | throttledChange(e.target.value)}
21 | className="flex-1 cursor-pointer"
22 | />
23 | );
24 | };
25 |
26 | export default BorderRadiusInput;
27 |
--------------------------------------------------------------------------------
/src/core/components/sidepanels/panels/theme-configuration/ColorPickerInput.tsx:
--------------------------------------------------------------------------------
1 | import { debounce } from "lodash-es";
2 |
3 | const ColorPickerInput = ({ value, onChange }: { value: string; onChange: (value: string) => void }) => {
4 | const handleColorChange = debounce((value: string) => onChange(value), 200);
5 |
6 | return (
7 |
10 | {
14 | const hexValue = e.target.value;
15 | if (/^#[0-9A-F]{6}$/i.test(hexValue)) {
16 | handleColorChange(hexValue);
17 | }
18 | }}
19 | className="absolute inset-0 h-full w-full cursor-pointer rounded-lg border-0 opacity-0"
20 | />
21 |
22 | );
23 | };
24 |
25 | export default ColorPickerInput;
26 |
--------------------------------------------------------------------------------
/src/core/components/sidepanels/panels/theme-configuration/font-selector.tsx:
--------------------------------------------------------------------------------
1 | import { Label } from "@/ui/shadcn/components/ui/label";
2 | import { useRegisteredFonts } from "@chaibuilder/runtime";
3 | import { startCase } from "lodash-es";
4 |
5 | const FontSelector = ({
6 | label,
7 | value,
8 | onChange,
9 | }: {
10 | label: string;
11 | value: string;
12 | onChange: (value: string) => void;
13 | }) => {
14 | const availableFonts = useRegisteredFonts();
15 | return (
16 |
17 |
18 |
28 |
29 | );
30 | };
31 |
32 | export default FontSelector;
33 |
--------------------------------------------------------------------------------
/src/core/components/sidepanels/panels/theme-configuration/index.ts:
--------------------------------------------------------------------------------
1 | import BorderRadiusInput from "@/core/components/sidepanels/panels/theme-configuration/BorderRadiusInput";
2 | import ColorPickerInput from "@/core/components/sidepanels/panels/theme-configuration/ColorPickerInput";
3 | import FontSelector from "@/core/components/sidepanels/panels/theme-configuration/font-selector";
4 |
5 | export { BorderRadiusInput, ColorPickerInput, FontSelector };
6 |
--------------------------------------------------------------------------------
/src/core/components/topbar/Preview.tsx:
--------------------------------------------------------------------------------
1 | import { useBuilderProp, usePreviewMode } from "@/core/hooks";
2 | import { Button } from "@/ui/shadcn/components/ui/button";
3 | import { EyeOpenIcon } from "@radix-ui/react-icons";
4 | import { useTranslation } from "react-i18next";
5 |
6 | export const Preview = function Preview() {
7 | const preview = useBuilderProp("previewComponent");
8 | const [, setPreviewMode] = usePreviewMode();
9 | const { t } = useTranslation();
10 | if (!preview) return null;
11 | return (
12 |
23 | );
24 | };
25 |
--------------------------------------------------------------------------------
/src/core/components/topbar/save-button.tsx:
--------------------------------------------------------------------------------
1 | import { cn } from "@/core/functions/common-functions";
2 | import { useSavePage } from "@/core/hooks";
3 | import { Button } from "@/ui/shadcn/components/ui/button";
4 | import { Check } from "lucide-react";
5 | import { useTranslation } from "react-i18next";
6 |
7 | export const SaveButton = () => {
8 | const { savePage, saveState } = useSavePage();
9 | const { t } = useTranslation();
10 |
11 | const button = (
12 |
35 | );
36 | return {button}
;
37 | };
38 |
--------------------------------------------------------------------------------
/src/core/constants/LAYOUT_MODE.ts:
--------------------------------------------------------------------------------
1 |
2 | export type LayoutVariant = "SINGLE_SIDE_PANEL" | "DUAL_SIDE_PANEL" | "DUAL_SIDE_PANEL_ADVANCED";
3 |
--------------------------------------------------------------------------------
/src/core/constants/MODIFIERS.ts:
--------------------------------------------------------------------------------
1 | export const MODIFIERS: Array = [
2 | "hover",
3 | "focus",
4 | "focus-within",
5 | "focus-visible",
6 | "active",
7 | "visited",
8 | "target",
9 | "first",
10 | "last",
11 | "only",
12 | "odd",
13 | "even",
14 | "first-of-type",
15 | "last-of-type",
16 | "only-of-type",
17 | "empty",
18 | "disabled",
19 | "checked",
20 | "indeterminate",
21 | "default",
22 | "required",
23 | "valid",
24 | "invalid",
25 | "in-range",
26 | "out-of-range",
27 | "placeholder-shown",
28 | "autofill",
29 | "read-only",
30 | "open",
31 | "before",
32 | "after",
33 | "first-letter",
34 | "first-line",
35 | "marker",
36 | "selection",
37 | "file",
38 | "placeholder",
39 | // preline
40 | "hs-collapse-open",
41 | "hs-accordion-active",
42 | ];
43 |
44 | export const BRANDING_OPTIONS_DEFAULTS = {
45 | bodyFont: "Inter",
46 | headingFont: "Inter",
47 | roundedCorners: 5,
48 | primaryColor: "#570df8",
49 | secondaryColor: "#f002b8",
50 | bodyBgDarkColor: "#031022",
51 | bodyBgLightColor: "#fcfcfc",
52 | bodyTextDarkColor: "#ffffff",
53 | bodyTextLightColor: "#000000",
54 | };
55 |
--------------------------------------------------------------------------------
/src/core/constants/PERMISSIONS.ts:
--------------------------------------------------------------------------------
1 | export const PERMISSIONS = {
2 | ADD_BLOCK: "add_block",
3 | DELETE_BLOCK: "delete_block",
4 | EDIT_BLOCK: "edit_block",
5 | MOVE_BLOCK: "move_block",
6 | EDIT_THEME: "edit_theme",
7 | SAVE_PAGE: "save_page",
8 | EDIT_STYLES: "edit_styles",
9 | IMPORT_HTML: "import_html",
10 |
11 | //LIbrary permissions
12 | CREATE_LIBRARY_BLOCK: "create_library_block",
13 | CREATE_LIBRARY_GROUP: "create_library_group",
14 | EDIT_LIBRARY_BLOCK: "edit_library_block",
15 | DELETE_LIBRARY_BLOCK: "delete_library_block",
16 | };
17 |
18 | export const PERMISSIONS_LIST = Object.values(PERMISSIONS);
19 |
--------------------------------------------------------------------------------
/src/core/constants/STRINGS.ts:
--------------------------------------------------------------------------------
1 | export const STYLES_KEY = "#styles:";
2 | export const SLOT_KEY = "#slots:";
3 | export const I18N_KEY = "#i18n";
4 | export const OUTLINE_KEY = "outline";
5 | export const ROOT_TEMP_KEY = "__ADD_BLOCK_INTERNAL_ROOT";
6 |
7 | export const REPEATER_PREFIX = "@";
8 | export const COLLECTION_PREFIX = "#";
9 | export const STATE_CONTEXT_PREFIX = "$";
10 |
--------------------------------------------------------------------------------
/src/core/events.ts:
--------------------------------------------------------------------------------
1 | export const CHAI_BUILDER_EVENTS = {
2 | OPEN_ADD_BLOCK: "OPEN_ADD_BLOCK",
3 | CLOSE_ADD_BLOCK: "CLOSE_ADD_BLOCK",
4 | SHOW_BLOCK_SETTINGS: "SHOW_BLOCK_SETTINGS",
5 |
6 | //CANVAS Events
7 | CLEAR_CANVAS_SELECTION: "CLEAR_CANVAS_SELECTION",
8 | CANVAS_BLOCK_SELECTED: "CANVAS_BLOCK_SELECTED",
9 | CANVAS_BLOCK_STYLE_SELECTED: "CANVAS_BLOCK_STYLE_SELECTED",
10 | };
11 |
--------------------------------------------------------------------------------
/src/core/extensions/__tests__/save-to-library.test.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | registerChaiSaveToLibrary,
3 | resetSaveToLibrary,
4 | SaveToLibraryProps,
5 | useSaveToLibraryComponent,
6 | } from "@/core/extensions/save-to-library";
7 | import { renderHook } from "@testing-library/react";
8 | import { beforeEach, describe, expect, it, vi } from "vitest";
9 |
10 | describe("save-to-library", () => {
11 | beforeEach(() => {
12 | resetSaveToLibrary();
13 | });
14 |
15 | describe("registerSaveToLibrary", () => {
16 | it("should register a component", () => {
17 | const MockComponent = vi.fn((_props: SaveToLibraryProps) => null);
18 | registerChaiSaveToLibrary(MockComponent);
19 | const { result } = renderHook(() => useSaveToLibraryComponent());
20 | expect(result.current).toBe(MockComponent);
21 | });
22 | });
23 |
24 | describe("useSaveToLibraryComponent", () => {
25 | it("should return null when no component is registered", () => {
26 | const { result } = renderHook(() => useSaveToLibraryComponent());
27 | expect(result.current).toBeNull();
28 | });
29 |
30 | it("should return registered component", () => {
31 | const MockComponent = vi.fn((_props: SaveToLibraryProps) => null);
32 | registerChaiSaveToLibrary(MockComponent);
33 | const { result } = renderHook(() => useSaveToLibraryComponent());
34 | expect(result.current).toBe(MockComponent);
35 | });
36 | });
37 | });
38 |
--------------------------------------------------------------------------------
/src/core/extensions/add-block-tabs.tsx:
--------------------------------------------------------------------------------
1 | import { has, set, values } from "lodash-es";
2 | import { useMemo } from "react";
3 |
4 | export type AddBlockTab = {
5 | id: string;
6 | tab: React.ComponentType;
7 | tabContent: React.ComponentType;
8 | };
9 |
10 | // Export for testing purposes
11 | export const ADD_BLOCK_TABS: Record = {};
12 |
13 | export const registerChaiAddBlockTab = (id: string, tab: Omit) => {
14 | if (has(ADD_BLOCK_TABS, id)) {
15 | console.warn(`Add block tab with id ${id} already registered`);
16 | }
17 | set(ADD_BLOCK_TABS, id, { id, ...tab });
18 | };
19 |
20 | export const useChaiAddBlockTabs = () => {
21 | return useMemo(() => {
22 | return values(ADD_BLOCK_TABS);
23 | }, []);
24 | };
25 |
--------------------------------------------------------------------------------
/src/core/extensions/blocks-settings.tsx:
--------------------------------------------------------------------------------
1 | export const RJSF_EXTENSIONS: Record; type: string }> = {};
2 |
3 | export const registerBlockSettingWidget = (id: string, component: React.ComponentType) => {
4 | RJSF_EXTENSIONS[id] = {
5 | id,
6 | component,
7 | type: "widget",
8 | };
9 | };
10 |
11 | export const registerBlockSettingField = (id: string, component: React.ComponentType) => {
12 | RJSF_EXTENSIONS[id] = {
13 | id,
14 | component,
15 | type: "field",
16 | };
17 | };
18 |
19 | export const registerBlockSettingTemplate = (id: string, component: React.ComponentType) => {
20 | RJSF_EXTENSIONS[id] = {
21 | id,
22 | component,
23 | type: "template",
24 | };
25 | };
26 |
27 | export const useBlockSettingComponents = (
28 | type: "widget" | "field" | "template",
29 | ): Record> => {
30 | return Object.values(RJSF_EXTENSIONS)
31 | .filter((component) => component.type === type)
32 | .reduce(
33 | (acc, component) => {
34 | acc[component.id] = component.component;
35 | return acc;
36 | },
37 | {} as Record>,
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/core/extensions/libraries.ts:
--------------------------------------------------------------------------------
1 | import { ChaiLibrary, ChaiLibraryBlock } from "@/types/chaibuilder-editor-props";
2 | import { ChaiBlock } from "@/types/common";
3 | import { values } from "lodash-es";
4 |
5 | type HTMLString = string;
6 |
7 | type ChaiLibraryConfig = {
8 | id: string;
9 | name: string;
10 | description: string;
11 | getBlocksList: (library: ChaiLibrary) => Promise[]>;
12 | getBlock: ({
13 | library,
14 | block,
15 | }: {
16 | library: ChaiLibrary;
17 | block: ChaiLibraryBlock;
18 | }) => Promise;
19 | };
20 |
21 | let LIBRARIES_REGISTRY: Record> = {};
22 |
23 | export const registerChaiLibrary = = Record>(
24 | id: string,
25 | library: Omit, "id">,
26 | ) => {
27 | LIBRARIES_REGISTRY[id] = { ...library, id };
28 | };
29 |
30 | export const getChaiLibrary = (id: string) => {
31 | return LIBRARIES_REGISTRY[id];
32 | };
33 |
34 | export const useChaiLibraries = () => {
35 | return values(LIBRARIES_REGISTRY);
36 | };
37 |
--------------------------------------------------------------------------------
/src/core/extensions/save-to-library.tsx:
--------------------------------------------------------------------------------
1 | import { ChaiBlock } from "@/types/chai-block";
2 | import { ComponentType, useMemo } from "react";
3 |
4 | export type SaveToLibraryProps = {
5 | blockId: string;
6 | blocks: ChaiBlock[];
7 | close: () => void;
8 | };
9 |
10 | let SAVE_TO_LIB_COMPONENT: ComponentType | null = null;
11 |
12 | export const registerChaiSaveToLibrary = (component: ComponentType) => {
13 | SAVE_TO_LIB_COMPONENT = component;
14 | };
15 |
16 | export const useSaveToLibraryComponent = () => {
17 | return useMemo(() => SAVE_TO_LIB_COMPONENT, []);
18 | };
19 |
20 | // For testing purposes
21 | export const resetSaveToLibrary = () => {
22 | SAVE_TO_LIB_COMPONENT = null;
23 | };
24 |
--------------------------------------------------------------------------------
/src/core/extensions/sidebar-panels.tsx:
--------------------------------------------------------------------------------
1 | import { filter, has, set, values } from "lodash-es";
2 | import { ComponentType, useMemo } from "react";
3 |
4 | export interface ChaiSidebarPanel {
5 | id: string;
6 | position: "top" | "bottom";
7 | view?: "standard" | "modal" | "overlay" | "drawer";
8 | button: React.ComponentType<{
9 | isActive: boolean;
10 | show: () => void;
11 | panelId: string;
12 | position: "top" | "bottom";
13 | }>;
14 | label: string;
15 | panel?: ComponentType;
16 | width?: number;
17 | isInternal?: boolean;
18 | icon?: React.ReactNode;
19 | }
20 |
21 | // Export for testing purposes
22 | export const CHAI_BUILDER_PANELS: Record = {};
23 |
24 | export const registerChaiSidebarPanel = (panelId: string, panelOptions: Omit) => {
25 | if (has(CHAI_BUILDER_PANELS, panelId)) {
26 | console.warn(`Panel ${panelId} already registered. Overriding...`);
27 | }
28 | set(CHAI_BUILDER_PANELS, panelId, { id: panelId, ...panelOptions });
29 | };
30 |
31 | export const useChaiSidebarPanels = (position: "top" | "bottom") => {
32 | return useMemo(
33 | () =>
34 | filter(values(CHAI_BUILDER_PANELS), (panel) => {
35 | return panel.position === position;
36 | }),
37 | [position],
38 | );
39 | };
40 |
--------------------------------------------------------------------------------
/src/core/extensions/top-bar.tsx:
--------------------------------------------------------------------------------
1 | import { useMemo } from "react";
2 |
3 | const DefaultTopBar = () => {
4 | return ;
5 | };
6 |
7 | const TOP_BAR: { component: React.ComponentType } = {
8 | component: DefaultTopBar,
9 | };
10 |
11 | export const registerChaiTopBar = (component: React.ComponentType) => {
12 | TOP_BAR.component = component;
13 | };
14 |
15 | export const useTopBarComponent = () => {
16 | return useMemo(() => TOP_BAR.component, []);
17 | };
18 |
--------------------------------------------------------------------------------
/src/core/frame/frame-content.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import { Children, Component } from "react"; // eslint-disable-line no-unused-vars
3 |
4 | interface ContentProps {
5 | children: React.ReactElement;
6 | contentDidMount(...args: unknown[]): unknown;
7 | contentDidUpdate(...args: unknown[]): unknown;
8 | }
9 |
10 | export default class Content extends Component {
11 | componentDidMount() {
12 | this.props.contentDidMount();
13 | }
14 |
15 | componentDidUpdate() {
16 | this.props.contentDidUpdate();
17 | }
18 |
19 | render() {
20 | return Children.only(this.props.children);
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/core/frame/frame-context.tsx:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | import React from "react";
3 |
4 | let doc;
5 | let win;
6 | if (typeof document !== "undefined") {
7 | doc = document;
8 | }
9 | if (typeof window !== "undefined") {
10 | win = window;
11 | }
12 |
13 | export const FrameContext = React.createContext({ document: doc, window: win });
14 |
15 | export const useFrame = () => React.useContext(FrameContext);
16 |
17 | export const { Provider: FrameContextProvider, Consumer: FrameContextConsumer } = FrameContext;
18 |
--------------------------------------------------------------------------------
/src/core/frame/index.ts:
--------------------------------------------------------------------------------
1 | // @ts-nocheck
2 | export { ChaiFrame } from "@/core/frame/Frame";
3 | export { FrameContext, FrameContextConsumer, useFrame } from "@/core/frame/frame-context";
4 |
--------------------------------------------------------------------------------
/src/core/functions/common-functions.ts:
--------------------------------------------------------------------------------
1 | import { isEmpty, startsWith } from "lodash-es";
2 | import { ClassValue, clsx } from "clsx";
3 | import { twMerge } from "tailwind-merge";
4 |
5 | /**
6 | * Check the passed value and converts it to valid css property value
7 | * @param value
8 | */
9 | export function getBgImageValue(value: string) {
10 | if (isEmpty(value)) return "";
11 | return startsWith(value, "http") ? `url('${value}')` : value.replace(";", "");
12 | }
13 |
14 | /**
15 | * Get the unique uuid
16 | */
17 | export function generateUUID(length: number = 6, chars = "abcdefghijklmnopqrstuvwxyzABCD"): string {
18 | let result = "";
19 | for (let i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
20 | return result;
21 | }
22 |
23 | export const getBreakpointValue = (width: number) =>
24 | width >= 1536
25 | ? "2XL"
26 | : width >= 1280
27 | ? "XL"
28 | : width >= 1024
29 | ? "LG"
30 | : width >= 768
31 | ? "MD"
32 | : width >= 640
33 | ? "SM"
34 | : "XS";
35 |
36 | export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
37 |
--------------------------------------------------------------------------------
/src/core/functions/convert-brbitrary-to-tailwind-class-data.ts:
--------------------------------------------------------------------------------
1 | export const nonArbitraryClasses = {
2 | "": "",
3 | "z-50": "z-50",
4 | "z-0": "z-0",
5 | "top-0": "top-0",
6 | "-top-0": "-top-0",
7 | };
8 | export const zIndex = {
9 | "z-[10]": "z-10",
10 | "z-[150]": "z-[150]",
11 | "-z-[200]": "-z-[200]",
12 | "-z-[40]": "-z-40",
13 | };
14 | export const position = {
15 | "top-[0px]": "top-0",
16 | "top-[4px]": "top-1",
17 | "top-[40px]": "top-10",
18 | "top-[160px]": "top-40",
19 | "top-[2rem]": "top-8",
20 | "top-[1.5rem]": "top-6",
21 | "top-[2px]": "top-0.5",
22 | "-top-[16px]": "-top-4",
23 | "top-[1.75rem]": "top-7",
24 | "left-[20px]": "left-5",
25 | "right-[4rem]": "right-16",
26 | "-right-[3rem]": "-right-12",
27 | "inset-[0px]": "inset-0",
28 | "inset-[1px]": "inset-px",
29 | "inset-x-[12px]": "inset-x-3",
30 | "inset-y-[12px]": "inset-y-3",
31 | "-top-[1px]": "-top-px",
32 | "top-[33px]": "top-[33px]",
33 | "top-[3.8rem]": "top-[3.8rem]",
34 | "top-[50%]": "top-1/2",
35 | "top-[80%]": "top-4/5",
36 | "inset-[60%]": "inset-3/5",
37 | "left-[100%]": "left-full",
38 | };
39 | export const opacity = {
40 | "opacity-[0.5]": "opacity-50",
41 | "opacity-[0.75]": "opacity-75",
42 | "opacity-[1]": "opacity-100",
43 | "opacity-[0.35]": "opacity-[0.35]",
44 | "opacity-[0.05]": "opacity-5",
45 | };
46 | export const gap = {
47 | "gap-[1px]": "gap-px",
48 | "gap-[2rem]": "gap-8",
49 | "gap-x-[3rem]": "gap-x-12",
50 | "gap-y-[24px]": "gap-y-6",
51 | };
52 | export const padding = {
53 | "p-[44px]": "p-11",
54 | "p-[100%]": "p-full",
55 | "px-[32px]": "px-8",
56 | "px-[64px]": "px-16",
57 | "py-[40px]": "py-10",
58 | };
59 |
--------------------------------------------------------------------------------
/src/core/functions/get-user-input-values.ts:
--------------------------------------------------------------------------------
1 | import { isEmpty } from "lodash-es";
2 |
3 | export const getUserInputValues = (
4 | input: string,
5 | allowedUnits: string[],
6 | ): { error: string } | { unit: string; value: string } => {
7 | // eslint-disable-next-line no-param-reassign
8 | input = input.toLowerCase();
9 | let sanitizedInput = input.trim().replace(/ |\+/g, "");
10 |
11 | if ((sanitizedInput === "auto" || sanitizedInput === "none") && allowedUnits.includes(sanitizedInput)) {
12 | return { value: "", unit: sanitizedInput };
13 | }
14 |
15 | const expression = allowedUnits.length ? new RegExp(allowedUnits.join("|"), "g") : /XXXXXX/g;
16 | sanitizedInput = sanitizedInput.replace(expression, "");
17 |
18 | const unit = input.match(expression);
19 |
20 | const hasMoreUnits = unit && unit.length > 1;
21 | const isNotNumber = !isEmpty(sanitizedInput) && Number.isNaN(Number(sanitizedInput));
22 |
23 | if (hasMoreUnits || isNotNumber) {
24 | return { error: "Invalid value" };
25 | }
26 |
27 | if (unit && (unit[0] === "auto" || unit[0] === "none")) {
28 | return { value: unit[0], unit: "" };
29 | }
30 |
31 | return { value: sanitizedInput, unit: unit ? unit[0] : "" };
32 | };
33 |
--------------------------------------------------------------------------------
/src/core/functions/is-visible-at-breakpoint.ts:
--------------------------------------------------------------------------------
1 | type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
2 |
3 | /**
4 | * Checks if a given class string is visible at a given breakpoint
5 | * important: The default assumption is that the block is hidden
6 | * @param classes
7 | * @param breakpoint
8 | */
9 | const isVisibleAtBreakpoint = (classes: string, breakpoint: Breakpoint): boolean => {
10 | const breakpoints: Breakpoint[] = ["xs", "sm", "md", "lg", "xl", "2xl"];
11 | const breakpointIndex = breakpoints.indexOf(breakpoint);
12 |
13 | const classArray = classes.split(" ");
14 |
15 | // Initialize all breakpoints as hidden
16 | let visibilityState = new Array(breakpoints.length).fill(false);
17 |
18 | for (const cls of classArray) {
19 | let [prefix, baseClass] = cls.split(":");
20 |
21 | if (!baseClass) {
22 | baseClass = prefix;
23 | prefix = "xs"; // No prefix means it applies from the smallest breakpoint
24 | }
25 |
26 | const classBreakpointIndex = breakpoints.indexOf(prefix as Breakpoint);
27 |
28 | if (classBreakpointIndex <= breakpointIndex) {
29 | const visibilityClasses = ["block", "flex", "inline", "inline-block", "inline-flex", "grid", "table"];
30 | const hiddenClasses = ["hidden"];
31 |
32 | if (visibilityClasses.includes(baseClass)) {
33 | for (let i = classBreakpointIndex; i < breakpoints.length; i++) {
34 | visibilityState[i] = true;
35 | }
36 | } else if (hiddenClasses.includes(baseClass)) {
37 | for (let i = classBreakpointIndex; i < breakpoints.length; i++) {
38 | visibilityState[i] = false;
39 | }
40 | }
41 | // Classes that don't affect visibility are ignored
42 | }
43 | }
44 |
45 | // Return the visibility state for the current breakpoint
46 | return visibilityState[breakpointIndex];
47 | };
48 |
49 | export { isVisibleAtBreakpoint };
50 |
--------------------------------------------------------------------------------
/src/core/functions/logging.ts:
--------------------------------------------------------------------------------
1 | let DEBUG_LOGS: boolean = false;
2 |
3 | export const setDebugLogs = (value: boolean) => {
4 | DEBUG_LOGS = value;
5 | };
6 |
7 | export const debugLog = (...args: any) => {
8 | if (DEBUG_LOGS) {
9 | console.log(...args);
10 | }
11 | };
12 | export const debugWarn = (...args: any) => {
13 | if (DEBUG_LOGS) {
14 | console.warn(...args);
15 | }
16 | };
17 |
18 | export const debugInfo = (...args: any) => {
19 | if (DEBUG_LOGS) {
20 | console.info(...args);
21 | }
22 | };
23 |
24 | export const debugError = (...args: any) => {
25 | if (DEBUG_LOGS) {
26 | console.error(...args);
27 | }
28 | };
29 |
--------------------------------------------------------------------------------
/src/core/functions/order-classes-by-breakpoint.ts:
--------------------------------------------------------------------------------
1 | import { constructClassObject } from "@/core/functions/class-fn";
2 |
3 | export function orderClassesByBreakpoint(classes: string): string {
4 | //sanitize the classes
5 | classes = classes.replace(/\s+/g, " ");
6 | const classesArray = classes.split(" ").map(constructClassObject);
7 | const breakpointOrder = ["xs", "sm", "md", "lg", "xl", "2xl"];
8 | return classesArray
9 | .sort((a, b) => {
10 | return breakpointOrder.indexOf(a.mq) - breakpointOrder.indexOf(b.mq);
11 | })
12 | .map((cls) => cls.fullCls)
13 | .join(" ");
14 | }
15 |
16 | if (import.meta.vitest) {
17 | test("orderClassesByBreakpoint", () => {
18 | expect(orderClassesByBreakpoint("bg-red-400 sm:bg-red-500")).toBe("bg-red-400 sm:bg-red-500");
19 | expect(orderClassesByBreakpoint("bg-red-400 sm:bg-red-500 md:bg-red-600")).toBe(
20 | "bg-red-400 sm:bg-red-500 md:bg-red-600",
21 | );
22 | expect(orderClassesByBreakpoint("xl:sticky block sm:absolute")).toBe("block sm:absolute xl:sticky");
23 | expect(orderClassesByBreakpoint("sm:bg-red-500 bg-red-400")).toBe("bg-red-400 sm:bg-red-500");
24 | expect(orderClassesByBreakpoint("sm:w-[30%] w-[30%]")).toBe("w-[30%] sm:w-[30%]");
25 | expect(orderClassesByBreakpoint("text-[30px] sm:text-[20px]")).toBe("text-[30px] sm:text-[20px]");
26 | });
27 | }
28 |
--------------------------------------------------------------------------------
/src/core/functions/sanitize-classes.test.ts:
--------------------------------------------------------------------------------
1 | import { sanitizeClasses } from "@/core/functions/SanitizeClasses";
2 |
3 | describe("Sanitize classes string", () => {
4 | test("sanitizeClasses", () => {
5 | expect(sanitizeClasses("")).toBe("");
6 | expect(sanitizeClasses("flex")).toBe("flex");
7 | expect(sanitizeClasses("flex xl:block")).toBe("flex xl:block");
8 | expect(sanitizeClasses("flex sm:block")).toBe("flex sm:block");
9 | expect(sanitizeClasses("flex sm:flex")).toBe("flex");
10 | expect(sanitizeClasses("flex sm:flex md:flex")).toBe("flex");
11 | expect(sanitizeClasses("flex sm:block md:flex")).toBe("flex sm:block md:flex");
12 | expect(sanitizeClasses("flex sm:block md:flex 2xl:flex")).toBe("flex sm:block md:flex");
13 | expect(sanitizeClasses("flex 2xl:flex")).toBe("flex");
14 | expect(sanitizeClasses("w-1/2 xl:w-full")).toBe("w-1/2 xl:w-full");
15 | expect(sanitizeClasses("w-1/2 lg:w-full xl:w-full")).toBe("w-1/2 lg:w-full");
16 | expect(sanitizeClasses("w-1/2 lg:flex xl:w-1/2")).toBe("w-1/2 lg:flex");
17 | // extra spaces
18 | expect(sanitizeClasses("w-1/2 lg:flex xl:w-1/2")).toBe("w-1/2 lg:flex");
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/src/core/functions/split-blocks.ts:
--------------------------------------------------------------------------------
1 | import { convertToBlocksTree } from "@/core/functions/blocks-fn";
2 | import { ChaiBlock } from "@/types/chai-block";
3 |
4 | export function getBlocksTree(blocks: Partial[]) {
5 | return convertToBlocksTree(blocks);
6 | }
7 |
--------------------------------------------------------------------------------
/src/core/functions/wrapInsideContainer.ts:
--------------------------------------------------------------------------------
1 | import { ChaiBlock } from "@/types/chai-block";
2 | import { getDefaultBlockProps } from "@chaibuilder/runtime";
3 |
4 | export const wrapInsideContainer = (container: ChaiBlock | "Body" | "Html") => {
5 | return container ? container : { ...getDefaultBlockProps(container as string), _id: "container", _type: container };
6 | };
7 |
--------------------------------------------------------------------------------
/src/core/hooks/hooks.ts:
--------------------------------------------------------------------------------
1 | export * from "@/core/hooks";
2 |
--------------------------------------------------------------------------------
/src/core/hooks/use-all-data-providers.ts:
--------------------------------------------------------------------------------
1 | import { useMemo } from "react";
2 |
3 | export const useAllDataProviders = () => {
4 | return useMemo(() => [], []);
5 | };
6 |
--------------------------------------------------------------------------------
/src/core/hooks/use-block-highlight.ts:
--------------------------------------------------------------------------------
1 | import { canvasIframeAtom } from "@/core/atoms/ui";
2 | import { useAtom } from "jotai";
3 | import { useCallback, useMemo } from "react";
4 |
5 | //module-level variable to track the last highlighted block
6 | let lastHighlighted: HTMLElement | null = null;
7 |
8 | export const useBlockHighlight = () => {
9 | const [iframe] = useAtom(canvasIframeAtom);
10 | const innerDoc = useMemo(() => iframe?.contentDocument || iframe?.contentWindow?.document, [iframe]);
11 | const highlightBlock = useCallback(
12 | (elementOrID: HTMLElement | string) => {
13 | if (!innerDoc) return;
14 | if (lastHighlighted) {
15 | // Remove highlight from previous block
16 | lastHighlighted.removeAttribute("data-highlighted");
17 | }
18 | // Find and highlight new bloc
19 | if (typeof elementOrID !== "string") {
20 | elementOrID.setAttribute("data-highlighted", "true");
21 | lastHighlighted = elementOrID;
22 | } else if (typeof elementOrID === "string") {
23 | const element = innerDoc.querySelector(`[data-block-id="${elementOrID}"]`) as HTMLElement;
24 | if (element) {
25 | element.setAttribute("data-highlighted", "true");
26 | lastHighlighted = element;
27 | }
28 | } else {
29 | lastHighlighted = null;
30 | }
31 | },
32 | [innerDoc],
33 | );
34 |
35 | const clearHighlight = useCallback(() => {
36 | if (lastHighlighted) {
37 | lastHighlighted.removeAttribute("data-highlighted");
38 | lastHighlighted = null;
39 | }
40 | }, []);
41 |
42 | return { highlightBlock, clearHighlight, lastHighlighted };
43 | };
44 |
--------------------------------------------------------------------------------
/src/core/hooks/use-branding-options.ts:
--------------------------------------------------------------------------------
1 | import { BRANDING_OPTIONS_DEFAULTS } from "@/core/constants/MODIFIERS";
2 | import { ChaiBlock } from "@/types/chai-block";
3 | import { atom, useAtom } from "jotai";
4 | import { isObject } from "lodash-es";
5 |
6 | type BrandingOptions = {
7 | bodyBgDarkColor: string;
8 | bodyBgLightColor: string;
9 | bodyFont: string;
10 | bodyTextDarkColor: string;
11 | bodyTextLightColor: string;
12 | headingFont: string;
13 | primaryColor: string;
14 | roundedCorners: number;
15 | secondaryColor: string;
16 | } & Record;
17 |
18 | export const brandingOptionsAtom = atom(BRANDING_OPTIONS_DEFAULTS as BrandingOptions);
19 | export const blocksContainerAtom = atom(null);
20 | /**
21 | * Wrapper around useAtom
22 | */
23 | export const useBrandingOptions = () => {
24 | const [brandingOptions, setBrandingOptions] = useAtom(brandingOptionsAtom);
25 | return [
26 | isObject(brandingOptions) ? { ...BRANDING_OPTIONS_DEFAULTS, ...brandingOptions } : BRANDING_OPTIONS_DEFAULTS,
27 | setBrandingOptions,
28 | ] as const;
29 | };
30 |
31 | export const useBlocksContainer = () => {
32 | return useAtom(blocksContainerAtom);
33 | };
34 |
--------------------------------------------------------------------------------
/src/core/hooks/use-broadcast-channel.ts:
--------------------------------------------------------------------------------
1 | import { useBlocksStoreManager } from "@/core/history/use-blocks-store-manager";
2 | import { useBlocksStore, useBuilderProp } from "@/core/hooks";
3 | import { useDebouncedCallback } from "@react-hookz/web";
4 | import { useEffect } from "react";
5 |
6 | const broadcastChannel = new BroadcastChannel("chaibuilder");
7 | export const useBroadcastChannel = () => {
8 | const pageId = useBuilderProp("pageId", "chaibuilder_page");
9 | const postMessage = useDebouncedCallback(
10 | (message: any) => broadcastChannel.postMessage({ ...message, pageId }),
11 | [pageId],
12 | 200,
13 | );
14 |
15 | return { postMessage };
16 | };
17 |
18 | export const useUnmountBroadcastChannel = () => {
19 | const [, setBlocks] = useBlocksStore();
20 | const pageId = useBuilderProp("pageId", "chaibuilder_page");
21 | const { updateBlocksProps } = useBlocksStoreManager();
22 | useEffect(() => {
23 | broadcastChannel.onmessageerror = (event) => {
24 | console.log("error", event);
25 | };
26 | broadcastChannel.onmessage = (event) => {
27 | if (event.data.type === "blocks-updated" && event.data.pageId === pageId) {
28 | setBlocks(event.data.blocks);
29 | }
30 | if (event.data.type === "blocks-props-updated" && event.data.pageId === pageId) {
31 | updateBlocksProps(event.data.blocks);
32 | }
33 | };
34 | return () => {
35 | broadcastChannel.onmessage = null;
36 | broadcastChannel.onmessageerror = null;
37 | //broadcastChannel.close();
38 | };
39 | }, [setBlocks, pageId]);
40 | };
41 |
--------------------------------------------------------------------------------
/src/core/hooks/use-builder-prop.ts:
--------------------------------------------------------------------------------
1 | import { chaiBuilderPropsAtom } from "@/core/atoms/builder";
2 | import { ChaiBuilderEditorProps } from "@/types/chaibuilder-editor-props";
3 | import { useAtomValue } from "jotai";
4 | import { get } from "lodash-es";
5 | import { useMemo } from "react";
6 |
7 | type ExcludedBuilderProps = "blocks" | "subPages" | "brandingOptions" | "dataProviders";
8 |
9 | export const useBuilderProp = (
10 | propKey: keyof Omit | "languages",
11 | defaultValue: T = undefined,
12 | ): T => {
13 | const builderProps = useAtomValue(chaiBuilderPropsAtom);
14 | return useMemo(() => get(builderProps, propKey, defaultValue), [builderProps, propKey, defaultValue]);
15 | };
16 |
--------------------------------------------------------------------------------
/src/core/hooks/use-builder-reset.ts:
--------------------------------------------------------------------------------
1 | import { useBlockRepeaterDataAtom } from "@/core/async-props/use-async-props";
2 | import { aiAssistantActiveAtom } from "@/core/atoms/ui";
3 | import { useUndoManager } from "@/core/history/use-undo-manager";
4 | import { useBlockHighlight } from "@/core/hooks/use-block-highlight";
5 | import { usePartialBlocksStore } from "@/core/hooks/use-partial-blocks-store";
6 | import { useSavePage } from "@/core/hooks/use-save-page";
7 | import { useSelectedBlockIds } from "@/core/hooks/use-selected-blockIds";
8 | import { useSelectedStylingBlocks } from "@/core/hooks/use-selected-styling-blocks";
9 | import { useAtom } from "jotai";
10 |
11 | export const useBuilderReset = () => {
12 | const { clear } = useUndoManager();
13 | const [, setSelectedIds] = useSelectedBlockIds();
14 | const { clearHighlight } = useBlockHighlight();
15 | const [, setStylingHighlighted] = useSelectedStylingBlocks();
16 | const [, setAiAssistantActive] = useAtom(aiAssistantActiveAtom);
17 | const { reset: resetPartialBlocks } = usePartialBlocksStore();
18 | const { setSaveState } = useSavePage();
19 | const [, setBlockRepeaterDataAtom] = useBlockRepeaterDataAtom();
20 |
21 | return () => {
22 | setBlockRepeaterDataAtom({});
23 | setSelectedIds([]);
24 | setStylingHighlighted([]);
25 | clearHighlight();
26 | clear();
27 | setAiAssistantActive(false);
28 | resetPartialBlocks();
29 | setSaveState("SAVED");
30 | };
31 | };
32 |
--------------------------------------------------------------------------------
/src/core/hooks/use-canvas-settings.ts:
--------------------------------------------------------------------------------
1 | import { canvasSettingsAtom } from "@/core/atoms/ui";
2 | import { useAtom } from "jotai";
3 |
4 | export const useCanvasSettings = () => {
5 | return useAtom(canvasSettingsAtom);
6 | };
7 |
--------------------------------------------------------------------------------
/src/core/hooks/use-canvas-zoom.ts:
--------------------------------------------------------------------------------
1 | import { atomWithStorage } from "jotai/utils";
2 | import { useAtom } from "jotai";
3 |
4 | export const canvasZoomAtom = atomWithStorage("canvasZoom", 100);
5 |
6 | /**
7 | * Wrapper hook around useAtom
8 | */
9 | export const useCanvasZoom = () => useAtom(canvasZoomAtom);
10 |
--------------------------------------------------------------------------------
/src/core/hooks/use-code-editor.ts:
--------------------------------------------------------------------------------
1 | import { atom, useAtom } from "jotai";
2 |
3 | type CodeEditorProps = {
4 | blockId: string;
5 | blockProp: string;
6 | initialCode: string;
7 | placeholder?: string;
8 | };
9 |
10 | const codeEditorAtom = atom(null);
11 |
12 | /**
13 | * Custom hook to access the current state of the code editor.
14 | * @category Hooks
15 | * @returns The current state of the code editor from the `codeEditorAtom`.
16 | */
17 | export const useCodeEditor = () => {
18 | return useAtom(codeEditorAtom);
19 | };
20 |
--------------------------------------------------------------------------------
/src/core/hooks/use-copy-to-clipboard.ts:
--------------------------------------------------------------------------------
1 | import { useCallback, useState } from "react";
2 |
3 | type CopiedValue = string | null;
4 |
5 | type CopyFn = (text: string) => Promise;
6 |
7 | export const useCopyToClipboard = (): [CopiedValue, CopyFn] => {
8 | const [copiedText, setCopiedText] = useState(null);
9 |
10 | const copy: CopyFn = useCallback(async (text) => {
11 | if (!navigator?.clipboard) {
12 | console.warn("Clipboard not supported");
13 | return false;
14 | }
15 |
16 | // Try to save to clipboard then save it in the state if worked
17 | try {
18 | await navigator.clipboard.writeText(text);
19 | setCopiedText(text);
20 | return true;
21 | } catch (error) {
22 | console.warn("Copy failed", error);
23 | setCopiedText(null);
24 | return false;
25 | }
26 | }, []);
27 |
28 | return [copiedText, copy];
29 | };
30 |
--------------------------------------------------------------------------------
/src/core/hooks/use-current-page.ts:
--------------------------------------------------------------------------------
1 | import { atom, useAtomValue } from "jotai";
2 |
3 | export const currentPageAtom: any = atom(null);
4 |
5 | export const useCurrentPage = () => {
6 | const currentPage = useAtomValue(currentPageAtom);
7 | return { currentPage };
8 | };
9 |
--------------------------------------------------------------------------------
/src/core/hooks/use-cut-blockIds.ts:
--------------------------------------------------------------------------------
1 | import { copiedBlockIdsAtom } from "@/core/hooks/use-copy-blockIds";
2 | import { atom, useAtom, useSetAtom } from "jotai";
3 | import { useCallback } from "react";
4 |
5 | export const cutBlockIdsAtom: any = atom>([]);
6 |
7 | export const useCutBlockIds = (): [Array, Function] => {
8 | const [ids, setIds] = useAtom(cutBlockIdsAtom);
9 | const resetCopyIds = useSetAtom(copiedBlockIdsAtom);
10 |
11 | const setCutBlockIds = useCallback(
12 | (blockIds: Array) => {
13 | setIds(blockIds);
14 | resetCopyIds([]);
15 | },
16 | [setIds, resetCopyIds],
17 | );
18 |
19 | return [ids as string[], setCutBlockIds];
20 | };
21 |
--------------------------------------------------------------------------------
/src/core/hooks/use-dark-mode.ts:
--------------------------------------------------------------------------------
1 | import { useAtom } from "jotai";
2 | import { atomWithStorage } from "jotai/utils";
3 |
4 | export const darkModeAtom = atomWithStorage("darkMode", false);
5 |
6 | /**
7 | * Wrapper hook around useAtom
8 | */
9 | export const useDarkMode = (): [boolean, Function] => {
10 | const [darkMode, setDarkMode] = useAtom(darkModeAtom);
11 | return [darkMode, setDarkMode];
12 | };
13 |
--------------------------------------------------------------------------------
/src/core/hooks/use-duplicate-blocks.ts:
--------------------------------------------------------------------------------
1 | import { getDuplicatedBlocks } from "@/core/functions/blocks-fn";
2 | import { useBlocksStore, useBlocksStoreUndoableActions } from "@/core/history/use-blocks-store-undoable-actions";
3 | import { useSelectedBlockIds } from "@/core/hooks/use-selected-blockIds";
4 | import { ChaiBlock } from "@/types/chai-block";
5 | import { each, filter, get, isString } from "lodash-es";
6 | import { useCallback } from "react";
7 |
8 | /**
9 | * useDuplicateBlock
10 | */
11 | export const useDuplicateBlocks = (): Function => {
12 | const [presentBlocks] = useBlocksStore();
13 | const [, setSelected] = useSelectedBlockIds();
14 | const { addBlocks } = useBlocksStoreUndoableActions();
15 |
16 | return useCallback(
17 | (blockIds: string[], parentId: string | null = null) => {
18 | const newBlockIds: string[] = [];
19 | each(blockIds, (blockId: string) => {
20 | const block = presentBlocks.find((block) => block._id === blockId);
21 | if (!parentId) {
22 | // use the parent of the same block. Can be a falsy value. null undefined etc.
23 | parentId = block._parent;
24 | } else if (parentId === "root") {
25 | parentId = null;
26 | }
27 | // get sibling blocks
28 | const siblingBlocks = filter(presentBlocks, (_block: ChaiBlock) =>
29 | isString(parentId) ? _block._parent === parentId : !_block._parent,
30 | );
31 | const blockPosition = siblingBlocks.indexOf(block);
32 | const newBlockPosition = blockPosition + 1;
33 | const newBlocks = getDuplicatedBlocks(presentBlocks, blockId, parentId);
34 | addBlocks(newBlocks, parentId, newBlockPosition);
35 | newBlockIds.push(get(newBlocks, "0._id", ""));
36 | });
37 | setSelected(newBlockIds);
38 | },
39 | [presentBlocks, setSelected],
40 | );
41 | };
42 |
--------------------------------------------------------------------------------
/src/core/hooks/use-expand-tree.ts:
--------------------------------------------------------------------------------
1 | import { presentBlocksAtom } from "@/core/atoms/blocks";
2 | import { useSelectedBlockIds } from "@/core/hooks/use-selected-blockIds";
3 | import { ChaiBlock } from "@/types/chai-block";
4 | import { atom, useAtom, useAtomValue } from "jotai";
5 | import { find, first, flatten, get, isEmpty, isString } from "lodash-es";
6 | import { useEffect } from "react";
7 |
8 | /**
9 | * Traverse the components array to find all the parent nodes
10 | * of the given component
11 | * @param blocks
12 | * @param id
13 | * @returns {unknown[]}
14 | */
15 | const getParentNodeIds = (blocks: ChaiBlock[], id: string | null | undefined): string[] => {
16 | const ids: string[] = [];
17 | let block = find(blocks, { _id: id }) as ChaiBlock;
18 | let parent: string | undefined | null = get(block, "_parent", "");
19 | while (isString(parent) && !isEmpty(parent)) {
20 | ids.push(block?._parent as string);
21 | block = find(blocks, { _id: parent }) as ChaiBlock;
22 | parent = block?._parent;
23 | }
24 | return flatten(ids);
25 | };
26 | export const expandedIdsAtom = atom([]);
27 |
28 | export const useExpandTree = () => {
29 | const [ids] = useSelectedBlockIds();
30 | const pageBlocks = useAtomValue(presentBlocksAtom);
31 | const [, setExpandedIds] = useAtom(expandedIdsAtom);
32 | useEffect(() => {
33 | let expandedIds: string[] = [];
34 | const id = first(ids);
35 | if (isString(id)) {
36 | expandedIds = [id, ...getParentNodeIds(pageBlocks, id)];
37 | }
38 | setExpandedIds(expandedIds);
39 | }, [ids, pageBlocks, setExpandedIds]);
40 | };
41 |
--------------------------------------------------------------------------------
/src/core/hooks/use-get-page-data.ts:
--------------------------------------------------------------------------------
1 | import { useBlocksStore } from "@/core/history/use-blocks-store-undoable-actions";
2 | import { useBrandingOptions } from "@/core/hooks/use-branding-options";
3 | import { useCurrentPage } from "@/core/hooks/use-current-page";
4 | import { ChaiBlock } from "@/types/chai-block";
5 | import { getRegisteredChaiBlock } from "@chaibuilder/runtime";
6 | import { compact, get, map, memoize, omit } from "lodash-es";
7 | import { useCallback } from "react";
8 |
9 | /**
10 | * Get the builder props for a block
11 | * @param type - The type of the block
12 | * @returns The builder props for the block
13 | */
14 | const getBlockBuilderProps = memoize((type: string) => {
15 | const registeredBlock = getRegisteredChaiBlock(type);
16 | const props = get(registeredBlock, "schema.properties", {});
17 | return compact(
18 | Object.keys(props).map((key) => {
19 | return get(props[key], "builderProp", false) || get(props[key], "runtime", false) ? key : null;
20 | }),
21 | );
22 | });
23 |
24 | export const useGetPageData = () => {
25 | const [projectOptions] = useBrandingOptions();
26 | const { currentPage } = useCurrentPage();
27 | const [presentBlocks] = useBlocksStore();
28 |
29 | return useCallback(() => {
30 | // omit the builder props from the blocks as they are not needed for the page data
31 | // and only used inside the builder
32 | const blocks = map(presentBlocks, (block: ChaiBlock) => {
33 | return omit(block, getBlockBuilderProps(block._type));
34 | });
35 | return {
36 | currentPage,
37 | blocks,
38 | };
39 | }, [projectOptions, currentPage, presentBlocks]);
40 | };
41 |
--------------------------------------------------------------------------------
/src/core/hooks/use-hidden-blocks.ts:
--------------------------------------------------------------------------------
1 | import { atom, useAtom } from "jotai";
2 | import { includes, without } from "lodash-es";
3 | import { useCallback } from "react";
4 |
5 | const hiddenBlockIdsAtom = atom>([]);
6 |
7 | export const useHiddenBlockIds = () => {
8 | const [blockIds, setBlockIds] = useAtom(hiddenBlockIdsAtom);
9 |
10 | const toggleHidden = useCallback(
11 | (blockId: string) => {
12 | setBlockIds((prevIds) => (includes(prevIds, blockId) ? without(prevIds, blockId) : [...prevIds, blockId]));
13 | },
14 | [setBlockIds],
15 | );
16 |
17 | return [blockIds, setBlockIds, toggleHidden] as const;
18 | };
19 |
--------------------------------------------------------------------------------
/src/core/hooks/use-highlight-blockId.ts:
--------------------------------------------------------------------------------
1 | import { atom, useAtom } from "jotai";
2 |
3 | const highlightBlockIdAtom = atom("");
4 |
5 | /**
6 | *
7 | */
8 | export const useHighlightBlockId = (): [string, Function] => useAtom(highlightBlockIdAtom);
9 |
--------------------------------------------------------------------------------
/src/core/hooks/use-inline-editing.ts:
--------------------------------------------------------------------------------
1 | import { atom } from "jotai";
2 | import { useAtom } from "jotai";
3 |
4 | const inlineEditingActiveAtom = atom("");
5 | inlineEditingActiveAtom.debugLabel = "inlineEditingActiveAtom";
6 |
7 | const inlineEditingItemIndexAtom = atom(0);
8 | inlineEditingItemIndexAtom.debugLabel = "inlineEditingItemIndexAtom";
9 |
10 | export const useInlineEditing = () => {
11 | const [editingBlockId, setEditingBlockId] = useAtom(inlineEditingActiveAtom);
12 | const [editingItemIndex, setEditingItemIndex] = useAtom(inlineEditingItemIndexAtom);
13 |
14 | return {
15 | editingBlockId,
16 | editingItemIndex,
17 | setEditingBlockId,
18 | setEditingItemIndex,
19 | };
20 | };
21 |
--------------------------------------------------------------------------------
/src/core/hooks/use-languages.ts:
--------------------------------------------------------------------------------
1 | import { useBuilderProp } from "@/core/hooks/use-builder-prop";
2 | import { atom, useAtom } from "jotai";
3 |
4 | const languageAtom = atom("");
5 | languageAtom.debugLabel = "selectedLanguageAtom";
6 |
7 | export const useLanguages = () => {
8 | const languages = useBuilderProp("languages", []);
9 | const fallbackLang = useBuilderProp("fallbackLang", "en");
10 | const [selectedLang, _setSelectedLang] = useAtom(languageAtom);
11 |
12 | const setSelectedLang = (lang: string) => {
13 | _setSelectedLang(fallbackLang === lang ? "" : lang);
14 | };
15 |
16 | return {
17 | languages: languages?.filter((_lang) => _lang !== fallbackLang),
18 | fallbackLang,
19 | selectedLang,
20 | setSelectedLang,
21 | };
22 | };
23 |
--------------------------------------------------------------------------------
/src/core/hooks/use-library-blocks.tsx:
--------------------------------------------------------------------------------
1 | import { ChaiLibrary, ChaiLibraryBlock } from "@/types/chaibuilder-editor-props";
2 | import { atom, useAtom } from "jotai";
3 | import { get } from "lodash-es";
4 | import { useCallback, useEffect, useMemo, useRef } from "react";
5 |
6 | const libraryBlocksAtom = atom<{ [uuid: string]: { loading: "idle" | "loading" | "complete"; blocks: any[] | null } }>(
7 | {},
8 | );
9 | export const useLibraryBlocks = (library?: Partial & { id: string }) => {
10 | const [libraryBlocks, setLibraryBlocks] = useAtom(libraryBlocksAtom);
11 | const getBlocks = useMemo(() => library?.getBlocksList || (() => []), [library]);
12 | const blocks = get(libraryBlocks, `${library?.id}.blocks`, null);
13 | const state = get(libraryBlocks, `${library?.id}.loading`, "idle");
14 | const loadingRef = useRef("idle");
15 |
16 | useEffect(() => {
17 | (async () => {
18 | if (state === "complete" || loadingRef.current === "loading") return;
19 | loadingRef.current = "loading";
20 | setLibraryBlocks((prev) => ({ ...prev, [library?.id]: { loading: "loading", blocks: [] } }));
21 | try {
22 | const libraryBlocks: ChaiLibraryBlock[] = await getBlocks(library);
23 | loadingRef.current = "idle";
24 | setLibraryBlocks((prev) => ({ ...prev, [library?.id]: { loading: "complete", blocks: libraryBlocks || [] } }));
25 | } catch (error) {
26 | loadingRef.current = "idle";
27 | setLibraryBlocks((prev) => ({ ...prev, [library?.id]: { loading: "complete", blocks: [] } }));
28 | }
29 | })();
30 | }, [library, blocks, state, loadingRef, setLibraryBlocks, getBlocks]);
31 |
32 | const resetLibrary = useCallback(
33 | (libraryId: string) => {
34 | setLibraryBlocks((prev) => ({ ...prev, [libraryId]: { loading: "idle", blocks: [] } }));
35 | },
36 | [setLibraryBlocks],
37 | );
38 |
39 | return { data: blocks || [], isLoading: state === "loading", resetLibrary };
40 | };
41 |
--------------------------------------------------------------------------------
/src/core/hooks/use-permissions.ts:
--------------------------------------------------------------------------------
1 | import { useBuilderProp } from "@/core/hooks/use-builder-prop";
2 | import { useCallback } from "react";
3 |
4 | export const usePermissions = () => {
5 | const permissions = useBuilderProp("permissions", undefined);
6 | const hasPermission = useCallback(
7 | (permission: string) => {
8 | if (!permissions) return true;
9 | return permissions.includes(permission);
10 | },
11 | [permissions],
12 | );
13 |
14 | return { hasPermission };
15 | };
16 |
--------------------------------------------------------------------------------
/src/core/hooks/use-preview-mode.ts:
--------------------------------------------------------------------------------
1 | import { atom, useAtom } from "jotai";
2 |
3 | const previewModeAtom = atom(false);
4 |
5 | /**
6 | *
7 | */
8 | export const usePreviewMode = (): [boolean, Function] => {
9 | const [previewMode, setPreviewMode] = useAtom(previewModeAtom);
10 | return [previewMode, setPreviewMode];
11 | };
12 |
--------------------------------------------------------------------------------
/src/core/hooks/use-pub-sub.ts:
--------------------------------------------------------------------------------
1 | import { pubsub } from "@/core/pubsub";
2 | import { useEffect } from "react";
3 |
4 | export function usePubSub(eventName: string, callback: (data?: T) => void) {
5 | useEffect(() => {
6 | const unsubscribe = pubsub.subscribe(eventName, callback);
7 | return () => unsubscribe();
8 | }, [eventName, callback]);
9 | }
10 |
--------------------------------------------------------------------------------
/src/core/hooks/use-save-page.ts:
--------------------------------------------------------------------------------
1 | import { useBuilderProp } from "@/core/hooks/use-builder-prop";
2 | import { useGetPageData } from "@/core/hooks/use-get-page-data";
3 | import { usePermissions } from "@/core/hooks/use-permissions";
4 | import { useTheme } from "@/core/hooks/use-theme";
5 | import { useThrottledCallback } from "@react-hookz/web";
6 | import { atom, useAtom } from "jotai";
7 | import { noop } from "lodash-es";
8 | export const builderSaveStateAtom = atom<"SAVED" | "SAVING" | "UNSAVED">("SAVED"); // SAVING
9 | builderSaveStateAtom.debugLabel = "builderSaveStateAtom";
10 |
11 | export const useSavePage = () => {
12 | const [saveState, setSaveState] = useAtom(builderSaveStateAtom);
13 | const onSave = useBuilderProp("onSave", async (_args) => {});
14 | const onSaveStateChange = useBuilderProp("onSaveStateChange", noop);
15 | const getPageData = useGetPageData();
16 | const [theme] = useTheme();
17 | const { hasPermission } = usePermissions();
18 |
19 | const savePage = useThrottledCallback(
20 | async (autoSave: boolean = false) => {
21 | if (!hasPermission("save_page")) {
22 | return;
23 | }
24 | setSaveState("SAVING");
25 | onSaveStateChange("SAVING");
26 | const pageData = getPageData();
27 | await onSave({
28 | autoSave,
29 | blocks: pageData.blocks,
30 | theme,
31 | });
32 | setTimeout(() => {
33 | setSaveState("SAVED");
34 | onSaveStateChange("SAVED");
35 | }, 100);
36 | return true;
37 | },
38 | [getPageData, setSaveState, theme, onSave, onSaveStateChange],
39 | 3000, // save only every 5 seconds
40 | );
41 |
42 | return { savePage, saveState, setSaveState };
43 | };
44 |
--------------------------------------------------------------------------------
/src/core/hooks/use-screen-size-width.ts:
--------------------------------------------------------------------------------
1 | import { getBreakpointValue } from "@/core/functions/common-functions";
2 | import { useStylingBreakpoint } from "@/core/hooks/use-styling-breakpoint";
3 | import { atom, useAtom, useAtomValue } from "jotai";
4 | import { atomWithStorage } from "jotai/utils";
5 | import { useEffect } from "react";
6 |
7 | export const canvasWidthAtom = atomWithStorage("canvasWidth", 800);
8 | export const canvasDisplayWidthAtom = atomWithStorage("canvasDisplayWidth", 800);
9 |
10 | export const canvasBreakpointAtom = atom((get) => {
11 | const width: number = get(canvasWidthAtom);
12 | return getBreakpointValue(width).toLowerCase();
13 | });
14 |
15 | /**
16 | *
17 | */
18 | export const useScreenSizeWidth = () => {
19 | const [currentWidth, setCanvasWidth] = useAtom(canvasWidthAtom);
20 | const breakpoint = useAtomValue(canvasBreakpointAtom);
21 | const [stylingBreakpoint, setStylingBreakpoint] = useStylingBreakpoint();
22 |
23 | useEffect(() => {
24 | if (stylingBreakpoint !== "xs") {
25 | setStylingBreakpoint(breakpoint);
26 | }
27 | }, [breakpoint, stylingBreakpoint, setStylingBreakpoint]);
28 |
29 | return [currentWidth, breakpoint, setCanvasWidth] as const;
30 | };
31 |
32 | export const useCanvasDisplayWidth = () => {
33 | const [canvasDisplayWidth, setCanvasDisplayWidth] = useAtom(canvasDisplayWidthAtom);
34 | return [canvasDisplayWidth, setCanvasDisplayWidth] as const;
35 | };
36 |
--------------------------------------------------------------------------------
/src/core/hooks/use-selected-breakpoints.ts:
--------------------------------------------------------------------------------
1 | import { useAtom } from "jotai";
2 | import { atomWithStorage } from "jotai/utils";
3 |
4 | export const selectedBreakpointsAtom = atomWithStorage("selectedBreakpoints", ["XS", "MD", "XL"]);
5 |
6 | export const useSelectedBreakpoints = (): [string[], Function] => {
7 | const [selectedBreakpoints, setSelectedBreakpoints] = useAtom(selectedBreakpointsAtom);
8 | return [selectedBreakpoints, setSelectedBreakpoints];
9 | };
10 |
--------------------------------------------------------------------------------
/src/core/hooks/use-selected-library.ts:
--------------------------------------------------------------------------------
1 | import { selectedLibraryAtom } from "@/core/atoms/ui";
2 | import { useAtom } from "jotai";
3 |
4 | /**
5 | * Hook to get and set the selected UI library
6 | * @returns {[string, (library: string) => void]} A tuple containing the selected library ID and a function to set the selected library
7 | */
8 |
9 | export const useSelectedLibrary = () => {
10 | return useAtom(selectedLibraryAtom);
11 | };
12 |
--------------------------------------------------------------------------------
/src/core/hooks/use-selected-styling-blocks.ts:
--------------------------------------------------------------------------------
1 | import { atom, useAtom } from "jotai";
2 |
3 | export type TStyleBlock = {
4 | blockId: string;
5 | id: string;
6 | prop: string;
7 | };
8 |
9 | /**
10 | * Core selected ids atom
11 | */
12 | export const selectedStylingBlocksAtom = atom([]);
13 | selectedStylingBlocksAtom.debugLabel = "selectedStylingBlocksAtom";
14 |
15 | /**
16 | * @group Hooks
17 | * @returns {TStyleBlock[]} selected styling blocks
18 | */
19 | export const useSelectedStylingBlocks = () => useAtom(selectedStylingBlocksAtom);
20 |
--------------------------------------------------------------------------------
/src/core/hooks/use-sidebar-active-panel.ts:
--------------------------------------------------------------------------------
1 | import { atom, useAtom } from "jotai";
2 |
3 | export const sidebarActivePanelAtom = atom("outline");
4 | sidebarActivePanelAtom.debugLabel = "sidebarActivePanelAtom";
5 |
6 | export const useSidebarActivePanel = () => {
7 | return useAtom(sidebarActivePanelAtom);
8 | };
9 |
--------------------------------------------------------------------------------
/src/core/hooks/use-styling-breakpoint.ts:
--------------------------------------------------------------------------------
1 | import { styleBreakpointAtom } from "@/core/hooks/use-selected-blockIds";
2 | import { useAtom } from "jotai";
3 |
4 | export const useStylingBreakpoint = () => useAtom(styleBreakpointAtom);
5 |
--------------------------------------------------------------------------------
/src/core/hooks/use-styling-state.ts:
--------------------------------------------------------------------------------
1 | import { styleStateAtom } from "@/core/hooks/use-selected-blockIds";
2 | import { useAtom } from "jotai";
3 |
4 | export const useStylingState = () => useAtom(styleStateAtom);
5 |
--------------------------------------------------------------------------------
/src/core/hooks/use-wrapper-block.ts:
--------------------------------------------------------------------------------
1 | import { presentBlocksAtom } from "@/core/atoms/blocks";
2 | import { selectedBlockIdsAtom } from "@/core/hooks/use-selected-blockIds";
3 | import { ChaiBlock } from "@/types/chai-block";
4 | import { getRegisteredChaiBlock } from "@chaibuilder/runtime";
5 | import { atom, useAtomValue } from "jotai";
6 | import { find } from "lodash-es";
7 |
8 | // * This atom computes the wrapper block for the currently selected block.
9 | // * It iterates through the block's ancestors to find the first block that is marked as a wrapper.
10 | const wrapperBlockAtom = atom((get) => {
11 | const blocks = get(presentBlocksAtom);
12 | const blockIds = get(selectedBlockIdsAtom);
13 |
14 | // If only one block is selected, use its ID; otherwise, return null
15 | const blockId = blockIds.length === 1 ? blockIds[0] : null;
16 | if (!blockId) return null;
17 |
18 | // Find the block with the selected ID
19 | const block = find(blocks, { _id: blockId });
20 | if (!block) return null; // If the block is not found, return null
21 |
22 | // Start from the selected block and move up the parent chain
23 | let parentId = block._parent;
24 | while (parentId) {
25 | const parentBlock = find(blocks, { _id: parentId });
26 | if (!parentBlock) return null; // If the parent block is not found, return null
27 |
28 | // Check if the parent block is a wrapper block
29 | if (getRegisteredChaiBlock(parentBlock._type)?.wrapper) {
30 | return parentBlock; // If it's a wrapper, return it
31 | }
32 |
33 | parentId = parentBlock._parent;
34 | }
35 |
36 | // If no wrapper block is found, return null
37 | return null;
38 | });
39 | wrapperBlockAtom.debugLabel = "wrapperBlockAtom";
40 |
41 | export const useWrapperBlock = () => useAtomValue(wrapperBlockAtom);
42 |
--------------------------------------------------------------------------------
/src/core/import-html/general.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * Returns a boolean indicating whether the current environment is development
3 | * @returns {boolean} A boolean indicating whether the current environment is development
4 | */
5 | export const isDevelopment = () => import.meta.env.DEV;
6 |
--------------------------------------------------------------------------------
/src/core/import-html/import-video.ts:
--------------------------------------------------------------------------------
1 | import { isEmpty } from "lodash-es";
2 |
3 | export const hasVideoEmbed = (html: string): boolean => {
4 | // Regular expressions for YouTube and Vimeo URLs
5 | const youtubeRegex =
6 | /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
7 | const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?(player)?.vimeo\.com/;
8 |
9 | // Check if the HTML contains a YouTube or Vimeo URL
10 | return youtubeRegex.test(html) || vimeoRegex.test(html);
11 | };
12 |
13 | export const getVideoURLFromHTML = (html: string): string => {
14 | if (isEmpty(html)) return html;
15 | // Regular expressions for video or iframe tags
16 | const videoTagRegex = /]+src=['"]([^'">]+)['"]/;
17 | const iframeTagRegex = /]+src=['"]([^'">]+)['"]/;
18 |
19 | // Extract the URL from the video or iframe tag
20 | const videoTagMatch = html.match(videoTagRegex);
21 | const iframeTagMatch = html.match(iframeTagRegex);
22 |
23 | const videoUrl = videoTagMatch ? videoTagMatch[1] : iframeTagMatch ? iframeTagMatch[1] : null;
24 |
25 | // Check if the URL is a YouTube URL or vimeo URL
26 | const youtubeRegex =
27 | /(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
28 | const vimeoRegex = /(?:https?:\/\/)?(?:www\.)?player.vimeo\.com/;
29 | if (videoUrl && (youtubeRegex.test(videoUrl) || vimeoRegex.test(videoUrl))) {
30 | return videoUrl;
31 | }
32 |
33 | // If it's not a YouTube URL, return the HTML
34 | return html;
35 | };
36 |
--------------------------------------------------------------------------------
/src/core/index.ts:
--------------------------------------------------------------------------------
1 | import "@/index.css";
2 |
--------------------------------------------------------------------------------
/src/core/lib.ts:
--------------------------------------------------------------------------------
1 | export { generateUUID, getBreakpointValue } from "@/core/functions/common-functions";
2 | export { getBlocksFromHTML } from "@/core/import-html/html-to-json";
3 | export * from "@/render/functions";
4 | export { getStylesForBlocks } from "@/render/get-tailwind-css";
5 |
--------------------------------------------------------------------------------
/src/core/locales/load.ts:
--------------------------------------------------------------------------------
1 | import lngEn from "@/core/locales/en.json";
2 | import i18n from "i18next";
3 | import { initReactI18next } from "react-i18next";
4 |
5 | i18n
6 | .use(initReactI18next) // passes i18n down to react-i18next
7 | .init({
8 | // the translations
9 | // (tip move them in a JSON file and import them,
10 | // or even better, manage them via a UI: https://react.i18next.com/guides/multiple-translation-files#manage-your-translations-with-a-management-gui)
11 | resources: {
12 | en: {
13 | translation: lngEn,
14 | },
15 | },
16 | lng: "en", // if you're using a language detector, do not define the lng option
17 | fallbackLng: "en",
18 | interpolation: {
19 | escapeValue: false, // react already safes from xss => https://www.i18next.com/translation-function/interpolation#unescape
20 | },
21 | });
22 |
23 | export default i18n;
24 |
--------------------------------------------------------------------------------
/src/core/miscellaneous/index.ts:
--------------------------------------------------------------------------------
1 | import i18n from "@/core/locales/load";
2 |
3 | export { CHAI_BUILDER_EVENTS } from "@/core/events";
4 | export { generateUUID as generateBlockId, cn as mergeClasses } from "@/core/functions/common-functions";
5 | export { usePubSub } from "@/core/hooks/use-pub-sub";
6 | export { getBlocksFromHTML } from "@/core/import-html/html-to-json";
7 | export { pubsub } from "@/core/pubsub";
8 |
9 | export { i18n };
10 |
--------------------------------------------------------------------------------
/src/core/pubsub.ts:
--------------------------------------------------------------------------------
1 | type EventCallback = (data?: T) => void;
2 |
3 | class PubSub {
4 | private subscribers: Map> = new Map();
5 |
6 | subscribe(eventName: string, callback: EventCallback): () => void {
7 | if (!this.subscribers.has(eventName)) {
8 | this.subscribers.set(eventName, new Set());
9 | }
10 |
11 | this.subscribers.get(eventName)!.add(callback);
12 |
13 | // Return unsubscribe function
14 | return () => {
15 | const subs = this.subscribers.get(eventName);
16 | if (subs) {
17 | subs.delete(callback);
18 | if (subs.size === 0) {
19 | this.subscribers.delete(eventName);
20 | }
21 | }
22 | };
23 | }
24 |
25 | publish(eventName: string, data?: T): void {
26 | const subs = this.subscribers.get(eventName);
27 | if (subs) {
28 | subs.forEach((callback) => callback(data));
29 | }
30 | }
31 | }
32 |
33 | // Create a single instance for global use
34 | export const pubsub = new PubSub();
35 |
--------------------------------------------------------------------------------
/src/core/rjsf-widgets/binding.tsx:
--------------------------------------------------------------------------------
1 | export const BindingWidget = () => {
2 | return (
3 |
4 | Data binding is set for this field
5 |
6 | );
7 | };
8 |
--------------------------------------------------------------------------------
/src/core/rjsf-widgets/code-widget.tsx:
--------------------------------------------------------------------------------
1 | import { useCodeEditor, useSelectedBlock } from "@/core/hooks";
2 | import { ChaiBlock } from "@/types/chai-block";
3 | import { Button } from "@/ui/shadcn/components/ui/button";
4 | import { WidgetProps } from "@rjsf/utils";
5 | import { get } from "lodash-es";
6 | import { useTranslation } from "react-i18next";
7 |
8 | const CodeEditor = ({ id, placeholder }: WidgetProps) => {
9 | const { t } = useTranslation();
10 | const [, setCodeEditor] = useCodeEditor();
11 | const selectedBlock = useSelectedBlock() as ChaiBlock;
12 | if (typeof window === "undefined") return null;
13 | const blockProp = id.replace("root.", "");
14 | const value = get(selectedBlock, blockProp, "");
15 | const openCodeEditor = () => {
16 | const blockId = selectedBlock?._id;
17 |
18 | // @ts-ignore
19 | setCodeEditor({ blockId, blockProp, placeholder, initialCode: get(selectedBlock, blockProp, value) });
20 | };
21 |
22 | return (
23 |
24 |
31 |
34 |
35 | );
36 | };
37 |
38 | export { CodeEditor };
39 |
--------------------------------------------------------------------------------
/src/core/rjsf-widgets/collection-select.tsx:
--------------------------------------------------------------------------------
1 | import { WidgetProps } from "@rjsf/utils";
2 | import { find, get } from "lodash-es";
3 | import { COLLECTION_PREFIX } from "../constants/STRINGS";
4 | import { useBuilderProp, useSelectedBlock } from "../hooks";
5 |
6 | const CollectionFilterSortField = ({ id, value, onChange, onBlur }: WidgetProps) => {
7 | const collections = useBuilderProp("collections", []);
8 | const selectedBlock = useSelectedBlock();
9 | const repeaterItem = get(selectedBlock, "repeaterItems", "")
10 | .replace(/\{\{(.*)\}\}/g, "$1")
11 | .replace(COLLECTION_PREFIX, "");
12 | const collection = find(collections, { id: repeaterItem });
13 |
14 | const key = "root.filter" === id ? "filters" : "sorts";
15 | const options = get(collection, key, []);
16 |
17 | return (
18 |
19 |
27 |
28 | );
29 | };
30 |
31 | export { CollectionFilterSortField };
32 |
--------------------------------------------------------------------------------
/src/core/rjsf-widgets/color.tsx:
--------------------------------------------------------------------------------
1 | import { WidgetProps } from "@rjsf/utils";
2 | import { debounce } from "lodash-es";
3 |
4 | const ColorField = ({ value, onChange, id, onBlur }: WidgetProps) => {
5 | const throttledChange = debounce(onChange, 200);
6 | const onChangeCb = (e) => throttledChange(e.target.value);
7 | return (
8 |
9 |
10 | onBlur(id, url)}
15 | onChange={onChangeCb}
16 | />
17 |
18 |
11 | Choose a collection
12 |
13 | );
14 | }
15 |
16 | const prefixWithBracket = `{{${COLLECTION_PREFIX}`;
17 | const isCollection = value?.startsWith(prefixWithBracket);
18 | let displayValue = value;
19 | if (isCollection) {
20 | displayValue = value?.replace(prefixWithBracket, "")?.replace("}}", "");
21 | }
22 |
23 | return (
24 |
25 |
26 |
27 | {" "}
28 | {isCollection ? : null}
29 | {displayValue}
30 |
31 |
32 |
33 |
40 |
41 | Remove binding
42 |
43 |
44 |
15 |
21 |
5 |
6 |
11 |
12 |
Screen too small
13 |
14 | Please view this page on greater than 1280px screen width for the
15 | best experience.
16 |
17 |
18 |
19 |
20 |
28 | Minimum width: 1280px
29 |
30 |
31 |
32 |
20 | {title && {title}}
21 | {description && (
22 | {description}
23 | )}
24 |
25 | {action}
26 |
27 |
28 | )
29 | })}
30 |
31 |
32 | )
33 | }
34 |
--------------------------------------------------------------------------------
/src/ui/shadcn/components/ui/toggle.tsx:
--------------------------------------------------------------------------------
1 | import * as TogglePrimitive from "@radix-ui/react-toggle";
2 | import { cva, type VariantProps } from "class-variance-authority";
3 | import * as React from "react";
4 |
5 | import { cn } from "@/lib/utils";
6 |
7 | const toggleVariants = cva(
8 | "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
9 | {
10 | variants: {
11 | variant: {
12 | default: "bg-transparent",
13 | outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
14 | },
15 | size: {
16 | default: "h-9 px-2 min-w-9",
17 | sm: "h-8 px-1.5 min-w-8",
18 | lg: "h-10 px-2.5 min-w-10",
19 | },
20 | },
21 | defaultVariants: {
22 | variant: "default",
23 | size: "default",
24 | },
25 | },
26 | );
27 |
28 | const Toggle = React.forwardRef<
29 | React.ElementRef,
30 | React.ComponentPropsWithoutRef & VariantProps
31 | >(({ className, variant, size, ...props }, ref) => (
32 |
33 | ));
34 |
35 | Toggle.displayName = TogglePrimitive.Root.displayName;
36 |
37 | export { Toggle, toggleVariants };
38 |
--------------------------------------------------------------------------------
/src/ui/shadcn/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | import * as TooltipPrimitive from "@radix-ui/react-tooltip";
2 | import * as React from "react";
3 |
4 | import { cn } from "@/lib/utils";
5 |
6 | const TooltipProvider = TooltipPrimitive.Provider;
7 |
8 | const Tooltip = TooltipPrimitive.Root;
9 |
10 | const TooltipTrigger = TooltipPrimitive.Trigger;
11 |
12 | const TooltipContent = React.forwardRef<
13 | React.ElementRef,
14 | React.ComponentPropsWithoutRef
15 | >(({ className, sideOffset = 4, ...props }, ref) => (
16 |
17 |
26 |
27 | ));
28 | TooltipContent.displayName = TooltipPrimitive.Content.displayName;
29 |
30 | export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
31 |
--------------------------------------------------------------------------------
/src/ui/shadcn/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx";
2 | import { twMerge } from "tailwind-merge";
3 |
4 | export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));
5 |
--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | ///
2 |
--------------------------------------------------------------------------------
/src/vitest-setup.ts:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/chaibuilder/sdk/55f61ceee8ed90f8705cfac327b79a594b7322c0/src/vitest-setup.ts
--------------------------------------------------------------------------------
/src/web-blocks/chaibuilder-link.tsx:
--------------------------------------------------------------------------------
1 | type LinkProps = {
2 | inBuilder?: boolean;
3 | style?: Record;
4 | href: string;
5 | children: any;
6 | };
7 | const ChaiBuilderLink = ({ inBuilder = false, style = {}, href, children }: LinkProps) => {
8 | if (inBuilder) {
9 | return (
10 |
11 | {children}
12 |
13 | );
14 | }
15 |
16 | return (
17 |
18 | {children}
19 |
20 | );
21 | };
22 |
23 | export default ChaiBuilderLink;
24 |
--------------------------------------------------------------------------------
/src/web-blocks/custom-html.tsx:
--------------------------------------------------------------------------------
1 | import { ChaiBlockComponentProps, ChaiStyles, registerChaiBlockSchema, StylesProp } from "@chaibuilder/runtime";
2 | import { CodeIcon } from "@radix-ui/react-icons";
3 | import * as React from "react";
4 |
5 | const CustomHTMLBlock = (props: ChaiBlockComponentProps<{ htmlCode: string; styles: ChaiStyles }>) => {
6 | const { blockProps, styles, htmlCode, inBuilder } = props;
7 |
8 | return inBuilder ? (
9 |
10 | {inBuilder ?
: null}
11 | {React.createElement("div", {
12 | ...styles,
13 | dangerouslySetInnerHTML: { __html: htmlCode.replace(/
.*?<\/script>/g, "") },
14 | })}
15 | Enter your HTML code here...
14 |
15 |
16 |
17 | Scripts will be only executed in preview and live mode. Place your script at the bottom of the
18 |
19 |
20 |
21 |
16 |
Global Block - {globalBlock}
17 |
Choose a block from the sidebar to add it to this page.
18 |
16 |
Partial Block - {partialBlockId}
17 |
Choose a block from the sidebar to add it to this page.
18 |
This is a rich text block. You can add text, and other content here.
",
34 | ui: { "ui:widget": "richtext" },
35 | },
36 | },
37 | }),
38 | aiProps: ["content"],
39 | i18nProps: ["content"],
40 | };
41 |
42 | export { RichTextBlock as Component, Config };
43 |
--------------------------------------------------------------------------------
/src/web-blocks/span.tsx:
--------------------------------------------------------------------------------
1 | import { ChaiBlockComponentProps, ChaiStyles, registerChaiBlockSchema, StylesProp } from "@chaibuilder/runtime";
2 | import * as React from "react";
3 |
4 | export type SpanProps = {
5 | styles: ChaiStyles;
6 | content: string;
7 | tag: string;
8 | };
9 |
10 | const SpanBlock = (props: ChaiBlockComponentProps) => {
11 | const { blockProps, styles, content, children = null, tag } = props;
12 |
13 | if (children) return React.createElement("span", { ...styles, ...blockProps }, children);
14 |
15 | return React.createElement(tag || "span", {
16 | ...styles,
17 | ...blockProps,
18 | dangerouslySetInnerHTML: { __html: content || "" },
19 | });
20 | };
21 |
22 | const Config = {
23 | type: "Span",
24 | description: "A span component",
25 | label: "Span",
26 | category: "core",
27 | group: "typography",
28 | ...registerChaiBlockSchema({
29 | properties: {
30 | styles: StylesProp(""),
31 | content: {
32 | type: "string",
33 | title: "Content",
34 | default: "",
35 | ui: { "ui:widget": "textarea", "ui:autosize": true, "ui:rows": 3 },
36 | },
37 | },
38 | }),
39 | aiProps: ["content"],
40 | i18nProps: ["content"],
41 | canAcceptBlock: () => true,
42 | };
43 |
44 | export { SpanBlock as Component, Config };
45 |
--------------------------------------------------------------------------------
/src/web-blocks/text.tsx:
--------------------------------------------------------------------------------
1 | import { SpaceBetweenVerticallyIcon } from "@radix-ui/react-icons";
2 |
3 | import { ChaiBlockComponentProps, ChaiStyles, registerChaiBlockSchema, StylesProp } from "@chaibuilder/runtime";
4 |
5 | export type TextBlockProps = {
6 | styles: ChaiStyles;
7 | content: string;
8 | forceWrapper?: boolean;
9 | };
10 |
11 | const RawTextBlock = (props: ChaiBlockComponentProps) => {
12 | if (props.inBuilder || props.forceWrapper) {
13 | return {props.content};
14 | }
15 | return `${props.content}`;
16 | };
17 |
18 | const Config = {
19 | type: "Text",
20 | description: "A text component with no styling",
21 | label: "Text",
22 | hidden: true,
23 | category: "core",
24 | group: "typography",
25 | icon: SpaceBetweenVerticallyIcon,
26 | ...registerChaiBlockSchema({
27 | properties: {
28 | styles: StylesProp("text-black"),
29 | content: {
30 | title: "Content",
31 | type: "string",
32 | default: "",
33 | },
34 | },
35 | }),
36 | aiProps: ["content"],
37 | i18nProps: ["content"],
38 | };
39 |
40 | export { RawTextBlock as Component, Config };
41 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | import { getChaiBuilderTailwindConfig } from "./src/tailwind/get-chai-builder-tailwind-config";
2 |
3 | export default getChaiBuilderTailwindConfig(["./index.html", "./src/**/*.{js,ts,jsx,tsx}"]);
4 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2020",
4 | "useDefineForClassFields": true,
5 | "lib": ["ES2020", "es2021", "DOM", "DOM.Iterable"],
6 | "module": "ESNext",
7 | "skipLibCheck": true,
8 | "esModuleInterop": true,
9 |
10 | /* Bundler mode */
11 | "moduleResolution": "bundler",
12 | "allowImportingTsExtensions": true,
13 | "resolveJsonModule": true,
14 | "isolatedModules": true,
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 |
18 | /* Linting */
19 | "strict": false,
20 | "noUnusedLocals": true,
21 | "noUnusedParameters": true,
22 | "noFallthroughCasesInSwitch": true,
23 | "types": ["vitest/globals", "vitest/importMeta"],
24 | "baseUrl": ".",
25 | "paths": {
26 | "@/*": ["./src/*"]
27 | }
28 | },
29 | "include": ["src", "lib", "e2e_tests"],
30 | "references": [{ "path": "./tsconfig.node.json" }]
31 | }
32 |
--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "composite": true,
4 | "skipLibCheck": true,
5 | "module": "ESNext",
6 | "moduleResolution": "bundler",
7 | "allowSyntheticDefaultImports": true,
8 | "baseUrl": ".",
9 | "paths": {
10 | "@/*": ["./src/*"]
11 | }
12 | },
13 | "include": ["vite.config.ts"]
14 | }
15 |
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
3 | }
4 |
--------------------------------------------------------------------------------
/vite.config.live.ts:
--------------------------------------------------------------------------------
1 | import react from "@vitejs/plugin-react-swc";
2 | import path from "path";
3 | import { defineConfig } from "vite";
4 | // https://vitejs.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | build: {
8 | outDir: "live",
9 | emptyOutDir: true,
10 | },
11 | resolve: {
12 | alias: {
13 | "@": path.resolve(__dirname, "./src"),
14 | },
15 | },
16 | });
17 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import path from "path";
2 | import { configDefaults, defineConfig } from "vitest/config";
3 |
4 | export default defineConfig({
5 | test: {
6 | globals: true,
7 | environment: "jsdom",
8 | setupFiles: ["./src/vitest-setup.ts"],
9 | exclude: [...configDefaults.exclude, "./e2e_tests"],
10 | includeSource: ["src/**/*.{ts,tsx}"],
11 | },
12 | resolve: {
13 | alias: {
14 | "@": path.resolve(__dirname, "./src"),
15 | },
16 | },
17 | define: {
18 | "import.meta.vitest": "undefined",
19 | },
20 | });
21 |
--------------------------------------------------------------------------------
11 | Chai Builder
12 |
13 |
14 |
15 | 
16 |
17 | 
11 |