@dayflow/react 3.0.0

package/dist/DayFlowCalendar.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode, type FC } from 'react';
+import { type ICalendarApp, type UseCalendarAppReturn } from '@dayflow/core';
+export interface DayFlowCalendarProps {
+    calendar: ICalendarApp | UseCalendarAppReturn;
+    /** Custom event content renderer (React) */
+    eventContent?: (args: {
+        event: any;
+        isAllDay: boolean;
+        isMobile: boolean;
+    }) => ReactNode;
+    /** Custom event detail panel content (React) */
+    eventDetailContent?: (args: {
+        event: any;
+        position: any;
+        onClose: () => void;
+    }) => ReactNode;
+    /** Custom event detail dialog (React) */
+    eventDetailDialog?: (args: {
+        event: any;
+        isOpen: boolean;
+        onClose: () => void;
+        onEventUpdate: any;
+        onEventDelete: any;
+        isAllDay: boolean;
+        app: any;
+    }) => ReactNode;
+    /** Custom calendar header content (React) */
+    headerContent?: (args: any) => ReactNode;
+    /** Custom create calendar dialog (React) */
+    createCalendarDialog?: (args: {
+        onClose: () => void;
+        onCreate: (calendar: any) => void;
+        colorPickerMode?: string;
+    }) => ReactNode;
+    /** Title bar slot (React) */
+    titleBarSlot?: ReactNode | ((context: {
+        isCollapsed: boolean;
+        toggleCollapsed: () => void;
+    }) => ReactNode);
+    /** Custom color picker renderer (React) */
+    colorPicker?: (args: any) => ReactNode;
+    /** Custom color picker wrapper renderer (React) */
+    colorPickerWrapper?: (args: any) => ReactNode;
+}
+export declare const DayFlowCalendar: FC<DayFlowCalendarProps>;

package/dist/hooks/useCalendarApp.d.ts

@@ -0,0 +1,2 @@
+import { CalendarAppConfig, UseCalendarAppReturn } from '@dayflow/core';
+export declare function useCalendarApp(config: CalendarAppConfig): UseCalendarAppReturn;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './DayFlowCalendar';
+export * from './hooks/useCalendarApp';
+export { CalendarApp, CalendarRegistry, createDragPlugin, createEventsPlugin, createDayView, createWeekView, createMonthView, createYearView, ViewType, } from '@dayflow/core';
+export * from '@dayflow/core';

package/dist/index.esm.js

