Merge pull request #585 from chaibuilder/improvments-to-register-apis

Improvments to register apis

Author: surajair

docs/registering-custom-blocks.md

@@ -50,7 +50,7 @@ const Config = {
   category: "core",
   group: "basic",
   description: "A clickable button element",
-  ...registerChaiBlockSchema({
+  props: registerChaiBlockProps({
     properties: {
       styles: StylesProp(""),
       text: {
@@ -287,7 +287,7 @@ const Config = {
   category: "core",
   group: "layout",
   canAcceptBlock: () => true,
-  ...registerChaiBlockSchema({
+  props: registerChaiBlockProps({
     properties: {
       styles: StylesProp("p-4 border rounded-lg"),
     },

src/actions/classes/chai-ai-chat-handler.ts

@@ -1,4 +1,4 @@
-import { AIChatOptions, ChaiBuilderPagesAIInterface } from "@/actions/export";
+import { AIChatOptions, ChaiBuilderPagesAIInterface } from "@/types/actions";
 import { streamText, StreamTextResult } from "ai";
 import { noop } from "lodash-es";
 import { getAskAiSystemPrompt } from "./system-prompt";

src/actions/export.ts

@@ -1,62 +1,6 @@
-import { StreamTextResult } from "ai";
 import ChaiActionsRegistry from "./builder/actions-registery";
 import { getAskAiSystemPrompt } from "./classes/system-prompt";
 
-export interface ChaiLoggedInUser {
-  id: string;
-  email: string;
-  name: string;
-  avatar?: string;
-}
-
-export type ChaiUserInfo = {
-  id: string;
-  email: string;
-  name: string;
-  avatar?: string;
-};
-
-export type ChaiAsset = {
-  id: string;
-  name: string;
-  url: string;
-  type: string;
-  createdAt: string;
-  updatedAt?: string;
-  createdBy: string;
-  size?: number;
-  folderId: string | null;
-
-  // Optional
-  thumbnailUrl?: string;
-  description?: string;
-  duration?: number;
-  format?: string;
-
-  width?: number;
-  height?: number;
-};
-
-export type AssetsParams = {
-  search: string;
-  limit: number;
-  page: number;
-};
-
-export type AIChatOptions = {
-  messages: any[];
-  image?: string;
-  systemPrompt?: string;
-  initiator?: string | null;
-  model?: string;
-};
-
-export interface ChaiBuilderPagesAIInterface {
-  handleRequest(options: AIChatOptions, res: any): Promise<StreamTextResult<any, any>>;
-  isConfigured(): boolean;
-}
-
-export * from "../types/actions";
 export { initChaiBuilderActionHandler } from "./builder/chai-builder-actions-handler";
 export { db, safeQuery, schema } from "./db";
 export { LANGUAGES } from "./LANGUAGES";

src/core/components/canvas/dnd/drag-and-drop/hooks/use-block-drop.ts

@@ -24,7 +24,7 @@ import { useCanvasIframe } from "@/hooks/use-canvas-iframe";
 import { useSelectedBlockIds } from "@/hooks/use-selected-blockIds";
 import { useSelectedStylingBlocks } from "@/hooks/use-selected-styling-blocks";
 import { useUpdateBlocksProps } from "@/hooks/use-update-blocks-props";
-import { syncBlocksWithDefaults } from "@/runtime";
+import { syncBlocksWithDefaultProps } from "@/runtime";
 import { ChaiBlock } from "@/types/common";
 import { useAtom } from "jotai";
 import { filter, find, get, has, isFunction } from "lodash-es";
@@ -176,7 +176,7 @@ export const useBlockDrop = () => {
         const preBlocks = !draggedBlock?.blocks
           ? null
           : isFunction(draggedBlock?.blocks)
-            ? syncBlocksWithDefaults(draggedBlock?.blocks())
+            ? syncBlocksWithDefaultProps(draggedBlock?.blocks())
             : draggedBlock?.blocks;
 
         if (draggedBlockType === "PartialBlock") {

src/core/components/canvas/static/apply-language.test.ts

@@ -1,11 +1,10 @@
-import { ChaiBlockDefinition } from "@/types/blocks";
+import { ChaiBlockConfig } from "@/types/blocks";
 import { ChaiBlock } from "@/types/common";
 import { applyLanguage } from "./new-blocks-render-helpers";
 
 describe("applyLanguage", () => {
-  const mockChaiBlock: ChaiBlockDefinition = {
+  const mockChaiBlock: ChaiBlockConfig = {
     i18nProps: ["title", "content", "buttonText"],
-    component: () => null,
     type: "mock",
     label: "Mock Block",
     group: "Mock",

src/core/components/canvas/static/new-blocks-render-helpers.ts

@@ -1,13 +1,13 @@
 import { DESIGN_TOKEN_PREFIX, STYLES_KEY } from "@/core/constants/STRINGS";
 import { getSplitChaiClasses } from "@/hooks/get-split-classes";
 import { getRegisteredChaiBlock } from "@/runtime";
-import { ChaiBlockDefinition } from "@/types/blocks";
+import { ChaiBlockConfig } from "@/types/blocks";
 import { ChaiBlock } from "@/types/common";
 import { ChaiDesignTokens } from "@/types/types";
 import { cloneDeep, forEach, get, includes, isArray, isEmpty, isString, keys, memoize, startsWith } from "lodash-es";
 import { twMerge } from "tailwind-merge";
 
-export function applyLanguage(_block: ChaiBlock, selectedLang: string, chaiBlock: ChaiBlockDefinition) {
+export function applyLanguage(_block: ChaiBlock, selectedLang: string, chaiBlock: ChaiBlockConfig) {
   const i18nProps = get(chaiBlock, "i18nProps", []);
   if (isEmpty(selectedLang) || isEmpty(i18nProps)) return _block;
 

src/core/components/chaibuilder-editor.tsx

@@ -23,7 +23,7 @@ import { isPageLoadedAtom } from "@/hooks/use-is-page-loaded";
 import { useKeyEventWatcher } from "@/hooks/use-key-event-watcher";
 import { useWatchPartailBlocks } from "@/hooks/use-partial-blocks-store";
 import { builderSaveStateAtom } from "@/hooks/use-save-page";
-import { syncBlocksWithDefaults } from "@/runtime";
+import { syncBlocksWithDefaultProps } from "@/runtime";
 import { ChaiBuilderEditorProps } from "@/types";
 import { ChaiBuilderThemeValues } from "@/types/types";
 import { useAtom } from "jotai";
@@ -66,7 +66,7 @@ const ChaiWatchers = (props: ChaiBuilderEditorProps) => {
     setIsPageLoaded(false);
     // Added delay to allow the pageId to be set
     setTimeout(() => {
-      const withDefaults = syncBlocksWithDefaults(props.blocks || []);
+      const withDefaults = syncBlocksWithDefaultProps(props.blocks || []);
       // @ts-ignore
       setAllBlocks(withDefaults);
       if (withDefaults && withDefaults.length > 0) {

src/core/components/settings/block-settings.tsx

@@ -5,18 +5,14 @@ import { useSelectedBlock } from "@/hooks/use-selected-blockIds";
 import { useUpdateBlocksProps, useUpdateBlocksPropsRealtime } from "@/hooks/use-update-blocks-props";
 import { useWrapperBlock } from "@/hooks/use-wrapper-block";
 import { getBlockFormSchemas, getRegisteredChaiBlock } from "@/runtime";
-import { ChaiBlockDefinition } from "@/types/blocks";
+import { ChaiBlockConfig } from "@/types/blocks";
 import { ChaiBlock } from "@/types/common";
 import { ChevronDownIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import { IChangeEvent } from "@rjsf/core";
 import { cloneDeep, debounce, forEach, get, includes, isEmpty, keys, set, startCase, startsWith } from "lodash-es";
 import { useCallback, useMemo, useState } from "react";
 
-const formDataWithSelectedLang = (
-  formData: Record<string, any>,
-  selectedLang: string,
-  coreBlock: ChaiBlockDefinition,
-) => {
+const formDataWithSelectedLang = (formData: Record<string, any>, selectedLang: string, coreBlock: ChaiBlockConfig) => {
   const updatedFormData = cloneDeep(formData);
   forEach(keys(formData), (key) => {
     if (includes(get(coreBlock, "i18nProps", []), key) && !isEmpty(selectedLang)) {
@@ -35,13 +31,13 @@ export default function BlockSettings() {
   const selectedBlock = useSelectedBlock() as any;
   const updateBlockPropsRealtime = useUpdateBlocksPropsRealtime();
   const updateBlockProps = useUpdateBlocksProps();
-  const registeredBlock = getRegisteredChaiBlock(selectedBlock?._type) as ChaiBlockDefinition;
+  const registeredBlock = getRegisteredChaiBlock(selectedBlock?._type) as ChaiBlockConfig;
   const formData = formDataWithSelectedLang(selectedBlock, selectedLang, registeredBlock);
   const [prevFormData, setPrevFormData] = useState(formData);
 
   const [showWrapperSetting, setShowWrapperSetting] = useState(false);
   const wrapperBlock = useWrapperBlock() as ChaiBlock;
-  const registeredWrapperBlock = getRegisteredChaiBlock(wrapperBlock?._type) as ChaiBlockDefinition;
+  const registeredWrapperBlock = getRegisteredChaiBlock(wrapperBlock?._type) as ChaiBlockConfig;
   const wrapperFormData = formDataWithSelectedLang(wrapperBlock, selectedLang, registeredWrapperBlock);
 
   const updateProps = ({ formData: newData }: IChangeEvent, prop?: string, oldState?: any) => {

src/core/components/sidepanels/panels/add-blocks/core-block.tsx

@@ -3,7 +3,7 @@ import { useDragAndDrop, useIsDragAndDropEnabled } from "@/core/components/canva
 import { CHAI_BUILDER_EVENTS } from "@/core/events";
 import { pubsub } from "@/core/pubsub";
 import { useAddBlock } from "@/hooks/use-add-block";
-import { syncBlocksWithDefaults } from "@/runtime";
+import { syncBlocksWithDefaultProps } from "@/runtime";
 import { BoxIcon } from "@radix-ui/react-icons";
 import { capitalize, has, isFunction, kebabCase } from "lodash-es";
 import { createElement } from "react";
@@ -25,7 +25,7 @@ export const CoreBlock = ({
   const addBlockToPage = () => {
     if (has(block, "blocks")) {
       const blocks = isFunction(block.blocks) ? block.blocks() : block.blocks;
-      addPredefinedBlock(syncBlocksWithDefaults(blocks), parentId || null, position);
+      addPredefinedBlock(syncBlocksWithDefaultProps(blocks), parentId || null, position);
     } else {
       addCoreBlock(block, parentId || null, position);
     }

src/core/components/sidepanels/panels/add-blocks/import-html.test.tsx

@@ -1,26 +1,26 @@
 import { getBlocksFromHTML } from "@/core/import-html/html-to-json";
-import { syncBlocksWithDefaults } from "@/runtime";
+import { syncBlocksWithDefaultProps } from "@/runtime";
 import { describe, expect, it, vi } from "vitest";
 
 // Mock the runtime module
 vi.mock("@/runtime", () => ({
-  syncBlocksWithDefaults: vi.fn((blocks) => blocks),
+  syncBlocksWithDefaultProps: vi.fn((blocks) => blocks),
 }));
 
-describe("ImportHTML - syncBlocksWithDefaults integration", () => {
-  it("should call syncBlocksWithDefaults when importing HTML with empty heading", () => {
+describe("ImportHTML - syncBlocksWithDefaultProps integration", () => {
+  it("should call syncBlocksWithDefaultProps when importing HTML with empty heading", () => {
     // HTML snippet with an empty heading (common scenario that causes the crash)
     const html = '<h1 class="text-2xl"></h1>';
 
     const blocks = getBlocksFromHTML(html);
-    const syncedBlocks = syncBlocksWithDefaults(blocks);
+    const syncedBlocks = syncBlocksWithDefaultProps(blocks);
 
-    // Verify that syncBlocksWithDefaults was called
-    expect(vi.mocked(syncBlocksWithDefaults)).toHaveBeenCalledWith(blocks);
+    // Verify that syncBlocksWithDefaultProps was called
+    expect(vi.mocked(syncBlocksWithDefaultProps)).toHaveBeenCalledWith(blocks);
     expect(syncedBlocks).toBeDefined();
   });
 
-  it("should call syncBlocksWithDefaults when importing HTML with multiple blocks", () => {
+  it("should call syncBlocksWithDefaultProps when importing HTML with multiple blocks", () => {
     const html = `
       <div class="container">
         <h1></h1>
@@ -30,19 +30,19 @@ describe("ImportHTML - syncBlocksWithDefaults integration", () => {
     `;
 
     const blocks = getBlocksFromHTML(html);
-    const syncedBlocks = syncBlocksWithDefaults(blocks);
+    const syncedBlocks = syncBlocksWithDefaultProps(blocks);
 
-    expect(vi.mocked(syncBlocksWithDefaults)).toHaveBeenCalled();
+    expect(vi.mocked(syncBlocksWithDefaultProps)).toHaveBeenCalled();
     expect(syncedBlocks).toBeDefined();
   });
 
   it("should handle paragraphs with empty content", () => {
     const html = '<p class="text-base"></p>';
 
     const blocks = getBlocksFromHTML(html);
-    const syncedBlocks = syncBlocksWithDefaults(blocks);
+    const syncedBlocks = syncBlocksWithDefaultProps(blocks);
 
-    expect(vi.mocked(syncBlocksWithDefaults)).toHaveBeenCalledWith(blocks);
+    expect(vi.mocked(syncBlocksWithDefaultProps)).toHaveBeenCalledWith(blocks);
     expect(syncedBlocks).toBeDefined();
   });
 
@@ -65,9 +65,9 @@ describe("ImportHTML - syncBlocksWithDefaults integration", () => {
     `;
 
     const blocks = getBlocksFromHTML(html);
-    const syncedBlocks = syncBlocksWithDefaults(blocks);
+    const syncedBlocks = syncBlocksWithDefaultProps(blocks);
 
-    expect(vi.mocked(syncBlocksWithDefaults)).toHaveBeenCalled();
+    expect(vi.mocked(syncBlocksWithDefaultProps)).toHaveBeenCalled();
     expect(syncedBlocks).toBeDefined();
   });
 });