@ramme-io/create-app 1.2.1 → 1.2.5

package/template/src/components/dev/GhostOverlay.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { Icon } from '@ramme-io/ui';
-
-interface GhostOverlayProps {
-  children: React.ReactNode;
-  componentId: string;
-  componentType: string;
-  signalId?: string;
-  isActive?: boolean;
-}
-
-export const GhostOverlay: React.FC<GhostOverlayProps> = ({
-  children,
-  componentId,
-  componentType,
-  signalId,
-  isActive = false,
-}) => {
-  
-  if (!isActive) {
-    return <>{children}</>;
-  }
-
-  const handleClick = (e: React.MouseEvent) => {
-    // 🛑 Stop the click from triggering app logic (like navigation or toggles)
-    e.preventDefault();
-    e.stopPropagation();
-
-    // 🚀 THE GHOST BRIDGE: Signal the Parent (The Builder)
-    window.parent.postMessage({
-      type: 'RAMME_SELECT_BLOCK',
-      payload: { blockId: componentId }
-    }, '*');
-  };
-
-  return (
-    <div 
-      className="relative group cursor-pointer"
-      onClick={handleClick} // ✅ Add Click Handler
-    >
-      {/* The "Ghost" Border */}
-      <div className="absolute inset-0 z-50 border-2 border-dashed border-accent/50 rounded-lg bg-accent/5 group-hover:bg-accent/10 transition-colors pointer-events-none" />
-
-      {/* The "Info Tag" */}
-      <div className="absolute top-0 left-0 z-50 p-2 transform -translate-y-1/2 translate-x-2 pointer-events-none">
-        <div className="flex items-center gap-2 bg-accent text-accent-foreground text-xs font-mono py-1 px-2 rounded shadow-sm">
-          <Icon name="box" size={12} />
-          <span className="font-bold">{componentType}</span>
-        </div>
-      </div>
-
-      {/* The "Signal Wire" */}
-      {signalId && (
-        <div className="absolute bottom-0 right-0 z-50 p-2 transform translate-y-1/2 -translate-x-2 pointer-events-none">
-           <div className="flex items-center gap-1.5 bg-blue-600 text-white text-xs font-mono py-1 px-2 rounded shadow-sm">
-            <Icon name="activity" size={12} />
-            <span>{signalId}</span>
-          </div>
-        </div>
-      )}
-
-      {/* Render the actual component underneath */}
-      <div className="opacity-50 grayscale transition-all duration-200 group-hover:opacity-75 group-hover:grayscale-0 pointer-events-none">
-        {children}
-      </div>
-    </div>
-  );
-};

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

