@chaibuilder/sdk 2.0.12 → 2.1.1

package/dist/core.d.ts

@@ -1,35 +1,26 @@
 import { ChaiBlock as ChaiBlock_2 } from '@chaibuilder/runtime';
 import { ClassValue } from 'clsx';
+import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { default as i18n } from 'i18next';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as React_2 from 'react';
-import { ReactNode } from 'react';
-import { registerChaiBlock } from '@chaibuilder/runtime';
 import { RESET } from 'jotai/utils';
 import { ThrottledFunction } from '@react-hookz/web';
 import { useTranslation } from 'react-i18next';
 
+export declare const ADD_BLOCK_TABS: Record<string, AddBlockTab>;
+
 declare type AddBlocks = {
     addCoreBlock: any;
     addPredefinedBlock: any;
 };
 
-export declare const AddBlocksDialog: () => JSX_2.Element;
-
-export declare const AddBlocksPanel: ({ className, showHeading, parentId, position, }: {
-    parentId?: string;
-    showHeading?: boolean;
-    className?: string;
-    position?: number;
-}) => JSX_2.Element;
-
-export declare const AISetContext: () => JSX_2.Element;
-
-export declare const AIUserPrompt: ({ blockId }: {
-    blockId: string | undefined;
-}) => JSX_2.Element;
+declare type AddBlockTab = {
+    id: string;
+    tab: React.ComponentType;
+    tabContent: React.ComponentType;
+};
 
 declare type AskAiResponse = {
     blocks?: Array<{
@@ -39,16 +30,6 @@ declare type AskAiResponse = {
     error?: any;
 };
 
-export declare const BlockAttributesEditor: React_2.MemoExoticComponent<() => JSX_2.Element>;
-
-/**
- *
- * @returns Block Setting
- */
-export declare function BlockPropsEditor(): JSX_2.Element;
-
-export declare function BlockStyleEditor(): JSX_2.Element;
-
 declare type BorderRadiusValue = false | string;
 
 declare type Breakpoint = {
@@ -59,11 +40,22 @@ declare type Breakpoint = {
     width: number;
 };
 
-export declare const CHAI_BUILDER_EVENTS: {
-    OPEN_ADD_BLOCK: string;
-    CLOSE_ADD_BLOCK: string;
-    SHOW_BLOCK_SETTINGS: string;
-};
+export declare const CHAI_BUILDER_PANELS: Record<string, ChaiSidebarPanel<any>>;
+
+export declare const ChaiAddBlocksDialog: () => JSX_2.Element;
+
+export declare const ChaiAddBlocksPanel: ({ className, showHeading, parentId, position, }: {
+    parentId?: string;
+    showHeading?: boolean;
+    className?: string;
+    position?: number;
+}) => JSX_2.Element;
+
+export declare const ChaiAskAiPanel: () => JSX_2.Element;
+
+export declare const ChaiAskAiUserPrompt: ({ blockId }: {
+    blockId: string | undefined;
+}) => JSX_2.Element;
 
 export declare type ChaiBlock<T = Record<string, any>> = {
     _id: string;
@@ -71,8 +63,19 @@ export declare type ChaiBlock<T = Record<string, any>> = {
     _parent?: string | null | undefined;
     _bindings?: Record<string, string>;
     _type: string;
+    _libBlock?: string;
 } & T;
 
+export declare const ChaiBlockAttributesEditor: React_2.MemoExoticComponent<() => JSX_2.Element>;
+
+/**
+ *
+ * @returns Block Setting
+ */
+export declare function ChaiBlockPropsEditor(): JSX_2.Element;
+
+export declare function ChaiBlockStyleEditor(): JSX_2.Element;
+
 export declare const ChaiBuilderCanvas: default_2.FC;
 
 /**
@@ -82,23 +85,43 @@ export declare const ChaiBuilderEditor: default_2.FC<ChaiBuilderEditorProps>;
 
 export declare interface ChaiBuilderEditorProps {
     /**
-     * Permissions
+     * User
      */
-    permissions?: string[];
+    user?: {
+        id: string;
+        name: string;
+        email: string;
+        avatar?: string;
+        role: string;
+    };
     /**
-     * RJSF Fields and Widgets
+     * Permissions
      */
-    rjsfFields?: Record<string, default_2.ComponentType<any>>;
-    rjsfWidgets?: Record<string, default_2.ComponentType<any>>;
-    rjsfTemplates?: Record<string, default_2.ComponentType<any>>;
+    permissions?: string[];
     /**
      * Optional pageId. If not provided, a random pageId will be generated
      */
     pageId?: string;
+    /**
+     * Page external data
+     */
     pageExternalData?: Record<string, any>;
+    /**
+     * Theme presets
+     */
     themePresets?: Record<string, Partial<ChaiBuilderThemeValues>>[];
+    /**
+     * Theme options
+     */
     themeOptions?: (defaultThemeOptions: ChaiBuilderThemeOptions) => ChaiBuilderThemeOptions;
+    /**
+     * Theme
+     */
     theme?: Partial<ChaiBuilderThemeValues>;
+    /**
+     * Theme panel component
+     * TODO: Move to registerChaiThemePanelComponent()
+     */
     themePanelComponent?: ReactComponentType;
     /**
      * onError callback function
@@ -109,45 +132,19 @@ export declare interface ChaiBuilderEditorProps {
      * Translations object
      */
     translations?: Record<string, Record<string, any>>;
-    /**
-     * onLoad callback function
-     * @param editorInstance
-     */
-    onLoad?: (editorInstance: ChaiBuilderInstance) => void;
     /**
      * Custom layout component
+     * TODO: Move to registerChaiLayoutComponent()
      */
     layout?: default_2.ComponentType;
-    /**
-     * Layout variant. Not supported with custom layout
-     */
-    layoutVariant?: LayoutVariant;
-    /**
-     * Custom media Manager component
-     */
-    mediaManagerComponent?: default_2.ComponentType<{
-        onSelect: (url: string) => void;
-    }>;
-    /**
-     * Add blocks dialog components
-     */
-    addBlocksDialogTabs?: {
-        key: string;
-        tab: ReactComponentType;
-        tabContent: ReactComponentType;
-    }[];
     /**
      * HTML direction.
      */
     htmlDir?: "ltr" | "rtl";
-    /**
-     * Filter function for blocks to be shown in the builder
-     */
-    filterChaiBlock?: (block: any) => boolean;
     /**
      * Show debug logs
      */
-    showDebugLogs?: boolean;
+    debugLogs?: boolean;
     /**
      * Auto save support
      */
@@ -160,10 +157,6 @@ export declare interface ChaiBuilderEditorProps {
      * Breakpoints
      */
     breakpoints?: Breakpoint[];
-    /**
-     * Editable
-     */
-    editable?: boolean;
     /**
      * Loading state
      */
@@ -173,27 +166,47 @@ export declare interface ChaiBuilderEditorProps {
      */
     locale?: string;
     /**
-     * Non editable component
+     * Dark mode
      */
-    nonEditableComponent?: ReactComponentType;
+    darkMode?: boolean;
     /**
-     * Canvas component. Not supported with custom layout
+     * Import HTML support
      */
-    canvasTopBarComponents?: {
-        right?: ReactComponentType[];
-    };
-    blockMoreOptions?: Array<(props: {
-        block: ChaiBlock;
-    }) => default_2.ReactElement<typeof DropdownMenuItem>>;
-    previewLink?: string;
-    darkMode?: boolean;
     importHTMLSupport?: boolean;
+    /**
+     * AI context
+     */
+    aiContext?: string;
+    /**
+     * Ask AI callback
+     */
     askAiCallBack?: (type: "styles" | "content", prompt: string, blocks: ChaiBlock[], lang: string) => Promise<AskAiResponse>;
     saveAiContextCallback?: (content: string) => Promise<true | Error>;
-    aiContext?: string;
+    /**
+     * UI libraries
+     */
     uiLibraries?: Omit<ChaiUILibrary, "blocks">[];
+    /**
+     * Get library blocks
+     */
     getUILibraryBlocks?: (library: ChaiUILibrary) => Promise<ChaiUILibraryBlock[]>;
+    /**
+     * Get library block
+     */
     getUILibraryBlock?: (library: ChaiUILibrary, uiLibBlock: ChaiUILibraryBlock) => Promise<ChaiBlock[]>;
+    /**
+     * Upsert library block
+     */
+    upsertLibraryBlock?: (params: {
+        id?: string;
+        description: string;
+        group: string;
+        library: string;
+        name: string;
+        preview?: string;
+    }) => Promise<{
+        id: string;
+    } | Error>;
     getPartialBlocks?: () => Promise<Record<string, {
         type: string;
         name: string;
@@ -207,6 +220,10 @@ export declare interface ChaiBuilderEditorProps {
      * Blocks for the page
      */
     blocks?: ChaiBlock[];
+    /**
+     * onSave callback function
+     * @param saveData
+     */
     onSave?: ({ blocks, theme, autoSave }: SavePageData) => Promise<boolean | Error>;
     /**
      * onSaveStateChange callback function
@@ -215,48 +232,27 @@ export declare interface ChaiBuilderEditorProps {
     onSaveStateChange?: (syncStatus: "SAVED" | "SAVING" | "UNSAVED") => void;
     /**
      * Preview component
+     * TODO: Move to registerChaiPreviewComponent()
      */
     previewComponent?: ReactComponentType;
-    /**
-     * Sidebar components. Not supported with custom layout
-     */
-    sideBarComponents?: {
-        bottom?: ReactComponentType[];
-        top?: {
-            icon: ReactNode;
-            label: string;
-            component: ReactComponentType;
-        }[];
-    };
-    /**
-     * Topbar components. Not supported with custom layout
-     */
-    topBarComponents?: {
-        center?: ReactComponentType[];
-        left?: ReactComponentType[];
-        right?: ReactComponentType[];
-    };
-    /**
-     * Outline menu items
-     */
-    outlineMenuItems?: OutlineMenuItems;
-    _flags?: Record<string, boolean>;
     /**
      * Content locale
      */
     fallbackLang?: string;
+    /**
+     * Languages
+     */
     languages?: Array<string>;
     /**
      * Page Types props
      */
     pageTypes?: PageType[];
+    /**
+     * Search page type items
+     */
     searchPageTypeItems?: (pageTypeKey: string, query: string) => Promise<PageTypeItem[] | Error>;
 }
 
-declare type ChaiBuilderInstance = {
-    setBlocks: (blocks: ChaiBlock[]) => void;
-};
-
 declare type ChaiBuilderThemeOptions = {
     fontFamily: false | Record<VariableKey, string>;
     borderRadius: BorderRadiusValue;
@@ -272,6 +268,46 @@ declare type ChaiBuilderThemeValues = {
     colors: Record<string, string[]>;
 };
 
+export declare function ChaiDarkModeSwitcher(): JSX_2.Element;
+
+export declare const ChaiDefaultBlocks: ({ parentId, position, gridCols, }: {
+    parentId?: string;
+    position?: number;
+    gridCols?: string;
+}) => JSX_2.Element;
+
+export declare const ChaiImportHTML: ({ parentId, position }: {
+    parentId?: string;
+    position?: number;
+}) => JSX_2.Element;
+
+export declare const ChaiOutline: () => JSX_2.Element;
+
+export declare const ChaiScreenSizes: ({ openDelay, canvas, tooltip, }: {
+    openDelay?: number;
+    canvas?: boolean;
+    tooltip?: boolean;
+}) => JSX_2.Element;
+
+export declare interface ChaiSidebarPanel<T> {
+    id: string;
+    position: "top" | "bottom";
+    view?: "standard" | "modal" | "overlay" | "drawer";
+    icon: React.ReactNode;
+    label: string;
+    component: ComponentType;
+    showIf?: (params: T) => boolean;
+    width?: number;
+    isInternal?: boolean;
+}
+
+export declare const ChaiThemeConfigPanel: React_2.FC<ThemeConfigProps>;
+
+export declare const ChaiUILibrariesPanel: ({ parentId, position }: {
+    parentId?: string;
+    position?: number;
+}) => JSX_2.Element;
+
 declare type ChaiUILibrary<T = Record<string, any>> = {
     id: string;
     name: string;
@@ -288,6 +324,8 @@ declare type ChaiUILibraryBlock<T = Record<string, any>> = {
     description?: string;
 } & T;
 
+export declare const ChaiUndoRedo: () => JSX_2.Element;
+
 declare type ClassDerivedObject = {
     cls: string;
     dark: boolean;
@@ -308,18 +346,6 @@ declare type CopiedValue = string | null;
 
 declare type CopyFn = (text: string) => Promise<boolean>;
 
-export declare function DarkModeSwitcher(): JSX_2.Element;
-
-export declare const DefaultChaiBlocks: ({ parentId, position, gridCols, }: {
-    parentId?: string;
-    position?: number;
-    gridCols?: string;
-}) => JSX_2.Element;
-
-declare const DropdownMenuItem: React_2.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React_2.RefAttributes<HTMLDivElement>, "ref"> & {
-    inset?: boolean;
-} & React_2.RefAttributes<HTMLDivElement>>;
-
 declare type ExcludedBuilderProps = "blocks" | "subPages" | "brandingOptions" | "dataProviders";
 
 /**
@@ -332,40 +358,21 @@ export declare function generateBlockId(length?: number, chars?: string): string
  * @param html
  * @returns Blocks JSON
  */
-export declare const getBlocksFromHTML: (html: string) => ChaiBlock[];
-
-/**
- * Get the value and unit for a tw class
- * @param className
- */
-export declare const getClassValueAndUnit: (className: string) => {
-    unit: string;
-    value: string;
-};
+declare const getBlocksFromHTML: (html: string) => ChaiBlock[];
+export { getBlocksFromHTML as convertHTMLToChaiBlocks }
+export { getBlocksFromHTML }
 
 declare type HSLColor = string;
 
 export { i18n }
 
-export declare const ImportHTML: ({ parentId, position }: {
-    parentId?: string;
-    position?: number;
-}) => JSX_2.Element;
-
-declare type LayoutVariant = "SINGLE_SIDE_PANEL" | "DUAL_SIDE_PANEL" | "DUAL_SIDE_PANEL_ADVANCED";
-
-export declare const mergeClasses: (...inputs: ClassValue[]) => string;
-
-export declare const Outline: () => JSX_2.Element;
-
-declare type OutlineMenuItem = {
-    item: default_2.ComponentType<{
-        blockId: string;
-    }>;
-    tooltip: string | ReactNode;
+declare type MediaManagerProps = {
+    close: () => void;
+    onSelect: (urls: string[]) => void;
+    mode?: "image" | "video" | "audio";
 };
 
-declare type OutlineMenuItems = OutlineMenuItem[];
+export declare const mergeClasses: (...inputs: ClassValue[]) => string;
 
 declare type PageType = {
     key: string;
@@ -393,11 +400,35 @@ export declare const PERMISSIONS: {
     SAVE_PAGE: string;
     EDIT_STYLES: string;
     IMPORT_HTML: string;
+    CREATE_LIBRARY_BLOCK: string;
+    CREATE_LIBRARY_GROUP: string;
+    EDIT_LIBRARY_BLOCK: string;
+    EDIT_LIBRARY_GROUP: string;
+    DELETE_LIBRARY_BLOCK: string;
+    DELETE_LIBRARY_GROUP: string;
 };
 
 declare type ReactComponentType = default_2.ComponentType<any>;
 
-export { registerChaiBlock }
+export declare const registerBlockSettingField: (id: string, component: React.ComponentType<any>) => void;
+
+export declare const registerBlockSettingTemplate: (id: string, component: React.ComponentType<any>) => void;
+
+export declare const registerBlockSettingWidget: (id: string, component: React.ComponentType<any>) => void;
+
+export declare const registerChaiAddBlockTab: (id: string, tab: Omit<AddBlockTab, "id">) => void;
+
+export declare const registerChaiMediaManager: (component: React.ComponentType<MediaManagerProps>) => void;
+
+export declare const registerChaiSidebarPanel: <T extends Record<string, any>>(panelId: string, panelOptions: Omit<ChaiSidebarPanel<T>, "id">) => void;
+
+export declare const registerChaiTopBar: (component: React.ComponentType) => void;
+
+export declare const RJSF_EXTENSIONS: Record<string, {
+    id: string;
+    component: React.ComponentType<any>;
+    type: string;
+}>;
 
 declare type SavePageData = {
     autoSave: boolean;
@@ -405,14 +436,6 @@ declare type SavePageData = {
     theme?: ChaiBuilderThemeValues;
 };
 
-export declare const ScreenSizes: ({ openDelay, canvas, tooltip, }: {
-    openDelay?: number;
-    canvas?: boolean;
-    tooltip?: boolean;
-}) => JSX_2.Element;
-
-export declare const ThemeConfigPanel: React_2.FC<ThemeConfigProps>;
-
 declare interface ThemeConfigProps {
     className?: string;
 }
@@ -425,13 +448,6 @@ declare type TStyleBlock = {
     prop: string;
 };
 
-export declare const UILibrariesPanel: ({ parentId, position }: {
-    parentId?: string;
-    position?: number;
-}) => JSX_2.Element;
-
-export declare const UndoRedo: () => JSX_2.Element;
-
 export declare const useAddBlock: () => AddBlocks;
 
 export declare const useAddClassesToBlocks: () => (blockIds: Array<string>, newClasses: Array<string>, undo?: boolean) => void;
@@ -448,6 +464,8 @@ export declare const useBlockHighlight: () => {
     lastHighlighted: HTMLElement;
 };
 
+export declare const useBlockSettingComponents: (type: "widget" | "field" | "template") => Record<string, React.ComponentType<any>>;
+
 export declare const useBlocksStore: () => [any[], (args_0: any[] | ((prev: any[]) => any[])) => void];
 
 export declare const useBlocksStoreUndoableActions: () => {
@@ -467,7 +485,7 @@ export declare const useBlocksStoreUndoableActions: () => {
  */
 export declare const useBrandingOptions: () => readonly [any, (args_0: any) => void];
 
-export declare const useBuilderProp: <T>(propKey: keyof Omit<ChaiBuilderEditorProps, ExcludedBuilderProps> | "sideBarComponents.top" | "sideBarComponents.bottom" | "topBarComponents.left" | "topBarComponents.right" | "topBarComponents.center" | "languages", defaultValue?: T) => T;
+export declare const useBuilderProp: <T>(propKey: keyof Omit<ChaiBuilderEditorProps, ExcludedBuilderProps> | "languages", defaultValue?: T) => T;
 
 export declare const useBuilderReset: () => () => void;
 
@@ -478,6 +496,8 @@ export declare const useCanvasDisplayWidth: () => readonly [number, (args_0: num
  */
 export declare const useCanvasZoom: () => [number, (args_0: number | RESET | ((prev: number) => number | RESET)) => void];
 
+export declare const useChaiSidebarPanels: (position: "top" | "bottom") => any;
+
 /**
  * Custom hook to access the current state of the code editor.
  * @category Hooks
@@ -519,8 +539,6 @@ export declare const useLanguages: () => {
     setSelectedLang: (lang: string) => void;
 };
 
-export declare const useLayoutVariant: () => readonly [LayoutVariant, (args_0: RESET | LayoutVariant | ((prev: LayoutVariant) => RESET | LayoutVariant)) => void];
-
 export declare const useLibraryBlocks: (library?: Partial<ChaiUILibrary> & {
     id: string;
 }) => {
@@ -529,6 +547,8 @@ export declare const useLibraryBlocks: (library?: Partial<ChaiUILibrary> & {
     resetLibrary: () => void;
 };
 
+export declare const useMediaManagerComponent: () => ComponentType<MediaManagerProps>;
+
 export declare const usePartailBlocksStore: () => {
     getPartailBlocks: (partailBlock: string) => any;
     reset: () => void;
@@ -602,6 +622,8 @@ export declare const useSelectedBreakpoints: () => [string[], Function];
  */
 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 useStylingBreakpoint: () => [string, (args_0: string | RESET | ((prev: string) => string | RESET)) => void];
 
 export declare const useStylingState: () => [unknown, (...args: unknown[]) => unknown];
@@ -618,6 +640,8 @@ export declare const useTheme: () => readonly [{
 
 export declare const useThemeOptions: () => ChaiBuilderThemeOptions;
 
+export declare const useTopBarComponent: () => ComponentType<    {}>;
+
 export { useTranslation }
 
 export declare const useUILibraryBlocks: () => {