@ramme-io/create-app 1.1.3 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "type": "module",
   "bin": {
     "create-ramme-app": "./index.js"

package/template/pkg.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@ramme-io/ui": "^1.1.1",
+    "mqtt": "^5.3.5",
     "ag-grid-community": "^31.3.1",
     "ag-grid-enterprise": "^31.3.1",  
     "ag-grid-react": "^31.3.1",       

package/template/src/config/dashboard.layout.ts

@@ -0,0 +1,98 @@
+/**
+ * @file dashboard.layout.ts
+ * Defines the schema and data for the dynamic dashboard.
+ */
+
+// 1. Define the Shape of our "Brain"
+export interface DashboardItem {
+  id: string;
+  component: string;
+  props: Record<string, any>;
+  signalId?: string; // <-- Mark as Optional (?)
+}
+
+export interface DashboardSection {
+  id: string;
+  title: string;
+  type: string;
+  columns: number;
+  items: DashboardItem[]; // <-- Enforce the type here
+}
+
+// 2. The Data (Typed)
+export const dashboardLayout: DashboardSection[] = [
+  {
+    id: "section_iot",
+    title: "Live Device Status",
+    type: "grid", 
+    columns: 3,
+    items: [
+      {
+        id: "dev_1",
+        component: "DeviceCard",
+        props: {
+          title: "Living Room AC",
+          description: "Zone A • Floor 1",
+          icon: "thermometer",
+          status: "online",
+          trend: "Cooling to 70°"
+        },
+        signalId: "living_room_ac" 
+      },
+      {
+        id: "dev_2",
+        component: "DeviceCard",
+        props: {
+          title: "Air Quality",
+          description: "Sensor ID: #8842",
+          icon: "droplets",
+          status: "active",
+          trend: "Stable"
+        },
+        signalId: "living_room_hum"
+      },
+      {
+        id: "dev_3",
+        component: "DeviceCard",
+        props: {
+          title: "Main Server",
+          description: "192.168.1.42",
+          icon: "server",
+          status: "online",
+          trend: "CPU Load"
+        },
+        signalId: "server_01"
+      }
+    ]
+  },
+  {
+    id: "section_metrics",
+    title: "Business Overview",
+    type: "grid",
+    columns: 4,
+    items: [
+      {
+        id: "stat_1",
+        component: "StatCard",
+        props: {
+          title: "Total Users",
+          value: "1,234",
+          icon: "users",
+          changeText: "+10% from last month",
+          changeDirection: "positive"
+        }
+      },
+      {
+        id: "stat_2",
+        component: "StatCard",
+        props: {
+          title: "Sales Today",
+          value: "$5,678",
+          icon: "dollar-sign",
+          changeText: "+5% from yesterday",
+          changeDirection: "positive"
+        }
+      }
+    ]
+  }
+];

package/template/src/core/component-registry.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  DeviceCard,
+  StatCard,
+  BarChart,
+  LineChart,
+  PieChart,
+  DataTable,
+  Card,
+  Alert,
+  EmptyState,
+} from '@ramme-io/ui';
+
+/**
+ * The Registry maps the "string" name of a component (from the JSON manifest)
+ * to the actual React component implementation.
+ */
+export const COMPONENT_REGISTRY: Record<string, React.FC<any>> = {
+  // IoT Primitives
+  DeviceCard,
+  
+  // Data Display
+  StatCard,
+  BarChart,
+  LineChart,
+  PieChart,
+  DataTable,
+  
+  // Layout & Feedback
+  Card,
+  Alert,
+  EmptyState,
+};
+
+/**
+ * Helper to safely resolve a component.
+ * Returns a fallback if the component name is unknown.
+ */
+export const getComponent = (name: string) => {
+  const Component = COMPONENT_REGISTRY[name];
+  if (!Component) {
+    console.warn(`[Registry] Unknown component type: "${name}"`);
+    return () => (
+      <Alert variant="warning" title="Unknown Component">
+        The system tried to render <code>{name}</code> but it was not found in the registry.
+      </Alert>
+    );
+  }
+  return Component;
+};

