@pattern-stack/frontend-patterns 0.0.6 → 0.1.1

package/src/__tests__/atoms/composed/statcard.test.tsx

@@ -1,133 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen, userEvent } from '../../utils'
-import { StatCard } from '../../../atoms/composed/StatCard'
-
-describe('StatCard (Composed)', () => {
-  it('renders basic stat card with title and value', () => {
-    render(<StatCard title="Total Users" value="1,234" />)
-    
-    expect(screen.getByText('Total Users')).toBeInTheDocument()
-    expect(screen.getByText('1,234')).toBeInTheDocument()
-  })
-
-  it('renders with subtitle', () => {
-    render(
-      <StatCard 
-        title="Revenue" 
-        value="$45,678" 
-        subtitle="+12% from last month" 
-      />
-    )
-    
-    expect(screen.getByText('Revenue')).toBeInTheDocument()
-    expect(screen.getByText('$45,678')).toBeInTheDocument()
-    expect(screen.getByText('+12% from last month')).toBeInTheDocument()
-  })
-
-  it('renders with icon', () => {
-    render(
-      <StatCard 
-        title="Orders" 
-        value="567" 
-        icon="ShoppingCart"
-      />
-    )
-    
-    expect(screen.getByText('Orders')).toBeInTheDocument()
-    expect(screen.getByText('567')).toBeInTheDocument()
-    // Icon should be rendered (we can't easily test the actual icon, but we can test it doesn't crash)
-  })
-
-  it('applies category theming', () => {
-    render(<StatCard title="Test" value="123" category={3} />)
-    
-    const card = screen.getByText('Test').closest('[data-component-name="StatCard"]')
-    expect(card).toBeInTheDocument()
-    expect(card).toHaveAttribute('data-component-name', 'StatCard')
-  })
-
-  it('handles click events', async () => {
-    const user = userEvent.setup()
-    const handleClick = vi.fn()
-    
-    render(
-      <StatCard 
-        title="Clickable Card" 
-        value="999" 
-        onClick={handleClick}
-      />
-    )
-    
-    const card = screen.getByText('Clickable Card').closest('[role="button"]')
-    expect(card).toBeInTheDocument()
-    
-    await user.click(card!)
-    expect(handleClick).toHaveBeenCalledOnce()
-  })
-
-  it('applies hover effects when clickable', () => {
-    render(
-      <StatCard 
-        title="Hoverable" 
-        value="555" 
-        onClick={() => {}}
-      />
-    )
-    
-    const card = screen.getByText('Hoverable').closest('[role="button"]')
-    expect(card).toHaveClass('cursor-pointer')
-    expect(card).toHaveClass('hover:shadow-md')
-  })
-
-  it('does not apply click styles when not clickable', () => {
-    render(<StatCard title="Static Card" value="111" />)
-    
-    const card = screen.getByText('Static Card').closest('div')
-    expect(card).not.toHaveAttribute('role', 'button')
-    expect(card).not.toHaveClass('cursor-pointer')
-  })
-
-  it('displays numbers as provided', () => {
-    render(<StatCard title="Big Number" value={1234567} />)
-    
-    expect(screen.getByText('1234567')).toBeInTheDocument()
-  })
-
-  it('handles string and number values', () => {
-    const { rerender } = render(<StatCard title="String" value="Custom Text" />)
-    expect(screen.getByText('Custom Text')).toBeInTheDocument()
-    
-    rerender(<StatCard title="Number" value={42} />)
-    expect(screen.getByText('42')).toBeInTheDocument()
-  })
-
-  it('applies custom className', () => {
-    render(
-      <StatCard 
-        title="Custom" 
-        value="123" 
-        className="custom-stat-card"
-      />
-    )
-    
-    const card = screen.getByText('Custom').closest('.custom-stat-card')
-    expect(card).toBeInTheDocument()
-  })
-
-  it('renders loading state', () => {
-    render(<StatCard title="Loading" value="..." isLoading={true} />)
-    
-    const card = screen.getByText('Loading').closest('[data-component-name="StatCard"]')
-    expect(card).toBeInTheDocument()
-    // Check for skeleton elements in loading state
-    const skeletons = card?.querySelectorAll('.animate-pulse')
-    expect(skeletons?.length).toBeGreaterThan(0)
-  })
-
-  it('renders with data component name', () => {
-    render(<StatCard title="Test Card" value="123" />)
-    
-    const card = screen.getByText('Test Card').closest('[data-component-name="StatCard"]')
-    expect(card).toHaveAttribute('data-component-name', 'StatCard')
-  })
-})

