@ramme-io/create-app 1.2.1 → 1.2.5

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;

package/template/src/pages/DynamicPage.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { PageHeader, Alert, Button, Icon } from '@ramme-io/ui';
-import { appManifest } from '../config/app.manifest';
-// Reuse the GhostOverlay for structure visualization
-import { GhostOverlay } from '../components/dev/GhostOverlay';
-// Import the Worker Bee
-import { DynamicBlock } from '../components/DynamicBlock';
-// Import the Hook to control the overlay
-import { useDevTools } from '../hooks/useDevTools';
-
-interface DynamicPageProps {
-  pageId: string;
-}
-
-export const DynamicPage: React.FC<DynamicPageProps> = ({ pageId }) => {
-  // 1. Initialize DevTools
-  const { isGhostMode, toggleGhostMode } = useDevTools();
-
-  // 2. Look up the page definition
-  const pageConfig = (appManifest as any).pages?.find((p: any) => p.id === pageId);
-
-  if (!pageConfig) {
-    return (
-      <div className="p-8">
-        <Alert variant="danger" title="Page Not Found">
-          The manifest does not contain a page with ID: <code>{pageId}</code>.
-        </Alert>
-      </div>
-    );
-  }
-
-  return (
-    <div className="space-y-8 fade-in p-6">
-      <PageHeader 
-        title={pageConfig.title} 
-        description={pageConfig.description}
-        actions={
-          <Button 
-            variant={isGhostMode ? 'accent' : 'outline'} 
-            size="sm"
-            onClick={toggleGhostMode}
-            title="Toggle Ghost Mode (Ctrl+Shift+G)"
-          >
-            <Icon name={isGhostMode ? 'eye' : 'eye-off'} className="mr-2" />
-            {isGhostMode ? 'Ghost Mode: ON' : 'Dev Tools'}
-          </Button>
-        }
-      />
-
-      {/* 4. Render Sections */}
-      {pageConfig.sections.map((section: any) => (
-        <div key={section.id} className="space-y-4">
-          {section.title && <h3 className="text-xl font-semibold">{section.title}</h3>}
-          
-          <div 
-            className="grid gap-6"
-            style={{ 
-              // ⚡️ IMPROVEMENT: Default to 1 column (Full Width) instead of 3.
-              // This fixes the "narrow table" issue immediately.
-              gridTemplateColumns: `repeat(${section.layout?.columns || 1}, minmax(0, 1fr))` 
-            }}
-          >
-            {section.blocks.map((block: any) => {
-              // ⚡️ IMPROVEMENT: Calculate Spanning
-              // Allows a block to stretch across multiple columns if needed.
-              const colSpan = block.layout?.colSpan || 1;
-              const rowSpan = block.layout?.rowSpan || 1;
-
-              return (
-                <div 
-                  key={block.id}
-                  style={{ 
-                    gridColumn: `span ${colSpan}`,
-                    gridRow: `span ${rowSpan}`
-                  }}
-                >
-                   <GhostOverlay 
-                     isActive={isGhostMode}
-                     componentId={block.id} 
-                     componentType={block.type}
-                     signalId={block.props.signalId}
-                   >
-                     <DynamicBlock block={block} />
-                   </GhostOverlay>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-};
-
-export default DynamicPage;

package/template/src/pages/LoginPage.tsx

@@ -1,58 +0,0 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from '../contexts/AuthContext';
-import { Button, Card, FormTemplate, Alert, Icon, type FormField } from '@ramme-io/ui';
-
-const LoginPage: React.FC = () => {
-  const navigate = useNavigate();
-  const { login } = useAuth();
-  const [error, setError] = useState<string | null>(null);
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleLogin = async (formData: Record<string, any>) => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const user = await login(formData.username, formData.password);
-      if (user) {
-        navigate('/dashboard');
-      } else {
-        setError('Invalid username or password.');
-      }
-    } catch (err) {
-      setError('An unexpected error occurred.');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const formFields: FormField[] = [
-    { name: 'username', label: 'Username', type: 'text', placeholder: 'e.g., jane' },
-    { name: 'password', label: 'Password', type: 'password', placeholder: 'e.g., password' },
-  ];
-
-  return (
-    <div className="flex min-h-screen items-center justify-center bg-background p-4">
-      <Card className="w-full max-w-md p-8">
-        <div className="text-center mb-8">
-          <Icon name="layout-template" size={48} className="text-primary mx-auto mb-4" />
-          <h1 className="text-3xl font-bold text-text">Welcome to Ramme</h1>
-          <p className="text-muted-foreground">Please sign in to continue</p>
-        </div>
-        
-        {error && <Alert variant="danger" title="Login Failed" className="mb-4">{error}</Alert>}
-        
-        <FormTemplate
-          fields={formFields}
-          onSubmit={handleLogin}
-        >
-          <Button type="submit" loading={isLoading} className="w-full">
-            Sign In
-          </Button>
-        </FormTemplate>
-      </Card>
-    </div>
-  );
-};
-
-export default LoginPage;

package/template/src/pages/settings/ProfilePage.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-// --- 1. Import the new generic page ---
-import GenericContentPage from '../GenericContentPage'; 
-
-const ProfilePage: React.FC = () => {
-  // --- 2. Use the generic page component ---
-  return <GenericContentPage pageTitle="Profile Settings" />;
-};
-
-export default ProfilePage;

package/template/src/pages/styleguide/Styleguide.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { Outlet, useLocation } from 'react-router-dom';
-import { PageWithSideNav } from '../../components/PageWithSideNav';
-import { useSitemap } from '../../contexts/SitemapContext';
-
-const Styleguide: React.FC = () => {
-  const location = useLocation();
-  const sitemap = useSitemap();
-  const isDocsTemplate = location.pathname.startsWith('/docs');
-
-  if (isDocsTemplate) {
-    // Find the 'styleguide' section from the sitemap to get its children
-    const styleguideSitemapSection = sitemap.find(item => item.id === 'styleguide');
-    
-    // Transform the sitemap children into the shape the nav component expects
-    const navItems = (styleguideSitemapSection?.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">
-            {styleguideSitemapSection?.title || 'Style Guide'}
-          </h2>
-        }
-        navItems={navItems}
-      >
-        <Outlet />
-      </PageWithSideNav>
-    );
-  }
-
-  // In the dashboard template, the main layout handles navigation.
-  return <Outlet />;
-};
-
-export default Styleguide;

package/template/src/templates/docs/pages/Introduction.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Card } from '@ramme-io/ui';
-
-const IntroductionPage: React.FC = () => {
-  return (
-    <Card className="p-4">
-      <h2 className="text-xl font-bold mb-2">Introduction</h2>
-      <p>This is the introduction page for the 'Docs' template.</p>
-    </Card>
-  );
-};
-
-export default IntroductionPage;

package/template/src/types/signal.ts

@@ -1,23 +0,0 @@
-// src/types/signal.ts
-/**
- * @file signal.d.ts
- * @description Defines the universal contract for "Live Data" in the Ramme ecosystem.
- *
- * A "Signal" is a single data point that changes over time.
- * unlike a "Record" (which is static database row), a Signal is ephemeral.
- */
-
-export type SignalStatus = 'fresh' | 'stale' | 'disconnected' | 'error';
-
-export interface Signal<T = any> {
-  max: number;
-  id: string;          // The unique ID (e.g., "temp_01")
-  value: T;            // The actual data (e.g., 24.5)
-  unit?: string;       // Optional unit (e.g., "°C")
-  timestamp: number;   // Unix timestamp of last update
-  status: SignalStatus;
-  meta?: Record<string, any>; // Extra metadata (e.g., limits)
-}
-
-// A simple map for looking up signals by ID
-export type SignalMap = Record<string, Signal>;