@dayflow/core 1.0.0 → 1.0.1

package/README.ja.md

@@ -0,0 +1,148 @@
+# DayFlow
+
+[English](README.md) | [中文](README.zh.md) | **日本語**
+
+DayFlow は、ドラッグ&ドロップ・複数ビュー・プラグインアーキテクチャを備えた柔軟で高機能な React 向けカレンダーコンポーネントライブラリです。
+
+[![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)
+
+## 🗓️ 主な特長
+
+### ✨ 月/週/日など多彩なビュー
+
+| 月ビュー                               | 週ビュー                               |
+| -------------------------------------- | -------------------------------------- |
+| ![image](./assets/images//MonthView.png) | ![image](./assets/images/WeekView.png) |
+
+| 日ビュー                               | イベントスタック                       |
+| -------------------------------------- | -------------------------------------- |
+| ![image](./assets/images/DayView.png)  | ![image](./assets/images/stackLevel.png) |
+
+### 🤩 デフォルトの詳細パネル（複数のカスタム構成を用意）
+
+| ポップアップ詳細                      | ダイアログ詳細                        |
+| ------------------------------------- | ------------------------------------- |
+| ![image](./assets/images/popup.png)   | ![image](./assets/images/dialog.png)  |
+
+### 🎯 スムーズなドラッグ&リサイズ
+
+https://github.com/user-attachments/assets/726a5232-35a8-4fe3-8e7b-4de07c455353
+
+https://github.com/user-attachments/assets/957317e5-02d8-4419-a74b-62b7d191e347
+
+> ⚡ さらに多くの機能を体験したい場合は [ライブデモ](https://dayflow-js.github.io/dayflow/) をご覧ください。
+
+## ✨ コア機能
+
+- 🗓️ **複数ビュー**：日/週/月/年ビューをサポート
+- 🎨 **高いカスタマイズ性**：Tailwind CSS によるテーマ拡張
+- 📱 **レスポンシブ対応**：デスクトップ/タブレット/モバイルに最適化
+- 🔌 **プラグインアーキテクチャ**：拡張しやすい設計
+- 🎯 **ドラッグ&ドロップ**：直感的なイベント操作
+- ⚡ **TypeScript サポート**：完全な型定義
+- 🎨 **イベント管理**：作成/更新/削除/分類を簡単に
+- 🔄 **バーチャルスクロール**：大量データでも軽快
+- 🎭 **カスタムレンダラー**：イベント表示と挙動を自由に拡張
+
+## 🚀 追加機能
+
+### 📅 高度なカレンダー機能
+
+- **マルチデイイベント**：複数日にまたがるイベント表示
+- **終日イベント**：専用ヘッダー領域を用意
+- **イベントスタック**：重複イベントをスマートに配置
+- **サイドバー**：カレンダー管理用サイドバーを内蔵
+
+### 🎨 カスタマイズ & テーマ
+
+- **カスタムイベントレンダラー**：UI を完全にコントロール
+- **カラーコーディング**：複数カレンダーと色分けに対応
+- **詳細パネル**：ダイアログ/ポップアップ/カスタムパネル
+- **ヘッダーのカスタマイズ**：`ViewHeader` で表示切替を制御
+- **ドラッグインジケーター**：イベントタイプごとにカスタム指標
+
+### 🎯 インタラクション
+
+- **イベントコールバック**：`onEventCreate` / `onEventUpdate` / `onEventDelete`
+- **クリックイベント**：イベントクリックにリアクション
+- **ドラッグ&リサイズ**：移動と長さ調整をスムーズに
+- **カラーピッカー**：組み込みの色選択 UI
+
+### ⚡ パフォーマンス & DX
+
+- **バーチャルスクロール**：月/年ビューの大量イベントでも高速
+- **TypeScript First**：すべての API に型定義
+- **プラグインシステム**：イベント/ドラッグプラグインで拡張
+- **Temporal API**：モダンな Temporal で日時を管理
+
+## 📦 インストール
+
+```bash
+npm install @dayflow/core lucide-react
+# または
+yarn add @dayflow/core lucide-react
+# または
+pnpm add @dayflow/core lucide-react
+```
+
+### Peer Dependencies
+
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+- `lucide-react` >= 0.400.0
+
+## 🚀 クイックスタート
+
+```tsx
+import { useCalendarApp, DayFlowCalendar } from '@dayflow/core';
+import { createMonthView, createWeekView, createDayView } from '@dayflow/core';
+import '@dayflow/core/dist/styles.css';
+
+function App() {
+  const calendar = useCalendarApp({
+    views: [createMonthView(), createWeekView(), createDayView()],
+    initialDate: new Date(),
+  });
+
+  return <DayFlowCalendar calendar={calendar} />;
+}
+```
+
+> 📖 **[完全なドキュメントを見る →](https://dayflow-js.github.io/dayflow/)**
+
+## 🎯 ユースケース
+
+DayFlow は以下の用途に最適です：
+
+- 📅 **スケジューリングアプリ**：スタッフシフト、予約管理、授業予定
+- 🎫 **イベント管理**：会議、イベントカレンダー、フェスティバル
+- 🏢 **プロジェクト管理**：タイムライン表示、タスクスケジューリング
+- 💼 **ビジネス**：会議室やリソースの予約、可用性管理
+
+## 🌟 ハイライト
+
+- ✅ **TypeScript 対応**
+- ✅ **ドラッグ&ドロップ**
+- ✅ **バーチャルスクロール**
+- ✅ **プラグインシステム**
+- ✅ **最新の React Hooks (18+)**
+- ✅ **Tailwind CSS による簡単スタイリング**
+
+## 🤝 コントリビューション
+
+Pull Request 大歓迎です。ぜひ貢献してください。
+
+## 🐛 バグ報告
+
+問題を見つけた場合は [GitHub Issues](https://github.com/dayflow-js/dayflow/issues) へ。
+
+## 📮 サポート
+
+質問があれば GitHub で Issue を立てるか Discord に参加してください。
+
+---
+
+Jayce Li が ❤️ を込めて開発しました。

package/README.md

@@ -1,5 +1,7 @@
 # DayFlow
 
+**English** | [中文](README.zh.md) | [日本語](README.ja.md)
+
 A flexible and feature-rich calendar component library for React applications with drag-and-drop support, multiple views, and plugin architecture.
 
 [![npm](https://img.shields.io/npm/v/@dayflow/core?logo=npm&color=blue&label=version)](https://www.npmjs.com/package/@dayflow/core)

package/README.zh.md

@@ -0,0 +1,148 @@
+# DayFlow
+
+[English](README.md) | **中文** | [日本語](README.ja.md)
+
+一个灵活且功能丰富的 React 日历组件库，内置拖拽、多个视图类型以及插件化架构。
+
+[![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)
+
+## 🗓️ 功能亮点
+
+### ✨ 月/周/日等多种视图
+
+| 月视图                                  | 周视图                                 |
+| --------------------------------------- | -------------------------------------- |
+| ![image](./assets/images//MonthView.png) | ![image](./assets/images/WeekView.png) |
+
+| 日视图                                 | 事件堆叠层级                            |
+| -------------------------------------- | -------------------------------------- |
+| ![image](./assets/images/DayView.png) | ![image](./assets/images/stackLevel.png) |
+
+### 🤩 默认详情面板（也可替换为多个自定义方案）
+
+| 弹出层详情                           | 对话框详情                           |
+| ------------------------------------ | ------------------------------------ |
+| ![image](./assets/images/popup.png)  | ![image](./assets/images/dialog.png) |
+
+### 🎯 事件拖拽/缩放顺滑
+
+https://github.com/user-attachments/assets/726a5232-35a8-4fe3-8e7b-4de07c455353
+
+https://github.com/user-attachments/assets/957317e5-02d8-4419-a74b-62b7d191e347
+
+> ⚡ 想要更多交互体验，请访问我们的 [在线 Demo](https://dayflow-js.github.io/dayflow/)。
+
+## ✨ 核心特性
+
+- 🗓️ **多视图**：日/周/月/年视图自由切换
+- 🎨 **高度自定义**：基于 Tailwind CSS，易于主题扩展
+- 📱 **响应式设计**：桌面、平板、移动端一致体验
+- 🔌 **插件架构**：通过插件拓展业务能力
+- 🎯 **拖拽支持**：事件拖拽与缩放体验流畅
+- ⚡ **TypeScript**：提供完整类型提示
+- 🎨 **事件管理**：创建、更新、删除、分类事件
+- 🔄 **虚拟滚动**：大数据场景依旧流畅
+- 🎭 **自定义渲染**：自定义事件外观与行为
+
+## 🚀 进阶能力
+
+### 📅 高级日历能力
+
+- **跨天事件**：自然衔接的多日事件渲染
+- **全天区域**：专属全天事件栏
+- **事件堆叠**：智能调度堆叠层级
+- **侧边栏**：自带日历管理侧栏
+
+### 🎨 自定义与主题
+
+- **自定义事件渲染器**：完全掌控 UI
+- **颜色编码**：内置多类型日历与颜色
+- **详情面板模式**：对话框、弹层或自定义面板
+- **可定制头部**：`ViewHeader` 提供按钮/标签/下拉等模式
+- **拖拽指示器**：为不同事件展示不同拖拽提示
+
+### 🎯 交互体验
+
+- **事件回调**：`onEventCreate`、`onEventUpdate`、`onEventDelete`
+- **点击事件**：随时获取事件点击反馈
+- **拖拽缩放**：移动与调整长度一气呵成
+- **颜色选择器**：内置颜色选择 UI
+
+### ⚡ 性能与 DX
+
+- **虚拟滚动**：月份/年视图的大量事件仍高性能
+- **TypeScript First**：所有 API 提供类型定义
+- **插件体系**：事件插件与拖拽插件可扩展
+- **Temporal API**：使用 Modern Temporal 处理时间
+
+## 📦 安装
+
+```bash
+npm install @dayflow/core lucide-react
+# 或
+yarn add @dayflow/core lucide-react
+# 或
+pnpm add @dayflow/core lucide-react
+```
+
+### Peer Dependencies
+
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+- `lucide-react` >= 0.400.0
+
+## 🚀 快速上手
+
+```tsx
+import { useCalendarApp, DayFlowCalendar } from '@dayflow/core';
+import { createMonthView, createWeekView, createDayView } from '@dayflow/core';
+import '@dayflow/core/dist/styles.css';
+
+function App() {
+  const calendar = useCalendarApp({
+    views: [createMonthView(), createWeekView(), createDayView()],
+    initialDate: new Date(),
+  });
+
+  return <DayFlowCalendar calendar={calendar} />;
+}
+```
+
+> 📖 **[查看完整文档 →](https://dayflow-js.github.io/dayflow/)**
+
+## 🎯 适用场景
+
+DayFlow 适合用于：
+
+- 📅 **排班与预约**：员工排班、预约管理、课程表
+- 🎫 **活动管理**：会议日程、活动日历、展会安排
+- 🏢 **项目排期**：任务规划、时间线视图
+- 💼 **企业应用**：会议室、资源预约、可用性管理
+
+## 🌟 亮点总结
+
+- ✅ **TypeScript 支持**
+- ✅ **拖拽缩放**
+- ✅ **虚拟滚动**
+- ✅ **插件体系**
+- ✅ **React 18+ Hooks 架构**
+- ✅ **Tailwind CSS 友好**
+
+## 🤝 贡献指南
+
+欢迎通过 Pull Request 的方式贡献代码与文档。
+
+## 🐛 问题反馈
+
+若发现问题，请前往 [GitHub Issues](https://github.com/dayflow-js/dayflow/issues)。
+
+## 📮 支持
+
+如需交流，请在 GitHub 提 issue 或加入 Discord。
+
+---
+
+由 Jayce Li 倾情打造 ❤️

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CalendarApp } from '@/types';
-export type ViewHeaderType = 'day' | 'week' | 'month';
+export type ViewHeaderType = 'day' | 'week' | 'month' | 'year';
 export type ViewSwitcherMode = 'buttons' | 'select';
 interface ViewHeaderProps {
     calendar: CalendarApp;
@@ -22,6 +22,14 @@ interface ViewHeaderProps {
     showTodayBox?: boolean;
     /** ViewSwitcher mode (default: 'select') */
     switcherMode?: ViewSwitcherMode;
+    /** Sticky year for Year view (optional, only for Year view) */
+    stickyYear?: number | null;
+    /** Push-away offset for sticky year (in pixels) */
+    stickyYearOffset?: number;
+    /** Next year that's pushing the sticky year (optional, only for Year view) */
+    nextYear?: number | null;
+    /** Offset for the next year coming from below (in pixels) */
+    nextYearOffset?: number;
 }
 declare const ViewHeader: React.FC<ViewHeaderProps>;
 export default ViewHeader;

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

@@ -41,6 +41,8 @@ interface WeekComponentProps {
     onDetailPanelToggle?: (eventId: string | null) => void;
     customDetailPanelContent?: EventDetailContentRenderer;
     customEventDetailDialog?: EventDetailDialogRenderer;
+    onCalendarDrop?: (e: React.DragEvent, dropDate: Date, dropHour?: number, isAllDay?: boolean) => Event | null;
+    onCalendarDragOver?: (e: React.DragEvent) => void;
 }
 declare const WeekComponent: React.NamedExoticComponent<WeekComponentProps>;
 export default WeekComponent;

package/dist/hooks/useCalendarDrop.d.ts

@@ -0,0 +1,20 @@
+import { CalendarApp } from '@/core';
+import { Event, CalendarColors } from '@/types';
+export interface CalendarDropData {
+    calendarId: string;
+    calendarName: string;
+    calendarColors: CalendarColors;
+    calendarIcon?: string;
+}
+export interface CalendarDropOptions {
+    app: CalendarApp;
+    onEventCreated?: (event: Event) => void;
+}
+export interface CalendarDropReturn {
+    handleDrop: (e: React.DragEvent, dropDate: Date, dropHour?: number, isAllDay?: boolean) => Event | null;
+    handleDragOver: (e: React.DragEvent) => void;
+}
+/**
+ * Hook to handle dropping calendar from sidebar to create events
+ */
+export declare function useCalendarDrop(options: CalendarDropOptions): CalendarDropReturn;

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

@@ -1,15 +1,15 @@
 import { UseVirtualScrollProps, UseVirtualScrollReturn } from '@/types';
 export declare const VIRTUAL_SCROLL_CONFIG: {
-    readonly OVERSCAN: 2;
-    readonly BUFFER_SIZE: 50;
-    readonly MIN_YEAR: 1900;
-    readonly MAX_YEAR: 2200;
-    readonly SCROLL_THROTTLE: 8;
+    readonly OVERSCAN: 1;
+    readonly BUFFER_SIZE: 30;
+    readonly MIN_YEAR: 1970;
+    readonly MAX_YEAR: 2100;
+    readonly SCROLL_THROTTLE: 16;
     readonly SCROLL_DEBOUNCE: 150;
-    readonly CACHE_CLEANUP_THRESHOLD: 100;
-    readonly MOBILE_YEAR_HEIGHT: 1400;
-    readonly TABLET_YEAR_HEIGHT: 1000;
-    readonly YEAR_HEIGHT: 900;
+    readonly CACHE_CLEANUP_THRESHOLD: 50;
+    readonly MOBILE_YEAR_HEIGHT: 1200;
+    readonly TABLET_YEAR_HEIGHT: 850;
+    readonly YEAR_HEIGHT: 680;
 };
 export declare class VirtualScrollPerformance {
     private static metrics;