refactor(fields): expose static method toFieldErrors (#2141)

Author: emmenko

.changeset/seven-icons-smell.md

@@ -0,0 +1,37 @@
+---
+'@commercetools-uikit/async-creatable-select-field': patch
+'@commercetools-uikit/async-select-field': patch
+'@commercetools-uikit/creatable-select-field': patch
+'@commercetools-uikit/date-field': patch
+'@commercetools-uikit/date-range-field': patch
+'@commercetools-uikit/date-time-field': patch
+'@commercetools-uikit/localized-multiline-text-field': patch
+'@commercetools-uikit/localized-text-field': patch
+'@commercetools-uikit/money-field': patch
+'@commercetools-uikit/multiline-text-field': patch
+'@commercetools-uikit/number-field': patch
+'@commercetools-uikit/password-field': patch
+'@commercetools-uikit/radio-field': patch
+'@commercetools-uikit/search-select-field': patch
+'@commercetools-uikit/select-field': patch
+'@commercetools-uikit/text-field': patch
+'@commercetools-uikit/time-field': patch
+---
+
+Expose static method `toFieldErrors` for each `*Field` component.
+
+Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
+
+```ts
+type FormValues = {
+  myField: string,
+};
+
+<TextField
+  // ...
+  name="my-field"
+  errors={
+    TextField.toFieldErrors<FormValues>(formik.errors).myField
+  }
+/>
+```

packages/components/fields/async-creatable-select-field/README.md

@@ -152,3 +152,23 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
 Known error keys are:
 
 - `missing`: tells the user that this field is required
+
+## Static methods
+
+### `AsyncCreatableSelectField.toFieldErrors`
+
+Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
+
+```ts
+type FormValues = {
+  myField: string;
+};
+
+<AsyncCreatableSelectField
+  // ...
+  name="my-field"
+  errors={
+    AsyncCreatableSelectField.toFieldErrors<FormValues>(formik.errors).myField
+  }
+/>;
+```

packages/components/fields/async-creatable-select-field/docs/additional-info.md

@@ -18,3 +18,23 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
 Known error keys are:
 
 - `missing`: tells the user that this field is required
+
+## Static methods
+
+### `AsyncCreatableSelectField.toFieldErrors`
+
+Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
+
+```ts
+type FormValues = {
+  myField: string;
+};
+
+<AsyncCreatableSelectField
+  // ...
+  name="my-field"
+  errors={
+    AsyncCreatableSelectField.toFieldErrors<FormValues>(formik.errors).myField
+  }
+/>;
+```

packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.tsx

@@ -24,9 +24,12 @@ type ReactSelectAsyncCreatableProps = AsyncCreatableProps<
   GroupBase<unknown>
 >;
 
-type TFieldErrors = Record<string, boolean>;
-
 type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
+type TFieldErrors = Record<string, boolean>;
+// Similar shape of `FormikErrors` but values are `TFieldErrors` objects.
+type TCustomFormErrors<Values> = {
+  [K in keyof Values]?: TFieldErrors;
+};
 
 const sequentialId = createSequentialId('async-creatable-select-field-');
 const sequentialErrorsId = createSequentialId(
@@ -386,6 +389,17 @@ export default class AsyncCreatableSelectField extends Component<
     id: getFieldId(props, state, sequentialId),
   });
 
