@jmruthers/pace-core 0.5.54 → 0.5.56

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

@@ -1,230 +0,0 @@
-/**
- * @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

@@ -1,19 +0,0 @@
-/**
- * @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

@@ -1,37 +0,0 @@
-/**
- * @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

@@ -1,120 +0,0 @@
-/**
- * @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>
-  );
-}

package/src/components/PrintPageBreak/PrintPageBreakGroup.tsx

@@ -1,90 +0,0 @@
-/**
- * @file PrintPageBreakGroup Component
- * @package @jmruthers/pace-core
- * @module PrintPageBreakGroup
- * @since 0.4.38
- * 
- * Group component for managing page breaks across multiple elements.
- */
-
-import React from 'react';
-import { cn } from '../../utils/cn';
-import { PrintText } from '../PrintText';
-import { PrintPageBreakGroupProps } from './types';
-
-export function PrintPageBreakGroup({
-  children,
-  type = 'auto',
-  strength = 'normal',
-  label,
-  description,
-  printOptimized = true,
-  className,
-  ...props
-}: PrintPageBreakGroupProps) {
-  const getBreakClass = (): string => {
-    const baseClass = 'print-page-break-group';
-    
-    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'
-    );
-  };
-
-  return (
-    <div
-      className={cn(
-        getBreakClass(),
-        getStrengthClass(),
-        getPrintOptimizedClasses(),
-        className
-      )}
-      {...props}
-    >
-      {label && (
-        <PrintText variant="small" color="muted" className="mb-2">
-          {label}
-        </PrintText>
-      )}
-      
-      {children}
-      
-      {description && (
-        <PrintText variant="small" color="muted" className="mt-2">
-          {description}
-        </PrintText>
-      )}
-    </div>
-  );
-}

package/src/components/PrintPageBreak/PrintPageBreakIndicator.tsx

@@ -1,112 +0,0 @@
-/**
- * @file PrintPageBreakIndicator Component
- * @package @jmruthers/pace-core
- * @module PrintPageBreakIndicator
- * @since 0.4.38
- * 
- * Visual indicator component for page breaks.
- */
-
-import React, { ReactNode } from 'react';
-import { cn } from '../../utils/cn';
-import { PrintText } from '../PrintText';
-import { PrintPageBreakIndicatorProps } from './types';
-
-export function PrintPageBreakIndicator({
-  children,
-  type = 'line',
-  color = 'default',
-  size = 'md',
-  printOptimized = true,
-  className,
-  ...props
-}: PrintPageBreakIndicatorProps) {
-  const getTypeClasses = (): string => {
-    switch (type) {
-      case 'dotted':
-        return 'border-dotted';
-      case 'dashed':
-        return 'border-dashed';
-      case 'text':
-        return 'text-center';
-      case 'icon':
-        return 'text-center';
-      default:
-        return 'border-solid';
-    }
-  };
-
-  const getColorClasses = (): string => {
-    switch (color) {
-      case 'primary':
-        return 'border-primary text-primary';
-      case 'secondary':
-        return 'border-secondary text-secondary';
-      case 'muted':
-        return 'border-muted-foreground text-muted-foreground';
-      case 'accent':
-        return 'border-accent text-accent';
-      default:
-        return 'border-border text-foreground';
-    }
-  };
-
-  const getSizeClasses = (): string => {
-    switch (size) {
-      case 'sm':
-        return 'h-1 text-xs';
-      case 'lg':
-        return 'h-3 text-lg';
-      default:
-        return 'h-2 text-sm';
-    }
-  };
-
-  const getPrintOptimizedClasses = (): string => {
-    if (!printOptimized) return '';
-    return cn(
-      'print:border-black',
-      'print:text-black'
-    );
-  };
-
-  const renderContent = (): ReactNode => {
-    if (children) {
-      return children;
-    }
-
-    switch (type) {
-      case 'text':
-        return '--- Page Break ---';
-      case 'icon':
-        return '📄';
-      case 'line':
-        return '--- Page Break ---';
-      default:
-        return '--- Page Break ---';
-    }
-  };
-
-  const isLineType = type === 'line' || type === 'dotted' || type === 'dashed';
-
-  return (
-    <div
-      className={cn(
-        'print-page-break-indicator',
-        'flex',
-        'items-center',
-        'justify-center',
-        'w-full',
-        getTypeClasses(),
-        getColorClasses(),
-        getSizeClasses(),
-        isLineType && 'border-t',
-        getPrintOptimizedClasses(),
-        className
-      )}
-      {...props}
-    >
-      {renderContent()}
-    </div>
-  );
-}