Add step editor rows to recipe form

[dgee2]

Summary

Adds a reusable StepRowEditor molecule (title, instructions, duration) and wires it into new-recipe-form.vue as a dynamic list, replacing the hardcoded empty steps: [] from #1119/#1120. Reuses the moveItem() reorder helper extracted for the ingredient editor.

• Add/remove/reorder step rows via the new component.
• instructionText is required per step.
• durationMinutes is validated as a positive whole number (not just non-negative) — the backend's RecipeStepItemValidator rejects a duration of 0, so the frontend rule matches that constraint exactly rather than reusing the >=0 rule from the Expand recipe form with metadata fields #1119 top-level time fields, which have no backend-side validation at all.
• sortOrder is recomputed from array index at submit time.

Test plan

• pnpm build (type-check + production build)
• pnpm lint
• pnpm test:storybook — 22 files / 61 tests passing, including new stories for the step row editor and form-level add/edit/remove/reorder/required-validation/duration-validation coverage

Part of #1100.

Closes #1121.

[Copilot]

🟡 Not ready to approve

The steps list currently uses an index key and the generic reorder helper has a falsy-item bug, both of which can lead to incorrect UI behavior during reordering/removal.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

This review doesn't count toward merge requirements. Sign up for the private preview to control whether Copilot approvals count.

Pull request overview

Adds a reusable step-row editor molecule and integrates it into the recipe creation form so users can add/edit/remove/reorder recipe steps, with client-side validation aligned to backend constraints.

Changes:

• Added StepRowEditor (title, instructions, duration) with required/positive-integer validation and reorder/remove controls.
• Wired a dynamic steps list into new-recipe-form.vue, reusing a shared moveItem() helper and recomputing sortOrder on submit.
• Extended Storybook coverage for both the new molecule and the updated form’s steps behavior.

File summaries

File	Description
ui/menu-website/src/components/organisms/recipe/new-recipe-form.vue	Adds step list state + UI, submission mapping, and shared reorder helper.
ui/menu-website/src/components/organisms/recipe/new-recipe-form.stories.ts	Adds stories covering step add/edit/remove/reorder and validation failures.
ui/menu-website/src/components/molecules/recipe/step-row-editor.vue	New reusable step editor row component with field validation and controls.
ui/menu-website/src/components/molecules/recipe/step-row-editor.stories.ts	Adds Storybook stories validating rendering, v-model updates, and emitted events.

Review details

Suppressed comments (1)

ui/menu-website/src/components/organisms/recipe/new-recipe-form.vue:157

• 🤖 This comment was written by GitHub Copilot.

The steps editor uses :key="index", which can cause Vue to reuse component instances incorrectly when removing/reordering rows (inputs/validation state can “stick” to the wrong step). Ingredients already use a stable rowId; steps should use the same approach (add a rowId when creating a step, use it as the key, and strip it out when building the UpsertRecipe payload).

    <step-row-editor
      v-for="(step, index) in steps"
      :key="index"
      v-model:instruction-text="step.instructionText"

• Files reviewed: 4/4 changed files
• Comments generated: 1
• Review effort level: Lite

We're testing this review assessment. Please use 👍 or 👎 to tell us if it's correct.

[sonarqubecloud]

Quality Gate failed

Failed conditions
16.2% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud