perf(date): Import date utilities from sub-modules

.changeset/quick-dates-import.md

@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Date utilities: Import date-fns functions and locales from their own paths, so unbundled Node imports (SSR, Vitest/Jest) no longer load every date-fns locale.

@navikt/core/react/src/datepicker/day-button/DatePickerDayButtonInternal.tsx

@@ -1,4 +1,5 @@
-import { type Locale, format } from "date-fns";
+import type { Locale } from "date-fns";
+import { format } from "date-fns/format";
 import React, { useEffect, useRef } from "react";
 import type { CalendarDay, Modifiers } from "react-day-picker";
 import { cl } from "../../utils/helpers";

@navikt/core/react/src/datepicker/months/DatePickerMonthsInternal.tsx

@@ -1,12 +1,10 @@
-import {
-  type Locale,
-  format,
-  getMonth,
-  getYear,
-  setMonth,
-  setYear,
-  startOfMonth,
-} from "date-fns";
+import type { Locale } from "date-fns";
+import { format } from "date-fns/format";
+import { getMonth } from "date-fns/getMonth";
+import { getYear } from "date-fns/getYear";
+import { setMonth } from "date-fns/setMonth";
+import { setYear } from "date-fns/setYear";
+import { startOfMonth } from "date-fns/startOfMonth";
 import React, { type ChangeEvent, useCallback } from "react";
 import { type CalendarMonth, useDayPicker } from "react-day-picker";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";

@navikt/core/react/src/datepicker/rdp/DatePickerRDPInternal.tsx

