react-weekly-planning 1.0.30 → 1.0.32

package/components/GroupContainer/index.js

@@ -1,15 +1,15 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from "react";
-import { groupContainerStyle } from "../../lib/slyles";
-const GroupContainer = ({ className, style, groupRender, currentGroup, handleClickGroup, }) => {
-    if (groupRender) {
-        return _jsx(_Fragment, { children: groupRender({ currentGroup }) });
-    }
-    const handleClick = () => {
-        if (!handleClickGroup)
-            return;
-        handleClickGroup(currentGroup);
-    };
-    return (_jsxs("div", { onClick: handleClick, className: `${className}`, style: Object.assign(Object.assign({}, groupContainerStyle), style), children: [currentGroup.imageUrl && (_jsx("img", { width: 30, height: 30, src: currentGroup.imageUrl, alt: "groupimg" })), _jsx("label", { children: currentGroup.label && currentGroup.label })] }));
-};
-export default memo(GroupContainer);
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { groupContainerStyle } from "../../lib/slyles";
+const GroupContainer = ({ className, style, groupRender, currentGroup, handleClickGroup, }) => {
+    if (groupRender) {
+        return _jsx(_Fragment, { children: groupRender({ currentGroup }) });
+    }
+    const handleClick = () => {
+        if (!handleClickGroup)
+            return;
+        handleClickGroup(currentGroup);
+    };
+    return (_jsxs("div", { onClick: handleClick, className: `${className}`, style: Object.assign(Object.assign({}, groupContainerStyle), style), children: [currentGroup.imageUrl && (_jsx("img", { width: 30, height: 30, src: currentGroup.imageUrl, alt: "groupimg" })), _jsx("label", { children: currentGroup.label && currentGroup.label })] }));
+};
+export default memo(GroupContainer);

package/components/GroupsHeadContainer/index.js

@@ -1,9 +1,9 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-const GroupsHeadContainer = ({ groupsHeadRender, style, className, }) => {
-    if (groupsHeadRender) {
-        return _jsx(_Fragment, { children: groupsHeadRender() });
-    }
-    return (_jsx("div", { className: `${className}`, style: style, children: "WeeklyCalendar" }));
-};
-export default memo(GroupsHeadContainer);
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const GroupsHeadContainer = ({ groupsHeadRender, style, className, }) => {
+    if (groupsHeadRender) {
+        return _jsx(_Fragment, { children: groupsHeadRender() });
+    }
+    return (_jsx("div", { className: `${className}`, style: style, children: "WeeklyCalendar" }));
+};
+export default memo(GroupsHeadContainer);

package/components/SumHoursContainer/index.js

@@ -1,15 +1,16 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-const SumHoursContainer = ({ groupId, tasks, weekOffset, calendarDate, sumHoursByGroups, sumHoursRender, className, style, }) => {
-    if (sumHoursRender) {
-        return (_jsx(_Fragment, { children: sumHoursRender({
-                groupId,
-                tasks,
-                weekOffset,
-                calendarDate,
-                sumHoursByGroups,
-            }) }));
-    }
-    return (_jsx("div", { style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), className: `${className}`, children: sumHoursByGroups }));
-};
-export default memo(SumHoursContainer);
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { totalLabel } from "../../lib/utils";
+const SumHoursContainer = ({ groupId, tasks, weekOffset, calendarDate, sumHoursByGroups, sumHoursRender, className, style, }) => {
+    if (sumHoursRender) {
+        return (_jsx(_Fragment, { children: sumHoursRender({
+                groupId,
+                tasks,
+                weekOffset,
+                calendarDate,
+                sumHoursByGroups,
+            }) }));
+    }
+    return (_jsx("div", { style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), className: `${className}`, children: totalLabel(sumHoursByGroups) }));
+};
+export default memo(SumHoursContainer);

package/components/SumHoursContainer/index.tsx

@@ -1,5 +1,6 @@
 import { memo } from "react";
 import { SumHoursContainerPropsType } from "../../definitions";
