react-weekly-planning 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Kacou Yao Yves Morel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,160 @@
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+
+### Detailed Description and Use Cases
+
+#### `weekOffset`
+
+- **Description**: This prop sets the offset for the week being displayed in the calendar.
+- **Type**: `number`
+- **Use Case**: If you want to show the previous week's calendar, you can set `weekOffset` to `-7`. For the next week, set it to `7`. For the current week, set it to `0`.
+
+  **Example**:
+  ```jsx
+  <Calendar weekOffset={-7} ... />
+  ```
+
+#### `groups`
+
+- **Description**: This prop is an array of group data to be displayed in the calendar.
+- **Type**: `GroupFeildsType[]`
+- **Use Case**: Use this prop to display different groups in the calendar. Each group can have an id, label, image URL, and other custom fields.
+The "id" field for each group is required
+  **Example**:
+  ```jsx
+  const groups = [
+    { id: '1', label: 'Group 1', imageUrl: 'url1', ... },
+    { id: '2', label: 'Group 2', imageUrl: 'url2', ... }
+  ];
+
+  <Calendar groups={groups} ... />
+  ```
+It is possible to use either Weekoffset or Date, or even both simultaneously.
+#### `date`
+
+- **Description**: This prop sets the current date to display in the calendar.
+- **Type**: `Date`
+- **Use Case**: Use this prop to set the focus date of the calendar. It helps in aligning the calendar view to a specific date.
+
+  **Example**:
+  ```jsx
+  const currentDate = new Date();
+
+  <Calendar date={currentDate} ... />
+  ```
+
+#### `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} ... />
+  ```
+
+---
+---
+
+## `CalendarPropsType`
+
+Props for the Calendar component.
+
+
+| Prop Name                    | Type                                                                                  | Description                                                                                       |
+|------------------------------|---------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------|
+| `weekOffset`                 | number                                                                                | Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week).                |
+| `groups`                     | GroupFeildsType[]                                                                     | Array of group data to be displayed in the calendar.                                              |
+| `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.                                                      |
+| `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; handleDragTask?: (event: React.DragEvent<HTMLDivElement>, currentTask: TaskFeildsType) => void; }) => React.ReactNode | Custom render function for a task. |
+| `rowsStyle`                  | React.CSSProperties \| undefined                                                      | Additional styles for the rows.                                                                   |
+| `rowsClassName`              | string                                                                                | Additional class names for the rows.                                                              |
+| `groupsColsStyle`            | React.CSSProperties \| undefined                                                      | Additional styles for the group columns.                                                          |
+| `groupsColsClassName`        | string                                                                                | Additional class names for the group columns.                                                     |
+| `daysColsStyle`              | React.CSSProperties \| undefined                                                      | Additional styles for the day columns.                                                            |
+| `daysColsClassName`          | string                                                                                | Additional class names for the day columns.                                                       |
+| `addTaskClassName`           | string                                                                                | Additional class names for the add task button.                                                   |
+| `addTaskStyle`               | React.CSSProperties \| undefined                                                      | Additional styles for the add task button.                                                        |
+| `groupClassName`             | string                                                                                | Additional class names for the groups.                                                            |
+| `groupStyle`                 | React.CSSProperties \| undefined                                                      | Additional styles for the groups.                                                                 |
+| `dayClassName`               | string                                                                                | Additional class names for the days.                                                              |
+| `dayStyle`                   | React.CSSProperties \| undefined                                                      | Additional styles for the days.                                                                   |
+| `taskContainerStyle`         | React.CSSProperties \| undefined                                                      | Additional styles for the task container.                                                         |
+| `taskContainerClassName`     | string                                                                                | Additional class names for the task container.                                                    |
+| `groupHeadContainerStyle`    | React.CSSProperties \| undefined                                                      | Additional styles for the group head container.                                                   |
+| `groupHeadContainerClassName`| string                                                                                | Additional class names for the group head container.                                              |
+| `sumHoursContainerStyle`     | React.CSSProperties \| undefined                                                      | Additional styles for the sum hours container.                                                    |
+| `sumHoursContainerClassName` | string                                                                                | Additional class names for the sum hours container.                                               |
+| `sumHoursHeadStyle`          | React.CSSProperties \| undefined                                                      | Additional styles for the sum hours header.                                                       |
+| `sumHoursHeadClassName`      | string                                                                                | Additional class names for the sum hours header.                                                  |
+| `handleAddTask`              | (groupId: string, dayInfo: dayInfoType) => void                                       | Handler function for adding a new task.                                                           |
+| `addTaskRender`              | ({ groupId, dayInfo }: { groupId: string; 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.                                                   |
+| `groupsHeadRender`           | () => React.ReactNode                                                                 | Custom render function for the groups header.                                                     |
+| `sumHoursRender`             | ({ groupId, tasks, weekOffset, calendarDate, sumHoursByGroups }: { groupId: string; tasks: TasksType; weekOffset: number; calendarDate: Date; sumHoursByGroups: number; }) => React.ReactNode | Custom render function for the sum of hours.                                                      |
+| `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.                                                            |
+---
+
+---
+
+## Additional Functions
+
+### `updateCalendarDateWithOffset`
+
+- **Description**: Updates the calendar date based on the week offset.
+- **Parameters**:
+  - `offset` (number): This represents the difference in days between the current calendar 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. `weekOffset` is different and represents the difference in days between the current date and the week we want to reach. **A shift of 14 days brings us back to the next week starting from the current date `new Date()`**.
+  **The current date `new Date()` is not necessarily the one selected in the calendar**.
+  - `calendarDate` (Date): The current calendar date.
+- **Returns**: A new `Date` object with the updated date.
+
+  **Example**:
+  ```javascript
+  const updatedDate = updateCalendarDateWithOffset(7, new Date());
+  console.log(updatedDate); // Logs the date one week ahead
+  ```
+
+### `updateOffsetWithDateCalendar`
+
+- **Description**: Calculates the week offset from a given calendar date.
+- **Parameters**:
+  - `calendarDate` (Date): The calendar date.
+- **Returns**: The calculated week offset.
+
+  **Example**:
+  ```javascript
+  const offset = updateOffsetWithDateCalendar(new Date());
+  console.log(offset); // Logs the week offset for the given date
+  ```
+
+### `millisecondsToHours`
+
+- **Description**: Converts milliseconds to a formatted hour string.
+- **Parameters**:
+  - `milliseconds` (number): The time duration in milliseconds.
+- **Returns**: A formatted date string.
+
+  **Example**:
+  ```javascript
+  const formattedTime = millisecondsToHours(1716905215397);
+  console.log(formattedTime); // Logs the formatted time for 14h06
+  ```
+
+---
+

