Components & Directives

Reusable Angular components and directives for storage management

Storage Components & Directives

🎯 Overview

Our storage system includes a comprehensive set of reusable Angular components and directives that make it incredibly easy to add advanced storage functionality to any application.

Key Features

🎯 Storage Configuration Directive

Quick Start

The uxStorageConfig directive provides instant right-click storage configuration for any element:

import { StorageConfigDirective } from '@storage/angular';

@Component({
  imports: [StorageConfigDirective],
  template: `
    <!-- Right-click to configure storage -->
    <div uxStorageConfig="user/profile">
      User profile content
    </div>
    
    <!-- With custom options -->
    <div uxStorageConfig="app/settings" 
         [storageOptions]="{
           autoSync: true,
           collection: 'app-data',
           database: 'g-space-db-ent',
           strategy: 'durable',
           enableFirebase: true
         }">
      Application settings
    </div>
  `
})
export class MyComponent {}

Configuration Options

interface StorageOptions {
  autoSync?: boolean;           // Enable automatic cloud sync
  collection?: string;          // Firebase collection name
  database?: 'g-space-db-standard' | 'g-space-db-ent';
  namespace?: string;           // Storage namespace
  strategy?: 'speed' | 'balanced' | 'durable';
  enableFirebase?: boolean;     // Enable Firebase integration
}

Portal Features

When you right-click on an element with the directive, you get:

📊 Data Visualization Components

Collection Data Visualizer

Professional data visualization with multiple view formats:

import { CollectionDataVisualizerComponent } from '@storage/angular';

@Component({
  imports: [CollectionDataVisualizerComponent],
  template: `
    <ux-collection-data-visualizer
      [collectionName]="collectionName"
      [collectionData]="collectionData"
      [collectionStats]="collectionStats"
      [isLoading]="isLoading"
      (importData)="onImportData()"
      (exportData)="onExportData()"
      (clearData)="onClearData()"
      (viewDocument)="onViewDocument($event)"
      (editDocument)="onEditDocument($event)"
      (deleteDocument)="onDeleteDocument($event)">
    </ux-collection-data-visualizer>
  `
})
export class DataManagementComponent {
  collectionName = signal('user-data');
  collectionData = signal<CollectionDocument[]>([]);
  collectionStats = signal<CollectionStats | null>(null);
  isLoading = signal(false);
}

View Formats

Features

🗂️ Collection Management Components

Collection Manager

Easy collection selection and management:

import { CollectionManagerComponent } from '@storage/angular';

@Component({
  imports: [CollectionManagerComponent],
  template: `
    <ux-collection-manager
      [availableCollections]="availableCollections"
      [selectedCollection]="selectedCollection"
      [selectedDatabase]="selectedDatabase"
      [isDiscoveringCollections]="isDiscovering"
      (databaseChange)="onDatabaseChange($event)"
      (collectionChange)="onCollectionChange($event)"
      (discoverCollections)="onDiscoverCollections()"
      (createNewCollection)="onCreateNewCollection($event)"
      (switchToCollection)="onSwitchToCollection($event)"
      (loadAllData)="onLoadAllData()"
      (analyzeSchema)="onAnalyzeSchema()">
    </ux-collection-manager>
  `
})
export class CollectionComponent {}

Features

🛠️ Advanced Collection Tools

Advanced Tools Component

Enterprise-grade data management tools:

import { AdvancedCollectionToolsComponent } from '@storage/angular';

@Component({
  imports: [AdvancedCollectionToolsComponent],
  template: `
    <ux-advanced-collection-tools
      [collectionName]="collectionName"
      [selectedDocuments]="selectedDocuments"
      (inspectSchema)="onInspectSchema()"
      (executeBulkOperation)="onExecuteBulkOperation($event)"
      (compareCollections)="onCompareCollections($event)"
      (analyzePerformance)="onAnalyzePerformance()"
      (openMigrationTool)="onOpenMigrationTool($event)"
      (toggleRealtimeMonitoring)="onToggleRealtimeMonitoring($event)">
    </ux-advanced-collection-tools>
  `
})
export class AdvancedDataComponent {}

