Dynamic Cards

components/dynamic-cards/README.md

@@ -0,0 +1,88 @@
+# Create a README.md file for download
+
+content = """# 📊 Dynamic KPI Cards
+
+An intelligent, highly customizable KPI card component built with React and Retool Custom Components.
+It automatically detects fields from your data and renders responsive KPI cards with trends and styling options.
+
+---
+
+## ✨ Features
+
+- Auto field detection (label, value, trend, secondary)
+- Manual override support
+- Responsive KPI card layout
+- Trend indicators with color coding
+- Fully customizable UI (colors, fonts, layout)
+- Retool integration with state + events
+
+---
+
+## 🏗️ Tech Stack
+
+- React
+- TypeScript
+- Retool Custom Component API
+
+---
+
+## 📦 Installation
+
+npm install @tryretool/custom-component-support
+
+---
+
+## 🚀 Usage
+
+Import:
+
+import DynamicKpiCards from "./DynamicKpiCards";
+
+Provide data:
+
+[
+  { "name": "Revenue", "value": 120000, "trend": 12.5, "target": 150000 },
+  { "name": "Users", "value": 5400, "trend": -2.1, "target": 6000 }
+]
+
+Render:
+
+<DynamicKpiCards />
+
+---
+
+## 🧠 Smart Detection
+
+Automatically maps:
+- Label → name, label, title
+- Value → value, revenue, count
+- Secondary → target, baseline
+- Trend → trend, change, growth
+
+---
+
+## 🎯 Interaction
+
+- Click a card → updates selectedCard
+- Triggers Retool event: cardClick
+
+---
+
+## ⚠️ Notes
+
+- Requires Retool environment
+- Data must be an array of objects
+- Only flat structures supported
+
+---
+
+## 📄 License
+
+MIT License
+"""
+
+file_path = "/mnt/data/Dynamic_KPI_Cards_README.md"
+with open(file_path, "w") as f:
+    f.write(content)
+
+file_path

components/dynamic-cards/metadata.json

@@ -0,0 +1,17 @@
+{
+    "id": "dynamic-kpi-cards",
+    "title": "Dynamic KPI Cards",
+    "author": "@widlestudiollp",
+    "shortDescription": "Auto-detects fields and renders responsive KPI cards with trends, secondary metrics, and full customization.",
+    "tags": [
+        "Charts",
+        "React",
+        "UI Components",
+        "Analytics",
+        "Dashboard",
+        "Data Visualization",
+        "Custom",
+        "Retool",
+        "Interactive"
+    ]
+}

components/dynamic-cards/package.json

@@ -0,0 +1,54 @@
+{
+    "name": "my-react-app",
+    "version": "0.1.0",
+    "private": true,
+    "dependencies": {
+        "@fontsource/inter": "^5.2.8",
+        "@fontsource/lato": "^5.2.7",
+        "@fontsource/montserrat": "^5.2.8",
+        "@fontsource/open-sans": "^5.2.7",
+        "@fontsource/playfair-display": "^5.2.8",
+        "@fontsource/poppins": "^5.2.7",
+        "@fontsource/roboto": "^5.2.10",
+        "@tryretool/custom-component-support": "latest",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0"
+    },
+    "engines": {
+        "node": ">=20.0.0"
+    },
+    "scripts": {
+        "dev": "npx retool-ccl dev",
+        "deploy": "npx retool-ccl deploy",
+        "test": "vitest"
+    },
+    "browserslist": {
+        "production": [
+            ">0.2%",
+            "not dead",
+            "not op_mini all"
+        ],
+        "development": [
+            "last 1 chrome version",
+            "last 1 firefox version",
+            "last 1 safari version"
+        ]
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.55",
+        "@typescript-eslint/eslint-plugin": "^7.3.1",
+        "@typescript-eslint/parser": "^7.3.1",
+        "eslint": "^8.57.0",
+        "eslint-plugin-react": "^7.34.1",
+        "postcss-modules": "^6.0.0",
+        "prettier": "^3.0.3",
+        "vitest": "^4.0.17"
+    },
+    "retoolCustomComponentLibraryConfig": {
+        "name": "Cards",
+        "label": "Cards",
+        "description": "Dynamic Cards",
+        "entryPoint": "src/index.tsx",
+        "outputPath": "dist"
+    }
+}