package/__tests__/page.test.js

@@ -0,0 +1,46 @@
+import moment from "moment";
+function getWeekNumber(date) {
+    date.setHours(0, 0, 0, 0);
+    date.setDate(date.getDate() + 4 - (date.getDay() || 7));
+    const yearStart = new Date(date.getFullYear(), 0, 1).getTime();
+    const weekNumber = Math.ceil(((date.getTime() - yearStart) / 86400000 + 1) / 7);
+    return weekNumber;
+}
+function calculerEcartSemaine(dateSelectionnee) {
+    // Récupérer la date actuelle
+    const dateActuelle = new Date();
+    // Extraire l'année et le numéro de la semaine de la date actuelle
+    const anneeActuelle = dateActuelle.getFullYear();
+    const numeroSemaineActuelle = getWeekNumber(dateActuelle);
+    // Extraire l'année et le numéro de la semaine de la date sélectionnée
+    const anneeSelectionnee = dateSelectionnee.getFullYear();
+    const numeroSemaineSelectionnee = getWeekNumber(dateSelectionnee);
+    // Calculer le nombre de semaines depuis une date d'origine arbitraire
+    // Calculer l'écart entre les semaines en utilisant la formule
+    const ecartSemaine = semainesDepuisOrigine(anneeSelectionnee, numeroSemaineSelectionnee) -
+        semainesDepuisOrigine(anneeActuelle, numeroSemaineActuelle);
+    return ecartSemaine * 7;
+}
+function semainesDepuisOrigine(annee, numeroSemaine) {
+    // Choisir le 1er janvier 2022 comme date d'origine
+    const dateOrigine = new Date(2022, 0, 1);
+    const anneeOrigine = dateOrigine.getFullYear();
+    const numeroSemaineOrigine = getWeekNumber(dateOrigine);
+    // Calculer le nombre total de semaines écoulées depuis la date d'origine
+    let nombreSemaines = 0;
+    for (let i = anneeOrigine; i < annee; i++) {
+        nombreSemaines += moment().year(i).weeksInYear();
+    }
+    nombreSemaines += numeroSemaine - numeroSemaineOrigine;
+    return nombreSemaines;
+}
+const makeCalcul = (date) => calculerEcartSemaine(date);
+describe("Ecartweek", () => {
+    test("current week to next week to be 7", () => {
+        const currentDay = Date.now();
+        const nextWeekDay = currentDay - 14 * 86400000;
+        // console.log(calculerEcartSemaine(new Date(nextWeekDay)));
+        const nextWeek = new Date(nextWeekDay);
+        expect(makeCalcul(nextWeek)).toBe(-14);
+    });
+});