+  /**
+   * Use this function to convert the Formik `errors` object type to
+   * our custom field errors type.
+   * This is primarly useful when using TypeScript.
+   */
+  static toFieldErrors<FormValues>(
+    errors: unknown
+  ): TCustomFormErrors<FormValues> {
+    return errors as TCustomFormErrors<FormValues>;
+  }
+
   render() {
     const hasError =
       AsyncCreatableSelectInput.isTouched(this.props.touched) &&

packages/components/fields/async-select-field/README.md

@@ -145,3 +145,21 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
 Known error keys are:
 
 - `missing`: tells the user that this field is required
+
+## Static methods
+
+### `AsyncSelectField.toFieldErrors`
+
+Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
+
+```ts
+type FormValues = {
+  myField: string;
+};
+
+<AsyncSelectField
+  // ...
+  name="my-field"
+  errors={AsyncSelectField.toFieldErrors<FormValues>(formik.errors).myField}
+/>;
+```

packages/components/fields/async-select-field/docs/additional-info.md

@@ -18,3 +18,21 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
 Known error keys are:
 
 - `missing`: tells the user that this field is required
+
+## Static methods
+
+### `AsyncSelectField.toFieldErrors`
+
+Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
+
+```ts
+type FormValues = {
+  myField: string;
+};
+
+<AsyncSelectField
+  // ...
+  name="my-field"
+  errors={AsyncSelectField.toFieldErrors<FormValues>(formik.errors).myField}
+/>;
+```

packages/components/fields/async-select-field/src/async-select-field.tsx

@@ -22,6 +22,10 @@ import FieldErrors from '@commercetools-uikit/field-errors';
 type ReactSelectAsyncProps = AsyncProps<unknown, boolean, GroupBase<unknown>>;
 type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
 type TFieldErrors = Record<string, boolean>;
+// Similar shape of `FormikErrors` but values are `TFieldErrors` objects.
+type TCustomFormErrors<Values> = {
+  [K in keyof Values]?: TFieldErrors;
+};
 
 type TEvent = {
   target: {
@@ -331,6 +335,17 @@ export default class AsyncSelectField extends Component<
     id: getFieldId(props, state, sequentialId),
   });
 
+  /**
+   * Use this function to convert the Formik `errors` object type to
+   * our custom field errors type.
+   * This is primarly useful when using TypeScript.
+   */
+  static toFieldErrors<FormValues>(
+    errors: unknown
+  ): TCustomFormErrors<FormValues> {
+    return errors as TCustomFormErrors<FormValues>;
+  }
+
   render() {
     const hasError =
       AsyncSelectInput.isTouched(this.props.touched) &&

packages/components/fields/creatable-select-field/README.md

@@ -147,3 +147,21 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
 Known error keys are:
 
 - `missing`: tells the user that this field is required
+
+## Static methods
+
+### `CreatableSelectField.toFieldErrors`
+
+Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
+
+```ts
+type FormValues = {
+  myField: string;
+};
+
+<CreatableSelectField
+  // ...
+  name="my-field"
+  errors={CreatableSelectField.toFieldErrors<FormValues>(formik.errors).myField}
+/>;
+```

packages/components/fields/creatable-select-field/docs/additional-info.md

@@ -18,3 +18,21 @@ When the `key` is known, and when the value is truthy, and when `renderError` re
 Known error keys are:
 
 - `missing`: tells the user that this field is required
+
+## Static methods
+
+### `CreatableSelectField.toFieldErrors`
+
+Use this function to convert the Formik `errors` object type to our custom field errors type. This is primarily useful when using TypeScript.
+
+```ts
+type FormValues = {
+  myField: string;
+};
+
+<CreatableSelectField
+  // ...
+  name="my-field"
+  errors={CreatableSelectField.toFieldErrors<FormValues>(formik.errors).myField}
+/>;
+```

packages/components/fields/creatable-select-field/src/creatable-select-field.tsx

@@ -25,6 +25,10 @@ type ReactSelectCreatableProps = CreatableProps<
 >;
 type TErrorRenderer = (key: string, error?: boolean) => ReactNode;
 type TFieldErrors = Record<string, boolean>;
+// Similar shape of `FormikErrors` but values are `TFieldErrors` objects.
+type TCustomFormErrors<Values> = {
+  [K in keyof Values]?: TFieldErrors;
+};
 type TValue = {
   value: string;
 };
@@ -363,6 +367,17 @@ export default class CreatableSelectField extends Component<
     id: getFieldId(props, state, sequentialId),
   });
 
+  /**
+   * Use this function to convert the Formik `errors` object type to
+   * our custom field errors type.
+   * This is primarly useful when using TypeScript.
+   */
+  static toFieldErrors<FormValues>(
+    errors: unknown
+  ): TCustomFormErrors<FormValues> {
+    return errors as TCustomFormErrors<FormValues>;
+  }
+
   render() {
     const hasError =
       CreatableSelectInput.isTouched(this.props.touched) &&