react-weekly-planning 1.0.37 → 1.0.39

package/README.md

@@ -3,9 +3,7 @@
 This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
 
 
-### Description and Use Cases
-
-`react-weekly-planning` provides a React component for weekly planning. Easily set up and manage a weekly schedule with customizable tasks, groups and views.
+## 🚀 react-weekly-planning, a flexible and customizable package for your productivity projects.
 
 ## Screenshot
 
@@ -55,16 +53,6 @@ It is possible to use either Weekoffset or Date, or even both simultaneously.
   <Calendar date={currentDate} ... />
   ```
 
-#### `timeZone`
-
-- **Description**: This prop sets the timezone to be used by the calendar for all date and time calculations.
-- **Type**: `TimeZone` (e.g., `"America/New_York"`, `"Europe/Paris"`, etc.)
-- **Use Case**: Use this prop to align the calendar's display and event calculations to a specific global timezone instead of relying on the user's local browser timezone. This ensures consistency across different geographical locations.
-
-  **Example**:
-  ```jsx
-  <Calendar timeZone="Europe/Paris" ... />
-  ```
 
 #### `scope`
 
@@ -88,94 +76,40 @@ It is possible to use either Weekoffset or Date, or even both simultaneously.
   <Calendar scope="day" dayOffset={2} ... />
   ```
 
-#### `tasks`
-
-- **Description**: This prop is an array of tasks to be displayed in the calendar.
-- **Type**: `TasksType`
-- **Use Case**: Use this prop to manage and display tasks in the calendar. Each task should contain details such as start time, end time, description, date, group ID, and day index.
- taskId, taskStart taskEnd, task, taskDate, groupId, dayIndex
-  **Example**:
-  ```jsx
-  const tasks = [
-    { taskId: '1', taskStart:'Time in milliseconde', taskEnd:'Time in milliseconde', task: 'Task 1', taskDate: new Date(), groupId: '1', dayIndex: 0, ... }
-  ];
-
-  <Calendar tasks={tasks} ... />
-  ```
-
-- **Supplementary property** : If you want the tasks to be saved up to a date of your choice you can define the `taskExpiryDate` property. It's an idea of [Patrick Aimé](https://www.linkedin.com/in/patrick-aime?utm_source=share&utm_campaign=share_via&utm_content=profile&utm_medium=android_app).
-
-- **Example**:Here's how to create a task that will expire in a day.
-```jsx
-  const tasks = [
-    { taskId: '1', taskStart:'Time in milliseconde', taskEnd:'Time in milliseconde', task: 'Task 1', taskDate: new Date(), groupId: '1', dayIndex: 0,taskExpiryDate:new Date(Date.now() + 86400000) ... }
-  ];
-
-  <Calendar tasks={tasks} ... />
- ```
-
- `taskExpiryDate` is used with `getSavedTasks()` To obtain the saved tasks.
-
-  **Example**:
-  ```jsx
-  import {getSavedTasks} from "react-weekly-planning";
-  const [tasks,setTasks]=useState([])
-
-  useEffect(()=>{
-     setTasks(getSavedTasks())
-  },[])
-
-  <Calendar tasks={tasks} ... />
-  ```
 
 ---
 
 ## Full Example for Beginners
 
