Custom Fields Onboarding Block for React

kindOf splits the column's name into lower-case words and takes the first rule in RULES that has one of them: email (email, mail), date (date, day, due, deadline, renewal…), number (seats, count, qty, amount…) and choice (plan, status, tier, stage…); anything else is text. The options a choice field shows come from CHOICES by a word in its name, and an unknown choice shows two placeholders. Edit those lists to fit your product; the type select always lets the visitor override the guess.

Each column that is already a field keeps the type and the Required setting it had (the name is compared ignoring capitals); only new columns are guessed. The status says how many were new and how many kept (“Read 7 columns: 1 new, 6 kept as set.”), and Undo brings the old list back. A header of more than eight columns uses the first eight and says so.

An empty header, a name longer than 24 characters and two columns with the same name, each in words under the text area (the line is always reserved, so nothing moves) with focus put back in the text area. Saving with no fields is refused the same way.

Each field becomes a labelled control in order: a text box, an email box, a number box, a date box or a choice, with a star and “required” for screen readers on required ones. The controls are real, so you can try them, but nothing is saved. A field that changes type is replaced by the control for its new type.

Everything: the header is pasted text, no spreadsheet is opened or uploaded, and Save fields only says the fields were kept in this demo. In your app create the fields on your server where save says so, and replace the guess with a look at the first rows of a real upload if you accept one.

Each field becomes two lines (the name and Remove above, the type and Required below) in the same eight places, the preview follows under the list, and the foot pins to the bottom of the screen with Discard and Save fields side by side.