@@ -1,110 +0,0 @@
-/**
- * @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: "dev_4",
-        component: "DeviceCard",
-        props: {
-          title: "Front Door",
-          description: "Entryway • Camera 01",
-          icon: "lock", // This maps to the Lucide icon 'lock'
-          status: "offline", // Default state before data loads
-          trend: "Locked"
-        },
-        signalId: "front_door_lock" // <--- We will wire this next
-      }
-    ]
-  },
-  {
-    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/contexts/AuthContext.tsx

@@ -1,64 +0,0 @@
-import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
-import { mockUsers, type User } from '../data/mockUsers';
-
-interface AuthContextType {
-  user: User | null;
-  login: (username: string, password?: string) => Promise<User | null>;
-  logout: () => void;
-  isLoading: boolean;
-}
-
-const AuthContext = createContext<AuthContextType | undefined>(undefined);
-
-export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
-  const [user, setUser] = useState<User | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-
-  useEffect(() => {
-    // Check for a logged-in user in localStorage on initial load
-    const storedUser = localStorage.getItem('authUser');
-    if (storedUser) {
-      setUser(JSON.parse(storedUser));
-    }
-    setIsLoading(false);
-  }, []);
-
-  const login = async (username: string, password?: string): Promise<User | null> => {
-    // Simulate API call
-    return new Promise((resolve) => {
-      setTimeout(() => {
-        const foundUser = mockUsers.find(
-          u => u.username === username && u.password === password
-        );
-        if (foundUser) {
-          const userToStore = { ...foundUser };
-          delete userToStore.password; // Don't store password
-          localStorage.setItem('authUser', JSON.stringify(userToStore));
-          setUser(userToStore);
-          resolve(userToStore);
-        } else {
-          resolve(null);
-        }
-      }, 500);
-    });
-  };
-
-  const logout = () => {
-    localStorage.removeItem('authUser');
-    setUser(null);
-  };
-
-  return (
-    <AuthContext.Provider value={{ user, login, logout, isLoading }}>
-      {children}
-    </AuthContext.Provider>
-  );
-};
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-  return context;
-};

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import {
-  DeviceCard,
-  StatCard,
-  BarChart,
-  LineChart,
-  PieChart,
-  DataTable, 
-  Card,
-  Alert,
-  EmptyState,
-  ToggleSwitch
-} from '@ramme-io/ui';
-
-// ✅ IMPORT YOUR CUSTOM COMPONENT
-import { SmartTable } from '../blocks/SmartTable';
-
-export const COMPONENT_REGISTRY: Record<string, React.FC<any>> = {
-  // IoT Primitives
-  DeviceCard,
-  
-  // Data Display
-  StatCard,
-  BarChart,
-  LineChart,
-  PieChart,
-  
-  // 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,
-  
-  // Forms/Controls
-  ToggleSwitch
-};
-
-export const getComponent = (name: string) => {
-  const Component = COMPONENT_REGISTRY[name];
-  
-  if (!Component) {
-    console.warn(`[Registry] Unknown component type: "${name}"`);
-    return () => (
-      <Alert variant="danger" 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/core/data-seeder.ts

@@ -1,35 +0,0 @@
-// ✅ 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/mockUsers.ts

@@ -1,18 +0,0 @@
-export interface User {
-  id: number;
-  name: string;
-  email: string;
-  username: string; // <-- Add this
-  password?: string; // <-- Add this (optional for security)
-  role: 'Admin' | 'Editor' | 'Viewer';
-  status: 'Active' | 'Pending' | 'Banned';
-  createdAt: string; 
-}
-
-// NOTE: In a real app, passwords would be hashed. This is for simulation only.
-export const mockUsers: User[] = [
-  { id: 1, name: 'Jane Cooper', email: 'jane.cooper@example.com', username: 'jane', password: 'password', role: 'Admin', status: 'Active', createdAt: '2023-01-15T10:00:00Z' },
-  { id: 2, name: 'Cody Fisher', email: 'cody.fisher@example.com', username: 'cody', password: 'password', role: 'Editor', status: 'Active', createdAt: '2023-02-20T11:30:00Z' },
-  { id: 3, name: 'Esther Howard', email: 'esther.howard@example.com', username: 'esther', password: 'password', role: 'Viewer', status: 'Pending', createdAt: '2023-03-05T09:15:00Z' },
-  // ... other users
-];

package/template/src/hooks/useSignal.ts

@@ -1,83 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useMqtt } from '../contexts/MqttContext';
-import type { Signal } from '../types/signal';
-
-interface SignalConfig<T> {
-  initialValue?: T;
-  min?: number;     
-  max?: number;
-  interval?: number; // Mock mode only
-  unit?: string;
-  topic?: string;    // Real mode only
-}
-
-export function useSignal<T = any>(signalId: string, config: SignalConfig<T> = {}): Signal<T> {
-  const { 
-    initialValue, 
-    min = -Infinity, 
-    max = Infinity, 
-    interval = 2000, 
-    unit,
-    topic 
-  } = config;
-
-  const { subscribe, unsubscribe, lastMessage, isConnected } = useMqtt();
-
-  const [signal, setSignal] = useState<Signal<T>>({
-    id: signalId,
-    value: initialValue as T,
-    unit: unit,
-    timestamp: Date.now(),
-    status: 'fresh',
-    max: max 
-  });
-
-  // --- REAL MODE: MQTT ---
-  useEffect(() => {
-    if (!topic || !isConnected) return;
-    subscribe(topic);
-    return () => unsubscribe(topic);
-  }, [topic, isConnected, subscribe, unsubscribe]);
-
-  useEffect(() => {
-    if (!topic || !lastMessage[topic]) return;
-
-    const rawValue = lastMessage[topic];
-    let parsedValue: any = rawValue;
-
-    // Auto-parse numbers and booleans
-    if (!isNaN(Number(rawValue))) parsedValue = Number(rawValue);
-    else if (rawValue.toLowerCase() === 'true' || rawValue === 'on') parsedValue = true;
-    else if (rawValue.toLowerCase() === 'false' || rawValue === 'off') parsedValue = false;
-
-    setSignal(prev => ({
-        ...prev,
-        value: parsedValue,
-        timestamp: Date.now(),
-        status: 'fresh'
-    }));
-  }, [lastMessage, topic]);
-
-  // --- MOCK MODE: SIMULATION ---
-  useEffect(() => {
-    if (topic) return; // Disable mock if topic exists
-
-    const timer = setInterval(() => {
-      setSignal(prev => {
-        let newValue: any = prev.value;
-        if (typeof prev.value === 'number') {
-            const variance = (Math.random() - 0.5) * 2; 
-            let nextNum = prev.value + variance;
-            if (min !== undefined) nextNum = Math.max(min, nextNum);
-            if (max !== undefined) nextNum = Math.min(max, nextNum);
-            newValue = Number(nextNum.toFixed(1));
-        }
-        return { ...prev, value: newValue, timestamp: Date.now(), status: 'fresh' };
-      });
-    }, interval); 
-
-    return () => clearInterval(timer);
-  }, [topic, min, max, interval]);
-
-  return signal;
-}

package/template/src/hooks/useWorkflowEngine.ts

@@ -1,123 +0,0 @@
-import { useEffect } from 'react';
-import { useToast } from '@ramme-io/ui';
-// @ts-ignore - These generated hooks exist in the build
-import { useGeneratedSignals, useSimulation } from '../generated/hooks';
-import { appManifest } from '../config/app.manifest';
-// ✅ Import types to fix implicit 'any' errors
-import type { ActionDefinition, WorkflowDefinition } from '../types/schema';
-
-/**
- * THE RUNTIME LOGIC ENGINE
- * This hook breathes life into the application.
- * It watches for signal changes and executes the workflows defined in the manifest.
- */
-export const useWorkflowEngine = () => {
-  const signals = useGeneratedSignals();
-  const { addToast } = useToast();
-  
-  // 1. Activate the Data Simulation (Randomizer)
-  useSimulation();
-
-  // 2. Define the Action Executor
-  // ✅ Explicitly typed 'action'
-  const executeAction = async (action: ActionDefinition, context: any) => {
-    console.log(`[Engine] Executing: ${action.type}`, action);
-
-    switch (action.type) {
-      case 'send_notification':
-        addToast(action.config.message || 'Notification Sent', 'info');
-        break;
-
-      case 'update_resource':
-        // In a real app, this would call the API
-        addToast(`Updating Resource: ${JSON.stringify(action.config)}`, 'success');
-        break;
-
-      case 'agent_task':
-        // Simulate AI Agent processing
-        console.log(`[AI Agent] Thinking about: "${action.config.prompt}"...`);
-        // ✅ FIX: 'loading' is not a valid ToastType. Using 'info' instead.
-        addToast('AI Agent Analyzing...', 'info');
-        
-        setTimeout(() => {
-          // Mock response based on prompt context
-          const response = action.config.prompt?.includes('health') 
-            ? "System Operating Normally." 
-            : "Optimization Recommended.";
-            
-          addToast(`🤖 Agent: "${response}"`, 'success', 5000);
-        }, 1500);
-        break;
-
-      case 'navigate':
-        window.location.href = action.config.path;
-        break;
-
-      default:
-        console.warn('Unknown action type:', action.type);
-    }
-  };
-
-  // 3. Watch Signals & Trigger Workflows
-  useEffect(() => {
-    if (!appManifest.domain?.workflows) return;
-
-    // ✅ Explicitly typed 'flow'
-    appManifest.domain.workflows.forEach((flow: WorkflowDefinition) => {
-      if (!flow.active) return;
-
-      // Check Trigger: Signal Change
-      if (flow.trigger.type === 'signal_change') {
-        const signalId = flow.trigger.config.signalId;
-        const condition = flow.trigger.config.condition; // e.g., "> 80"
-        
-        // @ts-ignore
-        const signal = signals[signalId];
-        
-        if (signal) {
-          const val = typeof signal === 'object' ? signal.value : signal;
-          
-          try {
-            // Check if condition is met (e.g. "50 > 80")
-            const isMet = checkCondition(val, condition); 
-            
-            if (isMet) {
-              // Throttling logic would go here to prevent spam
-              console.log(`[Engine] Trigger Fired: ${flow.name}`);
-              flow.actions.forEach(action => executeAction(action, { signal: val }));
-            }
-          } catch (e) {
-            // Ignore parse errors
-          }
-        }
-      }
-    });
-  }, [signals, addToast]); 
-
-  return { 
-    // Exposed for manual triggering (e.g. Buttons)
-    triggerWorkflow: (workflowId: string) => {
-      const flow = appManifest.domain?.workflows?.find(w => w.id === workflowId);
-      if (flow) {
-        flow.actions.forEach(action => executeAction(action, { manual: true }));
-      }
-    }
-  };
-};
-
-// --- HELPER: Safe Condition Checker ---
-const checkCondition = (value: number, condition: string): boolean => {
-  if (!condition) return false;
-  const parts = condition.trim().split(' ');
-  const operator = parts[0];
-  const target = parseFloat(parts[1]);
-
-  switch (operator) {
-    case '>': return value > target;
-    case '<': return value < target;
-    case '>=': return value >= target;
-    case '<=': return value <= target;
-    case '==': return value === target;
-    default: return false;
-  }
-};

