Add strict eslint config, fix tests and breakages

Author: armedx86

eslint.config.mjs

@@ -11,21 +11,22 @@ export default tseslint.config({
 
   extends: [
     eslintJs.configs.recommended,
-    tseslint.configs.recommended,
-    eslintReact.configs['recommended-typescript'],
+    tseslint.configs.strictTypeChecked,
+    eslintReact.configs['recommended-type-checked'],
     eslintPluginPrettierRecommended
   ],
 
   languageOptions: {
     parser: tseslint.parser,
     parserOptions: {
-      projectService: true,
-      tsconfigRootDir: import.meta.dirname
+      tsconfigRootDir: import.meta.dirname,
+      project: 'tsconfig.eslint.json'
     }
   },
 
   rules: {
-    '@eslint-react/no-missing-key': 'warn',
+    '@typescript-eslint/no-confusing-void-expression': 'off',
+    "@typescript-eslint/no-unnecessary-condition": 'off',
     'prettier/prettier': ['error', prettierrc]
   }
 })

jest.config.mjs

@@ -0,0 +1,13 @@
+// @ts-check
+import { createDefaultPreset } from 'ts-jest'
+
+/** @type {import("jest").Config} **/
+const config = {
+  ...createDefaultPreset({
+    tsconfig: 'tsconfig.test.json'
+  }),
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/test/jest.setup.js']
+}
+
+export default config

package.json

@@ -15,7 +15,11 @@
         "types": "./build/index.d.ts",
         "default": "./build/index.js"
       }
-    }
+    },
+    "./style.css": "./build/style.css",
+    "./style.scss": "./src/style.scss",
+    "./build/style.css": "./build/style.css",
+    "./src/style.scss": "./src/style.scss"
   },
   "author": "Hernán Sartorio",
   "license": "MIT",
@@ -29,8 +33,7 @@
   "homepage": "https://github.com/hernansartorio/react-nice-dates#readme",
   "files": [
     "build",
-    "src/style.scss",
-    "index.d.ts"
+    "src/style.scss"
   ],
   "scripts": {
     "start": "parcel website/index.html -d tmp",
@@ -39,7 +42,7 @@
     "build:website": "rm -rf build-website/* && parcel build website/index.html -d build-website --experimental-scope-hoisting --no-content-hash && cp website/CNAME build-website/CNAME",
     "deploy": "gh-pages -d build-website",
     "dev:package": "tsup src/index.ts --watch",
-    "lint": "eslint --cache src",
+    "lint": "eslint src test --ext .ts,.tsx",
     "release": "yarn run build && np",
     "test": "jest",
     "test:watch": "jest --watch"
@@ -57,15 +60,17 @@
     "@eslint/js": "^9.30.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^30.0.0",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^9.7.3",
     "date-fns": "^2.9.0",
     "eslint": "^9.30.0",
     "eslint-config-prettier": "^10.1.5",
     "eslint-plugin-prettier": "^5.5.1",
-    "jest": "^24.9.0",
+    "jest": "^30.0.3",
+    "jest-environment-jsdom": "^30.0.2",
     "parcel-bundler": "^1.12.4",
     "parcel-plugin-prerender": "^1.4.1",
     "postcss-cli": "^7.1.0",
@@ -75,6 +80,7 @@
     "react-dom": "^18",
     "react-test-renderer": "^18.3.1",
     "sass": "^1.25.0",
+    "ts-jest": "^29.4.0",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.35.0"

src/CalendarDay.tsx

@@ -1,5 +1,5 @@
 import React, { MouseEvent, TouchEvent } from 'react'
-import { getDate, format, isToday } from 'date-fns'
+import { getDate, format, isToday, Locale } from 'date-fns'
 import classNames from 'classnames'
 
 const defaultModifiersClassNames = {
@@ -16,7 +16,7 @@ const defaultModifiersClassNames = {
 export interface CalendarDayProps {
   date: Date
   height: number
-  locale: object
+  locale: Locale
   modifiers?: Record<string, boolean>
   modifiersClassNames?: Record<string, string>
   onClick?: (date: Date) => void
@@ -36,7 +36,6 @@ export function CalendarDay({
   onHover = defaultEventHandler
 }: CalendarDayProps): React.JSX.Element {
   const dayOfMonth = getDate(date)
-  const dayClassNames: Record<string, boolean> = {}
   const modifiers: Record<string, boolean> = {
     today: isToday(date),
     ...receivedModifiers
@@ -46,22 +45,20 @@ export function CalendarDay({
     ...receivedModifiersClassNames
   }
 
-  Object.keys(modifiers).forEach(name => {
-    dayClassNames[modifiersClassNames[name]] = modifiers[name]
-  })
+  const dayClassNames = Object.fromEntries(
+    Object.entries(modifiers).map(([name, modifier]) => [
+      modifiersClassNames[name] as string,
+      modifier
+    ])
+  )
 
   const handleClick = (event: MouseEvent | TouchEvent) => {
     onClick(date)
     event.preventDefault()
   }
 
-  const handleMouseEnter = () => {
-    onHover(date)
-  }
-
-  const handleMouseLeave = () => {
-    onHover(null)
-  }
+  const handleMouseEnter = () => onHover(date)
+  const handleMouseLeave = () => onHover(null)
 
   return (
     <span

src/CalendarGrid.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { eachDayOfInterval, isSameMonth, lightFormat, startOfMonth } from 'date-fns'
+import { eachDayOfInterval, isSameMonth, lightFormat, startOfMonth, Locale } from 'date-fns'
 import classNames from 'classnames'
 import { useGrid } from './useGrid'
 import { ORIGIN_BOTTOM, ORIGIN_TOP } from './constants'
@@ -93,8 +93,8 @@ export function CalendarGrid({
         })}
         ref={containerElementRef}
         style={{
-          transform: `translate3d(0, ${offset}px, 0)`,
-          transitionDuration: `${transitionDuration}ms`
+          transform: `translate3d(0, ${String(offset)}px, 0)`,
+          transitionDuration: `${String(transitionDuration)}ms`
         }}
       >
         {days}

src/DateRangePickerCalendar.tsx

@@ -51,19 +51,38 @@ export function DateRangePickerCalendar({
   const displayedStartDate =
     focus === START_DATE && !startDate && endDate && hoveredDate && !isSameDay(hoveredDate, endDate)
       ? hoveredDate
-      : startOfDay(new Date())
+      : startDate
+        ? startOfDay(startDate)
+        : null
 
   const displayedEndDate =
     focus === END_DATE && !endDate && startDate && hoveredDate && !isSameDay(hoveredDate, startDate)
       ? hoveredDate
-      : startOfDay(new Date())
+      : endDate
+        ? startOfDay(endDate)
+        : null
 
   const isStartDate = (date: Date) =>
-    isSameDay(date, displayedStartDate) && isBefore(date, displayedEndDate)
+    Boolean(
+      displayedStartDate &&
+        displayedEndDate &&
+        isSameDay(date, displayedStartDate) &&
+        isBefore(date, displayedEndDate)
+    )
   const isMiddleDate = (date: Date) =>
-    isAfter(date, displayedStartDate) && isBefore(date, displayedEndDate)
+    Boolean(
+      displayedStartDate &&
+        displayedEndDate &&
+        isAfter(date, displayedStartDate) &&
+        isBefore(date, displayedEndDate)
+    )
   const isEndDate = (date: Date) =>
-    isSameDay(date, displayedEndDate) && isAfter(date, displayedStartDate)
+    Boolean(
+      displayedStartDate &&
+        displayedEndDate &&
+        isSameDay(date, displayedEndDate) &&
+        isAfter(date, displayedStartDate)
+    )
 
   const modifiers = mergeModifiers(
     {

src/types.ts

@@ -15,7 +15,9 @@ export interface InputProps {
 export type DefaultModifiers = 'disabled' | 'selected' | 'today'
 export type ModifierMatcher = (date: Date) => boolean
 
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 export type Modifiers = { [key in DefaultModifiers | string]: ModifierMatcher }
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
 export type ModifiersClassNames = { [key in DefaultModifiers | string]: string }
 
 export interface CommonProps {

src/useDateInput.ts

@@ -30,7 +30,8 @@ export function useDateInput({
   onDateChange,
   validate
 }: UseDateInputProps): UseDateInputReturn {
-  const formatString = receivedFormatString || locale.formatLong?.date({ width: 'short' })
+  const formatString =
+    receivedFormatString || (locale.formatLong?.date({ width: 'short' }) as string)
 
   const formatDate = (date: Date) => format(date, formatString, { locale })
   const parseDate = (dateString: string) =>

src/useGrid.ts

@@ -201,16 +201,22 @@ export function useGrid<TRef extends HTMLElement = HTMLElement>({
           })
         }
 
-        containerElement.style.transform = `translate3d(0, ${
+        if (!event.touches[0]) {
+          return
+        }
+        containerElement.style.transform = `translate3d(0, ${String(
           computedOffset || -currentMonthPosition
-        }px, 0)`
+        )}px, 0)`
         containerElement.classList.remove('-transition')
         containerElement.classList.add('-moving')
         initialDragPositionRef.current =
           event.touches[0].clientY + (-computedOffset || currentMonthPosition)
       }
 
       const handleDrag = (event: TouchEvent) => {
+        if (!event.touches[0]) {
+          return
+        }
         const initialDragPosition = initialDragPositionRef.current
         const dragOffset = event.touches[0].clientY - initialDragPosition
         const previousMonth = subMonths(currentMonth, 1)
@@ -250,14 +256,14 @@ export function useGrid<TRef extends HTMLElement = HTMLElement>({
           onMonthChange(previousMonth)
         }
 
-        containerElement.style.transform = `translate3d(0, ${dragOffset}px, 0)`
+        containerElement.style.transform = `translate3d(0, ${String(dragOffset)}px, 0)`
         event.preventDefault()
       }
 
       const handleDragEnd = (event: TouchEvent) => {
         const currentMonthPosition =
           (rowsBetweenDates(startDate, currentMonth, locale) - 1) * cellHeight
-        containerElement.style.transform = `translate3d(0, ${-currentMonthPosition}px, 0)`
+        containerElement.style.transform = `translate3d(0, ${String(-currentMonthPosition)}px, 0)`
         containerElement.classList.add('-transition')
         containerElement.classList.remove('-moving')
 
@@ -269,6 +275,7 @@ export function useGrid<TRef extends HTMLElement = HTMLElement>({
         }, transitionDuration)
 
         if (
+          event.changedTouches[0] &&
           Math.abs(
             initialDragPositionRef.current - currentMonthPosition - event.changedTouches[0].clientY
           ) > 10

src/useOutsideClickHandler.ts

@@ -10,13 +10,17 @@ export function useOutsideClickHandler<
   const refC = useRef<TRefC>(null)
   const callbackRef = useRef(callback)
 
+  useEffect(() => {
+    callbackRef.current = callback
+  }, [callback])
+
   useEffect(() => {
     const handleOutsideClick = (event: MouseEvent) => {
       const target = event.target as Node | null
       if (
-        (!refA.current || (refA.current.contains && !refA.current.contains(target))) &&
-        (!refB.current || (refB.current.contains && !refB.current.contains(target))) &&
-        (!refC.current || (refC.current.contains && !refC.current.contains(target)))
+        (!refA.current || ('contains' in refA.current && !refA.current.contains(target))) &&
+        (!refB.current || ('contains' in refB.current && !refB.current.contains(target))) &&
+        (!refC.current || ('contains' in refC.current && !refC.current.contains(target)))
       ) {
         callbackRef.current()
       }