package/template/src/generated/hooks.ts

@@ -0,0 +1,47 @@
+/**
+ * @file hooks.ts
+ * @generated by @ramme-io/builder
+ * @description
+ * This file is AUTO-GENERATED. Do not edit it directly.
+ * It defines the "State Machine" for the application, initializing
+ * all necessary signals based on the project manifest.
+ */
+
+import { useSignal } from '../hooks/useSignal';
+
+/**
+ * Initializes all global signals defined in the project.
+ * This hook is called once by the Dashboard (or App root).
+ */
+export const useGeneratedSignals = () => {
+  // 1. Living Room AC (Thermostat)
+  const living_room_ac = useSignal('living_room_ac', {
+    initialValue: 72,
+    min: 68,
+    max: 76,
+    unit: '°F'
+  });
+
+  // 2. Air Quality Sensor
+  const living_room_hum = useSignal('living_room_hum', {
+    initialValue: 45,
+    min: 40,
+    max: 60,
+    unit: '%'
+  });
+
+  // 3. Main Server CPU Load
+  const server_01 = useSignal('server_01', {
+    initialValue: 42,
+    min: 10,
+    max: 95,
+    unit: '%'
+  });
+
+  // Return a dictionary for easy O(1) lookup by signalId
+  return {
+    living_room_ac,
+    living_room_hum,
+    server_01,
+  };
+};

package/template/src/pages/Dashboard.tsx

@@ -1,43 +1,15 @@
 import React from 'react';
-import {
-  BarChart,
-  LineChart,
-  Card,
-  PageHeader,
-  StatCard,
-  DataTable,
-  useDataFetch,
-  DeviceCard, // <-- NEW: Import DeviceCard
-  type ColDef,
-  type ValueFormatterParams,
-} from '@ramme-io/ui';
-import { useSignal } from '../hooks/useSignal'; // <-- NEW: Import the Engine
-import { mockTableData, mockChartData } from '../data/mockData';
+import { PageHeader } from '@ramme-io/ui';
 
