Kevin-Mok/kanban
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix type check errors

Browse Source
This commit is contained in:
Kevin Mok
2025-03-28 14:27:51 -04:00
parent b447bb1cbe
commit 4cb4cb4959
12 changed files with 4327 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.json Normal file
View File

@@ -0,0 +1,3 @@
{
"extends": "next"
}

77
mock-data.ts
View File

@@ -1,77 +0,0 @@
interface Event {
id: string;
title: string;
description: string;
imageUrl: string;
time: string;
}
interface EventsByDate {
[date: string]: Event[];
}
const events: EventsByDate = {
"2024-03-11": [
{
id: "event-1",
title: "Coffee with Alex",
description:
"Meet with Alex to brainstorm ideas for the upcoming product
launch. We'll review market research and competitor analysis to identify
potential opportunities and challenges.",
imageUrl:
"https://fastly.picsum.photos/id/312/1920/1080.jpg?hmac=OD_fP9MUQN7uJ8NBR7t
lii78qwHPUROGgohG4w16Kjw",
time: "09:00 AM",
},
{
id: "event-2",
title: "Team Standup",
description:
"Weekly standup meeting with the dev team. Discuss progress,
blockers, and align on next week's priorities.",
imageUrl:
"http://fastly.picsum.photos/id/737/1920/1080.jpg?hmac=aFzER8Y4wcWTrXVx2wVK
Sj10IqnygaF33gESj0WGDwI",
time: "02:00 PM",
},
],
"2024-03-12": [
{
id: "event-3",
title: "Yoga Session",
description:
"Join for a relaxing yoga session to reduce stress and improve
mindfulness. Suitable for all levels, focusing on gentle stretches.",
imageUrl:
"https://fastly.picsum.photos/id/392/1920/1080.jpg?hmac=Fvbf7C1Rcozg8EccwYP
qsGkk_o6Bld2GQRDPZKWpd7g",
time: "12:00 PM",
},
{
id: "event-4",
title: "Product Demo",
description:
"Demo of UI improvements and performance optimizations to gather
stakeholder feedback.",
imageUrl:
"https://fastly.picsum.photos/id/249/1920/1080.jpg?hmac=cPMNdgGXRh6T_KhRMua
QjRtAx5cWRraELjtL2MHTfYs",
time: "03:30 PM",
},
],
"2024-03-13": [
{
id: "event-5",
title: "Client Meeting",
description:
"Review project progress, timeline adjustments, and outline roadmap
for next quarter with the client.",
imageUrl:
"https://fastly.picsum.photos/id/908/1920/1080.jpg?hmac=MeG_oA1s75hHAL_4JzC
ioh6--zyFTWSCTxOhe8ugvXo",
time: "11:30 AM",
},
],
};

4194
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
package.json
View File

