feat(core): ✨ add defaultValidProps and styleClasses

handled defaultValidProps and styleClasses ref: #54
wrappid · Oct 15, 2024 · 4ffb965 · 4ffb965
1 parent 07f2e1a
commit 4ffb965
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 42 deletions.
diff --git a/app/components/page-builder/content-components/CoreComponentRenderer.js b/app/components/page-builder/content-components/CoreComponentRenderer.js
@@ -1,6 +1,34 @@
 import React from "react";
 
-import { CoreComponentsRegistry } from "@wrappid/core";
+import { CoreComponentsRegistry, CoreClasses } from "@wrappid/core";
+
+const propsHandler = (props, styleClasses, defaultProps = {}, componentSpecificDefaults = {}) => {
+  let processedProps = { ...props };
+
+  // Handle style classes constants
+  if (styleClasses) {
+    processedProps.styleClasses = styleClasses.map((styleClass) => {
+      const parts = styleClass.split(".");
+      let result = CoreClasses;
+
+      for (const part of parts) {
+        if (result && typeof result === "object" && part in result) {
+          result = result[part];
+        } else {
+          // If we can't find the nested property, return the original string
+          return styleClass;
+        }
+      }
+      return result;
+    });
+  }
+
+  // Handle default props for any specific components
+  const mergedDefaults = { ...defaultProps, ...componentSpecificDefaults };
+
+  // Merge defaults with provided props
+  return { ...mergedDefaults, ...processedProps };
+};
 
 const CoreComponentRenderer = ({ componentData }) => {
   const renderCoreComponent = (data) => {
@@ -12,36 +40,36 @@ const CoreComponentRenderer = ({ componentData }) => {
     const ComponentToRender = ComponentInfo?.comp;
 
     if (!ComponentToRender) {
-
       // eslint-disable-next-line no-console
       console.warn(`Component ${data.component} not found in CoreComponentsRegistry`);
       return null;
     }
 
+    // eslint-disable-next-line no-unused-vars
     const childrenElements = (data.children || []).map((child, index) =>
       renderCoreComponent({ ...child, key: index })
     );
 
-    // Add default Props
-
     // 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" };
-    }
+    let componentSpecificDefaults = {};
     // Add more component-specific default props as needed
 
+    // Use propsHandler to process props
+    const processedProps = propsHandler(
+      data.props || {},
+      data.styleClasses,
+      ComponentInfo?.defaultProps || {},
+      componentSpecificDefaults
+    );
+
     return React.createElement(
       ComponentToRender,
-      { 
+      {
         key: data.key,
-        ...defaultProps,
-        // Pass props here
-      },
-      childrenElements.length > 0 ? childrenElements : null
+        ...processedProps
+      }
+      // eslint-disable-next-line no-unused-vars
+      // childrenElements.length > 0 ? childrenElements : null
     );
   };
 

diff --git a/app/components/page-builder/content-components/DefaultCanvasViewer.js b/app/components/page-builder/content-components/DefaultCanvasViewer.js
@@ -4,7 +4,6 @@ import {
   CoreIcon,
   CoreIconButton,
   CoreLayoutItem,
-  CoreStack,
   CoreTypographyBody1
 } from "@wrappid/core";
 import { useSelector, useDispatch } from "react-redux";
@@ -137,8 +136,6 @@ 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>
@@ -158,9 +155,9 @@ export default function DefaultCanvasViewer() {
               <CoreLayoutItem key={sectionId} id={`${selectedLayout}.PLACEHOLDER.${sectionId}`}>
                 <CoreTypographyBody1>PLACEHOLDER {placeholderIndex + 1}</CoreTypographyBody1>
 
-                <CoreStack spacing={1}>
+                <CoreBox>
                   {renderComponents(componentsInBoxes[placeholderIndex] || {}, placeholderIndex)}
-                </CoreStack>
+                </CoreBox>
 
                 <CoreIconButton
                   variant="text"

diff --git a/app/components/page-builder/right-drawer-components/PropSelector.js b/app/components/page-builder/right-drawer-components/PropSelector.js
@@ -12,7 +12,9 @@ import {
   CoreTableRow,
   CoreTableCell,
   CoreClasses,
-  CoreTypographyBody2
+  CoreTypographyBody2,
+  defaultValidProps,
+  defaultValidEvents
 } from "@wrappid/core";
 import { useSelector, useDispatch } from "react-redux";
 
@@ -91,7 +93,7 @@ export default function PropSelector() {
     if (selectedComponent) {
       const selectedKey = selectedComponent.component;
       const component = CoreComponentsRegistry[selectedKey];
-      const props = component && component.comp && component.comp.validProps ? component.comp.validProps : [];
+      const props = [...(component && component.comp && component.comp.validProps ? component.comp.validProps : []), ...defaultValidProps, ...defaultValidEvents];
 
       setAvailableProps(props);
 
@@ -144,12 +146,14 @@ export default function PropSelector() {
 
       case "array":
         parsedValue = safeJSONParse(value);
-        if (parsedValue === null) return; // Don't update if parsing fails
+        if (parsedValue === null) {
+          return; // Don't update if parsing fails
+        }
         break;
 
       case "function":
         if (typeof value === "string") {
-          const parsedFunction = safeFunctionParse(value); // Parse the function string
+          const parsedFunction = safeFunctionParse(value);
 
           if (parsedFunction === null) return; // If parsing fails, do not update the state
           parsedValue = parsedFunction.toString();
@@ -182,6 +186,18 @@ export default function PropSelector() {
     const currentValue = currentProps[prop.name] ?? "";
     const selectedPropType = selectedType[prop.name];
 
+    // Special handling for styleClasses prop
+    if (prop.name === "styleClasses") {
+      return <StyleSelector />;
+    }
+
+    // For defaultValidProps, we need to determine the type
+    if (defaultValidProps.includes(prop.name)) {
+      const type = typeof currentValue;
+
+      return renderInputForType(prop, type, currentValue);
+    }
+
     if (prop.types && prop.types.length > 1) {
       // Multiple types, show a type selector
       return (
@@ -204,14 +220,16 @@ export default function PropSelector() {
             ))}
           </CoreSelect>
 
-          {/* Render the input based on the selected type */}
           {selectedPropType && renderInputForType(prop, selectedPropType, currentValue)}
         </>
       );
     } else if (prop.types && prop.types.length === 1) {
       // Single type, render the input directly
       return renderInputForType(prop, prop.types[0].type, currentValue);
     }
+
+    // Default case: render as string input
+    return renderInputForType(prop, "string", currentValue);
   };
 
   const renderInputForType = (prop, type, currentValue) => {
@@ -225,7 +243,14 @@ export default function PropSelector() {
         );
 
       case "number":
-        return;
+        return (
+          <CoreTextField
+            type={"number"}
+            fullWidth
+            value={currentValue}
+            onChange={(event) => handleChange(prop.name, event.target.value, type)}
+          />
+        );
 
       case "integer":
         return (
@@ -238,7 +263,16 @@ export default function PropSelector() {
         );
 
       case "object":
-        return;
+        return (
+          <CoreTextField
+            fullWidth
+            multiline
+            rows={3}
+            value={typeof currentValue === "object" ? JSON.stringify(currentValue, null, 2) : currentValue}
+            onChange={(event) => handleChange(prop.name, event.target.value, type)}
+            helperText={`Please enter a valid ${type}.`}
+          />
+        );
 
       case "array":
         return (
@@ -277,10 +311,11 @@ export default function PropSelector() {
   if (!selectedComponent) {
     return null;
   }
+
   return (
     <CoreBox>
       <CoreBox styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN, CoreClasses.ALIGNMENT.ALIGN_ITEMS_START]}>
-        <CoreTypographyBody2> {selectedComponent.component}</CoreTypographyBody2>
+        <CoreTypographyBody2>{selectedComponent.component}</CoreTypographyBody2>
       </CoreBox>
 
       <CoreTable>
@@ -291,22 +326,13 @@ export default function PropSelector() {
                 {prop.name}:
               </CoreTableCell>
 
-              <CoreTableCell styleClasses={[CoreClasses.PADDING.P0, CoreClasses.BORDER.BO]}>{renderPropInput(prop)}</CoreTableCell>
+              <CoreTableCell styleClasses={[CoreClasses.PADDING.P0, CoreClasses.BORDER.BO]}>
+                {renderPropInput(prop)}
+              </CoreTableCell>
             </CoreTableRow>
           ))}
-
-          <CoreTableRow>
-            <CoreTableCell styleClasses={[CoreClasses.PADDING.P0, CoreClasses.BORDER.BO]}>
-              styleClasses:
-            </CoreTableCell>
-
-            <CoreTableCell styleClasses={[CoreClasses.PADDING.P0, CoreClasses.BORDER.BO]}>
-              <StyleSelector />
-            </CoreTableCell>
-          </CoreTableRow>
-
         </CoreTableBody>
       </CoreTable>      
     </CoreBox>
   );
-}
+}