@kkkarsss/ui 1.1.4 → 1.1.6

package/dist/ui/information/calendar-like/calendar-hour-slot.d.ts

@@ -1,7 +1,7 @@
 import { type FC, type DragEvent, ReactNode } from 'react';
 export type TCalendarHourSlotProps = {
     hour: number;
-    onDrop?: (e: DragEvent<HTMLDivElement>, hour: number) => void;
+    onDrop?: (e: DragEvent<HTMLDivElement>, hour: number, minutes: number) => void;
     onCreateTask?: (hour: number, minutes: number, estimatedTime: number) => void;
     children?: ReactNode;
 };

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

@@ -3,8 +3,25 @@ import { useState } from 'react';
 import { Typo } from '../text/typo';
 export const CalendarHourSlot = ({ hour, onDrop, onCreateTask, children }) => {
     const [selection, setSelection] = useState(null);
+    const [dragOverMinutes, setDragOverMinutes] = useState(null);
     const handleDragOver = (e) => {
         e.preventDefault();
+        const rect = e.currentTarget.getBoundingClientRect();
+        const offsetY = e.clientY - rect.top;
+        const minutes = Math.floor(offsetY / 20) * 15;
+        if (minutes !== dragOverMinutes) {
+            setDragOverMinutes(minutes);
+        }
+    };
+    const handleDragLeave = () => {
+        setDragOverMinutes(null);
+    };
+    const handleInternalDrop = (e) => {
+        setDragOverMinutes(null);
+        const rect = e.currentTarget.getBoundingClientRect();
+        const offsetY = e.clientY - rect.top;
+        const minutes = Math.floor(offsetY / 20) * 15;
+        onDrop?.(e, hour, minutes);
     };
     const handleMouseDown = (e) => {
         if (e.button !== 0 || !onCreateTask)
@@ -37,10 +54,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: [(() => {
-                        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: {
+    return (_jsxs("div", { onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleInternalDrop, 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, dragOverMinutes !== null && (_jsx("div", { className: "absolute left-4 right-1 bg-accent/10 border border-dashed border-accent/50 rounded-sm z-[40] pointer-events-none", style: {
+                            top: `${(dragOverMinutes / 60) * 80}px`,
+                            height: '20px',
+                        } })), 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,7 +2,6 @@ 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) {
@@ -39,15 +38,15 @@ export const CalendarItemWrapper = ({ task, position, onDragStart, onResize, ren
     const displayHeight = previewEstimatedTime ? `${(previewEstimatedTime / 60) * 80}px` : position.height;
     return (_jsx("div", { draggable: !!onDragStart, onDragStart: (e) => {
             onDragStart?.(e, task.id);
-            setTimeout(() => {
-                const el = e.currentTarget;
-                if (el)
-                    el.style.pointerEvents = 'none';
-            }, 0);
+            const el = e.currentTarget;
+            if (el) {
+                el.style.opacity = '0.4';
+            }
         }, onDragEnd: (e) => {
             const el = e.currentTarget;
-            if (el)
-                el.style.pointerEvents = '';
+            if (el) {
+                el.style.opacity = '';
+            }
         }, style: {
             height: displayHeight,
             width: position.width,

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

@@ -4,7 +4,6 @@ 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,32 +8,19 @@ 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, }) => {
-    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 tasksWithPosition = useMemo(() => calculateTaskPositions(tasks), [tasks]);
+    const tasksByHour = useMemo(() => groupTasksByHour(tasksWithPosition), [tasksWithPosition]);
     const handleDragStart = (e, taskId) => {
         e.dataTransfer.setData('taskId', taskId);
     };
-    const handleDrop = (e, hour) => {
+    const handleDrop = (e, hour, minutes) => {
         const taskId = e.dataTransfer.getData('taskId');
         if (taskId && onTaskDrop) {
-            onTaskDrop(taskId, hour);
+            onTaskDrop(taskId, hour, minutes);
         }
     };
     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/types.d.ts

@@ -17,7 +17,7 @@ export type TCalendarLikeProps = {
     tasks: TCalendarTask[];
     hours?: number[];
     renderTask: (task: TCalendarTask) => ReactNode;
-    onTaskDrop?: (taskId: string, hour: number) => void;
+    onTaskDrop?: (taskId: string, hour: number, minutes: number) => void;
     onTaskResize?: (taskId: string, newEstimatedTime: number) => void;
     onTaskClick?: (taskId: string) => void;
     onCreateTask?: (hour: number, minutes: number, estimatedTime: number) => void;

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

@@ -1,18 +1,11 @@
 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) => {
-        const isValid = t.dueDate && !isNaN(t.dueDate.getTime());
-        if (!isValid)
-            console.warn('calculateTaskPositions: invalid date for task:', t.id, t.dueDate);
-        return isValid;
-    })
+        .filter((t) => t.dueDate && !isNaN(t.dueDate.getTime()))
         .sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime());
-    console.log('calculateTaskPositions: tasksToRender:', tasksToRender);
     const columns = [];
     tasksToRender.forEach((task) => {
         const startTime = task.dueDate.getTime();
@@ -63,7 +56,6 @@ export const calculateTaskPositions = (tasks) => {
                 const left = clusterColumnsCount > 1 ? `${(colIndex * 100) / clusterColumnsCount}%` : '0%';
                 const top = `${(task.dueDate.getMinutes() / 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 },
@@ -74,14 +66,12 @@ 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.4",
+  "version": "1.1.6",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",