df-ae-forms-package 1.0.0 → 1.0.1

package/QUICK-START.md

@@ -0,0 +1,205 @@
+# Quick Start Guide - Ionic/Angular Integration
+
+This is a condensed quick start guide. For detailed documentation, see [INTEGRATION-GUIDE.md](./INTEGRATION-GUIDE.md).
+
+## 1. Install Dependencies
+
+```bash
+npm install df-ae-forms-package react react-dom react-i18next lucide-react @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
+npm install --save-dev @types/react @types/react-dom
+```
+
+## 2. Add Styles
+
+In `src/global.scss`:
+
+```scss
+@import '~df-ae-forms-package/dist/index.css';
+```
+
+## 3. Create React Wrapper Service
+
+Create `src/app/services/react-wrapper.service.ts`:
+
+```typescript
+import { Injectable, ApplicationRef } from '@angular/core';
+import { createElement } from 'react';
+import { createRoot, Root } from 'react-dom/client';
+
+@Injectable({ providedIn: 'root' })
+export class ReactWrapperService {
+  private reactRoots: Map<string, Root> = new Map();
+
+  renderReactComponent(containerId: string, component: any, props: any): void {
+    setTimeout(() => {
+      try {
+        const container = document.getElementById(containerId);
+        if (!container) return;
+
+        container.innerHTML = '';
+        let root = this.reactRoots.get(containerId);
+        if (root) {
+          root.unmount();
+        }
+        root = createRoot(container);
+        this.reactRoots.set(containerId, root);
+        root.render(createElement(component, props));
+      } catch (error) {
+        console.error('Error rendering React component:', error);
+      }
+    }, 0);
+  }
+
+  unmountReactComponent(containerId: string): void {
+    const root = this.reactRoots.get(containerId);
+    if (root) {
+      root.unmount();
+      this.reactRoots.delete(containerId);
+    }
+  }
+}
+```
+
+## 4. Setup i18n
+
+Create `src/app/services/react-i18n.service.ts`:
+
+```typescript
+import { Injectable } from '@angular/core';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+@Injectable({ providedIn: 'root' })
+export class ReactI18nService {
+  async initialize(): Promise<void> {
+    await i18n.use(initReactI18next).init({
+      resources: {
+        en: { translation: { 'formBuilder.submit': 'Submit' } }
+      },
+      lng: 'en',
+      fallbackLng: 'en'
+    });
+  }
+}
+```
+
+## 5. Create Form Component
+
+Create `src/app/components/form-preview/form-preview.component.ts`:
+
+```typescript
+import { Component, OnInit, OnDestroy, Input, ViewChild, ElementRef, AfterViewInit, ChangeDetectorRef } from '@angular/core';
+import { ReactWrapperService } from '../../services/react-wrapper.service';
+import { ReactI18nService } from '../../services/react-i18n.service';
+import type { FormComponentType, DfFormPreviewProps } from 'df-ae-forms-package';
+
+@Component({
+  selector: 'app-form-preview',
+  template: `
+    <div *ngIf="loading">Loading...</div>
+    <div #reactContainer [id]="containerId" [style.display]="loading ? 'none' : 'block'"></div>
+  `,
+  styles: [`[id^="df-form-container"] { width: 100%; }`]
+})
+export class FormPreviewComponent implements OnInit, AfterViewInit, OnDestroy {
+  @Input() formComponents: FormComponentType[] = [];
+  @Input() formData: Record<string, any> = {};
+  @Input() mode: 'edit' | 'preview' | 'test' = 'test';
+
+  @ViewChild('reactContainer') container!: ElementRef;
+  loading = true;
+  containerId = `df-form-container-${Math.random().toString(36).substr(2, 9)}`;
+  private DfFormPreview: any = null;
+
+  constructor(
+    private reactWrapper: ReactWrapperService,
+    private reactI18n: ReactI18nService,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  async ngOnInit(): Promise<void> {
+    await this.reactI18n.initialize();
+    // Dynamically import to avoid initialization issues
+    const module = await import('df-ae-forms-package');
+    this.DfFormPreview = module.DfFormPreview;
+    this.loading = false;
+    this.cdr.detectChanges();
+  }
+
+  ngAfterViewInit(): void {
+    setTimeout(() => this.renderForm(), 0);
+  }
+
+  ngOnDestroy(): void {
+    this.reactWrapper.unmountReactComponent(this.containerId);
+  }
+
+  private renderForm(): void {
+    if (!this.container || !this.DfFormPreview) return;
+
+    const props: DfFormPreviewProps = {
+      formComponents: this.formComponents,
+      initialFormData: this.formData,
+      mode: this.mode,
+      currentDevice: 'desktop',
+      onSubmit: (data) => console.log('Submitted:', data),
+      onFormDataChange: (data) => console.log('Changed:', data)
+    };
+
+    this.reactWrapper.renderReactComponent(this.containerId, this.DfFormPreview, props);
+  }
+}
+```
+
+## 6. Use in Your Page
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import type { FormComponentType } from 'df-ae-forms-package';
+
+@Component({
+  template: `
+    <ion-content>
+      <app-form-preview
+        [formComponents]="formComponents"
+        [formData]="formData"
+        [mode]="'test'"
+      ></app-form-preview>
+    </ion-content>
+  `
+})
+export class MyPage implements OnInit {
+  formComponents: FormComponentType[] = [];
+  formData: Record<string, any> = {};
+
+  constructor(private http: HttpClient) {}
+
+  ngOnInit(): void {
+    // Load form from API
+    this.http.get<{ components: FormComponentType[] }>('YOUR_API_URL')
+      .subscribe(data => {
+        this.formComponents = data.components;
+      });
+  }
+}
+```
+
+## 7. Register in Module
+
+```typescript
+import { FormPreviewComponent } from './components/form-preview/form-preview.component';
+import { ReactWrapperService } from './services/react-wrapper.service';
+import { ReactI18nService } from './services/react-i18n.service';
+
+@NgModule({
+  declarations: [FormPreviewComponent],
+  providers: [ReactWrapperService, ReactI18nService]
+})
+export class AppModule {}
+```
+
+That's it! Your form should now render with all styles and functionality.
+
+For complete documentation, see [INTEGRATION-GUIDE.md](./INTEGRATION-GUIDE.md).
+

package/README.md

@@ -10,7 +10,6 @@ A comprehensive React form preview component library with form controls, validat
 - 🎯 **Conditional Logic**: Show/hide fields based on other field values
 - 📊 **Threshold Alerts**: Visual alerts when threshold conditions are met
 - 📝 **Component Actions**: Add notes, attachments, send emails, and raise issues for form components
-- 🌐 **Internationalization**: Built-in i18n support via react-i18next
 - 📱 **Device Preview**: Preview forms in different device sizes
 - 🎨 **Customizable Styling**: CSS variables for easy theming
 - 📦 **TypeScript**: Full TypeScript support with comprehensive type definitions
@@ -27,9 +26,11 @@ npm install df-ae-forms-package
 This package requires the following peer dependencies to be installed in your project:
 
 ```bash
