Deprecate FinalForm components

For components where a Field component exists as a simpler alternative.
vivid-planet · Aug 14, 2024 · 5d5c935 · 5d5c935
1 parent b1bbd6a
commit 5d5c935
Show file tree

Hide file tree

Showing 15 changed files with 106 additions and 0 deletions.
diff --git a/.changeset/chatty-deers-design.md b/.changeset/chatty-deers-design.md
@@ -0,0 +1,22 @@
+---
+"@comet/admin-color-picker": patch
+"@comet/admin-date-time": patch
+"@comet/admin": patch
+---
+
+Deprecate FinalForm components where a Field component exists as a simpler alternative
+
+-   Use `<AutocompleteField />` instead of `<Field component={FinalFormAutocomplete} />`
+-   Use `<CheckboxField />` instead of `<Field />` with `<FormControlLabel />` and `<FinalFormCheckbox />`
+-   Use `<AsyncAutocompleteField />` instead of `<Field component={FinalFormAsyncAutocomplete} />`
+-   Use `<AsyncSelectField />` instead of `<Field component={FinalFormAsyncSelect} />`
+-   Use `<NumberField />` instead of `<Field component={FinalFormNumberInput} />`
+-   Use `<SearchField />` instead of `<Field component={FinalFormSearchTextField} />`
+-   Use `<SelectField />` instead of `<Field />` with `<FinalFormSelect />`
+-   Use `<SwitchField />` instead of `<Field />` with `<FormControlLabel />` and `<FinalFormSwitch />`
+-   Use `<DateField />` instead of `<Field component={FinalFormDatePicker} />`
+-   Use `<DateRangeField />` instead of `<Field component={FinalFormDateRangePicker} />`
+-   Use `<DateTimeField />` instead of `<Field component={FinalFormDateTimePicker} />`
+-   Use `<TimeField />` instead of `<Field component={FinalFormTimePicker} />`
+-   Use `<TimeRangeField />` instead of `<Field component={FinalFormTimeRangePicker} />`
+-   Use `<ColorField />` instead of `<Field component={FinalFormColorPicker} />`
diff --git a/packages/admin/admin-color-picker/src/FinalFormColorPicker.tsx b/packages/admin/admin-color-picker/src/FinalFormColorPicker.tsx
@@ -3,8 +3,14 @@ import { FieldRenderProps } from "react-final-form";
 
 import { ColorPicker, ColorPickerProps } from "./ColorPicker";
 
+/**
+ * @deprecated Use `<ColorField />` instead of `<Field component={FinalFormColorPicker} />`
+ */
 export type FinalFormColorPickerProps = ColorPickerProps & FieldRenderProps<string, HTMLInputElement | HTMLTextAreaElement>;
 
+/**
+ * @deprecated Use `<ColorField />` instead of `<Field component={FinalFormColorPicker} />`
+ */
 export const FinalFormColorPicker = ({ meta, input, ...restProps }: FinalFormColorPickerProps): React.ReactElement => {
     return <ColorPicker {...input} {...restProps} />;
 };
diff --git a/packages/admin/admin-date-time/src/datePicker/FinalFormDatePicker.tsx b/packages/admin/admin-date-time/src/datePicker/FinalFormDatePicker.tsx
@@ -3,8 +3,14 @@ import { FieldRenderProps } from "react-final-form";
 
 import { DatePicker, DatePickerProps } from "./DatePicker";
 
+/**
+ * @deprecated Use `<DateField />` instead of `<Field component={FinalFormDatePicker} />`
+ */
 export type FinalFormDatePickerProps = DatePickerProps & FieldRenderProps<string, HTMLInputElement | HTMLTextAreaElement>;
 
+/**
+ * @deprecated Use `<DateField />` instead of `<Field component={FinalFormDatePicker} />`
+ */
 export const FinalFormDatePicker = ({ meta, input, ...restProps }: FinalFormDatePickerProps): React.ReactElement => {
     return <DatePicker {...input} {...restProps} />;
 };
