@kkkarsss/ui 1.0.0 → 1.1.0

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

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

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

@@ -0,0 +1,44 @@
+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, }) => {
+    const [selection, setSelection] = useState(null);
+    const handleDragOver = (e) => {
+        e.preventDefault();
+    };
+    const handleMouseDown = (e) => {
+        if (e.button !== 0 || !onCreateTask)
+            return;
+        if (e.target.closest('.calendar-item'))
+            return;
+        const rect = e.currentTarget.getBoundingClientRect();
+        const offsetY = e.clientY - rect.top;
+        const startMinutes = Math.floor(offsetY / 20) * 15;
+        setSelection({
+            startMinutes,
+            currentEstimatedTime: 15,
+        });
+        const startY = e.clientY;
+        const onMouseMove = (moveEvent) => {
+            const deltaY = moveEvent.clientY - startY;
+            const newEstimatedTime = Math.max(15, Math.round(((deltaY / 80) * 60) / 15) * 15);
+            setSelection((prev) => (prev ? { ...prev, currentEstimatedTime: newEstimatedTime } : null));
+        };
+        const onMouseUp = () => {
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
+            setSelection((finalSelection) => {
+                if (finalSelection) {
+                    onCreateTask(hour, finalSelection.startMinutes, finalSelection.currentEstimatedTime);
+                }
+                return null;
+            });
+        };
+        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: {
+                            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.d.ts

@@ -0,0 +1,15 @@
+import { type FC, type ReactNode, type DragEvent } from 'react';
+import { TCalendarTask } from './types';
+export type TCalendarItemWrapperProps = {
+    task: TCalendarTask;
+    position: {
+        width: string;
+        left: string;
+        top: string;
+        height: string;
+    };
+    onDragStart?: (e: DragEvent<HTMLDivElement>, id: string) => void;
+    onResize?: (id: string, newEstimatedTime: number) => void;
+    renderTask: (task: TCalendarTask) => ReactNode;
+};
+export declare const CalendarItemWrapper: FC<TCalendarItemWrapperProps>;

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

@@ -0,0 +1,58 @@
+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, }) => {
+    const [previewEstimatedTime, setPreviewEstimatedTime] = useState(null);
+    const handleMouseDown = (e) => {
+        if (onResize) {
+            e.preventDefault();
+            e.stopPropagation();
+            const startY = e.clientY;
+            const startHeight = (task.estimatedTime / 60) * 80;
+            const onMouseMove = (moveEvent) => {
+                const deltaY = moveEvent.clientY - startY;
+                const newHeight = Math.max(20, startHeight + deltaY);
+                const newEstimatedTime = Math.max(15, Math.round(((newHeight / 80) * 60) / 15) * 15);
+                setPreviewEstimatedTime(newEstimatedTime);
+            };
+            const onMouseUp = (upEvent) => {
+                const deltaY = upEvent.clientY - startY;
+                const newHeight = Math.max(20, startHeight + deltaY);
+                const newEstimatedTime = Math.max(15, Math.round(((newHeight / 80) * 60) / 15) * 15);
+                if (newEstimatedTime !== task.estimatedTime) {
+                    onResize(task.id, newEstimatedTime);
+                }
+                setPreviewEstimatedTime(null);
+                document.removeEventListener('mousemove', onMouseMove);
+                document.removeEventListener('mouseup', onMouseUp);
+                const clickPreventer = (e) => {
+                    e.stopImmediatePropagation();
+                    document.removeEventListener('click', clickPreventer, true);
+                };
+                document.addEventListener('click', clickPreventer, true);
+            };
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        }
+    };
+    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);
+        }, onDragEnd: (e) => {
+            const el = e.currentTarget;
+            if (el)
+                el.style.pointerEvents = '';
+        }, style: {
+            height: displayHeight,
+            width: position.width,
+            left: position.left,
+            top: position.top,
+        }, className: jc('calendar-item absolute p-[2px] transition-all flex flex-col z-50 select-none', onDragStart ? 'cursor-move' : '', 'hover:z-[60]', previewEstimatedTime !== null ? 'transition-none z-[60]' : ''), children: _jsxs("div", { className: "w-full h-full relative group/item", children: [renderTask(task), onResize && (_jsx("div", { className: "absolute bottom-0 left-0 right-1 h-2 cursor-ns-resize group/resize flex items-center justify-center z-[70]", onMouseDown: handleMouseDown, children: _jsx("div", { className: "w-8 h-1 bg-accent/30 rounded-full opacity-0 group-hover/resize:opacity-100 transition-opacity" }) }))] }) }));
+};

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

