@kkkarsss/ui 1.1.2 → 1.1.4

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

@@ -1,7 +1,7 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Typo } from '../text/typo';
-export const CalendarHourSlot = ({ hour, onDrop, onCreateTask, children, }) => {
+export const CalendarHourSlot = ({ hour, onDrop, onCreateTask, children }) => {
     const [selection, setSelection] = useState(null);
     const handleDragOver = (e) => {
         e.preventDefault();
@@ -37,7 +37,10 @@ export const CalendarHourSlot = ({ hour, onDrop, onCreateTask, children, }) => {
         document.addEventListener('mousemove', onMouseMove);
         document.addEventListener('mouseup', onMouseUp);
     };
-    return (_jsxs("div", { onDragOver: handleDragOver, onDrop: (e) => onDrop?.(e, hour), onMouseDown: handleMouseDown, className: "relative h-20 border-b border-secondary-foreground group hover:z-10 has-[.calendar-item:hover]:z-30 has-[.calendar-item:active]:z-30", children: [_jsx("div", { className: "absolute -left-12 top-0 -translate-y-1/2 w-10 text-right", children: _jsxs(Typo, { size: "xs", color: "secondary", children: [String(hour).padStart(2, '0'), ":00"] }) }), _jsxs("div", { className: "pl-4 py-1 relative h-full", children: [children, selection && (_jsx("div", { className: "absolute left-4 right-1 bg-accent/30 border border-accent rounded-sm z-[40] pointer-events-none", style: {
+    return (_jsxs("div", { onDragOver: handleDragOver, onDrop: (e) => onDrop?.(e, hour), onMouseDown: handleMouseDown, className: "relative h-20 border-b border-secondary-foreground group hover:z-10 has-[.calendar-item:hover]:z-30 has-[.calendar-item:active]:z-30", children: [_jsx("div", { className: "absolute -left-12 top-0 -translate-y-1/2 w-10 text-right", children: _jsxs(Typo, { size: "xs", color: "secondary", children: [String(hour).padStart(2, '0'), ":00"] }) }), _jsxs("div", { className: "pl-4 py-1 relative h-full", children: [(() => {
+                        console.log(`CalendarHourSlot: rendering hour ${hour}, children count: ${Array.isArray(children) ? children.length : children ? 1 : 0}`);
+                        return null;
+                    })(), children, selection && (_jsx("div", { className: "absolute left-4 right-1 bg-accent/30 border border-accent rounded-sm z-[40] pointer-events-none", style: {
                             top: `${(selection.startMinutes / 60) * 80}px`,
                             height: `${(selection.currentEstimatedTime / 60) * 80}px`,
                         }, children: _jsxs("div", { className: "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/calendar-item-wrapper.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { jc } from '../../../utils';
 export const CalendarItemWrapper = ({ task, position, onDragStart, onResize, renderTask, }) => {
+    console.log(`CalendarItemWrapper: task ${task.id} (${task.title}), position:`, position);
     const [previewEstimatedTime, setPreviewEstimatedTime] = useState(null);
     const handleMouseDown = (e) => {
         if (onResize) {
@@ -35,9 +36,7 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onResize, ren
             document.addEventListener('mouseup', onMouseUp);
         }
     };
-    const displayHeight = previewEstimatedTime
-        ? `${(previewEstimatedTime / 60) * 80}px`
-        : position.height;
+    const displayHeight = previewEstimatedTime ? `${(previewEstimatedTime / 60) * 80}px` : position.height;
     return (_jsx("div", { draggable: !!onDragStart, onDragStart: (e) => {
             onDragStart?.(e, task.id);
             setTimeout(() => {

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

@@ -4,6 +4,7 @@ import { jc } from '../../../utils';
 import { Flex } from '../../layout';
 import { Typo } from '../text/typo';
 export const CalendarItem = ({ title, description, isCompleted, isInWork, onClick, icon, estimatedTime = 30, color, className, }) => {
+    console.log(`CalendarItem: rendering ${title}, color: ${color}`);
     return (_jsxs("div", { className: jc('w-full h-full p-1 rounded-sm border flex flex-col transition-colors relative', !color && (isCompleted ? 'opacity-50 border-secondary bg-accent/50' : 'border-accent bg-accent'), color && (isCompleted ? 'opacity-50' : ''), className), style: {
             backgroundColor: color ? `${color}80` : undefined,
             borderColor: color ? color : undefined,

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

@@ -8,8 +8,20 @@ export * from './calendar-item-wrapper';
 export * from './calendar-item';
 const DEFAULT_HOURS = Array.from({ length: 24 }, (_, i) => i);
 export const CalendarLike = ({ tasks, hours = DEFAULT_HOURS, renderTask, onTaskDrop, onTaskResize, onCreateTask, }) => {
-    const tasksWithPosition = useMemo(() => calculateTaskPositions(tasks), [tasks]);
-    const tasksByHour = useMemo(() => groupTasksByHour(tasksWithPosition), [tasksWithPosition]);
+    console.log('CalendarLike: render, tasks count:', tasks.length);
+    if (tasks.length > 0) {
+        console.log('CalendarLike: first task title:', tasks[0].title);
+    }
+    const tasksWithPosition = useMemo(() => {
+        const result = calculateTaskPositions(tasks);
+        console.log('CalendarLike: calculateTaskPositions result count:', result.length);
+        return result;
+    }, [tasks]);
+    const tasksByHour = useMemo(() => {
+        const result = groupTasksByHour(tasksWithPosition);
+        console.log('CalendarLike: groupTasksByHour result keys:', Object.keys(result));
+        return result;
+    }, [tasksWithPosition]);
     const handleDragStart = (e, taskId) => {
         e.dataTransfer.setData('taskId', taskId);
     };
@@ -21,6 +33,7 @@ export const CalendarLike = ({ tasks, hours = DEFAULT_HOURS, renderTask, onTaskD
     };
     return (_jsx("div", { className: "relative border-l border-secondary/20 ml-12 select-none", children: hours.map((hour) => {
             const tasksForHour = tasksByHour[hour];
+            console.log(`CalendarLike: hour ${hour} has ${tasksForHour?.length || 0} tasks`);
             return (_jsx(CalendarHourSlot, { hour: hour, onDrop: handleDrop, onCreateTask: onCreateTask, children: tasksForHour?.map((task) => (_jsx(CalendarItemWrapper, { task: task, position: task.position, onDragStart: handleDragStart, onResize: onTaskResize, renderTask: renderTask }, task.id))) }, hour));
         }) }));
 };

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

@@ -1,11 +1,18 @@
 export const calculateTaskPositions = (tasks) => {
+    console.log('calculateTaskPositions: input:', 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()))
+        .filter((t) => {
+        const isValid = t.dueDate && !isNaN(t.dueDate.getTime());
+        if (!isValid)
+            console.warn('calculateTaskPositions: invalid date for task:', t.id, t.dueDate);
+        return isValid;
+    })
         .sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime());
+    console.log('calculateTaskPositions: tasksToRender:', tasksToRender);
     const columns = [];
     tasksToRender.forEach((task) => {
         const startTime = task.dueDate.getTime();
@@ -55,7 +62,8 @@ export const calculateTaskPositions = (tasks) => {
                 const width = clusterColumnsCount > 1 ? `${100 / clusterColumnsCount}%` : '100%';
                 const left = clusterColumnsCount > 1 ? `${(colIndex * 100) / clusterColumnsCount}%` : '0%';
                 const top = `${(task.dueDate.getMinutes() / 60) * 80}px`;
-                const height = `${(task.estimatedTime / 60) * 80}px`;
+                const height = `${(Math.max(15, task.estimatedTime || 15) / 60) * 80}px`;
+                console.log(`calculateTaskPositions: task ${task.id} position:`, { width, left, top, height });
                 result.push({
                     ...task,
                     position: { width, left, top, height },
@@ -66,12 +74,14 @@ export const calculateTaskPositions = (tasks) => {
     return result;
 };
 export const groupTasksByHour = (tasksWithPosition) => {
+    console.log('groupTasksByHour: input count:', tasksWithPosition.length);
     const map = {};
     tasksWithPosition.forEach((task) => {
         const hour = task.dueDate.getHours();
         if (!map[hour])
             map[hour] = [];
         map[hour].push(task);
+        console.log(`groupTasksByHour: task ${task.id} (${task.title}) assigned to hour ${hour}`);
     });
     return map;
 };

package/package.json

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