First Project Onboarding Block for React

Edit TEMPLATES: each has an id, a title, the number of pages it makes and the number of starter cards (tasks) shown on the board, up to nine. The select's labels, the sentence under it, the caption and the drawn board all read the same entry, so they cannot disagree. Keep the first letters of the titles different, so typing a letter on the native select jumps to the right one.

keyOf takes the first word of the name, drops accents and anything that is not a letter, upper-cases it and keeps four letters: Seed tray calendar gives SEED, Garden beds gives GARD. A name with no letters falls back to TASK. The key is shown in the hint under the field, on the drawn board and in the summary, and tasks would be numbered from 1.

The button opens the browser's own file picker. The demo reads only the file's name and size, so a text file is refused (“That file is not a CSV or JSON.”) and one over 5 MB is refused too, each in the line under the button. Nothing is parsed or uploaded; the board shows the file's rows as stand-in cards. In your app read the rows where read says so and send them to your import endpoint.

Create project stays in the tab order and looks quiet until the name is long enough (and a file is chosen when Import is picked). Pressing it says what is missing and puts focus there: the name field, or the Choose a file button. The lines are always reserved, so nothing moves.

Everything: Create project only says it was saved in this demo, and no project, key or task exists anywhere. In your app create the project where submit says so, using the name, the way to start and the chosen template id or the imported rows. Skip for now says it was skipped and keeps the choices.

The board is dropped, so the form is the page: the name, the three ways to start (full width, the longest label wraps), the pane, one sentence about what would be made and, pinned to the foot of the screen, Create project with Skip for now beside it.