feat(global): ✨ add handle type

add type in json, i mean when add props which is array, object like that it store in json in that type Ref: #54
wrappid · Oct 4, 2024 · ebc3f89 · ebc3f89
1 parent 6ef7f32
commit ebc3f89
Show file tree

Hide file tree

Showing 4 changed files with 108 additions and 160 deletions.
diff --git a/app/components/page-builder/content-components/CoreComponentRenderer.js b/app/components/page-builder/content-components/CoreComponentRenderer.js
@@ -1,16 +1,19 @@
-import React from 'react';
+import React from "react";
+
 import { CoreComponentsRegistry } from "@wrappid/core";
 
 const CoreComponentRenderer = ({ componentData }) => {
   const renderCoreComponent = (data) => {
-    if (!data || typeof data !== 'object') {
+    if (!data || typeof data !== "object") {
       return null;
     }
 
     const ComponentInfo = CoreComponentsRegistry[data.component];
     const ComponentToRender = ComponentInfo?.comp;
 
     if (!ComponentToRender) {
+
+      // eslint-disable-next-line no-console
       console.warn(`Component ${data.component} not found in CoreComponentsRegistry`);
       return null;
     }
@@ -23,10 +26,11 @@ const CoreComponentRenderer = ({ componentData }) => {
 
     // Add default props for specific components
     let defaultProps = { };
-    if (data.component === 'CoreIcon') {
-      defaultProps = { ...defaultProps, icon: 'star' }; // Example default icon
-    } else if (data.component === 'CoreAvatar') {
-      defaultProps = { ...defaultProps, alt: 'User' };
+
+    if (data.component === "CoreIcon") {
+      defaultProps = { ...defaultProps, icon: "star" }; // Example default icon
+    } else if (data.component === "CoreAvatar") {
+      defaultProps = { ...defaultProps, alt: "User" };
     }
     // Add more component-specific default props as needed
 

diff --git a/app/components/page-builder/content-components/DefaultCanvasViewer.js b/app/components/page-builder/content-components/DefaultCanvasViewer.js
@@ -1,17 +1,15 @@
-import React from 'react';
 import {
   CoreBox,
   CoreClasses,
   CoreIcon,
   CoreIconButton,
   CoreLayoutItem,
   CoreStack,
-  CoreTypographyBody1,
-  CoreComponentsRegistry
+  CoreTypographyBody1
 } from "@wrappid/core";
 import { useSelector, useDispatch } from "react-redux";
 
-import CoreComponentRenderer from './CoreComponentRenderer';
+import CoreComponentRenderer from "./CoreComponentRenderer";
 import { setActiveBox, setSelectedComponentPath, setPropsComponentPath, togglePropSelector } from "../../../actions/test.action";
 
 /**
@@ -96,7 +94,6 @@ export default function DefaultCanvasViewer() {
 
     return children.map((component, componentIndex) => {
       const currentPath = [...path, componentIndex];
-      const ComponentInfo = CoreComponentsRegistry[component.component];
 
       return (
         <CoreBox
@@ -131,6 +128,7 @@ export default function DefaultCanvasViewer() {
           {component.children && component.children.length > 0 && (
             <CoreBox styleClasses={[CoreClasses.MARGIN.MT2, CoreClasses.PADDING.P2, CoreClasses.BG.BG_GREY_100]}>
               <CoreTypographyBody1>Children:</CoreTypographyBody1>
+
               <CoreBox>
                 {renderComponents({ children: component.children }, placeholderIndex, currentPath)}
               </CoreBox>

diff --git a/app/components/page-builder/right-drawer-components/ComponentSelector.js b/app/components/page-builder/right-drawer-components/ComponentSelector.js
@@ -6,7 +6,7 @@ import {
   CoreListItem,
   CoreComponentsRegistry
 }
-from "@wrappid/core";
+  from "@wrappid/core";
 import { useSelector, useDispatch } from "react-redux";
 
 import { addComponent, setActiveBox, setSelectedComponentPath } from "../../../actions/test.action";
@@ -19,11 +19,12 @@ export default function ComponentSelector() {
   const dispatch = useDispatch();
   const activeBox = useSelector((state) => state.testBuilderReducer?.activeBox);
   const selectedComponentPath = useSelector((state) => state.testBuilderReducer?.selectedComponentPath);
-  const allCoreComponents = {...CoreComponentsRegistry};
+  const allCoreComponents = { ...CoreComponentsRegistry };
   const componentList = Object.keys(allCoreComponents);
+
+  // eslint-disable-next-line no-console
   console.log("componentList ", componentList);
 
-
   /**
    * Handles component selectioncomponentList
    * @param {string} component - Name of the selected component