@ramme-io/create-app 1.2.1 → 1.2.5

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

@@ -0,0 +1,153 @@
+import React, { useState, useEffect } from 'react';
+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';
+
+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({
+    name: '',
+    email: '',
+    role: '',
+    bio: 'Product Designer based in San Francisco.'
+  });
+
+  // Load current user data into form
+  useEffect(() => {
+    if (user) {
+      setFormData({
+        name: user.name,
+        email: user.email,
+        role: user.role,
+        bio: 'Product Designer based in San Francisco.'
+      });
+    }
+  }, [user]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setSuccess(false);
+
+    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);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  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)}
+            </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>
+            <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>
+
+            <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
+                />
+                <p className="text-[0.8rem] text-muted-foreground">Bio editing is disabled in this demo.</p>
+              </div>
+            </div>
+
+            <div className="flex justify-end gap-4">
+              <Button type="submit" disabled={isLoading}>
+                {isLoading ? 'Saving...' : 'Save Changes'}
+              </Button>
+            </div>
+          </form>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default ProfilePage;

package/template/src/{pages/settings → features/settings/pages}/TeamPage.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 // --- 1. Import the new generic page ---
-import GenericContentPage from '../GenericContentPage'; 
+import GenericContentPage from '../../GenericContentPage'; 
 
 // A simple page component for settings
 const TeamPage: React.FC = () => {

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

@@ -0,0 +1,75 @@
+import React, { useMemo } from 'react';
+import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Sidebar, type SidebarItem, type IconName, Icon } from '@ramme-io/ui';
+import { useSitemap } from '../../engine/runtime/SitemapContext';
+
+const Styleguide: React.FC = () => {
+  const location = useLocation();
+  const navigate = useNavigate();
+  const sitemap = useSitemap();
+
+  // 1. Get Styleguide Section Data
+  const styleguideSection = useMemo(() => {
+    return sitemap.find(item => item.id === 'styleguide');
+  }, [sitemap]);
+
+  // 2. Transform to Sidebar Items
+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',
+    }));
+  }, [styleguideSection]);
+
+  // 3. Determine Active Item
+  const activeItemId = useMemo(() => {
+    const active = navItems.find(item => 
+      location.pathname === item.href || 
+      (item.href && location.pathname.startsWith(item.href))
+    );
+    return active?.id;
+  }, [location.pathname, navItems]);
+
+  if (!location.pathname.startsWith('/docs') || !styleguideSection) {
+    return <Outlet />;
+  }
+
+  return (
+    <div className="flex w-full min-h-[calc(100vh-7rem)]">
+      {/* SIDEBAR */}
+      <div className="sticky top-[7rem] h-[calc(100vh-7rem)] z-20">
+        <Sidebar
+          className="h-full border-r border-border bg-card/50 backdrop-blur-sm"
+          items={navItems}
+          activeItemId={activeItemId}
+          onNavigate={(item) => {
+            if (item.href) navigate(item.href);
+          }}
+          logo={
+            <div className="flex items-center gap-2 px-1 py-2 text-muted-foreground">
+              <Icon name="book-open" className="h-4 w-4" />
+              <span className="font-semibold text-xs uppercase tracking-wider">Reference</span>
+            </div>
+          }
+        />
+      </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 />
+        </div>
+      </main>
+    </div>
+  );
+};
+
+export default Styleguide;

