react-weekly-planning 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +160 -0
  3. package/__tests__/page.test.js +46 -0
  4. package/__tests__/page.test.tsx +57 -0
  5. package/contexts/CalendarContext.js +12 -0
  6. package/contexts/CalendarContext.tsx +34 -0
  7. package/definition.txt +318 -0
  8. package/definitions/index.js +1 -0
  9. package/definitions/index.ts +446 -0
  10. package/docs/global.html +4983 -0
  11. package/docs/index.html +473 -0
  12. package/docs/index.ts.html +567 -0
  13. package/docs/scripts/app.min.js +1 -0
  14. package/docs/scripts/linenumber.js +26 -0
  15. package/docs/scripts/search.js +39 -0
  16. package/docs/styles/app.min.css +1 -0
  17. package/docs/styles/iframe.css +13 -0
  18. package/docs/styles/prettify-jsdoc.css +111 -0
  19. package/docs/styles/prettify-tomorrow.css +132 -0
  20. package/docs/styles/reset.css +44 -0
  21. package/index.js +224 -0
  22. package/index.tsx +591 -0
  23. package/jest.config.js +9 -0
  24. package/jest.config.ts +10 -0
  25. package/jsdoc.json +26 -0
  26. package/lib/utils.js +437 -0
  27. package/lib/utils.ts +598 -0
  28. package/myJsDoc.js +0 -0
  29. package/out/index.html +129 -0
  30. package/out/scripts/app.min.js +1 -0
  31. package/out/scripts/linenumber.js +26 -0
  32. package/out/scripts/search.js +39 -0
  33. package/out/styles/app.min.css +1 -0
  34. package/out/styles/iframe.css +13 -0
  35. package/out/styles/prettify-jsdoc.css +111 -0
  36. package/out/styles/prettify-tomorrow.css +132 -0
  37. package/out/styles/reset.css +44 -0
  38. package/package.json +45 -0
  39. package/style.css +51 -0
