@ramme-io/create-app 1.1.9 → 1.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ramme-io/create-app",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "type": "module",
   "bin": {
     "create-ramme-app": "./index.js"
@@ -14,10 +14,11 @@
     "build": "cd template && tsc && vite build",
     "preview": "cd template && vite preview",
     "pack-tarball": "npm pack",
-    "bundle:ai": "repomix --ignore '**/*.lock,**/dist/**,**/template/dist/**,**/template/node_modules/**' --output 'ramme-starter-context.txt'"
+    "bundle:ai": "repomix --ignore '**/*.lock,**/dist/**,**/template/dist/**,**/template/node_modules/**' --output 'ramme-starter-context.txt'",
+    "zip:builder": "cd template && zip -r ../base.zip . -x \"node_modules/*\" \"dist/*\" \".DS_Store\" && mv ../base.zip ../../ramme-app-builder/public/base.zip && echo '✅ base.zip updated in Builder!'"
   },
   "dependencies": {
-    "@ramme-io/ui": "^1.1.3",
+    "@ramme-io/ui": "^1.1.5",
     "ag-grid-community": "^34.1.2",
     "ag-grid-enterprise": "^34.1.2",
     "ag-grid-react": "^34.1.2",

package/template/pkg.json

@@ -9,28 +9,31 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@ramme-io/ui": "^1.1.3",
+    "@ramme-io/ui": "^1.1.5",
     "mqtt": "^5.3.5",
     "zustand": "^4.5.0",
     "ag-grid-community": "^31.3.1",
-    "ag-grid-enterprise": "^31.3.1",  
-    "ag-grid-react": "^31.3.1",       
-    "framer-motion": "^12.23.12",
-    "fs-extra": "^11.3.1",
+    "ag-grid-enterprise": "^31.3.1",
+    "ag-grid-react": "^31.3.1",
+    "framer-motion": "^11.0.0",
+    "fs-extra": "^11.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-resizable-panels": "^3.0.4",
-    "react-router-dom": "6.30.1"
+    "react-router-dom": "^6.22.0",
+    "react-resizable-panels": "^2.0.9",
+    "ai": "^3.0.0",
+    "@ai-sdk/google": "^0.0.10",
+    "zod": "^3.22.0"
   },
   "devDependencies": {
-    "@types/node": "^20.14.2",
-    "@types/react": "^18.2.66",
-    "@types/react-dom": "^18.2.22",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@types/node": "^20.11.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.2.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.4",
-    "typescript": "^5.2.2",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.2.0",
     "vite": "^5.2.0"
   }
 }

package/template/src/App.tsx

@@ -1,42 +1,48 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
 import { generateRoutes } from './core/route-generator';
+import { useEffect } from 'react';
 
 // --- 1. IMPORT ALL THREE TEMPLATES ---
 import DashboardLayout from './templates/dashboard/DashboardLayout';
-import { dashboardSitemap as dashboardSitemap } from './templates/dashboard/dashboard.sitemap';
+import { dashboardSitemap } from './templates/dashboard/dashboard.sitemap';
 import DocsLayout from './templates/docs/DocsLayout';
-import { docsSitemap as docsSitemap } from './templates/docs/docs.sitemap';
-import SettingsLayout from './templates/settings/SettingsLayout'; // <-- NEW
-import { settingsSitemap as settingsSitemap } from './templates/settings/settings.sitemap'; // <-- NEW
+import { docsSitemap } from './templates/docs/docs.sitemap';
+import SettingsLayout from './templates/settings/SettingsLayout';
+import { settingsSitemap } from './templates/settings/settings.sitemap';
 
 // Other Imports
 import ProtectedRoute from './components/ProtectedRoute';
 import LoginPage from './pages/LoginPage';
 import NotFound from './pages/styleguide/NotFound';
 
