react-weekly-planning 1.0.29 → 1.0.30

package/out/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/out/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/package.json

@@ -1,71 +1,81 @@
-{
-  "name": "react-weekly-planning",
-  "version": "1.0.29",
-  "main": "index.js",
-  "scripts": {
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "build": "tsc",
-    "doc": "jsdoc -c jsdoc.json"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Yvesmorel/react-pweekly-planning.git"
-  },
-  "homepage": "https://github.com/Yvesmorel/react-pweekly-planning.git#readme",
-  "bugs": {
-    "url": "https://github.com/Yvesmorel/react-pweekly-planning/issues"
-  },
-  "keywords": [
-    "react",
-    "react-weekly-planning",
-    "schedule customizable",
-    "calendar",
-    "planning",
-    "weekly",
-    "task management",
-    "group tasks",
-    "schedule",
-    "event planning",
-    "date picker",
-    "week offset",
-    "calendar component",
-    "React calendar",
-    "task scheduler",
-    "weekly planning",
-    "productivity"
-  ],
-  "author": "Kacou Yao Yves Morel",
-  "license": "MIT",
-  "description": "react-weekly-planning provides a React component for weekly planning. Easily set up and manage a weekly schedule with customizable tasks, groups and views.",
-  "dependencies": {
-    "@babel/types": "^7.24.5",
-    "@types/babel__generator": "^7.6.8",
-    "moment": "^2.30.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "sass": "^1.77.2",
-    "ts-node": "^10.9.2"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/preset-env": "^7.24.5",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@testing-library/jest-dom": "^6.4.5",
-    "@testing-library/react": "^15.0.7",
-    "@types/babel__core": "^7.20.5",
-    "@types/jest": "^29.5.12",
-    "@types/react": "^18.3.2",
-    "@types/react-dom": "^18.3.0",
-    "babel-jest": "^29.7.0",
-    "better-docs": "^2.7.3",
-    "docdash": "^2.0.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "react-test-renderer": "^18.3.1",
-    "tailwindcss": "^3.4.3",
-    "ts-jest": "^29.1.3",
-    "typescript": "^5.4.5"
-  }
-}
+{
+  "name": "react-weekly-planning",
+  "version": "1.0.30",
+  "main": "index.js",
+  "scripts": {
+    "test": "jest --env=jsdom",
+    "test:watch": "jest --watch",
+    "build": "tsc",
+    "doc": "jsdoc -c jsdoc.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Yvesmorel/react-pweekly-planning.git"
+  },
+  "homepage": "https://github.com/Yvesmorel/react-pweekly-planning.git#readme",
+  "bugs": {
+    "url": "https://github.com/Yvesmorel/react-pweekly-planning/issues"
+  },
+  "keywords": [
+    "react",
+    "react-weekly-planning",
+    "schedule customizable",
+    "calendar",
+    "planning",
+    "weekly",
+    "task management",
+    "group tasks",
+    "schedule",
+    "event planning",
+    "date picker",
+    "week offset",
+    "calendar component",
+    "React calendar",
+    "task scheduler",
+    "weekly planning",
+    "productivity"
+  ],
+  "author": "Kacou Yao Yves Morel",
+  "license": "MIT",
+  "description": "react-weekly-planning provides a React component for weekly planning. Easily set up and manage a weekly schedule with customizable tasks, groups and views.",
+  "dependencies": {
+    "@babel/types": "^7.24.5",
+    "@types/babel__generator": "^7.6.8",
+    "axios": "^1.7.9",
+    "dayjs": "^1.11.13",
+    "ical": "^0.8.0",
+    "ics-to-json": "^2.0.2",
+    "moment": "^2.30.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-use-search": "^0.3.2",
+    "react-window": "^1.8.11",
+    "sass": "^1.77.2",
+    "ts-node": "^10.9.2",
+    "uuid": "^11.0.5"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.7",
+    "@types/babel__core": "^7.20.5",
+    "@types/ical": "^0.8.3",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@types/react-window": "^1.8.8",
+    "babel-jest": "^29.7.0",
+    "better-docs": "^2.7.3",
+    "docdash": "^2.0.2",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react-test-renderer": "^18.3.1",
+    "tailwindcss": "^3.4.3",
+    "ts-jest": "^29.1.3",
+    "typescript": "^5.4.5"
+  }
+}

package/style.css

@@ -23,7 +23,7 @@
   justify-content: center;
   column-gap: 10px;
   flex-direction: column;
-  height: 60px;
+  height: auto;
   border-left: 5px solid #457993;
   background-color: #f4ffff;
   color: #457993;
@@ -32,6 +32,8 @@
   margin-bottom: 5px;
   font-size: 13px;
   overflow: auto;
+  padding: 2px;
+  z-index: 10;
 }
 
 .tasklabel {
@@ -49,15 +51,16 @@
   margin-left: 5px;
 }
 
-.planningCalendar{
+.planningCalendar {
   width: 100%;
   height: 150px;
   border-radius: 0.5rem;
   z-index: 10;
 }
-.planningCalendar .dayTh{
+
+.planningCalendar .dayTh {
   color: #0f5173;
-  padding-left: 5px
+  padding-left: 5px;
 }
 .planningCalendar .totalTh {
   color: #0f5173;
@@ -76,3 +79,22 @@
   border-bottom: 1.5px solid #0f52737e;
   padding: 2px;
 }
+.planningCalendar tr:nth-child(1){
+  z-index: 200;
+}
+
+.CalendarTableForDay {
+  display: flex;
+  gap: 10px;
+  width: 100vw;
+  height: auto;
+}
+
+.CalendarTableForDayTasksContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  padding: 10px;
+  position: relative;
+}

package/components/CalendarTable.js

@@ -1,48 +0,0 @@
-"use client";
-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, useCallback, useEffect } from "react";
-import useCalendarDateState from "../hooks/useCalendarDateState";
-function CalendarTable(props) {
-    var _a;
-    const { dailyHours, weekDays } = useCalendarDateState(props.date, props.weekOffset);
-    const handleDragOver = useCallback((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", 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", 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.groupStyle, className: props.groupClassName, groupRender: props.groupRender, currentGroup: group, handleClickGroup: props.handleClickGroup }) }, i), dailyHours.map((_, positionDay) => {
-                            var _a;
-                            return (_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`, children: _jsxs("div", { style: {
-                                        display: "flex",
-                                        width: "100%",
-                                        height: "100%",
-                                        flexDirection: "column",
-                                        padding: "5px",
-                                    }, children: [_jsx(_Fragment, { children: (_a = props.tasks) === null || _a === void 0 ? void 0 : _a.filter((task) => task.dayIndex === positionDay &&
-                                                task.groupId === group.id &&
-                                                compareWeekOffset(props.date, props.weekOffset || 0, task.taskDate)).sort((a, b) => a.taskStart - b.taskStart).map((task, taskKey) => {
-                                                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`));
-                                            }) }), _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", { 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), className: props.sumHoursContainerClassName, style: props.sumHoursContainerStyle }) }, `${i}sumHours`)] }, `${i} tr`))) })] }));
-}
-export default memo(CalendarTable, (prevProps, nextProps) => prevProps.tasks === nextProps.tasks &&
-    prevProps.date === nextProps.date &&
-    prevProps.groups === nextProps.groups &&
-    prevProps.weekOffset === nextProps.weekOffset);