{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "import-wizard", "title": "Import Wizard", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/import-wizard/import-wizard.component.ts", "content": "// CSV import flow in a SectionCard: four-step state machine (Upload → Map fields →\n// Preview → Result) with an interactive Stepper, auto-mapped column targets carrying\n// confidence badges, required-field validation that gates the footer action, flagged-cell\n// highlighting in the preview table, and a success/partial result screen. Data is stubbed\n// post-parse — wire the file reader of your choice. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, OnInit, computed, signal } from '@angular/core'\nimport { CheckCircle2, ChevronLeft, ChevronRight, FileSpreadsheet, LucideAngularModule, Upload } from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAlertComponent, UiAlertDescriptionComponent, UiAlertTitleComponent } from '@/ui/alert/alert.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport { UiSectionCardComponent } from '@/ui/section-card/section-card.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport { UiStepperComponent, type StepperStep } from '@/ui/stepper/stepper.component'\n\nexport type TargetField = 'Full name' | 'Email' | 'Department' | 'Job title' | 'Start date' | 'Skip'\n\ninterface CsvRow {\n full_name: string\n email_address: string\n dept: string\n job_title: string\n start_date: string\n manager: string\n}\n\ntype CsvColumn = keyof CsvRow\n\nconst steps: StepperStep[] = [\n { id: 1, title: 'Upload' },\n { id: 2, title: 'Map fields' },\n { id: 3, title: 'Preview' },\n { id: 4, title: 'Result' },\n]\n\nconst columns: CsvColumn[] = ['full_name', 'email_address', 'dept', 'job_title', 'start_date', 'manager']\n\nconst defaultMapping: Record = {\n full_name: 'Full name',\n email_address: 'Email',\n dept: 'Department',\n job_title: 'Job title',\n start_date: 'Start date',\n manager: 'Skip',\n}\n\nconst confidence: Record = {\n full_name: 'high',\n email_address: 'high',\n dept: 'medium',\n job_title: 'high',\n start_date: 'medium',\n manager: 'high',\n}\n\nconst targetOptions: TargetField[] = ['Full name', 'Email', 'Department', 'Job title', 'Start date', 'Skip']\nconst requiredTargets: TargetField[] = ['Full name', 'Email']\n\nconst rows: CsvRow[] = [\n {\n full_name: 'Amara Osei',\n email_address: 'amara@acme.com',\n dept: 'Engineering',\n job_title: 'Backend engineer',\n start_date: '2026-09-01',\n manager: 'j.weber@acme.com',\n },\n {\n full_name: 'Marcus Lee',\n email_address: 'marcus.lee@acme.com',\n dept: 'Design',\n job_title: 'Product designer',\n start_date: '2026-09-01',\n manager: 'a.osei@acme.com',\n },\n {\n full_name: '',\n email_address: 'no-name@acme.com',\n dept: 'Sales',\n job_title: 'Account exec',\n start_date: '2026-09-08',\n manager: 'p.nair@acme.com',\n },\n {\n full_name: 'Priya Nair',\n email_address: 'not-an-email',\n dept: 'People',\n job_title: 'Recruiter',\n start_date: '2026-09-15',\n manager: 'a.osei@acme.com',\n },\n {\n full_name: 'Jonas Weber',\n email_address: 'jonas@acme.com',\n dept: 'Engineering',\n job_title: 'Eng manager',\n start_date: '2026-08-24',\n manager: '',\n },\n]\n\nconst EMAIL_RE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-import-wizard, [ui-import-wizard]',\n standalone: true,\n // React renders the SectionCard itself: the host stays out of layout and `class` goes to the card.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAlertComponent,\n UiAlertDescriptionComponent,\n UiAlertTitleComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiSectionCardComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiStepperComponent,\n ],\n template: `\n \n \n\n @if (step() === 1) {\n
\n @if (!fileSelected()) {\n \n \n Drop your CSV here or browse\n Up to 10 MB · comma or semicolon separated\n \n } @else {\n
\n \n \n \n
\n

employees.csv

\n

248 rows · 6 columns · 38 KB

\n
\n Parsed\n
\n }\n
\n }\n\n @if (step() === 2) {\n
\n @if (missingRequired().length > 0) {\n \n Required fields unmapped\n Map {{ missingRequired().join(' and ') }} before continuing.\n \n }\n
    \n @for (column of columns; track column) {\n
  • \n {{ column }}\n \n \n \n \n @for (option of targetOptions; track option) {\n {{ option }}\n }\n \n \n @if (mapping()[column] !== 'Skip') {\n \n {{ confidenceFor(column) === 'high' ? 'Auto · high' : 'Auto · medium' }}\n \n }\n
    • \n }\n
\n
\n }\n\n @if (step() === 3) {\n
\n
\n \n \n \n @for (column of columns; track column) {\n \n }\n \n \n \n @for (row of previewRows; track $index) {\n \n @for (column of columns; track column) {\n \n {{ mapping()[column] === 'Skip' ? '·' : row[column] }}\n \n }\n \n }\n \n
\n {{ mapping()[column] === 'Skip' ? '—' : mapping()[column] }}\n
\n
\n

\n Showing first 5 of 248 rows ·\n 0 ? 'text-warning font-medium' : 'text-success font-medium'\">\n {{ importedCount }} valid · {{ flaggedCount() }} flagged\n \n

\n
\n }\n\n @if (step() === 4) {\n
\n \n
\n

{{ importedCount }} records imported

\n

\n {{ flaggedCount() }} rows were skipped — fix them and re-import anytime.\n

\n
\n \n
\n }\n\n
\n @if (step() > 1 && step() < 4) {\n \n } @else {\n \n }\n @if (step() < 4) {\n 0\"\n (click)=\"goNext()\"\n >\n {{ step() === 1 ? 'Continue' : step() === 2 ? 'Review' : 'Import' }}\n \n \n }\n
\n \n `,\n})\nexport class UiImportWizardComponent implements OnInit {\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly ChevronLeft = ChevronLeft\n protected readonly ChevronRight = ChevronRight\n protected readonly FileSpreadsheet = FileSpreadsheet\n protected readonly Upload = Upload\n\n protected readonly steps = steps\n protected readonly columns = columns\n protected readonly targetOptions = targetOptions\n protected readonly previewRows = rows.slice(0, 5)\n protected readonly importedCount = 245\n\n /** Jump straight to a step (1 Upload · 2 Map · 3 Preview · 4 Result). */\n @Input() initialStep = 1\n /** Show the upload step with the file already parsed. */\n @Input() initialFileSelected = false\n /** Override the auto-mapping so demos can show unmapped required fields. */\n @Input() initialMapping?: Record\n @Input('class') className?: string\n\n readonly step = signal(1)\n readonly fileSelected = signal(false)\n readonly mapping = signal>({ ...defaultMapping })\n\n constructor() {}\n\n ngOnInit(): void {\n this.step.set(this.initialStep)\n this.fileSelected.set(this.initialFileSelected || this.initialStep > 1)\n if (this.initialMapping) this.mapping.set({ ...defaultMapping, ...this.initialMapping })\n }\n\n readonly mappedTargets = computed(() =>\n (Object.values(this.mapping()) as TargetField[]).filter((t) => t !== 'Skip'),\n )\n\n readonly missingRequired = computed(() => requiredTargets.filter((target) => !this.mappedTargets().includes(target)))\n\n readonly flaggedCount = computed(() => rows.filter((row) => columns.some((col) => this.cellInvalid(row, col))).length)\n\n confidenceFor(column: CsvColumn): 'high' | 'medium' {\n return confidence[column]\n }\n\n cellInvalid(row: CsvRow, column: string): boolean {\n if (this.mapping()[column as CsvColumn] === 'Full name') return row.full_name.trim() === ''\n if (this.mapping()[column as CsvColumn] === 'Email') return !EMAIL_RE.test(row.email_address)\n return false\n }\n\n cellClass(row: CsvRow, column: CsvColumn): string {\n return cn('px-3 py-2', this.cellInvalid(row, column) && 'bg-destructive/10 text-destructive font-medium')\n }\n\n setMapping(column: CsvColumn, value: string): void {\n this.mapping.update((prev) => ({ ...prev, [column]: value as TargetField }))\n }\n\n onStepperInput(value: number): void {\n // Free backward navigation; forward goes through the footer button only.\n if (value < this.step() && this.step() !== 4) this.step.set(value)\n }\n\n goNext(): void {\n if (this.step() === 1 && !this.fileSelected()) this.fileSelected.set(true)\n if (this.step() === 2 && this.missingRequired().length > 0) return\n if (this.step() < 4) this.step.set(this.step() + 1)\n }\n\n reset(): void {\n this.step.set(1)\n this.fileSelected.set(false)\n this.mapping.set({ ...defaultMapping })\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/import-wizard/import-wizard.component.ts" }, { "path": "packages/registry-angular/blocks/import-wizard/index.ts", "content": "export { UiImportWizardComponent, type TargetField } from './import-wizard.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/import-wizard/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/alert.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/section-card.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/stepper.json" ], "description": "CSV import flow in a SectionCard: four-step state machine (Upload → Map fields → Preview → Result) with an interactive Stepper, auto-mapped column targets carrying confidence badges, required-field validation that gates the footer action, flagged-cell highlighting in the preview table, and a success/partial result screen. Data is stubbed post-parse — wire the file reader of your choice.", "categories": [ "devops", "dashboard", "data" ] }