@pattern-stack/frontend-patterns 1.0.0

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,144 @@
+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
+} 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 }
+  ];
+
+  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/src/molecules/layout/index.ts

@@ -0,0 +1,7 @@
+export { PageTemplate, type PageTemplateProps } from './PageTemplate';
+export { ShowcaseSection } from './ShowcaseSection';
+export { AppLayout } from './AppLayout';
+export { SectionHeader } from './SectionHeader';
+export { SidebarButton } from './SidebarButton';
+export { AppHeader } from './AppHeader';
+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>
+  );
+};

package/src/molecules/navigation/Pagination.tsx

@@ -0,0 +1,172 @@
+import React from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { Button } from '../../atoms/ui/button';
+import { cn } from '../../atoms/utils/utils';
+
+interface PaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  showFirstLast?: boolean;
+  maxVisiblePages?: number;
+  className?: string;
+  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  showFirstLast = true,
+  maxVisiblePages = 7,
+  className,
+  category = 1,
+  size = 'md'
+}) => {
+  const getVisiblePages = () => {
+    if (totalPages <= maxVisiblePages) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+
+    const halfVisible = Math.floor(maxVisiblePages / 2);
+    let start = Math.max(1, currentPage - halfVisible);
+    const end = Math.min(totalPages, start + maxVisiblePages - 1);
+
+    if (end - start + 1 < maxVisiblePages) {
+      start = Math.max(1, end - maxVisiblePages + 1);
+    }
+
+    const pages = [];
+    
+    // Add first page if not in range
+    if (start > 1) {
+      pages.push(1);
+      if (start > 2) {
+        pages.push('ellipsis-start');
+      }
+    }
+    
+    // Add visible range
+    for (let i = start; i <= end; i++) {
+      pages.push(i);
+    }
+    
+    // Add last page if not in range
+    if (end < totalPages) {
+      if (end < totalPages - 1) {
+        pages.push('ellipsis-end');
+      }
+      pages.push(totalPages);
+    }
+    
+    return pages;
+  };
+
+  const buttonSizes = {
+    sm: 'h-8 w-8 text-xs',
+    md: 'h-9 w-9 text-sm',
+    lg: 'h-10 w-10 text-sm'
+  };
+
+  const visiblePages = getVisiblePages();
+
+  return (
+    <nav 
+      className={cn('flex items-center space-x-1', className)}
+      aria-label="Pagination"
+      data-component-name="Pagination"
+    >
+      {/* First page button */}
+      {showFirstLast && currentPage > 1 && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(1)}
+          className={cn(buttonSizes[size])}
+          aria-label="Go to first page"
+        >
+          ««
+        </Button>
+      )}
+
+      {/* Previous page button */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+        disabled={currentPage === 1}
+        className={cn(buttonSizes[size])}
+        aria-label="Go to previous page"
+      >
+        <ChevronLeft className="w-4 h-4" />
+      </Button>
+
+      {/* Page number buttons */}
+      {visiblePages.map((page, index) => {
+        if (typeof page === 'string') {
+          return (
+            <span
+              key={index}
+              className={cn(
+                'flex items-center justify-center text-muted-foreground',
+                buttonSizes[size]
+              )}
+            >
+              <MoreHorizontal className="w-4 h-4" />
+            </span>
+          );
+        }
+
+        const isActive = page === currentPage;
+        
+        return (
+          <Button
+            key={page}
+            variant={isActive ? "default" : "outline"}
+            size="sm"
+            onClick={() => onPageChange(page)}
+            className={cn(
+              buttonSizes[size],
+              isActive && [
+                `bg-category-${category}/15 hover:bg-category-${category}/25`,
+                `border-category-${category}/30`,
+                `text-category-${category}`,
+                'shadow-sm'
+              ]
+            )}
+            aria-label={`Go to page ${page}`}
+            aria-current={isActive ? 'page' : undefined}
+          >
+            {page}
+          </Button>
+        );
+      })}
+
+      {/* Next page button */}
+      <Button
+        variant="outline"
+        size="sm"
+        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+        disabled={currentPage === totalPages}
+        className={cn(buttonSizes[size])}
+        aria-label="Go to next page"
+      >
+        <ChevronRight className="w-4 h-4" />
+      </Button>
+
+      {/* Last page button */}
+      {showFirstLast && currentPage < totalPages && (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => onPageChange(totalPages)}
+          className={cn(buttonSizes[size])}
+          aria-label="Go to last page"
+        >
+          »»
+        </Button>
+      )}
+    </nav>
+  );
+};