npm package: @pepperi-addons/ngx-composite-lib-react
Description: Thin React wrappers for Pepperi Angular Elements (Web Components) to improve DX in React.
Author: Pepperi
Latest version: 0.5.30

# @pepperi-addons/ngx-composite-lib-react

React wrappers for Pepperi ngx-composite-lib Angular Elements.

## Version 0.5.2

This package provides React wrappers for **15 fully converted Angular Elements** from ngx-composite-lib.

## Available Components

```tsx
import {
    PepColorSettings,
    PepGroupButtonsSettings,
    PepFlowPickerButton,
    PepIconPicker,
    PepPaddingSettings,
    PepShadowSettings,
    PepRichText,
    PepShowIfBadge,
    PepGenericList,
    PepFileStatusPanel,
    PepGenericForm,
    PepDataViewBuilder,
    PepManageParameters,
    PepMappingParameters,
    PepGenericFieldsBuilder,
} from '@pepperi-addons/ngx-composite-lib-react';
```

## Component Details

### Basic Components
- **PepColorSettings** - Color picker and settings
- **PepGroupButtonsSettings** - Button group configuration
- **PepFlowPickerButton** - Flow selection button
- **PepIconPicker** - Icon selection
- **PepPaddingSettings** - Padding/spacing configuration
- **PepShadowSettings** - Shadow effects configuration
- **PepShowIfBadge** - Conditional visibility badge

### Content Components
- **PepRichText** - Rich text editor (Quill-based)
- **PepGenericList** - Advanced list with selection
- **PepFileStatusPanel** - File upload status display
- **PepGenericForm** - Dynamic form builder

### Advanced Components
- **PepDataViewBuilder** - Data view configuration builder
- **PepManageParameters** - Parameter management interface
- **PepMappingParameters** - Parameter mapping interface
- **PepGenericFieldsBuilder** - Form fields builder with drag-drop

## Installation

```bash
npm install @pepperi-addons/ngx-composite-lib-react
```

## Setup

### 1. Include Angular Elements Bundle

Add to your HTML:

```html
<!-- CSS -->
<link rel="stylesheet" href="/node_modules/@pepperi-addons/ngx-composite-lib-react/elements/styles.css" />

<!-- JavaScript (ES Modules) -->
<script src="/node_modules/@pepperi-addons/ngx-composite-lib-react/elements/runtime.js" type="module"></script>
<script src="/node_modules/@pepperi-addons/ngx-composite-lib-react/elements/polyfills.js" type="module"></script>
<script src="/node_modules/@pepperi-addons/ngx-composite-lib-react/elements/main.js" type="module"></script>
```

### 2. Load Translations (Required)

The components use `@ngx-translate` for internationalization. You must load the translation files:

```typescript
// In your Angular app (if using Angular)
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { HttpClient } from '@angular/common/http';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(
        http,
        '/node_modules/@pepperi-addons/ngx-composite-lib-react/i18n/',
        '.ngx-composite-lib.json'
    );
}

// In your module
TranslateModule.forRoot({
    loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
    }
})
```

**Available Languages:**
- English (en)
- German (de)
- Spanish (es)
- French (fr)
- Hebrew (he)
- Hungarian (hu)
- Italian (it)
- Japanese (ja)
- Dutch (nl)
- Polish (pl)
- Portuguese (pt)
- Russian (ru)
- Chinese (zh)

Translation files are located at: `/node_modules/@pepperi-addons/ngx-composite-lib-react/i18n/`

## Usage Examples

### Basic Component

```tsx
import React, { useState } from 'react';
import { PepColorSettings } from '@pepperi-addons/ngx-composite-lib-react';

function MyComponent() {
    const [color, setColor] = useState('#FF5733');
    
    return (
        <PepColorSettings
            value={color}
            onValueChange={setColor}
        />
    );
}
```

### Advanced Components

```tsx
import React, { useState } from 'react';
import { 
    PepGenericFieldsBuilder,
    PepDataViewBuilder,
    PepMappingParameters 
} from '@pepperi-addons/ngx-composite-lib-react';

function FormBuilder() {
    const [fields, setFields] = useState([]);
    
    return (
        <PepGenericFieldsBuilder
            builderTitle="Form Fields"
            availableFields={availableFields}
            fields={fields}
            onFieldsChange={setFields}
        />
    );
}
```

## Features

- ✅ **15 Production-Ready Components** - All tested and working
- ✅ **Full TypeScript Support** - Complete type definitions
- ✅ **React-Friendly API** - Idiomatic React patterns
- ✅ **Event Handling** - Proper event propagation
- ✅ **React 17+ & 18+ Compatible** - Works with modern React
- ✅ **Comprehensive Documentation** - Full API reference included

## License

MIT