@jmruthers/pace-core 0.5.54 → 0.5.55

package/docs/print-components/quick-start.md

@@ -1,363 +0,0 @@
-# Print Components Quick Start
-
-> **⚡ Get up and running with print components in 5 minutes**
-
-This guide will walk you through creating your first print-optimized document using pace-core print components.
-
-## 🚀 Installation
-
-```bash
-npm install @jmruthers/pace-core
-```
-
-## 📦 Basic Setup
-
-### 1. Import Components
-
-```tsx
-import { 
-  PrintLayout, 
-  PrintHeader, 
-  PrintDataTable, 
-  PrintText,
-  PrintButton 
-} from '@jmruthers/pace-core';
-
-// Import the core CSS file
-import '@jmruthers/pace-core/styles/core.css';
-```
-
-### 2. Create Your First Print Document
-
-```tsx
-function MyReport() {
-  const data = [
-    { id: 1, name: 'John Doe', department: 'Engineering', salary: 80000 },
-    { id: 2, name: 'Jane Smith', department: 'Marketing', salary: 75000 },
-    { id: 3, name: 'Bob Johnson', department: 'Sales', salary: 70000 },
-  ];
-
-  const columns = [
-    { key: 'name', header: 'Name', align: 'left' as const },
-    { key: 'department', header: 'Department', align: 'center' as const },
-    { key: 'salary', header: 'Salary', align: 'right' as const, render: (value: number) => `$${value.toLocaleString()}` },
-  ];
-
-  return (
-    <div>
-      {/* Print Button */}
-      <PrintButton 
-        variant="primary" 
-        printSelector=".report-content"
-        beforePrint={() => console.log('Preparing to print...')}
-        afterPrint={() => console.log('Print completed!')}
-      >
-        Print Report
-      </PrintButton>
-
-      {/* Print Content */}
-      <div className="report-content">
-        <PrintLayout orientation="portrait" pageSize="A4">
-          <PrintHeader 
-            title="Employee Report"
-            subtitle="Department Overview"
-            branding={{
-              companyName: "Your Company",
-              projectName: "HR Analytics",
-              version: "v1.0"
-            }}
-            metadata={[
-              { label: "Generated", value: new Date().toLocaleDateString() },
-              { label: "Total Employees", value: data.length.toString() }
-            ]}
-          />
-          
-          <PrintDataTable 
-            data={data}
-            columns={columns}
-            title="Employee Directory"
-            grouping={{
-              enabled: true,
-              groupBy: 'department'
-            }}
-          />
-        </PrintLayout>
-      </div>
-    </div>
-  );
-}
-```
-
-## 🎨 Advanced Layout
-
-### Cover Page + Content Pages
-
-```tsx
-function AdvancedReport() {
-  return (
-    <PrintLayout 
-      orientation="portrait" 
-      pageSize="A4"
-      firstPageHeader={
-        <PrintCoverHeader
-          title="Annual Report 2024"
-          subtitle="Financial Performance & Strategic Overview"
-          branding={{
-            logo: "/logo.png",
-            companyName: "Acme Corporation",
-            tagline: "Innovation Through Excellence"
-          }}
-          logoSize="large"
-          titleSize="xl"
-          showDivider={true}
-          backgroundColor="#f8f9fa"
-        />
-      }
-      subsequentPageHeader={
-        <PrintHeader
-          title="Annual Report 2024"
-          branding={{
-            logo: "/logo-small.png",
-            companyName: "Acme Corp"
-          }}
-        />
-      }
-    >
-      <PrintSection title="Executive Summary">
-        <PrintText variant="heading">Overview</PrintText>
-        <PrintText variant="body">
-          This report provides a comprehensive analysis of our performance...
-        </PrintText>
-      </PrintSection>
-
-      <PrintPageBreak type="before" />
-
-      <PrintSection title="Financial Performance">
-        <PrintDataTable 
-          data={financialData}
-          columns={financialColumns}
-          title="Quarterly Results"
-        />
-      </PrintSection>
-    </PrintLayout>
-  );
-}
-```
-
-## 📊 Data Tables
-
-### Basic Table
-
-```tsx
-<PrintDataTable 
-  data={data}
-  columns={columns}
-  title="Sales Data"
-/>
-```
-
-### Grouped Table
-
-```tsx
-<PrintDataTable 
-  data={data}
-  columns={columns}
-  title="Sales by Region"
-  grouping={{
-    enabled: true,
-    groupBy: 'region',
-    groupHeader: (group) => (
-      <div className="font-bold text-lg bg-gray-100 p-2">
-        {group} Region
-      </div>
-    )
-  }}
-  styling={{
-    headerStyle: 'solid',
-    rowStyle: 'striped',
-    cellPadding: 'normal'
-  }}
-/>
-```
-
-## 🎴 Card Layouts
-
-### Basic Card
-
-```tsx
-<PrintCard
-  title="Product Information"
-  subtitle="Widget Pro"
-  image={{
-    src: "/product-image.jpg",
-    alt: "Widget Pro",
-    aspectRatio: "square"
-  }}
-  metadata={[
-    { label: "Price", value: "$99.99" },
-    { label: "SKU", value: "WP-001" },
-    { label: "Stock", value: "In Stock" }
-  ]}
-  layout="vertical"
-  size="medium"
-/>
-```
-
-### Card Grid
-
-```tsx
-<PrintGrid columns={3} printColumns={2}>
-  {products.map(product => (
-    <PrintCard
-      key={product.id}
-      title={product.name}
-      subtitle={product.category}
-      image={{ src: product.image, alt: product.name }}
-      metadata={[
-        { label: "Price", value: product.price },
-        { label: "Stock", value: product.stock }
-      ]}
-    />
-  ))}
-</PrintGrid>
-```
-
-## 📝 Typography
-
-### Text Variants
-
-```tsx
-<PrintText variant="heading" weight="bold">
-  Main Heading
-</PrintText>
-
-<PrintText variant="subheading" weight="semibold">
-  Section Heading
-</PrintText>
-
-<PrintText variant="body">
-  Regular paragraph text with proper line spacing and readability.
-</PrintText>
-
-<PrintText variant="caption" color="muted">
-  Small caption text for metadata
-</PrintText>
-```
-
-## 🎯 Print Testing
-
-### 1. Browser Print Preview
-- Press `Ctrl+P` (Windows) or `Cmd+P` (Mac)
-- Use print preview to test your layout
-- Check page breaks and margins
-
-### 2. Print Optimization
-```tsx
-// Enable print optimization (default: true)
-<PrintDataTable 
-  data={data}
-  columns={columns}
-  printOptimized={true}
-/>
-
-// Disable for screen-only content
-<PrintCard printOptimized={false}>
-  Interactive content
-</PrintCard>
-```
-
-### 3. Page Breaks
-```tsx
-// Force page break before element
-<PrintPageBreak type="before" />
-
-// Force page break after element
-<PrintPageBreak type="after" />
-
-// Avoid page breaks within element
-<PrintPageBreak type="avoid" />
-```
-
-## 🔧 Common Patterns
-
-### 1. Report with Cover Page
-```tsx
-<PrintLayout 
-  firstPageHeader={<PrintCoverHeader title="Report" />}
-  subsequentPageHeader={<PrintHeader title="Report" />}
->
-  {/* Content */}
-</PrintLayout>
-```
-
-### 2. Multi-Section Document
-```tsx
-<PrintLayout>
-  <PrintSection title="Introduction">
-    <PrintText variant="body">Content...</PrintText>
-  </PrintSection>
-  
-  <PrintPageBreak type="before" />
-  
-  <PrintSection title="Data Analysis">
-    <PrintDataTable data={data} columns={columns} />
-  </PrintSection>
-</PrintLayout>
-```
-
-### 3. Card-Based Catalog
-```tsx
-<PrintGrid columns={3} printColumns={2}>
-  {items.map(item => (
-    <PrintCard
-      key={item.id}
-      title={item.name}
-      image={{ src: item.image, alt: item.name }}
-      metadata={[
-        { label: "Price", value: item.price },
-        { label: "Description", value: item.description }
-      ]}
-    />
-  ))}
-</PrintGrid>
-```
-
-## 🎨 Styling
-
-### Custom Classes
-```tsx
-<PrintCard 
-  className="custom-card-style"
-  title="Custom Styled Card"
->
-  Content
-</PrintCard>
-```
-
-### Print-Specific Styles
-```css
-/* Custom print styles */
-@media print {
-  .custom-print-style {
-    color: #000;
-    background: #fff;
-  }
-}
-```
-
-## 🚀 Next Steps
-
-1. **Explore Examples** - Check out the [Examples](./examples/) directory
-2. **Read API Reference** - See [API Reference](./api-reference.md) for complete documentation
-3. **Customize Styling** - Learn about [Customization](./customization.md)
-4. **Advanced Features** - Discover [Advanced Usage](./advanced-usage.md)
-
-## 🆘 Need Help?
-
-- **Documentation**: [Full Documentation](./README.md)
-- **Issues**: [GitHub Issues](https://github.com/jmruthers/pace-core/issues)
-- **Examples**: [Complete Examples](./examples/)
-
----
-
-**Ready for more?** Check out the [API Reference](./api-reference.md) to explore all available components and props! 🚀

package/src/components/PrintButton/PrintButton.tsx

@@ -1,321 +0,0 @@
-/**
- * @file PrintButton Component
- * @package @jmruthers/pace-core
- * @module PrintButton
- * @since 0.4.38
- * 
- * Print-optimized button component with print functionality.
- */
-
-import React, { useState } from 'react';
-import { cn } from '../../utils/cn';
-import { PrintButtonProps, PrintOptions } from './types';
-
-export function PrintButton({
-  children,
-  variant = 'primary',
-  size = 'md',
-  shape = 'default',
-  state = 'default',
-  printFunction = 'print',
-  printSelector,
-  printOptions = {},
-  onClick,
-  onPrint,
-  onPrintStart,
-  onPrintEnd,
-  showIcon = true,
-  icon,
-  iconPosition = 'left',
-  fullWidth = false,
-  printOptimized = true,
-  className,
-  ...props
-}: PrintButtonProps) {
-  const [isPrinting, setIsPrinting] = useState(false);
-
-  const getVariantClasses = (variant: string): string => {
-    switch (variant) {
-      case 'secondary':
-        return 'bg-secondary text-secondary-foreground hover:bg-secondary/80';
-      case 'outline':
-        return 'border border-input bg-background hover:bg-accent hover:text-accent-foreground';
-      case 'ghost':
-        return 'hover:bg-accent hover:text-accent-foreground';
-      case 'destructive':
-        return 'bg-destructive text-destructive-foreground hover:bg-destructive/90';
-      default:
-        return 'bg-primary text-primary-foreground hover:bg-primary/90';
-    }
-  };
-
-  const getSizeClasses = (size: string): string => {
-    switch (size) {
-      case 'sm':
-        return 'h-8 px-3 text-xs';
-      case 'lg':
-        return 'h-12 px-8 text-base';
-      case 'xl':
-        return 'h-14 px-10 text-lg';
-      default:
-        return 'h-10 px-4 text-sm';
-    }
-  };
-
-  const getShapeClasses = (shape: string): string => {
-    switch (shape) {
-      case 'rounded':
-        return 'rounded-lg';
-      case 'pill':
-        return 'rounded-full';
-      case 'square':
-        return 'rounded-none';
-      default:
-        return 'rounded-md';
-    }
-  };
-
-  const getStateClasses = (state: string): string => {
-    switch (state) {
-      case 'loading':
-        return 'opacity-50 cursor-not-allowed';
-      case 'disabled':
-        return 'opacity-50 cursor-not-allowed pointer-events-none';
-      default:
-        return 'cursor-pointer';
-    }
-  };
-
-  const getPrintOptimizedClasses = (): string => {
-    if (!printOptimized) return '';
-    return cn(
-      'print:hidden',
-      'print:opacity-0',
-      'print:pointer-events-none'
-    );
-  };
-
-  const getDefaultIcon = () => {
-    if (icon) return icon;
-    
-    switch (printFunction) {
-      case 'printSelection':
-        return '📄';
-      case 'printPage':
-        return '📃';
-      case 'printElement':
-        return '🎯';
-      default:
-        return '🖨️';
-    }
-  };
-
-  const handlePrint = async () => {
-    if (isPrinting || state === 'disabled' || state === 'loading') return;
-
-    setIsPrinting(true);
-    onPrintStart?.();
-
-    try {
-      switch (printFunction) {
-        case 'print':
-          await printDocument(printOptions);
-          break;
-        case 'printSelection':
-          if (printSelector) {
-            await printSelection(printSelector, printOptions);
-          }
-          break;
-        case 'printPage':
-          await printPage(printOptions);
-          break;
-        case 'printElement':
-          if (printSelector) {
-            await printElement(printSelector, printOptions);
-          }
-          break;
-      }
-      onPrint?.(true);
-    } catch (error) {
-      onPrint?.(false, error as Error);
-    } finally {
-      setIsPrinting(false);
-      onPrintEnd?.();
-    }
-  };
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    if (printFunction) {
-      event.preventDefault();
-      handlePrint();
-    }
-    onClick?.(event);
-  };
-
-  const isDisabled = state === 'disabled' || state === 'loading' || isPrinting;
-
-  return (
-    <button
-      type="button"
-      className={cn(
-        'print-button',
-        'inline-flex',
-        'items-center',
-        'justify-center',
-        'whitespace-nowrap',
-        'font-medium',
-        'ring-offset-background',
-        'transition-colors',
-        'focus-visible:outline-none',
-        'focus-visible:ring-2',
-        'focus-visible:ring-ring',
-        'focus-visible:ring-offset-2',
-        'disabled:pointer-events-none',
-        'disabled:opacity-50',
-        getVariantClasses(variant),
-        getSizeClasses(size),
-        getShapeClasses(shape),
-        getStateClasses(state),
-        fullWidth && 'w-full',
-        getPrintOptimizedClasses(),
-        className
-      )}
-      disabled={isDisabled}
-      onClick={handleClick}
-      {...props}
-    >
-      {showIcon && iconPosition === 'left' && (
-        <span className="mr-2">
-          {getDefaultIcon()}
-        </span>
-      )}
-      {children}
-      {showIcon && iconPosition === 'right' && (
-        <span className="ml-2">
-          {getDefaultIcon()}
-        </span>
-      )}
-    </button>
-  );
-}
-
-// Print utility functions
-async function printDocument(options: PrintOptions): Promise<void> {
-  return new Promise((resolve, reject) => {
-    try {
-      // Apply print styles if provided
-      if (options.stylesheetUrl) {
-        const link = document.createElement('link');
-        link.rel = 'stylesheet';
-        link.href = options.stylesheetUrl;
-        link.media = options.mediaQuery || 'print';
-        document.head.appendChild(link);
-      }
-
-      // Set print options
-      const printWindow = window.open('', '_blank');
-      if (!printWindow) {
-        reject(new Error('Unable to open print window'));
-        return;
-      }
-
-      printWindow.document.write(`
-        <html>
-          <head>
-            <title>${options.title || 'Print Document'}</title>
-            <style>
-              @page {
-                margin: ${options.margins?.top || '0.5in'} ${options.margins?.right || '0.5in'} ${options.margins?.bottom || '0.5in'} ${options.margins?.left || '0.5in'};
-                size: ${options.orientation === 'landscape' ? 'A4 landscape' : 'A4 portrait'};
-              }
-              body { 
-                font-family: Arial, sans-serif; 
-                line-height: 1.4;
-                color: #000;
-                background: #fff;
-              }
-              @media print {
-                * { -webkit-print-color-adjust: ${options.colorAdjust || 'exact'}; }
-              }
-            </style>
-          </head>
-          <body>
-            ${document.documentElement.outerHTML}
-          </body>
-        </html>
-      `);
-
-      printWindow.document.close();
-      printWindow.focus();
-      printWindow.print();
-      printWindow.close();
-      resolve();
-    } catch (error) {
-      reject(error);
-    }
-  });
-}
-
-async function printSelection(selector: string, options: PrintOptions): Promise<void> {
-  const element = document.querySelector(selector);
-  if (!element) {
-    throw new Error(`Element with selector "${selector}" not found`);
-  }
-  
-  return printElement(selector, options);
-}
-
-async function printPage(options: PrintOptions): Promise<void> {
-  return printDocument(options);
-}
-
-async function printElement(selector: string, options: PrintOptions): Promise<void> {
-  const element = document.querySelector(selector);
-  if (!element) {
-    throw new Error(`Element with selector "${selector}" not found`);
-  }
-
-  return new Promise((resolve, reject) => {
-    try {
-      const printWindow = window.open('', '_blank');
-      if (!printWindow) {
-        reject(new Error('Unable to open print window'));
-        return;
-      }
-
-      printWindow.document.write(`
-        <html>
-          <head>
-            <title>${options.title || 'Print Element'}</title>
-            <style>
-              @page {
-                margin: ${options.margins?.top || '0.5in'} ${options.margins?.right || '0.5in'} ${options.margins?.bottom || '0.5in'} ${options.margins?.left || '0.5in'};
-                size: ${options.orientation === 'landscape' ? 'A4 landscape' : 'A4 portrait'};
-              }
-              body { 
-                font-family: Arial, sans-serif; 
-                line-height: 1.4;
-                color: #000;
-                background: #fff;
-              }
-              @media print {
-                * { -webkit-print-color-adjust: ${options.colorAdjust || 'exact'}; }
-              }
-            </style>
-          </head>
-          <body>
-            ${element.outerHTML}
-          </body>
-        </html>
-      `);
-
-      printWindow.document.close();
-      printWindow.focus();
-      printWindow.print();
-      printWindow.close();
-      resolve();
-    } catch (error) {
-      reject(error);
-    }
-  });
-}