df-ae-forms-package/QUICK-START.md

A comprehensive React form preview component library with form controls, validation, and responsive design for Angular/Ionic integration

# 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).