@kkkarsss/ui 1.5.3 → 1.5.5

package/dist/ui/information/calendar-like/calendar-item-wrapper.js

@@ -8,9 +8,12 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
             e.preventDefault();
             e.stopPropagation();
             const startY = e.clientY;
-            const startHeight = (task.estimatedTime / 15) * 20;
-            const startHour = task.dueDate.getHours();
-            const startMinutes = task.dueDate.getMinutes();
+            const dStart = task.dueDateStart instanceof Date ? task.dueDateStart : new Date(task.dueDateStart);
+            const dEnd = task.dueDateEnd instanceof Date ? task.dueDateEnd : new Date(task.dueDateEnd);
+            const estimatedTime = (dEnd.getTime() - dStart.getTime()) / (60 * 1000);
+            const startHeight = (estimatedTime / 15) * 20;
+            const startHour = dStart.getHours();
+            const startMinutes = dStart.getMinutes();
             const onMouseMove = (moveEvent) => {
                 const deltaY = moveEvent.clientY - startY;
                 let newHeight;
@@ -24,9 +27,9 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
                 else {
                     // Resizing top
                     const deltaMinutes = Math.round(deltaY / 20) * 15;
-                    newEstimatedTime = Math.max(15, task.estimatedTime - deltaMinutes);
+                    newEstimatedTime = Math.max(15, estimatedTime - deltaMinutes);
                     // If we hit min height, don't move the top further down
-                    const actualDeltaMinutes = task.estimatedTime - newEstimatedTime;
+                    const actualDeltaMinutes = estimatedTime - newEstimatedTime;
                     const totalStartMinutes = startHour * 60 + startMinutes + actualDeltaMinutes;
                     newStartHour = Math.floor(totalStartMinutes / 60);
                     newStartMinutes = totalStartMinutes % 60;
@@ -44,13 +47,13 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
                 }
                 else {
                     const deltaMinutes = Math.round(deltaY / 20) * 15;
-                    finalEstimatedTime = Math.max(15, task.estimatedTime - deltaMinutes);
-                    const actualDeltaMinutes = task.estimatedTime - finalEstimatedTime;
+                    finalEstimatedTime = Math.max(15, estimatedTime - deltaMinutes);
+                    const actualDeltaMinutes = estimatedTime - finalEstimatedTime;
                     const totalStartMinutes = startHour * 60 + startMinutes + actualDeltaMinutes;
                     finalStartHour = Math.floor(totalStartMinutes / 60);
                     finalStartMinutes = totalStartMinutes % 60;
                 }
-                if (finalEstimatedTime !== task.estimatedTime ||
+                if (finalEstimatedTime !== estimatedTime ||
                     finalStartHour !== startHour ||
                     finalStartMinutes !== startMinutes) {
                     onResize(task.id, finalEstimatedTime, finalStartHour, finalStartMinutes);
@@ -71,7 +74,8 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onDragEnd, on
     const displayHeight = preview ? `${(preview.estimatedTime / 15) * 20}px` : position.height;
     let displayTop = position.top;
     if (preview && (preview.startHour !== undefined || preview.startMinutes !== undefined)) {
-        const originalStartTotalMinutes = task.dueDate.getHours() * 60 + task.dueDate.getMinutes();
+        const dStart = task.dueDateStart instanceof Date ? task.dueDateStart : new Date(task.dueDateStart);
+        const originalStartTotalMinutes = dStart.getHours() * 60 + dStart.getMinutes();
         const newStartTotalMinutes = preview.startHour * 60 + preview.startMinutes;
         const diffMinutes = newStartTotalMinutes - originalStartTotalMinutes;
         const diffPixels = (diffMinutes / 15) * 20;

package/dist/ui/information/calendar-like/calendar-like.js

@@ -25,7 +25,10 @@ export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = t
         setDraggingTask(task);
         e.dataTransfer.setData('taskId', task.id);
         e.dataTransfer.setData('taskTitle', task.title || '');
-        e.dataTransfer.setData('taskEstimatedTime', String(task.estimatedTime));
+        const dStart = task.dueDateStart instanceof Date ? task.dueDateStart : new Date(task.dueDateStart);
+        const dEnd = task.dueDateEnd instanceof Date ? task.dueDateEnd : new Date(task.dueDateEnd);
+        const estimatedTime = (dEnd.getTime() - dStart.getTime()) / (60 * 1000);
+        e.dataTransfer.setData('taskEstimatedTime', String(estimatedTime));
         if (task.color) {
             e.dataTransfer.setData('taskColor', task.color);
         }
@@ -48,8 +51,10 @@ export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = t
                 const overlappingTasksCount = tasks.filter((task) => {
                     if (draggingTask && task.id === draggingTask.id)
                         return false;
-                    const taskStart = task.dueDate.getHours() * 60 + task.dueDate.getMinutes();
-                    const taskEnd = taskStart + task.estimatedTime;
+                    const dStart = task.dueDateStart instanceof Date ? task.dueDateStart : new Date(task.dueDateStart);
+                    const dEnd = task.dueDateEnd instanceof Date ? task.dueDateEnd : new Date(task.dueDateEnd);
+                    const taskStart = dStart.getHours() * 60 + dStart.getMinutes();
+                    const taskEnd = dEnd.getHours() * 60 + dEnd.getMinutes();
                     return currentSlotTime >= taskStart && currentSlotTime < taskEnd;
                 }).length;
                 return (_jsx(CalendarSlot, { slotIndex: slotIndex, onDrop: handleDrop, onCreateTask: onCreateTask, renderTask: renderTask, overlappingTasksCount: overlappingTasksCount, draggingTask: draggingTask || undefined, children: tasksForSlot?.map((task) => (_jsx(CalendarItemWrapper, { task: task, position: task.position, onDragStart: (e) => handleDragStart(e, task), onDragEnd: handleDragEnd, onResize: onTaskResize, renderTask: renderTask }, task.id))) }, slotIndex));

package/dist/ui/information/calendar-like/calendar-like.stories.js

@@ -20,38 +20,38 @@ const INITIAL_TASKS = [
         id: '1',
         title: 'Утренняя почта',
         description: 'Проверить входящие и ответить на важные письма',
-        dueDate: getTodayAtHour(9),
-        estimatedTime: 45,
+        dueDateStart: getTodayAtHour(9),
+        dueDateEnd: getTodayAtHour(9, 45),
         color: '#3b82f6',
     },
     {
         id: '2',
         title: 'Стендап',
-        dueDate: getTodayAtHour(10),
-        estimatedTime: 15,
+        dueDateStart: getTodayAtHour(10),
+        dueDateEnd: getTodayAtHour(10, 15),
         color: '#10b981',
         isInWork: true,
     },
     {
         id: '3',
         title: 'Обед',
-        dueDate: getTodayAtHour(13),
-        estimatedTime: 60,
+        dueDateStart: getTodayAtHour(13),
+        dueDateEnd: getTodayAtHour(14),
         color: '#f59e0b',
     },
     {
         id: '4',
         title: 'Разработка фичи',
         description: 'Реализация логики календаря',
-        dueDate: getTodayAtHour(14),
-        estimatedTime: 120,
+        dueDateStart: getTodayAtHour(14),
+        dueDateEnd: getTodayAtHour(16),
         color: '#8b5cf6',
     },
     {
         id: '5',
         title: 'Завершенная задача',
-        dueDate: getTodayAtHour(17),
-        estimatedTime: 30,
+        dueDateStart: getTodayAtHour(17),
+        dueDateEnd: getTodayAtHour(17, 30),
         isCompleted: true,
         color: '#8b5cf6',
     },
@@ -65,10 +65,11 @@ export const Interactive = {
             console.log(`Task ${taskId} dropped at ${hour}:${minutes}`);
             setTasks((prev) => prev.map((t) => {
                 if (t.id === taskId) {
-                    const newDate = new Date(t.dueDate);
-                    // Storybook handles the date update
-                    newDate.setHours(hour, minutes, 0, 0);
-                    return { ...t, dueDate: newDate };
+                    const durationMs = t.dueDateEnd.getTime() - t.dueDateStart.getTime();
+                    const newStartDate = new Date(t.dueDateStart);
+                    newStartDate.setHours(hour, minutes, 0, 0);
+                    const newEndDate = new Date(newStartDate.getTime() + durationMs);
+                    return { ...t, dueDateStart: newStartDate, dueDateEnd: newEndDate };
                 }
                 return t;
             }));
@@ -77,24 +78,25 @@ export const Interactive = {
             console.log(`Task ${taskId} resized to ${newEstimatedTime} minutes. New start: ${newStartHour}:${newStartMinutes}`);
             setTasks((prev) => prev.map((t) => {
                 if (t.id === taskId) {
-                    const newTask = { ...t, estimatedTime: newEstimatedTime };
+                    const newStartDate = new Date(t.dueDateStart);
                     if (newStartHour !== undefined && newStartMinutes !== undefined) {
-                        const newDate = new Date(t.dueDate);
-                        newDate.setHours(newStartHour, newStartMinutes, 0, 0);
-                        newTask.dueDate = newDate;
+                        newStartDate.setHours(newStartHour, newStartMinutes, 0, 0);
                     }
-                    return newTask;
+                    const newEndDate = new Date(newStartDate.getTime() + newEstimatedTime * 60 * 1000);
+                    return { ...t, dueDateStart: newStartDate, dueDateEnd: newEndDate };
                 }
                 return t;
             }));
         };
         const handleCreateTask = (hour, minutes, estimatedTime) => {
             console.log(`Create task at ${hour}:${minutes} with duration ${estimatedTime}`);
+            const dueDateStart = getTodayAtHour(hour, minutes);
+            const dueDateEnd = new Date(dueDateStart.getTime() + estimatedTime * 60 * 1000);
             const newTask = {
                 id: Math.random().toString(36).substr(2, 9),
                 title: 'Новая задача',
-                dueDate: getTodayAtHour(hour, minutes),
-                estimatedTime,
+                dueDateStart,
+                dueDateEnd,
                 color: '#8b5cf6',
             };
             setTasks((prev) => [...prev, newTask]);

package/dist/ui/information/calendar-like/calendar-slot.js

@@ -12,7 +12,9 @@ export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, renderTask, chil
     const springs = useSpring({
         to: {
             opacity: dragOverInfo ? 1 : 0.6,
-            height: dragOverInfo ? `${(dragOverInfo.task.estimatedTime / 15) * 20}px` : '40px',
+            height: dragOverInfo
+                ? `${((new Date(dragOverInfo.task.dueDateEnd).getTime() - new Date(dragOverInfo.task.dueDateStart).getTime()) / (60 * 1000) / 15) * 20}px`
+                : '40px',
         },
         config: { ...config.stiff, precision: 0.001 },
     });
@@ -81,8 +83,8 @@ export const CalendarSlot = ({ slotIndex, onDrop, onCreateTask, renderTask, chil
                         }, children: renderTask ? (renderTask({
                             id: 'new-task-preview',
                             title: 'Новая задача',
-                            dueDate: new Date(new Date().setHours(hour, minutes, 0, 0)),
-                            estimatedTime: selection.currentEstimatedTime,
+                            dueDateStart: new Date(new Date().setHours(hour, minutes, 0, 0)),
+                            dueDateEnd: new Date(new Date().setHours(hour, minutes + selection.currentEstimatedTime, 0, 0)),
                             color: 'white',
                         })) : (_jsxs("div", { className: "border rounded-sm h-full p-1", children: [_jsx(Typo, { size: "xs", weight: "500", children: "\u041D\u043E\u0432\u0430\u044F \u0437\u0430\u0434\u0430\u0447\u0430" }), _jsxs(Typo, { size: "xs", color: "secondary", children: [selection.currentEstimatedTime, " \u043C\u0438\u043D"] })] })) }))] })] }));
 };

