@jmruthers/pace-core 0.2.4

package/src/components/PrintCard/examples/PrintCardShowcase.tsx

@@ -0,0 +1,239 @@
+/**
+ * @file PrintCard Showcase Example
+ * @package @jmruthers/pace-core
+ * @module PrintCardShowcase
+ * @since 0.4.38
+ * 
+ * Example showcasing PrintCard components usage.
+ */
+
+import React from 'react';
+import { 
+  PrintLayout,
+  PrintHeader,
+  PrintText,
+  PrintCard, 
+  PrintCardHeader, 
+  PrintCardContent, 
+  PrintCardFooter, 
+  PrintCardImage, 
+  PrintCardGrid 
+} from '../../index';
+
+export function PrintCardShowcase() {
+  return (
+    <PrintLayout
+      orientation="portrait"
+      pageSize="A4"
+      firstPageHeader={
+        <PrintHeader
+          title="Print Card Components Showcase"
+          subtitle="Demonstrating various card layouts and configurations"
+          branding={{
+            logo: "/pace_logo_square.svg",
+            companyName: "Pace Core"
+          }}
+          metadata={[
+            { label: 'Date', value: new Date().toLocaleDateString() },
+            { label: 'Page', value: "1" }
+          ]}
+        />
+      }
+    >
+      <div className="space-y-8">
+        {/* Basic Card Examples */}
+        <section>
+          <PrintText variant="heading" className="mb-4">
+            Basic Card Examples
+          </PrintText>
+          
+          <PrintCardGrid columns={2} gap="md">
+            <PrintCard title="Default Card" variant="default">
+              <PrintCardContent>
+                <PrintText>
+                  This is a default card with standard styling and padding.
+                </PrintText>
+              </PrintCardContent>
+            </PrintCard>
+
+            <PrintCard title="Outlined Card" variant="outlined">
+              <PrintCardContent>
+                <PrintText>
+                  This card uses the outlined variant with a border and transparent background.
+                </PrintText>
+              </PrintCardContent>
+            </PrintCard>
+
+            <PrintCard title="Filled Card" variant="filled" backgroundColor="gray">
+              <PrintCardContent>
+                <PrintText>
+                  This card uses the filled variant with a muted background.
+                </PrintText>
+              </PrintCardContent>
+            </PrintCard>
+
+            <PrintCard title="Elevated Card" variant="elevated">
+              <PrintCardContent>
+                <PrintText>
+                  This card uses the elevated variant with a shadow effect.
+                </PrintText>
+              </PrintCardContent>
+            </PrintCard>
+          </PrintCardGrid>
+        </section>
+
+        {/* Card with Image */}
+        <section>
+          <PrintText variant="heading" className="mb-4">
+            Card with Image
+          </PrintText>
+          
+          <PrintCardGrid columns={2} gap="md">
+            <PrintCard title="Product Card" layout="vertical">
+              <PrintCardImage
+                src="/pace_logo_square.svg"
+                alt="Product Image"
+                aspectRatio="square"
+                objectFit="contain"
+              />
+              <PrintCardContent>
+                <PrintText variant="subheading" weight="semibold">
+                  Premium Product
+                </PrintText>
+                <PrintText variant="caption" color="muted">
+                  High-quality item with excellent features
+                </PrintText>
+                <PrintText className="mt-2">
+                  $99.99
+                </PrintText>
+              </PrintCardContent>
+            </PrintCard>
+
+            <PrintCard title="Profile Card" layout="horizontal">
+              <PrintCardImage
+                src="/pace_logo_square.svg"
+                alt="Profile Picture"
+                aspectRatio="square"
+                width="80"
+                height="80"
+              />
+              <PrintCardContent>
+                <PrintText variant="subheading" weight="semibold">
+                  John Doe
+                </PrintText>
+                <PrintText variant="caption" color="muted">
+                  Software Engineer
+                </PrintText>
+                <PrintText className="mt-2">
+                  john.doe@example.com
+                </PrintText>
+              </PrintCardContent>
+            </PrintCard>
+          </PrintCardGrid>
+        </section>
+
+        {/* Card with Header and Footer */}
+        <section>
+          <PrintText variant="heading" className="mb-4">
+            Card with Header and Footer
+          </PrintText>
+          
+          <PrintCardGrid columns={1} gap="md">
+            <PrintCard>
+              <PrintCardHeader
+                title="Project Status"
+                subtitle="Current project progress and updates"
+                actions={<PrintText variant="caption">Last updated: Today</PrintText>}
+              >
+                <PrintText variant="heading">Project Status</PrintText>
+              </PrintCardHeader>
+              <PrintCardContent>
+                <PrintText>
+                  The project is progressing well with all major milestones completed on time.
+                  The team has been working diligently to ensure quality deliverables.
+                </PrintText>
+                <PrintText className="mt-2">
+                  <strong>Next Steps:</strong> Final testing and deployment preparation.
+                </PrintText>
+              </PrintCardContent>
+              <PrintCardFooter align="right">
+                <PrintText variant="caption" color="muted">
+                  Project Manager: Jane Smith
+                </PrintText>
+              </PrintCardFooter>
+            </PrintCard>
+          </PrintCardGrid>
+        </section>
+
+        {/* Compact Cards */}
+        <section>
+          <PrintText variant="heading" className="mb-4">
+            Compact Cards
+          </PrintText>
+          
+          <PrintCardGrid columns={3} gap="sm">
+            <PrintCard layout="compact" size="sm" variant="outlined">
+              <PrintText variant="small" weight="semibold">
+                Quick Stats
+              </PrintText>
+              <PrintText variant="small">
+                1,234 items
+              </PrintText>
+            </PrintCard>
+
+            <PrintCard layout="compact" size="sm" variant="outlined">
+              <PrintText variant="small" weight="semibold">
+                Status
+              </PrintText>
+              <PrintText variant="small" color="accent">
+                Active
+              </PrintText>
+            </PrintCard>
+
+            <PrintCard layout="compact" size="sm" variant="outlined">
+              <PrintText variant="small" weight="semibold">
+                Priority
+              </PrintText>
+              <PrintText variant="small" color="primary">
+                High
+              </PrintText>
+            </PrintCard>
+          </PrintCardGrid>
+        </section>
+
+        {/* Color Variations */}
+        <section>
+          <PrintText variant="heading" className="mb-4">
+            Color Variations
+          </PrintText>
+          
+          <PrintCardGrid columns={2} gap="md">
+            <PrintCard 
+              backgroundColor="primary" 
+              textColor="primary"
+              title="Primary Card"
+            >
+              <PrintCardContent>
+                <PrintText>
+                  This card uses the primary color scheme.
+                </PrintText>
+              </PrintCardContent>
+            </PrintCard>
+
+            <PrintCard 
+              backgroundColor="accent" 
+              textColor="accent"
+              title="Accent Card"
+            >
+              <PrintCardContent>
+                <PrintText>
+                  This card uses the accent color scheme.
+                </PrintText>
+              </PrintCardContent>
+            </PrintCard>
+          </PrintCardGrid>
+        </section>
+      </div>
+    </PrintLayout>
+  );
+}

