Skip to content

Add commitment templates and presets to the create wizard select-type step #951

Description

@1nonlypiece

📌 Description

src/components/CreateCommitmentStepSelectType.tsx offers raw risk profiles but no opinionated starting points, so newcomers must configure everything from scratch.

This issue adds templates/presets (e.g. 'Conservative 90-day', 'Aggressive 30-day') that prefill subsequent wizard steps.

🎯 Requirements and Context

This is a feature / enhancement task for the CommitLabs frontend (Next.js + TypeScript). It must be implemented cleanly, fully typed, accessible, and well tested — and must not regress existing behavior.

  • Define a small set of named presets with sensible defaults for type, duration, and max-loss.
  • Selecting a preset prefills the configure step while leaving every field editable.
  • Presets must be clearly labeled and keyboard selectable; a 'Start from scratch' option remains.
  • Prefill must integrate with existing draft persistence and validation.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b feature/create-wizard-templates

2. Implement the change

  • Primary files to add or modify:
    • src/components/CreateCommitmentStepSelectType.tsx — preset picker.
    • src/app/create/page.tsx — apply preset to wizard state.
    • src/components/CreateCommitmentStepConfigure.tsx — receive prefill.
  • Add focused tests in src/components/create/CreateTemplates.test.tsx using Jest / Vitest + React Testing Library (happy-dom), covering rendering, interaction, and the edge cases below.
  • Add documentation in docs/CREATE_TEMPLATES.md describing the feature, props/API, accessibility behavior, and a usage example; cross-link it from the relevant README/docs.
  • Keep the diff small and reviewer-friendly; reuse existing primitives, hooks, and the typed API client instead of duplicating logic.

3. Cover edge cases

  • preset prefills configure step
  • fields remain editable
  • scratch option works
  • prefill respects validation

4. Test and commit

  • Run the suite (e.g. pnpm test / pnpm vitest run) and ensure new lines are covered.
  • Verify keyboard navigation, focus handling, and prefers-reduced-motion where relevant.

Example commit message

feat: commitment templates/presets in create wizard

✅ Guidelines

  • Minimum 95% test coverage on the new/changed lines.
  • Clear, reviewer-friendly documentation (props/API + usage example + accessibility notes).
  • No regressions to existing components, routes, or tests.
  • Fully typed (no any), accessible (labels, roles, live regions where relevant).
  • Timeframe: 96 hours.

🏷️ Labels

type-feature · type-enhancement · area-frontend · MAYBE REWARDED · GRANTFOX OSS · OFFICIAL CAMPAIGN

💬 Community & Support

  • Join the CommitLabs contributor Discord to coordinate, ask questions, and get unblocked fast: https://discord.gg/WV7tdYkJk
  • Please introduce yourself in the channel before you start so we can avoid duplicate work, pair you with a reviewer, and get your PR merged quickly.
  • Maintainers actively triage this channel and aim for fast, clear, respectful reviews — reach out any time you're blocked.

Metadata

Metadata

Labels

Fields

No fields configured for Feature.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions