@app-studio/web 0.9.36 → 0.9.37

package/dist/web.umd.development.js

@@ -7569,7 +7569,12 @@
   var useKanbanBoardState = _ref => {
     var {
       columns: initialColumns,
-      onChange
+      onChange,
+      onCardMove,
+      onCardCreate: onCardCreateProp,
+      onCardDelete: onCardDeleteProp,
+      onCardTitleChange: onCardTitleChangeProp,
+      onCardDescriptionChange: onCardDescriptionChangeProp
     } = _ref;
     var [columns, setColumns] = React.useState(initialColumns);
     var [draggedCardId, setDraggedCardId] = React.useState(null);
@@ -7646,11 +7651,16 @@
           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 = React.useCallback((columnId, cardId, event) => {
       dragStateRef.current = {
         columnId,
@@ -7709,6 +7719,62 @@
         shouldCommit: true
       });
     }, [applyMove, getRelativeDropPosition]);
+    var handleCardCreate = React.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 = React.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 = React.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 = React.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,
@@ -7718,7 +7784,11 @@
       onColumnDragOver: handleColumnDragOver,
       onCardDragOver: handleCardDragOver,
       onColumnDrop: handleColumnDrop,
-      onCardDrop: handleCardDrop
+      onCardDrop: handleCardDrop,
+      onCardCreate: handleCardCreate,
+      onCardDelete: handleCardDelete,
+      onCardTitleChange: handleCardTitleChange,
+      onCardDescriptionChange: handleCardDescriptionChange
     };
   };
 
@@ -7736,18 +7806,94 @@
       onColumnDragOver,
       onCardDragOver,
       onColumnDrop,
-      onCardDrop
+      onCardDrop,
+      onCardCreate,
+      onCardDelete,
+      onCardTitleChange,
+      onCardDescriptionChange
     } = _ref;
