@ramme-io/create-app 1.2.1 → 1.2.2

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

package/template/src/pages/DataGridPage.tsx

@@ -1,184 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import {
-  PageHeader, // <-- Add PageHeader back
-  DataTable,
-  Button,
-  Icon,
-  Drawer,
-  FormTemplate,
-  useToast,
-  Badge,
-  type ColDef,
-  type FormField,
-  type ICellRendererParams,
-} from '@ramme-io/ui';
-import { useCrudLocalStorage } from '../hooks/useCrudLocalStorage';
-import { mockUsers, type User } from '../data/mockUsers';
-
-// --- Custom Cell Renderers (No changes needed here) ---
-const ActionsRenderer: React.FC<ICellRendererParams & { onEdit: (data: User) => void; onDelete: (data: User) => void; }> = ({ data, onEdit, onDelete }) => (
-  <div className="flex items-center justify-center gap-2 h-full">
-    <Button size="sm" variant="outline" onClick={() => onEdit(data)} aria-label="Edit">
-      <Icon name="edit" className="h-4 w-4" />
-    </Button>
-    <Button size="sm" variant="danger" onClick={() => onDelete(data)} aria-label="Delete">
-      <Icon name="trash-2" className="h-4 w-4" />
-    </Button>
-  </div>
-);
-interface StatusRendererProps extends ICellRendererParams {
-  value: User['status'];
-}
-const StatusRenderer: React.FC<StatusRendererProps> = ({ value }) => {
-    const variantMap: Record<User['status'], 'success' | 'warning' | 'danger'> = {
-        Active: 'success',
-        Pending: 'warning',
-        Banned: 'danger',
-    };
-    const variant = variantMap[value] || 'secondary';
-    return <Badge variant={variant}>{value}</Badge>;
-};
-
-
-const DataGridPage: React.FC = () => {
-  const { addToast } = useToast();
-  const { data: users, createItem, updateItem, deleteItem } = useCrudLocalStorage<User>('users', mockUsers);
-
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
-  const [editingUser, setEditingUser] = useState<User | null>(null);
-
-  const handleOpenDrawer = (user: User | null = null) => {
-    setEditingUser(user);
-    setIsDrawerOpen(true);
-  };
-
-  // ... (handleDelete and handleFormSubmit functions remain the same)
-  const handleDelete = (user: User) => {
-    if (window.confirm(`Are you sure you want to delete ${user.name}?`)) {
-      deleteItem(user.id);
-      addToast('User deleted successfully', 'success');
-    }
-  };
-
-  const handleFormSubmit = (formData: Record<string, any>) => {
-    if (editingUser) {
-      updateItem({ ...editingUser, ...formData });
-      addToast('User updated successfully', 'success');
-    } else {
-      const newUser: Omit<User, 'id' | 'createdAt'> = {
-        ...formData,
-      } as Omit<User, 'id' | 'createdAt'>;
-      createItem({ ...newUser, createdAt: new Date().toISOString() });
-      addToast('User created successfully', 'success');
-    }
-    setIsDrawerOpen(false);
-    setEditingUser(null);
-  };
-
-  // ... (columnDefs and formFields definitions remain the same)
-    const columnDefs = useMemo<ColDef[]>(() => [
-    { field: 'id', headerName: 'ID', width: 80, sortable: true },
-    { field: 'name', headerName: 'Name', flex: 2, sortable: true, filter: 'agTextColumnFilter' },
-    { field: 'email', headerName: 'Email', flex: 3, sortable: true, filter: 'agTextColumnFilter' },
-    { field: 'role', headerName: 'Role', flex: 1, filter: 'agTextColumnFilter' },
-    { 
-        field: 'status', 
-        headerName: 'Status', 
-        flex: 1,
-        cellRenderer: StatusRenderer,
-        filter: 'agTextColumnFilter'
-    },
-    {
-      field: 'createdAt',
-      headerName: 'Created At',
-      flex: 2,
-      sortable: true,
-      filter: 'agDateColumnFilter',
-      filterParams: {
-        comparator: (filterLocalDateAtMidnight: Date, cellValue: string) => {
-          if (cellValue == null) return -1;
-          const cellDate = new Date(cellValue);
-          cellDate.setHours(0,0,0,0);
-          if (filterLocalDateAtMidnight.getTime() === cellDate.getTime()) return 0;
-          return cellDate < filterLocalDateAtMidnight ? -1 : 1;
-        },
-      },
-      valueFormatter: params => new Date(params.value).toLocaleDateString(),
-    },
-    {
-      headerName: 'Actions',
-      width: 120,
-      pinned: 'right',
-      cellRenderer: (props: ICellRendererParams) => (
-        <ActionsRenderer {...props} onEdit={handleOpenDrawer} onDelete={handleDelete} />
-      ),
-    },
-  ], [handleDelete]);
-
-  const formFields: FormField[] = useMemo(() => [
-    { name: 'name', label: 'Full Name', type: 'text', placeholder: 'Jane Doe', required: true, value: editingUser?.name },
-    { name: 'email', label: 'Email Address', type: 'email', placeholder: 'jane.doe@example.com', required: true, value: editingUser?.email },
-    { name: 'username', label: 'Username', type: 'text', placeholder: 'jane.doe', required: true, value: editingUser?.username },
-    { 
-        name: 'role', 
-        label: 'Role', 
-        type: 'select', 
-        options: [{value: 'Admin', label: 'Admin'}, {value: 'Editor', label: 'Editor'}, {value: 'Viewer', label: 'Viewer'}],
-        value: editingUser?.role 
-    },
-    { 
-        name: 'status', 
-        label: 'Status', 
-        type: 'select', 
-        options: [{value: 'Active', label: 'Active'}, {value: 'Pending', label: 'Pending'}, {value: 'Banned', label: 'Banned'}],
-        value: editingUser?.status 
-    },
-  ], [editingUser]);
-
-  return (
-    <div className="space-y-6">
-      <PageHeader
-        title="User Management"
-        description="A complete CRUD example with persisted data and an edit-in-drawer pattern."
-        actions={
-          <Button
-            variant="primary"
-            // FIX: Changed from iconBefore to iconLeft and passed the icon name string
-            iconLeft="plus"
-            onClick={() => handleOpenDrawer()}
-          >
-            Create User
-          </Button>
-        }
-      />
-      
-      <DataTable
-        rowData={users}
-        columnDefs={columnDefs}
-        height="calc(100vh - 280px)"
-        enableQuickSearch
-        rowSelection="multiple"
-        pagination
-        paginationPageSize={10}
-        // FIX: Add the page size selector to resolve the AG Grid warning
-        paginationPageSizeSelector={[10, 25, 50]}
-      />
-
-      <Drawer isOpen={isDrawerOpen} onClose={() => setIsDrawerOpen(false)} title={editingUser ? 'Edit User' : 'Create New User'} size="lg">
-        <div className="p-6">
-            <FormTemplate
-              fields={formFields}
-              onSubmit={handleFormSubmit}
-            >
-              <div className="flex justify-end gap-2 mt-8">
-                <Button variant="outline" onClick={() => setIsDrawerOpen(false)}>Cancel</Button>
-                <Button type="submit">{editingUser ? 'Update User' : 'Create User'}</Button>
-              </div>
-            </FormTemplate>
-        </div>
-      </Drawer>
-    </div>
-  );
-};
-
-export default DataGridPage;