@@ -6,7 +6,8 @@
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "next lint"
"lint": "next lint",
"type-check": "tsc --noEmit"
},
"dependencies": {
"@atlaskit/pragmatic-drag-and-drop": "^1.5.2",
@@ -24,6 +25,8 @@
"@types/react": "^19",
"@types/react-dom": "^19",
"autoprefixer": "^10.0.0",
"eslint": "9.23.0",
"eslint-config-next": "15.2.3",
"postcss": "^8.0.0",
"tailwindcss": "^4",
"typescript": "^5"

109
src/components/Calendar.tsx
View File

@@ -19,6 +19,7 @@ import EventModal from '@/components/EventModal';
import eventsData from '@/data/events';
import { Event, EventsByDate } from '@/types';
import CalendarHeader from '@/components/CalendarHeader';
import DraggableEvent from './DraggableEvent';
const Calendar = () => {
const { width } = useWindowSize();
@@ -58,10 +59,8 @@ const Calendar = () => {
const sourceDate = source.data.date;
const targetDate = dropTarget.date;
const updatedEvent = { ...movedEvent, date: targetDate };
newEvents[sourceDate] = (newEvents[sourceDate] || []).filter((e: Event) => e.id !== movedEvent.id);
newEvents[targetDate] = [...(newEvents[targetDate] || []), updatedEvent];
newEvents[targetDate] = [...(newEvents[targetDate] || []), movedEvent];
setEvents(newEvents);
}
@@ -218,10 +217,7 @@ const Calendar = () => {
};
const handleEventClick = useCallback(({ event, date }: { event: Event; date: string }) => {
setSelectedEvent({
...event,
date
});
setSelectedEvent(event);
}, []);
return (
@@ -291,6 +287,7 @@ const Calendar = () => {
{selectedEvent && (
<EventModal
event={selectedEvent}
date={format(currentDate, 'yyyy-MM-dd')}
onClose={() => setSelectedEvent(null)}
/>
)}
@@ -374,7 +371,7 @@ const DayColumn = ({
}, [date]);
console.log('Date value:', date);
console.log('Is valid date:', date instanceof Date && !isNaN(date));
console.log('Is valid date:', date instanceof Date && !isNaN(date.getTime()));
return (
<motion.div
@@ -410,102 +407,6 @@ const DayColumn = ({
);
};
const DraggableEvent = ({
event,
date,
onEventClick,
onDragStart,
onDragEnd,
onDayChange,
isClient
}: {
event: Event;
date: string;
onEventClick: (eventData: { event: Event; date: string }) => void;
onDragStart: () => void;
onDragEnd: () => void;
onDayChange: (direction: 'left' | 'right') => void;
isClient: boolean;
}) => {
const ref = useRef<HTMLDivElement>(null);
const [isDragging, setIsDragging] = useState(false);
const screenWidth = useRef(isClient ? window.innerWidth : 0);
const lastChangeTime = useRef(0);
if (!event || typeof event !== 'object' || !event.id) {
console.error('Invalid event object:', event);
return null;
}
useEffect(() => {
const element = ref.current;
if (!element) return;
const cleanup = draggable({
element,
onDragStart: () => {
screenWidth.current = window.innerWidth;
setIsDragging(true);
onDragStart();
lastChangeTime.current = Date.now();
},
onDrag: ({ location }) => {
const currentX = location.current.input.clientX;
const now = Date.now();
if (now - lastChangeTime.current > 500) {
if (currentX < 50) {
lastChangeTime.current = now;
onDayChange('left');
} else if (currentX > screenWidth.current - 50) {
lastChangeTime.current = now;
onDayChange('right');
}
}
},
onDrop: () => {
setIsDragging(false);
onDragEnd();
},
getInitialData: () => ({ id: event.id, date }),
dragHandle: element
});
return cleanup;
}, [date, event.id, onDragEnd, onDragStart, onDayChange]);
return (
<motion.div
ref={ref}
layoutId={event.id}
onClick={() => !isDragging && onEventClick({ event, date })}
className="bg-white p-4 rounded shadow mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none"
whileHover={{ scale: 1.01 }}
style={{
opacity: isDragging ? 0.7 : 1,
userSelect: 'none',
WebkitUserSelect: 'none',
touchAction: 'manipulation'
}}
>
<div className="relative rounded overflow-hidden mb-2">
{event.imageUrl && (
<img
src={event.imageUrl}
alt={event.title}
className="w-full h-16 md:h-12 object-cover pointer-events-none"
draggable="false"
/>
)}
<div className="absolute top-1 right-1 bg-black/50 text-white text-xs px-2 py-1 rounded">
{event.time}
</div>
</div>
<h3 className="font-medium text-black">{event.title}</h3>
</motion.div>
);
};
const WeekHeader = ({ currentDate }: { currentDate: Date }) => {
const weekDays = useMemo(() => {
const start = startOfWeek(currentDate, { weekStartsOn: 0 }); // Start week on Sunday

25
src/components/DayColumn.tsx
View File

@@ -1,16 +1,17 @@
import React, { useRef } from 'react';
import { motion } from 'framer-motion';
import { format, addDays } from 'date-fns';
import { DraggableEvent } from './DraggableEvent';
import DraggableEvent from './DraggableEvent';
import { Event } from '../types';
interface DayColumnProps {
date: Date;
events: Event[];
isMobile: boolean;
index: number;
onEventClick: (event: Event) => void;
onDragStart: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
onDragEnd: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
onEventClick: (eventData: { event: Event; date: string }) => void;
onDragStart: () => void;
onDragEnd: () => void;
handleEventMove: (eventId: string, newDate: Date) => void;
onDayChange: (dir: 'left' | 'right') => void;
isClient: boolean;
@@ -30,7 +31,15 @@ const DayColumn: React.FC<DayColumnProps> = ({
}) => {
const columnRef = useRef<HTMLDivElement>(null);
const sortedEvents = [...events].sort((a, b) => a.start.getTime() - b.start.getTime());
const sortedEvents = [...events].sort((a, b) => {
const timeA = new Date(a.time).getTime();
const timeB = new Date(b.time).getTime();
return timeA - timeB;
});
const handleMove = (dir: 'up' | 'down') => {
// ... existing code ...
};
return (
<motion.div
@@ -50,9 +59,9 @@ const DayColumn: React.FC<DayColumnProps> = ({
key={event.id}
event={event}
date={format(date, 'yyyy-MM-dd')}
onEventClick={onEventClick}
onDragStart={onDragStart}
onDragEnd={onDragEnd}
onEventClick={(eventData) => onEventClick({ event: eventData.event, date: eventData.date })}
onDragStart={() => onDragStart()}
onDragEnd={() => onDragEnd()}
onDayChange={(dir) => {
onDayChange(dir);
const newDate = addDays(date, dir === 'left' ? -1 : 1);

97
src/components/DraggableEvent.tsx Normal file
View File

@@ -0,0 +1,97 @@
import { useRef, useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { Event } from '../types';
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
interface DraggableEventProps {
event: Event;
date: string;
onEventClick: (eventData: { event: Event; date: string }) => void;
onDragStart: () => void;
onDragEnd: () => void;
onDayChange: (direction: 'left' | 'right') => void;
isClient: boolean;
}
export default function DraggableEvent({
event,
date,
onEventClick,
onDragStart,
onDragEnd,
onDayChange,
isClient
}: DraggableEventProps) {
const ref = useRef<HTMLDivElement>(null);
const [isDragging, setIsDragging] = useState(false);
const screenWidth = useRef(isClient ? window.innerWidth : 0);
const lastChangeTime = useRef(0);
useEffect(() => {
const element = ref.current;
if (!element) return;
const cleanup = draggable({
element,
onDragStart: () => {
screenWidth.current = window.innerWidth;
setIsDragging(true);
onDragStart();
lastChangeTime.current = Date.now();
},
onDrag: ({ location }) => {
const currentX = location.current.input.clientX;
const now = Date.now();
if (now - lastChangeTime.current > 500) {
if (currentX < 50) {
lastChangeTime.current = now;
onDayChange('left');
} else if (currentX > screenWidth.current - 50) {
lastChangeTime.current = now;
onDayChange('right');
}
}
},
onDrop: () => {
setIsDragging(false);
onDragEnd();
},
getInitialData: () => ({ id: event.id, date }),
dragHandle: element
});
return cleanup;
}, [date, event.id, onDragEnd, onDragStart, onDayChange]);
return (
<motion.div
ref={ref}
layoutId={event.id}
onClick={() => !isDragging && onEventClick({ event, date })}
className="bg-white p-4 rounded shadow mb-2 cursor-grab active:cursor-grabbing transition-all relative select-none"
whileHover={{ scale: 1.01 }}
style={{
opacity: isDragging ? 0.7 : 1,
userSelect: 'none',
WebkitUserSelect: 'none',
touchAction: 'manipulation'
}}
>
<div className="relative rounded overflow-hidden mb-2">
{event.imageUrl && (
<img
src={event.imageUrl}
alt={event.title}
className="w-full h-16 md:h-12 object-cover pointer-events-none"
draggable="false"
/>
)}
<div className="absolute top-1 right-1 bg-black/50 text-white text-xs px-2 py-1 rounded">
{event.time}
</div>
</div>
<h3 className="font-medium text-black">{event.title}</h3>
</motion.div>
);
}

14
src/components/EventModal.tsx
View File

@@ -1,18 +1,22 @@
import { motion, AnimatePresence } from 'framer-motion';
import { format, parseISO, isValid } from 'date-fns';
interface EventWithDate {
interface Event {
id: string;
title: string;
time: string;
date: string; // Now required
description?: string;
imageUrl?: string;
}
const EventModal = ({ event, onClose }: { event: EventWithDate; onClose: () => void }) => {
// Now we can safely use event.date
const eventDate = parseISO(event.date);
interface EventModalProps {
event: Event;
date: string;
onClose: () => void;
}
const EventModal = ({ event, date, onClose }: EventModalProps) => {
const eventDate = parseISO(date);
const formattedDate = isValid(eventDate) ? format(eventDate, 'MMM d, yyyy') : 'Invalid date';
return (

2
src/data/events.ts
View File

@@ -415,7 +415,7 @@ const events: EventsByDate = {
],
"2025-04-02": [
{
id极: "event-27",
id: "event-27",
title: "Code Review",
description: "Review recent code changes and discuss improvements.",
imageUrl: "https://picsum.photos/1920/1080?random=53",

2
src/types.ts
View File

@@ -2,10 +2,8 @@ export interface Event {
id: string;
title: string;
time: string;
date: Date;
description?: string;
imageUrl?: string;
// add other properties as needed
}
export type EventsByDate = {

14
src/types/index.ts
View File

@@ -1,14 +0,0 @@
console.log('Types module loaded');
interface Event {
id: string;
title: string;
description: string;
imageUrl: string;
time: string;
}
interface EventsByDate {
[date: string]: Event[];
}
export default { Event, EventsByDate };

2
tsconfig.json
View File

@@ -19,7 +19,7 @@
}
],
"paths": {
"@/*": ["src/*"]
"@/*": ["./src/*"]
}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],