package/src/__tests__/atoms/utils/icon-resolver.test.tsx

@@ -1,140 +0,0 @@
-import { describe, it, expect, vi } from 'vitest'
-import { render, screen } from '../../utils'
-import { Icon, getIcon, iconMap } from '../../../atoms/utils/icon-resolver'
-
-// Mock console.warn to avoid noise in tests
-const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {})
-
-describe('Icon Resolver', () => {
-  afterEach(() => {
-    consoleSpy.mockClear()
-  })
-
-  describe('Icon component', () => {
-    it('renders valid icon', () => {
-      render(<Icon name="Home" data-testid="home-icon" />)
-      
-      const icon = screen.getByTestId('home-icon')
-      expect(icon).toBeInTheDocument()
-    })
-
-    it('applies default className', () => {
-      render(<Icon name="Users" data-testid="users-icon" />)
-      
-      const icon = screen.getByTestId('users-icon')
-      expect(icon).toHaveClass('w-5', 'h-5')
-    })
-
-    it('applies custom className', () => {
-      render(<Icon name="Settings" className="w-8 h-8 text-blue-500" data-testid="settings-icon" />)
-      
-      const icon = screen.getByTestId('settings-icon')
-      expect(icon).toHaveClass('w-8', 'h-8', 'text-blue-500')
-    })
-
-    it('applies size prop', () => {
-      render(<Icon name="Search" size={24} data-testid="search-icon" />)
-      
-      const icon = screen.getByTestId('search-icon')
-      expect(icon).toHaveAttribute('width', '24')
-      expect(icon).toHaveAttribute('height', '24')
-    })
-
-    it('renders fallback icon for invalid name', () => {
-      render(<Icon name="InvalidIcon" data-testid="fallback-icon" />)
-      
-      const icon = screen.getByTestId('fallback-icon')
-      expect(icon).toBeInTheDocument()
-      expect(consoleSpy).toHaveBeenCalledWith('Icon "InvalidIcon" not found. Using default Menu icon.')
-    })
-
-    it('handles undefined icon name gracefully', () => {
-      render(<Icon name={undefined as any} data-testid="undefined-icon" />)
-      
-      const icon = screen.getByTestId('undefined-icon')
-      expect(icon).toBeInTheDocument()
-      expect(consoleSpy).toHaveBeenCalled()
-    })
-  })
-
-  describe('getIcon function', () => {
-    it('returns icon component for valid name', () => {
-      const HomeIcon = getIcon('Home')
-      expect(HomeIcon).toBeDefined()
-      expect(typeof HomeIcon).toBe('function')
-    })
-
-    it('returns Menu icon for invalid name', () => {
-      const InvalidIcon = getIcon('InvalidIcon' as any)
-      expect(InvalidIcon).toBeDefined()
-      expect(typeof InvalidIcon).toBe('function')
-    })
-
-    it('returns Menu icon for undefined name', () => {
-      const UndefinedIcon = getIcon(undefined as any)
-      expect(UndefinedIcon).toBeDefined()
-    })
-  })
-
-  describe('iconMap', () => {
-    it('contains expected common icons', () => {
-      const expectedIcons = [
-        'Home', 'Users', 'Settings', 'Search', 'Menu',
-        'ChevronDown', 'ChevronRight', 'X', 'Plus',
-        'ShoppingCart', 'Calendar', 'Mail', 'Phone'
-      ]
-
-      expectedIcons.forEach(iconName => {
-        expect(iconMap).toHaveProperty(iconName)
-        expect(typeof iconMap[iconName]).toBe('function')
-      })
-    })
-
-    it('has reasonable number of icons', () => {
-      const iconCount = Object.keys(iconMap).length
-      expect(iconCount).toBeGreaterThan(30)
-      expect(iconCount).toBeLessThan(100) // Keep it manageable
-    })
-
-    it('all icon map values are functions', () => {
-      Object.values(iconMap).forEach(iconComponent => {
-        expect(typeof iconComponent).toBe('function')
-      })
-    })
-  })
-
-  describe('Icon rendering variations', () => {
-    const testIcons = ['Home', 'Users', 'Settings', 'Search', 'Bell']
-
-    testIcons.forEach(iconName => {
-      it(`renders ${iconName} icon without errors`, () => {
-        render(<Icon name={iconName} data-testid={`${iconName.toLowerCase()}-icon`} />)
-        
-        const icon = screen.getByTestId(`${iconName.toLowerCase()}-icon`)
-        expect(icon).toBeInTheDocument()
-      })
-    })
-  })
-
-  describe('Integration with real icon names', () => {
-    it('renders navigation icons correctly', () => {
-      const navIcons = ['Home', 'Users', 'Settings', 'FileText', 'BarChart']
-      
-      navIcons.forEach(iconName => {
-        const { unmount } = render(<Icon name={iconName} />)
-        // If it renders without throwing, it's valid
-        unmount()
-      })
-    })
-
-    it('renders action icons correctly', () => {
-      const actionIcons = ['Plus', 'Edit', 'Trash2', 'Save', 'Download']
-      
-      actionIcons.forEach(iconName => {
-        const { unmount } = render(<Icon name={iconName} />)
-        // If it renders without throwing, it's valid
-        unmount()
-      })
-    })
-  })
-})

