@ramme-io/create-app 1.1.9 → 1.2.0

package/template/src/config/app.manifest.ts

@@ -2,55 +2,55 @@ import type { AppSpecification } from '../types/schema';
 
 export const appManifest: AppSpecification = {
   meta: {
-    name: "Acme Corp Admin",
-    version: "2.0.0",
-    description: "Executive overview of KPI metrics.",
-    author: "Ramme Builder"
+    name: "Ramme System Check",
+    version: "1.0.0",
+    description: "Verifying the Smart Runtime.",
+    author: "Ramme Builder",
   },
   config: {
-    theme: 'corporate', // <--- Switches the visual theme automatically
-    mockMode: false     // <--- Critical: Tells the Adapter Factory to use REAL code (HTTP/MQTT)
+    theme: 'system',
+    mockMode: false,
+    brokerUrl: 'wss://test.mosquitto.org:8081',
   },
-  domain: {
-    signals: [
-      {
-        id: "mrr_stripe",
-        label: "Monthly Revenue",
-        kind: "metric",
-        source: "http", // <--- This triggers your new generateHttpImplementation()
-        endpoint: "/api_mock.json",
-        unit: "USD",
-        defaultValue: 0,
-        refreshRate: 0
-      },
-      {
-        id: "active_users",
-        label: "Active Users",
-        kind: "metric",
-        source: "http",
-        endpoint: "/api_mock.json",
-        unit: "",
-        defaultValue: 0,
-        refreshRate: 0
-      }
-    ],
-    entities: [
-      {
-        id: "widget_mrr",
-        name: "Current MRR",
-        type: "kpi",
-        signals: ["mrr_stripe"],
-        ui: { dashboardComponent: "StatCard", icon: "dollar-sign" },
-        category: ''
-      },
-      {
-        id: "widget_users",
-        name: "Total Users",
-        type: "kpi",
-        signals: ["active_users"],
-        ui: { dashboardComponent: "StatCard", icon: "users" },
-        category: ''
-      }
-    ]
-  }
+  domain: { signals: [], entities: [] },
+  pages: [
+    {
+      id: "dashboard",
+      slug: "dashboard",
+      title: "System Status",
+      description: "Verifying Week 1 Logic Engine",
+      sections: [
+        {
+          id: "sect-users",
+          title: "User Management (CRUD Test)",
+          layout: { columns: 1 },
+          blocks: [
+            {
+              id: "table_users",
+              type: "SmartTable",
+              props: {
+                title: "Active Users",
+                dataId: "users" // ✅ Points to SEED_USERS
+              }
+            }
+          ]
+        },
+        {
+          id: "sect-invoices",
+          title: "Invoices (Relational Test)",
+          layout: { columns: 1 },
+          blocks: [
+            {
+              id: "table_invoices",
+              type: "SmartTable",
+              props: {
+                title: "Recent Invoices",
+                dataId: "invoices" // ✅ Points to SEED_INVOICES
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
 };

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

@@ -5,65 +5,45 @@ import {
   BarChart,
   LineChart,
   PieChart,
-  DataTable,
+  DataTable, 
   Card,
   Alert,
   EmptyState,
+  ToggleSwitch
 } from '@ramme-io/ui';
 
-/**
- * The Registry maps the "string" name of a component (from the JSON manifest)
- * to the actual React component implementation.
- */
+// ✅ IMPORT YOUR CUSTOM COMPONENT
+import { SmartTable } from '../blocks/SmartTable';
+
 export const COMPONENT_REGISTRY: Record<string, React.FC<any>> = {
-  // --- Core Components ---
+  // IoT Primitives
   DeviceCard,
+  
+  // Data Display
   StatCard,
   BarChart,
   LineChart,
   PieChart,
-  DataTable,
+  
+  // Tables
+  DataTable, // The raw grid
+  
+  // ✅ FIX: Map "SmartTable" to the actual SmartTable component
+  // (Previously it was aliased to DataTable, which broke the UI)
+  SmartTable: SmartTable, 
+  
+  // Layout & Feedback
   Card,
   Alert,
   EmptyState,
-
-  // --- 🛡️ ROBUSTNESS ALIASES ---
-  // These mappings allow the manifest to use lowercase or alternate names
-  // without crashing the application.
   
-  // Tables
-  'table': DataTable,       // Fixes your specific error
-  'Table': DataTable,
-  'grid': DataTable,
-
-  // Charts
-  'chart': BarChart,        // Default generic chart to BarChart
-  'line': LineChart,
-  'bar': BarChart,
-  'pie': PieChart,
-
-  // IoT Fallbacks
-  'DataCard': DeviceCard,
-  'GaugeCard': DeviceCard,
-  'ToggleCard': DeviceCard,
-  'SliderCard': DeviceCard,
-  'SparklineCard': DeviceCard,
+  // Forms/Controls
+  ToggleSwitch
 };
 
-/**
- * Helper to safely resolve a component.
- * Returns a fallback if the component name is unknown.
- */
 export const getComponent = (name: string) => {
-  // 1. Try direct lookup
-  let Component = COMPONENT_REGISTRY[name];
-
-  // 2. If not found, try PascalCase (e.g. "deviceCard" -> "DeviceCard")
-  if (!Component) {
-    const pascalName = name.charAt(0).toUpperCase() + name.slice(1);
-    Component = COMPONENT_REGISTRY[pascalName];
-  }
-
+  const Component = COMPONENT_REGISTRY[name];
+  
   if (!Component) {
     console.warn(`[Registry] Unknown component type: "${name}"`);
     return () => (

package/template/src/core/data-seeder.ts

@@ -0,0 +1,35 @@
+// ✅ Match the export from your new mockData.ts
+import { DATA_REGISTRY } from '../data/mockData'; 
+
+const DB_PREFIX = 'ramme_db_';
+
+export const initializeDataLake = () => {
+  if (typeof window === 'undefined') return;
+
+  console.groupCollapsed('🌊 [Data Lake] Initialization');
+  
+  Object.entries(DATA_REGISTRY).forEach(([key, seedData]) => {
+    const storageKey = `${DB_PREFIX}${key}`;
+    const existing = localStorage.getItem(storageKey);
+
+    if (!existing) {
+      console.log(`✨ Seeding collection: ${key} (${seedData.length} records)`);
+      localStorage.setItem(storageKey, JSON.stringify(seedData));
+    } else {
+      console.log(`✅ Collection exists: ${key}`);
+    }
+  });
+
+  console.groupEnd();
+};
+
+/**
+ * Utility to clear the lake (useful for a "Reset Data" button)
+ */
+export const resetDataLake = () => {
+  // ✅ FIX: Use DATA_REGISTRY (the new name)
+  Object.keys(DATA_REGISTRY).forEach((key) => {
+    localStorage.removeItem(`${DB_PREFIX}${key}`);
+  });
+  window.location.reload();
+};

package/template/src/data/mockData.ts

@@ -1,43 +1,172 @@
-// src/data/mockData.ts
-
-// --- 1. Your Existing Examples ---
-export const mockChartData = [
-  { name: 'Jan', uv: 400, pv: 240 },
-  { name: 'Feb', uv: 300, pv: 139 },
-  { name: 'Mar', uv: 200, pv: 980 },
-  { name: 'Apr', uv: 278, pv: 390 },
-  { name: 'May', uv: 189, pv: 480 },
-  { name: 'Jun', uv: 239, pv: 380 },
-  { name: 'Jul', uv: 349, pv: 430 },
+/**
+ * @file src/data/mockData.ts
+ * @description The "Golden Copy" of seed data. 
+ * These records are injected into localStorage when the app first launches.
+ */
+
+// ✅ 1. Interface for the Metadata (Schema)
+export interface ResourceMeta {
+  name: string;
+  fields: {
+    key: string;
+    label: string;
+    type: string;
+    required?: boolean;
+    defaultValue?: any;
+    description?: string;
+  }[];
+}
+
+// --- DATA INTERFACES ---
+
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+  role: 'admin' | 'editor' | 'viewer';
+  status: 'active' | 'pending' | 'banned';
+  avatar?: string;
+  joinedAt: string;
+}
+
+export interface Product {
+  id: string;
+  name: string;
+  category: string;
+  price: number;
+  stock: number;
+  status: 'in_stock' | 'low_stock' | 'out_of_stock';
+}
+
+export interface Invoice {
+  id: string;
+  userId: string; // Foreign Key -> User
+  amount: number;
+  status: 'paid' | 'pending' | 'overdue';
+  date: string;
+}
+
+export interface Review {
+  id: string;
+  productId: string; // Foreign Key -> Product
+  rating: number;
+  comment: string;
+  author: string;
+  date: string;
+}
+
+export interface ActivityLog {
+  id: string;
+  action: string;
+  entity: string;
+  timestamp: string;
+  user: string;
+}
+
+// --- SEED DATA ---
+
+export const SEED_USERS: User[] = [
+  { id: 'usr_1', name: 'Alex Carter', email: 'alex@example.com', role: 'admin', status: 'active', joinedAt: '2023-01-15' },
+  { id: 'usr_2', name: 'Sarah Jenkins', email: 'sarah@example.com', role: 'editor', status: 'active', joinedAt: '2023-03-22' },
+  { id: 'usr_3', name: 'Mike Ross', email: 'mike@example.com', role: 'viewer', status: 'pending', joinedAt: '2023-05-10' },
+  { id: 'usr_4', name: 'Emily Blunt', email: 'emily@example.com', role: 'editor', status: 'banned', joinedAt: '2023-06-01' },
 ];
 
-export const mockTableData = [
-  { make: 'Tesla', model: 'Model Y', price: 64950, electric: true },
-  { make: 'Ford', model: 'F-Series', price: 33850, electric: false },
-  { make: 'Toyota', model: 'Corolla', price: 29600, electric: false },
-  { make: 'Mercedes', model: 'EQS', price: 102310, electric: true },
-  { make: 'BMW', model: 'i4', price: 51400, electric: true },
+export const SEED_PRODUCTS: Product[] = [
+  { id: 'prod_1', name: 'ErgoChair Pro', category: 'Furniture', price: 450, stock: 12, status: 'in_stock' },
+  { id: 'prod_2', name: 'Standing Desk', category: 'Furniture', price: 600, stock: 3, status: 'low_stock' },
+  { id: 'prod_3', name: 'Monitor Arm', category: 'Accessories', price: 120, stock: 0, status: 'out_of_stock' },
+  { id: 'prod_4', name: 'Mechanical Keyboard', category: 'Electronics', price: 180, stock: 25, status: 'in_stock' },
 ];
 
-// 2. FIXED: Energy Data (Recharts Format)
-// Recharts expects an Array of Objects, NOT { labels, datasets }
-export const energyHistoryData = [
-  { time: "12am", value: 12 },
-  { time: "4am", value: 19 },
-  { time: "8am", value: 3 },
-  { time: "12pm", value: 5 },
-  { time: "4pm", value: 2 },
-  { time: "8pm", value: 3 }
+export const SEED_INVOICES: Invoice[] = [
+  { id: 'inv_001', userId: 'usr_2', amount: 450.00, status: 'paid', date: '2023-10-01' },
+  { id: 'inv_002', userId: 'usr_1', amount: 1200.50, status: 'pending', date: '2023-10-05' },
+  { id: 'inv_003', userId: 'usr_3', amount: 180.00, status: 'overdue', date: '2023-09-15' },
+  { id: 'inv_004', userId: 'usr_2', amount: 600.00, status: 'paid', date: '2023-10-10' },
 ];
 
-// --- 3. The Lookup Registry ---
-// This allows the Manifest to refer to data by string ID.
-export const MOCK_DATA_REGISTRY: Record<string, any> = {
-  'energy_history': energyHistoryData,
-  'demo_chart': mockChartData,
-  'demo_cars': mockTableData
+export const SEED_REVIEWS: Review[] = [
+  { id: 'rev_1', productId: 'prod_1', rating: 5, comment: 'Life changing comfort!', author: 'Alex Carter', date: '2023-09-01' },
+  { id: 'rev_2', productId: 'prod_4', rating: 4, comment: 'Clicky but loud.', author: 'Mike Ross', date: '2023-09-10' },
+  { id: 'rev_3', productId: 'prod_2', rating: 2, comment: 'Wobbles at max height.', author: 'Sarah Jenkins', date: '2023-09-12' },
+];
+
+export const SEED_LOGS: ActivityLog[] = [
+  { id: 'log_1', action: 'User Created', entity: 'User', user: 'System', timestamp: '2023-10-01T10:00:00Z' },
+  { id: 'log_2', action: 'Invoice Paid', entity: 'Invoice', user: 'Alex Carter', timestamp: '2023-10-02T14:30:00Z' },
+  { id: 'log_3', action: 'Stock Updated', entity: 'Product', user: 'Sarah Jenkins', timestamp: '2023-10-03T09:15:00Z' },
+];
+
+// --- REGISTRIES ---
+
+// 1. Data Registry (The Records)
+export const DATA_REGISTRY: Record<string, any[]> = {
+  users: SEED_USERS,
+  products: SEED_PRODUCTS,
+  invoices: SEED_INVOICES,
+  reviews: SEED_REVIEWS,
+  logs: SEED_LOGS,
 };
 
-export const getMockData = (id: string) => {
-  return MOCK_DATA_REGISTRY[id] || null;
+// 2. Metadata Registry (The Schema/Definitions)
+export const RESOURCE_METADATA: Record<string, ResourceMeta> = {
+  users: {
+    name: 'Users',
+    fields: [
+      { key: 'name', label: 'Name', type: 'text', required: true },
+      { key: 'email', label: 'Email', type: 'email', required: true },
+      { key: 'role', label: 'Role', type: 'status' },
+      { key: 'status', label: 'Status', type: 'status' },
+      { key: 'joinedAt', label: 'Joined', type: 'date' },
+    ]
+  },
+  products: {
+    name: 'Products',
+    fields: [
+      { key: 'name', label: 'Product Name', type: 'text', required: true },
+      { key: 'category', label: 'Category', type: 'text' },
+      { key: 'price', label: 'Price', type: 'currency' },
+      { key: 'stock', label: 'Stock', type: 'number' },
+      { key: 'status', label: 'Availability', type: 'status' },
+    ]
+  },
+  invoices: {
+    name: 'Invoices',
+    fields: [
+      // ✅ FIX: Changed label from 'User ID' to 'User'
+      { key: 'userId', label: 'User', type: 'text', required: true },
+      { key: 'amount', label: 'Amount', type: 'currency' },
+      { key: 'status', label: 'Status', type: 'status' },
+      { key: 'date', label: 'Date', type: 'date' },
+    ]
+  },
+  reviews: {
+    name: 'Reviews',
+    fields: [
+      // ✅ FIX: Changed label from 'Product ID' to 'Product'
+      { key: 'productId', label: 'Product', type: 'text' },
+      { key: 'rating', label: 'Rating', type: 'number' },
+      { key: 'comment', label: 'Comment', type: 'text' },
+      { key: 'author', label: 'Author', type: 'text' },
+    ]
+  },
+  logs: {
+    name: 'Activity Logs',
+    fields: [
+      { key: 'action', label: 'Action', type: 'text' },
+      { key: 'entity', label: 'Entity', type: 'text' },
+      { key: 'user', label: 'User', type: 'text' },
+      { key: 'timestamp', label: 'Time', type: 'date' },
+    ]
+  }
+};
+
+// --- HELPERS ---
+
+export const getMockData = (id: string) => DATA_REGISTRY[id] || [];
+
+// ✅ Updated to return ResourceMeta or null (instead of never/null)
+export const getResourceMeta = (id: string): ResourceMeta | null => {
+  return RESOURCE_METADATA[id] || null;
 };

package/template/src/generated/hooks.ts

@@ -1,61 +1,40 @@
-// ------------------------------------------------------------------
-// GENERATED ADAPTER CODE
-// Config: LIVE MODE (HTTP)
-// ------------------------------------------------------------------
-import { useEffect, useState } from 'react';
+import { useSignal } from '../hooks/useSignal';
 
-// Signal IDs defined in your Acme Corp schema
-export type SignalId = 'mrr_stripe' | 'active_users';
-
-export function useGeneratedSignals() {
-  // 1. Initialize state with default values (0)
-  const [signals, setSignals] = useState<Record<SignalId, any>>({
-    'mrr_stripe': { value: 0, unit: 'USD', status: 'stale' },
-    'active_users': { value: 0, unit: '', status: 'stale' }
+export const useGeneratedSignals = () => {
+  
+  // 🟢 REAL: Connected to public MQTT test broker
+  const living_room_ac = useSignal('living_room_ac', {
+    initialValue: 72,
+    min: 60,
+    max: 90,
+    unit: '°F',
+    topic: 'ramme/test/temp' // <--- The magic link
   });
 
-  // 2. HTTP Polling Implementation
-  useEffect(() => {
-    // Helper to extract nested data (e.g. "data.finance.mrr")
-    const getNestedValue = (obj: any, path: string) => {
-      return path.split('.').reduce((acc, part) => acc && acc[part], obj);
-    };
+  // 🟠 MOCK: Simulation Mode
+  const living_room_hum = useSignal('living_room_hum', {
+    initialValue: 45,
+    min: 40,
+    max: 60,
+    unit: '%'
+  });
 
-    const pollEndpoints = async () => {
-      console.log('🔄 Polling /api_mock.json...');
-      
-      try {
-        const response = await fetch('/api_mock.json');
-        if (response.ok) {
-          const json = await response.json();
-          
-          // Update Signals based on the paths defined in manifest
-          setSignals(prev => ({
-            ...prev,
-            'mrr_stripe': { 
-              value: getNestedValue(json, 'data.finance.mrr'), 
-              unit: 'USD', 
-              status: 'fresh' 
-            },
-            'active_users': { 
-              value: getNestedValue(json, 'data.users.total'), 
-              unit: '', 
-              status: 'fresh' 
-            }
-          }));
-        }
-      } catch (err) {
-        console.error("API Polling Error:", err);
-      }
-    };
+  const server_01 = useSignal('server_01', {
+    initialValue: 42,
+    min: 10,
+    max: 95,
+    unit: '%'
+  });
 
-    // Initial Fetch
-    pollEndpoints();
-    
-    // Poll every 5s
-    const interval = setInterval(pollEndpoints, 5000);
-    return () => clearInterval(interval);
-  }, []);
+  const front_door_lock = useSignal('front_door_lock', {
+    initialValue: 'LOCKED',
+    unit: ''
+  });
 
-  return signals;
-}
+  return {
+    living_room_ac,
+    living_room_hum,
+    server_01,
+    front_door_lock,
+  };
+};

package/template/src/hooks/useDataQuery.ts

@@ -0,0 +1,84 @@
+import { useMemo } from 'react';
+
+// --- 1. Export the Missing Types (Fixes ts(2305)) ---
+
+export type SortDirection = 'asc' | 'desc';
+
+export interface SortOption {
+  field: string;
+  direction: SortDirection;
+}
+
+export interface FilterOption {
+  field: string;
+  operator: 'equals' | 'contains' | 'gt' | 'lt' | 'neq';
+  value: any;
+}
+
+export interface QueryOptions {
+  filters?: FilterOption[];
+  sort?: SortOption;
+  page?: number;
+  pageSize?: number;
+}
+
+export interface QueryResult<T> {
+  data: T[];
+  total: number;
+  pageCount: number;
+}
+
+// --- 2. Update the Hook Signature (Fixes ts(2345)) ---
+
+export function useDataQuery<T>(
+  rawData: T[], // <--- Now accepts an Array, NOT a string ID
+  options: QueryOptions = {}
+): QueryResult<T> {
+  const { filters, sort, page = 1, pageSize = 10 } = options;
+
+  // A. Filtering Logic
+  const filteredData = useMemo(() => {
+    if (!filters || filters.length === 0) return rawData;
+
+    return rawData.filter((item: any) => {
+      return filters.every((filter) => {
+        const itemValue = item[filter.field];
+        
+        switch (filter.operator) {
+          case 'equals': return itemValue == filter.value;
+          case 'neq': return itemValue != filter.value;
+          case 'contains': 
+            return String(itemValue).toLowerCase().includes(String(filter.value).toLowerCase());
+          case 'gt': return itemValue > filter.value;
+          case 'lt': return itemValue < filter.value;
+          default: return true;
+        }
+      });
+    });
+  }, [rawData, filters]);
+
+  // B. Sorting Logic
+  const sortedData = useMemo(() => {
+    if (!sort) return filteredData;
+
+    return [...filteredData].sort((a: any, b: any) => {
+      const aValue = a[sort.field];
+      const bValue = b[sort.field];
+      if (aValue < bValue) return sort.direction === 'asc' ? -1 : 1;
+      if (aValue > bValue) return sort.direction === 'asc' ? 1 : -1;
+      return 0;
+    });
+  }, [filteredData, sort]);
+
+  // C. Pagination Logic
+  const paginatedResult = useMemo(() => {
+    const startIndex = (page - 1) * pageSize;
+    return sortedData.slice(startIndex, startIndex + pageSize);
+  }, [sortedData, page, pageSize]);
+
+  return {
+    data: paginatedResult,
+    total: filteredData.length,
+    pageCount: Math.ceil(filteredData.length / pageSize),
+  };
+}