@ramme-io/create-app 1.2.8 → 1.2.10

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

@@ -3,26 +3,20 @@ import {
   Button, 
   Input, 
   Card, 
-  SectionHeader, 
   Icon, 
   Alert 
 } from '@ramme-io/ui';
 import { useAuth } from '../../auth/AuthContext';
-
-// 1. REMOVE Zombie Service
-// import { userService } from '../../users/api/user.service';
-
-// 2. ADD Engine Hooks & Data
 import { useCrudLocalStorage } from '../../../engine/runtime/useCrudLocalStorage';
 import { SEED_USERS, type User } from '../../../data/mockData';
+// ✅ Import Core Layout
+import { StandardPageLayout } from '../../../components/layout/StandardPageLayout';
 
 const ProfilePage: React.FC = () => {
   const { user } = useAuth(); 
   const [isLoading, setIsLoading] = useState(false);
   const [success, setSuccess] = useState(false);
   
-  // 3. CONNECT to Data Lake
-  // We only need 'updateItem' here to modify the existing profile
   const { updateItem } = useCrudLocalStorage<User>('ramme_db_users', SEED_USERS);
 
   const [formData, setFormData] = useState({
@@ -32,7 +26,6 @@ const ProfilePage: React.FC = () => {
     bio: 'Product Designer based in San Francisco.'
   });
 
-  // Load current user data into form
   useEffect(() => {
     if (user) {
       setFormData({
@@ -55,14 +48,8 @@ const ProfilePage: React.FC = () => {
 
     try {
       if (user?.id) {
-        // 4. USE ENGINE to update the record in the Data Lake
-        // We merge the existing user object with the new form data
         updateItem({ ...user, ...formData } as User);
-
-        // 5. REFRESH SESSION (Local hack to update UI header immediately)
-        // In a real app, AuthContext would listen to storage changes, but this is fine for a prototype.
         localStorage.setItem('ramme_session', JSON.stringify({ ...user, ...formData }));
-        
         setSuccess(true);
         setTimeout(() => setSuccess(false), 3000);
       }
@@ -74,79 +61,82 @@ const ProfilePage: React.FC = () => {
   };
 
   return (
-    <div className="max-w-4xl space-y-6">
-      <SectionHeader title="My Profile"  />
-
-      {success && (
-        <Alert variant="info" title="Changes Saved">
-          Your profile has been updated successfully.
-        </Alert>
-      )}
-
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        {/* Left Column - Avatar Card */}
-        <Card className="p-6 flex flex-col items-center text-center space-y-4 h-fit">
-          <div className="relative group cursor-pointer">
-            <div className="h-24 w-24 rounded-full bg-primary/10 flex items-center justify-center text-2xl font-bold text-primary border-4 border-background shadow-sm">
-              {formData.name.charAt(0)}
+    <StandardPageLayout 
+      title="My Profile" 
+      description="Manage your personal information and account settings."
+    >
+      <div className="max-w-4xl space-y-6">
+        {success && (
+          <Alert variant="info" title="Changes Saved">
+            Your profile has been updated successfully.
+          </Alert>
+        )}
+
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          {/* Left Column - Avatar Card */}
+          <Card className="p-6 flex flex-col items-center text-center space-y-4 h-fit">
+            <div className="relative group cursor-pointer">
+              <div className="h-24 w-24 rounded-full bg-primary/10 flex items-center justify-center text-2xl font-bold text-primary border-4 border-background shadow-sm">
+                {formData.name.charAt(0)}
+              </div>
+              <div className="absolute inset-0 bg-black/50 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
+                 <Icon name="camera" className="text-white" />
+              </div>
             </div>
-            <div className="absolute inset-0 bg-black/50 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
-               <Icon name="camera" className="text-white" />
+            <div>
+              <h3 className="font-semibold text-lg">{formData.name}</h3>
+              <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 uppercase">
+                {formData.role}
+              </span>
             </div>
-          </div>
-          <div>
-            <h3 className="font-semibold text-lg">{formData.name}</h3>
-            <span className="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 uppercase">
-              {formData.role}
-            </span>
-          </div>
-          <div className="w-full pt-4 border-t">
-            <p className="text-xs text-muted-foreground mb-4">Joined December 2024</p>
-            <Button variant="outline" className="w-full" size="sm">Change Avatar</Button>
-          </div>
-        </Card>
-
-        {/* Right Column - Form */}
-        <Card className="md:col-span-2 p-6">
-          <form onSubmit={handleSave} className="space-y-4">
-            <div className="grid gap-2">
-              <h3 className="font-semibold text-lg">Personal Information</h3>
-              <p className="text-sm text-muted-foreground">Update your personal details here.</p>
+            <div className="w-full pt-4 border-t">
+              <p className="text-xs text-muted-foreground mb-4">Joined December 2024</p>
+              <Button variant="outline" className="w-full" size="sm">Change Avatar</Button>
             </div>
+          </Card>
+
+          {/* Right Column - Form */}
+          <Card className="md:col-span-2 p-6">
+            <form onSubmit={handleSave} className="space-y-4">
+              <div className="grid gap-2">
+                <h3 className="font-semibold text-lg">Personal Information</h3>
+                <p className="text-sm text-muted-foreground">Update your personal details here.</p>
+              </div>
 
-            <div className="grid gap-4 py-4">
-              <Input 
-                label="Full Name" 
-                name="name" 
-                value={formData.name} 
-                onChange={handleChange} 
-              />
-              <Input 
-                label="Email Address" 
-                name="email" 
-                value={formData.email} 
-                onChange={handleChange} 
-              />
-              <div className="space-y-2">
-                <label className="text-sm font-medium leading-none">Bio</label>
-                <textarea 
-                  className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
-                  value={formData.bio}
-                  disabled
+              <div className="grid gap-4 py-4">
+                <Input 
+                  label="Full Name" 
+                  name="name" 
+                  value={formData.name} 
+                  onChange={handleChange} 
+                />
+                <Input 
+                  label="Email Address" 
+                  name="email" 
+                  value={formData.email} 
+                  onChange={handleChange} 
                 />
-                <p className="text-[0.8rem] text-muted-foreground">Bio editing is disabled in this demo.</p>
+                <div className="space-y-2">
+                  <label className="text-sm font-medium leading-none">Bio</label>
+                  <textarea 
+                    className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    value={formData.bio}
+                    disabled
+                  />
+                  <p className="text-[0.8rem] text-muted-foreground">Bio editing is disabled in this demo.</p>
+                </div>
               </div>
-            </div>
 
-            <div className="flex justify-end gap-4">
-              <Button type="submit" disabled={isLoading}>
-                {isLoading ? 'Saving...' : 'Save Changes'}
-              </Button>
-            </div>
-          </form>
-        </Card>
+              <div className="flex justify-end gap-4">
+                <Button type="submit" disabled={isLoading}>
+                  {isLoading ? 'Saving...' : 'Save Changes'}
+                </Button>
+              </div>
+            </form>
+          </Card>
+        </div>
       </div>
-    </div>
+    </StandardPageLayout>
   );
 };
 

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

@@ -14,15 +14,12 @@ const Styleguide: React.FC = () => {
   }, [sitemap]);
 
   // 2. Transform to Sidebar Items
-const navItems = useMemo<SidebarItem[]>(() => {
+  const navItems = useMemo<SidebarItem[]>(() => {
     if (!styleguideSection?.children) return [];
 
-    // ✅ FIX: Remove the explicit ": { ... }" type. Let TS infer 'child' automatically.
     return styleguideSection.children.map((child) => ({
       id: child.id,
       label: child.title,
-      // We cast to IconName because we know the string is a valid icon, 
-      // and we provide a fallback 'hash' if it's undefined.
       icon: (child.icon as IconName) || 'hash', 
       href: child.path ? `/docs/styleguide/${child.path}` : '/docs/styleguide',
     }));
@@ -44,8 +41,10 @@ const navItems = useMemo<SidebarItem[]>(() => {
   return (
     <div className="flex w-full min-h-[calc(100vh-7rem)]">
       {/* SIDEBAR */}
-      <div className="sticky top-[7rem] h-[calc(100vh-7rem)] z-20">
+      <div className="sticky top-[7rem] h-[calc(100vh-7rem)] z-20 hidden md:block">
         <Sidebar
+          // ✅ FIX 1: Removed 'w-64'. Let the Sidebar component manage its own width.
+          // ✅ FIX 2: Added 'h-full' so it fills the sticky container perfectly.
           className="h-full border-r border-border bg-card/50 backdrop-blur-sm"
           items={navItems}
           activeItemId={activeItemId}
@@ -62,10 +61,10 @@ const navItems = useMemo<SidebarItem[]>(() => {
       </div>
 
       {/* MAIN CONTENT */}
-      <main className="flex-1 min-w-0 bg-background overflow-x-hidden">
-        {/* ADDED: Max width constraint + centering */}
-        <div className="container max-w-7xl mx-auto p-6 md:p-10 animate-in fade-in duration-500">
-          <Outlet />
+      {/* ✅ FIX 3: Re-added padding (p-6) so content doesn't hit the edges. */}
+      <main className="flex-1 min-w-0 bg-background overflow-x-hidden p-6 md:p-10">
+        <div className="max-w-7xl mx-auto">
+           <Outlet />
         </div>
       </main>
     </div>

package/template/src/features/users/pages/UsersPage.tsx

@@ -1,6 +1,5 @@
 import React, { useState, useMemo } from 'react';
 import {
-  PageHeader,
   DataTable,
   Button,
   useToast,
@@ -9,22 +8,15 @@ import {
   type ColDef,
   type ICellRendererParams,
 } from '@ramme-io/ui';
-
-// 1. REMOVE: userService and old User types
-// import { userService } from '../api/user.service';
-// import type { User } from '../api/user.types';
-
-// 2. ADD: The Engine Hook & Shared Data
 import { useCrudLocalStorage } from '../../../engine/runtime/useCrudLocalStorage';
 import { SEED_USERS, type User } from '../../../data/mockData';
-
 import UserDrawer from '../components/UserDrawer';
+// ✅ Import Core Layout
+import { StandardPageLayout } from '../../../components/layout/StandardPageLayout';
 
 const UsersPage: React.FC = () => {
   const { addToast } = useToast();
   
-  // 3. REPLACE: Manual state fetching with the Reactive Engine
-  // This automatically loads 'ramme_db_users' and keeps it in sync.
   const { 
     data: users, 
     createItem, 
@@ -36,8 +28,6 @@ const UsersPage: React.FC = () => {
   const [editingUser, setEditingUser] = useState<User | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
 
-  // (Removed refreshData & useEffect - the hook handles this automatically)
-
   const handleOpenDrawer = (user: User | null = null) => {
     setEditingUser(user);
     setIsDrawerOpen(true);
@@ -53,20 +43,17 @@ const UsersPage: React.FC = () => {
   const handleSave = (_id: string, data: Partial<User>) => {
     try {
       if (editingUser) {
-        // Update existing user
         updateItem({ ...editingUser, ...data } as User);
         addToast('User updated', 'success');
       } else {
-        // Create new user (Engine handles ID generation)
         createItem({
           ...data,
-          role: data.role || 'viewer', // Ensure defaults
+          role: data.role || 'viewer',
           status: data.status || 'active',
           joinedAt: new Date().toISOString()
         } as User);
         addToast('User created', 'success');
       }
-      // Close drawer
       setIsDrawerOpen(false);
     } catch (error) {
       addToast('Error saving user', 'error');
@@ -106,45 +93,47 @@ const UsersPage: React.FC = () => {
         </div>
       ),
     },
-  ], [deleteItem]); // Added dependency
+  ], [deleteItem]);
 
   return (
-    <div className="space-y-6 h-[calc(100vh-140px)] flex flex-col">
-      <PageHeader
-        title="User Management"
-        description="Manage system access and permissions."
-        actions={
-          <Button variant="primary" iconLeft="plus" onClick={() => handleOpenDrawer()}>
-            Add User
-          </Button>
-        }
-      />
-      
-      <div className="w-full max-w-sm">
-         <Input 
-            placeholder="Search users..." 
-            value={searchTerm}
-            onChange={(e) => setSearchTerm(e.target.value)}
-         />
-      </div>
-      
-      <DataTable
-        rowData={users}
-        columnDefs={columnDefs}
-        height="100%"
-        quickFilterText={searchTerm} 
-        pagination
-        paginationPageSize={10}
-        paginationPageSizeSelector={[10, 25, 50]}
-      />
+    <StandardPageLayout
+      title="User Management"
+      description="Manage system access and permissions."
+      actions={
+        <Button variant="primary" iconLeft="plus" onClick={() => handleOpenDrawer()}>
+          Add User
+        </Button>
+      }
+    >
+      <div className="space-y-6 h-full flex flex-col">
+        <div className="w-full max-w-sm">
+           <Input 
+              placeholder="Search users..." 
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+           />
+        </div>
+        
+        <div className="flex-1 min-h-[500px]">
+          <DataTable
+            rowData={users}
+            columnDefs={columnDefs}
+            height="100%"
+            quickFilterText={searchTerm} 
+            pagination
+            paginationPageSize={10}
+            paginationPageSizeSelector={[10, 25, 50]}
+          />
+        </div>
 
-      <UserDrawer 
-        isOpen={isDrawerOpen} 
-        onClose={() => setIsDrawerOpen(false)} 
-        user={editingUser}
-        onSave={handleSave}
-      />
-    </div>
+        <UserDrawer 
+          isOpen={isDrawerOpen} 
+          onClose={() => setIsDrawerOpen(false)} 
+          user={editingUser}
+          onSave={handleSave}
+        />
+      </div>
+    </StandardPageLayout>
   );
 };
 

package/template/src/templates/dashboard/DashboardLayout.tsx

@@ -13,8 +13,6 @@ import PageTitleUpdater from '../../components/PageTitleUpdater';
 import AppHeader from '../../components/AppHeader';
 import { AIChatWidget } from '../../components/AIChatWidget';
 import { useWorkflowEngine } from '../../engine/runtime/useWorkflowEngine';
-
-// ✅ 1. IMPORT THE HOOK
 import { useDynamicSitemap } from '../../engine/runtime/useDynamicSitemap';
 
 const DashboardLayout: React.FC = () => {
@@ -24,22 +22,19 @@ const DashboardLayout: React.FC = () => {
   
   useWorkflowEngine();
 
-  // ✅ 2. GET LIVE DATA (Merges Static + Builder Data)
+  // 2. GET LIVE DATA (Merges Static + Builder Data)
   const liveSitemap = useDynamicSitemap(dashboardSitemap);
 
-  // ✅ 3. BUILD SIDEBAR FROM LIVE DATA
+  // 3. BUILD SIDEBAR FROM LIVE DATA
   const sidebarItems: SidebarItem[] = useMemo(() => {
-    // We map over 'liveSitemap' instead of 'dashboardSitemap'
     return liveSitemap.map((route) => ({
       id: route.id,
       label: route.title,
       icon: route.icon as IconName, 
-      // Handle the path logic safely
       href: route.path.startsWith('/') ? route.path : `/dashboard/${route.path}`,
     }));
-  }, [liveSitemap]); // Re-run whenever the Builder sends an update
+  }, [liveSitemap]);
 
-  // 4. Determine Active Item
   const activeItemId = useMemo(() => {
     const active = sidebarItems.find(item => 
       item.href !== '/dashboard' && location.pathname.startsWith(item.href!)
@@ -48,7 +43,6 @@ const DashboardLayout: React.FC = () => {
   }, [location.pathname, sidebarItems]);
 
   return (
-    // ✅ 5. PASS LIVE SITEMAP TO CONTEXT (For Breadcrumbs/Titles)
     <SitemapProvider value={liveSitemap}>
       <PageTitleUpdater />
       
@@ -56,7 +50,7 @@ const DashboardLayout: React.FC = () => {
         
         <Sidebar
           className="relative border-border"
-          items={sidebarItems} // Now contains your new page!
+          items={sidebarItems}
           activeItemId={activeItemId}
           onNavigate={(item) => {
             if (item.href) navigate(item.href);
@@ -75,7 +69,10 @@ const DashboardLayout: React.FC = () => {
 
         <div className="flex flex-col flex-1 overflow-hidden">
           <AppHeader />
-          <main className="flex-1 overflow-y-auto p-8 bg-muted/20">
+          {/* ✅ FIX: Removed 'p-8'. Changed to 'p-0' (implied) or just removed class.
+              We keep 'bg-muted/20' for the app background. 
+              The StandardPageLayout inside Outlet now controls the margins. */}
+          <main className="flex-1 overflow-y-auto bg-muted/20">
             <Outlet />
           </main>
         </div>

package/template/DESIGNER_GUIDE.md

@@ -1,43 +0,0 @@
-## 🚀 Quick Start for Designers
-
-You don't need to be a coding wizard to use this. Just follow these 3 steps:
-
-### 1. Setup (Do this once)
-You need **Node.js** installed on your computer.
-- Open your terminal (Command Prompt or Terminal app).
-- Type `node -v` to see if you have it. If not, download it from [nodejs.org](https://nodejs.org).
-
-### 2. Create your Project
-Run this magic command in your terminal:
-
-```bash
-npm create @ramme-io/app@latest
-```
-
-It will ask you for a project name (e.g., my-smart-home). Type it and hit Enter.
-
----
-
-## Run it!
-
-You will be prompted to name your project.
-
-**1. Enter the project directory**
-```bash
-cd my-new-project
-```
-
-**2. Install dependencies**
-```bash
-pnpm install
-# or npm install
-```
-
-**3. Start the dev server**
-```bash
-pnpm run dev
-```
-
-Your prototype is now running locally at `http://localhost:5173`.
-
----