bakery-ia/frontend/src/utils

Text Overflow Prevention System

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

Quick Start

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

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

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

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

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

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

// Before
const title = text.length > 30 ? text.substring(0, 30) + '...' : text;

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

From Basic Truncate Classes

// 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