@jmruthers/pace-core 0.2.4

package/src/components/PrintLayout/__tests__/PrintLayout.unit.test.tsx

@@ -0,0 +1,238 @@
+/**
+ * @file PrintLayout Unit Tests
+ * @package @jmruthers/pace-core
+ * @module PrintLayout
+ * @since 0.4.38
+ * 
+ * Unit tests for PrintLayout component.
+ */
+import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
+import { userEvent } from '@testing-library/user-event';
+
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import { PrintLayout } from '../PrintLayout';
+import { renderWithProviders } from '../../../__tests__/shared';
+
+describe('PrintLayout', () => {
+  it('renders children correctly', () => {
+    renderWithProviders(
+      <PrintLayout>
+        <div data-testid="content">Test content</div>
+      </PrintLayout>
+    );
+
+    expect(screen.getByTestId('content')).toBeInTheDocument();
+  });
+
+  it('applies default props correctly', () => {
+    renderWithProviders(
+      <PrintLayout data-testid="print-layout">
+        <div>Content</div>
+      </PrintLayout>
+    );
+
+    const layout = screen.getByTestId('print-layout');
+    expect(layout).toHaveClass('print-layout', 'print-a4-portrait');
+  });
+
+  it('applies landscape orientation correctly', () => {
+    renderWithProviders(
+      <PrintLayout orientation="landscape" data-testid="print-layout">
+        <div>Content</div>
+      </PrintLayout>
+    );
+
+    const layout = screen.getByTestId('print-layout');
+    expect(layout).toHaveClass('print-a4-landscape');
+  });
+
+  it('applies custom className', () => {
+    renderWithProviders(
+      <PrintLayout className="custom-class" data-testid="print-layout">
+        <div>Content</div>
+      </PrintLayout>
+    );
+
+    const layout = screen.getByTestId('print-layout');
+    expect(layout).toHaveClass('custom-class');
+  });
+
+  it('renders first page header when provided', () => {
+    renderWithProviders(
+      <PrintLayout firstPageHeader={<div data-testid="first-header">First Page Header</div>}>
+        <div>Content</div>
+      </PrintLayout>
+    );
+
+    expect(screen.getByTestId('first-header')).toBeInTheDocument();
+    // The print-first-page-only class is applied to the wrapper div, not the inner content
+    const firstHeaderWrapper = screen.getByTestId('first-header').parentElement;
+    expect(firstHeaderWrapper).toHaveClass('print-first-page-only');
+  });
+
+  it('renders subsequent page header when provided', () => {
+    renderWithProviders(
+      <PrintLayout subsequentPageHeader={<div data-testid="subsequent-header">Subsequent Page Header</div>}>
+        <div>Content</div>
+      </PrintLayout>
+    );
+
+    expect(screen.getByTestId('subsequent-header')).toBeInTheDocument();
+    // The print-subsequent-pages-only class is applied to the wrapper div, not the inner content
+    const subsequentHeaderWrapper = screen.getByTestId('subsequent-header').parentElement;
+    expect(subsequentHeaderWrapper).toHaveClass('print-subsequent-pages-only');
+  });
+
+  it('renders both first and subsequent page headers', () => {
+    renderWithProviders(
+      <PrintLayout 
+        firstPageHeader={<div data-testid="first-header">First Page Header</div>}
+        subsequentPageHeader={<div data-testid="subsequent-header">Subsequent Page Header</div>}
+      >
+        <div>Content</div>
+      </PrintLayout>
+    );
+
+    expect(screen.getByTestId('first-header')).toBeInTheDocument();
+    expect(screen.getByTestId('subsequent-header')).toBeInTheDocument();
+  });
+
+  it('applies correct header classes when both headers are provided', () => {
+    renderWithProviders(
+      <PrintLayout 
+        firstPageHeader={<div>First Header</div>}
+        subsequentPageHeader={<div>Subsequent Header</div>}
+        data-testid="print-layout"
+      >
+        <div>Content</div>
+      </PrintLayout>
+    );
+
+    const layout = screen.getByTestId('print-layout');
+    expect(layout).toHaveClass('print-first-page-header', 'print-subsequent-header');
+  });
+
+  it('applies only first page header class when only first page header is provided', () => {
+    renderWithProviders(
+      <PrintLayout 
+        firstPageHeader={<div>First Header</div>}
+        data-testid="print-layout"
+      >
+        <div>Content</div>
+      </PrintLayout>
+    );
+
+    const layout = screen.getByTestId('print-layout');
+    expect(layout).toHaveClass('print-first-page-header');
+    expect(layout).not.toHaveClass('print-subsequent-header');
+  });
+
+  it('applies only subsequent page header class when only subsequent page header is provided', () => {
+    renderWithProviders(
+      <PrintLayout 
+        subsequentPageHeader={<div>Subsequent Header</div>}
+        data-testid="print-layout"
+      >
+        <div>Content</div>
+      </PrintLayout>
+    );
+
+    const layout = screen.getByTestId('print-layout');
+    expect(layout).toHaveClass('print-subsequent-header');
+    expect(layout).not.toHaveClass('print-first-page-header');
+  });
+describe('PrintLayout Error Handling', () => {
+  const user = userEvent.setup();
+  let restoreConsole: (() => void) | null = null;
+
+  beforeEach(() => {
+    restoreConsole = errorTestingUtils.suppressConsoleErrors();
+  });
+
+  afterEach(() => {
+    if (restoreConsole) {
+      restoreConsole();
+    }
+  });
+
+  it('should handle component errors gracefully', () => {
+    const ErrorComponent = () => {
+      throw new Error('PrintLayout component error');
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    expect(screen.getByText('Error: PrintLayout component error')).toBeInTheDocument();
+  });
+
+  it('should handle async errors', async () => {
+    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
+      const [error, setError] = React.useState<Error | null>(null);
+
+      React.useEffect(() => {
+        if (shouldFail) {
+          setError(new Error('Async error'));
+        }
+      }, [shouldFail]);
+
+      if (error) {
+        throw error;
+      }
+
+      return <div>Async component</div>;
+    };
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <AsyncErrorComponent shouldFail={true} />
+      </TestErrorBoundary>
+    );
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
+    });
+  });
+
+  it('should handle user interaction errors', async () => {
+    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
+      'PrintLayout interaction error',
+      'click'
+    );
+
+    renderWithProviders(
+      <TestErrorBoundary>
+        <ErrorComponent />
+      </TestErrorBoundary>
+    );
+
+    await user.click(screen.getByTestId('error-button'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('error-display')).toBeInTheDocument();
+    });
+  });
+
+  it('should recover from errors when props change', async () => {
+    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
+      if (shouldError) {
+        throw new Error('PrintLayout prop error');
+      }
+      return <div>Normal content</div>;
+    };
+
+    await errorTestingUtils.testErrorRecovery(
+      TestComponent,
+      { shouldError: true },
+      { shouldError: false }
+    );
+
+    expect(screen.getByText('Normal content')).toBeInTheDocument();
+  });
+});
+});

