@chaibuilder/sdk 4.0.0-beta.1 → 4.0.0-beta.3

package/dist/core.d.ts

@@ -5,15 +5,6 @@ import { DragEvent as DragEvent_2 } from 'react';
 import { default as i18n } from 'i18next';
 import { JSX } from 'react/jsx-runtime';
 import * as React_2 from 'react';
-import { ReactNode } from 'react';
-import { RESET } from 'jotai/utils';
-import { ThrottledFunction } from '@react-hookz/web';
-import { useTranslation } from 'react-i18next';
-
-declare type AddBlocks = {
-    addCoreBlock: any;
-    addPredefinedBlock: any;
-};
 
 declare type AddBlockTab = {
     id: string;
@@ -29,6 +20,8 @@ declare type AskAiResponse = {
     error?: any;
 };
 
+declare type BlocksWithDesignTokens = Record<string, string>;
+
 declare type BorderRadiusValue = false | string;
 
 declare type Breakpoint = {
@@ -39,8 +32,6 @@ declare type Breakpoint = {
     width: number;
 };
 
-export declare type BreakpointName = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
-
 export declare const ChaiAddBlocksDialog: () => JSX.Element;
 
 export declare const ChaiAddBlocksPanel: ({ className, showHeading, parentId, position, fromSidebar, }: {
@@ -68,7 +59,6 @@ export declare type ChaiBlock<T = Record<string, any>> = {
     _id: string;
     _name?: string;
     _parent?: string | null | undefined;
-    _bindings?: Record<string, string>;
     _type: string;
     _libBlock?: string;
 } & T;
@@ -76,11 +66,10 @@ export declare type ChaiBlock<T = Record<string, any>> = {
 declare type ChaiBlock_2<T = Record<string, any>> = {
     _id: string;
     _name?: string;
-    _parent?: string | null | undefined;
-    _bindings?: Record<string, string>;
+    _parent?: string;
     _libBlock?: string;
     _type: string;
-    _partialBlockId?: string;
+    partialBlockId?: string;
 } & T;
 
 export declare const ChaiBlockAttributesEditor: React_2.MemoExoticComponent<() => JSX.Element>;
@@ -181,7 +170,7 @@ export declare interface ChaiBuilderEditorProps {
     /**
      * Auto save interval in seconds
      */
-    autoSaveInterval?: TimeInSeconds;
+    autoSaveActionsCount?: number;
     /**
      * Breakpoints
      */
@@ -271,7 +260,16 @@ export declare interface ChaiBuilderEditorProps {
         importTheme?: boolean;
         gotoSettings?: boolean;
         dragAndDrop?: boolean;
+        validateStructure?: boolean;
+        designTokens?: boolean;
     };
+    structureRules?: StructureRule[];
+    designTokens?: DesignTokens;
+    siteWideUsage?: SiteWideUsage;
+    /**
+     * Screen to small message component
+     */
+    smallScreenComponent?: ReactComponentType;
 }
 
 declare type ChaiBuilderThemeOptions = {
@@ -324,8 +322,14 @@ export declare const ChaiDefaultBlocks: ({ parentId, position, gridCols, disable
  * <ChaiDraggableBlock blocks={async () => await fetchBlocks()}>
  *   <div>Drag me</div>
  * </ChaiDraggableBlock>
+ *
+ * @example
+ * // With Image block
+ * <ChaiDraggableBlock type="Image" block={{ image: "https://example.com/image.jpg" }}>
+ *   <img src="https://example.com/image.jpg" alt="Image" />
+ * </ChaiDraggableBlock>
  */
-export declare const ChaiDraggableBlock: ({ block, html, blocks, children, onDragStart: customOnDragStart, onDragEnd: customOnDragEnd, draggable: customDraggable, className, }: ChaiDraggableBlockProps) => JSX.Element;
+export declare const ChaiDraggableBlock: ({ block, html, blocks, children, onDragStart: customOnDragStart, onDragEnd: customOnDragEnd, draggable: customDraggable, className, type, }: ChaiDraggableBlockProps) => JSX.Element;
 
 declare type ChaiDraggableBlockProps = {
     html?: string | (() => Promise<string>);
@@ -336,16 +340,11 @@ declare type ChaiDraggableBlockProps = {
     onDragEnd?: (e: DragEvent_2) => void;
     draggable?: boolean;
     className?: string;
+    type?: "Box" | "Image";
 };
 
 export declare const ChaiExportCodeModal: () => JSX.Element;
 
-declare type ChaiFlagOptions = {
-    key: string;
-    value?: any;
-    description?: string;
-};
-
 export declare const ChaiImportHTML: ({ parentId, position, fromSidebar, }: {
     parentId?: string;
     position?: number;
@@ -446,27 +445,12 @@ export declare const ChaiUILibrariesPanel: ({ parentId, position, fromSidebar, }
 
 export declare const ChaiUndoRedo: () => JSX.Element;
 
-declare type ClassDerivedObject = {
-    cls: string;
-    dark: boolean;
-    fullCls: string;
-    mod: string;
-    mq: string;
-    property: string;
-};
-
-declare type CodeEditorProps = {
-    blockId: string;
-    blockProp: string;
-    initialCode: string;
-    placeholder?: string;
-};
-
-declare type CopiedValue = string | null;
-
-declare type CopyFn = (text: string) => Promise<boolean>;
-
-declare type ExcludedBuilderProps = "blocks" | "subPages" | "brandingOptions" | "dataProviders";
+declare interface DesignTokens {
+    [uniqueId: string]: {
+        name: string;
+        value: string;
+    };
+}
 
 declare type FilterOptions = {
     id: string;
@@ -477,7 +461,7 @@ declare type FilterOptions = {
 /**
  * Get the unique uuid
  */
-export declare function generateBlockId(length?: number, chars?: string): string;
+export declare function generateBlockId(length?: number): string;
 
 /**
  *
@@ -505,11 +489,6 @@ declare type HTMLString = string;
 
 export { i18n }
 
-export declare const IfChaiFeatureFlag: ({ flagKey, children }: {
-    flagKey: string;
-    children: React.ReactNode;
-}) => ReactNode;
-
 declare type MediaManagerProps = {
     assetId?: string;
     close: () => void;
@@ -519,11 +498,6 @@ declare type MediaManagerProps = {
 
 export declare const mergeClasses: (...inputs: ClassValue[]) => string;
 
-declare type Options = {
-    blockId?: string;
-    additionalCoreBlocks?: string[];
-};
-
 declare type PageType = {
     key: string;
     name: string;
@@ -535,12 +509,6 @@ declare type PageTypeItem = {
     slug?: string;
 };
 
-declare type PartialBlockList = Record<string, {
-    name?: string;
-    description?: string;
-    type?: string;
-}>;
-
 export declare const PERMISSIONS: {
     ADD_BLOCK: string;
     DELETE_BLOCK: string;
@@ -566,10 +534,6 @@ export declare const registerBlockSettingWidget: (id: string, component: React.C
 
 export declare const registerChaiAddBlockTab: (id: string, tab: Omit<AddBlockTab, "id">) => void;
 
-export declare const registerChaiFeatureFlag: (key: string, flagOptions: Omit<ChaiFlagOptions, "key">) => void;
-
-export declare const registerChaiFeatureFlags: (flags: Record<string, Omit<ChaiFlagOptions, "key">>) => void;
-
 export declare const registerChaiLibrary: <T extends Record<string, any> = Record<string, any>>(id: string, library: Omit<ChaiLibraryConfig<T>, "id">) => void;
 
 export declare const registerChaiMediaManager: (component: React.ComponentType<MediaManagerProps>) => void;
@@ -587,6 +551,7 @@ declare type SavePageData = {
     blocks: ChaiBlock[];
     theme?: ChaiThemeValues;
     needTranslations?: boolean;
+    designTokens: DesignTokens;
 };
 
 declare type SaveToLibraryProps = {
@@ -595,338 +560,41 @@ declare type SaveToLibraryProps = {
     close: () => void;
 };
 
+declare interface SiteWideUsage {
+    [pageId: string]: {
+        name: string;
+        isPartial: boolean;
+        partialBlocks: string[];
+        links: string[];
+        designTokens: BlocksWithDesignTokens;
+    };
+}
+
 declare type SortOptions = {
     id: string;
     name: string;
     description?: string;
 };
 
-declare interface ThemeConfigProps {
-    className?: string;
-}
-
-declare type TimeInSeconds = number;
-
-declare type TStyleBlock = {
-    blockId: string;
+declare type StructureError = {
     id: string;
-    prop: string;
-};
-
-export declare const useAddBlock: () => AddBlocks;
-
-export declare const useAddClassesToBlocks: () => (blockIds: Array<string>, newClasses: Array<string>, undo?: boolean) => void;
-
-export declare const useAskAi: () => {
-    askAi: (type: "styles" | "content", blockId: string, prompt: string, onComplete?: (response?: AskAiResponse) => void) => Promise<void>;
-    loading: boolean;
-    error: any;
-};
-
-export declare const useBlockHighlight: () => {
-    highlightBlock: (elementOrID: HTMLElement | string) => void;
-    clearHighlight: () => void;
-    lastHighlighted: HTMLElement;
-};
-
-export declare const useBlocksHtmlForAi: () => (options?: Options) => any;
-
-export declare const useBlocksStore: () => [any[], (args_0: any[] | ((prev: any[]) => any[])) => void];
-
-export declare const useBlocksStoreUndoableActions: () => {
-    moveBlocks: (blockIds: string[], parent: string | undefined, position: number) => void;
-    addBlocks: (newBlocks: ChaiBlock[], parent?: string, position?: number) => void;
-    removeBlocks: (blocks: ChaiBlock[]) => void;
-    updateBlocks: (blockIds: string[], props: Partial<ChaiBlock>, oldPropsState?: Partial<ChaiBlock>) => void;
-    updateBlocksRuntime: (blockIds: string[], props: Record<string, any>) => void;
-    setNewBlocks: (newBlocks: ChaiBlock[]) => void;
-    updateMultipleBlocksProps: (blocks: Array<{
-        _id: string;
-    } & Partial<ChaiBlock>>) => void;
-};
-
-/**
- * Wrapper around useAtom
- */
-export declare const useBrandingOptions: () => readonly [any, (args_0: any) => void];
-
-export declare const useBuilderProp: <T>(propKey: keyof Omit<ChaiBuilderEditorProps, ExcludedBuilderProps> | "languages" | string, defaultValue?: T) => T;
-
-export declare const useBuilderReset: () => () => void;
-
-export declare const useCanvasDisplayWidth: () => readonly [number, (args_0: number | RESET | ((prev: number) => number | RESET)) => void];
-
-export declare const useCanvasWidth: () => readonly [number, BreakpointName];
-
-/**
- * Wrapper hook around useAtom
- */
-export declare const useCanvasZoom: () => [number, (args_0: number | RESET | ((prev: number) => number | RESET)) => void];
-
-export declare const useChaiFeatureFlag: (flagKey: string) => boolean;
-
-export declare const useChaiFeatureFlags: () => Record<string, ChaiFlagOptions>;
-
-/**
- * Custom hook to access the current state of the code editor.
- * @category Hooks
- * @returns The current state of the code editor from the `codeEditorAtom`.
- */
-export declare const useCodeEditor: () => [CodeEditorProps, never];
-
-export declare const useCopyBlockIds: () => [Array<string>, (blockIds: Array<string>, clonePartialBlocks?: boolean) => void, (blockIds: Array<string>) => boolean];
-
-export declare const useCopyToClipboard: () => [CopiedValue, CopyFn];
-
-export declare const useCurrentPage: () => {
-    currentPage: unknown;
-};
-
-export declare const useCutBlockIds: () => [Array<string>, Function];
-
-/**
- * Wrapper hook around useAtom
- */
-export declare const useDarkMode: () => [boolean, Function];
-
-/**
- * useDuplicateBlock
- */
-export declare const useDuplicateBlocks: () => Function;
-
-/**
- *
- */
-export declare const useHighlightBlockId: () => [string, Function];
-
-export declare const useHtmlToBlocks: () => (html: string) => ChaiBlock[];
-
-export declare const useI18nBlocks: () => (lang?: string | "ALL") => any;
-
-export declare const useInlineEditing: () => {
-    editingBlockId: string;
-    editingItemIndex: number;
-    setEditingBlockId: (args_0: string | ((prev: string) => string)) => void;
-    setEditingItemIndex: (args_0: number | ((prev: number) => number)) => void;
+    message: string;
+    severity: "error" | "warning";
+    blockId?: string;
 };
 
-export declare const useIsPageLoaded: () => [boolean, (args_0: boolean | ((prev: boolean) => boolean)) => void];
-
-export declare const useLanguages: () => {
-    languages: any[];
-    fallbackLang: string;
-    selectedLang: string;
-    setSelectedLang: (lang: string) => void;
+declare type StructureRule = {
+    name: string;
+    description: string;
+    validate: (blocks: ChaiBlock[], tree: any[]) => StructureError[];
 };
 
-export declare const useLibraryBlocks: (library?: Partial<ChaiLibrary> & {
-    id: string;
-}) => {
-    data: any;
-    isLoading: boolean;
-    resetLibrary: (libraryId: string) => void;
-};
+declare interface ThemeConfigProps {
+    className?: string;
+}
 
 export declare const useMediaManagerComponent: () => ComponentType<MediaManagerProps>;
 
-export declare const usePartailBlocksStore: () => {
-    getPartailBlocks: (partailBlock: string) => any;
-    reset: () => void;
-};
-
-export declare const usePartialBlocksList: () => {
-    data: PartialBlockList;
-    isLoading: boolean;
-    refetch: () => Promise<void>;
-    error: string;
-};
-
-export declare const usePasteBlocks: () => {
-    canPaste: (newParentId: string) => Promise<boolean>;
-    pasteBlocks: (newParentId: string | string[]) => Promise<void>;
-};
-
-export declare const usePermissions: () => {
-    hasPermission: (permission: string) => any;
-};
-
-/**
- *
- */
-export declare const usePreviewMode: () => [boolean, Function];
-
-export declare function usePubSub<T>(eventName: string, callback: (data?: T) => void): void;
-
-export declare const useRemoveAllClassesForBlock: () => (block: ChaiBlock, undo?: boolean) => void;
-
-export declare const useRemoveBlocks: () => (blockIds: Array<string>) => void;
-
-export declare const useRemoveClassesFromBlocks: () => Function;
-
-export declare const useReplaceBlock: () => (blockId: string | undefined, replacementBlocks: ChaiBlock[]) => void;
-
-/**
- * useResetBlockStyles
- *
- * Provides helper functions to reset style props of the currently selected block.
- *
- * resetAll(): resets every style prop of the current block back to its default value.
- * reset(styleId): resets a single style prop back to its default value.
- */
-export declare const useResetBlockStyles: () => {
-    readonly resetAll: () => void;
-    readonly reset: (styleId: string) => void;
-};
-
-export declare const useRightPanel: () => ["theme" | "block" | "ai" | "settings", (args_0: "theme" | "block" | "ai" | "settings" | ((prev: "theme" | "block" | "ai" | "settings") => "theme" | "block" | "ai" | "settings")) => void];
-
-export declare const useSavePage: () => {
-    savePage: ThrottledFunction<(autoSave?: boolean, force?: boolean) => Promise<boolean>>;
-    savePageAsync: (force?: boolean) => Promise<boolean>;
-    saveState: "SAVED" | "SAVING" | "UNSAVED";
-    setSaveState: (args_0: "SAVED" | "SAVING" | "UNSAVED" | ((prev: "SAVED" | "SAVING" | "UNSAVED") => "SAVED" | "SAVING" | "UNSAVED")) => void;
-    needTranslations: () => boolean;
-};
-
-/**
- *
- */
-export declare const useScreenSizeWidth: () => readonly [number, string, (args_0: number | RESET | ((prev: number) => number | RESET)) => void];
-
-/**
- * useSelectedBlock hook
- */
-export declare const useSelectedBlock: () => ChaiBlock;
-
-export declare const useSelectedBlockAllClasses: () => Array<ClassDerivedObject>;
-
-export declare const useSelectedBlockCurrentClasses: () => Array<ClassDerivedObject>;
-
-/**
- *
- */
-export declare const useSelectedBlockIds: () => readonly [string[], (args_0: string[] | ((prev: string[]) => string[])) => void, (blockId: string) => void];
-
-/**
- * Hook to get selected block ids
- */
-export declare const useSelectedBlocksDisplayChild: () => {
-    flexChild: boolean;
-    gridChild: boolean;
-};
-
-export declare const useSelectedBreakpoints: () => [string[], Function];
-
-/**
- * Hook to get and set the selected UI library
- * @returns {[string, (library: string) => void]} A tuple containing the selected library ID and a function to set the selected library
- */
-export declare const useSelectedLibrary: () => [string, (args_0: string | RESET | ((prev: string) => string | RESET)) => void];
-
-/**
- * @group Hooks
- * @returns {TStyleBlock[]} selected styling blocks
- */
-export declare const useSelectedStylingBlocks: () => [TStyleBlock[], (args_0: TStyleBlock[] | ((prev: TStyleBlock[]) => TStyleBlock[])) => void];
-
-export declare const useSidebarActivePanel: () => [string, (args_0: string | ((prev: string) => string)) => void];
-
-export declare const useStreamMultipleBlocksProps: () => (blocks: Array<{
-    _id: string;
-} & Partial<ChaiBlock>>) => Promise<void>;
-
-export declare const useStylingBreakpoint: () => [string, (args_0: string | RESET | ((prev: string) => string | RESET)) => void];
-
-export declare const useStylingState: () => [unknown, (...args: unknown[]) => unknown];
-
-export declare const useTheme: () => readonly [{
-    fontFamily: {
-        heading: string;
-        body: string;
-    };
-    borderRadius: string;
-    colors: {
-        background: [string, string];
-        foreground: [string, string];
-        primary: [string, string];
-        "primary-foreground": [string, string];
-        secondary: [string, string];
-        "secondary-foreground": [string, string];
-        muted: [string, string];
-        "muted-foreground": [string, string];
-        accent: [string, string];
-        "accent-foreground": [string, string];
-        destructive: [string, string];
-        "destructive-foreground": [string, string];
-        border: [string, string];
-        input: [string, string];
-        ring: [string, string];
-        card: [string, string];
-        "card-foreground": [string, string];
-        popover: [string, string];
-        "popover-foreground": [string, string];
-        [key: string]: [string, string];
-    };
-} | {
-    fontFamily: {
-        heading: string;
-        body: string;
-    };
-    borderRadius: string;
-    colors: {
-        background: [string, string];
-        foreground: [string, string];
-        primary: [string, string];
-        "primary-foreground": [string, string];
-        secondary: [string, string];
-        "secondary-foreground": [string, string];
-        muted: [string, string];
-        "muted-foreground": [string, string];
-        accent: [string, string];
-        "accent-foreground": [string, string];
-        destructive: [string, string];
-        "destructive-foreground": [string, string];
-        border: [string, string];
-        input: [string, string];
-        ring: [string, string];
-        card: [string, string];
-        "card-foreground": [string, string];
-        popover: [string, string];
-        "popover-foreground": [string, string];
-        [key: string]: [string, string];
-    };
-}, (args_0: ChaiThemeValues | Partial<ChaiThemeValues> | ((prev: ChaiThemeValues | Partial<ChaiThemeValues>) => ChaiThemeValues | Partial<ChaiThemeValues>)) => void];
-
-export declare const useThemeOptions: () => ChaiBuilderThemeOptions;
-
-export declare const useToggleChaiFeatureFlag: (flagKey: string) => () => void;
-
-export { useTranslation }
-
-export declare const useUndoManager: () => {
-    add: (action: any) => void;
-    undo: () => void;
-    redo: () => void;
-    hasUndo: () => boolean;
-    hasRedo: () => boolean;
-    clear: () => void;
-};
-
-/**
- *
- */
-export declare const useUpdateBlocksProps: () => (blockIds: Array<string>, props: Record<string, any>, prevPropsState?: Record<string, any>) => void;
-
-export declare const useUpdateBlocksPropsRealtime: () => (blockIds: Array<string>, props: Record<string, any>) => void;
-
-export declare const useWrapperBlock: () => ChaiBlock;
-
 declare type VariableKey = string;
 
 export { }
-
-declare global {
-    interface Window {
-        clarity: any;
-    }
-}