package/src/components/PrintCard/index.ts

@@ -0,0 +1,34 @@
+/**
+ * @file PrintCard Exports
+ * @package @jmruthers/pace-core
+ * @module PrintCard
+ * @since 0.4.38
+ * 
+ * Exports for PrintCard components.
+ */
+
+export { PrintCard } from './PrintCard';
+export { PrintCardHeader } from './PrintCardHeader';
+export { PrintCardContent } from './PrintCardContent';
+export { PrintCardFooter } from './PrintCardFooter';
+export { PrintCardImage } from './PrintCardImage';
+export { PrintCardGrid } from './PrintCardGrid';
+
+export type {
+  PrintCardProps,
+  PrintCardHeaderProps,
+  PrintCardContentProps,
+  PrintCardFooterProps,
+  PrintCardImageProps,
+  PrintCardGridProps,
+  PrintCardVariant,
+  PrintCardSize,
+  PrintCardLayout,
+  PrintCardBackgroundColor,
+  PrintCardTextColor,
+  PrintCardAlignment,
+  PrintCardPadding,
+  PrintCardAspectRatio,
+  PrintCardObjectFit,
+  PrintCardGap,
+} from './types';

package/src/components/PrintCard/types.ts

@@ -0,0 +1,171 @@
+/**
+ * @file PrintCard Types
+ * @package @jmruthers/pace-core
+ * @module PrintCard
+ * @since 0.4.38
+ * 
+ * Type definitions for PrintCard component.
+ */
+
+import { ReactNode } from 'react';
+
+export interface PrintCardProps {
+  /** Card content */
+  children: ReactNode;
+  
+  /** Card title */
+  title?: string;
+  
+  /** Card subtitle */
+  subtitle?: string;
+  
+  /** Card variant */
+  variant?: 'default' | 'outlined' | 'filled' | 'elevated';
+  
+  /** Card size */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  
+  /** Card layout */
+  layout?: 'vertical' | 'horizontal' | 'compact';
+  
+  /** Show card border */
+  showBorder?: boolean;
+  
+  /** Card background color */
+  backgroundColor?: 'white' | 'gray' | 'primary' | 'secondary' | 'accent';
+  
+  /** Card text color */
+  textColor?: 'primary' | 'secondary' | 'muted' | 'accent' | 'destructive';
+  
+  /** Print optimization */
+  printOptimized?: boolean;
+  
+  /** Custom CSS classes */
+  className?: string;
+  
+  /** Additional props */
+  [key: string]: any;
+}
+
+export interface PrintCardHeaderProps {
+  /** Header content */
+  children: ReactNode;
+  
+  /** Header title */
+  title?: string;
+  
+  /** Header subtitle */
+  subtitle?: string;
+  
+  /** Header actions */
+  actions?: ReactNode;
+  
+  /** Header alignment */
+  align?: 'left' | 'center' | 'right';
+  
+  /** Print optimization */
+  printOptimized?: boolean;
+  
+  /** Custom CSS classes */
+  className?: string;
+  
+  /** Additional props */
+  [key: string]: any;
+}
+
+export interface PrintCardContentProps {
+  /** Content */
+  children: ReactNode;
+  
+  /** Content padding */
+  padding?: 'none' | 'sm' | 'md' | 'lg';
+  
+  /** Print optimization */
+  printOptimized?: boolean;
+  
+  /** Custom CSS classes */
+  className?: string;
+  
+  /** Additional props */
+  [key: string]: any;
+}
+
+export interface PrintCardFooterProps {
+  /** Footer content */
+  children: ReactNode;
+  
+  /** Footer alignment */
+  align?: 'left' | 'center' | 'right';
+  
+  /** Print optimization */
+  printOptimized?: boolean;
+  
+  /** Custom CSS classes */
+  className?: string;
+  
+  /** Additional props */
+  [key: string]: any;
+}
+
+export interface PrintCardImageProps {
+  /** Image source */
+  src: string;
+  
+  /** Image alt text */
+  alt: string;
+  
+  /** Image width */
+  width?: string | number;
+  
+  /** Image height */
+  height?: string | number;
+  
+  /** Image aspect ratio */
+  aspectRatio?: 'square' | 'portrait' | 'landscape' | 'auto';
+  
+  /** Image object fit */
+  objectFit?: 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+  
+  /** Print optimization */
+  printOptimized?: boolean;
+  
+  /** Custom CSS classes */
+  className?: string;
+  
+  /** Additional props */
+  [key: string]: any;
+}
+
+export interface PrintCardGridProps {
+  /** Grid items */
+  children: ReactNode;
+  
+  /** Number of columns */
+  columns?: 1 | 2 | 3 | 4 | 5 | 6;
+  
+  /** Column gap */
+  gap?: 'sm' | 'md' | 'lg' | 'xl';
+  
+  /** Row gap */
+  rowGap?: 'sm' | 'md' | 'lg' | 'xl';
+  
+  /** Print optimization */
+  printOptimized?: boolean;
+  
+  /** Custom CSS classes */
+  className?: string;
+  
+  /** Additional props */
+  [key: string]: any;
+}
+
+export type PrintCardVariant = 'default' | 'outlined' | 'filled' | 'elevated';
+export type PrintCardSize = 'sm' | 'md' | 'lg' | 'xl';
+export type PrintCardLayout = 'vertical' | 'horizontal' | 'compact';
+export type PrintCardBackgroundColor = 'white' | 'gray' | 'primary' | 'secondary' | 'accent';
+export type PrintCardTextColor = 'primary' | 'secondary' | 'muted' | 'accent' | 'destructive';
+export type PrintCardAlignment = 'left' | 'center' | 'right';
+export type PrintCardPadding = 'none' | 'sm' | 'md' | 'lg';
+export type PrintCardAspectRatio = 'square' | 'portrait' | 'landscape' | 'auto';
+export type PrintCardObjectFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+export type PrintCardGap = 'sm' | 'md' | 'lg' | 'xl';