package/__tests__/page.test.tsx

@@ -0,0 +1,57 @@
+import moment from "moment";
+
+function getWeekNumber(date: Date) {
+  date.setHours(0, 0, 0, 0);
+  date.setDate(date.getDate() + 4 - (date.getDay() || 7));
+  const yearStart= new Date(date.getFullYear(), 0, 1).getTime();
+  const weekNumber = Math.ceil(((date.getTime() - yearStart) / 86400000 + 1) / 7);
+  return weekNumber;
+}
+
+function calculerEcartSemaine(dateSelectionnee: Date) {
+  // Récupérer la date actuelle
+  const dateActuelle = new Date();
+
+  // Extraire l'année et le numéro de la semaine de la date actuelle
+  const anneeActuelle = dateActuelle.getFullYear();
+  const numeroSemaineActuelle = getWeekNumber(dateActuelle);
+
+  // Extraire l'année et le numéro de la semaine de la date sélectionnée
+
+  const anneeSelectionnee = dateSelectionnee.getFullYear();
+  const numeroSemaineSelectionnee = getWeekNumber(dateSelectionnee);
+
+  // Calculer le nombre de semaines depuis une date d'origine arbitraire
+
+  // Calculer l'écart entre les semaines en utilisant la formule
+  const ecartSemaine =
+    semainesDepuisOrigine(anneeSelectionnee, numeroSemaineSelectionnee) -
+    semainesDepuisOrigine(anneeActuelle, numeroSemaineActuelle);
+
+  return ecartSemaine * 7;
+}
+function semainesDepuisOrigine(annee: number, numeroSemaine: number) {
+  // Choisir le 1er janvier 2022 comme date d'origine
+  const dateOrigine = new Date(2022, 0, 1);
+  const anneeOrigine = dateOrigine.getFullYear();
+  const numeroSemaineOrigine = getWeekNumber(dateOrigine);
+
+  // Calculer le nombre total de semaines écoulées depuis la date d'origine
+  let nombreSemaines = 0;
+  for (let i = anneeOrigine; i < annee; i++) {
+    nombreSemaines += moment().year(i).weeksInYear();
+  }
+  nombreSemaines += numeroSemaine - numeroSemaineOrigine;
+
+  return nombreSemaines;
+}
+const makeCalcul=(date:Date)=>calculerEcartSemaine(date)
+describe("Ecartweek", () => {
+  test("current week to next week to be 7", () => {
+    const currentDay = Date.now();
+    const nextWeekDay = currentDay - 14 * 86400000;
+    // console.log(calculerEcartSemaine(new Date(nextWeekDay)));
+    const nextWeek = new Date(nextWeekDay);
+    expect(makeCalcul(nextWeek)).toBe(-14);
+  });
+});

