feat(global): 💄 update ui

just hardcoded to build a static ui for pagebuilder Ref: #54
wrappid · Oct 15, 2024 · 8362aca · 8362aca
1 parent 07f2e1a
commit 8362aca
Show file tree

Hide file tree

Showing 6 changed files with 223 additions and 100 deletions.
diff --git a/app/components/page-builder/PageBuilder.js b/app/components/page-builder/PageBuilder.js
@@ -1,11 +1,17 @@
 import { CoreLayoutItem, RightDrawerLayout } from "@wrappid/core";
 
 import ContentComp from "./content-components/ContentComp";
+import HeaderComp from "./header-components/HeaderComp";
 import RightDrawerComp from "./right-drawer-components/RightDrawerComp";
 
 export default function PageBuilder() {
   return (
-    <>  
+    <> 
+      {/* Header area of pagebuilder */} 
+      <CoreLayoutItem id={RightDrawerLayout.PLACEHOLDER.Header}>
+        <HeaderComp />
+      </CoreLayoutItem>
+
       {/* Content area of pagebuilder */}
       <CoreLayoutItem id={RightDrawerLayout.PLACEHOLDER.Content}>
         <ContentComp />

diff --git a/app/components/page-builder/content-components/ContentComp.js b/app/components/page-builder/content-components/ContentComp.js
@@ -1,5 +1,4 @@
-
-import { CoreBox, CoreButton, CoreClasses, CoreIcon, CoreIconButton } from "@wrappid/core";
+/* eslint-disable etc/no-commented-out-code */
 
 import ViewerOption from "./ViewerOption";
 
@@ -8,15 +7,15 @@ export default function ContentComp() {
     <>
       <ViewerOption />
 
-      <CoreBox styleClasses={[CoreClasses.MARGIN.MT2, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END]}>
+      {/* <CoreBox styleClasses={[CoreClasses.MARGIN.MT2, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END]}>
         <CoreIconButton>
           <CoreIcon icon="devices"/>
         </CoreIconButton>
 
         <CoreButton label="Preview" variant="text"/>
 
         <CoreButton label="Publish"/>
-      </CoreBox>
+      </CoreBox> */}
     </>
   );
 }
diff --git a/app/components/page-builder/header-components/HeaderComp.js b/app/components/page-builder/header-components/HeaderComp.js
@@ -0,0 +1,83 @@
+import {
+  CoreBox, CoreButton, CoreClasses, CoreIcon, CoreIconButton, CoreInput, CoreTooltip, CoreTypographyBody2 
+} from "@wrappid/core";
+
+export default function HeaderComp() {
+  return (
+    <CoreBox styleClasses={[
+      CoreClasses.PADDING.P2,
+      CoreClasses.DISPLAY.FLEX,
+      CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER,
+      CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_SPACE_BETWEEN,
+      CoreClasses.BG.BG_GREY_100
+    ]}>
+      <CoreBox styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.GAP.GAP_2]}>
+        <CoreButton
+          variant="text"
+          styleClasses={[CoreClasses.GAP.GAP_1, CoreClasses.COLOR.TEXT_BLACK_50]}>
+          <CoreTypographyBody2 styleClasses={[CoreClasses.MARGIN.M0, CoreClasses.COLOR.TEXT_BLACK_50]}>Example Module</CoreTypographyBody2>
+        </CoreButton>  
+
+        <CoreInput
+          id="outlined-basic"
+          placeholder="Page Name"
+          styleClasses={[CoreClasses.MARGIN.M0]}
+        />
+      </CoreBox>
+
+      <CoreBox styleClasses={[CoreClasses.DISPLAY.FLEX, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER, CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER, CoreClasses.GAP.GAP_3]}>
+        <CoreTooltip title= "Layout Selector" arrow>
+          <CoreIconButton>
+            <CoreIcon icon="view_module"/>
+          </CoreIconButton>
+        </CoreTooltip>
+
+        <CoreTooltip title= "Component Selector" arrow>
+          <CoreIconButton>
+            <CoreIcon icon="widgets"/>
+          </CoreIconButton>
+        </CoreTooltip>
+
+        <CoreTooltip title= "Props Selector" arrow>
+          <CoreIconButton>
+            <CoreIcon icon="tune"/>
+          </CoreIconButton>
+        </CoreTooltip>
+
+        <CoreTooltip title= "Theme Selector" arrow>
+          <CoreIconButton>
+            <CoreIcon icon="palette"/>
+          </CoreIconButton>
+        </CoreTooltip>
+
+        <CoreTooltip title= "Event Selector" arrow>
+          <CoreIconButton>
+            <CoreIcon icon="event"/>
+          </CoreIconButton>
+        </CoreTooltip>
+
+        <CoreTooltip title= "Device Selector" arrow>
+          <CoreIconButton>
+            <CoreIcon icon="devices"/>
+          </CoreIconButton>
+        </CoreTooltip>
+      </CoreBox>
+
+      <CoreBox styleClasses={[
+        CoreClasses.DISPLAY.FLEX,
+        CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER,
+        CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER,
+        CoreClasses.GAP.GAP_2,
+        CoreClasses.COLOR.TEXT_BLACK_50
+      ]}>
+        <CoreButton label="Preview" variant="text" color="inherit"/>
+
+        <CoreButton label="History" variant="text" color="inherit"/>
+
+        <CoreButton label="Request for Review" variant="text" color="inherit"/>
+
+        <CoreButton label="Save" />
+      </CoreBox>
+    </CoreBox>
+  );
+}
diff --git a/app/components/page-builder/right-drawer-components/ComponentSelector.js b/app/components/page-builder/right-drawer-components/ComponentSelector.js
@@ -5,11 +5,7 @@ import {
   CoreList,
   CoreListItem,
   CoreComponentsRegistry,
-  CoreAccordionSummary,
-  CoreIcon,
-  CoreAccordion,
-  CoreAccordionDetail,
-  CoreTypographyBody2
+  CoreTypographyBody1
 } from "@wrappid/core";
 import { useSelector, useDispatch } from "react-redux";
 
