Skip to content

update check changes compare file #1585

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 30, 2025
Merged

update check changes compare file #1585

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3ac15c3
chore: update check changes compare file
davidornelas11 Sep 25, 2025
5943a81
perf: update typescript types for check element changes script
davidornelas11 Sep 25, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
289 changes: 124 additions & 165 deletions packages/unity-react-core/scripts/check-changes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,134 +1,128 @@
import React from "react";
import { AnchorMenu } from "../src/components/AnchorMenu/AnchorMenu";
import { AnchorMenu } from "../src/components/AnchorMenu/AnchorMenu.jsx";
import { Article } from "../src/components/Article/Article.jsx";
import { Accordion } from "../src/components/Accordion/Accordion.jsx";
import { Card } from "../src/components/Card/Card.jsx";
import { Pagination } from "../src/components/Pagination/Pagination.jsx"
import { Breadcrumbs } from "../src/components/Breadcrumbs/Breadcrumbs"
import { getBootstrapHTML } from '../src/components/GaEventWrapper/useBaseSpecificFramework.js';
import { Pagination } from "../src/components/Pagination/Pagination.jsx";
import { Breadcrumbs } from "../src/components/Breadcrumbs/Breadcrumbs";
import { getBootstrapHTML } from "../src/components/GaEventWrapper/useBaseSpecificFramework.js";

const fs = require('fs');
const path = require('path');
const fs = require("fs");
const path = require("path");

