/sub-packages/products-viewer/CLAUDE.md

CLAUDE.md at /sub-packages/products-viewer/CLAUDE.md

Path: sub-packages/products-viewer/CLAUDE.md

Products Viewer

Vite + React app for editing src/data/product-master-data.mjs. Runs on zproducts.localhost

Start

pnpm products:dev   # from project root
pnpm dev            # from this directory

Architecture

• Data source: Imports from @data/product-master-data.mjs (Vite alias to ../../src/data/)
• File writing: Custom Vite plugin intercepts POST /api/update-products and writes directly to product-master-data.mjs
• State: MVC pattern with ProductsDataModel — tracks original vs current state with field-level modification tracking
• Components: App.jsx -> ProductTable.jsx -> EditableCell.jsx

Key Behaviors

• Modified cells show yellow background; changes persist only on explicit Save
• New items get auto-generated unique slugs (new-item-1, new-item-2, etc.)
• Search works across all fields, including hidden columns
• Dark theme with Tailwind CSS

Testing

pnpm test           # Run all tests (Vitest)
pnpm test:watch     # Watch mode

Data Structure

See /doc/docs/data/product-master.md for the full product schema.