diff --git a/packages/admin/admin-date-time/src/dateRangePicker/FinalFormDateRangePicker.tsx b/packages/admin/admin-date-time/src/dateRangePicker/FinalFormDateRangePicker.tsx
@@ -3,8 +3,14 @@ import { FieldRenderProps } from "react-final-form";
 
 import { DateRange, DateRangePicker, DateRangePickerProps } from "./DateRangePicker";
 
+/**
+ * @deprecated Use `<DateRangeField />` instead of `<Field component={FinalFormDateRangePicker} />`
+ */
 export type FinalFormDateRangePickerProps = DateRangePickerProps & FieldRenderProps<DateRange, HTMLInputElement | HTMLTextAreaElement>;
 
+/**
+ * @deprecated Use `<DateRangeField />` instead of `<Field component={FinalFormDateRangePicker} />`
+ */
 export const FinalFormDateRangePicker = ({ meta, input, ...restProps }: FinalFormDateRangePickerProps): React.ReactElement => {
     return <DateRangePicker {...input} {...restProps} />;
 };
diff --git a/packages/admin/admin-date-time/src/dateTimePicker/FinalFormDateTimePicker.tsx b/packages/admin/admin-date-time/src/dateTimePicker/FinalFormDateTimePicker.tsx
@@ -3,8 +3,14 @@ import { FieldRenderProps } from "react-final-form";
 
 import { DateTimePicker, DateTimePickerProps } from "./DateTimePicker";
 
+/**
+ * @deprecated Use `<DateTimeField />` instead of `<Field component={FinalFormDateTimePicker} />`
+ */
 export type FinalFormDateTimePickerProps = DateTimePickerProps & FieldRenderProps<Date, HTMLInputElement | HTMLTextAreaElement>;
 
+/**
+ * @deprecated Use `<DateTimeField />` instead of `<Field component={FinalFormDateTimePicker} />`
+ */
 export const FinalFormDateTimePicker = ({ meta, input, ...restProps }: FinalFormDateTimePickerProps): React.ReactElement => {
     return <DateTimePicker {...input} {...restProps} />;
 };
diff --git a/packages/admin/admin-date-time/src/timePicker/FinalFormTimePicker.tsx b/packages/admin/admin-date-time/src/timePicker/FinalFormTimePicker.tsx
@@ -3,8 +3,14 @@ import { FieldRenderProps } from "react-final-form";
 
 import { TimePicker, TimePickerProps } from "./TimePicker";
 
+/**
+ * @deprecated Use `<TimeField />` instead of `<Field component={FinalFormTimePicker} />`
+ */
 export type FinalFormTimePickerProps = TimePickerProps & FieldRenderProps<string, HTMLInputElement | HTMLTextAreaElement>;
 
+/**
+ * @deprecated Use `<TimeField />` instead of `<Field component={FinalFormTimePicker} />`
+ */
 export const FinalFormTimePicker = ({ meta, input, ...restProps }: FinalFormTimePickerProps): React.ReactElement => {
     return <TimePicker {...input} {...restProps} />;
 };
diff --git a/packages/admin/admin-date-time/src/timeRangePicker/FinalFormTimeRangePicker.tsx b/packages/admin/admin-date-time/src/timeRangePicker/FinalFormTimeRangePicker.tsx
@@ -3,8 +3,14 @@ import { FieldRenderProps } from "react-final-form";
 
 import { TimeRange, TimeRangePicker, TimeRangePickerProps } from "./TimeRangePicker";
 
+/**
+ * @deprecated Use `<TimeRangeField />` instead of `<Field component={FinalFormTimeRangePicker} />`
+ */
 export type FinalFormTimeRangePickerProps = TimeRangePickerProps & FieldRenderProps<TimeRange, HTMLInputElement | HTMLTextAreaElement>;
 
+/**
+ * @deprecated Use `<TimeRangeField />` instead of `<Field component={FinalFormTimeRangePicker} />`
+ */
 export const FinalFormTimeRangePicker = ({ meta, input, ...restProps }: FinalFormTimeRangePickerProps): React.ReactElement => {
     return <TimeRangePicker {...input} {...restProps} />;
 };
