@kkkarsss/ui 1.2.0 → 1.2.1

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

@@ -3,12 +3,12 @@ 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,
+export const CalendarItem = ({ title, isCompleted, isInWork, onClick, 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: _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: [typeof title === 'string' ? (_jsx(Typo, { size: "s", weight: "500", textDecoration: isCompleted ? 'line-through' : 'none', className: "truncate", children: title })) : (title), isInWork && icon] }), onClick && (_jsx("div", { onClick: (e) => {
+                        e.stopPropagation();
+                        onClick();
+                    }, className: "cursor-pointer hover:text-primary transition-colors pr-l", children: _jsx(ExternalLink, { size: 14 }) }))] }) }));
 };

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/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.1",
   "description": "UI Kit for kkkarsss projects",
   "type": "module",
   "main": "dist/index.js",