@ramme-io/create-app 1.2.0 → 1.2.2

package/template/src/features/onboarding/pages/Welcome.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  Card, 
+  Button, 
+  Icon, 
+  Badge,
+  SectionHeader 
+} from '@ramme-io/ui';
+
+const Welcome: React.FC = () => {
+  const navigate = useNavigate();
+
+  return (
+    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
+      
+      {/* HERO */}
+      <div className="relative overflow-hidden rounded-xl bg-gradient-to-r from-primary to-violet-600 text-primary-foreground p-8 md:p-12">
+        <div className="relative z-10 max-w-2xl">
+          <Badge variant="secondary" className="mb-4 bg-white/20 text-white border-none backdrop-blur-sm">
+            v1.2.0 Starter Kit
+          </Badge>
+          <h1 className="text-4xl md:text-5xl font-extrabold mb-4 tracking-tight">
+            Your Ramme App is Ready.
+          </h1>
+          <p className="text-lg md:text-xl text-primary-foreground/90 mb-8 leading-relaxed">
+            You have successfully scaffolded a production-ready prototype environment. 
+            This kit comes pre-wired with Authentication, Mock Data, and the A.D.A.P.T. architecture.
+          </p>
+          <div className="flex flex-wrap gap-4">
+            <Button 
+              size="lg" 
+              variant="secondary" 
+              className="font-semibold"
+              iconLeft="layout-dashboard"
+              onClick={() => navigate('/dashboard/app')}
+            >
+              Open Live Dashboard
+            </Button>
+            <Button 
+              size="lg" 
+              variant="outline" 
+              className="bg-transparent border-white/30 text-white hover:bg-white/10 hover:text-white"
+              iconLeft="book-open"
+              onClick={() => navigate('/docs')}
+            >
+              Read Documentation
+            </Button>
+          </div>
+        </div>
+        
+        {/* Decorative Background Icon */}
+        <div className="absolute -right-10 -bottom-10 opacity-10 rotate-12">
+          <Icon name="box" size={300} />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        
+        {/* SECTION 1: ARCHITECTURE */}
+        <div className="space-y-4">
+          <SectionHeader title="Project Architecture" />
+          <div className="grid gap-4">
+            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
+              <div className="p-3 rounded-lg bg-blue-100 text-blue-600 dark:bg-blue-900/30 dark:text-blue-400 h-fit">
+                <Icon name="database" size={24} />
+              </div>
+              <div>
+                <h3 className="font-semibold text-foreground">Data Lake</h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Mock data is seeded into <code>localStorage</code> on boot. 
+                  Edit <code>src/data/mockData.ts</code> to change the schema.
+                </p>
+              </div>
+            </Card>
+
+            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
+              <div className="p-3 rounded-lg bg-purple-100 text-purple-600 dark:bg-purple-900/30 dark:text-purple-400 h-fit">
+                <Icon name="git-branch" size={24} />
+              </div>
+              <div>
+                <h3 className="font-semibold text-foreground">Logic Engine</h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Workflows and signals are processed in real-time by 
+                  <code>useWorkflowEngine.ts</code>. Supports MQTT and simulated sensors.
+                </p>
+              </div>
+            </Card>
+
+            <Card className="p-4 flex gap-4 hover:border-primary/50 transition-colors cursor-default">
+              <div className="p-3 rounded-lg bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400 h-fit">
+                <Icon name="layout" size={24} />
+              </div>
+              <div>
+                <h3 className="font-semibold text-foreground">Dynamic Routing</h3>
+                <p className="text-sm text-muted-foreground mt-1">
+                  Pages are generated from <code>app.manifest.ts</code>. 
+                  Visual blocks connect automatically to data sources.
+                </p>
+              </div>
+            </Card>
+          </div>
+        </div>
+
+        {/* SECTION 2: RESOURCES */}
+        <div className="space-y-4">
+          <SectionHeader title="Developer Resources" />
+          
+          <Card className="p-6 space-y-6">
+            <div>
+              <h4 className="font-semibold flex items-center gap-2 mb-2">
+                <Icon name="palette" size={16} className="text-muted-foreground" />
+                Component Library
+              </h4>
+              <p className="text-sm text-muted-foreground mb-3">
+                Browse the full suite of accessible UI components available in this project.
+              </p>
+              <Button variant="outline" size="sm" onClick={() => navigate('/styleguide')}>
+                View Style Guide
+              </Button>
+            </div>
+
+            <div className="border-t border-border pt-6">
+              <h4 className="font-semibold flex items-center gap-2 mb-2">
+                <Icon name="settings" size={16} className="text-muted-foreground" />
+                Configuration
+              </h4>
+              <p className="text-sm text-muted-foreground mb-3">
+                Manage global settings, user profile templates, and billing layouts.
+              </p>
+              <Button variant="outline" size="sm" onClick={() => navigate('/settings')}>
+                Open Settings
+              </Button>
+            </div>
+
+            <div className="border-t border-border pt-6">
+              <h4 className="font-semibold flex items-center gap-2 mb-2">
+                <Icon name="github" size={16} className="text-muted-foreground" />
+                Community
+              </h4>
+              <p className="text-sm text-muted-foreground mb-3">
+                Need help? Check the docs or open an issue on GitHub.
+              </p>
+              <a 
+                href="https://github.com/ramme-io/create-app" 
+                target="_blank" 
+                rel="noreferrer"
+                className="inline-flex"
+              >
+                <Button variant="ghost" size="sm">GitHub Repo &rarr;</Button>
+              </a>
+            </div>
+          </Card>
+        </div>
+
+      </div>
+    </div>
+  );
+};
+
+export default Welcome;

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

@@ -0,0 +1 @@
+export { OverviewPage } from './pages/OverviewPage';