package/src/components/PrintLayout/examples/PrintShowcase.tsx

@@ -0,0 +1,230 @@
+/**
+ * @file Print Components Showcase
+ * @package @jmruthers/pace-core
+ * @module PrintLayout
+ * @since 0.4.38
+ * 
+ * Comprehensive showcase of print components with various use cases.
+ */
+
+import React from 'react';
+import { 
+  PrintLayout, 
+  PrintHeader, 
+  PrintCoverHeader, 
+  PrintText, 
+  PrintPageBreak 
+} from '../../index';
+import { Calendar, CheckCircle, User, Building } from 'lucide-react';
+
+// Sample data for demonstration
+const sampleData = [
+  { id: 1, name: 'John Doe', department: 'Engineering', salary: 75000, status: 'Active' },
+  { id: 2, name: 'Jane Smith', department: 'Marketing', salary: 65000, status: 'Active' },
+  { id: 3, name: 'Bob Johnson', department: 'Sales', salary: 70000, status: 'Inactive' },
+  { id: 4, name: 'Alice Brown', department: 'Engineering', salary: 80000, status: 'Active' },
+];
+
+export function PrintShowcase() {
+  return (
+    <div className="space-y-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold mb-4">Print Components Showcase</h1>
+        <p className="text-muted-foreground">
+          This page demonstrates the print-optimized layout components available in pace-core.
+          Use your browser's print function (Ctrl+P / Cmd+P) to see the print-optimized layouts.
+        </p>
+      </div>
+
+      {/* Basic Print Layout Example */}
+      <PrintLayout orientation="portrait" pageSize="A4">
+        <PrintHeader 
+          title="Basic Print Layout"
+          subtitle="Simple report with standard header"
+          branding={{
+            companyName: "PACE Core",
+            projectName: "Print Components Demo",
+            version: "v0.4.38"
+          }}
+          metadata={[
+            { label: "Status", value: "Complete", icon: CheckCircle },
+            { label: "Generated", value: "2024-01-15", icon: Calendar },
+            { label: "Author", value: "Development Team", icon: User }
+          ]}
+        />
+        
+        <div className="space-y-4">
+          <PrintText variant="heading">Executive Summary</PrintText>
+          <PrintText variant="body">
+            This is a demonstration of the basic print layout with a standard header. 
+            The layout is optimized for A4 portrait printing with proper margins and typography.
+          </PrintText>
+          
+          <PrintText variant="subheading">Key Features</PrintText>
+          <PrintText variant="body">
+            • Print-optimized typography and spacing
+            • Responsive header with branding
+            • Metadata display with icons
+            • Automatic print date generation
+          </PrintText>
+        </div>
+      </PrintLayout>
+
+      <PrintPageBreak type="before" />
+
+      {/* Cover Page Example */}
+      <PrintLayout 
+        orientation="portrait" 
+        pageSize="A4"
+        firstPageHeader={
+          <PrintCoverHeader
+            title="Annual Report 2024"
+            subtitle="Financial Performance & Strategic Overview"
+            branding={{
+              logo: "/pace_logo_square.svg",
+              companyName: "PACE Corporation",
+              projectName: "Annual Report",
+              version: "v2024.1",
+              tagline: "Innovation Through Excellence"
+            }}
+            logoSize="large"
+            titleSize="xl"
+            showDivider={true}
+            backgroundColor="#f8f9fa"
+            metadata={[
+              { label: "Period", value: "Jan 1 - Dec 31, 2024", icon: Calendar },
+              { label: "Prepared by", value: "Finance Team", icon: User },
+              { label: "Company", value: "PACE Corporation", icon: Building }
+            ]}
+          />
+        }
+        subsequentPageHeader={
+          <PrintHeader
+            title="Annual Report 2024"
+            branding={{
+              logo: "/pace_logo_square.svg",
+              companyName: "PACE Corp"
+            }}
+          />
+        }
+      >
+        <div className="space-y-6">
+          <PrintText variant="heading">Financial Highlights</PrintText>
+          
+          <PrintText variant="body">
+            This report demonstrates the cover page header style with enhanced branding, 
+            large logo, and professional appearance suitable for formal documents.
+          </PrintText>
+
+          <PrintText variant="subheading">Revenue Growth</PrintText>
+          <PrintText variant="body">
+            Our company has experienced significant growth in 2024, with revenue increasing 
+            by 25% compared to the previous year. This growth has been driven by strategic 
+            investments in technology and expansion into new markets.
+          </PrintText>
+
+          <PrintText variant="subheading">Strategic Initiatives</PrintText>
+          <PrintText variant="body">
+            Key strategic initiatives implemented in 2024 include:
+          </PrintText>
+          
+          <ul className="list-disc list-inside space-y-2 ml-4">
+            <li><PrintText variant="body">Digital transformation across all departments</PrintText></li>
+            <li><PrintText variant="body">Expansion into international markets</PrintText></li>
+            <li><PrintText variant="body">Investment in sustainable technologies</PrintText></li>
+            <li><PrintText variant="body">Enhanced customer experience programs</PrintText></li>
+          </ul>
+        </div>
+      </PrintLayout>
+
+      <PrintPageBreak type="before" />
+
+      {/* Landscape Layout Example */}
+      <PrintLayout orientation="landscape" pageSize="A4">
+        <PrintHeader 
+          title="Data Analysis Report"
+          subtitle="Q4 Performance Metrics"
+          branding={{
+            companyName: "PACE Analytics",
+            projectName: "Q4 Report"
+          }}
+          metadata={[
+            { label: "Period", value: "Q4 2024", icon: Calendar },
+            { label: "Status", value: "Final", icon: CheckCircle }
+          ]}
+        />
+        
+        <div className="space-y-4">
+          <PrintText variant="heading">Performance Summary</PrintText>
+          
+          <div className="grid grid-cols-2 gap-8">
+            <div>
+              <PrintText variant="subheading">Revenue Metrics</PrintText>
+              <PrintText variant="body">
+                • Total Revenue: $2.5M (+15% YoY)
+                • Gross Margin: 68%
+                • Net Profit: $450K
+              </PrintText>
+            </div>
+            
+            <div>
+              <PrintText variant="subheading">Operational Metrics</PrintText>
+              <PrintText variant="body">
+                • Customer Acquisition: 1,250 (+22% YoY)
+                • Customer Retention: 94%
+                • Average Deal Size: $2,000
+              </PrintText>
+            </div>
+          </div>
+
+          <PrintText variant="subheading">Key Insights</PrintText>
+          <PrintText variant="body">
+            The landscape layout is ideal for data-heavy reports and tables. 
+            It provides more horizontal space for presenting information in columns 
+            and makes better use of the available print area.
+          </PrintText>
+        </div>
+      </PrintLayout>
+
+      <PrintPageBreak type="before" />
+
+      {/* Typography Showcase */}
+      <PrintLayout orientation="portrait" pageSize="A4">
+        <PrintHeader 
+          title="Typography Showcase"
+          subtitle="Print-optimized text styles and formatting"
+        />
+        
+        <div className="space-y-6">
+          <PrintText variant="heading">Heading Styles</PrintText>
+          
+          <div className="space-y-4">
+            <PrintText variant="heading" weight="bold">Main Heading (Bold)</PrintText>
+            <PrintText variant="subheading" weight="semibold">Subheading (Semibold)</PrintText>
+            <PrintText variant="body" weight="medium">Body Text (Medium)</PrintText>
+            <PrintText variant="caption" color="muted">Caption Text (Muted)</PrintText>
+            <PrintText variant="small" color="muted">Small Text (Muted)</PrintText>
+          </div>
+
+          <PrintText variant="subheading">Color Variations</PrintText>
+          
+          <div className="space-y-2">
+            <PrintText variant="body" color="primary">Primary Color Text</PrintText>
+            <PrintText variant="body" color="secondary">Secondary Color Text</PrintText>
+            <PrintText variant="body" color="muted">Muted Color Text</PrintText>
+            <PrintText variant="body" color="accent">Accent Color Text</PrintText>
+          </div>
+
+          <PrintText variant="subheading">Weight Variations</PrintText>
+          
+          <div className="space-y-2">
+            <PrintText variant="body" weight="normal">Normal Weight</PrintText>
+            <PrintText variant="body" weight="medium">Medium Weight</PrintText>
+            <PrintText variant="body" weight="semibold">Semibold Weight</PrintText>
+            <PrintText variant="body" weight="bold">Bold Weight</PrintText>
+          </div>
+        </div>
+      </PrintLayout>
+    </div>
+  );
+}

