CsvImport

Upload a CSV, match its columns, fix bad rows, and import.

SourcePackage @weft-js/warp

Preview

tsx

import { CsvImport } from '@weft-js/warp'import type { Role } from '@weft-js/warp'export function Team() {  const run = async (_: Record<string, string>[], progress: (percent: number) => void) => {    for (const percent of [20, 45, 70, 100]) {      await wait(350)      progress(percent)    }  }  return <CsvImport targets={IMPORT_TARGETS} sample={IMPORT_SAMPLE} onImport={run} />}const IMPORT_TARGETS = [  { id: 'name', label: 'Full name', aliases: ['name'] },  { id: 'email', label: 'Email', required: true, check: (v: string) => (/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v) ? undefined : 'Not a valid email') },  { id: 'team', label: 'Team' },  { id: 'role', label: 'Role', check: (v: string) => (/^(admin|member|viewer)$/i.test(v) ? undefined : 'Use admin, member or viewer') },]const IMPORT_SAMPLE = { name: 'weft-team.csv', text: 'Name,Email,Team,Role\nDara Nowak,dara@weft.dev,Web,member\nKai Sorensen,kai@weft,Data,member\nAmir Saleh,amir@weft.dev,Mobile,owner\nRosa Delgado,rosa@weft.dev,Platform,admin\n' }const wait = (ms: number) => new Promise<void>(done => { setTimeout(done, ms) })

Installation

npm install @weft-js/warp

Usage

tsx

import { CsvImport } from '@weft-js/warp'

Accessibility

This has no shortcuts of its own: controls inside it use Tab, Enter and Space as usual, and warp's parts keep their roles and labels.

API Reference

Prop	Type	Default	Description
`targets`	`ImportTarget[]`	—	The fields to fill, with aliases and checks.
`noun`	`[one: string, many: string]`	`['person', 'people']`	What a row is, singular and plural.
`rowLimit`	`number`	`5000`	The most rows it accepts.
`sample`	`{ name: string; text: string; }`	—	Offers a sample file.

Event	Type	Default	Description
`onImport`	`(records: Record<string, string>[], progress: (percent: number) => void)…`	—	Runs the import and reports progress from 0 to 100.

Parts

Every element carries a stable name, so you can style it from your own CSS: [data-scope="stack"] [data-part="step-title"]

step-titleicondrop-copytitlehint

RelatedMembers table