- Documentation and Vertical Lane Padding

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/trello-board/controllers/BoardContainer.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import Container from "../dnd/Container";
 import Draggable from "../dnd/Draggable";
@@ -9,6 +9,44 @@ import Lane from "./Lane";
 import { PopoverWrapper } from "react-popopo";
 import * as actions from "../../../redux/trello/trello.actions.js";
 
+/**
+ * BoardContainer is a React component that represents a Trello-like board.
+ * It uses Redux for state management and provides a variety of props to customize its behavior.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {string} props.id - The unique identifier for the board
+ * @param {Object} props.components - Custom components to use in the board
+ * @param {Object} props.data - The initial data for the board
+ * @param {boolean} props.draggable - Whether the board is draggable
+ * @param {boolean} props.laneDraggable - Whether the lanes in the board are draggable
+ * @param {string} props.laneDragClass - The CSS class to apply when a lane is being dragged
+ * @param {string} props.laneDropClass - The CSS class to apply when a lane is dropped
+ * @param {Object} props.style - The CSS styles to apply to the board
+ * @param {Function} props.onDataChange - Callback function when the board data changes
+ * @param {Function} props.onCardAdd - Callback function when a card is added
+ * @param {Function} props.onCardUpdate - Callback function when a card is updated
+ * @param {Function} props.onCardClick - Callback function when a card is clicked
+ * @param {Function} props.onBeforeCardDelete - Callback function before a card is deleted
+ * @param {Function} props.onCardDelete - Callback function when a card is deleted
+ * @param {Function} props.onLaneScroll - Callback function when a lane is scrolled
+ * @param {Function} props.onLaneClick - Callback function when a lane is clicked
+ * @param {Function} props.onLaneAdd - Callback function when a lane is added
+ * @param {Function} props.onLaneDelete - Callback function when a lane is deleted
+ * @param {Function} props.onLaneUpdate - Callback function when a lane is updated
+ * @param {boolean} props.editable - Whether the board is editable
+ * @param {boolean} props.canAddLanes - Whether lanes can be added to the board
+ * @param {Object} props.laneStyle - The CSS styles to apply to the lanes
+ * @param {Function} props.onCardMoveAcrossLanes - Callback function when a card is moved across lanes
+ * @param {string} props.orientation - The orientation of the board ("horizontal" or "vertical")
+ * @param {Function} props.eventBusHandle - Function to handle events from the event bus
+ * @param {Function} props.handleLaneDragStart - Callback function when a lane drag starts
+ * @param {Function} props.handleLaneDragEnd - Callback function when a lane drag ends
+ * @param {Object} props.reducerData - The initial data for the Redux reducer
+ * @param {Object} props.cardStyle - The CSS styles to apply to the cards
+ * @param {Object} props.otherProps - Any other props to pass to the board
+ * @returns {JSX.Element} A Trello-like board
+ */
 const BoardContainer = ({
   id,
   components,

client/src/components/trello-board/controllers/Lane.jsx

@@ -12,6 +12,55 @@ import Draggable from "../dnd/Draggable.jsx";
 
 import * as actions from "../../../redux/trello/trello.actions.js";
 
+/**
+ * Lane is a React component that represents a lane in a Trello-like board.
+ * It uses Redux for state management and provides a variety of props to customize its behavior.
+ *
+ * @component
+ * @param {Object} props - Component props
+ * @param {Object} props.actions - Redux actions
+ * @param {string} props.id - The unique identifier for the lane
+ * @param {string} props.boardId - The unique identifier for the board
+ * @param {string} props.title - The title of the lane
+ * @param {number} props.index - The index of the lane
+ * @param {Function} props.laneSortFunction - Function to sort the cards in the lane
+ * @param {Object} props.style - The CSS styles to apply to the lane
+ * @param {Object} props.cardStyle - The CSS styles to apply to the cards
+ * @param {Object} props.tagStyle - The CSS styles to apply to the tags
+ * @param {Object} props.titleStyle - The CSS styles to apply to the title
+ * @param {Object} props.labelStyle - The CSS styles to apply to the label
+ * @param {Array} props.cards - The cards in the lane
+ * @param {string} props.label - The label of the lane
+ * @param {boolean} props.draggable - Whether the lane is draggable
+ * @param {boolean} props.collapsibleLanes - Whether the lanes are collapsible
+ * @param {boolean} props.droppable - Whether the lane is droppable
+ * @param {Function} props.onCardMoveAcrossLanes - Callback function when a card is moved across lanes
+ * @param {Function} props.onCardClick - Callback function when a card is clicked
+ * @param {Function} props.onBeforeCardDelete - Callback function before a card is deleted
+ * @param {Function} props.onCardDelete - Callback function when a card is deleted
+ * @param {Function} props.onCardAdd - Callback function when a card is added
+ * @param {Function} props.onCardUpdate - Callback function when a card is updated
+ * @param {Function} props.onLaneDelete - Callback function when a lane is deleted
+ * @param {Function} props.onLaneUpdate - Callback function when a lane is updated
+ * @param {Function} props.onLaneClick - Callback function when a lane is clicked
+ * @param {Function} props.onLaneScroll - Callback function when a lane is scrolled
+ * @param {boolean} props.editable - Whether the lane is editable
+ * @param {boolean} props.laneDraggable - Whether the lane is draggable
+ * @param {boolean} props.cardDraggable - Whether the cards are draggable
+ * @param {string} props.cardDragClass - The CSS class to apply when a card is being dragged
+ * @param {string} props.cardDropClass - The CSS class to apply when a card is dropped
+ * @param {boolean} props.canAddLanes - Whether lanes can be added to the board
+ * @param {boolean} props.hideCardDeleteIcon - Whether to hide the card delete icon
+ * @param {Object} props.components - Custom components to use in the lane
+ * @param {Function} props.getCardDetails - Function to get the details of a card
+ * @param {Function} props.handleDragStart - Callback function when a drag starts
+ * @param {Function} props.handleDragEnd - Callback function when a drag ends
+ * @param {string} props.orientation - The orientation of the lane ("horizontal" or "vertical")
+ * @param {string} props.className - The CSS class to apply to the lane
+ * @param {number} props.currentPage - The current page of the lane
+ * @param {Object} props.otherProps - Any other props to pass to the lane
+ * @returns {JSX.Element} A lane in a Trello-like board
+ */
 function Lane({
   actions,
   id,

client/src/components/trello-board/styles/Base.js

@@ -21,7 +21,9 @@ const getSectionStyles = (props) => {
       display: inline-flex;
     `;
   }
-  return "";
+  return `
+    margin-bottom: 10px;
+  `;
 };
 
 export const GlobalStyle = createGlobalStyle`
@@ -75,10 +77,12 @@ export const StyleVertical = styled.div`
   .react-trello-column-header {
     text-align: left;
   }
+
   .smooth-dnd-container {
     // TODO ? This is the question. We need the same drag-zone we get in horizontal mode
     min-height: 50px; // Not needed, just for extra landing space
   }
+
   .react-trello-board {
     overflow-y: hidden !important;
   }
@@ -131,8 +135,7 @@ export const CustomPopoverContent = styled(PopoverContent)`
 `;
 
 export const BoardWrapper = styled.div`
-  background-color: #3179ba;
-  // TODO: This was defaulted to hidden, changed to accommodate board
+  background-color: #ffffff;
   overflow-y: scroll;
   padding: 5px;
   color: #393939;
@@ -152,8 +155,8 @@ export const Section = styled.section`
   margin: 2px 2px;
   position: relative;
   padding: 5px;
-  ${getSectionStyles};
   flex-direction: column;
+  ${getSectionStyles};
 `;
 
 export const LaneHeader = styled(Header)`
@@ -185,9 +188,6 @@ export const ScrollableLane = styled.div`
   min-width: 250px;
   overflow-x: hidden;
   align-self: center;
-  // TODO: This was commented out to match existing board style
-  //max-height: 90vh;
-  //margin-top: 10px;
   flex-direction: column;
   justify-content: space-between;
 `;