@dayflow/core 0.1.4 → 1.0.0

package/README.md

@@ -2,12 +2,40 @@
 
 A flexible and feature-rich calendar component library for React applications with drag-and-drop support, multiple views, and plugin architecture.
 
-[![npm version](https://img.shields.io/npm/v/%40dayflow%2Fcore.svg)](https://www.npmjs.com/package/@dayflow/core)
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![npm](https://img.shields.io/npm/v/@dayflow/core?logo=npm&color=blue&label=version)](https://www.npmjs.com/package/@dayflow/core)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen?logo=github)](https://github.com/dayflow-js/dayflow/pulls)
+[![License](https://img.shields.io/github/license/dayflow-js/dayflow)](https://github.com/dayflow-js/dayflow/blob/main/LICENSE)
+[![Discord](https://img.shields.io/badge/Discord-Join%20Chat-5865F2?logo=discord&logoColor=white)](https://discord.gg/jc37N4xw)
 
-## ✨ Features
+## 🗓️ Features
 
-- 📅 **Multiple Views**: Day, Week, Month, and Year views
+### ✨ Monthly, Weekly, Daily and Various View Types
+
+| Monthly                                  | Weekly                                 |
+| ---------------------------------------- | -------------------------------------- |
+| ![image](./assets/images//MonthView.png) | ![image](./assets/images/WeekView.png) |
+
+| Daily                                 | Event Stack Level                        |
+| ------------------------------------- | ---------------------------------------- |
+| ![image](./assets/images/DayView.png) | ![image](./assets/images/stackLevel.png) |
+
+### 🤩 Default Panel (with multiple Event Detail Panel options available)
+
+| Detail Popup                        | Detail Dialog                        |
+| ----------------------------------- | ------------------------------------ |
+| ![image](./assets/images/popup.png) | ![image](./assets/images/dialog.png) |
+
+### 🎯 Easy to resize and drag
+
+https://github.com/user-attachments/assets/726a5232-35a8-4fe3-8e7b-4de07c455353
+
+https://github.com/user-attachments/assets/957317e5-02d8-4419-a74b-62b7d191e347
+
+> ⚡ For more features and interactive experience, visit our [live demo](https://dayflow-js.github.io/dayflow/).
+
+## ✨ Core Features
+
+- 🗓️ **Multiple Views**: Day, Week, Month, and Year views
 - 🎨 **Customizable Styling**: Built with Tailwind CSS for easy customization
 - 📱 **Responsive Design**: Works seamlessly on desktop, tablet, and mobile
 - 🔌 **Plugin Architecture**: Extensible plugin system for custom functionality
@@ -17,9 +45,38 @@ A flexible and feature-rich calendar component library for React applications wi
 - 🔄 **Virtual Scrolling**: High performance with large datasets
 - 🎭 **Custom Renderers**: Customize event appearance and behavior
 
-## 📦 Installation
+## 🚀 Additional Features
+
+### 📅 Advanced Calendar Capabilities
+
+- **Multi-Day Events**: Seamlessly span events across multiple days with visual continuity
+- **All-Day Events**: Support for full-day events with dedicated header section
+- **Event Stacking**: Intelligent event overlap detection with customizable stack levels
+- **Sidebar Support**: Built-in sidebar component for calendar management
+
+### 🎨 Customization & Theming
+
+- **Custom Event Renderers**: Full control over event appearance with custom components
+- **Color Coding**: Multiple calendar types with color-coded events (`calendarId` support)
+- **Custom Detail Panels**: Three display modes - Dialog, Popup, or custom panel
+- **Custom Headers**: Fully customizable `ViewHeader` component with switcher modes
+- **Drag Indicators**: Customizable drag indicator renderers for different event types
+
+### 🎯 Event Interaction
+
+- **Event Callbacks**: `onEventCreate`, `onEventUpdate`, `onEventDelete` lifecycle hooks
+- **Click Events**: Handle event clicks with custom callbacks
+- **Drag & Drop**: Resize and move events with visual feedback
+- **Color Picker**: Built-in color selection component for calendar types
 
-### Install DayFlow
+### ⚡ Performance & Developer Experience
+
+- **Virtual Scrolling**: High-performance rendering for large datasets in Month and Year views
+- **TypeScript First**: Complete type definitions for all APIs
+- **Plugin System**: Extensible architecture with Events Plugin and Drag Plugin
+- **Temporal API**: Modern date/time handling with Temporal polyfill
+
+## 📦 Installation
 
 ```bash
 npm install @dayflow/core lucide-react
@@ -31,62 +88,15 @@ pnpm add @dayflow/core lucide-react
 
 ### Peer Dependencies
 
-DayFlow requires the following peer dependencies:
 - `react` >= 18.0.0
 - `react-dom` >= 18.0.0
 - `lucide-react` >= 0.400.0
 
-### Configure Tailwind CSS (Required)
-
-DayFlow uses Tailwind CSS for styling. Set up Tailwind in your project:
-
-**1. Install Tailwind CSS:**
-
-```bash
-npm install -D tailwindcss @tailwindcss/postcss autoprefixer
-```
-
-**2. Create `postcss.config.js`:**
-
-```js
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-    autoprefixer: {},
-  },
-};
-```
-
-**3. Create `tailwind.config.js` with required spacing configuration:**
-
-```js
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  theme: {
-    extend: {
-      spacing: {
-        18: '4.5rem', // Required for Week/Day view hour heights
-      },
-    },
-  },
-  plugins: [],
-};
-```
-
-**4. Import Tailwind in your CSS:**
-
-```css
-/* src/index.css */
-@import 'tailwindcss';
-```
-
 ## 🚀 Quick Start
 
 ```tsx
 import { useCalendarApp, DayFlowCalendar } from '@dayflow/core';
 import { createMonthView, createWeekView, createDayView } from '@dayflow/core';
-// Import styles
 import '@dayflow/core/dist/styles.css';
 
 function App() {
@@ -99,350 +109,37 @@ function App() {
 }
 ```
 
-> **Note**: Don't forget to import the CSS file in your application to ensure proper styling.
-
-## 📖 Basic Usage
-
-### Creating a Calendar with Events
-
-```tsx
-import {
-  useCalendarApp,
-  DayFlowCalendar,
-  createMonthView,
-  createEvent,
-  createAllDayEvent,
-} from '@dayflow/core';
-import '@dayflow/core/dist/styles.css';
-
-function MyCalendar() {
-  const events = [
-    // Timed event
-    createEvent({
-      id: '1',
-      title: 'Team Meeting',
-      start: new Date(2025, 0, 15, 10, 0),
-      end: new Date(2025, 0, 15, 11, 0),
-    }),
-    // All-day event
-    createAllDayEvent(
-      '2',
-      'Conference',
-      new Date(2025, 0, 20)
-    ),
-  ];
-
-  const calendar = useCalendarApp({
-    views: [createMonthView()],
-    initialDate: new Date(),
-    events,
-  });
-
-  return <DayFlowCalendar calendar={calendar} />;
-}
-```
-
-### Using Multiple Views
-
-```tsx
-import {
-  useCalendarApp,
-  DayFlowCalendar,
-  createDayView,
-  createWeekView,
-  createMonthView,
-  createYearView,
-  ViewType,
-} from '@dayflow/core';
-import '@dayflow/core/dist/styles.css';
-
-function MultiViewCalendar() {
-  const calendar = useCalendarApp({
-    views: [
-      createDayView(),
-      createWeekView(),
-      createMonthView(),
-      createYearView(),
-    ],
-    initialView: ViewType.MONTH,
-    initialDate: new Date(),
-  });
-
-  return (
-    <div>
-      <div className="view-switcher">
-        <button onClick={() => calendar.changeView(ViewType.DAY)}>Day</button>
-        <button onClick={() => calendar.changeView(ViewType.WEEK)}>Week</button>
-        <button onClick={() => calendar.changeView(ViewType.MONTH)}>
-          Month
-        </button>
-        <button onClick={() => calendar.changeView(ViewType.YEAR)}>Year</button>
-      </div>
-      <DayFlowCalendar calendar={calendar} />
-    </div>
-  );
-}
-```
-
-### Event Callbacks
-
-```tsx
-function CalendarWithCallbacks() {
-  const calendar = useCalendarApp({
-    views: [createMonthView()],
-    initialDate: new Date(),
-    callbacks: {
-      onEventCreate: event => {
-        console.log('Event created:', event);
-        // Save to database
-      },
-      onEventUpdate: event => {
-        console.log('Event updated:', event);
-        // Update in database
-      },
-      onEventDelete: eventId => {
-        console.log('Event deleted:', eventId);
-        // Delete from database
-      },
-    },
-  });
-
-  return <DayFlowCalendar calendar={calendar} />;
-}
-```
-
-## 🎨 Customization
-
-### Custom Event Styling
-
-```tsx
-import { createEvent } from '@dayflow/core';
-
-const events = [
-  createEvent({
-    id: '1',
-    title: 'Important Meeting',
-    start: new Date(2025, 0, 15, 9, 0),
-    end: new Date(2025, 0, 15, 10, 0),
-    calendarId: 'work', // Use calendarId for color theming
-  }),
-  createEvent({
-    id: '2',
-    title: 'Workshop',
-    start: new Date(2025, 0, 15, 14, 0),
-    end: new Date(2025, 0, 15, 16, 0),
-    calendarId: 'personal',
-  }),
-];
-```
-
-### Custom Drag Indicator
-
-```tsx
-import { DragIndicatorRenderer } from '@dayflow/core';
-
-const customRenderer: DragIndicatorRenderer = {
-  renderDefaultContent: props => (
-    <div className="custom-drag-indicator">{props.title}</div>
-  ),
-  renderAllDayContent: props => (
-    <div className="custom-allday-indicator">All Day: {props.title}</div>
-  ),
-  renderRegularContent: props => (
-    <div className="custom-regular-indicator">
-      {props.formatTime?.(props.drag.startHour)} - {props.title}
-    </div>
-  ),
-};
-```
-
-## 📚 API Reference
-
-### Core Hooks
-
-#### `useCalendarApp(config)`
-
-Creates a calendar application instance.
-
-**Parameters:**
-
-- `config.views`: Array of view factories
-- `config.initialDate`: Initial date to display
-- `config.initialView`: Initial view type
-- `config.events`: Initial events array
-- `config.onEventCreate`: Callback when event is created
-- `config.onEventUpdate`: Callback when event is updated
-- `config.onEventDelete`: Callback when event is deleted
-
-**Returns:**
-
-- Calendar application instance
-
-### View Factories
-
-- `createDayView()` - Creates a day view
-- `createWeekView()` - Creates a week view
-- `createMonthView()` - Creates a month view
-- `createYearView()` - Creates a year view
-
-### Components
-
-- `DayFlowCalendar` - Main calendar rendering component
-- `Event` - Individual event component
-
-### Types
-
-#### `Event`
-
-```typescript
-interface Event {
-  id: number;
-  title: string;
-  date: Date;
-  startHour: number;
-  endHour: number;
-  color?: string;
-  isAllDay?: boolean;
-  startDate?: Date;
-  endDate?: Date;
-  day?: number;
-}
-```
-
-#### `ViewType`
-
-```typescript
-enum ViewType {
-  DAY = 'day',
-  WEEK = 'week',
-  MONTH = 'month',
-  YEAR = 'year',
-}
-```
-
-## 🔌 Plugins
-
-The library includes built-in plugins:
-
-- **Events Plugin**: Manages event state and operations
-- **Drag Plugin**: Provides drag-and-drop functionality
-
-You can create custom plugins by implementing the `CalendarPlugin` interface.
-
-## 🎯 Advanced Usage
+> 📖 **[View Full Documentation →](https://dayflow-js.github.io/dayflow/)**
 
-### Custom Plugin
-
-```typescript
-import { CalendarPlugin } from 'dayflow';
-
-const myCustomPlugin: CalendarPlugin = {
-  name: 'myCustomPlugin',
-  initialize: context => {
-    // Plugin initialization
-    return {
-      // Plugin API
-      customMethod: () => {
-        console.log('Custom method called');
-      },
-    };
-  },
-};
-
-const calendar = useCalendarApp({
-  views: [createMonthView()],
-  plugins: [myCustomPlugin],
-});
-```
+## 🎯 Use Cases
 
-### Virtual Scrolling
-
-The calendar automatically uses virtual scrolling for better performance with large datasets, especially in Month and Year views.
-
-## 🧪 Testing
-
-DayFlow includes comprehensive testing support:
-
-```bash
-# Run all tests
-npm test
-
-# Run tests in watch mode
-npm run test:watch
-
-# Generate coverage report
-npm run test:coverage
-```
+DayFlow is perfect for:
 
-Example test:
+- 📅 **Scheduling Applications**: Employee scheduling, appointment booking, class timetables
+- 🎫 **Event Management**: Conference schedules, event calendars, festival planners
+- 🏢 **Project Management**: Timeline views, task scheduling
+- 💼 **Business**: Meeting rooms, resource booking, availability management
 
-```typescript
-import { CalendarApp } from 'dayflow';
-import { ViewType } from 'dayflow/types';
+## 🌟 Key Highlights
 
-describe('Calendar Events', () => {
-  it('should add an event', () => {
-    const app = new CalendarApp({
-      views: [createMonthView()],
-      events: [],
-      defaultView: ViewType.MONTH,
-    });
-
-    app.addEvent({
-      id: 'test-1',
-      title: 'Test Event',
-      start: new Date(),
-      end: new Date(),
-    });
-
-    expect(app.getAllEvents()).toHaveLength(1);
-  });
-});
-```
-
-See the [Testing Guide](./docs/testing.md) for more information.
-
-## ⚡ Performance
-
-### Bundle Size
-
-- ESM bundle: ~237KB (minified)
-- Gzipped: ~65KB
-- Tree-shakeable for optimal bundle size
-
-### Optimization Tips
-
-1. **Import only what you need**: Tree-shaking eliminates unused code
-2. **Use virtual scrolling**: Automatically enabled for large datasets
-3. **Lazy load views**: Use React.lazy() for code splitting
-4. **Optimize events**: Filter events by visible date range
-
-```typescript
-// Good - Only import what you need
-import { useCalendarApp } from 'dayflow';
-import { createMonthView } from 'dayflow/factories';
-
-// Analyze bundle size
-npm run build  // Generates bundle-analysis.html
-```
-
-See the [Performance Guide](./docs/optimization.md) for detailed optimization strategies.
+- ✅ **TypeScript Support**: Full type definitions included
+- ✅ **Drag & Drop**: Built-in drag and resize functionality
+- ✅ **Virtual Scrolling**: Optimized rendering for large datasets
+- ✅ **Plugin System**: Extensible with Events and Drag plugins
+- ✅ **Modern React**: Hooks-based architecture (React 18+)
+- ✅ **Tailwind CSS**: Easy styling customization
 
 ## 🤝 Contributing
 
 Contributions are welcome! Please feel free to submit a Pull Request.
 
-## 📄 License
-
-MIT © [Jayce Li](https://github.com/JayceV552)
-
 ## 🐛 Bug Reports
 
-If you find a bug, please file an issue on [GitHub Issues](https://github.com/JayceV552/DayFlow/issues).
+If you find a bug, please file an issue on [GitHub Issues](https://github.com/dayflow-js/dayflow/issues).
 
 ## 📮 Support
 
-For questions and support, please open an issue on GitHub.
+For questions and support, please open an issue on GitHub or go to discord.
 
 ---
 

package/dist/contexts/ThemeContext.d.ts

@@ -0,0 +1,59 @@
+import React from 'react';
+import { ThemeMode } from '@/types/calendarTypes';
+/**
+ * Theme Context Type
+ */
+export interface ThemeContextType {
+    /** Current theme mode (can be 'auto') */
+    theme: ThemeMode;
+    /** Effective theme (resolved, never 'auto') */
+    effectiveTheme: 'light' | 'dark';
+    /** Set theme mode */
+    setTheme: (mode: ThemeMode) => void;
+}
+/**
+ * Theme Provider Props
+ */
+export interface ThemeProviderProps {
+    children: React.ReactNode;
+    /** Initial theme mode */
+    initialTheme?: ThemeMode;
+    /** Callback when theme changes */
+    onThemeChange?: (theme: ThemeMode, effectiveTheme: 'light' | 'dark') => void;
+}
+/**
+ * Theme Provider Component
+ *
+ * Manages theme state and applies it to the document root.
+ * Supports 'light', 'dark', and 'auto' modes.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider initialTheme="auto">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+export declare const ThemeProvider: React.FC<ThemeProviderProps>;
+/**
+ * Use Theme Hook
+ *
+ * Access current theme and theme control functions.
+ * Must be used within a ThemeProvider.
+ *
+ * @returns Theme context value
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { theme, effectiveTheme, setTheme } = useTheme();
+ *
+ *   return (
+ *     <button onClick={() => setTheme(effectiveTheme === 'light' ? 'dark' : 'light')}>
+ *       Toggle Theme
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare const useTheme: () => ThemeContextType;

package/dist/core/CalendarApp.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { CalendarApp as ICalendarApp, CalendarAppConfig, CalendarAppState, CalendarView, ViewType, SidebarConfig, CalendarType } from '@/types';
 import { Event } from '@/types';
 import { CalendarRegistry } from './calendarRegistry';
+import { ThemeMode } from '@/types/calendarTypes';
 export declare class CalendarApp implements ICalendarApp {
     state: CalendarAppState;
     private callbacks;
@@ -9,6 +10,7 @@ export declare class CalendarApp implements ICalendarApp {
     private sidebarConfig;
     private visibleMonth;
     private useEventDetailDialog;
+    private themeChangeListeners;
     constructor(config: CalendarAppConfig);
     changeView: (view: ViewType) => void;
     getCurrentView: () => CalendarView;
@@ -39,4 +41,25 @@ export declare class CalendarApp implements ICalendarApp {
     triggerRender: () => void;
     getCalendarRegistry: () => CalendarRegistry;
     getUseEventDetailDialog: () => boolean;
+    /**
+     * Set theme mode
+     * @param mode - Theme mode ('light', 'dark', or 'auto')
+     */
+    setTheme: (mode: ThemeMode) => void;
+    /**
+     * Get current theme mode
+     * @returns Current theme mode
+     */
+    getTheme: () => ThemeMode;
+    /**
+     * Subscribe to theme changes
+     * @param callback - Function to call when theme changes
+     * @returns Unsubscribe function
+     */
+    subscribeThemeChange: (callback: (theme: ThemeMode) => void) => (() => void);
+    /**
+     * Unsubscribe from theme changes
+     * @param callback - Function to remove from listeners
+     */
+    unsubscribeThemeChange: (callback: (theme: ThemeMode) => void) => void;
 }

package/dist/index.d.ts

@@ -3,6 +3,8 @@ export { CalendarApp } from './core/CalendarApp';
 export { useCalendarApp } from './core/useCalendarApp';
 export { DayFlowCalendar } from './core/DayFlowCalendar';
 export { CalendarRegistry } from './core/calendarRegistry';
+export { ThemeProvider, useTheme } from './contexts/ThemeContext';
+export type { ThemeContextType, ThemeProviderProps } from './contexts/ThemeContext';
 export { createDayView } from './factories/createDayView';
 export { createWeekView } from './factories/createWeekView';
 export { createMonthView } from './factories/createMonthView';