package/template/src/layouts/DataLayout.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
-import { PageWithSideNav } from '../components/PageWithSideNav';
-import { useSitemap } from '../contexts/SitemapContext'; // Import the custom hook
-
-const DataLayout: React.FC = () => {
-  const location = useLocation();
-  const sitemap = useSitemap(); // Consume the sitemap from context
-  const isDocsTemplate = location.pathname.startsWith('/docs');
-
-  if (isDocsTemplate) {
-    const dataSitemapSection = sitemap.find(item => item.id === 'data');
-    
-    const navItems = (dataSitemapSection?.children || []).map(child => ({
-      label: child.title,
-      href: child.path,
-      icon: child.icon,
-    }));
-
-    return (
-      <PageWithSideNav
-        sideNavHeader={
-          <h2 className="text-lg font-semibold tracking-tight mb-2">
-            {dataSitemapSection?.title || 'Data'}
-          </h2>
-        }
-        navItems={navItems}
-      >
-        <Outlet />
-      </PageWithSideNav>
-    );
-  }
-
-  return <Outlet />;
-};
-
-export default DataLayout;

package/template/src/layouts/SideNavLayout.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { Outlet } from 'react-router-dom';
-import { PageWithSideNav } from '../components/PageWithSideNav';
-import type { NavItem } from '../components/LocalSideNav';
-
-interface SideNavLayoutProps {
-  navItems: NavItem[];
-  sideNavHeader?: React.ReactNode;
-  contentWidth?: 'fixed' | 'full';
-}
-
-const SideNavLayout: React.FC<SideNavLayoutProps> = ({
-  navItems,
-  sideNavHeader,
-  contentWidth = 'fixed',
-}) => {
-  return (
-    <PageWithSideNav
-      navItems={navItems}
-      sideNavHeader={sideNavHeader}
-      contentWidth={contentWidth}
-    >
-      <Outlet />
-    </PageWithSideNav>
-  );
-};
-
-export default SideNavLayout;

