Error and edge-case states

A frontend engineer needs this when documenting a tricky component. The table has an ok state, an empty state, an error banner, and a loading skeleton. The design doc needs all four. Reproducing the error in a running app means faking a network failure. Here the state is a field in a JSON file.

This happens when you write the doc, not when you happen to catch a failure. The person doing it already owns the table. They should not take the app down to get the error banner on disk.

The job is one PNG per state for the design doc. You keep one table artboard shape and four colocated data files. state is "ok" | "empty" | "error" | "loading". rows is an array. One export writes the set. The next tricky component is the same idea: states as data.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, colocated data, many images.

The component is .lerret/product/table-states.jsx. It draws a data table with rows, a loading skeleton, and an error banner. The artboard knows those three things. Which one you see is the state field. The rows you see are the rows array.

Data is { rows: [], state: "ok" | "empty" | "error" | "loading" }. One artboard per state, each with its own colocated data. This is the second of the four bulk patterns: many artboards with colocated .data.json / .data.js. One export captures them all. You do not have to fake a network failure to get the error banner. There is no batch product, no queue, no orchestrator.

The images are PNGs for the design doc.

Reproducing an error state to screenshot it means faking a network failure. Here it is a field in a JSON file. A design file with four frames will keep the error copy in sync by hand. You use Lerret because the states are data, and the design doc can show all four from one export.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.