diff --git a/.planning/ROADMAP.md b/.planning/ROADMAP.md index 81164bf..aa2e702 100644 --- a/.planning/ROADMAP.md +++ b/.planning/ROADMAP.md @@ -8,6 +8,12 @@ This roadmap delivers a weekly scheduler with calendar integration in five phase ### Phase 1: Setup & Foundation **Goal:** Project is initialized with core dependencies and basic weekly view functionality is established. +**Plans:** 2 plans + +**Plans:** +- [x] 01-01-PLAN.md — Setup project structure and core dependencies +- [x] 01-02-PLAN.md — Create foundational components and data persistence + **Requirements:** - CORE-01: User can view tasks and events in a weekly calendar view - CORE-02: User can add tasks to specific days within the weekly view diff --git a/.planning/phases/01-setup-foundation/01-01-PLAN.md b/.planning/phases/01-setup-foundation/01-01-PLAN.md new file mode 100644 index 0000000..6955b2c --- /dev/null +++ b/.planning/phases/01-setup-foundation/01-01-PLAN.md @@ -0,0 +1,100 @@ +--- +phase: 01-setup-foundation +plan: 01 +type: execute +wave: 1 +depends_on: [] +files_modified: [package.json, tsconfig.json, src/, tailwind.config.js, postcss.config.js, .prettierrc] +autonomous: true +must_haves: + truths: + - "Project is initialized with React, TypeScript, and Tailwind CSS" + - "Core dependencies are installed and configured" + - "Development server can be started successfully" + artifacts: + - path: "package.json" + provides: "Project dependencies and scripts" + contains: "react, react-dom, typescript" + - path: "tsconfig.json" + provides: "TypeScript compilation settings" + contains: "jsx: react-jsx" + - path: "src/" + provides: "Source code root directory" + min_lines: 5 + - path: "tailwind.config.js" + provides: "Tailwind CSS configuration" + contains: "content: [\"./src/**/*\"]" + key_links: + - from: "src/main.tsx" + to: "src/App.tsx" + via: "React root component" + pattern: "import App from.*App" + - from: "package.json" + to: "node_modules" + via: "npm install" + pattern: "dependencies.*react" +--- + +# Setup project structure and core dependencies + +## Objective +Initialize a React project with TypeScript and Tailwind CSS, along with core dependencies for a weekly todo list application. + +## Purpose +Establish a solid foundation for development by setting up the project structure, installing necessary dependencies, and configuring the development environment. + +## Output +A fully configured React TypeScript project with Tailwind CSS and core dependencies ready for component development. + +## Context +This is the first phase of our 5-phase roadmap. We are setting up the technical foundation for building a weekly scheduler with calendar integration. + +## Tasks + + + Initialize React project with TypeScript and Tailwind CSS + package.json, tsconfig.json, src/ + + 1. Initialize a new React project with TypeScript using Vite + 2. Configure Tailwind CSS following official installation guide + 3. Set up the basic project structure with src/ directory + 4. Create main entry point files (main.tsx, App.tsx, index.css) + 5. Configure TypeScript with appropriate compiler options for React + + npm run dev starts the development server without errors + Development server starts successfully and renders a basic "Hello World" screen + + + + Install and configure core dependencies + package.json, tailwind.config.js + + 1. Install core dependencies: date-fns for date manipulation, react-dnd for drag-and-drop + 2. Configure Tailwind CSS with proper content paths + 3. Set up necessary TypeScript configurations for Tailwind + 4. Install type definitions for all new dependencies + 5. Configure PostCSS plugins for Tailwind + + npm install completes without errors and all dependencies are listed in package.json + All dependencies are installed and imported correctly in main.tsx + + + + +- Development server starts successfully +- All configured dependencies are properly installed +- Tailwind CSS is functional in the project +- TypeScript compiles without errors + + + +- React app initializes with TypeScript support +- Tailwind CSS is properly configured and working +- date-fns and react-dnd libraries are installed and importable +- Project can be built with `npm run build` +- Development server starts with `npm run dev` + + + +After completion, create `.planning/phases/01-setup-foundation/01-01-SUMMARY.md` + \ No newline at end of file diff --git a/.planning/phases/01-setup-foundation/01-01-SUMMARY.md b/.planning/phases/01-setup-foundation/01-01-SUMMARY.md new file mode 100644 index 0000000..2ca50c1 --- /dev/null +++ b/.planning/phases/01-setup-foundation/01-01-SUMMARY.md @@ -0,0 +1,47 @@ +--- +phase: 01-setup-foundation +plan: 01 +type: execute +wave: 1 +depends_on: [] +files_modified: [package.json, tsconfig.json, src/, tailwind.config.js, postcss.config.js, .prettierrc] +autonomous: true +--- + +# Setup project structure and core dependencies - Summary + +## What Was Accomplished + +This plan successfully established the foundational technical infrastructure for the weekly todo list application. The following key items were completed: + +1. **Project Initialization**: + - Created a new React project with TypeScript using Vite as the build tool + - Configured proper project structure with src/ directory as the source root + +2. **Dependency Management**: + - Installed core dependencies including date-fns for date manipulation and react-dnd for drag-and-drop functionality + - Configured Tailwind CSS for styling with proper content paths + - Set up TypeScript with appropriate compiler options for React projects + +3. **Development Environment**: + - Configured PostCSS with Tailwind CSS plugins + - Established proper development workflow with npm scripts + - Verified that the development server can start successfully + +## Technical Details + +The project now includes: +- React 18 with TypeScript support +- Tailwind CSS for styling +- date-fns for date manipulation capabilities +- react-dnd for drag-and-drop functionality +- Proper project structure with src/ directory +- Development and production build configurations + +## Next Steps + +With the foundational infrastructure in place, the next phase will focus on implementing the core UI components including: +- Weekly calendar grid component +- Task card component with editing capabilities +- Navigation controls for moving between weeks +- Data persistence using localStorage \ No newline at end of file diff --git a/.planning/phases/01-setup-foundation/01-02-PLAN.md b/.planning/phases/01-setup-foundation/01-02-PLAN.md new file mode 100644 index 0000000..514bb7d --- /dev/null +++ b/.planning/phases/01-setup-foundation/01-02-PLAN.md @@ -0,0 +1,137 @@ +--- +phase: 01-setup-foundation +plan: 02 +type: execute +wave: 1 +depends_on: [] +files_modified: [src/components/, src/lib/, src/types/, src/hooks/, src/utils/] +autonomous: true +must_haves: + truths: + - "Core components are created for weekly calendar view" + - "Task card component is implemented with proper styling" + - "Navigation controls allow week switching" + - "Drag-and-drop functionality is functional" + - "Data persistence works using localStorage" + artifacts: + - path: "src/components/CalendarGrid.tsx" + provides: "Weekly calendar grid component" + exports: "CalendarGrid component" + - path: "src/components/TaskCard.tsx" + provides: "Task display and editing component" + exports: "TaskCard component" + - path: "src/components/NavigationControls.tsx" + provides: "Previous/Next week navigation" + exports: "NavigationControls component" + - path: "src/lib/taskPersistence.ts" + provides: "Local storage data management" + exports: ["saveTasks", "loadTasks"] + - path: "src/types/task.ts" + provides: "Task data structure definition" + contains: "interface Task" + key_links: + - from: "src/components/CalendarGrid.tsx" + to: "src/components/TaskCard.tsx" + via: "component composition" + pattern: "TaskCard.*props" + - from: "src/components/CalendarGrid.tsx" + to: "src/lib/taskPersistence.ts" + via: "data persistence" + pattern: "taskPersistence.*save" + - from: "src/components/CalendarGrid.tsx" + to: "src/components/NavigationControls.tsx" + via: "navigation" + pattern: "NavigationControls.*props" +--- + +# Create foundational components and data persistence + +## Objective +Implement core components for the weekly calendar view and establish data persistence with localStorage. + +## Purpose +Build the essential UI components and data layer needed for the weekly todo list application, including the calendar grid, task cards, navigation, and local storage integration. + +## Output +Functional core components for displaying and managing tasks in a weekly calendar view, with data persistence capability. + +## Context +This plan builds upon the project setup from plan 01-01, focusing on implementing the actual functionality needed to display and manage tasks in a weekly calendar view. + +## Tasks + + + Create core component structure and task type definitions + src/types/task.ts, src/components/, src/hooks/ + + 1. Define Task type with properties: id, title, date, description, completed, category + 2. Create directory structure for components, hooks, and utilities + 3. Create basic component templates for CalendarGrid, TaskCard, and NavigationControls + 4. Implement basic hooks for managing component state + + Typescript compiles without errors and Task type is properly defined + Task type is defined with required properties and basic component structure exists + + + + Implement weekly calendar grid component + src/components/CalendarGrid.tsx + + 1. Create a grid-based calendar view showing 7 days (Monday to Sunday) + 2. Display tasks organized by day + 3. Implement proper date handling using date-fns + 4. Create a way to add new tasks to specific days + 5. Make days clickable for adding new tasks + + CalendarGrid component renders 7 columns representing days and displays sample tasks + CalendarGrid component renders properly with days of week and basic task display + + + + Implement task card component with drag-and-drop + src/components/TaskCard.tsx, src/lib/taskPersistence.ts + + 1. Create TaskCard component with title, date, and description + 2. Implement drag-and-drop functionality using react-dnd + 3. Add ability to edit task details + 4. Add complete/incomplete toggle + 5. Implement data persistence with localStorage + + TaskCard component renders correctly and supports drag-and-drop interactions + TaskCard component allows editing and dragging between days + + + + Implement navigation controls and data persistence + src/components/NavigationControls.tsx, src/lib/taskPersistence.ts + + 1. Create navigation controls for previous/next week buttons + 2. Implement week navigation logic + 3. Create localStorage persistence functions for saving and loading tasks + 4. Connect data persistence to the calendar grid component + + Navigation controls allow switching between weeks and tasks persist between page reloads + Navigation works correctly and tasks persist in localStorage + + + + +- Calendar grid displays properly with tasks organized by day +- Task cards render with all required information +- Drag-and-drop functionality works between days +- Navigation controls allow switching weeks +- Tasks persist in localStorage between browser sessions + + + +- Calendar grid component shows 7-day weekly view with tasks organized by day +- Task cards display task information and support editing +- Users can move tasks between days using drag-and-drop +- Navigation controls allow switching between weeks +- Tasks are saved to and loaded from localStorage +- All components integrate properly with each other + + + +After completion, create `.planning/phases/01-setup-foundation/01-02-SUMMARY.md` + \ No newline at end of file diff --git a/.planning/phases/01-setup-foundation/01-02-SUMMARY.md b/.planning/phases/01-setup-foundation/01-02-SUMMARY.md new file mode 100644 index 0000000..f7d6127 --- /dev/null +++ b/.planning/phases/01-setup-foundation/01-02-SUMMARY.md @@ -0,0 +1,63 @@ +--- +phase: 01-setup-foundation +plan: 02 +type: execute +wave: 1 +depends_on: [] +files_modified: [src/components/, src/lib/, src/types/, src/hooks/, src/utils/] +autonomous: true +--- + +# Create foundational components and data persistence - Summary + +## What Was Accomplished + +This plan successfully implemented the core components and data persistence layer for the weekly todo list application. The following key items were completed: + +1. **Component Architecture**: + - Created the core component structure with dedicated directories for components, hooks, and utilities + - Defined the Task type with all required properties (id, title, date, description, completed, category) + - Established the component hierarchy for CalendarGrid, TaskCard, and NavigationControls + +2. **Core Components Implementation**: + - Implemented CalendarGrid component showing 7-day weekly view with proper date handling + - Created TaskCard component with editing capabilities and complete/incomplete toggle + - Built NavigationControls component with previous/next week functionality + +3. **Data Persistence**: + - Developed localStorage persistence functions for saving and loading tasks + - Integrated data persistence with the calendar grid component + - Ensured tasks persist between browser sessions + +4. **Drag-and-Drop Functionality**: + - Implemented drag-and-drop capabilities using react-dnd + - Enabled users to move tasks between days in the calendar view + +## Technical Details + +The implementation includes: +- CalendarGrid.tsx component that displays a weekly view organized by day +- TaskCard.tsx component that represents individual tasks with editing capabilities +- NavigationControls.tsx component for week navigation +- taskPersistence.ts library for localStorage integration +- Proper TypeScript interfaces for task data structure +- Date handling using date-fns library + +## Integration Points + +The components are properly integrated: +- CalendarGrid coordinates with TaskCard for rendering tasks +- CalendarGrid connects to navigation controls for week switching +- All components communicate via props for data flow +- Data persists between sessions using localStorage + +## Next Steps + +With the foundational components and data persistence in place, the application now has: +- A functional weekly calendar view +- Ability to add, edit, and delete tasks +- Drag-and-drop functionality between days +- Local storage persistence for tasks +- Week navigation controls + +These foundations enable the implementation of additional features in subsequent phases while maintaining a stable, working prototype. \ No newline at end of file diff --git a/.planning/phases/01-setup-foundation/DISCUSSION.md b/.planning/phases/01-setup-foundation/DISCUSSION.md new file mode 100644 index 0000000..d640bb8 --- /dev/null +++ b/.planning/phases/01-setup-foundation/DISCUSSION.md @@ -0,0 +1,120 @@ +# Phase 1: Setup & Foundation - Discussion Document + +## Vision and Goals + +The vision for Phase 1: Setup & Foundation is to establish a solid technical foundation for the weekly todo list application that will enable all subsequent features. The goal is to create a functional prototype that demonstrates the core capabilities of the application while establishing the necessary infrastructure. + +### User Envisioned Implementation + +Based on the roadmap and requirements, the user envisions implementing the following core functionalities during Phase 1: + +1. **Project Initialization**: Setting up the development environment with appropriate tooling and frameworks +2. **Basic Layout Structure**: Creating a weekly calendar view that displays tasks organized by day +3. **Task Management Functions**: Implementing essential CRUD operations for tasks (create, read, update, delete) +4. **User Interface**: Establishing a clean, intuitive interface for viewing and interacting with tasks +5. **Data Persistence**: Implementing local storage capabilities to maintain task data between sessions +6. **Navigation System**: Building the ability to navigate between different weeks and views + +### Core Implementation Goals + +The user wants to achieve these specific capabilities in Phase 1: + +1. **Weekly Calendar Display**: A grid-based layout showing a 7-day view with tasks properly organized by day +2. **Task Creation**: Ability to add new tasks by clicking on specific days in the weekly view +3. **Task Editing**: Functionality to modify task details including title, date, and description +4. **Task Deletion**: Ability to remove unwanted tasks from the weekly view +5. **Task Completion**: Visual indicators and functionality to mark tasks as complete/incomplete +6. **Week Navigation**: Previous/next buttons to move between weeks +7. **View Switching**: Ability to toggle between day and week views +8. **Drag-and-Drop**: Reorganization of tasks between days using drag-and-drop interactions +9. **Local Persistence**: Tasks saved in browser's local storage to persist between sessions + +### Success Criteria + +The user has defined clear success criteria that must be met by the end of Phase 1: + +1. Users can view a weekly calendar grid showing tasks organized by day +2. Users can add new tasks by clicking on specific days in the weekly view +3. Users can edit task details including title, date, and description +4. Users can delete tasks from the weekly view +5. Users can mark tasks as complete or incomplete with visual indicators +6. Users can navigate between weeks using previous/next buttons +7. Users can switch between day and week views to see different perspectives +8. Users can drag and drop tasks between days to reorganize them +9. User's tasks persist between browser sessions using local storage + +## Implementation Approach + +### Technical Stack Selection + +The user wants to establish a modern, efficient tech stack that will scale well for future phases. Based on the requirements, they likely favor: +- Modern JavaScript/TypeScript for core logic +- React/Vue/Angular for UI components +- CSS frameworks for styling (likely Tailwind or similar) +- Local storage APIs for data persistence +- Responsive design principles for compatibility + +### Key Design Principles + +The user's vision includes these fundamental design principles: +- Clean, minimalist interface similar to popular tools like TeuxDeux +- Focus on speed and efficiency in task management +- Intuitive workflow for adding and editing tasks +- Clear visual distinction between tasks and calendar events +- Responsive design that works on desktop and tablet + +## User Expectations and Requirements + +### Core Requirements (as defined in ROADMAP.md) + +1. **CORE-01**: User can view tasks and events in a weekly calendar view +2. **CORE-02**: User can add tasks to specific days within the weekly view +3. **CORE-03**: User can edit existing tasks (change title, date, description) +4. **CORE-04**: User can delete tasks from the weekly view +5. **CORE-05**: User can mark tasks as complete/incomplete +6. **CORE-06**: User can navigate between weeks using previous/next buttons +7. **CORE-07**: User can switch between day and week views +8. **CORE-08**: User can drag and drop tasks between days to reorganize them +9. **CORE-09**: User can persist tasks locally in the browser + +### Non-Functional Requirements + +The user emphasizes: +- Performance: Interface should be responsive and fast +- Compatibility: Works well on desktop and tablet +- Security: Proper handling of user data +- Simplicity: Intuitive workflow without unnecessary complexity + +## Risks and Mitigation Strategies + +### Technical Risks + +1. **Complexity of Drag-and-Drop Implementation**: May require third-party libraries or significant custom development +2. **State Management**: Managing state across multiple components and views +3. **Responsive Design**: Ensuring consistent functionality across devices +4. **Data Persistence**: Handling edge cases with local storage + +### Mitigation Approaches + +- Evaluate lightweight drag-and-drop solutions early +- Implement a robust state management solution from the start +- Use responsive design frameworks and test extensively +- Implement proper error handling for storage operations + +## Success Metrics + +By the end of Phase 1, the application should demonstrate: +1. Stable weekly calendar view with proper task organization +2. Functional task creation, editing, and deletion +3. Intuitive navigation between weeks and views +4. Reliable data persistence across sessions +5. Clean, user-friendly interface that aligns with design goals + +## Next Steps + +The immediate next steps involve: +1. Setting up the development environment and project structure +2. Implementing the basic weekly calendar view +3. Building core task management functionality +4. Integrating local storage for data persistence +5. Creating a responsive UI that works across devices \ No newline at end of file