Changelog

Team Roster with CSV Import

Full roster management step with player cards, CSV template download, automated CSV parsing with validation, and bulk import - supporting name, fit, size, name print, and jersey number fields.

Overview

New roster step in the uniform builder for managing team players. Users can manually add players one by one or bulk-import an entire roster from a CSV file with automated validation. Each player entry captures name, sport, product, fit, size, name print, and jersey number.

Features

Player Management

  • Add / Remove Players - Dynamic field array with collapsible player cards
  • Auto-Generated IDs - Sequential 3-digit player IDs (001, 002, ...) assigned automatically
  • Collapsible Cards - Trigger shows player name and jersey number (e.g. "Alex Martin #8")
  • Prepend Order - New players added to the top of the list for visibility

Player Fields

  • Name - Full player name input
  • Sport - Auto-populated from the builder's sport context (read-only)
  • Product - Auto-populated from the current product selection (read-only)
  • Fit - Dropdown with options: Men/Regular, Women/Regular, Youth/Regular, Unisex/Regular
  • Size - Full size range from 3XS to 5XL (11 options)
  • Name Print - Uppercase text for jersey back print (separate from full name)
  • Number - Jersey number with numeric input mode

CSV Import

  • Template Download - One-click CSV template download with headers and example row
  • File Upload - Standard file input in the import modal accepting .csv files
  • Modal Workflow - Clean dialog with step-by-step instructions (download template, upload file, review, import)

CSV Parsing Engine

  • RFC-Compliant Parser - Custom parseCsvLine() handles double-quoted fields (e.g. "Smith, Jr.")
  • Flexible Header Detection - Column headers matched by regex, not position (supports reordering)
  • Required Columns - Validates presence of "Name" and "Number" columns
  • Fit Validation - Validates fit values against the allowed set, reports invalid rows
  • Size Validation - Validates size values against the 3XS–5XL range, reports invalid rows
  • Error Reporting - Collects row-level errors shown in the modal (capped at 5 with overflow count)
  • Graceful Skip - Empty rows silently skipped; missing name defaults to "Player N"

Bulk Import

  • Preview Count - Shows number of players ready to import before confirming
  • Batch Prepend - All CSV players added at once in correct order (first CSV row = top of list)
  • Context Enrichment - Sport and product auto-filled from builder state for each imported player
  • Sequential IDs - Imported players get sequential IDs continuing from the existing roster

Technical Details

Component Architecture

  • RosterStep manages the player field array, CSV modal state, and import logic
  • PlayerCard renders individual player forms with useWatch for live trigger updates
  • useProductForBuilder hook resolves the current product display name from slug
  • CSV parsing is pure client-side (no server round-trip for validation)

CSV Template Format

Name,Fit,Size,Name Print,Number
Alex Martin,Men / Regular,L,MARTIN,8

Validation Rules

  • Fit values must exactly match one of the predefined options
  • Size values must exactly match one of the 3XS–5XL options
  • At least one data row required beyond the header
  • Name and Number columns are mandatory in the CSV header
Previous

Graphics Library Management & Builder Integration