@pattern-stack/frontend-patterns 0.0.6 → 0.1.0

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

package/src/molecules/navigation/index.ts

@@ -1,4 +0,0 @@
-// Navigation molecules - reusable navigation workflows
-// Note: Breadcrumb moved to @/atoms/composed as it is a business UI component
-export { Pagination } from './Pagination';
-export { NavMenu, type NavMenuItem } from './NavMenu';

package/src/organisms/entity/CategoryBreakdownPanel.tsx

@@ -1,427 +0,0 @@
-import React, { useMemo, useState } from 'react';
-import { Chart } from '../../atoms/composed/Chart';
-import type { ChartDataPoint } from '../../atoms/composed/Chart';
-import { Card } from '../../atoms/ui/card';
-import { Button } from '../../atoms/ui/button';
-import { Badge } from '../../atoms/ui/Badge';
-import { DataBadge } from '../../atoms/composed/DataBadge';
-import { MetricCalculationEngine } from '../../atoms/utils/metric-engine';
-import type { CategoryConfig, EntityData, CategoryBreakdown } from '../../atoms/types';
-import { cn } from '../../atoms/utils/utils';
-import { 
-  ChevronRight, 
-  ChevronDown, 
-  PieChart, 
-  BarChart3, 
-  List,
-  Download,
-  Filter
-} from 'lucide-react';
-
-export interface CategoryBreakdownPanelProps {
-  data: EntityData[];
-  categoryConfig: CategoryConfig;
-  valueField: string;
-  isLoading?: boolean;
-  className?: string;
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  
-  // Display configuration
-  title?: string;
-  subtitle?: string;
-  defaultView?: 'chart' | 'list' | 'both';
-  defaultChartType?: 'pie' | 'bar';
-  maxCategories?: number;
-  showPercentages?: boolean;
-  enableDrillDown?: boolean;
-  
-  // Extension points
-  renderHeader?: () => React.ReactNode;
-  renderFooter?: () => React.ReactNode;
-  renderCustomCategory?: (category: CategoryBreakdown, index: number) => React.ReactNode;
-  renderDrillDownContent?: (category: string, subcategories: CategoryBreakdown[]) => React.ReactNode;
-  headerSlot?: React.ReactNode;
-  footerSlot?: React.ReactNode;
-  
-  // Event handlers
-  onCategoryClick?: (category: CategoryBreakdown) => void;
-  onDrillDown?: (category: string, level: number) => void;
-  onExport?: (data: CategoryBreakdown[]) => void;
-}
-
-export const CategoryBreakdownPanel: React.FC<CategoryBreakdownPanelProps> = ({
-  data,
-  categoryConfig,
-  valueField,
-  isLoading = false,
-  className,
-  category,
-  title = 'Category Breakdown',
-  subtitle,
-  defaultView = 'both',
-  defaultChartType = 'pie',
-  maxCategories = 8,
-  showPercentages = true,
-  enableDrillDown = true,
-  renderHeader,
-  renderFooter,
-  renderCustomCategory,
-  renderDrillDownContent,
-  headerSlot,
-  footerSlot,
-  onCategoryClick,
-  onDrillDown,
-  onExport
-}) => {
-  const [currentView, setCurrentView] = useState<'chart' | 'list' | 'both'>(defaultView);
-  const [chartType, setChartType] = useState<'pie' | 'bar'>(defaultChartType);
-  const [expandedCategories, setExpandedCategories] = useState<Set<string>>(new Set());
-  const [drillDownLevel, setDrillDownLevel] = useState(0);
-  const [drillDownPath, setDrillDownPath] = useState<string[]>([]);
-
-  // Calculate category breakdown
-  const categoryBreakdown = useMemo(() => {
-    if (!data.length) return [];
-    
-    const currentCategoryField = categoryConfig?.hierarchy?.[drillDownLevel] || categoryConfig?.defaultGroupBy || 'category';
-    
-    return MetricCalculationEngine.calculateCategoryBreakdown(
-      data,
-      currentCategoryField,
-      valueField,
-      maxCategories
-    );
-  }, [data, categoryConfig, valueField, maxCategories, drillDownLevel]);
-
-  // Convert to chart data
-  const chartData = useMemo((): ChartDataPoint[] => {
-    return categoryBreakdown.map((item, index) => ({
-      label: item.category,
-      value: item.value,
-      category: ((index % 8) + 1) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8
-    }));
-  }, [categoryBreakdown]);
-
-  // Calculate total value
-  const totalValue = useMemo(() => {
-    return categoryBreakdown.reduce((sum, item) => sum + item.value, 0);
-  }, [categoryBreakdown]);
-
-  const handleCategoryClick = (categoryItem: CategoryBreakdown) => {
-    onCategoryClick?.(categoryItem);
-    
-    if (enableDrillDown && categoryConfig?.enableDrillDown && drillDownLevel < (categoryConfig?.hierarchy?.length || 0) - 1) {
-      setDrillDownLevel(prev => prev + 1);
-      setDrillDownPath(prev => [...prev, categoryItem.category]);
-      onDrillDown?.(categoryItem.category, drillDownLevel + 1);
-    }
-  };
-
-  const handleDrillUp = (level: number) => {
-    if (level < drillDownLevel) {
-      setDrillDownLevel(level);
-      setDrillDownPath(prev => prev.slice(0, level));
-      onDrillDown?.(level > 0 ? drillDownPath[level - 1] : '', level);
-    }
-  };
-
-  const toggleCategoryExpansion = (categoryName: string) => {
-    setExpandedCategories(prev => {
-      const newSet = new Set(prev);
-      if (newSet.has(categoryName)) {
-        newSet.delete(categoryName);
-      } else {
-        newSet.add(categoryName);
-      }
-      return newSet;
-    });
-  };
-
-  const handleExport = () => {
-    if (onExport) {
-      onExport(categoryBreakdown);
-    } else {
-      // Default CSV export
-      const csvContent = [
-        'Category,Value,Percentage',
-        ...categoryBreakdown.map(item => 
-          `${item.category},${item.value},${item.percentage.toFixed(2)}%`
-        )
-      ].join('\n');
-      
-      const blob = new Blob([csvContent], { type: 'text/csv' });
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = `category-breakdown-${Date.now()}.csv`;
-      a.click();
-      URL.revokeObjectURL(url);
-    }
-  };
-
-  const renderControls = () => {
-    return (
-      <div className="flex items-center justify-between mb-4">
-        <div className="flex items-center gap-4">
-          <div className="flex items-center gap-2">
-            <PieChart className="w-4 h-4 text-muted-foreground" />
-            <h3 className="text-lg font-semibold text-foreground">{title}</h3>
-          </div>
-          
-          {subtitle && (
-            <Badge variant="outline" className="text-xs">
-              {subtitle}
-            </Badge>
-          )}
-          
-          {totalValue > 0 && (
-            <Badge variant="outline">
-              Total: {new Intl.NumberFormat().format(totalValue)}
-            </Badge>
-          )}
-        </div>
-        
-        <div className="flex items-center gap-2">
-          {/* View toggle */}
-          <div className="flex items-center border rounded">
-            <Button
-              variant={currentView === 'chart' ? 'default' : 'ghost'}
-              size="sm"
-              onClick={() => setCurrentView('chart')}
-            >
-              <PieChart className="w-4 h-4" />
-            </Button>
-            <Button
-              variant={currentView === 'list' ? 'default' : 'ghost'}
-              size="sm"
-              onClick={() => setCurrentView('list')}
-            >
-              <List className="w-4 h-4" />
-            </Button>
-            <Button
-              variant={currentView === 'both' ? 'default' : 'ghost'}
-              size="sm"
-              onClick={() => setCurrentView('both')}
-            >
-              Both
-            </Button>
-          </div>
-          
-          {/* Chart type toggle */}
-          {(currentView === 'chart' || currentView === 'both') && (
-            <div className="flex items-center border rounded">
-              <Button
-                variant={chartType === 'pie' ? 'default' : 'ghost'}
-                size="sm"
-                onClick={() => setChartType('pie')}
-              >
-                <PieChart className="w-4 h-4" />
-              </Button>
-              <Button
-                variant={chartType === 'bar' ? 'default' : 'ghost'}
-                size="sm"
-                onClick={() => setChartType('bar')}
-              >
-                <BarChart3 className="w-4 h-4" />
-              </Button>
-            </div>
-          )}
-          
-          <Button
-            variant="outline"
-            size="sm"
-            onClick={handleExport}
-            disabled={categoryBreakdown.length === 0}
-          >
-            <Download className="w-4 h-4" />
-          </Button>
-        </div>
-      </div>
-    );
-  };
-
-  const renderBreadcrumb = () => {
-    if (drillDownLevel === 0) return null;
-
-    return (
-      <div className="flex items-center gap-2 mb-4 text-sm text-muted-foreground">
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => handleDrillUp(0)}
-          className="p-0 h-auto font-normal"
-        >
-          All
-        </Button>
-        {drillDownPath.map((segment, index) => (
-          <React.Fragment key={index}>
-            <ChevronRight className="w-3 h-3" />
-            <Button
-              variant="ghost"
-              size="sm"
-              onClick={() => handleDrillUp(index + 1)}
-              className="p-0 h-auto font-normal"
-            >
-              {segment}
-            </Button>
-          </React.Fragment>
-        ))}
-      </div>
-    );
-  };
-
-  const renderChart = () => {
-    if (currentView === 'list') return null;
-
-    return (
-      <div className={cn(currentView === 'both' && 'mb-6')}>
-        <Chart
-          title=""
-          data={chartData}
-          type={chartType}
-          category={category}
-          showLegend={true}
-          height="medium"
-          isLoading={isLoading}
-          noWrapper={true}
-          onClick={() => {}}
-        />
-      </div>
-    );
-  };
-
-  const renderCategoryList = () => {
-    if (currentView === 'chart') return null;
-
-    return (
-      <div className="space-y-2">
-        {categoryBreakdown.map((item, index) => {
-          if (renderCustomCategory) {
-            const customContent = renderCustomCategory(item, index);
-            if (customContent) return customContent;
-          }
-
-          const canExpand = enableDrillDown && categoryConfig.enableDrillDown && 'subcategories' in item && item.subcategories && Array.isArray(item.subcategories) && item.subcategories.length > 0;
-          const isExpanded = expandedCategories.has(item.category);
-
-          return (
-            <div key={item.category} className="border rounded-lg">
-              <div
-                className={cn(
-                  "flex items-center justify-between p-3 cursor-pointer hover:bg-muted/50",
-                  canExpand && "cursor-pointer"
-                )}
-                onClick={() => handleCategoryClick(item)}
-              >
-                <div className="flex items-center gap-3">
-                  {canExpand && (
-                    <Button
-                      variant="ghost"
-                      size="sm"
-                      className="p-0 w-4 h-4"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        toggleCategoryExpansion(item.category);
-                      }}
-                    >
-                      {isExpanded ? (
-                        <ChevronDown className="w-3 h-3" />
-                      ) : (
-                        <ChevronRight className="w-3 h-3" />
-                      )}
-                    </Button>
-                  )}
-                  
-                  <DataBadge
-                    variant="category"
-                    category={((index % 8) + 1) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8}
-                    size="sm"
-                  >
-                    {item.category}
-                  </DataBadge>
-                </div>
-                
-                <div className="flex items-center gap-3">
-                  <div className="text-right">
-                    <div className="font-semibold">
-                      {new Intl.NumberFormat().format(item.value)}
-                    </div>
-                    {showPercentages && (
-                      <div className="text-xs text-muted-foreground">
-                        {item.percentage.toFixed(1)}%
-                      </div>
-                    )}
-                  </div>
-                  
-                  {/* Progress bar */}
-                  <div className="w-20 h-2 bg-muted rounded-full overflow-hidden">
-                    <div
-                      className={cn(
-                        "h-full transition-all duration-300",
-                        `bg-category-${((index % 8) + 1)}`
-                      )}
-                      style={{ width: `${item.percentage}%` }}
-                    />
-                  </div>
-                </div>
-              </div>
-              
-              {/* Subcategories */}
-              {canExpand && isExpanded && 'subcategories' in item && item.subcategories && (
-                <div className="border-t bg-muted/20">
-                  {renderDrillDownContent ? (
-                    renderDrillDownContent(item.category, item.subcategories)
-                  ) : (
-                    <div className="p-3 space-y-1">
-                      {Array.isArray(item.subcategories) && item.subcategories.map((subItem: CategoryBreakdown) => (
-                        <div key={subItem.category} className="flex items-center justify-between text-sm pl-4">
-                          <span className="text-muted-foreground">{subItem.category}</span>
-                          <span className="font-medium">{new Intl.NumberFormat().format(subItem.value)}</span>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    );
-  };
-
-  const renderEmptyState = () => {
-    if (categoryBreakdown.length > 0) return null;
-
-    return (
-      <div className="text-center py-12">
-        <Filter className="w-8 h-8 text-muted-foreground mx-auto mb-4" />
-        <div className="text-muted-foreground">
-          No category data available
-        </div>
-      </div>
-    );
-  };
-
-  return (
-    <Card className={cn('p-6', className)} category={category} data-component-name="CategoryBreakdownPanel">
-      {headerSlot}
-      {renderHeader && renderHeader()}
-      
-      {renderControls()}
-      {renderBreadcrumb()}
-      
-      {categoryBreakdown.length === 0 ? (
-        renderEmptyState()
-      ) : (
-        <>
-          {renderChart()}
-          {renderCategoryList()}
-        </>
-      )}
-      
-      {renderFooter && renderFooter()}
-      {footerSlot}
-    </Card>
-  );
-};