- Begin to integrate DND with trello

- Resolve all ESLint issues in DND Signed-off-by: Dave Richer <dave@imexsystems.ca>
2024-06-13 17:52:03 -04:00
parent a8f2ca5643
commit 4602648fe5
123 changed files with 458 additions and 253 deletions
--- a/client/src/components/bill-line-search-select/bill-line-search-select.component.jsx
+++ b/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();

--- a/client/src/components/production-board-kanban/production-board-kanban.component.jsx
+++ b/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
--- a/client/src/components/trello-board/components/Lane/LaneHeader.jsx
+++ b/client/src/components/trello-board/components/Lane/LaneHeader.jsx
@@ -14,14 +14,13 @@ const LaneHeaderComponent = ({
  label,
  title,
  titleStyle,
-  labelStyle,
-  laneDraggable
+  labelStyle
 }) => {
  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,
--- a/client/src/components/trello-board/controllers/BoardContainer.jsx
+++ b/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 }) => {
-      handleLaneDragStart(payload.id);
-    },
-    [handleLaneDragStart]
-  );
+  /**
+   * onDragUpdate
+   * @param draggableId
+   * @param type
+   * @param source
+   * @param mode
+   * @param combine
+   * @param destination
+   */
+  const onDragUpdate = ({ draggableId, type, source, mode, combine, destination }) => {};

-  const onLaneDrop = useCallback(
-    ({ removedIndex, addedIndex, payload }) => {
-      if (removedIndex !== addedIndex) {
-        dispatch(actions.moveLane({ oldIndex: removedIndex, newIndex: addedIndex }));
-        handleLaneDragEnd(removedIndex, addedIndex, payload);
-      }
-    },
-    [dispatch, handleLaneDragEnd]
-  );
+  /**
+   * onDragStart
+   * @type {(function({draggableId: *, type: *, source: *, mode: *}): void)|*}
+   */
+  const onDragStart = useCallback(({ draggableId, type, source, mode }) => {}, []);

-  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"}
-          // onDragStart={onDragStart}
-          // dragClass={laneDragClass}
-          // dropClass={laneDropClass}
-          // onDrop={onLaneDrop}
-          // lockAxis={orientation === "vertical" ? "y" : "x"}
+          onDragUpdate={onDragUpdate}
+          onDragStart={onDragStart}
+          onBeforeDragStart={onBeforeDragStart}
+          onBeforeCapture={onBeforeCapture}
+          contextId={groupName}
          // 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
--- a/client/src/components/trello-board/controllers/Lane.jsx
+++ b/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,
--- a/client/src/components/trello-board/dnd/lib/debug/timings.js
+++ b/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;
    }
--- a/client/src/components/trello-board/dnd/lib/dev-warning.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/invariant.js
+++ b/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:
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-best-scrollable-droppable.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-droppable-scroll-change.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-percentage.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/adjust-for-size-limits.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/dampen-value-by-time.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/get-distance-thresholds.js
+++ b/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) => {
-  const startScrollingFrom = container[axis.size] * config.startFromPercentage;
-  const maxScrollValueAt = container[axis.size] * config.maxScrollAtPercentage;
-  const thresholds = {
-    startScrollingFrom,
-    maxScrollValueAt
-  };
-  return thresholds;
-};
+export default getDistanceThresholds;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/get-value-from-distance.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/get-value.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/get-scroll-on-axis/min-scroll.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-scroll/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/get-window-scroll-change.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/fluid-scroller/scroll.js
+++ b/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";
-
-export default ({ state, dragStartTime, shouldUseTimeDampening, scrollWindow, scrollDroppable }) => {
+const scroll = ({ 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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/auto-scroller/jump-scroller.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/can-start-drag.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/create-store.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/dimension-marshal/dimension-marshal.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/dimension-marshal/get-initial-publish.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/droppable/is-home-of.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/droppable/scroll-droppable.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/droppable/util/clip.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/droppable/util/get-subject.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/droppable/what-is-dragged-over-from-result.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/droppable/what-is-dragged-over.js
+++ b/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;
--- a/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
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/get-center-from-impact/get-client-border-box-center/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/get-center-from-impact/get-page-border-box-center/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/get-center-from-impact/get-page-border-box-center/when-combining.js
+++ b/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
-export default ({ afterCritical, impact, draggables }) => {
+
+const whenCombining = ({ 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;
--- a/client/src/components/trello-board/dnd/lib/state/get-center-from-impact/get-page-border-box-center/when-reordering.js
+++ b/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
-export default ({ impact, draggable, draggables, droppable, afterCritical }) => {
+
+const whenReordering = ({ 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;
--- a/client/src/components/trello-board/dnd/lib/state/get-combined-item-displacement.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/get-drag-impact/get-combine-impact.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/get-drag-impact/get-reorder-impact.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/get-drag-impact/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/get-frame.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/get-home-location.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/get-lift-effect.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/get-max-scroll.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/is-within.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/auto-scroll.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/dimension-marshal-stopper.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/drop/drop-animation-finish-middleware.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/drop/drop-animation-flush-on-scroll-middleware.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/drop/drop-middleware.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/drop/get-drop-duration.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/drop/get-drop-impact.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/drop/get-new-home-client-offset.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/focus.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/lift.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/pending-drop.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/responders/async-marshal.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/responders/expiring-announce.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/responders/publisher.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/responders/responders-middleware.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/scroll-listener.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/style.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/middleware/util/validate-dimensions.js
+++ b/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);
  }
--- a/client/src/components/trello-board/dnd/lib/state/move-in-direction/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/move-in-direction/move-cross-axis/get-best-cross-axis-droppable.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/move-in-direction/move-cross-axis/get-closest-draggable.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/move-in-direction/move-cross-axis/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/move-in-direction/move-cross-axis/move-to-new-droppable.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/is-totally-visible-in-new-location.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/move-to-next-combine/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/move-to-next-index/from-combine.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/move-to-next-index/from-reorder.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/move-in-direction/move-to-next-place/move-to-next-index/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/patch-dimension-map.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/patch-droppable-map.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/post-reducer/when-moving/refresh-snap.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/post-reducer/when-moving/update.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/publish-while-dragging-in-virtual/adjust-additions-for-scroll-changes.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/publish-while-dragging-in-virtual/index.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/publish-while-dragging-in-virtual/offset-draggable.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/recompute-placeholders.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/reducer.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/scroll-viewport.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/update-displacement-visibility/recompute.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/update-displacement-visibility/speculatively-increase.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/visibility/is-partially-visible-through-frame.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/visibility/is-totally-visible-through-frame-on-axis.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/visibility/is-totally-visible-through-frame.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/with-scroll-change/with-droppable-displacement.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/with-scroll-change/with-droppable-scroll.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/state/with-scroll-change/with-viewport-displacement.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/view/drag-drop-context/app.js
+++ b/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");
    }
--- a/client/src/components/trello-board/dnd/lib/view/drag-drop-context/check-doctype.js
+++ b/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;
--- a/client/src/components/trello-board/dnd/lib/view/drag-drop-context/error-boundary.js
+++ b/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);
      }
    }
--- a/client/src/components/trello-board/dnd/lib/view/draggable/draggable-api.js
+++ b/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
--- a/client/src/components/trello-board/dnd/lib/view/get-body-element.js
+++ b/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;
--- a/Show More
+++ b/Show More