angular-data-mapper 1.0.0

package/projects/demo-app/src/app/pages/schema-editor-page/schema-editor-page.component.scss

@@ -0,0 +1,317 @@
+/**
+ * Schema Editor Page Styles - Modern Professional Design
+ */
+
+.page-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: #f8fafc;
+}
+
+// Page Header
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 32px;
+  background: white;
+  border-bottom: 1px solid #e2e8f0;
+  flex-shrink: 0;
+
+  .header-left {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  h1 {
+    font-size: 20px;
+    font-weight: 600;
+    color: #0f172a;
+    margin: 0;
+    letter-spacing: -0.3px;
+  }
+
+  .subtitle {
+    font-size: 13px;
+    color: #64748b;
+    margin: 0;
+  }
+}
+
+// Main Content Area
+.page-main {
+  flex: 1;
+  display: flex;
+  min-height: 0;
+  overflow: hidden;
+}
+
+// Schema List Panel (Left Sidebar)
+.list-panel {
+  width: 280px;
+  flex-shrink: 0;
+  background: white;
+  border-right: 1px solid #e2e8f0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid #f1f5f9;
+
+  .list-title {
+    font-size: 12px;
+    font-weight: 600;
+    color: #64748b;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .add-schema-btn {
+    font-size: 11px;
+    font-weight: 500;
+    padding: 0 12px;
+    min-width: auto;
+    height: 28px;
+    line-height: 28px;
+    border-radius: 14px;
+  }
+}
+
+.list-content {
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
+.empty-list {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  color: #94a3b8;
+  text-align: center;
+
+  mat-icon {
+    font-size: 40px;
+    width: 40px;
+    height: 40px;
+    margin-bottom: 12px;
+    opacity: 0.4;
+  }
+
+  p {
+    margin: 0 0 16px 0;
+    font-size: 13px;
+  }
+
+  button {
+    font-size: 13px;
+
+    mat-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+      margin-right: 4px;
+    }
+  }
+}
+
+.schema-list {
+  padding: 8px 12px;
+}
+
+.schema-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.12s ease;
+  margin-bottom: 2px;
+  border: 1px solid transparent;
+
+  &:hover {
+    background: #f8fafc;
+
+    .schema-menu-btn {
+      opacity: 1;
+    }
+  }
+
+  &.active {
+    background: #f0f9ff;
+    border-color: #bae6fd;
+
+    .schema-icon {
+      color: #0284c7;
+    }
+
+    .schema-name {
+      color: #0369a1;
+    }
+  }
+
+  .schema-icon {
+    color: #94a3b8;
+    font-size: 18px;
+    width: 18px;
+    height: 18px;
+    flex-shrink: 0;
+  }
+
+  .schema-info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1px;
+  }
+
+  .schema-name {
+    font-size: 13px;
+    font-weight: 500;
+    color: #1e293b;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .schema-meta {
+    font-size: 11px;
+    color: #94a3b8;
+  }
+
+  .schema-menu-btn {
+    opacity: 0;
+    transition: opacity 0.12s ease;
+    color: #94a3b8;
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    mat-icon {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+}
+
+.list-footer {
+  padding: 12px 16px;
+  border-top: 1px solid #f1f5f9;
+
+  .import-btn {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    font-size: 13px;
+    color: #64748b;
+    border-color: #e2e8f0;
+
+    mat-icon {
+      font-size: 16px;
+      width: 16px;
+      height: 16px;
+    }
+
+    &:hover {
+      background: #f8fafc;
+      border-color: #cbd5e1;
+    }
+  }
+}
+
+// Editor Panel (Right Side)
+.editor-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+  background: #f8fafc;
+  padding: 24px;
+  gap: 16px;
+
+  schema-editor {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    background: white;
+    border-radius: 12px;
+    border: 1px solid #e2e8f0;
+    overflow: hidden;
+
+    // Theme the schema-editor component
+    --schema-editor-bg: white;
+    --schema-editor-shadow: none;
+    --schema-editor-border-radius: 0;
+    --schema-editor-accent-primary: #6366f1;
+    --schema-editor-header-bg: #fafafa;
+  }
+}
+
+.no-selection {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #94a3b8;
+  text-align: center;
+  background: #f8fafc;
+
+  mat-icon {
+    font-size: 48px;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+    opacity: 0.3;
+  }
+
+  p {
+    font-size: 14px;
+    margin: 0;
+    color: #64748b;
+  }
+}
+
+.delete-action {
+  color: #ef4444 !important;
+
+  mat-icon {
+    color: #ef4444;
+  }
+}
+
+// Responsive
+@media (max-width: 768px) {
+  .page-main {
+    flex-direction: column;
+  }
+
+  .list-panel {
+    width: 100%;
+    max-height: 200px;
+    border-right: none;
+    border-bottom: 1px solid #e2e8f0;
+  }
+}

