# Text Overflow Prevention System

This comprehensive system prevents text overflow in UI components across all screen sizes and content types.

## Quick Start

```typescript
import { TextOverflowPrevention, ResponsiveText } from '../utils/textUtils';

// Automatic truncation for StatusCard
const title = TextOverflowPrevention.statusCard.title("Very Long Product Name That Could Overflow");

// Responsive text component
<ResponsiveText
  text="Long text that adapts to screen size"
  textType="title"
  truncationType="mobile"
/>
```

## Core Features

### 1. Automatic Truncation Engines
- **StatusCard**: Optimized for status cards (35 chars title, 50 chars subtitle)
- **Mobile**: Aggressive truncation for mobile devices (25 chars title, 35 chars subtitle)
- **Production**: Specialized for production content (equipment lists, staff lists)

### 2. Responsive Text Component
- Automatically adjusts based on screen size
- Supports tooltips for truncated content
- Multiple text types (title, subtitle, label, metadata, action)

### 3. Screen-Size Detection
- Mobile: < 768px
- Tablet: 768px - 1024px
- Desktop: > 1024px

## Usage Examples

### Basic Truncation
```typescript
import { TextOverflowPrevention } from '../utils/textUtils';

// StatusCard truncation
const title = TextOverflowPrevention.statusCard.title(longTitle);
const subtitle = TextOverflowPrevention.statusCard.subtitle(longSubtitle);

// Mobile-optimized truncation
const mobileTitle = TextOverflowPrevention.mobile.title(longTitle);

// Production-specific truncation
const equipment = TextOverflowPrevention.production.equipmentList(['oven-01', 'mixer-02']);
const staff = TextOverflowPrevention.production.staffList(['Juan', 'María', 'Carlos']);
```

### ResponsiveText Component
```tsx
import { ResponsiveText } from '../components/ui';

// Basic usage
<ResponsiveText
  text="Product Name That Could Be Very Long"
  textType="title"
  className="font-bold text-lg"
/>

// Custom responsive lengths
<ResponsiveText
  text="Long description text"
  maxLength={{ mobile: 30, tablet: 50, desktop: 100 }}
  showTooltip={true}
/>

// Different truncation types
<ResponsiveText
  text="Equipment: oven-01, mixer-02, proofer-03"
  truncationType="production"
  textType="metadata"
/>
```

### Array Truncation
```typescript
import { truncateArray } from '../utils/textUtils';

// Truncate equipment list
const equipment = truncateArray(['oven-01', 'mixer-02', 'proofer-03'], 2, 15);
// Result: ['oven-01', 'mixer-02', '+1 más']

// Truncate staff list
const staff = truncateArray(['Juan Perez', 'María González'], 1, 20);
// Result: ['Juan Perez', '+1 más']
```

### CSS Classes for Overflow Prevention
```typescript
import { overflowClasses } from '../utils/textUtils';

// Available classes
overflowClasses.truncate                // 'truncate'
overflowClasses.breakWords             // 'break-words'
overflowClasses.ellipsis               // 'overflow-hidden text-ellipsis whitespace-nowrap'
overflowClasses.multilineEllipsis      // 'overflow-hidden line-clamp-2'
```

## Implementation in Components

### Enhanced StatusCard
The StatusCard component now automatically:
- Truncates titles, subtitles, and metadata
- Adjusts truncation based on screen size
- Shows tooltips for truncated content
- Limits metadata items (3 on mobile, 4 on desktop)
- Provides responsive action button labels

### Production Components
Production components use specialized truncation:
- Equipment lists: Max 3 items, 20 chars each
- Staff lists: Max 3 items, 25 chars each
- Batch numbers: Max 20 chars
- Product names: Max 30 chars with word preservation

## Configuration

### Truncation Lengths

| Context | Mobile | Desktop | Preserve Words |
|---------|--------|---------|----------------|
| Title | 25 chars | 35 chars | Yes |
| Subtitle | 35 chars | 50 chars | Yes |
| Primary Label | 8 chars | 12 chars | No |
| Secondary Label | 10 chars | 15 chars | No |
| Metadata | 45 chars | 60 chars | Yes |
| Actions | 8 chars | 12 chars | No |

### Custom Configuration
```typescript
import { truncateText, TruncateOptions } from '../utils/textUtils';

const options: TruncateOptions = {
  maxLength: 25,
  suffix: '...',
  preserveWords: true
};

const result = truncateText("Very long text content", options);
```

## Best Practices

1. **Always use the system**: Don't implement manual truncation
2. **Choose the right engine**: StatusCard for cards, Mobile for aggressive truncation, Production for specialized content
3. **Enable tooltips**: Users should be able to see full content on hover
4. **Test on mobile**: Always verify truncation works on small screens
5. **Preserve word boundaries**: Use `preserveWords: true` for readable text

## Maintenance

To add new truncation types:

1. Add method to `TextOverflowPrevention` class
2. Update `ResponsiveText` component to support new type
3. Add configuration to truncation engines
4. Update this documentation

## Migration Guide

### From Manual Truncation
```typescript
// Before
const title = text.length > 30 ? text.substring(0, 30) + '...' : text;

// After
const title = TextOverflowPrevention.statusCard.title(text);
```

### From Basic Truncate Classes
```tsx
// Before
<div className="truncate" title={text}>{text}</div>

// After
<ResponsiveText text={text} textType="title" />
```

## Browser Support

- Modern browsers with CSS Grid and Flexbox support
- Mobile Safari, Chrome Mobile, Firefox Mobile
- Responsive design works from 320px to 1920px+ screen widths