diff --git a/packages/admin/admin/src/form/Autocomplete.tsx b/packages/admin/admin/src/form/Autocomplete.tsx
@@ -6,6 +6,9 @@ import { FieldRenderProps } from "react-final-form";
 import { ClearInputAdornment } from "../common/ClearInputAdornment";
 import { AsyncOptionsProps } from "../hooks/useAsyncOptionsProps";
 
+/**
+ * @deprecated Use `<AutocompleteField />` instead of `<Field component={FinalFormAutocomplete} />`
+ */
 export type FinalFormAutocompleteProps<
     T extends Record<string, any>,
     Multiple extends boolean | undefined,
@@ -17,6 +20,9 @@ export type FinalFormAutocompleteProps<
         clearable?: boolean;
     };
 
+/**
+ * @deprecated Use `<AutocompleteField />` instead of `<Field component={FinalFormAutocomplete} />`
+ */
 export const FinalFormAutocomplete = <
     T extends Record<string, any>,
     Multiple extends boolean | undefined,

diff --git a/packages/admin/admin/src/form/Checkbox.tsx b/packages/admin/admin/src/form/Checkbox.tsx
@@ -2,8 +2,14 @@ import MuiCheckbox, { CheckboxProps } from "@mui/material/Checkbox";
 import * as React from "react";
 import { FieldRenderProps } from "react-final-form";
 
+/**
+ * @deprecated Use `<CheckboxField />` instead of `<Field />` with `<FormControlLabel />` and `<FinalFormCheckbox />`
+ */
 export type FinalFormCheckboxProps = FieldRenderProps<string, HTMLInputElement> & CheckboxProps;
 
