Sangeetha-Grantha

Conductor Track: Frontend Foundation & Infrastructure

ID: TRACK-022 Status: Completed Owner: UI Team

Objective

Establish the core infrastructure required for the frontend refactoring, including shared components, utility hooks, and improved tooling (linting/testing).

Scope

• Shared Components: Create typed Form inputs, Modals, and Skeletons.
• Hooks & Utils: Implement standard error handling, API types, and abortion controllers.
• Tooling: Add eslint and vitest to the project.

Checklist

• Tooling Setup
  • Add eslint dependencies and configuration.
  • Add vitest dependencies and configuration.
  • Add lint and test scripts to package.json.
• Form Components
  • Create src/components/form/FormInput.tsx (Typed)
  • Create src/components/form/FormTextarea.tsx (Typed)
  • Create src/components/form/FormSelect.tsx (Typed)
  • Create src/components/form/FormCheckbox.tsx (Typed)
  • Export all from src/components/form/index.ts
• Common UI Components
  • Create src/components/common/Modal.tsx (Accessible, ARIA)
  • Create src/components/common/ConfirmationModal.tsx
  • Create src/components/common/Skeleton.tsx
• Utilities & Hooks
  • Create src/hooks/useAbortController.ts
  • Create src/utils/error-handler.ts (Toast integration)
  • Create src/types/api-params.ts
  • Create src/types/form-state.ts

Acceptance Criteria

• bun run lint passes with 0 errors.
• All new components have no any types.
• Components are exported and ready for use in other tracks.