react-bracket-ui/CHANGELOG.md

A modern, feature-rich React component library for displaying single-elimination tournament brackets with drag-drop, zoom/pan, and error validation

# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [1.0.1] - 2025-10-28

### 🐛 Fixed
- **Zoom/Pan conflict with Drag-Drop**: Fixed gesture conflict when both `enableZoomPan` and `enableDragDrop` are enabled
  - Pan now automatically disables when dragging participants
  - Pan re-enables after drag operation completes
  - Improved user experience when using both features together

### ✨ Added
- `onDragEnd` callback in `MatchComponentProps` for better drag lifecycle management
- `isDragging` state to track active drag operations
- Dynamic panning control based on drag state

### 📚 Documentation
- Added `ZOOM_DRAGDROP_FIX.md` explaining the issue and solution
- Added test case #6 in test-app demonstrating the fix

### 📦 Build
- ESM: 16.49 KB (+0.29 KB from 1.0.0)
- CJS: 19.12 KB (+0.33 KB from 1.0.0)

---

## [1.0.0] - 2025-10-28

### 🎉 Initial Release

#### ✨ Features

- **Pure Display Component** - Component chỉ hiển thị dữ liệu bracket được truyền từ FE, không tự tính toán round hay seed
- **React 19 Support** - Hỗ trợ đầy đủ React 19 với TypeScript
- **Drag & Drop** - Kéo thả team giữa các match để chỉnh bracket
  - HTML5 Drag and Drop API
  - Swap participants between matches
  - Visual feedback during drag operations
  - Emit callback events on drop
  
- **Zoom & Pan** - Zoom/pan nền bracket
  - Sử dụng `react-zoom-pan-pinch`
  - Customizable zoom levels (min, max, initial)
  - Zoom in/out buttons
  - Reset transform button
  - Mouse wheel zoom support
  - Pan by dragging
  
- **Error Validation** - Hiển thị cảnh báo lỗi
  - Automatic bracket validation
  - Visual error indicators (red borders)
  - Error tooltips
  - Custom error messages
  - Warning and error severity levels
  - Built-in validation utilities
  
- **Callbacks & Events**
  - `onBracketChange` - Emitted when bracket is modified
  - `onErrorClick` - Triggered when error is clicked
  - Detailed event payloads with drag-drop information
  
- **Customization**
  - Custom colors scheme
  - Adjustable match width/height
  - Configurable gaps between rounds
  - Custom round names
  - Optional round name display
  - Flexible styling options

- **Performance Optimizations**
  - React.memo for MatchComponent
  - useMemo for expensive computations
  - useCallback for event handlers
  - Efficient re-render prevention

#### 📦 Package

- TypeScript support with full type definitions
- ESM and CJS builds
- Source maps included
- Tree-shakeable exports
- Zero external runtime dependencies (except react-zoom-pan-pinch for zoom feature)

#### 🎯 Types Exported

- `BracketProps` - Main component props
- `Match` - Match data structure
- `Participant` - Participant/team data
- `BracketError` - Error object
- `BracketChangeEvent` - Change event payload
- `DragDropResult` - Drag & drop result data

#### 🛠️ Utility Functions

- `validateBracket(matches)` - Validate bracket structure
- `hasMatchError(matchId, errors)` - Check if match has errors
- `getMatchErrorMessage(matchId, errors)` - Get error message for match

#### 📚 Documentation

- Comprehensive README with examples
- API reference documentation
- Integration examples (React Query, Redux)
- TypeScript usage examples
- Troubleshooting guide
- Performance tips

### 🎨 Default Theme

- Primary: `#1976d2`
- Secondary: `#424242`
- Background: `#f9f9f9`
- Error: `#d32f2f`
- Warning: `#ff9800`
- Winner: `#e8f5e9`

### 🔧 Technical Details

- **Build Tool**: tsup
- **TypeScript Version**: 5.9.3
- **React Peer Dependency**: >=18
- **Bundle Size**: ~18KB (CJS), ~16KB (ESM)

### 📋 Validation Rules

- Duplicate match ID detection
- Invalid nextMatchId reference checking
- Participant ID validation
- Winner ID validation against participants
- Comprehensive error reporting

### 🚀 Usage Example

```tsx
import { Bracket } from 'react-bracket-ui';

<Bracket 
  matches={matches}
  enableDragDrop={true}
  enableZoomPan={true}
  onBracketChange={(event) => {
    console.log('Updated matches:', event.matches);
  }}
  showRoundNames={true}
  roundNames={{
    1: 'Quarter Finals',
    2: 'Semi Finals',
    3: 'Grand Final'
  }}
  colors={{
    primary: '#1976d2',
    winner: '#c8e6c9'
  }}
/>
```

### 📝 Notes

- Designed for single-elimination tournaments
- Does not include bracket generation logic
- Fully controlled component - state managed by parent
- Optimized for embedding in any React application
- No assumptions about data calculation - pure display component

---

## [Unreleased]

### Planned Features

- [ ] Double-elimination bracket support
- [ ] Connector lines between matches
- [ ] Match result editing in-place
- [ ] Export bracket as image/PDF
- [ ] Animation transitions
- [ ] Mobile touch gestures
- [ ] Accessibility improvements (ARIA labels)
- [ ] RTL (Right-to-Left) support
- [ ] Dark mode built-in theme
- [ ] Virtual scrolling for large brackets

### Future Enhancements

- [ ] Swiss system tournament support
- [ ] Round-robin bracket display
- [ ] Custom match templates
- [ ] Time/date display per match
- [ ] Match status indicators (upcoming, live, completed)
- [ ] Player/team avatars
- [ ] Statistics overlay
- [ ] Match preview on hover
- [ ] Keyboard navigation
- [ ] Undo/redo functionality

---

[1.0.0]: https://github.com/thuatdt137/react-bracket-ui/releases/tag/v1.0.0