@@ -0,0 +1 @@
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{useRef as n,useState as a,useEffect as i,useMemo as o}from"react";import{createPortal as s}from"react-dom";import{CalendarRenderer as l,CalendarApp as c}from"@dayflow/core";export*from"@dayflow/core";export{CalendarApp,CalendarRegistry,ViewType,createDayView,createDragPlugin,createEventsPlugin,createMonthView,createWeekView,createYearView}from"@dayflow/core";const u=({calendar:c,...u})=>{const g=n(null),d=n(null),[f,p]=a(new Map),[y,C]=a(!1),m=c?.app||c,v=n([]);i(()=>{if(C(!0),!g.current||!m)return;const e=new l(m);d.current=e,e.mount(g.current);const t=e.getCustomRenderingStore().subscribe(e=>{p(new Map(e))});return()=>{t(),e.unmount(),d.current=null}},[m]),i(()=>{if(!d.current)return;const e=d.current.getCustomRenderingStore(),t=Object.keys(u).filter(e=>void 0!==u[e]);JSON.stringify(v.current)!==JSON.stringify(t)&&(e.setOverrides(t),v.current=t)},[u]);const w=o(()=>y?Array.from(f.values()).map(e=>{const{id:t,containerEl:r,generatorName:n,generatorArgs:a}=e,i=u[n];if(!i)return null;const o="function"==typeof i?i(a):i;return s(o,r,t)}):[],[f,u,y]);return e(t,{children:[r("div",{ref:g,className:"df-calendar-wrapper"}),y&&w]})};function g(e){const t=o(()=>new c(e),[]),[,r]=a(0),s=n(e);return i(()=>{if(!t)return;const e=t.subscribe(()=>{r(e=>e+1)});return()=>{e()}},[t]),i(()=>{t&&JSON.stringify(s.current)!==JSON.stringify(e)&&(t.updateConfig(e),s.current=e)},[t,e]),{app:t,currentView:t.state.currentView,currentDate:t.state.currentDate,events:t.getEvents(),applyEventsChanges:t.applyEventsChanges,changeView:t.changeView,setCurrentDate:t.setCurrentDate,addEvent:t.addEvent,updateEvent:t.updateEvent,deleteEvent:t.deleteEvent,undo:t.undo,goToToday:t.goToToday,goToPrevious:t.goToPrevious,goToNext:t.goToNext,selectDate:t.selectDate,getCalendars:t.getCalendars,createCalendar:t.createCalendar,mergeCalendars:t.mergeCalendars,setCalendarVisibility:t.setCalendarVisibility,setAllCalendarsVisibility:t.setAllCalendarsVisibility,getAllEvents:t.getAllEvents,highlightEvent:t.highlightEvent,setVisibleMonth:t.setVisibleMonth,getVisibleMonth:t.getVisibleMonth,sidebarConfig:t.getSidebarConfig(),readOnlyConfig:t.getReadOnlyConfig()}}export{u as DayFlowCalendar,g as useCalendarApp};

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("react-dom"),n=require("@dayflow/core");Object.defineProperty(exports,"CalendarApp",{enumerable:!0,get:function(){return n.CalendarApp}}),Object.defineProperty(exports,"CalendarRegistry",{enumerable:!0,get:function(){return n.CalendarRegistry}}),Object.defineProperty(exports,"ViewType",{enumerable:!0,get:function(){return n.ViewType}}),Object.defineProperty(exports,"createDayView",{enumerable:!0,get:function(){return n.createDayView}}),Object.defineProperty(exports,"createDragPlugin",{enumerable:!0,get:function(){return n.createDragPlugin}}),Object.defineProperty(exports,"createEventsPlugin",{enumerable:!0,get:function(){return n.createEventsPlugin}}),Object.defineProperty(exports,"createMonthView",{enumerable:!0,get:function(){return n.createMonthView}}),Object.defineProperty(exports,"createWeekView",{enumerable:!0,get:function(){return n.createWeekView}}),Object.defineProperty(exports,"createYearView",{enumerable:!0,get:function(){return n.createYearView}}),exports.DayFlowCalendar=({calendar:a,...i})=>{const s=t.useRef(null),u=t.useRef(null),[o,c]=t.useState(new Map),[l,g]=t.useState(!1),d=a?.app||a,f=t.useRef([]);t.useEffect(()=>{if(g(!0),!s.current||!d)return;const e=new n.CalendarRenderer(d);u.current=e,e.mount(s.current);const t=e.getCustomRenderingStore().subscribe(e=>{c(new Map(e))});return()=>{t(),e.unmount(),u.current=null}},[d]),t.useEffect(()=>{if(!u.current)return;const e=u.current.getCustomRenderingStore(),t=Object.keys(i).filter(e=>void 0!==i[e]);JSON.stringify(f.current)!==JSON.stringify(t)&&(e.setOverrides(t),f.current=t)},[i]);const p=t.useMemo(()=>l?Array.from(o.values()).map(e=>{const{id:t,containerEl:n,generatorName:a,generatorArgs:s}=e,u=i[a];if(!u)return null;const o="function"==typeof u?u(s):u;return r.createPortal(o,n,t)}):[],[o,i,l]);return e.jsxs(e.Fragment,{children:[e.jsx("div",{ref:s,className:"df-calendar-wrapper"}),l&&p]})},exports.useCalendarApp=function(e){const r=t.useMemo(()=>new n.CalendarApp(e),[]),[,a]=t.useState(0),i=t.useRef(e);return t.useEffect(()=>{if(!r)return;const e=r.subscribe(()=>{a(e=>e+1)});return()=>{e()}},[r]),t.useEffect(()=>{r&&JSON.stringify(i.current)!==JSON.stringify(e)&&(r.updateConfig(e),i.current=e)},[r,e]),{app:r,currentView:r.state.currentView,currentDate:r.state.currentDate,events:r.getEvents(),applyEventsChanges:r.applyEventsChanges,changeView:r.changeView,setCurrentDate:r.setCurrentDate,addEvent:r.addEvent,updateEvent:r.updateEvent,deleteEvent:r.deleteEvent,undo:r.undo,goToToday:r.goToToday,goToPrevious:r.goToPrevious,goToNext:r.goToNext,selectDate:r.selectDate,getCalendars:r.getCalendars,createCalendar:r.createCalendar,mergeCalendars:r.mergeCalendars,setCalendarVisibility:r.setCalendarVisibility,setAllCalendarsVisibility:r.setAllCalendarsVisibility,getAllEvents:r.getAllEvents,highlightEvent:r.highlightEvent,setVisibleMonth:r.setVisibleMonth,getVisibleMonth:r.getVisibleMonth,sidebarConfig:r.getSidebarConfig(),readOnlyConfig:r.getReadOnlyConfig()}},Object.keys(n).forEach(function(e){"default"===e||Object.prototype.hasOwnProperty.call(exports,e)||Object.defineProperty(exports,e,{enumerable:!0,get:function(){return n[e]}})});

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@dayflow/react",
+  "version": "3.0.0",
+  "type": "module",
+  "description": "React adapter for DayFlow calendar",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "build": "rollup -c"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "@dayflow/core": "workspace:*"
+  },
+  "devDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@dayflow/core": "workspace:*",
+    "typescript": "^5.7.2",
+    "rollup": "^4.29.1",
+    "@rollup/plugin-commonjs": "^28.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1"
+  }
+}