+import { millisecondsToHours, totalLabel } from "../../lib/utils";
 
 const SumHoursContainer = ({
   groupId,
@@ -30,7 +31,7 @@ const SumHoursContainer = ({
       style={{ textAlign: "right", marginRight: "5px", ...style }}
       className={`${className}`}
     >
-      {sumHoursByGroups}
+      {totalLabel(sumHoursByGroups)}
     </div>
   );
 };

package/components/SumHoursHead/index.js

@@ -1,9 +1,9 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-const SumHoursHead = ({ sumHoursHeadRender, className, style, }) => {
-    if (sumHoursHeadRender) {
-        return _jsx(_Fragment, { children: sumHoursHeadRender() });
-    }
-    return (_jsx("div", { className: `${className}`, style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), children: "Hours" }));
-};
-export default memo(SumHoursHead);
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+const SumHoursHead = ({ sumHoursHeadRender, className, style, }) => {
+    if (sumHoursHeadRender) {
+        return _jsx(_Fragment, { children: sumHoursHeadRender() });
+    }
+    return (_jsx("div", { className: `${className}`, style: Object.assign({ textAlign: "right", marginRight: "5px" }, style), children: "Hours" }));
+};
+export default memo(SumHoursHead);

package/components/TaskContainer/index.js

@@ -1,35 +1,35 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo } from "react";
-import { millisecondsToDate } from "../../lib/utils";
-const TaskContainer = ({ handleDragTask, taskRender, handleDragTaskEnd, style, className, currentTask, handleClickTask, }) => {
-    const handleDragStart = (event) => {
-        if (!handleDragTask)
-            return;
-        event.dataTransfer.effectAllowed = "move";
-        event.dataTransfer.setData("text/plain", currentTask.taskId);
-        window.sessionStorage.setItem("calendardragtaskId", currentTask.taskId);
-        window.sessionStorage.setItem("calendardragtaskStart", `${currentTask.taskStart}`);
-        window.sessionStorage.setItem("calendardragtaskEnd", `${currentTask.taskEnd}`);
-        window.sessionStorage.setItem("calendardragdayIndex", `${currentTask.dayIndex}`);
-        handleDragTask(event, currentTask);
-    };
-    const handleDragEnd = (event) => {
-        if (!handleDragTaskEnd)
-            return;
-        handleDragTaskEnd(event);
-    };
-    const handleClick = () => {
-        if (!handleClickTask)
-            return;
-        handleClickTask(currentTask);
-    };
-    if (taskRender) {
-        return (_jsx("div", { onClick: handleClick, id: currentTask.taskId, className: `taskContainer ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: taskRender({
-                currentTask,
-            }) }));
-    }
-    return (_jsxs("div", { onClick: handleClick, id: currentTask.taskId, className: `taskContainer  ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx("p", { className: "tasklabel", children: currentTask.task && currentTask.task }), _jsx("p", { className: "taskhour", children: currentTask.taskStart &&
-                    currentTask.taskEnd &&
-                    `${millisecondsToDate(currentTask.taskStart).formattedDate} - ${millisecondsToDate(currentTask.taskEnd).formattedDate}` })] }));
-};
-export default memo(TaskContainer);
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { millisecondsToDate } from "../../lib/utils";
+const TaskContainer = ({ handleDragTask, taskRender, handleDragTaskEnd, style, className, currentTask, handleClickTask, }) => {
+    const handleDragStart = (event) => {
+        if (!handleDragTask)
+            return;
+        event.dataTransfer.effectAllowed = "move";
+        event.dataTransfer.setData("text/plain", currentTask.taskId);
+        window.sessionStorage.setItem("calendardragtaskId", currentTask.taskId);
+        window.sessionStorage.setItem("calendardragtaskStart", `${currentTask.taskStart}`);
+        window.sessionStorage.setItem("calendardragtaskEnd", `${currentTask.taskEnd}`);
+        window.sessionStorage.setItem("calendardragdayIndex", `${currentTask.dayIndex}`);
+        handleDragTask(event, currentTask);
+    };
+    const handleDragEnd = (event) => {
+        if (!handleDragTaskEnd)
+            return;
+        handleDragTaskEnd(event);
+    };
+    const handleClick = () => {
+        if (!handleClickTask)
+            return;
+        handleClickTask(currentTask);
+    };
+    if (taskRender) {
+        return (_jsx("div", { onClick: handleClick, id: currentTask.taskId, className: `taskContainer ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: taskRender({
+                currentTask,
+            }) }));
+    }
+    return (_jsxs("div", { onClick: handleClick, id: currentTask.taskId, className: `taskContainer  ${className}`, style: Object.assign({}, style), draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, children: [_jsx("p", { className: "tasklabel", children: currentTask.task && currentTask.task }), _jsx("p", { className: "taskhour", children: currentTask.taskStart &&
+                    currentTask.taskEnd &&
+                    `${millisecondsToDate(currentTask.taskStart).formattedDate} - ${millisecondsToDate(currentTask.taskEnd).formattedDate}` })] }));
+};
+export default memo(TaskContainer);

package/components/TaskList/index.js

@@ -1,5 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { FixedSizeList as List } from "react-window";
-import TaskContainer from "../TaskContainer";
-const TaskList = ({ tasks }) => (_jsx(List, { height: 300, itemCount: tasks.length, itemSize: 50, width: "100%", children: ({ index, style }) => (_jsx("div", { style: style, children: _jsx(TaskContainer, { currentTask: tasks[index] }, tasks[index].id) })) }));
-export default TaskList;
+import { jsx as _jsx } from "react/jsx-runtime";
+import TaskContainer from "../TaskContainer";
+const TaskList = ({ tasks }) => (_jsx("div", { style: { height: 300, width: "100%" }, children: _jsx("div", { style: { display: "flex", flexDirection: "column" }, children: tasks.map(task => _jsx(TaskContainer, { currentTask: task }, task.id)) }) }));
+export default TaskList;

package/components/TaskList/index.tsx

@@ -1,20 +1,13 @@
-import { FixedSizeList as List } from "react-window";
+
 import TaskContainer from "../TaskContainer";
 import { TaskFeildsType } from "../../definitions";
 
 const TaskList = ({ tasks }: { tasks: TaskFeildsType[] }) => (
-  <List
-    height={300} 
-    itemCount={tasks.length}
-    itemSize={50} 
-    width="100%"
-  >
-    {({ index, style }) => (
-      <div style={style}>
-        <TaskContainer key={tasks[index].id} currentTask={tasks[index]} />
-      </div>
-    )}
-  </List>
+  <div style={{ height: 300, width: "100%" }}>
+    <div style={{ display: "flex", flexDirection: "column" }}>
+      {tasks.map(task => <TaskContainer key={task.id} currentTask={task} />)}
+    </div>
+  </div>
 );
 
 export default TaskList;

package/contexts/CalendarContext.js

@@ -1,12 +1,12 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createContext, useContext } from "react";
-const CalendarContext = createContext({
-    groups: [],
-    weekOffset: 0,
-    date: new Date()
-});
-const CalendarContextProvider = ({ groups, weekOffset, children, date }) => {
-    return (_jsx(CalendarContext.Provider, { value: { groups, weekOffset, date }, children: children }));
-};
-export const useCalendarContext = () => useContext(CalendarContext);
-export default CalendarContextProvider;
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const CalendarContext = createContext({
+    groups: [],
+    weekOffset: 0,
+    date: new Date()
+});
+const CalendarContextProvider = ({ groups, weekOffset, children, date }) => {
+    return (_jsx(CalendarContext.Provider, { value: { groups, weekOffset, date }, children: children }));
+};
+export const useCalendarContext = () => useContext(CalendarContext);
+export default CalendarContextProvider;

package/definitions/index.js

@@ -1 +1 @@
-export {};
+export {};

package/definitions/index.ts

@@ -119,6 +119,7 @@ export type DayPropsType = {
  * Props for the Calendar component.
  */
 export type CalendarPropsType = {
+  scope?: "day" | "week";
   /** Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week). */
   weekOffset?: number;
   /** Array of group data to be displayed in the calendar. */

package/hooks/useCalendarDateState.js

@@ -1,19 +1,19 @@
-import { useEffect, useState } from "react";
-import { calculerEcartSemaine, getDateObjectInTimeZone, getDayHourly, getWeekDays, } from "../lib/utils";
-function useCalendarDateState(date, weekOffset, timeZone) {
-    const [calendarDateState, setCalendarDateState] = useState({ dailyHours: [], weekDays: [] });
-    useEffect(() => {
-        const weekOffsetByDate = timeZone
-            ? calculerEcartSemaine(getDateObjectInTimeZone(timeZone))
-            : calculerEcartSemaine(date);
-        const weekDays = getWeekDays(weekOffsetByDate || weekOffset || 0);
-        const dailyHours = getDayHourly(weekOffsetByDate || weekOffset || 0);
-        const calData = {
-            dailyHours: dailyHours,
-            weekDays,
-        };
-        setCalendarDateState(calData);
-    }, [date, weekOffset]);
-    return Object.assign({}, calendarDateState);
-}
-export default useCalendarDateState;
+import { useEffect, useState } from "react";
+import { calculerEcartSemaine, getDateObjectInTimeZone, getDayHourly, getWeekDays, } from "../lib/utils";
+function useCalendarDateState(date, weekOffset, timeZone) {
+    const [calendarDateState, setCalendarDateState] = useState({ dailyHours: [], weekDays: [] });
+    useEffect(() => {
+        const weekOffsetByDate = timeZone
+            ? calculerEcartSemaine(getDateObjectInTimeZone(timeZone), timeZone)
+            : calculerEcartSemaine(date, timeZone);
+        const weekDays = getWeekDays(weekOffsetByDate || weekOffset || 0, timeZone);
+        const dailyHours = getDayHourly(weekOffsetByDate || weekOffset || 0, timeZone);
+        const calData = {
+            dailyHours: dailyHours,
+            weekDays,
+        };
+        setCalendarDateState(calData);
+    }, [date, weekOffset]);
+    return Object.assign({}, calendarDateState);
+}
+export default useCalendarDateState;

package/hooks/useCalendarDateState.ts

@@ -25,17 +25,18 @@ function useCalendarDateState(
 
   useEffect(() => {
     const weekOffsetByDate = timeZone
-      ? calculerEcartSemaine(getDateObjectInTimeZone(timeZone))
-      : calculerEcartSemaine(date);
+      ? calculerEcartSemaine(getDateObjectInTimeZone(timeZone), timeZone)
+      : calculerEcartSemaine(date, timeZone);
 
-    const weekDays = getWeekDays(weekOffsetByDate || weekOffset || 0);
-    const dailyHours = getDayHourly(weekOffsetByDate || weekOffset || 0);
+    const weekDays = getWeekDays(weekOffsetByDate || weekOffset || 0, timeZone);
+    const dailyHours = getDayHourly(weekOffsetByDate || weekOffset || 0, timeZone);
     const calData = {
       dailyHours: dailyHours,
       weekDays,
     };
 
     setCalendarDateState(calData);
+
   }, [date, weekOffset]);
 
   return { ...calendarDateState };

package/index.js

@@ -1,70 +1,70 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import "./style.css";
-import CalendarForWeek from "./components/CalendarForWeek";
-import CalendarForDay from "./components/CalendarForday";
-/**
- * Calendar component to display tasks and groups in a weekly view.
- *
- * @param {CalendarPropsType} props - The props for the Calendar component.
- * @param {number} [props.weekOffset] - Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week).
- * @param {GroupFeildsType[]} props.groups - Array of group data to be displayed in the calendar.
- * @param {string} [props.className] - Additional class names for the calendar component.
- * @param {React.CSSProperties} [props.style] - Additional styles for the calendar component.
- * @param {Date} props.date - The current date to display in the calendar.
- * @param {(currentGroup: { currentGroup: GroupFeildsType }) => React.ReactNode} [props.groupRender] - Custom render function for a group.
- * @param {({ dayIndex, day, dayOfTheMonth, dayMonth, dayYear }: { dayIndex: number; day: string; dayOfTheMonth: number; dayMonth: string; dayYear: number }) => React.ReactNode} [props.dayRender] - Custom render function for a day.
- * @param {(currentTask: { currentTask: TaskFeildsType }) => React.ReactNode} [props.taskRender] - Custom render function for a task.
- * @param {React.CSSProperties} [props.rowsStyle] - Additional styles for the rows.
- * @param {string} [props.rowsClassName] - Additional class names for the rows.
- * @param {React.CSSProperties} [props.groupsColsStyle] - Additional styles for the group columns.
- * @param {string} [props.groupsColsClassName] - Additional class names for the group columns.
- * @param {React.CSSProperties} [props.daysColsStyle] - Additional styles for the day columns.
- * @param {string} [props.daysColsClassName] - Additional class names for the day columns.
- * @param {string} [props.addTaskClassName] - Additional class names for the add-task button.
- * @param {React.CSSProperties} [props.addTaskStyle] - Additional styles for the add-task button.
- * @param {string} [props.groupContainerClassName] - Additional class names for the group containers.
- * @param {React.CSSProperties} [props.groupContainerStyle] - Additional styles for the group containers.
- * @param {string} [props.dayClassName] - Additional class names for the day elements.
- * @param {React.CSSProperties} [props.dayStyle] - Additional styles for the day elements.
- * @param {React.CSSProperties} [props.taskContainerStyle] - Additional styles for the task container.
- * @param {string} [props.taskContainerClassName] - Additional class names for the task container.
- * @param {React.CSSProperties} [props.groupHeadContainerStyle] - Additional styles for the group header container.
- * @param {string} [props.groupHeadContainerClassName] - Additional class names for the group header container.
- * @param {React.CSSProperties} [props.sumHoursContainerStyle] - Additional styles for the sum-of-hours container.
- * @param {string} [props.sumHoursContainerClassName] - Additional class names for the sum-of-hours container.
- * @param {React.CSSProperties} [props.sumHoursHeadStyle] - Additional styles for the sum-of-hours header.
- * @param {string} [props.sumHoursHeadClassName] - Additional class names for the sum-of-hours header.
- * @param {(currentGroup: GroupFeildsType, dayInfo: dayInfoType) => void} [props.handleAddTask] - Handler function for adding a new task.
- * @param {({ currentGroup, dayInfo }: { currentGroup: GroupFeildsType; dayInfo: dayInfoType }) => React.ReactNode} [props.addTaskRender] - Custom render function for adding a task.
- * @param {TasksType} props.tasks - Array of tasks to be displayed in the calendar.
- * @param {(event: React.DragEvent<HTMLDivElement>, currentTask: TaskFeildsType) => void} [props.handleDragTask] - Handler function for dragging a task.
- * @param {(event: React.DragEvent<HTMLDivElement>, taskStart: number, taskEnd: number, taskDate: Date, groupId: string, dayIndex: number, newTask: TaskFeildsType, newTasks: TasksType) => void} [props.handleDropTask] - Handler function for dropping a task.
- * @param {(event: React.DragEvent<HTMLDivElement>) => void} [props.handleDragTaskEnd] - Handler function for ending the drag of a task.
- * @param {() => React.ReactNode} [props.groupsHeadRender] - Custom render function for the groups header.
- * @param {({
- *   groupId,
- *   tasks,
- *   weekOffset,
- *   calendarDate,
- *   sumHoursByGroups
- * }: {
- *   groupId: string;
- *   tasks: TasksType;
- *   weekOffset: number;
- *   calendarDate: Date;
- *   sumHoursByGroups: number;
- * }) => React.ReactNode} [props.sumHoursRender] - Custom render function for the sum of hours.
- * @param {() => React.ReactNode} [props.sumHoursHeadRender] - Custom render function for the sum-of-hours header.
- * @param {(currentTask: TaskFeildsType) => void} [props.handleClickTask] - Handler function for clicking a task.
- * @param {(currentGroup: GroupFeildsType) => void} [props.handleClickGroup] - Handler function for clicking a group.
- * @param {0|1|2|3|4|5|6} [props.dayOffset] - Offset index for the day column (0 = first day of week, …, 6 = last day).
- * @param {React.CSSProperties} [props.dayColsStyle] - Additional styles for the day columns.
- * @param {string} [props.dayColsClassName] - Additional class names for the day columns.
- * @param {React.CSSProperties} [props.hoursColsStyle] - Additional styles for the hours columns.
- * @param {string} [props.hoursColsClassName] - Additional class names for the hours columns.
- */
-const Calendar = (props) => {
-    return (_jsx(_Fragment, { children: _jsx(CalendarForWeek, Object.assign({}, props)) }));
-};
-export default Calendar;
-export { CalendarForDay };
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import "./style.css";
+import CalendarForWeek from "./components/CalendarForWeek";
+import CalendarForDay from "./components/CalendarForday";
+/**
+ * Calendar component to display tasks and groups in a weekly view.
+ *
+ * @param {CalendarPropsType} props - The props for the Calendar component.
+ * @param {number} [props.weekOffset] - Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week).
+ * @param {GroupFeildsType[]} props.groups - Array of group data to be displayed in the calendar.
+ * @param {string} [props.className] - Additional class names for the calendar component.
+ * @param {React.CSSProperties} [props.style] - Additional styles for the calendar component.
+ * @param {Date} props.date - The current date to display in the calendar.
+ * @param {(currentGroup: { currentGroup: GroupFeildsType }) => React.ReactNode} [props.groupRender] - Custom render function for a group.
+ * @param {({ dayIndex, day, dayOfTheMonth, dayMonth, dayYear }: { dayIndex: number; day: string; dayOfTheMonth: number; dayMonth: string; dayYear: number }) => React.ReactNode} [props.dayRender] - Custom render function for a day.
+ * @param {(currentTask: { currentTask: TaskFeildsType }) => React.ReactNode} [props.taskRender] - Custom render function for a task.
+ * @param {React.CSSProperties} [props.rowsStyle] - Additional styles for the rows.
+ * @param {string} [props.rowsClassName] - Additional class names for the rows.
+ * @param {React.CSSProperties} [props.groupsColsStyle] - Additional styles for the group columns.
+ * @param {string} [props.groupsColsClassName] - Additional class names for the group columns.
+ * @param {React.CSSProperties} [props.daysColsStyle] - Additional styles for the day columns.
+ * @param {string} [props.daysColsClassName] - Additional class names for the day columns.
+ * @param {string} [props.addTaskClassName] - Additional class names for the add-task button.
+ * @param {React.CSSProperties} [props.addTaskStyle] - Additional styles for the add-task button.
+ * @param {string} [props.groupContainerClassName] - Additional class names for the group containers.
+ * @param {React.CSSProperties} [props.groupContainerStyle] - Additional styles for the group containers.
+ * @param {string} [props.dayClassName] - Additional class names for the day elements.
+ * @param {React.CSSProperties} [props.dayStyle] - Additional styles for the day elements.
+ * @param {React.CSSProperties} [props.taskContainerStyle] - Additional styles for the task container.
+ * @param {string} [props.taskContainerClassName] - Additional class names for the task container.
+ * @param {React.CSSProperties} [props.groupHeadContainerStyle] - Additional styles for the group header container.
+ * @param {string} [props.groupHeadContainerClassName] - Additional class names for the group header container.
+ * @param {React.CSSProperties} [props.sumHoursContainerStyle] - Additional styles for the sum-of-hours container.
+ * @param {string} [props.sumHoursContainerClassName] - Additional class names for the sum-of-hours container.
+ * @param {React.CSSProperties} [props.sumHoursHeadStyle] - Additional styles for the sum-of-hours header.
+ * @param {string} [props.sumHoursHeadClassName] - Additional class names for the sum-of-hours header.
+ * @param {(currentGroup: GroupFeildsType, dayInfo: dayInfoType) => void} [props.handleAddTask] - Handler function for adding a new task.
+ * @param {({ currentGroup, dayInfo }: { currentGroup: GroupFeildsType; dayInfo: dayInfoType }) => React.ReactNode} [props.addTaskRender] - Custom render function for adding a task.
+ * @param {TasksType} props.tasks - Array of tasks to be displayed in the calendar.
+ * @param {(event: React.DragEvent<HTMLDivElement>, currentTask: TaskFeildsType) => void} [props.handleDragTask] - Handler function for dragging a task.
+ * @param {(event: React.DragEvent<HTMLDivElement>, taskStart: number, taskEnd: number, taskDate: Date, groupId: string, dayIndex: number, newTask: TaskFeildsType, newTasks: TasksType) => void} [props.handleDropTask] - Handler function for dropping a task.
+ * @param {(event: React.DragEvent<HTMLDivElement>) => void} [props.handleDragTaskEnd] - Handler function for ending the drag of a task.
+ * @param {() => React.ReactNode} [props.groupsHeadRender] - Custom render function for the groups header.
+ * @param {({
+ *   groupId,
+ *   tasks,
+ *   weekOffset,
+ *   calendarDate,
+ *   sumHoursByGroups
+ * }: {
+ *   groupId: string;
+ *   tasks: TasksType;
+ *   weekOffset: number;
+ *   calendarDate: Date;
+ *   sumHoursByGroups: number;
+ * }) => React.ReactNode} [props.sumHoursRender] - Custom render function for the sum of hours.
+ * @param {() => React.ReactNode} [props.sumHoursHeadRender] - Custom render function for the sum-of-hours header.
+ * @param {(currentTask: TaskFeildsType) => void} [props.handleClickTask] - Handler function for clicking a task.
+ * @param {(currentGroup: GroupFeildsType) => void} [props.handleClickGroup] - Handler function for clicking a group.
+ * @param {0|1|2|3|4|5|6} [props.dayOffset] - Offset index for the day column (0 = first day of week, …, 6 = last day).
+ * @param {React.CSSProperties} [props.dayColsStyle] - Additional styles for the day columns.
+ * @param {string} [props.dayColsClassName] - Additional class names for the day columns.
+ * @param {React.CSSProperties} [props.hoursColsStyle] - Additional styles for the hours columns.
+ * @param {string} [props.hoursColsClassName] - Additional class names for the hours columns.
+ */
+const Calendar = (props) => {
+    return (_jsx(_Fragment, { children: props.scope === "day" ? _jsx(CalendarForDay, Object.assign({}, props)) : _jsx(CalendarForWeek, Object.assign({}, props)) }));
+};
+export default Calendar;
+export { CalendarForDay };

package/index.tsx

@@ -67,7 +67,7 @@ import CalendarForDay from "./components/CalendarForday";
 const Calendar = (props: CalendarPropsType) => {
   return (
     <>
-      <CalendarForWeek {...props} />
+      {props.scope === "day" ? <CalendarForDay {...props} /> : <CalendarForWeek {...props} />}
     </>
   );
 };

package/jest.config.js

@@ -1,9 +1,9 @@
-// Sync object
-const config = {
-    verbose: true,
-    transform: {
-        '.+\\.tsx?$': 'ts-jest',
-        '^.+\\.(js|jsx)$': 'babel-jest',
-    },
-};
-export default config;
+// Sync object
+const config = {
+    verbose: true,
+    transform: {
+        '.+\\.tsx?$': 'ts-jest',
+        '^.+\\.(js|jsx)$': 'babel-jest',
+    },
+};
+export default config;

package/lib/slyles.js

@@ -1,21 +1,21 @@
-export const theadTrStyle = {
-    color: "#0f5173",
-    fontWeight: "300",
-    position: "sticky",
-    top: -1,
-};
-export const groupTdStyle = {
-    height: "auto",
-    width: "150px",
-};
-export const groupContainerStyle = {
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "space-between",
-    gap: "0.75rem", // Correspond à gap-3
-    padding: "0.75rem", // Correspond à p-3
-    color: "#0f5173",
-    cursor: "pointer",
-};
+export const theadTrStyle = {
+    color: "#0f5173",
+    fontWeight: "300",
+    position: "sticky",
+    top: -1,
+};
+export const groupTdStyle = {
+    height: "auto",
+    width: "150px",
+};
+export const groupContainerStyle = {
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: "0.75rem", // Correspond à gap-3
+    padding: "0.75rem", // Correspond à p-3
+    color: "#0f5173",
+    cursor: "pointer",
+};