package/template/src/features/overview/pages/OverviewPage.tsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { 
+  PageHeader, 
+  Card,
+  BarChart, 
+  Button,
+  Icon,
+  Badge
+} from '@ramme-io/ui';
+
+// 1. REMOVE: The Zombie Service Import
+// import { userService } from '../../users'; 
+
+// 2. ADD: The Engine Hook & Shared Data
+// (Adjust path '../../engine/...' if needed based on your folder structure)
+import { useCrudLocalStorage } from '../../../engine/runtime/useCrudLocalStorage';
+import { SEED_USERS, type User } from '../../../data/mockData';
+
+// Mock Data for Chart
+const revenueData = [
+  { name: 'Mon', revenue: 4000, cost: 2400 },
+  { name: 'Tue', revenue: 3000, cost: 1398 },
+  { name: 'Wed', revenue: 2000, cost: 9800 },
+  { name: 'Thu', revenue: 2780, cost: 3908 },
+  { name: 'Fri', revenue: 1890, cost: 4800 },
+  { name: 'Sat', revenue: 2390, cost: 3800 },
+  { name: 'Sun', revenue: 3490, cost: 4300 },
+];
+
+// Recreating the StatCard locally (since the old one was custom)
+const StatCard = ({ title, value, trend, icon, onClick, className }: any) => (
+  <Card 
+    className={`p-6 flex items-center justify-between space-x-4 transition-all hover:border-primary/50 ${className || ''}`}
+    onClick={onClick}
+  >
+    <div>
+      <p className="text-sm font-medium text-muted-foreground">{title}</p>
+      <h3 className="text-2xl font-bold mt-1">{value}</h3>
+      <div className={`flex items-center text-xs mt-1 ${trend > 0 ? 'text-green-500' : 'text-red-500'}`}>
+        <Icon name={trend > 0 ? 'trending-up' : 'trending-down'} className="h-3 w-3 mr-1" />
+        {Math.abs(trend)}% from last month
+      </div>
+    </div>
+    <div className="p-3 bg-muted/50 rounded-full">
+      <Icon name={icon} className="h-5 w-5 text-primary" />
+    </div>
+  </Card>
+);
+
+export const OverviewPage: React.FC = () => {
+  const navigate = useNavigate();
+
+  // 3. REPLACE: Manual fetching with the Reactive Engine
+  // This automatically connects to 'ramme_db_users' and keeps the count live
+  const { data: users } = useCrudLocalStorage<User>('ramme_db_users', SEED_USERS);
+  
+  // Calculate count directly from the hook data
+  const userCount = users.length;
+
+  return (
+    <div className="space-y-8 pb-10">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <PageHeader 
+             title="Dashboard" 
+             description="Overview of your application performance."
+          />
+        </div>
+        <div className="flex gap-2">
+          <Button variant="outline" iconLeft="download">Export</Button>
+          <Button iconLeft="plus">New Report</Button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard 
+          title="Total Users" 
+          value={userCount} // ✅ Uses live data from Data Lake
+          trend={+12.5} 
+          icon="users" 
+          className="cursor-pointer bg-primary/5 border-primary/20"
+          onClick={() => navigate('/dashboard/users')}
+        />
+        <StatCard title="Total Revenue" value="$45,231" trend={+20.1} icon="dollar-sign" />
+        <StatCard title="Sales" value="+12,234" trend={+19} icon="credit-card" />
+        <StatCard title="Active Now" value="+573" trend={-4} icon="activity" />
+      </div>
+
+      {/* Main Content Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-7 gap-8">
+        <Card className="lg:col-span-4 p-6">
+          <div className="flex items-center justify-between mb-6">
+            <h3 className="font-semibold text-lg">Revenue Overview</h3>
+            <Badge variant="outline">Weekly</Badge>
+          </div>
+          <div className="h-[350px] w-full">
+            <BarChart 
+              data={revenueData} 
+              dataKeyX="name" 
+              barKeys={['revenue', 'cost']} 
+            />
+          </div>
+        </Card>
+
+        <Card className="lg:col-span-3 p-6 flex flex-col">
+          <h3 className="font-semibold text-lg mb-4">Recent Activity</h3>
+          <div className="space-y-6 overflow-y-auto pr-2">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="flex items-start gap-4">
+                <span className="relative flex h-2 w-2 mt-2">
+                  <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75"></span>
+                  <span className="relative inline-flex rounded-full h-2 w-2 bg-primary"></span>
+                </span>
+                <div className="space-y-1">
+                  <p className="text-sm font-medium leading-none">System Alert</p>
+                  <p className="text-xs text-muted-foreground">Database backup completed.</p>
+                  <p className="text-xs text-muted-foreground pt-1">Just now</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </Card>
+      </div>
+    </div>
+  );
+};

package/template/src/{pages → features/playground/pages}/AccountingLedgerPage.tsx

@@ -8,7 +8,7 @@ import {
   // 1. Import the specific event type for cell value changes
   type CellValueChangedEvent,
 } from '@ramme-io/ui';
-import { mockLedgerData, type LedgerEntry } from '../data/mockLedger';
+import { mockLedgerData, type LedgerEntry } from '../../../data/mockLedger';
 
 // --- Custom Renderer for Variance ---
 // 2. Correctly type the component and ensure it returns a ReactNode (JSX or null)

package/template/src/{pages/prototypes → features/playground/pages}/ItemSelectorPage.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, PageHeader } from '@ramme-io/ui';
-import { AddItemsModal } from '../../components/AddItemsModal';
+import { AddItemsModal } from '../../../components/AddItemsModal';
 
 
 

package/template/src/{pages/settings → features/settings/pages}/BillingPage.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 BillingPage: React.FC = () => {

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;