Tool Categories

🔍 Schema Inspector

📦 Bulk Operations

⚖️ Collection Comparison

📈 Performance Analytics

🎮 Complete Integration Example

All Components Together

Here's how to use all components together for a complete storage management interface:

import { Component, signal } from '@angular/core';
import { 
  StorageConfigDirective,
  CollectionDataVisualizerComponent,
  CollectionManagerComponent,
  AdvancedCollectionToolsComponent
} from '@storage/angular';

@Component({
  selector: 'app-storage-dashboard',
  imports: [
    StorageConfigDirective,
    CollectionDataVisualizerComponent,
    CollectionManagerComponent,
    AdvancedCollectionToolsComponent
  ],
  template: `
    <div class="storage-dashboard">
      <!-- Right-click anywhere for storage config -->
      <div uxStorageConfig="dashboard/main">
        
        <!-- Collection Management -->
        <ux-collection-manager
          [availableCollections]="collections"
          [selectedCollection]="selectedCollection"
          (collectionChange)="onCollectionChange($event)">
        </ux-collection-manager>

        <!-- Data Visualization -->
        <ux-collection-data-visualizer
          [collectionName]="selectedCollection"
          [collectionData]="collectionData"
          (importData)="loadData()">
        </ux-collection-data-visualizer>

        <!-- Advanced Tools -->
        <ux-advanced-collection-tools
          [collectionName]="selectedCollection"
          [selectedDocuments]="selectedDocs"
          (analyzePerformance)="analyzePerformance()">
        </ux-advanced-collection-tools>

      </div>
    </div>
  `
})
export class StorageDashboardComponent {
  collections = signal(['users', 'products', 'orders']);
  selectedCollection = signal('users');
  collectionData = signal([]);
  selectedDocs = signal([]);
}

🚀 Integration with Mock API

Storage Configuration Endpoints

Our Mock API integration includes comprehensive storage configuration endpoints:

import { enableStorageConfigEndpoints } from '@mock-api/storage';

// app.config.ts
providers: [
  provideMockAPIService({
    enabled: true,
    mocks: {
      ...enableStorageConfigEndpoints(),
      // Your other endpoints...
    }
  })
]

Available Endpoints

🎯 Best Practices

1. Component Organization

// ✅ GOOD: Separate concerns with focused components
@Component({
  template: `
    <!-- Collection management -->
    <ux-collection-manager></ux-collection-manager>
    
    <!-- Data visualization -->  
    <ux-collection-data-visualizer></ux-collection-data-visualizer>
    
    <!-- Advanced operations -->
    <ux-advanced-collection-tools></ux-advanced-collection-tools>
  `
})

// ❌ AVOID: One massive component handling everything
@Component({
  template: `<div><!-- 2000+ lines of mixed functionality --></div>`
})

2. Right-Click Configuration

// ✅ GOOD: Semantic storage keys with appropriate options
<div uxStorageConfig="user/preferences" 
     [storageOptions]="{ strategy: 'durable', enableFirebase: true }">

// ✅ GOOD: Different strategies for different data types
<div uxStorageConfig="cache/temp-data"
     [storageOptions]="{ strategy: 'speed', autoSync: false }">

// ❌ AVOID: Generic keys without context
<div uxStorageConfig="data1">

3. Event Handling

// ✅ GOOD: Handle component events appropriately
onAnalyzePerformance(): void {
  // Get real performance metrics
  const stats = this.storage.getPerformanceStats();
  const microStats = this.storage.getMicroCacheStats();
  
  // Display results or update UI
  this.showPerformanceResults(stats, microStats);
}

// ❌ AVOID: Ignoring component events
onAnalyzePerformance(): void {
  // Do nothing - wastes user interaction
}

📊 Component API Reference

