@pattern-stack/frontend-patterns 0.0.6 → 0.1.0

package/src/molecules/layout/SectionHeader/SectionHeader.tsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import { cn } from '../../../atoms/utils/utils';
-import { DataBadge } from '../../../atoms/composed/DataBadge';
-
-export interface SectionHeaderProps {
-  /** Main heading text */
-  title: string;
-  /** Optional description text */
-  description?: string;
-  /** Optional subtitle text */
-  subtitle?: string;
-  /** Size variant */
-  size?: 'sm' | 'md' | 'lg';
-  /** Additional CSS classes */
-  className?: string;
-  /** Optional icon element */
-  icon?: React.ReactNode;
-  /** Optional badge configuration */
-  badge?: {
-    text: string;
-    variant?: 'category' | 'status';
-    category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-    status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
-  };
-}
-
-export const SectionHeader: React.FC<SectionHeaderProps> = ({
-  title,
-  description,
-  subtitle,
-  size = 'md',
-  className,
-  icon,
-  badge
-}) => {
-  const titleSizes = {
-    sm: 'text-lg',
-    md: 'text-xl', 
-    lg: 'text-2xl'
-  };
-
-  const spacingSizes = {
-    sm: 'space-y-1',
-    md: 'space-y-2',
-    lg: 'space-y-3'
-  };
-
-  return (
-    <div 
-      className={cn(
-        'text-center',
-        spacingSizes[size],
-        className
-      )}
-      data-component-name="SectionHeader"
-    >
-      <div className="flex items-center justify-center gap-3">
-        {icon}
-        <h3 className={cn('font-semibold text-foreground', titleSizes[size])}>
-          {title}
-        </h3>
-        {badge && (
-          <DataBadge
-            variant={badge.variant || 'status'}
-            status={badge.status}
-            category={badge.category}
-            size="sm"
-          >
-            {badge.text}
-          </DataBadge>
-        )}
-      </div>
-      
-      {subtitle && (
-        <p className="text-muted-foreground text-sm font-medium">
-          {subtitle}
-        </p>
-      )}
-      
-      {description && (
-        <p className="text-muted-foreground text-sm max-w-2xl mx-auto">
-          {description}
-        </p>
-      )}
-    </div>
-  );
-};

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

@@ -1 +0,0 @@
-export { SectionHeader, type SectionHeaderProps } from './SectionHeader';

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,131 +0,0 @@
-import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-import { cn, Icon } from '../../atoms/utils/utils';
-import { useSidebar } from './SidebarContext';
-import { useNavigation, getNavigationItems } from './NavigationContext';
-import { SidebarButton } from './SidebarButton';
-import { Menu, X } from 'lucide-react';
-import type { NavigationItem } from '../../atoms/types';
-
-interface SidebarProps {
-  className?: string;
-}
-
-export const Sidebar = ({ className }: SidebarProps) => {
-  const { isExpanded, toggleSidebar } = useSidebar();
-  const { navigation } = useNavigation();
-  const location = useLocation();
-  const navigate = useNavigate();
-  const [searchParams] = useSearchParams();
-
-  // Get navigation items from context
-  const items: NavigationItem[] = getNavigationItems(navigation);
-
-  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={<Icon name={item.icon} className="w-5 h-5" />}
-              label={item.label}
-              active={isActive}
-              category={item.category}
-              expanded={isExpanded}
-              onClick={() => handleNavigation(item.path)}
-              badge={item.badge}
-              disabled={item.disabled}
-            />
-          );
-        })}
-      </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,121 +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;
-  badge?: string | number;
-  disabled?: boolean;
-}
-
-export const SidebarButton: React.FC<SidebarButtonProps> = ({
-  icon,
-  label,
-  active = false,
-  category = 1,
-  expanded = false,
-  onClick,
-  className,
-  badge,
-  disabled = false
-}) => {
-  return (
-    <Button
-      variant={active ? "secondary" : "ghost"}
-      onClick={onClick}
-      disabled={disabled}
-      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>
-          
-          {/* Badge or Active indicator */}
-          {badge ? (
-            <span className={cn(
-              "px-2 py-0.5 text-xs font-medium rounded-full flex-shrink-0",
-              "bg-primary/10 text-primary"
-            )}>
-              {badge}
-            </span>
-          ) : active && (
-            <div className={cn(
-              "w-2 h-2 rounded-full flex-shrink-0",
-              `bg-category-${category}`
-            )} />
-          )}
-        </>
-      )}
-      
-      {/* Collapsed indicators */}
-      {!expanded && (badge || active) && (
-        <div className="absolute -top-1 -right-1">
-          {badge ? (
-            <span className={cn(
-              "px-1.5 py-0.5 text-xs font-bold rounded-full",
-              "bg-primary text-primary-foreground",
-              "ring-2 ring-background"
-            )}>
-              {badge}
-            </span>
-          ) : active && (
-            <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,10 +0,0 @@
-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';
-export { NavigationProvider, useNavigation, getNavigationItems } from './NavigationContext';
-export { Sidebar } from './Sidebar';

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>
-  );
-};