package/docs/index.html ADDED
@@ -0,0 +1,473 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+
6
+ <meta charset="utf-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1">
8
+ <title> Home</title>
9
+
10
+ <script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
11
+ <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
12
+ <script src="./build/entry.js"></script>
13
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
14
+ <!--[if lt IE 9]>
15
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
16
+ <![endif]-->
17
+ <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700|Inconsolata,700" rel="stylesheet">
18
+ <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
19
+ <link type="text/css" rel="stylesheet" href="https://jmblog.github.io/color-themes-for-google-code-prettify/themes/tomorrow-night.min.css">
20
+ <link type="text/css" rel="stylesheet" href="styles/app.min.css">
21
+ <link type="text/css" rel="stylesheet" href="styles/iframe.css">
22
+ <link type="text/css" rel="stylesheet" href="">
23
+ <script async defer src="https://buttons.github.io/buttons.js"></script>
24
+
25
+
26
+ </head>
27
+
28
+
29
+
30
+ <body class="layout small-header">
31
+ <div id="stickyNavbarOverlay"></div>
32
+
33
+
34
+ <div class="top-nav">
35
+ <div class="inner">
36
+ <a id="hamburger" role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
37
+ <span aria-hidden="true"></span>
38
+ <span aria-hidden="true"></span>
39
+ <span aria-hidden="true"></span>
40
+ </a>
41
+ <div class="logo">
42
+
43
+
44
+ <a href="index.html">
45
+ <h1 class="navbar-item">Calendar</h1>
46
+ </a>
47
+
48
+ </div>
49
+ <div class="menu">
50
+
51
+ <div class="navigation">
52
+ <a
53
+ href="index.html"
54
+ class="link"
55
+ >
56
+ Documentation
57
+ </a>
58
+
59
+
60
+
61
+ </div>
62
+ </div>
63
+ </div>
64
+ </div>
65
+ <div id="main">
66
+ <div
67
+ class="sidebar "
68
+ id="sidebarNav"
69
+ >
70
+
71
+ <nav>
72
+
73
+ <h2><a href="index.html">Documentation</a></h2><div class="category"><h3><a href="global.html">Global</a></h3></div>
74
+
75
+ </nav>
76
+ </div>
77
+ <div class="core" id="main-content-wrapper">
78
+ <div class="content">
79
+ <header class="page-title">
80
+ <p></p>
81
+ <h1>Home</h1>
82
+ </header>
83
+
84
+
85
+
86
+
87
+
88
+
89
+
90
+ <h3> </h3>
91
+
92
+
93
+
94
+
95
+
96
+
97
+
98
+
99
+
100
+
101
+
102
+
103
+
104
+
105
+
106
+ <section>
107
+ <article><h2>License</h2>
108
+ <p>This project is licensed under the MIT License - see the <a href="LICENSE">LICENSE</a> file for details.</p>
109
+ <h3>Detailed Description and Use Cases</h3>
110
+ <h4><code>weekOffset</code></h4>
111
+ <ul>
112
+ <li>
113
+ <p><strong>Description</strong>: This prop sets the offset for the week being displayed in the calendar.</p>
114
+ </li>
115
+ <li>
116
+ <p><strong>Type</strong>: <code>number</code></p>
117
+ </li>
118
+ <li>
119
+ <p><strong>Use Case</strong>: If you want to show the previous week's calendar, you can set <code>weekOffset</code> to <code>-7</code>. For the next week, set it to <code>7</code>. For the current week, set it to <code>0</code>.</p>
120
+ <p><strong>Example</strong>:</p>
121
+ <pre class="prettyprint source lang-jsx"><code>&lt;Calendar weekOffset={-7} ... />
122
+ </code></pre>
123
+ </li>
124
+ </ul>
125
+ <h4><code>groups</code></h4>
126
+ <ul>
127
+ <li><strong>Description</strong>: This prop is an array of group data to be displayed in the calendar.</li>
128
+ <li><strong>Type</strong>: <code>GroupFeildsType[]</code></li>
129
+ <li><strong>Use Case</strong>: Use this prop to display different groups in the calendar. Each group can have an id, label, image URL, and other custom fields.
130
+ The &quot;id&quot; field for each group is required
131
+ <strong>Example</strong>:<pre class="prettyprint source lang-jsx"><code>const groups = [
132
+ { id: '1', label: 'Group 1', imageUrl: 'url1', ... },
133
+ { id: '2', label: 'Group 2', imageUrl: 'url2', ... }
134
+ ];
135
+
136
+ &lt;Calendar groups={groups} ... />
137
+ </code></pre>
138
+ </li>
139
+ </ul>
140
+ <p>It is possible to use either Weekoffset or Date, or even both simultaneously.</p>
141
+ <h4><code>date</code></h4>
142
+ <ul>
143
+ <li>
144
+ <p><strong>Description</strong>: This prop sets the current date to display in the calendar.</p>
145
+ </li>
146
+ <li>
147
+ <p><strong>Type</strong>: <code>Date</code></p>
148
+ </li>
149
+ <li>
150
+ <p><strong>Use Case</strong>: Use this prop to set the focus date of the calendar. It helps in aligning the calendar view to a specific date.</p>
151
+ <p><strong>Example</strong>:</p>
152
+ <pre class="prettyprint source lang-jsx"><code>const currentDate = new Date();
153
+
154
+ &lt;Calendar date={currentDate} ... />
155
+ </code></pre>
156
+ </li>
157
+ </ul>
158
+ <h4><code>tasks</code></h4>
159
+ <ul>
160
+ <li><strong>Description</strong>: This prop is an array of tasks to be displayed in the calendar.</li>
161
+ <li><strong>Type</strong>: <code>TasksType</code></li>
162
+ <li><strong>Use Case</strong>: 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.
163
+ taskId, taskStart taskEnd, task, taskDate, groupId, dayIndex
164
+ <strong>Example</strong>:<pre class="prettyprint source lang-jsx"><code>const tasks = [
165
+ { taskId: '1', taskStart:'Time in milliseconde', taskEnd:'Time in milliseconde', task: 'Task 1', taskDate: new Date(), groupId: '1', dayIndex: 0, ... }
166
+ ];
167
+
168
+ &lt;Calendar tasks={tasks} ... />
169
+ </code></pre>
170
+ </li>
171
+ </ul>
172
+ <hr>
173
+ <hr>
174
+ <h2><code>CalendarPropsType</code></h2>
175
+ <p>Props for the Calendar component.</p>
176
+ <table>
177
+ <thead>
178
+ <tr>
179
+ <th>Prop Name</th>
180
+ <th>Type</th>
181
+ <th>Description</th>
182
+ </tr>
183
+ </thead>
184
+ <tbody>
185
+ <tr>
186
+ <td><code>weekOffset</code></td>
187
+ <td>number</td>
188
+ <td>Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week).</td>
189
+ </tr>
190
+ <tr>
191
+ <td><code>groups</code></td>
192
+ <td>GroupFeildsType[]</td>
193
+ <td>Array of group data to be displayed in the calendar.</td>
194
+ </tr>
195
+ <tr>
196
+ <td><code>className</code></td>
197
+ <td>string</td>
198
+ <td>Additional class names for the calendar component.</td>
199
+ </tr>
200
+ <tr>
201
+ <td><code>style</code></td>
202
+ <td>React.CSSProperties | undefined</td>
203
+ <td>Additional styles for the calendar component.</td>
204
+ </tr>
205
+ <tr>
206
+ <td><code>date</code></td>
207
+ <td>Date</td>
208
+ <td>The current date to display in the calendar.</td>
209
+ </tr>
210
+ <tr>
211
+ <td><code>groupRender</code></td>
212
+ <td>({ currentGroup }: { currentGroup: GroupFeildsType }) =&gt; React.ReactNode</td>
213
+ <td>Custom render function for a group.</td>
214
+ </tr>
215
+ <tr>
216
+ <td><code>dayRender</code></td>
217
+ <td>({ dayIndex, day, dayOfTheMonth, dayMonth, dayYear }: { dayIndex: number; day: string; dayOfTheMonth: number; dayMonth: string; dayYear: number; }) =&gt; React.ReactNode</td>
218
+ <td>Custom render function for a day.</td>
219
+ </tr>
220
+ <tr>
221
+ <td><code>taskRender</code></td>
222
+ <td>({ currentTask, handleDragTask }: { currentTask: TaskFeildsType; handleDragTask?: (event: React.DragEvent<HTMLDivElement>, currentTask: TaskFeildsType) =&gt; void; }) =&gt; React.ReactNode</td>
223
+ <td>Custom render function for a task.</td>
224
+ </tr>
225
+ <tr>
226
+ <td><code>rowsStyle</code></td>
227
+ <td>React.CSSProperties | undefined</td>
228
+ <td>Additional styles for the rows.</td>
229
+ </tr>
230
+ <tr>
231
+ <td><code>rowsClassName</code></td>
232
+ <td>string</td>
233
+ <td>Additional class names for the rows.</td>
234
+ </tr>
235
+ <tr>
236
+ <td><code>groupsColsStyle</code></td>
237
+ <td>React.CSSProperties | undefined</td>
238
+ <td>Additional styles for the group columns.</td>
239
+ </tr>
240
+ <tr>
241
+ <td><code>groupsColsClassName</code></td>
242
+ <td>string</td>
243
+ <td>Additional class names for the group columns.</td>
244
+ </tr>
245
+ <tr>
246
+ <td><code>daysColsStyle</code></td>
247
+ <td>React.CSSProperties | undefined</td>
248
+ <td>Additional styles for the day columns.</td>
249
+ </tr>
250
+ <tr>
251
+ <td><code>daysColsClassName</code></td>
252
+ <td>string</td>
253
+ <td>Additional class names for the day columns.</td>
254
+ </tr>
255
+ <tr>
256
+ <td><code>addTaskClassName</code></td>
257
+ <td>string</td>
258
+ <td>Additional class names for the add task button.</td>
259
+ </tr>
260
+ <tr>
261
+ <td><code>addTaskStyle</code></td>
262
+ <td>React.CSSProperties | undefined</td>
263
+ <td>Additional styles for the add task button.</td>
264
+ </tr>
265
+ <tr>
266
+ <td><code>groupClassName</code></td>
267
+ <td>string</td>
268
+ <td>Additional class names for the groups.</td>
269
+ </tr>
270
+ <tr>
271
+ <td><code>groupStyle</code></td>
272
+ <td>React.CSSProperties | undefined</td>
273
+ <td>Additional styles for the groups.</td>
274
+ </tr>
275
+ <tr>
276
+ <td><code>dayClassName</code></td>
277
+ <td>string</td>
278
+ <td>Additional class names for the days.</td>
279
+ </tr>
280
+ <tr>
281
+ <td><code>dayStyle</code></td>
282
+ <td>React.CSSProperties | undefined</td>
283
+ <td>Additional styles for the days.</td>
284
+ </tr>
285
+ <tr>
286
+ <td><code>taskContainerStyle</code></td>
287
+ <td>React.CSSProperties | undefined</td>
288
+ <td>Additional styles for the task container.</td>
289
+ </tr>
290
+ <tr>
291
+ <td><code>taskContainerClassName</code></td>
292
+ <td>string</td>
293
+ <td>Additional class names for the task container.</td>
294
+ </tr>
295
+ <tr>
296
+ <td><code>groupHeadContainerStyle</code></td>
297
+ <td>React.CSSProperties | undefined</td>
298
+ <td>Additional styles for the group head container.</td>
299
+ </tr>
300
+ <tr>
301
+ <td><code>groupHeadContainerClassName</code></td>
302
+ <td>string</td>
303
+ <td>Additional class names for the group head container.</td>
304
+ </tr>
305
+ <tr>
306
+ <td><code>sumHoursContainerStyle</code></td>
307
+ <td>React.CSSProperties | undefined</td>
308
+ <td>Additional styles for the sum hours container.</td>
309
+ </tr>
310
+ <tr>
311
+ <td><code>sumHoursContainerClassName</code></td>
312
+ <td>string</td>
313
+ <td>Additional class names for the sum hours container.</td>
314
+ </tr>
315
+ <tr>
316
+ <td><code>sumHoursHeadStyle</code></td>
317
+ <td>React.CSSProperties | undefined</td>
318
+ <td>Additional styles for the sum hours header.</td>
319
+ </tr>
320
+ <tr>
321
+ <td><code>sumHoursHeadClassName</code></td>
322
+ <td>string</td>
323
+ <td>Additional class names for the sum hours header.</td>
324
+ </tr>
325
+ <tr>
326
+ <td><code>handleAddTask</code></td>
327
+ <td>(groupId: string, dayInfo: dayInfoType) =&gt; void</td>
328
+ <td>Handler function for adding a new task.</td>
329
+ </tr>
330
+ <tr>
331
+ <td><code>addTaskRender</code></td>
332
+ <td>({ groupId, dayInfo }: { groupId: string; dayInfo: dayInfoType }) =&gt; React.ReactNode</td>
333
+ <td>Custom render function for adding a task.</td>
334
+ </tr>
335
+ <tr>
336
+ <td><code>tasks</code></td>
337
+ <td>TasksType</td>
338
+ <td>Array of tasks to be displayed in the calendar.</td>
339
+ </tr>
340
+ <tr>
341
+ <td><code>handleDragTask</code></td>
342
+ <td>(event: React.DragEvent<HTMLDivElement>, currentTask: TaskFeildsType) =&gt; void</td>
343
+ <td>Handler function for dragging a task.</td>
344
+ </tr>
345
+ <tr>
346
+ <td><code>handleDropTask</code></td>
347
+ <td>(event: React.DragEvent<HTMLTableDataCellElement>, taskStart: number, taskEnd: number, taskDate: Date, groupId: string, dayIndex: number, newTask: TaskFeildsType, newTasks: TasksType) =&gt; void</td>
348
+ <td>Handler function for dropping a task.</td>
349
+ </tr>
350
+ <tr>
351
+ <td><code>handleDragTaskEnd</code></td>
352
+ <td>(event: React.DragEvent<HTMLDivElement>) =&gt; void</td>
353
+ <td>Handler function for ending the drag of a task.</td>
354
+ </tr>
355
+ <tr>
356
+ <td><code>groupsHeadRender</code></td>
357
+ <td>() =&gt; React.ReactNode</td>
358
+ <td>Custom render function for the groups header.</td>
359
+ </tr>
360
+ <tr>
361
+ <td><code>sumHoursRender</code></td>
362
+ <td>({ groupId, tasks, weekOffset, calendarDate, sumHoursByGroups }: { groupId: string; tasks: TasksType; weekOffset: number; calendarDate: Date; sumHoursByGroups: number; }) =&gt; React.ReactNode</td>
363
+ <td>Custom render function for the sum of hours.</td>
364
+ </tr>
365
+ <tr>
366
+ <td><code>sumHoursHeadRender</code></td>
367
+ <td>() =&gt; React.ReactNode</td>
368
+ <td>Custom render function for the sum of hours header.</td>
369
+ </tr>
370
+ <tr>
371
+ <td><code>handleClickTask</code></td>
372
+ <td>(currentTask: TaskFeildsType) =&gt; void</td>
373
+ <td>Handler function for clicking a task.</td>
374
+ </tr>
375
+ <tr>
376
+ <td><code>handleClickGroup</code></td>
377
+ <td>(currentGroup: GroupFeildsType) =&gt; void</td>
378
+ <td>Handler function for clicking a group.</td>
379
+ </tr>
380
+ </tbody>
381
+ </table>
382
+ <hr>
383
+ <hr>
384
+ <h2>Additional Functions</h2>
385
+ <h3><code>updateCalendarDateWithOffset</code></h3>
386
+ <ul>
387
+ <li>
388
+ <p><strong>Description</strong>: Updates the calendar date based on the week offset.</p>
389
+ </li>
390
+ <li>
391
+ <p><strong>Parameters</strong>:</p>
392
+ <ul>
393
+ <li><code>offset</code> (number): This represents the difference in days between the current date and the same date from the previous week. A shift of 7 days takes us to the following week, while a shift of -7 days takes us back to last week.</li>
394
+ <li><code>calendarDate</code> (Date): The current calendar date.</li>
395
+ </ul>
396
+ </li>
397
+ <li>
398
+ <p><strong>Returns</strong>: A new <code>Date</code> object with the updated date.</p>
399
+ <p><strong>Example</strong>:</p>
400
+ <pre class="prettyprint source lang-javascript"><code>const updatedDate = updateCalendarDateWithOffset(7, new Date());
401
+ console.log(updatedDate); // Logs the date one week ahead
402
+ </code></pre>
403
+ </li>
404
+ </ul>
405
+ <h3><code>updateOffsetWithDateCalendar</code></h3>
406
+ <ul>
407
+ <li>
408
+ <p><strong>Description</strong>: Calculates the week offset from a given calendar date.</p>
409
+ </li>
410
+ <li>
411
+ <p><strong>Parameters</strong>:</p>
412
+ <ul>
413
+ <li><code>calendarDate</code> (Date): The calendar date.</li>
414
+ </ul>
415
+ </li>
416
+ <li>
417
+ <p><strong>Returns</strong>: The calculated week offset.</p>
418
+ <p><strong>Example</strong>:</p>
419
+ <pre class="prettyprint source lang-javascript"><code>const offset = updateOffsetWithDateCalendar(new Date());
420
+ console.log(offset); // Logs the week offset for the given date
421
+ </code></pre>
422
+ </li>
423
+ </ul>
424
+ <h3><code>millisecondsToHours</code></h3>
425
+ <ul>
426
+ <li>
427
+ <p><strong>Description</strong>: Converts milliseconds to a formatted hour string.</p>
428
+ </li>
429
+ <li>
430
+ <p><strong>Parameters</strong>:</p>
431
+ <ul>
432
+ <li><code>milliseconds</code> (number): The time duration in milliseconds.</li>
433
+ </ul>
434
+ </li>
435
+ <li>
436
+ <p><strong>Returns</strong>: A formatted date string.</p>
437
+ <p><strong>Example</strong>:</p>
438
+ <pre class="prettyprint source lang-javascript"><code>const formattedTime = millisecondsToHours(1716905215397);
439
+ console.log(formattedTime); // Logs the formatted time for 14h06
440
+ </code></pre>
441
+ </li>
442
+ </ul>
443
+ <hr></article>
444
+ </section>
445
+
446
+
447
+
448
+
449
+
450
+
451
+ </div>
452
+
453
+ <footer class="footer">
454
+ <div class="content has-text-centered">
455
+ <p>Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 4.0.3</a></p>
456
+ <p class="sidebar-created-by">
457
+ <a href="https://github.com/SoftwareBrothers/better-docs" target="_blank">BetterDocs theme</a> provided with <i class="fas fa-heart"></i> by
458
+ <a href="http://softwarebrothers.co" target="_blank">SoftwareBrothers - JavaScript Development Agency</a>
459
+ </p>
460
+ </div>
461
+ </footer>
462
+
463
+ </div>
464
+ <div id="side-nav" class="side-nav">
465
+ </div>
466
+ </div>
467
+ <script src="scripts/app.min.js"></script>
468
+ <script>PR.prettyPrint();</script>
469
+ <script src="scripts/linenumber.js"> </script>
470
+
471
+
472
+ </body>
473
+ </html>