@birhaus/patterns

Advanced UI patterns for the BIRHAUS design system, implementing complex workflows with cognitive load optimization.

Installation

npm install @birhaus/patterns

Components

BirhausApprovalWorkflow

Complete approval workflow with Spanish-first labeling and undo patterns.

import { BirhausApprovalWorkflow } from '@birhaus/patterns'

const approvalSteps = [
  { 
    id: 'review',
    labelEs: 'Revisión',
    labelEn: 'Review',
    status: 'completed' 
  },
  { 
    id: 'approve', 
    labelEs: 'Aprobación',
    labelEn: 'Approval',
    status: 'pending' 
  }
]

function DocumentApproval() {
  return (
    <BirhausApprovalWorkflow
      titleEs="Aprobación de Transferencia"
      titleEn="Transfer Approval"
      steps={approvalSteps}
      onApprove={handleApprove}
      onReject={handleReject}
    />
  )
}

BirhausSmartSearch

Intelligent search with cognitive load management and Spanish-first results.

import { BirhausSmartSearch } from '@birhaus/patterns'

function DonorSearch() {
  return (
    <BirhausSmartSearch
      placeholderEs="Buscar donante..."
      placeholderEn="Search donor..."
      onSearch={searchDonors}
      maxResults={7} // Miller's Law compliance
      categories={[
        { id: 'donors', labelEs: 'Donantes', labelEn: 'Donors' },
        { id: 'transactions', labelEs: 'Transacciones', labelEn: 'Transactions' }
      ]}
    />
  )
}

AuditTimeline

Complete audit trail with chronological display and accessibility.

import { AuditTimeline } from '@birhaus/patterns'

const auditEvents = [
  {
    id: '1',
    timestamp: new Date(),
    actionEs: 'Donación registrada',
    actionEn: 'Donation recorded',
    user: 'María González',
    details: { amount: 'Gs. 150.000' }
  }
]

function TransactionAudit() {
  return (
    <AuditTimeline
      events={auditEvents}
      titleEs="Historial de Transacción"
      titleEn="Transaction History"
    />
  )
}

BIRHAUS Principles

All patterns implement:

• Spanish-first Design: Primary Spanish labels with English fallbacks
• Cognitive Load Management: Miller's Law (7±2) applied to all lists
• Undo over Confirm: Workflow actions support undo patterns
• Progressive Disclosure: Complex information shown on demand
• Accessibility: Full WCAG AA+ compliance

Use Cases

Perfect for:

• Document approval workflows
• Financial transaction management
• Audit trail visualization
• Search interfaces with complex results
• Administrative dashboards

Integration

Works with:

• @birhaus/primitives - Base components for building patterns
• @birhaus/core - UndoSystem integration for workflow actions
• @birhaus/themes - Consistent visual styling

License

MIT - see LICENSE for details.