package/projects/demo-app/src/app/pages/schema-editor-page/schema-editor-page.component.ts

@@ -0,0 +1,129 @@
+/**
+ * Schema Editor Page - Example usage of the SchemaEditorComponent
+ */
+import { Component, inject, signal, computed } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatMenuModule } from '@angular/material/menu';
+import { SchemaEditorComponent, JsonSchema } from '@expeed/ngx-data-mapper';
+import { AppStateService, StoredSchema } from '../../services/app-state.service';
+
+@Component({
+  selector: 'schema-editor-page',
+  standalone: true,
+  imports: [
+    CommonModule,
+    MatButtonModule,
+    MatIconModule,
+    MatSnackBarModule,
+    MatTooltipModule,
+    MatMenuModule,
+    SchemaEditorComponent,
+  ],
+  templateUrl: './schema-editor-page.component.html',
+  styleUrl: './schema-editor-page.component.scss',
+})
+export class SchemaEditorPageComponent {
+  private snackBar = inject(MatSnackBar);
+  appState = inject(AppStateService);
+
+  // Currently selected schema
+  selectedSchemaId = signal<string | null>(null);
+
+  // Computed: get the currently selected schema
+  selectedSchema = computed(() => {
+    const id = this.selectedSchemaId();
+    return this.appState.schemas().find(s => s.id === id) || null;
+  });
+
+  // --- Schema CRUD Operations ---
+
+  createNewSchema(): void {
+    const newSchema = this.appState.addSchema({
+      $schema: 'https://json-schema.org/draft/2020-12/schema',
+      type: 'object',
+      title: 'NewSchema',
+      properties: {},
+      required: [],
+    });
+    this.selectedSchemaId.set(newSchema.id);
+  }
+
+  selectSchema(id: string): void {
+    this.selectedSchemaId.set(id);
+  }
+
+  onSchemaChange(updated: JsonSchema): void {
+    const id = this.selectedSchemaId();
+    if (!id) return;
+    this.appState.updateSchema(id, updated);
+  }
+
+  duplicateSchema(schema: StoredSchema): void {
+    const newSchema = this.appState.addSchema({
+      ...JSON.parse(JSON.stringify(schema)),
+      title: (schema.title || 'Schema') + '_copy',
+    });
+    this.selectedSchemaId.set(newSchema.id);
+    this.snackBar.open('Schema duplicated', 'Close', { duration: 2000 });
+  }
+
+  deleteSchema(id: string): void {
+    this.appState.deleteSchema(id);
+    if (this.selectedSchemaId() === id) {
+      this.selectedSchemaId.set(null);
+    }
+    this.snackBar.open('Schema deleted', 'Close', { duration: 2000 });
+  }
+
+  // --- Export/Import ---
+
+  exportSchema(schema: StoredSchema): void {
+    const { id, ...jsonSchema } = schema;
+    const json = JSON.stringify(jsonSchema, null, 2);
+    const blob = new Blob([json], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = `${(schema.title || 'schema').toLowerCase()}.schema.json`;
+    link.click();
+
+    URL.revokeObjectURL(url);
+    this.snackBar.open('Schema exported as JSON Schema', 'Close', { duration: 2000 });
+  }
+
+  importSchema(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    if (!input.files?.length) return;
+
+    const file = input.files[0];
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      try {
+        const json = reader.result as string;
+        const data = JSON.parse(json) as JsonSchema;
+
+        const newSchema = this.appState.addSchema({
+          ...data,
+          title: data.title || 'ImportedSchema',
+        });
+        this.selectedSchemaId.set(newSchema.id);
+        this.snackBar.open('Schema imported', 'Close', { duration: 2000 });
+      } catch (error) {
+        this.snackBar.open('Failed to import: invalid file', 'Close', { duration: 3000 });
+      }
+    };
+
+    reader.readAsText(file);
+    input.value = '';
+  }
+
+  getPropertyCount(schema: StoredSchema): number {
+    return Object.keys(schema.properties || {}).length;
+  }
+}

