[TS migration] Migrate G14 stories from storybook to Typescript

src/components/AddressSearch/index.tsx

@@ -455,3 +455,5 @@ function AddressSearch(
 AddressSearch.displayName = 'AddressSearchWithRef';
 
 export default forwardRef(AddressSearch);
+
+export type {AddressSearchProps};

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};

src/components/Banner.tsx

@@ -109,3 +109,5 @@ function Banner({text, onClose, onPress, containerStyles, textStyles, shouldRend
 Banner.displayName = 'Banner';
 
 export default memo(Banner);
+
+export type {BannerProps};

src/components/Button/index.tsx

@@ -352,3 +352,5 @@ function Button(
 Button.displayName = 'Button';
 
 export default withNavigationFallback(React.forwardRef(Button));
+
+export type {ButtonProps};

src/stories/AddressSearch.stories.js → 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,25 +20,26 @@ export default {
     },
 };
 
-function Template(args) {
-    const [value, setValue] = useState('');
+function Template(props: 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}
+            {...props}
         />
     );
 }
 
 // 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};

src/stories/Banner.stories.js → 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(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
 // 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,

src/stories/Button.stories.js → 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(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
 // 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>

src/stories/ButtonWithDropdownMenu.stories.js → src/stories/ButtonWithDropdownMenu.stories.tsx

@@ -1,5 +1,10 @@
+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>;
 
 /**
  * We use the Component Story Format for writing stories. Follow the docs here:
@@ -11,23 +16,23 @@ const story = {
     component: ButtonWithDropdownMenu,
 };
 
-function Template(args) {
+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
 // 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},
     ],
 };