@@ -0,0 +1,13 @@
+import { type FC, type ReactNode } from 'react';
+export type TCalendarItemProps = {
+    title: string;
+    description?: string;
+    isCompleted?: boolean;
+    isInWork?: boolean;
+    onClick?: () => void;
+    icon?: ReactNode;
+    estimatedTime?: number;
+    color?: string;
+    className?: string;
+};
+export declare const CalendarItem: FC<TCalendarItemProps>;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ExternalLink } from 'lucide-react';
+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, }) => {
+    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,
+        }, children: [_jsxs(Flex, { gap: "8px", align: "center", justify: "space-between", type: "fill", children: [_jsxs(Flex, { gap: "8px", align: "center", type: "fill", className: "min-w-0 flex-1", children: [_jsx(Typo, { size: "s", weight: "500", textDecoration: isCompleted ? 'line-through' : 'none', className: "truncate", children: title }), isInWork && icon] }), onClick && (_jsx("div", { onClick: (e) => {
+                            e.stopPropagation();
+                            onClick();
+                        }, className: "cursor-pointer hover:text-primary transition-colors p-0.5", children: _jsx(ExternalLink, { size: 14 }) }))] }), description && estimatedTime > 30 && (_jsx("div", { className: "truncate", children: _jsx(Typo, { size: "xs", color: "secondary", children: description }) }))] }));
+};

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

@@ -1,24 +1,6 @@
-import { type FC, type ReactNode, type DragEvent } from 'react';
-export type TCalendarItemProps = {
-    id: string;
-    title: string;
-    description?: string;
-    isCompleted?: boolean;
-    isInWork?: boolean;
-    onDragStart?: (e: DragEvent<HTMLDivElement>, id: string) => void;
-    onClick?: (id: string) => void;
-    onResize?: (id: string, newEstimatedTime: number) => void;
-    icon?: ReactNode;
-    estimatedTime?: number;
-    width?: string;
-    left?: string;
-    className?: string;
-    color?: string;
-};
-export declare const CalendarItem: FC<TCalendarItemProps>;
-export type TCalendarLikeProps = {
-    hours?: number[];
-    onDrop?: (e: DragEvent<HTMLDivElement>, hour: number) => void;
-    renderItem?: (hour: number) => ReactNode;
-};
+import { type FC } from 'react';
+import { TCalendarLikeProps } from './types';
+export * from './types';
+export * from './calendar-item-wrapper';
+export * from './calendar-item';
 export declare const CalendarLike: FC<TCalendarLikeProps>;

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

@@ -1,71 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ExternalLink } from 'lucide-react';
-import { useState } from 'react';
-import { jc } from '../../../utils';
-import { Flex } from '../../layout';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { CalendarHourSlot } from './calendar-hour-slot';
+import { CalendarItemWrapper } from './calendar-item-wrapper';
+import { calculateTaskPositions, groupTasksByHour } from './utils';
 import { Offset } from '../../layout';
