@app-studio/web 0.9.36 → 0.9.37

package/dist/web.esm.js

@@ -7604,7 +7604,12 @@ var cloneColumns = inputColumns => inputColumns.map(column => Object.assign({},
 var useKanbanBoardState = _ref => {
   var {
     columns: initialColumns,
-    onChange
+    onChange,
+    onCardMove,
+    onCardCreate: onCardCreateProp,
+    onCardDelete: onCardDeleteProp,
+    onCardTitleChange: onCardTitleChangeProp,
+    onCardDescriptionChange: onCardDescriptionChangeProp
   } = _ref;
   var [columns, setColumns] = useState(initialColumns);
   var [draggedCardId, setDraggedCardId] = useState(null);
@@ -7681,11 +7686,16 @@ var useKanbanBoardState = _ref => {
         cardId
       };
       if (options != null && options.shouldCommit) {
+        var originalSourceColumn = prevColumns.find(c => c.id === sourceColumnId);
+        var originalTargetColumn = prevColumns.find(c => c.id === targetColumnId);
+        if (card && originalSourceColumn && originalTargetColumn) {
+          onCardMove == null || onCardMove(card, originalSourceColumn, originalTargetColumn);
+        }
         onChange == null || onChange(updatedColumns);
       }
       return updatedColumns;
     });
-  }, [onChange]);
+  }, [onChange, onCardMove]);
   var handleCardDragStart = useCallback((columnId, cardId, event) => {
     dragStateRef.current = {
       columnId,
@@ -7744,6 +7754,62 @@ var useKanbanBoardState = _ref => {
       shouldCommit: true
     });
   }, [applyMove, getRelativeDropPosition]);
