From 1604d332eaa1a5107524b9fabffede358630f9c4 Mon Sep 17 00:00:00 2001
From: EdithMark42 <edithmark42@gmail.com>
Date: Mon, 11 Mar 2024 20:34:37 +0530
Subject: [PATCH 1/2] feat(core): :construction: version details fetched from
 related package.json

version details fetched from related package.json in wrappid app

ref: #68
---
 src/components/AppComponentContent.js | 179 ++++++++++++++++----------
 src/components/AppComponentSection.js |   6 +-
 2 files changed, 115 insertions(+), 70 deletions(-)

diff --git a/src/components/AppComponentContent.js b/src/components/AppComponentContent.js
index dad5b2a..2fe65da 100644
--- a/src/components/AppComponentContent.js
+++ b/src/components/AppComponentContent.js
@@ -1,109 +1,156 @@
 import {
   CoreBox,
   CoreClasses,
+  CoreContainedButton,
   CoreDivider,
   CoreGrid,
   CoreH3,
   CoreH5,
   CoreImage,
-  CoreLayoutItem,
   CoreLink,
-  CoreTypographyBody1
+  CoreTypographyBody1,
+  coreUseNavigate
 } from "@wrappid/core";
+import corePackage from "@wrappid/core/package.json";
+// eslint-disable-next-line import/no-unresolved
+import nativePackage from "@wrappid/native/package.json";
+import stylesPackage from "@wrappid/styles/package.json";
 
 import AppComponentSection from "./AppComponentSection";
-import data from "../../package.json";
+import packageJson from "../../package.json";
 import logo from "../resources/images/logo_dark.png";
 
+nativePackage.author;
+stylesPackage.author;
+
 function AppComponentContent() {
+  const navigate = coreUseNavigate();
+  const handleClick1 = () => {
+    navigate("/guide/styles");
+  };
+  const handleClick2 = () => {
+    navigate("/guide/components");
+  };
   // Capitalize all first letters of words
-  const words = data.name.replaceAll("-", " ").split(" ");
+  const words = packageJson.name.replaceAll("-", " ").split(" ");
   // Join the capitalized words back with spaces
   const capitalizedWords = words.map(
     (word) => word.charAt(0).toUpperCase() + word.slice(1)
   );
 
   return (
-    <>
-      <CoreLayoutItem>
-        <CoreGrid
-          rowSpacing="32"
-          styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}
+    <CoreGrid
+      styleClasses={[CoreClasses.PADDING.P2, CoreClasses.PADDING.MD.P0]}
+    >
+      <CoreGrid
+        rowSpacing="32"
+        styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}
+      >
+        <CoreBox
+          gridProps={{ styleClasses: [CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER] }}
         >
-          <CoreBox
-            gridProps={{ styleClasses: [CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER] }}
-          >
-            <CoreImage width={100} src={logo} alt="logo" />
-          </CoreBox>
+          <CoreImage width={100} src={logo} alt="logo" />
+        </CoreBox>
 
-          <CoreBox
-            styleClasses={[CoreClasses.FLEX.DIRECTION_COLUMN, CoreClasses.TEXT.TEXT_CENTER]}
-          >
-            <CoreH3>{capitalizedWords.join(" ")}</CoreH3>
+        <CoreBox
+          styleClasses={[CoreClasses.FLEX.DIRECTION_COLUMN, CoreClasses.TEXT.TEXT_CENTER]}
+        >
+          <CoreH3>{capitalizedWords.join(" ")}</CoreH3>
 
-            <CoreH5 styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}>
-              {data.description ? data.description : "Description not provided"}
-            </CoreH5>
+          <CoreH5 styleClasses={[CoreClasses.ALIGNMENT.JUSTIFY_CONTENT_CENTER]}>
+            {packageJson.description ? packageJson.description : "Description not provided"}
+          </CoreH5>
 
