89 lines
No EOL
3.4 KiB
Markdown
89 lines
No EOL
3.4 KiB
Markdown
# 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` |