package/dist/ui/information/calendar-like/types.d.ts

@@ -1,8 +1,8 @@
 import { ReactNode } from 'react';
 export type TCalendarTask = {
     id: string;
-    dueDate: Date;
-    estimatedTime: number;
+    dueDateStart: Date;
+    dueDateEnd: Date;
     [key: string]: any;
 };
 export type TCalendarTaskWithPosition = TCalendarTask & {

package/dist/ui/information/calendar-like/utils.js

@@ -1,18 +1,23 @@
 export const calculateTaskPositions = (tasks) => {
     const tasksToRender = [...tasks]
-        .map((t) => ({
-        ...t,
-        dueDate: t.dueDate instanceof Date ? t.dueDate : new Date(t.dueDate),
-    }))
-        .filter((t) => t.dueDate && !isNaN(t.dueDate.getTime()))
-        .sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime());
+        .map((t) => {
+        const dStart = t.dueDateStart instanceof Date ? t.dueDateStart : new Date(t.dueDateStart);
+        const dEnd = t.dueDateEnd instanceof Date ? t.dueDateEnd : new Date(t.dueDateEnd);
+        return {
+            ...t,
+            dueDateStart: dStart,
+            dueDateEnd: dEnd,
+        };
+    })
+        .filter((t) => t.dueDateStart && !isNaN(t.dueDateStart.getTime()) && t.dueDateEnd && !isNaN(t.dueDateEnd.getTime()))
+        .sort((a, b) => a.dueDateStart.getTime() - b.dueDateStart.getTime());
     const columns = [];
     tasksToRender.forEach((task) => {
-        const startTime = task.dueDate.getTime();
+        const startTime = task.dueDateStart.getTime();
         let placed = false;
         for (const column of columns) {
             const lastTask = column[column.length - 1];
-            const lastEndTime = lastTask.dueDate.getTime() + lastTask.estimatedTime * 60 * 1000;
+            const lastEndTime = lastTask.dueDateEnd.getTime();
             if (startTime >= lastEndTime) {
                 column.push(task);
                 placed = true;
@@ -29,7 +34,7 @@ export const calculateTaskPositions = (tasks) => {
     columns.forEach((column) => {
         let columnMinStartTime = Infinity;
         column.forEach((t) => {
-            const start = t.dueDate.getTime();
+            const start = t.dueDateStart.getTime();
             if (start < columnMinStartTime)
                 columnMinStartTime = start;
         });
@@ -40,7 +45,7 @@ export const calculateTaskPositions = (tasks) => {
         }
         currentCluster.push(column);
         column.forEach((t) => {
-            const end = t.dueDate.getTime() + t.estimatedTime * 60 * 1000;
+            const end = t.dueDateEnd.getTime();
             if (end > clusterMaxEndTime)
                 clusterMaxEndTime = end;
         });
@@ -55,11 +60,12 @@ export const calculateTaskPositions = (tasks) => {
                 const width = clusterColumnsCount > 1 ? `${100 / clusterColumnsCount}%` : '100%';
                 const left = clusterColumnsCount > 1 ? `${(colIndex * 100) / clusterColumnsCount}%` : '0%';
                 // Расчитываем смещение внутри 15-минутного слота
-                const minutes = task.dueDate.getMinutes();
+                const minutes = task.dueDateStart.getMinutes();
                 const minutesInSlot = minutes % 15;
                 const topOffset = (minutesInSlot / 15) * 20;
-                const top = `${Math.round(topOffset)}px`; // Округляем для надежности, но по идее minutesInSlot должен быть 0 если все по сетке
-                const height = `${Math.round((Math.max(15, task.estimatedTime || 15) / 15) * 20)}px`;
+                const top = `${Math.round(topOffset)}px`;
+                const diffMinutes = Math.round((task.dueDateEnd.getTime() - task.dueDateStart.getTime()) / (60 * 1000));
+                const height = `${Math.round((Math.max(15, diffMinutes || 15) / 15) * 20)}px`;
                 result.push({
                     ...task,
                     position: { width, left, top, height },
@@ -72,8 +78,9 @@ export const calculateTaskPositions = (tasks) => {
 export const groupTasksBySlot = (tasksWithPosition) => {
     const map = {};
     tasksWithPosition.forEach((task) => {
-        const hour = task.dueDate.getHours();
-        const minutes = task.dueDate.getMinutes();
+        const dStart = task.dueDateStart instanceof Date ? task.dueDateStart : new Date(task.dueDateStart);
+        const hour = dStart.getHours();
+        const minutes = dStart.getMinutes();
         const slotIndex = hour * 4 + Math.floor(minutes / 15);
         if (!map[slotIndex])
             map[slotIndex] = [];

package/dist/ui/layout/main-page-layout/main-page-layout.js

@@ -8,5 +8,5 @@ import { IconAction } from '../icon-action/icon-action';
 export const MainPageLayout = ({ children, leftPanel, rightPanel, leftIcon, rightIcon, }) => {
     const { widget } = useWidget();
     const { expandedPanel, toggleLeftPanel, toggleRightPanel } = useLayout();
-    return (_jsx("div", { className: "@container w-full h-[100dvh]", children: _jsxs("main", { className: "grid h-full w-full grid-cols-1 @s:grid-cols-[300px_1fr_300px] @s:py-xl @s:px-l @s:gap-l py-m px-s gap-s relative overflow-hidden", children: [_jsx("aside", { className: "hidden @s:block h-full w-full", children: leftPanel }), _jsx("div", { className: "@s:hidden absolute left-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'left' ? _jsx(X, { size: 20 }) : leftIcon || _jsx(Menu, { size: 20 }), onClick: toggleLeftPanel }) }), _jsxs(Flex, { direction: 'column', justify: 'center', gap: '16px', type: 'fill', className: jc(expandedPanel ? 'hidden @s:flex' : 'flex', 'h-full mt-[50px] @s:m-0', '@s:flex-row @s:items-stretch'), children: [!widget?.isFullWidth && (_jsx("div", { className: jc('h-full scrollbar-none overflow-auto', '@s:flex-1', widget ? 'hidden @s:block' : 'block'), children: children })), widget && (_jsx("div", { className: jc('flex-1 min-h-0 h-full w-full', !widget.isFullWidth && '@s:flex-initial @s:w-[360px]'), children: _jsx(Fragment, { children: widget.ui }, widget.id) }))] }), _jsx("aside", { className: "hidden @s:block h-full w-full", children: rightPanel }), _jsx("div", { className: "@s:hidden absolute right-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'right' ? _jsx(X, { size: 20 }) : rightIcon || _jsx(Menu, { size: 20 }), onClick: toggleRightPanel }) }), expandedPanel && (_jsx("div", { className: "@s:hidden absolute inset-0 z-40 bg-background pt-16 px-4 pb-4 overflow-auto", children: expandedPanel === 'left' ? leftPanel : rightPanel }))] }) }));
+    return (_jsx("div", { className: "@container w-full h-[100dvh]", children: _jsxs("main", { className: "grid h-full w-full grid-cols-1 @s:grid-cols-[300px_1fr_300px] @s:py-xl @s:px-l @s:gap-l py-m px-s gap-s relative overflow-hidden", children: [_jsx("aside", { className: "hidden @s:block h-full w-full", children: leftPanel }), _jsx("div", { className: "@s:hidden absolute left-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'left' ? _jsx(X, { size: 20 }) : leftIcon || _jsx(Menu, { size: 20 }), onClick: toggleLeftPanel }) }), _jsxs(Flex, { direction: 'column', justify: 'center', gap: '16px', type: 'fill', className: jc(expandedPanel ? 'hidden @s:flex' : 'flex', 'h-full mt-[50px] @s:m-0', '@s:flex-row @s:items-stretch'), children: [!widget?.isFullWidth && (_jsx("div", { className: jc('min-h-0 h-full scrollbar-none overflow-auto', '@s:flex-1', widget ? 'hidden @s:block' : 'block'), children: children })), widget && (_jsx("div", { className: jc('flex-1 min-h-0 h-full w-full', !widget.isFullWidth && '@s:flex-initial @s:w-[360px]'), children: _jsx(Fragment, { children: widget.ui }, widget.id) }))] }), _jsx("aside", { className: "hidden @s:block h-full w-full", children: rightPanel }), _jsx("div", { className: "@s:hidden absolute right-4 top-4 z-50", children: _jsx(IconAction, { icon: expandedPanel === 'right' ? _jsx(X, { size: 20 }) : rightIcon || _jsx(Menu, { size: 20 }), onClick: toggleRightPanel }) }), expandedPanel && (_jsx("div", { className: "@s:hidden absolute inset-0 z-40 bg-background pt-16 px-4 pb-4 overflow-auto", children: expandedPanel === 'left' ? leftPanel : rightPanel }))] }) }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kkkarsss/ui",
-  "version": "1.5.3",
+  "version": "1.5.5",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",