build: flat components directory (#2093)

jest.config.ts

@@ -4,11 +4,7 @@ const config: Config.InitialOptions = {
   preset: "ts-jest",
   roots: ["./src"],
   moduleNameMapper: {
-    "^test/(.*)": ["<rootDir>/test/$1"],
-    "^components(.*)": ["<rootDir>/src/components$1"],
-    "^contexts(.*)": ["<rootDir>/src/contexts$1"],
-    "^hooks(.*)": ["<rootDir>/src/hooks$1"],
-    "^types(.*)": ["<rootDir>/src/types$1"]
+    "@/test/(.*)": ["<rootDir>/test/$1"]
   },
   testEnvironment: "jsdom",
   coverageReporters: ["lcov", "text", "clover"],

react-day-picker.code-workspace

@@ -134,6 +134,8 @@
     ],
     "jest.disabledWorkspaceFolders": ["repository"],
     "npm.packageManager": "pnpm",
-    "task.allowAutomaticTasks": "on"
+    "task.allowAutomaticTasks": "on",
+    "typescript.updateImportsOnFileMove.enabled": "always",
+    "javascript.updateImportsOnFileMove.enabled": "always"
   }
 }

src/components/Button/Button.test.tsx → src/components/Button.test.tsx

@@ -1,8 +1,7 @@
 import { screen } from "@testing-library/react";
 
-import { customRender } from "../../../test/render";
-
 import { Button } from "./Button";
+import { customRender } from "@/test/render";
 
 let button: HTMLButtonElement;
 

src/components/Button/Button.tsx → src/components/Button.tsx

@@ -1,6 +1,5 @@
 import { forwardRef } from "react";
-
-import { useDayPicker } from "../../contexts/DayPicker";
+import { useDayPicker } from "../contexts/DayPicker";
 
 /** The props for the {@link Button} component. */
 export type ButtonProps = JSX.IntrinsicElements["button"];

src/components/Caption/Caption.test.tsx → src/components/Caption.test.tsx

@@ -1,7 +1,7 @@
 import { screen } from "@testing-library/react";
-import { DayPickerProps } from "../../DayPicker";
+import { DayPickerProps } from "../DayPicker";
 
-import { customRender } from "../../../test/render";
+import { customRender } from "@/test/render";
 import {
   getMonthCaption,
   getMonthDropdown,
@@ -10,10 +10,10 @@ import {
   getYearDropdown,
   queryNextButton,
   queryPrevButton
-} from "../../../test/selectors";
-import { freezeBeforeAll } from "../../../test/utils";
+} from "@/test/selectors";
+import { freezeBeforeAll } from "@/test/utils";
 
-import { CustomComponents } from "../../types/DayPickerBase";
+import { CustomComponents } from "../types/DayPickerBase";
 
 import { Caption, CaptionProps } from "./Caption";
 

src/components/Caption/Caption.tsx → src/components/Caption.tsx

@@ -1,7 +1,7 @@
-import { CaptionDropdowns } from "../../components/CaptionDropdowns";
-import { CaptionLabel } from "../../components/CaptionLabel";
-import { CaptionNavigation } from "../../components/CaptionNavigation";
-import { useDayPicker } from "../../contexts/DayPicker";
+import { CaptionDropdowns } from "./CaptionDropdowns";
+import { CaptionLabel } from "./CaptionLabel";
+import { CaptionNavigation } from "./CaptionNavigation";
+import { useDayPicker } from "../contexts/DayPicker";
 
 /** Represent the props of the {@link Caption} component. */
 export interface CaptionProps {

src/components/CaptionDropdowns/CaptionDropdowns.test.tsx → src/components/CaptionDropdowns.test.tsx

@@ -1,19 +1,19 @@
 import { screen } from "@testing-library/react";
 import { setMonth, setYear } from "date-fns";
-import { DayPickerProps } from "../../DayPicker";
+import { DayPickerProps } from "../DayPicker";
 
-import { customRender } from "../../../test/render";
+import { customRender } from "@/test/render";
 import {
   getMonthDropdown,
   getYearDropdown,
   queryMonthDropdown,
   queryYearDropdown
-} from "../../../test/selectors";
-import { user } from "../../../test/user";
-import { freezeBeforeAll } from "../../../test/utils";
+} from "@/test/selectors";
+import { user } from "@/test/user";
+import { freezeBeforeAll } from "@/test/utils";
 
-import { CaptionProps } from "../../components/Caption";
-import { CustomComponents } from "../../types/DayPickerBase";
+import { CaptionProps } from "./Caption";
+import { CustomComponents } from "../types/DayPickerBase";
 
 import { CaptionDropdowns } from "./CaptionDropdowns";
 

src/components/CaptionDropdowns/CaptionDropdowns.tsx → src/components/CaptionDropdowns.tsx

@@ -1,12 +1,12 @@
 import { addMonths } from "date-fns";
 
-import { CaptionProps } from "../../components/Caption/Caption";
-import { CaptionLabel } from "../../components/CaptionLabel";
-import { MonthsDropdown } from "../../components/MonthsDropdown";
-import { YearsDropdown } from "../../components/YearsDropdown";
-import { useDayPicker } from "../../contexts/DayPicker";
-import { useNavigation } from "../../contexts/Navigation";
-import { MonthChangeEventHandler } from "../../types/EventHandlers";
+import { CaptionLabel } from "./CaptionLabel";
+import { MonthsDropdown } from "./MonthsDropdown";
+import { YearsDropdown } from "./YearsDropdown";
+import { useDayPicker } from "../contexts/DayPicker";
+import { useNavigation } from "../contexts/Navigation";
+import { MonthChangeEventHandler } from "../types/EventHandlers";
+import { CaptionProps } from "./Caption";
 
 /** Render a caption with the dropdowns to navigate between months and years. */
 export function CaptionDropdowns(props: CaptionProps): JSX.Element {

src/components/CaptionLabel/CaptionLabel.test.tsx → src/components/CaptionLabel.test.tsx

@@ -1,6 +1,6 @@
-import { customRender } from "../../../test/render";
-import { getMonthCaption } from "../../../test/selectors";
-import { freezeBeforeAll } from "../../../test/utils";
+import { customRender } from "@/test/render";
+import { getMonthCaption } from "@/test/selectors";
+import { freezeBeforeAll } from "@/test/utils";
 
 import { CaptionLabel } from "./CaptionLabel";
 

src/components/CaptionLabel/CaptionLabel.tsx → src/components/CaptionLabel.tsx

@@ -1,4 +1,4 @@
-import { useDayPicker } from "../../contexts/DayPicker";
+import { useDayPicker } from "../contexts/DayPicker";
 
 /** The props for the {@link CaptionLabel} component. */
 export interface CaptionLabelProps {

src/components/CaptionNavigation/CaptionNavigation.test.tsx → src/components/CaptionNavigation.test.tsx

@@ -1,15 +1,15 @@
 import { addMonths } from "date-fns";
-import { DayPickerProps } from "../../DayPicker";
+import { DayPickerProps } from "../DayPicker";
 
-import { customRender } from "../../../test/render";
+import { customRender } from "@/test/render";
 import {
   getNextButton,
   getPrevButton,
   queryNextButton,
   queryPrevButton
-} from "../../../test/selectors";
-import { user } from "../../../test/user";
-import { freezeBeforeAll } from "../../../test/utils";
+} from "@/test/selectors";
+import { user } from "@/test/user";
+import { freezeBeforeAll } from "@/test/utils";
 
 import { CaptionNavigation } from "./CaptionNavigation";
 

src/components/CaptionNavigation/CaptionNavigation.tsx → src/components/CaptionNavigation.tsx

@@ -2,10 +2,10 @@ import { MouseEventHandler } from "react";
 
 import { isSameMonth } from "date-fns";
 
-import { CaptionProps } from "../../components/Caption/Caption";
-import { Navigation } from "../../components/Navigation";
-import { useDayPicker } from "../../contexts/DayPicker";
-import { useNavigation } from "../../contexts/Navigation";
+import { CaptionProps } from "./Caption";
+import { Navigation } from "./Navigation";
+import { useDayPicker } from "../contexts/DayPicker";
+import { useNavigation } from "../contexts/Navigation";
 
 /** Render a caption with a button-based navigation. */
 export function CaptionNavigation(props: CaptionProps): JSX.Element {

src/components/Day/Day.test.tsx → src/components/Day.test.tsx

@@ -1,10 +1,10 @@
 import { screen } from "@testing-library/react";
-import { DayPickerProps } from "../../DayPicker";
+import { DayPickerProps } from "../DayPicker";
 
-import { customRender } from "../../../test/render";
-import { freezeBeforeAll } from "../../../test/utils";
+import { customRender } from "@/test/render";
+import { freezeBeforeAll } from "@/test/utils";
 
-import { CustomComponents } from "../../types/DayPickerBase";
+import { CustomComponents } from "../types/DayPickerBase";
 
 import { Day, DayProps } from "./Day";
 

src/components/Day/Day.tsx → src/components/Day.tsx

@@ -1,8 +1,8 @@
 import { useRef } from "react";
 
-import { useDayRender } from "../../hooks/useDayRender";
+import { useDayRender } from "../hooks/useDayRender";
 
-import { Button } from "../Button";
+import { Button } from "./Button";
 
 /** Represent the props used by the {@link Day} component. */
 export interface DayProps {

src/components/DayContent/DayContent.test.tsx → src/components/DayContent.test.tsx

@@ -1,10 +1,10 @@
 import { es } from "date-fns/locale";
-import { DayPickerProps } from "../../DayPicker";
+import { DayPickerProps } from "../DayPicker";
 
-import { customRender } from "../../../test/render";
-import { freezeBeforeAll } from "../../../test/utils";
+import { customRender } from "@/test/render";
+import { freezeBeforeAll } from "@/test/utils";
 
-import { DayContent, DayContentProps } from "../../components/DayContent";
+import { DayContent, DayContentProps } from "./DayContent";
 
 const today = new Date(2021, 8);
 

src/components/DayContent/DayContent.tsx → src/components/DayContent.tsx

@@ -1,5 +1,5 @@
-import { useDayPicker } from "../../contexts/DayPicker";
-import { ActiveModifiers } from "../../types/Modifiers";
+import { useDayPicker } from "../contexts/DayPicker";
+import { ActiveModifiers } from "../types/Modifiers";
 
 /** Represent the props for the {@link DayContent} component. */
 export interface DayContentProps {

src/components/Dropdown/Dropdown.test.tsx → src/components/Dropdown.test.tsx

@@ -1,12 +1,12 @@
 import { fireEvent, screen } from "@testing-library/react";
-import { DayPickerProps } from "../../DayPicker";
+import { DayPickerProps } from "../DayPicker";
 
-import { customRender } from "../../../test/render";
-import { freezeBeforeAll } from "../../../test/utils";
+import { customRender } from "@/test/render";
+import { freezeBeforeAll } from "@/test/utils";
 
-import { Dropdown, DropdownProps } from "../../components/Dropdown";
-import { defaultClassNames } from "../../contexts/DayPicker/defaultClassNames";
-import { CustomComponents } from "../../types/DayPickerBase";
+import { Dropdown, DropdownProps } from "./Dropdown";
+import { defaultClassNames } from "../contexts/DayPicker/defaultClassNames";
+import { CustomComponents } from "../types/DayPickerBase";
 
 const today = new Date(2021, 8);
 

src/components/Dropdown/Dropdown.tsx → src/components/Dropdown.tsx

@@ -5,8 +5,8 @@ import {
   SelectHTMLAttributes
 } from "react";
 
-import { IconDropdown } from "../../components/IconDropdown";
-import { useDayPicker } from "../../contexts/DayPicker";
+import { IconDropdown } from "./IconDropdown";
+import { useDayPicker } from "../contexts/DayPicker";
 
 /** The props for the {@link Dropdown} component. */
 export interface DropdownProps {

src/components/Footer/Footer.test.tsx → src/components/Footer.test.tsx

@@ -1,5 +1,5 @@
-import { customRender } from "../../../test/render";
-import { getTableFooter, queryTableFooter } from "../../../test/selectors";
+import { customRender } from "@/test/render";
+import { getTableFooter, queryTableFooter } from "@/test/selectors";
 
 import { Footer } from "./Footer";
 

src/components/Footer/Footer.tsx → src/components/Footer.tsx

@@ -1,4 +1,4 @@
-import { useDayPicker } from "../../contexts/DayPicker";
+import { useDayPicker } from "../contexts/DayPicker";
 
 export interface FooterProps {
   /** The month where the footer is displayed. */

src/components/Head/Head.test.tsx → src/components/Head.test.tsx

@@ -1,7 +1,7 @@
 import { RenderResult, screen } from "@testing-library/react";
-import { DayPickerProps } from "../../DayPicker";
+import { DayPickerProps } from "../DayPicker";
 
-import { customRender } from "../../../test/render";
+import { customRender } from "@/test/render";
 
 import { Head } from "./Head";
 

src/components/Head/Head.tsx → src/components/Head.tsx

@@ -1,5 +1,5 @@
-import { HeadRow } from "../../components/HeadRow";
-import { useDayPicker } from "../../contexts/DayPicker";
+import { HeadRow } from "./HeadRow";
+import { useDayPicker } from "../contexts/DayPicker";
 
 /** Render the table head. */
 export function Head(): JSX.Element {

src/components/HeadRow/HeadRow.test.tsx → src/components/HeadRow.test.tsx

@@ -1,9 +1,8 @@
 import { RenderResult } from "@testing-library/react";
-import { DayPickerProps } from "../../DayPicker";
-
-import { customRender } from "../../../test/render";
+import { DayPickerProps } from "../DayPicker";
 
 import { HeadRow } from "./HeadRow";
+import { customRender } from "@/test/render";
 
 let container: HTMLElement;
 let view: RenderResult;

src/components/HeadRow/HeadRow.tsx → src/components/HeadRow.tsx

@@ -1,6 +1,6 @@
-import { useDayPicker } from "../../contexts/DayPicker";
+import { useDayPicker } from "../contexts/DayPicker";
 
-import { getWeekdays } from "./utils";
+import { getWeekdays } from "./utils/getWeekdays";
 
 /**
  * Render the HeadRow component - i.e. the table head row with the weekday

src/components/IconDropdown/IconDropdown.test.tsx → src/components/IconDropdown.test.tsx

@@ -1,4 +1,4 @@
-import { customRender } from "../../../test/render";
+import { customRender } from "@/test/render";
 
 import { IconDropdown } from "./IconDropdown";
 

src/components/IconDropdown/IconDropdown.tsx → src/components/IconDropdown.tsx

@@ -1,4 +1,4 @@
-import { StyledComponent } from "../../types/Styles";
+import { StyledComponent } from "../types/Styles";
 
 /** Render the icon in the styled drop-down. */
 export function IconDropdown(props: StyledComponent): JSX.Element {

src/components/IconLeft/IconLeft.test.tsx → src/components/IconLeft.test.tsx

@@ -1,5 +1,4 @@
-import { customRender } from "../../../test/render";
-
+import { customRender } from "@/test/render";
 import { IconLeft } from "./IconLeft";
 
 let root: HTMLElement;

src/components/IconLeft/IconLeft.tsx → src/components/IconLeft.tsx

@@ -1,4 +1,4 @@
-import { StyledComponent } from "../../types/Styles";
+import { StyledComponent } from "../types/Styles";
 
 /** Render the "previous month" button in the navigation. */
 export function IconLeft(props: StyledComponent): JSX.Element {

src/components/IconRight/IconRight.test.tsx → src/components/IconRight.test.tsx

@@ -1,4 +1,4 @@
-import { customRender } from "../../../test/render";
+import { customRender } from "@/test/render";
 
 import { IconRight } from "./IconRight";
 

src/components/IconRight/IconRight.tsx → src/components/IconRight.tsx

@@ -1,4 +1,4 @@
-import { StyledComponent } from "../../types/Styles";
+import { StyledComponent } from "../types/Styles";
 
 /** Render the "next month" button in the navigation. */
 export function IconRight(props: StyledComponent): JSX.Element {

src/components/Month/Month.test.tsx → src/components/Month.test.tsx

@@ -1,12 +1,11 @@
 import { screen } from "@testing-library/react";
-import { DayPickerProps } from "../../DayPicker";
+import { DayPickerProps } from "../DayPicker";
 
-import { customRender } from "../../../test/render";
-import { getMonthCaption, getMonthGrid } from "../../../test/selectors";
-
-import { CustomComponents } from "../../types/DayPickerBase";
+import { customRender } from "@/test/render";
+import { getMonthCaption, getMonthGrid } from "@/test/selectors";
 
 import { Month, MonthProps } from "./Month";
+import { CustomComponents } from "../types/DayPickerBase";
 
 let root: HTMLDivElement;