package/projects/demo-app/src/app/services/app-state.service.ts

@@ -0,0 +1,233 @@
+import { Injectable, signal, computed } from '@angular/core';
+import { JsonSchema } from '@expeed/ngx-data-mapper';
+
+export interface StoredSchema extends JsonSchema {
+  id: string;
+}
+
+export interface StoredMapping {
+  id: string;
+  name: string;
+  sourceSchemaId: string;
+  targetSchemaId: string;
+  mappingData?: unknown; // The actual mapping configuration
+  createdAt: string;
+  updatedAt: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AppStateService {
+  // Schemas state
+  private _schemas = signal<StoredSchema[]>([]);
+  schemas = this._schemas.asReadonly();
+
+  // Mappings state
+  private _mappings = signal<StoredMapping[]>([]);
+  mappings = this._mappings.asReadonly();
+
+  constructor() {
+    this.loadFromStorage();
+  }
+
+  // --- Storage ---
+
+  private loadFromStorage(): void {
+    // Load schemas
+    const savedSchemas = localStorage.getItem('objectSchemas');
+    if (savedSchemas) {
+      try {
+        this._schemas.set(JSON.parse(savedSchemas));
+      } catch (e) {
+        console.error('Failed to load schemas:', e);
+      }
+    }
+
+    // If no schemas, add default sample schemas
+    if (this._schemas().length === 0) {
+      this.addDefaultSchemas();
+    }
+
+    // Load mappings
+    const savedMappings = localStorage.getItem('dataMappings');
+    if (savedMappings) {
+      try {
+        this._mappings.set(JSON.parse(savedMappings));
+      } catch (e) {
+        console.error('Failed to load mappings:', e);
+      }
+    }
+  }
+
+  // Reset to default schemas (clears existing and adds defaults)
+  resetToDefaults(): void {
+    localStorage.removeItem('objectSchemas');
+    localStorage.removeItem('dataMappings');
+    this._schemas.set([]);
+    this._mappings.set([]);
+    this.addDefaultSchemas();
+  }
+
+  private addDefaultSchemas(): void {
+    // Customer schema (source)
+    this.addSchema({
+      type: 'object',
+      title: 'Customer',
+      properties: {
+        firstName: { type: 'string', description: 'Customer first name' },
+        lastName: { type: 'string', description: 'Customer last name' },
+        middleName: { type: 'string', description: 'Customer middle name' },
+        prefix: { type: 'string', description: 'Name prefix (Mr, Mrs, Dr)' },
+        suffix: { type: 'string', description: 'Name suffix (Jr, Sr, III)' },
+        email: { type: 'string', description: 'Email address' },
+        secondaryEmail: { type: 'string', description: 'Secondary email' },
+        phone: { type: 'string', description: 'Phone number with area code' },
+        mobilePhone: { type: 'string', description: 'Mobile phone number' },
+        birthDate: { type: 'string', description: 'Date of birth' },
+        gender: { type: 'string', description: 'Gender' },
+        language: { type: 'string', description: 'Preferred language' },
+        address: {
+          type: 'object',
+          description: 'Customer address',
+          properties: {
+            street: { type: 'string', description: 'Street address' },
+            city: { type: 'string', description: 'City name' },
+            state: { type: 'string', description: 'State code' },
+            zipCode: { type: 'string', description: 'Postal code' },
+            country: { type: 'string', description: 'Country code' },
+          },
+        },
+        accountBalance: { type: 'number', description: 'Current account balance' },
+        loyaltyPoints: { type: 'number', description: 'Loyalty points balance' },
+        isActive: { type: 'boolean', description: 'Account active status' },
+        isVerified: { type: 'boolean', description: 'Email verified status' },
+      },
+    });
+
+    // UserProfile schema (target)
+    this.addSchema({
+      type: 'object',
+      title: 'UserProfile',
+      properties: {
+        fullName: { type: 'string', description: 'Full display name' },
+        displayName: { type: 'string', description: 'Public display name' },
+        emailAddress: { type: 'string', description: 'Email address' },
+        alternateEmail: { type: 'string', description: 'Alternate email' },
+        phoneNumber: { type: 'string', description: 'Phone number' },
+        mobileNumber: { type: 'string', description: 'Mobile number' },
+        birthYear: { type: 'string', description: 'Birth year' },
+        age: { type: 'number', description: 'Calculated age' },
+        preferredLanguage: { type: 'string', description: 'Preferred language' },
+        location: {
+          type: 'object',
+          description: 'User location',
+          properties: {
+            fullAddress: { type: 'string', description: 'Combined street and city' },
+            region: { type: 'string', description: 'State or region' },
+            postalCode: { type: 'string', description: 'Postal code' },
+            country: { type: 'string', description: 'Country' },
+          },
+        },
+        balance: { type: 'string', description: 'Formatted balance with currency' },
+        rewardPoints: { type: 'number', description: 'Reward points' },
+        status: { type: 'string', description: 'Account status' },
+        isEmailVerified: { type: 'boolean', description: 'Email verified' },
+        hasOptedInMarketing: { type: 'boolean', description: 'Marketing opt-in' },
+      },
+    });
+  }
+
+  private saveSchemas(): void {
+    localStorage.setItem('objectSchemas', JSON.stringify(this._schemas()));
+  }
+
+  private saveMappings(): void {
+    localStorage.setItem('dataMappings', JSON.stringify(this._mappings()));
+  }
+
+  // --- Schema Operations ---
+
+  private generateId(prefix: string): string {
+    return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+  }
+
+  getSchemaById(id: string): StoredSchema | undefined {
+    return this._schemas().find(s => s.id === id);
+  }
+
+  addSchema(schema: Omit<StoredSchema, 'id'>): StoredSchema {
+    const newSchema: StoredSchema = {
+      ...schema,
+      id: this.generateId('schema'),
+    };
+    this._schemas.update(list => [...list, newSchema]);
+    this.saveSchemas();
+    return newSchema;
+  }
+
+  updateSchema(id: string, schema: Partial<JsonSchema>): void {
+    this._schemas.update(list =>
+      list.map(s => {
+        if (s.id !== id) return s;
+        // Create new schema with only the id preserved, replacing all other properties
+        // This ensures removed properties (like empty 'required' array) are actually removed
+        const { id: schemaId } = s;
+        return { id: schemaId, ...schema } as StoredSchema;
+      })
+    );
+    this.saveSchemas();
+  }
+
+  deleteSchema(id: string): void {
+    this._schemas.update(list => list.filter(s => s.id !== id));
+    this.saveSchemas();
+  }
+
+  setSchemas(schemas: StoredSchema[]): void {
+    this._schemas.set(schemas);
+    this.saveSchemas();
+  }
+
+  // --- Mapping Operations ---
+
+  getMappingById(id: string): StoredMapping | undefined {
+    return this._mappings().find(m => m.id === id);
+  }
+
+  addMapping(mapping: Omit<StoredMapping, 'id' | 'createdAt' | 'updatedAt'>): StoredMapping {
+    const now = new Date().toISOString();
+    const newMapping: StoredMapping = {
+      ...mapping,
+      id: this.generateId('mapping'),
+      createdAt: now,
+      updatedAt: now,
+    };
+    this._mappings.update(list => [...list, newMapping]);
+    this.saveMappings();
+    return newMapping;
+  }
+
+  updateMapping(id: string, mapping: Partial<StoredMapping>): void {
+    this._mappings.update(list =>
+      list.map(m => m.id === id ? { ...m, ...mapping, updatedAt: new Date().toISOString() } : m)
+    );
+    this.saveMappings();
+  }
+
+  updateMappingData(id: string, mappingData: unknown): void {
+    this.updateMapping(id, { mappingData });
+  }
+
+  deleteMapping(id: string): void {
+    this._mappings.update(list => list.filter(m => m.id !== id));
+    this.saveMappings();
+  }
+
+  // --- Helpers ---
+
+  getSchemaName(id: string): string {
+    const schema = this.getSchemaById(id);
+    return schema?.title || 'Unknown';
+  }
+}