-npm install react react-dom react-i18next lucide-react @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
+npm install react react-dom lucide-react @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
 ```
 
+**Note**: Translation dependencies have been removed. The package no longer requires `react-i18next` or `i18next`.
+
 ## Quick Start
 
 ### 1. Import CSS
@@ -40,30 +41,7 @@ First, import the package styles in your application:
 import 'df-ae-forms-package/dist/index.css';
 ```
 
-### 2. Setup i18n (Required)
-
-The package uses `react-i18next` for internationalization. You must set up i18n in your application:
-
-```tsx
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-
-i18n
-  .use(initReactI18next)
-  .init({
-    resources: {
-      en: {
-        translation: {
-          'formBuilder.submit': 'Submit'
-        }
-      }
-    },
-    lng: 'en',
-    fallbackLng: 'en'
-  });
-```
-
-### 3. Use the Component
+### 2. Use the Component
 
 ```tsx
 import React from 'react';
@@ -394,12 +372,32 @@ npm publish
 
 ## Integration with Angular/Ionic
 
-This package is designed to work with Angular/Ionic applications. To use it:
+This package is designed to work with Angular/Ionic applications. 
+
+### Documentation
+
+- **[Quick Start Guide](./QUICK-START.md)** - Get up and running in 5 minutes
+- **[Complete Integration Guide](./INTEGRATION-GUIDE.md)** - Detailed step-by-step instructions with examples
 
-1. Install the package and peer dependencies
-2. Import the CSS file in your Angular application
-3. Use React components via `@angular/react` or a similar bridge
-4. Ensure i18n is properly configured
+### Quick Overview
+
+1. **Install dependencies:**
+   ```bash
+   npm install df-ae-forms-package react react-dom lucide-react @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities
+   ```
+
+2. **Import styles** in `src/global.scss`:
+   ```scss
+   @import '~df-ae-forms-package/dist/index.css';
+   ```
+
+3. **Set up React bridge** (see [Integration Guide](./INTEGRATION-GUIDE.md))
+
+4. **Load form data from API** and pass to the component
+
+For complete instructions, code examples, API integration, styling, and troubleshooting, see:
+- **[Quick Start Guide](./QUICK-START.md)** - For a condensed setup guide
+- **[Integration Guide](./INTEGRATION-GUIDE.md)** - For comprehensive documentation
 
 ## Troubleshooting
 
@@ -415,11 +413,6 @@ This package is designed to work with Angular/Ionic applications. To use it:
 - Verify that conditional logic is not hiding components
 - Ensure that component IDs are unique
 
-### i18n Issues
-
-- Make sure `react-i18next` is properly configured
-- Verify that translation keys exist in your i18n resources
-- Check that the i18n provider wraps your application
 
 ## Contributing
 
@@ -453,6 +446,5 @@ For issues and questions:
 - Component actions (notes, attachments, email, raise issue)
 - Responsive design
 - TypeScript support
-- i18n support
 - Drag and drop support (edit mode)
 

package/TROUBLESHOOTING.md

@@ -0,0 +1,398 @@
+# Troubleshooting Guide
+
+## Common Issues and Solutions
+
+### Issue: "Cannot access 'qi' before initialization" Error
+
+**Error Message:**
+```
+ReferenceError: Cannot access 'qi' before initialization
+    at Module.DfFormPreview
+```
+
+**Cause:**
+This error occurs due to circular dependencies or timing issues when importing the React component in Angular.
+
+**Solution:**
+
+1. **Use Dynamic Imports** - Import the component asynchronously:
+
+```typescript
+// In your component
+async ngOnInit(): Promise<void> {
+  await this.reactI18n.initialize();
+  
+  // Dynamically import to avoid initialization issues
+  const module = await import('df-ae-forms-package');
+  this.DfFormPreview = module.DfFormPreview;
+  this.loading = false;
+  this.cdr.detectChanges();
+}
+```
+
+2. **Use setTimeout in renderForm**:
+
+```typescript
+ngAfterViewInit(): void {
+  setTimeout(() => {
+    this.renderForm();
+  }, 0);
+}
+```
+
+3. **Update ReactWrapperService** to use setTimeout:
+
+```typescript
+renderReactComponent(containerId: string, component: any, props: any): void {
+  setTimeout(() => {
+    // ... rendering code
+  }, 0);
+}
+```
+
+4. **Ensure proper initialization order**:
+   - Initialize i18n first
+   - Then dynamically import the component
+   - Then render after view is initialized
+
+### Issue: Styles Not Applying
+
+**Symptoms:**
+- Form components render but without styles
+- CSS variables not working
+- Components look unstyled
+
+**Solutions:**
+
+1. **Check CSS Import:**
+   ```scss
+   // In src/global.scss or src/styles.scss
+   @import '~df-ae-forms-package/dist/index.css';
+   ```
+
+2. **Verify Build Configuration:**
+   - Ensure Angular is configured to include node_modules CSS
+   - Check `angular.json`:
+     ```json
+     "styles": [
+       "node_modules/df-ae-forms-package/dist/index.css",
+       "src/styles.scss"
+     ]
+     ```
+
+3. **Check CSS Variables:**
+   ```scss
+   :root {
+     --df-color-primary: #3880ff;
+     // ... other variables
+   }
+   ```
+
+4. **Clear Build Cache:**
+   ```bash
+   rm -rf .angular
+   npm run build
+   ```
+
+### Issue: React Components Not Rendering
+
+**Symptoms:**
+- Container div is empty
+- No errors in console
+- Component doesn't appear
+
+**Solutions:**
+
+1. **Check Container Element:**
+   ```typescript
+   ngAfterViewInit(): void {
+     // Ensure container exists
+     if (!this.container?.nativeElement) {
+       console.error('Container not found');
+       return;
+     }
+     this.renderForm();
+   }
+   ```
+
+2. **Verify React Root Creation:**
+   ```typescript
+   // Check if React root is created
+   console.log('Container:', document.getElementById(containerId));
+   ```
+
+3. **Check for JavaScript Errors:**
+   - Open browser console
+   - Look for any React or module errors
+   - Check network tab for failed module loads
+
+4. **Ensure i18n is Initialized:**
+   ```typescript
+   async ngOnInit(): Promise<void> {
+     await this.reactI18n.initialize(); // Must complete first
+     // Then load component
+   }
+   ```
+
+### Issue: Form Data Not Loading from API
+
+**Symptoms:**
+- Form renders but is empty
+- API call succeeds but form doesn't update
+
+**Solutions:**
+
+1. **Check API Response Format:**
+   ```typescript
+   // Ensure API returns correct format
+   {
+     components: FormComponentType[] // Array of form components
+   }
+   ```
+
+2. **Verify Component Update:**
+   ```typescript
+   this.formService.getFormTemplate(id).subscribe({
+     next: (components) => {
+       this.formComponents = components;
+       this.cdr.detectChanges(); // Trigger change detection
+       // Re-render form if needed
+       setTimeout(() => this.renderForm(), 100);
+     }
+   });
+   ```
+
+3. **Check Input Binding:**
+   ```html
+   <app-form-preview
+     [formComponents]="formComponents"
+     [formData]="formData"
+   ></app-form-preview>
+   ```
+
+### Issue: Type Errors
+
+**Symptoms:**
+- TypeScript compilation errors
+- Type mismatches
+
+**Solutions:**
+
+1. **Install Type Definitions:**
+   ```bash
+   npm install --save-dev @types/react @types/react-dom
+   ```
+
+2. **Use Type Imports:**
+   ```typescript
+   import type { FormComponentType, DfFormPreviewProps } from 'df-ae-forms-package';
+   ```
+
+3. **Check TypeScript Configuration:**
+   ```json
+   {
+     "compilerOptions": {
+       "skipLibCheck": true,
+       "esModuleInterop": true
+     }
+   }
+   ```
+
+### Issue: i18n Not Working
+
+**Symptoms:**
+- Translation keys show as-is
+- "formBuilder.submit" instead of "Submit"
+
+**Solutions:**
+
+1. **Verify i18n Initialization:**
+   ```typescript
+   async ngOnInit(): Promise<void> {
+     await this.reactI18n.initialize(); // Must be awaited
+   }
+   ```
+
+2. **Check Translation Resources:**
+   ```typescript
+   resources: {
+     en: {
+       translation: {
+         'formBuilder.submit': 'Submit'
+       }
+     }
+   }
+   ```
+
+3. **Ensure react-i18next is Installed:**
+   ```bash
+   npm install react-i18next i18next
+   ```
+
+### Issue: Memory Leaks
+
+**Symptoms:**
+- Performance degrades over time
+- Multiple form instances in memory
+
+**Solutions:**
+
+1. **Always Unmount in ngOnDestroy:**
+   ```typescript
+   ngOnDestroy(): void {
+     this.reactWrapper.unmountReactComponent(this.containerId);
+   }
+   ```
+
+2. **Clean Up Subscriptions:**
+   ```typescript
+   private destroy$ = new Subject<void>();
+
+   ngOnInit(): void {
+     this.formService.getFormTemplate(id)
+       .pipe(takeUntil(this.destroy$))
+       .subscribe(/* ... */);
+   }
+
+   ngOnDestroy(): void {
+     this.destroy$.next();
+     this.destroy$.complete();
+     this.reactWrapper.unmountReactComponent(this.containerId);
+   }
+   ```
+
+### Issue: Form Submission Not Working
+
+**Symptoms:**
+- Submit button doesn't trigger
+- onSubmit callback not called
+
+**Solutions:**
+
+1. **Check onSubmit Prop:**
+   ```typescript
+   const props: DfFormPreviewProps = {
+     // ... other props
+     onSubmit: (formData: Record<string, any>) => {
+       console.log('Form submitted:', formData);
+       // Handle submission
+     }
+   };
+   ```
+
+2. **Verify Form Validation:**
+   - Check if validation errors are preventing submission
+   - Ensure all required fields are filled
+
+3. **Check Mode:**
+   ```typescript
+   mode: 'test' // Must be 'test' for interactive forms
+   ```
+
+### Issue: Conditional Logic Not Working
+
+**Symptoms:**
+- Fields don't show/hide based on conditions
+- Conditional logic seems ignored
+
+**Solutions:**
+
+1. **Verify Conditional Structure:**
+   ```typescript
+   conditional: {
+     action: 'show', // or 'hide'
+     when: 'all', // or 'any'
+     conditions: [{
+       fieldId: 'other-field-id',
+       operator: 'equals', // or other operators
+       value: 'expected-value'
+     }]
+   }
+   ```
+
+2. **Check Field IDs:**
+   - Ensure fieldId in conditions matches actual component IDs
+   - IDs must be unique
+
+3. **Verify Form Values:**
+   - Conditional logic uses current form values
+   - Ensure values are being tracked correctly
+
+### Issue: Performance Issues
+
+**Symptoms:**
+- Slow rendering
+- Laggy interactions
+
+**Solutions:**
+
+1. **Use OnPush Change Detection:**
+   ```typescript
+   @Component({
+     changeDetection: ChangeDetectionStrategy.OnPush
+   })
+   ```
+
+2. **Debounce Form Updates:**
+   ```typescript
+   import { debounceTime } from 'rxjs/operators';
+
+   onFormDataChange(formData: Record<string, any>): void {
+     // Debounce updates
+     this.updateSubject.next(formData);
+   }
+
+   private updateSubject = new Subject<Record<string, any>>();
+
+   ngOnInit(): void {
+     this.updateSubject.pipe(
+       debounceTime(300)
+     ).subscribe(data => {
+       // Handle updates
+     });
+   }
+   ```
+
+3. **Lazy Load Forms:**
+   - Only load form when needed
+   - Unmount when not visible
+
+## Getting Help
+
+If you're still experiencing issues:
+
+1. Check the browser console for detailed error messages
+2. Verify all dependencies are installed correctly
+3. Ensure you're using the latest version of the package
+4. Review the [Integration Guide](./INTEGRATION-GUIDE.md) for complete setup
+5. Check the [README](./README.md) for package-specific documentation
+
+## Debugging Tips
+
+1. **Enable React DevTools:**
+   ```bash
+   npm install --save-dev @types/react-dom
+   ```
+
+2. **Add Console Logs:**
+   ```typescript
+   private renderForm(): void {
+     console.log('Rendering form with:', {
+       components: this.formComponents.length,
+       data: this.formData,
+       container: this.container?.nativeElement
+     });
+     // ... rendering code
+   }
+   ```
+
+3. **Check Network Tab:**
+   - Verify module loads
+   - Check for failed requests
+   - Ensure CSS files load
+
+4. **Inspect DOM:**
+   - Check if React root is created
+   - Verify container element exists
+   - Look for React error boundaries
+