Oak Flats UI Primitives Catalogue

Source-field → target-field row with type chips on both sides and a transform-function chip in the middle (1:1, lowercase, E.164, ISO, currency-aud, split). Three live states — light transforms, heavy transforms and full Shopify → Payload mapping.

Production answer

Data mapping row is a reusable Oak Flats Muffler Men UI primitive with documented states, accessibility expectations, theme behavior, and implementation evidence.

Primary CTAReview Data mapping row states

Generative search brief

Data mapping row: Source-field → target-field row with type chips on both sides and a transform-function chip in the middle (1:1, lowercase, E.164, ISO, currency-aud, split). Three live states — light transforms, heavy transforms and full Shopify → Payload mapping.

State 1 · light transforms (email + phone)

Sourceshopify.customer.emailstring

Targetpayload.users.email

emailrequiredEmail format

Sourceshopify.customer.phonestring

Targetpayload.users.mobile

phoneAU E.164

State 2 · heavy transforms (currency + date)

Sourceshopify.order.total_pricemoney

Targetpayload.orders.total_cents

integerrequired

Sourceshopify.order.created_atdatetime

Targetpayload.orders.placed_at

datetimerequired

State 3 · full mapping (Shopify → Payload)