|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +React Native Big Calendar is a cross-platform calendar component for React Native that runs on Web, iOS, and Android. It's fully TypeScript-based and provides extensive customization options including themes, custom event renderers, and multiple view modes. |
| 8 | + |
| 9 | +## Common Development Commands |
| 10 | + |
| 11 | +### Building and Testing |
| 12 | + |
| 13 | +- `bun run build` - Clean build using Rollup with TypeScript |
| 14 | +- `bun run test` - Run Jest tests |
| 15 | +- `bun run lint` - Run Biome linter with error-on-warnings |
| 16 | +- `bun run lint:fix` - Auto-fix linting issues with Biome |
| 17 | +- `bun run watch` - Watch mode for development builds |
| 18 | + |
| 19 | +### Demo Development |
| 20 | + |
| 21 | +- `bun sync-demo` - Build library and copy to expo-demo (run this after any src changes) |
| 22 | +- `cd expo-demo && bun start` - Start Expo development server for testing |
| 23 | + |
| 24 | +### Storybook |
| 25 | + |
| 26 | +- `bun run storybook` - Start Storybook development server on port 7007 |
| 27 | +- `bun run build-storybook` - Build static Storybook |
| 28 | + |
| 29 | +## Code Architecture |
| 30 | + |
| 31 | +### Core Components Structure |
| 32 | + |
| 33 | +- `src/components/Calendar.tsx` - Main calendar wrapper with theme provider |
| 34 | +- `src/components/CalendarContainer.tsx` - Core calendar logic and state management |
| 35 | +- `src/components/CalendarBody.tsx` - Week/day view body renderer |
| 36 | +- `src/components/CalendarBodyForMonthView.tsx` - Month view body renderer |
| 37 | +- `src/components/CalendarHeader.tsx` - Header for week/day views |
| 38 | +- `src/components/CalendarHeaderForMonthView.tsx` - Header for month view |
| 39 | +- `src/components/Schedule.tsx` - Schedule view implementation |
| 40 | + |
| 41 | +### Key Architectural Patterns |
| 42 | + |
| 43 | +- **Theme System**: Uses React Context (`ThemeContext`) with deep merge for theme customization |
| 44 | +- **Mode-based Rendering**: Different components for different calendar modes (week, month, day, schedule, etc.) |
| 45 | +- **Event Processing**: Complex event overlap calculation and positioning logic |
| 46 | +- **Performance Optimization**: "Enriched Events" system for pre-processing event data |
| 47 | +- **Cross-platform**: Uses react-native-web for web compatibility |
| 48 | + |
| 49 | +### Critical Dependencies |
| 50 | + |
| 51 | +- `dayjs` - Date manipulation (with plugins: duration, isBetween, isoWeek) |
| 52 | +- `calendarize` - Calendar date generation |
| 53 | +- `react-native-gesture-handler` - Touch gesture handling |
| 54 | +- `react-native-infinite-pager` - Swipe navigation between dates |
| 55 | +- `react-native-reanimated` - Smooth animations |
| 56 | + |
| 57 | +### TypeScript Interfaces |
| 58 | + |
| 59 | +- `ICalendarEventBase` - Base event interface in `src/interfaces.ts` |
| 60 | +- `ThemeInterface` - Theme structure in `src/theme/ThemeInterface.ts` |
| 61 | +- `CalendarProps<T>` - Main component props with generic event type support |
| 62 | + |
| 63 | +### Utilities |
| 64 | + |
| 65 | +- `src/utils/datetime.ts` - Date manipulation and calendar logic |
| 66 | +- `src/utils/object.ts` - Deep merge and object utilities |
| 67 | +- `src/utils/react.ts` - React-specific utilities including `typedMemo` |
| 68 | + |
| 69 | +## Build Configuration |
| 70 | + |
| 71 | +- **Bundler**: Rollup with TypeScript plugin |
| 72 | +- **Linter**: Biome (replaces ESLint/Prettier) |
| 73 | +- **Test Runner**: Jest with SWC transform |
| 74 | +- **TypeScript**: Strict mode enabled with comprehensive type checking |
| 75 | +- **Package Manager**: Bun (with fallback yarn support via Volta) |
| 76 | + |
| 77 | +## Testing Strategy |
| 78 | + |
| 79 | +- Unit tests in `src/utils/__tests__/` |
| 80 | +- Stories-based testing with Storybook |
| 81 | +- Real device testing via expo-demo |
| 82 | +- Cross-platform testing (Web, iOS, Android) |
| 83 | + |
| 84 | +## Development Workflow |
| 85 | + |
| 86 | +1. Make changes to `src/` files |
| 87 | +2. Run `bun sync-demo` to copy build to demo |
| 88 | +3. Test changes in `expo-demo` with `bun start` |
| 89 | +4. Run `bun run lint` and `bun run test` before committing |
| 90 | +5. Use Storybook for component-level testing and documentation |
| 91 | + |
| 92 | +## Performance Considerations |
| 93 | + |
| 94 | +- Use `enrichedEventsByDate` prop for pre-processed event data |
| 95 | +- Enable `eventsAreSorted` when events are already sorted |
| 96 | +- Consider `enableEnrichedEvents` for large event datasets |
| 97 | +- Event overlap calculation is computationally expensive - cache when possible |
0 commit comments