package/template/src/features/users/components/UserDrawer.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect, useState } from 'react';
+import { Drawer, Button, Input, Select, type SelectOption } from '@ramme-io/ui';
+import type { User } from '../../../data/mockData';
+
+interface UserDrawerProps {
+  isOpen: boolean;
+  onClose: () => void;
+  user: User | null;
+  onSave: (id: string, data: Partial<User>) => void;
+}
+
+const UserDrawer: React.FC<UserDrawerProps> = ({ isOpen, onClose, user, onSave }) => {
+  const [formData, setFormData] = useState<Partial<User>>({
+    name: '',
+    email: '',
+    role: 'viewer',
+    status: 'active',
+  });
+
+  useEffect(() => {
+    if (user) {
+      setFormData(user);
+    } else {
+      setFormData({
+        name: '',
+        email: '',
+        role: 'viewer',
+        status: 'active',
+      });
+    }
+  }, [user, isOpen]);
+
+  // Options Configurations
+  const roleOptions: SelectOption[] = [
+    { value: 'admin', label: 'Admin' },
+    { value: 'editor', label: 'Editor' },
+    { value: 'viewer', label: 'Viewer' },
+  ];
+
+  const statusOptions: SelectOption[] = [
+    { value: 'active', label: 'Active' },
+    { value: 'pending', label: 'Pending' },
+    { value: 'banned', label: 'Banned' },
+  ];
+
+  // ✅ HELPER: Find the full object based on the string value
+  // This satisfies the TypeScript requirement: value={SelectOption}
+  const getOption = (options: SelectOption[], value: string | undefined) => {
+    return options.find((opt) => opt.value === value) || null;
+  };
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value });
+  };
+
+  // ✅ HELPER: Handle change for both Native Events and Custom Selects
+  const handleSelectChange = (name: keyof User, newValue: any) => {
+    // If the component returns a SelectOption object (Custom Select)
+    if (newValue && typeof newValue === 'object' && 'value' in newValue) {
+        setFormData({ ...formData, [name]: newValue.value });
+    } 
+    // If the component returns a standard Event (Native Select)
+    else if (newValue?.target) {
+        setFormData({ ...formData, [name]: newValue.target.value });
+    }
+    // Fallback
+    else {
+        setFormData({ ...formData, [name]: newValue });
+    }
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    const idToSave = user?.id || '';
+    onSave(idToSave, formData);
+  };
+
+  return (
+    <Drawer
+      isOpen={isOpen}
+      onClose={onClose}
+      title={user ? 'Edit User' : 'Add New User'}
+      size="md"
+    >
+      <form onSubmit={handleSubmit} className="flex flex-col h-full">
+        <div className="flex-1 space-y-6 p-1">
+          <Input
+            label="Full Name"
+            name="name"
+            placeholder="Jane Doe"
+            value={formData.name || ''}
+            onChange={handleChange}
+            required
+          />
+
+          <Input
+            label="Email Address"
+            name="email"
+            type="email"
+            placeholder="jane@example.com"
+            value={formData.email || ''}
+            onChange={handleChange}
+            required
+          />
+
+          <Select
+            label="Role"
+            options={roleOptions}
+            // ✅ FIX: Pass the object, not the string
+            value={getOption(roleOptions, formData.role)}
+            // ✅ FIX: Handle the update safely
+            onChange={(val) => handleSelectChange('role', val)}
+          />
+
+          <Select
+            label="Status"
+            options={statusOptions}
+            // ✅ FIX: Pass the object, not the string
+            value={getOption(statusOptions, formData.status)}
+            // ✅ FIX: Handle the update safely
+            onChange={(val) => handleSelectChange('status', val)}
+          />
+        </div>
+
+        <div className="flex justify-end gap-3 mt-8 pt-4 border-t border-border">
+          <Button variant="ghost" onClick={onClose} type="button">
+            Cancel
+          </Button>
+          <Button variant="primary" type="submit">
+            {user ? 'Save Changes' : 'Create User'}
+          </Button>
+        </div>
+      </form>
+    </Drawer>
+  );
+};
+
+export default UserDrawer;

package/template/src/features/users/index.ts

@@ -0,0 +1,2 @@
+// ✅ Export Page for Routing
+export { default as UsersPage } from './pages/UsersPage';

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

@@ -0,0 +1,151 @@
+import React, { useState, useMemo } from 'react';
+import {
+  PageHeader,
+  DataTable,
+  Button,
+  useToast,
+  Badge,
+  Input,
+  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';
+
+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, 
+    updateItem, 
+    deleteItem 
+  } = useCrudLocalStorage<User>('ramme_db_users', SEED_USERS);
+
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+  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);
+  };
+
+  const handleDelete = (user: User) => {
+    if (confirm(`Delete ${user.name}?`)) {
+      deleteItem(user.id);
+      addToast('User deleted', 'success');
+    }
+  };
+
+  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
+          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');
+    }
+  };
+
+  const columnDefs = useMemo<ColDef[]>(() => [
+    { field: 'name', headerName: 'Name', flex: 1, filter: true },
+    { field: 'email', headerName: 'Email', flex: 1, filter: true },
+    { 
+      field: 'role', 
+      headerName: 'Role', 
+      width: 120,
+      cellRenderer: (params: any) => (
+        <Badge variant={params.value === 'admin' ? 'primary' : 'secondary'}>
+          {params.value}
+        </Badge>
+      )
+    },
+    { 
+      field: 'status', 
+      width: 120,
+      cellRenderer: (params: any) => (
+        <Badge variant={params.value === 'active' ? 'success' : 'danger'}>
+          {params.value}
+        </Badge>
+      )
+    },
+    {
+      headerName: 'Actions',
+      width: 120,
+      pinned: 'right',
+      cellRenderer: (params: ICellRendererParams) => (
+        <div className="flex gap-2">
+          <Button size="sm" variant="ghost" iconLeft="edit" onClick={() => handleOpenDrawer(params.data)} />
+          <Button size="sm" variant="ghost" className="text-red-500 hover:text-red-600" iconLeft="trash-2" onClick={() => handleDelete(params.data)} />
+        </div>
+      ),
+    },
+  ], [deleteItem]); // Added dependency
+
+  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]}
+      />
+
+      <UserDrawer 
+        isOpen={isDrawerOpen} 
+        onClose={() => setIsDrawerOpen(false)} 
+        user={editingUser}
+        onSave={handleSave}
+      />
+    </div>
+  );
+};
+
+export default UsersPage;