@ramme-io/create-app 1.2.0 → 1.2.2

package/template/src/blocks/SmartTable.tsx

@@ -1,191 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { DataTable, Button, Icon, Card, useToast, type ColDef } from '@ramme-io/ui';
-import { getResourceMeta, getMockData } from '../data/mockData';
-import { AutoForm } from '../components/AutoForm';
-// ✅ Import types that now definitely exist
-import { useDataQuery, type FilterOption, type SortOption } from '../hooks/useDataQuery';
-import { useCrudLocalStorage } from '../hooks/useCrudLocalStorage';
-
-interface SmartTableProps {
-  dataId: string;
-  title?: string;
-  initialFilter?: Record<string, any>; 
-  initialSort?: SortOption;
-}
-
-export const SmartTable: React.FC<SmartTableProps> = ({ 
-  dataId, 
-  title,
-  initialFilter, 
-  initialSort 
-}) => {
-  const { addToast } = useToast();
-  
-  // 1. STATE
-  const [page, setPage] = useState(1);
-  const [pageSize] = useState(10); // Kept as state in case we add a selector later
-  
-  // 2. METADATA
-  const meta = getResourceMeta(dataId);
-
-  // 3. STORAGE LAYER
-  // Seed data if local storage is empty
-  const seedData = useMemo(() => getMockData(dataId) || [], [dataId]);
-  
-  const { 
-    data: rawData, 
-    createItem, 
-    updateItem 
-  } = useCrudLocalStorage<any>(`ramme_db_${dataId}`, seedData);
-
-  // 4. LOGIC LAYER
-  const activeFilters = useMemo<FilterOption[]>(() => {
-    if (!initialFilter) return [];
-    return Object.entries(initialFilter).map(([key, value]) => ({
-      field: key,
-      operator: 'equals',
-      value
-    }));
-  }, [initialFilter]);
-
-  const { data: processedRows, total, pageCount } = useDataQuery(rawData, {
-    filters: activeFilters,
-    sort: initialSort, // Using the prop directly for now (Fixes 'setSort' unused)
-    page,
-    pageSize
-  });
-
-  // 5. UI STATE
-  const [isEditOpen, setIsEditOpen] = useState(false);
-  const [currentRecord, setCurrentRecord] = useState<any>(null);
-
-  // 6. COLUMNS
-  const columns = useMemo(() => {
-    if (meta?.fields) {
-      const cols: ColDef[] = meta.fields.map((f: any) => {
-        const colDef: ColDef = {
-          field: f.key,
-          headerName: f.label,
-          filter: true,
-          sortable: true,
-          flex: 1,
-        };
-
-        if (f.key.endsWith('Id')) {
-           const collectionName = f.key.replace('Id', 's'); 
-           const relatedData = getMockData(collectionName);
-           if (relatedData) {
-             colDef.valueFormatter = (params) => {
-               const match = relatedData.find((item: any) => item.id === params.value);
-               return match ? (match.name || match.title || params.value) : params.value;
-             };
-           }
-        }
-
-        if (f.type === 'currency') colDef.valueFormatter = (p: any) => p.value ? `$${p.value}` : '';
-        if (f.type === 'date') colDef.valueFormatter = (p: any) => p.value ? new Date(p.value).toLocaleDateString() : '';
-        
-        if (f.type === 'status') {
-          colDef.cellRenderer = (p: any) => (
-            <span className={`px-2 py-1 rounded-full text-xs font-medium border
-              ${['active', 'paid'].includes(p.value?.toLowerCase()) ? 'bg-green-100 text-green-800 border-green-200' : 
-                ['pending'].includes(p.value?.toLowerCase()) ? 'bg-yellow-100 text-yellow-800 border-yellow-200' : 'bg-slate-100 text-slate-800 border-slate-200'}`}>
-              {p.value}
-            </span>
-          );
-        }
-        return colDef;
-      });
-
-      cols.push({
-        headerName: "Actions",
-        field: "id",
-        width: 100,
-        pinned: 'right',
-        cellRenderer: (params: any) => (
-          <Button variant="ghost" size="sm" onClick={() => { setCurrentRecord(params.data); setIsEditOpen(true); }}>
-            <Icon name="edit-2" className="w-4 h-4 text-slate-500" />
-          </Button>
-        )
-      });
-      return cols;
-    }
-    
-    if (processedRows.length > 0) {
-      return Object.keys(processedRows[0]).map(k => ({ field: k, headerName: k.toUpperCase(), flex: 1 }));
-    }
-    return [];
-  }, [meta, processedRows]);
-
-  const handleSave = (record: any) => {
-    if (record.id && currentRecord?.id) {
-        updateItem(record);
-        addToast('Record updated successfully', 'success');
-    } else {
-        const { id, ...newItem } = record;
-        createItem(newItem);
-        addToast('New record created', 'success');
-    }
-    setIsEditOpen(false);
-  };
-
-  return (
-    <Card className="p-0 overflow-hidden border border-border flex flex-col h-full min-h-[500px]"> 
-      <div className="p-4 border-b border-border flex justify-between items-center bg-muted/20">
-        <div className="flex items-center gap-2">
-          <h3 className="text-lg font-semibold text-foreground">
-            {title || meta?.name || dataId}
-          </h3>
-          <span className="text-xs text-muted-foreground bg-muted px-2 py-0.5 rounded-full">
-            {total} records
-          </span>
-        </div>
-        <Button size="sm" variant="outline" onClick={() => { setCurrentRecord({}); setIsEditOpen(true); }}>
-          <Icon name="plus" className="mr-2 w-4 h-4" /> Add Item
-        </Button>
-      </div>
-
-      <div className="flex-1 w-full bg-card relative">
-        <DataTable 
-          rowData={processedRows} 
-          columnDefs={columns} 
-          pagination={false} // We handle pagination logic manually below
-        />
-        
-        {/* Pagination Controls */}
-        <div className="p-2 border-t border-border flex justify-between items-center text-sm">
-           <span className="text-muted-foreground">
-             Page {page} of {pageCount || 1}
-           </span>
-           <div className="flex gap-2">
-             <Button 
-               variant="ghost" 
-               size="sm" 
-               disabled={page === 1} 
-               onClick={() => setPage(p => Math.max(1, p - 1))}
-             >
-               Prev
-             </Button>
-             <Button 
-               variant="ghost" 
-               size="sm" 
-               disabled={page >= pageCount} 
-               onClick={() => setPage(p => p + 1)}
-             >
-               Next
-             </Button>
-           </div>
-        </div>
-      </div>
-
-      <AutoForm
-        isOpen={isEditOpen}
-        onClose={() => setIsEditOpen(false)}
-        onSubmit={handleSave}
-        title={meta?.name || 'Item'}
-        fields={meta?.fields || []}
-        initialData={currentRecord}
-      />
-    </Card>
-  );
-};

package/template/src/components/LocalSideNav.tsx

@@ -1,120 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
-import { Icon, type IconName } from '@ramme-io/ui';
-import { motion, AnimatePresence } from 'framer-motion';
-
-export interface NavItem {
-  label: string;
-  href: string;
-  icon?: IconName;
-  children?: NavItem[];
-}
-
-interface LocalSideNavProps {
-  navItems: NavItem[];
-  className?: string;
-  onLinkClick?: () => void; // 1. Add the optional prop
-}
-
-const LocalSideNav: React.FC<LocalSideNavProps> = ({ navItems, className, onLinkClick }) => { // 2. Destructure prop
-  const location = useLocation();
-  const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({});
-
-  useEffect(() => {
-    const currentParent = navItems.find(item => 
-      item.children?.some(child => location.pathname === child.href)
-    );
-    if (currentParent) {
-      setExpandedItems(prev => ({ ...prev, [currentParent.href]: true }));
-    }
-  }, [location.pathname, navItems]);
-
-  const handleToggle = (href: string) => {
-    setExpandedItems(prev => ({ ...prev, [href]: !prev[href] }));
-  };
-  
-  const childNavLinkClasses = ({ isActive }: { isActive: boolean }) =>
-    `flex items-center gap-2 text-sm transition-colors duration-200 py-1 ${
-      isActive
-        ? 'text-primary font-medium'
-        : 'text-muted-foreground hover:text-text'
-    }`;
-  
-  const renderNavLinks = (items: NavItem[]) => {
-    return items.map(item => {
-      const isExpanded = !!expandedItems[item.href];
-
-      if (item.children) {
-        return (
-          //Section link
-          <li key={item.href}>
-            <button
-              onClick={() => handleToggle(item.href)}
-              className="flex w-full items-center justify-between gap-2 py-1 font-normal text-text transition-colors duration-200 hover:text-primary"
-            >
-              <span className="flex items-center gap-2">
-                {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
-                <span className="text-md">{item.label}</span>
-              </span>
-              <Icon
-                name="chevron-right"
-                className={`h-4 w-4 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
-              />
-            </button>
-            <AnimatePresence initial={false}>
-              {isExpanded && (
-                <motion.ul
-                  key="content"
-                  initial="collapsed"
-                  animate="open"
-                  exit="collapsed"
-                  variants={{
-                    open: { opacity: 1, height: 'auto' },
-                    collapsed: { opacity: 0, height: 0 },
-                  }}
-                  transition={{ duration: 0.3, ease: 'easeInOut' }}
-                  className="space-y-1 overflow-hidden border-l border-border pl-5 mt-1 ml-1"
-                >
-                  {item.children.map(child => (
-                    <li key={child.href}>
-                      <NavLink
-                        to={child.href}
-                        className={childNavLinkClasses}
-                        onClick={onLinkClick} // 3. Add onClick to child NavLink
-                      >
-                        {child.label}
-                      </NavLink>
-                    </li>
-                  ))}
-                </motion.ul>
-              )}
-            </AnimatePresence>
-          </li>
-        );
-      }
-      
-      return (
-        <li key={item.href}>
-          <NavLink
-            to={item.href}
-            className="flex items-center gap-2 py-1 text-lg font-semibold"
-            onClick={onLinkClick} // 3. Add onClick to top-level NavLink
-          >
-            {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
-            {item.label}
-          </NavLink>
-        </li>
-      );
-    });
-  };
-
-  return (
-    <nav className={`w-full ${className || ''}`}>
-      <ul className="space-y-1">
-        {renderNavLinks(navItems)}
-      </ul>
-    </nav>
-  );
-};
-
-export default LocalSideNav;

package/template/src/components/PageWithSideNav.tsx

@@ -1,69 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Drawer, Icon } from '@ramme-io/ui';
-import LocalSideNav from './LocalSideNav';
-import type { NavItem } from './LocalSideNav';
-
-interface PageWithSideNavProps {
-  navItems: NavItem[];
-  children: React.ReactNode;
-  sideNavHeader?: React.ReactNode;
-  contentWidth?: 'fixed' | 'full';
-}
-
-export const PageWithSideNav: React.FC<PageWithSideNavProps> = ({
-  navItems,
-  children,
-  sideNavHeader,
-  contentWidth = 'fixed',
-}) => {
-  const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
-
-  const contentContainerClass = contentWidth === 'fixed'
-    ? 'max-w-7xl mx-auto'
-    : '';
-
-  return (
-    <div className="flex flex-col md:flex-row h-full">
-      {/* --- Mobile Header --- */}
-      <div className="md:hidden p-4 bg-card border-b border-border flex items-center justify-between sticky top-[65px] z-10">
-        {sideNavHeader}
-        <Button onClick={() => setIsMobileNavOpen(true)} variant="ghost" size="icon">
-          <Icon name="panel-left" />
-        </Button>
-      </div>
-
-      {/* --- Desktop Sidebar --- */}
-      <aside className="hidden md:flex flex-col w-64 border-r border-border p-4 sticky top-[65px] h-[calc(100vh-65px)]">
-        {sideNavHeader}
-        <LocalSideNav navItems={navItems} className="mt-1" />
-      </aside>
-      
-      {/* --- Mobile Drawer --- */}
-      <Drawer
-        isOpen={isMobileNavOpen}
-        onClose={() => setIsMobileNavOpen(false)}
-        position="left"
-      >
-        <div className="p-4">
-            <Button 
-              onClick={() => setIsMobileNavOpen(false)} 
-              variant="ghost" 
-              size="icon" 
-              className="absolute top-4 right-4"
-            >
-                <Icon name="x" />
-            </Button>
-            <div className="mt-2">{sideNavHeader}</div>
-            <LocalSideNav navItems={navItems} onLinkClick={() => setIsMobileNavOpen(false)} />
-        </div>
-      </Drawer>
-
-      {/* --- Main Content --- */}
-      <main className="flex-1 p-6 overflow-y-auto">
-        <div className={contentContainerClass}>
-          {children}
-        </div>
-      </main>
-    </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/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/generated/hooks.ts

@@ -1,40 +0,0 @@
-import { useSignal } from '../hooks/useSignal';
-
-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
-  });
-
-  // 🟠 MOCK: Simulation Mode
-  const living_room_hum = useSignal('living_room_hum', {
-    initialValue: 45,
-    min: 40,
-    max: 60,
-    unit: '%'
-  });
-
-  const server_01 = useSignal('server_01', {
-    initialValue: 42,
-    min: 10,
-    max: 95,
-    unit: '%'
-  });
-
-  const front_door_lock = useSignal('front_door_lock', {
-    initialValue: 'LOCKED',
-    unit: ''
-  });
-
-  return {
-    living_room_ac,
-    living_room_hum,
-    server_01,
-    front_door_lock,
-  };
-};

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;
-}