react-weekly-planning 1.0.29 → 1.0.31

package/docs/styles/prettify-tomorrow.css

@@ -1,132 +1,132 @@
-/* Tomorrow Theme */
-/* Original theme - https://github.com/chriskempson/tomorrow-theme */
-/* Pretty printing styles. Used with prettify.js. */
-/* SPAN elements with the classes below are added by prettyprint. */
-/* plain text */
-.pln {
-  color: #4d4d4c; }
-
-@media screen {
-  /* string content */
-  .str {
-    color: #718c00; }
-
-  /* a keyword */
-  .kwd {
-    color: #8959a8; }
-
-  /* a comment */
-  .com {
-    color: #8e908c; }
-
-  /* a type name */
-  .typ {
-    color: #4271ae; }
-
-  /* a literal value */
-  .lit {
-    color: #f5871f; }
-
-  /* punctuation */
-  .pun {
-    color: #4d4d4c; }
-
-  /* lisp open bracket */
-  .opn {
-    color: #4d4d4c; }
-
-  /* lisp close bracket */
-  .clo {
-    color: #4d4d4c; }
-
-  /* a markup tag name */
-  .tag {
-    color: #c82829; }
-
-  /* a markup attribute name */
-  .atn {
-    color: #f5871f; }
-
-  /* a markup attribute value */
-  .atv {
-    color: #3e999f; }
-
-  /* a declaration */
-  .dec {
-    color: #f5871f; }
-
-  /* a variable name */
-  .var {
-    color: #c82829; }
-
-  /* a function name */
-  .fun {
-    color: #4271ae; } }
-/* Use higher contrast and text-weight for printable form. */
-@media print, projection {
-  .str {
-    color: #060; }
-
-  .kwd {
-    color: #006;
-    font-weight: bold; }
-
-  .com {
-    color: #600;
-    font-style: italic; }
-
-  .typ {
-    color: #404;
-    font-weight: bold; }
-
-  .lit {
-    color: #044; }
-
-  .pun, .opn, .clo {
-    color: #440; }
-
-  .tag {
-    color: #006;
-    font-weight: bold; }
-
-  .atn {
-    color: #404; }
-
-  .atv {
-    color: #060; } }
-/* Style */
-/*
-pre.prettyprint {
-  background: white;
-  font-family: Consolas, Monaco, 'Andale Mono', monospace;
-  font-size: 12px;
-  line-height: 1.5;
-  border: 1px solid #ccc;
-  padding: 10px; }
-*/
-
-/* Specify class=linenums on a pre to get line numbering */
-ol.linenums {
-  margin-top: 0;
-  margin-bottom: 0; }
-
-/* IE indents via margin-left */
-li.L0,
-li.L1,
-li.L2,
-li.L3,
-li.L4,
-li.L5,
-li.L6,
-li.L7,
-li.L8,
-li.L9 {
-  /* */ }
-
-/* Alternate shading for lines */
-li.L1,
-li.L3,
-li.L5,
-li.L7,
-li.L9 {
-  /* */ }
+/* Tomorrow Theme */
+/* Original theme - https://github.com/chriskempson/tomorrow-theme */
+/* Pretty printing styles. Used with prettify.js. */
+/* SPAN elements with the classes below are added by prettyprint. */
+/* plain text */
+.pln {
+  color: #4d4d4c; }
+
+@media screen {
+  /* string content */
+  .str {
+    color: #718c00; }
+
+  /* a keyword */
+  .kwd {
+    color: #8959a8; }
+
+  /* a comment */
+  .com {
+    color: #8e908c; }
+
+  /* a type name */
+  .typ {
+    color: #4271ae; }
+
+  /* a literal value */
+  .lit {
+    color: #f5871f; }
+
+  /* punctuation */
+  .pun {
+    color: #4d4d4c; }
+
+  /* lisp open bracket */
+  .opn {
+    color: #4d4d4c; }
+
+  /* lisp close bracket */
+  .clo {
+    color: #4d4d4c; }
+
+  /* a markup tag name */
+  .tag {
+    color: #c82829; }
+
+  /* a markup attribute name */
+  .atn {
+    color: #f5871f; }
+
+  /* a markup attribute value */
+  .atv {
+    color: #3e999f; }
+
+  /* a declaration */
+  .dec {
+    color: #f5871f; }
+
+  /* a variable name */
+  .var {
+    color: #c82829; }
+
+  /* a function name */
+  .fun {
+    color: #4271ae; } }
+/* Use higher contrast and text-weight for printable form. */
+@media print, projection {
+  .str {
+    color: #060; }
+
+  .kwd {
+    color: #006;
+    font-weight: bold; }
+
+  .com {
+    color: #600;
+    font-style: italic; }
+
+  .typ {
+    color: #404;
+    font-weight: bold; }
+
+  .lit {
+    color: #044; }
+
+  .pun, .opn, .clo {
+    color: #440; }
+
+  .tag {
+    color: #006;
+    font-weight: bold; }
+
+  .atn {
+    color: #404; }
+
+  .atv {
+    color: #060; } }
+/* Style */
+/*
+pre.prettyprint {
+  background: white;
+  font-family: Consolas, Monaco, 'Andale Mono', monospace;
+  font-size: 12px;
+  line-height: 1.5;
+  border: 1px solid #ccc;
+  padding: 10px; }
+*/
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin-top: 0;
+  margin-bottom: 0; }
+
+/* IE indents via margin-left */
+li.L0,
+li.L1,
+li.L2,
+li.L3,
+li.L4,
+li.L5,
+li.L6,
+li.L7,
+li.L8,
+li.L9 {
+  /* */ }
+
+/* Alternate shading for lines */
+li.L1,
+li.L3,
+li.L5,
+li.L7,
+li.L9 {
+  /* */ }

package/docs/styles/reset.css

@@ -1,44 +1,44 @@
-/* reset css */
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font-size: 100%;
-  font: inherit;
-  vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
-footer, header, hgroup, menu, nav, section {
-  display: block;
-}
-body {
-  line-height: 1;
-}
-ol, ul {
-  list-style: none;
-}
-blockquote, q {
-  quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-  content: '';
-  content: none;
-}
-table {
-  border-collapse: collapse;
-  border-spacing: 0;
-}
+/* reset css */
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+body {
+  line-height: 1;
+}
+ol, ul {
+  list-style: none;
+}
+blockquote, q {
+  quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}

package/hooks/useCalendarDateState.js

@@ -1,13 +1,19 @@
-import { useEffect, useState } from "react";
-import { calculerEcartSemaine, getDayHourly, getWeekDays } from "../lib/utils";
-function useCalendarDateState(date, weekOffset) {
-    const [calendarDateState, setCalendarDateState] = useState({ dailyHours: [], weekDays: [] });
-    useEffect(() => {
-        const weekOffsetByDate = calculerEcartSemaine(date);
-        const weekDays = getWeekDays(weekOffsetByDate || weekOffset || 0);
-        const dailyHours = getDayHourly(weekOffsetByDate || weekOffset || 0);
-        setCalendarDateState({ dailyHours: dailyHours, weekDays });
-    }, [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))
+            : 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;

package/hooks/useCalendarDateState.ts

@@ -1,24 +1,44 @@
 import { useEffect, useState } from "react";
-import { calculerEcartSemaine, getDayHourly, getWeekDays } from "../lib/utils";
-import { dailyHoursType, weekDaysType } from "../definitions";
+import {
+  calculerEcartSemaine,
+  getDateObjectInTimeZone,
+  getDayHourly,
+  getWeekDays,
+  saveTasksToLocalStorage,
+} from "../lib/utils";
+import {
+  dailyHoursType,
+  TasksType,
+  TimeZone,
+  weekDaysType,
+} from "../definitions";
 
-function useCalendarDateState(date: Date, weekOffset: number | undefined) {
+function useCalendarDateState(
+  date: Date,
+  weekOffset: number | undefined,
+  timeZone: TimeZone | undefined
+) {
   const [calendarDateState, setCalendarDateState] = useState<{
     weekDays: weekDaysType;
     dailyHours: dailyHoursType;
   }>({ dailyHours: [], weekDays: [] });
 
   useEffect(() => {
-  
-    const weekOffsetByDate = calculerEcartSemaine(date);
+    const weekOffsetByDate = timeZone
+      ? calculerEcartSemaine(getDateObjectInTimeZone(timeZone))
+      : calculerEcartSemaine(date);
+
     const weekDays = getWeekDays(weekOffsetByDate || weekOffset || 0);
     const dailyHours = getDayHourly(weekOffsetByDate || weekOffset || 0);
-    setCalendarDateState({ dailyHours: dailyHours, weekDays });
-    
+    const calData = {
+      dailyHours: dailyHours,
+      weekDays,
+    };
+
+    setCalendarDateState(calData);
   }, [date, weekOffset]);
 
   return { ...calendarDateState };
 }
 
 export default useCalendarDateState;
-

package/index.js

@@ -1,52 +1,70 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import "./style.css";
-import CalendarTable from "./components/CalendarTable";
-/**
- * Calendar component to display tasks and groups in a weekly view.
- *
- * @param {Object} props - The props for the Calendar component.
- * @param {React.CSSProperties} [props.style] - Additional styles for the calendar component.
- * @param {string} [props.className] - Additional class names for the calendar component.
- * @param {Array} props.groups - Array of group data to be displayed in the calendar.
- * @param {number} [props.weekOffset] - Offset for the week (e.g., -1 for last week, 0 for current week, 1 for next week).
- * @param {Date} props.date - The current date to display in the calendar.
- * @param {Function} [props.groupRender] - Custom render function for a group.
- * @param {Function} [props.dayRender] - Custom render function for a day.
- * @param {React.CSSProperties} [props.rowsStyle] - Additional styles for the rows.
- * @param {React.CSSProperties} [props.groupsColsStyle] - Additional styles for the group columns.
- * @param {React.CSSProperties} [props.daysColsStyle] - Additional styles for the day columns.
- * @param {Function} [props.addTaskRender] - Custom render function for the add task button.
- * @param {Function} [props.handleAddTask] - Handler function for adding a new task.
- * @param {string} [props.dayClassName] - Additional class names for the days.
- * @param {React.CSSProperties} [props.dayStyle] - Additional styles for the days.
- * @param {string} [props.groupClassName] - Additional class names for the groups.
- * @param {React.CSSProperties} [props.groupStyle] - Additional styles for the groups.
- * @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 {Array} props.tasks - Array of tasks to be displayed in the calendar.
- * @param {Function} [props.handleDragTask] - Handler function for dragging a task.
- * @param {Function} [props.handleDropTask] - Handler function for dropping a task.
- * @param {Function} [props.taskRender] - Custom render function for a task.
- * @param {Function} [props.groupsHeadRender] - Custom render function for the groups header.
- * @param {Function} [props.sumHoursRender] - Custom render function for the sum of hours.
- * @param {Function} [props.sumHoursHeadRender] - Custom render function for the sum of hours header.
- * @param {Function} [props.handleDragTaskEnd] - Handler function for ending the drag of a task.
- * @param {string} [props.rowsClassName] - Additional class names for the rows.
- * @param {string} [props.daysColsClassName] - Additional class names for the day columns.
- * @param {string} [props.sumHoursContainerClassName] - Additional class names for the sum hours container.
- * @param {React.CSSProperties} [props.sumHoursContainerStyle] - Additional styles for the sum hours container.
- * @param {string} [props.groupHeadContainerClassName] - Additional class names for the group head container.
- * @param {React.CSSProperties} [props.groupHeadContainerStyle] - Additional styles for the group head container.
- * @param {string} [props.groupsColsClassName] - Additional class names for the group columns.
- * @param {string} [props.taskContainerClassName] - Additional class names for the task container.
- * @param {React.CSSProperties} [props.taskContainerStyle] - Additional styles for the task container.
- * @param {string} [props.sumHoursHeadClassName] - Additional class names for the sum hours header.
- * @param {React.CSSProperties} [props.sumHoursHeadStyle] - Additional styles for the sum hours header.
- * @param {Function} [props.handleClickGroup] - Handler function for clicking a group.
- * @param {Function} [props.handleClickTask] - Handler function for clicking a task.
- * @returns {JSX.Element} The rendered Calendar component.
- */
-const Calendar = (props) => {
-    return (_jsx(CalendarTable, Object.assign({}, props)));
-};
-export default Calendar;
+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 };