- Begin to integrate DND with trello

- Resolve all ESLint issues in DND

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

client/src/components/bill-line-search-select/bill-line-search-select.component.jsx

@@ -3,8 +3,6 @@ import React, { forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import InstanceRenderMgr from "../../utils/instanceRenderMgr";
 
-//To be used as a form element only.
-const { Option } = Select;
 const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps }, ref) => {
   const { t } = useTranslation();
 

client/src/components/production-board-kanban/production-board-kanban.component.jsx

@@ -82,7 +82,6 @@ export function ProductionBoardKanbanComponent({
 
   const handleDragEnd = async (cardId, sourceLaneId, targetLaneId, position, cardDetails) => {
     logImEXEvent("kanban_drag_end");
-
     setIsMoving(true);
 
     const sameColumnTransfer = sourceLaneId === targetLaneId;
@@ -152,6 +151,11 @@ export function ProductionBoardKanbanComponent({
     }
   };
 
+  const onDragEnd = ({ draggableId, type, source, reason, mode, destination, combine }) => {
+    if (!type || type !== "lane") return;
+    console.log("onDragEnd", { draggableId, type, source, reason, mode, destination, combine });
+  };
+
   const totalHrs = data
     .reduce(
       (acc, val) => acc + (val.labhrs?.aggregate?.sum?.mod_lb_hrs || 0) + (val.larhrs?.aggregate?.sum?.mod_lb_hrs || 0),
@@ -260,7 +264,7 @@ export function ProductionBoardKanbanComponent({
         <StickyContainer>
           <Board
             data={boardLanes}
-            handleDragEnd={handleDragEnd}
+            onDragEnd={onDragEnd}
             style={{ height: "100%", backgroundColor: "transparent", overflowY: "auto" }}
             components={components}
             orientation={orientation}
@@ -272,7 +276,7 @@ export function ProductionBoardKanbanComponent({
         <div>
           <Board
             data={boardLanes}
-            handleDragEnd={handleDragEnd}
+            onDragEnd={onDragEnd}
             style={{ backgroundColor: "transparent", overflowY: "auto" }}
             components={components}
             collapsibleLanes

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

@@ -14,14 +14,13 @@ const LaneHeaderComponent = ({
   label,
   title,
   titleStyle,
-  labelStyle,
+  labelStyle
-  laneDraggable
 }) => {
   const { t } = useTranslation();
 
   return (
     <LaneHeader onDoubleClick={onDoubleClick} editLaneTitle={editLaneTitle}>
-      <Title draggable={laneDraggable} style={titleStyle}>
+      <Title style={titleStyle}>
         {editLaneTitle ? (
           <InlineInput
             value={title}
@@ -48,7 +47,6 @@ LaneHeaderComponent.propTypes = {
   updateTitle: PropTypes.func,
   editLaneTitle: PropTypes.bool,
   canAddLanes: PropTypes.bool,
-  laneDraggable: PropTypes.bool,
   label: PropTypes.string,
   title: PropTypes.string,
   onDelete: PropTypes.func,

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

@@ -4,7 +4,7 @@ import { useDispatch, useSelector } from "react-redux";
 // import Container from "../dnd/Container";
 // import Draggable from "../dnd/Draggable";
 
-import { DragDropContext } from "../dnd/lib";
+import { DragDropContext, Droppable } from "../dnd/lib";
 
 import PropTypes from "prop-types";
 import pick from "lodash/pick";
@@ -23,9 +23,6 @@ import * as actions from "../../../redux/trello/trello.actions.js";
  * @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
@@ -38,14 +35,13 @@ import * as actions from "../../../redux/trello/trello.actions.js";
  * @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 {Function} props.onDragEnd - Callback function when a drag ends
  * @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
@@ -56,9 +52,6 @@ const BoardContainer = ({
   components,
   data,
   draggable = false,
-  laneDraggable = true,
-  laneDragClass = "react_trello_dragLaneClass",
-  laneDropClass = "react_trello_dragLaneDropClass",
   style,
   onDataChange = () => {},
   onCardAdd = () => {},
@@ -71,14 +64,13 @@ const BoardContainer = ({
   onLaneAdd = () => {},
   onLaneDelete = () => {},
   onLaneUpdate = () => {},
+  onDragEnd = () => {},
   editable = false,
   canAddLanes = false,
   laneStyle,
   onCardMoveAcrossLanes = () => {},
   orientation = "horizontal",
   eventBusHandle,
-  handleLaneDragStart = () => {},
-  handleLaneDragEnd = () => {},
   reducerData,
   cardStyle,
   ...otherProps
@@ -138,26 +130,38 @@ const BoardContainer = ({
     }
   }, [currentReducerData, reducerData, onDataChange]);
 
-  const onDragStart = useCallback(
+  /**
-    ({ payload }) => {
+   * onDragUpdate
-      handleLaneDragStart(payload.id);
+   * @param draggableId
-    },
+   * @param type
-    [handleLaneDragStart]
+   * @param source
-  );
+   * @param mode
+   * @param combine
+   * @param destination
+   */
+  const onDragUpdate = ({ draggableId, type, source, mode, combine, destination }) => {};
 
-  const onLaneDrop = useCallback(
+  /**
-    ({ removedIndex, addedIndex, payload }) => {
+   * onDragStart
-      if (removedIndex !== addedIndex) {
+   * @type {(function({draggableId: *, type: *, source: *, mode: *}): void)|*}
-        dispatch(actions.moveLane({ oldIndex: removedIndex, newIndex: addedIndex }));
+   */
-        handleLaneDragEnd(removedIndex, addedIndex, payload);
+  const onDragStart = useCallback(({ draggableId, type, source, mode }) => {}, []);
-      }
-    },
-    [dispatch, handleLaneDragEnd]
-  );
 
-  const onDragEnd = (...params) => {
+  /**
-    console.dir(params);
+   * onBeforeDragStart
-  };
+   * @param draggableId
+   * @param type
+   * @param source
+   * @param mode
+   */
+  const onBeforeDragStart = ({ draggableId, type, source, mode }) => {};
+
+  /**
+   * onBeforeCapture
+   * @param draggableId
+   * @param mode
+   */
+  const onBeforeCapture = ({ draggableId, mode }) => {};
 
   const getCardDetails = useCallback(
     (laneId, cardIndex) => {
@@ -166,13 +170,6 @@ const BoardContainer = ({
     [currentReducerData]
   );
 
-  const getLaneDetails = useCallback(
-    (index) => {
-      return currentReducerData.lanes[index];
-    },
-    [currentReducerData]
-  );
-
   const hideEditableLane = () => {
     setAddLaneMode(false);
   };
@@ -193,9 +190,6 @@ const BoardContainer = ({
       components,
       data,
       draggable,
-      laneDraggable,
-      laneDragClass,
-      laneDropClass,
       style,
       onDataChange,
       onCardAdd,
@@ -214,8 +208,6 @@ const BoardContainer = ({
       onCardMoveAcrossLanes,
       orientation,
       eventBusHandle,
-      handleLaneDragStart,
-      handleLaneDragEnd,
       reducerData,
       cardStyle,
       ...otherProps
@@ -233,7 +225,6 @@ const BoardContainer = ({
       "onLaneClick",
       "laneSortFunction",
       "draggable",
-      "laneDraggable",
       "cardDraggable",
       "collapsibleLanes",
       "canAddLanes",
@@ -254,14 +245,12 @@ const BoardContainer = ({
       <PopoverWrapper>
         <DragDropContext
           onDragEnd={onDragEnd}
-          // orientation={orientation === "vertical" ? "vertical" : "horizontal"}
+          onDragUpdate={onDragUpdate}
-          // onDragStart={onDragStart}
+          onDragStart={onDragStart}
-          // dragClass={laneDragClass}
+          onBeforeDragStart={onBeforeDragStart}
-          // dropClass={laneDropClass}
+          onBeforeCapture={onBeforeCapture}
-          // onDrop={onLaneDrop}
+          contextId={groupName}
-          // lockAxis={orientation === "vertical" ? "y" : "x"}
           // getChildPayload={(index) => getLaneDetails(index)}
-          // groupName={groupName}
         >
           {currentReducerData.lanes.map((lane, index) => {
             const { id, droppable, ...laneOtherProps } = lane;
@@ -284,17 +273,17 @@ const BoardContainer = ({
               />
             );
           })}
+          {canAddLanes && (
+            <Droppable type="placeholder" direction={orientation === "horizontal" ? "vertical" : "grid"}>
+              {editable && !addLaneMode ? (
+                <components.NewLaneSection onClick={showEditableLane} />
+              ) : (
+                addLaneMode && <components.NewLaneForm onCancel={hideEditableLane} onAdd={addNewLane} />
+              )}
+            </Droppable>
+          )}
         </DragDropContext>
       </PopoverWrapper>
-      {/*{canAddLanes && (*/}
-      {/*  <Container orientation={orientation === "vertical" ? "vertical" : "horizontal"}>*/}
-      {/*    {editable && !addLaneMode ? (*/}
-      {/*      <components.NewLaneSection onClick={showEditableLane} />*/}
-      {/*    ) : (*/}
-      {/*      addLaneMode && <components.NewLaneForm onCancel={hideEditableLane} onAdd={addNewLane} />*/}
-      {/*    )}*/}
-      {/*  </Container>*/}
-      {/*)}*/}
     </components.BoardWrapper>
   );
 };
@@ -325,15 +314,10 @@ BoardContainer.propTypes = {
   hideCardDeleteIcon: PropTypes.bool,
   handleDragStart: PropTypes.func,
   handleDragEnd: PropTypes.func,
-  handleLaneDragStart: PropTypes.func,
-  handleLaneDragEnd: PropTypes.func,
   style: PropTypes.object,
   tagStyle: PropTypes.object,
-  laneDraggable: PropTypes.bool,
   cardDraggable: PropTypes.bool,
   cardDragClass: PropTypes.string,
-  laneDragClass: PropTypes.string,
-  laneDropClass: PropTypes.string,
   onCardMoveAcrossLanes: PropTypes.func,
   orientation: PropTypes.string,
   cardStyle: PropTypes.object

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

@@ -43,7 +43,6 @@ import { Droppable, Draggable } from "../dnd/lib/index.js";
  * @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
@@ -87,7 +86,6 @@ function Lane({
   onLaneClick = () => {},
   onLaneScroll = () => {},
   editable = false,
-  laneDraggable = false,
   cardDraggable = true,
   cardDragClass,
   cardDropClass,
@@ -178,7 +176,6 @@ function Lane({
   };
 
   const handleCardClick = (e, card) => {
-    console.log("hit");
     onCardClick && onCardClick(card.id, card.metadata, card.laneId);
     e.stopPropagation();
   };
@@ -300,6 +297,7 @@ function Lane({
       <Droppable
         direction={orientation === "horizontal" ? "vertical" : "grid"}
         droppableId={`lane-${index}`}
+        type="lane"
         // dragClass={cardDragClass}
         // dropClass={cardDropClass}
         // onDragStart={onDragStart}
@@ -360,7 +358,6 @@ function Lane({
     collapsibleLanes,
     droppable,
     editable,
-    laneDraggable,
     cardDraggable,
     cardDragClass,
     cardDropClass,
@@ -422,7 +419,6 @@ Lane.propTypes = {
   onLaneClick: PropTypes.func,
   onLaneScroll: PropTypes.func,
   editable: PropTypes.bool,
-  laneDraggable: PropTypes.bool,
   cardDraggable: PropTypes.bool,
   cardDragClass: PropTypes.string,
   cardDropClass: PropTypes.string,

client/src/components/trello-board/dnd/lib/debug/timings.js

@@ -11,7 +11,7 @@ export const forceEnable = () => {
 export const start = (key) => {
   // we want to strip all the code out for production builds
   // draw back: can only do timings in dev env (which seems to be fine for now)
-  if (process.env.NODE_ENV !== "production") {
+  if (import.meta.env.DEV) {
     if (!isTimingsEnabled()) {
       return;
     }
@@ -20,7 +20,7 @@ export const start = (key) => {
   }
 };
 export const finish = (key) => {
-  if (process.env.NODE_ENV !== "production") {
+  if (import.meta.env.DEV) {
     if (!isTimingsEnabled()) {
       return;
     }

client/src/components/trello-board/dnd/lib/dev-warning.js

@@ -1,4 +1,4 @@
-const isProduction = process.env.NODE_ENV === "production";
+const isProduction = import.meta.env.PROD;
 
 // not replacing newlines (which \s does)
 const spacesAndTabs = /[ \t]{2,}/g;

client/src/components/trello-board/dnd/lib/invariant.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-restricted-syntax */
-const isProduction = process.env.NODE_ENV === "production";
+const isProduction = import.meta.env.PROD;
 const prefix = "Invariant failed";
 
 // Want to use this:

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-best-scrollable-droppable.js

@@ -25,7 +25,7 @@ const getScrollableDroppableOver = (target, droppables) => {
   });
   return maybe;
 };
-export default ({ center, destination, droppables }) => {
+const getBestScrollableDroppable = ({ center, destination, droppables }) => {
   // We need to scroll the best droppable frame we can so that the
   // placeholder buffer logic works correctly
 
@@ -41,3 +41,5 @@ export default ({ center, destination, droppables }) => {
   const dimension = getScrollableDroppableOver(center, droppables);
   return dimension;
 };
+
+export default getBestScrollableDroppable;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-droppable-scroll-change.js

@@ -1,7 +1,7 @@
 import getScroll from "./get-scroll";
 import { canScrollDroppable } from "../can-scroll";
 
-export default ({ droppable, subject, center, dragStartTime, shouldUseTimeDampening }) => {
+const getDroppableScrollChange = ({ droppable, subject, center, dragStartTime, shouldUseTimeDampening }) => {
   // We know this has a closestScrollable
   const frame = droppable.frame;
 
@@ -18,3 +18,5 @@ export default ({ droppable, subject, center, dragStartTime, shouldUseTimeDampen
   });
   return scroll && canScrollDroppable(droppable, scroll) ? scroll : null;
 };
+
+export default getDroppableScrollChange;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-percentage.js

@@ -1,6 +1,6 @@
 import { warning } from "../../../dev-warning";
 
-export default ({ startOfRange, endOfRange, current }) => {
+const getPercentage = ({ startOfRange, endOfRange, current }) => {
   const range = endOfRange - startOfRange;
   if (range === 0) {
     warning(`
@@ -11,6 +11,8 @@ export default ({ startOfRange, endOfRange, current }) => {
     return 0;
   }
   const currentInRange = current - startOfRange;
-  const percentage = currentInRange / range;
+
-  return percentage;
+  return currentInRange / range;
 };
+
+export default getPercentage;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/adjust-for-size-limits.js

@@ -1,4 +1,4 @@
-export default ({ container, subject, proposedScroll }) => {
+const adjustForSizeLimits = ({ container, subject, proposedScroll }) => {
   const isTooBigVertically = subject.height > container.height;
   const isTooBigHorizontally = subject.width > container.width;
 
@@ -19,3 +19,5 @@ export default ({ container, subject, proposedScroll }) => {
     y: isTooBigVertically ? 0 : proposedScroll.y
   };
 };
+
+export default adjustForSizeLimits;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/dampen-value-by-time.js

@@ -4,7 +4,8 @@ import minScroll from "./min-scroll";
 
 const accelerateAt = config.durationDampening.accelerateAt;
 const stopAt = config.durationDampening.stopDampeningAt;
-export default (proposedScroll, dragStartTime) => {
+
+const dampenValueByTime = (proposedScroll, dragStartTime) => {
   const startOfRange = dragStartTime;
   const endOfRange = stopAt;
   const now = Date.now();
@@ -29,3 +30,5 @@ export default (proposedScroll, dragStartTime) => {
   const scroll = proposedScroll * config.ease(betweenAccelerateAtAndStopAtPercentage);
   return Math.ceil(scroll);
 };
+
+export default dampenValueByTime;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/get-distance-thresholds.js

@@ -1,14 +1,15 @@
 import config from "../../config";
 
+const getDistanceThresholds = (container, axis) => {
+  const startScrollingFrom = container[axis.size] * config.startFromPercentage;
+  const maxScrollValueAt = container[axis.size] * config.maxScrollAtPercentage;
+  return {
+    startScrollingFrom,
+    maxScrollValueAt
+  };
+};
+
 // all in pixels
 
 // converts the percentages in the config into actual pixel values
-export default (container, axis) => {
+export default getDistanceThresholds;
-  const startScrollingFrom = container[axis.size] * config.startFromPercentage;
-  const maxScrollValueAt = container[axis.size] * config.maxScrollAtPercentage;
-  const thresholds = {
-    startScrollingFrom,
-    maxScrollValueAt
-  };
-  return thresholds;
-};

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/get-value-from-distance.js

@@ -2,7 +2,7 @@ import getPercentage from "../../get-percentage";
 import config from "../../config";
 import minScroll from "./min-scroll";
 
-export default (distanceToEdge, thresholds) => {
+const getValueFromDistance = (distanceToEdge, thresholds) => {
   /*
   // This function only looks at the distance to one edge
   // Example: looking at bottom edge
@@ -50,3 +50,5 @@ export default (distanceToEdge, thresholds) => {
   // scroll will always be a positive integer
   return Math.ceil(scroll);
 };
+
+export default getValueFromDistance;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/get-value.js

@@ -2,7 +2,7 @@ import getValueFromDistance from "./get-value-from-distance";
 import dampenValueByTime from "./dampen-value-by-time";
 import minScroll from "./min-scroll";
 
-export default ({ distanceToEdge, thresholds, dragStartTime, shouldUseTimeDampening }) => {
+const getValue = ({ distanceToEdge, thresholds, dragStartTime, shouldUseTimeDampening }) => {
   const scroll = getValueFromDistance(distanceToEdge, thresholds);
 
   // not enough distance to trigger a minimum scroll
@@ -23,3 +23,5 @@ export default ({ distanceToEdge, thresholds, dragStartTime, shouldUseTimeDampen
 
   return Math.max(dampenValueByTime(scroll, dragStartTime), minScroll);
 };
+
+export default getValue;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/index.js

@@ -1,7 +1,7 @@
 import getDistanceThresholds from "./get-distance-thresholds";
 import getValue from "./get-value";
 
-export default ({ container, distanceToEdges, dragStartTime, axis, shouldUseTimeDampening }) => {
+const getScrollOnAxis = ({ container, distanceToEdges, dragStartTime, axis, shouldUseTimeDampening }) => {
   const thresholds = getDistanceThresholds(container, axis);
   const isCloserToEnd = distanceToEdges[axis.end] < distanceToEdges[axis.start];
   if (isCloserToEnd) {
@@ -22,3 +22,5 @@ export default ({ container, distanceToEdges, dragStartTime, axis, shouldUseTime
     })
   );
 };
+
+export default getScrollOnAxis;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/min-scroll.js

@@ -1,2 +1,4 @@
 // A scroll event will only be triggered when there is a value of at least 1px change
-export default 1;
+const minScroll = 1;
+
+export default minScroll;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/index.js

@@ -5,7 +5,8 @@ import { horizontal, vertical } from "../../../axis";
 
 // will replace -0 and replace with +0
 const clean = apply((value) => (value === 0 ? 0 : value));
-export default ({ dragStartTime, container, subject, center, shouldUseTimeDampening }) => {
+
+const getScroll = ({ dragStartTime, container, subject, center, shouldUseTimeDampening }) => {
   // get distance to each edge
   const distanceToEdges = {
     top: center.y - container.top,
@@ -57,3 +58,5 @@ export default ({ dragStartTime, container, subject, center, shouldUseTimeDampen
   }
   return isEqual(limited, origin) ? null : limited;
 };
+
+export default getScroll;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-window-scroll-change.js

@@ -1,7 +1,7 @@
 import getScroll from "./get-scroll";
 import { canScrollWindow } from "../can-scroll";
 
-export default ({ viewport, subject, center, dragStartTime, shouldUseTimeDampening }) => {
+const getWindowScrollChange = ({ viewport, subject, center, dragStartTime, shouldUseTimeDampening }) => {
   const scroll = getScroll({
     dragStartTime,
     container: viewport.frame,
@@ -11,3 +11,5 @@ export default ({ viewport, subject, center, dragStartTime, shouldUseTimeDampeni
   });
   return scroll && canScrollWindow(viewport, scroll) ? scroll : null;
 };
+
+export default getWindowScrollChange;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/index.js

@@ -3,7 +3,7 @@ import scroll from "./scroll";
 import { invariant } from "../../../invariant";
 import * as timings from "../../../debug/timings";
 
-export default ({ scrollWindow, scrollDroppable }) => {
+const fluidScroller = ({ scrollWindow, scrollDroppable }) => {
   const scheduleWindowScroll = rafSchd(scrollWindow);
   const scheduleDroppableScroll = rafSchd(scrollDroppable);
   let dragging = null;
@@ -59,3 +59,5 @@ export default ({ scrollWindow, scrollDroppable }) => {
     scroll: tryScroll
   };
 };
+
+export default fluidScroller;

client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/scroll.js

@@ -2,8 +2,7 @@ import getBestScrollableDroppable from "./get-best-scrollable-droppable";
 import whatIsDraggedOver from "../../droppable/what-is-dragged-over";
 import getWindowScrollChange from "./get-window-scroll-change";
 import getDroppableScrollChange from "./get-droppable-scroll-change";
-
+const scroll = ({ state, dragStartTime, shouldUseTimeDampening, scrollWindow, scrollDroppable }) => {
-export default ({ state, dragStartTime, shouldUseTimeDampening, scrollWindow, scrollDroppable }) => {
   const center = state.current.page.borderBoxCenter;
   const draggable = state.dimensions.draggables[state.critical.draggable.id];
   const subject = draggable.page.marginBox;
@@ -41,3 +40,5 @@ export default ({ state, dragStartTime, shouldUseTimeDampening, scrollWindow, sc
     scrollDroppable(droppable.descriptor.id, change);
   }
 };
+
+export default scroll;

client/src/components/trello-board/dnd/lib/state/auto-scroller/index.js

@@ -1,7 +1,7 @@
 import createFluidScroller from "./fluid-scroller";
 import createJumpScroller from "./jump-scroller";
 
-export default ({ scrollDroppable, scrollWindow, move }) => {
+const autoScroller = ({ scrollDroppable, scrollWindow, move }) => {
   const fluidScroller = createFluidScroller({
     scrollWindow,
     scrollDroppable
@@ -32,3 +32,5 @@ export default ({ scrollDroppable, scrollWindow, move }) => {
   };
   return scroller;
 };
+
+export default autoScroller;

client/src/components/trello-board/dnd/lib/state/auto-scroller/jump-scroller.js

@@ -3,7 +3,7 @@ import { add, subtract } from "../position";
 import { canScrollWindow, canScrollDroppable, getWindowOverlap, getDroppableOverlap } from "./can-scroll";
 import whatIsDraggedOver from "../droppable/what-is-dragged-over";
 
-export default ({ move, scrollDroppable, scrollWindow }) => {
+const jumpScroller = ({ move, scrollDroppable, scrollWindow }) => {
   const moveByOffset = (state, offset) => {
     const client = add(state.current.client.selection, offset);
     move({
@@ -82,3 +82,5 @@ export default ({ move, scrollDroppable, scrollWindow }) => {
   };
   return jumpScroller;
 };
+
+export default jumpScroller;

client/src/components/trello-board/dnd/lib/state/can-start-drag.js

@@ -1,4 +1,4 @@
-export default (state, id) => {
+const canStartDrag = (state, id) => {
   // Ready to go!
   if (state.phase === "IDLE") {
     return true;
@@ -24,3 +24,5 @@ export default (state, id) => {
   // if cancelling - disallow lifting
   return state.completed.result.reason === "DROP";
 };
+
+export default canStartDrag;

client/src/components/trello-board/dnd/lib/state/create-store.js

@@ -16,12 +16,13 @@ import pendingDrop from "./middleware/pending-drop";
 // This is needed for universal apps that render the component server side.
 // Details: https://github.com/zalmoxisus/redux-devtools-extension#12-advanced-store-setup
 const composeEnhancers =
-  process.env.NODE_ENV !== "production" && typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  import.meta.env.DEV && typeof window !== "undefined" && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
     ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
         name: "react-beautiful-dnd"
       })
     : compose;
-export default ({ dimensionMarshal, focusMarshal, styleMarshal, getResponders, announce, autoScroller }) =>
+
+const createBoardStore = ({ dimensionMarshal, focusMarshal, styleMarshal, getResponders, announce, autoScroller }) =>
   createStore(
     reducer,
     composeEnhancers(
@@ -68,3 +69,5 @@ export default ({ dimensionMarshal, focusMarshal, styleMarshal, getResponders, a
       )
     )
   );
+
+export default createBoardStore;

client/src/components/trello-board/dnd/lib/state/dimension-marshal/dimension-marshal.js

@@ -25,7 +25,7 @@ function shouldPublishUpdate(registry, dragging, entry) {
   return true;
 }
 
-export default (registry, callbacks) => {
+const dimensionMarashal = (registry, callbacks) => {
   let collection = null;
   const publisher = createPublisher({
     callbacks: {
@@ -149,3 +149,5 @@ export default (registry, callbacks) => {
   };
   return marshal;
 };
+
+export default dimensionMarashal;

client/src/components/trello-board/dnd/lib/state/dimension-marshal/get-initial-publish.js

@@ -2,7 +2,7 @@ import * as timings from "../../debug/timings";
 import { toDraggableMap, toDroppableMap } from "../dimension-structures";
 import getViewport from "../../view/window/get-viewport";
 
-export default ({ critical, scrollOptions, registry }) => {
+const getInitialPublish = ({ critical, scrollOptions, registry }) => {
   const timingKey = "Initial collection from DOM";
   timings.start(timingKey);
   const viewport = getViewport();
@@ -26,3 +26,5 @@ export default ({ critical, scrollOptions, registry }) => {
   };
   return result;
 };
+
+export default getInitialPublish;

client/src/components/trello-board/dnd/lib/state/droppable/is-home-of.js

@@ -1 +1,3 @@
-export default (draggable, destination) => draggable.descriptor.droppableId === destination.descriptor.id;
+const isHomeOf = (draggable, destination) => draggable.descriptor.droppableId === destination.descriptor.id;
+
+export default isHomeOf;

client/src/components/trello-board/dnd/lib/state/droppable/scroll-droppable.js

@@ -2,7 +2,7 @@ import { invariant } from "../../invariant";
 import { negate, subtract } from "../position";
 import getSubject from "./util/get-subject";
 
-export default (droppable, newScroll) => {
+const scrollDroppable = (droppable, newScroll) => {
   invariant(droppable.frame);
   const scrollable = droppable.frame;
   const scrollDiff = subtract(newScroll, scrollable.scroll.initial);
@@ -39,3 +39,5 @@ export default (droppable, newScroll) => {
   };
   return result;
 };
+
+export default scrollDroppable;

client/src/components/trello-board/dnd/lib/state/droppable/util/clip.js

@@ -1,6 +1,6 @@
 import { getRect } from "css-box-model";
 
-export default (frame, subject) => {
+const clip = (frame, subject) => {
   const result = getRect({
     top: Math.max(subject.top, frame.top),
     right: Math.min(subject.right, frame.right),
@@ -12,3 +12,5 @@ export default (frame, subject) => {
   }
   return result;
 };
+
+export default clip;

client/src/components/trello-board/dnd/lib/state/droppable/util/get-subject.js

@@ -23,7 +23,8 @@ const clip = (target, frame) => {
   }
   return getRect(target);
 };
-export default ({ page, withPlaceholder, axis, frame }) => {
+
+const getSubject = ({ page, withPlaceholder, axis, frame }) => {
   const scrolled = scroll(page.marginBox, frame);
   const increased = increase(scrolled, axis, withPlaceholder);
   const clipped = clip(increased, frame);
@@ -33,3 +34,5 @@ export default ({ page, withPlaceholder, axis, frame }) => {
     active: clipped
   };
 };
+
+export default getSubject;

client/src/components/trello-board/dnd/lib/state/droppable/what-is-dragged-over-from-result.js

@@ -1,4 +1,4 @@
-export default (result) => {
+const whatIsDraggedOverFromResult = (result) => {
   const { combine, destination } = result;
   if (destination) {
     return destination.droppableId;
@@ -8,3 +8,5 @@ export default (result) => {
   }
   return null;
 };
+
+export default whatIsDraggedOverFromResult;

client/src/components/trello-board/dnd/lib/state/droppable/what-is-dragged-over.js

@@ -1,4 +1,4 @@
-export default (impact) => {
+const whatIsDraggedOver = (impact) => {
   const at = impact.at;
   if (!at) {
     return null;
@@ -8,3 +8,5 @@ export default (impact) => {
   }
   return at.combine.droppableId;
 };
+
+export default whatIsDraggedOver;

client/src/components/trello-board/dnd/lib/state/get-center-from-impact/get-client-border-box-center/get-client-from-page-border-box-center.js

@@ -1,8 +1,10 @@
 import { add, subtract } from "../../position";
 import withViewportDisplacement from "../../with-scroll-change/with-viewport-displacement";
 
-export default ({ pageBorderBoxCenter, draggable, viewport }) => {
+const getClientRectFromPageBorderBoxCenter = ({ pageBorderBoxCenter, draggable, viewport }) => {
   const withoutPageScrollChange = withViewportDisplacement(viewport, pageBorderBoxCenter);
   const offset = subtract(withoutPageScrollChange, draggable.page.borderBox.center);
   return add(draggable.client.borderBox.center, offset);
 };
+
+export default getClientRectFromPageBorderBoxCenter;

client/src/components/trello-board/dnd/lib/state/get-center-from-impact/get-client-border-box-center/index.js

@@ -1,7 +1,7 @@
 import getPageBorderBoxCenterFromImpact from "../get-page-border-box-center";
 import getClientFromPageBorderBoxCenter from "./get-client-from-page-border-box-center";
 
-export default ({ impact, draggable, droppable, draggables, viewport, afterCritical }) => {
+const getClientBorderBoxCenter = ({ impact, draggable, droppable, draggables, viewport, afterCritical }) => {
   const pageBorderBoxCenter = getPageBorderBoxCenterFromImpact({
     impact,
     draggable,
@@ -15,3 +15,5 @@ export default ({ impact, draggable, droppable, draggables, viewport, afterCriti
     viewport
   });
 };
+
+export default getClientBorderBoxCenter;

client/src/components/trello-board/dnd/lib/state/get-center-from-impact/get-page-border-box-center/index.js

@@ -26,9 +26,12 @@ const getResultWithoutDroppableDisplacement = ({ impact, draggable, droppable, d
     afterCritical
   });
 };
-export default (args) => {
+
+const getPageBorderBoxCenter = (args) => {
   const withoutDisplacement = getResultWithoutDroppableDisplacement(args);
   const droppable = args.droppable;
-  const withDisplacement = droppable ? withDroppableDisplacement(droppable, withoutDisplacement) : withoutDisplacement;
+
-  return withDisplacement;
+  return droppable ? withDroppableDisplacement(droppable, withoutDisplacement) : withoutDisplacement;
 };
+
+export default getPageBorderBoxCenter;

client/src/components/trello-board/dnd/lib/state/get-center-from-impact/get-page-border-box-center/when-combining.js

@@ -2,9 +2,8 @@ import { invariant } from "../../../invariant";
 import { add } from "../../position";
 import getCombinedItemDisplacement from "../../get-combined-item-displacement";
 import { tryGetCombine } from "../../get-impact-location";
-// Returns the client offset required to move an item from its
+
-// original client position to its final resting position
+const whenCombining = ({ afterCritical, impact, draggables }) => {
-export default ({ afterCritical, impact, draggables }) => {
   const combine = tryGetCombine(impact);
   invariant(combine);
   const combineWith = combine.draggableId;
@@ -17,3 +16,7 @@ export default ({ afterCritical, impact, draggables }) => {
   });
   return add(center, displaceBy);
 };
+
+// Returns the client offset required to move an item from its
+// original client position to its final resting position
+export default whenCombining;

client/src/components/trello-board/dnd/lib/state/get-center-from-impact/get-page-border-box-center/when-reordering.js

@@ -3,9 +3,8 @@ import { goBefore, goAfter, goIntoStart } from "../move-relative-to";
 import getDraggablesInsideDroppable from "../../get-draggables-inside-droppable";
 import { negate } from "../../position";
 import didStartAfterCritical from "../../did-start-after-critical";
-// Returns the client offset required to move an item from its
+
-// original client position to its final resting position
+const whenReordering = ({ impact, draggable, draggables, droppable, afterCritical }) => {
-export default ({ impact, draggable, draggables, droppable, afterCritical }) => {
   const insideDestination = getDraggablesInsideDroppable(droppable.descriptor.id, draggables);
   const draggablePage = draggable.page;
   const axis = droppable.axis;
@@ -74,3 +73,7 @@ export default ({ impact, draggable, draggables, droppable, afterCritical }) =>
     isMoving: draggablePage
   });
 };
+
+// Returns the client offset required to move an item from its
+// original client position to its final resting position
+export default whenReordering;

client/src/components/trello-board/dnd/lib/state/get-combined-item-displacement.js

@@ -1,10 +1,12 @@
 import { negate, origin } from "./position";
 import didStartAfterCritical from "./did-start-after-critical";
 
-export default ({ displaced, afterCritical, combineWith, displacedBy }) => {
+const getCombinedItemDisplacement = ({ displaced, afterCritical, combineWith, displacedBy }) => {
   const isDisplaced = Boolean(displaced.visible[combineWith] || displaced.invisible[combineWith]);
   if (didStartAfterCritical(combineWith, afterCritical)) {
     return isDisplaced ? origin : negate(displacedBy.point);
   }
   return isDisplaced ? displacedBy.point : origin;
 };
+
+export default getCombinedItemDisplacement;

client/src/components/trello-board/dnd/lib/state/get-drag-impact/get-combine-impact.js

@@ -5,7 +5,8 @@ import getIsDisplaced from "../get-is-displaced";
 import removeDraggableFromList from "../remove-draggable-from-list";
 // exported for testing
 export const combineThresholdDivisor = 4;
-export default ({
+
+const getCombineImpact = ({
   draggable,
   pageBorderBoxWithDroppableScroll: targetRect,
   previousImpact,
@@ -64,10 +65,12 @@ export default ({
     // is in resting position - being moved backwards on to
     return targetStart > childRect[axis.start] + threshold && targetStart < childRect[axis.end] - threshold;
   });
+
   if (!combineWith) {
     return null;
   }
-  const impact = {
+
+  return {
     // no change to displacement when combining
     displacedBy,
     displaced: previousImpact.displaced,
@@ -79,5 +82,6 @@ export default ({
       }
     }
   };
-  return impact;
 };
+
+export default getCombineImpact;

client/src/components/trello-board/dnd/lib/state/get-drag-impact/get-reorder-impact.js

@@ -20,7 +20,7 @@ function atIndex({ draggable, closest, inHomeList }) {
   return closest.descriptor.index;
 }
 
-export default ({
+const getReorderImpact = ({
   pageBorderBoxWithDroppableScroll: targetRect,
   draggable,
   destination,
@@ -100,3 +100,5 @@ export default ({
     index: newIndex
   });
 };
+
+export default getReorderImpact;

client/src/components/trello-board/dnd/lib/state/get-drag-impact/index.js

@@ -6,7 +6,7 @@ import getCombineImpact from "./get-combine-impact";
 import noImpact from "../no-impact";
 import { offsetRectByPosition } from "../rect";
 
-export default ({ pageOffset, draggable, draggables, droppables, previousImpact, viewport, afterCritical }) => {
+const getDragImpact = ({ pageOffset, draggable, draggables, droppables, previousImpact, viewport, afterCritical }) => {
   const pageBorderBox = offsetRectByPosition(draggable.page.borderBox, pageOffset);
   const destinationId = getDroppableOver({
     pageBorderBox,
@@ -49,3 +49,5 @@ export default ({ pageOffset, draggable, draggables, droppables, previousImpact,
     })
   );
 };
+
+export default getDragImpact;

client/src/components/trello-board/dnd/lib/state/get-frame.js

@@ -1,7 +1,9 @@
 import { invariant } from "../invariant";
 
-export default (droppable) => {
+const getFrame = (droppable) => {
   const frame = droppable.frame;
   invariant(frame, "Expected Droppable to have a frame");
   return frame;
 };
+
+export default getFrame;

client/src/components/trello-board/dnd/lib/state/get-home-location.js

@@ -1,4 +1,6 @@
-export default (descriptor) => ({
+const getHomeLocation = (descriptor) => ({
   index: descriptor.index,
   droppableId: descriptor.droppableId
 });
+
+export default getHomeLocation;

client/src/components/trello-board/dnd/lib/state/get-lift-effect.js

@@ -4,7 +4,7 @@ import getDraggablesInsideDroppable from "./get-draggables-inside-droppable";
 import getDisplacedBy from "./get-displaced-by";
 import getDisplacementGroups from "./get-displacement-groups";
 
-export default ({ draggable, home, draggables, viewport }) => {
+const getLiftEffect = ({ draggable, home, draggables, viewport }) => {
   const displacedBy = getDisplacedBy(home.axis, draggable.displaceBy);
   const insideHome = getDraggablesInsideDroppable(home.descriptor.id, draggables);
 
@@ -46,3 +46,5 @@ export default ({ draggable, home, draggables, viewport }) => {
     afterCritical
   };
 };
+
+export default getLiftEffect;

client/src/components/trello-board/dnd/lib/state/get-max-scroll.js

@@ -1,6 +1,6 @@
 import { subtract } from "./position";
 
-export default ({ scrollHeight, scrollWidth, height, width }) => {
+const getMaxScroll = ({ scrollHeight, scrollWidth, height, width }) => {
   const maxScroll = subtract(
     // full size
     {
@@ -19,3 +19,5 @@ export default ({ scrollHeight, scrollWidth, height, width }) => {
   };
   return adjustedMaxScroll;
 };
+
+export default getMaxScroll;

client/src/components/trello-board/dnd/lib/state/is-within.js

@@ -1,2 +1,4 @@
+const isWithin = (lowerBound, upperBound) => (value) => lowerBound <= value && value <= upperBound;
+
 // is a value between two other values
-export default (lowerBound, upperBound) => (value) => lowerBound <= value && value <= upperBound;
+export default isWithin;

client/src/components/trello-board/dnd/lib/state/middleware/auto-scroll.js

@@ -2,7 +2,8 @@ import { invariant } from "../../invariant";
 
 const shouldStop = (action) =>
   action.type === "DROP_COMPLETE" || action.type === "DROP_ANIMATE" || action.type === "FLUSH";
-export default (autoScroller) => (store) => (next) => (action) => {
+
+const autoScroll = (autoScroller) => (store) => (next) => (action) => {
   if (shouldStop(action)) {
     autoScroller.stop();
     next(action);
@@ -22,3 +23,5 @@ export default (autoScroller) => (store) => (next) => (action) => {
   next(action);
   autoScroller.scroll(store.getState());
 };
+
+export default autoScroll;

client/src/components/trello-board/dnd/lib/state/middleware/dimension-marshal-stopper.js

@@ -1,4 +1,4 @@
-export default (marshal) => () => (next) => (action) => {
+const dimensionMarshalStopper = (marshal) => () => (next) => (action) => {
   // Not stopping a collection on a 'DROP' as we want a collection to continue
   if (
     // drag is finished
@@ -11,3 +11,5 @@ export default (marshal) => () => (next) => (action) => {
   }
   next(action);
 };
+
+export default dimensionMarshalStopper;

client/src/components/trello-board/dnd/lib/state/middleware/drop/drop-animation-finish-middleware.js

@@ -1,7 +1,7 @@
 import { invariant } from "../../../invariant";
 import { completeDrop } from "../../action-creators";
 
-export default (store) => (next) => (action) => {
+const dropAnimiationFinishMiddleware = (store) => (next) => (action) => {
   if (action.type !== "DROP_ANIMATION_FINISHED") {
     next(action);
     return;
@@ -14,3 +14,5 @@ export default (store) => (next) => (action) => {
     })
   );
 };
+
+export default dropAnimiationFinishMiddleware;

client/src/components/trello-board/dnd/lib/state/middleware/drop/drop-animation-flush-on-scroll-middleware.js

@@ -1,7 +1,7 @@
 import { dropAnimationFinished } from "../../action-creators";
 import bindEvents from "../../../view/event-bindings/bind-events";
 
-export default (store) => {
+const dropAnimationFlushOnScrollMiddleware = (store) => {
   let unbind = null;
   let frameId = null;
 
@@ -53,3 +53,5 @@ export default (store) => {
     });
   };
 };
+
+export default dropAnimationFlushOnScrollMiddleware;

client/src/components/trello-board/dnd/lib/state/middleware/drop/drop-middleware.js

@@ -6,7 +6,8 @@ import getNewHomeClientOffset from "./get-new-home-client-offset";
 import getDropImpact from "./get-drop-impact";
 import { tryGetCombine, tryGetDestination } from "../../get-impact-location";
 
-export default ({ getState, dispatch }) =>
+const dropMiddleware =
+  ({ getState, dispatch }) =>
   (next) =>
   (action) => {
     if (action.type !== "DROP") {
@@ -110,3 +111,5 @@ export default ({ getState, dispatch }) =>
     };
     dispatch(animateDrop(args));
   };
+
+export default dropMiddleware;

client/src/components/trello-board/dnd/lib/state/middleware/drop/get-drop-duration.js

@@ -6,7 +6,7 @@ const dropTimeRange = maxDropTime - minDropTime;
 const maxDropTimeAtDistance = 1500;
 // will bring a time lower - which makes it faster
 const cancelDropModifier = 0.6;
-export default ({ current, destination, reason }) => {
+const getDropDuration = ({ current, destination, reason }) => {
   const distance = getDistance(current, destination);
   // even if there is no distance to travel, we might still need to animate opacity
   if (distance <= 0) {
@@ -28,3 +28,5 @@ export default ({ current, destination, reason }) => {
   // To two decimal points by converting to string and back
   return Number(withDuration.toFixed(2));
 };
+
+export default getDropDuration;

client/src/components/trello-board/dnd/lib/state/middleware/drop/get-drop-impact.js

@@ -1,7 +1,7 @@
 import recompute from "../../update-displacement-visibility/recompute";
 import { emptyGroups } from "../../no-impact";
 
-export default ({ draggables, reason, lastImpact, home, viewport, onLiftImpact }) => {
+const getDropImpact = ({ draggables, reason, lastImpact, home, viewport, onLiftImpact }) => {
   if (!lastImpact.at || reason !== "DROP") {
     // Dropping outside of a list or the drag was cancelled
 
@@ -42,3 +42,5 @@ export default ({ draggables, reason, lastImpact, home, viewport, onLiftImpact }
     didDropInsideDroppable: true
   };
 };
+
+export default getDropImpact;

client/src/components/trello-board/dnd/lib/state/middleware/drop/get-new-home-client-offset.js

@@ -2,7 +2,7 @@ import whatIsDraggedOver from "../../droppable/what-is-dragged-over";
 import { subtract } from "../../position";
 import getClientBorderBoxCenter from "../../get-center-from-impact/get-client-border-box-center";
 
-export default ({ impact, draggable, dimensions, viewport, afterCritical }) => {
+const getNewHomeClientOffset = ({ impact, draggable, dimensions, viewport, afterCritical }) => {
   const { draggables, droppables } = dimensions;
   const droppableId = whatIsDraggedOver(impact);
   const destination = droppableId ? droppables[droppableId] : null;
@@ -19,3 +19,5 @@ export default ({ impact, draggable, dimensions, viewport, afterCritical }) => {
   const offset = subtract(newClientCenter, draggable.client.borderBox.center);
   return offset;
 };
+
+export default getNewHomeClientOffset;

client/src/components/trello-board/dnd/lib/state/middleware/focus.js

@@ -1,4 +1,4 @@
-export default (marshal) => {
+const focus = (marshal) => {
   let isWatching = false;
   return () => (next) => (action) => {
     if (action.type === "INITIAL_PUBLISH") {
@@ -29,3 +29,5 @@ export default (marshal) => {
     }
   };
 };
+
+export default focus;

client/src/components/trello-board/dnd/lib/state/middleware/lift.js

@@ -2,7 +2,8 @@ import { invariant } from "../../invariant";
 import { beforeInitialCapture, completeDrop, flush, initialPublish } from "../action-creators";
 import validateDimensions from "./util/validate-dimensions";
 
-export default (marshal) =>
+const lift =
+  (marshal) =>
   ({ getState, dispatch }) =>
   (next) =>
   (action) => {
@@ -62,3 +63,5 @@ export default (marshal) =>
       })
     );
   };
+
+export default lift;

client/src/components/trello-board/dnd/lib/state/middleware/pending-drop.js

@@ -1,6 +1,6 @@
 import { drop } from "../action-creators";
 
-export default (store) => (next) => (action) => {
+const pendingDrop = (store) => (next) => (action) => {
   // Always let the action go through first
   next(action);
   if (action.type !== "PUBLISH_WHILE_DRAGGING") {
@@ -28,3 +28,5 @@ export default (store) => (next) => (action) => {
     })
   );
 };
+
+export default pendingDrop;

client/src/components/trello-board/dnd/lib/state/middleware/responders/async-marshal.js

@@ -1,7 +1,7 @@
 import { invariant } from "../../../invariant";
 import { findIndex } from "../../../native-with-fallback";
 
-export default () => {
+const asyncMarshal = () => {
   const entries = [];
   const execute = (timerId) => {
     const index = findIndex(entries, (item) => item.timerId === timerId);
@@ -36,3 +36,5 @@ export default () => {
     flush
   };
 };
+
+export default asyncMarshal;

client/src/components/trello-board/dnd/lib/state/middleware/responders/expiring-announce.js

@@ -1,6 +1,6 @@
 import { warning } from "../../../dev-warning";
 
-export default (announce) => {
+const expiringAnnounce = (announce) => {
   let wasCalled = false;
   let isExpired = false;
 
@@ -31,3 +31,5 @@ export default (announce) => {
   result.wasCalled = () => wasCalled;
   return result;
 };
+
+export default expiringAnnounce;

client/src/components/trello-board/dnd/lib/state/middleware/responders/publisher.js

@@ -36,7 +36,7 @@ const execute = (responder, data, announce, getDefaultMessage) => {
     announce(getDefaultMessage(data));
   }
 };
-export default (getResponders, announce) => {
+const publisher = (getResponders, announce) => {
   const asyncMarshal = getAsyncMarshal();
   let dragging = null;
   const beforeCapture = (draggableId, mode) => {
@@ -152,3 +152,5 @@ export default (getResponders, announce) => {
     abort
   };
 };
+
+export default publisher;

client/src/components/trello-board/dnd/lib/state/middleware/responders/responders-middleware.js

@@ -1,6 +1,6 @@
 import getPublisher from "./publisher";
 
-export default (getResponders, announce) => {
+const respondersMiddleware = (getResponders, announce) => {
   const publisher = getPublisher(getResponders, announce);
   return (store) => (next) => (action) => {
     if (action.type === "BEFORE_INITIAL_CAPTURE") {
@@ -46,3 +46,5 @@ export default (getResponders, announce) => {
     }
   };
 };
+
+export default respondersMiddleware;

client/src/components/trello-board/dnd/lib/state/middleware/scroll-listener.js

@@ -4,7 +4,8 @@ import getScrollListener from "../../view/scroll-listener";
 // TODO: this is taken from auto-scroll. Let's make it a util
 const shouldEnd = (action) =>
   action.type === "DROP_COMPLETE" || action.type === "DROP_ANIMATE" || action.type === "FLUSH";
-export default (store) => {
+
+const scrollListener = (store) => {
   const listener = getScrollListener({
     onWindowScroll: (newScroll) => {
       store.dispatch(
@@ -24,3 +25,5 @@ export default (store) => {
     next(action);
   };
 };
+
+export default scrollListener;

client/src/components/trello-board/dnd/lib/state/middleware/style.js

@@ -1,4 +1,4 @@
-export default (marshal) => () => (next) => (action) => {
+const style = (marshal) => () => (next) => (action) => {
   if (action.type === "INITIAL_PUBLISH") {
     marshal.dragging();
   }
@@ -12,3 +12,5 @@ export default (marshal) => () => (next) => (action) => {
   }
   next(action);
 };
+
+export default style;

client/src/components/trello-board/dnd/lib/state/middleware/util/validate-dimensions.js

@@ -39,7 +39,7 @@ function checkIndexes(insideDestination) {
 
 export default function validateDimensions(critical, dimensions) {
   // wrapping entire block for better minification
-  if (process.env.NODE_ENV !== "production") {
+  if (import.meta.env.DEV) {
     const insideDestination = getDraggablesInsideDroppable(critical.droppable.id, dimensions.draggables);
     checkIndexes(insideDestination);
   }

client/src/components/trello-board/dnd/lib/state/move-in-direction/index.js

@@ -6,7 +6,7 @@ const getDroppableOver = (impact, droppables) => {
   const id = whatIsDraggedOver(impact);
   return id ? droppables[id] : null;
 };
-export default ({ state, type }) => {
+const moveInDirection = ({ state, type }) => {
   const isActuallyOver = getDroppableOver(state.impact, state.dimensions.droppables);
   const isMainAxisMovementAllowed = Boolean(isActuallyOver);
   const home = state.dimensions.droppables[state.critical.droppable.id];
@@ -48,3 +48,5 @@ export default ({ state, type }) => {
         afterCritical: state.afterCritical
       });
 };
+
+export default moveInDirection;

client/src/components/trello-board/dnd/lib/state/move-in-direction/move-cross-axis/get-best-cross-axis-droppable.js

@@ -10,7 +10,8 @@ const getKnownActive = (droppable) => {
   invariant(rect, "Cannot get clipped area from droppable");
   return rect;
 };
-export default ({ isMovingForward, pageBorderBoxCenter, source, droppables, viewport }) => {
+
+const getBestCrossAxisDroppable = ({ isMovingForward, pageBorderBoxCenter, source, droppables, viewport }) => {
   const active = source.subject.active;
   if (!active) {
     return null;
@@ -107,3 +108,5 @@ export default ({ isMovingForward, pageBorderBoxCenter, source, droppables, view
     return getKnownActive(a)[axis.start] - getKnownActive(b)[axis.start];
   })[0];
 };
+
+export default getBestCrossAxisDroppable;

client/src/components/trello-board/dnd/lib/state/move-in-direction/move-cross-axis/get-closest-draggable.js

@@ -3,7 +3,7 @@ import { isTotallyVisible } from "../../visibility/is-visible";
 import withDroppableDisplacement from "../../with-scroll-change/with-droppable-displacement";
 import { getCurrentPageBorderBox, getCurrentPageBorderBoxCenter } from "./without-starting-displacement";
 
-export default ({ pageBorderBoxCenter, viewport, destination, insideDestination, afterCritical }) => {
+const getClosestDraggable = ({ pageBorderBoxCenter, viewport, destination, insideDestination, afterCritical }) => {
   const sorted = insideDestination
     .filter((draggable) =>
       // Allowing movement to draggables that are not visible in the viewport
@@ -43,3 +43,5 @@ export default ({ pageBorderBoxCenter, viewport, destination, insideDestination,
     });
   return sorted[0] || null;
 };
+
+export default getClosestDraggable;

client/src/components/trello-board/dnd/lib/state/move-in-direction/move-cross-axis/index.js

@@ -6,7 +6,7 @@ import getClientFromPageBorderBoxCenter from "../../get-center-from-impact/get-c
 import getPageBorderBoxCenter from "../../get-center-from-impact/get-page-border-box-center";
 import moveToNewDroppable from "./move-to-new-droppable";
 
-export default ({
+const moveCrossAxis = ({
   isMovingForward,
   previousPageBorderBoxCenter,
   draggable,
@@ -69,3 +69,5 @@ export default ({
     scrollJumpRequest: null
   };
 };
+
+export default moveCrossAxis;

client/src/components/trello-board/dnd/lib/state/move-in-direction/move-cross-axis/move-to-new-droppable.js

@@ -6,7 +6,7 @@ import { addPlaceholder } from "../../droppable/with-placeholder";
 import isHomeOf from "../../droppable/is-home-of";
 import calculateReorderImpact from "../../calculate-drag-impact/calculate-reorder-impact";
 
-export default ({
+const moveToNewDroppable = ({
   previousPageBorderBoxCenter,
   moveRelativeTo,
   insideDestination,
@@ -84,3 +84,5 @@ export default ({
     index: proposedIndex
   });
 };
+
+export default moveToNewDroppable;

client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/index.js

@@ -8,7 +8,7 @@ import getClientFromPageBorderBoxCenter from "../../get-center-from-impact/get-c
 import { subtract } from "../../position";
 import isTotallyVisibleInNewLocation from "./is-totally-visible-in-new-location";
 
-export default ({
+const moveToNextPlace = ({
   isMovingForward,
   draggable,
   destination,
@@ -92,3 +92,5 @@ export default ({
     scrollJumpRequest: distance
   };
 };
+
+export default moveToNextPlace;

client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/is-totally-visible-in-new-location.js

@@ -2,7 +2,7 @@ import { subtract } from "../../position";
 import { offsetByPosition } from "../../spacing";
 import { isTotallyVisible, isTotallyVisibleOnAxis } from "../../visibility/is-visible";
 
-export default ({
+const isTotallyVisibleInNewLocation = ({
   draggable,
   destination,
   newPageBorderBoxCenter,
@@ -26,3 +26,5 @@ export default ({
   };
   return onlyOnMainAxis ? isTotallyVisibleOnAxis(args) : isTotallyVisible(args);
 };
+
+export default isTotallyVisibleInNewLocation;

client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/move-to-next-combine/index.js

@@ -3,7 +3,7 @@ import { tryGetDestination } from "../../../get-impact-location";
 import { findIndex } from "../../../../native-with-fallback";
 import removeDraggableFromList from "../../../remove-draggable-from-list";
 
-export default ({ isMovingForward, draggable, destination, insideDestination, previousImpact }) => {
+const moveToNextCombine = ({ isMovingForward, draggable, destination, insideDestination, previousImpact }) => {
   if (!destination.isCombineEnabled) {
     return null;
   }
@@ -59,3 +59,5 @@ export default ({ isMovingForward, draggable, destination, insideDestination, pr
   const before = withoutDraggable[proposedIndex];
   return getImpact(before.descriptor.id);
 };
+
+export default moveToNextCombine;

client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/move-to-next-index/from-combine.js

@@ -1,6 +1,6 @@
 import didStartAfterCritical from "../../../did-start-after-critical";
 
-export default ({ isMovingForward, destination, draggables, combine, afterCritical }) => {
+const fromCombine = ({ isMovingForward, destination, draggables, combine, afterCritical }) => {
   if (!destination.isCombineEnabled) {
     return null;
   }
@@ -19,3 +19,5 @@ export default ({ isMovingForward, destination, draggables, combine, afterCritic
   }
   return combineWithIndex;
 };
+
+export default fromCombine;

client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/move-to-next-index/from-reorder.js

@@ -1,4 +1,4 @@
-export default ({ isMovingForward, isInHomeList, insideDestination, location }) => {
+const fromReorder = ({ isMovingForward, isInHomeList, insideDestination, location }) => {
   // cannot move in the list
   if (!insideDestination.length) {
     return null;
@@ -20,3 +20,5 @@ export default ({ isMovingForward, isInHomeList, insideDestination, location })
   }
   return proposedIndex;
 };
+
+export default fromReorder;

client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/move-to-next-index/index.js

@@ -3,7 +3,7 @@ import calculateReorderImpact from "../../../calculate-drag-impact/calculate-reo
 import fromCombine from "./from-combine";
 import fromReorder from "./from-reorder";
 
-export default ({
+const moveToNextIndex = ({
   isMovingForward,
   isInHomeList,
   draggable,
@@ -60,3 +60,5 @@ export default ({
     index: newIndex
   });
 };
+
+export default moveToNextIndex;

client/src/components/trello-board/dnd/lib/state/patch-dimension-map.js

@@ -1,6 +1,8 @@
 import patchDroppableMap from "./patch-droppable-map";
 
-export default (dimensions, updated) => ({
+const patchDimensionMap = (dimensions, updated) => ({
   draggables: dimensions.draggables,
   droppables: patchDroppableMap(dimensions.droppables, updated)
 });
+
+export default patchDimensionMap;

client/src/components/trello-board/dnd/lib/state/patch-droppable-map.js

@@ -1,4 +1,6 @@
-export default (droppables, updated) => ({
+const patchDroppableMap = (droppables, updated) => ({
   ...droppables,
   [updated.descriptor.id]: updated
 });
+
+export default patchDroppableMap;

client/src/components/trello-board/dnd/lib/state/post-reducer/when-moving/refresh-snap.js

@@ -4,7 +4,7 @@ import recomputeDisplacementVisibility from "../../update-displacement-visibilit
 import getClientBorderBoxCenter from "../../get-center-from-impact/get-client-border-box-center";
 import update from "./update";
 
-export default ({ state, dimensions: forcedDimensions, viewport: forcedViewport }) => {
+const refreshSnap = ({ state, dimensions: forcedDimensions, viewport: forcedViewport }) => {
   invariant(state.movementMode === "SNAP");
   const needsVisibilityCheck = state.impact;
   const viewport = forcedViewport || state.viewport;
@@ -38,3 +38,5 @@ export default ({ state, dimensions: forcedDimensions, viewport: forcedViewport
     viewport
   });
 };
+
+export default refreshSnap;

client/src/components/trello-board/dnd/lib/state/post-reducer/when-moving/update.js

@@ -2,7 +2,7 @@ import getDragImpact from "../../get-drag-impact";
 import { add, subtract } from "../../position";
 import recomputePlaceholders from "../../recompute-placeholders";
 
-export default ({
+const update = ({
   state,
   clientSelection: forcedClientSelection,
   dimensions: forcedDimensions,
@@ -80,3 +80,5 @@ export default ({
   };
   return result;
 };
+
+export default update;

client/src/components/trello-board/dnd/lib/state/publish-while-dragging-in-virtual/adjust-additions-for-scroll-changes.js

@@ -2,7 +2,7 @@ import { add } from "../position";
 import offsetDraggable from "./offset-draggable";
 import getFrame from "../get-frame";
 
-export default ({ additions, updatedDroppables, viewport }) => {
+const adjustAdditionsForScrollChanges = ({ additions, updatedDroppables, viewport }) => {
   // We need to adjust collected draggables so that they
   // match the model we had when the drag started.
   // When a draggable is dynamically collected it does not have
@@ -30,3 +30,5 @@ export default ({ additions, updatedDroppables, viewport }) => {
     return moved;
   });
 };
+
+export default adjustAdditionsForScrollChanges;

client/src/components/trello-board/dnd/lib/state/publish-while-dragging-in-virtual/index.js

@@ -7,7 +7,7 @@ import scrollDroppable from "../droppable/scroll-droppable";
 import whatIsDraggedOver from "../droppable/what-is-dragged-over";
 
 const timingsKey = "Processing dynamic changes";
-export default ({ state, published }) => {
+const publishWhileDraggingInVirtual = ({ state, published }) => {
   timings.start(timingsKey);
 
   // TODO: update window scroll (needs to be a part of the published object)
@@ -107,3 +107,5 @@ export default ({ state, published }) => {
   };
   return dropPending;
 };
+
+export default publishWhileDraggingInVirtual;

client/src/components/trello-board/dnd/lib/state/publish-while-dragging-in-virtual/offset-draggable.js

@@ -1,6 +1,6 @@
 import { offset as offsetBox, withScroll } from "css-box-model";
 
-export default ({ draggable, offset, initialWindowScroll }) => {
+const offsetDraggable = ({ draggable, offset, initialWindowScroll }) => {
   const client = offsetBox(draggable.client, offset);
   const page = withScroll(client, initialWindowScroll);
   const moved = {
@@ -14,3 +14,5 @@ export default ({ draggable, offset, initialWindowScroll }) => {
   };
   return moved;
 };
+
+export default offsetDraggable;

client/src/components/trello-board/dnd/lib/state/recompute-placeholders.js

@@ -23,7 +23,8 @@ const clearUnusedPlaceholder = ({ previousImpact, impact, droppables }) => {
   const updated = removePlaceholder(lastDroppable);
   return patchDroppableMap(droppables, updated);
 };
-export default ({ draggable, draggables, droppables, previousImpact, impact }) => {
+
+const recomputePlaceholders = ({ draggable, draggables, droppables, previousImpact, impact }) => {
   const cleaned = clearUnusedPlaceholder({
     previousImpact,
     impact,
@@ -49,3 +50,5 @@ export default ({ draggable, draggables, droppables, previousImpact, impact }) =
   const patched = addPlaceholder(droppable, draggable, draggables);
   return patchDroppableMap(cleaned, patched);
 };
+
+export default recomputePlaceholders;

client/src/components/trello-board/dnd/lib/state/reducer.js

@@ -46,7 +46,7 @@ const idle = {
   completed: null,
   shouldFlush: false
 };
-export default (state = idle, action) => {
+const reducer = (state = idle, action) => {
   if (action.type === "FLUSH") {
     return {
       ...idle,
@@ -330,3 +330,5 @@ export default (state = idle, action) => {
   }
   return state;
 };
+
+export default reducer;

client/src/components/trello-board/dnd/lib/state/scroll-viewport.js

@@ -1,7 +1,7 @@
 import { getRect } from "css-box-model";
 import { subtract, negate } from "./position";
 
-export default (viewport, newScroll) => {
+const scrollViewport = (viewport, newScroll) => {
   const diff = subtract(newScroll, viewport.scroll.initial);
   const displacement = negate(diff);
 
@@ -27,3 +27,5 @@ export default (viewport, newScroll) => {
   };
   return updated;
 };
+
+export default scrollViewport;

client/src/components/trello-board/dnd/lib/state/update-displacement-visibility/recompute.js

@@ -4,7 +4,7 @@ function getDraggables(ids, draggables) {
   return ids.map((id) => draggables[id]);
 }
 
-export default ({ impact, viewport, draggables, destination, forceShouldAnimate }) => {
+const recompute = ({ impact, viewport, draggables, destination, forceShouldAnimate }) => {
   const last = impact.displaced;
   const afterDragging = getDraggables(last.all, draggables);
   const displaced = getDisplacementGroups({
@@ -20,3 +20,5 @@ export default ({ impact, viewport, draggables, destination, forceShouldAnimate
     displaced
   };
 };
+
+export default recompute;

client/src/components/trello-board/dnd/lib/state/update-displacement-visibility/speculatively-increase.js

@@ -17,7 +17,7 @@ function tryGetVisible(id, groups) {
   return null;
 }
 
-export default ({ impact, viewport, destination, draggables, maxScrollChange }) => {
+const speculativelyIncrease = ({ impact, viewport, destination, draggables, maxScrollChange }) => {
   const scrolledViewport = scrollViewport(viewport, add(viewport.scroll.current, maxScrollChange));
   const scrolledDroppable = destination.frame
     ? scrollDroppable(destination, add(destination.frame.scroll.current, maxScrollChange))
@@ -57,7 +57,8 @@ export default ({ impact, viewport, destination, draggables, maxScrollChange })
     }
     invisible[id] = true;
   });
-  const newImpact = {
+
+  return {
     ...impact,
     displaced: {
       all: last.all,
@@ -65,5 +66,6 @@ export default ({ impact, viewport, destination, draggables, maxScrollChange })
       visible
     }
   };
-  return newImpact;
 };
+
+export default speculativelyIncrease;

client/src/components/trello-board/dnd/lib/state/visibility/is-partially-visible-through-frame.js

@@ -1,6 +1,6 @@
 import isWithin from "../is-within";
 
-export default (frame) => {
+const isPartiallyVisibleThroughFrame = (frame) => {
   const isWithinVertical = isWithin(frame.top, frame.bottom);
   const isWithinHorizontal = isWithin(frame.left, frame.right);
   return (subject) => {
@@ -42,3 +42,5 @@ export default (frame) => {
     return isTargetBiggerOnOneAxis;
   };
 };
+
+export default isPartiallyVisibleThroughFrame;

client/src/components/trello-board/dnd/lib/state/visibility/is-totally-visible-through-frame-on-axis.js

@@ -1,7 +1,7 @@
 import isWithin from "../is-within";
 import { vertical } from "../axis";
 
-export default (axis) => (frame) => {
+const isTotallyVisibleThroughFrameOnAxis = (axis) => (frame) => {
   const isWithinVertical = isWithin(frame.top, frame.bottom);
   const isWithinHorizontal = isWithin(frame.left, frame.right);
   return (subject) => {
@@ -11,3 +11,5 @@ export default (axis) => (frame) => {
     return isWithinHorizontal(subject.left) && isWithinHorizontal(subject.right);
   };
 };
+
+export default isTotallyVisibleThroughFrameOnAxis;

client/src/components/trello-board/dnd/lib/state/visibility/is-totally-visible-through-frame.js

@@ -1,6 +1,6 @@
 import isWithin from "../is-within";
 
-export default (frame) => {
+const isTotallyVisibleThroughFrame = (frame) => {
   const isWithinVertical = isWithin(frame.top, frame.bottom);
   const isWithinHorizontal = isWithin(frame.left, frame.right);
   return (subject) => {
@@ -12,3 +12,5 @@ export default (frame) => {
     return isContained;
   };
 };
+
+export default isTotallyVisibleThroughFrame;

client/src/components/trello-board/dnd/lib/state/with-scroll-change/with-droppable-displacement.js

@@ -1,9 +1,11 @@
 import { add } from "../position";
 
-export default (droppable, point) => {
+const withDroppableDisplacement = (droppable, point) => {
   const frame = droppable.frame;
   if (!frame) {
     return point;
   }
   return add(point, frame.scroll.diff.displacement);
 };
+
+export default withDroppableDisplacement;

client/src/components/trello-board/dnd/lib/state/with-scroll-change/with-droppable-scroll.js

@@ -1,9 +1,11 @@
 import { offsetRectByPosition } from "../rect";
 
-export default (droppable, area) => {
+const withDroppableScroll = (droppable, area) => {
   const frame = droppable.frame;
   if (!frame) {
     return area;
   }
   return offsetRectByPosition(area, frame.scroll.diff.value);
 };
+
+export default withDroppableScroll;

client/src/components/trello-board/dnd/lib/state/with-scroll-change/with-viewport-displacement.js

@@ -1,3 +1,5 @@
 import { add } from "../position";
 
-export default (viewport, point) => add(viewport.scroll.diff.displacement, point);
+const withViewportDisplacement = (viewport, point) => add(viewport.scroll.diff.displacement, point);
+
+export default withViewportDisplacement;

client/src/components/trello-board/dnd/lib/view/drag-drop-context/app.js

@@ -114,7 +114,7 @@ export default function App(props) {
   );
 
   // Checking for unexpected store changes
-  if (process.env.NODE_ENV !== "production") {
+  if (import.meta.env.DEV) {
     if (lazyStoreRef.current && lazyStoreRef.current !== store) {
       warning("unexpected store change");
     }

client/src/components/trello-board/dnd/lib/view/drag-drop-context/check-doctype.js

@@ -6,7 +6,7 @@ const suffix = `
 
   More information: https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/doctype.md
 `;
-export default (doc) => {
+const checkDocType = (doc) => {
   const doctype = doc.doctype;
   if (!doctype) {
     warning(`
@@ -32,3 +32,5 @@ export default (doc) => {
     `);
   }
 };
+
+export default checkDocType;

client/src/components/trello-board/dnd/lib/view/drag-drop-context/error-boundary.js

@@ -21,7 +21,7 @@ export default class ErrorBoundary extends React.Component {
 
   componentDidCatch(err) {
     if (err instanceof RbdInvariant) {
-      if (process.env.NODE_ENV !== "production") {
+      if (import.meta.env.DEV) {
         error(err.message);
       }
       this.setState({});
@@ -51,7 +51,7 @@ export default class ErrorBoundary extends React.Component {
       // Marking the event as dealt with.
       // This will prevent any 'uncaught' error warnings in the console
       event.preventDefault();
-      if (process.env.NODE_ENV !== "production") {
+      if (import.meta.env.DEV) {
         error(err.message);
       }
     }

client/src/components/trello-board/dnd/lib/view/draggable/draggable-api.js

@@ -3,6 +3,7 @@ import ConnectedDraggable from "./connected-draggable";
 import useRequiredContext from "../use-required-context";
 import DroppableContext from "../context/droppable-context"; // We can use this to render a draggable with more control
 
+/* eslint-disable no-func-assign */
 function _extends() {
   return (
     (_extends = Object.assign

client/src/components/trello-board/dnd/lib/view/get-body-element.js

@@ -1,7 +1,9 @@
 import { invariant } from "../invariant";
 
-export default () => {
+const getBodyElements = () => {
   const body = document.body;
   invariant(body, "Cannot find document.body");
   return body;
 };
+
+export default getBodyElements;