npm package: @paulovila/vetra-trade-personal-info-block
Description: Enhanced personal information workflow block for Vetra Trade applications
Author: Paulo Vila
Latest version: 1.0.2

# @vetra-trade/personal-info-block

Enhanced personal information workflow block for Vetra Trade applications with Payload CMS integration.

## 🚀 Features

- ✅ **Comprehensive personal data collection**: First name, last name, email, phone, document type, birth date, address
- ✅ **Full Spanish/English localization**: Proper field labels, placeholders, help text, and error messages
- ✅ **Advanced validation**: Email format, phone format, age verification, document validation
- ✅ **Demo data support**: Pre-filled values for testing and demonstrations
- ✅ **Professional styling**: Responsive layouts with CSS classes
- ✅ **TypeScript support**: Full type definitions included
- ✅ **Payload CMS integration**: Direct integration with Payload workflow-blocks collection

## 📦 Installation

```bash
npm install @vetra-trade/personal-info-block
```

## 🔧 Usage

### Basic Usage

```typescript
import { createPersonalInfoBlockData } from '@vetra-trade/personal-info-block'

// Get block data with Spanish/English localization
const blockData = createPersonalInfoBlockData()

console.log(blockData.spanish.title) // "Información Personal Mejorada"
console.log(blockData.english.title) // "Enhanced Personal Information"
```

### Payload CMS Integration

```typescript
import { createPayloadPersonalInfoBlock } from '@vetra-trade/personal-info-block'

// Inside your Payload seeder
export const seedWorkflowBlocks = async (payload: Payload) => {
  // Create the enhanced personal info block with proper localization
  const personalInfoBlock = await createPayloadPersonalInfoBlock(payload)
  
  console.log(`Created block with ID: ${personalInfoBlock.id}`)
  return personalInfoBlock
}
```

### Advanced Usage with Custom Data

```typescript
import { 
  createPersonalInfoBlockData, 
  WorkflowBlockData,
  WorkflowBlockField 
} from '@vetra-trade/personal-info-block'

const blockData = createPersonalInfoBlockData()

// Customize fields
const customFields: WorkflowBlockField[] = [
  ...blockData.spanish.dynamicFields,
  {
    fieldName: 'middleName',
    fieldLabel: 'Segundo Nombre',
    fieldType: 'text',
    required: false,
    // ... other properties
  }
]

// Create custom block data
const customBlockData: WorkflowBlockData = {
  ...blockData.spanish,
  dynamicFields: customFields,
  version: '1.1.0'
}
```

## 🌍 Localization

The package provides complete Spanish and English localization:

### Spanish (Default)
- Title: "Información Personal Mejorada"
- Fields: "Nombres", "Apellidos", "Correo Electrónico", etc.
- Validation: Spanish error messages

### English
- Title: "Enhanced Personal Information"
- Fields: "First Name", "Last Name", "Email Address", etc.
- Validation: English error messages

## 📋 Field Configuration

The block includes these fields:

| Field Name | Type | Required | Validation |
|------------|------|----------|------------|
| firstName | text | ✅ | 2-50 chars, letters only |
| lastName | text | ✅ | 2-50 chars, letters only |
| email | email | ✅ | Valid email format |
| phone | phone | ✅ | International format |
| documentType | select | ✅ | Cédula/Passport options |
| birthDate | date | ✅ | 18+ years validation |
| address | textarea | ✅ | 10-200 characters |

## 🎨 Styling

Each field includes CSS classes for styling:

- `kyc-firstname-field`
- `kyc-lastname-field`
- `kyc-email-field`
- `kyc-phone-field`
- `kyc-document-type-field`
- `kyc-birthdate-field`
- `kyc-address-field`

## 🧪 Demo Data

All fields include demo data for testing:

```typescript
{
  firstName: "Gerónimo",
  lastName: "de Soto", 
  email: "geronimo.desoto@example.com",
  phone: "+573001234567",
  // ... etc
}
```

## 🏗️ TypeScript Support

Full TypeScript definitions included:

```typescript
import type { 
  WorkflowBlockField,
  WorkflowBlockData,
  LocalizedBlockData,
  Locale 
} from '@vetra-trade/personal-info-block'
```

## 🔗 Integration Example

Complete integration with a Payload CMS project:

```typescript
// src/endpoints/seed/workflow-blocks.ts
import { createPayloadPersonalInfoBlock } from '@vetra-trade/personal-info-block'

export const seedWorkflowBlocks = async (payload: Payload) => {
  try {
    // Clean up existing blocks
    await payload.db.deleteMany({
      collection: 'workflow-blocks',
      where: {}
    })

    // Create enhanced personal info block from npm package
    const personalInfoBlock = await createPayloadPersonalInfoBlock(payload)
    
    console.log('✅ Created enhanced personal info block from npm package')
    return { personalInfoBlock }
  } catch (error) {
    console.error('❌ Failed to seed workflow blocks:', error)
    throw error
  }
}
```

## 🤝 Contributing

1. Fork the repository
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

## 📄 License

MIT License - see LICENSE file for details

## 🏢 Vetra Trade

Part of the Vetra Trade workflow blocks ecosystem. For more packages and tools, visit our [GitHub organization](https://github.com/vetra-trade).

---

**Made with ❤️ for the Vetra Trade ecosystem**