function convertToHTML(OLD_DATE){
interface ComponentConfig {
reactComponent: React.ComponentType<any>;
props: Record<string, any>;
}

interface ComponentMap {
[key: string]: ComponentConfig;
}

/**
* 2. OJAS TODO: Use a hashmap or object, {}, have each component have it's own key with values
* You only have to have one or two for now. We can add more laterr
* Example:
* const componentMap = {
* Pagination: {
* reactComponent: Pagination, // This is the Pagination we have imported at the top of the file
* props: {
*. type: "default",
background: "white",
totalPages: 4,
onChange: () => null
* }
* }
*/
const componentMap = {
function convertToHTML(OLD_DATE: string): void {
const componentMap: ComponentMap = {
Accordion: {
reactComponent: Accordion,
props: {
cards: [
{
content: {
header: "Accordion Card 1",
body: "<h4>Quatrenary Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p><h5>This is a level five headline. There's a fancy word for that too.</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>",
},
},
{
content: {
header: "Accordion Card 2",
body: "<h4>Quatrenary Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p><h5>This is a level five headline. There's a fancy word for that too.</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>",
},
},
{
content: {
header: "Accordion Card 3, opened card",
body: "<h4>Quatrenary Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p><h5>This is a level five headline. There's a fancy word for that too.</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>",
},
},
],
openedCard: 3,
}
{
content: {
header: "Accordion Card 1",
body: "<h4>Quatrenary Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p><h5>This is a level five headline. There's a fancy word for that too.</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>",
},
},
{
content: {
header: "Accordion Card 2",
body: "<h4>Quatrenary Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p><h5>This is a level five headline. There's a fancy word for that too.</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>",
},
},
{
content: {
header: "Accordion Card 3, opened card",
body: "<h4>Quatrenary Headline</h4><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p><h5>This is a level five headline. There's a fancy word for that too.</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud</p>",
},
},
],
openedCard: 3,
},
},
AnchorMenu: {
reactComponent: AnchorMenu,
props: {
items: [
{
text: "Title Case is Required",
targetIdName: "first-container",
icon: ["fas", "link"],
},
{ text: "Second Container", targetIdName: "second-container" },
{ text: "Third Container", targetIdName: "third-container" },
{
text: "This is the Last",
targetIdName: "fourth-container",
icon: ["fas", "link"],
},
],
}
{
text: "Title Case is Required",
targetIdName: "first-container",
icon: ["fas", "link"],
},
{ text: "Second Container", targetIdName: "second-container" },
{ text: "Third Container", targetIdName: "third-container" },
{
text: "This is the Last",
targetIdName: "fourth-container",
icon: ["fas", "link"],
},
],
},
},
Article: {
reactComponent: Article,
props: {defaultArgs: {
type: "news",
articleUrl: "https://example.com",
headerImageUrl: "",
title:
"Clarisse Machanguana takes her skill set to the next level at ASU Thunderbird",
publicationDate: "March 18, 2021",
authorName: "Jimena Garrison",
authorTitle: "Media Relations and Strategic Communications",
authorEmail: "jgarris6@asu.edu",
authorPhone: "480-727-4058",
breadcrumbs: [
props: {
defaultArgs: {
type: "news",
articleUrl: "https://example.com",
headerImageUrl: "",
title:
"Clarisse Machanguana takes her skill set to the next level at ASU Thunderbird",
publicationDate: "March 18, 2021",
authorName: "Jimena Garrison",
authorTitle: "Media Relations and Strategic Communications",
authorEmail: "jgarris6@asu.edu",
authorPhone: "480-727-4058",
breadcrumbs: [
{
title: "Home",
url: "/",
},
{
title: "Second nav item",
url: "/events",
},
{
title: "Current page",
url: "/events/current-article",
active: true,
},
],
body: "<p>After 34 years in the game of basketball, Clarisse Machanguana retired. Her eponymous philanthropic foundation remains her only connection to the sport, although the effect of the global game has left imprints in many aspects of her life.</p><p>Playing basketball took her to Portugal and then the U.S., where she attended Old Dominion University in Virginia to study criminal justice. When she realized that sports could be a microcosm of life and values, she decided to create a way to coach sports while teaching life skills in her home country of Mozambique. She started the <a href='http://machanguanafoundation.rf.gd/'>Clarisse Machanguana Foundation</a> in 2014 with the goal of empowering Mozambican youth through health, education and sports programs.</p><p>Now she’s taking her leadership game to the next level at ASU’s Thunderbird School of Global Management, earning her Master of Global Management degree with a nonprofit management concentration. Machanguana is honing her skills as a global professional in and out of the classroom to propel her foundation even further.</p><p>Here she reflects on the experiences that brought her to Thunderbird and ASU.</p><p><strong>Question: Why basketball?</strong></p><p><strong>Answer:</strong> I started at age 6, and because it was popular in my area and I was tall — now 6-feet-5-inches tall, to be exact — people kept telling me I should play. Basketball took me everywhere. I had a scholarship to play in Portugal and the U.S., and later on in Spain, France, Brazil, South Korea and Italy. Basketball became a passport and a school for me, and a source of amazing friendships. I played from age 6 to 40. My foundation now partners with the Department of Education. We collaborate with teachers and teach them to coach life skills and basketball.</p><p>I advocate social causes that are challenging for youth and transform them into opportunities, giving them tools to lift themselves out of the poverty they see. They use the skills like respecting your opponent and perseverance that can be applied in life as well as sports. When you wake up and all you see is poverty, you start to believe that mindset of limitations and scarcity. We give young people something else to believe in, a vision of a better life.</p>",
},
},
},
Breadcrumbs: {
reactComponent: Breadcrumbs,
props: {
linkItems: [
{
title: "Home",
url: "/",
label: "Home",
active: false,
href: "#",
},
{
title: "Second nav item",
url: "/events",
label: "Library",
active: false,
href: "#",
},
{
title: "Current page",
url: "/events/current-article",
label: "Data",
active: true,
href: "#",
},
],
body: "<p>After 34 years in the game of basketball, Clarisse Machanguana retired. Her eponymous philanthropic foundation remains her only connection to the sport, although the effect of the global game has left imprints in many aspects of her life.</p><p>Playing basketball took her to Portugal and then the U.S., where she attended Old Dominion University in Virginia to study criminal justice. When she realized that sports could be a microcosm of life and values, she decided to create a way to coach sports while teaching life skills in her home country of Mozambique. She started the <a href='http://machanguanafoundation.rf.gd/'>Clarisse Machanguana Foundation</a> in 2014 with the goal of empowering Mozambican youth through health, education and sports programs.</p><p>Now she’s taking her leadership game to the next level at ASU’s Thunderbird School of Global Management, earning her Master of Global Management degree with a nonprofit management concentration. Machanguana is honing her skills as a global professional in and out of the classroom to propel her foundation even further.</p><p>Here she reflects on the experiences that brought her to Thunderbird and ASU.</p><p><strong>Question: Why basketball?</strong></p><p><strong>Answer:</strong> I started at age 6, and because it was popular in my area and I was tall — now 6-feet-5-inches tall, to be exact — people kept telling me I should play. Basketball took me everywhere. I had a scholarship to play in Portugal and the U.S., and later on in Spain, France, Brazil, South Korea and Italy. Basketball became a passport and a school for me, and a source of amazing friendships. I played from age 6 to 40. My foundation now partners with the Department of Education. We collaborate with teachers and teach them to coach life skills and basketball.</p><p>I advocate social causes that are challenging for youth and transform them into opportunities, giving them tools to lift themselves out of the poverty they see. They use the skills like respecting your opponent and perseverance that can be applied in life as well as sports. When you wake up and all you see is poverty, you start to believe that mindset of limitations and scarcity. We give young people something else to believe in, a vision of a better life.</p>",
},
}
},
Breadcrumbs: {
reactComponent: Breadcrumbs,
props: {
linkItems: [
{
label: "Home",
active: false,
href: "#",
},
{
label: "Library",
active: false,
href: "#",
},
{
label: "Data",
active: true,
href: "#",
},
],
}
},
Card: {
reactComponenet: Card,
reactComponent: Card,
props: {
type: "default",
horizontal: false,
Expand Down Expand Up @@ -158,83 +152,48 @@ function convertToHTML(OLD_DATE){
],
linkUrl: "/#",
linkLabel: "Link",
}
},
},
Pagination: {
reactComponent: Pagination,
props: {
type: "default",
background: "white",
totalPages: 4,
}
}
}


