🏥 Medical Template Renderer

Dynamic medical template renderer library jo kisi bhi frontend framework mein use ho sakta hai - Angular, React, Vue, Knockout, ya vanilla JavaScript.

✨ Features

• ✅ Dynamic Template Rendering - API response se automatically forms generate karta hai
• ✅ Framework Agnostic - Angular, React, Vue, Knockout, Legacy apps sabhi mein kaam karta hai
• ✅ Type Safe - Complete TypeScript support
• ✅ Reactive Forms - Angular Reactive Forms ke saath built-in validation
• ✅ Web Components - Standard web components ke through integration
• ✅ Zero Dependencies - Sirf Angular peer dependencies

📦 Installation

NPM se install karein:

npm install @medical/template-renderer

Yarn se:

yarn add @medical/template-renderer

🚀 Usage

1. Angular Application mein

Step 1: Module import karein

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MedicalTemplateRendererModule } from '@medical/template-renderer';

@NgModule({
  imports: [
    BrowserModule,
    MedicalTemplateRendererModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 2: Component mein use karein

import { Component, OnInit } from '@angular/core';
import { TemplateRendererService, ParsedTemplate } from '@medical/template-renderer';

@Component({
  selector: 'app-medical-form',
  template: `
    <app-dynamic-form 
      *ngIf="template"
      [template]="template"
      (formSubmit)="onSubmit($event)">
    </app-dynamic-form>
  `
})
export class MedicalFormComponent implements OnInit {
  template: ParsedTemplate | null = null;

  constructor(private renderer: TemplateRendererService) {}

  ngOnInit() {
    // API se response milne ke baad
    const apiResponse = { /* your API data */ };
    this.template = this.renderer.parseTemplate(apiResponse);
  }

  onSubmit(formData: any) {
    console.log('Form submitted:', formData);
    // API call to save data
  }
}

2. React Application mein

Step 1: Web Components enable karein

// main.tsx ya index.tsx mein
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { Injector } from '@angular/core';
import { MedicalTemplateRendererModule } from '@medical/template-renderer';

// Web Components register karein
const platform = platformBrowserDynamic();
platform.bootstrapModule(MedicalTemplateRendererModule)
  .then(ref => {
    const injector = ref.injector;
    MedicalTemplateRendererModule.registerWebComponents(injector);
  });

Step 2: React component mein use karein

import React, { useEffect, useRef } from 'react';

function MedicalForm() {
  const formRef = useRef<any>(null);

  useEffect(() => {
    // API se data fetch karein
    fetch('/api/template/123')
      .then(res => res.json())
      .then(data => {
        if (formRef.current) {
          formRef.current.template = data;
        }
      });

    // Form submit event listener
    const handleSubmit = (event: CustomEvent) => {
      console.log('Form data:', event.detail);
    };

    formRef.current?.addEventListener('formSubmit', handleSubmit);

    return () => {
      formRef.current?.removeEventListener('formSubmit', handleSubmit);
    };
  }, []);

  return <medical-dynamic-form ref={formRef}></medical-dynamic-form>;
}

// TypeScript declaration (types/custom-elements.d.ts)
declare global {
  namespace JSX {
    interface IntrinsicElements {
      'medical-dynamic-form': any;
    }
  }
}

3. Vue Application mein

Step 1: Web Components setup (main.js)

import { createApp } from 'vue';
import App from './App.vue';

// Web Components register karein (same as React)
// ... (registration code)

const app = createApp(App);
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('medical-');
app.mount('#app');

Step 2: Component mein use karein

<template>
  <div>
    <medical-dynamic-form 
      ref="medicalForm"
      @formSubmit="handleSubmit">
    </medical-dynamic-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const medicalForm = ref(null);

onMounted(async () => {
  const response = await fetch('/api/template/123');
  const data = await response.json();
  
  if (medicalForm.value) {
    medicalForm.value.template = data;
  }
});

const handleSubmit = (event) => {
  console.log('Form submitted:', event.detail);
};
</script>

4. Knockout.js (Legacy) mein

<!-- HTML -->
<div id="app">
  <medical-dynamic-form data-bind="event: { formSubmit: onSubmit }"></medical-dynamic-form>
</div>

<script>
  // Web Components load karein
  // ... (registration code)

  function AppViewModel() {
    var self = this;

    // Template set karein
    fetch('/api/template/123')
      .then(res => res.json())
      .then(data => {
        document.querySelector('medical-dynamic-form').template = data;
      });

    self.onSubmit = function(data, event) {
      console.log('Form data:', event.detail);
    };
  }

  ko.applyBindings(new AppViewModel());
</script>

5. Vanilla JavaScript mein

<!DOCTYPE html>
<html>
<head>
  <!-- Web Components polyfill (IE11 support) -->
  <script src="https://unpkg.com/@webcomponents/[email protected]/webcomponents-loader.js"></script>
  
  <!-- Angular Elements bundle -->
  <script src="https://unpkg.com/@medical/template-renderer/bundles/medical-template-renderer.umd.js"></script>
</head>
<body>
  <div id="form-container"></div>

  <script>
    // Wait for web components to load
    window.addEventListener('WebComponentsReady', function() {
      const formElement = document.createElement('medical-dynamic-form');
      
      // Fetch template data
      fetch('/api/template/123')
        .then(res => res.json())
        .then(data => {
          formElement.template = data;
        });

      // Handle form submission
      formElement.addEventListener('formSubmit', function(e) {
        console.log('Form data:', e.detail);
        // Submit to API
      });

      document.getElementById('form-container').appendChild(formElement);
    });
  </script>
</body>
</html>

📋 API Reference

TemplateRendererService

class TemplateRendererService {
  // API response ko parse karke template banata hai
  parseTemplate(apiResponse: any): ParsedTemplate;
  
  // Form data ko API format mein convert karta hai
  serializeFormData(formGroup: FormGroup): any;
}

ParsedTemplate Interface

interface ParsedTemplate {
  metadata: {
    templateId: string;
    templateName: string;
    version: string;
    properties: Record<string, string>;
  };
  sections: TemplateSection[];
  formGroup: FormGroup; // Angular Reactive Form
}

Component Events

formSubmit

Form submit hone par trigger hota hai

formElement.addEventListener('formSubmit', (event: CustomEvent) => {
  console.log(event.detail); // { formData: {...}, isValid: boolean }
});

formChange

Koi bhi field change hone par trigger hota hai

formElement.addEventListener('formChange', (event: CustomEvent) => {
  console.log(event.detail); // { fieldName: string, value: any }
});

🔧 Configuration

Custom Styles

// Override library styles
medical-dynamic-form {
  --primary-color: #007bff;
  --error-color: #dc3545;
  --border-radius: 4px;
  --spacing: 1rem;
}

API Base URL

import { MedicalDocumentApiService } from '@medical/template-renderer';

// Service inject karke base URL set karein
@Injectable()
export class AppConfig {
  constructor(private apiService: MedicalDocumentApiService) {
    apiService.setBaseUrl('https://your-api.com');
  }
}

📝 Example API Response

{
  "id": 1156,
  "documentMetadata": {
    "title": "ADMISSION MD ASSESSMENT",
    "patientName": "CAREVUE,INPATIENT",
    "mrn": "120720222"
  },
  "content": {
    "e": "document",
    "a": { "template": "AMDA" },
    "c": [
      {
        "e": "section",
        "a": { "sectionname": "Patient Information" },
        "c": [
          {
            "e": "textinput",
            "a": { "inputrequired": "yes" }
          }
        ]
      }
    ]
  }
}

🏗️ Build Library

# Library build karein
npm run build:lib

# Package create karein
cd dist/medical-template-renderer
npm pack

📄 License

MIT License - Feel free to use in your projects!

🤝 Contributing

Contributions welcome! Please read CONTRIBUTING.md for details.

📧 Support

Issues? Questions? Create an issue on GitHub or contact support.

Made with ❤️ for Healthcare Applications