angular-data-mapper 1.0.0

package/projects/demo-app/src/app/app.html

@@ -0,0 +1,36 @@
+<div class="app-container">
+  <header class="app-header">
+    <h1>Data Mapper</h1>
+    <p class="subtitle">Drag fields from source to target to create mappings</p>
+    <div class="header-actions">
+      <button mat-stroked-button (click)="importMappings()">
+        <mat-icon>upload</mat-icon>
+        Import
+      </button>
+      <button mat-stroked-button (click)="exportMappings()" [disabled]="mappings().length === 0">
+        <mat-icon>download</mat-icon>
+        Export
+      </button>
+      <button mat-stroked-button (click)="clearMappings()" [disabled]="mappings().length === 0">
+        <mat-icon>delete_sweep</mat-icon>
+        Clear
+      </button>
+    </div>
+    <input
+      #fileInput
+      type="file"
+      accept=".json"
+      style="display: none"
+      (change)="onFileSelected($event)"
+    />
+  </header>
+
+  <main class="app-main">
+    <data-mapper
+      [sourceSchema]="sourceSchema()"
+      [targetSchema]="targetSchema()"
+      [sampleData]="sampleData()"
+      (mappingsChange)="onMappingsChange($event)"
+    ></data-mapper>
+  </main>
+</div>

package/projects/demo-app/src/app/app.routes.ts

@@ -0,0 +1,62 @@
+import { Routes } from '@angular/router';
+import { AppLayoutComponent } from './layout/app-layout.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: AppLayoutComponent,
+    children: [
+      {
+        path: '',
+        redirectTo: 'schemas',
+        pathMatch: 'full',
+      },
+      {
+        path: 'schemas',
+        loadComponent: () =>
+          import('./pages/schema-editor-page/schema-editor-page.component').then(
+            (m) => m.SchemaEditorPageComponent
+          ),
+      },
+      {
+        path: 'schemas/:id',
+        loadComponent: () =>
+          import('./pages/schema-editor-page/schema-editor-page.component').then(
+            (m) => m.SchemaEditorPageComponent
+          ),
+      },
+      {
+        path: 'mappings',
+        loadComponent: () =>
+          import('./pages/mappings-page/mappings-page.component').then(
+            (m) => m.MappingsPageComponent
+          ),
+      },
+      {
+        path: 'schema-creator',
+        loadComponent: () =>
+          import('./pages/schema-creator-page/schema-creator-page.component').then(
+            (m) => m.SchemaCreatorPageComponent
+          ),
+      },
+      {
+        path: 'mapper/:id',
+        loadComponent: () =>
+          import('./pages/mapper-page/mapper-page.component').then(
+            (m) => m.MapperPageComponent
+          ),
+      },
+    ],
+  },
+  // Legacy route redirect
+  {
+    path: 'mapper',
+    redirectTo: 'mappings',
+    pathMatch: 'full',
+  },
+  {
+    path: 'schema',
+    redirectTo: 'schemas',
+    pathMatch: 'full',
+  },
+];

package/projects/demo-app/src/app/app.scss

@@ -0,0 +1,65 @@
+.app-container {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 24px;
+  box-sizing: border-box;
+  overflow: hidden;
+}
+
+.app-header {
+  text-align: center;
+  margin-bottom: 24px;
+  color: white;
+  flex-shrink: 0;
+
+  h1 {
+    font-size: 32px;
+    font-weight: 700;
+    margin: 0 0 8px 0;
+    letter-spacing: -0.5px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    opacity: 0.9;
+    margin: 0 0 20px 0;
+  }
+
+  .header-actions {
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+
+    button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .mat-mdc-outlined-button {
+      border-color: rgba(255, 255, 255, 0.5);
+      color: white;
+
+      &:hover {
+        background: rgba(255, 255, 255, 0.1);
+      }
+    }
+  }
+}
+
+.app-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  overflow: hidden;
+
+  data-mapper {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+  }
+}

package/projects/demo-app/src/app/app.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [RouterOutlet],
+  template: '<router-outlet></router-outlet>',
+  styles: [':host { display: block; height: 100%; }'],
+})
+export class App {}

package/projects/demo-app/src/app/layout/app-layout.component.ts