-import { Typo } from '../text/typo';
-export const CalendarItem = ({ id, title, description, isCompleted, isInWork, onDragStart, onClick, onResize, icon, estimatedTime = 30, width = '100%', left = '0%', className, color, }) => {
-    const [previewEstimatedTime, setPreviewEstimatedTime] = useState(null);
-    const handleMouseDown = (e) => {
-        if (onResize) {
-            e.preventDefault();
-            e.stopPropagation();
-            const startY = e.clientY;
-            const startHeight = (estimatedTime / 60) * 80;
-            const onMouseMove = (moveEvent) => {
-                const deltaY = moveEvent.clientY - startY;
-                const newHeight = Math.max(20, startHeight + deltaY);
-                // Round to nearest 15 minutes
-                const newEstimatedTime = Math.max(15, Math.round(((newHeight / 80) * 60) / 15) * 15);
-                setPreviewEstimatedTime(newEstimatedTime);
-            };
-            const onMouseUp = (upEvent) => {
-                const deltaY = upEvent.clientY - startY;
-                const newHeight = Math.max(20, startHeight + deltaY);
-                const newEstimatedTime = Math.max(15, Math.round(((newHeight / 80) * 60) / 15) * 15);
-                if (newEstimatedTime !== estimatedTime) {
-                    onResize(id, newEstimatedTime);
-                }
-                setPreviewEstimatedTime(null);
-                document.removeEventListener('mousemove', onMouseMove);
-                document.removeEventListener('mouseup', onMouseUp);
-                // Prevent click event after resize
-                const clickPreventer = (e) => {
-                    e.stopImmediatePropagation();
-                    document.removeEventListener('click', clickPreventer, true);
-                };
-                document.addEventListener('click', clickPreventer, true);
-            };
-            document.addEventListener('mousemove', onMouseMove);
-            document.addEventListener('mouseup', onMouseUp);
-        }
-    };
-    const displayEstimatedTime = previewEstimatedTime ?? estimatedTime;
-    return (_jsx("div", { draggable: !!onDragStart, onDragStart: (e) => {
-            onDragStart?.(e, id);
-            // Delay applying pointer-events-none to allow the drag operation to start
-            setTimeout(() => {
-                const el = e.currentTarget;
-                if (el)
-                    el.style.pointerEvents = 'none';
-            }, 0);
-        }, onDragEnd: (e) => {
-            const el = e.currentTarget;
-            if (el)
-                el.style.pointerEvents = '';
-        }, style: { height: `${(displayEstimatedTime / 60) * 80}px`, width, left }, className: jc('calendar-item absolute p-[2px] transition-all flex flex-col z-50 select-none', onDragStart ? 'cursor-move' : '', 'hover:z-[60]', previewEstimatedTime !== null ? 'transition-none z-[60]' : '', className), children: _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' : ''), previewEstimatedTime !== null ? '!opacity-100' : ''), style: {
-                backgroundColor: color ? `${color}80` : undefined,
-                borderColor: color ? color : undefined,
-            }, children: [_jsxs(Flex, { gap: "8px", align: "center", justify: "space-between", type: "fill", children: [_jsxs(Flex, { gap: "8px", align: "center", type: "fill", className: "min-w-0 flex-1", children: [_jsx(Typo, { size: "s", weight: "500", textDecoration: isCompleted ? 'line-through' : 'none', className: "truncate", children: title }), isInWork && icon] }), onClick && (_jsx("div", { onClick: (e) => {
-                                e.stopPropagation();
-                                onClick(id);
-                            }, className: "cursor-pointer hover:text-primary transition-colors p-0.5", children: _jsx(ExternalLink, { size: 14 }) }))] }), description && displayEstimatedTime > 30 && (_jsx("div", { className: "truncate", children: _jsx(Typo, { size: "xs", color: "secondary", children: description }) })), onResize && !isCompleted && (_jsx("div", { className: "absolute bottom-0 left-0 right-1 h-2 cursor-ns-resize group/resize flex items-center justify-center", onMouseDown: handleMouseDown, children: _jsx("div", { className: "w-8 h-1 bg-accent/30 rounded-full opacity-0 group-hover/resize:opacity-100 transition-opacity" }) }))] }) }));
-};
+export * from './types';
+export * from './calendar-item-wrapper';
+export * from './calendar-item';
 const DEFAULT_HOURS = Array.from({ length: 24 }, (_, i) => i);
