feat: make module native ESM

BREAKING-CHANGE: the module is now ESM-only

.nvmrc

@@ -1 +1 @@
-20
+22

.storybook/main.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
 
   addons: [

eslint.config.js

@@ -0,0 +1,4 @@
+import react from 'eslint-config-zakodium/react';
+import ts from 'eslint-config-zakodium/ts';
+
+export default [...react, ...ts];

package.json

@@ -2,27 +2,26 @@
   "name": "react-d3-utils",
   "version": "1.0.0",
   "description": "Low-level utilities to build charts with React and D3",
-  "main": "lib/index.js",
-  "module": "lib-esm/index.js",
-  "types": "lib-esm/index.d.ts",
+  "type": "module",
+  "exports": "./lib/index.js",
   "files": [
     "lib",
-    "lib-esm"
+    "src"
   ],
   "scripts": {
     "build": "npm run clean && npm run build-ts",
-    "build-ts": "tsc -p tsconfig.cjs.json && tsc -p tsconfig.esm.json",
+    "build-ts": "tsc -p tsconfig.build.json",
     "build-storybook": "storybook build",
     "check-types": "tsc --noEmit",
-    "clean": "rimraf lib lib-esm",
+    "clean": "rimraf lib",
     "dev": "storybook dev -p 6006",
     "eslint": "eslint src stories",
     "eslint-fix": "npm run eslint -- --fix",
+    "prepack": "npm run build",
     "prettier": "prettier --check .",
     "prettier-write": "prettier --write .",
-    "prepublishOnly": "npm run build",
     "start": "npm run dev",
-    "test": "npm run eslint && npm run check-types"
+    "test": "npm run eslint && npm run prettier && npm run check-types"
   },
   "repository": {
     "type": "git",
@@ -35,26 +34,26 @@
   },
   "homepage": "https://github.com/zakodium-oss/react-d3-utils#readme",
   "devDependencies": {
-    "@simbathesailor/use-what-changed": "^2.0.0",
-    "@storybook/addon-essentials": "^8.2.8",
-    "@storybook/addon-links": "^8.2.8",
-    "@storybook/addon-storysource": "^8.2.8",
-    "@storybook/react": "^8.2.8",
-    "@storybook/react-vite": "^8.2.8",
-    "@types/react": "^18.3.3",
-    "@zakodium/eslint-config": "^6.0.0",
-    "eslint": "^8.27.0",
+    "@storybook/addon-essentials": "^8.3.5",
+    "@storybook/addon-links": "^8.3.5",
+    "@storybook/addon-storysource": "^8.3.5",
+    "@storybook/react": "^8.3.5",
+    "@storybook/react-vite": "^8.3.5",
+    "@types/react": "^18.3.11",
+    "eslint": "^9.12.0",
+    "eslint-config-zakodium": "^13.0.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "typescript": "^5.5.4"
+    "rimraf": "^6.0.1",
+    "typescript": "^5.6.3"
   },
   "dependencies": {
     "@types/d3-scale": "^4.0.8",
     "d3-scale": "^4.0.2",
     "use-resize-observer": "^9.1.0"
   },
   "volta": {
-    "node": "20.16.0"
+    "node": "22.9.0"
   }
 }

src/components/AlignGroup.tsx

@@ -1,6 +1,6 @@
-import { useMemo, ReactNode, CSSProperties } from 'react';
+import { type CSSProperties, type ReactNode, useMemo } from 'react';
 
-import { useBBoxObserver } from '../hooks/useBBoxObserver';
+import { useBBoxObserver } from '../hooks/useBBoxObserver.js';
 
 export type Align = 'start' | 'middle' | 'end' | 'none';
 