package/contexts/CalendarContext.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from "react";
+const CalendarContext = createContext({
+    groups: [],
+    weekOffset: 0,
+    date: new Date()
+});
+const CalendarContextProvider = ({ groups, weekOffset, children, date }) => {
+    return (_jsx(CalendarContext.Provider, { value: { groups, weekOffset, date }, children: children }));
+};
+export const useCalendarContext = () => useContext(CalendarContext);
+export default CalendarContextProvider;

package/contexts/CalendarContext.tsx

@@ -0,0 +1,34 @@
+import { createContext, useContext } from "react";
+import { GroupPropsType } from "../definitions";
+type CalendarContextProviderPropsType = {
+  children: React.ReactNode;
+  groups: GroupPropsType[];
+  weekOffset: number;
+  date:Date
+};
+
+type CalendarContextType = {
+  groups: GroupPropsType[];
+  weekOffset: number;
+  date:Date
+};
+const CalendarContext = createContext<CalendarContextType>({
+  groups: [],
+  weekOffset: 0,
+  date:new Date()
+});
+
+const CalendarContextProvider = ({
+  groups,
+  weekOffset,
+  children,
+  date
+}: CalendarContextProviderPropsType) => {
+  return (
+    <CalendarContext.Provider value={{ groups, weekOffset ,date}}>
+      {children}
+    </CalendarContext.Provider>
+  );
+};
+export const useCalendarContext = () => useContext(CalendarContext);
+export default CalendarContextProvider;

package/definition.txt

