diff --git a/packages/datetime/src/components/date-input/date-input.md b/packages/datetime/src/components/date-input/date-input.md index 0dfd91cf0a..5804de0615 100644 --- a/packages/datetime/src/components/date-input/date-input.md +++ b/packages/datetime/src/components/date-input/date-input.md @@ -1,15 +1,29 @@ @# Date input -The __DateInput__ component is an [__InputGroup__](#core/components/input-group) -that shows a [__DatePicker__](#datetime/datepicker) inside a [__Popover__](#core/components/popover) -on focus. It optionally shows a [__TimezoneSelect__](#datetime/timezone-select) on the right side of +
+
+ +Deprecated: use [**DateInput3**](#datetime2/date-input3) + +
+ +This component is **deprecated since @blueprintjs/datetime v5.2.0** in favor of the new +**DateInput3** component available in the `@blueprintjs/datetime2` package which uses +react-day-picker v8.x instead of v7.x. You should migrate to the new API which will become the +standard in Blueprint v6. + +
+ +The **DateInput** component is an [**InputGroup**](#core/components/input-group) +that shows a [**DatePicker**](#datetime/datepicker) inside a [**Popover**](#core/components/popover) +on focus. It optionally shows a [**TimezoneSelect**](#datetime/timezone-select) on the right side of the InputGroup, allowing the user to change the timezone of the selected date. @reactExample DateInputExample @## Usage -__DateInput__ supports both controlled and uncontrolled usage. You can control +**DateInput** supports both controlled and uncontrolled usage. You can control the selected date by setting the `value` prop, or use the component in uncontrolled mode and specify an initial date by setting `defaultValue`. Use the `onChange` prop callback to listen for changes to the selected day and @@ -20,18 +34,18 @@ and the `onChange` callback. @## Date formatting -__DateInput__ requires two props for parsing and formatting dates. These are essentially the plumbing +**DateInput** requires two props for parsing and formatting dates. These are essentially the plumbing between the text input and the DatePicker. -- `formatDate(date, locale?)` receives the current `Date` and returns a string representation of it. +- `formatDate(date, locale?)` receives the current `Date` and returns a string representation of it. The result of this function becomes the input value when it is not being edited. -- `parseDate(str, locale?)` receives text inputted by the user and converts it to a `Date` object. +- `parseDate(str, locale?)` receives text inputted by the user and converts it to a `Date` object. The returned `Date` becomes the next value of the component. The optional `locale` argument to these functions is the value of the `locale` prop set on the component. Note that we still use JS `Date` here instead of ISO strings — this makes it easy to delegate to -third party libraries like __date-fns__. +third party libraries like **date-fns**. A simple implementation using built-in browser methods could look like this: @@ -57,7 +71,7 @@ function Example() { } ``` -An implementation using __date-fns__ could look like this: +An implementation using **date-fns** could look like this: ```tsx import { DateInput } from "@blueprintjs/datetime"; diff --git a/packages/datetime/src/components/date-input/dateInput.tsx b/packages/datetime/src/components/date-input/dateInput.tsx index 75f73851e5..8f433d795d 100644 --- a/packages/datetime/src/components/date-input/dateInput.tsx +++ b/packages/datetime/src/components/date-input/dateInput.tsx @@ -14,6 +14,14 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DateInput3 in the datetime2 + * package instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import classNames from "classnames"; import * as React from "react"; import type { DayPickerProps } from "react-day-picker"; @@ -209,6 +217,7 @@ const DEFAULT_MIN_DATE = DatePickerUtils.getDefaultMinDate(); * Date input component. * * @see https://blueprintjs.com/docs/#datetime/date-input + * @deprecated use `{ DateInput3 } from "@blueprintjs/datetime2"` instead */ export const DateInput: React.FC = React.memo(function _DateInput(props) { const { diff --git a/packages/datetime/src/components/date-picker/datePicker.tsx b/packages/datetime/src/components/date-picker/datePicker.tsx index 65c636ac28..5512d049ca 100644 --- a/packages/datetime/src/components/date-picker/datePicker.tsx +++ b/packages/datetime/src/components/date-picker/datePicker.tsx @@ -14,6 +14,14 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DatePicker3 in the datetime2 + * package instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import classNames from "classnames"; import * as React from "react"; import DayPicker, { CaptionElementProps, DayModifiers, NavbarElementProps } from "react-day-picker"; @@ -110,6 +118,7 @@ export interface DatePickerState { * Date picker component. * * @see https://blueprintjs.com/docs/#datetime/datepicker + * @deprecated use `{ DatePicker3 } from "@blueprintjs/datetime2"` instead */ export class DatePicker extends AbstractPureComponent { public static defaultProps: DatePickerProps = { diff --git a/packages/datetime/src/components/date-picker/datepicker.md b/packages/datetime/src/components/date-picker/datepicker.md index bd0909cc17..5acd832dc7 100644 --- a/packages/datetime/src/components/date-picker/datepicker.md +++ b/packages/datetime/src/components/date-picker/datepicker.md @@ -1,22 +1,36 @@ @# Date picker -__DatePicker__ renders a UI to choose a single date and (optionally) a time of day. It is built on top of the -[__react-day-picker__ library](https://github.com/gpbl/react-day-picker). Time selection is enabled by the -[__TimePicker__](#datetime/timepicker) component. +
+
+ +Deprecated: use [**DatePicker3**](#datetime2/date-picker3) + +
+ +This component is **deprecated since @blueprintjs/datetime v5.2.0** in favor of the new +**DatePicker3** component available in the `@blueprintjs/datetime2` package which uses +react-day-picker v8.x instead of v7.x. You should migrate to the new API which will become the +standard in Blueprint v6. + +
+ +**DatePicker** renders a UI to choose a single date and (optionally) a time of day. It is built on top of the +[**react-day-picker** library](https://github.com/gpbl/react-day-picker). Time selection is enabled by the +[**TimePicker**](#datetime/timepicker) component. @reactExample DatePickerExample @## Usage -__DatePicker__ supports both controlled and uncontrolled usage. You can control the selected day by setting the `value` +**DatePicker** supports both controlled and uncontrolled usage. You can control the selected day by setting the `value` prop, or use the component in uncontrolled mode and specify an initial day by setting `defaultValue`. Use the `onChange` prop to listen for changes to the selected day. @## Props interface -Some props are managed by __DatePicker__, while others are passed to the __react-day-picker__ library. These +Some props are managed by **DatePicker**, while others are passed to the **react-day-picker** library. These passed-through props are documented in full in the -[__react-day-picker__ documentation](https://react-day-picker-v7.netlify.app/). +[**react-day-picker** documentation](https://react-day-picker-v7.netlify.app/). @interface DatePickerProps @@ -47,7 +61,7 @@ The **preset shortcuts** can be seen in the example above. They are as follows: You can use the `modifiers` prop to conditionally apply styles to days. Modifiers are a react-day-picker concept and are documented in full in the -[__react-day-picker__ documentation](https://react-day-picker-v7.netlify.app/docs/matching-days). +[**react-day-picker** documentation](https://react-day-picker-v7.netlify.app/docs/matching-days). The example below renders a DatePicker that prevents the user from selecting any Sundays, by using the component in controlled mode and with the `modifiers` prop: @@ -92,8 +106,8 @@ function isSunday(date: Date) { @## Localization -__DatePicker__, __DateRangePicker__, __DateInput__, and __DateRangeInput__ all support calendar localization -using an interface defined by __react-day-picker__: +**DatePicker**, **DateRangePicker**, **DateInput**, and **DateRangeInput** all support calendar localization +using an interface defined by **react-day-picker**: ```js import { LocaleUtils } from "react-day-picker"; @@ -106,7 +120,7 @@ You will need to define the functions of `LocaleUtil` on your own. [See the interface definition](https://github.com/gpbl/react-day-picker/blob/v7.3.0/types/utils.d.ts#L5) for more details. -Since __@blueprintjs/datetime__ depends on [__date-fns__](https://date-fns.org/), you may wish to leverage this library +Since **@blueprintjs/datetime** depends on [**date-fns**](https://date-fns.org/), you may wish to leverage this library which is already in your bundle to implement localization, for example: ```tsx @@ -121,4 +135,4 @@ const DATE_FNS_LOCALE_UTILS: DatePickerLocaleUtils = { ``` More detailed examples can be found in the -[__react-day-picker__ documentation](https://react-day-picker-v7.netlify.app/docs/localization). +[**react-day-picker** documentation](https://react-day-picker-v7.netlify.app/docs/localization). diff --git a/packages/datetime/src/components/date-range-input/date-range-input.md b/packages/datetime/src/components/date-range-input/date-range-input.md index 100c40c011..7bab7bacd7 100644 --- a/packages/datetime/src/components/date-range-input/date-range-input.md +++ b/packages/datetime/src/components/date-range-input/date-range-input.md @@ -1,21 +1,32 @@ @# Date range input -The __DateRangeInput__ component is [__ControlGroup__](#core/components/control-group) composed -of two [__InputGroups__](#core/components/input-group). It shows a -[__DateRangePicker__](#datetime/daterangepicker) in a [__Popover__](#core/components/popover) -on focus. +
+
+ +Deprecated: use [**DateRangeInput3**](#datetime2/date-range-input3) + +
-Unlike [__DateInput__](#datetime/date-input), this component does _not_ yet have support for -a built-in [__TimezoneSelect__](#datetime/timezone-select). +This component is **deprecated since @blueprintjs/datetime v5.2.0** in favor of the new +**DateRangeInput3** component available in the `@blueprintjs/datetime2` package which uses +react-day-picker v8.x instead of v7.x. You should migrate to the new API which will become the +standard in Blueprint v6. + +
+ +The **DateRangeInput** component is [**ControlGroup**](#core/components/control-group) composed +of two [**InputGroups**](#core/components/input-group). It shows a +[**DateRangePicker**](#datetime/daterangepicker) in a [**Popover**](#core/components/popover) +on focus. - +Unlike [**DateInput**](#datetime/date-input), this component does _not_ yet have support for +a built-in [**TimezoneSelect**](#datetime/timezone-select). @reactExample DateRangeInputExample @## Usage -__DateRangeInput__ supports both controlled and uncontrolled usage. You can control +**DateRangeInput** supports both controlled and uncontrolled usage. You can control the selected date by setting the `value` prop, or use the component in uncontrolled mode and specify an initial date by setting `defaultValue`. Use the `onChange` prop callback to listen for changes to the selected day and diff --git a/packages/datetime/src/components/date-range-input/dateRangeInput.tsx b/packages/datetime/src/components/date-range-input/dateRangeInput.tsx index 42be26247b..c09c0f8b88 100644 --- a/packages/datetime/src/components/date-range-input/dateRangeInput.tsx +++ b/packages/datetime/src/components/date-range-input/dateRangeInput.tsx @@ -14,6 +14,14 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DateRangeInput3 in the datetime2 + * package instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import classNames from "classnames"; import { isSameDay, isValid } from "date-fns"; import * as React from "react"; @@ -214,6 +222,7 @@ interface StateKeysAndValuesObject { * Date range input component. * * @see https://blueprintjs.com/docs/#datetime/date-range-input + * @deprecated use `{ DateRangeInput3 } from "@blueprintjs/datetime2"` instead */ export class DateRangeInput extends AbstractPureComponent { public static defaultProps: Partial = { diff --git a/packages/datetime/src/components/date-range-picker/dateRangePicker.tsx b/packages/datetime/src/components/date-range-picker/dateRangePicker.tsx index d8ed2e710a..2f0faa774c 100644 --- a/packages/datetime/src/components/date-range-picker/dateRangePicker.tsx +++ b/packages/datetime/src/components/date-range-picker/dateRangePicker.tsx @@ -14,6 +14,14 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DateRangePicker3 in the datetime2 + * package instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import classNames from "classnames"; import * as React from "react"; import DayPicker, { CaptionElementProps, DayModifiers, DayPickerProps, NavbarElementProps } from "react-day-picker"; @@ -136,6 +144,7 @@ export interface DateRangePickerState { * Date range picker component. * * @see https://blueprintjs.com/docs/#datetime/daterangepicker + * @deprecated use `{ DateRangePicker3 } from "@blueprintjs/datetime2"` instead */ export class DateRangePicker extends AbstractPureComponent { public static defaultProps: DateRangePickerProps = { diff --git a/packages/datetime/src/components/date-range-picker/daterangepicker.md b/packages/datetime/src/components/date-range-picker/daterangepicker.md index 93707e9ffc..e297dbfeaf 100644 --- a/packages/datetime/src/components/date-range-picker/daterangepicker.md +++ b/packages/datetime/src/components/date-range-picker/daterangepicker.md @@ -1,24 +1,38 @@ @# Date range picker -__DateRangePicker__ shows two sequential month calendars and allows the user to select a _range_ of days. +
+
+ +Deprecated: use [**DateRangePicker3**](#datetime2/date-range-picker3) + +
+ +This component is **deprecated since @blueprintjs/datetime v5.2.0** in favor of the new +**DateRangePicker3** component available in the `@blueprintjs/datetime2` package which uses +react-day-picker v8.x instead of v7.x. You should migrate to the new API which will become the +standard in Blueprint v6. + +
+ +**DateRangePicker** shows two sequential month calendars and allows the user to select a _range_ of days. @reactExample DateRangePickerExample @## Usage -__DateRangePicker__ supports both controlled and uncontrolled usage. You can control the selected date range by setting +**DateRangePicker** supports both controlled and uncontrolled usage. You can control the selected date range by setting the `value` prop, or use the component in uncontrolled mode and specify an initial date range by setting `defaultValue`. Use the `onChange` prop to listen for changes to the selected range. @## Date ranges -__DateRangePicker__ uses the `DateRange` type across its API. This is an alias for the tuple type `[Date, Date]`. +**DateRangePicker** uses the `DateRange` type across its API. This is an alias for the tuple type `[Date, Date]`. Semantically: -* `[null, null]` represents an empty selection. -* `[someDate, null]` represents a date range where a single endpoint is known. -* `[someDate, someOtherDate]` represents a full date range where both endpoints are known. +- `[null, null]` represents an empty selection. +- `[someDate, null]` represents a date range where a single endpoint is known. +- `[someDate, someOtherDate]` represents a full date range where both endpoints are known. @## Shortcuts diff --git a/packages/datetime/src/index.md b/packages/datetime/src/index.md index b6fc5b1f63..764f63a727 100644 --- a/packages/datetime/src/index.md +++ b/packages/datetime/src/index.md @@ -4,20 +4,20 @@ reference: datetime @# Datetime -The [__@blueprintjs/datetime__ package](https://www.npmjs.com/package/@blueprintjs/datetime) +The [**@blueprintjs/datetime** package](https://www.npmjs.com/package/@blueprintjs/datetime) provides React components for interacting with dates and times: -- [DatePicker](#datetime/datepicker) for selecting a single date (day, month, year). +- [**DatePicker**](#datetime/datepicker) for selecting a single date (day, month, year) (DEPRECATED). -- [DateRangePicker](#datetime/daterangepicker) for selecting date ranges. +- [**DateRangePicker**](#datetime/daterangepicker) for selecting date ranges (DEPRECATED). -- [TimePicker](#datetime/timepicker) for selecting a time (hour, minute, second, millisecond). +- [**DateInput**](#datetime/date-input), which composes a text input with a DatePicker in + a Popover, for use in forms (DEPRECATED). -- [DateInput](#datetime/date-input), which composes a text input with a DatePicker in - a Popover, for use in forms. +- [**DateRangeInput**](#datetime/date-range-input), which composes two text inputs with a + DateRangePicker in a Popover, for use in forms (DEPRECATED). -- [DateRangeInput](#datetime/date-range-input), which composes two text inputs with a - DateRangePicker in a Popover, for use in forms. +- [**TimePicker**](#datetime/timepicker) for selecting a time (hour, minute, second, millisecond). Make sure to review the [getting started docs for installation info](#blueprint/getting-started). diff --git a/packages/datetime/src/index.ts b/packages/datetime/src/index.ts index c5eae3c2d0..7f8713aa2f 100644 --- a/packages/datetime/src/index.ts +++ b/packages/datetime/src/index.ts @@ -28,12 +28,8 @@ export { MonthAndYear } from "./common/monthAndYear"; export { TimePickerProps } from "./common/timePickerProps"; export { TimePrecision } from "./common/timePrecision"; -export { DateInput, DateInputProps } from "./components/date-input/dateInput"; -export { DatePicker, DatePickerProps } from "./components/date-picker/datePicker"; export { DatePickerUtils } from "./components/date-picker/datePickerUtils"; export { DatePickerBaseProps, DatePickerModifiers } from "./common/datePickerBaseProps"; -export { DateRangeInput, DateRangeInputProps } from "./components/date-range-input/dateRangeInput"; -export { DateRangePicker, DateRangePickerProps } from "./components/date-range-picker/dateRangePicker"; export { TimePicker } from "./components/time-picker/timePicker"; export { DatePickerShortcut, @@ -42,3 +38,10 @@ export { DateRangeShortcut, } from "./components/shortcuts/shortcuts"; export { TimezoneSelect, TimezoneSelectProps } from "./components/timezone-select/timezoneSelect"; + +/* eslint-disable deprecation/deprecation */ + +export { DateInput, DateInputProps } from "./components/date-input/dateInput"; +export { DatePicker, DatePickerProps } from "./components/date-picker/datePicker"; +export { DateRangeInput, DateRangeInputProps } from "./components/date-range-input/dateRangeInput"; +export { DateRangePicker, DateRangePickerProps } from "./components/date-range-picker/dateRangePicker"; diff --git a/packages/datetime/test/components/dateInputTests.tsx b/packages/datetime/test/components/dateInputTests.tsx index 02dcd13c3f..0fe240d756 100644 --- a/packages/datetime/test/components/dateInputTests.tsx +++ b/packages/datetime/test/components/dateInputTests.tsx @@ -14,6 +14,14 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DateInput3 in the datetime2 + * package instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import { assert } from "chai"; import { intlFormat, isEqual, parseISO } from "date-fns"; import { formatInTimeZone, zonedTimeToUtc } from "date-fns-tz"; diff --git a/packages/datetime/test/components/datePickerTests.tsx b/packages/datetime/test/components/datePickerTests.tsx index e11af27b73..eaa75080a9 100644 --- a/packages/datetime/test/components/datePickerTests.tsx +++ b/packages/datetime/test/components/datePickerTests.tsx @@ -14,6 +14,14 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DatePicker3 in the datetime2 + * package instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import { assert } from "chai"; import { mount } from "enzyme"; import * as React from "react"; diff --git a/packages/datetime/test/components/dateRangeInputTests.tsx b/packages/datetime/test/components/dateRangeInputTests.tsx index b855765c21..4ff1214a2a 100644 --- a/packages/datetime/test/components/dateRangeInputTests.tsx +++ b/packages/datetime/test/components/dateRangeInputTests.tsx @@ -14,6 +14,14 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DateRangeInput3 in the datetime2 + * package instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import { expect } from "chai"; import { mount, ReactWrapper } from "enzyme"; import * as React from "react"; diff --git a/packages/datetime/test/components/dateRangePickerTests.tsx b/packages/datetime/test/components/dateRangePickerTests.tsx index 1a579724b2..681976334e 100644 --- a/packages/datetime/test/components/dateRangePickerTests.tsx +++ b/packages/datetime/test/components/dateRangePickerTests.tsx @@ -14,6 +14,14 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DateRangePicker3 in the datetime2 + * package instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import { assert } from "chai"; import { mount, ReactWrapper } from "enzyme"; import * as React from "react"; diff --git a/packages/datetime2/src/index.md b/packages/datetime2/src/index.md index f24c085f64..0ebf7f653a 100644 --- a/packages/datetime2/src/index.md +++ b/packages/datetime2/src/index.md @@ -7,16 +7,16 @@ reference: datetime2 The [**@blueprintjs/datetime2** package](https://www.npmjs.com/package/@blueprintjs/datetime2) provides next-generation components for interacting with dates & times: -- [DatePicker3](#datetime2/date-picker3) -- [DateInput3](#datetime2/date-input3) -- [DateRangePicker3](#datetime2/date-range-picker3) -- [DateRangeInput3](#datetime2/date-range-input3) +- [**DatePicker3**](#datetime2/date-picker3) +- [**DateInput3**](#datetime2/date-input3) +- [**DateRangePicker3**](#datetime2/date-range-picker3) +- [**DateRangeInput3**](#datetime2/date-range-input3) There are also legacy APIs which are re-exported aliases for components from [**@blueprintjs/datetime**](#datetime). These "V2" names are backwards-compatible with the previous major version of @blueprintjs/datetime2: -- DateInput2 (alias for [DateInput](#datetime/date-input)) -- DateRangeInput2 (alias for [DateRangeInput](#datetime/date-range-input)) +- **DateInput2** (alias for [**DateInput**](#datetime/date-input)) (DEPRECATED) +- **DateRangeInput2** (alias for [**DateRangeInput**](#datetime/date-range-input)) (DEPRECATED) ### Motivation diff --git a/packages/datetime2/test/dateInput2MigrationUtilsTests.tsx b/packages/datetime2/test/dateInput2MigrationUtilsTests.tsx index 310d5bf2fb..5032825fbd 100644 --- a/packages/datetime2/test/dateInput2MigrationUtilsTests.tsx +++ b/packages/datetime2/test/dateInput2MigrationUtilsTests.tsx @@ -14,6 +14,8 @@ * limitations under the License. */ +/* eslint-disable deprecation/deprecation */ + import { assert } from "chai"; import { mount } from "enzyme"; import * as React from "react"; diff --git a/packages/demo-app/src/examples/DatePickerExample.tsx b/packages/demo-app/src/examples/DatePickerExample.tsx index 0530f34d8a..c97eb83400 100644 --- a/packages/demo-app/src/examples/DatePickerExample.tsx +++ b/packages/demo-app/src/examples/DatePickerExample.tsx @@ -17,7 +17,7 @@ import * as React from "react"; import { Classes } from "@blueprintjs/core"; -import { DatePicker } from "@blueprintjs/datetime"; +import { DatePicker3 } from "@blueprintjs/datetime2"; import { ExampleCard } from "./ExampleCard"; @@ -25,7 +25,7 @@ const WIDTH = 300; export const DatePickerExample = React.memo(() => { return ( - + ); }); diff --git a/packages/demo-app/src/examples/DateRangePickerExample.tsx b/packages/demo-app/src/examples/DateRangePickerExample.tsx index 7e902f6c6b..9749254c5a 100644 --- a/packages/demo-app/src/examples/DateRangePickerExample.tsx +++ b/packages/demo-app/src/examples/DateRangePickerExample.tsx @@ -17,14 +17,14 @@ import * as React from "react"; import { Classes } from "@blueprintjs/core"; -import { DateRangePicker } from "@blueprintjs/datetime"; +import { DateRangePicker3 } from "@blueprintjs/datetime2"; import { ExampleCard } from "./ExampleCard"; export const DateRangePickerExample = React.memo(() => { return ( - + ); }); diff --git a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx index 26cecb1401..608fd34bf8 100644 --- a/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx +++ b/packages/docs-app/src/examples/datetime-examples/dateInputExample.tsx @@ -14,6 +14,13 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DateInput3 instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import classNames from "classnames"; import * as React from "react"; diff --git a/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx b/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx index d73f074953..b55cd3bfb2 100644 --- a/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx +++ b/packages/docs-app/src/examples/datetime-examples/datePickerExample.tsx @@ -14,6 +14,13 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DatePicker3 instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import * as React from "react"; import { Callout, Classes, H5, Switch } from "@blueprintjs/core"; diff --git a/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx index 28cfd096f7..44862dd592 100644 --- a/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx +++ b/packages/docs-app/src/examples/datetime-examples/dateRangeInputExample.tsx @@ -14,6 +14,13 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DateRangeInput3 instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import * as React from "react"; import { Callout, Code, H5, Switch } from "@blueprintjs/core"; diff --git a/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx b/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx index 91c4c52467..c562b45da4 100644 --- a/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx +++ b/packages/docs-app/src/examples/datetime-examples/dateRangePickerExample.tsx @@ -14,6 +14,13 @@ * limitations under the License. */ +/** + * @fileoverview This component is DEPRECATED, and the code is frozen. + * All changes & bugfixes should be made to DateRangePicker3 instead. + */ + +/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */ + import moment from "moment"; import * as React from "react"; diff --git a/packages/eslint-plugin/src/rules/no-deprecated-components/index.ts b/packages/eslint-plugin/src/rules/no-deprecated-components/index.ts index e5d6ac5487..356386d650 100644 --- a/packages/eslint-plugin/src/rules/no-deprecated-components/index.ts +++ b/packages/eslint-plugin/src/rules/no-deprecated-components/index.ts @@ -5,5 +5,6 @@ export * from "./no-deprecated-components"; export * from "./no-deprecated-core-components"; export * from "./no-deprecated-datetime-components"; +export * from "./no-deprecated-datetime2-components"; export * from "./no-deprecated-select-components"; export * from "./no-deprecated-table-components"; diff --git a/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-components.ts b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-components.ts index 29b983c1e3..f2f3842269 100644 --- a/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-components.ts +++ b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-components.ts @@ -7,6 +7,7 @@ import { TSESLint } from "@typescript-eslint/utils"; import { createNoDeprecatedComponentsRule } from "./createNoDeprecatedComponentsRule"; import { coreComponentsMigrationMapping } from "./no-deprecated-core-components"; import { datetimeComponentsMigrationMapping } from "./no-deprecated-datetime-components"; +import { datetime2ComponentsMigrationMapping } from "./no-deprecated-datetime2-components"; import { selectComponentsMigrationMapping } from "./no-deprecated-select-components"; import { tableComponentsMigrationMapping } from "./no-deprecated-table-components"; @@ -18,10 +19,17 @@ import { tableComponentsMigrationMapping } from "./no-deprecated-table-component */ export const noDeprecatedComponentsRule: TSESLint.RuleModule = createNoDeprecatedComponentsRule( "no-deprecated-components", - ["@blueprintjs/core", "@blueprintjs/datetime", "@blueprintjs/select", "@blueprintjs/table"], + [ + "@blueprintjs/core", + "@blueprintjs/datetime", + "@blueprintjs/datetime2", + "@blueprintjs/select", + "@blueprintjs/table", + ], { ...coreComponentsMigrationMapping, ...datetimeComponentsMigrationMapping, + ...datetime2ComponentsMigrationMapping, ...selectComponentsMigrationMapping, ...tableComponentsMigrationMapping, }, diff --git a/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime-components.ts b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime-components.ts index 894d8dc843..592b8f548f 100644 --- a/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime-components.ts +++ b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime-components.ts @@ -7,8 +7,10 @@ import { TSESLint } from "@typescript-eslint/utils"; import { createNoDeprecatedComponentsRule } from "./createNoDeprecatedComponentsRule"; export const datetimeComponentsMigrationMapping = { - // TODO(@adidahiya): Blueprint v6 - // DateTimePicker: "DatePicker", + DateInput: "DateInput3", + DatePicker: "DatePicker3", + DateRangeInput: "DateRangeInput3", + DateRangePicker: "DateRangePicker3", }; /** diff --git a/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime2-components.ts b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime2-components.ts new file mode 100644 index 0000000000..27aac4f78b --- /dev/null +++ b/packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-datetime2-components.ts @@ -0,0 +1,24 @@ +/* + * (c) Copyright 2023 Palantir Technologies Inc. All rights reserved. + */ + +import { TSESLint } from "@typescript-eslint/utils"; + +import { createNoDeprecatedComponentsRule } from "./createNoDeprecatedComponentsRule"; + +export const datetime2ComponentsMigrationMapping = { + DateInput2: "DateInput3", + DateRangeInput2: "DateRangeInput3", +}; + +/** + * This rule is similar to "@blueprintjs/no-deprecated-components", but it only checks for usage + * of deprecated components from @blueprintjs/datetime2. This is useful for incremental migration to + * newer Blueprint APIs. + */ +export const noDeprecatedDatetime2ComponentsRule: TSESLint.RuleModule = + createNoDeprecatedComponentsRule( + "no-deprecated-datetime2-components", + ["@blueprintjs/datetime2"], + datetime2ComponentsMigrationMapping, + ); diff --git a/packages/eslint-plugin/test/no-deprecated-datetime-components.test.ts b/packages/eslint-plugin/test/no-deprecated-datetime-components.test.ts new file mode 100644 index 0000000000..e50091bb72 --- /dev/null +++ b/packages/eslint-plugin/test/no-deprecated-datetime-components.test.ts @@ -0,0 +1,63 @@ +/* + * Copyright 2022 Palantir Technologies, Inc. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// tslint:disable object-literal-sort-keys +/* eslint-disable no-template-curly-in-string */ + +import { TSESLint } from "@typescript-eslint/utils"; +import dedent from "dedent"; + +import { noDeprecatedDatetimeComponentsRule } from "../src/rules/no-deprecated-components"; + +const ruleTester = new TSESLint.RuleTester({ + parser: require.resolve("@typescript-eslint/parser"), + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + sourceType: "module", + }, +}); + +ruleTester.run("no-deprecated-datetime-components", noDeprecatedDatetimeComponentsRule, { + invalid: [ + { + code: dedent` + import { DatePicker } from "@blueprintjs/datetime"; + + return ; + `, + errors: [ + { + messageId: "migration", + data: { + deprecatedComponentName: "DatePicker", + newComponentName: "DatePicker3", + }, + }, + ], + }, + ], + valid: [ + { + code: dedent` + import { DatePicker3 } from "@blueprintjs/datetime2"; + + return ; + `, + }, + ], +}); diff --git a/packages/eslint-plugin/test/no-deprecated-datetime2-components.test.ts b/packages/eslint-plugin/test/no-deprecated-datetime2-components.test.ts new file mode 100644 index 0000000000..d71e477a5f --- /dev/null +++ b/packages/eslint-plugin/test/no-deprecated-datetime2-components.test.ts @@ -0,0 +1,63 @@ +/* + * Copyright 2023 Palantir Technologies, Inc. All rights reserved. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +// tslint:disable object-literal-sort-keys +/* eslint-disable no-template-curly-in-string */ + +import { TSESLint } from "@typescript-eslint/utils"; +import dedent from "dedent"; + +import { noDeprecatedDatetime2ComponentsRule } from "../src/rules/no-deprecated-components"; + +const ruleTester = new TSESLint.RuleTester({ + parser: require.resolve("@typescript-eslint/parser"), + parserOptions: { + ecmaFeatures: { + jsx: true, + }, + sourceType: "module", + }, +}); + +ruleTester.run("no-deprecated-datetime2-components", noDeprecatedDatetime2ComponentsRule, { + invalid: [ + { + code: dedent` + import { DateInput2 } from "@blueprintjs/datetime2"; + + return ; + `, + errors: [ + { + messageId: "migration", + data: { + deprecatedComponentName: "DateInput2", + newComponentName: "DateInput3", + }, + }, + ], + }, + ], + valid: [ + { + code: dedent` + import { DateInput3 } from "@blueprintjs/datetime2"; + + return ; + `, + }, + ], +}); diff --git a/packages/eslint-plugin/test/no-deprecated-select-components.test.ts b/packages/eslint-plugin/test/no-deprecated-select-components.test.ts index c1730e94c4..d9dd6355ff 100644 --- a/packages/eslint-plugin/test/no-deprecated-select-components.test.ts +++ b/packages/eslint-plugin/test/no-deprecated-select-components.test.ts @@ -32,7 +32,7 @@ const ruleTester = new TSESLint.RuleTester({ }, }); -ruleTester.run("no-deprecated-core-components", noDeprecatedSelectComponentsRule, { +ruleTester.run("no-deprecated-select-components", noDeprecatedSelectComponentsRule, { // N.B. most other deprecated components are tested by no-deprecated-components.test.ts, this suite just tests // for more specific violations which involve certain syntax invalid: [],