@quartal/bridge-client/examples/README.md

Universal client library for embedding applications with URL-configurable transport support (iframe, postMessage) and framework adapters for Angular and Vue

# Quartal Client Examples

This directory contains production-ready, complete examples for integrating the Quartal Client library.

## Examples Overview

### Angular Examples

- **[angular-parent-with-manager.example.ts](./angular-parent-with-manager.example.ts)**
  - Complete Angular iframe component using `ParentClientManager`
  - Includes lifecycle management, error handling, and navigation sync
  - Copy-paste ready for parent applications

- **[angular-child-with-adapter.example.ts](./angular-child-with-adapter.example.ts)**
  - Complete Angular service using `QuartalAngularAdapter`
  - Includes app settings, fast actions, storage sync, and HTTP tracking
  - Copy-paste ready for child applications

### Vue Examples

- **[vue-parent-with-manager.example.ts](./vue-parent-with-manager.example.ts)**
  - Complete Vue 3 composable using `ParentClientManager`
  - Composition API pattern with reactive state management
  - Copy-paste ready for parent applications

- **[vue-child-with-adapter.example.ts](./vue-child-with-adapter.example.ts)**
  - Complete Vue 3 composable using `QuartalVueAdapter`
  - Includes reactive state, lifecycle hooks, and service integrations
  - Copy-paste ready for child applications

## Key Differences from README Examples

| Feature | README | Examples |
|---------|--------|----------|
| **Scope** | Basic integration patterns | Production-ready implementations |
| **Error Handling** | Basic | Comprehensive with try/catch |
| **Services** | Core services only | Full service integration (HTTP, Storage, etc.) |
| **Lifecycle** | Essential methods | Complete component lifecycle |
| **Customization** | Generic examples | Extensible base classes/composables |
| **Documentation** | Inline comments | Detailed JSDoc and usage notes |

## Usage

1. Choose the example that matches your framework and role (parent/child)
2. Copy the relevant example file to your project
3. Customize the interfaces and methods for your specific needs
4. Follow the usage comments in each file

## Framework-Specific Notes

### Angular
- Uses dependency injection patterns
- Includes RxJS observables for reactive programming
- Follows Angular lifecycle hooks (ngOnInit, ngOnDestroy)

### Vue 3
- Uses Composition API with `ref()` and `computed()`
- Includes Vue lifecycle hooks (onMounted, onUnmounted)
- Reactive state management patterns

## Integration Checklist

When implementing these examples:

- [ ] Update interfaces to match your app's data structures
- [ ] Implement your authentication/user service
- [ ] Configure your storage service
- [ ] Set up HTTP status tracking (if needed)
- [ ] Customize URL transformation logic
- [ ] Add your app-specific error handling
- [ ] Configure debug logging for your environment
- [ ] Test iframe communication in your setup

## Support

For questions about these examples:
1. Check the main README.md for basic concepts
2. Review the API Reference section
3. Test with debug logging enabled
4. Check browser console for communication issues