@jmruthers/pace-core 0.5.54 → 0.5.55

package/src/components/PrintHeader/PrintCoverHeader.tsx

@@ -1,230 +0,0 @@
-/**
- * @file PrintCoverHeader Component
- * @package @jmruthers/pace-core
- * @module PrintHeader
- * @since 0.4.38
- * 
- * Cover-style print header component for first pages with enhanced branding.
- * 
- * Features:
- * - Cover-style header design
- * - Large logo and title support
- * - Background image/color customization
- * - Professional first page appearance
- * - Flexible branding integration
- * 
- * @example
- * ```tsx
- * <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"
- *   metadata={[
- *     { label: "Period", value: "Jan 1 - Dec 31, 2024", icon: CalendarIcon },
- *     { label: "Prepared by", value: "Finance Team", icon: UserIcon }
- *   ]}
- * />
- * ```
- */
-
-import React from 'react';
-import { cn } from '../../utils/cn';
-import { PrintText } from '../PrintText';
-import type { PrintCoverHeaderProps } from './types';
-
-/**
- * PrintCoverHeader component provides a cover-style header design for first pages.
- */
-export function PrintCoverHeader({
-  title,
-  subtitle,
-  branding,
-  metadata = [],
-  printDate = true,
-  coverStyle = true,
-  logoSize = 'medium',
-  titleSize = 'large',
-  showDivider = false,
-  backgroundImage,
-  backgroundColor,
-  className,
-}: PrintCoverHeaderProps) {
-  const formatPrintDate = () => {
-    return new Date().toLocaleDateString('en-AU', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-
-  const getLogoSizeClasses = (size: 'small' | 'medium' | 'large') => {
-    switch (size) {
-      case 'small':
-        return 'h-16 w-auto print:h-12';
-      case 'medium':
-        return 'h-24 w-auto print:h-20';
-      case 'large':
-        return 'h-32 w-auto print:h-24';
-      default:
-        return 'h-24 w-auto print:h-20';
-    }
-  };
-
-  const getTitleSizeClasses = (size: 'small' | 'medium' | 'large' | 'xl') => {
-    switch (size) {
-      case 'small':
-        return 'text-3xl print:text-2xl';
-      case 'medium':
-        return 'text-4xl print:text-3xl';
-      case 'large':
-        return 'text-5xl print:text-4xl';
-      case 'xl':
-        return 'text-6xl print:text-5xl';
-      default:
-        return 'text-4xl print:text-3xl';
-    }
-  };
-
-  const getBackgroundStyle = () => {
-    const style: React.CSSProperties = {};
-    
-    if (backgroundImage) {
-      style.backgroundImage = `url(${backgroundImage})`;
-      style.backgroundSize = 'cover';
-      style.backgroundPosition = 'center';
-      style.backgroundRepeat = 'no-repeat';
-    }
-    
-    if (backgroundColor) {
-      style.backgroundColor = backgroundColor;
-    }
-    
-    return style;
-  };
-
-  const renderBranding = () => {
-    if (!branding) return null;
-    
-    const { logo, companyName, projectName, version, tagline } = branding;
-    
-    return (
-      <div className="flex flex-col items-center text-center mb-8">
-        {logo && (
-          <img 
-            src={logo} 
-            alt={companyName || 'Company Logo'} 
-            className={cn(
-              getLogoSizeClasses(logoSize),
-              'mb-4'
-            )}
-          />
-        )}
-        
-        {companyName && (
-          <PrintText variant="subheading" weight="semibold" className="mb-2">
-            {companyName}
-          </PrintText>
-        )}
-        
-        {projectName && (
-          <PrintText variant="body" color="muted" className="mb-2">
-            {projectName}
-          </PrintText>
-        )}
-        
-        {version && (
-          <PrintText variant="small" color="muted" className="mb-2">
-            {version}
-          </PrintText>
-        )}
-        
-        {tagline && (
-          <PrintText variant="small" color="muted" className="italic">
-            {tagline}
-          </PrintText>
-        )}
-      </div>
-    );
-  };
-
-  const renderMetadata = () => {
-    if (metadata.length === 0) return null;
-
-    return (
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mb-8">
-        {metadata.map((item, index) => (
-          <div key={index} className="flex items-center space-x-3">
-            {item.icon && (
-              <item.icon className="h-5 w-5 text-muted-foreground print:h-4 print:w-4" />
-            )}
-            <div>
-              <PrintText variant="small" color="muted" className="block">
-                {item.label}
-              </PrintText>
-              <PrintText variant="body" weight="medium" className="block">
-                {item.value}
-              </PrintText>
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  };
-
-  return (
-    <header 
-      className={cn(
-        'print-cover-header min-h-[400px] flex flex-col justify-center px-8 py-12',
-        'print:min-h-[300px] print:px-6 print:py-8',
-        className
-      )}
-      style={getBackgroundStyle()}
-    >
-      {/* Branding */}
-      {renderBranding()}
-      
-      {/* Title and Subtitle */}
-      <div className="text-center mb-8">
-        <PrintText 
-          variant="heading" 
-          className={cn(
-            'mb-4',
-            getTitleSizeClasses(titleSize)
-          )}
-        >
-          {title}
-        </PrintText>
-        {subtitle && (
-          <PrintText variant="subheading" color="muted" className="max-w-3xl mx-auto">
-            {subtitle}
-          </PrintText>
-        )}
-      </div>
-      
-      {/* Divider */}
-      {showDivider && (
-        <div className="w-24 h-1 bg-primary mx-auto mb-8" />
-      )}
-      
-      {/* Metadata */}
-      {renderMetadata()}
-      
-      {/* Print Date */}
-      {printDate && (
-        <div className="flex justify-center mt-auto">
-          <PrintText variant="small" color="muted">
-            Printed on {formatPrintDate()}
-          </PrintText>
-        </div>
-      )}
-    </header>
-  );
-}

package/src/components/PrintHeader/PrintHeader.tsx

@@ -1,150 +0,0 @@
-/**
- * @file PrintHeader Component
- * @package @jmruthers/pace-core
- * @module PrintHeader
- * @since 0.4.38
- * 
- * Flexible print header component with branding and metadata display.
- * 
- * Features:
- * - Flexible branding integration
- * - Metadata display with icons
- * - Print date automation
- * - Responsive layout for screen/print
- * - Integration with existing theme system
- * 
- * @example
- * ```tsx
- * <PrintHeader 
- *   title="Data Report"
- *   subtitle="Q4 Analytics"
- *   branding={{
- *     companyName: "Acme Corp",
- *     projectName: "Q4 Analytics",
- *     version: "v1.2"
- *   }}
- *   metadata={[
- *     { label: "Status", value: "Complete", icon: CheckIcon },
- *     { label: "Generated", value: "2024-01-15", icon: CalendarIcon }
- *   ]}
- * />
- * ```
- */
-
-import React from 'react';
-import { cn } from '../../utils/cn';
-import { PrintText } from '../PrintText';
-import type { PrintHeaderProps, PrintBranding, PrintMetadata } from './types';
-
-/**
- * PrintHeader component provides flexible branding and metadata display for print layouts.
- */
-export function PrintHeader({
-  title,
-  subtitle,
-  branding,
-  metadata = [],
-  printDate = true,
-  className,
-}: PrintHeaderProps) {
-  const formatPrintDate = () => {
-    return new Date().toLocaleDateString('en-AU', {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
-  };
-
-  const renderBranding = (branding: PrintBranding) => {
-    const { logo, companyName, projectName, version, tagline } = branding;
-    
-    return (
-      <div className="flex items-center space-x-4 mb-4">
-        {logo && (
-          <img 
-            src={logo} 
-            alt={companyName || 'Company Logo'} 
-            className="h-8 w-auto print:h-6"
-          />
-        )}
-        <div className="flex-1">
-          {companyName && (
-            <PrintText variant="subheading" weight="semibold" className="mb-1">
-              {companyName}
-            </PrintText>
-          )}
-          {projectName && (
-            <PrintText variant="body" color="muted" className="mb-1">
-              {projectName}
-            </PrintText>
-          )}
-          {version && (
-            <PrintText variant="small" color="muted">
-              {version}
-            </PrintText>
-          )}
-          {tagline && (
-            <PrintText variant="small" color="muted" className="italic">
-              {tagline}
-            </PrintText>
-          )}
-        </div>
-      </div>
-    );
-  };
-
-  const renderMetadata = (metadata: PrintMetadata[]) => {
-    if (metadata.length === 0) return null;
-
-    return (
-      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
-        {metadata.map((item, index) => (
-          <div key={index} className="flex items-center space-x-2">
-            {item.icon && (
-              <item.icon className="h-4 w-4 text-muted-foreground print:h-3 print:w-3" />
-            )}
-            <div>
-              <PrintText variant="small" color="muted" className="block">
-                {item.label}
-              </PrintText>
-              <PrintText variant="body" weight="medium" className="block">
-                {item.value}
-              </PrintText>
-            </div>
-          </div>
-        ))}
-      </div>
-    );
-  };
-
-  return (
-    <header className={cn('print-header border-b border-border pb-4 mb-6', className)}>
-      {/* Branding */}
-      {branding && renderBranding(branding)}
-      
-      {/* Title and Subtitle */}
-      <div className="mb-4">
-        <PrintText variant="heading" className="mb-2">
-          {title}
-        </PrintText>
-        {subtitle && (
-          <PrintText variant="subheading" color="muted">
-            {subtitle}
-          </PrintText>
-        )}
-      </div>
-      
-      {/* Metadata */}
-      {metadata.length > 0 && renderMetadata(metadata)}
-      
-      {/* Print Date */}
-      {printDate && (
-        <div className="flex justify-end">
-          <PrintText variant="small" color="muted">
-            Printed on {formatPrintDate()}
-          </PrintText>
-        </div>
-      )}
-    </header>
-  );
-}

package/src/components/PrintHeader/index.ts

@@ -1,17 +0,0 @@
-/**
- * @file PrintHeader Component Exports
- * @package @jmruthers/pace-core
- * @module PrintHeader
- * @since 0.4.38
- * 
- * Exports for PrintHeader and PrintCoverHeader components.
- */
-
-export { PrintHeader } from './PrintHeader';
-export { PrintCoverHeader } from './PrintCoverHeader';
-export type { 
-  PrintHeaderProps, 
-  PrintCoverHeaderProps,
-  PrintBranding,
-  PrintMetadata 
-} from './types';

package/src/components/PrintHeader/types.ts

@@ -1,42 +0,0 @@
-/**
- * @file PrintHeader Types
- * @package @jmruthers/pace-core
- * @module PrintHeader
- * @since 0.4.38
- * 
- * Type definitions for PrintHeader and PrintCoverHeader components.
- */
-
-import { ReactNode, ComponentType } from 'react';
-
-export interface PrintBranding {
-  logo?: string;
-  companyName?: string;
-  projectName?: string;
-  version?: string;
-  tagline?: string;
-}
-
-export interface PrintMetadata {
-  label: string;
-  value: string;
-  icon?: ComponentType<{ className?: string }>;
-}
-
-export interface PrintHeaderProps {
-  title: string;
-  subtitle?: string;
-  branding?: PrintBranding;
-  metadata?: PrintMetadata[];
-  printDate?: boolean;
-  className?: string;
-}
-
-export interface PrintCoverHeaderProps extends PrintHeaderProps {
-  coverStyle?: boolean;
-  logoSize?: 'small' | 'medium' | 'large';
-  titleSize?: 'small' | 'medium' | 'large' | 'xl';
-  showDivider?: boolean;
-  backgroundImage?: string;
-  backgroundColor?: string;
-}

package/src/components/PrintLayout/PrintLayout.tsx

@@ -1,122 +0,0 @@
-/**
- * @file PrintLayout Component
- * @package @jmruthers/pace-core
- * @module PrintLayout
- * @since 0.4.38
- * 
- * Base print-optimized layout component with A4 support and first page header management.
- * 
- * Features:
- * - Print-optimized base layout
- * - A4 page size support (portrait/landscape)
- * - First page vs subsequent page header management
- * - Print media query integration
- * - Page break controls
- * 
- * @example
- * ```tsx
- * <PrintLayout orientation="portrait" pageSize="A4">
- *   <PrintHeader title="Report" />
- *   <PrintSection title="Data">
- *     <PrintDataTable data={data} columns={columns} />
- *   </PrintSection>
- * </PrintLayout>
- * ```
- * 
- * @example
- * ```tsx
- * <PrintLayout 
- *   orientation="landscape" 
- *   pageSize="A4"
- *   firstPageHeader={<PrintCoverHeader title="Annual Report" />}
- *   subsequentPageHeader={<PrintHeader title="Annual Report" />}
- * >
- *   <PrintSection title="Executive Summary">
- *     Content goes here
- *   </PrintSection>
- * </PrintLayout>
- * ```
- */
-
-import React from 'react';
-import { cn } from '../../utils/cn';
-import { PrintLayoutProvider } from './PrintLayoutContext';
-import type { PrintLayoutProps } from './types';
-
-/**
- * PrintLayout component provides a print-optimized base layout with support for
- * different page sizes, orientations, and header management.
- */
-export function PrintLayout({
-  children,
-  orientation = 'portrait',
-  pageSize = 'A4',
-  showHeader = true,
-  showFooter = true,
-  firstPageHeader,
-  subsequentPageHeader,
-  className,
-  ...props
-}: PrintLayoutProps) {
-  const hasFirstPageHeader = Boolean(firstPageHeader);
-  const hasSubsequentPageHeader = Boolean(subsequentPageHeader);
-
-  const getPageSizeClass = () => {
-    if (pageSize === 'A4') {
-      return orientation === 'landscape' ? 'print-a4-landscape' : 'print-a4-portrait';
-    }
-    // Future: Add A3, A5 support
-    return 'print-a4-portrait';
-  };
-
-  const getHeaderClass = () => {
-    if (hasFirstPageHeader && hasSubsequentPageHeader) {
-      return 'print-first-page-header print-subsequent-header';
-    }
-    if (hasFirstPageHeader) {
-      return 'print-first-page-header';
-    }
-    if (hasSubsequentPageHeader) {
-      return 'print-subsequent-header';
-    }
-    return '';
-  };
-
-  return (
-    <PrintLayoutProvider
-      pageSize={pageSize}
-      orientation={orientation}
-      hasFirstPageHeader={hasFirstPageHeader}
-      hasSubsequentPageHeader={hasSubsequentPageHeader}
-    >
-      <div
-        className={cn(
-          'print-layout',
-          getPageSizeClass(),
-          getHeaderClass(),
-          className
-        )}
-        {...props}
-      >
-        {/* First page header */}
-        {hasFirstPageHeader && (
-          <div className="print-first-page-only">
-            {firstPageHeader}
-          </div>
-        )}
-
-        {/* Subsequent page header */}
-        {hasSubsequentPageHeader && (
-          <div className="print-subsequent-pages-only">
-            {subsequentPageHeader}
-          </div>
-        )}
-
-        {/* Main content */}
-        <div className="print-text">
-          {children}
-        </div>
-      </div>
-    </PrintLayoutProvider>
-  );
-}

package/src/components/PrintLayout/PrintLayoutContext.tsx

@@ -1,66 +0,0 @@
-/**
- * @file PrintLayout Context
- * @package @jmruthers/pace-core
- * @module PrintLayout
- * @since 0.4.38
- * 
- * Context for managing print layout state and page detection.
- */
-
-import React, { createContext, useContext, useState, useEffect } from 'react';
-import type { PrintLayoutContextType, PageSize, Orientation } from './types';
-
-const PrintLayoutContext = createContext<PrintLayoutContextType | undefined>(undefined);
-
-export interface PrintLayoutProviderProps {
-  children: React.ReactNode;
-  pageSize: PageSize;
-  orientation: Orientation;
-  hasFirstPageHeader: boolean;
-  hasSubsequentPageHeader: boolean;
-}
-
-export function PrintLayoutProvider({
-  children,
-  pageSize,
-  orientation,
-  hasFirstPageHeader,
-  hasSubsequentPageHeader,
-}: PrintLayoutProviderProps) {
-  const [isFirstPage, setIsFirstPage] = useState(true);
-
-  useEffect(() => {
-    // Simple page detection - in a real implementation, this would be more sophisticated
-    // For now, we'll assume first page until content overflows
-    const handleResize = () => {
-      // This is a simplified implementation
-      // In a real scenario, you'd measure content height vs page height
-      setIsFirstPage(true);
-    };
-
-    window.addEventListener('resize', handleResize);
-    return () => window.removeEventListener('resize', handleResize);
-  }, []);
-
-  const value: PrintLayoutContextType = {
-    isFirstPage,
-    pageSize,
-    orientation,
-    hasFirstPageHeader,
-    hasSubsequentPageHeader,
-  };
-
-  return (
-    <PrintLayoutContext.Provider value={value}>
-      {children}
-    </PrintLayoutContext.Provider>
-  );
-}
-
-export function usePrintLayout(): PrintLayoutContextType {
-  const context = useContext(PrintLayoutContext);
-  if (context === undefined) {
-    throw new Error('usePrintLayout must be used within a PrintLayoutProvider');
-  }
-  return context;
-}

package/src/components/PrintLayout/PrintPageBreak.tsx

@@ -1,52 +0,0 @@
-/**
- * @file PrintPageBreak Component
- * @package @jmruthers/pace-core
- * @module PrintLayout
- * @since 0.4.38
- * 
- * Component for controlling page breaks in print layouts.
- */
-
-import React from 'react';
-import { cn } from '../../utils/cn';
-import type { PrintPageBreakProps } from './types';
-
-/**
- * PrintPageBreak component for controlling page breaks in print layouts.
- * 
- * @example
- * ```tsx
- * <PrintPageBreak type="before" />
- * <PrintPageBreak type="after" />
- * <PrintPageBreak type="avoid" />
- * ```
- */
-export function PrintPageBreak({ 
-  type = 'after', 
-  className,
-  ...props
-}: PrintPageBreakProps) {
-  const getBreakClass = () => {
-    switch (type) {
-      case 'before':
-        return 'print-break-before';
-      case 'after':
-        return 'print-break-after';
-      case 'avoid':
-        return 'print-break-avoid';
-      default:
-        return '';
-    }
-  };
-
-  return (
-    <div 
-      className={cn(
-        getBreakClass(),
-        className
-      )}
-      aria-hidden="true"
-      {...props}
-    />
-  );
-}