+// --- 2. IMPORT THE SEEDER ---
+import { initializeDataLake } from './core/data-seeder';
+
 function App() {
+  
+  // ✅ 3. TRIGGER DATA SEEDING ON MOUNT
+  useEffect(() => {
+    initializeDataLake();
+  }, []);
+
   return (
     <Routes>
       <Route path="/login" element={<LoginPage />} />
       <Route element={<ProtectedRoute />}>
-        {/* Default redirect to the dashboard's root */}
-        <Route path="/" element={<Navigate to="/dashboard" replace />} />
+        {/* ✅ FIX: Redirect root to the new Welcome page */}
+        <Route path="/" element={<Navigate to="/dashboard/welcome" replace />} />
 
         {/* Dashboard Template Routes */}
         <Route path="/dashboard/*" element={<DashboardLayout />}>
-          {' '}
-          {/* <-- Added /* */}
           {generateRoutes(dashboardSitemap)}
         </Route>
 
         {/* Docs Template Routes */}
         <Route path="/docs/*" element={<DocsLayout />}>
-          {' '}
-          {/* <-- Added /* */}
           {generateRoutes(docsSitemap)}
         </Route>
 
-        {/* --- 2. ADD THE NEW SETTINGS LAYOUT ROUTE --- */}
+        {/* Settings Layout Route */}
         <Route path="/settings/*" element={<SettingsLayout />}>
           {generateRoutes(settingsSitemap)}
         </Route>

package/template/src/blocks/SmartTable.tsx

@@ -0,0 +1,224 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { 
+  DataTable, 
+  Button, 
+  Icon, 
+  Card, 
+  useToast, 
+  SearchInput,
+  type ColDef,
+  type GridApi 
+} from '@ramme-io/ui';
+import { getResourceMeta, getMockData } from '../data/mockData';
+import { AutoForm } from '../components/AutoForm';
+import { useCrudLocalStorage } from '../hooks/useCrudLocalStorage';
+
+interface SmartTableProps {
+  dataId: string;
+  title?: string;
+  initialFilter?: Record<string, any>; 
+}
+
+export const SmartTable: React.FC<SmartTableProps> = ({ 
+  dataId, 
+  title,
+  initialFilter
+}) => {
+  const { addToast } = useToast();
+  
+  // 1. DATA KERNEL
+  const meta = getResourceMeta(dataId);
+  const seedData = useMemo(() => getMockData(dataId) || [], [dataId]);
+  
+  // We use the CRUD hook to persist changes to localStorage
+  const { 
+    data: rowData, 
+    createItem, 
+    updateItem, 
+    deleteItem 
+  } = useCrudLocalStorage<any>(`ramme_db_${dataId}`, seedData);
+
+  // 2. UI STATE
+  const [isEditOpen, setIsEditOpen] = useState(false);
+  const [currentRecord, setCurrentRecord] = useState<any>(null);
+  const [gridApi, setGridApi] = useState<GridApi | null>(null);
+  const [selectedRows, setSelectedRows] = useState<any[]>([]);
+  const [quickFilterText, setQuickFilterText] = useState('');
+
+  // 3. COLUMN DEFINITIONS
+  const columns = useMemo<ColDef[]>(() => {
+    if (!meta?.fields) return [];
+
+    const generatedCols: ColDef[] = meta.fields.map((f: any) => {
+      const col: ColDef = {
+        field: f.key,
+        headerName: f.label,
+        filter: true,
+        sortable: true,
+        resizable: true,
+        flex: 1,
+      };
+
+      // Smart Formatting based on type
+      if (f.type === 'currency') {
+        col.valueFormatter = (p: any) => p.value ? `$${Number(p.value).toLocaleString()}` : '';
+      }
+      if (f.type === 'date') {
+        col.valueFormatter = (p: any) => p.value ? new Date(p.value).toLocaleDateString() : '';
+      }
+      if (f.type === 'status') {
+        col.cellRenderer = (p: any) => {
+          const statusColors: any = {
+            active: 'bg-green-100 text-green-800',
+            paid: 'bg-green-100 text-green-800',
+            pending: 'bg-yellow-100 text-yellow-800',
+            inactive: 'bg-slate-100 text-slate-600',
+            overdue: 'bg-red-100 text-red-800'
+          };
+          const colorClass = statusColors[String(p.value).toLowerCase()] || 'bg-slate-100 text-slate-800';
+          return (
+            <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${colorClass}`}>
+              {p.value}
+            </span>
+          );
+        };
+      }
+      return col;
+    });
+
+    // Add Checkbox Selection to the first column
+    if (generatedCols.length > 0) {
+      generatedCols[0].headerCheckboxSelection = true;
+      generatedCols[0].checkboxSelection = true;
+      generatedCols[0].minWidth = 180;
+    }
+
+    // Add Actions Column
+    generatedCols.push({
+      headerName: "Actions",
+      field: "id",
+      width: 100,
+      pinned: 'right',
+      cellRenderer: (params: any) => (
+        <div className="flex items-center gap-1">
+          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={(e) => { e.stopPropagation(); setCurrentRecord(params.data); setIsEditOpen(true); }}>
+            <Icon name="edit-2" size={14} className="text-slate-500" />
+          </Button>
+        </div>
+      )
+    });
+
+    return generatedCols;
+  }, [meta]);
+
+  // 4. HANDLERS
+  const onGridReady = useCallback((params: any) => {
+    setGridApi(params.api);
+  }, []);
+
+  const onSelectionChanged = useCallback(() => {
+    if (gridApi) {
+      setSelectedRows(gridApi.getSelectedRows());
+    }
+  }, [gridApi]);
+
+  const handleBulkDelete = () => {
+    if (confirm(`Delete ${selectedRows.length} items?`)) {
+      selectedRows.forEach(row => deleteItem(row.id));
+      setSelectedRows([]);
+      addToast(`${selectedRows.length} items deleted`, 'success');
+    }
+  };
+
+  const handleSave = (record: any) => {
+    if (record.id && currentRecord?.id) {
+      updateItem(record);
+      addToast('Item updated', 'success');
+    } else {
+      const { id, ...newItem } = record;
+      createItem(newItem);
+      addToast('Item created', 'success');
+    }
+    setIsEditOpen(false);
+  };
+
+  // --- RENDER ---
+  return (
+    <Card className="flex flex-col h-[600px] border border-border shadow-sm overflow-hidden bg-card">
+      
+      {/* HEADER TOOLBAR */}
+      <div className="p-4 border-b border-border flex justify-between items-center gap-4 bg-muted/5">
+        
+        {/* Left: Title or Bulk Actions */}
+        {selectedRows.length > 0 ? (
+          <div className="flex items-center gap-3 animate-in fade-in slide-in-from-left-2 duration-200">
+            <span className="bg-primary text-primary-foreground text-xs font-bold px-2 py-1 rounded-md">
+              {selectedRows.length} Selected
+            </span>
+            <Button size="sm" variant="danger" onClick={handleBulkDelete} iconLeft="trash-2">
+              Delete Selected
+            </Button>
+          </div>
+        ) : (
+          <div className="flex items-center gap-2">
+            <div className="p-2 bg-primary/10 rounded-md text-primary">
+              <Icon name="table" size={18} />
+            </div>
+            <div>
+              <h3 className="text-base font-bold text-foreground leading-tight">
+                {title || meta?.name || dataId}
+              </h3>
+              <p className="text-xs text-muted-foreground">
+                {rowData.length} records found
+              </p>
+            </div>
+          </div>
+        )}
+
+        {/* Right: Actions & Filter */}
+        <div className="flex items-center gap-2">
+          <div className="w-64">
+            <SearchInput 
+              placeholder="Quick search..." 
+              value={quickFilterText}
+              onChange={(e) => {
+                setQuickFilterText(e.target.value);
+                gridApi?.setQuickFilter(e.target.value);
+              }}
+            />
+          </div>
+          <div className="h-6 w-px bg-border mx-1" />
+          <Button size="sm" variant="primary" iconLeft="plus" onClick={() => { setCurrentRecord({}); setIsEditOpen(true); }}>
+            Add New
+          </Button>
+        </div>
+      </div>
+
+      {/* AG GRID */}
+      <div className="flex-1 w-full bg-card relative">
+        <DataTable 
+          rowData={rowData} 
+          columnDefs={columns} 
+          onGridReady={onGridReady}
+          onSelectionChanged={onSelectionChanged}
+          rowSelection="multiple"
+          pagination={true}
+          paginationPageSize={10}
+          headerHeight={48}
+          rowHeight={48}
+          enableCellTextSelection={true}
+        />
+      </div>
+
+      {/* EDIT DRAWER */}
+      <AutoForm
+        isOpen={isEditOpen}
+        onClose={() => setIsEditOpen(false)}
+        onSubmit={handleSave}
+        title={meta?.name || 'Item'}
+        fields={meta?.fields || []}
+        initialData={currentRecord}
+      />
+    </Card>
+  );
+};

package/template/src/components/AutoForm.tsx

@@ -0,0 +1,128 @@
+import React, { useMemo } from 'react';
+import { Drawer, FormTemplate, Button, type FormField } from '@ramme-io/ui';
+
+interface AutoFormProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSubmit: (data: any) => void;
+  title: string;
+  fields: any[]; // The raw metadata from app.manifest.ts
+  initialData?: any;
+}
+
+export const AutoForm: React.FC<AutoFormProps> = ({
+  isOpen,
+  onClose,
+  onSubmit,
+  title,
+  fields,
+  initialData
+}) => {
+  
+  // 1. Safe Data Handling
+  const safeData = initialData || {};
+  const isEditMode = !!safeData.id;
+
+  // 2. Schema-to-UI Mapping Engine
+  const formFields = useMemo<FormField[]>(() => {
+    return fields
+      // 🛑 RULE 1: Hide ID field during creation (System handles it)
+      .filter((f: any) => !(f.key === 'id' && !isEditMode))
+      .map((f: any) => {
+      
+      const isIdField = f.key === 'id';
+
+      // Base Configuration for all fields
+      const baseConfig = {
+        name: f.key,
+        label: f.label,
+        required: f.required,
+        placeholder: f.description || `Enter ${f.label.toLowerCase()}`,
+        // Pre-fill data if editing, or use default from schema
+        value: safeData[f.key] !== undefined ? safeData[f.key] : (f.defaultValue || ''),
+        colSpan: 1,
+        // 🛑 RULE 2: If it's the ID field, force it to be disabled (View Only)
+        disabled: isIdField
+      };
+
+      // Intelligent Type Switching
+      switch (f.type) {
+        case 'number':
+        case 'integer':
+        case 'currency':
+          return { 
+            ...baseConfig, 
+            type: 'number',
+            value: Number(baseConfig.value) || 0 
+          };
+
+        case 'boolean':
+          return { 
+            ...baseConfig, 
+            type: 'toggle', 
+            checked: !!baseConfig.value 
+          };
+
+        case 'date':
+          return { 
+            ...baseConfig, 
+            type: 'datepicker', 
+            value: baseConfig.value ? new Date(baseConfig.value) : null 
+          };
+
+        case 'status':
+          return { 
+            ...baseConfig, 
+            type: 'select', 
+            options: [
+              { value: 'Active', label: 'Active' },
+              { value: 'Pending', label: 'Pending' },
+              { value: 'Inactive', label: 'Inactive' },
+              { value: 'Archived', label: 'Archived' }
+            ]
+          };
+
+        case 'textarea':
+          return { 
+            ...baseConfig, 
+            type: 'textarea', 
+            colSpan: 2 
+          };
+
+        case 'email':
+          return { ...baseConfig, type: 'email' };
+
+        default:
+          return { ...baseConfig, type: 'text' };
+      }
+    });
+  }, [fields, safeData, isEditMode]);
+
+  return (
+    <Drawer
+      isOpen={isOpen}
+      onClose={onClose}
+      title={`${isEditMode ? 'Edit' : 'New'} ${title}`}
+      size="500px"
+    >
+      <div className="p-6">
+        <FormTemplate 
+          fields={formFields} 
+          onSubmit={(formData) => {
+            // Merge original ID to ensure we update the correct record
+            onSubmit({ ...safeData, ...formData }); 
+          }} 
+        >
+            <div className="flex justify-end gap-2 mt-8 pt-4 border-t border-border">
+                <Button variant="outline" onClick={onClose} type="button">
+                  Cancel
+                </Button>
+                <Button type="submit" variant="primary">
+                  {isEditMode ? 'Save Changes' : 'Create Record'}
+                </Button>
+            </div>
+        </FormTemplate>
+      </div>
+    </Drawer>
+  );
+};

package/template/src/components/DynamicBlock.tsx

@@ -1,52 +1,58 @@
 import React from 'react';
 import { getComponent } from '../core/component-registry';
-import { useSignal } from '../hooks/useSignal';
-import { getMockData } from '../data/mockData'; 
+// @ts-ignore
+import { useGeneratedSignals } from '../generated/hooks';
+import { getMockData } from '../data/mockData';
 
 const mapSignalStatus = (status: string): string => {
   switch (status) {
     case 'fresh': return 'online';
     case 'stale': return 'warning';
     case 'disconnected': return 'offline';
-    case 'error': return 'error';        
+    case 'error': return 'error';
     default: return 'offline';
   }
 };
 
-interface DynamicBlockProps {
-  block: {
-    id: string;
-    type: string;
-    props: Record<string, any>;
-  };
-}
-
-export const DynamicBlock: React.FC<DynamicBlockProps> = ({ block }) => {
+export const DynamicBlock: React.FC<any> = ({ block }) => {
   const Component = getComponent(block.type);
-  const { signalId, dataId, ...staticProps } = block.props;
-
-  // 1. Resolve Data
-  const resolvedData = dataId ? getMockData(dataId) : staticProps.data;
+  const signals = useGeneratedSignals();
 
-  // 2. Signal Wiring
-  const signalState = useSignal(signalId || '');
-
-  // 3. Merge Props
+  const { signalId, dataId, ...staticProps } = block.props;
+  
   const dynamicProps: Record<string, any> = { 
     ...staticProps,
-    // FIX: Pass data as BOTH 'data' (Charts) and 'rowData' (Tables)
-    data: resolvedData || [], 
-    rowData: resolvedData || [],
+    dataId,
+    signalId 
   };
 
-  // 4. Inject Signal Data
-  if (signalId && signalState) {
-    dynamicProps.value = `${signalState.value}${signalState.unit || ''}`;
-    if (signalState.status) {
-      dynamicProps.status = mapSignalStatus(signalState.status);
-      if (signalState.status === 'error') {
-        dynamicProps.variant = 'destructive';
-      }
+  // --- DATA INJECTION ---
+  if (dataId) {
+    const resolvedData = getMockData(dataId);
+    dynamicProps.data = resolvedData || [];
+    dynamicProps.rowData = resolvedData || [];
+  }
+
+  // --- SIGNAL INJECTION ---
+  if (signalId && signals && signalId in signals) {
+    // @ts-ignore
+    const signalState = signals[signalId];
+
+    if (signalState) {
+      // ✅ FIX: Handle both Raw Values (Legacy) and Signal Objects (New)
+      // If it's an object with a 'value' property, use that. Otherwise use it directly.
+      const rawValue = (typeof signalState === 'object' && 'value' in signalState) 
+        ? signalState.value 
+        : signalState;
+
+      const status = (typeof signalState === 'object' && 'status' in signalState)
+        ? signalState.status
+        : 'fresh'; // Default for raw values
+
+      dynamicProps.value = typeof rawValue === 'number' ? rawValue : String(rawValue);
+      dynamicProps.status = mapSignalStatus(status);
+    } else {
+      dynamicProps.status = mapSignalStatus('disconnected');
     }
   }