-    var renderDefaultCard = React__default.useCallback(card => (/*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+    var [editingCardId, setEditingCardId] = React__default.useState(null);
+    var [editingDescriptionCardId, setEditingDescriptionCardId] = React__default.useState(null);
+    var [editedTitle, setEditedTitle] = React__default.useState('');
+    var [editedDescription, setEditedDescription] = React__default.useState('');
+    var handleTitleClick = React__default.useCallback(card => {
+      setEditingCardId(card.id);
+      setEditedTitle(card.title);
+    }, []);
+    var handleDescriptionClick = React__default.useCallback(card => {
+      setEditingDescriptionCardId(card.id);
+      setEditedDescription(card.description || '');
+    }, []);
+    var handleTitleChange = React__default.useCallback(event => {
+      setEditedTitle(event.target.value);
+    }, []);
+    var handleDescriptionChange = React__default.useCallback(event => {
+      setEditedDescription(event.target.value);
+    }, []);
+    var handleTitleBlur = React__default.useCallback((card, column) => {
+      if (editingCardId === card.id) {
+        onCardTitleChange == null || onCardTitleChange(card, column, editedTitle);
+        setEditingCardId(null);
+      }
+    }, [editingCardId, editedTitle, onCardTitleChange]);
+    var handleDescriptionBlur = React__default.useCallback((card, column) => {
+      if (editingDescriptionCardId === card.id) {
+        onCardDescriptionChange == null || onCardDescriptionChange(card, column, editedDescription);
+        setEditingDescriptionCardId(null);
+      }
+    }, [editingDescriptionCardId, editedDescription, onCardDescriptionChange]);
+    var handleTitleKeyDown = React__default.useCallback((event, card, column) => {
+      if (event.key === 'Enter') {
+        handleTitleBlur(card, column);
+      }
+    }, [handleTitleBlur]);
+    var handleDescriptionKeyDown = React__default.useCallback((event, card, column) => {
+      if (event.key === 'Enter' && !event.shiftKey) {
+        event.preventDefault();
+        handleDescriptionBlur(card, column);
+      }
+    }, [handleDescriptionBlur]);
+    var renderDefaultCard = React__default.useCallback((card, column) => (/*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
       gap: 4,
       alignItems: "flex-start"
-    }, views == null ? void 0 : views.cardContent), /*#__PURE__*/React__default.createElement(Text, {
+    }, views == null ? void 0 : views.cardContent), editingCardId === card.id ? (/*#__PURE__*/React__default.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__default.createElement(Text, {
       weight: "semiBold",
-      size: "sm"
-    }, card.title), card.description && (/*#__PURE__*/React__default.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__default.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__default.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__default.createElement(appStudio.View, Object.assign({
       display: "flex",
       alignItems: "flex-start",
@@ -7771,27 +7917,21 @@
     }, views == null ? void 0 : views.columnHeader), renderColumnHeader ? renderColumnHeader(column) : (/*#__PURE__*/React__default.createElement(Text, Object.assign({
       weight: "semiBold",
       size: "md"
-    }, views == null ? void 0 : views.columnTitle), column.title))), /*#__PURE__*/React__default.createElement(appStudio.Vertical, Object.assign({
+    }, views == null ? void 0 : views.columnTitle), column.title)), /*#__PURE__*/React__default.createElement(appStudio.View, {
+      onClick: () => onCardCreate == null ? void 0 : onCardCreate({
+        id: "new-card-" + Date.now(),
+        title: 'Nouvelle carte'
+      }, column)
+    }, /*#__PURE__*/React__default.createElement(PlusIcon, {
+      widthHeight: 16
+    }))), /*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(appStudio.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__default.createElement(Text, {
-      size: "sm",
-      color: "#667085"
-    }, "Drop cards here")))), column.cards.map(card => (/*#__PURE__*/React__default.createElement(appStudio.View, {
+    }, views == null ? void 0 : views.columnBody), column.cards.map(card => (/*#__PURE__*/React__default.createElement(appStudio.View, {
       key: card.id,
       position: "relative"
     }, /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
@@ -7811,7 +7951,35 @@
         event.stopPropagation();
         onCardDrop(column.id, card.id, event);
       }
-    }, views == null ? void 0 : views.card), renderCard ? renderCard(card, column) : renderDefaultCard(card)))))), column.footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.columnFooter), column.footer))))));
+    }, views == null ? void 0 : views.card), /*#__PURE__*/React__default.createElement(appStudio.View, {
+      display: "flex",
+      justifyContent: "space-between",
+      alignItems: "flex-start"
+    }, /*#__PURE__*/React__default.createElement(appStudio.View, {
+      flexGrow: 1
+    }, renderCard ? renderCard(card, column) : renderDefaultCard(card, column)), /*#__PURE__*/React__default.createElement(appStudio.View, {
+      onClick: () => onCardDelete == null ? void 0 : onCardDelete(card, column)
+    }, /*#__PURE__*/React__default.createElement(TrashIcon, {
+      widthHeight: 16
+    }))))))), /*#__PURE__*/React__default.createElement(appStudio.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__default.createElement(Text, {
+      size: "sm",
+      color: "#667085"
+    }, "Create a new card")))), column.footer && (/*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({}, views == null ? void 0 : views.columnFooter), column.footer))))));
   };
 
   var KanbanBoardComponent = props => {
@@ -8238,11 +8406,111 @@
     border: 'none'
   };
 
-  var ResizeHandle = _ref => {
+  var EventContent = _ref => {
+    var {
+      event,
+      onTitleChange,
+      onDescriptionChange,
+      onEventDelete
+    } = _ref;
+    var [isEditingTitle, setIsEditingTitle] = React.useState(false);
+    var [editedTitle, setEditedTitle] = React.useState(event.title);
+    var [isEditingDescription, setIsEditingDescription] = React.useState(false);
+    var [editedDescription, setEditedDescription] = React.useState(event.description || '');
+    var handleTitleClick = React.useCallback(() => {
+      setIsEditingTitle(true);
+      setEditedTitle(event.title);
+    }, [event.title]);
+    var handleDescriptionClick = React.useCallback(() => {
+      setIsEditingDescription(true);
+      setEditedDescription(event.description || '');
+    }, [event.description]);
+    var handleTitleChange = React.useCallback(e => {
+      setEditedTitle(e.target.value);
+    }, []);
+    var handleDescriptionChange = React.useCallback(e => {
+      setEditedDescription(e.target.value);
+    }, []);
+    var handleTitleBlur = React.useCallback(() => {
+      if (isEditingTitle) {
+        onTitleChange(event, editedTitle);
+        setIsEditingTitle(false);
+      }
+    }, [isEditingTitle, onTitleChange, event, editedTitle]);
+    var handleDescriptionBlur = React.useCallback(() => {
+      if (isEditingDescription) {
+        onDescriptionChange(event, editedDescription);
+        setIsEditingDescription(false);
+      }
+    }, [isEditingDescription, onDescriptionChange, event, editedDescription]);
+    var handleTitleKeyDown = React.useCallback(e => {
+      if (e.key === 'Enter') {
+        handleTitleBlur();
+      }
+    }, [handleTitleBlur]);
+    var handleDescriptionKeyDown = React.useCallback(e => {
+      if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        handleDescriptionBlur();
+      }
+    }, [handleDescriptionBlur]);
+    return /*#__PURE__*/React__default.createElement(appStudio.Horizontal, {
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      width: "100%",
+      justifyContent: "space-between"
+    }, isEditingTitle ? (/*#__PURE__*/React__default.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__default.createElement(appStudio.Text, {
+      fontSize: 11,
+      fontWeight: 500,
+      onClick: handleTitleClick
+    }, event.title)), event.description && (isEditingDescription ? (/*#__PURE__*/React__default.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__default.createElement(appStudio.Text, {
+      fontSize: 11,
+      color: "color.gray.600",
+      onClick: handleDescriptionClick
+    }, event.description))), /*#__PURE__*/React__default.createElement(appStudio.Center, {
+      onClick: () => onEventDelete(event),
+      cursor: "pointer",
+      marginLeft: 4
+    }, /*#__PURE__*/React__default.createElement(TrashIcon, {
+      widthHeight: 12
+    })));
+  };
+  var ResizeHandle = _ref2 => {
     var {
       direction,
       onMouseDown
-    } = _ref;
+    } = _ref2;
     var [isHovered, setIsHovered] = React.useState(false);
     return /*#__PURE__*/React__default.createElement(appStudio.View, Object.assign({
       position: "absolute",
@@ -8267,7 +8535,7 @@
   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',
@@ -8279,11 +8547,14 @@
       onDateChange,
       onViewChange,
       onEventAdd,
+      onEventTitleChange,
+      onEventDescriptionChange,
+      onEventDelete,
       views = {},
       width = '100%',
       maxWidth = 1200,
       weekStartsOn = 0
-    } = _ref2;
+    } = _ref3;
     var {
       getColor
     } = appStudio.useTheme();
@@ -8310,6 +8581,31 @@
     React__default.useEffect(() => {
       setLocalEvents(events);
     }, [events]);
+    var handleEventTitleChange = React.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 = React.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 = React.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 = React.useMemo(() => getFirstDayOfMonth(currentDate), [currentDate]);
     // Generate calendar dates based on view
@@ -8670,12 +8966,12 @@
           top: event.segmentRow * (MONTH_EVENT_ROW_HEIGHT + MONTH_EVENT_ROW_GAP) + "px",
           onMouseDown: e => handleEventMouseDown(e, event),
           title: event.title
-        }, views.event), /*#__PURE__*/React__default.createElement(appStudio.View, {
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          width: "100%"
-        }, event.title), showLeftHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
+        }, views.event), /*#__PURE__*/React__default.createElement(EventContent, {
+          event: event,
+          onTitleChange: handleEventTitleChange,
+          onDescriptionChange: handleEventDescriptionChange,
+          onEventDelete: handleEventDelete
+        }), showLeftHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
           direction: "left",
           onMouseDown: e => handleResizeStart(e, event, 'left')
         })), showRightHandle && (/*#__PURE__*/React__default.createElement(ResizeHandle, {
@@ -8736,12 +9032,12 @@
           userSelect: "none",
           onMouseDown: e => handleEventMouseDown(e, event),
           title: event.title
-        }, views.event), /*#__PURE__*/React__default.createElement(appStudio.View, {
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          whiteSpace: "nowrap",
-          width: "100%"
-        }, event.title), /*#__PURE__*/React__default.createElement(ResizeHandle, {
+        }, views.event), /*#__PURE__*/React__default.createElement(EventContent, {
+          event: event,
+          onTitleChange: handleEventTitleChange,
+          onDescriptionChange: handleEventDescriptionChange,
+          onEventDelete: handleEventDelete
+        }), /*#__PURE__*/React__default.createElement(ResizeHandle, {
           direction: "left",
           onMouseDown: e => handleResizeStart(e, event, 'left')
         }), /*#__PURE__*/React__default.createElement(ResizeHandle, {
@@ -8788,7 +9084,7 @@
         }, 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;
@@ -8801,7 +9097,12 @@
             borderLeftColor: colorConfig.border,
             color: colorConfig.text,
             marginBottom: 4
-          }, views.event), event.title);
+          }, views.event), /*#__PURE__*/React__default.createElement(EventContent, {
+            event: event,
+            onTitleChange: handleEventTitleChange,
+            onDescriptionChange: handleEventDescriptionChange,
+            onEventDelete: handleEventDelete
+          }));
         })));
       }));
     };