build: add eslint settings for required extensions (#2238)

See also #2230

.eslintrc.cjs

@@ -13,24 +13,16 @@ const config = {
     "plugin:@typescript-eslint/recommended",
     "plugin:react-hooks/recommended",
     "prettier",
-    "plugin:prettier/recommended",
-    "plugin:import/recommended",
-    "plugin:import/typescript"
+    "plugin:prettier/recommended"
   ],
   settings: {
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
-    },
     react: {
       version: "detect" // React version. "detect" automatically picks the version you have installed.
     }
   },
   rules: {
-    "react/prop-types": "off",
     "react/jsx-uses-react": "off",
-    "react/react-in-jsx-scope": "off",
-    "import/no-unresolved": "off",
-    "import/namespace": "off",
+    "react/prop-types": "off",
     "prettier/prettier": "warn",
     "no-console": "warn",
     "@typescript-eslint/no-unused-vars": "off",

package.json

@@ -139,6 +139,7 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react": "^7.34.2",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-require-extensions": "^0.1.3",
     "eslint-plugin-testing-library": "^6.2.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",

src/.eslintrc.cjs

@@ -0,0 +1,27 @@
+/* eslint-env node */
+// @ts-check
+
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  plugins: ["require-extensions"],
+  extends: ["../.eslintrc.cjs", "plugin:require-extensions/recommended"],
+  overrides: [
+    {
+      files: ["**/?(*.)+(spec|test).[jt]s?(x)"],
+      env: {
+        jest: true
+      },
+      extends: ["plugin:jest/recommended", "plugin:testing-library/react"],
+      rules: {
+        "testing-library/no-render-in-setup": "off",
+        "testing-library/no-node-access": "off",
+        "testing-library/render-result-naming-convention": "off",
+        "testing-library/no-render-in-lifecycle": "off",
+        "require-extensions/require-index": "off",
+        "require-extensions/require-extensions": "off"
+      }
+    }
+  ]
+};
+
+module.exports = config;

src/contexts/providers.tsx

@@ -11,7 +11,7 @@ import type {
   PropsMulti,
   PropsRange,
   PropsSingle
-} from "../types";
+} from "../types/index.js";
 
 import { CalendarContextProvider } from "./useCalendar.js";
 import { FocusContextProvider } from "./useFocus.js";

src/contexts/useModifiers.tsx

@@ -10,7 +10,7 @@ import type {
   DayFlags,
   Modifiers,
   SelectionStates
-} from "../types";
+} from "../types/index.js";
 import { dateMatchModifiers } from "../utils/dateMatchModifiers.js";
 import { isDateInRange } from "../utils/index.js";
 

src/contexts/useProps.tsx

@@ -16,7 +16,7 @@ import type {
   Mode,
   DayPickerProps,
   DateLib
-} from "../types";
+} from "../types/index.js";
 
 const PropsContext = React.createContext<PropsContextValue | undefined>(
   undefined

src/types/props.ts

@@ -18,7 +18,7 @@ import type {
   DateRange,
   Mode,
   DateLib
-} from "./shared";
+} from "./shared.js";
 
 /**
  * The props for the `<DayPicker />` component.

src/types/shared.ts

@@ -8,7 +8,7 @@ import {
   ChevronFlag,
   WeekNumberFlag,
   SelectionState
-} from "../UI";
+} from "../UI.js";
 import * as components from "../components/custom-components.js";
 import {
   formatCaption,
@@ -19,7 +19,7 @@ import {
   formatWeekNumber,
   formatYearCaption,
   formatYearDropdown
-} from "../formatters";
+} from "../formatters/index.js";
 import {
   labelDay,
   labelCaption,
@@ -30,7 +30,7 @@ import {
   labelWeekNumber,
   labelWeekNumberHeader,
   labelYearDropdown
-} from "../labels";
+} from "../labels/index.js";
 import { dateLib } from "../lib/index.js";
 
 /**

src/utils/typeguards.ts

@@ -8,7 +8,7 @@ import type {
   PropsMulti,
   PropsRange,
   PropsSingle
-} from "../types";
+} from "../types/index.js";
 
 /**
  * Returns true if `matcher` is of type `DateInterval`.

website/.eslintrc.cjs

@@ -0,0 +1,11 @@
+/* eslint-env node */
+// @ts-check
+
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  rules: {
+    "react/react-in-jsx-scope": "off"
+  }
+};
+
+module.exports = config;

website/examples-v8/react-day-picker-v8.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable import/export */
 import {
   DayPicker as DayPickerV8,
   type DayPickerProps