60:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 61:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 62:T2a60,'use client' import * as React from 'react' import { CheckCircle2, ChevronLeft, ChevronRight, FileSpreadsheet, Upload } from 'lucide-react' import { cn } from '@/lib/utils' import { Alert } from '@/components/ui/alert' import { Badge } from '@/components/ui/badge' import { Button } from '@/components/ui/button' import { SectionCard } from '@/components/ui/section-card' import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select' import { Stepper } from '@/components/ui/stepper' type TargetField = 'Full name' | 'Email' | 'Department' | 'Job title' | 'Start date' | 'Skip' interface CsvRow { full_name: string email_address: string dept: string job_title: string start_date: string manager: string } export interface ImportWizardProps { /** Jump straight to a step (1 Upload · 2 Map · 3 Preview · 4 Result). */ initialStep?: number /** Show the upload step with the file already parsed. */ initialFileSelected?: boolean /** Override the auto-mapping so demos can show unmapped required fields. */ initialMapping?: Record className?: string } const steps = [ { id: 1, title: 'Upload' }, { id: 2, title: 'Map fields' }, { id: 3, title: 'Preview' }, { id: 4, title: 'Result' }, ] const columns = ['full_name', 'email_address', 'dept', 'job_title', 'start_date', 'manager'] as const const defaultMapping: Record = { full_name: 'Full name', email_address: 'Email', dept: 'Department', job_title: 'Job title', start_date: 'Start date', manager: 'Skip', } const confidence: Record = { full_name: 'high', email_address: 'high', dept: 'medium', job_title: 'high', start_date: 'medium', manager: 'high', } const targetOptions: TargetField[] = ['Full name', 'Email', 'Department', 'Job title', 'Start date', 'Skip'] const requiredTargets: TargetField[] = ['Full name', 'Email'] const rows: CsvRow[] = [ { full_name: 'Amara Osei', email_address: 'amara@acme.com', dept: 'Engineering', job_title: 'Backend engineer', start_date: '2026-09-01', manager: 'j.weber@acme.com', }, { full_name: 'Marcus Lee', email_address: 'marcus.lee@acme.com', dept: 'Design', job_title: 'Product designer', start_date: '2026-09-01', manager: 'a.osei@acme.com', }, { full_name: '', email_address: 'no-name@acme.com', dept: 'Sales', job_title: 'Account exec', start_date: '2026-09-08', manager: 'p.nair@acme.com', }, { full_name: 'Priya Nair', email_address: 'not-an-email', dept: 'People', job_title: 'Recruiter', start_date: '2026-09-15', manager: 'a.osei@acme.com', }, { full_name: 'Jonas Weber', email_address: 'jonas@acme.com', dept: 'Engineering', job_title: 'Eng manager', start_date: '2026-08-24', manager: '', }, ] export function ImportWizard({ initialStep = 1, initialFileSelected = false, initialMapping, className, }: ImportWizardProps) { const [step, setStep] = React.useState(initialStep) const [fileSelected, setFileSelected] = React.useState(initialFileSelected || initialStep > 1) const [mapping, setMapping] = React.useState>(initialMapping ?? { ...defaultMapping }) const mappedTargets: TargetField[] = Object.values(mapping).filter((t) => t !== 'Skip') const missingRequired = requiredTargets.filter((target) => !mappedTargets.includes(target)) function cellInvalid(row: CsvRow, column: string): boolean { if (mapping[column] === 'Full name') return row.full_name.trim() === '' if (mapping[column] === 'Email') return !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(row.email_address) return false } const flaggedCount = rows.filter((row) => columns.some((col) => cellInvalid(row, col))).length const importedCount = 245 function onStepperInput(value: number) { // Free backward navigation; forward goes through the footer button only. if (value < step && step !== 4) setStep(value) } function goNext() { if (step === 1 && !fileSelected) setFileSelected(true) if (step === 2 && missingRequired.length > 0) return if (step < 4) setStep(step + 1) } function reset() { setStep(1) setFileSelected(false) setMapping({ ...defaultMapping }) } return ( {step > 1 && step < 4 ? ( ) : ( )} {step < 4 && ( )} } > {step === 1 && (

{!fileSelected ? ( ) : (

employees.csv

248 rows · 6 columns · 38 KB

Parsed

)}

)} {step === 2 && (

{missingRequired.length > 0 && ( )}

{column} {mapping[column] !== 'Skip' && ( {confidence[column] === 'high' ? 'Auto · high' : 'Auto · medium'} )}

)} {step === 3 && (

{columns.map((column) => ( ))} {rows.slice(0, 5).map((row, i) => ( {columns.map((column) => ( ))} ))}

{mapping[column] === 'Skip' ? '—' : mapping[column]}
{mapping[column] === 'Skip' ? '·' : row[column]}

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

)} {step === 4 && (

)} ) } 5f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L60",null,{"namespace":"@registrydirectory","registryDependencies":["https://uipkge.dev/r/react/alert.json","https://uipkge.dev/r/react/badge.json","https://uipkge.dev/r/react/button.json","https://uipkge.dev/r/react/section-card.json","https://uipkge.dev/r/react/select.json","https://uipkge.dev/r/react/stepper.json"]}]]}],null]}],["$","$L61",null,{"files":[{"path":"packages/registry-react/blocks/import-wizard/ImportWizard.tsx","content":"$62","type":"registry:block","target":"~/components/blocks/ImportWizard.tsx"}],"className":"h-[70svh] min-h-80"}]]}]