Page and route#
/import, rendered by ImportParts() in walmart-mvp/frontend/src/pages/ImportParts.tsx, mounted through App.tsx's router outlet, the same AppShell documented in docs/breakdowns/03-walmart-jobs.md.
What the reader sees#
A drop target for part files (CSV, XLS, XLSX, XML), a file list where each file picks its own template, and an optional list of scrape sources for data the files are missing. Running the workflow uploads everything, and if any part numbers already exist in the catalog, a modal asks whether to skip or override each one before the job actually starts.
Layer 1: shell#
Same AppShell instance as every other walmart-mvp page (docs/breakdowns/03-walmart-jobs.md Layer 1). ImportParts.tsx renders no shell chrome of its own; its outermost element is <div className="mx-auto flex max-w-6xl flex-col gap-6"> (ImportParts.tsx:295), inside the shell's content outlet.
Layer 2: composition#
The page has two states, not one screen: a setup step (the form itself) and a processing step (a confirmation screen after the job is created), switched by local state (ImportParts.tsx:94, 253-292). Both states open with PageTitle or an equivalent identity block: setup uses a real PageTitle (:296-300), processing uses a bare <h2> inside a centered column instead (:257-261), since the processing screen is a terminal confirmation rather than a page in its own right.
Inside setup, the order is: Dropzone and its file list (:304-367), a Card for scrape sources (:369-450), and a right-aligned submit action (:452-461), matching doc 9 §A4's fixed composition order of identity block, then content sections, in the sequence the form is actually filled out.
Layer 3: primitives#
| Primitive | Props as called | file:line | Contract doc |
|---|---|---|---|
PageTitle | Icon={appIcon.import}, title="Import parts", subtitle | ImportParts.tsx:296-300 | packages/ui/docs/page-title.md |
Dropzone | multiple, accept=".csv,.xls,.xlsx,.xml", compact, a raw JSX element as Icon (not a registry key), hint={null}, browseLabel="Add files" | ImportParts.tsx:305-327 | packages/ui/docs/dropzone.md, whose own Sanctioned-combinations table cites this exact call site (dropzone.md:42) |
Card | title="Sources for missing data", subtitle | ImportParts.tsx:369 | packages/ui/docs/card.md |
Select<JobFileTemplate> | per-file template picker, size="sm" | ImportParts.tsx:344-351 | packages/ui/docs/select.md |
Modal + ModalTitle + ModalFooter | elementId={DUPLICATE_CHECK_MODAL}, size="sm", ModalFooter spread loading={starting} back={...} next={...} | ImportParts.tsx:463-561 | packages/ui/docs/modal.md |
StatusPill | inside the duplicate list, kind={PART_STATUS_KIND[...] ?? "neutral"} | ImportParts.tsx:513-517 | packages/ui/docs/status.md |
Layer 4: patterns#
- Compact dropzone card (
/patterns/compact-dropzone): this page's own comment states the pattern's name for its reasoning directly: "the dropzone IS the card: the mock gives it the surface and the dashed edge, and wrapping it put a panel inside a panel" (ImportParts.tsx:302-303).dropzone.md:14cites this exact block as the doc's own example of the no-Card-wrapper placement. - Confirm-and-report action (
/patterns/confirm-and-report): the duplicate-resolutionModalreports its outcome throughpushAlertcalls inrunWorkflow(:214-233) rather than inside the modal itself, matching the pattern's general shape of a dialog whose result is reported after it closes.
Layer 5: canon rules in force#
docs/design-language/05-cards-and-surfaces.md§A1, cited throughdropzone.md:8:Cardis the universal content wrapper, which is exactly the rule this page's own dropzone placement weighs against and deliberately overrides, stating why in its own comment.docs/design-language/04-loading-and-states.md§A1, cited throughdropzone.md:8: a spinner pairs with a short present-tense verb phrase; theprocessingstep's<Spinner size="lg" />(ImportParts.tsx:256) pairs with "Your job is processing" (:258).docs/design-language/09-page-composition.md's portable checklist for walmart-mvp (09-page-composition.md:62): one default reading width, applied by container class. See this page's own Lapses entry below.
Lapses#
A page width hand-typed differently from a sibling page. ImportParts.tsx:295 wraps its content in max-w-6xl; walmart-mvp/frontend/src/pages/Jobs.tsx:831 wraps its own content in max-w-400. docs/design-language/09-page-composition.md's portable checklist for walmart-mvp asks for "one default reading width..., applied by container class, never per-element" (09-page-composition.md:62). This is the same finding as docs/breakdowns/03-walmart-jobs.md's Lapses entry, read from the other side; the two pages disagree on their own page's width, and neither reads through a shared class either page could point to.
Not a lapse, worth naming. The duplicate-resolution list at ImportParts.tsx:500-536 renders a raw <table className="table table-sm"> rather than the kit's Table. docs/design-language/06-tables.md §A1 (:18) allows a raw <table> specifically for "dense inline-EDITABLE form grids," and every row here carries its own editable Select (:519-531), which is the exception the canon names, not a violation of it.
See also#
docs/breakdowns/03-walmart-jobs.md, the sibling page carrying the other half of the width-class finding above.packages/ui/docs/dropzone.md, whose Sanctioned-combinations table is built from this exact page./patterns/compact-dropzone, the pattern this page's own source comment names by shape if not by URL.