-            <CoreDivider
-              styleClasses={[CoreClasses.WIDTH.W_75, CoreClasses.MARGIN.M5, CoreClasses.DISPLAY.INLINE_FLEX]}
-            />
+          <CoreDivider
+            styleClasses={[CoreClasses.WIDTH.W_75, CoreClasses.MARGIN.M5, CoreClasses.DISPLAY.INLINE_FLEX]}
+          />
 
-            <CoreH5>Built with Wrappid. One code, Endless possibilities.</CoreH5>
+          <CoreH5>Built with Wrappid. One code, Endless possibilities.</CoreH5>
 
-            <CoreBox>
-              <CoreTypographyBody1>
-                {`Version: ${data.version}`}
-              </CoreTypographyBody1>
+          <CoreBox>
+            <CoreTypographyBody1>
+              {`Version: ${packageJson.version}`}
+            </CoreTypographyBody1>
 
-              <CoreLink>Release Notes</CoreLink>
+            <CoreLink>Release Notes</CoreLink>
 
-              {" | "}
+            {" | "}
 
-              <CoreLink>Attributions</CoreLink>
+            <CoreLink>Attributions</CoreLink>
 
-              {" | "}
+            {" | "}
 
-              <CoreLink>Contributors</CoreLink>
+            <CoreLink>Contributors</CoreLink>
 
-              {" | "}
+            {" | "}
 
-              <CoreLink>Issue Board</CoreLink>
-            </CoreBox>
+            <CoreLink>Issue Board</CoreLink>
           </CoreBox>
+        </CoreBox>
 
-          {/* -----------------Themes------------------- */}
-          <AppComponentSection
-            title="Themes"
-            about="Themes related page for demo"
-            mainPath="/createTheme"
-            learnMorePath="/guide/components"
-            sourcePath="https://github.com/wrappid"        
-          />
-
-          {/* -----------------Themes Section------------------- */}
-          <AppComponentSection title="Themes" about="This is a theme viewer" mainPath="/createTheme"/>
-
-          {/* -----------------Styles Library Section------------------- */}
-          <AppComponentSection title="Styles Library" about="It integrates seamlessly with popular styling libraries, using MIUI for web styling and React Native Paper for mobile styling, ensuring a consistent look and feel across platforms." mainPath="/guide/styles" />
-
-          {/* -----------------Custom Component Flexibility Section------------------- */}
-          <AppComponentSection title="Custom Component Flexibility" about="While you can leverage the CoreComponents, Wrappid also gives you the flexibility to create your own custom components as needed to tailor your applications to specific requirements." mainPath="/guide/components" />
+        <CoreGrid
+          rowSpacing="8"
+          gridProps={{ gridSize: { md: 4, sm: 6, xs: 10 } }}
+          styleClasses={[CoreClasses.ALIGNMENT.ALIGN_ITEMS_CENTER]}
+        >
+          <CoreContainedButton
+            gridProps={{ gridSize: { md: 4 } }}
+            styleClasses={[CoreClasses.WIDTH.W_100, CoreClasses.TEXT.TEXT_TRANSFORM_CAPITALIZE]}
+            OnClick={handleClick1}
+          >
+            How to Customize
+          </CoreContainedButton>
 
-          {/* -----------------Full-Stack Development Support------------------- */}
-          <AppComponentSection
-            title="Full-Stack Development Support"
-            about="Wrappid supports building both frontend and backend components of applications, including API middleware, database handling, and business-specific modules."
-            mainPath="/guide/styles"
-            learnMorePath="/guide/components"
-            sourcePath="https://github.com/wrappid" 
-          />
+          <CoreContainedButton
+            gridProps={{ gridSize: { md: 4 } }}
+            styleClasses={[CoreClasses.WIDTH.W_100, CoreClasses.TEXT.TEXT_TRANSFORM_CAPITALIZE]}
+            OnClick={handleClick2}
+          >
+            Learn more
+          </CoreContainedButton>
 
