@chaibuilder/sdk 2.0.0-beta.5 → 2.0.0-beta.51

package/dist/core.d.ts

@@ -1,8 +1,8 @@
 import { ClassValue } from 'clsx';
-import i18n from 'i18next';
+import { default as default_2 } from 'react';
+import { default as i18n } from 'i18next';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import * as React_2 from 'react';
-import { default as React_3 } from 'react';
 import { ReactNode } from 'react';
 import { registerChaiBlock } from '@chaibuilder/runtime';
 import { RESET } from 'jotai/utils';
@@ -16,10 +16,11 @@ declare type AddBlocks = {
 
 export declare const AddBlocksDialog: () => JSX_2.Element;
 
-export declare const AddBlocksPanel: ({ className, showHeading, parentId, }: {
+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;
@@ -46,11 +47,13 @@ export declare function BlockPropsEditor(): JSX_2.Element;
 
 export declare function BlockStyleEditor(): JSX_2.Element;
 
+declare type BorderRadiusValue = false | string;
+
 declare type Breakpoint = {
     title: string;
     content: string;
     breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | string;
-    icon: React_3.ReactNode | Element;
+    icon: default_2.ReactNode | Element;
     width: number;
 };
 
@@ -60,22 +63,35 @@ export declare const CHAI_BUILDER_EVENTS: {
     SHOW_BLOCK_SETTINGS: string;
 };
 
-export declare type ChaiBlock = {
+export declare type ChaiBlock<T = Record<string, any>> = {
     _id: string;
-    _type: string;
     _name?: string;
     _parent?: string | null | undefined;
     _bindings?: Record<string, string>;
-} & Record<string, any>;
+    _type: string;
+} & T;
 
-export declare const ChaiBuilderCanvas: React_3.FC;
+export declare const ChaiBuilderCanvas: default_2.FC;
 
 /**
  * ChaiBuilder is the main entry point for the Chai Builder Studio.
  */
-export declare const ChaiBuilderEditor: React_3.FC<ChaiBuilderEditorProps>;
+export declare const ChaiBuilderEditor: default_2.FC<ChaiBuilderEditorProps>;
 
 export declare interface ChaiBuilderEditorProps {
+    /**
+     * RJSF Fields and Widgets
+     */
+    rjsfFields?: Record<string, default_2.ComponentType<any>>;
+    rjsfWidgets?: Record<string, default_2.ComponentType<any>>;
+    rjsfTemplates?: Record<string, default_2.ComponentType<any>>;
+    /**
+     * Optional pageId. If not provided, a random pageId will be generated
+     */
+    pageId?: string;
+    themePresets?: Record<string, Partial<ChaiBuilderThemeValues>>[];
+    themeOptions?: ChaiBuilderThemeOptions | ((defaultThemeOptions: ChaiBuilderThemeOptions) => ChaiBuilderThemeOptions);
+    theme?: Partial<ChaiBuilderThemeValues>;
     /**
      * onError callback function
      * @param error
@@ -93,7 +109,7 @@ export declare interface ChaiBuilderEditorProps {
     /**
      * Custom layout component
      */
-    layout?: React_3.ComponentType;
+    layout?: default_2.ComponentType;
     /**
      * Layout variant. Not supported with custom layout
      */
@@ -101,9 +117,17 @@ export declare interface ChaiBuilderEditorProps {
     /**
      * Custom media Manager component
      */
-    mediaManagerComponent?: React_3.ComponentType<{
+    mediaManagerComponent?: default_2.ComponentType<{
         onSelect: (url: string) => void;
     }>;
+    /**
+     * Add blocks dialog components
+     */
+    addBlocksDialogTabs?: {
+        key: string;
+        tab: ReactComponentType;
+        tabContent: ReactComponentType;
+    }[];
     /**
      * HTML direction.
      */
@@ -159,7 +183,7 @@ export declare interface ChaiBuilderEditorProps {
     uiLibraries?: Omit<UILibrary, "blocks">[];
     getUILibraryBlocks?: (library: UILibrary) => Promise<UiLibraryBlock[]>;
     getUILibraryBlock?: (library: UILibrary, uiLibBlock: UiLibraryBlock) => Promise<ChaiBlock[]>;
-    getRSCBlock?: (block: ChaiBlock) => Promise<string>;
+    getBlockAsyncProps?: (block: ChaiBlock) => Promise<string>;
     /**
      * Get Global blocks
      */
@@ -175,9 +199,7 @@ export declare interface ChaiBuilderEditorProps {
      * Blocks for the page
      */
     blocks?: ChaiBlock[];
-    onSave?: ({ blocks, providers }: SavePageData) => Promise<boolean | Error>;
-    brandingOptions?: Record<string, string>;
-    theme?: Record<string, string>;
+    onSave?: ({ blocks, theme, autoSave }: SavePageData) => Promise<boolean | Error>;
     /**
      * onSaveStateChange callback function
      * @param syncStatus
@@ -217,16 +239,31 @@ export declare interface ChaiBuilderEditorProps {
     fallbackLang?: string;
     languages?: Array<string>;
     /**
-     * Collections props
+     * Page Types props
      */
-    collections?: Collection[];
-    searchCollectionItems?: (collectionKey: string, query: string) => Promise<CollectionItem[] | Error>;
+    pageTypes?: PageType[];
+    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;
+    colors: false | {
+        group: string;
+        items: Record<VariableKey, [HSLColor, HSLColor]>;
+    }[];
+};
+
+declare type ChaiBuilderThemeValues = {
+    fontFamily: Record<string, string>;
+    borderRadius: string;
+    colors: Record<string, string[]>;
+};
+
 declare type ClassDerivedObject = {
     cls: string;
     dark: boolean;
@@ -243,30 +280,15 @@ declare type CodeEditorProps = {
     placeholder?: string;
 };
 
-declare type Collection = {
-    key: string;
-    name: string;
-};
-
-declare type CollectionItem = {
-    id: string;
-    name: string;
-    slug?: string;
-};
-
 declare type CopiedValue = string | null;
 
 declare type CopyFn = (text: string) => Promise<boolean>;
 
 export declare function DarkModeSwitcher(): JSX_2.Element;
 
-declare type DataProvider = {
-    providerKey: string;
-    args: Record<string, any>;
-};
-
-export declare const DefaultChaiBlocks: ({ parentId, gridCols }: {
+export declare const DefaultChaiBlocks: ({ parentId, position, gridCols, }: {
     parentId?: string;
+    position?: number;
     gridCols?: string;
 }) => JSX_2.Element;
 
@@ -298,10 +320,13 @@ declare type GlobalBlockList = Record<string, {
     description?: string;
 }>;
 
+declare type HSLColor = string;
+
 export { i18n }
 
-export declare const ImportHTML: ({ parentId }: {
+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";
@@ -311,7 +336,7 @@ export declare const mergeClasses: (...inputs: ClassValue[]) => string;
 export declare const Outline: () => JSX_2.Element;
 
 declare type OutlineMenuItem = {
-    item: React_3.ComponentType<{
+    item: default_2.ComponentType<{
         blockId: string;
     }>;
     tooltip: string | ReactNode;
@@ -319,7 +344,18 @@ declare type OutlineMenuItem = {
 
 declare type OutlineMenuItems = OutlineMenuItem[];
 
-declare type ReactComponentType = React_3.ComponentType<any>;
+declare type PageType = {
+    key: string;
+    name: string;
+};
+
+declare type PageTypeItem = {
+    id: string;
+    name: string;
+    slug?: string;
+};
+
+declare type ReactComponentType = default_2.ComponentType<any>;
 
 export { registerChaiBlock }
 
@@ -328,17 +364,16 @@ declare type RichText = string;
 declare type SavePageData = {
     autoSave: boolean;
     blocks: ChaiBlock[];
-    providers?: DataProvider[];
-    brandingOptions?: Record<string, any>;
-    themeConfiguration?: Record<string, any>;
+    theme?: Record<string, any>;
 };
 
 export declare const ScreenSizes: () => JSX_2.Element;
 
-export declare const ThemeOptions: ({ showHeading, className, }: {
+declare interface ThemeConfigProps {
     className?: string;
-    showHeading?: boolean;
-}) => React_2.JSX.Element;
+}
+
+export declare const ThemeOptions: React_2.FC<ThemeConfigProps>;
 
 declare type TimeInSeconds = number;
 
@@ -348,8 +383,9 @@ declare type TStyleBlock = {
     prop: string;
 };
 
-export declare const UILibraries: ({ parentId }: {
+export declare const UILibraries: ({ parentId, position }: {
     parentId?: string;
+    position?: number;
 }) => JSX_2.Element;
 
 declare interface UILibrary {
@@ -375,10 +411,16 @@ export declare const UndoRedo: () => JSX_2.Element;
 
 export declare const useAddBlock: () => AddBlocks;
 
-export declare const useAddClassesToBlocks: () => Function;
+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: (blockId: string) => void;
+    highlightBlock: (elementOrID: HTMLElement | string) => void;
     clearHighlight: () => void;
     lastHighlighted: HTMLElement;
 };
@@ -414,7 +456,7 @@ export declare const useCanvasWidth: () => [number, string, Function];
 /**
  * Wrapper hook around useAtom
  */
-export declare const useCanvasZoom: () => [number, (args_0: number | typeof RESET | ((prev: number) => number | typeof RESET)) => void];
+export declare const useCanvasZoom: () => [number, (args_0: number | RESET | ((prev: number) => number | RESET)) => void];
 
 /**
  * Custom hook to access the current state of the code editor.
@@ -423,7 +465,7 @@ export declare const useCanvasZoom: () => [number, (args_0: number | typeof RESE
  */
 export declare const useCodeEditor: () => [CodeEditorProps, never];
 
-export declare const useCopyBlockIds: () => [Array<string>, Function];
+export declare const useCopyBlockIds: () => [Array<string>, (blockIds: Array<string>) => void];
 
 export declare const useCopyToClipboard: () => [CopiedValue, CopyFn];
 
@@ -468,11 +510,11 @@ export declare const useLanguages: () => {
     setSelectedLang: (lang: string) => void;
 };
 
-export declare const useLayoutVariant: () => readonly [LayoutVariant, (args_0: LayoutVariant | typeof RESET | ((prev: LayoutVariant) => LayoutVariant | typeof RESET)) => void];
+export declare const useLayoutVariant: () => readonly [LayoutVariant, (args_0: RESET | LayoutVariant | ((prev: LayoutVariant) => RESET | LayoutVariant)) => void];
 
 export declare const usePasteBlocks: () => {
-    canPaste: (newParentId: string) => boolean;
-    pasteBlocks: Function;
+    canPaste: (newParentId: string) => Promise<boolean>;
+    pasteBlocks: (newParentId: string | string[]) => Promise<void>;
 };
 
 /**
@@ -484,6 +526,8 @@ export declare const useRemoveBlocks: () => (blockIds: Array<string>) => void;
 
 export declare const useRemoveClassesFromBlocks: () => Function;
 
+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) => Promise<boolean>>;
     saveState: "UNSAVED" | "SAVED" | "SAVING";
@@ -502,7 +546,7 @@ export declare const useSelectedBlockCurrentClasses: () => Array<ClassDerivedObj
 /**
  *
  */
-export declare const useSelectedBlockIds: () => [Array<string>, Function, Function];
+export declare const useSelectedBlockIds: () => readonly [string[], (args_0: string[] | ((prev: string[]) => string[])) => void, (blockId: string) => void];
 
 /**
  * Hook to get selected block ids
@@ -520,10 +564,22 @@ export declare const useSelectedBreakpoints: () => [string[], Function];
  */
 export declare const useSelectedStylingBlocks: () => [TStyleBlock[], (args_0: TStyleBlock[] | ((prev: TStyleBlock[]) => TStyleBlock[])) => void];
 
-export declare const useStylingBreakpoint: () => [string, (args_0: string | typeof RESET | ((prev: string) => string | typeof RESET)) => 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: Record<string, string>;
+    borderRadius: string;
+    colors: Record<string, string[]>;
+} | {
+    fontFamily?: Record<string, string>;
+    borderRadius?: string;
+    colors?: Record<string, string[]>;
+}, (args_0: ChaiBuilderThemeValues | Partial<ChaiBuilderThemeValues> | ((prev: ChaiBuilderThemeValues | Partial<ChaiBuilderThemeValues>) => ChaiBuilderThemeValues | Partial<ChaiBuilderThemeValues>)) => void];
+
+export declare const useThemeOptions: () => ChaiBuilderThemeOptions;
+
 export { useTranslation }
 
 export declare const useUILibraryBlocks: () => {
@@ -547,4 +603,8 @@ export declare const useUpdateBlocksProps: () => (blockIds: Array<string>, props
 
 export declare const useUpdateBlocksPropsRealtime: () => (blockIds: Array<string>, props: Record<string, any>) => void;
 
+export declare const useWrapperBlock: () => any;
+
+declare type VariableKey = string;
+
 export { }