-const Dashboard: React.FC = () => {
-  // 1. Existing Logic (SaaS Data)
-  const { data: fetchedTableData } = useDataFetch(null, mockTableData);
-
-  // 2. New Logic (IoT Engine)
-  const temp = useSignal('living_room_ac', { initialValue: 72, min: 68, max: 76, unit: '°F' });
-  const hum = useSignal('living_room_hum', { initialValue: 45, min: 40, max: 60, unit: '%' });
-  const cpu = useSignal('server_01', { initialValue: 42, min: 10, max: 95, unit: '%' });
+// --- IMPORTS ---
+import { getComponent } from '../core/component-registry';
+import { dashboardLayout } from '../config/dashboard.layout';
+import { useGeneratedSignals } from '../generated/hooks'; // <-- The New Engine
 
-  // 3. Table Config
-  const columnDefs: ColDef[] = [
-    { field: 'make', headerName: 'Make', sortable: true, filter: true },
-    { field: 'model', headerName: 'Model', sortable: true, filter: true },
-    {
-      field: 'price',
-      headerName: 'Price',
-      valueFormatter: (p: ValueFormatterParams) => '$' + p.value.toLocaleString(),
-    },
-    {
-      field: 'electric',
-      headerName: 'Electric',
-      cellRenderer: (params: any) => (params.value ? '⚡' : '⛽'),
-    },
-  ];
+const Dashboard: React.FC = () => {
+  // 1. Initialize the "Brain"
+  // This single line replaces all the hardcoded hooks.
+  const signals = useGeneratedSignals();
 
   return (
     <div className="space-y-8">
@@ -46,106 +18,48 @@ const Dashboard: React.FC = () => {
         description="Real-time device monitoring and business analytics."
       />
 
-      {/* --- SECTION 1: LIVE IOT STATUS (The New Stuff) --- */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4 text-foreground">Live Device Status</h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <DeviceCard
-            title="Living Room AC"
-            description="Zone A • Floor 1"
-            icon="thermometer"
-            status="online"
-            value={`${temp.value}${temp.unit}`}
-            trend="Cooling to 70°"
-          />
-          <DeviceCard
-            title="Air Quality"
-            description="Sensor ID: #8842"
-            icon="droplets"
-            status="active"
-            value={`${hum.value}${hum.unit}`}
-            trend="Stable"
-          />
-          <DeviceCard
-            title="Main Server"
-            description="192.168.1.42"
-            icon="server"
-            status={cpu.value > 90 ? 'error' : 'online'}
-            value={`${cpu.value}${cpu.unit}`}
-            trend="CPU Load"
-          />
-        </div>
-      </div>
+      {/* --- DYNAMIC RUNTIME ENGINE --- */}
+      {dashboardLayout.map((section) => (
+        <div key={section.id}>
+          <h3 className="text-lg font-semibold mb-4 text-foreground">
+            {section.title}
+          </h3>
+          
+          <div 
+            className="grid gap-6"
+            // Use the 'columns' prop from the manifest to control density
+            style={{ 
+              gridTemplateColumns: `repeat(${section.columns || 3}, minmax(300px, 1fr))` 
+            }}
+          >
+            {section.items.map((item) => {
+              const Component = getComponent(item.component);
+              
+              // Prepare Props
+              let dynamicProps = { ...item.props };
 
-      {/* --- SECTION 2: BUSINESS METRICS (The Old Stuff) --- */}
-      <div>
-        <h3 className="text-lg font-semibold mb-4 text-foreground">Business Overview</h3>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
-          <StatCard
-            title="Total Users"
-            value="1,234"
-            icon="users"
-            changeText="+10% from last month"
-            changeDirection="positive"
-          />
-          <StatCard
-            title="Sales Today"
-            value="$5,678"
-            icon="dollar-sign"
-            changeText="+5% from yesterday"
-            changeDirection="positive"
-          />
-          <StatCard
-            title="New Orders"
-            value="89"
-            icon="shopping-cart"
-            changeText="-2 since last hour"
-            changeDirection="negative"
-          />
-          <StatCard
-            title="Active Projects"
-            value="12"
-            icon="briefcase"
-            footerText="3 nearing completion"
-          />
-        </div>
-      </div>
+              // Inject Signal Data
+              if (item.signalId && signals[item.signalId as keyof typeof signals]) {
+                const sig = signals[item.signalId as keyof typeof signals];
+                
+                // Standard Value Injection
+                dynamicProps.value = `${sig.value}${sig.unit}`;
+                
+                // Auto-Status Logic (The "Smart" Layer)
+                // If a signal exceeds its defined max, auto-flag it as error
+                if (sig.value > (sig.max || 100)) {
+                    dynamicProps.status = 'error';
+                    dynamicProps.trend = 'CRITICAL';
+                }
+              }
 
-      {/* --- SECTION 3: ANALYTICS CHARTS --- */}
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4 text-foreground">Monthly Revenue</h3>
-          <div className="h-[350px] w-full">
-            <BarChart
-              data={mockChartData}
-              dataKeyX="name"
-              barKeys={['pv', 'uv']}
-            />
-          </div>
-        </Card>
-        <Card className="p-6">
-          <h3 className="text-lg font-semibold mb-4 text-foreground">User Growth</h3>
-          <div className="h-[350px] w-full">
-            <LineChart
-              data={mockChartData}
-              dataKeyX="name"
-              lineKeys={['uv', 'pv']}
-            />
+              return (
+                <Component key={item.id} {...dynamicProps} />
+              );
+            })}
           </div>
-        </Card>
-      </div>
-
-      {/* --- SECTION 4: DATA TABLE --- */}
-      <Card className="p-6">
-        <h3 className="text-2xl font-semibold mb-4 text-foreground">Recent Vehicle Data</h3>
-        {fetchedTableData && (
-          <DataTable
-            rowData={fetchedTableData}
-            columnDefs={columnDefs}
-            height="400px"
-          />
-        )}
-      </Card>
+        </div>
+      ))}
     </div>
   );
 };

package/template/src/types/signal.ts

@@ -10,6 +10,7 @@
 export type SignalStatus = 'fresh' | 'stale' | 'disconnected' | 'error';
 
 export interface Signal<T = any> {
+  max: number;
   id: string;          // The unique ID (e.g., "temp_01")
   value: T;            // The actual data (e.g., 24.5)
   unit?: string;       // Optional unit (e.g., "°C")

package/template/package-lock.json

@@ -1,78 +0,0 @@
-{
-  "name": "template",
-  "version": "0.0.0",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "dependencies": {
-        "zod": "^4.1.13"
-      }
-    },
-    "../../ramme-ui": {
-      "name": "@ramme-io/ui",
-      "version": "1.1.0",
-      "extraneous": true,
-      "dependencies": {
-        "@radix-ui/react-slot": "^1.2.3",
-        "@tippyjs/react": "^4.2.6",
-        "ag-grid-community": "^31.3.1",
-        "ag-grid-enterprise": "^31.3.1",
-        "ag-grid-react": "^31.3.1",
-        "clsx": "^2.1.1",
-        "date-fns": "^3.6.0",
-        "lucide-react": "^0.537.0",
-        "react-datepicker": "^7.3.0",
-        "react-select": "^5.8.0",
-        "react-syntax-highlighter": "^15.6.6",
-        "recharts": "^2.12.7",
-        "tailwind-merge": "^3.3.1",
-        "tippy.js": "^6.3.7",
-        "zod": "^4.1.13"
-      },
-      "devDependencies": {
-        "@storybook/addon-essentials": "8.2.2",
-        "@storybook/addon-interactions": "8.2.2",
-        "@storybook/addon-links": "8.2.2",
-        "@storybook/addon-themes": "8.2.2",
-        "@storybook/blocks": "8.2.2",
-        "@storybook/react": "8.2.2",
-        "@storybook/react-vite": "8.2.2",
-        "@storybook/testing-library": "0.2.2",
-        "@types/doctrine": "^0.0.9",
-        "@types/node": "^24.2.1",
-        "@types/react": "^18.3.23",
-        "@types/react-dom": "^18.3.7",
-        "@types/react-syntax-highlighter": "^15.5.13",
-        "@vitejs/plugin-react": "^4.3.1",
-        "autoprefixer": "^10.4.19",
-        "class-variance-authority": "^0.7.1",
-        "doctrine": "^3.0.0",
-        "postcss": "^8.4.38",
-        "react": "^18.2.0",
-        "react-dom": "^18.2.0",
-        "sass": "^1.77.8",
-        "storybook": "8.2.2",
-        "tailwindcss": "^3.4.4",
-        "typescript": "^5.9.2",
-        "vite": "^5.3.1",
-        "vite-plugin-dts": "^3.9.1"
-      },
-      "peerDependencies": {
-        "react": ">=18.2.0",
-        "react-dom": ">=18.2.0",
-        "react-router-dom": "^6.25.1",
-        "tailwindcss": ">=3.0.0"
-      }
-    },
-    "node_modules/zod": {
-      "version": "4.1.13",
-      "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.13.tgz",
-      "integrity": "sha512-AvvthqfqrAhNH9dnfmrfKzX5upOdjUVJYFqNSlkmGf64gRaTzlPwz99IHYnVs28qYAybvAlBV+H7pn0saFY4Ig==",
-      "license": "MIT",
-      "funding": {
-        "url": "https://github.com/sponsors/colinhacks"
-      }
-    }
-  }
-}