@@ -30,16 +26,6 @@ export default function ComponentSelector() {
     Object.entries(CoreComponentsRegistry).filter(([_, value]) => value.layout === true) // Changed _ to key
   );
 
-  const prepareLayoutMenu = (layoutComponentRegistry) => {
-    return Object.entries(layoutComponentRegistry).map(([layoutName]) => ({
-      Children: layoutName,
-      id      : layoutName,
-      label   : layoutName.trim(),
-      name    : layoutName.trim(),
-      type    : "layoutName",
-    }));
-  };
-
   const allCoreComponents = { ...CoreComponentsRegistry };
   const componentList = Object.keys(allCoreComponents).filter(key => !Object.hasOwn(layoutComponentRegistry, key));
 
@@ -53,59 +39,27 @@ export default function ComponentSelector() {
     dispatch(setSelectedComponentPath(null)); // Reset selectedComponentPath after adding a component
   };
 
+  if (activeBox === null) {
+    return (
+      <CoreBox>
+        <CoreTypographyBody1>Click &quot;+&quot; on the to add a component</CoreTypographyBody1>
+      </CoreBox>
+    );
+  }
+
   return (
     <CoreBox>
-      <CoreAccordion>
-        <CoreAccordionSummary
-          expandIcon={<CoreIcon icon="keyboard_arrow_down" />}
-          aria-controls="panel2-content"
-          id="panel2-header"
-        >
-          <CoreTypographyBody2>
-            Components
-          </CoreTypographyBody2>
-        </CoreAccordionSummary>
-
-        <CoreAccordionDetail>
-          <CoreList variant="grid">
-            {componentList.map((comp) => (
-              <CoreListItem
-                onClick={() => handleComponentSelect(comp)}
-                key={comp}
-                styleClasses={[CoreClasses.CURSOR.CURSOR_POINTER]}
-              >
-                {comp}
-              </CoreListItem>
-            ))}
-          </CoreList>
-        </CoreAccordionDetail>
-      </CoreAccordion>
-
-      <CoreAccordion>
-        <CoreAccordionSummary
-          expandIcon={<CoreIcon icon="keyboard_arrow_down" />}
-          aria-controls="panel2-content"
-          id="panel2-header"
-        >
-          <CoreTypographyBody2>
-            Layouts
-          </CoreTypographyBody2>
-        </CoreAccordionSummary>
-
-        <CoreAccordionDetail>
-          <CoreList variant="grid">
-            {prepareLayoutMenu(layoutComponentRegistry).map((layoutItem) => (
-              <CoreListItem
-                onClick={() => handleComponentSelect(layoutItem.name)}
-                key={layoutItem.id}
-                styleClasses={[CoreClasses.CURSOR.CURSOR_POINTER]}
-              >
-                {layoutItem.label}
-              </CoreListItem>
-            ))}
-          </CoreList>
-        </CoreAccordionDetail>
-      </CoreAccordion>
+      <CoreList variant="grid">
+        {componentList.map((comp) => (
+          <CoreListItem
+            onClick={() => handleComponentSelect(comp)}
+            key={comp}
+            styleClasses={[CoreClasses.CURSOR.CURSOR_POINTER]}
+          >
+            {comp}
+          </CoreListItem>
+        ))}
+      </CoreList>
     </CoreBox>
   );
 }
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,8 @@ import {
   CoreTableRow,
   CoreTableCell,
   CoreClasses,
-  CoreTypographyBody2
+  CoreTypographyBody2,
+  CoreTypographyBody1
 } from "@wrappid/core";
 import { useSelector, useDispatch } from "react-redux";
 
@@ -275,7 +276,9 @@ export default function PropSelector() {
   };
 
   if (!selectedComponent) {
-    return null;
+    return(
+      <CoreTypographyBody1>Click prop button on the to add a props</CoreTypographyBody1>
+    );
   }
   return (
     <CoreBox>