From ff0c54f349b6f790c2dbd4c537d531a1a2f8c3d8 Mon Sep 17 00:00:00 2001
From: ruben-rebelo <ruben.rato96@gmail.com>
Date: Mon, 11 Mar 2024 15:41:47 +0000
Subject: [PATCH 1/3] [TS migration] Migrate AddressSearch, Banner, Button and
 ButtonWithDropdownMenu stories to typescript

---
 src/components/AddressSearch/index.tsx        |  1 +
 src/components/AddressSearch/types.ts         |  2 +-
 src/components/Banner.tsx                     |  1 +
 src/components/Button/index.tsx               |  1 +
 ...h.stories.js => AddressSearch.stories.tsx} | 20 ++++++++++++-------
 .../{Banner.stories.js => Banner.stories.tsx} | 12 +++++++----
 .../{Button.stories.js => Button.stories.tsx} | 18 ++++++++++-------
 ....js => ButtonWithDropdownMenu.stories.tsx} | 16 +++++++++------
 8 files changed, 46 insertions(+), 25 deletions(-)
 rename src/stories/{AddressSearch.stories.js => AddressSearch.stories.tsx} (53%)
 rename src/stories/{Banner.stories.js => Banner.stories.tsx} (75%)
 rename src/stories/{Button.stories.js => Button.stories.tsx} (80%)
 rename src/stories/{ButtonWithDropdownMenu.stories.js => ButtonWithDropdownMenu.stories.tsx} (57%)

diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx
index a2e3f5d9948e..1eebff7b5bfa 100644
--- a/src/components/AddressSearch/index.tsx
+++ b/src/components/AddressSearch/index.tsx
@@ -455,3 +455,4 @@ function AddressSearch(
 AddressSearch.displayName = 'AddressSearchWithRef';
 
 export default forwardRef(AddressSearch);
+export type {AddressSearchProps};
diff --git a/src/components/AddressSearch/types.ts b/src/components/AddressSearch/types.ts
index 27e068cd1777..efbcc6374341 100644
--- a/src/components/AddressSearch/types.ts
+++ b/src/components/AddressSearch/types.ts
@@ -96,4 +96,4 @@ type AddressSearchProps = {
 
 type IsCurrentTargetInsideContainerType = (event: FocusEvent | NativeSyntheticEvent<TextInputFocusEventData>, containerRef: RefObject<View | HTMLElement>) => boolean;
 
-export type {CurrentLocationButtonProps, AddressSearchProps, RenamedInputKeysProps, IsCurrentTargetInsideContainerType};
+export type {CurrentLocationButtonProps, AddressSearchProps, RenamedInputKeysProps, IsCurrentTargetInsideContainerType, StreetValue};
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index 56fe7c4d0b42..b4bdfa8405fa 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -109,3 +109,4 @@ function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRend
 Banner.displayName = 'Banner';
 
 export default memo(Banner);
+export type {BannerProps}
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index ca1bc391e800..b11e16e47f6e 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -348,3 +348,4 @@ function Button(
 Button.displayName = 'Button';
 
 export default withNavigationFallback(React.forwardRef(Button));
+export type {ButtonProps};
diff --git a/src/stories/AddressSearch.stories.js b/src/stories/AddressSearch.stories.tsx
similarity index 53%
rename from src/stories/AddressSearch.stories.js
rename to src/stories/AddressSearch.stories.tsx
index 8b9223bc5ea2..a648a20c0bfa 100644
--- a/src/stories/AddressSearch.stories.js
+++ b/src/stories/AddressSearch.stories.tsx
@@ -1,12 +1,17 @@
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React, {useState} from 'react';
+import type {AddressSearchProps} from '@components/AddressSearch';
 import AddressSearch from '@components/AddressSearch';
+import type {RenamedInputKeysProps, StreetValue} from '@components/AddressSearch/types';
+
+type AddressSearchStory = ComponentStory<typeof AddressSearch>;
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-export default {
+const story: ComponentMeta<typeof AddressSearch> = {
     title: 'Components/AddressSearch',
     component: AddressSearch,
     args: {
@@ -15,12 +20,12 @@ export default {
     },
 };
 
-function Template(args) {
-    const [value, setValue] = useState('');
+function Template(args: AddressSearchProps) {
+    const [value, setValue] = useState<string | number | RenamedInputKeysProps | StreetValue>('');
     return (
         <AddressSearch
-            value={value}
-            onInputChange={({street}) => setValue(street)}
+            value={value as string}
+            onInputChange={(inputValue) => setValue(inputValue)}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...args}
         />
@@ -29,11 +34,12 @@ function Template(args) {
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
+const Default: AddressSearchStory = Template.bind({});
 
-const ErrorStory = Template.bind({});
+const ErrorStory: AddressSearchStory = Template.bind({});
 ErrorStory.args = {
     errorText: 'The street you are looking for does not exist',
 };
 
+export default story;
 export {Default, ErrorStory};
diff --git a/src/stories/Banner.stories.js b/src/stories/Banner.stories.tsx
similarity index 75%
rename from src/stories/Banner.stories.js
rename to src/stories/Banner.stories.tsx
index 3a6f454843d1..6e71979a88a8 100644
--- a/src/stories/Banner.stories.js
+++ b/src/stories/Banner.stories.tsx
@@ -1,6 +1,10 @@
+import type {ComponentStory} from '@storybook/react';
 import React from 'react';
+import type {BannerProps} from '@components/Banner';
 import Banner from '@components/Banner';
 
+type BannerStory = ComponentStory<typeof Banner>;
+
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
@@ -11,25 +15,25 @@ const story = {
     component: Banner,
 };
 
-function Template(args) {
+function Template(args: BannerProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     return <Banner {...args} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const InfoBanner = Template.bind({});
+const InfoBanner: BannerStory = Template.bind({});
 InfoBanner.args = {
     text: 'This is an informational banner',
 };
 
-const HTMLBanner = Template.bind({});
+const HTMLBanner: BannerStory = Template.bind({});
 HTMLBanner.args = {
     text: 'This is a informational banner containing <strong><em>HTML</em></strong>',
     shouldRenderHTML: true,
 };
 
-const BannerWithLink = Template.bind({});
+const BannerWithLink: BannerStory = Template.bind({});
 BannerWithLink.args = {
     text: 'This is a informational banner containing <a href="https://new.expensify.com/settings">internal Link</a> and <a href=" https://google.com">public link</a>',
     shouldRenderHTML: true,
diff --git a/src/stories/Button.stories.js b/src/stories/Button.stories.tsx
similarity index 80%
rename from src/stories/Button.stories.js
rename to src/stories/Button.stories.tsx
index 2bf254b9f382..0ad1fc57b8df 100644
--- a/src/stories/Button.stories.js
+++ b/src/stories/Button.stories.tsx
@@ -1,29 +1,33 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import type {ComponentMeta, ComponentStory} from '@storybook/react';
 import React, {useCallback, useState} from 'react';
 import {View} from 'react-native';
+import type {ButtonProps} from '@components/Button';
 import Button from '@components/Button';
 import Text from '@components/Text';
 
+type ButtonStory = ComponentStory<typeof Button>;
+
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
  *
  * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
  */
-const story = {
+const story: ComponentMeta<typeof Button> = {
     title: 'Components/Button',
     component: Button,
 };
 
-function Template(args) {
+function Template(args: ButtonProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     return <Button {...args} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
-const Loading = Template.bind({});
-function PressOnEnter(props) {
+const Default: ButtonStory = Template.bind({});
+const Loading: ButtonStory = Template.bind({});
+function PressOnEnter(props: ButtonProps) {
     const [text, setText] = useState('');
     const onPress = useCallback(() => {
         setText('Button Pressed!');
@@ -33,13 +37,13 @@ function PressOnEnter(props) {
         <Button
             {...props}
             // eslint-disable-next-line react/prop-types
-            text={text || props.text}
+            text={text}
             onPress={onPress}
         />
     );
 }
 
-function PressOnEnterWithBubbling(props) {
+function PressOnEnterWithBubbling(props: ButtonProps) {
     return (
         <>
             <Text>Both buttons will trigger on press of Enter as the Enter event will bubble across all instances of button.</Text>
diff --git a/src/stories/ButtonWithDropdownMenu.stories.js b/src/stories/ButtonWithDropdownMenu.stories.tsx
similarity index 57%
rename from src/stories/ButtonWithDropdownMenu.stories.js
rename to src/stories/ButtonWithDropdownMenu.stories.tsx
index b87bdc321d45..720e1de4370f 100644
--- a/src/stories/ButtonWithDropdownMenu.stories.js
+++ b/src/stories/ButtonWithDropdownMenu.stories.tsx
@@ -1,5 +1,9 @@
+import type {ComponentStory} from '@storybook/react';
 import React from 'react';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
+import type {ButtonWithDropdownMenuProps} from '@components/ButtonWithDropdownMenu/types';
+
+type ButtonWithDropdownMenuStory = ComponentStory<typeof ButtonWithDropdownMenu>;
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -11,23 +15,23 @@ const story = {
     component: ButtonWithDropdownMenu,
 };
 
-function Template(args) {
+function Template(args: ButtonWithDropdownMenuProps<unknown>) {
     // eslint-disable-next-line react/jsx-props-no-spreading
     return <ButtonWithDropdownMenu {...args} />;
 }
 
 // Arguments can be passed to the component by binding
 // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Default = Template.bind({});
+const Default: ButtonWithDropdownMenuStory = Template.bind({});
 Default.args = {
-    buttonText: 'Pay using Expensify',
+    customText: 'Pay using Expensify',
     onPress: (e, item) => {
-        alert(`Button ${item} is pressed.`);
+        alert(`Button ${item as string} is pressed.`);
     },
     pressOnEnter: true,
     options: [
-        {value: 'One', text: 'One'},
-        {value: 'Two', text: 'Two'},
+        {value: 'One', text: 'One', icon: Expensicons.Wallet},
+        {value: 'Two', text: 'Two', icon: Expensicons.Wallet},
     ],
 };
 

From 90d87e928c61970eb858f8e54d541cc436206edc Mon Sep 17 00:00:00 2001
From: ruben-rebelo <ruben.rato96@gmail.com>
Date: Mon, 11 Mar 2024 16:22:05 +0000
Subject: [PATCH 2/3] [TS migration][G14] Lint fix

---
 src/components/AddressSearch/index.tsx         | 1 +
 src/components/Banner.tsx                      | 3 ++-
 src/components/Button/index.tsx                | 1 +
 src/stories/AddressSearch.stories.tsx          | 4 ++--
 src/stories/Banner.stories.tsx                 | 4 ++--
 src/stories/Button.stories.tsx                 | 4 ++--
 src/stories/ButtonWithDropdownMenu.stories.tsx | 4 ++--
 7 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/components/AddressSearch/index.tsx b/src/components/AddressSearch/index.tsx
index 1eebff7b5bfa..c57dfb7eef50 100644
--- a/src/components/AddressSearch/index.tsx
+++ b/src/components/AddressSearch/index.tsx
@@ -455,4 +455,5 @@ function AddressSearch(
 AddressSearch.displayName = 'AddressSearchWithRef';
 
 export default forwardRef(AddressSearch);
+
 export type {AddressSearchProps};
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index b4bdfa8405fa..a46b37c986ba 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -109,4 +109,5 @@ function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRend
 Banner.displayName = 'Banner';
 
 export default memo(Banner);
-export type {BannerProps}
+
+export type {BannerProps};
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index b11e16e47f6e..3e089bfe6e8d 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -348,4 +348,5 @@ function Button(
 Button.displayName = 'Button';
 
 export default withNavigationFallback(React.forwardRef(Button));
+
 export type {ButtonProps};
diff --git a/src/stories/AddressSearch.stories.tsx b/src/stories/AddressSearch.stories.tsx
index a648a20c0bfa..50e34cc5b061 100644
--- a/src/stories/AddressSearch.stories.tsx
+++ b/src/stories/AddressSearch.stories.tsx
@@ -20,14 +20,14 @@ const story: ComponentMeta<typeof AddressSearch> = {
     },
 };
 
-function Template(args: AddressSearchProps) {
+function Template(props: AddressSearchProps) {
     const [value, setValue] = useState<string | number | RenamedInputKeysProps | StreetValue>('');
     return (
         <AddressSearch
             value={value as string}
             onInputChange={(inputValue) => setValue(inputValue)}
             // eslint-disable-next-line react/jsx-props-no-spreading
-            {...args}
+            {...props}
         />
     );
 }
diff --git a/src/stories/Banner.stories.tsx b/src/stories/Banner.stories.tsx
index 6e71979a88a8..9328e3d513ab 100644
--- a/src/stories/Banner.stories.tsx
+++ b/src/stories/Banner.stories.tsx
@@ -15,9 +15,9 @@ const story = {
     component: Banner,
 };
 
-function Template(args: BannerProps) {
+function Template(props: BannerProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <Banner {...args} />;
+    return <Banner {...props} />;
 }
 
 // Arguments can be passed to the component by binding
diff --git a/src/stories/Button.stories.tsx b/src/stories/Button.stories.tsx
index 0ad1fc57b8df..3e094b0c65bf 100644
--- a/src/stories/Button.stories.tsx
+++ b/src/stories/Button.stories.tsx
@@ -18,9 +18,9 @@ const story: ComponentMeta<typeof Button> = {
     component: Button,
 };
 
-function Template(args: ButtonProps) {
+function Template(props: ButtonProps) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <Button {...args} />;
+    return <Button {...props} />;
 }
 
 // Arguments can be passed to the component by binding
diff --git a/src/stories/ButtonWithDropdownMenu.stories.tsx b/src/stories/ButtonWithDropdownMenu.stories.tsx
index 720e1de4370f..eb751c974e5b 100644
--- a/src/stories/ButtonWithDropdownMenu.stories.tsx
+++ b/src/stories/ButtonWithDropdownMenu.stories.tsx
@@ -15,9 +15,9 @@ const story = {
     component: ButtonWithDropdownMenu,
 };
 
-function Template(args: ButtonWithDropdownMenuProps<unknown>) {
+function Template(props: ButtonWithDropdownMenuProps<unknown>) {
     // eslint-disable-next-line react/jsx-props-no-spreading
-    return <ButtonWithDropdownMenu {...args} />;
+    return <ButtonWithDropdownMenu {...props} />;
 }
 
 // Arguments can be passed to the component by binding

From cc466d24155eb47bda5f4dd0ffce7c79b7424429 Mon Sep 17 00:00:00 2001
From: ruben-rebelo <ruben.rato96@gmail.com>
Date: Fri, 22 Mar 2024 10:01:46 +0000
Subject: [PATCH 3/3] [TS migration][g14] Fixed buttonwithdropdownmenu story

---
 src/stories/ButtonWithDropdownMenu.stories.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/stories/ButtonWithDropdownMenu.stories.tsx b/src/stories/ButtonWithDropdownMenu.stories.tsx
index eb751c974e5b..dd7d8a783aaf 100644
--- a/src/stories/ButtonWithDropdownMenu.stories.tsx
+++ b/src/stories/ButtonWithDropdownMenu.stories.tsx
@@ -2,6 +2,7 @@ import type {ComponentStory} from '@storybook/react';
 import React from 'react';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
 import type {ButtonWithDropdownMenuProps} from '@components/ButtonWithDropdownMenu/types';
+import * as Expensicons from '@components/Icon/Expensicons';
 
 type ButtonWithDropdownMenuStory = ComponentStory<typeof ButtonWithDropdownMenu>;