@pattern-stack/frontend-patterns 0.0.3 → 0.0.5

package/{dist/molecules/layout/SectionHeader/index.d.ts → src/molecules/layout/SectionHeader/index.ts}

@@ -1,2 +1 @@
-export { SectionHeader, type SectionHeaderProps } from './SectionHeader';
-//# sourceMappingURL=index.d.ts.map
+export { SectionHeader, type SectionHeaderProps } from './SectionHeader';

package/src/molecules/layout/ShowcaseSection.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { DataBadge } from '../../atoms/composed/DataBadge';
+import { cn } from '../../atoms/utils/utils';
+
+interface ShowcaseSectionProps {
+  /** Section title */
+  title: string;
+  /** Section description */
+  description: string;
+  /** Badge configuration */
+  badge: {
+    text: string;
+    variant?: 'status' | 'category';
+    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+    size?: 'sm' | 'md' | 'lg';
+  };
+  /** Section content */
+  children: React.ReactNode;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+export const ShowcaseSection: React.FC<ShowcaseSectionProps> = ({
+  title,
+  description,
+  badge,
+  children,
+  className
+}) => {
+  return (
+    <div className={cn('space-y-6', className)} data-component-name="ShowcaseSection">
+      {/* Title with inline badge */}
+      <div className="space-y-4">
+        <h3 className="text-lg font-medium flex items-center gap-2">
+          {title}
+          <DataBadge 
+            variant={badge.variant || 'status'}
+            status={badge.status || 'neutral'}
+            category={badge.category}
+            size={badge.size || 'sm'}
+          >
+            {badge.text}
+          </DataBadge>
+        </h3>
+        <p className="text-sm text-muted-foreground">
+          {description}
+        </p>
+      </div>
+
+      {/* Content */}
+      <div>
+        {children}
+      </div>
+    </div>
+  );
+};

package/src/molecules/layout/Sidebar.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
+import { cn } from '../../atoms/utils/utils';
+import { useSidebar } from './SidebarContext';
+import { SidebarButton } from './SidebarButton';
+import { 
+  Palette,
+  Menu,
+  X,
+  Shield,
+  Users,
+  BarChart3,
+  Database,
+  TrendingUp,
+  Layout
+} from 'lucide-react';
+
+interface SidebarItem {
+  value: string;
+  label: string;
+  icon: React.ReactNode;
+  path: string;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+}
+
+interface SidebarProps {
+  className?: string;
+}
+
+export const Sidebar = ({ className }: SidebarProps) => {
+  const { isExpanded, toggleSidebar } = useSidebar();
+  const location = useLocation();
+  const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
+
+  const items: SidebarItem[] = [
+    { value: 'showcase', label: 'Showcase', icon: <Palette className="w-5 h-5" />, path: '/showcase', category: 5 },
+    { value: 'admin-dashboard', label: 'Admin Dashboard', icon: <Shield className="w-5 h-5" />, path: '/admin/dashboard', category: 2 },
+    { value: 'admin-users', label: 'User Management', icon: <Users className="w-5 h-5" />, path: '/admin/users', category: 3 },
+    { value: 'admin-sales', label: 'Sales Dashboard', icon: <TrendingUp className="w-5 h-5" />, path: '/admin/sales', category: 4 },
+    { value: 'entity-performance', label: 'Performance Dashboard', icon: <BarChart3 className="w-5 h-5" />, path: '/entity/performance', category: 6 },
+    { value: 'entity-management', label: 'Entity Management', icon: <Database className="w-5 h-5" />, path: '/entity/management', category: 7 },
+    { value: 'entity-template', label: 'Template Example', icon: <Layout className="w-5 h-5" />, path: '/entity/template-example', category: 1 }
+  ];
+
+  const handleNavigation = (path: string) => {
+    if (path.includes('?')) {
+      // Handle query parameters by parsing the URL
+      const [basePath, query] = path.split('?');
+      const searchParams = new URLSearchParams(query);
+      navigate({ pathname: basePath, search: searchParams.toString() });
+    } else {
+      navigate(path);
+    }
+  };
+
+  return (
+    <aside 
+      className={cn(
+        "fixed left-0 top-16 flex flex-col bg-background border-r border-border z-40",
+        "transition-all duration-300 ease-in-out",
+        "h-[calc(100vh-4rem)]", // Full height minus header (4rem = 64px)
+        !isExpanded ? "w-16" : "w-64",
+        className
+      )}
+      data-component-name="Sidebar"
+      data-collapsed={!isExpanded}
+    >
+      {/* Toggle Button */}
+      <div className="flex justify-center p-3 pt-4">
+        <button
+          onClick={toggleSidebar}
+          className={cn(
+            "w-7 h-7 rounded-md",
+            "bg-muted/50 text-muted-foreground",
+            "flex items-center justify-center",
+            "hover:bg-muted hover:text-foreground",
+            "active:scale-95",
+            "transition-all duration-150 ease-out"
+          )}
+          data-component-name="SidebarToggle"
+          title={!isExpanded ? "Expand sidebar" : "Collapse sidebar"}
+        >
+          {!isExpanded ? <Menu className="w-3.5 h-3.5" /> : <X className="w-3.5 h-3.5" />}
+        </button>
+      </div>
+
+
+      {/* Navigation Items */}
+      <nav className="flex-1 p-3 space-y-2" data-component-name="SidebarNav">
+        {items.map((item) => {
+          // Check if item path has query parameters
+          const [itemBasePath, itemQuery] = item.path.split('?');
+          const currentPath = location.pathname;
+          
+          let isActive;
+          if (itemQuery) {
+            // For items with query parameters, check both path and query
+            const itemParams = new URLSearchParams(itemQuery);
+            const tabParam = itemParams.get('tab');
+            const currentTab = searchParams.get('tab');
+            isActive = currentPath === itemBasePath && currentTab === tabParam;
+          } else {
+            // For simple paths, check exact match
+            isActive = currentPath === item.path;
+          }
+          
+          return (
+            <SidebarButton
+              key={item.value}
+              icon={item.icon}
+              label={item.label}
+              active={isActive}
+              category={item.category}
+              expanded={isExpanded}
+              onClick={() => handleNavigation(item.path)}
+            />
+          );
+        })}
+      </nav>
+
+      {/* Footer */}
+      <div 
+        className={cn(
+          "p-4 border-t border-border",
+          !isExpanded && "px-3"
+        )}
+        data-component-name="SidebarFooter"
+      >
+        <div className="relative">
+          {/* Collapsed footer */}
+          <div className={cn(
+            "text-xs text-muted-foreground text-center",
+            "absolute inset-0 transition-opacity duration-200 ease-out",
+            !isExpanded ? "opacity-100" : "opacity-0"
+          )}>
+            v1.0
+          </div>
+          
+          {/* Expanded footer */}
+          <div className={cn(
+            "text-xs text-muted-foreground whitespace-nowrap",
+            "transition-opacity duration-200 ease-out",
+            isExpanded ? "opacity-100" : "opacity-0"
+          )}>
+            AloeVera v1.0
+          </div>
+        </div>
+      </div>
+    </aside>
+  );
+};

package/src/molecules/layout/SidebarButton/SidebarButton.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { cn } from '../../../atoms/utils/utils';
+import { Button } from '../../../atoms/ui/button';
+
+interface SidebarButtonProps {
+  icon: React.ReactNode;
+  label: string;
+  active?: boolean;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  expanded?: boolean;
+  onClick?: () => void;
+  className?: string;
+}
+
+export const SidebarButton: React.FC<SidebarButtonProps> = ({
+  icon,
+  label,
+  active = false,
+  category = 1,
+  expanded = false,
+  onClick,
+  className
+}) => {
+  return (
+    <Button
+      variant={active ? "secondary" : "ghost"}
+      onClick={onClick}
+      tooltip={!expanded ? label : undefined}
+      className={cn(
+        "relative w-full justify-start gap-3 h-12",
+        "transition-all duration-200 ease-in-out",
+        
+        // Active state with category colors
+        active && [
+          `bg-category-${category}/15 hover:bg-category-${category}/25`,
+          `border-category-${category}/30`,
+          `text-category-${category}`,
+          "shadow-sm"
+        ],
+        
+        // Non-active hover effects
+        !active && [
+          "hover:bg-muted/80",
+          `hover:text-category-${category}`,
+          "hover:shadow-sm"
+        ],
+        
+        // Collapsed state - ensure proper centering
+        !expanded && "justify-center px-2",
+        expanded && "px-3",
+        
+        className
+      )}
+    >
+      {/* Icon Container - Always square */}
+      <div className={cn(
+        "flex items-center justify-center w-6 h-6 flex-shrink-0",
+        "transition-colors duration-200",
+        active ? `text-category-${category}` : "text-muted-foreground group-hover:text-foreground"
+      )}>
+        {React.isValidElement(icon) 
+          ? React.cloneElement(icon as React.ReactElement<{ className?: string }>, { className: "w-5 h-5" })
+          : icon
+        }
+      </div>
+      
+      {/* Label - only show when expanded */}
+      {expanded && (
+        <>
+          <span className={cn(
+            "text-sm font-medium flex-1 text-left",
+            active ? `text-category-${category}` : "text-foreground"
+          )}>
+            {label}
+          </span>
+          
+          {/* Active indicator dot */}
+          {active && (
+            <div className={cn(
+              "w-2 h-2 rounded-full flex-shrink-0",
+              `bg-category-${category}`
+            )} />
+          )}
+        </>
+      )}
+      
+      {/* Collapsed active indicator */}
+      {!expanded && active && (
+        <div className="absolute -top-1 -right-1">
+          <div className={cn(
+            "w-2.5 h-2.5 rounded-full",
+            `bg-category-${category}`,
+            "ring-2 ring-background"
+          )} />
+        </div>
+      )}
+    </Button>
+  );
+};

package/src/molecules/layout/SidebarButton/index.ts

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

package/src/molecules/layout/SidebarContext.tsx

@@ -0,0 +1,31 @@
+import React, { createContext, useContext, useState, type ReactNode } from 'react';
+
+interface SidebarContextType {
+  isExpanded: boolean;
+  setIsExpanded: (expanded: boolean) => void;
+  toggleSidebar: () => void;
+}
+
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+
+export const SidebarProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const toggleSidebar = () => {
+    setIsExpanded(prev => !prev);
+  };
+
+  return (
+    <SidebarContext.Provider value={{ isExpanded, setIsExpanded, toggleSidebar }}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
+
+export const useSidebar = () => {
+  const context = useContext(SidebarContext);
+  if (!context) {
+    throw new Error('useSidebar must be used within a SidebarProvider');
+  }
+  return context;
+};

package/{dist/molecules/layout/index.d.ts → src/molecules/layout/index.ts}

@@ -1,8 +1,8 @@
 export { PageTemplate, type PageTemplateProps } from './PageTemplate';
 export { ShowcaseSection } from './ShowcaseSection';
 export { AppLayout } from './AppLayout';
+export { DashboardWithSidePanel } from './DashboardWithSidePanel';
 export { SectionHeader } from './SectionHeader';
 export { SidebarButton } from './SidebarButton';
 export { AppHeader } from './AppHeader';
-export { SidebarProvider, useSidebar } from './SidebarContext';
-//# sourceMappingURL=index.d.ts.map
+export { SidebarProvider, useSidebar } from './SidebarContext';

package/src/molecules/navigation/NavMenu.tsx

@@ -0,0 +1,188 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { ChevronDown, ChevronRight } from 'lucide-react';
+import { cn } from '../../atoms/utils/utils';
+import { getAnimationClasses, animationPresets } from '../../atoms/utils/animations';
+
+export interface NavMenuItem {
+  id: string;
+  label: string;
+  href?: string;
+  icon?: React.ReactNode;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  children?: NavMenuItem[];
+  disabled?: boolean;
+}
+
+interface NavMenuProps {
+  items: NavMenuItem[];
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+  defaultCategory?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  onItemClick?: (item: NavMenuItem) => void;
+}
+
+export const NavMenu: React.FC<NavMenuProps> = ({
+  items,
+  orientation = 'horizontal',
+  className,
+  defaultCategory = 1,
+  onItemClick
+}) => {
+  const [openMenus, setOpenMenus] = useState<Set<string>>(new Set());
+  const timeoutRef = useRef<Record<string, NodeJS.Timeout>>({});
+
+  const toggleMenu = (itemId: string) => {
+    setOpenMenus(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(itemId)) {
+        newSet.delete(itemId);
+      } else {
+        newSet.add(itemId);
+      }
+      return newSet;
+    });
+  };
+
+  const handleMouseEnter = (itemId: string) => {
+    if (orientation === 'horizontal') {
+      // Clear any pending close timeout
+      if (timeoutRef.current[itemId]) {
+        clearTimeout(timeoutRef.current[itemId]);
+        delete timeoutRef.current[itemId];
+      }
+      
+      setOpenMenus(prev => new Set(prev).add(itemId));
+    }
+  };
+
+  const handleMouseLeave = (itemId: string) => {
+    if (orientation === 'horizontal') {
+      // Delay closing to allow for mouse movement to submenu
+      timeoutRef.current[itemId] = setTimeout(() => {
+        setOpenMenus(prev => {
+          const newSet = new Set(prev);
+          newSet.delete(itemId);
+          return newSet;
+        });
+        delete timeoutRef.current[itemId];
+      }, 150);
+    }
+  };
+
+  const handleItemClick = (item: NavMenuItem, event?: React.MouseEvent) => {
+    if (item.disabled) {
+      event?.preventDefault();
+      return;
+    }
+
+    if (item.children && item.children.length > 0) {
+      event?.preventDefault();
+      toggleMenu(item.id);
+    } else {
+      onItemClick?.(item);
+    }
+  };
+
+  useEffect(() => {
+    const timeouts = timeoutRef.current;
+    return () => {
+      // Cleanup timeouts
+      Object.values(timeouts).forEach(timeout => clearTimeout(timeout));
+    };
+  }, []);
+
+  const renderMenuItem = (item: NavMenuItem, level = 0) => {
+    const hasChildren = item.children && item.children.length > 0;
+    const isOpen = openMenus.has(item.id);
+    const category = item.category || defaultCategory;
+
+    const itemContent = (
+      <div
+        className={cn(
+          'flex items-center gap-2 px-3 py-2 rounded-md transition-all duration-200',
+          'hover:bg-muted/50 cursor-pointer select-none',
+          item.disabled && 'opacity-50 cursor-not-allowed',
+          !item.disabled && [
+            `hover:text-category-${category}`,
+            `hover:bg-category-${category}/5`,
+            getAnimationClasses(animationPresets.subtle)
+          ],
+          orientation === 'horizontal' && level === 0 && 'px-4 py-3'
+        )}
+        onClick={(e) => handleItemClick(item, e)}
+      >
+        {item.icon && (
+          <span className="flex-shrink-0">
+            {item.icon}
+          </span>
+        )}
+        
+        <span className="flex-1 text-sm font-medium">
+          {item.label}
+        </span>
+        
+        {hasChildren && (
+          <span className="flex-shrink-0 transition-transform duration-200">
+            {orientation === 'horizontal' ? (
+              <ChevronDown className={cn(
+                'w-4 h-4 transition-transform duration-200',
+                isOpen && 'rotate-180'
+              )} />
+            ) : (
+              <ChevronRight className={cn(
+                'w-4 h-4 transition-transform duration-200',
+                isOpen && 'rotate-90'
+              )} />
+            )}
+          </span>
+        )}
+      </div>
+    );
+
+    return (
+      <div
+        key={item.id}
+        className="relative"
+        onMouseEnter={() => handleMouseEnter(item.id)}
+        onMouseLeave={() => handleMouseLeave(item.id)}
+      >
+        {item.href && !hasChildren ? (
+          <a href={item.href} className="block">
+            {itemContent}
+          </a>
+        ) : (
+          itemContent
+        )}
+
+        {/* Submenu */}
+        {hasChildren && isOpen && (
+          <div
+            className={cn(
+              'bg-popover border border-border rounded-md shadow-lg py-1 min-w-48',
+              'z-50',
+              orientation === 'horizontal' 
+                ? 'absolute top-full left-0 mt-1'
+                : 'ml-4 mt-1',
+              getAnimationClasses(animationPresets.card)
+            )}
+          >
+            {item.children!.map(child => renderMenuItem(child, level + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <nav
+      className={cn(
+        'flex',
+        orientation === 'horizontal' ? 'flex-row space-x-1' : 'flex-col space-y-1',
+        className
+      )}
+      data-component-name="NavMenu"
+    >
+      {items.map(item => renderMenuItem(item))}
+    </nav>
+  );
+};