src/components/ResponsiveChart.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import useResizeObserver from 'use-resize-observer';
 
 export interface ResponsiveChartProps {
@@ -15,6 +15,7 @@ export function ResponsiveChart(props: ResponsiveChartProps) {
   const { width, height, minWidth, minHeight, maxWidth, maxHeight, children } =
     props;
 
+  // @ts-expect-error Default import is correct.
   const observed = useResizeObserver<HTMLDivElement>();
 
   return (

src/hooks/useBBoxObserver.ts

@@ -1,4 +1,4 @@
-import { RefCallback, useCallback, useRef, useState } from 'react';
+import { type RefCallback, useCallback, useRef, useState } from 'react';
 
 const initialSize = { x: 0, y: 0, width: 0, height: 0 };
 

src/hooks/useLinearPrimaryTicks.ts

@@ -1,7 +1,7 @@
 import type { ScaleContinuousNumeric } from 'd3-scale';
-import { MutableRefObject, useState } from 'react';
+import { type MutableRefObject, useState } from 'react';
 
-import { useTicks } from './useTick';
+import { useTicks } from './useTick.js';
 
 type Directions = 'horizontal' | 'vertical';
 
@@ -16,21 +16,14 @@ interface Options {
   minSpace?: number;
 }
 
-export function useLinearPrimaryTicks<
-  Scale extends ScaleContinuousNumeric<number, number>,
->(
-  scale: Scale,
+export function useLinearPrimaryTicks(
+  scale: ScaleContinuousNumeric<number, number>,
   direction: Directions,
   ref: MutableRefObject<SVGGElement | null>,
   options: Options = {},
 ): PrimaryLinearTicks[] {
   const [ticks, setTicks] = useState<PrimaryLinearTicks[]>([]);
   const { tickFormat = String } = options;
-  useTicks<number, ScaleContinuousNumeric<number, number>>(
-    scale,
-    direction,
-    ref,
-    { ...options, tickFormat, setTicks },
-  );
+  useTicks<number>(scale, direction, ref, { ...options, tickFormat, setTicks });
   return ticks;
 }

src/hooks/useLogTicks.ts

@@ -1,13 +1,13 @@
 import type { ScaleContinuousNumeric } from 'd3-scale';
 import {
-  MutableRefObject,
+  type MutableRefObject,
   useCallback,
   useEffect,
   useMemo,
   useState,
 } from 'react';
 
-import { textDimensions } from '../utils';
+import { textDimensions } from '../utils.js';
 
 type Directions = 'horizontal' | 'vertical';
 
@@ -25,13 +25,13 @@ interface Options {
 const TEST_HEIGHT = '+1234567890';
 
 function isMainTick(value: number): number {
-  const index = value / Math.pow(10, Math.round(Math.log10(value)));
+  const index = value / 10 ** Math.round(Math.log10(value));
   return Math.floor(index < 1 ? index * 10 : index);
 }
 
-function formatTicks<Scale extends ScaleContinuousNumeric<number, number>>(
+function formatTicks(
   ticks: number[],
-  scale: Scale,
+  scale: ScaleContinuousNumeric<number, number>,
   format: (d: number) => string,
   maxWordSpace: number,
   minSpace: number,
@@ -53,10 +53,8 @@ function formatTicks<Scale extends ScaleContinuousNumeric<number, number>>(
   });
 }
 
-export function useLogTicks<
-  Scale extends ScaleContinuousNumeric<number, number>,
->(
-  scale: Scale,
+export function useLogTicks(
+  scale: ScaleContinuousNumeric<number, number>,
   direction: Directions,
   ref: MutableRefObject<SVGGElement | null>,
   options: Options = {},

src/hooks/useTick.ts

@@ -1,7 +1,12 @@
 import type { ScaleContinuousNumeric, ScaleTime } from 'd3-scale';
-import { Dispatch, MutableRefObject, SetStateAction, useEffect } from 'react';
+import {
+  type Dispatch,
+  type MutableRefObject,
+  type SetStateAction,
+  useEffect,
+} from 'react';
 
-import { textDimensions } from '../utils';
+import { textDimensions } from '../utils.js';
 
 type Directions = 'horizontal' | 'vertical';
 
@@ -20,13 +25,8 @@ interface Options<T> {
 }
 const TEST_HEIGHT = '+1234567890';
 
-export function useTicks<
-  T extends number | Date,
-  Scale extends
-    | ScaleContinuousNumeric<number, number>
-    | ScaleTime<number, number>,
->(
-  scale: Scale,
+export function useTicks<T extends number | Date>(
+  scale: ScaleContinuousNumeric<number, number> | ScaleTime<number, number>,
   direction: Directions,
   ref: MutableRefObject<SVGGElement | null>,
   options: Options<T>,

src/hooks/useTimeTicks.ts

@@ -1,7 +1,7 @@
 import type { ScaleTime } from 'd3-scale';
-import { MutableRefObject, useState } from 'react';
+import { type MutableRefObject, useState } from 'react';
 
-import { useTicks } from './useTick';
+import { useTicks } from './useTick.js';
 
 type Directions = 'horizontal' | 'vertical';
 
@@ -16,15 +16,15 @@ interface Options {
   minSpace?: number;
 }
 
-export function useTimeTicks<Scale extends ScaleTime<number, number>>(
-  scale: Scale,
+export function useTimeTicks(
+  scale: ScaleTime<number, number>,
   direction: Directions,
   ref: MutableRefObject<SVGGElement | null>,
   options: Options,
 ): TimeTicks[] {
   const { tickFormat = scale.tickFormat() } = options;
   const [ticks, setTicks] = useState<TimeTicks[]>([]);
-  useTicks<Date, ScaleTime<number, number>>(scale, direction, ref, {
+  useTicks<Date>(scale, direction, ref, {
     ...options,
     setTicks,
     tickFormat,

src/index.ts

@@ -1,7 +1,7 @@
-export * from './components/AlignGroup';
-export * from './components/ResponsiveChart';
+export * from './components/AlignGroup.js';
+export * from './components/ResponsiveChart.js';
 
-export * from './hooks/useBBoxObserver';
-export * from './hooks/useLinearPrimaryTicks';
-export * from './hooks/useLogTicks';
-export * from './hooks/useTimeTicks';
+export * from './hooks/useBBoxObserver.js';
+export * from './hooks/useLinearPrimaryTicks.js';
+export * from './hooks/useLogTicks.js';
+export * from './hooks/useTimeTicks.js';

src/utils.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject } from 'react';
+import type { MutableRefObject } from 'react';
 
 export function textDimensions(
   word: string,

stories/components/AlignGroup.stories.tsx

@@ -1,7 +1,11 @@
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { useEffect, useState } from 'react';
 
-import { AlignGroup, AlignGroupProps, useBBoxObserver } from '../../src';
+import {
+  AlignGroup,
+  type AlignGroupProps,
+  useBBoxObserver,
+} from '../../src/index.js';
 
 const DEBUG_COLOR = 'yellow';
 

stories/components/ResponsiveChart.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/react';
-import { ReactNode, useEffect, useState } from 'react';
+import type { Meta } from '@storybook/react';
+import { type ReactNode, useEffect, useState } from 'react';
 
-import { ResponsiveChart, ResponsiveChartProps } from '../../src';
+import { ResponsiveChart, type ResponsiveChartProps } from '../../src/index.js';
 
 export default {
   title: 'components/ResponsiveChart',

stories/hooks/LinearPrimaryExamples.stories.tsx

@@ -1,7 +1,7 @@
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 import { useState } from 'react';
 
-import { HorizontalExample, VerticalExample } from './TestAxis';
+import { HorizontalExample, VerticalExample } from './TestAxis.js';
 
 export default {
   title: 'Hooks/static/useLinearPrimaryTicks',

stories/hooks/LinearPrimaryTicks.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
-import { AutomaticHorizontalAxis, AutomaticVerticalAxis } from './TestAxis';
+import { AutomaticHorizontalAxis, AutomaticVerticalAxis } from './TestAxis.js';
 
 interface Props {
   minSize: number;

stories/hooks/LogExamples.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
-import { HorizontalExample, VerticalExample } from './TestAxis';
+import { HorizontalExample, VerticalExample } from './TestAxis.js';
 
 export default {
   title: 'Hooks/static/useLogTicks',

stories/hooks/LogTicks.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
-import { AutomaticHorizontalAxis, AutomaticVerticalAxis } from './TestAxis';
+import { AutomaticHorizontalAxis, AutomaticVerticalAxis } from './TestAxis.js';
 
 interface Props {
   minSize: number;

stories/hooks/TestAxis.tsx

@@ -1,14 +1,18 @@
 import {
-  ScaleTime,
-  ScaleLinear,
+  type ScaleLinear,
   scaleLinear,
   scaleLog,
-  ScaleLogarithmic,
+  type ScaleLogarithmic,
+  type ScaleTime,
   scaleTime,
 } from 'd3-scale';
-import React, { forwardRef, useMemo, useRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
 
-import { useLinearPrimaryTicks, useLogTicks, useTimeTicks } from '../../src';
+import {
+  useLinearPrimaryTicks,
+  useLogTicks,
+  useTimeTicks,
+} from '../../src/index.js';
 
 interface BaseAxis {
   x: number;
@@ -338,7 +342,7 @@ export function HorizontalExample({
     }
   }, [domain, type]);
   useEffect(() => {
-    let state = [];
+    const state = [];
     for (let i = MIN; i <= MAX; i += 50) {
       const scale = scaleType(i);
       state.push({ scale, width: i });
@@ -385,7 +389,7 @@ export function VerticalExample({
     }
   }, [domain, type]);
   useEffect(() => {
-    let state = [];
+    const state = [];
     for (let i = MIN; i <= MAX; i += 50) {
       const scale = scaleType(i);
       state.push({ scale, height: i });

stories/hooks/TimeExamples.stories.tsx

@@ -1,6 +1,6 @@
-import { Meta } from '@storybook/react';
+import type { Meta } from '@storybook/react';
 
-import { HorizontalExample, VerticalExample } from './TestAxis';
+import { HorizontalExample, VerticalExample } from './TestAxis.js';
 
 export default {
   title: 'Hooks/static/useTimeTicks',