@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

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

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

Setup

1. Include Angular Elements Bundle

Add to your 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:

// 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

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

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