react-weekly-planning 1.0.0

package/docs/styles/prettify-jsdoc.css

@@ -0,0 +1,111 @@
+/* JSDoc prettify.js theme */
+
+/* plain text */
+.pln {
+  color: #000000;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* string content */
+.str {
+  color: #006400;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a keyword */
+.kwd {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* a comment */
+.com {
+  font-weight: normal;
+  font-style: italic;
+}
+
+/* a type name */
+.typ {
+  color: #000000;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a literal value */
+.lit {
+  color: #006400;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* punctuation */
+.pun {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* lisp open bracket */
+.opn {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* lisp close bracket */
+.clo {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* a markup tag name */
+.tag {
+  color: #006400;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a markup attribute name */
+.atn {
+  color: #006400;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a markup attribute value */
+.atv {
+  color: #006400;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a declaration */
+.dec {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* a variable name */
+.var {
+  color: #000000;
+  font-weight: normal;
+  font-style: normal;
+}
+
+/* a function name */
+.fun {
+  color: #000000;
+  font-weight: bold;
+  font-style: normal;
+}
+
+/* Specify class=linenums on a pre to get line numbering */
+ol.linenums {
+  margin-top: 0;
+  margin-bottom: 0;
+}

package/docs/styles/prettify-tomorrow.css

@@ -0,0 +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 {
+  /* */ }

package/docs/styles/reset.css

@@ -0,0 +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;
+}

package/index.js

@@ -0,0 +1,224 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import "./style.css";
+import { getWeekDays, getDayHourly, calculerEcartSemaine, getSessionStorageRecordForDragAndDrop, sumHoursByGroups, millisecondsToDate, compareWeekOffset, } from "./lib/utils";
+const tableStyle = {
+    width: "100%",
+    height: "150px",
+    borderRadius: "0.5rem",
+    zIndex: 10,
+};
+const trStyle = {
+    color: "#0f5173",
+    fontWeight: "300",
+    position: "sticky",
+    top: 0,
+};
+const thStyle = {
+    color: "#0f5173",
+    paddingLeft: "5px",
+};
+const weekDayThStyle = {};
+const totalThStyle = {
+    width: "40px",
+    textAlign: "right",
+    paddingRight: "2px",
+};
+const tdStyle = {
+    height: "auto",
+    width: "150px",
+};
+const tableTrStyle = {
+    borderBottom: "1.5px solid #0f52737e",
+    // backgroundColor: "#f2f8fb",
+    padding: "2px",
+};
+const tableTdStyle = {
+    borderLeft: "0.74px solid rgba(198, 219, 225, 0.68)",
+    borderRight: "0.74px solid rgba(198, 219, 225, 0.68)",
+};
+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",
+};
+/**
+ * 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 = ({ style, className, groups, weekOffset, date, groupRender, dayRender, rowsStyle, groupsColsStyle, daysColsStyle, addTaskRender, handleAddTask, dayClassName, dayStyle, groupClassName, groupStyle, addTaskClassName, addTaskStyle, tasks, handleDragTask, handleDropTask, taskRender, groupsHeadRender, sumHoursRender, sumHoursHeadRender, handleDragTaskEnd, rowsClassName, daysColsClassName, sumHoursContainerClassName, sumHoursContainerStyle, groupHeadContainerClassName, groupHeadContainerStyle, groupsColsClassName, taskContainerClassName, taskContainerStyle, sumHoursHeadClassName, sumHoursHeadStyle, handleClickGroup, handleClickTask, }) => {
+    const weekOffsetByDate = calculerEcartSemaine(date);
+    const weekDays = getWeekDays(weekOffsetByDate || weekOffset || 0);
+    const dailyHours = getDayHourly(weekOffsetByDate || weekOffset || 0);
+    const handleDragOver = (event) => {
+        event.preventDefault();
+    };
+    return (_jsxs("table", { className: `${className}`, style: Object.assign(Object.assign({}, tableStyle), style), children: [_jsx("thead", { children: _jsxs("tr", { className: `${rowsClassName}`, style: Object.assign(Object.assign(Object.assign({}, trStyle), tableTrStyle), rowsStyle), children: [_jsx("th", { style: thStyle, children: _jsx(GroupsHeadContainer, { className: `${groupHeadContainerClassName}`, style: groupHeadContainerStyle, groupsHeadRender: groupsHeadRender }) }), weekDays.map((day, i) => (_jsx("th", { className: `${daysColsClassName}`, style: Object.assign(Object.assign({}, weekDayThStyle), daysColsStyle), children: _jsx(DayContainer, { style: dayStyle, className: dayClassName, dayIndex: i, dayRender: dayRender, day: day.day, dayOfTheMonth: day.dayOfTheMonth, dayMonth: day.dayMonth, dayYear: day.dayYear }) }, i))), _jsx("th", { style: totalThStyle, children: _jsx(SumHoursHead, { className: sumHoursHeadClassName, style: sumHoursHeadStyle, sumHoursHeadRender: sumHoursHeadRender }) })] }, "") }), _jsx("tbody", { children: groups === null || groups === void 0 ? void 0 : groups.map((group, i) => (_jsxs("tr", { className: `${rowsClassName}`, style: Object.assign(Object.assign({}, tableTrStyle), rowsStyle), children: [_jsx("td", { className: `${groupsColsClassName}`, style: Object.assign(Object.assign(Object.assign({}, tdStyle), tableTdStyle), groupsColsStyle), children: _jsx(GroupContainer, { style: groupStyle, className: groupClassName, groupRender: groupRender, currentGroup: group, handleClickGroup: handleClickGroup }) }, i), dailyHours.map((_, positionDay) => (_jsx("td", { style: Object.assign({ width: "8vw" }, tableTdStyle), onDragOver: handleDragOver, onDrop: (event) => {
+                                if (!handleDropTask || !tasks)
+                                    return;
+                                const dropInfo = getSessionStorageRecordForDragAndDrop(tasks, positionDay, group.id);
+                                if (!dropInfo)
+                                    return;
+                                handleDropTask(event, dropInfo.taskDropStart, dropInfo.taskDropEnd, dropInfo.taskDropDate, group.id, positionDay, dropInfo.newTask, dropInfo.newTasks);
+                            }, id: `td-${group.id}day-i`, children: _jsxs("div", { style: {
+                                    display: "flex",
+                                    width: "100%",
+                                    height: "100%",
+                                    flexDirection: "column",
+                                    padding: "5px",
+                                }, children: [_jsx(_Fragment, { children: tasks === null || tasks === void 0 ? void 0 : tasks.filter((task) => task.dayIndex === positionDay &&
+                                            task.groupId === group.id &&
+                                            compareWeekOffset(date, weekOffset || 0, task.taskDate)).sort((a, b) => a.taskStart - b.taskStart).map((task, taskKey) => {
+                                            return (_jsx(TaskContainer, { handleDragTask: handleDragTask, taskRender: taskRender, handleDragTaskEnd: handleDragTaskEnd, style: taskContainerStyle, className: `${taskContainerClassName}`, currentTask: task, handleClickTask: handleClickTask }, `${taskKey} task`));
+                                        }) }), _jsx(AddTask, { addTaskStyle: addTaskStyle, addTaskClassName: addTaskClassName, groupId: group.id, dayInfo: dailyHours[positionDay], addTaskRender: addTaskRender, handleAddTask: handleAddTask })] }, positionDay) }, `td-${group.id}day-i${positionDay}`))), _jsx("td", { children: _jsx(SumHoursContainer, { groupId: group.id, tasks: tasks, weekOffset: weekOffset || 0, calendarDate: date, sumHoursRender: sumHoursRender, sumHoursByGroups: sumHoursByGroups(group.id, tasks, weekOffset || 0, date), className: sumHoursContainerClassName, style: sumHoursContainerStyle }) }, `${i}sumHours`)] }, `${i} tr`))) })] }));
+};
+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" }));
+};
+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 }));
+};
+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}` }));
+};
+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 })] }));
+};
+const AddTask = ({ groupId, handleAddTask, addTaskRender, dayInfo, addTaskStyle, addTaskClassName, }) => {
+    if (addTaskRender) {
+        return (_jsx(_Fragment, { children: addTaskRender({
+                groupId,
+                dayInfo,
+            }) }));
+    }
+    const handleClick = () => {
+        if (!handleAddTask)
+            return;
+        handleAddTask(groupId, dayInfo);
+    };
+    return (_jsx("div", { onClick: handleClick, style: addTaskStyle, className: `addPlanStyle ${addTaskClassName}`, children: "+" }));
+};
+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}` })] }));
+};
+const GroupsHeadContainer = ({ groupsHeadRender, style, className, }) => {
+    if (groupsHeadRender) {
+        return _jsx(_Fragment, { children: groupsHeadRender() });
+    }
+    return (_jsx("div", { className: `${className}`, style: style, children: "WeeklyCalendar" }));
+};
+export const updateCalendarDateWithOffset = (offset, calendarDate) => {
+    const newDate = new Date(calendarDate);
+    newDate.setDate(newDate.getDate() + offset);
+    return newDate;
+};
+export const updateOffsetWithDateCalendar = (calendarDate) => {
+    return calculerEcartSemaine(calendarDate);
+};
+export const millisecondsToHours = (milliseconds) => {
+    return millisecondsToDate(milliseconds).formattedDate;
+};
+export default Calendar;