package/src/components/PrintLayout/index.ts

@@ -0,0 +1,19 @@
+/**
+ * @file PrintLayout Component Exports
+ * @package @jmruthers/pace-core
+ * @module PrintLayout
+ * @since 0.4.38
+ * 
+ * Exports for PrintLayout component and related utilities.
+ */
+
+export { PrintLayout } from './PrintLayout';
+export { PrintPageBreak } from './PrintPageBreak';
+export { PrintLayoutProvider, usePrintLayout } from './PrintLayoutContext';
+export type { 
+  PrintLayoutProps, 
+  PrintLayoutContextType, 
+  PrintPageBreakProps,
+  PageSize,
+  Orientation 
+} from './types';

package/src/components/PrintLayout/types.ts

@@ -0,0 +1,37 @@
+/**
+ * @file PrintLayout Types
+ * @package @jmruthers/pace-core
+ * @module PrintLayout
+ * @since 0.4.38
+ * 
+ * Type definitions for PrintLayout component and related utilities.
+ */
+
+import { ReactNode } from 'react';
+
+export type PageSize = 'A4' | 'A3' | 'A5';
+export type Orientation = 'portrait' | 'landscape';
+
+export interface PrintLayoutProps {
+  children: ReactNode;
+  orientation?: Orientation;
+  pageSize?: PageSize;
+  showHeader?: boolean;
+  showFooter?: boolean;
+  firstPageHeader?: ReactNode;
+  subsequentPageHeader?: ReactNode;
+  className?: string;
+}
+
+export interface PrintLayoutContextType {
+  isFirstPage: boolean;
+  pageSize: PageSize;
+  orientation: Orientation;
+  hasFirstPageHeader: boolean;
+  hasSubsequentPageHeader: boolean;
+}
+
+export interface PrintPageBreakProps {
+  type?: 'before' | 'after' | 'avoid';
+  className?: string;
+}