-Here is a complete, minimal example showing how to set up the `Calendar` with simple groups and tasks.
+Here is a complete, minimal example showing how to set up the `Calendar` with the `CalendarTaskContextProvider`.
 
 ```tsx
 import React, { useState } from "react";
-import Calendar from "react-pweekly-planning"; // Verify your exact import path based on package.json
-
+import { 
+  Calendar, 
+  CalendarTaskContextProvider 
+} from "react-pweekly-planning";
 
 const App = () => {
   const [date] = useState(new Date());
   
-  // Define groups (e.g., resources, team members, or projects)
   const groups = [
     { id: "1", label: "Developer A" },
     { id: "2", label: "Developer B" }
   ];
 
-  // Create start and end times in milliseconds
-  const todayAt10 = new Date().setHours(10, 0, 0, 0);
-  const todayAt12 = new Date().setHours(12, 0, 0, 0);
-
-  // Define your tasks
-  const tasks = [
-    { 
-      taskId: "t1", 
-      groupId: "1", // Belongs to "Developer A"
-      taskStart: todayAt10, 
-      taskEnd: todayAt12,   
-      taskDate: new Date(), 
-      dayIndex: new Date().getDay(), // Matches the task's day of week
-      taskSummary: "Code Review"
-    }
-  ];
-
   return (
-    <div style={{ padding: "20px" }}>
-      <h1>My Weekly Planner</h1>
-      <Calendar 
-        date={date}
-        weekOffset={0}
-        groups={groups}
-        tasks={tasks}
-        scope="week" // Change to "day" for daily view
-      />
-    </div>
+    <CalendarTaskContextProvider hashScope="week">
+      <div style={{ padding: "20px" }}>
+        <h1>My Weekly Planner</h1>
+        <Calendar 
+          date={date}
+          weekOffset={0}
+          groups={groups}
+          scope="week"
+        />
+      </div>
+    </CalendarTaskContextProvider>
   );
 };
 
@@ -198,7 +132,6 @@ Props for the Calendar component.
 | `className`                  | string                                                                                | Additional class names for the calendar component.                                                |
 | `style`                      | React.CSSProperties \| undefined                                                      | Additional styles for the calendar component.                                                     |
 | `date`                       | Date                                                                                  | The current date to display in the calendar.                                                      |
-| `timeZone`                   | TimeZone                                                                              | The timezone to use for displaying and manipulating the calendar dates.                           |
 | `groupRender`                | ({ currentGroup }: { currentGroup: GroupFeildsType }) => React.ReactNode              | Custom render function for a group.                                                               |
 | `dayRender`                  | ({ dayIndex, day, dayOfTheMonth, dayMonth, dayYear }: { dayIndex: number; day: string; dayOfTheMonth: number; dayMonth: string; dayYear: number; }) => React.ReactNode | Custom render function for a day.                                                                 |
 | `taskRender`                 | ({ currentTask, handleDragTask }: { currentTask: TaskFeildsType}) => React.ReactNode             | Custom render function for a task. |
@@ -224,7 +157,6 @@ Props for the Calendar component.
 | `sumHoursHeadClassName`      | string                                                                                | Additional class names for the sum hours header.                                                  |
 | `handleAddTask`              | handleAddTask?: (currentGroup: GroupFeildsType, dayInfo: dayInfoType) => void;          | Handler function for adding a new task.                                                           |
 | `addTaskRender`              | addTaskRender?: ({currentGroup,dayInfo}:{currentGroup: GroupFeildsType;dayInfo: dayInfoType}) => React.ReactNode;| Custom render function for adding a task.                                                         |
-| `tasks`                      | TasksType                                                                             | Array of tasks to be displayed in the calendar.                                                   |
 | `handleDragTask`             | (event: React.DragEvent<HTMLDivElement>, currentTask: TaskFeildsType) => void         | Handler function for dragging a task.                                                             |
 | `handleDropTask`             | (event: React.DragEvent<HTMLTableDataCellElement>, taskStart: number, taskEnd: number, taskDate: Date, groupId: string, dayIndex: number, newTask: TaskFeildsType, newTasks: TasksType) => void | Handler function for dropping a task.                                                             |
 | `handleDragTaskEnd`          | (event: React.DragEvent<HTMLDivElement>) => void                                      | Handler function for ending the drag of a task.                                                   |
@@ -233,24 +165,202 @@ Props for the Calendar component.
 | `sumHoursHeadRender`         | () => React.ReactNode                                                                 | Custom render function for the sum of hours header.                                               |
 | `handleClickTask`            | (currentTask: TaskFeildsType) => void                                                 | Handler function for clicking a task.                                                             |
 | `handleClickGroup`           | (currentGroup: GroupFeildsType) => void                                               | Handler function for clicking a group.                                                            |
+
+---
+
+### ⚡ A modular approach
+
+This package is based on a simple principle:
+👉 **use only what you need.**
+
+Each feature is independent:
+
+* 📅 calendar
+* ⏱ planning logic
+* 📊 data management
+* 🧩 custom extensions
+
+Use everything… or only a part.
+**The choice is yours.**
+
+---
+
+## Task Management (`CalendarTaskContext`)
+
+The `CalendarTaskContext` provides a powerful way to manage tasks globally or within specific sections of your app. It handles indexing, caching, and expiration automatically.
+
+### `CalendarTaskContextProvider`
+
+Wrap your application (or a specific branch) with this provider to enable task management features.
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `hashScope` | `"week" \| "group" \| "day"` | Defines how tasks are bucketed and cached. |
+| `children` | `React.ReactNode` | Your application components. |
+
+> [!NOTE]
+> The `hashScope` is **optional** for the provider and defaults to `"week"`. It is primarily used for custom calendar implementations. When using the standard `<Calendar />` component, it internally wraps itself in a provider with `hashScope="week"`, meaning you don't need to provide one unless you are building a custom UI.
+
+### `useCalendarTaskContext()`
+
+Use this hook within any component nested under the provider to access the task store and management methods.
+
+#### Properties and Methods
+
+| Name | Type | Description |
+|------|------|-------------|
+| `tasks` | `TasksStore` | The current state of all tasks, organized by buckets. |
+| `addTask` | `(task: Task) => void` | Adds a new task. |
+| `getTasks` | `(hash: string) => Task[]` | Retrieves all tasks for a given hash (e.g., a specific week key). |
+| `getTask` | `(hash: string, taskId: string) => Task \| undefined` | Finds a specific task by ID. |
+| `updateTask` | `(hash: string, taskId: string, updatedTask: Partial<Task>) => void` | Updates an existing task's properties. |
+| `deleteTask` | `(hash: string, taskId: string) => void` | Removes a task from the store. |
+| `isValidTask` | `(task: Task) => boolean` | Checks if a task object has all required fields. |
+| `cleanExpiredTasks` | `() => void` | Removes all tasks that have passed their `taskExpiryDate`. |
+| `cleanExpiredTasksByHash` | `(hash: string) => void` | Removes expired tasks within a specific hash bucket. |
+| `hashScope` | `"week" \| "group" \| "day"` | The active hashing strategy. |
+
+#### Example: Adding a Task
+
+```tsx
+const TaskAdder = () => {
+  const { addTask } = useCalendarTaskContext();
+
+  const handleAdd = () => {
+    addTask({
+      taskId: "123",
+      groupId: "1",
+      taskStart: Date.now(),
+      taskEnd: Date.now() + 3600000,
+      taskDate: new Date(),
+      dayIndex: new Date().getDay(),
+      taskSummary: "New Task"
+    });
+  };
+
+  return <button onClick={handleAdd}>Quick Add Task</button>;
+};
+```
+
 ---
 
+## Custom Calendar Implementation (Modular Design)
+
+For advanced users who want to build their own calendar UI from scratch (without using the `<Calendar />` component), the `CalendarTaskContext` provides all the necessary state and logic. This allows you to create highly personalized designs while leveraging the library's optimized task management.
+
+### 1. Basic Setup
+
+To build a custom calendar, wrap your components in `CalendarTaskContextProvider` and use `useCalendarTaskContext` to access the data and methods.
+
+```tsx
+import React from 'react';
+import { 
+  CalendarTaskContextProvider, 
+  useCalendarTaskContext,
+  updateOffsetWithDateCalendar,
+  getHash 
+} from 'react-weekly-planning';
+
+const MyCustomCalendar = () => {
+  const { getTasks, addTask } = useCalendarTaskContext();
+  const currentDate = new Date();
+  
+  // 1. Calculate the week offset for the desired date
+  const offset = updateOffsetWithDateCalendar(currentDate);
+  
+  // 2. Generate the hash for the current view (e.g., 'week' scope)
+  const hash = getHash(offset).week;
+  
+  // 3. Retrieve tasks for that hash
+  const tasks = getTasks(hash);
+
+  return (
+    <div className="my-custom-design">
+      <h2>My Weekly View</h2>
+      {tasks.length === 0 && <p>No tasks for this week.</p>}
+      {tasks.map(task => (
+        <div key={task.id} className="custom-task-card">
+          <h4>{task.taskSummary}</h4>
+          <p>
+            {new Date(task.taskStart).toLocaleTimeString()} - 
+            {new Date(task.taskEnd).toLocaleTimeString()}
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+const App = () => (
+  <CalendarTaskContextProvider hashScope="week">
+    <MyCustomCalendar />
+  </CalendarTaskContextProvider>
+);
+```
+
+### 2. Default Behavior of `<Calendar />`
+
+It's important to note that the main `<Calendar />` component uses the `"week"` hash scope by default. If you use the standard component, you are implicitly using this scope. Explicitly defining a `hashScope` on the `CalendarTaskContextProvider` is only necessary when you want to change how tasks are indexed or when building a fully custom UI as shown above.
+
+### 3. Understanding Hashes and Scopes
+
+The library uses "hashes" to bucket tasks efficiently. When calling `getTasks(hash)`, `updateTask(hash, ...)` or `deleteTask(hash, ...)`, you must provide the hash that matches your `hashScope`:
+
+- **Scope `"week"`**: Use `getHash(offset).week`.
+- **Scope `"group"`**: Use `getHash(offset, groupId).group`.
+- **Scope `"day"`**: Use `getHash(offset, groupId, dayIndex).day`.
+
+### 4. Best Practices for Custom Designs
+
+- **Manual Rendering**: Use `getTasks(hash)` to retrieve only the tasks relevant to the current view.
+- **CRUD Operations**: Use `addTask`, `updateTask`, and `deleteTask` to modify the store. The UI will re-render automatically thanks to the context.
+- **Validation**: Use `isValidTask(task)` to verify if a task is expired before displaying it, or rely on `cleanExpiredTasks()` to prune the store.
+- **Performance**: Accessing tasks by hash is highly optimized. Avoid looping through the entire `tasks.buckets` manually if possible.
+
+---
+
+### 🧠 Total flexibility
+
+Whether you want:
+
+* a simple planner
+* a complete productivity system
+* or a fully customized solution
+
+This package allows you to:
+
+* integrate only useful components
+* easily modify behaviors
+* build your own logic
+
+👉 **No constraints. No imposed framework.**
+
+---
+
+### 💡 Designed for builders
+
+This isn't just a tool.
+It's a foundation.
+
+A system you can shape, extend, and control —
+to create an organization that truly reflects you.
+
+**Because performance starts with the freedom to build.**
+
 ---
 
 ## Additional Functions
 
 ### `getCalendarDate`
 
-- **Description**: Returns the current date according to the selected timezone or the local time.
-- **Parameters**:
-  - `timeZone` (TimeZone, optional): The timezone to use for the date calculation.
-- **Returns**: A `Date` object representing the current time in the specified timezone (or local time if omitted).
+- **Description**: Returns the current date.
+- **Returns**: A `Date` object representing the current time.
 
   **Example**:
   ```javascript
   import { getCalendarDate } from "react-weekly-planning";
-  const now = getCalendarDate("Europe/Paris");
-  console.log(now); // Logs the current date in Paris
+  const now = getCalendarDate();
+  console.log(now);
   ```
 
 ### `updateCalendarDateWithOffset`
@@ -295,16 +405,27 @@ Props for the Calendar component.
   const formattedTime = millisecondsToHours(1716905215397);
   console.log(formattedTime); // Logs the formatted time for 14h06
   ```
-### `checkDuplicates`
 
-- **Description**: Checks if a new task overlaps with any existing tasks in the schedule. This function helps prevent overlapping tasks when scheduling.
+
+### `getHash`
+
+- **Description**: Generates a set of bucket hashes based on the offset, group, and day.
 - **Parameters**:
-  - `tasks` (TasksType): An array of existing tasks. Each task should have `groupId`,`taskStart` and `taskEnd` properties representing the groupId of new task, the start and end times of the task.
-  - `taskStart` (number): The start time in milliseconds of the new task to be checked.
-  - `taskEnd` (number): The end time in milliseconds of the new task to be checked.
-  - `groupId` (string): The groupId of new task.
-- **Returns**: `boolean` - Returns `true` if there is an overlap with any existing task, otherwise returns `false`.
+  - `weekOffset` (number): The week offset.
+  - `groupId` (string, optional): The group ID.
+  - `dayIndex` (number, optional): The day index (0-6).
+- **Returns**: An object containing `week`, `group`, and `day` hash strings.
+
+  **Example**:
+  ```javascript
+  import { getHash } from "react-weekly-planning";
+  const hashes = getHash(0, "group-1", 2);
+  console.log(hashes.week);  // "0"
+  console.log(hashes.group); // "0/group-1"
+  console.log(hashes.day);   // "0/group-1/2"
+  ```
 
 
 ---
 
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-weekly-planning",
-  "version": "1.0.37",
+  "version": "1.0.39",
   "main": "dist/index.js",
   "types": "dist/types/index.d.ts",
   "exports": {
@@ -15,6 +15,54 @@
     "./definitions": {
       "types": "./dist/types/definitions/index.d.ts",
       "default": "./dist/definitions/index.js"
+    },
+    "./hooks/useCalendarTask": {
+      "types": "./dist/types/hooks/useCalendarTask.d.ts",
+      "default": "./dist/hooks/useCalendarTask.js"
+    },
+    "./contexts/CalendarTaskContext": {
+      "types": "./dist/types/contexts/CalendarTaskContext.d.ts",
+      "default": "./dist/contexts/CalendarTaskContext.js"
+    },
+    "./contexts/CalendarContext": {
+      "types": "./dist/types/contexts/CalendarContext.d.ts",
+      "default": "./dist/contexts/CalendarContext.js"
+    },
+    "./components/TaskContainer": {
+      "types": "./dist/types/components/TaskContainer.d.ts",
+      "default": "./dist/components/TaskContainer.js"
+    },
+    "./components/DayContainer": {
+      "types": "./dist/types/components/DayContainer.d.ts",
+      "default": "./dist/components/DayContainer.js"
+    },
+    "./components/VirtualGroupRow": {
+      "types": "./dist/types/components/VirtualGroupRow.d.ts",
+      "default": "./dist/components/VirtualGroupRow.js"
+    },
+    "./components/VirtualGroupRowDay": {
+      "types": "./dist/types/components/VirtualGroupRowDay.d.ts",
+      "default": "./dist/components/VirtualGroupRowDay.js"
+    },
+    "./components/TaskContainer/TaskVirtualRow": {
+      "types": "./dist/types/components/TaskContainer/TaskVirtualRow.d.ts",
+      "default": "./dist/components/TaskContainer/TaskVirtualRow.js"
+    },
+    "./components/AddTask": {
+      "types": "./dist/types/components/AddTask.d.ts",
+      "default": "./dist/components/AddTask.js"
+    },
+    "./components/SumHoursContainer": {
+      "types": "./dist/types/components/SumHoursContainer.d.ts",
+      "default": "./dist/components/SumHoursContainer.js"
+    },
+    "./components/SumHoursHead": {
+      "types": "./dist/types/components/SumHoursHead.d.ts",
+      "default": "./dist/components/SumHoursHead.js"
+    },
+    "./components/GroupContainer": {
+      "types": "./dist/types/components/GroupContainer.d.ts",
+      "default": "./dist/components/GroupContainer.js"
     }
   },
   "files": [

package/dist/components/AddTask/index.js

@@ -1,17 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-const AddTask = ({ currentGroup, handleAddTask, addTaskRender, dayInfo, addTaskStyle, addTaskClassName, }) => {
-    if (addTaskRender) {
-        return (_jsx(_Fragment, { children: addTaskRender({
-                currentGroup,
-                dayInfo,
-            }) }));
-    }
-    const handleClick = () => {
-        if (!handleAddTask)
-            return;
-        handleAddTask(currentGroup, dayInfo);
-    };
-    return (_jsx("div", { onClick: handleClick, style: addTaskStyle, className: `addPlanStyle ${addTaskClassName}`, children: "+" }));
-};
-export default memo(AddTask);

package/dist/components/CalendarForWeek.js

@@ -1,49 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import GroupContainer from "./GroupContainer";
-import GroupsHeadContainer from "./GroupsHeadContainer";
-import { groupTdStyle, theadTrStyle } from "../lib/slyles";
-import DayContainer from "./DayContainer";
-import SumHoursHead from "./SumHoursHead";
-import { compareWeekOffset, getSessionStorageRecordForDragAndDrop, saveTasksToLocalStorage, sumHoursByGroups, } from "../lib/utils";
-import TaskContainer from "./TaskContainer";
-import AddTask from "./AddTask";
-import SumHoursContainer from "./SumHoursContainer";
-import { memo, useEffect } from "react";
-import useCalendarDateState from "../hooks/useCalendarDateState";
-function CalendarForWeek(props) {
-    var _a;
-    const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
-    const handleDragOver = (event) => {
-        event.preventDefault();
-    };
-    useEffect(() => {
-        saveTasksToLocalStorage(props.tasks);
-    }, [props.tasks]);
-    return (_jsxs("table", { className: `planningCalendar ${props.className}`, style: Object.assign({}, props.style), children: [_jsx("thead", { children: _jsxs("tr", { className: `${props.rowsClassName}`, style: Object.assign(Object.assign({}, theadTrStyle), props.rowsStyle), children: [_jsx("th", { className: `dayTh ${props.groupsColsClassName}`, style: Object.assign({}, props.groupsColsStyle), children: _jsx(GroupsHeadContainer, { className: `${props.groupHeadContainerClassName}`, style: props.groupHeadContainerStyle, groupsHeadRender: props.groupsHeadRender }) }), weekDays.map((day, i) => (_jsx("th", { className: `${props.daysColsClassName}`, style: Object.assign({}, props.daysColsStyle), children: _jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: i, dayRender: props.dayRender, day: day.day, dayOfTheMonth: day.dayOfTheMonth, dayMonth: day.dayMonth, dayYear: day.dayYear }) }, i))), _jsx("th", { className: `totalTh ${props.hoursColsClassName}`, style: props.hoursColsStyle, children: _jsx(SumHoursHead, { className: props.sumHoursHeadClassName, style: props.sumHoursHeadStyle, sumHoursHeadRender: props.sumHoursHeadRender }) })] }, "") }), _jsx("tbody", { children: (_a = props.groups) === null || _a === void 0 ? void 0 : _a.map((group, i) => (_jsxs("tr", { className: `${props.rowsClassName}`, style: Object.assign({}, props.rowsStyle), children: [_jsx("td", { className: `${props.groupsColsClassName}`, style: Object.assign(Object.assign({}, groupTdStyle), props.groupsColsStyle), children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }, i), dailyHours.map((_, positionDay) => (_jsx("td", { onDragOver: handleDragOver, onDrop: (event) => {
-                                if (!props.handleDropTask || !props.tasks)
-                                    return;
-                                const dropInfo = getSessionStorageRecordForDragAndDrop(props.tasks, positionDay, group.id);
-                                if (!dropInfo)
-                                    return;
-                                props.handleDropTask(event, dropInfo.taskDropStart, dropInfo.taskDropEnd, dropInfo.taskDropDate, group.id, positionDay, dropInfo.newTask, dropInfo.newTasks);
-                            }, id: `td-${group.id}day-i`, className: props.dayColsClassName, style: props.dayColsStyle, children: _jsxs("div", { style: {
-                                    display: "flex",
-                                    width: "100%",
-                                    height: "100%",
-                                    flexDirection: "column",
-                                    padding: "5px",
-                                }, children: [_jsx(_Fragment, { children: props.tasks
-                                            .map((task, taskKey) => {
-                                            if (task.dayIndex === positionDay &&
-                                                task.groupId === group.id &&
-                                                compareWeekOffset(props.date, props.weekOffset || 0, task.taskDate, props.timeZone)) {
-                                                return (_jsx(TaskContainer, { handleDragTask: props.handleDragTask, taskRender: props.taskRender, handleDragTaskEnd: props.handleDragTaskEnd, style: props.taskContainerStyle, className: `${props.taskContainerClassName}`, currentTask: task, handleClickTask: props.handleClickTask }, `${taskKey} task`));
-                                            }
-                                            else
-                                                return "";
-                                        }) }), _jsx(AddTask, { addTaskStyle: props.addTaskStyle, addTaskClassName: props.addTaskClassName, currentGroup: group, dayInfo: dailyHours[positionDay], addTaskRender: props.addTaskRender, handleAddTask: props.handleAddTask })] }, positionDay) }, `td-${group.id}day-i${positionDay}`))), _jsx("td", { style: props.hoursColsStyle, className: props.hoursColsClassName, children: _jsx(SumHoursContainer, { groupId: group.id, tasks: props.tasks, weekOffset: props.weekOffset || 0, calendarDate: props.date, sumHoursRender: props.sumHoursRender, sumHoursByGroups: sumHoursByGroups(group.id, props.tasks, props.weekOffset || 0, props.date, props.timeZone), className: props.sumHoursContainerClassName, style: props.sumHoursContainerStyle }) }, `${i}sumHours`)] }, `${i} tr`))) })] }));
-}
-export default memo(CalendarForWeek, (prevProps, nextProps) => prevProps.tasks === nextProps.tasks &&
-    prevProps.date === nextProps.date &&
-    prevProps.groups === nextProps.groups &&
-    prevProps.weekOffset === nextProps.weekOffset);

package/dist/components/CalendarForday.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import "./style.css";
-import { memo, useEffect } from "react";
-import { compareWeekOffset, saveTasksToLocalStorage } from "../lib/utils";
-import useCalendarDateState from "../hooks/useCalendarDateState";
-import AddTask from "./AddTask";
-import TaskContainer from "./TaskContainer";
-import GroupContainer from "./GroupContainer";
-import DayContainer from "./DayContainer";
-function CalendarForDay(props) {
-    const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset, props.timeZone);
-    useEffect(() => {
-        saveTasksToLocalStorage(props.tasks);
-    }, [props.tasks]);
-    const currentDay = weekDays[props.dayOffset || 0];
-    const currentDailyHours = dailyHours[props.dayOffset || 0];
-    return (_jsxs("div", { className: ` CalendarTableForDay ${props.className}`, style: Object.assign({}, props.style), children: [currentDay && (_jsx(DayContainer, { style: props.dayStyle, className: props.dayClassName, dayIndex: props.dayOffset || 0, dayRender: props.dayRender, day: currentDay.day, dayOfTheMonth: currentDay.dayOfTheMonth, dayMonth: currentDay.dayMonth, dayYear: currentDay.dayYear })), _jsx("div", { className: `CalendarTableForDayTasksContainer`, children: currentDailyHours &&
-                    props.groups.map((group, i) => {
-                        return (_jsxs("div", { style: Object.assign({ width: "100%", height: "auto", padding: "5px", borderBottom: "1.5px solid #0f52737e", borderRight: "0.74px solid rgba(198, 219, 225, 0.68)", borderLeft: "0.74px solid rgba(198, 219, 225, 0.68)" }, props.rowsStyle), className: `CalendarTableForDayRow ${props.rowsClassName}`, children: [_jsx("div", { style: Object.assign({ width: "auto", height: "auto" }, props.groupsColsStyle), className: props.groupsColsClassName, children: _jsx(GroupContainer, { style: props.groupContainerStyle, className: props.groupContainerClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }), _jsxs("div", { className: "CalendarTableForDayGroupTasks", children: [props.tasks.map((task, taskKey) => {
-                                            if (task.dayIndex === (props.dayOffset || 0) &&
-                                                task.groupId === group.id &&
-                                                compareWeekOffset(props.date, props.weekOffset || 0, task.taskDate, props.timeZone)) {
-                                                return (_jsx(TaskContainer, { handleDragTask: props.handleDragTask, taskRender: props.taskRender, handleDragTaskEnd: props.handleDragTaskEnd, style: props.taskContainerStyle, className: `${props.taskContainerClassName}`, currentTask: task, handleClickTask: props.handleClickTask }, `${taskKey} task`));
-                                            }
-                                            else
-                                                return "";
-                                        }), _jsx(AddTask, { addTaskStyle: props.addTaskStyle, addTaskClassName: props.addTaskClassName, currentGroup: group, dayInfo: currentDailyHours, addTaskRender: props.addTaskRender, handleAddTask: props.handleAddTask })] })] }, i));
-                    }) })] }));
-}
-export default memo(CalendarForDay, (prevProps, nextProps) => prevProps.tasks === nextProps.tasks &&
-    prevProps.date === nextProps.date &&
-    prevProps.groups === nextProps.groups &&
-    prevProps.weekOffset === nextProps.weekOffset);

package/dist/components/DayContainer/index.js

@@ -1,15 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { memo } from "react";
-const DayContainer = ({ dayIndex, dayOfTheMonth, day, dayMonth, dayYear, dayRender, className, style, }) => {
-    if (dayRender) {
-        return (_jsx(_Fragment, { children: dayRender({
-                dayIndex,
-                day,
-                dayOfTheMonth,
-                dayMonth,
-                dayYear,
-            }) }));
-    }
-    return (_jsx("div", { className: `${className}`, style: style, children: `${day}. ${dayOfTheMonth}` }));
-};
-export default memo(DayContainer);

package/dist/components/GroupContainer/index.js

@@ -1,15 +0,0 @@
-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/dist/components/GroupsHeadContainer/index.js

@@ -1,9 +0,0 @@
-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/dist/components/SumHoursContainer/index.js

@@ -1,16 +0,0 @@
-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/dist/components/SumHoursHead/index.js

@@ -1,9 +0,0 @@
-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);