File selection, column mapping, validation, preview, and completion.
Loading preview...
"use client";
import {ThemeProvider as LibraryDemoThemeProvider} from "next-themes";
"use client";
import { useEffect, useState } from "react";
import {
ImportWorkflow,
ImportWorkflowAction,
ImportWorkflowBody,
ImportWorkflowCell,
ImportWorkflowDescription,
ImportWorkflowFooter,
ImportWorkflowHeader,
ImportWorkflowHeaderCell,
ImportWorkflowHeading,
ImportWorkflowIssues,
ImportWorkflowMapping,
ImportWorkflowMappingOption,
ImportWorkflowMappingRow,
ImportWorkflowMappingSample,
ImportWorkflowMappingSource,
ImportWorkflowMappingTarget,
ImportWorkflowPanel,
ImportWorkflowPanelTitle,
ImportWorkflowProgress,
ImportWorkflowStep,
ImportWorkflowSteps,
ImportWorkflowTable,
ImportWorkflowTableRow,
ImportWorkflowTitle,
ImportWorkflowUpload,
type ImportWorkflowVariant,
} from "@/components/ui/uai-import-workflow";
import {
FileUploadDropzone,
FileUploadInput,
FileUploadItem,
FileUploadList,
FileUploadRemove,
FileUploadTrigger,
} from "@/components/ui/uai-import-workflow-utils/src-components-ui-uai-file-upload";
import {
ProgressSummaryBar,
ProgressSummaryHeader,
ProgressSummaryStat,
ProgressSummaryStatLabel,
ProgressSummaryStats,
ProgressSummaryStatusText,
ProgressSummaryStatValue,
ProgressSummaryTitle,
ProgressSummaryValue,
} from "@/components/ui/uai-import-workflow-utils/src-components-ui-uai-progress-summary";
import {
StatusBannerContent,
StatusBannerDescription,
StatusBannerIcon,
StatusBannerTitle,
} from "@/components/ui/uai-import-workflow-utils/src-components-ui-uai-status-banner";
import { StepIndicatorDescription, StepIndicatorTitle } from "@/components/ui/uai-import-workflow-utils/src-components-ui-uai-step-indicator";
const steps = [
{ value: "file", title: "Choose file", description: "CSV up to 10 MB" },
{ value: "mapping", title: "Map columns", description: "Match CRM fields" },
{ value: "review", title: "Review", description: "Fix flagged rows" },
{ value: "import", title: "Import", description: "Write contacts" },
];
const columns = [
{ source: "email_address", sample: "ana@fieldnote.io", target: "email" },
{ source: "full_name", sample: "Ana Duarte", target: "name" },
{ source: "company", sample: "Fieldnote Labs", target: "account" },
{ source: "fax", sample: "+351 21 555 0100", target: "" },
];
const total = 2418;
export function ImportWorkflowPreview({ variant = "wizard" }: { variant?: ImportWorkflowVariant }) {
const [step, setStep] = useState("file");
const [file, setFile] = useState<string | null>("contacts-september.csv");
const [mapping, setMapping] = useState(columns.map((column) => column.target));
const [imported, setImported] = useState(0);
const index = steps.findIndex((item) => item.value === step);
const go = (offset: number) => setStep(steps[index + offset]?.value ?? "file");
useEffect(() => {
if (step !== "import") return;
setImported(0);
const timer = window.setInterval(() => {
setImported((value) => Math.min(value + 403, total - 3));
}, 400);
return () => window.clearInterval(timer);
}, [step]);
const done = imported === total - 3;
return (
<ImportWorkflow variant={variant} value={step} onValueChange={setStep}>
<ImportWorkflowHeader>
<ImportWorkflowHeading>
<ImportWorkflowTitle>Import contacts</ImportWorkflowTitle>
<ImportWorkflowDescription>
Add people to the Sales workspace from a spreadsheet export.
</ImportWorkflowDescription>
</ImportWorkflowHeading>
</ImportWorkflowHeader>
<ImportWorkflowBody>
<ImportWorkflowSteps>
{steps.map((item, position) => (
<ImportWorkflowStep
key={item.value}
value={item.value}
status={position < index ? "complete" : "upcoming"}
>
<StepIndicatorTitle>{item.title}</StepIndicatorTitle>
{variant === "compact" ? null : (
<StepIndicatorDescription>{item.description}</StepIndicatorDescription>
)}
</ImportWorkflowStep>
))}
</ImportWorkflowSteps>
<ImportWorkflowPanel value="file">
<ImportWorkflowPanelTitle>Choose a CSV file</ImportWorkflowPanelTitle>
<ImportWorkflowUpload
accept=".csv"
maxSize={10_000_000}
maxFiles={1}
multiple={false}
fileCount={file ? 1 : 0}
onFilesAccepted={(files) => setFile(files[0]?.name ?? null)}
>
<FileUploadDropzone>
<span>Drop a .csv file here, or</span>
<FileUploadTrigger>Choose file</FileUploadTrigger>
<FileUploadInput />
</FileUploadDropzone>
{file ? (
<FileUploadList>
<FileUploadItem status="complete">
<strong>{file}</strong>
<FileUploadRemove onClick={() => setFile(null)} />
</FileUploadItem>
</FileUploadList>
) : null}
</ImportWorkflowUpload>
</ImportWorkflowPanel>
<ImportWorkflowPanel value="mapping">
<ImportWorkflowPanelTitle>Map columns to contact fields</ImportWorkflowPanelTitle>
<ImportWorkflowMapping>
{columns.map((column, position) => (
<ImportWorkflowMappingRow key={column.source}>
<ImportWorkflowMappingSource>
{column.source}
<ImportWorkflowMappingSample>{column.sample}</ImportWorkflowMappingSample>
</ImportWorkflowMappingSource>
<ImportWorkflowMappingTarget
value={mapping[position]}
onValueChange={(next) =>
setMapping((current) =>
current.map((target, item) => (item === position ? next : target)),
)
}
>
<ImportWorkflowMappingOption value="">
Skip this column
</ImportWorkflowMappingOption>
<ImportWorkflowMappingOption value="email">Email</ImportWorkflowMappingOption>
<ImportWorkflowMappingOption value="name">Name</ImportWorkflowMappingOption>
<ImportWorkflowMappingOption value="account">Account</ImportWorkflowMappingOption>
<ImportWorkflowMappingOption value="phone">Phone</ImportWorkflowMappingOption>
</ImportWorkflowMappingTarget>
</ImportWorkflowMappingRow>
))}
</ImportWorkflowMapping>
</ImportWorkflowPanel>
<ImportWorkflowPanel value="review">
<ImportWorkflowPanelTitle>Review before importing</ImportWorkflowPanelTitle>
<ImportWorkflowIssues tone="warning">
<StatusBannerIcon />
<StatusBannerContent>
<StatusBannerTitle>
3 of {total.toLocaleString("en-US")} rows will be skipped
</StatusBannerTitle>
<StatusBannerDescription>
Their email addresses are missing or malformed. Everything else is ready.
</StatusBannerDescription>
</StatusBannerContent>
</ImportWorkflowIssues>
<ImportWorkflowTable aria-label="First rows of contacts-september.csv">
<thead>
<tr>
<ImportWorkflowHeaderCell>Email</ImportWorkflowHeaderCell>
<ImportWorkflowHeaderCell>Name</ImportWorkflowHeaderCell>
<ImportWorkflowHeaderCell>Account</ImportWorkflowHeaderCell>
</tr>
</thead>
<tbody>
<ImportWorkflowTableRow>
<ImportWorkflowCell>ana@fieldnote.io</ImportWorkflowCell>
<ImportWorkflowCell>Ana Duarte</ImportWorkflowCell>
<ImportWorkflowCell>Fieldnote Labs</ImportWorkflowCell>
</ImportWorkflowTableRow>
<ImportWorkflowTableRow>
<ImportWorkflowCell tone="error">
jonas.orbit-dental.com · Missing @
</ImportWorkflowCell>
<ImportWorkflowCell>Jonas Berg</ImportWorkflowCell>
<ImportWorkflowCell>Orbit Dental</ImportWorkflowCell>
</ImportWorkflowTableRow>
<ImportWorkflowTableRow>
<ImportWorkflowCell>mei@kestrel.studio</ImportWorkflowCell>
<ImportWorkflowCell>Mei Tanaka</ImportWorkflowCell>
<ImportWorkflowCell>Kestrel Studio</ImportWorkflowCell>
</ImportWorkflowTableRow>
</tbody>
</ImportWorkflowTable>
</ImportWorkflowPanel>
<ImportWorkflowPanel value="import">
<ImportWorkflowPanelTitle>
{done ? "Import complete" : "Importing contacts"}
</ImportWorkflowPanelTitle>
<ImportWorkflowProgress
value={imported}
max={total - 3}
status={done ? "complete" : "running"}
>
<ProgressSummaryHeader>
<ProgressSummaryTitle>contacts-september.csv</ProgressSummaryTitle>
<ProgressSummaryStatusText />
</ProgressSummaryHeader>
<ProgressSummaryValue />
<ProgressSummaryBar />
<ProgressSummaryStats>
<ProgressSummaryStat>
<ProgressSummaryStatLabel>Imported</ProgressSummaryStatLabel>
<ProgressSummaryStatValue>
{imported.toLocaleString("en-US")}
</ProgressSummaryStatValue>
</ProgressSummaryStat>
<ProgressSummaryStat>
<ProgressSummaryStatLabel>Skipped</ProgressSummaryStatLabel>
<ProgressSummaryStatValue>3</ProgressSummaryStatValue>
</ProgressSummaryStat>
</ProgressSummaryStats>
</ImportWorkflowProgress>
</ImportWorkflowPanel>
</ImportWorkflowBody>
<ImportWorkflowFooter>
{index > 0 && step !== "import" ? (
<ImportWorkflowAction onClick={() => go(-1)}>Back</ImportWorkflowAction>
) : null}
{step === "import" ? (
<ImportWorkflowAction emphasis="primary" disabled={!done} onClick={() => go(-3)}>
Import another file
</ImportWorkflowAction>
) : (
<ImportWorkflowAction emphasis="primary" disabled={!file} onClick={() => go(1)}>
{step === "review" ? "Import 2,415 contacts" : "Continue"}
</ImportWorkflowAction>
)}
</ImportWorkflowFooter>
</ImportWorkflow>
);
}
function SourceSpecimen(){return <ImportWorkflowPreview/>}
export default function LibraryRegistryPreview(){return <LibraryDemoThemeProvider defaultTheme="dark" enableSystem={false}><div data-component-demo data-demo-theme="dark" data-theme="dark" className="dark" style={{background:"var(--background)",color:"var(--foreground)"}}><div className="relative w-full min-w-0 max-w-5xl min-h-[400px] flex items-center justify-center"><SourceSpecimen/></div></div></LibraryDemoThemeProvider>}