fix: address code review feedback - add explicit TypeScript return types

- Add explicit JSX.Element return types to all Kanban components
- Add explicit void return type to handleDragStart
- Add explicit Promise<void> return type to handleDragEnd (async)
- Import React for JSX namespace access
- Complies with typescript.md: explicit return types REQUIRED

Components updated:
- KanbanBoard.tsx
- KanbanColumn.tsx
- TaskCard.tsx

Per code review checklist (code-review.md section 4a):
✓ NO any types
✓ Explicit return types on all exported functions
✓ Explicit parameter types
✓ Interfaces for props
✓ Proper event handler types
This commit is contained in:
Jason Woltje
2026-01-29 20:50:52 -06:00
parent 148aa004e3
commit bcb2913549
3 changed files with 8 additions and 6 deletions

View File

@@ -1,6 +1,6 @@
"use client";
import { useState, useMemo } from "react";
import React, { useState, useMemo } from "react";
import type { Task } from "@mosaic/shared";
import { TaskStatus } from "@mosaic/shared";
import {
@@ -40,7 +40,7 @@ const columns = [
* - Task cards with title, priority badge, assignee avatar
* - PATCH /api/tasks/:id on status change
*/
export function KanbanBoard({ tasks = [], onStatusChange }: KanbanBoardProps) {
export function KanbanBoard({ tasks = [], onStatusChange }: KanbanBoardProps): JSX.Element {
const [activeTaskId, setActiveTaskId] = useState<string | null>(null);
const sensors = useSensors(
@@ -80,11 +80,11 @@ export function KanbanBoard({ tasks = [], onStatusChange }: KanbanBoardProps) {
[tasks, activeTaskId]
);
function handleDragStart(event: DragStartEvent) {
function handleDragStart(event: DragStartEvent): void {
setActiveTaskId(event.active.id as string);
}
async function handleDragEnd(event: DragEndEvent) {
async function handleDragEnd(event: DragEndEvent): Promise<void> {
const { active, over } = event;
if (!over) {

View File

@@ -1,5 +1,6 @@
"use client";
import React from "react";
import type { Task } from "@mosaic/shared";
import { TaskStatus } from "@mosaic/shared";
import { useDroppable } from "@dnd-kit/core";
@@ -34,7 +35,7 @@ const statusBadgeColors = {
* A droppable column for tasks of a specific status.
* Uses @dnd-kit/core for drag-and-drop functionality.
*/
export function KanbanColumn({ status, title, tasks }: KanbanColumnProps) {
export function KanbanColumn({ status, title, tasks }: KanbanColumnProps): JSX.Element {
const { setNodeRef, isOver } = useDroppable({
id: status,
});

View File

@@ -1,5 +1,6 @@
"use client";
import React from "react";
import type { Task } from "@mosaic/shared";
import { TaskPriority } from "@mosaic/shared";
import { useSortable } from "@dnd-kit/sortable";
@@ -47,7 +48,7 @@ function getInitials(name: string): string {
* - Assignee avatar (if assigned)
* - Due date (if set)
*/
export function TaskCard({ task }: TaskCardProps) {
export function TaskCard({ task }: TaskCardProps): JSX.Element {
const {
attributes,
listeners,