package/src/atoms/composed/SalesPanel/SalesPanel.tsx

@@ -1,116 +0,0 @@
-import React from 'react';
-import { DataBadge } from '../DataBadge';
-import { Button } from '../../ui/button';
-import { 
-  Target,
-  ExternalLink
-} from 'lucide-react';
-
-interface SalesPanelProps {
-  sales: Array<{
-    id: string;
-    customer: string;
-    product: string;
-    amount: number;
-    stage: string;
-    salesperson: string;
-    region: string;
-    closeDate: string;
-    dealSize: string;
-  }>;
-  onSaleClick?: (sale: any) => void;
-  onClose?: () => void;
-}
-
-const getStageStatus = (stage: string) => {
-  switch (stage) {
-    case 'Closed Won': return 'success';
-    case 'Negotiation': return 'warning'; 
-    case 'Proposal Sent': return 'info';
-    case 'Qualified': return 'info';
-    case 'Discovery': return 'neutral';
-    default: return 'neutral';
-  }
-};
-
-export const SalesPanel: React.FC<SalesPanelProps> = ({
-  sales,
-  onSaleClick,
-  onClose
-}) => {
-  const topDeals = sales.slice(0, 5); // Show only top 5 recent deals
-  const totalValue = sales.reduce((sum, sale) => sum + sale.amount, 0);
-
-  return (
-    <div className="fixed right-0 top-16 h-[calc(100vh-4rem)] w-72 bg-background border-l border-border shadow-lg flex flex-col z-30">
-      {/* Header */}
-      <div className="p-3 border-b border-border">
-        <div className="flex items-center justify-between">
-          <h3 className="font-medium flex items-center gap-2">
-            <Target className="w-4 h-4" />
-            Pipeline
-          </h3>
-          {onClose && (
-            <Button variant="ghost" size="sm" onClick={onClose}>
-              ×
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {/* Quick Stats */}
-      <div className="p-3 border-b border-border">
-        <div className="space-y-2">
-          <div className="flex justify-between">
-            <span className="text-sm text-muted-foreground">Total Value</span>
-            <span className="font-semibold text-green-600">${totalValue.toLocaleString()}</span>
-          </div>
-          <div className="flex justify-between">
-            <span className="text-sm text-muted-foreground">Active Deals</span>
-            <span className="font-semibold">{sales.length}</span>
-          </div>
-        </div>
-      </div>
-
-      {/* Recent Deals */}
-      <div className="flex-1 overflow-auto p-3">
-        <h4 className="text-sm font-medium mb-3">Recent Opportunities</h4>
-        <div className="space-y-2">
-          {topDeals.map((sale) => (
-            <div 
-              key={sale.id}
-              className="p-2 border border-border rounded-md hover:bg-muted/50 cursor-pointer transition-colors"
-              onClick={() => onSaleClick?.(sale)}
-            >
-              <div className="flex justify-between items-start mb-1">
-                <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium truncate">{sale.customer}</p>
-                  <p className="text-xs text-muted-foreground truncate">{sale.product}</p>
-                </div>
-                <div className="text-right ml-2">
-                  <p className="text-sm font-semibold text-green-600">
-                    ${sale.amount.toLocaleString()}
-                  </p>
-                </div>
-              </div>
-              <div className="flex justify-between items-center">
-                <DataBadge variant="status" status={getStageStatus(sale.stage)}>
-                  {sale.stage}
-                </DataBadge>
-                <span className="text-xs text-muted-foreground">{sale.salesperson}</span>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* Footer */}
-      <div className="p-3 border-t border-border">
-        <Button variant="outline" size="sm" className="w-full">
-          <ExternalLink className="w-4 h-4 mr-2" />
-          View All Deals
-        </Button>
-      </div>
-    </div>
-  );
-};

package/src/atoms/composed/SalesPanel/index.ts

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

package/src/atoms/composed/SalesPanel/mockSalesData.ts

@@ -1,151 +0,0 @@
-// Mock sales data for demonstrations
-export const mockSalesData = [
-  {
-    id: 'SALE-2024-001',
-    customer: 'TechCorp Industries',
-    product: 'Enterprise License',
-    amount: 45000,
-    stage: 'Closed Won',
-    salesperson: 'Sarah Chen',
-    region: 'North America',
-    closeDate: '2024-06-08',
-    dealSize: 'Large'
-  },
-  {
-    id: 'SALE-2024-002',
-    customer: 'StartupXYZ',
-    product: 'Professional Plan',
-    amount: 12000,
-    stage: 'Proposal Sent',
-    salesperson: 'Mike Johnson',
-    region: 'North America',
-    closeDate: '2024-06-15',
-    dealSize: 'Medium'
-  },
-  {
-    id: 'SALE-2024-003',
-    customer: 'Global Enterprises Ltd',
-    product: 'Enterprise Suite',
-    amount: 78000,
-    stage: 'Negotiation',
-    salesperson: 'Lisa Wang',
-    region: 'Europe',
-    closeDate: '2024-06-20',
-    dealSize: 'Large'
-  },
-  {
-    id: 'SALE-2024-004',
-    customer: 'Innovation Labs',
-    product: 'Starter Package',
-    amount: 5000,
-    stage: 'Qualified',
-    salesperson: 'David Kim',
-    region: 'Asia Pacific',
-    closeDate: '2024-06-25',
-    dealSize: 'Small'
-  },
-  {
-    id: 'SALE-2024-005',
-    customer: 'FutureTech Solutions',
-    product: 'Custom Integration',
-    amount: 95000,
-    stage: 'Discovery',
-    salesperson: 'Sarah Chen',
-    region: 'North America',
-    closeDate: '2024-07-01',
-    dealSize: 'Large'
-  }
-];
-
-// Sales configuration for entity template
-export const salesConfig = {
-  entityType: 'performance' as const,
-  display: {
-    title: 'Sales Performance',
-    subtitle: 'Monitor sales metrics, team performance, and revenue trends',
-    category: 3 as const
-  },
-  metrics: [
-    {
-      key: 'revenue',
-      label: 'Total Revenue',
-      type: 'currency' as const,
-      aggregate: 'sum',
-      showTrend: true,
-      category: 2
-    },
-    {
-      key: 'deals',
-      label: 'Deals Closed',
-      type: 'number' as const,
-      aggregate: 'count',
-      showTrend: true,
-      category: 3
-    },
-    {
-      key: 'conversion',
-      label: 'Conversion Rate',
-      type: 'percentage' as const,
-      aggregate: 'average',
-      showTrend: true,
-      category: 1
-    },
-    {
-      key: 'pipeline',
-      label: 'Pipeline Value',
-      type: 'currency' as const,
-      aggregate: 'sum',
-      showTrend: true,
-      category: 4
-    }
-  ],
-  categories: [
-    { key: 'region', label: 'By Region', type: 'categorical' },
-    { key: 'product', label: 'By Product', type: 'categorical' },
-    { key: 'stage', label: 'By Stage', type: 'categorical' }
-  ],
-  trends: {
-    periods: ['7d', '30d', '90d', '1y'],
-    defaultPeriod: '30d'
-  }
-};
-
-// Sample sales performance data
-export const salesPerformanceData = [
-  {
-    id: 'sale-1',
-    revenue: 45000,
-    deals: 12,
-    conversion: 0.24,
-    pipeline: 125000,
-    region: 'North America',
-    product: 'Enterprise',
-    stage: 'Closed Won',
-    date: '2024-06-01',
-    salesperson: 'Sarah Chen'
-  },
-  {
-    id: 'sale-2',
-    revenue: 32000,
-    deals: 8,
-    conversion: 0.18,
-    pipeline: 89000,
-    region: 'Europe',
-    product: 'Professional',
-    stage: 'Negotiation',
-    date: '2024-06-02',
-    salesperson: 'Mike Johnson'
-  },
-  {
-    id: 'sale-3',
-    revenue: 67000,
-    deals: 15,
-    conversion: 0.31,
-    pipeline: 156000,
-    region: 'Asia Pacific',
-    product: 'Enterprise',
-    stage: 'Closed Won',
-    date: '2024-06-03',
-    salesperson: 'Lisa Wang'
-  }
-];

package/src/atoms/types/entity-config.ts

@@ -1,127 +0,0 @@
-import * as React from 'react';
-
-export type EntityType = 'transactional' | 'categorical' | 'temporal';
-
-export type MetricType = 'currency' | 'percentage' | 'count' | 'duration' | 'ratio';
-
-export type AggregationType = 'sum' | 'avg' | 'count' | 'min' | 'max';
-
-export type TemporalCycle = 'daily' | 'weekly' | 'monthly' | 'quarterly' | 'yearly';
-
-export type ForecastingAlgorithm = 'linear' | 'seasonal' | 'ml';
-
-export type ActionType = 'primary' | 'secondary' | 'danger';
-
-export interface FormatConfig {
-  decimals?: number;
-  prefix?: string;
-  suffix?: string;
-  thousands?: boolean;
-}
-
-export interface MetricConfig {
-  key: string;
-  label: string;
-  type: MetricType;
-  format?: FormatConfig;
-  trend?: boolean;
-  target?: number | ((data: EntityData[]) => number);
-  aggregation?: AggregationType;
-  icon?: React.ComponentType;
-}
-
-export interface TemporalConfig {
-  cycles: TemporalCycle[];
-  defaultCycle: TemporalCycle;
-  enableComparisons: boolean;
-  forecasting?: {
-    enabled: boolean;
-    periods: number;
-    algorithm: ForecastingAlgorithm;
-  };
-}
-
-export interface CategoryConfig {
-  hierarchy: string[];
-  defaultGroupBy: string;
-  enableDrillDown: boolean;
-  colorCoding?: boolean;
-}
-
-export interface ActionConfig {
-  label: string;
-  type: ActionType;
-  onClick: (context: { selectedItems?: EntityData[]; data?: EntityData[]; config?: EntityTemplateConfig }) => void | Promise<void>;
-  icon?: React.ComponentType;
-  permissions?: string[];
-  validation?: (context: { selectedItems?: EntityData[]; data?: EntityData[]; config?: EntityTemplateConfig }) => boolean;
-}
-
-export interface BusinessRulesConfig<T> {
-  validation?: (item: T) => string[];
-  constraints?: {
-    [key: string]: {
-      min?: number;
-      max?: number;
-      required?: boolean;
-      pattern?: RegExp;
-    };
-  };
-  workflows?: {
-    [status: string]: string[];
-  };
-}
-
-export interface EntityDisplayConfig {
-  title: string;
-  description?: string;
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-}
-
-export interface EntityTemplateConfig<T = EntityData> {
-  entityType: EntityType;
-  display: EntityDisplayConfig;
-  metrics: MetricConfig[];
-  temporal?: TemporalConfig;
-  categories?: CategoryConfig;
-  businessRules?: BusinessRulesConfig<T>;
-  actions?: ActionConfig[];
-}
-
-export interface EntityData {
-  id: string | number;
-  [key: string]: unknown;
-}
-
-export interface MetricValue {
-  current: number;
-  previous?: number;
-  trend?: 'up' | 'down' | 'neutral';
-  target?: number;
-  formattedValue: string;
-}
-
-export interface CategoryBreakdown {
-  category: string;
-  value: number;
-  percentage: number;
-  color?: string;
-  subcategories?: CategoryBreakdown[];
-}
-
-export interface TrendDataPoint {
-  date: string;
-  value: number;
-  label?: string;
-}
-
-export interface EntityAnalyticsData {
-  metrics: Record<string, MetricValue>;
-  categories: CategoryBreakdown[];
-  trends: Record<string, TrendDataPoint[]>;
-  insights?: {
-    type: 'positive' | 'negative' | 'neutral';
-    message: string;
-    value?: number;
-  }[];
-}