feat(global): ✨ added layout selection

now we can select any layout from right side menu and we can see those layout in left side

Ref: #54

app/actions/test.action.js

@@ -1,4 +1,4 @@
-import { RESET_TEST, TEST_FAILURE, TEST_SUCCESS } from "../types/test.types";
+import { RESET_TEST, SELECT_LAYOUT, TEST_FAILURE, TEST_SUCCESS } from "../types/test.types";
 
 export const testSuccess = () => {
   return (dispatch) => {
@@ -16,4 +16,11 @@ export const resetTest = () => {
   return (dispatch) => {
     dispatch({ type: RESET_TEST });
   };
+};
+
+export const selectLayout = (layoutName) => {
+  return {
+    payload: layoutName,
+    type   : SELECT_LAYOUT, 
+  };
 };

app/components/page-builder/content-components/ContentComp.js

@@ -1,19 +1,13 @@
 
 import { CoreBox, CoreButton, CoreClasses, CoreIcon, CoreIconButton } from "@wrappid/core";
 
-import PageMetaInput from "./PageMetaInput";
-import RenderLayoutViewerCanvas from "./RenderLayoutViewerCanvas";
 import ViewerOption from "./ViewerOption";
 
 export default function ContentComp() {
   return (
     <>
-      <PageMetaInput />
-
       <ViewerOption />
 
-      <RenderLayoutViewerCanvas />
-
       <CoreBox styleClasses={[CoreClasses.MARGIN.MT2, CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_FLEX_END]}>
         <CoreIconButton>
           <CoreIcon icon="devices"/>

app/components/page-builder/content-components/DefaultCanvasViewer.js

@@ -0,0 +1,26 @@
+import {
+  CoreBox, CoreClasses,
+  LayoutManager
+} from "@wrappid/core";
+import { useSelector } from "react-redux";
+
+export default function DefaultCanvasViewer() {
+  const selectedLayout = useSelector((state) => state.testBuilderReducer?.selectedLayout);
+  const layoutName = selectedLayout || "BlankLayout";
+
+  return (
+    <>
+      <CoreBox
+        styleClasses={[CoreClasses.BG.BG_DOT_GRID_1, CoreClasses.HEIGHT.VH_75, CoreClasses.OVERFLOW.OVERFLOW_AUTO, CoreClasses.PADDING.P2]}>
+
+        <CoreBox 
+          styleClasses={[CoreClasses.BG.BG_GREY_100, CoreClasses.PADDING.P1, CoreClasses.SHADOW.NORMAL, CoreClasses.OVERFLOW.OVERFLOW_AUTO]}
+        >
+          <LayoutManager key={layoutName + "-VIEW-MODE"} layoutName={layoutName} viewMode={true} />
+        </CoreBox>
+      </CoreBox>
+
+      {/* ↑↓ */}
+    </>
+  );
+}

app/components/page-builder/content-components/JsonCanvasViewer.js

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { CoreBox, CoreClasses } from "@wrappid/core";
+import { useSelector } from "react-redux";
+
+export default function JsonCanvasViewer() {
+  const selectedLayout = useSelector((state) => state.testBuilderReducer?.selectedLayout);
+  const layoutName = selectedLayout || "BlankLayout";
+
+  const [pageJson, setPageJson] = React.useState({ layout: layoutName });
+
+  // Update pageJson when layout changes
+  React.useEffect(() => {
+    if (layoutName) {
+      setPageJson((prevPageJson) => ({
+        ...prevPageJson,
+        layout: layoutName, // Replace the layout with the new selected layout
+      }));
+    }
+  }, [layoutName]);
+  return (
+    <>
+      <CoreBox component="pre" styleClasses={[CoreClasses.HEIGHT.VH_75, CoreClasses.OVERFLOW.OVERFLOW_AUTO, CoreClasses.PADDING.P2]}>
+        {JSON.stringify(pageJson, null, 2)}
+      </CoreBox>
+    </>
+  );
+}

app/components/page-builder/content-components/ViewerOption.js

@@ -1,29 +1,63 @@
 import React from "react";
 
 import { CoreBox, CoreClasses, CoreTab, CoreTabs } from "@wrappid/core";
+
+import DefaultCanvasViewer from "./DefaultCanvasViewer";
+import JsonCanvasViewer from "./JsonCanvasViewer";
+
+function CoreTabPanel(props) {
+  const { children, value, index, ...other } = props;
+
+  return (
+    <CoreBox
+      role="tabpanel"
+      hidden={value !== index}
+      id={`simple-tabpanel-${index}`}
+      aria-labelledby={`simple-tab-${index}`}
+      {...other}
+    >
+      {value === index && <CoreBox>{children}</CoreBox>}
+    </CoreBox>
+  );
+}
+
+function a11yProps(index) {
+  return {
+    "aria-controls": `simple-tabpanel-${index}`,
+    id             : `simple-tab-${index}`,
+  };
+}
+
 export default function ViewerOption() {
-  const [value, setValue] = React.useState("one");
+  const [value, setValue] = React.useState(0);
 
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
 
   return (
-    <CoreBox styleClasses={[CoreClasses.WIDTH.W_100, CoreClasses.MARGIN.MB2]}>
-      <CoreTabs
-        value={value}
-        onChange={handleChange}
-        aria-label="wrapped label tabs example"
-      >
-        <CoreTab
-          value="one"
-          label="Default"
-        />
-
-        <CoreTab value="two" label="JSON" />
-
-        <CoreTab value="three" label="Code" />
-      </CoreTabs>
+    <CoreBox styleClasses={[CoreClasses.WIDTH.W_100]}>
+      <CoreBox styleClasses={[CoreClasses.BORDER.BORDER_BOTTOM, CoreClasses.BORDER.BORDER_GREY_300]}>
+        <CoreTabs value={value} onChange={handleChange} aria-label="basic tabs example">
+          <CoreTab label="Default" {...a11yProps(0)} />
+
+          <CoreTab label="JSON" {...a11yProps(1)} />
+
+          <CoreTab label="Code" {...a11yProps(2)} />
+        </CoreTabs>
+      </CoreBox>
+
+      <CoreTabPanel value={value} index={0}>
+        <DefaultCanvasViewer/>
+      </CoreTabPanel>
+
+      <CoreTabPanel value={value} index={1}>
+        <JsonCanvasViewer />
+      </CoreTabPanel>
+
+      <CoreTabPanel value={value} index={2}>
+        Not developted yet
+      </CoreTabPanel>
     </CoreBox>
   );
 }

app/components/page-builder/right-drawer-components/LayoutSelector.js

@@ -0,0 +1,46 @@
+import React from "react";
+
+import { ComponentRegistryContext, CoreMenu } from "@wrappid/core";
+import { useDispatch } from "react-redux";
+
+import { selectLayout } from "../../../actions/test.action";
+
+export default function LayoutSelector() {
+  const componentRegistry = React.useContext(ComponentRegistryContext);
+  const dispatch = useDispatch();
+
+  const layoutComponentRegistry = Object.fromEntries(Object.entries(componentRegistry).filter((value) => {
+    return value[1].layout === true;
+  }));
+
+  const prepareLayoutMenu = (layoutComponentRegistry) => {
+    return Object.entries(layoutComponentRegistry)?.map(([layoutName]) => ({
+      Children: layoutName,
+      id      : layoutName,
+      label   : layoutName,
+      name    : layoutName?.trim(),
+      type    : "layoutName",
+    }));
+  };
+
+  // Handle menu selection and dispatch the action
+  const handleMenuSelect = (selectedItem) => {
+    const selectedLayoutName = selectedItem?.name; // Get the layout name
+
+    if (selectedLayoutName) {
+      dispatch(selectLayout(selectedLayoutName)); 
+    }
+  };
+
+  return (
+    <>
+      <CoreMenu
+        multiLevel={true}
+        menu={prepareLayoutMenu(layoutComponentRegistry)}
+        open={true}
+        displayIcon={true}
+        OnMenuClick={handleMenuSelect}
+      />
+    </>
+  );
+}

app/components/page-builder/right-drawer-components/RightDrawerComp.js

@@ -1,14 +1,17 @@
 import {
   CoreBox, CoreClasses, CoreGrid, CoreIcon, CoreIconButton, CoreSelect, CoreStack, CoreToolBox, CoreTypographyBody1 
 } from "@wrappid/core";
+
+import LayoutSelector from "./LayoutSelector";
 export default function RightDrawerComp() {
+
   return (
     <CoreStack spacing={2} styleClasses={[CoreClasses.HEIGHT.VH_100, CoreClasses.OVERFLOW.OVERFLOW_Y_SCROLL]}>
 
       {/* Tool box for Layout list */}
 
-      <CoreToolBox toolTitle="Layout Viewer Menu" resize="both">
-        <CoreTypographyBody1>Layout Viewer Menu</CoreTypographyBody1>
+      <CoreToolBox toolTitle="Select Layout" resize="both">
+        <LayoutSelector />
       </CoreToolBox>
 
       {/* Tool box for Component list */}

app/reducers.registry.js

@@ -1 +1,3 @@
-export const ReducersRegistry = {};
+import testBuilderReducer from "./reducers/testBuilder.reducer";
+
+export const ReducersRegistry = { testBuilderReducer: testBuilderReducer };

app/reducers/testBuilder.reducer.js

@@ -0,0 +1,24 @@
+import { SELECT_LAYOUT } from "../types/test.types";
+
+const initialState = {
+  error         : false,
+  message       : "This is a test module.",
+  selectedLayout: null, 
+  success       : false 
+};
+
+const testBuilderReducer = (state = initialState, action) => {
+  switch (action.type) {
+
+    case SELECT_LAYOUT:
+      return {
+        ...state,
+        selectedLayout: action.payload // Store the selected layout
+      };
+
+    default:
+      return state;
+  }
+};
+
+export default testBuilderReducer;

app/types/test.types.js

@@ -1,3 +1,4 @@
 export const TEST_SUCCESS = "TEST_SUCCESS";
 export const TEST_FAILURE = "TEST_FAILURE";
-export const RESET_TEST = "RESET_TEST";
+export const RESET_TEST = "RESET_TEST";
+export const SELECT_LAYOUT = "SELECT_LAYOUT";