@pepperi-addons/ngx-composite-lib-react 0.5.0 → 0.5.2

package/README.md

@@ -1,10 +1,10 @@
 # @pepperi-addons/ngx-composite-lib-react
 
-Thin React wrappers for Pepperi ngx-composite-lib Angular Elements.
+React wrappers for Pepperi ngx-composite-lib Angular Elements.
 
-## Version 0.5.0
+## Version 0.5.2
 
-This package provides React wrappers for 10 fully converted Angular Elements from ngx-composite-lib:
+This package provides React wrappers for **15 fully converted Angular Elements** from ngx-composite-lib.
 
 ## Available Components
 
@@ -20,59 +20,156 @@ import {
     PepShowIfBadge,
     PepGenericList,
     PepFileStatusPanel,
+    PepGenericForm,
+    PepDataViewBuilder,
+    PepManageParameters,
+    PepMappingParameters,
+    PepGenericFieldsBuilder,
 } from '@pepperi-addons/ngx-composite-lib-react';
 ```
 
 ## Component Details
 
-- **PepColorSettings** - Color picker and settings component
-- **PepGroupButtonsSettings** - Group button configuration component
-- **PepFlowPickerButton** - Flow selection button component
-- **PepIconPicker** - Icon selection component
-- **PepPaddingSettings** - Padding configuration component
-- **PepShadowSettings** - Shadow configuration component
-- **PepRichText** - Rich text editor with Quill integration
-- **PepShowIfBadge** - Conditional badge display component
-- **PepGenericList** - Advanced data list with filtering and actions
-- **PepFileStatusPanel** - File status display with snackbar support
+### 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
 
-## Prerequisites
+### 1. Include Angular Elements Bundle
 
-Load the Elements bundle from `@pepperi-addons/ngx-composite-lib-elements` before using wrappers:
+Add to your HTML:
 
 ```html
-<script src="path/to/elements/main.js"></script>
+<!-- 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]
+    }
+})
 ```
 
-## Usage Example
+**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 from 'react';
-import { PepRichText, PepGenericList } from '@pepperi-addons/ngx-composite-lib-react';
+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 (
-        <div>
-            <PepRichText
-                value="<p>Hello World</p>"
-                onValueChange={(event) => console.log('Value changed:', event.detail)}
-            />
-            <PepGenericList
-                dataSource={myData}
-                onSelectionChanged={(event) => console.log('Selection:', event.detail)}
-            />
-        </div>
+        <PepGenericFieldsBuilder
+            builderTitle="Form Fields"
+            availableFields={availableFields}
+            fields={fields}
+            onFieldsChange={setFields}
+        />
     );
 }
 ```
 
 ## Features
 
-- ✅ Full Input/Output parity with Angular components
-- ✅ TypeScript support with proper type definitions
-- ✅ Event handling with React-friendly patterns
-- ✅ Consistent API across all components
-- ✅ Optimized for React 17+ and React 18+
+- ✅ **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
 

package/elements/3rdpartylicenses.txt

@@ -332,6 +332,32 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
 
+node-fetch
+MIT
+The MIT License (MIT)
+
+Copyright (c) 2016 David Frank
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+
+
 quill
 BSD-3-Clause
 Copyright (c) 2014, Jason Chen