@pattern-stack/frontend-patterns 0.0.1 → 0.0.3

package/src/molecules/layout/ShowcaseSection.tsx

@@ -1,57 +0,0 @@
-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

@@ -1,144 +0,0 @@
-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

@@ -1,99 +0,0 @@
-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

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

package/src/molecules/layout/SidebarContext.tsx

@@ -1,31 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,188 +0,0 @@
-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

@@ -1,172 +0,0 @@
-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>
-  );
-};