@@ -1,4 +1,4 @@
-import { isWeekend } from "date-fns";
+import { isWeekend } from "date-fns/isWeekend";
 import React, { useCallback, useState } from "react";
 import {
   type ClassNames,

@navikt/core/react/src/datepicker/root/DatePickerRoot.tsx

@@ -1,4 +1,4 @@
-import { isSameDay } from "date-fns";
+import { isSameDay } from "date-fns/isSameDay";
 import React, { forwardRef, useRef, useState } from "react";
 import type { DateRange } from "react-day-picker";
 import { useId } from "../../utils-external";

@navikt/core/react/src/datepicker/root/useDatepicker.tsx

@@ -1,4 +1,5 @@
-import { differenceInCalendarDays, isWeekend } from "date-fns";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+import { isWeekend } from "date-fns/isWeekend";
 import React, { useCallback, useState } from "react";
 import { type DayEventHandler, dateMatchModifiers } from "react-day-picker";
 import { getLocaleFromString } from "../../utils/components/date/Date.locale";

@navikt/core/react/src/datepicker/root/useRangeDatepicker.tsx

@@ -1,4 +1,6 @@
-import { differenceInCalendarDays, isSameDay, isWeekend } from "date-fns";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+import { isSameDay } from "date-fns/isSameDay";
+import { isWeekend } from "date-fns/isWeekend";
 import React, { useState } from "react";
 import { dateMatchModifiers } from "react-day-picker";
 import { getLocaleFromString } from "../../utils/components/date/Date.locale";

@navikt/core/react/src/monthpicker/button/MonthPickerButtonInternal.tsx

@@ -1,10 +1,8 @@
-import {
-  compareAsc,
-  compareDesc,
-  format,
-  isSameMonth,
-  setYear,
-} from "date-fns";
+import { compareAsc } from "date-fns/compareAsc";
+import { compareDesc } from "date-fns/compareDesc";
+import { format } from "date-fns/format";
+import { isSameMonth } from "date-fns/isSameMonth";
+import { setYear } from "date-fns/setYear";
 import React, { useEffect, useRef } from "react";
 import { dateIsInCurrentMonth, isMatch } from "../../utils/date";
 import { cl } from "../../utils/helpers";

@navikt/core/react/src/monthpicker/caption/MonthPickerCaptionInternal.tsx

@@ -1,11 +1,9 @@
-import {
-  format,
-  isAfter,
-  isBefore,
-  setYear,
-  startOfMonth,
-  startOfYear,
-} from "date-fns";
+import { format } from "date-fns/format";
+import { isAfter } from "date-fns/isAfter";
+import { isBefore } from "date-fns/isBefore";
+import { setYear } from "date-fns/setYear";
+import { startOfMonth } from "date-fns/startOfMonth";
+import { startOfYear } from "date-fns/startOfYear";
 import React from "react";
 import { ArrowLeftIcon, ArrowRightIcon } from "@navikt/aksel-icons";
 import { Button } from "../../button";

@navikt/core/react/src/monthpicker/root/MonthPicker.context.tsx

@@ -1,4 +1,5 @@
-import { type Locale, isSameYear } from "date-fns";
+import type { Locale } from "date-fns";
+import { isSameYear } from "date-fns/isSameYear";
 import React from "react";
 import { clampDisplayYear } from "../../utils/date";
 import { createStrictContext } from "../../utils/helpers";

@navikt/core/react/src/monthpicker/root/MonthPicker.util.ts

@@ -1,4 +1,4 @@
-import { setYear } from "date-fns";
+import { setYear } from "date-fns/setYear";
 import type { Matcher } from "../../utils/components/date/Date.typeutils";
 import { isMatch } from "../../utils/date";
 

@navikt/core/react/src/monthpicker/table/MonthPickerTableInternal.tsx

@@ -1,4 +1,7 @@
-import { isSameMonth, setMonth, setYear, startOfMonth } from "date-fns";
+import { isSameMonth } from "date-fns/isSameMonth";
+import { setMonth } from "date-fns/setMonth";
+import { setYear } from "date-fns/setYear";
+import { startOfMonth } from "date-fns/startOfMonth";
 import React, { useState } from "react";
 import { BodyShort } from "../../typography";
 import { isMatch } from "../../utils/date";

@navikt/core/react/src/timeline/axis-labels/TimelineAxisLabelsInternal.tsx

@@ -1,19 +1,17 @@
-import {
-  type Locale,
-  addDays,
-  addMonths,
-  addYears,
-  differenceInDays,
-  differenceInMonths,
-  differenceInYears,
-  endOfMonth,
-  endOfYear,
-  format,
-  startOfDay,
-  startOfMonth,
-  startOfYear,
-  subDays,
-} from "date-fns";
+import type { Locale } from "date-fns";
+import { addDays } from "date-fns/addDays";
+import { addMonths } from "date-fns/addMonths";
+import { addYears } from "date-fns/addYears";
+import { differenceInDays } from "date-fns/differenceInDays";
+import { differenceInMonths } from "date-fns/differenceInMonths";
+import { differenceInYears } from "date-fns/differenceInYears";
+import { endOfMonth } from "date-fns/endOfMonth";
+import { endOfYear } from "date-fns/endOfYear";
+import { format } from "date-fns/format";
+import { startOfDay } from "date-fns/startOfDay";
+import { startOfMonth } from "date-fns/startOfMonth";
+import { startOfYear } from "date-fns/startOfYear";
+import { subDays } from "date-fns/subDays";
 import React, { useCallback, useMemo } from "react";
 import { Detail } from "../../typography/Detail";
 import { useDateLocale, useI18n } from "../../utils/i18n/i18n.hooks";

@navikt/core/react/src/timeline/pin/TimelinePin.tsx

@@ -1,4 +1,4 @@
-import { isBefore } from "date-fns";
+import { isBefore } from "date-fns/isBefore";
 import React, { forwardRef } from "react";
 import { useTimelineContext } from "../root/TimelineRoot.context";
 import {

@navikt/core/react/src/timeline/pin/TimelinePinInternal.tsx

@@ -12,7 +12,7 @@ import {
   useHover,
   useInteractions,
 } from "@floating-ui/react";
-import { format } from "date-fns";
+import { format } from "date-fns/format";
 import React, { forwardRef, useMemo, useState } from "react";
 import { useMergeRefs } from "../../utils/hooks";
 import { useI18n } from "../../utils/i18n/i18n.hooks";

@navikt/core/react/src/timeline/root/TimelineRoot.tsx

@@ -1,4 +1,6 @@
-import { endOfDay, isSameDay, startOfDay } from "date-fns";
+import { endOfDay } from "date-fns/endOfDay";
+import { isSameDay } from "date-fns/isSameDay";
+import { startOfDay } from "date-fns/startOfDay";
 import React, { forwardRef, useMemo, useState } from "react";
 import { consoleWarning } from "../../utils/helpers/consoleWarning";
 import { TimelineAxisLabelsInternal } from "../axis-labels/TimelineAxisLabelsInternal";

@navikt/core/react/src/timeline/root/useTimelineRows.test.ts

@@ -1,5 +1,6 @@
 import { renderHook } from "@testing-library/react";
-import { addDays, isSameDay } from "date-fns";
+import { addDays } from "date-fns/addDays";
+import { isSameDay } from "date-fns/isSameDay";
 import { describe, expect, test } from "vitest";
 import {
   useEarliestDate,

@navikt/core/react/src/timeline/root/useTimelineRows.ts

@@ -1,4 +1,8 @@
-import { addDays, endOfDay, isAfter, startOfDay, subDays } from "date-fns";
+import { addDays } from "date-fns/addDays";
+import { endOfDay } from "date-fns/endOfDay";
+import { isAfter } from "date-fns/isAfter";
+import { startOfDay } from "date-fns/startOfDay";
+import { subDays } from "date-fns/subDays";
 import { useMemo } from "react";
 import { horizontalPositionAndWidth } from "../utils/calc";
 import { invisiblePeriods, withinADay } from "../utils/filter";

@navikt/core/react/src/timeline/row/TimelineRow.tsx

@@ -1,4 +1,4 @@
-import { format } from "date-fns";
+import { format } from "date-fns/format";
 import React, { forwardRef } from "react";
 import { BodyShort } from "../../typography/BodyShort";
 import { cl } from "../../utils/helpers";

@navikt/core/react/src/timeline/utils/calc.ts

@@ -1,4 +1,4 @@
-import { differenceInMilliseconds } from "date-fns";
+import { differenceInMilliseconds } from "date-fns/differenceInMilliseconds";
 
 const position = (date: Date, start: Date, endInclusive: Date) => {
   const diff = differenceInMilliseconds(endInclusive, start);

@navikt/core/react/src/timeline/utils/filter.ts

@@ -1,4 +1,4 @@
-import { differenceInDays } from "date-fns";
+import { differenceInDays } from "date-fns/differenceInDays";
 import type { PeriodProps } from "../Timeline.types";
 import type { Spatial } from "./types.internal";
 

@navikt/core/react/src/timeline/utils/period.ts

@@ -1,4 +1,4 @@
-import { format } from "date-fns";
+import { format } from "date-fns/format";
 import { cl } from "../../utils/helpers";
 import type { TFunction } from "../../utils/i18n/i18n.types";
 import type { PeriodProps } from "../Timeline.types";

@navikt/core/react/src/timeline/utils/sort.ts

@@ -1,4 +1,4 @@
-import { differenceInMilliseconds } from "date-fns";
+import { differenceInMilliseconds } from "date-fns/differenceInMilliseconds";
 import type { Period, PositionedPeriod } from "./types.internal";
 
 const lastDate = (a: Date, b: Date): number => differenceInMilliseconds(a, b);

@navikt/core/react/src/timeline/zoom-button/TimelineZoomButton.tsx

@@ -1,11 +1,9 @@
-import {
-  addMonths,
-  addYears,
-  format,
-  isSameDay,
-  subMonths,
-  subYears,
-} from "date-fns";
+import { addMonths } from "date-fns/addMonths";
+import { addYears } from "date-fns/addYears";
+import { format } from "date-fns/format";
+import { isSameDay } from "date-fns/isSameDay";
+import { subMonths } from "date-fns/subMonths";
+import { subYears } from "date-fns/subYears";
 import React, { forwardRef } from "react";
 import { Detail } from "../../typography/Detail";
 import { useI18n } from "../../utils/i18n/i18n.hooks";

@navikt/core/react/src/utils/components/date/Date.locale.ts

@@ -1,4 +1,6 @@
-import { enGB, nb, nn } from "date-fns/locale";
+import { enGB } from "date-fns/locale/en-GB";
+import { nb } from "date-fns/locale/nb";
+import { nn } from "date-fns/locale/nn";
 import { createStrictContext } from "../../helpers";
 import type { TFunction } from "../../i18n/i18n.types";
 import en_translations from "../../i18n/locales/en";

@navikt/core/react/src/utils/date/calendar-range.test.ts

@@ -1,11 +1,9 @@
-import {
-  addYears,
-  endOfMonth,
-  endOfYear,
-  startOfDay,
-  startOfMonth,
-  startOfYear,
-} from "date-fns";
+import { addYears } from "date-fns/addYears";
+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 { describe, expect, test } from "vitest";
 import { calendarRange } from "./calendar-range";
 

@navikt/core/react/src/utils/date/calendar-range.ts

@@ -1,11 +1,9 @@
-import {
-  addYears,
-  endOfMonth,
-  endOfYear,
-  startOfDay,
-  startOfMonth,
-  startOfYear,
-} from "date-fns";
+import { addYears } from "date-fns/addYears";
+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";
 
 /**
  * Generates the min and max-dates possible to show and navigate to in the calendar.

@navikt/core/react/src/utils/date/check-dates.test.ts

@@ -1,4 +1,4 @@
-import { setYear } from "date-fns";
+import { setYear } from "date-fns/setYear";
 import { describe, expect, test } from "vitest";
 import { dateIsInCurrentMonth, isValidDate } from "./check-dates";
 

@navikt/core/react/src/utils/date/check-dates.ts

@@ -1,9 +1,7 @@
-import {
-  differenceInCalendarDays,
-  isThisMonth,
-  setYear,
-  startOfDay,
-} from "date-fns";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+import { isThisMonth } from "date-fns/isThisMonth";
+import { setYear } from "date-fns/setYear";
+import { startOfDay } from "date-fns/startOfDay";
 
 export const dateIsInCurrentMonth = (
   date: Date,

@navikt/core/react/src/utils/date/clamp-dates.test.ts

@@ -1,4 +1,5 @@
-import { startOfMonth, startOfYear } from "date-fns";
+import { startOfMonth } from "date-fns/startOfMonth";
+import { startOfYear } from "date-fns/startOfYear";
 import { describe, expect, test } from "vitest";
 import { isDateOutsideRange } from "./check-dates";
 import { clampDisplayMonth, clampDisplayYear } from "./clamp-dates";

@navikt/core/react/src/utils/date/clamp-dates.ts

@@ -1,4 +1,7 @@
-import { isAfter, isBefore, startOfMonth, startOfYear } from "date-fns";
+import { isAfter } from "date-fns/isAfter";
+import { isBefore } from "date-fns/isBefore";
+import { startOfMonth } from "date-fns/startOfMonth";
+import { startOfYear } from "date-fns/startOfYear";
 
 /**
  * Makes sure the month is within the min and max daterange to avoid showing disabled months

@navikt/core/react/src/utils/date/dates-disabled.ts

@@ -1,4 +1,4 @@
-import { isSameDay } from "date-fns";
+import { isSameDay } from "date-fns/isSameDay";
 import { isDateRange } from "../components/date/Date.typeutils";
 
 export const disableDate = (

@navikt/core/react/src/utils/date/dropdown-options.test.ts

@@ -1,4 +1,4 @@
-import { nb } from "date-fns/locale";
+import { nb } from "date-fns/locale/nb";
 import { describe, expect, test } from "vitest";
 import { getMonthOptions, getYearOptions } from "./dropdown-options";
 

@navikt/core/react/src/utils/date/dropdown-options.ts

@@ -1,16 +1,14 @@
-import {
-  type Locale,
-  addYears,
-  eachMonthOfInterval,
-  endOfYear,
-  format,
-  getMonth,
-  getYear,
-  isBefore,
-  isSameYear,
-  startOfMonth,
-  startOfYear,
-} from "date-fns";
+import type { Locale } from "date-fns";
+import { addYears } from "date-fns/addYears";
+import { eachMonthOfInterval } from "date-fns/eachMonthOfInterval";
+import { endOfYear } from "date-fns/endOfYear";
+import { format } from "date-fns/format";
+import { getMonth } from "date-fns/getMonth";
+import { getYear } from "date-fns/getYear";
+import { isBefore } from "date-fns/isBefore";
+import { isSameYear } from "date-fns/isSameYear";
+import { startOfMonth } from "date-fns/startOfMonth";
+import { startOfYear } from "date-fns/startOfYear";
 
 /** Return the months to show in the dropdown. */
 export function getMonthOptions({

@navikt/core/react/src/utils/date/format-date.ts

@@ -1,4 +1,5 @@
-import { type Locale, format } from "date-fns";
+import type { Locale } from "date-fns";
+import { format } from "date-fns/format";
 import {
   INPUT_DATE_STRING_FORMAT_DATE,
   INPUT_DATE_STRING_FORMAT_MONTH,

@navikt/core/react/src/utils/date/format-dates.test.ts

@@ -1,4 +1,4 @@
-import { nb } from "date-fns/locale";
+import { nb } from "date-fns/locale/nb";
 import { describe, expect, test } from "vitest";
 import { formatDateForInput } from "./format-date";
 import { parseDate } from "./parse-date";

@navikt/core/react/src/utils/date/is-match.ts

@@ -1,9 +1,7 @@
-import {
-  differenceInCalendarDays,
-  isDate,
-  isSameDay,
-  isSameMonth,
-} from "date-fns";
+import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
+import { isDate } from "date-fns/isDate";
+import { isSameDay } from "date-fns/isSameDay";
+import { isSameMonth } from "date-fns/isSameMonth";
 import {
   type DateRange,
   type Matcher,

@navikt/core/react/src/utils/date/parse-date.ts

@@ -1,4 +1,7 @@
-import { type Locale, isBefore, parse, sub } from "date-fns";
+import type { Locale } from "date-fns";
+import { isBefore } from "date-fns/isBefore";
+import { parse } from "date-fns/parse";
+import { sub } from "date-fns/sub";
 import { isValidDate } from "./check-dates";
 
 export const INPUT_DATE_STRING_FORMAT_DATE = "dd.MM.yyyy";

@navikt/core/react/src/utils/date/parse-dates.test.ts

@@ -1,5 +1,5 @@
-import { getMonth } from "date-fns";
-import { nb } from "date-fns/locale";
+import { getMonth } from "date-fns/getMonth";
+import { nb } from "date-fns/locale/nb";
 import { describe, expect, test } from "vitest";
 import { isValidDate } from "./check-dates";
 import { parseDate } from "./parse-date";

@navikt/core/react/src/utils/date/pick-range-selection.ts

@@ -1,4 +1,5 @@
-import { isBefore, isSameDay } from "date-fns";
+import { isBefore } from "date-fns/isBefore";
+import { isSameDay } from "date-fns/isSameDay";
 import type { DateRange } from "../components/date/Date.typeutils";
 
 /**

@navikt/core/react/src/utils/i18n/locales/en.ts

@@ -1,4 +1,4 @@
-import { enGB } from "date-fns/locale";
+import { enGB } from "date-fns/locale/en-GB";
 import type { Translations } from "../i18n.types";
 
 export default {

@navikt/core/react/src/utils/i18n/locales/nb.ts

@@ -1,4 +1,5 @@
-import { type Locale, nb } from "date-fns/locale";
+import type { Locale } from "date-fns";
+import { nb } from "date-fns/locale/nb";
 
 interface TranslationMap {
   [component: string]: Record<string, string | Record<string, string> | Locale>;

@navikt/core/react/src/utils/i18n/locales/nn.ts

@@ -1,4 +1,4 @@
-import { nn } from "date-fns/locale";
+import { nn } from "date-fns/locale/nn";
 import type { Translations } from "../i18n.types";
 
 export default {

eslint.config.js

@@ -167,6 +167,31 @@ module.exports = defineConfig([
       "import/no-named-export": "error",
     },
   },
+  {
+    files: ["@navikt/core/react/src/**/*.{ts,tsx}"],
+    ignores: ["**/*.stories.tsx"],
+    rules: {
+      "@typescript-eslint/no-restricted-imports": [
+        "error",
+        {
+          paths: [
+            {
+              name: "date-fns",
+              allowTypeImports: true,
+              message:
+                'Import functions from their own path, e.g. `import { format } from "date-fns/format"`. The root barrel makes unbundled Node imports load all of date-fns.',
+            },
+            {
+              name: "date-fns/locale",
+              allowTypeImports: true,
+              message:
+                'Import locales from their own path, e.g. `import { nb } from "date-fns/locale/nb"`. The barrel makes unbundled Node imports load all locales.',
+            },
+          ],
+        },
+      ],
+    },
+  },
   {
     files: ["@navikt/**"],
     ignores: ["**/*.stories.tsx"],