package/src/components/PrintDataTable/PrintDataTable.tsx

@@ -0,0 +1,215 @@
+/**
+ * @file PrintDataTable Component
+ * @package @jmruthers/pace-core
+ * @module PrintDataTable
+ * @since 0.4.38
+ * 
+ * Print-optimized data table component with grouping and styling options.
+ * 
+ * Features:
+ * - Print-optimized table rendering
+ * - Column grouping with custom headers
+ * - Page break controls per column
+ * - Print-specific styling options
+ * - Integration with existing theme system
+ * 
+ * @example
+ * ```tsx
+ * <PrintDataTable
+ *   data={reportData}
+ *   columns={columns}
+ *   title="Analytics Summary"
+ *   grouping={{
+ *     enabled: true,
+ *     groupBy: 'category',
+ *     groupHeader: (group) => <CategoryGroupHeader group={group} />
+ *   }}
+ *   printOptimized={true}
+ * />
+ * ```
+ */
+
+import React from 'react';
+import { cn } from '../../utils/cn';
+import { PrintText } from '../PrintText';
+import { PrintTableGroup } from './PrintTableGroup';
+import type { PrintDataTableProps, PrintColumn } from './types';
+
+/**
+ * PrintDataTable component provides print-optimized table rendering with grouping support.
+ */
+export function PrintDataTable({
+  data,
+  columns,
+  title,
+  showTitle = true,
+  grouping,
+  styling = {
+    headerStyle: 'solid',
+    rowStyle: 'striped',
+    cellPadding: 'normal'
+  },
+  printOptimized = true,
+  className,
+  ...props
+}: PrintDataTableProps) {
+  const getTableClasses = () => {
+    const baseClasses = 'w-full border-collapse';
+    
+    if (printOptimized) {
+      return cn(
+        baseClasses,
+        'print:text-xs print:leading-tight',
+        'print:border-black print:border-solid'
+      );
+    }
+    
+    return baseClasses;
+  };
+
+  const getHeaderClasses = () => {
+    const baseClasses = 'text-left font-semibold';
+    
+    switch (styling.headerStyle) {
+      case 'solid':
+        return cn(baseClasses, 'bg-primary text-primary-foreground');
+      case 'outline':
+        return cn(baseClasses, 'border-2 border-primary text-primary');
+      default:
+        return baseClasses;
+    }
+  };
+
+  const getRowClasses = (isEven: boolean) => {
+    const baseClasses = 'border-b border-border';
+    
+    switch (styling.rowStyle) {
+      case 'striped':
+        return cn(baseClasses, isEven ? 'bg-muted/30' : 'bg-background');
+      case 'solid':
+        return cn(baseClasses, 'bg-background');
+      case 'bordered':
+        return cn(baseClasses, 'border border-border bg-background');
+      default:
+        return baseClasses;
+    }
+  };
+
+  const getCellPaddingClasses = () => {
+    switch (styling.cellPadding) {
+      case 'compact':
+        return 'px-2 py-1 print:px-1 print:py-0.5';
+      case 'spacious':
+        return 'px-6 py-4 print:px-4 print:py-2';
+      case 'normal':
+      default:
+        return 'px-4 py-2 print:px-2 print:py-1';
+    }
+  };
+
+  const renderTableHeader = () => (
+    <thead>
+      <tr className={getHeaderClasses()}>
+        {columns.map((column) => (
+          <th
+            key={column.key}
+            className={cn(
+              getCellPaddingClasses(),
+              'text-left',
+              column.align === 'center' && 'text-center',
+              column.align === 'right' && 'text-right',
+              column.printBreak === 'avoid' && 'print-break-avoid',
+              column.printBreak === 'always' && 'print-break-before'
+            )}
+            style={{ width: column.width }}
+          >
+            <PrintText variant="small" weight="semibold">
+              {column.header}
+            </PrintText>
+          </th>
+        ))}
+      </tr>
+    </thead>
+  );
+
+  const renderTableBody = () => {
+    if (grouping?.enabled) {
+      const groupedData = groupDataByField(data, grouping.groupBy);
+      
+      return (
+        <tbody>
+          {Object.entries(groupedData).map(([groupKey, groupData], groupIndex) => (
+            <PrintTableGroup
+              key={groupKey}
+              groupKey={groupKey}
+              groupData={groupData}
+              columns={columns}
+              groupHeader={grouping.groupHeader}
+              styling={styling}
+              printOptimized={printOptimized}
+            />
+          ))}
+        </tbody>
+      );
+    }
+
+    return (
+      <tbody>
+        {data.map((row, index) => (
+          <tr
+            key={index}
+            className={getRowClasses(index % 2 === 0)}
+          >
+            {columns.map((column) => (
+              <td
+                key={column.key}
+                className={cn(
+                  getCellPaddingClasses(),
+                  'text-left',
+                  column.align === 'center' && 'text-center',
+                  column.align === 'right' && 'text-right',
+                  column.printBreak === 'avoid' && 'print-break-avoid'
+                )}
+              >
+                <PrintText variant="small">
+                  {column.render ? column.render(row[column.key], row) : row[column.key]}
+                </PrintText>
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    );
+  };
+
+  return (
+    <div className={cn('print-data-table', className)} {...props}>
+      {title && showTitle && (
+        <div className="mb-4">
+          <PrintText variant="subheading" weight="semibold">
+            {title}
+          </PrintText>
+        </div>
+      )}
+      
+      <div className="overflow-x-auto print:overflow-visible">
+        <table className={getTableClasses()}>
+          {renderTableHeader()}
+          {renderTableBody()}
+        </table>
+      </div>
+    </div>
+  );
+}
+
+// Helper function to group data by field
+function groupDataByField(data: any[], field: string): Record<string, any[]> {
+  return data.reduce((groups, item) => {
+    const key = item[field] || 'Unknown';
+    if (!groups[key]) {
+      groups[key] = [];
+    }
+    groups[key].push(item);
+    return groups;
+  }, {} as Record<string, any[]>);
+}