+/**
+ * @deprecated Use `<CheckboxField />` instead of `<Field />` with `<FormControlLabel />` and `<FinalFormCheckbox />`
+ */
 export const FinalFormCheckbox = ({
     input: { checked, name, onChange, ...restInput },
     meta,

diff --git a/packages/admin/admin/src/form/FinalFormAsyncAutocomplete.tsx b/packages/admin/admin/src/form/FinalFormAsyncAutocomplete.tsx
@@ -3,6 +3,9 @@ import React from "react";
 import { useAsyncOptionsProps } from "../hooks/useAsyncOptionsProps";
 import FinalFormAutocomplete, { FinalFormAutocompleteProps } from "./Autocomplete";
 
+/**
+ * @deprecated Use `<AsyncAutocompleteField />` instead of `<Field component={FinalFormAsyncAutocomplete} />`
+ */
 export interface FinalFormAsyncAutocompleteProps<
     T extends Record<string, any>,
     Multiple extends boolean | undefined,
@@ -12,6 +15,9 @@ export interface FinalFormAsyncAutocompleteProps<
     loadOptions: () => Promise<T[]>;
 }
 
+/**
+ * @deprecated Use `<AsyncAutocompleteField />` instead of `<Field component={FinalFormAsyncAutocomplete} />`
+ */
 export function FinalFormAsyncAutocomplete<
     T extends Record<string, any>,
     Multiple extends boolean | undefined,

diff --git a/packages/admin/admin/src/form/FinalFormAsyncSelect.tsx b/packages/admin/admin/src/form/FinalFormAsyncSelect.tsx
@@ -4,10 +4,16 @@ import React from "react";
 import { useAsyncOptionsProps } from "../hooks/useAsyncOptionsProps";
 import { FinalFormSelect, FinalFormSelectProps } from "./FinalFormSelect";
 
+/**
+ * @deprecated Use `<AsyncSelectField />` instead of `<Field component={FinalFormAsyncSelect} />`
+ */
 export interface FinalFormAsyncSelectProps<T> extends FinalFormSelectProps<T>, Omit<SelectProps, "input"> {
     loadOptions: () => Promise<T[]>;
 }
 
+/**
+ * @deprecated Use `<AsyncSelectField />` instead of `<Field component={FinalFormAsyncSelect} />`
+ */
 export function FinalFormAsyncSelect<T>({ loadOptions, ...rest }: FinalFormAsyncSelectProps<T>) {
     return <FinalFormSelect<T> {...useAsyncOptionsProps(loadOptions)} {...rest} />;
 }
diff --git a/packages/admin/admin/src/form/FinalFormNumberInput.tsx b/packages/admin/admin/src/form/FinalFormNumberInput.tsx
@@ -5,12 +5,18 @@ import { useIntl } from "react-intl";
 
 import { ClearInputAdornment } from "../common/ClearInputAdornment";
 
+/**
+ * @deprecated Use `<NumberField />` instead of `<Field component={FinalFormNumberInput} />`
+ */
 export type FinalFormNumberInputProps = InputBaseProps &
     FieldRenderProps<number> & {
         clearable?: boolean;
         decimals?: number;
     };
 
+/**
+ * @deprecated Use `<NumberField />` instead of `<Field component={FinalFormNumberInput} />`
+ */
 export function FinalFormNumberInput({
     meta,
     input,

diff --git a/packages/admin/admin/src/form/FinalFormSearchTextField.tsx b/packages/admin/admin/src/form/FinalFormSearchTextField.tsx
@@ -7,11 +7,17 @@ import { useIntl } from "react-intl";
 import { ClearInputAdornment } from "../common/ClearInputAdornment";
 import { FinalFormInput, FinalFormInputProps } from "./FinalFormInput";
 
+/**
+ * @deprecated Use `<SearchField />` instead of `<Field component={FinalFormSearchTextField} />`
+ */
 export interface FinalFormSearchTextFieldProps extends FinalFormInputProps {
     icon?: React.ReactNode;
     clearable?: boolean;
 }
 
+/**
+ * @deprecated Use `<SearchField />` instead of `<Field component={FinalFormSearchTextField} />`
+ */
 export function FinalFormSearchTextField(inProps: FinalFormSearchTextFieldProps) {
     const {
         icon = <Search />,

diff --git a/packages/admin/admin/src/form/FinalFormSelect.tsx b/packages/admin/admin/src/form/FinalFormSelect.tsx
@@ -6,13 +6,19 @@ import { FormattedMessage } from "react-intl";
 import { ClearInputAdornment } from "../common/ClearInputAdornment";
 import { AsyncOptionsProps } from "../hooks/useAsyncOptionsProps";
 
+/**
+ * @deprecated Use `<SelectField />` instead of `<Field />` with `<FinalFormSelect />`
+ */
 export interface FinalFormSelectProps<T> extends FieldRenderProps<T, HTMLInputElement | HTMLTextAreaElement> {
     getOptionLabel?: (option: T) => string;
     getOptionValue?: (option: T) => string;
     children?: React.ReactNode;
     required?: boolean;
 }
 
+/**
+ * @deprecated Use `<SelectField />` instead of `<Field />` with `<FinalFormSelect />`
+ */
 export const FinalFormSelect = <T,>({
     input: { checked, value, name, onChange, onFocus, onBlur, ...restInput },
     meta,

diff --git a/packages/admin/admin/src/form/Switch.tsx b/packages/admin/admin/src/form/Switch.tsx
@@ -2,8 +2,14 @@ import MuiSwitch, { SwitchProps } from "@mui/material/Switch";
 import * as React from "react";
 import { FieldRenderProps } from "react-final-form";
 
+/**
+ * @deprecated Use `<SwitchField />` instead of `<Field />` with `<FormControlLabel />` and `<FinalFormSwitch />`
+ */
 export type FinalFormSwitchProps = SwitchProps & FieldRenderProps<string, HTMLInputElement>;
 
+/**
+ * @deprecated Use `<SwitchField />` instead of `<Field />` with `<FormControlLabel />` and `<FinalFormSwitch />`
+ */
 export const FinalFormSwitch = ({ input: { checked, name, onChange, ...restInput }, meta, ...rest }: FinalFormSwitchProps): React.ReactElement => {
     return <MuiSwitch {...rest} name={name} inputProps={restInput} onChange={onChange} checked={checked} />;
 };