-export const CalendarLike = ({ hours = DEFAULT_HOURS, onDrop, renderItem }) => {
-    const handleDragOver = (e) => {
-        e.preventDefault();
+export const CalendarLike = ({ tasks, hours = DEFAULT_HOURS, renderTask, onTaskDrop, onTaskResize, onCreateTask, }) => {
+    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 taskId = e.dataTransfer.getData('taskId');
+        if (taskId && onTaskDrop) {
+            onTaskDrop(taskId, hour);
+        }
     };
-    return (_jsx(Offset, { type: 'vertical', children: _jsx("div", { className: "relative border-l border-secondary/20 ml-12", children: hours.map((hour) => (_jsxs("div", { onDragOver: handleDragOver, onDrop: (e) => onDrop?.(e, hour), 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"] }) }), _jsx("div", { className: "pl-4 py-1 relative h-full", children: renderItem?.(hour) })] }, hour))) }) }));
+    return (_jsx(Offset, { type: 'vertical', children: _jsx("div", { className: "relative border-l border-secondary/20 ml-12 select-none", children: hours.map((hour) => (_jsx(CalendarHourSlot, { hour: hour, onDrop: handleDrop, onCreateTask: onCreateTask, children: tasksByHour[hour]?.map((task) => (_jsx(CalendarItemWrapper, { task: task, position: task.position, onDragStart: handleDragStart, onResize: onTaskResize, renderTask: renderTask }, task.id))) }, hour))) }) }));
 };

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CalendarLike } from './calendar-like';
+declare const meta: Meta<typeof CalendarLike>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Interactive: Story;

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

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Clock } from 'lucide-react';
+import { useState } from 'react';
+import { CalendarLike, CalendarItem } from './calendar-like';
+const meta = {
+    title: 'Information/CalendarLike',
+    component: CalendarLike,
+    tags: ['autodocs'],
+};
+export default meta;
+const getTodayAtHour = (hour, minutes = 0) => {
+    const date = new Date();
+    date.setHours(hour, minutes, 0, 0);
+    return date;
+};
+const INITIAL_TASKS = [
+    {
+        id: '1',
+        title: 'Утренняя почта',
+        description: 'Проверить входящие и ответить на важные письма',
+        dueDate: getTodayAtHour(9),
+        estimatedTime: 45,
+        color: '#3b82f6',
+    },
+    {
+        id: '2',
+        title: 'Стендап',
+        dueDate: getTodayAtHour(10),
+        estimatedTime: 15,
+        color: '#10b981',
+        isInWork: true,
+    },
+    {
+        id: '3',
+        title: 'Обед',
+        dueDate: getTodayAtHour(13),
+        estimatedTime: 60,
+        color: '#f59e0b',
+    },
+    {
+        id: '4',
+        title: 'Разработка фичи',
+        description: 'Реализация логики календаря',
+        dueDate: getTodayAtHour(14),
+        estimatedTime: 120,
+        color: '#8b5cf6',
+    },
+    {
+        id: '5',
+        title: 'Завершенная задача',
+        dueDate: getTodayAtHour(17),
+        estimatedTime: 30,
+        isCompleted: true,
+    },
+];
+export const Interactive = {
+    render: () => {
+        const [tasks, setTasks] = useState(INITIAL_TASKS);
+        const handleTaskDrop = (taskId, hour) => {
+            console.log(`Task ${taskId} dropped at hour ${hour}`);
+            setTasks((prev) => prev.map((t) => {
+                if (t.id === taskId) {
+                    const newDate = new Date(t.dueDate);
+                    newDate.setHours(hour, 0, 0, 0);
+                    return { ...t, dueDate: newDate };
+                }
+                return t;
+            }));
+        };
+        const handleTaskResize = (taskId, newEstimatedTime) => {
+            console.log(`Task ${taskId} resized to ${newEstimatedTime} minutes`);
+            setTasks((prev) => prev.map((t) => (t.id === taskId ? { ...t, estimatedTime: newEstimatedTime } : t)));
+        };
+        const handleCreateTask = (hour, minutes, estimatedTime) => {
+            console.log(`Create task at ${hour}:${minutes} with duration ${estimatedTime}`);
+            const newTask = {
+                id: Math.random().toString(36).substr(2, 9),
+                title: 'Новая задача',
+                dueDate: getTodayAtHour(hour, minutes),
+                estimatedTime,
+                color: '#8b5cf6',
+            };
+            setTasks((prev) => [...prev, newTask]);
+        };
+        const handleTaskClick = (taskId) => {
+            console.log(`Task ${taskId} clicked`);
+            alert(`Клик по задаче ${taskId}`);
+        };
+        return (_jsxs("div", { style: { height: '600px', overflowY: 'auto', background: 'var(--bg-primary)', padding: '20px' }, children: [_jsxs("p", { style: { marginBottom: '20px', color: 'var(--secondary)' }, children: ["\u0418\u043D\u0441\u0442\u0440\u0443\u043A\u0446\u0438\u044F: ", _jsx("br", {}), "1. \u041F\u0435\u0440\u0435\u0442\u0430\u0441\u043A\u0438\u0432\u0430\u0439\u0442\u0435 \u0437\u0430\u0434\u0430\u0447\u0438 \u043C\u0435\u0436\u0434\u0443 \u0447\u0430\u0441\u0430\u043C\u0438. ", _jsx("br", {}), "2. \u0418\u0437\u043C\u0435\u043D\u044F\u0439\u0442\u0435 \u0434\u043B\u0438\u0442\u0435\u043B\u044C\u043D\u043E\u0441\u0442\u044C \u0437\u0430\u0434\u0430\u0447\u0438, \u043F\u043E\u0442\u044F\u043D\u0443\u0432 \u0437\u0430 \u043D\u0438\u0436\u043D\u0438\u0439 \u043A\u0440\u0430\u0439. ", _jsx("br", {}), "3. \u0421\u043E\u0437\u0434\u0430\u0432\u0430\u0439\u0442\u0435 \u043D\u043E\u0432\u044B\u0435 \u0437\u0430\u0434\u0430\u0447\u0438, \u043A\u043B\u0438\u043A\u043D\u0443\u0432 \u0438 \u043F\u043E\u0442\u044F\u043D\u0443\u0432 \u043D\u0430 \u0441\u0432\u043E\u0431\u043E\u0434\u043D\u043E\u043C \u043C\u0435\u0441\u0442\u0435. ", _jsx("br", {}), "\u0420\u0435\u0437\u0443\u043B\u044C\u0442\u0430\u0442\u044B \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0439 \u0432\u044B\u0432\u043E\u0434\u044F\u0442\u0441\u044F \u0432 \u043A\u043E\u043D\u0441\u043E\u043B\u044C."] }), _jsx(CalendarLike, { tasks: tasks, onTaskDrop: handleTaskDrop, onTaskResize: handleTaskResize, onCreateTask: handleCreateTask, renderTask: (task) => (_jsx(CalendarItem, { title: task.title, description: task.description, color: task.color, isCompleted: task.isCompleted, isInWork: task.isInWork, estimatedTime: task.estimatedTime, icon: task.isInWork ? _jsx(Clock, { size: 12, className: "text-white animate-pulse" }) : undefined, onClick: () => handleTaskClick(task.id) })) })] }));
+    },
+};

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

@@ -0,0 +1,5 @@
+export * from './calendar-like';
+export * from './types';
+export * from './calendar-item';
+export * from './calendar-item-wrapper';
+export * from './calendar-hour-slot';

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

@@ -0,0 +1,5 @@
+export * from './calendar-like';
+export * from './types';
+export * from './calendar-item';
+export * from './calendar-item-wrapper';
+export * from './calendar-hour-slot';

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

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+export type TCalendarTask = {
+    id: string;
+    dueDate: Date;
+    estimatedTime: number;
+    [key: string]: any;
+};
+export type TCalendarTaskWithPosition = TCalendarTask & {
+    position: {
+        width: string;
+        left: string;
+        top: string;
+        height: string;
+    };
+};
+export type TCalendarLikeProps = {
+    tasks: TCalendarTask[];
+    hours?: number[];
+    renderTask: (task: TCalendarTask) => ReactNode;
+    onTaskDrop?: (taskId: string, hour: 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/types.js

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

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

@@ -0,0 +1,3 @@
+import { TCalendarTask, TCalendarTaskWithPosition } from './types';
+export declare const calculateTaskPositions: (tasks: TCalendarTask[]) => TCalendarTaskWithPosition[];
+export declare const groupTasksByHour: (tasksWithPosition: TCalendarTaskWithPosition[]) => Record<number, TCalendarTaskWithPosition[]>;

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

@@ -0,0 +1,71 @@
+export const calculateTaskPositions = (tasks) => {
+    const tasksToRender = [...tasks].filter((t) => t.dueDate).sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime());
+    const columns = [];
+    tasksToRender.forEach((task) => {
+        const startTime = task.dueDate.getTime();
+        let placed = false;
+        for (const column of columns) {
+            const lastTask = column[column.length - 1];
+            const lastEndTime = lastTask.dueDate.getTime() + lastTask.estimatedTime * 60 * 1000;
+            if (startTime >= lastEndTime) {
+                column.push(task);
+                placed = true;
+                break;
+            }
+        }
+        if (!placed) {
+            columns.push([task]);
+        }
+    });
+    const clusters = [];
+    let currentCluster = [];
+    let clusterMaxEndTime = 0;
+    columns.forEach((column) => {
+        let columnMinStartTime = Infinity;
+        column.forEach((t) => {
+            const start = t.dueDate.getTime();
+            if (start < columnMinStartTime)
+                columnMinStartTime = start;
+        });
+        if (columnMinStartTime >= clusterMaxEndTime && currentCluster.length > 0) {
+            clusters.push(currentCluster);
+            currentCluster = [];
+            clusterMaxEndTime = 0;
+        }
+        currentCluster.push(column);
+        column.forEach((t) => {
+            const end = t.dueDate.getTime() + t.estimatedTime * 60 * 1000;
+            if (end > clusterMaxEndTime)
+                clusterMaxEndTime = end;
+        });
+    });
+    if (currentCluster.length > 0)
+        clusters.push(currentCluster);
+    const result = [];
+    clusters.forEach((cluster) => {
+        const clusterColumnsCount = cluster.length;
+        cluster.forEach((column, colIndex) => {
+            column.forEach((task) => {
+                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`;
+                result.push({
+                    ...task,
+                    position: { width, left, top, height },
+                });
+            });
+        });
+    });
+    return result;
+};
+export const groupTasksByHour = (tasksWithPosition) => {
+    const map = {};
+    tasksWithPosition.forEach((task) => {
+        const hour = task.dueDate.getHours();
+        if (!map[hour])
+            map[hour] = [];
+        map[hour].push(task);
+    });
+    return map;
+};

package/package.json

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