@@ -0,0 +1,294 @@
+import { Component, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { RouterModule, RouterOutlet } from '@angular/router';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatListModule } from '@angular/material/list';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+
+@Component({
+  selector: 'app-layout',
+  standalone: true,
+  imports: [
+    CommonModule,
+    RouterModule,
+    RouterOutlet,
+    MatSidenavModule,
+    MatListModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatButtonModule,
+    MatTooltipModule,
+  ],
+  template: `
+    <div class="app-layout">
+      <header class="app-header">
+        <div class="header-left">
+          <button
+            mat-icon-button
+            class="menu-toggle"
+            (click)="toggleSidebar()"
+            [matTooltip]="collapsed() ? 'Expand menu' : 'Collapse menu'"
+          >
+            <mat-icon>{{ collapsed() ? 'menu' : 'menu_open' }}</mat-icon>
+          </button>
+          <div class="logo">
+            <div class="logo-icon">
+              <mat-icon>hub</mat-icon>
+            </div>
+            <div class="logo-text" [class.hidden]="collapsed()">
+              <span class="logo-title">DataMapper</span>
+              <span class="logo-badge">Studio</span>
+            </div>
+          </div>
+        </div>
+      </header>
+
+      <div class="app-body">
+        <nav class="sidebar" [class.collapsed]="collapsed()">
+          <div class="nav-section">
+            <span class="nav-label" [class.hidden]="collapsed()">WORKSPACE</span>
+            <a
+              class="nav-item"
+              routerLink="/schemas"
+              routerLinkActive="active"
+              [matTooltip]="collapsed() ? 'Schemas' : ''"
+              matTooltipPosition="right"
+            >
+              <mat-icon>data_object</mat-icon>
+              <span [class.hidden]="collapsed()">Schemas</span>
+            </a>
+            <a
+              class="nav-item"
+              routerLink="/mappings"
+              routerLinkActive="active"
+              [matTooltip]="collapsed() ? 'Mappings' : ''"
+              matTooltipPosition="right"
+            >
+              <mat-icon>swap_horiz</mat-icon>
+              <span [class.hidden]="collapsed()">Mappings</span>
+            </a>
+            <a
+              class="nav-item"
+              routerLink="/schema-creator"
+              routerLinkActive="active"
+              [matTooltip]="collapsed() ? 'Schema Creator' : ''"
+              matTooltipPosition="right"
+            >
+              <mat-icon>add_box</mat-icon>
+              <span [class.hidden]="collapsed()">Schema Creator</span>
+            </a>
+          </div>
+        </nav>
+
+        <main class="main-content">
+          <router-outlet></router-outlet>
+        </main>
+      </div>
+    </div>
+  `,
+  styles: [`
+    .app-layout {
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      background: #0f172a;
+    }
+
+    .app-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 16px;
+      height: 56px;
+      background: #0f172a;
+      border-bottom: 1px solid #1e293b;
+      flex-shrink: 0;
+    }
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .menu-toggle {
+      color: #64748b;
+      width: 36px;
+      height: 36px;
+
+      &:hover {
+        color: #94a3b8;
+        background: #1e293b;
+      }
+
+      mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .logo-icon {
+      width: 32px;
+      height: 32px;
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      mat-icon {
+        color: white;
+        font-size: 18px;
+        width: 18px;
+        height: 18px;
+      }
+    }
+
+    .logo-text {
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+      transition: opacity 0.15s ease, width 0.15s ease;
+
+      &.hidden {
+        opacity: 0;
+        width: 0;
+        overflow: hidden;
+      }
+    }
+
+    .logo-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: white;
+      letter-spacing: -0.3px;
+    }
+
+    .logo-badge {
+      font-size: 10px;
+      font-weight: 500;
+      color: #6366f1;
+      background: rgba(99, 102, 241, 0.15);
+      padding: 2px 5px;
+      border-radius: 3px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .app-body {
+      display: flex;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .sidebar {
+      width: 200px;
+      background: #0f172a;
+      border-right: 1px solid #1e293b;
+      padding: 16px 10px;
+      flex-shrink: 0;
+      transition: width 0.15s ease;
+
+      &.collapsed {
+        width: 56px;
+        padding: 16px 8px;
+      }
+    }
+
+    .nav-section {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    .nav-label {
+      font-size: 10px;
+      font-weight: 600;
+      color: #475569;
+      letter-spacing: 0.5px;
+      padding: 6px 10px;
+      margin-bottom: 4px;
+      transition: opacity 0.15s ease;
+
+      &.hidden {
+        opacity: 0;
+        height: 0;
+        padding: 0;
+        margin: 0;
+        overflow: hidden;
+      }
+    }
+
+    .nav-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 9px 10px;
+      border-radius: 6px;
+      color: #94a3b8;
+      text-decoration: none;
+      font-size: 13px;
+      font-weight: 500;
+      transition: all 0.12s ease;
+      white-space: nowrap;
+
+      &:hover {
+        background: #1e293b;
+        color: #e2e8f0;
+      }
+
+      &.active {
+        background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
+        color: white;
+        box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
+      }
+
+      mat-icon {
+        font-size: 20px;
+        width: 20px;
+        height: 20px;
+        flex-shrink: 0;
+      }
+
+      span {
+        transition: opacity 0.15s ease;
+
+        &.hidden {
+          opacity: 0;
+          width: 0;
+          overflow: hidden;
+        }
+      }
+    }
+
+    .main-content {
+      flex: 1;
+      min-width: 0;
+      background: #f8fafc;
+      overflow: hidden;
+    }
+
+    .hidden {
+      opacity: 0;
+      width: 0;
+      overflow: hidden;
+    }
+  `],
+})
+export class AppLayoutComponent {
+  collapsed = signal(false);
+
+  toggleSidebar(): void {
+    this.collapsed.update(v => !v);
+  }
+}

