feat: added support for builder locale

v1.1.17

Author: surajair

package.json

@@ -5,7 +5,7 @@
   "author": "Suraj Air",
   "license": "BSD-3-Clause",
   "homepage": "https://chaibuilder.com",
-  "version": "1.1.16",
+  "version": "1.1.17",
   "type": "module",
   "repository": {
     "type": "git",

src/Editor.tsx

@@ -3,26 +3,27 @@ import { useAtom } from "jotai";
 import { useTranslation } from "react-i18next";
 import { lsBlocksAtom, lsBrandingOptionsAtom, lsProvidersAtom } from "./atoms-dev.ts";
 
-function ChaiEditor() {
+let PreviewMessage = () => {
   const { t } = useTranslation();
+  return (
+    <div className={"font-normal text-sm"}>
+      {t("dev_mode_message")}{" "}
+      <a target={"_blank"} className="text-orange-500 underline" href={"/preview"}>
+        /preview
+      </a>{" "}
+      {t("to_see_page_preview")}
+    </div>
+  );
+};
+
+function ChaiEditor() {
   const [blocks, setBlocks] = useAtom(lsBlocksAtom);
   const [brandingOptions, setBrandingOptions] = useAtom(lsBrandingOptionsAtom);
   const [providers, setProviders] = useAtom(lsProvidersAtom);
+
   return (
     <ChaiBuilderEditor
-      topBarComponents={{
-        left: [
-          () => (
-            <div className={"font-normal text-sm"}>
-              {t("dev_mode_message")}{" "}
-              <a target={"_blank"} className="text-orange-500 underline" href={"/preview"}>
-                /preview
-              </a>{" "}
-              {t("to_see_page_preview")}
-            </div>
-          ),
-        ],
-      }}
+      topBarComponents={{ left: [PreviewMessage] }}
       blocks={blocks}
       dataProviders={providers}
       brandingOptions={brandingOptions}

src/core/locales/load.ts

@@ -29,4 +29,4 @@ i18n
     },
   });
 
-export default "";
+export default i18n;

src/core/main/ChaiBuilderEditor.tsx

@@ -49,6 +49,10 @@ const ChaiBuilderComponent = (props: ChaiBuilderEditorProps) => {
     reset();
   }, [props.blocks]);
 
+  useEffect(() => {
+    i18n.changeLanguage(props.locale || "en");
+  }, [props.locale]);
+
   useEffect(() => {
     setBrandingOptions(props.brandingOptions);
   }, [props.brandingOptions, setBrandingOptions]);

src/core/types/chaiBuilderEditorProps.ts

@@ -1,8 +1,8 @@
 import { ChaiBlock } from "./ChaiBlock";
-import React, { LazyExoticComponent } from "react";
+import React from "react";
 import { ChaiPage, PredefinedBlock } from "./index";
 
-interface UiLibrary {
+interface UILibrary {
   name: string;
   uuid: string;
 }
@@ -12,18 +12,17 @@ interface Block {
   [key: string]: any;
 }
 
-type ReactComponents = React.LazyExoticComponent<any> | React.FC<any>;
+type ReactComponentType = React.ComponentType<any>;
 
 export interface ChaiBuilderEditorProps {
   blocks?: ChaiBlock[];
   editable?: boolean;
-  nonEditableComponent?: ReactComponents;
+  locale?: string;
+  nonEditableComponent?: ReactComponentType;
   brandingOptions?: Record<string, string>;
   canvas?: React.FC<any>;
   previewLink?: string;
-  canvasTopBarComponents?: {
-    right?: React.LazyExoticComponent<any>[];
-  };
+  canvasTopBarComponents?: { right?: ReactComponentType[] };
   dataBindingSupport?: boolean;
   dataProviders?: { providerKey: string; args: Record<string, any> }[];
   darkMode?: boolean;
@@ -41,17 +40,17 @@ export interface ChaiBuilderEditorProps {
   onSavePage: ({ blocks, providers }: any) => Promise<boolean>;
   onSaveBrandingOptions: (brandingOptions: any) => Promise<boolean>;
   onSyncStatusChange?: (syncStatus: "UNSAVED" | "SAVED") => void;
-  previewComponent?: LazyExoticComponent<any>;
+  previewComponent?: ReactComponentType;
   sideBarComponents?: {
-    bottom?: ReactComponents[];
-    top?: { icon: React.FC<any> | string; name: string; panel: ReactComponents }[];
+    bottom?: ReactComponentType[];
+    top?: { icon: ReactComponentType | string; name: string; panel: ReactComponentType }[];
   };
   topBarComponents?: {
-    center?: ReactComponents[];
-    left?: ReactComponents[];
-    right?: ReactComponents[];
+    center?: ReactComponentType[];
+    left?: ReactComponentType[];
+    right?: ReactComponentType[];
   };
-  uiLibraries?: UiLibrary[];
+  uiLibraries?: UILibrary[];
   uploadMediaCallback?: (file: File) => Promise<{ url: string }>;
   getPages?: () => Promise<ChaiPage[]>;
   unsplashAccessKey?: string;