@@ -0,0 +1,318 @@
+definition
+export type GroupPropsType = {
+  label?: string;
+  imageUrl?: string;
+  id?: string;
+  groupRender?: GroupRenderType;
+  className?: string;
+  style?: React.CSSProperties | undefined;
+  currentGroup: GroupFeildsType;
+  handleClickGroup?: (currentGroup: GroupFeildsType) => void;
+};
+
+type GroupRiquiredFieldsType = {
+  label?: string;
+  imageUrl?: string;
+  id: string;
+};
+
+type GroupAdditionalFieldsType = Record<any, unknown>;
+export type GroupFeildsType = GroupRiquiredFieldsType &
+  GroupAdditionalFieldsType;
+
+export type GroupRenderType = ({
+  id,
+  label,
+  imageUrl,
+  currentGroup,
+}: {
+  id?: string;
+  label?: string;
+  imageUrl?: string;
+  currentGroup?: GroupFeildsType;
+}) => React.ReactNode;
+export type GroupComponentPropsType = {
+  groupRender?: GroupRenderType;
+  className?: string;
+  style?: React.CSSProperties | undefined;
+};
+
+export type TaskRenderType = ({
+  taskId,
+  taskStart,
+  taskEnd,
+  task,
+  taskDate,
+  groupId,
+  dayIndex,
+  handleDragTask,
+}: {
+  taskStart: number;
+  taskEnd: number;
+  task: string;
+  taskDate: Date;
+  groupId: string;
+  dayIndex: number;
+  taskId: string;
+  currentTask?: TaskFeildsType;
+  handleDragTask?: (
+    event: React.DragEvent<HTMLDivElement>,
+    taskId: string,
+    taskStart: number,
+    taskEnd: number,
+    task: string,
+    taskDate: Date,
+    groupId: string,
+    dayIndex: number
+  ) => void;
+}) => React.ReactNode;
+
+export type DayRenderType = ({
+  dayIndex,
+  day,
+  dayOfTheMonth,
+  dayMonth,
+  dayYear,
+}: {
+  dayIndex?: number;
+  day?: string;
+  dayOfTheMonth?: number;
+  dayMonth?: string;
+  dayYear?: number;
+}) => React.ReactNode;
+
+export type DaysPropsType = {
+  dayRender: DayRenderType;
+  className?: string;
+  style?: React.CSSProperties | undefined;
+};
+
+export type DayPropsType = {
+  dayIndex?: number;
+  day?: string;
+  dayOfTheMonth?: number;
+  dayRender?: DayRenderType;
+  dayMonth?: string;
+  dayYear?: number;
+  className?: string;
+  style?: React.CSSProperties | undefined;
+};
+
+export type AddTaskRenderType = ({
+  dayIndex,
+  groupId,
+  dayInfo,
+}: {
+  dayIndex?: number;
+  groupId?: string;
+  dayInfo: dayInfoType;
+}) => React.ReactNode;
+
+export type CalendarPropsType = {
+  /**
+   * Props for the Calendar component.
+   */
+  /** Offset for the week (e.g., -7 for last week, 0 for current week, 7 for next week). */
+  weekOffset: number;
+  /** Array of group data to be displayed in the calendar. [{id*:string,label:string,imageUrl:string,...the fields of your choice}] id field is required */
+  groups: GroupFeildsType[];
+  /** Additional class names for the calendar component. */
+  className?: string;
+  /** Additional styles for the calendar component. */
+  style?: React.CSSProperties | undefined;
+  /** The current date to display in the calendar. */
+  date: Date;
+  /** Custom render function for a group. 
+   * const GroupRender=({
+  id,
+  label,
+  imageUrl,
+  currentGroup,
+   })=> {
+  your render
+  }
+  */
+  groupRender?: GroupRenderType;
+  /** Custom render function for a day. 
+   * const DayRender=(dayIndex,
+  day,
+  dayOfTheMonth,
+  dayMonth,
+  dayYear)=> {
+  your render
+  }
+  */
+  dayRender?: DayRenderType;
+  /** Custom render function for a task. 
+   * const TasKRender=({
+  taskId,
+  taskStart,
+  taskEnd,
+  task,
+  taskDate,
+  groupId,
+  dayIndex,
+  handleDragTask,
+})=> {
+  your render
+  }
+  */
+  taskRender?: TaskRenderType;
+  /** Additional styles for the rows. */
+  rowsStyle?: React.CSSProperties | undefined;
+  /** Additional class names for the rows. */
+  rowsClassName?: string;
+  /** Additional styles for the group columns. */
+  groupsColsStyle?: React.CSSProperties | undefined;
+   /** Additional class names for the group columns. */
+  groupsColsClassName?: string;
+  /** Additional styles for the day columns. */
+  daysColsStyle?: React.CSSProperties | undefined;
+  daysColsClassName?: string;
+  addTaskClassName?: string;
+  addTaskStyle?: React.CSSProperties | undefined;
+   /** Additional class names for the groups. */
+  groupClassName?: string;
+  groupStyle?: React.CSSProperties | undefined;
+  dayClassName?: string;
+  dayStyle?: React.CSSProperties | undefined;
+  taskContainerStyle?: React.CSSProperties | undefined;
+  taskContainerClassName?: string;
+  groupHeadContainerStyle?: React.CSSProperties | undefined;
+  groupHeadContainerClassName?: string;
+  sumHoursContainerStyle?: React.CSSProperties | undefined;
+  sumHoursContainerClassName?: string;
+  sumHoursHeadStyle?: React.CSSProperties | undefined;
+  sumHoursHeadClassName?: string;
+
+  handleAddTask?: (
+    dayIndex: number,
+    groupId: string,
+    dayInfo: dayInfoType
+  ) => void;
+  addTaskRender?: AddTaskRenderType;
+  tasks?: TasksType;
+  handleDragTask?: (
+    event: React.DragEvent<HTMLDivElement>,
+    taskId: string,
+    taskStart: number,
+    taskEnd: number,
+    task: string,
+    taskDate: Date,
+    groupId: string,
+    dayIndex: number
+  ) => void;
+  handleDropTask?: (
+    event: React.DragEvent<HTMLTableDataCellElement>,
+    taskStart: number,
+    taskEnd: number,
+    taskDate: Date,
+    groupId: string,
+    dayIndex: number,
+    newTask: TaskFeildsType,
+    newTasts: TasksType
+  ) => void;
+  handleDragTaskEnd?: handleDragTaskEndType;
+  groupsHeadRender?: GroupsHeadRenderType;
+  sumHoursRender?: SumHoursRenderType;
+  sumHoursHeadRender?: SumHoursHeadRenderType;
+  handleClickTask?: (currentTask: TaskFeildsType) => void;
+  handleClickGroup?: (currentGroup: GroupFeildsType) => void;
+};
+export type StyleType = React.CSSProperties | undefined;
+export type AddTaskPropsType = {
+  dayIndex: number;
+  groupId: string;
+  addTaskStyle?: StyleType;
+  addTaskClassName?: string;
+  addTaskRender?: AddTaskRenderType;
+  dayInfo: dayInfoType;
+  handleAddTask?: (
+    dayIndex: number,
+    groupId: string,
+    dayInfo: dayInfoType
+  ) => void;
+};
+export type dayInfoType = {
+  positionDay: number;
+  day: Date;
+  start: number;
+  end: number;
+};
+export type TaskType = {
+  taskStart: number;
+  taskEnd: number;
+  task: string;
+  taskDate: Date;
+  groupId: string;
+  dayIndex: number;
+  taskId: string;
+};
+export type TaskContainerPropsType = {
+  taskStart: number;
+  taskEnd: number;
+  task: string;
+  taskDate: Date;
+  groupId: string;
+  dayIndex: number;
+  taskId: string;
+  className?: string;
+  style?: React.CSSProperties | undefined;
+  handleDragTask?: (
+    event: React.DragEvent<HTMLDivElement>,
+    taskId: string,
+    taskStart: number,
+    taskEnd: number,
+    task: string,
+    taskDate: Date,
+    groupId: string,
+    dayIndex: number
+  ) => void;
+  taskRender?: TaskRenderType;
+  handleDragTaskEnd?: handleDragTaskEndType;
+  currentTask: TaskFeildsType;
+  handleClickTask?: (currentTask: TaskFeildsType) => void;
+};
+type GroupsHeadRenderType = () => React.ReactNode;
+export type GroupsHeadContainerPropsType = {
+  groupsHeadRender?: GroupsHeadRenderType;
+  style?: React.CSSProperties | undefined;
+  className?: string;
+};
+type SumHoursHeadRenderType = () => React.ReactNode;
+export type SumHoursHeadContainerPropsType = {
+  sumHoursHeadRender?: SumHoursHeadRenderType;
+  style?: React.CSSProperties | undefined;
+  className?: string;
+};
+type TaskAdditionalFieldsType = Record<any, unknown>;
+export type TaskFeildsType = TaskType & TaskAdditionalFieldsType;
+
+export type TasksType = TaskFeildsType[];
+export type handleDragTaskEndType = (
+  event: React.DragEvent<HTMLDivElement>
+) => void;
+export type SumHoursRenderType = ({
+  groupId,
+  tasks,
+  weekOffset,
+  calendarDate,
+  sumHoursByGroups,
+}: {
+  groupId: string;
+  tasks: TasksType | any;
+  weekOffset: number;
+  calendarDate: Date;
+  sumHoursByGroups: number;
+}) => React.ReactNode;
+
+export type SumHoursContainerPropsType = {
+  groupId: string;
+  tasks: TasksType | any;
+  weekOffset: number;
+  calendarDate: Date;
+  sumHoursByGroups: number;
+  sumHoursRender?: SumHoursRenderType;
+  style?: React.CSSProperties | undefined;
+  className?: string;
+};

package/definitions/index.js

@@ -0,0 +1 @@
+export {};