package/template/src/pages/Dashboard.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import { useLocation } from 'react-router-dom';
-import { PageHeader, Alert } from '@ramme-io/ui';
-import { appManifest } from '../config/app.manifest';
-import { DynamicBlock } from '../components/DynamicBlock';
-
-const Dashboard: React.FC = () => {
-  const location = useLocation();
-  
-  // 1. Determine current slug from URL
-  const pathParts = location.pathname.split('/').filter(Boolean);
-  // If path is root or /dashboard, slug is 'dashboard', else take the last part
-  const currentSlug = pathParts.length > 1 ? pathParts[pathParts.length - 1] : 'dashboard';
-
-  // 2. Find the matching Page Definition
-  const pageDef = appManifest.pages?.find(p => p.slug === currentSlug) 
-    || appManifest.pages?.[0];
-
-  if (!pageDef) {
-    return (
-      <div className="p-8">
-        <Alert variant="warning" title="Page Not Found">
-          Could not find a definition for slug: <code>{currentSlug}</code>
-        </Alert>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-8 relative">
-      <PageHeader
-        title={pageDef.title}
-        description={pageDef.description}
-      />
-
-      {pageDef.sections.map((section) => (
-        <div key={section.id} className="relative">
-          {section.title && (
-            <h3 className="text-lg font-semibold mb-4 text-foreground">
-              {section.title}
-            </h3>
-          )}
-          
-          <div 
-            className="grid gap-6"
-            style={{ 
-              gridTemplateColumns: `repeat(${section.layout?.columns || 3}, minmax(300px, 1fr))` 
-            }}
-          >
-            {section.blocks.map((block) => (
-              <DynamicBlock key={block.id} block={block} />
-            ))}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default Dashboard;