@ramme-io/create-app 1.2.1 → 1.2.5

package/template/src/templates/docs/docs.sitemap.ts

@@ -1,34 +1,33 @@
-import { type SitemapEntry } from '../../core/sitemap-entry';
+import { type SitemapEntry } from '../../engine/types/sitemap-entry';
 
-// Component Imports from the main /pages directory
-import Dashboard from '../../pages/Dashboard';
-import AiChat from '../../pages/AiChat';
-import DataGridPage from '../../pages/DataGridPage';
-import AccountingLedgerPage from '../../pages/AccountingLedgerPage';
-import Styleguide from '../../pages/styleguide/Styleguide';
-import DataLayout from '../../layouts/DataLayout';
+// --- PAGE IMPORTS ---
+// ✅ Corrected: Kept named import for OverviewPage based on your index.ts export
+import { OverviewPage } from '../../features/overview'; 
+import AiChat from '../../features/ai/pages/AiChat';
 
-// Style Guide Section Imports
-import TemplatesSection from '../../pages/styleguide/sections/templates/TemplatesSection';
-import LayoutSection from '../../pages/styleguide/sections/layout/LayoutSection';
-import ThemingSection from '../../pages/styleguide/sections/theming/ThemingSection';
-import NavigationSection from '../../pages/styleguide/sections/navigation/NavigationSection';
-import TablesSection from '../../pages/styleguide/sections/tables/TablesSection';
-import ChartsSection from '../../pages/styleguide/sections/charts/ChartsSection';
-import ElementsSection from '../../pages/styleguide/sections/elements/ElementsSection';
-import FormsSection from '../../pages/styleguide/sections/forms/FormsSection';
-import FeedbackSection from '../../pages/styleguide/sections/feedback/FeedbackSection';
-import UtilitiesSection from '../../pages/styleguide/sections/utilities/UtilitiesSection';
-import ColorsSection from '../../pages/styleguide/sections/colors/ColorsSection';
-import IconsSection from '../../pages/styleguide/sections/icons/IconsSection';
+import Styleguide from '../../features/styleguide/Styleguide';
+
+// --- SECTION IMPORTS ---
+import TemplatesSection from '../../features/styleguide/sections/templates/TemplatesSection';
+import LayoutSection from '../../features/styleguide/sections/layout/LayoutSection';
+import ThemingSection from '../../features/styleguide/sections/theming/ThemingSection';
+import NavigationSection from '../../features/styleguide/sections/navigation/NavigationSection';
+import TablesSection from '../../features/styleguide/sections/tables/TablesSection';
+import ChartsSection from '../../features/styleguide/sections/charts/ChartsSection';
+import ElementsSection from '../../features/styleguide/sections/elements/ElementsSection';
+import FormsSection from '../../features/styleguide/sections/forms/FormsSection';
+import FeedbackSection from '../../features/styleguide/sections/feedback/FeedbackSection';
+import UtilitiesSection from '../../features/styleguide/sections/utilities/UtilitiesSection';
+import ColorsSection from '../../features/styleguide/sections/colors/ColorsSection';
+import IconsSection from '../../features/styleguide/sections/icons/IconsSection';
 
 export const docsSitemap: SitemapEntry[] = [
   {
     id: 'dashboard',
-    path: '', // Index route for the /docs/ layout
+    path: '', // Index route
     title: 'Dashboard',
     icon: 'home',
-    component: Dashboard,
+    component: OverviewPage,
   },
   {
     id: 'ai-chat',
@@ -37,17 +36,6 @@ export const docsSitemap: SitemapEntry[] = [
     icon: 'bot',
     component: AiChat,
   },
-  {
-    id: 'data',
-    path: 'data',
-    title: 'Data',
-    icon: 'database',
-    component: DataLayout,
-    children: [
-      { id: 'grid', path: 'grid', title: 'Data Grid', component: DataGridPage, icon: 'table' },
-      { id: 'ledger', path: 'ledger', title: 'Ledger', component: AccountingLedgerPage, icon: 'book-open' },
-    ],
-  },
   {
     id: 'styleguide',
     path: 'styleguide',

package/template/src/templates/settings/SettingsLayout.tsx

@@ -1,170 +1,110 @@
-/**
- * @file SettingsLayout.tsx
- * @repository ramme-app-starter
- * @description
- * Sidebar-Only layout. Moved TemplateSwitcher to SidebarContent.
- * Includes all previous fixes (href, icons, conditional branding, providers, etc.).
- * Confirmed handleResetData is included.
- */
-import React from 'react';
-import { Outlet, NavLink, Link } from 'react-router-dom';
+import React, { useMemo } from 'react';
+import { Outlet, useNavigate, useLocation } from 'react-router-dom';
 import {
   Sidebar,
-  SidebarProvider,
-  SidebarHeader,
-  SidebarContent,
-  SidebarFooter,
-  SidebarMenu,
-  SidebarMenuItem,
-  useSidebar,
-  Button,
-  Icon,
-  Avatar,
-  Menu,
-  MenuItem,
-  MenuDivider,
-  useTheme,
-  type ThemeName,
+  type SidebarItem,
+  type IconName,
 } from '@ramme-io/ui';
 import { settingsSitemap } from './settings.sitemap';
 import rammeLogo from '../../assets/orange.png';
-import { useAuth } from '../../contexts/AuthContext';
-import { appManifest } from '../../config/navigation';
-import type { ManifestLink } from '../../core/manifest-types';
-import { SitemapProvider } from '../../contexts/SitemapContext';
+import { useAuth } from '../../features/auth/AuthContext';
+import { SitemapProvider } from '../../engine/runtime/SitemapContext';
 import PageTitleUpdater from '../../components/PageTitleUpdater';
-// --- Import TemplateSwitcher ---
 import TemplateSwitcher from '../../components/TemplateSwitcher';
 
-// NavLink wrapper - Correctly maps href to 'to'
-const SidebarNavLink = React.forwardRef<HTMLAnchorElement, any>(
-  ({ end, href, ...props }, ref) => {
-    return <NavLink ref={ref} to={href || ''} {...props} end={end} />;
-  },
-);
-SidebarNavLink.displayName = 'SidebarNavLink';
-
-// Sidebar Content Component
-const AppSidebarContent: React.FC = () => {
-  const { isOpen, toggle } = useSidebar();
-  const { theme, availableThemes, setTheme } = useTheme();
+const SettingsLayout: React.FC = () => {
+  const navigate = useNavigate();
+  const location = useLocation();
   const { user, logout } = useAuth();
-  const userNavLinks = appManifest.userMenu;
 
-  // --- handleResetData function remains here ---
+  // --- Actions ---
   const handleResetData = () => {
-    if (
-      window.confirm(
-        'Are you sure you want to reset all user data? This cannot be undone.',
-      )
-    ) {
+    if (window.confirm('Are you sure you want to reset all user data? This cannot be undone.')) {
       localStorage.removeItem('users');
       window.location.reload();
     }
   };
 
-  return (
-    <>
-      <SidebarHeader>
-        {/* Header now only contains Branding and Toggle */}
-        <div className={`flex items-center w-full h-full ${isOpen ? 'justify-between' : 'justify-end'}`}>
-          {/* Branding Link */}
-          <Link
-            to="/settings"
-            className={`flex items-center gap-2 transition-opacity duration-200 ${!isOpen ? 'opacity-0 hidden' : 'opacity-100'}`}
-            aria-hidden={!isOpen} tabIndex={!isOpen ? -1 : undefined}
-          >
-            <img src={rammeLogo} alt="Ramme Logo" className="h-7 w-auto" />
-            <span className="text-xl font-bold text-text">Ramme</span>
-          </Link>
-
-          {/* TemplateSwitcher REMOVED from here */}
+  // --- Data Mapping ---
+  // We combine the Sitemap navigation with the System Actions (Reset/Logout)
+  // so they all live harmoniously in the new "Zero Jank" sidebar list.
+  const sidebarItems: SidebarItem[] = useMemo(() => {
+    // 1. Navigation Items
+    const navItems: SidebarItem[] = settingsSitemap.map((item) => ({
+      id: item.id,
+      label: item.title,
+      icon: (item.icon as IconName) || 'settings',
+      href: item.path ? `/settings/${item.path}` : '/settings',
+    }));
 
-          {/* Toggle Button */}
-          <Button
-            variant="ghost" size="icon" onClick={toggle}
-            className="hidden md:flex"
-            aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
-          >
-            <Icon name={isOpen ? 'panel-left-close' : 'panel-left-open'} />
-          </Button>
-        </div>
-      </SidebarHeader>
+    // 2. System Actions (Appended to bottom)
+    const actionItems: SidebarItem[] = [
+      {
+        id: 'action-reset',
+        label: 'Reset Data',
+        icon: 'refresh-cw' as IconName,
+        onClick: handleResetData,
+      },
+      {
+        id: 'action-logout',
+        label: 'Logout',
+        icon: 'log-out' as IconName,
+        onClick: logout,
+      }
+    ];
 
-      <SidebarContent>
-        {/* --- MOVED TemplateSwitcher HERE --- */}
-        {/* Only visible when sidebar is open */}
-        <div className={`mb-4 transition-opacity duration-200 ${!isOpen ? 'opacity-0 hidden' : 'opacity-100'}`}>
-             <TemplateSwitcher />
-        </div>
+    return [...navItems, ...actionItems];
+  }, [logout]);
 
-        {/* --- Sitemap Menu --- */}
-        <SidebarMenu>
-          {settingsSitemap.map((item) => (
-            <SidebarMenuItem
-              key={item.id} as={SidebarNavLink}
-              href={item.path ? `/settings/${item.path}` : '/settings'} end
-              icon={item.icon ? <Icon name={item.icon} /> : undefined}
-              tooltip={item.title}
-            >
-              {item.title}
-            </SidebarMenuItem>
-          ))}
-        </SidebarMenu>
-      </SidebarContent>
+  // Determine active item (only for nav items, actions don't stay active)
+  const activeItemId = useMemo(() => {
+    const active = sidebarItems.find(item => 
+      item.href && item.href !== '/settings' && location.pathname.startsWith(item.href)
+    );
+    return active?.id || (location.pathname === '/settings' ? sidebarItems[0]?.id : undefined);
+  }, [location.pathname, sidebarItems]);
 
-      <SidebarFooter>
-         {user && (
-           <Menu position="top-right" trigger={
-             <button className="flex items-center gap-3 w-full text-left rounded-md p-2 hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary">
-               <Avatar name={user.name} size="sm" />
-               <div className={`flex-1 transition-opacity duration-200 ${!isOpen ? 'opacity-0 hidden' : 'opacity-100'}`}>
-                 <p className="font-semibold text-sm text-text">{user.name}</p>
-                 <p className="text-xs text-muted-foreground">{user.email}</p>
-               </div>
-             </button>
-           }>
-            {/* User Menu Content */}
-            {userNavLinks.map((link: ManifestLink) => (
-              <MenuItem key={link.id} asChild icon={link.icon ? <Icon name={link.icon} /> : undefined}>
-                <Link to={link.path}>{link.title}</Link>
-              </MenuItem>
-            ))}
-            <MenuDivider />
-            {availableThemes.map((themeName: string) => (
-              <MenuItem key={themeName} onClick={() => setTheme(themeName as ThemeName)}>
-                {themeName.charAt(0).toUpperCase() + themeName.slice(1)}
-              </MenuItem>
-            ))}
-            <MenuDivider />
-            {/* Calls handleResetData */}
-            <MenuItem onClick={handleResetData} icon={<Icon name="refresh-cw" />}> Reset Data </MenuItem>
-            {/* Calls logout */}
-            <MenuItem onClick={logout} icon={<Icon name="log-out" />}> Logout </MenuItem>
-          </Menu>
-         )}
-      </SidebarFooter>
-    </>
-  );
-};
-
-// Main layout component
-const SettingsLayout: React.FC = () => {
   return (
     <SitemapProvider value={settingsSitemap}>
       <PageTitleUpdater />
-      <SidebarProvider>
-        <div className="flex h-screen bg-background text-foreground">
-          <Sidebar>
-            <AppSidebarContent />
-          </Sidebar>
-          <div className="flex flex-col flex-1 overflow-y-auto">
-            <main className="p-8">
-              <Outlet />
-            </main>
-          </div>
+      
+      <div className="flex h-screen bg-background text-foreground">
+        <Sidebar
+          className="relative border-border"
+          items={sidebarItems}
+          activeItemId={activeItemId}
+          // Handle both Navigation (href) and Actions (onClick)
+          onNavigate={(item) => {
+            if (item.href) {
+              navigate(item.href);
+            }
+            // item.onClick is handled automatically by the Sidebar component if present
+          }}
+          user={user ? {
+            name: user.name,
+            email: user.email,
+            avatarUrl: undefined // Add avatar URL if available in user object
+          } : undefined}
+          logo={
+            <div className="flex items-center gap-2 px-2">
+              <img src={rammeLogo} alt="Ramme" className="h-7 w-auto" />
+              <span className="text-xl font-bold">Ramme</span>
+            </div>
+          }
+          // Inject the TemplateSwitcher into the footer slot (above the user profile)
+          footerSlot={
+            <div className="mb-2">
+              <TemplateSwitcher />
+            </div>
+          }
+        />
+
+        <div className="flex flex-col flex-1 overflow-hidden">
+          <main className="flex-1 overflow-y-auto p-8 bg-muted/20">
+            <Outlet />
+          </main>
         </div>
-      </SidebarProvider>
+      </div>
     </SitemapProvider>
   );
 };

package/template/src/templates/settings/settings.sitemap.ts

@@ -5,19 +5,19 @@
  * Defines the Information Architecture (IA) for the "Settings" layout.
  * Imports components from the /pages/settings/ directory.
  */
-import type { SitemapEntry } from '../../core/sitemap-entry';
+import type { SitemapEntry } from '../../engine/types/sitemap-entry';
 
 // --- 1. Import from the new /pages/settings/ directory ---
-import ProfilePage from '../../pages/settings/ProfilePage';
-import BillingPage from '../../pages/settings/BillingPage';
-import TeamPage from '../../pages/settings/TeamPage';
+import ProfilePage from '../../features/settings/pages/ProfilePage';
+import BillingPage from '../../features/settings/pages/BillingPage';
+import TeamPage from '../../features/settings/pages/TeamPage';
 
 // --- 2. Export with the correct name ---
 export const settingsSitemap: SitemapEntry[] = [
   {
-    id: 'settings.profile',
+    id: 'profile',
     path: 'profile',
-    title: 'Profile',
+    title: 'My Profile',
     icon: 'user',
     component: ProfilePage,
   },

package/template/tailwind.config.cjs

@@ -1,18 +1,19 @@
-const path = require('path');
-
-// This finds the absolute path to the @ramme-io/ui package's directory
-const rammeUiPath = path.dirname(require.resolve('@ramme-io/ui/package.json'));
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   presets: [
-    // Load the preset from the absolute path we found
-    require(path.join(rammeUiPath, 'tailwind.preset.js'))
+    // ✅ STANDARD: Directly require the preset from the package
+    require('@ramme-io/ui/tailwind.preset.js')
   ],
   content: [
     "./index.html",
     "./src/**/*.{js,ts,jsx,tsx}",
-    // Scan the library's files for classes using the absolute path
-    path.join(rammeUiPath, 'dist/**/*.js'),
+    
+    // ✅ STANDARD: Point directly to node_modules relative to this config file
+    // This is the industry standard way (like how Flowbite or Shadcn work)
+    "./node_modules/@ramme-io/ui/dist/**/*.{js,ts,jsx,tsx}"
   ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
 }

package/template/vite.config.ts

@@ -2,7 +2,6 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import path from 'path';
 
-// https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
   resolve: {
@@ -10,14 +9,4 @@ export default defineConfig({
       '@': path.resolve(__dirname, './src'),
     },
   },
-  // ADD THIS SECTION to ensure the linked dependency is correctly
-  // processed and watched for changes by the Vite dev server.
-  optimizeDeps: {
-    include: ['@ramme-io/ui'],
-  },
-  build: {
-    commonjsOptions: {
-      include: [/@ramme\/ui/, /node_modules/],
-    },
-  },
 });

package/template/src/components/LocalSideNav.tsx

@@ -1,120 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { NavLink, useLocation } from 'react-router-dom';
-import { Icon, type IconName } from '@ramme-io/ui';
-import { motion, AnimatePresence } from 'framer-motion';
-
-export interface NavItem {
-  label: string;
-  href: string;
-  icon?: IconName;
-  children?: NavItem[];
-}
-
-interface LocalSideNavProps {
-  navItems: NavItem[];
-  className?: string;
-  onLinkClick?: () => void; // 1. Add the optional prop
-}
-
-const LocalSideNav: React.FC<LocalSideNavProps> = ({ navItems, className, onLinkClick }) => { // 2. Destructure prop
-  const location = useLocation();
-  const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({});
-
-  useEffect(() => {
-    const currentParent = navItems.find(item => 
-      item.children?.some(child => location.pathname === child.href)
-    );
-    if (currentParent) {
-      setExpandedItems(prev => ({ ...prev, [currentParent.href]: true }));
-    }
-  }, [location.pathname, navItems]);
-
-  const handleToggle = (href: string) => {
-    setExpandedItems(prev => ({ ...prev, [href]: !prev[href] }));
-  };
-  
-  const childNavLinkClasses = ({ isActive }: { isActive: boolean }) =>
-    `flex items-center gap-2 text-sm transition-colors duration-200 py-1 ${
-      isActive
-        ? 'text-primary font-medium'
-        : 'text-muted-foreground hover:text-text'
-    }`;
-  
-  const renderNavLinks = (items: NavItem[]) => {
-    return items.map(item => {
-      const isExpanded = !!expandedItems[item.href];
-
-      if (item.children) {
-        return (
-          //Section link
-          <li key={item.href}>
-            <button
-              onClick={() => handleToggle(item.href)}
-              className="flex w-full items-center justify-between gap-2 py-1 font-normal text-text transition-colors duration-200 hover:text-primary"
-            >
-              <span className="flex items-center gap-2">
-                {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
-                <span className="text-md">{item.label}</span>
-              </span>
-              <Icon
-                name="chevron-right"
-                className={`h-4 w-4 transition-transform duration-200 ${isExpanded ? 'rotate-90' : ''}`}
-              />
-            </button>
-            <AnimatePresence initial={false}>
-              {isExpanded && (
-                <motion.ul
-                  key="content"
-                  initial="collapsed"
-                  animate="open"
-                  exit="collapsed"
-                  variants={{
-                    open: { opacity: 1, height: 'auto' },
-                    collapsed: { opacity: 0, height: 0 },
-                  }}
-                  transition={{ duration: 0.3, ease: 'easeInOut' }}
-                  className="space-y-1 overflow-hidden border-l border-border pl-5 mt-1 ml-1"
-                >
-                  {item.children.map(child => (
-                    <li key={child.href}>
-                      <NavLink
-                        to={child.href}
-                        className={childNavLinkClasses}
-                        onClick={onLinkClick} // 3. Add onClick to child NavLink
-                      >
-                        {child.label}
-                      </NavLink>
-                    </li>
-                  ))}
-                </motion.ul>
-              )}
-            </AnimatePresence>
-          </li>
-        );
-      }
-      
-      return (
-        <li key={item.href}>
-          <NavLink
-            to={item.href}
-            className="flex items-center gap-2 py-1 text-lg font-semibold"
-            onClick={onLinkClick} // 3. Add onClick to top-level NavLink
-          >
-            {item.icon && <Icon name={item.icon} className="h-4 w-4" />}
-            {item.label}
-          </NavLink>
-        </li>
-      );
-    });
-  };
-
-  return (
-    <nav className={`w-full ${className || ''}`}>
-      <ul className="space-y-1">
-        {renderNavLinks(navItems)}
-      </ul>
-    </nav>
-  );
-};
-
-export default LocalSideNav;

package/template/src/components/PageWithSideNav.tsx

@@ -1,69 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Drawer, Icon } from '@ramme-io/ui';
-import LocalSideNav from './LocalSideNav';
-import type { NavItem } from './LocalSideNav';
-
-interface PageWithSideNavProps {
-  navItems: NavItem[];
-  children: React.ReactNode;
-  sideNavHeader?: React.ReactNode;
-  contentWidth?: 'fixed' | 'full';
-}
-
-export const PageWithSideNav: React.FC<PageWithSideNavProps> = ({
-  navItems,
-  children,
-  sideNavHeader,
-  contentWidth = 'fixed',
-}) => {
-  const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
-
-  const contentContainerClass = contentWidth === 'fixed'
-    ? 'max-w-7xl mx-auto'
-    : '';
-
-  return (
-    <div className="flex flex-col md:flex-row h-full">
-      {/* --- Mobile Header --- */}
-      <div className="md:hidden p-4 bg-card border-b border-border flex items-center justify-between sticky top-[65px] z-10">
-        {sideNavHeader}
-        <Button onClick={() => setIsMobileNavOpen(true)} variant="ghost" size="icon">
-          <Icon name="panel-left" />
-        </Button>
-      </div>
-
-      {/* --- Desktop Sidebar --- */}
-      <aside className="hidden md:flex flex-col w-64 border-r border-border p-4 sticky top-[65px] h-[calc(100vh-65px)]">
-        {sideNavHeader}
-        <LocalSideNav navItems={navItems} className="mt-1" />
-      </aside>
-      
-      {/* --- Mobile Drawer --- */}
-      <Drawer
-        isOpen={isMobileNavOpen}
-        onClose={() => setIsMobileNavOpen(false)}
-        position="left"
-      >
-        <div className="p-4">
-            <Button 
-              onClick={() => setIsMobileNavOpen(false)} 
-              variant="ghost" 
-              size="icon" 
-              className="absolute top-4 right-4"
-            >
-                <Icon name="x" />
-            </Button>
-            <div className="mt-2">{sideNavHeader}</div>
-            <LocalSideNav navItems={navItems} onLinkClick={() => setIsMobileNavOpen(false)} />
-        </div>
-      </Drawer>
-
-      {/* --- Main Content --- */}
-      <main className="flex-1 p-6 overflow-y-auto">
-        <div className={contentContainerClass}>
-          {children}
-        </div>
-      </main>
-    </div>
-  );
-};