[REFACTOR] Import fixes needed for the Next.js instance

app/scripts/components/common/card/index.tsx

@@ -1,6 +1,6 @@
 import React, { lazy, MouseEventHandler } from 'react';
 import styled, { css } from 'styled-components';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import { CollecticonExpandTopRight } from '@devseed-ui/collecticons';
 import {
   glsp,

app/scripts/components/common/map/style-generators/vector-timeseries.tsx

@@ -6,7 +6,9 @@ import {
   VectorSourceImpl
 } from 'mapbox-gl';
 import { useTheme } from 'styled-components';
-import { endOfDay, startOfDay } from 'date-fns';
+import endOfDay from 'date-fns/endOfDay';
+import startOfDay from 'date-fns/startOfDay';
+
 import centroid from '@turf/centroid';
 import { LngLatLike } from 'react-map-gl';
 import { Feature } from 'geojson';

app/scripts/components/common/page-footer.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import T from 'prop-types';
 import styled from 'styled-components';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 import {
   glsp,

app/scripts/components/common/page-hero.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import styled, { css } from 'styled-components';
 
 import {
@@ -67,7 +67,7 @@ const PageHeroInner = styled(Constrainer)`
   padding-top: ${variableGlsp(4)};
   padding-bottom: ${variableGlsp(2)};
   align-items: end;
-  
+
   /** The constrainer's padding was going over the imagine attribution icon
   * causing it not to work. We remove the pointer events from it and add them
   * again to the descendants. */

app/scripts/components/common/pub-date.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 
 function PublishedDate(props: { date: Date }) {
   const { date } = props;

app/scripts/components/exploration/atoms/hooks.ts

@@ -3,7 +3,8 @@ import { extent } from 'd3';
 import { PrimitiveAtom, useAtom, useAtomValue, useSetAtom } from 'jotai';
 
 import { focusAtom } from 'jotai-optics';
-import { add, max } from 'date-fns';
+import add from 'date-fns/add';
+import max from 'date-fns/max';
 
 import { DAY_SIZE_MAX } from '../constants';
 import {

app/scripts/components/exploration/components/chart-popover.tsx

@@ -6,7 +6,7 @@ import React, {
   useMemo
 } from 'react';
 import { createPortal } from 'react-dom';
-import styled, {css} from 'styled-components';
+import styled, { css } from 'styled-components';
 import {
   useFloating,
   autoUpdate,
@@ -15,7 +15,7 @@ import {
   shift
 } from '@floating-ui/react';
 import { bisector, ScaleTime, sort } from 'd3';
-import { format } from 'date-fns';
+import format from 'date-fns/format';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 
 import { AnalysisTimeseriesEntry, TimeDensity, TimelineDatasetSuccess } from '../types.d.ts';

app/scripts/components/exploration/components/datasets/block-utils.ts

@@ -1,11 +1,9 @@
-import {
-  endOfDay,
-  endOfMonth,
-  endOfYear,
-  startOfDay,
-  startOfMonth,
-  startOfYear,
-} from 'date-fns';
+import endOfDay from 'date-fns/endOfDay';
+import endOfMonth from 'date-fns/endOfMonth';
+import endOfYear from 'date-fns/endOfYear';
+import startOfDay from 'date-fns/startOfDay';
+import startOfMonth from 'date-fns/startOfMonth';
+import startOfYear from 'date-fns/startOfYear';
 import { TimeDensity } from '$components/exploration/types.d.ts';
 
 /**

app/scripts/components/exploration/components/datasets/dataset-list-item.tsx

@@ -2,7 +2,9 @@ import React, { useCallback, useMemo } from 'react';
 import { useAtomValue } from 'jotai';
 import { Reorder, useDragControls } from 'framer-motion';
 import styled, { useTheme } from 'styled-components';
-import { addDays, subDays, areIntervalsOverlapping } from 'date-fns';
+import addDays from 'date-fns/addDays';
+import subDays from 'date-fns/subDays';
+import areIntervalsOverlapping from 'date-fns/areIntervalsOverlapping';
 import { useQueryClient } from '@tanstack/react-query';
 import { ScaleTime } from 'd3';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';

app/scripts/components/exploration/components/timeline/timeline-head.tsx

@@ -1,7 +1,9 @@
 import React, { forwardRef, useEffect, useRef } from 'react';
 import styled, { css, useTheme } from 'styled-components';
 import { drag, ScaleTime, select } from 'd3';
-import { clamp, format, startOfDay } from 'date-fns';
+import clamp from 'date-fns/clamp';
+import format from 'date-fns/format';
+import startOfDay from 'date-fns/startOfDay';
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 
 import { TIMELINE_PLAYHEAD_COLOR_LABEL, TIMELINE_PLAYHEAD_COLOR_PRIMARY, TIMELINE_PLAYHEAD_COLOR_SECONDARY, TIMELINE_PLAYHEAD_COLOR_TEXT } from './timeline-controls';

app/scripts/components/exploration/components/timeline/timeline.tsx

@@ -6,15 +6,13 @@ import {
 import { glsp, themeVal } from '@devseed-ui/theme-provider';
 import { Heading } from '@devseed-ui/typography';
 import { select, zoom } from 'd3';
-import {
-  add,
-  isAfter,
-  isBefore,
-  isWithinInterval,
-  max,
-  sub
-} from 'date-fns';
+import add from 'date-fns/add';
+import isAfter from 'date-fns/isAfter';
+import isBefore from 'date-fns/isBefore';
+import max from 'date-fns/max';
+import sub from 'date-fns/sub';
 import startOfDay from 'date-fns/startOfDay';
+import isWithinInterval from 'date-fns/isWithinInterval';
 import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import React, {
   useCallback,

app/scripts/components/exploration/data-utils.ts

@@ -1,10 +1,8 @@
-import {
-  eachDayOfInterval,
-  eachYearOfInterval,
-  format,
-  startOfDay,
-  startOfYear
-} from 'date-fns';
+import eachDayOfInterval from 'date-fns/eachDayOfInterval';
+import eachYearOfInterval from 'date-fns/eachYearOfInterval';
+import format from 'date-fns/format';
+import startOfDay from 'date-fns/startOfDay';
+import startOfYear from 'date-fns/startOfYear';
 import startOfMonth from 'date-fns/startOfMonth';
 import eachMonthOfInterval from 'date-fns/eachMonthOfInterval';
 import {

app/scripts/components/exploration/hooks/scales-hooks.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { scaleTime } from 'd3';
 import { useAtomValue } from 'jotai';
-import { differenceInCalendarDays } from 'date-fns';
+import differenceInCalendarDays from 'date-fns/differenceInCalendarDays';
 
 import { timelineSizesAtom, zoomTransformAtom } from '../atoms/timeline';
 import { DAY_SIZE_MAX } from '../constants';

app/scripts/utils/date.ts

@@ -1,11 +1,9 @@
-import {
-  format,
-  isSameMonth,
-  isSameYear,
-  parse,
-  startOfYear,
-  sub
-} from 'date-fns';
+import format from 'date-fns/format';
+import isSameMonth from 'date-fns/isSameMonth';
+import isSameYear from 'date-fns/isSameYear';
+import parse from 'date-fns/parse';
+import startOfYear from 'date-fns/startOfYear';
+import sub from 'date-fns/sub';
 
 /**
  * Create a date which matches the input date offsetting the timezone to match