fix(intl message types): update intl message types to use correct typ…

…es from react-intl instead of custom props defined in components
commercetools · Jan 22, 2025 · b6abdf9 · b6abdf9
1 parent 02c89c7
commit b6abdf9
Show file tree

Hide file tree

Showing 15 changed files with 47 additions and 80 deletions.
diff --git a/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx b/packages/components/data-table-manager/src/data-table-settings/data-table-settings.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react';
+import { useState, type ReactNode } from 'react';
 import { warning } from '@commercetools-uikit/utils';
-import { useIntl, type MessageDescriptor } from 'react-intl';
+import { useIntl, type IntlFormatters } from 'react-intl';
 import styled from '@emotion/styled';
 import { ColumnsIcon } from '@commercetools-uikit/icons';
 import Spacings from '@commercetools-uikit/spacings';
@@ -56,7 +56,7 @@ export const getDropdownOptions = ({
   customSettings?: TCustomSettingsProps[];
   columnManagerLabel?: string;
   displaySettingsLabel?: string;
-  formatMessage: (message: MessageDescriptor) => string;
+  formatMessage: IntlFormatters<ReactNode>['formatMessage'];
 }) => {
   return [
     ...(areColumnSettingsEnabled !== undefined

diff --git a/packages/components/data-table-manager/src/settings-container/settings-container.tsx b/packages/components/data-table-manager/src/settings-container/settings-container.tsx
@@ -1,5 +1,6 @@
 import type { KeyboardEvent, MouseEvent, ReactElement, ReactNode } from 'react';
-import { useIntl, type MessageDescriptor } from 'react-intl';
+import { useIntl } from 'react-intl';
+import type { Props as IntlMessage } from 'react-intl/src/components/message';
 import styled from '@emotion/styled';
 import AccessibleButton from '@commercetools-uikit/accessible-button';
 import CollapsibleMotion from '@commercetools-uikit/collapsible-motion';
@@ -9,15 +10,11 @@ import Text from '@commercetools-uikit/text';
 import { CloseIcon } from '@commercetools-uikit/icons';
 import { designTokens } from '@commercetools-uikit/design-system';
 
-export type TIntlMessage = MessageDescriptor & {
-  values?: Record<string, React.ReactNode>;
-};
+export type TIntlMessage = IntlMessage;
 
 type TSettingsContainerProps = {
   title?: TIntlMessage;
-  closeButtonLabel: MessageDescriptor & {
-    values?: Record<string, React.ReactNode>;
-  };
+  closeButtonLabel: IntlMessage;
   onClose: (
     event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>
   ) => void;

diff --git a/packages/components/data-table/README.md b/packages/components/data-table/README.md
@@ -178,7 +178,7 @@ shouldIgnoreRowClick?: boolean;
    */
   shouldIgnoreRowClick?: boolean;
 }
-```
+````
 
 ### Signature `customColumns`
 
@@ -289,4 +289,3 @@ shouldIgnoreRowClick?: boolean;
 ```ts
 (row: Row) => ReactNode;
 ```
-````
diff --git a/packages/components/filters/README.md b/packages/components/filters/README.md
@@ -24,11 +24,11 @@ npm --save install @commercetools-uikit/filters
 Additionally install the peer dependencies (if not present)
 
 ```
-yarn add react
+yarn add react react-dom
 ```
 
 ```
-npm --save install react
+npm --save install react react-dom
 ```
 
 ## Usage

diff --git a/packages/components/inputs/input-utils/src/localized-input-toggle/localized-input-toggle.tsx b/packages/components/inputs/input-utils/src/localized-input-toggle/localized-input-toggle.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import type { MessageDescriptor } from 'react-intl';
+import type { Props as IntlMessage } from 'react-intl/src/components/message';
 import { MouseEvent, KeyboardEvent, ReactElement } from 'react';
 import { useIntl } from 'react-intl';
 import FlatButton from '@commercetools-uikit/flat-button';
@@ -16,8 +16,8 @@ export type TLocalizedInputToggleProps = {
       | boolean
   ) => void;
   isDisabled?: boolean;
-  showMessage?: string | MessageDescriptor;
-  hideMessage?: string | MessageDescriptor;
+  showMessage?: string | IntlMessage;
+  hideMessage?: string | IntlMessage;
   remainingLocalizations?: number;
 };
 

diff --git a/packages/components/inputs/localized-text-input/src/localized-text-input.tsx b/packages/components/inputs/localized-text-input/src/localized-text-input.tsx
@@ -5,7 +5,8 @@ import {
   type ReactNode,
   useCallback,
 } from 'react';
-import { FormattedMessage, type MessageDescriptor } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
+import type { Props as IntlMessage } from 'react-intl/src/components/message';
 import { css } from '@emotion/react';
 import { useFieldId, useToggleState } from '@commercetools-uikit/hooks';
 import {
@@ -150,14 +151,7 @@ export type TLocalizedTextInputProps = {
       es: 'Algún valor',
     }
    */
-  additionalInfo?: Record<
-    string,
-    | string
-    | ReactNode
-    | (MessageDescriptor & {
-        values: Record<string, ReactNode>;
-      })
-  >;
+  additionalInfo?: Record<string, string | ReactNode | IntlMessage>;
 };
 
 export type TLocalizedInputProps = {

diff --git a/packages/components/label/src/label.tsx b/packages/components/label/src/label.tsx
@@ -1,4 +1,4 @@
-import type { MessageDescriptor } from 'react-intl';
+import type { Props as IntlMessage } from 'react-intl/src/components/message';
 
 import { Children, type ReactNode } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -46,15 +46,13 @@ export type TLabelProps = {
   // Indicates the tone to be applied to the label
   tone?: 'primary' | 'inverted';
   /**
-   * A `MessageDescriptor` rendered `children` to `Label`.
+   * An `IntlMessage` object rendered `children` to `Label`.
    * <br />
    * When a value is provided, `intlMessage` will be rendered instead of `children`
    * <br />
    * This is required when `children` is `undefined` and vice versa
    */
-  intlMessage?: MessageDescriptor & {
-    values?: Record<string, ReactNode>;
-  };
+  intlMessage?: IntlMessage;
   /**
    * Rendered as `children` to `Label`.
    * <br />

diff --git a/packages/components/link/src/link.tsx b/packages/components/link/src/link.tsx
@@ -1,5 +1,5 @@
 import type { LocationDescriptor } from 'history';
-import type { MessageDescriptor } from 'react-intl';
+import type { Props as IntlMessage } from 'react-intl/src/components/message';
 import {
   Children,
   type ReactNode,
@@ -26,9 +26,7 @@ export type TLinkProps = {
    * <br />
    * Required if `children` is not provided.
    */
-  intlMessage?: MessageDescriptor & {
-    values?: Record<string, ReactNode>;
-  };
+  intlMessage?: IntlMessage;
   /**
    * A flag to indicate if the Link points to an external source.
    * <bt />

diff --git a/packages/components/messages/src/additional-info-message/additional-info-message.tsx b/packages/components/messages/src/additional-info-message/additional-info-message.tsx
@@ -1,12 +1,8 @@
 import { ReactNode } from 'react';
+import type { Props as IntlMessage } from 'react-intl/src/components/message';
 import Text from '@commercetools-uikit/text';
 
-export type TIntlMessageDescriptor = {
-  id: string;
-  description?: string | object;
-  defaultMessage: string;
-  values?: Record<string, ReactNode>;
-};
+export type TIntlMessageDescriptor = IntlMessage;
 
 export type TAdditionalInfoMessageProps = {
   id?: string;
@@ -27,7 +23,7 @@ const AdditionalInfoMessage = (props: TAdditionalInfoMessageProps) => {
 
   return (
     <Text.Detail id={props.id} tone="tertiary">
-      {props.message}
+      {props.message as ReactNode}
     </Text.Detail>
   );
 };

diff --git a/packages/components/messages/src/error-message/error-message.tsx b/packages/components/messages/src/error-message/error-message.tsx
@@ -1,13 +1,10 @@
 import { ReactNode } from 'react';
+import type { Props as IntlMessage } from 'react-intl/src/components/message';
+
 import Text from '@commercetools-uikit/text';
 import { filterDataAttributes } from '@commercetools-uikit/utils';
 
-export type TIntlMessageDescriptor = {
-  id: string;
-  description?: string | object;
-  defaultMessage: string;
-  values?: Record<string, ReactNode>;
-};
+export type TIntlMessageDescriptor = IntlMessage;
 
 export type TErrorMessageProps = {
   id?: string;

diff --git a/packages/components/messages/src/warning-message/warning-message.tsx b/packages/components/messages/src/warning-message/warning-message.tsx
@@ -1,12 +1,8 @@
 import { ReactNode } from 'react';
+import type { Props as IntlMessage } from 'react-intl/src/components/message';
 import Text from '@commercetools-uikit/text';
 
-export type TIntlMessageDescriptor = {
-  id: string;
-  description?: string | object;
-  defaultMessage: string;
-  values?: Record<string, ReactNode>;
-};
+export type TIntlMessageDescriptor = IntlMessage;
 
 export type TWarningMessageProps = {
   id?: string;

diff --git a/packages/components/notifications/src/content-notification/content-notification.tsx b/packages/components/notifications/src/content-notification/content-notification.tsx
@@ -1,5 +1,4 @@
-import type { MessageDescriptor } from 'react-intl';
-
+import type { Props as IntlMessage } from 'react-intl/src/components/message';
 import {
   Children,
   type ReactNode,
@@ -30,9 +29,7 @@ export type TContentNotificationProps = {
    * <br />
    * Required if `children` is not provided.
    */
-  intlMessage?: MessageDescriptor & {
-    values?: Record<string, ReactNode>;
-  };
+  intlMessage?: IntlMessage;
 
   /**
    * When provided, a close button will be rendered and this callback will be

diff --git a/packages/components/progress-bar/README.md b/packages/components/progress-bar/README.md
@@ -39,13 +39,13 @@ export default Example;
 
 ## Properties
 
-| Props           | Type                                                                                                                          | Required | Default                    | Description                                                                                          |
-| --------------- | ----------------------------------------------------------------------------------------------------------------------------- | :------: | -------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `progress`      | `number`                                                                                                                      |          | `0`                        | The percentage of the task completion to fill the bar.                                               |
-| `label`         | `union`<br/>Possible values:<br/>`, string, ReactElement, (MessageDescriptor & { values?: Record<string, ReactNode> }), null` |          | `null`                     | The text to display alongside the bar.                                                               |
-| `labelPosition` | `union`<br/>Possible values:<br/>`'top' , 'bottom' , 'left' , 'right'`                                                        |          | `'top'`                    | Location of the text in relation to the bar.                                                         |
-| `labelWidth`    | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'`                                  |          | `defaultStyles.labelWidth` | The scale of the width for the label, uses values available in the Constraints.Horizontal component. |
-| `isInverted`    | `boolean`                                                                                                                     |          | `false`                    | Specifies the use of light colors(default) or dark colors.                                           |
-| `isAnimated`    | `boolean`                                                                                                                     |          | `true`                     | Specifies whether the inner bar should have the styles animated.                                     |
-| `height`        | `union`<br/>Possible values:<br/>`'10' , '20'`                                                                                |          | `defaultStyles.height`     | The scale of the height for the bar, also affects the styles of the label.                           |
-| `barWidth`      | `union`<br/>Possible values:<br/>`4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale'`                         |          | `6`                        | The scale of the width for the label, uses values available in the Constraints.Horizontal component. |
+| Props           | Type                                                                                                  | Required | Default                    | Description                                                                                          |
+| --------------- | ----------------------------------------------------------------------------------------------------- | :------: | -------------------------- | ---------------------------------------------------------------------------------------------------- |
+| `progress`      | `number`                                                                                              |          | `0`                        | The percentage of the task completion to fill the bar.                                               |
+| `label`         | `union`<br/>Possible values:<br/>`string , ReactElement , IntlMessage , null`                         |          | `null`                     | The text to display alongside the bar.                                                               |
+| `labelPosition` | `union`<br/>Possible values:<br/>`'top' , 'bottom' , 'left' , 'right'`                                |          | `'top'`                    | Location of the text in relation to the bar.                                                         |
+| `labelWidth`    | `union`<br/>Possible values:<br/>`, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'`          |          | `defaultStyles.labelWidth` | The scale of the width for the label, uses values available in the Constraints.Horizontal component. |
+| `isInverted`    | `boolean`                                                                                             |          | `false`                    | Specifies the use of light colors(default) or dark colors.                                           |
+| `isAnimated`    | `boolean`                                                                                             |          | `true`                     | Specifies whether the inner bar should have the styles animated.                                     |
+| `height`        | `union`<br/>Possible values:<br/>`'10' , '20'`                                                        |          | `defaultStyles.height`     | The scale of the height for the bar, also affects the styles of the label.                           |
+| `barWidth`      | `union`<br/>Possible values:<br/>`4 , 5 , 6 , 7 , 8 , 9 , 10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale'` |          | `6`                        | The scale of the width for the label, uses values available in the Constraints.Horizontal component. |
diff --git a/packages/components/progress-bar/src/progress-bar.tsx b/packages/components/progress-bar/src/progress-bar.tsx
@@ -1,5 +1,6 @@
 import type { ReactElement, ReactNode } from 'react';
-import { FormattedMessage, type MessageDescriptor } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
+import type { Props as IntlMessage } from 'react-intl/src/components/message';
 import { filterAriaAttributes } from '@commercetools-uikit/utils';
 import Constraints from '@commercetools-uikit/constraints';
 import SpacingsInline from '@commercetools-uikit/spacings-inline';
@@ -21,11 +22,7 @@ export type TProgressBarProps = {
   /**
    * The text to display alongside the bar.
    */
-  label?:
-    | string
-    | ReactElement
-    | (MessageDescriptor & { values?: Record<string, ReactNode> })
-    | null;
+  label?: string | ReactElement | IntlMessage | null;
   /**
    * Location of the text in relation to the bar.
    */
@@ -80,7 +77,7 @@ const ProgressBarLabel = (
     as: props.height !== '10' ? 'span' : undefined,
     fontWegith: props.height !== '10' ? 'medium' : undefined,
     children: props.label.hasOwnProperty('defaultMessage') ? (
-      <FormattedMessage {...(props.label as MessageDescriptor)} />
+      <FormattedMessage {...(props.label as IntlMessage)} />
     ) : (
       (props.label as ReactNode)
     ),

diff --git a/packages/components/text/src/text.tsx b/packages/components/text/src/text.tsx
@@ -1,4 +1,4 @@
-import type { MessageDescriptor } from 'react-intl';
+import type { Props as IntlMessage } from 'react-intl/src/components/message';
 
 import { Children, ReactNode } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -26,9 +26,7 @@ export type TFontWeight = 'regular' | 'medium' | 'bold';
 
 export type TBasicTextProps = {
   id?: string;
-  intlMessage?: MessageDescriptor & {
-    values?: Record<string, React.ReactNode>;
-  };
+  intlMessage?: IntlMessage;
   children?: ReactNode;
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -178,7 +178,7 @@ shouldIgnoreRowClick?: boolean; @@
        */
       shouldIgnoreRowClick?: boolean;
     }
-    ```
+    ````
     ### Signature `customColumns`
@@ Expand Down Expand Up / @@ -289,4 +289,3 @@ shouldIgnoreRowClick?: boolean; @@
     ```ts
     (row: Row) => ReactNode;
     ```
-    ````