@pepperi-addons/ngx-composite-lib-react 0.0.4 → 0.5.1

package/README.md

@@ -0,0 +1,129 @@
+# @pepperi-addons/ngx-composite-lib-react
+
+React wrappers for Pepperi ngx-composite-lib Angular Elements.
+
+## Version 0.5.1
+
+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
+
+Include the Angular Elements bundle in 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>
+```
+
+## 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