@birhaus/patterns

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

Installation

``bash
npm install @birhaus/patterns
`

Components

$3

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

`tsx
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 (
titleEs="Aprobación de Transferencia"
titleEn="Transfer Approval"
steps={approvalSteps}
onApprove={handleApprove}
onReject={handleReject}
/>
)
}
`

$3

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

`tsx
import { BirhausSmartSearch } from '@birhaus/patterns'

function DonorSearch() {
return (
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' }
]}
/>
)
}
`

$3

Complete audit trail with chronological display and accessibility.

`tsx
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 (
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.