@transferwise/components 0.0.0-experimental-1d96fa0 → 0.0.0-experimental-2d2d0d9

package/src/loader/Loader.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from '@wise/components-theming';
 import classnames from 'classnames';
-import { ReactElement, useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 import { Size, SizeExtraSmall, SizeSmall, SizeMedium, SizeLarge, SizeExtraLarge } from '../common';
 
@@ -9,7 +9,7 @@ type DeprecatedSize = SizeExtraSmall | SizeLarge | SizeExtraLarge;
 
 type SizeType = SizeSmall | SizeMedium;
 
-type Props = {
+export type LoaderProps = {
   /**
    * @deprecated use `size` instead
    */
@@ -37,7 +37,7 @@ const Loader = ({
   displayInstantly = false,
   classNames = {},
   ...restProps
-}: Props): ReactElement => {
+}: LoaderProps) => {
   const { theme } = useTheme();
   const [hasDebounced, setHasDebounced] = useState(displayInstantly);
 

package/src/loader/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Loader';
+export type { LoaderProps } from './Loader';

package/src/money/{Money.spec.js → Money.spec.tsx}

@@ -11,7 +11,7 @@ describe('Money', () => {
   it('formats the string with amount, currency & the passed in locale', () => {
     const { container } = render(<Money amount={4.98} currency="GBP" />, {
       locale: 'fr',
-      messages: {},
+      messages: undefined,
     });
     expect(container).toHaveTextContent('4,98 GBP');
   });

package/src/money/{Money.js → Money.tsx}

@@ -1,15 +1,14 @@
 import { formatMoney } from '@transferwise/formatting';
-import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-const Money = ({ amount, currency }) => {
+export interface MoneyProps {
+  amount: number;
+  currency: string;
+}
+
+const Money = ({ amount, currency }: MoneyProps) => {
   const { locale } = useIntl();
   return <>{formatMoney(amount, currency, locale)}</>;
 };
 
-Money.propTypes = {
-  amount: PropTypes.number.isRequired,
-  currency: PropTypes.string.isRequired,
-};
-
 export default Money;

package/src/money/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Money';
+export type { MoneyProps } from './Money';

package/src/navigationOptionsList/NavigationOptionsList.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Children } from 'react';
+
+export interface NavigationOptionListProps {
+  children: React.ReactNode;
+}
+
+const NavigationOptionList = ({ children }: NavigationOptionListProps) => {
+  return (
+    <ul className="np-navigation-options-list">
+      {Children.map(children, (child) => (
+        <li key={child?.toString()} className="np-navigation-options-list__item">
+          {child}
+        </li>
+      ))}
+    </ul>
+  );
+};
+
+export default NavigationOptionList;

package/src/navigationOptionsList/index.ts

@@ -0,0 +1,2 @@
+export { default } from './NavigationOptionsList';
+export type { NavigationOptionListProps } from './NavigationOptionsList';

package/src/loader/index.js

@@ -1,3 +0,0 @@
-import Loader from './Loader';
-
-export default Loader;

package/src/money/index.js

@@ -1 +0,0 @@
-export { default } from './Money';

package/src/navigationOptionsList/NavigationOptionsList.js

@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-import { Children } from 'react';
-
-const NavigationOptionList = ({ children }) => {
-  return (
-    <ul className="np-navigation-options-list">
-      {Children.map(children, (child) => (
-        <li key={child.key} className="np-navigation-options-list__item">
-          {child}
-        </li>
-      ))}
-    </ul>
-  );
-};
-
-NavigationOptionList.propTypes = {
-  children: PropTypes.node.isRequired,
-};
-
-export default NavigationOptionList;

package/src/navigationOptionsList/index.js

@@ -1 +0,0 @@
-export { default } from './NavigationOptionsList';