/**
3.OJAS TODO: Create function that iterates through the componentMap and generates the HTML for each component
and instead of writing individual html of each component, we can create a temporary object and then write that to the file. Using a try catch here would be good so we can log any errors

FUNCTION generateAllComponents()
// DECLARE an empty object to store component HTML and metadata
DECLARE emptyObjectToWriteTo AS {}

// ITERATE over each entry in the componentMap
FOR EACH componentName, component IN componentMap
// Generate HTML for the current component
// This is conceptually similar to <Pagination {...component.props} /> in a React context
DECLARE html AS RESULT OF getBootstrapHTML(CreateElement(component.reactComponent, component.props))

// Store the generated HTML and its size in the temporary object
SET emptyObjectToWriteTo[componentName] TO {
html: html,
// We can use this as an easy way to check for changes in the future without having to parse the html
size: LENGTH(html)
}
END FOR

// At this point, 'emptyObjectToWriteTo' holds all the generated HTML and sizes.
RETURN emptyObjectToWriteTo
END FUNCTION
*/
},
},
};

function generateAllComponents(){
const emptyObjectToWriteTo = {};
function generateAllComponents(): Record<string, { html: string | null; size: number }> {
const emptyObjectToWriteTo: Record<string, { html: string | null; size: number }> = {};

for(const[key, value] of Object.entries(componentMap)){
try{
const html = getBootstrapHTML(React.createElement(value.reactComponent, value.props));
emptyObjectToWriteTo[key] = {
html: html,
size: html.length
};
} catch(error){
emptyObjectToWriteTo[key] = {
html: null,
size: 0
};
for (const [key, value] of Object.entries(componentMap)) {
try {
const html = getBootstrapHTML(
React.createElement(value.reactComponent as any, value.props)
);
emptyObjectToWriteTo[key] = {
html: html,
size: html.length,
};
} catch (error) {
console.error(`Error rendering component ${key}:`, error);
emptyObjectToWriteTo[key] = {
html: null,
size: 0,
};
}
}
return emptyObjectToWriteTo;
}
return emptyObjectToWriteTo;
}

/*
* 4. OJAS TODO: Write the results of generateAllComponents to a file.
* Same as below but since you ahve all the component data in a single hash map, you can just name it `components-${DATE_TIMESTAMP}.json`
*
* Exmaple:
* const results = generateAllComponent()
*
* Make sure you serialize(make data easy to store and read) the data before writing it to the file using JSON.stringify
*/

const fileName = `components-${OLD_DATE}.json`;
const filePath = path.join(__dirname, fileName);
const result = generateAllComponents()
const fileName = `components-${OLD_DATE}.json`;
const filePath = path.join(__dirname, fileName);
const result = generateAllComponents();

fs.writeFileSync(filePath, JSON.stringify(result), 'utf8');
fs.writeFileSync(filePath, JSON.stringify(result, null, 2), "utf8");
}
const args = process.argv.slice(0);
if (args[2]) {
convertToHTML(args[2]);
};
convertToHTML(args[2]);
}
Loading