Refactor token reordering to support cross-group drag and drop

[Copilot]

Overview

This PR refactors the token reordering logic to support dragging tokens between different groups within TokenListing. Previously, tokens could only be reordered within their parent group, limiting organizational flexibility. This implementation removes that restriction while adding proper validation and automatic name handling.

Problem

The current drag-and-drop implementation has several limitations:

1. Tokens can only be reordered within the same parent group
2. Moving size.font.small to the size.spacing group is not possible
3. The reorder logic is complex with tightly coupled parent group checks
4. No validation for name collisions when moving tokens

Example of what wasn't possible before:

// Existing tokens
size.font.small    // Can only swap with size.font.big
size.font.big      // Can only swap with size.font.small
size.spacing.small // Isolated to spacing group
size.spacing.big   // Isolated to spacing group

Solution

This PR introduces a comprehensive refactor with three key components:

1. Token Path Utilities (src/utils/token/tokenPath.ts)

New utility functions for working with token hierarchies:

getParentPath('size.font.small')     // → 'size.font'
getTokenBaseName('size.font.small')  // → 'small'
buildTokenName('small', 'size.spacing') // → 'size.spacing.small'
areSiblings('size.font.small', 'size.font.big') // → true

2. Validation Functions (src/utils/token/tokenValidation.ts)

Prevents name collisions when moving tokens across groups:

// Checks if moving would create a duplicate
wouldCauseNameCollision(token, newParentPath, allTokens)

// Gets the new token name for the target location
getNewTokenName(token, newParentPath)

3. Enhanced Drag and Drop

DraggableWrapper.tsx - Simplified and enhanced the drop handler:

• Automatically renames tokens when moving to different groups
• Validates for name collisions before allowing moves
• Cleaner logic with better error handling

DragOverItem.tsx - Removed parent group restriction:

• Visual feedback now works for any same-type token drag operation
• Simplified from complex path comparison to straightforward type checking

Examples

Move token to different sibling group:

Before: size.font.small
Drag onto: size.spacing.big
After: size.spacing.small ✓

Move token up a hierarchy level:

Before: size.font.small  
Drag onto: size (root token)
After: size.small ✓

Collision prevention:

Existing: size.font.small, size.spacing.small
Action: Drag size.font.small onto size.spacing.big
Result: Move rejected - token name already exists ✗

Testing

Comprehensive test coverage with 37 new tests:

• ✅ Unit tests for all utility functions (100% coverage)
• ✅ Integration tests for reordering logic
• ✅ Name collision prevention tests
• ✅ Type validation tests
• ✅ All existing tests still pass (TokenGroup, etc.)

Total: 52 tests passing

Breaking Changes

None. This is a backward-compatible enhancement:

• Existing same-group reordering continues to work as before
• No API changes
• No changes to token data structure
• No migration required

Future Enhancements

Potential follow-ups (not in this PR):

• User-friendly error notifications instead of console warnings
• Visual preview of token's new location during drag
• Support for dragging entire groups
• Bulk token moves (multi-select)

Original prompt

Currently you can only drag and drop (reorder) tokens that are part of the same group in TokenListing. Let's refactor the reorder logic (I feel its a bit flawed, complex), and then also add support to reorder tokens to other groups, such as dragging it up a level, or moving a token into a group. We likely will need a uniqueness check for the name.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[changeset-bot]

🦋 Changeset detected

Latest commit: b92b7d6

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@tokens-studio/figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR