Skip to content

Commit

Permalink
Merge pull request #97 from wrappid/WRPD-bugfix-68
Browse files Browse the repository at this point in the history 
enhancement: version details fetched from related package.json
  • Loading branch information
@Edithmark42
Edithmark42 authored Mar 13, 2024
2 parents 499ad96 + 479f87b commit 0bb4600
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 72 deletions.
179 changes: 113 additions & 66 deletions src/components/AppComponentContent.js
View file
Original file line number Diff line number Diff line change
@@ -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>
);
}

Expand Down
6 changes: 2 additions & 4 deletions src/components/AppComponentSection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,6 @@ import {
coreUseNavigate
} from "@wrappid/core";

import data from "../../package.json";

export default function AppComponentSection(props) {
const navigate = coreUseNavigate();
const handleClickMain = () => {
Expand All @@ -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>

Expand Down
4 changes: 2 additions & 2 deletions src/registry/ComponentsRegistry.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
};

0 comments on commit 0bb4600

Please sign in to comment.