diff --git a/CLAUDE.md b/CLAUDE.md new file mode 100644 index 0000000..61c890f --- /dev/null +++ b/CLAUDE.md @@ -0,0 +1,89 @@ +# CLAUDE.md + +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. + +## Development Commands + +### Build and Development +- **Build TypeScript:** `npm run build` - Compiles TypeScript sources to JavaScript using esbuild +- **Watch mode:** `npm run watch` - Continuously compiles TypeScript on file changes +- **Clean build:** `npm run clean` - Removes compiled JavaScript files (uses PowerShell on Windows) +- **Start server:** `dotnet run` - Starts the ASP.NET Core server on http://localhost:8000 + +### Typical Development Workflow +1. Install dependencies: `npm install` +2. Build TypeScript: `npm run build` +3. Start server: `dotnet run` +4. For active development, run `npm run watch` in a separate terminal + +## Architecture Overview + +Calendar Plantempus is an event-driven calendar application with the following architecture: + +### Core Principles +- **Event-driven communication**: All components communicate via DOM CustomEvents through a central EventBus +- **No global state**: Each manager maintains its own state +- **Manager-based architecture**: Each manager has a specific responsibility +- **Pure DOM manipulation**: No external JavaScript frameworks (React, Vue, etc.) +- **TypeScript with esbuild**: Modern build tooling for fast compilation + +### Key Components + +#### EventBus (src/core/EventBus.ts) +Central event dispatcher using DOM CustomEvents. All inter-component communication flows through this: +```typescript +// Example event emission +eventBus.emit('calendar:view-changed', { view: 'week' }); + +// Example event subscription +eventBus.on('calendar:view-changed', (event) => { /* handle */ }); +``` + +#### Manager Pattern +Each manager is instantiated in `src/index.ts` and handles a specific domain: +- **CalendarManager**: Main coordinator, initializes other managers +- **ViewManager**: Handles day/week/month view switching +- **NavigationManager**: Prev/next/today navigation +- **EventManager**: CRUD operations for calendar events +- **EventRenderer**: Visual rendering of events in the grid +- **GridManager**: Creates and maintains the calendar grid structure +- **ScrollManager**: Handles scroll position and time indicators +- **DataManager**: Mock data loading and event data transformation + +### Project Structure +``` +src/ +├── constants/ # Enums and constants (EventTypes) +├── core/ # Core functionality (EventBus, CalendarConfig) +├── managers/ # Manager classes (one per domain) +├── types/ # TypeScript type definitions +└── utils/ # Utility functions (DateUtils, PositionUtils) + +wwwroot/ +├── css/ # Modular CSS files +├── js/ # Compiled JavaScript output +└── index.html # Main HTML entry point +``` + +### CSS Architecture +Modular CSS structure without external frameworks: +- `calendar-base-css.css`: CSS custom properties and base styles +- `calendar-components-css.css`: UI components +- `calendar-events-css.css`: Event styling and colors +- `calendar-layout-css.css`: Grid and layout +- `calendar-popup-css.css`: Popup and modal styles + +### Event Naming Convention +Events follow the pattern `category:action`: +- `calendar:*` - General calendar events +- `grid:*` - Grid-related events +- `event:*` - Event data changes +- `navigation:*` - Navigation actions +- `view:*` - View changes + +### TypeScript Configuration +- Target: ES2020 +- Module: ESNext +- Strict mode enabled +- Source maps enabled +- Output directory: `./js` \ No newline at end of file diff --git a/calendar-grid-manager.js b/calendar-grid-manager.js index a244898..7673542 100644 --- a/calendar-grid-manager.js +++ b/calendar-grid-manager.js @@ -28,7 +28,7 @@ export class GridManager { findElements() { this.container = document.querySelector('swp-calendar-container'); this.timeAxis = document.querySelector('swp-time-axis'); - this.weekHeader = document.querySelector('swp-week-header'); + this.weekHeader = document.querySelector('swp-calendar-header'); this.timeGrid = document.querySelector('swp-time-grid'); this.scrollableContent = document.querySelector('swp-scrollable-content'); } diff --git a/calendar-poc-single-file.html b/calendar-poc-single-file.html index 42e163c..8c2f25f 100644 --- a/calendar-poc-single-file.html +++ b/calendar-poc-single-file.html @@ -64,7 +64,7 @@ swp-calendar-nav, swp-calendar-container, swp-time-axis, - swp-week-header, + swp-calendar-header, swp-scrollable-content, swp-time-grid, swp-day-columns, @@ -228,7 +228,7 @@ } /* Week container for sliding */ - swp-week-container { + swp-grid-container { grid-column: 2; display: grid; grid-template-rows: auto 1fr; @@ -237,19 +237,19 @@ transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1); } - swp-week-container.slide-out-left { + swp-grid-container.slide-out-left { transform: translateX(-100%); } - swp-week-container.slide-out-right { + swp-grid-container.slide-out-right { transform: translateX(100%); } - swp-week-container.slide-in-left { + swp-grid-container.slide-in-left { transform: translateX(-100%); } - swp-week-container.slide-in-right { + swp-grid-container.slide-in-right { transform: translateX(100%); } @@ -287,7 +287,7 @@ } /* Week header */ - swp-week-header { + swp-calendar-header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--color-surface); @@ -522,8 +522,8 @@ - - + + @@ -531,7 +531,7 @@ - +