CollectionDataVisualizerComponent

Inputs

Outputs

CollectionManagerComponent

Inputs

Outputs

AdvancedCollectionToolsComponent

Inputs

Outputs

🎨 Styling and Theming

CSS Custom Properties

Components use CSS custom properties for easy theming:

:root {
  --storage-primary-color: #3b82f6;
  --storage-success-color: #10b981;
  --storage-warning-color: #f59e0b;
  --storage-danger-color: #ef4444;
  --storage-border-radius: 8px;
  --storage-spacing: 1rem;
}

Component Classes

Each component includes semantic CSS classes for custom styling:

/* Collection Manager */
.collection-manager .collection-select { /* ... */ }
.collection-manager .btn-create { /* ... */ }

/* Data Visualizer */
.collection-data-visualizer .data-table { /* ... */ }
.collection-data-visualizer .json-view { /* ... */ }

/* Advanced Tools */
.advanced-collection-tools .tool-card { /* ... */ }
.advanced-collection-tools .bulk-controls { /* ... */ }

🧪 Testing Integration

Component Testing

// component.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { CollectionDataVisualizerComponent } from '@storage/angular';

describe('CollectionDataVisualizerComponent', () => {
  let component: CollectionDataVisualizerComponent;
  let fixture: ComponentFixture<CollectionDataVisualizerComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [CollectionDataVisualizerComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(CollectionDataVisualizerComponent);
    component = fixture.componentInstance;
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should emit importData event', () => {
    spyOn(component.importData, 'emit');
    component.onImportData();
    expect(component.importData.emit).toHaveBeenCalled();
  });
});

Directive Testing

// directive.spec.ts
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { StorageConfigDirective } from '@storage/angular';

@Component({
  template: '<div uxStorageConfig="test/key">Test content</div>',
  imports: [StorageConfigDirective]
})
class TestComponent {}

describe('StorageConfigDirective', () => {
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [TestComponent]
    }).compileComponents();

    fixture = TestBed.createComponent(TestComponent);
  });

  it('should respond to right-click', () => {
    const divElement = fixture.nativeElement.querySelector('div');
    const event = new MouseEvent('contextmenu', { bubbles: true });
    
    divElement.dispatchEvent(event);
    // Test portal opening logic
  });
});

🚀 Production Deployment

Library Build

# Build storage libraries with components
yarn nx build storage-core storage-angular

# Verify exports
yarn nx build ux-test --dry-run

App Integration

// app.config.ts - Complete setup
import { 
  provideGgStorage,
  StorageConfigDirective,
  CollectionDataVisualizerComponent,
  CollectionManagerComponent,
  AdvancedCollectionToolsComponent
} from '@storage/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    // Storage system with all features
    ...provideGgStorage({
      namespace: 'production-app',
      strategy: 'balanced',
      performance: {
        adaptiveStrategy: true,
        redundancy: true,
        monitoring: true,
        batchProcessing: true
      }
    }),
    
    // Other providers...
  ]
};

// Import components in your modules
@Component({
  imports: [
    StorageConfigDirective,
    CollectionDataVisualizerComponent,
    CollectionManagerComponent,
    AdvancedCollectionToolsComponent
  ]
})
export class ProductionComponent {}

🎯 Live Examples

Try the Components

Visit these live examples in the UX Test app:

  1. Storage Directive Demo - Right-click configuration
  2. Easy Integration Demo - Simple integration examples
  3. Complete Integration - All components working together
  4. Firebase Production Demo - Enterprise-grade Firebase management
  5. API Sync Demo - REST API integration
  6. Firestore Sync Demo - Real Firebase sync

What You Can Do

🏆 Summary

Our storage components and directives provide:

🎯 For Developers

🎨 For Users

🏢 For Enterprise

Your storage system now includes world-class UI components that make data management intuitive, powerful, and enjoyable! 🌟

Documentation updated: January 28, 2025
Components ready for production deployment ⭐