diff --git a/src/components/layouts/ComplexLayout.js b/src/components/layouts/ComplexLayout.js
deleted file mode 100644
index 3484ac5..0000000
--- a/src/components/layouts/ComplexLayout.js
+++ /dev/null
@@ -1,61 +0,0 @@
-// eslint-disable-next-line unused-imports/no-unused-imports, no-unused-vars
-import React from "react";
-
-import { CoreBox, CoreTypographyBody1, TwoColumnLayout } from "@wrappid/core";
-
-import CoreLayoutPlaceholder from "./CoreLayoutPlaceholder";
-
-export default function ComplexLayout() {
- return (
- <>
- Complex Layout
-
-
-
- Layout Placeholder - placeholder9
-
-
-
-
- Layout Placeholder - placeholder1
-
- eslint-disable-next-line etc/no-commented-out-code
-
-
-
- Layout Placeholder - placeholder4
-
-
-
- Layout Placeholder - placeholder5
-
-
- Layout Placeholder - placeholder7
-
-
-
-
- {/* eslint-disable-next-line etc/no-commented-out-code */}
- {/*
- Layout Placeholder - placeholder2
-
-
- Layout Placeholder - placeholder6
-
-
-
- Layout Placeholder - placeholder8
-
- */}
-
-
- Layout Placeholder - placeholder3
-
-
- );
-}
-
-ComplexLayout.PLACEHOLDER = {
- CONTENT1: "content1", CONTENT2: "content2", CONTENT3: "content3", CONTENT4: "content4", CONTENT5: "content5", CONTENT6: "content6", CONTENT7: "content7", CONTENT8: "content8"
-};
-
\ No newline at end of file
diff --git a/src/components/layouts/ComplexLayoutPage.js b/src/components/layouts/ComplexLayoutPage.js
deleted file mode 100644
index d0a4abd..0000000
--- a/src/components/layouts/ComplexLayoutPage.js
+++ /dev/null
@@ -1,56 +0,0 @@
-// eslint-disable-next-line unused-imports/no-unused-imports, no-unused-vars
-import React from "react";
-
-import { CoreTypographyBody1 } from "@wrappid/core";
-
-import CoreLayoutItem from "./CoreLayoutItem";
-
-export default function ComplexLayoutPage() {
- return (
- <>
-
- Layout Item - placeholder1
-
-
- Two Column Layout - Layout Item - column1
-
-
-
- Two Column Layout - Layout Item - column2
-
-
-
- Layout Item - placeholder4
-
-
-
- Layout Item - placeholder5
-
-
-
- Layout Item - placeholder7
-
-
-
-
- Layout Item - placeholder2
-
-
- Layout Item - placeholder6
-
-
-
- Layout Item - placeholder8
-
-
-
-
- Layout Item - placeholder3
-
-
-
- Layout Item - placeholder9
-
-
- );
-}
diff --git a/src/components/layouts/CoreLayoutItem.js b/src/components/layouts/CoreLayoutItem.js
deleted file mode 100644
index 189f701..0000000
--- a/src/components/layouts/CoreLayoutItem.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-
-import { CoreBox } from "@wrappid/core";
-
-export default function CoreLayoutItem(props) {
- const { id, children, ...restProps } = props;
-
- React.useEffect(() => {
- // eslint-disable-next-line no-console
- console.log(restProps);
- }, []);
-
- return (
-
- {children}
-
- );
-}
diff --git a/src/components/layouts/CoreLayoutPlaceholder.js b/src/components/layouts/CoreLayoutPlaceholder.js
deleted file mode 100644
index 6714fdc..0000000
--- a/src/components/layouts/CoreLayoutPlaceholder.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from "react";
-
-export default function CoreLayoutPlaceholder(props) {
- const { children, ...restProps } = props;
-
- React.useEffect(() => {
- // eslint-disable-next-line no-console
- console.log(restProps);
- }, []);
-
- return children;
-}
diff --git a/src/components/layouts/LayoutManager.js b/src/components/layouts/LayoutManager.js
deleted file mode 100644
index 180afa6..0000000
--- a/src/components/layouts/LayoutManager.js
+++ /dev/null
@@ -1,354 +0,0 @@
-/* eslint-disable import/order */
-/* eslint-disable no-console */
-import React from "react";
-
-// eslint-disable-next-line import/no-unresolved
-import { UPDATE_DEVELOPMENT_DATA, WrappidDataContext, WrappidDispatchContext } from "@wrappid/styles";
-
-import {
- BlankLayout,
- ComponentNotFound,
- ComponentRegistryContext,
- CoreBox,
- CoreClasses,
- CoreTypographyBody1
-} from "@wrappid/core";
-
-import CoreLayoutItem from "./CoreLayoutItem";
-import CoreLayoutPlaceholder from "./CoreLayoutPlaceholder";
-
-export const COMPONENT_TYPES = {
- CORE_LAYOUT_ITEM : CoreLayoutItem.name,
- CORE_LAYOUT_PLACEHOLDER: CoreLayoutPlaceholder.name,
- REACT_FORWARD_REF : React.forwardRef.$$typeof,
- REACT_FRAGMENT : React.Fragment.$$typeof
-};
-
-export default function LayoutManager(props) {
- let layoutItems = {};
- const { pageName, layoutName } = props;
- const { development } = React.useContext(WrappidDataContext);
- const componentRegistry = React.useContext(ComponentRegistryContext);
- const dispatch = React.useContext(WrappidDispatchContext);
-
- // eslint-disable-next-line no-unused-vars
- const [devData, setDevData] = React.useState(development);
-
- React.useEffect(() => {
- dispatch({ payload: devData, type: UPDATE_DEVELOPMENT_DATA });
- }, [devData]);
-
- /**
- * @todo
- * find out all the placeholder's rplacable items of the page component
- *
- * @param {*} pageChildren
- * @param {*} layoutItems
- * @returns layoutItems
- */
- const prepareLayoutItems = (PageComponent) => {
- /* get page childrens */
- let pageChildren = PageComponent?.props?.children;
-
- // always make it an array
- if (pageChildren && !Array.isArray(pageChildren)) {
- pageChildren = [pageChildren];
- }
-
- if (pageChildren && pageChildren.length > 0) {
- // filter layout items from all child elements
- let tempLayoutItems = pageChildren?.filter(elem => elem?.type?.name === CoreLayoutItem.name);
-
- // tempLayoutItems exists and length is > 0
- if (tempLayoutItems && tempLayoutItems?.length > 0) {
- tempLayoutItems?.forEach(eachLayoutItem => {
- // check if have any layout items inside remove it
- // add it to the layoutItems
- let { children = [], ...restLayoutItemProps } = eachLayoutItem?.props || {};
- let eachLayoutItemID = restLayoutItemProps?.id;
- let compChildren = children;
-
- if (compChildren && !Array.isArray(compChildren)) {
- compChildren = [compChildren];
- }
-
- let compChildrenLI = compChildren?.filter(eachItem => eachItem?.type?.name !== CoreLayoutItem.name);
-
- console.log("---------------------------------------------------");
- console.log("compChildren");
- console.log(compChildren);
- console.log("compChildrenLI");
- console.log(compChildrenLI);
- console.log("---------------------------------------------------");
-
- layoutItems[eachLayoutItemID] = {
- children: compChildrenLI,
- props : restLayoutItemProps
- };
-
- // if layout item exist inside the another layout item
- if (compChildren?.filter(elem => elem?.type?.name === CoreLayoutItem.name).length > 0) {
- prepareLayoutItems(eachLayoutItem);
- }
- });
- }
- } else {
- layoutItems[BlankLayout.PLACEHOLDER.CONTENT] = {
- chidren: [
- React.createElement(CoreBox, {},
- Layout children are empty
- )
- ],
- props: { styleClasses: [CoreClasses.BG.BG_WARNING] }
- };
- }
-
- return layoutItems;
- };
-
- /**
- * This function return the type of the component.
- *
- *
- * @param {*} component
- * @returns {COMPONENT_TYPES} componentType
- */
- const getComponentType = (component) => {
- let componentType = null;
-
- componentType = component?.type?.name
- || component?.type?.displayName
- || component?.type?.toString()
- || typeof component;
-
- return componentType;
- };
-
- /**
- *
- * @param {*} component
- * @returns {boolean} hasPlaceholder
- */
- const componentHasPlaceholder = (component) => {
- let hasPlaceholder = false;
- let { children } = component?.props || {};
-
- if (typeof children === "object"
- && !Array.isArray(children)
- && getComponentType(children) === CoreLayoutPlaceholder.name) {
- hasPlaceholder = true;
- } else if (typeof children === "object"
- && Array.isArray(children)) {
- hasPlaceholder = children?.some((child) => {
- if (getComponentType(child) === CoreLayoutPlaceholder.name) {
- return true;
- } else {
- if (child?.props?.chidren) {
- return componentHasPlaceholder(child);
- }
- }
- });
- }
-
- return hasPlaceholder;
- };
-
- /**
- *
- * @param {*} component
- * @returns {boolean} isLayout
- */
- const checkIfComponentIsLayout = (component) => {
- let isLayout = false;
-
- let componentType = getComponentType(component);
-
- if (component) {
- /* if it is a registered layout */
- if (Object.keys(componentRegistry).includes(componentType)
- && componentRegistry[componentType]?.layout === true) {
- isLayout = true;
- }
- /* if it has placeholder */
- else if (componentHasPlaceholder(component)) {
- isLayout = true;
- }
- }
-
- return isLayout;
- };
-
- /**
- *
- * @param {*} component
- * @returns {boolean} isPlaceholder
- */
- const checkIfPlaceholder = (component) => {
- return component && getComponentType(component) === COMPONENT_TYPES.CORE_LAYOUT_PLACEHOLDER;
- };
-
- /**
- *
- * @param {*} component
- * @param {*} componentProps
- * @param {*} placeholderChildren
- * @returns [component, componentProps, placeholderChildren]
- */
- const replacePlaceholderWithItem = (component, componentProps, placeholderChildren) => {
- if (checkIfPlaceholder(component)) {
- let { id: placeholderID, styleClasses: placeholderStyleClasses = [], ...placeholderProps } = component?.props || {};
- let layoutItem = layoutItems[placeholderID];
-
- if (layoutItem) {
- let { children: itemChildren = [], props: itemAllProps = {} } = layoutItem;
- let { id: itemID, styleClasses: itemStyleClasses = [], ...itemProps } = itemAllProps;
-
- let mergedStyleClasses = [...(placeholderStyleClasses || []), ...(itemStyleClasses || [])];
-
- componentProps = {
- ...placeholderProps,
- ...itemProps,
- id : itemID,
- styleClasses: mergedStyleClasses,
- };
-
- // convert placeholder and item children as array
- if (placeholderChildren && !Array.isArray(placeholderChildren)) {
- placeholderChildren = [placeholderChildren];
- }
- if (itemChildren && !Array.isArray(itemChildren)) {
- itemChildren = [itemChildren];
- }
-
- placeholderChildren = [...(placeholderChildren || []), ...(itemChildren || [])];
-
- component = React.createElement(CoreBox, componentProps, placeholderChildren);
- } else {
- // layout item is missing
- }
- }
-
- return component;
- };
-
- /**
- *
- * @param {*} component
- * @returns
- */
- const handleLayout = (component) => {
- /**
- * @todo
- * better approach to figure out if the component is mounted or not
- */
- if (!component?.props?.children) {
- // mount component if it's not mounted
- component = component?.type();
- }
-
- // get component children
- let componentChildren = component?.props?.children;
-
- // convert component children as array
- if (componentChildren && !Array.isArray(componentChildren)) {
- componentChildren = [componentChildren];
- }
-
- // convert the component children for getting final rendrable elements
- let convertedChildren = componentChildren?.map((componentChild) => {
- // check if this component is a layout
- if (checkIfComponentIsLayout(componentChild)) {
- componentChild = handleLayout(componentChild);
- }
- // check if this component is a placeholder
- else if (checkIfPlaceholder(componentChild)) {
- // add layout items's children and props along with it's children and props
- componentChild = replacePlaceholderWithItem(componentChild, componentChild?.props, componentChild?.props?.children);
- }
- return componentChild;
- });
-
- let componentProps = component.props;
-
- /* if placeholder */
- // eslint-disable-next-line etc/no-commented-out-code
- if (checkIfPlaceholder(component)) {
- component = replacePlaceholderWithItem(component, componentProps, convertedChildren);
- } else {
- component = React.cloneElement(component, componentProps, convertedChildren);
- }
-
- return component;
- };
-
- const renderData = () => {
- /* basic checks for layout and page */
- if (layoutName
- && Object.keys(componentRegistry).includes(layoutName)
- && componentRegistry[layoutName]?.layout === true
- && componentRegistry[layoutName]?.comp
- /* check if it is a react layout element */
- ) {
- devData.layoutFound = true;
- devData.layout = layoutName;
- devData.renderedLayout = layoutName;
- } else {
- devData.layoutFound = false;
- devData.layout = layoutName || "Not Provided";
- devData.renderedLayout = BlankLayout.name;
- }
-
- if (pageName
- && Object.keys(componentRegistry).includes(pageName)
- && componentRegistry[pageName]?.comp
- /* check if it is a react element */
- ) {
- devData.pageFound = true;
- devData.page = pageName;
- devData.renderedPage = pageName;
- } else {
- devData.pageFound = false;
- devData.page = pageName || "Not Provided";
- devData.renderedpage = ComponentNotFound.name;
- }
-
- if (!devData.layoutFound) {
- return React.createElement(BlankLayout(), {}, ComponentNotFound({ componentName: devData.layout, layout: true }));
- }
-
- if (!devData.pageFound) {
- return React.createElement(BlankLayout(), {}, ComponentNotFound({ componentName: devData.page, layout: false }));
- }
-
- /* mount root layout and page */
- let LayoutComponent = componentRegistry[devData?.renderedLayout]?.comp();
- let PageComponent = componentRegistry[devData?.renderedPage]?.comp();
-
- layoutItems = prepareLayoutItems(PageComponent);
-
- console.log("---------------------------------------------------");
- console.log("------------------ Layout Items -------------------");
- console.log("---------------------------------------------------");
- console.log(layoutItems);
- console.log("---------------------------------------------------");
- console.log("---------------------------------------------------");
-
- let renderableElements = handleLayout(LayoutComponent);
-
- console.log("---------------------------------------------------");
- console.log("---------------- Renderable Elements ----------------");
- console.log("---------------------------------------------------");
- console.log(renderableElements);
- console.log("---------------------------------------------------");
- console.log("---------------------------------------------------");
-
- return renderableElements;
- };
-
- return (
- <>
- {/* LAYOUT CONTENT REPLACED BY PAGE ITEM */}
- {renderData()}
-
- );
-}
diff --git a/src/components/layouts/LayoutManagerTest.js b/src/components/layouts/LayoutManagerTest.js
deleted file mode 100644
index 739a7c9..0000000
--- a/src/components/layouts/LayoutManagerTest.js
+++ /dev/null
@@ -1,10 +0,0 @@
-// eslint-disable-next-line no-unused-vars, unused-imports/no-unused-imports
-import React from "react";
-
-import LayoutManager from "./LayoutManager";
-
-export default function LayoutManagerTest() {
- return (
-
- );
-}
diff --git a/src/registry/ComponentsRegistry.js b/src/registry/ComponentsRegistry.js
index bed2c1a..3a6e809 100644
--- a/src/registry/ComponentsRegistry.js
+++ b/src/registry/ComponentsRegistry.js
@@ -1,11 +1,6 @@
import About from "../components/About";
import AppComponent from "../components/AppComponent";
// --------------------------------------
-// testing purpose
-import ComplexLayout from "../components/layouts/ComplexLayout";
-import ComplexLayoutPage from "../components/layouts/ComplexLayoutPage";
-import LayoutManagerTest from "../components/layouts/LayoutManagerTest";
-// --------------------------------------
import WrappidAppLayout from "../components/layouts/WrappidAppLayout";
import modulesComponentsRegistry from "../modules/modules.components.registry";
@@ -13,14 +8,5 @@ export const ComponentsRegistry = {
...modulesComponentsRegistry,
About : { comp: About },
AppComponent: { comp: AppComponent },
-
- /**
- * @todo
- * testing layout manager purpose
- */
- LMComplexLayout : { comp: ComplexLayout, layout: true },
- LMComplexLayoutPage: { comp: ComplexLayoutPage },
- LMTest : { comp: LayoutManagerTest },
-
WrappidAppLayout: { comp: WrappidAppLayout, layout: true }
};
diff --git a/src/registry/RoutesRegistry.js b/src/registry/RoutesRegistry.js
index c878e50..5f67c29 100644
--- a/src/registry/RoutesRegistry.js
+++ b/src/registry/RoutesRegistry.js
@@ -22,11 +22,5 @@ export const RoutesRegistry = {
entityRef : "defaultAppRoute",
url : "defaultAppRoute"
},
- testLayout: {
- Page : { appComponent: "LMTest", layout: WrappidAppLayout.name },
- authRequired: false,
- entityRef : "testLayout",
- url : "test/layout"
- },
...modulesRoutesRegistry
};
\ No newline at end of file