package/projects/demo-app/src/app/pages/mapper-page/mapper-page.component.html

@@ -0,0 +1,87 @@
+<!--
+  Mapper Page - Example usage of data-mapper component
+
+  This example shows:
+  - Providing source and target schemas
+  - Handling mapping change events
+  - Export/import functionality
+  - Custom styling via CSS variables (see .scss file)
+-->
+<div class="page-container">
+  <header class="page-header">
+    <div class="header-title">
+      <button mat-icon-button (click)="goBack()" matTooltip="Back to Mappings">
+        <mat-icon>arrow_back</mat-icon>
+      </button>
+      <div class="title-text">
+        @if (currentMapping()) {
+          @if (isEditingName()) {
+            <div class="name-edit">
+              <input
+                #nameInput
+                type="text"
+                [value]="currentMapping()!.name"
+                (keyup.enter)="saveName(nameInput.value)"
+                (keyup.escape)="cancelEditName()"
+                (blur)="saveName(nameInput.value)"
+                class="name-input"
+              />
+            </div>
+          } @else {
+            <div class="name-display">
+              <h1>{{ currentMapping()!.name }}</h1>
+              <button mat-icon-button (click)="startEditName()" matTooltip="Edit name" class="edit-btn">
+                <mat-icon>edit</mat-icon>
+              </button>
+            </div>
+          }
+          <p class="subtitle">
+            {{ appState.getSchemaName(currentMapping()!.sourceSchemaId) }}
+            <mat-icon class="flow-icon">arrow_forward</mat-icon>
+            {{ appState.getSchemaName(currentMapping()!.targetSchemaId) }}
+          </p>
+        } @else {
+          <h1>Data Mapper</h1>
+          <p class="subtitle">Drag fields from source to target to create mappings</p>
+        }
+      </div>
+    </div>
+    <div class="header-actions">
+      <button mat-stroked-button (click)="importMappings()">
+        <mat-icon>upload</mat-icon>
+        Import
+      </button>
+      <button mat-stroked-button (click)="exportMappings()" [disabled]="mappings().length === 0">
+        <mat-icon>download</mat-icon>
+        Export
+      </button>
+      <button mat-stroked-button (click)="clearMappings()" [disabled]="mappings().length === 0">
+        <mat-icon>delete_sweep</mat-icon>
+        Clear
+      </button>
+    </div>
+    <input
+      #fileInput
+      type="file"
+      accept=".json"
+      style="display: none"
+      (change)="onFileSelected($event)"
+    />
+  </header>
+
+  <main class="page-main">
+    <!--
+      data-mapper component usage:
+      - [sourceSchema]: The source JSON schema to map from
+      - [targetSchema]: The target JSON schema to map to
+      - [sampleData]: Optional sample data for preview
+      - (mappingsChange): Emits when mappings are created/modified/deleted
+    -->
+    <data-mapper
+      [sourceSchema]="sourceSchema()"
+      [targetSchema]="targetSchema()"
+      [sampleData]="sampleData()"
+      (mappingsChange)="onMappingsChange($event)"
+    ></data-mapper>
+  </main>
+</div>