feat: removed unwanted multi language code

chaibuilder · May 5, 2024 · a2ff334 · a2ff334
1 parent d47ba5d
commit a2ff334
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 131 deletions.
diff --git a/src/core/components/canvas/BlockFloatingActions.tsx b/src/core/components/canvas/BlockFloatingActions.tsx
@@ -48,7 +48,6 @@ type BlockActionProps = {
   selectedBlockElement: HTMLElement | undefined;
 };
 
-// FIXME: lazy load this component
 export const BlockActionsStatic = ({ selectedBlockElement, block }: BlockActionProps) => {
   const removeBlock = useRemoveBlocks();
   const duplicateBlock = useDuplicateBlocks();

diff --git a/src/core/components/canvas/static/Canvas.tsx b/src/core/components/canvas/static/Canvas.tsx
@@ -93,22 +93,22 @@ const useHandleCanvasClick = () => {
     }
     e.stopPropagation();
     const chaiBlock: HTMLElement = getTargetedBlock(e.target);
-    if (chaiBlock.getAttribute("data-block-parent")) {
+    if (chaiBlock?.getAttribute("data-block-parent")) {
       // check if target element has data-styles-prop attribute
       const styleProp = chaiBlock.getAttribute("data-style-prop") as string;
       const styleId = chaiBlock.getAttribute("data-style-id") as string;
       const blockId = chaiBlock.getAttribute("data-block-parent") as string;
       setStyleBlockIds([{ id: styleId, prop: styleProp, blockId }]);
       setIds([blockId]);
-    } else if (chaiBlock.getAttribute("data-block-id")) {
+    } else if (chaiBlock?.getAttribute("data-block-id")) {
       setIds([chaiBlock.getAttribute("data-block-id")]);
     }
   };
 };
 
 const handleMouseMove = throttle((e: any, setHighlightedId) => {
   const chaiBlock: HTMLElement = getTargetedBlock(e.target);
-  if (chaiBlock.getAttribute("data-style-id")) {
+  if (chaiBlock?.getAttribute("data-style-id")) {
     setHighlightedId(chaiBlock.getAttribute("data-style-id"));
   }
 }, 100);

diff --git a/src/core/components/canvas/static/HeadTags.tsx b/src/core/components/canvas/static/HeadTags.tsx
@@ -9,7 +9,7 @@ import {
   useSelectedBlockIds,
   useSelectedStylingBlocks,
 } from "../../../hooks";
-import { useAtom } from "jotai/index";
+import { useAtom } from "jotai";
 import { draggedBlockIdAtom } from "../../../atoms/ui.ts";
 // @ts-ignore
 
@@ -40,7 +40,6 @@ export const HeadTags = ({ model }: { model: string }) => {
   const headingFont: string = get(brandingOptions, "headingFont", "DM Sans");
   const bodyFont: string = get(brandingOptions, "bodyFont", "DM Sans");
 
-  // FIXME: Something is wrong with this code
   useEffect(() => {
     const primary = get(brandingOptions, "primaryColor", "#000");
     const secondary = get(brandingOptions, "secondaryColor", "#FFF");
@@ -111,14 +110,14 @@ export const HeadTags = ({ model }: { model: string }) => {
   useEffect(() => {
     if (!highlightedBlockStyle) return;
     highlightedBlockStyle.textContent = highlightedId
-      ? `[data-style-id="${highlightedId}"]{ outline: 1px solid orange !important; outline-offset: -1px;}`
+      ? `[data-style-id="${highlightedId}"]{ outline: 1px solid #42a1fc !important; outline-offset: -1px;}`
       : "";
   }, [highlightedId, selectedBlockIds, highlightedBlockStyle]);
 
   useEffect(() => {
     if (!selectedStylingBlocks) return;
     selectedStylingBlocks.textContent = `${map(stylingBlockIds, ({ id }: any) => `[data-style-id="${id}"]`).join(",")}{
-                outline: 1px solid orange !important; outline-offset: -1px;
+                outline: 1px solid #42a1fc !important; outline-offset: -1px;
             }`;
   }, [stylingBlockIds, selectedStylingBlocks]);
 

diff --git a/src/core/components/settings/BlockSettings.tsx b/src/core/components/settings/BlockSettings.tsx
@@ -1,79 +1,12 @@
-import { RJSFSchema, UiSchema } from "@rjsf/utils";
-import RjForm, { IChangeEvent } from "@rjsf/core";
-import validator from "@rjsf/validator-ajv8";
-import { capitalize, cloneDeep, each, get, includes, isEmpty, keys, map } from "lodash";
-import {
-  useActiveLanguage,
-  useBuilderProp,
-  useCanvasHistory,
-  useSelectedBlock,
-  useUpdateBlocksPropsRealtime,
-} from "../../hooks";
-import { IconPickerField, ImagePickerField, LinkField, RTEField } from "../../../ui/widgets";
-import { getBlockJSONFromSchemas, getBlockJSONFromUISchemas } from "../../functions/Controls.ts";
+import { IChangeEvent } from "@rjsf/core";
+import { capitalize, cloneDeep, each, get, isEmpty, keys, map } from "lodash";
+import { useBuilderProp, useCanvasHistory, useSelectedBlock, useUpdateBlocksPropsRealtime } from "../../hooks";
 import { ChaiControlDefinition, SingleLineText } from "@chaibuilder/runtime/controls";
 import DataBindingSetting from "../../../ui/widgets/rjsf/widgets/data-binding";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "../../../ui";
-import { BindingWidget } from "../../../ui/widgets/rjsf/widgets/binding.tsx";
-import { memo, useMemo } from "react";
+import { useMemo } from "react";
 import { getBlockComponent } from "@chaibuilder/runtime";
-
-/**
- *
- * @param param0
- * @returns Form for Static and name fields
- */
-const Form = memo(
-  ({
-    createHistorySnapshot,
-    properties,
-    formData,
-    onChange,
-  }: {
-    formData: any;
-    properties: any;
-    createHistorySnapshot: () => void;
-    onChange: ({ formData }: any, key?: string) => void;
-  }) => {
-    const [activeLang] = useActiveLanguage();
-
-    const propsSchema: RJSFSchema = { type: "object", properties: {} };
-    const uiSchema: UiSchema = {};
-
-    Object.keys(properties).forEach((key) => {
-      const control = properties[key];
-      if (includes(["slot", "styles"], control.type)) return;
-      const propKey = get(control, "i18n", false) ? `${key}-${activeLang}` : key;
-      propsSchema.properties[propKey] = getBlockJSONFromSchemas(control, activeLang);
-      uiSchema[propKey] = getBlockJSONFromUISchemas(control, activeLang);
-    });
-
-    return (
-      <RjForm
-        widgets={{
-          binding: BindingWidget,
-          richtext: RTEField,
-          icon: IconPickerField,
-          image: ImagePickerField,
-        }}
-        fields={{
-          link: LinkField,
-        }}
-        idSeparator="."
-        autoComplete="off"
-        omitExtraData={false}
-        liveOmit={false}
-        liveValidate
-        validator={validator}
-        uiSchema={uiSchema}
-        onBlur={createHistorySnapshot}
-        schema={propsSchema}
-        formData={formData}
-        onChange={onChange}
-      />
-    );
-  },
-);
+import { JSONForm } from "./JSONForm.tsx";
 
 /**
  *
@@ -114,7 +47,7 @@ export default function BlockSettings() {
 
   return (
     <div className="overflow-x-hidden">
-      <Form
+      <JSONForm
         onChange={updateRealtime}
         createHistorySnapshot={createHistorySnapshot}
         formData={formData}
@@ -159,7 +92,7 @@ export default function BlockSettings() {
               ) : (
                 ""
               )}
-              <Form
+              <JSONForm
                 onChange={updateRealtime}
                 createHistorySnapshot={createHistorySnapshot}
                 formData={formData}
@@ -169,7 +102,7 @@ export default function BlockSettings() {
           </AccordionItem>
         </Accordion>
       ) : (
-        <Form
+        <JSONForm
           onChange={updateRealtime}
           createHistorySnapshot={createHistorySnapshot}
           formData={formData}

diff --git a/src/core/components/settings/JSONForm.tsx b/src/core/components/settings/JSONForm.tsx
@@ -0,0 +1,55 @@
+import { memo } from "react";
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import { includes } from "lodash";
+import { getBlockJSONFromSchemas, getBlockJSONFromUISchemas } from "../../functions/Controls.ts";
+import RjForm from "@rjsf/core";
+import { BindingWidget } from "../../../ui/widgets/rjsf/widgets/binding.tsx";
+import { IconPickerField, ImagePickerField, LinkField, RTEField } from "../../../ui";
+import validator from "@rjsf/validator-ajv8";
+
+type JSONFormType = {
+  formData: any;
+  properties: any;
+  createHistorySnapshot: () => void;
+  onChange: ({ formData }: any, key?: string) => void;
+};
+/**
+ *
+ * @param param0
+ * @returns JSONForm for Static and name fields
+ */
+export const JSONForm = memo(({ createHistorySnapshot, properties, formData, onChange }: JSONFormType) => {
+  const propsSchema: RJSFSchema = { type: "object", properties: {} };
+  const uiSchema: UiSchema = {};
+
+  Object.keys(properties).forEach((key) => {
+    const control = properties[key];
+    if (includes(["slot", "styles"], control.type)) return;
+    const propKey = key;
+    propsSchema.properties[propKey] = getBlockJSONFromSchemas(control);
+    uiSchema[propKey] = getBlockJSONFromUISchemas(control);
+  });
+
+  return (
+    <RjForm
+      widgets={{
+        binding: BindingWidget,
+        richtext: RTEField,
+        icon: IconPickerField,
+        image: ImagePickerField,
+      }}
+      fields={{ link: LinkField }}
+      idSeparator="."
+      autoComplete="off"
+      omitExtraData={false}
+      liveOmit={false}
+      liveValidate
+      validator={validator}
+      uiSchema={uiSchema}
+      onBlur={createHistorySnapshot}
+      schema={propsSchema}
+      formData={formData}
+      onChange={onChange}
+    />
+  );
+});
diff --git a/src/core/functions/Controls.ts b/src/core/functions/Controls.ts
@@ -9,7 +9,7 @@ import {
 import { generateUUID } from "./Functions.ts";
 import { I18N_KEY, SLOT_KEY } from "../constants/CONTROLS";
 
-export const getBlockJSONFromUISchemas = (control: ChaiControlDefinition, activeLang: string = "") => {
+export const getBlockJSONFromUISchemas = (control: ChaiControlDefinition) => {
   switch (control.type) {
     case "singular":
       return (control as ControlDefinition).uiSchema;
@@ -22,8 +22,8 @@ export const getBlockJSONFromUISchemas = (control: ChaiControlDefinition, active
         // eslint-disable-next-line no-shadow
         const control = modelProperties[key];
         if (includes(["slot", "styles"], control.type)) return;
-        const propKey = get(control, "i18n", false) ? `${key}-${activeLang}` : key;
-        modelProps[propKey] = getBlockJSONFromUISchemas(control, activeLang);
+        const propKey = key;
+        modelProps[propKey] = getBlockJSONFromUISchemas(control);
       });
       return modelProps;
     case "list":
@@ -37,16 +37,16 @@ export const getBlockJSONFromUISchemas = (control: ChaiControlDefinition, active
         // eslint-disable-next-line no-shadow
         const control = itemProperties[key];
         if (includes(["slot", "styles"], control.type)) return;
-        const propKey = get(control, "i18n", false) ? `${key}-${activeLang}` : key;
-        listProps.items[propKey] = getBlockJSONFromUISchemas(control, activeLang);
+        const propKey = key;
+        listProps.items[propKey] = getBlockJSONFromUISchemas(control);
       });
       return listProps;
     default:
       return {};
   }
 };
 
-export const getBlockJSONFromSchemas = (control: ChaiControlDefinition, activeLang: string = "") => {
+export const getBlockJSONFromSchemas = (control: ChaiControlDefinition) => {
   switch (control.type) {
     case "singular":
       return (control as ControlDefinition).schema;
@@ -63,8 +63,8 @@ export const getBlockJSONFromSchemas = (control: ChaiControlDefinition, activeLa
         // eslint-disable-next-line no-shadow
         const control = modelProperties[key];
         if (includes(["slot", "styles"], control.type)) return;
-        const propKey = get(control, "i18n", false) ? `${key}-${activeLang}` : key;
-        modelProps.properties[propKey] = getBlockJSONFromSchemas(control, activeLang);
+        const propKey = key;
+        modelProps.properties[propKey] = getBlockJSONFromSchemas(control);
       });
       return modelProps;
     case "list":
@@ -83,8 +83,8 @@ export const getBlockJSONFromSchemas = (control: ChaiControlDefinition, activeLa
         // eslint-disable-next-line no-shadow
         const control = itemProperties[key];
         if (includes(["slot", "styles"], control.type)) return;
-        const propKey = get(control, "i18n", false) ? `${key}-${activeLang}` : key;
-        listProps.items.properties[propKey] = getBlockJSONFromSchemas(control, activeLang);
+        const propKey = key;
+        listProps.items.properties[propKey] = getBlockJSONFromSchemas(control);
         set(listProps.items, "title", get(control, "itemTitle", `${listTitle} item`));
       });
       return listProps;

diff --git a/src/core/hooks/index.ts b/src/core/hooks/index.ts
@@ -41,7 +41,6 @@ import { useFeatureSupport } from "./useFeatureSupport";
 import { useBuilderProp } from "./useBuilderProp";
 import { useUILibraryBlocks } from "./useUiLibraries";
 
-export * from "./useLanguage";
 export {
   useBuilderReset,
   useFeatureSupport,

diff --git a/src/core/hooks/useLanguage.ts b/src/core/hooks/useLanguage.ts