@kkkarsss/ui 1.2.0 → 1.2.2

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

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

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

@@ -1,14 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ExternalLink } from 'lucide-react';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 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,
+export const CalendarItem = ({ title, isCompleted, isInWork, icon, color, className }) => {
+    return (_jsx("div", { className: jc('w-full h-full rounded-[8px] border flex flex-col transition-colors relative', !color && (isCompleted ? 'border-secondary bg-accent' : 'border-accent bg-accent'), className), style: {
+            backgroundColor: color ? color : 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 }) }))] }));
+        }, children: _jsx(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: [title, isInWork && icon] }) }) }));
 };

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

@@ -1,5 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState, useEffect, useRef } from 'react';
 import { CalendarItemWrapper } from './calendar-item-wrapper';
 import { CalendarSlot } from './calendar-slot';
 import { calculateTaskPositions, groupTasksBySlot } from './utils';
@@ -8,10 +8,55 @@ export * from './types';
 export * from './calendar-item-wrapper';
 export * from './calendar-item';
 const DEFAULT_SLOTS = Array.from({ length: 96 }, (_, i) => i);
-export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, renderTask, onTaskDrop, onTaskResize, onCreateTask, }) => {
+const CurrentTimeLine = () => {
+    const [now, setNow] = useState(new Date());
+    useEffect(() => {
+        const interval = setInterval(() => {
+            setNow(new Date());
+        }, 60000);
+        return () => clearInterval(interval);
+    }, []);
+    const topOffset = useMemo(() => {
+        const hours = now.getHours();
+        const minutes = now.getMinutes();
+        const totalMinutes = hours * 60 + minutes;
+        // 15 минут = 20 пикселей (высота слота)
+        return totalMinutes * (20 / 15);
+    }, [now]);
+    return (_jsxs("div", { className: "absolute left-0 right-0 z-50 pointer-events-none flex items-center", style: { top: `${topOffset}px` }, children: [_jsx("div", { className: "w-2 h-2 rounded-full bg-red-500 -ml-1" }), _jsx("div", { className: "flex-1 h-[2px] bg-red-500" })] }));
+};
+export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, showCurrentTime = true, autoScrollToCurrentTime = true, renderTask, onTaskDrop, onTaskResize, onCreateTask, }) => {
+    const containerRef = useRef(null);
     const [isDragging, setIsDragging] = useState(false);
     const tasksWithPosition = useMemo(() => calculateTaskPositions(tasks), [tasks]);
     const tasksBySlot = useMemo(() => groupTasksBySlot(tasksWithPosition), [tasksWithPosition]);
+    useEffect(() => {
+        if (showCurrentTime && autoScrollToCurrentTime && containerRef.current) {
+            const now = new Date();
+            const hours = now.getHours();
+            const minutes = now.getMinutes();
+            const totalMinutes = hours * 60 + minutes;
+            // 15 минут = 20 пикселей (высота слота)
+            const topOffset = totalMinutes * (20 / 15);
+            // Находим ближайший скроллируемый родитель или используем окно
+            const scrollParent = (node) => {
+                if (!node)
+                    return null;
+                const style = window.getComputedStyle(node);
+                if (/(auto|scroll)/.test(style.overflow + style.overflowY))
+                    return node;
+                return scrollParent(node.parentElement);
+            };
+            const parent = scrollParent(containerRef.current);
+            if (parent) {
+                const containerTop = containerRef.current.getBoundingClientRect().top + parent.scrollTop;
+                parent.scrollTo({
+                    top: containerTop + topOffset - parent.clientHeight / 2,
+                    behavior: 'smooth',
+                });
+            }
+        }
+    }, [showCurrentTime, autoScrollToCurrentTime]);
     const handleDragStart = (e, task) => {
         setIsDragging(true);
         e.dataTransfer.setData('taskId', task.id);
@@ -40,8 +85,8 @@ export const CalendarLike = ({ tasks, slots = DEFAULT_SLOTS, renderTask, onTaskD
             onTaskDrop(taskId, hour, minutes);
         }
     };
-    return (_jsx("div", { className: jc('relative border-l border-secondary/20 ml-12 select-none', isDragging ? 'is-dragging' : ''), children: slots.map((slotIndex) => {
-            const tasksForSlot = tasksBySlot[slotIndex];
-            return (_jsx(CalendarSlot, { slotIndex: slotIndex, onDrop: handleDrop, onCreateTask: onCreateTask, 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));
-        }) }));
+    return (_jsxs("div", { ref: containerRef, className: jc('relative border-l border-secondary/20 ml-12 select-none', isDragging ? 'is-dragging' : ''), children: [showCurrentTime && _jsx(CurrentTimeLine, {}), slots.map((slotIndex) => {
+                const tasksForSlot = tasksBySlot[slotIndex];
+                return (_jsx(CalendarSlot, { slotIndex: slotIndex, onDrop: handleDrop, onCreateTask: onCreateTask, 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

@@ -1,7 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Clock } from 'lucide-react';
+import { Circle, CircleCheckBig, Clock } from 'lucide-react';
 import { useState } from 'react';
 import { CalendarLike, CalendarItem } from './calendar-like';
+import { Cell } from '../cell/cell';
+import { Typo } from '../text/typo';
 const meta = {
     title: 'Information/CalendarLike',
     component: CalendarLike,
@@ -89,6 +91,19 @@ export const Interactive = {
             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."] }), _jsxs("div", { style: { marginBottom: '20px', color: 'var(--secondary)', display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("input", { type: "checkbox", checked: showCompleted, onChange: (e) => setShowCompleted(e.target.checked), id: "show-completed" }), _jsx("label", { htmlFor: "show-completed", style: { cursor: 'pointer' }, children: "\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043D\u043D\u044B\u0435" })] }), _jsx(CalendarLike, { tasks: filteredTasks, 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) })) })] }));
+        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."] }), _jsxs("div", { style: { marginBottom: '20px', color: 'var(--secondary)', display: 'flex', alignItems: 'center', gap: '8px' }, children: [_jsx("input", { type: "checkbox", checked: showCompleted, onChange: (e) => setShowCompleted(e.target.checked), id: "show-completed" }), _jsx("label", { htmlFor: "show-completed", style: { cursor: 'pointer' }, children: "\u041F\u043E\u043A\u0430\u0437\u044B\u0432\u0430\u0442\u044C \u0437\u0430\u0432\u0435\u0440\u0448\u0435\u043D\u043D\u044B\u0435" })] }), _jsx(CalendarLike, { tasks: filteredTasks, onTaskDrop: handleTaskDrop, onTaskResize: handleTaskResize, onCreateTask: handleCreateTask, renderTask: (task) => {
+                        const isCompleted = task.isCompleted;
+                        return (_jsx(CalendarItem, { title: _jsx(Cell, { subtitle: _jsx(Typo, { size: 'xs', weight: '500', children: "CODE-1" }), title: _jsx(Typo, { weight: "500", textDecoration: isCompleted ? 'line-through' : 'none', className: "truncate", children: task.title }), accLeft: [
+                                    {
+                                        icon: isCompleted ? CircleCheckBig : Circle,
+                                        color: 'var(--accent)',
+                                        strokeWidth: 3,
+                                        onClick: (e) => {
+                                            e?.stopPropagation();
+                                            setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, isCompleted: !t.isCompleted } : t)));
+                                        },
+                                    },
+                                ] }), color: task.color, isCompleted: isCompleted, isInWork: task.isInWork, icon: task.isInWork ? _jsx(Clock, { size: 12, className: "text-white animate-pulse" }) : undefined, onClick: () => handleTaskClick(task.id) }));
+                    } })] }));
     },
 };

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

@@ -17,6 +17,8 @@ export type TCalendarLikeProps = {
     tasks: TCalendarTask[];
     hours?: number[];
     slots?: number[];
+    showCurrentTime?: boolean;
+    autoScrollToCurrentTime?: boolean;
     renderTask: (task: TCalendarTask) => ReactNode;
     onTaskDrop?: (taskId: string, hour: number, minutes: number) => void;
     onTaskResize?: (taskId: string, newEstimatedTime: number) => void;

package/dist/ui/information/cell/cell.d.ts

@@ -3,7 +3,7 @@ import { type FC, type MouseEvent, type ReactElement } from 'react';
 import type { TTypoProps, TUIColor } from '../text/typo';
 export type TAccessory = {
     icon: FC<LucideProps>;
-    onClick?: VoidFunction;
+    onClick?: (e?: MouseEvent<HTMLDivElement>) => void;
     color?: string;
     strokeWidth?: number;
     bgc?: CSSStyleDeclaration['backgroundColor'];

package/dist/ui/layout/icon-action/icon-action.d.ts

@@ -1,8 +1,8 @@
 import type { LucideProps } from 'lucide-react';
-import type { FC, ReactElement } from 'react';
+import type { FC, MouseEvent, ReactElement } from 'react';
 type TIconActionProps = {
     icon: ReactElement<LucideProps>;
-    onClick?: VoidFunction;
+    onClick?: (e?: MouseEvent<HTMLDivElement>) => void;
     bgc?: CSSStyleDeclaration['backgroundColor'];
 };
 export declare const IconAction: FC<TIconActionProps>;

package/dist/ui/layout/icon-action/icon-action.js

@@ -4,7 +4,7 @@ export const IconAction = ({ onClick, icon, bgc }) => {
     const onClickHandler = (e) => {
         e.stopPropagation();
         if (onClick) {
-            onClick();
+            onClick(e);
         }
     };
     return (_jsx("div", { className: jc('relative z-10 flex h-8 w-8 items-center justify-center rounded transition-all duration-200 ease-in-out', onClick ? 'hover:bg-[var(--shadow)] cursor-pointer' : undefined), onClick: onClickHandler, children: _jsx("span", { className: "absolute left-1/2 top-1/2 h-4 w-4 -translate-x-1/2 -translate-y-1/2 rounded-full", style: { backgroundColor: bgc }, children: icon }) }));

package/package.json

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