add ext for lodash

packages/annotations/src/AnnotationNote.tsx

@@ -1,5 +1,5 @@
 import { createElement } from 'react'
-import omit from 'lodash/omit'
+import omit from 'lodash/omit.js'
 import { useSpring, animated } from '@react-spring/web'
 import { useTheme, useMotionConfig } from '@nivo/core'
 import { NoteSvg } from './types'

packages/annotations/src/compute.ts

@@ -1,6 +1,6 @@
-import filter from 'lodash/filter'
-import isNumber from 'lodash/isNumber'
-import omit from 'lodash/omit'
+import filter from 'lodash/filter.js'
+import isNumber from 'lodash/isNumber.js'
+import omit from 'lodash/omit.js'
 import {
     radiansToDegrees,
     absoluteAngleDegrees,

packages/bar/src/compute/legends.ts

@@ -7,7 +7,7 @@ import {
     LegendLabelDatum,
 } from '../types'
 import { getPropertyAccessor } from '@nivo/core'
-import uniqBy from 'lodash/uniqBy'
+import uniqBy from 'lodash/uniqBy.js'
 
 export const getLegendDataForKeys = <RawDatum extends BarDatum>(
     bars: BarsWithHidden<RawDatum>,

packages/boxplot/src/compute/legends.ts

@@ -1,7 +1,7 @@
 import { BoxPlotDatum, BoxPlotCommonProps, ComputedBoxPlotSummary, LegendData } from '../types'
 import { getPropertyAccessor } from '@nivo/core'
-import uniqBy from 'lodash/uniqBy'
-import sortBy from 'lodash/sortBy'
+import uniqBy from 'lodash/uniqBy.js'
+import sortBy from 'lodash/sortBy.js'
 
 export const getLegendData = <RawDatum extends BoxPlotDatum>({
     boxPlots,

packages/calendar/src/compute/calendar.ts

@@ -1,6 +1,6 @@
-import isDate from 'lodash/isDate'
-import memoize from 'lodash/memoize'
-import range from 'lodash/range'
+import isDate from 'lodash/isDate.js'
+import memoize from 'lodash/memoize.js'
+import range from 'lodash/range.js'
 import { alignBox } from '@nivo/core'
 import { timeFormat } from 'd3-time-format'
 import { timeDays, timeWeek, timeWeeks, timeMonths, timeYear } from 'd3-time'

packages/calendar/src/compute/timeRange.ts

@@ -11,7 +11,7 @@ import {
 } from 'd3-time'
 import { timeFormat } from 'd3-time-format'
 import { DateOrString, Weekday } from '../types'
-import isDate from 'lodash/isDate'
+import isDate from 'lodash/isDate.js'
 
 // Interfaces
 interface ComputeBaseProps {

packages/circle-packing/src/hooks.ts

@@ -1,7 +1,7 @@
 import { useMemo, MouseEvent, MutableRefObject, useCallback } from 'react'
 import { pack as d3Pack, hierarchy as d3Hierarchy } from 'd3-hierarchy'
-import cloneDeep from 'lodash/cloneDeep'
-import sortBy from 'lodash/sortBy'
+import cloneDeep from 'lodash/cloneDeep.js'
+import sortBy from 'lodash/sortBy.js'
 import {
     usePropertyAccessor,
     useValueFormatter,

packages/colors/src/inheritedColor.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
-import get from 'lodash/get'
-import isPlainObject from 'lodash/isPlainObject'
+import get from 'lodash/get.js'
+import isPlainObject from 'lodash/isPlainObject.js'
 import { rgb, RGBColor } from 'd3-color'
 import { Theme } from '@nivo/core'
 

packages/colors/src/scales/ordinalColorScale.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
-import get from 'lodash/get'
-import isPlainObject from 'lodash/isPlainObject'
+import get from 'lodash/get.js'
+import isPlainObject from 'lodash/isPlainObject.js'
 import { scaleOrdinal } from 'd3-scale'
 import {
     ColorSchemeId,

packages/core/src/lib/colors/index.js

@@ -6,9 +6,9 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import last from 'lodash/last'
-import isArray from 'lodash/isArray'
-import isString from 'lodash/isString'
+import last from 'lodash/last.js'
+import isArray from 'lodash/isArray.js'
+import isString from 'lodash/isString.js'
 import { scaleOrdinal, scaleSequential } from 'd3-scale'
 import {
     // categorical

packages/core/src/lib/colors/quantize.js

@@ -6,9 +6,9 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import last from 'lodash/last'
-import isArray from 'lodash/isArray'
-import isFunction from 'lodash/isFunction'
+import last from 'lodash/last.js'
+import isArray from 'lodash/isArray.js'
+import isFunction from 'lodash/isFunction.js'
 import { scaleQuantize } from 'd3-scale'
 import {
     // Diverging

packages/core/src/lib/defs.js

@@ -1,9 +1,9 @@
-import isFunction from 'lodash/isFunction'
-import isPlainObject from 'lodash/isPlainObject'
-import pick from 'lodash/pick'
-import isEqual from 'lodash/isEqual'
-import get from 'lodash/get'
-import set from 'lodash/set'
+import isFunction from 'lodash/isFunction.js'
+import isPlainObject from 'lodash/isPlainObject.js'
+import pick from 'lodash/pick.js'
+import isEqual from 'lodash/isEqual.js'
+import get from 'lodash/get.js'
+import set from 'lodash/set.js'
 import { gradientTypes, patternTypes } from '../components/defs'
 
 const gradientKeys = Object.keys(gradientTypes)

packages/core/src/lib/propertiesConverters.js

@@ -1,5 +1,5 @@
-import isFunction from 'lodash/isFunction'
-import get from 'lodash/get'
+import isFunction from 'lodash/isFunction.js'
+import get from 'lodash/get.js'
 import { format } from 'd3-format'
 import { useMemo } from 'react'
 

packages/core/src/motion/context.js

@@ -1,5 +1,5 @@
 import { createContext, useMemo } from 'react'
-import isString from 'lodash/isString'
+import isString from 'lodash/isString.js'
 import PropTypes from 'prop-types'
 import { config as presets } from '@react-spring/web'
 

packages/core/src/props/curve.js

@@ -1,4 +1,4 @@
-import without from 'lodash/without'
+import without from 'lodash/without.js'
 import {
     curveBasis,
     curveBasisClosed,

packages/core/src/theming/extend.js

@@ -6,9 +6,9 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import merge from 'lodash/merge'
-import get from 'lodash/get'
-import set from 'lodash/set'
+import merge from 'lodash/merge.js'
+import get from 'lodash/get.js'
+import set from 'lodash/set.js'
 
 const textPropsWithInheritance = [
     'axis.ticks.text',

packages/core/tests/lib/defs.test.js

@@ -6,7 +6,7 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  */
-import partial from 'lodash/partial'
+import partial from 'lodash/partial.js'
 import { isMatchingDef, bindDefs } from '../../src/lib/defs'
 
 describe('isMatchingDef()', () => {

packages/express/src/index.ts

@@ -1,6 +1,6 @@
 import { Router } from 'express'
 import * as uuid from 'uuid'
-import forOwn from 'lodash/forOwn'
+import forOwn from 'lodash/forOwn.js'
 import { chartsMapping, ChartType, renderChart, samples } from '@nivo/static'
 import { validate } from './validation'
 import * as storage from './memory-storage'

packages/express/src/validation.ts

@@ -1,5 +1,5 @@
 import { Request, Response, NextFunction } from 'express'
-import omit from 'lodash/omit'
+import omit from 'lodash/omit.js'
 import Joi from 'joi'
 
 export const validate = (

packages/generators/src/bullet.ts

@@ -1,5 +1,5 @@
-import range from 'lodash/range'
-import random from 'lodash/random'
+import range from 'lodash/range.js'
+import random from 'lodash/random.js'
 
 type Options = Partial<{
     float: boolean

packages/generators/src/chord.ts

@@ -1,5 +1,5 @@
-import range from 'lodash/range'
-import random from 'lodash/random'
+import range from 'lodash/range.js'
+import random from 'lodash/random.js'
 import { names } from './sets'
 
 export const generateChordData = ({

packages/generators/src/index.ts

@@ -1,6 +1,6 @@
-import range from 'lodash/range'
-import random from 'lodash/random'
-import shuffle from 'lodash/shuffle'
+import range from 'lodash/range.js'
+import random from 'lodash/random.js'
+import shuffle from 'lodash/shuffle.js'
 import { timeDays } from 'd3-time'
 import { timeFormat } from 'd3-time-format'
 import * as color from './color'

packages/generators/src/network.ts

@@ -1,4 +1,4 @@
-import random from 'lodash/random'
+import random from 'lodash/random.js'
 
 type Link = {
     source: string

packages/generators/src/parallelCoordinates.ts

@@ -1,4 +1,4 @@
-import random from 'lodash/random'
+import random from 'lodash/random.js'
 
 interface Id {
     id: string

packages/generators/src/sankey.ts

@@ -1,6 +1,6 @@
-import range from 'lodash/range'
-import random from 'lodash/random'
-import shuffle from 'lodash/shuffle'
+import range from 'lodash/range.js'
+import random from 'lodash/random.js'
+import shuffle from 'lodash/shuffle.js'
 import { randColor } from './color'
 import { names } from './sets'
 

packages/generators/src/swarmplot.ts

@@ -1,6 +1,6 @@
-import range from 'lodash/range'
-import random from 'lodash/random'
-import shuffle from 'lodash/shuffle'
+import range from 'lodash/range.js'
+import random from 'lodash/random.js'
+import shuffle from 'lodash/shuffle.js'
 
 type SwarmPlotDatum = {
     id: string

packages/geo/src/hooks.js

@@ -7,8 +7,8 @@
  * file that was distributed with this source code.
  */
 import { useMemo } from 'react'
-import isFunction from 'lodash/isFunction'
-import get from 'lodash/get'
+import isFunction from 'lodash/isFunction.js'
+import get from 'lodash/get.js'
 import { format } from 'd3-format'
 import {
     geoPath,

packages/line/src/hooks.js

@@ -3,7 +3,7 @@ import { area, line } from 'd3-shape'
 import { curveFromProp, useTheme, useValueFormatter } from '@nivo/core'
 import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors'
 import { computeXYScalesForSeries } from '@nivo/scales'
-import uniqueId from 'lodash/uniqueId'
+import uniqueId from 'lodash/uniqueId.js'
 import { LineDefaultProps } from './props'
 
 export const useLineGenerator = ({ curve }) => {

packages/line/tests/Line.test.js

@@ -14,7 +14,7 @@ beforeEach(() => {
 })
 const generateId = () => `${LINE_UNIQUE_ID_PREFIX}${++id}`
 
-jest.mock('lodash/uniqueId', () => generateId)
+jest.mock('lodash/uniqueId.js', () => generateId)
 
 it('should render a basic line chart', () => {
     const data = [

packages/marimekko/src/hooks.ts

@@ -1,5 +1,5 @@
 import { useMemo } from 'react'
-import get from 'lodash/get'
+import get from 'lodash/get.js'
 import { stack as d3Stack, Stack, Series } from 'd3-shape'
 import { useValueFormatter, useTheme } from '@nivo/core'
 import { InheritedColorConfig, useInheritedColor, useOrdinalColorScale } from '@nivo/colors'

packages/sankey/src/Sankey.tsx

@@ -1,5 +1,5 @@
 import { createElement, Fragment, ReactNode } from 'react'
-import uniq from 'lodash/uniq'
+import uniq from 'lodash/uniq.js'
 import { SvgWrapper, useDimensions, Container } from '@nivo/core'
 import { BoxLegendSvg } from '@nivo/legends'
 import { svgDefaultProps } from './props'

packages/sankey/src/hooks.ts

@@ -1,5 +1,5 @@
 import { useState, useMemo } from 'react'
-import cloneDeep from 'lodash/cloneDeep'
+import cloneDeep from 'lodash/cloneDeep.js'
 import { sankey as d3Sankey } from 'd3-sankey'
 import { useTheme, usePropertyAccessor, useValueFormatter } from '@nivo/core'
 import { useOrdinalColorScale, useInheritedColor } from '@nivo/colors'

packages/scales/src/compute.ts

@@ -1,8 +1,8 @@
-import uniq from 'lodash/uniq'
-import uniqBy from 'lodash/uniqBy'
-import sortBy from 'lodash/sortBy'
-import last from 'lodash/last'
-import isDate from 'lodash/isDate'
+import uniq from 'lodash/uniq.js'
+import uniqBy from 'lodash/uniqBy.js'
+import sortBy from 'lodash/sortBy.js'
+import last from 'lodash/last.js'
+import isDate from 'lodash/isDate.js'
 import { createDateNormalizer } from './timeHelpers'
 import { ScaleAxis, ScaleSpec, ScaleValue, SerieAxis, ComputedSerieAxis } from './types'
 import { createLinearScale } from './linearScale'

packages/scatterplot/src/compute.ts

@@ -1,7 +1,7 @@
-import get from 'lodash/get'
-import isString from 'lodash/isString'
-import isNumber from 'lodash/isNumber'
-import isPlainObject from 'lodash/isPlainObject'
+import get from 'lodash/get.js'
+import isString from 'lodash/isString.js'
+import isNumber from 'lodash/isNumber.js'
+import isPlainObject from 'lodash/isPlainObject.js'
 import { scaleLinear } from 'd3-scale'
 import { ComputedSerie } from '@nivo/scales'
 import {

packages/static/src/renderer.ts

@@ -1,4 +1,4 @@
-import pick from 'lodash/pick'
+import pick from 'lodash/pick.js'
 import { createElement } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { ChartProps, chartsMapping, ChartType } from './mappings'

packages/sunburst/src/hooks.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
 import { partition as d3Partition, hierarchy as d3Hierarchy } from 'd3-hierarchy'
-import cloneDeep from 'lodash/cloneDeep'
-import sortBy from 'lodash/sortBy'
+import cloneDeep from 'lodash/cloneDeep.js'
+import sortBy from 'lodash/sortBy.js'
 import { usePropertyAccessor, useTheme, useValueFormatter } from '@nivo/core'
 import { Arc, useArcGenerator } from '@nivo/arcs'
 import { useOrdinalColorScale, useInheritedColor, InheritedColorConfig } from '@nivo/colors'

packages/swarmplot/src/SwarmPlotCanvas.tsx

@@ -1,6 +1,6 @@
 import { createElement, useCallback, useEffect, useRef, useState } from 'react'
 import * as React from 'react'
-import isNumber from 'lodash/isNumber'
+import isNumber from 'lodash/isNumber.js'
 import { Container, getRelativeCursor, isCursorInRect, useDimensions, useTheme } from '@nivo/core'
 import { InheritedColorConfig, OrdinalColorScaleConfig, useInheritedColor } from '@nivo/colors'
 import { AnyScale } from '@nivo/scales'

packages/swarmplot/src/compute.ts

@@ -1,7 +1,7 @@
-import isNumber from 'lodash/isNumber'
-import isPlainObject from 'lodash/isPlainObject'
-import isString from 'lodash/isString'
-import get from 'lodash/get'
+import isNumber from 'lodash/isNumber.js'
+import isPlainObject from 'lodash/isPlainObject.js'
+import isString from 'lodash/isString.js'
+import get from 'lodash/get.js'
 import { scaleLinear, ScaleOrdinal, scaleOrdinal } from 'd3-scale'
 import { forceSimulation, forceX, forceY, forceCollide, ForceX, ForceY } from 'd3-force'
 import {

packages/treemap/src/hooks.ts

@@ -1,7 +1,7 @@
 import { createElement, useCallback, useMemo, MouseEvent } from 'react'
-import omit from 'lodash/omit'
-import cloneDeep from 'lodash/cloneDeep'
-import startCase from 'lodash/startCase'
+import omit from 'lodash/omit.js'
+import cloneDeep from 'lodash/cloneDeep.js'
+import startCase from 'lodash/startCase.js'
 import {
     treemap as d3Treemap,
     hierarchy,

storybook/stories/bump/AreaBump.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import range from 'lodash/range'
-import shuffle from 'lodash/shuffle'
+import range from 'lodash/range.js'
+import shuffle from 'lodash/shuffle.js'
 import { AreaBump, AreaBumpSvgProps } from '@nivo/bump'
 
 const meta: Meta<typeof AreaBump> = {

storybook/stories/bump/Bump.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
-import range from 'lodash/range'
-import shuffle from 'lodash/shuffle'
+import range from 'lodash/range.js'
+import shuffle from 'lodash/shuffle.js'
 import { Bump, BumpPoint, BumpSvgProps, BumpComputedSerie } from '@nivo/bump'
 
 const meta: Meta<typeof Bump> = {

storybook/stories/line/Line.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { Component, useState, useEffect } from 'react'
-import range from 'lodash/range'
-import last from 'lodash/last'
+import range from 'lodash/range.js'
+import last from 'lodash/last.js'
 import { generateDrinkStats } from '@nivo/generators'
 import { Defs, linearGradientDef } from '@nivo/core'
 import { area, curveMonotoneX } from 'd3-shape'

storybook/stories/scatterplot/ScatterPlot.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { useState, useCallback, useMemo } from 'react'
-import omit from 'lodash/omit'
+import omit from 'lodash/omit.js'
 import { area, curveMonotoneX } from 'd3-shape'
 import {
     ScatterPlot,