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 } };