# GroupManager Component

## Overview

The `GroupManager` component provides a visual interface for managing attribute group definitions in the WPBitsBlockStudio. It allows users to create, edit, delete, and reorder groups that organize block attributes into collapsible panels in the WordPress block editor.

## Features

### 1. Group List Display
- Displays all defined groups with their properties
- Shows group title, key, and attribute count
- Visual indicators for group state (initially open/closed)
- Displays group order

### 2. CRUD Operations
- **Add Group**: Create new groups with custom titles and settings
- **Edit Group**: Modify existing group properties
- **Delete Group**: Remove groups with automatic attribute reassignment to "Settings"
- **Rename Group**: Update group titles and keys

### 3. Drag-and-Drop Reordering
- Drag groups to reorder them
- Visual feedback during drag operations
- Automatic order property updates
- Persists changes to schema

## Usage

```jsx
import GroupManager from '../components/GroupManager';

<GroupManager
  groups={ formData.groups || {} }
  attributes={ formData.attributes }
  onChange={ ( groups ) => setFormData( { ...formData, groups } ) }
  onAttributesChange={ ( attributes ) => setFormData( { ...formData, attributes } ) }
/>
```

## Props

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `groups` | Object | Yes | Current group definitions (key-value pairs) |
| `attributes` | Object | Yes | Current attributes (used to check group usage) |
| `onChange` | Function | Yes | Callback when groups are modified |
| `onAttributesChange` | Function | Yes | Callback when attributes need reassignment |

## Group Schema

Each group in the `groups` object has the following structure:

```javascript
{
  "Content": {
    "title": "Content",
    "initialOpen": true,
    "order": 1
  },
  "Style": {
    "title": "Style",
    "initialOpen": false,
    "order": 2
  }
}
```

### Group Properties

- **title** (string): Display title for the panel in the editor
- **initialOpen** (boolean): Whether the panel is expanded by default
- **order** (number): Display order of the group (1-based)

## Validation

The component validates:
- Group keys must be alphanumeric with spaces and hyphens
- Group keys must be 50 characters or less
- Group keys must be unique
- Group titles are required

## Integration

The GroupManager is integrated into the BlockForm component as a separate tab:

1. Import the component in `BlockForm.js`
2. Add a "Groups" tab to the TabPanel
3. Render the GroupManager in the tab content
4. Ensure `groups` property is included in formData state

## Styling

Styles are defined in `admin/styles/admin.scss` under the `.wpbs-group-manager` class. Key style features:

- Drag-and-drop visual feedback
- Group state indicators (open/closed)
- Responsive layout
- Hover effects for better UX

## Requirements Satisfied

This component satisfies the following requirements from the spec:

- **Requirement 8.1**: Group assignments stored in attribute configuration
- **Requirement 1.2**: Group name validation (alphanumeric, spaces, hyphens)
- **Requirement 1.7**: Group reordering with order property updates

## Future Enhancements

Potential improvements for future versions:

- Bulk group operations
- Group templates/presets
- Import/export group configurations
- Group icons (dashicons)
- Group descriptions