+  var handleCardCreate = useCallback((card, column) => {
+    if (onCardCreateProp) {
+      onCardCreateProp(card, column);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: [...col.cards, card]
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardCreateProp]);
+  var handleCardDelete = useCallback((card, column) => {
+    if (onCardDeleteProp) {
+      onCardDeleteProp(card, column);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: col.cards.filter(c => c.id !== card.id)
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardDeleteProp]);
+  var handleCardTitleChange = useCallback((card, column, newTitle) => {
+    if (onCardTitleChangeProp) {
+      onCardTitleChangeProp(card, column, newTitle);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: col.cards.map(c => c.id === card.id ? Object.assign({}, c, {
+          title: newTitle
+        }) : c)
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardTitleChangeProp]);
+  var handleCardDescriptionChange = useCallback((card, column, newDescription) => {
+    if (onCardDescriptionChangeProp) {
+      onCardDescriptionChangeProp(card, column, newDescription);
+      return;
+    }
+    setColumns(prevColumns => {
+      var updatedColumns = prevColumns.map(col => col.id === column.id ? Object.assign({}, col, {
+        cards: col.cards.map(c => c.id === card.id ? Object.assign({}, c, {
+          description: newDescription
+        }) : c)
+      }) : col);
+      onChange == null || onChange(updatedColumns);
+      return updatedColumns;
+    });
+  }, [onChange, onCardDescriptionChangeProp]);
   return {
     columns,
     draggedCardId,
@@ -7753,7 +7819,11 @@ var useKanbanBoardState = _ref => {
     onColumnDragOver: handleColumnDragOver,
     onCardDragOver: handleCardDragOver,
     onColumnDrop: handleColumnDrop,
-    onCardDrop: handleCardDrop
+    onCardDrop: handleCardDrop,
+    onCardCreate: handleCardCreate,
+    onCardDelete: handleCardDelete,
+    onCardTitleChange: handleCardTitleChange,
+    onCardDescriptionChange: handleCardDescriptionChange
   };
 };
 
@@ -7771,18 +7841,94 @@ var KanbanBoardView = _ref => {
     onColumnDragOver,
     onCardDragOver,
     onColumnDrop,
-    onCardDrop
+    onCardDrop,
+    onCardCreate,
+    onCardDelete,
+    onCardTitleChange,
+    onCardDescriptionChange
   } = _ref;
-  var renderDefaultCard = React.useCallback(card => (/*#__PURE__*/React.createElement(Vertical, Object.assign({
+  var [editingCardId, setEditingCardId] = React.useState(null);
+  var [editingDescriptionCardId, setEditingDescriptionCardId] = React.useState(null);
+  var [editedTitle, setEditedTitle] = React.useState('');
+  var [editedDescription, setEditedDescription] = React.useState('');
+  var handleTitleClick = React.useCallback(card => {
+    setEditingCardId(card.id);
+    setEditedTitle(card.title);
+  }, []);
+  var handleDescriptionClick = React.useCallback(card => {
+    setEditingDescriptionCardId(card.id);
+    setEditedDescription(card.description || '');
+  }, []);
+  var handleTitleChange = React.useCallback(event => {
+    setEditedTitle(event.target.value);
+  }, []);
+  var handleDescriptionChange = React.useCallback(event => {
+    setEditedDescription(event.target.value);
+  }, []);
+  var handleTitleBlur = React.useCallback((card, column) => {
+    if (editingCardId === card.id) {
+      onCardTitleChange == null || onCardTitleChange(card, column, editedTitle);
+      setEditingCardId(null);
+    }
+  }, [editingCardId, editedTitle, onCardTitleChange]);
+  var handleDescriptionBlur = React.useCallback((card, column) => {
+    if (editingDescriptionCardId === card.id) {
+      onCardDescriptionChange == null || onCardDescriptionChange(card, column, editedDescription);
+      setEditingDescriptionCardId(null);
+    }
+  }, [editingDescriptionCardId, editedDescription, onCardDescriptionChange]);
+  var handleTitleKeyDown = React.useCallback((event, card, column) => {
+    if (event.key === 'Enter') {
+      handleTitleBlur(card, column);
+    }
+  }, [handleTitleBlur]);
+  var handleDescriptionKeyDown = React.useCallback((event, card, column) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      handleDescriptionBlur(card, column);
+    }
+  }, [handleDescriptionBlur]);
+  var renderDefaultCard = React.useCallback((card, column) => (/*#__PURE__*/React.createElement(Vertical, Object.assign({
     gap: 4,
     alignItems: "flex-start"
-  }, views == null ? void 0 : views.cardContent), /*#__PURE__*/React.createElement(Text, {
+  }, views == null ? void 0 : views.cardContent), editingCardId === card.id ? (/*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: editedTitle,
+    onChange: handleTitleChange,
+    onBlur: () => handleTitleBlur(card, column),
+    onKeyDown: event => handleTitleKeyDown(event, card, column),
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '4px 8px',
+      fontSize: '14px',
+      fontWeight: '600',
+      width: '100%'
+    }
+  })) : (/*#__PURE__*/React.createElement(Text, {
     weight: "semiBold",
-    size: "sm"
-  }, card.title), card.description && (/*#__PURE__*/React.createElement(Text, {
     size: "sm",
-    color: "#475467"
-  }, card.description)))), [views == null ? void 0 : views.cardContent]);
+    onClick: () => handleTitleClick(card)
+  }, card.title)), card.description && (editingDescriptionCardId === card.id ? (/*#__PURE__*/React.createElement("textarea", {
+    value: editedDescription,
+    onChange: handleDescriptionChange,
+    onBlur: () => handleDescriptionBlur(card, column),
+    onKeyDown: event => handleDescriptionKeyDown(event, card, column),
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '4px 8px',
+      fontSize: '14px',
+      width: '100%',
+      minHeight: '60px'
+    }
+  })) : (/*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    color: "#475467",
+    onClick: () => handleDescriptionClick(card)
+  }, card.description))))), [views == null ? void 0 : views.cardContent, editingCardId, editedTitle, editingDescriptionCardId, editedDescription, handleTitleBlur, handleTitleChange, handleTitleClick, handleTitleKeyDown, handleDescriptionBlur, handleDescriptionChange, handleDescriptionClick, handleDescriptionKeyDown]);
   return /*#__PURE__*/React.createElement(View, Object.assign({
     display: "flex",
     alignItems: "flex-start",
@@ -7806,27 +7952,21 @@ var KanbanBoardView = _ref => {
   }, views == null ? void 0 : views.columnHeader), renderColumnHeader ? renderColumnHeader(column) : (/*#__PURE__*/React.createElement(Text, Object.assign({
     weight: "semiBold",
     size: "md"
-  }, views == null ? void 0 : views.columnTitle), column.title))), /*#__PURE__*/React.createElement(Vertical, Object.assign({
+  }, views == null ? void 0 : views.columnTitle), column.title)), /*#__PURE__*/React.createElement(View, {
+    onClick: () => onCardCreate == null ? void 0 : onCardCreate({
+      id: "new-card-" + Date.now(),
+      title: 'Nouvelle carte'
+    }, column)
+  }, /*#__PURE__*/React.createElement(PlusIcon, {
+    widthHeight: 16
+  }))), /*#__PURE__*/React.createElement(Vertical, Object.assign({
     gap: 12,
     minHeight: 40,
     onDragOver: event => onColumnDragOver(column.id, event),
     onDrop: event => onColumnDrop(column.id, event),
     opacity: draggedCardId && hoveredColumnId === column.id ? 0.9 : undefined,
     transition: "all 0.15s ease-in-out"
-  }, views == null ? void 0 : views.columnBody), column.cards.length === 0 && (/*#__PURE__*/React.createElement(View, Object.assign({
-    padding: 12,
-    borderWidth: "1px",
-    borderStyle: "dashed",
-    borderColor: "#d0d5dd",
-    borderRadius: 8,
-    backgroundColor: "rgba(255, 255, 255, 0.6)",
-    textAlign: "center",
-    color: "#667085",
-    fontSize: "14px"
-  }, views == null ? void 0 : views.emptyState), renderEmptyState ? renderEmptyState(column) : (/*#__PURE__*/React.createElement(Text, {
-    size: "sm",
-    color: "#667085"
-  }, "Drop cards here")))), column.cards.map(card => (/*#__PURE__*/React.createElement(View, {
+  }, views == null ? void 0 : views.columnBody), column.cards.map(card => (/*#__PURE__*/React.createElement(View, {
     key: card.id,
     position: "relative"
   }, /*#__PURE__*/React.createElement(View, Object.assign({
@@ -7846,7 +7986,35 @@ var KanbanBoardView = _ref => {
       event.stopPropagation();
       onCardDrop(column.id, card.id, event);
     }
-  }, views == null ? void 0 : views.card), renderCard ? renderCard(card, column) : renderDefaultCard(card)))))), column.footer && (/*#__PURE__*/React.createElement(View, Object.assign({}, views == null ? void 0 : views.columnFooter), column.footer))))));
+  }, views == null ? void 0 : views.card), /*#__PURE__*/React.createElement(View, {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/React.createElement(View, {
+    flexGrow: 1
+  }, renderCard ? renderCard(card, column) : renderDefaultCard(card, column)), /*#__PURE__*/React.createElement(View, {
+    onClick: () => onCardDelete == null ? void 0 : onCardDelete(card, column)
+  }, /*#__PURE__*/React.createElement(TrashIcon, {
+    widthHeight: 16
+  }))))))), /*#__PURE__*/React.createElement(View, Object.assign({
+    padding: 12,
+    borderWidth: "1px",
+    borderStyle: "dashed",
+    borderColor: "#d0d5dd",
+    borderRadius: 8,
+    backgroundColor: "rgba(255, 255, 255, 0.6)",
+    textAlign: "center",
+    color: "#667085",
+    fontSize: "14px"
+  }, views == null ? void 0 : views.emptyState, {
+    onClick: () => onCardCreate == null ? void 0 : onCardCreate({
+      id: "new-card-" + Date.now(),
+      title: 'Nouvelle carte'
+    }, column)
+  }), renderEmptyState ? renderEmptyState(column) : (/*#__PURE__*/React.createElement(Text, {
+    size: "sm",
+    color: "#667085"
+  }, "Create a new card")))), column.footer && (/*#__PURE__*/React.createElement(View, Object.assign({}, views == null ? void 0 : views.columnFooter), column.footer))))));
 };
 
 var KanbanBoardComponent = props => {
@@ -8273,11 +8441,111 @@ var iconButtonStyles = {
   border: 'none'
 };
 
-var ResizeHandle = _ref => {
+var EventContent = _ref => {
+  var {
+    event,
+    onTitleChange,
+    onDescriptionChange,
+    onEventDelete
+  } = _ref;
+  var [isEditingTitle, setIsEditingTitle] = useState(false);
+  var [editedTitle, setEditedTitle] = useState(event.title);
+  var [isEditingDescription, setIsEditingDescription] = useState(false);
+  var [editedDescription, setEditedDescription] = useState(event.description || '');
+  var handleTitleClick = useCallback(() => {
+    setIsEditingTitle(true);
+    setEditedTitle(event.title);
+  }, [event.title]);
+  var handleDescriptionClick = useCallback(() => {
+    setIsEditingDescription(true);
+    setEditedDescription(event.description || '');
+  }, [event.description]);
+  var handleTitleChange = useCallback(e => {
+    setEditedTitle(e.target.value);
+  }, []);
+  var handleDescriptionChange = useCallback(e => {
+    setEditedDescription(e.target.value);
+  }, []);
+  var handleTitleBlur = useCallback(() => {
+    if (isEditingTitle) {
+      onTitleChange(event, editedTitle);
+      setIsEditingTitle(false);
+    }
+  }, [isEditingTitle, onTitleChange, event, editedTitle]);
+  var handleDescriptionBlur = useCallback(() => {
+    if (isEditingDescription) {
+      onDescriptionChange(event, editedDescription);
+      setIsEditingDescription(false);
+    }
+  }, [isEditingDescription, onDescriptionChange, event, editedDescription]);
+  var handleTitleKeyDown = useCallback(e => {
+    if (e.key === 'Enter') {
+      handleTitleBlur();
+    }
+  }, [handleTitleBlur]);
+  var handleDescriptionKeyDown = useCallback(e => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleDescriptionBlur();
+    }
+  }, [handleDescriptionBlur]);
+  return /*#__PURE__*/React.createElement(Horizontal, {
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap",
+    width: "100%",
+    justifyContent: "space-between"
+  }, isEditingTitle ? (/*#__PURE__*/React.createElement("input", {
+    type: "text",
+    value: editedTitle,
+    onChange: handleTitleChange,
+    onBlur: handleTitleBlur,
+    onKeyDown: handleTitleKeyDown,
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '2px 4px',
+      fontSize: '11px',
+      fontWeight: '500',
+      width: '100%'
+    }
+  })) : (/*#__PURE__*/React.createElement(Text$1, {
+    fontSize: 11,
+    fontWeight: 500,
+    onClick: handleTitleClick
+  }, event.title)), event.description && (isEditingDescription ? (/*#__PURE__*/React.createElement("textarea", {
+    value: editedDescription,
+    onChange: handleDescriptionChange,
+    onBlur: handleDescriptionBlur,
+    onKeyDown: handleDescriptionKeyDown,
+    autoFocus: true,
+    style: {
+      border: '1px solid #d0d5dd',
+      borderRadius: '4px',
+      padding: '2px 4px',
+      fontSize: '11px',
+      width: '100%',
+      minHeight: '40px',
+      marginTop: '4px'
+    }
+  })) : (/*#__PURE__*/React.createElement(Text$1, {
+    fontSize: 11,
+    color: "color.gray.600",
+    onClick: handleDescriptionClick
+  }, event.description))), /*#__PURE__*/React.createElement(Center, {
+    onClick: () => onEventDelete(event),
+    cursor: "pointer",
+    marginLeft: 4
+  }, /*#__PURE__*/React.createElement(TrashIcon, {
+    widthHeight: 12
+  })));
+};
+var ResizeHandle = _ref2 => {
   var {
     direction,
     onMouseDown
-  } = _ref;
+  } = _ref2;
   var [isHovered, setIsHovered] = useState(false);
   return /*#__PURE__*/React.createElement(View, Object.assign({
     position: "absolute",
@@ -8302,7 +8570,7 @@ var ResizeHandle = _ref => {
 var MONTH_EVENT_ROW_HEIGHT = 22;
 var MONTH_EVENT_ROW_GAP = 4;
 var MONTH_EVENT_TOP_OFFSET = 32;
-var Calendar = _ref2 => {
+var Calendar = _ref3 => {
   var {
     initialDate = new Date(),
     initialView = 'month',
@@ -8314,11 +8582,14 @@ var Calendar = _ref2 => {
     onDateChange,
     onViewChange,
     onEventAdd,
+    onEventTitleChange,
+    onEventDescriptionChange,
+    onEventDelete,
     views = {},
     width = '100%',
     maxWidth = 1200,
     weekStartsOn = 0
-  } = _ref2;
+  } = _ref3;
   var {
     getColor
   } = useTheme();
@@ -8345,6 +8616,31 @@ var Calendar = _ref2 => {
   React.useEffect(() => {
     setLocalEvents(events);
   }, [events]);
+  var handleEventTitleChange = useCallback((event, newTitle) => {
+    if (onEventTitleChange) {
+      onEventTitleChange(event, newTitle);
+      return;
+    }
+    setLocalEvents(prevEvents => prevEvents.map(ev => ev.id === event.id ? Object.assign({}, ev, {
+      title: newTitle
+    }) : ev));
+  }, [onEventTitleChange]);
+  var handleEventDescriptionChange = useCallback((event, newDescription) => {
+    if (onEventDescriptionChange) {
+      onEventDescriptionChange(event, newDescription);
+      return;
+    }
+    setLocalEvents(prevEvents => prevEvents.map(ev => ev.id === event.id ? Object.assign({}, ev, {
+      description: newDescription
+    }) : ev));
+  }, [onEventDescriptionChange]);
+  var handleEventDelete = useCallback(event => {
+    if (onEventDelete) {
+      onEventDelete(event);
+      return;
+    }
+    setLocalEvents(prevEvents => prevEvents.filter(ev => ev.id !== event.id));
+  }, [onEventDelete]);
   // Get the month start for current date
   var currentMonth = useMemo(() => getFirstDayOfMonth(currentDate), [currentDate]);
   // Generate calendar dates based on view
@@ -8705,12 +9001,12 @@ var Calendar = _ref2 => {
         top: event.segmentRow * (MONTH_EVENT_ROW_HEIGHT + MONTH_EVENT_ROW_GAP) + "px",
         onMouseDown: e => handleEventMouseDown(e, event),
         title: event.title
-      }, views.event), /*#__PURE__*/React.createElement(View, {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        width: "100%"
-      }, event.title), showLeftHandle && (/*#__PURE__*/React.createElement(ResizeHandle, {
+      }, views.event), /*#__PURE__*/React.createElement(EventContent, {
+        event: event,
+        onTitleChange: handleEventTitleChange,
+        onDescriptionChange: handleEventDescriptionChange,
+        onEventDelete: handleEventDelete
+      }), showLeftHandle && (/*#__PURE__*/React.createElement(ResizeHandle, {
         direction: "left",
         onMouseDown: e => handleResizeStart(e, event, 'left')
       })), showRightHandle && (/*#__PURE__*/React.createElement(ResizeHandle, {
@@ -8771,12 +9067,12 @@ var Calendar = _ref2 => {
         userSelect: "none",
         onMouseDown: e => handleEventMouseDown(e, event),
         title: event.title
-      }, views.event), /*#__PURE__*/React.createElement(View, {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        width: "100%"
-      }, event.title), /*#__PURE__*/React.createElement(ResizeHandle, {
+      }, views.event), /*#__PURE__*/React.createElement(EventContent, {
+        event: event,
+        onTitleChange: handleEventTitleChange,
+        onDescriptionChange: handleEventDescriptionChange,
+        onEventDelete: handleEventDelete
+      }), /*#__PURE__*/React.createElement(ResizeHandle, {
         direction: "left",
         onMouseDown: e => handleResizeStart(e, event, 'left')
       }), /*#__PURE__*/React.createElement(ResizeHandle, {
@@ -8823,7 +9119,7 @@ var Calendar = _ref2 => {
       }, views.timeSlot), dayEvents.filter(event => {
         // Simple check if event starts in this hour
         if (event.start.includes('T')) {
-          var eventHour = parseInt(event.start.split('T')[1].split(':')[0]);
+          var eventHour = parseInt(event.start.split('T').split(':'));
           return eventHour === hour;
         }
         return false;
@@ -8836,7 +9132,12 @@ var Calendar = _ref2 => {
           borderLeftColor: colorConfig.border,
           color: colorConfig.text,
           marginBottom: 4
-        }, views.event), event.title);
+        }, views.event), /*#__PURE__*/React.createElement(EventContent, {
+          event: event,
+          onTitleChange: handleEventTitleChange,
+          onDescriptionChange: handleEventDescriptionChange,
+          onEventDelete: handleEventDelete
+        }));
       })));
     }));
   };