@dayflow/core 0.1.0 → 0.1.2

package/README.md

@@ -2,7 +2,7 @@
 
 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/dayflow.svg)](https://www.npmjs.com/package/dayflow)
+[![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)
 
 ## ✨ Features
@@ -19,21 +19,75 @@ A flexible and feature-rich calendar component library for React applications wi
 
 ## 📦 Installation
 
+### Install DayFlow
+
 ```bash
-npm install dayflow
+npm install @dayflow/core lucide-react
 # or
-yarn add dayflow
+yarn add @dayflow/core lucide-react
 # or
-pnpm add dayflow
+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';
-import { createMonthView, createWeekView, createDayView } from 'dayflow';
+import { useCalendarApp, DayFlowCalendar } from '@dayflow/core';
+import { createMonthView, createWeekView, createDayView } from '@dayflow/core';
 // Import styles
-import 'dayflow/dist/styles.css';
+import '@dayflow/core/dist/styles.css';
 
 function App() {
   const calendar = useCalendarApp({
@@ -56,31 +110,32 @@ import {
   useCalendarApp,
   DayFlowCalendar,
   createMonthView,
-} from 'dayflow';
-import 'dayflow/dist/styles.css';
+  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: [
-      {
-        id: 1,
-        title: 'Team Meeting',
-        date: new Date(2025, 0, 15),
-        startHour: 10,
-        endHour: 11,
-        color: '#3b82f6',
-      },
-      {
-        id: 2,
-        title: 'Conference',
-        startDate: new Date(2025, 0, 20),
-        endDate: new Date(2025, 0, 22),
-        isAllDay: true,
-        color: '#10b981',
-      },
-    ],
+    events,
   });
 
   return <DayFlowCalendar calendar={calendar} />;
@@ -98,8 +153,8 @@ import {
   createMonthView,
   createYearView,
   ViewType,
-} from 'dayflow';
-import 'dayflow/dist/styles.css';
+} from '@dayflow/core';
+import '@dayflow/core/dist/styles.css';
 
 function MultiViewCalendar() {
   const calendar = useCalendarApp({
@@ -136,17 +191,19 @@ function CalendarWithCallbacks() {
   const calendar = useCalendarApp({
     views: [createMonthView()],
     initialDate: new Date(),
-    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
+    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
+      },
     },
   });
 
@@ -156,33 +213,33 @@ function CalendarWithCallbacks() {
 
 ## 🎨 Customization
 
-### Custom Event Colors
+### Custom Event Styling
 
 ```tsx
+import { createEvent } from '@dayflow/core';
+
 const events = [
-  {
-    id: 1,
+  createEvent({
+    id: '1',
     title: 'Important Meeting',
-    date: new Date(),
-    startHour: 9,
-    endHour: 10,
-    color: '#ef4444', // Red
-  },
-  {
-    id: 2,
+    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',
-    date: new Date(),
-    startHour: 14,
-    endHour: 16,
-    color: '#8b5cf6', // Purple
-  },
+    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';
+import { DragIndicatorRenderer } from '@dayflow/core';
 
 const customRenderer: DragIndicatorRenderer = {
   renderDefaultContent: props => (

package/dist/components/EventLayout.d.ts

@@ -131,4 +131,3 @@ export declare class EventLayoutCalculator {
     private static rebalanceLoadByGroups;
 }
 export {};
-//# sourceMappingURL=EventLayout.d.ts.map

package/dist/components/common/ColorPicker.d.ts

@@ -14,4 +14,3 @@ export interface ColorPickerProps {
  */
 export declare const ColorPicker: React.FC<ColorPickerProps>;
 export default ColorPicker;
-//# sourceMappingURL=ColorPicker.d.ts.map

package/dist/components/common/DefaultEventDetailDialog.d.ts

@@ -6,4 +6,3 @@ import { EventDetailDialogProps } from '@/types/eventDetail';
  */
 declare const DefaultEventDetailDialog: React.FC<EventDetailDialogProps>;
 export default DefaultEventDetailDialog;
-//# sourceMappingURL=DefaultEventDetailDialog.d.ts.map

package/dist/components/common/DefaultEventDetailPanel.d.ts

@@ -5,4 +5,3 @@ import { EventDetailPanelProps } from '@/types/eventDetail';
  */
 declare const DefaultEventDetailPanel: React.FC<EventDetailPanelProps>;
 export default DefaultEventDetailPanel;
-//# sourceMappingURL=DefaultEventDetailPanel.d.ts.map

package/dist/components/common/EventDetailPanelWithContent.d.ts

@@ -9,4 +9,3 @@ interface EventDetailPanelWithContentProps extends EventDetailPanelProps {
 }
 export declare const EventDetailPanelWithContent: React.FC<EventDetailPanelWithContentProps>;
 export default EventDetailPanelWithContent;
-//# sourceMappingURL=EventDetailPanelWithContent.d.ts.map

package/dist/components/common/RangePicker.d.ts

@@ -21,4 +21,3 @@ export interface RangePickerProps {
 }
 declare const RangePicker: React.FC<RangePickerProps>;
 export default RangePicker;
-//# sourceMappingURL=RangePicker.d.ts.map

package/dist/components/common/TodayBox.d.ts

@@ -5,4 +5,3 @@ interface Props {
 }
 declare const TodayBox: React.FC<Props>;
 export default TodayBox;
-//# sourceMappingURL=TodayBox.d.ts.map

package/dist/components/common/ViewHeader.d.ts

@@ -25,4 +25,3 @@ interface ViewHeaderProps {
 }
 declare const ViewHeader: React.FC<ViewHeaderProps>;
 export default ViewHeader;
-//# sourceMappingURL=ViewHeader.d.ts.map

package/dist/components/common/ViewSwitcher.d.ts

@@ -6,4 +6,3 @@ interface ViewSwitcherProps {
 }
 declare const ViewSwitcher: React.FC<ViewSwitcherProps>;
 export default ViewSwitcher;
-//# sourceMappingURL=ViewSwitcher.d.ts.map

package/dist/components/monthView/MonthDragIndicator.d.ts

@@ -10,4 +10,3 @@ interface MonthDragIndicatorProps {
 }
 declare const MonthDragIndicatorComponent: React.FC<MonthDragIndicatorProps>;
 export default MonthDragIndicatorComponent;
-//# sourceMappingURL=MonthDragIndicator.d.ts.map

package/dist/components/monthView/MultiDayEvent.d.ts

@@ -23,4 +23,3 @@ interface MultiDayEventProps {
 }
 export declare const MultiDayEvent: React.NamedExoticComponent<MultiDayEventProps>;
 export default MultiDayEvent;
-//# sourceMappingURL=MultiDayEvent.d.ts.map

package/dist/components/monthView/WeekComponent.d.ts

@@ -43,4 +43,3 @@ interface WeekComponentProps {
 }
 declare const WeekComponent: React.NamedExoticComponent<WeekComponentProps>;
 export default WeekComponent;
-//# sourceMappingURL=WeekComponent.d.ts.map

package/dist/components/monthView/util.d.ts

@@ -9,4 +9,3 @@ export declare const analyzeMultiDayRegularEvent: (event: Event, weekStart: Date
     isFirst: boolean;
     isLast: boolean;
 }[];
-//# sourceMappingURL=util.d.ts.map

package/dist/components/sidebar/DefaultCalendarSidebar.d.ts

@@ -2,4 +2,3 @@ import React from 'react';
 import { CalendarSidebarRenderProps } from '@/types';
 declare const DefaultCalendarSidebar: React.FC<CalendarSidebarRenderProps>;
 export default DefaultCalendarSidebar;
-//# sourceMappingURL=DefaultCalendarSidebar.d.ts.map

package/dist/components/weekView/CalendarEvent.d.ts

@@ -40,4 +40,3 @@ interface CalendarEventProps {
 }
 declare const CalendarEvent: React.FC<CalendarEventProps>;
 export default CalendarEvent;
-//# sourceMappingURL=CalendarEvent.d.ts.map

package/dist/components/weekView/DragIndicator/DefaultDragIndicator.d.ts

@@ -1,3 +1,2 @@
 import { DragIndicatorRenderer } from '@/types/dragIndicator';
 export declare const DefaultDragIndicatorRenderer: DragIndicatorRenderer;
-//# sourceMappingURL=DefaultDragIndicator.d.ts.map

package/dist/components/weekView/DragIndicator/DragIndicatorComponent.d.ts

@@ -5,4 +5,3 @@ interface DragIndicatorComponentProps extends DragIndicatorProps {
 }
 declare const DragIndicatorComponent: React.FC<DragIndicatorComponentProps>;
 export default DragIndicatorComponent;
-//# sourceMappingURL=DragIndicatorComponent.d.ts.map

package/dist/core/CalendarApp.d.ts

@@ -40,4 +40,3 @@ export declare class CalendarApp implements ICalendarApp {
     getCalendarRegistry: () => CalendarRegistry;
     getUseEventDetailDialog: () => boolean;
 }
-//# sourceMappingURL=CalendarApp.d.ts.map

package/dist/core/DayFlowCalendar.d.ts

@@ -12,4 +12,3 @@ interface DayFlowCalendarProps {
 }
 export declare const DayFlowCalendar: React.FC<DayFlowCalendarProps>;
 export default DayFlowCalendar;
-//# sourceMappingURL=DayFlowCalendar.d.ts.map

package/dist/core/calendarRegistry.d.ts

@@ -101,4 +101,3 @@ export declare function getDefaultCalendarRegistry(): CalendarRegistry;
  * @internal
  */
 export declare function setDefaultCalendarRegistry(registry: CalendarRegistry): void;
-//# sourceMappingURL=calendarRegistry.d.ts.map

package/dist/core/config.d.ts

@@ -58,4 +58,3 @@ export declare class ConfigManager {
     updateConfig(updates: Partial<CalendarConfig>): void;
     resetConfig(newConfig?: Partial<CalendarConfig>): void;
 }
-//# sourceMappingURL=config.d.ts.map

package/dist/core/index.d.ts

@@ -4,4 +4,3 @@ export * from './DayFlowCalendar';
 export { CalendarApp } from './CalendarApp';
 export { ViewType } from '@/types';
 export type { CalendarPlugin, CalendarView, CalendarCallbacks, CalendarAppConfig, CalendarAppState, CalendarApp as ICalendarApp, UseCalendarAppReturn, CalendarConfig, } from '@/types';
-//# sourceMappingURL=index.d.ts.map

package/dist/core/useCalendarApp.d.ts

@@ -1,3 +1,2 @@
 import { CalendarAppConfig, UseCalendarAppReturn } from '@/types';
 export declare function useCalendarApp(config: CalendarAppConfig): UseCalendarAppReturn;
-//# sourceMappingURL=useCalendarApp.d.ts.map

package/dist/factories/ViewAdapter.d.ts

@@ -2,4 +2,3 @@ import React from 'react';
 import { ViewAdapterProps } from '@/types';
 export declare const ViewAdapter: React.FC<ViewAdapterProps>;
 export default ViewAdapter;
-//# sourceMappingURL=ViewAdapter.d.ts.map

package/dist/factories/createDayView.d.ts

@@ -9,4 +9,3 @@ export declare const dayViewPresets: {
     dense: () => CalendarView;
 };
 export default createDayView;
-//# sourceMappingURL=createDayView.d.ts.map

package/dist/factories/createMonthView.d.ts

@@ -13,4 +13,3 @@ export declare const monthViewPresets: {
     extendedLoad: () => CalendarView;
 };
 export default createMonthView;
-//# sourceMappingURL=createMonthView.d.ts.map

package/dist/factories/createWeekView.d.ts

@@ -12,4 +12,3 @@ export declare const weekViewPresets: {
     extended: () => CalendarView;
 };
 export default createWeekView;
-//# sourceMappingURL=createWeekView.d.ts.map

package/dist/factories/createYearView.d.ts

@@ -7,4 +7,3 @@ export declare const yearViewPresets: {
     debug: () => CalendarView;
 };
 export default createYearView;
-//# sourceMappingURL=createYearView.d.ts.map

package/dist/factories/index.d.ts

@@ -15,4 +15,3 @@ export declare const viewPresets: {
     compact: () => import("@/types").CalendarView[];
     dense: () => import("@/types").CalendarView[];
 };
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/drag/index.d.ts

@@ -5,4 +5,3 @@ export * from './useDragManager';
 export * from './useDragHandlers';
 export * from './useWeekDayDrag';
 export * from './useMonthDrag';
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/drag/useDrag.d.ts

@@ -1,3 +1,2 @@
 import { useDragProps, useDragReturn } from '@/types';
 export declare const useDrag: (options: useDragProps) => useDragReturn;
-//# sourceMappingURL=useDrag.d.ts.map

package/dist/hooks/drag/useDragCommon.d.ts

@@ -1,3 +1,2 @@
 import { useDragProps, UseDragCommonReturn } from '@/types';
 export declare const useDragCommon: (options: useDragProps) => UseDragCommonReturn;
-//# sourceMappingURL=useDragCommon.d.ts.map

package/dist/hooks/drag/useDragHandlers.d.ts

@@ -1,3 +1,2 @@
 import { UseDragHandlersReturn, UseDragHandlersParams } from '@/types';
 export declare const useDragHandlers: (params: UseDragHandlersParams) => UseDragHandlersReturn;
-//# sourceMappingURL=useDragHandlers.d.ts.map

package/dist/hooks/drag/useDragManager.d.ts

@@ -1,3 +1,2 @@
 import { useDragProps, UseDragManagerReturn } from '@/types';
 export declare const useDragManager: (options: useDragProps) => UseDragManagerReturn;
-//# sourceMappingURL=useDragManager.d.ts.map

package/dist/hooks/drag/useDragState.d.ts

@@ -1,3 +1,2 @@
 import { useDragProps, UseDragStateReturn } from '@/types';
 export declare const useDragState: (options: useDragProps) => UseDragStateReturn;
-//# sourceMappingURL=useDragState.d.ts.map

package/dist/hooks/drag/useMonthDrag.d.ts

@@ -1,3 +1,2 @@
 import { UseMonthDragParams, UseMonthDragReturn } from '@/types';
 export declare const useMonthDrag: (params: UseMonthDragParams) => UseMonthDragReturn;
-//# sourceMappingURL=useMonthDrag.d.ts.map

package/dist/hooks/drag/useWeekDayDrag.d.ts

@@ -1,3 +1,2 @@
 import { UseWeekDayDragParams, UseWeekDayDragReturn } from '@/types';
 export declare const useWeekDayDrag: (params: UseWeekDayDragParams) => UseWeekDayDragReturn;
-//# sourceMappingURL=useWeekDayDrag.d.ts.map

package/dist/hooks/virtualScroll/index.d.ts

@@ -1,3 +1,2 @@
 export * from './useVirtualScroll';
 export * from './useVirtualMonthScroll';
-//# sourceMappingURL=index.d.ts.map

package/dist/hooks/virtualScroll/useVirtualMonthScroll.d.ts

@@ -5,4 +5,3 @@ export declare const useResponsiveMonthConfig: () => {
     weeksPerView: number;
 };
 export declare const useVirtualMonthScroll: ({ currentDate, weekHeight, onCurrentMonthChange, initialWeeksToLoad, }: UseVirtualMonthScrollProps) => UseVirtualMonthScrollReturn;
-//# sourceMappingURL=useVirtualMonthScroll.d.ts.map

package/dist/hooks/virtualScroll/useVirtualScroll.d.ts

@@ -46,4 +46,3 @@ export declare const useResponsiveConfig: () => {
     screenSize: "mobile" | "tablet" | "desktop";
 };
 export declare const useVirtualScroll: ({ currentDate, yearHeight, onCurrentYearChange, }: UseVirtualScrollProps) => UseVirtualScrollReturn;
-//# sourceMappingURL=useVirtualScroll.d.ts.map

package/dist/index.d.ts

@@ -23,7 +23,7 @@ export { default as ColorPicker } from './components/common/ColorPicker';
 export type { ColorOption, ColorPickerProps, } from './components/common/ColorPicker';
 export { EventLayoutCalculator } from './components/EventLayout';
 export * from './utils';
-export type { CalendarPlugin, CalendarView, CalendarConfig, CalendarSidebarRenderProps, SidebarConfig, } from './types/core';
+export type { CalendarPlugin, CalendarView, CalendarConfig, CalendarSidebarRenderProps, SidebarConfig, UseCalendarAppReturn, CalendarApp as ICalendarApp, } from './types/core';
 export type { Event } from './types/event';
 export type { DragConfig } from './types/config';
 export type { CalendarType, ThemeMode, ThemeConfig, CalendarColors, CalendarsConfig, } from './types/calendarTypes';
@@ -32,4 +32,3 @@ export type { EventsService, EventsPluginConfig, DragService, DragPluginConfig,
 export type { BaseViewProps, ViewFactory, ViewAdapterProps, } from './types/factory';
 export type { EventDetailPosition, EventDetailPanelProps, EventDetailPanelRenderer, EventDetailContentProps, EventDetailContentRenderer, EventDetailDialogProps, EventDetailDialogRenderer, } from './types/eventDetail';
 export { ViewType } from './types';
-//# sourceMappingURL=index.d.ts.map