package/src/components/PrintPageBreak/PrintPageBreak.tsx

@@ -0,0 +1,120 @@
+/**
+ * @file PrintPageBreak Component
+ * @package @jmruthers/pace-core
+ * @module PrintPageBreak
+ * @since 0.4.38
+ * 
+ * Enhanced print page break component with visual indicators and controls.
+ */
+
+import React, { ReactNode } from 'react';
+import { cn } from '../../utils/cn';
+import { PrintText } from '../PrintText';
+import { PrintPageBreakIndicator } from './PrintPageBreakIndicator';
+import { PrintPageBreakProps } from './types';
+
+export function PrintPageBreak({
+  type = 'auto',
+  strength = 'normal',
+  showIndicator = false,
+  indicator,
+  label,
+  description,
+  printOptimized = true,
+  className,
+  ...props
+}: PrintPageBreakProps) {
+  const getBreakClass = (): string => {
+    const baseClass = 'print-page-break';
+    
+    switch (type) {
+      case 'before':
+        return cn(baseClass, 'print-break-before');
+      case 'after':
+        return cn(baseClass, 'print-break-after');
+      case 'avoid':
+        return cn(baseClass, 'print-break-avoid');
+      case 'always':
+        return cn(baseClass, 'print-break-before print-break-after');
+      case 'left':
+        return cn(baseClass, 'print-break-before', 'print:page-break-before:left');
+      case 'right':
+        return cn(baseClass, 'print-break-before', 'print:page-break-before:right');
+      default:
+        return baseClass;
+    }
+  };
+
+  const getStrengthClass = (): string => {
+    switch (strength) {
+      case 'weak':
+        return 'print:page-break-inside:avoid';
+      case 'strong':
+        return 'print:page-break-inside:avoid print:break-inside-avoid';
+      default:
+        return '';
+    }
+  };
+
+  const getPrintOptimizedClasses = (): string => {
+    if (!printOptimized) return '';
+    return cn(
+      'print:break-inside-avoid',
+      'print:mb-4'
+    );
+  };
+
+  const renderIndicator = (): ReactNode => {
+    if (!showIndicator) return null;
+    
+    if (indicator) {
+      return indicator;
+    }
+    
+    return (
+      <PrintPageBreakIndicator
+        type="line"
+        color="muted"
+        size="md"
+        printOptimized={printOptimized}
+      />
+    );
+  };
+
+  const renderLabel = (): ReactNode => {
+    if (!label) return null;
+    
+    return (
+      <PrintText variant="small" color="muted" className="text-center">
+        {label}
+      </PrintText>
+    );
+  };
+
+  const renderDescription = (): ReactNode => {
+    if (!description) return null;
+    
+    return (
+      <PrintText variant="small" color="muted" className="text-center mt-1">
+        {description}
+      </PrintText>
+    );
+  };
+
+  return (
+    <div
+      className={cn(
+        getBreakClass(),
+        getStrengthClass(),
+        getPrintOptimizedClasses(),
+        className
+      )}
+      aria-hidden="true"
+      {...props}
+    >
+      {renderIndicator()}
+      {renderLabel()}
+      {renderDescription()}
+    </div>
+  );
+}