-          <CoreDivider styleClasses={[CoreClasses.MARGIN.MT5]} />
+          <CoreContainedButton
+            gridProps={{ gridSize: { md: 4 } }}
+            styleClasses={[CoreClasses.WIDTH.W_100, CoreClasses.TEXT.TEXT_TRANSFORM_CAPITALIZE]}
+            href={"https://github.com/wrappid"}
+          >
+            Source
+          </CoreContainedButton>
         </CoreGrid>
-      </CoreLayoutItem>
-      
-    </>
+      </CoreGrid>
+
+      {/* -----------------Themes Section------------------- */}
+      <AppComponentSection title="Themes" about="This is a theme viewer" mainPath="/theme/createTheme"/>
+
+      {/* -----------------Styles Library Section------------------- */}
+      <AppComponentSection
+        title="Styles Library"
+        about="It integrates seamlessly with popular styling libraries, using MIUI for web styling and React Native Paper for mobile styling, ensuring a consistent look and feel across platforms." 
+        name={stylesPackage.name}
+        version={stylesPackage.version}
+        mainPath="/guide/styles" />
+
+      {/* -----------------Custom Component Flexibility Section------------------- */}
+      <AppComponentSection
+        title="Custom Component Flexibility"
+        about="While you can leverage the CoreComponents, Wrappid also gives you the flexibility to create your own custom components as needed to tailor your applications to specific requirements." 
+        name={corePackage.name}
+        version={corePackage.version}
+        mainPath="/guide/components" />
+
+      {/* -----------------Full-Stack Development Support------------------- */}
+      <AppComponentSection
+        title="Full-Stack Development Support"
+        about="Wrappid supports building both frontend and backend components of applications, including API middleware, database handling, and business-specific modules."
+        name={nativePackage.name}
+        version={nativePackage.version}
+        mainPath="/guide/styles"
+        learnMorePath="/guide/components"
+        sourcePath="https://github.com/wrappid" 
+      />
+
+      <CoreDivider styleClasses={[CoreClasses.MARGIN.MT5]} />
+    </CoreGrid>
   );
 }
 
diff --git a/src/components/AppComponentSection.js b/src/components/AppComponentSection.js
index 898ff1d..457a234 100644
--- a/src/components/AppComponentSection.js
+++ b/src/components/AppComponentSection.js
@@ -12,8 +12,6 @@ import {
   coreUseNavigate
 } from "@wrappid/core";
 
-import data from "../../package.json";
-
 export default function AppComponentSection(props) {
   const navigate = coreUseNavigate();
   const handleClickMain = () => {
@@ -37,9 +35,9 @@ export default function AppComponentSection(props) {
       </CoreBox>
 
       <CoreBox>
-        <CoreH5>@wrappid/{props.title}</CoreH5>
+        <CoreH5>{props.name}</CoreH5>
 
-        <CoreTypographyBody1>{`Version: ${data.version}`}</CoreTypographyBody1>
+        <CoreTypographyBody1>{props.version ? `Version: ${props.version}` : null}</CoreTypographyBody1>
 
         <CoreLink>Release Notes</CoreLink>
 

From 479f87b13e8f5680767573cad7dc7d01c628f995 Mon Sep 17 00:00:00 2001
From: EdithMark42 <edithmark42@gmail.com>
Date: Wed, 13 Mar 2024 11:55:09 +0530
Subject: [PATCH 2/2] refactor(core): :ambulance: linting fix

linting fix

ref: #68
---
 src/registry/ComponentsRegistry.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/registry/ComponentsRegistry.js b/src/registry/ComponentsRegistry.js
index 3a6e809..777c1ce 100644
--- a/src/registry/ComponentsRegistry.js
+++ b/src/registry/ComponentsRegistry.js
@@ -6,7 +6,7 @@ import modulesComponentsRegistry from "../modules/modules.components.registry";
 
 export const ComponentsRegistry = {
   ...modulesComponentsRegistry,
-  About       : { comp: About },
-  AppComponent: { comp: AppComponent },
+  About           : { comp: About },
+  AppComponent    : { comp: AppComponent },
   WrappidAppLayout: { comp: WrappidAppLayout, layout: true }
 };