Final push from react seed repo

Author: melissaing

README.md

@@ -1,6 +1,8 @@
-# Patternfly Seed
+# PatternFly Metrics Dashboard
 
-Patternfly Seed is an open source build scaffolding utility for web apps. The primary purpose of this project is to give developers a jump start when creating new projects that will use patternfly. A secondary purpose of this project is to serve as a reference for how to configure various aspects of an application that uses patternfly, webpack, react, typescript, etc.
+Adapted from the PatternFly seed app.
+
+This project is a work-in-progress. Developed by the PatternFly Enablement team, 
 
 Out of the box you'll get an app layout with chrome (header/sidebar), routing, build pipeline, test suite, and some code quality tools. Basically, all the essentials.
 
@@ -101,3 +103,32 @@ ENV_2=http://2.myendpoint.com
 
 
 With that in place, you can use the values in your code like `console.log(process.env.ENV_1);`
+
+## Live NPM Data Integration
+
+The application now includes live NPM download data for design system comparison charts. The data is automatically fetched from the NPM Registry API and updates every 30 minutes.
+
+### Features
+- **Real-time Data**: Fetches actual download statistics from npmjs.org
+- **Automatic Updates**: Refreshes every 30 minutes 
+- **Manual Refresh**: Click "Refresh Now" button for immediate updates
+- **Fallback Support**: Uses sample data if API is unavailable
+- **Visual Indicators**: Shows data source status with color-coded indicators
+
+### Packages Tracked
+- `@patternfly/react-core` (PatternFly)
+- `@shopify/polaris` (Shopify Polaris) 
+- `@carbon/react` (Carbon Design)
+- `@atlaskit/button` (Atlaskit)
+
+### CORS Considerations
+The app uses the public NPM Registry API (`api.npmjs.org`) which supports CORS. If you encounter CORS issues in your environment:
+
+1. **Development**: Run with CORS disabled or use a proxy
+2. **Production**: Deploy behind a reverse proxy that handles CORS
+3. **Alternative**: The app will gracefully fallback to sample data
+
+### Data Source
+- API: `https://api.npmjs.org/downloads/range`
+- Documentation: [NPM Registry API](https://github.com/npm/registry/blob/master/docs/download-counts.md)
+- Rate Limits: Reasonable usage is acceptable

package-lock.json

@@ -31,6 +31,7 @@
     "@types/node": "^22.15.30",
     "@types/papaparse": "^5.3.16",
     "@types/react-router-dom": "^5.3.3",
+    "@types/xlsx": "^0.0.35",
     "@typescript-eslint/eslint-plugin": "^8.17.0",
     "@typescript-eslint/parser": "^8.17.0",
     "copy-webpack-plugin": "^12.0.2",
@@ -84,7 +85,8 @@
     "react": "^18",
     "react-dom": "^18",
     "sirv-cli": "^3.0.0",
-    "victory": "^37.3.6"
+    "victory": "^37.3.6",
+    "xlsx": "^0.18.5"
   },
   "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }