From e8f6852d8217edcdc0591376f3fdc4fbeead69fc Mon Sep 17 00:00:00 2001 From: Wojciech Maj Date: Thu, 13 Jul 2023 10:41:47 +0200 Subject: [PATCH] Add native ESM support --- package.json | 21 +++++++++++++++------ src/Calendar.spec.tsx | 4 ++-- src/Calendar.tsx | 20 ++++++++++---------- src/Calendar/Navigation.spec.tsx | 2 +- src/Calendar/Navigation.tsx | 6 +++--- src/CenturyView.spec.tsx | 2 +- src/CenturyView.tsx | 4 ++-- src/CenturyView/Decade.spec.tsx | 2 +- src/CenturyView/Decade.tsx | 6 +++--- src/CenturyView/Decades.tsx | 6 +++--- src/DecadeView.spec.tsx | 2 +- src/DecadeView.tsx | 4 ++-- src/DecadeView/Year.spec.tsx | 2 +- src/DecadeView/Year.tsx | 4 ++-- src/DecadeView/Years.tsx | 6 +++--- src/Flex.spec.tsx | 2 +- src/MonthView.spec.tsx | 4 ++-- src/MonthView.tsx | 12 ++++++------ src/MonthView/Day.spec.tsx | 2 +- src/MonthView/Day.tsx | 10 +++++----- src/MonthView/Days.tsx | 10 +++++----- src/MonthView/WeekNumber.spec.tsx | 2 +- src/MonthView/WeekNumber.tsx | 2 +- src/MonthView/WeekNumbers.spec.tsx | 2 +- src/MonthView/WeekNumbers.tsx | 14 +++++++++----- src/MonthView/Weekdays.spec.tsx | 2 +- src/MonthView/Weekdays.tsx | 10 +++++----- src/Tile.spec.tsx | 2 +- src/Tile.tsx | 2 +- src/TileGroup.tsx | 6 +++--- src/YearView.spec.tsx | 2 +- src/YearView.tsx | 4 ++-- src/YearView/Month.spec.tsx | 2 +- src/YearView/Month.tsx | 4 ++-- src/YearView/Months.tsx | 4 ++-- src/index.ts | 16 ++++++++-------- src/shared/dateFormatter.spec.ts | 2 +- src/shared/dates.spec.ts | 2 +- src/shared/dates.ts | 6 +++--- src/shared/propTypes.ts | 4 ++-- src/shared/types.ts | 2 +- src/shared/utils.spec.ts | 4 ++-- src/shared/utils.ts | 6 +++--- test/MaxDetailOptions.tsx | 2 +- test/MinDetailOptions.tsx | 2 +- test/Test.tsx | 20 ++++++++++---------- test/ValueOptions.tsx | 2 +- test/index.tsx | 2 +- 48 files changed, 136 insertions(+), 123 deletions(-) diff --git a/package.json b/package.json index 73ff8d29..c975d30b 100644 --- a/package.json +++ b/package.json @@ -2,18 +2,27 @@ "name": "react-calendar", "version": "4.5.0", "description": "Ultimate calendar for your React app.", - "main": "dist/cjs/index.js", - "module": "dist/esm/index.js", - "source": "src/index.ts", - "types": "dist/cjs/index.d.ts", + "type": "module", "sideEffects": [ "*.css" ], + "main": "./dist/cjs/index.js", + "module": "./dist/esm/index.js", + "source": "./src/index.ts", + "types": "./dist/cjs/index.d.ts", + "exports": { + ".": { + "import": "./dist/esm/index.js", + "require": "./dist/cjs/index.js" + }, + "./dist/Calendar.css": "./dist/Calendar.css" + }, "scripts": { "build": "yarn build-js && yarn copy-styles", - "build-js": "yarn build-js-esm && yarn build-js-cjs", + "build-js": "yarn build-js-esm && yarn build-js-cjs && yarn build-js-cjs-package", "build-js-esm": "tsc --project tsconfig.build.json --outDir dist/esm --module esnext", "build-js-cjs": "tsc --project tsconfig.build.json --outDir dist/cjs --module commonjs", + "build-js-cjs-package": "echo '{\n \"type\": \"commonjs\"\n}' > dist/cjs/package.json", "clean": "rimraf dist", "copy-styles": "cpy 'src/**/*.css' dist", "lint": "eslint . --ext .js,.jsx,.ts,.tsx", @@ -23,7 +32,7 @@ "test": "yarn lint && yarn tsc && yarn prettier && yarn unit", "tsc": "tsc --noEmit", "unit": "vitest", - "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & nodemon --watch src --ext css --exec \"yarn copy-styles\"" + "watch": "yarn build-js-esm --watch & yarn build-js-cjs --watch & yarn build-js-cjs-package & nodemon --watch src --ext css --exec \"yarn copy-styles\"" }, "keywords": [ "calendar", diff --git a/src/Calendar.spec.tsx b/src/Calendar.spec.tsx index d878407f..8127b979 100644 --- a/src/Calendar.spec.tsx +++ b/src/Calendar.spec.tsx @@ -3,9 +3,9 @@ import React, { createRef } from 'react'; import { act, render } from '@testing-library/react'; import { getMonthStart } from '@wojtekmaj/date-utils'; -import Calendar from './Calendar'; +import Calendar from './Calendar.js'; -import type { Action, Value, View } from './shared/types'; +import type { Action, Value, View } from './shared/types.js'; type CalendarImperativeHandle = { activeStartDate: Date; diff --git a/src/Calendar.tsx b/src/Calendar.tsx index d881ed44..ffdd6227 100644 --- a/src/Calendar.tsx +++ b/src/Calendar.tsx @@ -4,13 +4,13 @@ import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'r import PropTypes from 'prop-types'; import clsx from 'clsx'; -import Navigation from './Calendar/Navigation'; -import CenturyView from './CenturyView'; -import DecadeView from './DecadeView'; -import YearView from './YearView'; -import MonthView from './MonthView'; +import Navigation from './Calendar/Navigation.js'; +import CenturyView from './CenturyView.js'; +import DecadeView from './DecadeView.js'; +import YearView from './YearView.js'; +import MonthView from './MonthView.js'; -import { getBegin, getBeginNext, getEnd, getValueRange } from './shared/dates'; +import { getBegin, getBeginNext, getEnd, getValueRange } from './shared/dates.js'; import { isCalendarType, isClassName, @@ -19,8 +19,8 @@ import { isRef, isView, rangeOf, -} from './shared/propTypes'; -import { between } from './shared/utils'; +} from './shared/propTypes.js'; +import { between } from './shared/utils.js'; import type { Action, @@ -39,7 +39,7 @@ import type { TileDisabledFunc, Value, View, -} from './shared/types'; +} from './shared/types.js'; import type { formatDay as defaultFormatDay, @@ -49,7 +49,7 @@ import type { formatShortWeekday as defaultFormatShortWeekday, formatWeekday as defaultFormatWeekday, formatYear as defaultFormatYear, -} from './shared/dateFormatter'; +} from './shared/dateFormatter.js'; const baseClassName = 'react-calendar'; const allViews = ['century', 'decade', 'year', 'month'] as const; diff --git a/src/Calendar/Navigation.spec.tsx b/src/Calendar/Navigation.spec.tsx index f3b2301e..4472e5d8 100644 --- a/src/Calendar/Navigation.spec.tsx +++ b/src/Calendar/Navigation.spec.tsx @@ -2,7 +2,7 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'; import React from 'react'; import { fireEvent, render } from '@testing-library/react'; -import Navigation from './Navigation'; +import Navigation from './Navigation.js'; const allViews = ['century', 'decade', 'year', 'month']; diff --git a/src/Calendar/Navigation.tsx b/src/Calendar/Navigation.tsx index dcf36999..10ce36eb 100644 --- a/src/Calendar/Navigation.tsx +++ b/src/Calendar/Navigation.tsx @@ -12,13 +12,13 @@ import { getBeginPrevious2, getEndPrevious, getEndPrevious2, -} from '../shared/dates'; +} from '../shared/dates.js'; import { formatMonthYear as defaultFormatMonthYear, formatYear as defaultFormatYear, -} from '../shared/dateFormatter'; +} from '../shared/dateFormatter.js'; -import type { Action, NavigationLabelFunc, RangeType } from '../shared/types'; +import type { Action, NavigationLabelFunc, RangeType } from '../shared/types.js'; const className = 'react-calendar__navigation'; diff --git a/src/CenturyView.spec.tsx b/src/CenturyView.spec.tsx index 3f00d5c7..79477503 100644 --- a/src/CenturyView.spec.tsx +++ b/src/CenturyView.spec.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { render } from '@testing-library/react'; import { getDecadeStart, getDecadeEnd } from '@wojtekmaj/date-utils'; -import CenturyView from './CenturyView'; +import CenturyView from './CenturyView.js'; describe('CenturyView', () => { const defaultProps = { diff --git a/src/CenturyView.tsx b/src/CenturyView.tsx index 99d4603c..7b5486ff 100644 --- a/src/CenturyView.tsx +++ b/src/CenturyView.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import Decades from './CenturyView/Decades'; +import Decades from './CenturyView/Decades.js'; -import { tileGroupProps } from './shared/propTypes'; +import { tileGroupProps } from './shared/propTypes.js'; type CenturyViewProps = React.ComponentProps; diff --git a/src/CenturyView/Decade.spec.tsx b/src/CenturyView/Decade.spec.tsx index edb4be15..d4402eec 100644 --- a/src/CenturyView/Decade.spec.tsx +++ b/src/CenturyView/Decade.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'; import React from 'react'; import { fireEvent, render } from '@testing-library/react'; -import Decade from './Decade'; +import Decade from './Decade.js'; const tileProps = { activeStartDate: new Date(2018, 0, 1), diff --git a/src/CenturyView/Decade.tsx b/src/CenturyView/Decade.tsx index 39abd72f..c581cf4c 100644 --- a/src/CenturyView/Decade.tsx +++ b/src/CenturyView/Decade.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { getDecadeStart, getDecadeEnd } from '@wojtekmaj/date-utils'; -import Tile from '../Tile'; +import Tile from '../Tile.js'; -import { getDecadeLabel } from '../shared/dates'; -import { formatYear as defaultFormatYear } from '../shared/dateFormatter'; +import { getDecadeLabel } from '../shared/dates.js'; +import { formatYear as defaultFormatYear } from '../shared/dateFormatter.js'; const className = 'react-calendar__century-view__decades__decade'; diff --git a/src/CenturyView/Decades.tsx b/src/CenturyView/Decades.tsx index 4b284660..561ac627 100644 --- a/src/CenturyView/Decades.tsx +++ b/src/CenturyView/Decades.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { getDecadeStart } from '@wojtekmaj/date-utils'; -import TileGroup from '../TileGroup'; -import Decade from './Decade'; +import TileGroup from '../TileGroup.js'; +import Decade from './Decade.js'; -import { getBeginOfCenturyYear } from '../shared/dates'; +import { getBeginOfCenturyYear } from '../shared/dates.js'; type DecadesProps = { activeStartDate: Date; diff --git a/src/DecadeView.spec.tsx b/src/DecadeView.spec.tsx index 9277afd1..0d8ddbe6 100644 --- a/src/DecadeView.spec.tsx +++ b/src/DecadeView.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'; import React from 'react'; import { render } from '@testing-library/react'; -import DecadeView from './DecadeView'; +import DecadeView from './DecadeView.js'; describe('DecadeView', () => { const defaultProps = { diff --git a/src/DecadeView.tsx b/src/DecadeView.tsx index b2257a90..33c2c900 100644 --- a/src/DecadeView.tsx +++ b/src/DecadeView.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import Years from './DecadeView/Years'; +import Years from './DecadeView/Years.js'; -import { tileGroupProps } from './shared/propTypes'; +import { tileGroupProps } from './shared/propTypes.js'; type DecadeViewProps = React.ComponentProps; diff --git a/src/DecadeView/Year.spec.tsx b/src/DecadeView/Year.spec.tsx index 7b40b0a6..b215d16f 100644 --- a/src/DecadeView/Year.spec.tsx +++ b/src/DecadeView/Year.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'; import React from 'react'; import { fireEvent, render } from '@testing-library/react'; -import Year from './Year'; +import Year from './Year.js'; const tileProps = { activeStartDate: new Date(2018, 0, 1), diff --git a/src/DecadeView/Year.tsx b/src/DecadeView/Year.tsx index 2ec1002f..6c22c621 100644 --- a/src/DecadeView/Year.tsx +++ b/src/DecadeView/Year.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { getYearStart, getYearEnd } from '@wojtekmaj/date-utils'; -import Tile from '../Tile'; +import Tile from '../Tile.js'; -import { formatYear as defaultFormatYear } from '../shared/dateFormatter'; +import { formatYear as defaultFormatYear } from '../shared/dateFormatter.js'; const className = 'react-calendar__decade-view__years__year'; diff --git a/src/DecadeView/Years.tsx b/src/DecadeView/Years.tsx index 44371e73..3f87e229 100644 --- a/src/DecadeView/Years.tsx +++ b/src/DecadeView/Years.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { getYearStart } from '@wojtekmaj/date-utils'; -import TileGroup from '../TileGroup'; -import Year from './Year'; +import TileGroup from '../TileGroup.js'; +import Year from './Year.js'; -import { getBeginOfDecadeYear } from '../shared/dates'; +import { getBeginOfDecadeYear } from '../shared/dates.js'; type YearsProps = { activeStartDate: Date; diff --git a/src/Flex.spec.tsx b/src/Flex.spec.tsx index d50d02ef..ea282ff0 100644 --- a/src/Flex.spec.tsx +++ b/src/Flex.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'; import React from 'react'; import { render } from '@testing-library/react'; -import Flex from './Flex'; +import Flex from './Flex.js'; describe('Flex', () => { it('styles itself properly with wrap flag set to false', () => { diff --git a/src/MonthView.spec.tsx b/src/MonthView.spec.tsx index dfb0394e..fa3e0a21 100644 --- a/src/MonthView.spec.tsx +++ b/src/MonthView.spec.tsx @@ -2,8 +2,8 @@ import { describe, expect, it } from 'vitest'; import React from 'react'; import { render } from '@testing-library/react'; -import MonthView from './MonthView'; -import { formatShortWeekday } from './shared/dateFormatter'; +import MonthView from './MonthView.js'; +import { formatShortWeekday } from './shared/dateFormatter.js'; const { format } = new Intl.DateTimeFormat('en-US', { day: 'numeric', diff --git a/src/MonthView.tsx b/src/MonthView.tsx index 3566c2a7..d84f4a43 100644 --- a/src/MonthView.tsx +++ b/src/MonthView.tsx @@ -2,14 +2,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import Days from './MonthView/Days'; -import Weekdays from './MonthView/Weekdays'; -import WeekNumbers from './MonthView/WeekNumbers'; +import Days from './MonthView/Days.js'; +import Weekdays from './MonthView/Weekdays.js'; +import WeekNumbers from './MonthView/WeekNumbers.js'; -import { CALENDAR_TYPES, CALENDAR_TYPE_LOCALES } from './shared/const'; -import { isCalendarType, tileGroupProps } from './shared/propTypes'; +import { CALENDAR_TYPES, CALENDAR_TYPE_LOCALES } from './shared/const.js'; +import { isCalendarType, tileGroupProps } from './shared/propTypes.js'; -import type { CalendarType } from './shared/types'; +import type { CalendarType } from './shared/types.js'; function getCalendarTypeFromLocale(locale: string | undefined): CalendarType { if (locale) { diff --git a/src/MonthView/Day.spec.tsx b/src/MonthView/Day.spec.tsx index 62881713..fd16cb9c 100644 --- a/src/MonthView/Day.spec.tsx +++ b/src/MonthView/Day.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'; import React from 'react'; import { fireEvent, render } from '@testing-library/react'; -import Day from './Day'; +import Day from './Day.js'; const tileProps = { activeStartDate: new Date(2018, 0, 1), diff --git a/src/MonthView/Day.tsx b/src/MonthView/Day.tsx index 50306520..0868af36 100644 --- a/src/MonthView/Day.tsx +++ b/src/MonthView/Day.tsx @@ -1,16 +1,16 @@ import React from 'react'; import { getDayStart, getDayEnd } from '@wojtekmaj/date-utils'; -import Tile from '../Tile'; +import Tile from '../Tile.js'; -import { isWeekend } from '../shared/dates'; +import { isWeekend } from '../shared/dates.js'; import { formatDay as defaultFormatDay, formatLongDate as defaultFormatLongDate, -} from '../shared/dateFormatter'; -import { mapCalendarType } from '../shared/utils'; +} from '../shared/dateFormatter.js'; +import { mapCalendarType } from '../shared/utils.js'; -import type { CalendarType, DeprecatedCalendarType } from '../shared/types'; +import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js'; const className = 'react-calendar__month-view__days__day'; diff --git a/src/MonthView/Days.tsx b/src/MonthView/Days.tsx index d7bd9581..de826c02 100644 --- a/src/MonthView/Days.tsx +++ b/src/MonthView/Days.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { getYear, getMonth, getDaysInMonth, getDayStart } from '@wojtekmaj/date-utils'; -import TileGroup from '../TileGroup'; -import Day from './Day'; +import TileGroup from '../TileGroup.js'; +import Day from './Day.js'; -import { getDayOfWeek } from '../shared/dates'; -import { mapCalendarType } from '../shared/utils'; +import { getDayOfWeek } from '../shared/dates.js'; +import { mapCalendarType } from '../shared/utils.js'; -import type { CalendarType, DeprecatedCalendarType } from '../shared/types'; +import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js'; type DaysProps = { activeStartDate: Date; diff --git a/src/MonthView/WeekNumber.spec.tsx b/src/MonthView/WeekNumber.spec.tsx index 262814d0..1dc84152 100644 --- a/src/MonthView/WeekNumber.spec.tsx +++ b/src/MonthView/WeekNumber.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'; import React from 'react'; import { render } from '@testing-library/react'; -import WeekNumber from './WeekNumber'; +import WeekNumber from './WeekNumber.js'; describe(' component', () => { const defaultProps = { diff --git a/src/MonthView/WeekNumber.tsx b/src/MonthView/WeekNumber.tsx index e7afb490..1c7eaf43 100644 --- a/src/MonthView/WeekNumber.tsx +++ b/src/MonthView/WeekNumber.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type { OnClickWeekNumberFunc } from '../shared/types'; +import type { OnClickWeekNumberFunc } from '../shared/types.js'; const className = 'react-calendar__tile'; diff --git a/src/MonthView/WeekNumbers.spec.tsx b/src/MonthView/WeekNumbers.spec.tsx index bf11a5c8..1ed5de2a 100644 --- a/src/MonthView/WeekNumbers.spec.tsx +++ b/src/MonthView/WeekNumbers.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'; import React from 'react'; import { fireEvent, render } from '@testing-library/react'; -import WeekNumbers from './WeekNumbers'; +import WeekNumbers from './WeekNumbers.js'; describe('.react-calendar__month-view__weekNumbers', () => { const defaultProps = { diff --git a/src/MonthView/WeekNumbers.tsx b/src/MonthView/WeekNumbers.tsx index f332fb66..e24adf0c 100644 --- a/src/MonthView/WeekNumbers.tsx +++ b/src/MonthView/WeekNumbers.tsx @@ -1,13 +1,17 @@ import React from 'react'; import { getYear, getMonth, getDate, getDaysInMonth } from '@wojtekmaj/date-utils'; -import WeekNumber from './WeekNumber'; -import Flex from '../Flex'; +import WeekNumber from './WeekNumber.js'; +import Flex from '../Flex.js'; -import { getBeginOfWeek, getDayOfWeek, getWeekNumber } from '../shared/dates'; -import { mapCalendarType } from '../shared/utils'; +import { getBeginOfWeek, getDayOfWeek, getWeekNumber } from '../shared/dates.js'; +import { mapCalendarType } from '../shared/utils.js'; -import type { CalendarType, DeprecatedCalendarType, OnClickWeekNumberFunc } from '../shared/types'; +import type { + CalendarType, + DeprecatedCalendarType, + OnClickWeekNumberFunc, +} from '../shared/types.js'; type WeekNumbersProps = { activeStartDate: Date; diff --git a/src/MonthView/Weekdays.spec.tsx b/src/MonthView/Weekdays.spec.tsx index 8c3424b9..2e2ddaa0 100644 --- a/src/MonthView/Weekdays.spec.tsx +++ b/src/MonthView/Weekdays.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'; import React from 'react'; import { render } from '@testing-library/react'; -import Weekdays from './Weekdays'; +import Weekdays from './Weekdays.js'; describe('Weekdays', () => { const defaultProps = { diff --git a/src/MonthView/Weekdays.tsx b/src/MonthView/Weekdays.tsx index e9b68a3f..c3dad4d5 100644 --- a/src/MonthView/Weekdays.tsx +++ b/src/MonthView/Weekdays.tsx @@ -2,16 +2,16 @@ import React from 'react'; import clsx from 'clsx'; import { getYear, getMonth, getMonthStart } from '@wojtekmaj/date-utils'; -import Flex from '../Flex'; +import Flex from '../Flex.js'; -import { getDayOfWeek, isCurrentDayOfWeek, isWeekend } from '../shared/dates'; +import { getDayOfWeek, isCurrentDayOfWeek, isWeekend } from '../shared/dates.js'; import { formatShortWeekday as defaultFormatShortWeekday, formatWeekday as defaultFormatWeekday, -} from '../shared/dateFormatter'; -import { mapCalendarType } from '../shared/utils'; +} from '../shared/dateFormatter.js'; +import { mapCalendarType } from '../shared/utils.js'; -import type { CalendarType, DeprecatedCalendarType } from '../shared/types'; +import type { CalendarType, DeprecatedCalendarType } from '../shared/types.js'; const className = 'react-calendar__month-view__weekdays'; const weekdayClassName = `${className}__weekday`; diff --git a/src/Tile.spec.tsx b/src/Tile.spec.tsx index 3069184a..1d44595a 100644 --- a/src/Tile.spec.tsx +++ b/src/Tile.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'; import React from 'react'; import { fireEvent, render } from '@testing-library/react'; -import Tile from './Tile'; +import Tile from './Tile.js'; describe(' component', () => { const defaultProps = { diff --git a/src/Tile.tsx b/src/Tile.tsx index 960007b7..3e51f728 100644 --- a/src/Tile.tsx +++ b/src/Tile.tsx @@ -7,7 +7,7 @@ import type { TileContentFunc, TileDisabledFunc, View, -} from './shared/types'; +} from './shared/types.js'; type TileProps = { activeStartDate: Date; diff --git a/src/TileGroup.tsx b/src/TileGroup.tsx index 6be1e2f4..36c14ca1 100644 --- a/src/TileGroup.tsx +++ b/src/TileGroup.tsx @@ -1,10 +1,10 @@ import React from 'react'; -import Flex from './Flex'; +import Flex from './Flex.js'; -import { getTileClasses } from './shared/utils'; +import { getTileClasses } from './shared/utils.js'; -import type { RangeType, Value } from './shared/types'; +import type { RangeType, Value } from './shared/types.js'; type TileGroupProps = { className?: string; diff --git a/src/YearView.spec.tsx b/src/YearView.spec.tsx index 50ef14f1..0e658a18 100644 --- a/src/YearView.spec.tsx +++ b/src/YearView.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'; import React from 'react'; import { render } from '@testing-library/react'; -import YearView from './YearView'; +import YearView from './YearView.js'; const { format } = new Intl.DateTimeFormat('en-US', { month: 'long', year: 'numeric' }); diff --git a/src/YearView.tsx b/src/YearView.tsx index 8641c971..66d31dfe 100644 --- a/src/YearView.tsx +++ b/src/YearView.tsx @@ -1,8 +1,8 @@ import React from 'react'; -import Months from './YearView/Months'; +import Months from './YearView/Months.js'; -import { tileGroupProps } from './shared/propTypes'; +import { tileGroupProps } from './shared/propTypes.js'; type YearViewProps = React.ComponentProps; diff --git a/src/YearView/Month.spec.tsx b/src/YearView/Month.spec.tsx index 78360d64..3444d026 100644 --- a/src/YearView/Month.spec.tsx +++ b/src/YearView/Month.spec.tsx @@ -2,7 +2,7 @@ import { describe, expect, it, vi } from 'vitest'; import React from 'react'; import { fireEvent, render } from '@testing-library/react'; -import Month from './Month'; +import Month from './Month.js'; const tileProps = { activeStartDate: new Date(2018, 0, 1), diff --git a/src/YearView/Month.tsx b/src/YearView/Month.tsx index ef30f844..60887aa5 100644 --- a/src/YearView/Month.tsx +++ b/src/YearView/Month.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { getMonthStart, getMonthEnd } from '@wojtekmaj/date-utils'; -import Tile from '../Tile'; +import Tile from '../Tile.js'; import { formatMonth as defaultFormatMonth, formatMonthYear as defaultFormatMonthYear, -} from '../shared/dateFormatter'; +} from '../shared/dateFormatter.js'; const className = 'react-calendar__year-view__months__month'; diff --git a/src/YearView/Months.tsx b/src/YearView/Months.tsx index 3c7c3589..3a25b1aa 100644 --- a/src/YearView/Months.tsx +++ b/src/YearView/Months.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { getMonthStart, getYear } from '@wojtekmaj/date-utils'; -import TileGroup from '../TileGroup'; -import Month from './Month'; +import TileGroup from '../TileGroup.js'; +import Month from './Month.js'; type MonthsProps = { activeStartDate: Date; diff --git a/src/index.ts b/src/index.ts index 561db2df..2c1b8237 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,11 +1,11 @@ -import Calendar from './Calendar'; -import CenturyView from './CenturyView'; -import DecadeView from './DecadeView'; -import MonthView from './MonthView'; -import Navigation from './Calendar/Navigation'; -import YearView from './YearView'; +import Calendar from './Calendar.js'; +import CenturyView from './CenturyView.js'; +import DecadeView from './DecadeView.js'; +import MonthView from './MonthView.js'; +import Navigation from './Calendar/Navigation.js'; +import YearView from './YearView.js'; -export type { CalendarProps } from './Calendar'; +export type { CalendarProps } from './Calendar.js'; export type { NavigationLabelFunc, @@ -14,7 +14,7 @@ export type { TileClassNameFunc, TileContentFunc, TileDisabledFunc, -} from './shared/types'; +} from './shared/types.js'; export { Calendar, CenturyView, DecadeView, MonthView, Navigation, YearView }; diff --git a/src/shared/dateFormatter.spec.ts b/src/shared/dateFormatter.spec.ts index e1f94de1..2b36aa11 100644 --- a/src/shared/dateFormatter.spec.ts +++ b/src/shared/dateFormatter.spec.ts @@ -6,7 +6,7 @@ import { formatShortWeekday, formatWeekday, formatYear, -} from './dateFormatter'; +} from './dateFormatter.js'; describe('formatDate', () => { it('returns proper full numeric date', () => { diff --git a/src/shared/dates.spec.ts b/src/shared/dates.spec.ts index 6a95d4af..3a7ab90f 100644 --- a/src/shared/dates.spec.ts +++ b/src/shared/dates.spec.ts @@ -20,7 +20,7 @@ import { getCenturyLabel, getDecadeLabel, isWeekend, -} from './dates'; +} from './dates.js'; describe('getDayOfWeek', () => { it('returns proper day of the week (ISO 8601)', () => { diff --git a/src/shared/dates.ts b/src/shared/dates.ts index 35b34b0f..83b04c6d 100644 --- a/src/shared/dates.ts +++ b/src/shared/dates.ts @@ -30,10 +30,10 @@ import { getDayRange, } from '@wojtekmaj/date-utils'; -import { CALENDAR_TYPES, WEEKDAYS } from './const'; -import { formatYear as defaultFormatYear } from './dateFormatter'; +import { CALENDAR_TYPES, WEEKDAYS } from './const.js'; +import { formatYear as defaultFormatYear } from './dateFormatter.js'; -import type { CalendarType, RangeType } from './types'; +import type { CalendarType, RangeType } from './types.js'; const SUNDAY = WEEKDAYS[0]; const FRIDAY = WEEKDAYS[5]; diff --git a/src/shared/propTypes.ts b/src/shared/propTypes.ts index 821ba16c..87a15a85 100644 --- a/src/shared/propTypes.ts +++ b/src/shared/propTypes.ts @@ -1,9 +1,9 @@ import PropTypes from 'prop-types'; -import { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const'; +import { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const.js'; import type { Requireable, Validator } from 'prop-types'; -import type { Range, View } from './types'; +import type { Range, View } from './types.js'; const calendarTypes = Object.values(CALENDAR_TYPES); const deprecatedCalendarTypes = Object.values(DEPRECATED_CALENDAR_TYPES); diff --git a/src/shared/types.ts b/src/shared/types.ts index fdfb90ac..4d5fb24d 100644 --- a/src/shared/types.ts +++ b/src/shared/types.ts @@ -1,4 +1,4 @@ -import type { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const'; +import type { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const.js'; export type Range = [T, T]; diff --git a/src/shared/utils.spec.ts b/src/shared/utils.spec.ts index cf061de0..0b1f3e79 100644 --- a/src/shared/utils.spec.ts +++ b/src/shared/utils.spec.ts @@ -5,9 +5,9 @@ import { isRangeWithinRange, doRangesOverlap, getTileClasses, -} from './utils'; +} from './utils.js'; -import type { Range } from './types'; +import type { Range } from './types.js'; describe('between', () => { it('returns value when value is within set boundaries', () => { diff --git a/src/shared/utils.ts b/src/shared/utils.ts index 542b090e..f6751264 100644 --- a/src/shared/utils.ts +++ b/src/shared/utils.ts @@ -1,9 +1,9 @@ import warning from 'tiny-warning'; -import { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const'; -import { getRange } from './dates'; +import { CALENDAR_TYPES, DEPRECATED_CALENDAR_TYPES } from './const.js'; +import { getRange } from './dates.js'; -import type { CalendarType, DeprecatedCalendarType, Range, RangeType, Value } from './types'; +import type { CalendarType, DeprecatedCalendarType, Range, RangeType, Value } from './types.js'; /** * Returns a value no smaller than min and no larger than max. diff --git a/test/MaxDetailOptions.tsx b/test/MaxDetailOptions.tsx index be6c6a5b..85530a2f 100644 --- a/test/MaxDetailOptions.tsx +++ b/test/MaxDetailOptions.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type { View } from './shared/types'; +import type { View } from './shared/types.js'; const allViews = ['century', 'decade', 'year', 'month'] as const; diff --git a/test/MinDetailOptions.tsx b/test/MinDetailOptions.tsx index 021cc069..4d6c112e 100644 --- a/test/MinDetailOptions.tsx +++ b/test/MinDetailOptions.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type { View } from './shared/types'; +import type { View } from './shared/types.js'; const allViews = ['century', 'decade', 'year', 'month'] as const; diff --git a/test/Test.tsx b/test/Test.tsx index 9512d832..784356ae 100644 --- a/test/Test.tsx +++ b/test/Test.tsx @@ -1,19 +1,19 @@ import React, { useCallback, useState } from 'react'; -import Calendar from 'react-calendar/src'; -import 'react-calendar/src/Calendar.css'; +import Calendar from 'react-calendar'; +import 'react-calendar/dist/Calendar.css'; -import DateBonduariesOptions from './DateBonduariesOptions'; -import MaxDetailOptions from './MaxDetailOptions'; -import MinDetailOptions from './MinDetailOptions'; -import LocaleOptions from './LocaleOptions'; -import ValueOptions from './ValueOptions'; -import ViewOptions from './ViewOptions'; +import DateBonduariesOptions from './DateBonduariesOptions.js'; +import MaxDetailOptions from './MaxDetailOptions.js'; +import MinDetailOptions from './MinDetailOptions.js'; +import LocaleOptions from './LocaleOptions.js'; +import ValueOptions from './ValueOptions.js'; +import ViewOptions from './ViewOptions.js'; -import { formatDate } from './shared/dateFormatter'; +import { formatDate } from './shared/dateFormatter.js'; import './Test.css'; -import type { LooseValue, Value, View } from './shared/types'; +import type { LooseValue, Value, View } from './shared/types.js'; const now = new Date(); diff --git a/test/ValueOptions.tsx b/test/ValueOptions.tsx index 74e44ac6..491569d6 100644 --- a/test/ValueOptions.tsx +++ b/test/ValueOptions.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { getISOLocalDateTime } from '@wojtekmaj/date-utils'; -import type { LooseValue } from './shared/types'; +import type { LooseValue } from './shared/types.js'; type ValueOptionsProps = { selectRange?: boolean; diff --git a/test/index.tsx b/test/index.tsx index 4a67864f..c355c527 100644 --- a/test/index.tsx +++ b/test/index.tsx @@ -1,7 +1,7 @@ import React, { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; -import Test from './Test'; +import Test from './Test.js'; createRoot(document.getElementById('react-root') as HTMLDivElement).render(